@automattic/vip-design-system 0.14.2 → 0.15.0

package/.prettierignore

@@ -0,0 +1 @@
+src/system/theme/generated

package/README.md

@@ -41,6 +41,32 @@ For components that include storybooks, we can run `npm run storybook` to view t
 
 Note: it's super useful to run `npm run watch` in another process, so any changes will be almost immediately available / testable.
 
+### Updating the Theme with VIP Design System Tokens
+
+You need to update the tokens once the VIP Design System updates the core files.
+
+#### How the theming works
+
+We use the VIP Design System Tokens as our base theme structure. All colors, spaces, types should come from a dynamic token system provided by the VIP Design team, currently using Figma as the design software. When the design system is updated by the Design team, they push a file to the root of this repository: `tokens/valet-core.json`.
+
+By using the [Token Transformer](https://docs.tokens.studio/sync/github#7-how-to-use-tokens-stored-in-github-in-development) and a custom npm script, we parse this file getting only the VIP Dashboard theme we need for the react components. The theme is called: `productive-color-wpvip`.
+
+Once the new file is updated, we need to generate a custom theme file in `src/generated/valet-theme.json`. This operation generates a small json file with the colors we need already filled in.
+
+Once the theme is updated, the file `src/system/theme/index.js` reads the colors and apply to all components.
+
+Use the section below to run the script and update the theme.
+
+_Important:_ If you change the `generated/valet-theme.json`, make it sure to open a new pull request with these changes and release a new version if needed.
+
+#### Update theme script
+
+Run this command to update the VIP Valet Theme with the latest `tokens/valet-core.json`.
+
+```bash
+npm run theme-update
+```
+
 ### Publish NPM Package Instructions
 
 Once all the changes needed are merged to trunk, and you are ready to release a new version, follow these steps:

package/build/system/Button/Button.js

@@ -9,17 +9,19 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _themeUi = require("theme-ui");
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _themeUi = require("theme-ui");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["sx"];
 
-var Button = function Button(_ref) {
+var Button = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var sx = _ref.sx,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsx)(_themeUi.Button, (0, _extends2["default"])({
@@ -43,10 +45,13 @@ var Button = function Button(_ref) {
       }
     }, sx),
     className: (0, _classnames["default"])('vip-button-component', props.className)
-  }, props));
-};
+  }, props, {
+    ref: forwardRef
+  }));
+});
 
 exports.Button = Button;
+Button.displayName = 'Button';
 Button.propTypes = {
   sx: _propTypes["default"].object,
   className: _propTypes["default"].any

package/build/system/NewDialog/DialogClose.js

@@ -3,35 +3,50 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.DialogClose = void 0;
+exports.DialogCloseDefault = exports.DialogClose = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _react = _interopRequireDefault(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var DialogPrimitive = _interopRequireWildcard(require("@radix-ui/react-dialog"));
 
 var _io = require("react-icons/io5");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+var _excluded = ["children"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-
 /**
  * Internal dependencies
  */
-var DialogClose = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardedRef) {
+var DialogClose = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardedRef) {
+  var children = _ref.children,
+      rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsx)(DialogPrimitive.Close, (0, _extends2["default"])({
     asChild: true
-  }, props, {
+  }, rest, {
+    ref: forwardedRef,
+    children: children
+  }));
+});
+
+exports.DialogClose = DialogClose;
+DialogClose.propTypes = {
+  children: _propTypes["default"].node
+};
+DialogClose.displayName = 'DialogClose';
+
+var DialogCloseDefault = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardedRef) {
+  return (0, _jsxRuntime.jsx)(DialogClose, (0, _extends2["default"])({}, props, {
     ref: forwardedRef,
     children: (0, _jsxRuntime.jsx)("button", {
       "aria-label": "Close",
@@ -72,5 +87,5 @@ var DialogClose = /*#__PURE__*/_react["default"].forwardRef(function (props, for
   }));
 });
 
-exports.DialogClose = DialogClose;
-DialogClose.displayName = 'DialogClose';
+exports.DialogCloseDefault = DialogCloseDefault;
+DialogCloseDefault.displayName = 'DialogCloseDefault';

package/build/system/NewDialog/DialogClose.test.js

@@ -44,7 +44,7 @@ describe('<DialogClose />', function () {
         switch (_context.prev = _context.next) {
           case 0:
             _render = (0, _react.render)((0, _jsxRuntime.jsx)(Wrapper, {
-              children: (0, _jsxRuntime.jsx)(_DialogClose.DialogClose, (0, _extends2["default"])({}, defaultProps))
+              children: (0, _jsxRuntime.jsx)(_DialogClose.DialogCloseDefault, (0, _extends2["default"])({}, defaultProps))
             })), container = _render.container;
             expect(_react.screen.getByLabelText('Close')).toBeInTheDocument(); // Check for accessibility issues
 

package/build/system/NewDialog/DialogDescription.js

@@ -15,7 +15,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var DialogPrimitive = _interopRequireWildcard(require("@radix-ui/react-dialog"));
 
-var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText/ScreenReaderText"));
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 

package/build/system/NewDialog/DialogTitle.js

@@ -9,7 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var DialogPrimitive = _interopRequireWildcard(require("@radix-ui/react-dialog"));
 
-var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText/ScreenReaderText"));
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 

package/build/system/NewDialog/NewDialog.js

@@ -51,17 +51,7 @@ var NewDialog = function NewDialog(_ref) {
       _ref$defaultOpen = _ref.defaultOpen,
       defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
       _ref$allowPinchZoom = _ref.allowPinchZoom,
-      allowPinchZoom = _ref$allowPinchZoom === void 0 ? false : _ref$allowPinchZoom,
-      _ref$onOpenAutoFocus = _ref.onOpenAutoFocus,
-      onOpenAutoFocus = _ref$onOpenAutoFocus === void 0 ? null : _ref$onOpenAutoFocus,
-      _ref$onCloseAutoFocus = _ref.onCloseAutoFocus,
-      onCloseAutoFocus = _ref$onCloseAutoFocus === void 0 ? null : _ref$onCloseAutoFocus,
-      _ref$onEscapeKeyDown = _ref.onEscapeKeyDown,
-      onEscapeKeyDown = _ref$onEscapeKeyDown === void 0 ? null : _ref$onEscapeKeyDown,
-      _ref$onPointerDownOut = _ref.onPointerDownOutside,
-      onPointerDownOutside = _ref$onPointerDownOut === void 0 ? null : _ref$onPointerDownOut,
-      _ref$onInteractOutsid = _ref.onInteractOutside,
-      onInteractOutside = _ref$onInteractOutsid === void 0 ? null : _ref$onInteractOutsid;
+      allowPinchZoom = _ref$allowPinchZoom === void 0 ? false : _ref$allowPinchZoom;
 
   if (disabled) {
     return;
@@ -77,12 +67,7 @@ var NewDialog = function NewDialog(_ref) {
       children: [(0, _jsxRuntime.jsx)(_DialogOverlay.DialogOverlay, {}), (0, _jsxRuntime.jsxs)(DialogPrimitive.Content, {
         className: "vip-dialog-component",
         sx: (0, _extends2["default"])({}, _DialogContent.contentStyles, extraStyles),
-        onOpenAutoFocus: onOpenAutoFocus,
-        onCloseAutoFocus: onCloseAutoFocus,
-        onEscapeKeyDown: onEscapeKeyDown,
-        onPointerDownOutside: onPointerDownOutside,
-        onInteractOutside: onInteractOutside,
-        children: [(0, _jsxRuntime.jsx)(_DialogClose.DialogClose, {}), (0, _jsxRuntime.jsx)(_DialogTitle.DialogTitle, {
+        children: [(0, _jsxRuntime.jsx)(_DialogClose.DialogCloseDefault, {}), (0, _jsxRuntime.jsx)(_DialogTitle.DialogTitle, {
           title: title,
           hidden: !showHeading
         }), (0, _jsxRuntime.jsx)(_DialogDescription.DialogDescription, {
@@ -109,12 +94,5 @@ NewDialog.propTypes = {
   // Radix DialogPrimitive.Root properties
   // https://www.radix-ui.com/docs/primitives/components/dialog#root
   defaultOpen: _propTypes["default"].bool,
-  allowPinchZoom: _propTypes["default"].bool,
-  // Radix DialogPrimitive.Content properties
-  // https://www.radix-ui.com/docs/primitives/components/dialog#content
-  onOpenAutoFocus: _propTypes["default"].func,
-  onCloseAutoFocus: _propTypes["default"].func,
-  onEscapeKeyDown: _propTypes["default"].func,
-  onPointerDownOutside: _propTypes["default"].func,
-  onInteractOutside: _propTypes["default"].func
+  allowPinchZoom: _propTypes["default"].bool
 };

package/build/system/NewDialog/NewDialog.stories.js

@@ -3,15 +3,15 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.HiddenHeadings = exports.Default = exports.CustomStyling = exports.AutoOpen = void 0;
+exports["default"] = exports.HiddenHeadings = exports.Default = exports.CustomStyling = exports.CustomClose = exports.AutoOpen = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _system = require("../../system");
 
-var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText/ScreenReaderText"));
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
 
-var _NewDialog = require("./NewDialog");
+var _ = require(".");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
@@ -23,7 +23,7 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
  */
 var _default = {
   title: 'NewDialog',
-  component: _NewDialog.NewDialog
+  component: _.NewDialog
 };
 exports["default"] = _default;
 var defaultProps = {
@@ -39,7 +39,7 @@ var Default = function Default() {
         mb: 3
       },
       children: "Regular Dialog where the title and description are built-in and the content is provided by the user."
-    }), (0, _jsxRuntime.jsx)(_NewDialog.NewDialog, (0, _extends2["default"])({}, defaultProps, {
+    }), (0, _jsxRuntime.jsx)(_.NewDialog, (0, _extends2["default"])({}, defaultProps, {
       trigger: (0, _jsxRuntime.jsx)(_system.Button, {
         children: "Trigger Dialog"
       })
@@ -57,7 +57,7 @@ var AutoOpen = function AutoOpen() {
         mb: 3
       },
       children: "Auto Opens when rendered. Press escape to close it."
-    }), (0, _jsxRuntime.jsx)(_NewDialog.NewDialog, (0, _extends2["default"])({}, defaultProps, {
+    }), (0, _jsxRuntime.jsx)(_.NewDialog, (0, _extends2["default"])({}, defaultProps, {
       defaultOpen: true,
       content: (0, _jsxRuntime.jsxs)("div", {
         children: [(0, _jsxRuntime.jsx)("h3", {
@@ -83,7 +83,7 @@ var HiddenHeadings = function HiddenHeadings() {
         mb: 3
       },
       children: "Title and description are hidden, but still announced using a screen reader. Activate VoiceOver or any similar screen reader to listen to: Custom dialog title, Description of the dialog content."
-    }), (0, _jsxRuntime.jsx)(_NewDialog.NewDialog, (0, _extends2["default"])({}, defaultProps, {
+    }), (0, _jsxRuntime.jsx)(_.NewDialog, (0, _extends2["default"])({}, defaultProps, {
       trigger: (0, _jsxRuntime.jsx)(_system.Button, {
         children: "Trigger Dialog"
       }),
@@ -124,7 +124,7 @@ var CustomStyling = function CustomStyling() {
         mb: 3
       },
       children: "Custom Styling on Dialog Content"
-    }), (0, _jsxRuntime.jsx)(_NewDialog.NewDialog, (0, _extends2["default"])({}, defaultProps, {
+    }), (0, _jsxRuntime.jsx)(_.NewDialog, (0, _extends2["default"])({}, defaultProps, {
       defaultOpen: true,
       trigger: (0, _jsxRuntime.jsx)(_system.Button, {
         children: "Trigger Dialog"
@@ -167,4 +167,29 @@ var CustomStyling = function CustomStyling() {
   });
 };
 
-exports.CustomStyling = CustomStyling;
+exports.CustomStyling = CustomStyling;
+
+var CustomClose = function CustomClose() {
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)(_system.Text, {
+      sx: {
+        fontSize: 3,
+        mb: 3
+      },
+      children: "This example shows how you can create a custom Close trigger to your dialog"
+    }), (0, _jsxRuntime.jsx)(_.NewDialog, (0, _extends2["default"])({}, defaultProps, {
+      trigger: (0, _jsxRuntime.jsx)(_system.Button, {
+        children: "Trigger Dialog"
+      }),
+      content: (0, _jsxRuntime.jsx)("div", {
+        children: (0, _jsxRuntime.jsx)(_.Close, {
+          children: (0, _jsxRuntime.jsx)(_system.Button, {
+            children: "Close here instead"
+          })
+        })
+      })
+    }))]
+  });
+};
+
+exports.CustomClose = CustomClose;

package/build/system/NewDialog/index.js

@@ -1,7 +1,20 @@
 "use strict";
 
 exports.__esModule = true;
+exports["default"] = exports.Root = exports.Close = void 0;
+
+var _DialogClose = require("./DialogClose");
 
 var _NewDialog = require("./NewDialog");
 
-exports.NewDialog = _NewDialog.NewDialog;
+exports.NewDialog = _NewDialog.NewDialog;
+
+/**
+ * Internal dependencies
+ */
+var Root = _NewDialog.NewDialog;
+exports.Root = Root;
+var Close = _DialogClose.DialogClose;
+exports.Close = Close;
+var _default = _NewDialog.NewDialog;
+exports["default"] = _default;

package/build/system/Notification/Notification.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ = require("../");
 
-var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText/ScreenReaderText"));
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 

package/build/system/ScreenReaderText/ScreenReader.test.js

@@ -8,7 +8,7 @@ var _react = require("@testing-library/react");
 
 require("@testing-library/jest-dom");
 
-var _ScreenReaderText = _interopRequireDefault(require("./ScreenReaderText"));
+var _ = _interopRequireDefault(require("."));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
@@ -24,7 +24,7 @@ describe('<ScreenReaderText />', function () {
     var props = {};
     var text = 'Hello there';
 
-    var _render = (0, _react.render)((0, _jsxRuntime.jsx)(_ScreenReaderText["default"], (0, _extends2["default"])({}, props, {
+    var _render = (0, _react.render)((0, _jsxRuntime.jsx)(_["default"], (0, _extends2["default"])({}, props, {
       children: text
     }))),
         container = _render.container; // we're using the querySelector to ensure the class is rendered since it affects the A11Y

package/build/system/ScreenReaderText/ScreenReaderText.js

@@ -3,10 +3,12 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = ScreenReaderText;
+exports.ScreenReaderText = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
@@ -20,7 +22,7 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 /**
  * Internal dependencies
  */
-function ScreenReaderText(props) {
+var ScreenReaderText = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
   return (0, _jsxRuntime.jsx)("span", (0, _extends2["default"])({
     className: "screen-reader-text",
     sx: {
@@ -36,14 +38,17 @@ function ScreenReaderText(props) {
       wordWrap: 'normal !important'
     }
   }, props, {
+    ref: forwardRef,
     children: props.children
   }));
-}
+});
+
+exports.ScreenReaderText = ScreenReaderText;
+ScreenReaderText.displayName = 'ScreenReaderText';
 /**
  * propTypes
  */
 
-
 ScreenReaderText.propTypes = {
   children: _propTypes["default"].node.isRequired
 };

package/build/system/ScreenReaderText/index.js

@@ -1,7 +1,14 @@
 "use strict";
 
 exports.__esModule = true;
+exports["default"] = void 0;
 
 var _ScreenReaderText = require("./ScreenReaderText");
 
-exports.ScreenReaderText = _ScreenReaderText.ScreenReaderText;
+exports.ScreenReaderText = _ScreenReaderText.ScreenReaderText;
+
+/**
+ * Internal dependencies
+ */
+var _default = _ScreenReaderText.ScreenReaderText;
+exports["default"] = _default;