@hellobetterdigitalnz/selwynui 0.0.1

package/src/Components/Layout/Footer/footer.module.scss

@@ -0,0 +1,295 @@
+.footer {
+  width: 100%;
+
+  .container {
+    max-width: 1832px;
+    margin: 0 auto;
+  }
+
+  // Footer Top
+  .footerTop {
+    padding-top: 72px;
+    border-radius: 12px 12px 0 0;
+    background-color: var(--color-taste);
+
+    .footerTopWrapper {
+      color: var(--color-visit);
+    }
+
+    .footerTopLeft {
+      align-items: center;
+
+      h1 {
+        font-size: var(--font-size-h5);
+        font-weight: var(--font-weight-h4);
+      }
+
+      h2 {
+        font-size: var(--font-size-h5);
+        font-weight: var(--font-weight-h5);
+        padding-bottom: 32px;
+      }
+    }
+
+    .footerTopRight {
+      font-size: var(--font-size-body-regular);
+    }
+  }
+
+  // Footer Middle
+  .footerMiddle {
+    background-color: var(--color-visit);
+
+    .footerMiddleWrapper {
+
+      img {
+        padding-bottom: 72px;
+      }
+
+      .footerItem {
+        h3 {
+          color: var(--color-taste);
+          font-size: var(--font-size-small);
+          font-weight: var(--font-weight-h4);
+        }
+
+        ul {
+          display: none;
+        }
+      }
+    }
+  }
+
+  // Footer Bottom
+  .footerBottom {
+    background-color: var(--color-visit);
+
+    .footerBottomWrapper {
+
+      .footerBottomLeft {
+
+        .footerBottomLeftWrapper {
+
+          .footerBottomLeftLogo {
+            color: var(--color-taste);
+            font-size: var(--font-size-body-sm);
+
+            img {
+              padding-bottom: 24px;
+            }
+          }
+
+          .footerBottomLeftLinks {
+            display: flex;
+            align-items: flex-end;
+
+            ul {
+              display: flex;
+              gap: 24px;
+              list-style: none;
+              padding: 0;
+              margin: 0;
+
+              a {
+                color: var(--color-taste);
+                font-size: var(--font-size-body-sm);
+              }
+            }
+          }
+        }
+      }
+
+      .footerBottomRight {
+        .footerBottomRightWrapper {
+
+          display: flex;
+          padding-top: 72px;
+          gap: 16px;
+
+          .footerLogo {
+            display: flex;
+            background-color: var(--color-taste);
+            border-radius: 50%;
+            height: 40px;
+            width: 40px;
+            align-items: center;
+            justify-content: center;
+
+            a {
+              display: flex;
+              color: var(--color-visit);
+
+              svg {
+                height: 24px;
+                width: 24px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @media screen and (min-width: 1440px) {
+
+    // Footer Top
+    .footerTop {
+      position: relative;
+
+      .footerTopWrapper {
+        display: flex;
+        gap: 154px;
+        justify-content: space-between;
+
+        .footerTopLeft {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: start;
+
+          h1 {
+            font-size: var(--font-size-h3);
+            font-weight: var(--font-weight-h1);
+            line-height: var(--line-height-h3);
+          }
+
+          h2 {
+            font-size: var(--font-size-h3);
+            font-weight: var(--font-weight-bold);
+            line-height: var(--line-height-h3);
+          }
+        }
+
+        .footerTopRight {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          p {
+            font-size: var(--font-size-small);
+          }
+        }
+      }
+
+      .footerBgDesignContainer {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: 96px;
+
+        svg {
+          height: 100%;
+        }
+      }
+    }
+
+
+    // Footer Middle
+    .footerMiddle {
+      .footerMiddleWrapper {
+        display: flex;
+        flex-wrap: wrap;
+        padding-top: 64px;
+        padding-bottom: 32px;
+
+        .footerLogoContainer {
+          flex: 1;
+        }
+
+        .socialMediaLinks {
+          display: none;
+        }
+      }
+
+
+      .footerMiddleLinks {
+        display: flex;
+        flex-grow: 1;
+        flex-wrap: wrap;
+      }
+
+      .footerItem {
+        width: 20%;
+
+        h3 {
+          padding-bottom: 28px;
+          font-weight: var(--font-weight-body-sm);
+        }
+
+        ul {
+          display: block !important;
+
+          gap: 16px;
+          list-style: none;
+          padding: 0;
+          margin: 0;
+        }
+
+        a {
+          color: var(--color-sand);
+          font-size: var(--font-size-body-xsm);
+        }
+      }
+    }
+
+    // Footer Bottom
+    .footerBottom {
+      padding-bottom: 38px;
+
+      .footerBottomWrapper {
+        display: flex;
+        justify-content: space-between;
+
+        .footerBottomLeft {
+
+          .footerBottomLeftWrapper {
+            display: flex;
+            gap: 166px;
+
+            .footerBottomLeftLogo {
+              //padding-bottom: 38px;
+            }
+
+            .footerBottomLeftLinks {
+              //padding-bottom: 38px;
+            }
+          }
+        }
+
+        .footerBottomRight {
+          //padding-bottom: 38px;
+
+          .footerBottomRightWrapper {
+            display: flex;
+
+
+            .footerLogoWrapper {
+              padding: 0 8px;
+
+              .footerLogo {
+                display: flex;
+                background-color: #92c134;
+                border-radius: 50%;
+                height: 40px;
+                width: 40px;
+                align-items: center;
+                justify-content: center;
+
+                a {
+                  display: flex;
+                  color: var(--color-inverse-text);
+
+                  svg {
+                    height: 24px;
+                    width: 24px;
+                  }
+                }
+              }
+            }
+
+          }
+        }
+      }
+    }
+  }
+}

package/src/Components/Layout/Header/Header.stories.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import {Meta, StoryObj} from "@storybook/react-vite";
+import Header from "./Header";
+import HeaderRight from "./HeaderRight";
+import HeaderRightItem from "./HeaderRightItem";
+import MagnifyingGlass from "./MagnifyingGlass/MagnifyingGlass";
+
+
+const meta: Meta = {
+  title: "Layout / Header",
+  component: Header,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const logo = (
+    <a href={"/"}>
+      <img src={'/img/waikirikiri-full-logo.svg'} width={190} height={60} alt={'Hello Better'}/>
+    </a>
+);
+
+const logoSmall = (
+    <a href={"/"}>
+      <img src={'/img/waikirikiri-full-logo.svg'} width={110} height={45} alt={'Hello Better'}/>
+    </a>
+);
+
+
+const HeaderTemplate: Story = {
+  render: () => {
+
+    // @ts-ignore
+    return <Header logo={logo} logoSmall={logoSmall}>
+      <HeaderRight>
+        <HeaderRightItem>
+          Participate
+        </HeaderRightItem>
+        <HeaderRightItem>
+          Business
+        </HeaderRightItem>
+        <HeaderRightItem>
+          Live
+        </HeaderRightItem>
+        <HeaderRightItem>
+          Visit
+        </HeaderRightItem>
+        <HeaderRightItem>
+          Taste
+        </HeaderRightItem>
+        <HeaderRightItem>
+          <MagnifyingGlass/>
+        </HeaderRightItem>
+      </HeaderRight>
+    </Header>
+  },
+};
+
+export const HeaderComponent = {
+  ...HeaderTemplate,
+};

package/src/Components/Layout/Header/Header.tsx

@@ -0,0 +1,27 @@
+import styles from "./header.module.scss"
+import HeaderProps from "./HeaderProps.tsx";
+import Container from "../../Shared/Container/Container.tsx";
+const Header = (props : HeaderProps) => {
+
+  const { children, logoSmall, logo } = props
+
+  return <header className={styles.header}>
+   <Container>
+     <div className={styles.headerWrapper}>
+       <div className={styles.headerLogo}>
+         <div className={`${styles.logo} HeaderLogo`}>
+           {logo}
+         </div>
+         <div className={`${styles.logoSmall} HeaderLogoSmall`}>
+           {logoSmall}
+         </div>
+       </div>
+       <div className={styles.headerRight}>
+         {children}
+       </div>
+     </div>
+   </Container>
+  </header>
+}
+
+export default Header;

package/src/Components/Layout/Header/HeaderProps.tsx

@@ -0,0 +1,9 @@
+import {ReactNode} from "react";
+
+interface HeaderProps{
+  children?:ReactNode
+  logo?: ReactNode,
+  logoSmall?: ReactNode,
+}
+
+export default HeaderProps

package/src/Components/Layout/Header/HeaderRight.tsx

@@ -0,0 +1,12 @@
+import styles from './header.module.scss'
+import HeaderRightProps from "./HeaderRightProps.tsx";
+
+const HeaderRight = ({children} : HeaderRightProps) =>{
+
+  return <div className={styles.headerRightWrapper}>
+    {children}
+  </div>
+
+}
+
+export default HeaderRight

package/src/Components/Layout/Header/HeaderRightItem.tsx

@@ -0,0 +1,21 @@
+import styles from './header.module.scss'
+import HeaderRightItemProps from "./HeaderRightItemProps.tsx";
+
+const HeaderRightItem = (props : HeaderRightItemProps) =>{
+  const { href , target,  children, extraClass, icon, menuDropdown, active } = props
+  return <div className={`${styles.headerBottomItemHolder} ${active && styles.active}`}>
+    <a href={href} target={target} className={`${styles.headerBottomItem} ${extraClass}`}>
+      {icon && <div className={styles.icon}>
+        {icon}
+      </div>}
+      {children}
+    </a>
+    {menuDropdown && (
+      <div className={styles.menuDropdown}>
+        {menuDropdown}
+      </div>
+    )}
+  </div>;
+}
+
+export default HeaderRightItem

package/src/Components/Layout/Header/HeaderRightItemProps.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from "react"
+
+interface HeaderRightItemProps {
+  children?: ReactNode
+  extraClass?: string
+  icon?:ReactNode
+  menuDropdown?:ReactNode
+  href?:string
+  target?:string
+  active?:boolean
+}
+
+export default HeaderRightItemProps;

package/src/Components/Layout/Header/HeaderRightProps.tsx

@@ -0,0 +1,7 @@
+import {ReactNode} from "react";
+
+interface HeaderRightProps {
+  children?:ReactNode
+}
+
+export default HeaderRightProps

package/src/Components/Layout/Header/MagnifyingGlass/MagnifyingGlass.tsx

@@ -0,0 +1,10 @@
+const MagnifyingGlass = () => {
+  return <svg xmlns="http://www.w3.org/2000/svg" width="36" height="37" viewBox="0 0 36 37" fill="none">
+    <path d="M15.75 27C21.9632 27 27 21.9632 27 15.75C27 9.5368 21.9632 4.5 15.75 4.5C9.5368 4.5 4.5 9.5368 4.5 15.75C4.5 21.9632 9.5368 27 15.75 27Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M23.7051 23.7051L31.4999 31.4999" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M24 17.5C20.4101 17.5 17.5 20.4101 17.5 24C17.5 20.4101 14.5899 17.5 11 17.5C14.5899 17.5 17.5 14.5899 17.5 11C17.5 14.5899 20.4101 17.5 24 17.5Z" fill="currentColor"/>
+    <circle cx="12" cy="12" r="2.5" fill="currentColor"/>
+  </svg>
+}
+
+export default MagnifyingGlass;

package/src/Components/Layout/Header/MegaMenu/MegaMenu.tsx

@@ -0,0 +1,5 @@
+const MegaMenu = () => {
+  return
+}
+
+export default MegaMenu;

package/src/Components/Layout/Header/MegaMenu/MegaMenuProps.tsx

@@ -0,0 +1,5 @@
+interface MegaMenuProps {
+  pillar: 'vist' | 'live' | 'business' | 'participate'
+}
+
+export default MegaMenuProps;

package/src/Components/Layout/Header/header.module.scss

@@ -0,0 +1,90 @@
+.header{
+  background: var(--header-bg);
+
+  .headerWrapper{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 96px;
+  }
+
+  .headerLogo{
+    display: flex;
+
+    a{
+      display: flex;
+    }
+  }
+
+  .logo {
+    display: none;
+  }
+
+  .logoSmall {
+    display: block;
+  }
+
+  .headerRightWrapper{
+    display: flex;
+    align-items: center;
+    margin: 0 -16px;
+  }
+
+  .headerBottomItemHolder{
+    padding: 0 16px;
+    transition: color 0.3s ease-in;
+
+    a{
+      display: flex;
+      align-items: center;
+      color: var(--header-color);
+      font-size: 24px;
+      font-weight: 400;
+      line-height: 1.5;
+      cursor: pointer;
+
+      .icon{
+        display: flex;
+
+        svg{
+          width: 24px;
+          height: 24px;
+        }
+      }
+
+    }
+
+    &:hover, &.active{
+
+     a{
+       color: var(--font-color);
+     }
+
+    }
+
+  }
+
+  @media screen and (min-width: 1648px) {
+    .headerRightWrapper{
+      display: flex;
+      align-items: center;
+      margin: 0 -28px;
+    }
+
+    .headerBottomItemHolder {
+      padding: 0 28px;
+    }
+  }
+
+
+  @media screen and (min-width: 992px) {
+      .logo {
+        display: block;
+      }
+
+      .logoSmall {
+        display: none;
+      }
+  }
+
+}

package/src/Components/Layout/HeroBanner/HeroBanner.stories.tsx

@@ -0,0 +1,77 @@
+// @ts-ignore
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react-vite";
+import HeroBanner from "./HeroBanner";
+import { title } from "process";
+
+const meta: Meta = {
+  title: "Layout / HeroBanner",
+  component: HeroBanner,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ["autodocs"]
+}
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const HeroBannerTemplate: Story = {
+  render: () => {
+    
+    return (
+      <>
+        <HeroBanner
+          title={'Make your mark'}
+          boldTitle={'in Selwyn'}
+        />
+      </>
+    )
+  }
+}
+
+const HeroBannerMediumTemplate: Story = {
+  render: () => {
+
+    return (
+      <>
+        <HeroBanner
+          title={'Adventure'}
+          boldTitle={'starts here'}
+          description={'From the Southern Alps to the sea, Waikirikiri Selwyn’s diverse towns arespread across the Canterbury Plains between two mighty braided rivers. '}
+          heroSize={'medium'}
+        />
+      </>
+    )
+  }
+}
+
+const HeroBannerSmallTemplate: Story = {
+  render: () => {
+
+    return (
+      <>
+        <HeroBanner
+          title={'There’s plenty to do'}
+          boldTitle={'in Selwyn'}
+          description={'From the Southern Alps to the sea, Waikirikiri Selwyn’s diverse towns arespread across the Canterbury Plains between two mighty braided rivers. '}
+          heroSize={'small'}
+          pillar={"participate"}
+        />
+      </>
+    )
+  }
+}
+
+export const HeroBannerComponent = {
+  ...HeroBannerTemplate
+};
+
+export const HeroBannerMediumComponent = {
+  ...HeroBannerMediumTemplate
+};
+
+export const HeroBannerSmallComponent = {
+  ...HeroBannerSmallTemplate
+};