feat(SLB-287): update naming to be compliant with backend

AmazeeLabs · May 18, 2024 · 314ce78 · 314ce78
1 parent ada150d
commit 314ce78
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 25 deletions.
diff --git a/...ent/BlockBackgroundImageCards.stories.tsx → ...PageContent/BlockImageTeasers.stories.tsx b/...ent/BlockBackgroundImageCards.stories.tsx → ...PageContent/BlockImageTeasers.stories.tsx
@@ -4,11 +4,11 @@ import Portrait from '@stories/portrait.jpg?as=metadata';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { image } from '../../../helpers/image';
-import { BlockBackgroundImageCards } from './BlockBackgroundImageCards';
+import { BlockImageTeasers } from './BlockImageTeasers';
 
 export default {
-  component: BlockBackgroundImageCards,
-} satisfies Meta<typeof BlockBackgroundImageCards>;
+  component: BlockImageTeasers,
+} satisfies Meta<typeof BlockImageTeasers>;
 
 export const Default = {
   args: {
@@ -33,4 +33,4 @@ export const Default = {
       },
     ],
   },
-} satisfies StoryObj<typeof BlockBackgroundImageCards>;
+} satisfies StoryObj<typeof BlockImageTeasers>;
diff --git a/...PageContent/BlockBackgroundImageCards.tsx → ...ganisms/PageContent/BlockImageTeasers.tsx b/...PageContent/BlockBackgroundImageCards.tsx → ...ganisms/PageContent/BlockImageTeasers.tsx
@@ -1,31 +1,30 @@
-import {
-  BlockImageTeaser,
-  BlockImageTeasers,
-  Image,
-  Link,
-} from '@custom/schema';
+import { BlockImageTeasersFragment, Image, Link } from '@custom/schema';
 import React from 'react';
 
 import { isTruthy } from '../../../utils/isTruthy';
 
-export function BlockBackgroundImageCards(props: BlockImageTeasers) {
+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) => (
-            <BlockBackgroundImageCard key={index} {...teaser} />
+            <BlockImageTeaser key={index} {...teaser} />
           ))}
         </div>
       </div>
     </section>
   );
 }
 
-export function BlockBackgroundImageCard(props: BlockImageTeaser) {
+// 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 md:col-span-1 text-left h-72 lg:h-96 relative bg-gray-900">
+    <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"
@@ -36,7 +35,7 @@ export function BlockBackgroundImageCard(props: BlockImageTeaser) {
 
       <div className={'relative'}>
         {props.title ? (
-          <h2 className="mb-5 max-w-xl text-4xl font-extrabold tracking-tight leading-tight text-white">
+          <h2 className="mb-6 max-w-xl text-4xl font-bold tracking-tight leading-tight text-white">
             {props.title}
           </h2>
         ) : null}
@@ -45,7 +44,7 @@ export function BlockBackgroundImageCard(props: BlockImageTeaser) {
           <Link
             href={props.ctaUrl}
             type="button"
-            className="inline-flex items-center px-4 py-2.5 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"
+            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>

diff --git a/packages/ui/src/components/Organisms/PageDisplay.tsx b/packages/ui/src/components/Organisms/PageDisplay.tsx
@@ -5,11 +5,11 @@ import { isTruthy } from '../../utils/isTruthy';
 import { UnreachableCaseError } from '../../utils/unreachable-case-error';
 import { BreadCrumbs } from '../Molecules/Breadcrumbs';
 import { PageTransition } from '../Molecules/PageTransition';
-import { BlockBackgroundImageCards } from './PageContent/BlockBackgroundImageCards';
 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';
@@ -31,7 +31,7 @@ export function PageDisplay(page: PageFragment) {
             case 'BlockForm':
               return <BlockForm key={index} {...block} />;
             case 'BlockImageTeasers':
-              return <BlockBackgroundImageCards key={index} {...block} />;
+              return <BlockImageTeasers key={index} {...block} />;
             case 'BlockCta':
               return <BlockCta key={index} {...block} />;
             case 'BlockImageWithText':

diff --git a/packages/ui/src/components/Routes/Page.stories.tsx b/packages/ui/src/components/Routes/Page.stories.tsx
@@ -11,8 +11,8 @@ 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 { Default as BlockBackgroundImageCards } from '../Organisms/PageContent/BlockBackgroundImageCards.stories';
 import { Mixed, Paragraph } from '../Organisms/PageContent/BlockMarkup.stories';
 import { WithCaption } from '../Organisms/PageContent/BlockMedia.stories';
 import { Default as FrameStory } from './Frame.stories';
@@ -46,7 +46,7 @@ export const Default = {
       content: [
         {
           __typename: 'BlockImageTeasers',
-          ...BlockBackgroundImageCards.args,
+          ...BlockImageTeasers.args,
         },
         {
           __typename: 'BlockMarkup',
@@ -70,7 +70,7 @@ export const Default = {
         },
         {
           __typename: 'BlockImageTeasers',
-          ...BlockBackgroundImageCards.args,
+          ...BlockImageTeasers.args,
         },
       ] as Exclude<ViewPageQuery['page'], undefined>['content'],
     },

diff --git a/packages/ui/src/tailwind.css b/packages/ui/src/tailwind.css
@@ -36,9 +36,10 @@
   content: '' !important;
 }
 
-/* Selects the .block-background-image-cards only when it is the first child of the <div>
-   element immediately following the .default-hero section.
+/*
+  Selects the .block-background-image-cards only when it is the direct
+   sibling of .default-hero section.
  */
-.default-hero + div > :first-child.block-background-image-cards {
+.default-hero + .block-background-image-cards {
   @apply mt-2 px-0;
-}
+}