newspack-components 4.3.0 → 4.4.0-alpha.1

package/dist/cjs/category-autocomplete/index.js

@@ -4,7 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
 var _components = require("@wordpress/components");
 var _element = require("@wordpress/element");
@@ -16,174 +22,188 @@ var _find = _interopRequireDefault(require("lodash/find"));
 var _filter = _interopRequireDefault(require("lodash/filter"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
-/**
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * Category Autocomplete
- */
-
-/**
+ */ /**
  * WordPress dependencies.
- */
-
-/**
+ */ /**
  * Internal dependencies.
- */
-
-/**
+ */ /**
  * External dependencies
- */
-
-/**
+ */ /**
  * Category autocomplete field component.
- */class CategoryAutocomplete extends _element.Component {
-  state = {
-    suggestions: {},
-    allCategories: {},
-    isLoading: false
-  };
-
+ */
+var CategoryAutocomplete = /*#__PURE__*/function (_Component) {
   /**
    * Class constructor.
    */
-  constructor(props) {
-    super(props);
-    this.debouncedUpdateSuggestions = (0, _debounce.default)(this.updateSuggestions, 100);
-  }
-  componentDidMount() {
-    this.setState({
-      isLoading: true
-    });
-    (0, _apiFetch.default)({
-      path: (0, _url.addQueryArgs)(`/wp/v2/${this.props.taxonomy}`, {
-        per_page: -1,
-        _fields: 'id,name'
-      })
-    }).then(categories => this.setState({
-      allCategories: categories
-    })).finally(() => this.setState({
+  function CategoryAutocomplete(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, CategoryAutocomplete);
+    _this = _callSuper(this, CategoryAutocomplete, [props]);
+    (0, _defineProperty2["default"])(_this, "state", {
+      suggestions: {},
+      allCategories: {},
       isLoading: false
-    }));
-  }
-
-  /**
-   * Clean up debounced suggestions method.
-   */
-  componentWillUnmount() {
-    this.debouncedUpdateSuggestions.cancel();
-  }
-
-  /**
-   * Refresh the autocomplete UI based on text that was typed.
-   *
-   * @param {string} search The typed text to search for.
-   */
-  updateSuggestions(search) {
-    this.setState({
-      isLoading: true
     });
-    (0, _apiFetch.default)({
-      path: (0, _url.addQueryArgs)(`/wp/v2/${this.props.taxonomy}`, {
-        search,
-        per_page: 20,
-        _fields: 'id,name',
-        orderby: 'count',
-        order: 'desc'
-      })
-    }).then(categories => {
-      this.setState({
-        suggestions: categories.reduce((accumulator, category) => ({
-          ...accumulator,
-          [category.name]: category
-        }), {})
+    /**
+     * Prepare categories data for the API endpoint, call the change handler.
+     *
+     * @param {Array} tokens An array of category tokens.
+     */
+    (0, _defineProperty2["default"])(_this, "handleOnChange", function (tokens) {
+      var onChange = _this.props.onChange;
+      var suggestions = _this.state.suggestions;
+      // Categories that are already will be objects, while new additions will be strings (the name).
+      // allValues nomalizes the array so that they are all objects.
+      var allValues = tokens.filter(function (token) {
+        return 'undefined' !== typeof token;
+      }) // Ensure each token is a valid value.
+      .map(function (token) {
+        return 'string' === typeof token ? suggestions[token] : token;
+      }).filter(Boolean);
+      onChange(allValues);
+    });
+    (0, _defineProperty2["default"])(_this, "getAvailableSuggestions", function () {
+      var value = _this.props.value;
+      var suggestions = _this.state.suggestions;
+      var selectedIds = value.reduce(function (acc, item) {
+        if (item !== null && item !== void 0 && item.id) {
+          acc.push(item.id);
+        }
+        return acc;
+      }, []);
+      var availableSuggestions = (0, _filter["default"])(suggestions, function (_ref) {
+        var id = _ref.id;
+        return selectedIds.indexOf(id) === -1;
       });
-    }).finally(() => this.setState({
-      isLoading: false
-    }));
+      return availableSuggestions.map(function (v) {
+        return v.name;
+      });
+    });
+    _this.debouncedUpdateSuggestions = (0, _debounce["default"])(_this.updateSuggestions, 100);
+    return _this;
   }
+  (0, _inherits2["default"])(CategoryAutocomplete, _Component);
+  return (0, _createClass2["default"])(CategoryAutocomplete, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      this.setState({
+        isLoading: true
+      });
+      (0, _apiFetch["default"])({
+        path: (0, _url.addQueryArgs)("/wp/v2/".concat(this.props.taxonomy), {
+          per_page: -1,
+          _fields: 'id,name'
+        })
+      }).then(function (categories) {
+        return _this2.setState({
+          allCategories: categories
+        });
+      })["finally"](function () {
+        return _this2.setState({
+          isLoading: false
+        });
+      });
+    }
 
-  /**
-   * Prepare categories data for the API endpoint, call the change handler.
-   *
-   * @param {Array} tokens An array of category tokens.
-   */
-  handleOnChange = tokens => {
-    const {
-      onChange
-    } = this.props;
-    const {
-      suggestions
-    } = this.state;
-    // Categories that are already will be objects, while new additions will be strings (the name).
-    // allValues nomalizes the array so that they are all objects.
-    const allValues = tokens.filter(token => 'undefined' !== typeof token) // Ensure each token is a valid value.
-    .map(token => 'string' === typeof token ? suggestions[token] : token).filter(Boolean);
-    onChange(allValues);
-  };
-  getAvailableSuggestions = () => {
-    const {
-      value
-    } = this.props;
-    const {
-      suggestions
-    } = this.state;
-    const selectedIds = value.reduce((acc, item) => {
-      if (item?.id) {
-        acc.push(item.id);
-      }
-      return acc;
-    }, []);
-    const availableSuggestions = (0, _filter.default)(suggestions, ({
-      id
-    }) => selectedIds.indexOf(id) === -1);
-    return availableSuggestions.map(v => v.name);
-  };
+    /**
+     * Clean up debounced suggestions method.
+     */
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.debouncedUpdateSuggestions.cancel();
+    }
 
-  /**
-   * Render the component.
-   */
-  render() {
-    const {
-      className,
-      disabled,
-      description,
-      hideHelpFromVision,
-      hideLabelFromVision,
-      label,
-      value
-    } = this.props;
-    const {
-      allCategories,
-      isLoading
-    } = this.state;
-    const classes = (0, _classnames.default)('newspack-category-autocomplete', className);
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: classes,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.FormTokenField, {
-        onInputChange: input => this.debouncedUpdateSuggestions(input),
-        value: value.reduce((acc, item) => {
-          const categoryOrItem = typeof item === 'number' ? (0, _find.default)(allCategories, ['id', item]) : item;
-          if (categoryOrItem) {
-            acc.push({
-              id: categoryOrItem.term_id || categoryOrItem.id,
-              value: categoryOrItem.value || categoryOrItem.name
-            });
-          }
-          return acc;
-        }, []),
-        suggestions: this.getAvailableSuggestions(),
-        onChange: this.handleOnChange,
-        label: label,
-        disabled: disabled,
-        description: description,
-        hideHelpFromVision: hideHelpFromVision,
-        hideLabelFromVision: hideLabelFromVision
-      }), isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "newspack-category-autocomplete__suggestions-spinner",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {})
-      }) : null]
-    });
-  }
-}
+    /**
+     * Refresh the autocomplete UI based on text that was typed.
+     *
+     * @param {string} search The typed text to search for.
+     */
+  }, {
+    key: "updateSuggestions",
+    value: function updateSuggestions(search) {
+      var _this3 = this;
+      this.setState({
+        isLoading: true
+      });
+      (0, _apiFetch["default"])({
+        path: (0, _url.addQueryArgs)("/wp/v2/".concat(this.props.taxonomy), {
+          search: search,
+          per_page: 20,
+          _fields: 'id,name',
+          orderby: 'count',
+          order: 'desc'
+        })
+      }).then(function (categories) {
+        _this3.setState({
+          suggestions: categories.reduce(function (accumulator, category) {
+            return _objectSpread(_objectSpread({}, accumulator), {}, (0, _defineProperty2["default"])({}, category.name, category));
+          }, {})
+        });
+      })["finally"](function () {
+        return _this3.setState({
+          isLoading: false
+        });
+      });
+    }
+  }, {
+    key: "render",
+    value:
+    /**
+     * Render the component.
+     */
+    function render() {
+      var _this4 = this;
+      var _this$props = this.props,
+        className = _this$props.className,
+        disabled = _this$props.disabled,
+        description = _this$props.description,
+        hideHelpFromVision = _this$props.hideHelpFromVision,
+        hideLabelFromVision = _this$props.hideLabelFromVision,
+        label = _this$props.label,
+        value = _this$props.value;
+      var _this$state = this.state,
+        allCategories = _this$state.allCategories,
+        isLoading = _this$state.isLoading;
+      var classes = (0, _classnames["default"])('newspack-category-autocomplete', className);
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: classes,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.FormTokenField, {
+          onInputChange: function onInputChange(input) {
+            return _this4.debouncedUpdateSuggestions(input);
+          },
+          value: value.reduce(function (acc, item) {
+            var categoryOrItem = typeof item === 'number' ? (0, _find["default"])(allCategories, ['id', item]) : item;
+            if (categoryOrItem) {
+              acc.push({
+                id: categoryOrItem.term_id || categoryOrItem.id,
+                value: categoryOrItem.value || categoryOrItem.name
+              });
+            }
+            return acc;
+          }, []),
+          suggestions: this.getAvailableSuggestions(),
+          onChange: this.handleOnChange,
+          label: label,
+          disabled: disabled,
+          description: description,
+          hideHelpFromVision: hideHelpFromVision,
+          hideLabelFromVision: hideLabelFromVision
+        }), isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "newspack-category-autocomplete__suggestions-spinner",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {})
+        }) : null]
+      });
+    }
+  }]);
+}(_element.Component);
 CategoryAutocomplete.defaultProps = {
   taxonomy: 'categories'
 };
-var _default = exports.default = CategoryAutocomplete;
+var _default = exports["default"] = CategoryAutocomplete;

package/dist/cjs/color-picker/index.js

@@ -4,8 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _components = require("@wordpress/components");
+var _compose = require("@wordpress/compose");
 var _element = require("@wordpress/element");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _colord = require("colord");
@@ -26,42 +28,58 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Internal dependencies.
  */
 
-(0, _colord.extend)([_a11y.default]);
-const {
-  InteractiveDiv
-} = _utils.default;
+(0, _colord.extend)([_a11y["default"]]);
+var InteractiveDiv = _utils["default"].InteractiveDiv;
 
 /**
  * ColorPicker component.
  *
  * @param {Object}             props             - Component props.
  * @param {JSX.Element|string} props.label       - Label for the color picker.
+ * @param {JSX.Element|string} props.help        - Help text for the color picker.
  * @param {string}             [props.color]     - Default color.
  * @param {Function}           props.onChange    - Function to call when the color changes.
  * @param {string}             [props.className] - Additional class name.
  * @return {JSX.Element} ColorPicker component.
  */
-const ColorPicker = ({
-  label,
-  color = '#fff',
-  onChange,
-  className
-}) => {
-  const [isExpanded, setIsExpanded] = (0, _element.useState)(false);
-  const ref = (0, _element.useRef)();
-  const colordColor = (0, _colord.colord)(color);
-  _hooks.default.useOnClickOutside(ref, () => setIsExpanded(false));
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames.default)('newspack-color-picker', className),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "newspack-color-picker__label",
+var _ColorPicker = function ColorPicker(_ref) {
+  var label = _ref.label,
+    help = _ref.help,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? '#ffffff' : _ref$color,
+    onChange = _ref.onChange,
+    className = _ref.className;
+  var _useState = (0, _element.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isExpanded = _useState2[0],
+    setIsExpanded = _useState2[1];
+  var ref = (0, _element.useRef)();
+  var id = (0, _compose.useInstanceId)(_ColorPicker, 'newspack-color-picker');
+  var labelId = "".concat(id, "-label");
+  var colordColor = (0, _colord.colord)(color);
+  _hooks["default"].useOnClickOutside(ref, function () {
+    return setIsExpanded(false);
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.BaseControl, {
+    id: id,
+    className: (0, _classnames["default"])('newspack-color-picker', className),
+    help: help,
+    __nextHasNoMarginBottom: true,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl.VisualLabel, {
+      id: labelId,
       children: label
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InteractiveDiv, {
+      id: id,
+      "aria-labelledby": labelId,
+      "aria-describedby": help ? "".concat(id, "__help") : undefined,
+      "aria-expanded": isExpanded,
       className: 'newspack-color-picker__expander',
-      onClick: () => setIsExpanded(!isExpanded),
+      onClick: function onClick() {
+        return setIsExpanded(!isExpanded);
+      },
       style: {
         backgroundColor: color,
-        color: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'
+        color: colordColor.contrast() > colordColor.contrast('#000000') ? '#ffffff' : '#000000'
       },
       children: color
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -69,10 +87,10 @@ const ColorPicker = ({
       ref: ref,
       children: isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ColorPicker, {
         color: color,
-        onChange: hex => onChange(hex),
+        onChange: onChange,
         enableAlpha: false
       })
     })]
   });
 };
-var _default = exports.default = ColorPicker;
+var _default = exports["default"] = _ColorPicker;

package/dist/cjs/color-picker/index.test.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = require("@testing-library/react");
+var _ = _interopRequireDefault(require("./"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+describe('ColorPicker', function () {
+  it('should render the label', function () {
+    var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        label: "Background color",
+        onChange: function onChange() {}
+      })),
+      getByText = _render.getByText;
+    expect(getByText('Background color')).toBeInTheDocument();
+  });
+  it('should render help text', function () {
+    var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        label: "Background color",
+        help: "Choose a color",
+        onChange: function onChange() {}
+      })),
+      getByText = _render2.getByText;
+    expect(getByText('Choose a color')).toBeInTheDocument();
+  });
+  it('should start collapsed', function () {
+    var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        label: "Background color",
+        onChange: function onChange() {}
+      })),
+      getByRole = _render3.getByRole;
+    expect(getByRole('button')).toHaveAttribute('aria-expanded', 'false');
+  });
+  it('should expand when the expander is clicked', function () {
+    var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        label: "Background color",
+        onChange: function onChange() {}
+      })),
+      getByRole = _render4.getByRole;
+    var expander = getByRole('button');
+    _react.fireEvent.click(expander);
+    expect(expander).toHaveAttribute('aria-expanded', 'true');
+  });
+  it('should associate label via aria-labelledby', function () {
+    var _render5 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        label: "Background color",
+        onChange: function onChange() {}
+      })),
+      getByRole = _render5.getByRole,
+      getByText = _render5.getByText;
+    var expander = getByRole('button');
+    var label = getByText('Background color');
+    expect(expander.getAttribute('aria-labelledby')).toBe(label.id);
+  });
+  it('should associate help text via aria-describedby when help is provided', function () {
+    var _render6 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        label: "Background color",
+        help: "Choose a color",
+        onChange: function onChange() {}
+      })),
+      getByRole = _render6.getByRole,
+      getByText = _render6.getByText;
+    var expander = getByRole('button');
+    var help = getByText('Choose a color');
+    expect(expander.getAttribute('aria-describedby')).toBe(help.id);
+  });
+  it('should not set aria-describedby when no help is provided', function () {
+    var _render7 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        label: "Background color",
+        onChange: function onChange() {}
+      })),
+      getByRole = _render7.getByRole;
+    expect(getByRole('button')).not.toHaveAttribute('aria-describedby');
+  });
+});

package/dist/cjs/color-picker/style.scss

@@ -2,31 +2,29 @@
  * Color Picker
  */
 
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+
 .newspack-color-picker {
 	position: relative;
-
-	&__label {
-		margin-bottom: 8px;
-	}
-
 	&__expander {
-		box-shadow: inset 0 0 0 1px rgb(0 0 0 / 20%);
-		border-radius: 2px;
-		height: 64px;
-		padding: 12px;
+		box-shadow: inset 0 0 0 1px rgba(wp-colors.$black, 0.54);
+		border-radius: wp-vars.$radius-small;
+		height: wp-vars.$grid-unit-80;
+		padding: wp-vars.$grid-unit-10;
 		text-align: right;
 		text-transform: uppercase;
 
 		&:focus-visible {
 			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			border-color: white;
+			border-color: wp-colors.$white;
 		}
 	}
 
 	&__main {
-		background: white;
-		box-shadow: 0 0 8px 4px rgba(black, 0.08);
-		margin: 12px 0;
+		background: wp-colors.$white;
+		box-shadow: wp-vars.$elevation-small;
+		margin: wp-vars.$grid-unit-10 0 0;
 		position: absolute;
 		z-index: 2;