@automattic/vip-design-system 0.7.0 → 0.9.0

package/build/system/Notice/Notice.js

@@ -7,9 +7,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _md = require("react-icons/md");
 
-var _themeUi = require("theme-ui");
-
-var _2 = require("../");
+var _ = require("../");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
@@ -21,97 +19,101 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 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 Notice = function Notice(_ref) {
-  var _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'warning' : _ref$variant,
-      _ref$inline = _ref.inline,
-      inline = _ref$inline === void 0 ? false : _ref$inline,
-      children = _ref.children,
-      title = _ref.title,
-      _ref$sx = _ref.sx,
-      sx = _ref$sx === void 0 ? {} : _ref$sx,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  var _useColorMode = (0, _themeUi.useColorMode)(),
-      colorMode = _useColorMode[0],
-      _ = _useColorMode[1];
-
-  var color = 'yellow';
+var NoticeIcon = function NoticeIcon(_ref) {
+  var color = _ref.color,
+      variant = _ref.variant;
   var Icon = _md.MdWarning;
 
   switch (variant) {
     case 'info':
-      color = 'blue';
       Icon = _md.MdInfo;
       break;
 
     case 'alert':
-      color = 'red';
       Icon = _md.MdError;
       break;
 
     case 'success':
-      color = 'green';
       Icon = _md.MdCheckCircle;
       break;
   }
 
-  var modeColor = {
-    color: color + ".70",
-    bg: inline ? 'transparent' : color + ".0"
-  };
+  return (0, _jsxRuntime.jsx)(Icon, {
+    sx: {
+      marginRight: 2,
+      color: color,
+      flex: '0 0 auto'
+    }
+  });
+};
+
+NoticeIcon.propTypes = {
+  color: _propTypes["default"].string,
+  variant: _propTypes["default"].string
+};
 
-  if (colorMode === 'dark') {
-    modeColor = {
-      color: color + ".40",
-      bg: undefined
-    };
-  }
+var Notice = function Notice(_ref2) {
+  var _ref2$variant = _ref2.variant,
+      variant = _ref2$variant === void 0 ? 'warning' : _ref2$variant,
+      _ref2$inline = _ref2.inline,
+      inline = _ref2$inline === void 0 ? false : _ref2$inline,
+      children = _ref2.children,
+      title = _ref2.title,
+      _ref2$sx = _ref2.sx,
+      sx = _ref2$sx === void 0 ? {} : _ref2$sx,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
 
-  var NoticeIcon = function NoticeIcon(_ref2) {
-    var color = _ref2.color;
-    return (0, _jsxRuntime.jsx)(Icon, {
-      sx: {
-        marginRight: 2,
-        color: color,
-        flex: '0 0 auto'
-      }
-    });
-  };
+  var color = 'yellow';
+
+  switch (variant) {
+    case 'info':
+      color = 'blue';
+      break;
+
+    case 'alert':
+      color = 'red';
+      break;
+
+    case 'success':
+      color = 'green';
+      break;
+  }
 
-  return (0, _jsxRuntime.jsx)(_2.Card, _extends({
+  return (0, _jsxRuntime.jsx)(_.Card, _extends({
     sx: _extends({
       boxShadow: 'none',
       borderRadius: 2,
+      bg: inline ? 'transparent' : color + ".10",
       p: inline ? 0 : 3,
-      bg: modeColor.bg,
+      color: color + ".90",
       a: {
-        color: modeColor.color,
+        color: color + ".90",
         textDecoration: 'underline',
         border: 'none'
       }
     }, sx)
   }, props, {
-    children: (0, _jsxRuntime.jsxs)(_2.Flex, {
+    children: (0, _jsxRuntime.jsxs)(_.Flex, {
       sx: {
         alignItems: 'center'
       },
-      children: [(0, _jsxRuntime.jsx)(_2.Flex, {
+      children: [(0, _jsxRuntime.jsx)(_.Flex, {
         sx: {
           alignItems: 'center'
         },
         children: (0, _jsxRuntime.jsx)(NoticeIcon, {
-          color: modeColor.color
+          color: color + ".100",
+          variant: variant
         })
-      }), (0, _jsxRuntime.jsxs)(_2.Box, {
+      }), (0, _jsxRuntime.jsxs)(_.Box, {
         sx: {
           ml: 23
         },
-        children: [title && (0, _jsxRuntime.jsx)(_2.Heading, {
+        children: [title && (0, _jsxRuntime.jsx)(_.Heading, {
           variant: "h4",
           as: "p",
           sx: {
-            color: modeColor.color,
+            color: color + ".100",
             mb: 0
           },
           children: title
@@ -123,8 +125,10 @@ var Notice = function Notice(_ref) {
 
 exports.Notice = Notice;
 Notice.propTypes = {
-  variant: _propTypes["default"].string,
-  title: _propTypes["default"].string,
+  children: _propTypes["default"].node,
+  color: _propTypes["default"].string,
   inline: _propTypes["default"].bool,
-  children: _propTypes["default"].node
+  sx: _propTypes["default"].object,
+  title: _propTypes["default"].node,
+  variant: _propTypes["default"].string
 };

package/build/system/Notification/Notification.js

@@ -51,12 +51,12 @@ var Notification = function Notification(_ref) {
       },
       children: [status === 'error' ? (0, _jsxRuntime.jsx)(_md.MdError, {
         sx: {
-          color: 'red.50',
+          color: 'error',
           flex: '0 0 auto'
         }
       }) : (0, _jsxRuntime.jsx)(_md.MdCheckCircle, {
         sx: {
-          color: 'green.50',
+          color: 'success',
           flex: '0 0 auto'
         }
       }), (0, _jsxRuntime.jsxs)(_.Box, {
@@ -84,8 +84,8 @@ var Notification = function Notification(_ref) {
 
 exports.Notification = Notification;
 Notification.propTypes = {
-  title: _propTypes["default"].string,
-  body: _propTypes["default"].string,
+  title: _propTypes["default"].node,
+  body: _propTypes["default"].node,
   status: _propTypes["default"].string,
   onClose: _propTypes["default"].func
 };

package/build/system/OptionRow/OptionRow.js

@@ -42,7 +42,8 @@ var OptionRow = function OptionRow(_ref) {
     border: '1px solid',
     borderColor: 'border',
     background: 'none',
-    boxShadow: 'none'
+    boxShadow: 'none',
+    color: 'grey.70'
   } : {};
   var inlineStyles = inline ? {
     py: 2,
@@ -69,22 +70,22 @@ var OptionRow = function OptionRow(_ref) {
       }
     }, inlineStyles),
     children: [(0, _jsxRuntime.jsx)(_.Box, {
-      children: image ? (0, _jsxRuntime.jsx)(_.Card, {
+      children: image ? (0, _jsxRuntime.jsx)(_.Box, {
         sx: _extends({
           display: ['inline-block', 'inline-block', 'block'],
-          p: small ? 3 : 24,
-          boxShadow: 'low',
+          p: small ? 12 : 20,
           flex: '0 0 auto',
-          svg: {
-            display: 'block'
-          }
+          bg: 'brand.70',
+          color: 'brand.10',
+          borderRadius: 1
         }, mergedCard),
         children: /*#__PURE__*/_react["default"].isValidElement(image) ? image : (0, _jsxRuntime.jsx)("img", {
           src: image,
           width: small ? 32 : 48,
           sx: {
             display: 'block'
-          }
+          },
+          alt: "Image representing the list item"
         })
       }) : icon && icon
     }), (0, _jsxRuntime.jsxs)(_.Box, {
@@ -124,13 +125,13 @@ var OptionRow = function OptionRow(_ref) {
 
 exports.OptionRow = OptionRow;
 OptionRow.propTypes = {
-  image: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
+  image: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].string]),
   icon: _propTypes["default"].node,
   badge: _propTypes["default"].string,
   label: _propTypes["default"].node,
   inline: _propTypes["default"].bool,
-  subTitle: _propTypes["default"].string,
-  body: _propTypes["default"].string,
+  subTitle: _propTypes["default"].node,
+  body: _propTypes["default"].node,
   meta: _propTypes["default"].node,
   to: _propTypes["default"].string,
   small: _propTypes["default"].bool,

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/Table/TableRow.js

@@ -81,7 +81,7 @@ var TableCell = function TableCell(_ref2) {
       fontWeight: 'body',
       borderTop: head ? '1px solid' : 'none',
       borderColor: 'border',
-      '&:first-child': {
+      '&:first-of-type': {
         pl: 5
       }
     },
@@ -99,7 +99,7 @@ var TableCell = function TableCell(_ref2) {
 TableCell.propTypes = {
   head: _propTypes["default"].bool,
   isRowHead: _propTypes["default"].bool,
-  cell: _propTypes["default"].array
+  cell: _propTypes["default"].node
 };
 TableRow.propTypes = {
   onClick: _propTypes["default"].func,

package/build/system/Tabs/TabItem.js

@@ -39,9 +39,9 @@ var TabItem = function TabItem(_ref) {
       borderTop: 'none',
       borderLeft: 'none',
       borderRight: 'none',
-      borderBottom: '2px solid',
+      borderBottom: '1px solid',
       borderColor: active ? 'link' : 'transparent',
-      transform: 'translateY(2px)',
+      transform: 'translateY(1px)',
       '&:visited': {
         color: active ? 'heading' : 'muted'
       },
@@ -56,6 +56,6 @@ var TabItem = function TabItem(_ref) {
 exports.TabItem = TabItem;
 TabItem.propTypes = {
   active: _propTypes["default"].bool,
-  sx: _propTypes["default"].sx,
+  sx: _propTypes["default"].object,
   variant: _propTypes["default"].string
 };

package/build/system/Tabs/Tabs.js

@@ -23,7 +23,7 @@ var Tabs = function Tabs(_ref) {
 
   return (0, _jsxRuntime.jsx)(_.Flex, _extends({
     sx: _extends({
-      borderBottom: '2px solid',
+      borderBottom: '1px solid',
       borderColor: 'border',
       listStyleType: 'none',
       margin: 0,

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
+};