diff --git a/types/storybook__addon-knobs/index.d.ts b/types/storybook__addon-knobs/index.d.ts index 8c3ddc35f8..7e96278069 100644 --- a/types/storybook__addon-knobs/index.d.ts +++ b/types/storybook__addon-knobs/index.d.ts @@ -11,7 +11,7 @@ import { RenderFunction } from '@storybook/react'; export interface KnobOption { value: T; - type: 'text' | 'boolean' | 'number' | 'color' | 'object' | 'select' | 'date'; + type: 'text' | 'boolean' | 'number' | 'color' | 'object' | 'select' | 'date' | 'radios'; } export interface StoryContext { @@ -47,6 +47,8 @@ export function color(name: string, value: string, groupId?: string): string; export function object(name: string, value: T, groupId?: string): T; +export function radios(name: string, options: { [s: string]: T }, value?: T, groupId?: string): string; + export type SelectValue = string | number; export function select(name: string, options: { [s: string]: string }, value: T, groupId?: string): T; export function select(name: string, options: { [s: number]: string }, value: T, groupId?: string): T; diff --git a/types/storybook__addon-knobs/storybook__addon-knobs-tests.tsx b/types/storybook__addon-knobs/storybook__addon-knobs-tests.tsx index 85155fc5c7..6f2a50c67c 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, selectV2, + radios, } from '@storybook/addon-knobs'; enum SomeEnum { @@ -35,6 +36,7 @@ stories.add('with all knobs', () => { const selectedColor = color('Color', 'black'); const favoriteNumber = number('Favorite Number', 42); const comfortTemp = number('Comfort Temp', 72, { range: true, min: 60, max: 90, step: 1 }); + const radioStation = radios('Favorite Radio Station', { 1100: "1100", 2200: "2200", 3300: "3300" }); const textDecoration = select('Decoration', { none: 'None', underline: 'Underline', @@ -78,6 +80,7 @@ stories.add('with all knobs', () => { I'm {name} and I was born on "{dob}"

My favorite number is {favoriteNumber}.

My most comfortable room temperature is {comfortTemp} degrees Fahrenheit.

+

My favorite radio station is: {radioStation}

); }); @@ -111,6 +114,7 @@ number('label', 1, {}, groupId); color('label', '#ffffff', groupId); object('label', {}, groupId); array('label', [], ',', groupId); +radios('label', {}, null, groupId); select('label', { option: 'Option' }, null, groupId); files('label', 'image/*', []); date('label', new Date(), groupId);