@openeuropa/bcl-subscription 0.22.0 → 0.23.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="mb-0 card-title bcl-heading"
                 >
                   This is the title of this page
-                </h2>
+                </h1>
                 <div
                   class="mb-4 mt-4"
                 >
                   <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"
         >
@@ -727,9 +726,11 @@ exports[`OE - Subscription renders correctly 1`] = `
             class="d-none d-lg-block bcl-inpage-navigation position-sticky"
             id="bcl-inpage-navigation"
           >
-            <h5>
+            <h3
+              class="mb-4 bcl-heading"
+            >
               Page content
-            </h5>
+            </h3>
             <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>
@@ -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.js

@@ -1,30 +1,5 @@
-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"),
-    },
-  ],
-};
+module.exports = `
+  <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>`;

package/package.json

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

package/subscription.story.js

@@ -3,10 +3,7 @@ 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 layout from "@openeuropa/bcl-base-templates/data/layout";
 import {
   banner,
   sidebar,
@@ -19,9 +16,13 @@ import drupalAttribute from "drupal-attribute";
 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()) {
+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";
@@ -29,12 +30,9 @@ if (isChromatic()) {
 
 const demoData = {
   content_type: "subscription",
-  page_title: "Subscription",
-  header: headerSimple,
-  footer: {
-    ...footer,
-    attributes: new drupalAttribute().addClass("mt-4"),
-  },
+  title: "Subscription",
+  header: header,
+  footer: layout.footer,
   with_banner: true,
   with_header: true,
   with_footer: true,
@@ -43,7 +41,7 @@ const demoData = {
   modal: modalData,
   banner: {
     ...banner,
-    ...subscriptionPageData,
+    action_bar: subscriptionPageData,
   },
   content: content,
 };
@@ -132,6 +130,11 @@ export default {
     layout: "fullscreen",
     controls: { disable: true },
     badges: ["stable"],
+    badgesConfig: {
+      stable: {
+        title: "v1",
+      },
+    },
     design: [
       {
         name: "Mockup",

package/subscription.test.js

@@ -1,8 +1,5 @@
 import { renderTwigFileAsNode } from "@openeuropa/bcl-test-utils";
-import {
-  headerSimple,
-  footer,
-} from "@openeuropa/bcl-base-templates/data/layout";
+import layout from "@openeuropa/bcl-base-templates/data/layout";
 import {
   banner,
   sidebar,
@@ -10,19 +7,15 @@ import {
 
 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"),
-  },
+  title: "Subscription",
+  header: layout.headerSimple,
+  footer: layout.footer,
   with_banner: true,
   with_header: true,
   with_footer: true,
@@ -31,7 +24,7 @@ const demoData = {
   modal: modalData,
   banner: {
     ...banner,
-    ...subscriptionPageData,
+    action_bar: subscriptionPageData,
   },
   content: content,
 };