@hellobetterdigitalnz/selwynui 0.0.1-34 → 0.0.1-36

package/src/Components/DataDisplay/{Pathway/Pathway.tsx → ListBlock/ListBlock.tsx}

@@ -1,19 +1,18 @@
-import cx from "classnames";
-import  PathwayProps from './PathwayProps';
-import styles from "./pathway.module.scss";
+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";
 
-const Pathway = (props:PathwayProps) => {
+const ListBlock = (props:ListBlockProps) => {
 	const { 
 		title = '', 
-		description = '', 
-		variation = 'grid', 
+		description = '',
 		cards = [],
-		filters = ["all", "adventure", "ski", "nature"], 
+		filters = [],
+    action
 	} = props
 
   const [activeFilter, setActiveFilter] = useState("all");
@@ -25,31 +24,21 @@ const Pathway = (props:PathwayProps) => {
 	};
 
 
-  const classes = [styles.pathway, "pathway", variation === "carousel" && styles.pathwayCarousel];
+  const classes = [styles.pathway, "pathway"];
 
   return (
     <div>
       <Container>
-        {variation === "carousel" ? (
-          <div className={cx(classes)}>
-            <div className={styles.contentWrapper}>
-             <div className={styles.content}>
-               <div className={styles.pathwayTitle}><h3>{title}</h3></div>
-               <div className={styles.pathwayDescription}><p>{description}</p></div>
-             </div>
-              <div className={styles.silderNav}>
-              </div>
-            </div>
-            {/*<div className={styles.}>*/}
-
-            {/*</div>*/}
-          </div>
-        ) : (
           <div className={cslx(classes)}>
             <div className={styles.pathwayTitle}><h3>{title}</h3></div>
-            <div className={styles.pathwayDescription}><p>{description}</p></div>
+            <div className={styles.pathwayDescription}>
+              <p>{description}</p>
+              {action && <div className={styles.action}>
+                {action}
+              </div>}
+            </div>
 
-            <div className={`${styles.pathwayFilters} ${styles.pathwayFilterDesktop}`}>
+            {filters && filters.length > 0 && (<div className={`${styles.pathwayFilters} ${styles.pathwayFilterDesktop}`}>
               <ul>
                 {filters.map((cat) => (
                   <li
@@ -61,9 +50,9 @@ const Pathway = (props:PathwayProps) => {
                   </li>
                 ))}
               </ul>
-            </div>
+            </div>)}
 
-            <div className={`${styles.pathwayFilters} ${styles.pathwayFilterMobile}`}>
+            {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}>
@@ -72,23 +61,34 @@ const Pathway = (props:PathwayProps) => {
                 ))}
               </select>
               <CaretDown />
-            </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} />
-                  </div>
-                ))}
+                {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>
             </div>
           </div>
-        )}
       </Container>
     </div>
   );
 };
 
-export default Pathway;
+export default ListBlock;

package/src/Components/DataDisplay/{Pathway/PathwayProps.tsx → ListBlock/ListBlockProps.tsx}

@@ -1,3 +1,5 @@
+import {ReactNode} from "react";
+
 export interface Card {
   title?:string,
   description?:string,
@@ -14,13 +16,13 @@ export interface Card {
   category?: 'all' | 'adventure' | 'ski' | 'nature',
 }
 
-interface PathwayProps {
+interface ListBlockProps {
   title?: string;
   description?: string;
-  variation?: 'grid' | 'carousel';
   link?: string;
   cards?: Card[]; 
-  filters?: string[]; 
+  filters?: string[];
+  action?: ReactNode;
 }
 
-export default PathwayProps;
+export default ListBlockProps;

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

@@ -8,11 +8,22 @@
 }
 
 .pathwayDescription {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
     margin-bottom: 36px;
+
     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{
+    display: flex;
+  }
+
 }
 
 .pathwayFilters {
@@ -25,11 +36,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 +105,7 @@
     }
 }
 
+
 @media (min-width: 760px) {
     .pathwayTitle {
         margin-bottom: 72px;
@@ -110,7 +126,7 @@
     }
 
     .pathwayCard {
-        width: 33.33%;
+        width: 50%;
         padding: 0 16px;
     }
 
@@ -121,4 +137,10 @@
     .pathwayFilterMobile {
         display: none;
     }
+}
+
+@media (min-width: 992px) {
+  .pathwayCard {
+    width: 33.33%;
+  }
 }

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

@@ -5,16 +5,16 @@ import {Button} from "../../Form";
 import ArrowRight from "../../Icons/Arrows/ArrowRight/ArrowRight.tsx";
 
 const ListingDetailBlock = ({
-                              title,
-                              description,
-                              facilities,
-                              distance,
-                              elevation,
-                              address,
-                              hours,
-                              phone,
-                              websiteUrl,
-                            }: ListingDetailBlockProps) => {
+    title,
+    description,
+    facilities,
+    distance,
+    elevation,
+    address,
+    hours,
+    phone,
+    websiteUrl,
+  }: ListingDetailBlockProps) => {
   return (
     <div className={styles.listingDetail}>
       {/* Main Content - Left */}

package/src/Components/DataDisplay/index.ts

@@ -32,9 +32,9 @@ export type { default as ChatItenaryBlockProps } from './ChatItenaryBlock/ChatIt
 export { default as TestimonyCard } from './TestimonyCard/TestimonyCard';
 export type { default as TestimonyCardProps } from './TestimonyCard/TestimonyCardProps';
 
-// Pathway
-export { default as Pathway } from './Pathway/Pathway';
-export type { default as PathwayProps } from './Pathway/PathwayProps';
+// ListBlock
+export { default as Pathway } from './ListBlock/ListBlock.tsx';
+export type { default as PathwayProps } from './ListBlock/ListBlockProps.tsx';
 
 // PromoBanner
 export { default as PromoBannerBlock } from './PromoBannerBlock/PromoBannerBlock';
@@ -48,3 +48,7 @@ export type { default as ContactItemProps } from './ContactsBlock/ContactItemPro
 //ImageContent
 export {default as ImageContent} from './ImageContent/ImageContent'
 export type {default as ImageContentProps} from './ImageContent/ImageContentProps'
+
+//List Block
+export { default as ListBlock } from './ListBlock/ListBlock'
+export type { default as ListBlockProps } from './ListBlock/ListBlockProps'

package/src/Components/Shared/ElementHolder/elementHolder.module.scss

@@ -4,7 +4,7 @@
     position: relative;
     
     &Inner {
-        position: relative;
+        //position: relative;
         z-index: 1;
     }
 

package/dist/Components/DataDisplay/Pathway/Pathway.d.ts

@@ -1,3 +0,0 @@
-import { default as PathwayProps } from './PathwayProps';
-declare const Pathway: (props: PathwayProps) => import("react/jsx-runtime").JSX.Element;
-export default Pathway;