desy-html 10.2.2 → 11.0.1

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

@@ -1,102 +1,102 @@
-{% set exampleComponent = "pill" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "text": "Pill por defecto"
-    }
-  },
-  {
-    "name": "tipo enlace",
-    "data": {
-      "text": "Tipo enlace",
-      "href": "http://www.google.com"
-    }
-  },
-  {
-    "name": "Tipo enlace con target blank",
-    "data": {
-      "text": "Tipo enlace con target",
-      "href": "http://www.google.com",
-      "target": "_blank"
-    }
-  },
-  {
-    "name": "Tipo botón",
-    "data": {
-      "type": "button",
-      "text": "Tipo botón",
-      "classes": "cursor-pointer"
-    }
-  },
-  {
-    "name": "Tipo enlace o botón con estado hover",
-    "description": 'Simula activar la pseudoclase de CSS <code>:hover</code>',
-    "data": {
-      "type": "button",
-      "text": "Hover",
-      "classes": "ds-hover"
-    }
-  },
-  {
-    "name": "Tipo enlace o botón con estado focus",
-    "description": 'Simula activar la pseudoclase de CSS <code>:focus</code>',
-    "data": {
-      "type": "button",
-      "text": "Focus",
-      "classes": "ds-focus"
-    }
-  },
-  {
-    "name": "Peque",
-    "description": "Usa las clases de tamaño de texto para establecer el tamaño.",
-    "data": {
-      "text": "Peque pill",
-      "classes": "text-sm"
-    }
-  },
-  {
-    "name": "con icono a la derecha",
-    "data": {
-      "type": "button",
-      "html": "Icono derecha pill <svg viewBox=\"0 0 140 140\" class=\" self-center ml-2 \" role=\" img \" aria-label=\"Eliminar\" width=\" .75em \" height=\" .75em \"><path fill=\"currentColor\" d=\"M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z\"/></svg>",
-      "classes": "cursor-pointer"
-    }
-  },
-  {
-    "name": "con icono a la izquierda",
-    "data": {
-      "type": "button",
-      "html": "<svg viewBox=\"0 0 140 140\" class=\" self-center mr-2 \"  aria-hidden=\"true\" width=\" .75em \" height=\" .75em \"><path fill=\"currentColor\" d=\"M35 35a35 35 0 1070 0 35 35 0 10-70 0zM132.78 133.33a66.59 66.59 0 00-125.56 0 5 5 0 004.71 6.67h116.14a5 5 0 004.71-6.67z\" /></svg> Icono izquierda pill",
-      "classes": "cursor-pointer"
-    }
-  },
-  {
-    "name": "primario",
-    "data": {
-      "html": "<svg viewBox=\"0 0 140 140\" class=\" self-center mr-2 \"  aria-hidden=\"true\" width=\" .75em \" height=\" .75em \"><path fill=\"currentColor\" d=\"M43.7 140a17.42 17.42 0 01-12.36-5.12L5.13 108.66a17.49 17.49 0 010-24.75l24.61-24.25a7.5 7.5 0 0110.52 10.68L15.69 94.56a2.5 2.5 0 000 3.49l26.21 26.22a2.51 2.51 0 003.54 0l24.22-24.53a7.5 7.5 0 1110.68 10.52l-24.21 24.57A17.53 17.53 0 0143.7 140zM99.66 80.26a7.49 7.49 0 01.08-10.6l24.57-24.22a2.5 2.5 0 000-3.49L98.06 15.73a2.51 2.51 0 00-3.54 0L70.34 40.26a7.5 7.5 0 01-10.68-10.52L83.87 5.17a17.52 17.52 0 0124.79 0l26.21 26.21a17.49 17.49 0 010 24.75l-24.61 24.21a7.49 7.49 0 01-10.6-.08z\"/><path fill=\"currentColor\" d=\"M55 92.5a7.5 7.5 0 01-5.3-12.8l30-30a7.5 7.5 0 1110.6 10.6l-30 30a7.44 7.44 0 01-5.3 2.2z\"/></svg> Primario",
-      "classes": "c-pill--primary"
-    }
-  },
-  {
-    "name": "Aviso",
-    "data": {
-      "html": "<svg viewBox=\"0 0 140 140\" class=\" self-center mr-2 \"  aria-hidden=\"true\" width=\" .75em \" height=\" .75em \"><path fill=\"currentColor\" d=\"M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z\"/></svg> Aviso",
-      "classes": "c-pill--warning"
-    }
-  },
-  {
-    "name": "Éxito",
-    "data": {
-      "html": "<svg viewBox=\"0 0 140 140\" class=\" self-center mr-2 \"  aria-hidden=\"true\" width=\" .75em \" height=\" .75em \"><path fill=\"currentColor\" d=\"M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z\"/></svg> Éxito",
-      "classes": "c-pill--success"
-    }
-  },
-  {
-    "name": "alerta",
-    "data": {
-      "html": "<svg viewBox=\"0 0 140 140\" class=\" self-center mr-2 \"  aria-hidden=\"true\" width=\" .75em \" height=\" .75em \"><path fill=\"currentColor\" d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm-7.5 35a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 75a10 10 0 1110-10 10 10 0 01-10 10z\"/></svg> Alerta",
-      "classes": "c-pill--alert"
-    }
-  }
+{% set exampleComponent = "pill" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "text": "Pill por defecto"
+    }
+  },
+  {
+    "name": "tipo enlace",
+    "data": {
+      "text": "Tipo enlace",
+      "href": "http://www.google.com"
+    }
+  },
+  {
+    "name": "Tipo enlace con target blank",
+    "data": {
+      "text": "Tipo enlace con target",
+      "href": "http://www.google.com",
+      "target": "_blank"
+    }
+  },
+  {
+    "name": "Tipo botón",
+    "data": {
+      "type": "button",
+      "text": "Tipo botón",
+      "classes": "cursor-pointer"
+    }
+  },
+  {
+    "name": "Tipo enlace o botón con estado hover",
+    "description": 'Simula activar la pseudoclase de CSS <code>:hover</code>',
+    "data": {
+      "type": "button",
+      "text": "Hover",
+      "classes": "ds-hover"
+    }
+  },
+  {
+    "name": "Tipo enlace o botón con estado focus",
+    "description": 'Simula activar la pseudoclase de CSS <code>:focus</code>',
+    "data": {
+      "type": "button",
+      "text": "Focus",
+      "classes": "ds-focus"
+    }
+  },
+  {
+    "name": "Peque",
+    "description": "Usa las clases de tamaño de texto para establecer el tamaño.",
+    "data": {
+      "text": "Peque pill",
+      "classes": "text-sm"
+    }
+  },
+  {
+    "name": "con icono a la derecha",
+    "data": {
+      "type": "button",
+      "html": "Icono derecha pill <svg viewBox=\"0 0 140 140\" class=\" self-center ml-2 \" role=\" img \" aria-label=\"Eliminar\" width=\" .75em \" height=\" .75em \"><path fill=\"currentColor\" d=\"M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z\"/></svg>",
+      "classes": "cursor-pointer"
+    }
+  },
+  {
+    "name": "con icono a la izquierda",
+    "data": {
+      "type": "button",
+      "html": "<svg viewBox=\"0 0 140 140\" class=\" self-center mr-2 \"  aria-hidden=\"true\" width=\" .75em \" height=\" .75em \"><path fill=\"currentColor\" d=\"M35 35a35 35 0 1070 0 35 35 0 10-70 0zM132.78 133.33a66.59 66.59 0 00-125.56 0 5 5 0 004.71 6.67h116.14a5 5 0 004.71-6.67z\" /></svg> Icono izquierda pill",
+      "classes": "cursor-pointer"
+    }
+  },
+  {
+    "name": "primario",
+    "data": {
+      "html": "<svg viewBox=\"0 0 140 140\" class=\" self-center mr-2 \"  aria-hidden=\"true\" width=\" .75em \" height=\" .75em \"><path fill=\"currentColor\" d=\"M43.7 140a17.42 17.42 0 01-12.36-5.12L5.13 108.66a17.49 17.49 0 010-24.75l24.61-24.25a7.5 7.5 0 0110.52 10.68L15.69 94.56a2.5 2.5 0 000 3.49l26.21 26.22a2.51 2.51 0 003.54 0l24.22-24.53a7.5 7.5 0 1110.68 10.52l-24.21 24.57A17.53 17.53 0 0143.7 140zM99.66 80.26a7.49 7.49 0 01.08-10.6l24.57-24.22a2.5 2.5 0 000-3.49L98.06 15.73a2.51 2.51 0 00-3.54 0L70.34 40.26a7.5 7.5 0 01-10.68-10.52L83.87 5.17a17.52 17.52 0 0124.79 0l26.21 26.21a17.49 17.49 0 010 24.75l-24.61 24.21a7.49 7.49 0 01-10.6-.08z\"/><path fill=\"currentColor\" d=\"M55 92.5a7.5 7.5 0 01-5.3-12.8l30-30a7.5 7.5 0 1110.6 10.6l-30 30a7.44 7.44 0 01-5.3 2.2z\"/></svg> Primario",
+      "classes": "c-pill--primary"
+    }
+  },
+  {
+    "name": "Aviso",
+    "data": {
+      "html": "<svg viewBox=\"0 0 140 140\" class=\" self-center mr-2 \"  aria-hidden=\"true\" width=\" .75em \" height=\" .75em \"><path fill=\"currentColor\" d=\"M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z\"/></svg> Aviso",
+      "classes": "c-pill--warning"
+    }
+  },
+  {
+    "name": "Éxito",
+    "data": {
+      "html": "<svg viewBox=\"0 0 140 140\" class=\" self-center mr-2 \"  aria-hidden=\"true\" width=\" .75em \" height=\" .75em \"><path fill=\"currentColor\" d=\"M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z\"/></svg> Éxito",
+      "classes": "c-pill--success"
+    }
+  },
+  {
+    "name": "alerta",
+    "data": {
+      "html": "<svg viewBox=\"0 0 140 140\" class=\" self-center mr-2 \"  aria-hidden=\"true\" width=\" .75em \" height=\" .75em \"><path fill=\"currentColor\" d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm-7.5 35a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 75a10 10 0 1110-10 10 10 0 01-10 10z\"/></svg> Alerta",
+      "classes": "c-pill--alert"
+    }
+  }
 ] %}

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

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

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

@@ -1,63 +1,63 @@
-/* ==========================================================================
-   _styles.pill.css
-   ========================================================================== */
-
-@layer components {
-  .c-pill {
-  	 @apply inline-flex;
-  	 @apply align-baseline;
-  	 @apply px-sm;
-  	 @apply py-0.5;
-  	 @apply bg-white;
-  	 @apply border;
-  	 @apply border-neutral-base;
-  	 @apply rounded-full;
-  	 @apply text-black;
-
-    @apply focus:bg-warning-base;
-    @apply focus:border-warning-base;
-    @apply focus:shadow-outline-black;
-    @apply focus:text-black;
-    @apply focus:outline-none;
-  }
-
-
-  a.c-pill,
-  button.c-pill {
-    &:hover,
-    &:active,
-    &.ds-hover {
-      @apply bg-neutral-light;
-    }
-
-    &.ds-focus {
-      @apply bg-warning-base;
-      @apply border-warning-base;
-      @apply shadow-outline-black;
-      @apply text-black;
-      @apply outline-none;
-    }
-  }
-
-  .c-pill--primary {
-  	@apply border-primary-base;
-    @apply bg-primary-light;
-  }
-
-
-  .c-pill--warning {
-  	@apply border-warning-dark;
-    @apply bg-warning-light;
-  }
-
-
-  .c-pill--success {
-  	@apply border-success-dark;
-    @apply bg-success-light;
-  }
-
-  .c-pill--alert {
-  	@apply border-alert-dark;
-    @apply bg-alert-light;
-  }
-}
+/* ==========================================================================
+   _styles.pill.css
+   ========================================================================== */
+
+@layer components {
+  .c-pill {
+  	 @apply inline-flex;
+  	 @apply align-baseline;
+  	 @apply px-sm;
+  	 @apply py-0.5;
+  	 @apply bg-white;
+  	 @apply border;
+  	 @apply border-neutral-base;
+  	 @apply rounded-full;
+  	 @apply text-black;
+
+    @apply focus:bg-warning-base;
+    @apply focus:border-warning-base;
+    @apply focus:shadow-outline-black;
+    @apply focus:text-black;
+    @apply focus:outline-none;
+  }
+
+
+  a.c-pill,
+  button.c-pill {
+    &:hover,
+    &:active,
+    &.ds-hover {
+      @apply bg-neutral-light;
+    }
+
+    &.ds-focus {
+      @apply bg-warning-base;
+      @apply border-warning-base;
+      @apply shadow-outline-black;
+      @apply text-black;
+      @apply outline-none;
+    }
+  }
+
+  .c-pill--primary {
+  	@apply border-primary-base;
+    @apply bg-primary-light;
+  }
+
+
+  .c-pill--warning {
+  	@apply border-warning-dark;
+    @apply bg-warning-light;
+  }
+
+
+  .c-pill--success {
+  	@apply border-success-dark;
+    @apply bg-success-light;
+  }
+
+  .c-pill--alert {
+  	@apply border-alert-dark;
+    @apply bg-alert-light;
+  }
+}

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

@@ -1,39 +1,39 @@
-{# Set classes for this component #}
-{%- set classNames = "c-pill" -%}
-
-{%- if params.classes %}
-  {% set classNames = classNames + " " + params.classes %}
-{% endif %}
-
-{# Determine type of element to use, if not explicitly set #}
-{%- if params.type %}
-  {% set element = params.type | lower %}
-{% else %}
-  {% if params.href %}
-    {% set element = 'a' %}
-  {% elseif params.type == 'button' %}
-    {% set element = 'button' %}
-  {% else %}
-    {% set element = 'span' %}
-  {% endif %}
-{% endif -%}
-
-{#- Define common attributes that we can use across all element types #}
-
-{%- set commonAttributes %} class="{{ classNames }}" data-module="c-pill"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %}
-
-<!-- pill -->
-{%- if element == 'a' %}
-<a href="{{ params.href }}"  {{- buttonAttributes | safe }} {% if params.target %} target="{{ params.target }}"{% endif %}{{- commonAttributes | safe }}>
-  {{- params.html | safe if params.html else params.text -}}
-</a>
-{%- elseif element == 'button' %}
-<button {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
-  {{- params.html | safe if params.html else params.text -}}
-</button>
-{%- else %}
-<span {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
-  {{- params.html | safe if params.html else params.text -}}
-</span>
-{% endif %}
+{# Set classes for this component #}
+{%- set classNames = "c-pill" -%}
+
+{%- if params.classes %}
+  {% set classNames = classNames + " " + params.classes %}
+{% endif %}
+
+{# Determine type of element to use, if not explicitly set #}
+{%- if params.type %}
+  {% set element = params.type | lower %}
+{% else %}
+  {% if params.href %}
+    {% set element = 'a' %}
+  {% elseif params.type == 'button' %}
+    {% set element = 'button' %}
+  {% else %}
+    {% set element = 'span' %}
+  {% endif %}
+{% endif -%}
+
+{#- Define common attributes that we can use across all element types #}
+
+{%- set commonAttributes %} class="{{ classNames }}" data-module="c-pill"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %}
+
+<!-- pill -->
+{%- if element == 'a' %}
+<a href="{{ params.href }}"  {{- buttonAttributes | safe }} {% if params.target %} target="{{ params.target }}"{% endif %}{{- commonAttributes | safe }}>
+  {{- params.html | safe if params.html else params.text -}}
+</a>
+{%- elseif element == 'button' %}
+<button {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
+  {{- params.html | safe if params.html else params.text -}}
+</button>
+{%- else %}
+<span {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
+  {{- params.html | safe if params.html else params.text -}}
+</span>
+{% endif %}
 <!-- /pill -->

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

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