@automattic/vip-design-system 2.8.2 → 2.9.0

package/build/system/Form/RadioBoxGroup.js

@@ -94,16 +94,103 @@ const RadioOption = ( {
 	);
 };
 
-RadioOption.propTypes = {
+const ChipOption = ( {
+	defaultValue,
+	option: { id, value, label },
+	name,
+	disabled,
+	onChangeHandler,
+} ) => {
+	const checked = `${ defaultValue }` === `${ value }`;
+	const forLabel = id || value;
+	const ref = React.useRef( null );
+	const describedById = `input-radio-box-${ forLabel }-description`;
+
+	return (
+		<div
+			id={ `o${ forLabel }` }
+			onClick={ () => {
+				ref.current?.click();
+			} }
+			sx={ {
+				display: 'inline-flex',
+				position: 'relative',
+				background: checked ? 'layer.4' : undefined,
+				color: 'text',
+				minHeight: '32px',
+				boxShadow: checked ? 'low' : undefined,
+				'&:hover': {
+					background: checked ? 'layer.4' : 'layer.1',
+				},
+				borderRadius: 1,
+			} }
+		>
+			<input
+				ref={ ref }
+				type="radio"
+				id={ forLabel }
+				disabled={ disabled }
+				name={ name }
+				checked={ checked }
+				aria-checked={ checked }
+				value={ value }
+				onChange={ onChangeHandler }
+				aria-labelledby={ describedById }
+				sx={ {
+					opacity: 0,
+					height: 0,
+					width: 0,
+					position: 'absolute',
+					'&:focus-visible + label': theme => theme.outline,
+				} }
+			/>
+
+			<label
+				id={ describedById }
+				htmlFor={ forLabel }
+				sx={ {
+					height: '100%',
+					display: 'flex',
+					flexDirection: 'column',
+					justifyContent: 'center',
+					width: '100%',
+					px: 3,
+					fontWeight: 400,
+					fontSize: 2,
+					cursor: 'pointer',
+					borderRadius: 1,
+				} }
+			>
+				{ label }
+			</label>
+		</div>
+	);
+};
+
+ChipOption.propTypes = RadioOption.propTypes = {
 	defaultValue: PropTypes.string,
 	option: PropTypes.object,
 	name: PropTypes.string,
 	onChangeHandler: PropTypes.func,
-	checked: PropTypes.bool,
 	disabled: PropTypes.bool,
 	width: PropTypes.string,
 };
 
+const groupStyleOverrides = {
+	chip: {
+		background: 'layer.3',
+		p: 1,
+		display: 'inline-flex',
+		gap: 1,
+		borderRadius: 1,
+	},
+	primary: {
+		display: 'inline-block',
+		mb: 2,
+		p: 0,
+	},
+};
+
 const RadioBoxGroup = React.forwardRef(
 	(
 		{
@@ -117,6 +204,7 @@ const RadioBoxGroup = React.forwardRef(
 			errorMessage,
 			hasError,
 			required,
+			variant = 'primary',
 			...props
 		},
 		forwardRef
@@ -131,8 +219,13 @@ const RadioBoxGroup = React.forwardRef(
 			[ onChange ]
 		);
 
+		let Option = RadioOption;
+		if ( variant === 'chip' ) {
+			Option = ChipOption;
+		}
+
 		const renderedOptions = options.map( option => (
-			<RadioOption
+			<Option
 				defaultValue={ defaultValue }
 				disabled={ disabled }
 				key={ option?.id || option?.value }
@@ -148,11 +241,9 @@ const RadioBoxGroup = React.forwardRef(
 				<fieldset
 					sx={ {
 						border: 0,
-						p: hasError ? 2 : 0,
-						display: 'inline-block',
-						mb: 2,
+						...groupStyleOverrides[ variant ],
 						...( hasError
-							? { border: '1px solid', borderColor: 'input.border.error', borderRadius: 2 }
+							? { border: '1px solid', borderColor: 'input.border.error', borderRadius: 2, p: 2 }
 							: {} ),
 					} }
 					ref={ forwardRef }
@@ -171,7 +262,7 @@ const RadioBoxGroup = React.forwardRef(
 					<div
 						sx={ {
 							display: 'flex',
-							gap: 2,
+							gap: variant === 'chip' ? 1 : 2,
 						} }
 					>
 						{ renderedOptions }
@@ -202,6 +293,7 @@ RadioBoxGroup.propTypes = {
 	errorMessage: PropTypes.string,
 	hasError: PropTypes.bool,
 	required: PropTypes.bool,
+	variant: PropTypes.oneOf( [ 'primary', 'chip' ] ),
 };
 
 export { RadioBoxGroup };

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

@@ -1,8 +1,16 @@
 declare namespace _default {
     export let title: string;
     export { RadioBoxGroup as component };
+    export namespace parameters {
+        namespace docs {
+            namespace description {
+                let component: string;
+            }
+        }
+    }
 }
 export default _default;
 export function Default(): import("react").JSX.Element;
 export function Errors(): import("react").JSX.Element;
+export function ChipVariant(): import("react").JSX.Element;
 import { RadioBoxGroup } from '..';

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

@@ -11,6 +11,31 @@ import { RadioBoxGroup } from '..';
 export default {
 	title: 'RadioBoxGroup',
 	component: RadioBoxGroup,
+	parameters: {
+		docs: {
+			description: {
+				component: `
+A radio-box-group is a group of radio buttons that are styled as boxes. This component is used
+to allow users to select one option from a list of options.
+
+## Guidance
+
+### When to use the component
+
+- <strong>Select an option in a form.</strong> Use a radio-box-group when you want users to select
+a single option from a list of options.
+- <strong>Use as a toggle-group.</strong> Use a radio-box-group with the chip variant when you want
+to allow users to toggle between different options.
+
+-------
+
+This documentation is heavily inspired by the [U.S Web Design System (USWDS)](https://designsystem.digital.gov/components/tooltip/#package). We use USWDS as trusted source of truth for accessibility and usability best practices.
+
+## Component Properties
+`,
+			},
+		},
+	},
 };
 
 const options = [
@@ -58,3 +83,29 @@ export const Errors = () => {
 		/>
 	);
 };
+
+export const ChipVariant = () => {
+	const [ value, setValue ] = useState( 'table' );
+
+	return (
+		<RadioBoxGroup
+			defaultValue={ value }
+			onChange={ e => setValue( e.target.value ) }
+			options={ [
+				{
+					label: 'Table',
+					value: 'table',
+				},
+				{
+					label: 'Grid',
+					value: 'grid',
+				},
+				{
+					label: 'Card',
+					value: 'card',
+				},
+			] }
+			variant="chip"
+		/>
+	);
+};

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

@@ -0,0 +1 @@
+export {};

package/build/system/Form/RadioBoxGroup.test.jsx

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+/**
+ * Internal dependencies
+ */
+import { RadioBoxGroup } from './RadioBoxGroup';
+
+const defaultProps = {
+	options: [
+		{
+			label: 'One',
+			value: 'one',
+			description: 'This is desc 1',
+		},
+		{
+			label: 'Two',
+			value: 'two',
+			description: 'This is desc 2',
+		},
+		{
+			label: 'Three',
+			value: 'three',
+			description: 'This is desc 3',
+		},
+	],
+	onChange: jest.fn(),
+};
+
+describe( '<RadioBoxGroup />', () => {
+	it.each( [ 'primary', 'chip' ] )( 'renders the default variant', async variant => {
+		const { container } = render( <RadioBoxGroup { ...defaultProps } variant={ variant } /> );
+
+		const dom = await screen.findAllByRole( 'radio' );
+
+		expect( dom ).toHaveLength( 3 );
+		expect( dom[ 0 ] ).toHaveAttribute( 'value', 'one' );
+		expect( dom[ 1 ] ).toHaveAttribute( 'value', 'two' );
+		expect( dom[ 2 ] ).toHaveAttribute( 'value', 'three' );
+
+		// Check for accessibility issues
+		expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/build/system/Tooltip/Tooltip.stories.js

@@ -13,7 +13,7 @@ var _default = exports["default"] = {
   parameters: {
     docs: {
       description: {
-        component: "\nA tooltip is a short descriptive message that appears when a user hovers or focuses on an\nelement. Our tooltip aims to be 100% CSS-only. It uses a global css approach to inject the\ntooltip styles.\n\n## Kwown issues\n\n- Storybook uses iframes to render the components. This means that the tooltip box will overlap in the demos, but you can click on each demo page to see the correct render.\n- The current implementation of this component is <strong>NOT</strong> protected from viewport\nclipping (collision). For now, you can pick another <code>vip-tooltip-position</code> if\npossible.\n\n## Guidance\n\n### When to use the tooltip component\n\n- <strong>Helpful, non-critical information.</strong> Use tooltips to strengthen an existing\nmessage.\n- <strong>Enhance confidence.</strong> Use tooltips to increase certainty about an\ninteraction.\n- <strong>Brief descriptions.</strong> Tooltips perform best with succinct helper text.\n- <strong>Lack of space.</strong> Tooltips are useful as a last resort for space-constrained\nUI. Explore other options for keeping content visible without a tooltip.\n\n### When to consider something else\n\n- <strong>Critical information.</strong> Don&apos;t hide information necessary for completing\na task behind an tooltip interaction.\n- <strong>Lengthy descriptions.</strong> Tooltips are microcopy, and should be brief.\nDon&apos;t use a tooltip if you need a lot of text.\n- <strong>Redundant content.</strong> Don&apos;t use a tooltip when its content is repetitive\nor if usability is obvious.\n- <strong>Sufficient space.</strong> If content can fit outside a tooltip, don&apos;t use a\ntooltip.\n\n## Using the component\n\n- <strong>Use affordances.</strong> A hidden tooltip is unusable. Use tooltips only on\nelements that appear interactive, like buttons or links.\n- <strong>Avoid collisions.</strong> Be careful not introduce conflicting hover or focus\nevents.\n- <strong>Use consistently.</strong> If using tooltips in one context, use in all similar\ncontexts.\n- <strong>Don&apos;t block content.</strong> Use the <code>vip-tooltip-position</code> attribute to\nprevent the tooltip from covering other page elements.\n\n-------\n\nThis documentation is heavily inspired by the [U.S Web Design System (USWDS)](https://designsystem.digital.gov/components/tooltip/#package). We use USWDS as trusted source of truth for accessibility and usability best practices.\n\n## Component Properties\n"
+        component: "\nA tooltip is a short descriptive message that appears when a user hovers or focuses on an\nelement. Our tooltip aims to be 100% CSS-only. It uses a global css approach to inject the\ntooltip styles.\n\n## Known issues\n\n- Storybook uses iframes to render the components. This means that the tooltip box will overlap in the demos, but you can click on each demo page to see the correct render.\n- The current implementation of this component is <strong>NOT</strong> protected from viewport\nclipping (collision). For now, you can pick another <code>vip-tooltip-position</code> if\npossible.\n\n## Guidance\n\n### When to use the tooltip component\n\n- <strong>Helpful, non-critical information.</strong> Use tooltips to strengthen an existing\nmessage.\n- <strong>Enhance confidence.</strong> Use tooltips to increase certainty about an\ninteraction.\n- <strong>Brief descriptions.</strong> Tooltips perform best with succinct helper text.\n- <strong>Lack of space.</strong> Tooltips are useful as a last resort for space-constrained\nUI. Explore other options for keeping content visible without a tooltip.\n\n### When to consider something else\n\n- <strong>Critical information.</strong> Don&apos;t hide information necessary for completing\na task behind an tooltip interaction.\n- <strong>Lengthy descriptions.</strong> Tooltips are microcopy, and should be brief.\nDon&apos;t use a tooltip if you need a lot of text.\n- <strong>Redundant content.</strong> Don&apos;t use a tooltip when its content is repetitive\nor if usability is obvious.\n- <strong>Sufficient space.</strong> If content can fit outside a tooltip, don&apos;t use a\ntooltip.\n\n## Using the component\n\n- <strong>Use affordances.</strong> A hidden tooltip is unusable. Use tooltips only on\nelements that appear interactive, like buttons or links.\n- <strong>Avoid collisions.</strong> Be careful not introduce conflicting hover or focus\nevents.\n- <strong>Use consistently.</strong> If using tooltips in one context, use in all similar\ncontexts.\n- <strong>Don&apos;t block content.</strong> Use the <code>vip-tooltip-position</code> attribute to\nprevent the tooltip from covering other page elements.\n\n-------\n\nThis documentation is heavily inspired by the [U.S Web Design System (USWDS)](https://designsystem.digital.gov/components/tooltip/#package). We use USWDS as trusted source of truth for accessibility and usability best practices.\n\n## Component Properties\n"
       }
     }
   }

package/package.json

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

package/src/system/Form/RadioBoxGroup.js

@@ -94,16 +94,103 @@ const RadioOption = ( {
 	);
 };
 
-RadioOption.propTypes = {
+const ChipOption = ( {
+	defaultValue,
+	option: { id, value, label },
+	name,
+	disabled,
+	onChangeHandler,
+} ) => {
+	const checked = `${ defaultValue }` === `${ value }`;
+	const forLabel = id || value;
+	const ref = React.useRef( null );
+	const describedById = `input-radio-box-${ forLabel }-description`;
+
+	return (
+		<div
+			id={ `o${ forLabel }` }
+			onClick={ () => {
+				ref.current?.click();
+			} }
+			sx={ {
+				display: 'inline-flex',
+				position: 'relative',
+				background: checked ? 'layer.4' : undefined,
+				color: 'text',
+				minHeight: '32px',
+				boxShadow: checked ? 'low' : undefined,
+				'&:hover': {
+					background: checked ? 'layer.4' : 'layer.1',
+				},
+				borderRadius: 1,
+			} }
+		>
+			<input
+				ref={ ref }
+				type="radio"
+				id={ forLabel }
+				disabled={ disabled }
+				name={ name }
+				checked={ checked }
+				aria-checked={ checked }
+				value={ value }
+				onChange={ onChangeHandler }
+				aria-labelledby={ describedById }
+				sx={ {
+					opacity: 0,
+					height: 0,
+					width: 0,
+					position: 'absolute',
+					'&:focus-visible + label': theme => theme.outline,
+				} }
+			/>
+
+			<label
+				id={ describedById }
+				htmlFor={ forLabel }
+				sx={ {
+					height: '100%',
+					display: 'flex',
+					flexDirection: 'column',
+					justifyContent: 'center',
+					width: '100%',
+					px: 3,
+					fontWeight: 400,
+					fontSize: 2,
+					cursor: 'pointer',
+					borderRadius: 1,
+				} }
+			>
+				{ label }
+			</label>
+		</div>
+	);
+};
+
+ChipOption.propTypes = RadioOption.propTypes = {
 	defaultValue: PropTypes.string,
 	option: PropTypes.object,
 	name: PropTypes.string,
 	onChangeHandler: PropTypes.func,
-	checked: PropTypes.bool,
 	disabled: PropTypes.bool,
 	width: PropTypes.string,
 };
 
+const groupStyleOverrides = {
+	chip: {
+		background: 'layer.3',
+		p: 1,
+		display: 'inline-flex',
+		gap: 1,
+		borderRadius: 1,
+	},
+	primary: {
+		display: 'inline-block',
+		mb: 2,
+		p: 0,
+	},
+};
+
 const RadioBoxGroup = React.forwardRef(
 	(
 		{
@@ -117,6 +204,7 @@ const RadioBoxGroup = React.forwardRef(
 			errorMessage,
 			hasError,
 			required,
+			variant = 'primary',
 			...props
 		},
 		forwardRef
@@ -131,8 +219,13 @@ const RadioBoxGroup = React.forwardRef(
 			[ onChange ]
 		);
 
+		let Option = RadioOption;
+		if ( variant === 'chip' ) {
+			Option = ChipOption;
+		}
+
 		const renderedOptions = options.map( option => (
-			<RadioOption
+			<Option
 				defaultValue={ defaultValue }
 				disabled={ disabled }
 				key={ option?.id || option?.value }
@@ -148,11 +241,9 @@ const RadioBoxGroup = React.forwardRef(
 				<fieldset
 					sx={ {
 						border: 0,
-						p: hasError ? 2 : 0,
-						display: 'inline-block',
-						mb: 2,
+						...groupStyleOverrides[ variant ],
 						...( hasError
-							? { border: '1px solid', borderColor: 'input.border.error', borderRadius: 2 }
+							? { border: '1px solid', borderColor: 'input.border.error', borderRadius: 2, p: 2 }
 							: {} ),
 					} }
 					ref={ forwardRef }
@@ -171,7 +262,7 @@ const RadioBoxGroup = React.forwardRef(
 					<div
 						sx={ {
 							display: 'flex',
-							gap: 2,
+							gap: variant === 'chip' ? 1 : 2,
 						} }
 					>
 						{ renderedOptions }
@@ -202,6 +293,7 @@ RadioBoxGroup.propTypes = {
 	errorMessage: PropTypes.string,
 	hasError: PropTypes.bool,
 	required: PropTypes.bool,
+	variant: PropTypes.oneOf( [ 'primary', 'chip' ] ),
 };
 
 export { RadioBoxGroup };

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

@@ -11,6 +11,31 @@ import { RadioBoxGroup } from '..';
 export default {
 	title: 'RadioBoxGroup',
 	component: RadioBoxGroup,
+	parameters: {
+		docs: {
+			description: {
+				component: `
+A radio-box-group is a group of radio buttons that are styled as boxes. This component is used
+to allow users to select one option from a list of options.
+
+## Guidance
+
+### When to use the component
+
+- <strong>Select an option in a form.</strong> Use a radio-box-group when you want users to select
+a single option from a list of options.
+- <strong>Use as a toggle-group.</strong> Use a radio-box-group with the chip variant when you want
+to allow users to toggle between different options.
+
+-------
+
+This documentation is heavily inspired by the [U.S Web Design System (USWDS)](https://designsystem.digital.gov/components/tooltip/#package). We use USWDS as trusted source of truth for accessibility and usability best practices.
+
+## Component Properties
+`,
+			},
+		},
+	},
 };
 
 const options = [
@@ -58,3 +83,29 @@ export const Errors = () => {
 		/>
 	);
 };
+
+export const ChipVariant = () => {
+	const [ value, setValue ] = useState( 'table' );
+
+	return (
+		<RadioBoxGroup
+			defaultValue={ value }
+			onChange={ e => setValue( e.target.value ) }
+			options={ [
+				{
+					label: 'Table',
+					value: 'table',
+				},
+				{
+					label: 'Grid',
+					value: 'grid',
+				},
+				{
+					label: 'Card',
+					value: 'card',
+				},
+			] }
+			variant="chip"
+		/>
+	);
+};

package/src/system/Form/RadioBoxGroup.test.jsx

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+/**
+ * Internal dependencies
+ */
+import { RadioBoxGroup } from './RadioBoxGroup';
+
+const defaultProps = {
+	options: [
+		{
+			label: 'One',
+			value: 'one',
+			description: 'This is desc 1',
+		},
+		{
+			label: 'Two',
+			value: 'two',
+			description: 'This is desc 2',
+		},
+		{
+			label: 'Three',
+			value: 'three',
+			description: 'This is desc 3',
+		},
+	],
+	onChange: jest.fn(),
+};
+
+describe( '<RadioBoxGroup />', () => {
+	it.each( [ 'primary', 'chip' ] )( 'renders the default variant', async variant => {
+		const { container } = render( <RadioBoxGroup { ...defaultProps } variant={ variant } /> );
+
+		const dom = await screen.findAllByRole( 'radio' );
+
+		expect( dom ).toHaveLength( 3 );
+		expect( dom[ 0 ] ).toHaveAttribute( 'value', 'one' );
+		expect( dom[ 1 ] ).toHaveAttribute( 'value', 'two' );
+		expect( dom[ 2 ] ).toHaveAttribute( 'value', 'three' );
+
+		// Check for accessibility issues
+		expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/Tooltip/Tooltip.stories.tsx

@@ -14,7 +14,7 @@ A tooltip is a short descriptive message that appears when a user hovers or focu
 element. Our tooltip aims to be 100% CSS-only. It uses a global css approach to inject the
 tooltip styles.
 
-## Kwown issues
+## Known issues
 
 - Storybook uses iframes to render the components. This means that the tooltip box will overlap in the demos, but you can click on each demo page to see the correct render.
 - The current implementation of this component is <strong>NOT</strong> protected from viewport