Merge pull request #28 from KieIO/m6-tan

M6 tan DeliveryAndPolicyPage DeliveryAndPolicyContent

pages/privacy-policy.tsx

@@ -0,0 +1,12 @@
+import { Layout } from "src/components/common"
+import { DeliveryAndPolicyContent, DeliveryAndPolicyBreadCrumb } from "src/components/modules/delivery-policy"
+
+export default function DeliveryAndPolicyPage () {
+    return (
+        <>
+            <DeliveryAndPolicyBreadCrumb />
+            <DeliveryAndPolicyContent />
+        </>
+    )
+}
+DeliveryAndPolicyPage.Layout = Layout

src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss

@@ -52,7 +52,8 @@
     }
 }
 .contentContainer {
-    @apply hidden pb-16;
+    @apply hidden pb-16 whitespace-pre-line;
+    padding-top: 1.6rem;
 }
 @keyframes ContentAnimationIn {
     0% {

src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx

@@ -1,11 +1,10 @@
 import s from './CollapseChild.module.scss'
 import { useState } from 'react'
 import classNames from 'classnames'
-import CollapseContent from './CollapseContent/CollapseContent'
 
 interface CollapseProps{
     title?: string,
-    content: Array<string>,
+    content: string,
     isToggle?: boolean,
 }
 const CollapseChild = ({title, content, isToggle=false}: CollapseProps) => {
@@ -26,9 +25,7 @@ const CollapseChild = ({title, content, isToggle=false}: CollapseProps) => {
                 <div className={s.toggle}></div>
             </div>
             <div className={s.contentContainer}>
-                {
-                    content.map(item => <CollapseContent key={item} content={item} />)
-                }
+                {content}
             </div>
         </div>
     )

src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.module.scss

@@ -1,3 +0,0 @@
-.content {
-    margin-top: 1.6rem;
-}

src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.tsx

@@ -1,15 +0,0 @@
-import s from './CollapseContent.module.scss'
-
-interface CollapseContentProps{
-    content: string
-}
-
-const CollapseContent = ({content}: CollapseContentProps) => {
-    return (
-        <div className={s.content}>
-            {content}
-        </div>
-    )
-}
-
-export default CollapseContent

src/components/common/CollapseCommon/CollapseCommon.tsx

@@ -1,15 +1,15 @@
 import CollapseChild from './CollapseChild/CollapseChild'
 
 interface CollapseCommonProps{
-    data: {title: string, content: Array<string>}[],
+    data: {title: string, content: string}[],
 }
 
 const CollapseCommon = ({data}: CollapseCommonProps) => {
     return (
         <section>
             {
-                data.map(item =>
-                    <CollapseChild key={item.title} title={item.title} content={item.content}/>
+                data.map((item,index) =>
+                    <CollapseChild key={`${item.title}-${index}`} title={item.title} content={item.content} />
                 )
             }
         </section>

src/components/common/Footer/Footer.tsx

@@ -48,7 +48,7 @@ const FOOTER_COLUMNS = [
             },
             {
                 name: 'Privacy Policy',
-                link: ROUTE.TERM_CONDITION,
+                link: ROUTE.PRIVACY_POLICY,
             },
             {
                 name: 'Blog',

src/components/common/index.ts

@@ -38,6 +38,7 @@ export { default as CollapseCommon} from './CollapseCommon/CollapseCommon'
 export { default as BreadcrumbCommon } from './BreadcrumbCommon/BreadcrumbCommon'
 export { default as ImgWithLink} from './ImgWithLink/ImgWithLink'
 export { default as RecipeDetail} from './RecipeDetail/RecipeDetail'
+export { default as BreadcrumbCommon} from './BreadcrumbCommon/BreadcrumbCommon'
 export { default as DrawerCommon} from './DrawerCommon/DrawerCommon'
 export { default as CartDrawer} from './CartDrawer/CartDrawer'
 export { default as StaticImage} from './StaticImage/StaticImage'

src/components/modules/delivery-policy/DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb.module.scss

@@ -0,0 +1,8 @@
+@import "../../../../styles/utilities";
+
+.breadCrumb {
+    @apply absolute z-10 pt-12 spacing-horizontal;
+    @screen lg{
+        padding-left: 3.2rem;
+    }
+}

src/components/modules/delivery-policy/DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb.tsx

@@ -0,0 +1,17 @@
+import { BreadcrumbCommon } from 'src/components/common'
+import s from './DeliveryAndPolicyBreadCrumb.module.scss'
+
+const CRUMB_DATA = [
+    {
+        link: "/delivery-policy",
+        name: "Delivery And Policy"
+    }
+]
+const DeliveryAndPolicyBreadCrumb = () => {
+    return (
+        <section className={s.breadCrumb}>
+            <BreadcrumbCommon crumbs={CRUMB_DATA}/>
+        </section>  
+    )
+}
+export default DeliveryAndPolicyBreadCrumb

src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.module.scss

@@ -0,0 +1,26 @@
+@import "../../../../styles/utilities";
+
+.wrapper {
+    @apply flex justify-center pt-20 pb-28 spacing-horizontal;
+    .deliveryAndPolicyContentWrapper {
+        max-width: 80.4rem;
+        min-height: 4rem;
+        .titleWrapper {
+            @apply flex flex-col items-start;
+            .date {
+                @apply inline flex flex-row;
+                margin-bottom: 0.4rem;
+                .update {
+                    @apply uppercase leading-8;
+                    color:var(--text-label);
+                    font-size: 1.2rem;
+                    letter-spacing: 0.01em;
+                }
+            }
+        }
+        .content {
+            @apply pb-16 whitespace-pre-line;
+            padding-top: 1.6rem;
+        }
+    }
+}

src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.tsx

@@ -1,22 +1,77 @@
-import { DateTime } from 'src/components/common'
+import { CollapseCommon, DateTime, HeadingCommon } from 'src/components/common'
 import s from './DeliveryAndPolicyContent.module.scss'
 
 interface DeliveryAndPolicyContentProps{
     title?: string,
-    date: string,
-    content: string[],
+    date?: string,
+    content?: string,
 }
+const HEADER_CONTENT = 
+`When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.
 
-const DeliveryAndPolicyContent = ( { title, date, content } : DeliveryAndPolicyContentProps) => {
+Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.
+
+This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.`;
+
+const DELIVERYANDPOLICY_DATA = [
+    {
+        title: "This is a subtitle",
+        content: `When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.
+
+        Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.
+        
+        This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.`,
+    },
+    {
+        title: "This is a subtitle",
+        content: `When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.
+
+        Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.
+        
+        This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.`,
+    },
+    {
+        title: "This is a subtitle",
+        content: `When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.
+
+        Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.
+        
+        This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.`,
+    },
+    {
+        title: "This is a subtitle",
+        content: `When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.
+
+        Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.
+        
+        This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.`,
+    },
+    {
+        title: "This is a subtitle",
+        content: `When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.
+
+        Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.
+        
+        This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.`,
+    },
+]
+
+const DeliveryAndPolicyContent = ( { title="Delivery & Policy", date="APRIL 30, 2021", content = HEADER_CONTENT } : DeliveryAndPolicyContentProps) => {
     return (
-        <section>
+        <section className={s.wrapper}>
+
+            <div className={s.deliveryAndPolicyContentWrapper}>
                 <div className={s.titleWrapper}>
-                <div>LASTEST UPDATED: 
+                    <div className={s.date}>
+                        <div className={s.update}>LASTEST UPDATED:&nbsp;</div>
                         <DateTime date={date} />
                     </div>
-                <div className={s.title}>
-                    {title}
+                    <HeadingCommon>{title}</HeadingCommon>
                 </div>
+                <div className={s.content}>
+                    {content}
+                </div>
+                <CollapseCommon data={DELIVERYANDPOLICY_DATA} />
             </div>
 
         </section>

src/components/modules/delivery-policy/index.tsx

@@ -1 +1,2 @@
 export { default as DeliveryAndPolicyContent } from './DeliveryAndPolicyContent/DeliveryAndPolicyContent'
+export { default as DeliveryAndPolicyBreadCrumb } from './DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb'