@hellobetterdigitalnz/selwynui 0.0.1-8 → 0.0.1-80

package/src/Components/DataDisplay/ContactsBlock/ContactItem.tsx

@@ -0,0 +1,47 @@
+import ArrowRight from "../../Icons/Arrows/ArrowRight/ArrowRight";
+import ContactItemProps from "./ContactItemProps";
+import styles from "./contactsBlock.module.scss";
+
+const ContactItem = (props: ContactItemProps) => {
+  const {
+    image,
+    name,
+    position,
+    email,
+    mobile,
+    linkedInUrl,
+  } = props;
+
+  return (
+    <div className={styles.contactCard}>
+      <div className={styles.contactCardWrapper}>
+        <div className={styles.cardImg}>
+          {image && <img src={image} alt={`${name}-image`} />}
+        </div>
+
+        <div className={styles.contactContentWrapper}>
+          <div className={styles.contactCardHeader}>
+            {name && <h1>{name}</h1>}
+            {position && <h2>{position}</h2>}
+          </div>
+
+          <div className={styles.contactMiddleContent}>
+            {email && <a href={`mailto:${email}`}>{email}</a>}
+            {mobile && <a href={`tel:${mobile}`}>{mobile}</a>}
+          </div>
+
+          <div className={styles.contactLink}>
+            {linkedInUrl && (
+              <a href={linkedInUrl} target="_blank" rel="noopener noreferrer">
+                <p>Connect on LinkedIn</p>
+                <ArrowRight type={"regular"} />
+              </a>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ContactItem;

package/src/Components/DataDisplay/ContactsBlock/ContactItemProps.tsx

@@ -0,0 +1,10 @@
+interface ContactItemProps {
+  image?: string;
+  name?: string;
+  position?: string;
+  email?: string;
+  mobile?: string;
+  linkedInUrl?: string;
+}
+
+export default ContactItemProps;

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

@@ -0,0 +1,59 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react-vite";
+import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
+import ContactItem from "./ContactItem";
+import ContactBlock from "./ContactsBlock";
+
+const meta: Meta = {
+    title: "DataDisplay / ContactsBlock",
+    parameters: {
+        layout: 'fullscreen',
+    },
+    tags: ["autodocs"],
+}
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const ContactsBlockTemplate: Story = {
+    render: () => {
+        return (
+            <ElementHolder paddingTop="md" paddingBottom="md" pillar="visit" level="light">
+                <ContactBlock contactBlockTitle={'Meet the team'}>
+                  <ContactItem
+                    image={'./img/contact-image.svg'}
+                    name={'Sarah Browne'}
+                    position={'Marketing Manager'}
+                    email={'sarahb@selwyn.nz'}
+                    mobile={'03 345 3456'}
+                    linkedInUrl={'/'}
+                  />
+
+                  <ContactItem
+                    image={'./img/contact-image.svg'}
+                    name={'Sarah Browne'}
+                    position={'Marketing Manager'}
+                    email={'sarahb@selwyn.nz'}
+                    mobile={'03 345 3456'}
+                    linkedInUrl={'/'}
+                  />
+
+                  <ContactItem
+                    image={'./img/contact-image.svg'}
+                    name={'Sarah Browne'}
+                    position={'Marketing Manager'}
+                    email={'sarahb@selwyn.nz'}
+                    mobile={'03 345 3456'}
+                    linkedInUrl={'/'}
+                  />
+
+                </ContactBlock>
+            </ElementHolder>
+        )
+    }
+}
+
+export const ContactBlockComponent = {
+    ...ContactsBlockTemplate
+};

package/src/Components/DataDisplay/ContactsBlock/ContactsBlock.tsx

@@ -0,0 +1,24 @@
+import { Container } from "../../Shared";
+import ContactsBlockProps from "./ContactsBlockProps";
+import styles from "./contactsBlock.module.scss";
+
+const ContactsBlock = (props: ContactsBlockProps) => {
+    const {
+        contactBlockTitle,
+        children
+    } = props;
+
+    return (
+        <div className={styles.contactsBlock}>
+            <Container>
+                {contactBlockTitle && <h1 className={styles.contactsBlockHeader}>{contactBlockTitle}</h1>}
+
+                {children && <div className={styles.contactsCardsWrapper}>
+                    {children}
+                </div>}
+            </Container>
+        </div>
+    )
+}
+
+export default ContactsBlock;

package/src/Components/DataDisplay/ContactsBlock/ContactsBlockProps.tsx

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+
+interface ContactsBlockProps {
+    contactBlockTitle?: string;
+    children?: ReactNode;
+}
+
+export default ContactsBlockProps;

package/src/Components/DataDisplay/ContactsBlock/contactsBlock.module.scss

@@ -0,0 +1,165 @@
+.contactsBlock {
+
+    .contactsBlockHeader {
+      padding-bottom: 36px;
+      font-size: var(--font-size-h3);
+      font-weight: 700;
+      line-height: 1;
+      letter-spacing: -3.6px;
+    }
+
+  .contactsCardsWrapper{
+    display: flex;
+    flex-wrap: wrap;
+    margin: -12px;
+  }
+
+  .contactCard{
+    width: 100%;
+    padding: 12px;
+
+    .contactCardWrapper{
+      border:1px solid var(--pathway-card-border);
+      color: var(--pathway-card-text);
+      background-color: var(--pathway-card-bg);
+      transition: all 0.3s ease-in-out;
+      border-radius: 12px;
+      overflow: clip;
+      min-height: 592px;
+      display: flex;
+      flex-direction: column;
+
+      &:hover {
+        background-color: var(--pathway-card-hover-bg);
+        border:1px solid var(--pathway-card-hover-text);
+
+        .contactContentWrapper {
+          .contactCardHeader {
+            color: var(--pathway-card-hover-text);
+          }
+
+          a{
+            color: var(--pathway-card-hover-text);
+          }
+
+        }
+
+      }
+
+    }
+
+    .cardImg{
+      position: relative;
+      height: 300px;
+
+      &:before{
+        content: '';
+        padding-top: 65.7%;
+        display: block;
+      }
+
+      img{
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: top;
+      }
+    }
+
+    .contactContentWrapper{
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      padding: 24px 24px 16px 24px;
+
+      .contactCardHeader{
+        margin-bottom: 44px;
+        color: var(--pathway-card-text);
+
+        h1,h2{
+          font-size: 28px;
+          letter-spacing: -0.56px;
+          line-height: 1.1;
+          font-family: var(--font);
+        }
+
+        h1{
+          font-weight: 700;
+        }
+
+        h2{
+          font-weight: 400;
+        }
+
+      }
+
+      .contactMiddleContent{
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        margin-bottom: 20px;
+
+        a{
+          letter-spacing: -0.48px;
+          font-size: 24px;
+          font-weight: 400;
+          line-height: 1.3;
+          font-family: var(--font);
+          text-decoration: underline;
+          color: var(--pathway-card-text);
+
+          &:first-child{
+            margin-bottom: 8px;
+          }
+
+        }
+      }
+
+      .contactLink{
+
+        a{
+          display: flex;
+          align-items: center;
+          font-size: 14px;
+          font-weight: 700;
+          line-height: 1.4;
+          letter-spacing: -0.14px;
+          justify-content: space-between;
+          color: var(--pathway-card-text);
+
+          svg{
+            width: 32px;
+            height: 32px;
+          }
+
+        }
+
+      }
+
+    }
+
+  }
+
+  @media screen and (min-width: 700px) {
+
+    .contactsBlockHeader {
+      padding-bottom: 72px;
+    }
+
+    .contactCard{
+      width: 50%;
+    }
+  }
+
+  @media screen and (min-width: 1024px) {
+    .contactCard {
+      width: 33.33%;
+    }
+  }
+
+}

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

@@ -0,0 +1,107 @@
+// @ts-ignore
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react-vite";
+import ContentBlock from "./ContentBlock";
+import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
+
+const meta: Meta = {
+  title: "DataDisplay / ContentBlock",
+  component: ContentBlock,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ["autodocs"]
+}
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const ContentBlockTemplate: Story = {
+  render: () => {
+    return (
+      <>
+        <ElementHolder paddingTop={'lg'} paddingBottom={"lg"} pillar="visit" level="light">
+          <ContentBlock spacingTop={"lg"}>
+            <h3>Privacy policy</h3>
+            <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
+              commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
+              id est laborum.
+            </p>
+
+            <br/>
+
+            <h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h6>
+            <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
+              id est laborum.
+            </p>
+
+            <br/>
+
+            <h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h6>
+            <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
+              id est laborum.
+            </p>
+
+            <br/>
+
+            <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
+              id est laborum.
+            </p>
+          </ContentBlock>
+        </ElementHolder>
+      </>
+    )
+  }
+}
+
+export const ContentBlockComponent = {
+  ...ContentBlockTemplate
+};
+
+// Additional story with different pillar
+const ContentBlockVisitTemplate: Story = {
+  render: () => {
+    return (
+      <>
+        <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="visit" level="primary">
+          <ContentBlock pillar="visit">
+            <h1>Terms of Service</h1>
+            <p>Please read these terms carefully</p>
+
+            <h3>User Agreement</h3>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua.
+            </p>
+
+            <h3>Privacy & Data</h3>
+            <p>
+              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            </p>
+          </ContentBlock>
+        </ElementHolder>
+      </>
+    )
+  }
+}
+
+export const ContentBlockVisit = {
+  ...ContentBlockVisitTemplate
+};

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

@@ -0,0 +1,36 @@
+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',
+    spacingTop = 'none',
+  } = props;
+
+  const className = cslx(
+    styles.contentBlock ,
+    `${pillar}`,
+    {
+      [styles[`contentBlock--pt-${spacingTop}`]]: spacingTop,
+    },
+  );
+
+  return (
+    <div className={className}>
+      <Container>
+        <div className={`typography ${styles.contentBlockWrapper}` }>
+          {children}
+        </div>
+      </Container>
+      <div className={styles.heroSvg}>
+        <LargeHeroIcon/>
+      </div>
+    </div>
+  );
+};
+
+export default ContentBlock;

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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,76 @@
+.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) {
+    width: 100%;
+  }
+
+  @media (max-width: 480px) {
+    width: 100%;
+  }
+
+}
+
+.contentBlockWrapper {
+  max-width: 910px;
+  font-family: var(--font);
+
+  h1,h2,h3,h4,h5,h6{
+    margin-bottom: 24px ;
+    font-weight: 400;
+  }
+
+
+
+}
+
+.heroSvg {
+  position: absolute;
+  z-index: 5;
+  top: 0;
+  height: 340px;
+  pointer-events: none;
+  opacity: 0.2;
+  right: -240px;
+
+  @media (max-width: 1024px) {
+    display: none;
+  }
+}

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

@@ -10,16 +10,14 @@ const DetailsCard = (props: DetailsCardProps) => {
       date = '',
       image = '',
       variation= 'long',
-      link = '',
-      category = 'all',
+      link = {},
       pillar = 'visit'
     } = props;
 
     const classes = [
         styles.detailsCard,
-        `${pillar}--light`,
-        "visit",
-        "detailsCard",  
+        "detailsCard",
+        `${pillar}`
     ];
     
     if(variation==='short') {
@@ -27,11 +25,11 @@ const DetailsCard = (props: DetailsCardProps) => {
     }
 
 
-    return <div className={cx(classes)} id={category}>
-        <a href={link.href} target={link.target} rel={link.rel} className={`${styles.cardWrap} ${styles.detailsCardWithLink}`}>
-          {image && <div className={styles.cardImage}>
-            <img src={image} alt={title} />
-          </div>}
+    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} />}
+          </div>
           
           <div className={styles.cardContent}>
             <div className={styles.cardBody}>

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/DetailsCard/detailsCard.module.scss

@@ -4,6 +4,7 @@
     border:1px solid var(--pathway-card-border);
     color: var(--pathway-card-text);
     background-color: var(--pathway-card-bg);
+    transition: all 0.3s ease-in-out;
 
     &.detailsCardShort {
         min-height: 274px;
@@ -27,6 +28,7 @@
 
 .cardImage {
     height: 200px;
+
     img {
         width: 100%;
         height: 100%;
@@ -55,7 +57,7 @@
 }
 
 .cardWrap {
-    min-height: 400px;
+    min-height: 450px;
     display: flex;
     flex-direction: column;
 

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

@@ -7,7 +7,7 @@ import Button from "../../Form/Button/Button";
 
 
 const meta: Meta = {
-  title: "Layout / ImageContent",
+  title: "DataDisplay / ImageContent",
   component: ImageContent,
   parameters: {
     layout: 'fullscreen',
@@ -31,6 +31,8 @@ const ImageContentTemplate: Story = {
          level={'light'}
        >
          <ImageContent
+           paddingTop={'md'}
+           paddingBottom={'md'}
            title={'Lorem'}
            boldTitle={'ipsum dolor'}
            content={'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'}
@@ -119,11 +121,8 @@ const ImageContentFullTemplate: Story = {
           <ImageContent
             rendition={'full'}
             pillar={'live'}
-            images={{
-              single: [
-                'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg',
-              ],
-            }}
+            title={'More life'}
+            boldTitle={'less fuss'}
             list={[
               {
                 id:'1',
@@ -152,11 +151,6 @@ const ImageContentFullTemplate: Story = {
           <ImageContent
             rendition={'full'}
             pillar={'live'}
-            images={{
-              single: [
-                'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg',
-              ],
-            }}
             list={[
               {
                 id:'1',