Merge pull request #5 from KieIO/m1-sonnguyen

M1 sonnguyen: Heading common, scroll to top, heading collection

.gitignore

@@ -4,6 +4,7 @@
 node_modules
 /.pnp
 .pnp.js
+package-lock.json
 
 # testing
 /coverage

pages/index.tsx

@@ -1,15 +1,18 @@
-
-import { Banner, ButtonCommon, ButtonIconBuy, Inputcommon, InputSearch, Layout } from 'src/components/common';
+import React, { MutableRefObject, useRef } from 'react';
+import { Banner, ButtonCommon, ButtonIconBuy, CollectionHeading, HeadingCommon, Inputcommon, InputSearch, Layout, ScrollTarget } from 'src/components/common';
 import { IconBuy } from 'src/components/icons';
-import { HomeBanner } from 'src/components/modules/home';
-
 
 export default function Home() {
+  const refScrollUp = useRef() as MutableRefObject<HTMLDivElement>;
+
   return (
     <>
-      <HomeBanner />
-      <div>This is home page</div>
-      <p>Go to <code>pages/index.tsx</code> to get your hand dirty!</p>
+      <ScrollTarget refScrollUp={refScrollUp} />
+      <HeadingCommon align="center">categories</HeadingCommon>
+      <HeadingCommon type='light'>categories</HeadingCommon>
+      <CollectionHeading subtitle='Lorem' title='Heading here'/>
+      <HeadingCommon align="center" type='light'>categories</HeadingCommon>
+
       <p>Go to <code>src/components</code> to make your awesome component!</p>
       <p>Go to <code>src/styles</code> to find global styles!</p>
 

src/components/common/CollectionHeading/CollectionHeading.module.scss

@@ -0,0 +1,3 @@
+.subtitle {
+    margin-top: .4rem;
+}

src/components/common/CollectionHeading/CollectionHeading.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import s from './CollectionHeading.module.scss'
+import HeadingCommon from '../HeadingCommon/HeadingCommon'
+
+interface CollectionHeadingProps {
+    type?: 'default' | 'highlight' | 'light';
+    title: string;
+    subtitle: string;
+}
+
+const CollectionHeading = ({ type = 'default', title, subtitle }: CollectionHeadingProps) => {
+
+    return (
+        <section>
+            <HeadingCommon type={type}>{title}</HeadingCommon>
+            <div className={s.subtitle}>{subtitle}</div>
+        </section>
+    )
+
+}
+
+export default CollectionHeading

src/components/common/HeadingCommon/HeadingCommon.module.scss

@@ -0,0 +1,15 @@
+@import '../../../styles/utilities';
+
+.headingCommon {
+  @apply heading-1 font-heading text-left;
+
+  &.highlight {
+    color: var(--negative);
+  }
+  &.light {
+    color: var(--white);
+  }
+  &.center {
+    @apply text-center;
+  } 
+}

src/components/common/HeadingCommon/HeadingCommon.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import classNames from 'classnames'
+import s from './HeadingCommon.module.scss'
+
+interface HeadingCommonProps {
+    type?: 'highlight' | 'light' | 'default';
+    align?: 'center' | 'left';
+    children: string;
+}
+
+const HeadingCommon = ({ type='default', align='left', children }: HeadingCommonProps) => {
+
+    return (
+        <h1 className={classNames(s.headingCommon, {
+            [s[type]]: type,
+            [s[align]]: align
+          })}
+        >{children}</h1>
+    )
+
+}
+
+export default HeadingCommon

src/components/common/ScrollToTop/ScrollTarget.tsx

@@ -0,0 +1,15 @@
+import React, { MutableRefObject } from 'react'
+
+interface ScrollTargetProps {
+    refScrollUp: MutableRefObject<HTMLDivElement>;
+}
+
+const ScrollTarget = ({ refScrollUp } : ScrollTargetProps) => {
+
+    return (
+        <div ref={refScrollUp}></div>
+    )
+
+}
+
+export default ScrollTarget

src/components/common/ScrollToTop/ScrollToTop.module.scss

@@ -0,0 +1,24 @@
+@import '../../../styles/utilities';
+
+.scrollToTop {
+    @apply hidden;
+
+    @screen md {
+        &.show {
+            @apply block rounded-lg fixed cursor-pointer;
+            right: 11.2rem;
+            bottom: 21.6rem; 
+            width: 6.4rem;
+            height: 6.4rem;
+            background-color: var(--border-line);
+        }
+        
+        &.hide {
+            @apply hidden;
+        }
+    }
+
+    .scrollToTopBtn {
+        @apply outline-none w-full h-full;
+    }
+}

src/components/common/ScrollToTop/ScrollToTop.tsx

@@ -0,0 +1,54 @@
+import React, { useState, useEffect, MutableRefObject } from 'react'
+import classNames from 'classnames'
+import s from './ScrollToTop.module.scss'
+
+import ArrowUp from '../../icons/IconArrowUp'
+
+interface ScrollToTopProps {
+    target: MutableRefObject<HTMLDivElement>;
+    visibilityHeight?: number;
+}
+
+const ScrollToTop = ({ target, visibilityHeight=450 }: ScrollToTopProps) => {
+
+    const [scrollPosition, setSrollPosition] = useState(0);
+    const [showScrollToTop, setShowScrollToTop] = useState("hide");
+
+    function handleVisibleButton() {
+        const position = window.pageYOffset;
+        setSrollPosition(position);
+    
+        if (scrollPosition > visibilityHeight) {
+          return setShowScrollToTop("show")
+        } else if (scrollPosition < visibilityHeight) {
+          return setShowScrollToTop("hide");
+        }
+    };
+
+    function handleScrollUp() {
+        target.current.scrollIntoView({ behavior: "smooth" });
+    }
+
+    function addEventScroll() {
+        window.addEventListener("scroll", handleVisibleButton);
+    }
+
+    useEffect(() => {
+        addEventScroll()
+    });    
+
+    return (
+        <div className={classNames(s.scrollToTop, {
+            [s[`${showScrollToTop}`]]: showScrollToTop
+          })}
+          onClick={handleScrollUp}
+          >
+            <button className={s.scrollToTopBtn}>
+                <ArrowUp />
+            </button>
+        </div>
+    )
+
+}
+
+export default ScrollToTop

src/components/common/index.ts

@@ -8,6 +8,10 @@ export { default as ViewAllItem} from './ViewAllItem/ViewAllItem'
 export { default as ItemWishList} from './ItemWishList/ItemWishList'
 export { default as Logo} from './Logo/Logo'
 export { default as Inputcommon} from './InputCommon/InputCommon'
+export { default as HeadingCommon } from './HeadingCommon/HeadingCommon'
+export { default as CollectionHeading } from './CollectionHeading/CollectionHeading'
+export { default as ScrollToTop } from './ScrollToTop/ScrollToTop'
+export { default as ScrollTarget } from './ScrollToTop/ScrollTarget'
 export { default as InputSearch} from './InputSearch/InputSearch'
 export { default as ButtonIconBuy} from './ButtonIconBuy/ButtonIconBuy'
 export { default as Banner} from './Banner/Banner'

src/components/icons/IconArrowUp.tsx

@@ -0,0 +1,10 @@
+const ArrowUp = () => {
+
+    return (
+        <svg style={{margin:"auto", fontWeight: "bold"}} xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#141414" className="bi bi-chevron-up" viewBox="0 0 16 16">
+            <path stroke="#141414" stroke-width="1" fillRule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
+        </svg>
+    )
+  }
+  
+  export default ArrowUp

src/components/icons/index.ts

@@ -1,4 +1,5 @@
 export { default as IconBuy } from './IconBuy'
+export { default as ArrowUp } from './IconArrowUp'
 export { default as IconSearch } from './IconSearch'
 export { default as IconArrowRight } from './IconArrowRight'
 export { default as IconUser } from './IconUser'