@hellobetterdigitalnz/selwynui 0.0.1-2 → 0.0.1-22

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

@@ -10,6 +10,7 @@ export type PillarType =
 
 export type RenditionType =
   | "full"
+  | "fluid"
   | "contained"
   | "masked";
 
@@ -34,7 +35,7 @@ export interface ImageContentProps {
   images?: ImageSet;
   imageSrc?:string;
   alignment?: 'left' | 'right';
-  imageBorder?: 'top' | 'bottom'
+  imageBorder?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
   rendition?: RenditionType;
   list?: Item[];
 }

package/src/Components/DataDisplay/ImageContent/imageContent.module.scss

@@ -100,8 +100,24 @@
   &.maskedImageContent{
 
     .pillarlogo{
+      display: flex;
       margin-bottom: 48px;
+      align-items: center;
 
+      p{
+        margin-left: 16px;
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 140%;
+      }
+
+      &.pillarlogoFull{
+        svg{
+          width: 32px;
+          height: 32px;
+        }
+      }
       svg{
         width: 160px;
         height: 54px;
@@ -141,12 +157,14 @@
   // full image
   &.imageContentFull{
     position: relative;
+    overflow: hidden;
 
     .svgBackgroundPillar{
       position: absolute;
       width: 60%;
       top: 0;
       bottom: 0;
+      pointer-events: none;
     }
 
     .pillarlogo{
@@ -158,71 +176,51 @@
       }
     }
 
-    &.top{
-      &.left{
-      .imageHolder {
-        border-radius: 0px 500px 0px 0px;
-      }
-    }
+   &.top-left{
+     .imageHolder{
+       border-radius: 200px 0 0 0;
+     }
+   }
 
-      &.right{
-        .imageHolder {
-          border-radius: 500px 0px 0px;
-        }
+    &.top-right{
+      .imageHolder{
+        border-radius: 0 200px 0 0;
       }
     }
 
-    &.bottom{
-      &.left{
-        .imageHolder {
-          border-radius: 0px 0px 500px 0px;
-        }
-      }
-
-      &.right{
-        .imageHolder {
-          border-radius: 0px 0px 0px 500px;
-        }
+    &.bottom-right{
+      .imageHolder{
+        border-radius: 0 0 200px 0;
       }
     }
 
-    &.left{
-      .imageContentWrapper {
-        flex-direction: row;
-      }
-
-      .imageHolder {
-        height: 100%;
-        position: absolute;
-        width: calc(50vw + 10px);
-        right: 0;
-        left: unset;
+    &.bottom-left{
+      .imageHolder{
+        border-radius: 0 0 0 200px;
       }
-
-      .content{
-        padding-left: 198px;
-        padding-right: 0;
-      }
-
     }
 
     .imageContentWrapper{
       margin: 0px;
-      min-height: 935px;
     }
 
     .imageWrapper{
       position: relative;
       padding: 0px;
+      //width: 100%;
+      z-index: 1;
+      margin-top: 0;
+      width: calc(100% + 32px);
+      margin-left: -16px;
+      margin-right: -15px;
     }
 
     .imageHolder {
       padding: 0;
       height: 100%;
-      position: absolute;
-      width: calc(50vw - 10px);
-      left: 0;
-      overflow: hidden;
+      width: 100%;
+      min-width: 50vw;
+      min-height: 380px;
 
 
       &::before {
@@ -238,8 +236,9 @@
     }
 
     .content{
-      padding: 0;
-      padding-right: 198px;
+      padding-top: 32px;
+      padding-bottom: 32px;
+      padding-right: 0px;
 
       .desc{
       }
@@ -274,7 +273,65 @@
 
   }
 
-  @media screen and (min-width: 992px){
+  //Fluid
+  &.imageContentFluid{
+    overflow-x: hidden;
+
+    .pillarlogo{
+      display: flex;
+      margin-bottom: 48px;
+      align-items: center;
+
+      p{
+        margin-left: 16px;
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 140%;
+      }
+
+      &.pillarlogoFull{
+        svg{
+          width: 32px;
+          height: 32px;
+        }
+      }
+      svg{
+        width: 160px;
+        height: 54px;
+      }
+
+    }
+
+    .imageContentWrapper{
+      min-height: 725px;
+    }
+
+    .imageHolder{
+      min-width: 50vw;
+      border-radius: 0;
+      width: calc(100% + 32px);
+      margin-left: -16px;
+      margin-right: -16px;
+      position: relative;
+
+      .clipPath{
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        color: var(--color-block-bg);
+      }
+
+    }
+
+    .content{
+      padding-top: 32px;
+      padding-bottom: 32px;
+    }
+
+  }
+
+  @media screen and (min-width: 1200px){
 
     &Wrapper{
       margin: 0 -52px;
@@ -336,6 +393,47 @@
       .pillarlogo{
         margin-bottom: 48px;
       }
+
+      &.top-left{
+        .imageHolder{
+          border-radius: 500px 0 0 0;
+        }
+      }
+
+      &.top-right{
+        .imageHolder{
+          border-radius: 0 500px 0 0;
+        }
+      }
+
+      &.bottom-right{
+        .imageHolder{
+          border-radius: 0 0 500px 0;
+        }
+      }
+
+      &.bottom-left{
+        .imageHolder{
+          border-radius: 0 0 0 500px;
+        }
+      }
+
+      .imageContentWrapper{
+        margin: 0px;
+        min-height: 935px;
+      }
+
+      .imageWrapper{
+        width: 50%;
+        margin-left: 0px;
+        margin-right: 0px;
+      }
+
+      .content{
+        padding-right: 149px;
+        padding-left: 0px;
+      }
+
     }
 
   }

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

@@ -1,27 +1,64 @@
+import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import Pathway from './Pathway';
-import { FaArrowRight } from "react-icons/fa";
+import {ElementHolder} from "../../Shared";
 
 const meta : Meta<typeof Pathway> = {
     title: "Form / Pathway",
     component: Pathway,
-
 }
 
 export default meta;
 type Story = StoryObj<typeof Pathway>
 
-export const grid: Story = {
-    args: {
-        title: "This is a card title that is quite long and probably wraps over a few lines",
-        link: '#',
-        filters: ["all", "adventure", "ski", "nature", "city"], 
-        cards: [
-            { title: "Ballooning Canterbury", link: "#", image: "./img/card-one.png", category: "adventure" },
+const GridTemplate: Story = {
+    render : () =>{
+
+      return <ElementHolder paddingTop={'md'} paddingBottom={"md"}>
+        <Pathway
+          title={'Food and drink'}
+          description={'Find the ideal event venues in Selwyn, where beautiful landscapes blend with top-notch facilities. '}
+          variation={'grid'}
+          filters={["all", "adventure", "ski", "nature", "city"]}
+          cards={
+            [
+              { title: "Ballooning Canterbury", link: "#", image: "./img/card-one.png", category: "adventure", pillar: "live" },
+              { title: "Ski Resort", link: "#", image: "./img/card-two.png", category: "ski" },
+              { title: "Nature Walk", link: "#", image: "./img/card-three.png", category: "nature" },
+              { title: "City Tour", link: "#", image: "./img/card-four.png" }
+            ]
+          }
+        />
+      </ElementHolder>
+    }
+};
+
+const CarouselTemplate: Story = {
+  render : () =>{
+
+    return <ElementHolder paddingTop={'md'} paddingBottom={"md"}>
+      <Pathway
+        title={'Food and drink'}
+        description={'Find the ideal event venues in Selwyn, where beautiful landscapes blend with top-notch facilities. '}
+        variation={'carousel'}
+        cards={
+          [
+            { title: "Ballooning Canterbury", link: "#", image: "./img/card-one.png", category: "adventure", pillar: "live" },
             { title: "Ski Resort", link: "#", image: "./img/card-two.png", category: "ski" },
             { title: "Nature Walk", link: "#", image: "./img/card-three.png", category: "nature" },
-            { title: "City Tour", link: "#", image: "./img/card-four.png" } 
-        ]
-
-    },
+            { title: "City Tour", link: "#", image: "./img/card-four.png" }
+          ]
+        }
+      />
+    </ElementHolder>
+  }
 };
+
+
+export const GridView = {
+  ...GridTemplate,
+}
+
+export const CarouselView = {
+  ...CarouselTemplate,
+}

package/src/Components/DataDisplay/Pathway/Pathway.tsx

@@ -2,7 +2,6 @@ import cx from "classnames";
 import  PathwayProps from './PathwayProps';
 import styles from "./pathway.module.scss";
 import cslx from "clsx";
-import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
 import Container from "../../Shared/Container/Container";
 import DetailsCard from "../DetailsCard/DetailsCard";
 import { CaretDown } from "../../Icons";
@@ -29,10 +28,22 @@ const Pathway = (props:PathwayProps) => {
   const classes = [styles.pathway, "pathway", variation === "carousel" && styles.pathwayCarousel];
 
   return (
-    <ElementHolder paddingTop="none" level="light">
+    <div>
       <Container>
         {variation === "carousel" ? (
-          <div className={cx(classes)}>{/* TODO */}</div>
+          <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>
@@ -76,7 +87,7 @@ const Pathway = (props:PathwayProps) => {
           </div>
         )}
       </Container>
-    </ElementHolder>
+    </div>
   );
 };
 

package/src/Components/DataDisplay/Pathway/PathwayProps.tsx

@@ -1,8 +1,17 @@
 export interface Card {
-  title: string;
-  link: string;
-  image: string;
-  category?: 'adventure' | 'ski' | 'nature'; 
+  title?:string,
+  description?:string,
+  date?: string,
+  link?: {
+    title?: string;
+    href?: string;
+    target?: "_blank" | "_self" | "_parent" | "_top";
+    rel?: string;
+  };
+  pillar?: 'visit' | 'live' | 'business' | 'participate' | 'taste'
+  image?:string,
+  variation?: "long" | "short";
+  category?: 'all' | 'adventure' | 'ski' | 'nature',
 }
 
 interface PathwayProps {

package/src/Components/DataDisplay/PathwayBlock/PathwayBlock.tsx

@@ -22,8 +22,6 @@ const PathwayBlock = (props: PathwayBlockProps) => {
                   key={index}
                   title={card.description}
                   image={card.image}
-                  link="Learn More"
-
                 />
               </div>
             ))}

package/src/Components/DataDisplay/PromoBannerBlock/PromoBanner.stories.tsx

@@ -31,9 +31,8 @@ const PromoBannerBlockTemplate: Story = {
                     content={'Visit Selwyn is for those who like to take the back roads, breathe mountain air, and find their own pace. Stay a little longer, explore deeper, and refuel with great kai and local stories along the way.'}
                     image={'promo-banner-image.svg'}
                     button={
-                        <Button label={'START EXPLORING'} piller={'visit'} level={'primary'} icon={<ArrowRight />} />
+                        <Button label={'START EXPLORING'} piller={'visit'} level={'primary'} secondaryIcon={<ArrowRight />} />
                     }
-
                 />
             </ElementHolder>
         )

package/src/Components/DataDisplay/PromoBannerBlock/PromoBannerBlock.tsx

@@ -43,7 +43,6 @@ const PromoBannerBlock = (props: PromoBannerBlockProps) => {
                                 <PromoBannerBgDesign />
                             </div>
                         </div>
-
                         <div className={styles.promoBannerBottom}>
                             <div className={styles.promoBannerBottomLeft}>
                                 <div className={styles.promoBannerBrandPiller}>
@@ -52,19 +51,16 @@ const PromoBannerBlock = (props: PromoBannerBlockProps) => {
                                     </div>
                                     {pillerTitle}
                                 </div>
-
                                 <div className={styles.promoBannerTitleContainer}>
                                     <h1>{title}</h1>
                                     <h2>{boldTitle}</h2>
                                 </div>
-
                                 <p>{content}</p>
-
                                 {button}
                             </div>
 
                             <div className={styles.promoBannerBottomRight}>
-                                <img src={`./img/${image}`} alt="" />
+                                <img src={image} alt={title} />
                             </div>
                         </div>
                     </div>

package/src/Components/DataDisplay/PromoBannerBlock/promoBanner.module.scss

@@ -1,6 +1,6 @@
 .promoBannerBlock {
     overflow-x: hidden;
-    padding: 48px 16px;
+    padding: 48px 0px;
 
     .promoBannerBlockContainer {
         .promoBannerTop {
@@ -81,6 +81,8 @@
             }
 
             .promoBannerBottomRight {
+              background: var(--color-sand);
+
                 img {
                     height: 100%;
                     width: 100%;
@@ -92,7 +94,6 @@
     }
 
     @media screen and (min-width: 992px) {
-        padding: 120px 0;
 
         .promoBannerBlockContainer {
             .promoBannerTop {

package/src/Components/DataDisplay/index.ts

@@ -16,4 +16,8 @@ export type { default as PathwayProps } from './Pathway/PathwayProps';
 
 // PromoBanner
 export { default as PromoBannerBlock } from './PromoBannerBlock/PromoBannerBlock';
-export type { default as PromoBannerBlockProps } from './PromoBannerBlock/PromoBannerBlockProps';
+export type { default as PromoBannerBlockProps } from './PromoBannerBlock/PromoBannerBlockProps';
+
+//ImageContent
+export {default as ImageContent} from './ImageContent/ImageContent'
+export type {default as ImageContentProps} from './ImageContent/ImageContentProps'

package/src/Components/DataDisplay/slider.scss

@@ -0,0 +1,2 @@
+@import "../../../node_modules/slick-carousel/slick/slick.css";
+@import "../../../node_modules/slick-carousel/slick/slick-theme.css";

package/src/Components/Form/Button/ButtonProps.tsx

@@ -5,7 +5,7 @@ interface ButtonProps {
   size?: "default" | "large" | "small";
   style?: "solid" | "hollow" | "no-border";
   level?: 'primary' | 'secondary' | 'light'
-  pillar?: 'main' | 'live' | 'visit' | 'taste' | 'business' | 'participate'
+  pillar?: 'main' | 'live' | 'visit' | 'taste' | 'business' | 'participate' | undefined;
   linkable?: boolean;
   extraClass?: string;
   link?:{

package/src/Components/Form/Button/button.module.scss

@@ -1,4 +1,3 @@
-@use "../../../variable.scss" as *;
 
 .button {
   position: relative;

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

@@ -161,7 +161,7 @@ const FooterTemplate: Story = {
             </FooterBottom>
         );
 
-        return (
+      return (
             <Footer
                 logo='img\waikirikiri-full-logo.svg'
                 footerTop={footerTop}

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

@@ -5,6 +5,10 @@ import HeaderRight from "./HeaderRight";
 import HeaderRightItem from "./HeaderRightItem";
 import MagnifyingGlass from "./MagnifyingGlass/MagnifyingGlass";
 import MegaMenu from "./MegaMenu/MegaMenu";
+import {List} from "../../Icons";
+import  "./header.scss"
+import MobileNavigation from "./MobileNavigation/MobileNavigation";
+import MobileNavigationItem from "./MobileNavigation/MobileNavigationItem";
 
 
 const meta: Meta = {
@@ -28,7 +32,7 @@ const logo = (
 
 const logoSmall = (
     <a href={"/"}>
-      <img src={'/img/waikirikiri-full-logo.svg'} width={110} height={45} alt={'Hello Better'}/>
+      <img src={'/img/waikirikiri-full-logo.svg'} width={110} height={34} alt={'Hello Better'}/>
     </a>
 );
 
@@ -39,25 +43,48 @@ const HeaderTemplate: Story = {
     // @ts-ignore
     return <Header logo={logo} logoSmall={logoSmall}>
       <HeaderRight>
-        <HeaderRightItem menuDropdown={<MegaMenu pillar={'live'}/>}>
+        <HeaderRightItem  extraClass={'desktop-item'} menuDropdown={<MegaMenu pillar={'live'}/>}>
           Participate
         </HeaderRightItem>
-        <HeaderRightItem>
+        <HeaderRightItem extraClass={'desktop-item'}>
           Business
         </HeaderRightItem>
-        <HeaderRightItem>
+        <HeaderRightItem extraClass={'desktop-item'}>
           Live
         </HeaderRightItem>
-        <HeaderRightItem>
+        <HeaderRightItem extraClass={'desktop-item'}>
           Visit
         </HeaderRightItem>
-        <HeaderRightItem>
+        <HeaderRightItem extraClass={'desktop-item'}>
           Taste
         </HeaderRightItem>
-        <HeaderRightItem>
+        <HeaderRightItem extraClass={'desktop-item'}>
           <MagnifyingGlass/>
         </HeaderRightItem>
+        <HeaderRightItem extraClass={'mobile-item'}>
+          <List/>
+        </HeaderRightItem>
       </HeaderRight>
+      {/*<MobileNavigation>*/}
+      {/*  <li>*/}
+      {/*    <MobileNavigationItem label={'Attractions'}/>*/}
+      {/*  </li>*/}
+      {/*  <li>*/}
+      {/*    <MobileNavigationItem label={'Eateries'}/>*/}
+      {/*  </li>*/}
+      {/*  <li>*/}
+      {/*    <MobileNavigationItem label={'Accommodation'}/>*/}
+      {/*  </li>*/}
+      {/*  <li>*/}
+      {/*    <MobileNavigationItem label={'Why visit Selwyn'}/>*/}
+      {/*  </li>*/}
+      {/*  <li>*/}
+      {/*    <MobileNavigationItem label={'Events'}/>*/}
+      {/*  </li>*/}
+      {/*  <li>*/}
+      {/*    <MobileNavigationItem label={'Venues'}/>*/}
+      {/*  </li>*/}
+      {/*</MobileNavigation>*/}
     </Header>
   },
 };

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

@@ -3,9 +3,9 @@ import HeaderProps from "./HeaderProps.tsx";
 import Container from "../../Shared/Container/Container.tsx";
 const Header = (props : HeaderProps) => {
 
-  const { children, logoSmall, logo } = props
+  const { children, logoSmall, logo, active } = props
 
-  return <header className={styles.header}>
+  return <header className={`${styles.header} ${active ? styles.active : ''}`}>
    <Container>
      <div className={styles.headerWrapper}>
        <div className={styles.headerLogo}>

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

@@ -4,6 +4,7 @@ interface HeaderProps{
   children?:ReactNode
   logo?: ReactNode,
   logoSmall?: ReactNode,
+  active?:boolean
 }
 
 export default HeaderProps

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

@@ -3,8 +3,8 @@ 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}`}>
+  return <div className={`${styles.headerBottomItemHolder} ${extraClass} ${active && styles.active}`}>
+    <a href={href} target={target} className={`${styles.headerBottomItem} headerBottomItem`}>
       {icon && <div className={styles.icon}>
         {icon}
       </div>}