@hellobetterdigitalnz/selwynui 0.0.1-7 → 0.0.1-71

package/src/Components/DataDisplay/ListBlock/ListBlock.tsx

@@ -0,0 +1,133 @@
+import ListBlockProps from './ListBlockProps.tsx';
+import styles from "./listBlock.module.scss";
+import cslx from "clsx";
+import Container from "../../Shared/Container/Container";
+import DetailsCard from "../DetailsCard/DetailsCard";
+import { CaretDown } from "../../Icons";
+import { useState } from "react";
+
+// Helpers
+const slugify = (str: string) =>
+  str.toLowerCase().trim().replace(/\s+/g, "-");
+
+const formatCategory = (str: string) =>
+  str
+    .split(" ")
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+
+const ListBlock = (props: ListBlockProps) => {
+  const {
+    title = '',
+    description = '',
+    cards = [],
+    action
+  } = props;
+
+
+  const uniqueCategories = Array.from(
+    new Set(cards.map(c => c.category?.toLowerCase()).filter(Boolean))
+  );
+
+  const dynamicFilters = [...uniqueCategories];
+  const [activeFilter, setActiveFilter] = useState<string | null>(null);
+
+  const filterCards = (category?: string) => {
+    if (!category) return false;
+    if (!activeFilter) return true;
+    return slugify(category) === activeFilter;
+  };
+
+  const classes = [styles.pathway, "pathway"];
+
+  return (
+    <div>
+      <Container>
+        <div className={cslx(classes)}>
+          {title && <div className={styles.pathwayTitle}><h3>{title}</h3></div>}
+
+          {(description || action) && (
+            <div className={styles.pathwayDescription}>
+              {description && <p>{description}</p>}
+              {action && <div className={styles.action}>{action}</div>}
+            </div>
+          )}
+
+          {/* Desktop Filters */}
+          {dynamicFilters.length > 0 && (
+            <div className={`${styles.pathwayFilters} ${styles.pathwayFilterDesktop}`}>
+              <ul>
+                <li
+                  key="all"
+                  className={!activeFilter ? styles.active : ""}
+                  onClick={() => setActiveFilter(null)}
+                >
+                  <span>All</span>
+                </li>
+                {dynamicFilters.map(cat => {
+                  const value = slugify(cat!);
+                  const label = formatCategory(cat!);
+                  return (
+                    <li
+                      key={value}
+                      className={activeFilter === value ? styles.active : ""}
+                      onClick={() => setActiveFilter(value)}
+                    >
+                      <span>{label}</span>
+                    </li>
+                  );
+                })}
+              </ul>
+            </div>
+          )}
+
+          {dynamicFilters.length > 0 && (
+            <div className={`${styles.pathwayFilters} ${styles.pathwayFilterMobile}`}>
+              <select
+                onChange={(e) => setActiveFilter(e.target.value || null)}
+                value={activeFilter || ""}
+              >
+                <option value="">All</option>
+                {dynamicFilters.map(cat => {
+                  const value = slugify(cat!);
+                  const label = formatCategory(cat!);
+                  return (
+                    <option key={value} value={value}>
+                      {label}
+                    </option>
+                  );
+                })}
+              </select>
+              <CaretDown />
+            </div>
+          )}
+
+          {/* Cards */}
+          <div className={styles.pathwayCards}>
+            {activeFilter ? (
+              <div className={styles.pathwayCardsWrap}>
+                {cards.filter(c => filterCards(c.category))
+                  .map((card, idx) => (
+                    <div key={idx} className={styles.pathwayCard}>
+                      <DetailsCard {...card} variation="short" />
+                    </div>
+                  ))}
+              </div>
+            ) : (
+              <div className={styles.pathwayCardsWrap}>
+                {cards.map((card, idx) => (
+                  <div key={idx} className={styles.pathwayCard}>
+                    <DetailsCard {...card} variation="short" />
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default ListBlock;

package/src/Components/DataDisplay/ListBlock/ListBlockProps.tsx

@@ -0,0 +1,28 @@
+import {ReactNode} from "react";
+
+export interface Card {
+  title?:string,
+  description?:string,
+  date?: string,
+  link?: {
+    title?: string;
+    href?: string;
+    target?: "_blank" | "_self" | "_parent" | "_top";
+    rel?: string;
+  };
+  pillar?: 'visit' | 'live' | 'business' | 'participate' | 'taste'
+  image?:string,
+  variation?: "long" | "short";
+  category?: string | undefined,
+}
+
+interface ListBlockProps {
+  title?: string;
+  description?: string;
+  link?: string;
+  cards?: Card[]; 
+  filters?: string[];
+  action?: ReactNode;
+}
+
+export default ListBlockProps;

package/src/Components/DataDisplay/{Pathway/pathway.module.scss → ListBlock/listBlock.module.scss}

@@ -8,11 +8,24 @@
 }
 
 .pathwayDescription {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
     margin-bottom: 36px;
+    flex-wrap: wrap;
+
     p {
-        font-size: var(--font-size-h5);
-        line-height: 1.2;
+      max-width: 936px;
+      font-size: var(--font-size-h5);
+      line-height: 1.2;
+      letter-spacing: -1.44px;
     }
+
+  .action{
+    margin-top: 24px;
+    display: flex;
+  }
+
 }
 
 .pathwayFilters {
@@ -25,11 +38,15 @@
         li {
             cursor: pointer;
             padding: 0 8px;
+            background: var(--color-bg-btn);
+            color: var(--color-text-btn);
+            transition: all 0.3s ease-in-out;
+
 
-            &.active {
+            &.active ,&:hover {
                 span {
-                    color: var(--pathway-card-hover-text);
-                    background-color: var(--pathway-card-hover-bg);
+                  background: var(--color-text-btn);
+                  color:var(--color-bg-btn) ;
                 }
             }
 
@@ -90,6 +107,7 @@
     }
 }
 
+
 @media (min-width: 760px) {
     .pathwayTitle {
         margin-bottom: 72px;
@@ -110,7 +128,7 @@
     }
 
     .pathwayCard {
-        width: 33.33%;
+        width: 50%;
         padding: 0 16px;
     }
 
@@ -121,4 +139,10 @@
     .pathwayFilterMobile {
         display: none;
     }
+}
+
+@media (min-width: 992px) {
+  .pathwayCard {
+    width: 33.33%;
+  }
 }

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

@@ -0,0 +1,93 @@
+// @ts-ignore
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react-vite";
+import ListingDetailBlock from "./ListingDetailBlock";
+import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
+import {Clock, DeviceMobile, MapPin, Mountains, Path} from "../../Icons";
+import ArrowRight from "../../Icons/Arrows/ArrowRight/ArrowRight.tsx";
+import {Button} from "../../Form";
+
+const meta: Meta = {
+  title: "DataDisplay / ListingDetailBlock",
+  component: ListingDetailBlock,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ["autodocs"]
+}
+
+export default meta;
+
+type Story = StoryObj<typeof ListingDetailBlock>;
+
+export const Default: Story = {
+  render: () => (
+    <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="visit" level="light">
+      <ListingDetailBlock
+        content={
+          <>
+            <h4>For beginners and kids the dedicated learner slope has gentle runs, easy sunkid carpet and platter lifts.</h4>
+            <br/>
+            <p>Those more advanced can enjoy the long cruising runs by taking the Easy Rider chairlift and three T-bars to the top. For the more adventurous there's challenging terrains and a freestyle park. A fleet of rental equipment is available for hire and a range of professional lessons available.</p>
+            <br/>
+            <p>Porters Lodge at the base of the mountain provides lodging as well as a fantastic restaurant and bar. Enjoy a dedicated snow play area adjacent to the lodge for tobogganing, the perfect setting for a family adventure.</p>
+            <br/>
+          </>
+        }
+        facilities={[
+          "Hot food",
+          "Ski school",
+          "Chairlift (1)",
+          "T-bars (3)",
+          "Pomas (1)",
+          "Magic carpet (1)",
+          "Beds (36)",
+          "Shuttle bus",
+          "Gear rental",
+        ]}
+        callToActions={[
+          {
+            icon: <Path type={'fill'}/>,
+            label: 'Distance from Christchurch Airport',
+            value: <p>91 km, approximately 1.25 hours</p>,
+          },
+          {
+            icon: <Mountains type={'fill'}/>,
+            label: 'Elevations',
+            value: <p>Top 1980m / Base 1302m</p>,
+          },
+          {
+            icon: <MapPin type={'fill'}/>,
+            label: 'Address',
+            value: <p>State Highway 73,<br/> Selwyn, New Zealand</p>,
+          },
+          {
+            icon: <Clock type={'fill'}/>,
+            label: 'Hours',
+            value: <p>9am–4pm, daily during winter</p>,
+          },
+          {
+            icon: <DeviceMobile type={'fill'}/>,
+            label: 'Phone',
+            value: '03 318 4731',
+            url: 'tel:033184731',
+            target: '_blank',
+            valueClassName: 'link',
+          },
+        ]}
+        callToActionButton={{
+          button: (
+            <Button
+              label="WEBSITE"
+              type="button"
+              size="default"
+              level="primary"
+              style="solid"
+              secondaryIcon={<ArrowRight/>}
+            />
+          )
+        }}
+      />
+    </ElementHolder>
+  ),
+};

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

@@ -0,0 +1,74 @@
+import ListingDetailBlockProps from "./ListingDetailBlockProps";
+import styles from "./ListingDetailBlock.module.scss";
+import {CheckCircle} from "../../Icons";
+import Container from "../../Shared/Container/Container.tsx";
+import { ReactNode } from "react";
+
+const ListingDetailBlock = ({
+  content,
+  facilities,
+  callToActions = [],
+  callToActionButton,
+}: ListingDetailBlockProps) => {
+
+  const renderIcon = (icon: ReactNode | string): ReactNode => {
+    if (typeof icon === 'string') {
+      return <span dangerouslySetInnerHTML={{ __html: icon }} />;
+    }
+    return icon;
+  };
+
+  return (
+    <Container>
+      <div className={styles.listingDetail}>
+
+        <div className={styles.mainContent}>
+          <div className={`typography`}>{content}</div>
+
+          <h3 className={styles.sectioncontent}>Facilities</h3>
+          <ul className={styles.facilitiesList}>
+            {facilities.map((facility, index) => (
+              <li key={index} className={styles.facilityItem}>
+                <CheckCircle type={'fill'}/> {facility}
+              </li>
+            ))}
+          </ul>
+        </div>
+
+
+        <div className={styles.sidebar}>
+          {callToActions.map((item, index) => (
+            <div key={index} className={styles.infoItem}>
+              {renderIcon(item.icon)}
+              <div className={item.label === 'Distance from Christchurch Airport' ? styles.sidebarItems : undefined}>
+                <div className={styles.infoLabel}>{item.label}</div>
+                {item.url ? (
+                  <a
+                    href={item.url}
+                    className={item.valueClassName === 'link' ? styles.infoValueLink : styles.infoValue}
+                    target={item.target}
+                    rel="noopener noreferrer"
+                  >
+                    {item.value}
+                  </a>
+                ) : (
+                  <div className={item.valueClassName === 'link' ? styles.infoValueLink : styles.infoValue}>
+                    {item.value}
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+
+          {callToActionButton && (
+            <div className={styles.button}>
+              {callToActionButton.button}
+            </div>
+          )}
+        </div>
+      </div>
+    </Container>
+  );
+};
+
+export default ListingDetailBlock;

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

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+
+export interface CallToActionItem {
+  icon: ReactNode | string;
+  label: string;
+  value: ReactNode;
+  url?: string;
+  target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
+  valueClassName?: 'link' | 'default';
+}
+
+export interface CallToActionButton {
+  button: ReactNode;
+}
+
+interface ListingDetailBlockProps {
+  content: ReactNode;
+  facilities: string[];
+  callToActions?: CallToActionItem[];
+  callToActionButton?: CallToActionButton;
+}
+
+export default ListingDetailBlockProps;

package/src/Components/DataDisplay/ListingDetailBlock/listingDetailBlock.module.scss

@@ -0,0 +1,265 @@
+.listingDetail {
+    display: flex;
+    // gap: 48px;
+    // padding: 32px;
+    border-radius: 8px;
+    position: relative;
+    
+
+    // &::before {
+    //     content: '';
+    //     position: absolute;
+    //     left: 51%;
+    //     top: 32px;
+    //     bottom: 32px;
+    //     width: 1px;
+    //     background: var(--color-bg);
+    //     transform: translateX(-50%);
+    //     z-index: 1;
+    //     pointer-events: none;
+
+    //     @media (max-width: 900px) {
+    //         display: none;
+    //     }
+    // }
+
+    @media (max-width: 900px) {
+        flex-direction: column-reverse;
+        padding: 24px 16px;
+        gap: 48px;
+    }
+}
+
+.mainContent {
+    width: 50%;
+    padding-right: 72px;
+    border-right: 1px solid var(--color-bg);
+
+    p {
+        font-size: var(--font-size-h6);
+        letter-spacing: var(--letter-spacing-h6);
+        line-height: 1.3;
+    }
+
+    .sectioncontent {
+        margin-bottom: 32px;
+        font-size: var(--font-size-h6);
+        letter-spacing: var(--letter-spacing-h6);
+    }
+
+    @media (max-width: 1200px) {
+        // padding-left: 80px;
+        // padding-right: 40px;
+    }
+
+    @media (max-width: 900px) {
+        width: 100%;
+        padding-left: 0;
+        padding-right: 0;
+        order: 2;
+        border-right: 0;
+    }
+
+    .title {
+        font-size: 48px;
+        font-weight: 400;
+        line-height: 1;
+        letter-spacing: -1.92px;
+        margin: 0 0 50px 0;
+
+        @media (max-width: 900px) {
+            font-size: 36px;
+            margin: 0 0 40px 0;
+        }
+
+        @media (max-width: 480px) {
+            font-size: 28px;
+            margin: 0 0 32px 0;
+        }
+    }
+
+    .description {
+        font-size: 24px;
+        line-height: 1.3;
+        font-weight: 400;
+        letter-spacing: -0.48px;
+
+        @media (max-width: 900px) {
+            font-size: 18px;
+            margin-bottom: 48px;
+        }
+
+        @media (max-width: 480px) {
+            font-size: 16px;
+            margin-bottom: 32px;
+        }
+    }
+
+    .sectionTitle {
+        font-size: 24px;
+        font-weight: 600;
+        margin: 62px 0 22px 0;
+        letter-spacing: -0.48px;
+        line-height: 1.3;
+
+        @media (max-width: 900px) {
+            font-size: 20px;
+            margin: 48px 0 24px 0;
+        }
+
+        @media (max-width: 480px) {
+            font-size: 18px;
+            margin: 32px 0 20px 0;
+        }
+    }
+}
+
+.facilitiesList {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: grid;
+    grid-template-columns: repeat(2, 2fr);
+
+    @media (max-width: 600px) {
+        grid-template-columns: 1fr;
+        gap: 2px;
+    }
+}
+
+.facilityItem {
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 1.4;
+    margin-bottom: 8px;
+
+    @media (max-width: 900px) {
+        font-size: 16px;
+    }
+
+    svg {
+        height: 32px;
+        width: 32px;
+        color: var(--color-bg);
+        flex-shrink: 0;
+        margin-right: 12px;
+
+        @media (max-width: 900px) {
+            height: 24px;
+            width: 24px;
+        }
+    }
+}
+
+.sidebar {
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    // gap: 60px;
+    padding-left: 72px;
+
+    @media (max-width: 1200px) {
+        // padding-left: 40px;
+        // gap: 48px;
+    }
+
+    @media (max-width: 900px) {
+        width: 100%;
+        padding-left: 0;
+        // gap: 40px;
+        order: 1;
+    }
+
+    @media (max-width: 480px) {
+        // gap: 32px;
+    }
+}
+
+.infoItem {
+    display: flex;
+    // gap: 16px;
+    margin-bottom: 72px;
+    align-items: center;
+
+    @media (max-width: 900px) {
+        margin-bottom: 36px;
+    }
+
+    svg {
+        color: var(--color-text);
+        width: 48px;
+        height: 48px;
+        flex-shrink: 0;
+        margin-right: 16px;
+
+        @media (max-width: 900px) {
+            width: 40px;
+            height: 40px;
+        }
+
+        @media (max-width: 480px) {
+            width: 32px;
+            height: 32px;
+        }
+    }
+}
+
+.sidebarItems {
+    flex: 1;
+}
+
+.infoLabel {
+    font-size: 24px;
+    letter-spacing: -0.48px;
+    line-height: 1;
+    font-weight: 700;
+    margin-bottom: 8px;
+
+    @media (max-width: 900px) {
+        font-size: 18px;
+    }
+
+    @media (max-width: 480px) {
+        font-size: 16px;
+    }
+}
+
+.infoValue {
+    font-size: 24px;
+    line-height: 1.3;
+    font-weight: 400;
+    margin-top: 0;
+    letter-spacing: -0.48px;
+
+    @media (max-width: 900px) {
+        font-size: 18px;
+    }
+
+    @media (max-width: 480px) {
+        font-size: 16px;
+    }
+}
+
+.infoValueLink {
+    color: var(--color-bg);
+    font-size: 24px;
+    text-decoration: underline;
+    line-height: 1.3;
+    letter-spacing: -0.48px;
+    font-weight: 400;
+    margin-top: 0;
+
+    @media (max-width: 900px) {
+        font-size: 18px;
+    }
+
+    @media (max-width: 480px) {
+        font-size: 16px;
+    }
+}
+
+.button {
+    max-width: 177px !important;
+}