From d7fc29dc755645693f66ae55908d9fa659fb91dd Mon Sep 17 00:00:00 2001
From: Leonardo Matos <leomp120894@gmail.com>
Date: Tue, 8 Oct 2024 02:41:15 -0300
Subject: [PATCH] fix(storefront): Add new `isHalfSize` optional prop to
 `BannerPictures.astro`

Minor fix transform widths and srcset sizes
---
 .../src/lib/components/BannerPictures.astro   | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/storefront/src/lib/components/BannerPictures.astro b/packages/storefront/src/lib/components/BannerPictures.astro
index b67d3718b..5a78c08c8 100644
--- a/packages/storefront/src/lib/components/BannerPictures.astro
+++ b/packages/storefront/src/lib/components/BannerPictures.astro
@@ -8,6 +8,7 @@ export type Props = UseBannerProps & {
   class?: string;
   mobileWidths?: number[];
   mobileClass?: string;
+  isHalfSize?: boolean;
 };
 
 const {
@@ -18,19 +19,24 @@ const {
   subtitle,
   buttonText,
   index,
-  class: className = 'max-w-screen-sm sm:max-w-[828px] md:max-w-screen-2xl',
-  mobileClass = 'max-w-screen-sm sm:max-w-screen-lg',
+  mobileClass,
 } = Astro.props as Props;
-const hasHeader = title || subtitle || buttonText;
+const hasHeader = Boolean(title || subtitle || buttonText);
+const isHalfSize = Astro.props.isHalfSize || hasHeader;
 let { widths, mobileWidths } = Astro.props;
+let className = Astro.props.class;
+if (!className) {
+  if (isHalfSize) {
+    className = 'max-w-screen-sm sm:max-w-[828px] lg:max-w-screen-xl';
+  } else {
+    className = 'max-w-screen-sm sm:max-w-[828px] md:max-w-screen-2xl 2xl:max-w-[1920px]';
+  }
+}
 if (!widths?.length) {
   if (mobileImg) {
-    widths = [1536, 2048];
+    widths = isHalfSize ? [828, 1280] : [1536, 2048];
   } else {
-    widths = [640, 828, 1536, 2048];
-    if (hasHeader) {
-      widths = widths.map((w) => (w / 2));
-    }
+    widths = isHalfSize ? [640, 828, 1280] : [640, 828, 1536, 2048];
   }
 }
 if (!mobileWidths?.length) {
@@ -56,6 +62,7 @@ if (!mobileWidths?.length) {
     widths={mobileWidths}
     fetchpriority={index === 0 ? 'high' : 'low'}
     loading={index === 0 ? 'eager' : 'lazy'}
-    class={`mx-auto text-sm text-opacity-70 md:hidden ${mobileClass}`}
+    class={`mx-auto text-sm text-opacity-70 md:hidden
+    ${(mobileClass || 'max-w-screen-sm sm:max-w-screen-lg')}`}
   />
 }