newspack-components 4.7.0 → 4.8.0

package/src/status-indicator/statuses.ts

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies.
+ */
+import { caution, drafts, error, notAllowed, pending, published, scheduled, trash, update, lock } from '@wordpress/icons';
+
+/**
+ * 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.
+ */
+const STATUS_GLYPHS = {
+	active: published,
+	done: published,
+	scheduled,
+	draft: drafts,
+	pending,
+	attention: caution,
+	error,
+	progress: update,
+	cancelled: notAllowed,
+	ended: notAllowed,
+	private: lock,
+	trash,
+} as const;
+
+export type StatusName = keyof typeof STATUS_GLYPHS;
+
+export const statusGlyph = ( status: StatusName ) => STATUS_GLYPHS[ status ];
+
+export const STATUS_NAMES = Object.freeze( Object.keys( STATUS_GLYPHS ) as StatusName[] );

package/src/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/src/status-indicator/types.ts

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies.
+ */
+import { Icon } from '@wordpress/components';
+
+/**
+ * External dependencies.
+ */
+import type { ComponentProps, ReactNode } from 'react';
+
+/**
+ * Internal dependencies.
+ */
+import type { StatusName } from './statuses';
+
+// @wordpress/components does not export the Icon prop type, so the union is
+// derived from the component to track the library instead of a copy kept here.
+// `icon` is optional there, and indexing an optional property widens the union
+// with `undefined`, so NonNullable is what keeps the glyph required here.
+type StatusIcon = NonNullable< ComponentProps< typeof Icon >[ 'icon' ] >;
+
+interface StatusIndicatorBaseProps extends Omit< ComponentProps< 'div' >, 'children' > {
+	/** The status label. @wordpress/primitives forces `aria-hidden` on the glyph, so this is the whole accessible name. */
+	children: ReactNode;
+}
+
+/** `icon` is the escape hatch for fields that classify rather than track a lifecycle. */
+export type StatusIndicatorProps = StatusIndicatorBaseProps & ( { status: StatusName; icon?: never } | { status?: never; icon: StatusIcon } );

package/src/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/src/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/src/types.ts

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import type { Badge } from '@wordpress/ui';
+
+/**
+ * Heading level for a component that renders a heading whose position in the
+ * document outline is the caller's to decide. Matches Core's `headingLevel` on
+ * `Page.Header`, `ToolsPanel` and `ColorPalette`. Level 1 is excluded: a card
+ * or panel is never a page's only heading.
+ */
+export type HeadingLevel = 2 | 3 | 4 | 5 | 6;
+
+// @wordpress/ui does not export BadgeProps, so the union is derived from the component.
+export type BadgeIntent = NonNullable< React.ComponentProps< typeof Badge >[ 'intent' ] >;
+
+/**
+ * A badge rendered beside a card title. The label is optional because cards drop
+ * a badge they cannot label rather than painting an empty pill, so a caller may
+ * build one straight from data that can be absent.
+ */
+export type CardBadge = {
+	label?: string | null;
+	intent?: BadgeIntent;
+};

package/src/web-preview/style.scss

@@ -3,20 +3,20 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
-@use "../../../colors/colors.module" as colors;
+@use "../../../colors/colors.module" as np-colors;
 
 .newspack-web-preview {
 	// Color
-	--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};
-
-	background: color-mix(in srgb, colors.$neutral-1000, transparent 65%);
+	--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};
+
+	background: color-mix(in srgb, np-colors.$neutral-1000, transparent 65%);
 	box-sizing: border-box;
 	height: 100%;
 	left: 0;

package/src/with-wizard/style.scss

@@ -3,19 +3,19 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
-@use "../../../colors/colors.module" as colors;
+@use "../../../colors/colors.module" as np-colors;
 
 // Styling for full-page-react Wizards (ignoring admin-header-only wizards).
 body.newspack-wizard-page:not(.newspack-admin-header) {
-	--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-components-color-accent: #{colors.$primary-600};
+	--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};
+	--wp-components-color-accent: #{np-colors.$primary-600};
 
 	background: #{wp-colors.$white};
 

package/src/with-wizard-screen/style.scss

@@ -3,18 +3,18 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
-@use "../../../colors/colors.module" as colors;
+@use "../../../colors/colors.module" as np-colors;
 
 .newspack-wizard {
 	// Color
-	--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};
 
 	color: wp-colors.$gray-900;
 

package/src/wizard/index.js

@@ -7,16 +7,25 @@ import classnames from 'classnames';
  * WordPress dependencies.
  */
 // Notice is aliased: `Notice` below is Newspack's own, which this file also uses.
-import { DropdownMenu, MenuGroup, MenuItem, Notice as CoreNotice, SlotFillProvider, createSlotFill } from '@wordpress/components';
+import {
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+	Notice as CoreNotice,
+	SlotFillProvider,
+	createSlotFill,
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { cloneElement, createInterpolateElement, isValidElement, useRef, useEffect, useState, forwardRef } from '@wordpress/element';
+import { cloneElement, createInterpolateElement, isValidElement, useEffect, useRef, useState, forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { category, chevronLeft, moreVertical } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { Footer, Notice, Button, TabbedNavigation, PluginInstaller, SectionHeader, HandoffMessage, Page } from '../';
+import { Footer, Notice, Button, TabbedNavigation, PluginInstaller, SectionHeader, HandoffMessage, Page, Waiting } from '../';
 import { activeBreadcrumbs, appendSectionName } from './breadcrumbs-select';
 import Router from '../proxied-imports/router';
 import registerStore, { WIZARD_STORE_NAMESPACE } from './store';
@@ -164,8 +173,18 @@ const Wizard = (
 	const headerData = useSelect( select => select( WIZARD_STORE_NAMESPACE ).getHeaderData() );
 	const notices = useSelect( select => select( WIZARD_STORE_NAMESPACE ).getNotices() );
 	const { invalidateResolution } = useDispatch( WIZARD_STORE_NAMESPACE );
-	const { actions, backNav, badges, sectionDescription, sectionMenu, sectionName, sectionTitle, sectionPrimaryAction, sectionSecondaryAction } =
-		headerData;
+	const {
+		actions,
+		backNav,
+		badges,
+		sectionDescription,
+		sectionMenu,
+		sectionName,
+		sectionSize,
+		sectionTitle,
+		sectionPrimaryAction,
+		sectionSecondaryAction,
+	} = headerData;
 
 	const mainActions = actions?.filter( action => action.type === 'primary' || action.type === 'secondary' );
 	const moreActions = actions?.filter( action => action.type === 'more' );
@@ -177,6 +196,11 @@ const Wizard = (
 	let displayedSections = sections.filter( section => ! section.isHidden );
 
 	const [ pluginRequirementsSatisfied, setPluginRequirementsSatisfied ] = useState( requiredPlugins.length === 0 );
+	// Whether the requirements check has reported back. Until it has, the check
+	// shows the same fetching treatment as the rest of the wizard rather than
+	// the installer's own spinner and the swapped header; the installer only
+	// surfaces once a plugin is actually found missing.
+	const [ pluginRequirementsKnown, setPluginRequirementsKnown ] = useState( requiredPlugins.length === 0 );
 
 	// The data fetch above runs once per mount, while the required plugins are
 	// still missing — endpoints that need them answer empty or error outright,
@@ -190,6 +214,7 @@ const Wizard = (
 		// Leave the installer first: whatever happens to the refetch, the user
 		// should not be stranded on a required-plugins screen for a plugin they
 		// just installed.
+		setPluginRequirementsKnown( true );
 		setPluginRequirementsSatisfied( complete );
 		if ( ! complete ) {
 			requirementsWereUnmet.current = true;
@@ -202,11 +227,27 @@ const Wizard = (
 	};
 
 	if ( ! pluginRequirementsSatisfied ) {
-		headerText = requiredPlugins.length > 1 ? __( 'Required plugins', 'newspack-plugin' ) : __( 'Required plugin', 'newspack-plugin' );
+		if ( pluginRequirementsKnown ) {
+			headerText = requiredPlugins.length > 1 ? __( 'Required plugins', 'newspack-plugin' ) : __( 'Required plugin', 'newspack-plugin' );
+		}
 		displayedSections = [
 			{
 				path: '/',
-				render: () => <PluginInstaller plugins={ requiredPlugins } onStatus={ onPluginStatus } />,
+				render: () => (
+					<>
+						{ ! pluginRequirementsKnown && (
+							<div className="newspack-wizard__loader">
+								<VStack alignment="center" spacing={ 2 }>
+									<Waiting noMargin />
+									<strong>{ __( 'Fetching…', 'newspack-plugin' ) }</strong>
+								</VStack>
+							</div>
+						) }
+						<div hidden={ ! pluginRequirementsKnown }>
+							<PluginInstaller plugins={ requiredPlugins } onStatus={ onPluginStatus } />
+						</div>
+					</>
+				),
 			},
 		];
 	}
@@ -277,6 +318,7 @@ const Wizard = (
 												primaryAction={ sectionPrimaryAction || section.primaryAction }
 												secondaryAction={ sectionSecondaryAction || section.secondaryAction }
 												heading={ 2 }
+												size={ sectionSize || section.size }
 												noMargin
 											/>
 										) }

package/src/wizard/store/index.js

@@ -160,4 +160,29 @@ const store = createReduxStore( WIZARD_STORE_NAMESPACE, {
 	},
 } );
 
-export default () => register( store );
+/**
+ * Register the wizard store, unless it already exists.
+ *
+ * This package is bundled separately into each consuming plugin, so more than one
+ * bundle can call this on the same page (e.g. the block editor loads assets from
+ * both newspack-blocks and newspack-manager). @wordpress/data keeps a single
+ * registry on `wp.data`, so the second call is a no-op that logs
+ * `Store "newspack/wizards" is already registered.` — guard it instead.
+ *
+ * The first bundle to register wins, and it is not necessarily the newest one:
+ * consumers rebuild on their own schedules, so an older copy of this package can
+ * get there first and leave newer selectors missing. That is worth knowing about
+ * while developing, so keep the breadcrumb outside production builds.
+ */
+export default () => {
+	if ( select( WIZARD_STORE_NAMESPACE ) ) {
+		if ( 'production' !== process.env.NODE_ENV ) {
+			// eslint-disable-next-line no-console
+			console.warn(
+				`Wizard store: "${ WIZARD_STORE_NAMESPACE }" is already registered, so this copy of newspack-components was ignored. Two bundles of the package are on this page and the first one to load wins.`
+			);
+		}
+		return;
+	}
+	register( store );
+};

package/dist/cjs/accordion/index.js

@@ -1,72 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.AccordionPanel = void 0;
-var _components = require("@wordpress/components");
-var _element = require("@wordpress/element");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _divider = _interopRequireDefault(require("../divider"));
-require("./style.scss");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * WordPress dependencies
- */
-// eslint-disable-line @wordpress/no-unsafe-wp-apis
-
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-var AccordionPanel = exports.AccordionPanel = function AccordionPanel(_ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    title = _ref.title,
-    _ref$defaultOpen = _ref.defaultOpen,
-    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PanelBody, {
-    className: className,
-    title: title,
-    initialOpen: defaultOpen,
-    children: children
-  });
-};
-var Accordion = function Accordion(_ref2) {
-  var children = _ref2.children,
-    className = _ref2.className,
-    _ref2$hideSingleTitle = _ref2.hideSingleTitle,
-    hideSingleTitle = _ref2$hideSingleTitle === void 0 ? false : _ref2$hideSingleTitle,
-    _ref2$spacing = _ref2.spacing,
-    spacing = _ref2$spacing === void 0 ? 6 : _ref2$spacing;
-  var panels = _element.Children.toArray(children);
-  // With nothing to collapse against, a lone panel can render open and untitled.
-  if (hideSingleTitle && panels.length === 1) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames["default"])('newspack-accordion', className),
-      children: (0, _element.cloneElement)(panels[0], {
-        defaultOpen: true,
-        title: undefined
-      })
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
-    className: (0, _classnames["default"])('newspack-accordion', className),
-    spacing: spacing,
-    children: panels.map(function (panel, index) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
-        children: [panel, index < panels.length - 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_divider["default"], {
-          variant: "secondary",
-          marginBottom: 0,
-          marginTop: 0
-        })]
-      }, panel.key);
-    })
-  });
-};
-var _default = exports["default"] = Accordion;

package/dist/cjs/accordion/index.test.js

@@ -1,80 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("@testing-library/react");
-var _index = _interopRequireWildcard(require("./index"));
-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); }
-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; } /**
- * External dependencies
- */ /**
- * Internal dependencies
- */
-var renderPanels = function renderPanels(count) {
-  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], _objectSpread(_objectSpread({}, props), {}, {
-    children: Array.from({
-      length: count
-    }, function (_, i) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AccordionPanel, {
-        title: "Panel ".concat(i),
-        children: "content"
-      }, i);
-    })
-  })));
-};
-var dividers = function dividers(container) {
-  return container.querySelectorAll('.newspack-divider');
-};
-describe('Accordion dividers', function () {
-  it('renders no divider for a single panel', function () {
-    var _renderPanels = renderPanels(1),
-      container = _renderPanels.container;
-    expect(container.querySelectorAll('.components-panel__body')).toHaveLength(1);
-    expect(dividers(container)).toHaveLength(0);
-  });
-  it('renders a divider between panels but not after the last', function () {
-    var _renderPanels2 = renderPanels(3),
-      container = _renderPanels2.container;
-    expect(container.querySelectorAll('.components-panel__body')).toHaveLength(3);
-    expect(dividers(container)).toHaveLength(2);
-    expect(container.querySelector('.newspack-accordion').lastElementChild).not.toHaveClass('newspack-divider');
-  });
-  it('renders secondary dividers', function () {
-    var _renderPanels3 = renderPanels(2),
-      container = _renderPanels3.container;
-    expect(dividers(container)[0]).toHaveClass('newspack-divider--variant-secondary');
-  });
-});
-describe('Accordion hideSingleTitle', function () {
-  it('keeps the title on a lone panel by default', function () {
-    renderPanels(1);
-    expect(_react.screen.getByRole('button', {
-      name: 'Panel 0'
-    })).toBeInTheDocument();
-  });
-  it('drops the title and opens a lone panel when set', function () {
-    var _renderPanels4 = renderPanels(1, {
-        hideSingleTitle: true
-      }),
-      container = _renderPanels4.container;
-    expect(_react.screen.queryByRole('button', {
-      name: 'Panel 0'
-    })).not.toBeInTheDocument();
-    expect(container.querySelector('.components-panel__body')).toHaveClass('is-opened');
-    expect(_react.screen.getByText('content')).toBeInTheDocument();
-  });
-  it('leaves titles alone when there is more than one panel', function () {
-    renderPanels(2, {
-      hideSingleTitle: true
-    });
-    expect(_react.screen.getByRole('button', {
-      name: 'Panel 0'
-    })).toBeInTheDocument();
-    expect(_react.screen.getByRole('button', {
-      name: 'Panel 1'
-    })).toBeInTheDocument();
-  });
-});

package/dist/cjs/accordion/style.scss

@@ -1,35 +0,0 @@
-@use "~@wordpress/base-styles/mixins" as wp-mixins;
-@use "~@wordpress/base-styles/variables" as wp-vars;
-
-// Sit flush with the surrounding column: core insets panels horizontally, which
-// would misalign them against the section they belong to.
-.newspack-accordion {
-	.components-panel__body {
-		border: 0;
-
-		> .components-panel__body-title:hover {
-			background: none;
-		}
-	}
-
-	.components-panel__body.is-opened {
-		padding: 0;
-
-		> .components-panel__body-title {
-			margin: 0 0 wp-vars.$grid-unit-30;
-		}
-	}
-
-	.components-panel__body-toggle.components-button {
-		@include wp-mixins.heading-large();
-		padding: 0;
-
-		.components-panel__arrow {
-			right: 0;
-		}
-
-		&:focus:not(:focus-visible) {
-			box-shadow: none;
-		}
-	}
-}

package/dist/cjs/badge/index.js

@@ -1,32 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-require("./style.scss");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Internal dependencies
- */
-
-/**
- * External dependencies
- */
-
-/**
- * Badge component
- */
-var Badge = function Badge(_ref) {
-  var text = _ref.text,
-    _ref$level = _ref.level,
-    level = _ref$level === void 0 ? 'default' : _ref$level;
-  var classes = (0, _classnames["default"])('newspack-badge', "is-".concat(level));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-    className: classes,
-    children: text
-  });
-};
-var _default = exports["default"] = Badge;

package/dist/cjs/badge/style.scss

@@ -1,36 +0,0 @@
-/**
- * Badge
- */
-
-@use "~@wordpress/base-styles/colors" as wp-colors;
-@use "../../../colors/colors.module" as colors;
-
-$badge-colors: (
-	"info": colors.$primary-600,
-	"warning": wp-colors.$alert-yellow,
-	"error": wp-colors.$alert-red,
-	"success": wp-colors.$alert-green,
-);
-
-.newspack-badge {
-	background-color: color-mix(in srgb, wp-colors.$white 90%, var(--base-color));
-	border-radius: 2px;
-	color: color-mix(in srgb, wp-colors.$black 50%, var(--base-color));
-	display: block;
-	flex: 0 0 auto;
-	font-size: 12px;
-	line-height: 1.5;
-	padding: 1px 4px;
-
-	&:where(.is-default) {
-		background-color: wp-colors.$gray-100;
-		color: wp-colors.$gray-800;
-	}
-
-	// Generate color variants
-	@each $type, $color in $badge-colors {
-		&.is-#{$type} {
-			--base-color: #{$color};
-		}
-	}
-}