@automattic/vip-design-system 2.1.0 → 2.3.0

package/build/system/index.d.ts

@@ -21,6 +21,9 @@ import { DialogDivider } from './Dialog';
 import { DialogContent } from './Dialog';
 import { DialogTrigger } from './Dialog';
 import { ConfirmationDialog } from './ConfirmationDialog';
+import { MobileMenu } from './MobileMenu/MobileMenu';
+import { MobileMenuTrigger } from './MobileMenu/MobileMenu';
+import { MobileMenuWrapper } from './MobileMenu/MobileMenu';
 import { NewConfirmationDialog } from './NewConfirmationDialog';
 import { Grid } from './Grid';
 import { Flex } from './Flex';
@@ -53,4 +56,4 @@ import { Validation } from './Form';
 import { Wizard } from './Wizard';
 import { WizardStep } from './Wizard';
 import theme from './theme';
-export { Accordion, Avatar, Badge, Box, Breadcrumbs, Button, ButtonSubmit, ButtonVariant, Card, Checkbox, Code, Dialog, NewDialog, Form, Drawer, Dropdown, DialogButton, DialogMenu, DialogMenuItem, DialogDivider, DialogContent, DialogTrigger, ConfirmationDialog, NewConfirmationDialog, Grid, Flex, Notice, OptionRow, Heading, Input, Label, Spinner, Table, TableRow, TableCell, Tooltip, Link, Radio, RadioBoxGroup, Textarea, Progress, Text, Tabs, Nav, NavItem, TabsTrigger, TabsContent, TabsList, Toggle, ToggleRow, Toolbar, Validation, Wizard, WizardStep, theme };
+export { Accordion, Avatar, Badge, Box, Breadcrumbs, Button, ButtonSubmit, ButtonVariant, Card, Checkbox, Code, Dialog, NewDialog, Form, Drawer, Dropdown, DialogButton, DialogMenu, DialogMenuItem, DialogDivider, DialogContent, DialogTrigger, ConfirmationDialog, MobileMenu, MobileMenuTrigger, MobileMenuWrapper, NewConfirmationDialog, Grid, Flex, Notice, OptionRow, Heading, Input, Label, Spinner, Table, TableRow, TableCell, Tooltip, Link, Radio, RadioBoxGroup, Textarea, Progress, Text, Tabs, Nav, NavItem, TabsTrigger, TabsContent, TabsList, Toggle, ToggleRow, Toolbar, Validation, Wizard, WizardStep, theme };

package/build/system/index.js

@@ -36,6 +36,7 @@ import {
 import { Grid } from './Grid';
 import { Heading } from './Heading';
 import { Link } from './Link';
+import { MobileMenuWrapper, MobileMenuTrigger, MobileMenu } from './MobileMenu/MobileMenu';
 import { Nav } from './Nav/Nav';
 import { NavItem } from './Nav/NavItem';
 import { NewConfirmationDialog } from './NewConfirmationDialog';
@@ -77,6 +78,9 @@ export {
 	DialogContent,
 	DialogTrigger,
 	ConfirmationDialog,
+	MobileMenu,
+	MobileMenuTrigger,
+	MobileMenuWrapper,
 	NewConfirmationDialog,
 	Grid,
 	Flex,

package/build/system/theme/index.d.ts

@@ -64,6 +64,10 @@ declare namespace _default {
             color: string;
             bg: string;
             border: string;
+            py: number;
+            px: number;
+            minHeight: string;
+            height: string;
             cursor: string;
             fontWeight: string;
             boxShadow: string;
@@ -72,6 +76,14 @@ declare namespace _default {
                 backgroundColor: string;
                 color: string;
             };
+            verticalAlign: string;
+            display: string;
+            alignItems: string;
+            justifyContent: string;
+            textDecoration: string;
+            '&:hover': {
+                textDecoration: string;
+            };
         };
         export { primary_1 as primary };
         let secondary_1: {
@@ -162,26 +174,45 @@ declare namespace _default {
             };
         };
     }
-    export namespace links {
-        let dark: {
+    export let links: {
+        primary: {
             color: string;
-            '&:hover': {
+            '&:visited': {
                 color: string;
             };
-        };
-        let hover: {
-            display: string;
-            color: string;
-            py: number;
-            px: number;
-            my: number;
-            mx: number;
-            borderRadius: number;
             '&:hover': {
-                backgroundColor: string;
+                color: string;
+            };
+            '&:active': {
+                color: string;
+            };
+            textDecorationThickness: string;
+            textUnderlineOffset: string;
+            '&:hover, &:focus': {
+                color: string;
+                textDecorationLine: string;
+                textDecorationThickness: string;
             };
         };
-    }
+        'button-primary': {
+            variant: string;
+        };
+        'button-danger': {
+            variant: string;
+        };
+        'button-display': {
+            variant: string;
+        };
+        'button-ghost': {
+            variant: string;
+        };
+        'button-secondary': {
+            variant: string;
+        };
+        'button-tertiary': {
+            variant: string;
+        };
+    };
     let text_1: {};
     export { text_1 as text };
     export namespace dialog {
@@ -277,32 +308,36 @@ declare namespace _default {
         };
     };
     export namespace styles {
-        let root: {
-            fontFamily: string;
-            lineHeight: string;
-            fontWeight: string;
-            fontSize: number;
-            color: string;
-            backgroundColor: string;
-            '-webkit-font-smoothing': string;
-            '-moz-osx-font-smoothing': string;
-            a: {
+        namespace root {
+            export let fontFamily: string;
+            export let lineHeight: string;
+            export let fontWeight: string;
+            let color_1: string;
+            export { color_1 as color };
+            let backgroundColor_5: string;
+            export { backgroundColor_5 as backgroundColor };
+            export let fontSmoothing: string;
+            export let a: {
                 '&:hover': {
                     textDecorationLine: string;
                     textDecorationThickness: string;
                 };
             };
-            svg: {
-                fill: string;
-                display: string;
-            };
-            pre: {
-                fontFamily: string;
-            };
-            p: {
-                color: string;
-            };
-        };
+            export namespace svg {
+                export let fill: string;
+                let display_1: string;
+                export { display_1 as display };
+            }
+            export namespace pre {
+                let fontFamily_1: string;
+                export { fontFamily_1 as fontFamily };
+            }
+            export namespace p_2 {
+                let color_2: string;
+                export { color_2 as color };
+            }
+            export { p_2 as p };
+        }
     }
 }
 export default _default;

package/build/system/theme/index.js

@@ -271,11 +271,14 @@ export default {
 
 	buttons: {
 		primary: {
-			// you can reference other values defined in the theme
 			fontFamily: 'body',
 			color: 'button.primary.label.default',
 			bg: 'button.primary.background.default',
 			border: '1px solid transparent',
+			py: 0,
+			px: 5,
+			minHeight: '38px',
+			height: '100%',
 			cursor: 'pointer',
 			fontWeight: 'medium',
 			boxShadow: 'none',
@@ -284,6 +287,14 @@ export default {
 				backgroundColor: 'button.primary.background.hover',
 				color: 'button.primary.label.hover',
 			},
+			verticalAlign: 'middle',
+			display: 'inline-flex',
+			alignItems: 'center',
+			justifyContent: 'center',
+			textDecoration: 'none',
+			'&:hover': {
+				textDecoration: 'none',
+			},
 		},
 
 		secondary: {
@@ -387,23 +398,43 @@ export default {
 	},
 
 	links: {
-		dark: {
-			color: 'modes.dark.muted',
-			'&:hover': { color: 'modes.dark.heading' },
-		},
-
-		hover: {
-			display: 'block',
-			color: 'inherit',
-			py: 1,
-			px: 2,
-			my: -1,
-			mx: -2,
-			borderRadius: 2,
+		primary: {
+			color: 'link',
+			'&:visited': {
+				color: 'links.visited',
+			},
 			'&:hover': {
-				backgroundColor: 'hover',
+				color: 'hover',
+			},
+			'&:active': {
+				color: 'links.active',
+			},
+			textDecorationThickness: '0.125rem',
+			textUnderlineOffset: '0.125rem',
+			'&:hover, &:focus': {
+				color: 'links.hover',
+				textDecorationLine: 'underline',
+				textDecorationThickness: '0.125rem',
 			},
 		},
+		'button-primary': {
+			variant: 'buttons.primary',
+		},
+		'button-danger': {
+			variant: 'buttons.danger',
+		},
+		'button-display': {
+			variant: 'buttons.display',
+		},
+		'button-ghost': {
+			variant: 'buttons.ghost',
+		},
+		'button-secondary': {
+			variant: 'buttons.secondary',
+		},
+		'button-tertiary': {
+			variant: 'buttons.tertiary',
+		},
 	},
 
 	text: getHeadingStyles(),
@@ -492,11 +523,9 @@ export default {
 			fontFamily: 'body',
 			lineHeight: 'body',
 			fontWeight: 'body',
-			fontSize: 2,
 			color: 'text',
 			backgroundColor: 'backgrounds.primary',
-			'-webkit-font-smoothing': 'antialiased',
-			'-moz-osx-font-smoothing': 'grayscale',
+			fontSmoothing: 'antialiased',
 			a: {
 				'&:hover': {
 					textDecorationLine: 'underline',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/vip-design-system",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "main": "build/system/index.js",
   "scripts": {
     "build-storybook": "storybook build",
@@ -93,6 +93,7 @@
     "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "6.1.3",
     "@testing-library/react": "14.0.0",
+    "@testing-library/user-event": "^14.4.3",
     "@tsconfig/node18": "18.2.2",
     "@types/jest": "29.5.5",
     "@types/jest-axe": "3.5.6",

package/src/system/Accordion/Accordion.test.tsx

@@ -1,12 +1,11 @@
-// TODO: Fix this
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-nocheck
 /** @jsxImportSource theme-ui */
-
 /**
  * External dependencies
  */
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { axe } from 'jest-axe';
 import { ThemeUIProvider } from 'theme-ui';
 
@@ -48,15 +47,23 @@ describe( '<Accordion />', () => {
 	} );
 
 	it( 'should open the content when clicking on its trigger', async () => {
+		const user = userEvent.setup();
+
 		const { container } = renderComponent();
 
-		fireEvent.click( screen.getByRole( 'button', { name: 'trigger two' } ) );
+		await user.click( screen.getByRole( 'button', { name: 'trigger two', expanded: false } ) );
 
-		// Should find the open content
-		expect( screen.queryByText( 'content one' ) ).toBeNull();
+		expect(
+			screen.getByRole( 'button', { name: 'trigger one', expanded: false } )
+		).toHaveAttribute( 'data-state', 'closed' );
+		expect( screen.queryByText( 'content one' ) ).not.toBeInTheDocument();
 
-		// Should not find the closed content
-		expect( screen.queryByText( 'content two' ) ).toBeInTheDocument();
+		// Should find the open content
+		expect( screen.getByRole( 'button', { name: 'trigger two', expanded: true } ) ).toHaveAttribute(
+			'data-state',
+			'open'
+		);
+		expect( screen.getByText( 'content two' ) ).toBeVisible();
 
 		// Check for accessibility issues
 		expect( await axe( container ) ).toHaveNoViolations();

package/src/system/Avatar/Avatar.stories.tsx

@@ -16,4 +16,18 @@ export default {
 
 type Story = StoryObj< typeof Avatar >;
 
-export const Default: Story = {};
+const COMMON_SIZES = [ 128, 64, 48, 32, 24, 16 ];
+
+export const Default = () => (
+	<>
+		{ COMMON_SIZES.map( size => (
+			<Avatar key={ size } size={ size } src="https://i.pravatar.cc/100" />
+		) ) }
+	</>
+);
+export const WithName: Story = {
+	args: {
+		name: 'Kitty',
+		size: 30,
+	},
+};

package/src/system/Avatar/Avatar.tsx

@@ -11,7 +11,6 @@ import { Image, ImageProps, ThemeUIStyleObject } from 'theme-ui';
 import { Box, Text } from '..';
 
 export interface AvatarProps {
-	isVIP?: boolean;
 	size?: number;
 	src?: string;
 	name?: string;
@@ -23,24 +22,21 @@ type AvatarImageProps = AvatarProps & ImageProps;
 
 export const Avatar = forwardRef< HTMLElement, AvatarImageProps >(
 	(
-		{ isVIP = false, name, size = 32, src, className, sx = {}, ...props }: AvatarImageProps,
+		{ name, size = 32, src, className, sx = {}, ...props }: AvatarImageProps,
 		ref: Ref< HTMLElement >
 	) => (
 		<Box
 			sx={ {
 				borderRadius: '100%',
-				height: size + 2, // +2 to compensate padding on both sides
-				width: size + 2, // +2 to compensate padding on both sides
-				borderWidth: '2px',
-				borderStyle: 'solid',
-				borderColor: isVIP || isVIP === undefined ? 'primary' : 'transparent',
+				height: size,
+				width: size,
 				overflow: 'hidden',
-				backgroundColor: 'primary',
+				border: 'none',
+				backgroundColor: 'icon.primary',
 				display: 'inline-flex',
 				alignItems: 'center',
 				justifyContent: 'center',
-				color: 'white',
-				padding: '1px', // this should probably be replaced with a token
+				color: 'inverse',
 				textAlign: 'center',
 				...sx,
 			} }
@@ -63,10 +59,10 @@ export const Avatar = forwardRef< HTMLElement, AvatarImageProps >(
 				<Text
 					as="span"
 					sx={ {
-						color: 'white',
+						color: 'icon.inverse',
 						mb: 0,
 						fontWeight: 'bold',
-						fontSize: 0,
+						fontSize: 2,
 						textTransform: 'uppercase',
 					} }
 				>

package/src/system/Button/Button.stories.tsx

@@ -10,6 +10,7 @@ import { BiCalendarHeart } from 'react-icons/bi';
  * Internal dependencies
  */
 import { Button, ButtonVariant } from '..';
+import { Flex } from '../Flex/Flex';
 import ScreenReaderText from '../ScreenReaderText';
 
 export default {
@@ -66,48 +67,56 @@ This documentation is heavily inspired by the [U.S Web Design System (USWDS)](ht
 };
 
 const Template = args => (
-	<React.Fragment>
-		<Button { ...args }>Primary</Button>
+	<div>
+		<Flex sx={ { gap: 2, flexDirection: 'row' } }>
+			<Button { ...args }>Primary</Button>
 
-		<Button variant="secondary" sx={ { ml: 2 } } { ...args }>
-			Secondary
-		</Button>
+			<Button variant="secondary" sx={ { ml: 2 } } { ...args }>
+				Secondary
+			</Button>
 
-		<Button variant="tertiary" sx={ { ml: 2 } } { ...args }>
-			Tertiary
-		</Button>
+			<Button variant="tertiary" sx={ { ml: 2 } } { ...args }>
+				Tertiary
+			</Button>
 
-		<Button variant="ghost" sx={ { ml: 2 } } { ...args }>
-			Ghost
-		</Button>
+			<Button variant="ghost" sx={ { ml: 2 } } { ...args }>
+				Ghost
+			</Button>
 
-		<Button variant="display" sx={ { ml: 2 } } { ...args }>
-			Display
-		</Button>
+			<Button variant="display" sx={ { ml: 2 } } { ...args }>
+				Display
+			</Button>
 
-		<Button variant="danger" sx={ { ml: 2 } } { ...args }>
-			Danger
-		</Button>
+			<Button variant="danger" sx={ { ml: 2 } } { ...args }>
+				Danger
+			</Button>
 
-		<Button variant="primary" disabled={ true } sx={ { ml: 2 } } { ...args }>
-			Disabled
-		</Button>
+			<Button variant="primary" disabled={ true } sx={ { ml: 2 } } { ...args }>
+				Disabled
+			</Button>
 
-		<Button variant="text" sx={ { ml: 2 } } as="a" href="https://google/com" { ...args }>
-			Button link
-		</Button>
+			<Button variant="text" sx={ { ml: 2 } } as="a" href="https://google/com" { ...args }>
+				Button link
+			</Button>
+
+			<Button variant="icon" sx={ { ml: 2 } } type="button" { ...args }>
+				<BiCalendarHeart size={ 24 } />
+				<ScreenReaderText>domain.com</ScreenReaderText>
+			</Button>
+		</Flex>
 
-		<Button variant="icon" sx={ { ml: 2 } } type="button" { ...args }>
-			<BiCalendarHeart size={ 24 } />
-			<ScreenReaderText>domain.com</ScreenReaderText>
-		</Button>
+		<div sx={ { mt: 3 } }>
+			<Button variant="secondary" href="https://google/com" { ...args } full>
+				Button with full width
+			</Button>
+		</div>
 
-		<div sx={ { maxWidth: '100px', mt: 3 } }>
-			<Button variant="secondary" href="https://google/com" { ...args }>
-				Button with constrained width
+		<div sx={ { mt: 3, display: 'flex' } }>
+			<Button variant="secondary" href="https://google/com" { ...args } grow>
+				Button with grow width
 			</Button>
 		</div>
-	</React.Fragment>
+	</div>
 );
 
 export const Default = Template.bind( {} );

package/src/system/Button/Button.tsx

@@ -1,8 +1,5 @@
-/**
- * External dependencies
- */
 import classNames from 'classnames';
-import React, { useCallback, forwardRef, Ref } from 'react';
+import React, { useCallback, forwardRef } from 'react';
 import { Theme, Button as ThemeButton, ButtonProps as ThemeButtonProps } from 'theme-ui';
 
 type ButtonClickType = React.MouseEvent< HTMLButtonElement, MouseEvent >;
@@ -25,11 +22,13 @@ export enum ButtonVariant {
 export interface ButtonProps extends ThemeButtonProps {
 	disabled?: boolean;
 	onClick?: ( event: ButtonClickType ) => void;
+	full?: boolean;
+	grow?: boolean;
 	variant?: keyof typeof ButtonVariant; // converts the enum to a string union type
 }
 
 const Button = forwardRef< HTMLButtonElement, ButtonProps >(
-	( { className, disabled, onClick, sx, ...rest }: ButtonProps, ref: Ref< HTMLButtonElement > ) => {
+	( { className, disabled, onClick, sx, full, grow, ...rest }, ref ) => {
 		const handleOnClick = useCallback(
 			( event: ButtonClickType ) => {
 				if ( disabled ) {
@@ -46,16 +45,6 @@ const Button = forwardRef< HTMLButtonElement, ButtonProps >(
 		return (
 			<ThemeButton
 				sx={ {
-					verticalAlign: 'middle',
-					display: 'inline-flex',
-					alignItems: 'center',
-					justifyContent: 'center',
-					minHeight: '36px',
-					py: 0,
-					textDecoration: 'none',
-					'&:hover': {
-						textDecoration: 'none',
-					},
 					'&:focus': 'none',
 					'&:focus-visible': ( theme: ButtonTheme ) => theme.outline,
 					'&[aria-disabled="true"]': {
@@ -65,6 +54,8 @@ const Button = forwardRef< HTMLButtonElement, ButtonProps >(
 						cursor: 'not-allowed',
 						pointerEvents: 'none',
 					},
+					flexGrow: Boolean( grow ) === true ? '1' : 'initial',
+					width: Boolean( full ) === true ? '100%' : 'auto',
 					...sx,
 				} }
 				{ ...rest }

package/src/system/Card/Card.tsx

@@ -28,7 +28,6 @@ export const Card = forwardRef< HTMLElement, CardBoxProps >(
 			sx={ {
 				// pass variant prop to sx
 				variant: `cards.${ variant }`,
-				overflow: 'hidden',
 				...sx,
 			} }
 			className={ classNames( 'vip-card-component', className ) }