feat(SLB-307): style block info grid

AmazeeLabs · May 21, 2024 · e3f22c3 · e3f22c3
1 parent 4e7bdc8
commit e3f22c3
Show file tree

Hide file tree

Showing 7 changed files with 176 additions and 37 deletions.
diff --git a/packages/drupal/gutenberg_blocks/src/utils/icon-list.ts b/packages/drupal/gutenberg_blocks/src/utils/icon-list.ts
@@ -17,7 +17,7 @@ const { t: __ } = Drupal;
 export enum Icons {
   EMAIL = 'EMAIL',
   PHONE = 'PHONE',
-  LIFE_RING = 'LIFE-RING',
+  LIFE_RING = 'LIFE_RING',
 }
 
 // Single icon type.

diff --git a/packages/schema/src/schema.graphql b/packages/schema/src/schema.graphql
@@ -296,12 +296,17 @@ type BlockQuote @type(id: "custom/quote") {
   image: MediaImage @resolveEditorBlockMedia
 }
 
+enum InfoGridIcon default @value(string: "EMAIL") {
+  EMAIL
+  PHONE
+  LIFE_RING
+}
 type BlockInfoGrid @type(id: "custom/info-grid") {
   gridItems: [BlockInfoGridItem]! @resolveEditorBlockChildren
 }
 
 type BlockInfoGridItem {
-  icon: String! @resolveEditorBlockAttribute(key: "icon")
+  icon: InfoGridIcon! @resolveEditorBlockAttribute(key: "icon")
   textContent: BlockMarkup @resolveEditorBlockChildren @seek(pos: 0)
   cta: BlockCta @resolveEditorBlockChildren @seek(pos: 1)
 }

diff --git a/packages/ui/src/components/Atoms/Container.css b/packages/ui/src/components/Atoms/Container.css
@@ -39,3 +39,13 @@
 .container-nested .prose ol:not(ol ol) {
   @apply mt-0;
 }
+
+.consistent-margin {
+  h1,
+  h2,
+  h3,
+  p,
+  a {
+    @apply my-2;
+  }
+}
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockInfoGrid.stories.ts b/packages/ui/src/components/Organisms/PageContent/BlockInfoGrid.stories.ts
@@ -0,0 +1,57 @@
+import { CtaIconPosition, InfoGridIcon, Markup, Url } from '@custom/schema';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { BlockInfoGrid } from './BlockInfoGrid';
+
+export default {
+  component: BlockInfoGrid,
+} satisfies Meta<typeof BlockInfoGrid>;
+
+export const BlockCtaDefault = {
+  args: {
+    gridItems: [
+      {
+        icon: InfoGridIcon.Email,
+        textContent: {
+          markup: `<h3>Email us:</h1>
+          <p>Email us for general queries, including marketing and partnership opportunities.</p>` as Markup,
+        },
+        cta: {
+          text: 'Learn more',
+          url: 'https://example.com' as Url,
+          openInNewTab: false,
+          icon: 'ARROW',
+          iconPosition: CtaIconPosition.After,
+        },
+      },
+      {
+        icon: InfoGridIcon.Phone,
+        textContent: {
+          markup: `<h3>Call us:</h1>
+          <p>Call us to speak to a member of our team. We are always happy to help.</p>` as Markup,
+        },
+        cta: {
+          text: 'Learn more',
+          url: 'https://example.com' as Url,
+          openInNewTab: false,
+          icon: 'ARROW',
+          iconPosition: CtaIconPosition.After,
+        },
+      },
+      {
+        icon: InfoGridIcon.LifeRing,
+        textContent: {
+          markup: `<h3>Support</h1>
+          <p>Check out helpful resources, FAQs and developer tools.</p>` as Markup,
+        },
+        cta: {
+          text: 'Support center',
+          url: 'https://example.com' as Url,
+          openInNewTab: false,
+          icon: 'ARROW',
+          iconPosition: CtaIconPosition.After,
+        },
+      },
+    ],
+  },
+} satisfies StoryObj<typeof BlockInfoGrid>;
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockInfoGrid.tsx b/packages/ui/src/components/Organisms/PageContent/BlockInfoGrid.tsx
@@ -0,0 +1,98 @@
+import { BlockInfoGridFragment, InfoGridIcon } from '@custom/schema';
+import React from 'react';
+
+import { BlockCta } from './BlockCta';
+import { BlockMarkup } from './BlockMarkup';
+
+export function BlockInfoGrid(props: BlockInfoGridFragment) {
+  return (
+    <div className="container-page">
+      <div className="container-content">
+        <div
+          className={
+            'flex flex-col md:grid md:grid-cols-2 lg:grid-cols-3 justify-center gap-10 md:gap-16 items-center my-10'
+          }
+        >
+          {props.gridItems.map((item, index) => (
+            <div
+              key={index}
+              className="flex flex-col items-center justify-center gap-4 px-3 md:px-4 text-center "
+            >
+              {item?.icon && iconMap[item?.icon]}
+              <div className="flex flex-col items-center justify-center gap-2.5">
+                <div className="nested-container *:m-0 consistent-margin">
+                  {item?.textContent?.markup && (
+                    <BlockMarkup markup={item?.textContent?.markup} />
+                  )}
+                </div>
+                <div className="nested-container w-fit mx-auto *:m-0">
+                  {item?.cta && <BlockCta {...item?.cta} />}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const MailIcon = () => (
+  <svg
+    width="64"
+    height="64"
+    viewBox="0 0 64 64"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect width="64" height="64" rx="8" fill="#F3F4F6" />
+    <path
+      d="M12.8076 22.1216L32.0004 31.7168L51.1932 22.1216C51.1222 20.8986 50.5862 19.7491 49.6952 18.9085C48.8041 18.0679 47.6254 17.5998 46.4004 17.6H17.6004C16.3754 17.5998 15.1967 18.0679 14.3056 18.9085C13.4146 19.7491 12.8787 20.8986 12.8076 22.1216Z"
+      fill="#6B7280"
+    />
+    <path
+      d="M51.1998 27.4832L31.9998 37.0832L12.7998 27.4832V41.6C12.7998 42.873 13.3055 44.0939 14.2057 44.9941C15.1059 45.8942 16.3268 46.4 17.5998 46.4H46.3998C47.6728 46.4 48.8937 45.8942 49.7939 44.9941C50.6941 44.0939 51.1998 42.873 51.1998 41.6V27.4832Z"
+      fill="#6B7280"
+    />
+  </svg>
+);
+
+const PhoneIcon = () => (
+  <svg
+    width="64"
+    height="64"
+    viewBox="0 0 64 64"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect width="64" height="64" rx="8" fill="#F3F4F6" />
+    <path
+      d="M12.7998 15.2C12.7998 14.5635 13.0527 13.9531 13.5027 13.503C13.9528 13.0529 14.5633 12.8 15.1998 12.8H20.367C20.9351 12.8003 21.4847 13.0021 21.918 13.3695C22.3513 13.7369 22.6402 14.246 22.7334 14.8064L24.5094 25.4504C24.5943 25.9574 24.5141 26.4781 24.2808 26.9361C24.0475 27.3941 23.6734 27.7651 23.2134 27.9945L19.4982 29.8496C20.8305 33.1512 22.8146 36.1503 25.3321 38.6678C27.8495 41.1853 30.8486 43.1694 34.1502 44.5016L36.0078 40.7865C36.2371 40.3269 36.6077 39.9531 37.0651 39.7198C37.5226 39.4865 38.0429 39.4061 38.5494 39.4904L49.1934 41.2665C49.7538 41.3596 50.263 41.6486 50.6304 42.0819C50.9978 42.5152 51.1995 43.0648 51.1998 43.6329V48.8C51.1998 49.4366 50.947 50.047 50.4969 50.4971C50.0468 50.9472 49.4363 51.2001 48.7998 51.2001H43.9998C26.7678 51.2001 12.7998 37.232 12.7998 20V15.2Z"
+      fill="#6B7280"
+    />
+  </svg>
+);
+
+const LifeRing = () => (
+  <svg
+    width="64"
+    height="64"
+    viewBox="0 0 64 64"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect width="64" height="64" rx="8" fill="#F3F4F6" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M51.1998 32C51.1998 37.0922 49.177 41.9758 45.5763 45.5765C41.9756 49.1772 37.092 51.2001 31.9998 51.2001C26.9076 51.2001 22.0241 49.1772 18.4234 45.5765C14.8227 41.9758 12.7998 37.0922 12.7998 32C12.7998 26.9079 14.8227 22.0243 18.4234 18.4236C22.0241 14.8229 26.9076 12.8 31.9998 12.8C37.092 12.8 41.9756 14.8229 45.5763 18.4236C49.177 22.0243 51.1998 26.9079 51.1998 32ZM46.3998 32C46.3998 34.3832 45.8214 36.6296 44.7966 38.6096L41.139 34.9496C41.6867 33.2545 41.7515 31.4404 41.3262 29.7104L45.075 25.9616C45.9246 27.7977 46.3998 29.84 46.3998 32ZM34.0038 41.3913L37.7958 45.1833C35.9694 45.9874 33.9954 46.4018 31.9998 46.4001C29.9146 46.4026 27.854 45.9505 25.9614 45.0752L29.7102 41.3264C31.1182 41.6715 32.586 41.6936 34.0038 41.3913ZM22.779 34.6808C22.3067 33.0546 22.2728 31.3324 22.6806 29.6888L22.4886 29.8808L18.8166 26.2016C18.0121 28.0288 17.5977 30.0037 17.5998 32C17.5998 34.2896 18.135 36.4544 19.0854 38.3768L22.7814 34.6808H22.779ZM25.3902 19.2008C27.4331 18.1449 29.7001 17.5958 31.9998 17.6C34.2894 17.6 36.4542 18.1352 38.3766 19.0856L34.6806 22.7816C32.838 22.245 30.8769 22.2725 29.0502 22.8608L25.3902 19.2032V19.2008ZM36.7998 32C36.7998 33.2731 36.2941 34.494 35.3939 35.3942C34.4937 36.2943 33.2728 36.8 31.9998 36.8C30.7268 36.8 29.5059 36.2943 28.6057 35.3942C27.7055 34.494 27.1998 33.2731 27.1998 32C27.1998 30.727 27.7055 29.5061 28.6057 28.6059C29.5059 27.7058 30.7268 27.2 31.9998 27.2C33.2728 27.2 34.4937 27.7058 35.3939 28.6059C36.2941 29.5061 36.7998 30.727 36.7998 32Z"
+      fill="#6B7280"
+    />
+  </svg>
+);
+
+const iconMap = {
+  [InfoGridIcon.Email]: <MailIcon />,
+  [InfoGridIcon.Phone]: <PhoneIcon />,
+  [InfoGridIcon.LifeRing]: <LifeRing />,
+};
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx b/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx
@@ -13,12 +13,12 @@ const unorderedItems: Plugin<[], Element> = () => (tree) => {
 
 export function BlockMarkup(props: BlockMarkupFragment) {
   return (
-    <div className="container-page">
+    <div className="container-page mt-10">
       <div className="container-content">
         <div className="container-text">
           <div
             className={clsx([
-              'prose lg:prose-xl mt-10',
+              'prose lg:prose-xl',
               'marker:text-[#111928]',
               'marker:font-bold',
             ])}

diff --git a/packages/ui/src/components/Organisms/PageDisplay.tsx b/packages/ui/src/components/Organisms/PageDisplay.tsx
@@ -10,6 +10,7 @@ import { BlockCta } from './PageContent/BlockCta';
 import { BlockForm } from './PageContent/BlockForm';
 import { BlockHorizontalSeparator } from './PageContent/BlockHorizontalSeparator';
 import { BlockImageWithText } from './PageContent/BlockImageWithText';
+import { BlockInfoGrid } from './PageContent/BlockInfoGrid';
 import { BlockMarkup } from './PageContent/BlockMarkup';
 import { BlockMedia } from './PageContent/BlockMedia';
 import { BlockQuote } from './PageContent/BlockQuote';
@@ -55,39 +56,7 @@ export function PageDisplay(page: PageFragment) {
             case 'BlockAccordion':
               return <BlockAccordion key={index} {...block} />;
             case 'BlockInfoGrid':
-              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
-                >
-                  BlockInfoGrid goes here
-                  <br />
-                  ---
-                  <br />
-                  {block.gridItems.map((item, index) => {
-                    return (
-                      <>
-                        <div key={index}>
-                          <p>Icon: {item?.icon}</p>
-                          <p>Markup: {item?.textContent?.markup}</p>
-                          <p>CTA Url: {item?.cta?.url}</p>
-                          <p>CTA Icon: {item?.cta?.icon}</p>
-                          <p>CTA Icon Position: {item?.cta?.iconPosition}</p>
-                          <p>CTA Text: {item?.cta?.text}</p>
-                          <p>CTA Open in New Tab: {item?.cta?.openInNewTab}</p>
-                        </div>
-                        <br />
-                      </>
-                    );
-                  })}
-                </div>
-              );
+              return <BlockInfoGrid key={index} {...block} />;
             default:
               throw new UnreachableCaseError(block);
           }