@hellobetterdigitalnz/selwynui 0.0.1-78 → 0.0.1-80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hellobetterdigitalnz/selwynui",
-  "version": "0.0.1-78",
+  "version": "0.0.1-80",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

package/src/Components/DataDisplay/Accordion/Accordion.stories.tsx

@@ -31,7 +31,7 @@ const AccordionTemplate: Story = {
         };
 
         return (
-            <ElementHolder paddingBottom="md" paddingTop="sm" pillar="visit">
+            <ElementHolder paddingBottom="md" paddingTop="md" pillar="visit">
                  <Accordion {...args}>
                         {items.map((item: any) => (
                             <AccordionItem
@@ -71,6 +71,11 @@ export const Example = {
         <img src="/img/accordion-image.svg" alt="" />
         </>,
       },
+      {
+        index:'3',
+        title: 'Lorem ipsum dolor',
+        children: <p>Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. Duis vestibulum velit eget erat fermentum, fermentum mollis tortor tincidunt. Integer lacinia lacinia urna scelerisque mattis. Fusce vestibulum felis eget magna placerat faucibus id et tellus. Sed rutrum mi sed leo viverra tempus. Nunc eu congue tellus, sed dapibus dui.</p>
+      },
     ],
   },
 };

package/src/Components/DataDisplay/Accordion/Accordion.tsx

@@ -34,22 +34,24 @@ const Accordion = (props: AccordionProps) => {
     <AccordionProvider allowMultiple={allowMultiple ?? false} >
       <Container>
         <div className={styles.accordionBlock} >
-        {title && (
-          <div className={styles.accordionHeading}>
+          {title && (
+            <div className={styles.accordionHeading}>
+              <ScrollFadeIn>
+                <h2>{title}</h2>
+                <p>{content}</p>
+              </ScrollFadeIn>
+            </div>
+
+          )}
+          <div className={`${styles.accordionWrapper}`}>
             <ScrollFadeIn>
-              <h2>{title}</h2>
-              <p>{content}</p>
+              {children}
             </ScrollFadeIn>
           </div>
-
-        )}
-        <div className={`${styles.accordionWrapper}`}>
-          {children}
-        </div>
-        <div className={styles.accordionBgDesignContainer}>
+          <div className={styles.accordionBgDesignContainer}>
             <AccordionBgDesign />
           </div>
-      </div>
+        </div>
       </Container>
     </AccordionProvider>
   );

package/src/Components/DataDisplay/Accordion/accordion.module.scss

@@ -62,7 +62,7 @@
             display: flex;
             align-items: center;
             cursor: pointer;
-            padding: 16px 32px;
+            padding: 14px 32px;
         }
 
         .accordionBodyHolder {
@@ -82,11 +82,26 @@
 
             p {
                 margin: 8px 32px 32px 0;
-                font-size: var(--font-size-body-regular);
-                font-weight: var(--font-weight-body-regular);
                 padding: 0 16px 0 0;
                 line-height: var(--line-height-body-regular);
             }
+
+            p:has(+ button) {
+                margin-bottom: 8px !important;
+            }
+
+            button {
+                display: inline-flex;
+                flex-wrap: nowrap;
+                margin-top: 16px;
+            }
+
+            img {
+                width: 100%;
+                height: 450px;
+                border-radius: 12px;
+                object-fit: cover;
+            }
         }
     }
 
@@ -97,11 +112,11 @@
         margin: 0 -45px;
 
         .accordionHeading {
-            width: 39%;
+            width: 37%;
             padding: 0 45px;
 
             h2 {
-                padding-bottom: 72px;
+                padding-bottom: 62px;
             }
         }
 
@@ -109,6 +124,11 @@
             width: 61%;
             position: relative;
             padding: 0 45px;
+            margin-top: 8px;
+
+            .title {
+                margin-top: 2px;
+            }
         }
 
         .accordionBgDesignContainer {

package/src/Components/Layout/Footer/footer.module.scss

@@ -12,103 +12,102 @@
     background-color: var(--color-taste);
     padding: 24px 16px;
 
-    .footerTopWrapper {
-      color: var(--color-visit);
-      padding-bottom: 44px;
-      align-items: end;
+  }
 
-      .footerTopLeft {
-        align-items: center;
+  .footerTopWrapper {
+    color: var(--color-visit);
+    padding-bottom: 44px;
+    align-items: end;
+  }
 
-        h1 {
-          font-size: var(--font-footer-h1);
-          font-weight: var(--font-weight-h4);
-          line-height: var(--line-height-h4);
+  .footerTopLeft {
+    align-items: center;
 
-          &.footerSub {
-            font-weight: 700;
-          }
-        }
+    h1 {
+      font-size: var(--font-footer-h1);
+      font-weight: var(--font-weight-h4);
+      line-height: var(--line-height-h4);
 
-        // h2 {
-        //   font-size: var(--font-size-h5);
-        //   font-weight: var(--font-weight-bold);
-        //   line-height: var(--line-height-h5);
-        //   // padding-bottom: 32px;
-        // }
-      }
-
-      .footerTopRight {
-        p {
-          font-size: var(--font-size-body-regular);
-        }
+      &.footerSub {
+        font-weight: 700;
       }
     }
 
-    .footerBgDesignContainer {
-      display: none;
+    // h2 {
+    //   font-size: var(--font-size-h5);
+    //   font-weight: var(--font-weight-bold);
+    //   line-height: var(--line-height-h5);
+    //   // padding-bottom: 32px;
+    // }
+  }
+
+  .footerTopRight {
+    p {
+      font-size: var(--font-size-body-regular);
     }
+  }
 
-    
+  .footerBgDesignContainer {
+    display: none;
   }
 
   // Footer Middle
   .footerMiddle {
     background-color: var(--color-visit);
+  }
 
-    .footerMiddleWrapper {
-      padding-top: 35px;
+  .footerMiddleWrapper {
+    padding-top: 35px;
 
-      img {
-        padding-bottom: 72px;
-      }
+    img {
+      padding-bottom: 72px;
+    }
 
-      .footerItem {
-        h3 {
-          color: var(--color-taste);
-          font-size: 36px;
-          font-weight: var(--font-weight-h4);
-        }
+    .footerItem {
+      h3 {
+        color: var(--color-taste);
+        font-size: 36px;
+        font-weight: var(--font-weight-h4);
+      }
 
-        ul {
-          display: none;
-        }
+      ul {
+        display: none;
       }
     }
+  }
 
-    .footerMiddleLinks {
-      font-size: var(--font-size-regular);
+  .footerMiddleLinks {
+    font-size: var(--font-size-regular);
 
-      .footerSocialMediaLogos {
+    .footerSocialMediaLogos {
 
-        .footerBottomRight {
-          .footerBottomRightWrapper {
+      .footerBottomRight {
+        .footerBottomRightWrapper {
+
+          display: flex;
 
-            display: flex;
 
-            
 
-            .footerLogoWrapper {
-              padding: 0 8px 0 0;
-              padding-block: 72px;
+          .footerLogoWrapper {
+            padding: 0 8px 0 0;
+            padding-block: 72px;
 
-              .footerLogo {
+            .footerLogo {
+              display: flex;
+              background-color: #92c134;
+              border-radius: 50%;
+              height: 40px;
+              width: 40px;
+              align-items: center;
+              justify-content: center;
+
+              a {
                 display: flex;
-                background-color: #92c134;
-                border-radius: 50%;
-                height: 40px;
-                width: 40px;
-                align-items: center;
-                justify-content: center;
-
-                a {
-                  display: flex;
-                  color: var(--color-inverse-text);
-
-                  svg {
-                    height: 24px;
-                    width: 24px;
-                  }
+                color: var(--color-inverse-text);
+
+                svg {
+                  height: 24px;
+                  width: 24px;
                 }
               }
             }
@@ -123,51 +122,82 @@
     background-color: var(--color-visit);
     padding-bottom: 72px;
 
-    .footerBottomWrapper {
+    .footerBottomLeftWrapper {
 
-      .footerBottomLeft {
+      .footerBottomLeftLogo {
+        color: var(--font-color);
+        font-size: var(--font-size-body-sm);
+      }
 
-        .footerBottomLeftWrapper {
+      img {
+        padding-bottom: 24px;
+      }
 
-          .footerBottomLeftLogo {
-            color: var(--font-color);
-            font-size: var(--font-size-body-sm);
-            padding-bottom: 72px;
-          }
 
-          img {
-            padding-bottom: 24px;
-          }
+    }
+
+    .footerBottomLeftLinks {
+      display: flex;
+      align-items: flex-end;
+
+      ul {
+        display: flex;
+        gap: 24px;
+        list-style: none;
+        padding: 0;
+        margin: 0;
 
-          
+        a {
+          color: var(--color-taste);
+          font-size: var(--font-size-body-sm);
         }
       }
+    }
 
-      .footerBottomLeftLinks {
-            display: flex;
-            align-items: flex-end;
+   
+
+  }
+
+  .footerBottomRight {
+          display: flex;
+          align-items: flex-end;
+          flex: 1;
+          justify-content: space-between;
+
+          &.footerBottomRightMobile {
+            display: none;
+          }
 
-            ul {
+          .footerBottomRightWrapper {
+
+            display: none;
+            gap: 16px;
+
+            .footerLogo {
               display: flex;
-              gap: 24px;
-              list-style: none;
-              padding: 0;
-              margin: 0;
+              background-color: var(--color-taste);
+              border-radius: 50%;
+              height: 40px;
+              width: 40px;
+              align-items: center;
+              justify-content: center;
 
               a {
-                color: var(--color-taste);
-                font-size: var(--font-size-body-sm);
+                display: flex;
+                color: var(--color-visit);
+
+                svg {
+                  height: 24px;
+                  width: 24px;
+                }
               }
             }
-          }
 
-      .footerBottomRight {
-        display: none;
-      }
-    }
-
-    
-  }
+            .footerMiddleSocialMediaWrapper {
+              display: flex;
+            }
+          }
+        }
 
   @media screen and (min-width: 960px) {
 
@@ -306,47 +336,12 @@
         }
 
         .footerBottomRight {
-          display: flex;
-          align-items: flex-end;
-          flex: 1;
-          justify-content: space-between;
-
-          &.footerBottomRightMobile {
-            display: none;
-          }
-
           .footerBottomRightWrapper {
-
             display: flex;
-            gap: 16px;
-
-            .footerLogo {
-              display: flex;
-              background-color: var(--color-taste);
-              border-radius: 50%;
-              height: 40px;
-              width: 40px;
-              align-items: center;
-              justify-content: center;
-
-              a {
-                display: flex;
-                color: var(--color-visit);
-
-                svg {
-                  height: 24px;
-                  width: 24px;
-                }
-              }
-            }
-
-            .footerMiddleSocialMediaWrapper {
-              display: flex;
-            }
           }
         }
 
-        .paddingBottomLeft {}
+        
       }
     }
   }
@@ -355,6 +350,7 @@
     .footerTop {
       padding-left: 0;
       padding-right: 0;
+
       .footerTopLeft {
         margin-bottom: 32px;
       }
@@ -369,31 +365,50 @@
         padding-bottom: 0;
       }
 
-      
+
     }
 
     .footerMiddle {
-        .footerMiddleWrapper {
-          .footerItem {
-            margin-bottom: 24px;
-            h3 {
-              font-size: var(--font-size-h5);
-            }
+      .footerMiddleWrapper {
+        .footerItem {
+          margin-bottom: 24px;
 
-            &:last-child {
-              margin-bottom: 0;
-            }
+          h3 {
+            font-size: var(--font-size-h5);
+          }
+
+          &:last-child {
+            margin-bottom: 0;
           }
         }
+      }
     }
 
     .footerMiddleLinks {
       padding-bottom: 72px;
     }
-    
+
+    .footerBottom {
+      padding-bottom: 35px;
+      .footerBottomRight {
+        &.footerBottomRightMobile {
+          display: flex;
+          margin-bottom: 72px;
+
+          .footerBottomRightWrapper {
+            display: flex;
+          }
+        }
+      }
+
+      .footerBottomLeftLogo {
+        margin-bottom: 72px;
+      }
+    }
+
   }
 
-  
 
-  
+
+
 }

package/src/Components/Shared/PillarIcon/PillarIcon.tsx

@@ -51,7 +51,16 @@ const PillarIcon = ({ pillar }: PillarIconsProps) => {
     );
   }
   if (pillar === 'taste') {
-    return <div className="pillarIcon taste"></div>;
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 937 932" fill="none">
+      <g opacity="0.03">
+      <path d="M482.009 931.935C733.33 931.935 937 729.109 937 478.829L482.009 478.829L482.009 931.935Z" fill="currentColor"/>
+      <path d="M482.009 453.254C733.33 453.254 937 250.428 937 0.148132L482.009 0.148093L482.009 453.254Z" fill="currentColor"/>
+      <path d="M454.991 931.787C203.67 931.787 1.77446e-05 728.961 3.96247e-05 478.681L454.991 478.681L454.991 931.787Z" fill="currentColor"/>
+      <path d="M454.991 453.106C203.67 453.106 5.95921e-05 250.28 8.14723e-05 -2.088e-05L454.991 1.88966e-05L454.991 453.106Z" fill="currentColor"/>
+      </g>
+      </svg>
+    );
   }
 };
 

package/dist/App.d.ts

@@ -1,2 +0,0 @@
-declare function App(): import("react/jsx-runtime").JSX.Element;
-export default App;

package/dist/Components/DataDisplay/Accordion/Accordion.d.ts

@@ -1,3 +0,0 @@
-import { default as AccordionProps } from './AccordionProps.tsx';
-declare const Accordion: (props: AccordionProps) => import("react/jsx-runtime").JSX.Element;
-export default Accordion;

package/dist/Components/DataDisplay/Accordion/AccordionContext.d.ts

@@ -1,3 +0,0 @@
-import { default as AccordionContextInterface } from './AccordionContextInterface.tsx';
-declare const AccordionContext: import('react').Context<AccordionContextInterface>;
-export default AccordionContext;

package/dist/Components/DataDisplay/Accordion/AccordionContextInterface.d.ts

@@ -1,7 +0,0 @@
-interface AccordionContextInterface {
-    handleClick: (index: number) => void;
-    isOpened: (index: number) => boolean;
-    allowMultiple?: boolean;
-    openedList: any[];
-}
-export default AccordionContextInterface;

package/dist/Components/DataDisplay/Accordion/AccordionItem.d.ts

@@ -1,3 +0,0 @@
-import { default as AccordionItemProps } from './AccordionItemProps.tsx';
-declare const AccordionItem: (props: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
-export default AccordionItem;

package/dist/Components/DataDisplay/Accordion/AccordionItemProps.d.ts

@@ -1,18 +0,0 @@
-import { ReactNode } from 'react';
-interface AccordionItemProps {
-    index: string | number;
-    title: string;
-    children: string | ReactNode;
-    onAfterOpened?: () => void;
-    onAfterClosed?: () => void;
-    onBeforeClosed?: () => boolean;
-    extraClass?: string;
-    accordionClass?: string;
-    icon?: ReactNode;
-    column?: "one" | "two";
-    id?: any;
-    elementId?: string;
-    isOpen?: boolean;
-    onToggle?: (open: boolean) => void;
-}
-export default AccordionItemProps;

package/dist/Components/DataDisplay/Accordion/AccordionProps.d.ts

@@ -1,12 +0,0 @@
-import { ReactNode } from 'react';
-interface AccordionProps {
-    allowMultiple?: boolean;
-    children: ReactNode;
-    title?: string;
-    content?: string;
-    image?: string;
-    activeId?: number | null;
-    onActiveIdChange?: (id: number | null) => void;
-    pillar?: 'visit' | 'live' | 'business' | 'participate' | 'taste';
-}
-export default AccordionProps;

package/dist/Components/DataDisplay/Accordion/AccordionProvider.d.ts

@@ -1,3 +0,0 @@
-import { default as AccordionProviderInterface } from './AccordionProviderInterface.tsx';
-declare const AccordionProvider: (props: AccordionProviderInterface) => import("react/jsx-runtime").JSX.Element;
-export default AccordionProvider;

package/dist/Components/DataDisplay/Accordion/AccordionProviderInterface.d.ts

@@ -1,7 +0,0 @@
-import { ReactNode } from 'react';
-interface AccordionProviderInterface {
-    children: ReactNode;
-    allowMultiple?: boolean;
-    activeId?: string;
-}
-export default AccordionProviderInterface;

package/dist/Components/DataDisplay/Accordion/accordion-bg-design.d.ts

@@ -1,2 +0,0 @@
-declare const AccordionBgDesign: () => import("react/jsx-runtime").JSX.Element;
-export default AccordionBgDesign;

package/dist/Components/DataDisplay/BrandBuilderTool/BrandBuilderTool.d.ts

@@ -1,3 +0,0 @@
-import { default as BrandBuilderToolProps } from './BrandBuilderToolProps.tsx';
-declare const BrandBuilderTool: (props: BrandBuilderToolProps) => import("react/jsx-runtime").JSX.Element;
-export default BrandBuilderTool;

package/dist/Components/DataDisplay/BrandBuilderTool/BrandBuilderToolMain/BrandBuilderToolMain.d.ts

@@ -1,3 +0,0 @@
-import { default as BrandBuilderToolMainProps } from './BrandBuilderToolMainProps.tsx';
-declare const BrandBuilderToolMain: (props: BrandBuilderToolMainProps) => import("react/jsx-runtime").JSX.Element;
-export default BrandBuilderToolMain;

package/dist/Components/DataDisplay/BrandBuilderTool/BrandBuilderToolMain/BrandBuilderToolMainProps.d.ts

@@ -1,5 +0,0 @@
-import { ReactNode } from 'react';
-interface BrandBuilderToolMainProps {
-    children?: ReactNode;
-}
-export default BrandBuilderToolMainProps;

package/dist/Components/DataDisplay/BrandBuilderTool/BrandBuilderToolProps.d.ts

@@ -1,7 +0,0 @@
-import { ReactNode } from 'react';
-interface BrandBuilderToolProps {
-    title?: string;
-    description?: string;
-    children?: ReactNode;
-}
-export default BrandBuilderToolProps;

package/dist/Components/DataDisplay/BrandBuilderTool/BrandBuilderToolTemplate/BrandBuilderToolTemplateItem.d.ts

@@ -1,3 +0,0 @@
-import { default as BrandBuilderToolTemplateItemProps } from './BrandBuilderToolTemplateItemProps.tsx';
-declare const BrandBuilderToolTemplateItem: ({ icon, iconName, active, onClick }: BrandBuilderToolTemplateItemProps) => import("react/jsx-runtime").JSX.Element;
-export default BrandBuilderToolTemplateItem;

package/dist/Components/DataDisplay/BrandBuilderTool/BrandBuilderToolTemplate/BrandBuilderToolTemplateItemProps.d.ts

@@ -1,8 +0,0 @@
-import { ReactNode } from 'react';
-interface BrandBuilderToolTemplateItemProps {
-    icon?: ReactNode;
-    iconName?: string;
-    onClick?: () => void;
-    active?: boolean;
-}
-export default BrandBuilderToolTemplateItemProps;

package/dist/Components/DataDisplay/BrandBuilderTool/BrandBuilderToolTemplate/BrandBuilderToolTemplateSelector.d.ts

@@ -1,3 +0,0 @@
-import { default as BrandBuilderToolTemplateSelectorProps } from './BrandBuilderToolTemplateSelectorProps.tsx';
-declare const BrandBuilderToolTemplateSelector: (props: BrandBuilderToolTemplateSelectorProps) => import("react/jsx-runtime").JSX.Element;
-export default BrandBuilderToolTemplateSelector;