@automattic/vip-design-system 0.27.12 → 0.28.1

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

@@ -38,6 +38,23 @@
       "value": "#ffffff",
       "type": "color"
     },
+    "label": {
+      "default": {
+        "value": "#13191e",
+        "type": "color"
+      }
+    },
+    "text": {
+      "default": {
+        "value": "#13191e",
+        "type": "color"
+      },
+      "placeholder": {
+        "type": "color",
+        "value": "#767372",
+        "description": "Use for placeholder text in fields"
+      }
+    },
     "border": {
       "default": {
         "value": "#8f8c8b",
@@ -179,18 +196,19 @@
       "description": "Use for helper text",
       "value": "#6a6766"
     },
-    "placeholder": {
-      "type": "color",
-      "value": "#767372",
-      "description": "Use for placeholder text in fields"
-    },
     "disabled": {
       "type": "color",
       "value": "#9b9796"
     },
     "inverse": {
       "type": "color",
-      "value": "#fbfbfb"
+      "value": "#fbfbfb",
+      "description": "Use for primary text on an inverse layer"
+    },
+    "inverse-secondary": {
+      "value": "#b3afae",
+      "type": "color",
+      "description": "Use for secondary text on an inverse layer."
     },
     "accent": {
       "type": "color",
@@ -625,8 +643,8 @@
       "info": {
         "default": {
           "type": "color",
-          "description": "Use for text links",
-          "value": "#007586"
+          "value": "#006979",
+          "description": "Use for text links"
         },
         "hover": {
           "type": "color",

package/build/system/theme/index.js

@@ -109,10 +109,7 @@ var _default = {
     // icon
     icon: (0, _extends2["default"])({}, _getColor.ValetTheme.icon),
     // Form Controls
-    input: (0, _extends2["default"])({}, _getColor.ValetTheme.input, {
-      text: (0, _getColor.getColor)('text', 'secondary'),
-      placeholder: (0, _getColor.getColor)('text', 'secondary')
-    }),
+    input: (0, _extends2["default"])({}, _getColor.ValetTheme.input),
     optionRow: {
       hover: 'rgba(0,0,0,.02)',
       border: (0, _getColor.getColor)('border', '2'),
@@ -145,7 +142,7 @@ var _default = {
     },
     hover: 'rgba(0,0,0,.02)',
     darken: 'rgba(0,0,0,.05)',
-    placeholder: (0, _getColor.getColor)('text', 'placeholder'),
+    placeholder: (0, _getColor.getVariants)('input.text').placeholder,
     midnight: '#13191E',
     dialog: _colors.light.gray['0'],
     backgroundMuted: (0, _getColor.getColor)('layer', '1'),

package/package.json

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

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/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/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/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

@@ -22,7 +22,8 @@ export const Default = () => (
 			title="Your site is ready to launch!"
 		>
 			<Text sx={ { mb: 0 } }>
-				It looks like you&lsquo;re ready to share your application with the world.
+				It looks like you&lsquo;re ready to share your{ ' ' }
+				<Link href="https://google.com/">application with the world.</Link>
 			</Text>
 		</Notice>
 
@@ -31,10 +32,14 @@ export const Default = () => (
 			<Link href="https://google.com/">application with the world.</Link>
 		</Notice>
 
-		<Notice sx={ { mb: 4 } } title="This notice has only the title prop passed" />
+		<Notice sx={ { mb: 4 } } title="This notice has only the title prop passed">
+			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 } } title="You made it!">
-			<Text sx={ { mb: 0 } }>This notice has a title and children.</Text>
+			It looks like you&lsquo;re ready to share your{ ' ' }
+			<Link href="https://google.com/">application with the world.</Link>
 		</Notice>
 
 		<Notice variant="info" sx={ { mb: 4 } } title="Please read this first">

package/src/system/Tabs/Tabs.js

@@ -3,37 +3,51 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import React from 'react';
 
 /**
  * Internal dependencies
  */
-import { Flex } from '..';
-
-const Tabs = React.forwardRef( ( { className = null, sx, ...props }, forwardRef ) => (
-	<Flex
-		className={ classNames( 'vip-tabs-component', className ) }
-		sx={ {
-			borderBottom: '1px solid',
-			borderColor: 'border',
-			listStyleType: 'none',
-			margin: 0,
-			padding: 0,
-			...sx,
-		} }
-		ref={ forwardRef }
-		{ ...props }
-	/>
-) );
 
-Tabs.displayName = 'Tabs';
+const Tabs = React.forwardRef(
+	(
+		{
+			children,
+			onValueChange = undefined,
+			defaultValue = undefined,
+			value = undefined,
+			className = null,
+			sx = {},
+		},
+		ref
+	) => {
+		return (
+			<TabsPrimitive.Root
+				ref={ ref }
+				value={ value }
+				defaultValue={ defaultValue }
+				onValueChange={ onValueChange }
+				className={ classNames( 'vip-tabs-component', className ) }
+				sx={ { ...sx } }
+			>
+				{ children }
+			</TabsPrimitive.Root>
+		);
+	}
+);
 
 Tabs.propTypes = {
 	className: PropTypes.any,
 	sx: PropTypes.object,
-	variant: PropTypes.string,
+	defaultValue: PropTypes.node,
+	value: PropTypes.node,
+	onValueChange: PropTypes.func,
+	children: PropTypes.node.isRequired,
 };
 
+Tabs.displayName = 'Tabs';
+
 export { Tabs };

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

@@ -1,17 +1,67 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
 /**
  * Internal dependencies
  */
-import { Tabs, TabItem } from '..';
+import { Tabs, TabsTrigger, TabsList, TabsContent, Text } from '..';
 
 export default {
-	title: 'Deprecated/Tabs',
+	title: 'Tabs',
 	component: Tabs,
 };
 
 export const Default = () => (
-	<Tabs>
-		<TabItem active>All (5)</TabItem>
-		<TabItem>Live (2)</TabItem>
-		<TabItem>In Development (3)</TabItem>
+	<Tabs defaultValue="all">
+		<TabsList title="See all the content">
+			<TabsTrigger value="all">All (5)</TabsTrigger>
+			<TabsTrigger value="live">Live (2)</TabsTrigger>
+			<TabsTrigger value="dev">In Development (3)</TabsTrigger>
+			<TabsTrigger value="protect" disabled>
+				Not accessible
+			</TabsTrigger>
+		</TabsList>
+		<TabsContent value="all">
+			<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 <button type="button">Hey I am a button</button>{ ' ' }
+			</Text>
+		</TabsContent>
 	</Tabs>
 );
+export const SetActiveTab = () => {
+	const [ activeTab, setActiveTab ] = React.useState( 'all' );
+
+	return (
+		<Tabs value={ activeTab } onValueChange={ val => setActiveTab( val ) }>
+			<TabsList title="See all the content">
+				<TabsTrigger value="all">All (5)</TabsTrigger>
+				<TabsTrigger value="live">Live (2)</TabsTrigger>
+				<TabsTrigger value="dev">In Development (3)</TabsTrigger>
+				<TabsTrigger value="protect" disabled={ true }>
+					Not accessible
+				</TabsTrigger>
+			</TabsList>
+			<TabsContent value="all">
+				<Text>
+					<button type="button" onClick={ () => setActiveTab( 'live' ) }>
+						Switch to live tab
+					</button>
+				</Text>
+			</TabsContent>
+			<TabsContent value="live">Live content</TabsContent>
+			<TabsContent value="dev">
+				<Text>
+					In Development content <button type="button">Hey I am a button</button>{ ' ' }
+				</Text>
+			</TabsContent>
+		</Tabs>
+	);
+};

package/src/system/Tabs/index.js

@@ -2,6 +2,8 @@
  * Internal dependencies
  */
 import { Tabs } from './Tabs';
-import { TabItem } from './TabItem';
+import { TabsTrigger } from './TabsTrigger';
+import { TabsList } from './TabsList';
+import { TabsContent } from './TabsContent';
 
-export { Tabs, TabItem };
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/system/index.js

@@ -51,11 +51,10 @@ import { Timeline } from './Timeline';
 import { Notification } from './Notification';
 import { OptionRow } from './OptionRow';
 import { Table, TableRow, TableCell } from './Table';
-import { TabItem, Tabs } from './Tabs';
 import { Text } from './Text';
 import theme from './theme';
 import { Wizard, WizardStep, WizardStepHorizontal } from './Wizard';
-import { NewTabs, TabsList, TabsContent, TabsTrigger } from './NewTabs';
+import { Tabs, TabsList, TabsContent, TabsTrigger } from './Tabs';
 
 export {
 	Accordion,
@@ -100,14 +99,12 @@ export {
 	Progress,
 	Text,
 	Tabs,
-	Toggle,
-	ToggleRow,
-	ToggleGroup,
-	TabItem,
-	NewTabs,
 	TabsTrigger,
 	TabsContent,
 	TabsList,
+	Toggle,
+	ToggleRow,
+	ToggleGroup,
 	Time,
 	Timeline,
 	Validation,

package/src/system/theme/generated/valet-theme.json

@@ -38,6 +38,23 @@
       "value": "#ffffff",
       "type": "color"
     },
+    "label": {
+      "default": {
+        "value": "#13191e",
+        "type": "color"
+      }
+    },
+    "text": {
+      "default": {
+        "value": "#13191e",
+        "type": "color"
+      },
+      "placeholder": {
+        "type": "color",
+        "value": "#767372",
+        "description": "Use for placeholder text in fields"
+      }
+    },
     "border": {
       "default": {
         "value": "#8f8c8b",
@@ -179,18 +196,19 @@
       "description": "Use for helper text",
       "value": "#6a6766"
     },
-    "placeholder": {
-      "type": "color",
-      "value": "#767372",
-      "description": "Use for placeholder text in fields"
-    },
     "disabled": {
       "type": "color",
       "value": "#9b9796"
     },
     "inverse": {
       "type": "color",
-      "value": "#fbfbfb"
+      "value": "#fbfbfb",
+      "description": "Use for primary text on an inverse layer"
+    },
+    "inverse-secondary": {
+      "value": "#b3afae",
+      "type": "color",
+      "description": "Use for secondary text on an inverse layer."
     },
     "accent": {
       "type": "color",
@@ -625,8 +643,8 @@
       "info": {
         "default": {
           "type": "color",
-          "description": "Use for text links",
-          "value": "#007586"
+          "value": "#006979",
+          "description": "Use for text links"
         },
         "hover": {
           "type": "color",

package/src/system/theme/index.js

@@ -122,8 +122,6 @@ export default {
 		// Form Controls
 		input: {
 			...ValetTheme.input,
-			text: getColor( 'text', 'secondary' ),
-			placeholder: getColor( 'text', 'secondary' ),
 		},
 
 		optionRow: {
@@ -160,7 +158,7 @@ export default {
 		},
 		hover: 'rgba(0,0,0,.02)',
 		darken: 'rgba(0,0,0,.05)',
-		placeholder: getColor( 'text', 'placeholder' ),
+		placeholder: getVariants( 'input.text' ).placeholder,
 		midnight: '#13191E',
 		dialog: light.gray[ '0' ],
 		backgroundMuted: getColor( 'layer', '1' ),