ValuePicker: refactors story from knobs to control (#33122)

* ValuePicker: refactors story from knobs to control

* fixes wrong type issue
This commit is contained in:
Uchechukwu Obasi 2021-04-19 15:45:28 +01:00 committed by GitHub
parent 13cb34bbca
commit f92b6518c5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 26 deletions

View File

@ -1,11 +1,11 @@
import React from 'react';
import { boolean, select, text } from '@storybook/addon-knobs';
import { ButtonVariant, ValuePicker } from '@grafana/ui';
import { Story } from '@storybook/react';
import { ValuePicker } from '@grafana/ui';
import { generateOptions } from '../Select/mockOptions';
import { getIconKnob } from '../../utils/storybook/knobs';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { ComponentSize } from '../../types/size';
import { getAvailableIcons } from '../../types';
import mdx from './ValuePicker.mdx';
import { ValuePickerProps } from './ValuePicker';
export default {
title: 'Pickers and Editors/ValuePicker',
@ -15,33 +15,42 @@ export default {
docs: {
page: mdx,
},
knobs: {
disabled: true,
},
controls: {
exclude: ['onChange', 'options'],
},
},
argTypes: {
variant: {
control: {
type: 'select',
options: ['primary', 'secondary', 'destructive', 'link'],
},
},
icon: {
control: {
type: 'select',
options: getAvailableIcons(),
},
},
},
};
const VISUAL_GROUP = 'Visual options';
const variants = ['primary', 'secondary', 'destructive', 'link'];
const sizes = ['sm', 'md', 'lg'];
const options = generateOptions();
export const simple = () => {
const label = text('Label', 'Pick an option', VISUAL_GROUP);
const variant = select('Variant', variants, 'primary', VISUAL_GROUP);
const size = select('Size', sizes, 'md', VISUAL_GROUP);
const isFullWidth = boolean('Is full width', false, VISUAL_GROUP);
const icon = getIconKnob();
const menuPlacement = select('Menu placement', ['auto', 'bottom', 'top'], 'auto', VISUAL_GROUP);
export const Simple: Story<ValuePickerProps<string>> = (args) => {
return (
<div style={{ width: '200px' }}>
<ValuePicker
options={options}
label={label}
onChange={(v) => console.log(v)}
variant={variant as ButtonVariant}
icon={icon}
isFullWidth={isFullWidth}
size={size as ComponentSize}
menuPlacement={menuPlacement}
/>
<ValuePicker {...args} options={options} onChange={(v) => console.log(v)} />
</div>
);
};
Simple.args = {
label: 'Pick an option',
variant: 'primary',
size: 'md',
isFullWidth: false,
icon: 'plus',
menuPlacement: 'auto',
};

View File

@ -7,7 +7,7 @@ import { FullWidthButtonContainer } from '../Button/FullWidthButtonContainer';
import { ComponentSize } from '../../types/size';
import { selectors } from '@grafana/e2e-selectors';
interface ValuePickerProps<T> {
export interface ValuePickerProps<T> {
/** Label to display on the picker button */
label: string;
/** Icon to display on the picker button */