@hellobetterdigitalnz/selwynui 0.0.1-70 → 0.0.1-72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hellobetterdigitalnz/selwynui",
-  "version": "0.0.1-70",
+  "version": "0.0.1-72",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

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

@@ -49,22 +49,22 @@ export const Default: Story = {
           {
             icon: <Path type={'fill'}/>,
             label: 'Distance from Christchurch Airport',
-            value: '91 km, approximately 1.25 hours',
+            value: <p>91 km, approximately 1.25 hours</p>,
           },
           {
             icon: <Mountains type={'fill'}/>,
             label: 'Elevations',
-            value: 'Top 1980m / Base 1302m',
+            value: <p>Top 1980m / Base 1302m</p>,
           },
           {
             icon: <MapPin type={'fill'}/>,
             label: 'Address',
-            value: 'State Highway 73, Selwyn, New Zealand',
+            value: <p>State Highway 73,<br/> Selwyn, New Zealand</p>,
           },
           {
             icon: <Clock type={'fill'}/>,
             label: 'Hours',
-            value: '9am–4pm, daily during winter',
+            value: <p>9am–4pm, daily during winter</p>,
           },
           {
             icon: <DeviceMobile type={'fill'}/>,

package/src/Components/DataDisplay/ListingDetailBlock/ListingDetailBlockProps.tsx

@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 export interface CallToActionItem {
   icon: ReactNode | string;
   label: string;
-  value: string;
+  value: ReactNode;
   url?: string;
   target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
   valueClassName?: 'link' | 'default';

package/src/Components/DataDisplay/ListingDetailBlock/listingDetailBlock.module.scss

@@ -1,26 +1,27 @@
 .listingDetail {
     display: flex;
-    gap: 48px;
-    padding: 32px;
+    // gap: 48px;
+    // padding: 32px;
     border-radius: 8px;
     position: relative;
-
-    &::before {
-        content: '';
-        position: absolute;
-        left: 51%;
-        top: 32px;
-        bottom: 32px;
-        width: 1px;
-        background: var(--color-bg);
-        transform: translateX(-50%);
-        z-index: 1;
-        pointer-events: none;
-
-        @media (max-width: 900px) {
-            display: none;
-        }
-    }
+    
+
+    // &::before {
+    //     content: '';
+    //     position: absolute;
+    //     left: 51%;
+    //     top: 32px;
+    //     bottom: 32px;
+    //     width: 1px;
+    //     background: var(--color-bg);
+    //     transform: translateX(-50%);
+    //     z-index: 1;
+    //     pointer-events: none;
+
+    //     @media (max-width: 900px) {
+    //         display: none;
+    //     }
+    // }
 
     @media (max-width: 900px) {
         flex-direction: column-reverse;
@@ -31,11 +32,24 @@
 
 .mainContent {
     width: 50%;
-    padding-right: 20px;
+    padding-right: 72px;
+    border-right: 1px solid var(--color-bg);
+
+    p {
+        font-size: var(--font-size-h6);
+        letter-spacing: var(--letter-spacing-h6);
+        line-height: 1.3;
+    }
+
+    .sectioncontent {
+        margin-bottom: 32px;
+        font-size: var(--font-size-h6);
+        letter-spacing: var(--letter-spacing-h6);
+    }
 
     @media (max-width: 1200px) {
-        padding-left: 80px;
-        padding-right: 40px;
+        // padding-left: 80px;
+        // padding-right: 40px;
     }
 
     @media (max-width: 900px) {
@@ -43,6 +57,7 @@
         padding-left: 0;
         padding-right: 0;
         order: 2;
+        border-right: 0;
     }
 
     .title {
@@ -105,7 +120,6 @@
     margin: 0;
     display: grid;
     grid-template-columns: repeat(2, 2fr);
-    gap: 9px;
 
     @media (max-width: 600px) {
         grid-template-columns: 1fr;
@@ -119,7 +133,7 @@
     font-size: 18px;
     font-weight: 400;
     line-height: 1.4;
-    gap: 12px;
+    margin-bottom: 8px;
 
     @media (max-width: 900px) {
         font-size: 16px;
@@ -130,6 +144,7 @@
         width: 32px;
         color: var(--color-bg);
         flex-shrink: 0;
+        margin-right: 12px;
 
         @media (max-width: 900px) {
             height: 24px;
@@ -142,33 +157,34 @@
     width: 50%;
     display: flex;
     flex-direction: column;
-    gap: 60px;
-    padding-left: 64px;
+    // gap: 60px;
+    padding-left: 72px;
 
     @media (max-width: 1200px) {
-        padding-left: 40px;
-        gap: 48px;
+        // padding-left: 40px;
+        // gap: 48px;
     }
 
     @media (max-width: 900px) {
         width: 100%;
         padding-left: 0;
-        gap: 40px;
+        // gap: 40px;
         order: 1;
     }
 
     @media (max-width: 480px) {
-        gap: 32px;
+        // gap: 32px;
     }
 }
 
 .infoItem {
     display: flex;
-    gap: 16px;
+    // gap: 16px;
+    margin-bottom: 72px;
     align-items: center;
 
     @media (max-width: 900px) {
-        gap: 12px;
+        margin-bottom: 36px;
     }
 
     svg {
@@ -176,6 +192,7 @@
         width: 48px;
         height: 48px;
         flex-shrink: 0;
+        margin-right: 16px;
 
         @media (max-width: 900px) {
             width: 40px;
@@ -196,8 +213,9 @@
 .infoLabel {
     font-size: 24px;
     letter-spacing: -0.48px;
-    line-height: 1.3;
+    line-height: 1;
     font-weight: 700;
+    margin-bottom: 8px;
 
     @media (max-width: 900px) {
         font-size: 18px;
@@ -243,6 +261,5 @@
 }
 
 .button {
-    margin-top: 5px;
     max-width: 177px !important;
 }

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

@@ -25,7 +25,7 @@ const TestimonyCardTemplate: Story = {
         <TestimonyCard
           testimonies={[
             {
-              image: 'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg',
+              image: '',
               testimony: 'Living in Selwyn is like waking up in a dream every single day. The community is not only vibrant but also filled with friendly faces and engaging activities that bring everyone together.\n\nThe sunsets here are truly breathtaking, painting the sky in hues of orange, pink, and purple, creating a picturesque backdrop that makes every evening feel special!',
               author: 'Liam & Emma'
             },

package/src/Components/DataDisplay/TestimonyCard/TestimonyCard.tsx

@@ -38,12 +38,8 @@ const TestimonyCard = (props: TestimonyCardProps) => {
               <div key={index}>
                 <div className={styles.testimonySlide}>
                   <div className={styles.testimonyCardLeft}>
-                    <img
-                      src={testimony.image}
-                      alt={`${testimony.author} testimonial`}
-                    />
+                  {testimony.image && <img src={testimony.image} alt={`${testimony.author} testimonial`}/>}
                   </div>
-
                   <div className={styles.testimonyCardRight}>
                     <div className={styles.testimonyContent}>
                       <div className={styles.quoteIcon}>

package/src/Components/DataDisplay/TestimonyCard/testimonyCard.module.scss

@@ -18,6 +18,8 @@
     overflow: clip;
     width: 100%;
     margin: 0 -16px 0 -16px;
+    background-color: rgba(213, 213, 213, 0.56);
+    border-radius: 2px 2px 96px 2px;
 
     img {
       flex-shrink: 0;

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

@@ -65,26 +65,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>*/}
+      <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/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/MobileSubNavigationItem.tsx

@@ -4,12 +4,16 @@ import MobileNavigationItemProps from "../MobileNavigationItemProps.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/mobileNavigation.module.scss

@@ -21,21 +21,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;
     }
 
   }