desy-html 10.2.2 → 11.0.2

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

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

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

@@ -1,69 +1,69 @@
-/* ==========================================================================
-   _styles.breadcrumbs.css
-   ========================================================================== */
-
-@layer components {
-  .c-breadcrumbs {
-    li ~ li::before {
-      @apply inline-block;
-      content: ">";
-      @apply px-sm;
-      @apply text-neutral-dark;
-    }
-  }
-
-
-  .c-breadcrumbs--truncated {
-    li:not(.c-breadcrumbs__backbutton) {
-      @apply lg:max-w-xs;
-
-      &:last-child {
-        @apply max-w-full;
-      }
-    }
-  }
-
-
-  .c-breadcrumbs--collapse-on-mobile {
-    li {
-      @apply hidden;
-      @apply lg:inline-flex;
-
-      &:first-child,
-      &:last-child {
-        @apply inline-flex;
-      }
-    }
-
-    .c-breadcrumbs__backbutton + li {
-      @apply inline-flex;
-    }
-  }
-
-
-  .c-breadcrumbs--inline-on-mobile {
-    li {
-      @apply inline;
-      @apply lg:inline-flex;
-      @apply leading-loose;
-      @apply lg:leading-tight;
-    }
-  }
-
-
-  .c-breadcrumbs--inline-on-desktop {
-    li {
-      @apply lg:inline;
-      @apply lg:leading-loose;
-    }
-  }
-
-
-  .c-breadcrumbs__backbutton {
-    @apply mr-sm;
-
-    & + li::before {
-      @apply hidden !important;
-    }
-  }
-}
+/* ==========================================================================
+   _styles.breadcrumbs.css
+   ========================================================================== */
+
+@layer components {
+  .c-breadcrumbs {
+    li ~ li::before {
+      @apply inline-block;
+      content: ">";
+      @apply px-sm;
+      @apply text-neutral-dark;
+    }
+  }
+
+
+  .c-breadcrumbs--truncated {
+    li:not(.c-breadcrumbs__backbutton) {
+      @apply lg:max-w-xs;
+
+      &:last-child {
+        @apply max-w-full;
+      }
+    }
+  }
+
+
+  .c-breadcrumbs--collapse-on-mobile {
+    li {
+      @apply hidden;
+      @apply lg:inline-flex;
+
+      &:first-child,
+      &:last-child {
+        @apply inline-flex;
+      }
+    }
+
+    .c-breadcrumbs__backbutton + li {
+      @apply inline-flex;
+    }
+  }
+
+
+  .c-breadcrumbs--inline-on-mobile {
+    li {
+      @apply inline;
+      @apply lg:inline-flex;
+      @apply leading-loose;
+      @apply lg:leading-tight;
+    }
+  }
+
+
+  .c-breadcrumbs--inline-on-desktop {
+    li {
+      @apply lg:inline;
+      @apply lg:leading-loose;
+    }
+  }
+
+
+  .c-breadcrumbs__backbutton {
+    @apply mr-sm;
+
+    & + li::before {
+      @apply hidden !important;
+    }
+  }
+}

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

@@ -1,78 +1,78 @@
-{# Set classes for this component #}
-{%- set classNames = "c-breadcrumbs" -%}
-
-{% if params.classes %}
-  {% set classNames = classNames + " " + params.classes %}
-{% endif -%}
-
-{% if params.collapseOnMobile %}
-  {% set classNames = classNames + " c-breadcrumbs--collapse-on-mobile" %}
-{% endif -%}
-
-{% if params.inlineOnMobile %}
-  {% set classNames = classNames + " c-breadcrumbs--inline-on-mobile" %}
-{% endif -%}
-
-{% if params.inlineOnDesktop %}
-  {% set classNames = classNames + " c-breadcrumbs--inline-on-desktop" %}
-{% endif -%}
-
-{# This verbose statement is for Purgecss to match the classnames needed. Purgecss needs explicit entire classnames appear in code, a string concatenation will fail. Eg. lg:grid-cols-max-content-{{ params.items.length if not params.hasBackButton else (params.items.length + 1)}} doesn't compile lg:grid-cols-max-content-1,2,3...  #}
-
-{% set gridClass %}
-  {% if not params.hasBackButton %}
-    {% if params.items.length == 1 %}
-lg:grid-cols-max-content-1{% elseif params.items.length == 2 %}
-lg:grid-cols-max-content-2{% elseif params.items.length == 3 %}
-lg:grid-cols-max-content-3{% elseif params.items.length == 4 %}
-lg:grid-cols-max-content-4{% elseif params.items.length == 5 %}
-lg:grid-cols-max-content-5{% elseif params.items.length == 6 %}
-lg:grid-cols-max-content-6{% elseif params.items.length == 7 %}
-lg:grid-cols-max-content-7{% elseif params.items.length == 8 %}
-lg:grid-cols-max-content-8{% endif %}
-  {% else %}
-    {% if params.items.length == 1 %}
-lg:grid-cols-max-content-2{% elseif params.items.length == 2 %}
-lg:grid-cols-max-content-3{% elseif params.items.length == 3 %}
-lg:grid-cols-max-content-4{% elseif params.items.length == 4 %}
-lg:grid-cols-max-content-5{% elseif params.items.length == 5 %}
-lg:grid-cols-max-content-6{% elseif params.items.length == 6 %}
-lg:grid-cols-max-content-7{% elseif params.items.length == 7 %}
-lg:grid-cols-max-content-8{% endif %}
-  {% endif %}
-{% endset %}
-
-<!-- breadcrumbs -->
-<nav class="{{classNames}}" aria-label="Estás en: "{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-  <ol class="{% if not params.inlineOnDesktop %}lg:grid {{ gridClass }}{% endif %} w-full items-baseline text-sm">
-  {% if params.hasBackButton %}
-    <li class="c-breadcrumbs__backbutton flex items-baseline font-bold text-primary-base">
-      <a href="javascript:history.back()" class="px-sm border-r border-neutral-base focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"><span class="sr-only">Volver a la página anterior</span><span aria-hidden="true" title="Volver a la página anterior">&larr;</span></a>
-    </li>
-  {% endif %}
-  {% for item in params.items %}
-    {% if item.href %}
-    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black {% if loop.last %} flex-1 font-semibold{% endif %}">
-      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if loop.last %} text-black font-semibold no-underline{% endif %} truncate" href="{{ item.href }}" {% if loop.last %} aria-current="page"{% endif %}{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-        {% if loop.last %}
-        <strong>{{ item.html | safe if item.html else item.text }}</strong>
-        {% else %}
-        {{ item.html | safe if item.html else item.text }}
-        {% endif %}
-      </a>
-    </li>
-    {% else %}
-    <li class="flex items-baseline mb-sm py-xs text-neutral-dark {% if loop.last %} flex-1 font-semibold{% endif %}">
-      <span class="no-underline {%- if loop.last %} text-black{% endif %} truncate"{% if loop.last %} aria-current="page"{% endif %}>
-        {% if loop.last %}
-        <strong>{{ item.html | safe if item.html else item.text }}</strong>
-        {% else %}
-        {{ item.html | safe if item.html else item.text }}
-        {% endif %}
-      </span>
-    </li>
-    {% endif %}
-  {% endfor %}
-  </ol>
-</nav>
+{# Set classes for this component #}
+{%- set classNames = "c-breadcrumbs" -%}
+
+{% if params.classes %}
+  {% set classNames = classNames + " " + params.classes %}
+{% endif -%}
+
+{% if params.collapseOnMobile %}
+  {% set classNames = classNames + " c-breadcrumbs--collapse-on-mobile" %}
+{% endif -%}
+
+{% if params.inlineOnMobile %}
+  {% set classNames = classNames + " c-breadcrumbs--inline-on-mobile" %}
+{% endif -%}
+
+{% if params.inlineOnDesktop %}
+  {% set classNames = classNames + " c-breadcrumbs--inline-on-desktop" %}
+{% endif -%}
+
+{# This verbose statement is for Purgecss to match the classnames needed. Purgecss needs explicit entire classnames appear in code, a string concatenation will fail. Eg. lg:grid-cols-max-content-{{ params.items.length if not params.hasBackButton else (params.items.length + 1)}} doesn't compile lg:grid-cols-max-content-1,2,3...  #}
+
+{% set gridClass %}
+  {% if not params.hasBackButton %}
+    {% if params.items.length == 1 %}
+lg:grid-cols-max-content-1{% elseif params.items.length == 2 %}
+lg:grid-cols-max-content-2{% elseif params.items.length == 3 %}
+lg:grid-cols-max-content-3{% elseif params.items.length == 4 %}
+lg:grid-cols-max-content-4{% elseif params.items.length == 5 %}
+lg:grid-cols-max-content-5{% elseif params.items.length == 6 %}
+lg:grid-cols-max-content-6{% elseif params.items.length == 7 %}
+lg:grid-cols-max-content-7{% elseif params.items.length == 8 %}
+lg:grid-cols-max-content-8{% endif %}
+  {% else %}
+    {% if params.items.length == 1 %}
+lg:grid-cols-max-content-2{% elseif params.items.length == 2 %}
+lg:grid-cols-max-content-3{% elseif params.items.length == 3 %}
+lg:grid-cols-max-content-4{% elseif params.items.length == 4 %}
+lg:grid-cols-max-content-5{% elseif params.items.length == 5 %}
+lg:grid-cols-max-content-6{% elseif params.items.length == 6 %}
+lg:grid-cols-max-content-7{% elseif params.items.length == 7 %}
+lg:grid-cols-max-content-8{% endif %}
+  {% endif %}
+{% endset %}
+
+<!-- breadcrumbs -->
+<nav class="{{classNames}}" aria-label="Estás en: "{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  <ol class="{% if not params.inlineOnDesktop %}lg:grid {{ gridClass }}{% endif %} w-full items-baseline text-sm">
+  {% if params.hasBackButton %}
+    <li class="c-breadcrumbs__backbutton flex items-baseline font-bold text-primary-base">
+      <a href="javascript:history.back()" class="px-sm border-r border-neutral-base focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"><span class="sr-only">Volver a la página anterior</span><span aria-hidden="true" title="Volver a la página anterior">&larr;</span></a>
+    </li>
+  {% endif %}
+  {% for item in params.items %}
+    {% if item.href %}
+    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black {% if loop.last %} flex-1 font-semibold{% endif %}">
+      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if loop.last %} text-black font-semibold no-underline{% endif %} truncate" href="{{ item.href }}" {% if loop.last %} aria-current="page"{% endif %}{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+        {% if loop.last %}
+        <strong>{{ item.html | safe if item.html else item.text }}</strong>
+        {% else %}
+        {{ item.html | safe if item.html else item.text }}
+        {% endif %}
+      </a>
+    </li>
+    {% else %}
+    <li class="flex items-baseline mb-sm py-xs text-neutral-dark {% if loop.last %} flex-1 font-semibold{% endif %}">
+      <span class="no-underline {%- if loop.last %} text-black{% endif %} truncate"{% if loop.last %} aria-current="page"{% endif %}>
+        {% if loop.last %}
+        <strong>{{ item.html | safe if item.html else item.text }}</strong>
+        {% else %}
+        {{ item.html | safe if item.html else item.text }}
+        {% endif %}
+      </span>
+    </li>
+    {% endif %}
+  {% endfor %}
+  </ol>
+</nav>
 <!-- /breadcrumbs -->

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

@@ -1,45 +1,45 @@
-params:
-- name: items
-  type: array
-  required: true
-  description: Array of breadcrumbs item objects.
-  params:
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text to use within the breadcrumbs item. 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 breadcrumbs item. If `html` is provided, the `text` argument will be ignored.
-  - name: href
-    type: string
-    required: false
-    description: Link for the breadcrumbs item. If not specified, breadcrumbs item is a normal list item.
-  - name: attributes
-    type: object
-    description: HTML attributes (for example data attributes) to add to the individual crumb.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the breadcrumbs container.
-- name: collapseOnMobile
-  type: boolean
-  required: false
-  description: When true, the breadcrumbs will collapse to the first and last item only on tablet breakpoint and below.
-- name: inlineOnMobile
-  type: boolean
-  required: false
-  description: When true, the breadcrumbs will linebreak if there is needed only on tablet breakpoint and below.
-- name: inlineOnDesktop
-  type: boolean
-  required: false
-  description: When true, the breadcrumbs will linebreak if there is needed only on desktop breakpoint and above.
-- name: hasBackButton
-  type: boolean
-  required: false
-  description: When true, the breadcrumbs will start with a back button link.
-- name: attributes
-  type: object
-  required: false
+params:
+- name: items
+  type: array
+  required: true
+  description: Array of breadcrumbs item objects.
+  params:
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within the breadcrumbs item. 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 breadcrumbs item. If `html` is provided, the `text` argument will be ignored.
+  - name: href
+    type: string
+    required: false
+    description: Link for the breadcrumbs item. If not specified, breadcrumbs item is a normal list item.
+  - name: attributes
+    type: object
+    description: HTML attributes (for example data attributes) to add to the individual crumb.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the breadcrumbs container.
+- name: collapseOnMobile
+  type: boolean
+  required: false
+  description: When true, the breadcrumbs will collapse to the first and last item only on tablet breakpoint and below.
+- name: inlineOnMobile
+  type: boolean
+  required: false
+  description: When true, the breadcrumbs will linebreak if there is needed only on tablet breakpoint and below.
+- name: inlineOnDesktop
+  type: boolean
+  required: false
+  description: When true, the breadcrumbs will linebreak if there is needed only on desktop breakpoint and above.
+- name: hasBackButton
+  type: boolean
+  required: false
+  description: When true, the breadcrumbs will start with a back button link.
+- name: attributes
+  type: object
+  required: false
   description: HTML attributes (for example data attributes) to add to the breadcrumbs container.