Merge branch 'common' of github.com:KieIO/grocery-vercel-commerce into m2-datnguyen

src/components/common/Author/Author.module.scss

@@ -0,0 +1,17 @@
+.authorWarper{
+    @apply flex flex-row items-center;
+    
+    .authorImage{
+        width:3.2rem;
+        height:3.2rem;
+        border-radius:3.2rem;
+    }
+    .authorName{
+        margin-left:1rem;
+        color:var(--text-label);
+        font-family: var(--font-sans);
+        font-size: 1.2rem;
+        line-height: 2rem;
+        font-feature-settings: 'salt' on;
+    }
+}

src/components/common/Author/Author.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import s from './Author.module.scss';
+import classNames from 'classnames';
+
+import Image from "next/image";
+interface Props {
+    image:any,
+    name: string
+}
+
+const Author = ({image,name}:Props) =>{
+
+    return (
+        <div className={classNames(s.authorWarper)}>
+            <Image className={classNames(s.authorImage)}  src={image}  alt=""/>
+            <div className={classNames(s.authorName)}>{name}</div>
+        </div>
+    )
+}
+
+export default Author;

src/components/common/ButtonCommon/ButtonCommon.module.scss

@@ -88,8 +88,6 @@
     }
   }
 
-
-
   &.preserve {
     flex-direction: row-reverse;
     .icon {

src/components/common/CheckboxCommon/CheckboxCommon.module.scss

@@ -0,0 +1,71 @@
+@import '../../../styles/utilities';
+.checkboxCommonWarper{
+    @apply flex flex-col;
+
+    .checkboxItem{
+        display: block;
+        position: relative;
+        cursor: pointer;
+        border-radius: 0.4rem;
+        width:50%;
+        &:hover .checkboxInput ~ .checkMark {
+            background-color: #ccc;
+        }
+
+        .checkboxInput{
+            position: absolute;
+            opacity: 0;
+            cursor: pointer;
+            height: 0;
+            width: 0;
+            &:checked ~ .checkMark:after {
+                display: block;
+            }
+        }
+        .checkMark {
+            border-radius: 0.4rem;
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 2rem;
+            width: 2rem;
+            background-color:var(--positive);
+            &:after {
+                left: 25.74%;
+                bottom: 34.6%;
+                width: 0.878rem;
+                height: 0.7rem;
+                color:white;
+                content: "";
+                background-image:url('/assets/svg/checkmark.svg');
+                background-size:cover;
+                background-repeat: no-repeat;
+                position: absolute;
+                display: none;
+            }
+        }
+        &~ .checkMark{
+            background-color: #ccc;
+            
+        }
+        &:checked ~ .checkMark {
+            background-color: #2196F3;
+        }
+        &:checked ~ .checkMark:after {
+            display: block;
+        }          
+        &:hover .checkboxInput ~ .checkMark {
+            background-color: #ccc;
+        }
+  
+
+    }
+    .checkboxText{
+        margin-left:3rem;
+        font-size:1.2rem;
+        line-height: 2rem;
+        font-family: var(--font-sans);
+        color:var(--text-base);
+        letter-spacing: 0.01em;
+    }
+}

src/components/common/CheckboxCommon/CheckboxCommon.tsx

@@ -0,0 +1,40 @@
+import React,{ChangeEvent,useState,useEffect} from 'react';
+import s from './CheckboxCommon.module.scss';
+import classNames from 'classnames';
+
+interface CheckboxProps extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'onChange' 
+    >{
+    onChange?: (value: boolean) => void,
+    defaultChecked?: boolean
+}
+
+const CheckboxCommon = ({onChange,defaultChecked = true,...props}: CheckboxProps) =>{
+    
+    const [value, setValue] = useState<boolean>(true);
+
+    useEffect(()=>{
+        onChange && onChange(value)
+    },[value])
+
+
+    const onValueChange = (e: ChangeEvent<HTMLInputElement>)=>{
+        let value =e.target.checked;
+        setValue(value);
+    }
+
+    return (
+        <div className={classNames(s.checkboxCommonWarper)}>
+             <label className={classNames(s.checkboxItem)}>
+                <input id="check" defaultChecked={defaultChecked} className={s.checkboxInput} type="checkbox" onChange={onValueChange}/>
+                <span className={s.checkMark}></span>
+             </label>
+             <div className={classNames(s.checkboxText)}>
+                <label htmlFor="check"> Billing address is same as shipping </label>
+             </div>
+        </div>
+    )
+}
+
+export default CheckboxCommon;

src/components/common/DateTime/DateTime.module.scss

@@ -0,0 +1,9 @@
+.dateTime{
+    color:var(--text-label);
+    text-transform: uppercase;
+    font-size: 1.2rem;
+    line-height: 2rem;
+    letter-spacing: 0.01em;
+    font-feature-settings: 'salt' on;
+    font-family: var(--font-sans);
+}

src/components/common/DateTime/DateTime.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import s from './DateTime.module.scss';
+import classNames from 'classnames';
+
+interface Props {
+    date:string,
+}
+
+const DateTime = ({date}:Props) =>{
+    return (
+      <div  className={classNames(s.dateTime)}>{date}</div>
+    )
+}
+
+export default DateTime;

src/components/common/Header/Header.module.scss

@@ -13,4 +13,7 @@
     padding-left: 3.2rem;
     padding-right: 3.2rem;
   }
+  .logo {
+    @apply font-logo;
+  }
 }

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

@@ -1,7 +1,7 @@
 @import '../../../styles/utilities';
 
 .headingCommon {
-  @apply heading-1 font-heading text-left;
+  @apply heading-2 font-heading text-left;
 
   &.highlight {
     color: var(--negative);

src/components/common/HeadingCommon/HeadingCommon.tsx

@@ -11,11 +11,11 @@ interface HeadingCommonProps {
 const HeadingCommon = ({ type='default', align='left', children }: HeadingCommonProps) => {
 
     return (
-        <h1 className={classNames(s.headingCommon, {
+        <h2 className={classNames(s.headingCommon, {
             [s[type]]: type,
             [s[align]]: align
           })}
-        >{children}</h1>
+        >{children}</h2>
     )
 
 }

src/components/common/InputCommon/InputCommon.tsx

@@ -38,7 +38,6 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleTyp
 
     const handleKeyDown = (e: any) => {
         if (e.key === KEY.ENTER && onEnter) {
-            console.log("on enter***")
             const value = inputElementRef.current?.value || ''
             onEnter(value)
         }

src/components/common/Logo/Logo.module.scss

@@ -1,15 +1,15 @@
 @import '../../../styles/utilities';
 
-.logo{
+.logo {
     display: flex;
-    .eclipse{
+    .eclipse {
         width: 3.2rem;
         height: 3.2rem;
         background-color: var(--primary);
         border-radius: 50%;
         margin-right: 1.2rem;
     }
-    .content{
+    .content {
         @apply font-logo;
         font-size: 16px;
         line-height: 32px;

src/components/common/index.ts

@@ -12,6 +12,9 @@ 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 CheckboxCommon} from './CheckboxCommon/CheckboxCommon'
+export { default as Author} from './Author/Author'
+export { default as DateTime} from './DateTime/DateTime'
 export { default as HeadingCommon } from './HeadingCommon/HeadingCommon'
 export { default as CollectionHeading } from './CollectionHeading/CollectionHeading'
 export { default as ScrollToTop } from './ScrollToTop/ScrollToTop'