Tree View Component #1

[orion-cengage]

Original discussion for this topic: https://github.com/cengage/react-magma/discussions/23

Prototype: https://cengage.invisionapp.com/share/BD11X8UYYE4A Inspect: https://cengage.invisionapp.com/d/main#/projects/prototypes/21737863

Inspiration:

Material UI (MUI): https://material-ui.com/components/tree-view/ Base Web: https://baseweb.design/components/tree-view/

Requirements

• Component can support unlimited number of parents and children
• Each item must have a text label -- Text label can wrap if there isn't enough room
• Each item can display an optional icon to the left of the label
• Parent items can be expanded and collapsed -- You can expand or collapse the parent by clicking/tapping on the arrow button -- Option to have any parent expanded by default -- Option to show every level expanded with no collapsing -- Each item will get the appropriate amount of padding/margin on the left to ensure each level is properly aligned --- Some scenarios might get more complex when certain items don't have an arrow or icon like their peers ----
• We need the ability to "turn on" a selectable mode. This adds a checkbox to each list item, including parent checkboxes that will select all children and possibly exist in an indeterminate state. -- Clicking/tapping on the checkbox selects the item.

Note: The reason clicking on the text label doesn't open/close or select/deselect the item, is because that space may be used for other functions in the future. This could include:

• The parent item itself may have content to show
• dragging and dropping
• editing the label
• other items in that area like buttons or tags