desy-html 12.1.0 → 13.0.0

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

@@ -1,204 +1,204 @@
-/* ==========================================================================
-   _styles.button-loader.css
-   ========================================================================== */
-
-@layer components {
-  .c-button-loader {
-    @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-loader--disabled,
-    &.c-button-loader--disabled:hover,
-    &.c-button-loader--disabled:focus {
-      @apply bg-white;
-      @apply opacity-50;
-      @apply cursor-not-allowed;
-    }
-  }
-
-  .c-button-loader {
-    .c-button-loader__spinner {
-      @apply opacity-0;
-    }
-
-    .c-button-loader__success {
-      @apply opacity-0;
-      @apply no-underline;
-    }
-  }
-
-
-  a.c-button-loader--disabled {
-    @apply pointer-events-none;
-  }
-
-  .c-button-loader--base {
-    @apply px-3;
-    @apply py-2;
-    @apply text-base;
-  }
-
-  .c-button-loader--lg {
-    @apply px-3;
-    @apply py-2;
-    @apply text-lg;
-  }
-
-
-  .c-button-loader--sm {
-    @apply px-2;
-    @apply py-1;
-    @apply text-sm;
-  }
-
-
-  .c-button-loader--primary {
-    @apply bg-primary-base;
-    @apply text-white;
-
-    &: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-loader--disabled,
-    &.c-button-loader--disabled:hover,
-    &.c-button-loader--disabled:focus {
-      @apply bg-primary-base;
-    }
-  }
-
-  .c-button-loader--alert {
-    @apply bg-alert-base;
-    @apply border-alert-base;
-    @apply text-white;
-
-    &:hover:not(disabled),
-    &:active:not(disabled),
-    &.ds-hover:not(disabled) {
-      @apply bg-alert-dark;
-      @apply border-alert-dark;
-      @apply text-white;
-    }
-
-    &[disabled],
-    &[disabled]:hover,
-    &[disabled]:focus,
-    &.c-button-loader--disabled,
-    &.c-button-loader--disabled:hover,
-    &.c-button-loader--disabled:focus {
-      @apply bg-alert-base;
-    }
-  }
-
-
-  .c-button-loader--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-loader--disabled,
-    &.c-button-loader--disabled:hover,
-    &.c-button-loader--disabled:focus {
-      @apply bg-transparent;
-      @apply border-transparent;
-      @apply no-underline;
-    }
-  }
-
-
-  .c-button-loader--is-loading {
-    @apply pointer-events-none;
-
-    .c-button-loader__spinner {
-      @apply opacity-100;
-    }
-
-    .c-button-loader__success {
-      @apply opacity-0;
-    }
-
-    .c-button-loader__content {
-      @apply opacity-0;
-    }
-  }
-
-
-  .c-button-loader--is-success {
-    @apply pointer-events-none;
-
-    .c-button-loader__spinner {
-      @apply opacity-0;
-    }
-
-    .c-button-loader__success {
-      @apply opacity-100;
-    }
-
-    .c-button-loader__content {
-      @apply opacity-0;
-    }
-  }
-}
+/* ==========================================================================
+   _styles.button-loader.css
+   ========================================================================== */
+
+@layer components {
+  .c-button-loader {
+    @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-loader--disabled,
+    &.c-button-loader--disabled:hover,
+    &.c-button-loader--disabled:focus {
+      @apply bg-white;
+      @apply opacity-50;
+      @apply cursor-not-allowed;
+    }
+  }
+
+  .c-button-loader {
+    .c-button-loader__spinner {
+      @apply opacity-0;
+    }
+
+    .c-button-loader__success {
+      @apply opacity-0;
+      @apply no-underline;
+    }
+  }
+
+
+  a.c-button-loader--disabled {
+    @apply pointer-events-none;
+  }
+
+  .c-button-loader--base {
+    @apply px-3;
+    @apply py-2;
+    @apply text-base;
+  }
+
+  .c-button-loader--lg {
+    @apply px-3;
+    @apply py-2;
+    @apply text-lg;
+  }
+
+
+  .c-button-loader--sm {
+    @apply px-2;
+    @apply py-1;
+    @apply text-sm;
+  }
+
+
+  .c-button-loader--primary {
+    @apply bg-primary-base;
+    @apply text-white;
+
+    &: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-loader--disabled,
+    &.c-button-loader--disabled:hover,
+    &.c-button-loader--disabled:focus {
+      @apply bg-primary-base;
+    }
+  }
+
+  .c-button-loader--alert {
+    @apply bg-alert-base;
+    @apply border-alert-base;
+    @apply text-white;
+
+    &:hover:not(disabled),
+    &:active:not(disabled),
+    &.ds-hover:not(disabled) {
+      @apply bg-alert-dark;
+      @apply border-alert-dark;
+      @apply text-white;
+    }
+
+    &[disabled],
+    &[disabled]:hover,
+    &[disabled]:focus,
+    &.c-button-loader--disabled,
+    &.c-button-loader--disabled:hover,
+    &.c-button-loader--disabled:focus {
+      @apply bg-alert-base;
+    }
+  }
+
+
+  .c-button-loader--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-loader--disabled,
+    &.c-button-loader--disabled:hover,
+    &.c-button-loader--disabled:focus {
+      @apply bg-transparent;
+      @apply border-transparent;
+      @apply no-underline;
+    }
+  }
+
+
+  .c-button-loader--is-loading {
+    @apply pointer-events-none;
+
+    .c-button-loader__spinner {
+      @apply opacity-100;
+    }
+
+    .c-button-loader__success {
+      @apply opacity-0;
+    }
+
+    .c-button-loader__content {
+      @apply opacity-0;
+    }
+  }
+
+
+  .c-button-loader--is-success {
+    @apply pointer-events-none;
+
+    .c-button-loader__spinner {
+      @apply opacity-0;
+    }
+
+    .c-button-loader__success {
+      @apply opacity-100;
+    }
+
+    .c-button-loader__content {
+      @apply opacity-0;
+    }
+  }
+}

package/src/templates/components/button-loader/_template.button-loader.njk

@@ -1,85 +1,85 @@
-{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
-
-{# Set classes for this component #}
-{%- set classNames = "c-button-loader relative" -%}
-
-{%- if params.classes %}
-  {% set classNames = classNames + " " + params.classes %}
-{% endif %}
-{% if params.disabled %}
-  {% set classNames = classNames + " c-button-loader--disabled" %}
-{% endif -%}
-
-{# Determine type of element to use, if not explicitly set #}
-{%- if params.element %}
-  {% set element = params.element | lower %}
-{% else %}
-  {% if params.href %}
-    {% set element = 'a' %}
-  {% else %}
-    {% set element = 'button' %}
-  {% endif %}
-{% endif -%}
-
-{# Set loader icon html #}
-{% set iconLoader %}
-  <span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
-    {{ componentSpinner({
-      text: params.loader.text if params.loader.text else 'Acción en curso',
-      classes: params.loader.classes
-    }) | indent(4) }}
-  </span>
-{% endset %}
-
-{# Set success icon html #}
-{% set iconSuccess %}
-  <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
-    <span class="sr-only" role="alert" aria-live="assertive">
-    </span>
-    <span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"  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"></path></svg></span>
-  </span>
-{% endset %}
-
-{#- Define common attributes that we can use across all element types #}
-
-{%- set commonAttributes %} class="{{ classNames }}" data-module="c-button-loader"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %}
-
-{#- Define common attributes we can use for both button and input types #}
-
-{%- set buttonAttributes %}{% if params.name %} name="{{ params.name }}"{% endif %}{% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}{% if params.preventDoubleClick %} data-prevent-double-click="true"{% endif %}{% endset %}
-
-{#- Actually create a button... or a link! #}
-
-<!-- button-loader -->
-{%- if element == 'a' %}
-
-<a href="{{ params.href if params.href else '#' }}" role="button" draggable="false" {% if params.target %} target="{{ params.target }}"{% endif %}{{- commonAttributes | safe }}>
-{{ iconLoader | safe }}
-{{ iconSuccess | safe }}
-  <span class="c-button-loader__content inline-flex align-baseline">
-    {{ params.html | filterquotes | safe if params.html else params.text }}
-  </span>
-</a>
-
-{%- elseif element == 'button' %}
-
-<button {%- if params.value %} value="{{ params.value }}"{% endif %}{%- if params.type %} type="{{ params.type }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
-{{ iconLoader | safe }}
-{{ iconSuccess | safe }}
-  <span class="c-button-loader__content inline-flex align-baseline">
-    {{ params.html | filterquotes | safe if params.html else params.text }}
-  </span>
-</button>
-
-{%- elseif element == 'input' %}
-
-<div {{- commonAttributes | safe }}>
-  <span class="c-button-loader__content inline-flex align-baseline">
-    <input {{- buttonAttributes | safe }} value="{{ params.text }}" type="{{ params.type if params.type else 'submit' }}" class="bg-transparent font-semibold">
-  </span>
-{{ iconLoader | safe }}
-{{ iconSuccess | safe }}
-</div>
-{%- endif %}
-
+{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
+
+{# Set classes for this component #}
+{%- set classNames = "c-button-loader relative" -%}
+
+{%- if params.classes %}
+  {% set classNames = classNames + " " + params.classes %}
+{% endif %}
+{% if params.disabled %}
+  {% set classNames = classNames + " c-button-loader--disabled" %}
+{% endif -%}
+
+{# Determine type of element to use, if not explicitly set #}
+{%- if params.element %}
+  {% set element = params.element | lower %}
+{% else %}
+  {% if params.href %}
+    {% set element = 'a' %}
+  {% else %}
+    {% set element = 'button' %}
+  {% endif %}
+{% endif -%}
+
+{# Set loader icon html #}
+{% set iconLoader %}
+  <span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
+    {{ componentSpinner({
+      text: params.loader.text if params.loader.text else 'Acción en curso',
+      classes: params.loader.classes
+    }) | indent(4) }}
+  </span>
+{% endset %}
+
+{# Set success icon html #}
+{% set iconSuccess %}
+  <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
+    <span class="sr-only" role="alert" aria-live="assertive">
+    </span>
+    <span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"  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"></path></svg></span>
+  </span>
+{% endset %}
+
+{#- Define common attributes that we can use across all element types #}
+
+{%- set commonAttributes %} class="{{ classNames }}" data-module="c-button-loader"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %}
+
+{#- Define common attributes we can use for both button and input types #}
+
+{%- set buttonAttributes %}{% if params.name %} name="{{ params.name }}"{% endif %}{% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}{% if params.preventDoubleClick %} data-prevent-double-click="true"{% endif %}{% endset %}
+
+{#- Actually create a button... or a link! #}
+
+<!-- button-loader -->
+{%- if element == 'a' %}
+
+<a href="{{ params.href if params.href else '#' }}" draggable="false" {% if params.target %} target="{{ params.target }}"{% endif %}{{- commonAttributes | safe }}>
+{{ iconLoader | safe }}
+{{ iconSuccess | safe }}
+  <span class="c-button-loader__content inline-flex align-baseline">
+    {{ params.html | filterquotes | safe if params.html else params.text }}
+  </span>
+</a>
+
+{%- elseif element == 'button' %}
+
+<button {%- if params.value %} value="{{ params.value }}"{% endif %}{%- if params.type %} type="{{ params.type }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
+{{ iconLoader | safe }}
+{{ iconSuccess | safe }}
+  <span class="c-button-loader__content inline-flex align-baseline">
+    {{ params.html | filterquotes | safe if params.html else params.text }}
+  </span>
+</button>
+
+{%- elseif element == 'input' %}
+
+<div {{- commonAttributes | safe }}>
+  <span class="c-button-loader__content inline-flex align-baseline">
+    <input {{- buttonAttributes | safe }} value="{{ params.text }}" type="{{ params.type if params.type else 'submit' }}" class="bg-transparent font-semibold">
+  </span>
+{{ iconLoader | safe }}
+{{ iconSuccess | safe }}
+</div>
+{%- endif %}
+
 <!-- /button-loader -->