@storybook/addon-knobs#radios TypeScript Examples

The following examples show how to use @storybook/addon-knobs#radios. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Radio.stories.tsx    From chroma-react with MIT License 6 votes vote down vote up 
getPropOptions = (): RadioGroupProps => {
  return {
    align: radios<'center' | 'flex-start'>(
      'align',
      {
        center: 'center',
        flexStart: 'flex-start',
      },
      'flex-start'
    ),
    direction: radios<'column' | 'row'>(
      'direction',
      {
        column: 'column',
        row: 'row',
      },
      'column'
    ),
    justify: radios<'center' | 'flex-start' | 'space-between' | 'space-evenly'>(
      'justify',
      {
        center: 'center',
        flexStart: 'flex-start',
        spaceBetween: 'space-between',
        spaceEvenly: 'space-evenly',
      },
      'flex-start'
    ),
  };
}
Example #2
Source File: Radio.stories.tsx    From chroma-react with MIT License 6 votes vote down vote up 
getMinimalPropOptions = (): RadioGroupMinimalProps => {
  return {
    background: boolean('background', true),
    direction: radios<'column' | 'row'>(
      'direction',
      {
        column: 'column',
        row: 'row',
      },
      'row'
    ),
    fullWidth: boolean('fullWidth', false),
  };
}
Example #3
Source File: Snackbar.stories.tsx    From chroma-react with MIT License 6 votes vote down vote up 
getPropOptions = (): SnackbarProps => {
  return {
    statusType: radios<'success' | 'info' | 'warning' | 'error'>(
      'statusType',
      {
        success: 'success',
        info: 'info',
        warning: 'warning',
        error: 'error',
      },
      'success'
    ),
    allowDismiss: boolean('allowDismiss', false),
  };
}
Example #4
Source File: Button.stories.tsx    From Insomniac-NextJS-boilerplate with MIT License 6 votes vote down vote up 
Default = () => (
  <Button
    active={boolean('Active', false)}
    modifier={radios('Different buttons', variant, 'outlined') as positionAll}
    disabled={boolean('Disabled', false)}
    loading={boolean('Loading', false)}
    onClick={action('onClick')}
  >
    {text('Text', 'Hello Button')}
  </Button>
)
Example #5
Source File: lang.tsx    From docs-components with MIT License 6 votes vote down vote up 
export default function getLangControl() {
    const label = 'Language';
    const options = {
        ru: Lang.Ru,
        en: Lang.En,
    };
    const defaultValue = Lang.Ru;

    return radios(label, options, defaultValue);
}
Example #6
Source File: settings.tsx    From docs-components with MIT License 6 votes vote down vote up 
export function getIsMobile() {
    const label = 'Mobile version';
    const options = {
        enabled: 'true',
        disabled: 'false',
    };
    const defaultValue = 'false';

    return radios(label, options, defaultValue);
}
Example #7
Source File: vcs.tsx    From docs-components with MIT License 6 votes vote down vote up 
export default function getVcsControl() {
    const label = 'VCS';
    const options = {
        github: Vcs.Github,
        arcanum: Vcs.Arcanum,
    };
    const defaultValue = Vcs.Github;

    return radios(label, options, defaultValue);
}
Example #8
Source File: bookmark.tsx    From docs-components with MIT License 6 votes vote down vote up 
export function getIsBookmarked() {
    const label = 'Bookmark page';
    const options = {
        enabled: 'true',
        disabled: 'false',
    };
    const defaultValue = 'false';

    return radios(label, options, defaultValue);
}
Example #9
Source File: withTheme.tsx    From docs-components with MIT License 6 votes vote down vote up 
export function getThemeSelector() {
    const label = 'Theme';
    const options = {
        Light: Theme.Light,
        Dark: Theme.Dark,
    };
    const defaultValue = Theme.Dark;

    return radios(label, options, defaultValue);
}