Merge pull request #2690 from ONSdigital/enhancement/2195/optional-wi…

…dth-table-column-param Added optional column width percentage
ONSdigital · Jun 26, 2023 · 9887e2a · 9887e2a
2 parents e7a0765 + 56503de
commit 9887e2a
Show file tree

Hide file tree

Showing 20 changed files with 38 additions and 54 deletions.
diff --git a/...t__components_image_example-images-for-regular-screens_0_document_0_desktop.png b/...t__components_image_example-images-for-regular-screens_0_document_0_desktop.png
diff --git a/...st__components_image_example-images-for-regular-screens_0_document_1_tablet.png b/...st__components_image_example-images-for-regular-screens_0_document_1_tablet.png
diff --git a/...st__components_image_example-images-for-regular-screens_0_document_2_mobile.png b/...st__components_image_example-images-for-regular-screens_0_document_2_mobile.png
diff --git a/...st__components_image_example-images-for-retina-screens_0_document_0_desktop.png b/...st__components_image_example-images-for-retina-screens_0_document_0_desktop.png
diff --git a/...est__components_image_example-images-for-retina-screens_0_document_1_tablet.png b/...est__components_image_example-images-for-retina-screens_0_document_1_tablet.png
diff --git a/...est__components_image_example-images-for-retina-screens_0_document_2_mobile.png b/...est__components_image_example-images-for-retina-screens_0_document_2_mobile.png
diff --git a/...__components_images_example-images-for-regular-screens_0_document_0_desktop.png b/...__components_images_example-images-for-regular-screens_0_document_0_desktop.png
diff --git a/...t__components_images_example-images-for-regular-screens_0_document_1_tablet.png b/...t__components_images_example-images-for-regular-screens_0_document_1_tablet.png
diff --git a/...t__components_images_example-images-for-regular-screens_0_document_2_mobile.png b/...t__components_images_example-images-for-regular-screens_0_document_2_mobile.png
diff --git a/...t__components_images_example-images-for-retina-screens_0_document_0_desktop.png b/...t__components_images_example-images-for-retina-screens_0_document_0_desktop.png
diff --git a/...st__components_images_example-images-for-retina-screens_0_document_1_tablet.png b/...st__components_images_example-images-for-retina-screens_0_document_1_tablet.png
diff --git a/...st__components_images_example-images-for-retina-screens_0_document_2_mobile.png b/...st__components_images_example-images-for-retina-screens_0_document_2_mobile.png
diff --git a/...nce/ds-vr-test__components_table_example-table-numeric_0_document_0_desktop.png b/...nce/ds-vr-test__components_table_example-table-numeric_0_document_0_desktop.png
diff --git a/...ence/ds-vr-test__components_table_example-table-numeric_0_document_1_tablet.png b/...ence/ds-vr-test__components_table_example-table-numeric_0_document_1_tablet.png
diff --git a/...ence/ds-vr-test__components_table_example-table-numeric_0_document_2_mobile.png b/...ence/ds-vr-test__components_table_example-table-numeric_0_document_2_mobile.png
diff --git a/...e/ds-vr-test__foundations_page-template_example-custom_0_document_0_desktop.png b/...e/ds-vr-test__foundations_page-template_example-custom_0_document_0_desktop.png
diff --git a/src/components/table/_macro-options.md b/src/components/table/_macro-options.md
@@ -15,12 +15,13 @@
 
 ## th
 
-| Name      | Type    | Required | Description                                                                                                                                                  |
-| --------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| thClasses | string  | false    | Classes to add to the `th` element                                                                                                                           |
-| ariaSort  | string  | false    | Set to “ascending” or “descending” to set the default order of a table column when the page loads when setting `variants` to “sortable”. Defaults to “none”. |
-| value     | string  | true     | The content for the `th` cell                                                                                                                                |
-| numeric   | boolean | false    | Set to “true” if all the cells in the column contain numbers. This aligns the content to the right so numbers can easily be compared.                        |
+| Name            | Type    | Required | Description                                                                                                                                                  |
+| --------------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| thClasses       | string  | false    | Classes to add to the `th` element                                                                                                                           |
+| ariaSort        | string  | false    | Set to “ascending” or “descending” to set the default order of a table column when the page loads when setting `variants` to “sortable”. Defaults to “none”. |
+| value           | string  | true     | The content for the `th` cell                                                                                                                                |
+| numeric         | boolean | false    | Set to “true” if all the cells in the column contain numbers. This aligns the content to the right so numbers can easily be compared.                        |
+| widthPercentage | integer | false    | Sets the `width` attribute for the `th` element                                                                                                              |
 
 ## tr
 

diff --git a/src/components/table/_macro.njk b/src/components/table/_macro.njk
@@ -15,7 +15,7 @@
                 <thead class="ons-table__head">
                     <tr class="ons-table__row">
                         {% for th in params.ths %}
-                        <th scope="col" class="ons-table__header{{ ' ' + th.thClasses if th.thClasses }}{{ " ons-table__header--numeric" if th.numeric }}"{% if 'sortable' in variants %} aria-sort="{{- th.ariaSort | default('none') -}}"{% endif %}>
+                        <th scope="col" class="ons-table__header{{ ' ' + th.thClasses if th.thClasses }}{{ " ons-table__header--numeric" if th.numeric }}"{% if 'sortable' in variants %} aria-sort="{{- th.ariaSort | default('none') -}}"{% endif %}{% if th.widthPercentage %} width="{{ th.widthPercentage }}%"{% endif %}>
                             <span class="ons-table__header-text">{{- th.value -}}</span>
                             {% if 'sortable' in variants %}
                                 {{

diff --git a/src/components/table/_macro.spec.js b/src/components/table/_macro.spec.js
@@ -80,6 +80,22 @@ describe('macro: table', () => {
       expect($('.ons-table__header').hasClass('another-extra-column-class')).toBe(true);
     });
 
+    it('adds additional width attribute to column header', () => {
+      const $ = cheerio.load(
+        renderComponent('table', {
+          ...EXAMPLE_TABLE,
+          ths: [
+            {
+              value: 'Column 1',
+              widthPercentage: 50,
+            },
+          ],
+        }),
+      );
+
+      expect($('.ons-table__header').attr('width')).toBe('50%');
+    });
+
     it('does not add "numeric" modifier class to column header when `td.numeric` is not provided', () => {
       const $ = cheerio.load(renderComponent('table', EXAMPLE_TABLE));
 

diff --git a/src/components/table/example-table-numeric.njk b/src/components/table/example-table-numeric.njk
@@ -4,15 +4,18 @@
         "caption": "A basic table with numeric values",
         "ths": [
             {
-                "value": "Country"
+                "value": "Country",
+                "widthPercentage": 50
             },
             {
                 "value": "Population mid-2020",
-                "numeric": true
+                "numeric": true,
+                "widthPercentage": 25
             },
             {
                 "value": "% change 2019 to 2020",
-                "numeric": true
+                "numeric": true,
+                "widthPercentage": 25
             }
         ],
         "trs": [