@openeuropa/bcl-subscription 0.21.0 → 0.24.0

package/__snapshots__/subscription.test.js.snap

@@ -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>
@@ -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"
@@ -614,12 +614,12 @@ 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
@@ -640,27 +640,26 @@ exports[`OE - Subscription renders correctly 1`] = `
               <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.
+            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.
                 </p>
                 <div
                   class="mt-2-5"
@@ -679,7 +678,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 +720,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"
             >
@@ -778,12 +779,12 @@ exports[`OE - Subscription renders correctly 1`] = `
               Duis ac augue sed tortor elementum dignissim
             </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.
           </p>
@@ -839,11 +840,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"
@@ -852,11 +853,11 @@ exports[`OE - Subscription renders correctly 1`] = `
                   />
                 </div>
                 <div
-                  class="success-alert d-none mb-0 alert alert-success d-flex align-items-center fade show"
+                  class="success-alert d-none mb-0 alert alert-success d-flex align-items-center fade show text-dark"
                   role="alert"
                 >
                   <svg
-                    class="flex-shrink-0 me-3 mt-1 align-self-start bi icon--s"
+                    class="flex-shrink-0 me-3 mt-1 align-self-start text-success bi icon--s"
                   >
                     <use
                       xlink:href="/icons.svg#check-circle-fill"
@@ -865,20 +866,20 @@ 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>
                 <div
-                  class="error-alert d-none mb-0 alert alert-danger d-flex align-items-center fade show"
+                  class="error-alert d-none mb-0 alert alert-danger d-flex align-items-center fade show text-dark"
                   role="alert"
                 >
                   <svg
-                    class="flex-shrink-0 me-3 mt-1 align-self-start bi icon--s"
+                    class="flex-shrink-0 me-3 mt-1 align-self-start text-danger bi icon--s"
                   >
                     <use
                       xlink:href="/icons.svg#dash-circle-fill"
@@ -887,11 +888,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 +1049,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"

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.21.0",
+  "version": "0.24.0",
   "publishConfig": {
     "access": "public"
   },
   "description": "OE - BCL subscription",
   "dependencies": {
-    "@openeuropa/bcl-subscription-block": "^0.21.0"
+    "@openeuropa/bcl-subscription-block": "^0.24.0"
   },
   "repository": {
     "type": "git",
@@ -24,5 +24,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "18c01b34ca76780f480c692c566dfe507d961ccf"
+  "gitHead": "a46bb6bc12771da4667516dc7b0665b00504ade2"
 }

package/subscription.story.js

@@ -1,46 +1,13 @@
 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 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";
-import banner from "@openeuropa/bcl-content-banner/data/data";
-import sidebar from "@openeuropa/bcl-inpage-navigation/data/data--simple";
-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: 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 chromatic = process.env.STORYBOOK_ENV;
 
 const clientValidation = (story) => {
   const demo = story();
@@ -121,7 +88,7 @@ const errorState = (story) => {
 
 export default {
   title: "Features/Subscription",
-  decorators: [withDesign, initScrollspy],
+  decorators: [withCode, withDesign, initScrollspy],
   parameters: {
     layout: "fullscreen",
     controls: { disable: true },

package/subscription.test.js

@@ -1,35 +1,6 @@
 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";
-import banner from "@openeuropa/bcl-content-banner/data/data";
-import sidebar from "@openeuropa/bcl-inpage-navigation/data/data--simple";
-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: 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,
-};
+import demoData from "@openeuropa/bcl-subscription/data/data";
 
 const template = "@oe-bcl/bcl-subscription/subscription.html.twig";