@automattic/vip-design-system 0.26.3 → 0.26.4

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/ResourceList/ResourceList.js

@@ -53,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

package/package.json

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

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

@@ -1,38 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.MultiSelect = void 0;
-
-var _reactSelect = _interopRequireDefault(require("react-select"));
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-var vipGold = '#c29c69'; // hardcoding for now
-
-var vipGrey2 = '#d7dee2';
-var customStyles = {
-  control: function control(styles) {
-    return _extends({}, styles, {
-      border: "1px solid " + vipGrey2,
-      boxShadow: 'none',
-      '&:hover': {
-        border: "1px solid " + vipGold
-      },
-      '&:focus': {
-        border: "1px solid " + vipGold
-      }
-    });
-  }
-};
-
-var MultiSelect = function MultiSelect(props) {
-  return (0, _jsxRuntime.jsx)(_reactSelect["default"], _extends({}, props, {
-    styles: customStyles
-  }));
-};
-
-exports.MultiSelect = MultiSelect;

package/build/system/UsageChart/UsageChart.js

@@ -1,60 +0,0 @@
-"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

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