From 8ebbe42fcaf1c7d095071ef3adfb79c0ad4baf31 Mon Sep 17 00:00:00 2001 From: Mattia Simonato Date: Thu, 11 Apr 2024 16:49:13 +0200 Subject: [PATCH 1/4] feat(SLB-304): extend BlockForm to accept className as a prop --- .../components/Organisms/PageContent/BlockForm.stories.tsx | 1 + .../ui/src/components/Organisms/PageContent/BlockForm.tsx | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) 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 ( -
+
Date: Thu, 11 Apr 2024 16:50:52 +0200 Subject: [PATCH 2/4] feat(SLB-304): implement form section into PageHero --- .../ui/src/components/Organisms/PageHero.tsx | 54 ++++++++++++++++++- 1 file changed, 52 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/components/Organisms/PageHero.tsx b/packages/ui/src/components/Organisms/PageHero.tsx index a90c9e778..be2e4cc8a 100644 --- a/packages/ui/src/components/Organisms/PageHero.tsx +++ b/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) { + 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} +
); } From cb2813625b2014ac27b8026323f351eaed637397 Mon Sep 17 00:00:00 2001 From: Mattia Simonato Date: Thu, 11 Apr 2024 16:51:15 +0200 Subject: [PATCH 3/4] feat(SLB-304): create dedicated stories for form on hero --- .../ui/src/components/Routes/Page.stories.tsx | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) 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; From 9e424466171c888f3c76a8dc1417e4c067e9e0c0 Mon Sep 17 00:00:00 2001 From: Philipp Melab Date: Tue, 16 Apr 2024 09:52:21 +0200 Subject: [PATCH 4/4] fix(SLB-304): pick specific form in integration tests --- tests/e2e/specs/drupal/blocks.spec.ts | 7 +++---- tests/e2e/specs/drupal/webforms.spec.ts | 2 ++ 2 files changed, 5 insertions(+), 4 deletions(-) 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.