@automattic/vip-design-system 2.5.0 → 2.7.0

package/build/system/theme/index.d.ts

@@ -33,29 +33,72 @@ declare namespace _default {
     }
     export namespace cards {
         namespace primary {
-            let padding: number;
             let borderRadius: number;
             let backgroundColor: string;
             let boxShadow: string;
+            namespace header {
+                let backgroundColor_1: string;
+                export { backgroundColor_1 as backgroundColor };
+                export let borderTopLeftRadius: number;
+                export let borderTopRightRadius: number;
+                export let p: number;
+                export let fontWeight: string;
+                export let display: string;
+            }
+            namespace children {
+                let p_1: number;
+                export { p_1 as p };
+            }
         }
         namespace secondary {
             let borderRadius_1: number;
             export { borderRadius_1 as borderRadius };
-            export let p: number;
             let boxShadow_1: string;
             export { boxShadow_1 as boxShadow };
             export let border: string;
             export let borderColor: string;
+            export namespace header_1 {
+                let backgroundColor_2: string;
+                export { backgroundColor_2 as backgroundColor };
+                let borderTopLeftRadius_1: number;
+                export { borderTopLeftRadius_1 as borderTopLeftRadius };
+                let borderTopRightRadius_1: number;
+                export { borderTopRightRadius_1 as borderTopRightRadius };
+                let p_2: number;
+                export { p_2 as p };
+                let fontWeight_1: string;
+                export { fontWeight_1 as fontWeight };
+                let display_1: string;
+                export { display_1 as display };
+            }
+            export { header_1 as header };
+            export namespace children_1 {
+                let p_3: number;
+                export { p_3 as p };
+            }
+            export { children_1 as children };
         }
         namespace indent {
             let borderRadius_2: number;
             export { borderRadius_2 as borderRadius };
-            let p_1: number;
-            export { p_1 as p };
             let boxShadow_2: string;
             export { boxShadow_2 as boxShadow };
-            let backgroundColor_1: string;
-            export { backgroundColor_1 as backgroundColor };
+            let backgroundColor_3: string;
+            export { backgroundColor_3 as backgroundColor };
+            export namespace header_2 {
+                let display_2: string;
+                export { display_2 as display };
+                let fontWeight_2: string;
+                export { fontWeight_2 as fontWeight };
+                let p_4: number;
+                export { p_4 as p };
+            }
+            export { header_2 as header };
+            export namespace children_2 {
+                let p_5: number;
+                export { p_5 as p };
+            }
+            export { children_2 as children };
         }
     }
     export namespace buttons {
@@ -112,7 +155,7 @@ declare namespace _default {
                 borderColor: string;
             };
         };
-        export let display: {
+        let display_3: {
             variant: string;
             color: string;
             bg: string;
@@ -125,6 +168,7 @@ declare namespace _default {
                 borderColor: string;
             };
         };
+        export { display_3 as display };
         export let ghost: {
             variant: string;
             color: string;
@@ -1081,8 +1125,8 @@ declare namespace _default {
             export let top: string;
             export let left: string;
             export let maxWidth: string;
-            let backgroundColor_2: string;
-            export { backgroundColor_2 as backgroundColor };
+            let backgroundColor_4: string;
+            export { backgroundColor_4 as backgroundColor };
             let boxShadow_3: string;
             export { boxShadow_3 as boxShadow };
         }
@@ -1100,15 +1144,15 @@ declare namespace _default {
             export { borderRadius_3 as borderRadius };
             let boxShadow_4: string;
             export { boxShadow_4 as boxShadow };
-            let backgroundColor_3: string;
-            export { backgroundColor_3 as backgroundColor };
+            let backgroundColor_5: string;
+            export { backgroundColor_5 as backgroundColor };
         }
         export { sidebar_1 as sidebar };
         export namespace cover {
             let position_2: string;
             export { position_2 as position };
-            let backgroundColor_4: string;
-            export { backgroundColor_4 as backgroundColor };
+            let backgroundColor_6: string;
+            export { backgroundColor_6 as backgroundColor };
             export let width: string;
             let left_2: number;
             export { left_2 as left };
@@ -1168,32 +1212,39 @@ declare namespace _default {
         };
     };
     export namespace styles {
-        let root: {
-            fontFamily: string;
-            lineHeight: string;
-            fontWeight: string;
-            color: string;
-            backgroundColor: string;
-            '-webkit-font-smoothing': string;
-            '-moz-osx-font-smoothing': string;
-            a: {
+        namespace root {
+            export let fontFamily: string;
+            export let lineHeight: string;
+            let fontWeight_3: string;
+            export { fontWeight_3 as fontWeight };
+            let color_1: string;
+            export { color_1 as color };
+            let backgroundColor_7: string;
+            export { backgroundColor_7 as backgroundColor };
+            export let webkitFontSmoothing: string;
+            export let mozOsxFontmoothing: string;
+            export let a: {
                 '&:hover': {
                     textDecorationLine: string;
                     textDecorationThickness: string;
                     textUnderlineOffset: string;
                 };
             };
-            svg: {
-                fill: string;
-                display: string;
-            };
-            pre: {
-                fontFamily: string;
-            };
-            p: {
-                color: string;
-            };
-        };
+            export namespace svg {
+                export let fill: string;
+                let display_4: string;
+                export { display_4 as display };
+            }
+            export namespace pre {
+                let fontFamily_1: string;
+                export { fontFamily_1 as fontFamily };
+            }
+            export namespace p_6 {
+                let color_2: string;
+                export { color_2 as color };
+            }
+            export { p_6 as p };
+        }
     }
 }
 export default _default;

package/build/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/vip-design-system",
-  "version": "2.5.0",
+  "version": "2.7.0",
   "main": "build/system/index.js",
   "scripts": {
     "build-storybook": "storybook build",

package/src/system/Card/Card.stories.tsx

@@ -8,4 +8,22 @@ export default {
 	component: Card,
 };
 
-export const Default = () => <Card> Hello </Card>;
+export const Default = () => <Card>Hello</Card>;
+
+export const WithHeader = () => <Card header="Header">This is a card with a header.</Card>;
+
+export const DefaultSecondary = () => <Card variant="secondary">Hello</Card>;
+
+export const WithHeaderSecondary = () => (
+	<Card header="Header" variant="secondary">
+		This is a card with a header.
+	</Card>
+);
+
+export const DefaultIndent = () => <Card variant="indent">Hello</Card>;
+
+export const WithHeaderIndent = () => (
+	<Card header="Header" variant="indent">
+		This is a card with a header.
+	</Card>
+);

package/src/system/Card/Card.test.tsx

@@ -29,4 +29,15 @@ describe( '<Card />', () => {
 		// Check for accessibility issues
 		expect( await axe( container ) ).toHaveNoViolations();
 	} );
+
+	it( 'renders the Card component with a header', async () => {
+		const { container } = render( <Card header="Card Header">Card text</Card> );
+
+		expect( screen.getByText( 'Card Header' ) ).toBeInTheDocument();
+
+		expect( screen.getByText( 'Card text' ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		expect( await axe( container ) ).toHaveNoViolations();
+	} );
 } );

package/src/system/Card/Card.tsx

@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 /**
  * External dependencies
  */
@@ -10,30 +12,57 @@ import { BoxProps } from 'theme-ui';
  */
 import { Box } from '..';
 
+export enum CardVariant {
+	'primary',
+	'secondary',
+	'indent',
+}
+
 export interface CardProps {
-	variant?: string;
+	variant?: keyof typeof CardVariant;
 	sx?: BoxProps[ 'sx' ];
 	className?: Argument;
+	header?: React.ReactNode;
+	children?: React.ReactNode;
 }
 
 type CardBoxProps = CardProps & BoxProps;
 
 export const Card = forwardRef< HTMLElement, CardBoxProps >(
 	(
-		{ variant = 'primary', sx = {}, className, ...props }: CardBoxProps,
+		{ variant = 'primary', header, sx = {}, className, children, ...props }: CardProps,
 		ref: Ref< HTMLElement >
-	) => (
-		<Box
-			ref={ ref }
-			sx={ {
-				// pass variant prop to sx
-				variant: `cards.${ variant }`,
-				...sx,
-			} }
-			className={ classNames( 'vip-card-component', className ) }
-			{ ...props }
-		/>
-	)
+	) => {
+		return (
+			<Box
+				ref={ ref }
+				sx={ {
+					// pass variant prop to sx
+					variant: `cards.${ variant }`,
+					...sx,
+				} }
+				className={ classNames( 'vip-card-component', className ) }
+				{ ...props }
+			>
+				{ header && (
+					<div
+						sx={ {
+							variant: `cards.${ variant }.header`,
+						} }
+					>
+						{ header }
+					</div>
+				) }
+				<div
+					sx={ {
+						variant: `cards.${ variant }.children`,
+					} }
+				>
+					{ children }
+				</div>
+			</Box>
+		);
+	}
 );
 
 Card.displayName = 'Card';

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

@@ -3,6 +3,7 @@
  */
 import { fireEvent, render, screen } from '@testing-library/react';
 import { axe } from 'jest-axe';
+import React from 'react';
 
 /**
  * Internal dependencies
@@ -28,6 +29,6 @@ describe( '<Dropdown />', () => {
 		fireEvent.click( getButton() );
 
 		// Check for accessibility issues
-		await expect( await axe( container ) ).toHaveNoViolations();
+		expect( await axe( container ) ).toHaveNoViolations();
 	} );
 } );

package/src/system/Dropdown/Dropdown.tsx

@@ -0,0 +1,72 @@
+/** @jsxImportSource theme-ui */
+
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import React, { ReactNode } from 'react';
+
+import { DropdownContent, DropdownContentProps } from './DropdownContent';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownRadioGroup = DropdownMenuPrimitive.RadioGroup;
+const DropdownItemIndicator = DropdownMenuPrimitive.DropdownMenuItemIndicator;
+const DropdownLabel = DropdownMenuPrimitive.DropdownMenuLabel;
+const DropdownSeparator = DropdownMenuPrimitive.DropdownMenuSeparator;
+const DropdownSub = DropdownMenuPrimitive.DropdownMenuSub;
+const DropdownSubTrigger = DropdownMenuPrimitive.DropdownMenuSubTrigger;
+const DropdownSubContent = DropdownMenuPrimitive.DropdownMenuSubContent;
+
+export interface DropdownProps {
+	trigger: ReactNode;
+	children: ReactNode;
+	open?: boolean;
+	defaultOpen?: boolean;
+	onOpenChange?: ( open: boolean ) => void;
+	modal?: boolean;
+	dir?: 'ltr' | 'rtl';
+	contentProps?: DropdownContentProps;
+	portalProps?: object;
+	className?: string;
+}
+
+export const Dropdown: React.FC< DropdownProps > = ( {
+	trigger,
+	children,
+	open = undefined,
+	defaultOpen = false,
+	onOpenChange = undefined,
+	modal = true,
+	dir = 'ltr',
+	contentProps = {},
+	portalProps = {},
+} ) => (
+	<DropdownMenu
+		open={ open }
+		defaultOpen={ defaultOpen }
+		onOpenChange={ onOpenChange }
+		modal={ modal }
+		dir={ dir }
+	>
+		<DropdownTrigger className="vip-dropdown-trigger" asChild>
+			{ trigger }
+		</DropdownTrigger>
+
+		<DropdownMenuPrimitive.Portal { ...portalProps }>
+			<DropdownContent { ...contentProps }>
+				{ children }
+				<DropdownMenuPrimitive.Arrow sx={ { fill: 'background', boxShadow: 'high' } } />
+			</DropdownContent>
+		</DropdownMenuPrimitive.Portal>
+	</DropdownMenu>
+);
+
+// Exports
+export {
+	DropdownTrigger,
+	DropdownRadioGroup,
+	DropdownItemIndicator,
+	DropdownLabel,
+	DropdownSeparator,
+	DropdownSub,
+	DropdownSubTrigger,
+	DropdownSubContent,
+};

package/src/system/Dropdown/DropdownContent.tsx

@@ -0,0 +1,46 @@
+/** @jsxImportSource theme-ui */
+
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import classNames from 'classnames';
+import React from 'react';
+
+export interface DropdownContentProps {
+	className?: string;
+}
+
+export const styles = {
+	minWidth: 220,
+	borderRadius: 2,
+	backgroundColor: 'background',
+	boxShadow: 'high',
+	px: 2,
+	py: 1,
+};
+
+export const DropdownContent = React.forwardRef< HTMLDivElement, DropdownContentProps >(
+	( { className, ...props }, forwardRef ) => (
+		<DropdownMenuPrimitive.DropdownMenuContent
+			className={ classNames( 'vip-dropdown-menu-content', className ) }
+			ref={ forwardRef }
+			sx={ styles }
+			{ ...props }
+		/>
+	)
+);
+
+DropdownContent.displayName = 'DropdownContent';
+
+export const DropdownSubContent = React.forwardRef< HTMLDivElement, DropdownContentProps >(
+	( { className, ...props }, forwardRef ) => (
+		<DropdownMenuPrimitive.Portal>
+			<DropdownMenuPrimitive.DropdownMenuSubContent
+				className={ classNames( 'vip-dropdown-menu-sub-content', className ) }
+				ref={ forwardRef }
+				sx={ styles }
+				{ ...props }
+			/>
+		</DropdownMenuPrimitive.Portal>
+	)
+);
+
+DropdownSubContent.displayName = 'DropdownSubContent';

package/src/system/Dropdown/DropdownItem.tsx

@@ -0,0 +1,112 @@
+/** @jsxImportSource theme-ui */
+
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import classNames from 'classnames';
+import React from 'react';
+import { ThemeUIStyleObject } from 'theme-ui';
+
+export interface DropdownItemProps extends DropdownMenuPrimitive.MenuItemProps {
+	className?: string;
+}
+
+export interface DropdownRadioItemProps extends DropdownMenuPrimitive.MenuRadioItemProps {
+	className?: string;
+}
+
+export interface DropdownCheckboxItemProps extends DropdownMenuPrimitive.MenuCheckboxItemProps {
+	className?: string;
+}
+
+export interface DropdownSubTriggerItemProps
+	extends DropdownMenuPrimitive.DropdownMenuSubTriggerProps {
+	className?: string;
+}
+
+export const styles: ThemeUIStyleObject = {
+	unset: 'all',
+	cursor: 'pointer',
+	display: 'flex',
+	alignItems: 'center',
+	flexDirection: 'row',
+	textAlign: 'left',
+	height: 25,
+	textDecoration: 'none',
+	position: 'relative',
+	m: 0,
+	color: 'heading',
+	px: 2,
+	paddingLeft: 3,
+	py: 1,
+	'&:hover, &:focus': {
+		backgroundColor: 'hover',
+		textDecoration: 'none',
+	},
+	'&[data-disabled]': {
+		color: 'muted',
+		pointerEvents: 'none',
+	},
+	'&[data-highlighted]': {
+		backgroundColor: 'hover',
+		color: 'link',
+	},
+};
+
+export const DropdownItem = React.forwardRef< HTMLDivElement, DropdownItemProps >(
+	( { className, ...props }, forwardRef ) => (
+		<DropdownMenuPrimitive.DropdownMenuItem
+			className={ classNames( 'vip-dropdown-menu-item', className ) }
+			ref={ forwardRef }
+			sx={ styles }
+			{ ...props }
+		/>
+	)
+);
+
+DropdownItem.displayName = 'DropdownItem';
+
+export const DropdownCheckboxItem = React.forwardRef< HTMLDivElement, DropdownCheckboxItemProps >(
+	( { className, ...props }, forwardRef ) => (
+		<DropdownMenuPrimitive.CheckboxItem
+			className={ classNames( 'vip-dropdown-checkbox-item', className ) }
+			ref={ forwardRef }
+			sx={ styles }
+			{ ...props }
+		/>
+	)
+);
+
+DropdownCheckboxItem.displayName = 'DropdownCheckboxItem';
+
+export const DropdownRadioItem = React.forwardRef< HTMLDivElement, DropdownRadioItemProps >(
+	( { className, ...props }, forwardRef ) => (
+		<DropdownMenuPrimitive.RadioItem
+			className={ classNames( 'vip-dropdown-radio-item', className ) }
+			ref={ forwardRef }
+			sx={ styles }
+			{ ...props }
+		/>
+	)
+);
+
+DropdownRadioItem.displayName = 'DropdownRadioItem';
+
+export const DropdownSubTrigger = React.forwardRef< HTMLDivElement, DropdownSubTriggerItemProps >(
+	( { className, ...props }, forwardRef ) => (
+		<DropdownMenuPrimitive.SubTrigger
+			className={ classNames( 'vip-dropdown-sub-trigger', className ) }
+			ref={ forwardRef }
+			sx={ {
+				...styles,
+				...{
+					'&[data-state="open"]': {
+						background: 'highlight',
+						color: 'primary',
+					},
+				},
+			} }
+			{ ...props }
+		/>
+	)
+);
+
+DropdownSubTrigger.displayName = 'DropdownSubTrigger';

package/src/system/Dropdown/DropdownLabel.tsx

@@ -0,0 +1,29 @@
+/** @jsxImportSource theme-ui */
+
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import classNames from 'classnames';
+import React from 'react';
+
+export interface DropdownLabelProps {
+	className?: string;
+}
+
+export const styles = {
+	paddingLeft: 3,
+	fontSize: 12,
+	lineHeight: '25px',
+	color: 'muted',
+};
+
+export const DropdownLabel = React.forwardRef< HTMLDivElement, DropdownLabelProps >(
+	( { className, ...props }, forwardRef ) => (
+		<DropdownMenuPrimitive.DropdownMenuLabel
+			className={ classNames( 'vip-dropdown-menu-label', className ) }
+			ref={ forwardRef }
+			sx={ styles }
+			{ ...props }
+		/>
+	)
+);
+
+DropdownLabel.displayName = 'DropdownLabel';

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,