@automattic/vip-design-system 0.23.7 → 0.24.0

package/build/system/Accordion/Accordion.js

@@ -0,0 +1,246 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.TriggerWithIcon = exports.Trigger = exports.Root = exports.Item = exports.Content = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _md = require("react-icons/md");
+
+var AccordionPrimitive = _interopRequireWildcard(require("@radix-ui/react-accordion"));
+
+var _react2 = require("@emotion/react");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Heading = require("../Heading");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+var _excluded = ["children"],
+    _excluded2 = ["children", "headingVariant"],
+    _excluded3 = ["children", "icon"],
+    _excluded4 = ["children", "sx"];
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var slideDown = (0, _react2.keyframes)({
+  from: {
+    height: 0
+  },
+  to: {
+    height: 'var(--radix-accordion-content-height)'
+  }
+});
+var slideUp = (0, _react2.keyframes)({
+  from: {
+    height: 'var(--radix-accordion-content-height)'
+  },
+  to: {
+    height: 0
+  }
+});
+
+var Item = function Item(_ref) {
+  var children = _ref.children,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(AccordionPrimitive.Item, (0, _extends2["default"])({}, props, {
+    sx: {
+      overflow: 'hidden',
+      borderWidth: '0 1px 1px 1px',
+      borderStyle: 'solid',
+      borderColor: 'border',
+      '&:first-of-type': {
+        borderTopWidth: '1px',
+        borderTopLeftRadius: 4,
+        borderTopRightRadius: 4
+      },
+      '&:last-child': {
+        borderBottomLeftRadius: 4,
+        borderBottomRightRadius: 4
+      },
+      '&:focus-within': function focusWithin(theme) {
+        return theme.outline;
+      }
+    },
+    children: children
+  }));
+};
+
+exports.Item = Item;
+Item.displayName = 'Accordion.Item';
+Item.propTypes = {
+  children: _propTypes["default"].node.isRequired
+};
+
+var Trigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardedRef) {
+  var children = _ref2.children,
+      _ref2$headingVariant = _ref2.headingVariant,
+      headingVariant = _ref2$headingVariant === void 0 ? 'h3' : _ref2$headingVariant,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded2);
+  return (0, _jsxRuntime.jsx)(_Heading.Heading, {
+    sx: {
+      all: 'unset',
+      display: 'flex'
+    },
+    variant: headingVariant,
+    children: (0, _jsxRuntime.jsxs)(AccordionPrimitive.Trigger, (0, _extends2["default"])({
+      sx: {
+        color: 'heading',
+        cursor: 'pointer',
+        all: 'unset',
+        fontFamily: 'inherit',
+        px: 3,
+        height: 45,
+        flex: 1,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        fontSize: 1,
+        fontWeight: 600,
+        textTransform: 'uppercase',
+        '&[data-state="closed"]': {
+          backgroundColor: 'transparent'
+        },
+        '&[data-state="open"]': {
+          backgroundColor: 'backgroundSecondary',
+          borderBottom: function borderBottom(theme) {
+            return "1px solid " + theme.colors.border;
+          }
+        },
+        '&:hover': {
+          backgroundColor: 'backgroundSecondary'
+        }
+      }
+    }, props, {
+      ref: forwardedRef,
+      children: [children, (0, _jsxRuntime.jsx)(_md.MdChevronRight, {
+        sx: {
+          fontSize: 3,
+          color: 'text',
+          transform: 'rotate(90deg)',
+          transition: 'transform 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+          '[data-state=open] &': {
+            transform: 'rotate(270deg)'
+          }
+        },
+        "aria-hidden": true
+      })]
+    }))
+  });
+});
+
+exports.Trigger = Trigger;
+Trigger.displayName = 'Accordion.Trigger';
+Trigger.propTypes = {
+  children: _propTypes["default"].node.isRequired,
+  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);
+  return (0, _jsxRuntime.jsxs)(Trigger, (0, _extends2["default"])({}, props, {
+    ref: forwardedRef,
+    children: [(0, _jsxRuntime.jsx)("span", {
+      sx: {
+        color: 'text',
+        fontSize: 3
+      },
+      children: icon
+    }), (0, _jsxRuntime.jsx)("div", {
+      sx: {
+        color: 'heading',
+        flexGrow: 1,
+        textAlign: 'left',
+        ml: 3
+      },
+      children: children
+    })]
+  }));
+});
+
+exports.TriggerWithIcon = TriggerWithIcon;
+TriggerWithIcon.displayName = 'Accordion.TriggerWithIcon';
+TriggerWithIcon.propTypes = {
+  children: _propTypes["default"].node.isRequired,
+  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);
+  return (0, _jsxRuntime.jsx)(AccordionPrimitive.Content, (0, _extends2["default"])({
+    sx: (0, _extends2["default"])({
+      backgroundColor: 'transparent',
+      color: 'text',
+      fontSize: 2,
+      overflow: 'hidden',
+      '&[data-state="open"]': {
+        animation: slideDown + " 300ms cubic-bezier(0.87, 0, 0.13, 1)"
+      },
+      '&[data-state="closed"]': {
+        animation: slideUp + " 300ms cubic-bezier(0.87, 0, 0.13, 1)"
+      }
+    }, sx)
+  }, props, {
+    ref: forwardedRef,
+    children: (0, _jsxRuntime.jsx)("div", {
+      sx: {
+        px: 3,
+        py: 2
+      },
+      children: children
+    })
+  }));
+});
+
+exports.Content = Content;
+Content.displayName = 'Accordion.Content';
+Content.propTypes = {
+  children: _propTypes["default"].node.isRequired,
+  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;
+  return (0, _jsxRuntime.jsx)(AccordionPrimitive.Root, {
+    className: (0, _classnames["default"])('vip-accordion-component', className),
+    collapsible: true,
+    defaultValue: defaultValue,
+    ref: forwardRef,
+    sx: (0, _extends2["default"])({
+      borderRadius: 6
+    }, sx),
+    type: type,
+    children: children
+  });
+});
+
+exports.Root = Root;
+Root.displayName = 'Accordion';
+Root.propTypes = {
+  children: _propTypes["default"].node,
+  className: _propTypes["default"].any,
+  defaultValue: _propTypes["default"].any,
+  sx: _propTypes["default"].object,
+  type: _propTypes["default"].oneOf(['single', 'multiple'])
+};

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

@@ -0,0 +1,83 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _ri = require("react-icons/ri");
+
+var _bi = require("react-icons/bi");
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'Accordion',
+  component: _.Accordion
+};
+exports["default"] = _default;
+
+var ExampleContent = function ExampleContent() {
+  return (0, _jsxRuntime.jsxs)(_.Box, {
+    children: [(0, _jsxRuntime.jsx)("p", {
+      sx: {
+        mt: 0
+      },
+      children: "Add your key team members to the VIP Dashboard."
+    }), (0, _jsxRuntime.jsx)("p", {
+      children: "Add developers to GitHub."
+    }), (0, _jsxRuntime.jsx)("p", {
+      sx: {
+        mb: 0
+      },
+      children: "Add content editors and developers to WordPress admin."
+    })]
+  });
+};
+
+var Default = function Default() {
+  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, {})
+        })]
+      })]
+    })
+  });
+};
+
+exports.Default = Default;

package/build/system/Accordion/Accordion.test.js

@@ -0,0 +1,129 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _themeUi = require("theme-ui");
+
+var Accordion = _interopRequireWildcard(require("./Accordion"));
+
+var _ = require("../");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var renderWithTheme = function renderWithTheme(children) {
+  return (0, _react.render)((0, _jsxRuntime.jsx)(_themeUi.ThemeProvider, {
+    theme: _.theme,
+    children: children
+  }));
+};
+
+var renderComponent = function renderComponent() {
+  return renderWithTheme((0, _jsxRuntime.jsxs)(Accordion.Root, {
+    defaultValue: "one",
+    sx: {
+      width: '400px'
+    },
+    children: [(0, _jsxRuntime.jsxs)(Accordion.Item, {
+      value: "one",
+      children: [(0, _jsxRuntime.jsx)(Accordion.Trigger, {
+        children: "trigger one"
+      }), (0, _jsxRuntime.jsx)(Accordion.Content, {
+        children: "content one"
+      })]
+    }), (0, _jsxRuntime.jsxs)(Accordion.Item, {
+      value: "two",
+      children: [(0, _jsxRuntime.jsx)(Accordion.Trigger, {
+        children: "trigger two"
+      }), (0, _jsxRuntime.jsx)(Accordion.Content, {
+        children: "content two"
+      })]
+    })]
+  }));
+};
+
+describe('<Accordion />', function () {
+  it('renders the Accordion component with default value visible', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _renderComponent, container;
+
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _renderComponent = renderComponent(), container = _renderComponent.container; // Should find the open content
+
+            expect(_react.screen.getByText('content one')).toBeInTheDocument(); // Should not find the closed content
+
+            expect(_react.screen.queryByText('content two')).toBeNull(); // Check for accessibility issues
+
+            _context.t0 = expect;
+            _context.next = 6;
+            return (0, _jestAxe.axe)(container);
+
+          case 6:
+            _context.t1 = _context.sent;
+            _context.next = 9;
+            return (0, _context.t0)(_context.t1).toHaveNoViolations();
+
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should open the content when clicking on its trigger', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _renderComponent2, container;
+
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _renderComponent2 = renderComponent(), container = _renderComponent2.container;
+
+            _react.fireEvent.click(_react.screen.getByRole('button', {
+              name: 'trigger two'
+            })); // Should find the open content
+
+
+            expect(_react.screen.queryByText('content one')).toBeNull(); // Should not find the closed content
+
+            expect(_react.screen.queryByText('content two')).toBeInTheDocument(); // Check for accessibility issues
+
+            _context2.t0 = expect;
+            _context2.next = 7;
+            return (0, _jestAxe.axe)(container);
+
+          case 7:
+            _context2.t1 = _context2.sent;
+            _context2.next = 10;
+            return (0, _context2.t0)(_context2.t1).toHaveNoViolations();
+
+          case 10:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+});

package/build/system/Accordion/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Accordion = void 0;
+
+var Accordion = _interopRequireWildcard(require("./Accordion"));
+
+exports.Accordion = Accordion;
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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

@@ -81,6 +81,10 @@ exports.Select = _Form.Select;
 exports.Textarea = _Form.Textarea;
 exports.Checkbox = _Form.Checkbox;
 
+var _Accordion = require("./Accordion");
+
+exports.Accordion = _Accordion.Accordion;
+
 var _Grid = require("./Grid");
 
 exports.Grid = _Grid.Grid;

package/build/system/theme/getColor.js

@@ -3,7 +3,9 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.getColor = void 0;
+exports.getVariants = exports.getColor = void 0;
+
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _valetTheme = _interopRequireDefault(require("./generated/valet-theme.json"));
 
@@ -22,4 +24,21 @@ var getColor = function getColor(color, variant) {
   return _valetTheme["default"][color][variant].value;
 };
 
-exports.getColor = getColor;
+exports.getColor = getColor;
+
+var resolvePath = function resolvePath(object, path, defaultValue) {
+  return path.split('.').reduce(function (acc, property) {
+    return acc ? acc[property] : defaultValue;
+  }, object);
+};
+
+var getVariants = function getVariants(color) {
+  var property = resolvePath(_valetTheme["default"], color, {});
+  return Object.keys(property).reduce(function (variants, variant) {
+    var _extends2;
+
+    return (0, _extends3["default"])({}, variants, (_extends2 = {}, _extends2[variant] = property[variant].value, _extends2));
+  }, {});
+};
+
+exports.getVariants = getVariants;

package/build/system/theme/index.js

@@ -98,6 +98,8 @@ var _default = {
     text: (0, _getColor.getColor)('text', 'secondary'),
     heading: (0, _getColor.getColor)('text', 'primary'),
     background: (0, _getColor.getColor)('background', 'primary'),
+    gold: (0, _getColor.getVariants)('color.gold'),
+    gray: (0, _getColor.getVariants)('color.gray'),
     backgroundSecondary: _colors.light.grey['10'],
     primary: _colors.light.brand['70'],
     secondary: '#30c',
@@ -163,6 +165,9 @@ 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)'
   },
+  tag: {
+    gold: (0, _getColor.getVariants)('tag.gold')
+  },
   cards: {
     primary: {
       padding: 3,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.23.7",
+	"version": "0.24.0",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",
@@ -20,6 +20,7 @@
 		"watch": "npm run build -- --watch"
 	},
 	"dependencies": {
+		"@radix-ui/react-accordion": "^1.0.1",
 		"@radix-ui/react-checkbox": "^1.0.0",
 		"@radix-ui/react-dialog": "^1.0.0",
 		"@radix-ui/react-dropdown-menu": "^1.0.1-rc.6",

package/src/system/Accordion/Accordion.js

@@ -0,0 +1,198 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MdChevronRight } from 'react-icons/md';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { keyframes } from '@emotion/react';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { Heading } from '../Heading';
+
+const slideDown = keyframes( {
+	from: { height: 0 },
+	to: { height: 'var(--radix-accordion-content-height)' },
+} );
+
+const slideUp = keyframes( {
+	from: { height: 'var(--radix-accordion-content-height)' },
+	to: { height: 0 },
+} );
+
+export const Item = ( { children, ...props } ) => (
+	<AccordionPrimitive.Item
+		{ ...props }
+		sx={ {
+			overflow: 'hidden',
+			borderWidth: '0 1px 1px 1px',
+			borderStyle: 'solid',
+			borderColor: 'border',
+
+			'&:first-of-type': {
+				borderTopWidth: '1px',
+				borderTopLeftRadius: 4,
+				borderTopRightRadius: 4,
+			},
+			'&:last-child': {
+				borderBottomLeftRadius: 4,
+				borderBottomRightRadius: 4,
+			},
+			'&:focus-within': theme => theme.outline,
+		} }
+	>
+		{ children }
+	</AccordionPrimitive.Item>
+);
+
+Item.displayName = 'Accordion.Item';
+
+Item.propTypes = {
+	children: PropTypes.node.isRequired,
+};
+
+export const Trigger = React.forwardRef(
+	( { children, headingVariant = 'h3', ...props }, forwardedRef ) => (
+		<Heading
+			sx={ {
+				all: 'unset',
+				display: 'flex',
+			} }
+			variant={ headingVariant }
+		>
+			<AccordionPrimitive.Trigger
+				sx={ {
+					color: 'heading',
+					cursor: 'pointer',
+					all: 'unset',
+					fontFamily: 'inherit',
+					px: 3,
+					height: 45,
+					flex: 1,
+					display: 'flex',
+					alignItems: 'center',
+					justifyContent: 'space-between',
+					fontSize: 1,
+					fontWeight: 600,
+					textTransform: 'uppercase',
+
+					'&[data-state="closed"]': { backgroundColor: 'transparent' },
+					'&[data-state="open"]': {
+						backgroundColor: 'backgroundSecondary',
+						borderBottom: theme => `1px solid ${ theme.colors.border }`,
+					},
+					'&:hover': { backgroundColor: 'backgroundSecondary' },
+				} }
+				{ ...props }
+				ref={ forwardedRef }
+			>
+				{ children }
+				<MdChevronRight
+					sx={ {
+						fontSize: 3,
+						color: 'text',
+						transform: 'rotate(90deg)',
+						transition: 'transform 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+						'[data-state=open] &': { transform: 'rotate(270deg)' },
+					} }
+					aria-hidden
+				/>
+			</AccordionPrimitive.Trigger>
+		</Heading>
+	)
+);
+
+Trigger.displayName = 'Accordion.Trigger';
+
+Trigger.propTypes = {
+	children: PropTypes.node.isRequired,
+	headingVariant: PropTypes.string,
+};
+
+export const TriggerWithIcon = React.forwardRef( ( { children, icon, ...props }, forwardedRef ) => (
+	<Trigger { ...props } ref={ forwardedRef }>
+		<span sx={ { color: 'text', fontSize: 3 } }>{ icon }</span>
+		<div sx={ { color: 'heading', flexGrow: 1, textAlign: 'left', ml: 3 } }>{ children }</div>
+	</Trigger>
+) );
+
+TriggerWithIcon.displayName = 'Accordion.TriggerWithIcon';
+
+TriggerWithIcon.propTypes = {
+	children: PropTypes.node.isRequired,
+	icon: PropTypes.node.isRequired,
+};
+
+export const Content = React.forwardRef( ( { children, sx = {}, ...props }, forwardedRef ) => {
+	return (
+		<AccordionPrimitive.Content
+			sx={ {
+				backgroundColor: 'transparent',
+				color: 'text',
+				fontSize: 2,
+				overflow: 'hidden',
+
+				'&[data-state="open"]': {
+					animation: `${ slideDown } 300ms cubic-bezier(0.87, 0, 0.13, 1)`,
+				},
+				'&[data-state="closed"]': {
+					animation: `${ slideUp } 300ms cubic-bezier(0.87, 0, 0.13, 1)`,
+				},
+				...sx,
+			} }
+			{ ...props }
+			ref={ forwardedRef }
+		>
+			<div
+				sx={ {
+					px: 3,
+					py: 2,
+				} }
+			>
+				{ children }
+			</div>
+		</AccordionPrimitive.Content>
+	);
+} );
+
+Content.displayName = 'Accordion.Content';
+
+Content.propTypes = {
+	children: PropTypes.node.isRequired,
+	sx: PropTypes.object,
+};
+
+const Root = React.forwardRef(
+	( { sx = {}, defaultValue, type, children, className }, forwardRef ) => (
+		<AccordionPrimitive.Root
+			className={ classNames( 'vip-accordion-component', className ) }
+			collapsible
+			defaultValue={ defaultValue }
+			ref={ forwardRef }
+			sx={ {
+				borderRadius: 6,
+				...sx,
+			} }
+			type={ type }
+		>
+			{ children }
+		</AccordionPrimitive.Root>
+	)
+);
+
+Root.displayName = 'Accordion';
+
+Root.propTypes = {
+	children: PropTypes.node,
+	className: PropTypes.any,
+	defaultValue: PropTypes.any,
+	sx: PropTypes.object,
+	type: PropTypes.oneOf( [ 'single', 'multiple' ] ),
+};
+
+export { Root };

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

@@ -0,0 +1,55 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import { RiUserAddLine, RiCodeSSlashFill } from 'react-icons/ri';
+import { BiBookContent } from 'react-icons/bi';
+/**
+ * Internal dependencies
+ */
+import { Box, Accordion } from '..';
+
+export default {
+	title: 'Accordion',
+	component: Accordion,
+};
+
+const ExampleContent = () => (
+	<Box>
+		<p sx={ { mt: 0 } }>Add your key team members to the VIP Dashboard.</p>
+		<p>Add developers to GitHub.</p>
+		<p sx={ { mb: 0 } }>Add content editors and developers to WordPress admin.</p>
+	</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>
+	</Box>
+);

package/src/system/Accordion/Accordion.test.js

@@ -0,0 +1,61 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import { ThemeProvider } from 'theme-ui';
+
+/**
+ * Internal dependencies
+ */
+import * as Accordion from './Accordion';
+import { theme } from '../';
+
+const renderWithTheme = children =>
+	render( <ThemeProvider theme={ theme }>{ children }</ThemeProvider> );
+
+const renderComponent = () =>
+	renderWithTheme(
+		<Accordion.Root defaultValue="one" sx={ { width: '400px' } }>
+			<Accordion.Item value="one">
+				<Accordion.Trigger>trigger one</Accordion.Trigger>
+				<Accordion.Content>content one</Accordion.Content>
+			</Accordion.Item>
+			<Accordion.Item value="two">
+				<Accordion.Trigger>trigger two</Accordion.Trigger>
+				<Accordion.Content>content two</Accordion.Content>
+			</Accordion.Item>
+		</Accordion.Root>
+	);
+
+describe( '<Accordion />', () => {
+	it( 'renders the Accordion component with default value visible', async () => {
+		const { container } = renderComponent();
+
+		// Should find the open content
+		expect( screen.getByText( 'content one' ) ).toBeInTheDocument();
+
+		// Should not find the closed content
+		expect( screen.queryByText( 'content two' ) ).toBeNull();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	it( 'should open the content when clicking on its trigger', async () => {
+		const { container } = renderComponent();
+
+		fireEvent.click( screen.getByRole( 'button', { name: 'trigger two' } ) );
+
+		// Should find the open content
+		expect( screen.queryByText( 'content one' ) ).toBeNull();
+
+		// Should not find the closed content
+		expect( screen.queryByText( 'content two' ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/Accordion/index.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import * as Accordion from './Accordion';
+
+export { Accordion };

package/src/system/index.js

@@ -38,6 +38,7 @@ import {
 	Textarea,
 	Checkbox,
 } from './Form';
+import { Accordion } from './Accordion';
 import { Grid } from './Grid';
 import { Heading } from './Heading';
 import { Link } from './Link';
@@ -56,6 +57,7 @@ import theme from './theme';
 import { Wizard, WizardStep, WizardStepHorizontal } from './Wizard';
 
 export {
+	Accordion,
 	Avatar,
 	Badge,
 	Box,

package/src/system/theme/getColor.js

@@ -11,3 +11,17 @@ export const getColor = ( color, variant = 'default' ) => {
 
 	return Valet[ color ][ variant ].value;
 };
+
+const resolvePath = ( object, path, defaultValue ) => {
+	return path.split( '.' ).reduce( ( acc, property ) => {
+		return acc ? acc[ property ] : defaultValue;
+	}, object );
+};
+
+export const getVariants = color => {
+	const property = resolvePath( Valet, color, {} );
+
+	return Object.keys( property ).reduce( ( variants, variant ) => {
+		return { ...variants, [ variant ]: property[ variant ].value };
+	}, {} );
+};

package/src/system/theme/index.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import { light, dark } from './colors';
-import { getColor } from './getColor';
+import { getColor, getVariants } from './getColor';
 
 const textStyles = {
 	h1: {
@@ -90,6 +90,8 @@ export default {
 		text: getColor( 'text', 'secondary' ),
 		heading: getColor( 'text', 'primary' ),
 		background: getColor( 'background', 'primary' ),
+		gold: getVariants( 'color.gold' ),
+		gray: getVariants( 'color.gray' ),
 		backgroundSecondary: light.grey[ '10' ],
 		primary: light.brand[ '70' ],
 		secondary: '#30c',
@@ -160,6 +162,10 @@ 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)',
 	},
 
+	tag: {
+		gold: getVariants( 'tag.gold' ),
+	},
+
 	cards: {
 		primary: {
 			padding: 3,