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

ColorPicker: updates story from knobs to controls (#31429)

Browse Source 
* ColorPicker: updates story from knobs to controls

* changed story name to uppercase

* made some changes to story name

* made some changes
This commit is contained in:
Uchechukwu Obasi 2021-02-24 12:35:35 +01:00 committed by GitHub
parent 59c060f1f1
commit 5af27cb43e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,18 +1,14 @@
import React from 'react';
import { boolean } from '@storybook/addon-knobs';
import { Story } from '@storybook/react';
import { SeriesColorPicker, ColorPicker } from '@grafana/ui';
import { action } from '@storybook/addon-actions';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
import { UseState } from '../../utils/storybook/UseState';
import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
import { ColorPickerProps } from './ColorPickerPopover';
import mdx from './ColorPicker.mdx';
const getColorPickerKnobs = () => {
return {
enableNamedColors: boolean('Enable named colors', false),
};
};
export default {
title: 'Pickers and Editors/ColorPicker',
component: ColorPicker,
@ -22,12 +18,21 @@ export default {
docs: {
page: mdx,
},
knobs: {
disable: true,
},
},
args: {
enableNamedColors: false,
},
argTypes: {
color: NOOP_CONTROL,
onChange: NOOP_CONTROL,
onColorChange: NOOP_CONTROL,
},
};
export const basic = () => {
const { enableNamedColors } = getColorPickerKnobs();
export const Basic: Story<ColorPickerProps> = ({ enableNamedColors }) => {
return (
<UseState initialState="#00ff00">
{(selectedColor, updateSelectedColor) => {
@ -44,9 +49,7 @@ export const basic = () => {
);
};
export const seriesColorPicker = () => {
const { enableNamedColors } = getColorPickerKnobs();
export const SeriesPicker: Story<ColorPickerProps> = ({ enableNamedColors }) => {
return (
<UseState initialState="#00ff00">
{(selectedColor, updateSelectedColor) => {