From e7cabea95b50bd9e4cf6e12a4bf14069d557d82f Mon Sep 17 00:00:00 2001
From: Vipul Gupta <vipulgup04@gmail.com>
Date: Wed, 25 Dec 2024 11:17:13 +0530
Subject: [PATCH 1/2] feat: Adds base for font appearnace control story.

---
 .../stories/index.story.js                    | 103 ++++++++++++++++++
 1 file changed, 103 insertions(+)
 create mode 100644 packages/block-editor/src/components/font-appearance-control/stories/index.story.js

diff --git a/packages/block-editor/src/components/font-appearance-control/stories/index.story.js b/packages/block-editor/src/components/font-appearance-control/stories/index.story.js
new file mode 100644
index 00000000000000..7da70d6b373e83
--- /dev/null
+++ b/packages/block-editor/src/components/font-appearance-control/stories/index.story.js
@@ -0,0 +1,103 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FontAppearanceControl from '../';
+
+const meta = {
+	title: 'BlockEditor/FontAppearanceControl',
+	component: FontAppearanceControl,
+	parameters: {
+		docs: {
+			description: {
+				component:
+					'`FontAppearanceControl` is used to display and select font style and weight options for a font family.',
+			},
+		},
+	},
+	argTypes: {
+		hasFontStyles: {
+			control: 'boolean',
+			description: 'Enable or disable font styles.',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'true' },
+			},
+		},
+		hasFontWeights: {
+			control: 'boolean',
+			description: 'Enable or disable font weights.',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'true' },
+			},
+		},
+		fontFamilyFaces: {
+			control: 'object',
+			description: 'Font faces including style and weight definitions.',
+			table: {
+				type: { summary: 'Array' },
+				defaultValue: { summary: 'undefined' },
+			},
+		},
+		value: {
+			control: 'object',
+			description: 'The currently selected font style and weight.',
+			table: {
+				type: { summary: 'object' },
+				defaultValue: { summary: '{}' },
+			},
+		},
+		onChange: {
+			action: 'changed',
+			description: 'Callback function triggered when the value changes.',
+			table: {
+				type: { summary: 'function' },
+			},
+		},
+	},
+};
+
+export default meta;
+
+const Template = ( args ) => {
+	const [ value, setValue ] = useState( {
+		fontStyle: undefined,
+		fontWeight: undefined,
+	} );
+
+	return (
+		<FontAppearanceControl
+			{ ...args }
+			value={ value }
+			onChange={ ( newStyle ) => {
+				setValue( newStyle );
+				args.onChange( newStyle );
+			} }
+		/>
+	);
+};
+
+export const Default = {
+	render: Template,
+	args: {
+		hasFontStyles: true,
+		hasFontWeights: true,
+		fontFamilyFaces: [
+			{
+				fontFamily: 'ExampleFont',
+				fontStyle: 'italic',
+				fontWeight: '400',
+			},
+			{
+				fontFamily: 'ExampleFont',
+				fontStyle: 'normal',
+				fontWeight: '700',
+			},
+		],
+	},
+};

From ba50a0b4ef2d089db3fd503ed8ac0a716a6f5db2 Mon Sep 17 00:00:00 2001
From: Vipul Gupta <vipulgup04@gmail.com>
Date: Wed, 25 Dec 2024 12:03:12 +0530
Subject: [PATCH 2/2] feat: Refine the args and description.

---
 .../stories/index.story.js                    | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/font-appearance-control/stories/index.story.js b/packages/block-editor/src/components/font-appearance-control/stories/index.story.js
index 7da70d6b373e83..2770ff829fc7e3 100644
--- a/packages/block-editor/src/components/font-appearance-control/stories/index.story.js
+++ b/packages/block-editor/src/components/font-appearance-control/stories/index.story.js
@@ -13,13 +13,29 @@ const meta = {
 	component: FontAppearanceControl,
 	parameters: {
 		docs: {
+			canvas: {
+				sourceState: 'shown',
+			},
 			description: {
-				component:
-					'`FontAppearanceControl` is used to display and select font style and weight options for a font family.',
+				component: `
+\`FontAppearanceControl\` is a component designed to display and select font style and weight options for a given font family.
+
+Note: The margin below the select control is not included within the component itself. It has been added here to enhance visibility of the options in the storybook.`,
+			},
+			story: {
+				height: '150px',
 			},
 		},
 	},
 	argTypes: {
+		__next40pxDefaultSize: {
+			control: 'boolean',
+			description: 'Opt into the larger default height.',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
 		hasFontStyles: {
 			control: 'boolean',
 			description: 'Enable or disable font styles.',
@@ -89,12 +105,12 @@ export const Default = {
 		hasFontWeights: true,
 		fontFamilyFaces: [
 			{
-				fontFamily: 'ExampleFont',
+				fontFamily: 'roboto',
 				fontStyle: 'italic',
 				fontWeight: '400',
 			},
 			{
-				fontFamily: 'ExampleFont',
+				fontFamily: 'roboto',
 				fontStyle: 'normal',
 				fontWeight: '700',
 			},