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

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

@@ -0,0 +1,207 @@
+"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: 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: undefined,
+  withArrow: false,
+  containsIcon: false
+};

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

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

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

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

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

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

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

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