flipper-ui 0.25.0 → 0.25.3

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;

package/stories/Select.stories.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithClear = exports.Default = exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Select = _interopRequireDefault(require("../core/Select"));
+
+var _ListItem = _interopRequireDefault(require("../core/ListItem"));
+
+var _default = {
+  title: 'Select',
+  component: _Select["default"]
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  var _useState = (0, _react.useState)('3'),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      select = _useState2[0],
+      setSelect = _useState2[1];
+
+  function handleChange(event) {
+    setSelect(event.target.value);
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    value: select,
+    onChange: handleChange
+  }, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "0"
+  }, "Option 0"), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "1"
+  }, "Option 1"), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "2"
+  }, "Option 2"), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "3"
+  }, "Option 3"), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "4"
+  }, "Option 4"), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "5"
+  }, "Option 5"), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "6"
+  }, "Option 6"), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "7"
+  }, "Option 7"));
+};
+
+exports.Default = Default;
+
+var WithClear = function WithClear() {
+  var _useState3 = (0, _react.useState)('3'),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      select = _useState4[0],
+      setSelect = _useState4[1];
+
+  function handleChange(event) {
+    setSelect(event.target.value);
+  }
+
+  var handleClear = function handleClear() {
+    setSelect('');
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    hasClear: true,
+    onClear: handleClear,
+    value: select,
+    onChange: handleChange
+  }, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: ""
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "0"
+  }, "Option 0"), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "1"
+  }, "Option 1"), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "2"
+  }, "Option 2"), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "3"
+  }, "Option 3"), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "4"
+  }, "Option 4"), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "5"
+  }, "Option 5"), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "6"
+  }, "Option 6"), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "7"
+  }, "Option 7"));
+};
+
+exports.WithClear = WithClear;

package/stories/Sidebar.stories.js

@@ -0,0 +1,43 @@
+"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 _Sidebar = _interopRequireDefault(require("../core/Sidebar"));
+
+var _List = _interopRequireDefault(require("../core/List"));
+
+var _ListItem = _interopRequireDefault(require("../core/ListItem"));
+
+var _Backup = _interopRequireDefault(require("@material-ui/icons/Backup"));
+
+var _default = {
+  title: 'Sidebar',
+  component: _Sidebar["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Sidebar["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  title: 'My beautiful Sidebar"',
+  children: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_List["default"], null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null)
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null)
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null)
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null)
+  })))
+};

package/stories/Slide.stories.js

@@ -0,0 +1,62 @@
+"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 _Slide = _interopRequireDefault(require("../core/Slide"));
+
+var _Button = _interopRequireDefault(require("../core/Button"));
+
+var _default = {
+  title: 'Slide',
+  component: _Slide["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  var _useState = (0, _react.useState)(true),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var _useState3 = (0, _react.useState)('Close'),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      btnLabel = _useState4[0],
+      setBtnLabel = _useState4[1];
+
+  function handleClick() {
+    setOpen(!open);
+    btnLabel === 'Close' ? setBtnLabel('Open') : setBtnLabel('Close');
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    color: "primary",
+    variant: "contained",
+    style: {
+      marginRight: '3em'
+    },
+    onClick: handleClick
+  }, btnLabel), /*#__PURE__*/_react["default"].createElement(_Slide["default"], (0, _extends2["default"])({}, args, {
+    "in": open
+  })));
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  direction: 'left',
+  timeout: 300,
+  children: /*#__PURE__*/_react["default"].createElement("span", null, "Im not open for discussions.")
+};

package/stories/Slider.stories.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithMarks = exports.FixedLabel = exports.Ranged = exports.Secondary = exports.Primary = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Slider = _interopRequireDefault(require("../core/Slider"));
+
+var _default = {
+  title: 'Slider',
+  component: _Slider["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Slider["default"], args);
+};
+
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_Slider["default"], null);
+};
+
+exports.Default = Default;
+var Primary = Template.bind({});
+exports.Primary = Primary;
+Primary.args = {
+  children: 'Slider'
+};
+var Secondary = Template.bind({});
+exports.Secondary = Secondary;
+Secondary.args = {
+  color: 'secondary',
+  children: 'Slider'
+};
+var Ranged = Template.bind({});
+exports.Ranged = Ranged;
+Ranged.args = {
+  value: [20, 50],
+  children: 'Slider'
+};
+var FixedLabel = Template.bind({});
+exports.FixedLabel = FixedLabel;
+FixedLabel.args = {
+  valueLabelDisplay: 'on',
+  value: [20, 50],
+  children: 'Slider'
+};
+var WithMarks = Template.bind({});
+exports.WithMarks = WithMarks;
+WithMarks.args = {
+  marks: [{
+    value: 0,
+    label: 'Start'
+  }, {
+    value: 50,
+    label: 'You\'re half way'
+  }, {
+    value: 100,
+    label: 'Finish'
+  }],
+  valueLabelDisplay: 'on',
+  value: [20, 75],
+  children: 'Slider'
+};

package/stories/Snackbar.stories.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Error = exports.Warning = exports.Success = 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 _Snackbar = _interopRequireDefault(require("../core/Snackbar"));
+
+var _Button = _interopRequireDefault(require("../core/Button"));
+
+var _default = {
+  title: 'Snackbar',
+  component: _Snackbar["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      btnState = _useState2[0],
+      setBtnState = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      open = _useState4[0],
+      setOpen = _useState4[1];
+
+  function handleClick() {
+    setOpen(!open);
+    setBtnState(true);
+  }
+
+  function handleClose() {
+    setOpen(!open);
+    setBtnState(false);
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    disabled: btnState,
+    style: {
+      marginRight: '3em'
+    },
+    variant: "contained",
+    color: "primary",
+    onClick: handleClick
+  }, "Open"), /*#__PURE__*/_react["default"].createElement(_Snackbar["default"], (0, _extends2["default"])({}, args, {
+    open: open,
+    onClose: handleClose
+  })));
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  anchorOrigin: {
+    horizontal: 'right',
+    vertical: 'bottom'
+  },
+  message: 'I give what I have got to give, I give what I need to live,\
+     I give what I have got to give, It is important if I wanna live!'
+};
+var Success = Template.bind({});
+exports.Success = Success;
+Success.args = {
+  variant: 'success',
+  message: 'In the town where I was born, Lived a man who sailed to sea',
+  children: 'Snackbar'
+};
+var Warning = Template.bind({});
+exports.Warning = Warning;
+Warning.args = {
+  variant: 'warning',
+  message: 'In the town where I was born, Lived a man who sailed to sea',
+  children: 'Snackbar'
+};
+var Error = Template.bind({});
+exports.Error = Error;
+Error.args = {
+  variant: 'error',
+  message: 'In the town where I was born, Lived a man who sailed to sea',
+  children: 'Snackbar'
+};
+/*
+export const WithLongDuration = Template.bind({})
+WithLongDuration.args = {
+    variant: 'info',
+    // transitionDuration: { enter: 0, exit: 200 },
+    message: 'In the town where I was born, Lived a man who sailed to sea',
+    children: 'Snackbar'
+}
+*/

package/stories/Stepper.stories.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithIcon = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Stepper = _interopRequireDefault(require("../core/Stepper"));
+
+var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));
+
+var _default = {
+  title: 'Stepper',
+  component: _Stepper["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Stepper["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  active: 2,
+  steps: ['Name', 'Email', 'Password', 'Photo', 'Be happy!'],
+  children: 'Stepper'
+};
+var WithIcon = Template.bind({});
+exports.WithIcon = WithIcon;
+WithIcon.args = {
+  bottomLabel: true,
+  active: 2,
+  steps: [{
+    label: 'Name',
+    icon: /*#__PURE__*/_react["default"].createElement(_Delete["default"], null)
+  }],
+  children: 'Stepper'
+};

package/stories/Table.stories.js

@@ -0,0 +1,32 @@
+"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 _Table = _interopRequireDefault(require("../core/Table"));
+
+var _TableHead = _interopRequireDefault(require("../core/TableHead"));
+
+var _TableBody = _interopRequireDefault(require("../core/TableBody"));
+
+var _TableRow = _interopRequireDefault(require("../core/TableRow"));
+
+var _TableCell = _interopRequireDefault(require("../core/TableCell"));
+
+var _default = {
+  title: 'Table',
+  component: _Table["default"]
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_Table["default"], null, /*#__PURE__*/_react["default"].createElement(_TableHead["default"], null, /*#__PURE__*/_react["default"].createElement(_TableRow["default"], null, /*#__PURE__*/_react["default"].createElement(_TableCell["default"], null, "Name"), /*#__PURE__*/_react["default"].createElement(_TableCell["default"], null, "Email"))), /*#__PURE__*/_react["default"].createElement(_TableBody["default"], null, /*#__PURE__*/_react["default"].createElement(_TableRow["default"], null, /*#__PURE__*/_react["default"].createElement(_TableCell["default"], null, "Name 1"), /*#__PURE__*/_react["default"].createElement(_TableCell["default"], null, "Email 1")), /*#__PURE__*/_react["default"].createElement(_TableRow["default"], null, /*#__PURE__*/_react["default"].createElement(_TableCell["default"], null, "Name 2"), /*#__PURE__*/_react["default"].createElement(_TableCell["default"], null, "Email 2")), /*#__PURE__*/_react["default"].createElement(_TableRow["default"], null, /*#__PURE__*/_react["default"].createElement(_TableCell["default"], null, "Name 3"), /*#__PURE__*/_react["default"].createElement(_TableCell["default"], null, "Email 3")), /*#__PURE__*/_react["default"].createElement(_TableRow["default"], null, /*#__PURE__*/_react["default"].createElement(_TableCell["default"], null, "Name 4"), /*#__PURE__*/_react["default"].createElement(_TableCell["default"], null, "Email 4")), /*#__PURE__*/_react["default"].createElement(_TableRow["default"], null, /*#__PURE__*/_react["default"].createElement(_TableCell["default"], null, "Name 5"), /*#__PURE__*/_react["default"].createElement(_TableCell["default"], null, "Email 5"))));
+};
+
+exports.Default = Default;

package/stories/Tabs.stories.js

@@ -0,0 +1,37 @@
+"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 _Tabs = _interopRequireDefault(require("../core/Tabs"));
+
+var _Tab = _interopRequireDefault(require("../core/Tab"));
+
+var _default = {
+  title: 'Tabs',
+  component: _Tabs["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Tabs["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  value: 0,
+  children: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+    label: "Profile"
+  }), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+    label: "Enterprise"
+  }), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+    label: "Billing"
+  }))
+};