@automattic/vip-design-system 0.26.2 → 0.26.3

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

@@ -0,0 +1,38 @@
+"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/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/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.2",
+	"version": "0.26.3",
 	"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/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' ),
 	},