Added new mobile image position prop with default at center (#1323)

Author: CalebLuster

stories/Components/UIcomponents/Hero/PageHero/PageHeroOption.jsx

@@ -17,9 +17,11 @@ export function PageHeroOption({
   imgalt,
   videosrc,
   cta,
+  mobileImagePosition = 'center',
   ...args
 }) {
   const CtaEnabledClass = args.CTA == 'On' ? 'has-cta' : '';
+  const mobilePositionClass = `mobile-position-${mobileImagePosition}`;
   return (
     <div className={['pagehero-tall', CtaEnabledClass].join(' ')}>
       <div className="grid-x">
@@ -39,7 +41,9 @@ export function PageHeroOption({
             ) : (
               <picture>
                 <source media="(min-width: 767px)" srcSet={imgsrc} />
-                <img src={imgsrc2} alt={imgalt} />
+                <img 
+                className={mobilePositionClass}
+                src={imgsrc2} alt={imgalt} />
               </picture>
             )}
           </div>

stories/Components/UIcomponents/Hero/PageHero/PageHeroOption.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",
   }}
 />
 
@@ -200,6 +206,7 @@ There are two states in the Tall Image Page- Default and Mobile.
           imgalt={caption.imgalt}
           videosrc={caption.videosrc}
           cta={cta}
+          mobileImagePosition={args.MobileImagePosition}
           {...args}
         ></PageHeroOption>
       );

stories/Components/UIcomponents/Hero/PageHero/page-hero.scss

@@ -74,6 +74,26 @@
         margin-bottom: 0;
       }
     }
+
+    .homepage-hero-image {
+      img,
+      video {
+        @extend %img-cover;
+
+        // styles for mobile image positioning
+        &.mobile-position-left {
+          object-position: left;
+        }
+
+        &.mobile-position-center {
+          object-position: center;
+        }
+
+        &.mobile-position-right {
+          object-position: right;
+        }
+      }
+    }
   }
 
   &-content {
@@ -212,6 +232,24 @@
         margin: 2rem 0 1rem;
         display: none;
       }
+
+      img,
+      video {
+        @extend %img-cover;
+
+        // Add styles for mobile image positioning
+        &.mobile-position-left {
+          object-position: left;
+        }
+
+        &.mobile-position-center {
+          object-position: center;
+        }
+
+        &.mobile-position-right {
+          object-position: right;
+        }
+      }
     }
 
     .breadcrumb {