@storybook/components 6.5.0-alpha.9 → 6.5.0-beta.2

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"));
-});

package/dist/esm/Button/Button.js

@@ -1,239 +0,0 @@
-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; }
-
-import "core-js/modules/es.string.small.js";
-import "core-js/modules/es.string.bold.js";
-import "core-js/modules/es.object.assign.js";
-import "core-js/modules/es.array.concat.js";
-import "core-js/modules/es.object.keys.js";
-import "core-js/modules/es.symbol.js";
-import React, { forwardRef } from 'react';
-import { styled } from '@storybook/theming';
-import { darken, lighten, rgba, transparentize } from 'polished';
-var ButtonWrapper = styled.button(function (_ref) {
-  var small = _ref.small,
-      theme = _ref.theme;
-  return {
-    border: 0,
-    borderRadius: '3em',
-    cursor: 'pointer',
-    display: 'inline-block',
-    overflow: 'hidden',
-    padding: small ? '8px 16px' : '13px 20px',
-    position: 'relative',
-    textAlign: 'center',
-    textDecoration: 'none',
-    transition: 'all 150ms ease-out',
-    transform: 'translate3d(0,0,0)',
-    verticalAlign: 'top',
-    whiteSpace: 'nowrap',
-    userSelect: 'none',
-    opacity: 1,
-    margin: 0,
-    background: 'transparent',
-    fontSize: "".concat(small ? theme.typography.size.s1 : theme.typography.size.s2 - 1, "px"),
-    fontWeight: theme.typography.weight.bold,
-    lineHeight: '1',
-    svg: {
-      display: 'inline-block',
-      height: small ? 14 : 16,
-      width: small ? 14 : 16,
-      verticalAlign: 'top',
-      marginRight: small ? 4 : 6,
-      marginTop: small ? -1 : -2,
-      marginBottom: small ? -1 : -2,
-
-      /* Necessary for js mouse events to not glitch out when hovering on svgs */
-      pointerEvents: 'none',
-      path: {
-        fill: 'currentColor'
-      }
-    }
-  };
-}, function (_ref2) {
-  var disabled = _ref2.disabled;
-  return disabled ? {
-    cursor: 'not-allowed !important',
-    opacity: 0.5,
-    '&:hover': {
-      transform: 'none'
-    }
-  } : {};
-}, function (_ref3) {
-  var containsIcon = _ref3.containsIcon,
-      small = _ref3.small;
-  return containsIcon ? Object.assign({
-    svg: {
-      display: 'block',
-      margin: 0
-    }
-  }, small ? {
-    padding: 9
-  } : {
-    padding: 12
-  }) : {};
-}, function (_ref4) {
-  var theme = _ref4.theme,
-      primary = _ref4.primary,
-      secondary = _ref4.secondary,
-      gray = _ref4.gray;
-  var color;
-
-  if (gray) {
-    color = theme.color.medium;
-  } else if (secondary) {
-    color = theme.color.secondary;
-  } else if (primary) {
-    color = theme.color.primary;
-  }
-
-  return color ? {
-    background: color,
-    color: gray ? theme.color.darkest : theme.color.lightest,
-    '&:hover': {
-      background: darken(0.05, color)
-    },
-    '&:active': {
-      boxShadow: 'rgba(0, 0, 0, 0.1) 0 0 0 3em inset'
-    },
-    '&:focus': {
-      boxShadow: "".concat(rgba(color, 1), " 0 1px 9px 2px"),
-      outline: 'none'
-    },
-    '&:focus:hover': {
-      boxShadow: "".concat(rgba(color, 0.2), " 0 8px 18px 0px")
-    }
-  } : {};
-}, function (_ref5) {
-  var theme = _ref5.theme,
-      tertiary = _ref5.tertiary,
-      inForm = _ref5.inForm,
-      small = _ref5.small;
-  return tertiary ? Object.assign({
-    background: theme.base === 'light' ? darken(0.02, theme.input.background) : lighten(0.02, theme.input.background),
-    color: theme.input.color,
-    boxShadow: "".concat(theme.input.border, " 0 0 0 1px inset"),
-    borderRadius: theme.input.borderRadius
-  }, inForm && small ? {
-    padding: '10px 16px'
-  } : {}, {
-    '&:hover': Object.assign({
-      background: theme.base === 'light' ? darken(0.05, theme.input.background) : lighten(0.05, theme.input.background)
-    }, inForm ? {} : {
-      boxShadow: 'rgba(0,0,0,.2) 0 2px 6px 0, rgba(0,0,0,.1) 0 0 0 1px inset'
-    }),
-    '&:active': {
-      background: theme.input.background
-    },
-    '&:focus': {
-      boxShadow: "".concat(rgba(theme.color.secondary, 1), " 0 0 0 1px inset"),
-      outline: 'none'
-    }
-  }) : {};
-}, function (_ref6) {
-  var theme = _ref6.theme,
-      outline = _ref6.outline;
-  return outline ? {
-    boxShadow: "".concat(transparentize(0.8, theme.color.defaultText), " 0 0 0 1px inset"),
-    color: transparentize(0.3, theme.color.defaultText),
-    background: 'transparent',
-    '&:hover, &:focus': {
-      boxShadow: "".concat(transparentize(0.5, theme.color.defaultText), " 0 0 0 1px inset"),
-      outline: 'none'
-    },
-    '&:active': {
-      boxShadow: "".concat(transparentize(0.5, theme.color.defaultText), " 0 0 0 2px inset"),
-      color: transparentize(0, theme.color.defaultText)
-    }
-  } : {};
-}, function (_ref7) {
-  var theme = _ref7.theme,
-      outline = _ref7.outline,
-      primary = _ref7.primary;
-  var color = theme.color.primary;
-  return outline && primary ? {
-    boxShadow: "".concat(color, " 0 0 0 1px inset"),
-    color: color,
-    'svg path': {
-      fill: color
-    },
-    '&:hover': {
-      boxShadow: "".concat(color, " 0 0 0 1px inset"),
-      background: 'transparent'
-    },
-    '&:active': {
-      background: color,
-      boxShadow: "".concat(color, " 0 0 0 1px inset"),
-      color: theme.color.tertiary
-    },
-    '&:focus': {
-      boxShadow: "".concat(color, " 0 0 0 1px inset, ").concat(rgba(color, 0.4), " 0 1px 9px 2px"),
-      outline: 'none'
-    },
-    '&:focus:hover': {
-      boxShadow: "".concat(color, " 0 0 0 1px inset, ").concat(rgba(color, 0.2), " 0 8px 18px 0px")
-    }
-  } : {};
-}, function (_ref8) {
-  var theme = _ref8.theme,
-      outline = _ref8.outline,
-      primary = _ref8.primary,
-      secondary = _ref8.secondary;
-  var color;
-
-  if (secondary) {
-    color = theme.color.secondary;
-  } else if (primary) {
-    color = theme.color.primary;
-  }
-
-  return outline && color ? {
-    boxShadow: "".concat(color, " 0 0 0 1px inset"),
-    color: color,
-    'svg path': {
-      fill: color
-    },
-    '&:hover': {
-      boxShadow: "".concat(color, " 0 0 0 1px inset"),
-      background: 'transparent'
-    },
-    '&:active': {
-      background: color,
-      boxShadow: "".concat(color, " 0 0 0 1px inset"),
-      color: theme.color.tertiary
-    },
-    '&:focus': {
-      boxShadow: "".concat(color, " 0 0 0 1px inset, ").concat(rgba(color, 0.4), " 0 1px 9px 2px"),
-      outline: 'none'
-    },
-    '&:focus:hover': {
-      boxShadow: "".concat(color, " 0 0 0 1px inset, ").concat(rgba(color, 0.2), " 0 8px 18px 0px")
-    }
-  } : {};
-});
-var ButtonLink = ButtonWrapper.withComponent('a', {
-  target: "ex9hp6v0",
-  label: "ButtonLink"
-});
-export var Button = Object.assign( /*#__PURE__*/forwardRef(function (_ref9, ref) {
-  var isLink = _ref9.isLink,
-      children = _ref9.children,
-      props = _objectWithoutProperties(_ref9, ["isLink", "children"]);
-
-  if (isLink) {
-    return /*#__PURE__*/React.createElement(ButtonLink, _extends({}, props, {
-      ref: ref
-    }), children);
-  }
-
-  return /*#__PURE__*/React.createElement(ButtonWrapper, _extends({}, props, {
-    ref: ref
-  }), children);
-}), {
-  defaultProps: {
-    isLink: false
-  }
-});

package/dist/esm/Button/Button.stories.js

@@ -1,65 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { Button } from './Button';
-import { Icons } from '../icon/icon';
-import { Form } from '../form/index';
-var FormButton = Form.Button;
-storiesOf('Basics/Button', module).add('all buttons', function () {
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "Button that is used for forms"), /*#__PURE__*/React.createElement(FormButton, null, "Form.Button"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("p", null, "Buttons that are used for everything else"), /*#__PURE__*/React.createElement(Button, {
-    primary: true
-  }, "Primary"), /*#__PURE__*/React.createElement(Button, {
-    secondary: true
-  }, "Secondary"), /*#__PURE__*/React.createElement(Button, {
-    outline: true,
-    containsIcon: true,
-    title: "link"
-  }, /*#__PURE__*/React.createElement(Icons, {
-    icon: "link"
-  })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Button, {
-    outline: true
-  }, "Outline"), /*#__PURE__*/React.createElement(Button, {
-    outline: true,
-    primary: true
-  }, "Outline primary"), /*#__PURE__*/React.createElement(Button, {
-    outline: true,
-    secondary: true
-  }, "Outline secondary"), /*#__PURE__*/React.createElement(Button, {
-    primary: true,
-    disabled: true
-  }, "Disabled"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Button, {
-    primary: true,
-    small: true
-  }, "Primary"), /*#__PURE__*/React.createElement(Button, {
-    secondary: true,
-    small: true
-  }, "Secondary"), /*#__PURE__*/React.createElement(Button, {
-    gray: true,
-    small: true
-  }, "Secondary"), /*#__PURE__*/React.createElement(Button, {
-    outline: true,
-    small: true
-  }, "Outline"), /*#__PURE__*/React.createElement(Button, {
-    primary: true,
-    disabled: true,
-    small: true
-  }, "Disabled"), /*#__PURE__*/React.createElement(Button, {
-    outline: true,
-    small: true,
-    containsIcon: true,
-    title: "link"
-  }, /*#__PURE__*/React.createElement(Icons, {
-    icon: "link"
-  })), /*#__PURE__*/React.createElement(Button, {
-    outline: true,
-    small: true
-  }, /*#__PURE__*/React.createElement(Icons, {
-    icon: "link"
-  }), "Link"), /*#__PURE__*/React.createElement(Button, {
-    primary: true,
-    small: true,
-    isLink: true,
-    href: "#"
-  }, /*#__PURE__*/React.createElement(Icons, {
-    icon: "link"
-  }), " Link"));
-});

package/dist/esm/Colors/SideBySide.js

@@ -1,15 +0,0 @@
-import { styled } from '@storybook/theming';
-export var SideBySide = styled.div({
-  display: 'grid',
-  gridColumnGap: 30,
-  gridTemplateColumns: '1fr 1fr',
-  position: 'absolute',
-  width: '100vw',
-  height: '100vh',
-  overflow: 'auto',
-  top: 0,
-  left: 0,
-  '& > *': {
-    padding: 20
-  }
-});