Table of Contents

[ASM995]

Summary

Page contents navigation consisting of anchor links to main page headings.

💰 User value

Describe why this is important and how it will help users (either developers, designers or the end-users). Think about how it makes people's lives easier, more accessible or quicker to build stuff.

📚 User Stories

If relevant, describe the high-level functionality as user stories.

As an ICDS user: I need a way to navigate a page with a lot of content from anywhere on the page So that I can access the information I need from different areas of the page

📝 Acceptance Criteria

If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.

Variants Given that a table of contents exists on a page When the table of contents has default settings Then only heading levels H2 and H3 are displayed.

Given that a table of contents exists on a page When the page contains lots of heading levels Then only heading levels up to H5 can be displayed within the table of contents.

Given that a table of contents exists on a page When the background is dark Then use the light appearance of the table of contents.

Given that a table of contents exists on a page When the background is light Then use the dark appearance of the table of contents

Given that a table of contents exists on a page When the large size is selected Then the large table of contents should appear.

Given that a table of contents exists on a page When the default size is selected Then the default table of contents should appear.

Given that a table of contents exists on a page When a list item is focussed on Then display the focus state for that list item.

Given that a table of contents exists on a page When a list item is disabled Then display the disabled state for that list item.

Properties These are suggestions for props in the component:

Size: Options = Default, Large. Default = Default. Appearance: Options = Dark, Light. Default = Dark. Selection State: Options = Selected, Unselected. Default = Unselected. State: Options = Default, Hover, Pressed, Disabled, Focussed. Default = Default. Position: Options = Top, Side. Default = Side. selectScrollPosition: Options = Can be set by the dev, 50%. Default = 50% of viewport selectClickPosition: Options = Can be set by the dev, 75%. Default = 75% of viewport Interaction behaviour Given that a table of contents exists on a page When an unselected list item is focussed on (using Tab) Then the focus view should appear.

Given that a table of contents exists on a page When a selected list item is focussed on (using Tab) Then the focus view should appear.

Scrollability Given that a table of contents exists on a page When the table of contents is longer than the viewport Then the table of contents should become independently scrollable.

Given that a table of contents exists on a page and you are scrolling down the page When a heading goes above 50% of the viewport Then this heading shows as selected in the anchor nav

Given that a table of contents exists on a page and you are scrolling down the page When a heading goes above the selectScrollPosition value set Then this heading shows as selected in the anchor nav

Given that a table of contents exists on a page and you are scrolling up the page When a heading goes below 50% of the viewport Then show the heading above as selected in the anchor nav

Given that a table of contents exists on a page and you are scrolling up the page When a heading goes below the selectScrollPosition value set Then this heading shows as selected in the anchor nav

Given that a table of contents exists on a page When a person has scrolled to the bottom of the page and more than one heading is visible in the viewport Then display the top-most heading viewed in the viewport

Clickability Given that a table of contents exists on a page When a heading is selected in the table of contents Then this heading shows as selected and scrolled to

Given that a heading is clicked (selected) this takes precedence on selection When the page is scrolled Then normal scroll behaviours resume

Given that a heading is clicked (selected) When the page is scrolled Then the heading scrolls to 75% of the viewport as default (can be changed by user)

Given that a table of contents exists on a page When a person has selected the bottom link in the anchor nav Then display the selected heading as selected even if there are more than one heading visible in the viewport when content has been scrolled to.

Sizing Table of contents size defaults: Default side positioning: o Min width: 128px o Max width: 320px o Height with 8 list items: 248px Default top positioning: o Min width: 160px o Max width: 800px o Height with 8 list items: 248px Large side positioning: o Min width: 128px o Max width: 320px o Height with 8 list items: 296px Large top positioning: o Min width: 160px o Max width: 800px o Height with 8 list items: 296px

Positioning Given that a table of contents exists on a page When the table of contents is positioned to the side of the page Then the table of contents is sticky on the page content when scrolling

Given that a table of contents exists on a page When the table of contents is positioned to the top of the page Then the table of contents scrolls with the page content.

Responsive behaviour Given that the screen size is large When a table of contents is required (wanted) on the page Then display the side position table of contents.

Given that the screen size is reduced When a table of contents is required (wanted) on the page Then display the top position table of contents.

With the breakpoint – this will be decided by the user of the component – guidance will be given when this is suitable to change.

Motion Between Default, Hover and Pressed states, the table of contents should smart animate at 100ms between states across all list items.

Between selected and unselected list items, the table of contents should smart animate at 300ms between them across all list items.

Accessibility Keyboard input: Tab = Move to next focusable element Shift + Tab = Move to previous focusable element Space / Enter = trigger action (select focussed list item and scroll to section on page)

Focus behaviour: Each list item is a focusable element which can be navigated between using the tab key. Space key and enter key should be the trigger for selecting the focussed list item and a trigger for scrolling to that content on the page.

✏ Designs

## 🧾 Guidance If there's written guidance or documentation, include it here.