@automattic/vip-design-system 0.11.1 → 0.14.0

package/.storybook/decorators/withBoundingBox.jsx

@@ -1,15 +1,22 @@
 import React from 'react';
 import { makeDecorator } from '@storybook/addons';
-import { Box } from "../../src/system";
+import { Box, Heading } from '../../src/system';
 
 export default makeDecorator( {
 	name: 'withBoundingBox',
 	parameterName: 'colorMode2',
 	wrapper: ( storyFn, context ) => {
 		return (
-			<Box sx={{ p: 4, height: "100vh" }}>
-				{storyFn()}
+			<Box sx={ { p: 3, height: '100vh' } }>
+				<Box sx={ { backgroundColor: 'backgroundMuted', p: 3, borderRadius: 2 } }>
+					<Heading variant="h1" sx={ { mb: 1 } }>
+						{ context.title }
+					</Heading>
+					<Heading variant="h2">{ context.name }</Heading>
+				</Box>
+
+				<Box sx={ { py: 3 } }>{ storyFn() }</Box>
 			</Box>
 		);
-	}
+	},
 } );

package/.storybook/decorators/withColorMode.jsx

@@ -4,7 +4,7 @@ import { useColorMode } from 'theme-ui';
 
 // These need to be updated to import VIP design tokens;
 const lightBackground = '#ffffff';
-const darkBackground = '#333333';
+const darkBackground = '#1C1C1B';
 
 export const backgrounds = {
 	default: 'Light',
@@ -21,7 +21,7 @@ export const backgrounds = {
 };
 
 function ThemeChanger( { background } ) {
-	const [colorMode, setColorMode] = useColorMode();
+	const [ colorMode, setColorMode ] = useColorMode();
 	const newColorMode = darkBackground === background ? 'dark' : 'default';
 
 	useEffect( () => {
@@ -29,7 +29,7 @@ function ThemeChanger( { background } ) {
 	}, [ newColorMode ] );
 
 	return null;
-};
+}
 
 export default makeDecorator( {
 	name: 'withColorMode',
@@ -37,9 +37,9 @@ export default makeDecorator( {
 	wrapper: ( storyFn, context ) => {
 		return (
 			<>
-				<ThemeChanger background={context.globals?.backgrounds?.value} />
-				{storyFn()}
+				<ThemeChanger background={ context.globals?.backgrounds?.value } />
+				{ storyFn() }
 			</>
 		);
-	}
+	},
 } );

package/.storybook/decorators/withThemeProvider.jsx

@@ -1,18 +1,16 @@
 import React from 'react';
 import { makeDecorator } from '@storybook/addons';
 import { ThemeProvider } from 'theme-ui';
-import { Box, theme } from "../../src/system";
+import { Box, theme } from '../../src/system';
 
 export default makeDecorator( {
 	name: 'withThemeProvider',
 	parameterName: 'themeUi',
 	wrapper: ( storyFn, context ) => {
 		return (
-			<ThemeProvider theme={theme}>
-				<Box sx={{ p: 4, height: "100vh" }}>
-					{storyFn( context )}
-				</Box>
+			<ThemeProvider theme={ theme }>
+				<Box sx={ { height: '100vh' } }>{ storyFn( context ) }</Box>
 			</ThemeProvider>
 		);
-	}
+	},
 } );

package/.storybook/main.js

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

package/.storybook/preview.js

@@ -11,5 +11,6 @@ export const decorators = [ withBoundingBox, withColorMode, withThemeProvider ];
 
 export const parameters = {
 	actions: { argTypesRegex: '^on[A-Z].*' },
+	controls: { expanded: true },
 	backgrounds,
 };

package/build/system/Button/Button.js

@@ -30,8 +30,14 @@ var Button = function Button(_ref) {
       justifyContent: 'center',
       height: '36px',
       py: 0,
+      '&:focus': function focus(theme) {
+        return theme.outline;
+      },
+      '&:focus-visible': function focusVisible(theme) {
+        return theme.outline;
+      },
       '&:disabled': {
-        opacity: 0.5,
+        opacity: 0.7,
         cursor: 'not-allowed',
         pointerEvents: 'all'
       }

package/build/system/Form/Toggle.js

@@ -13,91 +13,81 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var Switch = _interopRequireWildcard(require("@radix-ui/react-switch"));
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["name", "className"];
+var _excluded = ["name", "onChange", "className", "variant"];
+
+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; }
 
+// Documentation for Radix Switch component
+// https://www.radix-ui.com/docs/primitives/components/switch
 var Toggle = function Toggle(_ref) {
   var _ref$name = _ref.name,
       name = _ref$name === void 0 ? 'toggle' : _ref$name,
+      onChange = _ref.onChange,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? null : _ref$className,
-      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
-  return (0, _jsxRuntime.jsxs)(CheckBoxWrapper, {
-    className: (0, _classnames["default"])('vip-checkbox-component', className),
-    children: [(0, _jsxRuntime.jsx)(CheckBox, (0, _extends2["default"])({
-      name: name,
-      id: name,
-      type: "checkbox"
-    }, props)), (0, _jsxRuntime.jsx)(CheckBoxLabel, {
-      htmlFor: name
-    })]
-  });
-};
-
-exports.Toggle = Toggle;
-Toggle.propTypes = {
-  name: _propTypes["default"].string,
-  className: _propTypes["default"].any
-};
-
-var CheckBoxWrapper = function CheckBoxWrapper(props) {
-  return (0, _jsxRuntime.jsx)("div", (0, _extends2["default"])({
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
+      rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(Switch.Root, (0, _extends2["default"])({
+    className: (0, _classnames["default"])('vip-toggle-component', className),
     sx: {
-      position: 'relative'
-    }
-  }, props));
-};
-
-var CheckBoxLabel = function CheckBoxLabel(props) {
-  return (0, _jsxRuntime.jsx)("label", (0, _extends2["default"])({
-    sx: {
-      position: 'absolute',
-      top: '0',
-      left: '0',
-      width: '42px',
-      height: '24px',
-      borderRadius: '15px',
+      all: 'unset',
+      position: 'relative',
+      width: 40,
+      height: 20,
+      borderRadius: '32px',
       backgroundColor: 'muted',
-      cursor: 'pointer',
-      '&::after': {
-        content: "''",
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: 'right 2px top 2px',
+      backgroundImage: "url(\n\t\t\t\t'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)',
+      '&:focus': function focus(theme) {
+        return theme.outline;
+      },
+      '&:focus-visible': function focusVisible(theme) {
+        return theme.outline;
+      },
+      '&[disabled]': {
+        opacity: 0.7
+      },
+      '&[data-state="checked"]': {
+        backgroundColor: variant,
+        backgroundPosition: 'left 2px top 2px',
+        backgroundImage: "url(\n\t\t\t\t\t'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
+  }, rest, {
+    children: (0, _jsxRuntime.jsx)(Switch.Thumb, {
+      sx: {
         display: 'block',
+        width: 16,
+        height: 16,
+        backgroundColor: 'white',
         borderRadius: '50%',
-        width: '18px',
-        height: '18px',
-        margin: '3px',
-        backgroundColor: 'card',
-        boxShadow: 'low',
-        transition: '0.2s'
+        boxShadow: 'rgb(0 0 0 / 5%) 0px 1px 5px, rgb(0 0 0 / 15%) 0px 1px 1px',
+        transition: 'transform 100ms',
+        transform: 'translateX(2px)',
+        willChange: 'transform',
+        '&[data-state="checked"]': {
+          transform: 'translateX(22px)'
+        }
       }
-    }
-  }, props));
+    })
+  }));
 };
 
-var CheckBox = function CheckBox(props) {
-  return (0, _jsxRuntime.jsx)("input", (0, _extends2["default"])({
-    sx: {
-      opacity: '0',
-      zIndex: '1',
-      borderRadius: '15px',
-      width: '42px',
-      height: '24px',
-      padding: 0,
-      margin: 0,
-      display: 'block',
-      '&:checked + label': {
-        backgroundColor: 'success',
-        '&::after': {
-          content: "''",
-          display: 'block',
-          borderRadius: '50%',
-          width: '18px',
-          height: '18px',
-          marginLeft: '21px',
-          transition: '0.2s'
-        }
-      }
-    }
-  }, props));
+exports.Toggle = Toggle;
+Toggle.propTypes = {
+  name: _propTypes["default"].string,
+  className: _propTypes["default"].any,
+  onChange: _propTypes["default"].func,
+  variant: _propTypes["default"].string
 };

package/build/system/Form/Toggle.stories.js

@@ -0,0 +1,107 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Primary = exports.ExternalLabel = exports.CustomStyle = void 0;
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'Toggle',
+  component: _.Toggle,
+  argTypes: {
+    checked: {
+      options: [true, false],
+      "default": true,
+      control: {
+        type: 'radio'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var Default = function Default(args) {
+  return (0, _jsxRuntime.jsxs)("form", {
+    children: [(0, _jsxRuntime.jsx)(_.Toggle, {
+      checked: args.checked,
+      defaultChecked: true,
+      color: args.color,
+      "aria-label": "Feature flag"
+    }), (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)(_.Toggle, {
+      checked: args.checked,
+      defaultChecked: false,
+      "aria-label": "Feature flag 2"
+    }), (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)(_.Toggle, {
+      "aria-label": "Feature Disabled",
+      disabled: true,
+      defaultChecked: false
+    })]
+  });
+};
+
+var WithLabel = function WithLabel(args) {
+  return (0, _jsxRuntime.jsxs)("form", {
+    children: [(0, _jsxRuntime.jsx)(_.Label, {
+      htmlFor: "custom-label-input",
+      children: "Custom Label here"
+    }), (0, _jsxRuntime.jsx)(_.Toggle, {
+      id: "custom-label-input",
+      defaultChecked: true,
+      checked: args.checked,
+      "aria-label": "Feature flag"
+    })]
+  });
+};
+
+var CustomStyling = function CustomStyling(args) {
+  return (0, _jsxRuntime.jsxs)("form", {
+    children: [(0, _jsxRuntime.jsx)(_.Label, {
+      htmlFor: "custom-label-input",
+      children: "Custom Styling"
+    }), (0, _jsxRuntime.jsxs)("div", {
+      children: [(0, _jsxRuntime.jsx)(_.Toggle, {
+        id: "custom-label-input",
+        defaultChecked: true,
+        checked: args.checked,
+        "aria-label": "Feature flag",
+        variant: "success"
+      }), ' ', (0, _jsxRuntime.jsx)(_.Toggle, {
+        id: "custom-label-input-error",
+        defaultChecked: true,
+        checked: args.checked,
+        "aria-label": "Error flag",
+        variant: "error"
+      }), ' ', (0, _jsxRuntime.jsx)(_.Toggle, {
+        id: "custom-label-input-warning",
+        defaultChecked: true,
+        checked: args.checked,
+        "aria-label": "Warning flag",
+        variant: "warning"
+      })]
+    })]
+  });
+};
+
+var Primary = Default.bind({
+  checked: true
+});
+exports.Primary = Primary;
+var ExternalLabel = WithLabel.bind({
+  checked: true
+});
+exports.ExternalLabel = ExternalLabel;
+var CustomStyle = CustomStyling.bind({
+  checked: true
+});
+exports.CustomStyle = CustomStyle;

package/build/system/Form/Toggle.test.js

@@ -0,0 +1,55 @@
+"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 _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _Toggle = require("./Toggle");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+describe('<Toggle />', function () {
+  it('renders the Toggle 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)(_Toggle.Toggle, {
+              "aria-label": "Dinner room Light",
+              defaultChecked: true,
+              name: "my-toggle"
+            })), container = _render.container;
+            expect(_react.screen.getByRole('switch')).toBeInTheDocument(); // 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);
+  })));
+});

package/build/system/Link/Link.js

@@ -33,6 +33,12 @@ var Link = function Link(_ref) {
       },
       '&:hover, &:focus': {
         color: 'heading'
+      },
+      '&:focus': function focus(theme) {
+        return theme.outline;
+      },
+      '&:focus-visible': function focusVisible(theme) {
+        return theme.outline;
       }
     }, sx)
   }));

package/build/system/NewDialog/DialogClose.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.DialogClose = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var DialogPrimitive = _interopRequireWildcard(require("@radix-ui/react-dialog"));
+
+var _io = require("react-icons/io5");
+
+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 DialogClose = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardedRef) {
+  return (0, _jsxRuntime.jsx)(DialogPrimitive.Close, (0, _extends2["default"])({
+    asChild: true
+  }, props, {
+    ref: forwardedRef,
+    children: (0, _jsxRuntime.jsx)("button", {
+      "aria-label": "Close",
+      sx: {
+        all: 'unset',
+        fontFamily: 'inherit',
+        borderRadius: '100%',
+        height: 25,
+        width: 25,
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: function color(theme) {
+          var _theme$colors;
+
+          return "" + (theme == null ? void 0 : (_theme$colors = theme.colors) == null ? void 0 : _theme$colors.text);
+        },
+        position: 'absolute',
+        top: 10,
+        right: 10,
+        '&:hover': {
+          backgroundColor: 'border',
+          outlineStyle: 'solid',
+          outlineColor: 'primary',
+          outlineWidth: '2px'
+        },
+        '&:focus': function focus(theme) {
+          return theme.outline;
+        },
+        '&:focus-visible': function focusVisible(theme) {
+          return theme.outline;
+        }
+      },
+      children: (0, _jsxRuntime.jsx)(_io.IoClose, {
+        "aria-hidden": "true"
+      })
+    })
+  }));
+});
+
+exports.DialogClose = DialogClose;
+DialogClose.displayName = 'DialogClose';

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

@@ -0,0 +1,67 @@
+"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 _DialogClose = require("./DialogClose");
+
+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 DialogClose'
+};
+describe('<DialogClose />', function () {
+  it('renders the DialogClose 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)(_DialogClose.DialogClose, (0, _extends2["default"])({}, defaultProps))
+            })), container = _render.container;
+            expect(_react.screen.getByLabelText('Close')).toBeInTheDocument(); // 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);
+  })));
+});

package/build/system/NewDialog/DialogContent.js

@@ -0,0 +1,26 @@
+"use strict";
+
+exports.__esModule = true;
+exports.contentStyles = void 0;
+
+/** @jsxImportSource theme-ui */
+var contentStyles = {
+  background: 'white',
+  borderRadius: 10,
+  boxShadow: 'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
+  position: 'fixed',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: '90vw',
+  maxWidth: '640px',
+  maxHeight: '85vh',
+  padding: 25,
+  '&:focus': {
+    outline: 'none'
+  },
+  '> h1, > h2': {
+    marginTop: '0 !important'
+  }
+};
+exports.contentStyles = contentStyles;