@hellobetterdigitalnz/selwynui 0.0.1

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

@@ -0,0 +1,37 @@
+import Container from "../../Shared/Container/Container"
+import IntroBlockProps from "./IntroBlockProps"
+import styles from "./introBlock.module.scss"
+
+const IntroBlock = (props: IntroBlockProps) => {
+    const {
+        introHeading,
+        introText,
+        extraClass
+    } = props
+
+    return (
+        <div className={`${styles.introBlock} ${extraClass}`}>
+            <Container>
+                <div className={styles.introBlockWrapper}>
+                    <div className={styles.introBlockLeft}>
+                        <h1>
+                            {introHeading}
+                        </h1>
+                    </div>
+
+                    <div className={styles.introBlockVerticalLine}></div>
+
+                    <div className={styles.introBlockRight}>
+                        <h1>
+                            {introText}
+                        </h1>
+                    </div>
+
+                </div>
+            </Container>
+        </div>
+
+    )
+}
+
+export default IntroBlock

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

@@ -0,0 +1,10 @@
+import { ReactNode } from "react"
+
+interface IntroBlockProps {
+    introHeading?: string
+    introText?: string
+    children?: ReactNode
+    extraClass?: string
+}
+
+export default IntroBlockProps

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

@@ -0,0 +1,33 @@
+.introBlock {
+
+  .introBlockWrapper {
+    display: flex;
+    flex-grow: 1;
+    margin: 0 -72px;
+
+    .introBlockLeft {
+      width: 50%;
+      padding: 0 72px;
+      h1 {
+        font-size: var(--font-size-h4);
+        line-height: var(--line-height-h4);
+        font-weight: var(--font-weight-h4);
+      }
+    }
+
+    .introBlockRight {
+      width: 50%;
+      padding: 0 72px;
+      h1 {
+        font-size: var(--font-size-small);
+        line-height: var(--line-height-label);
+        font-weight: var(--font-weight-body-regular);
+      }
+    }
+
+    .introBlockVerticalLine {
+      background: var(--color-text);
+      width: 1px;
+    }
+  }
+}

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

@@ -0,0 +1,114 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react-vite";
+import KPIBlock from "./KPIBlock";
+
+const meta: Meta = {
+  title: "Layout / KPIBlock",
+  component: KPIBlock,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ["autodocs"]
+}
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const KPIBlockTemplate: Story = {
+  render: () => {
+
+    return (
+      <>
+        <KPIBlock
+          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={[
+            {
+              value: '500',
+              description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+              value: '+75%',
+              description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+              value: '6,789',
+              description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+              value: '$1M',
+              description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+          ]}
+        />
+      </>
+    )
+  }
+}
+
+const KPIBlockBusinessTemplate: Story = {
+  render: () => {
+
+    return (
+      <>
+        <KPIBlock
+          title={'Business Growth Statistics'}
+          description={'Our comprehensive approach to business development has yielded impressive results across multiple sectors.'}
+          stats={[
+            {
+              value: '1,200',
+              description: 'New businesses established in the region this year',
+            },
+            {
+              value: '+45%',
+              description: 'Increase in commercial property development',
+            },
+            {
+              value: '15,000',
+              description: 'New jobs created across various industries',
+            },
+          ]}
+          pillar={'business'}
+        />
+      </>
+    )
+  }
+}
+
+const KPIBlockParticipateTemplate: Story = {
+  render: () => {
+
+    return (
+      <>
+        <KPIBlock
+          title={'Community Engagement'}
+          description={'Active participation from our community members continues to grow year over year.'}
+          stats={[
+            {
+              value: '3,500',
+              description: 'Active volunteers contributing to community projects',
+            },
+            {
+              value: '+92%',
+              description: 'Growth in event participation since last year',
+            },
+          ]}
+          pillar={'participate'}
+        />
+      </>
+    )
+  }
+}
+
+export const KPIBlockComponent = {
+  ...KPIBlockTemplate
+};
+
+export const KPIBlockBusinessComponent = {
+  ...KPIBlockBusinessTemplate
+};
+
+export const KPIBlockParticipateComponent = {
+  ...KPIBlockParticipateTemplate
+};

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

@@ -0,0 +1,35 @@
+import KPIBlockProps from "./KPIBlockProps.tsx";
+import styles from './kpiBlock.module.scss';
+import Container from "../../Shared/Container/Container.tsx";
+
+const KPIBlock = (props: KPIBlockProps) => {
+  const {
+    title,
+    description,
+    stats = [],
+    pillar = 'visit'
+  } = props;
+
+  return (
+    <div className={`${styles.kpi} ${pillar ? pillar : ""}`}>
+      <Container>
+        <div className={styles.kpiWrapper}>
+          <div className={styles.header}>
+            {title && <h2>{title}</h2>}
+            {description && <p>{description}</p>}
+          </div>
+          <div className={styles.stats}>
+            {stats.map((stat, index) => (
+              <div key={index} className={styles.statItem}>
+                <div className={styles.value}>{stat.value}</div>
+                <div className={styles.description}>{stat.description}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default KPIBlock;

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

@@ -0,0 +1,13 @@
+interface KPIItem {
+  value: string;
+  description: string;
+}
+
+interface KPIBlockProps {
+  title?: string;
+  description?: string;
+  stats?: KPIItem[];
+  pillar?: 'visit' | 'live' | 'business' | 'participate' | 'taste' | 'main';
+}
+
+export default KPIBlockProps;

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

@@ -0,0 +1,73 @@
+.kpi {
+  //background: var(--color-live);
+  //padding: 80px 0;
+  color: var(--bg-modal-color);
+
+  .kpiWrapper {
+    display: flex;
+    flex-direction: inherit;
+    align-items: start;
+
+
+    .header {
+      flex: 0 0 40%;
+      margin-right: 90px;
+
+      h2 {
+        font-size: var(--font-size-h4);
+        font-weight: var(--font-weight-h5);
+        letter-spacing: -1.92px;
+        margin-bottom: 72px;
+        color: var(--color-business);
+      }
+
+      p {
+        font-size: var(--font-size-body-regular);
+        line-height: var(--line-height-body-regular);
+        font-weight: var(--font-weight-body-sm);
+        color: var(--color-business);
+      }
+    }
+
+    .stats {
+      flex: 0 0 60%;
+      display: flex;
+      flex-direction: column;
+      max-width: 884px;
+      gap:48px;
+
+      .statItem {
+        display: flex;
+        padding-bottom: 48px;
+        border-bottom: 1px solid var(--color-business);
+
+
+        &:last-child {
+          border-bottom: none;
+          padding-bottom: 0;
+        }
+
+        .value {
+          flex: 0 0 200px;
+          font-size: var(--font-size-h3);
+          line-height: var(--line-height-h3);
+          font-weight: var(--font-weight-h5);
+          color: var(--color-business);
+          letter-spacing: -3.6px;
+          min-width: 230px;
+        }
+
+        .description {
+          flex: 1;
+          font-size: var(--font-size-body-regular);
+          line-height: var(--line-height-body-regular);
+          font-weight: var(--font-weight-body-sm);
+          color: var(--color-business);
+          display: flex;
+          align-items: center;
+          padding-left: 24px;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Pathway from './Pathway';
+import { FaArrowRight } from "react-icons/fa";
+
+const meta : Meta<typeof Pathway> = {
+    title: "Form / Pathway",
+    component: Pathway,
+
+}
+
+export default meta;
+type Story = StoryObj<typeof Pathway>
+
+export const grid: Story = {
+    args: {
+        title: "This is a card title that is quite long and probably wraps over a few lines",
+        link: '#',
+        filters: ["all", "adventure", "ski", "nature", "city"], 
+        cards: [
+            { title: "Ballooning Canterbury", link: "#", image: "./img/card-one.png", category: "adventure" },
+            { 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" } 
+        ]
+
+    },
+};

package/src/Components/DataDisplay/Pathway/Pathway.tsx

@@ -0,0 +1,83 @@
+import cx from "classnames";
+import  PathwayProps from './PathwayProps';
+import styles from "./pathway.module.scss";
+import cslx from "clsx";
+import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
+import Container from "../../Shared/Container/Container";
+import DetailsCard from "../DetailsCard/DetailsCard";
+import { CaretDown } from "../../Icons";
+import { useState } from "react";
+
+const Pathway = (props:PathwayProps) => {
+	const { 
+		title = '', 
+		description = '', 
+		variation = 'grid', 
+		cards = [],
+		filters = ["all", "adventure", "ski", "nature"], 
+	} = props
+
+  const [activeFilter, setActiveFilter] = useState("all");
+
+  const filterCards = (category: string | undefined) => {
+		if (!category) return activeFilter === "all";
+		if (activeFilter === "all") return true;
+		return category.toLowerCase() === activeFilter;
+	};
+
+
+  const classes = [styles.pathway, "pathway", variation === "carousel" && styles.pathwayCarousel];
+
+  return (
+    <ElementHolder paddingTop="none" level="light">
+      <Container>
+        {variation === "carousel" ? (
+          <div className={cx(classes)}>{/* TODO */}</div>
+        ) : (
+          <div className={cslx(classes)}>
+            <div className={styles.pathwayTitle}><h3>{title}</h3></div>
+            <div className={styles.pathwayDescription}><p>{description}</p></div>
+
+            <div className={`${styles.pathwayFilters} ${styles.pathwayFilterDesktop}`}>
+              <ul>
+                {filters.map((cat) => (
+                  <li
+                    key={cat}
+										className={activeFilter === cat ? styles.active : ""}
+										onClick={() => setActiveFilter(cat)}
+                  >
+                    <span>{cat === "all" ? "All Attractions" : cat.charAt(0).toUpperCase() + cat.slice(1)}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            <div className={`${styles.pathwayFilters} ${styles.pathwayFilterMobile}`}>
+              <select onChange={(e) => setActiveFilter(e.target.value.toLowerCase())}>
+                {filters.map((cat) => (
+                  <option key={cat} value={cat}>
+                    {cat === "all" ? "All Attractions" : cat.charAt(0).toUpperCase() + cat.slice(1)}
+                  </option>
+                ))}
+              </select>
+              <CaretDown />
+            </div>
+
+            {/* Cards */}
+            <div className={styles.pathwayCards}>
+              <div className={styles.pathwayCardsWrap}>
+                {cards.filter((c) => filterCards(c.category)).map((card, idx) => (
+                  <div key={idx} className={styles.pathwayCard}>
+                    <DetailsCard {...card} />
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+      </Container>
+    </ElementHolder>
+  );
+};
+
+export default Pathway;

package/src/Components/DataDisplay/Pathway/PathwayProps.tsx

@@ -0,0 +1,17 @@
+export interface Card {
+  title: string;
+  link: string;
+  image: string;
+  category?: 'adventure' | 'ski' | 'nature'; 
+}
+
+interface PathwayProps {
+  title?: string;
+  description?: string;
+  variation?: 'grid' | 'carousel';
+  link?: string;
+  cards?: Card[]; 
+  filters?: string[]; 
+}
+
+export default PathwayProps;

package/src/Components/DataDisplay/Pathway/pathway.module.scss

@@ -0,0 +1,124 @@
+.pathwayTitle {
+    margin-bottom: 36px;
+    h3 {
+        font-size: var(--font-size-h3);
+        line-height: var(--line-height-h3);
+        font-weight: var(--font-weight-bold);
+    }
+}
+
+.pathwayDescription {
+    margin-bottom: 36px;
+    p {
+        font-size: var(--font-size-h5);
+        line-height: 1.2;
+    }
+}
+
+.pathwayFilters {
+    margin-bottom: 48px;
+    ul {
+        list-style: none;
+        display: flex;
+        margin: 0 -8px;
+
+        li {
+            cursor: pointer;
+            padding: 0 8px;
+
+            &.active {
+                span {
+                    color: var(--pathway-card-hover-text);
+                    background-color: var(--pathway-card-hover-bg);
+                }
+            }
+
+            span {
+                padding: 20px 32px;
+                border: 1px solid var(--pathway-card-border);
+                border-radius: 48px;
+                max-height: 51px;
+                display: inline-flex;
+                align-items: center;
+                font-weight: var(--font-weight-bold);
+            }
+        }
+        
+    }
+}
+
+.pathwayCard {
+    margin-bottom: 32px;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.pathwayFilterDesktop {
+    display: none;
+}
+
+.pathwayFilterMobile {
+    position: relative;
+    select {
+        width: 100%;
+        min-height: 51px;
+        padding: 16px;
+        appearance: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        cursor: pointer;
+        border: 1px solid var(--pathway-card-border);
+        color: var(--pathway-card-text);
+        font-size: var(--font-size-label);
+
+        &:focus {
+            outline: 0;
+        }
+    }
+
+    svg {
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translate(-50%, -50%);
+        width: 24px;
+        height: 24px;
+        pointer-events: none;
+
+    }
+}
+
+@media (min-width: 760px) {
+    .pathwayTitle {
+        margin-bottom: 72px;
+    }
+
+    .pathwayDescription {
+        margin-bottom: 72px;
+    }
+
+    .pathwayFilters {
+        margin-bottom: 96px;
+    }
+
+    .pathwayCardsWrap {
+        display: flex;
+        flex-wrap: wrap;
+        margin: 0 -16px;
+    }
+
+    .pathwayCard {
+        width: 33.33%;
+        padding: 0 16px;
+    }
+
+    .pathwayFilterDesktop {
+        display: block;
+    }
+
+    .pathwayFilterMobile {
+        display: none;
+    }
+}

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

@@ -0,0 +1,45 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import PromoBannerBlock from './PromoBannerBlock';
+import Button from '../../Form/Button/Button';
+import ArrowRight from "../../Icons/Arrows/ArrowRight/ArrowRight";
+import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
+
+const meta: Meta = {
+    title: "DataDisplay / PromoBannerBlock",
+    parameters: {
+        layout: 'fullscreen',
+    },
+    tags: ["autodocs"],
+}
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const PromoBannerBlockTemplate: Story = {
+    render: () => {
+        return (
+            <ElementHolder paddingTop="none" paddingBottom="none" piller="visit" level="primary">
+                <PromoBannerBlock
+                    IntroTitle={'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.'}
+                    BrandPiller={'visit-brand-piller.svg'}
+                    PillerTitle={'Visit'}
+                    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'}
+                    Button={
+                        <Button label={'START EXPLORING'} piller={'visit'} level={'primary'} icon={<ArrowRight />} />
+                    }
+
+                />
+            </ElementHolder>
+        )
+    }
+}
+
+export const PromoBannerBlockComponent = {
+    ...PromoBannerBlockTemplate
+}

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

@@ -0,0 +1,74 @@
+import Container from "../../Shared/Container/Container"
+import PromoBannerBlockProps from "./PromoBannerBlockProps"
+import PromoBannerBgDesign from "./promo-banner-bg-design"
+import styles from "./promoBanner.module.scss"
+
+const PromoBannerBlock = (props: PromoBannerBlockProps) => {
+    const {
+        IntroTitle,
+        IntroText,
+        BrandPiller,
+        PillerTitle = "visit",
+        Title,
+        BoldTitle,
+        Content,
+        Image,
+        Button,
+        extraClass,
+    } = props
+
+    return (
+        <div className={styles.promoBannerBlock}>
+            <Container>
+                <div className={`${styles.promoBlockWrapper} ${extraClass}`}>
+                    <div className={styles.promoBannerBlockContainer}>
+
+                        <div className={styles.promoBannerTop}>
+                            <div className={styles.promoBannerTopLeft}>
+                                <h1>
+                                    {IntroTitle}
+                                </h1>
+                            </div>
+
+                            <div className={styles.promoBannerVerticalLine}></div>
+
+                            <div className={styles.promoBannerTopRight}>
+                                <h1>
+                                    {IntroText}
+                                </h1>
+                            </div>
+
+                            <div className={styles.promoBannerBgDesignContainer}>
+                                <PromoBannerBgDesign />
+                            </div>
+                        </div>
+
+                        <div className={styles.promoBannerBottom}>
+                            <div className={styles.promoBannerBottomLeft}>
+                                <div className={styles.promoBannerBrandPiller}>
+                                    <img src={`./img/${BrandPiller}`} alt="" />
+                                    {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="" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </Container>
+        </div>
+    )
+}
+
+export default PromoBannerBlock;