@hellobetterdigitalnz/selwynui 0.0.1-1

package/src/Components/DataDisplay/Accordion/accordion.module.scss

@@ -0,0 +1,90 @@
+.accordionBlock {
+    display: flex;
+    flex-grow: 1;
+    gap: 90px;
+
+    .accordionHeading {
+        width: 50%;
+
+        h2 {
+            font-size: var(--font-size-h4);
+            font-weight: var(--font-weight-bold);
+            line-height: var(--line-height-h4);
+            padding-bottom: 72px;
+        }
+
+        p {
+            font-size: var(--font-size-body-regular);
+            font-weight: var(--font-weight-body-regular);
+            line-height: var(--line-height-body-regular);
+        }
+    }
+
+    .accordionWrapper {
+        width: 50%;
+    position: relative;
+
+
+        .accordion {
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .header {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+        }
+
+        .accordionBodyHolder {
+            .accordionBody {
+                font-size: var(--font-size-body-regular);
+                font-weight: var(--font-weight-body-regular);
+            }
+        }
+
+        .accordionHorizontalLine {
+            background: var(--color-text);
+            margin-block: 16px;
+        }
+
+        .title {
+            flex: 1;
+            display: flex;
+            align-items: center;
+
+            h4 {
+                flex: 1;
+                font-size: var(--font-size-body-regula);
+                font-weight: var(--font-weight-bold);
+                line-height: var(--line-height-body-regular);
+            }
+
+            .accordionIcon {
+                display: flex;
+                align-items: center;
+                margin-right: 4px;
+
+                svg {
+                    width: 24px;
+                    height: 24px;
+                }
+            }
+        }
+
+        .bodyInner {
+            font-size: var(--font-size-body-regular);
+            font-weight: var(--font-weight-body-regular);
+        }
+    }
+
+    .accordionBgDesignContainer {
+        position: absolute;
+        top: -40px;
+        right: 0;
+        pointer-events: none;
+    }
+
+
+}

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

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import DetailsCard from './DetailsCard';
+import { FaArrowRight } from "react-icons/fa";
+
+const meta : Meta<typeof DetailsCard> = {
+    title: "Form / DetailsCard",
+    component: DetailsCard,
+
+}
+
+export default meta;
+type Story = StoryObj<typeof DetailsCard>
+
+export const live: Story = {
+    args: {
+        date: "6 Nov 2025",
+        title: "This is a card title that is quite long and probably wraps over a few lines",
+        image:"./img/card-one.png",
+        link: '#',
+        variation: 'short'
+    },
+};
+
+export const Visit: Story = {
+    args: {
+        date: "6 Nov 2025",
+        title: "This is a card title that is quite long and probably wraps over a few lines",
+        image:"./img/card-two.png"
+    }
+}
+
+export const business: Story = {
+    args: {
+        date: "6 Nov 2025",
+        title: "This is a card title that is quite long and probably wraps over a few lines",
+        image:"./img/card-three.png",
+        link: '#'
+    }
+}

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

@@ -0,0 +1,87 @@
+import cx from "classnames";
+import DetailsCardProps from './DetailsCardProps';
+import styles from "./detailsCard.module.scss";
+import ArrowRight from "../../Icons/Arrows/ArrowRight/ArrowRight";
+
+const DetailsCard = (props: DetailsCardProps) => {
+    const {
+      title = '',
+      description = '',
+      date = '',
+      image = '',
+      variation= 'long',
+      link = '',
+      category = 'all'
+    } = props;
+
+    const classes = [
+        styles.detailsCard,
+        "detailsCard",  
+    ];
+    
+    if(variation==='short') {
+      classes.push(styles.detailsCardShort)
+    }
+
+
+    return <>
+      {link ? <div className={cx(classes)} id={category}>
+        <a href={link} className={`${styles.cardWrap} ${styles.detailsCardWithLink}`}>
+          {image && <div className={styles.cardImage}>
+            <img src={image} />
+          </div>}
+          
+          <div className={styles.cardContent}>
+            <div className={styles.cardBody}>
+              {date && <div className={styles.cardDate}>
+                <p>{date}</p>
+              </div>}
+              {title && <div className={`${styles.cardTitle} typography`}>
+                <h6>{title}</h6>
+              </div>}
+              {description && <div className={`${styles.cardDesc} typography`}>
+                {description}
+              </div>}
+            </div>
+            {link && <div className={styles.cardLink}>
+                Learn more
+                <span>
+                  <ArrowRight />
+                </span>
+            </div>}
+          </div>
+        </a>
+      </div> : <div className={cx(classes)} id={category}>
+        <div className={styles.cardWrap}>
+          {image && <div className={styles.cardImage}>
+            <img src={image} />
+          </div>}
+          
+          <div className={styles.cardContent}>
+            <div className={styles.cardBody}>
+              {date && <div className={styles.cardDate}>
+                <p>{date}</p>
+              </div>}
+              {title && <div className={`${styles.cardTitle} typography`}>
+                <h6>{title}</h6>
+              </div>}
+              {description && <div className={`${styles.cardDesc} typography`}>
+                {description}
+              </div>}
+            </div>
+            {link && <div className={styles.cardLink}>
+              <a href={link}>
+                Learn more
+                <span>
+                  <ArrowRight />
+                </span>
+              </a>
+            </div>}
+          </div>
+        </div>
+      </div>}
+      
+    </>
+}
+
+export default DetailsCard;

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

@@ -0,0 +1,12 @@
+
+interface DetailsCardProps {
+    title?:string,
+    description?:string,
+    date?: string,
+    link?:string,
+    image?:string,
+    variation?: "long" | "short";
+    category?: 'all' | 'adventure' | 'ski' | 'nature',
+}
+
+export default DetailsCardProps;

package/src/Components/DataDisplay/DetailsCard/detailsCard.module.scss

@@ -0,0 +1,123 @@
+.detailsCard {
+    min-height: 400px;
+    border-radius: 12px;
+    border:1px solid var(--pathway-card-border);
+    color: var(--pathway-card-text);
+    background-color: var(--pathway-card-bg);
+
+    &.detailsCardShort {
+        min-height: 274px;
+    }
+
+}
+
+.detailsCardWithLink {
+    color: var(--pathway-card-text);
+    transition: all ease 0.3s;
+
+    &:hover {
+        background-color: var(--pathway-card-hover-bg);
+        color: var(--pathway-card-hover-text);
+    }
+}
+
+.cardImage {
+    height: 200px;
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: center;
+        border-radius: 12px 12px 0 0;
+    }
+
+    .detailsCardShort & {
+        height: 204px;
+    }
+}
+
+.cardContent {
+    padding: 24px;
+    flex: 1;
+}
+
+.cardDate {
+    margin-bottom: var(--spacing-1-1\/2);
+    p {
+        font-size: var(--font-size-body-sm);
+        line-height: var( --line-height-body-regular);
+        font-weight: var(--font-weight-bold);
+    }
+}
+
+.cardWrap {
+    min-height: 400px;
+    display: flex;
+    flex-direction: column;
+
+    .detailsCardShort & {
+        min-height: 274px;
+    }
+
+    &:hover {
+        border-radius: 12px;
+    }
+}
+
+.cardContent {
+    display: flex;
+    flex-direction: column;
+}
+
+.cardBody {
+    flex: 1;
+}
+
+.cardTitle {
+    h6 {
+        font-weight: var(--font-weight-body-regular);
+    }
+}
+
+.cardLink {
+    max-height: 18px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: var(--font-size-body-sm);
+    font-weight: var(--font-weight-bold);
+
+    span {
+        img {
+            width: 32px;
+            height: 32px;
+        }
+    }
+}
+
+@media (min-width:760px) {
+    .detailsCard {
+        min-height:590px;
+        
+        &.detailsCardShort {
+            min-height: 474px;
+        }
+    }
+
+    .cardImage {
+        height: 300px;
+
+        .detailsCardShort & {
+            height: 304px;
+        }
+    }
+
+    .cardWrap {
+        min-height: 590px;
+
+        .detailsCardShort & {
+            min-height: 474px;
+        }
+    }
+
+}

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

@@ -0,0 +1,150 @@
+// @ts-ignore
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react-vite";
+import ImageContent from "./ImageContent";
+import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
+
+
+const meta: Meta = {
+  title: "Layout / ImageContent",
+  component: ImageContent,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ["autodocs"]
+}
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const ImageContentTemplate: Story = {
+  render: () => {
+
+    return (
+      <>
+       <ElementHolder
+         paddingTop={'md'}
+         paddingBottom={'md'}
+         pillar={'live'}
+         level={'light'}
+       >
+         <ImageContent/>
+       </ElementHolder>
+      </>
+    )
+  }
+}
+
+
+const ImageContentMaskedTemplate: Story = {
+  render: () => {
+
+    return (
+      <>
+        <ElementHolder
+          paddingTop={'md'}
+          paddingBottom={'md'}
+          pillar={'taste'}
+          level={'primary'}
+        >
+          <ImageContent
+            rendition={'masked'}
+            pillar={'live'}
+            images={{
+              setOfFour: [
+                'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg',
+                'https://images.pexels.com/photos/2176593/pexels-photo-2176593.jpeg',
+                'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg',
+                'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg',
+              ],
+            }}
+          />
+        </ElementHolder>
+      </>
+    )
+  }
+}
+
+const ImageContentFullTemplate: Story = {
+  render: () => {
+
+    return (
+      <>
+        <ElementHolder
+          paddingTop={'none'}
+          paddingBottom={'none'}
+          pillar={'live'}
+          level={'primary'}
+        >
+          <ImageContent
+            rendition={'full'}
+            pillar={'live'}
+            images={{
+              single: [
+                'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg',
+              ],
+            }}
+            list={[
+              {
+                id:'1',
+                label:'What are you doing'
+              },
+              {
+                id:'2',
+                label:'What are you doing'
+              },
+              {
+                id:'3',
+                label:'What are you doing'
+              }
+            ]}
+            imageBorder={'top'}
+          />
+        </ElementHolder>
+        <ElementHolder
+          paddingTop={'none'}
+          paddingBottom={'none'}
+          pillar={'live'}
+          level={'primary'}
+        >
+          <ImageContent
+            rendition={'full'}
+            pillar={'live'}
+            images={{
+              single: [
+                'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg',
+              ],
+            }}
+            list={[
+              {
+                id:'1',
+                label:'What are you doing'
+              },
+              {
+                id:'2',
+                label:'What are you doing'
+              },
+              {
+                id:'3',
+                label:'What are you doing'
+              }
+            ]}
+          />
+        </ElementHolder>
+      </>
+    )
+  }
+}
+
+export const ImageContentComponent = {
+  ...ImageContentTemplate
+};
+
+export const ImageContentMaskedComponent = {
+  ...ImageContentMaskedTemplate
+}
+
+export const ImageContentFullTemplateComponent ={
+  ...ImageContentFullTemplate
+}

package/src/Components/DataDisplay/ImageContent/ImageContent.tsx

@@ -0,0 +1,146 @@
+import styles from './imageContent.module.scss'
+import Container from "../../Shared/Container/Container.tsx";
+import ImageContentProps from "./ImageContentProps.tsx";
+import ImageContentMaskingImages from "./ImageContentMaskingImages.tsx";
+import {CaretCircleRight} from "../../Icons";
+import PillarLogo from "../../Shared/PillarLogo/PillarLogo.tsx";
+import PillarIcon from "../../Shared/PillarIcon/PillarIcon.tsx";
+const ImageContent = (props:  ImageContentProps) => {
+
+  const {
+    pillar,
+    displayFullLogo = false,
+    displayIconWithTitle = false,
+    title,
+    boldTitle,
+    content,
+    action,
+    images,
+    imageSrc,
+    alignment = "right",
+    imageBorder = "bottom",
+    rendition = "contained",
+    list,
+  } = props;
+
+
+  if (rendition === 'full'){
+    return <div className={`${styles.imageContent} ${styles.imageContentFull} ${styles[alignment]} ${styles[imageBorder]} `}>
+      <Container>
+        <div className={styles.imageContentWrapper}>
+          <div className={styles.imageWrapper}>
+            <div className={styles.imageHolder}>
+              {imageSrc &&  <img src={imageSrc}/>}
+            </div>
+          </div>
+          <div className={styles.content}>
+            <div className={styles.contentWrapper}>
+              <div className={styles.pillarlogo}>
+                <PillarLogo brandPillar={pillar} brandFullLogo={displayFullLogo}/>
+                {<p>Pillar Title</p>}
+              </div>
+              <div className={styles.title}>
+                <h3>
+                  {title}
+                  {boldTitle && (<>
+                    <br/>
+                    <span>{boldTitle}</span>
+                  </>)}
+                </h3>
+              </div>
+              <div className={styles.desc}>
+                <p>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.</p>
+              </div>
+              {list && <ul className={styles.list}>
+                {list.map((i) => (
+                  <li key={i.id}>
+                    <div className={styles.listWrapper}>
+                      <CaretCircleRight type={'regular'}/>
+                      {i.label}
+                    </div>
+                  </li>
+                ))}
+              </ul>}
+              {action && <div className={styles.action}>
+                {action}
+              </div>}
+            </div>
+          </div>
+        </div>
+      </Container>
+      <div className={styles.svgBackgroundPillar}>
+        <PillarIcon pillar={pillar}/>
+      </div>
+    </div>
+  }
+
+  if (rendition === 'masked'){
+    return (
+      <div className={`${styles.imageContent} ${styles.maskedImageContent} ${styles[alignment]}`}>
+        <Container>
+          <div className={styles.imageContentWrapper}>
+
+            {/* IMAGE BLOCK */}
+            <div className={styles.imageWrapper}>
+              <ImageContentMaskingImages pillar={pillar} single={images?.single} setOfFour={images?.setOfFour}/>
+            </div>
+
+            {/* CONTENT */}
+            <div className={styles.content}>
+              <div className={styles.contentWrapper}>
+                <div className={styles.pillarlogo}>
+                  <PillarLogo brandPillar={pillar} brandFullLogo={displayFullLogo}/>
+                </div>
+                <div className={styles.title}>
+                  <h4>{title}</h4>
+                </div>
+                {content && <div className={styles.desc}>
+                    <p>
+                      {content}
+                    </p>
+                </div>}
+                {action && <div className={styles.action}>
+                  {action}
+                </div>}
+              </div>
+            </div>
+          </div>
+        </Container>
+      </div>
+    );
+  }
+
+
+  return <div className={`${styles.imageContent} ${styles[alignment]}`}>
+    <Container>
+      <div className={styles.imageContentWrapper}>
+        <div className={styles.imageWrapper}>
+          <div className={styles.imageHolder}>
+            {imageSrc && <img src={imageSrc} alt={''}/>}
+          </div>
+        </div>
+        <div className={styles.content}>
+          <div className={styles.contentWrapper}>
+            <div className={styles.title}>
+              <h3>
+                {title}
+                {boldTitle && (<>
+                  <br/>
+                  <span>{boldTitle}</span>
+                </>)}
+              </h3>
+            </div>
+            {content && <div className={styles.desc}>
+                <p>{content}</p>
+            </div>}
+            {action && <div className={styles.action}>
+                <button>LOREM IPSUM</button>
+            </div>}
+          </div>
+        </div>
+      </div>
+    </Container>
+  </div>
+}
+
+export default ImageContent;