From cee80347f37c35d37b03d2a3975cc4e667b1a917 Mon Sep 17 00:00:00 2001
From: Alex Florisca <alex.florisca@automattic.com>
Date: Tue, 14 Nov 2023 09:58:57 +0000
Subject: [PATCH] Add storybook entry for Label component
 (https://github.com/woocommerce/woocommerce-blocks/pull/11682)

---
 .../packages/components/label/index.tsx       |  6 +--
 .../label/stories/index.stories.tsx           | 51 +++++++++++++++++++
 2 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 plugins/woocommerce-blocks/packages/components/label/stories/index.stories.tsx

diff --git a/plugins/woocommerce-blocks/packages/components/label/index.tsx b/plugins/woocommerce-blocks/packages/components/label/index.tsx
index 0df3aa02d35..ea4f2b3b8d2 100644
--- a/plugins/woocommerce-blocks/packages/components/label/index.tsx
+++ b/plugins/woocommerce-blocks/packages/components/label/index.tsx
@@ -5,9 +5,9 @@ import { Fragment } from '@wordpress/element';
 import classNames from 'classnames';
 import type { ReactElement, HTMLProps } from 'react';
 
-interface LabelProps extends HTMLProps< HTMLElement > {
-	label?: string | undefined;
-	screenReaderLabel?: string | undefined;
+export interface LabelProps extends HTMLProps< HTMLElement > {
+	label?: string;
+	screenReaderLabel?: string;
 	wrapperElement?: string;
 	wrapperProps?: HTMLProps< HTMLElement >;
 }
diff --git a/plugins/woocommerce-blocks/packages/components/label/stories/index.stories.tsx b/plugins/woocommerce-blocks/packages/components/label/stories/index.stories.tsx
new file mode 100644
index 00000000000..524521a26ae
--- /dev/null
+++ b/plugins/woocommerce-blocks/packages/components/label/stories/index.stories.tsx
@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import type { StoryFn, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import Label, { LabelProps } from '..';
+
+export default {
+	title: 'External Components/Label',
+	component: Label,
+	argTypes: {
+		label: {
+			control: {
+				type: 'text',
+			},
+			description: 'The label to be displayed.',
+		},
+		screenReaderLabel: {
+			control: {
+				type: 'text',
+			},
+			description: 'The label to be read by screen readers.',
+		},
+		wrapperElement: {
+			control: {
+				type: 'text',
+			},
+			description:
+				'HTML element to wrap around the label component (e.g. "span").',
+		},
+		wrapperProps: {
+			control: {
+				type: 'object',
+			},
+			description: 'The props to be passed to the wrapper element.',
+		},
+	},
+} as Meta< LabelProps >;
+
+const Template: StoryFn = ( args ) => <Label { ...args } />;
+
+export const Default = Template.bind( {} );
+Default.args = {
+	label: 'I am a label',
+	screenReaderLabel: 'I am a screen reader label',
+	wrapperElement: 'span',
+	wrapperProps: {},
+};