@hellobetterdigitalnz/selwynui 0.0.1-7 → 0.0.1-71

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/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,6 +1,6 @@
 import MobileSubNavigationProps from "./MobileSubNavigationProps.tsx";
 import styles from '../mobileNavigation.module.scss'
-import {Container} from "../../../Shared";
+import Container from "../../../../Shared/Container/Container.tsx";
 
 const MobileSubNavigation = (props : MobileSubNavigationProps) => {
 
@@ -10,7 +10,7 @@ const MobileSubNavigation = (props : MobileSubNavigationProps) => {
   } = props
 
   return <div className={`${styles.MobileSubNavigation} ${extraClass} MobileSubNavigation`}>
-    <Container>
+    <Container border={false}>
       <ul className={`${styles.MobileSubNavigationWrapper} MobileSubNavigationWrapper`}>
         {children}
       </ul>

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

@@ -1,6 +1,6 @@
-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 ArrowRight from "../../../../Icons/Arrows/ArrowRight/ArrowRight.tsx";
+import MobileNavigationItemProps from "../MobileNavigationItemProps.tsx";
 
 const MobileNavigationItem = (props : MobileNavigationItemProps) => {
 

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/HeroBanner/HeroBanner.tsx

@@ -16,7 +16,7 @@ const HeroBanner = (props : HeroBannerProps) => {
     ${pillar ? `${pillar}` : ""}
     `}
     >
-      <Container>
+      <Container border={false}>
         <div className={styles.heroWrapper}>
           <div className={styles.content}>
             <h1>{title} <span>{boldTitle}</span></h1>
@@ -43,7 +43,7 @@ const HeroBanner = (props : HeroBannerProps) => {
     ${pillar ? `${pillar}` : ""}
     `}
     >
-      <Container>
+      <Container border={false}>
         <div className={styles.heroWrapper}>
           <div className={styles.content}>
             <h1>{title} <span>{boldTitle}</span></h1>
@@ -71,16 +71,16 @@ const HeroBanner = (props : HeroBannerProps) => {
   >
     <div className={styles.heroImg}>
       <img src={backgroundImg} alt="hero banner" />
+      <div className={styles.heroSvg}>
+        <LargeHeroIcon/>
+      </div>
     </div>
-    <Container>
+    <Container border={false}>
       <div className={styles.heroWrapper}>
         <h1>{title} <span>{boldTitle}</span></h1>
         {description && <p>{description}</p>}
       </div>
     </Container>
-    <div className={styles.heroSvg}>
-      <LargeHeroIcon/>
-    </div>
   </div>
 }
 

package/src/Components/Layout/HeroBanner/heroBanner.module.scss

@@ -3,7 +3,8 @@
 
   &Large{
     position: relative;
-    min-height: 90vh;
+    min-height: 494px;
+    overflow-x: hidden;
 
     .heroImg{
       position: absolute;
@@ -11,7 +12,7 @@
       right: 0;
       top: 0;
       bottom: 0;
-      border-radius: 0 0 366px 0;
+      border-radius: 0 0 76.25px 0;
       overflow: hidden;
       background: linear-gradient(180deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.00) 41.35%), linear-gradient(0deg, rgba(124, 132, 123, 0.05) 0%, rgba(124, 132, 123, 0.05) 100%), #000;
 
@@ -29,15 +30,15 @@
       z-index: 10;
       width: 100%;
       height: 100%;
-      padding-top: 112px;
+      padding-top: 104px;
       color: var(--color-text);
 
       h1{
         max-width: 898px;
-        font-size: var(--font-size-h1);
+        font-size: 44px;
         line-height: 1;
         font-weight: 400;
-        letter-spacing: -7.68px;
+        letter-spacing: -1.76px;
 
         span{
           font-weight: 700;
@@ -52,7 +53,7 @@
       z-index: 5;
       left: 0;
       bottom: 0;
-      height: 340px;
+      height: 165px;
     }
 
   }
@@ -136,6 +137,8 @@
 
   &Small{
     position: relative;
+    min-height: 600px;
+    overflow-x: hidden;
 
     .heroWrapper{
       display: flex;
@@ -210,6 +213,28 @@
 
   @media screen and (min-width: 992px) {
 
+    &Large{
+      min-height: 100vh;
+
+      .heroImg{
+        border-radius: 0 0 366px 0;
+      }
+
+      .heroWrapper{
+        h1{
+          font-size: var(--font-size-h1);
+          letter-spacing: -1.68px;
+        }
+
+        padding-top: 207px;
+      }
+
+      .heroSvg{
+        height: 340px;
+      }
+
+    }
+
     &Medium{
       .heroWrapper{
 
@@ -250,4 +275,15 @@
 
   }
 
+  @media screen and (min-width: 1400px) {
+    &Large{
+      .heroWrapper{
+        h1{
+          letter-spacing: -7.68px;
+        }
+
+      }
+    }
+  }
+
 }

package/src/Components/Layout/index.ts

@@ -27,5 +27,14 @@ export { default as HeroBanner } from './HeroBanner/HeroBanner';
 export type { default as HeroBannerProps } from './HeroBanner/HeroBannerProps';
 
 // Megamenu
-export { default as MegaMenu} from './Header/MegaMenu/MegaMenu.tsx'
-export type { default as MegaMenuProps } from './Header/MegaMenu/MegaMenuProps.tsx'
+export { default as MegaMenu} from './Header/MegaMenu/MegaMenu'
+export type { default as MegaMenuProps } from './Header/MegaMenu/MegaMenuProps'
+
+//MobileNavigation
+export { default as MobileNavigation } from './Header/MobileNavigation/MobileNavigation'
+export { default as MobileNavigationItem} from './Header/MobileNavigation/MobileNavigationItem'
+
+
+//MobileNavigation
+export { default as MobileSubNavigation } from './Header/MobileNavigation/MobileSubNavigation/MobileSubNavigation'
+export { default as MobileSubNavigationItem } from './Header/MobileNavigation/MobileSubNavigation/MobileSubNavigationItem'

package/src/Components/SelwynUIProvider/SelwynUIContext.tsx

@@ -0,0 +1,16 @@
+import { createContext, ReactNode } from "react";
+interface SkopeUIContextType {
+  modalStack: ReactNode[];
+  openModal: (modal: React.ReactNode) => void;
+  closeModal: () => void;
+  closeAllModals: () => void;
+}
+
+const SelwynUIContext = createContext<SkopeUIContextType>({
+  modalStack: [],
+  openModal: () => {},
+  closeModal: () => {},
+  closeAllModals: () => {},
+});
+
+export default SelwynUIContext;