SLB-287: Background image cards

packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml

@@ -7,8 +7,8 @@ _meta:
   depends:
     3a0fe860-a6d6-428a-9474-365bd57509aa: media
     478c4289-961d-4ce8-85d6-578ae05f3019: media
-    72187a1f-3e48-4b45-a9b7-189c6fd7ee26: media
     5dfc1856-e9e4-4f02-9cd6-9d888870ce1a: media
+    72187a1f-3e48-4b45-a9b7-189c6fd7ee26: media
 default:
   revision_uid:
     -
@@ -103,7 +103,7 @@ default:
         <!-- /wp:custom/heading -->
 
         <!-- wp:custom/image-teasers -->
-        <!-- wp:custom/image-teaser {"mediaEntityIds":["3a0fe860-a6d6-428a-9474-365bd57509aa"],"title":"Teaser 1","ctaUrl":"https://google.com","ctaText":"Foo"} /-->
+        <!-- wp:custom/image-teaser {"mediaEntityIds":["5dfc1856-e9e4-4f02-9cd6-9d888870ce1a"],"title":"Teaser 1","ctaUrl":"https://google.com","ctaText":"Foo"} /-->
 
         <!-- wp:custom/image-teaser {"mediaEntityIds":["72187a1f-3e48-4b45-a9b7-189c6fd7ee26"],"title":"Teaser 2","ctaUrl":"https://google.com","ctaText":"Bar"} /-->
         <!-- /wp:custom/image-teasers -->
@@ -114,7 +114,6 @@ default:
 
         <!-- wp:custom/cta {"url":"/media/1","text":"CTA with link to media","data-id":"b998ae5e-8b56-40ca-8f80-fd4404e7e716","data-entity-type":"media","icon":"ARROW","iconPosition":"BEFORE"} /-->
 
-
         <!-- wp:custom/quote {"quote":"Lorem ipsum dolor sit amet, \u003cstrong\u003econsectetur\u003c/strong\u003e adipiscing elit. Vivamus sagittis nisi nec neque porta, a ornare ligula efficitur.","author":"John Doe","role":"Project manager","mediaEntityIds":["5dfc1856-e9e4-4f02-9cd6-9d888870ce1a"]} /-->
 
         <!-- wp:custom/accordion -->

packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.stories.tsx

@@ -0,0 +1,36 @@
+import { Url } from '@custom/schema';
+import Landscape from '@stories/landscape.jpg?as=metadata';
+import Portrait from '@stories/portrait.jpg?as=metadata';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { image } from '../../../helpers/image';
+import { BlockImageTeasers } from './BlockImageTeasers';
+
+export default {
+  component: BlockImageTeasers,
+} satisfies Meta<typeof BlockImageTeasers>;
+
+export const Default = {
+  args: {
+    teasers: [
+      {
+        title: 'Title',
+        ctaText: 'Call to action',
+        ctaUrl: '/test' as Url,
+        image: {
+          source: image(Landscape),
+          alt: 'Alt text',
+        },
+      },
+      {
+        title: 'Title',
+        ctaText: 'Call to action',
+        ctaUrl: '/test' as Url,
+        image: {
+          source: image(Portrait),
+          alt: 'Alt text',
+        },
+      },
+    ],
+  },
+} satisfies StoryObj<typeof BlockImageTeasers>;

packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.tsx

@@ -0,0 +1,55 @@
+import { BlockImageTeasersFragment, Image, Link } from '@custom/schema';
+import React from 'react';
+
+import { isTruthy } from '../../../utils/isTruthy';
+
+export function BlockImageTeasers(props: BlockImageTeasersFragment) {
+  return (
+    // eslint-disable-next-line tailwindcss/no-custom-classname
+    <section className="container-page my-16 block-background-image-cards">
+      <div className="container-content text-center">
+        <div className="grid grid-cols-2 gap-2">
+          {props.teasers.filter(isTruthy).map((teaser, index) => (
+            <BlockImageTeaser key={index} {...teaser} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+// This component uses the following Flowbite component:
+// https://flowbite.com/blocks/marketing/hero/#background-image-cards
+export function BlockImageTeaser(
+  props: BlockImageTeasersFragment['teasers'][0],
+) {
+  return (
+    <div className="p-8 col-span-2 lg:col-span-1 text-left h-72 lg:h-96 relative bg-gray-900">
+      {props.image ? (
+        <Image
+          className="object-cover w-full h-72 lg:h-96 mb-5 absolute top-0 left-0"
+          source={props.image.source}
+          alt={props.image.alt}
+        />
+      ) : null}
+
+      <div className={'relative'}>
+        {props.title ? (
+          <h2 className="mb-6 max-w-xl text-4xl font-bold tracking-tight leading-tight text-white">
+            {props.title}
+          </h2>
+        ) : null}
+
+        {props.ctaUrl && props.ctaText ? (
+          <Link
+            href={props.ctaUrl}
+            type="button"
+            className="inline-flex text-base items-center px-5 py-3 font-medium text-center text-white border border-white rounded-lg hover:bg-white hover:text-gray-900 focus:ring-4 focus:outline-none focus:ring-gray-700"
+          >
+            {props.ctaText}
+          </Link>
+        ) : null}
+      </div>
+    </div>
+  );
+}

packages/ui/src/components/Organisms/PageDisplay.tsx

@@ -9,6 +9,7 @@ import { BlockAccordion } from './PageContent/BlockAccordion';
 import { BlockCta } from './PageContent/BlockCta';
 import { BlockForm } from './PageContent/BlockForm';
 import { BlockHorizontalSeparator } from './PageContent/BlockHorizontalSeparator';
+import { BlockImageTeasers } from './PageContent/BlockImageTeasers';
 import { BlockImageWithText } from './PageContent/BlockImageWithText';
 import { BlockMarkup } from './PageContent/BlockMarkup';
 import { BlockMedia } from './PageContent/BlockMedia';
@@ -30,20 +31,7 @@ export function PageDisplay(page: PageFragment) {
             case 'BlockForm':
               return <BlockForm key={index} {...block} />;
             case 'BlockImageTeasers':
-              return (
-                // TODO: Implement BlockImageTeasers
-                <div
-                  style={{
-                    color: 'red',
-                    border: 'solid 3px red',
-                    padding: '3px',
-                    margin: '5px 0',
-                  }}
-                  // eslint-disable-next-line react/jsx-no-literals
-                >
-                  BlockImageTeasers goes here
-                </div>
-              );
+              return <BlockImageTeasers key={index} {...block} />;
             case 'BlockCta':
               return <BlockCta key={index} {...block} />;
             case 'BlockImageWithText':

packages/ui/src/components/Organisms/PageHero.tsx

@@ -17,7 +17,7 @@ export function PageHero(props: NonNullable<PageFragment['hero']>) {
 function DefaultHero(props: NonNullable<PageFragment['hero']>) {
   return (
     <>
-      <section className="relative isolate overflow-hidden bg-gray-900 pt-12 pb-24 min-h-[20rem] lg:min-h-[33rem]">
+      <section className="default-hero relative isolate overflow-hidden bg-gray-900 pt-12 pb-24 min-h-[20rem] lg:min-h-[33rem]">
         {props.image ? (
           <Image
             alt={props.image.alt}

packages/ui/src/components/Routes/Page.stories.tsx

@@ -11,6 +11,7 @@ import React from 'react';
 
 import { image } from '../../helpers/image';
 import { AccordionItemText } from '../Organisms/PageContent/BlockAccordion.stories';
+import { Default as BlockImageTeasers } from '../Organisms/PageContent/BlockImageTeasers.stories';
 import { ImageRight } from '../Organisms/PageContent/BlockImageWithText.stories';
 import { Mixed, Paragraph } from '../Organisms/PageContent/BlockMarkup.stories';
 import { WithCaption } from '../Organisms/PageContent/BlockMedia.stories';
@@ -43,6 +44,10 @@ export const Default = {
       ],
       path: '/test' as Url,
       content: [
+        {
+          __typename: 'BlockImageTeasers',
+          ...BlockImageTeasers.args,
+        },
         {
           __typename: 'BlockMarkup',
           ...Mixed.args,
@@ -63,6 +68,10 @@ export const Default = {
           __typename: 'BlockAccordion',
           ...AccordionItemText.args,
         },
+        {
+          __typename: 'BlockImageTeasers',
+          ...BlockImageTeasers.args,
+        },
       ] as Exclude<ViewPageQuery['page'], undefined>['content'],
     },
   },

packages/ui/src/tailwind.css

@@ -35,3 +35,11 @@
   )::after {
   content: '' !important;
 }
+
+/*
+  Selects the .block-background-image-cards only when it is the direct
+   sibling of .default-hero section.
+ */
+.default-hero + .block-background-image-cards {
+  @apply mt-2 px-0;
+}