newspack-components 4.3.0 → 4.4.0-alpha.1

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

@@ -1,3 +1,13 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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 = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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
  */
@@ -28,155 +38,173 @@ import classnames from 'classnames';
  * Category autocomplete field component.
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-class CategoryAutocomplete extends Component {
-  state = {
-    suggestions: {},
-    allCategories: {},
-    isLoading: false
-  };
-
+var CategoryAutocomplete = /*#__PURE__*/function (_Component) {
   /**
    * Class constructor.
    */
-  constructor(props) {
-    super(props);
-    this.debouncedUpdateSuggestions = debounce(this.updateSuggestions, 100);
-  }
-  componentDidMount() {
-    this.setState({
-      isLoading: true
-    });
-    apiFetch({
-      path: 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;
+    _classCallCheck(this, CategoryAutocomplete);
+    _this = _callSuper(this, CategoryAutocomplete, [props]);
+    _defineProperty(_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
     });
-    apiFetch({
-      path: 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.
+     */
+    _defineProperty(_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);
+    });
+    _defineProperty(_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 = filter(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 = debounce(_this.updateSuggestions, 100);
+    return _this;
   }
+  _inherits(CategoryAutocomplete, _Component);
+  return _createClass(CategoryAutocomplete, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      this.setState({
+        isLoading: true
+      });
+      apiFetch({
+        path: 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 = filter(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 = classnames('newspack-category-autocomplete', className);
-    return /*#__PURE__*/_jsxs("div", {
-      className: classes,
-      children: [/*#__PURE__*/_jsx(FormTokenField, {
-        onInputChange: input => this.debouncedUpdateSuggestions(input),
-        value: value.reduce((acc, item) => {
-          const categoryOrItem = typeof item === 'number' ? find(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__*/_jsx("span", {
-        className: "newspack-category-autocomplete__suggestions-spinner",
-        children: /*#__PURE__*/_jsx(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
+      });
+      apiFetch({
+        path: 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), {}, _defineProperty({}, 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 = classnames('newspack-category-autocomplete', className);
+      return /*#__PURE__*/_jsxs("div", {
+        className: classes,
+        children: [/*#__PURE__*/_jsx(FormTokenField, {
+          onInputChange: function onInputChange(input) {
+            return _this4.debouncedUpdateSuggestions(input);
+          },
+          value: value.reduce(function (acc, item) {
+            var categoryOrItem = typeof item === 'number' ? find(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__*/_jsx("span", {
+          className: "newspack-category-autocomplete__suggestions-spinner",
+          children: /*#__PURE__*/_jsx(Spinner, {})
+        }) : null]
+      });
+    }
+  }]);
+}(Component);
 CategoryAutocomplete.defaultProps = {
   taxonomy: 'categories'
 };

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

@@ -1,7 +1,9 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
  * WordPress dependencies.
  */
-import { ColorPicker as ColorPickerComponent } from '@wordpress/components';
+import { BaseControl, ColorPicker as ColorPickerComponent } from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
 import { useState, useRef } from '@wordpress/element';
 
 /**
@@ -19,41 +21,57 @@ import utils from '../utils';
 import './style.scss';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 extend([a11yPlugin]);
-const {
-  InteractiveDiv
-} = utils;
+var InteractiveDiv = utils.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] = useState(false);
-  const ref = useRef();
-  const colordColor = colord(color);
-  hooks.useOnClickOutside(ref, () => setIsExpanded(false));
-  return /*#__PURE__*/_jsxs("div", {
+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 = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isExpanded = _useState2[0],
+    setIsExpanded = _useState2[1];
+  var ref = useRef();
+  var id = useInstanceId(_ColorPicker, 'newspack-color-picker');
+  var labelId = "".concat(id, "-label");
+  var colordColor = colord(color);
+  hooks.useOnClickOutside(ref, function () {
+    return setIsExpanded(false);
+  });
+  return /*#__PURE__*/_jsxs(BaseControl, {
+    id: id,
     className: classnames('newspack-color-picker', className),
-    children: [/*#__PURE__*/_jsx("div", {
-      className: "newspack-color-picker__label",
+    help: help,
+    __nextHasNoMarginBottom: true,
+    children: [/*#__PURE__*/_jsx(BaseControl.VisualLabel, {
+      id: labelId,
       children: label
     }), /*#__PURE__*/_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__*/_jsx("div", {
@@ -61,10 +79,10 @@ const ColorPicker = ({
       ref: ref,
       children: isExpanded && /*#__PURE__*/_jsx(ColorPickerComponent, {
         color: color,
-        onChange: hex => onChange(hex),
+        onChange: onChange,
         enableAlpha: false
       })
     })]
   });
 };
-export default ColorPicker;
+export default _ColorPicker;

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

@@ -0,0 +1,78 @@
+/**
+ * External dependencies
+ */
+import { render, fireEvent } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import ColorPicker from './';
+import { jsx as _jsx } from "react/jsx-runtime";
+describe('ColorPicker', function () {
+  it('should render the label', function () {
+    var _render = render(/*#__PURE__*/_jsx(ColorPicker, {
+        label: "Background color",
+        onChange: function onChange() {}
+      })),
+      getByText = _render.getByText;
+    expect(getByText('Background color')).toBeInTheDocument();
+  });
+  it('should render help text', function () {
+    var _render2 = render(/*#__PURE__*/_jsx(ColorPicker, {
+        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 = render(/*#__PURE__*/_jsx(ColorPicker, {
+        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 = render(/*#__PURE__*/_jsx(ColorPicker, {
+        label: "Background color",
+        onChange: function onChange() {}
+      })),
+      getByRole = _render4.getByRole;
+    var expander = getByRole('button');
+    fireEvent.click(expander);
+    expect(expander).toHaveAttribute('aria-expanded', 'true');
+  });
+  it('should associate label via aria-labelledby', function () {
+    var _render5 = render(/*#__PURE__*/_jsx(ColorPicker, {
+        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 = render(/*#__PURE__*/_jsx(ColorPicker, {
+        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 = render(/*#__PURE__*/_jsx(ColorPicker, {
+        label: "Background color",
+        onChange: function onChange() {}
+      })),
+      getByRole = _render7.getByRole;
+    expect(getByRole('button')).not.toHaveAttribute('aria-describedby');
+  });
+});

package/dist/esm/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;