@automattic/vip-design-system 0.15.0 → 0.16.0

package/build/system/NewDialog/NewDialog.js

@@ -51,13 +51,22 @@ 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;
+      allowPinchZoom = _ref$allowPinchZoom === void 0 ? false : _ref$allowPinchZoom,
+      _ref$onOpenChange = _ref.onOpenChange,
+      onOpenChange = _ref$onOpenChange === void 0 ? undefined : _ref$onOpenChange,
+      _ref$open = _ref.open,
+      open = _ref$open === void 0 ? undefined : _ref$open,
+      _ref$id = _ref.id,
+      id = _ref$id === void 0 ? undefined : _ref$id;
 
   if (disabled) {
     return;
   }
 
   return (0, _jsxRuntime.jsxs)(DialogPrimitive.Root, {
+    id: id,
+    open: open,
+    onOpenChange: onOpenChange,
     defaultOpen: defaultOpen,
     allowPinchZoom: allowPinchZoom,
     children: [trigger && (0, _jsxRuntime.jsx)(DialogPrimitive.Trigger, {
@@ -93,6 +102,9 @@ NewDialog.propTypes = {
   style: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].func]),
   // Radix DialogPrimitive.Root properties
   // https://www.radix-ui.com/docs/primitives/components/dialog#root
+  id: _propTypes["default"].string,
+  open: _propTypes["default"].bool,
   defaultOpen: _propTypes["default"].bool,
-  allowPinchZoom: _propTypes["default"].bool
+  allowPinchZoom: _propTypes["default"].bool,
+  onOpenChange: _propTypes["default"].func
 };

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

@@ -3,27 +3,37 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.HiddenHeadings = exports.Default = exports.CustomStyling = exports.CustomClose = exports.AutoOpen = void 0;
+exports["default"] = exports.HiddenHeadings = exports.Default = exports.CustomStyling = exports.CustomStateManagement = exports.CustomClose = exports.AutoOpen = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _react = require("react");
+
 var _system = require("../../system");
 
 var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
 
-var _ = require(".");
+var NewDialog = _interopRequireWildcard(require("."));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+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 _default = {
   title: 'NewDialog',
-  component: _.NewDialog
+  component: NewDialog.Root
 };
 exports["default"] = _default;
 var defaultProps = {
@@ -39,7 +49,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, (0, _extends2["default"])({}, defaultProps, {
+    }), (0, _jsxRuntime.jsx)(NewDialog.Root, (0, _extends2["default"])({}, defaultProps, {
       trigger: (0, _jsxRuntime.jsx)(_system.Button, {
         children: "Trigger Dialog"
       })
@@ -57,7 +67,7 @@ var AutoOpen = function AutoOpen() {
         mb: 3
       },
       children: "Auto Opens when rendered. Press escape to close it."
-    }), (0, _jsxRuntime.jsx)(_.NewDialog, (0, _extends2["default"])({}, defaultProps, {
+    }), (0, _jsxRuntime.jsx)(NewDialog.Root, (0, _extends2["default"])({}, defaultProps, {
       defaultOpen: true,
       content: (0, _jsxRuntime.jsxs)("div", {
         children: [(0, _jsxRuntime.jsx)("h3", {
@@ -83,7 +93,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, (0, _extends2["default"])({}, defaultProps, {
+    }), (0, _jsxRuntime.jsx)(NewDialog.Root, (0, _extends2["default"])({}, defaultProps, {
       trigger: (0, _jsxRuntime.jsx)(_system.Button, {
         children: "Trigger Dialog"
       }),
@@ -124,7 +134,7 @@ var CustomStyling = function CustomStyling() {
         mb: 3
       },
       children: "Custom Styling on Dialog Content"
-    }), (0, _jsxRuntime.jsx)(_.NewDialog, (0, _extends2["default"])({}, defaultProps, {
+    }), (0, _jsxRuntime.jsx)(NewDialog.Root, (0, _extends2["default"])({}, defaultProps, {
       defaultOpen: true,
       trigger: (0, _jsxRuntime.jsx)(_system.Button, {
         children: "Trigger Dialog"
@@ -177,12 +187,12 @@ var CustomClose = function CustomClose() {
         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, {
+    }), (0, _jsxRuntime.jsx)(NewDialog.Root, (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)(NewDialog.Close, {
           children: (0, _jsxRuntime.jsx)(_system.Button, {
             children: "Close here instead"
           })
@@ -192,4 +202,40 @@ var CustomClose = function CustomClose() {
   });
 };
 
-exports.CustomClose = CustomClose;
+exports.CustomClose = CustomClose;
+
+var CustomStateManagement = function CustomStateManagement() {
+  var _useState = (0, _react.useState)(false),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsxs)(_system.Text, {
+      sx: {
+        fontSize: 3,
+        mb: 3
+      },
+      children: ["This example shows how you can create a custom state management. To achieve accessibility, you need to control the ", (0, _jsxRuntime.jsx)("strong", {
+        children: "open"
+      }), " state, but also keep consistency using the", ' ', (0, _jsxRuntime.jsx)("strong", {
+        children: "onOpenChange"
+      }), " attribute."]
+    }), (0, _jsxRuntime.jsx)(NewDialog.Root, (0, _extends2["default"])({}, defaultProps, {
+      open: open,
+      onOpenChange: setOpen,
+      trigger: (0, _jsxRuntime.jsx)(_system.Button, {
+        children: "Trigger Dialog"
+      }),
+      content: (0, _jsxRuntime.jsx)("div", {
+        children: (0, _jsxRuntime.jsx)(_system.Button, {
+          onClick: function onClick() {
+            return setOpen(false);
+          },
+          children: "Close here instead"
+        })
+      })
+    }))]
+  });
+};
+
+exports.CustomStateManagement = CustomStateManagement;

package/build/system/index.js

@@ -3,6 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
+exports.NewDialog = void 0;
 
 var _Avatar = require("./Avatar");
 
@@ -42,9 +43,9 @@ exports.DialogMenuItem = _Dialog.DialogMenuItem;
 exports.DialogTrigger = _Dialog.DialogTrigger;
 exports.DialogContent = _Dialog.DialogContent;
 
-var _NewDialog = require("./NewDialog");
+var NewDialog = _interopRequireWildcard(require("./NewDialog"));
 
-exports.NewDialog = _NewDialog.NewDialog;
+exports.NewDialog = NewDialog;
 
 var _ConfirmationDialog = require("./ConfirmationDialog");
 
@@ -140,4 +141,8 @@ var _Wizard = require("./Wizard");
 
 exports.Wizard = _Wizard.Wizard;
 exports.WizardStep = _Wizard.WizardStep;
-exports.WizardStepHorizontal = _Wizard.WizardStepHorizontal;
+exports.WizardStepHorizontal = _Wizard.WizardStepHorizontal;
+
+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; }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.15.0",
+	"version": "0.16.0",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",

package/src/system/NewDialog/NewDialog.js

@@ -26,13 +26,22 @@ export const NewDialog = ( {
 	// Radix Specific Properties
 	defaultOpen = false,
 	allowPinchZoom = false,
+	onOpenChange = undefined,
+	open = undefined,
+	id = undefined,
 } ) => {
 	if ( disabled ) {
 		return;
 	}
 
 	return (
-		<DialogPrimitive.Root defaultOpen={ defaultOpen } allowPinchZoom={ allowPinchZoom }>
+		<DialogPrimitive.Root
+			id={ id }
+			open={ open }
+			onOpenChange={ onOpenChange }
+			defaultOpen={ defaultOpen }
+			allowPinchZoom={ allowPinchZoom }
+		>
 			{ trigger && <DialogPrimitive.Trigger asChild>{ trigger }</DialogPrimitive.Trigger> }
 
 			<DialogPrimitive.Portal>
@@ -64,6 +73,9 @@ NewDialog.propTypes = {
 
 	// Radix DialogPrimitive.Root properties
 	// https://www.radix-ui.com/docs/primitives/components/dialog#root
+	id: PropTypes.string,
+	open: PropTypes.bool,
 	defaultOpen: PropTypes.bool,
 	allowPinchZoom: PropTypes.bool,
+	onOpenChange: PropTypes.func,
 };

package/src/system/NewDialog/NewDialog.stories.jsx

@@ -1,16 +1,21 @@
 /** @jsxImportSource theme-ui */
 
+/**
+ * External dependencies
+ */
+import { useState } from 'react';
+
 /**
 /**
  * Internal dependencies
  */
 import { Button, Text, Input, Label } from '../../system';
 import ScreenReaderText from '../ScreenReaderText';
-import { NewDialog, Close } from '.';
+import * as NewDialog from '.';
 
 export default {
 	title: 'NewDialog',
-	component: NewDialog,
+	component: NewDialog.Root,
 };
 
 const defaultProps = {
@@ -24,14 +29,14 @@ export const Default = () => (
 			Regular Dialog where the title and description are built-in and the content is provided by the
 			user.
 		</Text>
-		<NewDialog { ...defaultProps } trigger={ <Button>Trigger Dialog</Button> } />
+		<NewDialog.Root { ...defaultProps } trigger={ <Button>Trigger Dialog</Button> } />
 	</>
 );
 
 export const AutoOpen = () => (
 	<>
 		<Text sx={ { fontSize: 3, mb: 3 } }>Auto Opens when rendered. Press escape to close it.</Text>
-		<NewDialog
+		<NewDialog.Root
 			{ ...defaultProps }
 			defaultOpen={ true }
 			content={
@@ -61,7 +66,7 @@ export const HiddenHeadings = () => (
 			dialog content.
 		</Text>
 
-		<NewDialog
+		<NewDialog.Root
 			{ ...defaultProps }
 			trigger={ <Button>Trigger Dialog</Button> }
 			title="Custom dialog title"
@@ -88,7 +93,7 @@ export const CustomStyling = () => (
 	<>
 		<Text sx={ { fontSize: 3, mb: 3 } }>Custom Styling on Dialog Content</Text>
 
-		<NewDialog
+		<NewDialog.Root
 			{ ...defaultProps }
 			defaultOpen
 			trigger={ <Button>Trigger Dialog</Button> }
@@ -118,16 +123,40 @@ export const CustomClose = () => (
 		<Text sx={ { fontSize: 3, mb: 3 } }>
 			This example shows how you can create a custom Close trigger to your dialog
 		</Text>
-		<NewDialog
+		<NewDialog.Root
 			{ ...defaultProps }
 			trigger={ <Button>Trigger Dialog</Button> }
 			content={
 				<div>
-					<Close>
+					<NewDialog.Close>
 						<Button>Close here instead</Button>
-					</Close>
+					</NewDialog.Close>
 				</div>
 			}
 		/>
 	</>
 );
+export const CustomStateManagement = () => {
+	const [ open, setOpen ] = useState( false );
+	return (
+		<>
+			<Text sx={ { fontSize: 3, mb: 3 } }>
+				This example shows how you can create a custom state management. To achieve accessibility,
+				you need to control the <strong>open</strong> state, but also keep consistency using the{ ' ' }
+				<strong>onOpenChange</strong> attribute.
+			</Text>
+
+			<NewDialog.Root
+				{ ...defaultProps }
+				open={ open }
+				onOpenChange={ setOpen }
+				trigger={ <Button>Trigger Dialog</Button> }
+				content={
+					<div>
+						<Button onClick={ () => setOpen( false ) }>Close here instead</Button>
+					</div>
+				}
+			/>
+		</>
+	);
+};

package/src/system/index.js

@@ -18,7 +18,7 @@ import {
 	DialogContent,
 } from './Dialog';
 
-import { NewDialog } from './NewDialog';
+import * as NewDialog from './NewDialog';
 import { ConfirmationDialog } from './ConfirmationDialog';
 import { Flex } from './Flex';
 import {