IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-12-28 01:41:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

NamedColorsPalette: updates story from knobs to controls (#31443)

Browse Source
This commit is contained in:
Uchechukwu Obasi 2021-02-24 12:52:56 +01:00 committed by GitHub
parent 59d11ce84f
commit f3a7cb4709
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,9 @@
import React from 'react';
import { NamedColorsPalette } from './NamedColorsPalette';
import { select } from '@storybook/addon-knobs';
import { NamedColorsPalette, NamedColorsPaletteProps } from './NamedColorsPalette';
import { Story } from '@storybook/react';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
import { UseState } from '../../utils/storybook/UseState';
import mdx from './ColorPicker.mdx';
@ -14,20 +15,22 @@ export default {
docs: {
page: mdx,
},
knobs: {
disable: true,
},
},
argTypes: {
selectedColor: { control: { type: 'select', options: ['green', 'red', 'light-blue', 'yellow'] } },
theme: NOOP_CONTROL,
color: NOOP_CONTROL,
},
};
export const namedColors = () => {
const selectedColor = select(
'Selected color',
{
Green: 'green',
Red: 'red',
'Light blue': 'light-blue',
},
'red'
);
interface StoryProps extends Partial<NamedColorsPaletteProps> {
selectedColor: string;
}
export const NamedColors: Story<StoryProps> = ({ selectedColor }) => {
return (
<UseState initialState={selectedColor}>
{(selectedColor, updateSelectedColor) => {
@ -39,3 +42,6 @@ export const namedColors = () => {
</UseState>
);
};
NamedColors.args = {
selectedColor: 'red',
};