IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-12-30 10:47:30 -06:00
Code Issues Packages Projects Releases Wiki Activity

ButtonCascader: updates story from knobs to controls (#31288)

Browse Source 
* ButtonCascader: updates story from knobs to controls

* some nit fixes
This commit is contained in:
Uchechukwu Obasi 2021-02-18 13:52:09 +01:00 committed by GitHub
parent 7f8fb2b55f
commit 0e63dfafbe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.story.tsx
View File

@ -1,20 +1,23 @@
import React from 'react';
import { withKnobs, text, boolean, object, select } from '@storybook/addon-knobs';
import { Story } from '@storybook/react';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { ButtonCascader } from '@grafana/ui';
import { NOOP_CONTROL } from '@grafana/ui/.storybook/preview';
import { ButtonCascaderProps } from './ButtonCascader';
export default {
title: 'Forms/Cascader/ButtonCascader',
component: ButtonCascader,
decorators: [withKnobs, withCenteredStory],
};
const getKnobs = () => {
return {
disabled: boolean('Disabled', false),
text: text('Button Text', 'Click me!'),
icon: select('Icon', ['plus', 'minus', 'table'], 'plus'),
options: object('Options', [
decorators: [withCenteredStory],
parameters: {
knobs: {
disabled: true,
},
},
args: {
disabled: false,
children: 'Click me!',
options: [
{
label: 'A',
value: 'A',
@ -24,24 +27,24 @@ const getKnobs = () => {
],
},
{ label: 'D', value: 'D' },
]),
};
],
},
argTypes: {
icon: { control: { type: 'select', options: ['plus', 'minus', 'table'] } },
options: { control: 'object' },
className: NOOP_CONTROL,
value: NOOP_CONTROL,
fieldNames: NOOP_CONTROL,
},
};
export const simple = () => {
const { disabled, text, options } = getKnobs();
return (
<ButtonCascader disabled={disabled} options={options} value={['A']}>
{text}
</ButtonCascader>
);
const Template: Story<ButtonCascaderProps> = ({ children, ...args }) => {
return <ButtonCascader {...args}>{children}</ButtonCascader>;
};
export const withIcon = () => {
const { disabled, text, options, icon } = getKnobs();
return (
<ButtonCascader disabled={disabled} options={options} value={['A']} icon={icon}>
{text}
</ButtonCascader>
);
export const simple = Template.bind({});
export const withIcon = Template.bind({});
withIcon.args = {
icon: 'plus',
};