SLB-304: Hero form

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>;

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}

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

@@ -1,9 +1,15 @@
 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} /> : <DefaultHero {...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}
@@ -57,6 +63,50 @@ export function PageHero(props: NonNullable<PageFragment['hero']>) {
           ) : null}
         </div>
       </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="mb-4 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 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'
+              }
+            >
+              {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>
   );
 }

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

@@ -80,3 +80,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>;

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');
 });

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

@@ -8,6 +8,7 @@ test('Webforms work', async ({ page }) => {
   // Webform can be submitted.
   await page
     .frameLocator('.silverback-iframe iframe')
+    .last()
     .getByRole('button', { name: 'Send message' })
     .click();
 
@@ -29,6 +30,7 @@ test('Webforms work', async ({ page }) => {
   await page.goto(websiteUrl('/de/blocks-complete'));
   await page
     .frameLocator('.silverback-iframe iframe')
+    .last()
     .getByRole('button', { name: 'Send message' })
     .click();
   // TODO: Find out why it does not work.