@automattic/vip-design-system 0.25.0 → 0.26.0

package/build/system/NewForm/FormAutocomplete.css

@@ -0,0 +1,166 @@
+.autocomplete__wrapper {
+  position: relative;
+}
+
+.autocomplete__hint,
+.autocomplete__input {
+  -webkit-appearance: none;
+  border: 2px solid #0b0c0c;
+  border-radius: 0; /* Safari 10 on iOS adds implicit border rounding. */
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  margin-bottom: 0; /* BUG: Safari 10 on macOS seems to add an implicit margin. */
+  width: 100%;
+}
+
+.autocomplete__input {
+  background-color: transparent;
+  position: relative;
+}
+
+.autocomplete__hint {
+  color: #b1b4b6;
+  position: absolute;
+}
+
+.autocomplete__input--default {
+  padding: 5px;
+}
+.autocomplete__input--focused {
+  outline: 3px solid #fd0;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 2px;
+}
+
+.autocomplete__input--show-all-values {
+  padding: 5px 34px 5px 5px; /* Space for arrow. Other padding should match .autocomplete__input--default. */
+  cursor: pointer;
+}
+
+.autocomplete__dropdown-arrow-down {
+  z-index: -1;
+  display: inline-block;
+  position: absolute;
+  right: 8px;
+  width: 24px;
+  height: 24px;
+  top: 10px;
+}
+
+.autocomplete__menu {
+  background-color: #fff;
+  border: 2px solid #0B0C0C;
+  border-top: 0;
+  color: #0B0C0C;
+  margin: 0;
+  max-height: 342px;
+  overflow-x: hidden;
+  padding: 0;
+  width: 100%;
+  width: calc(100% - 4px);
+}
+
+.autocomplete__menu--visible {
+  display: block;
+}
+
+.autocomplete__menu--hidden {
+  display: none;
+}
+
+.autocomplete__menu--overlay {
+  box-shadow: rgba(0, 0, 0, 0.256863) 0px 2px 6px;
+  left: 0;
+  position: absolute;
+  top: 100%;
+  z-index: 100;
+}
+
+.autocomplete__menu--inline {
+  position: relative;
+}
+
+.autocomplete__option {
+  border-bottom: solid #b1b4b6;
+  border-width: 1px 0;
+  cursor: pointer;
+  display: block;
+  position: relative;
+}
+
+.autocomplete__option > * {
+  pointer-events: none;
+}
+
+.autocomplete__option:first-of-type {
+  border-top-width: 0;
+}
+
+.autocomplete__option:last-of-type {
+  border-bottom-width: 0;
+}
+
+.autocomplete__option--odd {
+  background-color: #FAFAFA;
+}
+
+.autocomplete__option--focused,
+.autocomplete__option:hover {
+  background-color: #1d70b8;
+  border-color: #1d70b8;
+  color: white;
+  outline: none;
+}
+
+@media (-ms-high-contrast: active), (forced-colors: active) {
+  .autocomplete__menu {
+    border-color: FieldText;
+  }
+
+  .autocomplete__option {
+    background-color: Field;
+    color: FieldText;
+  }
+
+  .autocomplete__option--focused,
+  .autocomplete__option:hover {
+    forced-color-adjust: none; /* prevent backplate from obscuring text */
+    background-color: Highlight;
+    border-color: Highlight;
+    color: HighlightText;
+
+    /* Prefer SelectedItem / SelectedItemText in browsers that support it */
+    background-color: SelectedItem;
+    border-color: SelectedItem;
+    color: SelectedItemText;
+    outline-color: SelectedItemText;
+  }
+}
+
+.autocomplete__option--no-results {
+  background-color: #FAFAFA;
+  color: #646b6f;
+  cursor: not-allowed;
+}
+
+.autocomplete__hint,
+.autocomplete__input,
+.autocomplete__option {
+  font-size: 16px;
+  line-height: 1.25;
+}
+
+.autocomplete__hint,
+.autocomplete__option {
+  padding: 5px;
+}
+
+@media (min-width: 641px) {
+  .autocomplete__hint,
+  .autocomplete__input,
+  .autocomplete__option {
+    font-size: 19px;
+    line-height: 1.31579;
+  }
+}

package/build/system/NewForm/FormAutocomplete.js

@@ -7,6 +7,8 @@ exports.FormAutocomplete = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -25,19 +27,12 @@ var _FormSelectArrow = require("./FormSelectArrow");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+var _excluded = ["isInline", "forLabel", "options", "label", "getOptionLabel", "getOptionValue", "onChange", "value", "showAllValues", "displayMenu", "id"];
+
 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; }
 
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
 var defaultStyles = {
   width: '100%',
   py: 0,
@@ -114,15 +109,18 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       forLabel = _ref.forLabel,
       options = _ref.options,
       label = _ref.label,
+      getOptionLabel = _ref.getOptionLabel,
       getOptionValue = _ref.getOptionValue,
-      onChange = _ref.onChange,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
       value = _ref.value,
       _ref$showAllValues = _ref.showAllValues,
       showAllValues = _ref$showAllValues === void 0 ? true : _ref$showAllValues,
       _ref$displayMenu = _ref.displayMenu,
       displayMenu = _ref$displayMenu === void 0 ? 'overlay' : _ref$displayMenu,
       _ref$id = _ref.id,
-      id = _ref$id === void 0 ? 'vip-autocomplete' : _ref$id;
+      id = _ref$id === void 0 ? 'vip-autocomplete' : _ref$id,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
 
   var SelectLabel = function SelectLabel() {
     return (0, _jsxRuntime.jsx)(_Label.Label, {
@@ -132,9 +130,9 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
   };
 
   var inlineLabel = !!(isInline && label);
-  var optionValue = (0, _react.useCallback)(function (option) {
-    return getOptionValue ? getOptionValue(option) : option.value;
-  }, [getOptionValue]);
+  var optionLabel = (0, _react.useCallback)(function (option) {
+    return getOptionLabel ? getOptionLabel(option) : option.label;
+  }, [getOptionLabel]);
   var getAllOptions = (0, _react.useMemo)(function () {
     return [].concat(options.filter(function (option) {
       return !option.options;
@@ -146,22 +144,22 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       return a.concat(b);
     }, []);
   }, [options]);
-  var getOptionByValue = (0, _react.useCallback)(function (inputValue) {
+  var getOptionByLabel = (0, _react.useCallback)(function (inputValue) {
     return getAllOptions.find(function (option) {
-      return "" + optionValue(option) === "" + inputValue;
+      return "" + optionLabel(option) === "" + inputValue;
     });
-  }, [getAllOptions, optionValue]);
+  }, [getAllOptions, optionLabel]);
   var onValueChange = (0, _react.useCallback)(function (inputValue) {
-    if (onChange) {
-      onChange(getOptionByValue(inputValue));
+    if (inputValue) {
+      onChange(getOptionByLabel(inputValue), inputValue);
     }
-  }, [onChange, getOptionByValue]);
+  }, [onChange, getOptionByLabel]);
   var suggest = (0, _react.useCallback)(function (query, populateResults) {
     var data = options.filter(function (option) {
-      return option.label.toLowerCase().indexOf(query.toLowerCase()) >= 0;
+      return optionLabel(option).toLowerCase().indexOf(query.toLowerCase()) >= 0;
     });
     populateResults(data.map(function (option) {
-      return option.label;
+      return optionLabel(option);
     }));
   }, [options]);
   (0, _react.useEffect)(function () {
@@ -176,7 +174,7 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       children: (0, _jsxRuntime.jsxs)(_FormSelectContent.FormSelectContent, {
         isInline: inlineLabel,
         label: inlineLabel ? (0, _jsxRuntime.jsx)(SelectLabel, {}) : null,
-        children: [(0, _jsxRuntime.jsx)(_react2["default"], {
+        children: [(0, _jsxRuntime.jsx)(_react2["default"], (0, _extends2["default"])({
           id: id,
           showAllValues: showAllValues,
           ref: forwardRef,
@@ -184,7 +182,7 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
           defaultValue: value,
           displayMenu: displayMenu,
           onConfirm: onValueChange
-        }), (0, _jsxRuntime.jsx)(_FormSelectArrow.FormSelectArrow, {})]
+        }, props)), (0, _jsxRuntime.jsx)(_FormSelectArrow.FormSelectArrow, {})]
       })
     })]
   });
@@ -200,6 +198,7 @@ FormAutocomplete.propTypes = {
   displayMenu: _propTypes["default"].string,
   label: _propTypes["default"].string,
   options: _propTypes["default"].array,
+  getOptionLabel: _propTypes["default"].func,
   getOptionValue: _propTypes["default"].func,
   onChange: _propTypes["default"].func
 };

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

@@ -9,13 +9,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _react = require("react");
-
 var Form = _interopRequireWildcard(require("."));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["label", "width", "onChange"];
+var _excluded = ["label", "width"];
 
 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); }
 
@@ -45,7 +43,7 @@ var _default = {
   }
 };
 exports["default"] = _default;
-var defaultOptions = [{
+var options = [{
   value: 'chocolate',
   label: 'Chocolate'
 }, {
@@ -54,14 +52,17 @@ var defaultOptions = [{
 }, {
   value: 'vanilla',
   label: 'Vanilla'
-}]; // eslint-disable-next-line react/prop-types
+}];
+var args = {
+  label: 'Label',
+  options: options
+}; // eslint-disable-next-line react/prop-types
 
 var DefaultComponent = function DefaultComponent(_ref) {
   var _ref$label = _ref.label,
       label = _ref$label === void 0 ? 'Label' : _ref$label,
       _ref$width = _ref.width,
       width = _ref$width === void 0 ? 250 : _ref$width,
-      onChange = _ref.onChange,
       rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: (0, _jsxRuntime.jsx)(Form.Root, {
@@ -71,8 +72,7 @@ var DefaultComponent = function DefaultComponent(_ref) {
         },
         children: (0, _jsxRuntime.jsx)(Form.Autocomplete, (0, _extends2["default"])({
           id: "form-autocomplete",
-          label: label,
-          onChange: onChange
+          label: label
         }, rest))
       })
     })
@@ -80,47 +80,19 @@ var DefaultComponent = function DefaultComponent(_ref) {
 };
 
 var Default = function Default() {
-  var _useState = (0, _react.useState)(defaultOptions),
-      options = _useState[0],
-      setOptions = _useState[1];
-
-  var onChange = (0, _react.useCallback)(function (value) {
-    setOptions(defaultOptions.filter(function (option) {
-      return !value || option.label.toLowerCase().indexOf(value.toLowerCase()) >= 0;
-    }));
-  });
-  var args = {
-    label: 'Label',
-    options: options
-  };
   return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({
-      onChange: onChange
-    }, args))
+    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, args))
   });
 };
 
 exports.Default = Default;
 
 var Inline = function Inline() {
-  var _useState2 = (0, _react.useState)(defaultOptions),
-      options = _useState2[0],
-      setOptions = _useState2[1];
-
-  var onChange = (0, _react.useCallback)(function (value) {
-    setOptions(defaultOptions.filter(function (option) {
-      return !value || option.label.toLowerCase().indexOf(value.toLowerCase()) >= 0;
-    }));
+  var customArgs = (0, _extends2["default"])({}, args, {
+    isInline: true
   });
-  var args = {
-    label: 'Label',
-    options: options
-  };
   return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({
-      isInline: true,
-      onChange: onChange
-    }, args))
+    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, customArgs))
   });
 };
 

package/build/system/NewTabs/Tabs.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.NewTabs = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var TabsPrimitive = _interopRequireWildcard(require("@radix-ui/react-tabs"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+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; }
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var NewTabs = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      _ref$onValueChange = _ref.onValueChange,
+      onValueChange = _ref$onValueChange === void 0 ? undefined : _ref$onValueChange,
+      _ref$defaultValue = _ref.defaultValue,
+      defaultValue = _ref$defaultValue === void 0 ? undefined : _ref$defaultValue,
+      _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,
+    defaultValue: defaultValue,
+    onValueChange: onValueChange,
+    className: (0, _classnames["default"])('vip-tabs-component', className),
+    sx: (0, _extends2["default"])({}, sx),
+    children: children
+  });
+});
+
+exports.NewTabs = NewTabs;
+NewTabs.propTypes = {
+  className: _propTypes["default"].any,
+  sx: _propTypes["default"].object,
+  defaultValue: _propTypes["default"].node,
+  onValueChange: _propTypes["default"].func,
+  children: _propTypes["default"].node.isRequired
+};
+NewTabs.displayName = 'NewTabs';

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

@@ -0,0 +1,55 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'NewTabs',
+  component: _.NewTabs
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsxs)(_.NewTabs, {
+    defaultValue: "all",
+    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: "All content"
+      })
+    }), (0, _jsxRuntime.jsx)(_.TabsContent, {
+      value: "live",
+      children: "Live content"
+    }), (0, _jsxRuntime.jsx)(_.TabsContent, {
+      value: "dev",
+      children: (0, _jsxRuntime.jsx)(_.Text, {
+        children: "In Development content"
+      })
+    })]
+  });
+};
+
+exports.Default = Default;

package/build/system/NewTabs/TabsContent.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.TabsContent = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var TabsPrimitive = _interopRequireWildcard(require("@radix-ui/react-tabs"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+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; }
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var TabsContent = function TabsContent(_ref) {
+  var value = _ref.value,
+      sx = _ref.sx,
+      children = _ref.children;
+  return (0, _jsxRuntime.jsx)(TabsPrimitive.Content, {
+    className: (0, _classnames["default"])('vip-tabs-content', "vip-tabs-content-" + value),
+    value: value,
+    sx: (0, _extends2["default"])({
+      mt: 4
+    }, sx),
+    children: children
+  });
+};
+
+exports.TabsContent = TabsContent;
+TabsContent.propTypes = {
+  sx: _propTypes["default"].object,
+  value: _propTypes["default"].string,
+  children: _propTypes["default"].node.isRequired
+};

package/build/system/NewTabs/TabsList.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.TabsList = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var TabsPrimitive = _interopRequireWildcard(require("@radix-ui/react-tabs"));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+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; }
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var TabsList = function TabsList(_ref) {
+  var children = _ref.children,
+      title = _ref.title,
+      sx = _ref.sx;
+  return (0, _jsxRuntime.jsx)(TabsPrimitive.List, {
+    sx: (0, _extends2["default"])({
+      borderBottom: '1px solid',
+      borderColor: 'border',
+      display: 'flex'
+    }, sx),
+    title: title,
+    children: children
+  });
+};
+
+exports.TabsList = TabsList;
+TabsList.propTypes = {
+  sx: _propTypes["default"].object,
+  title: _propTypes["default"].string.isRequired,
+  children: _propTypes["default"].node.isRequired
+};

package/build/system/NewTabs/TabsTrigger.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.TabsTrigger = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var TabsPrimitive = _interopRequireWildcard(require("@radix-ui/react-tabs"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+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; }
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var styles = {
+  cursor: 'pointer',
+  background: 'none',
+  mr: 3,
+  fontSize: 2,
+  px: 0,
+  pb: 3,
+  border: 'none',
+  color: 'muted',
+  '&[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;
+    }
+  },
+  '&:disabled': {
+    color: 'grey.70'
+  },
+  ':hover': {
+    fontWeight: 'body',
+    color: 'heading'
+  },
+  '&:focus': function focus(theme) {
+    return theme.outline;
+  },
+  '&:focus-visible': function focusVisible(theme) {
+    return theme.outline;
+  }
+};
+
+var TabsTrigger = function TabsTrigger(_ref) {
+  var value = _ref.value,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      sx = _ref.sx,
+      children = _ref.children;
+  return (0, _jsxRuntime.jsx)(TabsPrimitive.TabsTrigger, {
+    className: (0, _classnames["default"])('vip-tabs-trigger', "vip-tabs-trigger-" + value),
+    value: value,
+    disabled: disabled,
+    sx: (0, _extends2["default"])({}, styles, sx),
+    children: children
+  });
+};
+
+exports.TabsTrigger = TabsTrigger;
+TabsTrigger.propTypes = {
+  sx: _propTypes["default"].object,
+  value: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  children: _propTypes["default"].node.isRequired
+};

package/build/system/NewTabs/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+exports.__esModule = true;
+
+var _Tabs = require("./Tabs");
+
+exports.NewTabs = _Tabs.NewTabs;
+
+var _TabsTrigger = require("./TabsTrigger");
+
+exports.TabsTrigger = _TabsTrigger.TabsTrigger;
+
+var _TabsList = require("./TabsList");
+
+exports.TabsList = _TabsList.TabsList;
+
+var _TabsContent = require("./TabsContent");
+
+exports.TabsContent = _TabsContent.TabsContent;

package/build/system/ResourceList/ResourceList.js

@@ -9,8 +9,6 @@ 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");
@@ -53,7 +51,7 @@ var StyledListItem = function StyledListItem(props) {
     sx: {
       py: 2,
       borderBottom: '1px solid',
-      borderColor: 'borders.2',
+      borderColor: 'border',
       listStyleType: 'none',
       margin: 0,
       px: 0
@@ -87,37 +85,6 @@ var ResourceList = function ResourceList(_ref) {
     });
   };
 
-  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: {
@@ -126,7 +93,31 @@ var ResourceList = function ResourceList(_ref) {
       p: 0
     },
     className: "vip-resource-list-component",
-    children: groupedByDay ? renderGoupedItems(groupedItems) : renderItemList(items)
+    children: groupedByDay ? Object.keys(groupedItems).map(function (groupName, index) {
+      return (0, _jsxRuntime.jsxs)(_.Box, {
+        sx: {
+          mb: 4
+        },
+        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);
+    }) : renderItemList(items)
   });
 };
 

package/build/system/ResourceList/ResourceList.stories.js

@@ -129,7 +129,6 @@ var Grouped = function Grouped() {
                 children: "#443"
               })]
             }), (0, _jsxRuntime.jsxs)(_.Text, {
-              as: "div",
               sx: {
                 mb: 0,
                 fontSize: 1,
@@ -338,7 +337,6 @@ var Relative = function Relative() {
                 children: "Running"
               })]
             }), (0, _jsxRuntime.jsxs)(_.Text, {
-              as: "div",
               sx: {
                 mb: 0,
                 color: 'muted',

package/build/system/index.js

@@ -154,6 +154,13 @@ exports.Wizard = _Wizard.Wizard;
 exports.WizardStep = _Wizard.WizardStep;
 exports.WizardStepHorizontal = _Wizard.WizardStepHorizontal;
 
+var _NewTabs = require("./NewTabs");
+
+exports.NewTabs = _NewTabs.NewTabs;
+exports.TabsList = _NewTabs.TabsList;
+exports.TabsContent = _NewTabs.TabsContent;
+exports.TabsTrigger = _NewTabs.TabsTrigger;
+
 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; }

package/package.json

@@ -1,11 +1,11 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.25.0",
+	"version": "0.26.0",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",
 		"prepare": "npm run build",
-		"build": "npm run theme-update && cross-env NODE_ENV=production babel src --out-dir build && npm run theme-builder-copy",
+		"build": "npm run theme-update && cross-env NODE_ENV=production babel src --out-dir build --copy-files && npm run theme-builder-copy",
 		"format": "prettier --write \"src/**/*.{js,ts,tsx,md,mdx,json}\"",
 		"format:check": "prettier --list-different -- \"src/system/**/*.{js,ts,tsx,md,mdx,json}\"",
 		"jest": "NODE_ENV=test jest --detectOpenHandles --env=jsdom",
@@ -28,6 +28,7 @@
 		"@radix-ui/react-switch": "^1.0.0",
 		"@radix-ui/react-tooltip": "^1.0.0",
 		"@radix-ui/react-visually-hidden": "^1.0.0",
+		"@radix-ui/react-tabs": "^1.0.0",
 		"@storybook/addon-storysource": "^6.5.10",
 		"accessible-autocomplete": "^2.0.4",
 		"babel-loader": "^8.2.2",

package/src/system/NewForm/FormAutocomplete.js

@@ -74,12 +74,14 @@ const FormAutocomplete = React.forwardRef(
 			forLabel,
 			options,
 			label,
+			getOptionLabel,
 			getOptionValue,
-			onChange,
+			onChange = () => {},
 			value,
 			showAllValues = true,
 			displayMenu = 'overlay',
 			id = 'vip-autocomplete',
+			...props
 		},
 		forwardRef
 	) => {
@@ -87,9 +89,9 @@ const FormAutocomplete = React.forwardRef(
 
 		const inlineLabel = !! ( isInline && label );
 
-		const optionValue = useCallback(
-			option => ( getOptionValue ? getOptionValue( option ) : option.value ),
-			[ getOptionValue ]
+		const optionLabel = useCallback(
+			option => ( getOptionLabel ? getOptionLabel( option ) : option.label ),
+			[ getOptionLabel ]
 		);
 
 		const getAllOptions = useMemo(
@@ -101,27 +103,27 @@ const FormAutocomplete = React.forwardRef(
 			[ options ]
 		);
 
-		const getOptionByValue = useCallback(
+		const getOptionByLabel = useCallback(
 			inputValue =>
-				getAllOptions.find( option => `${ optionValue( option ) }` === `${ inputValue }` ),
-			[ getAllOptions, optionValue ]
+				getAllOptions.find( option => `${ optionLabel( option ) }` === `${ inputValue }` ),
+			[ getAllOptions, optionLabel ]
 		);
 
 		const onValueChange = useCallback(
 			inputValue => {
-				if ( onChange ) {
-					onChange( getOptionByValue( inputValue ) );
+				if ( inputValue ) {
+					onChange( getOptionByLabel( inputValue ), inputValue );
 				}
 			},
-			[ onChange, getOptionByValue ]
+			[ onChange, getOptionByLabel ]
 		);
 
 		const suggest = useCallback(
 			( query, populateResults ) => {
 				const data = options.filter(
-					option => option.label.toLowerCase().indexOf( query.toLowerCase() ) >= 0
+					option => optionLabel( option ).toLowerCase().indexOf( query.toLowerCase() ) >= 0
 				);
-				populateResults( data.map( option => option.label ) );
+				populateResults( data.map( option => optionLabel( option ) ) );
 			},
 			[ options ]
 		);
@@ -155,6 +157,7 @@ const FormAutocomplete = React.forwardRef(
 							defaultValue={ value }
 							displayMenu={ displayMenu }
 							onConfirm={ onValueChange }
+							{ ...props }
 						/>
 						<FormSelectArrow />
 					</FormSelectContent>
@@ -173,6 +176,7 @@ FormAutocomplete.propTypes = {
 	displayMenu: PropTypes.string,
 	label: PropTypes.string,
 	options: PropTypes.array,
+	getOptionLabel: PropTypes.func,
 	getOptionValue: PropTypes.func,
 	onChange: PropTypes.func,
 };

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

@@ -3,7 +3,6 @@
 /**
  * Internal dependencies
  */
-import { useCallback, useState } from 'react';
 import * as Form from '.';
 
 export default {
@@ -20,70 +19,45 @@ export default {
 	},
 };
 
-const defaultOptions = [
+const options = [
 	{ value: 'chocolate', label: 'Chocolate' },
 	{ value: 'strawberry', label: 'Strawberry Chocolate Vanilla Chocolate Vanilla' },
 	{ value: 'vanilla', label: 'Vanilla' },
 ];
 
+const args = {
+	label: 'Label',
+	options,
+};
+
 // eslint-disable-next-line react/prop-types
-const DefaultComponent = ( { label = 'Label', width = 250, onChange, ...rest } ) => (
+const DefaultComponent = ( { label = 'Label', width = 250, ...rest } ) => (
 	<>
 		<Form.Root>
 			<div sx={ { width } }>
-				<Form.Autocomplete
-					id="form-autocomplete"
-					label={ label }
-					onChange={ onChange }
-					{ ...rest }
-				/>
+				<Form.Autocomplete id="form-autocomplete" label={ label } { ...rest } />
 			</div>
 		</Form.Root>
 	</>
 );
 
 export const Default = () => {
-	const [ options, setOptions ] = useState( defaultOptions );
-
-	const onChange = useCallback( value => {
-		setOptions(
-			defaultOptions.filter(
-				option => ! value || option.label.toLowerCase().indexOf( value.toLowerCase() ) >= 0
-			)
-		);
-	} );
-
-	const args = {
-		label: 'Label',
-		options,
-	};
-
 	return (
 		<>
-			<DefaultComponent onChange={ onChange } { ...args } />
+			<DefaultComponent { ...args } />
 		</>
 	);
 };
 
 export const Inline = () => {
-	const [ options, setOptions ] = useState( defaultOptions );
-
-	const onChange = useCallback( value => {
-		setOptions(
-			defaultOptions.filter(
-				option => ! value || option.label.toLowerCase().indexOf( value.toLowerCase() ) >= 0
-			)
-		);
-	} );
-
-	const args = {
-		label: 'Label',
-		options,
+	const customArgs = {
+		...args,
+		isInline: true,
 	};
 
 	return (
 		<>
-			<DefaultComponent isInline={ true } onChange={ onChange } { ...args } />
+			<DefaultComponent { ...customArgs } />
 		</>
 	);
 };

package/src/system/NewTabs/Tabs.js

@@ -0,0 +1,44 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import React from 'react';
+
+/**
+ * Internal dependencies
+ */
+
+const NewTabs = React.forwardRef(
+	(
+		{ children, onValueChange = undefined, defaultValue = undefined, className = null, sx = {} },
+		ref
+	) => {
+		return (
+			<TabsPrimitive.Root
+				ref={ ref }
+				defaultValue={ defaultValue }
+				onValueChange={ onValueChange }
+				className={ classNames( 'vip-tabs-component', className ) }
+				sx={ { ...sx } }
+			>
+				{ children }
+			</TabsPrimitive.Root>
+		);
+	}
+);
+
+NewTabs.propTypes = {
+	className: PropTypes.any,
+	sx: PropTypes.object,
+	defaultValue: PropTypes.node,
+	onValueChange: PropTypes.func,
+	children: PropTypes.node.isRequired,
+};
+
+NewTabs.displayName = 'NewTabs';
+
+export { NewTabs };

package/src/system/NewTabs/Tabs.stories.jsx

@@ -0,0 +1,29 @@
+/**
+ * Internal dependencies
+ */
+import { NewTabs, TabsTrigger, TabsList, TabsContent, Text } from '..';
+
+export default {
+	title: 'NewTabs',
+	component: NewTabs,
+};
+
+export const Default = () => (
+	<NewTabs defaultValue="all">
+		<TabsList title="See all the content">
+			<TabsTrigger value="all">All (5)</TabsTrigger>
+			<TabsTrigger value="live">Live (2)</TabsTrigger>
+			<TabsTrigger value="dev">In Development (3)</TabsTrigger>
+			<TabsTrigger value="protect" disabled={ true }>
+				Not accessible
+			</TabsTrigger>
+		</TabsList>
+		<TabsContent value="all">
+			<Text>All content</Text>
+		</TabsContent>
+		<TabsContent value="live">Live content</TabsContent>
+		<TabsContent value="dev">
+			<Text>In Development content</Text>
+		</TabsContent>
+	</NewTabs>
+);

package/src/system/NewTabs/TabsContent.js

@@ -0,0 +1,33 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+
+const TabsContent = ( { value, sx, children } ) => (
+	<TabsPrimitive.Content
+		className={ classNames( 'vip-tabs-content', `vip-tabs-content-${ value }` ) }
+		value={ value }
+		sx={ {
+			mt: 4,
+			...sx,
+		} }
+	>
+		{ children }
+	</TabsPrimitive.Content>
+);
+
+TabsContent.propTypes = {
+	sx: PropTypes.object,
+	value: PropTypes.string,
+	children: PropTypes.node.isRequired,
+};
+
+export { TabsContent };

package/src/system/NewTabs/TabsList.js

@@ -0,0 +1,33 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+/**
+ * Internal dependencies
+ */
+
+const TabsList = ( { children, title, sx } ) => (
+	<TabsPrimitive.List
+		sx={ {
+			borderBottom: '1px solid',
+			borderColor: 'border',
+			display: 'flex',
+			...sx,
+		} }
+		title={ title }
+	>
+		{ children }
+	</TabsPrimitive.List>
+);
+
+TabsList.propTypes = {
+	sx: PropTypes.object,
+	title: PropTypes.string.isRequired,
+	children: PropTypes.node.isRequired,
+};
+
+export { TabsList };

package/src/system/NewTabs/TabsTrigger.js

@@ -0,0 +1,57 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+
+const styles = {
+	cursor: 'pointer',
+	background: 'none',
+	mr: 3,
+	fontSize: 2,
+	px: 0,
+	pb: 3,
+	border: 'none',
+	color: 'muted',
+	'&[data-state="active"]': {
+		color: 'heading',
+		fontWeight: 'body',
+		boxShadow: theme => `inset 0 -1px 0 0 ${ theme.colors.link }, 0 1px 0 0 ${ theme.colors.link }`,
+	},
+	'&:disabled': {
+		color: 'grey.70',
+	},
+	':hover': { fontWeight: 'body', color: 'heading' },
+	'&:focus': theme => theme.outline,
+	'&:focus-visible': theme => theme.outline,
+};
+
+const TabsTrigger = ( { value, disabled = false, sx, children } ) => (
+	<TabsPrimitive.TabsTrigger
+		className={ classNames( 'vip-tabs-trigger', `vip-tabs-trigger-${ value }` ) }
+		value={ value }
+		disabled={ disabled }
+		sx={ {
+			...styles,
+			...sx,
+		} }
+	>
+		{ children }
+	</TabsPrimitive.TabsTrigger>
+);
+
+TabsTrigger.propTypes = {
+	sx: PropTypes.object,
+	value: PropTypes.string,
+	disabled: PropTypes.bool,
+	children: PropTypes.node.isRequired,
+};
+
+export { TabsTrigger };

package/src/system/NewTabs/index.js

@@ -0,0 +1,9 @@
+/**
+ * Internal dependencies
+ */
+import { NewTabs } from './Tabs';
+import { TabsTrigger } from './TabsTrigger';
+import { TabsList } from './TabsList';
+import { TabsContent } from './TabsContent';
+
+export { NewTabs, TabsList, TabsTrigger, TabsContent };

package/src/system/index.js

@@ -55,6 +55,7 @@ import { TabItem, Tabs } from './Tabs';
 import { Text } from './Text';
 import theme from './theme';
 import { Wizard, WizardStep, WizardStepHorizontal } from './Wizard';
+import { NewTabs, TabsList, TabsContent, TabsTrigger } from './NewTabs';
 
 export {
 	Accordion,
@@ -103,6 +104,10 @@ export {
 	ToggleRow,
 	ToggleGroup,
 	TabItem,
+	NewTabs,
+	TabsTrigger,
+	TabsContent,
+	TabsList,
 	Time,
 	Timeline,
 	Validation,