desy-html 16.0.4 → 17.0.1

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

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

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

@@ -1,35 +1,35 @@
-<!-- card -->
-<div {%- if params.classes %} class="{{ params.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-  <div {%- if params.containerClasses %} class="{{ params.containerClasses }}"{% endif %}>
-    <div class="flex">
-      <div {%- if params.left or params.right %} class="flex-1"{% endif %}>
-        {% if caller %}
-        {{ caller() | indent(4) }} {#- if statement allows usage of `call` to be optional -#}
-        {% elseif params.caller %}
-        {{ params.caller | safe | indent(4) }}
-        {% endif %}
-      </div>
-      {% if params.left %}
-      <div class="{% if params.left.classes %}{{ params.left.classes }}{% else-%} lg:order-first w-1/2 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.left.backgroundFullColor }}; {% if params.left.backgroundFullUrl %} background-image: url('{{ params.left.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.left.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-        {{ params.left.html | filterquotes | safe if params.left.html}}
-      </div>
-      {% endif %}
-      {% if params.right %}
-      <div class="{% if params.right.classes %}{{ params.right.classes }}{% else-%} w-1/2 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.right.backgroundFullColor }}; {% if params.right.backgroundFullUrl %} background-image: url('{{ params.right.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.right.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-        {{ params.right.html | filterquotes | safe if params.right.html}}
-      </div>
-      {% endif %}
-    </div>
-    {% if params.super %}
-    <div class="{% if params.super.classes %}{{ params.super.classes }}{% else-%} order-first h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.super.backgroundFullColor }}; {% if params.super.backgroundFullUrl %} background-image: url('{{ params.super.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.super.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-      {{ params.super.html | filterquotes | safe if params.super.html}}
-    </div>
-    {% endif %}
-    {% if params.sub %}
-    <div class="{% if params.sub.classes %}{{ params.sub.classes }}{% else-%} h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.sub.backgroundFullColor }}; {% if params.sub.backgroundFullUrl %} background-image: url('{{ params.sub.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.sub.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-      {{ params.sub.html | filterquotes | safe if params.sub.html}}
-    </div>
-    {% endif %}
-  </div>
-</div>
+<!-- card -->
+<div {%- if params.classes %} class="{{ params.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  <div {%- if params.containerClasses %} class="{{ params.containerClasses }}"{% endif %}>
+    <div class="flex">
+      <div {%- if params.left or params.right %} class="flex-1"{% endif %}>
+        {% if caller %}
+        {{ caller() | indent(4) }} {#- if statement allows usage of `call` to be optional -#}
+        {% elseif params.caller %}
+        {{ params.caller | safe | indent(4) }}
+        {% endif %}
+      </div>
+      {% if params.left %}
+      <div class="{% if params.left.classes %}{{ params.left.classes }}{% else-%} lg:order-first w-1/2 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.left.backgroundFullColor }}; {% if params.left.backgroundFullUrl %} background-image: url('{{ params.left.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.left.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+        {{ params.left.html | filterquotes | safe if params.left.html}}
+      </div>
+      {% endif %}
+      {% if params.right %}
+      <div class="{% if params.right.classes %}{{ params.right.classes }}{% else-%} w-1/2 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.right.backgroundFullColor }}; {% if params.right.backgroundFullUrl %} background-image: url('{{ params.right.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.right.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+        {{ params.right.html | filterquotes | safe if params.right.html}}
+      </div>
+      {% endif %}
+    </div>
+    {% if params.super %}
+    <div class="{% if params.super.classes %}{{ params.super.classes }}{% else-%} order-first h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.super.backgroundFullColor }}; {% if params.super.backgroundFullUrl %} background-image: url('{{ params.super.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.super.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+      {{ params.super.html | filterquotes | safe if params.super.html}}
+    </div>
+    {% endif %}
+    {% if params.sub %}
+    <div class="{% if params.sub.classes %}{{ params.sub.classes }}{% else-%} h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.sub.backgroundFullColor }}; {% if params.sub.backgroundFullUrl %} background-image: url('{{ params.sub.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.sub.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+      {{ params.sub.html | filterquotes | safe if params.sub.html}}
+    </div>
+    {% endif %}
+  </div>
+</div>
 <!-- /card -->

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

@@ -1,113 +1,113 @@
-params:
-- name: containerClasses
-  type: string
-  required: false
-  description: Classes that can be added to the inner container.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the card component.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the card component.
-- name: caller
-  type: nunjucks-block
-  required: false
-  description: Content in the flexible content area. Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire media-object component in a `call` block.
-- name: super
-  type: object
-  required: false
-  description: This is an area over the card content
-  - name: backgroundFullColor
-    type: string
-    required: true
-    description: The css color used in the background image that fills all the super area.
-  - name: backgroundFullUrl
-    type: string
-    required: false
-    description: Url used in the background image that fills all the super area.
-  - name: html
-    type: string
-    required: false
-    description: HTML to use inside the super area.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the super area.
-  - name: attributes
-    type: object
-    required: false
-    description: HTML attributes (for example data attributes) to add to the super area.
-- name: sub
-  type: object
-  required: false
-  description: This is an area under the card content
-  - name: backgroundFullColor
-    type: string
-    required: true
-    description: The css color used in the background image that fills all the sub area.
-  - name: backgroundFullUrl
-    type: string
-    required: false
-    description: Url used in the background image that fills all the sub area.
-  - name: html
-    type: string
-    required: false
-    description: HTML to use inside the sub area.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the sub area.
-  - name: attributes
-    type: object
-    required: false
-    description: HTML attributes (for example data attributes) to add to the sub area.
-- name: left
-  type: object
-  required: false
-  description: This is an area over the card content
-  - name: backgroundFullColor
-    type: string
-    required: true
-    description: The css color used in the background image that fills all the left area.
-  - name: backgroundFullUrl
-    type: string
-    required: false
-    description: Url used in the background image that fills all the left area.
-  - name: html
-    type: string
-    required: false
-    description: HTML to use inside the left area.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the left area.
-  - name: attributes
-    type: object
-    required: false
-    description: HTML attributes (for example data attributes) to add to the super area.
-- name: right
-  type: object
-  required: false
-  description: This is an area under the card content
-  - name: backgroundFullColor
-    type: string
-    required: true
-    description: The css color used in the background image that fills all the right area.
-  - name: backgroundFullUrl
-    type: string
-    required: false
-    description: Url used in the background image that fills all the right area.
-  - name: html
-    type: string
-    required: false
-    description: HTML to use inside the right area.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the right area.
-  - name: attributes
-    type: object
-    required: false
+params:
+- name: containerClasses
+  type: string
+  required: false
+  description: Classes that can be added to the inner container.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the card component.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the card component.
+- name: caller
+  type: nunjucks-block
+  required: false
+  description: Content in the flexible content area. Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire media-object component in a `call` block.
+- name: super
+  type: object
+  required: false
+  description: This is an area over the card content
+  - name: backgroundFullColor
+    type: string
+    required: true
+    description: The css color used in the background image that fills all the super area.
+  - name: backgroundFullUrl
+    type: string
+    required: false
+    description: Url used in the background image that fills all the super area.
+  - name: html
+    type: string
+    required: false
+    description: HTML to use inside the super area.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the super area.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the super area.
+- name: sub
+  type: object
+  required: false
+  description: This is an area under the card content
+  - name: backgroundFullColor
+    type: string
+    required: true
+    description: The css color used in the background image that fills all the sub area.
+  - name: backgroundFullUrl
+    type: string
+    required: false
+    description: Url used in the background image that fills all the sub area.
+  - name: html
+    type: string
+    required: false
+    description: HTML to use inside the sub area.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the sub area.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the sub area.
+- name: left
+  type: object
+  required: false
+  description: This is an area over the card content
+  - name: backgroundFullColor
+    type: string
+    required: true
+    description: The css color used in the background image that fills all the left area.
+  - name: backgroundFullUrl
+    type: string
+    required: false
+    description: Url used in the background image that fills all the left area.
+  - name: html
+    type: string
+    required: false
+    description: HTML to use inside the left area.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the left area.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the super area.
+- name: right
+  type: object
+  required: false
+  description: This is an area under the card content
+  - name: backgroundFullColor
+    type: string
+    required: true
+    description: The css color used in the background image that fills all the right area.
+  - name: backgroundFullUrl
+    type: string
+    required: false
+    description: Url used in the background image that fills all the right area.
+  - name: html
+    type: string
+    required: false
+    description: HTML to use inside the right area.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the right area.
+  - name: attributes
+    type: object
+    required: false
     description: HTML attributes (for example data attributes) to add to the right area.