@storybook/components 6.5.0-alpha.9 → 6.5.0-beta.2

package/dist/esm/tabs/tabs.js

@@ -1,269 +0,0 @@
-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

@@ -1,277 +0,0 @@
-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
-  });
-});