@automattic/vip-design-system 0.27.0 → 0.27.2

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,22 @@ var _ScreenReaderText = require("../ScreenReaderText/ScreenReaderText");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["disabled", "defaultValue", "onChange", "name", "options", "className"];
+var _excluded = ["children"],
+    _excluded2 = ["id", "value", "className", "label", "labelProps"],
+    _excluded3 = ["disabled", "defaultValue", "onChange", "name", "options", "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; }
+
+var prefix = 'vip-radio-component-';
+var itemStyle = {
+  display: 'flex',
+  alignItems: 'center',
+  minHeight: function minHeight(theme) {
+    return theme.space[4] - theme.space[2] + "px";
+  }
+};
 var inputStyle = (0, _extends2["default"])({}, _ScreenReaderText.screenReaderTextClass, {
   width: '16px',
   height: '16px',
@@ -82,65 +97,89 @@ var labelStyle = {
 };
 
 var CustomLabel = function CustomLabel(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+      restLabel = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/_react["default"].cloneElement(_react["default"].Children.only(children), (0, _extends2["default"])({}, children.props, {
       sx: (0, _extends2["default"])({}, labelStyle, children.props.sx),
-      className: children.props.className + " vip-radio-component-item-label"
-    }))
+      className: children.props.className + " " + prefix + "item-label"
+    }, restLabel))
   });
 };
 
 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) {
-  var disabled = _ref2.disabled,
-      defaultValue = _ref2.defaultValue,
-      onChange = _ref2.onChange,
-      _ref2$name = _ref2.name,
-      name = _ref2$name === void 0 ? '' : _ref2$name,
-      _ref2$options = _ref2.options,
-      options = _ref2$options === void 0 ? [] : _ref2$options,
-      className = _ref2.className,
-      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded);
+var RadioOption = function RadioOption(_ref2) {
+  var _ref2$option = _ref2.option,
+      id = _ref2$option.id,
+      value = _ref2$option.value,
+      className = _ref2$option.className,
+      label = _ref2$option.label,
+      _ref2$option$labelPro = _ref2$option.labelProps,
+      labelProps = _ref2$option$labelPro === void 0 ? {} : _ref2$option$labelPro,
+      restOption = (0, _objectWithoutPropertiesLoose2["default"])(_ref2$option, _excluded2),
+      name = _ref2.name,
+      onChangeHandler = _ref2.onChangeHandler,
+      checked = _ref2.checked;
+  return (0, _jsxRuntime.jsxs)("div", {
+    sx: itemStyle,
+    className: (0, _classnames["default"])(prefix + "item", prefix + "item-" + id, checked ? prefix + "item-checked" : '', className),
+    children: [(0, _jsxRuntime.jsx)("input", (0, _extends2["default"])({
+      type: "radio",
+      id: id,
+      name: name,
+      value: "" + value,
+      sx: inputStyle,
+      onChange: onChangeHandler,
+      className: prefix + "item-input",
+      checked: checked
+    }, restOption)), typeof label === 'string' ? (0, _jsxRuntime.jsx)(_Label.Label, (0, _extends2["default"])({
+      className: prefix + "item-label",
+      htmlFor: id,
+      sx: labelStyle
+    }, labelProps, {
+      children: label
+    })) : (0, _jsxRuntime.jsx)(CustomLabel, (0, _extends2["default"])({}, labelProps, {
+      children: label
+    }))]
+  });
+};
+
+RadioOption.propTypes = {
+  option: _propTypes["default"].object,
+  name: _propTypes["default"].string,
+  onChangeHandler: _propTypes["default"].func,
+  checked: _propTypes["default"].bool
+};
+
+var Radio = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, forwardRef) {
+  var disabled = _ref3.disabled,
+      defaultValue = _ref3.defaultValue,
+      onChange = _ref3.onChange,
+      _ref3$name = _ref3.name,
+      name = _ref3$name === void 0 ? '' : _ref3$name,
+      _ref3$options = _ref3.options,
+      options = _ref3$options === void 0 ? [] : _ref3$options,
+      className = _ref3.className,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref3, _excluded3);
+  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 (option) {
-    return (0, _jsxRuntime.jsxs)("div", {
-      sx: {
-        display: 'flex',
-        alignItems: 'center',
-        minHeight: function minHeight(theme) {
-          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", {
-        type: "radio",
-        id: option.id,
-        name: name,
-        value: "" + option.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);
+    return (0, _jsxRuntime.jsx)(RadioOption, {
+      name: name,
+      option: option,
+      onChangeHandler: onChangeHandler,
+      checked: "" + defaultValue === "" + (option == null ? void 0 : option.value)
+    }, option == null ? void 0 : option.id);
   });
   return (0, _jsxRuntime.jsx)("div", (0, _extends2["default"])({
-    className: (0, _classnames["default"])('vip-radio-component', "vip-radio-component-" + name, className),
+    className: (0, _classnames["default"])(prefix, "" + prefix + name, className),
     ref: forwardRef
   }, props, {
     children: renderedOptions
@@ -153,7 +192,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.2",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",

package/src/system/Form/Radio.js

@@ -4,12 +4,20 @@
 /**
  * External dependencies
  */
-import React from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Label } from './Label';
 import { screenReaderTextClass } from '../ScreenReaderText/ScreenReaderText';
 
+const prefix = 'vip-radio-component-';
+
+const itemStyle = {
+	display: 'flex',
+	alignItems: 'center',
+	minHeight: theme => `${ theme.space[ 4 ] - theme.space[ 2 ] }px`,
+};
+
 const inputStyle = {
 	...screenReaderTextClass,
 	width: '16px',
@@ -68,19 +76,70 @@ 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, ...restLabel } ) => {
+	return (
+		<>
+			{ React.cloneElement( React.Children.only( children ), {
+				...children.props,
+				sx: { ...labelStyle, ...children.props.sx },
+				className: `${ children.props.className } ${ prefix }item-label`,
+				...restLabel,
+			} ) }
+		</>
+	);
+};
 
 CustomLabel.propTypes = {
-	children: PropTypes.shape( { props: { className: PropTypes.any, sx: PropTypes.object } } )
-		.isRequired,
+	children: PropTypes.any,
+};
+
+const RadioOption = ( {
+	option: { id, value, className, label, labelProps = {}, ...restOption },
+	name,
+	onChangeHandler,
+	checked,
+} ) => (
+	<div
+		sx={ itemStyle }
+		className={ classNames(
+			`${ prefix }item`,
+			`${ prefix }item-${ id }`,
+			checked ? `${ prefix }item-checked` : '',
+			className
+		) }
+	>
+		<input
+			type="radio"
+			id={ id }
+			name={ name }
+			value={ `${ value }` }
+			sx={ inputStyle }
+			onChange={ onChangeHandler }
+			className={ `${ prefix }item-input` }
+			checked={ checked }
+			{ ...restOption }
+		/>
+
+		{ typeof label === 'string' ? (
+			<Label
+				className={ `${ prefix }item-label` }
+				htmlFor={ id }
+				sx={ labelStyle }
+				{ ...labelProps }
+			>
+				{ label }
+			</Label>
+		) : (
+			<CustomLabel { ...labelProps }>{ label }</CustomLabel>
+		) }
+	</div>
+);
+
+RadioOption.propTypes = {
+	option: PropTypes.object,
+	name: PropTypes.string,
+	onChangeHandler: PropTypes.func,
+	checked: PropTypes.bool,
 };
 
 const Radio = React.forwardRef(
@@ -88,51 +147,26 @@ const Radio = React.forwardRef(
 		{ disabled, defaultValue, onChange, name = '', options = [], className, ...props },
 		forwardRef
 	) => {
+		const onChangeHandler = useCallback( e => {
+			const optionTriggered = options.find(
+				option => `${ option.value }` === `${ e.target.value }`
+			);
+			onChange( e, optionTriggered );
+		}, [] );
+
 		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 }` }
-				/>
-
-				{ 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>
+			<RadioOption
+				key={ option?.id }
+				name={ name }
+				option={ option }
+				onChangeHandler={ onChangeHandler }
+				checked={ `${ defaultValue }` === `${ option?.value }` }
+			/>
 		) );
 
 		return (
 			<div
-				className={ classNames(
-					'vip-radio-component',
-					`vip-radio-component-${ name }`,
-					className
-				) }
+				className={ classNames( prefix, `${ prefix }${ name }`, className ) }
 				ref={ forwardRef }
 				{ ...props }
 			>
@@ -148,7 +182,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>
 	);
 };