@hellobetterdigitalnz/selwynui 0.0.1-71 → 0.0.1-74

package/src/Components/Form/RadioButtons/radiobutton.module.scss

@@ -24,6 +24,10 @@
     margin-left: calc(var(--space-unit) * 3);
   }
 
+  .radioBtnLabel {
+    margin-left: calc(var(--space-unit) * 3);
+  }
+
   &.error {
     label {
       color: var(--color-error);
@@ -33,7 +37,7 @@
   &.disabled {
     label {
       cursor: not-allowed;
-      color: var(--color-text);
+      color: var(--radio-button-label-text);
     }
   }
 
@@ -49,7 +53,7 @@
 }
 
 .radioBtnBox {
-  border: 1px solid var(--color-text);
+  border: 1px solid var(--radio-button-border);
   flex-direction: row-reverse;
   padding:15px 24px;
   justify-content: space-between;
@@ -105,7 +109,7 @@
     height: 20px;
     border-radius: 100%;
     background-color: #FFFFFF;
-    border: 1px solid var(--color-text);
+    border: 1px solid var(--radio-button-border);
     outline-offset: 2px;
     outline: 2px solid transparent;
     cursor: pointer;
@@ -119,11 +123,11 @@
     
 
     &:focus {
-      outline: 2px solid var(--color-text);
+      outline: 2px solid var(--radio-buttin-outline);
     }
 
     &:hover {
-      border: 2px solid var(--color-text);
+      border: 2px solid var(--radio-button-border);
     }
 
     &:disabled {
@@ -142,7 +146,7 @@
     width: 12px;
     height: 12px;
     border-radius: 100%;
-    background-color: var(--color-text);
+    background-color: var(--radio-button-bg);
     opacity: 0;
     pointer-events: none;
     z-index: 10;
@@ -172,7 +176,7 @@
 
       &:last-child {
         .radioBtnBox {
-          border-bottom: 1px solid var(--color-text);
+          border-bottom: 1px solid var(--radio-button-border);
         }
       }
     }
@@ -183,7 +187,7 @@
   }
 
   .radioBtnBox:has(input[type="radio"]:checked) {
-    border-bottom: 1px solid var(--color-text);
+    border-bottom: 1px solid var(--radio-button-border);
   
   }
 }

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 = {
@@ -65,26 +67,26 @@ const HeaderTemplate: Story = {
         {/*  <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>*/}
+      <MobileSubNavigation>
+        <li>
+          <MobileSubNavigationItem 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>
+      </MobileSubNavigation>
     </Header>
   },
 };

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

@@ -1,17 +1,22 @@
 import MobileSubNavigationProps from "./MobileSubNavigationProps.tsx";
 import styles from '../mobileNavigation.module.scss'
 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`}>
+  return <div className={`${styles.mobileNavigation} ${extraClass} mobileSubNavigation`}>
     <Container border={false}>
-      <ul className={`${styles.MobileSubNavigationWrapper} MobileSubNavigationWrapper`}>
+      <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 ArrowRight from "../../../../Icons/Arrows/ArrowRight/ArrowRight.tsx";
 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.scss

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