@hellobetterdigitalnz/selwynui 0.0.1-51 → 0.0.1-54

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