@automattic/vip-design-system 0.28.1 → 0.28.2

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/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/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.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>
 				) }

package/src/system/theme/colors.js

@@ -4,174 +4,8 @@
  * External dependencies
  */
 
-/**
- * Internal dependencies
- */
-
-import { ValetTheme } from './getColor';
-
-export const light = {
-	...ValetTheme.color,
-	brand: ValetTheme.color.gold,
-	grey: ValetTheme.color.gray,
-};
-
-export const dark = {
-	black: 'rgba(19, 25, 30, 1)',
-	brand: {
-		0: '#1A160F',
-		3: '#231809',
-		7: '#301F08',
-		10: '#301F08',
-		20: '#3A2406',
-		30: '#432804',
-		40: '#502E01',
-		50: '#603700',
-		60: '#774400',
-		70: '#B96B03',
-		80: '#C37A19',
-		90: '#CA8529',
-		100: '#FAF2E7',
-	},
-	grey: {
-		0: '#161615',
-		5: '#1C1C1B',
-		10: '#242221',
-		20: '#282827',
-		30: '#2F2D2C',
-		40: '#353431',
-		50: '#3F3D3B',
-		60: '#524F4C',
-		70: '#726F6A',
-		80: '#807D78',
-		90: '#A29F9B',
-		100: '#EDEDEC',
-	},
-	blue: {
-		0: '#0B1A1C',
-		5: '#062124',
-		10: '#032D31',
-		20: '#00353B',
-		30: '#003C42',
-		40: '#00444C',
-		50: '#005059',
-		60: '#00636E',
-		70: '#009FB1',
-		80: '#09BDD2',
-		90: '#2AC5D7',
-		100: '#E6F9FB',
-	},
-	green: {
-		0: '#0D1913',
-		5: '#0C1F16',
-		10: '#0F291D',
-		20: '#113122',
-		30: '#133927',
-		40: '#16442E',
-		50: '#1B5439',
-		60: '#236E4A',
-		70: '#30A46C',
-		80: '#3CB179',
-		90: '#4CC389',
-		100: '#E4FAF0',
-	},
-	pink: {
-		0: 'rgba(255, 248, 246, 1)',
-		5: 'rgba(255, 232, 230, 1)',
-		10: 'rgba(255, 214, 210, 1)',
-		15: 'rgba(255, 197, 193, 1)',
-		20: 'rgba(251, 183, 180, 1)',
-		25: 'rgba(239, 171, 168, 1)',
-		30: 'rgba(226, 158, 157, 1)',
-		35: 'rgba(212, 146, 148, 1)',
-		40: 'rgba(202, 133, 136, 1)',
-		45: 'rgba(188, 122, 126, 1)',
-		50: 'rgba(176, 109, 116, 1)',
-		55: 'rgba(163, 95, 106, 1)',
-		60: 'rgba(149, 83, 93, 1)',
-		65: 'rgba(137, 71, 85, 1)',
-		70: 'rgba(124, 57, 74, 1)',
-		75: 'rgba(109, 41, 62, 1)',
-		80: 'rgba(95, 30, 52, 1)',
-		85: 'rgba(83, 14, 43, 1)',
-		90: 'rgba(69, 0, 31, 1)',
-		95: 'rgba(53, 0, 18, 1)',
-		100: 'rgba(46, 0, 3, 1)',
-	},
-	salmon: {
-		0: 'rgba(254, 248, 248, 1)',
-		5: 'rgba(254, 233, 228, 1)',
-		10: 'rgba(254, 214, 206, 1)',
-		15: 'rgba(254, 195, 177, 1)',
-		20: 'rgba(255, 178, 150, 1)',
-		25: 'rgba(255, 163, 120, 1)',
-		30: 'rgba(249, 148, 94, 1)',
-		35: 'rgba(237, 137, 85, 1)',
-		40: 'rgba(224, 123, 77, 1)',
-		45: 'rgba(210, 113, 70, 1)',
-		50: 'rgba(197, 101, 63, 1)',
-		55: 'rgba(181, 86, 56, 1)',
-		60: 'rgba(167, 73, 48, 1)',
-		65: 'rgba(153, 60, 43, 1)',
-		70: 'rgba(137, 47, 38, 1)',
-		75: 'rgba(124, 30, 30, 1)',
-		80: 'rgba(108, 15, 23, 1)',
-		85: 'rgba(94, 0, 16, 1)',
-		90: 'rgba(78, 0, 0, 1)',
-		95: 'rgba(62, 0, 1, 1)',
-		100: 'rgba(52, 0, 2, 1)',
-	},
-	orange: {
-		0: 'rgba(255, 249, 241, 1)',
-		5: 'rgba(255, 233, 219, 1)',
-		10: 'rgba(255, 215, 189, 1)',
-		15: 'rgba(255, 195, 159, 1)',
-		20: 'rgba(255, 178, 126, 1)',
-		25: 'rgba(254, 159, 95, 1)',
-		30: 'rgba(255, 139, 64, 1)',
-		35: 'rgba(255, 123, 40, 1)',
-		40: 'rgba(244, 110, 21, 1)',
-		45: 'rgba(231, 98, 5, 1)',
-		50: 'rgba(215, 80, 1, 1)',
-		55: 'rgba(197, 73, 0, 1)',
-		60: 'rgba(180, 60, 0, 1)',
-		65: 'rgba(165, 49, 0, 1)',
-		70: 'rgba(148, 38, 1, 1)',
-		75: 'rgba(129, 23, 1, 1)',
-		80: 'rgba(111, 8, 1, 1)',
-		85: 'rgba(95, 0, 0, 1)',
-		90: 'rgba(78, 0, 0, 1)',
-		95: 'rgba(60, 0, 0, 1)',
-		100: 'rgba(50, 0, 3, 1)',
-	},
-	yellow: {
-		0: '#1F1300',
-		5: '#261700',
-		10: '#301E00',
-		20: '#3B2400',
-		30: '#462B00',
-		40: '#553400',
-		50: '#674003',
-		60: '#804F00',
-		70: '#FFB031',
-		80: '#FFC568',
-		90: '#F69E12',
-		100: '#FFF2DE',
-	},
-	red: {
-		0: '#1E1313',
-		5: '#2B1311',
-		10: '#3C1714',
-		20: '#491915',
-		30: '#561B17',
-		40: '#681E19',
-		50: '#832019',
-		60: '#AC241A',
-		70: '#F04539',
-		80: '#F6574B',
-		90: '#FA6459',
-		100: '#FFEEED',
-	},
-};
-
-export default light;
+export default theme => ( {
+	...theme.color,
+	brand: theme.color.gold,
+	grey: theme.color.gray,
+} );