@hellobetterdigitalnz/selwynui 0.0.1-41 → 0.0.1-43

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

@@ -0,0 +1,54 @@
+.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;
+  }
+
+  .actions{
+    padding: 12px;
+  }
+
+
+  @media screen and (min-width: 992px) {
+    margin-bottom: 84px;
+
+    h3{
+      font-size: var(--font-size-h3);
+    }
+
+  }
+
+}
+
+.card{
+  width: 312px !important;
+  margin-right: 16px;
+}
+
+.btn{
+  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/ContentBlock/ContentBlock.stories.tsx

@@ -0,0 +1,107 @@
+// @ts-ignore
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react-vite";
+import ContentBlock from "./ContentBlock";
+import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
+
+const meta: Meta = {
+  title: "Layout / ContentBlock",
+  component: ContentBlock,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ["autodocs"]
+}
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const ContentBlockTemplate: Story = {
+  render: () => {
+    return (
+      <>
+        <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="participate" level="primary">
+          <ContentBlock>
+            <h3>Privacy policy</h3>
+            <h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h6>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <strong>incididunt</strong> ut labore et
+              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+              commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
+              id est laborum.
+            </p>
+
+            <br/>
+
+            <h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h6>
+            <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
+              id est laborum.
+            </p>
+
+            <br/>
+
+            <h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h6>
+            <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
+              id est laborum.
+            </p>
+
+            <br/>
+
+            <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
+              id est laborum.
+            </p>
+          </ContentBlock>
+        </ElementHolder>
+      </>
+    )
+  }
+}
+
+export const ContentBlockComponent = {
+  ...ContentBlockTemplate
+};
+
+// Additional story with different pillar
+const ContentBlockVisitTemplate: Story = {
+  render: () => {
+    return (
+      <>
+        <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="visit" level="primary">
+          <ContentBlock pillar="visit">
+            <h1>Terms of Service</h1>
+            <p>Please read these terms carefully</p>
+
+            <h3>User Agreement</h3>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua.
+            </p>
+
+            <h3>Privacy & Data</h3>
+            <p>
+              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            </p>
+          </ContentBlock>
+        </ElementHolder>
+      </>
+    )
+  }
+}
+
+export const ContentBlockVisit = {
+  ...ContentBlockVisitTemplate
+};

package/src/Components/DataDisplay/ContentBlock/ContentBlock.tsx

@@ -0,0 +1,26 @@
+import ContentBlockProps from "./ContentBlockProps.tsx";
+import styles from './contentBlock.module.scss';
+import Container from "../../Shared/Container/Container.tsx";
+import LargeHeroIcon from "../../Layout/HeroBanner/LargeHeroIcon.tsx";
+
+const ContentBlock = (props: ContentBlockProps) => {
+  const {
+    children,
+    pillar = 'visit'
+  } = props;
+
+  return (
+    <div className={`${styles.contentBlock} ${pillar ? `${pillar}` : ""}`}>
+      <Container>
+        <div className={`typography ${styles.contentBlockWrapper}` }>
+          {children}
+        </div>
+      </Container>
+      <div className={styles.heroSvg}>
+        <LargeHeroIcon/>
+      </div>
+    </div>
+  );
+};
+
+export default ContentBlock;

package/src/Components/DataDisplay/ContentBlock/ContentBlockProps.tsx

@@ -0,0 +1,6 @@
+interface ContentBlockProps {
+  children: React.ReactNode;
+  pillar?: 'visit' | 'live' | 'business' | 'participate' | 'taste' | 'main';
+}
+
+export default ContentBlockProps;

package/src/Components/DataDisplay/ContentBlock/contentBlock.module.scss

@@ -0,0 +1,61 @@
+.contentBlock {
+
+  @media (max-width: 834px) {
+    padding: 64px 0;
+    width: 100%;
+  }
+
+  @media (max-width: 480px) {
+    padding: 48px 0;
+    width: 100%;
+  }
+}
+
+.contentBlockWrapper {
+  max-width: 910px;
+}
+
+.pillarIcon {
+  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;
+    }
+  }
+}
+
+.heroSvg {
+  position: absolute;
+  z-index: 5;
+  top: 0;
+  right: 0;
+  height: 340px;
+  pointer-events: none;
+
+  @media (max-width: 1024px) {
+    display: none;
+  }
+}

package/src/Components/DataDisplay/DetailsCard/detailsCard.module.scss

@@ -57,7 +57,7 @@
 }
 
 .cardWrap {
-    min-height: 400px;
+    min-height: 450px;
     display: flex;
     flex-direction: column;
 

package/src/Components/DataDisplay/ListBlock/listBlock.module.scss

@@ -12,6 +12,7 @@
     align-items: flex-end;
     justify-content: space-between;
     margin-bottom: 36px;
+    flex-wrap: wrap;
 
     p {
       max-width: 936px;
@@ -21,6 +22,7 @@
     }
 
   .action{
+    margin-top: 24px;
     display: flex;
   }
 

package/src/Components/DataDisplay/ListingDetailBlock/ListingDetailBlock.tsx

@@ -1,4 +1,4 @@
-import { ListingDetailBlockProps } from "./ListingDetailBlockProps";
+import ListingDetailBlockProps  from "./ListingDetailBlockProps";
 import styles from "./ListingDetailBlock.module.scss";
 import {CheckCircle, Clock, DeviceMobile, MapPin, Mountains, Path} from "../../Icons";
 import {Button} from "../../Form";

package/src/Components/DataDisplay/ListingDetailBlock/ListingDetailBlockProps.tsx

@@ -1,5 +1,5 @@
 // ListingDetailBlockProps.ts
-export interface ListingDetailBlockProps {
+interface ListingDetailBlockProps {
   title: string;
   description: string;
   facilities: string[];
@@ -12,4 +12,6 @@ export interface ListingDetailBlockProps {
   phone?: string;
   websiteUrl?: string;
   websiteText?: string; // e.g., "WEBSITE →"
-}
+}
+
+export default ListingDetailBlockProps;

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

@@ -27,19 +27,21 @@ const PathwayBlockTemplate: Story = {
           cards={[
             {
               title: "Lorem ipsum",
-              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",
-              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",
-              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",
               description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
               image: "https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg"
             }

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

@@ -1,8 +1,7 @@
 export interface PathwayCard {
-  title: string;
-  date: string;
-  description: string;
-  image: string;
+  title?: string;
+  description?: string;
+  image?: string;
   link?: {
     title?: string
     href?: string

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

@@ -31,7 +31,7 @@ const TestimonyCardTemplate: Story = {
             },
             {
               image:"https://images.pexels.com/photos/1906658/pexels-photo-1906658.jpeg",
-              testimony: 'The sense of community here is incredible.',
+              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.\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: '— Sarah & James'
             }
           ]}

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

@@ -1,10 +1,8 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import TestimonyCardProps from "./TestimonyCardProps.tsx";
 import styles from './testimonyCard.module.scss';
 import Container from "../../Shared/Container/Container.tsx";
 
-
-
 const TestimonyCard = (props: TestimonyCardProps) => {
   const {
     testimonies,
@@ -12,9 +10,29 @@ const TestimonyCard = (props: TestimonyCardProps) => {
   } = props;
 
   const [currentIndex, setCurrentIndex] = useState(0);
+  const [direction, setDirection] = useState<'left' | 'right'>('right');
 
   const defaultImage = 'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg';
 
+  const handleDotClick = (index: number) => {
+    if (index > currentIndex) {
+      setDirection('right');
+    } else {
+      setDirection('left');
+    }
+    setCurrentIndex(index);
+  };
+
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setDirection('right');
+      setCurrentIndex((prev) => (prev + 1) % testimonies.length);
+    }, 5000); // change every 5 seconds
+
+    return () => clearInterval(interval); // cleanup on unmount
+  }, [testimonies.length]);
+
   return <div
     className={`
     ${styles.testimonyCard} 
@@ -26,22 +44,34 @@ const TestimonyCard = (props: TestimonyCardProps) => {
       <div className={styles.testimonyCardWrapper}>
         <div className={styles.testimonyCardLeft}>
           <img
+            key={`image-${currentIndex}`}
+            className={styles[`slideIn${direction === 'right' ? 'Right' : 'Left'}`]}
             src={testimonies[currentIndex].image || defaultImage}
             alt={`${testimonies[currentIndex].author} testimonial`}
           />
         </div>
         <div className={styles.testimonyCardRight}>
           <div className={styles.testimonyContent}>
-            <div className={styles.quoteIcon}>
+            <div className={styles[`slideIn${direction === 'right' ? 'Right' : 'Left'}`]} >
               <svg xmlns="http://www.w3.org/2000/svg" width="56" height="39" viewBox="0 0 56 39" fill="none">
                 <path d="M23.1134 27.0562C23.1134 32.4847 18.9331 36 13.4798 36C8.02648 36 4.75277 33.6194 3.3652 27.0562C1.97764 20.493 7.78599 17.227 13.2393 17.227C18.6926 17.227 23.1134 21.6276 23.1134 27.0562Z" fill="#92C134"/>
                 <path d="M53.0015 27.0558C53.0015 32.4844 48.8212 35.9997 43.3679 35.9997C37.9145 35.9997 34.6408 33.619 33.2533 27.0558C31.8657 20.4926 37.674 17.2267 43.1274 17.2267C48.5807 17.2267 53.0015 21.6273 53.0015 27.0558Z" fill="#92C134"/>
                 <path d="M3.3652 27.0562C4.75277 33.6194 8.02648 36 13.4798 36C18.9331 36 23.1134 32.4847 23.1134 27.0562C23.1134 21.6276 18.6926 17.227 13.2393 17.227C7.78599 17.227 1.97764 20.493 3.3652 27.0562ZM3.3652 27.0562C1.97764 20.493 4.78431 13.7613 7.99019 9.54638C11.1961 5.33146 17.2399 2.24873 21.5318 3.16115M33.2533 27.0558C34.6408 33.619 37.9145 35.9997 43.3679 35.9997C48.8212 35.9997 53.0015 32.4844 53.0015 27.0558C53.0015 21.6273 48.5807 17.2267 43.1274 17.2267C37.674 17.2267 31.8657 20.4926 33.2533 27.0558ZM33.2533 27.0558C31.8657 20.4926 34.6724 13.761 37.8782 9.54606C41.0841 5.33115 47.1279 2.24841 51.4199 3.16083" stroke="#92C134" strokeWidth="6" strokeLinecap="round" strokeLinejoin="round"/>
               </svg>
             </div>
-            <h6>{testimonies[currentIndex].testimony}</h6>
+            <h6
+              key={`testimony-${currentIndex}`}
+              className={styles[`slideIn${direction === 'right' ? 'Right' : 'Left'}`]}
+            >
+              {testimonies[currentIndex].testimony}
+            </h6>
           </div>
-          <p>{testimonies[currentIndex].author}</p>
+          <p
+            key={`author-${currentIndex}`}
+            className={styles[`slideIn${direction === 'right' ? 'Right' : 'Left'}`]}
+          >
+            {testimonies[currentIndex].author}
+          </p>
 
           {testimonies.length > 1 && (
             <div className={styles.pagination}>
@@ -49,7 +79,7 @@ const TestimonyCard = (props: TestimonyCardProps) => {
                 <button
                   key={index}
                   className={`${styles.dot} ${index === currentIndex ? styles.active : ''}`}
-                  onClick={() => setCurrentIndex(index)}
+                  onClick={() => handleDotClick(index)}
                   aria-label={`Go to testimonial ${index + 1}`}
                 />
               ))}

package/src/Components/DataDisplay/TestimonyCard/testimonyCard.module.scss

@@ -11,7 +11,7 @@
   gap: 69px;
   align-items: center;
 
-  @media (max-width: 834px) {
+  @media (max-width: 1032px) {
     flex-direction: column;
     gap: 32px;
   }
@@ -19,6 +19,7 @@
 
 .testimonyCardLeft {
   flex-shrink: 0;
+  overflow: hidden;
 
   @media (max-width: 834px) {
     padding-top: 0;
@@ -37,7 +38,6 @@
     @media (max-width: 834px) {
       width: 100%;
       height: 360px;
-      //aspect-ratio: 1;
       border-radius: 2px 2px 96px 2px;
     }
 
@@ -52,9 +52,19 @@
   display: flex;
   flex-direction: column;
   gap: 24px;
+  overflow: hidden;
+  position: relative;
+  min-height: 340px;
+  height: 100%;
 
-  @media (max-width: 834px) {
+  @media (max-width: 1390px) {
+    height: 100%;
+  }
+
+
+  @media (max-width: 1032px) {
     width: 100%;
+    height: 100%;
     gap: 16px;
   }
 
@@ -67,7 +77,6 @@
 
     @media (max-width: 834px) {
       padding-left: 0;
-      font-size: 12px;
     }
   }
 }
@@ -76,6 +85,7 @@
   display: flex;
   gap: 16px;
   align-items: flex-start;
+  overflow: hidden;
 
   @media (max-width: 834px) {
     flex-direction: column;
@@ -119,6 +129,9 @@
   display: flex;
   gap: 12px;
   padding-left: 70px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
 
   @media (max-width: 834px) {
     padding-left: 0;
@@ -156,4 +169,35 @@
       }
     }
   }
+}
+
+// Animations
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.slideInRight {
+  animation: slideInRight 0.5s ease-out;
+}
+
+.slideInLeft {
+  animation: slideInLeft 0.5s ease-out;
 }

package/src/Components/DataDisplay/index.ts

@@ -36,6 +36,14 @@ export type { default as TestimonyCardProps } from './TestimonyCard/TestimonyCar
 export { default as Pathway } from './ListBlock/ListBlock.tsx';
 export type { default as PathwayProps } from './ListBlock/ListBlockProps.tsx';
 
+// ListingDetailBlock
+export { default as ListingDetailBlock } from './ListingDetailBlock/ListingDetailBlock';
+export type { default as ListingDetailBlockProps } from './ListingDetailBlock/ListingDetailBlockProps';
+
+// ContentBlock
+export { default as ContentBlock } from './ContentBlock/ContentBlock';
+export type { default as ContentBlockProps } from './ContentBlock/ContentBlockProps';
+
 // PromoBanner
 export { default as PromoBannerBlock } from './PromoBannerBlock/PromoBannerBlock';
 export type { default as PromoBannerBlockProps } from './PromoBannerBlock/PromoBannerBlockProps';
@@ -52,3 +60,8 @@ export type {default as ImageContentProps} from './ImageContent/ImageContentProp
 //List Block
 export { default as ListBlock } from './ListBlock/ListBlock'
 export type { default as ListBlockProps } from './ListBlock/ListBlockProps'
+
+// Carousel Block
+
+export { default as CarouselBlock } from './CarouselBlock/CarouselBlock.tsx'
+export type { default as CarouselBlockProps } from './CarouselBlock/CarouselBlockProps.tsx'

package/src/Components/DataDisplay/slider.scss

@@ -1,2 +1,45 @@
 @import "../../../node_modules/slick-carousel/slick/slick.css";
 @import "../../../node_modules/slick-carousel/slick/slick-theme.css";
+
+.carouselBlock{
+  overflow-x: hidden;
+
+  .custom-arrow{
+    background: transparent;
+    outline: none;
+    border: 1px solid var(--color-block-text);
+    border-radius: 100%;
+    height: 40px;
+    width: 40px;
+    color: var(--color-block-text);
+    transition: all 0.3s ease-in-out;
+
+    &:hover{
+      background: var(--color-block-text);
+      color: var(--color-block-bg);
+    }
+
+  }
+
+  .slick-list{
+    overflow: visible;
+    visibility: visible;
+  }
+
+  .prev{
+    margin-right: 16px;
+  }
+
+  @media screen and (min-width: 992px) {
+
+    .custom-arrow{
+      height: 48px;
+      width: 48px;
+    }
+
+    .prev{
+      margin-right: 24px;
+    }
+  }
+
+}