@storybook/components 6.5.0-alpha.7 → 6.5.0-beta.1

package/dist/cjs/Button/Button.stories.js

@@ -1,74 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@storybook/react");
-
-var _Button = require("./Button");
-
-var _icon = require("../icon/icon");
-
-var _index = require("../form/index");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var FormButton = _index.Form.Button;
-(0, _react2.storiesOf)('Basics/Button', module).add('all buttons', function () {
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "Button that is used for forms"), /*#__PURE__*/_react.default.createElement(FormButton, null, "Form.Button"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("p", null, "Buttons that are used for everything else"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    primary: true
-  }, "Primary"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Secondary"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    outline: true,
-    containsIcon: true,
-    title: "link"
-  }, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
-    icon: "link"
-  })), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    outline: true
-  }, "Outline"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    outline: true,
-    primary: true
-  }, "Outline primary"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    outline: true,
-    secondary: true
-  }, "Outline secondary"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    primary: true,
-    disabled: true
-  }, "Disabled"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    primary: true,
-    small: true
-  }, "Primary"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true,
-    small: true
-  }, "Secondary"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    gray: true,
-    small: true
-  }, "Secondary"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    outline: true,
-    small: true
-  }, "Outline"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    primary: true,
-    disabled: true,
-    small: true
-  }, "Disabled"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    outline: true,
-    small: true,
-    containsIcon: true,
-    title: "link"
-  }, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
-    icon: "link"
-  })), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    outline: true,
-    small: true
-  }, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
-    icon: "link"
-  }), "Link"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    primary: true,
-    small: true,
-    isLink: true,
-    href: "#"
-  }, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
-    icon: "link"
-  }), " Link"));
-});

package/dist/cjs/Colors/SideBySide.js

@@ -1,25 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SideBySide = void 0;
-
-var _theming = require("@storybook/theming");
-
-var SideBySide = _theming.styled.div({
-  display: 'grid',
-  gridColumnGap: 30,
-  gridTemplateColumns: '1fr 1fr',
-  position: 'absolute',
-  width: '100vw',
-  height: '100vh',
-  overflow: 'auto',
-  top: 0,
-  left: 0,
-  '& > *': {
-    padding: 20
-  }
-});
-
-exports.SideBySide = SideBySide;

package/dist/cjs/Colors/colorpalette.stories.mdx

@@ -1,125 +0,0 @@
-import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
-
-import { themes, ThemeProvider, convert, ensure } from '@storybook/theming';
-
-import { SideBySide } from './SideBySide';
-
-<Meta title="Basics/ColorPalette" />
-
-<SideBySide>
-  <div style={{background: '#202020' }}>
-<ThemeProvider theme={ensure(themes.dark)}>
-
-Dark theme Colors
-
-<ColorPalette>
-  {Object.entries(convert(themes.dark).color).map(([k, v]) => {
-    if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
-      return <ColorItem key={k} title={k} colors={{ [k]: v }} />;
-    } else if (typeof v === 'object') {
-      return (
-        <ColorItem
-          key={k}
-          title={k}
-          colors={Object.entries(v).reduce(
-            (acc, [key, value]) =>
-              typeof value === 'string' &&
-              (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))
-                ? { ...acc, [key]: value }
-                : acc,
-            {}
-          )}
-        />
-      );
-    }
-    return null;
-  })}
-</ColorPalette>
-
-Dark theme Backgrounds
-
-<ColorPalette>
-  {Object.entries(convert(themes.dark).background).map(([k,v]) => {
-    if(k === 'color'){
-      return null
-    }
-    if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
-      return (
-        <ColorItem
-          key={k}
-          title={k}
-          colors={{ [k]: v }}
-        />
-      );
-    } else if (typeof v === 'object') {
-      const colors = Object.entries(v).reduce((acc, [key, value]) => (typeof value === 'string' && (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))) ? {...acc, [key]: value} : acc, {});
-      return (
-        <ColorItem
-          key={k}
-          title={k}
-          colors={colors}
-        />
-      );
-    }
-    return null;
-  })}
-</ColorPalette>
-  </ThemeProvider></div>
-  <div styles={{ background: '#eeeeee'}}>
-
-Light theme Colors
-
-<ColorPalette>
-  {Object.entries(convert(themes.light).color).map(([k, v]) => {
-    if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
-      return <ColorItem key={k} title={k} colors={{ [k]: v }} />;
-    } else if (typeof v === 'object') {
-      return (
-        <ColorItem
-          key={k}
-          title={k}
-          colors={Object.entries(v).reduce(
-            (acc, [key, value]) =>
-              typeof value === 'string' &&
-              (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))
-                ? { ...acc, [key]: value }
-                : acc,
-            {}
-          )}
-        />
-      );
-    }
-    return null;
-  })}
-</ColorPalette>
-
-Light theme Backgrounds
-
-<ColorPalette>
-  {Object.entries(convert(themes.light).background).map(([k,v]) => {
-    if(k === 'color'){
-      return null
-    }
-    if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
-      return (
-        <ColorItem
-          key={k}
-          title={k}
-          colors={{ [k]: v }}
-        />
-      );
-    } else if (typeof v === 'object') {
-      const colors = Object.entries(v).reduce((acc, [key, value]) => (typeof value === 'string' && (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))) ? {...acc, [key]: value} : acc, {});
-      return (
-        <ColorItem
-          key={k}
-          title={k}
-          colors={colors}
-        />
-      );
-    }
-    return null;
-  })}
-</ColorPalette>
-  </div>
-</SideBySide>

package/dist/cjs/Loader/Loader.js

@@ -1,274 +0,0 @@
-"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.array.slice.js");
-
-require("core-js/modules/es.object.freeze.js");
-
-require("core-js/modules/es.object.keys.js");
-
-require("core-js/modules/es.symbol.js");
-
-require("core-js/modules/es.object.assign.js");
-
-require("core-js/modules/es.symbol.description.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.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.Loader = exports.PureLoader = void 0;
-
-require("core-js/modules/es.object.to-string.js");
-
-require("core-js/modules/es.regexp.to-string.js");
-
-require("core-js/modules/es.array.concat.js");
-
-var _global = _interopRequireDefault(require("global"));
-
-var _polished = require("polished");
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _theming = require("@storybook/theming");
-
-var _icon = require("../icon/icon");
-
-var _animation = require("../shared/animation");
-
-var _templateObject;
-
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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 _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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var EventSource = _global.default.EventSource,
-    CONFIG_TYPE = _global.default.CONFIG_TYPE;
-
-var LoaderWrapper = _theming.styled.div(function (_ref) {
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 32 : _ref$size;
-  return {
-    borderRadius: '50%',
-    cursor: 'progress',
-    display: 'inline-block',
-    overflow: 'hidden',
-    position: 'absolute',
-    transition: 'all 200ms ease-out',
-    verticalAlign: 'top',
-    top: '50%',
-    left: '50%',
-    marginTop: -(size / 2),
-    marginLeft: -(size / 2),
-    height: size,
-    width: size,
-    zIndex: 4,
-    borderWidth: 2,
-    borderStyle: 'solid',
-    borderColor: 'rgba(97, 97, 97, 0.29)',
-    borderTopColor: 'rgb(100,100,100)',
-    animation: "".concat(_animation.rotate360, " 0.7s linear infinite"),
-    mixBlendMode: 'difference'
-  };
-});
-
-var ProgressWrapper = _theming.styled.div({
-  position: 'absolute',
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center',
-  width: '100%',
-  height: '100%'
-});
-
-var ProgressTrack = _theming.styled.div(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    position: 'relative',
-    width: '80%',
-    marginBottom: '0.75rem',
-    maxWidth: 300,
-    height: 5,
-    borderRadius: 5,
-    background: (0, _polished.transparentize)(0.8, theme.color.secondary),
-    overflow: 'hidden',
-    cursor: 'progress'
-  };
-});
-
-var ProgressBar = _theming.styled.div(function (_ref3) {
-  var theme = _ref3.theme;
-  return {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    height: '100%',
-    background: theme.color.secondary
-  };
-});
-
-var ProgressMessage = _theming.styled.div(function (_ref4) {
-  var theme = _ref4.theme;
-  return {
-    minHeight: '2em',
-    fontSize: "".concat(theme.typography.size.s1, "px"),
-    color: theme.barTextColor
-  };
-});
-
-var ErrorIcon = (0, _theming.styled)(_icon.Icons)(function (_ref5) {
-  var theme = _ref5.theme;
-  return {
-    width: 20,
-    height: 20,
-    marginBottom: '0.5rem',
-    color: theme.color.mediumdark
-  };
-});
-var ellipsis = (0, _theming.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from { content: \"...\" }\n  33% { content: \".\" }\n  66% { content: \"..\" }\n  to { content: \"...\" }\n"])));
-
-var Ellipsis = _theming.styled.span({
-  '&::after': {
-    content: "'...'",
-    animation: "".concat(ellipsis, " 1s linear infinite"),
-    animationDelay: '1s',
-    display: 'inline-block',
-    width: '1em',
-    height: 'auto'
-  }
-});
-
-var PureLoader = function PureLoader(_ref6) {
-  var progress = _ref6.progress,
-      error = _ref6.error,
-      size = _ref6.size,
-      props = _objectWithoutProperties(_ref6, ["progress", "error", "size"]);
-
-  if (error) {
-    return /*#__PURE__*/_react.default.createElement(ProgressWrapper, _extends({
-      "aria-label": error.toString(),
-      "aria-live": "polite",
-      role: "status"
-    }, props), /*#__PURE__*/_react.default.createElement(ErrorIcon, {
-      icon: "lightningoff"
-    }), /*#__PURE__*/_react.default.createElement(ProgressMessage, null, error.message));
-  }
-
-  if (progress) {
-    var value = progress.value,
-        modules = progress.modules;
-    var message = progress.message;
-    if (modules) message += " ".concat(modules.complete, " / ").concat(modules.total, " modules");
-    return /*#__PURE__*/_react.default.createElement(ProgressWrapper, _extends({
-      "aria-label": "Content is loading...",
-      "aria-live": "polite",
-      "aria-valuemin": 0,
-      "aria-valuemax": 100,
-      "aria-valuenow": value * 100,
-      "aria-valuetext": message,
-      role: "progressbar"
-    }, props), /*#__PURE__*/_react.default.createElement(ProgressTrack, null, /*#__PURE__*/_react.default.createElement(ProgressBar, {
-      style: {
-        width: "".concat(value * 100, "%")
-      }
-    })), /*#__PURE__*/_react.default.createElement(ProgressMessage, null, message, value < 1 && /*#__PURE__*/_react.default.createElement(Ellipsis, {
-      key: message
-    })));
-  }
-
-  return /*#__PURE__*/_react.default.createElement(LoaderWrapper, _extends({
-    "aria-label": "Content is loading...",
-    "aria-live": "polite",
-    role: "status",
-    size: size
-  }, props));
-};
-
-exports.PureLoader = PureLoader;
-PureLoader.displayName = "PureLoader";
-
-var Loader = function Loader(props) {
-  var _useState = (0, _react.useState)(undefined),
-      _useState2 = _slicedToArray(_useState, 2),
-      progress = _useState2[0],
-      setProgress = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(undefined),
-      _useState4 = _slicedToArray(_useState3, 2),
-      error = _useState4[0],
-      setError = _useState4[1];
-
-  (0, _react.useEffect)(function () {
-    // Don't listen for progress updates in static builds
-    // Event source is not defined in IE 11
-    if (CONFIG_TYPE !== 'DEVELOPMENT' || !EventSource) return undefined;
-    var eventSource = new EventSource('/progress');
-    var lastProgress;
-
-    eventSource.onmessage = function (event) {
-      try {
-        lastProgress = JSON.parse(event.data);
-        setProgress(lastProgress);
-      } catch (e) {
-        setError(e);
-        eventSource.close();
-      }
-    };
-
-    eventSource.onerror = function () {
-      if (lastProgress && lastProgress.value !== 1) setError(new Error('Connection closed'));
-      eventSource.close();
-    };
-
-    return function () {
-      return eventSource.close();
-    };
-  }, []);
-  return /*#__PURE__*/_react.default.createElement(PureLoader, _extends({
-    progress: progress,
-    error: error
-  }, props));
-};
-
-exports.Loader = Loader;
-Loader.displayName = "Loader";

package/dist/cjs/Loader/Loader.stories.js

@@ -1,86 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ProgressError = exports.ProgressBar = exports.SizeAdjusted = exports.InfiniteState = exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Loader = require("./Loader");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var withBackground = function withBackground(storyFn) {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      position: 'fixed',
-      top: 0,
-      left: 0,
-      width: '100vw',
-      height: '100vh',
-      background: 'linear-gradient(to right, rgba(56,56,56,1) 0%, rgba(0,0,0,1) 50%, rgba(255,255,255,1) 50%, rgba(224,224,224,1) 100%)'
-    }
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    style: {
-      position: 'absolute',
-      top: '50%',
-      left: 0,
-      height: '50vh',
-      width: '100vw',
-      background: 'linear-gradient(to right, red 0%, orangered 50%, blue 50%, deepskyblue 100%)'
-    }
-  }), storyFn());
-};
-
-withBackground.displayName = "withBackground";
-var _default = {
-  title: 'Basics/Loader'
-};
-exports.default = _default;
-
-var InfiniteState = function InfiniteState() {
-  return /*#__PURE__*/_react.default.createElement(_Loader.PureLoader, {
-    role: "progressbar"
-  });
-};
-
-exports.InfiniteState = InfiniteState;
-InfiniteState.displayName = "InfiniteState";
-InfiniteState.decorators = [withBackground];
-
-var SizeAdjusted = function SizeAdjusted() {
-  return /*#__PURE__*/_react.default.createElement(_Loader.PureLoader, {
-    size: 64,
-    role: "progressbar"
-  });
-};
-
-exports.SizeAdjusted = SizeAdjusted;
-SizeAdjusted.displayName = "SizeAdjusted";
-SizeAdjusted.decorators = [withBackground];
-
-var ProgressBar = function ProgressBar() {
-  return /*#__PURE__*/_react.default.createElement(_Loader.PureLoader, {
-    progress: {
-      value: 0.3,
-      message: 'Building',
-      modules: {
-        complete: 500,
-        total: 1337
-      }
-    }
-  });
-};
-
-exports.ProgressBar = ProgressBar;
-ProgressBar.displayName = "ProgressBar";
-
-var ProgressError = function ProgressError() {
-  return /*#__PURE__*/_react.default.createElement(_Loader.PureLoader, {
-    error: new Error('Connection closed')
-  });
-};
-
-exports.ProgressError = ProgressError;
-ProgressError.displayName = "ProgressError";