diff --git a/packages/ui/src/components/Organisms/PageContent/BlockForm.stories.tsx b/packages/ui/src/components/Organisms/PageContent/BlockForm.stories.tsx index 9d255cea9..4b9471c37 100644 --- 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; diff --git a/packages/ui/src/components/Organisms/PageContent/BlockForm.tsx b/packages/ui/src/components/Organisms/PageContent/BlockForm.tsx index 6746edfc5..8ee6770a1 100644 --- 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 ( -
+
) { + return props.formUrl ? : ; +} + +function DefaultHero(props: NonNullable) { return ( -
+
{props.image ? ( {props.image.alt}) { ) : null}
-
+ + ); +} + +function FormHero(props: NonNullable) { + return ( +
+
+ {props.image ? ( + {props.image.alt} + ) : null} + +
+

+ {props.headline} +

+ {props.lead ? ( +

{props.lead}

+ ) : null} + {props.ctaText && props.ctaUrl ? ( + + {props.ctaText} + + ) : null} +
+
+ {props.formUrl ? ( +
+
+ +
+
+ ) : null} +
); } diff --git a/packages/ui/src/components/Routes/Page.stories.tsx b/packages/ui/src/components/Routes/Page.stories.tsx index dc50f159d..6bdb98a5e 100644 --- a/packages/ui/src/components/Routes/Page.stories.tsx +++ b/packages/ui/src/components/Routes/Page.stories.tsx @@ -80,3 +80,24 @@ export const FullHero = { }, }, } satisfies StoryObj; + +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; diff --git a/tests/e2e/specs/drupal/blocks.spec.ts b/tests/e2e/specs/drupal/blocks.spec.ts index 22c58036a..ec7dc6a1b 100644 --- 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'); }); diff --git a/tests/e2e/specs/drupal/webforms.spec.ts b/tests/e2e/specs/drupal/webforms.spec.ts index d4fb48a29..d099cd505 100644 --- a/tests/e2e/specs/drupal/webforms.spec.ts +++ b/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.