@eureca/eureca-ui/src/components/Radio/stories/radio.stories.js

UI component library of Eureca's user and admin apps

import React, { useState } from 'react';
import { withKnobs, select, boolean } from '@storybook/addon-knobs';
import { RadioGroup, Typography } from '@material-ui/core/';

import Theme from '../../../theme/mui';

import { Flex } from '../../Flex';
import { Radio } from '../';

const largeText = (
  <Flex mt={1}>
    <Typography variant="subtitle2" style={{ fontWeight: Theme.typography.fontWeightBold }}>
      Lorem Ipsum
    </Typography>
    <Typography variant="subtitle2">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In euismod sollicitudin faucibus.
      Vestibulum quis tincidunt magna. Etiam blandit vulputate quam, quis posuere lorem dapibus et.
    </Typography>
  </Flex>
);

const textOptions = {
  Default: 'default',
  Paragraph: 'large',
};

const textTypes = {
  default: 'Clickable Label',
  large: largeText,
};

export default { title: 'Material/Radio', decorators: [withKnobs], includeStories: [] };

export function RadioComponent() {
  const [value, setValue] = useState(1);

  const text = select('Text', textOptions, 'default');
  const disabled = boolean('Disabled');

  const handleChange = event => {
    setValue(event.target.value);
  };

  return (
    <RadioGroup aria-label="test" name="test-group" value={value} onChange={handleChange}>
      <Radio
        name="option-1"
        label={textTypes[text]}
        value="1"
        disabled={disabled}
        onChange={v => console.log('Checkbox Value: ', v)}
      />
      <Radio
        name="option-2"
        label={textTypes[text]}
        value="2"
        disabled={disabled}
        onChange={v => console.log('Checkbox Value: ', v)}
      />
      <Radio
        name="option-3"
        label={textTypes[text]}
        value="3"
        disabled={disabled}
        onChange={v => console.log('Checkbox Value: ', v)}
      />
    </RadioGroup>
  );
}