@automattic/vip-design-system 0.7.0 → 0.9.0

package/build/system/Form/InlineSelect.js

@@ -13,7 +13,7 @@ var _SearchSelect = require("./SearchSelect");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["label", "value", "options", "noneLabel"];
+var _excluded = ["label", "value", "options", "noneLabel", "position"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -28,8 +28,7 @@ var selectStyles = {
       margin: 0,
       border: 0,
       padding: 0,
-      boxShadow: 'none',
-      fontSize: _.theme.fontSizes[2]
+      boxShadow: 'none'
     });
   },
   container: function container(provided) {
@@ -52,7 +51,7 @@ var selectStyles = {
   menu: function menu() {
     return {
       boxShadow: 'none',
-      borderTop: "1px solid " + _.theme.colors.border
+      borderTop: '1px solid'
     };
   }
 };
@@ -63,6 +62,8 @@ var InlineSelect = function InlineSelect(_ref) {
       options = _ref.options,
       _ref$noneLabel = _ref.noneLabel,
       noneLabel = _ref$noneLabel === void 0 ? 'All' : _ref$noneLabel,
+      _ref$position = _ref.position,
+      position = _ref$position === void 0 ? 'left' : _ref$position,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var valueLabel = noneLabel;
@@ -90,25 +91,39 @@ var InlineSelect = function InlineSelect(_ref) {
       hideSelectedOptions: false,
       isClearable: false,
       menuIsOpen: true,
-      options: options,
       styles: selectStyles,
+      classNamePrefix: 'select',
+      options: options,
       placeholder: "Search...",
       tabSelectsValue: false,
-      value: value
-    }, props, {
-      theme: function theme(_theme) {
-        return _extends({}, _theme, {
-          colors: _extends({}, _theme.colors, {
-            primary25: _.theme.colors.hover,
-            primary50: _.theme.colors.brand['7'],
-            primary: _.theme.colors.heading
-          })
-        });
+      value: value,
+      sx: {
+        '.select__control': {
+          background: 'none',
+          color: 'heading'
+        },
+        '.select__single-value': {
+          color: 'heading',
+          px: 1
+        },
+        '.react-select__option': {
+          bg: 'grey.10',
+          '&:hover': {
+            bg: 'grey.10'
+          }
+        },
+        '.select__option--is-focused': {
+          bg: 'grey.10'
+        },
+        '.select__menu': {
+          borderColor: 'border'
+        }
       }
-    }))
+    }, props))
   });
   return (0, _jsxRuntime.jsx)(_.Dialog, {
     content: Content,
+    position: position,
     trigger: (0, _jsxRuntime.jsx)(_.DialogButton, {
       sx: {
         width: '100%'
@@ -125,5 +140,6 @@ InlineSelect.propTypes = {
   // https://react-select.com/props
   value: _propTypes["default"].oneOfType([_propTypes["default"].array, _propTypes["default"].object]),
   options: _propTypes["default"].array,
+  position: _propTypes["default"].string,
   noneLabel: _propTypes["default"].string
 };

package/build/system/Form/Input.js

@@ -19,7 +19,7 @@ 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 Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+var InputComponent = function InputComponent(_ref, ref) {
   var variant = _ref.variant,
       label = _ref.label,
       forLabel = _ref.forLabel,
@@ -38,7 +38,7 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       required: required,
       sx: {
         border: '1px solid',
-        borderColor: 'border',
+        borderColor: 'grey.60',
         backgroundColor: 'card',
         borderRadius: 1,
         lineHeight: 'inherit',
@@ -64,14 +64,17 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       children: errorMessage
     })]
   });
-});
+};
 
-exports.Input = Input;
-Input.propTypes = {
+InputComponent.propTypes = {
   variant: _propTypes["default"].string,
   label: _propTypes["default"].string,
   hasError: _propTypes["default"].bool,
   required: _propTypes["default"].bool,
   forLabel: _propTypes["default"].string,
   errorMessage: _propTypes["default"].string
-};
+};
+
+var Input = /*#__PURE__*/_react["default"].forwardRef(InputComponent);
+
+exports.Input = Input;

package/build/system/Form/Label.js

@@ -11,12 +11,12 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 var Label = function Label(props) {
   return (0, _jsxRuntime.jsx)(_.Heading, _extends({
-    variant: "caps",
+    variant: "h4",
     as: "label",
     sx: {
       display: 'block',
       mb: 2,
-      color: 'text'
+      color: 'muted'
     }
   }, props));
 };

package/build/system/Form/RadioBoxGroup.js

@@ -0,0 +1,101 @@
+"use strict";
+
+exports.__esModule = true;
+exports.RadioBoxGroup = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var RadioGroupPrimitive = _interopRequireWildcard(require("@radix-ui/react-radio-group"));
+
+var _md = require("react-icons/md");
+
+var _ = require("../");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+var _excluded = ["onChange", "groupLabel", "value", "options"];
+
+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 _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 RadioBoxGroup = function RadioBoxGroup(_ref) {
+  var onChange = _ref.onChange,
+      groupLabel = _ref.groupLabel,
+      value = _ref.value,
+      options = _ref.options,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return (0, _jsxRuntime.jsx)(RadioGroupPrimitive.Root, _extends({
+    onValueChange: onChange,
+    value: value,
+    "aria-label": groupLabel,
+    sx: {
+      display: 'flex',
+      gap: 2
+    }
+  }, props, {
+    children: options.map(function (option, index) {
+      return (0, _jsxRuntime.jsxs)(RadioGroupPrimitive.Item, {
+        value: option.value,
+        id: "o" + index,
+        sx: {
+          p: 3,
+          background: 'none',
+          cursor: 'pointer',
+          borderRadius: 2,
+          textAlign: 'left',
+          border: '1px solid',
+          borderColor: 'border',
+          position: 'relative',
+          '&:hover': {
+            borderColor: 'grey.10'
+          },
+          '&[data-state=checked]': {
+            borderColor: 'primary'
+          }
+        },
+        children: [(0, _jsxRuntime.jsx)(RadioGroupPrimitive.Indicator, {
+          children: (0, _jsxRuntime.jsx)(_md.MdCheckCircle, {
+            size: 16,
+            sx: {
+              position: 'absolute',
+              top: 2,
+              right: 2,
+              color: 'primary'
+            }
+          })
+        }), (0, _jsxRuntime.jsx)(_.Heading, {
+          variant: "h4",
+          as: "label",
+          htmlFor: "o" + index,
+          sx: {
+            mb: 0
+          },
+          children: option.label
+        }), (0, _jsxRuntime.jsx)(_.Text, {
+          sx: {
+            color: 'muted',
+            mb: 0,
+            fontSize: 1
+          },
+          children: option.description
+        })]
+      }, option.value);
+    })
+  }));
+};
+
+exports.RadioBoxGroup = RadioBoxGroup;
+RadioBoxGroup.propTypes = {
+  onChange: _propTypes["default"].func,
+  options: _propTypes["default"].array,
+  value: _propTypes["default"].string,
+  groupLabel: _propTypes["default"].string
+};

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

@@ -19,7 +19,7 @@ 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 Textarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+var TextareaComponent = function TextareaComponent(_ref, ref) {
   var variant = _ref.variant,
       label = _ref.label,
       forLabel = _ref.forLabel,
@@ -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,
@@ -59,14 +59,17 @@ var Textarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       children: errorMessage
     })]
   });
-});
+};
 
-exports.Textarea = Textarea;
-Textarea.propTypes = {
+TextareaComponent.propTypes = {
   variant: _propTypes["default"].string,
   label: _propTypes["default"].string,
   hasError: _propTypes["default"].bool,
   required: _propTypes["default"].bool,
   forLabel: _propTypes["default"].string,
   errorMessage: _propTypes["default"].string
-};
+};
+
+var Textarea = /*#__PURE__*/_react["default"].forwardRef(TextareaComponent);
+
+exports.Textarea = 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

@@ -0,0 +1,78 @@
+"use strict";
+
+exports.__esModule = true;
+exports.ToggleGroup = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var RadioGroupPrimitive = _interopRequireWildcard(require("@radix-ui/react-radio-group"));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+var _excluded = ["onChange", "groupLabel", "value", "options"];
+
+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 _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 ToggleGroup = function ToggleGroup(_ref) {
+  var onChange = _ref.onChange,
+      groupLabel = _ref.groupLabel,
+      value = _ref.value,
+      options = _ref.options,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return (0, _jsxRuntime.jsx)(RadioGroupPrimitive.Root, _extends({
+    onValueChange: onChange,
+    value: value,
+    "aria-label": groupLabel,
+    sx: {
+      bg: 'backgroundSecondary',
+      p: 1,
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, props, {
+    children: options.map(function (option, index) {
+      return (0, _jsxRuntime.jsx)(RadioGroupPrimitive.Item, {
+        value: option.value,
+        id: "o" + index,
+        sx: {
+          fontSize: 1,
+          color: 'muted',
+          background: 'none',
+          border: 'none',
+          cursor: 'pointer',
+          borderRadius: 1,
+          py: 1,
+          px: 2,
+          flex: '1 1 auto',
+          textAlign: 'center',
+          '&:hover': {
+            color: 'heading'
+          },
+          '&[data-state=checked]': {
+            backgroundColor: 'card',
+            boxShadow: 'low',
+            color: 'heading'
+          }
+        },
+        children: option.label
+      }, option.value);
+    })
+  }));
+};
+
+exports.ToggleGroup = ToggleGroup;
+ToggleGroup.propTypes = {
+  onChange: _propTypes["default"].func,
+  options: _propTypes["default"].array,
+  value: _propTypes["default"].string,
+  groupLabel: _propTypes["default"].string
+};

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,11 +96,11 @@ 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,
-  body: _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/Form/index.js

@@ -22,6 +22,10 @@ var _ToggleRow = require("./ToggleRow");
 
 exports.ToggleRow = _ToggleRow.ToggleRow;
 
+var _ToggleGroup = require("./ToggleGroup");
+
+exports.ToggleGroup = _ToggleGroup.ToggleGroup;
+
 var _Select = require("./Select");
 
 exports.Select = _Select.Select;
@@ -30,6 +34,10 @@ var _Radio = require("./Radio");
 
 exports.Radio = _Radio.Radio;
 
+var _RadioBoxGroup = require("./RadioBoxGroup");
+
+exports.RadioBoxGroup = _RadioBoxGroup.RadioBoxGroup;
+
 var _Textarea = require("./Textarea");
 
 exports.Textarea = _Textarea.Textarea;