@automattic/vip-design-system 0.26.1 → 0.26.3

package/src/system/Form/Validation.js

@@ -9,27 +9,33 @@ import { MdErrorOutline, MdCheckCircle } from 'react-icons/md';
 /**
  * Internal dependencies
  */
-import { Heading } from '..';
 
-const Validation = ( { children, isValid, ...props } ) => {
+const Validation = ( { children, isValid, describedId = null, ...props } ) => {
 	const Icon = isValid ? MdCheckCircle : MdErrorOutline;
+	const IconLabel = isValid ? 'Valid' : 'Invalid';
 
 	return (
-		<Heading
-			variant="h5"
-			as="p"
-			sx={ { color: isValid ? 'success' : 'error', display: 'flex', alignItems: 'center' } }
+		<p
+			sx={ {
+				color: isValid ? 'success' : 'error',
+				display: 'flex',
+				alignItems: 'center',
+				m: 0,
+				fontSize: 1,
+			} }
+			id={ describedId ? `describe-${ describedId }-validation` : undefined }
 			{ ...props }
 		>
-			<Icon sx={ { mr: 1 } } />
+			<Icon sx={ { mr: 1 } } aria-label={ IconLabel } />
 			{ children }
-		</Heading>
+		</p>
 	);
 };
 
 Validation.propTypes = {
 	children: PropTypes.node,
 	isValid: PropTypes.bool,
+	describedId: PropTypes.string,
 };
 
 export { Validation };

package/src/system/NewConfirmationDialog/NewConfirmationDialog.stories.jsx

@@ -5,7 +5,7 @@ import React from 'react';
 import { Box, NewConfirmationDialog, Button } from '..';
 
 export default {
-	title: 'NewConfirmationDialog',
+	title: 'Dialog/NewConfirmationDialog',
 	component: NewConfirmationDialog,
 };
 

package/src/system/NewDialog/NewDialog.stories.jsx

@@ -14,7 +14,7 @@ import ScreenReaderText from '../ScreenReaderText';
 import * as NewDialog from '.';
 
 export default {
-	title: 'NewDialog',
+	title: 'Dialog/NewDialog',
 	component: NewDialog.Root,
 };
 

package/src/system/NewForm/index.js

@@ -4,12 +4,15 @@
 
 import { FormSelect } from './FormSelect';
 import { FormAutocomplete } from './FormAutocomplete';
+import { Textarea } from '../Form/Textarea';
+import { Input } from '../Form/Input';
 import { Form } from './Form';
+import { Label } from '../Form/Label';
 
 const Select = FormSelect;
 const Autocomplete = FormAutocomplete;
 const Root = Form;
 
-export { Root, Select, Autocomplete };
+export { Root, Select, Autocomplete, Textarea, Input, Label };
 
 export default Root;

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

@@ -4,7 +4,7 @@
 import { NewTabs, TabsTrigger, TabsList, TabsContent, Text } from '..';
 
 export default {
-	title: 'NewTabs',
+	title: 'Tabs',
 	component: NewTabs,
 };
 
@@ -19,11 +19,15 @@ export const Default = () => (
 			</TabsTrigger>
 		</TabsList>
 		<TabsContent value="all">
-			<Text>All content</Text>
+			<Text>
+				All content <a href="https://google.com">https://google.com</a>
+			</Text>
 		</TabsContent>
 		<TabsContent value="live">Live content</TabsContent>
 		<TabsContent value="dev">
-			<Text>In Development content</Text>
+			<Text>
+				In Development content <button type="button">Hey I am a button</button>{ ' ' }
+			</Text>
 		</TabsContent>
 	</NewTabs>
 );

package/src/system/NewTabs/TabsList.js

@@ -18,7 +18,7 @@ const TabsList = ( { children, title, sx } ) => (
 			display: 'flex',
 			...sx,
 		} }
-		title={ title }
+		aria-label={ title }
 	>
 		{ children }
 	</TabsPrimitive.List>

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

@@ -4,7 +4,7 @@
 import { Tabs, TabItem } from '..';
 
 export default {
-	title: 'Tabs',
+	title: 'Deprecated/Tabs',
 	component: Tabs,
 };
 

package/src/system/theme/index.js

@@ -162,6 +162,14 @@ export default {
 			'0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035), 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198), 0px 100px 80px rgba(0, 0, 0, 0.07)',
 	},
 
+	accordion: {
+		background: {
+			open: getVariants( 'color.gold' )[ '7' ],
+			closed: 'transparent',
+			hover: getVariants( 'color.gold' )[ '7' ],
+		},
+	},
+
 	tag: {
 		gold: getVariants( 'tag.gold' ),
 	},