@automattic/vip-design-system 1.3.2 → 1.4.0

package/src/system/Nav/Nav.test.tsx

@@ -0,0 +1,51 @@
+/** @jsxImportSource theme-ui */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-nocheck
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import { ThemeUIProvider } from 'theme-ui';
+
+/**
+ * Internal dependencies
+ */
+import { Nav, NavItem } from './';
+
+import { theme } from '../';
+
+const renderWithTheme = children =>
+	render( <ThemeUIProvider theme={ theme }>{ children }</ThemeUIProvider> );
+
+const renderComponent = () =>
+	renderWithTheme(
+		<Nav.Primary variant="primary" label="Main">
+			<NavItem.Primary href="#">PHP</NavItem.Primary>
+			<NavItem.Primary href="https://wordpress.com">WordPress</NavItem.Primary>
+			<NavItem.Primary active href="htpps://newrelic.com/">
+				New Relic
+			</NavItem.Primary>
+			<NavItem.Primary disabled href="https://google.com/">
+				Not accessible
+			</NavItem.Primary>
+		</Nav.Primary>
+	);
+
+describe( '<Nav />', () => {
+	it( 'renders the Nav component with default value visible', async () => {
+		const { container } = renderComponent();
+
+		// Should find the nav label
+		expect( screen.getByLabelText( 'Main' ) ).toBeInTheDocument();
+
+		// Should find all links
+		expect( screen.queryByText( 'PHP' ) ).toBeInTheDocument();
+		expect( screen.queryByText( 'WordPress' ) ).toBeInTheDocument();
+		expect( screen.queryByText( 'New Relic' ) ).toBeInTheDocument();
+		expect( screen.queryByText( 'Not accessible' ) ).toHaveAttribute( 'aria-disabled', 'true' );
+
+		// Check for accessibility issues
+		expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/Nav/Nav.tsx

@@ -0,0 +1,62 @@
+/** @jsxImportSource theme-ui */
+import React, { Ref, forwardRef } from 'react';
+import * as NavigationMenu from '@radix-ui/react-navigation-menu';
+import classNames from 'classnames';
+
+import { VIP_NAV } from '.';
+import { ThemeUIStyleObject } from 'theme-ui';
+
+export type NavVariant = 'primary' | 'tabs';
+
+export interface NavProps extends NavigationMenu.NavigationMenuProps {
+	className?: string;
+	variant?: NavVariant;
+	sx?: ThemeUIStyleObject;
+	label: string;
+}
+
+const Nav = forwardRef< HTMLElement, NavProps >(
+	(
+		{ className, children, orientation, variant = 'primary', sx = {}, label }: NavProps,
+		ref: Ref< HTMLElement >
+	) => (
+		<NavigationMenu.Root
+			aria-label={ label }
+			ref={ ref }
+			className={ classNames( VIP_NAV, className ) }
+			sx={ {
+				position: 'relative',
+				display: 'flex',
+				width: variant === 'tabs' ? '100%' : 'max-content',
+				zIndex: 1,
+				pb: 0,
+				borderBottom: '1px solid',
+				borderColor: variant === 'tabs' ? 'borders.2' : 'transparent',
+				...sx,
+			} }
+			orientation={ orientation }
+		>
+			<NavigationMenu.List
+				className={ classNames( `${ VIP_NAV }-list` ) }
+				sx={ {
+					display: 'flex',
+					listStyle: 'none',
+					justifyContent: 'flex-start',
+					m: 0,
+					px: 0,
+					flexDirection: 'row',
+				} }
+			>
+				{ children }
+			</NavigationMenu.List>
+		</NavigationMenu.Root>
+	)
+);
+
+export const NavPrimary = forwardRef< HTMLElement, NavProps >(
+	( props: NavProps, ref: Ref< HTMLElement > ) => <Nav { ...props } variant="primary" ref={ ref } />
+);
+
+export const NavTab = forwardRef< HTMLElement, NavProps >(
+	( props: NavProps, ref: Ref< HTMLElement > ) => <Nav { ...props } variant="tabs" ref={ ref } />
+);

package/src/system/Nav/NavItem.tsx

@@ -0,0 +1,152 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import React, { Ref, forwardRef } from 'react';
+import * as NavigationMenu from '@radix-ui/react-navigation-menu';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { VIP_NAV } from '.';
+import { Theme, ThemeUIStyleObject } from 'theme-ui';
+import { NavVariant } from './Nav';
+
+interface NavItemTheme extends Theme {
+	outline?: Record< string, string >;
+}
+
+export interface NavItemBaseProps extends NavigationMenu.NavigationMenuItemProps {
+	className?: string;
+	sx?: ThemeUIStyleObject;
+}
+
+const NavItemBase = forwardRef< HTMLLIElement, NavItemBaseProps >(
+	( { children, sx = {}, className, ...rest }: NavItemBaseProps, ref: Ref< HTMLLIElement > ) => (
+		<NavigationMenu.Item
+			className={ classNames( `${ VIP_NAV }-item`, className ) }
+			{ ...rest }
+			sx={ {
+				mr: 2,
+				'&:last-of-type': {
+					mr: 0,
+				},
+
+				...sx,
+			} }
+			ref={ ref }
+		>
+			{ children }
+		</NavigationMenu.Item>
+	)
+);
+
+const NavLink = forwardRef< HTMLAnchorElement, NavItemProps >(
+	(
+		{ children, href, active, disabled, variant, ...props }: NavItemProps,
+		ref: Ref< HTMLAnchorElement >
+	) => (
+		<NavigationMenu.Link
+			className={ classNames( `${ VIP_NAV }-item-link` ) }
+			href={ href }
+			ref={ ref }
+			sx={ styles( variant ) }
+			active={ active }
+			aria-disabled={ disabled }
+			{ ...props }
+		>
+			{ children }
+		</NavigationMenu.Link>
+	)
+);
+
+export interface NavItemProps extends NavigationMenu.NavigationMenuLinkProps {
+	className?: string;
+	disabled?: boolean;
+	variant?: NavVariant;
+}
+
+const styles = variant => {
+	const defaultVariantStyles: ThemeUIStyleObject =
+		variant === 'tabs'
+			? {
+					px: 0,
+					mr: 2,
+					color: 'heading',
+					'&[data-active]': {
+						color: 'link',
+						fontWeight: 'normal',
+						boxShadow: 'inset 0 -1px 0 0, 0 1px 0 0',
+					},
+					'&[aria-disabled="true"]': {
+						color: 'muted',
+					},
+					':hover': { fontWeight: 'regular', color: 'heading' },
+			  }
+			: {
+					variant: `buttons.${ variant === 'link' ? 'text' : 'tertiary' }`,
+					borderRadius: 1,
+					'&[data-active]': {
+						variant: `buttons.${ variant === 'link' ? 'display' : variant }`,
+					},
+					'&[aria-disabled="true"]': {
+						opacity: 0.7,
+						color: 'texts.secondary',
+						cursor: 'not-allowed',
+					},
+					':hover': {
+						backgroundColor: `button.${ variant }.background.hover`,
+						textDecoration: 'none',
+					},
+			  };
+
+	return {
+		alignItems: 'center',
+		display: 'inline-flex',
+		fontSize: 2,
+		justifyContent: 'center',
+		lineHeight: 'inherit',
+		minHeight: '36px',
+		px: 3,
+		py: 0,
+		textDecoration: 'none',
+		verticalAlign: 'middle',
+		...defaultVariantStyles,
+		'&:focus': ( theme: NavItemTheme ) => theme.outline,
+		'&:focus-visible': ( theme: NavItemTheme ) => theme.outline,
+	};
+};
+
+const NavItem = forwardRef< HTMLAnchorElement, NavItemProps >(
+	(
+		{ className, children, href, active, disabled, variant = 'primary', ...props }: NavItemProps,
+		ref: Ref< HTMLAnchorElement >
+	) => (
+		<NavItemBase className={ className }>
+			<NavLink
+				variant={ variant }
+				href={ href }
+				ref={ ref }
+				active={ active }
+				disabled={ disabled }
+				{ ...props }
+			>
+				{ children }
+			</NavLink>
+		</NavItemBase>
+	)
+);
+
+export const ItemPrimary = forwardRef< HTMLAnchorElement, NavItemProps >(
+	( props: NavItemProps, ref: Ref< HTMLAnchorElement > ) => (
+		<NavItem variant="primary" ref={ ref } { ...props } />
+	)
+);
+
+export const ItemTab = forwardRef< HTMLAnchorElement, NavItemProps >(
+	( props: NavItemProps, ref: Ref< HTMLAnchorElement > ) => (
+		<NavItem variant="tabs" ref={ ref } { ...props } />
+	)
+);

package/src/system/Nav/index.tsx

@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import { NavPrimary as Primary, NavTab as Tab } from './Nav';
+
+import { ItemPrimary, ItemTab } from './NavItem';
+
+export const VIP_NAV = 'vip-nav-component';
+
+export const Nav = {
+	Primary,
+	Tab,
+};
+
+export const NavItem = {
+	Primary: ItemPrimary,
+	Tab: ItemTab,
+};

package/src/system/Notice/Notice.stories.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource theme-ui */
 /**
  * External dependencies
  */
@@ -6,7 +7,7 @@
  * Internal dependencies
  */
 import React from 'react';
-import { Notice, Link } from '..';
+import { Notice, Link, Heading } from '..';
 
 export default {
 	title: 'Notice',
@@ -52,11 +53,11 @@ export const Default = () => (
 
 		<Notice
 			variant="alert"
-			sx={ { mb: 4 } }
+			sx={ { mb: 2 } }
 			title="There are errors in your form"
 			headingVariant="h2"
 		>
-			<ul sx={ { mb: 0 } }>
+			<ul sx={ { m: 0, pl: 3 } }>
 				<li>
 					<Link href="#name">Please enter your name.</Link>
 				</li>
@@ -69,6 +70,23 @@ export const Default = () => (
 			</ul>
 		</Notice>
 
+		<Notice variant="alert" sx={ { mb: 2 } }>
+			<>
+				<Heading variant={ 'h4' } sx={ { fontSize: 2 } }>
+					Alternative way of printing errors
+				</Heading>
+
+				<ul sx={ { m: 0, pl: 3 } }>
+					<li>
+						<Link href="#name">Please enter your name.</Link>
+					</li>
+					<li>
+						<Link href="#email">Please enter your email address.</Link>
+					</li>
+				</ul>
+			</>
+		</Notice>
+
 		<Notice variant="alert" sx={ { mb: 4 } }>
 			Bucket names in Amazon S3 are globally unique, external link ↗. To ensure that shipped data is
 			delivered to the correct location, the Bucket Name and Bucket Region entered below must match

package/src/system/Notice/Notice.tsx

@@ -30,7 +30,7 @@ export interface NoticeProps {
 type ColorVariants = 'warning' | 'error' | 'alert' | 'success' | 'info';
 
 const NoticeIcon = ( { color, variant }: NoticeIconProps ) => {
-	const sx = { color, flex: '0 0 auto', mt: 0 };
+	const sx = { color, flex: '0 0 auto' };
 	const size = 20;
 
 	switch ( variant ) {
@@ -91,20 +91,27 @@ export const Notice = React.forwardRef< HTMLDivElement, NoticeProps >(
 			>
 				<Flex
 					sx={ {
-						alignItems: 'start',
+						height: '100%', // required for the dynamic height of the icon box to work
 					} }
 				>
-					<Flex
-						sx={ {
-							mr: 3,
-							mt: 0,
-							flexShrink: 0,
-							alignSelf: 'center',
-						} }
-					>
-						<NoticeIcon color={ `notice.icon.${ variant }` } variant={ variant } />
-					</Flex>
-
+					<Box sx={ { minWidth: '32px', mr: 3, mt: 0 } }>
+						<Flex
+							sx={ {
+								flexDirection: 'column', // the trick here is to have a flex column with the icon at the bottom and an empty div that fills the space
+								minHeight: '20px',
+								maxHeight: '32px', // we're forcing the max height so that the icon is, at max, aligned between the first and the second line of text
+								alignItems: 'flex-end', // we want the icon to be aligned to the bottom
+								height: '100%', // specifying the height will allow the box to match the height of the content.
+							} }
+						>
+							<Box
+								sx={ {
+									flex: '1 100%', // we need this empty div to make the icon align to the bottom
+								} }
+							></Box>
+							<NoticeIcon color={ `notice.icon.${ variant }` } variant={ variant } />
+						</Flex>
+					</Box>
 					<Box>
 						{ title && (
 							<Heading

package/src/system/Tabs/Tabs.stories.jsx

@@ -11,7 +11,7 @@ import React from 'react';
 import { Tabs, TabsTrigger, TabsList, TabsContent, Text, Link, Button } from '..';
 
 export default {
-	title: 'Tabs',
+	title: 'Navigation/Tabs',
 	component: Tabs,
 };
 

package/src/system/Wizard/Wizard.stories.tsx

@@ -12,7 +12,7 @@ import { Wizard, Box, Label, Input, Button, Checkbox, Flex } from '..';
 import { WizardStepProps } from './WizardStep';
 
 export default {
-	title: 'Wizard',
+	title: 'Navigation/Wizard',
 	component: Wizard,
 };
 

package/src/system/index.js

@@ -7,6 +7,8 @@ import { Box } from './Box';
 import { Button, ButtonSubmit, ButtonVariant } from './Button';
 import { Card } from './Card';
 import { Code } from './Code';
+import { Nav, NavItem } from './Nav';
+
 import {
 	Dialog,
 	DialogButton,
@@ -48,7 +50,7 @@ import { OptionRow } from './OptionRow';
 import { Table, TableRow, TableCell } from './Table';
 import { Text } from './Text';
 import theme from './theme';
-import { Wizard, WizardStep, WizardStepHorizontal } from './Wizard';
+import { Wizard, WizardStep } from './Wizard';
 import { Tabs, TabsList, TabsContent, TabsTrigger } from './Tabs';
 
 export {
@@ -93,6 +95,8 @@ export {
 	Progress,
 	Text,
 	Tabs,
+	Nav,
+	NavItem,
 	TabsTrigger,
 	TabsContent,
 	TabsList,
@@ -101,6 +105,5 @@ export {
 	Validation,
 	Wizard,
 	WizardStep,
-	WizardStepHorizontal,
 	theme,
 };

package/CONTRIBUTING.md

@@ -1,138 +0,0 @@
-## Development
-
-### Prerequisites
-
-Make sure you have [node.js](https://nodejs.org/) and [NPM](https://docs.npmjs.com/getting-started/what-is-npm) installed. Here's a [handy installer](https://nodejs.org/download/) for Windows, Mac, and Linux.
-
-### Install
-
-To get setup run the following command in the `vip-design-system` directory:
-
-```
-npm install
-```
-
-### Watching for changes
-
-You can build it continuously so that every time you make a change, build files are automatically updated:
-
-```
-npm run watch
-```
-
-### Testing
-
-We can test two ways:
-
-**Storybook**
-
-For components that include storybooks, we can run `npm run storybook` to view the components in a sandbox-ed storybook environment.
-
-**npm link**
-
-1. Run `npm link` in your checkout of this repo.
-2. Spin up a local copy of [the VIP Dashboard](https://github.com/automattic/vip-ui) and navigate to a page using the linked components from `@automattic/vip-design-system`
-
-Note: it's super useful to run `npm run watch` in another process, so any changes will be almost immediately available / testable.
-
-### Updating the Theme with VIP Design System Tokens
-
-You need to update the tokens once the VIP Design System updates the core files.
-
-#### How the theming works
-
-We use the VIP Design System Tokens as our base theme structure. All colors, spaces, types should come from a dynamic token system provided by the VIP Design team, currently using Figma as the design software. When the design system is updated by the Design team, they push a file to the root of this repository: `tokens/valet-core.json`.
-
-By using the [Token Transformer](https://docs.tokens.studio/sync/github#7-how-to-use-tokens-stored-in-github-in-development) and a custom npm script, we parse this file getting only the VIP Dashboard theme we need for the react components. The light theme is called: `wpvip-product-core`, and the dark theme is called `wpvip-product-dark`.
-
-Once the new file is updated, we need to generate a custom theme file in `src/generated/valet-theme-light.json`. This operation generates a small json file with the colors we need already filled in.
-
-Once the theme is updated, the file `src/system/theme/index.js` reads the colors and apply to all components.
-
-Use the section below to run the script and update the theme.
-
-_Important:_ If you change the `generated/valet-theme.json`, make it sure to open a new pull request with these changes and release a new version if needed.
-
-#### Update theme script
-
-Run this command to update the VIP Valet Theme with the latest `tokens/**` files.
-
-```bash
-npm run theme-update
-```
-
-## Publishing new version
-
-The process to release to npm should be started when all pull requests intended for publishing have been merged and the software has been fully tested for publication. You can release either using GitHub Actions or locally.
-
-### Versioning Guidelines
-
-- `patch`: for non-breaking changes/bugfixes and small updates.
-- `minor`: for some new features, bug fixes, and other non-breaking changes.
-- `major`: for breaking changes.
-
-### Note on NPM token
-
-Publishing via the GitHub Action requires that the `NPM_TOKEN` be set correctly in GitHub Actions secrets. This should be an npm token generated for a bot user on [the npm @automattic org](https://www.npmjs.com/settings/automattic) that has publish access to this repo.
-
-### GitHub Actions (Preferred)
-
-This is the preferred method for pushing out the latest release. The workflow runs a bunch of validations, generates a build, bump versions + tags, pushes out to npm, and bumps to the next dev version.
-
-1. Initiate the [release process here](https://github.com/Automattic/vip-design-system/actions/workflows/npm-prepare-release.yml).
-1. On the right-hand side, select "Run Workflow".
-1. Pick your preferred version bump.
-1. Click `Run Workflow`.
-1. Wait for a pull request to appear. The pull request will update the version number and shall be assigned to you.
-1. When ready, merge the pull request. This will lead to a new version to be [published on npmjs.com](https://www.npmjs.com/package/@automattic/vip-design-system).
-1. Another pull request will be created to bump to a development version, also assigned to you. Merge it to finish the process.
-
-### Local
-
-Follow these steps to publish locally:
-
-1. Make sure you have NPM access to our @automattic organization. Ask for #vip-platform-pâtisserie help in case you need it.
-2. Pull all the changes to your local trunk. Make sure you have the latest trunk locally.
-3. We follow the [https://semver.org/](https://semver.org/) versioning. You should run the specific version you are trying to publish:
-
-```bash
-npm version major|minor|patch
-```
-
-4. You should see a version bump in the `package.json` file.
-5. Build the application:
-
-```bash
-npm run build
-```
-
-6. Publish the application
-
-```
-npm publish
-```
-
-Note: You need to have two-factor enabled in your npm account. The publish command will request a two-factor code to complete the publishing process. You can also add `--otp=CODE` to the `npm publish` command if you already have the code.
-
-7. Push the tags to the repository and trunk updates.
-
-```
-git push --tags
-git push origin trunk
-```
-
-8. For major versions or breaking changes, it's recommended to [create a RELEASE](https://github.com/Automattic/vip-design-system/releases) with the published tag.
-
-Ps: Add a `BREAKING CHANGES` section to the release. This will avoid folks trying to figure out why their code is not working on the VIP Dashboard or any other system.
-
-## Troubleshooting
-
-### Dialog + Dropdown usage
-
-If you are facing a Dialog overlaping a Dropdown content, add this CSS to your application:
-
-```css
-div[data-radix-popper-content-wrapper][data-aria-hidden='true'] {
-	opacity: 0;
-}
-```