Add storybook demo for Chip (#3029)

* add stories for Chip * Add more knobs to Chip storybook Co-authored-by: Thomas Roberts <[email protected]>
woocommerce · Jun 14, 2021 · ca6f4ea · ca6f4ea
1 parent 9e4f4f0
commit ca6f4ea
Showing 1 changed file with 42 additions and 0 deletions.
diff --git a/assets/js/base/components/chip/stories/index.js b/assets/js/base/components/chip/stories/index.js
@@ -0,0 +1,42 @@
+/**
+ * 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' ) }
+	/>
+);