@hellobetterdigitalnz/selwynui 0.0.1-48 → 0.0.1-49

package/src/Components/DataDisplay/DetailsCard/DetailsCard.tsx

@@ -11,17 +11,14 @@ const DetailsCard = (props: DetailsCardProps) => {
       image = '',
       variation= 'long',
       link = {},
-      pillar = 'visit'
     } = props;
 
     const classes = [
         styles.detailsCard,
-        `${pillar}--light`,
-        "visit",
         "detailsCard",  
     ];
     
-    if(variation === 'short') {
+    if(variation==='short') {
       classes.push(styles.detailsCardShort)
     }
 

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

@@ -3,6 +3,7 @@ import styles from './kpiBlock.module.scss';
 import Container from "../../Shared/Container/Container.tsx";
 import PillarIcon from "../../Shared/PillarIcon/PillarIcon.tsx";
 import ElementHolder from "../../Shared/ElementHolder/ElementHolder.tsx";
+import cslx from "clsx";
 
 
 const KPIBlock = (props: KPIBlockProps) => {
@@ -15,9 +16,18 @@ const KPIBlock = (props: KPIBlockProps) => {
     paddingBottom,
     level,
     marginBottom,
-    marginTop
+    marginTop,
+    spacingBottom='xsm',
   } = props;
 
+  const className = cslx(
+    styles.kpi ,
+    `${pillar}`,
+    {
+      [styles[`kpi--pb-${spacingBottom}`]]: spacingBottom,
+    },
+  );
+
   return (
     <ElementHolder
       paddingTop={paddingTop}
@@ -27,7 +37,7 @@ const KPIBlock = (props: KPIBlockProps) => {
       marginBottom={marginBottom}
       marginTop={marginTop}
     >
-    <div className={`${styles.kpi}`}>
+    <div className={`${styles.kpi} ${className}`}>
       <Container>
         <div className={styles.kpiWrapper}>
           <div className={styles.header}>

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

@@ -9,7 +9,9 @@ interface KPIBlockProps extends ElementHolderProps{
   title?: string;
   description?: string;
   stats?: KPIItem[];
-  pillar: 'main' | 'visit' | 'live' | 'business' | 'participate' | 'taste'
+  pillar: 'main' | 'visit' | 'live' | 'business' | 'participate' | 'taste';
+  spacingTop?: "none" | "xsm" |"sm" | "md" | "lg" ;
+  spacingBottom?: "none" | "xsm" |"sm" | "md" | "lg" | "xl";
 }
 
 export default KPIBlockProps;

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

@@ -1,4 +1,73 @@
 .kpi {
+
+  &Inner {
+    //position: relative;
+    z-index: 1;
+  }
+
+
+  &--pb-none {
+    .pillarIcon {
+      bottom:0;
+    }
+  }
+
+  &--pb-xsm {
+    .pillarIcon  {
+      bottom: -72px;
+    }
+  }
+
+  &--pb-sm {
+    .pillarIcon  {
+      bottom: -90px;
+    }
+  }
+
+  &--pb-md {
+    .pillarIcon  {
+      bottom: -120px;
+    }
+  }
+
+  &--pb-lg {
+    padding-bottom: 25px;
+    .pillarIcon  {
+      bottom: -144px;
+    }
+  }
+
+  &--pt-none {
+    .pillarIcon {
+      top:0;
+    }
+  }
+
+  &--pt-xsm {
+    .pillarIcon  {
+      top: -72px;
+    }
+  }
+
+  &--pt-sm {
+    .pillarIcon  {
+      top: -90px;
+    }
+  }
+
+  &--pt-md {
+    .pillarIcon  {
+      top: -120px;
+    }
+  }
+
+  &--pt-lg {
+    padding-top: 25px;
+    .pillarIcon  {
+      top: -144px;
+    }
+  }
+
   .kpiWrapper {
     display: flex;
     flex-direction: inherit;

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

@@ -46,9 +46,9 @@ const NoFilter: Story = {
         action={<Button label={'ALL VENUE'} secondaryIcon={<ArrowRight/>} level={"secondary"}/>}
         cards={
           [
-            { title: "Ballooning Canterbury", link: "#", image: "./img/card-one.png", category: "adventure", pillar: "live" },
-            { title: "Ski Resort", link: "#", image: "./img/card-two.png", category: "ski" },
-            { title: "Nature Walk", link: "#", image: "./img/card-three.png", category: "nature" },
+            { title: "Ballooning Canterbury", link: "#", image: "./img/card-one.png",pillar: "live" },
+            { title: "Ski Resort", link: "#", image: "./img/card-two.png"},
+            { title: "Nature Walk", link: "#", image: "./img/card-three.png" },
             { title: "City Tour", link: "#", image: "./img/card-four.png" }
           ]
         }

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

@@ -81,7 +81,6 @@ const ListBlock = (props: ListBlockProps) => {
             </div>
           )}
 
-          {/* Mobile Filters */}
           {dynamicFilters.length > 0 && (
             <div className={`${styles.pathwayFilters} ${styles.pathwayFilterMobile}`}>
               <select
@@ -105,14 +104,27 @@ const ListBlock = (props: ListBlockProps) => {
 
           {/* 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} variation="short" />
-                </div>
-              ))}
-            </div>
+            {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>

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

@@ -3,6 +3,9 @@ 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: "Layout / ListingDetailBlock",
@@ -21,8 +24,16 @@ export const Default: Story = {
   render: () => (
     <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="visit" level="light">
       <ListingDetailBlock
-        title="For beginners and kids the dedicated learner slope has gentle runs, easy sunkid carpet and platter lifts."
-        description={`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.\n\nThose 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.\n\nPorters 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.`}
+        title={
+          <>
+            <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",
@@ -34,13 +45,48 @@ export const Default: Story = {
           "Shuttle bus",
           "Gear rental",
         ]}
-        distance="91 km, approximately 1.25 hours"
-        elevation="Top 1980m / Base 1302m"
-        address="State Highway 73\nSelwyn, New Zealand"
-        hours="9am–4pm, daily during winter"
-        phone="03 318 4731"
-        websiteUrl="https://porters.nz"
-        websiteText="WEBSITE"
+        callToActions={[
+          {
+            icon: <Path type={'fill'}/>,
+            label: 'Distance from Christchurch Airport',
+            value: '91 km, approximately 1.25 hours',
+          },
+          {
+            icon: <Mountains type={'fill'}/>,
+            label: 'Elevations',
+            value: 'Top 1980m / Base 1302m',
+          },
+          {
+            icon: <MapPin type={'fill'}/>,
+            label: 'Address',
+            value: 'State Highway 73, Selwyn, New Zealand',
+          },
+          {
+            icon: <Clock type={'fill'}/>,
+            label: 'Hours',
+            value: '9am–4pm, daily during winter',
+          },
+          {
+            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

@@ -1,99 +1,72 @@
-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";
-import ArrowRight from "../../Icons/Arrows/ArrowRight/ArrowRight.tsx";
+import {CheckCircle} from "../../Icons";
 import Container from "../../Shared/Container/Container.tsx";
+import { ReactNode } from "react";
 
 const ListingDetailBlock = ({
-    title,
-    description,
-    facilities,
-    distance,
-    elevation,
-    address,
-    hours,
-    phone,
-    websiteUrl,
-  }: ListingDetailBlockProps) => {
+                              title,
+                              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}>
-      {/* Main Content - Left */}
-      <div className={styles.mainContent}>
-        <h2 className={styles.title}>{title}</h2>
-        <p className={styles.description}>{description}</p>
+      <div className={styles.listingDetail}>
 
-        <h3 className={styles.sectionTitle}>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.mainContent}>
+          <div className={`typography`}>{title}</div>
 
-      {/* Sidebar - Right */}
-      <div className={styles.sidebar}>
-        {distance && (
-          <div className={styles.infoItem}>
-            <Path type={'fill'}/>
-            <div className={styles.sidebarItems}>
-              <div className={styles.infoLabel}>Distance from Christchurch Airport</div>
-              <div className={styles.infoValue}>{distance}</div>
-            </div>
-          </div>
-        )}
+          <h3 className={styles.sectionTitle}>Facilities</h3>
+          <ul className={styles.facilitiesList}>
+            {facilities.map((facility, index) => (
+              <li key={index} className={styles.facilityItem}>
+                <CheckCircle type={'fill'}/> {facility}
+              </li>
+            ))}
+          </ul>
+        </div>
 
-        {elevation && (
-          <div className={styles.infoItem}>
-            <Mountains type={'fill'}/>
-            <div>
-              <div className={styles.infoLabel}>Elevations</div>
-              <div className={styles.infoValue}>{elevation}</div>
-            </div>
-          </div>
-        )}
 
-        {address && (
-          <div className={styles.infoItem}>
-            <MapPin type={'fill'}/>
-            <div>
-              <div className={styles.infoLabel}>Address</div>
-              <div className={styles.infoValue}>{address}</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>
-          </div>
-        )}
-
-        {hours && (
-          <div className={styles.infoItem}>
-            <Clock type={'fill'}/>
-            <div>
-              <div className={styles.infoLabel}>Hours</div>
-              <div className={styles.infoValue}>{hours}</div>
-            </div>
-          </div>
-        )}
+          ))}
 
-        {phone && (
-          <div className={styles.infoItem}>
-            <DeviceMobile type={'fill'}/>
-            <div>
-              <div className={styles.infoLabel}>Phone</div>
-              <div className={styles.infoValuePhone}>{phone}</div>
+          {callToActionButton && (
+            <div className={styles.button}>
+              {callToActionButton.button}
             </div>
-          </div>
-        )}
-
-        {websiteUrl && (
-
-          <div>
-          <Button label={'WEBSITE'} type={'button'} size={'default'} level={"primary"} style={'solid'} secondaryIcon={<ArrowRight/>}  />
-          </div>
-        )}
+          )}
+        </div>
       </div>
-    </div>
     </Container>
   );
 };

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

@@ -1,17 +1,23 @@
-// ListingDetailBlockProps.ts
+import { ReactNode } from 'react';
+
+export interface CallToActionItem {
+  icon: ReactNode | string;
+  label: string;
+  value: string;
+  url?: string;
+  target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
+  valueClassName?: 'link' | 'default';
+}
+
+export interface CallToActionButton {
+  button: ReactNode;
+}
+
 interface ListingDetailBlockProps {
-  title: string;
-  description: string;
+  title: ReactNode;
   facilities: string[];
-
-  // New structured contact/info fields to match the design
-  distance?: string;
-  elevation?: string;
-  address?: string;
-  hours?: string;
-  phone?: string;
-  websiteUrl?: string;
-  websiteText?: string; // e.g., "WEBSITE →"
+  callToActions?: CallToActionItem[];
+  callToActionButton?: CallToActionButton;
 }
 
 export default ListingDetailBlockProps;

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

@@ -3,13 +3,12 @@
     gap: 48px;
     padding: 32px;
     border-radius: 8px;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     position: relative;
 
     &::before {
         content: '';
         position: absolute;
-        left: 50%;
+        left: 51%;
         top: 32px;
         bottom: 32px;
         width: 1px;
@@ -32,7 +31,7 @@
 
 .mainContent {
     width: 50%;
-    padding-right: 72px;
+    padding-right: 20px;
 
     @media (max-width: 1200px) {
         padding-left: 80px;
@@ -51,7 +50,7 @@
         font-weight: 400;
         line-height: 1;
         letter-spacing: -1.92px;
-        margin: 0 0 72px 0;
+        margin: 0 0 50px 0;
 
         @media (max-width: 900px) {
             font-size: 36px;
@@ -68,7 +67,7 @@
         font-size: 24px;
         line-height: 1.3;
         font-weight: 400;
-        margin-bottom: 72px;
+        letter-spacing: -0.48px;
 
         @media (max-width: 900px) {
             font-size: 18px;
@@ -84,7 +83,9 @@
     .sectionTitle {
         font-size: 24px;
         font-weight: 600;
-        margin: 72px 0 32px 0;
+        margin: 62px 0 22px 0;
+        letter-spacing: -0.48px;
+        line-height: 1.3;
 
         @media (max-width: 900px) {
             font-size: 20px;
@@ -103,12 +104,12 @@
     padding: 0;
     margin: 0;
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 12px 24px;
+    grid-template-columns: repeat(2, 2fr);
+    gap: 9px;
 
     @media (max-width: 600px) {
         grid-template-columns: 1fr;
-        gap: 16px;
+        gap: 2px;
     }
 }
 
@@ -142,7 +143,7 @@
     display: flex;
     flex-direction: column;
     gap: 60px;
-    padding-left: 72px;
+    padding-left: 64px;
 
     @media (max-width: 1200px) {
         padding-left: 40px;
@@ -164,14 +165,14 @@
 .infoItem {
     display: flex;
     gap: 16px;
-    align-items: flex-start;
+    align-items: center;
 
     @media (max-width: 900px) {
         gap: 12px;
     }
 
     svg {
-        color: var(--color-taste);
+        color: var(--color-text);
         width: 48px;
         height: 48px;
         flex-shrink: 0;
@@ -223,10 +224,12 @@
     }
 }
 
-.infoValuePhone {
+.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;
 
@@ -237,4 +240,9 @@
     @media (max-width: 480px) {
         font-size: 16px;
     }
+}
+
+.button {
+    margin-top: 5px;
+    max-width: 177px !important;
 }