@hellobetterdigitalnz/selwynui 0.0.1-8 → 0.0.1-80

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,11 +41,10 @@ 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}>
-              {pillarLogo}
               <div className={styles.title}>
                 <h3>
                   {title}
@@ -53,9 +54,9 @@ const ImageContent = (props:  ImageContentProps) => {
                   </>)}
                 </h3>
               </div>
-              <div className={styles.desc}>
-                <p>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.</p>
-              </div>
+              {content && <div className={styles.desc}>
+                  <p>{content}</p>
+              </div>}
               {list && <ul className={styles.list}>
                 {list.map((i) => (
                   <li key={i.id}>
@@ -86,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}>
@@ -111,7 +112,7 @@ const ImageContent = (props:  ImageContentProps) => {
                 </h3>
               </div>
               <div className={styles.desc}>
-                <p>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.</p>
+                <p>{content}</p>
               </div>
               {action && <div className={styles.action}>
                 {action}
@@ -126,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 */}
@@ -159,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/ImageContent/imageContent.module.scss

@@ -58,11 +58,11 @@
     }
 
     .title{
-      font-size: var(--font-size-h3);
-      line-height: var(--line-height-h3);
 
       h3{
         font-weight: 400;
+        font-size: var(--font-size-h3);
+        line-height: var(--line-height-h3);
       }
 
       span{
@@ -72,10 +72,14 @@
     }
 
     .desc{
-      margin-top: 72px;
-      font-size: var(--font-size-body-regular);
-      line-height: var(--line-height-body-regular);
-      font-weight: 400;
+      margin-top: 48px;
+
+      p{
+        font-size: var(--font-size-body-regular);
+        line-height: var(--line-height-body-regular);
+        font-weight: 400;
+      }
+
     }
 
     .action{
@@ -164,6 +168,7 @@
       width: 60%;
       top: 0;
       bottom: 0;
+      pointer-events: none;
     }
 
     .pillarlogo{
@@ -219,18 +224,22 @@
       height: 100%;
       width: 100%;
       min-width: 50vw;
-      min-height: 380px;
+      position: relative;
 
 
-      &::before {
-        content: none;
+      &:before {
+        content: '';
+        display:block ;
+        padding-top: 103%;
       }
 
       img {
+        position: absolute;
+        top: 0;
+        left: 0;
         width: 100%;
         height: 100%;
         object-fit: cover;
-        object-position: center;
       }
     }
 
@@ -274,7 +283,7 @@
 
   //Fluid
   &.imageContentFluid{
-    overflow-x: hidden;
+    overflow: hidden;
 
     .pillarlogo{
       display: flex;
@@ -346,6 +355,10 @@
     .content{
       width: 50%;
       padding: 0 52px;
+
+      .desc{
+        margin-top: 72px;
+      }
     }
 
     &.left{
@@ -424,11 +437,14 @@
 
       .imageWrapper{
         width: 50%;
+        margin-left: 0px;
+        margin-right: 0px;
       }
 
-        .content{
-          padding-right: 198px;
-        }
+      .content{
+        padding-right: 149px;
+        padding-left: 0px;
+      }
 
     }
 

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

@@ -19,7 +19,7 @@ type Story = StoryObj<typeof meta>;
 const IntroBlockTemplate: Story = {
     render: () => {
         return (
-            <ElementHolder paddingTop="sm" paddingBottom="sm" piller="visit" level="light">
+            <ElementHolder paddingTop="md" paddingBottom="sm" pillar="visit" level="light">
                 <IntroBlock
                     introHeading={'A district that’s growing, grounded, and full of opportunity.'}
                     introText={'From the Southern Alps to the sea, Waikirikiri Selwyn’s diverse towns arespread across the Canterbury Plains between two mighty braided rivers. This is where ideas take root, families and businesses grow, and communities come together. We don’t just dream of a better future, we make it happen.'}

package/src/Components/DataDisplay/IntroBlock/introBlock.module.scss

@@ -1,4 +1,27 @@
 .introBlock {
+  font-family: var(--font);
+
+  .introBlockWrapper {
+    .introBlockLeft {
+      padding: 0 0 48px 0;
+
+      h1 {
+        font-size: var(--font-size-h5);
+        font-weight: var(--font-weight-h3);
+        line-height: var(--line-height-h5);
+        letter-spacing: var(--letter-spacing-h1);
+      }
+    }
+
+    .introBlockRight {
+      h1 {
+        font-size: var(--font-size-regular);
+        font-weight: var(--font-weight-body-regular);
+        line-height: var(--line-height-label);
+        letter-spacing: var(--letter-spacing-h6);
+      }
+    }
+  }
 
   @media screen and (min-width: 992px) {
     .introBlockWrapper {
@@ -14,15 +37,16 @@
           font-size: var(--font-size-h4);
           line-height: var(--line-height-h4);
           font-weight: var(--font-weight-h4);
+          letter-spacing: var(--letter-spacing-h4);
         }
       }
 
       .introBlockRight {
-        width: 50%;
-        padding: 0 72px;
+        width: 45%;
+        padding: 0 0 0 72px;
 
         h1 {
-          font-size: var(--font-size-small);
+          font-size: var(--font-size-h6);
           line-height: var(--line-height-label);
           font-weight: var(--font-weight-body-regular);
         }

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

@@ -4,7 +4,7 @@ import KPIBlock from "./KPIBlock";
 import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
 
 const meta: Meta = {
-  title: "Layout / KPIBlock",
+  title: "DataDisplay / KPIBlock",
   component: KPIBlock,
   parameters: {
     layout: 'fullscreen',
@@ -21,8 +21,8 @@ const KPIBlockTemplate: Story = {
 
     return (
       <>
-        <ElementHolder paddingTop="sm" paddingBottom="sm" piller="business" level="secondary">
         <KPIBlock
+          pillar="live"
           title={'Insights lorem ipsum dolor sit amet'}
           description={'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.'}
           stats={[
@@ -44,7 +44,6 @@ const KPIBlockTemplate: Story = {
             },
           ]}
         />
-        </ElementHolder>
       </>
     )
   }
@@ -55,7 +54,7 @@ const KPIBlockBusinessTemplate: Story = {
 
     return (
       <>
-        <ElementHolder paddingTop="sm" paddingBottom="sm" piller="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,6 +2,7 @@ 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 cslx from "clsx";
 
 
 const KPIBlock = (props: KPIBlockProps) => {
@@ -9,12 +10,19 @@ const KPIBlock = (props: KPIBlockProps) => {
     title,
     description,
     stats = [],
-    pillar = 'visit'
+    pillar ,
+    spacingBottom='xsm',
   } = props;
 
-  return (
-    <div className={`${styles.kpi} ${pillar ? pillar : ""}`}>
+  const className = cslx(
+    styles.kpi ,
+    {
+      [styles[`kpi--pb-${spacingBottom}`]]: spacingBottom,
+    },
+  );
 
+  return (
+    <div className={`${styles.kpi} ${className}`}>
       <Container>
         <div className={styles.kpiWrapper}>
           <div className={styles.header}>
@@ -29,12 +37,11 @@ const KPIBlock = (props: KPIBlockProps) => {
               </div>
             ))}
           </div>
-          <div className={styles.pillarIcon}>
-            <PillarIcon pillar={'business'}/>
-          </div>
         </div>
       </Container>
-
+      <div className={styles.pillarIcon}>
+        <PillarIcon pillar={pillar}/>
+      </div>
     </div>
   );
 };

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

@@ -1,13 +1,17 @@
+import {ElementHolderProps} from "../../Shared";
+
 interface KPIItem {
   value: string;
   description: string;
 }
 
-interface KPIBlockProps {
+interface KPIBlockProps extends ElementHolderProps{
   title?: string;
   description?: string;
   stats?: KPIItem[];
-  pillar?: 'visit' | 'live' | 'business' | 'participate' | 'taste' | 'main';
+  pillar: 'main' | 'visit' | 'live' | 'business' | 'participate' | 'taste';
+  spacingTop?: "none" | "xsm" |"sm" | "md" | "lg" ;
+  spacingBottom?: "none" | "xsm" |"sm" | "md" | "lg" | "xl";
 }
 
 export default KPIBlockProps;

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

@@ -1,42 +1,160 @@
 .kpi {
-    position: relative;
+
+  &Inner {
+    //position: relative;
+    z-index: 1;
+  }
+
+
+  &--pb-none {
+    .pillarIcon {
+      bottom:0;
+    }
+  }
+
+  &--pb-xsm {
+    .pillarIcon  {
+      bottom: -72px;
+    }
+  }
+
+  &--pb-sm {
+    .pillarIcon  {
+      bottom: -90px;
+    }
+  }
+
+  &--pb-md {
+    .pillarIcon  {
+      bottom: -120px;
+    }
+  }
+
+  &--pb-lg {
+    padding-bottom: 25px;
+    .pillarIcon  {
+      bottom: -144px;
+    }
+  }
+
+  &--pt-none {
+    .pillarIcon {
+      top:0;
+    }
+  }
+
+  &--pt-xsm {
+    .pillarIcon  {
+      top: -72px;
+    }
+  }
+
+  &--pt-sm {
+    .pillarIcon  {
+      top: -90px;
+    }
+  }
+
+  &--pt-md {
+    .pillarIcon  {
+      top: -120px;
+    }
+  }
+
+  &--pt-lg {
+    padding-top: 25px;
+    .pillarIcon  {
+      top: -144px;
+    }
+  }
 
   .kpiWrapper {
     display: flex;
     flex-direction: inherit;
     align-items: start;
+    width: 100%;
 
+    @media (max-width: 900px) {
+      flex-direction: column;
+    }
 
     .header {
-      flex: 0 0 40%;
-      margin-right: 90px;
+      flex: 0 0 35%;
+      margin-right: 50px;
+
+      @media (max-width: 1200px) {
+        margin-right: 60px;
+      }
+
+      @media (max-width: 900px) {
+        flex: 1;
+        width: 100%;
+        margin-right: 0;
+        margin-bottom: 16px;
+      }
 
       h2 {
         font-size: var(--font-size-h4);
         font-weight: var(--font-weight-h5);
         letter-spacing: -1.92px;
         line-height: 1;
-        margin-bottom: 72px;
+        margin-bottom: 59px;
+
+        @media (max-width: 900px) {
+          font-size: var(--font-size-h5);
+          margin-bottom: 40px;
+        }
+
+        @media (max-width: 480px) {
+          font-size: var(--font-size-h6);
+          margin-bottom: 22px;
+          letter-spacing: -1.2px;
+        }
       }
 
       p {
         font-size: var(--font-size-body-regular);
         line-height: var(--line-height-body-regular);
         font-weight: var(--font-weight-body-sm);
+
+        @media (max-width: 900px) {
+          font-size: var(--font-size-body-sm);
+        }
       }
     }
 
     .stats {
       width: 60%;
       display: flex;
+      align-items: center;
       flex-direction: column;
-      gap:48px;
+      gap: 48px;
+
+      @media (max-width: 900px) {
+        width: 100%;
+        gap: 32px;
+      }
+
+      @media (max-width: 480px) {
+        gap: 24px;
+      }
 
       .statItem {
         display: flex;
+        align-items: flex-start;
         padding-bottom: 48px;
-        border-bottom: 1px solid ;
+        border-bottom: 1px solid;
 
+        @media (max-width: 900px) {
+          padding-bottom: 32px;
+          flex-direction: column;
+          gap: 16px;
+        }
+
+        @media (max-width: 480px) {
+          padding-bottom: 24px;
+          gap: 12px;
+        }
 
         &:last-child {
           border-bottom: none;
@@ -50,6 +168,23 @@
           font-weight: var(--font-weight-h5);
           letter-spacing: -3.6px;
           min-width: 230px;
+
+          @media (max-width: 1200px) {
+            flex: 0 0 180px;
+            min-width: 180px;
+          }
+
+          @media (max-width: 900px) {
+            flex: 1;
+            min-width: 0;
+            font-size: var(--font-size-h4);
+            letter-spacing: -2.4px;
+          }
+
+          @media (max-width: 480px) {
+            font-size: var(--font-size-h5);
+            letter-spacing: -1.8px;
+          }
         }
 
         .description {
@@ -60,19 +195,47 @@
           display: flex;
           align-items: center;
           padding-left: 24px;
+
+          @media (max-width: 900px) {
+            padding-left: 0;
+            font-size: var(--font-size-body-sm);
+            align-items: flex-start;
+          }
         }
       }
     }
   }
-  .pillarIcon{
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-
-    svg{
-      height: 577px;
-      width: 639px;
+}
+
+.pillarIcon {
+  color: var(--color-block-text);
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 1;
+
+  @media (max-width: 1200px) {
+    right: -100px;
+    display: none;
+  }
+
+  @media (max-width: 900px) {
+    display: none;
+  }
+
+  svg {
+    height: 577px;
+    width: 639px;
+
+    @media (max-width: 1400px) {
+      height: 450px;
+      width: 500px;
+    }
+
+    @media (max-width: 1200px) {
+      height: 350px;
+      width: 400px;
     }
   }
-}
+}

package/src/Components/DataDisplay/{Pathway/Pathway.stories.tsx → ListBlock/ListBlock.stories.tsx}

@@ -1,21 +1,23 @@
 import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import Pathway from './Pathway';
+import ListBlock from './ListBlock';
 import {ElementHolder} from "../../Shared";
+import Button from "../../Form/Button/Button";
+import {ArrowRight} from "../../Icons";
 
-const meta : Meta<typeof Pathway> = {
-    title: "Form / Pathway",
-    component: Pathway,
+const meta : Meta<typeof ListBlock> = {
+    title: "DataDisplay / ListBlock",
+    component: ListBlock,
 }
 
 export default meta;
-type Story = StoryObj<typeof Pathway>
+type Story = StoryObj<typeof ListBlock>
 
 const GridTemplate: Story = {
     render : () =>{
 
-      return <ElementHolder paddingTop={'md'} paddingBottom={"md"}>
-        <Pathway
+      return <ElementHolder pillar={'live'} level={'light'} paddingTop={'md'} paddingBottom={"md"}>
+        <ListBlock
           title={'Food and drink'}
           description={'Find the ideal event venues in Selwyn, where beautiful landscapes blend with top-notch facilities. '}
           variation={'grid'}
@@ -23,9 +25,9 @@ const GridTemplate: Story = {
           cards={
             [
               { title: "Ballooning Canterbury", link: "#", image: "./img/card-one.png", category: "adventure", pillar: "live" },
-              { title: "Ski Resort", link: "#", image: "./img/card-two.png", category: "ski" },
-              { title: "Nature Walk", link: "#", image: "./img/card-three.png", category: "nature" },
-              { title: "City Tour", link: "#", image: "./img/card-four.png" }
+              { title: "Ski Resort", link: "#", image: "./img/card-two.png", category: "ski" , pillar: "live"},
+              { title: "Nature Walk", link: "#", image: "./img/card-three.png", category: "nature" , pillar: "live"},
+              { title: "City Tour", link: "#", image: "./img/card-four.png" , pillar: "live"}
             ]
           }
         />
@@ -33,19 +35,19 @@ const GridTemplate: Story = {
     }
 };
 
-const CarouselTemplate: Story = {
+const NoFilter: Story = {
   render : () =>{
 
     return <ElementHolder paddingTop={'md'} paddingBottom={"md"}>
-      <Pathway
+      <ListBlock
         title={'Food and drink'}
         description={'Find the ideal event venues in Selwyn, where beautiful landscapes blend with top-notch facilities. '}
-        variation={'carousel'}
+        action={<Button label={'ALL VENUE'} secondaryIcon={<ArrowRight/>} level={"secondary"}/>}
         cards={
           [
-            { title: "Ballooning Canterbury", link: "#", image: "./img/card-one.png", category: "adventure", pillar: "live" },
-            { title: "Ski Resort", link: "#", image: "./img/card-two.png", category: "ski" },
-            { title: "Nature Walk", link: "#", image: "./img/card-three.png", category: "nature" },
+            { title: "Ballooning Canterbury", link: "#", image: "./img/card-one.png",pillar: "live" },
+            { title: "Ski Resort", link: "#", image: "./img/card-two.png"},
+            { title: "Nature Walk", link: "#", image: "./img/card-three.png" },
             { title: "City Tour", link: "#", image: "./img/card-four.png" }
           ]
         }
@@ -59,6 +61,6 @@ export const GridView = {
   ...GridTemplate,
 }
 
-export const CarouselView = {
-  ...CarouselTemplate,
+export const NoFilterView = {
+  ...NoFilter,
 }