@automattic/vip-design-system 0.27.1 → 0.27.3

package/build/system/Form/Radio.js

@@ -19,15 +19,25 @@ var _Label = require("./Label");
 
 var _ScreenReaderText = require("../ScreenReaderText/ScreenReaderText");
 
+var _theme = _interopRequireDefault(require("../theme"));
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["disabled", "defaultValue", "onChange", "name", "options", "className"],
-    _excluded2 = ["id", "className", "value", "label", "labelProps"];
+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',
+  my: 2
+};
+var radioPosition = _theme["default"].space[4] - _theme["default"].space[1];
 var inputStyle = (0, _extends2["default"])({}, _ScreenReaderText.screenReaderTextClass, {
   width: '16px',
   height: '16px',
@@ -37,7 +47,7 @@ var inputStyle = (0, _extends2["default"])({}, _ScreenReaderText.screenReaderTex
       border: '2px solid',
       borderColor: 'border',
       zIndex: 3,
-      left: -1 * (theme.space[4] - theme.space[2]) + "px"
+      left: -1 * radioPosition + "px"
     });
   },
   '&:checked ~ label::after': {
@@ -48,9 +58,7 @@ var inputStyle = (0, _extends2["default"])({}, _ScreenReaderText.screenReaderTex
 var labelStyle = {
   cursor: 'pointer',
   position: 'relative',
-  marginLeft: function marginLeft(theme) {
-    return theme.space[4] - theme.space[2] + "px";
-  },
+  marginLeft: radioPosition + "px",
   marginBottom: 0,
   userSelect: 'none',
   color: 'heading',
@@ -59,9 +67,7 @@ var labelStyle = {
     borderRadius: '50%',
     position: 'absolute',
     top: 0,
-    left: function left(theme) {
-      return -1 * (theme.space[4] - theme.space[2]) + "px";
-    },
+    left: -1 * radioPosition + "px",
     transition: 'all .3s ease-out',
     zIndex: 2,
     width: '16px',
@@ -88,12 +94,13 @@ 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))
   });
 };
 
@@ -101,61 +108,75 @@ CustomLabel.propTypes = {
   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 (_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',
-        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-" + id),
-      children: [(0, _jsxRuntime.jsx)("input", (0, _extends2["default"])({
-        type: "radio",
-        id: id,
-        name: name,
-        value: "" + value,
-        sx: inputStyle,
-        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);
+  var renderedOptions = options.map(function (option) {
+    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

package/package.json

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

package/src/system/Form/Radio.js

@@ -9,6 +9,17 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Label } from './Label';
 import { screenReaderTextClass } from '../ScreenReaderText/ScreenReaderText';
+import theme from '../theme';
+
+const prefix = 'vip-radio-component-';
+
+const itemStyle = {
+	display: 'flex',
+	alignItems: 'center',
+	my: 2,
+};
+
+const radioPosition = theme.space[ 4 ] - theme.space[ 1 ];
 
 const inputStyle = {
 	...screenReaderTextClass,
@@ -20,7 +31,7 @@ const inputStyle = {
 		border: '2px solid',
 		borderColor: 'border',
 		zIndex: 3,
-		left: `${ -1 * ( theme.space[ 4 ] - theme.space[ 2 ] ) }px`,
+		left: `${ -1 * radioPosition }px`,
 	} ),
 	'&:checked ~ label::after': {
 		opacity: 1,
@@ -31,7 +42,7 @@ const inputStyle = {
 const labelStyle = {
 	cursor: 'pointer',
 	position: 'relative',
-	marginLeft: theme => `${ theme.space[ 4 ] - theme.space[ 2 ] }px`,
+	marginLeft: `${ radioPosition }px`,
 	marginBottom: 0,
 	userSelect: 'none',
 	color: 'heading',
@@ -40,7 +51,7 @@ const labelStyle = {
 		borderRadius: '50%',
 		position: 'absolute',
 		top: 0,
-		left: theme => `${ -1 * ( theme.space[ 4 ] - theme.space[ 2 ] ) }px`,
+		left: `${ -1 * radioPosition }px`,
 		transition: 'all .3s ease-out',
 		zIndex: 2,
 		width: '16px',
@@ -68,13 +79,14 @@ const labelStyle = {
 	},
 };
 
-const CustomLabel = ( { children } ) => {
+const CustomLabel = ( { children, ...restLabel } ) => {
 	return (
 		<>
 			{ React.cloneElement( React.Children.only( children ), {
 				...children.props,
 				sx: { ...labelStyle, ...children.props.sx },
-				className: `${ children.props.className } vip-radio-component-item-label`,
+				className: `${ children.props.className } ${ prefix }item-label`,
+				...restLabel,
 			} ) }
 		</>
 	);
@@ -84,6 +96,55 @@ CustomLabel.propTypes = {
 	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(
 	(
 		{ disabled, defaultValue, onChange, name = '', options = [], className, ...props },
@@ -96,52 +157,19 @@ const Radio = React.forwardRef(
 			onChange( e, optionTriggered );
 		}, [] );
 
-		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>
-			)
-		);
+		const renderedOptions = options.map( option => (
+			<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 }
 			>