ColorPicker story updated with the latest conventions

This commit is contained in:
NikolaBorislavovHristov 2019-09-18 11:25:45 +03:00
parent 5f7e35ddab
commit a449a8f00c
2 changed files with 12 additions and 13 deletions

View file

@ -3,16 +3,12 @@ const { storiesOf } = require('@storybook/react');
const { ColorPicker } = require('stremio/common'); const { ColorPicker } = require('stremio/common');
const styles = require('./styles'); const styles = require('./styles');
const ColorPickerExampleusage = () => { storiesOf('ColorPicker', module).add('ColorPicker', () => {
const [color, setColor] = React.useState('rgba(166, 196, 213, 0.97)'); const [color, setColor] = React.useState('rgba(166, 196, 213, 0.97)');
return ( return (
<div className={styles['demo-container']}> <div className={styles['color-picker-container']}>
<ColorPicker <ColorPicker value={color} onChange={setColor} />
value={color} <div className={styles['color-output-label']}>Current color is {color}</div>
onChange={setColor}
/>
<div className={styles['test-output']}>Current color is {color}</div>
</div> </div>
); );
} });
storiesOf('ColorPicker', module).add('ColorPicker', () => <ColorPickerExampleusage />);

View file

@ -1,5 +1,8 @@
.demo-container { .color-picker-container {
color: var(--color-surfacelighter); padding: 1rem;
padding: 1rem;
.test-output { margin-top: 1rem; } .color-output-label {
margin-top: 1rem;
color: var(--color-surfacelighter);
}
} }