@hellobetterdigitalnz/selwynui 0.0.1-180 → 0.0.1-182

package/package.json

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

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

@@ -90,6 +90,7 @@ const ImageContentMaskedTemplate: Story = {
           level={'primary'}
         >
           <ImageContent
+            alignment={"left"}
             rendition={'masked'}
             pillar={'live'}
             images={{

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

@@ -450,6 +450,39 @@
   }
 
   @media screen and (min-width: 724px){
+
+    &Wrapper{
+      margin: 0 -48px;
+    }
+
+    .imageWrapper{
+      width: 50%;
+      padding: 0 48px;
+      margin-top: 0px;
+    }
+
+
+    .content{
+      width: 50%;
+      padding: 0 48px;
+
+      .desc{
+        margin-top: 72px;
+      }
+    }
+
+    &.left{
+      .imageContentWrapper {
+        flex-direction: row;
+      }
+    }
+
+    &.right{
+      .imageContentWrapper {
+        flex-direction: row-reverse;
+      }
+    }
+
     // full image
     &.imageContentFull{
 
@@ -498,15 +531,15 @@
 
     }
 
-    // full image
+    // fluid image
     &.imageContentFluid{
-
       .imageContentWrapper{
         flex-direction: row-reverse;
       }
 
       .imageWrapper{
         width: 60%;
+        margin-top: 0;
 
         .imageHolder {
           min-width: 60vw;
@@ -520,6 +553,33 @@
       }
     }
 
+    &.maskedImageContent{
+
+      .imageContentWrapper{
+        margin: 0 -44px;
+      }
+
+      .imageWrapper, .content{
+        padding: 0 44px;
+      }
+
+      .imageWrapper{
+        width: 60%;
+      }
+
+      .content{
+        width: 40%;
+        margin-top: 72px;
+
+        .title h4{
+          font-size: 48px;
+          letter-spacing: -1.92px;
+        }
+
+      }
+
+    }
+
   }
 
 
@@ -559,17 +619,6 @@
       }
     }
 
-    &.left{
-      .imageContentWrapper {
-        flex-direction: row;
-      }
-    }
-
-    &.right{
-      .imageContentWrapper {
-        flex-direction: row-reverse;
-      }
-    }
 
     //masked
     &.maskedImageContent{
@@ -682,9 +731,6 @@
 
     //fluild
     &.imageContentFluid {
-      .imageContentWrapper{
-        flex-direction: row-reverse;
-      }
 
       .content{