newspack-components 4.7.0 → 4.8.0

package/dist/cjs/stat-card/label.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _element = require("@wordpress/element");
+var _ui = require("@wordpress/ui");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _context = require("./context");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["suffix", "heading", "className", "children"];
+/**
+ * WordPress dependencies.
+ */
+/**
+ * External dependencies.
+ */
+/**
+ * Internal dependencies.
+ */
+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; }
+var headings = {
+  2: 'h2',
+  3: 'h3',
+  4: 'h4',
+  5: 'h5',
+  6: 'h6'
+};
+var Label = (0, _element.forwardRef)(function Label(_ref, ref) {
+  var suffix = _ref.suffix,
+    heading = _ref.heading,
+    className = _ref.className,
+    children = _ref.children,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var context = (0, _context.useStatCardContext)();
+  var level = heading !== null && heading !== void 0 ? heading : context.heading;
+  // Consumers are largely untyped JS, where an out-of-range level would
+  // otherwise render an <h7>, which carries no heading role at all.
+  var Heading = headings[level] || headings[3];
+  (0, _element.useEffect)(function () {
+    if ('production' === process.env.NODE_ENV || headings[level]) {
+      return;
+    }
+    // eslint-disable-next-line no-console
+    console.warn("StatCard: unknown heading level \"".concat(level, "\", falling back to 3. Set `heading` on StatCard.Root or StatCard.Label to one of ").concat(Object.keys(headings).join(', '), "."));
+  }, [level]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Stack, _objectSpread(_objectSpread({
+    ref: ref,
+    direction: "row",
+    align: "flex-start",
+    justify: "space-between",
+    gap: "sm",
+    className: (0, _classnames["default"])('newspack-stat-card__label', className)
+  }, props), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Heading, {
+      className: "newspack-stat-card__label-text",
+      children: children
+    }), suffix]
+  }));
+});
+var _default = exports["default"] = Label;

package/dist/cjs/stat-card/root.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _element = require("@wordpress/element");
+var _ui = require("@wordpress/ui");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _context = require("./context");
+require("./style.scss");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["heading", "labels", "className", "children"];
+/**
+ * WordPress dependencies.
+ */
+// Aliased: this package exports a different `Card` of its own.
+/**
+ * External dependencies.
+ */
+/**
+ * Internal dependencies.
+ */
+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; }
+var Root = (0, _element.forwardRef)(function Root(_ref, ref) {
+  var _ref$heading = _ref.heading,
+    heading = _ref$heading === void 0 ? 3 : _ref$heading,
+    labels = _ref.labels,
+    className = _ref.className,
+    children = _ref.children,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  // Keyed on the strings rather than the object: a caller writing `labels` inline
+  // hands over a fresh object each render, which would defeat the memo entirely.
+  var _ref2 = labels !== null && labels !== void 0 ? labels : {},
+    notApplicable = _ref2.notApplicable,
+    up = _ref2.up,
+    down = _ref2.down;
+  var context = (0, _element.useMemo)(function () {
+    return {
+      heading: heading,
+      labels: (0, _context.resolveStatCardLabels)({
+        notApplicable: notApplicable,
+        up: up,
+        down: down
+      })
+    };
+  }, [heading, notApplicable, up, down]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.StatCardContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Card.Root, _objectSpread(_objectSpread({
+      ref: ref,
+      className: (0, _classnames["default"])('newspack-stat-card', className)
+    }, props), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Card.Content, {
+        render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Stack, {
+          direction: "column",
+          gap: "sm"
+        }),
+        className: "newspack-stat-card__content",
+        children: children
+      })
+    }))
+  });
+});
+var _default = exports["default"] = Root;

package/dist/cjs/stat-card/secondary.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _element = require("@wordpress/element");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _context = require("./context");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["className", "children"];
+/**
+ * WordPress dependencies.
+ */
+/**
+ * External dependencies.
+ */
+/**
+ * Internal dependencies.
+ */
+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; }
+var Secondary = (0, _element.forwardRef)(function Secondary(_ref, ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  (0, _context.useStatCardContext)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
+    ref: ref,
+    className: (0, _classnames["default"])('newspack-stat-card__secondary', className)
+  }, props), {}, {
+    children: children
+  }));
+});
+var _default = exports["default"] = Secondary;

package/dist/cjs/stat-card/style.scss

@@ -0,0 +1,89 @@
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+@use "~@wordpress/base-styles/mixins" as wp-mixins;
+@use "../../../colors/colors.module" as colors;
+@use "../variables" as np-vars;
+
+$stat-card-min-height: wp-vars.$grid-unit * 21;
+
+.newspack-stat-card {
+	--wp-admin-theme-color: #{colors.$primary-600};
+	--wp-admin-theme-color--rgb: #{colors.$primary-600--rgb};
+	--wp-admin-theme-color-darker-10: #{colors.$primary-700};
+	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
+	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
+	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};
+	--wp-admin-theme-color-lighter-10: #{colors.$primary-000};
+	--wp-admin-theme-color-lighter-10--rgb: #{colors.$primary-000--rgb};
+
+	container-type: inline-size;
+	display: flex;
+	flex-direction: column;
+	min-height: $stat-card-min-height;
+
+	&__content {
+		flex: 1;
+	}
+
+	&__label .newspack-info-button {
+		margin-block: calc((#{wp-vars.$font-line-height-small} - #{wp-vars.$button-size-small}) / 2);
+	}
+
+	&__label-text {
+		@include wp-mixins.heading-large();
+		color: wp-colors.$gray-900;
+		margin: 0;
+	}
+
+	&__body {
+		flex: 1;
+	}
+
+	&__value {
+		color: var(--wp-admin-theme-color);
+		font-size: np-vars.$font-size-3x-large;
+		font-size: clamp(#{wp-vars.$font-size-x-large}, 14cqi, #{np-vars.$font-size-3x-large});
+		font-variant-numeric: tabular-nums;
+		font-weight: wp-vars.$font-weight-medium;
+		line-height: np-vars.$font-line-height-3x-large;
+
+		&--text {
+			font-size: wp-vars.$font-size-x-large;
+			line-height: wp-vars.$font-line-height-x-large;
+		}
+	}
+
+	&__delta {
+		@include wp-mixins.heading-medium();
+		color: wp-colors.$gray-700;
+
+		&--positive {
+			color: colors.$success-600;
+		}
+
+		&--negative {
+			color: colors.$error-600;
+		}
+	}
+
+	&__action,
+	&__action.components-button {
+		font-size: wp-vars.$helptext-font-size;
+		line-height: wp-vars.$font-line-height-x-small;
+	}
+
+	&__secondary {
+		@include wp-mixins.heading-medium();
+		color: var(--wp-admin-theme-color);
+		margin: 0;
+		text-wrap: balance;
+	}
+
+	&__description {
+		color: wp-colors.$gray-700;
+		font-size: wp-vars.$helptext-font-size;
+		line-height: wp-vars.$font-line-height-x-small;
+		margin: 0;
+		text-wrap: balance;
+	}
+}

package/dist/cjs/stat-card/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/stat-card/value.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _element = require("@wordpress/element");
+var _ui = require("@wordpress/ui");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _constants = require("./constants");
+var _context = require("./context");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["value", "valueLabel", "variant", "suffix", "className"];
+/**
+ * WordPress dependencies.
+ */
+/**
+ * External dependencies.
+ */
+/**
+ * Internal dependencies.
+ */
+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; }
+var variants = ['figure', 'text'];
+var Value = (0, _element.forwardRef)(function Value(_ref, ref) {
+  var value = _ref.value,
+    valueLabel = _ref.valueLabel,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'figure' : _ref$variant,
+    suffix = _ref.suffix,
+    className = _ref.className,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var _useStatCardContext = (0, _context.useStatCardContext)(),
+    labels = _useStatCardContext.labels;
+  (0, _element.useEffect)(function () {
+    if ('production' === process.env.NODE_ENV || variants.includes(variant)) {
+      return;
+    }
+    // eslint-disable-next-line no-console
+    console.warn("StatCard.Value: unknown variant \"".concat(variant, "\", falling back to figure. Use one of ").concat(variants.join(', '), "."));
+  }, [variant]);
+
+  // A blank string is a missing figure too, and an empty hero would read as one
+  // that never loaded. A zero is a figure, so it stays out of this.
+  var isNull = null === value || undefined === value || 'string' === typeof value && '' === value.trim();
+  var shown = isNull ? _constants.STAT_CARD_NULL_GLYPH : value;
+  // Trimmed, and `||` not `??`: a blank label is a missing one, and the glyph must never be left unnamed.
+  var spoken = (valueLabel === null || valueLabel === void 0 ? void 0 : valueLabel.trim()) || (isNull ? labels.notApplicable : undefined);
+  var figure = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({
+    ref: ref,
+    className: (0, _classnames["default"])('newspack-stat-card__value', 'text' === variant && 'newspack-stat-card__value--text', className)
+  }, props), {}, {
+    children: spoken ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        "aria-hidden": "true",
+        children: shown
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.VisuallyHidden, {
+        render: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {}),
+        children: spoken
+      })]
+    }) : shown
+  }));
+  if (!suffix) {
+    return figure;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Stack, {
+    direction: "row",
+    align: "baseline",
+    gap: "sm",
+    className: "newspack-stat-card__figure",
+    children: [figure, suffix]
+  });
+});
+var _default = exports["default"] = Value;

package/dist/cjs/status-indicator/index.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "STATUS_NAMES", {
+  enumerable: true,
+  get: function get() {
+    return _statuses.STATUS_NAMES;
+  }
+});
+exports["default"] = void 0;
+Object.defineProperty(exports, "statusGlyph", {
+  enumerable: true,
+  get: function get() {
+    return _statuses.statusGlyph;
+  }
+});
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
+var _ui = require("@wordpress/ui");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _statuses = require("./statuses");
+require("./style.scss");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["status", "icon", "className", "children"];
+/**
+ * StatusIndicator
+ */
+/**
+ * WordPress dependencies.
+ */
+/**
+ * External dependencies.
+ */
+/**
+ * Internal dependencies.
+ */
+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; }
+var StatusIndicator = (0, _element.forwardRef)(function StatusIndicator(_ref, ref) {
+  var status = _ref.status,
+    icon = _ref.icon,
+    className = _ref.className,
+    children = _ref.children,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Stack, _objectSpread(_objectSpread({
+    ref: ref,
+    direction: "row",
+    align: "center",
+    gap: "sm",
+    className: (0, _classnames["default"])('newspack-status-indicator', className)
+  }, props), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
+      className: "newspack-status-indicator__icon",
+      icon: status ? (0, _statuses.statusGlyph)(status) : icon,
+      size: 24
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: children
+    })]
+  }));
+});
+var _default = exports["default"] = StatusIndicator;

package/dist/cjs/status-indicator/index.test.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = require("@testing-library/react");
+var _icons = require("@wordpress/icons");
+var _ = _interopRequireWildcard(require("."));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+describe('StatusIndicator', function () {
+  it('renders the glyph alongside the label', function () {
+    var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        status: "active",
+        children: "Active"
+      })),
+      container = _render.container;
+    expect(_react.screen.getByText('Active')).toBeInTheDocument();
+    expect(container.querySelector('svg.newspack-status-indicator__icon')).toBeInTheDocument();
+  });
+
+  // The trim is what makes the 8px gap measure 8px, so it is styled through a
+  // class rather than left to the consumer.
+  it('carries the class the icon trim is scoped to', function () {
+    var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        status: "active",
+        children: "Active"
+      })),
+      container = _render2.container;
+    expect(container.querySelector('.newspack-status-indicator')).toBeInTheDocument();
+    expect(container.querySelector('.newspack-status-indicator__icon')).toBeInTheDocument();
+  });
+  it('draws a named status the way the vocabulary says', function () {
+    var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        status: "draft",
+        children: "Draft"
+      })),
+      named = _render3.container;
+    var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        icon: _icons.drafts,
+        children: "Draft"
+      })),
+      given = _render4.container;
+    expect(named.querySelector('svg').innerHTML).toBe(given.querySelector('svg').innerHTML);
+  });
+  it('draws the glyph it is given when there is no name for it', function () {
+    var _render5 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        icon: _icons.gift,
+        children: "Free"
+      })),
+      free = _render5.container;
+    var _render6 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        icon: _icons.published,
+        children: "Active"
+      })),
+      active = _render6.container;
+    expect(free.querySelector('svg').innerHTML).not.toBe(active.querySelector('svg').innerHTML);
+  });
+  it('keeps the consumer class and passes the rest through', function () {
+    var _render7 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        className: "custom",
+        "data-testid": "status",
+        status: "active",
+        children: "Active"
+      })),
+      container = _render7.container;
+    var root = container.querySelector('.newspack-status-indicator');
+    expect(root).toHaveClass('custom');
+    expect(root).toHaveAttribute('data-testid', 'status');
+  });
+});
+describe('statusGlyph', function () {
+  it('draws every name in the vocabulary', function () {
+    _.STATUS_NAMES.forEach(function (name) {
+      return expect((0, _.statusGlyph)(name)).toBeTruthy();
+    });
+  });
+
+  // Pinning the complete list is what lets a column assert its own distinctness:
+  // any pair not named here reads apart.
+  it('shares a mark only where two names mean the same to a reader', function () {
+    var byGlyph = new Map();
+    _.STATUS_NAMES.forEach(function (name) {
+      return byGlyph.set((0, _.statusGlyph)(name), [].concat((0, _toConsumableArray2["default"])(byGlyph.get((0, _.statusGlyph)(name)) || []), [name]));
+    });
+    expect((0, _toConsumableArray2["default"])(byGlyph.values()).filter(function (names) {
+      return names.length > 1;
+    })).toEqual([['active', 'done'], ['cancelled', 'ended']]);
+  });
+});

package/dist/cjs/status-indicator/statuses.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.statusGlyph = exports.STATUS_NAMES = void 0;
+var _icons = require("@wordpress/icons");
+/**
+ * WordPress dependencies.
+ */
+
+/**
+ * The glyph for each status a list can report.
+ *
+ * Two names may resolve to the same glyph where they read differently at the call
+ * site but mean the same to a reader: a sent newsletter is finished rather than
+ * live, and an ad that expired was not cancelled. Splitting them leaves room to
+ * draw them apart later without touching a consumer, and it means the rule a
+ * Status column keeps is about glyphs rather than names. `statusGlyph` is
+ * exported so a column's own test can assert it.
+ */
+var STATUS_GLYPHS = {
+  active: _icons.published,
+  done: _icons.published,
+  scheduled: _icons.scheduled,
+  draft: _icons.drafts,
+  pending: _icons.pending,
+  attention: _icons.caution,
+  error: _icons.error,
+  progress: _icons.update,
+  cancelled: _icons.notAllowed,
+  ended: _icons.notAllowed,
+  "private": _icons.lock,
+  trash: _icons.trash
+};
+var statusGlyph = exports.statusGlyph = function statusGlyph(status) {
+  return STATUS_GLYPHS[status];
+};
+var STATUS_NAMES = exports.STATUS_NAMES = Object.freeze(Object.keys(STATUS_GLYPHS));

package/dist/cjs/status-indicator/style.scss

@@ -0,0 +1,9 @@
+@use "~@wordpress/base-styles/variables" as wp-vars;
+
+.newspack-status-indicator {
+	&__icon {
+		fill: currentcolor;
+		flex-shrink: 0;
+		margin: calc((#{wp-vars.$grid-unit-20} - #{wp-vars.$icon-size}) / 2);
+	}
+}

package/dist/cjs/status-indicator/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/style.scss

@@ -1,16 +1,16 @@
 @use "~@wordpress/base-styles/colors" as wp-colors;
-@use "../../colors/colors.module" as colors;
+@use "../../colors/colors.module" as np-colors;
 
 :root {
 	// WP Admin
-	--wp-admin-theme-color: #{colors.$primary-600};
-	--wp-admin-theme-color--rgb: #{colors.$primary-600--rgb};
-	--wp-admin-theme-color-darker-10: #{colors.$primary-700};
-	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
-	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
-	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};
-	--wp-admin-theme-color-lighter-10: #{colors.$primary-000};
-	--wp-admin-theme-color-lighter-10--rgb: #{colors.$primary-000--rgb};
+	--wp-admin-theme-color: #{np-colors.$primary-600};
+	--wp-admin-theme-color--rgb: #{np-colors.$primary-600--rgb};
+	--wp-admin-theme-color-darker-10: #{np-colors.$primary-700};
+	--wp-admin-theme-color-darker-10--rgb: #{np-colors.$primary-700--rgb};
+	--wp-admin-theme-color-darker-20: #{np-colors.$primary-800};
+	--wp-admin-theme-color-darker-20--rgb: #{np-colors.$primary-800--rgb};
+	--wp-admin-theme-color-lighter-10: #{np-colors.$primary-000};
+	--wp-admin-theme-color-lighter-10--rgb: #{np-colors.$primary-000--rgb};
 }
 
 // Buttons Card

package/dist/cjs/tabbed-navigation/style.scss

@@ -2,7 +2,8 @@
  * Tabbed Navigation
  */
 
-@use "../../../colors/colors.module" as colors;
+@use "../../../colors/colors.module" as np-colors;
+@use "../mixins" as mixins;
 @use "~@wordpress/base-styles/colors" as wp-colors;
 @use "~@wordpress/base-styles/variables" as wp-vars;
 
@@ -18,7 +19,7 @@
 	width: 100%;
 
 	/* stylelint-disable-next-line plugin-wpds/no-setting-wpds-custom-properties -- deliberate Newspack brand override of the indicator token. */
-	--wpds-color-stroke-interactive-neutral-strong: #{colors.$primary-600};
+	--wpds-color-stroke-interactive-neutral-strong: #{np-colors.$primary-600};
 
 	a[role="tab"] {
 		text-decoration: none;
@@ -53,6 +54,7 @@
 
 		&[data-disabled],
 		&[aria-disabled="true"] {
+			/* stylelint-disable-next-line plugin-wpds/no-unknown-ds-tokens -- the plugin's token list lags the prebuilt design-tokens.css names. */
 			color: var( --wpds-color-foreground-interactive-neutral-disabled, #{wp-colors.$gray-600} );
 			pointer-events: none;
 		}
@@ -91,12 +93,12 @@
 		}
 
 		&:focus-visible {
-			outline: var( --wpds-border-width-focus, var( --wp-admin-border-width-focus, #{wp-vars.$border-width-focus-fallback} ) ) solid var( --wpds-color-stroke-focus, var( --wp-admin-theme-color ) );
+			@include mixins.wpds-focus-ring;
 			outline-offset: calc( var( --wpds-dimension-padding-md, #{wp-vars.$grid-unit-15} ) * -1 );
 		}
 
 		&[aria-current="page"] {
-			box-shadow: inset 0 calc( var( --wpds-border-width-focus, #{wp-vars.$border-width-focus-fallback} ) * -1 ) 0 var( --wpds-color-stroke-interactive-neutral-strong, #{colors.$primary-600} );
+			box-shadow: inset 0 calc( var( --wpds-border-width-focus, #{wp-vars.$border-width-focus-fallback} ) * -1 ) 0 var( --wpds-color-stroke-interactive-neutral-strong, #{np-colors.$primary-600} );
 		}
 	}
 }

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});