desy-html 12.1.0 → 13.0.0

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

@@ -1,204 +1,204 @@
-/* ==========================================================================
-   _styles.dropdown.css
-   ========================================================================== */
-
-@layer components {
-  .c-dropdown {
-    @apply inline-flex;
-    @apply items-baseline;
-    @apply px-3;
-    @apply py-2;
-    @apply bg-white;
-    @apply border;
-    @apply border-primary-base;
-    @apply rounded;
-    @apply align-baseline;
-    @apply font-semibold;
-    @apply text-primary-base;
-    @apply transition-all;
-    @apply duration-100;
-    @apply ease-out;
-    @apply whitespace-nowrap;
-    @apply cursor-pointer;
-
-    @apply focus:bg-warning-base;
-    @apply focus:border-warning-base;
-    @apply focus:shadow-outline-black;
-    @apply focus:text-black;
-    @apply focus:outline-none;
-
-    &:hover:not(disabled),
-    &:active:not(disabled),
-    &.ds-hover:not(disabled) {
-      @apply bg-neutral-light;
-      @apply border-primary-base;
-      @apply text-primary-base;
-    }
-
-    &:active:not(disabled),
-    &.ds-active:not(disabled) {
-      @apply relative;
-      @apply top-px;
-    }
-
-    &.ds-focus {
-      @apply bg-warning-base;
-      @apply border-warning-base;
-      @apply shadow-outline-black;
-      @apply text-black;
-      @apply outline-none;
-    }
-
-    &[disabled],
-    &[disabled]:hover,
-    &[disabled]:focus,
-    &.c-button--disabled,
-    &.c-button--disabled:hover,
-    &.c-button--disabled:focus {
-      @apply bg-white;
-      @apply opacity-50;
-      @apply cursor-not-allowed;
-    }
-  }
-
-
-  .c-dropdown--base {
-    @apply px-3;
-    @apply py-2;
-    @apply text-base;
-  }
-
-
-  .c-dropdown--lg {
-    @apply px-4;
-    @apply py-3;
-    @apply text-lg;
-  }
-
-
-  .c-dropdown--sm {
-    @apply px-2;
-    @apply py-1;
-    @apply text-sm;
-  }
-
-
-  .c-dropdown--primary {
-    @apply bg-primary-base;
-    @apply text-white;
-    @apply shadow-solid-primary-dark;
-
-    &:hover:not(disabled),
-    &:active:not(disabled),
-    &.ds-hover:not(disabled) {
-      @apply bg-primary-dark;
-      @apply border-primary-dark;
-      @apply text-white;
-    }
-
-    &[disabled],
-    &[disabled]:hover,
-    &[disabled]:focus,
-    &.c-button--disabled,
-    &.c-button--disabled:hover,
-    &.c-button--disabled:focus {
-      @apply bg-primary-base;
-    }
-  }
-
-
-  .c-dropdown--has-selection {
-    @apply bg-primary-light;
-    @apply text-primary-dark;
-    @apply border-primary-base;
-    @apply shadow-none;
-    @apply font-bold;
-
-    &:hover:not(disabled),
-    &:active:not(disabled),
-    &.ds-hover:not(disabled) {
-      @apply bg-primary-light;
-      @apply text-black;
-      @apply bg-opacity-50;
-    }
-
-    &:active:not(disabled),
-    &.ds-active:not(disabled) {
-      @apply shadow-none;
-    }
-
-    &[disabled],
-    &[disabled]:hover,
-    &[disabled]:focus,
-    &.c-button--disabled,
-    &.c-button--disabled:hover,
-    &.c-button--disabled:focus {
-      @apply bg-primary-light;
-    }
-  }
-
-
-  .c-dropdown--transparent {
-    @apply bg-transparent;
-    @apply border-transparent;
-    @apply shadow-none;
-    @apply underline;
-
-    &:hover:not(disabled),
-    &.ds-hover:not(disabled) {
-      @apply text-primary-dark;
-      @apply border-neutral-base;
-      @apply shadow-none;
-    }
-
-    &[disabled],
-    &[disabled]:hover,
-    &[disabled]:focus,
-    &.c-button--disabled,
-    &.c-button--disabled:hover,
-    &.c-button--disabled:focus {
-      @apply bg-transparent;
-      @apply border-transparent;
-      @apply no-underline;
-    }
-  }
-
-
-  .c-dropdown--header {
-    @apply bg-transparent;
-    @apply border-none;
-    @apply rounded-none;
-    @apply shadow-none;
-    @apply font-normal;
-    @apply text-sm;
-    @apply text-black;
-
-    &:hover:not(disabled),
-    &:active:not(disabled),
-    &.ds-hover:not(disabled) {
-      @apply bg-transparent;
-      @apply border-none;
-      @apply shadow-none;
-      @apply text-black;
-      @apply underline;
-    }
-
-    &[disabled],
-    &[disabled]:hover,
-    &[disabled]:focus,
-    &.c-button--disabled,
-    &.c-button--disabled:hover,
-    &.c-button--disabled:focus {
-      @apply bg-transparent;
-    }
-  }
-
-
-  .c-dropdown__tooltip {
-    @apply hidden;
-
-    .tippy-content & {
-      @apply block;
-    }
-  }
+/* ==========================================================================
+   _styles.dropdown.css
+   ========================================================================== */
+
+@layer components {
+  .c-dropdown {
+    @apply inline-flex;
+    @apply items-baseline;
+    @apply px-3;
+    @apply py-2;
+    @apply bg-white;
+    @apply border;
+    @apply border-primary-base;
+    @apply rounded;
+    @apply align-baseline;
+    @apply font-semibold;
+    @apply text-primary-base;
+    @apply transition-all;
+    @apply duration-100;
+    @apply ease-out;
+    @apply whitespace-nowrap;
+    @apply cursor-pointer;
+
+    @apply focus:bg-warning-base;
+    @apply focus:border-warning-base;
+    @apply focus:shadow-outline-black;
+    @apply focus:text-black;
+    @apply focus:outline-none;
+
+    &:hover:not(disabled),
+    &:active:not(disabled),
+    &.ds-hover:not(disabled) {
+      @apply bg-neutral-light;
+      @apply border-primary-base;
+      @apply text-primary-base;
+    }
+
+    &:active:not(disabled),
+    &.ds-active:not(disabled) {
+      @apply relative;
+      @apply top-px;
+    }
+
+    &.ds-focus {
+      @apply bg-warning-base;
+      @apply border-warning-base;
+      @apply shadow-outline-black;
+      @apply text-black;
+      @apply outline-none;
+    }
+
+    &[disabled],
+    &[disabled]:hover,
+    &[disabled]:focus,
+    &.c-button--disabled,
+    &.c-button--disabled:hover,
+    &.c-button--disabled:focus {
+      @apply bg-white;
+      @apply opacity-50;
+      @apply cursor-not-allowed;
+    }
+  }
+
+
+  .c-dropdown--base {
+    @apply px-3;
+    @apply py-2;
+    @apply text-base;
+  }
+
+
+  .c-dropdown--lg {
+    @apply px-4;
+    @apply py-3;
+    @apply text-lg;
+  }
+
+
+  .c-dropdown--sm {
+    @apply px-2;
+    @apply py-1;
+    @apply text-sm;
+  }
+
+
+  .c-dropdown--primary {
+    @apply bg-primary-base;
+    @apply text-white;
+    @apply shadow-solid-primary-dark;
+
+    &:hover:not(disabled),
+    &:active:not(disabled),
+    &.ds-hover:not(disabled) {
+      @apply bg-primary-dark;
+      @apply border-primary-dark;
+      @apply text-white;
+    }
+
+    &[disabled],
+    &[disabled]:hover,
+    &[disabled]:focus,
+    &.c-button--disabled,
+    &.c-button--disabled:hover,
+    &.c-button--disabled:focus {
+      @apply bg-primary-base;
+    }
+  }
+
+
+  .c-dropdown--has-selection {
+    @apply bg-primary-light;
+    @apply text-primary-dark;
+    @apply border-primary-base;
+    @apply shadow-none;
+    @apply font-bold;
+
+    &:hover:not(disabled),
+    &:active:not(disabled),
+    &.ds-hover:not(disabled) {
+      @apply bg-primary-light;
+      @apply text-black;
+      @apply bg-opacity-50;
+    }
+
+    &:active:not(disabled),
+    &.ds-active:not(disabled) {
+      @apply shadow-none;
+    }
+
+    &[disabled],
+    &[disabled]:hover,
+    &[disabled]:focus,
+    &.c-button--disabled,
+    &.c-button--disabled:hover,
+    &.c-button--disabled:focus {
+      @apply bg-primary-light;
+    }
+  }
+
+
+  .c-dropdown--transparent {
+    @apply bg-transparent;
+    @apply border-transparent;
+    @apply shadow-none;
+    @apply underline;
+
+    &:hover:not(disabled),
+    &.ds-hover:not(disabled) {
+      @apply text-primary-dark;
+      @apply border-neutral-base;
+      @apply shadow-none;
+    }
+
+    &[disabled],
+    &[disabled]:hover,
+    &[disabled]:focus,
+    &.c-button--disabled,
+    &.c-button--disabled:hover,
+    &.c-button--disabled:focus {
+      @apply bg-transparent;
+      @apply border-transparent;
+      @apply no-underline;
+    }
+  }
+
+
+  .c-dropdown--header {
+    @apply bg-transparent;
+    @apply border-none;
+    @apply rounded-none;
+    @apply shadow-none;
+    @apply font-normal;
+    @apply text-sm;
+    @apply text-black;
+
+    &:hover:not(disabled),
+    &:active:not(disabled),
+    &.ds-hover:not(disabled) {
+      @apply bg-transparent;
+      @apply border-none;
+      @apply shadow-none;
+      @apply text-black;
+      @apply underline;
+    }
+
+    &[disabled],
+    &[disabled]:hover,
+    &[disabled]:focus,
+    &.c-button--disabled,
+    &.c-button--disabled:hover,
+    &.c-button--disabled:focus {
+      @apply bg-transparent;
+    }
+  }
+
+
+  .c-dropdown__tooltip {
+    @apply hidden;
+
+    .tippy-content & {
+      @apply block;
+    }
+  }
 }

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

@@ -1,35 +1,35 @@
-{%- set classNames = "c-dropdown" -%}
-
-{%- if params.classes %}
-  {% set classNames = classNames + " " + params.classes %}
-{% endif %}
-
-{% set iconHtml %}
-{#- The SVG needs `focusable="false"` so that Internet Explorer does not
-treat it as an interactive element - without this it will be
-'focusable' when using the keyboard to navigate. #}
-<svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg>
-{% endset %}
-
-
-{%- set commonAttributes %} class="{{ classNames }}" data-module="c-dropdown-button" aria-haspopup="true" {% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}{% endset %}
-
-<!-- dropdown -->
-<div data-module="c-dropdown" class="{% if params.classesContainer %}{{ params.classesContainer }}{% else %} relative{% endif %}">
-  <button {{- commonAttributes | safe }}>
-    <span class="inline-flex self-center max-w-xs align-middle truncate">{{ params.html | filterquotes | safe if params.html else params.text }}</span>
-    {# Indentation is intentional to output HTML nicely #}
-    {{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
-  </button>
-  {% if params.hiddenText  %}
-  <span class="sr-only">{{ params.hiddenText }}</span>
-  {% endif  %}
-  <div class="c-dropdown__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white {%- if params.classesTooltip %} {{ params.classesTooltip }}{% endif %}" data-module="c-dropdown-tooltip" >
-    {% if caller %}
-    {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
-    {% elseif params.caller %}
-    {{ params.caller | safe }}
-    {% endif %}
-  </div>
-</div>
+{%- set classNames = "c-dropdown" -%}
+
+{%- if params.classes %}
+  {% set classNames = classNames + " " + params.classes %}
+{% endif %}
+
+{% set iconHtml %}
+{#- The SVG needs `focusable="false"` so that Internet Explorer does not
+treat it as an interactive element - without this it will be
+'focusable' when using the keyboard to navigate. #}
+<svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg>
+{% endset %}
+
+
+{%- set commonAttributes %} class="{{ classNames }}" data-module="c-dropdown-button" aria-haspopup="true" {% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}{% endset %}
+
+<!-- dropdown -->
+<div data-module="c-dropdown" class="{% if params.classesContainer %}{{ params.classesContainer }}{% else %} relative{% endif %}">
+  <button {{- commonAttributes | safe }}>
+    <span class="inline-flex self-center align-middle">{{ params.html | filterquotes | safe if params.html else params.text }}</span>
+    {# Indentation is intentional to output HTML nicely #}
+    {{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
+  </button>
+  {% if params.hiddenText  %}
+  <span class="sr-only">{{ params.hiddenText }}</span>
+  {% endif  %}
+  <div class="c-dropdown__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white {%- if params.classesTooltip %} {{ params.classesTooltip }}{% endif %}" data-module="c-dropdown-tooltip" >
+    {% if caller %}
+    {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
+    {% elseif params.caller %}
+    {{ params.caller | safe }}
+    {% endif %}
+  </div>
+</div>
 <!-- /dropdown -->

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

@@ -1,33 +1,33 @@
-params:
-- name: text
-  type: string
-  required: true
-  description: If `html` is set, this is not required. Text for the dropdown. 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 for the dropdown. If `html` is provided, the `text` argument will be ignored.
-- name: hiddenText
-  type: string
-  required: false
-  description: Text for screenreaders only after the dropdown element.
-- name: classesContainer
-  type: string
-  required: false
-  description: Classes to add to the container div of dropdown and tooltip elements.
-- name: classesTooltip
-  type: string
-  required: false
-  description: Classes to add to the tooltip content.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the dropdown element.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the dropdown element.
-- name: caller
-  type: nunjucks-block
-  required: false
+params:
+- name: text
+  type: string
+  required: true
+  description: If `html` is set, this is not required. Text for the dropdown. 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 for the dropdown. If `html` is provided, the `text` argument will be ignored.
+- name: hiddenText
+  type: string
+  required: false
+  description: Text for screenreaders only after the dropdown element.
+- name: classesContainer
+  type: string
+  required: false
+  description: Classes to add to the container div of dropdown and tooltip elements.
+- name: classesTooltip
+  type: string
+  required: false
+  description: Classes to add to the tooltip content.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the dropdown element.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the dropdown element.
+- name: caller
+  type: nunjucks-block
+  required: false
   description: Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire dropdown component in a `call` block.

package/src/templates/components/error-message/_examples.error-message.njk

@@ -1,15 +1,15 @@
-{% set exampleComponent = "error-message" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "text": "Error: esto es un mensaje de error"
-    }
-  },
-  {
-    "name": "con HTML",
-    "data": {
-      "html": "Error: esto es un <em>mensaje de error con HTML</em>"
-    }
-  }
+{% set exampleComponent = "error-message" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "text": "Error: esto es un mensaje de error"
+    }
+  },
+  {
+    "name": "con HTML",
+    "data": {
+      "html": "Error: esto es un <em>mensaje de error con HTML</em>"
+    }
+  }
 ] %}

package/src/templates/components/error-message/_macro.error-message.njk

@@ -1,5 +1,5 @@
-<!-- _macro.error-message.njk -->
-
-{% macro componentErrorMessage(params) %}
-{% include "./_template.error-message.njk" %}
-{% endmacro %}
+<!-- _macro.error-message.njk -->
+
+{% macro componentErrorMessage(params) %}
+{% include "./_template.error-message.njk" %}
+{% endmacro %}

package/src/templates/components/error-message/_template.error-message.njk

@@ -1,8 +1,8 @@
-{% set visuallyHiddenText = params.visuallyHiddenText | default("Error") -%}
-
-<!-- error-message -->
-<p {%- if params.id %} id="{{ params.id }}"{% endif %} class="block font-semibold text-alert-base {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-  {% if visuallyHiddenText %}
-  <span class="sr-only">{{ visuallyHiddenText }}:</span>{% endif -%}{{ params.html | filterquotes | safe if params.html else params.text }}
-</p>
-<!-- /error-message -->
+{% set visuallyHiddenText = params.visuallyHiddenText | default("Error") -%}
+
+<!-- error-message -->
+<p {%- if params.id %} id="{{ params.id }}"{% endif %} class="block font-semibold text-alert-base {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+  {% if visuallyHiddenText %}
+  <span class="sr-only">{{ visuallyHiddenText }}:</span>{% endif -%}{{ params.html | filterquotes | safe if params.html else params.text }}
+</p>
+<!-- /error-message -->

package/src/templates/components/error-message/params.error-message.yaml

@@ -1,24 +1,24 @@
-params:
-- name: text
-  type: string
-  required: true
-  description: If `html` is set, this is not required. Text to use within the error message. 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 error message. If `html` is provided, the `text` argument will be ignored.
-- name: id
-  type: string
-  required: false
-  description: Id attribute to add to the error message span tag.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the error message span tag.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the error message span tag
-- name: visuallyHiddenText
-  type: string
+params:
+- name: text
+  type: string
+  required: true
+  description: If `html` is set, this is not required. Text to use within the error message. 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 error message. If `html` is provided, the `text` argument will be ignored.
+- name: id
+  type: string
+  required: false
+  description: Id attribute to add to the error message span tag.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the error message span tag.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the error message span tag
+- name: visuallyHiddenText
+  type: string
   description: A visually hidden prefix used before the error message. Defaults to "Error".