diff --git a/src/components/bcl-table/table.html.twig b/src/components/bcl-table/table.html.twig index d2b9efa0f..5133221a9 100644 --- a/src/components/bcl-table/table.html.twig +++ b/src/components/bcl-table/table.html.twig @@ -110,9 +110,17 @@ {%- endif -%} {% if _table_head is not empty %} + {% set _table_head_classes = '' %} + {% if _table_head.variant is not empty %} + {% set _table_head_classes = 'table-' ~ _table_head.variant %} + {% endif %} {% if _table_head.cells is not empty and _table_head.cells is iterable %} - + {% for _cell in _table_head.cells %} {% if _table_footer.cells is not empty and _table_footer.cells is iterable %} - + {% for _cell in _table_footer.cells %} +
+ + + + + + +
+ +
+
+ + +
+
+ +
+
+
+
+
+
+ alt img +
+
+
+

+ This is the title of this page +

+
+ + 17 October 2019 + +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. +
+ Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa. +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. +
+
+ Duis fermentum facilisis ex, ac porta massa. +

+
+ + Category 1 + + + Category 2 + +
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +`; + +exports[`OE - Subscription email confirmed renders correctly 1`] = ` + +
+ + + + + + +
+ +
+
+ + +
+
+ +
+
+
+
+
+
+ alt img +
+
+
+

+ This is the title of this page +

+
+ + 17 October 2019 + +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. +
+ Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa. +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. +
+
+ Duis fermentum facilisis ex, ac porta massa. +

+
+ + Category 1 + + + Category 2 + +
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +`; + +exports[`OE - Subscription email form renders correctly 1`] = ` + +
+ + + + + + +
+ +
+
+ + +
+
+
+
+
+
+
+

+ Manage your subscriptions +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. +
+ Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa. +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa. +

+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+ +
+
+
+
+
+
+ + +`; + +exports[`OE - Subscription manage form renders correctly 1`] = ` + +
+ + + + + + +
+ +
+
+ + +
+
+
+
+
+
+
+

+ Manage your subscriptions +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. +
+ Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa. +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa. +

+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+ + +
+ Notification frequency +
+
+
+ + Your content subscription + +
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+

+ Your content subscription to specific page +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + TITLE + + OPERATIONS +
+ + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + +
+ + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + +
+ + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + +
+ + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + +
+ +
+
+
+
+ + +`; + +exports[`OE - Subscription modal renders correctly 1`] = `
- Subscribe + Subscribe to [the title of the page/content]
- -
+

+ By subscribing to the updates of [the title of the page/content], you will be notified whenever changes are made. +

-
- -

- Please enter your information & preference to receive the wished information in your mailbox. Your email will not be shared with anyone. -

- -
-
- Please enter a valid e-mail address -
-
-
- - -
- Please select a language -
- By checking this box, I confirm that I want to register for this service, and I agree with the + I have read and agree with the - privacy statement + data protection terms
+
-
diff --git a/src/compositions/bcl-subscription/data/data--email-form.js b/src/compositions/bcl-subscription/data/data--email-form.js new file mode 100644 index 000000000..17e001b25 --- /dev/null +++ b/src/compositions/bcl-subscription/data/data--email-form.js @@ -0,0 +1,24 @@ +const drupalAttribute = require("drupal-attribute"); + +module.exports = { + form: { + attributes: new drupalAttribute().addClass("needs-validation"), + submit: { + wrapper: "col-12", + label: "Enter", + type: "submit", + variant: "primary", + }, + items: [ + [ + { + classes: "mb-4-5", + input_type: "email", + required: true, + label: "Your email", + placeholder: "Type in your e-mail address", + }, + ], + ], + }, +}; diff --git a/src/compositions/bcl-subscription/data/data--form.js b/src/compositions/bcl-subscription/data/data--form.js new file mode 100644 index 000000000..49e4f5a89 --- /dev/null +++ b/src/compositions/bcl-subscription/data/data--form.js @@ -0,0 +1,98 @@ +const drupalAttribute = require("drupal-attribute"); + +module.exports = { + id: "subscribeModal", + header: + '
Subscribe
', + footer: + '
' + + '' + + '' + + "
", + form: { + attributes: new drupalAttribute() + .addClass("needs-validation") + .setAttribute("novalidate", true) + .setAttribute("onsubmit", "return false;"), + items: [ + [ + { + legend_classes: "h6 fw-normal mb-0", + type: "fieldset", + legend: + "

Please enter your information & preference to receive the wished information in your mailbox. Your email will not be shared with anyone.

", + }, + ], + [ + { + classes: "mb-3", + input_type: "email", + required: true, + label: "E-mail", + invalid_feedback: "Please enter a valid e-mail address", + placeholder: "Type in your e-mail address", + }, + ], + [ + { + classes: "mb-3", + type: "select", + label: "Languages", + required: true, + invalid_feedback: "Please select a language", + id: "language-select", + options: [ + { + label: "Please select a language", + selected: true, + disabled: true, + value: "", + hidden: true, + }, + { value: 1, label: "a select option" }, + { value: 2, label: "another select option" }, + { value: 3, label: "another option" }, + { value: 4, label: "last option" }, + ], + }, + ], + [ + { + input_type: "checkbox", + classes: "mb-3", + required: true, + label: + "By checking this box, I confirm that I want to register for this service, and I agree with the privacy statement", + id: "exampleInputCheck1", + invalid_feedback: "Please check the required checkbox.", + }, + ], + ], + }, + success_alert: { + message: + "Your subscription has been successfully registered. You can now close this dialog.", + heading: "Thank you!", + icon_path: "/icons.svg", + variant: "success", + attributes: new drupalAttribute().addClass([ + "success-alert", + "d-none", + "mb-0", + ]), + dismissible: false, + }, + error_alert: { + message: + "There was an error!

Please verify your e-mail address and agree with the privacy statement.

", + heading: "Sorry!", + icon_path: "/icons.svg", + variant: "danger", + dismissible: false, + attributes: new drupalAttribute().addClass([ + "error-alert", + "d-none", + "mb-0", + ]), + }, +}; diff --git a/src/compositions/bcl-subscription/data/data--manage-form.js b/src/compositions/bcl-subscription/data/data--manage-form.js new file mode 100644 index 000000000..27f695b37 --- /dev/null +++ b/src/compositions/bcl-subscription/data/data--manage-form.js @@ -0,0 +1,144 @@ +const drupalAttribute = require("drupal-attribute"); +const { getDummyText } = require("@openeuropa/bcl-data-utils"); + +module.exports = { + form: { + attributes: new drupalAttribute().addClass("needs-validation"), + items: [ + [ + { + classes: "mb-4 col-lg-4", + input_type: "email", + required: true, + label: "Your email", + placeholder: "Placeholder", + }, + ], + [ + { + classes: "mb-4 col-lg-4", + type: "select", + label: "Languages", + required: true, + invalid_feedback: "Notification frequency", + id: "language-select", + options: [ + { value: 1, label: "Daily", selected: true }, + { value: 2, label: "another select option" }, + { value: 3, label: "another option" }, + { value: 4, label: "last option" }, + ], + }, + ], + [ + { + type: "fieldset", + classes: "col-sm-10", + legend: "Your content subscription", + legend_classes: "col-form-label", + }, + { + input_type: "checkbox", + label: "First check", + id: "exampleInputRadios1", + value: "option1", + wrapper_classes: "mb-3", + }, + { + input_type: "checkbox", + label: "Second check", + id: "exampleInputRadios2", + value: "option2", + wrapper_classes: "mb-3", + }, + { + input_type: "checkbox", + label: "Third check", + id: "exampleInputRadios3", + value: "option3", + wrapper_classes: "mb-4", + }, + ], + ], + }, + table: { + alignment: "middle", + table_head: { + variant: "light", + cells: [ + { + content: "", + }, + { + content: "TITLE", + }, + { + content: "OPERATIONS", + }, + ], + }, + rows: [ + { + cells: [ + { + content: "", + }, + { + content: getDummyText(1), + }, + { + content: + '', + }, + ], + }, + { + cells: [ + { + content: "", + }, + { + content: getDummyText(1), + }, + { + content: + '', + }, + ], + }, + { + cells: [ + { + content: "", + }, + { + content: getDummyText(1), + }, + { + content: + '', + }, + ], + }, + { + cells: [ + { + content: "", + }, + { + content: getDummyText(1), + }, + { + content: + '', + }, + ], + }, + ], + }, + submit: { + label: "Save changes", + type: "submit", + attributes: new drupalAttribute().addClass("mt-4"), + }, +}; diff --git a/src/compositions/bcl-subscription/data/data--modal.js b/src/compositions/bcl-subscription/data/data--modal.js index 49e4f5a89..9e499e31b 100644 --- a/src/compositions/bcl-subscription/data/data--modal.js +++ b/src/compositions/bcl-subscription/data/data--modal.js @@ -2,12 +2,13 @@ const drupalAttribute = require("drupal-attribute"); module.exports = { id: "subscribeModal", + size: "lg", header: - '
Subscribe
', + '
Subscribe to [the title of the page/content]
', footer: + '' + '
' + - '' + - '' + + '' + "
", form: { attributes: new drupalAttribute() @@ -17,43 +18,11 @@ module.exports = { items: [ [ { - legend_classes: "h6 fw-normal mb-0", - type: "fieldset", - legend: - "

Please enter your information & preference to receive the wished information in your mailbox. Your email will not be shared with anyone.

", - }, - ], - [ - { - classes: "mb-3", + classes: "mb-4", input_type: "email", required: true, - label: "E-mail", - invalid_feedback: "Please enter a valid e-mail address", - placeholder: "Type in your e-mail address", - }, - ], - [ - { - classes: "mb-3", - type: "select", - label: "Languages", - required: true, - invalid_feedback: "Please select a language", - id: "language-select", - options: [ - { - label: "Please select a language", - selected: true, - disabled: true, - value: "", - hidden: true, - }, - { value: 1, label: "a select option" }, - { value: 2, label: "another select option" }, - { value: 3, label: "another option" }, - { value: 4, label: "last option" }, - ], + label: "Your email", + placeholder: "Enter your email address", }, ], [ @@ -62,37 +31,11 @@ module.exports = { classes: "mb-3", required: true, label: - "By checking this box, I confirm that I want to register for this service, and I agree with the privacy statement", + "I have read and agree with the data protection terms", id: "exampleInputCheck1", invalid_feedback: "Please check the required checkbox.", }, ], ], }, - success_alert: { - message: - "Your subscription has been successfully registered. You can now close this dialog.", - heading: "Thank you!", - icon_path: "/icons.svg", - variant: "success", - attributes: new drupalAttribute().addClass([ - "success-alert", - "d-none", - "mb-0", - ]), - dismissible: false, - }, - error_alert: { - message: - "There was an error!

Please verify your e-mail address and agree with the privacy statement.

", - heading: "Sorry!", - icon_path: "/icons.svg", - variant: "danger", - dismissible: false, - attributes: new drupalAttribute().addClass([ - "error-alert", - "d-none", - "mb-0", - ]), - }, }; diff --git a/src/compositions/bcl-subscription/data/data.js b/src/compositions/bcl-subscription/data/data.js index 2bb77ea82..e2da6f4ef 100644 --- a/src/compositions/bcl-subscription/data/data.js +++ b/src/compositions/bcl-subscription/data/data.js @@ -6,9 +6,13 @@ import { import isChromatic from "chromatic/isChromatic"; import content from "@openeuropa/bcl-news/data/data--content"; +import contentEmailForm from "@openeuropa/bcl-subscription/data/data--email-form"; +import contentManageForm from "@openeuropa/bcl-subscription/data/data--manage-form"; import blockData from "@openeuropa/bcl-subscription-block/data"; import modalData from "@openeuropa/bcl-subscription/data/data--modal"; +const { getDummyText } = require("@openeuropa/bcl-data-utils"); + const chromatic = process.env.STORYBOOK_ENV; const header = @@ -42,4 +46,81 @@ const demoData = { content, }; -export default demoData; +const demoDataEmailForm = { + content_type: "subscription", + title: "Subscription", + header, + footer: layout.footer, + with_banner: true, + with_header: true, + with_footer: true, + banner: { + title: "Manage your subscriptions", + background: "gray", + content: getDummyText(4, true), + }, + ...contentEmailForm, +}; + +const demoDataEmailConfirmationForm = { + content_type: "subscription", + title: "Subscription", + header, + footer: layout.footer, + with_banner: true, + with_header: true, + with_footer: true, + banner, + messages: [ + { + message: + "

To confirm your subscription, please click on the confirmation link sent to your e-mail address.

It is possible to unsubscribe from the list at any time by clicking on the unsubscribe me link included in the email.

", + heading: "A confirmation email has been sent to your email address. ", + icon_path: "/icons.svg", + variant: "warning", + }, + ], +}; + +const demoDataEmailConfirmedForm = { + content_type: "subscription", + title: "Subscription", + header, + footer: layout.footer, + with_banner: true, + with_header: true, + with_footer: true, + banner, + messages: [ + { + heading: "Your email has been confirmed!", + icon_path: "/icons.svg", + variant: "success", + }, + ], +}; + +const demoDataManageForm = { + content_type: "subscription", + title: "Subscription", + header, + footer: layout.footer, + with_banner: true, + with_header: true, + with_footer: true, + landing: true, + banner: { + title: "Manage your subscriptions", + background: "gray", + content: getDummyText(4, true), + }, + ...contentManageForm, +}; + +export { + demoData, + demoDataEmailForm, + demoDataEmailConfirmationForm, + demoDataEmailConfirmedForm, + demoDataManageForm, +}; diff --git a/src/compositions/bcl-subscription/subscription-form.html.twig b/src/compositions/bcl-subscription/subscription-form.html.twig new file mode 100644 index 000000000..69c354957 --- /dev/null +++ b/src/compositions/bcl-subscription/subscription-form.html.twig @@ -0,0 +1,14 @@ +{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %} + +{% block content %} + {% if form is not empty %} + {% include '@oe-bcl/bcl-form/form.html.twig' with form only %} + {% endif %} + {% if table is defined %} +

Your content subscription to specific page

+ {% include '@oe-bcl/bcl-table/table.html.twig' with table only %} + {% endif %} + {% if submit is defined %} + {% include '@oe-bcl/bcl-button/button.html.twig' with submit only %} + {% endif %} +{% endblock %} diff --git a/src/compositions/bcl-subscription/subscription-modal.html.twig b/src/compositions/bcl-subscription/subscription-modal.html.twig index 7a8cd3dd6..ee485be7e 100644 --- a/src/compositions/bcl-subscription/subscription-modal.html.twig +++ b/src/compositions/bcl-subscription/subscription-modal.html.twig @@ -11,14 +11,8 @@ #} {% set _form = form|default({}) %} -{% set _success_alert = success_alert|default({}) %} -{% set _error_alert = error_alert|default({}) %} {% block body %} +

By subscribing to the updates of [the title of the page/content], you will be notified whenever changes are made.

{% include '@oe-bcl/bcl-form/form.html.twig' with _form only %} {% endblock %} - -{% block messages %} - {% include '@oe-bcl/bcl-alert/alert.html.twig' with _success_alert only %} - {% include '@oe-bcl/bcl-alert/alert.html.twig' with _error_alert only %} -{% endblock %} diff --git a/src/compositions/bcl-subscription/subscription.story.js b/src/compositions/bcl-subscription/subscription.story.js index 2070ed0a6..6cbc46cb0 100644 --- a/src/compositions/bcl-subscription/subscription.story.js +++ b/src/compositions/bcl-subscription/subscription.story.js @@ -2,10 +2,21 @@ import { withDesign } from "storybook-addon-designs"; import withCode from "@openeuropa/storybook-addon-code"; import { within, userEvent } from "@storybook/testing-library"; import isChromatic from "chromatic/isChromatic"; -import { correctPaths, initScrollspy } from "@openeuropa/bcl-story-utils"; +import { + correctPaths, + initScrollspy, + initListings, +} from "@openeuropa/bcl-story-utils"; -import demoData from "@openeuropa/bcl-subscription/data/data"; +import { + demoData, + demoDataEmailForm, + demoDataEmailConfirmationForm, + demoDataEmailConfirmedForm, + demoDataManageForm, +} from "@openeuropa/bcl-subscription/data/data"; import subscriptionPage from "@openeuropa/bcl-subscription/subscription.html.twig"; +import subscriptionForm from "@openeuropa/bcl-subscription/subscription-form.html.twig"; const chromatic = process.env.STORYBOOK_ENV; @@ -41,53 +52,6 @@ const clientValidation = (story) => { ${demo}`; }; -const openModal = (story) => { - const demo = story(); - return ` - ${demo} - - `; -}; - -const successState = (story) => { - const demo = story(); - return ` - ${demo} - - `; -}; - -const errorState = (story) => { - const demo = story(); - return ` - ${demo} - - `; -}; - export default { title: "Features/Subscription", decorators: [withCode, withDesign, initScrollspy], @@ -105,11 +69,11 @@ export default { }, }; -export const Default = () => subscriptionPage(correctPaths(demoData)); -Default.decorators = [clientValidation]; +export const ModalOpened = () => subscriptionPage(correctPaths(demoData)); +ModalOpened.decorators = [clientValidation]; if (isChromatic() || chromatic) { - Default.play = async ({ canvasElement }) => { + ModalOpened.play = async ({ canvasElement }) => { const canvas = within(canvasElement); const button = canvas.getAllByText("Subscribe", { selector: "button", @@ -118,26 +82,51 @@ if (isChromatic() || chromatic) { }; } -export const SuccessState = () => subscriptionPage(correctPaths(demoData)); -SuccessState.decorators = [openModal, successState]; -SuccessState.parameters = { +export const EmailForm = () => + subscriptionForm(correctPaths(demoDataEmailForm)); +EmailForm.parameters = { + design: [ + { + name: "Mockup", + type: "figma", + url: "https://www.figma.com/file/G8nR0RrtGWypLbdv9VXElT/BCL-Features---03?node-id=16828%3A142290&t=9asTp1JeDni0qsE4-0", + }, + ], +}; + +export const EmailConfirmation = () => + subscriptionForm(correctPaths(demoDataEmailConfirmationForm)); +EmailConfirmation.parameters = { + design: [ + { + name: "Mockup", + type: "figma", + url: "https://www.figma.com/file/G8nR0RrtGWypLbdv9VXElT/BCL-Features---03?node-id=16828%3A142290&t=9asTp1JeDni0qsE4-0", + }, + ], +}; + +export const EmailConfirmed = () => + subscriptionForm(correctPaths(demoDataEmailConfirmedForm)); +EmailConfirmed.parameters = { design: [ { name: "Mockup", type: "figma", - url: "https://www.figma.com/file/NQlGvTiTXZYN8TwY2Ur5EI/BCL-Features?node-id=10449%3A244564", + url: "https://www.figma.com/file/G8nR0RrtGWypLbdv9VXElT/BCL-Features---03?node-id=16828%3A142290&t=9asTp1JeDni0qsE4-0", }, ], }; -export const ErrorState = () => subscriptionPage(correctPaths(demoData)); -ErrorState.decorators = [openModal, errorState]; -ErrorState.parameters = { +export const ManageForm = () => + subscriptionForm(correctPaths(demoDataManageForm)); +ManageForm.decorators = [initListings]; +ManageForm.parameters = { design: [ { name: "Mockup", type: "figma", - url: "https://www.figma.com/file/NQlGvTiTXZYN8TwY2Ur5EI/BCL-Features?node-id=10449%3A244562", + url: "https://www.figma.com/file/G8nR0RrtGWypLbdv9VXElT/BCL-Features---03?node-id=16828%3A142290&t=9asTp1JeDni0qsE4-0", }, ], }; diff --git a/src/compositions/bcl-subscription/subscription.test.js b/src/compositions/bcl-subscription/subscription.test.js index 9019678bc..b3cdf036a 100644 --- a/src/compositions/bcl-subscription/subscription.test.js +++ b/src/compositions/bcl-subscription/subscription.test.js @@ -4,21 +4,57 @@ import { } from "@openeuropa/bcl-test-utils"; import { axe, toHaveNoViolations } from "jest-axe"; -import demoData from "@openeuropa/bcl-subscription/data/data"; +import { + demoData, + demoDataEmailForm, + demoDataEmailConfirmationForm, + demoDataEmailConfirmedForm, + demoDataManageForm, +} from "@openeuropa/bcl-subscription/data/data"; const template = "@oe-bcl/bcl-subscription/subscription.html.twig"; +const templateForm = "@oe-bcl/bcl-subscription/subscription-form.html.twig"; const render = (params) => renderTwigFileAsNode(template, params, true); +const renderForm = (params) => renderTwigFileAsNode(templateForm, params, true); expect.extend(toHaveNoViolations); describe("OE - Subscription", () => { - test("renders correctly", () => { + test("modal renders correctly", () => { expect.assertions(1); return expect(render(demoData)).resolves.toMatchSnapshot(); }); + test("email form renders correctly", () => { + expect.assertions(1); + + return expect(renderForm(demoDataEmailForm)).resolves.toMatchSnapshot(); + }); + + test("email confirmation renders correctly", () => { + expect.assertions(1); + + return expect( + renderForm(demoDataEmailConfirmationForm) + ).resolves.toMatchSnapshot(); + }); + + test("email confirmed renders correctly", () => { + expect.assertions(1); + + return expect( + renderForm(demoDataEmailConfirmedForm) + ).resolves.toMatchSnapshot(); + }); + + test("manage form renders correctly", () => { + expect.assertions(1); + + return expect(renderForm(demoDataManageForm)).resolves.toMatchSnapshot(); + }); + test(`passes the accessibility tests`, async () => { expect( await axe(renderTwigFileAsHtml(template, demoData))