@automattic/vip-design-system 0.33.1 → 0.33.2

package/build/system/Form/RadioBoxGroup.js

@@ -17,10 +17,12 @@ var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
 
 var _Label = require("./Label");
 
+var _Validation = require("./Validation");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["id", "value", "className", "label", "description", "labelProps"],
-    _excluded2 = ["optionWidth", "name", "onChange", "groupLabel", "defaultValue", "options", "disabled"];
+    _excluded2 = ["optionWidth", "name", "onChange", "groupLabel", "defaultValue", "options", "disabled", "errorMessage", "hasError", "required"];
 
 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); }
 
@@ -137,6 +139,9 @@ var RadioBoxGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, f
       defaultValue = _ref2.defaultValue,
       options = _ref2.options,
       disabled = _ref2.disabled,
+      errorMessage = _ref2.errorMessage,
+      hasError = _ref2.hasError,
+      required = _ref2.required,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded2);
   var onChangeHandler = (0, _react.useCallback)(function (e) {
     var optionTriggered = options.find(function (option) {
@@ -154,29 +159,42 @@ var RadioBoxGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, f
       width: optionWidth
     }, (option == null ? void 0 : option.id) || (option == null ? void 0 : option.value));
   });
-  return (0, _jsxRuntime.jsxs)("fieldset", (0, _extends2["default"])({
-    sx: {
-      border: 0,
-      padding: 0
-    },
-    ref: forwardRef
-  }, props, {
-    children: [groupLabel ? (0, _jsxRuntime.jsx)(_Label.Label, {
-      as: "legend",
-      sx: {
+  return (0, _jsxRuntime.jsxs)("div", {
+    children: [(0, _jsxRuntime.jsxs)("fieldset", (0, _extends2["default"])({
+      sx: (0, _extends2["default"])({
+        border: 0,
+        p: hasError ? 2 : 0,
+        display: 'inline-block',
         mb: 2
-      },
-      children: groupLabel
-    }) : (0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
-      children: "Choose an option"
-    }), (0, _jsxRuntime.jsx)("div", {
-      sx: {
-        display: 'flex',
-        gap: 2
-      },
-      children: renderedOptions
+      }, hasError ? {
+        border: '1px solid',
+        borderColor: 'input.border.error',
+        borderRadius: 2
+      } : {}),
+      ref: forwardRef
+    }, props, {
+      children: [groupLabel ? (0, _jsxRuntime.jsx)(_Label.Label, {
+        as: "legend",
+        sx: {
+          mb: 2
+        },
+        required: required,
+        children: groupLabel
+      }) : (0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
+        children: "Choose an option"
+      }), (0, _jsxRuntime.jsx)("div", {
+        sx: {
+          display: 'flex',
+          gap: 2
+        },
+        children: renderedOptions
+      })]
+    })), hasError && errorMessage && (0, _jsxRuntime.jsx)(_Validation.Validation, {
+      isValid: false,
+      describedId: groupLabel,
+      children: errorMessage
     })]
-  }));
+  });
 });
 
 exports.RadioBoxGroup = RadioBoxGroup;
@@ -188,5 +206,9 @@ RadioBoxGroup.propTypes = {
   name: _propTypes["default"].string,
   disabled: _propTypes["default"].bool,
   groupLabel: _propTypes["default"].string,
-  optionWidth: _propTypes["default"].string
+  id: _propTypes["default"].string,
+  optionWidth: _propTypes["default"].string,
+  errorMessage: _propTypes["default"].string,
+  hasError: _propTypes["default"].bool,
+  required: _propTypes["default"].bool
 };

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

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.Errors = exports.Default = void 0;
 
 var _react = require("react");
 
@@ -50,4 +50,24 @@ var Default = function Default() {
   });
 };
 
-exports.Default = Default;
+exports.Default = Default;
+
+var Errors = function Errors() {
+  var _useState2 = (0, _react.useState)(null),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  return (0, _jsxRuntime.jsx)(_.RadioBoxGroup, {
+    defaultValue: value,
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    },
+    options: options,
+    required: true,
+    groupLabel: "Radio Box Group",
+    hasError: true,
+    errorMessage: "This is an error message"
+  });
+};
+
+exports.Errors = Errors;

package/build/system/Form/ToggleGroup.js

@@ -60,7 +60,7 @@ var ToggleGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forw
             color: 'heading'
           },
           '&[data-state=checked]': {
-            backgroundColor: 'card',
+            backgroundColor: 'background',
             boxShadow: 'low',
             color: 'heading'
           }

package/build/system/NewForm/FormAutocomplete.js

@@ -37,7 +37,7 @@ var _Form = require("../Form");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["autoFilter", "className", "debounce", "displayMenu", "dropdownArrow", "errorMessage", "forLabel", "getOptionLabel", "getOptionValue", "hasError", "isInline", "label", "loading", "minLength", "noOptionsMessage", "onChange", "onInputChange", "options", "required", "searchIcon", "showAllValues", "resetOnBlur", "source", "value"];
+var _excluded = ["autoFilter", "className", "debounce", "displayMenu", "dropdownArrow", "forLabel", "getOptionLabel", "getOptionValue", "errorMessage", "hasError", "isInline", "label", "loading", "minLength", "noOptionsMessage", "onChange", "onInputChange", "options", "required", "searchIcon", "showAllValues", "resetOnBlur", "source", "value"];
 
 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); }
 
@@ -147,11 +147,11 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       displayMenu = _ref$displayMenu === void 0 ? 'overlay' : _ref$displayMenu,
       _ref$dropdownArrow = _ref.dropdownArrow,
       dropdownArrow = _ref$dropdownArrow === void 0 ? DefaultArrow : _ref$dropdownArrow,
-      errorMessage = _ref.errorMessage,
       _ref$forLabel = _ref.forLabel,
       forLabel = _ref$forLabel === void 0 ? 'vip-autocomplete' : _ref$forLabel,
       getOptionLabel = _ref.getOptionLabel,
       getOptionValue = _ref.getOptionValue,
+      errorMessage = _ref.errorMessage,
       hasError = _ref.hasError,
       isInline = _ref.isInline,
       label = _ref.label,
@@ -345,7 +345,9 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
   return (0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames["default"])('vip-form-autocomplete-component', className),
     children: [label && !isInline && (0, _jsxRuntime.jsx)(SelectLabel, {}), (0, _jsxRuntime.jsx)("div", {
-      sx: (0, _extends2["default"])({}, defaultStyles, isInline && inlineStyles, searchIcon && searchIconStyles),
+      sx: (0, _extends2["default"])({}, defaultStyles, isInline && inlineStyles, searchIcon && searchIconStyles, hasError ? {
+        borderColor: 'input.border.error'
+      } : {}),
       children: (0, _jsxRuntime.jsxs)(_FormSelectContent.FormSelectContent, {
         isInline: inlineLabel,
         label: inlineLabel ? (0, _jsxRuntime.jsx)(SelectLabel, {}) : null,

package/build/system/NewTabs/Tabs.js

@@ -36,12 +36,15 @@ var NewTabs = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       onValueChange = _ref$onValueChange === void 0 ? undefined : _ref$onValueChange,
       _ref$defaultValue = _ref.defaultValue,
       defaultValue = _ref$defaultValue === void 0 ? undefined : _ref$defaultValue,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? undefined : _ref$value,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? null : _ref$className,
       _ref$sx = _ref.sx,
       sx = _ref$sx === void 0 ? {} : _ref$sx;
   return (0, _jsxRuntime.jsx)(TabsPrimitive.Root, {
     ref: ref,
+    value: value,
     defaultValue: defaultValue,
     onValueChange: onValueChange,
     className: (0, _classnames["default"])('vip-tabs-component', className),
@@ -55,6 +58,7 @@ NewTabs.propTypes = {
   className: _propTypes["default"].any,
   sx: _propTypes["default"].object,
   defaultValue: _propTypes["default"].node,
+  value: _propTypes["default"].node,
   onValueChange: _propTypes["default"].func,
   children: _propTypes["default"].node.isRequired
 };

package/build/system/NewTabs/Tabs.stories.js

@@ -1,12 +1,20 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.SetActiveTab = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
 
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+/**
+ * External dependencies
+ */
+
 /**
  * Internal dependencies
  */
@@ -58,4 +66,58 @@ var Default = function Default() {
   });
 };
 
-exports.Default = Default;
+exports.Default = Default;
+
+var SetActiveTab = function SetActiveTab() {
+  var _React$useState = _react["default"].useState('all'),
+      activeTab = _React$useState[0],
+      setActiveTab = _React$useState[1];
+
+  return (0, _jsxRuntime.jsxs)(_.NewTabs, {
+    value: activeTab,
+    onValueChange: function onValueChange(val) {
+      return setActiveTab(val);
+    },
+    children: [(0, _jsxRuntime.jsxs)(_.TabsList, {
+      title: "See all the content",
+      children: [(0, _jsxRuntime.jsx)(_.TabsTrigger, {
+        value: "all",
+        children: "All (5)"
+      }), (0, _jsxRuntime.jsx)(_.TabsTrigger, {
+        value: "live",
+        children: "Live (2)"
+      }), (0, _jsxRuntime.jsx)(_.TabsTrigger, {
+        value: "dev",
+        children: "In Development (3)"
+      }), (0, _jsxRuntime.jsx)(_.TabsTrigger, {
+        value: "protect",
+        disabled: true,
+        children: "Not accessible"
+      })]
+    }), (0, _jsxRuntime.jsx)(_.TabsContent, {
+      value: "all",
+      children: (0, _jsxRuntime.jsx)(_.Text, {
+        children: (0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          onClick: function onClick() {
+            return setActiveTab('live');
+          },
+          children: "Switch to live tab"
+        })
+      })
+    }), (0, _jsxRuntime.jsx)(_.TabsContent, {
+      value: "live",
+      children: "Live content"
+    }), (0, _jsxRuntime.jsx)(_.TabsContent, {
+      value: "dev",
+      children: (0, _jsxRuntime.jsxs)(_.Text, {
+        children: ["In Development content ", (0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          children: "Hey I am a button"
+        }), ' ']
+      })
+    })]
+  });
+};
+
+exports.SetActiveTab = SetActiveTab;

package/build/system/NewTabs/TabsList.js

@@ -33,7 +33,7 @@ var TabsList = function TabsList(_ref) {
   return (0, _jsxRuntime.jsx)(TabsPrimitive.List, {
     sx: (0, _extends2["default"])({
       borderBottom: '1px solid',
-      borderColor: 'border',
+      borderColor: 'borders.2',
       display: 'flex'
     }, sx),
     "aria-label": title,

package/build/system/NewTabs/TabsTrigger.js

@@ -7,6 +7,8 @@ exports.TabsTrigger = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var TabsPrimitive = _interopRequireWildcard(require("@radix-ui/react-tabs"));
@@ -36,19 +38,18 @@ var styles = {
   px: 0,
   pb: 3,
   border: 'none',
-  color: 'muted',
+  color: 'heading',
   '&[data-state="active"]': {
-    color: 'heading',
-    fontWeight: 'body',
-    boxShadow: function boxShadow(theme) {
-      return "inset 0 -1px 0 0 " + theme.colors.link + ", 0 1px 0 0 " + theme.colors.link;
-    }
+    color: 'link',
+    fontWeight: 'regular',
+    boxShadow: 'inset 0 -1px 0 0, 0 1px 0 0',
+    boxShadowColor: 'borders.accent'
   },
   '&:disabled': {
-    color: 'grey.70'
+    color: 'muted'
   },
   ':hover': {
-    fontWeight: 'body',
+    fontWeight: 'regular',
     color: 'heading'
   },
   '&:focus': function focus(theme) {
@@ -59,7 +60,7 @@ var styles = {
   }
 };
 
-var TabsTrigger = function TabsTrigger(_ref) {
+var TabsTrigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var value = _ref.value,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
@@ -70,9 +71,10 @@ var TabsTrigger = function TabsTrigger(_ref) {
     value: value,
     disabled: disabled,
     sx: (0, _extends2["default"])({}, styles, sx),
+    ref: forwardRef,
     children: children
   });
-};
+});
 
 exports.TabsTrigger = TabsTrigger;
 TabsTrigger.propTypes = {
@@ -80,4 +82,5 @@ TabsTrigger.propTypes = {
   value: _propTypes["default"].string,
   disabled: _propTypes["default"].bool,
   children: _propTypes["default"].node.isRequired
-};
+};
+TabsTrigger.displayName = 'TabsTrigger';

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