desy-html 10.1.0 → 10.2.0

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

@@ -1,3 +1,5 @@
+{% set headArray = [] %}
+
 {#- Capture the HTML so we can optionally nest it in a wrapper -#}
 {% set innerHtml %}
 <table class="c-table
@@ -6,9 +8,10 @@
   <caption {%- if params.captionClasses %} class="{{ params.captionClasses }}"{% endif %}>{{ params.caption }}</caption>
   {% endif %}
   {% if params.head %}
-  <thead>
+  <thead class="sr-only lg:not-sr-only">
     <tr class="border-t border-b border-neutral-base">
     {% for item in params.head %}
+      {% set headArray = (headArray.push(item.html |safe | striptags if item.html else item.text), headArray) %}
       <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark {%- if item.classes %} {{ item.classes }}{% endif %}"
       {%- if item.colspan %} colspan="{{ item.colspan }}"{% endif %}
       {%- if item.rowspan %} rowspan="{{ item.rowspan }}"{% endif %}{% for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ item.html |safe if item.html else item.text }}</th>
@@ -19,18 +22,19 @@
   <tbody>
     {% for row in params.rows %}
       {% if row %}
-    <tr class="border-t border-b border-neutral-base">
+    <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
         {% for cell in row %}
           {% set commonAttributes %}
+            data-label="{{ headArray[loop.index0] }}"
             {%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
             {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}{% for attribute, value in cell.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
           {% endset %}
           {% if loop.first and params.firstCellIsHeader %}
-      <th scope="row" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark{%- if cell.classes %} {{ cell.classes }}{% endif %}"
+      <th scope="row" class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark{%- if cell.classes %} {{ cell.classes }}{% endif %}"
             {{- commonAttributes | safe -}}
           >{{ cell.html | safe if cell.html else cell.text }}</th>
           {% else %}
-      <td class="px-base py-sm {%- if cell.classes %} {{ cell.classes }}{% endif %}"
+      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm {%- if cell.classes %} {{ cell.classes }}{% endif %}"
             {{- commonAttributes | safe -}}
           >{{ cell.html | safe if cell.html else cell.text }}</td>
           {% endif %}
@@ -43,9 +47,9 @@
   <tfoot>
     <tr class="border-t-2 border-b border-neutral-base">
     {% for item in params.foot %}
-      <td scope="col" class="px-base py-sm {%- if item.classes %} {{ item.classes }}{% endif %}"
+      <td scope="col" class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm {%- if item.classes %} {{ item.classes }}{% endif %}"
       {%- if item.colspan %} colspan="{{ item.colspan }}"{% endif %}
-      {%- if item.rowspan %} rowspan="{{ item.rowspan }}"{% endif %}{% for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ item.html |safe if item.html else item.text }}</td>
+      {%- if item.rowspan %} rowspan="{{ item.rowspan }}"{% endif %}{% for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-label="{{ headArray[loop.index0] }}">{{ item.html |safe if item.html else item.text }}</td>
     {% endfor %}
     </tr>
   </tfoot>