@wordpress/components/build/guide/page-control.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = PageControl;
var _i18n = require("@wordpress/i18n");
var _button = _interopRequireDefault(require("../button"));
var _icons = require("./icons");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function PageControl({
  currentPage,
  numberOfPages,
  setCurrentPage
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
    className: "components-guide__page-control",
    "aria-label": (0, _i18n.__)('Guide controls'),
    children: Array.from({
      length: numberOfPages
    }).map((_, page) => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
      // Set aria-current="step" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current
      "aria-current": page === currentPage ? 'step' : undefined,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
        size: "small",
        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.PageControlIcon, {}),
        "aria-label": (0, _i18n.sprintf)(/* translators: 1: current page number 2: total number of pages */
        (0, _i18n.__)('Page %1$d of %2$d'), page + 1, numberOfPages),
        onClick: () => setCurrentPage(page)
      }, page)
    }, page))
  });
}
//# sourceMappingURL=page-control.js.map