From bdf8cfd50f805c549ee045f4155c7152d67abcf8 Mon Sep 17 00:00:00 2001
From: Brent Swisher <brent@brentswisher.com>
Date: Mon, 28 Oct 2019 18:20:26 -0400
Subject: [PATCH 1/2] Add FontSizePicker component to Storybook

---
 .../src/font-size-picker/stories/index.js     | 65 +++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 packages/components/src/font-size-picker/stories/index.js

diff --git a/packages/components/src/font-size-picker/stories/index.js b/packages/components/src/font-size-picker/stories/index.js
new file mode 100644
index 00000000000000..c6953ca8c2e45c
--- /dev/null
+++ b/packages/components/src/font-size-picker/stories/index.js
@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FontSizePicker from '../';
+
+export default { title: 'FontSizePicker', component: FontSizePicker };
+
+const FontSizePickerWithState = ( { ...props } ) => {
+	const [ fontSize, setFontSize ] = useState( 16 );
+	const fontSizes = [
+		{
+			name: 'Small',
+			slug: 'small',
+			size: 12,
+		},
+		{
+			name: 'Normal',
+			slug: 'normal',
+			size: 16,
+		},
+		{
+			name: 'Big',
+			slug: 'big',
+			size: 26,
+		},
+	];
+	const fallbackFontSize = 16;
+
+	return (
+		<FontSizePicker
+			{ ...props }
+			fontSizes={ fontSizes }
+			fallbackFontSize={ fallbackFontSize }
+			value={ fontSize }
+			onChange={ setFontSize }
+		/>
+	);
+};
+
+export const _default = () => {
+	return (
+		<FontSizePickerWithState />
+	);
+};
+
+export const withSlider = () => {
+	return (
+		<FontSizePickerWithState
+			withSlider={ true }
+		/>
+	);
+};
+
+export const withoutCustomSizes = () => {
+	return (
+		<FontSizePickerWithState
+			disableCustomFontSizes={ true }
+		/>
+	);
+};

From cb5da512acedbc761ea774bbdd6719cc72c316da Mon Sep 17 00:00:00 2001
From: Brent Swisher <brent@brentswisher.com>
Date: Wed, 30 Oct 2019 19:44:01 -0400
Subject: [PATCH 2/2] Move fontSizes array into a knob so that it can be
 customized and some small code quality improvements

---
 .../src/font-size-picker/stories/index.js     | 76 ++++++++++++++-----
 1 file changed, 59 insertions(+), 17 deletions(-)

diff --git a/packages/components/src/font-size-picker/stories/index.js b/packages/components/src/font-size-picker/stories/index.js
index c6953ca8c2e45c..7b377716a30f09 100644
--- a/packages/components/src/font-size-picker/stories/index.js
+++ b/packages/components/src/font-size-picker/stories/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { number, object } from '@storybook/addon-knobs';
+
 /**
  * WordPress dependencies
  */
@@ -12,7 +17,18 @@ export default { title: 'FontSizePicker', component: FontSizePicker };
 
 const FontSizePickerWithState = ( { ...props } ) => {
 	const [ fontSize, setFontSize ] = useState( 16 );
-	const fontSizes = [
+
+	return (
+		<FontSizePicker
+			{ ...props }
+			value={ fontSize }
+			onChange={ setFontSize }
+		/>
+	);
+};
+
+export const _default = () => {
+	const fontSizes = object( 'Font Sizes', [
 		{
 			name: 'Small',
 			slug: 'small',
@@ -28,38 +44,64 @@ const FontSizePickerWithState = ( { ...props } ) => {
 			slug: 'big',
 			size: 26,
 		},
-	];
-	const fallbackFontSize = 16;
-
+	] );
 	return (
-		<FontSizePicker
-			{ ...props }
+		<FontSizePickerWithState
 			fontSizes={ fontSizes }
-			fallbackFontSize={ fallbackFontSize }
-			value={ fontSize }
-			onChange={ setFontSize }
 		/>
 	);
 };
 
-export const _default = () => {
-	return (
-		<FontSizePickerWithState />
-	);
-};
-
 export const withSlider = () => {
+	const fontSizes = object( 'Font Sizes', [
+		{
+			name: 'Small',
+			slug: 'small',
+			size: 12,
+		},
+		{
+			name: 'Normal',
+			slug: 'normal',
+			size: 16,
+		},
+		{
+			name: 'Big',
+			slug: 'big',
+			size: 26,
+		},
+	] );
+	const fallbackFontSize = number( 'Fallback Font Size - Slider Only', 16 );
 	return (
 		<FontSizePickerWithState
-			withSlider={ true }
+			fontSizes={ fontSizes }
+			fallbackFontSize={ fallbackFontSize }
+			withSlider
 		/>
 	);
 };
 
 export const withoutCustomSizes = () => {
+	const fontSizes = object( 'Font Sizes', [
+		{
+			name: 'Small',
+			slug: 'small',
+			size: 12,
+		},
+		{
+			name: 'Normal',
+			slug: 'normal',
+			size: 16,
+		},
+		{
+			name: 'Big',
+			slug: 'big',
+			size: 26,
+		},
+	] );
 	return (
 		<FontSizePickerWithState
-			disableCustomFontSizes={ true }
+			fontSizes={ fontSizes }
+			disableCustomFontSizes
 		/>
 	);
 };