@bundle-stats/ui 3.1.4-alpha.0 → 3.2.1-alpha.0

package/lib-esm/ui/input/input.stories.js

@@ -2,16 +2,12 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { Input } from '.';
-var stories = storiesOf('UI/Input', module);
+const stories = storiesOf('UI/Input', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(Input, {
-    placeholder: "Search"
-  });
-});
-stories.add('with size', function () {
-  return /*#__PURE__*/React.createElement(Input, {
-    size: "small",
-    placeholder: "Search"
-  });
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(Input, {
+  placeholder: "Search"
+}));
+stories.add('with size', () => /*#__PURE__*/React.createElement(Input, {
+  size: "small",
+  placeholder: "Search"
+}));

package/lib-esm/ui/loader/loader.js

@@ -1,22 +1,16 @@
-var _excluded = ["className", "size"];
-
 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 PropTypes from 'prop-types';
 import cx from 'classnames';
 import css from './loader.module.css';
-export var Loader = function Loader(_ref) {
-  var className = _ref.className,
-      size = _ref.size,
-      restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return /*#__PURE__*/React.createElement("span", _extends({
-    className: cx(css.root, className, css[size])
-  }, restProps));
-};
+export const Loader = ({
+  className,
+  size,
+  ...restProps
+}) => /*#__PURE__*/React.createElement("span", _extends({
+  className: cx(css.root, className, css[size])
+}, restProps));
 Loader.SIZE_SMALL = 'small';
 Loader.SIZE_MEDIUM = 'medium';
 Loader.SIZE_LARGE = 'large';

package/lib-esm/ui/loader/loader.stories.js

@@ -2,13 +2,9 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { Loader } from '.';
-var stories = storiesOf('UI/Loader', module);
+const stories = storiesOf('UI/Loader', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(Loader, null);
-});
-stories.add('with size', function () {
-  return /*#__PURE__*/React.createElement(Loader, {
-    size: Loader.SIZE_LARGE
-  });
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(Loader, null));
+stories.add('with size', () => /*#__PURE__*/React.createElement(Loader, {
+  size: Loader.SIZE_LARGE
+}));

package/lib-esm/ui/logo/logo.constants.js

@@ -1,6 +1,6 @@
-export var KIND_LOGO = 'logo';
-export var KIND_LOGOTYPE = 'logotype';
-export var KIND_GITHUB = 'github';
-export var KIND_WEBPACK = 'webpack';
-export var KIND_DEFAULT = KIND_LOGO;
-export var KINDS = [KIND_LOGO, KIND_LOGOTYPE, KIND_GITHUB, KIND_WEBPACK];
+export const KIND_LOGO = 'logo';
+export const KIND_LOGOTYPE = 'logotype';
+export const KIND_GITHUB = 'github';
+export const KIND_WEBPACK = 'webpack';
+export const KIND_DEFAULT = KIND_LOGO;
+export const KINDS = [KIND_LOGO, KIND_LOGOTYPE, KIND_GITHUB, KIND_WEBPACK];

package/lib-esm/ui/logo/logo.js

@@ -1,11 +1,5 @@
-var _excluded = ["className", "as", "kind"];
-
-var _ICONS;
-
 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 PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -78,15 +72,20 @@ WebpackSvg.defaultProps = {
 };
 import { KIND_DEFAULT, KIND_LOGO, KIND_LOGOTYPE, KIND_GITHUB, KIND_WEBPACK, KINDS } from './logo.constants';
 import css from './logo.module.css';
-var ICONS = (_ICONS = {}, _ICONS[KIND_GITHUB] = GithubSvg, _ICONS[KIND_LOGOTYPE] = LogotypeSvg, _ICONS[KIND_LOGO] = LogoSvg, _ICONS[KIND_WEBPACK] = WebpackSvg, _ICONS);
-export var Logo = function Logo(_ref) {
-  var className = _ref.className,
-      Component = _ref.as,
-      kind = _ref.kind,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  var rootClassName = cx(css.root, css[kind], className);
-  var Svg = ICONS[kind] || LogoSvg;
+const ICONS = {
+  [KIND_GITHUB]: GithubSvg,
+  [KIND_LOGOTYPE]: LogotypeSvg,
+  [KIND_LOGO]: LogoSvg,
+  [KIND_WEBPACK]: WebpackSvg
+};
+export const Logo = ({
+  className,
+  as: Component,
+  kind,
+  ...props
+}) => {
+  const rootClassName = cx(css.root, css[kind], className);
+  const Svg = ICONS[kind] || LogoSvg;
   return /*#__PURE__*/React.createElement(Component, _extends({
     className: rootClassName
   }, props), /*#__PURE__*/React.createElement(Svg, {

package/lib-esm/ui/logo/logo.stories.js

@@ -5,39 +5,25 @@ import { getWrapperDecorator } from '../../stories';
 import { KIND_DEFAULT, KIND_LOGOTYPE, KINDS } from './logo.constants';
 import { Logo } from '.';
 
-var selectKind = function selectKind(value) {
-  if (value === void 0) {
-    value = KIND_DEFAULT;
-  }
+const selectKind = (value = KIND_DEFAULT) => select('Kind', KINDS, value);
 
-  return select('Kind', KINDS, value);
-};
-
-var stories = storiesOf('UI/Logo', module);
+const stories = storiesOf('UI/Logo', module);
 stories.addDecorator(getWrapperDecorator());
 stories.addDecorator(withKnobs);
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(Logo, {
-    kind: selectKind()
-  });
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(Logo, {
+  kind: selectKind()
+}));
 /* eslint-disable jsx-a11y/anchor-has-content */
 
-var LogoComponent = function LogoComponent(props) {
-  return /*#__PURE__*/React.createElement("a", props);
-};
+const LogoComponent = props => /*#__PURE__*/React.createElement("a", props);
 /* eslint-enable jsx-a11y/anchor-has-content */
 
 
-stories.add('with custom component', function () {
-  return /*#__PURE__*/React.createElement(Logo, {
-    as: LogoComponent,
-    href: "https://relative-ci.com",
-    kind: selectKind()
-  });
-});
-stories.add('with custom kind', function () {
-  return /*#__PURE__*/React.createElement(Logo, {
-    kind: selectKind(KIND_LOGOTYPE)
-  });
-});
+stories.add('with custom component', () => /*#__PURE__*/React.createElement(Logo, {
+  as: LogoComponent,
+  href: "https://relative-ci.com",
+  kind: selectKind()
+}));
+stories.add('with custom kind', () => /*#__PURE__*/React.createElement(Logo, {
+  kind: selectKind(KIND_LOGOTYPE)
+}));

package/lib-esm/ui/panels/panels.js

@@ -1,40 +1,27 @@
-var _excluded = ["className"],
-    _excluded2 = ["className", "children"];
-
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-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 PropTypes from 'prop-types';
 import cx from 'classnames';
 import css from './panels.module.css';
 
-var cloneElement = function cloneElement(element) {
-  var _element$props = element.props,
-      className = _element$props.className,
-      restProps = _objectWithoutPropertiesLoose(_element$props, _excluded);
-
-  return /*#__PURE__*/React.cloneElement(element, _objectSpread(_objectSpread({}, restProps), {}, {
+const cloneElement = element => {
+  const {
+    className,
+    ...restProps
+  } = element.props;
+  return /*#__PURE__*/React.cloneElement(element, { ...restProps,
     className: cx(css.panel, className)
-  }));
+  });
 };
 
-export var Panels = function Panels(_ref) {
-  var className = _ref.className,
-      children = _ref.children,
-      restProps = _objectWithoutPropertiesLoose(_ref, _excluded2);
-
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: cx(css.root, className)
-  }, restProps), React.Children.map(children, cloneElement));
-};
+export const Panels = ({
+  className,
+  children,
+  ...restProps
+}) => /*#__PURE__*/React.createElement("div", _extends({
+  className: cx(css.root, className)
+}, restProps), React.Children.map(children, cloneElement));
 Panels.defaultProps = {
   className: '',
   children: null

package/lib-esm/ui/panels/panels.stories.js

@@ -2,20 +2,18 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { Panels } from '.';
-var stories = storiesOf('UI/Panels', module);
+const stories = storiesOf('UI/Panels', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(Panels, {
-    style: {
-      outline: '1px dotted hotpink'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      padding: '24px'
-    }
-  }, "Panel 1"), /*#__PURE__*/React.createElement("div", {
-    style: {
-      padding: '24px'
-    }
-  }, "Panel 2"));
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(Panels, {
+  style: {
+    outline: '1px dotted hotpink'
+  }
+}, /*#__PURE__*/React.createElement("div", {
+  style: {
+    padding: '24px'
+  }
+}, "Panel 1"), /*#__PURE__*/React.createElement("div", {
+  style: {
+    padding: '24px'
+  }
+}, "Panel 2")));

package/lib-esm/ui/popover/popover.js

@@ -6,23 +6,24 @@ import cx from 'classnames';
 import { usePopoverState, Popover as UIPopover, PopoverDisclosure as UIPopoverDisclosure, PopoverArrow as UIPopoverArrow } from 'reakit/Popover';
 import { Icon } from '../icon';
 import css from './popover.module.css';
-export var Popover = function Popover(_ref) {
-  var className = _ref.className,
-      icon = _ref.icon,
-      label = _ref.label,
-      ariaLabel = _ref.ariaLabel,
-      children = _ref.children;
-  var popover = usePopoverState({
+export const Popover = ({
+  className,
+  icon,
+  label,
+  ariaLabel,
+  children
+}) => {
+  const popover = usePopoverState({
     baseId: process.env.NODE_ENV === 'test' && 'id-test',
     gutter: 24,
     modal: true,
     placement: 'top'
   });
-  var onCloseButtonClick = useCallback(function (event) {
+  const onCloseButtonClick = useCallback(event => {
     event.preventDefault();
     popover.toggle();
   }, [popover]);
-  var onButtonClick = useCallback(function (event) {
+  const onButtonClick = useCallback(event => {
     event.preventDefault();
     popover.toggle();
   }, [popover]);
@@ -42,7 +43,9 @@ export var Popover = function Popover(_ref) {
     tabIndex: 0
   }), /*#__PURE__*/React.createElement(UIPopoverArrow, _extends({
     className: css.arrow
-  }, popover)), typeof children === 'function' ? children({
+  }, popover, {
+    size: 24
+  })), typeof children === 'function' ? children({
     popoverToggle: popover.toggle
   }) : children, /*#__PURE__*/React.createElement(Icon, {
     glyph: "close",

package/lib-esm/ui/popover/popover.module.css

@@ -23,7 +23,7 @@
 }
 
 .popover {
-  padding: var(--space-xsmall) var(--space-medium) var(--space-xsmall) var(--space-small);
+  padding: var(--space-xsmall) var(--space-large) var(--space-xsmall) var(--space-small);
   max-width: 360px;
   outline: none;
   filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));
@@ -53,13 +53,13 @@
   background: none;
   border: none;
   cursor: pointer;
-  color: var(--color-text-light);
+  color: var(--color-text-ultra-light);
   transition: var(--transition-out);
 }
 
 .closeBtn:hover,
 .closeBtn:active,
 .closeBtn:focus {
-  color: var(--color-text);
+  color: var(--color-text-light);
   transition: var(--transition-in);
 }

package/lib-esm/ui/popover/popover.stories.js

@@ -2,17 +2,13 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { Popover } from '.';
-var stories = storiesOf('UI/Popover', module);
+const stories = storiesOf('UI/Popover', module);
 stories.addDecorator(getWrapperDecorator({
   padding: '64px'
 }));
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(Popover, {
-    label: "Job #100"
-  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.");
-});
-stories.add('with icon', function () {
-  return /*#__PURE__*/React.createElement(Popover, {
-    icon: "help"
-  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.");
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(Popover, {
+  label: "Job #100"
+}, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."));
+stories.add('with icon', () => /*#__PURE__*/React.createElement(Popover, {
+  icon: "help"
+}, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."));

package/lib-esm/ui/skeleton/skeleton.js

@@ -1,18 +1,15 @@
-var _excluded = ["className"];
-
 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 PropTypes from 'prop-types';
 import cx from 'classnames';
 import css from './skeleton.module.css';
-export var Skeleton = function Skeleton(props) {
-  var className = props.className,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var rootClassName = cx(css.root, className);
+export const Skeleton = props => {
+  const {
+    className,
+    ...restProps
+  } = props;
+  const rootClassName = cx(css.root, className);
   return /*#__PURE__*/React.createElement("span", _extends({
     className: rootClassName
   }, restProps));

package/lib-esm/ui/skeleton/skeleton.stories.js

@@ -2,8 +2,6 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { Skeleton } from '.';
-var stories = storiesOf('UI/Skeleton', module);
+const stories = storiesOf('UI/Skeleton', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(Skeleton, null);
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(Skeleton, null));

package/lib-esm/ui/sort-dropdown/sort-dropdown.js

@@ -1,5 +1,3 @@
-var _PropTypes$shape;
-
 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); }
 
 import React from 'react';
@@ -8,55 +6,52 @@ import cx from 'classnames';
 import { Dropdown } from '../dropdown';
 import { Icon } from '../icon';
 import css from './sort-dropdown.module.css';
-export var SortDropdown = function SortDropdown(props) {
-  var className = props.className,
-      label = props.label,
-      items = props.items,
-      sortBy = props.sortBy,
-      direction = props.direction,
-      onChange = props.onChange;
-  var rootClassName = cx(css.root, className);
-  var customLabel = items[sortBy] ? "Ordered by " + items[sortBy].label : label;
+export const SortDropdown = props => {
+  const {
+    className,
+    label,
+    fields,
+    field,
+    direction,
+    onChange
+  } = props;
+  const rootClassName = cx(css.root, className);
+  const customLabel = fields[field] ? `Ordered by ${fields[field].label}` : label;
   return /*#__PURE__*/React.createElement(Dropdown, {
     className: rootClassName,
     label: customLabel,
     glyph: "sort",
     align: "right"
-  }, function (_ref) {
-    var MenuItem = _ref.MenuItem,
-        menu = _ref.menu,
-        menuItemClassName = _ref.menuItemClassName,
-        menuItemActiveClassName = _ref.menuItemActiveClassName;
-
-    var getButtonOnClick = function getButtonOnClick(newSortBy, newDirection) {
-      return function () {
-        onChange({
-          sortBy: newSortBy,
-          direction: newDirection
-        });
-        menu.toggle();
-      };
+  }, ({
+    MenuItem,
+    menu,
+    menuItemClassName,
+    menuItemActiveClassName
+  }) => {
+    const getButtonOnClick = (newField, newDirection) => () => {
+      onChange({
+        field: newField,
+        direction: newDirection
+      });
+      menu.toggle();
     };
 
     return /*#__PURE__*/React.createElement("div", {
       className: css.items
-    }, Object.entries(items).map(function (_ref2) {
-      var key = _ref2[0],
-          item = _ref2[1];
-      var buttonProps = direction === 'asc' ? {
-        className: cx(css.itemButton, css.itemAsc),
+    }, Object.entries(fields).map(([key, item]) => {
+      const buttonProps = direction === 'asc' ? {
+        className: css.itemAsc,
         onClick: getButtonOnClick(key, 'desc'),
-        title: "Order data by " + item.label + " descending"
+        title: `Order data by ${item.label} descending`
       } : {
-        className: css.itemButton,
         onClick: getButtonOnClick(key, 'asc'),
-        title: "Order data by " + item.label + " ascending"
+        title: `Order data by ${item.label} ascending`
       };
-      var isActive = sortBy === key;
+      const isActive = field === key;
       return /*#__PURE__*/React.createElement(MenuItem, _extends({
         key: key
       }, menu, buttonProps, {
-        className: cx(menuItemClassName, css.item, isActive && menuItemActiveClassName, isActive && css.active)
+        className: cx(buttonProps.className, menuItemClassName, css.item, isActive && menuItemActiveClassName, isActive && css.active)
       }), /*#__PURE__*/React.createElement("span", {
         className: css.itemLabel
       }, item.label), /*#__PURE__*/React.createElement(Icon, {
@@ -69,15 +64,17 @@ export var SortDropdown = function SortDropdown(props) {
 SortDropdown.defaultProps = {
   className: '',
   label: 'Order by',
-  onChange: function onChange() {},
-  sortBy: '',
+  onChange: () => {},
+  field: '',
   direction: 'asc'
 };
 SortDropdown.propTypes = {
   className: PropTypes.string,
   label: PropTypes.string,
-  items: PropTypes.shape((_PropTypes$shape = {}, _PropTypes$shape[PropTypes.string] = PropTypes.string, _PropTypes$shape)).isRequired,
+  fields: PropTypes.shape({
+    [PropTypes.string]: PropTypes.string
+  }).isRequired,
   onChange: PropTypes.func,
-  sortBy: PropTypes.string,
+  field: PropTypes.string,
   direction: PropTypes.string
 };

package/lib-esm/ui/sort-dropdown/sort-dropdown.stories.js

@@ -2,23 +2,21 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { SortDropdown } from '.';
-var stories = storiesOf('UI/SortDropdown', module);
+const stories = storiesOf('UI/SortDropdown', module);
 stories.addDecorator(getWrapperDecorator({
   paddingLeft: '200px'
 }));
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(SortDropdown, {
-    onChange: function onChange(state) {
-      console.log(state); // eslint-disable-line no-console
+stories.add('default', () => /*#__PURE__*/React.createElement(SortDropdown, {
+  onChange: state => {
+    console.log(state); // eslint-disable-line no-console
+  },
+  fields: {
+    filename: {
+      label: 'Filename'
     },
-    items: {
-      filename: {
-        label: 'Filename'
-      },
-      size: {
-        label: 'Size'
-      }
-    },
-    sortBy: "size"
-  });
-});
+    size: {
+      label: 'Size'
+    }
+  },
+  field: "size"
+}));