@hellobetterdigitalnz/selwynui 0.0.1-51 → 0.0.1-54

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

@@ -6,6 +6,8 @@ import Accordion from './Accordion.tsx';
 import AccordionItem from './AccordionItem.tsx';
 import Container from "../../Shared/Container/Container";
 import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
+import Button from "../../Form/Button/Button.tsx";
+import { ArrowRight } from "@hellobetterdigitalnz/selwynui";
 
 const meta: Meta = {
   title: 'DataDisplay / Accordion',
@@ -22,7 +24,6 @@ type Story = StoryObj<typeof meta>;
 
 const AccordionTemplate: Story = {
     render: ({ items, ...args }) => {
-        // keep track of open states by index
         const [openItems, setOpenItems] = useState<Record<string, boolean>>({});
 
         const handleToggle = (id: string, value: boolean) => {
@@ -31,8 +32,7 @@ const AccordionTemplate: Story = {
 
         return (
             <ElementHolder paddingBottom="md" paddingTop="sm" pillar="visit">
-                <Container>
-                    <Accordion {...args}>
+                 <Accordion {...args}>
                         {items.map((item: any) => (
                             <AccordionItem
                                 key={item.index}
@@ -45,9 +45,6 @@ const AccordionTemplate: Story = {
                             </AccordionItem>
                         ))}
                     </Accordion>
-                </Container>
-
-                {/* Buttons to trigger specific IDs */}
             </ElementHolder>
         );
     },
@@ -58,32 +55,23 @@ export const Example = {
   args: {
     allowMultiple:true,
     title: 'Insights lorem ipsum dolor sit amet',
-    content: '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.',
+    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ',
     // image: '/img/accordion-image.svg',
     items: [
       {
         index:'1',
         title: 'Lorem ipsum dolor',
-        children: '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.'
+        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>
       },
       {
         index:'2',
         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>
+        <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>
+        <Button label="LEARN MORE" secondaryIcon={<ArrowRight/>} pillar="taste"/>
         <img src="/img/accordion-image.svg" alt="" />
         </>,
       },
-      {
-        index:'3',
-        title: 'Lorem ipsum dolor',
-        children: '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.'
-      },
-      {
-        index:'4',
-        title: 'Lorem ipsum dolor',
-        children: '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.'
-      },
     ],
   },
 };

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

@@ -3,6 +3,7 @@ import AccordionProvider from "./AccordionProvider";
 import AccordionProps from "./AccordionProps.tsx";
 import ScrollFadeIn from "../../Shared/ScrollFadeIn/ScrollFadeIn.tsx";
 import AccordionBgDesign from "./accordion-bg-design.tsx";
+import { Container } from "../../Shared/index.ts";
 
 const Accordion = (props: AccordionProps) => {
   const {
@@ -31,7 +32,8 @@ const Accordion = (props: AccordionProps) => {
 
   return (
     <AccordionProvider allowMultiple={allowMultiple ?? false} >
-      <div className={styles.accordionBlock}>
+      <Container>
+        <div className={styles.accordionBlock} >
         {title && (
           <div className={styles.accordionHeading}>
             <ScrollFadeIn>
@@ -42,12 +44,13 @@ const Accordion = (props: AccordionProps) => {
 
         )}
         <div className={`${styles.accordionWrapper}`}>
-          <div className={styles.accordionBgDesignContainer}>
-            <AccordionBgDesign />
-          </div>
           {children}
         </div>
+        <div className={styles.accordionBgDesignContainer}>
+            <AccordionBgDesign />
+          </div>
       </div>
+      </Container>
     </AccordionProvider>
   );
 };

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

@@ -132,7 +132,7 @@ const AccordionItem = (props: AccordionItemProps) => {
                     <h4>{title}</h4>
                 </div>
                 <div className={`${styles.icon} accordionIcon`}>
-                    {isOpened ? <CaretUp /> : <CaretDown />}
+                    {isOpened ? <CaretUp/> : <CaretDown />}
                 </div>
             </div>
 
@@ -150,7 +150,7 @@ const AccordionItem = (props: AccordionItemProps) => {
                 </div>
             </div>
 
-            <hr className={styles.accordionHorizontalLine}/>
+            <div className={styles.accordionHorizontalLine}></div>
             
         </div>
     );

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

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

package/src/Components/DataDisplay/Accordion/accordion-bg-design.tsx

@@ -1,11 +1,11 @@
 const AccordionBgDesign = () => {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" width="543" height="490" viewBox="0 0 543 490" fill="none">
+        <svg xmlns="http://www.w3.org/2000/svg" width="639" height="577" viewBox="0 0 639 577" fill="none">
             <g opacity="0.05">
-                <path d="M0 251.765C145.603 251.765 263.669 358.442 263.669 490H0V251.765Z" fill="#92C134" />
-                <path d="M0 0.0778264C145.603 0.0778264 263.669 106.755 263.669 238.313H0V0.0778264Z" fill="#92C134" />
-                <path d="M543 489.922C543 358.364 424.934 251.687 279.331 251.687V489.922H543Z" fill="#92C134" />
-                <path d="M543 238.235C543 106.677 424.934 0 279.331 0V238.235H543Z" fill="#92C134" />
+                <path d="M639 296.466C467.655 296.466 328.715 422.083 328.715 577H639V296.466Z" fill="currentColor" />
+                <path d="M639 0.0916445C467.655 0.0916445 328.715 125.71 328.715 280.626H639V0.0916445Z" fill="currentColor" />
+                <path d="M0 576.908C0 421.992 138.94 296.374 310.285 296.374V576.908H0Z" fill="currentColor" />
+                <path d="M0 280.534C0 125.618 138.94 0 310.285 0V280.534H0Z" fill="currentColor" />
             </g>
         </svg>
     )

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

@@ -4,7 +4,8 @@
             font-size: var(--font-size-h4);
             font-weight: var(--font-weight-bold);
             line-height: var(--line-height-h4);
-            padding-bottom: 72px;
+            letter-spacing: var(--letter-spacing-h4);
+            padding-bottom: 32px;
         }
 
         p {
@@ -19,7 +20,6 @@
     }
 
     .accordionWrapper {
-        margin-block: 72px;
 
         .title {
             flex: 1;
@@ -32,46 +32,61 @@
                 font-weight: var(--font-weight-bold);
                 line-height: var(--line-height-body-regular);
             }
+        }
 
-            .accordionIcon {
-                display: flex;
-                align-items: center;
-                margin-right: 4px;
+        .icon {
+            display: flex;
+            align-items: center;
+            margin-right: 4px;
 
-                svg {
-                    width: 24px;
-                    height: 24px;
-                }
+            svg {
+                width: 24px !important;
+                height: 24px !important;
             }
         }
 
+
         .accordion {
             display: flex;
             flex-direction: column;
             overflow: hidden;
+
+            .accordionHorizontalLine {
+                border-bottom: 1px solid var(--color-text);
+                height: 0;
+                width: 100%;
+            }
         }
 
         .header {
             display: flex;
             align-items: center;
             cursor: pointer;
+            padding: 16px 32px;
         }
 
         .accordionBodyHolder {
             .accordionBody {
-                font-size: var(--font-size-body-regular);
-                font-weight: var(--font-weight-body-regular);
-            }
-        }
 
-        .accordionHorizontalLine {
-            background: var(--color-text);
-            margin-block: 16px;
+                img {
+                    width: 100%;
+                    padding: 32px 0;
+                }
+            }
         }
 
         .bodyInner {
             font-size: var(--font-size-body-regular);
             font-weight: var(--font-weight-body-regular);
+            padding-left: 32px;
+
+            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);
+            }
         }
     }
 
@@ -79,25 +94,29 @@
 
         display: flex;
         flex-grow: 1;
-        gap: 90px;
+        margin: 0 -45px;
 
         .accordionHeading {
-            width: 50%;
+            width: 39%;
+            padding: 0 45px;
+
+            h2 {
+                padding-bottom: 72px;
+            }
         }
 
         .accordionWrapper {
-            width: 50%;
+            width: 61%;
             position: relative;
+            padding: 0 45px;
         }
 
         .accordionBgDesignContainer {
             position: absolute;
-            top: -40px;
+            top: 191px;
             right: 0;
             pointer-events: none;
             display: block;
         }
     }
-
-
 }

package/src/Components/DataDisplay/CarouselBlock/CarouselBlock.tsx

@@ -25,44 +25,46 @@ const CarouselBlock = (props : CarouselBlockProps) =>{
 
   return <div className={`${styles.carousel} carouselBlock`}>
    <Container>
-     <div className={styles.carouselTitle}>
-       <h3>{title}</h3>
-       <div className={styles.actions}>
-         <button
-           className="custom-arrow prev"
-           onClick={() => sliderRef.current?.slickPrev()}
-           aria-label="Previous"
-         >
-           <CaretLeft type="thin" />
-         </button>
+     <div className={styles.carouselWrapper}>
+       <div className={styles.carouselTitle}>
+         <h3>{title}</h3>
+         <div className={styles.actions}>
+           <button
+             className="custom-arrow prev"
+             onClick={() => sliderRef.current?.slickPrev()}
+             aria-label="Previous"
+           >
+             <CaretLeft type="thin" />
+           </button>
 
-         <button
-           className="custom-arrow next"
-           onClick={() => sliderRef.current?.slickNext()}
-           aria-label="Next"
-         >
-           <CaretRight type="thin" />
-         </button>
-       </div>
-     </div>
-     <Slider ref={sliderRef} {...settings}>
-       {cards.map((card, index) => (
-         <div className={styles.card}>
-           <DetailsCard
-             key={index}
-             title={card.title}
-             date={card.date}
-             description={card.description}
-             image={card.image}
-             link={card.link}
-             pillar={card.pillar}
-             variation={'long'}
-           />
+           <button
+             className="custom-arrow next"
+             onClick={() => sliderRef.current?.slickNext()}
+             aria-label="Next"
+           >
+             <CaretRight type="thin" />
+           </button>
          </div>
-       ))}
-     </Slider>
-     <div className={styles.btn}>
-       {action}
+       </div>
+       <Slider ref={sliderRef} {...settings}>
+         {cards.map((card, index) => (
+           <div className={styles.card}>
+             <DetailsCard
+               key={index}
+               title={card.title}
+               date={card.date}
+               description={card.description}
+               image={card.image}
+               link={card.link}
+               pillar={card.pillar}
+               variation={'long'}
+             />
+           </div>
+         ))}
+       </Slider>
+       <div className={styles.btn}>
+         {action}
+       </div>
      </div>
    </Container>
   </div>

package/src/Components/DataDisplay/CarouselBlock/carouselBlock.module.scss

@@ -1,54 +1,60 @@
-.carouselTitle{
-  margin: -12px;
-  margin-bottom: 70px;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
-
-  h3{
-    font-size: 36px;
-    line-height: 1;
-    font-weight: 700;
-    padding: 12px;
+.carousel{
+  .carouselWrapper{
+    width: 100%;
   }
 
-  .actions{
-    padding: 12px;
-  }
-
-
-  @media screen and (min-width: 992px) {
-    margin-bottom: 84px;
+  .carouselTitle{
+    margin: -12px;
+    margin-bottom: 70px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
 
     h3{
-      font-size: var(--font-size-h3);
+      font-size: 36px;
+      line-height: 1;
+      font-weight: 700;
+      padding: 12px;
     }
 
-  }
+    .actions{
+      padding: 12px;
+    }
 
-}
 
-.card{
-  width: 312px !important;
-  margin-right: 16px;
-}
+    @media screen and (min-width: 992px) {
+      margin-bottom: 84px;
 
-.btn{
-  margin-top: 36px;
-  display: flex;
-}
+      h3{
+        font-size: var(--font-size-h3);
+      }
 
-@media screen and (min-width: 992px) {
+    }
 
-  .card {
-    width: 456px !important;
-    margin-right: 24px;
   }
 
+  .card{
+    width: 312px !important;
+    margin-right: 16px;
+  }
 
   .btn{
-    margin-top: 72px;
+    margin-top: 36px;
+    display: flex;
   }
 
+  @media screen and (min-width: 992px) {
+
+    .card {
+      width: 456px !important;
+      margin-right: 24px;
+    }
+
+
+    .btn{
+      margin-top: 72px;
+    }
+
+  }
 }

package/src/Components/DataDisplay/ChatItenaryBlock/ChatItenaryBlock.tsx

@@ -63,7 +63,7 @@ const ChatItineraryBlock = (props: ChatItineraryBlockProps) => {
 
         <div className={`${styles.chatItineraryBlock} ${styles.hero}`}>
           <div style={{backgroundImage: `url('https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg')`}} className={styles.heroBackground}></div>
-          <Container>
+          <Container border={false}>
             <div className={styles.heroContent}>
               <h1 className={styles.titleHeader}>
                 Kia ora, I’m your AI<br />

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

@@ -31,6 +31,8 @@ const ImageContentTemplate: Story = {
          level={'light'}
        >
          <ImageContent
+           paddingTop={'md'}
+           paddingBottom={'md'}
            title={'Lorem'}
            boldTitle={'ipsum dolor'}
            content={'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat'}

package/src/Components/DataDisplay/ImageContent/ImageContent.tsx

@@ -20,6 +20,8 @@ const ImageContent = (props:  ImageContentProps) => {
     imageBorder = "top-right",
     rendition = "contained",
     list,
+    spaceTop = 'none',
+    spaceBottom = 'none',
   } = props;
 
   const pillarLogo = (
@@ -39,7 +41,7 @@ const ImageContent = (props:  ImageContentProps) => {
 
   if (rendition === 'full'){
     return <div className={`${styles.imageContent} ${styles.imageContentFull}  ${styles[imageBorder]} `}>
-      <Container>
+      <Container spaceTop={spaceTop} spaceBottom={spaceBottom}>
         <div className={styles.imageContentWrapper}>
           <div className={styles.content}>
             <div className={styles.contentWrapper}>
@@ -85,7 +87,7 @@ const ImageContent = (props:  ImageContentProps) => {
 
   if(rendition === "fluid"){
     return <div className={`${styles.imageContent} ${styles.imageContentFluid} ${styles[alignment]}`}>
-      <Container>
+      <Container spaceTop={spaceTop} spaceBottom={spaceBottom}>
         <div className={styles.imageContentWrapper}>
           <div className={styles.imageWrapper}>
             <div className={styles.imageHolder}>
@@ -125,7 +127,7 @@ const ImageContent = (props:  ImageContentProps) => {
   if (rendition === 'masked'){
     return (
       <div className={`${styles.imageContent} ${styles.maskedImageContent} ${styles[alignment]}`}>
-        <Container>
+        <Container spaceTop={spaceTop} spaceBottom={spaceBottom}>
           <div className={styles.imageContentWrapper}>
 
             {/* IMAGE BLOCK */}
@@ -158,7 +160,7 @@ const ImageContent = (props:  ImageContentProps) => {
 
 
   return <div className={`${styles.imageContent} ${styles[alignment]}`}>
-    <Container>
+    <Container spaceTop={spaceTop} spaceBottom={spaceBottom}>
       <div className={styles.imageContentWrapper}>
         <div className={styles.imageWrapper}>
           <div className={styles.imageHolder}>

package/src/Components/DataDisplay/ImageContent/ImageContentProps.tsx

@@ -14,6 +14,8 @@ export type RenditionType =
   | "contained"
   | "masked";
 
+type SpacingOption = "none" | "xsm" |"sm" | "md" | "lg" | "xl"
+
 export interface ImageSet {
   single?: string;
   setOfFour?: [string, string, string, string];
@@ -38,6 +40,8 @@ export interface ImageContentProps {
   imageBorder?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
   rendition?: RenditionType;
   list?: Item[];
+  spaceTop?: SpacingOption
+  spaceBottom?: SpacingOption
 }
 
 export default ImageContentProps;

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

@@ -54,7 +54,7 @@ const KPIBlockBusinessTemplate: Story = {
 
     return (
       <>
-        <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="business" level="secondary">
+        <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="business" level="light">
         <KPIBlock
           title={'Business Growth Statistics'}
           description={'Our comprehensive approach to business development has yielded impressive results across multiple sectors.'}

package/src/Components/DataDisplay/KPIBlock/KPIBlock.tsx

@@ -2,7 +2,6 @@ import KPIBlockProps from "./KPIBlockProps.tsx";
 import styles from './kpiBlock.module.scss';
 import Container from "../../Shared/Container/Container.tsx";
 import PillarIcon from "../../Shared/PillarIcon/PillarIcon.tsx";
-import ElementHolder from "../../Shared/ElementHolder/ElementHolder.tsx";
 import cslx from "clsx";
 
 
@@ -12,31 +11,17 @@ const KPIBlock = (props: KPIBlockProps) => {
     description,
     stats = [],
     pillar ,
-    paddingTop,
-    paddingBottom,
-    level,
-    marginBottom,
-    marginTop,
     spacingBottom='xsm',
   } = props;
 
   const className = cslx(
     styles.kpi ,
-    `${pillar}`,
     {
       [styles[`kpi--pb-${spacingBottom}`]]: spacingBottom,
     },
   );
 
   return (
-    <ElementHolder
-      paddingTop={paddingTop}
-      paddingBottom={paddingBottom}
-      pillar={pillar}
-      level={level}
-      marginBottom={marginBottom}
-      marginTop={marginTop}
-    >
     <div className={`${styles.kpi} ${className}`}>
       <Container>
         <div className={styles.kpiWrapper}>
@@ -54,11 +39,10 @@ const KPIBlock = (props: KPIBlockProps) => {
           </div>
         </div>
       </Container>
-    </div>
       <div className={styles.pillarIcon}>
         <PillarIcon pillar={pillar}/>
       </div>
-    </ElementHolder>
+    </div>
   );
 };
 

package/src/Components/DataDisplay/KPIBlock/kpiBlock.module.scss

@@ -72,6 +72,7 @@
     display: flex;
     flex-direction: inherit;
     align-items: start;
+    width: 100%;
 
     @media (max-width: 900px) {
       flex-direction: column;
@@ -207,6 +208,7 @@
 }
 
 .pillarIcon {
+  color: var(--color-block-text);
   position: absolute;
   right: 0;
   bottom: 0;

package/src/Components/DataDisplay/slider.scss

@@ -2,7 +2,6 @@
 @import "../../../node_modules/slick-carousel/slick/slick-theme.css";
 
 .carouselBlock{
-  overflow-x: hidden;
 
   .custom-arrow{
     background: transparent;

package/src/Components/Layout/Footer/Footer.tsx

@@ -15,7 +15,7 @@ const Footer = (props: FooterProps) => {
         <footer className={`${styles.footer} ${extraClass}`}>
             {footerTop}
             {footerMiddle && <div className={styles.footerMiddle}>
-                <Container>
+                <Container border={false}>
                     <div className={styles.footerMiddleWrapper}>
                         <div className={styles.footerLogoContainer}>
                             <img src={logo} alt="" />