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

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

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

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

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

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

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

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

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