desy-html 5.3.0 → 6.2.0

package/src/templates/components/accordion-history/params.accordion-history.yaml

@@ -0,0 +1,125 @@
+params:
+- name: idPrefix
+  type: string
+  required: true
+  description: String to prefix id for each accordion item if no id is specified on each item.
+- name: headingLevel
+  type: number
+  required: false
+  description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on.
+- name: allowToggle
+  type: boolean
+  required: false
+  description: Defaults to `false`. Allow for each toggle to both open and close its section. Makes it possible for all sections to be closed. Assumes only one section may be open.
+- name: allowMultiple
+  type: boolean
+  required: false
+  description: Defaults to `false`. Allow for multiple accordion sections to be expanded at the same time. Assumes data-allow-toggle otherwise the toggle on open sections would be disabled.
+- name: heading
+  type: object
+  required: false
+  description: Options for the heading
+  params:
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within the heading. 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 heading. If `html` is provided, the `text` argument will be ignored.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the heading.
+- name: showControl
+  type: boolean
+  required: false
+  description: Defaults to `false`. If `true` a Show/Hide all button is displayed on top
+- name: items
+  type: array
+  required: true
+  description: Array of accordion items objects.
+  params:
+  - name: headerText
+    type: string
+    required: true
+    description: If `summmaryHtml` is set, this is not required. Text to use within the header element (the visible part of the accordion item element). If `headerHtml` is provided, the `headerText` argument will be ignored.
+  - name: headerHtml
+    type: string
+    required: true
+    description: If `summmaryText` is set, this is not required. HTML to use within the header element (the visible part of the accordion item element). If `headerHtml` is provided, the `headerText` argument will be ignored.
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within the disclosed part of the accordion item element. 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 disclosed part of the accordion item element. If `html` is provided, the `text` argument will be ignored.
+  - name: id
+    type: string
+    required: false
+    description: Id to add to the item. Not required, but recommended to improve the accessibility.
+  - name: open
+    type: boolean
+    required: false
+    description: If true, accordion item will be expanded.
+  - name: disabled
+    type: boolean
+    required: false
+    description: If true, accordion item will be disabled and will not show the show/hide control.
+  - name: status
+    type: string
+    required: false
+    description: Available values: `current`,`past`,`pending`,`muted`, `currentmuted`. Defaults to `past`. If `current`, the item will show with primary border and white background. If `past`, the item will show with primary color. If `pending` the item has neutral color and dashed line. If `muted` the item has neutral color and background. `currentmuted` is like `current` but with `muted` styles.
+  - name: show
+    type: object
+    required: false
+    description: Options to customize the show info
+    params:
+    - name: text
+      type: string
+      required: true
+      description: If `html` is set, this is not required. Text to use in show info. 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 show info. If `html` is provided, the `text` argument will be ignored.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the show info.
+  - name: hide
+    type: object
+    required: false
+    description: Options to customize the hide info
+    params:
+    - name: text
+      type: string
+      required: true
+      description: If `html` is set, this is not required. Text to use in hide info. 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 hide info. If `html` is provided, the `text` argument will be ignored.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the hide info.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the accordion item element.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the accordion item.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the accordion container.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the accordion container.

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

@@ -173,6 +173,13 @@
       "classes": "c-button--sm"
     }
   },
+  {
+    "name": "small has selection",
+    "data": {
+      "text": "Small has selection",
+      "classes": "c-button--sm c-button--has-selection"
+    }
+  },
   {
     "name": "link",
     "data": {

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

@@ -67,6 +67,13 @@
   }
 
 
+  .c-button--base {
+    @apply px-3;
+    @apply py-2;
+    @apply text-base;
+  }
+
+
   .c-button--sm {
     @apply px-2;
     @apply py-1;
@@ -121,6 +128,33 @@
   }
 
 
+  .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;

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

@@ -31,7 +31,7 @@
 
 <!-- button -->
 {%- if element == 'a' %}
-<a href="{{ params.href if params.href else '#' }}" role="button" draggable="false" {%- if params.disabled %} tabindex="-1" aria-disabled="true"{% endif %}{% if params.target %} target="{{ params.target }}"{% endif %} {{- commonAttributes | safe }}>
+<a href="{{ params.href if params.href else '#' }}" role="button" 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>
 

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

@@ -77,6 +77,12 @@
     @apply pointer-events-none;
   }
 
+  .c-button-loader--base {
+    @apply px-3;
+    @apply py-2;
+    @apply text-base;
+  }
+
 
   .c-button-loader--sm {
     @apply px-2;

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

@@ -25,7 +25,7 @@
 {% set iconLoader %}
   <span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
     {{ componentSpinner({
-      text: params.loader.text,
+      text: params.loader.text if params.loader.text else 'Acción en curso',
       classes: params.loader.classes,
       attributes: {
         "x-ref": "spinnerText"
@@ -37,9 +37,9 @@
 {# Set success icon html #}
 {% set iconSuccess %}
   <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
-    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
-    </p>
-    <span aria-hidden="true">✓</span>
+    <span x-ref="successText" 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 %}
 
@@ -82,9 +82,9 @@
 </button>
 
 {%- elseif element == 'input' %}
-<div {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
+<div {{- commonAttributes | safe }}>
   <span class="c-button-loader__content inline-flex align-baseline">
-    <input value="{{ params.text }}" type="{{ params.type if params.type else 'submit' }}" class="bg-transparent font-semibold">
+    <input {{- buttonAttributes | safe }} value="{{ params.text }}" type="{{ params.type if params.type else 'submit' }}" class="bg-transparent font-semibold">
   </span>
   {{ iconLoader | safe }}
   {{ iconSuccess | safe }}

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

@@ -3,6 +3,13 @@
    ========================================================================== */
 
 @layer components {
+  .c-checkboxes--base {
+    input[type="checkbox"] {
+      @apply w-6;
+      @apply h-6;
+    }
+  }
+
   .c-checkboxes--sm {
     input[type="checkbox"] {
       @apply w-base !important;

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

@@ -62,6 +62,13 @@
   }
 
 
+  .c-dropdown--base {
+    @apply px-3;
+    @apply py-2;
+    @apply text-base;
+  }
+
+
   .c-dropdown--sm {
     @apply px-2;
     @apply py-1;
@@ -151,21 +158,22 @@
 
 
   .c-dropdown--header {
-    @apply bg-black;
+    @apply bg-neutral-lighter;
     @apply border-none;
     @apply rounded-none;
     @apply shadow-none;
     @apply font-normal;
     @apply text-sm;
-    @apply text-white;
+    @apply text-black;
 
     &:hover:not(disabled),
     &:active:not(disabled),
     &.ds-hover:not(disabled) {
-      @apply bg-black;
+      @apply bg-neutral-lighter;
       @apply border-none;
       @apply shadow-none;
-      @apply text-white;
+      @apply text-black;
+      @apply underline;
     }
 
     &[disabled],

package/src/templates/components/file-upload/_template.file-upload.njk

@@ -38,7 +38,7 @@
     visuallyHiddenText: params.errorMessage.visuallyHiddenText
   }) | indent(2) | trim }}
 {% endif %}
-  <input class="mt-sm focus:outline-none focus:bg-warning-base focus:shadow-outline-focus {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} c-file-upload--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="file"
+  <input class="mt-sm p-xs file:mr-base focus:outline-none file:inline-flex file:items-baseline file:px-3 file:py-2 file:bg-white file:border file:border-solid file:border-primary-base file:rounded file:align-baseline file:font-semibold file:text-primary-base file:transition-all file:duration-100 file:ease-out file:whitespace-nowrap file:cursor-pointer file:focus:bg-warning-base file:focus:border-warning-base file:focus:shadow-outline-black file:focus:text-black file:focus:outline-none file:hover:bg-neutral-light file:hover:border-primary-base file:hover:text-primary-base {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} c-file-upload--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="file"
   {%- if params.value %} value="{{ params.value }}"{% endif %}
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
   {%- if params.errorMessage %} aria-errormessage="{{ errorId }}" aria-invalid="true"{% endif %}