@automattic/vip-design-system 0.28.0 → 0.28.2

package/build/system/theme/textStyles.js

@@ -0,0 +1,51 @@
+"use strict";
+
+exports.__esModule = true;
+exports.textStyles = void 0;
+var textStyles = {
+  h1: {
+    fontSize: 5,
+    marginBottom: 3,
+    letterSpacing: '-.02em',
+    fontWeight: 'body',
+    fontFamily: 'serif',
+    color: 'heading'
+  },
+  h2: {
+    fontSize: 4,
+    marginBottom: 2,
+    letterSpacing: '-.005em',
+    fontWeight: 400,
+    color: 'heading'
+  },
+  h3: {
+    fontSize: 3,
+    marginBottom: 3,
+    letterSpacing: '-.005em',
+    lineHeight: 1.4,
+    fontWeight: 'heading',
+    color: 'heading'
+  },
+  h4: {
+    fontSize: 2,
+    marginBottom: 1,
+    lineHeight: 1.5,
+    fontWeight: 'heading',
+    color: 'heading'
+  },
+  h5: {
+    fontSize: 1,
+    marginBottom: 1,
+    lineHeight: 1.5,
+    fontWeight: 'heading',
+    color: 'heading'
+  },
+  caps: {
+    fontSize: 1,
+    marginBottom: 2,
+    color: 'muted',
+    fontWeight: 'bold',
+    letterSpacing: '.05em'
+  }
+};
+exports.textStyles = textStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.28.0",
+	"version": "0.28.2",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",
@@ -11,8 +11,12 @@
 		"jest": "NODE_ENV=test jest --detectOpenHandles --env=jsdom",
 		"jest:coverage": "npm run jest && open-cli ./coverage/index.html",
 		"jest:watch": "npm run jest --watch",
-		"theme-builder-copy": "mkdir -p build/system/theme/generated/ && cp src/system/theme/generated/valet-theme.json build/system/theme/generated/valet-theme.json",
-		"theme-update": "token-transformer tokens/valet-core src/system/theme/generated/valet-theme.json valet-core,wpvip-productive-color",
+		"theme-builder-copy": "npm run theme-builder-copy-light && npm run theme-builder-copy-dark",
+		"theme-builder-copy-light": "mkdir -p build/system/theme/generated/ && cp src/system/theme/generated/valet-theme-light.json build/system/theme/generated/valet-theme-light.json",
+		"theme-builder-copy-dark": "mkdir -p build/system/theme/generated/ && cp src/system/theme/generated/valet-theme-dark.json build/system/theme/generated/valet-theme-dark.json",
+		"theme-update": "npm run theme-update-light && npm run theme-update-dark",
+		"theme-update-light": "token-transformer tokens/valet-core src/system/theme/generated/valet-theme-light.json valet-core,wpvip-productive-color",
+		"theme-update-dark": "token-transformer tokens/valet-core src/system/theme/generated/valet-theme-dark.json valet-core,wpvip-productive-color-dark",
 		"lint": "eslint . --fix --max-warnings 0",
 		"storybook": "start-storybook -p 6006",
 		"dev": "npm run storybook",

package/src/system/Accordion/Accordion.js

@@ -81,15 +81,15 @@ export const Trigger = React.forwardRef(
 					fontWeight: 600,
 
 					'&[data-state="closed"]': {
-						backgroundColor: ( { accordion } ) => accordion.background.closed,
+						backgroundColor: 'accordion.background.closed',
 					},
 					'&[data-state="open"]': {
-						backgroundColor: ( { accordion } ) => accordion.background.open,
+						backgroundColor: 'accordion.background.open',
 						borderBottom: '1px solid',
 						borderBottomColor: 'borders.2',
 						'.vip-accordion-trigger-indicator': { transform: 'rotate(270deg)' },
 					},
-					'&:hover': { backgroundColor: ( { accordion } ) => accordion.background.hover },
+					'&:hover': { backgroundColor: 'accordion.background.hover' },
 					...sx,
 				} }
 				{ ...props }
@@ -122,7 +122,9 @@ Trigger.propTypes = {
 export const TriggerWithIcon = React.forwardRef( ( { children, icon, ...props }, forwardedRef ) => (
 	<Trigger { ...props } ref={ forwardedRef }>
 		<span sx={ { color: 'icon.primary', fontSize: 3 } }>{ icon }</span>
-		<div sx={ { color: 'heading', flexGrow: 1, textAlign: 'left', ml: 3 } }>{ children }</div>
+		<div sx={ { color: 'accordion.trigger.text', flexGrow: 1, textAlign: 'left', ml: 3 } }>
+			{ children }
+		</div>
 	</Trigger>
 ) );
 
@@ -137,8 +139,8 @@ export const Content = React.forwardRef( ( { children, sx = {}, ...props }, forw
 	return (
 		<AccordionPrimitive.Content
 			sx={ {
-				backgroundColor: 'transparent',
-				color: 'text',
+				backgroundColor: 'accordion.content.background',
+				color: 'accordion.content.text',
 				fontSize: 2,
 				overflow: 'hidden',
 				px: 3,

package/src/system/Badge/Badge.stories.jsx

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { Badge } from '..';
+import { Badge, Link } from '..';
 
 export default {
 	title: 'Badge',
@@ -11,7 +11,7 @@ export default {
 const Template = props => <Badge { ...props } sx={ { m: 2 } } />;
 const TemplateLink = props => (
 	<Template { ...props } sx={ { m: 2 } }>
-		<a href="http://google.com">Google.com</a>
+		<Link href="http://google.com">Google.com</Link>
 	</Template>
 );
 

package/src/system/Dialog/DialogButton.js

@@ -38,7 +38,7 @@ const DialogButton = ( { label, variant = 'secondary', value, children, ...props
 					flex: '1 1 auto',
 					whiteSpace: 'nowrap',
 					overflow: 'hidden',
-					color: 'input.text',
+					color: 'input.text.default',
 					textOverflow: 'ellipsis',
 				} }
 			>

package/src/system/Dropdown/Dropdown.stories.jsx

@@ -12,6 +12,8 @@ import { DotFilledIcon, CheckIcon, ChevronRightIcon } from '@radix-ui/react-icon
 import * as Dropdown from '.';
 import { Button } from '../Button';
 import * as NewDialog from '../NewDialog';
+import { Link } from '../Link';
+import { Text } from '../Text';
 
 export default {
 	title: 'Dropdown',
@@ -29,17 +31,17 @@ export const Default = () => (
 			<Dropdown.Item>Errored</Dropdown.Item>
 		</Dropdown.Root>
 
-		<p>
+		<Text>
 			This component is based on the Radix Dropdown. You can find all available options, props and
 			features in the{ ' ' }
-			<a
+			<Link
 				href="https://www.radix-ui.com/docs/primitives/components/dropdown-menu"
 				target="_blank"
 				rel="noopener noreferrer"
 			>
 				Dropdown Documentation page.
-			</a>
-		</p>
+			</Link>
+		</Text>
 	</>
 );
 
@@ -98,17 +100,17 @@ export const ComplexOptions = () => {
 				</Dropdown.RadioGroup>
 			</Dropdown.Root>
 
-			<p>
+			<Text>
 				This component is based on the Radix Dropdown. You can find all available options, props and
 				features in the{ ' ' }
-				<a
+				<Link
 					href="https://www.radix-ui.com/docs/primitives/components/dropdown-menu"
 					target="_blank"
 					rel="noopener noreferrer"
 				>
 					Dropdown Documentation page.
-				</a>
-			</p>
+				</Link>
+			</Text>
 		</>
 	);
 };
@@ -134,11 +136,11 @@ export const WithDialog = () => {
 
 	return (
 		<div>
-			<p>
+			<Text>
 				This is an important example when combining the Dropdown component with the NewDialog
 				component. In order to have the correct accessibility, there are some events you need to
 				use. Use this example if you want to copy and paste the code.
-			</p>
+			</Text>
 
 			<Dropdown.Root
 				modal={ ! alertOpen }

package/src/system/Form/InlineSelect.js

@@ -71,10 +71,10 @@ const InlineSelect = ( {
 				sx={ {
 					'.select__control': {
 						background: 'none',
-						color: 'input.text',
+						color: 'input.text.default',
 					},
 					'.select__single-value': {
-						color: 'input.text',
+						color: 'input.text.default',
 						px: 1,
 					},
 					'.react-select__option': {
@@ -90,7 +90,7 @@ const InlineSelect = ( {
 						borderColor: 'input.border',
 					},
 					'.select__placeholder': {
-						color: 'input.placeholder',
+						color: 'input.text.placeholder',
 					},
 				} }
 				{ ...props }

package/src/system/Form/Input.js

@@ -17,6 +17,7 @@ const inputStyles = {
 	unset: 'all',
 	...baseControlStyle,
 	lineHeight: 'inherit',
+	height: '36px',
 	px: 3,
 	py: 2,
 	fontSize: 2,

package/src/system/Form/Input.styles.js

@@ -4,7 +4,7 @@ export const baseControlBorderStyle = {
 	borderColor: 'input.border.default',
 };
 
-export const inputBaseText = 'input.text';
+export const inputBaseText = 'input.text.default';
 export const inputBaseBackground = 'input.background';
 export const baseControlFocusStyle = {
 	'&:focus': theme => theme.outline,
@@ -26,7 +26,7 @@ export const baseControlStyle = {
 	},
 
 	'&::placeholder': {
-		color: 'input.placeholder',
+		color: 'input.text.placeholder',
 		opacity: 1,
 	},
 };

package/src/system/Form/Label.js

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
  */
 import { RequiredLabel } from './RequiredLabel';
 
-export const baseLabelColor = 'heading';
+export const baseLabelColor = 'input.label.default';
 export const baseLabelStyle = {
 	fontWeight: 500,
 	fontSize: 2,

package/src/system/Form/Radio.stories.jsx

@@ -8,7 +8,7 @@ import { useState } from 'react';
 /**
  * Internal dependencies
  */
-import { Form } from '..';
+import { Form, Link } from '..';
 import { Radio } from './Radio';
 import { Flex } from '../Flex';
 import { Label } from './Label';
@@ -27,9 +27,9 @@ export const Default = () => {
 			<p>
 				Per recommendation, if you have a Radio button, use a Fieldset with a legend as wrapper to
 				your options.{ ' ' }
-				<a href="https://a11y-collective.github.io/demos/en/accessible-code/form-fieldsets.html">
+				<Link href="https://a11y-collective.github.io/demos/en/accessible-code/form-fieldsets.html">
 					Reference to Form fieldsets
-				</a>
+				</Link>
 			</p>
 			<Form.Fieldset>
 				<Form.Legend sx={ { mb: 0, fontSize: 2, fontWeight: 'bold' } }>

package/src/system/Form/SearchSelect.js

@@ -89,7 +89,7 @@ const SearchSelect = props => (
 		sx={ {
 			'.select__control': {
 				background: 'none',
-				color: 'input.text',
+				color: 'input.text.default',
 				border: '1px solid',
 				borderColor: 'input.border',
 				margin: 0,
@@ -98,10 +98,10 @@ const SearchSelect = props => (
 				fontSize: 2,
 			},
 			'.select__placeholder': {
-				color: 'input.placeholder',
+				color: 'input.text.placeholder',
 			},
 			'.select__single-value': {
-				color: 'input.text',
+				color: 'input.text.default',
 				px: 1,
 			},
 			'.select__menu': {
@@ -109,7 +109,7 @@ const SearchSelect = props => (
 				boxShadow: 'medium',
 			},
 			'.react-select__option': {
-				color: 'input.text',
+				color: 'input.text.default',
 				paddingTop: 1,
 				paddingBottom: 1,
 				paddingLeft: 2,

package/src/system/NewForm/FormAutocomplete.js

@@ -18,6 +18,7 @@ import { Label } from '../Form/Label';
 import { FormSelectSearch } from './FormSelectSearch';
 import { FormSelectLoading } from './FormSelectLoading';
 import { baseControlBorderStyle, inputBaseBackground, inputBaseText } from '../Form/Input.styles';
+import { Validation } from '../Form';
 
 const baseBorderTextColors = {
 	...baseControlBorderStyle,
@@ -115,6 +116,8 @@ const FormAutocomplete = React.forwardRef(
 			showAllValues = true,
 			source,
 			value,
+			hasError,
+			errorMessage,
 			...props
 		},
 		forwardRef
@@ -246,6 +249,12 @@ const FormAutocomplete = React.forwardRef(
 						<FormSelectArrow />
 					</FormSelectContent>
 				</div>
+
+				{ hasError && errorMessage && (
+					<Validation isValid={ false } describedId={ forLabel }>
+						{ errorMessage }
+					</Validation>
+				) }
 			</div>
 		);
 	}
@@ -273,6 +282,8 @@ FormAutocomplete.propTypes = {
 	showAllValues: PropTypes.bool,
 	source: PropTypes.func,
 	value: PropTypes.string,
+	hasError: PropTypes.bool,
+	errorMessage: PropTypes.string,
 };
 
 FormAutocomplete.displayName = 'FormAutocomplete';

package/src/system/NewForm/FormAutocomplete.stories.jsx

@@ -134,3 +134,16 @@ export const WithCustomMessages = () => {
 		</>
 	);
 };
+export const WithErrors = () => {
+	const customArgs = {
+		...args,
+		hasError: true,
+		errorMessage: 'Please select a value',
+	};
+
+	return (
+		<>
+			<DefaultComponent { ...customArgs } />
+		</>
+	);
+};

package/src/system/NewForm/FormSelect.stories.jsx

@@ -5,6 +5,7 @@
  */
 import { useCallback, useState } from 'react';
 import * as Form from '.';
+import { Link } from '../Link';
 
 export default {
 	title: 'Form/Select',
@@ -49,14 +50,14 @@ const DefaultComponent = ( { label = 'Label', width = 250, onChange, ...rest } )
 
 		<p>
 			This component was heavily inspired by the{ ' ' }
-			<a
+			<Link
 				href="https://designsystem.digital.gov/components/select/"
 				target="_blank"
 				rel="noreferrer"
 			>
 				{ ' ' }
 				U.S. Web Design System (USWDS) Select component
-			</a>
+			</Link>
 			.
 		</p>
 		<Form.Root>

package/src/system/Notice/Notice.js

@@ -14,7 +14,9 @@ import { MdError, MdWarning, MdCheckCircle, MdInfo } from 'react-icons/md';
 import { Box, Flex, Heading, Card } from '../';
 
 const colorSystemVariant = color =>
-	( { warning: 'warning', alert: 'error', success: 'success', info: 'info' }[ color ] );
+	( { warning: 'warning', error: 'error', alert: 'error', success: 'success', info: 'info' }[
+		color
+	] );
 
 const NoticeIcon = ( { color, variant } ) => {
 	let Icon = MdWarning;

package/src/system/Notice/Notice.stories.jsx

@@ -6,7 +6,7 @@
  * Internal dependencies
  */
 import React from 'react';
-import { Notice, Text, Link } from '..';
+import { Notice, Link } from '..';
 
 export default {
 	title: 'Notice',
@@ -21,10 +21,8 @@ export const Default = () => (
 			sx={ { mb: 4 } }
 			title="Your site is ready to launch!"
 		>
-			<Text sx={ { mb: 0 } }>
-				It looks like you&lsquo;re ready to share your{ ' ' }
-				<Link href="https://google.com/">application with the world.</Link>
-			</Text>
+			It looks like you&lsquo;re ready to share your{ ' ' }
+			<Link href="https://google.com/">application with the world.</Link>
 		</Notice>
 
 		<Notice variant="success" sx={ { mb: 4 } }>
@@ -43,10 +41,8 @@ export const Default = () => (
 		</Notice>
 
 		<Notice variant="info" sx={ { mb: 4 } } title="Please read this first">
-			<Text sx={ { mb: 0 } }>
-				This notice has a title and children and{ ' ' }
-				<a href="/?path=/story/avatar--default">A link to Avatar</a>
-			</Text>
+			This notice has a title and children and{ ' ' }
+			<Link href="/?path=/story/avatar--default">A link to Avatar</Link>
 		</Notice>
 
 		<Notice
@@ -57,13 +53,13 @@ export const Default = () => (
 		>
 			<ul sx={ { mb: 0 } }>
 				<li>
-					<a href="#name">Please enter your name.</a>
+					<Link href="#name">Please enter your name.</Link>
 				</li>
 				<li>
-					<a href="#email">Please enter your email address.</a>
+					<Link href="#email">Please enter your email address.</Link>
 				</li>
 				<li>
-					<a href="#terms">Please agree to the terms.</a>
+					<Link href="#terms">Please agree to the terms.</Link>
 				</li>
 			</ul>
 		</Notice>

package/src/system/Table/Table.stories.jsx

@@ -30,7 +30,7 @@ export const Default = () => (
 				gbc
 			/>
 			<TableRow>
-				<TableCell sx={ { backgroundColor: 'lightgray' } }>
+				<TableCell>
 					<Flex sx={ { alignItems: 'center' } } key="user">
 						simon
 					</Flex>

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

@@ -6,7 +6,7 @@ import React from 'react';
 /**
  * Internal dependencies
  */
-import { Tabs, TabsTrigger, TabsList, TabsContent, Text } from '..';
+import { Tabs, TabsTrigger, TabsList, TabsContent, Text, Link, Button } from '..';
 
 export default {
 	title: 'Tabs',
@@ -25,13 +25,13 @@ export const Default = () => (
 		</TabsList>
 		<TabsContent value="all">
 			<Text>
-				All content <a href="https://google.com">https://google.com</a>
+				All content <Link href="https://google.com">https://google.com</Link>
 			</Text>
 		</TabsContent>
 		<TabsContent value="live">Live content</TabsContent>
 		<TabsContent value="dev">
 			<Text>
-				In Development content <button type="button">Hey I am a button</button>{ ' ' }
+				In Development content <Button variant="secondary">Hey I am a button</Button>{ ' ' }
 			</Text>
 		</TabsContent>
 	</Tabs>

package/src/system/Wizard/WizardStep.js

@@ -25,7 +25,7 @@ const WizardStep = React.forwardRef(
 			borderLeftColor = 'primary';
 		}
 
-		let color = 'secondary';
+		let color = 'text';
 
 		if ( complete ) {
 			color = 'success';
@@ -68,12 +68,18 @@ const WizardStep = React.forwardRef(
 							fontWeight: active ? 'bold' : 'normal',
 						} }
 					>
-						<MdCheckCircle aria-hidden="true" sx={ { mr: 2 } } />
+						<MdCheckCircle
+							aria-hidden="true"
+							sx={ { mr: 2, color: active ? 'icon.primary' : 'icon.disabled' } }
+						/>
 						{ title }
 					</Heading>
 				) : (
 					<Flex sx={ { alignItems: 'center', color } }>
-						<MdCheckCircle aria-hidden="true" sx={ { mr: 2 } } />
+						<MdCheckCircle
+							aria-hidden="true"
+							sx={ { mr: 2, color: active ? 'icon.primary' : 'icon.disabled' } }
+						/>
 						{ title }
 					</Flex>
 				) }