@automattic/vip-design-system 0.12.0 → 0.13.0

package/build/system/NewDialog/DialogTitle.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.DialogTitle = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var DialogPrimitive = _interopRequireWildcard(require("@radix-ui/react-dialog"));
+
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText/ScreenReaderText"));
+
+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 DialogTitle = function DialogTitle(_ref) {
+  var title = _ref.title,
+      _ref$hidden = _ref.hidden,
+      hidden = _ref$hidden === void 0 ? false : _ref$hidden;
+  var titleNode = title;
+
+  if (hidden) {
+    titleNode = (0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
+      children: titleNode
+    });
+  }
+
+  return (0, _jsxRuntime.jsx)(DialogPrimitive.Title, {
+    children: titleNode
+  });
+};
+
+exports.DialogTitle = DialogTitle;
+DialogTitle.propTypes = {
+  title: _propTypes["default"].string,
+  hidden: _propTypes["default"].bool
+};

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

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _reactDialog = require("@radix-ui/react-dialog");
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _DialogTitle = require("./DialogTitle");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+// If you render any Dialog child without the `<Dialog />` parent, it will throw an error.
+var Wrapper = function Wrapper(props) {
+  return (0, _jsxRuntime.jsx)(_reactDialog.Dialog, (0, _extends2["default"])({
+    open: true
+  }, props));
+};
+
+var defaultProps = {
+  title: 'This is a DialogTitle'
+};
+
+var getTitle = function getTitle() {
+  return _react.screen.getByRole('heading');
+};
+
+describe('<DialogTitle />', function () {
+  it('renders the DialogTitle component', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container;
+
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react.render)((0, _jsxRuntime.jsx)(Wrapper, {
+              children: (0, _jsxRuntime.jsx)(_DialogTitle.DialogTitle, (0, _extends2["default"])({}, defaultProps))
+            })), container = _render.container;
+            expect(getTitle()).toHaveTextContent(defaultProps.title); // Check for accessibility issues
+
+            _context.t0 = expect;
+            _context.next = 5;
+            return (0, _jestAxe.axe)(container);
+
+          case 5:
+            _context.t1 = _context.sent;
+            _context.next = 8;
+            return (0, _context.t0)(_context.t1).toHaveNoViolations();
+
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('renders text visually hidden for a11y purposes', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render2, container;
+
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(Wrapper, {
+              children: (0, _jsxRuntime.jsx)(_DialogTitle.DialogTitle, (0, _extends2["default"])({}, defaultProps, {
+                hidden: true
+              }))
+            })), container = _render2.container; // Small check to make sure we are hiding with the css class
+
+            expect(container.innerHTML).toContain('screen-reader-text');
+            expect(getTitle()).toHaveTextContent(defaultProps.title);
+
+          case 3:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+});

package/build/system/NewDialog/NewDialog.js

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.NewDialog = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var DialogPrimitive = _interopRequireWildcard(require("@radix-ui/react-dialog"));
+
+var _DialogOverlay = require("./DialogOverlay");
+
+var _DialogClose = require("./DialogClose");
+
+var _DialogTitle = require("./DialogTitle");
+
+var _DialogDescription = require("./DialogDescription");
+
+var _DialogContent = require("./DialogContent");
+
+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 NewDialog = function NewDialog(_ref) {
+  var _ref$trigger = _ref.trigger,
+      trigger = _ref$trigger === void 0 ? null : _ref$trigger,
+      description = _ref.description,
+      title = _ref.title,
+      _ref$content = _ref.content,
+      content = _ref$content === void 0 ? null : _ref$content,
+      _ref$showHeading = _ref.showHeading,
+      showHeading = _ref$showHeading === void 0 ? true : _ref$showHeading,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      extraStyles = _ref.style,
+      _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;
+
+  if (disabled) {
+    return;
+  }
+
+  return (0, _jsxRuntime.jsxs)(DialogPrimitive.Root, {
+    defaultOpen: defaultOpen,
+    allowPinchZoom: allowPinchZoom,
+    children: [trigger && (0, _jsxRuntime.jsx)(DialogPrimitive.Trigger, {
+      asChild: true,
+      children: trigger
+    }), (0, _jsxRuntime.jsxs)(DialogPrimitive.Portal, {
+      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, {
+          title: title,
+          hidden: !showHeading
+        }), (0, _jsxRuntime.jsx)(_DialogDescription.DialogDescription, {
+          description: description,
+          hidden: !showHeading
+        }), content]
+      })]
+    })]
+  });
+};
+
+exports.NewDialog = NewDialog;
+NewDialog.propTypes = {
+  trigger: _propTypes["default"].node.isRequired,
+  title: _propTypes["default"].string.isRequired,
+  description: _propTypes["default"].string.isRequired,
+  content: _propTypes["default"].node,
+  showHeading: _propTypes["default"].bool,
+  disabled: _propTypes["default"].bool,
+  style: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].func]),
+  // 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
+};

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

@@ -0,0 +1,159 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = exports.HiddenHeadings = exports.Default = exports.CustomStyling = exports.AutoOpen = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _system = require("../../system");
+
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText/ScreenReaderText"));
+
+var _NewDialog = require("./NewDialog");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/** @jsxImportSource theme-ui */
+
+/**
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'NewDialog',
+  component: _NewDialog.NewDialog
+};
+exports["default"] = _default;
+var defaultProps = {
+  title: 'User settings',
+  description: 'Use this form to manage your settings'
+};
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)(_system.Text, {
+      sx: {
+        fontSize: 3,
+        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, {
+      trigger: (0, _jsxRuntime.jsx)(_system.Button, {
+        children: "Trigger Dialog"
+      })
+    }))]
+  });
+};
+
+exports.Default = Default;
+
+var AutoOpen = function AutoOpen() {
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)(_system.Text, {
+      sx: {
+        fontSize: 3,
+        mb: 3
+      },
+      children: "Auto Opens when rendered. Press escape to close it."
+    }), (0, _jsxRuntime.jsx)(_NewDialog.NewDialog, (0, _extends2["default"])({}, defaultProps, {
+      defaultOpen: true,
+      trigger: (0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
+        children: "hey"
+      })
+    }))]
+  });
+};
+
+exports.AutoOpen = AutoOpen;
+
+var HiddenHeadings = function HiddenHeadings() {
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)(_system.Text, {
+      sx: {
+        fontSize: 3,
+        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, {
+      trigger: (0, _jsxRuntime.jsx)(_system.Button, {
+        children: "Trigger Dialog"
+      }),
+      title: "Custom dialog title",
+      showHeading: false,
+      content: (0, _jsxRuntime.jsxs)("div", {
+        children: [(0, _jsxRuntime.jsx)("h3", {
+          children: "My Custom Content"
+        }), (0, _jsxRuntime.jsxs)("form", {
+          children: [(0, _jsxRuntime.jsx)(_system.Label, {
+            htmlFor: "username",
+            children: "User name"
+          }), (0, _jsxRuntime.jsx)(_system.Input, {
+            type: "text",
+            name: "username",
+            id: "username"
+          }), (0, _jsxRuntime.jsx)(_system.Button, {
+            type: "submit",
+            children: "Submit"
+          })]
+        })]
+      })
+    }))]
+  });
+};
+
+exports.HiddenHeadings = HiddenHeadings;
+
+var CustomStyling = function CustomStyling() {
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)(_system.Text, {
+      sx: {
+        fontSize: 3,
+        mb: 3
+      },
+      children: "Custom Styling on Dialog Content"
+    }), (0, _jsxRuntime.jsx)(_NewDialog.NewDialog, (0, _extends2["default"])({}, defaultProps, {
+      defaultOpen: true,
+      trigger: (0, _jsxRuntime.jsx)(_system.Button, {
+        children: "Trigger Dialog"
+      }),
+      title: "Custom dialog title",
+      style: {
+        background: function background(theme) {
+          return "" + theme.colors.primary;
+        },
+        padding: 5,
+        borderRadius: 20,
+        h2: {
+          fontSize: 4,
+          color: function color(theme) {
+            return "" + theme.colors.text;
+          }
+        },
+        h3: {
+          fontSize: 3,
+          color: function color(theme) {
+            return "" + theme.colors.heading;
+          }
+        },
+        p: {
+          color: 'white'
+        },
+        'button[type="button"]:focus': {
+          outlineColor: 'white',
+          color: 'white'
+        }
+      },
+      content: (0, _jsxRuntime.jsxs)("div", {
+        children: [(0, _jsxRuntime.jsx)("h3", {
+          children: "This is Read because it is Custom"
+        }), (0, _jsxRuntime.jsx)("p", {
+          children: "This Dialog is styled using the `sx` property."
+        })]
+      })
+    }))]
+  });
+};
+
+exports.CustomStyling = CustomStyling;

package/build/system/NewDialog/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+exports.__esModule = true;
+
+var _NewDialog = require("./NewDialog");
+
+exports.NewDialog = _NewDialog.NewDialog;

package/build/system/Notice/Notice.js

@@ -42,10 +42,10 @@ var NoticeIcon = function NoticeIcon(_ref) {
 
   return (0, _jsxRuntime.jsx)(Icon, {
     sx: {
-      marginRight: 2,
       color: color,
       flex: '0 0 auto'
-    }
+    },
+    size: 21
   });
 };
 
@@ -106,12 +106,12 @@ var Notice = function Notice(_ref2) {
           alignItems: 'center'
         },
         children: (0, _jsxRuntime.jsx)(NoticeIcon, {
-          color: color + ".100",
+          color: color + ".200",
           variant: variant
         })
       }), (0, _jsxRuntime.jsxs)(_.Box, {
         sx: {
-          ml: 23
+          ml: 3
         },
         children: [title && (0, _jsxRuntime.jsx)(_.Heading, {
           variant: "h4",

package/build/system/index.js

@@ -42,6 +42,10 @@ exports.DialogMenuItem = _Dialog.DialogMenuItem;
 exports.DialogTrigger = _Dialog.DialogTrigger;
 exports.DialogContent = _Dialog.DialogContent;
 
+var _NewDialog = require("./NewDialog");
+
+exports.NewDialog = _NewDialog.NewDialog;
+
 var _ConfirmationDialog = require("./ConfirmationDialog");
 
 exports.ConfirmationDialog = _ConfirmationDialog.ConfirmationDialog;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.12.0",
+	"version": "0.13.0",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",
@@ -17,10 +17,12 @@
 		"watch": "npm run build -- --watch"
 	},
 	"dependencies": {
-		"@radix-ui/react-checkbox": "^0.1.0",
-		"@radix-ui/react-radio-group": "^0.1.0",
+		"@radix-ui/react-checkbox": "^0.1.5",
+		"@radix-ui/react-dialog": "^0.1.7",
+		"@radix-ui/react-radio-group": "^0.1.5",
 		"@radix-ui/react-switch": "^0.1.5",
-		"@radix-ui/react-tooltip": "^0.1.0",
+		"@radix-ui/react-tooltip": "^0.1.7",
+		"@radix-ui/react-visually-hidden": "^0.1.4",
 		"babel-loader": "^8.2.2",
 		"classnames": "^2.3.1",
 		"framer-motion": "^3.9.1",

package/src/system/Form/Toggle.js

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 /** @jsxImportSource theme-ui */
 
 /**
@@ -11,18 +12,34 @@ import * as Switch from '@radix-ui/react-switch';
 // Documentation for Radix Switch component
 // https://www.radix-ui.com/docs/primitives/components/switch
 
-export const Toggle = ( { name = 'toggle', onChange, className = null, ...rest } ) => (
+export const Toggle = ( {
+	name = 'toggle',
+	onChange,
+	className = null,
+	variant = 'primary',
+	...rest
+} ) => (
 	<Switch.Root
 		className={ classNames( 'vip-toggle-component', className ) }
 		sx={ {
 			all: 'unset',
-			width: 42,
-			height: 24,
-			backgroundColor: 'muted',
-			borderRadius: '15px',
 			position: 'relative',
+			width: 40,
+			height: 20,
+			borderRadius: '32px',
+			backgroundColor: 'muted',
+			backgroundRepeat: 'no-repeat',
+			backgroundPosition: 'right 2px top 2px',
+			backgroundImage: `url(
+				'data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.53846 3L3 4.53846L6.46156 8.00001L3.00003 11.4615L4.53848 13L8.00001 9.53847L11.4615 13L13 11.4615L9.53847 8.00001L13 4.53849L11.4615 3.00003L8.00001 6.46156L4.53846 3Z" fill="white"/></svg>')`,
 			WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
-			'&[data-state="checked"]': { backgroundColor: 'success' },
+
+			'&[data-state="checked"]': {
+				backgroundColor: variant,
+				backgroundPosition: 'left 2px top 2px',
+				backgroundImage: `url(
+					'data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.4999 4.9995L5.7254 12.4008L2.5 9.33023L3.83307 7.92994L5.7254 9.73144L12.1668 3.59921L13.4999 4.9995Z" fill="white"/></svg>')`,
+			},
 		} }
 		name={ name }
 		onCheckedChange={ onChange || undefined }
@@ -31,15 +48,15 @@ export const Toggle = ( { name = 'toggle', onChange, className = null, ...rest }
 		<Switch.Thumb
 			sx={ {
 				display: 'block',
-				width: 18,
-				height: 18,
+				width: 16,
+				height: 16,
 				backgroundColor: 'white',
 				borderRadius: '50%',
 				boxShadow: 'rgb(0 0 0 / 5%) 0px 1px 5px, rgb(0 0 0 / 15%) 0px 1px 1px',
 				transition: 'transform 100ms',
-				transform: 'translateX(3px)',
+				transform: 'translateX(2px)',
 				willChange: 'transform',
-				'&[data-state="checked"]': { transform: 'translateX(21px)' },
+				'&[data-state="checked"]': { transform: 'translateX(22px)' },
 			} }
 		/>
 	</Switch.Root>
@@ -49,4 +66,5 @@ Toggle.propTypes = {
 	name: PropTypes.string,
 	className: PropTypes.any,
 	onChange: PropTypes.func,
+	variant: PropTypes.string,
 };

package/src/system/Form/Toggle.stories.jsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource theme-ui */
 /**
  * External dependencies
  */
@@ -21,7 +22,17 @@ export default {
 
 const Default = args => (
 	<form>
-		<Toggle defaultChecked checked={ args.checked } aria-label="Feature flag" />
+		<Toggle
+			checked={ args.checked }
+			defaultChecked
+			color={ args.color }
+			aria-label="Feature flag"
+		/>
+
+		<br />
+		<br />
+
+		<Toggle checked={ args.checked } defaultChecked={ false } aria-label="Feature flag 2" />
 	</form>
 );
 
@@ -38,5 +49,36 @@ const WithLabel = args => (
 	</form>
 );
 
+const CustomStyling = args => (
+	<form>
+		<Label htmlFor="custom-label-input">Custom Styling</Label>
+
+		<div>
+			<Toggle
+				id="custom-label-input"
+				defaultChecked
+				checked={ args.checked }
+				aria-label="Feature flag"
+				variant="success"
+			/>{ ' ' }
+			<Toggle
+				id="custom-label-input-error"
+				defaultChecked
+				checked={ args.checked }
+				aria-label="Error flag"
+				variant="error"
+			/>{ ' ' }
+			<Toggle
+				id="custom-label-input-warning"
+				defaultChecked
+				checked={ args.checked }
+				aria-label="Warning flag"
+				variant="warning"
+			/>
+		</div>
+	</form>
+);
+
 export const Primary = Default.bind( { checked: true } );
 export const ExternalLabel = WithLabel.bind( { checked: true } );
+export const CustomStyle = CustomStyling.bind( { checked: true } );

package/src/system/NewDialog/DialogClose.js

@@ -0,0 +1,45 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { IoClose } from 'react-icons/io5';
+
+/**
+ * Internal dependencies
+ */
+export const DialogClose = React.forwardRef( ( props, forwardedRef ) => (
+	<DialogPrimitive.Close asChild { ...props } ref={ forwardedRef }>
+		<button
+			aria-label="Close"
+			sx={ {
+				all: 'unset',
+				fontFamily: 'inherit',
+				borderRadius: '100%',
+				height: 25,
+				width: 25,
+				display: 'inline-flex',
+				alignItems: 'center',
+				justifyContent: 'center',
+				color: theme => `${ theme?.colors?.text }`,
+				position: 'absolute',
+				top: 10,
+				right: 10,
+
+				'&:hover': {
+					backgroundColor: 'border',
+					outlineStyle: 'solid',
+					outlineColor: 'primary',
+					outlineWidth: '2px',
+				},
+				'&:focus': { outlineStyle: 'solid', outlineColor: 'primary', outlineWidth: '2px' },
+			} }
+		>
+			<IoClose aria-hidden="true" />
+		</button>
+	</DialogPrimitive.Close>
+) );
+
+DialogClose.displayName = 'DialogClose';