1 files changed, 103 insertions, 0 deletions
diff --git a/stories/react/SVGIcon.stories.js b/stories/react/SVGIcon.stories.js
new file mode 100644
index 0000000..2c2ffc2
--- /dev/null
+++ b/stories/react/SVGIcon.stories.js
@@ -0,0 +1,103 @@
+import React from 'react';
+import Examples from './utils/Examples.js';
+import DropdownMenu from './utils/components/DropdownMenu.js';
+import SVGIcon from '../../src/react/SVGIcon.js';
+
+const iconLabelPositions = [
+	'', 'bottom', 'top', 'left', 'right'
+];
+
+const iconColors = [
+	'',
+	'primary',
+	'secondary',
+	'positive',
+	'negative',
+	'warning'
+];
+
+const disabledStates = ['false', 'true'];
+
+function buildExamples({iconName, iconLabel, labelPosition, color, disabled}) {
+	return {
+		Example: {
+			jsx: <SVGIcon
+				label={iconLabel}
+				labelPosition={labelPosition}
+				color={color}
+				name={iconName}
+				disabled={disabled === 'true'} />
+		}
+	};
+}
+
+const IconTable = ({onClick}) => (
+	<div className='icons-table'>
+		{ICON_NAMES.map(icon => (
+			<div key={icon} className='icon-section'>
+				<SVGIcon
+					onClick={() => onClick(icon)}
+					label={icon}
+					iconClassName='storybook-small'
+					name={icon} />
+			</div>
+		))}
+	</div>
+);
+
+class Icons extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			iconName: ICON_NAMES[0],
+			iconLabel: '',
+			labelPosition: iconLabelPositions[0],
+			color : iconColors[0]
+		};
+	}
+
+	render() {
+		let {iconName, iconLabel, labelPosition, color, disabled} = this.state;
+		return (
+			<div className='icons-screen'>
+				<h1>Icons</h1>
+				<div className='icons-option-selector'>
+					<DropdownMenu
+						title='Icon name'
+						value={iconName}
+						onChange={e => this.setState({iconName: e.target.value})}
+						options={ICON_NAMES} />
+					<div className='option-container'>
+						<label>Icon label</label>
+						<input value={iconLabel} onChange={e => this.setState({iconLabel: e.target.value})}/>
+					</div>
+					<DropdownMenu
+						title='Label position'
+						value={labelPosition}
+						onChange={e => this.setState({labelPosition: e.target.value})}
+						options={iconLabelPositions} />
+					<DropdownMenu
+						title='Color'
+						value={color}
+						onChange={e => this.setState({color: e.target.value})}
+						options={iconColors} />
+					<DropdownMenu
+						title='Disabled'
+						value={disabled}
+						onChange={e => this.setState({disabled: e.target.value})}
+						options={disabledStates} />
+				</div>
+				<Examples examples={buildExamples({iconName, iconLabel, labelPosition, color, disabled})} />
+				<IconTable onClick={icon => this.setState({iconName: icon})} />
+				<div className='missing-icon-section'>
+					<div >You will see the following if the icon name you used is not found:</div>
+					<SVGIcon
+						onClick={() => {}}
+						name='MissingIcon' />
+				</div>
+			</div>
+		);
+	};
+}
+
+export default Icons;