desy-html 5.0.1 → 5.2.1

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

@@ -614,6 +614,175 @@
       ]
     }
   },
+  {
+    "name": "With one disabled parent item",
+    "data": {
+      "id": "with-disabled",
+      "idPrefix": "disabled-example",
+      "ariaLabel":"Menubar description",
+      "items": [
+        {
+          "text": "Menuitem",
+          "ariaLabel": "Menuitem",
+          "id": "menuitems-disabled-example-item-1-2",
+          "disabled": true,
+          "sub": {
+            "items": [
+              {
+                "role": "menuitem",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 2"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "menuitems-disabled-example-item-1-2"
+            }
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitemcheckbox",
+          "ariaLabel": "Menuitemcheckbox",
+          "id": "menuitems-disabled-example-item-2-2",
+          "classes": "mb-base mr-base",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 2",
+                "checked": true
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "menuitems-disabled-example-item-2-2"
+            }
+          }
+        },
+        {
+          "text": "Menuitemradio",
+          "ariaLabel": "Menuitemradio",
+          "id": "menuitems-disabled-example-item-3-2",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "text": "Group",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 1"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 2",
+                    "checked": true
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 3"
+                  }
+                ]
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "menuitems-disabled-example-item-3-2"
+            }
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Mixed items",
+          "ariaLabel": "Mixeditems",
+          "id": "menuitems-disabled-example-item-4-2",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Tamaño de letra",
+                "items": [
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño mayor"
+                  },
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño menor"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de letra",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Negritas"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Itálicas"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de texto",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Ninguno"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Tachado"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Subrayado"
+                  }
+                ]
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "menuitems-disabled-example-item-4-2"
+            }
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitem solo",
+          "ariaLabel": "Menuitem solo",
+          "id": "menuitems-disabled-example-item-6-2",
+          "classes": "c-menubar__button--transparent mb-base mr-base",
+          "href": "#"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menubar description of use"
+      }
+    }
+  },
   {
     "name": "Small",
     "description": "Using modifier classes in items.",

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

@@ -73,6 +73,38 @@
         {
           "href": "#",
           "text": 6
+        },
+        {
+          "href": "#",
+          "text": 7
+        },
+        {
+          "href": "#",
+          "text": 8
+        },
+        {
+          "href": "#",
+          "text": 9
+        },
+        {
+          "href": "#",
+          "text": 10
+        },
+        {
+          "href": "#",
+          "text": 11
+        },
+        {
+          "href": "#",
+          "text": 12
+        },
+        {
+          "href": "#",
+          "text": 13
+        },
+        {
+          "href": "#",
+          "text": 14
         }
       ],
       "hasPrevious": true,

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

@@ -95,6 +95,7 @@
       "idPrefix": params.idPrefix,
       "text": "Página " + params.items[activePosition].text,
       "classes": "c-listbox--sm c-listbox--transparent mr-xs",
+      "classesTooltip": "max-h-52 overflow-y-auto",
       "doesChangeButtonText": true,
       "label": {
         "text": "Selecciona una página para cargar datos",

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

@@ -0,0 +1,52 @@
+{% set exampleComponent = "toggle" %}
+{% set examples =  [
+  {
+    "name": "default",
+    "description": "Button like appearance, no change of button text, only changes in visual state",
+    "data": {
+      "classes": "c-button c-button--transparent no-underline",
+      "offState": {
+        "classes": "",
+        "html": '<span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" width="1em" height="1em"><path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"/></svg>Notificar por correo electrónico</span>'
+      },
+      "onState": {
+        "classes": "",
+        "html": 'Notificar por correo electrónico'
+      }
+    }
+  },
+  {
+    "name": "2 icons",
+    "description": "Button like appearance, changes of button text, but no text changes for screenreaders",
+    "data": {
+      "classes": "c-button c-button--sm c-button--transparent no-underline",
+      "offState": {
+        "classes": "",
+        "html": '<span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M13.33 5.5c-.2-.21-.43-.46-.69-.72a.25.25 0 0 0-.18-.08.26.26 0 0 0-.17.07l-1.07 1.07a.24.24 0 0 0 0 .35c.21.21.41.42.61.64a.25.25 0 0 1 0 .34C10.57 8.53 9.11 9.93 7.16 10a.28.28 0 0 0-.17.07l-1.38 1.38a.25.25 0 0 0-.06.25.24.24 0 0 0 .19.17A6.4 6.4 0 0 0 7 12c3.1 0 5.2-2.28 6.33-3.5l.14-.15a2 2 0 0 0 0-2.7ZM13.78.22a.75.75 0 0 0-1.06 0l-2.47 2.47a.26.26 0 0 1-.29 0A6.51 6.51 0 0 0 7 2C3.9 2 1.8 4.28.67 5.5l-.14.15a2 2 0 0 0 0 2.7l.14.15a18.42 18.42 0 0 0 1.71 1.67.21.21 0 0 1 .09.18.23.23 0 0 1-.07.19L.22 12.72a.75.75 0 0 0 0 1.06.75.75 0 0 0 1.06 0l12.5-12.5a.75.75 0 0 0 0-1.06Zm-11.61 7a.25.25 0 0 1 0-.34C3.49 5.41 5 4 7 4a4.18 4.18 0 0 1 1.24.18.26.26 0 0 1 .17.18.27.27 0 0 1-.07.24L4.18 8.76a.26.26 0 0 1-.33 0 16 16 0 0 1-1.68-1.59Z" fill="currentColor" transform="scale(3.42857)"/></svg><span aria-hidden="true">Ocultar heredados del servicio</span><span class="sr-only">Mostrar heredados del servicio</span></span>'
+      },
+      "onState": {
+        "classes": "",
+        "html": '<span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><g transform="scale(3.42857)"><circle cx="7" cy="7" r="2" fill="currentColor" /><path d="m13.47 5.65-.14-.15C12.2 4.28 10.1 2 7 2S1.8 4.28.67 5.5l-.14.15a2 2 0 0 0 0 2.7l.14.15C1.8 9.72 3.9 12 7 12s5.2-2.28 6.33-3.5l.14-.15a2 2 0 0 0 0-2.7Zm-1.64 1.52C10.53 8.57 9 10 7 10S3.47 8.57 2.17 7.17a.25.25 0 0 1 0-.34C3.49 5.41 5 4 7 4s3.51 1.41 4.83 2.83a.25.25 0 0 1 0 .34Z" fill="currentColor"/></g></svg>Mostrar heredados del servicio</span>'
+      }
+    }
+  },
+  {
+    "name": "isSwitch",
+    "description": "Switch appearance, no change of button text, only changes in visual state. It needs an outer element with an id to use it with its aria-labelledby.",
+    "data": {
+      "classes": "",
+      "isSwitch": true,
+      "offState": {
+        "classes": "",
+        "html": '<span class="bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">on</span><span aria-hidden="true" class="translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200" /></span></span>'
+      },
+      "onState": {
+        "classes": "",
+        "html": '<span class="bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">off</span><span aria-hidden="true" class="translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200" /></span></span>'
+      },
+      "attributes": {
+        "aria-labelledby": "id-text"
+      }
+    }
+  }
+] %}

package/src/templates/components/toggle/_macro.toggle.njk

@@ -0,0 +1,3 @@
+{% macro componentToggle(params) %}
+{% include "./_template.toggle.njk" %}
+{% endmacro %}

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

@@ -0,0 +1,37 @@
+<div
+  x-data="{
+    pressed: {{ params.pressed if params.pressed else 'false' }},
+    offClasses: '{{ params.offState.classes if params.offState.classes else '' }}',
+    onClasses: '{{ params.onState.classes if params.onState.classes else '' }}',
+    toggle() {
+      if (this.pressed) {
+        return this.unpress()
+      }
+      this.pressed = true
+    },
+    unpress() {
+      this.pressed = false
+    }
+  }"
+  x-id="['toggle-button']"
+  class="relative"
+>
+  <!-- Button -->
+  <button
+    x-ref="button"
+    x-on:click="toggle()"
+    {% if params.isSwitch %}
+      role = "switch"
+      :aria-checked="pressed ? 'true' : 'false'"
+    {% else %}
+      :aria-pressed="pressed ? 'true' : 'false'"
+    {% endif %}
+    type="button"
+    class="{{ params.classes if params.classes else '' }}"
+    :class="pressed ? onClasses : offClasses"
+    {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
+  >
+    <span :class="pressed ? 'hidden' : ''">{{ params.offState.html | safe if params.offState.html else params.offState.text }}</span>
+    <span :class="pressed ? '' : 'hidden'">{{ params.onState.html | safe if params.onState.html else params.onState.text }}</span>
+  </button>
+</div>

package/src/templates/components/toggle/params.toggle.yaml

@@ -0,0 +1,57 @@
+params:
+- name: isSwitch
+  type: boolean
+  required: false
+  description: Defaults to `false`. If `true` the button has role `switch` and has `aria-checked` instead of `aria-pressed`.
+- name: pressed
+  type: boolean
+  required: false
+  description: Defaults to `false`. If `true` the button informs the screenreader that the button is pressed.
+- name: onState
+  type: object
+  required: true
+  description: On state elements
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within the state. If `html` is provided, the `text` argument will be ignored.
+  - name: html
+    type: string
+    required: true
+    description: If `text` is set, this is not required. HTML to use within the state. If `html` is provided, the `text` argument will be ignored.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the state span tag.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the state span tag.
+- name: offState
+  type: object
+  required: true
+  description: Off state elements
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within the state. If `html` is provided, the `text` argument will be ignored.
+  - name: html
+    type: string
+    required: true
+    description: If `text` is set, this is not required. HTML to use within the state. If `html` is provided, the `text` argument will be ignored.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the state span tag.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the state span tag.
+- name: classes
+    type: string
+    required: false
+    description: Classes to add to the test component span tag.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the test component span tag.