Storybook: Add stories for BlockAlignmentMatrixControl Component

packages/block-editor/src/components/block-alignment-matrix-control/README.md

@@ -41,13 +41,14 @@ const controls = (
       />
     </BlockControls>
   </>
-}
+);
 ```
 
 ### Props
 
 | Name       | Type       | Default                   | Description                                                                                                                              |
 | ---------- | ---------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| `label`    | `string`   | `Change matrix alignment` | concise description of tool's functionality.                                                                                             |
-| `onChange` | `function` | `noop`                    | the function to execute upon a user's change of the matrix state                                                                         |
-| `value`    | `string`   | `center`                  | describes the content alignment location and can be `top`, `right`, `bottom`, `left`, `topRight`, `bottomRight`, `bottomLeft`, `topLeft` |
+| `label`    | `string`   | `Change matrix alignment` | Label for the control.											                                                                                             |
+| `onChange` | `function` | `noop`                    | Function to execute upon a user's change of the matrix state.                                                                            |
+| `value`    | `string`   | `center`                  | Describes the content alignment location and can be `center center`, `center left`, `center right`, `top center`, `top left`, `top right`, `bottom center`, `bottom left`, `bottom right`. |
+| `isDisabled` | `boolean` | `false`                   | Disables the control.                                                                                                                    |

packages/block-editor/src/components/block-alignment-matrix-control/stories/index.story.js

@@ -0,0 +1,78 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import BlockAlignmentMatrixControl from '../';
+
+const meta = {
+	title: 'BlockEditor/BlockAlignmentMatrixControl',
+	component: BlockAlignmentMatrixControl,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component:
+					'Renders a control for selecting block alignment using a matrix of alignment options.',
+			},
+		},
+	},
+	argTypes: {
+		label: {
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'Change matrix alignment' },
+			},
+			description: 'Label for the control.',
+		},
+		onChange: {
+			action: 'onChange',
+			control: { type: null },
+			table: {
+				type: { summary: 'function' },
+				defaultValue: { summary: '() => {}' },
+			},
+			description:
+				"Function to execute upon a user's change of the matrix state.",
+		},
+		isDisabled: {
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+			description: 'Disables the control.',
+		},
+		value: {
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'center center' },
+			},
+			description: 'Value of the control.',
+		},
+	},
+};
+
+export default meta;
+
+export const Default = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState();
+
+		return (
+			<BlockAlignmentMatrixControl
+				{ ...args }
+				value={ value }
+				onChange={ ( ...changeArgs ) => {
+					onChange( ...changeArgs );
+					setValue( ...changeArgs );
+				} }
+			/>
+		);
+	},
+};