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

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