From 852af5884c5aa17a8371c9a87a7cb17af8a5fd05 Mon Sep 17 00:00:00 2001
From: Caleb Luster <cwl117@outlook.com>
Date: Mon, 1 Jul 2024 13:37:49 -0500
Subject: [PATCH 1/4] Added new mobile image position prop with default at
 center (#1323)

---
 .../Hero/PageHero/PageHeroOption.jsx          |  6 ++-
 .../Hero/PageHero/PageHeroOption.stories.mdx  |  7 ++++
 .../UIcomponents/Hero/PageHero/page-hero.scss | 38 +++++++++++++++++++
 3 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/stories/Components/UIcomponents/Hero/PageHero/PageHeroOption.jsx b/stories/Components/UIcomponents/Hero/PageHero/PageHeroOption.jsx
index 0debeac74..dae02d245 100644
--- a/stories/Components/UIcomponents/Hero/PageHero/PageHeroOption.jsx
+++ b/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>
diff --git a/stories/Components/UIcomponents/Hero/PageHero/PageHeroOption.stories.mdx b/stories/Components/UIcomponents/Hero/PageHero/PageHeroOption.stories.mdx
index e1a107d7c..4c20bd9b6 100644
--- a/stories/Components/UIcomponents/Hero/PageHero/PageHeroOption.stories.mdx
+++ b/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>
       );
diff --git a/stories/Components/UIcomponents/Hero/PageHero/page-hero.scss b/stories/Components/UIcomponents/Hero/PageHero/page-hero.scss
index 0fa79d7c0..0f1b2f728 100644
--- a/stories/Components/UIcomponents/Hero/PageHero/page-hero.scss
+++ b/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 {

From 539e41fa246c1d6923ff4014a9b451f942ccb392 Mon Sep 17 00:00:00 2001
From: Caleb Luster <cwl117@outlook.com>
Date: Mon, 1 Jul 2024 14:21:04 -0500
Subject: [PATCH 2/4] Fixed controls only showing up for hero tall image and
 not hero full-width

---
 .../UIcomponents/Hero/PageHero/PageHero.jsx   |  7 +++---
 .../Hero/PageHero/PageHero.stories.mdx        |  7 ++++++
 .../UIcomponents/Hero/PageHero/page-hero.scss | 25 +++++++++++++------
 3 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/stories/Components/UIcomponents/Hero/PageHero/PageHero.jsx b/stories/Components/UIcomponents/Hero/PageHero/PageHero.jsx
index ec5d3b1a3..65174271d 100644
--- 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,14 +36,14 @@ export function PageHero({
         <>
           {variant !== 'No background' && imgsrc && (
             <div className="overlay-grey">
-              <img src={imgsrc} alt={imgalt} />
+              <img className={mobilePositionClass} src={imgsrc} alt={imgalt} />
             </div>
           )}
         </>
       )}
       <Breadcrumbcomponent data={data} Color={textColor} />
       <div className="pagehero-content medium-offset-1">
-        <div className={['content-box', textColorClass].join(' ')}>
+        <div className={['content-box', textColorClass, ].join(' ')}>
           {args.Overline == 'On' && content && <Heading type="4" label={content} dataViewport="true" />}
           {title && <Heading type="2" label={title} dataViewport="true" />}
           {args.Subtitle == 'On' && subtitle && <p className="subtitle">{subtitle}</p>}
diff --git a/stories/Components/UIcomponents/Hero/PageHero/PageHero.stories.mdx b/stories/Components/UIcomponents/Hero/PageHero/PageHero.stories.mdx
index 4bd20ad58..bbba2cfd0 100644
--- 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/page-hero.scss b/stories/Components/UIcomponents/Hero/PageHero/page-hero.scss
index 0f1b2f728..18d0d6b3b 100644
--- a/stories/Components/UIcomponents/Hero/PageHero/page-hero.scss
+++ b/stories/Components/UIcomponents/Hero/PageHero/page-hero.scss
@@ -75,25 +75,21 @@
       }
     }
 
-    .homepage-hero-image {
-      img,
-      video {
+      img {
         @extend %img-cover;
 
-        // styles for mobile image positioning
         &.mobile-position-left {
-          object-position: left;
+          object-position: left 100px;
         }
-
+  
         &.mobile-position-center {
           object-position: center;
         }
-
+  
         &.mobile-position-right {
           object-position: right;
         }
       }
-    }
   }
 
   &-content {
@@ -171,6 +167,19 @@
       @include devicebreak(small) {
         position: absolute;
       }
+
+      // styles for mobile image positioning
+      &.mobile-position-left {
+        object-position: left 100px;
+      }
+
+      &.mobile-position-center {
+        object-position: center;
+      }
+
+      &.mobile-position-right {
+        object-position: right;
+      }
     }
   }
 

From b772a78f75e6f3715979a911154b68a1d0babeee Mon Sep 17 00:00:00 2001
From: Caleb Luster <cwl117@outlook.com>
Date: Mon, 1 Jul 2024 15:00:31 -0500
Subject: [PATCH 3/4] added breakpoint so it is only applied to mobile devices

---
 .../UIcomponents/Hero/PageHero/PageHero.jsx   |  2 +-
 .../UIcomponents/Hero/PageHero/page-hero.scss | 52 ++++++++++---------
 2 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/stories/Components/UIcomponents/Hero/PageHero/PageHero.jsx b/stories/Components/UIcomponents/Hero/PageHero/PageHero.jsx
index 65174271d..2ca91330d 100644
--- a/stories/Components/UIcomponents/Hero/PageHero/PageHero.jsx
+++ b/stories/Components/UIcomponents/Hero/PageHero/PageHero.jsx
@@ -43,7 +43,7 @@ export function PageHero({
       )}
       <Breadcrumbcomponent data={data} Color={textColor} />
       <div className="pagehero-content medium-offset-1">
-        <div className={['content-box', textColorClass, ].join(' ')}>
+        <div className={['content-box', textColorClass].join(' ')}>
           {args.Overline == 'On' && content && <Heading type="4" label={content} dataViewport="true" />}
           {title && <Heading type="2" label={title} dataViewport="true" />}
           {args.Subtitle == 'On' && subtitle && <p className="subtitle">{subtitle}</p>}
diff --git a/stories/Components/UIcomponents/Hero/PageHero/page-hero.scss b/stories/Components/UIcomponents/Hero/PageHero/page-hero.scss
index 18d0d6b3b..205d07eb7 100644
--- a/stories/Components/UIcomponents/Hero/PageHero/page-hero.scss
+++ b/stories/Components/UIcomponents/Hero/PageHero/page-hero.scss
@@ -76,18 +76,20 @@
     }
 
       img {
-        @extend %img-cover;
-
-        &.mobile-position-left {
-          object-position: left 100px;
-        }
-  
-        &.mobile-position-center {
-          object-position: center;
-        }
-  
-        &.mobile-position-right {
-          object-position: right;
+        @include devicebreak(small) {
+          @extend %img-cover;
+
+          &.mobile-position-left {
+            object-position: left;
+          }
+    
+          &.mobile-position-center {
+            object-position: center;
+          }
+    
+          &.mobile-position-right {
+            object-position: right;
+          }
         }
       }
   }
@@ -170,7 +172,7 @@
 
       // styles for mobile image positioning
       &.mobile-position-left {
-        object-position: left 100px;
+        object-position: left;
       }
 
       &.mobile-position-center {
@@ -242,21 +244,21 @@
         display: none;
       }
 
-      img,
-      video {
-        @extend %img-cover;
+      img {
+        @include devicebreak(small) {
 
-        // Add styles for mobile image positioning
-        &.mobile-position-left {
-          object-position: left;
-        }
+          // Add styles for mobile image positioning
+          &.mobile-position-left {
+            object-position: left;
+          }
 
-        &.mobile-position-center {
-          object-position: center;
-        }
+          &.mobile-position-center {
+            object-position: center;
+          }
 
-        &.mobile-position-right {
-          object-position: right;
+          &.mobile-position-right {
+            object-position: right;
+          }
         }
       }
     }

From ca09cec05e9d213fcad8cf84bf6b9fff6cef4e06 Mon Sep 17 00:00:00 2001
From: Caleb Luster <cwl117@outlook.com>
Date: Mon, 1 Jul 2024 15:15:06 -0500
Subject: [PATCH 4/4] removed mobileImagePosition properity from Tall Image
 along with corresponding styles and stories controls

---
 .../Hero/PageHero/PageHeroOption.jsx          |  3 --
 .../Hero/PageHero/PageHeroOption.stories.mdx  |  7 ----
 .../UIcomponents/Hero/PageHero/page-hero.scss | 40 -------------------
 3 files changed, 50 deletions(-)

diff --git a/stories/Components/UIcomponents/Hero/PageHero/PageHeroOption.jsx b/stories/Components/UIcomponents/Hero/PageHero/PageHeroOption.jsx
index dae02d245..c25a02925 100644
--- a/stories/Components/UIcomponents/Hero/PageHero/PageHeroOption.jsx
+++ b/stories/Components/UIcomponents/Hero/PageHero/PageHeroOption.jsx
@@ -17,11 +17,9 @@ 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">
@@ -42,7 +40,6 @@ export function PageHeroOption({
               <picture>
                 <source media="(min-width: 767px)" srcSet={imgsrc} />
                 <img 
-                className={mobilePositionClass}
                 src={imgsrc2} alt={imgalt} />
               </picture>
             )}
diff --git a/stories/Components/UIcomponents/Hero/PageHero/PageHeroOption.stories.mdx b/stories/Components/UIcomponents/Hero/PageHero/PageHeroOption.stories.mdx
index 4c20bd9b6..e1a107d7c 100644
--- a/stories/Components/UIcomponents/Hero/PageHero/PageHeroOption.stories.mdx
+++ b/stories/Components/UIcomponents/Hero/PageHero/PageHeroOption.stories.mdx
@@ -141,18 +141,12 @@ 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",
   }}
 />
 
@@ -206,7 +200,6 @@ 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>
       );
diff --git a/stories/Components/UIcomponents/Hero/PageHero/page-hero.scss b/stories/Components/UIcomponents/Hero/PageHero/page-hero.scss
index 205d07eb7..01e96f84c 100644
--- a/stories/Components/UIcomponents/Hero/PageHero/page-hero.scss
+++ b/stories/Components/UIcomponents/Hero/PageHero/page-hero.scss
@@ -161,28 +161,6 @@
     @include devicebreak(medium) {
       height: 100%;
     }
-
-    img,
-    video {
-      @extend %img-cover;
-
-      @include devicebreak(small) {
-        position: absolute;
-      }
-
-      // styles for mobile image positioning
-      &.mobile-position-left {
-        object-position: left;
-      }
-
-      &.mobile-position-center {
-        object-position: center;
-      }
-
-      &.mobile-position-right {
-        object-position: right;
-      }
-    }
   }
 
   &-tall {
@@ -243,24 +221,6 @@
         margin: 2rem 0 1rem;
         display: none;
       }
-
-      img {
-        @include devicebreak(small) {
-
-          // 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 {