@automattic/vip-design-system 0.26.1 → 0.26.3

package/build/system/Form/Validation.js

@@ -13,30 +13,36 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _md = require("react-icons/md");
 
-var _ = require("..");
-
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["children", "isValid"];
+var _excluded = ["children", "isValid", "describedId"];
 
+/**
+ * Internal dependencies
+ */
 var Validation = function Validation(_ref) {
   var children = _ref.children,
       isValid = _ref.isValid,
+      _ref$describedId = _ref.describedId,
+      describedId = _ref$describedId === void 0 ? null : _ref$describedId,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var Icon = isValid ? _md.MdCheckCircle : _md.MdErrorOutline;
-  return (0, _jsxRuntime.jsxs)(_.Heading, (0, _extends2["default"])({
-    variant: "h5",
-    as: "p",
+  var IconLabel = isValid ? 'Valid' : 'Invalid';
+  return (0, _jsxRuntime.jsxs)("p", (0, _extends2["default"])({
     sx: {
       color: isValid ? 'success' : 'error',
       display: 'flex',
-      alignItems: 'center'
-    }
+      alignItems: 'center',
+      m: 0,
+      fontSize: 1
+    },
+    id: describedId ? "describe-" + describedId + "-validation" : undefined
   }, props, {
     children: [(0, _jsxRuntime.jsx)(Icon, {
       sx: {
         mr: 1
-      }
+      },
+      "aria-label": IconLabel
     }), children]
   }));
 };
@@ -44,5 +50,6 @@ var Validation = function Validation(_ref) {
 exports.Validation = Validation;
 Validation.propTypes = {
   children: _propTypes["default"].node,
-  isValid: _propTypes["default"].bool
+  isValid: _propTypes["default"].bool,
+  describedId: _propTypes["default"].string
 };

package/build/system/NewConfirmationDialog/NewConfirmationDialog.stories.js

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

package/build/system/NewDialog/NewDialog.stories.js

@@ -32,7 +32,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * Internal dependencies
  */
 var _default = {
-  title: 'NewDialog',
+  title: 'Dialog/NewDialog',
   component: NewDialog.Root
 };
 exports["default"] = _default;

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

@@ -53,7 +53,7 @@ var StyledListItem = function StyledListItem(props) {
     sx: {
       py: 2,
       borderBottom: '1px solid',
-      borderColor: 'borders.2',
+      borderColor: 'border',
       listStyleType: 'none',
       margin: 0,
       px: 0

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/build/system/UsageChart/UsageChart.js

@@ -0,0 +1,60 @@
+"use strict";
+
+exports.__esModule = true;
+exports.UsageChart = void 0;
+
+var _framerMotion = require("framer-motion");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/**
+ * External dependencies
+ */
+var UsageChart = function UsageChart(_ref) {
+  var total = _ref.total,
+      max = _ref.max,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'primary' : _ref$variant;
+  var width = total / max * 100 + '%';
+  var formattedTotal = total;
+
+  if (total > 1000000) {
+    formattedTotal = (total / 1000000).toFixed(2) + "M";
+  } else if (total > 1000) {
+    formattedTotal = (total / 1000).toFixed(2) + "K";
+  }
+
+  return (0, _jsxRuntime.jsx)("div", {
+    sx: {
+      height: variant === 'primary' ? 32 : 8,
+      overflow: 'hidden',
+      backgroundColor: variant === 'primary' ? 'border' : 'transparent'
+    },
+    children: (0, _jsxRuntime.jsx)(_framerMotion.motion.div, {
+      initial: {
+        width: 0
+      },
+      animate: {
+        width: width
+      },
+      transition: {
+        duration: 0.7
+      },
+      sx: {
+        height: '100%',
+        backgroundColor: variant === 'primary' ? 'primary' : 'grey.40'
+      }
+    })
+  });
+};
+
+exports.UsageChart = UsageChart;
+UsageChart.propTypes = {
+  total: _propTypes["default"].number,
+  max: _propTypes["default"].number,
+  variant: _propTypes["default"].string
+};

package/build/system/UsageChart/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+exports.__esModule = true;
+
+var _UsageChart = require("./UsageChart");
+
+exports.UsageChart = _UsageChart.UsageChart;

package/build/system/theme/index.js

@@ -165,6 +165,13 @@ var _default = {
     high: // eslint-disable-next-line max-len
     '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: (0, _getColor.getVariants)('color.gold')['7'],
+      closed: 'transparent',
+      hover: (0, _getColor.getVariants)('color.gold')['7']
+    }
+  },
   tag: {
     gold: (0, _getColor.getVariants)('tag.gold')
   },

package/package.json

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

package/src/system/Accordion/Accordion.js

@@ -81,24 +81,27 @@ export const Trigger = React.forwardRef(
 					fontWeight: 600,
 					textTransform: 'uppercase',
 
-					'&[data-state="closed"]': { backgroundColor: 'transparent' },
+					'&[data-state="closed"]': {
+						backgroundColor: ( { accordion } ) => accordion.background.closed,
+					},
 					'&[data-state="open"]': {
-						backgroundColor: 'backgroundSecondary',
-						borderBottom: theme => `1px solid ${ theme.colors.border }`,
+						backgroundColor: ( { accordion } ) => accordion.background.open,
+						borderBottom: ( { colors } ) => `1px solid ${ colors.border }`,
+						'.vip-accordion-trigger-indicator': { transform: 'rotate(270deg)' },
 					},
-					'&:hover': { backgroundColor: 'backgroundSecondary' },
+					'&:hover': { backgroundColor: ( { accordion } ) => accordion.background.hover },
 				} }
 				{ ...props }
 				ref={ forwardedRef }
 			>
 				{ 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 = {};