@storybook/components 6.5.0-alpha.3 → 6.5.0-alpha.30

package/dist/cjs/typography/components.js

@@ -0,0 +1,126 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.components = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _DocumentFormatting = require("./DocumentFormatting");
+
+var _A = require("./elements/A");
+
+var _Blockquote = require("./elements/Blockquote");
+
+var _Code = require("./elements/Code");
+
+var _Div = require("./elements/Div");
+
+var _DL = require("./elements/DL");
+
+var _H = require("./elements/H1");
+
+var _H2 = require("./elements/H2");
+
+var _H3 = require("./elements/H3");
+
+var _H4 = require("./elements/H4");
+
+var _H5 = require("./elements/H5");
+
+var _H6 = require("./elements/H6");
+
+var _HR = require("./elements/HR");
+
+var _Img = require("./elements/Img");
+
+var _LI = require("./elements/LI");
+
+var _OL = require("./elements/OL");
+
+var _P = require("./elements/P");
+
+var _Pre = require("./elements/Pre");
+
+var _Span = require("./elements/Span");
+
+var _Table = require("./elements/Table");
+
+var _TT = require("./elements/TT");
+
+var _UL = require("./elements/UL");
+
+var _ResetWrapper = require("./ResetWrapper");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var components = {
+  h1: function h1(props) {
+    return /*#__PURE__*/_react.default.createElement(_H.H1, (0, _DocumentFormatting.nameSpaceClassNames)(props, 'h1'));
+  },
+  h2: function h2(props) {
+    return /*#__PURE__*/_react.default.createElement(_H2.H2, (0, _DocumentFormatting.nameSpaceClassNames)(props, 'h2'));
+  },
+  h3: function h3(props) {
+    return /*#__PURE__*/_react.default.createElement(_H3.H3, (0, _DocumentFormatting.nameSpaceClassNames)(props, 'h3'));
+  },
+  h4: function h4(props) {
+    return /*#__PURE__*/_react.default.createElement(_H4.H4, (0, _DocumentFormatting.nameSpaceClassNames)(props, 'h4'));
+  },
+  h5: function h5(props) {
+    return /*#__PURE__*/_react.default.createElement(_H5.H5, (0, _DocumentFormatting.nameSpaceClassNames)(props, 'h5'));
+  },
+  h6: function h6(props) {
+    return /*#__PURE__*/_react.default.createElement(_H6.H6, (0, _DocumentFormatting.nameSpaceClassNames)(props, 'h6'));
+  },
+  pre: function pre(props) {
+    return /*#__PURE__*/_react.default.createElement(_Pre.Pre, (0, _DocumentFormatting.nameSpaceClassNames)(props, 'pre'));
+  },
+  a: function a(props) {
+    return /*#__PURE__*/_react.default.createElement(_A.A, (0, _DocumentFormatting.nameSpaceClassNames)(props, 'a'));
+  },
+  hr: function hr(props) {
+    return /*#__PURE__*/_react.default.createElement(_HR.HR, (0, _DocumentFormatting.nameSpaceClassNames)(props, 'hr'));
+  },
+  dl: function dl(props) {
+    return /*#__PURE__*/_react.default.createElement(_DL.DL, (0, _DocumentFormatting.nameSpaceClassNames)(props, 'dl'));
+  },
+  blockquote: function blockquote(props) {
+    return /*#__PURE__*/_react.default.createElement(_Blockquote.Blockquote, (0, _DocumentFormatting.nameSpaceClassNames)(props, 'blockquote'));
+  },
+  table: function table(props) {
+    return /*#__PURE__*/_react.default.createElement(_Table.Table, (0, _DocumentFormatting.nameSpaceClassNames)(props, 'table'));
+  },
+  img: function img(props) {
+    return /*#__PURE__*/_react.default.createElement(_Img.Img, (0, _DocumentFormatting.nameSpaceClassNames)(props, 'img'));
+  },
+  div: function div(props) {
+    return /*#__PURE__*/_react.default.createElement(_Div.Div, (0, _DocumentFormatting.nameSpaceClassNames)(props, 'div'));
+  },
+  span: function span(props) {
+    return /*#__PURE__*/_react.default.createElement(_Span.Span, (0, _DocumentFormatting.nameSpaceClassNames)(props, 'span'));
+  },
+  li: function li(props) {
+    return /*#__PURE__*/_react.default.createElement(_LI.LI, (0, _DocumentFormatting.nameSpaceClassNames)(props, 'li'));
+  },
+  ul: function ul(props) {
+    return /*#__PURE__*/_react.default.createElement(_UL.UL, (0, _DocumentFormatting.nameSpaceClassNames)(props, 'ul'));
+  },
+  ol: function ol(props) {
+    return /*#__PURE__*/_react.default.createElement(_OL.OL, (0, _DocumentFormatting.nameSpaceClassNames)(props, 'ol'));
+  },
+  p: function p(props) {
+    return /*#__PURE__*/_react.default.createElement(_P.P, (0, _DocumentFormatting.nameSpaceClassNames)(props, 'p'));
+  },
+  code: function code(props) {
+    return /*#__PURE__*/_react.default.createElement(_Code.Code, (0, _DocumentFormatting.nameSpaceClassNames)(props, 'code'));
+  },
+  tt: function tt(props) {
+    return /*#__PURE__*/_react.default.createElement(_TT.TT, (0, _DocumentFormatting.nameSpaceClassNames)(props, 'tt'));
+  },
+  resetwrapper: function resetwrapper(props) {
+    return /*#__PURE__*/_react.default.createElement(_ResetWrapper.ResetWrapper, (0, _DocumentFormatting.nameSpaceClassNames)(props, 'resetwrapper'));
+  }
+};
+exports.components = components;

package/dist/cjs/typography/elements/A.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.A = void 0;
+
+var _theming = require("@storybook/theming");
+
+var _common = require("../lib/common");
+
+var _Link = require("./Link");
+
+var A = (0, _theming.styled)(_Link.Link)(_common.withReset, function (_ref) {
+  var theme = _ref.theme;
+  return {
+    fontSize: 'inherit',
+    lineHeight: '24px',
+    color: theme.color.secondary,
+    textDecoration: 'none',
+    '&.absent': {
+      color: '#cc0000'
+    },
+    '&.anchor': {
+      display: 'block',
+      paddingLeft: 30,
+      marginLeft: -30,
+      cursor: 'pointer',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      bottom: 0
+    }
+  };
+});
+exports.A = A;

package/dist/cjs/typography/elements/Blockquote.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Blockquote = void 0;
+
+var _theming = require("@storybook/theming");
+
+var _common = require("../lib/common");
+
+var Blockquote = _theming.styled.blockquote(_common.withReset, _common.withMargin, function (_ref) {
+  var theme = _ref.theme;
+  return {
+    borderLeft: "4px solid ".concat(theme.color.medium),
+    padding: '0 15px',
+    color: theme.color.dark,
+    '& > :first-of-type': {
+      marginTop: 0
+    },
+    '& > :last-child': {
+      marginBottom: 0
+    }
+  };
+});
+
+exports.Blockquote = Blockquote;

package/dist/cjs/typography/elements/Code.js

@@ -0,0 +1,109 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+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.array.iterator.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.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.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Code = void 0;
+
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.string.match.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.promise.js");
+
+require("core-js/modules/es.array.filter.js");
+
+var _theming = require("@storybook/theming");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Source = require("../../blocks/Source");
+
+var _isReactChildString = require("../lib/isReactChildString");
+
+var _common = require("../lib/common");
+
+var _excluded = ["className", "children"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 _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; }
+
+var isInlineCodeRegex = /[\n\r]/g;
+
+var DefaultCodeBlock = _theming.styled.code(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    // from reset
+    fontFamily: theme.typography.fonts.mono,
+    WebkitFontSmoothing: 'antialiased',
+    MozOsxFontSmoothing: 'grayscale',
+    display: 'inline-block',
+    paddingLeft: 2,
+    paddingRight: 2,
+    verticalAlign: 'baseline',
+    color: 'inherit'
+  };
+}, _common.codeCommon);
+
+var Code = function Code(_ref2) {
+  var _language$;
+
+  var className = _ref2.className,
+      children = _ref2.children,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  var language = (className || '').match(/lang-(\S+)/);
+
+  var childrenArray = _react.Children.toArray(children);
+
+  var isInlineCode = !childrenArray.filter(_isReactChildString.isReactChildString).some(function (child) {
+    return child.match(isInlineCodeRegex);
+  });
+
+  if (isInlineCode) {
+    return /*#__PURE__*/_react.default.createElement(DefaultCodeBlock, _extends({}, props, {
+      className: className
+    }), childrenArray);
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_Source.StyledSyntaxHighlighter, _extends({
+    bordered: true,
+    copyable: true,
+    language: (_language$ = language === null || language === void 0 ? void 0 : language[1]) !== null && _language$ !== void 0 ? _language$ : 'plaintext',
+    format: false
+  }, props), children);
+};
+
+exports.Code = Code;
+Code.displayName = "Code";

package/dist/cjs/typography/elements/DL.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DL = void 0;
+
+require("core-js/modules/es.object.assign.js");
+
+var _theming = require("@storybook/theming");
+
+var _common = require("../lib/common");
+
+var DL = _theming.styled.dl(_common.withReset, Object.assign({}, _common.withMargin, {
+  padding: 0,
+  '& dt': {
+    fontSize: '14px',
+    fontWeight: 'bold',
+    fontStyle: 'italic',
+    padding: 0,
+    margin: '16px 0 4px'
+  },
+  '& dt:first-of-type': {
+    padding: 0
+  },
+  '& dt > :first-of-type': {
+    marginTop: 0
+  },
+  '& dt > :last-child': {
+    marginBottom: 0
+  },
+  '& dd': {
+    margin: '0 0 16px',
+    padding: '0 15px'
+  },
+  '& dd > :first-of-type': {
+    marginTop: 0
+  },
+  '& dd > :last-child': {
+    marginBottom: 0
+  }
+}));
+
+exports.DL = DL;

package/dist/cjs/typography/elements/Div.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Div = void 0;
+
+var _theming = require("@storybook/theming");
+
+var _common = require("../lib/common");
+
+var Div = _theming.styled.div(_common.withReset);
+
+exports.Div = Div;

package/dist/cjs/typography/elements/H1.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.H1 = void 0;
+
+var _theming = require("@storybook/theming");
+
+var _common = require("../lib/common");
+
+var H1 = _theming.styled.h1(_common.withReset, _common.headerCommon, function (_ref) {
+  var theme = _ref.theme;
+  return {
+    fontSize: "".concat(theme.typography.size.l1, "px"),
+    fontWeight: theme.typography.weight.black
+  };
+});
+
+exports.H1 = H1;

package/dist/cjs/typography/elements/H2.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.H2 = void 0;
+
+var _theming = require("@storybook/theming");
+
+var _common = require("../lib/common");
+
+var H2 = _theming.styled.h2(_common.withReset, _common.headerCommon, function (_ref) {
+  var theme = _ref.theme;
+  return {
+    fontSize: "".concat(theme.typography.size.m2, "px"),
+    paddingBottom: 4,
+    borderBottom: "1px solid ".concat(theme.appBorderColor)
+  };
+});
+
+exports.H2 = H2;

package/dist/cjs/typography/elements/H3.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.H3 = void 0;
+
+var _theming = require("@storybook/theming");
+
+var _common = require("../lib/common");
+
+var H3 = _theming.styled.h3(_common.withReset, _common.headerCommon, function (_ref) {
+  var theme = _ref.theme;
+  return {
+    fontSize: "".concat(theme.typography.size.m1, "px")
+  };
+});
+
+exports.H3 = H3;

package/dist/cjs/typography/elements/H4.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.H4 = void 0;
+
+var _theming = require("@storybook/theming");
+
+var _common = require("../lib/common");
+
+var H4 = _theming.styled.h4(_common.withReset, _common.headerCommon, function (_ref) {
+  var theme = _ref.theme;
+  return {
+    fontSize: "".concat(theme.typography.size.s3, "px")
+  };
+});
+
+exports.H4 = H4;

package/dist/cjs/typography/elements/H5.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.H5 = void 0;
+
+var _theming = require("@storybook/theming");
+
+var _common = require("../lib/common");
+
+var H5 = _theming.styled.h5(_common.withReset, _common.headerCommon, function (_ref) {
+  var theme = _ref.theme;
+  return {
+    fontSize: "".concat(theme.typography.size.s2, "px")
+  };
+});
+
+exports.H5 = H5;

package/dist/cjs/typography/elements/H6.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.H6 = void 0;
+
+var _theming = require("@storybook/theming");
+
+var _common = require("../lib/common");
+
+var H6 = _theming.styled.h6(_common.withReset, _common.headerCommon, function (_ref) {
+  var theme = _ref.theme;
+  return {
+    fontSize: "".concat(theme.typography.size.s2, "px"),
+    color: theme.color.dark
+  };
+});
+
+exports.H6 = H6;

package/dist/cjs/typography/elements/HR.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HR = void 0;
+
+var _theming = require("@storybook/theming");
+
+var HR = _theming.styled.hr(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    border: '0 none',
+    borderTop: "1px solid ".concat(theme.appBorderColor),
+    height: 4,
+    padding: 0
+  };
+});
+
+exports.HR = HR;

package/dist/cjs/typography/elements/Img.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Img = void 0;
+
+var _theming = require("@storybook/theming");
+
+var Img = _theming.styled.img({
+  maxWidth: '100%'
+});
+
+exports.Img = Img;

package/dist/cjs/typography/elements/LI.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LI = void 0;
+
+var _theming = require("@storybook/theming");
+
+var _common = require("../lib/common");
+
+var LI = _theming.styled.li(_common.withReset, function (_ref) {
+  var theme = _ref.theme;
+  return {
+    fontSize: theme.typography.size.s2,
+    color: theme.color.defaultText,
+    lineHeight: '24px',
+    '& + li': {
+      marginTop: '.25em'
+    },
+    '& ul, & ol': {
+      marginTop: '.25em',
+      marginBottom: 0
+    },
+    '& code': (0, _common.codeCommon)({
+      theme: theme
+    })
+  };
+});
+
+exports.LI = LI;

package/dist/cjs/typography/elements/Link.js

@@ -0,0 +1,44 @@
+"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.Link = void 0;
+
+require("core-js/modules/es.regexp.exec.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _excluded = ["href", "children"];
+
+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; }
+
+var Link = function Link(_ref) {
+  var input = _ref.href,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var isStorybookPath = /^\//.test(input);
+  var isAnchorUrl = /^#.*/.test(input);
+  var href = isStorybookPath ? "?path=".concat(input) : input;
+  var target = isAnchorUrl ? '_self' : '_top';
+  return /*#__PURE__*/_react.default.createElement("a", _extends({
+    href: href,
+    target: target
+  }, props), children);
+};
+
+exports.Link = Link;
+Link.displayName = "Link";

package/dist/cjs/typography/elements/OL.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OL = void 0;
+
+require("core-js/modules/es.object.assign.js");
+
+var _theming = require("@storybook/theming");
+
+var _common = require("../lib/common");
+
+var listCommon = {
+  paddingLeft: 30,
+  '& :first-of-type': {
+    marginTop: 0
+  },
+  '& :last-child': {
+    marginBottom: 0
+  }
+};
+
+var OL = _theming.styled.ol(_common.withReset, _common.withMargin, Object.assign({}, listCommon, {
+  listStyle: 'decimal'
+}));
+
+exports.OL = OL;

package/dist/cjs/typography/elements/P.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.P = void 0;
+
+var _theming = require("@storybook/theming");
+
+var _common = require("../lib/common");
+
+var P = _theming.styled.p(_common.withReset, _common.withMargin, function (_ref) {
+  var theme = _ref.theme;
+  return {
+    fontSize: theme.typography.size.s2,
+    lineHeight: '24px',
+    color: theme.color.defaultText,
+    '& code': (0, _common.codeCommon)({
+      theme: theme
+    })
+  };
+});
+
+exports.P = P;