@bundle-stats/ui 4.0.4 → 4.0.5-beta.0

package/lib/components/summary-item/summary-item.js

@@ -102,8 +102,10 @@ var SummaryItem = function SummaryItem(_ref2) {
     value: baseline,
     formatter: metric.formatter
   })) : /*#__PURE__*/_react["default"].createElement(_stack.Stack, null, /*#__PURE__*/_react["default"].createElement(_skeleton.Skeleton, {
+    as: "p",
     className: (0, _classnames["default"])(_summaryItemModule["default"].currentMetric, _summaryItemModule["default"].loading)
   }), /*#__PURE__*/_react["default"].createElement(_skeleton.Skeleton, {
+    as: "p",
     className: (0, _classnames["default"])(_summaryItemModule["default"].baselineMetric, _summaryItemModule["default"].loading)
   })));
 };

package/lib/ui/skeleton/skeleton.js

@@ -13,7 +13,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _skeletonModule = _interopRequireDefault(require("./skeleton.module.css"));
 
-var _excluded = ["className"];
+var _excluded = ["className", "as", "block"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -25,18 +25,24 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var Skeleton = function Skeleton(props) {
   var className = props.className,
+      Component = props.as,
+      block = props.block,
       restProps = _objectWithoutProperties(props, _excluded);
 
-  var rootClassName = (0, _classnames["default"])(_skeletonModule["default"].root, className);
-  return /*#__PURE__*/_react["default"].createElement("span", _extends({
+  var rootClassName = (0, _classnames["default"])(_skeletonModule["default"].root, className, block && _skeletonModule["default"].block);
+  return /*#__PURE__*/_react["default"].createElement(Component, _extends({
     className: rootClassName
   }, restProps));
 };
 
 exports.Skeleton = Skeleton;
 Skeleton.propTypes = {
-  className: _propTypes["default"].string
+  className: _propTypes["default"].string,
+  as: _propTypes["default"].elementType,
+  block: _propTypes["default"].bool
 };
 Skeleton.defaultProps = {
-  className: ''
+  className: '',
+  as: 'span',
+  block: false
 };

package/lib/ui/skeleton/skeleton.module.css

@@ -1,8 +1,8 @@
 .root {
-  display: block;
-  background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 90%, transparent 90.1%);
+  background: linear-gradient(transparent 12.5%, currentColor 12.6%, currentColor 86.4%, transparent 86.5%);
   opacity: 0.06;
   pointer-events: none;
+  min-width: 6em;
 }
 
 /** empty char to keep the text height */
@@ -11,3 +11,7 @@
   content: '\A0';
   color: transparent;
 }
+
+.block {
+  background: currentColor;
+}

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

@@ -1,17 +1,52 @@
 "use strict";
 
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@storybook/react");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.MultipleTextLines = exports.Block = void 0;
 
-var _stories = require("../../stories");
+var _react = _interopRequireDefault(require("react"));
 
 var _ = require(".");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var stories = (0, _react2.storiesOf)('UI/Skeleton', module);
-stories.addDecorator((0, _stories.getWrapperDecorator)());
-stories.add('default', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.Skeleton, null);
-});
+var _default = {
+  title: 'UI/Skeleton',
+  component: _.Skeleton
+};
+exports["default"] = _default;
+
+var MultipleTextLines = function MultipleTextLines() {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
+    as: "h1",
+    style: {
+      outline: '1px solid magenta'
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
+    as: "h2",
+    style: {
+      outline: '1px solid magenta'
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
+    as: "p",
+    style: {
+      outline: '1px solid magenta'
+    }
+  }));
+};
+
+exports.MultipleTextLines = MultipleTextLines;
+
+var Block = function Block() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      outline: '1px solid magenta'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
+    as: "div",
+    block: true
+  }));
+};
+
+exports.Block = Block;

package/lib-esm/components/summary-item/summary-item.js

@@ -78,8 +78,10 @@ export const SummaryItem = _ref2 => {
     value: baseline,
     formatter: metric.formatter
   })) : /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Skeleton, {
+    as: "p",
     className: cx(css.currentMetric, css.loading)
   }), /*#__PURE__*/React.createElement(Skeleton, {
+    as: "p",
     className: cx(css.baselineMetric, css.loading)
   })));
 };

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

@@ -7,16 +7,22 @@ import css from './skeleton.module.css';
 export const Skeleton = props => {
   const {
     className,
+    as: Component,
+    block,
     ...restProps
   } = props;
-  const rootClassName = cx(css.root, className);
-  return /*#__PURE__*/React.createElement("span", _extends({
+  const rootClassName = cx(css.root, className, block && css.block);
+  return /*#__PURE__*/React.createElement(Component, _extends({
     className: rootClassName
   }, restProps));
 };
 Skeleton.propTypes = {
-  className: PropTypes.string
+  className: PropTypes.string,
+  as: PropTypes.elementType,
+  block: PropTypes.bool
 };
 Skeleton.defaultProps = {
-  className: ''
+  className: '',
+  as: 'span',
+  block: false
 };

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

@@ -1,8 +1,8 @@
 .root {
-  display: block;
-  background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 90%, transparent 90.1%);
+  background: linear-gradient(transparent 12.5%, currentColor 12.6%, currentColor 86.4%, transparent 86.5%);
   opacity: 0.06;
   pointer-events: none;
+  min-width: 6em;
 }
 
 /** empty char to keep the text height */
@@ -11,3 +11,7 @@
   content: '\A0';
   color: transparent;
 }
+
+.block {
+  background: currentColor;
+}

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

@@ -1,7 +1,30 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { getWrapperDecorator } from '../../stories';
 import { Skeleton } from '.';
-const stories = storiesOf('UI/Skeleton', module);
-stories.addDecorator(getWrapperDecorator());
-stories.add('default', () => /*#__PURE__*/React.createElement(Skeleton, null));
+export default {
+  title: 'UI/Skeleton',
+  component: Skeleton
+};
+export const MultipleTextLines = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Skeleton, {
+  as: "h1",
+  style: {
+    outline: '1px solid magenta'
+  }
+}), /*#__PURE__*/React.createElement(Skeleton, {
+  as: "h2",
+  style: {
+    outline: '1px solid magenta'
+  }
+}), /*#__PURE__*/React.createElement(Skeleton, {
+  as: "p",
+  style: {
+    outline: '1px solid magenta'
+  }
+}));
+export const Block = () => /*#__PURE__*/React.createElement("div", {
+  style: {
+    outline: '1px solid magenta'
+  }
+}, /*#__PURE__*/React.createElement(Skeleton, {
+  as: "div",
+  block: true
+}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.0.4",
+  "version": "4.0.5-beta.0",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -85,12 +85,12 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.0.4",
+    "@bundle-stats/utils": "^4.0.5-beta.0",
     "ariakit": "^2.0.0-next.33",
     "date-fns": "^2.28.0",
     "modern-css-reset": "^1.4.0",
     "query-string": "^7.1.0",
     "use-query-params": "^1.2.3"
   },
-  "gitHead": "a2d0cbcea629c27ca4acd979168868b83d1ad5f4"
+  "gitHead": "21c3e6e8dcf686e4aaa8205a4a0d3d9d2154cf30"
 }

package/src/components/summary-item/summary-item.jsx

@@ -84,8 +84,8 @@ export const SummaryItem = ({
         </Stack>
       ) : (
         <Stack>
-          <Skeleton className={cx(css.currentMetric, css.loading)} />
-          <Skeleton className={cx(css.baselineMetric, css.loading)} />
+          <Skeleton as="p" className={cx(css.currentMetric, css.loading)} />
+          <Skeleton as="p" className={cx(css.baselineMetric, css.loading)} />
         </Stack>
       )}
     </Stack>

package/src/ui/skeleton/skeleton.jsx

@@ -5,16 +5,20 @@ import cx from 'classnames';
 import css from './skeleton.module.css';
 
 export const Skeleton = (props) => {
-  const { className, ...restProps } = props;
-  const rootClassName = cx(css.root, className);
+  const { className, as: Component, block, ...restProps } = props;
+  const rootClassName = cx(css.root, className, block && css.block);
 
-  return <span className={rootClassName} {...restProps} />;
+  return <Component className={rootClassName} {...restProps} />;
 };
 
 Skeleton.propTypes = {
   className: PropTypes.string,
+  as: PropTypes.elementType,
+  block: PropTypes.bool,
 };
 
 Skeleton.defaultProps = {
   className: '',
+  as: 'span',
+  block: false,
 };

package/src/ui/skeleton/skeleton.module.css

@@ -1,8 +1,8 @@
 .root {
-  display: block;
-  background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 90%, transparent 90.1%);
+  background: linear-gradient(transparent 12.5%, currentColor 12.6%, currentColor 86.4%, transparent 86.5%);
   opacity: 0.06;
   pointer-events: none;
+  min-width: 6em;
 }
 
 /** empty char to keep the text height */
@@ -11,3 +11,7 @@
   content: '\A0';
   color: transparent;
 }
+
+.block {
+  background: currentColor;
+}