@hellobetterdigitalnz/selwynui 0.0.1-8 → 0.0.1-80

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

@@ -9,6 +9,8 @@ import {List} from "../../Icons";
 import  "./header.scss"
 import MobileNavigation from "./MobileNavigation/MobileNavigation";
 import MobileNavigationItem from "./MobileNavigation/MobileNavigationItem";
+import MobileSubNavigation from "./MobileNavigation/MobileSubNavigation/MobileSubNavigation";
+import MobileSubNavigationItem from "./MobileNavigation/MobileSubNavigation/MobileSubNavigationItem";
 
 
 const meta: Meta = {
@@ -61,13 +63,13 @@ const HeaderTemplate: Story = {
         <HeaderRightItem extraClass={'desktop-item'}>
           <MagnifyingGlass/>
         </HeaderRightItem>
-        <HeaderRightItem extraClass={'mobile-item'}>
-          <List/>
-        </HeaderRightItem>
+        {/*<HeaderRightItem extraClass={'mobile-item'}>*/}
+        {/*  <List/>*/}
+        {/*</HeaderRightItem>*/}
       </HeaderRight>
-      <MobileNavigation>
+      <MobileSubNavigation>
         <li>
-          <MobileNavigationItem label={'Attractions'}/>
+          <MobileSubNavigationItem label={'Attractions'}/>
         </li>
         <li>
           <MobileNavigationItem label={'Eateries'}/>
@@ -84,7 +86,7 @@ const HeaderTemplate: Story = {
         <li>
           <MobileNavigationItem label={'Venues'}/>
         </li>
-      </MobileNavigation>
+      </MobileSubNavigation>
     </Header>
   },
 };

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

@@ -3,10 +3,10 @@ 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}>
-   <Container>
+  return <header className={`${styles.header} ${active ? styles.active : ''}`}>
+   <Container border={false}>
      <div className={styles.headerWrapper}>
        <div className={styles.headerLogo}>
          <div className={`${styles.logo} 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/MegaMenu/MegaMenu.tsx

@@ -1,98 +1,171 @@
-import MegaMenuProps from "./MegaMenuProps.tsx";
+import { useState } from "react";
+import MegaMenuProps, { MenuItem } from "./MegaMenuProps.tsx";
 import PillarLogo from "../../../Shared/PillarLogo/PillarLogo.tsx";
 import Button from "../../../Form/Button/Button.tsx";
 import ArrowRight from "../../../Icons/Arrows/ArrowRight/ArrowRight.tsx";
-import styles from "./megaMenu.module.scss"
+import styles from "./megaMenu.module.scss";
 import Container from "../../../Shared/Container/Container.tsx";
 
-const MegaMenu = (props : MegaMenuProps) => {
-
+const MegaMenu = (props: MegaMenuProps) => {
   const {
-    pillar,
-    menu,
-    imageSrc,
-    heading,
-    headingHighlight,
-    description
-  } = props
+    pillar = "main",
+    menu = [],
+    defaultImg,
+    defaultBoldTitle,
+    defaultDescription,
+    defaultTitle,
+    defaultAction,
+  } = props;
 
-  return <div className={`${styles.megaMenu} ${pillar}`}>
-    <div className={`${styles.megaMenuHolder}`}>
-      <Container>
-      <div className={`${styles.megaMenuWrapper} megaMenuWrapper`}>
-        <div className={styles.left}>
-          <div className={styles.pillarIcon}>
-            <PillarLogo brandPillar={pillar} brandFullLogo={true}/>
-          </div>
-          <ul>
-            <li>
-              <a href={''}>
-                Link
-                <ArrowRight type={'light'}/>
-              </a>
-            </li>
-            <li>
-              <a href={''}>
-                Link
-                <ArrowRight type={'light'}/>
-              </a>
-            </li>
-            <li>
-              <a href={''}>
-                Link
-                <ArrowRight type={'light'}/>
-              </a>
-            </li>
-            <li>
-              <a href={''}>
-                Link
-                <ArrowRight type={'light'}/>
-              </a>
-            </li>
-          </ul>
-        </div>
-        <div className={styles.right}>
-          <div className={styles.preview}>
-            <div className={styles.previewWrapper}>
-              <div className={styles.previewImg}>
-                <img src={'https://images.pexels.com/photos/709143/pexels-photo-709143.jpeg'}/>
-              </div>
-              <div className={styles.content}>
-                <h5>
-                  Spring gardens
-                  <br/>
-                  <span>in Selwyn</span>
-                </h5>
-                <p>
-                  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.
-                </p>
+  // ACTIVE ITEM ON HOVER
+  const [activeItem, setActiveItem] = useState<MenuItem | null>(null);
+
+  // Preview values (image, title, description)
+  const previewImg = activeItem?.imageUrl || defaultImg;
+  const previewTitle = activeItem?.title || defaultTitle;
+  const previewBoldTitle = activeItem?.boldTitle || defaultBoldTitle;
+  const previewDesc = activeItem?.description || defaultDescription;
+
+  // Action button (from hovered item or default)
+  const previewAction = activeItem?.action || defaultAction || {
+    label: "",
+    url: "",
+    target: "_self",
+    rel: "",
+  };
+
+  return (
+    <div className={`${styles.megaMenu} megaMenu ${pillar}`}>
+      <div className={`${styles.megaMenuHolder} megaMenuHolder`}>
+        <Container border={false}>
+          <div className={`${styles.megaMenuWrapper} megaMenuWrapper`}>
+            {/* LEFT */}
+            <div className={`${styles.left} left`}>
+              <div className={`${styles.pillarIcon} pillarIcon`}>
+                <PillarLogo brandPillar={pillar} brandFullLogo={true} />
               </div>
-              <div className={styles.action}>
-                <Button pillar={pillar} label={'START EXPLORING'} secondaryIcon={<ArrowRight/>}/>
+
+              <ul>
+                {menu.map((item, i) => (
+                  <li key={i}>
+                    <a
+                      href={item.url || "#"}
+                      target={item.target || "_self"}
+                      onMouseEnter={() => setActiveItem(item)}
+                      onMouseLeave={() => setActiveItem(null)}
+                    >
+                      {item.label}
+                      <ArrowRight type={"light"} />
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            {/* RIGHT PREVIEW */}
+            <div className={styles.right}>
+              <div className={styles.preview}>
+                <div className={styles.previewWrapper}>
+                  <div className={styles.previewImg}>
+                    {previewImg && <img src={previewImg} alt="" />}
+                  </div>
+
+                  <div className={styles.content}>
+                    <h5>
+                      {previewTitle}
+                      <br />
+                      <span>{previewBoldTitle}</span>
+                    </h5>
+
+                    <p>{previewDesc}</p>
+                  </div>
+
+                  { previewAction.label && <div className={styles.action}>
+                      <Button
+                        pillar={pillar}
+                        label={previewAction.label}
+                        linkable={true}
+                        link={{
+                          url: previewAction.url || "",
+                          target: previewAction.target || "_self",
+                          rel: previewAction.rel || "",
+                        }}
+                        secondaryIcon={<ArrowRight />}
+                      />
+                    </div>
+                  }
+                </div>
               </div>
             </div>
           </div>
+        </Container>
+
+        {/* SVG BACKGROUND */}
+        <div className={styles.megaMenuSvg}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="741"
+            height="340"
+            viewBox="0 0 741 340"
+            fill="none"
+          >
+            <g opacity="0.1">
+              <path
+                opacity="0.5"
+                d="M0 113.209C68.1991 113.209 123.5 163.901 123.5 226.417H0V113.209Z"
+                fill="currentColor"
+              />
+              <path
+                opacity="0.25"
+                d="M247 113.209C178.801 113.209 123.5 163.901 123.5 226.417H247V113.209Z"
+                fill="currentColor"
+              />
+              <path
+                opacity="0.5"
+                d="M741 226.417C672.801 226.417 617.5 175.725 617.5 113.209H741V226.417Z"
+                fill="currentColor"
+              />
+              <path
+                opacity="0.75"
+                d="M123.5 226.416C191.699 226.416 247 277.109 247 339.624H123.5V226.416Z"
+                fill="currentColor"
+              />
+              <path
+                opacity="0.5"
+                d="M247 339.624C315.199 339.624 370.5 288.932 370.5 226.416H247V339.624Z"
+                fill="currentColor"
+              />
+              <path
+                opacity="0.25"
+                d="M494 339.625C425.801 339.625 370.5 288.932 370.5 226.417H494V339.625Z"
+                fill="currentColor"
+              />
+              <path
+                opacity="0.75"
+                d="M617.5 226.417C549.301 226.417 494 277.109 494 339.625H617.5V226.417Z"
+                fill="currentColor"
+              />
+              <path
+                opacity="0.25"
+                d="M494 0.000656128C562.199 0.000656128 617.5 50.6932 617.5 113.209H494V0.000656128Z"
+                fill="currentColor"
+              />
+              <path
+                opacity="0.5"
+                d="M370.5 226.417C438.699 226.417 494 175.725 494 113.209H370.5V226.417Z"
+                fill="currentColor"
+              />
+              <path
+                opacity="0.75"
+                d="M247 113.208C315.199 113.208 370.5 62.5158 370.5 0H247V113.208Z"
+                fill="currentColor"
+              />
+            </g>
+          </svg>
         </div>
       </div>
-    </Container>
-      <div className={styles.megaMenuSvg}>
-        <svg xmlns="http://www.w3.org/2000/svg" width="741" height="340" viewBox="0 0 741 340" fill="none">
-          <g opacity="0.1">
-            <path opacity="0.5" d="M0 113.209C68.1991 113.209 123.5 163.901 123.5 226.417H0V113.209Z" fill="currentColor"/>
-            <path opacity="0.25" d="M247 113.209C178.801 113.209 123.5 163.901 123.5 226.417H247V113.209Z" fill="currentColor"/>
-            <path opacity="0.5" d="M741 226.417C672.801 226.417 617.5 175.725 617.5 113.209H741V226.417Z" fill="currentColor"/>
-            <path opacity="0.75" d="M123.5 226.416C191.699 226.416 247 277.109 247 339.624H123.5V226.416Z" fill="currentColor"/>
-            <path opacity="0.5" d="M247 339.624C315.199 339.624 370.5 288.932 370.5 226.416H247V339.624Z" fill="currentColor"/>
-            <path opacity="0.25" d="M494 339.625C425.801 339.625 370.5 288.932 370.5 226.417H494V339.625Z" fill="currentColor"/>
-            <path opacity="0.75" d="M617.5 226.417C549.301 226.417 494 277.109 494 339.625H617.5V226.417Z" fill="currentColor"/>
-            <path opacity="0.25" d="M494 0.000656128C562.199 0.000656128 617.5 50.6932 617.5 113.209H494V0.000656128Z" fill="currentColor"/>
-            <path opacity="0.5" d="M370.5 226.417C438.699 226.417 494 175.725 494 113.209H370.5V226.417Z" fill="currentColor"/>
-            <path opacity="0.75" d="M247 113.208C315.199 113.208 370.5 62.5158 370.5 0H247V113.208Z" fill="currentColor"/>
-          </g>
-        </svg>
-      </div>
     </div>
-  </div>
-}
+  );
+};
 
-export default MegaMenu;
+export default MegaMenu;

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

@@ -1,20 +1,33 @@
 export interface MenuItem {
-  label: string;
-  url: string;
-  imageUrl: string;
-  title: string;
-  description: string;
-  target: string;
-  pillar: 'vist' | 'live' | 'business' | 'participate' | 'taste';
+  label?: string;
+  url?: string;
+  imageUrl?: string;
+  title?: string;
+  boldTitle?:string
+  description?: string;
+  target?: string;
+  action?: {
+    label?: string;
+    url?: string;
+    target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
+    rel?: string;
+  };
+  pillar?: 'visit' | 'live' | 'business' | 'participate' | 'taste';
 }
 
 interface MegaMenuProps {
-  pillar: 'vist' | 'live' | 'business' | 'participate' | 'taste';
+  pillar: 'visit' | 'live' | 'business' | 'participate' | 'taste';
   menu: MenuItem[];
-  headingHighlight?: string;
   defaultImg?:string
   defaultTitle?: string;
+  defaultBoldTitle?: string;
   defaultDescription?:string;
+  defaultAction?: {
+    label?: string;
+    url?: string;
+    target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
+    rel?: string;
+  };
 }
 
 export default MegaMenuProps;

package/src/Components/Layout/Header/MegaMenu/megaMenu.module.scss

@@ -3,7 +3,7 @@
   right: 0;
   left: 0;
   background: var(--color-bg);
-  top: 96px;
+  top: 97px;
   border-radius: 0 0 366px 0;
   overflow-x: hidden;
 
@@ -19,6 +19,7 @@
   }
 
   .megaMenuSvg{
+    pointer-events: none;
     position: absolute;
     color: var(--color-text);
     bottom: 0;
@@ -33,7 +34,7 @@
     display: flex;
     flex-wrap: wrap;
     position: relative;
-    min-height: 878px;
+    min-height: calc(100vh - 96px);
 
     .right{
       width: 40%;
@@ -120,6 +121,7 @@
 
     .action{
       padding-top: 48px;
+      padding-bottom: 24px;
       padding-left: 72px;
     }
 

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

@@ -7,11 +7,12 @@ const MobileNavigation = (props : MobileNavigationProps) => {
 
   const {
     children,
-    extraClass
+    extraClass,
+    pillar = 'visit'
   } = props
 
-  return <div className={`${styles.mobileNavigation} ${extraClass} mobileNavigation`}>
-    <Container>
+  return <div className={`${styles.mobileNavigation} ${pillar} ${extraClass} mobileNavigation`}>
+    <Container border={false}>
       <ul className={`${styles.mobileNavigationWrapper} mobileNavigationWrapper`}>
         {children}
       </ul>

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

@@ -4,12 +4,16 @@ import ArrowRight from "../../../Icons/Arrows/ArrowRight/ArrowRight.tsx";
 
 const MobileNavigationItem = (props : MobileNavigationItemProps) => {
 
-  const {label} = props
+  const {label, href, target, onClick} = props
 
   return <div className={styles.mobileNavItem}>
     <div className={styles.mobileNavItemWrapper}>
-      <h6>{label}</h6>
-      <ArrowRight type={'light'}/>
+      <a href={href} target={target}>
+        {label}
+      </a>
+     <div onClick={onClick} className={styles.mobileNavItemSvg}>
+       <ArrowRight type={'light'}/>
+     </div>
     </div>
   </div>
 }

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

@@ -1,5 +1,8 @@
 interface MobileNavigationItemProps {
   label?: string;
+  href?:string
+  target?:string
+  onClick?:() => void;
 }
 
 export default MobileNavigationItemProps;

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

@@ -3,6 +3,7 @@ import {ReactNode} from "react";
 interface MobileNavigationProps {
   children?:ReactNode;
   extraClass?:string;
+  pillar: 'visit' | 'live' | 'business' | 'participate' | 'taste';
 }
 
 export default MobileNavigationProps

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

@@ -1,17 +1,22 @@
 import MobileSubNavigationProps from "./MobileSubNavigationProps.tsx";
 import styles from '../mobileNavigation.module.scss'
-import {Container} from "../../../Shared";
+import Container from "../../../../Shared/Container/Container.tsx";
+import {ArrowLeft} from "../../../../Icons";
 
 const MobileSubNavigation = (props : MobileSubNavigationProps) => {
 
   const {
     children,
-    extraClass
+    extraClass,
+    backOnclick
   } = props
 
-  return <div className={`${styles.MobileSubNavigation} ${extraClass} MobileSubNavigation`}>
-    <Container>
-      <ul className={`${styles.MobileSubNavigationWrapper} MobileSubNavigationWrapper`}>
+  return <div className={`${styles.mobileNavigation} ${extraClass} mobileSubNavigation`}>
+    <Container border={false}>
+      <div onClick={backOnclick} className={`${styles.backIcon} backIcon`}>
+        <ArrowLeft/>
+      </div>
+      <ul className={`${styles.mobileNavigationWrapper} mobileSubNavigationWrapper`}>
         {children}
       </ul>
     </Container>

package/src/Components/Layout/Header/MobileNavigation/MobileSubNavigation/MobileSubNavigationItem.tsx

@@ -1,17 +1,16 @@
-import styles from '././mobileNavigation.module.scss'
-import MobileNavigationItemProps from "./MobileNavigationItemProps.tsx";
-import ArrowRight from "../../../Icons/Arrows/ArrowRight/ArrowRight.tsx";
+import styles from '../mobileNavigation.module.scss'
+import MobileNavigationItemProps from "../MobileNavigationItemProps.tsx";
+const MobileSubNavigationItem = (props : MobileNavigationItemProps) => {
 
-const MobileNavigationItem = (props : MobileNavigationItemProps) => {
-
-  const {label} = props
+  const {label, href, target} = props
 
   return <div className={styles.mobileNavItem}>
     <div className={styles.mobileNavItemWrapper}>
-      <h6>{label}</h6>
-      <ArrowRight type={'light'}/>
+      <a href={href} target={target}>
+        {label}
+      </a>
     </div>
   </div>
 }
 
-export default MobileNavigationItem;
+export default MobileSubNavigationItem;

package/src/Components/Layout/Header/MobileNavigation/MobileSubNavigation/MobileSubNavigationItemProps.tsx

@@ -1,5 +1,5 @@
-interface MobileNavigationItemProps {
+interface MobileSubNavigationItemProps {
   label?: string;
 }
 
-export default MobileNavigationItemProps;
+export default MobileSubNavigationItemProps;

package/src/Components/Layout/Header/MobileNavigation/MobileSubNavigation/MobileSubNavigationProps.tsx

@@ -4,6 +4,7 @@ interface MobileSubNavigationProps {
   children?:ReactNode;
   extraClass?:string;
   pillar?: 'visit' | 'live' | 'business' | 'participate' | 'taste'
+  backOnclick?:() => void
 }
 
 export default MobileSubNavigationProps;

package/src/Components/Layout/Header/MobileNavigation/mobileNavigation.module.scss

@@ -8,6 +8,11 @@
   border-radius: 0 0 200px 0;
   overflow-x: hidden;
 
+  .backIcon{
+    color: var(--header-color);
+    padding-top: 24px;
+  }
+
   .mobileNavigationWrapper{
     padding-top: 48px;
     list-style: none;
@@ -21,21 +26,29 @@
     color: var(--header-color);
     transition: all 0.3s ease-in-out;
 
+    .mobileNavItemSvg{
+      display: flex;
+    }
+
     svg {
       margin-left: 16px;
       transition: transform 0.3s ease-in-out;
     }
 
     &:hover {
+      color: var(--color-sand);
+
       svg {
         animation: wiggle 0.6s ease-in-out infinite;
       }
     }
 
-    h6{
+    a{
       font-size: var(--font-size-h6);
       line-height: var(--line-height-h6);
       font-weight: var(--font-weight-h6);
+      color: inherit;
+      text-decoration: none;
     }
 
   }

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

@@ -1,13 +1,17 @@
 .header{
-  background: var(--header-bg);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid var(--color-taste);
 
+  &.active{
+    background: var(--header-bg);
+  }
+
   .headerWrapper{
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     min-height: 60px;
+    width: 100%;
   }
 
   .headerLogo{
@@ -30,11 +34,9 @@
   .headerRightWrapper{
     display: flex;
     align-items: center;
-    margin: 0 -12px;
   }
 
   .headerBottomItemHolder{
-    padding: 0 12px 12px 12px;
     transition: all 0.3s ease-in;
 
     a{
@@ -45,11 +47,14 @@
       font-weight: 400;
       line-height: 1.5;
       cursor: pointer;
+      letter-spacing: -0.96px;
 
       .icon{
         display: flex;
 
         svg{
+          margin-left: 20px;
+          flex-shrink: 0;
           width: 24px;
           height: 24px;
         }
@@ -91,19 +96,6 @@
   }
 
 
-  @media screen and (min-width: 1648px) {
-
-    .headerRightWrapper{
-      display: flex;
-      align-items: center;
-      margin: 0 -28px;
-    }
-
-    .headerBottomItemHolder {
-      padding: 0 28px 30px 28px;
-    }
-  }
-
 
   @media screen and (min-width: 992px) {
 
@@ -120,9 +112,15 @@
       }
 
 
-    .headerBottomItemHolder {
-      padding-bottom:30px ;
-    }
+      .headerRightWrapper{
+        display: flex;
+        align-items: center;
+      }
+
+      .headerBottomItemHolder {
+        padding-bottom: 30px;
+        padding-left: 60px;
+      }
 
   }
 

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

@@ -12,4 +12,12 @@
       padding: 16px;
     }
   }
+}
+
+.mobileSubNavigation{
+  .mobileSubNavigationWrapper{
+    li{
+      padding: 16px;
+    }
+  }
 }