function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import React, { useState } from 'react';
import { actions } from '@storybook/addon-actions';
import { Box, Flexbox, FormField, Input, Modal, Typography } from '../../..';
import { Display } from '../../../common/Display';
import { Shape } from './Checkbox.shape';
var handlers = actions('onBlur', 'onClick', 'onFocus', 'onKeyDown', 'onKeyUp', 'onKeyPress', 'onChange');
export default {
  title: 'Molecules / Input / Checkbox',
  parameters: {
    component: Input.Checkbox
  }
};
export var DefaultStory = {
  render: function render() {
    return React.createElement(Input.Checkbox, {
      name: "example",
      value: "green",
      label: "Green"
    });
  },
  name: 'Default'
};
export var CircleStory = {
  render: function render() {
    return React.createElement(Input.Checkbox, {
      name: "example",
      value: "green",
      label: "Green",
      shape: Shape.Circle
    });
  },
  name: 'Circle'
};
export var DefaultStoryWithTooltip = {
  render: function render() {
    return React.createElement(Input.Checkbox, {
      name: "example",
      value: "green",
      label: "Green",
      labelTooltip: "Checkbox tooltip"
    });
  },
  name: 'Default with tooltip'
};
export var DefaultStoryWithTooltipPositionTop = function DefaultStoryWithTooltipPositionTop() {
  return React.createElement(React.Fragment, null, React.createElement("br", null), React.createElement("br", null), React.createElement(Input.Checkbox, {
    name: "example",
    value: "green",
    label: "Green",
    labelTooltip: "Checkbox tooltip",
    labelTooltipPosition: "top"
  }));
};
export var DefaultStoryWithTooltipParagraph = {
  render: function render() {
    return React.createElement(Input.Checkbox, {
      name: "example",
      value: "green",
      label: "Quisque varius massa ut augue convallis, ac vehicula orci aliquet. Mauris consequat pretium tempus. Morbi sagittis facilisis pellentesque. Maecenas sodales neque nec sapien suscipit tempus. Quisque elementum auctor urna, nec laoreet nibh vehicula et.",
      labelTooltip: "Checkbox tooltip"
    });
  },
  name: 'Default with tooltip with a long paragraph'
};
export var DefaultStoryWithTooltipPositionTopParagraph = {
  render: function render() {
    return React.createElement(React.Fragment, null, React.createElement("br", null), React.createElement(Input.Checkbox, {
      name: "example",
      value: "green",
      label: "Quisque varius massa ut augue convallis, ac vehicula orci aliquet. Mauris consequat pretium tempus. Morbi sagittis facilisis pellentesque. Maecenas sodales neque nec sapien suscipit tempus. Quisque elementum auctor urna, nec laoreet nibh vehicula et.",
      labelTooltip: "Checkbox tooltip",
      labelTooltipPosition: "top"
    }));
  },
  name: 'Default with tooltip (position top) with a long paragraph'
};
export var WithDefaultChecked = {
  render: function render() {
    return React.createElement(Input.Checkbox, {
      name: "example",
      value: "green",
      label: "Green",
      defaultChecked: true
    });
  },
  name: 'With default checked'
};
export var WithCheckedControlledBehaviour = {
  render: function render() {
    var Component = function Component() {
      var _useState = useState(false),
        _useState2 = _slicedToArray(_useState, 2),
        checked = _useState2[0],
        setChecked = _useState2[1];
      var toggleCheckbox = function toggleCheckbox() {
        return setChecked(!checked);
      };
      return React.createElement(React.Fragment, null, React.createElement(Input.Checkbox, {
        name: "example",
        value: "green",
        label: "Green",
        checked: checked,
        onChange: toggleCheckbox
      }), React.createElement("button", {
        type: "button",
        onClick: toggleCheckbox
      }, "Toggle Checkbox"));
    };
    return React.createElement(Component, null);
  },
  name: 'With checked (Controlled behaviour)'
};
export var RequiredStory = {
  render: function render() {
    return React.createElement(Display, {
      title: "Required",
      items: [{
        component: React.createElement(Input.Checkbox, {
          name: "example",
          value: "green",
          label: "Green",
          required: true
        }),
        title: 'Default (without star)'
      }, {
        component: React.createElement(Input.Checkbox, {
          name: "example",
          value: "green",
          label: "Green",
          required: true,
          visuallyEmphasiseRequired: true
        }),
        title: 'With star'
      }]
    });
  },
  name: 'Required'
};
export var WithAnErrorIfNotChecked = {
  render: function render() {
    var Component = function Component() {
      var _useState3 = useState(false),
        _useState4 = _slicedToArray(_useState3, 2),
        checked = _useState4[0],
        setChecked = _useState4[1];
      var toggleCheckbox = function toggleCheckbox() {
        return setChecked(!checked);
      };
      return React.createElement(Input.Checkbox, _extends({
        name: "example",
        value: "green",
        label: "Green",
        required: true,
        onChange: toggleCheckbox
      }, !checked ? {
        error: 'This field is required'
      } : {}));
    };
    return React.createElement(Component, null);
  },
  name: 'With an error if not checked'
};
export var InAGroup = {
  render: function render() {
    return React.createElement(FormField, {
      label: "Colors",
      group: true
    }, React.createElement(Flexbox, {
      container: true,
      gap: 5
    }, React.createElement(Input.Checkbox, {
      name: "example",
      value: "green",
      label: "Green"
    }), React.createElement(Input.Checkbox, {
      name: "example",
      value: "blue",
      label: "Blue"
    }), React.createElement(Input.Checkbox, {
      name: "example",
      value: "yellow",
      label: "Yellow"
    })));
  },
  name: 'In a group'
};
export var InAGroupWithTooltip = {
  render: function render() {
    return React.createElement(FormField, {
      label: "Colors",
      labelTooltip: "Checkboxgroup tooltip",
      group: true
    }, React.createElement(Flexbox, {
      container: true,
      gap: 5
    }, React.createElement(Input.Checkbox, {
      name: "example",
      value: "green",
      label: "Green"
    }), React.createElement(Input.Checkbox, {
      name: "example",
      value: "blue",
      label: "Blue"
    }), React.createElement(Input.Checkbox, {
      name: "example",
      value: "yellow",
      label: "Yellow"
    })));
  },
  name: 'In a group with a label tooltip'
};
export var InAGroupWithTooltipPositionTop = {
  render: function render() {
    return React.createElement(React.Fragment, null, React.createElement("br", null), React.createElement("br", null), React.createElement(FormField, {
      label: "Colors",
      labelTooltip: "Checkboxgroup tooltip",
      labelTooltipPosition: "top",
      group: true
    }, React.createElement(Flexbox, {
      container: true,
      gap: 5
    }, React.createElement(Input.Checkbox, {
      name: "example",
      value: "green",
      label: "Green"
    }), React.createElement(Input.Checkbox, {
      name: "example",
      value: "blue",
      label: "Blue"
    }), React.createElement(Input.Checkbox, {
      name: "example",
      value: "yellow",
      label: "Yellow"
    }))));
  },
  name: 'In a group with a label tooltip (position top)'
};
export var InAGroupWithError = {
  render: function render() {
    var Component = function Component() {
      var _useState5 = useState(false),
        _useState6 = _slicedToArray(_useState5, 2),
        oneChecked = _useState6[0],
        setOneChecked = _useState6[1];
      var _useState7 = useState(false),
        _useState8 = _slicedToArray(_useState7, 2),
        twoChecked = _useState8[0],
        setTwoChecked = _useState8[1];
      var _useState9 = useState(false),
        _useState10 = _slicedToArray(_useState9, 2),
        threeChecked = _useState10[0],
        setThreeChecked = _useState10[1];
      var hasGroupError = !oneChecked && !twoChecked && !threeChecked;
      return React.createElement(FormField, _extends({
        label: "Colors",
        group: true
      }, hasGroupError ? {
        error: 'This field is required'
      } : {}), React.createElement(Flexbox, {
        container: true,
        gap: 5
      }, React.createElement(Input.Checkbox, {
        name: "example",
        value: "green",
        label: "Green",
        hasError: hasGroupError,
        onChange: function onChange() {
          return setOneChecked(!oneChecked);
        },
        required: true
      }), React.createElement(Input.Checkbox, {
        name: "example",
        value: "blue",
        label: "Blue",
        hasError: hasGroupError,
        onChange: function onChange() {
          return setTwoChecked(!twoChecked);
        },
        required: true
      }), React.createElement(Input.Checkbox, {
        name: "example",
        value: "yellow",
        label: "Yellow",
        hasError: hasGroupError,
        onChange: function onChange() {
          return setThreeChecked(!threeChecked);
        },
        required: true
      })));
    };
    return React.createElement(Component, null);
  },
  name: 'In a group with error'
};
export var DisabledStory = {
  render: function render() {
    return React.createElement(Display, {
      title: "Disabled",
      items: [{
        component: React.createElement(Input.Checkbox, {
          name: "example",
          value: "green",
          label: "Green",
          defaultChecked: true,
          disabled: true
        }),
        title: 'Checked'
      }, {
        component: React.createElement(Input.Checkbox, {
          name: "example",
          value: "blue",
          label: "Blue",
          disabled: true
        }),
        title: 'Not Checked'
      }, {
        component: React.createElement(Input.Checkbox, {
          name: "example",
          value: "red",
          label: "Red"
        }),
        title: 'Not Disabled'
      }]
    });
  },
  name: 'Disabled'
};
export var WithAutoFocus = {
  render: function render() {
    return React.createElement(Input.Checkbox, {
      name: "example",
      value: "green",
      label: "Green",
      autoFocus: true
    });
  },
  name: 'With auto focus'
};
export var WithAllActions = {
  render: function render() {
    return React.createElement(Input.Checkbox, _extends({
      name: "example6",
      value: "green",
      label: "Green"
    }, handlers));
  },
  name: 'With all actions'
};
export var ElementLabelStory = {
  render: function render() {
    var label = React.createElement(React.Fragment, null, React.createElement(Typography, {
      type: "secondary",
      weight: "bold"
    }, "The first part is bold,"), ' ', React.createElement(Typography, {
      type: "secondary",
      weight: "regular"
    }, "the second part is regular"));
    return React.createElement(Input.Checkbox, {
      name: "example",
      value: "element",
      label: label
    });
  },
  name: 'Element as label'
};
export var WithDifferentSizes = {
  render: function render() {
    return React.createElement(Flexbox, {
      container: true,
      direction: "column",
      gap: 1
    }, React.createElement(Input.Checkbox, {
      name: "small",
      value: "1",
      size: "s",
      label: "small"
    }), React.createElement(Input.Checkbox, {
      name: "medium",
      value: "2",
      label: "medium"
    }), React.createElement(Input.Checkbox, {
      name: "default",
      value: "3",
      label: "default"
    }));
  },
  name: 'Checkboxes with different size'
};
export var OnAColouredBackground = {
  render: function render() {
    return React.createElement(Box, {
      p: 5,
      backgroundColor: function backgroundColor(t) {
        return t.color.disabledBackground;
      }
    }, React.createElement(Input.Checkbox, {
      name: "background",
      value: "background",
      label: "On a colored background"
    }));
  },
  name: 'On a coloured background'
};
export var WithLabelTooltipInsideModal = {
  render: function render() {
    var Example = function Example() {
      var _useState11 = useState(true),
        _useState12 = _slicedToArray(_useState11, 2),
        open = _useState12[0],
        setOpen = _useState12[1];
      var onOpen = function onOpen() {
        setOpen(true);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      return React.createElement(React.Fragment, null, React.createElement("button", {
        type: "button",
        onClick: onOpen
      }, "Open modal"), React.createElement(Modal, {
        onClose: onClose,
        title: "Dialog information",
        open: open
      }, React.createElement(Box, {
        mb: 2
      }, React.createElement(Input.Checkbox, {
        label: "Label",
        name: "foo",
        value: "bar",
        labelTooltipInModal: true,
        labelTooltip: "Tooltip content"
      }))));
    };
    return React.createElement(Example, null);
  },
  name: 'With label tooltip inside modal'
};