@openeuropa/bcl-data-header 0.24.1 → 0.26.0

package/data--ec.js

@@ -1,5 +1,11 @@
 const drupalAttribute = require("drupal-attribute");
 
+const languageList = require("@openeuropa/bcl-language-list/data/data-modal");
+const breadcrumbs = require("@openeuropa/bcl-data-breadcrumb/data");
+const navbarTop = require("@openeuropa/bcl-data-header/data--top-navbar");
+const navbar = require("@openeuropa/bcl-data-header/data--navbar");
+const modals = require("@openeuropa/bcl-data-header/data--modals");
+
 module.exports = {
   variant: "ec",
   site_name: "Project name",
@@ -11,10 +17,12 @@ module.exports = {
   project_link: "/example.html",
   head: {
     attributes: new drupalAttribute()
-      .addClass(["w-100", "shadow-sm"])
+      .addClass(["w-100", "shadow-sm", "bcl-header__top-navbar"])
       .setAttribute("aria-label", "Top Navigation"),
-    disable_collapse: true,
+    disable_collapse: false,
+    collapse_id: "topNavbarDropdown",
     brand: {
+      link: "/example.html",
       logos: [
         {
           src: "https://cdn1.fpfis.tech.ec.europa.eu/ecl/v3.0.2/ec/images/logo/logo-ec--en.svg",
@@ -23,328 +31,14 @@ module.exports = {
       ],
     },
     navigation: {
-      items: [
-        {
-          label: "Link",
-          icon_position: "before",
-          icon: {
-            name: "link",
-            path: "/icons.svg",
-          },
-          attributes: new drupalAttribute().addClass(["d-none", "d-lg-block"]),
-        },
-        {
-          label: "Link",
-          icon_position: "before",
-          icon: {
-            name: "link",
-            path: "/icons.svg",
-          },
-          attributes: new drupalAttribute().addClass(["d-none", "d-lg-block"]),
-        },
-        {
-          label: "<span class='d-block d-lg-inline-block'>English</span>",
-          path: "#",
-          icon_position: "before",
-          remove_icon_spacers: true,
-          icon: {
-            name: "chat-left-dots-fill",
-            size: "xs",
-            path: "/icons.svg",
-            attributes: new drupalAttribute().addClass("me-lg-2-5"),
-          },
-          attributes: new drupalAttribute()
-            .setAttribute("data-bs-toggle", "modal")
-            .setAttribute("data-bs-target", "#languageModal")
-            .addClass("text-center"),
-        },
-        {
-          label: "<span class='d-block d-lg-inline-block'>Log in</span>",
-          path: "#",
-          icon_position: "before",
-          remove_icon_spacers: true,
-          icon: {
-            name: "person-fill",
-            size: "xs",
-            path: "/icons.svg",
-            attributes: new drupalAttribute().addClass("me-lg-2-5"),
-          },
-          attributes: new drupalAttribute()
-            .setAttribute("data-bs-toggle", "modal")
-            .setAttribute("data-bs-target", "#loginModal")
-            .addClass("text-center"),
-        },
-        {
-          label: "<span class='badge bg-danger'>5</span>",
-          path: "#",
-          remove_icon_spacers: true,
-          icon_position: "before",
-          icon: {
-            name: "bell-fill",
-            size: "s",
-            path: "/icons.svg",
-          },
-          attributes: new drupalAttribute().addClass([
-            "notification",
-            "mt-2",
-            "mt-lg-0",
-          ]),
-        },
-      ],
-    },
-  },
-  navbar: {
-    color_set: "dark",
-    collapse_id: "navbarNavDropdown",
-    attributes: new drupalAttribute().addClass("bcl-header__navbar"),
-    form: {
-      attributes: new drupalAttribute().addClass(["d-flex", "mt-3", "mt-lg-0"]),
-      submit: {
-        variant: "light",
-        assistive_text: "search",
-        icon: {
-          name: "search",
-          size: "xs",
-          path: "/icons.svg",
-        },
-        attributes: new drupalAttribute().addClass([
-          "border-start-0",
-          "rounded-0",
-          "rounded-end",
-        ]),
-      },
-      items: [
-        [
-          {
-            type: "text",
-            required: true,
-            label: "Search",
-            hidden_label: true,
-            placeholder: "Search",
-            id: "inlineFormInputGroupSearch",
-            attributes: new drupalAttribute().addClass([
-              "border-start-0",
-              "rounded-0",
-              "rounded-start",
-            ]),
-          },
-        ],
-      ],
-    },
-    navigation: {
-      navbar: true,
-      attributes: new drupalAttribute().addClass("me-auto"),
-      items: [
-        {
-          label: "Home",
-          path: "/example.html",
-          active: true,
-          attributes: new drupalAttribute().setAttribute(
-            "aria-current",
-            "page"
-          ),
-        },
-        {
-          label: "Item 01",
-          path: "/example.html",
-        },
-        {
-          label: "Item 02",
-          path: "/example.html",
-        },
-        {
-          id: "navbarDropdownMenuLink",
-          link: true,
-          dropdown: true,
-          trigger: {
-            label: "Dropdown link",
-            path: "#",
-            attributes: new drupalAttribute().addClass("nav-link"),
-          },
-          items: [
-            {
-              label: "Action",
-              path: "/example.html",
-            },
-            {
-              label: "Another action",
-              path: "/example.html",
-            },
-            {
-              label: "Something else here",
-              path: "/example.html",
-            },
-            {
-              label:
-                "Very long label with custom text and custom link as an example",
-              path: "/example.html",
-            },
-          ],
-        },
-      ],
-    },
-  },
-  modals: [
-    {
-      id: "loginModal",
-      header:
-        '<h5 class="modal-title" id="loginModalLabel">Log in</h5>' +
-        '<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>',
-      body:
-        "<h5>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</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.</p>",
-      footer:
-        '<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>' +
-        '<button type="button" class="btn btn-primary">Access EU login</button>',
+      items: navbarTop,
     },
-  ],
-  language_modal: {
-    id: "languageModal",
-    title: "Select your language",
-    variant: "ec",
-    icon_path: "/icons.svg",
-    close_label: "Close",
-    overlay: true,
-    items: [
-      {
-        label: "български",
-        lang: "bg",
-      },
-      {
-        label: "español",
-        lang: "es",
-      },
-      {
-        label: "čeština",
-        lang: "cs",
-      },
-      {
-        label: "dansk",
-        lang: "da",
-      },
-      {
-        label: "Deutsch",
-        lang: "de",
-      },
-      {
-        label: "eesti",
-        lang: "et",
-      },
-      {
-        label: "ελληνικά",
-        lang: "el",
-      },
-      {
-        label: "English",
-        active: true,
-        lang: "en",
-      },
-      {
-        label: "français",
-        lang: "fr",
-      },
-      {
-        label: "Gaeilge",
-        lang: "ga",
-      },
-      {
-        label: "hrvatski",
-        lang: "hr",
-      },
-      {
-        label: "italiano",
-        lang: "it",
-      },
-      {
-        label: "latviešu",
-        lang: "lv",
-      },
-      {
-        label: "lietuvių",
-        lang: "lt",
-      },
-      {
-        label: "magyar",
-        lang: "hu",
-      },
-      {
-        label: "Malti",
-        lang: "mt",
-      },
-      {
-        label: "Nederlands",
-        lang: "nl",
-      },
-      {
-        label: "polski",
-        lang: "pl",
-      },
-      {
-        label: "português",
-        lang: "pt",
-      },
-      {
-        label: "română",
-        lang: "ro",
-      },
-      {
-        label: "slovenčina",
-        lang: "sk",
-      },
-      {
-        label: "slovenščina",
-        lang: "sl",
-      },
-      {
-        label: "suomi",
-        lang: "fi",
-      },
-      {
-        label: "svenska",
-        lang: "sv",
-      },
-    ],
-    non_eu_items: [
-      {
-        label: "中文",
-        lang: "zh",
-      },
-      {
-        label: "Türk",
-        lang: "tr",
-      },
-      {
-        label: "pусский",
-        lang: "ru",
-      },
-      {
-        label: "Català",
-        lang: "ca",
-      },
-      {
-        label: "عَرَبِيّ",
-        lang: "ar",
-      },
-    ],
-    eu_category: "EU official languages",
-    non_eu_category: "Other languages",
   },
+  navbar,
+  modals,
+  language_modal: { ...languageList, variant: "ec" },
   breadcrumbs: {
+    ...breadcrumbs,
     attributes: new drupalAttribute().addClass(["mt-3"]),
-    links: [
-      { label: "Home", path: "/example.html" },
-      {
-        label: "European Commission",
-        path: "/example.html",
-      },
-      {
-        label: "About the European Commission",
-        path: "/example.html",
-      },
-      { label: "News" },
-    ],
-    icon_path: "/icons.svg",
   },
 };

package/data--loggedIn.js

@@ -0,0 +1,37 @@
+const drupalAttribute = require("drupal-attribute");
+
+module.exports = [
+  {
+    label: "My account",
+    path: "/example.html",
+    icon_position: "before",
+    remove_icon_spacers: true,
+    attributes: new drupalAttribute().addClass(["py-lg-2", "pb-3"]),
+    icon: {
+      name: "person-fill",
+      size: "xs",
+      path: "/icons.svg",
+      attributes: new drupalAttribute().addClass(["me-2-5"]),
+    },
+  },
+  {
+    label: "Log out",
+    path: "/example.html",
+    icon_position: "before",
+    remove_icon_spacers: true,
+    attributes: new drupalAttribute().addClass([
+      "border-top-lg-0",
+      "border-top",
+      "mx-n3",
+      "px-4",
+      "py-lg-2",
+      "pt-3",
+    ]),
+    icon: {
+      name: "lock-fill",
+      size: "xs",
+      path: "/icons.svg",
+      attributes: new drupalAttribute().addClass("me-2-5"),
+    },
+  },
+];

package/data--modals.js

@@ -0,0 +1,15 @@
+const { getDummyText } = require("@openeuropa/bcl-data-utils");
+
+module.exports = [
+  {
+    id: "loginModal",
+    header: `<h5 class="modal-title" id="loginModalLabel">Log in</h5>
+	    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>`,
+    body: `<h5>Disclaimer 1</h5>
+	    ${getDummyText(3, true)}
+	    <h5>Disclaimer 2</h5>
+	    ${getDummyText(3, true)}`,
+    footer: `<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+	     <button type="button" class="btn btn-primary">Access EU login</button>`,
+  },
+];

package/data--navbar.js

@@ -0,0 +1,92 @@
+const drupalAttribute = require("drupal-attribute");
+
+module.exports = {
+  color_set: "dark",
+  collapse_id: "navbarNavDropdown",
+  attributes: new drupalAttribute()
+    .addClass("bcl-header__navbar")
+    .setAttribute("aria-label", "Main Navigation"),
+  form: {
+    attributes: new drupalAttribute().addClass(["d-flex", "mt-3", "mt-lg-0"]),
+    submit: {
+      variant: "light",
+      assistive_text: "search",
+      icon: {
+        name: "search",
+        size: "xs",
+        path: "/icons.svg",
+      },
+      attributes: new drupalAttribute().addClass([
+        "border-start-0",
+        "rounded-0",
+        "rounded-end",
+      ]),
+    },
+    items: [
+      [
+        {
+          type: "text",
+          required: true,
+          label: "Search",
+          hidden_label: true,
+          placeholder: "Search",
+          id: "inlineFormInputGroupSearch",
+          attributes: new drupalAttribute().addClass([
+            "border-start-0",
+            "rounded-0",
+            "rounded-start",
+          ]),
+        },
+      ],
+    ],
+  },
+  navigation: {
+    navbar: true,
+    attributes: new drupalAttribute().addClass("me-auto"),
+    items: [
+      {
+        label: "Home",
+        path: "/example.html",
+        active: true,
+        attributes: new drupalAttribute().setAttribute("aria-current", "page"),
+      },
+      {
+        label: "Item 01",
+        path: "/example.html",
+      },
+      {
+        label: "Item 02",
+        path: "/example.html",
+      },
+      {
+        id: "navbarDropdownMenuLink",
+        link: true,
+        dropdown: true,
+        trigger: {
+          label: "Dropdown link",
+          path: "#",
+          attributes: new drupalAttribute().addClass("nav-link"),
+        },
+        items: [
+          {
+            label: "Action",
+            path: "/example.html",
+          },
+          {
+            label: "Another action",
+            path: "/example.html",
+          },
+          {
+            label: "Something else here",
+            path: "/example.html",
+          },
+          {
+            label:
+              "Very long label with custom text and custom link as an example",
+            path: "/example.html",
+          },
+        ],
+      },
+    ],
+  },
+};