Remove all dashicon usages from Storybook stories

packages/components/src/button/stories/index.js

@@ -11,6 +11,7 @@ import {
 	formatItalic,
 	link as linkIcon,
 	more,
+	wordpress,
 } from '@wordpress/icons';
 
 /**
@@ -133,21 +134,19 @@ export const destructiveLink = () => {
 };
 
 export const icon = () => {
-	const usedIcon = text( 'Icon', 'ellipsis' );
-	const label = text( 'Label', 'More' );
-	const size = number( 'Size' );
+	const label = text( 'Label', 'Code is poetry' );
+	const size = number( 'Size', 24 );
 
-	return <Button icon={ usedIcon } label={ label } iconSize={ size } />;
+	return <Button icon={ wordpress } label={ label } iconSize={ size } />;
 };
 
 export const disabledFocusableIcon = () => {
-	const usedIcon = text( 'Icon', 'ellipsis' );
-	const label = text( 'Label', 'More' );
-	const size = number( 'Size' );
+	const label = text( 'Label', 'Code is poetry' );
+	const size = number( 'Size', 24 );
 
 	return (
 		<Button
-			icon={ usedIcon }
+			icon={ wordpress }
 			label={ label }
 			iconSize={ size }
 			disabled

packages/components/src/dropdown-menu/stories/index.js

@@ -1,27 +1,35 @@
 /**
  * External dependencies
  */
-import { text, object } from '@storybook/addon-knobs';
+import { text } from '@storybook/addon-knobs';
 
 /**
  * Internal dependencies
  */
 import DropdownMenu from '../';
 
+/**
+ * WordPress dependencies
+ */
+import { menu, arrowUp, arrowDown } from '@wordpress/icons';
+
 export default { title: 'Components/DropdownMenu', component: DropdownMenu };
 
 export const _default = () => {
 	const label = text( 'Label', 'Select a direction.' );
-	const icon = text( 'Icon', 'ellipsis' );
-	const controls = object( 'Controls', [
+	const firstMenuItemLabel = text( 'First Menu Item Label', 'Up' );
+	const secondMenuItemLabel = text( 'First Menu Item Label', 'Down' );
+
+	const controls = [
 		{
-			title: 'Up',
-			icon: 'arrow-up',
+			title: firstMenuItemLabel,
+			icon: arrowUp,
 		},
 		{
-			title: 'Down',
-			icon: 'arrow-down',
+			title: secondMenuItemLabel,
+			icon: arrowDown,
 		},
-	] );
-	return <DropdownMenu icon={ icon } label={ label } controls={ controls } />;
+	];
+
+	return <DropdownMenu icon={ menu } label={ label } controls={ controls } />;
 };

packages/components/src/icon/stories/index.js

@@ -1,12 +1,13 @@
 /**
  * External dependencies
  */
-import { number, text } from '@storybook/addon-knobs';
+import { number } from '@storybook/addon-knobs';
 
 /**
  * WordPress dependencies
  */
 import { SVG, Path } from '@wordpress/primitives';
+import { wordpress } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -20,12 +21,11 @@ const IconSizeLabel = ( { size } ) => (
 );
 
 export const _default = () => {
-	const icon = text( 'Icon', 'screenoptions' );
 	const size = number( 'Size', '24' );
 
 	return (
 		<div>
-			<Icon icon={ icon } size={ size } />
+			<Icon icon={ wordpress } size={ size } />
 			<IconSizeLabel size={ size } />
 		</div>
 	);
@@ -41,7 +41,7 @@ export const sizes = () => {
 					key={ size }
 					style={ { padding: 20, display: 'inline-block' } }
 				>
-					<Icon icon="screenoptions" size={ size } />
+					<Icon icon={ wordpress } size={ size } />
 					<IconSizeLabel size={ size } />
 				</div>
 			) ) }
@@ -52,18 +52,18 @@ export const sizes = () => {
 export const colors = () => {
 	const iconColors = [ 'blue', 'purple', 'green' ];
 
-	/**
-	 * The SVG icon inherits the color from a parent selector.
-	 */
-
 	return (
 		<>
 			{ iconColors.map( ( color ) => (
 				<div
 					key={ color }
-					style={ { padding: 20, display: 'inline-block', color } }
+					style={ {
+						padding: 20,
+						display: 'inline-block',
+						fill: color,
+					} }
 				>
-					<Icon icon="screenoptions" />
+					<Icon icon={ wordpress } />
 					<IconSizeLabel size={ 24 } />
 				</div>
 			) ) }

packages/components/src/modal/stories/index.js

@@ -7,13 +7,14 @@ import { boolean, text } from '@storybook/addon-knobs';
  * Internal dependencies
  */
 import Button from '../../button';
-import Dashicon from '../../dashicon';
+import Icon from '../../icon';
 import Modal from '../';
 
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
+import { wordpress } from '@wordpress/icons';
 
 export default { title: 'Components/Modal', component: Modal };
 
@@ -40,7 +41,7 @@ const ModalExample = ( props ) => {
 
 export const _default = () => {
 	const title = text( 'title', 'Title' );
-	const icon = text( 'icon', '' );
+	const showIcon = boolean( 'icon', false );
 	const isDismissible = boolean( 'isDismissible', true );
 	const focusOnMount = boolean( 'focusOnMount', true );
 	const shouldCloseOnEsc = boolean( 'shouldCloseOnEsc', true );
@@ -49,7 +50,7 @@ export const _default = () => {
 		true
 	);
 
-	const iconComponent = icon ? <Dashicon icon={ icon } /> : null;
+	const iconComponent = showIcon ? <Icon icon={ wordpress } /> : null;
 
 	const modalProps = {
 		icon: iconComponent,

packages/components/src/panel/stories/index.js

@@ -10,6 +10,11 @@ import Panel from '../';
 import PanelRow from '../row';
 import PanelBody from '../body';
 
+/**
+ * WordPress dependencies
+ */
+import { wordpress } from '@wordpress/icons';
+
 export default { title: 'Components/Panel', component: Panel };
 
 export const _default = () => {
@@ -62,7 +67,7 @@ export const multipleBodies = () => {
 export const withIcon = () => {
 	const bodyTitle = text( 'Body Title', 'My Block Settings' );
 	const rowText = text( 'Row Text', 'My Panel Inputs and Labels' );
-	const icon = text( 'Icon', 'wordpress' );
+	const icon = boolean( 'Icon', true ) ? wordpress : undefined;
 	const opened = boolean( 'Opened', true );
 	return (
 		<Panel header="My Panel">

packages/components/src/range-control/stories/index.js

@@ -8,6 +8,7 @@ import { boolean, number, text } from '@storybook/addon-knobs';
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
+import { wordpress } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -27,10 +28,13 @@ const RangeControlWithState = ( props ) => {
 const DefaultExample = () => {
 	const [ value, setValue ] = useState( undefined );
 
+	const showBeforeIcon = boolean( 'beforeIcon', false );
+	const showAfterIcon = boolean( 'afterIcon', false );
+
 	const props = {
-		afterIcon: text( 'afterIcon', '' ),
+		afterIcon: showAfterIcon ? wordpress : undefined,
 		allowReset: boolean( 'allowReset', false ),
-		beforeIcon: text( 'beforeIcon', '' ),
+		beforeIcon: showBeforeIcon ? wordpress : undefined,
 		color: text( 'color', COLORS.ui.theme ),
 		disabled: boolean( 'disabled', false ),
 		help: text( 'help', '' ),
@@ -97,16 +101,26 @@ export const withMinimumAndMaximumLimits = () => {
 
 export const withIconBefore = () => {
 	const label = text( 'Label', 'How many columns should this use?' );
-	const icon = text( 'Icon', 'wordpress' );
+	const showIcon = boolean( 'icon', true );
 
-	return <RangeControlWithState label={ label } beforeIcon={ icon } />;
+	return (
+		<RangeControlWithState
+			label={ label }
+			beforeIcon={ showIcon ? wordpress : undefined }
+		/>
+	);
 };
 
 export const withIconAfter = () => {
 	const label = text( 'Label', 'How many columns should this use?' );
-	const icon = text( 'Icon', 'wordpress' );
+	const showIcon = boolean( 'icon', true );
 
-	return <RangeControlWithState label={ label } afterIcon={ icon } />;
+	return (
+		<RangeControlWithState
+			label={ label }
+			afterIcon={ showIcon ? wordpress : undefined }
+		/>
+	);
 };
 
 export const withReset = () => {

packages/components/src/toolbar-button/stories/index.js

@@ -3,6 +3,11 @@
  */
 import { text } from '@storybook/addon-knobs';
 
+/**
+ * WordPress dependencies
+ */
+import { wordpress } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
@@ -13,11 +18,10 @@ export default { title: 'Components/ToolbarButton', component: ToolbarButton };
 
 export const _default = () => {
 	const label = text( 'Label', 'This is an example label.' );
-	const icon = text( 'Icon', 'wordpress' );
 
 	return (
 		<Toolbar label="Example Toolbar">
-			<ToolbarButton icon={ icon } label={ label } />
+			<ToolbarButton icon={ wordpress } label={ label } />
 		</Toolbar>
 	);
 };