From 7f8e46194f2a3cd07a793dc0ea933dc1824639c4 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 17 Aug 2022 19:48:24 +0900
Subject: [PATCH] Add stories

---
 .../text-decoration-control/stories/index.js  | 37 +++++++++++++++++++
 .../text-transform-control/stories/index.js   | 37 +++++++++++++++++++
 2 files changed, 74 insertions(+)
 create mode 100644 packages/block-editor/src/components/text-decoration-control/stories/index.js
 create mode 100644 packages/block-editor/src/components/text-transform-control/stories/index.js

diff --git a/packages/block-editor/src/components/text-decoration-control/stories/index.js b/packages/block-editor/src/components/text-decoration-control/stories/index.js
new file mode 100644
index 00000000000000..cb50e4cd6c6f73
--- /dev/null
+++ b/packages/block-editor/src/components/text-decoration-control/stories/index.js
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TextDecorationControl from '../';
+
+export default {
+	title: 'BlockEditor/TextDecorationControl',
+	component: TextDecorationControl,
+	argTypes: {
+		onChange: { action: 'onChange' },
+		size: {
+			options: [ 'default', '__unstable-large' ],
+			control: { type: 'radio' },
+		},
+	},
+};
+
+const Template = ( { onChange, ...args } ) => {
+	const [ value, setValue ] = useState();
+	return (
+		<TextDecorationControl
+			{ ...args }
+			onChange={ ( ...changeArgs ) => {
+				onChange( ...changeArgs );
+				setValue( ...changeArgs );
+			} }
+			value={ value }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
diff --git a/packages/block-editor/src/components/text-transform-control/stories/index.js b/packages/block-editor/src/components/text-transform-control/stories/index.js
new file mode 100644
index 00000000000000..3219d714257e81
--- /dev/null
+++ b/packages/block-editor/src/components/text-transform-control/stories/index.js
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TextTransformControl from '../';
+
+export default {
+	title: 'BlockEditor/TextTransformControl',
+	component: TextTransformControl,
+	argTypes: {
+		onChange: { action: 'onChange' },
+		size: {
+			options: [ 'default', '__unstable-large' ],
+			control: { type: 'radio' },
+		},
+	},
+};
+
+const Template = ( { onChange, ...args } ) => {
+	const [ value, setValue ] = useState();
+	return (
+		<TextTransformControl
+			{ ...args }
+			onChange={ ( ...changeArgs ) => {
+				onChange( ...changeArgs );
+				setValue( ...changeArgs );
+			} }
+			value={ value }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );