@hellobetterdigitalnz/selwynui 0.0.1-7 → 0.0.1-71

package/src/Components/DataDisplay/Modal/modal.module.scss

@@ -0,0 +1,178 @@
+.holder {
+  position: fixed;
+  z-index: 999999;
+  top: 0;
+  left: 0;
+  padding: calc(var(--space-unit) * 10) calc(var(--space-unit) * 5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  backdrop-filter: blur(4px);
+
+  &:before {
+    content: ' ';
+    display: block;
+    background: var(--popup-holder-bg);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.6;
+  }
+}
+
+.modal {
+  position: relative;
+  width: 90%;
+  max-width: 800px;
+  max-height: 70vh;
+  box-shadow: var(--drop-shadow-default);
+  background: #EFEAE7;
+  border-radius: 8px;
+  display: flex;
+  color: var(--color-block-text);
+  overflow: clip;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.modalHeader {
+  border-bottom: 1px solid #eee;
+}
+
+.modalHeaderWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: calc(var(--space-unit) * 4) calc(var(--space-unit) * 6);
+
+  .heading {
+    h4 {
+      font-size: var(--font-size-h6);
+      font-weight: 700;
+      line-height: 1.3;
+      font-family: var(--font);
+    }
+
+  }
+
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: 0.3s ease-in;
+
+    &:hover {
+      transform: scale(1.05);
+      -webkit-transform: scale(1.2);
+    }
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
+
+.modalBody {
+  padding: calc(var(--space-unit) * 6);
+  overflow: auto;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+    z-index: 1000;
+  }
+
+  &::-webkit-scrollbar-track {
+    overflow: hidden;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    background: rgba(0, 0, 0, 0.10);
+    overflow: hidden;
+    background-clip: padding-box;
+  }
+
+}
+
+.modalBodyWrapper {
+  min-height: 50px;
+}
+
+.modalAction {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: calc(var(--space-unit) * 4) calc(var(--space-unit) * 6);
+  border-top: 1px solid #eee;
+  background: #FFFFFF;
+}
+
+.modalActionRight, .modalActionLeft {
+  display: flex;
+  align-items: center;
+  //flex-wrap: wrap;
+  margin: calc(var(--space-unit) * -1);
+
+  & > div {
+    padding: var(--space-unit);
+  }
+
+  @media (max-width: 992px) {
+    flex-direction: column;
+
+    & > div {
+      width: 100%;
+    }
+
+    button {
+      width: 100%;
+      height: 32px !important;
+      padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);
+    }
+
+    button span {
+      font-size: 14px;
+    }
+  }
+
+}
+
+.modalActionRight {
+
+  > div {
+    padding: 0 -4px;
+  }
+}
+
+.curtain {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  backdrop-filter: blur(4px);
+  z-index: 9999;
+
+  &:before {
+    content: ' ';
+    display: block;
+    background: var(--color-gray-200);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.6;
+  }
+}

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

@@ -5,7 +5,7 @@ import PathwayBlock from "./PathwayBlock";
 import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
 
 const meta: Meta = {
-  title: "Layout / PathwayBlock",
+  title: "DataDisplay / PathwayBlock",
   component: PathwayBlock,
   parameters: {
     layout: 'fullscreen',
@@ -21,26 +21,40 @@ const PathwayBlockTemplate: Story = {
   render: () => {
     return (
       <>
-        <ElementHolder paddingTop="sm" paddingBottom="sm" piller="participate" level="light">
+        <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="participate" level="light">
         <PathwayBlock
           title="Lorem ipsum"
-          pillar="visit"
           cards={[
             {
-              date: "2024-01-15",
-              description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
-              image: "https://images.pexels.com/photos/1854897/pexels-photo-1854897.jpeg"
+              title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
+              // description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
+              image: "https://images.pexels.com/photos/1854897/pexels-photo-1854897.jpeg",
+              link: {
+                "title": "Learn More",
+                "href": "/",
+                "target": ""
+              },
             },
             {
-              date: "2024-01-16",
-              description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
-              image: "https://images.pexels.com/photos/1595655/pexels-photo-1595655.jpeg"
+              title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
+              // description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
+              image: "https://images.pexels.com/photos/1595655/pexels-photo-1595655.jpeg",
+              link: {
+                "title": "Learn More",
+                "href": "/",
+                "target": ""
+              },
             },
             {
-              date: "2024-01-17",
-              description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-              image: "https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg"
-            }
+              title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
+              // description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+              image: "https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg",
+              link: {
+                "title": "Learn More",
+                "href": "/",
+                "target": ""
+              },
+            },
           ]}
         />
         </ElementHolder>

package/src/Components/DataDisplay/PathwayBlock/PathwayBlock.tsx

@@ -5,13 +5,12 @@ import DetailsCard from "../DetailsCard/DetailsCard.tsx";
 
 const PathwayBlock = (props: PathwayBlockProps) => {
   const {
-    title = 'Lorem ipsum',
+    title = '',
     cards = [],
-    pillar = 'visit'
   } = props;
 
   return (
-    <div className={`${styles.pathwayBlock} ${pillar ? `${pillar}` : ""}`}>
+    <div className={`${styles.pathwayBlock}`}>
       <Container>
         <div className={styles.pathwayBlockWrapper}>
           {title &&<h1 className={styles.header}>{title}</h1>}
@@ -20,10 +19,12 @@ const PathwayBlock = (props: PathwayBlockProps) => {
               <div className={styles.card}>
                 <DetailsCard
                   key={index}
-                  title={card.description}
+                  title={card.title}
+                  description={card.description}
                   image={card.image}
-                  link="Learn More"
-
+                  link={card.link}
+                  pillar={card.pillar}
+                  variation={'long'}
                 />
               </div>
             ))}

package/src/Components/DataDisplay/PathwayBlock/PathwayBlockProps.tsx

@@ -1,13 +1,19 @@
 export interface PathwayCard {
-  date: string;
-  description: string;
-  image: string;
+  title?: string;
+  description?: string;
+  image?: string;
+  link?: {
+    title?: string
+    href?: string
+    target?: "_blank" | "_self" | "_parent" | "_top"
+    rel?: string
+  } | undefined;
+  pillar?: 'visit' | 'live' | 'business' | 'participate' | 'taste'
 }
 
 interface PathwayBlockProps {
   title?: string;
   cards?: PathwayCard[];
-  pillar?: 'visit' | 'live' | 'business' | 'participate' | 'taste' | 'main';
 }
 
 export default PathwayBlockProps;

package/src/Components/DataDisplay/PathwayBlock/pathwayBlock.module.scss

@@ -1,34 +1,38 @@
 .pathwayBlock {
 
 
+  .header {
+    font-size: var(--font-size-h3);
+    font-weight: 700;
+    margin: 0 0 36px 0;
+    letter-spacing: -3.6px;
+  }
+  .cardsGrid {
+    display: flex;
+    flex-wrap: wrap;
+    margin: -12px;
+  }
 
-}
-
-.pathwayBlockWrapper {
-
-}
+  .card{
+    width: 33.33%;
+    padding: 12px;
 
-.header {
-  font-size: var(--font-size-h3);
-  font-weight: var();
-  margin: 0 0 72px 0;
-}
-.cardsGrid {
-  display: flex;
-  flex-wrap: wrap;
-  margin: -12px;
-}
+    @media (max-width: 992px) {
+      width: 50%;
+    }
 
-.card{
-  width: 33.33%;
-  padding: 12px;
+    @media (max-width: 599px) {
+      width: 100%;
+    }
 
-  @media (max-width: 999px) {
-    width: 50%;
   }
 
-  @media (max-width: 599px) {
-    width: 100%;
+  @media screen and (min-width: 992px){
+    .header {
+      margin: 0 0 72px 0;
+      letter-spacing: -3.6px;
+    }
   }
 
-}
+
+}

package/src/Components/DataDisplay/PromoBannerBlock/PromoBanner.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 import PromoBannerBlock from './PromoBannerBlock';
 import Button from '../../Form/Button/Button';
 import ArrowRight from "../../Icons/Arrows/ArrowRight/ArrowRight";
@@ -29,11 +29,10 @@ const PromoBannerBlockTemplate: Story = {
                     title={'Spring gardens'}
                     boldTitle={'in Selwyn'}
                     content={'Visit Selwyn is for those who like to take the back roads, breathe mountain air, and find their own pace. Stay a little longer, explore deeper, and refuel with great kai and local stories along the way.'}
-                    image={'promo-banner-image.svg'}
+                    image={'/img/promo-banner-img.png'}
                     button={
-                        <Button label={'START EXPLORING'} piller={'visit'} level={'primary'} icon={<ArrowRight />} />
+                        <Button label={'START EXPLORING'} pillar={'visit'} level={'primary'} secondaryIcon={<ArrowRight />} />
                     }
-
                 />
             </ElementHolder>
         )

package/src/Components/DataDisplay/PromoBannerBlock/PromoBannerBlock.tsx

@@ -20,7 +20,7 @@ const PromoBannerBlock = (props: PromoBannerBlockProps) => {
 
     return (
         <div className={styles.promoBannerBlock}>
-            <Container>
+            <Container border={false}>
                 <div className={`${styles.promoBlockWrapper} ${extraClass}`}>
                     <div className={styles.promoBannerBlockContainer}>
 
@@ -43,7 +43,6 @@ const PromoBannerBlock = (props: PromoBannerBlockProps) => {
                                 <PromoBannerBgDesign />
                             </div>
                         </div>
-
                         <div className={styles.promoBannerBottom}>
                             <div className={styles.promoBannerBottomLeft}>
                                 <div className={styles.promoBannerBrandPiller}>
@@ -52,19 +51,16 @@ const PromoBannerBlock = (props: PromoBannerBlockProps) => {
                                     </div>
                                     {pillerTitle}
                                 </div>
-
                                 <div className={styles.promoBannerTitleContainer}>
                                     <h1>{title}</h1>
                                     <h2>{boldTitle}</h2>
                                 </div>
-
                                 <p>{content}</p>
-
                                 {button}
                             </div>
 
                             <div className={styles.promoBannerBottomRight}>
-                                <img src={`./img/${image}`} alt="" />
+                                <img src={image} alt={title} />
                             </div>
                         </div>
                     </div>

package/src/Components/DataDisplay/PromoBannerBlock/promoBanner.module.scss

@@ -1,11 +1,12 @@
 .promoBannerBlock {
     overflow-x: hidden;
-    padding: 48px 16px;
+    padding: 48px 0px;
 
     .promoBannerBlockContainer {
+
         .promoBannerTop {
             .promoBannerTopLeft {
-                padding: 0 16px;
+                padding: 0 ;
 
                 h1 {
                     font-size: var(--font-size-h5);
@@ -15,7 +16,7 @@
             }
 
             .promoBannerTopRight {
-                padding: 48px 16px;
+                padding: 48px 0px;
 
                 h1 {
                     font-size: var(--font-size-regular);
@@ -31,11 +32,12 @@
         }
 
         .promoBannerBottom {
-            border-radius: 16px 16px 100px 0;
+          border-radius: 16px 16px 96px 6px;
             background: linear-gradient(to bottom,
                     var(--pathway-card-bg) 0%,
                     var(--pathway-card-bg) 60%,
                     transparent 60%);
+          overflow: hidden;
 
             .promoBannerBottomLeft {
                 color: var(--pathway-card-text);
@@ -60,13 +62,13 @@
                     padding-block: 32px;
 
                     h1 {
-                        font-size: var(--font-size-small);
+                        font-size: var(--font-size-body-small);
                         font-weight: var(--font-weight-body-sm);
                         line-height: var(--line-height-h5);
                     }
 
                     h2 {
-                        font-size: var(--font-size-small);
+                        font-size: var(--font-size-body-small);
                         font-weight: var(--font-weight-bold);
                         line-height: var(--line-height-body-regular);
                     }
@@ -81,18 +83,19 @@
             }
 
             .promoBannerBottomRight {
+              background: var(--color-sand);
+              line-height: 0;
+
                 img {
                     height: 100%;
                     width: 100%;
                     object-fit: cover;
-                    border-radius: 0 0 0 16px;
                 }
             }
         }
     }
 
     @media screen and (min-width: 992px) {
-        padding: 120px 0;
 
         .promoBannerBlockContainer {
             .promoBannerTop {
@@ -137,13 +140,11 @@
 
             .promoBannerBottom {
                 display: flex;
-                padding-top: 90px;
-                background: transparent;
+                margin-top: 90px;
 
                 .promoBannerBottomLeft {
                     background-color: var(--pathway-card-bg);
                     padding: 72px 90px 72px 72px;
-                    border-radius: 16px 0 0 16px;
                     width: 50%;
 
                     .promoBannerTitleContainer {
@@ -168,10 +169,6 @@
 
                 .promoBannerBottomRight {
                     width: 50%;
-
-                    img {
-                        border-radius: 0 16px 96px 0;
-                    }
                 }
             }
 

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

@@ -5,7 +5,7 @@ import TestimonyCard from "./TestimonyCard";
 import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
 
 const meta: Meta = {
-  title: "Layout / TestimonyCard",
+  title: "DataDisplay / TestimonyCard",
   component: TestimonyCard,
   parameters: {
     layout: 'fullscreen',
@@ -21,17 +21,23 @@ const TestimonyCardTemplate: Story = {
   render: () => {
     return (
       <>
-        <ElementHolder paddingTop="sm" paddingBottom="sm" piller="visit" level="light">
+        <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="live" level="light">
         <TestimonyCard
           testimonies={[
             {
               image: 'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg',
               testimony: 'Living in Selwyn is like waking up in a dream every single day. The community is not only vibrant but also filled with friendly faces and engaging activities that bring everyone together.\n\nThe sunsets here are truly breathtaking, painting the sky in hues of orange, pink, and purple, creating a picturesque backdrop that makes every evening feel special!',
-              author: '— Liam & Emma'
+              author: 'Liam & Emma'
             },
             {
-              testimony: 'The sense of community here is incredible.',
-              author: '— Sarah & James'
+              image: 'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg',
+              testimony: 'Living in Selwyn is like waking up in a dream every single day. The community is not only vibrant but also filled with friendly faces and engaging activities that bring everyone together.\n\nThe sunsets here are truly breathtaking, painting the sky in hues of orange, pink, and purple, creating a picturesque backdrop that makes every evening feel special!',
+              author: 'Mamudu'
+            },
+            {
+              image:"https://images.pexels.com/photos/1906658/pexels-photo-1906658.jpeg",
+              testimony: 'The sense of community here is incredible. Living in Selwyn is like waking up in a dream every single day. The community is not only vibrant but also filled with friendly faces and engaging activities that bring everyone together.',
+              author: 'Sarah & James'
             }
           ]}
         />