@automattic/vip-design-system 0.17.1 → 0.18.0

package/.storybook/main.js

@@ -6,5 +6,6 @@ module.exports = {
 		'@storybook/addon-essentials',
 		'@storybook/addon-links',
 		'@storybook/addon-controls',
+		'@storybook/addon-storysource',
 	],
 };

package/build/system/NewDialog/NewDialog.js

@@ -7,6 +7,8 @@ exports.NewDialog = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var DialogPrimitive = _interopRequireWildcard(require("@radix-ui/react-dialog"));
@@ -59,14 +61,33 @@ var NewDialog = function NewDialog(_ref) {
       _ref$id = _ref.id,
       id = _ref$id === void 0 ? undefined : _ref$id;
 
+  var _React$useState = _react["default"].useState(open || defaultOpen),
+      isOpen = _React$useState[0],
+      setIsOpen = _React$useState[1];
+
   if (disabled) {
     return;
-  }
+  } // if content is a function, pass in onClose
+
+
+  var isContentFunction = typeof content === 'function';
+
+  var handleOnOpenChange = function handleOnOpenChange(status) {
+    setIsOpen(status);
+
+    if (onOpenChange) {
+      onOpenChange(status);
+    }
+  };
+
+  _react["default"].useEffect(function () {
+    handleOnOpenChange(open);
+  }, [open]);
 
   return (0, _jsxRuntime.jsxs)(DialogPrimitive.Root, {
     id: id,
-    open: open,
-    onOpenChange: onOpenChange,
+    open: isOpen,
+    onOpenChange: handleOnOpenChange,
     defaultOpen: defaultOpen,
     allowPinchZoom: allowPinchZoom,
     children: [trigger && (0, _jsxRuntime.jsx)(DialogPrimitive.Trigger, {
@@ -84,7 +105,11 @@ var NewDialog = function NewDialog(_ref) {
           hidden: !showHeading
         }), (0, _jsxRuntime.jsx)("div", {
           role: "document",
-          children: content
+          children: isContentFunction ? content({
+            onClose: function onClose() {
+              return setIsOpen(false);
+            }
+          }) : content
         })]
       })]
     })]
@@ -96,7 +121,7 @@ NewDialog.propTypes = {
   trigger: _propTypes["default"].node.isRequired,
   title: _propTypes["default"].node.isRequired,
   description: _propTypes["default"].node.isRequired,
-  content: _propTypes["default"].node,
+  content: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
   showHeading: _propTypes["default"].bool,
   disabled: _propTypes["default"].bool,
   style: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].func]),

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

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.HiddenHeadings = exports.Default = exports.CustomStyling = exports.CustomStateManagement = exports.CustomClose = exports.AutoOpen = void 0;
+exports["default"] = exports.HiddenHeadings = exports.Default = exports.CustomStyling = exports.CustomStateManagement = exports.CustomOnClose = exports.CustomClose = exports.AutoOpen = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -222,20 +222,56 @@ var CustomStateManagement = function CustomStateManagement() {
       }), " attribute."]
     }), (0, _jsxRuntime.jsx)(NewDialog.Root, (0, _extends2["default"])({}, defaultProps, {
       open: open,
-      onOpenChange: setOpen,
+      onOpenChange: function onOpenChange(status) {
+        // eslint-disable-next-line no-console
+        console.log('New status changed', status);
+        setOpen(!!open);
+      },
       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"
+        sx: {
+          mt: 2
+        },
+        children: (0, _jsxRuntime.jsx)(NewDialog.Close, {
+          children: (0, _jsxRuntime.jsx)(_system.Button, {
+            children: "Close here instead"
+          })
         })
       })
     }))]
   });
 };
 
-exports.CustomStateManagement = CustomStateManagement;
+exports.CustomStateManagement = CustomStateManagement;
+
+var CustomOnClose = function CustomOnClose() {
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)(_system.Text, {
+      sx: {
+        fontSize: 3,
+        mb: 3
+      },
+      children: "This example shows how you can use the content as a function to use the onClose method (same behavior as the original Dialog component)."
+    }), (0, _jsxRuntime.jsx)(NewDialog.Root, (0, _extends2["default"])({}, defaultProps, {
+      trigger: (0, _jsxRuntime.jsx)(_system.Button, {
+        children: "Trigger Dialog"
+      }),
+      content: function content(_ref) {
+        var onClose = _ref.onClose;
+        return (0, _jsxRuntime.jsx)("div", {
+          sx: {
+            mt: 2
+          },
+          children: (0, _jsxRuntime.jsx)(_system.Button, {
+            onClick: onClose,
+            children: "Close here instead"
+          })
+        });
+      }
+    }))]
+  });
+};
+
+exports.CustomOnClose = CustomOnClose;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.17.1",
+	"version": "0.18.0",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",
@@ -25,6 +25,7 @@
 		"@radix-ui/react-switch": "^0.1.5",
 		"@radix-ui/react-tooltip": "^0.1.7",
 		"@radix-ui/react-visually-hidden": "^0.1.4",
+		"@storybook/addon-storysource": "^6.5.10",
 		"babel-loader": "^8.2.2",
 		"classnames": "^2.3.1",
 		"framer-motion": "^3.9.1",

package/src/system/NewDialog/NewDialog.js

@@ -3,6 +3,7 @@
 /**
  * External dependencies
  */
+import React from 'react';
 import PropTypes from 'prop-types';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 /**
@@ -30,15 +31,32 @@ export const NewDialog = ( {
 	open = undefined,
 	id = undefined,
 } ) => {
+	const [ isOpen, setIsOpen ] = React.useState( open || defaultOpen );
+
 	if ( disabled ) {
 		return;
 	}
 
+	// if content is a function, pass in onClose
+	const isContentFunction = typeof content === 'function';
+
+	const handleOnOpenChange = status => {
+		setIsOpen( status );
+
+		if ( onOpenChange ) {
+			onOpenChange( status );
+		}
+	};
+
+	React.useEffect( () => {
+		handleOnOpenChange( open );
+	}, [ open ] );
+
 	return (
 		<DialogPrimitive.Root
 			id={ id }
-			open={ open }
-			onOpenChange={ onOpenChange }
+			open={ isOpen }
+			onOpenChange={ handleOnOpenChange }
 			defaultOpen={ defaultOpen }
 			allowPinchZoom={ allowPinchZoom }
 		>
@@ -55,7 +73,9 @@ export const NewDialog = ( {
 					<DialogTitle title={ title } hidden={ ! showHeading } />
 					<DialogDescription description={ description } hidden={ ! showHeading } />
 
-					<div role="document">{ content }</div>
+					<div role="document">
+						{ isContentFunction ? content( { onClose: () => setIsOpen( false ) } ) : content }
+					</div>
 				</DialogPrimitive.Content>
 			</DialogPrimitive.Portal>
 		</DialogPrimitive.Root>
@@ -66,7 +86,7 @@ NewDialog.propTypes = {
 	trigger: PropTypes.node.isRequired,
 	title: PropTypes.node.isRequired,
 	description: PropTypes.node.isRequired,
-	content: PropTypes.node,
+	content: PropTypes.oneOfType( [ PropTypes.node, PropTypes.func ] ),
 	showHeading: PropTypes.bool,
 	disabled: PropTypes.bool,
 	style: PropTypes.oneOfType( [ PropTypes.object, PropTypes.func ] ),

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

@@ -89,6 +89,7 @@ export const HiddenHeadings = () => (
 		/>
 	</>
 );
+
 export const CustomStyling = () => (
 	<>
 		<Text sx={ { fontSize: 3, mb: 3 } }>Custom Styling on Dialog Content</Text>
@@ -136,6 +137,7 @@ export const CustomClose = () => (
 		/>
 	</>
 );
+
 export const CustomStateManagement = () => {
 	const [ open, setOpen ] = useState( false );
 	return (
@@ -149,14 +151,42 @@ export const CustomStateManagement = () => {
 			<NewDialog.Root
 				{ ...defaultProps }
 				open={ open }
-				onOpenChange={ setOpen }
+				onOpenChange={ status => {
+					// eslint-disable-next-line no-console
+					console.log( 'New status changed', status );
+
+					setOpen( !! open );
+				} }
 				trigger={ <Button>Trigger Dialog</Button> }
 				content={
-					<div>
-						<Button onClick={ () => setOpen( false ) }>Close here instead</Button>
+					<div sx={ { mt: 2 } }>
+						<NewDialog.Close>
+							<Button>Close here instead</Button>
+						</NewDialog.Close>
 					</div>
 				}
 			/>
 		</>
 	);
 };
+
+export const CustomOnClose = () => {
+	return (
+		<>
+			<Text sx={ { fontSize: 3, mb: 3 } }>
+				This example shows how you can use the content as a function to use the onClose method (same
+				behavior as the original Dialog component).
+			</Text>
+
+			<NewDialog.Root
+				{ ...defaultProps }
+				trigger={ <Button>Trigger Dialog</Button> }
+				content={ ( { onClose } ) => (
+					<div sx={ { mt: 2 } }>
+						<Button onClick={ onClose }>Close here instead</Button>
+					</div>
+				) }
+			/>
+		</>
+	);
+};