@automattic/vip-design-system 0.26.2 → 0.26.4

package/build/system/Accordion/Accordion.js

@@ -110,19 +110,29 @@ var Trigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forward
         fontWeight: 600,
         textTransform: 'uppercase',
         '&[data-state="closed"]': {
-          backgroundColor: 'transparent'
+          backgroundColor: function backgroundColor(_ref3) {
+            var accordion = _ref3.accordion;
+            return accordion.background.closed;
+          }
         },
         '&[data-state="open"]': {
-          backgroundColor: 'backgroundSecondary',
-          borderBottom: function borderBottom(theme) {
-            return "1px solid " + theme.colors.border;
+          backgroundColor: function backgroundColor(_ref4) {
+            var accordion = _ref4.accordion;
+            return accordion.background.open;
+          },
+          borderBottom: function borderBottom(_ref5) {
+            var colors = _ref5.colors;
+            return "1px solid " + colors.border;
           },
           '.vip-accordion-trigger-indicator': {
             transform: 'rotate(270deg)'
           }
         },
         '&:hover': {
-          backgroundColor: 'backgroundSecondary'
+          backgroundColor: function backgroundColor(_ref6) {
+            var accordion = _ref6.accordion;
+            return accordion.background.hover;
+          }
         }
       }
     }, props, {
@@ -148,10 +158,10 @@ Trigger.propTypes = {
   headingVariant: _propTypes["default"].string
 };
 
-var TriggerWithIcon = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, forwardedRef) {
-  var children = _ref3.children,
-      icon = _ref3.icon,
-      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref3, _excluded3);
+var TriggerWithIcon = /*#__PURE__*/_react["default"].forwardRef(function (_ref7, forwardedRef) {
+  var children = _ref7.children,
+      icon = _ref7.icon,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref7, _excluded3);
   return (0, _jsxRuntime.jsxs)(Trigger, (0, _extends2["default"])({}, props, {
     ref: forwardedRef,
     children: [(0, _jsxRuntime.jsx)("span", {
@@ -179,11 +189,11 @@ TriggerWithIcon.propTypes = {
   icon: _propTypes["default"].node.isRequired
 };
 
-var Content = /*#__PURE__*/_react["default"].forwardRef(function (_ref4, forwardedRef) {
-  var children = _ref4.children,
-      _ref4$sx = _ref4.sx,
-      sx = _ref4$sx === void 0 ? {} : _ref4$sx,
-      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref4, _excluded4);
+var Content = /*#__PURE__*/_react["default"].forwardRef(function (_ref8, forwardedRef) {
+  var children = _ref8.children,
+      _ref8$sx = _ref8.sx,
+      sx = _ref8$sx === void 0 ? {} : _ref8$sx,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref8, _excluded4);
   return (0, _jsxRuntime.jsx)(AccordionPrimitive.Content, (0, _extends2["default"])({
     sx: (0, _extends2["default"])({
       backgroundColor: 'transparent',
@@ -216,13 +226,13 @@ Content.propTypes = {
   sx: _propTypes["default"].object
 };
 
-var Root = /*#__PURE__*/_react["default"].forwardRef(function (_ref5, forwardRef) {
-  var _ref5$sx = _ref5.sx,
-      sx = _ref5$sx === void 0 ? {} : _ref5$sx,
-      defaultValue = _ref5.defaultValue,
-      type = _ref5.type,
-      children = _ref5.children,
-      className = _ref5.className;
+var Root = /*#__PURE__*/_react["default"].forwardRef(function (_ref9, forwardRef) {
+  var _ref9$sx = _ref9.sx,
+      sx = _ref9$sx === void 0 ? {} : _ref9$sx,
+      defaultValue = _ref9.defaultValue,
+      type = _ref9.type,
+      children = _ref9.children,
+      className = _ref9.className;
   return (0, _jsxRuntime.jsx)(AccordionPrimitive.Root, {
     className: (0, _classnames["default"])('vip-accordion-component', className),
     collapsible: true,

package/build/system/Form/Input.js

@@ -79,7 +79,6 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       ref: ref,
       id: forLabel,
       required: required,
-      noValidate: true,
       "aria-describedby": hasError ? "describe-" + forLabel + "-validation" : undefined,
       sx: (0, _extends2["default"])({}, inputStyles, sx)
     }, props)), hasError && errorMessage && (0, _jsxRuntime.jsx)(_.Validation, {

package/build/system/Form/Validation.js

@@ -42,6 +42,7 @@ var Validation = function Validation(_ref) {
       sx: {
         mr: 1
       },
+      role: "img",
       "aria-label": IconLabel
     }), children]
   }));

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.2",
+	"version": "0.26.4",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",

package/src/system/Accordion/Accordion.js

@@ -81,13 +81,15 @@ 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 }

package/src/system/Form/Input.js

@@ -54,7 +54,6 @@ const Input = React.forwardRef(
 				ref={ ref }
 				id={ forLabel }
 				required={ required }
-				noValidate
 				aria-describedby={ hasError ? `describe-${ forLabel }-validation` : undefined }
 				sx={ { ...inputStyles, ...sx } }
 				{ ...props }

package/src/system/Form/Validation.js

@@ -26,7 +26,7 @@ const Validation = ( { children, isValid, describedId = null, ...props } ) => {
 			id={ describedId ? `describe-${ describedId }-validation` : undefined }
 			{ ...props }
 		>
-			<Icon sx={ { mr: 1 } } aria-label={ IconLabel } />
+			<Icon sx={ { mr: 1 } } role="img" aria-label={ IconLabel } />
 			{ children }
 		</p>
 	);

package/src/system/theme/index.js

@@ -162,6 +162,14 @@ export default {
 			'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: getVariants( 'color.gold' )[ '7' ],
+			closed: 'transparent',
+			hover: getVariants( 'color.gold' )[ '7' ],
+		},
+	},
+
 	tag: {
 		gold: getVariants( 'tag.gold' ),
 	},