mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-04-21 11:42:05 +00:00
ColorPicker story updated with the latest conventions
This commit is contained in:
parent
5f7e35ddab
commit
a449a8f00c
2 changed files with 12 additions and 13 deletions
|
|
@ -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 />);
|
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue