@automattic/vip-design-system 0.9.6 → 0.10.0

package/README.md

@@ -43,10 +43,10 @@ Note: it's super useful to run `npm run watch` in another process, so any change
 
 ### Publish NPM Package Instructions
 
-Once all the changes needed are merged to master, and you are ready to release a new version, follow these steps:
+Once all the changes needed are merged to trunk, and you are ready to release a new version, follow these steps:
 
 1. Make sure you have NPM access to our @automattic organization. Ask for #vip-platform-pâtisserie help in case you need it.
-2. Pull all the changes to your local master. Make sure you have the latest master locally.
+2. Pull all the changes to your local trunk. Make sure you have the latest trunk locally.
 3. We follow the [https://semver.org/](https://semver.org/) versioning. You should run the specific version you are trying to publish:
 
 ```bash
@@ -67,11 +67,11 @@ npm publish
 
 Note: You need to have two-factor enabled in your npm account. The publish command will request a two-factor code to complete the publishing process.
 
-7. Push the tags to the repository and master updates.
+7. Push the tags to the repository and trunk updates.
 
 ```
 git push --tags
-git push origin master
+git push origin trunk
 ```
 
 8. For major versions or breaking changes, it's recommended to [create a RELEASE](https://github.com/Automattic/vip-design-system/releases) with the published tag.

package/build/system/Avatar/Avatar.js

@@ -7,11 +7,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _themeUi = require("theme-ui");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["isVIP", "name", "size", "src"];
+var _excluded = ["isVIP", "name", "size", "src", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -28,6 +30,8 @@ var Avatar = function Avatar(_ref) {
       size = _ref$size === void 0 ? 32 : _ref$size,
       _ref$src = _ref.src,
       src = _ref$src === void 0 ? null : _ref$src,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return (0, _jsxRuntime.jsx)(_.Box, _extends({
@@ -47,7 +51,8 @@ var Avatar = function Avatar(_ref) {
       color: 'white',
       padding: '1px',
       textAlign: 'center'
-    }
+    },
+    className: (0, _classnames["default"])('vip-avatar-component', className)
   }, props, {
     children: src ? (0, _jsxRuntime.jsx)(_themeUi.Image, {
       src: src,
@@ -76,5 +81,6 @@ Avatar.propTypes = {
   isVIP: _propTypes["default"].bool,
   size: _propTypes["default"].number,
   src: _propTypes["default"].string,
-  name: _propTypes["default"].string
+  name: _propTypes["default"].string,
+  className: _propTypes["default"].any
 };

package/build/system/Avatar/Avatar.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: 'Avatar',
-  component: _.Avatar
-};
-exports["default"] = _default;
 
-var Default = function Default() {
-  return (0, _jsxRuntime.jsx)(_.Avatar, {});
+import { Avatar } from '..';
+export default {
+  title: 'Avatar',
+  component: Avatar
 };
-
-exports.Default = Default;
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Avatar, null);
+};

package/build/system/Badge/Badge.js

@@ -3,13 +3,15 @@
 exports.__esModule = true;
 exports.Badge = void 0;
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ = require("../");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["variant", "sx"];
+var _excluded = ["variant", "sx", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -21,6 +23,8 @@ var Badge = function Badge(_ref) {
   var _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'blue' : _ref$variant,
       sx = _ref.sx,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return (0, _jsxRuntime.jsx)(_.Text, _extends({
@@ -36,12 +40,14 @@ var Badge = function Badge(_ref) {
       display: 'inline-block',
       borderRadius: 1,
       fontWeight: 'heading'
-    }, sx)
+    }, sx),
+    className: (0, _classnames["default"])('vip-badge-component', className)
   }, props));
 };
 
 exports.Badge = Badge;
 Badge.propTypes = {
   variant: _propTypes["default"].string,
-  sx: _propTypes["default"].object
+  sx: _propTypes["default"].object,
+  className: _propTypes["default"].any
 };

package/build/system/Badge/Badge.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: 'Badge',
-  component: _.Badge
-};
-exports["default"] = _default;
 
-var Default = function Default() {
-  return (0, _jsxRuntime.jsx)(_.Badge, {
-    children: "Badge"
-  });
+import { Badge } from '..';
+export default {
+  title: 'Badge',
+  component: Badge
 };
-
-exports.Default = Default;
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Badge, null, "Badge");
+};

package/build/system/BlankState/BlankState.js

@@ -3,6 +3,8 @@
 exports.__esModule = true;
 exports.BlankState = void 0;
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ = require("..");
@@ -27,12 +29,15 @@ var BlankState = function BlankState(_ref) {
       image = _ref.image,
       _ref$imageAlt = _ref.imageAlt,
       imageAlt = _ref$imageAlt === void 0 ? 'Image representing the blank state' : _ref$imageAlt,
-      title = _ref.title;
+      title = _ref.title,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className;
   return (0, _jsxRuntime.jsxs)(_.Box, {
     sx: {
       textAlign: 'center',
       padding: 5
     },
+    className: (0, _classnames["default"])('vip-blank-state-component', className),
     children: [icon ? icon : (0, _jsxRuntime.jsx)("img", {
       src: image,
       sx: {
@@ -60,5 +65,6 @@ BlankState.propTypes = {
   icon: _propTypes["default"].node,
   image: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].string]),
   imageAlt: _propTypes["default"].string,
-  title: _propTypes["default"].node
+  title: _propTypes["default"].node,
+  className: _propTypes["default"].any
 };

package/build/system/BlankState/BlankState.stories.js

@@ -1,41 +1,25 @@
-"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 { Link, BlankState } from '..';
+export default {
   title: 'BlankState',
-  component: _.BlankState
+  component: BlankState
 }; // eslint-disable-next-line max-len
 
-exports["default"] = _default;
 var image2 = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='79' height='79' viewBox='0 0 79 79' fill='none'%3E%3Cpath d='M66.3001 15.9C66.3001 15.9 66.3 15.8 66.2 15.8C66.1 15.7 66 15.5 65.9001 15.4C65.9001 15.4 65.9001 15.4 65.9001 15.3L44.4001 0.2C44.3001 0.0999998 44.2 0.0999994 44.1 0.0999994C44 0.0999994 44.0001 0 43.9001 0H43.3C43.2 0 43.1 0.0999994 43.1 0.0999994C43 0.0999994 42.9 0.2 42.8 0.2L28.2001 10.3C28.1 10.4 28.0001 10.5 27.9001 10.6C27.9001 10.6 27.9001 10.6 27.9001 10.7C27.8001 10.8 27.7001 11 27.7001 11.2C27.7001 11.2 27.7001 11.2 27.7001 11.3V31.1L13.9 40.8L13.7001 41C13.6001 41.1 13.6 41.1 13.6 41.2L13.5 41.3C13.5 41.4 13.4 41.5 13.4 41.5V41.6C13.4 41.7 13.3 41.8 13.3 42V62.2C13.3 62.4 13.3 62.6 13.4 62.7V62.8C13.5 62.9 13.6001 63.1 13.7001 63.2C13.7001 63.2 13.7 63.2 13.8 63.3L13.9 63.4L35.3 78.6H35.4001C35.4001 78.6 35.5 78.6 35.5 78.7H35.6C35.8 78.8 36 78.8 36.2001 78.8C36.3001 78.8 36.5 78.8 36.6 78.7H36.7001C36.8001 78.7 36.8001 78.7 36.9001 78.6C36.9001 78.6 37 78.6 37 78.5H37.1L66 58.3C66.1 58.2 66.2001 58.1 66.3001 58V15.9ZM34.6 74.5L16.1 61.3V44.7L34.6 57.8V74.5ZM36 55.3L17.2001 41.9L29 33.5L47.9001 46.9L36 55.3ZM49 44.1L30.5 31V14.4L49 27.5V44.1ZM50.5 24.9L31.6 11.5L43.5 3.2L62.4001 16.6L50.5 24.9Z' fill='%23BD9D70'/%3E%3C/svg%3E";
-
-var Default = function Default() {
-  return (0, _jsxRuntime.jsx)(_.BlankState, {
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(BlankState, {
     image: image2,
     title: "Power up your application",
     body: "Add-ons give you the ability to bolt on extra capabilities to\nyour application, including logging, analytics and performance\nmonitoring.",
-    cta: (0, _jsxRuntime.jsx)(_.Link, {
-      as: "a",
-      children: "Explore add-ons \u2192"
-    })
+    cta: /*#__PURE__*/React.createElement(Link, {
+      as: "a"
+    }, "Explore add-ons \u2192")
   });
-};
-
-exports.Default = Default;
+};

package/build/system/Box/Box.js

@@ -3,18 +3,28 @@
 exports.__esModule = true;
 exports.Box = void 0;
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _react = require("react");
 
 var _themeUi = require("theme-ui");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 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); }
 
 var Box = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return (0, _jsxRuntime.jsx)(_themeUi.Box, _extends({
-    ref: ref
+    ref: ref,
+    className: (0, _classnames["default"])('vip-box-component', props.className)
   }, props));
 });
 exports.Box = Box;
-Box.displayName = 'Box';
+Box.displayName = 'Box';
+Box.propTypes = {
+  className: _propTypes["default"].any
+};

package/build/system/Box/Box.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: 'Box',
-  component: _.Box
-};
-exports["default"] = _default;
 
-var Default = function Default() {
-  return (0, _jsxRuntime.jsx)(_.Box, {
-    children: "Hello"
-  });
+import { Box } from '..';
+export default {
+  title: 'Box',
+  component: Box
 };
-
-exports.Default = Default;
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Box, null, "Hello");
+};

package/build/system/Button/Button.js

@@ -7,6 +7,8 @@ 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"];
@@ -34,11 +36,13 @@ var Button = function Button(_ref) {
         cursor: 'not-allowed',
         pointerEvents: 'all'
       }
-    }, sx)
+    }, sx),
+    className: (0, _classnames["default"])('vip-button-component', props.className)
   }, props));
 };
 
 exports.Button = Button;
 Button.propTypes = {
-  sx: _propTypes["default"].object
+  sx: _propTypes["default"].object,
+  className: _propTypes["default"].any
 };

package/build/system/Button/Button.stories.js

@@ -1,44 +1,31 @@
-"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: 'Button',
-  component: _.Button
-};
-exports["default"] = _default;
 
-var Default = function Default() {
-  return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
-    children: [(0, _jsxRuntime.jsx)(_.Button, {
-      sx: {
-        mr: 2
-      },
-      children: "Primary"
-    }), (0, _jsxRuntime.jsx)(_.Button, {
-      variant: "secondary",
-      sx: {
-        ml: 2
-      },
-      children: "Secondary"
-    })]
-  });
+import { Button } from '..';
+export default {
+  title: 'Button',
+  component: Button
 };
-
-exports.Default = Default;
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    sx: {
+      mr: 2
+    }
+  }, "Primary"), /*#__PURE__*/React.createElement(Button, {
+    variant: "secondary",
+    sx: {
+      ml: 2
+    }
+  }, "Secondary"), /*#__PURE__*/React.createElement(Button, {
+    variant: "secondary",
+    isLoading: true,
+    sx: {
+      ml: 2
+    }
+  }, "Secondary"));
+};

package/build/system/Card/Card.js

@@ -9,9 +9,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ = require("..");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["variant", "sx"];
+var _excluded = ["variant", "sx", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -24,6 +26,7 @@ var Card = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
       _ref$sx = _ref.sx,
       sx = _ref$sx === void 0 ? {} : _ref$sx,
+      className = _ref.className,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return (0, _jsxRuntime.jsx)(_.Box, _extends({
@@ -32,13 +35,15 @@ var Card = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       // pass variant prop to sx
       variant: "cards." + variant,
       overflow: 'hidden'
-    }, sx)
+    }, sx),
+    className: (0, _classnames["default"])('vip-card-component', className)
   }, props));
 });
 
 exports.Card = Card;
 Card.propTypes = {
   variant: _propTypes["default"].string,
-  sx: _propTypes["default"].object
+  sx: _propTypes["default"].object,
+  className: _propTypes["default"].any
 };
 Card.displayName = 'Card';

package/build/system/Card/Card.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: 'Card',
-  component: _.Card
-};
-exports["default"] = _default;
 
-var Default = function Default() {
-  return (0, _jsxRuntime.jsx)(_.Card, {
-    children: "Hello"
-  });
+import { Card } from '..';
+export default {
+  title: 'Card',
+  component: Card
 };
-
-exports.Default = Default;
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Card, null, "Hello");
+};

package/build/system/Code/Code.js

@@ -3,6 +3,8 @@
 exports.__esModule = true;
 exports.Code = void 0;
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = require("react");
@@ -11,7 +13,7 @@ var _md = require("react-icons/md");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["prompt", "showCopy", "onCopy"];
+var _excluded = ["prompt", "showCopy", "onCopy", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -26,6 +28,7 @@ var Code = function Code(_ref) {
       showCopy = _ref$showCopy === void 0 ? false : _ref$showCopy,
       _ref$onCopy = _ref.onCopy,
       onCopy = _ref$onCopy === void 0 ? null : _ref$onCopy,
+      className = _ref.className,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var ref = (0, _react.useRef)();
@@ -46,7 +49,8 @@ var Code = function Code(_ref) {
         marginRight: 2,
         userSelect: 'none'
       }
-    }
+    },
+    className: (0, _classnames["default"])('vip-code-component', className)
   }, props));
 
   if (!showCopy) {
@@ -100,5 +104,6 @@ exports.Code = Code;
 Code.propTypes = {
   prompt: _propTypes["default"].bool,
   showCopy: _propTypes["default"].bool,
-  onCopy: _propTypes["default"].func
+  onCopy: _propTypes["default"].func,
+  className: _propTypes["default"].any
 };

package/build/system/Code/Code.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: 'Code',
-  component: _.Code
-};
-exports["default"] = _default;
 
-var Default = function Default() {
-  return (0, _jsxRuntime.jsx)(_.Code, {
-    children: "Code"
-  });
+import { Code } from '..';
+export default {
+  title: 'Code',
+  component: Code
 };
-
-exports.Default = Default;
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Code, null, "Code");
+};

package/build/system/ConfirmationDialog/ConfirmationDialog.js

@@ -3,6 +3,8 @@
 exports.__esModule = true;
 exports.ConfirmationDialogContent = exports.ConfirmationDialog = void 0;
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -25,9 +27,12 @@ var ConfirmationDialogContent = function ConfirmationDialogContent(_ref) {
       onClose = _ref.onClose,
       _ref$label = _ref.label,
       label = _ref$label === void 0 ? 'Confirm' : _ref$label,
-      onConfirm = _ref.onConfirm;
+      onConfirm = _ref.onConfirm,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className;
   return (0, _jsxRuntime.jsxs)(_.Box, {
     p: 4,
+    className: (0, _classnames["default"])('vip-confirmation-dialog-component', className),
     children: [(0, _jsxRuntime.jsx)(_.Heading, {
       variant: "h3",
       sx: {
@@ -66,7 +71,8 @@ ConfirmationDialogContent.propTypes = {
   body: _propTypes["default"].node,
   label: _propTypes["default"].string,
   onClose: _propTypes["default"].func,
-  onConfirm: _propTypes["default"].func
+  onConfirm: _propTypes["default"].func,
+  className: _propTypes["default"].any
 };
 
 var ConfirmationDialog = function ConfirmationDialog(_ref2) {