newspack-components 4.7.0 → 4.8.0

package/dist/esm/info-button/index.test.js

@@ -0,0 +1,195 @@
+/**
+ * External dependencies.
+ */
+import { act, fireEvent, render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies.
+ */
+import { createRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
+import InfoButton from './';
+import { jsx as _jsx } from "react/jsx-runtime";
+var DESCRIPTION = 'Number of articles read in the last 30 day period.';
+var getTrigger = function getTrigger() {
+  var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'More information';
+  return screen.getByRole('button', {
+    name: name
+  });
+};
+describe('InfoButton', function () {
+  afterEach(function () {
+    jest.useRealTimers();
+  });
+  it('names the trigger briefly rather than with the whole description', function () {
+    render(/*#__PURE__*/_jsx(InfoButton, {
+      description: DESCRIPTION
+    }));
+    expect(getTrigger()).toBeInTheDocument();
+    expect(screen.queryByRole('button', {
+      name: DESCRIPTION
+    })).not.toBeInTheDocument();
+  });
+  it('renders nothing at all without a description', function () {
+    var _render = render(/*#__PURE__*/_jsx(InfoButton, {})),
+      container = _render.container;
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    expect(container.firstChild).toBeNull();
+  });
+  it('treats an empty description as nothing to explain', function () {
+    var _render2 = render(/*#__PURE__*/_jsx(InfoButton, {
+        description: ""
+      })),
+      container = _render2.container;
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    expect(container.firstChild).toBeNull();
+  });
+  it('lets a consumer name the trigger for its own context', function () {
+    render(/*#__PURE__*/_jsx(InfoButton, {
+      description: DESCRIPTION,
+      triggerLabel: "More information about Articles read"
+    }));
+    expect(getTrigger('More information about Articles read')).toBeInTheDocument();
+  });
+  it('leaves the trigger in the tab order', function () {
+    render(/*#__PURE__*/_jsx(InfoButton, {
+      description: DESCRIPTION
+    }));
+    expect(getTrigger().tabIndex).toBeGreaterThanOrEqual(0);
+  });
+  it('keeps the description hidden until the trigger is activated', function () {
+    render(/*#__PURE__*/_jsx(InfoButton, {
+      description: DESCRIPTION
+    }));
+    expect(screen.queryByText(DESCRIPTION)).not.toBeInTheDocument();
+    expect(getTrigger()).toHaveAttribute('aria-expanded', 'false');
+  });
+  it('reveals the description on click, so touch users can reach it', function () {
+    render(/*#__PURE__*/_jsx(InfoButton, {
+      description: DESCRIPTION
+    }));
+    fireEvent.click(getTrigger());
+    expect(screen.getByText(DESCRIPTION)).toBeInTheDocument();
+    expect(getTrigger()).toHaveAttribute('aria-expanded', 'true');
+  });
+  it('reveals the description on hover, once the pointer has rested', function () {
+    jest.useFakeTimers();
+    render(/*#__PURE__*/_jsx(InfoButton, {
+      description: DESCRIPTION
+    }));
+    var trigger = getTrigger();
+    fireEvent.mouseEnter(trigger);
+    fireEvent.mouseMove(trigger);
+    expect(screen.queryByText(DESCRIPTION)).not.toBeInTheDocument();
+    act(function () {
+      return jest.advanceTimersByTime(200);
+    });
+    expect(screen.getByText(DESCRIPTION)).toBeInTheDocument();
+  });
+  it('holds the description open long enough to overshoot the trigger', function () {
+    jest.useFakeTimers();
+    render(/*#__PURE__*/_jsx(InfoButton, {
+      description: DESCRIPTION
+    }));
+    var trigger = getTrigger();
+    fireEvent.mouseEnter(trigger);
+    fireEvent.mouseMove(trigger);
+    act(function () {
+      return jest.advanceTimersByTime(200);
+    });
+    expect(screen.getByText(DESCRIPTION)).toBeInTheDocument();
+    fireEvent.mouseLeave(trigger);
+    expect(screen.getByText(DESCRIPTION)).toBeInTheDocument();
+    act(function () {
+      return jest.advanceTimersByTime(200);
+    });
+    expect(screen.queryByText(DESCRIPTION)).not.toBeInTheDocument();
+  });
+  it('uses a native button, so Enter and Space activate it', function () {
+    render(/*#__PURE__*/_jsx(InfoButton, {
+      description: DESCRIPTION
+    }));
+    var trigger = getTrigger();
+    expect(trigger.tagName).toBe('BUTTON');
+    expect(trigger).toHaveAttribute('type', 'button');
+  });
+  it('closes on Escape and hands focus back to the trigger', function () {
+    render(/*#__PURE__*/_jsx(InfoButton, {
+      description: DESCRIPTION
+    }));
+    var trigger = getTrigger();
+    trigger.focus();
+    fireEvent.click(trigger);
+    expect(screen.getByText(DESCRIPTION)).toBeInTheDocument();
+    fireEvent.keyDown(document.activeElement, {
+      key: 'Escape'
+    });
+    expect(screen.queryByText(DESCRIPTION)).not.toBeInTheDocument();
+    expect(trigger).toHaveFocus();
+  });
+  it('gives the popup an accessible name of its own', function () {
+    render(/*#__PURE__*/_jsx(InfoButton, {
+      description: DESCRIPTION
+    }));
+    fireEvent.click(getTrigger());
+    expect(screen.getByRole('dialog', {
+      name: 'More information'
+    })).toBeInTheDocument();
+  });
+  it('describes the popup with the description rather than naming it', function () {
+    render(/*#__PURE__*/_jsx(InfoButton, {
+      description: DESCRIPTION
+    }));
+    fireEvent.click(getTrigger());
+    var paragraph = screen.getByText(DESCRIPTION);
+    expect(paragraph.id).toBeTruthy();
+    expect(document.querySelector("[aria-describedby=\"".concat(paragraph.id, "\"]"))).toBeInTheDocument();
+  });
+  it('renders through its own portal and positioner', function () {
+    render(/*#__PURE__*/_jsx(InfoButton, {
+      description: DESCRIPTION
+    }));
+    fireEvent.click(getTrigger());
+    var paragraph = screen.getByText(DESCRIPTION);
+    expect(paragraph.closest('.newspack-info-button__positioner')).toBeInTheDocument();
+    expect(paragraph.closest('.newspack-info-button__portal')).toBeInTheDocument();
+  });
+  it('forwards unknown props to the trigger', function () {
+    render(/*#__PURE__*/_jsx(InfoButton, {
+      description: DESCRIPTION,
+      id: "articles-read-info",
+      "data-testid": "info"
+    }));
+    var trigger = getTrigger();
+    expect(trigger).toHaveAttribute('id', 'articles-read-info');
+    expect(trigger).toHaveAttribute('data-testid', 'info');
+  });
+  it('keeps its own class alongside a consumer className', function () {
+    render(/*#__PURE__*/_jsx(InfoButton, {
+      description: DESCRIPTION,
+      className: "custom-class"
+    }));
+    expect(getTrigger()).toHaveClass('newspack-info-button', 'custom-class');
+  });
+  it('hands a consumer ref the trigger itself', function () {
+    var ref = createRef();
+    render(/*#__PURE__*/_jsx(InfoButton, {
+      description: DESCRIPTION,
+      ref: ref
+    }));
+    expect(ref.current).toBe(getTrigger());
+  });
+  it('names the trigger and the popup alike when given an aria-label', function () {
+    render(/*#__PURE__*/_jsx(InfoButton, {
+      description: DESCRIPTION,
+      "aria-label": "More information about Articles read"
+    }));
+    fireEvent.click(getTrigger('More information about Articles read'));
+    expect(screen.getByRole('dialog', {
+      name: 'More information about Articles read'
+    })).toBeInTheDocument();
+  });
+});

package/dist/esm/info-button/style.scss

@@ -1,18 +1,50 @@
-/**
- * Info Button
- */
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+@use "~@wordpress/base-styles/z-index" as wp-z;
 
 .newspack-info-button {
-	display: inline-block;
-	flex: 0 0 24px;
-	height: 24px;
-	margin: 0;
-	margin-left: 4px;
-	width: 24px;
+	align-items: center;
+	background: none;
+	border: none;
+	border-radius: var(--wpds-border-radius-sm, #{wp-vars.$radius-small});
+	color: inherit;
+	cursor: var(--wpds-cursor-control, pointer);
+	display: inline-flex;
+	flex: 0 0 auto;
+	height: wp-vars.$button-size-small;
+	justify-content: center;
+	padding: 0;
 	vertical-align: middle;
+	width: wp-vars.$button-size-small;
 
 	svg {
 		display: block;
 		fill: currentcolor;
 	}
+
+	&:focus-visible {
+		outline: var(--wp-admin-border-width-focus, #{wp-vars.$border-width-focus-fallback}) solid var(--wp-admin-theme-color, #{wp-colors.$gray-900});
+		outline-offset: 0;
+	}
+}
+
+.newspack-info-button__portal {
+	--wp-ui-popover-z-index: #{wp-z.z-index(".components-popover")};
+}
+
+.newspack-info-button__positioner {
+	max-width: var(--wpds-dimension-surface-width-sm, calc(#{wp-vars.$grid-unit} * 40));
+}
+
+.newspack-info-button__popup {
+	background-color: wp-colors.$gray-900;
+	border-radius: var(--wpds-border-radius-md, #{wp-vars.$radius-medium});
+	box-shadow: var(--wpds-elevation-sm, #{wp-vars.$elevation-small});
+	color: wp-colors.$white;
+	outline: 0;
+	padding: var(--wpds-dimension-padding-xs, #{wp-vars.$grid-unit-05}) var(--wpds-dimension-padding-sm, #{wp-vars.$grid-unit-10});
+
+	@media (forced-colors: active) {
+		border: var(--wpds-border-width-xs, #{wp-vars.$border-width}) solid CanvasText;
+	}
 }

package/dist/esm/modal/style.scss

@@ -2,18 +2,18 @@
  * Modal
  */
 
-@use "../../../colors/colors.module" as colors;
+@use "../../../colors/colors.module" as np-colors;
 
 .newspack-modal {
 	// 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};
 
 	border-radius: 8px;
 	margin: auto;
@@ -58,11 +58,11 @@
 
 	&--destructive {
 		.components-button.is-primary {
-			background-color: colors.$error-500;
-			color: colors.$neutral-000;
+			background-color: np-colors.$error-500;
+			color: np-colors.$neutral-000;
 			&:hover,
 			&:focus {
-				background-color: colors.$error-600;
+				background-color: np-colors.$error-600;
 			}
 		}
 	}

package/dist/esm/newspack-icon/style.scss

@@ -1,22 +1,22 @@
-@use '../../../colors/colors.module.scss' as colors;
+@use "../../../colors/colors.module" as np-colors;
 
 /**
  * Newspack Icon
  */
 
 .newspack-icon {
-	background: colors.$primary-600;
+	background: np-colors.$primary-600;
 	fill: white;
 	padding: 12px;
 
 	&--white {
 		background: white;
-		fill: colors.$primary-600;
+		fill: np-colors.$primary-600;
 	}
 
 	&--simple {
 		background: none;
-		fill: colors.$primary-600;
+		fill: np-colors.$primary-600;
 		padding: 0;
 	}
 

package/dist/esm/notice/style.scss

@@ -4,7 +4,7 @@
 
 @use "sass:color";
 @use "~@wordpress/base-styles/colors" as wp-colors;
-@use "../../../colors/colors.module" as colors;
+@use "../../../colors/colors.module" as np-colors;
 
 .newspack-notice {
 	align-items: center;
@@ -23,7 +23,7 @@
 	}
 
 	&__is-debug {
-		background: colors.$primary-600;
+		background: np-colors.$primary-600;
 		border-radius: 50%;
 		bottom: 16px;
 		box-shadow: 0 0 8px 4px rgba(black, 0.08);
@@ -63,7 +63,7 @@
 	}
 
 	&__is-help {
-		background: colors.$primary-050;
+		background: np-colors.$primary-050;
 
 		> svg {
 			fill: var(--wp-admin-theme-color);

package/dist/esm/page/style.scss

@@ -1,4 +1,4 @@
-@use "../../../colors/colors.module" as colors;
+@use "../../../colors/colors.module" as np-colors;
 @use "~@wordpress/base-styles/colors" as wp-colors;
 @use "~@wordpress/base-styles/mixins" as wp-mixins;
 @use "~@wordpress/base-styles/variables" as wp-vars;
@@ -20,21 +20,21 @@
 // without per-component overrides.
 /* stylelint-disable plugin-wpds/no-setting-wpds-custom-properties -- deliberate Newspack brand override of the wpds brand tokens. */
 :root {
-	--wpds-color-background-interactive-brand-strong: #{colors.$primary-600};
-	--wpds-color-background-interactive-brand-strong-active: #{colors.$primary-800};
-	--wpds-color-background-interactive-brand-weak-active: #{colors.$primary-000};
-	--wpds-color-background-surface-brand: #{colors.$primary-000};
-	--wpds-color-background-thumb-brand: #{colors.$primary-600};
-	--wpds-color-background-thumb-brand-active: #{colors.$primary-600};
-	--wpds-color-foreground-interactive-brand: #{colors.$primary-600};
-	--wpds-color-foreground-interactive-brand-active: #{colors.$primary-800};
-	--wpds-color-foreground-interactive-brand-disabled: #{colors.$primary-400};
-	--wpds-color-stroke-focus: #{colors.$primary-600};
-	--wpds-color-stroke-interactive-brand: #{colors.$primary-600};
-	--wpds-color-stroke-interactive-brand-active: #{colors.$primary-800};
-	--wpds-color-stroke-interactive-brand-disabled: #{colors.$primary-100};
-	--wpds-color-stroke-surface-brand: #{colors.$primary-000};
-	--wpds-color-stroke-surface-brand-strong: #{colors.$primary-600};
+	--wpds-color-background-interactive-brand-strong: #{np-colors.$primary-600};
+	--wpds-color-background-interactive-brand-strong-active: #{np-colors.$primary-800};
+	--wpds-color-background-interactive-brand-weak-active: #{np-colors.$primary-000};
+	--wpds-color-background-surface-brand: #{np-colors.$primary-000};
+	--wpds-color-background-thumb-brand: #{np-colors.$primary-600};
+	--wpds-color-background-thumb-brand-active: #{np-colors.$primary-600};
+	--wpds-color-foreground-interactive-brand: #{np-colors.$primary-600};
+	--wpds-color-foreground-interactive-brand-active: #{np-colors.$primary-800};
+	--wpds-color-foreground-interactive-brand-disabled: #{np-colors.$primary-400};
+	--wpds-color-stroke-focus: #{np-colors.$primary-600};
+	--wpds-color-stroke-interactive-brand: #{np-colors.$primary-600};
+	--wpds-color-stroke-interactive-brand-active: #{np-colors.$primary-800};
+	--wpds-color-stroke-interactive-brand-disabled: #{np-colors.$primary-100};
+	--wpds-color-stroke-surface-brand: #{np-colors.$primary-000};
+	--wpds-color-stroke-surface-brand-strong: #{np-colors.$primary-600};
 }
 /* stylelint-enable plugin-wpds/no-setting-wpds-custom-properties */
 

package/dist/esm/plugin-installer/index.js

@@ -18,7 +18,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 import apiFetch from '@wordpress/api-fetch';
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Icon, check } from '@wordpress/icons';
+import { Badge } from '@wordpress/ui';
 
 /**
  * Internal dependencies.
@@ -254,14 +254,10 @@ var PluginInstaller = /*#__PURE__*/function (_Component) {
               })]
             });
           } else if (Status === 'active') {
-            actionText = /*#__PURE__*/_jsxs("span", {
-              className: "newspack-plugin-installer__status",
-              children: [__('Installed', 'newspack-plugin'), /*#__PURE__*/_jsx("span", {
-                className: "newspack-checkbox-icon newspack-checkbox-icon--checked",
-                children: /*#__PURE__*/_jsx(Icon, {
-                  icon: check
-                })
-              })]
+            // Installed is a state, not an action, so the slot takes a badge.
+            actionText = /*#__PURE__*/_jsx(Badge, {
+              intent: "stable",
+              children: __('Installed', 'newspack-plugin')
             });
           }
           var classes = classnames('newspack-action-card__plugin-installer', _this2.classForInstallationStatus(installationStatus));

package/dist/esm/plugin-installer/style.scss

@@ -2,8 +2,6 @@
  * Plugin Installer
  */
 
-@use "~@wordpress/base-styles/colors" as wp-colors;
-
 .newspack-card {
 	.newspack-plugin-installer__status {
 		align-items: center;
@@ -35,25 +33,16 @@
 	}
 
 	&.newspack-plugin-installer__status-active {
-		box-shadow: inset 4px 0 0 wp-colors.$alert-green;
-
-		.newspack-plugin-installer__checkbox {
-			background: wp-colors.$alert-green;
-			box-shadow: none;
-		}
-
-		svg {
-			fill: white;
-		}
+		box-shadow: inset 4px 0 0 var( --wpds-color-stroke-surface-success-strong, #008030 );
 	}
 
 	&.newspack-plugin-installer__status-error {
-		box-shadow: inset 4px 0 0 wp-colors.$alert-red;
+		box-shadow: inset 4px 0 0 var( --wpds-color-stroke-surface-error-strong, #cc1818 );
 	}
 
 	&.newspack-plugin-installer__status-installing,
 	&.newspack-plugin-installer__status-none {
-		box-shadow: inset 4px 0 0 wp-colors.$gray-100;
+		box-shadow: inset 4px 0 0 var( --wpds-color-stroke-surface-neutral-weak, #f0f0f0 );
 	}
 
 	// Is Small

package/dist/esm/section-header/index.js

@@ -9,11 +9,13 @@ import { __ } from '@wordpress/i18n';
 import { useEffect, useRef } from '@wordpress/element';
 import { DropdownMenu, MenuItem, Tooltip, __experimentalHStack as HStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
 import { Icon, chevronLeft, moreVertical } from '@wordpress/icons';
+import { Badge } from '@wordpress/ui';
 
 /**
  * Internal dependencies
  */
-import { Badge, Button, Grid } from '..';
+import Button from '../button';
+import Grid from '../grid';
 import './style.scss';
 
 /**
@@ -26,17 +28,19 @@ import classnames from 'classnames';
  *
  * @typedef {Object} SectionHeaderProps
  * @property {string}             [backNav='']       - URL to navigate back to.
- * @property {string|string[]}    [badge]            - Badge to display in the header.
- * @property {string}             [badgeLevel]       - Badge level, e.g., 'success', 'info', 'warning', 'error'.
+ * @property {Object[]}           [badges]           - Badges to display beside the title, each `{ label, intent }`.
  * @property {boolean}            [centered=false]   - Indicates if the header is centered.
- * @property {?string}            [className=null]   - Additional CSS class name.
+ * @property {?string}            [className=null]   - Additional CSS class name, applied to the outer container.
  * @property {string|Function|*}  [description]      - Description of the section.
  * @property {number}             [heading=2]        - HTML heading level, e.g., 1 for h1, 2 for h2, etc.
  * @property {string|Function|*}  [icon]             - Icon to display in the header.
  * @property {boolean}            [isWhite=false]    - Indicates if the header should use a white theme.
+ * @property {Object[]}           [menu]             - Overflow menu items.
  * @property {boolean}            [noMargin=false]   - Indicates if the header should have no margin.
  * @property {boolean}            [pageHeader=false] - Indicates if the header is used as a page header.
- * @property {string}             [size='default']   - Size variant, either 'default' or 'small'. Scales the title, and the icon with it, independently of `pageHeader`.
+ * @property {Object}             [primaryAction]    - Primary button, `{ label, href, action }`.
+ * @property {Object}             [secondaryAction]  - Secondary link, `{ label, href, action }`.
+ * @property {string}             [size='default']   - Size variant: 'small', 'default', or 'hidden' to drop the title and description while the back nav stays visible.
  * @property {string}             title              - The title of the section.
  * @property {?string}            [id=null]          - Optional ID for the header element.
  * @property {?string|Function|*} [children=null]    - Optional children to display in the header.
@@ -96,25 +100,31 @@ var SectionHeader = function SectionHeader(_ref) {
       }, 250);
     }
   }, []);
-  var classes = classnames('newspack-section-header', centered && 'newspack-section-header--is-centered', isWhite && 'newspack-section-header--is-white', noMargin && 'newspack-section-header--no-margin', pageHeader && 'newspack-section-header--page-header', size === 'small' && 'newspack-section-header--small');
+  var classes = classnames('newspack-section-header', centered && 'newspack-section-header--is-centered', isWhite && 'newspack-section-header--is-white', noMargin && 'newspack-section-header--no-margin', pageHeader && 'newspack-section-header--page-header', size === 'small' && 'newspack-section-header--small', size === 'hidden' && 'newspack-section-header--hidden');
 
   // The breadcrumb `Page` owns the single page `<h1>`, so a `pageHeader` section
   // is a secondary heading: its level follows `heading` (default 2). `pageHeader`
   // controls only the enlarged, centered styling — not the tag. Pass `heading={ 1 }`
   // on a headerless screen that needs the section header to be the page's h1.
   var HeadingTag = "h".concat(heading);
+  // `hidden` drops the title rather than announcing a level no reader can see.
+  var hiddenText = size === 'hidden' ? 'newspack-section-header__hidden-text' : undefined;
   var titleContent = null;
+  var renderBadge = function renderBadge(badge, i) {
+    return /*#__PURE__*/_jsx(Badge, {
+      className: "newspack-section-header__badge",
+      intent: badge.intent || 'none',
+      children: badge.label
+    }, i);
+  };
   if (typeof title === 'string') {
     titleContent = /*#__PURE__*/_jsxs("div", {
       className: "newspack-section-header__title-container",
       children: [/*#__PURE__*/_jsxs(HeadingTag, {
-        className: "newspack-section-header__title",
-        children: [title, badges !== null && badges !== void 0 && badges.length ? badges.map(function (badge, i) {
-          return /*#__PURE__*/_jsx(Badge, {
-            text: badge.label,
-            level: badge.level || 'default'
-          }, i);
-        }) : null]
+        className: classnames('newspack-section-header__title', hiddenText),
+        children: [title, (badges || []).filter(function (badge) {
+          return badge === null || badge === void 0 ? void 0 : badge.label;
+        }).map(renderBadge)]
       }), secondaryAction && /*#__PURE__*/_jsx("div", {
         className: "newspack-section-header__secondary-action",
         children: /*#__PURE__*/_jsx(Button, {
@@ -143,7 +153,7 @@ var SectionHeader = function SectionHeader(_ref) {
     });
   } else if (typeof title === 'function') {
     titleContent = /*#__PURE__*/_jsx(HeadingTag, {
-      className: "newspack-section-header__title",
+      className: classnames('newspack-section-header__title', hiddenText),
       children: title()
     });
   }
@@ -178,10 +188,13 @@ var SectionHeader = function SectionHeader(_ref) {
           })
         }), titleContent]
       }) : titleContent, description && typeof description === 'string' && /*#__PURE__*/_jsx("p", {
+        className: hiddenText,
         children: description
       }), typeof description === 'function' && /*#__PURE__*/_jsx("p", {
+        className: hiddenText,
         children: description()
       }), description && typeof description !== 'string' && typeof description !== 'function' && /*#__PURE__*/_jsx("p", {
+        className: hiddenText,
         children: description
       }), children && /*#__PURE__*/_jsx("div", {
         className: "newspack-section-header__children",

package/dist/esm/section-header/index.test.js

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { envelope } from '@wordpress/icons';
+
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import SectionHeader from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+describe('SectionHeader size', function () {
+  it('renders a 48px icon and no small modifier by default', function () {
+    var _render = render(/*#__PURE__*/_jsx(SectionHeader, {
+        title: "Get started",
+        icon: envelope
+      })),
+      container = _render.container;
+    expect(container.querySelector('.newspack-section-header--small')).not.toBeInTheDocument();
+    expect(container.querySelector('.newspack-section-header__icon svg')).toHaveAttribute('width', '48');
+  });
+  it('renders a 24px icon and the small modifier at size="small"', function () {
+    var _render2 = render(/*#__PURE__*/_jsx(SectionHeader, {
+        title: "Get started",
+        icon: envelope,
+        size: "small"
+      })),
+      container = _render2.container;
+    expect(container.querySelector('.newspack-section-header--small')).toBeInTheDocument();
+    expect(container.querySelector('.newspack-section-header__icon svg')).toHaveAttribute('width', '24');
+  });
+});

package/dist/esm/section-header/style.scss

@@ -2,10 +2,10 @@
  * Section Header
  */
 
+@use "~@wordpress/base-styles/breakpoints" as wp-breakpoints;
 @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;
 
 .newspack-section-header {
 	flex: 1;
@@ -22,6 +22,9 @@
 		&:has(> .newspack-section-header--no-margin) {
 			margin-top: 0;
 		}
+		&:has(> .newspack-section-header--hidden) {
+			margin-block: 0;
+		}
 		&.newspack-section-header--has-primary-action {
 			display: flex;
 			flex-direction: column;
@@ -32,7 +35,7 @@
 			}
 		}
 		&.newspack-section-header--has-back-nav {
-			@media (min-width: 782px) {
+			@include wp-mixins.break-wide {
 				.newspack-section-header__title-container,
 				p {
 					max-width: calc(50% - 16px);
@@ -42,7 +45,10 @@
 	}
 
 	&__back-nav {
-		@media (min-width: 1280px) {
+		@media (max-width: #{wp-breakpoints.$break-wide - 1px}) {
+			display: none;
+		}
+		@include wp-mixins.break-wide {
 			left: 0;
 			position: absolute;
 			top: 50%;
@@ -101,6 +107,18 @@
 		}
 	}
 
+	&#{&}--hidden {
+		.newspack-section-header__hidden-text {
+			display: none;
+		}
+
+		.newspack-section-header__back-nav {
+			@include wp-mixins.break-wide {
+				transform: translate(calc(-100% - 8px), calc(-50% + 12px));
+			}
+		}
+	}
+
 	&__icon {
 		background-color: var(--wp-admin-theme-color-lighter-10);
 		border-radius: 100%;
@@ -125,9 +143,7 @@
 		display: flex;
 		gap: 8px;
 
-		.newspack-section-header__menu,
-		.newspack-section-header__secondary-action,
-		.newspack-badge {
+		.newspack-section-header__secondary-action {
 			margin-top: 8px;
 		}
 	}