aboutsummaryrefslogtreecommitdiffstats
path: root/stories/react/SVGIcon.stories.js
diff options
context:
space:
mode:
Diffstat (limited to 'stories/react/SVGIcon.stories.js')
-rw-r--r--stories/react/SVGIcon.stories.js103
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;