@automattic/vip-design-system 1.2.0 → 1.2.2

package/src/system/Badge/Badge.stories.tsx

@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import type { StoryObj } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Badge, Link } from '..';
+
+export default {
+	component: Badge,
+	title: 'Badge',
+};
+
+type Story = StoryObj< typeof Badge >;
+
+export const Default: Story = {
+	args: {
+		children: 'Badge',
+		sx: undefined,
+	},
+};
+
+export const Variants = () => (
+	<>
+		<Badge variant="blue" sx={ { m: 2 } }>
+			Blue
+		</Badge>
+		<Badge variant="gold" sx={ { m: 2 } }>
+			Gold
+		</Badge>
+		<Badge variant="gray" sx={ { m: 2 } }>
+			Gray
+		</Badge>
+		<Badge variant="green" sx={ { m: 2 } }>
+			Green
+		</Badge>
+		<Badge variant="orange" sx={ { m: 2 } }>
+			Orange
+		</Badge>
+		<Badge variant="red" sx={ { m: 2 } }>
+			Red
+		</Badge>
+		<Badge variant="salmon" sx={ { m: 2 } }>
+			Salmon
+		</Badge>
+		<Badge variant="yellow" sx={ { m: 2 } }>
+			Yellow
+		</Badge>
+	</>
+);
+
+export const WithLink: Story = {
+	args: {},
+	render: args => <Badge children={ <Link href="https://google.com">Google</Link> } { ...args } />,
+};

package/src/system/Badge/{Badge.test.js → Badge.test.tsx}

@@ -16,15 +16,15 @@ describe( '<Badge />', () => {
 		expect( screen.getByText( 'Badge text' ) ).toBeInTheDocument();
 
 		// Check for accessibility issues
-		await expect( await axe( container ) ).toHaveNoViolations();
+		expect( await axe( container ) ).toHaveNoViolations();
 	} );
 
 	it( 'renders the Badge component with a different variant', async () => {
-		const { container } = render( <Badge variant="primary">Badge text</Badge> );
+		const { container } = render( <Badge variant="red">Badge text</Badge> );
 
 		expect( screen.getByText( 'Badge text' ) ).toBeInTheDocument();
 
 		// Check for accessibility issues
-		await expect( await axe( container ) ).toHaveNoViolations();
+		expect( await axe( container ) ).toHaveNoViolations();
 	} );
 } );

package/src/system/Badge/{Badge.js → Badge.tsx}

@@ -1,19 +1,21 @@
-/** @jsxImportSource theme-ui */
-
 /**
  * External dependencies
  */
-import React from 'react';
+import { forwardRef, Ref } from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
+import { TextProps as ThemeTextProps } from 'theme-ui';
 
 /**
  * Internal dependencies
  */
-import { Text } from '../';
+import { Text } from '..';
+
+export interface BadgeProps extends ThemeTextProps {
+	variant?: 'blue' | 'gold' | 'gray' | 'green' | 'orange' | 'red' | 'salmon' | 'yellow';
+}
 
-const Badge = React.forwardRef(
-	( { variant = 'blue', sx, className = null, ...props }, forwardRef ) => (
+export const Badge = forwardRef< HTMLDivElement, BadgeProps >(
+	( { variant = 'blue', sx, className, ...props }: BadgeProps, ref: Ref< HTMLDivElement > ) => (
 		<Text
 			as="span"
 			sx={ {
@@ -39,17 +41,10 @@ const Badge = React.forwardRef(
 				...sx,
 			} }
 			className={ classNames( 'vip-badge-component', className ) }
-			ref={ forwardRef }
+			ref={ ref }
 			{ ...props }
 		/>
 	)
 );
 
 Badge.displayName = 'Badge';
-Badge.propTypes = {
-	variant: PropTypes.string,
-	sx: PropTypes.object,
-	className: PropTypes.any,
-};
-
-export { Badge };

package/src/system/Badge/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies
+ */
+export { Badge } from './Badge';

package/src/system/Box/Box.stories.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { StoryObj } from '@storybook/react';
+
 /**
  * Internal dependencies
  */
@@ -8,4 +13,11 @@ export default {
 	component: Box,
 };
 
-export const Default = () => <Box>Hello</Box>;
+type Story = StoryObj< typeof Box >;
+
+export const Default: Story = {
+	args: {
+		children: 'Hello',
+		sx: undefined,
+	},
+};

package/src/system/Box/Box.tsx

@@ -1,16 +1,12 @@
 /**
  * External dependencies
  */
-import React, { Ref } from 'react';
-import classNames, { Argument } from 'classnames';
+import { forwardRef, Ref } from 'react';
+import classNames from 'classnames';
 import { Box as ThemeBox, BoxProps as ThemeBoxProps } from 'theme-ui';
 
-export interface BoxProps extends Omit< ThemeBoxProps, 'className' > {
-	className?: Argument;
-}
-
-export const Box = React.forwardRef< HTMLDivElement, BoxProps >(
-	( props: BoxProps, ref: Ref< HTMLDivElement > ) => (
+export const Box = forwardRef< HTMLElement, ThemeBoxProps >(
+	( props: ThemeBoxProps, ref: Ref< HTMLElement > ) => (
 		<ThemeBox
 			{ ...props }
 			className={ classNames( 'vip-box-component', props.className ) }

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

@@ -0,0 +1,110 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { BiCalendarHeart } from 'react-icons/bi';
+
+/**
+ * Internal dependencies
+ */
+import ScreenReaderText from '../ScreenReaderText';
+import { Button } from '..';
+import variants from './variants';
+
+export default {
+	title: 'Button',
+	component: Button,
+	argTypes: {
+		children: {},
+		disabled: {
+			control: { type: 'boolean' },
+		},
+		variant: {
+			type: 'select',
+			options: variants,
+		},
+	},
+	parameters: {
+		docs: {
+			description: {
+				component: `
+A button draws attention to important actions with a large selectable surface.
+
+## Guidance
+
+### When to use the button component
+
+**Important actions**. Use buttons for the most important actions you want users to take on your site, such as Download, Toggle states or submitting forms.
+
+### When to consider something else
+
+Linking between a site’s pages. Use regular links instead.
+If the action is less popular or less important. Less popular or less important actions may be visually styled as links.
+
+### Usability guidance
+
+- Keep button text short. Button text should be as short as possible with action words that clearly explain what will happen when the button is selected (for example, Download, View, or Sign up).
+
+### Accessibility
+
+- Buttons should display a visible focus state when users tab to them.
+
+- Screen readers handle buttons and links differently. When styling links to look like buttons, remember that screen readers handle links slightly differently than they do buttons. Pressing the Space key triggers a button, but pressing the Enter key triggers a link.
+
+- Icons can be helpful. Consider adding an icon to signal specific actions (Download, Open in a new window, etc).
+
+-------
+
+This documentation is heavily inspired by the [U.S Web Design System (USWDS)](https://designsystem.digital.gov/components/button/#package). We use USWDS as trusted source of truth for accessibility and usability best practices.
+
+## Component Properties
+`,
+			},
+		},
+	},
+};
+
+const Template = args => (
+	<React.Fragment>
+		<Button { ...args }>Primary</Button>
+
+		<Button variant="secondary" sx={ { ml: 2 } } { ...args }>
+			Secondary
+		</Button>
+
+		<Button variant="tertiary" sx={ { ml: 2 } } { ...args }>
+			Tertiary
+		</Button>
+
+		<Button variant="ghost" sx={ { ml: 2 } } { ...args }>
+			Ghost
+		</Button>
+
+		<Button variant="display" sx={ { ml: 2 } } { ...args }>
+			Display
+		</Button>
+
+		<Button variant="danger" sx={ { ml: 2 } } { ...args }>
+			Danger
+		</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>
+
+		<div sx={ { maxWidth: '100px', mt: 3 } }>
+			<Button variant="secondary" href="https://google/com" { ...args }>
+				Button with constrained width
+			</Button>
+		</div>
+	</React.Fragment>
+);
+
+export const Default = Template.bind( {} );

package/src/system/Button/Button.tsx

@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import React, { useCallback, forwardRef, Ref } from 'react';
+import { Theme, Button as ThemeButton, ButtonProps as ThemeButtonProps } from 'theme-ui';
+import classNames from 'classnames';
+
+type ButtonClickType = React.MouseEvent< HTMLButtonElement, MouseEvent >;
+
+interface ButtonTheme extends Theme {
+	outline?: Record< string, string >;
+}
+
+export interface ButtonProps extends ThemeButtonProps {
+	disabled?: boolean;
+	onClick?: ( event: ButtonClickType ) => void;
+}
+
+const Button = forwardRef< HTMLButtonElement, ButtonProps >(
+	( { className, disabled, onClick, sx, ...rest }: ButtonProps, ref: Ref< HTMLButtonElement > ) => {
+		const handleOnClick = useCallback(
+			( event: ButtonClickType ) => {
+				if ( disabled ) {
+					return event.preventDefault();
+				}
+
+				if ( onClick ) {
+					return onClick( event );
+				}
+			},
+			[ disabled, onClick ]
+		);
+
+		return (
+			<ThemeButton
+				sx={ {
+					verticalAlign: 'middle',
+					display: 'inline-flex',
+					alignItems: 'center',
+					justifyContent: 'center',
+					minHeight: '36px',
+					py: 0,
+					textDecoration: 'none',
+					'&:hover': {
+						textDecoration: 'none',
+					},
+					'&:focus-visible': ( theme: ButtonTheme ) => theme.outline,
+					'&[aria-disabled="true"]': {
+						opacity: 0.7,
+						cursor: 'not-allowed',
+						pointerEvents: 'all',
+					},
+					...sx,
+				} }
+				{ ...rest }
+				aria-disabled={ disabled }
+				onClick={ handleOnClick }
+				className={ classNames( 'vip-button-component', className ) }
+				ref={ ref }
+			/>
+		);
+	}
+);
+
+Button.displayName = 'Button';
+
+export { Button };

package/src/system/Card/{Card.stories.jsx → Card.stories.tsx}

@@ -8,4 +8,4 @@ export default {
 	component: Card,
 };
 
-export const Default = () => <Card>Hello</Card>;
+export const Default = () => <Card> Hello </Card>;

package/src/system/Card/{Card.test.js → Card.test.tsx}

@@ -18,7 +18,7 @@ describe( '<Card />', () => {
 		expect( screen.getByText( 'This is a Card' ) ).toBeInTheDocument();
 
 		// Check for accessibility issues
-		await expect( await axe( container ) ).toHaveNoViolations();
+		expect( await axe( container ) ).toHaveNoViolations();
 	} );
 
 	it( 'renders the Card component with a different variant', async () => {
@@ -27,6 +27,6 @@ describe( '<Card />', () => {
 		expect( screen.getByText( 'Card text' ) ).toBeInTheDocument();
 
 		// Check for accessibility issues
-		await expect( await axe( container ) ).toHaveNoViolations();
+		expect( await axe( container ) ).toHaveNoViolations();
 	} );
 } );

package/src/system/Card/Card.tsx

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import { forwardRef, Ref } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { Box } from '..';
+import classNames, { Argument } from 'classnames';
+import { BoxProps } from 'theme-ui';
+
+export interface CardProps {
+	variant?: string;
+	sx?: BoxProps[ 'sx' ];
+	className?: Argument;
+}
+
+type CardBoxProps = CardProps & BoxProps;
+
+export const Card = forwardRef< HTMLElement, CardBoxProps >(
+	(
+		{ variant = 'primary', sx = {}, className, ...props }: CardBoxProps,
+		ref: Ref< HTMLElement >
+	) => (
+		<Box
+			ref={ ref }
+			sx={ {
+				// pass variant prop to sx
+				variant: `cards.${ variant }`,
+				overflow: 'hidden',
+				...sx,
+			} }
+			className={ classNames( 'vip-card-component', className ) }
+			{ ...props }
+		/>
+	)
+);
+
+Card.displayName = 'Card';

package/src/system/Card/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies
+ */
+export { Card } from './Card';

package/src/system/Code/Code.stories.tsx

@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import type { StoryObj } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Code } from '..';
+
+export default {
+	title: 'Code',
+	component: Code,
+};
+
+type Story = StoryObj< typeof Code >;
+
+export const DefaultWithTime: Story = {
+	render: () => (
+		<Code
+			children={
+				<>
+					<time sx={ { color: 'logs.text.secondary' } } dateTime="2022-01-01 15:15:15">
+						15:16
+					</time>{ ' ' }
+					Code
+				</>
+			}
+		/>
+	),
+};
+
+export const DefaultWithIcon: Story = {
+	render: () => <Code showCopy={ true }>Code with Icon</Code>,
+};
+
+export const DefaultWithConsoleInfo: Story = {
+	render: () => (
+		<Code showCopy={ true } onCopy={ () => global.alert( 'Hello world' ) }>
+			Code with Icon and Click callback — console.info
+		</Code>
+	),
+};

package/src/system/Code/{Code.test.js → Code.test.tsx}

@@ -16,7 +16,9 @@ const defaultProps = {
 // Mock navigator.clipboard because jsdom doesn't support it
 Object.defineProperty( window.navigator, 'clipboard', {
 	value: {
-		writeText: () => {},
+		writeText: () => {
+			return Promise.resolve();
+		},
 	},
 } );
 
@@ -27,7 +29,7 @@ describe( '<Code />', () => {
 		expect( screen.getByText( 'This is a code' ) ).toBeInTheDocument();
 
 		// Check for accessibility issues
-		await expect( await axe( container ) ).toHaveNoViolations();
+		expect( await axe( container ) ).toHaveNoViolations();
 	} );
 
 	it( 'renders the Code component with a copy button', async () => {
@@ -37,7 +39,7 @@ describe( '<Code />', () => {
 		expect( screen.getByRole( 'button', { name: 'Copy code' } ) ).toBeInTheDocument();
 
 		// Check for accessibility issues
-		await expect( await axe( container ) ).toHaveNoViolations();
+		expect( await axe( container ) ).toHaveNoViolations();
 	} );
 
 	it( 'updates the the UI after clicking on "Copy"', async () => {
@@ -51,6 +53,6 @@ describe( '<Code />', () => {
 		expect( screen.getByText( 'Code copied to clipboard' ) ).toBeInTheDocument();
 
 		// Check for accessibility issues
-		await expect( await axe( container ) ).toHaveNoViolations();
+		expect( await axe( container ) ).toHaveNoViolations();
 	} );
 } );

package/src/system/Code/{Code.js → Code.tsx}

@@ -3,14 +3,21 @@
 /**
  * External dependencies
  */
-import React, { useRef, useState } from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
+import React, { ReactNode, createRef, useState } from 'react';
+import classNames, { Argument } from 'classnames';
 import { MdContentCopy } from 'react-icons/md';
 
-const Code = React.forwardRef(
-	( { prompt = false, showCopy = false, onCopy = null, className, ...props }, forwardRef ) => {
-		const ref = useRef();
+export interface CodeProps {
+	prompt?: boolean;
+	showCopy?: boolean;
+	onCopy?: () => void;
+	className?: Argument;
+	children?: ReactNode;
+}
+
+const Code = React.forwardRef< HTMLDivElement, CodeProps >(
+	( { prompt = false, showCopy = false, onCopy, className, ...props }: CodeProps, forwardRef ) => {
+		const ref = createRef< HTMLElement >();
 
 		const codeDom = (
 			<code
@@ -46,6 +53,19 @@ const Code = React.forwardRef(
 			return codeDom;
 		}
 
+		const onClickCopy = () => {
+			window.navigator.clipboard
+				.writeText( ref.current?.innerText ?? '' )
+				.then( () => {
+					setCopied( true );
+
+					if ( onCopy ) {
+						onCopy();
+					}
+				} )
+				.catch( () => {} );
+		};
+
 		return (
 			<div
 				sx={ {
@@ -74,15 +94,7 @@ const Code = React.forwardRef(
 								cursor: 'pointer',
 							},
 						} }
-						onClick={ () => {
-							window.navigator.clipboard.writeText( ref.current?.innerText );
-
-							setCopied( true );
-
-							if ( onCopy ) {
-								onCopy();
-							}
-						} }
+						onClick={ onClickCopy }
 					>
 						{ copied ? (
 							<span role="alert">Code copied to clipboard</span>
@@ -98,11 +110,4 @@ const Code = React.forwardRef(
 
 Code.displayName = 'Code';
 
-Code.propTypes = {
-	prompt: PropTypes.bool,
-	showCopy: PropTypes.bool,
-	onCopy: PropTypes.func,
-	className: PropTypes.any,
-};
-
 export { Code };

package/src/system/Code/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies
+ */
+export { Code } from './Code';

package/src/system/Flex/Flex.tsx

@@ -0,0 +1,11 @@
+/**
+ * External dependencies
+ */
+import { forwardRef, Ref } from 'react';
+import { Flex as ThemeFlex, FlexProps as ThemeFlexProps } from 'theme-ui';
+
+export const Flex = forwardRef< HTMLElement, ThemeFlexProps >(
+	( props: ThemeFlexProps, ref: Ref< HTMLElement > ) => <ThemeFlex ref={ ref } { ...props } />
+);
+
+Flex.displayName = 'Flex';

package/src/system/Flex/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies
+ */
+export { Flex } from './Flex';

package/src/system/Grid/Grid.tsx

@@ -0,0 +1,11 @@
+/**
+ * External dependencies
+ */
+import { Grid as ThemeGrid, GridProps as ThemeGridProps } from 'theme-ui';
+import { forwardRef, Ref } from 'react';
+
+export const Grid = forwardRef< HTMLDivElement, ThemeGridProps >(
+	( props: ThemeGridProps, ref: Ref< HTMLDivElement > ) => <ThemeGrid { ...props } ref={ ref } />
+);
+
+Grid.displayName = 'Grid';

package/src/system/Grid/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies
+ */
+export { Grid } from './Grid';

package/src/system/Heading/Heading.tsx

@@ -1,26 +1,18 @@
 /**
  * External dependencies
  */
-import React, { Ref } from 'react';
-import {
-	Heading as ThemeHeading,
-	HeadingProps as ThemeHeadingProps,
-	ThemeUIStyleObject,
-} from 'theme-ui';
-import classNames, { Argument } from 'classnames';
+import { forwardRef, Ref } from 'react';
+import { Heading as ThemeHeading, HeadingProps as ThemeHeadingProps } from 'theme-ui';
+import classNames from 'classnames';
 
-// We must Omit className because we are overriding its default React implementation.
-// Also, while the sx and variant props may seem redundant, specifying them here
-// exposes them in Storybook's controls panel.
-export interface HeadingProps extends Omit< ThemeHeadingProps, 'className' > {
-	className?: Argument;
-	sx?: ThemeUIStyleObject;
-	variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export interface HeadingProps extends ThemeHeadingProps {
+	variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 
-export const Heading = React.forwardRef< HTMLHeadingElement, HeadingProps >(
-	( { variant = 'h3', sx, className, ...rest }, ref: Ref< HTMLHeadingElement > ) => (
+export const Heading = forwardRef< HTMLHeadingElement, HeadingProps >(
+	( { variant = 'h3', sx, className, ...rest }: HeadingProps, ref: Ref< HTMLHeadingElement > ) => (
 		<ThemeHeading
+			as={ variant }
 			sx={ {
 				color: 'heading',
 				// pass variant prop to sx
@@ -29,7 +21,6 @@ export const Heading = React.forwardRef< HTMLHeadingElement, HeadingProps >(
 			} }
 			className={ classNames( 'vip-heading-component', className ) }
 			ref={ ref }
-			variant={ variant }
 			{ ...rest }
 		/>
 	)