feat(SLB-288): add image with text component

packages/drupal/gutenberg_blocks/css/edit.css

@@ -42,6 +42,46 @@
   transform: rotate(90deg);
 }
 
+.gutenberg__editor ul li {
+  line-height: 1.5rem;
+}
+.gutenberg__editor .list-style--arrows li,
+.gutenberg__editor .list-style--checkmarks li,
+.gutenberg__editor .list-style--question-marks li {
+  list-style-type: none;
+  position: relative;
+  padding-left: 0.625rem;
+  margin-left: 0;
+  line-height: 1.25rem !important;
+}
+
+.gutenberg__editor .list-style--arrows li::before {
+  position: absolute;
+  left: -1.25rem;
+  line-height: 1.25rem;
+  height: 1.25rem;
+  vertical-align: middle;
+  content: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%236B7280' %3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM6.75 9.25a.75.75 0 0 0 0 1.5h4.59l-2.1 1.95a.75.75 0 0 0 1.02 1.1l3.5-3.25a.75.75 0 0 0 0-1.1l-3.5-3.25a.75.75 0 1 0-1.02 1.1l2.1 1.95H6.75Z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
+}
+
+.gutenberg__editor .list-style--checkmarks li::before {
+  position: absolute;
+  left: -1.125rem;
+  line-height: 1.25rem;
+  height: 1.25rem;
+  vertical-align: middle;
+  margin-top: 0.5px;
+  content: url("data:image/svg+xml,%3Csvg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='0.5' width='18' height='18' rx='9' fill='%23DEF7EC'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.6947 6.20519C13.8259 6.33646 13.8996 6.51448 13.8996 6.70009C13.8996 6.88571 13.8259 7.06372 13.6947 7.19499L8.0947 12.795C7.96343 12.9262 7.78541 12.9999 7.5998 12.9999C7.41418 12.9999 7.23617 12.9262 7.1049 12.795L4.3049 9.99499C4.17739 9.86297 4.10683 9.68615 4.10842 9.50261C4.11002 9.31908 4.18364 9.14351 4.31342 9.01372C4.44321 8.88394 4.61878 8.81032 4.80232 8.80872C4.98585 8.80713 5.16268 8.87768 5.2947 9.00519L7.5998 11.3103L12.7049 6.20519C12.8362 6.07397 13.0142 6.00024 13.1998 6.00024C13.3854 6.00024 13.5634 6.07397 13.6947 6.20519Z' fill='%230E9F6E'/%3E%3C/svg%3E ");
+}
+
+.gutenberg__editor .list-style--question-marks li::before {
+  position: absolute;
+  left: -1.125rem;
+  vertical-align: middle;
+  line-height: 1.25rem;
+  height: 1.25rem;
+  content: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%236B7280' viewBox='0 0 20 24'%3E%3Cpath fill-rule='evenodd' d='M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm9.008-3.018a1.502 1.502 0 0 1 2.522 1.159v.024a1.44 1.44 0 0 1-1.493 1.418 1 1 0 0 0-1.037.999V14a1 1 0 1 0 2 0v-.539a3.44 3.44 0 0 0 2.529-3.256 3.502 3.502 0 0 0-7-.255 1 1 0 0 0 2 .076c.014-.398.187-.774.48-1.044Zm.982 7.026a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2h-.01Z' clip-rule='evenodd'/%3E%3C/svg%3E%0A");
+}
 .gutenberg__editor .custom-block-accordion-item-text.questionmark h3::before {
   margin-right: 7px;
   content: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%236B7280' viewBox='0 0 20 24'%3E%3Cpath fill-rule='evenodd' d='M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm9.008-3.018a1.502 1.502 0 0 1 2.522 1.159v.024a1.44 1.44 0 0 1-1.493 1.418 1 1 0 0 0-1.037.999V14a1 1 0 1 0 2 0v-.539a3.44 3.44 0 0 0 2.529-3.256 3.502 3.502 0 0 0-7-.255 1 1 0 0 0 2 .076c.014-.398.187-.774.48-1.044Zm.982 7.026a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2h-.01Z' clip-rule='evenodd'/%3E%3C/svg%3E%0A");

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

@@ -76,9 +76,6 @@ default:
         <h2 class="wp-block-custom-heading">Heading</h2>
         <!-- /wp:custom/heading -->
 
-        <!-- wp:table -->
-        <figure class="wp-block-table"><table><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table><figcaption>Caption</figcaption></figure>
-        <!-- /wp:table -->
 
         <!-- wp:quote -->
         <blockquote class="wp-block-quote"><p>Quote</p><cite>Citation</cite></blockquote>

packages/schema/src/fragments/PageContent/BlockImageWithText.gql

@@ -1,9 +1,10 @@
 fragment BlockImageWithText on BlockImageWithText {
   image {
-    source(width: 1536, sizes: [[768, 768], [1536, 1536]])
+    source(width: 1536, height: 1336)
     alt
   }
   textContent {
     markup
   }
+  imagePosition
 }

packages/ui/src/components/Atoms/List.css

@@ -0,0 +1,49 @@
+ul li {
+  @apply !text-base !font-medium !text-gray-900;
+}
+
+ul {
+  @apply !pl-4;
+}
+
+.list-style--arrows li,
+.list-style--checkmarks li,
+.list-style--question-marks li {
+  list-style-type: none;
+  position: relative;
+  padding-left: 0.625rem;
+  margin-left: 0;
+  line-height: 1.25rem !important;
+}
+
+ul li::marker {
+  @apply !text-gray-500;
+}
+
+.list-style--arrows li::before {
+  position: absolute;
+  left: -1.25rem;
+  line-height: 1.25rem;
+  height: 1.25rem;
+  vertical-align: middle;
+  content: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%236B7280' %3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM6.75 9.25a.75.75 0 0 0 0 1.5h4.59l-2.1 1.95a.75.75 0 0 0 1.02 1.1l3.5-3.25a.75.75 0 0 0 0-1.1l-3.5-3.25a.75.75 0 1 0-1.02 1.1l2.1 1.95H6.75Z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
+}
+
+.list-style--checkmarks li::before {
+  position: absolute;
+  left: -1.125rem;
+  line-height: 1.25rem;
+  height: 1.25rem;
+  vertical-align: middle;
+  margin-top: 0.5px;
+  content: url("data:image/svg+xml,%3Csvg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='0.5' width='18' height='18' rx='9' fill='%23DEF7EC'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.6947 6.20519C13.8259 6.33646 13.8996 6.51448 13.8996 6.70009C13.8996 6.88571 13.8259 7.06372 13.6947 7.19499L8.0947 12.795C7.96343 12.9262 7.78541 12.9999 7.5998 12.9999C7.41418 12.9999 7.23617 12.9262 7.1049 12.795L4.3049 9.99499C4.17739 9.86297 4.10683 9.68615 4.10842 9.50261C4.11002 9.31908 4.18364 9.14351 4.31342 9.01372C4.44321 8.88394 4.61878 8.81032 4.80232 8.80872C4.98585 8.80713 5.16268 8.87768 5.2947 9.00519L7.5998 11.3103L12.7049 6.20519C12.8362 6.07397 13.0142 6.00024 13.1998 6.00024C13.3854 6.00024 13.5634 6.07397 13.6947 6.20519Z' fill='%230E9F6E'/%3E%3C/svg%3E ");
+}
+
+.list-style--question-marks li::before {
+  position: absolute;
+  left: -1.125rem;
+  vertical-align: middle;
+  line-height: 1.25rem;
+  height: 1.25rem;
+  content: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%236B7280' viewBox='0 0 20 24'%3E%3Cpath fill-rule='evenodd' d='M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm9.008-3.018a1.502 1.502 0 0 1 2.522 1.159v.024a1.44 1.44 0 0 1-1.493 1.418 1 1 0 0 0-1.037.999V14a1 1 0 1 0 2 0v-.539a3.44 3.44 0 0 0 2.529-3.256 3.502 3.502 0 0 0-7-.255 1 1 0 0 0 2 .076c.014-.398.187-.774.48-1.044Zm.982 7.026a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2h-.01Z' clip-rule='evenodd'/%3E%3C/svg%3E%0A");
+}

packages/ui/src/components/Organisms/PageContent/BlockImageWithText.stories.ts

@@ -0,0 +1,107 @@
+import { ImagePosition, Markup } from '@custom/schema';
+import Landscape from '@stories/landscape.jpg?as=metadata';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { image } from '../../../helpers/image';
+import { BlockImageWithText } from './BlockImageWithText';
+
+export default {
+  component: BlockImageWithText,
+} satisfies Meta<typeof BlockImageWithText>;
+
+export const ImageRight = {
+  args: {
+    image: {
+      source: image(Landscape),
+      alt: 'Landscape',
+    },
+    imagePosition: ImagePosition.Right,
+    textContent: {
+      markup: `
+      <h2>Image Right</h2>
+      <ul>
+      <li> short item.</li>
+      <li>Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</li>
+        <li> Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.</li>
+      </ul>
+    ` as Markup,
+    },
+  },
+} satisfies StoryObj<typeof BlockImageWithText>;
+
+export const ImageLeft = {
+  args: {
+    image: {
+      source: image(Landscape),
+      alt: 'Landscape',
+    },
+    imagePosition: ImagePosition.Left,
+    textContent: {
+      markup: `
+      <h2>Image Left</h2>
+      <ul ">
+      <li> short item.</li>
+      <li>Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</li>
+        <li> Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.</li>
+      </ul>
+    ` as Markup,
+    },
+  },
+} satisfies StoryObj<typeof BlockImageWithText>;
+
+export const ArrowList = {
+  args: {
+    image: {
+      source: image(Landscape),
+      alt: 'Landscape',
+    },
+    textContent: {
+      markup: `
+      <h2>Arrow List</h2>
+      <ul class="list-style--arrows">
+      <li> short item.</li>
+      <li>Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</li>
+        <li> Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.</li>
+      </ul>
+    ` as Markup,
+    },
+  },
+} satisfies StoryObj<typeof BlockImageWithText>;
+
+export const QuestionMarkList = {
+  args: {
+    image: {
+      source: image(Landscape),
+      alt: 'Landscape',
+    },
+    textContent: {
+      markup: `
+      <h2>Question Mark List</h2>
+      <ul class="list-style--question-marks">
+      <li>short item.</li>
+      <li> Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</li>
+        <li>Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.</li>
+      </ul>
+    ` as Markup,
+    },
+  },
+} satisfies StoryObj<typeof BlockImageWithText>;
+
+export const CheckMarkList = {
+  args: {
+    image: {
+      source: image(Landscape),
+      alt: 'Landscape',
+    },
+    textContent: {
+      markup: `
+      <h2>Check Mark List</h2>
+      <ul class="list-style--checkmarks">
+        <li>short item.</li>
+        <li>2 liners item Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</li>
+        <li>Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.</li>
+      </ul>
+    ` as Markup,
+    },
+  },
+} satisfies StoryObj<typeof BlockImageWithText>;

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

@@ -0,0 +1,43 @@
+import {
+  BlockImageWithTextFragment,
+  Image,
+  ImagePosition,
+} from '@custom/schema';
+import clsx from 'clsx';
+import React from 'react';
+
+import { BlockMarkup } from './BlockMarkup';
+
+export function BlockImageWithText(props: BlockImageWithTextFragment) {
+  return (
+    <div className="container-page">
+      <div className="container-content my-12 lg:my-16">
+        <div
+          className={clsx(
+            'flex flex-col lg:flex-row gap-8 lg:gap-16 items-start lg:items-center',
+            {
+              'lg:flex-row-reverse':
+                props.imagePosition === ImagePosition.Right,
+            },
+          )}
+        >
+          {!!props.image?.source && (
+            <div className={'lg:w-1/2 self-start'}>
+              <Image
+                className="object-cover w-full"
+                source={props.image.source}
+                alt={props.image.alt || ''}
+              />
+            </div>
+          )}
+
+          <div className={'lg:w-1/2 nested-container'}>
+            {props.textContent?.markup && (
+              <BlockMarkup {...props.textContent} />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,5 +1,4 @@
 import { BlockMarkupFragment, Html } from '@custom/schema';
-import { ArrowRightCircleIcon } from '@heroicons/react/20/solid';
 import clsx from 'clsx';
 import type { Element } from 'hast';
 import { selectAll } from 'hast-util-select';
@@ -27,29 +26,6 @@ export function BlockMarkup(props: BlockMarkupFragment) {
             <Html
               plugins={[unorderedItems]}
               components={{
-                li: ({
-                  unordered,
-                  children,
-                  className,
-                  ...props
-                }: PropsWithChildren<{
-                  unordered?: boolean;
-                  className?: string;
-                }>) => {
-                  return (
-                    <li
-                      {...props}
-                      className={clsx(className, {
-                        'list-none relative': unordered,
-                      })}
-                    >
-                      {unordered ? (
-                        <ArrowRightCircleIcon className="not-prose w-6 h-6 absolute mt-1.5 left-[-1.5em] text-gray-900" />
-                      ) : null}
-                      {children}
-                    </li>
-                  );
-                },
                 blockquote: ({ children }: PropsWithChildren<{}>) => {
                   return (
                     <blockquote className="border-l-0 relative pl-0">

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

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 { ImageRight } from '../Organisms/PageContent/BlockImageWithText.stories';
 import { Mixed, Paragraph } from '../Organisms/PageContent/BlockMarkup.stories';
 import { WithCaption } from '../Organisms/PageContent/BlockMedia.stories';
 import { Default as FrameStory } from './Frame.stories';
@@ -54,6 +55,10 @@ export const Default = {
           __typename: 'BlockMarkup',
           ...Paragraph.args,
         },
+        {
+          __typename: 'BlockImageWithText',
+          ...ImageRight.args,
+        },
         {
           __typename: 'BlockAccordion',
           ...AccordionItemText.args,

packages/ui/src/tailwind.css

@@ -1,5 +1,6 @@
 /* Import all atom stylesheets. */
 @import './components/Atoms/Container.css';
+@import './components/Atoms/List.css';
 
 @tailwind base;
 @tailwind components;

tests/e2e/specs/drupal/blocks.spec.ts

@@ -25,12 +25,12 @@ test('All blocks are rendered', async ({ page }) => {
   // Horizontal separator.
   await expect(page.locator('hr')).toHaveCount(1);
 
-  // Image
+  // Image and ImageWithText block
   await expect(
     page.locator(
       'img:not([data-test-id=hero-image])[alt="A beautiful landscape."]',
     ),
-  ).toHaveCount(1);
+  ).toHaveCount(2);
   await expect(page.locator('figcaption:text("Media image")')).toHaveCount(1);
 
   // Video