@automattic/vip-design-system 1.2.0 → 1.2.2

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

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import type { StoryObj } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Link } from '..';
+
+export default {
+	component: Link,
+	title: 'Link',
+};
+
+type Story = StoryObj< typeof Link >;
+
+export const Default: Story = {
+	args: {
+		children: 'Hello',
+		href: '#!',
+	},
+};

package/src/system/Link/Link.tsx

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import { forwardRef, Ref } from 'react';
+import { Link as ThemeLink, LinkProps as ThemeLinkProps, Theme } from 'theme-ui';
+
+// Temporary interface until we add types to the theme definition.
+interface LinkTheme extends Theme {
+	outline?: Record< string, string >;
+}
+
+export interface LinkProps extends ThemeLinkProps {
+	active?: boolean;
+}
+
+export const Link = forwardRef< HTMLAnchorElement, LinkProps >(
+	( { active = false, sx, ...props }: LinkProps, ref: Ref< HTMLAnchorElement > ) => (
+		<ThemeLink
+			sx={ {
+				textDdecorationThickness: '0.1em',
+				textUnderlineOffset: '0.1em',
+				color: active ? 'links.active' : 'link',
+				'&:visited': {
+					color: 'links.visited',
+				},
+				'&:active': {
+					color: 'links.active',
+				},
+				'&:hover, &:focus': {
+					color: 'links.hover',
+					textDecorationLine: 'underline',
+					textDecorationThickness: '2px',
+				},
+				'&:focus-visible': ( theme: LinkTheme ) => theme.outline,
+				...sx,
+			} }
+			ref={ ref }
+			{ ...props }
+		/>
+	)
+);
+
+Link.displayName = 'Link';

package/src/system/Link/index.ts

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

package/src/system/NewForm/FormAutocomplete.js

@@ -11,7 +11,7 @@ import classNames from 'classnames';
 /**
  * Internal dependencies
  */
-import css from './FormAutocomplete.css';
+import './FormAutocomplete.css';
 import { FormSelectContent } from './FormSelectContent';
 import { FormSelectArrow } from './FormSelectArrow';
 import { Label } from '../Form/Label';
@@ -388,4 +388,4 @@ FormAutocomplete.propTypes = {
 
 FormAutocomplete.displayName = 'FormAutocomplete';
 
-export { FormAutocomplete, css };
+export { FormAutocomplete };

package/src/system/Notice/Notice.tsx

@@ -0,0 +1,129 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import classNames from 'classnames';
+import { MdError, MdWarning, MdCheckCircle, MdInfo } from 'react-icons/md';
+
+/**
+ * Internal dependencies
+ */
+import { Box, Flex, Heading, Card } from '../';
+import { ThemeUIStyleObject } from 'theme-ui';
+
+interface NoticeIconProps {
+	color: string;
+	variant: ColorVariants;
+}
+
+export interface NoticeProps {
+	children: React.ReactNode;
+	inline?: boolean;
+	sx?: ThemeUIStyleObject;
+	title?: React.ReactNode;
+	variant?: ColorVariants;
+	headingVariant?: React.ElementType;
+	className?: string;
+}
+type ColorVariants = 'warning' | 'error' | 'alert' | 'success' | 'info';
+
+const NoticeIcon = ( { color, variant }: NoticeIconProps ) => {
+	const sx = { color, flex: '0 0 auto' };
+	const size = 20;
+
+	switch ( variant ) {
+		case 'info':
+			return <MdInfo sx={ sx } size={ size } aria-hidden="true" />;
+		case 'error':
+			return <MdError sx={ sx } size={ size } aria-hidden="true" />;
+		case 'success':
+			return <MdCheckCircle sx={ sx } size={ size } aria-hidden="true" />;
+	}
+
+	// alert and warning will get the Warning icon
+	return <MdWarning sx={ sx } size={ size } aria-hidden="true" />;
+};
+
+export const Notice = React.forwardRef< HTMLDivElement, NoticeProps >(
+	(
+		{
+			children,
+			className = null,
+			headingVariant = 'p',
+			inline = false,
+			sx = {},
+			title,
+			variant = 'warning',
+			...props
+		},
+		forwardRef
+	) => {
+		return (
+			<Card
+				sx={ {
+					boxShadow: 'none',
+					borderRadius: 2,
+					bg: inline ? 'transparent' : `notice.background.${ variant }`,
+					padding: inline ? 0 : 3,
+					color: `notice.text.${ variant }`,
+					p: {
+						color: `notice.text.${ variant }`,
+					},
+					a: {
+						color: `notice.link.${ variant }.default`,
+						'&:visited': {
+							color: `notice.link.${ variant }.visited`,
+						},
+						'&:active': {
+							color: `notice.link.${ variant }.active`,
+						},
+						'&:hover, &:focus': {
+							color: `notice.link.${ variant }.hover`,
+						},
+					},
+					...sx,
+				} }
+				className={ classNames( 'vip-notice-component', className ) }
+				ref={ forwardRef }
+				{ ...props }
+			>
+				<Flex
+					sx={ {
+						alignItems: 'start',
+					} }
+				>
+					<Box
+						sx={ {
+							mr: 3,
+							mt: title ? 2 : 0,
+							flexShrink: 0,
+						} }
+					>
+						<NoticeIcon color={ `notice.icon.${ variant }` } variant={ variant } />
+					</Box>
+
+					<Box>
+						{ title && (
+							<Heading
+								as={ headingVariant }
+								sx={ {
+									color: `notice.text.${ variant }`,
+									mb: 0,
+									fontSize: 2,
+									fontWeight: 'bold',
+								} }
+							>
+								{ title }
+							</Heading>
+						) }
+						{ children }
+					</Box>
+				</Flex>
+			</Card>
+		);
+	}
+);
+
+Notice.displayName = 'Notice';

package/src/system/OptionRow/OptionRow.test.js

@@ -28,7 +28,7 @@ describe( '<OptionRow />', () => {
 				subTitle="Mostly used to link off to other pages."
 				as="a"
 				disabled
-				variant="h3"
+				variant="default"
 				meta=""
 			/>
 		);

package/src/system/ScreenReaderText/ScreenReaderText.tsx

@@ -0,0 +1,40 @@
+/** @jsxImportSource theme-ui */
+// we'll need jsxImportSource for the sx prop when used with html elements
+
+/**
+ * External dependencies
+ */
+
+import { forwardRef, ReactNode, Ref } from 'react';
+import { ThemeUIStyleObject } from 'theme-ui';
+
+/**
+ * Internal dependencies
+ */
+
+export const screenReaderTextClass: ThemeUIStyleObject = {
+	border: 'none',
+	clip: 'rect(1px, 1px, 1px, 1px)',
+	clipPath: 'inset(50%)',
+	height: '1px',
+	margin: '-1px',
+	overflow: 'hidden',
+	padding: '0',
+	position: 'absolute',
+	width: '1px',
+	wordWrap: 'normal !important' as 'normal',
+};
+
+export interface ScreenReaderTextProps {
+	children: ReactNode;
+}
+
+export const ScreenReaderText = forwardRef< HTMLSpanElement, ScreenReaderTextProps >(
+	( props: ScreenReaderTextProps, ref: Ref< HTMLSpanElement > ) => (
+		<span className="screen-reader-text" sx={ screenReaderTextClass } { ...props } ref={ ref }>
+			{ props.children }
+		</span>
+	)
+);
+
+ScreenReaderText.displayName = 'ScreenReaderText';

package/src/system/Spinner/Spinner.test.tsx

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+/**
+ * Internal dependencies
+ */
+import { Spinner } from './Spinner';
+
+describe( '<Spinner />', () => {
+	it( 'renders the Spinner component', async () => {
+		const { container } = render( <Spinner /> );
+
+		expect( container.getElementsByClassName( 'vip-spinner-component' ) ).toBeDefined();
+
+		// Check for accessibility issues
+		expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	it( 'renders the Spinner component with a different title', async () => {
+		const { container } = render( <Spinner title="Please Wait" /> );
+
+		expect( screen.getByTitle( 'Please Wait' ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/Spinner/Spinner.tsx

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import { forwardRef, Ref } from 'react';
+import { Spinner as ThemeSpinner, SpinnerProps, ThemeUIStyleObject } from 'theme-ui';
+import classNames from 'classnames';
+
+export interface ThemeSpinnerProps extends SpinnerProps {
+	sx?: ThemeUIStyleObject;
+	className?: string;
+	color?: string;
+	strokeWidth?: number;
+}
+
+export const Spinner = forwardRef< SVGSVGElement, ThemeSpinnerProps >(
+	(
+		{ sx, color = 'icon.helper', strokeWidth = 2, className, ...props }: ThemeSpinnerProps,
+		ref: Ref< SVGSVGElement >
+	) => (
+		<ThemeSpinner
+			as="svg"
+			sx={ {
+				...sx,
+				color,
+			} }
+			strokeWidth={ strokeWidth }
+			className={ classNames( 'vip-spinner-component', className ) }
+			ref={ ref }
+			{ ...props }
+		/>
+	)
+);
+
+Spinner.displayName = 'Spinner';

package/src/system/Spinner/index.ts

@@ -0,0 +1 @@
+export { Spinner } from './Spinner';

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

@@ -1,9 +1,9 @@
 /** @jsxImportSource theme-ui */
+// we'll need jsxImportSource for the sx prop when used with html elements
 
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 
 /**
  * Internal dependencies
@@ -15,7 +15,11 @@ export default {
 	component: Table,
 };
 
-const ExampleTable = ( { caption } ) => (
+interface ExampleTableProps {
+	caption: string;
+}
+
+const ExampleTable = ( { caption }: ExampleTableProps ) => (
 	<Table caption={ caption }>
 		<thead>
 			<TableRow head cells={ [ 'User', 'Command', 'Duration', 'Time' ] } />
@@ -53,10 +57,6 @@ const ExampleTable = ( { caption } ) => (
 	</Table>
 );
 
-ExampleTable.propTypes = {
-	caption: PropTypes.string.isRequired,
-};
-
 export const Default = () => <ExampleTable caption="Example Table" />;
 
 export const WithHorizontalScroll = () => (

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

@@ -1,11 +1,12 @@
 /** @jsxImportSource theme-ui */
+// we'll need jsxImportSource for the sx prop when used with html elements
 
 /**
  * External dependencies
  */
-import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import { forwardRef, ReactNode, Ref, useMemo } from 'react';
+import classNames, { Argument } from 'classnames';
+import type { ThemeUIStyleObject } from 'theme-ui';
 
 /**
  * Internal dependencies
@@ -14,8 +15,15 @@ import { screenReaderTextClass } from '../ScreenReaderText/ScreenReaderText';
 import { Box } from '../';
 import { generateId } from '../utils/random';
 
-const Table = React.forwardRef(
-	( { sx, className, children, caption = null, ...props }, forwardRef ) => {
+export interface TableProps {
+	caption?: string;
+	children?: ReactNode;
+	className?: Argument;
+	sx?: ThemeUIStyleObject;
+}
+
+export const Table = forwardRef< HTMLTableElement, TableProps >(
+	( { sx, className, children, caption, ...props }: TableProps, ref: Ref< HTMLTableElement > ) => {
 		if ( ! caption ) {
 			// eslint-disable-next-line no-console
 			console.warn( '[A11Y] Please, add a caption to your table.' );
@@ -29,15 +37,12 @@ const Table = React.forwardRef(
 				sx={ { width: '100%', overflowX: 'auto' } }
 				role="region"
 				aria-labelledby={ captionId }
-				// Because this container is scrollable, it needs to be focusable.
-				// A tabIndex value of 0 makes it focusable by keyboard and does not
-				// interfere with the tab order.
 				tabIndex={ 0 }
 			>
 				<table
 					sx={ { width: '100%', minWidth: '1024px', borderSpacing: 0, ...sx } }
 					className={ classNames( 'vip-table-component-element', className ) }
-					ref={ forwardRef }
+					ref={ ref }
 					{ ...props }
 				>
 					{ caption && (
@@ -53,12 +58,3 @@ const Table = React.forwardRef(
 );
 
 Table.displayName = 'Table';
-
-Table.propTypes = {
-	sx: PropTypes.object,
-	className: PropTypes.any,
-	children: PropTypes.any,
-	caption: PropTypes.string.isRequired,
-};
-
-export { Table };

package/src/system/Table/{TableCell.js → TableCell.tsx}

@@ -1,18 +1,25 @@
 /** @jsxImportSource theme-ui */
+// we'll need jsxImportSource for the sx prop when used with html elements
 
 /**
  * External dependencies
  */
-
-import PropTypes from 'prop-types';
+import { ReactNode } from 'react';
+import { ThemeUIStyleObject } from 'theme-ui';
 
 /**
  * Internal dependencies
  */
 import { Box } from '../';
 
-const TableCell = ( { head, children, ...rest } ) => {
-	const sx = {
+export interface TableCellProps extends React.HTMLProps< HTMLTableCellElement > {
+	children: ReactNode;
+	head?: boolean;
+	sx?: ThemeUIStyleObject;
+}
+
+export const TableCell = ( { children, head, sx, ...rest }: TableCellProps ) => {
+	const style: ThemeUIStyleObject = {
 		borderBottom: '1px solid',
 		borderTop: head ? '1px solid' : 'none',
 		// borderColor should come after borderTop so it can override it
@@ -21,11 +28,11 @@ const TableCell = ( { head, children, ...rest } ) => {
 		px: 3,
 		py: 2,
 		textAlign: 'left',
-		...rest.sx,
+		...sx,
 	};
 
 	return (
-		<Box as={ head ? 'th' : 'td' } { ...{ ...rest, sx } }>
+		<Box { ...rest } as={ head ? 'th' : 'td' } ref={ undefined } sx={ style }>
 			{ head ? (
 				<span sx={ { mb: 0, color: 'table.heading', fontSize: 2, fontWeight: 'bold' } }>
 					{ children }
@@ -37,9 +44,4 @@ const TableCell = ( { head, children, ...rest } ) => {
 	);
 };
 
-TableCell.propTypes = {
-	children: PropTypes.node,
-	head: PropTypes.bool,
-};
-
-export { TableCell };
+TableCell.displayName = 'TableCell';

package/src/system/Table/TableRow.tsx

@@ -0,0 +1,63 @@
+/** @jsxImportSource theme-ui */
+// we'll need jsxImportSource for the sx prop when used with html elements
+
+/**
+ * External dependencies
+ */
+import { KeyboardEvent, ReactNode } from 'react';
+import { ThemeUIStyleObject } from 'theme-ui';
+
+/**
+ * Internal dependencies
+ */
+import { TableCell } from './TableCell';
+
+export interface TableRowProps extends React.HTMLProps< HTMLTableRowElement > {
+	cells?: ReactNode[];
+	children?: ReactNode;
+	head?: boolean;
+	onClick?: () => void;
+	sx?: ThemeUIStyleObject;
+}
+
+export const TableRow = ( {
+	onClick,
+	head = false,
+	cells = [],
+	children,
+	sx,
+	...rest
+}: TableRowProps ) => {
+	const hoverStyles: ThemeUIStyleObject = {
+		cursor: 'pointer',
+		'&:hover': {
+			bg: 'hover',
+			borderRadius: 2,
+		},
+		...sx,
+	};
+
+	function handleKeyPress( evt: KeyboardEvent< HTMLTableRowElement > ) {
+		if ( onClick && evt.key === 'Enter' ) {
+			onClick();
+		}
+	}
+
+	return (
+		<tr
+			sx={ onClick ? hoverStyles : sx }
+			onClick={ onClick }
+			tabIndex={ onClick ? 0 : undefined }
+			onKeyDown={ handleKeyPress }
+			{ ...rest }
+		>
+			{ cells.map( ( cell, index ) => (
+				<TableCell key={ index } head={ head }>
+					{ cell }
+				</TableCell>
+			) ) }
+
+			{ children }
+		</tr>
+	);
+};

package/src/system/Table/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+export { Table } from './Table';
+export { TableRow } from './TableRow';
+export { TableCell } from './TableCell';

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

@@ -1,4 +1,5 @@
 /** @jsxImportSource theme-ui */
+// we'll need jsxImportSource for the sx prop when used with html elements
 
 /**
  * Internal dependencies

package/src/system/Text/Text.tsx

@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { forwardRef, Ref } from 'react';
+import { Text as ThemeText, TextProps as ThemeTextProps } from 'theme-ui';
+import classNames from 'classnames';
+
+export const Text = forwardRef< HTMLDivElement, ThemeTextProps >(
+	( { sx, className, ...props }: ThemeTextProps, ref: Ref< HTMLDivElement > ) => (
+		<ThemeText
+			as="p"
+			sx={ {
+				lineHeight: 1.5,
+				marginBottom: 2,
+				color: 'text',
+				...sx,
+			} }
+			className={ classNames( 'vip-text-component', className ) }
+			ref={ ref }
+			{ ...props }
+		/>
+	)
+);
+
+Text.displayName = 'Text';

package/src/system/Text/index.ts

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