Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
The TreeItem component allows users to collapse and expand list items, this is specifically designed to be used as menu navtree. This component is designed to be nested within itself, for now there are supported three layers small/medium/large. In comparison to Accordion and ArrowToggle this one is different visually and in behaviour. TreeItem component has different styling on each level of nesting, and has few optional variants to fit in for StepNav needs.
The TreeItem component consists of a title, subTitle, heading, numbering, arrow icon and tick icon.
If the item has some content within it, it can be expanded by clicking on the title and arrow icon, also it will indicate interactivity by hovering the mouse over it.
After interacting with the item the arrow orientation should indicate the current state (expanded or collapsed). The expand/collapse interaction is animated for better user experience.
Every item can be button for expanding/collapsing the content, or if the href is passed it will behave as a link.
Items also have locked and completed variants.
| Name | Description | Default |
|---|---|---|
| isOpen | boolean | - |
| title* | string | - |
| heading | string | - |
| isLocked | boolean | false |
| isWeekLocked | boolean | false |
| isActive | boolean | false |
| isComplete | boolean | false |
| href | string | - |
| size | string | "medium" |
| subTitle | string | - |
| numbering | string | - |
| isTopLevel | boolean | - |
| tracking | ((event: MouseEvent<HTMLAnchorElement | HTMLButtonElement, MouseEvent>, isOpen?: boolean) => void) | - |
| isWeeklyAccessLimitingApplicable | boolean | - |
| weekUnlocksAt | string | - |