@automattic/vip-design-system 0.9.6 → 0.10.0

package/build/system/Spinner/Spinner.stories.js

@@ -1,31 +1,16 @@
-"use strict";
-
-exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ = require("..");
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 /**
  * External dependencies
  */
-
+import React from 'react';
 /**
  * Internal dependencies
  */
-var _default = {
-  title: 'Spinner',
-  component: _.Spinner
-};
-exports["default"] = _default;
 
-var Default = function Default() {
-  return (0, _jsxRuntime.jsx)(_.Spinner, {});
+import { Spinner } from '..';
+export default {
+  title: 'Spinner',
+  component: Spinner
 };
-
-exports.Default = Default;
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Spinner, null);
+};

package/build/system/Table/Table.stories.js

@@ -1,72 +1,50 @@
-"use strict";
-
-exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ = require("..");
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 /**
  * External dependencies
  */
-
+import React from 'react';
 /**
  * Internal dependencies
  */
-var _default = {
-  title: 'Table',
-  component: _.Table
-};
-exports["default"] = _default;
 
-var Default = function Default() {
-  return (0, _jsxRuntime.jsxs)(_.Table, {
-    children: [(0, _jsxRuntime.jsx)("thead", {
-      children: (0, _jsxRuntime.jsx)(_.TableRow, {
-        head: true,
-        cells: ['User', 'Command', 'Duration', 'Time']
-      })
-    }), (0, _jsxRuntime.jsx)("tbody", {
-      children: (0, _jsxRuntime.jsx)(_.TableRow, {
-        cells: [(0, _jsxRuntime.jsx)(_.Flex, {
-          sx: {
-            alignItems: 'center'
-          },
-          children: (0, _jsxRuntime.jsx)(_.Heading, {
-            variant: "h4",
-            sx: {
-              mb: 0
-            },
-            children: "kwaves"
-          })
-        }, "user"), (0, _jsxRuntime.jsx)(_.Heading, {
-          variant: "h4",
-          sx: {
-            mb: 0,
-            display: 'flex',
-            alignItems: 'center'
-          },
-          children: "wp rewrite flush"
-        }, "command"), (0, _jsxRuntime.jsx)(_.Text, {
-          sx: {
-            mb: 0
-          },
-          children: "2s"
-        }, "duration"), (0, _jsxRuntime.jsx)(_.Text, {
-          sx: {
-            mb: 0,
-            color: 'muted'
-          },
-          children: "11th Mar 2020, 16:49:22"
-        }, "time")]
-      })
-    })]
-  });
+import { Table, TableRow, Flex, Heading, Text } from '..';
+export default {
+  title: 'Table',
+  component: Table
 };
-
-exports.Default = Default;
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement(TableRow, {
+    head: true,
+    cells: ['User', 'Command', 'Duration', 'Time']
+  })), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement(TableRow, {
+    cells: [/*#__PURE__*/React.createElement(Flex, {
+      sx: {
+        alignItems: 'center'
+      },
+      key: "user"
+    }, /*#__PURE__*/React.createElement(Heading, {
+      variant: "h4",
+      sx: {
+        mb: 0
+      }
+    }, "kwaves")), /*#__PURE__*/React.createElement(Heading, {
+      variant: "h4",
+      key: "command",
+      sx: {
+        mb: 0,
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, "wp rewrite flush"), /*#__PURE__*/React.createElement(Text, {
+      sx: {
+        mb: 0
+      },
+      key: "duration"
+    }, "2s"), /*#__PURE__*/React.createElement(Text, {
+      sx: {
+        mb: 0,
+        color: 'muted'
+      },
+      key: "time"
+    }, "11th Mar 2020, 16:49:22")]
+  })));
+};

package/build/system/Tabs/TabItem.js

@@ -27,6 +27,7 @@ var TabItem = function TabItem(_ref) {
     variant: "h4",
     as: "button",
     tabIndex: "0",
+    "data-active": active || undefined,
     sx: _extends({
       cursor: 'pointer',
       background: 'none',

package/build/system/Tabs/Tabs.js

@@ -3,13 +3,15 @@
 exports.__esModule = true;
 exports.Tabs = void 0;
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["sx"];
+var _excluded = ["className", "sx"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -18,10 +20,13 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 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; }
 
 var Tabs = function Tabs(_ref) {
-  var sx = _ref.sx,
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
+      sx = _ref.sx,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return (0, _jsxRuntime.jsx)(_.Flex, _extends({
+    className: (0, _classnames["default"])('vip-tabs-component', className),
     sx: _extends({
       borderBottom: '1px solid',
       borderColor: 'border',
@@ -34,6 +39,7 @@ var Tabs = function Tabs(_ref) {
 
 exports.Tabs = Tabs;
 Tabs.propTypes = {
-  variant: _propTypes["default"].string,
-  sx: _propTypes["default"].object
+  className: _propTypes["default"].any,
+  sx: _propTypes["default"].object,
+  variant: _propTypes["default"].string
 };

package/build/system/Tabs/Tabs.stories.js

@@ -1,40 +1,18 @@
-"use strict";
-
-exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ = require("..");
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 /**
  * External dependencies
  */
-
+import React from 'react';
 /**
  * Internal dependencies
  */
-var _default = {
-  title: 'Tabs',
-  component: _.Tabs
-};
-exports["default"] = _default;
 
-var Default = function Default() {
-  return (0, _jsxRuntime.jsxs)(_.Tabs, {
-    children: [(0, _jsxRuntime.jsx)(_.TabItem, {
-      active: true,
-      children: "All (5)"
-    }), (0, _jsxRuntime.jsx)(_.TabItem, {
-      children: "Live (2)"
-    }), (0, _jsxRuntime.jsx)(_.TabItem, {
-      children: "In Development (3)"
-    })]
-  });
+import { Tabs, TabItem } from '..';
+export default {
+  title: 'Tabs',
+  component: Tabs
 };
-
-exports.Default = Default;
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(TabItem, {
+    active: true
+  }, "All (5)"), /*#__PURE__*/React.createElement(TabItem, null, "Live (2)"), /*#__PURE__*/React.createElement(TabItem, null, "In Development (3)"));
+};

package/build/system/Text/Text.js

@@ -7,9 +7,11 @@ var _themeUi = require("theme-ui");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["sx"];
+var _excluded = ["sx", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -19,6 +21,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var Text = function Text(_ref) {
   var sx = _ref.sx,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return (0, _jsxRuntime.jsx)(_themeUi.Text, _extends({
@@ -26,11 +30,13 @@ var Text = function Text(_ref) {
     sx: _extends({
       lineHeight: 1.5,
       marginBottom: 2
-    }, sx)
+    }, sx),
+    className: (0, _classnames["default"])('vip-text-component', className)
   }, props));
 };
 
 exports.Text = Text;
 Text.propTypes = {
-  sx: _propTypes["default"].object
+  sx: _propTypes["default"].object,
+  className: _propTypes["default"].any
 };

package/build/system/Text/Text.stories.js

@@ -1,33 +1,16 @@
-"use strict";
-
-exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ = require("..");
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 /**
  * External dependencies
  */
-
+import React from 'react';
 /**
  * Internal dependencies
  */
-var _default = {
-  title: 'Text',
-  component: _.Text
-};
-exports["default"] = _default;
 
-var Default = function Default() {
-  return (0, _jsxRuntime.jsxs)(_.Text, {
-    children: ["Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.", ' ']
-  });
+import { Text } from '..';
+export default {
+  title: 'Text',
+  component: Text
 };
-
-exports.Default = Default;
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Text, null, "Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.", ' ');
+};

package/build/system/Time/index.js

@@ -7,9 +7,11 @@ var _themeUi = require("theme-ui");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["time", "relativeTime", "timeOnly"];
+var _excluded = ["time", "relativeTime", "timeOnly", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -60,6 +62,8 @@ var Time = function Time(_ref) {
       relativeTime = _ref$relativeTime === void 0 ? false : _ref$relativeTime,
       _ref$timeOnly = _ref.timeOnly,
       timeOnly = _ref$timeOnly === void 0 ? false : _ref$timeOnly,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var formattedTime;
@@ -77,7 +81,8 @@ var Time = function Time(_ref) {
       timeZoneName: 'short'
     }),
     datetime: time,
-    as: "time"
+    as: "time",
+    className: (0, _classnames["default"])('vip-time-component', className)
   }, props, {
     children: formattedTime
   }));
@@ -87,5 +92,6 @@ exports.Time = Time;
 Time.propTypes = {
   time: _propTypes["default"].string,
   timeOnly: _propTypes["default"].bool,
-  relativeTime: _propTypes["default"].bool
+  relativeTime: _propTypes["default"].bool,
+  className: _propTypes["default"].any
 };

package/build/system/Timeline/Timeline.js

@@ -9,9 +9,11 @@ var _md = require("react-icons/md");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["time", "first", "last"];
+var _excluded = ["time", "first", "last", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -36,9 +38,13 @@ var Timeline = function Timeline(_ref) {
       first = _ref$first === void 0 ? false : _ref$first,
       _ref$last = _ref.last,
       last = _ref$last === void 0 ? false : _ref$last,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  return (0, _jsxRuntime.jsxs)(_themeUi.Flex, _extends({}, props, {
+  return (0, _jsxRuntime.jsxs)(_themeUi.Flex, _extends({
+    className: (0, _classnames["default"])('vip-timeline-component', className)
+  }, props, {
     children: [(0, _jsxRuntime.jsxs)(_themeUi.Flex, {
       sx: {
         flexDirection: 'column',
@@ -66,5 +72,6 @@ exports.Timeline = Timeline;
 Timeline.propTypes = {
   first: _propTypes["default"].bool,
   time: _propTypes["default"].node,
-  last: _propTypes["default"].bool
+  last: _propTypes["default"].bool,
+  className: _propTypes["default"].any
 };

package/build/system/Timeline/Timeline.stories.js

@@ -1,52 +1,29 @@
-"use strict";
-
-exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ = require("..");
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 /**
  * External dependencies
  */
-
+import React from 'react';
 /**
  * Internal dependencies
  */
-var _default = {
-  title: 'Timeline',
-  component: _.Timeline
-};
-exports["default"] = _default;
 
-var Default = function Default() {
-  return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
-    children: [(0, _jsxRuntime.jsxs)(_.Grid, {
-      gap: 2,
-      columns: [2, '100px 300px'],
-      sx: {
-        mb: '20px'
-      },
-      children: [(0, _jsxRuntime.jsx)(_.Timeline, {
-        time: "7pm"
-      }), (0, _jsxRuntime.jsx)(_.Box, {
-        children: "It looks like everything is recovered now. You can forget about the last event."
-      })]
-    }), (0, _jsxRuntime.jsxs)(_.Grid, {
-      gap: 2,
-      columns: [2, '100px 200px'],
-      children: [(0, _jsxRuntime.jsx)(_.Timeline, {
-        time: "6pm"
-      }), (0, _jsxRuntime.jsx)(_.Box, {
-        children: "At this particular moment in the day, something happened with your environment."
-      })]
-    })]
-  });
+import { Timeline, Grid, Box } from '..';
+export default {
+  title: 'Timeline',
+  component: Timeline
 };
-
-exports.Default = Default;
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid, {
+    gap: 2,
+    columns: [2, '100px 300px'],
+    sx: {
+      mb: '20px'
+    }
+  }, /*#__PURE__*/React.createElement(Timeline, {
+    time: "7pm"
+  }), /*#__PURE__*/React.createElement(Box, null, "It looks like everything is recovered now. You can forget about the last event.")), /*#__PURE__*/React.createElement(Grid, {
+    gap: 2,
+    columns: [2, '100px 200px']
+  }, /*#__PURE__*/React.createElement(Timeline, {
+    time: "6pm"
+  }), /*#__PURE__*/React.createElement(Box, null, "At this particular moment in the day, something happened with your environment.")));
+};

package/build/system/Tooltip/Tooltip.stories.js

@@ -1,51 +1,29 @@
-"use strict";
-
-exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ = require("..");
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 /**
  * External dependencies
  */
-
+import React from 'react';
 /**
  * Internal dependencies
  */
-var _default = {
+
+import { Flex, Heading, Tooltip, Text, Link } from '..';
+export default {
   title: 'Tooltip',
-  component: _.Tooltip
+  component: Tooltip
 };
-exports["default"] = _default;
-
-var Default = function Default() {
-  return (0, _jsxRuntime.jsxs)(_.Flex, {
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Flex, {
     sx: {
       alignItems: 'center'
-    },
-    children: [(0, _jsxRuntime.jsx)(_.Heading, {
-      sx: {
-        mb: 0,
-        mr: 2
-      },
-      children: "My Section Heading"
-    }), (0, _jsxRuntime.jsx)(_.Tooltip, {
-      children: (0, _jsxRuntime.jsxs)(_.Text, {
-        sx: {
-          fontSize: 1
-        },
-        children: ["This is a tooltip that can be used to describe various pieces of functionality.", (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)(_.Link, {
-          children: "Find out more \u2192"
-        })]
-      })
-    })]
-  });
-};
-
-exports.Default = Default;
+    }
+  }, /*#__PURE__*/React.createElement(Heading, {
+    sx: {
+      mb: 0,
+      mr: 2
+    }
+  }, "My Section Heading"), /*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      fontSize: 1
+    }
+  }, "This is a tooltip that can be used to describe various pieces of functionality.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Link, null, "Find out more \u2192"))));
+};

package/build/system/UsageChart/UsageChart.stories.js

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+/**
+ * Internal dependencies
+ */
+
+import { UsageChart } from '..';
+export default {
+  title: 'UsageChart',
+  component: UsageChart
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(UsageChart, {
+    total: 50,
+    max: 75,
+    variant: "primary"
+  });
+};

package/build/system/Wizard/Wizard.js

@@ -7,13 +7,15 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _md = require("react-icons/md");
 
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["steps", "activeStep", "variant", "completed"];
+var _excluded = ["steps", "activeStep", "variant", "completed", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -27,9 +29,12 @@ var Wizard = function Wizard(_ref) {
       variant = _ref.variant,
       _ref$completed = _ref.completed,
       completed = _ref$completed === void 0 ? [] : _ref$completed,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return (0, _jsxRuntime.jsx)(_.Box, {
+    className: (0, _classnames["default"])('vip-wizard-component', className),
     children: variant === 'horizontal' ? (0, _jsxRuntime.jsxs)(_.Box, {
       children: [(0, _jsxRuntime.jsx)(_.Flex, _extends({
         sx: {
@@ -41,6 +46,7 @@ var Wizard = function Wizard(_ref) {
               subTitle = _ref2.subTitle;
           return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
             children: [(0, _jsxRuntime.jsx)(_.WizardStepHorizontal, {
+              order: index + 1,
               active: index === activeStep,
               title: title,
               subTitle: subTitle
@@ -62,6 +68,7 @@ var Wizard = function Wizard(_ref) {
         title: title,
         subTitle: subTitle,
         complete: completed.includes(index),
+        order: index + 1,
         children: children
       }, index);
     })
@@ -73,5 +80,6 @@ Wizard.propTypes = {
   steps: _propTypes["default"].array,
   activeStep: _propTypes["default"].number,
   variant: _propTypes["default"].string,
-  completed: _propTypes["default"].array
+  completed: _propTypes["default"].array,
+  className: _propTypes["default"].any
 };