The three statuses above and their possible values:

For more information see the https://openedx.atlassian.net/wiki/spaces/BPL/pages/1773502564/Component+Contribution+Process#Step-1-%E2%80%93-Start-a-component-proposal.

A brief one or two sentence description of this component, its purpose, and common use cases.

Contributors	Hilary Gordon (Deactivated) Eugene Kang Adam Butterworth (Deactivated)
Slack channel	If one exists, paste a link to the working Slack channel...
Paragon Jira ticket	https://openedx.atlassian.net/browse/PAR-107 https://openedx.atlassian.net/browse/PAR-160 https://openedx.atlassian.net/browse/PAR-153 https://openedx.atlassian.net/browse/PAR-288
Other Jira tickets	Insert links to related work...
Design resources	https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7542%3A24810
Technical docs	https://paragon-edx.netlify.app/components/tabs

Design

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7542%3A24810

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7542%3A24894

Use cases

Switching between Login and Registration

Design System Documentation > Tabs > image-20210205-145516.png

Discussion tabs: Switching between key actions within Discussions

Design System Documentation > Tabs > Discussion tabs.png

Non-use cases

Not a use case - for discussion to review as a distinct nav pattern: Course Dashboard tabs: Switching between Courses, Programs and Discover New

Design System Documentation > Tabs > Screen Shot 2020-11-06 at 11.48.45 AM.png

Not a use case - for discussion to review as a distinct nav pattern: In-course tabs: Navigating between Course Home, Dates, and any other tab

Design System Documentation > Tabs > Course tabs.png

Best Practices

Mobile

We should consider the mobile experience for the tabs component. If there are only 2 tabs, we shouldn’t collapse the tab options on small screen sizes.

If there are more than 2 tabs, we should consider consolidating into either an accordion menu, dropdown menu, horizontal scrolling (least preferred).

Nesting

We should have some perspective on nesting a tab component. In the Discussion example above, the Course tabs themselves would be a tab component, but so would “My Posts” “All posts” and “Topics”. Do we need to consider 2 styles for tabs for when they are nested to indicate priority?

Specification

What does an engineer need to know in order to build this component?

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7542%3A24822

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7542%3A24840

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7542%3A24858

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7542%3A24876

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7548%3A20798

Behaviors

Click on a TabButton	Show the related content in a TabPane below the Tab Navigation

Accessibility

Add rows to the table outlining focus management, semantic markup, or other a11y related specifications...

Notes

Notes from collaborator conversations or meetings regarding this component.