@automattic/vip-design-system 1.2.0 → 1.2.2

package/build/system/Form/Radio.js

@@ -1,178 +1,194 @@
-"use strict";
-
-exports.__esModule = true;
-exports.Radio = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _Label = require("./Label");
-var _ScreenReaderText = require("../ScreenReaderText/ScreenReaderText");
-var _theme = _interopRequireDefault(require("../theme"));
-var _Input = require("./Input.styles");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["children"],
-  _excluded2 = ["id", "value", "className", "label", "labelProps"],
-  _excluded3 = ["disabled", "defaultValue", "onChange", "name", "options", "className"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-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; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); } /* eslint-disable max-len */ /** @jsxImportSource theme-ui */ /**
-                                                                                                                                                                                                                                                                                                                                                                                                                   * External dependencies
-                                                                                                                                                                                                                                                                                                                                                                                                                   */
-var prefix = 'vip-radio-component-';
-var itemStyle = {
-  display: 'flex',
-  alignItems: 'center',
-  my: 2
+/* eslint-disable max-len */
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Label } from './Label';
+import { screenReaderTextClass } from '../ScreenReaderText/ScreenReaderText';
+import mainTheme from '../theme';
+import { baseControlBorderStyle, inputBaseText } from './Input.styles';
+
+const prefix = 'vip-radio-component-';
+
+const itemStyle = {
+	display: 'flex',
+	alignItems: 'center',
+	my: 2,
 };
-var radioPosition = _theme["default"].space[4] - _theme["default"].space[1];
-var inputStyle = _extends({}, _ScreenReaderText.screenReaderTextClass, {
-  width: '16px',
-  height: '16px',
-  '&:focus ~ label:before': function focusLabelBefore(theme) {
-    return _extends({}, theme.outline, {
-      content: '""',
-      border: '1px solid',
-      borderColor: _Input.baseControlBorderStyle.borderColor,
-      zIndex: 3,
-      left: -1 * radioPosition + "px"
-    });
-  },
-  '&:checked ~ label::after': {
-    opacity: 1,
-    transform: 'scale(1)'
-  }
-});
-var labelStyle = {
-  cursor: 'pointer',
-  position: 'relative',
-  marginLeft: radioPosition + "px",
-  marginBottom: 0,
-  userSelect: 'none',
-  color: _Input.inputBaseText,
-  lineHeight: 1.5,
-  '&:before, &:after': {
-    borderRadius: '50%',
-    position: 'absolute',
-    top: 0,
-    left: -1 * radioPosition + "px",
-    transition: 'all .3s ease-out',
-    zIndex: 2,
-    width: '16px',
-    height: '16px'
-  },
-  '&::before': {
-    content: '""',
-    border: '1px solid',
-    borderColor: _Input.baseControlBorderStyle.borderColor
-  },
-  '&::after': {
-    content: '""',
-    backgroundColor: 'link',
-    backgroundPosition: 'left 2px top 2px',
-    backgroundSize: '70%',
-    backgroundRepeat: 'no-repeat',
-    backgroundImage: "url(\n\t\t\t\t\t'data:image/svg+xml;utf8,<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" 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>')",
-    border: '1px solid',
-    borderColor: _Input.baseControlBorderStyle.borderColor,
-    color: 'white',
-    transform: 'scale(0)',
-    opacity: 0
-  }
+
+const radioPosition = mainTheme.space[ 4 ] - mainTheme.space[ 1 ];
+
+const inputStyle = {
+	...screenReaderTextClass,
+	width: '16px',
+	height: '16px',
+	'&:focus ~ label:before': theme => ( {
+		...theme.outline,
+		content: '""',
+		border: '1px solid',
+		borderColor: baseControlBorderStyle.borderColor,
+		zIndex: 3,
+		left: `${ -1 * radioPosition }px`,
+	} ),
+	'&:checked ~ label::after': {
+		opacity: 1,
+		transform: 'scale(1)',
+	},
 };
-var CustomLabel = function CustomLabel(_ref) {
-  var children = _ref.children,
-    restLabel = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: /*#__PURE__*/_react["default"].cloneElement(_react["default"].Children.only(children), _extends({}, children.props, {
-      sx: _extends({}, labelStyle, children.props.sx),
-      className: children.props.className + " " + prefix + "item-label"
-    }, restLabel))
-  });
+
+const labelStyle = {
+	cursor: 'pointer',
+	position: 'relative',
+	marginLeft: `${ radioPosition }px`,
+	marginBottom: 0,
+	userSelect: 'none',
+	color: inputBaseText,
+	lineHeight: 1.5,
+	'&:before, &:after': {
+		borderRadius: '50%',
+		position: 'absolute',
+		top: 0,
+		left: `${ -1 * radioPosition }px`,
+		transition: 'all .3s ease-out',
+		zIndex: 2,
+		width: '16px',
+		height: '16px',
+	},
+	'&::before': {
+		content: '""',
+		border: '1px solid',
+		borderColor: baseControlBorderStyle.borderColor,
+	},
+	'&::after': {
+		content: '""',
+		backgroundColor: 'link',
+		backgroundPosition: 'left 2px top 2px',
+		backgroundSize: '70%',
+		backgroundRepeat: 'no-repeat',
+
+		backgroundImage: `url(
+					'data:image/svg+xml;utf8,<svg width="14" height="14" viewBox="0 0 14 14" 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>')`,
+		border: '1px solid',
+		borderColor: baseControlBorderStyle.borderColor,
+		color: 'white',
+		transform: 'scale(0)',
+		opacity: 0,
+	},
 };
-CustomLabel.propTypes = {
-  children: _propTypes["default"].any
+
+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,
+			} ) }
+		</>
+	);
 };
-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 = _objectWithoutPropertiesLoose(_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", _extends({
-      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, _extends({
-      className: prefix + "item-label",
-      htmlFor: id,
-      sx: labelStyle
-    }, labelProps, {
-      children: label
-    })) : (0, _jsxRuntime.jsx)(CustomLabel, _extends({}, labelProps, {
-      children: label
-    }))]
-  });
+
+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["default"].object,
-  name: _propTypes["default"].string,
-  onChangeHandler: _propTypes["default"].func,
-  checked: _propTypes["default"].bool
+	option: PropTypes.object,
+	name: PropTypes.string,
+	onChangeHandler: PropTypes.func,
+	checked: PropTypes.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 = _objectWithoutPropertiesLoose(_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.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", _extends({
-    className: (0, _classnames["default"])(prefix, "" + prefix + name, className),
-    ref: forwardRef
-  }, props, {
-    children: renderedOptions
-  }));
-});
-exports.Radio = Radio;
+
+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 => (
+			<RadioOption
+				key={ option?.id }
+				name={ name }
+				option={ option }
+				onChangeHandler={ onChangeHandler }
+				checked={ `${ defaultValue }` === `${ option?.value }` }
+			/>
+		) );
+
+		return (
+			<div
+				className={ classNames( prefix, `${ prefix }${ name }`, className ) }
+				ref={ forwardRef }
+				{ ...props }
+			>
+				{ renderedOptions }
+			</div>
+		);
+	}
+);
+
 Radio.displayName = 'Radio';
+
 Radio.propTypes = {
-  className: _propTypes["default"].any,
-  defaultValue: _propTypes["default"].any,
-  disabled: _propTypes["default"].bool,
-  name: _propTypes["default"].string,
-  onChange: _propTypes["default"].func,
-  options: _propTypes["default"].any
-};
+	className: PropTypes.any,
+	defaultValue: PropTypes.any,
+	disabled: PropTypes.bool,
+	name: PropTypes.string,
+	onChange: PropTypes.func,
+	options: PropTypes.any,
+};
+
+export { Radio };

package/build/system/Form/Radio.stories.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    export let title: string;
+    export { Radio as component };
+}
+export default _default;
+export function Default(): import("react").JSX.Element;
+import { Radio } from './Radio';

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

@@ -0,0 +1,100 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import { useState } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { Form, Link } from '..';
+import { Radio } from './Radio';
+import { Flex } from '../Flex';
+import { Label } from './Label';
+
+export default {
+	title: 'Form/Radio',
+	component: Radio,
+};
+
+export const Default = () => {
+	const [ checked, setChecked ] = useState( 'a' );
+	const [ checked2, setChecked2 ] = useState( 'b' );
+
+	return (
+		<Form.Root>
+			<p>
+				Per recommendation, if you have a Radio button, use a Fieldset with a legend as wrapper to
+				your options.{ ' ' }
+				<Link href="https://a11y-collective.github.io/demos/en/accessible-code/form-fieldsets.html">
+					Reference to Form fieldsets
+				</Link>
+			</p>
+			<Form.Fieldset>
+				<Form.Legend sx={ { mb: 0, fontSize: 2, fontWeight: 'bold' } }>
+					Apply the policy to these domains
+				</Form.Legend>
+
+				<Flex sx={ { alignItems: 'center' } }>
+					<Radio
+						name="the_option"
+						defaultValue={ checked }
+						options={ [
+							{
+								value: 'a',
+								label: 'All domains listed on this environment, and all subdomains',
+								id: 'option-a',
+							},
+							{ value: 'b', label: 'All domains listed on this environment', id: 'option-b' },
+						] }
+						onChange={ e => setChecked( e.target.value ) }
+					/>
+				</Flex>
+			</Form.Fieldset>
+
+			<Form.Fieldset>
+				<Form.Legend sx={ { mb: 0, fontSize: 2, fontWeight: 'bold' } }>
+					With a custom Label
+				</Form.Legend>
+
+				<Flex sx={ { alignItems: 'center' } }>
+					<Radio
+						name="the_option_custom"
+						defaultValue={ checked2 }
+						options={ [
+							{
+								value: 'a',
+								label: (
+									<Label
+										htmlFor="option-custom-a"
+										className="custom-class"
+										sx={ { color: '#bf2a23' } }
+									>
+										(Custom) All domains listed on this environment, and all subdomains
+									</Label>
+								),
+								id: 'option-custom-a',
+							},
+							{
+								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={ ( _, option ) => setChecked2( option.value ) }
+					/>
+				</Flex>
+			</Form.Fieldset>
+
+			<p id="describe-radio-all-domains-subdomains" sx={ { mt: 2 } }>
+				This is a explanation for custom option b
+			</p>
+		</Form.Root>
+	);
+};

package/build/system/Form/RadioBoxGroup.d.ts

@@ -0,0 +1,2 @@
+export const RadioBoxGroup: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';