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

Updated stories

Browse Source
This commit is contained in:
Dominik Prokop 2019-01-18 16:42:22 +01:00
parent c8ac23f3c1
commit 25e60565ad
2 changed files with 41 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,9 +2,12 @@ import React, { FunctionComponent } from 'react';
import { storiesOf } from '@storybook/react';
import { ColorPicker } from './ColorPicker';
import { SeriesColorPicker } from './SeriesColorPicker';
import { UseState } from './NamedColorsPicker.story';
import { UseState } from './NamedColorsPalette.story';
import { withKnobs, select } from '@storybook/addon-knobs';
import { GrafanaTheme } from '../../types';
const CenteredStory: FunctionComponent<{}> = ({ children }) => {
// TODO: extract to decorators
export const CenteredStory: FunctionComponent<{}> = ({ children }) => {
return (
<div
style={{
@ -22,10 +25,39 @@ const CenteredStory: FunctionComponent<{}> = ({ children }) => {
const ColorPickerStories = storiesOf('UI/ColorPicker', module);
ColorPickerStories.addDecorator(story => <CenteredStory>{story()}</CenteredStory>);
ColorPickerStories.addDecorator(withKnobs);
ColorPickerStories.add('Color picker', () => {
return <ColorPicker color="#ff0000" onChange={() => {}} />;
const selectedTheme = select(
'Theme',
{
Default: '',
Light: GrafanaTheme.Light,
Dark: GrafanaTheme.Dark,
},
GrafanaTheme.Light
);
return (
<UseState initialState="#00ff00">
{(selectedColor, updateSelectedColor) => {
return <ColorPicker color={selectedColor} onChange={updateSelectedColor} theme={selectedTheme || undefined} />;
}}
</UseState>
);
});
ColorPickerStories.add('Series color picker', () => {
const selectedTheme = select(
'Theme',
{
Default: '',
Light: GrafanaTheme.Light,
Dark: GrafanaTheme.Dark,
},
GrafanaTheme.Light
);
return (
<UseState initialState="#00ff00">
{(selectedColor, updateSelectedColor) => {
@ -35,6 +67,7 @@ ColorPickerStories.add('Series color picker', () => {
onToggleAxis={() => {}}
color={selectedColor}
onChange={color => updateSelectedColor(color)}
theme={selectedTheme || undefined}
>
<div style={{ color: selectedColor }}>Open color picker</div>
</SeriesColorPicker>

8
packages/grafana-ui/src/components/ColorPicker/NamedColorsPicker.story.tsx → packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx
View File

@ -1,6 +1,6 @@
import React, { FunctionComponent } from 'react';
import { storiesOf } from '@storybook/react';
import NamedColorsPicker from './NamedColorsPicker';
import NamedColorsPalette from './NamedColorsPalette';
import { getColorName } from '@grafana/ui/src/utils/colorsPalette';
import { withKnobs, select } from '@storybook/addon-knobs';
@ -47,7 +47,7 @@ export class UseState<T> extends React.Component<StateHolderProps<T>, { value: T
}
}
storiesOf('UI/NamedColorPicker', module)
storiesOf('UI/NamedColorsPalette', module)
.addDecorator(withKnobs)
.addDecorator(story => <CenteredStory>{story()}</CenteredStory>)
.add('Named colors swatch - support for named colors', () => {
@ -65,7 +65,7 @@ storiesOf('UI/NamedColorPicker', module)
<UseState initialState={selectedColor}>
{(selectedColor, updateSelectedColor) => {
return (
<NamedColorsPicker
<NamedColorsPalette
color={selectedColor}
onChange={updateSelectedColor}
/>
@ -79,7 +79,7 @@ storiesOf('UI/NamedColorPicker', module)
<UseState initialState="#00ff00">
{(selectedColor, updateSelectedColor) => {
return (
<NamedColorsPicker
<NamedColorsPalette
color={getColorName(selectedColor)}
onChange={updateSelectedColor}
/>