@automattic/vip-design-system 0.7.1 → 0.9.1

package/build/system/Form/SearchSelect.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.SearchSelect = exports.DropdownIndicator = exports.Option = exports.selectStyles = void 0;
+exports.SearchSelect = exports.DropdownIndicator = exports.Option = void 0;
 
 var _md = require("react-icons/md");
 
@@ -23,51 +23,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 _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); }
 
-var selectStyles = {
-  control: function control(provided) {
-    return _extends({}, provided, {
-      border: "1px solid " + _.theme.colors.border,
-      margin: 0,
-      padding: 0,
-      boxShadow: 'none',
-      fontSize: _.theme.fontSizes[2]
-    });
-  },
-  option: function option(provided) {
-    return _extends({}, provided, {
-      paddingTop: _.theme.space[1],
-      paddingBottom: _.theme.space[1],
-      paddingLeft: _.theme.space[2]
-    });
-  },
-  menu: function menu(provided) {
-    return _extends({}, provided, {
-      boxShadow: _.theme.shadows.low
-    });
-  },
-  indicatorSeparator: function indicatorSeparator() {
-    return {
-      display: 'none'
-    };
-  },
-  valueContainer: function valueContainer(provided) {
-    return _extends({}, provided, {
-      paddingLeft: _.theme.space[1],
-      paddingRight: _.theme.space[1]
-    });
-  },
-  singleValue: function singleValue(provided) {
-    return _extends({}, provided, {
-      paddingLeft: _.theme.space[1],
-      paddingRight: _.theme.space[1]
-    });
-  }
-};
-exports.selectStyles = selectStyles;
+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 Option = function Option(_ref) {
   var label = _ref.label,
@@ -84,7 +42,7 @@ var Option = function Option(_ref) {
         sx: {
           mb: 0,
           mr: 2,
-          color: 'green.60',
+          color: 'green.80',
           svg: {
             display: 'block'
           }
@@ -142,22 +100,44 @@ ClearIndicator.propTypes = {
 
 var SearchSelect = function SearchSelect(props) {
   return (0, _jsxRuntime.jsx)(_reactSelect["default"], _extends({}, props, {
+    classNamePrefix: 'select',
     components: {
       Option: Option,
       DropdownIndicator: DropdownIndicator,
       ClearIndicator: ClearIndicator
     },
-    styles: selectStyles,
-    theme: function theme(_theme) {
-      return _extends({}, _theme, {
-        colors: _extends({}, _theme.colors, {
-          primary25: _.theme.colors.hover,
-          primary50: _.theme.colors.brand['7'],
-          primary: _.theme.colors.heading,
-          dangerLight: _.theme.colors.red['10'],
-          danger: _.theme.colors.red['70']
-        })
-      });
+    sx: {
+      '.select__control': {
+        background: 'none',
+        color: 'heading',
+        border: '1px solid',
+        borderColor: 'border',
+        margin: 0,
+        padding: 0,
+        boxShadow: 'none',
+        fontSize: 2
+      },
+      '.select__single-value': {
+        color: 'heading',
+        px: 1
+      },
+      '.select__menu': {
+        bg: 'dialog',
+        boxShadow: 'medium'
+      },
+      '.react-select__option': {
+        color: 'text',
+        paddingTop: 1,
+        paddingBottom: 1,
+        paddingLeft: 2,
+        bg: 'hover',
+        '&:hover': {
+          bg: 'hover'
+        }
+      },
+      '.select__option--is-focused': {
+        bg: 'hover'
+      }
     }
   }));
 };

package/build/system/Form/Select.js

@@ -45,9 +45,9 @@ var Select = function Select(_ref) {
 
 exports.Select = Select;
 Select.propTypes = {
-  isMulti: _propTypes["default"].bool,
   isInline: _propTypes["default"].bool,
+  isMulti: _propTypes["default"].bool,
   isSearch: _propTypes["default"].bool,
-  options: _propTypes["default"].array,
-  label: _propTypes["default"].string
+  label: _propTypes["default"].string,
+  options: _propTypes["default"].array
 };

package/build/system/Form/Textarea.js

@@ -30,7 +30,7 @@ var Textarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
 
   return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
     children: [label && (0, _jsxRuntime.jsxs)(_.Label, {
-      "for": forLabel,
+      htmlFor: forLabel,
       children: [label, required && '*']
     }), (0, _jsxRuntime.jsx)("textarea", _extends({}, props, {
       ref: ref,
@@ -69,4 +69,5 @@ Textarea.propTypes = {
   required: _propTypes["default"].bool,
   forLabel: _propTypes["default"].string,
   errorMessage: _propTypes["default"].string
-};
+};
+Textarea.displayName = 'Textarea';

package/build/system/Form/Toggle.js

@@ -82,7 +82,7 @@ var CheckBox = function CheckBox(props) {
       margin: 0,
       display: 'block',
       '&:checked + label': {
-        backgroundColor: 'green.50',
+        backgroundColor: 'success',
         '&::after': {
           content: "''",
           display: 'block',

package/build/system/Form/ToggleGroup.js

@@ -3,14 +3,10 @@
 exports.__esModule = true;
 exports.ToggleGroup = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var RadioGroupPrimitive = _interopRequireWildcard(require("@radix-ui/react-radio-group"));
 
-var _md = require("react-icons/md");
-
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["onChange", "groupLabel", "value", "options"];

package/build/system/Form/ToggleRow.js

@@ -56,7 +56,8 @@ var ToggleRow = function ToggleRow(_ref) {
           width: 32,
           sx: {
             display: 'block'
-          }
+          },
+          alt: "Icon representing a toggle"
         })
       })
     }), (0, _jsxRuntime.jsxs)(_.Box, {
@@ -95,10 +96,10 @@ var ToggleRow = function ToggleRow(_ref) {
 
 exports.ToggleRow = ToggleRow;
 ToggleRow.propTypes = {
-  image: _propTypes["default"].string,
+  image: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].string]),
   badge: _propTypes["default"].string,
-  title: _propTypes["default"].string,
-  subTitle: _propTypes["default"].string,
+  title: _propTypes["default"].node,
+  subTitle: _propTypes["default"].node,
   body: _propTypes["default"].node,
   meta: _propTypes["default"].node,
   sx: _propTypes["default"].object

package/build/system/Form/Validation.js

@@ -29,14 +29,14 @@ var Validation = function Validation(_ref) {
     variant: "h5",
     as: "p",
     sx: {
-      color: isValid ? 'green.50' : 'red.50'
+      color: isValid ? 'success' : 'error',
+      display: 'flex',
+      alignItems: 'center'
     }
   }, props, {
     children: [(0, _jsxRuntime.jsx)(Icon, {
       sx: {
-        mr: 1,
-        position: 'relative',
-        top: '0.125em'
+        mr: 1
       }
     }), children]
   }));

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,7 +84,7 @@ var Notification = function Notification(_ref) {
 
 exports.Notification = Notification;
 Notification.propTypes = {
-  title: _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,12 +125,12 @@ var OptionRow = function OptionRow(_ref) {
 
 exports.OptionRow = OptionRow;
 OptionRow.propTypes = {
-  image: _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,
+  subTitle: _propTypes["default"].node,
   body: _propTypes["default"].node,
   meta: _propTypes["default"].node,
   to: _propTypes["default"].string,

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