Merge branch 'release' into lagoon-slb-146

AmazeeLabs · Apr 16, 2024 · 24bf53c · 24bf53c
2 parents 004a708 + aaaa758
commit 24bf53c
Show file tree

Hide file tree

Showing 12 changed files with 190 additions and 50 deletions.
diff --git a/packages/drupal/gutenberg_blocks/css/edit.css b/packages/drupal/gutenberg_blocks/css/edit.css
@@ -10,4 +10,28 @@
 .gutenberg__editor blockquote::before,
 .gutenberg__editor blockquote::after {
   content: '';
+}
+
+.gutenberg__editor .container-wrapper {
+  display: block;
+  position: relative;
+  margin: 40px 0;
+  border-left: 34px solid #666666;
+  padding-left: 10px;
+  min-height: 250px;
+}
+
+.gutenberg__editor .container-wrapper .container-label {
+  font: bold 12px Sans-Serif;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: #fff;
+  padding: 5px 10px;
+  margin: 0 0 10px 0;
+  line-height: 24px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform-origin: 0 0;
+  transform: rotate(90deg);
 }
diff --git a/packages/drupal/gutenberg_blocks/src/blocks/hero.tsx b/packages/drupal/gutenberg_blocks/src/blocks/hero.tsx
@@ -182,7 +182,8 @@ registerBlockType('custom/hero', {
               <div>
                 <RichText
                   identifier="ctaText"
-                  tagName="div"
+                  className={`button`}
+                  tagName="p"
                   multiline={false}
                   value={props.attributes.ctaText}
                   allowedFormats={[]}

diff --git a/packages/drupal/gutenberg_blocks/src/blocks/image-teasers.tsx b/packages/drupal/gutenberg_blocks/src/blocks/image-teasers.tsx
@@ -11,13 +11,14 @@ registerBlockType('custom/image-teasers', {
   attributes: {},
   edit: () => {
     return (
-      <>
+      <div className={'container-wrapper'}>
+        <div className={'container-label'}>{__('Image Teasers')}</div>
         <InnerBlocks
           templateLock={false}
           allowedBlocks={['custom/image-teaser']}
           template={[['custom/image-teaser']]}
         />
-      </>
+      </div>
     );
   },
   save: () => <InnerBlocks.Content />,

diff --git a/packages/ui/src/components/Organisms/Footer.tsx b/packages/ui/src/components/Organisms/Footer.tsx
@@ -73,7 +73,7 @@ export function Footer() {
               <div className="flex mt-4 space-x-6 sm:justify-center sm:mt-0">
                 <a
                   href="#"
-                  className="text-gray-400 hover:text-blue-600 dark:hover:text-white"
+                  className="text-gray-400 hover:text-black dark:hover:text-white"
                 >
                   <svg
                     className="w-5 h-5"
@@ -90,7 +90,7 @@ export function Footer() {
                 </a>
                 <a
                   href="#"
-                  className="text-gray-400 hover:text-blue-600 dark:hover:text-white"
+                  className="text-gray-400 hover:text-black dark:hover:text-white"
                 >
                   <svg
                     className="w-5 h-5"
@@ -103,7 +103,7 @@ export function Footer() {
                 </a>
                 <a
                   href="#"
-                  className="text-gray-400 hover:text-blue-600 dark:hover:text-white"
+                  className="text-gray-400 hover:text-black dark:hover:text-white"
                 >
                   <svg
                     className="w-5 h-5"
@@ -118,10 +118,7 @@ export function Footer() {
                     />
                   </svg>
                 </a>
-                <a
-                  href="#"
-                  className="text-gray-400 hover:text-blue-600 dark:hover:text-white"
-                >
+                <a href="#" className="text-gray-400 hover:text-black">
                   <svg
                     className="w-5 h-5"
                     fill="currentColor"
@@ -155,7 +152,7 @@ export function Footer() {
                       <Link
                         href={item.target!}
                         className={
-                          'text-gray-900 block hover:text-blue-600 transition-all font-bold text-[0.875rem] leading-[1.313rem] uppercase mb-4'
+                          'text-gray-900 block hover:underline transition-all font-bold text-[0.875rem] leading-[1.313rem] uppercase mb-4'
                         }
                       >
                         {item.title}
@@ -174,7 +171,7 @@ export function Footer() {
                           <Link
                             key={child.target}
                             href={child.target}
-                            className="block transition-all text-base mb-4 hover:text-blue-600"
+                            className="block transition-all text-base mb-4 hover:underline"
                           >
                             {child.title}
                           </Link>

diff --git a/packages/ui/src/components/Organisms/PageContent/BlockForm.stories.tsx b/packages/ui/src/components/Organisms/PageContent/BlockForm.stories.tsx
@@ -19,5 +19,6 @@ export const Error = {
   args: {
     url: 'webforms/error/index.html' as Url,
     cssStylesToInject: cmsCss,
+    className: 'mt-16',
   },
 } satisfies StoryObj<typeof BlockForm>;
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockForm.tsx b/packages/ui/src/components/Organisms/PageContent/BlockForm.tsx
@@ -1,11 +1,13 @@
 import { SilverbackIframe } from '@amazeelabs/silverback-iframe';
 import { BlockFormFragment, Url, useLocation } from '@custom/schema';
+import clsx from 'clsx';
 import React from 'react';
 
 import { buildMessages, storeMessages } from '../../Molecules/Messages';
 
 export function BlockForm(
   props: BlockFormFragment & {
+    className?: string;
     // For Storybook.
     cssStylesToInject?: string;
   },
@@ -17,7 +19,7 @@ export function BlockForm(
   }
 
   return (
-    <div className="mt-16 mx-auto max-w-3xl">
+    <div className={clsx('mx-auto max-w-3xl', props.className)}>
       <SilverbackIframe
         src={props.url}
         buildMessages={buildMessages}

diff --git a/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx b/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx
@@ -43,7 +43,7 @@ export function BlockMarkup(props: BlockMarkupFragment) {
                 className={clsx(className, { 'list-none relative': unordered })}
               >
                 {unordered ? (
-                  <ArrowRightCircleIcon className="w-6 h-6 absolute mt-0.5 left-[-1.5em] text-indigo-600" />
+                  <ArrowRightCircleIcon className="not-prose w-6 h-6 absolute mt-1.5 left-[-1.5em] text-indigo-600" />
                 ) : null}
                 {children}
               </li>

diff --git a/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx b/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx
@@ -13,7 +13,7 @@ export function BlockMedia(props: BlockMediaFragment) {
       <figure className="mt-16 mx-auto max-w-3xl">
         <Media {...props.media} />
         {props.caption ? (
-          <figcaption className="mt-4 flex gap-x-2 text-sm leading-6 text-gray-500">
+          <figcaption className="mt-3 flex justify-center gap-x-2 text-sm leading-6 text-gray-500">
             <Html markup={props.caption} />
           </figcaption>
         ) : null}
@@ -27,7 +27,7 @@ function Media(props: Required<BlockMediaFragment>['media']) {
     case 'MediaImage':
       return (
         <Image
-          className="rounded-xl max-w-full mx-auto"
+          className="max-w-full mx-auto"
           source={props.source}
           alt={props.alt}
         />

diff --git a/packages/ui/src/components/Organisms/PageHero.tsx b/packages/ui/src/components/Organisms/PageHero.tsx
@@ -1,9 +1,21 @@
 import { Image, Link, PageFragment } from '@custom/schema';
 import React from 'react';
 
+import { BlockForm } from './PageContent/BlockForm';
+
 export function PageHero(props: NonNullable<PageFragment['hero']>) {
+  return props.formUrl ? (
+    <FormHero {...props} />
+  ) : props.image ? (
+    <DefaultHero {...props} />
+  ) : (
+    <NoImageHero {...props} />
+  );
+}
+
+function DefaultHero(props: NonNullable<PageFragment['hero']>) {
   return (
-    <div className="relative isolate overflow-hidden bg-gray-900 py-24 sm:py-32">
+    <section className="relative isolate overflow-hidden bg-gray-900 py-24 sm:py-32">
       {props.image ? (
         <Image
           alt={props.image.alt}
@@ -13,33 +25,9 @@ export function PageHero(props: NonNullable<PageFragment['hero']>) {
           data-test-id={'hero-image'}
         />
       ) : null}
-      <div
-        className="hidden sm:absolute sm:-top-10 sm:right-1/2 sm:-z-10 sm:mr-10 sm:block sm:transform-gpu sm:blur-3xl"
-        aria-hidden="true"
-      >
-        <div
-          className="aspect-[1097/845] w-[68.5625rem] bg-gradient-to-tr from-[#ff4694] to-[#776fff] opacity-20"
-          style={{
-            clipPath:
-              'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-          }}
-        />
-      </div>
-      <div
-        className="absolute -top-52 left-1/2 -z-10 -translate-x-1/2 transform-gpu blur-3xl sm:top-[-28rem] sm:ml-16 sm:translate-x-0 sm:transform-gpu"
-        aria-hidden="true"
-      >
-        <div
-          className="aspect-[1097/845] w-[68.5625rem] bg-gradient-to-tr from-[#ff4694] to-[#776fff] opacity-20"
-          style={{
-            clipPath:
-              'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-          }}
-        />
-      </div>
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-2xl lg:mx-0">
-          <h1 className="text-4xl font-bold tracking-tight text-white sm:text-6xl">
+          <h1 className="max-w-xl text-5xl font-extrabold tracking-tight leading-tight text-white">
             {props.headline}
           </h1>
           {props.lead ? (
@@ -48,15 +36,116 @@ export function PageHero(props: NonNullable<PageFragment['hero']>) {
           {props.ctaText && props.ctaUrl ? (
             <Link
               href={props.ctaUrl}
-              className={
-                'mt-7 inline-block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800'
-              }
+              className="mt-7 px-5 py-2.5 text-sm font-medium text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+            >
+              <svg
+                className="mr-2 -ml-1 w-4 h-4"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                  clipRule="evenodd"
+                ></path>
+              </svg>
+              {props.ctaText}
+            </Link>
+          ) : null}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function FormHero(props: NonNullable<PageFragment['hero']>) {
+  return (
+    <section>
+      <div className="relative isolate overflow-hidden bg-gray-900 py-24">
+        {props.image ? (
+          <Image
+            alt={props.image.alt}
+            source={props.image.source}
+            priority={true}
+            className="absolute inset-0 -z-10 h-full w-full object-cover"
+            data-test-id={'hero-image'}
+          />
+        ) : null}
+
+        <div className="px-4 lg:pt-24 pt-8 pb-72 lg:pb-80 mx-auto max-w-screen-sm text-center lg:px-6 ">
+          <h1 className="text-4xl tracking-tight font-extrabold text-white">
+            {props.headline}
+          </h1>
+          {props.lead ? (
+            <p className="mt-6 text-lg leading-4 text-gray-300">{props.lead}</p>
+          ) : null}
+          {props.ctaText && props.ctaUrl ? (
+            <Link
+              href={props.ctaUrl}
+              className="mt-7 px-5 py-2.5 text-sm font-medium text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+            >
+              <svg
+                className="mr-2 -ml-1 w-4 h-4"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                  clipRule="evenodd"
+                ></path>
+              </svg>
+              {props.ctaText}
+            </Link>
+          ) : null}
+        </div>
+      </div>
+      {props.formUrl ? (
+        <div className="px-4 mx-auto mt-[-22rem] lg:-mt-96 max-w-screen-xl lg:px-6 relative">
+          <div className="p-6 mx-auto max-w-screen-md bg-white rounded-lg border border-gray-200 shadow-sm">
+            <BlockForm url={props.formUrl} />
+          </div>
+        </div>
+      ) : null}
+    </section>
+  );
+}
+
+function NoImageHero(props: NonNullable<PageFragment['hero']>) {
+  return (
+    <section className="relative isolate overflow-hidden py-12 sm:py-20 sm:pb-12 px-6 lg:px-8">
+      <div className="mx-auto max-w-3xl">
+        <div className="max-w-2xl lg:mx-0">
+          <h1 className="max-w-xl text-5xl font-extrabold tracking-tight leading-tight">
+            {props.headline}
+          </h1>
+          {props.lead ? (
+            <p className="mt-6 text-lg leading-8 text-gray-500">{props.lead}</p>
+          ) : null}
+          {props.ctaText && props.ctaUrl ? (
+            <Link
+              href={props.ctaUrl}
+              className="mt-7 px-5 py-2.5 text-sm font-medium text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
             >
+              <svg
+                className="mr-2 -ml-1 w-4 h-4"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                  clipRule="evenodd"
+                ></path>
+              </svg>
               {props.ctaText}
             </Link>
           ) : null}
         </div>
       </div>
-    </div>
+    </section>
   );
 }
diff --git a/packages/ui/src/components/Routes/Page.stories.tsx b/packages/ui/src/components/Routes/Page.stories.tsx
@@ -42,6 +42,9 @@ export const Default = {
       path: '/test' as Url,
       hero: {
         headline: 'Page Hero Headline',
+        lead: 'A longer lead text that even might break into multiple lines.',
+        ctaUrl: '/test' as Url,
+        ctaText: 'Call to action',
       },
       content: [
         {
@@ -80,3 +83,24 @@ export const FullHero = {
     },
   },
 } satisfies StoryObj<ViewPageQuery>;
+
+export const FormHero = {
+  ...Default,
+  args: {
+    ...Default.args,
+    page: {
+      ...Default.args.page,
+      hero: {
+        headline: 'Page Hero Headline',
+        lead: 'A longer lead text that even might break into multiple lines.',
+        image: {
+          source: image(Landscape, { width: 2000 }),
+          alt: 'Stock photo landscape hero.',
+        },
+        ctaUrl: '/test' as Url,
+        ctaText: 'Call to action',
+        formUrl: 'webforms/error/index.html' as Url,
+      },
+    },
+  },
+} satisfies StoryObj<ViewPageQuery>;
diff --git a/tests/e2e/specs/drupal/blocks.spec.ts b/tests/e2e/specs/drupal/blocks.spec.ts
@@ -56,8 +56,7 @@ test('All blocks are rendered', async ({ page }) => {
   );
 
   // Form
-  await expect(page.locator('.silverback-iframe iframe')).toHaveAttribute(
-    'src',
-    'http://127.0.0.1:8000/en/form/contact?iframe=true',
-  );
+  await expect(
+    page.locator('.silverback-iframe iframe').last(),
+  ).toHaveAttribute('src', 'http://127.0.0.1:8000/en/form/contact?iframe=true');
 });