@ons/design-system 72.5.0 → 72.8.0

package/components/summary/_macro.spec.js

@@ -196,20 +196,10 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
             itemsList: [
                 {
                     title: 'row item 4',
-                    valueList: [
-                        {
-                            text: 'list item 4',
-                        },
-                    ],
                     actions: [
                         {
                             text: 'Change',
-                            visuallyHiddenText: 'change answer',
-                            url: '#0',
-                        },
-                        {
-                            text: 'Remove',
-                            visuallyHiddenText: 'remove list item',
+                            visuallyHiddenText: 'change list item',
                             url: '#0',
                         },
                     ],
@@ -221,13 +211,6 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
                             text: 'list item 5',
                         },
                     ],
-                    actions: [
-                        {
-                            text: 'Change',
-                            visuallyHiddenText: 'change list item',
-                            url: '#0',
-                        },
-                    ],
                 },
                 {
                     title: 'row item 6',
@@ -304,6 +287,21 @@ const EXAMPLE_SUMMARY_MULTIPLE_GROUPS = {
     ],
 };
 
+const EXAMPLE_SUMMARY_SINGLE_GROUP = {
+    summaries: [
+        {
+            title: 'summary title',
+            groups: [
+                {
+                    id: 'group-id-1',
+                    title: 'group title',
+                    ...EXAMPLE_SUMMARY_HOUSEHOLD_GROUP,
+                },
+            ],
+        },
+    ],
+};
+
 // To address a DAC issue, we've disabled specific axe definition list rules causing test failures.
 // While resolving it would require a significant refactor, the failures are deemed non-critical for accessibility,
 // leading to their removal in this context. [https://github.com/ONSdigital/design-system/issues/3027]
@@ -411,9 +409,9 @@ describe('macro: summary', () => {
             it('displays the row `title` text', () => {
                 const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
-                expect($('.ons-summary__items .ons-summary__item:nth-of-type(1) .ons-summary__item--text').text().trim()).toBe(
-                    'row title 1',
-                );
+                expect(
+                    $('.ons-summary__items .ons-summary__item:nth-of-type(1) .ons-summary__item--text:nth-of-type(1)').text().trim(),
+                ).toBe('row title 1');
             });
 
             it('has a custom icon `iconType`', () => {
@@ -473,6 +471,16 @@ describe('macro: summary', () => {
 
                 expect($('.ons-summary__items .ons-summary__item:nth-of-type(3) .ons-summary__values ul').length).toBe(1);
             });
+
+            it('adds the `ons-summary__column-size--2` class if no `valueList` is provided', () => {
+                const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_SINGLE_GROUP));
+
+                expect(
+                    $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions').hasClass(
+                        'ons-summary__column-size--2',
+                    ),
+                ).toBe(true);
+            });
         });
 
         describe('part: item action', () => {
@@ -514,6 +522,12 @@ describe('macro: summary', () => {
                 ).toBe('Action 2');
             });
 
+            it('has the correct `id` added to the actions', () => {
+                const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
+
+                expect($('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions').attr('id')).toBe('item-id-2');
+            });
+
             it('has the correct visually hidden <span> text', () => {
                 const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
@@ -543,6 +557,14 @@ describe('macro: summary', () => {
                     ),
                 ).toBe('def');
             });
+
+            it('adds the `ons-summary__column-size--2` class if no action is provided', () => {
+                const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_SINGLE_GROUP));
+
+                expect(
+                    $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__values').hasClass('ons-summary__column-size--2'),
+                ).toBe(true);
+            });
         });
     });
 

package/components/summary/_summary.scss

@@ -192,10 +192,14 @@ $hub-row-spacing: 1.3rem;
             text-align: right;
         }
 
-        &__values--2 {
+        &__column-size--2 {
             flex: 10.5 1 66%;
         }
 
+        &__actions ~ &__values.ons-summary__column-size--2 {
+            padding-right: 33%;
+        }
+
         &--hub & {
             &__item-title,
             &__values,

package/components/summary/example-summary-grouped.njk

@@ -284,11 +284,6 @@
                                 "itemsList": [
                                     {
                                         "title": "Food",
-                                        "valueList": [
-                                            {
-                                                "text": "£50.00"
-                                            }
-                                        ],
                                         "actions": [
                                             {
                                                 "text": "Change",
@@ -333,13 +328,6 @@
                                             {
                                                 "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
                                             }
-                                        ],
-                                        "actions": [
-                                            {
-                                                "text": "Change",
-                                                "visuallyHiddenText": "Change answer",
-                                                "url": "#0"
-                                            }
                                         ]
                                     }
                                 ]

package/components/table-of-contents/_macro.njk

@@ -1,6 +1,7 @@
 {% macro onsTableOfContents(params) %}
     {% from "components/list/_macro.njk" import onsList %}
     {% from "components/skip-to-content/_macro.njk" import onsSkipToContent %}
+    {% from "components/button/_macro.njk" import onsButton %}
 
     <aside class="ons-table-of-contents-container" role="complementary">
         {% if params.skipLink %}
@@ -41,5 +42,44 @@
                 }}
             {% endif %}
         </nav>
+
+        {% if params.relatedLinks %}
+            <nav
+                class="ons-table-of-contents__related-links ons-u-pb-s ons-u-pt-l ons-u-mt-s"
+                aria-label="{{ params.relatedLinks.ariaLabel | default('Related links') }}"
+            >
+                <h2 class="ons-table-of-contents__title ons-u-fs-r--b ons-u-mb-s">{{ params.relatedLinks.title }}</h2>
+
+                {{
+                    onsList({
+                        "variants": 'bare',
+                        "itemsList": params.relatedLinks.itemsList
+                    })
+                }}
+            </nav>
+        {% endif %}
+
+        {% if params.button %}
+            <div class="ons-table-of-contents__button ons-u-pt-l">
+                {% set allVariants = ['small', 'secondary'] %}
+
+                {% if params.button.variants %}
+                    {% if params.button.variants is string %}
+                        {% set allVariants = (allVariants.push(params.button.variants), allVariants) %}
+                    {% else %}
+                        {% for variant in params.button.variants %}
+                            {% set allVariants = (allVariants.push(variant), allVariants) %}
+                        {% endfor %}
+                    {% endif %}
+                {% endif %}
+
+                {{
+                    onsButton({
+                        "text": params.button.text | default('Save or print this page'),
+                        "variants": allVariants
+                    })
+                }}
+            </div>
+        {% endif %}
     </aside>
 {% endmacro %}

package/components/table-of-contents/_macro.spec.js

@@ -55,6 +55,33 @@ const EXAMPLE_TABLE_OF_CONTENTS_MULTIPLE = {
     ],
 };
 
+const EXAMPLE_TABLE_OF_CONTENTS_RELATED_LINKS_BUTTON = {
+    title: 'Contents',
+    itemsList: [
+        {
+            url: '#overview',
+            text: 'Overview',
+        },
+        {
+            url: '#who-should-take-part-and-why',
+            text: 'Who should take part and why',
+        },
+    ],
+    relatedLinks: {
+        title: 'Related publications',
+        itemsList: [
+            {
+                url: '#0',
+                text: 'Example publication title',
+            },
+        ],
+    },
+    button: {
+        text: 'Save or print this page',
+        variants: ['print'],
+    },
+};
+
 describe('macro: table-of-contents', () => {
     it('renders a default aria label', () => {
         const $ = cheerio.load(renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_SINGLE));
@@ -167,4 +194,49 @@ describe('macro: table-of-contents', () => {
             });
         });
     });
+
+    describe('related links and button', () => {
+        it('passes jest-axe checks with related links and button', async () => {
+            const $ = cheerio.load(renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_RELATED_LINKS_BUTTON));
+
+            const results = await axe($.html());
+            expect(results).toHaveNoViolations();
+        });
+
+        it('renders related links section with correct title', () => {
+            const $ = cheerio.load(renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_RELATED_LINKS_BUTTON));
+
+            expect($('.ons-table-of-contents__related-links h2').text().trim()).toBe('Related publications');
+        });
+
+        it('outputs `lists` component for related links with expected parameters', () => {
+            const faker = templateFaker();
+            const listsSpy = faker.spy('list');
+
+            faker.renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_RELATED_LINKS_BUTTON);
+
+            expect(listsSpy.occurrences[1]).toEqual({
+                variants: 'bare',
+                itemsList: EXAMPLE_TABLE_OF_CONTENTS_RELATED_LINKS_BUTTON.relatedLinks.itemsList,
+            });
+        });
+
+        it('renders button with correct text', () => {
+            const $ = cheerio.load(renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_RELATED_LINKS_BUTTON));
+
+            expect($('.ons-table-of-contents__button .ons-btn').text().trim()).toBe('Save or print this page');
+        });
+
+        it('outputs `button` component with expected parameters', () => {
+            const faker = templateFaker();
+            const buttonSpy = faker.spy('button');
+
+            faker.renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_RELATED_LINKS_BUTTON);
+
+            expect(buttonSpy.occurrences[0]).toEqual({
+                text: 'Save or print this page',
+                variants: ['small', 'secondary', 'print'],
+            });
+        });
+    });
 });

package/components/table-of-contents/_table-of-contents.scss

@@ -1,12 +1,23 @@
 .ons-table-of-contents {
+    $root: &;
+
     &-container {
         border-bottom: 1px solid var(--ons-color-grey-15);
         margin-bottom: 2rem;
         padding-bottom: 1rem;
+
+        &:has(:where(#{$root}__related-links, #{$root}__button)) {
+            border-bottom: 0;
+        }
     }
 
     &__link-active {
         color: var(--ons-color-text-link-hover);
         text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
     }
+
+    &__related-links,
+    &__button {
+        border-top: 4px solid var(--ons-color-ocean-blue);
+    }
 }

package/components/table-of-contents/example-table-of-contents-related-links-with-button.njk

@@ -0,0 +1,60 @@
+{% from "components/table-of-contents/_macro.njk" import onsTableOfContents %}
+
+{{-
+    onsTableOfContents({
+        "title": 'Contents',
+        "ariaLabel": 'Pages in this guide',
+        "skipLink": {
+            "url": "#0",
+            "text": 'Skip to guide content'
+        },
+        "lists": [
+            {
+                "itemsList": [
+                    {
+                        "url": '#0',
+                        "text": 'Overview',
+                        "current": true
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'Who should take part and why'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'How your information is used'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'The 2019 Census Rehearsal'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'Online census'
+                    }
+                ]
+            }
+        ],
+        "relatedLinks": {
+            "title": 'Related publications',
+            "itemsList": [
+                {
+                    "url": '#0',
+                    "text": 'Example publication title'
+                },
+                {
+                    "url": '#0',
+                    "text": 'Example publication title 2'
+                },
+                {
+                    "url": '#0',
+                    "text": 'Example publication title 3'
+                }
+            ]
+        },
+        "button": {
+            "text": 'Save or print this page',
+            "variants": 'print'
+        }
+    })
+-}}