@automattic/vip-design-system 0.11.1 → 0.12.0

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/Form/Toggle.js

@@ -13,91 +13,64 @@ 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"];
+
+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"])({
-    sx: {
-      position: 'relative'
-    }
-  }, props));
-};
-
-var CheckBoxLabel = function CheckBoxLabel(props) {
-  return (0, _jsxRuntime.jsx)("label", (0, _extends2["default"])({
+      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: 'absolute',
-      top: '0',
-      left: '0',
-      width: '42px',
-      height: '24px',
-      borderRadius: '15px',
+      all: 'unset',
+      width: 42,
+      height: 24,
       backgroundColor: 'muted',
-      cursor: 'pointer',
-      '&::after': {
-        content: "''",
+      borderRadius: '15px',
+      position: 'relative',
+      WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+      '&[data-state="checked"]': {
+        backgroundColor: 'success'
+      }
+    },
+    name: name,
+    onCheckedChange: onChange || undefined
+  }, rest, {
+    children: (0, _jsxRuntime.jsx)(Switch.Thumb, {
+      sx: {
         display: 'block',
+        width: 18,
+        height: 18,
+        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(3px)',
+        willChange: 'transform',
+        '&[data-state="checked"]': {
+          transform: 'translateX(21px)'
+        }
       }
-    }
-  }, 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
 };

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

@@ -0,0 +1,63 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Primary = exports.ExternalLabel = void 0;
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * 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.jsx)("form", {
+    children: (0, _jsxRuntime.jsx)(_.Toggle, {
+      defaultChecked: true,
+      checked: args.checked,
+      "aria-label": "Feature flag"
+    })
+  });
+};
+
+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 Primary = Default.bind({
+  checked: true
+});
+exports.Primary = Primary;
+var ExternalLabel = WithLabel.bind({
+  checked: true
+});
+exports.ExternalLabel = ExternalLabel;

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.11.1",
+	"version": "0.12.0",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",
@@ -19,6 +19,7 @@
 	"dependencies": {
 		"@radix-ui/react-checkbox": "^0.1.0",
 		"@radix-ui/react-radio-group": "^0.1.0",
+		"@radix-ui/react-switch": "^0.1.5",
 		"@radix-ui/react-tooltip": "^0.1.0",
 		"babel-loader": "^8.2.2",
 		"classnames": "^2.3.1",
@@ -83,6 +84,7 @@
 		"@mdx-js/react": "^2.1.1",
 		"@storybook/addon-a11y": "^6.5.9",
 		"@storybook/addon-actions": "^6.5.9",
+		"@storybook/addon-controls": "^6.5.9",
 		"@storybook/addon-essentials": "^6.5.9",
 		"@storybook/addon-links": "^6.5.9",
 		"@storybook/react": "^6.5.9",

package/src/system/Form/Toggle.js

@@ -6,73 +6,47 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-const Toggle = ( { name = 'toggle', className = null, ...props } ) => (
-	<CheckBoxWrapper className={ classNames( 'vip-checkbox-component', className ) }>
-		<CheckBox name={ name } id={ name } type="checkbox" { ...props } />
-		<CheckBoxLabel htmlFor={ name } />
-	</CheckBoxWrapper>
-);
-
-Toggle.propTypes = {
-	name: PropTypes.string,
-	className: PropTypes.any,
-};
-
-export { Toggle };
+import * as Switch from '@radix-ui/react-switch';
 
-const CheckBoxWrapper = props => <div sx={ { position: 'relative' } } { ...props } />;
+// Documentation for Radix Switch component
+// https://www.radix-ui.com/docs/primitives/components/switch
 
-const CheckBoxLabel = props => (
-	<label
+export const Toggle = ( { name = 'toggle', onChange, className = null, ...rest } ) => (
+	<Switch.Root
+		className={ classNames( 'vip-toggle-component', className ) }
 		sx={ {
-			position: 'absolute',
-			top: '0',
-			left: '0',
-			width: '42px',
-			height: '24px',
-			borderRadius: '15px',
+			all: 'unset',
+			width: 42,
+			height: 24,
 			backgroundColor: 'muted',
-			cursor: 'pointer',
-			'&::after': {
-				content: "''",
+			borderRadius: '15px',
+			position: 'relative',
+			WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+			'&[data-state="checked"]': { backgroundColor: 'success' },
+		} }
+		name={ name }
+		onCheckedChange={ onChange || undefined }
+		{ ...rest }
+	>
+		<Switch.Thumb
+			sx={ {
 				display: 'block',
+				width: 18,
+				height: 18,
+				backgroundColor: 'white',
 				borderRadius: '50%',
-				width: '18px',
-				height: '18px',
-				margin: '3px',
-				backgroundColor: 'card',
-				boxShadow: 'low',
-				transition: '0.2s',
-			},
-		} }
-		{ ...props }
-	/>
+				boxShadow: 'rgb(0 0 0 / 5%) 0px 1px 5px, rgb(0 0 0 / 15%) 0px 1px 1px',
+				transition: 'transform 100ms',
+				transform: 'translateX(3px)',
+				willChange: 'transform',
+				'&[data-state="checked"]': { transform: 'translateX(21px)' },
+			} }
+		/>
+	</Switch.Root>
 );
 
-const CheckBox = props => (
-	<input
-		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 }
-	/>
-);
+Toggle.propTypes = {
+	name: PropTypes.string,
+	className: PropTypes.any,
+	onChange: PropTypes.func,
+};

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

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+import { Toggle, Label } from '..';
+
+export default {
+	title: 'Toggle',
+	component: Toggle,
+	argTypes: {
+		checked: {
+			options: [ true, false ],
+			default: true,
+			control: { type: 'radio' },
+		},
+	},
+};
+
+const Default = args => (
+	<form>
+		<Toggle defaultChecked checked={ args.checked } aria-label="Feature flag" />
+	</form>
+);
+
+const WithLabel = args => (
+	<form>
+		<Label htmlFor="custom-label-input">Custom Label here</Label>
+
+		<Toggle
+			id="custom-label-input"
+			defaultChecked
+			checked={ args.checked }
+			aria-label="Feature flag"
+		/>
+	</form>
+);
+
+export const Primary = Default.bind( { checked: true } );
+export const ExternalLabel = WithLabel.bind( { checked: true } );

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

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+/**
+ * Internal dependencies
+ */
+import { Toggle } from './Toggle';
+
+describe( '<Toggle />', () => {
+	it( 'renders the Toggle component', async () => {
+		const { container } = render(
+			<Toggle aria-label="Dinner room Light" defaultChecked name="my-toggle" />
+		);
+
+		expect( screen.getByRole( 'switch' ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/build/system/Form/MultiSelect.js

@@ -1,38 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.MultiSelect = void 0;
-
-var _reactSelect = _interopRequireDefault(require("react-select"));
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || 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); }
-
-var vipGold = '#c29c69'; // hardcoding for now
-
-var vipGrey2 = '#d7dee2';
-var customStyles = {
-  control: function control(styles) {
-    return _extends({}, styles, {
-      border: "1px solid " + vipGrey2,
-      boxShadow: 'none',
-      '&:hover': {
-        border: "1px solid " + vipGold
-      },
-      '&:focus': {
-        border: "1px solid " + vipGold
-      }
-    });
-  }
-};
-
-var MultiSelect = function MultiSelect(props) {
-  return (0, _jsxRuntime.jsx)(_reactSelect["default"], _extends({}, props, {
-    styles: customStyles
-  }));
-};
-
-exports.MultiSelect = MultiSelect;

package/build/system/UsageChart/UsageChart.js

@@ -1,60 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.UsageChart = void 0;
-
-var _framerMotion = require("framer-motion");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-/**
- * External dependencies
- */
-var UsageChart = function UsageChart(_ref) {
-  var total = _ref.total,
-      max = _ref.max,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'primary' : _ref$variant;
-  var width = total / max * 100 + '%';
-  var formattedTotal = total;
-
-  if (total > 1000000) {
-    formattedTotal = (total / 1000000).toFixed(2) + "M";
-  } else if (total > 1000) {
-    formattedTotal = (total / 1000).toFixed(2) + "K";
-  }
-
-  return (0, _jsxRuntime.jsx)("div", {
-    sx: {
-      height: variant === 'primary' ? 32 : 8,
-      overflow: 'hidden',
-      backgroundColor: variant === 'primary' ? 'border' : 'transparent'
-    },
-    children: (0, _jsxRuntime.jsx)(_framerMotion.motion.div, {
-      initial: {
-        width: 0
-      },
-      animate: {
-        width: width
-      },
-      transition: {
-        duration: 0.7
-      },
-      sx: {
-        height: '100%',
-        backgroundColor: variant === 'primary' ? 'primary' : 'grey.40'
-      }
-    })
-  });
-};
-
-exports.UsageChart = UsageChart;
-UsageChart.propTypes = {
-  total: _propTypes["default"].number,
-  max: _propTypes["default"].number,
-  variant: _propTypes["default"].string
-};

package/build/system/UsageChart/index.js

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