From 856e19bee258c13c4736b70f5b3ed7c82a87a77c Mon Sep 17 00:00:00 2001
From: Ruslan Matkovskyi <rusm@sitecore.net>
Date: Mon, 21 Aug 2023 01:04:16 +0200
Subject: [PATCH]  #562770: fixed Image component highlighter

---
 .../nextjs-sxa/src/assets/basic/_component.scss  | 16 +++++++++-------
 .../nextjs-sxa/src/components/Image.tsx          | 10 +++++++++-
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_component.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_component.scss
index 169f8675a3..6565ab3cb8 100644
--- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_component.scss
+++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_component.scss
@@ -32,14 +32,16 @@
     opacity: 0;
   }
   &.scEnabledChrome {
-    .sc-image-wrapper {
-      display: block;
-      width: 100%;
-
-      .scEmptyImage {
-        max-height: 800px;
-        max-width: 100%;
+    &.hero-banner-empty {
+      .sc-image-wrapper {
+        display: block;
         width: 100%;
+  
+        .scEmptyImage {
+          max-height: 800px;
+          max-width: 100%;
+          width: 100%;
+        }
       }
     }
   }
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Image.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Image.tsx
index b2db487b15..2f5db13f8c 100644
--- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Image.tsx
+++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Image.tsx
@@ -30,6 +30,11 @@ const ImageDefault = (props: ImageProps): JSX.Element => (
 
 export const Banner = (props: ImageProps): JSX.Element => {
   const { sitecoreContext } = useSitecoreContext();
+  const isPageEditing = sitecoreContext.pageEditing;
+  const classHeroBannerEmpty =
+    isPageEditing && props.fields?.Image?.value?.class === 'scEmptyImage'
+      ? 'hero-banner-empty'
+      : '';
   const backgroundStyle = { backgroundImage: `url('${props?.fields?.Image?.value?.src}')` };
   const modifyImageProps = {
     ...props.fields.Image,
@@ -40,7 +45,10 @@ export const Banner = (props: ImageProps): JSX.Element => {
   const id = props.params.RenderingIdentifier;
 
   return (
-    <div className={`component hero-banner ${props.params.styles}`} id={id ? id : undefined}>
+    <div
+      className={`component hero-banner ${props.params.styles} ${classHeroBannerEmpty}`}
+      id={id ? id : undefined}
+    >
       <div className="component-content sc-sxa-image-hero-banner" style={backgroundStyle}>
         {sitecoreContext.pageEditing ? <JssImage field={modifyImageProps} /> : ''}
       </div>