@hellobetterdigitalnz/selwynui 0.0.1-1

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

@@ -0,0 +1,37 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react-vite";
+import IntroBlock from "./IntroBlock";
+import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
+
+const meta: Meta = {
+    title: "DataDisplay / IntroBlock",
+    component: IntroBlock,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const IntroBlockTemplate: Story = {
+    render: () => {
+        return (
+            <ElementHolder paddingTop="sm" paddingBottom="sm" piller="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.'}
+                />
+            </ElementHolder>
+        )
+    }
+}
+
+export const IntroBlockComponent = {
+    ...IntroBlockTemplate
+};
+
+
+

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,37 @@
+.introBlock {
+
+  @media screen and (min-width: 992px) {
+    .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,120 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react-vite";
+import KPIBlock from "./KPIBlock";
+import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
+
+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 (
+      <>
+        <ElementHolder paddingTop="sm" paddingBottom="sm" piller="business" level="secondary">
+        <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.',
+            },
+          ]}
+        />
+        </ElementHolder>
+      </>
+    )
+  }
+}
+
+const KPIBlockBusinessTemplate: Story = {
+  render: () => {
+
+    return (
+      <>
+        <ElementHolder paddingTop="sm" paddingBottom="sm" piller="business" level="secondary">
+        <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'}
+        />
+        </ElementHolder>
+      </>
+
+    )
+  }
+}
+
+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,42 @@
+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";
+
+
+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 className={styles.pillarIcon}>
+            <PillarIcon pillar={'business'}/>
+          </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,78 @@
+.kpi {
+    position: relative;
+
+  .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;
+        line-height: 1;
+        margin-bottom: 72px;
+      }
+
+      p {
+        font-size: var(--font-size-body-regular);
+        line-height: var(--line-height-body-regular);
+        font-weight: var(--font-weight-body-sm);
+      }
+    }
+
+    .stats {
+      width: 60%;
+      display: flex;
+      flex-direction: column;
+      gap:48px;
+
+      .statItem {
+        display: flex;
+        padding-bottom: 48px;
+        border-bottom: 1px solid ;
+
+
+        &: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);
+          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);
+          display: flex;
+          align-items: center;
+          padding-left: 24px;
+        }
+      }
+    }
+  }
+  .pillarIcon{
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+
+    svg{
+      height: 577px;
+      width: 639px;
+    }
+  }
+}

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/PathwayBlock/PathwayBlock.stories.tsx

@@ -0,0 +1,56 @@
+// @ts-ignore
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react-vite";
+import PathwayBlock from "./PathwayBlock";
+import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
+
+const meta: Meta = {
+  title: "Layout / PathwayBlock",
+  component: PathwayBlock,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ["autodocs"]
+}
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const PathwayBlockTemplate: Story = {
+  render: () => {
+    return (
+      <>
+        <ElementHolder paddingTop="sm" paddingBottom="sm" piller="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"
+            },
+            {
+              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"
+            },
+            {
+              date: "2024-01-17",
+              description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+              image: "https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg"
+            }
+          ]}
+        />
+        </ElementHolder>
+      </>
+    )
+  }
+}
+
+
+export const PathwayBlockComponent = {
+  ...PathwayBlockTemplate
+};
+