desy-html 12.1.0 → 13.0.0

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,78 +1,81 @@
-/* ==========================================================================
-   _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;
-
-      a, span {
-        @apply whitespace-normal;
-        @apply lg:truncate;
-      }
-    }
-  }
-
-
-  .c-breadcrumbs--inline-on-desktop {
-    li {
-      @apply lg:inline;
-      @apply lg:leading-loose;
-
-      a, span {
-        @apply lg:whitespace-normal;
-      }
-    }
-  }
-
-
-  .c-breadcrumbs__backbutton {
-    @apply mr-sm;
-
-    & + li::before {
-      @apply hidden !important;
-    }
-  }
-}
+/* ==========================================================================
+   _styles.breadcrumbs.css
+   ========================================================================== */
+
+@layer components {
+  .c-breadcrumbs {
+    li ~ li::before {
+      @apply inline-block;
+      @apply relative;
+      top: 0.1em;
+      content: url("data:image/svg+xml,%3Csvg width='0.8em' height='0.8em' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg' role='presentation' aria-hidden='true' %3E%3Cpath d='M11.4673 8.02055C11.4673 8.36977 11.3176 8.6691 11.0682 8.86865L5.53062 13.8076C5.13152 14.1069 4.53286 14.057 4.23353 13.6579C3.9342 13.2588 3.9342 12.71 4.33331 12.4107L9.22234 8.12033C9.27223 8.07044 9.27223 8.02055 9.22234 7.92078L4.33331 3.6304C3.9342 3.28118 3.88432 2.73241 4.23353 2.33331C4.58275 1.9342 5.13152 1.88432 5.53062 2.23353C5.53062 2.23353 5.53062 2.23353 5.58051 2.28342L11.1181 7.17246C11.3176 7.37201 11.4673 7.72123 11.4673 8.02055Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
+      @apply px-sm;
+    }
+  }
+
+
+  .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;
+
+      a, span {
+        @apply whitespace-normal;
+        @apply lg:truncate;
+      }
+    }
+  }
+
+
+  .c-breadcrumbs--inline-on-desktop {
+    li {
+      @apply lg:inline;
+      @apply lg:leading-loose;
+
+      a, span {
+        @apply lg:whitespace-normal;
+      }
+    }
+  }
+
+
+  .c-breadcrumbs__backbutton {
+    @apply mr-base;
+    @apply relative;
+    @apply top-0.5;
+
+    & + li::before {
+      @apply !hidden;
+    }
+  }
+}

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 max-w-full 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 | filterquotes | safe if item.html else item.text }}</strong>
-        {% else %}
-        {{ item.html | filterquotes | safe if item.html else item.text }}
-        {% endif %}
-      </a>
-    </li>
-    {% else %}
-    <li class="flex items-baseline max-w-full 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 | filterquotes | safe if item.html else item.text }}</strong>
-        {% else %}
-        {{ item.html | filterquotes | 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"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='self-center mr-2' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M37.93 27.93l-35 35a10 10 0 000 14.14l35 35a10 10 0 1014.14-14.14L38.41 84.27A2.5 2.5 0 0140.18 80H130a10 10 0 000-20H40.18a2.5 2.5 0 01-1.77-4.27l13.66-13.66a10 10 0 00-14.14-14.14z' fill='currentColor'></path></svg></span></a>
+    </li>
+  {% endif %}
+  {% for item in params.items %}
+    {% if item.href %}
+    <li class="flex items-baseline max-w-full 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 | filterquotes | safe if item.html else item.text }}</strong>
+        {% else %}
+        {{ item.html | filterquotes | safe if item.html else item.text }}
+        {% endif %}
+      </a>
+    </li>
+    {% else %}
+    <li class="flex items-baseline max-w-full 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 | filterquotes | safe if item.html else item.text }}</strong>
+        {% else %}
+        {{ item.html | filterquotes | 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.