Storybook: Add Story for Block Quick Navigation Component

packages/block-editor/src/components/block-quick-navigation/index.js

@@ -19,6 +19,30 @@ import BlockIcon from '../block-icon';
 import useBlockDisplayInformation from '../use-block-display-information';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
 
+/**
+ * BlockQuickNavigation component displays a list of blocks with quick navigation
+ *
+ * @example
+ * ```jsx
+ * function MyBlockQuickNavigation() {
+ * return (
+ * <BlockQuickNavigation
+ *    clientIds={ [ 'block-1', 'block-2' ] }
+ *   onSelect={ ( clientId ) => {
+ *    console.log( `Block ${ clientId } selected` );
+ *  } }
+ * />
+ * );
+ * }
+ * />
+ * ```
+ *
+ * @param {Object}   props           Component props
+ * @param {Array}    props.clientIds Array of block clientIds
+ * @param {Function} props.onSelect  Callback function to call when a block is selected
+ *
+ * @return {Element} The BlockQuickNavigation component
+ */
 export default function BlockQuickNavigation( { clientIds, onSelect } ) {
 	if ( ! clientIds.length ) {
 		return null;

packages/block-editor/src/components/block-quick-navigation/stories/index.story.js

@@ -0,0 +1,77 @@
+/**
+ * Internal dependencies
+ */
+import BlockQuickNavigation from '..';
+
+/**
+ * WordPress dependencies
+ */
+import { registerCoreBlocks } from '@wordpress/block-library';
+import { createBlock } from '@wordpress/blocks';
+import { dispatch } from '@wordpress/data';
+
+registerCoreBlocks();
+
+const blockEditorState = [
+	createBlock( 'core/paragraph' ),
+	createBlock( 'core/heading' ),
+];
+
+dispatch( 'core/block-editor' ).resetBlocks( blockEditorState );
+
+const meta = {
+	title: 'BlockEditor/BlockQuickNavigation',
+	component: BlockQuickNavigation,
+	tags: [ 'status-private' ],
+	parameters: {
+		docs: {
+			canvas: {
+				sourceState: 'shown',
+			},
+			description: {
+				component:
+					'The `BlockQuickNavigation` component displays a list of blocks with quick navigation.',
+			},
+		},
+	},
+	argTypes: {
+		clientIds: {
+			control: { type: null },
+			description: 'Array of block clientIds',
+			table: {
+				type: {
+					summary: 'Array',
+				},
+			},
+		},
+		onSelect: {
+			control: {
+				type: 'function',
+			},
+			description: 'Callback function to call when a block is selected',
+			table: {
+				type: {
+					summary: 'Function',
+				},
+			},
+		},
+	},
+};
+
+export default meta;
+
+export const Default = {
+	args: {
+		clientIds: blockEditorState.map( ( block ) => block.clientId ),
+	},
+	render: function Template( { onSelect, ...args } ) {
+		return (
+			<BlockQuickNavigation
+				{ ...args }
+				onSelect={ ( ...changeArgs ) => {
+					onSelect( ...changeArgs );
+				} }
+			/>
+		);
+	},
+};