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

package/dist/esm/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/modern/ActionBar/ActionBar.js

@@ -1,74 +0,0 @@
-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 React from 'react';
-import { styled } from '@storybook/theming';
-const Container = styled.div(({
-  theme
-}) => ({
-  position: 'absolute',
-  bottom: 0,
-  right: 0,
-  maxWidth: '100%',
-  display: 'flex',
-  background: theme.background.content,
-  zIndex: 1
-}));
-export const ActionButton = styled.button(({
-  theme
-}) => ({
-  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 ${theme.appBorderColor}`,
-  borderLeft: `1px solid ${theme.appBorderColor}`,
-  marginLeft: -1,
-  borderRadius: `4px 0 0 0`,
-  '&:not(:last-child)': {
-    borderRight: `1px solid ${theme.appBorderColor}`
-  },
-  '& + *': {
-    borderLeft: `1px solid ${theme.appBorderColor}`,
-    borderRadius: 0
-  },
-  '&:focus': {
-    boxShadow: `${theme.color.secondary} 0 -3px 0 0 inset`,
-    outline: '0 none'
-  }
-}), ({
-  disabled
-}) => disabled && {
-  cursor: 'not-allowed',
-  opacity: 0.5
-});
-ActionButton.displayName = 'ActionButton';
-export const ActionBar = (_ref) => {
-  let {
-    actionItems
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["actionItems"]);
-
-  return /*#__PURE__*/React.createElement(Container, props, actionItems.map(({
-    title,
-    className,
-    onClick,
-    disabled
-  }, index) =>
-  /*#__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/modern/ActionBar/ActionBar.stories.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import { ActionBar } from './ActionBar';
-const action1 = action('action1');
-const action2 = action('action2');
-const action3 = action('action3');
-export default {
-  component: ActionBar,
-  title: 'Basics/ActionBar',
-  decorators: [storyFn => /*#__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 const SingleItem = () => /*#__PURE__*/React.createElement(ActionBar, {
-  actionItems: [{
-    title: 'Clear',
-    onClick: action1
-  }]
-});
-SingleItem.displayName = "SingleItem";
-export const ManyItems = () => /*#__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/modern/Badge/Badge.js

@@ -1,78 +0,0 @@
-import React from 'react';
-import { styled } from '@storybook/theming';
-const BadgeWrapper = styled.div(({
-  theme
-}) => ({
-  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'
-    }
-  }
-}, ({
-  theme,
-  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 const Badge = (_ref) => {
-  let props = Object.assign({}, _ref);
-  return /*#__PURE__*/React.createElement(BadgeWrapper, props);
-};
-Badge.displayName = "Badge";

package/dist/modern/Badge/Badge.stories.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { Badge } from './Badge';
-storiesOf('Basics/Badge', module).add('all badges', () => /*#__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/modern/Button/Button.js

@@ -1,231 +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 _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 React, { forwardRef } from 'react';
-import { styled } from '@storybook/theming';
-import { darken, lighten, rgba, transparentize } from 'polished';
-const ButtonWrapper = styled.button(({
-  small,
-  theme
-}) => ({
-  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: `${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'
-    }
-  }
-}), ({
-  disabled
-}) => disabled ? {
-  cursor: 'not-allowed !important',
-  opacity: 0.5,
-  '&:hover': {
-    transform: 'none'
-  }
-} : {}, ({
-  containsIcon,
-  small
-}) => containsIcon ? Object.assign({
-  svg: {
-    display: 'block',
-    margin: 0
-  }
-}, small ? {
-  padding: 9
-} : {
-  padding: 12
-}) : {}, ({
-  theme,
-  primary,
-  secondary,
-  gray
-}) => {
-  let 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: `${rgba(color, 1)} 0 1px 9px 2px`,
-      outline: 'none'
-    },
-    '&:focus:hover': {
-      boxShadow: `${rgba(color, 0.2)} 0 8px 18px 0px`
-    }
-  } : {};
-}, ({
-  theme,
-  tertiary,
-  inForm,
-  small
-}) => tertiary ? Object.assign({
-  background: theme.base === 'light' ? darken(0.02, theme.input.background) : lighten(0.02, theme.input.background),
-  color: theme.input.color,
-  boxShadow: `${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: `${rgba(theme.color.secondary, 1)} 0 0 0 1px inset`,
-    outline: 'none'
-  }
-}) : {}, ({
-  theme,
-  outline
-}) => outline ? {
-  boxShadow: `${transparentize(0.8, theme.color.defaultText)} 0 0 0 1px inset`,
-  color: transparentize(0.3, theme.color.defaultText),
-  background: 'transparent',
-  '&:hover, &:focus': {
-    boxShadow: `${transparentize(0.5, theme.color.defaultText)} 0 0 0 1px inset`,
-    outline: 'none'
-  },
-  '&:active': {
-    boxShadow: `${transparentize(0.5, theme.color.defaultText)} 0 0 0 2px inset`,
-    color: transparentize(0, theme.color.defaultText)
-  }
-} : {}, ({
-  theme,
-  outline,
-  primary
-}) => {
-  const color = theme.color.primary;
-  return outline && primary ? {
-    boxShadow: `${color} 0 0 0 1px inset`,
-    color,
-    'svg path': {
-      fill: color
-    },
-    '&:hover': {
-      boxShadow: `${color} 0 0 0 1px inset`,
-      background: 'transparent'
-    },
-    '&:active': {
-      background: color,
-      boxShadow: `${color} 0 0 0 1px inset`,
-      color: theme.color.tertiary
-    },
-    '&:focus': {
-      boxShadow: `${color} 0 0 0 1px inset, ${rgba(color, 0.4)} 0 1px 9px 2px`,
-      outline: 'none'
-    },
-    '&:focus:hover': {
-      boxShadow: `${color} 0 0 0 1px inset, ${rgba(color, 0.2)} 0 8px 18px 0px`
-    }
-  } : {};
-}, ({
-  theme,
-  outline,
-  primary,
-  secondary
-}) => {
-  let color;
-
-  if (secondary) {
-    color = theme.color.secondary;
-  } else if (primary) {
-    color = theme.color.primary;
-  }
-
-  return outline && color ? {
-    boxShadow: `${color} 0 0 0 1px inset`,
-    color,
-    'svg path': {
-      fill: color
-    },
-    '&:hover': {
-      boxShadow: `${color} 0 0 0 1px inset`,
-      background: 'transparent'
-    },
-    '&:active': {
-      background: color,
-      boxShadow: `${color} 0 0 0 1px inset`,
-      color: theme.color.tertiary
-    },
-    '&:focus': {
-      boxShadow: `${color} 0 0 0 1px inset, ${rgba(color, 0.4)} 0 1px 9px 2px`,
-      outline: 'none'
-    },
-    '&:focus:hover': {
-      boxShadow: `${color} 0 0 0 1px inset, ${rgba(color, 0.2)} 0 8px 18px 0px`
-    }
-  } : {};
-});
-const ButtonLink = ButtonWrapper.withComponent('a', {
-  target: "ex9hp6v0",
-  label: "ButtonLink"
-});
-export const Button = Object.assign( /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    isLink,
-    children
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["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/modern/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';
-const {
-  Button: FormButton
-} = Form;
-storiesOf('Basics/Button', module).add('all buttons', () => /*#__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/modern/Colors/SideBySide.js

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