@automattic/vip-design-system 0.27.0 → 0.27.1

package/.storybook/decorators/withColorMode.jsx

@@ -21,7 +21,7 @@ export const backgrounds = {
 };
 
 function ThemeChanger( { background } ) {
-	const [ colorMode, setColorMode ] = useColorMode();
+	const [ _, setColorMode ] = useColorMode();
 	const newColorMode = darkBackground === background ? 'dark' : 'default';
 
 	useEffect( () => {

package/build/system/Form/Radio.js

@@ -9,7 +9,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -21,7 +21,13 @@ var _ScreenReaderText = require("../ScreenReaderText/ScreenReaderText");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["disabled", "defaultValue", "onChange", "name", "options", "className"];
+var _excluded = ["disabled", "defaultValue", "onChange", "name", "options", "className"],
+    _excluded2 = ["id", "className", "value", "label", "labelProps"];
+
+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; }
+
 var inputStyle = (0, _extends2["default"])({}, _ScreenReaderText.screenReaderTextClass, {
   width: '16px',
   height: '16px',
@@ -92,12 +98,7 @@ var CustomLabel = function CustomLabel(_ref) {
 };
 
 CustomLabel.propTypes = {
-  children: _propTypes["default"].shape({
-    props: {
-      className: _propTypes["default"].any,
-      sx: _propTypes["default"].object
-    }
-  }).isRequired
+  children: _propTypes["default"].any
 };
 
 var Radio = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardRef) {
@@ -110,7 +111,20 @@ var Radio = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardRe
       options = _ref2$options === void 0 ? [] : _ref2$options,
       className = _ref2.className,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded);
-  var renderedOptions = options.map(function (option) {
+  var onChangeHandler = (0, _react.useCallback)(function (e) {
+    var optionTriggered = options.find(function (option) {
+      return "" + option.value === "" + e.target.value;
+    });
+    onChange(e, optionTriggered);
+  }, []);
+  var renderedOptions = options.map(function (_ref3) {
+    var id = _ref3.id,
+        optionClassName = _ref3.className,
+        value = _ref3.value,
+        label = _ref3.label,
+        _ref3$labelProps = _ref3.labelProps,
+        labelProps = _ref3$labelProps === void 0 ? {} : _ref3$labelProps,
+        restOption = (0, _objectWithoutPropertiesLoose2["default"])(_ref3, _excluded2);
     return (0, _jsxRuntime.jsxs)("div", {
       sx: {
         display: 'flex',
@@ -119,25 +133,26 @@ var Radio = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardRe
           return theme.space[4] - theme.space[2] + "px";
         }
       },
-      className: (0, _classnames["default"])('vip-radio-component-item', "vip-radio-component-item-" + option.id),
-      children: [(0, _jsxRuntime.jsx)("input", {
+      className: (0, _classnames["default"])('vip-radio-component-item', "vip-radio-component-item-" + id),
+      children: [(0, _jsxRuntime.jsx)("input", (0, _extends2["default"])({
         type: "radio",
-        id: option.id,
+        id: id,
         name: name,
-        value: "" + option.value,
+        value: "" + value,
         sx: inputStyle,
-        onChange: onChange,
-        className: (0, _classnames["default"])('vip-radio-component-item-input', option == null ? void 0 : option.className),
-        checked: "" + option.value === "" + defaultValue
-      }), typeof option.label === 'string' ? (0, _jsxRuntime.jsx)(_Label.Label, {
-        className: (0, _classnames["default"])('vip-radio-component-item-label', option == null ? void 0 : option.className),
-        htmlFor: option.id,
-        sx: labelStyle,
-        children: option.label
-      }) : (0, _jsxRuntime.jsx)(CustomLabel, {
-        children: option.label
-      })]
-    }, option.id);
+        onChange: onChangeHandler,
+        className: (0, _classnames["default"])('vip-radio-component-item-input', optionClassName),
+        checked: "" + value === "" + defaultValue
+      }, restOption)), typeof label === 'string' ? (0, _jsxRuntime.jsx)(_Label.Label, (0, _extends2["default"])({
+        className: (0, _classnames["default"])('vip-radio-component-item-label', optionClassName),
+        htmlFor: id,
+        sx: labelStyle
+      }, labelProps, {
+        children: label
+      })) : (0, _jsxRuntime.jsx)(CustomLabel, (0, _extends2["default"])({}, labelProps, {
+        children: label
+      }))]
+    }, id);
   });
   return (0, _jsxRuntime.jsx)("div", (0, _extends2["default"])({
     className: (0, _classnames["default"])('vip-radio-component', "vip-radio-component-" + name, className),
@@ -153,7 +168,7 @@ Radio.propTypes = {
   disabled: _propTypes["default"].bool,
   defaultValue: _propTypes["default"].any,
   onChange: _propTypes["default"].func,
-  options: _propTypes["default"].array,
+  options: _propTypes["default"].any,
   name: _propTypes["default"].string,
   className: _propTypes["default"].any
 };

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

@@ -5,7 +5,7 @@ exports["default"] = exports.Default = void 0;
 
 var _react = require("react");
 
-var _ = require("..");
+var _2 = require("..");
 
 var _Radio = require("./Radio");
 
@@ -35,11 +35,11 @@ var Default = function Default() {
       checked = _useState[0],
       setChecked = _useState[1];
 
-  var _useState2 = (0, _react.useState)('a'),
+  var _useState2 = (0, _react.useState)('b'),
       checked2 = _useState2[0],
       setChecked2 = _useState2[1];
 
-  return (0, _jsxRuntime.jsxs)(_.Form.Root, {
+  return (0, _jsxRuntime.jsxs)(_2.Form.Root, {
     children: [(0, _jsxRuntime.jsxs)("p", {
       children: ["Per recommendation, if you have a Radio button, use a Fieldset with a legend as wrapper to your options.", ' ', (0, _jsxRuntime.jsx)("a", {
         href: "https://a11y-collective.github.io/demos/en/accessible-code/form-fieldsets.html",
@@ -95,7 +95,7 @@ var Default = function Default() {
               htmlFor: "option-custom-a",
               className: "custom-class",
               sx: {
-                color: 'primary'
+                color: 'error'
               },
               children: "(Custom) All domains listed on this environment, and all subdomains"
             }),
@@ -103,14 +103,24 @@ var Default = function Default() {
           }, {
             value: 'b',
             label: 'All domains listed on this environment',
+            labelProps: {
+              id: 'label-option-custom-b-custom-props'
+            },
             className: 'custom-class-for-this',
+            'aria-describedby': 'describe-radio-all-domains-subdomains',
             id: 'option-custom-b'
           }],
-          onChange: function onChange(e) {
-            return setChecked2(e.target.value);
+          onChange: function onChange(_, option) {
+            return setChecked2(option.value);
           }
         })
       })]
+    }), (0, _jsxRuntime.jsx)("p", {
+      id: "describe-radio-all-domains-subdomains",
+      sx: {
+        mt: 2
+      },
+      children: "This is a explanation for custom option b"
     })]
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.27.0",
+	"version": "0.27.1",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",

package/src/system/Form/Radio.js

@@ -4,7 +4,7 @@
 /**
  * External dependencies
  */
-import React from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Label } from './Label';
@@ -68,19 +68,20 @@ const labelStyle = {
 	},
 };
 
-const CustomLabel = ( { children } ) => (
-	<>
-		{ React.cloneElement( React.Children.only( children ), {
-			...children.props,
-			sx: { ...labelStyle, ...children.props.sx },
-			className: `${ children.props.className } vip-radio-component-item-label`,
-		} ) }
-	</>
-);
+const CustomLabel = ( { children } ) => {
+	return (
+		<>
+			{ React.cloneElement( React.Children.only( children ), {
+				...children.props,
+				sx: { ...labelStyle, ...children.props.sx },
+				className: `${ children.props.className } vip-radio-component-item-label`,
+			} ) }
+		</>
+	);
+};
 
 CustomLabel.propTypes = {
-	children: PropTypes.shape( { props: { className: PropTypes.any, sx: PropTypes.object } } )
-		.isRequired,
+	children: PropTypes.any,
 };
 
 const Radio = React.forwardRef(
@@ -88,43 +89,51 @@ const Radio = React.forwardRef(
 		{ disabled, defaultValue, onChange, name = '', options = [], className, ...props },
 		forwardRef
 	) => {
-		const renderedOptions = options.map( option => (
-			<div
-				sx={ {
-					display: 'flex',
-					alignItems: 'center',
-					minHeight: theme => `${ theme.space[ 4 ] - theme.space[ 2 ] }px`,
-				} }
-				key={ option.id }
-				className={ classNames(
-					'vip-radio-component-item',
-					`vip-radio-component-item-${ option.id }`
-				) }
-			>
-				<input
-					type="radio"
-					id={ option.id }
-					name={ name }
-					value={ `${ option.value }` }
-					sx={ inputStyle }
-					onChange={ onChange }
-					className={ classNames( 'vip-radio-component-item-input', option?.className ) }
-					checked={ `${ option.value }` === `${ defaultValue }` }
-				/>
+		const onChangeHandler = useCallback( e => {
+			const optionTriggered = options.find(
+				option => `${ option.value }` === `${ e.target.value }`
+			);
+			onChange( e, optionTriggered );
+		}, [] );
 
-				{ typeof option.label === 'string' ? (
-					<Label
-						className={ classNames( 'vip-radio-component-item-label', option?.className ) }
-						htmlFor={ option.id }
-						sx={ labelStyle }
-					>
-						{ option.label }
-					</Label>
-				) : (
-					<CustomLabel>{ option.label }</CustomLabel>
-				) }
-			</div>
-		) );
+		const renderedOptions = options.map(
+			( { id, className: optionClassName, value, label, labelProps = {}, ...restOption } ) => (
+				<div
+					sx={ {
+						display: 'flex',
+						alignItems: 'center',
+						minHeight: theme => `${ theme.space[ 4 ] - theme.space[ 2 ] }px`,
+					} }
+					key={ id }
+					className={ classNames( 'vip-radio-component-item', `vip-radio-component-item-${ id }` ) }
+				>
+					<input
+						type="radio"
+						id={ id }
+						name={ name }
+						value={ `${ value }` }
+						sx={ inputStyle }
+						onChange={ onChangeHandler }
+						className={ classNames( 'vip-radio-component-item-input', optionClassName ) }
+						checked={ `${ value }` === `${ defaultValue }` }
+						{ ...restOption }
+					/>
+
+					{ typeof label === 'string' ? (
+						<Label
+							className={ classNames( 'vip-radio-component-item-label', optionClassName ) }
+							htmlFor={ id }
+							sx={ labelStyle }
+							{ ...labelProps }
+						>
+							{ label }
+						</Label>
+					) : (
+						<CustomLabel { ...labelProps }>{ label }</CustomLabel>
+					) }
+				</div>
+			)
+		);
 
 		return (
 			<div
@@ -148,7 +157,7 @@ Radio.propTypes = {
 	disabled: PropTypes.bool,
 	defaultValue: PropTypes.any,
 	onChange: PropTypes.func,
-	options: PropTypes.array,
+	options: PropTypes.any,
 	name: PropTypes.string,
 	className: PropTypes.any,
 };

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

@@ -20,7 +20,7 @@ export default {
 
 export const Default = () => {
 	const [ checked, setChecked ] = useState( 'a' );
-	const [ checked2, setChecked2 ] = useState( 'a' );
+	const [ checked2, setChecked2 ] = useState( 'b' );
 
 	return (
 		<Form.Root>
@@ -67,7 +67,7 @@ export const Default = () => {
 									<Label
 										htmlFor="option-custom-a"
 										className="custom-class"
-										sx={ { color: 'primary' } }
+										sx={ { color: 'error' } }
 									>
 										(Custom) All domains listed on this environment, and all subdomains
 									</Label>
@@ -77,14 +77,22 @@ export const Default = () => {
 							{
 								value: 'b',
 								label: 'All domains listed on this environment',
+								labelProps: {
+									id: 'label-option-custom-b-custom-props',
+								},
 								className: 'custom-class-for-this',
+								'aria-describedby': 'describe-radio-all-domains-subdomains',
 								id: 'option-custom-b',
 							},
 						] }
-						onChange={ e => setChecked2( e.target.value ) }
+						onChange={ ( _, option ) => setChecked2( option.value ) }
 					/>
 				</Flex>
 			</fieldset>
+
+			<p id="describe-radio-all-domains-subdomains" sx={ { mt: 2 } }>
+				This is a explanation for custom option b
+			</p>
 		</Form.Root>
 	);
 };