#562770: fixed Image component highlighter

Sitecore · Aug 20, 2023 · 856e19b · 856e19b
1 parent 99f1b47
commit 856e19b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 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
@@ -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
@@ -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>