@openeuropa/bcl-subscription 0.20.0

package/data/data.js

@@ -0,0 +1,30 @@
+const drupalAttribute = require("drupal-attribute");
+
+module.exports = {
+  service_buttons: [
+    {
+      label: "Print",
+      variant: "primary",
+      outline: true,
+      icon_position: "before",
+      icon: {
+        name: "printer-fill",
+        path: "/icons.svg",
+      },
+      attributes: new drupalAttribute().addClass("me-3"),
+    },
+    {
+      label: "Subscribe",
+      variant: "primary",
+      outline: true,
+      icon_position: "before",
+      icon: {
+        name: "envelope-fill",
+        path: "/icons.svg",
+      },
+      attributes: new drupalAttribute()
+        .setAttribute("data-bs-toggle", "modal")
+        .setAttribute("data-bs-target", "#subscribeModal"),
+    },
+  ],
+};

package/data/data_modal.js

@@ -0,0 +1,98 @@
+const drupalAttribute = require("drupal-attribute");
+
+module.exports = {
+  id: "subscribeModal",
+  header:
+    '<h5 class="modal-title">Subscribe</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>',
+  footer:
+    '<div class="text-align-end">' +
+    '<button class="btn btn-light" data-bs-dismiss="modal">Close</button>' +
+    '<button class="btn btn-primary form-submit ms-4">Subscribe now</button>' +
+    "</div>",
+  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:
+            "<p>Please enter your information & preference to receive the wished information in your mailbox. Your email will not be shared with anyone.</p>",
+        },
+      ],
+      [
+        {
+          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 <a href='/example.html'>privacy statement</a>",
+          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!<hr class='d-none d-md-block' /><p class='d-none d-md-block mb-0'>Please verify your e-mail address and agree with the privacy statement.</p>",
+    heading: "Sorry!",
+    icon_path: "/icons.svg",
+    variant: "danger",
+    dismissible: false,
+    attributes: new drupalAttribute().addClass([
+      "error-alert",
+      "d-none",
+      "mb-0",
+    ]),
+  },
+};

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@openeuropa/bcl-subscription",
+  "author": "European Commission",
+  "license": "EUPL-1.2",
+  "version": "0.20.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "OE - BCL subscription",
+  "dependencies": {
+    "@openeuropa/bcl-subscription": "^0.20.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openeuropa/bootstrap-component-library.git"
+  },
+  "bugs": {
+    "url": "https://github.com/openeuropa/bootstrap-component-library.git/issues"
+  },
+  "homepage": "https://github.com/openeuropa/bootstrap-component-library",
+  "keywords": [
+    "openeuropa",
+    "bootstrap-component-library",
+    "design-system",
+    "twig"
+  ],
+  "gitHead": "ea13560489a089d0c198f781e75951a9160d2554"
+}

package/subscription-modal.html.twig

@@ -0,0 +1,24 @@
+{# Parameters:
+  - form: (form object) (default: {})
+  - success_alert: (alert object) (default: {})
+  - error_alert: (button Object) (default: {})
+
+  Blocks:
+  - body
+  - messages
+#}
+
+{% set _form = form|default({}) %}
+{% set _success_alert = success_alert|default({}) %}
+{% set _error_alert = error_alert|default({}) %}
+
+{% extends "@oe-bcl/bcl-modal/modal.html.twig" %}
+
+{% block body %}
+  {% 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 %}

package/subscription.html.twig

@@ -0,0 +1,10 @@
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+
+{% block sidebar %}
+  {% include '@oe-bcl/bcl-inpage-navigation/inpage-navigation.html.twig' with sidebar only %}
+{% endblock %}
+
+{% block content_bottom %}
+  {% include '@oe-bcl/bcl-subscription-block/subscription-block.html.twig' with subscription only %}
+  {% include '@oe-bcl/bcl-subscription/subscription-modal.html.twig' with modal only %}
+{% endblock %}

package/subscription.story.js

@@ -0,0 +1,153 @@
+import { withDesign } from "storybook-addon-designs";
+import { screen, userEvent } from "@storybook/testing-library";
+import isChromatic from "chromatic/isChromatic";
+import { correctPaths, initScrollspy } from "@openeuropa/bcl-story-utils";
+import header from "@openeuropa/bcl-data-header/data--simple";
+import footer from "@openeuropa/bcl-data-footer/data";
+import content from "@openeuropa/bcl-news/data/data_content.js";
+import banner from "@openeuropa/bcl-content-banner/data/data.js";
+import subscriptionPage from "@openeuropa/bcl-subscription/subscription.html.twig";
+import subscriptionPageData from "@openeuropa/bcl-subscription/data/data.js";
+import modalData from "@openeuropa/bcl-subscription/data/data_modal.js";
+import blockData from "@openeuropa/bcl-subscription-block/data/data.js";
+import sidebar from "@openeuropa/bcl-inpage-navigation/data--simple";
+import drupalAttribute from "drupal-attribute";
+
+if (isChromatic()) {
+  banner.image.classes = banner.image.classes
+    ? `${banner.image.classes} chromatic-ignore`
+    : "chromatic-ignore";
+}
+
+const demoData = {
+  content_type: "subscription",
+  page_title: "Subscription",
+  header: header,
+  footer: {
+    ...footer,
+    attributes: new drupalAttribute().addClass("mt-4"),
+  },
+  with_banner: true,
+  with_header: true,
+  with_footer: true,
+  sidebar: sidebar,
+  subscription: blockData,
+  modal: modalData,
+  banner: {
+    ...banner,
+    ...subscriptionPageData,
+  },
+  content: content,
+};
+
+const clientValidation = (story) => {
+  const demo = story();
+  return `<script>
+  var backdrop = document.getElementsByClassName('modal-backdrop')[0];
+  if (typeof(backdrop) != 'undefined' && backdrop != null) {
+    backdrop.remove();
+    document.body.removeAttribute("style")
+  }
+
+  var submit = document.querySelector('.form-submit');
+  var successAlert = document.querySelector('.success-alert');
+  var errorAlert = document.querySelector('.error-alert');
+  var form = document.querySelector('.needs-validation');
+
+  submit.addEventListener('click', function () {
+    successAlert.classList.add("d-none")
+    errorAlert.classList.add("d-none")
+    if (!form.checkValidity()) {
+      event.preventDefault()
+      event.stopPropagation()
+      errorAlert.classList.remove("d-none")
+    } else {
+      successAlert.classList.remove("d-none")
+      form.closest('.modal-body').remove();
+      submit.classList.add('d-none')
+    }
+    
+    form.classList.add('was-validated')
+  });
+  </script>${demo}`;
+};
+
+const openModal = (story) => {
+  const demo = story();
+  return `
+    ${demo}
+    <script>
+      var backdrop = document.getElementsByClassName('modal-backdrop')[0];
+      if (typeof(backdrop) != 'undefined' && backdrop != null) {
+        backdrop.remove()
+      }
+      var subscribeModal = new bootstrap.Modal(document.getElementById('subscribeModal'))
+      subscribeModal.show()
+    </script>
+    `;
+};
+
+const successState = (story) => {
+  const demo = story();
+  return `
+    ${demo}
+    <script>
+      var submit = document.querySelector('.form-submit');
+      var successAlert = document.querySelector('.success-alert');
+      var form = document.querySelector('.needs-validation');
+
+      successAlert.classList.remove("d-none")
+      form.closest('.modal-body').remove();
+      submit.classList.add('d-none')
+    </script>
+    `;
+};
+
+const errorState = (story) => {
+  const demo = story();
+  return `
+    ${demo}
+    <script>
+      var errorAlert = document.querySelector('.error-alert');
+      var form = document.querySelector('.needs-validation');
+    
+      errorAlert.classList.remove("d-none")
+      form.classList.add('was-validated')
+    </script>
+    `;
+};
+
+export default {
+  title: "Features/Subscription",
+  decorators: [withDesign, initScrollspy],
+  parameters: {
+    layout: "fullscreen",
+    controls: { disable: true },
+    badges: ["stable"],
+    design: [
+      {
+        name: "Mockup",
+        type: "figma",
+        url: "https://www.figma.com/file/NQlGvTiTXZYN8TwY2Ur5EI/BCL-Features?node-id=5859%3A239083",
+      },
+    ],
+  },
+};
+
+export const Default = () => subscriptionPage(correctPaths(demoData));
+Default.decorators = [clientValidation];
+
+if (isChromatic()) {
+  Default.play = async () => {
+    const button = screen.getAllByText("Subscribe", {
+      selector: "button",
+    });
+    await userEvent.click(button[0]);
+  };
+}
+
+export const Success = () => subscriptionPage(correctPaths(demoData));
+Success.decorators = [openModal, successState];
+
+export const Error = () => subscriptionPage(correctPaths(demoData));
+Error.decorators = [openModal, errorState];

package/subscription.test.js

@@ -0,0 +1,43 @@
+import { renderTwigFileAsNode } from "@openeuropa/bcl-test-utils";
+import header from "@openeuropa/bcl-data-header/data--simple";
+import footer from "@openeuropa/bcl-data-footer/data";
+import content from "@openeuropa/bcl-news/data/data_content.js";
+import banner from "@openeuropa/bcl-content-banner/data/data.js";
+import subscriptionPageData from "@openeuropa/bcl-subscription/data/data.js";
+import modalData from "@openeuropa/bcl-subscription/data/data_modal.js";
+import blockData from "@openeuropa/bcl-subscription-block/data/data.js";
+import sidebar from "@openeuropa/bcl-inpage-navigation/data--simple";
+import drupalAttribute from "drupal-attribute";
+
+const demoData = {
+  content_type: "subscription",
+  page_title: "Subscription",
+  header: header,
+  footer: {
+    ...footer,
+    attributes: new drupalAttribute().addClass("mt-4"),
+  },
+  with_banner: true,
+  with_header: true,
+  with_footer: true,
+  sidebar: sidebar,
+  subscription: blockData,
+  modal: modalData,
+  banner: {
+    ...banner,
+    ...subscriptionPageData,
+  },
+  content: content,
+};
+
+const template = "@oe-bcl/bcl-subscription/subscription.html.twig";
+
+const render = (params) => renderTwigFileAsNode(template, params, true);
+
+describe("OE - Subscription", () => {
+  test("renders correctly", () => {
+    expect.assertions(1);
+
+    return expect(render(demoData)).resolves.toMatchSnapshot();
+  });
+});