Feat: Storybook: Improve component organisation - Navigation Category…

… - Issue WordPress#66275 (WordPress#66658) * Group the storybook components in Navigaiton category * Fix tabs to add inside containers and add experimental id for component * Fix the syntax style Co-authored-by: hbhalodia <[email protected]> Co-authored-by: tyxla <[email protected]>
karthick-murugan · Nov 13, 2024 · 802d16c · 802d16c
1 parent 8561db1
commit 802d16c
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 3 deletions.
diff --git a/packages/components/src/external-link/stories/index.story.tsx b/packages/components/src/external-link/stories/index.story.tsx
@@ -10,7 +10,8 @@ import ExternalLink from '..';
 
 const meta: Meta< typeof ExternalLink > = {
 	component: ExternalLink,
-	title: 'Components/ExternalLink',
+	title: 'Components/Navigation/ExternalLink',
+	id: 'components-externallink',
 	argTypes: {
 		children: { control: { type: 'text' } },
 	},

diff --git a/packages/components/src/navigator/stories/index.story.tsx b/packages/components/src/navigator/stories/index.story.tsx
@@ -21,7 +21,8 @@ const meta: Meta< typeof Navigator > = {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		BackButton: Navigator.BackButton,
 	},
-	title: 'Components/Navigator',
+	title: 'Components/Navigation/Navigator',
+	id: 'components-navigator',
 	argTypes: {
 		as: { control: { type: null } },
 		children: { control: { type: null } },

diff --git a/packages/components/src/tree-grid/stories/index.story.tsx b/packages/components/src/tree-grid/stories/index.story.tsx
@@ -16,7 +16,8 @@ import { Button } from '../../button';
 import InputControl from '../../input-control';
 
 const meta: Meta< typeof TreeGrid > = {
-	title: 'Components (Experimental)/TreeGrid',
+	title: 'Components (Experimental)/Navigation/TreeGrid',
+	id: 'components-experimental-treegrid',
 	component: TreeGrid,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { TreeGridRow, TreeGridCell },

diff --git a/storybook/preview.js b/storybook/preview.js
@@ -133,9 +133,11 @@ export const parameters = {
 					'Actions',
 					'Containers',
 					'Feedback',
+					'Navigation',
 					'Utilities',
 				],
 				'Components (Experimental)',
+				[ 'Navigation' ],
 				'Icons',
 			],
 		},