@automattic/vip-design-system 2.1.0 → 2.3.0

package/src/system/Form/Toggle.tsx

@@ -0,0 +1,77 @@
+/* eslint-disable max-len */
+/** @jsxImportSource theme-ui */
+
+import * as Switch from '@radix-ui/react-switch';
+import classNames, { Argument } from 'classnames';
+import { Theme } from 'theme-ui';
+
+// Documentation for Radix Switch component
+// https://www.radix-ui.com/docs/primitives/components/switch
+
+interface ThemeProps extends Theme {
+	outline?: Record< string, string >;
+}
+
+export type ToggleProps = Switch.SwitchProps & {
+	name?: string;
+	className?: Argument;
+	onChange?: () => void;
+	variant?: string;
+};
+
+export const Toggle = ( {
+	name = 'toggle',
+	onChange,
+	className,
+	variant = 'primary',
+	...rest
+}: ToggleProps ) => (
+	<Switch.Root
+		className={ classNames( 'vip-toggle-component', className ) }
+		sx={ {
+			all: 'unset',
+			cursor: 'pointer',
+			position: 'relative',
+			width: 40,
+			height: 20,
+			borderRadius: 5,
+			backgroundColor: 'muted',
+			backgroundRepeat: 'no-repeat',
+			backgroundPosition: 'right 2px top 2px',
+			backgroundImage: `url(
+            'data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.53846 3L3 4.53846L6.46156 8.00001L3.00003 11.4615L4.53848 13L8.00001 9.53847L11.4615 13L13 11.4615L9.53847 8.00001L13 4.53849L11.4615 3.00003L8.00001 6.46156L4.53846 3Z" fill="white"/></svg>')`,
+			WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+
+			'&:focus-visible': ( theme: ThemeProps ) => theme.outline,
+			'&[disabled]': {
+				opacity: 0.7,
+			},
+			'&[data-state="checked"]': {
+				backgroundColor: variant,
+				backgroundPosition: 'left 2px top 2px',
+				backgroundImage: `url(
+                'data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" 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>')`,
+			},
+		} }
+		name={ name }
+		onCheckedChange={ onChange }
+		{ ...rest }
+	>
+		<Switch.Thumb
+			sx={ {
+				display: 'block',
+				width: 16,
+				height: 16,
+				backgroundColor: 'white',
+				borderRadius: '100%',
+				boxShadow: 'rgb(0 0 0 / 5%) 0px 1px 5px, rgb(0 0 0 / 15%) 0px 1px 1px',
+				transition: 'transform 100ms',
+				transform: 'translateX(2px)',
+				willChange: 'transform',
+				'&[data-state="checked"]': { transform: 'translateX(22px)' },
+			} }
+		/>
+	</Switch.Root>
+);
+
+Toggle.displayName = 'Toggle';

package/src/system/Link/Link.stories.tsx

@@ -2,7 +2,9 @@
  * External dependencies
  */
 import { Link } from '..';
+import { Flex } from '../Flex/Flex';
 
+import type { LinkProps } from './Link';
 import type { StoryObj } from '@storybook/react';
 
 /**
@@ -22,3 +24,22 @@ export const Default: Story = {
 		href: '#!',
 	},
 };
+
+const buttonTypes: LinkProps[ 'variant' ][] = [
+	'button-primary',
+	'button-secondary',
+	'button-tertiary',
+	'button-danger',
+	'button-display',
+	'button-ghost',
+];
+
+export const ButtonVariants = () => (
+	<Flex sx={ { gap: 2 } }>
+		{ buttonTypes.map( ( variant, index ) => (
+			<Link key={ index } href="#!" variant={ variant }>
+				Hello
+			</Link>
+		) ) }
+	</Flex>
+);

package/src/system/Link/Link.tsx

@@ -15,33 +15,26 @@ interface LinkTheme extends Theme {
 }
 
 export interface LinkProps extends ThemeLinkProps {
-	active?: boolean;
+	variant?:
+		| 'primary'
+		| 'button-primary'
+		| 'button-secondary'
+		| 'button-tertiary'
+		| 'button-ghost'
+		| 'button-display'
+		| 'button-danger';
 }
 
 export const defaultLinkComponentStyle: ThemeUIStyleObject = {
-	color: 'link',
-	textDecorationThickness: '0.1em',
-	textUnderlineOffset: '0.1em',
-	'&:visited': {
-		color: 'links.visited',
-	},
-	'&:active': {
-		color: 'links.active',
-	},
-	'&:hover, &:focus': {
-		color: 'links.hover',
-		textDecorationLine: 'underline',
-		textDecorationThickness: '2px',
-	},
 	'&:focus-visible': ( theme: LinkTheme ) => theme.outline,
 };
 
 export const Link = forwardRef< HTMLAnchorElement, LinkProps >(
-	( { active = false, sx, ...props }: LinkProps, ref: Ref< HTMLAnchorElement > ) => (
+	( { variant = 'primary', sx, ...props }: LinkProps, ref: Ref< HTMLAnchorElement > ) => (
 		<ThemeLink
+			variant={ variant }
 			sx={ {
 				...defaultLinkComponentStyle,
-				color: active ? 'links.active' : 'link',
 				...sx,
 			} }
 			ref={ ref }

package/src/system/MobileMenu/MobileMenu.stories.tsx

@@ -0,0 +1,171 @@
+/** @jsxImportSource theme-ui */
+
+import { AiOutlineLock } from 'react-icons/ai';
+import {
+	BiBell,
+	BiBulb,
+	BiCodeAlt,
+	BiData,
+	BiGridAlt,
+	BiHistory,
+	BiTachometer,
+	BiWindows,
+} from 'react-icons/bi';
+import { MdOutlinePhotoLibrary } from 'react-icons/md';
+
+import { MobileMenu, MobileMenuTrigger, MobileMenuWrapper } from './MobileMenu';
+import { Nav, NavItem } from '..';
+import { CustomLink } from '../utils/stories/CustomLink';
+
+import type { StoryObj } from '@storybook/react';
+
+export default {
+	title: 'Navigation/MobileMenu',
+	component: MobileMenu,
+	parameters: {
+		docs: {
+			description: {
+				component: `
+The MobileMenu component is a navigation component that is hidden by default and can be toggled open and closed. It opens a panel that can contain any content. The base of this component is a Drawer.
+
+## Guidance
+
+### When to use the Drawer component
+
+- Use the MobileMenu component to displaying a drawer with mobile content.
+
+### When to consider something else
+
+- If you need something that is not a menu on a mobile view, consider using another component.
+
+## Accessibility Considerations guidance
+
+- The MobileMenu is based on the Drawer component and inherits all of its accessibility considerations.
+
+## Using the component
+
+- Look at the examples below to see how the MobileMenu component is used.
+- You can use the \`toolbarItems\` prop to pass the content that will be in the header
+- You can pass \`display\` prop to the MobileMenuTrigger to control the display of the trigger. The array must match the ThemeUI breakpoints.
+
+## Component Properties
+`,
+			},
+		},
+	},
+};
+
+type Story = StoryObj< typeof MobileMenu >;
+
+export const MobileMenuExample = () => (
+	<MobileMenuWrapper>
+		<MobileMenuTrigger label="Menu" variant="primary" display={ [ 'flex', 'flex', 'flex' ] } />
+		<MobileMenu
+			toolbarItems={
+				<>
+					<NavItem.MenuInverse href="/apps" active as={ CustomLink }>
+						My Applications
+					</NavItem.MenuInverse>
+
+					<NavItem.MenuInverse href="/orgs" as={ CustomLink }>
+						My Organizations
+					</NavItem.MenuInverse>
+				</>
+			}
+		>
+			<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 as={ CustomLink } href="https://google.com/">
+						Audit
+					</NavItem.Menu>
+					<NavItem.Menu active 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>
+		</MobileMenu>
+	</MobileMenuWrapper>
+);
+
+export const Default: Story = {
+	render: () => (
+		<>
+			<MobileMenuExample />
+		</>
+	),
+};

package/src/system/MobileMenu/MobileMenu.test.tsx

@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-nocheck
+/** @jsxImportSource theme-ui */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'jest-axe';
+import { ThemeUIProvider } from 'theme-ui';
+
+import { MobileMenuExample } from './MobileMenu.stories';
+import { theme } from '../';
+
+const renderWithTheme = children =>
+	render( <ThemeUIProvider theme={ theme }>{ children }</ThemeUIProvider> );
+
+const renderComponent = () => renderWithTheme( <MobileMenuExample /> );
+
+function getMenuTrigger() {
+	return screen.getByRole( 'button', { name: 'Menu' } );
+}
+
+describe( '<MobileMenu />', () => {
+	it( 'renders the MobileMenu trigger', async () => {
+		const { container } = renderComponent();
+
+		// Should find the trigger
+		expect( getMenuTrigger() ).toBeInTheDocument();
+
+		expect( getMenuTrigger() ).toHaveAttribute( 'data-state', 'closed' );
+
+		// Check for accessibility issues
+		expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	it( 'opens MobileMenu and check for items', async () => {
+		const user = userEvent.setup();
+
+		const { container } = renderComponent();
+
+		await user.click( getMenuTrigger() );
+
+		// Should find the open content
+		expect( screen.getByText( 'My Applications' ) ).toBeVisible(); // First menu
+		expect( screen.getByText( 'My Organizations' ) ).toBeVisible();
+		expect( screen.getByText( 'Performance' ) ).toBeVisible();
+		expect( screen.getByText( 'Features' ) ).toBeVisible(); // Last Menu
+
+		// Check for accessibility issues
+		expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/MobileMenu/MobileMenu.tsx

@@ -0,0 +1,116 @@
+/** @jsxImportSource theme-ui */
+
+import React, { forwardRef } from 'react';
+import { BiMenu } from 'react-icons/bi';
+
+import * as Drawer from '../Drawer/Drawer';
+import { DialogCloseDefault } from '../NewDialog/DialogClose';
+import { Logo } from '../Toolbar/Logo';
+import { Button, Flex, Nav, Box } from '../index';
+
+export interface MobileMenuProps {
+	children: React.ReactNode;
+	toolbarItems?: React.ReactNode;
+}
+
+export const MobileMenu = forwardRef< HTMLDivElement, MobileMenuProps >(
+	( { children, toolbarItems }, ref ) => (
+		<Drawer.Content
+			variant="left"
+			label="Main Navigation Items"
+			ref={ ref }
+			renderClose={ () => <DialogCloseDefault variant="inverse" /> }
+		>
+			<Box
+				sx={ {
+					backgroundColor: 'toolbar.background',
+					boxShadow: 'none',
+					gap: 4,
+				} }
+			>
+				<Flex
+					sx={ {
+						flexWrap: 'wrap',
+						height: 64,
+						width: '100%',
+						py: 0,
+						px: 5,
+						gap: 7,
+						alignItems: 'center',
+					} }
+				>
+					<Logo />
+				</Flex>
+
+				<div
+					sx={ {
+						overflowX: 'hidden',
+						overflowY: 'auto',
+						height: 'calc(100vh - 64px)',
+						display: 'flex',
+						flex: 1,
+					} }
+				>
+					<Flex sx={ { width: '100%', flexDirection: 'column' } }>
+						{ toolbarItems && (
+							<Nav.Primary label="Main Links" orientation="vertical">
+								{ toolbarItems }
+							</Nav.Primary>
+						) }
+
+						<Box
+							sx={ {
+								alignSelf: 'stretch',
+								backgroundColor: 'layer.1',
+								minHeight: `calc(100vh - 64px)`,
+								gap: 4,
+								width: '100%',
+								a: {
+									border: 'none',
+								},
+							} }
+						>
+							{ children }
+						</Box>
+					</Flex>
+				</div>
+			</Box>
+		</Drawer.Content>
+	)
+);
+
+export const MobileMenuWrapper = ( { children }: MobileMenuProps ) => (
+	<Drawer.Root>{ children }</Drawer.Root>
+);
+
+type MobileMenuTriggerDisplayProp = 'none' | 'flex';
+type MobileMenuTriggerProps = {
+	label: string;
+	variant?: 'primary' | 'inverse';
+	display?: MobileMenuTriggerDisplayProp[];
+};
+
+export const MobileMenuTrigger = ( {
+	label = 'Menu',
+	variant = 'primary',
+	display = [ 'none', 'flex', 'flex', 'none' ],
+}: MobileMenuTriggerProps ) => (
+	<Drawer.Trigger>
+		<Button
+			type="button"
+			variant="tertiary"
+			sx={ {
+				display,
+				alignItems: 'center',
+				color:
+					variant === 'inverse' ? 'button.primary.label.default' : 'button.tertiary.label.default',
+				width: 38,
+				height: 38,
+				p: 0,
+			} }
+			aria-label={ label }
+		>
+			<BiMenu size={ 16 } role="presentation" />
+		</Button>
+	</Drawer.Trigger>
+);

package/src/system/Nav/NavItem.tsx

@@ -6,7 +6,7 @@ import { Ref, forwardRef } from 'react';
 import { Theme, ThemeUIStyleObject } from 'theme-ui';
 
 import { NavItemRenderIconProp, NavProps, NavVariant, VIP_NAV } from './Nav';
-import { ItemGroupMenu } from './NavItemGroup';
+import { IconContainer, ItemGroupMenu } from './NavItemGroup';
 import { navItemLinkStyles, navItemStyles } from './styles';
 
 export const NAV_ITEM_ICON_SIZE = 20;
@@ -90,7 +90,7 @@ const NavLink = forwardRef< HTMLAnchorElement, NavItemProps >(
 		{
 			children,
 			as: LinkComponent = NavRawLink,
-			renderIcon = () => null,
+			renderIcon,
 			href,
 			active,
 			disabled,
@@ -115,7 +115,7 @@ const NavLink = forwardRef< HTMLAnchorElement, NavItemProps >(
 			{ ...rest }
 		>
 			<LinkComponent>
-				{ renderIcon( NAV_ITEM_ICON_SIZE ) }
+				{ renderIcon ? <IconContainer>{ renderIcon( NAV_ITEM_ICON_SIZE ) }</IconContainer> : null }
 				{ children }
 			</LinkComponent>
 		</NavigationMenu.Link>

package/src/system/Nav/NavItemGroup.tsx

@@ -28,7 +28,7 @@ const NavItemGroupBase = forwardRef< HTMLLIElement, NavItemGroupProps >(
 			orientation,
 			className,
 			active,
-			renderIcon = () => null,
+			renderIcon,
 			children,
 			sx,
 		}: NavItemGroupProps,
@@ -59,7 +59,9 @@ const NavItemGroupBase = forwardRef< HTMLLIElement, NavItemGroupProps >(
 								...navItemGroupTriggerStyles,
 							} }
 						>
-							{ renderIcon( NAV_ITEM_ICON_SIZE ) }
+							{ renderIcon ? (
+								<IconContainer>{ renderIcon( NAV_ITEM_ICON_SIZE ) }</IconContainer>
+							) : null }
 							{ label }
 
 							<BiChevronDown
@@ -79,6 +81,20 @@ const NavItemGroupBase = forwardRef< HTMLLIElement, NavItemGroupProps >(
 	}
 );
 
+export const IconContainer = ( { children }: { children: React.ReactNode } ) => (
+	<div
+		sx={ {
+			width: 28,
+			height: 30,
+			alignItems: 'center',
+			justifyContent: 'center',
+			display: 'inline-flex',
+		} }
+	>
+		{ children }
+	</div>
+);
+
 export const ItemGroupMenu = forwardRef< HTMLLIElement, NavItemGroupProps >(
 	( props: NavItemGroupProps, ref: Ref< HTMLLIElement > ) => (
 		<NavItemGroupBase { ...props } orientation="vertical" variant="menu" ref={ ref } />

package/src/system/Nav/styles/variants/menu.ts

@@ -14,7 +14,7 @@ export const menuItemStyles = ( orientation: NavProps[ 'orientation' ] ): ThemeU
 	border: 'none',
 	height: 38,
 	width: '100%',
-	mb: 1,
+	justifyContent: 'space-between',
 } );
 
 // Menu Inverse Item Style <li>
@@ -31,7 +31,7 @@ export const menuInverseItemStyles = (
 // Menu Item Link <a>
 
 const visitedLink = '&:visited';
-const activeAfter = '&[data-active]::after';
+const activeAfter = '&[data-active]::before';
 const active = '&[data-active]';
 const focusNotActiveHoverNotActive = '&:focus:not(&[data-active]), &:hover:not(&[data-active])';
 const notHover = ':not(&:hover)';
@@ -45,15 +45,19 @@ export const menuItemLinkStyles: MixedStyleProp = {
 	borderRadius: 1,
 	color: 'text',
 	display: 'inline-flex',
-	fontSize: 'inherit',
+	fontSize: '0.875rem',
 	fontWeight: 'body',
-	gap: 3,
 	height: 38,
 	mx: 0,
 	mb: 0,
+	pt: 3,
+	pr: 4,
+	pb: 3,
 	pl: 5,
-	pr: 3,
-	py: 2,
+	':has(div > svg)': {
+		pl: 4,
+	},
+	gap: 1,
 	textDecoration: 'none',
 	width: '100%',
 	[ visitedLink ]: {
@@ -68,11 +72,11 @@ export const menuItemLinkStyles: MixedStyleProp = {
 		borderRadius: '90px',
 		height: 26,
 		top: '6px',
-		left: 3,
+		left: 2,
 	},
 	[ active ]: {
 		color: 'heading',
-		backgroundColor: 'layer.2',
+		backgroundColor: 'backgrounds.primary',
 		textDecoration: 'none',
 		cursor: 'default',
 		svg: {
@@ -93,6 +97,8 @@ export const menuItemLinkStyles: MixedStyleProp = {
 	[ svgIcon ]: {
 		color: 'icon.secondary',
 		fill: 'icon.secondary',
+		width: 20,
+		height: 20,
 		display: 'block',
 	},
 };
@@ -114,7 +120,7 @@ export const menuInverseItemLinkStyles = {
 			? {
 					...menuItemLinkStyles[ active ],
 					color: 'toolbar.text.default',
-					backgroundColor: 'tool`bar.background',
+					backgroundColor: 'toolbar.background',
 			  }
 			: {},
 	[ focusNotActiveHoverNotActive ]:

package/src/system/Nav/styles/variants/menugroup.ts

@@ -8,8 +8,12 @@ export const navItemGroupStyles = (
 	variant?: NavVariant
 ): ThemeUIStyleObject => {
 	const defaultStyle = {
-		'&:last-of-type': {
+		li: {
+			mb: 1,
+		},
+		'li:last-of-type': {
 			mr: orientation === 'horizontal' ? 0 : undefined,
+			mb: orientation === 'vertical' ? 0 : undefined,
 		},
 	};
 
@@ -29,7 +33,6 @@ export const navItemGroupStyles = (
 };
 
 export const navItemGroupTriggerStyles: ThemeUIStyleObject = {
-	mb: 1,
 	'svg[data-arrow-indicator]': {
 		position: 'absolute',
 		right: 3,
@@ -53,8 +56,9 @@ export const navItemGroupTriggerStyles: ThemeUIStyleObject = {
 export const navItemGroupContentUlStyles: ThemeUIStyleObject = {
 	m: 0,
 	p: 0,
-	pl: 3,
+	pl: 5,
 	listStyle: 'none',
+	pt: 1,
 };
 
 const slideDown = keyframes( {

package/src/system/Nav/styles/variants/toolbar.ts

@@ -8,6 +8,7 @@ export const toolbarRootStyles: ThemeUIStyleObject = {
 	display: [ 'none', 'none', 'flex' ],
 	height: '100%',
 	ml: 0,
+	gap: 6,
 	width: 'max-content',
 };
 
@@ -28,8 +29,6 @@ export const defaultToolbarLinkStyle: ThemeUIStyleObject = {
 export const toolbarItemLinkStyles: ThemeUIStyleObject = {
 	...defaultItemLinkStyles,
 	position: 'relative',
-	ml: 3,
-	mr: 3,
 	height: '100%',
 	...defaultToolbarLinkStyle,
 

package/src/system/Nav/styles.ts

@@ -136,6 +136,7 @@ export const navMenuListStyles = ( orientation: NavProps[ 'orientation' ] ): The
 		justifyContent: 'flex-start',
 		m: 0,
 		height: '100%',
+		gap: 1,
 		px: 0,
 		flexDirection: orientation === 'horizontal' ? 'row' : 'column',
 	};