desy-html 12.1.0 → 13.0.0

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

@@ -1,47 +1,47 @@
-/* ==========================================================================
-   _styles.select.css
-   ========================================================================== */
-
-@layer components {
-  .c-select--transparent {
-    @apply bg-transparent;
-    @apply border-transparent !important;
-    @apply shadow-none;
-    @apply text-primary-base;
-    @apply underline;
-    @apply cursor-pointer;
-
-    &:hover:not(disabled),
-    &.ds-hover:not(disabled) {
-      @apply bg-neutral-light;
-      @apply border-neutral-base !important;
-      @apply text-primary-base;
-    }
-
-    &[disabled],
-    &[disabled]:hover,
-    &[disabled]:focus,
-    &.c-button--disabled,
-    &.c-button--disabled:hover,
-    &.c-button--disabled:focus {
-      @apply bg-transparent;
-      @apply border-transparent !important;
-      @apply no-underline;
-    }
-  }
-
-
-  .c-select--base {
-    @apply pr-10;
-    @apply pl-3;
-    @apply py-2;
-    @apply text-base;
-  }
-
-
-  .c-select--sm {
-    @apply pl-2;
-    @apply py-1;
-    @apply text-sm;
-  }
-}
+/* ==========================================================================
+   _styles.select.css
+   ========================================================================== */
+
+@layer components {
+  .c-select--transparent {
+    @apply bg-transparent;
+    @apply border-transparent !important;
+    @apply shadow-none;
+    @apply text-primary-base;
+    @apply underline;
+    @apply cursor-pointer;
+
+    &:hover:not(disabled),
+    &.ds-hover:not(disabled) {
+      @apply bg-neutral-light;
+      @apply border-neutral-base !important;
+      @apply text-primary-base;
+    }
+
+    &[disabled],
+    &[disabled]:hover,
+    &[disabled]:focus,
+    &.c-button--disabled,
+    &.c-button--disabled:hover,
+    &.c-button--disabled:focus {
+      @apply bg-transparent;
+      @apply border-transparent !important;
+      @apply no-underline;
+    }
+  }
+
+
+  .c-select--base {
+    @apply pr-10;
+    @apply pl-3;
+    @apply py-2;
+    @apply text-base;
+  }
+
+
+  .c-select--sm {
+    @apply pl-2;
+    @apply py-1;
+    @apply text-sm;
+  }
+}

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

@@ -1,71 +1,68 @@
-{% from "../error-message/_macro.error-message.njk" import componentErrorMessage -%}
-{% from "../hint/_macro.hint.njk" import componentHint %}
-{% from "../label/_macro.label.njk" import componentLabel %}
-
-{#- a record of other elements that we need to associate with the input using
-   aria-describedby – for example hints or error messages -#}
-{% set describedBy = params.describedBy if params.describedBy else "" %}
-{% set errorId = params.id + '-error' %}
-<!-- select -->
-<div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
-  {{ componentLabel({
-    html: params.label.html,
-    text: params.label.text,
-    classes: params.label.classes,
-    isPageHeading: params.label.isPageHeading,
-    attributes: params.label.attributes,
-    for: params.id
-  }) | indent(2) | trim }}
-{% if params.hint %}
-  {% set hintId = params.id + '-hint' %}
-  {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
-  {{ componentHint({
-    id: hintId,
-    classes: params.hint.classes,
-    attributes: params.hint.attributes,
-    html: params.hint.html,
-    text: params.hint.text
-  }) | indent(2) | trim }}
-{% endif %}
-{% if params.errorMessage %}
-  {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
-{% endif %}
-{% if params.errorMessage %}
-  {{ componentErrorMessage({
-    id: errorId,
-    classes: params.errorMessage.classes,
-    attributes: params.errorMessage.attributes,
-    html: params.errorMessage.html,
-    text: params.errorMessage.text,
-    visuallyHiddenText: params.errorMessage.visuallyHiddenText
-  }) | indent(2) | trim }}
-{% endif %}
-  <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} c-select--error border-alert-base ring-2 ring-alert-base {% endif %}" id="{{ params.id }}" name="{{ params.name }}" {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %} {%- if params.errorMessage %} aria-errorMessage="{{ errorId }}" aria-invalid="true"{% endif %} {{-" disabled" if params.disabled }} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  {% for item in params.items %}
-    {% if item %}
-      {% if item.optgroup %}
-    <optgroup {%- if item.optgroup.label %} label="{{ item.optgroup.label }}"{% endif %} {%- if item.optgroup.disabled %} disabled{% endif %}>
-          {% if item.optgroup.items %}
-            {% for sub in item.optgroup.items %}
-      <option value="{{ sub.value }}"
-      {{-" selected" if sub.selected }}
-      {{-" disabled" if sub.disabled }}
-      {{-" hidden" if sub.hidden }}
-      {%- for attribute, value in sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>{{ sub.text }}</option>
-            {% endfor %}
-          {% endif %}
-    </optgroup>
-        {% for sub in item.optgroup.items %}
-        {% endfor %}
-      {% else %}
-    <option value="{{ item.value }}"
-      {{-" selected" if item.selected }}
-      {{-" disabled" if item.disabled }}
-      {{-" hidden" if item.hidden }}
-      {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>{{ item.text }}</option>
-      {% endif %}
-    {% endif %}
-  {% endfor %}
-  </select>
-</div>
+{% from "../error-message/_macro.error-message.njk" import componentErrorMessage -%}
+{% from "../hint/_macro.hint.njk" import componentHint %}
+{% from "../label/_macro.label.njk" import componentLabel %}
+
+{#- a record of other elements that we need to associate with the input using
+   aria-describedby – for example hints or error messages -#}
+{% set describedBy = params.describedBy if params.describedBy else "" %}
+{% set errorId = params.id + '-error' %}
+<!-- select -->
+<div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+  {{ componentLabel({
+    html: params.label.html,
+    text: params.label.text,
+    classes: params.label.classes,
+    isPageHeading: params.label.isPageHeading,
+    attributes: params.label.attributes,
+    for: params.id
+  }) | indent(2) | trim }}
+{% if params.hint %}
+  {% set hintId = params.id + '-hint' %}
+  {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
+  {{ componentHint({
+    id: hintId,
+    classes: params.hint.classes,
+    attributes: params.hint.attributes,
+    html: params.hint.html,
+    text: params.hint.text
+  }) | indent(2) | trim }}
+{% endif %}
+{% if params.errorMessage %}
+  {{ componentErrorMessage({
+    id: errorId,
+    classes: params.errorMessage.classes,
+    attributes: params.errorMessage.attributes,
+    html: params.errorMessage.html,
+    text: params.errorMessage.text,
+    visuallyHiddenText: params.errorMessage.visuallyHiddenText
+  }) | indent(2) | trim }}
+{% endif %}
+  <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} c-select--error border-alert-base ring-2 ring-alert-base {% endif %}" id="{{ params.id }}" name="{{ params.name }}" {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %} {%- if params.errorMessage %} aria-errorMessage="{{ errorId }}" aria-invalid="true"{% endif %} {{-" disabled" if params.disabled }} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {% for item in params.items %}
+    {% if item %}
+      {% if item.optgroup %}
+    <optgroup {%- if item.optgroup.label %} label="{{ item.optgroup.label }}"{% endif %} {%- if item.optgroup.disabled %} disabled{% endif %}>
+          {% if item.optgroup.items %}
+            {% for sub in item.optgroup.items %}
+      <option value="{{ sub.value }}"
+      {{-" selected" if sub.selected }}
+      {{-" disabled" if sub.disabled }}
+      {{-" hidden" if sub.hidden }}
+      {%- for attribute, value in sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>{{ sub.text }}</option>
+            {% endfor %}
+          {% endif %}
+    </optgroup>
+        {% for sub in item.optgroup.items %}
+        {% endfor %}
+      {% else %}
+    <option value="{{ item.value }}"
+      {{-" selected" if item.selected }}
+      {{-" disabled" if item.disabled }}
+      {{-" hidden" if item.hidden }}
+      {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>{{ item.text }}</option>
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+  </select>
+</div>
 <!-- /select -->

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

@@ -1,94 +1,94 @@
-params:
-- name: id
-  type: string
-  required: true
-  description: Id for each select box.
-- name: name
-  type: string
-  required: true
-  description: Name property for the select.
-- name: items
-  type: array
-  required: true
-  description: Array of option items for the select.
-  params:
-  - name: value
-    type: string
-    required: false
-    description: Value for the option item.
-  - name: text
-    type: string
-    required: true
-    description: Text for the option item.
-  - name: optgroup
-    type: boolean
-    required: false
-    description: If true, there will be an optgroup with items.
-  - name: optgroup.label
-    type: string
-    required: false
-    description: Label for the optgroup.
-  - name: optgroup.disabled
-    type: boolean
-    required: false
-    description: If true, the optgroup will be disabled.
-  - name: optgroup.items
-    type: array
-    required: false
-    description: Provide subitems for the optgroup.
-  - name: selected
-    type: boolean
-    required: false
-    description: Sets the option as the selected.
-  - name: disabled
-    type: boolean
-    required: false
-    description: Sets the option item as disabled.
-  - name: hidden
-    type: boolean
-    required: false
-    description: Sets the option item as hidden.
-  - name: attributes
-    type: object
-    required: false
-    description: HTML attributes (for example data attributes) to add to the option.
-- name: describedBy
-  type: string
-  required: false
-  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
-- name: label
-  type: object
-  required: false
-  description: Label text or HTML by specifying value for either text or html keys.
-  isComponent: true
-- name: hint
-  type: object
-  required: false
-  description: Options for the hint component.
-  isComponent: true
-- name: errorMessage
-  type: object
-  required: false
-  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
-  isComponent: true
-- name: formGroup
-  type: object
-  required: false
-  description: Options for the form-group wrapper
-  params:
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the form group (e.g. to show error state for the whole group)
-- name: disabled
-  type: boolean
-  required: false
-  description: If true, select will be disabled.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the select.
-- name: attributes
-  type: object
-  required: false
+params:
+- name: id
+  type: string
+  required: true
+  description: Id for each select box.
+- name: name
+  type: string
+  required: true
+  description: Name property for the select.
+- name: items
+  type: array
+  required: true
+  description: Array of option items for the select.
+  params:
+  - name: value
+    type: string
+    required: false
+    description: Value for the option item.
+  - name: text
+    type: string
+    required: true
+    description: Text for the option item.
+  - name: optgroup
+    type: boolean
+    required: false
+    description: If true, there will be an optgroup with items.
+  - name: optgroup.label
+    type: string
+    required: false
+    description: Label for the optgroup.
+  - name: optgroup.disabled
+    type: boolean
+    required: false
+    description: If true, the optgroup will be disabled.
+  - name: optgroup.items
+    type: array
+    required: false
+    description: Provide subitems for the optgroup.
+  - name: selected
+    type: boolean
+    required: false
+    description: Sets the option as the selected.
+  - name: disabled
+    type: boolean
+    required: false
+    description: Sets the option item as disabled.
+  - name: hidden
+    type: boolean
+    required: false
+    description: Sets the option item as hidden.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the option.
+- name: describedBy
+  type: string
+  required: false
+  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
+- name: label
+  type: object
+  required: false
+  description: Label text or HTML by specifying value for either text or html keys.
+  isComponent: true
+- name: hint
+  type: object
+  required: false
+  description: Options for the hint component.
+  isComponent: true
+- name: errorMessage
+  type: object
+  required: false
+  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
+  isComponent: true
+- name: formGroup
+  type: object
+  required: false
+  description: Options for the form-group wrapper
+  params:
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the form group (e.g. to show error state for the whole group)
+- name: disabled
+  type: boolean
+  required: false
+  description: If true, select will be disabled.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the select.
+- name: attributes
+  type: object
+  required: false
   description: HTML attributes (for example data attributes) to add to the select.

package/src/templates/components/skip-link/_examples.skip-link.njk

@@ -1,20 +1,20 @@
-{% set exampleComponent = "skip-link" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "description": "Para ver el componente Skip link, dale al tabulador en este ejemplo, o haz click dentro del ejemplo y presiona el tabulador.",
-    "data": {
-      "text": "Saltar al contenido principal",
-      "href": "#content"
-    }
-  },
-  {
-    "name": "con estado focus",
-    "description": "Simula activar la pseudoclase de CSS <code>:focus</code>",
-    "data": {
-      "classes": "ds-focus",
-      "text": "Saltar al contenido principal",
-      "href": "#content"
-    }
-  }
+{% set exampleComponent = "skip-link" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "description": "Para ver el componente Skip link, dale al tabulador en este ejemplo, o haz click dentro del ejemplo y presiona el tabulador.",
+    "data": {
+      "text": "Saltar al contenido principal",
+      "href": "#content"
+    }
+  },
+  {
+    "name": "con estado focus",
+    "description": "Simula activar la pseudoclase de CSS <code>:focus</code>",
+    "data": {
+      "classes": "ds-focus",
+      "text": "Saltar al contenido principal",
+      "href": "#content"
+    }
+  }
 ] %}

package/src/templates/components/skip-link/_macro.skip-link.njk

@@ -1,3 +1,3 @@
-{% macro componentSkipLink(params) %}
-{% include "./_template.skip-link.njk" %}
-{% endmacro %}
+{% macro componentSkipLink(params) %}
+{% include "./_template.skip-link.njk" %}
+{% endmacro %}

package/src/templates/components/skip-link/_styles.skip-link.css

@@ -1,13 +1,13 @@
-/* ==========================================================================
-   _styles.skip-link.css
-   ========================================================================== */
-
-@layer components {
-  .c-skip-link {
-    &.ds-focus {
-      @apply not-sr-only;
-      @apply outline-none;
-      @apply shadow-outline-warning;
-    }
-  }
-}
+/* ==========================================================================
+   _styles.skip-link.css
+   ========================================================================== */
+
+@layer components {
+  .c-skip-link {
+    &.ds-focus {
+      @apply not-sr-only;
+      @apply outline-none;
+      @apply shadow-outline-warning;
+    }
+  }
+}

package/src/templates/components/skip-link/_template.skip-link.njk

@@ -1,5 +1,5 @@
-<!-- skip-link -->
-<a href="{{ params.href | default('#content') }}" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline {%- if params.classes %} {{ params.classes }}{% endif -%}"{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  {{- params.html | filterquotes | safe if params.html else params.text -}}
-</a>
+<!-- skip-link -->
+<a href="{{ params.href | default('#content') }}" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline {%- if params.classes %} {{ params.classes }}{% endif -%}"{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {{- params.html | filterquotes | safe if params.html else params.text -}}
+</a>
 <!-- /skip-link -->

package/src/templates/components/skip-link/params.skip-link.yaml

@@ -1,21 +1,21 @@
-params:
-- name: text
-  type: string
-  required: true
-  description: If `html` is set, this is not required. Text to use within the skip link component. 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 skip link component. If `html` is provided, the `text` argument will be ignored.
-- name: href
-  type: string
-  required: false
-  description: The value of the skip link’s `href` attribute. Defaults to `#content` if you do not provide a value.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the skip link.
-- name: attributes
-  type: object
-  required: false
+params:
+- name: text
+  type: string
+  required: true
+  description: If `html` is set, this is not required. Text to use within the skip link component. 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 skip link component. If `html` is provided, the `text` argument will be ignored.
+- name: href
+  type: string
+  required: false
+  description: The value of the skip link’s `href` attribute. Defaults to `#content` if you do not provide a value.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the skip link.
+- name: attributes
+  type: object
+  required: false
   description: HTML attributes (for example data attributes) to add to the skip link.

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

@@ -1,53 +1,53 @@
-{% set exampleComponent = "spinner" %}
-{% set examples =  [
-  {
-    "name": "default"
-  },
-  {
-    "name": "con texto para lector de pantalla",
-    "description": "Usa un texto personalizado para lectores de pantalla en vez del texto por defecto.",
-    "data": {
-      "text": "Espere por favor",
-      "classes": "text-neutral-base"
-    }
-  },
-  {
-    "name": "Tamaño xs",
-    "description": "Usa las clases de tamaño de texto para dar tamaño al Spinner.",
-    "data": {
-      "classes": "text-xs"
-    }
-  },
-  {
-    "name": "Tamaño lg",
-    "data": {
-      "classes": "text-lg"
-    }
-  },
-  {
-    "name": "Tamaño 6xl",
-    "data": {
-      "classes": "text-6xl"
-    }
-  },
-  {
-    "name": "color neutral color base",
-    "description": "Usa las clases de color de texto para dar color al Spinner.",
-    "data": {
-      "classes": "text-neutral-base"
-    }
-  },
-  {
-    "name": "color primario",
-    "data": {
-      "classes": "text-primary-base"
-    }
-  },
-  {
-    "name": "Establecida la anchura y altura del contenedor con clases",
-    "description": "Usa las clases de tamaño para cambiar las dimensiones del contenedor.",
-    "data": {
-      "classes": "border border-neutral-light w-60 h-60"
-    }
-  }
+{% set exampleComponent = "spinner" %}
+{% set examples =  [
+  {
+    "name": "default"
+  },
+  {
+    "name": "con texto para lector de pantalla",
+    "description": "Usa un texto personalizado para lectores de pantalla en vez del texto por defecto.",
+    "data": {
+      "text": "Espere por favor",
+      "classes": "text-neutral-base"
+    }
+  },
+  {
+    "name": "Tamaño xs",
+    "description": "Usa las clases de tamaño de texto para dar tamaño al Spinner.",
+    "data": {
+      "classes": "text-xs"
+    }
+  },
+  {
+    "name": "Tamaño lg",
+    "data": {
+      "classes": "text-lg"
+    }
+  },
+  {
+    "name": "Tamaño 6xl",
+    "data": {
+      "classes": "text-6xl"
+    }
+  },
+  {
+    "name": "color neutral color base",
+    "description": "Usa las clases de color de texto para dar color al Spinner.",
+    "data": {
+      "classes": "text-neutral-base"
+    }
+  },
+  {
+    "name": "color primario",
+    "data": {
+      "classes": "text-primary-base"
+    }
+  },
+  {
+    "name": "Establecida la anchura y altura del contenedor con clases",
+    "description": "Usa las clases de tamaño para cambiar las dimensiones del contenedor.",
+    "data": {
+      "classes": "border border-neutral-light w-60 h-60"
+    }
+  }
 ] %}