@automattic/vip-design-system 0.26.6 → 0.27.0

package/build/system/Accordion/Accordion.js

@@ -26,9 +26,10 @@ var _Heading = require("../Heading");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["children"],
-    _excluded2 = ["children", "headingVariant"],
+    _excluded2 = ["children", "headingVariant", "sx"],
     _excluded3 = ["children", "icon"],
-    _excluded4 = ["children", "sx"];
+    _excluded4 = ["children", "sx"],
+    _excluded5 = ["sx", "children", "className"];
 
 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); }
 
@@ -87,6 +88,8 @@ var Trigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forward
   var children = _ref2.children,
       _ref2$headingVariant = _ref2.headingVariant,
       headingVariant = _ref2$headingVariant === void 0 ? 'h3' : _ref2$headingVariant,
+      _ref2$sx = _ref2.sx,
+      sx = _ref2$sx === void 0 ? {} : _ref2$sx,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded2);
   return (0, _jsxRuntime.jsx)(_Heading.Heading, {
     sx: {
@@ -95,7 +98,7 @@ var Trigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forward
     },
     variant: headingVariant,
     children: (0, _jsxRuntime.jsxs)(AccordionPrimitive.Trigger, (0, _extends2["default"])({
-      sx: {
+      sx: (0, _extends2["default"])({
         color: 'heading',
         cursor: 'pointer',
         all: 'unset',
@@ -134,7 +137,7 @@ var Trigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forward
             return accordion.background.hover;
           }
         }
-      }
+      }, sx)
     }, props, {
       ref: forwardedRef,
       children: [children, (0, _jsxRuntime.jsx)(_md.MdChevronRight, {
@@ -155,7 +158,8 @@ exports.Trigger = Trigger;
 Trigger.displayName = 'Accordion.Trigger';
 Trigger.propTypes = {
   children: _propTypes["default"].node.isRequired,
-  headingVariant: _propTypes["default"].string
+  headingVariant: _propTypes["default"].string,
+  sx: _propTypes["default"].object
 };
 
 var TriggerWithIcon = /*#__PURE__*/_react["default"].forwardRef(function (_ref7, forwardedRef) {
@@ -200,6 +204,8 @@ var Content = /*#__PURE__*/_react["default"].forwardRef(function (_ref8, forward
       color: 'text',
       fontSize: 2,
       overflow: 'hidden',
+      px: 3,
+      py: 2,
       '&[data-state="open"]': {
         animation: slideDown + " 300ms cubic-bezier(0.87, 0, 0.13, 1)"
       },
@@ -209,13 +215,7 @@ var Content = /*#__PURE__*/_react["default"].forwardRef(function (_ref8, forward
     }, sx)
   }, props, {
     ref: forwardedRef,
-    children: (0, _jsxRuntime.jsx)("div", {
-      sx: {
-        px: 3,
-        py: 2
-      },
-      children: children
-    })
+    children: children
   }));
 });
 
@@ -229,21 +229,19 @@ Content.propTypes = {
 var Root = /*#__PURE__*/_react["default"].forwardRef(function (_ref9, forwardRef) {
   var _ref9$sx = _ref9.sx,
       sx = _ref9$sx === void 0 ? {} : _ref9$sx,
-      defaultValue = _ref9.defaultValue,
-      type = _ref9.type,
       children = _ref9.children,
-      className = _ref9.className;
-  return (0, _jsxRuntime.jsx)(AccordionPrimitive.Root, {
+      className = _ref9.className,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref9, _excluded5);
+  return (0, _jsxRuntime.jsx)(AccordionPrimitive.Root, (0, _extends2["default"])({
     className: (0, _classnames["default"])('vip-accordion-component', className),
     collapsible: true,
-    defaultValue: defaultValue,
     ref: forwardRef,
     sx: (0, _extends2["default"])({
       borderRadius: 6
-    }, sx),
-    type: type,
+    }, sx)
+  }, props, {
     children: children
-  });
+  }));
 });
 
 exports.Root = Root;

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,155 @@ 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 = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _jsxRuntime = require("theme-ui/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Label = require("./Label");
 
-var _excluded = ["disabled"];
+var _ScreenReaderText = require("../ScreenReaderText/ScreenReaderText");
 
-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
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+var _excluded = ["disabled", "defaultValue", "onChange", "name", "options", "className"];
+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"].shape({
+    props: {
+      className: _propTypes["default"].any,
+      sx: _propTypes["default"].object
+    }
+  }).isRequired
+};
+
+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 renderedOptions = options.map(function (option) {
+    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-" + option.id),
+      children: [(0, _jsxRuntime.jsx)("input", {
+        type: "radio",
+        id: option.id,
+        name: name,
+        value: "" + option.value,
+        sx: inputStyle,
+        onChange: onChange,
+        className: (0, _classnames["default"])('vip-radio-component-item-input', option == null ? void 0 : option.className),
+        checked: "" + option.value === "" + defaultValue
+      }), typeof option.label === 'string' ? (0, _jsxRuntime.jsx)(_Label.Label, {
+        className: (0, _classnames["default"])('vip-radio-component-item-label', option == null ? void 0 : option.className),
+        htmlFor: option.id,
+        sx: labelStyle,
+        children: option.label
+      }) : (0, _jsxRuntime.jsx)(CustomLabel, {
+        children: option.label
+      })]
+    }, option.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"].array,
+  name: _propTypes["default"].string,
+  className: _propTypes["default"].any
 };

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

@@ -9,12 +9,14 @@ var _ = 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,6 +35,10 @@ var Default = function Default() {
       checked = _useState[0],
       setChecked = _useState[1];
 
+  var _useState2 = (0, _react.useState)('a'),
+      checked2 = _useState2[0],
+      setChecked2 = _useState2[1];
+
   return (0, _jsxRuntime.jsxs)(_.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", {
@@ -47,46 +53,63 @@ 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: 'primary'
+              },
+              children: "(Custom) All domains listed on this environment, and all subdomains"
+            }),
+            id: 'option-custom-a'
+          }, {
+            value: 'b',
+            label: 'All domains listed on this environment',
+            className: 'custom-class-for-this',
+            id: 'option-custom-b'
+          }],
+          onChange: function onChange(e) {
+            return setChecked2(e.target.value);
+          }
+        })
       })]
     })]
   });

package/build/system/NewForm/FormAutocomplete.js

@@ -27,9 +27,11 @@ var _FormSelectArrow = require("./FormSelectArrow");
 
 var _Label = require("../Form/Label");
 
+var _FormSelectSearch = require("./FormSelectSearch");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["isInline", "forLabel", "options", "label", "getOptionLabel", "getOptionValue", "onChange", "value", "showAllValues", "displayMenu", "id", "className"];
+var _excluded = ["isInline", "forLabel", "options", "label", "getOptionLabel", "getOptionValue", "onChange", "onInputChange", "value", "showAllValues", "searchIcon", "displayMenu", "noOptionsMessage", "id", "className"];
 
 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); }
 
@@ -100,13 +102,34 @@ var defaultStyles = {
   '& .autocomplete__wrapper': {
     width: '100%'
   },
+  '& .autocomplete__option': {
+    borderColor: 'borders.2'
+  },
+  '& .autocomplete__option--odd': {
+    bg: 'backgroundSecondary'
+  },
+  '& .autocomplete__option:hover, & .autocomplete__option--focused': {
+    bg: 'midnight',
+    borderColor: 'midnight'
+  },
   '& .autocomplete__input--show-all-values': {
     paddingRight: 0
+  },
+  '& .autocomplete__hint': {
+    border: 'none',
+    paddingLeft: 3,
+    minHeight: '27px',
+    lineHeight: '27px'
   }
 };
 var inlineStyles = {
   borderWidth: 0
 };
+var searchIconStyles = {
+  '& .autocomplete__input.autocomplete__input--show-all-values': {
+    paddingLeft: '30px'
+  }
+};
 
 var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var isInline = _ref.isInline,
@@ -117,11 +140,18 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       getOptionValue = _ref.getOptionValue,
       _ref$onChange = _ref.onChange,
       onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+      onInputChange = _ref.onInputChange,
       value = _ref.value,
       _ref$showAllValues = _ref.showAllValues,
       showAllValues = _ref$showAllValues === void 0 ? true : _ref$showAllValues,
+      _ref$searchIcon = _ref.searchIcon,
+      searchIcon = _ref$searchIcon === void 0 ? false : _ref$searchIcon,
       _ref$displayMenu = _ref.displayMenu,
       displayMenu = _ref$displayMenu === void 0 ? 'overlay' : _ref$displayMenu,
+      _ref$noOptionsMessage = _ref.noOptionsMessage,
+      noOptionsMessage = _ref$noOptionsMessage === void 0 ? function () {
+    return 'No results found.';
+  } : _ref$noOptionsMessage,
       _ref$id = _ref.id,
       id = _ref$id === void 0 ? 'vip-autocomplete' : _ref$id,
       className = _ref.className,
@@ -163,13 +193,16 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       onChange(getOptionByLabel(inputValue), inputValue);
     }
   }, [onChange, getOptionByLabel]);
+  var handleTypeChange = (0, _react.useCallback)(function (query) {
+    return options.filter(function (option) {
+      return optionLabel(option).toLowerCase().indexOf(query.toLowerCase()) >= 0;
+    });
+  }, [options]);
   var suggest = (0, _react.useCallback)(function (query, populateResults) {
     var data = options;
 
     if (isDirty) {
-      data = options.filter(function (option) {
-        return optionLabel(option).toLowerCase().indexOf(query.toLowerCase()) >= 0;
-      });
+      data = onInputChange ? onInputChange(query) : handleTypeChange(query);
     }
 
     populateResults(data.map(function (option) {
@@ -190,18 +223,19 @@ 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),
+      sx: (0, _extends2["default"])({}, defaultStyles, isInline && inlineStyles, searchIcon && searchIconStyles),
       children: (0, _jsxRuntime.jsxs)(_FormSelectContent.FormSelectContent, {
         isInline: inlineLabel,
         label: inlineLabel ? (0, _jsxRuntime.jsx)(SelectLabel, {}) : null,
-        children: [(0, _jsxRuntime.jsx)(_react2["default"], (0, _extends2["default"])({
+        children: [searchIcon && (0, _jsxRuntime.jsx)(_FormSelectSearch.FormSelectSearch, {}), (0, _jsxRuntime.jsx)(_react2["default"], (0, _extends2["default"])({
           id: id,
           showAllValues: showAllValues,
           ref: forwardRef,
           source: suggest,
           defaultValue: value,
           displayMenu: displayMenu,
-          onConfirm: onValueChange
+          onConfirm: onValueChange,
+          tNoResults: noOptionsMessage
         }, props)), (0, _jsxRuntime.jsx)(_FormSelectArrow.FormSelectArrow, {})]
       })
     })]
@@ -212,6 +246,7 @@ exports.FormAutocomplete = FormAutocomplete;
 FormAutocomplete.propTypes = {
   id: _propTypes["default"].string,
   showAllValues: _propTypes["default"].bool,
+  searchIcon: _propTypes["default"].bool,
   isInline: _propTypes["default"].bool,
   forLabel: _propTypes["default"].string,
   value: _propTypes["default"].string,
@@ -220,6 +255,8 @@ FormAutocomplete.propTypes = {
   options: _propTypes["default"].array,
   getOptionLabel: _propTypes["default"].func,
   getOptionValue: _propTypes["default"].func,
+  onInputChange: _propTypes["default"].func,
+  noOptionsMessage: _propTypes["default"].func,
   onChange: _propTypes["default"].func,
   className: _propTypes["default"].any
 };

package/build/system/NewForm/FormAutocomplete.stories.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.WithDefaultValue = exports.Inline = exports.Default = void 0;
+exports["default"] = exports.WithSearchIcon = exports.WithDefaultValue = exports.WithCustomMessages = exports.Inline = exports.Default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -107,4 +107,29 @@ var WithDefaultValue = function WithDefaultValue() {
   });
 };
 
-exports.WithDefaultValue = WithDefaultValue;
+exports.WithDefaultValue = WithDefaultValue;
+
+var WithSearchIcon = function WithSearchIcon() {
+  var customArgs = (0, _extends2["default"])({}, args, {
+    searchIcon: true
+  });
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, customArgs))
+  });
+};
+
+exports.WithSearchIcon = WithSearchIcon;
+
+var WithCustomMessages = function WithCustomMessages() {
+  var customArgs = (0, _extends2["default"])({}, args, {
+    noOptionsMessage: function noOptionsMessage() {
+      return 'No data';
+    },
+    placeholder: 'Type to search'
+  });
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, customArgs))
+  });
+};
+
+exports.WithCustomMessages = WithCustomMessages;

package/build/system/NewForm/FormSelectSearch.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.FormSelectSearch = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _md = require("react-icons/md");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+var FormSelectSearch = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
+  return (0, _jsxRuntime.jsx)(_md.MdSearch, (0, _extends2["default"])({
+    ref: forwardRef,
+    "aria-hidden": "true",
+    size: 24,
+    sx: {
+      position: 'absolute',
+      paddingRight: 2,
+      left: 2,
+      pointerEvents: 'none'
+    }
+  }, props));
+});
+
+exports.FormSelectSearch = FormSelectSearch;
+FormSelectSearch.displayName = 'FormSelectSearch';

package/package.json

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

package/src/system/Accordion/Accordion.js

@@ -57,7 +57,7 @@ Item.propTypes = {
 };
 
 export const Trigger = React.forwardRef(
-	( { children, headingVariant = 'h3', ...props }, forwardedRef ) => (
+	( { children, headingVariant = 'h3', sx = {}, ...props }, forwardedRef ) => (
 		<Heading
 			sx={ {
 				all: 'unset',
@@ -90,6 +90,7 @@ export const Trigger = React.forwardRef(
 						'.vip-accordion-trigger-indicator': { transform: 'rotate(270deg)' },
 					},
 					'&:hover': { backgroundColor: ( { accordion } ) => accordion.background.hover },
+					...sx,
 				} }
 				{ ...props }
 				ref={ forwardedRef }
@@ -115,6 +116,7 @@ Trigger.displayName = 'Accordion.Trigger';
 Trigger.propTypes = {
 	children: PropTypes.node.isRequired,
 	headingVariant: PropTypes.string,
+	sx: PropTypes.object,
 };
 
 export const TriggerWithIcon = React.forwardRef( ( { children, icon, ...props }, forwardedRef ) => (
@@ -139,6 +141,8 @@ export const Content = React.forwardRef( ( { children, sx = {}, ...props }, forw
 				color: 'text',
 				fontSize: 2,
 				overflow: 'hidden',
+				px: 3,
+				py: 2,
 
 				'&[data-state="open"]': {
 					animation: `${ slideDown } 300ms cubic-bezier(0.87, 0, 0.13, 1)`,
@@ -151,14 +155,7 @@ export const Content = React.forwardRef( ( { children, sx = {}, ...props }, forw
 			{ ...props }
 			ref={ forwardedRef }
 		>
-			<div
-				sx={ {
-					px: 3,
-					py: 2,
-				} }
-			>
-				{ children }
-			</div>
+			{ children }
 		</AccordionPrimitive.Content>
 	);
 } );
@@ -170,23 +167,20 @@ Content.propTypes = {
 	sx: PropTypes.object,
 };
 
-const Root = React.forwardRef(
-	( { sx = {}, defaultValue, type, children, className }, forwardRef ) => (
-		<AccordionPrimitive.Root
-			className={ classNames( 'vip-accordion-component', className ) }
-			collapsible
-			defaultValue={ defaultValue }
-			ref={ forwardRef }
-			sx={ {
-				borderRadius: 6,
-				...sx,
-			} }
-			type={ type }
-		>
-			{ children }
-		</AccordionPrimitive.Root>
-	)
-);
+const Root = React.forwardRef( ( { sx = {}, children, className, ...props }, forwardRef ) => (
+	<AccordionPrimitive.Root
+		className={ classNames( 'vip-accordion-component', className ) }
+		collapsible
+		ref={ forwardRef }
+		sx={ {
+			borderRadius: 6,
+			...sx,
+		} }
+		{ ...props }
+	>
+		{ children }
+	</AccordionPrimitive.Root>
+) );
 
 Root.displayName = 'Accordion';
 

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,156 @@
+/* eslint-disable max-len */
 /** @jsxImportSource theme-ui */
 
 /**
  * External dependencies
  */
 import React from 'react';
-import { Radio as ThemeRadio } from 'theme-ui';
 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 } ) => (
+	<>
+		{ 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.shape( { props: { className: PropTypes.any, sx: PropTypes.object } } )
+		.isRequired,
+};
+
+const Radio = React.forwardRef(
+	(
+		{ disabled, defaultValue, onChange, name = '', options = [], className, ...props },
+		forwardRef
+	) => {
+		const renderedOptions = options.map( option => (
+			<div
+				sx={ {
+					display: 'flex',
+					alignItems: 'center',
+					minHeight: theme => `${ theme.space[ 4 ] - theme.space[ 2 ] }px`,
+				} }
+				key={ option.id }
+				className={ classNames(
+					'vip-radio-component-item',
+					`vip-radio-component-item-${ option.id }`
+				) }
+			>
+				<input
+					type="radio"
+					id={ option.id }
+					name={ name }
+					value={ `${ option.value }` }
+					sx={ inputStyle }
+					onChange={ onChange }
+					className={ classNames( 'vip-radio-component-item-input', option?.className ) }
+					checked={ `${ option.value }` === `${ defaultValue }` }
+				/>
+
+				{ typeof option.label === 'string' ? (
+					<Label
+						className={ classNames( 'vip-radio-component-item-label', option?.className ) }
+						htmlFor={ option.id }
+						sx={ labelStyle }
+					>
+						{ option.label }
+					</Label>
+				) : (
+					<CustomLabel>{ option.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.array,
+	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( 'a' );
 
 	return (
 		<Form.Root>
@@ -35,30 +38,51 @@ 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: 'primary' } }
+									>
+										(Custom) All domains listed on this environment, and all subdomains
+									</Label>
+								),
+								id: 'option-custom-a',
+							},
+							{
+								value: 'b',
+								label: 'All domains listed on this environment',
+								className: 'custom-class-for-this',
+								id: 'option-custom-b',
+							},
+						] }
+						onChange={ e => setChecked2( e.target.value ) }
 					/>
-
-					<Label id="exclude-subdomains" htmlFor="include-subdomains-opt" sx={ { mb: 0 } }>
-						All domains listed on this environment
-					</Label>
 				</Flex>
 			</fieldset>
 		</Form.Root>

package/src/system/NewForm/FormAutocomplete.js

@@ -15,6 +15,7 @@ import css from './FormAutocomplete.css';
 import { FormSelectContent } from './FormSelectContent';
 import { FormSelectArrow } from './FormSelectArrow';
 import { Label } from '../Form/Label';
+import { FormSelectSearch } from './FormSelectSearch';
 
 const defaultStyles = {
 	width: '100%',
@@ -59,15 +60,37 @@ const defaultStyles = {
 	'& .autocomplete__wrapper': {
 		width: '100%',
 	},
+	'& .autocomplete__option': {
+		borderColor: 'borders.2',
+	},
+	'& .autocomplete__option--odd': {
+		bg: 'backgroundSecondary',
+	},
+	'& .autocomplete__option:hover, & .autocomplete__option--focused': {
+		bg: 'midnight',
+		borderColor: 'midnight',
+	},
 	'& .autocomplete__input--show-all-values': {
 		paddingRight: 0,
 	},
+	'& .autocomplete__hint': {
+		border: 'none',
+		paddingLeft: 3,
+		minHeight: '27px',
+		lineHeight: '27px',
+	},
 };
 
 const inlineStyles = {
 	borderWidth: 0,
 };
 
+const searchIconStyles = {
+	'& .autocomplete__input.autocomplete__input--show-all-values': {
+		paddingLeft: '30px',
+	},
+};
+
 const FormAutocomplete = React.forwardRef(
 	(
 		{
@@ -78,9 +101,12 @@ const FormAutocomplete = React.forwardRef(
 			getOptionLabel,
 			getOptionValue,
 			onChange = () => {},
+			onInputChange,
 			value,
 			showAllValues = true,
+			searchIcon = false,
 			displayMenu = 'overlay',
+			noOptionsMessage = () => 'No results found.',
 			id = 'vip-autocomplete',
 			className,
 			...props
@@ -122,13 +148,19 @@ const FormAutocomplete = React.forwardRef(
 			[ onChange, getOptionByLabel ]
 		);
 
+		const handleTypeChange = useCallback(
+			query =>
+				options.filter(
+					option => optionLabel( option ).toLowerCase().indexOf( query.toLowerCase() ) >= 0
+				),
+			[ options ]
+		);
+
 		const suggest = useCallback(
 			( query, populateResults ) => {
 				let data = options;
 				if ( isDirty ) {
-					data = options.filter(
-						option => optionLabel( option ).toLowerCase().indexOf( query.toLowerCase() ) >= 0
-					);
+					data = onInputChange ? onInputChange( query ) : handleTypeChange( query );
 				}
 				populateResults( data.map( option => optionLabel( option ) ) );
 			},
@@ -157,11 +189,18 @@ const FormAutocomplete = React.forwardRef(
 			<div className={ classNames( 'vip-form-autocomplete-component', className ) }>
 				{ label && ! isInline && <SelectLabel /> }
 
-				<div sx={ { ...defaultStyles, ...( isInline && inlineStyles ) } }>
+				<div
+					sx={ {
+						...defaultStyles,
+						...( isInline && inlineStyles ),
+						...( searchIcon && searchIconStyles ),
+					} }
+				>
 					<FormSelectContent
 						isInline={ inlineLabel }
 						label={ inlineLabel ? <SelectLabel /> : null }
 					>
+						{ searchIcon && <FormSelectSearch /> }
 						<Autocomplete
 							id={ id }
 							showAllValues={ showAllValues }
@@ -170,6 +209,7 @@ const FormAutocomplete = React.forwardRef(
 							defaultValue={ value }
 							displayMenu={ displayMenu }
 							onConfirm={ onValueChange }
+							tNoResults={ noOptionsMessage }
 							{ ...props }
 						/>
 						<FormSelectArrow />
@@ -183,6 +223,7 @@ const FormAutocomplete = React.forwardRef(
 FormAutocomplete.propTypes = {
 	id: PropTypes.string,
 	showAllValues: PropTypes.bool,
+	searchIcon: PropTypes.bool,
 	isInline: PropTypes.bool,
 	forLabel: PropTypes.string,
 	value: PropTypes.string,
@@ -191,6 +232,8 @@ FormAutocomplete.propTypes = {
 	options: PropTypes.array,
 	getOptionLabel: PropTypes.func,
 	getOptionValue: PropTypes.func,
+	onInputChange: PropTypes.func,
+	noOptionsMessage: PropTypes.func,
 	onChange: PropTypes.func,
 	className: PropTypes.any,
 };

package/src/system/NewForm/FormAutocomplete.stories.jsx

@@ -74,3 +74,30 @@ export const WithDefaultValue = () => {
 		</>
 	);
 };
+
+export const WithSearchIcon = () => {
+	const customArgs = {
+		...args,
+		searchIcon: true,
+	};
+
+	return (
+		<>
+			<DefaultComponent { ...customArgs } />
+		</>
+	);
+};
+
+export const WithCustomMessages = () => {
+	const customArgs = {
+		...args,
+		noOptionsMessage: () => 'No data',
+		placeholder: 'Type to search',
+	};
+
+	return (
+		<>
+			<DefaultComponent { ...customArgs } />
+		</>
+	);
+};

package/src/system/NewForm/FormSelectSearch.js

@@ -0,0 +1,24 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { MdSearch } from 'react-icons/md';
+
+export const FormSelectSearch = React.forwardRef( ( props, forwardRef ) => (
+	<MdSearch
+		ref={ forwardRef }
+		aria-hidden="true"
+		size={ 24 }
+		sx={ {
+			position: 'absolute',
+			paddingRight: 2,
+			left: 2,
+			pointerEvents: 'none',
+		} }
+		{ ...props }
+	/>
+) );
+
+FormSelectSearch.displayName = 'FormSelectSearch';