desy-html 6.1.0 → 6.3.0

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 -->

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

@@ -24,34 +24,9 @@
 -#}
 <!-- accordion-history -->
 <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">
+<div class="flex justify-between">
   {% if params.heading.html or params.heading.text %}
     {% set headingAttributes %}class="{% if params.heading.classes %}{{ params.heading.classes }}{% else %}c-h2 mb-base{% endif %}"{% endset %}
     {% set headingContent %}{{ params.heading.html | safe if params.heading.html else params.heading.text }}{% endset %}
@@ -71,9 +46,6 @@ 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>
@@ -107,6 +79,17 @@ x-data="{
           {% if item.disabled %} disabled{% endif %}
           >
             {{ item.headerHtml | safe if item.headerHtml else item.headerText }}
+            {% if item.status == 'current' %}
+              <span class="sr-only">(Estado: actual) </span>
+            {% elseif item.status == 'pending' %}
+              <span class="sr-only">(Estado: pendiente) </span>
+            {% elseif item.status == 'muted' %}
+              <span class="sr-only">(Estado: pasado) </span>
+            {% elseif item.status == 'currentmuted' %}
+              <span class="sr-only">(Estado: actual) </span>
+            {% else %}
+              <span class="sr-only">(Estado: pasado) </span>
+            {% endif %}
             <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%}">
@@ -206,4 +189,4 @@ x-data="{
     {% endfor %}
   </div>
 </div>
-<!-- /accordion-history -->
+<!-- /accordion-history -->

package/src/templates/components/button/_styles.button.css

@@ -67,6 +67,13 @@
   }
 
 
+  .c-button--base {
+    @apply px-3;
+    @apply py-2;
+    @apply text-base;
+  }
+
+
   .c-button--sm {
     @apply px-2;
     @apply py-1;

package/src/templates/components/button-loader/_styles.button-loader.css

@@ -77,6 +77,12 @@
     @apply pointer-events-none;
   }
 
+  .c-button-loader--base {
+    @apply px-3;
+    @apply py-2;
+    @apply text-base;
+  }
+
 
   .c-button-loader--sm {
     @apply px-2;

package/src/templates/components/checkboxes/_styles.checkboxes.css

@@ -3,6 +3,13 @@
    ========================================================================== */
 
 @layer components {
+  .c-checkboxes--base {
+    input[type="checkbox"] {
+      @apply w-6;
+      @apply h-6;
+    }
+  }
+
   .c-checkboxes--sm {
     input[type="checkbox"] {
       @apply w-base !important;

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

@@ -70,10 +70,10 @@
         {% set itemHintId = id + "-item-hint" if hasHint else "" %}
         {% set itemDescribedBy = describedBy if not hasFieldset else "" %}
         {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
-    <div x-data="{ isChecked: {% if not item.checked %}false{% else %}true{% endif %} }" {%- if item.indeterminateChecked %} x-init="$refs.inputCheck.indeterminate=$refs.inputCheck.readOnly=true"{% endif %} class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}">
+    <div class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}">
       <div class="relative flex items-start py-base">
         <div class="flex items-center mx-sm">
-          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
+          <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
           {{-" checked" if item.checked }}
           {{-" disabled" if item.disabled }}
           {%- if item.conditional.html %} aria-controls="{{ conditionalId }}"{% endif -%}
@@ -102,11 +102,7 @@
         </div>
       </div>
       {% if item.conditional.html %}
-        <div  x-show="isChecked"
-              x-transition:enter="transition ease-out duration-100 transform"
-              x-transition:enter-start="opacity-0 scale-95"
-              x-transition:enter-end="opacity-100 scale-100"
-              class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base" id="{{ conditionalId }}">
+        <div class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base" id="{{ conditionalId }}">
           {{ item.conditional.html | safe }}
         </div>
       {% endif %}
@@ -133,4 +129,4 @@
     {{ innerHtml | trim | safe }}
   {% endif %}
 </div>
-<!-- /checkboxes -->
+<!-- /checkboxes -->

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

@@ -1,16 +1,10 @@
 <!-- collapsible -->
-<div x-data="{ isOpen: {%- if params.open == true %}true{% else %}false{% endif %} }"  class="{%- if params.classes %} {{ params.classes }}{% else -%} -my-px py-sm border-t border-b border-neutral-base{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-  <h3>
-  	<button @click="isOpen = !isOpen" x-bind:aria-expanded="String(isOpen)" {%- if params.id %} id="{{params.id}}-title"{% endif %} class="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 params.id %} aria-controls="{{params.id}}"{% endif %}>{{ params.headerHtml | safe if params.headerHtml else params.headerText }} <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black" aria-hidden="true" x-text="isOpen? 'Ocultar' : 'Mostrar'">Mostrar</span></button>
-  </h3>
-  <div  {%- if params.id %} id="{{params.id}}"{% endif %}
-        x-show="isOpen"
-        x-transition:enter="transition ease-out duration-100 transform"
-        x-transition:enter-start="opacity-0 scale-y-95"
-        x-transition:enter-end="opacity-100 scale-y-100"
-        x-transition:leave="transition ease-in duration-75 transform"
-        x-transition:leave-start="opacity-100 scale-y-100"
-        x-transition:leave-end="opacity-0 scale-y-95" class="py-sm">
+<div class="{%- if params.classes %} {{ params.classes }}{% else -%} -my-px py-sm border-t border-b border-neutral-base{% endif %} c-collapsible" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+	<button aria-expanded="false" {%- if params.id %} id="{{params.id}}-title"{% endif %} class="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 params.id %} aria-controls="{{params.id}}"{% endif %}>{{ params.headerHtml | safe if params.headerHtml else params.headerText }}
+  <span class="c-collapsible__show absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none " aria-hidden="false">Mostrar</span>
+  <span class="c-collapsible__hide absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none  hidden" aria-hidden="true">Ocultar</span>
+  </button>
+  <div aria-hidden="true" class="c-collapsible__content hidden py-sm" {%- if params.id %} id="{{params.id}}"{% endif %}
     {% if params.html %}
     {{ params.html | safe }}
     {% else %}
@@ -20,4 +14,4 @@
     {% endif %}
   </div>
 </div>
-<!-- /collapsible -->
+<!-- /collapsible -->

package/src/templates/components/dropdown/_styles.dropdown.css

@@ -62,6 +62,13 @@
   }
 
 
+  .c-dropdown--base {
+    @apply px-3;
+    @apply py-2;
+    @apply text-base;
+  }
+
+
   .c-dropdown--sm {
     @apply px-2;
     @apply py-1;
@@ -151,7 +158,7 @@
 
 
   .c-dropdown--header {
-    @apply bg-neutral-lighter;
+    @apply bg-transparent;
     @apply border-none;
     @apply rounded-none;
     @apply shadow-none;
@@ -162,7 +169,7 @@
     &:hover:not(disabled),
     &:active:not(disabled),
     &.ds-hover:not(disabled) {
-      @apply bg-neutral-lighter;
+      @apply bg-transparent;
       @apply border-none;
       @apply shadow-none;
       @apply text-black;

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

@@ -62,7 +62,7 @@
     "description": "Substitute default text for custom one",
     "data": {
       "description": {
-        "html": '<div><p>Copyright © AST. Aragonesa de Servicios Telemáticos.</p></div><div><p>Avda. Ranillas 3A. Planta 3ª ofc. J. 50018 Zaragoza. Tel: 976 714 495. <a href="mailto:ast@aragon.es" class="c-link c-link--neutral">ast@aragon.es</a></p></div>'
+        "html": '<div><p>Copyright © AST. Aragonesa de Servicios Telemáticos.</p></div><div><p>Avda. Ranillas 3A. Planta 3ª. Oficina J. 50018 Zaragoza. Teléfono: 976 714 495. <a href="mailto:ast@aragon.es" class="c-link c-link--neutral">ast@aragon.es</a></p></div>'
       },
       "classes": "lg:mt-48"
     }
@@ -115,7 +115,7 @@
     "data": {
       "noLogo": true,
       "description": {
-        "html": '<p>Copyright © AST. Aragonesa de Servicios Telemáticos.</p><p>Avda. Ranillas 3A. Planta 3ª ofc. J. 50018 Zaragoza. Tel: 976 714 495. <a href="mailto:ast@aragon.es" class="c-link c-link--neutral">ast@aragon.es</a></p>'
+        "html": '<p>Copyright © AST. Aragonesa de Servicios Telemáticos.</p><p>Avda. Ranillas 3A. Planta 3ª Oficina J. 50018 Zaragoza. Teléfono: 976 714 495. <a href="mailto:ast@aragon.es" class="c-link c-link--neutral">ast@aragon.es</a></p>'
       },
       "classes": "lg:mt-48"
     }

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

@@ -73,7 +73,7 @@ text-neutral-dark {{ params.classes if params.classes }}"
               <a
                 class="c-link c-link--neutral"
                 href="https://www.aragon.es/"
-              >Gobierno de Aragón</a>. Edificio Pignatelli. <abbr title=”Paseo”>Pº</abbr> María Agustín, 36. 50004 - Zaragoza - <abbr title="Teléfono" class="no-underline">Tel.</abbr> <a href="tel:+976714000" class="c-link c-link--neutral">976 714 000</a>
+              >Gobierno de Aragón</a>. Edificio Pignatelli. <abbr title="Paseo">Pº</abbr> María Agustín, 36. 50004 - Zaragoza - <abbr title="Teléfono">Tel.</abbr> <a href="tel:+976714000" class="c-link c-link--neutral">976 714 000</a>
             </p>
           </div>
         {% endif %}