@hellobetterdigitalnz/selwynui 0.0.1-3 → 0.0.1-4

package/package.json

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

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

@@ -3,6 +3,7 @@ import React from "react"
 import { Meta, StoryObj } from "@storybook/react-vite";
 import ImageContent from "./ImageContent";
 import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
+import Button from "../../Form/Button/Button";
 
 
 const meta: Meta = {
@@ -29,7 +30,13 @@ const ImageContentTemplate: Story = {
          pillar={'live'}
          level={'light'}
        >
-         <ImageContent/>
+         <ImageContent
+           title={'Lorem'}
+           boldTitle={'ipsum dolor'}
+           content={'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat'}
+           action={<Button style={'solid'} pillar={'live'} label={'LOREM IPSUM'}/>}
+           alignment={'left'}
+         />
        </ElementHolder>
       </>
     )
@@ -59,6 +66,11 @@ const ImageContentMaskedTemplate: Story = {
                 'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg',
               ],
             }}
+            title={'Lorem'}
+            boldTitle={'ipsum dolor'}
+            displayFullLogo={false}
+            content={'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat'}
+            action={<Button style={'solid'} pillar={'taste'} level={"secondary"} label={'LOREM IPSUM'}/>}
           />
         </ElementHolder>
       </>
@@ -100,6 +112,8 @@ const ImageContentFullTemplate: Story = {
               }
             ]}
             imageBorder={'top'}
+            alignment={'left'}
+            imageSrc={'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg'}
           />
         </ElementHolder>
         <ElementHolder
@@ -130,6 +144,7 @@ const ImageContentFullTemplate: Story = {
                 label:'What are you doing'
               }
             ]}
+            imageSrc={'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg'}
           />
         </ElementHolder>
       </>

package/src/Components/DataDisplay/ImageContent/ImageContent.tsx

@@ -37,7 +37,14 @@ const ImageContent = (props:  ImageContentProps) => {
             <div className={styles.contentWrapper}>
               <div className={styles.pillarlogo}>
                 <PillarLogo brandPillar={pillar} brandFullLogo={displayFullLogo}/>
-                {<p>Pillar Title</p>}
+                {!displayFullLogo && <p>
+                  {pillar === "main" && "Visit"}
+                  {pillar === "live" && "Live"}
+                  {pillar === "visit" && "Vist"}
+                  {pillar === "taste" && "Taste"}
+                  {pillar === "business" && "Business"}
+                  {pillar === "participate" && "Participate"}
+                </p>}
               </div>
               <div className={styles.title}>
                 <h3>
@@ -88,8 +95,16 @@ const ImageContent = (props:  ImageContentProps) => {
             {/* CONTENT */}
             <div className={styles.content}>
               <div className={styles.contentWrapper}>
-                <div className={styles.pillarlogo}>
+                <div className={`${styles.pillarlogo} ${!displayFullLogo ? styles.pillarlogoFull : ''}`}>
                   <PillarLogo brandPillar={pillar} brandFullLogo={displayFullLogo}/>
+                  {!displayFullLogo && <p>
+                    {pillar === "main" && "Visit"}
+                    {pillar === "live" && "Live"}
+                    {pillar === "visit" && "Vist"}
+                    {pillar === "taste" && "Taste"}
+                    {pillar === "business" && "Business"}
+                    {pillar === "participate" && "Participate"}
+                  </p>}
                 </div>
                 <div className={styles.title}>
                   <h4>{title}</h4>
@@ -134,7 +149,7 @@ const ImageContent = (props:  ImageContentProps) => {
                 <p>{content}</p>
             </div>}
             {action && <div className={styles.action}>
-                <button>LOREM IPSUM</button>
+              {action}
             </div>}
           </div>
         </div>

package/src/Components/DataDisplay/ImageContent/imageContent.module.scss

@@ -100,8 +100,24 @@
   &.maskedImageContent{
 
     .pillarlogo{
+      display: flex;
       margin-bottom: 48px;
+      align-items: center;
 
+      p{
+        margin-left: 16px;
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 140%;
+      }
+
+      &.pillarlogoFull{
+        svg{
+          width: 32px;
+          height: 32px;
+        }
+      }
       svg{
         width: 160px;
         height: 54px;
@@ -200,7 +216,7 @@
       }
 
       .content{
-        padding-left: 198px;
+        padding-left: 0;
         padding-right: 0;
       }
 
@@ -336,6 +352,24 @@
       .pillarlogo{
         margin-bottom: 48px;
       }
+
+      &.left{
+
+        .imageHolder {
+          height: 100%;
+          position: absolute;
+          width: calc(50vw + 10px);
+          right: 0;
+          left: unset;
+        }
+
+        .content{
+          padding-left: 198px;
+          padding-right: 0;
+        }
+
+      }
+
     }
 
   }

package/src/Components/Form/Button/button.module.scss

@@ -1,4 +1,3 @@
-@use "../../../variable.scss" as *;
 
 .button {
   position: relative;

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

@@ -69,8 +69,8 @@
         display: flex;
         flex-direction: column;
         justify-content: center;
-        width: 50%;
-        padding:120px 0;
+        width: 100%;
+        padding: 72px 0 32px 0;
         color: var(--color-text);
 
         h1{
@@ -89,28 +89,26 @@
          font-size: 24px;
          line-height: 1.3;
          font-weight: 400;
-         margin-top: 90px;
+         margin-top: 72px;
          max-width: 604px;
        }
 
       }
 
       .heroImg{
-        position: absolute;
-        right: 0;
-        width: 50%;
-        height: 100%;
         border-radius: 500px 0 0 0;
         overflow: hidden;
+        width: calc(100% + 28px);
+        margin-left: -14px;
+        margin-right: -14px;
 
         img{
-          width: 100%;
           height: 100%;
+          width: 100%;
           object-fit: cover;
           object-position: center;
+          min-height: 360px;
         }
-
-
       }
 
 
@@ -129,7 +127,7 @@
         display: flex;
         flex-direction: column;
         justify-content: center;
-        width: 50%;
+        width: 100%;
         color: var(--color-text);
         padding:  100px 0;
 
@@ -156,12 +154,11 @@
       }
 
       .heroImg{
-        position: absolute;
-        right: 0;
-        width: 50%;
-        height: 100%;
         border-radius: 500px 0 0 0;
         overflow: hidden;
+        width: calc(100% + 28px);
+        margin-left: -14px;
+        margin-right: -14px;
 
         img{
           width: 100%;
@@ -176,4 +173,46 @@
     }
   }
 
+  @media screen and (min-width: 992px) {
+
+    &Medium{
+      .heroWrapper{
+
+        .content {
+          width: 50%;
+          padding: 120px 0;
+
+          p{
+            margin-top: 90px;
+          }
+
+        }
+
+        .heroImg{
+          margin-right: calc((100vw - 100%) / -1);
+          width: 50vw;
+          margin-left: 0;
+        }
+
+      }
+    }
+
+    &Small{
+      .heroWrapper {
+
+        .content{
+          width: 50%;
+          padding: 10px 0;
+        }
+
+        .heroImg {
+          margin-right: calc((100vw - 100%) / -1);
+          width: 50vw;
+          margin-left: 0;
+        }
+      }
+    }
+
+  }
+
 }