@storybook/components 6.4.0-beta.24 → 6.4.0-beta.28

package/dist/esm/tabs/tabs.js

@@ -0,0 +1,269 @@
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.get-prototype-of.js";
+import "core-js/modules/es.reflect.construct.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.symbol.iterator.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import React, { Children, Component, Fragment, memo } from 'react';
+import { styled } from '@storybook/theming';
+import { sanitize } from '@storybook/csf';
+import { Placeholder } from '../placeholder/placeholder';
+import { FlexBar } from '../bar/bar';
+import { TabButton } from '../bar/button';
+var ignoreSsrWarning = '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */';
+var Wrapper = styled.div(function (_ref) {
+  var theme = _ref.theme,
+      bordered = _ref.bordered;
+  return bordered ? {
+    backgroundClip: 'padding-box',
+    border: "1px solid ".concat(theme.appBorderColor),
+    borderRadius: theme.appBorderRadius,
+    overflow: 'hidden',
+    boxSizing: 'border-box'
+  } : {};
+}, function (_ref2) {
+  var absolute = _ref2.absolute;
+  return absolute ? {
+    width: '100%',
+    height: '100%',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column'
+  } : {
+    display: 'block'
+  };
+});
+export var TabBar = styled.div({
+  overflow: 'hidden',
+  '&:first-of-type': {
+    marginLeft: -3
+  }
+});
+var Content = styled.div({
+  display: 'block',
+  position: 'relative'
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    fontSize: theme.typography.size.s2 - 1,
+    background: theme.background.content
+  };
+}, function (_ref4) {
+  var bordered = _ref4.bordered,
+      theme = _ref4.theme;
+  return bordered ? {
+    borderRadius: "0 0 ".concat(theme.appBorderRadius - 1, "px ").concat(theme.appBorderRadius - 1, "px")
+  } : {};
+}, function (_ref5) {
+  var absolute = _ref5.absolute,
+      bordered = _ref5.bordered;
+  return absolute ? _defineProperty({
+    height: "calc(100% - ".concat(bordered ? 42 : 40, "px)"),
+    position: 'absolute',
+    left: 0 + (bordered ? 1 : 0),
+    right: 0 + (bordered ? 1 : 0),
+    bottom: 0 + (bordered ? 1 : 0),
+    top: 40 + (bordered ? 1 : 0),
+    overflow: 'auto'
+  }, "& > *:first-child".concat(ignoreSsrWarning), {
+    position: 'absolute',
+    left: 0 + (bordered ? 1 : 0),
+    right: 0 + (bordered ? 1 : 0),
+    bottom: 0 + (bordered ? 1 : 0),
+    top: 0 + (bordered ? 1 : 0),
+    height: "calc(100% - ".concat(bordered ? 2 : 0, "px)"),
+    overflow: 'auto'
+  }) : {};
+});
+var VisuallyHidden = styled.div(function (_ref7) {
+  var active = _ref7.active;
+  return active ? {
+    display: 'block'
+  } : {
+    display: 'none'
+  };
+});
+export var TabWrapper = function TabWrapper(_ref8) {
+  var active = _ref8.active,
+      render = _ref8.render,
+      children = _ref8.children;
+  return /*#__PURE__*/React.createElement(VisuallyHidden, {
+    active: active
+  }, render ? render() : children);
+};
+TabWrapper.displayName = "TabWrapper";
+export var panelProps = {};
+
+var childrenToList = function childrenToList(children, selected) {
+  return Children.toArray(children).map(function (_ref9, index) {
+    var _ref9$props = _ref9.props,
+        title = _ref9$props.title,
+        id = _ref9$props.id,
+        color = _ref9$props.color,
+        childrenOfChild = _ref9$props.children;
+    var content = Array.isArray(childrenOfChild) ? childrenOfChild[0] : childrenOfChild;
+    return {
+      active: selected ? id === selected : index === 0,
+      title: title,
+      id: id,
+      color: color,
+      render: typeof content === 'function' ? content : function (_ref10) {
+        var active = _ref10.active,
+            key = _ref10.key;
+        return /*#__PURE__*/React.createElement(VisuallyHidden, {
+          key: key,
+          active: active,
+          role: "tabpanel"
+        }, content);
+      }
+    };
+  });
+};
+
+export var Tabs = /*#__PURE__*/memo(function (_ref11) {
+  var children = _ref11.children,
+      selected = _ref11.selected,
+      actions = _ref11.actions,
+      absolute = _ref11.absolute,
+      bordered = _ref11.bordered,
+      tools = _ref11.tools,
+      backgroundColor = _ref11.backgroundColor,
+      htmlId = _ref11.id;
+  var list = childrenToList(children, selected);
+  return list.length ? /*#__PURE__*/React.createElement(Wrapper, {
+    absolute: absolute,
+    bordered: bordered,
+    id: htmlId
+  }, /*#__PURE__*/React.createElement(FlexBar, {
+    border: true,
+    backgroundColor: backgroundColor
+  }, /*#__PURE__*/React.createElement(TabBar, {
+    role: "tablist"
+  }, list.map(function (_ref12) {
+    var title = _ref12.title,
+        id = _ref12.id,
+        active = _ref12.active,
+        color = _ref12.color;
+    var tabTitle = typeof title === 'function' ? title() : title;
+    return /*#__PURE__*/React.createElement(TabButton, {
+      id: "tabbutton-".concat(sanitize(tabTitle)),
+      className: "tabbutton ".concat(active ? 'tabbutton-active' : ''),
+      type: "button",
+      key: id,
+      active: active,
+      textColor: color,
+      onClick: function onClick(e) {
+        e.preventDefault();
+        actions.onSelect(id);
+      },
+      role: "tab"
+    }, tabTitle);
+  })), tools ? /*#__PURE__*/React.createElement(Fragment, null, tools) : null), /*#__PURE__*/React.createElement(Content, {
+    id: "panel-tab-content",
+    bordered: bordered,
+    absolute: absolute
+  }, list.map(function (_ref13) {
+    var id = _ref13.id,
+        active = _ref13.active,
+        render = _ref13.render;
+    return render({
+      key: id,
+      active: active
+    });
+  }))) : /*#__PURE__*/React.createElement(Placeholder, null, /*#__PURE__*/React.createElement(Fragment, {
+    key: "title"
+  }, "Nothing found"));
+});
+Tabs.displayName = 'Tabs';
+Tabs.defaultProps = {
+  id: null,
+  children: null,
+  tools: null,
+  selected: null,
+  absolute: false,
+  bordered: false
+};
+export var TabsState = /*#__PURE__*/function (_Component) {
+  _inherits(TabsState, _Component);
+
+  var _super = _createSuper(TabsState);
+
+  function TabsState(props) {
+    var _this;
+
+    _classCallCheck(this, TabsState);
+
+    _this = _super.call(this, props);
+    _this.handlers = {
+      onSelect: function onSelect(id) {
+        return _this.setState({
+          selected: id
+        });
+      }
+    };
+    _this.state = {
+      selected: props.initial
+    };
+    return _this;
+  }
+
+  _createClass(TabsState, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          _this$props$bordered = _this$props.bordered,
+          bordered = _this$props$bordered === void 0 ? false : _this$props$bordered,
+          _this$props$absolute = _this$props.absolute,
+          absolute = _this$props$absolute === void 0 ? false : _this$props$absolute,
+          children = _this$props.children,
+          backgroundColor = _this$props.backgroundColor;
+      var selected = this.state.selected;
+      return /*#__PURE__*/React.createElement(Tabs, {
+        bordered: bordered,
+        absolute: absolute,
+        selected: selected,
+        backgroundColor: backgroundColor,
+        actions: this.handlers
+      }, children);
+    }
+  }]);
+
+  return TabsState;
+}(Component);
+TabsState.displayName = "TabsState";
+TabsState.defaultProps = {
+  children: [],
+  initial: null,
+  absolute: false,
+  bordered: false,
+  backgroundColor: ''
+};

package/dist/esm/tabs/tabs.stories.js

@@ -0,0 +1,277 @@
+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(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.from.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/es.string.pad-start.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.regexp.to-string.js";
+import "core-js/modules/es.object.entries.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.symbol.iterator.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.function.name.js";
+import React, { Fragment } from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { logger } from '@storybook/client-logger';
+import { Tabs, TabsState, TabWrapper } from './tabs';
+var colours = Array.from(new Array(15), function (val, index) {
+  return index;
+}).map(function (i) {
+  return Math.floor(1 / 15 * i * 16777215).toString(16).padStart(6, '0');
+});
+
+function fibonacci(num, memo) {
+  /* eslint-disable no-param-reassign */
+  if (!memo) {
+    memo = {};
+  }
+
+  if (memo[num]) {
+    return memo[num];
+  }
+
+  if (num <= 1) {
+    return 1;
+  }
+
+  memo[num] = fibonacci(num - 1, memo) + fibonacci(num - 2, memo);
+  return memo[num];
+  /* eslint-enable no-param-reassign */
+}
+
+var panels = {
+  test1: {
+    title: 'Tab title #1',
+    render: function render(_ref) {
+      var active = _ref.active,
+          key = _ref.key;
+      return active ? /*#__PURE__*/React.createElement("div", {
+        id: "test1",
+        key: key
+      }, "CONTENT 1") : null;
+    }
+  },
+  test2: {
+    title: 'Tab title #2',
+    render: function render(_ref2) {
+      var active = _ref2.active,
+          key = _ref2.key;
+      return /*#__PURE__*/React.createElement("div", {
+        key: key,
+        id: "test2",
+        style: {
+          background: 'hotpink',
+          minHeight: '100%',
+          display: active ? 'block' : 'none'
+        }
+      }, "CONTENT 2");
+    }
+  },
+  test3: {
+    title: 'Tab with scroll!',
+    render: function render(_ref3) {
+      var active = _ref3.active,
+          key = _ref3.key;
+      return active ? /*#__PURE__*/React.createElement("div", {
+        id: "test3",
+        key: key
+      }, colours.map(function (colour, i) {
+        return /*#__PURE__*/React.createElement("div", {
+          key: colour,
+          style: {
+            background: "#".concat(colour),
+            height: 30 + fibonacci(i + 5) / 10
+          }
+        });
+      })) : null;
+    }
+  },
+  test4: {
+    title: 'Tab title #4',
+    render: function render(_ref4) {
+      var active = _ref4.active,
+          key = _ref4.key;
+      return active ? /*#__PURE__*/React.createElement("div", {
+        key: key,
+        id: "test4"
+      }, "CONTENT 4") : null;
+    }
+  },
+  test5: {
+    title: 'Tab title #5',
+    render: function render(_ref5) {
+      var active = _ref5.active,
+          key = _ref5.key;
+      return active ? /*#__PURE__*/React.createElement("div", {
+        key: key,
+        id: "test5"
+      }, "CONTENT 5") : null;
+    }
+  },
+  test6: {
+    title: 'Tab title #6',
+    render: function render(_ref6) {
+      var active = _ref6.active,
+          key = _ref6.key;
+      return /*#__PURE__*/React.createElement(TabWrapper, {
+        key: key,
+        active: active,
+        render: function render() {
+          return /*#__PURE__*/React.createElement("div", null, "CONTENT 6");
+        }
+      });
+    }
+  }
+};
+var onSelect = action('onSelect');
+var content = Object.entries(panels).map(function (_ref7) {
+  var _ref8 = _slicedToArray(_ref7, 2),
+      k = _ref8[0],
+      v = _ref8[1];
+
+  return /*#__PURE__*/React.createElement("div", {
+    key: k,
+    id: k,
+    title: v.title
+  }, v.render);
+});
+storiesOf('Basics/Tabs', module).addDecorator(function (s) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'relative',
+      height: 'calc(100vh - 20px)',
+      width: 'calc(100vw - 20px)',
+      margin: 10
+    }
+  }, s());
+}).add('stateful - static', function () {
+  return /*#__PURE__*/React.createElement(TabsState, {
+    initial: "test2"
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "test1",
+    title: "With a function"
+  }, function (_ref9) {
+    var active = _ref9.active,
+        selected = _ref9.selected;
+    return active ? /*#__PURE__*/React.createElement("div", null, selected, " is selected") : null;
+  }), /*#__PURE__*/React.createElement("div", {
+    id: "test2",
+    title: "With markup"
+  }, /*#__PURE__*/React.createElement("div", null, "test2 is always active (but visually hidden)")));
+}).add('stateful - static with set button text colors', function () {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TabsState, {
+    initial: "test2"
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "test1",
+    title: "With a function",
+    color: "#e00000"
+  }, function (_ref10) {
+    var active = _ref10.active,
+        selected = _ref10.selected;
+    return active ? /*#__PURE__*/React.createElement("div", null, selected, " is selected") : null;
+  }), /*#__PURE__*/React.createElement("div", {
+    id: "test2",
+    title: "With markup",
+    color: "green"
+  }, /*#__PURE__*/React.createElement("div", null, "test2 is always active (but visually hidden)"))));
+}).add('stateful - static with set backgroundColor', function () {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TabsState, {
+    initial: "test2",
+    backgroundColor: "rgba(0,0,0,.05)"
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "test1",
+    title: "With a function",
+    color: "#e00000"
+  }, function (_ref11) {
+    var active = _ref11.active,
+        selected = _ref11.selected;
+    return active ? /*#__PURE__*/React.createElement("div", null, selected, " is selected") : null;
+  }), /*#__PURE__*/React.createElement("div", {
+    id: "test2",
+    title: "With markup",
+    color: "green"
+  }, /*#__PURE__*/React.createElement("div", null, "test2 is always active (but visually hidden)"))));
+}).add('stateful - dynamic', function () {
+  return /*#__PURE__*/React.createElement(TabsState, {
+    initial: "test3"
+  }, Object.entries(panels).map(function (_ref12) {
+    var _ref13 = _slicedToArray(_ref12, 2),
+        k = _ref13[0],
+        v = _ref13[1];
+
+    return /*#__PURE__*/React.createElement("div", {
+      key: k,
+      id: k,
+      title: v.title
+    }, v.render);
+  }));
+}).add('stateful - no initial', function () {
+  return /*#__PURE__*/React.createElement(TabsState, null, content);
+}).add('stateless - bordered', function () {
+  return /*#__PURE__*/React.createElement(Tabs, {
+    bordered: true,
+    absolute: false,
+    selected: "test3",
+    actions: {
+      onSelect: onSelect
+    }
+  }, content);
+}).add('stateless - with tools', function () {
+  return /*#__PURE__*/React.createElement(Tabs, {
+    selected: "test3",
+    actions: {
+      onSelect: onSelect
+    },
+    tools: /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      onClick: function onClick() {
+        return logger.log('1');
+      }
+    }, "1"), /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      onClick: function onClick() {
+        return logger.log('2');
+      }
+    }, "2"))
+  }, content);
+}).add('stateless - absolute', function () {
+  return /*#__PURE__*/React.createElement(Tabs, {
+    absolute: true,
+    selected: "test3",
+    actions: {
+      onSelect: onSelect
+    }
+  }, content);
+}).add('stateless - absolute bordered', function () {
+  return /*#__PURE__*/React.createElement(Tabs, {
+    absolute: true,
+    bordered: true,
+    selected: "test3",
+    actions: {
+      onSelect: onSelect
+    }
+  }, content);
+}).add('stateless - empty', function () {
+  return /*#__PURE__*/React.createElement(Tabs, {
+    actions: {
+      onSelect: onSelect
+    },
+    bordered: true,
+    absolute: true
+  });
+});