Merge branch 'develop' into issue-1299-create-new-switch-component

undp · Jul 5, 2024 · 5773b44 · 5773b44
2 parents 1aec93c + 2e0a2aa
commit 5773b44
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 12 deletions.
diff --git a/stories/Components/UIcomponents/Hero/PageHero/PageHero.jsx b/stories/Components/UIcomponents/Hero/PageHero/PageHero.jsx
@@ -18,6 +18,7 @@ export function PageHero({
   imgsrc,
   imgalt,
   cta,
+  mobileImagePosition = 'center',
   ...args
 }) {
   useEffect(() => {
@@ -26,7 +27,7 @@ export function PageHero({
 
   const textColor = variant === 'No background' ? 'Black' : 'White';
   const textColorClass = variant === 'No background' ? 'color-black' : 'color-white';
-
+  const mobilePositionClass = `mobile-position-${mobileImagePosition}`;
   return (
     <div className="pagehero-full">
       {variant === 'Video' ? (
@@ -35,7 +36,7 @@ export function PageHero({
         <>
           {variant !== 'No background' && imgsrc && (
             <div className="overlay-grey">
-              <img src={imgsrc} alt={imgalt} />
+              <img className={mobilePositionClass} src={imgsrc} alt={imgalt} />
             </div>
           )}
         </>

diff --git a/stories/Components/UIcomponents/Hero/PageHero/PageHero.stories.mdx b/stories/Components/UIcomponents/Hero/PageHero/PageHero.stories.mdx
@@ -141,12 +141,18 @@ export const getCaptionForLocale = (locale) => {
       options: ["On", "Off"],
       control: { type: "inline-radio" },
     },
+      MobileImagePosition: {
+      name: "Mobile Image Position",
+      options: ["left", "center", "right"],
+      control: { type: "inline-radio" },
+    },
   }}
   args={{
     Variant: "Image",
     CTA: "Off",
     Overline: "Off",
     Subtitle: "Off",
+    MobileImagePosition: "center",
   }}
 />
 
@@ -203,6 +209,7 @@ There are two states in the Full-width Page- Default and Mobile.
           imgsrc={caption.imgsrc}
           imgalt={caption.imgalt}
           cta={cta}
+          mobileImagePosition={args.MobileImagePosition}
           {...args}
         ></PageHero>
       );

diff --git a/stories/Components/UIcomponents/Hero/PageHero/PageHeroOption.jsx b/stories/Components/UIcomponents/Hero/PageHero/PageHeroOption.jsx
@@ -39,7 +39,8 @@ export function PageHeroOption({
             ) : (
               <picture>
                 <source media="(min-width: 767px)" srcSet={imgsrc} />
-                <img src={imgsrc2} alt={imgalt} />
+                <img 
+                src={imgsrc2} alt={imgalt} />
               </picture>
             )}
           </div>

diff --git a/stories/Components/UIcomponents/Hero/PageHero/page-hero.scss b/stories/Components/UIcomponents/Hero/PageHero/page-hero.scss
@@ -74,6 +74,24 @@
         margin-bottom: 0;
       }
     }
+
+      img {
+        @include devicebreak(small) {
+          @extend %img-cover;
+
+          &.mobile-position-left {
+            object-position: left;
+          }
+
+          &.mobile-position-center {
+            object-position: center;
+          }
+
+          &.mobile-position-right {
+            object-position: right;
+          }
+        }
+      }
   }
 
   &-content {
@@ -143,15 +161,6 @@
     @include devicebreak(medium) {
       height: 100%;
     }
-
-    img,
-    video {
-      @extend %img-cover;
-
-      @include devicebreak(small) {
-        position: absolute;
-      }
-    }
   }
 
   &-tall {