@automattic/vip-design-system 0.8.1 → 0.9.0

package/build/system/ResourceList/ResourceItem.js

@@ -0,0 +1,89 @@
+"use strict";
+
+exports.__esModule = true;
+exports.ResourceItem = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var ResourceItem = function ResourceItem(_ref) {
+  var children = _ref.children,
+      item = _ref.item,
+      renderActions = _ref.renderActions,
+      _ref$relativeTime = _ref.relativeTime,
+      relativeTime = _ref$relativeTime === void 0 ? false : _ref$relativeTime,
+      _ref$timeOnly = _ref.timeOnly,
+      timeOnly = _ref$timeOnly === void 0 ? false : _ref$timeOnly,
+      dateKey = _ref.dateKey,
+      _ref$icon = _ref.icon,
+      icon = _ref$icon === void 0 ? null : _ref$icon;
+  return (0, _jsxRuntime.jsxs)(_.Flex, {
+    sx: {
+      alignItems: 'center',
+      gap: 3
+    },
+    children: [icon, (0, _jsxRuntime.jsx)(_.Box, {
+      sx: {
+        flex: '1 1 auto'
+      },
+      children: children
+    }), (0, _jsxRuntime.jsxs)(_.Flex, {
+      sx: {
+        flex: '0 0 auto',
+        alignItems: 'center',
+        gap: 3
+      },
+      children: [(0, _jsxRuntime.jsx)(_.Time, {
+        className: "time",
+        relativeTime: relativeTime,
+        timeOnly: timeOnly,
+        time: item[dateKey],
+        sx: {
+          color: 'muted',
+          mb: 0,
+          textAlign: 'right',
+          flex: '0 0 auto'
+        }
+      }), renderActions && (0, _jsxRuntime.jsxs)(_.Flex, {
+        className: "actions",
+        sx: {
+          alignItems: 'center',
+          gap: 3
+        },
+        children: [(0, _jsxRuntime.jsx)(_.Box, {
+          sx: {
+            width: 4,
+            height: 4,
+            borderRadius: 4,
+            bg: 'border'
+          }
+        }), renderActions(item)]
+      })]
+    })]
+  });
+};
+
+exports.ResourceItem = ResourceItem;
+ResourceItem.propTypes = {
+  children: _propTypes["default"].node,
+  item: _propTypes["default"].object,
+  icon: _propTypes["default"].node,
+  relativeTime: _propTypes["default"].bool,
+  timeOnly: _propTypes["default"].bool,
+  dateKey: _propTypes["default"].string,
+  renderActions: _propTypes["default"].func
+};

package/build/system/ResourceList/ResourceList.js

@@ -0,0 +1,121 @@
+"use strict";
+
+exports.__esModule = true;
+exports.ResourceList = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ = require("..");
+
+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 formatterOptions = {
+  weekday: 'long',
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric'
+};
+
+var formatDate = function formatDate(date) {
+  var 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';
+};
+
+var StyledListItem = function StyledListItem(props) {
+  return (0, _jsxRuntime.jsx)(_.Box, _extends({
+    as: "li",
+    sx: {
+      py: 2,
+      borderBottom: '1px solid',
+      borderColor: 'border',
+      listStyleType: 'none',
+      margin: 0,
+      px: 0
+    }
+  }, props));
+};
+
+var ResourceList = function ResourceList(_ref) {
+  var _ref$groupedByDay = _ref.groupedByDay,
+      groupedByDay = _ref$groupedByDay === void 0 ? false : _ref$groupedByDay,
+      items = _ref.items,
+      renderItem = _ref.renderItem,
+      dateKey = _ref.dateKey;
+  var groupedItems = {};
+
+  if (groupedByDay) {
+    groupedItems = items == null ? void 0 : items.reduce(function (itemGroups, item) {
+      var _extends2;
+
+      var formattedDate = formatDate(item[dateKey]);
+      var itemsAtDate = itemGroups[formattedDate];
+      return _extends({}, itemGroups, (_extends2 = {}, _extends2[formattedDate] = itemsAtDate ? [].concat(itemsAtDate, [item]) : [item], _extends2));
+    }, {});
+  }
+
+  var renderItemList = function renderItemList(itemsList) {
+    return itemsList.map(function (item, index) {
+      return (0, _jsxRuntime.jsx)(StyledListItem, {
+        children: renderItem(item)
+      }, index);
+    });
+  };
+
+  return (0, _jsxRuntime.jsx)(_.Box, {
+    as: "ul",
+    sx: {
+      listStyleType: 'none',
+      m: 0,
+      p: 0
+    },
+    children: groupedByDay ? Object.keys(groupedItems).map(function (groupName, index) {
+      return (0, _jsxRuntime.jsxs)(_.Box, {
+        sx: {
+          mb: 4
+        },
+        children: [(0, _jsxRuntime.jsx)(_.Heading, {
+          variant: "h4",
+          as: "h4",
+          sx: {
+            mb: 3
+          },
+          children: groupName
+        }), (0, _jsxRuntime.jsx)(_.Box, {
+          as: "ul",
+          sx: {
+            listStyleType: 'none',
+            m: 0,
+            p: 0,
+            borderTop: '1px solid',
+            borderColor: 'border'
+          },
+          children: renderItemList(groupedItems[groupName])
+        })]
+      }, index);
+    }) : renderItemList(items)
+  });
+};
+
+exports.ResourceList = ResourceList;
+ResourceList.propTypes = {
+  groupedByDay: _propTypes["default"].bool,
+  items: _propTypes["default"].array,
+  renderItem: _propTypes["default"].func,
+  relativeTime: _propTypes["default"].bool,
+  dateKey: _propTypes["default"].string
+};

package/build/system/ResourceList/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+exports.__esModule = true;
+
+var _ResourceList = require("./ResourceList");
+
+exports.ResourceList = _ResourceList.ResourceList;
+
+var _ResourceItem = require("./ResourceItem");
+
+exports.ResourceItem = _ResourceItem.ResourceItem;

package/build/system/Time/index.js

@@ -0,0 +1,91 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Time = void 0;
+
+var _themeUi = require("theme-ui");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+var _excluded = ["time", "relativeTime", "timeOnly"];
+
+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); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var formatter = new Intl.RelativeTimeFormat(undefined, {
+  numeric: 'auto'
+});
+var DIVISIONS = [{
+  amount: 60,
+  name: 'seconds'
+}, {
+  amount: 60,
+  name: 'minutes'
+}, {
+  amount: 24,
+  name: 'hours'
+}, {
+  amount: 7,
+  name: 'days'
+}, {
+  amount: 12,
+  name: 'months'
+}, {
+  amount: Number.POSITIVE_INFINITY,
+  name: 'years'
+}];
+
+function formatTimeAgo(date) {
+  var duration = (date - new Date()) / 1000;
+
+  for (var i = 0; i <= DIVISIONS.length; i++) {
+    var division = DIVISIONS[i];
+
+    if (Math.abs(duration) < division.amount) {
+      return formatter.format(Math.round(duration), division.name);
+    }
+
+    duration /= division.amount;
+  }
+}
+
+var Time = function Time(_ref) {
+  var time = _ref.time,
+      _ref$relativeTime = _ref.relativeTime,
+      relativeTime = _ref$relativeTime === void 0 ? false : _ref$relativeTime,
+      _ref$timeOnly = _ref.timeOnly,
+      timeOnly = _ref$timeOnly === void 0 ? false : _ref$timeOnly,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var formattedTime;
+
+  if (relativeTime) {
+    formattedTime = formatTimeAgo(time);
+  } else if (timeOnly) {
+    formattedTime = time.toLocaleTimeString();
+  } else {
+    formattedTime = time.toLocaleString();
+  }
+
+  return (0, _jsxRuntime.jsx)(_themeUi.Text, _extends({
+    title: time.toLocaleString('sv', {
+      timeZoneName: 'short'
+    }),
+    datetime: time,
+    as: "time"
+  }, props, {
+    children: formattedTime
+  }));
+};
+
+exports.Time = Time;
+Time.propTypes = {
+  time: _propTypes["default"].string,
+  timeOnly: _propTypes["default"].bool,
+  relativeTime: _propTypes["default"].bool
+};

package/build/system/Tooltip/Tooltip.js

@@ -92,8 +92,9 @@ var Tooltip = function Tooltip(_ref) {
 
 exports.Tooltip = Tooltip;
 Tooltip.propTypes = {
-  trigger: _propTypes["default"].string,
-  width: _propTypes["default"].number,
+  children: _propTypes["default"].object,
   text: _propTypes["default"].string,
-  children: _propTypes["default"].object
+  tooltipProps: _propTypes["default"].object,
+  trigger: _propTypes["default"].string,
+  width: _propTypes["default"].number
 };

package/build/system/index.js

@@ -86,13 +86,18 @@ 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;
 
-var _Timeline = require("./Timeline");
+var _Time = require("./Time");
 
-exports.Timeline = _Timeline.Timeline;
+exports.Time = _Time.Time;
 
 var _Notification = require("./Notification");
 

package/package.json

@@ -1,21 +1,26 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.8.1",
+	"version": "0.9.0",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",
 		"build": "cross-env NODE_ENV=production babel src --out-dir build",
-		"watch": "npm run build -- --watch",
-		"storybook": "start-storybook -p 6006"
+		"format": "eslint . --fix",
+		"jest": "NODE_ENV=test jest --detectOpenHandles",
+		"jest:watch": "npm run jest --watch",
+		"lint": "eslint . -f json | eslines --quiet",
+		"storybook": "start-storybook -p 6006",
+		"test": "npm run lint && npm run jest",
+		"watch": "npm run build -- --watch"
 	},
 	"dependencies": {
+		"@radix-ui/react-checkbox": "^0.1.0",
+		"@radix-ui/react-radio-group": "^0.1.0",
+		"@radix-ui/react-tooltip": "^0.1.0",
 		"babel-loader": "^8.2.2",
 		"framer-motion": "^3.9.1",
 		"react-icons": "^4.2.0",
-		"react-select": "^4.3.1",
-		"@radix-ui/react-checkbox": "^0.1.0",
-		"@radix-ui/react-radio-group": "^0.1.0",
-		"@radix-ui/react-tooltip": "^0.1.0"
+		"react-select": "^4.3.1"
 	},
 	"peerDependencies": {
 		"react": "*",
@@ -28,9 +33,27 @@
 		"**/react": "17.0.1",
 		"**/react-dom": "17.0.1"
 	},
+	"jest": {
+		"testURL": "http://localhost",
+		"setupFiles": [
+			"./test/setupTests.js"
+		],
+		"setupFilesAfterEnv": [
+			"./test/setupAfterEnv.js"
+		],
+		"transformIgnorePatterns": [
+			".*.stories.js$"
+		],
+		"transform": {
+			"\\.[jt]sx?$": "babel-jest"
+		}
+	},
 	"devDependencies": {
+		"immer": ">=9.0.6",
+		"@axe-core/react": "4.3.2",
 		"@babel/cli": "^7.14.3",
 		"@babel/core": "7.14.0",
+		"@babel/eslint-parser": "7.15.7",
 		"@babel/plugin-proposal-class-properties": "7.13.0",
 		"@babel/plugin-proposal-class-static-block": "^7.14.5",
 		"@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
@@ -44,11 +67,28 @@
 		"@storybook/addon-actions": "5.3.21",
 		"@storybook/addon-links": "5.3.21",
 		"@storybook/addons": "5.3.21",
+		"@storybook/node-logger": "^6.4.0",
 		"@storybook/preset-create-react-app": "^3.2.0",
 		"@storybook/react": "5.3.21",
+		"@testing-library/dom": "^8.11.1",
+		"@testing-library/jest-dom": "^5.15.0",
+		"@testing-library/react": "^12.1.2",
+		"babel-jest": "^27.3.1",
 		"cross-env": "^7.0.3",
+		"eslines": "2.1.0",
+		"eslint": "7.32.0",
+		"eslint-config-react-app": "6.0.0",
+		"eslint-config-wpvip": "automattic/eslint-config-wpvip#c6605d1c3a545d43ac2149cd464ec3c38ebc58d5",
+		"eslint-plugin-jest": "24.4.2",
+		"eslint-plugin-json": "3.1.0",
+		"eslint-plugin-jsx-a11y": "6.4.1",
+		"eslint-plugin-no-async-foreach": "0.1.1",
+		"eslint-plugin-react": "7.25.3",
+		"eslint-plugin-wpcalypso": "4.1.0",
+		"jest-axe": "5.0.1",
 		"optimize-css-assets-webpack-plugin": "^6.0.1",
 		"react-input-autosize": "^3.0.0",
+		"react-refresh": "^0.9.0",
 		"react-scripts": "^4.0.3"
 	}
 }

package/src/system/Avatar/Avatar.js

@@ -39,7 +39,7 @@ const Avatar = ( {
 		{ src ? (
 			<Image
 				src={ src }
-				alt={ name }
+				alt={ `Avatar image from ${ name }` }
 				sx={ {
 					borderRadius: 9999,
 					width: '100%',

package/src/system/Avatar/Avatar.stories.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * Internal dependencies
  */

package/src/system/Avatar/Avatar.test.js

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+/**
+ * Internal dependencies
+ */
+import { Avatar } from './Avatar';
+
+describe( '<Avatar />', () => {
+	it( 'renders the Avatar without an image', () => {
+		render( <Avatar name="John Doe" /> );
+
+		expect( screen.getByText( 'J' ) ).toBeInTheDocument();
+	} );
+
+	it( 'renders the Avatar with image', () => {
+		render( <Avatar name="John Doe" src="path/to/image" /> );
+
+		expect( screen.getByAltText( 'Avatar image from John Doe' ) ).toBeInTheDocument();
+	} );
+
+	it( 'should not have basic accessibility issues', async () => {
+		const { container } = render( <Avatar name="John Doe" src="path/to/image" /> );
+		const results = await axe( container );
+
+		expect( results ).toHaveNoViolations();
+	} );
+} );

package/src/system/Badge/Badge.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
- import { Text } from '../';
+import { Text } from '../';
 
 const Badge = ( { variant = 'blue', sx, ...props } ) => (
 	<Text

package/src/system/Badge/Badge.stories.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * Internal dependencies
  */

package/src/system/BlankState/BlankState.js

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
  */
 import { Box, Heading, Text } from '..';
 
-const BlankState = ({ image, icon, title, body, cta }) => {
+const BlankState = ( { image, icon, title, body, cta } ) => {
 	return (
 		<Box sx={{ textAlign: 'center', padding: 5 }}>
 			{icon ? icon : <img src={image} sx={{ mb: 3 }} alt="Icon representing the blank state" />}
@@ -22,7 +22,7 @@ const BlankState = ({ image, icon, title, body, cta }) => {
 };
 
 BlankState.propTypes = {
-	image: PropTypes.oneOfType([ PropTypes.object, PropTypes.string ]),
+	image: PropTypes.oneOfType( [ PropTypes.object, PropTypes.string ] ),
 	icon: PropTypes.node,
 	title: PropTypes.node,
 	body: PropTypes.node,

package/src/system/BlankState/BlankState.stories.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * Internal dependencies
  */

package/src/system/Box/Box.stories.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * Internal dependencies
  */

package/src/system/Button/Button.js

@@ -6,7 +6,7 @@
 import { Button as ThemeButton } from 'theme-ui';
 import PropTypes from 'prop-types';
 
-const Button = ({ sx, ...props }) => (
+const Button = ( { sx, ...props } ) => (
 	<ThemeButton
 		sx={{
 			verticalAlign: 'middle',

package/src/system/Card/Card.js

@@ -11,22 +11,24 @@ import PropTypes from 'prop-types';
  */
 import { Box } from '..';
 
-const Card = React.forwardRef(({ variant = 'primary', sx = {}, ...props }, ref) => (
+const CardComponent = ( { variant = 'primary', sx = {}, ...props }, ref ) => (
 	<Box
 		ref={ref}
 		sx={{
 			// pass variant prop to sx
-			variant: `cards.${variant}`,
+			variant: `cards.${ variant }`,
 			overflow: 'hidden',
 			...sx,
 		}}
 		{...props}
 	/>
-));
+);
 
-Card.propTypes = {
+CardComponent.propTypes = {
 	variant: PropTypes.string,
 	sx: PropTypes.object,
 };
 
+const Card = React.forwardRef( CardComponent );
+
 export { Card };

package/src/system/Card/Card.stories.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * Internal dependencies
  */

package/src/system/Code/Code.stories.js

@@ -17,6 +17,9 @@ export const Default = () => (
 	<React.Fragment>
 		<Code>Code</Code>
 		<Code showCopy={true}>Code with Icon</Code>
-		<Code showCopy={true} onCopy={ () => console.info('Hello world') }>Code with Icon and Click callback — console.info</Code>
+		<Code showCopy={true} onCopy={
+			// eslint-disable-next-line no-console
+			() => console.info( 'Hello world' )
+		}>Code with Icon and Click callback — console.info</Code>
 	</React.Fragment>
 );

package/src/system/ConfirmationDialog/ConfirmationDialog.stories.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * Internal dependencies
  */

package/src/system/Dialog/Dialog.stories.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * Internal dependencies
  */

package/src/system/Dialog/DialogButton.js

@@ -4,7 +4,6 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
-import React from 'react';
 import { MdExpandMore } from 'react-icons/md';
 
 /**

package/src/system/Dialog/DialogContent.js

@@ -39,7 +39,20 @@ const DialogContent = ( { position = 'left', variant = 'dropdown', onClose, ...p
 						right: 0,
 						bottom: 0,
 						opacity: 0.7,
-						background: 'linear-gradient(198.09deg, #E5F0F6 2.01%, rgba(235, 238, 242, 0) 43.18%, rgba(249, 234, 232, 0) 47.86%, #FFE9D1 94.31%), linear-gradient(98.65deg, #FFE8E6 0.58%, rgba(255, 233, 214, 0) 52.45%, rgba(255, 233, 219, 0) 53.76%, #FFE9D1 105.86%), #F5F2F1',
+						background: `linear-gradient(
+							198.09deg,
+							#E5F0F6 2.01%,
+							rgba(235, 238, 242, 0) 43.18%,
+							rgba(249, 234, 232, 0) 47.86%,
+							#FFE9D1 94.31%
+						),
+						linear-gradient(
+							98.65deg,
+							#FFE8E6 0.58%,
+							rgba(255, 233, 214, 0) 52.45%,
+							rgba(255, 233, 219, 0) 53.76%,
+							#FFE9D1 105.86%
+						), #F5F2F1`,
 					} }
 				/>
 			) }

package/src/system/Flex/Flex.stories.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * Internal dependencies
  */