Consistency: Organize variants across the website, storybook, and kits

[tay1orjones]

Components are organized in disparate ways across the website, storybook, the kit, and even the code packages themselves.

This issue is to unify the approach across the website, storybook and the kit, how components are organized and presented.

### Tasks
- [x] https://github.com/carbon-design-system/carbon/issues/12985
- [x] https://github.com/carbon-design-system/carbon/issues/13035
- [x] https://github.com/carbon-design-system/carbon/issues/13190
- [ ] https://github.com/carbon-design-system/carbon/issues/13189
- [ ] https://github.com/carbon-design-system/carbon/issues/13192

[aagonzales]

Anna's component audit

[francinelucca]

Storybook suggestions:

• Consider Grouping DefinitionTooltip under Tooltip as it is classified as a variant in the website docs

• UI Shell is currently a single story in storybook https://react.carbondesignsystem.com/?path=/story/components-ui-shell--fixed-side-nav but three separate components in website, should they be indexed as 3 separate or one with variants: ui shell header, UI shell left panel , UI shell right panel?

• On website we have List under one category, but in the yml we have them indexed individually: https://carbondesignsystem.com/components/list/usage/

• useTheme is a hook indexed on https://next.carbondesignsystem.com/libraries/carbon-react/latest/assets/use-theme, Theme is a component indexed on https://next.carbondesignsystem.com/libraries/carbon-react/latest/assets/theme, both of the stories are under components/theme in storybook: https://react.carbondesignsystem.com/?path=/docs/components-theme--default, https://react.carbondesignsystem.com/?path=/docs/components-theme--use-theme. Should those be separate?

• Indexed all fluid types as variants for now. I.E.: Fluid (unstable) is a variant of Select: Are we good with that or should they be their own index? Trying to losely follow what is being done on website:

  

• Unstable Text, Text Direction and Layout Direction are indexed as different components:

  • https://next.carbondesignsystem.com/libraries/carbon-react/latest/assets/text
  • https://next.carbondesignsystem.com/libraries/carbon-react/latest/assets/layout-direction
  • https://next.carbondesignsystem.com/libraries/carbon-react/latest/assets/text-direction but grouped under the same storybook (https://react.carbondesignsystem.com/?path=/story/experimental-unstable-text) , do we want to do anything about this?

[aubrey-oneal]

Audit scoping:

• determine properties to audit and get it in a table

• [ ] Storybook: 'kind' property switcher (lhn is actually dev stories, not variants)

• [ ] Platform: yml

• [ ] Website: lhn and doc pages that mention variants

• [ ] Figma: left hand nav? property switchers?

• find an easy way for us to skim through and spot discrepancies: airtable?

• which components are we considering now: Carbon Core only

• Are we looking at all frameworks: React first. Ask a dev for what we should spot check in other frameworks

Other thoughts

• It might help scope our proposal(s) if we know which properties matter most or have constraints we need to design around. Learning towards storybook as main focus, but keep in mind website is a more shared docs space for all disciplines.
• Let's assume we can roll up variants /components in documentation as needed, but let's not worry about how that will look (yet).
• Check cross linking between platform docs and storybook. What isn't linked to? What is duplicative?

[tay1orjones]

This is on hold until we upgrade to Storybook 7 #12912