@automattic/vip-design-system 2.5.0 → 2.7.0

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/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

@@ -250,23 +250,50 @@ export default {
 
 	cards: {
 		primary: {
-			padding: 3,
 			borderRadius: 2,
 			backgroundColor: 'layer.2',
 			boxShadow: 'low',
+			header: {
+				backgroundColor: 'layer.1',
+				borderTopLeftRadius: 2,
+				borderTopRightRadius: 2,
+				p: 3,
+				fontWeight: 'bold',
+				display: 'flex',
+			},
+			children: {
+				p: 3,
+			},
 		},
 		secondary: {
 			borderRadius: 2,
-			p: 3,
 			boxShadow: 'none',
 			border: '1px solid',
 			borderColor: 'borders.2',
+			header: {
+				backgroundColor: 'layer.1',
+				borderTopLeftRadius: 2,
+				borderTopRightRadius: 2,
+				p: 3,
+				fontWeight: 'bold',
+				display: 'flex',
+			},
+			children: {
+				p: 3,
+			},
 		},
 		indent: {
 			borderRadius: 2,
-			p: 3,
 			boxShadow: 'none',
 			backgroundColor: 'backgroundMuted',
+			header: {
+				display: 'flex',
+				fontWeight: 'bold',
+				p: 3,
+			},
+			children: {
+				p: 3,
+			},
 		},
 	},
 
@@ -525,8 +552,8 @@ 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',

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"
   ]
 }