@automattic/vip-design-system 0.26.7 → 0.27.1

package/.storybook/decorators/withColorMode.jsx

@@ -21,7 +21,7 @@ export const backgrounds = {
 };
 
 function ThemeChanger( { background } ) {
-	const [ colorMode, setColorMode ] = useColorMode();
+	const [ _, setColorMode ] = useColorMode();
 	const newColorMode = darkBackground === background ? 'dark' : 'default';
 
 	useEffect( () => {

package/build/system/Form/Label.js

@@ -7,33 +7,37 @@ exports.Label = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _react = _interopRequireDefault(require("react"));
 
-var _ = require("..");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
+var _excluded = ["sx"];
 
 /**
  * Internal dependencies
  */
-var Label = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
-  return (0, _jsxRuntime.jsx)(_.Heading, (0, _extends2["default"])({
-    variant: "h4",
-    as: "label",
-    sx: {
+var Label = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
+  var sx = _ref.sx,
+      rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)("label", (0, _extends2["default"])({
+    sx: (0, _extends2["default"])({
+      fontWeight: 500,
+      fontSize: 2,
+      lineHeight: 1.5,
       display: 'block',
       mb: 2,
       color: 'muted'
-    },
+    }, sx),
     ref: forwardRef
-  }, props));
+  }, rest));
 });
 
 exports.Label = Label;
+Label.propTypes = {
+  sx: _propTypes["default"].object
+};
 Label.displayName = 'Label';

package/build/system/Form/Radio.js

@@ -5,34 +5,170 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.Radio = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _react = _interopRequireDefault(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _themeUi = require("theme-ui");
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Label = require("./Label");
+
+var _ScreenReaderText = require("../ScreenReaderText/ScreenReaderText");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["disabled"];
+var _excluded = ["disabled", "defaultValue", "onChange", "name", "options", "className"],
+    _excluded2 = ["id", "className", "value", "label", "labelProps"];
 
-var Radio = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
-  var disabled = _ref.disabled,
-      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
-  return (0, _jsxRuntime.jsx)(_themeUi.Radio, (0, _extends2["default"])({
-    sx: {
-      opacity: disabled ? 0.4 : 1
+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 inputStyle = (0, _extends2["default"])({}, _ScreenReaderText.screenReaderTextClass, {
+  width: '16px',
+  height: '16px',
+  '&:focus ~ label:before': function focusLabelBefore(theme) {
+    return (0, _extends2["default"])({}, theme.outline, {
+      content: '""',
+      border: '2px solid',
+      borderColor: 'border',
+      zIndex: 3,
+      left: -1 * (theme.space[4] - theme.space[2]) + "px"
+    });
+  },
+  '&:checked ~ label::after': {
+    opacity: 1,
+    transform: 'scale(1)'
+  }
+});
+var labelStyle = {
+  cursor: 'pointer',
+  position: 'relative',
+  marginLeft: function marginLeft(theme) {
+    return theme.space[4] - theme.space[2] + "px";
+  },
+  marginBottom: 0,
+  userSelect: 'none',
+  color: 'heading',
+  lineHeight: 1.5,
+  '&:before, &:after': {
+    borderRadius: '50%',
+    position: 'absolute',
+    top: 0,
+    left: function left(theme) {
+      return -1 * (theme.space[4] - theme.space[2]) + "px";
     },
-    disabled: disabled,
+    transition: 'all .3s ease-out',
+    zIndex: 2,
+    width: '16px',
+    height: '16px'
+  },
+  '&::before': {
+    content: '""',
+    border: '2px solid',
+    borderColor: 'border'
+  },
+  '&::after': {
+    content: '""',
+    backgroundColor: 'primary',
+    backgroundPosition: 'left 2px top 2px',
+    backgroundSize: '70%',
+    backgroundRepeat: 'no-repeat',
+    backgroundImage: "url(\n\t\t\t\t\t'data:image/svg+xml;utf8,<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.4999 4.9995L5.7254 12.4008L2.5 9.33023L3.83307 7.92994L5.7254 9.73144L12.1668 3.59921L13.4999 4.9995Z\" fill=\"white\"/></svg>')",
+    border: '2px solid',
+    borderColor: 'border',
+    color: 'white',
+    transform: 'scale(0)',
+    opacity: 0
+  }
+};
+
+var CustomLabel = function CustomLabel(_ref) {
+  var children = _ref.children;
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/_react["default"].cloneElement(_react["default"].Children.only(children), (0, _extends2["default"])({}, children.props, {
+      sx: (0, _extends2["default"])({}, labelStyle, children.props.sx),
+      className: children.props.className + " vip-radio-component-item-label"
+    }))
+  });
+};
+
+CustomLabel.propTypes = {
+  children: _propTypes["default"].any
+};
+
+var Radio = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardRef) {
+  var disabled = _ref2.disabled,
+      defaultValue = _ref2.defaultValue,
+      onChange = _ref2.onChange,
+      _ref2$name = _ref2.name,
+      name = _ref2$name === void 0 ? '' : _ref2$name,
+      _ref2$options = _ref2.options,
+      options = _ref2$options === void 0 ? [] : _ref2$options,
+      className = _ref2.className,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded);
+  var onChangeHandler = (0, _react.useCallback)(function (e) {
+    var optionTriggered = options.find(function (option) {
+      return "" + option.value === "" + e.target.value;
+    });
+    onChange(e, optionTriggered);
+  }, []);
+  var renderedOptions = options.map(function (_ref3) {
+    var id = _ref3.id,
+        optionClassName = _ref3.className,
+        value = _ref3.value,
+        label = _ref3.label,
+        _ref3$labelProps = _ref3.labelProps,
+        labelProps = _ref3$labelProps === void 0 ? {} : _ref3$labelProps,
+        restOption = (0, _objectWithoutPropertiesLoose2["default"])(_ref3, _excluded2);
+    return (0, _jsxRuntime.jsxs)("div", {
+      sx: {
+        display: 'flex',
+        alignItems: 'center',
+        minHeight: function minHeight(theme) {
+          return theme.space[4] - theme.space[2] + "px";
+        }
+      },
+      className: (0, _classnames["default"])('vip-radio-component-item', "vip-radio-component-item-" + id),
+      children: [(0, _jsxRuntime.jsx)("input", (0, _extends2["default"])({
+        type: "radio",
+        id: id,
+        name: name,
+        value: "" + value,
+        sx: inputStyle,
+        onChange: onChangeHandler,
+        className: (0, _classnames["default"])('vip-radio-component-item-input', optionClassName),
+        checked: "" + value === "" + defaultValue
+      }, restOption)), typeof label === 'string' ? (0, _jsxRuntime.jsx)(_Label.Label, (0, _extends2["default"])({
+        className: (0, _classnames["default"])('vip-radio-component-item-label', optionClassName),
+        htmlFor: id,
+        sx: labelStyle
+      }, labelProps, {
+        children: label
+      })) : (0, _jsxRuntime.jsx)(CustomLabel, (0, _extends2["default"])({}, labelProps, {
+        children: label
+      }))]
+    }, id);
+  });
+  return (0, _jsxRuntime.jsx)("div", (0, _extends2["default"])({
+    className: (0, _classnames["default"])('vip-radio-component', "vip-radio-component-" + name, className),
     ref: forwardRef
-  }, props));
+  }, props, {
+    children: renderedOptions
+  }));
 });
 
 exports.Radio = Radio;
 Radio.displayName = 'Radio';
 Radio.propTypes = {
-  disabled: _propTypes["default"].bool
+  disabled: _propTypes["default"].bool,
+  defaultValue: _propTypes["default"].any,
+  onChange: _propTypes["default"].func,
+  options: _propTypes["default"].any,
+  name: _propTypes["default"].string,
+  className: _propTypes["default"].any
 };

package/build/system/Form/Radio.stories.js

@@ -5,16 +5,18 @@ exports["default"] = exports.Default = void 0;
 
 var _react = require("react");
 
-var _ = require("..");
+var _2 = require("..");
 
 var _Radio = require("./Radio");
 
-var _Label = require("./Label");
-
 var _Flex = require("../Flex");
 
+var _Label = require("./Label");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+/** @jsxImportSource theme-ui */
+
 /**
  * External dependencies
  */
@@ -33,7 +35,11 @@ var Default = function Default() {
       checked = _useState[0],
       setChecked = _useState[1];
 
-  return (0, _jsxRuntime.jsxs)(_.Form.Root, {
+  var _useState2 = (0, _react.useState)('b'),
+      checked2 = _useState2[0],
+      setChecked2 = _useState2[1];
+
+  return (0, _jsxRuntime.jsxs)(_2.Form.Root, {
     children: [(0, _jsxRuntime.jsxs)("p", {
       children: ["Per recommendation, if you have a Radio button, use a Fieldset with a legend as wrapper to your options.", ' ', (0, _jsxRuntime.jsx)("a", {
         href: "https://a11y-collective.github.io/demos/en/accessible-code/form-fieldsets.html",
@@ -47,47 +53,74 @@ var Default = function Default() {
           fontWeight: 'bold'
         },
         children: "Apply the policy to these domains"
-      }), (0, _jsxRuntime.jsxs)(_Flex.Flex, {
+      }), (0, _jsxRuntime.jsx)(_Flex.Flex, {
         sx: {
           alignItems: 'center'
         },
-        children: [(0, _jsxRuntime.jsx)(_Radio.Radio, {
-          name: "includeSubdomains",
-          id: "include-all-domains-opt",
-          onChange: function onChange() {
-            return setChecked('a');
-          },
-          value: 'a',
-          checked: checked === 'a'
-        }), (0, _jsxRuntime.jsx)(_Label.Label, {
-          htmlFor: "include-all-domains-opt",
-          sx: {
-            mb: 0
-          },
-          children: "All domains listed on this environment, and all subdomains"
-        })]
-      }), (0, _jsxRuntime.jsxs)(_Flex.Flex, {
+        children: (0, _jsxRuntime.jsx)(_Radio.Radio, {
+          name: "the_option",
+          defaultValue: checked,
+          options: [{
+            value: 'a',
+            label: 'All domains listed on this environment, and all subdomains',
+            id: 'option-a'
+          }, {
+            value: 'b',
+            label: 'All domains listed on this environment',
+            id: 'option-b'
+          }],
+          onChange: function onChange(e) {
+            return setChecked(e.target.value);
+          }
+        })
+      })]
+    }), (0, _jsxRuntime.jsxs)("fieldset", {
+      children: [(0, _jsxRuntime.jsx)("legend", {
         sx: {
-          alignItems: 'center',
-          mb: 1
+          mb: 0,
+          fontSize: 2,
+          fontWeight: 'bold'
+        },
+        children: "With a custom Label"
+      }), (0, _jsxRuntime.jsx)(_Flex.Flex, {
+        sx: {
+          alignItems: 'center'
         },
-        children: [(0, _jsxRuntime.jsx)(_Radio.Radio, {
-          name: "includeSubdomains",
-          id: "include-subdomains-opt",
-          onChange: function onChange() {
-            return setChecked('b');
-          },
-          checked: checked === 'b',
-          value: 'b'
-        }), (0, _jsxRuntime.jsx)(_Label.Label, {
-          id: "exclude-subdomains",
-          htmlFor: "include-subdomains-opt",
-          sx: {
-            mb: 0
-          },
-          children: "All domains listed on this environment"
-        })]
+        children: (0, _jsxRuntime.jsx)(_Radio.Radio, {
+          name: "the_option_custom",
+          defaultValue: checked2,
+          options: [{
+            value: 'a',
+            label: (0, _jsxRuntime.jsx)(_Label.Label, {
+              htmlFor: "option-custom-a",
+              className: "custom-class",
+              sx: {
+                color: 'error'
+              },
+              children: "(Custom) All domains listed on this environment, and all subdomains"
+            }),
+            id: 'option-custom-a'
+          }, {
+            value: 'b',
+            label: 'All domains listed on this environment',
+            labelProps: {
+              id: 'label-option-custom-b-custom-props'
+            },
+            className: 'custom-class-for-this',
+            'aria-describedby': 'describe-radio-all-domains-subdomains',
+            id: 'option-custom-b'
+          }],
+          onChange: function onChange(_, option) {
+            return setChecked2(option.value);
+          }
+        })
       })]
+    }), (0, _jsxRuntime.jsx)("p", {
+      id: "describe-radio-all-domains-subdomains",
+      sx: {
+        mt: 2
+      },
+      children: "This is a explanation for custom option b"
     })]
   });
 };

package/build/system/ResourceList/ResourceItem.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.ResourceItem = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/** @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,140 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.ResourceList = void 0;
+
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = require("react");
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+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, (0, _extends3["default"])({
+    as: "li",
+    sx: {
+      py: 2,
+      borderBottom: '1px solid',
+      borderColor: 'borders.2',
+      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 (0, _extends3["default"])({}, 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);
+    });
+  };
+
+  var renderGoupedItems = function renderGoupedItems() {
+    return (0, _react.useMemo)(function () {
+      return Object.keys(groupedItems).map(function (groupName, index) {
+        return (0, _jsxRuntime.jsxs)(_.Box, {
+          sx: {
+            mb: 4
+          },
+          as: "li",
+          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);
+      });
+    }, [groupedItems]);
+  };
+
+  return (0, _jsxRuntime.jsx)(_.Box, {
+    as: "ul",
+    sx: {
+      listStyleType: 'none',
+      m: 0,
+      p: 0
+    },
+    className: "vip-resource-list-component",
+    children: groupedByDay ? renderGoupedItems(groupedItems) : 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/ResourceList.stories.js

@@ -0,0 +1,379 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = exports.Relative = exports.Grouped = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+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: 'ResourceList',
+  component: _.ResourceList
+};
+exports["default"] = _default;
+var 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))
+}];
+
+var Grouped = function Grouped() {
+  return (0, _jsxRuntime.jsxs)(_.Box, {
+    sx: {
+      p: 5,
+      pt: 2
+    },
+    children: [(0, _jsxRuntime.jsx)(_.Heading, {
+      sx: {
+        mb: 2
+      },
+      children: "Audit Log"
+    }), (0, _jsxRuntime.jsx)(_.Text, {
+      sx: {
+        mb: 4
+      },
+      children: "A live trail of system and human events."
+    }), (0, _jsxRuntime.jsx)(_.ResourceList, {
+      items: logs,
+      dateKey: "date",
+      groupedByDay: true,
+      renderItem: function renderItem(item) {
+        return (0, _jsxRuntime.jsxs)(_.ResourceItem, {
+          item: item,
+          icon: (0, _jsxRuntime.jsx)(_bi.BiGlobe, {
+            sx: {
+              color: 'red'
+            }
+          }),
+          dateKey: 'date',
+          relativeTime: true,
+          timeOnly: true,
+          children: [(0, _jsxRuntime.jsxs)(_.Flex, {
+            sx: {
+              alignItems: 'center',
+              gap: 3
+            },
+            children: [(0, _jsxRuntime.jsx)(_.Avatar, {
+              name: item.actor,
+              src: "https://uifaces.co/our-content/donated/1H_7AxP0.jpg",
+              size: 16
+            }), (0, _jsxRuntime.jsxs)(_.Heading, {
+              variant: "h4",
+              as: "p",
+              sx: {
+                mb: 0,
+                fontWeight: 'normal'
+              },
+              children: [item.actor, ' ', (0, _jsxRuntime.jsx)(_.Text, {
+                as: "span",
+                sx: {
+                  color: 'muted',
+                  mb: 0
+                },
+                children: item.action
+              }), ' ', item.object]
+            })]
+          }), item.showObject && (0, _jsxRuntime.jsxs)(_.Box, {
+            variant: "indent",
+            sx: {
+              mt: 2,
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: 3,
+              alignItems: 'center'
+            },
+            children: [(0, _jsxRuntime.jsxs)(_.Heading, {
+              variant: "h5",
+              as: "div",
+              sx: {
+                mb: 0
+              },
+              children: ["Merge pull request", ' ', (0, _jsxRuntime.jsx)(_.Text, {
+                as: "span",
+                sx: {
+                  color: 'muted'
+                },
+                children: "#443"
+              })]
+            }), (0, _jsxRuntime.jsxs)(_.Text, {
+              as: "div",
+              sx: {
+                mb: 0,
+                fontSize: 1,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1
+              },
+              children: [(0, _jsxRuntime.jsx)(_.Avatar, {
+                name: item.actor,
+                src: "https://uifaces.co/our-content/donated/n4Ngwvi7.jpg",
+                size: 16
+              }), item.actor]
+            }), (0, _jsxRuntime.jsxs)(_.Text, {
+              sx: {
+                mb: 0,
+                fontSize: 1,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1
+              },
+              children: [(0, _jsxRuntime.jsx)(_bi.BiCheckCircle, {
+                size: 16
+              }), "Deployed in 31s"]
+            })]
+          })]
+        });
+      }
+    })]
+  });
+};
+
+exports.Grouped = Grouped;
+var 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))
+}];
+
+var Relative = function Relative() {
+  return (0, _jsxRuntime.jsxs)(_.Box, {
+    sx: {
+      p: 5,
+      pt: 2
+    },
+    children: [(0, _jsxRuntime.jsx)(_.Heading, {
+      sx: {
+        mb: 2
+      },
+      children: "Deploys"
+    }), (0, _jsxRuntime.jsx)(_.Text, {
+      sx: {
+        mb: 4
+      },
+      children: "View and manage application deployments."
+    }), (0, _jsxRuntime.jsx)(_.Card, {
+      variant: "indent",
+      sx: {
+        mb: 4,
+        display: 'flex',
+        flexDirection: 'row-reverse',
+        gap: 1
+      },
+      children: deploys.map(function (deploy, index) {
+        return (0, _jsxRuntime.jsx)(_.Box, {
+          sx: {
+            flex: '1 1 auto',
+            width: 10,
+            height: 4,
+            backgroundColor: deploy.status === 'running' ? 'blue.50' : 'green.50',
+            borderRadius: 1
+          }
+        }, index);
+      })
+    }), (0, _jsxRuntime.jsx)(_.ResourceList, {
+      items: deploys,
+      dateKey: "date",
+      groupedByDay: false,
+      renderItem: function renderItem(item) {
+        return (0, _jsxRuntime.jsx)(_.ResourceItem, {
+          item: item,
+          dateKey: 'date',
+          relativeTime: true,
+          timeOnly: true,
+          renderActions: function renderActions() {
+            return (0, _jsxRuntime.jsx)(_.Flex, {
+              sx: {
+                alignItems: 'center'
+              },
+              children: (0, _jsxRuntime.jsx)(_.Button, {
+                variant: "secondary",
+                sx: {
+                  fontSize: 1
+                },
+                children: "Rollback"
+              })
+            });
+          },
+          children: (0, _jsxRuntime.jsxs)(_.Flex, {
+            sx: {
+              alignItems: 'center',
+              gap: 4
+            },
+            children: [(0, _jsxRuntime.jsxs)(_.Flex, {
+              sx: {
+                alignItems: 'center',
+                gap: 3,
+                minWidth: 300
+              },
+              children: [(0, _jsxRuntime.jsxs)(_.Heading, {
+                variant: "h4",
+                as: "p",
+                sx: {
+                  mb: 0,
+                  fontWeight: 'normal'
+                },
+                children: [item.title, ' ', (0, _jsxRuntime.jsx)(_.Text, {
+                  as: "span",
+                  sx: {
+                    color: 'muted',
+                    mb: 0
+                  },
+                  children: item.id
+                })]
+              }), item.status === 'running' && (0, _jsxRuntime.jsx)(_.Badge, {
+                sx: {
+                  mb: 0
+                },
+                children: "Running"
+              })]
+            }), (0, _jsxRuntime.jsxs)(_.Text, {
+              as: "div",
+              sx: {
+                mb: 0,
+                color: 'muted',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 2
+              },
+              children: [(0, _jsxRuntime.jsx)(_.Avatar, {
+                name: item.author,
+                size: 16,
+                src: "https://randomuser.me/api/portraits/men/46.jpg"
+              }), item.author]
+            }), (0, _jsxRuntime.jsx)(_.Text, {
+              sx: {
+                mb: 0,
+                color: item.status === 'running' ? 'blue.60' : 'muted',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1
+              },
+              children: item.status === 'running' ? (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
+                children: [(0, _jsxRuntime.jsx)(_bi.BiRevision, {
+                  size: 16
+                }), "Running for 31s"]
+              }) : (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
+                children: [(0, _jsxRuntime.jsx)(_bi.BiCheckCircle, {
+                  size: 16
+                }), "Deployed in 31s"]
+              })
+            })]
+          })
+        });
+      }
+    })]
+  });
+};
+
+exports.Relative = Relative;

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.26.7",
+	"version": "0.27.1",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",

package/src/system/Form/Label.js

@@ -4,22 +4,32 @@
  * External dependencies
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 
 /**
  * Internal dependencies
  */
-import { Heading } from '..';
 
-const Label = React.forwardRef( ( props, forwardRef ) => (
-	<Heading
-		variant="h4"
-		as="label"
-		sx={ { display: 'block', mb: 2, color: 'muted' } }
+const Label = React.forwardRef( ( { sx, ...rest }, forwardRef ) => (
+	<label
+		sx={ {
+			fontWeight: 500,
+			fontSize: 2,
+			lineHeight: 1.5,
+			display: 'block',
+			mb: 2,
+			color: 'muted',
+			...sx,
+		} }
 		ref={ forwardRef }
-		{ ...props }
+		{ ...rest }
 	/>
 ) );
 
+Label.propTypes = {
+	sx: PropTypes.object,
+};
+
 Label.displayName = 'Label';
 
 export { Label };

package/src/system/Form/Radio.js

@@ -1,25 +1,165 @@
+/* eslint-disable max-len */
 /** @jsxImportSource theme-ui */
 
 /**
  * External dependencies
  */
-import React from 'react';
-import { Radio as ThemeRadio } from 'theme-ui';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Label } from './Label';
+import { screenReaderTextClass } from '../ScreenReaderText/ScreenReaderText';
 
-const Radio = React.forwardRef( ( { disabled, ...props }, forwardRef ) => (
-	<ThemeRadio
-		sx={ { opacity: disabled ? 0.4 : 1 } }
-		disabled={ disabled }
-		ref={ forwardRef }
-		{ ...props }
-	/>
-) );
+const inputStyle = {
+	...screenReaderTextClass,
+	width: '16px',
+	height: '16px',
+	'&:focus ~ label:before': theme => ( {
+		...theme.outline,
+		content: '""',
+		border: '2px solid',
+		borderColor: 'border',
+		zIndex: 3,
+		left: `${ -1 * ( theme.space[ 4 ] - theme.space[ 2 ] ) }px`,
+	} ),
+	'&:checked ~ label::after': {
+		opacity: 1,
+		transform: 'scale(1)',
+	},
+};
+
+const labelStyle = {
+	cursor: 'pointer',
+	position: 'relative',
+	marginLeft: theme => `${ theme.space[ 4 ] - theme.space[ 2 ] }px`,
+	marginBottom: 0,
+	userSelect: 'none',
+	color: 'heading',
+	lineHeight: 1.5,
+	'&:before, &:after': {
+		borderRadius: '50%',
+		position: 'absolute',
+		top: 0,
+		left: theme => `${ -1 * ( theme.space[ 4 ] - theme.space[ 2 ] ) }px`,
+		transition: 'all .3s ease-out',
+		zIndex: 2,
+		width: '16px',
+		height: '16px',
+	},
+	'&::before': {
+		content: '""',
+		border: '2px solid',
+		borderColor: 'border',
+	},
+	'&::after': {
+		content: '""',
+		backgroundColor: 'primary',
+		backgroundPosition: 'left 2px top 2px',
+		backgroundSize: '70%',
+		backgroundRepeat: 'no-repeat',
+
+		backgroundImage: `url(
+					'data:image/svg+xml;utf8,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.4999 4.9995L5.7254 12.4008L2.5 9.33023L3.83307 7.92994L5.7254 9.73144L12.1668 3.59921L13.4999 4.9995Z" fill="white"/></svg>')`,
+		border: '2px solid',
+		borderColor: 'border',
+		color: 'white',
+		transform: 'scale(0)',
+		opacity: 0,
+	},
+};
+
+const CustomLabel = ( { children } ) => {
+	return (
+		<>
+			{ React.cloneElement( React.Children.only( children ), {
+				...children.props,
+				sx: { ...labelStyle, ...children.props.sx },
+				className: `${ children.props.className } vip-radio-component-item-label`,
+			} ) }
+		</>
+	);
+};
+
+CustomLabel.propTypes = {
+	children: PropTypes.any,
+};
+
+const Radio = React.forwardRef(
+	(
+		{ disabled, defaultValue, onChange, name = '', options = [], className, ...props },
+		forwardRef
+	) => {
+		const onChangeHandler = useCallback( e => {
+			const optionTriggered = options.find(
+				option => `${ option.value }` === `${ e.target.value }`
+			);
+			onChange( e, optionTriggered );
+		}, [] );
+
+		const renderedOptions = options.map(
+			( { id, className: optionClassName, value, label, labelProps = {}, ...restOption } ) => (
+				<div
+					sx={ {
+						display: 'flex',
+						alignItems: 'center',
+						minHeight: theme => `${ theme.space[ 4 ] - theme.space[ 2 ] }px`,
+					} }
+					key={ id }
+					className={ classNames( 'vip-radio-component-item', `vip-radio-component-item-${ id }` ) }
+				>
+					<input
+						type="radio"
+						id={ id }
+						name={ name }
+						value={ `${ value }` }
+						sx={ inputStyle }
+						onChange={ onChangeHandler }
+						className={ classNames( 'vip-radio-component-item-input', optionClassName ) }
+						checked={ `${ value }` === `${ defaultValue }` }
+						{ ...restOption }
+					/>
+
+					{ typeof label === 'string' ? (
+						<Label
+							className={ classNames( 'vip-radio-component-item-label', optionClassName ) }
+							htmlFor={ id }
+							sx={ labelStyle }
+							{ ...labelProps }
+						>
+							{ label }
+						</Label>
+					) : (
+						<CustomLabel { ...labelProps }>{ label }</CustomLabel>
+					) }
+				</div>
+			)
+		);
+
+		return (
+			<div
+				className={ classNames(
+					'vip-radio-component',
+					`vip-radio-component-${ name }`,
+					className
+				) }
+				ref={ forwardRef }
+				{ ...props }
+			>
+				{ renderedOptions }
+			</div>
+		);
+	}
+);
 
 Radio.displayName = 'Radio';
 
 Radio.propTypes = {
 	disabled: PropTypes.bool,
+	defaultValue: PropTypes.any,
+	onChange: PropTypes.func,
+	options: PropTypes.any,
+	name: PropTypes.string,
+	className: PropTypes.any,
 };
 
 export { Radio };

package/src/system/Form/Radio.stories.jsx

@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 /**
  * External dependencies
  */
@@ -8,8 +10,8 @@ import { useState } from 'react';
  */
 import { Form } from '..';
 import { Radio } from './Radio';
-import { Label } from './Label';
 import { Flex } from '../Flex';
+import { Label } from './Label';
 
 export default {
 	title: 'Form/Radio',
@@ -18,6 +20,7 @@ export default {
 
 export const Default = () => {
 	const [ checked, setChecked ] = useState( 'a' );
+	const [ checked2, setChecked2 ] = useState( 'b' );
 
 	return (
 		<Form.Root>
@@ -35,32 +38,61 @@ export const Default = () => {
 
 				<Flex sx={ { alignItems: 'center' } }>
 					<Radio
-						name="includeSubdomains"
-						id="include-all-domains-opt"
-						onChange={ () => setChecked( 'a' ) }
-						value={ 'a' }
-						checked={ checked === 'a' }
+						name="the_option"
+						defaultValue={ checked }
+						options={ [
+							{
+								value: 'a',
+								label: 'All domains listed on this environment, and all subdomains',
+								id: 'option-a',
+							},
+							{ value: 'b', label: 'All domains listed on this environment', id: 'option-b' },
+						] }
+						onChange={ e => setChecked( e.target.value ) }
 					/>
-
-					<Label htmlFor="include-all-domains-opt" sx={ { mb: 0 } }>
-						All domains listed on this environment, and all subdomains
-					</Label>
 				</Flex>
+			</fieldset>
 
-				<Flex sx={ { alignItems: 'center', mb: 1 } }>
+			<fieldset>
+				<legend sx={ { mb: 0, fontSize: 2, fontWeight: 'bold' } }>With a custom Label</legend>
+
+				<Flex sx={ { alignItems: 'center' } }>
 					<Radio
-						name="includeSubdomains"
-						id="include-subdomains-opt"
-						onChange={ () => setChecked( 'b' ) }
-						checked={ checked === 'b' }
-						value={ 'b' }
+						name="the_option_custom"
+						defaultValue={ checked2 }
+						options={ [
+							{
+								value: 'a',
+								label: (
+									<Label
+										htmlFor="option-custom-a"
+										className="custom-class"
+										sx={ { color: 'error' } }
+									>
+										(Custom) All domains listed on this environment, and all subdomains
+									</Label>
+								),
+								id: 'option-custom-a',
+							},
+							{
+								value: 'b',
+								label: 'All domains listed on this environment',
+								labelProps: {
+									id: 'label-option-custom-b-custom-props',
+								},
+								className: 'custom-class-for-this',
+								'aria-describedby': 'describe-radio-all-domains-subdomains',
+								id: 'option-custom-b',
+							},
+						] }
+						onChange={ ( _, option ) => setChecked2( option.value ) }
 					/>
-
-					<Label id="exclude-subdomains" htmlFor="include-subdomains-opt" sx={ { mb: 0 } }>
-						All domains listed on this environment
-					</Label>
 				</Flex>
 			</fieldset>
+
+			<p id="describe-radio-all-domains-subdomains" sx={ { mt: 2 } }>
+				This is a explanation for custom option b
+			</p>
 		</Form.Root>
 	);
 };