desy-html 10.2.2 → 11.0.2

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

@@ -1,182 +1,182 @@
-/* ==========================================================================
-   _styles.button.css
-   ========================================================================== */
-
-@layer components {
-  .c-button {
-    @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;
-    }
-  }
-
-
-  a.c-button--disabled {
-    @apply pointer-events-none;
-  }
-
-
-  .c-button--base {
-    @apply px-3;
-    @apply py-2;
-    @apply text-base;
-  }
-
-
-  .c-button--sm {
-    @apply px-2;
-    @apply py-1;
-    @apply text-sm;
-  }
-
-
-  .c-button--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--disabled,
-    &.c-button--disabled:hover,
-    &.c-button--disabled:focus {
-      @apply bg-primary-base;
-    }
-  }
-
-
-  .c-button--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--disabled,
-    &.c-button--disabled:hover,
-    &.c-button--disabled:focus {
-      @apply bg-alert-base;
-    }
-  }
-
-
-  .c-button--has-selection {
-    @apply bg-primary-light;
-    @apply text-primary-dark;
-    @apply border-primary-base;
-    @apply shadow-none;
-
-    &: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 {
-      @apply bg-primary-light;
-    }
-  }
-
-
-  .c-button--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;
-    }
-  }
-}
+/* ==========================================================================
+   _styles.button.css
+   ========================================================================== */
+
+@layer components {
+  .c-button {
+    @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;
+    }
+  }
+
+
+  a.c-button--disabled {
+    @apply pointer-events-none;
+  }
+
+
+  .c-button--base {
+    @apply px-3;
+    @apply py-2;
+    @apply text-base;
+  }
+
+
+  .c-button--sm {
+    @apply px-2;
+    @apply py-1;
+    @apply text-sm;
+  }
+
+
+  .c-button--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--disabled,
+    &.c-button--disabled:hover,
+    &.c-button--disabled:focus {
+      @apply bg-primary-base;
+    }
+  }
+
+
+  .c-button--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--disabled,
+    &.c-button--disabled:hover,
+    &.c-button--disabled:focus {
+      @apply bg-alert-base;
+    }
+  }
+
+
+  .c-button--has-selection {
+    @apply bg-primary-light;
+    @apply text-primary-dark;
+    @apply border-primary-base;
+    @apply shadow-none;
+
+    &: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 {
+      @apply bg-primary-light;
+    }
+  }
+
+
+  .c-button--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;
+    }
+  }
+}

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

@@ -1,50 +1,50 @@
-{# Set classes for this component #}
-{%- set classNames = "c-button" -%}
-
-{%- if params.classes %}
-  {% set classNames = classNames + " " + params.classes %}
-{% endif %}
-{% if params.disabled %}
-  {% set classNames = classNames + " c-button--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 -%}
-
-{#- Define common attributes that we can use across all element types #}
-
-{%- set commonAttributes %} class="{{ classNames }}" {% 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 -->
-{%- if element == 'a' %}
-
-<a href="{{ params.href if params.href else '#' }}" draggable="false" {%- if params.disabled %} tabindex="-1"{% endif %}{% if params.target %} target="{{ params.target }}"{% endif %} {{- commonAttributes | safe }}>
-  {{ params.html | safe if params.html else params.text }}
-</a>
-
-{%- elseif element == 'button' %}
-
-<button {%- if params.value %} value="{{ params.value }}"{% endif %}{%- if params.type %} type="{{ params.type }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
-  {{ params.html | safe if params.html else params.text }}
-</button>
-
-{%- elseif element == 'input' %}
-
-<input value="{{ params.text }}" type="{{ params.type if params.type else 'submit' }}" {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
-{%- endif %}
-
+{# Set classes for this component #}
+{%- set classNames = "c-button" -%}
+
+{%- if params.classes %}
+  {% set classNames = classNames + " " + params.classes %}
+{% endif %}
+{% if params.disabled %}
+  {% set classNames = classNames + " c-button--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 -%}
+
+{#- Define common attributes that we can use across all element types #}
+
+{%- set commonAttributes %} class="{{ classNames }}" {% 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 -->
+{%- if element == 'a' %}
+
+<a href="{{ params.href if params.href else '#' }}" draggable="false" {%- if params.disabled %} tabindex="-1"{% endif %}{% if params.target %} target="{{ params.target }}"{% endif %} {{- commonAttributes | safe }}>
+  {{ params.html | safe if params.html else params.text }}
+</a>
+
+{%- elseif element == 'button' %}
+
+<button {%- if params.value %} value="{{ params.value }}"{% endif %}{%- if params.type %} type="{{ params.type }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
+  {{ params.html | safe if params.html else params.text }}
+</button>
+
+{%- elseif element == 'input' %}
+
+<input value="{{ params.text }}" type="{{ params.type if params.type else 'submit' }}" {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
+{%- endif %}
+
 <!-- /button -->

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

@@ -1,49 +1,49 @@
-params:
-- name: element
-  type: string
-  required: false
-  description: Whether to use an `input`, `button` or `a` element to create the button. In most cases you will not need to set this as it will be configured automatically if you use `href` or `html`.
-- name: text
-  type: string
-  required: true
-  description: If `html` is set, this is not required. Text for the button or link. If `html` is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`.
-- name: html
-  type: string
-  required: true
-  description: If `text` is set, this is not required. HTML for the button or link. If `html` is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`.
-- name: name
-  type: string
-  required: false
-  description: Name for the `input` or `button`. This has no effect on `a` elements.
-- name: type
-  type: string
-  required: false
-  description: Type of `input` or `button` – `button`, `submit` or `reset`. Defaults to `button`. This has no effect on `a` elements.
-- name: value
-  type: string
-  required: false
-  description: Value for the `button` tag. This has no effect on `a` or `input` elements.
-- name: disabled
-  type: boolean
-  required: false
-  description: Whether the button should be disabled. For button and input elements, `disabled` and `aria-disabled` attributes will be set automatically.
-- name: href
-  type: string
-  required: false
-  description: The URL that the button should link to. If this is set, `element` will be automatically set to `a` if it has not already been defined.
-- name: target
-  type: string
-  required: false
-  description: The target where the button should link to.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the button component.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the button component.
-- name: preventDoubleClick
-  type: boolean
-  required: false
+params:
+- name: element
+  type: string
+  required: false
+  description: Whether to use an `input`, `button` or `a` element to create the button. In most cases you will not need to set this as it will be configured automatically if you use `href` or `html`.
+- name: text
+  type: string
+  required: true
+  description: If `html` is set, this is not required. Text for the button or link. If `html` is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`.
+- name: html
+  type: string
+  required: true
+  description: If `text` is set, this is not required. HTML for the button or link. If `html` is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`.
+- name: name
+  type: string
+  required: false
+  description: Name for the `input` or `button`. This has no effect on `a` elements.
+- name: type
+  type: string
+  required: false
+  description: Type of `input` or `button` – `button`, `submit` or `reset`. Defaults to `button`. This has no effect on `a` elements.
+- name: value
+  type: string
+  required: false
+  description: Value for the `button` tag. This has no effect on `a` or `input` elements.
+- name: disabled
+  type: boolean
+  required: false
+  description: Whether the button should be disabled. For button and input elements, `disabled` and `aria-disabled` attributes will be set automatically.
+- name: href
+  type: string
+  required: false
+  description: The URL that the button should link to. If this is set, `element` will be automatically set to `a` if it has not already been defined.
+- name: target
+  type: string
+  required: false
+  description: The target where the button should link to.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the button component.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the button component.
+- name: preventDoubleClick
+  type: boolean
+  required: false
   description: Prevent accidental double clicks on submit buttons from submitting forms multiple times