@automattic/vip-design-system 0.26.3 → 0.26.5

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/NewForm/Form.js

@@ -13,15 +13,20 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["children"];
+var _excluded = ["children", "className"];
 
 var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var children = _ref.children,
+      className = _ref.className,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsx)("form", (0, _extends2["default"])({
-    ref: forwardRef
+    ref: forwardRef,
+    className: (0, _classnames["default"])('vip-form-component', className),
+    noValidate: true
   }, props, {
     children: children
   }));
@@ -29,6 +34,7 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef)
 
 exports.Form = Form;
 Form.propTypes = {
-  children: _propTypes["default"].any
+  children: _propTypes["default"].any,
+  className: _propTypes["default"].any
 };
 Form.displayName = 'Form';

package/build/system/NewForm/FormAutocomplete.js

@@ -13,10 +13,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Label = require("../Form/Label");
-
 var _react2 = _interopRequireDefault(require("accessible-autocomplete/react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _FormAutocomplete = _interopRequireDefault(require("./FormAutocomplete.css"));
 
 exports.css = _FormAutocomplete["default"];
@@ -25,9 +25,11 @@ var _FormSelectContent = require("./FormSelectContent");
 
 var _FormSelectArrow = require("./FormSelectArrow");
 
+var _Label = require("../Form/Label");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["isInline", "forLabel", "options", "label", "getOptionLabel", "getOptionValue", "onChange", "value", "showAllValues", "displayMenu", "id"];
+var _excluded = ["isInline", "forLabel", "options", "label", "getOptionLabel", "getOptionValue", "onChange", "value", "showAllValues", "displayMenu", "id", "className"];
 
 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); }
 
@@ -122,6 +124,7 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       displayMenu = _ref$displayMenu === void 0 ? 'overlay' : _ref$displayMenu,
       _ref$id = _ref.id,
       id = _ref$id === void 0 ? 'vip-autocomplete' : _ref$id,
+      className = _ref.className,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -184,7 +187,8 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       setIsDirty(true);
     });
   }, [setIsDirty]);
-  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+  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),
       children: (0, _jsxRuntime.jsxs)(_FormSelectContent.FormSelectContent, {
@@ -216,6 +220,7 @@ FormAutocomplete.propTypes = {
   options: _propTypes["default"].array,
   getOptionLabel: _propTypes["default"].func,
   getOptionValue: _propTypes["default"].func,
-  onChange: _propTypes["default"].func
+  onChange: _propTypes["default"].func,
+  className: _propTypes["default"].any
 };
 FormAutocomplete.displayName = 'FormAutocomplete';

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.5",
 	"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/src/system/NewForm/Form.js

@@ -3,15 +3,22 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
-const Form = React.forwardRef( ( { children, ...props }, forwardRef ) => (
-	<form ref={ forwardRef } { ...props }>
+const Form = React.forwardRef( ( { children, className, ...props }, forwardRef ) => (
+	<form
+		ref={ forwardRef }
+		className={ classNames( 'vip-form-component', className ) }
+		noValidate
+		{ ...props }
+	>
 		{ children }
 	</form>
 ) );
 
 Form.propTypes = {
 	children: PropTypes.any,
+	className: PropTypes.any,
 };
 
 Form.displayName = 'Form';

package/src/system/NewForm/FormAutocomplete.js

@@ -5,8 +5,8 @@
  */
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Label } from '../Form/Label';
 import Autocomplete from 'accessible-autocomplete/react';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
@@ -14,6 +14,7 @@ import Autocomplete from 'accessible-autocomplete/react';
 import css from './FormAutocomplete.css';
 import { FormSelectContent } from './FormSelectContent';
 import { FormSelectArrow } from './FormSelectArrow';
+import { Label } from '../Form/Label';
 
 const defaultStyles = {
 	width: '100%',
@@ -81,6 +82,7 @@ const FormAutocomplete = React.forwardRef(
 			showAllValues = true,
 			displayMenu = 'overlay',
 			id = 'vip-autocomplete',
+			className,
 			...props
 		},
 		forwardRef
@@ -152,7 +154,7 @@ const FormAutocomplete = React.forwardRef(
 		}, [ setIsDirty ] );
 
 		return (
-			<>
+			<div className={ classNames( 'vip-form-autocomplete-component', className ) }>
 				{ label && ! isInline && <SelectLabel /> }
 
 				<div sx={ { ...defaultStyles, ...( isInline && inlineStyles ) } }>
@@ -173,7 +175,7 @@ const FormAutocomplete = React.forwardRef(
 						<FormSelectArrow />
 					</FormSelectContent>
 				</div>
-			</>
+			</div>
 		);
 	}
 );
@@ -190,6 +192,7 @@ FormAutocomplete.propTypes = {
 	getOptionLabel: PropTypes.func,
 	getOptionValue: PropTypes.func,
 	onChange: PropTypes.func,
+	className: PropTypes.any,
 };
 
 FormAutocomplete.displayName = 'FormAutocomplete';

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;