Move fontSizes array into a knob so that it can be customized and som…

…e small code quality improvements

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
 		/>
 	);
 };