From 3616b59e55d5231fde266b5a7c3c6ba550a4f7a8 Mon Sep 17 00:00:00 2001
From: Ruslan Matkovskyi <rusm@sitecore.net>
Date: Tue, 27 Sep 2022 16:33:56 +0300
Subject: [PATCH]  #545156: added pisibility to change image into banner
 variant of image component

---
 .../assets/sass/components/image/_image-banner.scss |  3 +++
 .../templates/nextjs-sxa/src/components/Image.tsx   | 13 ++++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/image/_image-banner.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/image/_image-banner.scss
index e975f327fb..734bf3fa35 100644
--- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/image/_image-banner.scss
+++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/image/_image-banner.scss
@@ -9,4 +9,7 @@
       height: 300px;
     }
   }
+  .sc-image-wrapper {
+    opacity: 0;
+  }
 }
\ No newline at end of file
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 63435c425a..808d0c9baf 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
@@ -8,6 +8,7 @@ import {
   Text,
   useSitecoreContext,
 } from '@sitecore-jss/sitecore-jss-nextjs';
+import { getEEMarkup } from '@sitecore-jss/sitecore-jss-react';
 
 interface Fields {
   Image: ImageField;
@@ -29,11 +30,21 @@ const ImageDefault = (props: ImageProps): JSX.Element => (
 );
 
 export const Banner = (props: ImageProps): JSX.Element => {
+  const { sitecoreContext } = useSitecoreContext();
   const backgroundStyle = { backgroundImage: `url('${props?.fields?.Image?.value?.src}')` };
+  const modifyImageProps = {
+    ...props.fields.Image,
+    editable: props?.fields?.Image?.editable
+      ?.replace(`width="${props?.fields?.Image?.value?.width}"`, 'width="100%"')
+      .replace(`height="${props?.fields?.Image?.value?.height}"`, 'height="100%"'),
+  };
+  const Image = () => getEEMarkup(modifyImageProps);
 
   return (
     <div className={`component hero-banner ${props.params.styles}`}>
-      <div className="component-content" style={backgroundStyle} />
+      <div className="component-content" style={backgroundStyle}>
+        {sitecoreContext.pageState === 'edit' ? <Image /> : ''}
+      </div>
     </div>
   );
 };