Alter pill nav to add new variant

vanda · Nov 13, 2024 · bcad5ab · bcad5ab
1 parent 2863fb5
commit bcad5ab
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 7 deletions.
diff --git a/src/components/blocks/toggle-nav/_toggle-nav.js b/src/components/blocks/toggle-nav/_toggle-nav.js
@@ -11,6 +11,7 @@ if (toggleNav) {
 
   Array.from(toggleNavBtns, (tog) => {
     const tnToggees = document.querySelectorAll(tog.dataset.toggeesSelector);
+    const isDarkVariation = toggleNav.parentElement.classList.contains('b-toggle-nav--dark');
 
     tog.addEventListener('click', (e) => {
       e.preventDefault();
@@ -29,10 +30,20 @@ if (toggleNav) {
         return true;
       });
       Array.from(toggleNavBtns, (el) => {
-        el.classList.add('u-btn--pill-dark');
+        if (isDarkVariation) {
+          el.classList.add('u-btn--pill-dark');
+        } else {
+          el.classList.add('u-btn--pill-light');
+          el.classList.remove('u-btn--pill-dark');
+        }
         return true;
       });
-      tog.classList.remove('u-btn--pill-dark');
+      if (isDarkVariation) {
+        tog.classList.remove('u-btn--pill-dark');
+      } else {
+        tog.classList.remove('u-btn--pill-light');
+        tog.classList.add('u-btn--pill-dark');
+      }
     }, false);
 
     if (tog.dataset.toggleType === qsToggleType) {

diff --git a/src/components/blocks/toggle-nav/toggle-nav.config.js b/src/components/blocks/toggle-nav/toggle-nav.config.js
@@ -1,8 +1,8 @@
 module.exports = {
   title: 'Toggle Nav',
-  label: 'Toggle Nav',
+  default: 'on-light',
   context: {
-    previewClass: 'fr-bg--dark',
+    modifier: ['light'],
     toggles: [
       'Galleries',
       'Periods and styles',
@@ -11,5 +11,15 @@ module.exports = {
       'Materials and techniques',
       'Places'
     ]
-  }
+  },
+  variants: [
+    {
+      name: 'on-dark',
+      label: 'On dark',
+      context: {
+        previewClass: 'fr-bg--dark',
+        modifier: ['dark']
+      }
+    }
+  ]
 };
diff --git a/src/components/blocks/toggle-nav/toggle-nav.html b/src/components/blocks/toggle-nav/toggle-nav.html
@@ -1,8 +1,8 @@
-<nav class="b-toggle-nav">
+<nav class="b-toggle-nav{% if modifier %} b-toggle-nav--{{ modifier }}{% endif %}">
   <ol class="b-toggle-nav__list js-toggle-nav" data-toggle-type-default="type-3">
     {% for toggle in toggles %}
       <li class="b-toggle-nav__item">
-        <button class="u-btn u-btn--pill u-btn--pill-dark b-toggle-nav__button js-toggle-nav-btn" data-toggle-type="type-{{ loop.index }}" data-toggees-selector=".my-toggleables-common-class" aria-label="Only show: {{ toggle }}">
+        <button class="u-btn u-btn--pill {% if modifier %} u-btn--pill-{{ modifier }}{% endif %} b-toggle-nav__button js-toggle-nav-btn" data-toggle-type="type-{{ loop.index }}" data-toggees-selector=".my-toggleables-common-class" aria-label="Only show: {{ toggle }}">
           {{ toggle }}
         </button>
       </li>