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, 0 insertions, 103 deletions
diff --git a/stories/react/SVGIcon.stories.js b/stories/react/SVGIcon.stories.js
deleted file mode 100644
index 2c2ffc2..0000000
--- a/stories/react/SVGIcon.stories.js
+++ /dev/null
@@ -1,103 +0,0 @@
-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;