Adds categories to Storybooks navigation (#66072)

Co-authored-by: mattrwalker <[email protected]> Co-authored-by: mirka <[email protected]> Co-authored-by: auareyou <[email protected]> Co-authored-by: jasmussen <[email protected]>
WordPress · Oct 16, 2024 · 0decb96 · 0decb96
1 parent 346fd4c
commit 0decb96
Show file tree

Hide file tree

Showing 9 changed files with 21 additions and 7 deletions.
diff --git a/packages/components/src/button/stories/index.story.tsx b/packages/components/src/button/stories/index.story.tsx
@@ -22,7 +22,8 @@ import './style.css';
 import Button from '..';
 
 const meta: Meta< typeof Button > = {
-	title: 'Components/Button',
+	title: 'Components/Actions/Button',
+	id: 'components-button',
 	component: Button,
 	argTypes: {
 		// Overrides a limitation of the docgen interpreting our TS types for this as required.

diff --git a/packages/components/src/card/stories/index.story.tsx b/packages/components/src/card/stories/index.story.tsx
@@ -22,7 +22,8 @@ const meta: Meta< typeof Card > = {
 	component: Card,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { CardHeader, CardBody, CardDivider, CardMedia, CardFooter },
-	title: 'Components/Card',
+	title: 'Components/Containers/Card',
+	id: 'components-card',
 	argTypes: {
 		as: {
 			control: { type: null },

diff --git a/packages/components/src/navigable-container/stories/navigable-menu.story.tsx b/packages/components/src/navigable-container/stories/navigable-menu.story.tsx
@@ -9,7 +9,8 @@ import type { Meta, StoryFn } from '@storybook/react';
 import { NavigableMenu } from '..';
 
 const meta: Meta< typeof NavigableMenu > = {
-	title: 'Components/NavigableMenu',
+	title: 'Components/Containers/NavigableMenu',
+	id: 'components-navigablemenu',
 	component: NavigableMenu,
 	argTypes: {
 		children: { control: { type: null } },

diff --git a/packages/components/src/navigable-container/stories/tabbable-container.story.tsx b/packages/components/src/navigable-container/stories/tabbable-container.story.tsx
@@ -9,7 +9,8 @@ import type { Meta, StoryFn } from '@storybook/react';
 import { TabbableContainer } from '..';
 
 const meta: Meta< typeof TabbableContainer > = {
-	title: 'Components/TabbableContainer',
+	title: 'Components/Containers/TabbableContainer',
+	id: 'components-tabbablecontainer',
 	component: TabbableContainer,
 	argTypes: {
 		children: { control: { type: null } },

diff --git a/packages/components/src/panel/stories/index.story.tsx b/packages/components/src/panel/stories/index.story.tsx
@@ -17,7 +17,8 @@ import InputControl from '../../input-control';
 import { wordpress } from '@wordpress/icons';
 
 const meta: Meta< typeof Panel > = {
-	title: 'Components/Panel',
+	title: 'Components/Containers/Panel',
+	id: 'components-panel',
 	component: Panel,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { PanelRow, PanelBody },

diff --git a/packages/components/src/tab-panel/stories/index.story.tsx b/packages/components/src/tab-panel/stories/index.story.tsx
@@ -14,7 +14,8 @@ import { link, more, wordpress } from '@wordpress/icons';
 import TabPanel from '..';
 
 const meta: Meta< typeof TabPanel > = {
-	title: 'Components/TabPanel',
+	title: 'Components/Containers/TabPanel',
+	id: 'components-tabpanel',
 	component: TabPanel,
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

diff --git a/packages/components/src/tabs/stories/index.story.tsx b/packages/components/src/tabs/stories/index.story.tsx
@@ -20,7 +20,8 @@ import Tooltip from '../../tooltip';
 import Icon from '../../icon';
 
 const meta: Meta< typeof Tabs > = {
-	title: 'Components (Experimental)/Tabs',
+	title: 'Components/Containers/Tabs',
+	id: 'components-tabs',
 	component: Tabs,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170

diff --git a/storybook/manager-head.html b/storybook/manager-head.html
@@ -10,6 +10,7 @@
 			'navigation',
 			'navigator',
 			'progressbar',
+			'tabs',
 			'theme',
 		];
 		const REDIRECTS = [

diff --git a/storybook/preview.js b/storybook/preview.js
@@ -127,6 +127,12 @@ export const parameters = {
 				'Playground',
 				'BlockEditor',
 				'Components',
+				[
+					'Introduction',
+					'Contributing Guidelines',
+					'Actions',
+					'Containers',
+				],
 				'Components (Experimental)',
 				'Icons',
 			],