@automattic/vip-design-system 0.19.0 → 0.19.1

package/build/system/Wizard/Wizard.stories.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.Default = exports.CustomHeadingVariant = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -81,4 +81,26 @@ var Default = function Default() {
   });
 };
 
-exports.Default = Default;
+exports.Default = Default;
+
+var CustomHeadingVariant = function CustomHeadingVariant() {
+  var steps = [{
+    title: 'Choose Domain',
+    titleVariant: 'h1',
+    subTitle: (0, _jsxRuntime.jsx)("h2", {
+      children: "You can bring a domain name you already own, or buy a new one."
+    })
+  }, {
+    title: 'Configure DNS',
+    titleVariant: 'h1'
+  }];
+  return (0, _jsxRuntime.jsx)(_react["default"].Fragment, {
+    children: (0, _jsxRuntime.jsx)(_.Wizard, {
+      activeStep: 0,
+      steps: steps,
+      className: "vip-wizard-xyz"
+    })
+  });
+};
+
+exports.CustomHeadingVariant = CustomHeadingVariant;

package/build/system/Wizard/WizardStep.js

@@ -29,8 +29,10 @@ var WizardStep = function WizardStep(_ref) {
       complete = _ref$complete === void 0 ? false : _ref$complete,
       children = _ref.children,
       active = _ref.active,
-      order = _ref.order;
-  var borderLeftColor = 'border';
+      order = _ref.order,
+      _ref$titleVariant = _ref.titleVariant,
+      titleVariant = _ref$titleVariant === void 0 ? 'h4' : _ref$titleVariant;
+  var borderLeftColor = 'borders.2';
 
   if (complete) {
     borderLeftColor = 'success';
@@ -55,26 +57,29 @@ var WizardStep = function WizardStep(_ref) {
       borderRadius: 0,
       borderBottom: active ? 'none' : '1px solid',
       '&:first-of-type': {
-        borderTopWidth: active ? 'none' : '1px',
-        borderTopStyle: active ? 'none' : 'solid'
+        borderTopWidth: '1px',
+        borderTopStyle: 'solid',
+        borderTopColor: 'borders.2'
       },
-      borderColor: active ? 'primary' : 'border',
+      borderColor: active ? 'primary' : 'borders.2',
       borderLeftColor: borderLeftColor
     },
     "data-step": order,
     "data-active": active || undefined,
     children: [(0, _jsxRuntime.jsxs)(_.Heading, {
-      variant: "h4",
+      variant: titleVariant,
       sx: {
         mb: 0,
         display: 'flex',
         alignItems: 'center',
-        color: color
+        color: color,
+        fontSize: 2
       },
       children: [(0, _jsxRuntime.jsx)(_md.MdCheckCircle, {
         sx: {
           mr: 2
-        }
+        },
+        size: 18
       }), title]
     }), subTitle && active && (0, _jsxRuntime.jsx)(_.Text, {
       sx: {
@@ -87,10 +92,11 @@ var WizardStep = function WizardStep(_ref) {
 
 exports.WizardStep = WizardStep;
 WizardStep.propTypes = {
-  title: _propTypes["default"].node,
-  subTitle: _propTypes["default"].node,
-  complete: _propTypes["default"].bool,
   active: _propTypes["default"].bool,
   children: _propTypes["default"].node,
-  order: _propTypes["default"].number.isRequired
+  complete: _propTypes["default"].bool,
+  order: _propTypes["default"].number.isRequired,
+  subTitle: _propTypes["default"].node,
+  title: _propTypes["default"].node,
+  titleVariant: _propTypes["default"].string
 };

package/build/system/Wizard/WizardStepHorizontal.js

@@ -25,9 +25,11 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 var WizardStepHorizontal = function WizardStepHorizontal(_ref) {
   var title = _ref.title,
       active = _ref.active,
-      order = _ref.order;
+      order = _ref.order,
+      _ref$titleVariant = _ref.titleVariant,
+      titleVariant = _ref$titleVariant === void 0 ? 'h4' : _ref$titleVariant;
   return (0, _jsxRuntime.jsxs)(_.Heading, {
-    variant: "h4",
+    variant: titleVariant,
     sx: {
       mb: 0,
       display: 'flex',
@@ -46,8 +48,9 @@ var WizardStepHorizontal = function WizardStepHorizontal(_ref) {
 
 exports.WizardStepHorizontal = WizardStepHorizontal;
 WizardStepHorizontal.propTypes = {
-  title: _propTypes["default"].node,
-  subTitle: _propTypes["default"].node,
   active: _propTypes["default"].bool,
-  order: _propTypes["default"].number.isRequired
+  order: _propTypes["default"].number.isRequired,
+  subTitle: _propTypes["default"].node,
+  title: _propTypes["default"].node,
+  titleVariant: _propTypes["default"].string
 };

package/build/system/index.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.NewDialog = exports.Dropdown = void 0;
+exports.NewDialog = exports.Form = exports.Dropdown = void 0;
 
 var _Avatar = require("./Avatar");
 
@@ -51,6 +51,10 @@ var Dropdown = _interopRequireWildcard(require("./Dropdown"));
 
 exports.Dropdown = Dropdown;
 
+var Form = _interopRequireWildcard(require("./NewForm"));
+
+exports.Form = Form;
+
 var _ConfirmationDialog = require("./ConfirmationDialog");
 
 exports.ConfirmationDialog = _ConfirmationDialog.ConfirmationDialog;

package/build/system/theme/index.js

@@ -97,18 +97,31 @@ var _default = {
   colors: (0, _extends2["default"])({
     text: (0, _getColor.getColor)('text', 'secondary'),
     heading: (0, _getColor.getColor)('text', 'primary'),
-    background: '#fdfdfd',
+    background: (0, _getColor.getColor)('background', 'primary'),
     backgroundSecondary: _colors.light.grey['10'],
     primary: _colors.light.brand['70'],
     secondary: '#30c',
     muted: _colors.light.grey['90'],
-    link: _colors.light.brand['90'],
+    link: (0, _getColor.getColor)('link', 'default'),
+    links: {
+      "default": (0, _getColor.getColor)('link', 'default'),
+      hover: (0, _getColor.getColor)('link', 'hover'),
+      active: (0, _getColor.getColor)('link', 'active'),
+      visited: (0, _getColor.getColor)('link', 'visited')
+    },
     card: '#fff',
-    border: _colors.light.grey['20'],
+    borders: {
+      1: (0, _getColor.getColor)('border', '1'),
+      2: (0, _getColor.getColor)('border', '2'),
+      3: (0, _getColor.getColor)('border', '3'),
+      4: (0, _getColor.getColor)('border', '4'),
+      accent: (0, _getColor.getColor)('border', 'accent')
+    },
+    border: (0, _getColor.getColor)('border', '1'),
     hover: 'rgba(0,0,0,.02)',
     lightenBackground: 'rgba(255,255,255,.5)',
     darken: 'rgba(0,0,0,.05)',
-    placeholder: _colors.light.grey['70'],
+    placeholder: (0, _getColor.getColor)('text', 'placeholder'),
     midnight: '#13191E',
     navigationStart: _colors.light.grey['5'],
     navigationEnd: _colors.light.grey['5'],

package/package.json

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

package/src/system/BlankState/BlankState.stories.jsx

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

package/src/system/ConfirmationDialog/ConfirmationDialog.stories.jsx

@@ -4,7 +4,7 @@
 import { Box, ConfirmationDialog, Button, Heading, Text, Flex } from '..';
 
 export default {
-	title: 'ConfirmationDialog',
+	title: 'Deprecated/ConfirmationDialog',
 	component: ConfirmationDialog,
 };
 

package/src/system/Dialog/Dialog.stories.jsx

@@ -14,7 +14,7 @@ import {
 } from '..';
 
 export default {
-	title: 'Dialog (Deprecated)',
+	title: 'Deprecated/Dialog',
 	component: Dialog,
 };
 

package/src/system/Form/Input.js

@@ -38,10 +38,8 @@ const Input = React.forwardRef(
 					color: 'text',
 					display: 'block',
 					width: '100%',
-					'&:focus': {
-						borderColor: 'brand.60',
-						outline: 'none',
-					},
+					'&:focus': theme => theme.outline,
+					'&:focus-visible': theme => theme.outline,
 					'&:disabled': {
 						bg: 'backgroundSecondary',
 					},

package/src/system/Link/Link.js

@@ -10,15 +10,17 @@ const Link = ( { active = false, sx, ...props } ) => (
 	<ThemeLink
 		{ ...props }
 		sx={ {
-			color: active ? 'heading' : 'link',
-			textDecoration: 'none',
-			borderBottom: '1px solid',
-			borderBottomColor: 'border',
+			color: active ? 'links.active' : 'link',
+			textDdecorationThickness: '0.1em',
+			textUnderlineOffset: '0.1em',
 			'&:visited': {
-				color: 'link',
+				color: 'links.visited',
+			},
+			'&:active': {
+				color: 'links.active',
 			},
 			'&:hover, &:focus': {
-				color: 'heading',
+				color: 'links.hover',
 			},
 			'&:focus': theme => theme.outline,
 			'&:focus-visible': theme => theme.outline,

package/src/system/NewDialog/DialogClose.js

@@ -43,7 +43,7 @@ export const DialogCloseDefault = React.forwardRef( ( props, forwardedRef ) => (
 				right: 10,
 
 				'&:hover': {
-					backgroundColor: 'border',
+					backgroundColor: 'borders.2',
 					outlineStyle: 'solid',
 					outlineColor: 'primary',
 					outlineWidth: '2px',

package/src/system/NewForm/Form.js

@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Form = React.forwardRef( ( { children, ...props }, forwardRef ) => (
+	<form ref={ forwardRef } { ...props }>
+		{ children }
+	</form>
+) );
+
+Form.propTypes = {
+	children: PropTypes.any,
+};
+
+Form.displayName = 'Form';
+
+export { Form };

package/src/system/NewForm/FormSelect.js

@@ -0,0 +1,91 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Label } from '../Form/Label';
+
+/**
+ * Internal dependencies
+ */
+import { FormSelectArrow } from './FormSelectArrow';
+import { FormSelectContent } from './FormSelectContent';
+
+const MAX_SUGGESTED_OPTIONS = 15;
+const isDev = process.env.NODE_ENV !== 'production';
+
+const defaultStyles = {
+	width: '100%',
+	paddingLeft: 3,
+	paddingRight: 40, // 40px for the icon
+	py: 0,
+	borderColor: 'border',
+	borderRadius: 1,
+	appearance: 'none',
+	minHeight: '36px',
+	'&:focus': theme => theme.outline,
+	'&:focus-visible': theme => theme.outline,
+	'&:focus-within': theme => theme.outline,
+};
+
+const renderOption = ( label, value ) => {
+	return (
+		<option key={ value } value={ value }>
+			{ label }
+		</option>
+	);
+};
+
+const renderGroup = ( groupLabel, groupOptions ) => {
+	return (
+		<optgroup key={ groupLabel } label={ groupLabel }>
+			{ groupOptions.map( ( { label, value } ) => renderOption( label, value ) ) }
+		</optgroup>
+	);
+};
+
+const FormSelect = React.forwardRef(
+	( { isInline, placeholder, forLabel, options, label, ...props }, forwardRef ) => {
+		if ( isDev && options.length > MAX_SUGGESTED_OPTIONS ) {
+			// eslint-disable-next-line no-console
+			console.info(
+				'For 16 or more items, consider using another component with a typeahead capability.'
+			);
+		}
+
+		const SelectLabel = () => <Label htmlFor={ forLabel || props.id }>{ label }</Label>;
+		const inlineLabel = !! ( isInline && label );
+
+		return (
+			<>
+				{ label && ! isInline && <SelectLabel /> }
+
+				<FormSelectContent isInline={ inlineLabel } label={ inlineLabel ? <SelectLabel /> : null }>
+					<select ref={ forwardRef } sx={ defaultStyles } { ...props }>
+						{ placeholder && <option>{ placeholder }</option> }
+						{ options.map( ( { label: optionLabel, value, options: groupOptions } ) =>
+							value ? renderOption( optionLabel, value ) : renderGroup( optionLabel, groupOptions )
+						) }
+					</select>
+
+					<FormSelectArrow />
+				</FormSelectContent>
+			</>
+		);
+	}
+);
+
+FormSelect.propTypes = {
+	id: PropTypes.string,
+	isInline: PropTypes.bool,
+	forLabel: PropTypes.string,
+	placeholder: PropTypes.string,
+	label: PropTypes.string,
+	options: PropTypes.array,
+};
+
+FormSelect.displayName = 'FormSelect';
+
+export { FormSelect };

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

@@ -0,0 +1,96 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * Internal dependencies
+ */
+import * as Form from '.';
+
+export default {
+	title: 'Form/Select',
+	argTypes: {
+		placeholder: {
+			type: { name: 'string', required: false },
+			control: { type: 'text' },
+		},
+		label: {
+			type: { name: 'string', required: false },
+			control: { type: 'text' },
+		},
+	},
+};
+
+const options = [
+	{ value: 'chocolate', label: 'Chocolate' },
+	{ value: 'strawberry', label: 'Strawberry Chocolate Vanilla Chocolate Vanilla' },
+	{ value: 'vanilla', label: 'Vanilla' },
+];
+
+// eslint-disable-next-line react/prop-types
+const DefaultComponent = ( { label = 'Label', width = 250, ...rest } ) => (
+	<>
+		<p>
+			This is a simple wrapper at the top of a browser default select component. This component
+			should be used for situations where you have up to <strong>15 options</strong>. If you need to
+			use a auto-complete, searchable solution, please use another component with a typeahead
+			capability.
+		</p>
+
+		<p>
+			This component was heavily inspired by the{ ' ' }
+			<a
+				href="https://designsystem.digital.gov/components/select/"
+				target="_blank"
+				rel="noreferrer"
+			>
+				{ ' ' }
+				U.S. Web Design System (USWDS) Select component
+			</a>
+			.
+		</p>
+		<Form.Root>
+			<div sx={ { width } }>
+				<Form.Select id="form-select" label={ label } { ...rest } />
+			</div>
+		</Form.Root>
+	</>
+);
+
+export const Default = DefaultComponent.bind( {} );
+Default.args = {
+	placeholder: '- Select -',
+	options: options,
+};
+
+export const WithGroup = DefaultComponent.bind( {} );
+
+WithGroup.args = {
+	label: 'Group Label',
+	options: [
+		{
+			label: 'Group name',
+			options: options,
+		},
+		{
+			label: 'Another Group name',
+			options: options,
+		},
+	],
+};
+
+export const IsInline = DefaultComponent.bind( {} );
+
+IsInline.args = {
+	label: 'Inline Select',
+	isInline: true,
+	width: '100%',
+	options: [
+		{
+			label: 'Group name',
+			options: options,
+		},
+		{
+			label: 'Another Group name',
+			options: options,
+		},
+	],
+};

package/src/system/NewForm/FormSelect.test.js

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+/**
+ * Internal dependencies
+ */
+import { FormSelect } from './FormSelect';
+
+const options = [
+	{ value: 'chocolate', label: 'Chocolate' },
+	{ value: 'strawberry', label: 'Strawberry Chocolate Vanilla Chocolate Vanilla' },
+	{ value: 'vanilla', label: 'Vanilla' },
+];
+
+const defaultProps = {
+	label: 'This is a label',
+	forLabel: 'my_desert_list',
+	options,
+};
+
+describe( '<FormSelect />', () => {
+	it( 'renders the FormSelect component', async () => {
+		const { container } = render( <FormSelect id="my_desert_list" { ...defaultProps } /> );
+
+		expect( screen.getByLabelText( defaultProps.label ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'combobox' ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/NewForm/FormSelectArrow.js

@@ -0,0 +1,27 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { MdExpandMore } from 'react-icons/md';
+
+export const FormSelectArrow = React.forwardRef( ( props, forwardRef ) => (
+	<MdExpandMore
+		ref={ forwardRef }
+		aria-hidden="true"
+		size={ 24 }
+		sx={ {
+			paddingLeft: 2,
+			borderLeftWidth: '1px',
+			borderLeftStyle: 'solid',
+			borderLeftColor: 'border',
+			position: 'relative',
+			right: 34,
+			pointerEvents: 'none',
+		} }
+		{ ...props }
+	/>
+) );
+
+FormSelectArrow.displayName = 'FormSelectArrow';

package/src/system/NewForm/FormSelectContent.js

@@ -0,0 +1,37 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { inlineStyles } from './FormSelectInline';
+
+/**
+ * Internal dependencies
+ */
+
+const defaultStyles = {
+	'&:hover select': { borderColor: 'border' },
+	display: 'inline-flex',
+	flexDirection: 'row',
+	alignItems: 'center',
+};
+
+const FormSelectContent = React.forwardRef( ( { isInline, label, children }, forwardRef ) => (
+	<div sx={ isInline ? inlineStyles : {} } className="vip-select-component" ref={ forwardRef }>
+		{ isInline && label }
+
+		<div sx={ defaultStyles }>{ children }</div>
+	</div>
+) );
+
+FormSelectContent.propTypes = {
+	isInline: PropTypes.bool,
+	label: PropTypes.any,
+	children: PropTypes.any,
+};
+
+FormSelectContent.displayName = 'FormSelectContent';
+
+export { FormSelectContent };

package/src/system/NewForm/FormSelectInline.js

@@ -0,0 +1,31 @@
+export const inlineStyles = {
+	position: 'relative',
+	display: 'inline-flex',
+	alignItems: 'center',
+	borderColor: 'border',
+	borderRadius: 1,
+	borderWidth: 1,
+	borderStyle: 'solid',
+	paddingRight: 0,
+	paddingLeft: 3,
+
+	label: {
+		margin: 0,
+		paddingRight: 2,
+		borderRightWidth: '1px',
+		borderRightStyle: 'solid',
+		borderRightColor: 'border',
+	},
+
+	select: {
+		width: '100%',
+		border: 'none',
+		margin: 0,
+		paddingLeft: 2,
+	},
+
+	svg: {
+		right: 2,
+		position: 'absolute',
+	},
+};

package/src/system/NewForm/index.js

@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+
+import { FormSelect } from './FormSelect';
+import { Form } from './Form';
+
+const Select = FormSelect;
+const Root = Form;
+
+export { Root, Select };
+
+export default Root;

package/src/system/Notice/Notice.js

@@ -68,7 +68,6 @@ const Notice = ( {
 				color: `${ color }.90`,
 				a: {
 					color: `${ color }.90`,
-					textDecoration: 'underline',
 					border: 'none',
 				},
 				...sx,

package/src/system/OptionRow/OptionRow.js

@@ -15,7 +15,7 @@ import classNames from 'classnames';
 
 const disabledStyles = {
 	border: '1px solid',
-	borderColor: 'border',
+	borderColor: 'borders.2',
 	background: 'none',
 	boxShadow: 'none',
 	color: 'grey.70',
@@ -31,7 +31,7 @@ const regularGridStyle = small => ( {
 	py: 3,
 	px: [ 3, 3, small ? 3 : 5 ],
 	borderBottom: '1px solid',
-	borderColor: 'border',
+	borderColor: 'borders.2',
 } );
 
 const OptionRow = ( {

package/src/system/ResourceList/ResourceList.js

@@ -33,7 +33,7 @@ const StyledListItem = props => (
 		sx={ {
 			py: 2,
 			borderBottom: '1px solid',
-			borderColor: 'border',
+			borderColor: 'borders.2',
 			listStyleType: 'none',
 			margin: 0,
 			px: 0,

package/src/system/Table/TableCell.js

@@ -16,7 +16,7 @@ const TableCell = ( { head, children, ...rest } ) => {
 		borderBottom: '1px solid',
 		borderTop: head ? '1px solid' : 'none',
 		// borderColor should come after borderTop so it can override it
-		borderColor: 'border',
+		borderColor: 'borders.2',
 		fontWeight: 'body',
 		px: 3,
 		py: 2,