@ons/design-system 72.5.0 → 72.6.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'
+        }
+    })
+-}}