Initial implementation of Tab and TabSet components

[lmorchard]

Fixes #2

[lmorchard]

GitHub Pages Deployment

Storybook: https://FirefoxUX.github.io/photon-components-web/commits/735176153be96dec80b0441fa2fdef92fa156854/ Build: https://FirefoxUX.github.io/photon-components-web/commits/735176153be96dec80b0441fa2fdef92fa156854/dist.zip

[lmorchard]

Still a work in progress, but I'm opening the PR to maybe get some feedback.

This is about 80% done, except for the parts related to "many tabs" and "long labels". I'm not sure when those aspects of the design come into play. Some kind of responsive layout that should apply on a certain max width? Do we have an example of this in action somewhere already, by chance?

/cc @aminalhazwani

[aminalhazwani]

Cool @lmorchard, thanks for reaching out!

Some minor things we noticed during a first review with @shorlander:

• we could remove the focus on pressed/active state, this happens on other components too, we opened #72
• as you said the label overflow is missing when the viewport is small. Could we assign a min-width to the tabs?
• regarding the tab scrolling it depends on the container. it could be triggered on a mobile-like size, we will investigate this more!
• we are going to do some explorations to better mark active tabs even when they are in focus. Eg move the tab selector higher to make it visible during focus.

[lmorchard]

Removing the "WIP" from the title - per the last status chat we had, I think we want to start getting these PRs merged earlier & more often and continue to iterate, rather than letting them just stay open.

[lmorchard]

GitHub Pages Deployment

Storybook: https://FirefoxUX.github.io/photon-components-web/commits/2e37aa250dc46f24ba7670adaf8fe9cd31228717/ Build: https://FirefoxUX.github.io/photon-components-web/commits/2e37aa250dc46f24ba7670adaf8fe9cd31228717/dist.zip