diff --git a/types/storybook__addon-knobs/index.d.ts b/types/storybook__addon-knobs/index.d.ts index b4402c0196..6d8adee45e 100644 --- a/types/storybook__addon-knobs/index.d.ts +++ b/types/storybook__addon-knobs/index.d.ts @@ -85,6 +85,15 @@ export function optionsKnob( options?: OptionsKnobOptions ): T; +export function optionsKnob( + label: string, + values: { + [key: string]: T; + }, + defaultValue?: T[], + options?: OptionsKnobOptions +): T[]; + export interface WrapStoryProps { context?: object; storyFn?: RenderFunction; diff --git a/types/storybook__addon-knobs/storybook__addon-knobs-tests.tsx b/types/storybook__addon-knobs/storybook__addon-knobs-tests.tsx index 821d4677fc..b33efcc113 100644 --- a/types/storybook__addon-knobs/storybook__addon-knobs-tests.tsx +++ b/types/storybook__addon-knobs/storybook__addon-knobs-tests.tsx @@ -15,6 +15,7 @@ import { button, knob, radios, + optionsKnob as options, } from '@storybook/addon-knobs'; enum SomeEnum { @@ -132,3 +133,19 @@ select('label', { option: 'Option' }, null, groupId); files('label', 'image/*', []); date('label', new Date(), groupId); button('label', () => undefined, groupId); + +// optionsKnob +type Tool = 'hammer' | 'saw' | 'drill'; +const visibleToolOptions: { [key: string]: Tool } = { hammer: 'hammer', saw: 'saw', drill: 'drill' }; + +// test selecting one option +const defaultVisibleTool = 'hammer'; +const singleSelection: Tool = options('visibleTools', visibleToolOptions, defaultVisibleTool, { + display: 'check', +}); + +// test selecting multiple options +const defaultVisibleTools: Tool[] = ['hammer']; +const multiSelection: Tool[] = options('visibleTools', visibleToolOptions, defaultVisibleTools, { + display: 'check', +});