@automattic/vip-design-system 0.33.1 → 0.33.3

package/build/system/Accordion/Accordion.js

@@ -104,7 +104,7 @@ var Trigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forward
         all: 'unset',
         fontFamily: 'inherit',
         px: 3,
-        height: 45,
+        minHeight: 45,
         flex: 1,
         display: 'flex',
         alignItems: 'center',
@@ -134,7 +134,9 @@ var Trigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forward
           fontSize: 3,
           color: 'icon.primary',
           transform: 'rotate(90deg)',
-          transition: 'transform 300ms cubic-bezier(0.87, 0, 0.13, 1)'
+          transition: 'transform 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+          minHeight: '20px',
+          minWidth: '20px'
         },
         "aria-hidden": true
       })]

package/build/system/Accordion/Accordion.stories.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.WithLargeText = exports.Default = void 0;
 
 var _ri = require("react-icons/ri");
 
@@ -44,40 +44,55 @@ var ExampleContent = function ExampleContent() {
   });
 };
 
+var ExampleAccordion = function ExampleAccordion() {
+  return (0, _jsxRuntime.jsxs)(_.Accordion.Root, {
+    defaultValue: "teamPermissions",
+    sx: {
+      width: '250px'
+    },
+    children: [(0, _jsxRuntime.jsxs)(_.Accordion.Item, {
+      value: "teamPermissions",
+      children: [(0, _jsxRuntime.jsx)(_.Accordion.TriggerWithIcon, {
+        icon: (0, _jsxRuntime.jsx)(_ri.RiUserAddLine, {}),
+        children: "Team & Permissions"
+      }), (0, _jsxRuntime.jsx)(_.Accordion.Content, {
+        children: (0, _jsxRuntime.jsx)(ExampleContent, {})
+      })]
+    }), (0, _jsxRuntime.jsxs)(_.Accordion.Item, {
+      value: "addContentMedia",
+      children: [(0, _jsxRuntime.jsx)(_.Accordion.TriggerWithIcon, {
+        icon: (0, _jsxRuntime.jsx)(_bi.BiBookContent, {}),
+        children: "Add Content & Media"
+      }), (0, _jsxRuntime.jsx)(_.Accordion.Content, {
+        children: (0, _jsxRuntime.jsx)(ExampleContent, {})
+      })]
+    }), (0, _jsxRuntime.jsxs)(_.Accordion.Item, {
+      value: "addCode",
+      children: [(0, _jsxRuntime.jsx)(_.Accordion.TriggerWithIcon, {
+        icon: (0, _jsxRuntime.jsx)(_ri.RiCodeSSlashFill, {}),
+        children: "Add Code"
+      }), (0, _jsxRuntime.jsx)(_.Accordion.Content, {
+        children: (0, _jsxRuntime.jsx)(ExampleContent, {})
+      })]
+    })]
+  });
+};
+
 var Default = function Default() {
+  return (0, _jsxRuntime.jsx)(ExampleAccordion, {});
+};
+
+exports.Default = Default;
+
+var WithLargeText = function WithLargeText() {
   return (0, _jsxRuntime.jsx)(_.Box, {
-    children: (0, _jsxRuntime.jsxs)(_.Accordion.Root, {
-      defaultValue: "teamPermissions",
-      sx: {
-        width: '450px'
-      },
-      children: [(0, _jsxRuntime.jsxs)(_.Accordion.Item, {
-        value: "teamPermissions",
-        children: [(0, _jsxRuntime.jsx)(_.Accordion.TriggerWithIcon, {
-          icon: (0, _jsxRuntime.jsx)(_ri.RiUserAddLine, {}),
-          children: "Team & Permissions"
-        }), (0, _jsxRuntime.jsx)(_.Accordion.Content, {
-          children: (0, _jsxRuntime.jsx)(ExampleContent, {})
-        })]
-      }), (0, _jsxRuntime.jsxs)(_.Accordion.Item, {
-        value: "addContentMedia",
-        children: [(0, _jsxRuntime.jsx)(_.Accordion.TriggerWithIcon, {
-          icon: (0, _jsxRuntime.jsx)(_bi.BiBookContent, {}),
-          children: "Add Content & Media"
-        }), (0, _jsxRuntime.jsx)(_.Accordion.Content, {
-          children: (0, _jsxRuntime.jsx)(ExampleContent, {})
-        })]
-      }), (0, _jsxRuntime.jsxs)(_.Accordion.Item, {
-        value: "addCode",
-        children: [(0, _jsxRuntime.jsx)(_.Accordion.TriggerWithIcon, {
-          icon: (0, _jsxRuntime.jsx)(_ri.RiCodeSSlashFill, {}),
-          children: "Add Code"
-        }), (0, _jsxRuntime.jsx)(_.Accordion.Content, {
-          children: (0, _jsxRuntime.jsx)(ExampleContent, {})
-        })]
-      })]
-    })
+    sx: {
+      '.vip-heading-component > button': {
+        fontSize: '25px'
+      }
+    },
+    children: (0, _jsxRuntime.jsx)(ExampleAccordion, {})
   });
 };
 
-exports.Default = Default;
+exports.WithLargeText = WithLargeText;

package/build/system/Form/RadioBoxGroup.js

@@ -17,10 +17,12 @@ var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
 
 var _Label = require("./Label");
 
+var _Validation = require("./Validation");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["id", "value", "className", "label", "description", "labelProps"],
-    _excluded2 = ["optionWidth", "name", "onChange", "groupLabel", "defaultValue", "options", "disabled"];
+    _excluded2 = ["optionWidth", "name", "onChange", "groupLabel", "defaultValue", "options", "disabled", "errorMessage", "hasError", "required"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -137,6 +139,9 @@ var RadioBoxGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, f
       defaultValue = _ref2.defaultValue,
       options = _ref2.options,
       disabled = _ref2.disabled,
+      errorMessage = _ref2.errorMessage,
+      hasError = _ref2.hasError,
+      required = _ref2.required,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded2);
   var onChangeHandler = (0, _react.useCallback)(function (e) {
     var optionTriggered = options.find(function (option) {
@@ -154,29 +159,42 @@ var RadioBoxGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, f
       width: optionWidth
     }, (option == null ? void 0 : option.id) || (option == null ? void 0 : option.value));
   });
-  return (0, _jsxRuntime.jsxs)("fieldset", (0, _extends2["default"])({
-    sx: {
-      border: 0,
-      padding: 0
-    },
-    ref: forwardRef
-  }, props, {
-    children: [groupLabel ? (0, _jsxRuntime.jsx)(_Label.Label, {
-      as: "legend",
-      sx: {
+  return (0, _jsxRuntime.jsxs)("div", {
+    children: [(0, _jsxRuntime.jsxs)("fieldset", (0, _extends2["default"])({
+      sx: (0, _extends2["default"])({
+        border: 0,
+        p: hasError ? 2 : 0,
+        display: 'inline-block',
         mb: 2
-      },
-      children: groupLabel
-    }) : (0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
-      children: "Choose an option"
-    }), (0, _jsxRuntime.jsx)("div", {
-      sx: {
-        display: 'flex',
-        gap: 2
-      },
-      children: renderedOptions
+      }, hasError ? {
+        border: '1px solid',
+        borderColor: 'input.border.error',
+        borderRadius: 2
+      } : {}),
+      ref: forwardRef
+    }, props, {
+      children: [groupLabel ? (0, _jsxRuntime.jsx)(_Label.Label, {
+        as: "legend",
+        sx: {
+          mb: 2
+        },
+        required: required,
+        children: groupLabel
+      }) : (0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
+        children: "Choose an option"
+      }), (0, _jsxRuntime.jsx)("div", {
+        sx: {
+          display: 'flex',
+          gap: 2
+        },
+        children: renderedOptions
+      })]
+    })), hasError && errorMessage && (0, _jsxRuntime.jsx)(_Validation.Validation, {
+      isValid: false,
+      describedId: groupLabel,
+      children: errorMessage
     })]
-  }));
+  });
 });
 
 exports.RadioBoxGroup = RadioBoxGroup;
@@ -188,5 +206,9 @@ RadioBoxGroup.propTypes = {
   name: _propTypes["default"].string,
   disabled: _propTypes["default"].bool,
   groupLabel: _propTypes["default"].string,
-  optionWidth: _propTypes["default"].string
+  id: _propTypes["default"].string,
+  optionWidth: _propTypes["default"].string,
+  errorMessage: _propTypes["default"].string,
+  hasError: _propTypes["default"].bool,
+  required: _propTypes["default"].bool
 };

package/build/system/Form/RadioBoxGroup.stories.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.Errors = exports.Default = void 0;
 
 var _react = require("react");
 
@@ -50,4 +50,24 @@ var Default = function Default() {
   });
 };
 
-exports.Default = Default;
+exports.Default = Default;
+
+var Errors = function Errors() {
+  var _useState2 = (0, _react.useState)(null),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  return (0, _jsxRuntime.jsx)(_.RadioBoxGroup, {
+    defaultValue: value,
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    },
+    options: options,
+    required: true,
+    groupLabel: "Radio Box Group",
+    hasError: true,
+    errorMessage: "This is an error message"
+  });
+};
+
+exports.Errors = Errors;

package/build/system/NewForm/FormAutocomplete.js

@@ -37,7 +37,7 @@ var _Form = require("../Form");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["autoFilter", "className", "debounce", "displayMenu", "dropdownArrow", "errorMessage", "forLabel", "getOptionLabel", "getOptionValue", "hasError", "isInline", "label", "loading", "minLength", "noOptionsMessage", "onChange", "onInputChange", "options", "required", "searchIcon", "showAllValues", "resetOnBlur", "source", "value"];
+var _excluded = ["autoFilter", "className", "debounce", "displayMenu", "dropdownArrow", "forLabel", "getOptionLabel", "getOptionValue", "errorMessage", "hasError", "isInline", "label", "loading", "minLength", "noOptionsMessage", "onChange", "onInputChange", "options", "required", "searchIcon", "showAllValues", "resetOnBlur", "source", "value"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -147,11 +147,11 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       displayMenu = _ref$displayMenu === void 0 ? 'overlay' : _ref$displayMenu,
       _ref$dropdownArrow = _ref.dropdownArrow,
       dropdownArrow = _ref$dropdownArrow === void 0 ? DefaultArrow : _ref$dropdownArrow,
-      errorMessage = _ref.errorMessage,
       _ref$forLabel = _ref.forLabel,
       forLabel = _ref$forLabel === void 0 ? 'vip-autocomplete' : _ref$forLabel,
       getOptionLabel = _ref.getOptionLabel,
       getOptionValue = _ref.getOptionValue,
+      errorMessage = _ref.errorMessage,
       hasError = _ref.hasError,
       isInline = _ref.isInline,
       label = _ref.label,
@@ -345,7 +345,9 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
   return (0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames["default"])('vip-form-autocomplete-component', className),
     children: [label && !isInline && (0, _jsxRuntime.jsx)(SelectLabel, {}), (0, _jsxRuntime.jsx)("div", {
-      sx: (0, _extends2["default"])({}, defaultStyles, isInline && inlineStyles, searchIcon && searchIconStyles),
+      sx: (0, _extends2["default"])({}, defaultStyles, isInline && inlineStyles, searchIcon && searchIconStyles, hasError ? {
+        borderColor: 'input.border.error'
+      } : {}),
       children: (0, _jsxRuntime.jsxs)(_FormSelectContent.FormSelectContent, {
         isInline: inlineLabel,
         label: inlineLabel ? (0, _jsxRuntime.jsx)(SelectLabel, {}) : null,

package/build/system/Table/Table.js

@@ -37,6 +37,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef
   }
 
   return (0, _jsxRuntime.jsx)(_.Box, {
+    className: (0, _classnames["default"])('vip-table-component', className),
     sx: {
       width: '100%',
       overflowX: 'auto'
@@ -47,7 +48,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef
         minWidth: '1024px',
         borderSpacing: 0
       }, sx),
-      className: (0, _classnames["default"])('vip-table-component', className),
+      className: (0, _classnames["default"])('vip-table-component-element', className),
       ref: forwardRef
     }, props, {
       children: [caption && (0, _jsxRuntime.jsx)("caption", {

package/package.json

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

package/src/system/Accordion/Accordion.js

@@ -72,7 +72,7 @@ export const Trigger = React.forwardRef(
 					all: 'unset',
 					fontFamily: 'inherit',
 					px: 3,
-					height: 45,
+					minHeight: 45,
 					flex: 1,
 					display: 'flex',
 					alignItems: 'center',
@@ -103,6 +103,8 @@ export const Trigger = React.forwardRef(
 						color: 'icon.primary',
 						transform: 'rotate(90deg)',
 						transition: 'transform 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+						minHeight: '20px',
+						minWidth: '20px',
 					} }
 					aria-hidden
 				/>

package/src/system/Accordion/Accordion.stories.jsx

@@ -23,33 +23,37 @@ const ExampleContent = () => (
 	</Box>
 );
 
-export const Default = () => (
-	<Box>
-		<Accordion.Root defaultValue="teamPermissions" sx={ { width: '450px' } }>
-			<Accordion.Item value="teamPermissions">
-				<Accordion.TriggerWithIcon icon={ <RiUserAddLine /> }>
-					Team & Permissions
-				</Accordion.TriggerWithIcon>
-				<Accordion.Content>
-					<ExampleContent />
-				</Accordion.Content>
-			</Accordion.Item>
-			<Accordion.Item value="addContentMedia">
-				<Accordion.TriggerWithIcon icon={ <BiBookContent /> }>
-					Add Content & Media
-				</Accordion.TriggerWithIcon>
-				<Accordion.Content>
-					<ExampleContent />
-				</Accordion.Content>
-			</Accordion.Item>
-			<Accordion.Item value="addCode">
-				<Accordion.TriggerWithIcon icon={ <RiCodeSSlashFill /> }>
-					Add Code
-				</Accordion.TriggerWithIcon>
-				<Accordion.Content>
-					<ExampleContent />
-				</Accordion.Content>
-			</Accordion.Item>
-		</Accordion.Root>
+const ExampleAccordion = () => (
+	<Accordion.Root defaultValue="teamPermissions" sx={ { width: '250px' } }>
+		<Accordion.Item value="teamPermissions">
+			<Accordion.TriggerWithIcon icon={ <RiUserAddLine /> }>
+				Team & Permissions
+			</Accordion.TriggerWithIcon>
+			<Accordion.Content>
+				<ExampleContent />
+			</Accordion.Content>
+		</Accordion.Item>
+		<Accordion.Item value="addContentMedia">
+			<Accordion.TriggerWithIcon icon={ <BiBookContent /> }>
+				Add Content & Media
+			</Accordion.TriggerWithIcon>
+			<Accordion.Content>
+				<ExampleContent />
+			</Accordion.Content>
+		</Accordion.Item>
+		<Accordion.Item value="addCode">
+			<Accordion.TriggerWithIcon icon={ <RiCodeSSlashFill /> }>Add Code</Accordion.TriggerWithIcon>
+			<Accordion.Content>
+				<ExampleContent />
+			</Accordion.Content>
+		</Accordion.Item>
+	</Accordion.Root>
+);
+
+export const Default = () => <ExampleAccordion />;
+
+export const WithLargeText = () => (
+	<Box sx={ { '.vip-heading-component > button': { fontSize: '25px' } } }>
+		<ExampleAccordion />
 	</Box>
 );

package/src/system/Form/RadioBoxGroup.js

@@ -7,6 +7,7 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import ScreenReaderText from '../ScreenReaderText';
 import { Label } from './Label';
+import { Validation } from './Validation';
 
 /**
  * Internal dependencies
@@ -111,6 +112,9 @@ const RadioBoxGroup = React.forwardRef(
 			defaultValue,
 			options,
 			disabled,
+			errorMessage,
+			hasError,
+			required,
 			...props
 		},
 		forwardRef
@@ -138,30 +142,43 @@ const RadioBoxGroup = React.forwardRef(
 		) );
 
 		return (
-			<fieldset
-				sx={ {
-					border: 0,
-					padding: 0,
-				} }
-				ref={ forwardRef }
-				{ ...props }
-			>
-				{ groupLabel ? (
-					<Label as="legend" sx={ { mb: 2 } }>
-						{ groupLabel }
-					</Label>
-				) : (
-					<ScreenReaderText>Choose an option</ScreenReaderText>
-				) }
-				<div
+			<div>
+				<fieldset
 					sx={ {
-						display: 'flex',
-						gap: 2,
+						border: 0,
+						p: hasError ? 2 : 0,
+						display: 'inline-block',
+						mb: 2,
+						...( hasError
+							? { border: '1px solid', borderColor: 'input.border.error', borderRadius: 2 }
+							: {} ),
 					} }
+					ref={ forwardRef }
+					{ ...props }
 				>
-					{ renderedOptions }
-				</div>
-			</fieldset>
+					{ groupLabel ? (
+						<Label as="legend" sx={ { mb: 2 } } required={ required }>
+							{ groupLabel }
+						</Label>
+					) : (
+						<ScreenReaderText>Choose an option</ScreenReaderText>
+					) }
+					<div
+						sx={ {
+							display: 'flex',
+							gap: 2,
+						} }
+					>
+						{ renderedOptions }
+					</div>
+				</fieldset>
+
+				{ hasError && errorMessage && (
+					<Validation isValid={ false } describedId={ groupLabel }>
+						{ errorMessage }
+					</Validation>
+				) }
+			</div>
 		);
 	}
 );
@@ -175,7 +192,11 @@ RadioBoxGroup.propTypes = {
 	name: PropTypes.string,
 	disabled: PropTypes.bool,
 	groupLabel: PropTypes.string,
+	id: PropTypes.string,
 	optionWidth: PropTypes.string,
+	errorMessage: PropTypes.string,
+	hasError: PropTypes.bool,
+	required: PropTypes.bool,
 };
 
 export { RadioBoxGroup };

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

@@ -42,3 +42,19 @@ export const Default = () => {
 		/>
 	);
 };
+
+export const Errors = () => {
+	const [ value, setValue ] = useState( null );
+
+	return (
+		<RadioBoxGroup
+			defaultValue={ value }
+			onChange={ e => setValue( e.target.value ) }
+			options={ options }
+			required
+			groupLabel="Radio Box Group"
+			hasError={ true }
+			errorMessage="This is an error message"
+		/>
+	);
+};

package/src/system/NewForm/FormAutocomplete.js

@@ -103,10 +103,10 @@ const FormAutocomplete = React.forwardRef(
 			debounce = 0,
 			displayMenu = 'overlay',
 			dropdownArrow = DefaultArrow,
-			errorMessage,
 			forLabel = 'vip-autocomplete',
 			getOptionLabel,
 			getOptionValue,
+			errorMessage,
 			hasError,
 			isInline,
 			label,
@@ -304,6 +304,7 @@ const FormAutocomplete = React.forwardRef(
 						...defaultStyles,
 						...( isInline && inlineStyles ),
 						...( searchIcon && searchIconStyles ),
+						...( hasError ? { borderColor: 'input.border.error' } : {} ),
 					} }
 				>
 					<FormSelectContent

package/src/system/Table/Table.js

@@ -17,10 +17,13 @@ const Table = React.forwardRef(
 		}
 
 		return (
-			<Box sx={ { width: '100%', overflowX: 'auto' } }>
+			<Box
+				className={ classNames( 'vip-table-component', className ) }
+				sx={ { width: '100%', overflowX: 'auto' } }
+			>
 				<table
 					sx={ { width: '100%', minWidth: '1024px', borderSpacing: 0, ...sx } }
-					className={ classNames( 'vip-table-component', className ) }
+					className={ classNames( 'vip-table-component-element', className ) }
 					ref={ forwardRef }
 					{ ...props }
 				>