Skip to content

Commit

Permalink
Replace table with va-table web component (#1817)
Browse files Browse the repository at this point in the history 
* Replace table with va-table in code-coverage-format-report.js and table.drupal.liquid files

* update table template

* use table element for code coverage report

* add return to end of file

---------

Co-authored-by: Micah Chiang <[email protected]>
Co-authored-by: Jami Gibbs <[email protected]>
  • Loading branch information
@nickjg231 @micahchiang @jamigibbs
3 people authored Dec 18, 2023
1 parent 32a2248 commit 2f78534
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 44 deletions.
2 changes: 1 addition & 1 deletion script/github-actions/code-coverage-format-report.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ codeCoverageData.forEach((data, index) => {
// create table header
codeCoverageHTML += `<th> ${data} </th> \n`;
} else if (index === 5) {
// seperate table header from data
// separate table header from data
codeCoverageHTML += `<th> ${data} </th> \n </tr> \n </thead> \n <tbody> \n`;
} else if ((index - 1) % 5 === 0) {
// start of row in table body
Expand Down
66 changes: 23 additions & 43 deletions src/site/paragraphs/table.drupal.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,47 +26,27 @@
}
}
{% endcomment %}

<table data-template="paragraphs/table" data-entity-id="{{ entity.entityId }}" class="va-table va-table--responsive" role="table">
{% if entity.fieldTable.caption %}
<caption>{{ entity.fieldTable.caption }}</caption>
<va-table data-template="paragraphs/table" data-entity-id="{{ entity.entityId }}" role="table">
{% assign colLabels = entity.fieldTable.value.0 %}
{% for value in entity.fieldTable.value %}
{% if forloop.first == true %}
<va-table-row slot="headers" key="header">
{% for column in value %}
{% if column == "" or column == nil %}
<span role="columnheader"> </span>
{% else %}
<span role="columnheader" scope="col">{{ column }}</span>
{% endif %}
{% endfor %}
</va-table-row>
{% else %}
<va-table-row>
{% for column in value %}
<span>
{{ column }}
</span>
{% endfor %}
</va-table-row>
{% endif %}
{% assign colLabels = entity.fieldTable.value.0 %}
{% for value in entity.fieldTable.value %}
{% if forloop.first == true %}
<thead>
<tr role="row">
{% for column in value %}
<th role="columnheader" scope="col">{{ column }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% else %}
<tr class="vads-u-padding-top--5" role="row">
{% for column in value %}
{% if forloop.first == true %}
<th
class="vads-u-padding-bottom--0 column-label vads-u-font-weight--bold medium-screen:vads-u-display--none" role="rowheader" scope="row"
>
<dfn> {{colLabels | getValueFromObjPath: forloop.index0}} </dfn>
</th>
<th class="column-value table-row-header-responsive" role="rowheader" scope="row">
<dfn class="vads-u-display--block"> {{ column }} </dfn>
</th>
{% else %}
<td class="vads-u-padding-bottom--0 column-label vads-u-font-weight--bold medium-screen:vads-u-display--none" role="cell">
<dfn> {{colLabels | getValueFromObjPath: forloop.index0}} </dfn>
</td>
<td class="column-value" role="cell">
<dfn class="vads-u-display--block"> {{ column }} </dfn>
</td>
{% endif %}
{% endfor %}
</tr>
{% endif %}
{% if forloop.last %}
</tbody>
{% endif %}
{% endfor %}
</table>
{% endfor %}
</va-table>

0 comments on commit 2f78534

Please sign in to comment.