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

package/dist/cjs/index.js

@@ -0,0 +1,355 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  resetComponents: true,
+  components: true,
+  Badge: true,
+  Link: true,
+  DocumentWrapper: true,
+  SyntaxHighlighter: true,
+  ActionBar: true,
+  Spaced: true,
+  Placeholder: true,
+  ScrollArea: true,
+  Zoom: true,
+  Button: true,
+  Form: true,
+  WithTooltip: true,
+  WithTooltipPure: true,
+  TooltipMessage: true,
+  TooltipNote: true,
+  TooltipLinkList: true,
+  Tabs: true,
+  TabsState: true,
+  TabBar: true,
+  TabWrapper: true,
+  IconButton: true,
+  TabButton: true,
+  Separator: true,
+  interleaveSeparators: true,
+  Bar: true,
+  FlexBar: true,
+  AddonPanel: true,
+  Icons: true,
+  Symbols: true,
+  StorybookLogo: true,
+  StorybookIcon: true,
+  Loader: true
+};
+Object.defineProperty(exports, "components", {
+  enumerable: true,
+  get: function get() {
+    return _DocumentFormatting.components;
+  }
+});
+Object.defineProperty(exports, "Badge", {
+  enumerable: true,
+  get: function get() {
+    return _Badge.Badge;
+  }
+});
+Object.defineProperty(exports, "Link", {
+  enumerable: true,
+  get: function get() {
+    return _link.Link;
+  }
+});
+Object.defineProperty(exports, "DocumentWrapper", {
+  enumerable: true,
+  get: function get() {
+    return _DocumentWrapper.DocumentWrapper;
+  }
+});
+Object.defineProperty(exports, "SyntaxHighlighter", {
+  enumerable: true,
+  get: function get() {
+    return _lazySyntaxhighlighter.SyntaxHighlighter;
+  }
+});
+Object.defineProperty(exports, "ActionBar", {
+  enumerable: true,
+  get: function get() {
+    return _ActionBar.ActionBar;
+  }
+});
+Object.defineProperty(exports, "Spaced", {
+  enumerable: true,
+  get: function get() {
+    return _Spaced.Spaced;
+  }
+});
+Object.defineProperty(exports, "Placeholder", {
+  enumerable: true,
+  get: function get() {
+    return _placeholder.Placeholder;
+  }
+});
+Object.defineProperty(exports, "ScrollArea", {
+  enumerable: true,
+  get: function get() {
+    return _ScrollArea.ScrollArea;
+  }
+});
+Object.defineProperty(exports, "Zoom", {
+  enumerable: true,
+  get: function get() {
+    return _Zoom.Zoom;
+  }
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function get() {
+    return _Button.Button;
+  }
+});
+Object.defineProperty(exports, "Form", {
+  enumerable: true,
+  get: function get() {
+    return _index.Form;
+  }
+});
+Object.defineProperty(exports, "WithTooltip", {
+  enumerable: true,
+  get: function get() {
+    return _lazyWithTooltip.WithTooltip;
+  }
+});
+Object.defineProperty(exports, "WithTooltipPure", {
+  enumerable: true,
+  get: function get() {
+    return _lazyWithTooltip.WithTooltipPure;
+  }
+});
+Object.defineProperty(exports, "TooltipMessage", {
+  enumerable: true,
+  get: function get() {
+    return _TooltipMessage.TooltipMessage;
+  }
+});
+Object.defineProperty(exports, "TooltipNote", {
+  enumerable: true,
+  get: function get() {
+    return _TooltipNote.TooltipNote;
+  }
+});
+Object.defineProperty(exports, "TooltipLinkList", {
+  enumerable: true,
+  get: function get() {
+    return _TooltipLinkList.TooltipLinkList;
+  }
+});
+Object.defineProperty(exports, "Tabs", {
+  enumerable: true,
+  get: function get() {
+    return _tabs.Tabs;
+  }
+});
+Object.defineProperty(exports, "TabsState", {
+  enumerable: true,
+  get: function get() {
+    return _tabs.TabsState;
+  }
+});
+Object.defineProperty(exports, "TabBar", {
+  enumerable: true,
+  get: function get() {
+    return _tabs.TabBar;
+  }
+});
+Object.defineProperty(exports, "TabWrapper", {
+  enumerable: true,
+  get: function get() {
+    return _tabs.TabWrapper;
+  }
+});
+Object.defineProperty(exports, "IconButton", {
+  enumerable: true,
+  get: function get() {
+    return _button.IconButton;
+  }
+});
+Object.defineProperty(exports, "TabButton", {
+  enumerable: true,
+  get: function get() {
+    return _button.TabButton;
+  }
+});
+Object.defineProperty(exports, "Separator", {
+  enumerable: true,
+  get: function get() {
+    return _separator.Separator;
+  }
+});
+Object.defineProperty(exports, "interleaveSeparators", {
+  enumerable: true,
+  get: function get() {
+    return _separator.interleaveSeparators;
+  }
+});
+Object.defineProperty(exports, "Bar", {
+  enumerable: true,
+  get: function get() {
+    return _bar.Bar;
+  }
+});
+Object.defineProperty(exports, "FlexBar", {
+  enumerable: true,
+  get: function get() {
+    return _bar.FlexBar;
+  }
+});
+Object.defineProperty(exports, "AddonPanel", {
+  enumerable: true,
+  get: function get() {
+    return _addonPanel.AddonPanel;
+  }
+});
+Object.defineProperty(exports, "Icons", {
+  enumerable: true,
+  get: function get() {
+    return _icon.Icons;
+  }
+});
+Object.defineProperty(exports, "Symbols", {
+  enumerable: true,
+  get: function get() {
+    return _icon.Symbols;
+  }
+});
+Object.defineProperty(exports, "StorybookLogo", {
+  enumerable: true,
+  get: function get() {
+    return _StorybookLogo.StorybookLogo;
+  }
+});
+Object.defineProperty(exports, "StorybookIcon", {
+  enumerable: true,
+  get: function get() {
+    return _StorybookIcon.StorybookIcon;
+  }
+});
+Object.defineProperty(exports, "Loader", {
+  enumerable: true,
+  get: function get() {
+    return _Loader.Loader;
+  }
+});
+exports.resetComponents = void 0;
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.object.assign.js");
+
+var _react = require("react");
+
+var _DocumentFormatting = require("./typography/DocumentFormatting");
+
+Object.keys(_DocumentFormatting).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DocumentFormatting[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DocumentFormatting[key];
+    }
+  });
+});
+
+var _Badge = require("./Badge/Badge");
+
+var _link = require("./typography/link/link");
+
+var _DocumentWrapper = require("./typography/DocumentWrapper");
+
+var _lazySyntaxhighlighter = require("./syntaxhighlighter/lazy-syntaxhighlighter");
+
+var _ActionBar = require("./ActionBar/ActionBar");
+
+var _Spaced = require("./spaced/Spaced");
+
+var _placeholder = require("./placeholder/placeholder");
+
+var _ScrollArea = require("./ScrollArea/ScrollArea");
+
+var _Zoom = require("./Zoom/Zoom");
+
+var _Button = require("./Button/Button");
+
+var _index = require("./form/index");
+
+var _lazyWithTooltip = require("./tooltip/lazy-WithTooltip");
+
+var _TooltipMessage = require("./tooltip/TooltipMessage");
+
+var _TooltipNote = require("./tooltip/TooltipNote");
+
+var _TooltipLinkList = require("./tooltip/TooltipLinkList");
+
+var _tabs = require("./tabs/tabs");
+
+var _button = require("./bar/button");
+
+var _separator = require("./bar/separator");
+
+var _bar = require("./bar/bar");
+
+var _addonPanel = require("./addon-panel/addon-panel");
+
+var _icon = require("./icon/icon");
+
+var _StorybookLogo = require("./brand/StorybookLogo");
+
+var _StorybookIcon = require("./brand/StorybookIcon");
+
+var _blocks = require("./blocks");
+
+Object.keys(_blocks).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _blocks[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _blocks[key];
+    }
+  });
+});
+
+var _controls = require("./controls");
+
+Object.keys(_controls).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _controls[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _controls[key];
+    }
+  });
+});
+
+var _Loader = require("./Loader/Loader");
+
+// Typography
+// UI
+// Forms
+// Tooltips
+// Toolbar and subcomponents
+// Doc blocks
+// Loader
+var resetComponents = {};
+exports.resetComponents = resetComponents;
+Object.keys(_DocumentFormatting.components).forEach(function (key) {
+  resetComponents[key] = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+    return /*#__PURE__*/(0, _react.createElement)(key, Object.assign({}, props, {
+      ref: ref
+    }));
+  });
+});

package/dist/cjs/placeholder/placeholder.js

@@ -0,0 +1,94 @@
+"use strict";
+
+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); }
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.array.slice.js");
+
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/es.array.from.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Placeholder = void 0;
+
+require("core-js/modules/es.string.bold.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _theming = require("@storybook/theming");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var Title = _theming.styled.div(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    fontWeight: theme.typography.weight.bold
+  };
+});
+
+var Desc = _theming.styled.div();
+
+var Message = _theming.styled.div(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    padding: 30,
+    textAlign: 'center',
+    color: theme.color.defaultText,
+    fontSize: theme.typography.size.s2 - 1
+  };
+});
+
+var Placeholder = function Placeholder(_ref3) {
+  var children = _ref3.children,
+      props = _objectWithoutProperties(_ref3, ["children"]);
+
+  var _Children$toArray = _react.Children.toArray(children),
+      _Children$toArray2 = _slicedToArray(_Children$toArray, 2),
+      title = _Children$toArray2[0],
+      desc = _Children$toArray2[1];
+
+  return /*#__PURE__*/_react.default.createElement(Message, props, /*#__PURE__*/_react.default.createElement(Title, null, title), desc && /*#__PURE__*/_react.default.createElement(Desc, null, desc));
+};
+
+exports.Placeholder = Placeholder;
+Placeholder.displayName = "Placeholder";

package/dist/cjs/placeholder/placeholder.stories.js

@@ -0,0 +1,64 @@
+"use strict";
+
+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); }
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.twoChildren = exports.singleChild = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _placeholder = require("./placeholder");
+
+var _link = require("../typography/link/link");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = {
+  component: _placeholder.Placeholder,
+  title: 'Basics/Placeholder'
+};
+exports.default = _default;
+
+var singleChild = function singleChild() {
+  return /*#__PURE__*/_react.default.createElement(_placeholder.Placeholder, null, "This is a placeholder with single child, it's bolded");
+};
+
+exports.singleChild = singleChild;
+singleChild.displayName = "singleChild";
+
+var twoChildren = function twoChildren() {
+  return /*#__PURE__*/_react.default.createElement(_placeholder.Placeholder, null, /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+    key: "title"
+  }, "This has two children, the first bold"), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+    key: "desc"
+  }, "The second normal weight. Here's a\xA0", /*#__PURE__*/_react.default.createElement(_link.Link, {
+    href: "https://storybook.js.org",
+    secondary: true,
+    cancel: false
+  }, "link")));
+};
+
+exports.twoChildren = twoChildren;
+twoChildren.displayName = "twoChildren";

package/dist/cjs/shared/animation.js

@@ -0,0 +1,19 @@
+"use strict";
+
+require("core-js/modules/es.array.slice.js");
+
+require("core-js/modules/es.object.freeze.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rotate360 = void 0;
+
+var _theming = require("@storybook/theming");
+
+var _templateObject;
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var rotate360 = (0, _theming.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tfrom {\n\t\ttransform: rotate(0deg);\n\t}\n\tto {\n\t\ttransform: rotate(360deg);\n\t}\n"])));
+exports.rotate360 = rotate360;

package/dist/cjs/spaced/Spaced.js

@@ -0,0 +1,101 @@
+"use strict";
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.object.assign.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Spaced = void 0;
+
+require("core-js/modules/es.number.constructor.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _theming = require("@storybook/theming");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+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; }
+
+var toNumber = function toNumber(input) {
+  return typeof input === 'number' ? input : Number(input);
+};
+
+var Container = _theming.styled.div(function (_ref) {
+  var theme = _ref.theme,
+      col = _ref.col,
+      _ref$row = _ref.row,
+      row = _ref$row === void 0 ? 1 : _ref$row;
+  return col ? _defineProperty({
+    display: 'inline-block',
+    verticalAlign: 'inherit',
+    '& > *': {
+      marginLeft: col * theme.layoutMargin,
+      verticalAlign: 'inherit'
+    }
+  }, "& > *:first-child".concat(_theming.ignoreSsrWarning), {
+    marginLeft: 0
+  }) : _defineProperty({
+    '& > *': {
+      marginTop: row * theme.layoutMargin
+    }
+  }, "& > *:first-child".concat(_theming.ignoreSsrWarning), {
+    marginTop: 0
+  });
+}, function (_ref4) {
+  var theme = _ref4.theme,
+      outer = _ref4.outer,
+      col = _ref4.col,
+      row = _ref4.row;
+
+  switch (true) {
+    case !!(outer && col):
+      {
+        return {
+          marginLeft: outer * theme.layoutMargin,
+          marginRight: outer * theme.layoutMargin
+        };
+      }
+
+    case !!(outer && row):
+      {
+        return {
+          marginTop: outer * theme.layoutMargin,
+          marginBottom: outer * theme.layoutMargin
+        };
+      }
+
+    default:
+      {
+        return {};
+      }
+  }
+});
+
+var Spaced = function Spaced(_ref5) {
+  var col = _ref5.col,
+      row = _ref5.row,
+      outer = _ref5.outer,
+      children = _ref5.children,
+      rest = _objectWithoutProperties(_ref5, ["col", "row", "outer", "children"]);
+
+  var outerAmount = toNumber(typeof outer === 'number' || !outer ? outer : col || row);
+  return /*#__PURE__*/_react.default.createElement(Container, _extends({
+    col: col,
+    row: row,
+    outer: outerAmount
+  }, rest), children);
+};
+
+exports.Spaced = Spaced;
+Spaced.displayName = "Spaced";