@openeuropa/bcl-subscription 0.22.0 → 0.25.0

package/__snapshots__/subscription.test.js.snap

@@ -15,7 +15,7 @@ exports[`OE - Subscription renders correctly 1`] = `
       >
         <a
           class="navbar-brand"
-          href=""
+          href="/example.html"
         >
           <img
             alt="desktop european union logo"
@@ -38,7 +38,7 @@ exports[`OE - Subscription renders correctly 1`] = `
               class="text-center nav-link"
               data-bs-target="#languageModal"
               data-bs-toggle="modal"
-              href="#"
+              href="/example.html"
             >
               <svg
                 class="me-lg-2-5 bi icon--xs"
@@ -61,7 +61,7 @@ exports[`OE - Subscription renders correctly 1`] = `
               class="text-center nav-link"
               data-bs-target="#loginModal"
               data-bs-toggle="modal"
-              href="#"
+              href="/example.html"
             >
               <svg
                 class="me-lg-2-5 bi icon--xs"
@@ -116,7 +116,7 @@ exports[`OE - Subscription renders correctly 1`] = `
                 aria-current="page"
                 aria-label="homepage"
                 class="nav-link active"
-                href="/example"
+                href="/example.html"
               >
                 Home
               </a>
@@ -126,7 +126,7 @@ exports[`OE - Subscription renders correctly 1`] = `
             >
               <a
                 class="nav-link"
-                href="/example"
+                href="/example.html"
               >
                 Item 01
               </a>
@@ -136,7 +136,7 @@ exports[`OE - Subscription renders correctly 1`] = `
             >
               <a
                 class="nav-link"
-                href="/example"
+                href="/example.html"
               >
                 Item 02
               </a>
@@ -148,7 +148,7 @@ exports[`OE - Subscription renders correctly 1`] = `
                 aria-expanded="false"
                 class="nav-link dropdown-toggle"
                 data-bs-toggle="dropdown"
-                href="#"
+                href="/example.html"
                 id="navbarDropdownMenuLink"
                 role="button"
               >
@@ -238,7 +238,7 @@ exports[`OE - Subscription renders correctly 1`] = `
           >
             <a
               aria-label="homepage"
-              href="/example"
+              href="/example.html"
             >
               Home
             </a>
@@ -247,7 +247,7 @@ exports[`OE - Subscription renders correctly 1`] = `
             class="breadcrumb-item d-none d-md-block"
           >
             <a
-              href="/example"
+              href="/example.html"
             >
               European Union
             </a>
@@ -256,7 +256,7 @@ exports[`OE - Subscription renders correctly 1`] = `
             class="breadcrumb-item"
           >
             <a
-              href="/example"
+              href="/example.html"
             >
               <svg
                 class="d-md-none ms-0 me-2 me-2-5 bi icon--s"
@@ -314,13 +314,19 @@ exports[`OE - Subscription renders correctly 1`] = `
             Disclaimer 1
           </h5>
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan eget orci eu aliquet. Suspendisse potenti. Integer volutpat, nisl et placerat tincidunt
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
           </p>
           <h5>
             Disclaimer 2
           </h5>
           <p>
-            Duis bibendum tristique lobortis. Nam luctus nisi sit amet turpis faucibus, ut dapibus elit sollicitudin. Phasellus a massa magna. Nullam ac imperdiet leo.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
           </p>
         </div>
         <div
@@ -614,19 +620,19 @@ exports[`OE - Subscription renders correctly 1`] = `
   </div>
   <main>
     <div
-      class="bcl-content-banner pt-lg-4-75 pb-md-4-75 pb-4 pt-4 bg-lighter"
+      class="bcl-content-banner pb-md-4-75 pb-4 pt-4 pt-md-4-75 bg-lighter"
     >
       <div
         class="container"
       >
-        <div
+        <article
           class="bg-transparent border-0 card"
         >
           <div
             class="row"
           >
             <div
-              class="col-8 col-md-4 col-lg-3 offset-2 offset-md-0"
+              class="bcl-card-start-col bcl-size-large"
             >
               <img
                 alt="alt img"
@@ -635,32 +641,34 @@ exports[`OE - Subscription renders correctly 1`] = `
               />
             </div>
             <div
-              class="col-md-8 col-lg-9 col-xxl-8"
+              class="col-12 col-md-7 col-lg-8 col-xl-9 col-xxl-8"
             >
               <div
                 class="card-body pt-4 pt-md-0 px-0 px-md-3 pb-0"
               >
-                <h2
-                  class="fw-bold card-title"
+                <h1
+                  class="fs-1 card-title bcl-heading"
                 >
                   This is the title of this page
-                </h2>
+                </h1>
                 <div
-                  class="mb-4 mt-4"
+                  class="my-3"
                 >
                   <span
                     class="text-muted me-3"
                   >
-                    8 hours ago
+                    17 October 2019
                   </span>
                 </div>
                 <p>
-                  
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat ultricies massa, a dapibus libero porta nec.
-        Sed facilisis dictum vestibulum. Fusce commodo hendrerit diam, pretium tempus leo varius sit amet.
-        Etiam interdum, orci at sagittis luctus, lorem libero tempus mauris, a fermentum libero orci semper lacus.
-        Duis tristique fringilla magna, eu egestas dolor molestie non.
-     
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                  <br />
+                    Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+                  <br />
+                   Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                  <br />
+                  <br />
+                    Duis fermentum facilisis ex, ac porta massa.
                 </p>
                 <div
                   class="mt-2-5"
@@ -679,7 +687,7 @@ exports[`OE - Subscription renders correctly 1`] = `
               </div>
             </div>
           </div>
-        </div>
+        </article>
         <div
           class="d-flex justify-content-end mt-2 align-items-center"
         >
@@ -721,15 +729,17 @@ exports[`OE - Subscription renders correctly 1`] = `
         class="row"
       >
         <div
-          class="col-12 col-lg-3"
+          class="col-12 bcl-sidebar col-lg-3"
         >
           <nav
-            class="d-none d-lg-block bcl-inpage-navigation position-sticky"
+            class="bcl-inpage-navigation position-sticky"
             id="bcl-inpage-navigation"
           >
-            <h5>
+            <h2
+              class="mb-0 bcl-heading"
+            >
               Page content
-            </h5>
+            </h2>
             <ul
               class="nav nav-pills flex-column"
             >
@@ -769,29 +779,41 @@ exports[`OE - Subscription renders correctly 1`] = `
           </p>
           <ul>
             <li>
-              Vestibulum ante ipsum primis in faucibus
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
             </li>
             <li>
-              Lorem ipsum dolor sit amet
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
             </li>
             <li>
-              Duis ac augue sed tortor elementum dignissim
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
             </li>
           </ul>
-          <h3
-            class="fw-bold my-4"
+          <h2
+            class="my-4"
             id="subheading"
           >
             Sub heading
-          </h3>
+          </h2>
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet eleifend tortor. In facilisis eros vitae turpis ullamcorper, a euismod dolor lacinia. Nam facilisis ipsum et sollicitudin imperdiet. Curabitur a efficitur ante. Phasellus non felis laoreet, posuere ante ut, rhoncus tortor. Proin sed erat vel nisl luctus vulputate. Nunc tristique ultricies turpis, eu dictum enim ultrices vel. Sed posuere at leo sit amet placerat. Sed dapibus viverra urna ac pretium. Praesent et laoreet erat, eget volutpat metus. Duis ac augue sed tortor elementum dignissim in sit amet velit. Nullam nec viverra mi.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa.
           </p>
           <p>
-            Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras facilisis enim non nisi hendrerit laoreet. Vestibulum id facilisis augue, vitae faucibus justo. Etiam congue malesuada urna vitae suscipit. Mauris a varius leo. Nulla vel facilisis lacus. Suspendisse semper velit sit amet purus egestas, sit amet ullamcorper enim egestas. Vestibulum at lacus at purus ornare auctor nec consequat velit. Pellentesque iaculis sit amet nulla at rutrum.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
           </p>
           <div
-            class="bg-light px-4-5 pt-4 pb-4-5"
+            class="bcl-subscription-block bg-light px-4-5 pt-4 pb-4-5"
           >
             <div
               class="fs-2 fw-normal"
@@ -839,11 +861,11 @@ exports[`OE - Subscription renders correctly 1`] = `
                 <div
                   class="modal-header"
                 >
-                  <h5
-                    class="modal-title"
+                  <div
+                    class="modal-title fs-5 fw-medium"
                   >
                     Subscribe
-                  </h5>
+                  </div>
                   <button
                     aria-label="Close"
                     class="btn-close"
@@ -865,11 +887,11 @@ exports[`OE - Subscription renders correctly 1`] = `
                   <div
                     class="alert-content flex-grow-1"
                   >
-                    <h4
-                      class="alert-heading"
+                    <div
+                      class="alert-heading h4"
                     >
                       Thank you!
-                    </h4>
+                    </div>
                     Your subscription has been successfully registered. You can now close this dialog.
                   </div>
                 </div>
@@ -887,11 +909,11 @@ exports[`OE - Subscription renders correctly 1`] = `
                   <div
                     class="alert-content flex-grow-1"
                   >
-                    <h4
-                      class="alert-heading"
+                    <div
+                      class="alert-heading h4"
                     >
                       Sorry!
-                    </h4>
+                    </div>
                     There was an error!
                     <hr
                       class="d-none d-md-block"
@@ -1048,7 +1070,7 @@ exports[`OE - Subscription renders correctly 1`] = `
     </div>
   </main>
   <footer
-    class="mt-4 bcl-footer bcl-footer--neutral"
+    class="mt-md-4-75 mt-4 bcl-footer bcl-footer--neutral"
   >
     <div
       class="container"
@@ -1065,7 +1087,9 @@ exports[`OE - Subscription renders correctly 1`] = `
             [Project name]
           </p>
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in sagittis dolor.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+              Duis fermentum facilisis ex, ac porta massa.
           </p>
         </div>
         <div
@@ -1089,7 +1113,7 @@ exports[`OE - Subscription renders correctly 1`] = `
           >
             <a
               class="standalone"
-              href="#"
+              href="/example.html"
             >
               <svg
                 class="me-2-5 bi icon--xs"
@@ -1106,7 +1130,7 @@ exports[`OE - Subscription renders correctly 1`] = `
           >
             <a
               class="standalone"
-              href="#"
+              href="/example.html"
             >
               <svg
                 class="me-2-5 bi icon--xs"
@@ -1123,7 +1147,7 @@ exports[`OE - Subscription renders correctly 1`] = `
           >
             <a
               class="standalone"
-              href="#"
+              href="/example.html"
             >
               <svg
                 class="me-2-5 bi icon--xs"
@@ -1157,7 +1181,7 @@ exports[`OE - Subscription renders correctly 1`] = `
           >
             <a
               class="standalone"
-              href="#"
+              href="/example.html"
             >
               Link
             </a>
@@ -1167,7 +1191,7 @@ exports[`OE - Subscription renders correctly 1`] = `
           >
             <a
               class="standalone"
-              href="#"
+              href="/example.html"
             >
               Link
             </a>
@@ -1177,7 +1201,7 @@ exports[`OE - Subscription renders correctly 1`] = `
           >
             <a
               class="standalone"
-              href="#"
+              href="/example.html"
             >
               Link
             </a>
@@ -1187,7 +1211,7 @@ exports[`OE - Subscription renders correctly 1`] = `
           >
             <a
               class="standalone"
-              href="#"
+              href="/example.html"
             >
               Link
             </a>
@@ -1210,7 +1234,7 @@ exports[`OE - Subscription renders correctly 1`] = `
           >
             <a
               class="standalone"
-              href="#"
+              href="/example.html"
             >
               Link
             </a>
@@ -1220,7 +1244,7 @@ exports[`OE - Subscription renders correctly 1`] = `
           >
             <a
               class="standalone"
-              href="#"
+              href="/example.html"
             >
               Link
             </a>
@@ -1230,7 +1254,7 @@ exports[`OE - Subscription renders correctly 1`] = `
           >
             <a
               class="standalone"
-              href="#"
+              href="/example.html"
             >
               Link
             </a>
@@ -1240,7 +1264,7 @@ exports[`OE - Subscription renders correctly 1`] = `
           >
             <a
               class="standalone"
-              href="#"
+              href="/example.html"
             >
               Link
             </a>

package/data/data--modal.js

@@ -3,7 +3,7 @@ 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>',
+    '<div class="modal-title fs-5 fw-medium">Subscribe</div><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>' +

package/data/data.js

@@ -1,30 +1,45 @@
-const drupalAttribute = require("drupal-attribute");
+import layout from "@openeuropa/bcl-base-templates/data/layout";
+import {
+  banner,
+  sidebar,
+} from "@openeuropa/bcl-base-templates/data/content-page";
+import isChromatic from "chromatic/isChromatic";
 
-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"),
-    },
-  ],
+import content from "@openeuropa/bcl-news/data/data--content";
+import blockData from "@openeuropa/bcl-subscription-block/data";
+import modalData from "@openeuropa/bcl-subscription/data/data--modal";
+
+const chromatic = process.env.STORYBOOK_ENV;
+
+const header =
+  layout[`header_${process.env.STORYBOOK_THEME}`] || layout.headerSimple;
+
+if (isChromatic() || chromatic) {
+  banner.image.classes = banner.image.classes
+    ? `${banner.image.classes} chromatic-ignore`
+    : "chromatic-ignore";
+}
+
+const demoData = {
+  content_type: "subscription",
+  title: "Subscription",
+  header,
+  footer: layout.footer,
+  with_banner: true,
+  with_header: true,
+  with_footer: true,
+  sidebar,
+  subscription: blockData,
+  modal: modalData,
+  banner: {
+    ...banner,
+    action_bar: `
+    <div class="d-flex justify-content-end mt-2 align-items-center">
+      <button class="me-3 btn btn-outline-primary btn-md" type="button"><svg class="me-2-5 bi icon--fluid"><use xlink:href="/icons.svg#printer-fill"></use></svg>Print</button>
+      <button data-bs-toggle="modal" data-bs-target="#subscribeModal" class="btn btn-outline-primary btn-md" type="button"><svg class="me-2-5 bi icon--fluid"><use xlink:href="/icons.svg#envelope-fill"></use></svg>Subscribe</button>
+    </div>`,
+  },
+  content,
 };
+
+export default demoData;

package/package.json

@@ -2,13 +2,13 @@
   "name": "@openeuropa/bcl-subscription",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "0.22.0",
+  "version": "0.25.0",
   "publishConfig": {
     "access": "public"
   },
   "description": "OE - BCL subscription",
   "dependencies": {
-    "@openeuropa/bcl-subscription-block": "^0.22.0"
+    "@openeuropa/bcl-subscription-block": "^0.25.0"
   },
   "repository": {
     "type": "git",
@@ -24,5 +24,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "57304ad94ae3c234f2f2b904208ce540a7a53f23"
+  "gitHead": "f50c7dfeab8695bbb5c18d5f7d5304509512268a"
 }

package/subscription.story.js

@@ -3,50 +3,11 @@ 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 {
-  headerSimple,
-  footer,
-} from "@openeuropa/bcl-base-templates/data/layout";
-import {
-  banner,
-  sidebar,
-} from "@openeuropa/bcl-base-templates/data/content-page";
-
-import content from "@openeuropa/bcl-news/data/data--content";
-import blockData from "@openeuropa/bcl-subscription-block/data";
-import drupalAttribute from "drupal-attribute";
+import demoData from "@openeuropa/bcl-subscription/data/data";
 
 import subscriptionPage from "@openeuropa/bcl-subscription/subscription.html.twig";
-import subscriptionPageData from "@openeuropa/bcl-subscription/data/data";
-import modalData from "@openeuropa/bcl-subscription/data/data--modal";
-const chromatic = process.env.STORYBOOK_ENV;
 
-if (isChromatic()) {
-  banner.image.classes = banner.image.classes
-    ? `${banner.image.classes} chromatic-ignore`
-    : "chromatic-ignore";
-}
-
-const demoData = {
-  content_type: "subscription",
-  page_title: "Subscription",
-  header: headerSimple,
-  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 chromatic = process.env.STORYBOOK_ENV;
 
 const clientValidation = (story) => {
   const demo = story();
@@ -136,7 +97,7 @@ export default {
       {
         name: "Mockup",
         type: "figma",
-        url: "https://www.figma.com/file/NQlGvTiTXZYN8TwY2Ur5EI/BCL-Features?node-id=5859%3A239083",
+        url: "https://www.figma.com/file/NQlGvTiTXZYN8TwY2Ur5EI/BCL-Features?node-id=10449%3A244556",
       },
     ],
   },
@@ -155,8 +116,26 @@ if (isChromatic() || chromatic) {
   };
 }
 
-export const Success = () => subscriptionPage(correctPaths(demoData));
-Success.decorators = [openModal, successState];
+export const SuccessState = () => subscriptionPage(correctPaths(demoData));
+SuccessState.decorators = [openModal, successState];
+SuccessState.parameters = {
+  design: [
+    {
+      name: "Mockup",
+      type: "figma",
+      url: "https://www.figma.com/file/NQlGvTiTXZYN8TwY2Ur5EI/BCL-Features?node-id=10449%3A244564",
+    },
+  ],
+};
 
-export const Error = () => subscriptionPage(correctPaths(demoData));
-Error.decorators = [openModal, errorState];
+export const ErrorState = () => subscriptionPage(correctPaths(demoData));
+ErrorState.decorators = [openModal, errorState];
+ErrorState.parameters = {
+  design: [
+    {
+      name: "Mockup",
+      type: "figma",
+      url: "https://www.figma.com/file/NQlGvTiTXZYN8TwY2Ur5EI/BCL-Features?node-id=10449%3A244562",
+    },
+  ],
+};

package/subscription.test.js

@@ -1,40 +1,6 @@
 import { renderTwigFileAsNode } from "@openeuropa/bcl-test-utils";
-import {
-  headerSimple,
-  footer,
-} from "@openeuropa/bcl-base-templates/data/layout";
-import {
-  banner,
-  sidebar,
-} from "@openeuropa/bcl-base-templates/data/content-page";
 
-import content from "@openeuropa/bcl-news/data/data--content";
-import blockData from "@openeuropa/bcl-subscription-block/data";
-import drupalAttribute from "drupal-attribute";
-
-import subscriptionPageData from "@openeuropa/bcl-subscription/data/data";
-import modalData from "@openeuropa/bcl-subscription/data/data--modal";
-
-const demoData = {
-  content_type: "subscription",
-  page_title: "Subscription",
-  header: headerSimple,
-  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,
-};
+import demoData from "@openeuropa/bcl-subscription/data/data";
 
 const template = "@oe-bcl/bcl-subscription/subscription.html.twig";