@automattic/vip-design-system 2.12.7 → 2.13.0

package/build/system/theme/generated/valet-theme-light.json

@@ -868,6 +868,14 @@
       "success": {
         "type": "color",
         "value": "#d7efdf"
+      },
+      "neutral": {
+        "type": "color",
+        "value": "#ebe9e8"
+      },
+      "feature": {
+        "type": "color",
+        "value": "#e8ccffff"
       }
     },
     "text": {
@@ -886,6 +894,14 @@
       "success": {
         "type": "color",
         "value": "#003700"
+      },
+      "neutral": {
+        "type": "color",
+        "value": "#13191e"
+      },
+      "feature": {
+        "type": "color",
+        "value": "#270047ff"
       }
     },
     "icon": {
@@ -904,6 +920,14 @@
       "success": {
         "type": "color",
         "value": "#007934"
+      },
+      "neutral": {
+        "type": "color",
+        "value": "#9b9796"
+      },
+      "feature": {
+        "type": "color",
+        "value": "#a73dffff"
       }
     },
     "accent": {
@@ -922,6 +946,14 @@
       "success": {
         "type": "color",
         "value": "#40ba6f"
+      },
+      "neutral": {
+        "type": "color",
+        "value": "#827f7e"
+      },
+      "feature": {
+        "type": "color",
+        "value": "#8000ebff"
       }
     },
     "link": {
@@ -1000,6 +1032,25 @@
           "type": "color",
           "value": "#00611e"
         }
+      },
+      "neutral": {
+        "default": {
+          "type": "color",
+          "description": "Use for text links",
+          "value": "#13191e"
+        },
+        "hover": {
+          "type": "color",
+          "value": "#514e4d"
+        },
+        "active": {
+          "type": "color",
+          "value": "#514e4d"
+        },
+        "visited": {
+          "type": "color",
+          "value": "#383635"
+        }
       }
     },
     "helper-text": {
@@ -3644,6 +3695,116 @@
         "value": "#000800",
         "type": "color"
       }
+    },
+    "purple": {
+      "0": {
+        "value": "#faf5ffff",
+        "type": "color"
+      },
+      "3": {
+        "value": "#f1e0ffff",
+        "type": "color"
+      },
+      "7": {
+        "value": "#e8ccffff",
+        "type": "color"
+      },
+      "10": {
+        "value": "#dfb8ffff",
+        "type": "color"
+      },
+      "15": {
+        "value": "#d5a3ffff",
+        "type": "color"
+      },
+      "20": {
+        "value": "#cc8fffff",
+        "type": "color"
+      },
+      "25": {
+        "value": "#c37affff",
+        "type": "color"
+      },
+      "30": {
+        "value": "#ba66ffff",
+        "type": "color"
+      },
+      "35": {
+        "value": "#b052ffff",
+        "type": "color"
+      },
+      "40": {
+        "value": "#a73dffff",
+        "type": "color"
+      },
+      "45": {
+        "value": "#9e29ffff",
+        "type": "color"
+      },
+      "50": {
+        "value": "#9514ffff",
+        "type": "color"
+      },
+      "55": {
+        "value": "#8c00ffff",
+        "type": "color"
+      },
+      "60": {
+        "value": "#8000ebff",
+        "type": "color"
+      },
+      "65": {
+        "value": "#7500d6ff",
+        "type": "color"
+      },
+      "70": {
+        "value": "#6a00c2ff",
+        "type": "color"
+      },
+      "73": {
+        "value": "#5f00adff",
+        "type": "color"
+      },
+      "75": {
+        "value": "#540099ff",
+        "type": "color"
+      },
+      "78": {
+        "value": "#490085ff",
+        "type": "color"
+      },
+      "80": {
+        "value": "#3d0070ff",
+        "type": "color"
+      },
+      "83": {
+        "value": "#32005cff",
+        "type": "color"
+      },
+      "85": {
+        "value": "#270047ff",
+        "type": "color"
+      },
+      "88": {
+        "value": "#1c0033ff",
+        "type": "color"
+      },
+      "90": {
+        "value": "#11001fff",
+        "type": "color"
+      },
+      "93": {
+        "value": "#06000aff",
+        "type": "color"
+      },
+      "95": {
+        "value": "#050008ff",
+        "type": "color"
+      },
+      "100": {
+        "value": "#050008ff",
+        "type": "color"
+      }
     }
   },
   "breakpoint": {

package/package.json

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

package/src/system/Card/Card.tsx

@@ -25,6 +25,7 @@ export interface CardProps {
 	renderHeader?: ( title?: string ) => React.ReactNode;
 	bodyStyles?: ThemeUIStyleObject;
 	headerStyles?: ThemeUIStyleObject;
+	hideBody?: boolean;
 }
 
 type CardBoxProps = CardProps & BoxProps;
@@ -38,6 +39,7 @@ export const Card = forwardRef< HTMLElement, CardBoxProps >(
 			bodyStyles,
 			headerStyles,
 			children,
+			hideBody = false,
 			...rest
 		}: CardProps,
 		ref: Ref< HTMLElement >
@@ -64,15 +66,17 @@ export const Card = forwardRef< HTMLElement, CardBoxProps >(
 					</Box>
 				) }
 
-				<Box
-					className="vip-card-body-component"
-					sx={ {
-						variant: `cards.${ variant }.children`,
-						...bodyStyles,
-					} }
-				>
-					{ children }
-				</Box>
+				{ ! hideBody && (
+					<Box
+						className="vip-card-body-component"
+						sx={ {
+							variant: `cards.${ variant }.children`,
+							...bodyStyles,
+						} }
+					>
+						{ children }
+					</Box>
+				) }
 			</Box>
 		);
 	}

package/src/system/Nav/Nav.stories.tsx

@@ -189,19 +189,6 @@ export const Menu: Story = {
 					</NavItem.Menu>
 				</NavItem.MenuGroup>
 
-				<NavItem.MenuGroup
-					label="Clickable Parent Navigation Item"
-					renderIcon={ size => <BiHistory size={ size } /> }
-					parentHref="https://random-website.com/"
-				>
-					<NavItem.Menu as={ CustomLink } href="https://google.com/">
-						Test
-					</NavItem.Menu>
-					<NavItem.Menu as={ CustomLink } href="https://wpvip.com/">
-						Item
-					</NavItem.Menu>
-				</NavItem.MenuGroup>
-
 				<NavItem.MenuGroup
 					label="Performance"
 					renderIcon={ size => <BiTachometer size={ size } /> }

package/src/system/Nav/NavItemGroup.tsx

@@ -19,7 +19,6 @@ export interface NavItemGroupProps extends NavItemBaseProps {
 	renderIcon?: NavItemRenderIconProp;
 	activeChildren?: boolean;
 	label: string;
-	parentHref?: string;
 }
 
 const NavItemGroupBase = forwardRef< HTMLLIElement, NavItemGroupProps >(
@@ -34,7 +33,6 @@ const NavItemGroupBase = forwardRef< HTMLLIElement, NavItemGroupProps >(
 			renderIcon,
 			children,
 			sx,
-			parentHref,
 		}: NavItemGroupProps,
 		ref: Ref< HTMLLIElement >
 	) => {
@@ -53,10 +51,9 @@ const NavItemGroupBase = forwardRef< HTMLLIElement, NavItemGroupProps >(
 			>
 				<Collapsible.Root defaultOpen={ active } open={ isExpanded } onOpenChange={ handleExpand }>
 					<Collapsible.Trigger asChild>
-						<div
-							role="button"
-							tabIndex={ 0 }
-							aria-haspopup="true"
+						<button
+							type="button"
+							aria-haspopup={ true }
 							data-active={ active || undefined }
 							data-open={ isExpanded || undefined }
 							data-active-children={ activeChildren || undefined }
@@ -68,22 +65,7 @@ const NavItemGroupBase = forwardRef< HTMLLIElement, NavItemGroupProps >(
 							{ renderIcon ? (
 								<IconContainer>{ renderIcon( NAV_ITEM_ICON_SIZE ) }</IconContainer>
 							) : null }
-
-							{ parentHref ? (
-								<a
-									href={ parentHref }
-									sx={ {
-										textDecoration: 'none',
-										color: 'inherit',
-										'&:hover': { textDecoration: 'none' },
-									} }
-									onClick={ e => e.stopPropagation() }
-								>
-									{ label }
-								</a>
-							) : (
-								label
-							) }
+							{ label }
 
 							<BiChevronDown
 								data-arrow-indicator
@@ -91,9 +73,8 @@ const NavItemGroupBase = forwardRef< HTMLLIElement, NavItemGroupProps >(
 								size={ NAV_ITEM_ICON_SIZE }
 								sx={ { color: 'icon.secondary' } }
 							/>
-						</div>
+						</button>
 					</Collapsible.Trigger>
-
 					<Collapsible.Content sx={ navItemGroupContentStyles }>
 						<ul sx={ navItemGroupContentUlStyles }>{ children }</ul>
 					</Collapsible.Content>

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

@@ -95,7 +95,18 @@ export const Default = () => (
 			<Link href="/?path=/story/avatar--default">A link to Avatar</Link>
 		</Notice>
 
-		<Notice variant="info" sx={ { mb: 4 } }>
+		<Notice variant="success" sx={ { mb: 4 } } title="Collapsible Notice" collapsible>
+			Bucket names in Amazon S3 are globally unique.{ ' ' }
+			<Link href="/?path=/story/avatar--default">A link to Avatar</Link>
+		</Notice>
+
+		<Notice
+			variant="info"
+			sx={ { mb: 4 } }
+			title="Collapsible Notice Auto-Expanded"
+			collapsible
+			defaultOpen
+		>
 			Bucket names in Amazon S3 are globally unique.
 		</Notice>
 	</React.Fragment>

package/src/system/Notice/Notice.tsx

@@ -3,20 +3,25 @@
 /**
  * External dependencies
  */
+import * as Collapsible from '@radix-ui/react-collapsible';
 import classNames from 'classnames';
-import React from 'react';
+import React, { useState, useId } from 'react';
+import { BiChevronDown, BiChevronUp } from 'react-icons/bi';
 import { MdError, MdWarning, MdCheckCircle, MdInfo } from 'react-icons/md';
 import { ThemeUIStyleObject } from 'theme-ui';
 
 /**
  * Internal dependencies
  */
-import { Box, Flex, Heading, Card } from '../';
+import { Box, Flex, Heading, Card, Button } from '../';
 
-interface NoticeIconProps {
-	color: string;
-	variant: ColorVariants;
-}
+type ColorVariants = 'warning' | 'error' | 'alert' | 'success' | 'info';
+
+type CollapsibleProps = {
+	collapsible?: boolean;
+	defaultOpen?: boolean;
+	ariaContentId?: string;
+};
 
 export type NoticeProps = React.HTMLAttributes< HTMLDivElement > & {
 	children: React.ReactNode;
@@ -26,10 +31,9 @@ export type NoticeProps = React.HTMLAttributes< HTMLDivElement > & {
 	variant?: ColorVariants;
 	headingVariant?: React.ElementType;
 	className?: string;
-};
-type ColorVariants = 'warning' | 'error' | 'alert' | 'success' | 'info';
+} & CollapsibleProps;
 
-const NoticeIcon = ( { color, variant }: NoticeIconProps ) => {
+const NoticeIcon = ( { color, variant }: { color: string; variant: ColorVariants } ) => {
 	const sx = { color, flex: '0 0 auto' };
 	const size = 24;
 
@@ -56,40 +60,147 @@ export const Notice = React.forwardRef< HTMLDivElement, NoticeProps >(
 			sx = {},
 			title,
 			variant = 'warning',
+			collapsible = false,
+			defaultOpen = false,
 			...props
 		},
 		forwardRef
 	) => {
+		const [ isExpanded, setIsExpanded ] = useState( defaultOpen );
+		const handleExpand = ( openValue: boolean ) => setIsExpanded( openValue );
+		const ChevronIcon = isExpanded ? BiChevronUp : BiChevronDown;
+		const contentId = useId();
+
+		const iconColor = `notice.icon.${ variant }`;
+		const textColor = `notice.text.${ variant }`;
+
+		const baseCardSx: ThemeUIStyleObject = {
+			boxShadow: 'none',
+			borderRadius: 2,
+			bg: inline || collapsible ? 'transparent' : `notice.background.${ variant }`,
+			color: textColor,
+			fontSize: 2,
+			p: {
+				color: textColor,
+				fontSize: 2,
+			},
+			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`,
+				},
+			},
+			ul: {
+				pl: 5,
+			},
+			...sx,
+		};
+
+		if ( collapsible ) {
+			const renderHeader = () => (
+				<Collapsible.Trigger asChild aria-expanded={ isExpanded } aria-controls={ contentId }>
+					<Button
+						variant="text"
+						sx={ {
+							border: 'none',
+							width: '100%',
+							display: 'flex',
+							alignItems: 'center',
+							justifyContent: 'space-between',
+							cursor: 'pointer',
+							bg: `notice.background.${ variant }`,
+							'&:hover, &:focus': {
+								bg: `notice.background.${ variant }`,
+								boxShadow: 'none',
+								transform: 'none',
+								border: 'none',
+							},
+							px: 3,
+							py: 2,
+							borderBottomLeftRadius: '0 !important',
+							borderBottomRightRadius: '0 !important',
+						} }
+					>
+						<Flex sx={ { alignItems: 'center', gap: 2 } }>
+							<NoticeIcon color={ iconColor } variant={ variant } />
+							<Heading
+								as={ headingVariant }
+								id={ `${ contentId }-heading` }
+								sx={ {
+									color: textColor,
+									fontSize: 2,
+									fontWeight: 'bold',
+									my: 2,
+									mx: 3,
+								} }
+							>
+								{ title }
+							</Heading>
+						</Flex>
+						<ChevronIcon
+							size={ 32 }
+							sx={ {
+								color: 'icon.primary',
+							} }
+							data-arrow-indicator
+							aria-hidden="true"
+						/>
+					</Button>
+				</Collapsible.Trigger>
+			);
+
+			return (
+				<Collapsible.Root
+					defaultOpen={ defaultOpen }
+					onOpenChange={ handleExpand }
+					data-active={ defaultOpen || undefined }
+				>
+					<Card
+						variant="notice"
+						hideBody={ ! isExpanded }
+						renderHeader={ renderHeader }
+						bodyStyles={ {
+							border: '2px solid',
+							borderColor: `notice.background.${ variant }`,
+							borderTop: 'none',
+							borderBottomLeftRadius: 2,
+							borderBottomRightRadius: 2,
+							px: 4,
+							py: 3,
+						} }
+						sx={ {
+							...baseCardSx,
+							border: 'none',
+							overflow: 'hidden',
+						} }
+						className={ classNames( 'vip-notice-component', className ) }
+						{ ...props }
+						ref={ forwardRef }
+					>
+						<Collapsible.Content
+							id={ contentId }
+							sx={ {
+								mx: 2,
+								my: 2,
+							} }
+						>
+							{ children }
+						</Collapsible.Content>
+					</Card>
+				</Collapsible.Root>
+			);
+		}
+
 		return (
 			<Card
 				variant="notice"
-				sx={ {
-					boxShadow: 'none',
-					borderRadius: 2,
-					bg: inline ? 'transparent' : `notice.background.${ variant }`,
-					color: `notice.text.${ variant }`,
-					fontSize: 2,
-					p: {
-						color: `notice.text.${ variant }`,
-						fontSize: 2,
-					},
-					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`,
-						},
-					},
-					ul: {
-						pl: 5,
-					},
-					...sx,
-				} }
+				sx={ baseCardSx }
 				className={ classNames( 'vip-notice-component', className ) }
 				ref={ forwardRef }
 				{ ...props }
@@ -108,8 +219,8 @@ export const Notice = React.forwardRef< HTMLDivElement, NoticeProps >(
 							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 } />
+						/>
+						<NoticeIcon color={ iconColor } variant={ variant } />
 					</Flex>
 				</Box>
 				<Box>
@@ -117,7 +228,7 @@ export const Notice = React.forwardRef< HTMLDivElement, NoticeProps >(
 						<Heading
 							as={ headingVariant }
 							sx={ {
-								color: `notice.text.${ variant }`,
+								color: textColor,
 								mb: 0,
 								fontSize: 2,
 								fontWeight: 'bold',