chore(SLB-272): extend styling webform with terms-of-service components

packages/drupal/test_content/webforms/styling.yml

@@ -30,6 +30,7 @@ elements: |-
     '#title': Textfield
     '#description': 'Textfield description.'
     '#placeholder': 'Placeholder goes here'
+    '#required': true
   email_with_a_conformation:
     '#type': webform_email_confirm
     '#title': 'Email with a confirmation'
@@ -56,6 +57,22 @@ elements: |-
       Foo: Foo
       Bar: Bar
       Baz: Baz
+  terms_of_service:
+    '#type': webform_terms_of_service
+    '#title': 'I agree to the {terms of service} in modal'
+    '#required': true
+    '#terms_content': |-
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a felis convallis, pharetra mauris a, eleifend justo. Sed massa ipsum, suscipit sit amet varius a, dignissim at ex. Integer euismod a sapien id auctor. Etiam dignissim scelerisque nunc in porttitor. Nam rutrum molestie mauris, a bibendum ligula. Etiam eget posuere enim. Quisque id condimentum ligula.
+
+      Duis sit amet sapien justo. Suspendisse potenti. Aliquam venenatis congue quam, quis eleifend tellus. Duis aliquam sollicitudin purus sed rutrum. Nullam vitae ante lorem. Curabitur malesuada nibh lectus, ut ultricies elit mattis sed. Ut pharetra urna nec lacus pellentesque vestibulum. Nulla turpis sem, aliquam finibus pharetra at, interdum sit amet ligula. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce ullamcorper justo in risus condimentum suscipit. Nam in nunc sit amet neque fringilla suscipit. Sed nec metus tempus, rhoncus dolor et, vehicula urna. Donec ultricies leo pharetra ante vulputate vulputate. Nullam tincidunt pharetra nisi eu faucibus. Duis efficitur, massa eget sagittis sodales, magna dolor dapibus justo, et facilisis tellus augue et est.
+  terms_of_service_01:
+    '#type': webform_terms_of_service
+    '#title': 'I agree to the {terms of service} in slideout'
+    '#terms_type': slideout
+    '#terms_content': |-
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a felis convallis, pharetra mauris a, eleifend justo. Sed massa ipsum, suscipit sit amet varius a, dignissim at ex. Integer euismod a sapien id auctor. Etiam dignissim scelerisque nunc in porttitor. Nam rutrum molestie mauris, a bibendum ligula. Etiam eget posuere enim. Quisque id condimentum ligula.
+
+      Duis sit amet sapien justo. Suspendisse potenti. Aliquam venenatis congue quam, quis eleifend tellus. Duis aliquam sollicitudin purus sed rutrum. Nullam vitae ante lorem. Curabitur malesuada nibh lectus, ut ultricies elit mattis sed. Ut pharetra urna nec lacus pellentesque vestibulum. Nulla turpis sem, aliquam finibus pharetra at, interdum sit amet ligula. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce ullamcorper justo in risus condimentum suscipit. Nam in nunc sit amet neque fringilla suscipit. Sed nec metus tempus, rhoncus dolor et, vehicula urna. Donec ultricies leo pharetra ante vulputate vulputate. Nullam tincidunt pharetra nisi eu faucibus. Duis efficitur, massa eget sagittis sodales, magna dolor dapibus justo, et facilisis tellus augue et est.
   actions:
     '#type': webform_actions
     '#title': 'Submit button(s)'

packages/ui/src/components/Organisms/PageContent/BlockForm.stories.tsx

@@ -21,3 +21,17 @@ export const Error = {
     cssStylesToInject: cmsCss,
   },
 } satisfies StoryObj<typeof BlockForm>;
+
+export const TermsOfServiceModal = {
+  args: {
+    url: 'webforms/terms-of-service-modal/index.html' as Url,
+    cssStylesToInject: cmsCss,
+  },
+} satisfies StoryObj<typeof BlockForm>;
+
+export const TermsOfServiceSlideout = {
+  args: {
+    url: 'webforms/terms-of-service-slideout/index.html' as Url,
+    cssStylesToInject: cmsCss,
+  },
+} satisfies StoryObj<typeof BlockForm>;

tests/e2e/tsconfig.json

@@ -3,7 +3,7 @@
     "strict": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
-    "lib": ["es2015"],
+    "lib": ["es2015", "DOM"],
     "types": ["node"]
   }
 }

tests/e2e/webform-snapshots/webforms.spec.ts

@@ -13,17 +13,53 @@ test('Export webforms for styling', async ({ page }) => {
 
   const baseUrl = cmsUrl('/en/form/styling?iframe=true&no_css=true');
 
+  page.setViewportSize({
+    // In the frontend the form is wrapped into a div with max-w-3xl class,
+    // which translates to 48 rem, which is 768 px. Roughly.
+    // We try to match the width because the modal is centered dynamically by
+    // Drupal JS, but then, when we save the page, the size and position are
+    // fixed in the HTML.
+    width: 768,
+    // Does not matter.
+    height: 768,
+  });
+
   await page.goto(baseUrl);
   await expect(page.locator(iframeResizerSelector)).toHaveCount(1);
   await savePage(page, 'idle');
 
+  // Disable frontend validation.
+  await page.evaluate(() => {
+    document.querySelectorAll('[required]').forEach((element) => {
+      element.removeAttribute('required');
+    });
+  });
+
   await page.getByLabel('Email with a confirmation').fill('asd@asd');
   await page.getByRole('button', { name: 'Submit' }).click();
   await expect(
     page.locator('[data-drupal-messages] [role="alert"]'),
   ).toBeVisible();
   await expect(page.locator(iframeResizerSelector)).toHaveCount(1);
   await savePage(page, 'error');
+
+  await page.goto(baseUrl);
+  await page
+    .locator('label')
+    .filter({ hasText: 'I agree to the terms of service in modal' })
+    .getByRole('button')
+    .click();
+  await page.waitForTimeout(500);
+  await savePage(page, 'terms-of-service-modal');
+
+  await page.goto(baseUrl);
+  await page
+    .locator('label')
+    .filter({ hasText: 'I agree to the terms of service in slideout' })
+    .getByRole('button')
+    .click();
+  await page.waitForTimeout(500);
+  await savePage(page, 'terms-of-service-slideout');
 });
 
 async function savePage(page: Page, name: string) {