@hellobetterdigitalnz/selwynui 0.0.1-46 → 0.0.1-48

package/src/Components/DataDisplay/ChatItenaryBlock/chatItenaryBlock.module.scss

@@ -21,7 +21,7 @@
 
   &.itinerary {
     padding: 48px 0 76px;
-    border-top: 1px solid var(--color-taste);
+    border-top: 1px solid var(--color-text);
 
     @media (max-width: 834px) {
       padding: 24px 0 48px;
@@ -79,7 +79,7 @@
     font-size: var(--font-size-h3);
     font-weight: var(--font-weight-body-regular);
     line-height: 1;
-    color: var(--color-taste);
+    color: var(--color-text);
 
     @media (max-width: 834px) {
       font-size: var(--font-size-h4);
@@ -94,7 +94,7 @@
     font-weight: var(--font-weight-h5);
     letter-spacing: -3.6px;
     line-height: 1;
-    color: var(--color-taste);
+    color: var(--color-text);
   }
 
   .subtitle {
@@ -102,7 +102,7 @@
     line-height: var(--line-height-h6);
     margin: 0 0 70px 0;
     letter-spacing: -0.56px;
-    color: var(--color-taste);
+    color: var(--color-text);
 
     @media (max-width: 834px) {
       font-size: var(--font-size-body-regular);
@@ -137,7 +137,7 @@
 .inputBox {
   background: var(--bg-modal-color);
   border-radius: var(--tw-8, 32px);
-  border: 2px solid var(--color-taste);
+  border: 2px solid var(--color-text);
   padding: 24px 24px 24px 24px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
   width: 100%;
@@ -160,7 +160,7 @@
     font-size: 18px;
     resize: none;
     font-family: inherit;
-    color: var(--header-bg);
+    color: var(--color-bg);
     margin-bottom: 16px;
 
     @media (max-width: 834px) {
@@ -168,7 +168,7 @@
     }
 
     &::placeholder {
-      color: var(--header-bg);
+      color: var(--color-bg);
 
       @media (max-width: 834px) {
         font-size: var(--font-size-body-sm);
@@ -254,7 +254,7 @@
     padding: 0;
 
     svg {
-      color: var(--color-taste);
+      color: var(--color-text);
       width: 20px;
       height: 20px;
     }
@@ -282,7 +282,7 @@
 
   &.itinerary {
     padding: 48px 0 0;
-    border-top: 1px solid var(--color-taste);
+    border-top: 1px solid var(--color-text);
     flex: 1;
     display: flex;
     flex-direction: column;
@@ -378,7 +378,7 @@
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height-h3);
   letter-spacing: -1.92px;
-  color: var(--header-bg);
+  color: var(--color-bg);
   margin: 0 0 62px 0;
 
   @media (max-width: 834px) {
@@ -399,7 +399,7 @@
   font-size: var(--font-size-label);
   line-height: var(--line-height-body-regular);
   font-weight: var(--font-weight-h4);
-  color: var(--header-bg);
+  color: var(--color-bg);
   background: var(--color-sand);
   border-radius: 24px;
 
@@ -428,7 +428,7 @@
     font-size: 16px;
     line-height: var(--line-height-body-regular);
     font-weight: var(--font-weight-h4);
-    color: var(--header-bg);
+    color: var(--color-bg);
 
     @media (max-width: 834px) {
       font-size: var(--font-size-body-sm);
@@ -573,7 +573,7 @@
   min-height: 162px;
   background: var(--bg-modal-color);
   border-radius: 12px;
-  border: 2px solid var(--color-taste);
+  border: 2px solid var(--color-text);
   margin: 0;
   width: 100%;
   box-sizing: border-box;
@@ -723,7 +723,7 @@
     padding: 0;
 
     svg {
-      color: var(--color-taste);
+      color: var(--color-text);
       width: 20px;
       height: 20px;
     }
@@ -737,7 +737,7 @@
 .fixedInputBox {
   background: var(--bg-modal-color);
   border-radius: var(--tw-8, 32px);
-  border: 2px solid var(--color-taste);
+  border: 2px solid var(--color-text);
   padding: 24px 24px 24px 24px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
   width: 100%;
@@ -759,7 +759,7 @@
     font-size: 18px;
     resize: none;
     font-family: inherit;
-    color: var(--header-bg);
+    color: var(--color-bg);
     margin-bottom: 16px;
 
     @media (max-width: 834px) {
@@ -767,7 +767,7 @@
     }
 
     &::placeholder {
-      color: var(--header-bg);
+      color: var(--color-bg);
 
       @media (max-width: 834px) {
         font-size: var(--font-size-body-sm);

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

@@ -21,10 +21,10 @@ const ContentBlockTemplate: Story = {
   render: () => {
     return (
       <>
-        <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="participate" level="primary">
-          <ContentBlock>
+        <ElementHolder paddingTop={'lg'} paddingBottom={"lg"} pillar="visit" level="light">
+          <ContentBlock spacingTop={"lg"}>
             <h3>Privacy policy</h3>
-            <h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h6>
+            <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5>
             <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

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

@@ -2,15 +2,25 @@ 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";
+import cslx from "clsx";
 
 const ContentBlock = (props: ContentBlockProps) => {
   const {
     children,
-    pillar = 'visit'
+    pillar = 'visit',
+    spacingTop = 'none',
   } = props;
 
+  const className = cslx(
+    styles.contentBlock ,
+    `${pillar}`,
+    {
+      [styles[`contentBlock--pt-${spacingTop}`]]: spacingTop,
+    },
+  );
+
   return (
-    <div className={`${styles.contentBlock} ${pillar ? `${pillar}` : ""}`}>
+    <div className={className}>
       <Container>
         <div className={`typography ${styles.contentBlockWrapper}` }>
           {children}

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

@@ -3,6 +3,9 @@ import {ReactNode} from "react";
 interface ContentBlockProps {
   children: ReactNode;
   pillar?: 'visit' | 'live' | 'business' | 'participate' | 'taste' | 'main';
+  watermark?: boolean;
+  spacingTop?: "none" | "xsm" |"sm" | "md" | "lg" ;
+  spacingBottom?: "none" | "xsm" |"sm" | "md" | "lg" | "xl";
 }
 
 export default ContentBlockProps;

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

@@ -1,59 +1,74 @@
 .contentBlock {
+  position: relative;
+
+  &Inner {
+    //position: relative;
+    z-index: 1;
+  }
+
+
+  &--pt-none {
+    .heroSvg{
+      top:0;
+    }
+  }
+
+  &--pt-xsm {
+    .heroSvg {
+      top: -72px;
+    }
+  }
+
+  &--pt-sm {
+    .heroSvg {
+      top: -90px;
+    }
+  }
+
+  &--pt-md {
+    .heroSvg {
+      top: -120px;
+    }
+  }
+
+  &--pt-lg {
+    .heroSvg {
+      top: -144px;
+    }
+  }
+
 
   @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;
+  font-family: var(--font);
 
-  @media (max-width: 1200px) {
-    right: -100px;
-    display: none;
+  h1,h2,h3,h4,h5,h6{
+    margin-bottom: 24px ;
+    font-weight: 400;
   }
 
-  @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;
+  opacity: 0.2;
+  right: -240px;
 
   @media (max-width: 1024px) {
     display: none;

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

@@ -11,7 +11,6 @@ const DetailsCard = (props: DetailsCardProps) => {
       image = '',
       variation= 'long',
       link = {},
-      category = 'all',
       pillar = 'visit'
     } = props;
 
@@ -22,12 +21,12 @@ const DetailsCard = (props: DetailsCardProps) => {
         "detailsCard",  
     ];
     
-    if(variation==='short') {
+    if(variation === 'short') {
       classes.push(styles.detailsCardShort)
     }
 
 
-    return <div className={cx(classes)} id={category}>
+    return <div className={cx(classes)}>
         <a href={link?.href} target={link.target} rel={link.rel} className={`${styles.cardWrap} ${styles.detailsCardWithLink}`}>
           <div className={styles.cardImage}>
             {image && <img src={image} alt={title} />}

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

@@ -12,7 +12,6 @@ interface DetailsCardProps {
     pillar?: 'visit' | 'live' | 'business' | 'participate' | 'taste'
     image?:string,
     variation?: "long" | "short";
-    category?: 'all' | 'adventure' | 'ski' | 'nature',
 }
 
 export default DetailsCardProps;

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

@@ -9,8 +9,8 @@
     }
 
     .header {
-      flex: 0 0 40%;
-      margin-right: 90px;
+      flex: 0 0 35%;
+      margin-right: 50px;
 
       @media (max-width: 1200px) {
         margin-right: 60px;
@@ -28,7 +28,7 @@
         font-weight: var(--font-weight-h5);
         letter-spacing: -1.92px;
         line-height: 1;
-        margin-bottom: 48px;
+        margin-bottom: 59px;
 
         @media (max-width: 900px) {
           font-size: var(--font-size-h5);
@@ -56,6 +56,7 @@
     .stats {
       width: 60%;
       display: flex;
+      align-items: center;
       flex-direction: column;
       gap: 48px;
 
@@ -70,6 +71,7 @@
 
       .statItem {
         display: flex;
+        align-items: flex-start;
         padding-bottom: 48px;
         border-bottom: 1px solid;
 

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

@@ -1,4 +1,4 @@
-import  ListBlockProps from './ListBlockProps.tsx';
+import ListBlockProps from './ListBlockProps.tsx';
 import styles from "./listBlock.module.scss";
 import cslx from "clsx";
 import Container from "../../Shared/Container/Container";
@@ -6,86 +6,114 @@ import DetailsCard from "../DetailsCard/DetailsCard";
 import { CaretDown } from "../../Icons";
 import { useState } from "react";
 
-const ListBlock = (props:ListBlockProps) => {
-	const { 
-		title = '', 
-		description = '',
-		cards = [],
-		filters = [],
+// 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
+  } = 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 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)}>
-            <div className={styles.pathwayTitle}><h3>{title}</h3></div>
+        <div className={cslx(classes)}>
+          {title && <div className={styles.pathwayTitle}><h3>{title}</h3></div>}
+
+          {(description || action) && (
             <div className={styles.pathwayDescription}>
-              <p>{description}</p>
-              {action && <div className={styles.action}>
-                {action}
-              </div>}
+              {description && <p>{description}</p>}
+              {action && <div className={styles.action}>{action}</div>}
             </div>
+          )}
 
-            {filters && filters.length > 0 && (<div className={`${styles.pathwayFilters} ${styles.pathwayFilterDesktop}`}>
+          {/* Desktop Filters */}
+          {dynamicFilters.length > 0 && (
+            <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>
-                ))}
+                <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>)}
+            </div>
+          )}
 
-            {filters && filters.length > 0 && (<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>
-                ))}
+          {/* Mobile Filters */}
+          {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>)}
+            </div>
+          )}
 
-            {/* Cards */}
-            <div className={styles.pathwayCards}>
-              <div className={styles.pathwayCardsWrap}>
-                {filters && filters.length > 0 ? (
-                  <>
-                    {cards.filter((c) => filterCards(c.category)).map((card, idx) => (
-                      <div key={idx} className={styles.pathwayCard}>
-                        <DetailsCard {...card} variation={"short"} />
-                      </div>
-                    ))}
-                  </>
-                ) : (
-                  <>
-                    {cards.map((card, idx) => (
-                      <div key={idx} className={styles.pathwayCard}>
-                        <DetailsCard {...card} variation={"short"} />
-                      </div>
-                    ))}
-                  </>
-                )}
-              </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} variation="short" />
+                </div>
+              ))}
             </div>
           </div>
+        </div>
       </Container>
     </div>
   );

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

@@ -13,7 +13,7 @@ export interface Card {
   pillar?: 'visit' | 'live' | 'business' | 'participate' | 'taste'
   image?:string,
   variation?: "long" | "short";
-  category?: 'all' | 'adventure' | 'ski' | 'nature',
+  category?: string | undefined,
 }
 
 interface ListBlockProps {

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

@@ -21,7 +21,7 @@ const TestimonyCardTemplate: Story = {
   render: () => {
     return (
       <>
-        <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="visit" level="primary">
+        <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="business" level="primary">
         <TestimonyCard
           testimonies={[
             {