desy-html 12.0.0 → 12.1.0

package/docs/_macro.example-render.njk

@@ -1,376 +1,376 @@
-{% from "components/accordion/_macro.accordion.njk"
-import componentAccordion %}
-{% from "components/accordion-history/_macro.accordion-history.njk"
-import componentAccordionHistory %}
-{% from "components/alert/_macro.alert.njk"
-import componentAlert %}
-{% from "components/breadcrumbs/_macro.breadcrumbs.njk"
-import componentBreadcrumbs %}
-{% from "components/button/_macro.button.njk"
-import componentButton %}
-{% from "components/button-loader/_macro.button-loader.njk"
-import componentButtonLoader %}
-{% from "components/card/_macro.card.njk"
-import componentCard %}
-{% from "components/character-count/_macro.character-count.njk"
-import componentCharacterCount %}
-{% from "components/checkboxes/_macro.checkboxes.njk"
-import componentCheckboxes %}
-{% from "components/collapsible/_macro.collapsible.njk"
-import componentCollapsible %}
-{% from "components/dialog/_macro.dialog.njk"
-import componentDialog %}
-{% from "components/date-input/_macro.date-input.njk"
-import componentDateInput %}
-{% from "components/datepicker/_macro.datepicker.njk"
-import componentDatepicker %}
-{% from "components/description-list/_macro.description-list.njk"
-import componentDescriptionList %}
-{% from "components/details/_macro.details.njk"
-import componentDetails %}
-{% from "components/dropdown/_macro.dropdown.njk"
-import componentDropdown %}
-{% from "components/error-message/_macro.error-message.njk"
-import componentErrorMessage %}
-{% from "components/error-summary/_macro.error-summary.njk"
-import componentErrorSummary %}
-{% from "components/fieldset/_macro.fieldset.njk"
-import componentFieldset %}
-{% from "components/file-upload/_macro.file-upload.njk"
-import componentFileUpload %}
-{% from "components/footer/_macro.footer.njk"
-import componentFooter %}
-{% from "components/header/_macro.header.njk"
-import componentHeader %}
-{% from "components/header-mini/_macro.header-mini.njk"
-import componentHeaderMini %}
-{% from "components/header-advanced/_macro.header-advanced.njk"
-import componentHeaderAdvanced %}
-{% from "components/hint/_macro.hint.njk"
-import componentHint %}
-{% from "components/input/_macro.input.njk"
-import componentInput %}
-{% from "components/input-group/_macro.input-group.njk"
-import componentInputGroup %}
-{% from "components/item/_macro.item.njk"
-import componentItem %}
-{% from "components/label/_macro.label.njk"
-import componentLabel %}
-{% from "components/links-list/_macro.links-list.njk"
-import componentLinksList %}
-{% from "components/listbox/_macro.listbox.njk"
-import componentListbox %}
-{% from "components/media-object/_macro.media-object.njk"
-import componentMediaObject %}
-{% from "components/menu-horizontal/_macro.menu-horizontal.njk"
-import componentMenuHorizontal %}
-{% from "components/menu-navigation/_macro.menu-navigation.njk"
-import componentMenuNavigation %}
-{% from "components/menu-vertical/_macro.menu-vertical.njk"
-import componentMenuVertical %}
-{% from "components/menubar/_macro.menubar.njk"
-import componentMenubar %}
-{% from "components/modal/_macro.modal.njk"
-import componentModal %}
-{% from "components/nav/_macro.nav.njk"
-import componentNav %}
-{% from "components/pagination/_macro.pagination.njk"
-import componentPagination %}
-{% from "components/pill/_macro.pill.njk"
-import componentPill %}
-{% from "components/notification/_macro.notification.njk"
-import componentNotification %}
-{% from "components/radios/_macro.radios.njk"
-import componentRadios %}
-{% from "components/searchbar/_macro.searchbar.njk"
-import componentSearchbar %}
-{% from "components/select/_macro.select.njk"
-import componentSelect %}
-{% from "components/spinner/_macro.spinner.njk"
-import componentSpinner %}
-{% from "components/status/_macro.status.njk"
-import componentStatus %}
-{% from "components/status-item/_macro.status-item.njk"
-import componentStatusItem %}
-{% from "components/skip-link/_macro.skip-link.njk"
-import componentSkipLink %}
-{% from "components/table/_macro.table.njk"
-import componentTable %}
-{% from "components/table-advanced/_macro.table-advanced.njk"
-import componentTableAdvanced %}
-{% from "components/tabs/_macro.tabs.njk"
-import componentTabs %}
-{% from "components/textarea/_macro.textarea.njk"
-import componentTextarea %}
-{% from "components/toggle/_macro.toggle.njk"
-import componentToggle %}
-{% from "components/tooltip/_macro.tooltip.njk"
-import componentTooltip %}
-{% from "components/tree/_macro.tree.njk"
-import componentTree %}
-
-
-{% macro exampleRender(data) %}
-  {% set exampleComponent = data.data.exampleComponent %}
-  {% set examples = data.data.examples %}
-  {% set exampleParams = data.data.params %}
-
-  <div>
-    <h1 class="c-h1">{{ exampleComponent | capitalize }}</h1>
-    {% from "_macro.load-component-params.njk" import loadComponentParams %}
-    <div class="sr-only">
-      <h2 class="mb-sm font-bold">Parámetros Nunjucks del componente<span class="sr-only">: "{{ exampleComponent | capitalize }}". Versión: {{ '' | filterversion }}</span></h2>
-      <p>Los parámetros de Nunjucks para este componente están dentro de la siguiente etiqueta code en formato yaml.</p>
-      <pre>
-        <code class="language-yaml hljs text-sm">{{ loadComponentParams(exampleComponent) | filterescapeltgt }}</code>
-      </pre>
-    </div>
-    <div aria-hidden="true">
-      {% call componentDetails({
-        "summary": {
-          "html": "Mostrar parámetros",
-          "classes": "c-link text-sm"
-        }
-      })  %}
-        <div class="c-markup">
-          <div class="py-base">
-            <h2 class="mb-sm font-bold">Parámetros Nunjucks del componente<span class="sr-only">: "{{ exampleComponent | capitalize }}"</span></h2>
-            <pre>
-              <code class="language-yaml hljs text-sm">{{ loadComponentParams(exampleComponent) | highlight("yaml") | safe }}
-              </code>
-            </pre>
-          </div>
-        </div>
-      {% endcall %}
-    </div>
-  </div>
-  {% for example in examples %}
-    <article class="grid grid-cols-1 gap-x-xl mt-xl">
-      <div class="pt-xl">
-        <h3 id="{{ example.name |filterslugify }}" class="c-h3 group">{{ example.name | capitalize }} <a href="#{{ example.name |filterslugify }}" class="hidden font-semibold text-neutral-base underline group-hover:inline-block">#</a></h3>
-        <p class="c-paragraph-base mb-0">{{ example.description | safe }}</p>
-        <div class="sr-only">
-          <h4>Ejemplo: "{{ example.name | capitalize }}", de código HTML, para maquetar el componente: "{{ exampleComponent | replace("-", " ") | title }}", versión: {{ '' | filterversion }}, del sistema de diseño DESY</h4>
-          <p>Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: <a href="https://bitbucket.org/sdaragon/desy-html/src/master/">desy-html</a>.</p>
-          <p>Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: <a href="https://bitbucket.org/sdaragon/desy-html/src/master/">desy-html</a>.</p>
-          <p>Usar sólo el código que está dentro de la siguiente etiqueta &lt;code&gt;.</p>
-          <pre><code class="language-html hljs text-sm" data-desy-html-version="{{ '' | filterversion }}">
-              {{- getHTMLCodeFromExample(exampleComponent, example.data, 'component') -}}
-            </code>
-          </pre>
-        </div>
-        {% if example.data.caller %}
-          {% from "_macro.render-caller.njk" import renderCaller %}
-          {% set callerHtml %}{{ renderCaller(example.data.caller) }}{% endset %}
-          {% set callerNunjucks %}
-            {% raw %}{%{% endraw %} from "components/{{ exampleComponent }}/_macro.{{ exampleComponent }}.njk" import component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }}{% raw %} %}{% endraw %}
-          {% raw %}{% {% endraw %}call component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }} {% endset %}
-          <div class="sr-only">
-            <h4>Ejemplo: "{{ example.name | capitalize }}", de código Nunjucks, para maquetar el componente: "{{ exampleComponent | replace("-", " ") | title }}", versión: {{ '' | filterversion }}, del sistema de diseño DESY</h4>
-            <p>Pegar en la página: pagina-prueba.html del proyecto: <a href="https://bitbucket.org/sdaragon/desy-html-starter/src/master/">desy-html-starter</a>.</p>
-            <p>Usar sólo el código que está dentro de la siguiente etiqueta &lt;code&gt;.</p>
-            <pre><code class="language-js hljs text-sm" data-desy-html-version="{{ '' | filterversion }}">
-{{ callerNunjucks | safe }}({{ example.data | filtercaller | filterescapeltgt | dump(2) | safe }}){% raw %} %}{% endraw %}
-{{ callerHtml }}
-{% raw %}{%{% endraw %} endcall {% raw %} %}{% endraw %}</code></pre>
-
-          </div>
-        {% else %}
-          <div class="sr-only">
-            <h4>Ejemplo: "{{ example.name | capitalize }}", de código Nunjucks, para maquetar el componente: "{{ exampleComponent | replace("-", " ") | title }}", versión: {{ '' | filterversion }}, del sistema de diseño DESY</h4>
-            <p>Pegar en la página: pagina-prueba.html del proyecto: <a href="https://bitbucket.org/sdaragon/desy-html-starter/src/master/">desy-html-starter</a>.</p>
-            <p>Usar sólo el código que está dentro de la siguiente etiqueta &lt;code&gt;.</p>
-            <pre><code class="language-njk hljs text-sm" data-desy-html-version="{{ '' | filterversion }}">{{- getNunjucksCodeFromExample(exampleComponent, example.data, 'component') | filterescapeltgt | safe -}}</code></pre>
-          </div>
-        {% endif %}
-      </div>
-      <div class="pt-base lg:pt-lg">
-        <div class="p-base border border-neutral-base">
-          {% if exampleComponent == "accordion" %}
-          {{ componentAccordion(example.data) }}
-          {% elseif exampleComponent == "accordion-history" %}
-          {{ componentAccordionHistory(example.data) }}
-          {% elseif exampleComponent == "alert" %}
-          {% call componentAlert(example.data) %}{{ example.data.caller | safe }}{% endcall %}
-          {% elseif exampleComponent == "breadcrumbs" %}
-          {{ componentBreadcrumbs(example.data) }}
-          {% elseif exampleComponent == "button" %}
-          {{ componentButton(example.data) }}
-          {% elseif exampleComponent == "button-loader" %}
-          {{ componentButtonLoader(example.data) }}
-          {% elseif exampleComponent == "card" %}
-          {% call componentCard(example.data) %}{{ example.data.caller | safe }}{% endcall %}
-          {% elseif exampleComponent == "character-count" %}
-          {{ componentCharacterCount(example.data) }}
-          {% elseif exampleComponent == "checkboxes" %}
-          {{ componentCheckboxes(example.data) }}
-          {% elseif exampleComponent == "collapsible" %}
-          {{ componentCollapsible(example.data) }}
-          {% elseif exampleComponent == "dialog" %}
-          {% call componentDialog(example.data) %}{{ example.data.caller | safe }}{% endcall %}
-          {% elseif exampleComponent == "date-input" %}
-          {{ componentDateInput(example.data) }}
-          {% elseif exampleComponent == "datepicker" %}
-          {% call componentDatepicker(example.data) %}{{ example.data.caller | safe }}{% endcall %}
-          {% elseif exampleComponent == "description-list" %}
-          {{ componentDescriptionList(example.data) }}
-          {% elseif exampleComponent == "details" %}
-          {% call componentDetails(example.data) %}{{ example.data.caller | safe }}{% endcall %}
-          {% elseif exampleComponent == "dropdown" %}
-          {% call componentDropdown(example.data) %}{{ example.data.caller | safe }}{% endcall %}
-          {% elseif exampleComponent == "error-message" %}
-          {{ componentErrorMessage(example.data) }}
-          {% elseif exampleComponent == "error-summary" %}
-          {{ componentErrorSummary(example.data) }}
-          {% elseif exampleComponent == "fieldset" %}
-          {% call componentFieldset(example.data) %}{{ example.data.caller | safe }}{% endcall %}
-          {% elseif exampleComponent == "file-upload" %}
-          {{ componentFileUpload(example.data) }}
-          {% elseif exampleComponent == "footer" %}
-          {{ componentFooter(example.data) }}
-          {% elseif exampleComponent == "header" %}
-          {% call componentHeader(example.data) %}{{ example.data.caller | safe }}{% endcall %}
-          {% elseif exampleComponent == "header-mini" %}
-          {{ componentHeaderMini(example.data) }}
-          {% elseif exampleComponent == "header-advanced" %}
-          {% call componentHeaderAdvanced(example.data) %}{{ example.data.caller | safe }}{% endcall %}
-          {% elseif exampleComponent == "hint" %}
-          {{ componentHint(example.data) }}
-          {% elseif exampleComponent == "input" %}
-          {{ componentInput(example.data) }}
-          {% elseif exampleComponent == "input-group" %}
-          {{ componentInputGroup(example.data) }}
-          {% elseif exampleComponent == "item" %}
-          {% call componentItem(example.data) %}{{ example.data.caller | safe }}{% endcall %}
-          {% elseif exampleComponent == "label" %}
-          {{ componentLabel(example.data) }}
-          {% elseif exampleComponent == "links-list" %}
-          {{ componentLinksList(example.data) }}
-          {% elseif exampleComponent == "listbox" %}
-          {% call componentListbox(example.data) %}{{ example.data.caller | safe }}{% endcall %}
-          {% elseif exampleComponent == "media-object" %}
-          {% call componentMediaObject(example.data) %}{{ example.data.caller | safe }}{% endcall %}
-          {% elseif exampleComponent == "menu-horizontal" %}
-          {{ componentMenuHorizontal(example.data) }}
-          {% elseif exampleComponent == "menu-navigation" %}
-          {{ componentMenuNavigation(example.data) }}
-          {% elseif exampleComponent == "menu-vertical" %}
-          {{ componentMenuVertical(example.data) }}
-          {% elseif exampleComponent == "menubar" %}
-          {{ componentMenubar(example.data) }}
-          {% elseif exampleComponent == "modal" %}
-          {% call componentModal(example.data) %}{{ example.data.caller | safe }}{% endcall %}
-          {% elseif exampleComponent == "nav" %}
-          {{ componentNav(example.data) }}
-          {% elseif exampleComponent == "pagination" %}
-          {{ componentPagination(example.data) }}
-          {% elseif exampleComponent == "pill" %}
-          {{ componentPill(example.data) }}
-          {% elseif exampleComponent == "notification" %}
-          {{ componentNotification(example.data) }}
-          {% elseif exampleComponent == "radios" %}
-          {{ componentRadios(example.data) }}
-          {% elseif exampleComponent == "searchbar" %}
-          {{ componentSearchbar(example.data) }}
-          {% elseif exampleComponent == "select" %}
-          {{ componentSelect(example.data) }}
-          {% elseif exampleComponent == "spinner" %}
-          {{ componentSpinner(example.data) }}
-          {% elseif exampleComponent == "status" %}
-          {{ componentStatus(example.data) }}
-          {% elseif exampleComponent == "status-item" %}
-          {% call componentStatusItem(example.data) %}{{ example.data.caller | safe }}{% endcall %}
-          {% elseif exampleComponent == "skip-link" %}
-          {{ componentSkipLink(example.data) }}
-          {% elseif exampleComponent == "table" %}
-          {{ componentTable(example.data) }}
-          {% elseif exampleComponent == "table-advanced" %}
-          {{ componentTableAdvanced(example.data) }}
-          {% elseif exampleComponent == "tabs" %}
-          {{ componentTabs(example.data) }}
-          {% elseif exampleComponent == "textarea" %}
-          {{ componentTextarea(example.data) }}
-          {% elseif exampleComponent == "toggle" %}
-          {{ componentToggle(example.data) }}
-          {% elseif exampleComponent == "tooltip" %}
-          {{ componentTooltip(example.data) }}
-          {% elseif exampleComponent == "tree" %}
-          {{ componentTree(example.data) }}
-
-          {% endif %}
-        </div>
-      </div>
-      <div class="pt-base lg:pt-lg mb-base">
-          {% set htmlContent %}
-            {{ componentButton({
-              "html": 'Copiar código<span class="sr-only"> HTML</span>',
-              "classes": "c-button--sm c-button--transparent mb-sm",
-              "attributes": {
-                "data-module": "c-button-copy"
-              }
-            }) }}
-            <pre class="hljs" aria-hidden="true"><code class="language-html hljs text-sm">
-                {{- getHTMLCodeFromExample(exampleComponent, example.data, 'component') | highlight("html") | safe -}}
-              </code>
-            </pre>
-          {% endset %}
-          {% set nunjucksContent %}
-            {% if example.data.caller %}
-              {% from "_macro.render-caller.njk" import renderCaller %}
-              {% set callerHtml %}{{ renderCaller(example.data.caller) }}{% endset %}
-              {% set callerNunjucks %}
-                {% raw %}{%{% endraw %} from "components/{{ exampleComponent }}/_macro.{{ exampleComponent }}.njk" import component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }}{% raw %} %}{% endraw %}
-              {% raw %}{% {% endraw %}call component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }} {% endset %}
-              {{ componentButton({
-                "html": 'Copiar código<span class="sr-only"> Nunjucks</span>',
-                "classes": "c-button--sm c-button--transparent mb-sm",
-                "attributes": {
-                  "data-module": "c-button-copy"
-                }
-              }) }}
-              <pre><code class="language-js hljs text-sm">
-{{ callerNunjucks | highlight("js") | safe }}({{ example.data | filtercaller | dump(2) | highlight("js") | safe }}){% raw %} %}{% endraw %}
-{{ callerHtml | highlight("html") | safe }}
-{% raw %}{%{% endraw %} endcall {% raw %} %}{% endraw %}</code></pre>
-              {% else %}
-                {{ componentButton({
-                  "html": 'Copiar código<span class="sr-only"> Nunjucks</span>',
-                  "classes": "c-button--sm c-button--transparent mb-sm",
-                  "attributes": {
-                    "data-module": "c-button-copy"
-                  }
-                }) }}
-                <pre class="hljs"><code class="language-js hljs text-sm">{{- getNunjucksCodeFromExample(exampleComponent, example.data, 'component') | highlight("twig") | safe -}}</code></pre>
-              {% endif %}
-          {% endset %}
-        {% call componentDetails({
-          "summary": {
-            "html": 'Mostrar código<span class="sr-only">del ejemplo: ' + example.name | capitalize + '</span>',
-            "classes": "c-link text-sm"
-          }
-        })  %}
-            {{ componentTabs({
-              "headingLevel": 4,
-              "tablistAriaLabel": "Ejemplos de código de: " + example.name | capitalize,
-              "idPrefix": "tab-" + loop.index,
-              "classes": "c-tabs--scroll",
-              "items": [
-                {
-                  "text": "Nunjucks macro",
-                  "panel": {
-                    "html": nunjucksContent | trim
-                  }
-                },
-                {
-                  "text": "HTML",
-                  "panel": {
-                    "html": htmlContent | trim
-                  }
-                }
-              ]
-            })  }}
-        {% endcall %}
-      </div>
-    </article>
-  {% endfor %}
-{% endmacro %}
+{% from "components/accordion/_macro.accordion.njk"
+import componentAccordion %}
+{% from "components/accordion-history/_macro.accordion-history.njk"
+import componentAccordionHistory %}
+{% from "components/alert/_macro.alert.njk"
+import componentAlert %}
+{% from "components/breadcrumbs/_macro.breadcrumbs.njk"
+import componentBreadcrumbs %}
+{% from "components/button/_macro.button.njk"
+import componentButton %}
+{% from "components/button-loader/_macro.button-loader.njk"
+import componentButtonLoader %}
+{% from "components/card/_macro.card.njk"
+import componentCard %}
+{% from "components/character-count/_macro.character-count.njk"
+import componentCharacterCount %}
+{% from "components/checkboxes/_macro.checkboxes.njk"
+import componentCheckboxes %}
+{% from "components/collapsible/_macro.collapsible.njk"
+import componentCollapsible %}
+{% from "components/dialog/_macro.dialog.njk"
+import componentDialog %}
+{% from "components/date-input/_macro.date-input.njk"
+import componentDateInput %}
+{% from "components/datepicker/_macro.datepicker.njk"
+import componentDatepicker %}
+{% from "components/description-list/_macro.description-list.njk"
+import componentDescriptionList %}
+{% from "components/details/_macro.details.njk"
+import componentDetails %}
+{% from "components/dropdown/_macro.dropdown.njk"
+import componentDropdown %}
+{% from "components/error-message/_macro.error-message.njk"
+import componentErrorMessage %}
+{% from "components/error-summary/_macro.error-summary.njk"
+import componentErrorSummary %}
+{% from "components/fieldset/_macro.fieldset.njk"
+import componentFieldset %}
+{% from "components/file-upload/_macro.file-upload.njk"
+import componentFileUpload %}
+{% from "components/footer/_macro.footer.njk"
+import componentFooter %}
+{% from "components/header/_macro.header.njk"
+import componentHeader %}
+{% from "components/header-mini/_macro.header-mini.njk"
+import componentHeaderMini %}
+{% from "components/header-advanced/_macro.header-advanced.njk"
+import componentHeaderAdvanced %}
+{% from "components/hint/_macro.hint.njk"
+import componentHint %}
+{% from "components/input/_macro.input.njk"
+import componentInput %}
+{% from "components/input-group/_macro.input-group.njk"
+import componentInputGroup %}
+{% from "components/item/_macro.item.njk"
+import componentItem %}
+{% from "components/label/_macro.label.njk"
+import componentLabel %}
+{% from "components/links-list/_macro.links-list.njk"
+import componentLinksList %}
+{% from "components/listbox/_macro.listbox.njk"
+import componentListbox %}
+{% from "components/media-object/_macro.media-object.njk"
+import componentMediaObject %}
+{% from "components/menu-horizontal/_macro.menu-horizontal.njk"
+import componentMenuHorizontal %}
+{% from "components/menu-navigation/_macro.menu-navigation.njk"
+import componentMenuNavigation %}
+{% from "components/menu-vertical/_macro.menu-vertical.njk"
+import componentMenuVertical %}
+{% from "components/menubar/_macro.menubar.njk"
+import componentMenubar %}
+{% from "components/modal/_macro.modal.njk"
+import componentModal %}
+{% from "components/nav/_macro.nav.njk"
+import componentNav %}
+{% from "components/pagination/_macro.pagination.njk"
+import componentPagination %}
+{% from "components/pill/_macro.pill.njk"
+import componentPill %}
+{% from "components/notification/_macro.notification.njk"
+import componentNotification %}
+{% from "components/radios/_macro.radios.njk"
+import componentRadios %}
+{% from "components/searchbar/_macro.searchbar.njk"
+import componentSearchbar %}
+{% from "components/select/_macro.select.njk"
+import componentSelect %}
+{% from "components/spinner/_macro.spinner.njk"
+import componentSpinner %}
+{% from "components/status/_macro.status.njk"
+import componentStatus %}
+{% from "components/status-item/_macro.status-item.njk"
+import componentStatusItem %}
+{% from "components/skip-link/_macro.skip-link.njk"
+import componentSkipLink %}
+{% from "components/table/_macro.table.njk"
+import componentTable %}
+{% from "components/table-advanced/_macro.table-advanced.njk"
+import componentTableAdvanced %}
+{% from "components/tabs/_macro.tabs.njk"
+import componentTabs %}
+{% from "components/textarea/_macro.textarea.njk"
+import componentTextarea %}
+{% from "components/toggle/_macro.toggle.njk"
+import componentToggle %}
+{% from "components/tooltip/_macro.tooltip.njk"
+import componentTooltip %}
+{% from "components/tree/_macro.tree.njk"
+import componentTree %}
+
+
+{% macro exampleRender(data) %}
+  {% set exampleComponent = data.data.exampleComponent %}
+  {% set examples = data.data.examples %}
+  {% set exampleParams = data.data.params %}
+
+  <div>
+    <h1 class="c-h1">{{ exampleComponent | capitalize }}</h1>
+    {% from "_macro.load-component-params.njk" import loadComponentParams %}
+    <div class="sr-only">
+      <h2 class="mb-sm font-bold">Parámetros Nunjucks del componente<span class="sr-only">: "{{ exampleComponent | capitalize }}". Versión: {{ '' | filterversion }}</span></h2>
+      <p>Los parámetros de Nunjucks para este componente están dentro de la siguiente etiqueta code en formato yaml.</p>
+      <pre>
+        <code class="language-yaml hljs text-sm" tabindex="-1">{{ loadComponentParams(exampleComponent) | filterescapeltgt }}</code>
+      </pre>
+    </div>
+    <div aria-hidden="true">
+      {% call componentDetails({
+        "summary": {
+          "html": "Mostrar parámetros",
+          "classes": "c-link text-sm"
+        }
+      })  %}
+        <div class="c-markup">
+          <div class="py-base">
+            <h2 class="mb-sm font-bold">Parámetros Nunjucks del componente<span class="sr-only">: "{{ exampleComponent | capitalize }}"</span></h2>
+            <pre>
+              <code class="language-yaml hljs text-sm">{{ loadComponentParams(exampleComponent) | highlight("yaml") | safe }}
+              </code>
+            </pre>
+          </div>
+        </div>
+      {% endcall %}
+    </div>
+  </div>
+  {% for example in examples %}
+    <article class="grid grid-cols-1 gap-x-xl mt-xl">
+      <div class="pt-xl">
+        <h3 id="{{ example.name |filterslugify }}" class="c-h3 group">{{ example.name | capitalize }} <a href="#{{ example.name |filterslugify }}" class="hidden font-semibold text-neutral-base underline group-hover:inline-block">#</a></h3>
+        <p class="c-paragraph-base mb-0">{{ example.description | safe }}</p>
+        <div class="sr-only">
+          <h4>Ejemplo: "{{ example.name | capitalize }}", de código HTML, para maquetar el componente: "{{ exampleComponent | replace("-", " ") | title }}", versión: {{ '' | filterversion }}, del sistema de diseño DESY</h4>
+          <p>Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/</p>
+          <p>Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/</p>
+          <p>Usar sólo el código que está dentro de la siguiente etiqueta &lt;code&gt;.</p>
+          <pre><code class="language-html hljs text-sm" data-desy-html-version="{{ '' | filterversion }}" tabindex="-1">
+              {{- getHTMLCodeFromExample(exampleComponent, example.data, 'component') -}}
+            </code>
+          </pre>
+        </div>
+        {% if example.data.caller %}
+          {% from "_macro.render-caller.njk" import renderCaller %}
+          {% set callerHtml %}{{ renderCaller(example.data.caller) }}{% endset %}
+          {% set callerNunjucks %}
+            {% raw %}{%{% endraw %} from "components/{{ exampleComponent }}/_macro.{{ exampleComponent }}.njk" import component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }}{% raw %} %}{% endraw %}
+          {% raw %}{% {% endraw %}call component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }} {% endset %}
+          <div class="sr-only">
+            <h4>Ejemplo: "{{ example.name | capitalize }}", de código Nunjucks, para maquetar el componente: "{{ exampleComponent | replace("-", " ") | title }}", versión: {{ '' | filterversion }}, del sistema de diseño DESY</h4>
+            <p>Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/</p>
+            <p>Usar sólo el código que está dentro de la siguiente etiqueta &lt;code&gt;.</p>
+            <pre><code class="language-js hljs text-sm" data-desy-html-version="{{ '' | filterversion }}" tabindex="-1">
+{{ callerNunjucks | safe }}({{ example.data | filtercaller | filterescapeltgt | dump(2) | safe }}){% raw %} %}{% endraw %}
+{{ callerHtml }}
+{% raw %}{%{% endraw %} endcall {% raw %} %}{% endraw %}</code></pre>
+
+          </div>
+        {% else %}
+          <div class="sr-only">
+            <h4>Ejemplo: "{{ example.name | capitalize }}", de código Nunjucks, para maquetar el componente: "{{ exampleComponent | replace("-", " ") | title }}", versión: {{ '' | filterversion }}, del sistema de diseño DESY</h4>
+            <p>Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/</p>
+            <p>Usar sólo el código que está dentro de la siguiente etiqueta &lt;code&gt;.</p>
+            <pre><code class="language-njk hljs text-sm" data-desy-html-version="{{ '' | filterversion }}" tabindex="-1">{{- getNunjucksCodeFromExample(exampleComponent, example.data, 'component') | filterescapeltgt | safe -}}</code></pre>
+          </div>
+        {% endif %}
+      </div>
+      <div class="pt-base lg:pt-lg">
+        <div class="p-base border border-neutral-base">
+          {% if exampleComponent == "accordion" %}
+          {{ componentAccordion(example.data) }}
+          {% elseif exampleComponent == "accordion-history" %}
+          {{ componentAccordionHistory(example.data) }}
+          {% elseif exampleComponent == "alert" %}
+          {% call componentAlert(example.data) %}{{ example.data.caller | safe }}{% endcall %}
+          {% elseif exampleComponent == "breadcrumbs" %}
+          {{ componentBreadcrumbs(example.data) }}
+          {% elseif exampleComponent == "button" %}
+          {{ componentButton(example.data) }}
+          {% elseif exampleComponent == "button-loader" %}
+          {{ componentButtonLoader(example.data) }}
+          {% elseif exampleComponent == "card" %}
+          {% call componentCard(example.data) %}{{ example.data.caller | safe }}{% endcall %}
+          {% elseif exampleComponent == "character-count" %}
+          {{ componentCharacterCount(example.data) }}
+          {% elseif exampleComponent == "checkboxes" %}
+          {{ componentCheckboxes(example.data) }}
+          {% elseif exampleComponent == "collapsible" %}
+          {{ componentCollapsible(example.data) }}
+          {% elseif exampleComponent == "dialog" %}
+          {% call componentDialog(example.data) %}{{ example.data.caller | safe }}{% endcall %}
+          {% elseif exampleComponent == "date-input" %}
+          {{ componentDateInput(example.data) }}
+          {% elseif exampleComponent == "datepicker" %}
+          {% call componentDatepicker(example.data) %}{{ example.data.caller | safe }}{% endcall %}
+          {% elseif exampleComponent == "description-list" %}
+          {{ componentDescriptionList(example.data) }}
+          {% elseif exampleComponent == "details" %}
+          {% call componentDetails(example.data) %}{{ example.data.caller | safe }}{% endcall %}
+          {% elseif exampleComponent == "dropdown" %}
+          {% call componentDropdown(example.data) %}{{ example.data.caller | safe }}{% endcall %}
+          {% elseif exampleComponent == "error-message" %}
+          {{ componentErrorMessage(example.data) }}
+          {% elseif exampleComponent == "error-summary" %}
+          {{ componentErrorSummary(example.data) }}
+          {% elseif exampleComponent == "fieldset" %}
+          {% call componentFieldset(example.data) %}{{ example.data.caller | safe }}{% endcall %}
+          {% elseif exampleComponent == "file-upload" %}
+          {{ componentFileUpload(example.data) }}
+          {% elseif exampleComponent == "footer" %}
+          {{ componentFooter(example.data) }}
+          {% elseif exampleComponent == "header" %}
+          {% call componentHeader(example.data) %}{{ example.data.caller | safe }}{% endcall %}
+          {% elseif exampleComponent == "header-mini" %}
+          {{ componentHeaderMini(example.data) }}
+          {% elseif exampleComponent == "header-advanced" %}
+          {% call componentHeaderAdvanced(example.data) %}{{ example.data.caller | safe }}{% endcall %}
+          {% elseif exampleComponent == "hint" %}
+          {{ componentHint(example.data) }}
+          {% elseif exampleComponent == "input" %}
+          {{ componentInput(example.data) }}
+          {% elseif exampleComponent == "input-group" %}
+          {{ componentInputGroup(example.data) }}
+          {% elseif exampleComponent == "item" %}
+          {% call componentItem(example.data) %}{{ example.data.caller | safe }}{% endcall %}
+          {% elseif exampleComponent == "label" %}
+          {{ componentLabel(example.data) }}
+          {% elseif exampleComponent == "links-list" %}
+          {{ componentLinksList(example.data) }}
+          {% elseif exampleComponent == "listbox" %}
+          {% call componentListbox(example.data) %}{{ example.data.caller | safe }}{% endcall %}
+          {% elseif exampleComponent == "media-object" %}
+          {% call componentMediaObject(example.data) %}{{ example.data.caller | safe }}{% endcall %}
+          {% elseif exampleComponent == "menu-horizontal" %}
+          {{ componentMenuHorizontal(example.data) }}
+          {% elseif exampleComponent == "menu-navigation" %}
+          {{ componentMenuNavigation(example.data) }}
+          {% elseif exampleComponent == "menu-vertical" %}
+          {{ componentMenuVertical(example.data) }}
+          {% elseif exampleComponent == "menubar" %}
+          {{ componentMenubar(example.data) }}
+          {% elseif exampleComponent == "modal" %}
+          {% call componentModal(example.data) %}{{ example.data.caller | safe }}{% endcall %}
+          {% elseif exampleComponent == "nav" %}
+          {{ componentNav(example.data) }}
+          {% elseif exampleComponent == "pagination" %}
+          {{ componentPagination(example.data) }}
+          {% elseif exampleComponent == "pill" %}
+          {{ componentPill(example.data) }}
+          {% elseif exampleComponent == "notification" %}
+          {{ componentNotification(example.data) }}
+          {% elseif exampleComponent == "radios" %}
+          {{ componentRadios(example.data) }}
+          {% elseif exampleComponent == "searchbar" %}
+          {{ componentSearchbar(example.data) }}
+          {% elseif exampleComponent == "select" %}
+          {{ componentSelect(example.data) }}
+          {% elseif exampleComponent == "spinner" %}
+          {{ componentSpinner(example.data) }}
+          {% elseif exampleComponent == "status" %}
+          {{ componentStatus(example.data) }}
+          {% elseif exampleComponent == "status-item" %}
+          {% call componentStatusItem(example.data) %}{{ example.data.caller | safe }}{% endcall %}
+          {% elseif exampleComponent == "skip-link" %}
+          {{ componentSkipLink(example.data) }}
+          {% elseif exampleComponent == "table" %}
+          {{ componentTable(example.data) }}
+          {% elseif exampleComponent == "table-advanced" %}
+          {{ componentTableAdvanced(example.data) }}
+          {% elseif exampleComponent == "tabs" %}
+          {{ componentTabs(example.data) }}
+          {% elseif exampleComponent == "textarea" %}
+          {{ componentTextarea(example.data) }}
+          {% elseif exampleComponent == "toggle" %}
+          {{ componentToggle(example.data) }}
+          {% elseif exampleComponent == "tooltip" %}
+          {{ componentTooltip(example.data) }}
+          {% elseif exampleComponent == "tree" %}
+          {{ componentTree(example.data) }}
+
+          {% endif %}
+        </div>
+      </div>
+      <div class="pt-base lg:pt-lg mb-base">
+          {% set htmlContent %}
+            {{ componentButton({
+              "html": 'Copiar código<span class="sr-only"> HTML</span>',
+              "classes": "c-button--sm c-button--transparent mb-sm",
+              "attributes": {
+                "data-module": "c-button-copy"
+              }
+            }) }}
+            <pre class="hljs" aria-hidden="true"><code class="language-html hljs text-sm">
+                {{- getHTMLCodeFromExample(exampleComponent, example.data, 'component') | highlight("html") | safe -}}
+              </code>
+            </pre>
+          {% endset %}
+          {% set nunjucksContent %}
+            {% if example.data.caller %}
+              {% from "_macro.render-caller.njk" import renderCaller %}
+              {% set callerHtml %}{{ renderCaller(example.data.caller) }}{% endset %}
+              {% set callerNunjucks %}
+                {% raw %}{%{% endraw %} from "components/{{ exampleComponent }}/_macro.{{ exampleComponent }}.njk" import component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }}{% raw %} %}{% endraw %}
+              {% raw %}{% {% endraw %}call component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }} {% endset %}
+              {{ componentButton({
+                "html": 'Copiar código<span class="sr-only"> Nunjucks</span>',
+                "classes": "c-button--sm c-button--transparent mb-sm",
+                "attributes": {
+                  "data-module": "c-button-copy"
+                }
+              }) }}
+              <pre><code class="language-js hljs text-sm">
+{{ callerNunjucks | highlight("js") | safe }}({{ example.data | filtercaller | dump(2) | highlight("js") | safe }}){% raw %} %}{% endraw %}
+{{ callerHtml | highlight("html") | safe }}
+{% raw %}{%{% endraw %} endcall {% raw %} %}{% endraw %}</code></pre>
+              {% else %}
+                {{ componentButton({
+                  "html": 'Copiar código<span class="sr-only"> Nunjucks</span>',
+                  "classes": "c-button--sm c-button--transparent mb-sm",
+                  "attributes": {
+                    "data-module": "c-button-copy"
+                  }
+                }) }}
+                <pre class="hljs"><code class="language-js hljs text-sm">{{- getNunjucksCodeFromExample(exampleComponent, example.data, 'component') | highlight("twig") | safe -}}</code></pre>
+              {% endif %}
+          {% endset %}
+        {% call componentDetails({
+          "summary": {
+            "html": 'Mostrar código<span class="sr-only">del ejemplo: ' + example.name | capitalize + '</span>',
+            "classes": "c-link text-sm"
+          }
+        })  %}
+            {{ componentTabs({
+              "headingLevel": 4,
+              "tablistAriaLabel": "Ejemplos de código de: " + example.name | capitalize,
+              "idPrefix": "tab-" + loop.index,
+              "classes": "c-tabs--scroll",
+              "items": [
+                {
+                  "text": "Nunjucks macro",
+                  "panel": {
+                    "html": nunjucksContent | trim
+                  }
+                },
+                {
+                  "text": "HTML",
+                  "panel": {
+                    "html": htmlContent | trim
+                  }
+                }
+              ]
+            })  }}
+        {% endcall %}
+      </div>
+    </article>
+  {% endfor %}
+{% endmacro %}