@automattic/vip-design-system 2.4.5 → 2.6.1

package/src/system/Dropdown/DropdownSeparator.tsx

@@ -0,0 +1,28 @@
+/** @jsxImportSource theme-ui */
+
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import classNames from 'classnames';
+import React from 'react';
+
+export interface DropdownSeparatorProps {
+	className?: string;
+}
+
+export const styles = {
+	height: '1px',
+	backgroundColor: 'borders.2',
+	my: '5px',
+};
+
+export const DropdownSeparator = React.forwardRef< HTMLDivElement, DropdownSeparatorProps >(
+	( { className, ...props }, forwardRef ) => (
+		<DropdownMenuPrimitive.DropdownMenuSeparator
+			className={ classNames( 'vip-dropdown-menu-separator', className ) }
+			ref={ forwardRef }
+			sx={ styles }
+			{ ...props }
+		/>
+	)
+);
+
+DropdownSeparator.displayName = 'DropdownSeparator';

package/src/system/Dropdown/{index.js → index.ts}

@@ -1,7 +1,5 @@
 /** @jsxImportSource theme-ui */
-/**
- * Internal dependencies
- */
+
 import {
 	Dropdown,
 	DropdownTrigger,

package/src/system/FilterDropdown/FilterDropdown.stories.tsx

@@ -0,0 +1,57 @@
+/** @jsxImportSource theme-ui */
+
+import { FilterDropdown } from './FilterDropdown';
+
+import type { StoryObj } from '@storybook/react';
+
+export default {
+	title: 'FilterDropdown',
+	component: FilterDropdown,
+	parameters: {
+		docs: {
+			description: {
+				component: `
+
+A Dropdown component that acts as a filter for a list of items.
+
+## Guidance
+
+### When to use the FilterDropdown component
+
+- When you want a Dropdown option that sticks with the selected value on the trigger button;
+
+### When to consider something else
+
+- When you want to display a list of options that does not require to stick with the selected value on the trigger button;
+
+## Component Properties
+`,
+			},
+		},
+	},
+};
+
+type Story = StoryObj< typeof FilterDropdown >;
+
+const filterTypes = [ 'all', 'hasUpdate', 'isVulnerable' ] as const;
+type FilterType = ( typeof filterTypes )[ number ];
+
+const FILTER_OPTIONS: Record< FilterType, { value: FilterType; label: string } > = {
+	all: { value: 'all', label: 'All' },
+	hasUpdate: { value: 'hasUpdate', label: 'Update Available' },
+	isVulnerable: { value: 'isVulnerable', label: 'Known Vulnerabilities' },
+};
+
+export const Default: Story = {
+	render: () => (
+		<>
+			<FilterDropdown
+				className="vip-plugins-filter-dropdown"
+				label="Filter:"
+				filters={ FILTER_OPTIONS }
+				onSelect={ () => {} }
+				defaultValue={ FILTER_OPTIONS.all.value }
+			/>
+		</>
+	),
+};

package/src/system/FilterDropdown/FilterDropdown.test.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import '@testing-library/jest-dom';
+
+import { FilterDropdown } from './FilterDropdown';
+
+function getMenu() {
+	return screen.getByRole( 'button', { name: 'Filter: Auth Method All checked' } );
+}
+
+const props = {
+	filters: {
+		ALL_USERS: {
+			label: 'All',
+			authMethod: '',
+		},
+		WP_USERS: {
+			label: 'WP.com',
+			authMethod: 'wpcom',
+		},
+		GH_USERS: {
+			label: 'GitHub',
+			authMethod: 'github',
+		},
+		SSO_USERS: {
+			label: 'SSO',
+			authMethod: 'organization_sso',
+		},
+		SSO_OTHER_USERS: {
+			label: 'SSO (third-party)',
+			authMethod: 'other_sso',
+		},
+		BLOCKED_USERS: {
+			label: 'Blocked Auth Methods',
+			authMethod: 'restricted',
+		},
+	},
+	label: 'Auth Method',
+	onSelect: jest.fn(),
+};
+
+describe( '<FilterDropdown />', () => {
+	it( 'render with all props passed', () => {
+		render( <FilterDropdown { ...props } /> );
+
+		const menu = getMenu();
+
+		expect( menu ).toBeInTheDocument();
+		expect( menu ).toHaveTextContent( /Filter:/ );
+		expect( menu ).toHaveTextContent( /Auth Method/ );
+	} );
+} );

package/src/system/FilterDropdown/FilterDropdown.tsx

@@ -0,0 +1,92 @@
+/** @jsxImportSource theme-ui */
+
+import classNames from 'classnames';
+import { useTranslate } from 'i18n-calypso';
+import React, { useState } from 'react';
+import { MdCheck, MdKeyboardArrowDown } from 'react-icons/md';
+
+import { Button } from '../Button';
+import * as Dropdown from '../Dropdown';
+import { DropdownCheckboxItemProps } from '../Dropdown/DropdownItem';
+import ScreenReaderText from '../ScreenReaderText';
+
+export type FilterDropdownCheckItemProps = DropdownCheckboxItemProps & {
+	checked: boolean;
+	item: {
+		label: string;
+		size?: number | string;
+	};
+	onClick: () => void;
+};
+
+const FilterDropdownCheckItem = ( { checked, item, onClick }: FilterDropdownCheckItemProps ) => (
+	<Dropdown.CheckboxItem checked={ checked } onClick={ onClick }>
+		<Dropdown.ItemIndicator>
+			<MdCheck size={ 14 } sx={ { mr: 2 } } fill="brand" />
+		</Dropdown.ItemIndicator>
+		{ item.label } { item?.size ? `(${ item?.size })` : null }
+	</Dropdown.CheckboxItem>
+);
+export type FilterDropDownFilterProp = {
+	label: string;
+	size?: number | string;
+	value?: number | string;
+};
+
+export interface FilterDropdownFiltersProp {
+	[ key: string ]: FilterDropDownFilterProp;
+}
+
+export type FilterDropdownProps = {
+	className?: string;
+	filters: FilterDropdownFiltersProp;
+	label?: React.ReactNode | string;
+	onSelect: ( filter: FilterDropDownFilterProp, key: string ) => void;
+	defaultValue?: string | null;
+};
+
+export const FilterDropdown = ( {
+	className,
+	filters,
+	label,
+	onSelect,
+	defaultValue = null,
+}: FilterDropdownProps ) => {
+	const translate = useTranslate();
+	const filterKeys = Object.keys( filters );
+	const firstFilter = filterKeys[ 0 ];
+	const [ filter, setFilter ] = useState( defaultValue || firstFilter );
+
+	return (
+		<Dropdown.Root
+			trigger={
+				<Button
+					className={ classNames( 'vip-filter-dropdown-trigger', className ) }
+					variant="secondary"
+				>
+					<ScreenReaderText>{ translate( 'Filter:' ) } </ScreenReaderText>
+
+					{ label }
+
+					<strong sx={ { mx: 2 } }> { filters[ filter ].label } </strong>
+
+					<ScreenReaderText>{ translate( 'checked' ) }</ScreenReaderText>
+
+					<MdKeyboardArrowDown />
+				</Button>
+			}
+		>
+			{ filterKeys.map( key => (
+				<FilterDropdownCheckItem
+					key={ key }
+					checked={ filter === key }
+					onClick={ () => {
+						setFilter( key );
+						onSelect( filters[ key ], key );
+					} }
+					item={ filters[ key ] }
+				/>
+			) ) }
+		</Dropdown.Root>
+	);
+};

package/src/system/Hr/Hr.stories.tsx

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import { Hr } from './Hr';
+
+import type { StoryObj } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+
+export default {
+	title: 'Hr',
+	component: Hr,
+	parameters: {
+		docs: {
+			description: {
+				component: `
+
+Horizontal Line.
+
+## Guidance
+
+### When to use the link component
+
+- When you want to separate sections with a horizontal line.
+
+### When to consider something else
+
+- When you want to display a vertical line;
+
+## Component Properties
+`,
+			},
+		},
+	},
+};
+
+type Story = StoryObj< typeof Hr >;
+
+export const Default: Story = {
+	render: () => (
+		<>
+			Horizontal Line:
+			<Hr />
+		</>
+	),
+};

package/src/system/Hr/Hr.test.tsx

@@ -0,0 +1,22 @@
+/** @jsxImportSource theme-ui */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-nocheck
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import { ThemeUIProvider } from 'theme-ui';
+
+import { Hr } from './Hr';
+import theme from '../theme';
+
+const renderWithTheme = children =>
+	render( <ThemeUIProvider theme={ theme }>{ children }</ThemeUIProvider> );
+
+const renderComponent = () => renderWithTheme( <Hr /> );
+
+describe( '<Hr />', () => {
+	it( 'renders the Hr component', async () => {
+		const { container } = renderComponent();
+
+		expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/Hr/Hr.tsx

@@ -0,0 +1,11 @@
+/** @jsxImportSource theme-ui */
+
+import { ThemeUIStyleObject } from 'theme-ui';
+
+export type HrProps = {
+	sx?: ThemeUIStyleObject;
+};
+
+export const Hr = ( { sx, ...rest }: HrProps ) => (
+	<hr sx={ { my: 4, border: 0, height: '1px', backgroundColor: 'borders.2', ...sx } } { ...rest } />
+);

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Link } from '..';
+import { Link, LinkVariant } from './Link';
 import { Flex } from '../Flex/Flex';
 
 import type { LinkProps } from './Link';
@@ -14,6 +14,47 @@ import type { StoryObj } from '@storybook/react';
 export default {
 	title: 'Navigation/Link',
 	component: Link,
+	argTypes: {
+		variant: {
+			type: 'select',
+			options: Object.values( LinkVariant ),
+		},
+	},
+	parameters: {
+		docs: {
+			description: {
+				component: `
+
+Links are navigational elements that direct visitors to other locations, either on the same page or to a different page or site. They can be inline or separate from the text flow. Since every link is a potential user interaction, too many links can be overwhelming.
+
+## Guidance
+
+### When to use the link component
+
+- When you want to direct users to another page or site.
+- When you want to direct users to another section of the same page (anchors).
+
+### When to consider something else
+
+- When you want to trigger an action (use a button instead).
+- When you want to display a message (use a notification instead).
+
+### Accessibility
+
+- Don’t rely on only color to distinguish links
+- Don’t block external links with disruptive notifications
+- Icons can be helpful. Consider adding an icon to signal specific actions (Download, Open in a new window, etc).
+- Don’t use the same link text for different URLs on the same page. This can confuse users and make it difficult for them to understand where the link will take them.
+
+-------
+
+This documentation is heavily inspired by the [U.S Web Design System (USWDS)](https://designsystem.digital.gov/components/link/). We use USWDS as trusted source of truth for accessibility and usability best practices.
+
+## Component Properties
+`,
+			},
+		},
+	},
 };
 
 type Story = StoryObj< typeof Link >;

package/src/system/Link/Link.tsx

@@ -14,17 +14,26 @@ interface LinkTheme extends Theme {
 	outline?: Record< string, string >;
 }
 
+export enum LinkVariant {
+	'primary',
+	'button-primary',
+	'button-secondary',
+	'button-tertiary',
+	'button-ghost',
+	'button-display',
+	'button-danger',
+}
+
 export interface LinkProps extends ThemeLinkProps {
-	variant?:
-		| 'primary'
-		| 'button-primary'
-		| 'button-secondary'
-		| 'button-tertiary'
-		| 'button-ghost'
-		| 'button-display'
-		| 'button-danger';
+	variant?: keyof typeof LinkVariant;
 }
 
+export const linkUnderlineProperties: ThemeUIStyleObject = {
+	textDecorationLine: 'underline',
+	textDecorationThickness: '0.07rem',
+	textUnderlineOffset: '0.250rem',
+};
+
 export const defaultLinkComponentStyle: ThemeUIStyleObject = {
 	'&:focus-visible': ( theme: LinkTheme ) => theme.outline,
 };

package/src/system/Nav/styles.ts

@@ -141,5 +141,6 @@ export const navMenuListStyles = ( orientation: NavProps[ 'orientation' ] ): The
 		gap: 1,
 		px: 0,
 		flexDirection: orientation === 'horizontal' ? 'row' : 'column',
+		flexWrap: orientation === 'horizontal' ? 'wrap' : undefined,
 	};
 };

package/src/system/Page/Page.test.tsx

@@ -0,0 +1,22 @@
+/** @jsxImportSource theme-ui */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-nocheck
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import { ThemeUIProvider } from 'theme-ui';
+
+import { Page } from './Page';
+import theme from '../theme';
+
+const renderWithTheme = children =>
+	render( <ThemeUIProvider theme={ theme }>{ children }</ThemeUIProvider> );
+
+const renderComponent = () => renderWithTheme( <Page /> );
+
+describe( '<Page />', () => {
+	it( 'renders the Page component', async () => {
+		const { container } = renderComponent();
+
+		expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/Page/Page.tsx

@@ -0,0 +1,3 @@
+import { Box } from '../Box';
+
+export const Page = props => <Box { ...props } />;

package/src/system/index.js

@@ -21,6 +21,7 @@ import {
 } from './Dialog';
 import * as Drawer from './Drawer/Drawer';
 import * as Dropdown from './Dropdown';
+import { FilterDropdown } from './FilterDropdown/FilterDropdown';
 import { Flex } from './Flex';
 import {
 	Input,
@@ -35,6 +36,7 @@ import {
 } from './Form';
 import { Grid } from './Grid';
 import { Heading } from './Heading';
+import { Hr } from './Hr/Hr';
 import { Link } from './Link';
 import LinkExternal from './LinkExternal/LinkExternal';
 import { MobileMenuWrapper, MobileMenuTrigger, MobileMenu } from './MobileMenu/MobileMenu';
@@ -84,10 +86,12 @@ export {
 	MobileMenuWrapper,
 	NewConfirmationDialog,
 	Grid,
+	FilterDropdown,
 	Flex,
 	Notice,
 	OptionRow,
 	Heading,
+	Hr,
 	Input,
 	Label,
 	Spinner,

package/src/system/theme/index.js

@@ -6,6 +6,7 @@ import ColorBuilder from './colors';
 import ValetDark from './generated/valet-theme-dark.json';
 import Valet from './generated/valet-theme-light.json';
 import ThemeBuilder from './getPropValue';
+import { linkUnderlineProperties } from '../Link/Link';
 
 // Light
 const { getPropValue, getVariants, ValetTheme, getHeadingStyles } = ThemeBuilder( Valet );
@@ -402,21 +403,19 @@ export default {
 
 	links: {
 		primary: {
+			...linkUnderlineProperties,
+
 			color: 'link',
 			'&:visited': {
 				color: 'links.visited',
 			},
 			'&:hover': {
 				color: 'links.hover',
-				textDecorationLine: 'underline',
-				textDecorationThickness: '0.125rem',
+				textDecorationThickness: '0.15rem',
 			},
 			'&:active': {
 				color: 'links.active',
 			},
-
-			textDecorationThickness: '0.125rem',
-			textUnderlineOffset: '0.250rem',
 		},
 		'button-primary': {
 			variant: 'buttons.primary',
@@ -526,12 +525,12 @@ export default {
 			fontWeight: 'body',
 			color: 'text',
 			backgroundColor: 'backgrounds.primary',
-			'-webkit-font-smoothing': 'antialiased',
-			'-moz-osx-font-smoothing': 'grayscale',
+			webkitFontSmoothing: 'antialiased',
+			mozOsxFontmoothing: 'grayscale',
 			a: {
 				'&:hover': {
 					textDecorationLine: 'underline',
-					textDecorationThickness: '0.125rem',
+					textDecorationThickness: '0.1rem',
 					textUnderlineOffset: '0.250rem',
 				},
 			},

package/src/system/utils/stories/CustomLink.tsx

@@ -1,6 +1,12 @@
 import React, { Ref, forwardRef } from 'react';
 
+import { Link } from '../../Link/Link';
+
 export const CustomLink = forwardRef< HTMLAnchorElement >(
 	// eslint-disable-next-line jsx-a11y/anchor-has-content
 	( props, ref: Ref< HTMLAnchorElement > ) => <a { ...props } ref={ ref } />
 );
+
+export const CustomLinkComponentized = forwardRef< HTMLAnchorElement >(
+	( props, ref: Ref< HTMLAnchorElement > ) => <Link { ...props } ref={ ref } />
+);

package/tokens/valet-core/$metadata.json

@@ -1,23 +1,7 @@
 {
   "tokenSetOrder": [
     "valet-core",
-    "valet-web-core",
-    "valet-web-color",
     "wpvip-product-core",
-    "wpvip-product-dark",
-    "wpvip-web",
-    "wpvip-web-color-dark",
-    "wpvip-web-color",
-    "wpvip-web-type",
-    "parsely-web-core",
-    "parsely-web-color",
-    "parsely-web-type",
-    "wpvip-services-web-core",
-    "wpvip-services-web-color",
-    "wpvip-services-web-type",
-    "figma-valet-web-type",
-    "figma-wpvip-web-type",
-    "figma-wpvip-services-web-type",
-    "figma-parsely-web-type"
+    "wpvip-product-dark"
   ]
 }