@automattic/vip-design-system 0.7.1 → 0.9.1

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

@@ -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'
       },

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

package/build/system/Tooltip/Tooltip.js

@@ -7,19 +7,31 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _md = require("react-icons/md");
 
-var _react = require("react");
+var TTip = _interopRequireWildcard(require("@radix-ui/react-tooltip"));
 
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["trigger", "text", "width", "children"];
+var _excluded = ["trigger", "text", "width", "children", "tooltipProps"];
+
+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; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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; }
+
 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 StyledArrow = function StyledArrow(props) {
+  return (0, _jsxRuntime.jsx)(TTip.Arrow, _extends({
+    sx: {
+      fill: 'white'
+    }
+  }, props));
+};
 
 var Tooltip = function Tooltip(_ref) {
   var _ref$trigger = _ref.trigger,
@@ -29,28 +41,11 @@ var Tooltip = function Tooltip(_ref) {
       _ref$width = _ref.width,
       width = _ref$width === void 0 ? 200 : _ref$width,
       children = _ref.children,
+      tooltipProps = _ref.tooltipProps,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  var _useState = (0, _react.useState)({
-    left: 0,
-    top: '100%'
-  }),
-      position = _useState[0],
-      setPosition = _useState[1];
-
-  var contentRef = (0, _react.useCallback)(function (node) {
-    if (node !== null) {
-      var outerX = window.innerWidth;
-      var outerY = window.innerHeight;
-      var bounds = node.getBoundingClientRect();
-      console.log('bounds:', bounds);
-      setPosition({
-        left: bounds.x + bounds.width > outerX ? -bounds.width : 0,
-        top: bounds.y + bounds.height > outerY ? -bounds.height : '100%'
-      });
-    }
-  }, []);
-  return (0, _jsxRuntime.jsxs)(_.Box, {
+  return (0, _jsxRuntime.jsx)(TTip.Root, _extends({
+    skipDelayDuration: 700,
     sx: {
       display: 'inline-block',
       position: 'relative',
@@ -65,34 +60,41 @@ var Tooltip = function Tooltip(_ref) {
           visibility: 'visible'
         }
       }
-    },
-    children: [(0, _jsxRuntime.jsx)(_.Box, {
-      children: trigger
-    }), (0, _jsxRuntime.jsx)(_.Card, _extends({
-      ref: contentRef,
-      className: "tooltip-content",
+    }
+  }, tooltipProps, {
+    children: (0, _jsxRuntime.jsxs)(TTip.Trigger, {
       sx: {
-        position: 'absolute',
-        zIndex: 100,
-        left: position.left,
-        top: position.top,
-        width: width
-      }
-    }, props, {
-      children: children ? children : (0, _jsxRuntime.jsx)(_.Text, {
-        sx: {
-          fontSize: 1
-        },
-        children: text
-      })
-    }))]
-  });
+        background: 'transparent',
+        border: 'none',
+        display: 'inline-flex',
+        outline: 'none',
+        p: 0,
+        m: 0
+      },
+      children: [trigger, (0, _jsxRuntime.jsxs)(TTip.Content, {
+        children: [(0, _jsxRuntime.jsx)(_.Card, _extends({
+          className: "tooltip-content",
+          sx: {
+            width: width
+          }
+        }, props, {
+          children: children ? children : (0, _jsxRuntime.jsx)(_.Text, {
+            sx: {
+              fontSize: 1
+            },
+            children: text
+          })
+        })), (0, _jsxRuntime.jsx)(StyledArrow, {})]
+      })]
+    })
+  }));
 };
 
 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/Wizard/WizardStep.js

@@ -32,7 +32,7 @@ var WizardStep = function WizardStep(_ref) {
   var borderLeftColor = 'border';
 
   if (complete) {
-    borderLeftColor = 'green.60';
+    borderLeftColor = 'success';
   } else if (active) {
     borderLeftColor = 'primary';
   }
@@ -40,7 +40,7 @@ var WizardStep = function WizardStep(_ref) {
   var color = 'muted';
 
   if (complete) {
-    color = 'green.60';
+    color = 'success';
   } else if (active) {
     color = 'heading';
   }
@@ -84,8 +84,8 @@ var WizardStep = function WizardStep(_ref) {
 
 exports.WizardStep = WizardStep;
 WizardStep.propTypes = {
-  title: _propTypes["default"].string,
-  subTitle: _propTypes["default"].string,
+  title: _propTypes["default"].node,
+  subTitle: _propTypes["default"].node,
   complete: _propTypes["default"].bool,
   active: _propTypes["default"].bool,
   children: _propTypes["default"].node.isRequired

package/build/system/Wizard/WizardStepHorizontal.js

@@ -43,7 +43,7 @@ var WizardStepHorizontal = function WizardStepHorizontal(_ref) {
 
 exports.WizardStepHorizontal = WizardStepHorizontal;
 WizardStepHorizontal.propTypes = {
-  title: _propTypes["default"].string,
-  subTitle: _propTypes["default"].string,
+  title: _propTypes["default"].node,
+  subTitle: _propTypes["default"].node,
   active: _propTypes["default"].bool
 };

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");