docs(components): tab UI

[lucivpav]

This PR changes the way component pages are rendered. The long page is no longer present, instead it is organized into the following categories: Definition, Usage, Props, Accessibility.

TODO:
tabBehavior, tabListBehavior => to make it accessible ✅
Usage.TryIt is broken ✅
fix links to sections ✅
when loading the component docs for the first time, the definition tab is empty ✅
fix highlight left sidebar item ✅

[codecov]

Codecov Report

Merging #1784 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #1784   +/-   ##
=======================================
  Coverage   69.56%   69.56%           
=======================================
  Files         875      875           
  Lines        7596     7596           
  Branches     2219     2246   +27     
=======================================
  Hits         5284     5284           
  Misses       2304     2304           
  Partials        8        8

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 881d670...f6c1e8c. Read the comment docs.

[levithomason]

Props and Accessibility tabs look good 👍 The Definition and Usage tabs need a little more organization.

The "Definition" of the component includes the default example and an example for each prop. You can think of the definition as showing one and only one example for each thing the component is capable of.

Example, imagine the Button component which has props like primary, disabled and loading. Each prop is a part of the definition of the component, defining the boundaries of the component's features. The definition tab then would show one example for each prop.

Examples that are not showing a single prop, like those in https://stardust-react-bre8h5b64.now.sh/components/button/usage#usage, show ways of using the component that are beyond showing the definition of the component.

One other way to look at it is that the Definition tab should tell you, "Here's the component, its definition, and each thing it can do", while, the usage tab should tell you, "Here are some real world use cases you might need to know how to implement".

A good start would be moving all of the examples in the Usage section:

...to the Usage tab and leaving the examples under Types/States/Variations/Slots/etc under the Definition tab.

[lucivpav]

@levithomason I have moved the Usage examples under Usage tab, while keeping the rest under Definition tab.

[levithomason]

This looks like a good start that we can iterate on 👍 well done!