@automattic/vip-design-system 0.26.0 → 0.26.2

package/build/system/NewForm/FormAutocomplete.stories.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.Inline = exports.Default = void 0;
+exports["default"] = exports.WithDefaultValue = exports.Inline = exports.Default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -96,4 +96,15 @@ var Inline = function Inline() {
   });
 };
 
-exports.Inline = Inline;
+exports.Inline = Inline;
+
+var WithDefaultValue = function WithDefaultValue() {
+  var customArgs = (0, _extends2["default"])({}, args, {
+    value: 'Chocolate'
+  });
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, customArgs))
+  });
+};
+
+exports.WithDefaultValue = WithDefaultValue;

package/build/system/NewForm/index.js

@@ -7,8 +7,20 @@ var _FormSelect = require("./FormSelect");
 
 var _FormAutocomplete = require("./FormAutocomplete");
 
+var _Textarea = require("../Form/Textarea");
+
+exports.Textarea = _Textarea.Textarea;
+
+var _Input = require("../Form/Input");
+
+exports.Input = _Input.Input;
+
 var _Form = require("./Form");
 
+var _Label = require("../Form/Label");
+
+exports.Label = _Label.Label;
+
 /**
  * Internal dependencies
  */

package/build/system/NewTabs/Tabs.stories.js

@@ -11,7 +11,7 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
  * Internal dependencies
  */
 var _default = {
-  title: 'NewTabs',
+  title: 'Tabs',
   component: _.NewTabs
 };
 exports["default"] = _default;
@@ -37,16 +37,22 @@ var Default = function Default() {
       })]
     }), (0, _jsxRuntime.jsx)(_.TabsContent, {
       value: "all",
-      children: (0, _jsxRuntime.jsx)(_.Text, {
-        children: "All content"
+      children: (0, _jsxRuntime.jsxs)(_.Text, {
+        children: ["All content ", (0, _jsxRuntime.jsx)("a", {
+          href: "https://google.com",
+          children: "https://google.com"
+        })]
       })
     }), (0, _jsxRuntime.jsx)(_.TabsContent, {
       value: "live",
       children: "Live content"
     }), (0, _jsxRuntime.jsx)(_.TabsContent, {
       value: "dev",
-      children: (0, _jsxRuntime.jsx)(_.Text, {
-        children: "In Development content"
+      children: (0, _jsxRuntime.jsxs)(_.Text, {
+        children: ["In Development content ", (0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          children: "Hey I am a button"
+        }), ' ']
       })
     })]
   });

package/build/system/NewTabs/TabsList.js

@@ -36,7 +36,7 @@ var TabsList = function TabsList(_ref) {
       borderColor: 'border',
       display: 'flex'
     }, sx),
-    title: title,
+    "aria-label": title,
     children: children
   });
 };

package/build/system/ResourceList/ResourceList.js

@@ -9,6 +9,8 @@ var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _react = require("react");
+
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
@@ -51,7 +53,7 @@ var StyledListItem = function StyledListItem(props) {
     sx: {
       py: 2,
       borderBottom: '1px solid',
-      borderColor: 'border',
+      borderColor: 'borders.2',
       listStyleType: 'none',
       margin: 0,
       px: 0
@@ -85,6 +87,37 @@ var ResourceList = function ResourceList(_ref) {
     });
   };
 
+  var renderGoupedItems = function renderGoupedItems() {
+    return (0, _react.useMemo)(function () {
+      return Object.keys(groupedItems).map(function (groupName, index) {
+        return (0, _jsxRuntime.jsxs)(_.Box, {
+          sx: {
+            mb: 4
+          },
+          as: "li",
+          children: [(0, _jsxRuntime.jsx)(_.Heading, {
+            variant: "h4",
+            as: "h4",
+            sx: {
+              mb: 3
+            },
+            children: groupName
+          }), (0, _jsxRuntime.jsx)(_.Box, {
+            as: "ul",
+            sx: {
+              listStyleType: 'none',
+              m: 0,
+              p: 0,
+              borderTop: '1px solid',
+              borderColor: 'border'
+            },
+            children: renderItemList(groupedItems[groupName])
+          })]
+        }, index);
+      });
+    }, [groupedItems]);
+  };
+
   return (0, _jsxRuntime.jsx)(_.Box, {
     as: "ul",
     sx: {
@@ -93,31 +126,7 @@ var ResourceList = function ResourceList(_ref) {
       p: 0
     },
     className: "vip-resource-list-component",
-    children: groupedByDay ? Object.keys(groupedItems).map(function (groupName, index) {
-      return (0, _jsxRuntime.jsxs)(_.Box, {
-        sx: {
-          mb: 4
-        },
-        children: [(0, _jsxRuntime.jsx)(_.Heading, {
-          variant: "h4",
-          as: "h4",
-          sx: {
-            mb: 3
-          },
-          children: groupName
-        }), (0, _jsxRuntime.jsx)(_.Box, {
-          as: "ul",
-          sx: {
-            listStyleType: 'none',
-            m: 0,
-            p: 0,
-            borderTop: '1px solid',
-            borderColor: 'border'
-          },
-          children: renderItemList(groupedItems[groupName])
-        })]
-      }, index);
-    }) : renderItemList(items)
+    children: groupedByDay ? renderGoupedItems(groupedItems) : renderItemList(items)
   });
 };
 

package/build/system/ResourceList/ResourceList.stories.js

@@ -129,6 +129,7 @@ var Grouped = function Grouped() {
                 children: "#443"
               })]
             }), (0, _jsxRuntime.jsxs)(_.Text, {
+              as: "div",
               sx: {
                 mb: 0,
                 fontSize: 1,
@@ -337,6 +338,7 @@ var Relative = function Relative() {
                 children: "Running"
               })]
             }), (0, _jsxRuntime.jsxs)(_.Text, {
+              as: "div",
               sx: {
                 mb: 0,
                 color: 'muted',

package/build/system/Tabs/Tabs.stories.js

@@ -11,7 +11,7 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
  * Internal dependencies
  */
 var _default = {
-  title: 'Tabs',
+  title: 'Deprecated/Tabs',
   component: _.Tabs
 };
 exports["default"] = _default;

package/package.json

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

package/src/system/Accordion/Accordion.js

@@ -85,6 +85,7 @@ export const Trigger = React.forwardRef(
 					'&[data-state="open"]': {
 						backgroundColor: 'backgroundSecondary',
 						borderBottom: theme => `1px solid ${ theme.colors.border }`,
+						'.vip-accordion-trigger-indicator': { transform: 'rotate(270deg)' },
 					},
 					'&:hover': { backgroundColor: 'backgroundSecondary' },
 				} }
@@ -93,12 +94,12 @@ export const Trigger = React.forwardRef(
 			>
 				{ children }
 				<MdChevronRight
+					className="vip-accordion-trigger-indicator"
 					sx={ {
 						fontSize: 3,
 						color: 'text',
 						transform: 'rotate(90deg)',
 						transition: 'transform 300ms cubic-bezier(0.87, 0, 0.13, 1)',
-						'[data-state=open] &': { transform: 'rotate(270deg)' },
 					} }
 					aria-hidden
 				/>

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

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { useState } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { Form } from '..';
+import { Checkbox } from './Checkbox';
+import { Label } from './Label';
+import { Flex } from '../Flex';
+
+export default {
+	title: 'Form/Checkbox',
+	component: Checkbox,
+};
+
+export const Default = () => {
+	const [ checked, setChecked ] = useState( true );
+	const [ checked2, setChecked2 ] = useState( false );
+
+	return (
+		<Form.Root>
+			<fieldset>
+				<legend>Tell me your prefereces</legend>
+
+				<Flex sx={ { alignItems: 'center' } }>
+					<Checkbox
+						id="check1"
+						checked={ checked }
+						aria-labelledby="label-check1"
+						onCheckedChange={ setChecked }
+					/>
+					<Label sx={ { m: 0, ml: 2 } } htmlFor="check1" id="label-check1">
+						This option
+					</Label>
+				</Flex>
+
+				<Flex sx={ { alignItems: 'center' } }>
+					<Checkbox
+						id="check2"
+						checked={ checked2 }
+						aria-labelledby="label-check2"
+						onCheckedChange={ setChecked2 }
+					/>
+					<Label sx={ { m: 0, ml: 2 } } htmlFor="check2" id="label-check2">
+						This option too
+					</Label>
+				</Flex>
+			</fieldset>
+		</Form.Root>
+	);
+};

package/src/system/Form/Input.js

@@ -10,45 +10,61 @@ import PropTypes from 'prop-types';
  * Internal dependencies
  */
 import { Validation, Label } from '../';
+import { Input as ThemeInput } from 'theme-ui';
+
+const RequiredLabel = () => (
+	<span sx={ { color: 'error', display: 'inline-block', ml: 2, fontSize: 1 } }>(Required)</span>
+);
+
+const inputStyles = {
+	unset: 'all',
+	border: '1px solid',
+	borderColor: 'border',
+	backgroundColor: 'card',
+	borderRadius: 1,
+	lineHeight: 'inherit',
+	px: 3,
+	py: 2,
+	fontSize: 2,
+	mb: 2,
+	color: 'text',
+	display: 'block',
+	width: '100%',
+	'&:focus': theme => theme.outline,
+	'&:focus-visible': theme => theme.outline,
+	'&:disabled': {
+		bg: 'backgroundSecondary',
+	},
+	'&::placeholder': {
+		color: 'placeholder',
+	},
+};
 
 const Input = React.forwardRef(
-	( { variant, label, forLabel, hasError, required, errorMessage, ...props }, ref ) => (
+	( { variant, label, forLabel, hasError, required, sx = {}, errorMessage, ...props }, ref ) => (
 		<React.Fragment>
 			{ label && (
 				<Label htmlFor={ forLabel }>
 					{ label }
-					{ required && '*' }
+					{ required && <RequiredLabel /> }
 				</Label>
 			) }
-			<input
-				{ ...props }
+
+			<ThemeInput
 				ref={ ref }
 				id={ forLabel }
 				required={ required }
-				sx={ {
-					border: '1px solid',
-					borderColor: 'border',
-					backgroundColor: 'card',
-					borderRadius: 1,
-					lineHeight: 'inherit',
-					px: 3,
-					py: 2,
-					fontSize: 2,
-					mb: 2,
-					color: 'text',
-					display: 'block',
-					width: '100%',
-					'&:focus': theme => theme.outline,
-					'&:focus-visible': theme => theme.outline,
-					'&:disabled': {
-						bg: 'backgroundSecondary',
-					},
-					'&::placeholder': {
-						color: 'placeholder',
-					},
-				} }
+				noValidate
+				aria-describedby={ hasError ? `describe-${ forLabel }-validation` : undefined }
+				sx={ { ...inputStyles, ...sx } }
+				{ ...props }
 			/>
-			{ hasError && errorMessage && <Validation>{ errorMessage }</Validation> }
+
+			{ hasError && errorMessage && (
+				<Validation isValid={ false } describedId={ forLabel }>
+					{ errorMessage }
+				</Validation>
+			) }
 		</React.Fragment>
 	)
 );
@@ -60,6 +76,7 @@ Input.propTypes = {
 	required: PropTypes.bool,
 	forLabel: PropTypes.string,
 	errorMessage: PropTypes.string,
+	sx: PropTypes.object,
 };
 
 Input.displayName = 'Input';

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

@@ -3,11 +3,36 @@
 /**
  * Internal dependencies
  */
-import { Input } from '..';
+import { Form } from '..';
 
 export default {
-	title: 'Input',
-	component: Input,
+	title: 'Form/Input',
 };
 
-export const Default = () => <Input placeholder="Your input here..." />;
+export const Default = () => (
+	<Form.Root>
+		<Form.Input
+			placeholder="Your input here..."
+			label="Always add a label to inputs"
+			forLabel="input-simple"
+		/>
+
+		<hr sx={ { my: 4 } } />
+
+		<Form.Input
+			forLabel="input-with-error"
+			label="Error Input"
+			errorMessage="Please type numeric characters only"
+			hasError
+		/>
+
+		<hr sx={ { my: 4 } } />
+
+		<Form.Input forLabel="input-with-required" label="Required" required />
+
+		<hr sx={ { my: 4 } } />
+
+		<Form.Label htmlFor="input-with-custom-label">Custom Label outside the Input</Form.Label>
+		<Form.Input forLabel="input-with-custom-label" required />
+	</Form.Root>
+);

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

@@ -0,0 +1,66 @@
+/**
+ * External dependencies
+ */
+import { useState } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { Form } from '..';
+import { Radio } from './Radio';
+import { Label } from './Label';
+import { Flex } from '../Flex';
+
+export default {
+	title: 'Form/Radio',
+	component: Radio,
+};
+
+export const Default = () => {
+	const [ checked, setChecked ] = useState( 'a' );
+
+	return (
+		<Form.Root>
+			<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">
+					Reference to Form fieldsets
+				</a>
+			</p>
+			<fieldset>
+				<legend sx={ { mb: 0, fontSize: 2, fontWeight: 'bold' } }>
+					Apply the policy to these domains
+				</legend>
+
+				<Flex sx={ { alignItems: 'center' } }>
+					<Radio
+						name="includeSubdomains"
+						id="include-all-domains-opt"
+						onChange={ () => setChecked( 'a' ) }
+						value={ 'a' }
+						checked={ checked === 'a' }
+					/>
+
+					<Label htmlFor="include-all-domains-opt" sx={ { mb: 0 } }>
+						All domains listed on this environment, and all subdomains
+					</Label>
+				</Flex>
+
+				<Flex sx={ { alignItems: 'center', mb: 1 } }>
+					<Radio
+						name="includeSubdomains"
+						id="include-subdomains-opt"
+						onChange={ () => setChecked( 'b' ) }
+						checked={ checked === 'b' }
+						value={ 'b' }
+					/>
+
+					<Label id="exclude-subdomains" htmlFor="include-subdomains-opt" sx={ { mb: 0 } }>
+						All domains listed on this environment
+					</Label>
+				</Flex>
+			</fieldset>
+		</Form.Root>
+	);
+};

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

@@ -9,7 +9,7 @@ import { useState } from 'react';
 import { Box, Dialog, DialogMenu, DialogMenuItem, DialogDivider, Select, Button } from '..';
 
 export default {
-	title: 'Select',
+	title: 'Deprecated/Select',
 	component: Dialog,
 };
 

package/src/system/Form/Textarea.js

@@ -4,60 +4,15 @@
  * External dependencies
  */
 import React from 'react';
-import PropTypes from 'prop-types';
 
 /**
  * Internal dependencies
  */
-import { Validation, Label } from '../';
+import { Input } from './Input';
 
-const Textarea = React.forwardRef(
-	( { variant, label, forLabel, hasError, required, errorMessage, ...props }, ref ) => (
-		<React.Fragment>
-			{ label && (
-				<Label htmlFor={ forLabel }>
-					{ label }
-					{ required && '*' }
-				</Label>
-			) }
-			<textarea
-				{ ...props }
-				ref={ ref }
-				sx={ {
-					border: '1px solid',
-					borderColor: 'border',
-					backgroundColor: 'card',
-					borderRadius: 1,
-					lineHeight: 'inherit',
-					px: 3,
-					py: 2,
-					fontSize: 2,
-					mb: 2,
-					color: 'text',
-					display: 'block',
-					width: '100%',
-					'&:focus': {
-						borderColor: 'brand.60',
-						outline: 'none',
-					},
-					'&:disabled': {
-						backgroundColor: 'background',
-					},
-				} }
-			/>
-			{ hasError && errorMessage && <Validation>{ errorMessage }</Validation> }
-		</React.Fragment>
-	)
-);
-
-Textarea.propTypes = {
-	variant: PropTypes.string,
-	label: PropTypes.string,
-	hasError: PropTypes.bool,
-	required: PropTypes.bool,
-	forLabel: PropTypes.string,
-	errorMessage: PropTypes.string,
-};
+const Textarea = React.forwardRef( ( props, ref ) => (
+	<Input ref={ ref } as="textarea" { ...props } />
+) );
 
 Textarea.displayName = 'Textarea';
 

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

@@ -0,0 +1,40 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * Internal dependencies
+ */
+import * as Form from '../NewForm';
+
+export default {
+	title: 'Form/Textarea',
+	argTypes: {
+		placeholder: {
+			type: { name: 'string', required: false },
+			control: { type: 'text' },
+		},
+		label: {
+			type: { name: 'string', required: false },
+			control: { type: 'text' },
+		},
+	},
+};
+
+const DefaultComponent = () => (
+	<Form.Root>
+		<Form.Textarea forLabel="my-text-area" rows="5" label="Regular textarea" />
+
+		<hr sx={ { my: 4 } } />
+
+		<Form.Textarea
+			forLabel="my-text-area-error"
+			rows="5"
+			label="Error textarea"
+			errorMessage="Please type numeric characters only"
+			required
+			hasError
+		/>
+	</Form.Root>
+);
+
+export const Default = DefaultComponent.bind( {} );
+Default.args = {};

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,
 };