@bundle-stats/ui 4.1.5-alpha.0 → 4.1.5-alpha.1

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

@@ -1,9 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { getWrapperDecorator } from '../../stories';
-import { Tabs } from '.';
-const stories = storiesOf('UI/Tabs', module);
-stories.addDecorator(getWrapperDecorator());
-stories.add('default', () => /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tabs.Item, {
-  isTabActive: true
-}, "Option A"), /*#__PURE__*/React.createElement(Tabs.Item, null, "Option B"), /*#__PURE__*/React.createElement(Tabs.Item, null, "Option C")));

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

@@ -1,23 +0,0 @@
-import { Tag } from '.';
-export default {
-  title: 'UI/Tag',
-  component: Tag,
-  argTypes: {
-    kind: {
-      control: 'select',
-      options: Object.values(Tag.KINDS)
-    },
-    size: {
-      control: 'select',
-      options: Object.values(Tag.SIZES)
-    }
-  },
-  args: {
-    children: 'tag'
-  }
-};
-export const Default = Tag.bind();
-export const OneLetter = Tag.bind();
-OneLetter.args = {
-  children: 'd'
-};

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

@@ -1,19 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { getWrapperDecorator } from '../../stories';
-import { Toolbar } from '.';
-const stories = storiesOf('UI/Toolbar', module);
-stories.addDecorator(getWrapperDecorator());
-stories.add('default', () => /*#__PURE__*/React.createElement(Toolbar, null, /*#__PURE__*/React.createElement("div", null, "Content")));
-stories.add('with actions', () => /*#__PURE__*/React.createElement(Toolbar, {
-  renderActions: _ref => {
-    let {
-      actionClassName
-    } = _ref;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: actionClassName
-    }, "Action 1"), /*#__PURE__*/React.createElement("div", {
-      className: actionClassName
-    }, "Action 2"));
-  }
-}, "Content"));

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

@@ -1,24 +0,0 @@
-import React from 'react';
-import { getWrapperDecorator } from '../../stories';
-import { Tooltip } from '.';
-export default {
-  title: 'UI/Tooltip',
-  component: Tooltip,
-  decorators: [getWrapperDecorator({
-    padding: '100px',
-    textAlign: 'center'
-  })],
-  args: {
-    title: 'View job #123'
-  }
-};
-const Template = props => /*#__PURE__*/React.createElement(Tooltip, props, "Job #123");
-export const Default = Template.bind();
-export const LongTooltip = Template.bind();
-LongTooltip.args = {
-  title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam molestie neque id lectus mollis, et imperdiet libero porta.'
-};
-export const DarkModeFalse = Template.bind();
-DarkModeFalse.args = {
-  darkMode: false
-};

package/src/layout/header/header.jsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import css from './header.module.css';
-
-export const Header = ({
-  className, renderLeft, renderRight, render,
-}) => (
-  <header className={cx(css.root, className)}>
-    {renderLeft({ className: css.left })}
-    {render({ className: css.center })}
-    {renderRight({ className: css.right })}
-  </header>
-);
-
-Header.defaultProps = {
-  className: '',
-  renderLeft: (props) => <div {...props} />,
-  render: (props) => <div {...props} />,
-  renderRight: (props) => <div {...props} />,
-};
-
-Header.propTypes = {
-  /* Adopted child class name */
-  className: PropTypes.string,
-
-  /* Render left area */
-  renderLeft: PropTypes.func,
-
-  /* Render center area */
-  render: PropTypes.func,
-
-  /* Render right area */
-  renderRight: PropTypes.func,
-};

package/src/layout/header/header.module.css

@@ -1,49 +0,0 @@
-.root {
-  padding: var(--space-small);
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  background: var(--color-dark);
-  color: var(--color-light);
-}
-
-/* Layout */
-.left {
-  flex: 1 1 auto;
-  display: flex;
-  align-items: center;
-}
-
-.center {
-  flex: 1 1 100%;
-  text-align: center;
-  order: 3;
-}
-
-.right {
-  flex: 1 1 auto;
-  order: 2;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-@media (min-width: 768px) {
-  .root {
-    flex-wrap: nowrap;
-  }
-
-  .left {
-    flex: 1 1 25%;
-  }
-
-  .center {
-    flex: 1 1 50%;
-    order: 2;
-  }
-
-  .right {
-    flex: 1 1 25%;
-    order: 3;
-  }
-}

package/src/layout/header/index.js

@@ -1 +0,0 @@
-export { Header } from './header';

package/src/layout/sub-header/index.js

@@ -1 +0,0 @@
-export * from './sub-header';

package/src/layout/sub-header/sub-header.jsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import { Container } from '../../ui/container';
-import { Box } from '../box';
-import css from './sub-header.module.css';
-
-const SIZE_SMALL = 'small';
-const SIZE_DEFAULT = 'default';
-const SIZES = [SIZE_SMALL, SIZE_DEFAULT];
-
-export const SubHeader = (props) => {
-  const { className, size, subtitle, title, icon, children, rightSide } = props;
-
-  const rootClassName = cx(css.root, css[size], className);
-
-  return (
-    <Box padding="small" className={rootClassName}>
-      <Container>
-        <div className={css.inner}>
-          {icon && <div className={css.icon}>{icon}</div>}
-          <div className={css.details}>
-            {subtitle && <p className={css.subtitle}>{subtitle}</p>}
-            <h1 className={css.title}>{title}</h1>
-            {children}
-          </div>
-          {rightSide && <div className={css.rightSide}>{rightSide}</div>}
-        </div>
-      </Container>
-    </Box>
-  );
-};
-
-SubHeader.defaultProps = {
-  className: '',
-  size: SIZE_DEFAULT,
-  subtitle: '',
-  icon: null,
-  children: null,
-  rightSide: null,
-};
-
-SubHeader.propTypes = {
-  className: PropTypes.string,
-  size: PropTypes.oneOf(SIZES),
-  title: PropTypes.string.isRequired,
-  subtitle: PropTypes.string,
-  icon: PropTypes.element,
-  children: PropTypes.element,
-  rightSide: PropTypes.element,
-};

package/src/layout/sub-header/sub-header.module.css

@@ -1,70 +0,0 @@
-.root {
-  border-bottom: 1px solid var(--color-outline);
-  background: var(--color-highlight);
-}
-
-.inner {
-  display: flex;
-  align-items: center;
-}
-
-.icon {
-  flex: 0 0 auto;
-  margin-right: var(--space-xsmall);
-}
-
-.details {
-  flex: 1 1 100%;
-  position: relative;
-}
-
-.title {
-  margin: 0;
-  font-weight: bold;
-  font-size: 2.027em;
-  line-height: 1.1;
-}
-
-.subtitle {
-  margin: 0;
-  color: var(--color-gray-light);
-  font-weight: bold;
-  text-transform: uppercase;
-}
-
-.rightSide {
-  flex: 0 0 auto;
-}
-
-/** Small size modifier */
-.small .icon {
-  margin-right: var(--space-xxsmall);
-}
-
-.small .title {
-  font-size: var(--size-xlarge);
-  line-height: var(--line-height);
-}
-
-.small .rightSize {
-  margin-left: var(--space-xxsmall);
-}
-
-/** Breakpoint changes */
-.inner {
-  flex-wrap: wrap;
-}
-
-.rightSide {
-  margin: var(--space-xsmall) 0 0;
-}
-
-@media (min-width: 768px) {
-  .inner {
-    flex-wrap: nowrap;
-  }
-
-  .rightSide {
-    margin: 0 0 0 var(--space-xsmall);
-  }
-}

package/src/ui/logo/assets/github.inline.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 1024 1024" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" />
-</svg>
-

package/src/ui/logo/assets/logo.inline.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-<path d="M256 42.67L69.33 149.33v213.34L256 469.33l186.67-106.66V149.33L256 42.67z" fill="#fff"/>
-<path d="M256 59.12l172.27 98.44v196.88L256 452.88 83.73 354.44V157.56L256 59.12M256 0L32 128v256l224 128 224-128V128L256 0z" fill="#9da1a6"/>
-<path d="M256 128l-112 64v128l112 64 112-64V192l-112-64z" fill="#8b8f95"/>
-<path d="M144 192v128l112 64V249.33z" fill="#6f747b"/>
-</svg>

package/src/ui/logo/assets/logotype.inline.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 59.07" fill="currentColor">
-<path class="a" d="M12.68 53.56h-.33l-1.17 4.51H0V0h14.35v13.52l-.5 6h.33a15.46 15.46 0 0110.43-4.17c10.1 0 16.61 8.34 16.61 21.11 0 14.43-8.68 22.61-17.77 22.61-3.76 0-7.51-1.83-10.77-5.51zm13.85-16.85c0-6.84-2.08-9.68-6.17-9.68-2.25 0-4 .84-6 3v15.36a8.47 8.47 0 005.67 2c3.5 0 6.5-2.67 6.5-10.68zM48.57 42.05v-25.7h14.35v23.86c0 4.68 1 6.68 4.76 6.68 2.42 0 4.08-.67 6.25-3.67V16.35h14.35v41.72H76.6l-1-5.51h-.33c-3.51 4-7.68 6.51-13.52 6.51-9.34 0-13.18-6.67-13.18-17.02zM97.4 16.35h11.68l1 5h.33c3.34-3.17 7.85-6 13.94-6 9.26 0 13.26 6.68 13.26 17v25.7h-14.35V34.21c0-4.67-1.16-6.68-4.84-6.68-2.67 0-4.5 1.17-6.67 3.17v27.37H97.4zM144.8 37.21c0-13.68 8.68-21.86 17.44-21.86a12.27 12.27 0 019.76 4.17h.33l-.66-6V0H186v58.07h-11.66l-1-3.84H173c-2.92 2.84-7 4.84-10.76 4.84-10.6 0-17.44-8.34-17.44-21.86zm26.87 7.18V29a7.8 7.8 0 00-5.51-2c-3.5 0-6.67 2.67-6.67 10 0 7.51 2.41 10.35 6.5 10.35a6.15 6.15 0 005.68-2.96zM204.05 40.88v-29.7h-12.51V0h26.86v41.38c0 4.84 3.34 6.18 6.26 6.18a18.15 18.15 0 006-1.17l3.08 10.51a39.1 39.1 0 01-12.93 2.17c-11.09 0-16.76-7.34-16.76-18.19zM238 37.21c0-13.68 10.68-21.86 21.86-21.86 13.18 0 19.85 9 19.85 20.19a37.41 37.41 0 01-.58 6h-30.25V32.2h20.36l-2 2.51c0-5.51-2.17-8.51-6.84-8.51-5.51 0-8.51 3.5-8.51 11 0 7.84 3.84 11 11.51 11a23.26 23.26 0 0010-2.5l4.68 8.51a33.13 33.13 0 01-16.69 4.84c-13.17.02-23.39-7.99-23.39-21.84zM284.18 51.31l8.18-9.84c4.08 3.08 8.92 5.25 13.85 5.25 4.33 0 6-1.42 6-3.17 0-3.17-2.83-3.84-7.84-5.92l-6.76-2.84c-6.26-2.33-11.43-7.26-11.43-15.1 0-9.26 8.34-16.85 20.69-16.85a27.27 27.27 0 0118.53 7.25l-7.18 9c-3.92-2.59-7-3.93-12.18-3.93-3.17 0-5.34 1.17-5.34 3.68s3.09 3.42 8.51 5.42l6.26 2.59c7.26 2.67 11.43 7.34 11.43 14.85 0 9.17-7.68 17.35-21.7 17.35a32.65 32.65 0 01-21.02-7.74zM337.62 40.38V27.53h-10V16.85l10.68-.5 1.84-12.51H352v12.51h16.52v11.18H352v12.6c0 5.93 2.76 7.76 8.1 7.76a23.71 23.71 0 007.59-1.33l2.5 10.34a50.19 50.19 0 01-13.85 2.17c-13.71 0-18.72-7.51-18.72-18.69zM376.09 46.22c0-9.34 7.34-14.18 26.37-15.18-.51-3-3.34-4.34-8-4.34-3.51 0-7 1.17-12 3.5l-5-9.34a40.45 40.45 0 0119.86-5.51c11.85 0 19.53 5.84 19.53 19.52v23.2h-11.72l-1-4.34h-.33c-4.09 3-9 5.34-14.18 5.34-8.69 0-13.53-6.01-13.53-12.85zm26.37-1.33v-5.34c-10.18.33-12.69 2.67-12.69 5.5 0 1.92 1.5 3 4.51 3 3.34.01 5.92-1.49 8.18-3.16zM431.6 40.38V27.53h-10V16.85l10.68-.5 1.82-12.51H446v12.51h16.52v11.18H446v12.6c0 5.93 2.75 7.76 8.09 7.76a23.77 23.77 0 007.6-1.33l2.5 10.34a50.26 50.26 0 01-13.85 2.17c-13.73 0-18.74-7.51-18.74-18.69zM470.28 52.73l6-8.84a32.83 32.83 0 0016.35 4.67c3.68 0 5.18-1 5.18-2.5 0-2-2.17-2.34-9.18-3.84-11.5-2.51-15.63-6.84-15.63-13.35 0-8.18 7.76-13.52 19.86-13.52 7.84 0 14.1 3.09 18.52 5.84L505 29.7a27.79 27.79 0 00-13.51-3.84c-2.67 0-4.34.84-4.34 2.34 0 1.84 2.17 2 8.67 3.5C508.33 34.54 512 38.3 512 45.22c0 7.84-7.43 13.85-21.36 13.85a39.71 39.71 0 01-20.36-6.34z"/>
-</svg>

package/src/ui/logo/assets/webpack.inline.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
-  <path fill="#FFF" d="M300 .1L565 150v299.9L300 599.8 35 449.9V150z"/>
-  <path fill="#8ED6FB" d="M517.7 439.5L308.8 557.8v-92L439 394.1l78.7 45.4zm14.3-12.9V179.4l-76.4 44.1v159l76.4 44.1zM81.5 439.5l208.9 118.2v-92l-130.2-71.6-78.7 45.4zm-14.3-12.9V179.4l76.4 44.1v159l-76.4 44.1zm8.9-263.2L290.4 42.2v89l-137.3 75.5-1.1.6-75.9-43.9zm446.9 0L308.8 42.2v89L446 206.8l1.1.6 75.9-44z"/>
-  <path fill="#1C78C0" d="M290.4 444.8L162 374.1V234.2l128.4 74.1v136.5zm18.4 0l128.4-70.6v-140l-128.4 74.1v136.5zM299.6 303zm-129-85l129-70.9L428.5 218l-128.9 74.4-129-74.4z"/>
-</svg>

package/src/ui/logo/index.js

@@ -1 +0,0 @@
-export { Logo } from './logo';

package/src/ui/logo/logo.constants.js

@@ -1,13 +0,0 @@
-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/src/ui/logo/logo.jsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import GithubSvg from './assets/github.inline.svg';
-import LogoSvg from './assets/logo.inline.svg';
-import LogotypeSvg from './assets/logotype.inline.svg';
-import WebpackSvg from './assets/webpack.inline.svg';
-import {
-  KIND_DEFAULT, KIND_LOGO, KIND_LOGOTYPE, KIND_GITHUB, KIND_WEBPACK, KINDS,
-} from './logo.constants';
-import css from './logo.module.css';
-
-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 (
-    <Component
-      className={rootClassName}
-      {...props}
-    >
-      <Svg className={css.svg} />
-    </Component>
-  );
-};
-
-Logo.defaultProps = {
-  as: 'span',
-  className: '',
-  kind: KIND_DEFAULT,
-};
-
-Logo.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-
-  /** Rendered component */
-  as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-
-  /** Kind modifier */
-  kind: PropTypes.oneOf(KINDS),
-};

package/src/ui/logo/logo.module.css

@@ -1,17 +0,0 @@
-.root {
-  display: block;
-  width: var(--space-large);
-}
-
-.logotype {
-  width: 120px;
-}
-
-.bundlestats {
-  width: 120px;
-}
-
-.svg {
-  display: block;
-  width: 100%;
-}