desy-html 6.2.1 → 6.3.0

package/README.md

@@ -1,6 +1,6 @@
 # README #
 
-desy-html is the NPM library you need to start building a user interface for Gobierno de Aragón webapps. It uses Gulp, Postcss, Tailwindcss, Alpine.js and Nunjucks to render html+css+js components. It's useful to create lightweight webapps or html mockups.
+desy-html is the NPM library you need to start building a user interface for Gobierno de Aragón webapps. It uses Gulp, Postcss, Tailwindcss and Nunjucks to render html+css+js components. It's useful to create lightweight webapps or html mockups.
 
 If you need a more powerful library based on this, use it's Angular port instead: [desy-angular](https://bitbucket.org/sdaragon/desy-angular)
 
@@ -33,4 +33,4 @@ Unless stated otherwise, the codebase is released under the [https://joinup.ec.e
 This project started initially forked from: [https://github.com/saadeghi/tailwindcss-postcss-browsersync-boilerplate](https://github.com/saadeghi/tailwindcss-postcss-browsersync-boilerplate)
 
 This project is built upon the GOV.UK Frontend project: [https://github.com/alphagov/govuk-frontend](https://github.com/alphagov/govuk-frontend) 
-We would like to thank the Government Digital Service team for their fabulous work and for making it opensource for the community.
+We would like to thank the Government Digital Service team for their fabulous work and for making it opensource for the community.

package/docs/_global.head.njk

@@ -8,7 +8,6 @@
   <link rel="icon" type="image/x-icon" href="https://aplicaciones.aragon.es/favicon.ico">
   <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="css/styles.css">
-  <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
   <style>
     /* PrismJS 1.15.0
     https://prismjs.com/download.html#themes=prism-coy&languages=markup+css+clike+javascript+java+kotlin+markdown+swift&plugins=toolbar+show-language+copy-to-clipboard */
@@ -342,4 +341,4 @@
       display: none; }
 
   </style>
-</head>
+</head>

package/docs/_macro.example-render.njk

@@ -108,10 +108,12 @@ import componentTree %}
   {% set exampleComponent = data.data.exampleComponent %}
   {% set examples = data.data.examples %}
   {% set exampleParams = data.data.params %}
-  <div x-data="{isOpenParams: false, textShow: 'Show params'}">
+  <div>
     <h1 class="c-h1 inline-block">{{ exampleComponent | capitalize }} examples</h1>
-    <span x-text="textShow" @click="isOpenParams = !isOpenParams; isOpenParams ? textShow = 'Hide params' : textShow = 'Show params'" class="inline-block ml-sm text-sm text-primary-base font-normal hover:text-primary-dark underline cursor-pointer">Show params</span>
-    <div x-show.transition.opacity="isOpenParams" class="c-markup">
+    <button class="inline-block ml-sm text-sm text-primary-base font-normal hover:text-primary-dark underline cursor-pointer c-code-snippet__button mt-xl py-base">
+      <span class="c-code-snippet__show pointer-events-none">Mostrar</span><span class="c-code-snippet__hide pointer-events-none hidden">Ocultar</span> params
+    </button>
+    <div class="c-markup hidden">
       <div class="py-base">
         <h4 class="mb-sm font-bold">Params</h4>
         {% from "_macro.load-component-params.njk" import loadComponentParams %}
@@ -125,7 +127,7 @@ import componentTree %}
       <a href="#example-{{ exampleComponent }}-{{ loop.index }}" class="hover:text-primary-base" title="permalink">{{ example.name }}</a>
     </h4>
     <p class="mb-base text-sm text-neutral-dark">{{ example.description }}</p>
-    <div x-data="{isOpenCode: false, textShow: 'Show code'}" class="mt-xl  py-lg border-b border-neutral-base">
+    <div class="mt-xl  py-lg border-b border-neutral-base">
       {% if exampleComponent == "accordion" %}
       {{ componentAccordion(example.data) }}
       {% elseif exampleComponent == "accordion-history" %}
@@ -231,10 +233,10 @@ import componentTree %}
       {% elseif exampleComponent == "tree" %}
       {{ componentTree(example.data) }}
       {% endif %}
-      <div class="mt-xl py-base">
-        <span x-text="textShow" @click="isOpenCode = !isOpenCode; isOpenCode ? textShow = 'Hide code' : textShow = 'Show code'" class="text-primary-base hover:text-primary-dark underline cursor-pointer">Show code</span>
-      </div>
-      <div x-show.transition.opacity="isOpenCode" class="c-markup">
+      <button class="inline-block text-base text-primary-base font-normal hover:text-primary-dark underline cursor-pointer c-code-snippet__button mt-xl py-base">
+        <span class="c-code-snippet__show pointer-events-none">Mostrar</span><span class="c-code-snippet__hide pointer-events-none hidden">Ocultar</span> código
+      </button>
+      <div class="c-markup hidden">
         <div class="py-base">
           <h4 class="mb-sm font-bold">Macro</h4>
           {% if example.data.caller %}
@@ -258,4 +260,4 @@ import componentTree %}
       </div>
     </div>
   {% endfor %}
-{% endmacro %}
+{% endmacro %}

package/docs/ds/_ds.macro.code-snippet.njk

@@ -1,11 +1,13 @@
 {% macro DSCodeSnippet(urlSnippet, params={}) %}
 {% set codeSnippetVariable %}{% include urlSnippet %}{% endset %}
-<div x-data="{ isOpenCode: false, textShow: 'Show code'}">
-  <div x-text="textShow" @click="isOpenCode = !isOpenCode; isOpenCode ? textShow = 'Hide code' : textShow = 'Show code'" class="inline-block ml-sm text-base text-primary-base font-normal hover:text-primary-dark underline cursor-pointer">Show code</div>
-  <div x-show.transition.opacity="isOpenCode" class="c-markup">
+<div class="c-code-snippet">
+  <button class="inline-block ml-sm text-base text-primary-base font-normal hover:text-primary-dark underline cursor-pointer c-code-snippet__button">
+    <span class="c-code-snippet__show">Mostrar</span><span class="c-code-snippet__hide hidden">Ocultar</span> código
+  </button>
+  <div class="c-markup hidden">
     <div class="py-base">
       <pre><code class="language-html">{{ codeSnippetVariable|escape }}</code></pre>
     </div>
   </div>
 </div>
-{% endmacro %}
+{% endmacro %}

package/docs/index.html

@@ -6,7 +6,7 @@
 <div class="prose pb-xl">
 <div class="pb-lg"></div>
   <h1>desy-html</h1>
-  <p>desy-html es una librería NPM que sirve para construir la interfaz de usuario de las aplicaciones web del Gobierno de Aragón. Utiliza <a href="https://gulpjs.com/">Gulp</a>, <a href="https://postcss.org/">PostCSS</a>, <a href="https://tailwindcss.com/">Tailwind CSS</a>, <a href="https://alpinejs.dev/">Alpine.js</a> y <a href="https://mozilla.github.io/nunjucks/">Nunjucks</a> para renderizar componentes HTML+CSS+JS. Es útil para crear aplicaciones web ligeras o maquetas html.</p>
+  <p>desy-html es una librería NPM que sirve para construir la interfaz de usuario de las aplicaciones web del Gobierno de Aragón. Utiliza <a href="https://gulpjs.com/">Gulp</a>, <a href="https://postcss.org/">PostCSS</a>, <a href="https://tailwindcss.com/">Tailwind CSS</a> y <a href="https://mozilla.github.io/nunjucks/">Nunjucks</a> para renderizar componentes HTML+CSS+JS. Es útil para crear aplicaciones web ligeras o maquetas html.</p>
   <p>Si necesitas una librería con más potencia para construir tu aplicación web, te recomendamos mejor, que uses su versión traducida a Angular: <a href="https://bitbucket.org/sdaragon/desy-angular">desy-angular librería NPM</a>, <a href="https://desy.aragon.es/desy-angular">Ejemplos de desy-angular</a></p>
   <p>Mira ejemplos de componentes de desy-html en la documentación: <a href="https://desy.aragon.es/">https://desy.aragon.es/</a></p>
   <p>Mira ejemplos de templates de página usando los componentes de desy-html: <a href="https://desy.aragon.es/pages/desy-html-templates">https://desy.aragon.es/pages/desy-html-templates</a></p>
@@ -38,7 +38,15 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
-   <h3>v.6.2.1</h3>
+  <h3>v.6.3.0</h3>
+  <ul class="text-sm">
+    <li>Added parameters and changes in Header advanced.</li>
+    <li>Added active parameter in Tabs.</li>
+    <li>Removed alpine.js and added new collapsible.js file.</li>
+    <li>Fixed keyboard navigation in Tree.</li>
+    <li>Minor fixes.</li>
+  </ul>
+  <h3>v.6.2.1</h3>
   <ul class="text-sm">
     <li>Fixed bad vertical spacing in c-form-group that affected forms in desy-angular.</li>
     <li>Minor fixes in listbox, dropdown and menubar for header modifier.</li>
@@ -353,4 +361,4 @@
   <p>Este proyecto fue inicialmente forkeado de: <a href="https://github.com/saadeghi/tailwindcss-postcss-browsersync-boilerplate">https://github.com/saadeghi/tailwindcss-postcss-browsersync-boilerplate</a></p>
   <p>Este proyecto se ha construido sobre el código fuente del proyecto GOV.UK Frontend: <a href="https://github.com/alphagov/govuk-frontend">https://github.com/alphagov/govuk-frontend</a>. Agradecemos al equipo de <a href="https://www.gov.uk/government/organisations/government-digital-service">GDS Government Digital Service</a> por su fabuloso trabajo y por hacerlo opensource para la comunidad.</p>
 </div>
-{% endblock %}
+{% endblock %}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "6.2.1",
+  "version": "6.3.0",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "author": {
     "name": "Desy (SDA Servicios Digitales de Aragón)",

package/src/js/aria/accordion.js

@@ -8,7 +8,7 @@ export function accordion(aria) {
 
   'use strict';
 
-  Array.prototype.slice.call(document.querySelectorAll('.Accordion')).forEach(function (accordion) {
+  Array.prototype.slice.call(document.querySelectorAll('.c-accordion')).forEach(function (accordion) {
 
     // Allow for multiple accordion sections to be expanded at the same time
     var allowMultiple = accordion.hasAttribute('data-allow-multiple');
@@ -16,57 +16,64 @@ export function accordion(aria) {
     var allowToggle = (allowMultiple) ? allowMultiple : accordion.hasAttribute('data-allow-toggle');
 
     // Create the array of toggle elements for the accordion group
-    var triggers = Array.prototype.slice.call(accordion.querySelectorAll('.Accordion-trigger'));
-    var panels = Array.prototype.slice.call(accordion.querySelectorAll('.Accordion-panel'));
+    var triggers = Array.prototype.slice.call(accordion.querySelectorAll('.c-accordion-trigger'));
+    var panels = Array.prototype.slice.call(accordion.querySelectorAll('.c-accordion-panel'));
 
 
     accordion.addEventListener('click', function (event) {
+      console.log("event", event);
       var target = event.target;
 
-      if (target.classList.contains('Accordion-trigger')) {
+      if (target.classList.contains('c-accordion-trigger')) {
         // Check if the current toggle is expanded.
         var isExpanded = target.getAttribute('aria-expanded') == 'true';
         var active = accordion.querySelector('[aria-expanded="true"]');
 
         // without allowMultiple, close the open accordion
         if (!allowMultiple && active && active !== target) {
+          console.log("!allowMultiple && active && active !== target");
           // Set the expanded state on the triggering element
           active.setAttribute('aria-expanded', 'false');
           //active.querySelector('span').innerText = 'Mostrar';
-          active.querySelector('.Accordion-show').classList.remove('hidden');
-          active.querySelector('.Accordion-hide').classList.add('hidden');
+          active.querySelector('.c-accordion-show').classList.remove('hidden');
+          active.querySelector('.c-accordion-hide').classList.add('hidden');
           // Hide the accordion sections, using aria-controls to specify the desired section
           document.getElementById(active.getAttribute('aria-controls')).setAttribute('hidden', '');
 
           // When toggling is not allowed, clean up disabled state
           if (!allowToggle) {
+            console.log("allowToggle");
             active.removeAttribute('aria-disabled');
           }
         }
 
         if (!isExpanded) {
+          console.log("isExpanded");
           // Set the expanded state on the triggering element
+          console.log("target", target);
           target.setAttribute('aria-expanded', 'true');
           //target.querySelector('span').innerText = 'Ocultar';
-          target.querySelector('.Accordion-show').classList.add('hidden');
-          target.querySelector('.Accordion-hide').classList.remove('hidden');
+          target.querySelector('.c-accordion-show').classList.toggle('hidden');
+          target.querySelector('.c-accordion-hide').classList.toggle('hidden');
           // Hide the accordion sections, using aria-controls to specify the desired section
           document.getElementById(target.getAttribute('aria-controls')).removeAttribute('hidden');
 
           // If toggling is not allowed, set disabled state on trigger
           if (!allowToggle) {
+            console.log("if");
             target.setAttribute('aria-disabled', 'true');
             //target.querySelector('span').innerText = '';
-            target.querySelector('.Accordion-show').classList.add('hidden');
-            target.querySelector('.Accordion-hide').classList.add('hidden');
+            target.querySelector('.c-accordion-show').classList.add('hidden');
+            target.querySelector('.c-accordion-hide').classList.add('hidden');
           }
         }
         else if (allowToggle && isExpanded) {
+          console.log("else if");
           // Set the expanded state on the triggering element
           target.setAttribute('aria-expanded', 'false');
           // target.querySelector('span').innerText = 'Mostrar';
-          active.querySelector('.Accordion-show').classList.remove('hidden');
-          active.querySelector('.Accordion-hide').classList.add('hidden');
+          target.querySelector('.c-accordion-show').classList.toggle('hidden');
+          target.querySelector('.c-accordion-hide').classList.toggle('hidden');
 
           // Hide the accordion sections, using aria-controls to specify the desired section
           document.getElementById(target.getAttribute('aria-controls')).setAttribute('hidden', '');
@@ -88,7 +95,7 @@ export function accordion(aria) {
       var ctrlModifier = (event.ctrlKey && key.match(/33|34/));
 
       // Is this coming from an accordion header?
-      if (target.classList.contains('Accordion-trigger')) {
+      if (target.classList.contains('c-accordion-trigger')) {
         // Up/ Down arrow and Control + Page Up/ Page Down keyboard operations
         // 38 = Up, 40 = Down
         if (key.match(/38|40/) || ctrlModifier) {
@@ -121,7 +128,7 @@ export function accordion(aria) {
     });
 
     // These are used to style the accordion when one of the buttons has focus
-    accordion.querySelectorAll('.Accordion-trigger').forEach(function (trigger) {
+    accordion.querySelectorAll('.c-accordion-trigger').forEach(function (trigger) {
 
       trigger.addEventListener('focus', function (event) {
         accordion.classList.add('focus');
@@ -143,10 +150,10 @@ export function accordion(aria) {
       if (expanded) {
         expanded.setAttribute('aria-disabled', 'true');
         //expanded.querySelector('span').innerText = '';
-        expanded.querySelector('.Accordion-show').classList.add('hidden');
-        expanded.querySelector('.Accordion-hide').classList.add('hidden');
+        expanded.querySelector('.c-accordion-show').classList.add('hidden');
+        expanded.querySelector('.c-accordion-hide').classList.add('hidden');
       }
     }
 
   });
-}
+}

package/src/js/aria/collapsible.js

@@ -0,0 +1,35 @@
+export function Collapsible(aria) {
+
+  class Collapsible {
+    constructor(domNode) {
+      this.rootEl = domNode;
+      this.buttonEl = this.rootEl.querySelector('button[aria-expanded]');
+      this.buttonEl.addEventListener('click', this.toggle.bind(this));
+    }
+
+    toggle(event) {
+      const { target } = event
+      const elementCollapsibleShow = target.querySelector('.c-collapsible__show')
+      const elementCollapsibleHide = target.querySelector('.c-collapsible__hide')
+      const elementCollapsibleContent = target.nextElementSibling
+
+      elementCollapsibleShow.classList.toggle('hidden')
+      elementCollapsibleHide.classList.toggle('hidden')
+      elementCollapsibleContent.classList.toggle('hidden')
+
+      if(elementCollapsibleShow.classList.contains('hidden')) {
+        elementCollapsibleShow.setAttribute('aria-hidden', 'false')
+        elementCollapsibleHide.setAttribute('aria-hidden', 'true')
+      } else {
+        elementCollapsibleShow.setAttribute('aria-hidden', 'true')
+        elementCollapsibleHide.setAttribute('aria-hidden', 'false')
+      }
+    }
+  }
+
+  const collapsible = document.querySelectorAll('.c-collapsible');
+  collapsible.forEach((collapsibleElement) => {
+    new Collapsible(collapsibleElement);
+  });
+
+}

package/src/js/aria/disclosureMenu.js

@@ -118,7 +118,6 @@ export function DisclosureNav(aria) {
 
   aria.DisclosureNav.prototype.handleButtonClick = function (event) {
     var button = event.target;
-    console.log(button);
     var buttonIndex = this.triggerNodes.indexOf(button);
     var buttonExpanded = button.getAttribute('aria-expanded') === 'true';
     this.toggleExpand(buttonIndex, !buttonExpanded);
@@ -150,4 +149,4 @@ export function DisclosureNav(aria) {
   };
 
 
-}
+}

package/src/js/aria/tabs.js

@@ -15,6 +15,32 @@ export function tabs(aria) {
       panels = elem.querySelectorAll('[role="tabpanel"]');
     };
 
+    /*
+    *  Buscamos si las tabs se han inizializado con
+    *  la clase c-tabs__link--is-active. En ese caso
+    *  añadimos las clases al button y al span
+    *  Si ninguna tab contiene la clase c-tabs__link--is-active
+    *  activamos la primera tab.
+    */
+    function checkIfTabIsActive() {
+      const getClassFromTabs = Array.from(tabs)
+      if(getClassFromTabs.some(tab => tab.classList.contains('c-tabs__link--is-active'))) {
+        tabs.forEach((tab) => {
+          if(tab.classList.contains('c-tabs__link--is-active')) {
+            addActiveClass(tab)
+          }
+        })
+      } else {
+        tabs.forEach((tab, index) => {
+          if(index === 0) {
+            addActiveClass(tab)
+          }
+        })
+      }
+    }
+
+    checkIfTabIsActive()
+
     // For easy reference
     var keys = {
       end: 35,
@@ -158,6 +184,9 @@ export function tabs(aria) {
       // Set the tab as selected
       tab.setAttribute('aria-selected', 'true');
 
+      //Add active class to current tab
+      addActiveClass(tab)
+
       // Get the value of aria-controls (which is an ID)
       var controls = tab.getAttribute('aria-controls');
 
@@ -175,6 +204,7 @@ export function tabs(aria) {
       for (var t = 0; t < tabs.length; t++) {
         tabs[t].setAttribute('tabindex', '-1');
         tabs[t].setAttribute('aria-selected', 'false');
+        removeActiveClass(tabs[t])
       };
 
       for (var p = 0; p < panels.length; p++) {
@@ -241,5 +271,17 @@ export function tabs(aria) {
 
       return delay;
     };
+
+    function addActiveClass(element) {
+      //Add active class to current tab
+      element.classList.add("lg:bg-white", "lg:border-neutral-base", "lg:border-b-0", "lg:rounded-t", "no-underline");
+
+      element.firstElementChild.classList.add("text-black");
+    }
+
+    function removeActiveClass(element) {
+      element.classList.remove("lg:bg-white", "lg:border-neutral-base", "lg:border-b-0", "lg:rounded-t", "no-underline");
+      element.firstElementChild.classList.remove("text-black");
+    }
   }
-}
+}

package/src/js/aria/toggle.js

@@ -0,0 +1,25 @@
+export function Toggle(aria) {
+
+  class Toggle {
+    constructor(domNode) {
+      this.rootEl = domNode;
+      this.buttonEl = this.rootEl.querySelector('button[aria-expanded]');
+
+      this.buttonEl.addEventListener('click', this.toggle.bind(this));
+    }
+
+    toggle(event) {
+      const { target } = event
+      this.buttonEl.classList.toggle('c-button--has-selection')
+      target.querySelector('.c-button-is-not_pressed').classList.toggle('hidden')
+      target.querySelector('.c-button-is_pressed').classList.toggle('hidden')
+    }
+
+  }
+
+  const toggles = document.querySelectorAll('.c-toggle');
+  toggles.forEach((toggleElement) => {
+    new Toggle(toggleElement);
+  });
+
+}

package/src/js/aria/treeitem.js

@@ -104,10 +104,11 @@ export function Treeitem(aria) {
 
   aria.Treeitem.prototype.handleKeydown = function (event) {
 
-    var tgt = event.currentTarget,
-      flag = false,
-      char = event.key,
-      clickEvent;
+    const targetElement = event.currentTarget;
+    let flag = false;
+    let char = event.key;
+    const getCurrentCheckbox = targetElement.querySelector('input');
+    const getAllChildrenOfTree = targetElement.parentElement.querySelectorAll('input');
 
     function isPrintableCharacter (str) {
       return str.length === 1 && str.match(/\S/);
@@ -139,23 +140,13 @@ export function Treeitem(aria) {
       switch (event.keyCode) {
         case this.keyCode.SPACE:
         case this.keyCode.RETURN:
-          // Create simulated mouse event to mimic the behavior of ATs
-          // and let the event handler handleClick do the housekeeping.
-          try {
-            clickEvent = new MouseEvent('click', {
-              'view': window,
-              'bubbles': true,
-              'cancelable': true
-            });
-          }
-          catch (err) {
-            if (document.createEvent) {
-              // DOM Level 3 for IE 9+
-              clickEvent = document.createEvent('MouseEvents');
-              clickEvent.initEvent('click', true, true);
+          const typeOfInput = getCurrentCheckbox.type
+          if(typeOfInput === 'radio') {
+            for (let item of getAllChildrenOfTree) {
+              item.checked = false
             }
           }
-          tgt.dispatchEvent(clickEvent);
+          getCurrentCheckbox.checked = getCurrentCheckbox.checked === true ? false : true
           flag = true;
           break;
 
@@ -257,4 +248,4 @@ export function Treeitem(aria) {
   aria.Treeitem.prototype.handleMouseOut = function (event) {
     event.currentTarget.classList.remove('c-tree__item--hover');
   };
-}
+}

package/src/js/desy-html.js

@@ -12,6 +12,8 @@ import { listbox } from './aria/listbox.js';
 import { alert } from './aria/alert.js';
 import { Treeitem } from './aria/treeitem.js';
 import { Tree } from './aria/tree.js';
+import { Toggle } from './aria/toggle.js';
+import { Collapsible } from './aria/collapsible.js';
 
 
 export function accordionComponent(aria) {
@@ -22,6 +24,14 @@ export function alertComponent(aria) {
   alert(aria);
 }
 
+export function toggleComponent(aria) {
+  Toggle(aria);
+}
+
+export function collapsibleComponent(aria) {
+  Collapsible(aria);
+}
+
 export function dialogComponent(aria) {
   utils(aria);
   dialog(aria);
@@ -223,7 +233,6 @@ export function menuNavigationComponent(aria) {
     const moduleValue = modules[item].getAttribute('data-module');
 
     if (moduleValue == 'c-menu-navigation'){
-      console.log(modules[item]);
       const menuNavigation = new aria.DisclosureNav(modules[item]);
       menuNavigation.init();
     }

package/src/js/index.js

@@ -6,6 +6,7 @@
 import {
   accordionComponent,
   alertComponent,
+  collapsibleComponent,
   dialogComponent,
   dropdownComponent,
   listboxComponent,
@@ -14,6 +15,7 @@ import {
   tableAdvancedComponent,
   tabsComponent,
   tooltipComponent,
+  toggleComponent,
   treeComponent
 } from './desy-html.js';
 
@@ -21,6 +23,7 @@ var aria = aria || {};
 
 accordionComponent(aria);
 alertComponent(aria);
+collapsibleComponent(aria);
 dialogComponent(aria);
 dropdownComponent(aria);
 listboxComponent(aria);
@@ -29,4 +32,13 @@ menuNavigationComponent(aria);
 tableAdvancedComponent(aria);
 tabsComponent(aria);
 tooltipComponent(aria);
+toggleComponent(aria);
 treeComponent(aria);
+
+document.querySelectorAll('.c-code-snippet__button').forEach(button => {
+  button.addEventListener('click', (event) => {
+    event.target.querySelector('.c-code-snippet__show').classList.toggle('hidden')
+    event.target.querySelector('.c-code-snippet__hide').classList.toggle('hidden')
+    event.target.nextElementSibling.classList.toggle('hidden')
+  });
+});

package/src/templates/components/accordion/_examples.accordion.njk

@@ -322,4 +322,4 @@
       ]
     }
   }
-] %}
+] %}

package/src/templates/components/accordion/_template.accordion.njk

@@ -24,31 +24,6 @@
 -#}
 <!-- accordion -->
 <div
-x-ref="accordion"
-x-data="{
-  showAll: true,
-  buttonText: 'Mostrar todo',
-  toggleShow: function(){
-    var buttons = this.$refs.accordion.querySelectorAll('.Accordion-trigger');
-    buttons.forEach((button) => {
-      if(this.showAll == true){
-        if(button.getAttribute('aria-expanded') == 'false'){
-          button.click();
-        }
-      } else {
-        if(button.getAttribute('aria-expanded') == 'true'){
-          button.click();
-        }
-      }
-    });
-    this.showAll = !this.showAll;
-    if(this.showAll) {
-      this.buttonText = 'Mostrar todo';
-    } else {
-      this.buttonText = 'Ocultar todo';
-    }
-  }
-}"
 {%- if params.classes %} class="{{ params.classes }}"{% endif %}
 {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <div class="flex justify-between">
@@ -71,15 +46,12 @@ x-data="{
   {% endif %}
   {% if params.showControl %}
     <button
-    x-ref="button"
-    @click="toggleShow"
-    x-text="buttonText"
     class="ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus">
       Mostrar todo
     </button>
   {% endif %}
   </div>
-  <div class="Accordion" {%- if params.allowToggle == true %} data-allow-toggle{% endif %} {%- if params.allowMultiple == true %} data-allow-multiple{% endif %}>
+  <div class="c-accordion" {%- if params.allowToggle == true %} data-allow-toggle{% endif %} {%- if params.allowMultiple == true %} data-allow-multiple{% endif %}>
     {% for item in params.items %}
       {% if item %}
       {%- if item.id -%}
@@ -97,7 +69,7 @@ x-data="{
         {% set insideContent %}
           <button
           id="{{ id }}-title"
-          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if item.disabled %} cursor-not-allowed{% endif %}"
+          class="c-accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if item.disabled %} cursor-not-allowed{% endif %}"
           aria-controls="{{ id }}"
           {% if item.open %}
             aria-expanded = "true"
@@ -109,14 +81,14 @@ x-data="{
             {{ item.headerHtml | safe if item.headerHtml else item.headerText }}
             <span
               class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none  {%- if item.disabled %} hidden{% endif %}" aria-hidden="true">
-                <span class="Accordion-show {%- if item.open %} hidden{%else%}{%endif%} {%- if item.show.classes %} {{ item.show.classes }}{%endif%}">
+                <span class="c-accordion-show {%- if item.open %} hidden{%else%}{%endif%} {%- if item.show.classes %} {{ item.show.classes }}{%endif%}">
                   {% if item.show %}
                     {{ item.show.html | safe if item.show.html else item.show.text }}
                   {% else %}
                     Mostrar
                   {% endif %}
                 </span>
-                <span class="Accordion-hide {%- if item.open %}{%else%} hidden{%endif%} {%- if item.hide.classes %} {{ item.hide.classes }}{%endif%}">
+                <span class="c-accordion-hide {%- if item.open %}{%else%} hidden{%endif%} {%- if item.hide.classes %} {{ item.hide.classes }}{%endif%}">
                   {% if item.hide %}
                     {{ item.hide.html | safe if item.hide.html else item.hide.text }}
                   {% else %}
@@ -147,7 +119,7 @@ x-data="{
         {%- if id %}
           id="{{ id }}"
         {% endif %}
-        class="Accordion-panel {%- if item.classes %} {{ item.classes }}{% endif %}"
+        class="c-accordion-panel {%- if item.classes %} {{ item.classes }}{% endif %}"
         {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
           {{ item.html | safe if item.html else item.text }}
         </div>
@@ -156,4 +128,4 @@ x-data="{
     {% endfor %}
   </div>
 </div>
-<!-- /accordion -->
+<!-- /accordion -->