Product Issue: A coach can select resources from available channels or their bookmarks

[nucleogenesis]

Overview

A side panel is the interface coaches will use to select the exercises their quiz sections will draw from. Here they may select items from channels available on their device or from their bookmarks.

Description and outcomes

The SidePanel component will be used to display a navigable interface of channels.

We will use breadcrumbs to aid in the routing/navigation within the side panel as the user navigates the channel and content tree.

If the coach has bookmarks, the top-most linked card should be to their bookmarks. When the user is viewing their bookmarks, they will have an option to return back to the full list of channels.

Regardless of whether the coach is viewing their bookmarks or the contents within a channel, each topic will be presented as a card with a thumbnail, title and description and when clicked will drill down to show that topic's contents and the breadcrumbs will update accordingly.

Each resource beneath the channels list will have a KCheckbox which will allow the coach to select that individual resource -- or, in the case of a topic -- select all resources within that topic folder.

At the bottom of this panel is a CONFIRM SELECTION OF N RESOURCES button which will save the user's selection to the section being edited and close the side panel.

Side panels may be closed using an X at the top -- if the user has changed their previous selection then they should be presented with a "Are you sure? You'll lose your selection..." confirmation prompt before closing the side panel.

Resources

Epic

Relevant Figmas

Accessibility requirements

This will largely be made up of components that ought to have already had their a11y concerns taken into consideration. That would include the checkboxed list of resource cards, breadcrumbs, and side panel altogether. We must look to the QA team for their keen eye and experience for finding and addressing areas where putting these components together may cause issues for keyboard navigability.

One other thing to consider is that the user may need to tab through dozens of resources to finally get to the point where they can save their selection - however, I've not yet found suitable guidance on how to address this or if it is necessarily an issue at all @radinamatic ?