MI6-255
commented
2 months ago To include:
- routing e.g. supporting GatsbyLink or ReactRouter
- supports onClick out of the box, so could still be flexible
- change to a button (not ic-button) semantically like we do with other components (to support use with onClick)
Can leave out in this issue, when doing implementation:
- search
- action buttons
Keep this initial implementation as simple as possible
Summary
Navigation component for moving within complex hierarchical data structures.
💰 User value
Allows users to display and interact with complex hierarchal data structures within their applications, can also be used for site/file traversal.
📚 User Stories
If relevant, describe the high-level functionality as user stories.
As an ICDS user: I want to display hierarchal data within my application, I need a component which can display nested data without having to manually nest components, like accordion, So that my data can be imported and interacted with safely and consistently.
As an ICDS user: I want clear interaction with the website I need to view a focus indicator for any element that can be interacted with, So that I know where my keyboard actions will target.
As an ICDS user: I want my application to be accessible to all I need to be able to navigate through the nodes in tree view using a keyboard And to be able to navigate with the help of voice over technology So that I have equal access to its content.
📝 Acceptance Criteria
Title bar When a heading prop is supplied to the tree view group Then a title bar should be rendered at the top of the tree view group And text should include the given heading And a grey 1px high divider will render between the title bar and the tree view items
Data When I pass an svg with an icon slot to the tree view item Then the tree view item should be rendered with the given icon on the left hand side
When I slot tree view items within a tree view item Then the parent tree view item should be rendered with a toggle icon on the left hand side And nested tree view items will be rendered, indented 16px from the parent
Given I have hierarchal data When I import this into nested tree view items Then the child tree view items should have incremental padding
Given the tree view item supports GatsbyLink or ReactRouter When I supply the tree view item with a href prop Then the item will act as a link
Interactions Given a tree view item with nested tree view items is rendered When I click on the active area Then the children items should be rendered beneath it And the drop down icon should flip horizontally
When the tree view item is clicked Then various onClick events will be available to the user
Sizing When no size prop has been specified Then the default component size is used
When the default component size is used Then the tree view items should have a height of 40px
When the size large prop is given Then the tree view items should have a height of 48px
When the size small prop is given Then the tree view items should have a height of 32px
When the tree view component is placed within a div tag Then the tree view component will flex to the size of the container
Focus and Accessibility Given I have a populated tree view component When I hover on a tree view item Then the hover state is rendered
Given I have a populated tree view component When I click on a tree view item Then the pressed state is rendered
Given I have a populated tree view component When I have clicked on a tree view item Then the focus state is rendered
Given I have a populated tree view component with a tree view item in focus When I click away from that tree view item Then the selected state is rendered
Given I have a populated tree view component with a selected tree view item When I click on another the tree view item Then the selected state is removed
When I have a disabled tree view item Then the disabled state is rendered
When the user is operating on a keyboard Then the tree view should be appropriately focused
When the user is operating using a voice over technology Then the tree view should be appropriately spoken, including nested levels
✏ Designs
https://www.figma.com/file/R1ld4Jkd1RDe5Iptvox9Ik/Tree-view---Component-Contribution?type=design&node-id=11-273&mode=design&t=u3Q8sQZzo5qZGVjh-0