Chip component stories for storybook (https://github.com/woocommerce/woocommerce-blocks/pull/5322)

* ship component stories for storybook

* Refactor RemovableChip for Storybook

* Implement lucio feedback changes

* RemovableChip is part of the Chip story

plugins/woocommerce-blocks/assets/js/base/components/chip/removable-chip.tsx

@@ -10,7 +10,7 @@ import { Icon, noAlt } from '@woocommerce/icons';
  */
 import Chip, { ChipProps } from './chip';
 
-interface RemovableChipProps extends ChipProps {
+export interface RemovableChipProps extends ChipProps {
 	/**
 	 * Aria label content.
 	 */
@@ -47,7 +47,7 @@ interface RemovableChipProps extends ChipProps {
  * @param {string} props.screenReaderText The screen reader text for the chip.
  * @param {Object} props.props Rest of props passed into component.
  */
-const RemovableChip: React.FC< RemovableChipProps > = ( {
+export const RemovableChip = ( {
 	ariaLabel = '',
 	className = '',
 	disabled = false,
@@ -56,7 +56,7 @@ const RemovableChip: React.FC< RemovableChipProps > = ( {
 	text,
 	screenReaderText = '',
 	...props
-} ) => {
+}: RemovableChipProps ): JSX.Element => {
 	const RemoveElement = removeOnAnyClick ? 'span' : 'button';
 
 	if ( ! ariaLabel ) {

plugins/woocommerce-blocks/assets/js/base/components/chip/stories/chip.stories.tsx

@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import { Story, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import Chip, { ChipProps } from '../chip';
+const availableElements = [ 'li', 'div', 'span' ];
+const availableRadii = [ 'none', 'small', 'medium', 'large' ];
+
+export default {
+	title: 'WooCommerce Blocks/@base-components/Chip',
+	component: Chip,
+	argTypes: {
+		element: {
+			control: 'radio',
+			options: availableElements,
+		},
+		className: {
+			control: 'text',
+		},
+		radius: {
+			control: 'radio',
+			options: availableRadii,
+		},
+	},
+} as Meta< ChipProps >;
+
+const Template: Story< ChipProps > = ( args ) => <Chip { ...args } />;
+
+export const Default = Template.bind( {} );
+Default.args = {
+	element: 'li',
+	text: 'Take me to the casino!',
+	screenReaderText: "I'm a chip, me",
+};

plugins/woocommerce-blocks/assets/js/base/components/chip/stories/index.js

@@ -1,42 +0,0 @@
-/**
- * External dependencies
- */
-import { text, select, boolean } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-import * as components from '../';
-
-export default {
-	title: 'WooCommerce Blocks/@base-components/Chip',
-	component: Chip,
-};
-
-const radii = [ 'none', 'small', 'medium', 'large' ];
-
-export const Chip = () => (
-	<components.Chip
-		text={ text( 'Text', 'example' ) }
-		radius={ select( 'Radius', radii ) }
-		screenReaderText={ text(
-			'Screen reader text',
-			'Example screen reader text'
-		) }
-		element={ select( 'Element', [ 'li', 'div', 'span' ], 'li' ) }
-	/>
-);
-
-export const RemovableChip = () => (
-	<components.RemovableChip
-		text={ text( 'Text', 'example' ) }
-		radius={ select( 'Radius', radii ) }
-		screenReaderText={ text(
-			'Screen reader text',
-			'Example screen reader text'
-		) }
-		disabled={ boolean( 'Disabled', false ) }
-		removeOnAnyClick={ boolean( 'Remove on any click', false ) }
-		element={ select( 'Element', [ 'li', 'div', 'span' ], 'li' ) }
-	/>
-);

plugins/woocommerce-blocks/assets/js/base/components/chip/stories/removable-chip.stories.tsx

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { Story, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { RemovableChip, RemovableChipProps } from '../removable-chip';
+
+const availableElements = [ 'li', 'div', 'span' ];
+
+export default {
+	title: 'WooCommerce Blocks/@base-components/Chip/RemovableChip',
+	component: RemovableChip,
+	argTypes: {
+		element: {
+			control: 'radio',
+			options: availableElements,
+		},
+	},
+} as Meta< RemovableChipProps >;
+
+const Template: Story< RemovableChipProps > = ( args ) => (
+	<RemovableChip { ...args } />
+);
+
+export const Default = Template.bind( {} );
+Default.args = {
+	element: 'li',
+	text: 'Take me to the casino',
+	screenReaderText: "I'm a removable chip, me",
+};