import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import InputGroup from '.';
import markdown from './README.mdx';
import RadioButton from '../RadioButton';
import Checkbox from '../Checkbox';
export default {
  title: 'Components/Forms/InputGroup',
  component: InputGroup,
  parameters: {
    componentSubtitle: 'Component',
    mdx: markdown
  }
};
export var Regular = function Regular(args) {
  return /*#__PURE__*/React.createElement(InputGroup, _extends({
    defaultSelected: "default-selected",
    labelText: "Group labelText",
    helperText: "Helper text"
  }, args), /*#__PURE__*/React.createElement(RadioButton, {
    name: "radio",
    value: "standard",
    id: "radio-1",
    labelText: "Radio button label 1"
  }), /*#__PURE__*/React.createElement(RadioButton, {
    name: "radio",
    value: "default-selected",
    id: "radio-2",
    labelText: "Radio button label 2"
  }), /*#__PURE__*/React.createElement(RadioButton, {
    name: "radio",
    value: "disabled",
    id: "radio-3",
    labelText: "Radio 1"
  }));
};
export var withCheckbox = function withCheckbox(args) {
  return /*#__PURE__*/React.createElement(InputGroup, _extends({
    defaultSelected: "default-selected",
    labelText: "Group labelText",
    helperText: "Helper text"
  }, args), /*#__PURE__*/React.createElement(Checkbox, {
    name: "checkbox-1",
    value: "standard",
    labelText: "Checkbox label 1"
  }), /*#__PURE__*/React.createElement(Checkbox, {
    name: "checkbox-2",
    value: "default-selected",
    labelText: "Checkbox label 2"
  }), /*#__PURE__*/React.createElement(Checkbox, {
    name: "checkbox-3",
    value: "disabled",
    labelText: "Checkbox label 3"
  }));
};
withCheckbox.story = {
  parameters: {
    docs: {
      storyDescription: 'The InputGroup can be used with checkboxes'
    }
  }
};
export var vertical = function vertical(args) {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputGroup, _extends({
    defaultSelected: "default-selected",
    labelText: "Group labelText",
    helperText: "Helper text",
    vertical: true
  }, args), /*#__PURE__*/React.createElement(Checkbox, {
    name: "checkboxb-1",
    value: "standard",
    labelText: "Checkbox label 1"
  }), /*#__PURE__*/React.createElement(Checkbox, {
    name: "checkboxb-2",
    value: "default-selected",
    labelText: "Checkbox label 2"
  }), /*#__PURE__*/React.createElement(Checkbox, {
    name: "checkboxb-3",
    value: "disabled",
    labelText: "Checkbox label 3"
  })), /*#__PURE__*/React.createElement(InputGroup, _extends({
    defaultSelected: "default-selected",
    legend: "Group Legend",
    vertical: true
  }, args), /*#__PURE__*/React.createElement(RadioButton, {
    name: "radiob",
    value: "standard",
    id: "radiob-1",
    labelText: "Radio button label 1"
  }), /*#__PURE__*/React.createElement(RadioButton, {
    name: "radiob",
    value: "default-selected",
    id: "radiob-2",
    labelText: "Radio button label 2"
  }), /*#__PURE__*/React.createElement(RadioButton, {
    name: "radiob",
    value: "disabled",
    id: "radiob-3",
    labelText: "Radio 1"
  })));
};
vertical.story = {
  parameters: {
    docs: {
      storyDescription: 'Use the vertical alignment if the elements do not have enough horizontal space. Avoid wrapping InputGroupss'
    }
  }
};