@automattic/vip-design-system 2.1.0 → 2.3.0

package/src/system/Drawer/Drawer.stories.tsx

@@ -1,27 +1,14 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-nocheck
 /** @jsxImportSource theme-ui */
 
-import { AiOutlineLock } from 'react-icons/ai';
-import {
-	BiBell,
-	BiBulb,
-	BiCodeAlt,
-	BiData,
-	BiGridAlt,
-	BiHistory,
-	BiTachometer,
-	BiWindows,
-} from 'react-icons/bi';
-import { MdMenu, MdOutlinePhotoLibrary } from 'react-icons/md';
-
 import { Drawer, Root, Trigger, Content } from './Drawer';
-import { Box, Button, Flex, Nav, NavItem } from '..';
-import { Logo } from '../Toolbar/Logo';
-import { CustomLink } from '../utils/stories/CustomLink';
+import { Button } from '..';
 
 import type { StoryObj } from '@storybook/react';
 
 export default {
-	title: 'Drawer',
+	title: 'Navigation/Drawer',
 	component: Drawer,
 	parameters: {
 		docs: {
@@ -68,20 +55,39 @@ type Story = StoryObj< typeof Drawer >;
 export const Default: Story = {
 	render: () => (
 		<>
-			<Drawer label="My XYZ Dialog" trigger={ <Button>Open </Button> } width={ 320 }>
+			<Drawer
+				label="My XYZ Dialog"
+				trigger={ <Button>Open </Button> }
+				dimensions={ { width: 320 } }
+			>
 				<p sx={ { ml: 3 } }>Hello from default</p>
 			</Drawer>
 
 			<Drawer trigger={ <Button>Top</Button> } variant="top" label="Dialog Content">
 				<p sx={ { ml: 3 } }>Hello from top</p>
 			</Drawer>
-			<Drawer trigger={ <Button>Right</Button> } variant="right" label="Dialog" width={ 500 }>
+			<Drawer
+				trigger={ <Button>Right</Button> }
+				variant="right"
+				label="Dialog"
+				dimensions={ { width: 500 } }
+			>
 				<p sx={ { ml: 3 } }>Hello from right width 500px</p>
 			</Drawer>
-			<Drawer trigger={ <Button>Bottom</Button> } variant="bottom" label="Dialog" height={ 200 }>
+			<Drawer
+				trigger={ <Button>Bottom</Button> }
+				variant="bottom"
+				label="Dialog"
+				dimensions={ { height: 200 } }
+			>
 				<p sx={ { ml: 3 } }>Hello from bottom with 200px</p>
 			</Drawer>
-			<Drawer trigger={ <Button>Left</Button> } variant="left" label="Dialog" width={ 600 }>
+			<Drawer
+				trigger={ <Button>Left</Button> }
+				variant="left"
+				label="Dialog"
+				dimensions={ { width: 600 } }
+			>
 				<p sx={ { ml: 3 } }>Hello from left width 600px</p>
 			</Drawer>
 			<Drawer trigger={ <Button>Left Header</Button> } variant="left-header" label="Dialog">
@@ -101,185 +107,10 @@ export const ByParts: Story = {
 				<Trigger>
 					<Button>Open </Button>
 				</Trigger>
-				<Content width={ 320 } label="My XYZ Dialog">
+				<Content dimensions={ { width: 320 } } label="My XYZ Dialog">
 					<p sx={ { ml: 3 } }>Hello from default</p>
 				</Content>
 			</Root>
 		</>
 	),
 };
-
-export const VIPMobileMenu: Story = {
-	render: () => (
-		<>
-			<Root>
-				<Trigger>
-					<Button
-						type="button"
-						variant="tertiary"
-						sx={ {
-							display: 'flex',
-							alignItems: 'center',
-							fontSize: 2,
-							gap: 1,
-							mx: 2,
-						} }
-					>
-						Menu
-						<MdMenu
-							size={ 24 }
-							sx={ {
-								mt: ( theme: { space: number[] } ) => `${ theme?.space?.[ 1 ] / 2 }px`,
-							} }
-						/>
-					</Button>
-				</Trigger>
-				<Content label="Dialog X" variant="left" width={ 320 }>
-					<div
-						sx={ {
-							backgroundColor: 'toolbar.background',
-							boxShadow: 'none',
-						} }
-					>
-						<div
-							sx={ {
-								height: 56,
-								width: '100%',
-								p: 4,
-								px: 5,
-							} }
-						>
-							<Logo />
-						</div>
-
-						<div
-							sx={ {
-								overflowX: 'hidden',
-								overflowY: 'auto',
-								height: 'calc(100vh - 56px)',
-								display: 'flex',
-								flex: 1,
-							} }
-						>
-							<Flex sx={ { width: '100%', flexDirection: 'column' } }>
-								<Nav.Primary label="Main Links" orientation="vertical" sx={ { p: 4 } }>
-									<NavItem.MenuInverse href="/apps" active as={ CustomLink }>
-										My Applications
-									</NavItem.MenuInverse>
-
-									<NavItem.MenuInverse href="/orgs" as={ CustomLink }>
-										My Organizations
-									</NavItem.MenuInverse>
-								</Nav.Primary>
-
-								<Box
-									sx={ {
-										alignSelf: 'stretch',
-										backgroundColor: 'layer.1',
-										minHeight: `calc(100vh - 56px)`,
-										pt: 2,
-										px: 4,
-										width: '100%',
-										a: {
-											border: 'none',
-										},
-									} }
-								>
-									<Nav.Menu sx={ { mb: 4 } } label="Nav Menu">
-										<NavItem.Menu
-											href="https://wordpress.com"
-											renderIcon={ size => <BiGridAlt size={ size } /> }
-											as={ CustomLink }
-										>
-											Overview
-										</NavItem.Menu>
-										<NavItem.Menu
-											as={ CustomLink }
-											href="https://random-website.com/"
-											renderIcon={ size => <BiWindows size={ size } /> }
-										>
-											Network Sites
-										</NavItem.Menu>
-										<NavItem.Menu
-											as={ CustomLink }
-											href="https://random-website.com/"
-											renderIcon={ size => <AiOutlineLock size={ size } /> }
-										>
-											Domains & TLS
-										</NavItem.Menu>
-
-										<NavItem.MenuGroup
-											active
-											label="Logs"
-											renderIcon={ size => <BiHistory size={ size } /> }
-										>
-											<NavItem.Menu active as={ CustomLink } href="https://google.com/">
-												Audit
-											</NavItem.Menu>
-											<NavItem.Menu as={ CustomLink } href="https://wpvip.com/">
-												Runtime
-											</NavItem.Menu>
-											<NavItem.Menu as={ CustomLink } href="https://dashboard.wpvip.com/">
-												Slow Query
-											</NavItem.Menu>
-										</NavItem.MenuGroup>
-
-										<NavItem.MenuGroup
-											label="Performance"
-											renderIcon={ size => <BiTachometer size={ size } /> }
-										>
-											<NavItem.Menu as={ CustomLink } href="https://random-website.com/">
-												Metrics
-											</NavItem.Menu>
-											<NavItem.Menu as={ CustomLink } href="https://random-website.com/">
-												Monitor
-											</NavItem.Menu>
-											<NavItem.Menu as={ CustomLink } href="https://random-website.com/">
-												Cache
-											</NavItem.Menu>
-										</NavItem.MenuGroup>
-										<NavItem.Menu
-											as={ CustomLink }
-											href="https://random-website.com/"
-											renderIcon={ size => <BiCodeAlt size={ size } /> }
-										>
-											Code [v]
-										</NavItem.Menu>
-										<NavItem.Menu
-											as={ CustomLink }
-											href="https://random-website.com/"
-											renderIcon={ size => <BiData size={ size } /> }
-										>
-											Database [v]
-										</NavItem.Menu>
-										<NavItem.Menu
-											as={ CustomLink }
-											href="https://random-website.com/"
-											renderIcon={ size => <MdOutlinePhotoLibrary size={ size } /> }
-										>
-											Media [v]
-										</NavItem.Menu>
-										<NavItem.Menu
-											as={ CustomLink }
-											href="https://random-website.com/"
-											renderIcon={ size => <BiBell size={ size } /> }
-										>
-											Notifications
-										</NavItem.Menu>
-										<NavItem.Menu
-											as={ CustomLink }
-											href="https://random-website.com/"
-											renderIcon={ size => <BiBulb size={ size } /> }
-										>
-											Features
-										</NavItem.Menu>
-									</Nav.Menu>
-								</Box>
-							</Flex>
-						</div>
-					</div>
-				</Content>
-			</Root>
-		</>
-	),
-};

package/src/system/Drawer/Drawer.tsx

@@ -4,44 +4,57 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import React, { ReactNode } from 'react';
 
 import { drawerContentStyles, drawerOverlayStyles } from './styles';
-import { DialogCloseDefault } from '../NewDialog/DialogClose';
+import { DialogClose } from '../NewDialog/DialogClose';
 import { DialogTitle } from '../NewDialog/DialogTitle';
 
 export interface DrawerContentProps extends DialogPrimitive.DialogContentProps, DrawerProps {}
 
+export type responsiveProp = number | string | number[] | string[];
+export type responsiveDimensionsProp = {
+	width?: responsiveProp;
+	height?: responsiveProp;
+	minWidth?: responsiveProp;
+	minHeight?: responsiveProp;
+	maxWidth?: responsiveProp;
+	maxHeight?: responsiveProp;
+};
+
+export interface DrawerProps extends DialogPrimitive.DialogProps {
+	children?: ReactNode;
+	trigger?: ReactNode;
+	label?: string;
+	variant?: 'top' | 'right' | 'bottom' | 'left' | 'left-header' | 'right-header';
+	dimensions?: responsiveDimensionsProp;
+	renderClose?: () => JSX.Element | null;
+}
+
 export const Content = React.forwardRef< HTMLDivElement, DrawerContentProps >(
-	(
-		{ children, variant = 'left', label, width, height, ...rest }: DrawerContentProps,
-		forwardedRef
-	) => (
+	( { children, variant = 'left', label, dimensions, renderClose, ...rest }, forwardedRef ) => (
 		<DialogPrimitive.Portal>
 			<DialogPrimitive.Overlay sx={ drawerOverlayStyles( variant ) } />
 			<DialogPrimitive.Content
 				{ ...rest }
-				sx={ drawerContentStyles( variant, width, height ) }
+				sx={ drawerContentStyles( variant, dimensions ) }
 				ref={ forwardedRef }
 			>
 				<DialogTitle title={ label } hidden />
-				<DialogCloseDefault />
+				{ renderClose ? renderClose() : <DialogClose /> }
 				{ children }
 			</DialogPrimitive.Content>
 		</DialogPrimitive.Portal>
 	)
 );
 
-export interface DrawerProps extends DialogPrimitive.DialogProps {
-	children?: ReactNode;
-	trigger?: ReactNode;
-	label?: string;
-	variant?: 'top' | 'right' | 'bottom' | 'left' | 'left-header' | 'right-header';
-	width?: number | string;
-	height?: number | string;
-}
-
 export const Drawer = React.forwardRef< HTMLDivElement, DrawerProps >(
-	( { children, width, height, variant = 'left', trigger, label, ...rest }, forwardedRef ) => (
+	( { children, dimensions, variant = 'left', trigger, label, ...rest }, forwardedRef ) => (
 		<Root trigger={ trigger }>
-			<Content width={ width } variant={ variant } label={ label } ref={ forwardedRef } { ...rest }>
+			<Content
+				dimensions={ dimensions }
+				variant={ variant }
+				label={ label }
+				ref={ forwardedRef }
+				{ ...rest }
+			>
 				{ children }
 			</Content>
 		</Root>

package/src/system/Drawer/styles.ts

@@ -3,7 +3,7 @@
 import { keyframes } from '@emotion/react';
 import { Theme, ThemeUIStyleObject } from 'theme-ui';
 
-import { DrawerProps } from './Drawer';
+import { DrawerProps, responsiveDimensionsProp, responsiveProp } from './Drawer';
 
 interface ThemeProps extends Theme {
 	drawer?: Record< string, Record< string, string > >;
@@ -29,9 +29,15 @@ const slideOut = ( theme: ThemeProps, variant: DrawerProps[ 'variant' ] ) => {
 
 export const drawerContentStyles = (
 	variant: DrawerProps[ 'variant' ],
-	width: string | number = '100%',
-	height: string | number | undefined = undefined
+	dimensions?: responsiveDimensionsProp
 ): ThemeUIStyleObject => {
+	const width: responsiveProp = dimensions?.width || [ '100%', '100%', '80vw' ];
+	const height: responsiveProp = dimensions?.height || '100vh';
+	const minWidth: responsiveProp = dimensions?.minWidth || '16rem';
+	const minHeight: responsiveProp = dimensions?.minHeight || '100vh';
+	const maxWidth: responsiveProp = dimensions?.maxWidth || '22rem';
+	const maxHeight: responsiveProp = dimensions?.maxHeight || '100vh';
+
 	const defaultStyles: ThemeUIStyleObject = {
 		p: 0,
 		m: 0,
@@ -42,6 +48,10 @@ export const drawerContentStyles = (
 		bottom: 0,
 		width,
 		height,
+		minWidth,
+		minHeight,
+		maxWidth,
+		maxHeight,
 
 		variant: `drawer.${ variant }.styles`,
 
@@ -64,7 +74,7 @@ export const drawerContentStyles = (
 			return {
 				...defaultStyles,
 				backgroundColor: 'layer.1',
-				top: [ 56, 56, 56, 64 ],
+				top: 64,
 			};
 		}
 		default: {
@@ -106,7 +116,7 @@ export const drawerOverlayStyles = ( variant: DrawerProps[ 'variant' ] ): ThemeU
 		case 'right-header': {
 			return {
 				...defaultStyles,
-				top: [ 56, 56, 56, 64 ],
+				top: 64,
 			};
 		}
 		default: {

package/src/system/Form/Checkbox/Checkbox.stories.tsx

@@ -61,7 +61,7 @@ export const Default = () => {
 
 	return (
 		<Form.Root>
-			{ ( [ 'primary', 'success', 'brand' ] as CheckboxProps[ 'variant' ][] ).map( variant => (
+			{ ( [ 'primary', 'brand' ] as CheckboxProps[ 'variant' ][] ).map( variant => (
 				<Form.Fieldset key={ variant }>
 					<Form.Legend>Tell me your { variant } prefereces</Form.Legend>
 
@@ -139,7 +139,7 @@ export const Indeterminate = () => {
 
 	return (
 		<Form.Root>
-			{ ( [ 'primary', 'success', 'brand' ] as CheckboxProps[ 'variant' ][] ).map( variant => (
+			{ ( [ 'primary', 'brand' ] as CheckboxProps[ 'variant' ][] ).map( variant => (
 				<Form.Fieldset key={ variant }>
 					<Form.Legend>Indeterminate state { variant }</Form.Legend>
 

package/src/system/Form/Checkbox/Checkbox.tsx

@@ -34,9 +34,6 @@ const Checkbox = ( {
 
 	return (
 		<StyledCheckbox
-			sx={ {
-				opacity: disabled ? 0.4 : 1,
-			} }
 			onCheckedChange={ disabled ? undefined : onCheckedChange }
 			aria-disabled={ disabled }
 			variant={ variant }

package/src/system/Form/Checkbox/styles.ts

@@ -10,51 +10,62 @@ import {
 // The output willl be 16px because of the 1px border.
 const CHECKBOX_SIZE = 14;
 
-export const checkboxStyle = ( variant: string ): ThemeUIStyleObject => ( {
-	all: 'unset',
-	position: 'relative',
-	backgroundColor: inputBaseBackground,
-	...baseControlBorderStyle,
-	...baseControlFocusStyle,
-	width: CHECKBOX_SIZE,
-	height: CHECKBOX_SIZE,
-	borderRadius: 1,
-	display: 'flex',
-	justifyContent: 'center',
-	'&[aria-disabled="true"]': {
-		opacity: 0.7,
-		cursor: 'not-allowed',
-		pointerEvents: 'none',
-	},
-	'&[data-state=checked]': {
-		backgroundColor: variant,
-		color: variant,
-		borderColor: variant,
-	},
-	'& ~ label': {
-		fontWeight: 'regular',
-		color: inputBaseText,
-		m: 0,
-		ml: 2,
-	},
-	svg: {
-		position: 'absolute',
-		top: 0,
-		left: 0,
-	},
-} );
+export const checkboxStyle = ( variant: string ): ThemeUIStyleObject => {
+	const variantColor = variant === 'disabled' ? 'input.background.disabled' : variant;
 
-export const checkboxIndicatorStyle = ( variant: string ): ThemeUIStyleObject => ( {
-	width: 14,
-	height: 14,
-	backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='1 1 14 14' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.9259 4.9995L6.15142 12.4008L2.92603 9.33023L4.2591 7.92994L6.15142 9.73143L12.5928 3.59921L13.9259 4.9995Z' fill='white'/%3E%3C/svg%3E")`,
+	return {
+		all: 'unset',
+		position: 'relative',
+		backgroundColor: inputBaseBackground,
+		...baseControlBorderStyle,
+		...baseControlFocusStyle,
+		width: CHECKBOX_SIZE,
+		height: CHECKBOX_SIZE,
+		borderRadius: 0,
+		display: 'flex',
+		justifyContent: 'center',
+		'&[aria-disabled="true"]': {
+			opacity: 0.7,
+			cursor: 'not-allowed',
+			pointerEvents: 'none',
+		},
+		'&[data-state=checked], &[data-state=indeterminate]': {
+			backgroundColor: variantColor,
+			color: variantColor,
+			borderColor: variantColor,
+		},
+		'& ~ label': {
+			fontWeight: 'regular',
+			color: inputBaseText,
+			m: 0,
+			ml: 2,
+		},
+		svg: {
+			position: 'absolute',
+			fill: 'currentColor',
+			top: 0,
+			left: 0,
+		},
+	};
+};
 
-	'&[data-state=indeterminate]': {
-		marginTop: '6px',
-		backgroundImage: 'none',
-		backgroundColor: variant,
-		position: 'absolute',
-		width: 10,
-		height: 2,
-	},
-} );
+export const checkboxIndicatorStyle = ( variant: string ): ThemeUIStyleObject => {
+	const backgroundColor = variant === 'disabled' ? 'icon.inverse-disabled' : 'icon.inverse';
+
+	return {
+		width: 14,
+		height: 14,
+		backgroundColor,
+		maskImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='1 1 14 14' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.9259 4.9995L6.15142 12.4008L2.92603 9.33023L4.2591 7.92994L6.15142 9.73143L12.5928 3.59921L13.9259 4.9995Z' fill='currentcolor'/%3E%3C/svg%3E")`,
+
+		'&[data-state=indeterminate]': {
+			maskImage: 'none',
+			backgroundColor,
+			position: 'absolute',
+			top: '50%',
+			width: 8,
+			height: 2,
+			marginTop: '-1px',
+		},
+	};
+};

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

@@ -62,7 +62,7 @@ export const Default = () => {
 
 	return (
 		<>
-			{ ( [ 'primary', 'success', 'brand' ] as RadioProps[ 'variant' ][] ).map( variant => (
+			{ ( [ 'primary', 'brand' ] as RadioProps[ 'variant' ][] ).map( variant => (
 				<Box key={ variant }>
 					<Heading as="h2" sx={ { textTransform: 'capitalize' } }>
 						{ variant }

package/src/system/Form/Toggle.stories.tsx

@@ -0,0 +1,122 @@
+/** @jsxImportSource theme-ui */
+import { StoryObj } from '@storybook/react';
+
+import { Toggle, Label } from '..';
+export default {
+	title: 'Toggle',
+	component: Toggle,
+	argTypes: {
+		checked: {
+			control: {
+				type: 'boolean',
+			},
+		},
+	},
+	parameters: {
+		docs: {
+			description: {
+				component: `
+The Toggle component is two-state switch that can be toggled on or off. It is used to activate or deactivate a feature.
+
+## Guidance
+
+### When to use the Toggle component
+
+- Use the Toggle component to allow users to switch between two states, such as on/off, true/false, or yes/no.
+
+### When to consider something else
+
+- If you need to select from more than two states, use a [Radio](/docs/radio--docs), or a [Select](/docs/form-select--docs) component instead.
+
+## Accessibility Considerations guidance
+
+- The Toggle component is based on the Radix Toggle primitive, so it contains all the accessibility features from the primitive.
+
+## Using the component
+
+- Available variants: Primary, Success, Disabled.
+
+## Component Properties
+`,
+			},
+		},
+	},
+};
+
+type Story = StoryObj< typeof Toggle >;
+
+export const Default: Story = {
+	render: args => (
+		<form>
+			<Toggle checked={ args.checked } defaultChecked aria-label="Feature flag" />
+
+			<br />
+			<br />
+
+			<Toggle checked={ args.checked } defaultChecked={ false } aria-label="Feature flag 2" />
+
+			<br />
+			<br />
+
+			<Toggle aria-label="Feature Disabled" disabled defaultChecked={ false } />
+		</form>
+	),
+};
+
+export const WithLabel: Story = {
+	render: args => (
+		<form>
+			<Label htmlFor="custom-label-input">Custom Label here</Label>
+
+			<Toggle
+				id="custom-label-input"
+				defaultChecked
+				checked={ args.checked }
+				aria-label="Feature flag"
+			/>
+		</form>
+	),
+};
+
+export const CustomStyling: Story = {
+	render: args => (
+		<form>
+			<Label htmlFor="custom-label-input">
+				Custom Styling.{ ' ' }
+				<strong>We currently only recommend using Primary, Disabled, and Success variants.</strong>
+			</Label>
+
+			<div>
+				<Toggle
+					id="custom-label-input"
+					defaultChecked
+					checked={ args.checked }
+					aria-label="Feature flag"
+					variant="success"
+				/>{ ' ' }
+				<h2>Not recommended</h2>
+				<Toggle
+					id="custom-label-input-error"
+					defaultChecked
+					checked={ args.checked }
+					aria-label="Error flag"
+					variant="error"
+				/>{ ' ' }
+				<Toggle
+					id="custom-label-input-warning"
+					defaultChecked
+					checked={ args.checked }
+					aria-label="Warning flag"
+					variant="warning"
+				/>{ ' ' }
+				<Toggle
+					id="custom-label-input-info"
+					defaultChecked
+					checked={ args.checked }
+					aria-label="info flag"
+					variant="info"
+				/>
+			</div>
+		</form>
+	),
+};

package/src/system/Form/{Toggle.test.js → Toggle.test.tsx}

@@ -18,6 +18,6 @@ describe( '<Toggle />', () => {
 		expect( screen.getByRole( 'switch' ) ).toBeInTheDocument();
 
 		// Check for accessibility issues
-		await expect( await axe( container ) ).toHaveNoViolations();
+		expect( await axe( container ) ).toHaveNoViolations();
 	} );
 } );