IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Stories update for color picker

Browse Source
This commit is contained in:
Dominik Prokop 2019-01-22 13:36:21 +01:00
parent c3e5737fb8
commit ba4b774c96
1 changed files with 31 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx
View File

@ -3,7 +3,8 @@ import { storiesOf } from '@storybook/react';
import { SeriesColorPicker } from './ColorPicker';
import { ColorPicker } from './ColorPicker';
import { UseState } from './NamedColorsPalette.story';
import { withKnobs, select } from '@storybook/addon-knobs';
import { withKnobs, select, boolean } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';
import { GrafanaTheme } from '../../types';
// TODO: extract to decorators
@ -22,47 +23,55 @@ export const CenteredStory: FunctionComponent<{}> = ({ children }) => {
);
};
const ColorPickerStories = storiesOf('UI/ColorPicker', module);
const getColorPickerKnobs = (defaultTheme: GrafanaTheme = GrafanaTheme.Light, enableNamedColors?: boolean) => {
return {
selectedTheme: select(
'Theme',
{
Default: '',
Light: GrafanaTheme.Light,
Dark: GrafanaTheme.Dark,
},
defaultTheme
),
enableNamedColors: boolean('Enable named colors', !!enableNamedColors),
};
};
const ColorPickerStories = storiesOf('UI/ColorPicker', module);
ColorPickerStories.addDecorator(story => <CenteredStory>{story()}</CenteredStory>);
ColorPickerStories.addDecorator(withKnobs);
ColorPickerStories.add('Color picker', () => {
const selectedTheme = select(
'Theme',
{
Default: '',
Light: GrafanaTheme.Light,
Dark: GrafanaTheme.Dark,
},
GrafanaTheme.Light
);
const { selectedTheme, enableNamedColors } = getColorPickerKnobs();
return (
<UseState initialState="#00ff00">
{(selectedColor, updateSelectedColor) => {
return <ColorPicker color={selectedColor} onChange={updateSelectedColor} theme={selectedTheme || undefined} />;
return (
<ColorPicker
enableNamedColors={enableNamedColors}
color={selectedColor}
onChange={color => {
action('Color changed')(color);
updateSelectedColor(color);
}}
theme={selectedTheme || undefined}
/>
);
}}
</UseState>
);
});
ColorPickerStories.add('Series color picker', () => {
const selectedTheme = select(
'Theme',
{
Default: '',
Light: GrafanaTheme.Light,
Dark: GrafanaTheme.Dark,
},
GrafanaTheme.Light
);
const { selectedTheme, enableNamedColors } = getColorPickerKnobs();
return (
<UseState initialState="#00ff00">
{(selectedColor, updateSelectedColor) => {
return (
<SeriesColorPicker
enableNamedColors={enableNamedColors}
yaxis={1}
onToggleAxis={() => {}}
color={selectedColor}