@automattic/vip-design-system 0.19.1 → 0.19.2

package/README.md

@@ -102,3 +102,15 @@ git push origin trunk
 ```
 
 8. For major versions or breaking changes, it's recommended to [create a RELEASE](https://github.com/Automattic/vip-design-system/releases) with the published tag.
+
+### Troubleshooting
+
+### Dialog + Dropdown usage
+
+If you are facing a Dialog overlaping a Dropdown content, add this CSS to your application:
+
+```css
+div[data-radix-popper-content-wrapper][data-aria-hidden='true'] {
+	opacity: 0;
+}
+```

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

@@ -4,10 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = require("@testing-library/react");
 
 var _jestAxe = require("jest-axe");
@@ -38,6 +38,15 @@ var defaultProps = {
   forLabel: 'my_desert_list',
   options: options
 };
+var groupedProps = (0, _extends2["default"])({}, defaultProps, {
+  options: [{
+    label: 'Group name',
+    options: [options[0]]
+  }, {
+    label: 'Another Group name',
+    options: [options[1], options[2]]
+  }]
+});
 describe('<FormSelect />', function () {
   it('renders the FormSelect component', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
     var _render, container;
@@ -50,22 +59,85 @@ describe('<FormSelect />', function () {
               id: "my_desert_list"
             }, defaultProps))), container = _render.container;
             expect(_react.screen.getByLabelText(defaultProps.label)).toBeInTheDocument();
-            expect(_react.screen.getByRole('combobox')).toBeInTheDocument(); // Check for accessibility issues
+            expect(_react.screen.getByRole('combobox')).toBeInTheDocument();
+            expect(_react.screen.getAllByRole('option')).toHaveLength(3);
+            expect(_react.screen.queryByRole('group')).not.toBeInTheDocument(); // Check for accessibility issues
 
             _context.t0 = expect;
-            _context.next = 6;
+            _context.next = 8;
             return (0, _jestAxe.axe)(container);
 
-          case 6:
+          case 8:
             _context.t1 = _context.sent;
-            _context.next = 9;
+            _context.next = 11;
             return (0, _context.t0)(_context.t1).toHaveNoViolations();
 
-          case 9:
+          case 11:
           case "end":
             return _context.stop();
         }
       }
     }, _callee);
   })));
+  it('renders the FormSelect component with optgroup when options are grouped', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render2, container;
+
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_FormSelect.FormSelect, (0, _extends2["default"])({
+              id: "my_desert_list"
+            }, groupedProps))), container = _render2.container;
+            expect(_react.screen.getByLabelText(defaultProps.label)).toBeInTheDocument();
+            expect(_react.screen.getByRole('combobox')).toBeInTheDocument();
+            expect(_react.screen.getAllByRole('option')).toHaveLength(3);
+            expect(_react.screen.getAllByRole('group')).toHaveLength(2); // Check for accessibility issues
+
+            _context2.t0 = expect;
+            _context2.next = 8;
+            return (0, _jestAxe.axe)(container);
+
+          case 8:
+            _context2.t1 = _context2.sent;
+            _context2.next = 11;
+            return (0, _context2.t0)(_context2.t1).toHaveNoViolations();
+
+          case 11:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('renders the FormSelect component when isInline is true', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    var _render3, container;
+
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _render3 = (0, _react.render)((0, _jsxRuntime.jsx)(_FormSelect.FormSelect, (0, _extends2["default"])({
+              id: "my_desert_list",
+              isInline: true
+            }, defaultProps))), container = _render3.container;
+            expect(_react.screen.getByLabelText(defaultProps.label)).toBeInTheDocument();
+            expect(_react.screen.getByRole('combobox')).toBeInTheDocument(); // Check for accessibility issues
+
+            _context3.t0 = expect;
+            _context3.next = 6;
+            return (0, _jestAxe.axe)(container);
+
+          case 6:
+            _context3.t1 = _context3.sent;
+            _context3.next = 9;
+            return (0, _context3.t0)(_context3.t1).toHaveNoViolations();
+
+          case 9:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
 });

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

@@ -63,15 +63,13 @@ var Wizard = function Wizard(_ref) {
     }) : steps.map(function (_ref3, index) {
       var title = _ref3.title,
           subTitle = _ref3.subTitle,
-          children = _ref3.children,
-          titleVariant = _ref3.titleVariant;
+          children = _ref3.children;
       return (0, _jsxRuntime.jsx)(_.WizardStep, {
         active: index === activeStep,
         complete: completed.includes(index),
         order: index + 1,
         subTitle: subTitle,
         title: title,
-        titleVariant: titleVariant,
         children: children
       }, index);
     })

package/build/system/Wizard/Wizard.stories.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.Default = exports.CustomHeadingVariant = void 0;
+exports["default"] = exports.Default = exports.CustomTitle = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -11,6 +11,8 @@ var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+/** @jsxImportSource theme-ui */
+
 /**
  * External dependencies
  */
@@ -83,16 +85,24 @@ var Default = function Default() {
 
 exports.Default = Default;
 
-var CustomHeadingVariant = function CustomHeadingVariant() {
+var CustomTitle = function CustomTitle() {
   var steps = [{
-    title: 'Choose Domain',
-    titleVariant: 'h1',
-    subTitle: (0, _jsxRuntime.jsx)("h2", {
+    title: (0, _jsxRuntime.jsx)("h3", {
+      sx: {
+        m: 0
+      },
+      children: "Choose Domain"
+    }),
+    subTitle: (0, _jsxRuntime.jsx)("span", {
       children: "You can bring a domain name you already own, or buy a new one."
     })
   }, {
-    title: 'Configure DNS',
-    titleVariant: 'h1'
+    title: (0, _jsxRuntime.jsx)("h3", {
+      sx: {
+        m: 0
+      },
+      children: "Configure DNS"
+    })
   }];
   return (0, _jsxRuntime.jsx)(_react["default"].Fragment, {
     children: (0, _jsxRuntime.jsx)(_.Wizard, {
@@ -103,4 +113,4 @@ var CustomHeadingVariant = function CustomHeadingVariant() {
   });
 };
 
-exports.CustomHeadingVariant = CustomHeadingVariant;
+exports.CustomTitle = CustomTitle;

package/build/system/Wizard/WizardStep.js

@@ -29,10 +29,8 @@ var WizardStep = function WizardStep(_ref) {
       complete = _ref$complete === void 0 ? false : _ref$complete,
       children = _ref.children,
       active = _ref.active,
-      order = _ref.order,
-      _ref$titleVariant = _ref.titleVariant,
-      titleVariant = _ref$titleVariant === void 0 ? 'h4' : _ref$titleVariant;
-  var borderLeftColor = 'borders.2';
+      order = _ref.order;
+  var borderLeftColor = 'border';
 
   if (complete) {
     borderLeftColor = 'success';
@@ -66,20 +64,30 @@ var WizardStep = function WizardStep(_ref) {
     },
     "data-step": order,
     "data-active": active || undefined,
-    children: [(0, _jsxRuntime.jsxs)(_.Heading, {
-      variant: titleVariant,
+    children: [typeof title === 'string' ? (0, _jsxRuntime.jsxs)(_.Heading, {
+      variant: "h4",
       sx: {
         mb: 0,
         display: 'flex',
         alignItems: 'center',
-        color: color,
-        fontSize: 2
+        color: color
       },
       children: [(0, _jsxRuntime.jsx)(_md.MdCheckCircle, {
+        "aria-hidden": "true",
         sx: {
           mr: 2
-        },
-        size: 18
+        }
+      }), title]
+    }) : (0, _jsxRuntime.jsxs)(_.Flex, {
+      sx: {
+        alignItems: 'center',
+        color: color
+      },
+      children: [(0, _jsxRuntime.jsx)(_md.MdCheckCircle, {
+        "aria-hidden": "true",
+        sx: {
+          mr: 2
+        }
       }), title]
     }), subTitle && active && (0, _jsxRuntime.jsx)(_.Text, {
       sx: {
@@ -97,6 +105,5 @@ WizardStep.propTypes = {
   complete: _propTypes["default"].bool,
   order: _propTypes["default"].number.isRequired,
   subTitle: _propTypes["default"].node,
-  title: _propTypes["default"].node,
-  titleVariant: _propTypes["default"].string
+  title: _propTypes["default"].node
 };

package/build/system/Wizard/WizardStepHorizontal.js

@@ -25,20 +25,31 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 var WizardStepHorizontal = function WizardStepHorizontal(_ref) {
   var title = _ref.title,
       active = _ref.active,
-      order = _ref.order,
-      _ref$titleVariant = _ref.titleVariant,
-      titleVariant = _ref$titleVariant === void 0 ? 'h4' : _ref$titleVariant;
-  return (0, _jsxRuntime.jsxs)(_.Heading, {
-    variant: titleVariant,
+      order = _ref.order;
+  var color = active ? 'heading' : 'muted';
+  return typeof title === 'string' ? (0, _jsxRuntime.jsxs)(_.Heading, {
+    variant: "h4",
     sx: {
       mb: 0,
       display: 'flex',
       alignItems: 'center',
-      color: active ? 'heading' : 'muted'
+      color: color
     },
     "data-step": order,
     "data-active": active || undefined,
     children: [(0, _jsxRuntime.jsx)(_md.MdCheckCircle, {
+      "aria-hidden": "true",
+      sx: {
+        mr: 2
+      }
+    }), title]
+  }) : (0, _jsxRuntime.jsxs)(_.Flex, {
+    sx: {
+      alignItems: 'center',
+      color: color
+    },
+    children: [(0, _jsxRuntime.jsx)(_md.MdCheckCircle, {
+      "aria-hidden": "true",
       sx: {
         mr: 2
       }
@@ -51,6 +62,5 @@ WizardStepHorizontal.propTypes = {
   active: _propTypes["default"].bool,
   order: _propTypes["default"].number.isRequired,
   subTitle: _propTypes["default"].node,
-  title: _propTypes["default"].node,
-  titleVariant: _propTypes["default"].string
+  title: _propTypes["default"].node
 };

package/build/system/index.js

@@ -105,11 +105,6 @@ var _Spinner = require("./Spinner");
 
 exports.Spinner = _Spinner.Spinner;
 
-var _ResourceList = require("./ResourceList");
-
-exports.ResourceList = _ResourceList.ResourceList;
-exports.ResourceItem = _ResourceList.ResourceItem;
-
 var _Tooltip = require("./Tooltip");
 
 exports.Tooltip = _Tooltip.Tooltip;

package/package.json

@@ -1,9 +1,10 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.19.1",
+	"version": "0.19.2",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",
+		"prepare": "npm run build",
 		"build": "npm run theme-update && cross-env NODE_ENV=production babel src --out-dir build && npm run theme-builder-copy",
 		"format": "prettier --write \"src/**/*.{js,ts,tsx,md,mdx,json}\"",
 		"format:check": "prettier --list-different -- \"src/system/**/*.{js,ts,tsx,md,mdx,json}\"",

package/src/system/NewForm/FormSelect.test.js

@@ -21,10 +21,48 @@ const defaultProps = {
 	options,
 };
 
+const groupedProps = {
+	...defaultProps,
+	options: [
+		{
+			label: 'Group name',
+			options: [ options[ 0 ] ],
+		},
+		{
+			label: 'Another Group name',
+			options: [ options[ 1 ], options[ 2 ] ],
+		},
+	],
+};
+
 describe( '<FormSelect />', () => {
 	it( 'renders the FormSelect component', async () => {
 		const { container } = render( <FormSelect id="my_desert_list" { ...defaultProps } /> );
 
+		expect( screen.getByLabelText( defaultProps.label ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'combobox' ) ).toBeInTheDocument();
+		expect( screen.getAllByRole( 'option' ) ).toHaveLength( 3 );
+		expect( screen.queryByRole( 'group' ) ).not.toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	it( 'renders the FormSelect component with optgroup when options are grouped', async () => {
+		const { container } = render( <FormSelect id="my_desert_list" { ...groupedProps } /> );
+
+		expect( screen.getByLabelText( defaultProps.label ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'combobox' ) ).toBeInTheDocument();
+		expect( screen.getAllByRole( 'option' ) ).toHaveLength( 3 );
+		expect( screen.getAllByRole( 'group' ) ).toHaveLength( 2 );
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	it( 'renders the FormSelect component when isInline is true', async () => {
+		const { container } = render( <FormSelect id="my_desert_list" isInline { ...defaultProps } /> );
+
 		expect( screen.getByLabelText( defaultProps.label ) ).toBeInTheDocument();
 		expect( screen.getByRole( 'combobox' ) ).toBeInTheDocument();
 

package/src/system/Wizard/Wizard.js

@@ -42,7 +42,7 @@ const Wizard = ( { steps, activeStep, variant, completed = [], className = null,
 					{ steps[ activeStep ].children }
 				</Box>
 			) : (
-				steps.map( ( { title, subTitle, children, titleVariant }, index ) => (
+				steps.map( ( { title, subTitle, children }, index ) => (
 					<WizardStep
 						active={ index === activeStep }
 						complete={ completed.includes( index ) }
@@ -50,7 +50,6 @@ const Wizard = ( { steps, activeStep, variant, completed = [], className = null,
 						order={ index + 1 }
 						subTitle={ subTitle }
 						title={ title }
-						titleVariant={ titleVariant }
 					>
 						{ children }
 					</WizardStep>

package/src/system/Wizard/Wizard.stories.jsx

@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 /**
  * External dependencies
  */
@@ -52,16 +54,14 @@ export const Default = () => {
 	);
 };
 
-export const CustomHeadingVariant = () => {
+export const CustomTitle = () => {
 	const steps = [
 		{
-			title: 'Choose Domain',
-			titleVariant: 'h1',
-			subTitle: <h2>You can bring a domain name you already own, or buy a new one.</h2>,
+			title: <h3 sx={ { m: 0 } }>Choose Domain</h3>,
+			subTitle: <span>You can bring a domain name you already own, or buy a new one.</span>,
 		},
 		{
-			title: 'Configure DNS',
-			titleVariant: 'h1',
+			title: <h3 sx={ { m: 0 } }>Configure DNS</h3>,
 		},
 	];
 	return (

package/src/system/Wizard/WizardStep.js

@@ -9,18 +9,10 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
-import { Card, Heading, Text } from '..';
+import { Card, Heading, Text, Flex } from '..';
 
-const WizardStep = ( {
-	title,
-	subTitle,
-	complete = false,
-	children,
-	active,
-	order,
-	titleVariant = 'h4',
-} ) => {
-	let borderLeftColor = 'borders.2';
+const WizardStep = ( { title, subTitle, complete = false, children, active, order } ) => {
+	let borderLeftColor = 'border';
 
 	if ( complete ) {
 		borderLeftColor = 'success';
@@ -56,19 +48,26 @@ const WizardStep = ( {
 			data-step={ order }
 			data-active={ active || undefined }
 		>
-			<Heading
-				variant={ titleVariant }
-				sx={ {
-					mb: 0,
-					display: 'flex',
-					alignItems: 'center',
-					color,
-					fontSize: 2,
-				} }
-			>
-				<MdCheckCircle sx={ { mr: 2 } } size={ 18 } />
-				{ title }
-			</Heading>
+			{ typeof title === 'string' ? (
+				<Heading
+					variant="h4"
+					sx={ {
+						mb: 0,
+						display: 'flex',
+						alignItems: 'center',
+						color: color,
+					} }
+				>
+					<MdCheckCircle aria-hidden="true" sx={ { mr: 2 } } />
+					{ title }
+				</Heading>
+			) : (
+				<Flex sx={ { alignItems: 'center', color } }>
+					<MdCheckCircle aria-hidden="true" sx={ { mr: 2 } } />
+					{ title }
+				</Flex>
+			) }
+
 			{ subTitle && active && <Text sx={ { mb: 3 } }>{ subTitle }</Text> }
 
 			{ active && children }
@@ -83,7 +82,6 @@ WizardStep.propTypes = {
 	order: PropTypes.number.isRequired,
 	subTitle: PropTypes.node,
 	title: PropTypes.node,
-	titleVariant: PropTypes.string,
 };
 
 export { WizardStep };

package/src/system/Wizard/WizardStepHorizontal.js

@@ -9,24 +9,31 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
-import { Heading } from '..';
+import { Heading, Flex } from '..';
 
-const WizardStepHorizontal = ( { title, active, order, titleVariant = 'h4' } ) => {
-	return (
+const WizardStepHorizontal = ( { title, active, order } ) => {
+	const color = active ? 'heading' : 'muted';
+
+	return typeof title === 'string' ? (
 		<Heading
-			variant={ titleVariant }
+			variant="h4"
 			sx={ {
 				mb: 0,
 				display: 'flex',
 				alignItems: 'center',
-				color: active ? 'heading' : 'muted',
+				color,
 			} }
 			data-step={ order }
 			data-active={ active || undefined }
 		>
-			<MdCheckCircle sx={ { mr: 2 } } />
+			<MdCheckCircle aria-hidden="true" sx={ { mr: 2 } } />
 			{ title }
 		</Heading>
+	) : (
+		<Flex sx={ { alignItems: 'center', color } }>
+			<MdCheckCircle aria-hidden="true" sx={ { mr: 2 } } />
+			{ title }
+		</Flex>
 	);
 };
 
@@ -35,7 +42,6 @@ WizardStepHorizontal.propTypes = {
 	order: PropTypes.number.isRequired,
 	subTitle: PropTypes.node,
 	title: PropTypes.node,
-	titleVariant: PropTypes.string,
 };
 
 export { WizardStepHorizontal };

package/src/system/index.js

@@ -44,7 +44,6 @@ import { Link } from './Link';
 import { Notice } from './Notice';
 import { Progress } from './Progress';
 import { Spinner } from './Spinner';
-import { ResourceList, ResourceItem } from './ResourceList';
 import { Tooltip } from './Tooltip';
 import { Time } from './Time';
 import { Timeline } from './Timeline';
@@ -94,8 +93,6 @@ export {
 	Select,
 	Radio,
 	RadioBoxGroup,
-	ResourceList,
-	ResourceItem,
 	Textarea,
 	Progress,
 	Text,

package/src/system/ResourceList/ResourceItem.js

@@ -1,66 +0,0 @@
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-import PropTypes from 'prop-types';
-
-/**
- * Internal dependencies
- */
-import { Box, Flex, Time } from '..';
-
-const ResourceItem = ( {
-	children,
-	item,
-	renderActions,
-	relativeTime = false,
-	timeOnly = false,
-	dateKey,
-	icon = null,
-} ) => {
-	return (
-		<Flex
-			sx={ {
-				alignItems: 'center',
-				gap: 3,
-			} }
-		>
-			{ icon }
-			<Box sx={ { flex: '1 1 auto' } }>{ children }</Box>
-			<Flex
-				sx={ {
-					flex: '0 0 auto',
-					alignItems: 'center',
-					gap: 3,
-				} }
-			>
-				<Time
-					className="time"
-					relativeTime={ relativeTime }
-					timeOnly={ timeOnly }
-					time={ item[ dateKey ] }
-					sx={ { color: 'muted', mb: 0, textAlign: 'right', flex: '0 0 auto' } }
-				/>
-				{ renderActions && (
-					<Flex className="actions" sx={ { alignItems: 'center', gap: 3 } }>
-						<Box sx={ { width: 4, height: 4, borderRadius: 4, bg: 'border' } } />
-						{ renderActions( item ) }
-					</Flex>
-				) }
-			</Flex>
-		</Flex>
-	);
-};
-
-ResourceItem.propTypes = {
-	children: PropTypes.node,
-	item: PropTypes.object,
-	icon: PropTypes.node,
-	relativeTime: PropTypes.bool,
-	timeOnly: PropTypes.bool,
-	dateKey: PropTypes.string,
-	renderActions: PropTypes.func,
-};
-
-export { ResourceItem };

package/src/system/ResourceList/ResourceList.js

@@ -1,108 +0,0 @@
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-import PropTypes from 'prop-types';
-import { useMemo } from 'react';
-
-/**
- * Internal dependencies
- */
-import { Box, Heading } from '..';
-
-const formatterOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
-
-const formatDate = date => {
-	const today = new Date();
-	if ( date.getFullYear() !== today.getFullYear() ) {
-		return date.toLocaleDateString( formatterOptions );
-	} else if ( date.getMonth() !== today.getMonth() ) {
-		return date.toLocaleDateString( formatterOptions );
-	} else if ( date.getDate() < today.getDate() - 1 ) {
-		return date.toLocaleDateString( formatterOptions );
-	} else if ( date.getDate() === today.getDate() - 1 ) {
-		return 'Yesterday';
-	}
-	return 'Today';
-};
-
-const StyledListItem = props => (
-	<Box
-		as="li"
-		sx={ {
-			py: 2,
-			borderBottom: '1px solid',
-			borderColor: 'borders.2',
-			listStyleType: 'none',
-			margin: 0,
-			px: 0,
-		} }
-		{ ...props }
-	/>
-);
-
-const ResourceList = ( { groupedByDay = false, items, renderItem, dateKey } ) => {
-	let groupedItems = {};
-	if ( groupedByDay ) {
-		groupedItems = items?.reduce( ( itemGroups, item ) => {
-			const formattedDate = formatDate( item[ dateKey ] );
-			const itemsAtDate = itemGroups[ formattedDate ];
-
-			return {
-				...itemGroups,
-				[ formattedDate ]: itemsAtDate ? [ ...itemsAtDate, item ] : [ item ],
-			};
-		}, {} );
-	}
-
-	const renderItemList = itemsList =>
-		itemsList.map( ( item, index ) => (
-			<StyledListItem key={ index }>{ renderItem( item ) }</StyledListItem>
-		) );
-
-	const renderGoupedItems = () =>
-		useMemo(
-			() =>
-				Object.keys( groupedItems ).map( ( groupName, index ) => (
-					<Box sx={ { mb: 4 } } key={ index } as="li">
-						<Heading variant="h4" as="h4" sx={ { mb: 3 } }>
-							{ groupName }
-						</Heading>
-						<Box
-							as="ul"
-							sx={ {
-								listStyleType: 'none',
-								m: 0,
-								p: 0,
-								borderTop: '1px solid',
-								borderColor: 'border',
-							} }
-						>
-							{ renderItemList( groupedItems[ groupName ] ) }
-						</Box>
-					</Box>
-				) ),
-			[ groupedItems ]
-		);
-
-	return (
-		<Box
-			as="ul"
-			sx={ { listStyleType: 'none', m: 0, p: 0 } }
-			className="vip-resource-list-component"
-		>
-			{ groupedByDay ? renderGoupedItems( groupedItems ) : renderItemList( items ) }
-		</Box>
-	);
-};
-
-ResourceList.propTypes = {
-	groupedByDay: PropTypes.bool,
-	items: PropTypes.array,
-	renderItem: PropTypes.func,
-	relativeTime: PropTypes.bool,
-	dateKey: PropTypes.string,
-};
-
-export { ResourceList };

package/src/system/ResourceList/ResourceList.stories.jsx

@@ -1,306 +0,0 @@
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-import React from 'react';
-import { BiGlobe, BiCheckCircle, BiRevision } from 'react-icons/bi';
-
-/**
- * Internal dependencies
- */
-import {
-	Avatar,
-	Badge,
-	Box,
-	Card,
-	Flex,
-	Button,
-	ResourceList,
-	ResourceItem,
-	Text,
-	Heading,
-} from '..';
-
-export default {
-	title: 'ResourceList',
-	component: ResourceList,
-};
-
-const logs = [
-	{
-		actor: 'Saxon Fletcher',
-		action: 'switched primary domain to',
-		object: 'mydomain.com',
-		date: new Date(),
-	},
-	{
-		actor: 'Saxon Fletcher',
-		action: 'switched primary domain to',
-		object: 'mydomain.com',
-		date: new Date( new Date().setHours( 11 ) ),
-	},
-	{
-		actor: 'Simon Wheatley',
-		action: 'deployed to',
-		object: 'Production',
-		showObject: true,
-		date: new Date( new Date().setDate( 15 ) ),
-	},
-	{
-		actor: 'Saxon Fletcher',
-		action: 'created a backup on',
-		object: 'Production',
-		date: new Date( new Date().setDate( 13 ) ),
-	},
-];
-
-export const Grouped = () => (
-	<Box sx={ { p: 5, pt: 2 } }>
-		<Heading sx={ { mb: 2 } }>Audit Log</Heading>
-		<Text sx={ { mb: 4 } }>A live trail of system and human events.</Text>
-		<ResourceList
-			items={ logs }
-			dateKey="date"
-			groupedByDay={ true }
-			renderItem={ item => (
-				<ResourceItem
-					item={ item }
-					icon={ <BiGlobe sx={ { color: 'red' } } /> }
-					dateKey={ 'date' }
-					relativeTime={ true }
-					timeOnly={ true }
-				>
-					<Flex sx={ { alignItems: 'center', gap: 3 } }>
-						<Avatar
-							name={ item.actor }
-							src="https://uifaces.co/our-content/donated/1H_7AxP0.jpg"
-							size={ 16 }
-						/>
-						<Heading variant="h4" as="p" sx={ { mb: 0, fontWeight: 'normal' } }>
-							{ item.actor }{ ' ' }
-							<Text as="span" sx={ { color: 'muted', mb: 0 } }>
-								{ item.action }
-							</Text>{ ' ' }
-							{ item.object }
-						</Heading>
-					</Flex>
-					{ item.showObject && (
-						<Box
-							variant="indent"
-							sx={ { mt: 2, display: 'flex', flexWrap: 'wrap', gap: 3, alignItems: 'center' } }
-						>
-							<Heading variant="h5" as="div" sx={ { mb: 0 } }>
-								Merge pull request{ ' ' }
-								<Text as="span" sx={ { color: 'muted' } }>
-									#443
-								</Text>
-							</Heading>
-							<Text
-								as="div"
-								sx={ { mb: 0, fontSize: 1, display: 'flex', alignItems: 'center', gap: 1 } }
-							>
-								<Avatar
-									name={ item.actor }
-									src="https://uifaces.co/our-content/donated/n4Ngwvi7.jpg"
-									size={ 16 }
-								/>
-								{ item.actor }
-							</Text>
-							<Text sx={ { mb: 0, fontSize: 1, display: 'flex', alignItems: 'center', gap: 1 } }>
-								<BiCheckCircle size={ 16 } />
-								Deployed in 31s
-							</Text>
-						</Box>
-					) }
-				</ResourceItem>
-			) }
-		/>
-	</Box>
-);
-
-const deploys = [
-	{
-		title: 'Merge pull request',
-		id: '#773',
-		author: 'Saxon Fletcher',
-		date: new Date( new Date().setHours( 11 ) ),
-		status: 'running',
-	},
-	{
-		title: 'Update homepage',
-		id: '#772',
-		author: 'Saxon Fletcher',
-		date: new Date( new Date().setHours( 9 ) ),
-	},
-	{
-		title: 'Improve overall performance',
-		id: '#771',
-		author: 'Saxon Fletcher',
-		date: new Date( new Date().setHours( 8 ) ),
-	},
-	{
-		title: 'Merge pull request',
-		id: '#770',
-		author: 'Saxon Fletcher',
-		date: new Date( new Date().setHours( 5 ) ),
-		status: 'failed',
-	},
-	{
-		title: 'Merge pull request',
-		id: '#773',
-		author: 'Saxon Fletcher',
-		date: new Date( new Date().setHours( 11 ) ),
-	},
-	{
-		title: 'Update homepage',
-		id: '#772',
-		author: 'Saxon Fletcher',
-		date: new Date( new Date().setHours( 9 ) ),
-	},
-	{
-		title: 'Improve overall performance',
-		id: '#771',
-		author: 'Saxon Fletcher',
-		date: new Date( new Date().setHours( 8 ) ),
-	},
-	{
-		title: 'Merge pull request',
-		id: '#770',
-		author: 'Saxon Fletcher',
-		date: new Date( new Date().setHours( 5 ) ),
-	},
-	{
-		title: 'Merge pull request',
-		id: '#773',
-		author: 'Saxon Fletcher',
-		date: new Date( new Date().setHours( 11 ) ),
-	},
-	{
-		title: 'Update homepage',
-		id: '#772',
-		author: 'Saxon Fletcher',
-		date: new Date( new Date().setHours( 9 ) ),
-	},
-	{
-		title: 'Improve overall performance',
-		id: '#771',
-		author: 'Saxon Fletcher',
-		date: new Date( new Date().setHours( 8 ) ),
-	},
-	{
-		title: 'Merge pull request',
-		id: '#770',
-		author: 'Saxon Fletcher',
-		date: new Date( new Date().setHours( 5 ) ),
-	},
-	{
-		title: 'Merge pull request',
-		id: '#773',
-		author: 'Saxon Fletcher',
-		date: new Date( new Date().setHours( 11 ) ),
-	},
-	{
-		title: 'Update homepage',
-		id: '#772',
-		author: 'Saxon Fletcher',
-		date: new Date( new Date().setHours( 9 ) ),
-	},
-	{
-		title: 'Improve overall performance',
-		id: '#771',
-		author: 'Saxon Fletcher',
-		date: new Date( new Date().setHours( 8 ) ),
-	},
-	{
-		title: 'Merge pull request',
-		id: '#770',
-		author: 'Saxon Fletcher',
-		date: new Date( new Date().setHours( 5 ) ),
-	},
-];
-
-export const Relative = () => (
-	<Box sx={ { p: 5, pt: 2 } }>
-		<Heading sx={ { mb: 2 } }>Deploys</Heading>
-		<Text sx={ { mb: 4 } }>View and manage application deployments.</Text>
-		<Card variant="indent" sx={ { mb: 4, display: 'flex', flexDirection: 'row-reverse', gap: 1 } }>
-			{ deploys.map( ( deploy, index ) => (
-				<Box
-					key={ index }
-					sx={ {
-						flex: '1 1 auto',
-						width: 10,
-						height: 4,
-						backgroundColor: deploy.status === 'running' ? 'blue.50' : 'green.50',
-						borderRadius: 1,
-					} }
-				></Box>
-			) ) }
-		</Card>
-		<ResourceList
-			items={ deploys }
-			dateKey="date"
-			groupedByDay={ false }
-			renderItem={ item => (
-				<ResourceItem
-					item={ item }
-					dateKey={ 'date' }
-					relativeTime={ true }
-					timeOnly={ true }
-					renderActions={ () => (
-						<Flex sx={ { alignItems: 'center' } }>
-							<Button variant="secondary" sx={ { fontSize: 1 } }>
-								Rollback
-							</Button>
-						</Flex>
-					) }
-				>
-					<Flex sx={ { alignItems: 'center', gap: 4 } }>
-						<Flex sx={ { alignItems: 'center', gap: 3, minWidth: 300 } }>
-							<Heading variant="h4" as="p" sx={ { mb: 0, fontWeight: 'normal' } }>
-								{ item.title }{ ' ' }
-								<Text as="span" sx={ { color: 'muted', mb: 0 } }>
-									{ item.id }
-								</Text>
-							</Heading>
-							{ item.status === 'running' && <Badge sx={ { mb: 0 } }>Running</Badge> }
-						</Flex>
-						<Text
-							as="div"
-							sx={ { mb: 0, color: 'muted', display: 'flex', alignItems: 'center', gap: 2 } }
-						>
-							<Avatar
-								name={ item.author }
-								size={ 16 }
-								src="https://randomuser.me/api/portraits/men/46.jpg"
-							/>
-							{ item.author }
-						</Text>
-						<Text
-							sx={ {
-								mb: 0,
-								color: item.status === 'running' ? 'blue.60' : 'muted',
-								display: 'flex',
-								alignItems: 'center',
-								gap: 1,
-							} }
-						>
-							{ item.status === 'running' ? (
-								<React.Fragment>
-									<BiRevision size={ 16 } />
-									Running for 31s
-								</React.Fragment>
-							) : (
-								<React.Fragment>
-									<BiCheckCircle size={ 16 } />
-									Deployed in 31s
-								</React.Fragment>
-							) }
-						</Text>
-					</Flex>
-				</ResourceItem>
-			) }
-		/>
-	</Box>
-);

package/src/system/ResourceList/index.js

@@ -1,7 +0,0 @@
-/**
- * Internal dependencies
- */
-import { ResourceList } from './ResourceList';
-import { ResourceItem } from './ResourceItem';
-
-export { ResourceList, ResourceItem };