import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState } from 'react';
import markdown from './README.mdx';
import RadioButton from '.';
import InputGroup from '../InputGroup';
export default {
  title: 'Components/Forms/RadioButton',
  component: RadioButton,
  parameters: {
    componentSubtitle: 'RadioButton',
    status: 'released',
    mdx: markdown
  }
};
export var Regular = function Regular(args) {
  return /*#__PURE__*/React.createElement(RadioButton, args);
};
Regular.args = {
  labelText: 'Radio button',
  value: 'radio0',
  name: 'radio0'
};
var description = "\nYou can customize the content by using `BannerNavigation`.\n";
Regular.story = {
  parameters: {
    docs: {
      storyDescription: description
    }
  }
};
export var VerticalGrouping = function VerticalGrouping(args) {
  var _useState = useState('female'),
      _useState2 = _slicedToArray(_useState, 2),
      gender = _useState2[0],
      setgender = _useState2[1];

  var handleOnchange = function handleOnchange(e) {
    setgender(e.target.value);
    console.log('eg', e.target.value);
  };

  return /*#__PURE__*/React.createElement(InputGroup, {
    name: "input-group",
    helperText: "select one",
    labelText: "Please select your gender",
    vertical: true
  }, /*#__PURE__*/React.createElement(RadioButton, _extends({}, args, {
    value: "female",
    id: "female",
    labelText: "Female",
    name: "gender",
    onChange: handleOnchange
  })), /*#__PURE__*/React.createElement(RadioButton, _extends({}, args, {
    value: "male",
    labelText: "Male",
    id: "male",
    name: "gender",
    onChange: handleOnchange
  })), /*#__PURE__*/React.createElement(RadioButton, _extends({}, args, {
    value: "other",
    labelText: "Other",
    id: "other",
    name: "gender",
    onChange: handleOnchange
  })));
};
export var HorizontalGrouping = function HorizontalGrouping(args) {
  return /*#__PURE__*/React.createElement(InputGroup, {
    name: "input-group",
    helperText: "select one",
    labelText: "Please select your age range"
  }, /*#__PURE__*/React.createElement(RadioButton, {
    name: "radiob",
    value: "standard",
    id: "radiob-1",
    labelText: "Below 20"
  }), /*#__PURE__*/React.createElement(RadioButton, {
    name: "radiob",
    value: "default-selected",
    id: "radiob-2",
    labelText: "20-50"
  }), /*#__PURE__*/React.createElement(RadioButton, {
    name: "radiob",
    value: "disabled",
    id: "radiob-3",
    labelText: "Above 50"
  }));
};