Organizing and consolidating Storybook navigation content

WordPress · Oct 16, 2024 · d14897a · d14897a
1 parent 26e108d
commit d14897a
Show file tree

Hide file tree

Showing 114 changed files with 215 additions and 115 deletions.
diff --git a/packages/block-editor/src/components/block-draggable/stories/index.story.js b/packages/block-editor/src/components/block-draggable/stories/index.story.js
@@ -3,7 +3,7 @@
  */
 import BlockDraggableChip from '../draggable-chip';
 
-export default { title: 'BlockEditor/BlockDraggable' };
+export default { title: 'Block Editor/BlockDraggable' };
 
 export const _default = () => {
 	// Create a wrapper box for the absolutely-positioned child component.

diff --git a/packages/block-editor/src/components/block-mover/stories/index.story.js b/packages/block-editor/src/components/block-mover/stories/index.story.js
@@ -98,7 +98,7 @@ function BlockMoverStory() {
 }
 
 export default {
-	title: 'BlockEditor/BlockMover',
+	title: 'Block Editor/BlockMover',
 };
 
 export const _default = () => {

diff --git a/packages/block-editor/src/components/font-family/stories/index.story.js b/packages/block-editor/src/components/font-family/stories/index.story.js
@@ -10,7 +10,7 @@ import FontFamilyControl from '..';
 
 export default {
 	component: FontFamilyControl,
-	title: 'BlockEditor/FontFamilyControl',
+	title: 'Block Editor/FontFamilyControl',
 };
 
 export const Default = {

diff --git a/packages/block-editor/src/components/height-control/stories/index.story.js b/packages/block-editor/src/components/height-control/stories/index.story.js
@@ -10,7 +10,7 @@ import HeightControl from '../';
 
 export default {
 	component: HeightControl,
-	title: 'BlockEditor/HeightControl',
+	title: 'Block Editor/HeightControl',
 };
 
 const Template = ( props ) => {

diff --git a/packages/block-editor/src/components/inserter/stories/index.story.js b/packages/block-editor/src/components/inserter/stories/index.story.js
@@ -6,7 +6,7 @@ import { ExperimentalBlockEditorProvider } from '../../provider';
 import { patternCategories, patterns, reusableBlocks } from './utils/fixtures';
 import Inserter from '../';
 
-export default { title: 'BlockEditor/Inserter' };
+export default { title: 'Block Editor/Inserter' };
 
 export const LibraryWithoutPatterns = () => {
 	const wrapperStyle = {

diff --git a/packages/block-editor/src/components/line-height-control/stories/index.story.js b/packages/block-editor/src/components/line-height-control/stories/index.story.js
@@ -10,7 +10,7 @@ import LineHeightControl from '../';
 
 export default {
 	component: LineHeightControl,
-	title: 'BlockEditor/LineHeightControl',
+	title: 'Block Editor/LineHeightControl',
 };
 
 const Template = ( props ) => {

diff --git a/packages/block-editor/src/components/text-alignment-control/stories/index.story.js b/packages/block-editor/src/components/text-alignment-control/stories/index.story.js
@@ -9,7 +9,7 @@ import { useState } from '@wordpress/element';
 import TextAlignmentControl from '../';
 
 export default {
-	title: 'BlockEditor/TextAlignmentControl',
+	title: 'Block Editor/TextAlignmentControl',
 	component: TextAlignmentControl,
 	argTypes: {
 		onChange: { action: 'onChange' },

diff --git a/packages/block-editor/src/components/text-decoration-control/stories/index.story.js b/packages/block-editor/src/components/text-decoration-control/stories/index.story.js
@@ -9,7 +9,7 @@ import { useState } from '@wordpress/element';
 import TextDecorationControl from '../';
 
 export default {
-	title: 'BlockEditor/TextDecorationControl',
+	title: 'Block Editor/TextDecorationControl',
 	component: TextDecorationControl,
 	argTypes: {
 		onChange: { action: 'onChange' },

diff --git a/packages/block-editor/src/components/text-transform-control/stories/index.story.js b/packages/block-editor/src/components/text-transform-control/stories/index.story.js
@@ -9,7 +9,7 @@ import { useState } from '@wordpress/element';
 import TextTransformControl from '../';
 
 export default {
-	title: 'BlockEditor/TextTransformControl',
+	title: 'Block Editor/TextTransformControl',
 	component: TextTransformControl,
 	argTypes: {
 		onChange: { action: 'onChange' },

diff --git a/packages/block-editor/src/components/url-popover/stories/index.story.js b/packages/block-editor/src/components/url-popover/stories/index.story.js
@@ -11,7 +11,7 @@ import { keyboardReturn } from '@wordpress/icons';
  */
 import URLPopover from '../';
 
-export default { title: 'BlockEditor/URLPopover' };
+export default { title: 'Block Editor/URLPopover' };
 
 const TestURLPopover = () => {
 	const [ isVisible, setVisiblility ] = useState( false );

diff --git a/packages/components/src/alignment-matrix-control/stories/index.story.tsx b/packages/components/src/alignment-matrix-control/stories/index.story.tsx
@@ -17,7 +17,8 @@ import { HStack } from '../../h-stack';
 import type { AlignmentMatrixControlProps } from '../types';
 
 const meta: Meta< typeof AlignmentMatrixControl > = {
-	title: 'Components/AlignmentMatrixControl',
+	title: 'Block Editor/AlignmentMatrixControl',
+	id: 'components-alignmentmatrixcontrol',
 	component: AlignmentMatrixControl,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170

diff --git a/packages/components/src/angle-picker-control/stories/index.story.tsx b/packages/components/src/angle-picker-control/stories/index.story.tsx
@@ -14,7 +14,8 @@ import { useState } from '@wordpress/element';
 import { AnglePickerControl } from '..';
 
 const meta: Meta< typeof AnglePickerControl > = {
-	title: 'Components/AnglePickerControl',
+	title: 'Block Editor/AnglePickerControl',
+	id: 'components-anglepickercontrol',
 	component: AnglePickerControl,
 	argTypes: {
 		as: { control: { type: null } },

diff --git a/packages/components/src/animate/stories/index.story.tsx b/packages/components/src/animate/stories/index.story.tsx
@@ -10,7 +10,8 @@ import { Animate } from '..';
 import Notice from '../../notice';
 
 const meta: Meta< typeof Animate > = {
-	title: 'Components/Animate',
+	title: 'Components/Utilities/Animate',
+	id: 'components-animate',
 	component: Animate,
 	parameters: {
 		controls: { expanded: true },

diff --git a/packages/components/src/base-control/stories/index.story.tsx b/packages/components/src/base-control/stories/index.story.tsx
@@ -10,7 +10,7 @@ import BaseControl, { useBaseControlProps } from '..';
 import Button from '../../button';
 
 const meta: Meta< typeof BaseControl > = {
-	title: 'Components/BaseControl',
+	title: 'Components/Selection & Input/BaseControl',
 	component: BaseControl,
 	argTypes: {
 		children: { control: { type: null } },

diff --git a/packages/components/src/border-box-control/stories/index.story.tsx b/packages/components/src/border-box-control/stories/index.story.tsx
@@ -16,7 +16,8 @@ import Button from '../../button';
 import { BorderBoxControl } from '../';
 
 const meta: Meta< typeof BorderBoxControl > = {
-	title: 'Components/BorderBoxControl',
+	title: 'Block Editor/BorderBoxControl',
+	id: 'components-borderboxcontrol',
 	component: BorderBoxControl,
 	argTypes: {
 		onChange: { action: 'onChange' },

diff --git a/packages/components/src/border-control/stories/index.story.tsx b/packages/components/src/border-control/stories/index.story.tsx
@@ -16,7 +16,8 @@ import { BorderControl } from '..';
 import type { Border } from '../types';
 
 const meta: Meta< typeof BorderControl > = {
-	title: 'Components/BorderControl',
+	title: 'Block Editor/BorderControl',
+	id: 'components-bordercontrol',
 	component: BorderControl,
 	argTypes: {
 		onChange: {

diff --git a/packages/components/src/box-control/stories/index.story.tsx b/packages/components/src/box-control/stories/index.story.tsx
@@ -14,7 +14,8 @@ import { useState } from '@wordpress/element';
 import BoxControl from '../';
 
 const meta: Meta< typeof BoxControl > = {
-	title: 'Components/BoxControl',
+	title: 'Block Editor/BoxControl',
+	id: 'components-boxcontrol',
 	component: BoxControl,
 	argTypes: {
 		values: { control: { type: null } },

diff --git a/packages/components/src/button-group/stories/index.story.tsx b/packages/components/src/button-group/stories/index.story.tsx
@@ -10,7 +10,8 @@ import ButtonGroup from '..';
 import Button from '../../button';
 
 const meta: Meta< typeof ButtonGroup > = {
-	title: 'Components/ButtonGroup',
+	title: 'Components/Actions/ButtonGroup',
+	id: 'components-buttongroup',
 	component: ButtonGroup,
 	argTypes: {
 		children: { control: { type: null } },

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/checkbox-control/stories/index.story.tsx b/packages/components/src/checkbox-control/stories/index.story.tsx
@@ -17,7 +17,8 @@ import { HStack } from '../../h-stack';
 
 const meta: Meta< typeof CheckboxControl > = {
 	component: CheckboxControl,
-	title: 'Components/CheckboxControl',
+	title: 'Components/Selection & Input/CheckboxControl',
+	id: 'components-checkboxcontrol',
 	argTypes: {
 		onChange: {
 			action: 'onChange',

diff --git a/packages/components/src/circular-option-picker/stories/index.story.tsx b/packages/components/src/circular-option-picker/stories/index.story.tsx
@@ -17,7 +17,7 @@ const CircularOptionPickerStoryContext = createContext< {
 } >( {} );
 
 const meta: Meta< typeof CircularOptionPicker > = {
-	title: 'Components/CircularOptionPicker',
+	title: 'Components/Selection & Input/Color/CircularOptionPicker',
 	component: CircularOptionPicker,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170

diff --git a/packages/components/src/color-indicator/stories/index.story.tsx b/packages/components/src/color-indicator/stories/index.story.tsx
@@ -10,7 +10,8 @@ import ColorIndicator from '..';
 
 const meta: Meta< typeof ColorIndicator > = {
 	component: ColorIndicator,
-	title: 'Components/ColorIndicator',
+	title: 'Components/Selection & Input/Color/ColorIndicator',
+	id: 'components-colorindicator',
 	argTypes: {
 		colorValue: {
 			control: { type: 'color' },

diff --git a/packages/components/src/color-palette/stories/index.story.tsx b/packages/components/src/color-palette/stories/index.story.tsx
@@ -14,7 +14,8 @@ import { useState } from '@wordpress/element';
 import ColorPalette from '..';
 
 const meta: Meta< typeof ColorPalette > = {
-	title: 'Components/ColorPalette',
+	title: 'Components/Selection & Input/Color/ColorPalette',
+	id: 'components-colorpalette',
 	component: ColorPalette,
 	argTypes: {
 		as: { control: { type: null } },

diff --git a/packages/components/src/color-picker/stories/index.story.tsx b/packages/components/src/color-picker/stories/index.story.tsx
@@ -10,7 +10,8 @@ import { ColorPicker } from '../component';
 
 const meta: Meta< typeof ColorPicker > = {
 	component: ColorPicker,
-	title: 'Components/ColorPicker',
+	title: 'Components/Selection & Input/Color/ColorPicker',
+	id: 'components-colorpicker',
 	argTypes: {
 		as: { control: { type: null } },
 		color: { control: { type: null } },

diff --git a/packages/components/src/combobox-control/stories/index.story.tsx b/packages/components/src/combobox-control/stories/index.story.tsx
@@ -34,7 +34,8 @@ const countries = [
 ];
 
 const meta: Meta< typeof ComboboxControl > = {
-	title: 'Components/ComboboxControl',
+	title: 'Components/Selection & Input/ComboboxControl',
+	id: 'components-comboboxcontrol',
 	component: ComboboxControl,
 	argTypes: {
 		value: { control: { type: null } },

diff --git a/packages/components/src/composite/stories/index.story.tsx b/packages/components/src/composite/stories/index.story.tsx
@@ -16,7 +16,8 @@ import { Composite } from '..';
 import { Tooltip } from '../../tooltip';
 
 const meta: Meta< typeof Composite > = {
-	title: 'Components/Composite',
+	title: 'Components/Utilities/Composite',
+	id: 'components-composite',
 	component: Composite,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170

diff --git a/packages/components/src/confirm-dialog/stories/index.story.tsx b/packages/components/src/confirm-dialog/stories/index.story.tsx
@@ -16,7 +16,8 @@ import { ConfirmDialog } from '../component';
 
 const meta: Meta< typeof ConfirmDialog > = {
 	component: ConfirmDialog,
-	title: 'Components (Experimental)/ConfirmDialog',
+	title: 'Components/Overlays/ConfirmDialog',
+	id: 'components-confirmdialog',
 	argTypes: {
 		isOpen: {
 			control: { type: null },

diff --git a/packages/components/src/custom-gradient-picker/stories/index.story.tsx b/packages/components/src/custom-gradient-picker/stories/index.story.tsx
@@ -13,7 +13,8 @@ import { useState } from '@wordpress/element';
 import CustomGradientPicker from '../';
 
 const meta: Meta< typeof CustomGradientPicker > = {
-	title: 'Components/CustomGradientPicker',
+	title: 'Components/Selection & Input/Color/CustomGradientPicker',
+	id: 'components-customgradientpicker',
 	component: CustomGradientPicker,
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

diff --git a/packages/components/src/custom-select-control-v2/stories/index.story.tsx b/packages/components/src/custom-select-control-v2/stories/index.story.tsx
@@ -14,7 +14,8 @@ import { useState } from '@wordpress/element';
 import CustomSelectControlV2 from '..';
 
 const meta: Meta< typeof CustomSelectControlV2 > = {
-	title: 'Components/CustomSelectControl v2',
+	title: 'Components/Selection & Input/CustomSelectControl v2',
+	id: 'components-customselectcontrol-v2',
 	component: CustomSelectControlV2,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170

diff --git a/packages/components/src/custom-select-control/stories/index.story.tsx b/packages/components/src/custom-select-control/stories/index.story.tsx
@@ -14,7 +14,8 @@ import { useState } from '@wordpress/element';
 import CustomSelectControl from '..';
 
 const meta: Meta< typeof CustomSelectControl > = {
-	title: 'Components/CustomSelectControl',
+	title: 'Components/Selection & Input/CustomSelectControl',
+	id: 'components-customselectcontrol',
 	component: CustomSelectControl,
 	argTypes: {
 		onChange: { control: { type: null } },

diff --git a/packages/components/src/date-time/stories/date-time.story.tsx b/packages/components/src/date-time/stories/date-time.story.tsx
@@ -15,7 +15,8 @@ import DateTimePicker from '../date-time';
 import { daysFromNow, isWeekend } from './utils';
 
 const meta: Meta< typeof DateTimePicker > = {
-	title: 'Components/DateTimePicker',
+	title: 'Components/Selection & Input/Time & Date/DateTimePicker',
+	id: 'components-datetimepicker',
 	component: DateTimePicker,
 	argTypes: {
 		currentDate: { control: 'date' },

diff --git a/packages/components/src/date-time/stories/date.story.tsx b/packages/components/src/date-time/stories/date.story.tsx
@@ -15,7 +15,8 @@ import DatePicker from '../date';
 import { daysFromNow, isWeekend } from './utils';
 
 const meta: Meta< typeof DatePicker > = {
-	title: 'Components/DatePicker',
+	title: 'Components/Selection & Input/Time & Date/DatePicker',
+	id: 'components-datepicker',
 	component: DatePicker,
 	argTypes: {
 		currentDate: { control: 'date' },

diff --git a/packages/components/src/date-time/stories/time.story.tsx b/packages/components/src/date-time/stories/time.story.tsx
@@ -14,7 +14,8 @@ import { useState, useEffect } from '@wordpress/element';
 import TimePicker from '../time';
 
 const meta: Meta< typeof TimePicker > = {
-	title: 'Components/TimePicker',
+	title: 'Components/Selection & Input/Time & Date/TimePicker',
+	id: 'components-timepicker',
 	component: TimePicker,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { 'TimePicker.TimeInput': TimePicker.TimeInput },

diff --git a/packages/components/src/disabled/stories/index.story.tsx b/packages/components/src/disabled/stories/index.story.tsx
@@ -18,7 +18,8 @@ import TextareaControl from '../../textarea-control/';
 import { VStack } from '../../v-stack/';
 
 const meta: Meta< typeof Disabled > = {
-	title: 'Components/Disabled',
+	title: 'Components/Utilities/Disabled',
+	id: 'components-disabled',
 	component: Disabled,
 	argTypes: {
 		as: { control: { type: null } },

diff --git a/packages/components/src/divider/stories/index.story.tsx b/packages/components/src/divider/stories/index.story.tsx
@@ -12,7 +12,8 @@ import { Flex } from '../../flex';
 
 const meta: Meta< typeof Divider > = {
 	component: Divider,
-	title: 'Components (Experimental)/Divider',
+	title: 'Components/Layout/Divider',
+	id: 'components-divider',
 	argTypes: {
 		margin: {
 			control: { type: 'text' },

diff --git a/packages/components/src/draggable/stories/index.story.tsx b/packages/components/src/draggable/stories/index.story.tsx
@@ -18,7 +18,8 @@ import Draggable from '..';
 
 const meta: Meta< typeof Draggable > = {
 	component: Draggable,
-	title: 'Components/Draggable',
+	title: 'Components/Utilities/Draggable',
+	id: 'components-draggable',
 	argTypes: {
 		elementId: { control: { type: null } },
 		__experimentalDragComponent: { control: { type: null } },

diff --git a/packages/components/src/drop-zone/stories/index.story.tsx b/packages/components/src/drop-zone/stories/index.story.tsx
@@ -9,7 +9,8 @@ import DropZone from '..';
 
 const meta: Meta< typeof DropZone > = {
 	component: DropZone,
-	title: 'Components/DropZone',
+	title: 'Components/Selection & Input/File Upload/DropZone',
+	id: 'components-dropzone',
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },

diff --git a/packages/components/src/dropdown-menu-v2/stories/index.story.tsx b/packages/components/src/dropdown-menu-v2/stories/index.story.tsx
@@ -22,7 +22,8 @@ import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
 import { ContextSystemProvider } from '../../context';
 
 const meta: Meta< typeof DropdownMenuV2 > = {
-	title: 'Components (Experimental)/DropdownMenu V2',
+	title: 'Components/Selection & Input/DropdownMenu V2',
+	id: 'components-dropdownmenu-v2',
 	component: DropdownMenuV2,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170

diff --git a/packages/components/src/dropdown-menu/stories/index.story.tsx b/packages/components/src/dropdown-menu/stories/index.story.tsx
@@ -23,7 +23,8 @@ import {
 } from '@wordpress/icons';
 
 const meta: Meta< typeof DropdownMenu > = {
-	title: 'Components/DropdownMenu',
+	title: 'Components/Menus/DropdownMenu',
+	id: 'components-dropdown-menu',
 	component: DropdownMenu,
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

diff --git a/packages/components/src/dropdown/stories/index.story.tsx b/packages/components/src/dropdown/stories/index.story.tsx
@@ -13,7 +13,8 @@ import MenuItem from '../../menu-item';
 import { DropdownContentWrapper } from '../dropdown-content-wrapper';
 
 const meta: Meta< typeof Dropdown > = {
-	title: 'Components/Dropdown',
+	title: 'Components/Selection & Input/Dropdown',
+	id: 'components-dropdown',
 	component: Dropdown,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { DropdownContentWrapper },