@automattic/vip-design-system 1.2.0 → 1.2.2

package/build/system/ConfirmationDialog/ConfirmationDialog.stories.jsx

@@ -0,0 +1,29 @@
+/**
+ * Internal dependencies
+ */
+import { Box, ConfirmationDialog, Button, Heading, Text, Flex } from '..';
+
+export default {
+	title: 'Deprecated/ConfirmationDialog',
+	component: ConfirmationDialog,
+};
+
+const ConfirmationTrigger = <Button sx={ { mr: 3 } }>Dangerous Action</Button>;
+
+const ConfirmationContent = (
+	<Box p={ 5 }>
+		<Heading>This is a Modal</Heading>
+		<Text sx={ { fontSize: 3 } }>
+			A modal is used to perform more detailed actions that don&lsquo;t necessarily need the context
+			behind.
+		</Text>
+	</Box>
+);
+
+export const Default = () => (
+	<Flex>
+		<Box>
+			<ConfirmationDialog trigger={ ConfirmationTrigger } content={ ConfirmationContent } />
+		</Box>
+	</Flex>
+);

package/build/system/ConfirmationDialog/index.d.ts

@@ -0,0 +1,3 @@
+import { ConfirmationDialog } from './ConfirmationDialog';
+import { ConfirmationDialogContent } from './ConfirmationDialog';
+export { ConfirmationDialog, ConfirmationDialogContent };

package/build/system/ConfirmationDialog/index.js

@@ -1,6 +1,6 @@
-"use strict";
+/**
+ * Internal dependencies
+ */
+import { ConfirmationDialog, ConfirmationDialogContent } from './ConfirmationDialog';
 
-exports.__esModule = true;
-var _ConfirmationDialog = require("./ConfirmationDialog");
-exports.ConfirmationDialog = _ConfirmationDialog.ConfirmationDialog;
-exports.ConfirmationDialogContent = _ConfirmationDialog.ConfirmationDialogContent;
+export { ConfirmationDialog, ConfirmationDialogContent };

package/build/system/Dialog/Dialog.d.ts

@@ -0,0 +1,18 @@
+export function Dialog({ trigger, position, startOpen, content, disabled, ...props }: {
+    [x: string]: any;
+    trigger: any;
+    position?: string | undefined;
+    startOpen?: boolean | undefined;
+    content: any;
+    disabled?: boolean | undefined;
+}): import("react").JSX.Element;
+export namespace Dialog {
+    namespace propTypes {
+        let trigger: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        let disabled: PropTypes.Requireable<boolean>;
+        let position: PropTypes.Requireable<string>;
+        let startOpen: PropTypes.Requireable<boolean>;
+        let content: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
+    }
+}
+import PropTypes from 'prop-types';

package/build/system/Dialog/Dialog.js

@@ -1,104 +1,91 @@
-"use strict";
-
-exports.__esModule = true;
-exports.Dialog = void 0;
-var _framerMotion = require("framer-motion");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = require("react");
-var _ = require(".");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["trigger", "position", "startOpen", "content", "disabled"];
 /** @jsxImportSource theme-ui */
+
 /**
  * External dependencies
  */
+import { AnimatePresence } from 'framer-motion';
+import PropTypes from 'prop-types';
+import { useEffect, useRef, useState } from 'react';
+
 /**
  * Internal dependencies
  */
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-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 Dialog = function Dialog(_ref) {
-  var trigger = _ref.trigger,
-    _ref$position = _ref.position,
-    position = _ref$position === void 0 ? 'left' : _ref$position,
-    _ref$startOpen = _ref.startOpen,
-    startOpen = _ref$startOpen === void 0 ? false : _ref$startOpen,
-    content = _ref.content,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _useState = (0, _react.useState)(startOpen),
-    isOpen = _useState[0],
-    setIsOpen = _useState[1];
-  var dialogRef = (0, _react.useRef)(null);
-  var closeDialog = function closeDialog(e) {
-    if (!dialogRef.current.contains(e.target)) {
-      setIsOpen(false);
-    }
-  };
-  (0, _react.useEffect)(function () {
-    window.document.addEventListener('click', closeDialog, true);
-    return function () {
-      return window.document.removeEventListener('click', closeDialog, true);
-    };
-  }, []);
+import { DialogContent, DialogTrigger } from '.';
+
+const Dialog = ( {
+	trigger,
+	position = 'left',
+	startOpen = false,
+	content,
+	disabled = false,
+	...props
+} ) => {
+	const [ isOpen, setIsOpen ] = useState( startOpen );
+	const dialogRef = useRef( null );
+
+	const closeDialog = e => {
+		if ( ! dialogRef.current.contains( e.target ) ) {
+			setIsOpen( false );
+		}
+	};
+
+	useEffect( () => {
+		window.document.addEventListener( 'click', closeDialog, true );
+
+		return () => window.document.removeEventListener( 'click', closeDialog, true );
+	}, [] );
+
+	// if content is a function, pass in onClose
+	const isFunction = typeof content === 'function';
 
-  // if content is a function, pass in onClose
-  var isFunction = typeof content === 'function';
-  var handleOpen = function handleOpen(event) {
-    var _event, _event2, _event3;
-    if (event === void 0) {
-      event = null;
-    }
-    var open = !isOpen;
-    if (disabled) {
-      return;
-    }
-    if ((_event = event) != null && _event.key && ((_event2 = event) == null ? void 0 : _event2.key) !== 13 && ((_event3 = event) == null ? void 0 : _event3.key) !== 'Enter') {
-      return;
-    }
-    setIsOpen(open);
-  };
-  return (0, _jsxRuntime.jsxs)("div", {
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    },
-    sx: {
-      position: 'relative'
-    },
-    ref: dialogRef,
-    className: "vip-dialog-component",
-    children: [(0, _jsxRuntime.jsx)(_.DialogTrigger, {
-      tabIndex: "0",
-      sx: {
-        display: 'inline'
-      },
-      onKeyPress: handleOpen,
-      onClick: handleOpen,
-      "aria-haspopup": "true",
-      "aria-expanded": isOpen,
-      children: trigger
-    }), (0, _jsxRuntime.jsx)(_framerMotion.AnimatePresence, {
-      children: isOpen && (0, _jsxRuntime.jsx)(_.DialogContent, _extends({}, props, {
-        position: position,
-        onClose: function onClose() {
-          return setIsOpen(false);
-        },
-        children: isFunction ? content({
-          onClose: function onClose() {
-            return setIsOpen(false);
-          }
-        }) : content
-      }))
-    })]
-  });
+	const handleOpen = ( event = null ) => {
+		const open = ! isOpen;
+
+		if ( disabled ) {
+			return;
+		}
+
+		if ( event?.key && event?.key !== 13 && event?.key !== 'Enter' ) {
+			return;
+		}
+
+		setIsOpen( open );
+	};
+
+	return (
+		<div
+			onClick={ e => e.stopPropagation() }
+			sx={ { position: 'relative' } }
+			ref={ dialogRef }
+			className="vip-dialog-component"
+		>
+			<DialogTrigger
+				tabIndex="0"
+				sx={ { display: 'inline' } }
+				onKeyPress={ handleOpen }
+				onClick={ handleOpen }
+				aria-haspopup="true"
+				aria-expanded={ isOpen }
+			>
+				{ trigger }
+			</DialogTrigger>
+			<AnimatePresence>
+				{ isOpen && (
+					<DialogContent { ...props } position={ position } onClose={ () => setIsOpen( false ) }>
+						{ isFunction ? content( { onClose: () => setIsOpen( false ) } ) : content }
+					</DialogContent>
+				) }
+			</AnimatePresence>
+		</div>
+	);
 };
-exports.Dialog = Dialog;
+
 Dialog.propTypes = {
-  trigger: _propTypes["default"].node,
-  disabled: _propTypes["default"].bool,
-  position: _propTypes["default"].string,
-  startOpen: _propTypes["default"].bool,
-  content: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func])
-};
+	trigger: PropTypes.node,
+	disabled: PropTypes.bool,
+	position: PropTypes.string,
+	startOpen: PropTypes.bool,
+	content: PropTypes.oneOfType( [ PropTypes.node, PropTypes.func ] ),
+};
+
+export { Dialog };

package/build/system/Dialog/Dialog.stories.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    export let title: string;
+    export { Dialog as component };
+}
+export default _default;
+export function Default(): import("react").JSX.Element;
+import { Dialog } from '..';

package/build/system/Dialog/Dialog.stories.jsx

@@ -0,0 +1,60 @@
+/**
+ * Internal dependencies
+ */
+import {
+	Box,
+	Dialog,
+	DialogMenu,
+	DialogMenuItem,
+	DialogDivider,
+	Button,
+	Heading,
+	Text,
+	Flex,
+} from '..';
+
+export default {
+	title: 'Deprecated/Dialog',
+	component: Dialog,
+};
+
+const DropdownTrigger = <Button>Trigger Dropdown</Button>;
+const ModalTrigger = <Button sx={ { mr: 3 } }>Trigger Modal</Button>;
+
+const DropdownContent = (
+	<div>
+		<DialogMenu>
+			<DialogMenuItem>Profile</DialogMenuItem>
+			<DialogMenuItem>Account</DialogMenuItem>
+			<DialogMenuItem>Dark Mode</DialogMenuItem>
+		</DialogMenu>
+		<DialogDivider />
+		<DialogMenu>
+			<DialogMenuItem>Logout</DialogMenuItem>
+		</DialogMenu>
+	</div>
+);
+
+const ModalContent = (
+	<Box p={ 5 }>
+		<Heading>This is a Modal</Heading>
+		<Text sx={ { fontSize: 3 } }>
+			A modal is used to perform more detailed actions that don&lsquo;t necessarily need the context
+			behind.
+		</Text>
+	</Box>
+);
+
+export const Default = () => (
+	<Flex>
+		<Box>
+			<Dialog
+				trigger={ ModalTrigger }
+				content={ ModalContent }
+				sx={ { width: 480 } }
+				variant="modal"
+			/>
+		</Box>
+		<Dialog trigger={ DropdownTrigger } content={ DropdownContent } sx={ { width: 200 } } />
+	</Flex>
+);

package/build/system/Dialog/DialogButton.d.ts

@@ -0,0 +1,16 @@
+export function DialogButton({ label, variant, value, children, ...props }: {
+    [x: string]: any;
+    label: any;
+    variant?: string | undefined;
+    value: any;
+    children: any;
+}): import("react").JSX.Element;
+export namespace DialogButton {
+    namespace propTypes {
+        let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        let label: PropTypes.Requireable<string>;
+        let value: PropTypes.Requireable<string>;
+        let variant: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from 'prop-types';

package/build/system/Dialog/DialogButton.js

@@ -1,74 +1,59 @@
-"use strict";
-
-exports.__esModule = true;
-exports.DialogButton = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _md = require("react-icons/md");
-var _ = require("../");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["label", "variant", "value", "children"];
 /** @jsxImportSource theme-ui */
+
 /**
  * External dependencies
  */
+import PropTypes from 'prop-types';
+import { MdExpandMore } from 'react-icons/md';
+
 /**
  * Internal dependencies
  */
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-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 DialogButton = function DialogButton(_ref) {
-  var label = _ref.label,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'secondary' : _ref$variant,
-    value = _ref.value,
-    children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return (0, _jsxRuntime.jsxs)(_.Button, _extends({
-    variant: variant,
-    sx: {
-      textAlign: 'left',
-      display: 'inline-flex',
-      py: 2,
-      pl: 3,
-      pr: 2,
-      alignItems: 'center'
-    }
-  }, props, {
-    children: [children, label && (0, _jsxRuntime.jsxs)(_.Text, {
-      as: "span",
-      sx: {
-        mb: 0,
-        color: 'heading',
-        mr: 2,
-        flex: '0 0 auto'
-      },
-      children: [label, ":"]
-    }), value && (0, _jsxRuntime.jsx)(_.Text, {
-      as: "span",
-      sx: {
-        mb: 0,
-        flex: '1 1 auto',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        color: 'input.text.default',
-        textOverflow: 'ellipsis'
-      },
-      children: value
-    }), (0, _jsxRuntime.jsx)(_md.MdExpandMore, {
-      sx: {
-        ml: 2,
-        top: 0,
-        display: 'block',
-        flex: '0 0 auto'
-      }
-    })]
-  }));
-};
-exports.DialogButton = DialogButton;
+import { Button, Text } from '../';
+
+const DialogButton = ( { label, variant = 'secondary', value, children, ...props } ) => (
+	<Button
+		variant={ variant }
+		sx={ {
+			textAlign: 'left',
+			display: 'inline-flex',
+			py: 2,
+			pl: 3,
+			pr: 2,
+			alignItems: 'center',
+		} }
+		{ ...props }
+	>
+		{ children }
+		{ label && (
+			<Text as="span" sx={ { mb: 0, color: 'heading', mr: 2, flex: '0 0 auto' } }>
+				{ label }:
+			</Text>
+		) }
+		{ value && (
+			<Text
+				as="span"
+				sx={ {
+					mb: 0,
+					flex: '1 1 auto',
+					whiteSpace: 'nowrap',
+					overflow: 'hidden',
+					color: 'input.text.default',
+					textOverflow: 'ellipsis',
+				} }
+			>
+				{ value }
+			</Text>
+		) }
+		<MdExpandMore sx={ { ml: 2, top: 0, display: 'block', flex: '0 0 auto' } } />
+	</Button>
+);
+
 DialogButton.propTypes = {
-  children: _propTypes["default"].node,
-  label: _propTypes["default"].string,
-  value: _propTypes["default"].string,
-  variant: _propTypes["default"].string
-};
+	children: PropTypes.node,
+	label: PropTypes.string,
+	value: PropTypes.string,
+	variant: PropTypes.string,
+};
+
+export { DialogButton };

package/build/system/Dialog/DialogContent.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+export function DialogContent({ position, variant, onClose, ...props }: {
+    [x: string]: any;
+    position?: string | undefined;
+    variant?: string | undefined;
+    onClose: any;
+}): React.JSX.Element;
+export namespace DialogContent {
+    namespace propTypes {
+        let position: PropTypes.Requireable<string>;
+        let variant: PropTypes.Requireable<string>;
+        let onClose: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';