feat: redesign display block (#3284)

add rgbToOklch script
pin cypress/code-coverage pkg version
add display responsive examples
add DisplayWithImageOverlay
upgrade tailwindcss to 3.4.17
add padding for smallest screens

Author: FRSgit

apps/docs/components/content/_blocks/Banners.md

@@ -2,8 +2,25 @@
 
 Banners are components that deliver main image and content in various configurations.
 
+## Responsive Display
+
+Display blocks that switch between horizontal/vertical arrangement based on [parent container's size](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries).
+
+<Showcase showcase-name="Banners/DisplayResponsive" style="min-height:800px">
+
+::vue-only
+<<<../../../../preview/nuxt/pages/showcases/Banners/DisplayResponsive.vue
+::
+::react-only
+<<<../../../../preview/next/pages/showcases/Banners/DisplayResponsive.tsx
+::
+
+</Showcase>
+
 ## Horizontal Display
 
+Horizontal display block with image and content to the side.
+
 <Showcase showcase-name="Banners/DisplayHorizontal" style="min-height:800px">
 
 ::vue-only
@@ -45,6 +62,21 @@ Four vertical displays in row on desktop.
 
 </Showcase>
 
+## Display With Image Overlay
+
+Display block with image filling all of its background area.
+
+<Showcase showcase-name="Banners/DisplayWithImageOverlay" style="min-height:800px">
+
+::vue-only
+<<<../../../../preview/nuxt/pages/showcases/Banners/DisplayWithImageOverlay.vue
+::
+::react-only
+<<<../../../../preview/next/pages/showcases/Banners/DisplayWithImageOverlay.tsx
+::
+
+</Showcase>
+
 ## Hero
 
 The Hero component simplifies the process of creating stunning hero sections for your website. With Hero, you have the flexibility to seamlessly integrate a main image and customize your content to suit your needs. Additionally, Hero allows adding background images tailored for both mobile and desktop devices. To ensure an optimal blend of performance and visual appeal, we recommend adhering to the following image guidelines:

apps/preview/next/package.json

@@ -42,7 +42,7 @@
     "prettier": "^3.0.0",
     "rimraf": "^6.0.1",
     "string-replace-loader": "^3.1.0",
-    "tailwindcss": "^3.4.7",
+    "tailwindcss": "3.4.17",
     "ts-loader": "^9.4.2"
   }
 }

apps/preview/next/pages/showcases/Banners/DisplayHorizontal.tsx

@@ -14,9 +14,6 @@ const displayDetails = [
     buttonText: 'Discover now',
     reverse: false,
     backgroundColor: 'bg-negative-200',
-    titleClass: 'md:typography-display-2',
-    subtitleClass: 'md:typography-headline-6',
-    descriptionClass: 'md:typography-text-lg',
   },
   {
     image: 'http://localhost:3100/@assets/display-2.png',
@@ -40,41 +37,47 @@ const displayDetails = [
 
 export default function DisplayHorizontalBlock() {
   return (
-    <div className="flex flex-col md:flex-row flex-wrap gap-6 max-w-[1540px]">
-      {displayDetails.map(
-        ({ image, title, subtitle, description, buttonText, backgroundColor, reverse, titleClass, subtitleClass }) => (
+    <div className="grid md:flex md:flex-row flex-wrap gap-6 max-w-[1540px]">
+      {displayDetails.map(({ image, title, subtitle, description, buttonText, backgroundColor, reverse }) => (
+        <div
+          key={title}
+          className={classNames(
+            'relative flex md:max-w-[1536px] md:[&:not(:first-of-type)]:flex-1 md:first-of-type:w-full @container group',
+            backgroundColor,
+          )}
+        >
+          <a
+            className="absolute w-full h-full z-1 focus-visible:outline focus-visible:rounded-lg"
+            aria-label={title}
+            href="#"
+          />
           <div
-            key={title}
-            className={classNames(
-              'relative flex md:max-w-[1536px] md:[&:not(:first-of-type)]:flex-1 md:first-of-type:w-full',
-              backgroundColor,
-            )}
+            className={classNames('flex justify-between overflow-hidden grow', {
+              'flex-row-reverse': reverse,
+            })}
           >
-            <a
-              className="absolute w-full h-full z-1 focus-visible:outline focus-visible:rounded-lg"
-              aria-label={title}
-              href="#"
-            />
-            <div
-              className={classNames('flex justify-between overflow-hidden grow', {
-                'flex-row-reverse': reverse,
-              })}
-            >
-              <div className="flex flex-col justify-center items-start p-6 lg:p-10 max-w-1/2">
-                <p
-                  className={classNames('uppercase typography-text-xs block font-bold tracking-widest', subtitleClass)}
-                >
-                  {subtitle}
-                </p>
-                <h2 className={classNames('mb-4 mt-2 font-bold typography-display-3', titleClass)}>{title}</h2>
-                <p className="typography-text-base block mb-4">{description}</p>
-                <SfButton className="!bg-black">{buttonText}</SfButton>
-              </div>
-              <img src={image} alt={title} className="w-1/2 self-end object-contain" />
+            <div className="grow flex flex-col justify-center items-start p-4 @sm:p-6 @3xl:p-10 max-w-1/2">
+              <p className="uppercase typography-text-xs block font-medium tracking-widest @3xl:typography-headline-6">
+                {subtitle}
+              </p>
+              <h2 className="mb-4 mt-2 font-semibold typography-display-3 -tracking-wide @3xl:typography-display-1">
+                {title}
+              </h2>
+              <p className="typography-text-base block mb-4 @3xl:typography-text-lg">{description}</p>
+              <SfButton
+                blank
+                className="text-white bg-neutral-700 hover:bg-neutral-800 active:bg-neutral-900 group-hover:bg-neutral-800 group-active:bg-neutral-900 group-has-[:focus-visible]:outline group-has-[:focus-visible]:outline-offset pointer-events-none"
+                tabIndex={-1}
+              >
+                {buttonText}
+              </SfButton>
+            </div>
+            <div className="flex-shrink-0 w-1/2 self-start object-contain">
+              <img src={image} alt={title} className="w-full" />
             </div>
           </div>
-        ),
-      )}
+        </div>
+      ))}
     </div>
   );
 }

apps/preview/next/pages/showcases/Banners/DisplayResponsive.tsx

@@ -0,0 +1,76 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable jsx-a11y/anchor-has-content */
+import { ShowcasePageLayout } from '../../showcases';
+// #region source
+import { SfButton } from '@storefront-ui/react';
+import classNames from 'classnames';
+
+const displayDetails = [
+  {
+    image: 'http://localhost:3100/@assets/display-2.png',
+    title: 'Pack it Up',
+    subtitle: 'Be active',
+    description: 'Explore the great outdoors with our backpacks',
+    buttonText: 'Discover now',
+    reverse: true,
+    backgroundColor: 'bg-warning-200',
+  },
+  {
+    image: 'http://localhost:3100/@assets/display.png',
+    title: 'Sunny Days Ahead',
+    subtitle: 'Be inspired',
+    description: 'Step out in style with our sunglasses collection',
+    buttonText: 'Discover now',
+    reverse: true,
+    backgroundColor: 'bg-negative-200',
+  },
+];
+
+export default function DisplayHorizontalBlock() {
+  return (
+    <div className="grid md:flex md:flex-row flex-wrap gap-6 max-w-[1540px]">
+      {displayDetails.map(({ image, title, subtitle, description, buttonText, backgroundColor, reverse }) => (
+        <div
+          key={title}
+          className={classNames(
+            'relative flex md:max-w-[1536px] md:[&:not(:first-of-type)]:flex-1 md:first-of-type:w-full @container group',
+            backgroundColor,
+          )}
+        >
+          <a
+            className="absolute w-full h-full z-1 focus-visible:outline focus-visible:rounded-lg"
+            aria-label={title}
+            href="#"
+          />
+          <div
+            className={classNames('flex justify-between overflow-hidden grow flex-col @md:flex-row', {
+              '@md:flex-row-reverse flex-col-reverse': reverse,
+            })}
+          >
+            <div className="grow flex flex-col justify-center items-start p-4 @sm:p-6 @3xl:p-10 max-w-1/2 items-center text-center @md:items-start @md:text-start">
+              <p className="uppercase typography-text-xs block font-medium tracking-widest @3xl:typography-headline-6">
+                {subtitle}
+              </p>
+              <h2 className="mb-4 mt-2 font-semibold typography-display-3 -tracking-wide @3xl:typography-display-1">
+                {title}
+              </h2>
+              <p className="typography-text-base block mb-4 @3xl:typography-text-lg">{description}</p>
+              <SfButton
+                blank
+                className="text-white bg-neutral-700 hover:bg-neutral-800 active:bg-neutral-900 group-hover:bg-neutral-800 group-active:bg-neutral-900 group-has-[:focus-visible]:outline group-has-[:focus-visible]:outline-offset pointer-events-none"
+                tabIndex={-1}
+              >
+                {buttonText}
+              </SfButton>
+            </div>
+            <div className="flex flex-shrink-0 items-center w-full @md:w-1/2 @md:self-start @md:object-contain">
+              <img src={image} alt={title} className="w-full" />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+// #endregion source
+DisplayHorizontalBlock.getLayout = ShowcasePageLayout;

apps/preview/next/pages/showcases/Banners/DisplayVertical.tsx

@@ -33,7 +33,7 @@ export default function DisplayVertical() {
         <div
           key={title}
           className={classNames(
-            `relative flex flex-col justify-between rounded-md md:items-center md:basis-1/2 ${backgroundColor}`,
+            `relative flex flex-col justify-between rounded-md md:items-center md:basis-1/2 ${backgroundColor} @container group`,
             { 'flex-col-reverse': reverse },
           )}
         >
@@ -42,11 +42,21 @@ export default function DisplayVertical() {
             aria-label={title}
             href="#"
           />
-          <div className="flex flex-col items-center p-4 text-center md:p-10">
-            <p className="mb-2 font-bold tracking-widest uppercase typography-headline-6">{subtitle}</p>
-            <p className="mb-4 font-bold typography-display-2">{title}</p>
-            <p className="mb-4 typography-text-lg">{description}</p>
-            <SfButton className="font-semibold !bg-neutral-900">{callToAction}</SfButton>
+          <div className="flex flex-col items-center p-4 @sm:p-6 text-center @3xl:p-10">
+            <p className="uppercase typography-text-xs block font-medium tracking-widest @3xl:typography-headline-6">
+              {subtitle}
+            </p>
+            <h2 className="mb-4 mt-2 font-semibold typography-display-3 -tracking-wide @3xl:typography-display-1">
+              {title}
+            </h2>
+            <p className="typography-text-base block mb-4 @3xl:typography-text-lg">{description}</p>
+            <SfButton
+              blank
+              className="text-white bg-neutral-700 hover:bg-neutral-800 active:bg-neutral-900 group-hover:bg-neutral-800 group-active:bg-neutral-900 group-has-[:focus-visible]:outline group-has-[:focus-visible]:outline-offset pointer-events-none"
+              tabIndex={-1}
+            >
+              {callToAction}
+            </SfButton>
           </div>
           <div className="flex items-center w-full">
             <img src={image} alt={title} className="w-full" />

apps/preview/next/pages/showcases/Banners/DisplayVerticalMultiple.tsx

@@ -28,34 +28,25 @@ const displayDetails = [
   },
 
   {
-    title: 'Pack it Up',
-    subtitle: 'Be active',
-    description: 'Explore the great outdoors with our backpacks',
-    callToAction: 'Discover now',
-    image: 'http://localhost:3100/@assets/display-2.png',
-    backgroundColor: 'bg-warning-200',
-    reverse: true,
-  },
-  {
-    title: 'Sunny Days Ahead',
-    subtitle: 'Be inspired',
-    description: 'Step out in style with our sunglasses collection',
+    title: 'Fresh and Bold',
+    subtitle: 'New collection',
+    description: 'Add a pop up color to your outfit',
     callToAction: 'Discover now',
-    image: 'http://localhost:3100/@assets/display.png',
-    backgroundColor: 'bg-negative-200',
+    image: 'http://localhost:3100/@assets/display-3.png',
+    backgroundColor: 'bg-secondary-200',
     reverse: false,
   },
 ];
 export default function DisplayVerticalMultiple() {
   return (
     <div className="flex flex-col gap-6 md:flex-row">
-      <div className="flex flex-col gap-6 md:flex-row">
+      <div className="flex flex-col flex-grow gap-6 md:flex-row">
         {displayDetails.map(
           ({ title, subtitle, description, callToAction, image, backgroundColor, reverse }, index) => (
             <div
               key={`${title}-${index}`}
               className={classNames(
-                `relative flex flex-col justify-between rounded-md md:items-center md:basis-1/2 ${backgroundColor}`,
+                `relative flex flex-col justify-between rounded-md md:items-center md:basis-1/2 ${backgroundColor} @container group`,
                 { 'flex-col-reverse': reverse },
               )}
             >
@@ -64,11 +55,21 @@ export default function DisplayVerticalMultiple() {
                 aria-label={title}
                 href="#"
               />
-              <div className="flex flex-col items-center p-4 text-center md:p-10">
-                <p className="mb-2 font-bold tracking-widest uppercase typography-headline-6">{subtitle}</p>
-                <p className="mb-4 font-bold typography-display-2">{title}</p>
-                <p className="mb-4 typography-text-lg">{description}</p>
-                <SfButton className="font-semibold !bg-neutral-900">{callToAction}</SfButton>
+              <div className="flex flex-col p-4 @sm:p-6 text-center items-center @3xl:p-10">
+                <p className="uppercase typography-text-xs block font-medium tracking-widest @3xl:typography-headline-6">
+                  {subtitle}
+                </p>
+                <h2 className="mb-4 mt-2 font-semibold typography-display-3 -tracking-wide @3xl:typography-display-1">
+                  {title}
+                </h2>
+                <p className="typography-text-base block mb-4 @3xl:typography-text-lg">{description}</p>
+                <SfButton
+                  blank
+                  className="text-white bg-neutral-700 hover:bg-neutral-800 active:bg-neutral-900 group-hover:bg-neutral-800 group-active:bg-neutral-900 group-has-[:focus-visible]:outline group-has-[:focus-visible]:outline-offset pointer-events-none"
+                  tabIndex={-1}
+                >
+                  {callToAction}
+                </SfButton>
               </div>
               <div className="flex items-center w-full">
                 <img src={image} alt={title} className="w-full" />

apps/preview/next/pages/showcases/Banners/DisplayWithImageOverlay.tsx

@@ -0,0 +1,56 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable jsx-a11y/anchor-has-content */
+import { ShowcasePageLayout } from '../../showcases';
+// #region source
+import { SfButton } from '@storefront-ui/react';
+
+const displayDetails = [
+  {
+    title: 'Cap Game Strong',
+    subtitle: 'Special Offer',
+    description: 'Score serious style points with our Open Capsule collection',
+    buttonText: 'Browse offers',
+    backgroundImage: 'http://localhost:3100/@assets/display-overlay.png',
+  },
+];
+
+export default function DisplayWithImageOverlay() {
+  return (
+    <div className="max-w-[1540px]">
+      {displayDetails.map(({ title, subtitle, description, buttonText, backgroundImage }) => (
+        <div key={title} className="relative flex text-white max-w-[1536px] @container group">
+          <a
+            className="absolute w-full h-full z-1 focus-visible:outline focus-visible:rounded-lg"
+            aria-label={title}
+            href="#"
+          />
+          <div className="h-[680px] @3xl:h-auto @3xl:aspect-[2] flex justify-between overflow-hidden grow">
+            <div className="grow flex flex-col justify-center items-center text-center p-4 @sm:p-6 @3xl:p-10 max-w-1/2">
+              <p className="uppercase typography-text-xs block font-medium tracking-widest @3xl:typography-headline-6">
+                {subtitle}
+              </p>
+              <h2 className="mb-4 mt-2 font-semibold typography-display-3 -tracking-wide @3xl:typography-display-1">
+                {title}
+              </h2>
+              <p className="typography-text-base block mb-4 @3xl:typography-text-lg">{description}</p>
+              <SfButton
+                blank
+                className="w-[200px] bg-white text-primary-700 ring-secondary-400 group-hover:bg-primary-100 group-hover:hover:text-primary-800 group-hover:ring-secondary-500 group-active:bg-primary-200 group-active:text-primary-900 group-active:ring-secondary-600 group-has-[:focus-visible]:outline group-has-[:focus-visible]:outline-offset pointer-events-none"
+                tabIndex={-1}
+                variant="secondary"
+              >
+                {buttonText}
+              </SfButton>
+            </div>
+            <div className="absolute inset-0 z-[-1] overflow-hidden bg-primary-900">
+              <img src={backgroundImage} alt={title} className="w-full h-full object-cover opacity-75" />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+// #endregion source
+
+DisplayWithImageOverlay.getLayout = ShowcasePageLayout;