v9 Website: Organize left navigation, add theme entries (#23742)

* Organize left navigation, add theme entries

* change

Author: micahgodbolt

change/@fluentui-react-button-d302b25f-5810-425a-9442-3a7bb14b5972.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Organize left navigation, add theme entries",
+  "packageName": "@fluentui/react-button",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-menu-89467982-8eb2-4193-97c0-14538ba3d51d.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Organize left navigation, add theme entries",
+  "packageName": "@fluentui/react-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-theme-1971a818-e9de-4bed-8fc1-50fa8c10f0da.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Organize left navigation, add theme entries",
+  "packageName": "@fluentui/react-theme",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/react-components/react-badge/src/stories/Badge/index.stories.tsx

@@ -11,7 +11,7 @@ export { Color } from './BadgeColor.stories';
 export { Icon } from './BadgeIcon.stories';
 
 export default {
-  title: 'Components/Badge',
+  title: 'Components/Badge/Badge',
   component: Badge,
   parameters: {
     docs: {

packages/react-components/react-badge/src/stories/CounterBadge/index.stories.tsx

@@ -11,7 +11,7 @@ export { Color } from './CounterBadgeColor.stories';
 export { Dot } from './CounterBadgeDot.stories';
 
 export default {
-  title: 'Components/Counter Badge',
+  title: 'Components/Badge/Counter Badge',
   component: CounterBadge,
   parameters: {
     docs: {

packages/react-components/react-badge/src/stories/PresenceBadge/index.stories.tsx

@@ -9,7 +9,7 @@ export { Status } from './PresenceBadgeStatus.stories';
 export { OutOfOffice } from './PresenceBadgeOutOfOffice.stories';
 
 export default {
-  title: 'Components/PresenceBadge',
+  title: 'Components/Badge/PresenceBadge',
   component: PresenceBadge,
   parameters: {
     docs: {

packages/react-components/react-button/src/stories/Button/ButtonDescription.md

@@ -1,7 +1 @@
 A button triggers an action or event when activated.
-
-See also:
-
-[MenuButton](/?path=/docs/components-menubutton--menu-button-default),
-[ToggleButton](/?path=/docs/components-togglebutton--toggle-button-default),
-[CompoundButton](/?path=/docs/components-compoundbutton--compound-button-default)

packages/react-components/react-button/src/stories/Button/index.stories.tsx

@@ -13,7 +13,7 @@ export { Disabled } from './ButtonDisabled.stories';
 export { WithLongText } from './ButtonWithLongText.stories';
 
 export default {
-  title: 'Components/Button',
+  title: 'Components/Button/Button',
   component: Button,
   parameters: {
     docs: {

packages/react-components/react-button/src/stories/CompoundButton/index.stories.tsx

@@ -14,7 +14,7 @@ export { WithLongText } from './CompoundButtonWithLongText.stories';
 export { AsToggleButton } from './CompoundButtonAsToggleButton.stories';
 
 export default {
-  title: 'Components/CompoundButton',
+  title: 'Components/Button/CompoundButton',
   component: CompoundButton,
   parameters: {
     docs: {

packages/react-components/react-button/src/stories/MenuButton/index.stories.tsx

@@ -16,7 +16,7 @@ export { Disabled } from './MenuButtonDisabled.stories';
 export { WithLongText } from './MenuButtonWithLongText.stories';
 
 export default {
-  title: 'Components/MenuButton',
+  title: 'Components/Button/MenuButton',
   component: MenuButton,
   parameters: {
     docs: {

packages/react-components/react-button/src/stories/SplitButton/index.stories.tsx

@@ -16,7 +16,7 @@ export { Disabled } from './SplitButtonDisabled.stories';
 export { WithLongText } from './SplitButtonWithLongText.stories';
 
 export default {
-  title: 'Components/SplitButton',
+  title: 'Components/Button/SplitButton',
   component: SplitButton,
   parameters: {
     docs: {

packages/react-components/react-button/src/stories/ToggleButton/index.stories.tsx

@@ -14,7 +14,7 @@ export { Checked } from './ToggleButtonChecked.stories';
 export { WithLongText } from './ToggleButtonWithLongText.stories';
 
 export default {
-  title: 'Components/ToggleButton',
+  title: 'Components/Button/ToggleButton',
   component: ToggleButton,
   parameters: {
     docs: {

packages/react-components/react-menu/src/stories/Menu/index.stories.tsx

@@ -26,7 +26,7 @@ export { SplitMenuItem } from './MenuSplitMenuItem.stories';
 export { MenuTriggerWithTooltip } from './MenuTriggerWithTooltip.stories';
 
 export default {
-  title: 'Components/Menu',
+  title: 'Components/Menu/Menu',
   component: Menu,
   parameters: {
     docs: {

packages/react-components/react-menu/src/stories/MenuList/MenuListDescription.md

@@ -1,4 +1 @@
 A menu list displays a list of actions. It is usually rendered inside of the Menu component.
-
-See also:
-[Menu](/?path=/docs/components-menu--default)

packages/react-components/react-menu/src/stories/MenuList/index.stories.tsx

@@ -5,7 +5,7 @@ export { Default } from './MenuListDefault.stories';
 export { MenuListWithNestedSubmenus } from './MenuListNestedSubmenus.stories';
 
 export default {
-  title: 'Components/MenuList',
+  title: 'Components/Menu/MenuList',
   component: MenuList,
   parameters: {
     docs: {

packages/react-components/react-theme/src/stories/Theme/index.stories.tsx

@@ -0,0 +1,17 @@
+import { Meta, Canvas } from '@storybook/addon-docs';
+import { Colors } from './ThemeColors.stories.tsx';
+import { Shadows } from './ThemeShadows.stories';
+
+<Meta title="Theme/Color" />
+
+<h1 class="sbdocs-title"> Colors </h1>
+
+<Canvas>
+  <Colors />
+</Canvas>
+
+## Shadows
+
+<Canvas>
+  <Shadows />
+</Canvas>

packages/react-components/react-theme/src/stories/Theme/ColorRamp.stories.tsx packages/react-components/react-theme/src/stories/colors/ColorRamp.stories.tsx

@@ -0,0 +1,39 @@
+import { Meta, Canvas } from '@storybook/addon-docs';
+import { MotionCurves, MotionDuration } from './ThemeMotion.stories';
+import { Spacing } from './ThemeSpacing.stories';
+import { StrokeWidths } from './ThemeStrokeWidths.stories';
+import { BorderRadii } from './ThemeBorderRadii.stories';
+
+<Meta title="Theme/Motion and Size" />
+
+<h1 class="sbdocs-title"> Motion and size </h1>
+
+### Motion curves
+
+<Canvas>
+  <MotionCurves />
+</Canvas>
+
+### Motion duration
+
+<Canvas>
+  <MotionDuration />
+</Canvas>
+
+### Spacing
+
+<Canvas>
+  <Spacing />
+</Canvas>
+
+### Stroke widths
+
+<Canvas>
+  <StrokeWidths />
+</Canvas>
+
+### Border radii
+
+<Canvas>
+  <BorderRadii />
+</Canvas>

packages/react-components/react-theme/src/stories/Theme/ThemeColors.stories.tsx packages/react-components/react-theme/src/stories/colors/ThemeColors.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta, Canvas } from '@storybook/addon-docs';
+import { FontFamily, FontSize, FontWeight, LineHeight, TypographyStyles } from './ThemeTypography.stories';
+
+<Meta title="Theme/Typography" />
+
+<h1 class="sbdocs-title"> Typography </h1>
+
+### Font family
+
+<Canvas>
+  <FontFamily />
+</Canvas>
+
+### Font size
+
+<Canvas>
+  <FontSize />
+</Canvas>
+
+### Font weight
+
+<Canvas>
+  <FontWeight />
+</Canvas>
+
+### Line height
+
+<Canvas>
+  <LineHeight />
+</Canvas>
+
+### Typography styles
+
+<Canvas>
+  <TypographyStyles />
+</Canvas>