diff --git a/packages/js/product-editor/changelog/update-product-editor-add-story-for-label-component b/packages/js/product-editor/changelog/update-product-editor-add-story-for-label-component
new file mode 100644
index 00000000000..20921e577b4
--- /dev/null
+++ b/packages/js/product-editor/changelog/update-product-editor-add-story-for-label-component
@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+[Product Block Editor]: add story for Label component
diff --git a/packages/js/product-editor/src/components/label/label.tsx b/packages/js/product-editor/src/components/label/label.tsx
index 3f0de0cc9ff..a800b8d61b1 100644
--- a/packages/js/product-editor/src/components/label/label.tsx
+++ b/packages/js/product-editor/src/components/label/label.tsx
@@ -6,7 +6,7 @@ import { __ } from '@wordpress/i18n';
import { Icon, help as helpIcon } from '@wordpress/icons';
import { Tooltip } from '@wordpress/components';
-interface LabelProps {
+export interface LabelProps {
label: string;
required?: boolean;
tooltip?: string;
diff --git a/packages/js/product-editor/src/components/label/stories/index.tsx b/packages/js/product-editor/src/components/label/stories/index.tsx
new file mode 100644
index 00000000000..3a3f8f4bcfc
--- /dev/null
+++ b/packages/js/product-editor/src/components/label/stories/index.tsx
@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import React, { createElement } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { Label, LabelProps } from '../label';
+
+export default {
+ title: 'Product Editor/components/Label',
+ component: Label,
+ args: {
+ label: 'Woo',
+ required: false,
+ tooltip: __( 'Visit woo.com', 'woocommerce' ),
+ },
+};
+
+export const Default = ( args: LabelProps ) => ;
diff --git a/tools/storybook/.storybook/main.js b/tools/storybook/.storybook/main.js
index f59d77bc239..baba444b870 100644
--- a/tools/storybook/.storybook/main.js
+++ b/tools/storybook/.storybook/main.js
@@ -11,6 +11,7 @@ module.exports = {
'../../../packages/js/experimental/src/**/stories/*.@(js|tsx)',
// WooCommerce Admin / @woocommerce/onboarding components
'../../../packages/js/onboarding/src/**/stories/*.@(js|tsx)',
+ '../../../packages/js/product-editor/src/**/stories/*.@(js|tsx)',
'../../../plugins/woocommerce-admin/client/**/stories/*.@(js|tsx)',
],
addons: [
@@ -47,12 +48,14 @@ module.exports = {
+
`
: `
+
`
}
diff --git a/tools/storybook/webpack.config.js b/tools/storybook/webpack.config.js
index dcaa867f73e..672e275ce2a 100644
--- a/tools/storybook/webpack.config.js
+++ b/tools/storybook/webpack.config.js
@@ -41,6 +41,7 @@ module.exports = ( storybookConfig ) => {
storybookConfig.resolve.modules = [
path.join( __dirname, '../../plugins/woocommerce-admin/client' ),
+ path.join( __dirname, '../../packages/js/product-editor/src' ),
'node_modules',
];
@@ -72,6 +73,13 @@ module.exports = ( storybookConfig ) => {
),
to: `./onboarding-css/[name][ext]`,
},
+ {
+ from: path.resolve(
+ __dirname,
+ `../../packages/js/product-editor/build-style/*.css`
+ ),
+ to: `./product-editor-css/[name][ext]`,
+ },
{
from: path.resolve(
__dirname,