@hellobetterdigitalnz/selwynui 0.0.1-50 → 0.0.1-53

package/src/Components/DataDisplay/Media/media.module.scss

@@ -0,0 +1,16 @@
+.media {
+  .imgWrapper {
+    position: relative;
+    width: 100%;
+    padding-top: 56.25%;
+
+    img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+}

package/src/Components/DataDisplay/Media/{media.scss → mediaVideo.scss}

@@ -1,10 +1,16 @@
+
+
 .video-container{
   .vjs-big-play-button{
     background: var(--color-block-bg) !important;
+    color: var(--color-block-text);
     height: 114px;
     width: 114px;
     border-radius: 100%;
     border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   .vjs_video_4320-dimensions.vjs-fluid:not(.vjs-audio-only-mode) {

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

@@ -15,7 +15,7 @@ const Footer = (props: FooterProps) => {
         <footer className={`${styles.footer} ${extraClass}`}>
             {footerTop}
             {footerMiddle && <div className={styles.footerMiddle}>
-                <Container>
+                <Container border={false}>
                     <div className={styles.footerMiddleWrapper}>
                         <div className={styles.footerLogoContainer}>
                             <img src={logo} alt="" />

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

@@ -8,13 +8,13 @@ const FooterBottom = (props: FooterBottomProps) => {
     } = props
 
     return (
-        <div className={styles.footerBottom}>
-            <Container>
-                <div className={styles.footerBottomWrapper}>
-                    {children}
-                </div>
-            </Container>
-        </div>
+      <div className={styles.footerBottom}>
+        <Container border={false}>
+          <div className={styles.footerBottomWrapper}>
+              {children}
+          </div>
+          </Container>
+      </div>
     )
 }
 

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

@@ -8,7 +8,7 @@ const FooterTop = (props: FooterTopProps) => {
 
     return (
         <div className={styles.footerTop}>
-            <Container>
+            <Container border={false}>
                 <div className={styles.footerTopWrapper}>
                     <div className={styles.footerTopLeft}>
                         <h1>{title}</h1>

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

@@ -61,9 +61,9 @@ const HeaderTemplate: Story = {
         <HeaderRightItem extraClass={'desktop-item'}>
           <MagnifyingGlass/>
         </HeaderRightItem>
-        <HeaderRightItem extraClass={'mobile-item'}>
-          <List/>
-        </HeaderRightItem>
+        {/*<HeaderRightItem extraClass={'mobile-item'}>*/}
+        {/*  <List/>*/}
+        {/*</HeaderRightItem>*/}
       </HeaderRight>
       {/*<MobileNavigation>*/}
       {/*  <li>*/}

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

@@ -6,7 +6,7 @@ const Header = (props : HeaderProps) => {
   const { children, logoSmall, logo, active } = props
 
   return <header className={`${styles.header} ${active ? styles.active : ''}`}>
-   <Container>
+   <Container border={false}>
      <div className={styles.headerWrapper}>
        <div className={styles.headerLogo}>
          <div className={`${styles.logo} HeaderLogo`}>

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

@@ -37,7 +37,7 @@ const MegaMenu = (props: MegaMenuProps) => {
   return (
     <div className={`${styles.megaMenu} megaMenu ${pillar}`}>
       <div className={`${styles.megaMenuHolder} megaMenuHolder`}>
-        <Container>
+        <Container border={false}>
           <div className={`${styles.megaMenuWrapper} megaMenuWrapper`}>
             {/* LEFT */}
             <div className={`${styles.left} left`}>

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

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

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

@@ -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/header.module.scss

@@ -11,6 +11,7 @@
     align-items: flex-end;
     justify-content: space-between;
     min-height: 60px;
+    width: 100%;
   }
 
   .headerLogo{
@@ -33,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{
@@ -48,6 +47,7 @@
       font-weight: 400;
       line-height: 1.5;
       cursor: pointer;
+      letter-spacing: -0.96px;
 
       .icon{
         display: flex;
@@ -96,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) {
 
@@ -125,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>
@@ -75,7 +75,7 @@ const HeroBanner = (props : HeroBannerProps) => {
         <LargeHeroIcon/>
       </div>
     </div>
-    <Container>
+    <Container border={false}>
       <div className={styles.heroWrapper}>
         <h1>{title} <span>{boldTitle}</span></h1>
         {description && <p>{description}</p>}

package/src/Components/Shared/Container/Container.tsx

@@ -1,19 +1,26 @@
 import styles from "./container.module.scss";
 import ContainerProps from "./ContainerProps.tsx";
 import cslx from "clsx";
-const Container = (props : ContainerProps) =>{
 
-  const {children, type="default"} = props
+const Container = (props: ContainerProps) => {
+  const { children, type = "default", border = true, spaceTop, spaceBottom } = props;
 
   const className = cslx(
     styles.container,
     {
       [styles.default]: type === "default",
-    })
+      [styles.hasBorder]: border,
+      [styles[`space-${spaceTop}`]]: spaceTop,
+      [styles[`space-${spaceBottom}`]]: spaceBottom,
+    }
+  );
 
-  return <div className={className}>
-    {children}
-  </div>;
-}
+  return (
+    <div className={className}>
+      {border && <div className={styles.border}></div>}
+      {children}
+    </div>
+  );
+};
 
-export default Container
+export default Container;

package/src/Components/Shared/Container/ContainerProps.tsx

@@ -1,8 +1,13 @@
 import {ReactNode} from "react";
 
+type SpacingOption = "none" | "xsm" |"sm" | "md" | "lg" | "xl"
+
 interface ContainerProps {
   children?: ReactNode
   type?: "default"
+  border?:boolean;
+  spaceTop?: SpacingOption
+  spaceBottom?: SpacingOption
 }
 
-export default ContainerProps
+export default ContainerProps;

package/src/Components/Shared/Container/container.module.scss

@@ -6,6 +6,28 @@
     max-width: 1520px;
   }
 
+  .border{
+    width: 1px;
+    background: var(--color-block-text);
+    //height: 100%;
+    margin-right: 32px;
+    flex-shrink: 0;
+    margin-top: -150px;
+    margin-bottom: -150px;
+    display: none;
+  }
+
+  &.hasBorder{
+    display: flex;
+  }
+
+  @media screen and (min-width: 992px) {
+    .border{
+     display: block;
+    }
+  }
+
+
    @media screen and (min-width: 1748px) {
        padding: 0px 16px 0 16px;
    }

package/src/Components/Shared/ElementHolder/elementHolder.module.scss

@@ -2,7 +2,7 @@
     background-color: var(--color-block-bg);
     color: var(--color-block-text);
     position: relative;
-    overflow-x: hidden;
+    overflow: hidden;
     
     &Inner {
         //position: relative;
@@ -15,19 +15,23 @@
     }
 
     &--pt-xsm {
-        padding-top: 72px;
+        padding-top: 40px;
     }
 
     &--pt-sm {
-        padding-top: 90px;
+        padding-top: 48px;
     }
 
     &--pt-md {
-        padding-top: 120px;
+        padding-top: 90px;
     }
 
     &--pt-lg {
-        padding-top: 144px;
+        padding-top: 120px;
+    }
+
+    &--pt-xl {
+      padding-bottom: 144px;
     }
 
     // Padding Bottom