Add `Title` entry to Storybook (https://github.com/woocommerce/woocommerce-blocks/pull/11636)

* Export TitleProps interface for use on storybook

* Add Storybook entry for Title

plugins/woocommerce-blocks/packages/components/title/index.tsx

@@ -9,20 +9,12 @@ import type { ReactNode } from 'react';
  */
 import './style.scss';
 
-/** @typedef {import('react')} React */
-
 /**
  * Component that renders a block title.
- *
- * @param {Object}          props              Incoming props for the component.
- * @param {React.ReactNode} [props.children]   Children elements this component wraps.
- * @param {string}          [props.className]  CSS class used.
- * @param {string}          props.headingLevel Heading level for title.
- * @param {Object}          [props.props]      Rest of props passed through to component.
  */
 const Title = ( {
 	children,
-	className,
+	className = '',
 	headingLevel,
 	...props
 }: TitleProps ): JSX.Element => {
@@ -39,9 +31,9 @@ const Title = ( {
 	);
 };
 
-interface TitleProps {
+export interface TitleProps {
 	headingLevel: '1' | '2' | '3' | '4' | '5' | '6';
-	className: string;
+	className?: string | undefined;
 	children: ReactNode;
 }
 

plugins/woocommerce-blocks/packages/components/title/stories/index.stories.tsx

@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import type { StoryFn, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import Title, { type TitleProps } from '..';
+import '../style.scss';
+
+export default {
+	title: 'Block Components/Title',
+	component: Title,
+	argTypes: {
+		className: {
+			control: 'text',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+			description:
+				'Additional CSS classes to apply to the title element.',
+		},
+		headingLevel: {
+			control: 'select',
+			options: [ '1', '2', '3', '4', '5', '6' ],
+			table: {
+				type: {
+					summary: "'1' | '2' | '3' | '4' | '5' | '6'",
+				},
+			},
+			description:
+				'What level of heading tag should be used, e.g. h1, h2 etc.',
+		},
+		children: {
+			control: 'text',
+			table: {
+				type: {
+					summary: 'ReactNode',
+				},
+			},
+			description: 'The text/children to render in the title element.',
+		},
+	},
+} as Meta< TitleProps >;
+
+const Template: StoryFn< TitleProps > = ( args ) => {
+	const { children, ...rest } = args;
+	return <Title { ...rest }>{ children }</Title>;
+};
+
+export const Default = Template.bind( {} );
+
+Default.args = {
+	headingLevel: '1',
+	children: 'Title',
+};