flipper-ui 0.25.0 → 0.25.1

package/stories/InputBase.stories.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _InputBase = _interopRequireDefault(require("../core/InputBase"));
+
+var _default = {
+  title: 'InputBase',
+  component: _InputBase["default"],
+  argTypes: {
+    placeholder: {
+      control: 'text'
+    },
+    value: {
+      control: 'text'
+    },
+    fullWidth: {
+      control: 'boolean'
+    },
+    autoComplete: {
+      control: 'text'
+    },
+    autoFocus: {
+      control: 'boolean'
+    },
+    error: {
+      control: 'boolean'
+    },
+    inputProps: {
+      control: 'object'
+    },
+    readonly: {
+      control: 'boolean'
+    }
+  }
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_InputBase["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  placeholder: 'InputBase'
+};

package/stories/Line.stories.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LineWithWidthProp = exports.Primary = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Line = _interopRequireDefault(require("../core/Line"));
+
+var _default = {
+  title: 'Line',
+  component: _Line["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Line["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+var Primary = Template.bind({});
+exports.Primary = Primary;
+Primary.args = {
+  primary: true
+};
+var LineWithWidthProp = Template.bind({});
+exports.LineWithWidthProp = LineWithWidthProp;
+LineWithWidthProp.args = {
+  width: '100%'
+};

package/stories/List.stories.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithAvatar = exports.WithIcons = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _List = _interopRequireDefault(require("../core/List"));
+
+var _ListItem = _interopRequireDefault(require("../core/ListItem"));
+
+var _Backup = _interopRequireDefault(require("@material-ui/icons/Backup"));
+
+var _Avatar = _interopRequireDefault(require("../core/Avatar"));
+
+var _default = {
+  title: 'List',
+  component: _List["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_List["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  title: 'My beautiful list"',
+  children: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    title: "Item 1"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    title: "Item 2"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    title: "Item 3"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    title: "Item 4"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    title: "Item 5"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    title: "Item 6"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    selected: true,
+    title: "Item 7"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    title: "Item 8"
+  }))
+};
+var WithIcons = Template.bind({});
+exports.WithIcons = WithIcons;
+WithIcons.args = {
+  title: 'My beautiful list"',
+  children: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Item 1"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Item 2"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Item 3"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Item 4"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Item 5"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Item 6"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Item 7"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Item 8"
+  }))
+};
+var WithAvatar = Template.bind({});
+exports.WithAvatar = WithAvatar;
+WithAvatar.args = {
+  title: 'My beautiful list"',
+  children: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    avatar: /*#__PURE__*/_react["default"].createElement(_Avatar["default"], null, "1"),
+    title: "Person 1"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    avatar: /*#__PURE__*/_react["default"].createElement(_Avatar["default"], null, "2"),
+    title: "Person 2"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    avatar: /*#__PURE__*/_react["default"].createElement(_Avatar["default"], null, "3"),
+    title: "Person 3"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    avatar: /*#__PURE__*/_react["default"].createElement(_Avatar["default"], null, "4"),
+    title: "Person 4"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    avatar: /*#__PURE__*/_react["default"].createElement(_Avatar["default"], null, "5"),
+    title: "Person 5"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    avatar: /*#__PURE__*/_react["default"].createElement(_Avatar["default"], null, "6"),
+    title: "Person 6"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    avatar: /*#__PURE__*/_react["default"].createElement(_Avatar["default"], null, "7"),
+    title: "Person 7"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    avatar: /*#__PURE__*/_react["default"].createElement(_Avatar["default"], null, "8"),
+    title: "Person 8"
+  }))
+};

package/stories/MaskField.stories.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MaskFieldWithInputAdornment = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _InputAdornment = _interopRequireDefault(require("../core/InputAdornment"));
+
+var _MaskField = _interopRequireDefault(require("../core/MaskField"));
+
+var _default = {
+  title: 'MaskField',
+  component: _MaskField["default"],
+  argTypes: {
+    helperText: {
+      control: 'text'
+    },
+    value: {
+      control: 'text' || 'number'
+    }
+  }
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_MaskField["default"], args);
+};
+
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_MaskField["default"], {
+    placeholder: "Description"
+  });
+};
+
+exports.Default = Default;
+var MaskFieldWithInputAdornment = Template.bind({});
+exports.MaskFieldWithInputAdornment = MaskFieldWithInputAdornment;
+MaskFieldWithInputAdornment.args = {
+  fixedDecimalScale: true,
+  decimalScale: 2,
+  label: 'Price',
+  decimalSeparator: ',',
+  thousandSeparator: '.',
+  InputProps: {
+    startAdornment: /*#__PURE__*/_react["default"].createElement(_InputAdornment["default"], {
+      position: "start"
+    }, "$")
+  },
+  InputLabelProps: {
+    shrink: true
+  },
+  children: /*#__PURE__*/_react["default"].createElement(_MaskField["default"], null)
+};

package/stories/Menu.stories.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Menu = _interopRequireDefault(require("../core/Menu"));
+
+var _Button = _interopRequireDefault(require("../core/Button"));
+
+var _ListItem = _interopRequireDefault(require("../core/ListItem"));
+
+var _Backup = _interopRequireDefault(require("@material-ui/icons/Backup"));
+
+var _default = {
+  title: 'Menu',
+  component: _Menu["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  function handleClick() {
+    setOpen(!open);
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    onClick: handleClick
+  }, "Menu"), /*#__PURE__*/_react["default"].createElement(_Menu["default"], (0, _extends2["default"])({}, args, {
+    open: open,
+    onClick: handleClick
+  })));
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  style: {
+    margin: '3em'
+  },
+  title: 'My beautiful Menu"',
+  children: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Menu 1"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Menu 2"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Menu 3"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Menu 4"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Menu 5"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Menu 6"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Menu 7"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Menu 8"
+  }))
+};

package/stories/Node.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Node = _interopRequireDefault(require("../core/Node"));
+
+var _default = {
+  title: 'Node',
+  component: _Node["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Node["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  id: '1',
+  name: 'Branch',
+  children: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Node["default"], {
+    id: "2",
+    name: "I am a Node 1"
+  }), /*#__PURE__*/_react["default"].createElement(_Node["default"], {
+    id: "3",
+    name: "I am a Node 2"
+  }), /*#__PURE__*/_react["default"].createElement(_Node["default"], {
+    id: "4",
+    name: "I am a Node 3"
+  }))
+};

package/stories/Pagination.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Pagination = _interopRequireDefault(require("../core/Pagination"));
+
+var _default = {
+  title: 'Pagination',
+  component: _Pagination["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Pagination["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  pages: 5,
+  active: 3,
+  onNext: function onNext() {
+    return alert('Next page');
+  },
+  onPrevious: function onPrevious() {
+    return alert('Previous page');
+  },
+  onNavigate: function onNavigate(page) {
+    return alert('You tried to navigate to page ' + page);
+  },
+  children: 'Pagination'
+};

package/stories/Paper.stories.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MaxEletavion = exports.Elevated = exports.NoElevated = exports.Square = exports.Default = exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Paper = _interopRequireDefault(require("../core/Paper"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var _default = {
+  title: 'Paper',
+  component: _Paper["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Paper["default"], args);
+};
+
+var defaultArgs = {
+  padding: 24,
+  margin: 24
+};
+
+var argsWithChildren = _objectSpread(_objectSpread({}, defaultArgs), {}, {
+  children: 'I am a Paper.'
+});
+
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_Paper["default"], {
+    style: _objectSpread({}, defaultArgs)
+  }, "I am a Paper.");
+};
+
+exports.Default = Default;
+var Square = Template.bind({});
+exports.Square = Square;
+Square.args = _objectSpread(_objectSpread({}, argsWithChildren), {}, {
+  square: true
+});
+var NoElevated = Template.bind({});
+exports.NoElevated = NoElevated;
+NoElevated.args = _objectSpread(_objectSpread({}, argsWithChildren), {}, {
+  elevation: 0
+});
+var Elevated = Template.bind({});
+exports.Elevated = Elevated;
+Elevated.args = _objectSpread(_objectSpread({}, argsWithChildren), {}, {
+  elevation: 12
+});
+var MaxEletavion = Template.bind({});
+exports.MaxEletavion = MaxEletavion;
+MaxEletavion.args = _objectSpread(_objectSpread({}, argsWithChildren), {}, {
+  elevation: 24
+});

package/stories/Progress.stories.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinearQuerySecondary = exports.LinearQuery = exports.LinearBuffer = exports.LinearSecondary = exports.Linear = exports.Inherit = exports.Secondary = exports.Primary = exports.Default = exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Progress = _interopRequireDefault(require("../core/Progress"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var _default = {
+  title: 'Progress',
+  component: _Progress["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Progress["default"], args);
+};
+
+var commonArgs = {
+  margin: 24,
+  children: /*#__PURE__*/_react["default"].createElement(_Progress["default"], null)
+};
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = _objectSpread({}, commonArgs);
+var Primary = Template.bind({});
+exports.Primary = Primary;
+Primary.args = _objectSpread(_objectSpread({}, commonArgs), {}, {
+  size: 48,
+  color: 'primary'
+});
+var Secondary = Template.bind({});
+exports.Secondary = Secondary;
+Secondary.args = _objectSpread(_objectSpread({}, commonArgs), {}, {
+  size: 48,
+  color: 'secondary'
+});
+var Inherit = Template.bind({});
+exports.Inherit = Inherit;
+Inherit.args = _objectSpread(_objectSpread({}, commonArgs), {}, {
+  size: 96,
+  color: 'inherit'
+});
+var Linear = Template.bind({});
+exports.Linear = Linear;
+Linear.args = _objectSpread(_objectSpread({}, commonArgs), {}, {
+  linear: true
+});
+var LinearSecondary = Template.bind({});
+exports.LinearSecondary = LinearSecondary;
+LinearSecondary.args = _objectSpread(_objectSpread({}, commonArgs), {}, {
+  linear: true,
+  color: 'secondary'
+});
+var LinearBuffer = Template.bind({});
+exports.LinearBuffer = LinearBuffer;
+LinearBuffer.args = _objectSpread(_objectSpread({}, commonArgs), {}, {
+  variant: 'buffer',
+  valueBuffer: 75,
+  value: 50,
+  linear: true
+});
+var LinearQuery = Template.bind({});
+exports.LinearQuery = LinearQuery;
+LinearQuery.args = _objectSpread(_objectSpread({}, commonArgs), {}, {
+  variant: 'query',
+  linear: true
+});
+var LinearQuerySecondary = Template.bind({});
+exports.LinearQuerySecondary = LinearQuerySecondary;
+LinearQuerySecondary.args = _objectSpread(_objectSpread({}, commonArgs), {}, {
+  color: 'secondary',
+  variant: 'query',
+  linear: true
+});

package/stories/Radio.stories.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PrimaryChecked = exports.Primary = exports.Checked = exports.Default = exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Radio = _interopRequireDefault(require("../core/Radio"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var _default = {
+  title: 'Radio',
+  component: _Radio["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Radio["default"], args);
+};
+
+var commonArgs = {
+  value: 'first',
+  children: /*#__PURE__*/_react["default"].createElement(_Radio["default"], null)
+};
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = _objectSpread({}, commonArgs);
+var Checked = Template.bind({});
+exports.Checked = Checked;
+Checked.args = _objectSpread(_objectSpread({}, commonArgs), {}, {
+  checked: true
+});
+var Primary = Template.bind({});
+exports.Primary = Primary;
+Primary.args = _objectSpread(_objectSpread({}, commonArgs), {}, {
+  color: 'primary'
+});
+var PrimaryChecked = Template.bind({});
+exports.PrimaryChecked = PrimaryChecked;
+PrimaryChecked.args = _objectSpread(_objectSpread({}, commonArgs), {}, {
+  color: 'primary',
+  checked: true
+});

package/stories/RadioGroup.stories.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _RadioGroup = _interopRequireDefault(require("../core/RadioGroup"));
+
+var _default = {
+  title: 'RadioGroup',
+  component: _RadioGroup["default"]
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  var _useState = (0, _react.useState)('first'),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      option = _useState2[0],
+      setOption = _useState2[1];
+
+  return /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    value: option,
+    title: "My options",
+    name: "options",
+    options: [{
+      label: 'First option',
+      value: 'first'
+    }, {
+      label: 'Second Option',
+      value: 'second'
+    }],
+    onChange: function onChange(event) {
+      return setOption(event.target.value);
+    }
+  });
+};
+
+exports.Default = Default;