chore: add DisplayWithImageOverlay

upgrade tailwindcss to 3.4.17

Author: FRSgit

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

@@ -2,9 +2,9 @@
 
 Banners are components that deliver main image and content in various configurations.
 
-## Reponsive Display
+## Responsive Display
 
-Display blocks that switch between horitonzal/vertical arrengement based on [parent container's size](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries).
+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">
 
@@ -62,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/DisplayWithImageOverlay.tsx

@@ -0,0 +1,57 @@
+/* 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 = [
+  {
+    title: 'Cap Game Strong',
+    subtitle: 'Special Offer',
+    description: 'Score serious style points with our Open Capsule collection',
+    buttonText: 'Browse offers',
+    reverse: false,
+    backgroundImage: 'http://localhost:3100/@assets/display-overlay.png',
+  },
+];
+
+export default function DisplayHorizontalBlock() {
+  return (
+    <div className="grid md:flex md:flex-row flex-wrap gap-6 max-w-[1540px]">
+      {displayDetails.map(({ title, subtitle, description, buttonText, backgroundImage, reverse }) => (
+        <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-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
+DisplayHorizontalBlock.getLayout = ShowcasePageLayout;

apps/preview/nuxt/pages/showcases/Banners/DisplayWithImageOverlay.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="max-w-[1540px]">
+    <div
+      v-for="{ title, subtitle, description, buttonText, backgroundImage } in displayDetails"
+      :key="title"
+      class="relative flex text-white max-w-[1536px] @container group"
+    >
+      <a
+        class="absolute w-full h-full z-1 focus-visible:outline focus-visible:rounded-lg"
+        :aria-label="title"
+        href="#"
+      />
+      <div class="h-[680px] @3xl:h-auto @3xl:aspect-[2] flex justify-between overflow-hidden grow">
+        <div class="grow flex flex-col justify-center items-center text-center p-6 @3xl:p-10 max-w-1/2">
+          <p class="uppercase typography-text-xs block font-medium tracking-widest @3xl:typography-headline-6">
+            {{ subtitle }}
+          </p>
+          <h2 class="mb-4 mt-2 font-semibold typography-display-3 -tracking-wide @3xl:typography-display-1">
+            {{ title }}
+          </h2>
+          <p class="typography-text-base block mb-4 @3xl:typography-text-lg">
+            {{ description }}
+          </p>
+          <SfButton
+            blank
+            class="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 class="absolute inset-0 z-[-1] overflow-hidden bg-primary-900">
+          <img :src="backgroundImage" :alt="title" class="w-full h-full object-cover opacity-75" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { SfButton } from '@storefront-ui/vue';
+
+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',
+  },
+];
+</script>

apps/preview/shared/public/@assets/display-overlay.png

@@ -48,7 +48,7 @@
     "postcss": "^8.4.21",
     "postcss-import": "^15.1.0",
     "rimraf": "^6.0.1",
-    "tailwindcss": "^3.4.7",
+    "tailwindcss": "3.4.17",
     "typescript": "^5.5.4",
     "vite": "^5.3.5",
     "vite-plugin-istanbul": "^4.0.1"

apps/test/react/package.json

@@ -50,7 +50,7 @@
     "postcss-import": "^15.1.0",
     "rimraf": "^6.0.1",
     "sass": "^1.77.8",
-    "tailwindcss": "^3.4.7",
+    "tailwindcss": "3.4.17",
     "typescript": "^5.5.4",
     "vite": "^5.3.5",
     "vite-plugin-istanbul": "^4.0.0",

apps/test/vue/package.json

@@ -73,7 +73,7 @@
     "remark-stringify": "^11.0.0",
     "rimraf": "^6.0.1",
     "rollup-plugin-preserve-directives": "^0.4.0",
-    "tailwindcss": "^3.4.7",
+    "tailwindcss": "3.4.17",
     "turbo": "^2.0.9",
     "typescript": "^5.5.4",
     "unified": "^11.0.5",