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

package/dist/cjs/typography/link/link.js

@@ -1,207 +0,0 @@
-"use strict";
-
-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.object.keys.js");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _theming = require("@storybook/theming");
-
-var _polished = require("polished");
-
-var _icon = require("../../icon/icon");
-
-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; }
-
-// Cmd/Ctrl/Shift/Alt + Click should trigger default browser behavior. Same applies to non-left clicks
-var LEFT_BUTTON = 0;
-
-var isPlainLeftClick = function isPlainLeftClick(e) {
-  return e.button === LEFT_BUTTON && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey;
-};
-
-var cancelled = function cancelled(e, cb) {
-  if (isPlainLeftClick(e)) {
-    e.preventDefault();
-    cb(e);
-  }
-};
-
-var LinkInner = _theming.styled.span(function (_ref) {
-  var withArrow = _ref.withArrow;
-  return withArrow ? {
-    '> svg:last-of-type': {
-      height: '0.7em',
-      width: '0.7em',
-      marginRight: 0,
-      marginLeft: '0.25em',
-      bottom: 'auto',
-      verticalAlign: 'inherit'
-    }
-  } : {};
-}, function (_ref2) {
-  var containsIcon = _ref2.containsIcon;
-  return containsIcon ? {
-    svg: {
-      height: '1em',
-      width: '1em',
-      verticalAlign: 'middle',
-      position: 'relative',
-      bottom: 0,
-      marginRight: 0
-    }
-  } : {};
-});
-
-var A = _theming.styled.a(function (_ref3) {
-  var theme = _ref3.theme;
-  return {
-    display: 'inline-block',
-    transition: 'all 150ms ease-out',
-    textDecoration: 'none',
-    color: theme.color.secondary,
-    '&:hover, &:focus': {
-      cursor: 'pointer',
-      color: (0, _polished.darken)(0.07, theme.color.secondary),
-      'svg path': {
-        fill: (0, _polished.darken)(0.07, theme.color.secondary)
-      }
-    },
-    '&:active': {
-      color: (0, _polished.darken)(0.1, theme.color.secondary),
-      'svg path': {
-        fill: (0, _polished.darken)(0.1, theme.color.secondary)
-      }
-    },
-    svg: {
-      display: 'inline-block',
-      height: '1em',
-      width: '1em',
-      verticalAlign: 'text-top',
-      position: 'relative',
-      bottom: '-0.125em',
-      marginRight: '0.4em',
-      '& path': {
-        fill: theme.color.secondary
-      }
-    }
-  };
-}, function (_ref4) {
-  var theme = _ref4.theme,
-      secondary = _ref4.secondary,
-      tertiary = _ref4.tertiary;
-  var colors;
-
-  if (secondary) {
-    colors = [theme.color.mediumdark, theme.color.dark, theme.color.darker];
-  }
-
-  if (tertiary) {
-    colors = [theme.color.dark, theme.color.darkest, theme.color.mediumdark];
-  }
-
-  return colors ? {
-    color: colors[0],
-    'svg path': {
-      fill: colors[0]
-    },
-    '&:hover': {
-      color: colors[1],
-      'svg path': {
-        fill: colors[1]
-      }
-    },
-    '&:active': {
-      color: colors[2],
-      'svg path': {
-        fill: colors[2]
-      }
-    }
-  } : {};
-}, function (_ref5) {
-  var nochrome = _ref5.nochrome;
-  return nochrome ? {
-    color: 'inherit',
-    '&:hover, &:active': {
-      color: 'inherit',
-      textDecoration: 'underline'
-    }
-  } : {};
-}, function (_ref6) {
-  var theme = _ref6.theme,
-      inverse = _ref6.inverse;
-  return inverse ? {
-    color: theme.color.lightest,
-    'svg path': {
-      fill: theme.color.lightest
-    },
-    '&:hover': {
-      color: theme.color.lighter,
-      'svg path': {
-        fill: theme.color.lighter
-      }
-    },
-    '&:active': {
-      color: theme.color.light,
-      'svg path': {
-        fill: theme.color.light
-      }
-    }
-  } : {};
-}, function (_ref7) {
-  var isButton = _ref7.isButton;
-  return isButton ? {
-    border: 0,
-    borderRadius: 0,
-    background: 'none',
-    padding: 0,
-    fontSize: 'inherit'
-  } : {};
-});
-
-var Link = function Link(_ref8) {
-  var cancel = _ref8.cancel,
-      children = _ref8.children,
-      onClick = _ref8.onClick,
-      withArrow = _ref8.withArrow,
-      containsIcon = _ref8.containsIcon,
-      className = _ref8.className,
-      rest = _objectWithoutProperties(_ref8, ["cancel", "children", "onClick", "withArrow", "containsIcon", "className"]);
-
-  return /*#__PURE__*/_react.default.createElement(A, _extends({}, rest, {
-    onClick: cancel ? function (e) {
-      return cancelled(e, onClick);
-    } : onClick,
-    className: className
-  }), /*#__PURE__*/_react.default.createElement(LinkInner, {
-    withArrow: withArrow,
-    containsIcon: containsIcon
-  }, children, withArrow && /*#__PURE__*/_react.default.createElement(_icon.Icons, {
-    icon: "arrowright"
-  })));
-};
-
-exports.Link = Link;
-Link.displayName = "Link";
-Link.defaultProps = {
-  cancel: true,
-  className: undefined,
-  style: undefined,
-  onClick: function onClick() {},
-  withArrow: false,
-  containsIcon: false
-};

package/dist/cjs/typography/link/link.stories.js

@@ -1,71 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@storybook/react");
-
-var _addonActions = require("@storybook/addon-actions");
-
-var _link = require("./link");
-
-var _icon = require("../../icon/icon");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var onClick = (0, _addonActions.action)('onClick');
-(0, _react2.storiesOf)('Basics/Link', module).add('cancel w/ onClick', function () {
-  return /*#__PURE__*/_react.default.createElement(_link.Link, {
-    cancel: true,
-    href: "/",
-    onClick: onClick
-  }, "Try clicking with different mouse buttons and modifier keys (shift/ctrl/alt/cmd)");
-}).add('cancel w/ href', function () {
-  return /*#__PURE__*/_react.default.createElement(_link.Link, {
-    cancel: true,
-    href: "http://example.com"
-  }, "Link");
-}).add('no-cancel w/ onClick', function () {
-  return /*#__PURE__*/_react.default.createElement(_link.Link, {
-    href: "/",
-    onClick: onClick
-  }, "any click will go through");
-}).add('no-cancel w/ href', function () {
-  return /*#__PURE__*/_react.default.createElement(_link.Link, {
-    cancel: true,
-    href: "http://example.com"
-  }, "Link");
-}).add('styled links', function () {
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_link.Link, {
-    href: "http://google.com"
-  }, "Default"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_link.Link, {
-    secondary: true,
-    href: "http://google.com"
-  }, "Secondary"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_link.Link, {
-    tertiary: true,
-    href: "http://google.com"
-  }, "tertiary"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_link.Link, {
-    nochrome: true,
-    href: "http://google.com"
-  }, "nochrome"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_link.Link, {
-    href: "http://google.com"
-  }, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
-    icon: "discord"
-  }), "With icon in front"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_link.Link, {
-    title: "Toggle sidebar",
-    containsIcon: true,
-    href: "http://google.com"
-  }, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
-    icon: "sidebar"
-  })), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_link.Link, {
-    containsIcon: true,
-    withArrow: true,
-    href: "http://google.com"
-  }, "With arrow behind"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("span", {
-    style: {
-      background: '#333'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_link.Link, {
-    inverse: true,
-    href: "http://google.com"
-  }, "Inverted colors")), /*#__PURE__*/_react.default.createElement("br", null));
-});

package/dist/cjs/typography/shared.js

@@ -1,67 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.withMargin = exports.withReset = exports.codeCommon = exports.headerCommon = void 0;
-
-var _polished = require("polished");
-
-var headerCommon = function headerCommon(_ref) {
-  var theme = _ref.theme;
-  return {
-    margin: '20px 0 8px',
-    padding: 0,
-    cursor: 'text',
-    position: 'relative',
-    color: theme.color.defaultText,
-    '&:first-of-type': {
-      marginTop: 0,
-      paddingTop: 0
-    },
-    '&:hover a.anchor': {
-      textDecoration: 'none'
-    },
-    '& tt, & code': {
-      fontSize: 'inherit'
-    }
-  };
-};
-
-exports.headerCommon = headerCommon;
-
-var codeCommon = function codeCommon(_ref2) {
-  var theme = _ref2.theme;
-  return {
-    lineHeight: 1,
-    margin: '0 2px',
-    padding: '3px 5px',
-    whiteSpace: 'nowrap',
-    borderRadius: 3,
-    fontSize: theme.typography.size.s2 - 1,
-    border: theme.base === 'light' ? "1px solid ".concat(theme.color.mediumlight) : "1px solid ".concat(theme.color.darker),
-    color: theme.base === 'light' ? (0, _polished.transparentize)(0.1, theme.color.defaultText) : (0, _polished.transparentize)(0.3, theme.color.defaultText),
-    backgroundColor: theme.base === 'light' ? theme.color.lighter : theme.color.border
-  };
-};
-
-exports.codeCommon = codeCommon;
-
-var withReset = function withReset(_ref3) {
-  var theme = _ref3.theme;
-  return {
-    fontFamily: theme.typography.fonts.base,
-    fontSize: theme.typography.size.s3,
-    margin: 0,
-    WebkitFontSmoothing: 'antialiased',
-    MozOsxFontSmoothing: 'grayscale',
-    WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
-    WebkitOverflowScrolling: 'touch'
-  };
-};
-
-exports.withReset = withReset;
-var withMargin = {
-  margin: '16px 0'
-};
-exports.withMargin = withMargin;

package/dist/cjs/typography/typography.stories.mdx

@@ -1,75 +0,0 @@
-import { typography } from '@storybook/theming';
-import { Meta, Typeset } from '@storybook/addon-docs';
-
-export const fontSizes = ['l3', 'l2', 'l1', 'm3', 'm2', 'm1', 's3', 's2', 's1'].map(
-  (size) => `${typography.size[size]}px`
-);
-
-export const sampleText =
-  'Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.';
-
-<Meta title="Basics/Typography" />
-
-## Sans-serif
-
-```
-font-family:
-  "Nunito Sans",
-  -apple-system,
-  ".SFNSText-Regular",
-  "San Francisco",
-  BlinkMacSystemFont,
-  "Segoe UI",
-  "Helvetica Neue",
-  Helvetica,
-  Arial,
-  sans-serif;
-```
-
-<Typeset
-  fontFamily={typography.fonts.base}
-  fontSizes={fontSizes}
-  fontWeight={typography.weight.regular}
-  sampleText={sampleText}
-/>
-<Typeset
-  fontFamily={typography.fonts.base}
-  fontSizes={fontSizes}
-  fontWeight={typography.weight.bold}
-  sampleText={sampleText}
-/>
-<Typeset
-  fontFamily={typography.fonts.base}
-  fontSizes={fontSizes}
-  fontWeight={typography.weight.black}
-  sampleText={sampleText}
-/>
-
-## Monospace
-
-```
-font-family:
-  ui-monospace,
-  Menlo,
-  Monaco,
-  "Roboto Mono",
-  "Oxygen Mono",
-  "Ubuntu Monospace",
-  "Source Code Pro",
-  "Droid Sans Mono",
-  "Courier New",
-  monospace;
-```
-
-<Typeset
-  fontFamily={typography.fonts.mono}
-  fontSizes={fontSizes}
-  fontWeight={typography.weight.regular}
-  sampleText={sampleText}
-/>
-<Typeset
-  fontFamily={typography.fonts.mono}
-  fontSizes={fontSizes}
-  fontWeight={typography.weight.bold}
-  sampleText={sampleText}
-/>

package/dist/esm/ActionBar/ActionBar.js

@@ -1,83 +0,0 @@
-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; }
-
-import "core-js/modules/es.string.bold.js";
-import "core-js/modules/es.array.map.js";
-import "core-js/modules/es.object.keys.js";
-import "core-js/modules/es.symbol.js";
-import React from 'react';
-import { styled } from '@storybook/theming';
-var Container = styled.div(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    position: 'absolute',
-    bottom: 0,
-    right: 0,
-    maxWidth: '100%',
-    display: 'flex',
-    background: theme.background.content,
-    zIndex: 1
-  };
-});
-export var ActionButton = styled.button(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    margin: 0,
-    border: '0 none',
-    padding: '4px 10px',
-    cursor: 'pointer',
-    display: 'flex',
-    alignItems: 'center',
-    color: theme.color.defaultText,
-    background: theme.background.content,
-    fontSize: 12,
-    lineHeight: '16px',
-    fontFamily: theme.typography.fonts.base,
-    fontWeight: theme.typography.weight.bold,
-    borderTop: "1px solid ".concat(theme.appBorderColor),
-    borderLeft: "1px solid ".concat(theme.appBorderColor),
-    marginLeft: -1,
-    borderRadius: "4px 0 0 0",
-    '&:not(:last-child)': {
-      borderRight: "1px solid ".concat(theme.appBorderColor)
-    },
-    '& + *': {
-      borderLeft: "1px solid ".concat(theme.appBorderColor),
-      borderRadius: 0
-    },
-    '&:focus': {
-      boxShadow: "".concat(theme.color.secondary, " 0 -3px 0 0 inset"),
-      outline: '0 none'
-    }
-  };
-}, function (_ref3) {
-  var disabled = _ref3.disabled;
-  return disabled && {
-    cursor: 'not-allowed',
-    opacity: 0.5
-  };
-});
-ActionButton.displayName = 'ActionButton';
-export var ActionBar = function ActionBar(_ref4) {
-  var actionItems = _ref4.actionItems,
-      props = _objectWithoutProperties(_ref4, ["actionItems"]);
-
-  return /*#__PURE__*/React.createElement(Container, props, actionItems.map(function (_ref5, index) {
-    var title = _ref5.title,
-        className = _ref5.className,
-        onClick = _ref5.onClick,
-        disabled = _ref5.disabled;
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line react/no-array-index-key
-      React.createElement(ActionButton, {
-        key: index,
-        className: className,
-        onClick: onClick,
-        disabled: disabled
-      }, title)
-    );
-  }));
-};
-ActionBar.displayName = "ActionBar";

package/dist/esm/ActionBar/ActionBar.stories.js

@@ -1,47 +0,0 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import { ActionBar } from './ActionBar';
-var action1 = action('action1');
-var action2 = action('action2');
-var action3 = action('action3');
-export default {
-  component: ActionBar,
-  title: 'Basics/ActionBar',
-  decorators: [function (storyFn) {
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        position: 'relative',
-        width: '300px',
-        height: '64px',
-        margin: '1rem',
-        background: 'papayawhip',
-        border: '1px solid rgba(0,0,0,.05)'
-      }
-    }, storyFn());
-  }]
-};
-export var singleItem = function singleItem() {
-  return /*#__PURE__*/React.createElement(ActionBar, {
-    actionItems: [{
-      title: 'Clear',
-      onClick: action1
-    }]
-  });
-};
-singleItem.displayName = "singleItem";
-export var manyItems = function manyItems() {
-  return /*#__PURE__*/React.createElement(ActionBar, {
-    actionItems: [{
-      title: 'Action string',
-      onClick: action1
-    }, {
-      title: /*#__PURE__*/React.createElement("div", null, "Action node"),
-      onClick: action2
-    }, {
-      title: 'Long action string',
-      className: 'long-action-button',
-      onClick: action3
-    }]
-  });
-};
-manyItems.displayName = "manyItems";

package/dist/esm/Badge/Badge.js

@@ -1,81 +0,0 @@
-import "core-js/modules/es.string.bold.js";
-import "core-js/modules/es.object.assign.js";
-import React from 'react';
-import { styled } from '@storybook/theming';
-var BadgeWrapper = styled.div(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    display: 'inline-block',
-    fontSize: 11,
-    lineHeight: '12px',
-    alignSelf: 'center',
-    padding: '4px 12px',
-    borderRadius: '3em',
-    fontWeight: theme.typography.weight.bold
-  };
-}, {
-  svg: {
-    height: 12,
-    width: 12,
-    marginRight: 4,
-    marginTop: -2,
-    path: {
-      fill: 'currentColor'
-    }
-  }
-}, function (_ref2) {
-  var theme = _ref2.theme,
-      status = _ref2.status;
-
-  switch (status) {
-    case 'critical':
-      {
-        return {
-          color: theme.color.critical,
-          background: theme.background.critical
-        };
-      }
-
-    case 'negative':
-      {
-        return {
-          color: theme.color.negative,
-          background: theme.background.negative
-        };
-      }
-
-    case 'warning':
-      {
-        return {
-          color: theme.color.warning,
-          background: theme.background.warning
-        };
-      }
-
-    case 'neutral':
-      {
-        return {
-          color: theme.color.dark,
-          background: theme.color.mediumlight
-        };
-      }
-
-    case 'positive':
-      {
-        return {
-          color: theme.color.positive,
-          background: theme.background.positive
-        };
-      }
-
-    default:
-      {
-        return {};
-      }
-  }
-});
-export var Badge = function Badge(_ref3) {
-  var props = Object.assign({}, _ref3);
-  return /*#__PURE__*/React.createElement(BadgeWrapper, props);
-};
-Badge.displayName = "Badge";

package/dist/esm/Badge/Badge.stories.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { Badge } from './Badge';
-storiesOf('Basics/Badge', module).add('all badges', function () {
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Badge, {
-    status: "positive"
-  }, "Positive"), /*#__PURE__*/React.createElement(Badge, {
-    status: "negative"
-  }, "Negative"), /*#__PURE__*/React.createElement(Badge, {
-    status: "neutral"
-  }, "Neutral"));
-});