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

package/dist/modern/form/input/input.js

@@ -0,0 +1,203 @@
+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 TextareaAutoResize from 'react-textarea-autosize';
+import { Button as StyledButton } from '../../Button/Button';
+const styleResets = {
+  // resets
+  appearance: 'none',
+  border: '0 none',
+  boxSizing: 'inherit',
+  display: ' block',
+  margin: ' 0',
+  background: 'transparent',
+  padding: 0,
+  fontSize: 'inherit',
+  position: 'relative'
+};
+
+const styles = ({
+  theme
+}) => Object.assign({}, styleResets, {
+  transition: 'box-shadow 200ms ease-out, opacity 200ms ease-out',
+  color: theme.input.color || 'inherit',
+  background: theme.input.background,
+  boxShadow: `${theme.input.border} 0 0 0 1px inset`,
+  borderRadius: theme.input.borderRadius,
+  fontSize: theme.typography.size.s2 - 1,
+  lineHeight: '20px',
+  padding: '6px 10px',
+  // 32
+  '&:focus': {
+    boxShadow: `${theme.color.secondary} 0 0 0 1px inset`,
+    outline: 'none'
+  },
+  '&[disabled]': {
+    cursor: 'not-allowed',
+    opacity: 0.5
+  },
+  '&:-webkit-autofill': {
+    WebkitBoxShadow: `0 0 0 3em ${theme.color.lightest} inset`
+  },
+  '::placeholder': {
+    color: theme.color.mediumdark
+  }
+});
+
+const sizes = ({
+  size
+}) => {
+  switch (size) {
+    case '100%':
+      {
+        return {
+          width: '100%'
+        };
+      }
+
+    case 'flex':
+      {
+        return {
+          flex: 1
+        };
+      }
+
+    case 'auto':
+    default:
+      {
+        return {
+          display: 'inline'
+        };
+      }
+  }
+};
+
+const alignment = ({
+  align
+}) => {
+  switch (align) {
+    case 'end':
+      {
+        return {
+          textAlign: 'right'
+        };
+      }
+
+    case 'center':
+      {
+        return {
+          textAlign: 'center'
+        };
+      }
+
+    case 'start':
+    default:
+      {
+        return {
+          textAlign: 'left'
+        };
+      }
+  }
+};
+
+const validation = ({
+  valid,
+  theme
+}) => {
+  switch (valid) {
+    case 'valid':
+      {
+        return {
+          boxShadow: `${theme.color.positive} 0 0 0 1px inset !important`
+        };
+      }
+
+    case 'error':
+      {
+        return {
+          boxShadow: `${theme.color.negative} 0 0 0 1px inset !important`
+        };
+      }
+
+    case 'warn':
+      {
+        return {
+          boxShadow: `${theme.color.warning} 0 0 0 1px inset`
+        };
+      }
+
+    case undefined:
+    case null:
+    default:
+      {
+        return {};
+      }
+  }
+};
+
+export const Input = Object.assign(styled( /*#__PURE__*/forwardRef((_ref, ref) => {
+  let props = _objectWithoutPropertiesLoose(_ref, ["size", "valid", "align"]);
+
+  return /*#__PURE__*/React.createElement("input", _extends({}, props, {
+    ref: ref
+  }));
+}))(styles, sizes, alignment, validation, {
+  minHeight: 32
+}), {
+  displayName: 'Input'
+});
+export const Select = Object.assign(styled( /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let props = _objectWithoutPropertiesLoose(_ref2, ["size", "valid", "align"]);
+
+  return /*#__PURE__*/React.createElement("select", _extends({}, props, {
+    ref: ref
+  }));
+}))(styles, sizes, validation, {
+  height: 32,
+  userSelect: 'none',
+  paddingRight: 20,
+  appearance: 'menulist'
+}), {
+  displayName: 'Select'
+});
+export const Textarea = Object.assign(styled( /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let props = _objectWithoutPropertiesLoose(_ref3, ["size", "valid", "align"]);
+
+  return /*#__PURE__*/React.createElement(TextareaAutoResize, _extends({}, props, {
+    ref: ref
+  }));
+}))(styles, sizes, alignment, validation, ({
+  height = 400
+}) => ({
+  overflow: 'visible',
+  maxHeight: height
+})), {
+  displayName: 'Textarea'
+});
+const ButtonStyled = styled( /*#__PURE__*/forwardRef((_ref4, ref) => {
+  let props = _objectWithoutPropertiesLoose(_ref4, ["size", "valid", "align"]);
+
+  return /*#__PURE__*/React.createElement(StyledButton, _extends({}, props, {
+    ref: ref
+  }));
+}))(sizes, validation, {
+  // Custom styling for color widget nested in buttons
+  userSelect: 'none',
+  overflow: 'visible',
+  zIndex: 2,
+  // overrides the default hover from Button
+  '&:hover': {
+    transform: 'none'
+  }
+});
+export const Button = Object.assign( /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(ButtonStyled, _extends({}, props, {
+  tertiary: true,
+  small: true,
+  inForm: true,
+  ref: ref
+}))), {
+  displayName: 'Button'
+});

package/dist/modern/html.js

@@ -0,0 +1,10 @@
+import dedent from 'ts-dedent';
+import deprecate from 'util-deprecate';
+const deprecatedHtmlEndpoint = deprecate(() => {}, dedent`
+    The entry point '@storybook/components/html' is deprecated. Please use '@storybook/components' directly instead.
+
+    See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-storybook-components-html-entry-point
+  `);
+deprecatedHtmlEndpoint();
+export * from './typography/DocumentFormatting';
+export { components, resetComponents } from './index';

package/dist/modern/icon/icon.js

@@ -0,0 +1,43 @@
+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 from 'react';
+import { styled } from '@storybook/theming';
+import icons from './icons';
+import Svg from './svg';
+const Path = styled.path({
+  fill: 'currentColor'
+});
+// TODO: if we can resize the 1024 to 20, we can remove the size attributes
+export const Icons = /*#__PURE__*/React.memo((_ref) => {
+  let {
+    icon,
+    symbol
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["icon", "symbol"]);
+
+  return /*#__PURE__*/React.createElement(Svg, _extends({
+    viewBox: "0 0 1024 1024"
+  }, props), symbol ? /*#__PURE__*/React.createElement("use", {
+    xlinkHref: `#icon--${symbol}`
+  }) : /*#__PURE__*/React.createElement(Path, {
+    d: icons[icon]
+  }));
+});
+export const Symbols = /*#__PURE__*/React.memo(({
+  icons: keys = Object.keys(icons)
+}) => /*#__PURE__*/React.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  style: {
+    position: 'absolute',
+    width: 0,
+    height: 0
+  },
+  "data-chromatic": "ignore"
+}, keys.map(key => /*#__PURE__*/React.createElement("symbol", {
+  id: `icon--${key}`,
+  key: key
+}, /*#__PURE__*/React.createElement(Path, {
+  d: icons[key]
+})))));

package/dist/modern/icon/icon.stories.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { storiesOf } from '@storybook/react';
+import { Icons } from './icon';
+import { icons } from './icons';
+const Meta = styled.div({
+  color: '#333',
+  fontSize: 12
+});
+const Item = styled.div({
+  display: 'inline-flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  flex: '0 1 20%',
+  minWidth: 120,
+  padding: '0px 7.5px 20px',
+  '& svg': {
+    marginRight: 10,
+    width: 24,
+    height: 24
+  }
+}, ({
+  minimal
+}) => minimal ? {
+  flex: 'none',
+  minWidth: 'auto',
+  padding: 0,
+  background: '#fff',
+  border: '1px solid #666',
+  '& svg': {
+    display: 'block',
+    marginRight: 0,
+    width: 48,
+    height: 48
+  }
+} : {});
+const List = styled.div({
+  display: 'flex',
+  flexFlow: 'row wrap'
+});
+const list = Object.keys(icons).sort();
+storiesOf('Basics/Icon', module).add('labels', () => /*#__PURE__*/React.createElement(List, null, list.map(key => /*#__PURE__*/React.createElement(Item, {
+  key: key
+}, /*#__PURE__*/React.createElement(Icons, {
+  icon: key
+}), " ", /*#__PURE__*/React.createElement(Meta, null, key))))).add('no labels', () => /*#__PURE__*/React.createElement(List, null, list.map(key => /*#__PURE__*/React.createElement(Item, {
+  minimal: true,
+  key: key
+}, /*#__PURE__*/React.createElement(Icons, {
+  icon: key
+})))));