newspack-components 4.7.0 → 4.8.0

package/src/info-button/index.test.js

@@ -0,0 +1,163 @@
+/**
+ * External dependencies.
+ */
+import { act, fireEvent, render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies.
+ */
+import { createRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
+import InfoButton from './';
+
+const DESCRIPTION = 'Number of articles read in the last 30 day period.';
+
+const getTrigger = ( name = 'More information' ) => screen.getByRole( 'button', { name } );
+
+describe( 'InfoButton', () => {
+	afterEach( () => {
+		jest.useRealTimers();
+	} );
+
+	it( 'names the trigger briefly rather than with the whole description', () => {
+		render( <InfoButton description={ DESCRIPTION } /> );
+		expect( getTrigger() ).toBeInTheDocument();
+		expect( screen.queryByRole( 'button', { name: DESCRIPTION } ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'renders nothing at all without a description', () => {
+		const { container } = render( <InfoButton /> );
+		expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
+		expect( container.firstChild ).toBeNull();
+	} );
+
+	it( 'treats an empty description as nothing to explain', () => {
+		const { container } = render( <InfoButton description="" /> );
+		expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
+		expect( container.firstChild ).toBeNull();
+	} );
+
+	it( 'lets a consumer name the trigger for its own context', () => {
+		render( <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', () => {
+		render( <InfoButton description={ DESCRIPTION } /> );
+		expect( getTrigger().tabIndex ).toBeGreaterThanOrEqual( 0 );
+	} );
+
+	it( 'keeps the description hidden until the trigger is activated', () => {
+		render( <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', () => {
+		render( <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', () => {
+		jest.useFakeTimers();
+		render( <InfoButton description={ DESCRIPTION } /> );
+		const trigger = getTrigger();
+
+		fireEvent.mouseEnter( trigger );
+		fireEvent.mouseMove( trigger );
+		expect( screen.queryByText( DESCRIPTION ) ).not.toBeInTheDocument();
+
+		act( () => jest.advanceTimersByTime( 200 ) );
+
+		expect( screen.getByText( DESCRIPTION ) ).toBeInTheDocument();
+	} );
+
+	it( 'holds the description open long enough to overshoot the trigger', () => {
+		jest.useFakeTimers();
+		render( <InfoButton description={ DESCRIPTION } /> );
+		const trigger = getTrigger();
+
+		fireEvent.mouseEnter( trigger );
+		fireEvent.mouseMove( trigger );
+		act( () => jest.advanceTimersByTime( 200 ) );
+		expect( screen.getByText( DESCRIPTION ) ).toBeInTheDocument();
+
+		fireEvent.mouseLeave( trigger );
+		expect( screen.getByText( DESCRIPTION ) ).toBeInTheDocument();
+
+		act( () => jest.advanceTimersByTime( 200 ) );
+
+		expect( screen.queryByText( DESCRIPTION ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'uses a native button, so Enter and Space activate it', () => {
+		render( <InfoButton description={ DESCRIPTION } /> );
+		const trigger = getTrigger();
+		expect( trigger.tagName ).toBe( 'BUTTON' );
+		expect( trigger ).toHaveAttribute( 'type', 'button' );
+	} );
+
+	it( 'closes on Escape and hands focus back to the trigger', () => {
+		render( <InfoButton description={ DESCRIPTION } /> );
+		const 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', () => {
+		render( <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', () => {
+		render( <InfoButton description={ DESCRIPTION } /> );
+		fireEvent.click( getTrigger() );
+		const paragraph = screen.getByText( DESCRIPTION );
+		expect( paragraph.id ).toBeTruthy();
+		expect( document.querySelector( `[aria-describedby="${ paragraph.id }"]` ) ).toBeInTheDocument();
+	} );
+
+	it( 'renders through its own portal and positioner', () => {
+		render( <InfoButton description={ DESCRIPTION } /> );
+		fireEvent.click( getTrigger() );
+		const 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', () => {
+		render( <InfoButton description={ DESCRIPTION } id="articles-read-info" data-testid="info" /> );
+		const trigger = getTrigger();
+		expect( trigger ).toHaveAttribute( 'id', 'articles-read-info' );
+		expect( trigger ).toHaveAttribute( 'data-testid', 'info' );
+	} );
+
+	it( 'keeps its own class alongside a consumer className', () => {
+		render( <InfoButton description={ DESCRIPTION } className="custom-class" /> );
+		expect( getTrigger() ).toHaveClass( 'newspack-info-button', 'custom-class' );
+	} );
+
+	it( 'hands a consumer ref the trigger itself', () => {
+		const ref = createRef();
+		render( <InfoButton description={ DESCRIPTION } ref={ ref } /> );
+		expect( ref.current ).toBe( getTrigger() );
+	} );
+
+	it( 'names the trigger and the popup alike when given an aria-label', () => {
+		render( <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/src/info-button/index.tsx

@@ -0,0 +1,64 @@
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies.
+ */
+import { forwardRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Icon, info } from '@wordpress/icons';
+import { getWpCompatOverlaySlot, Popover, VisuallyHidden } from '@wordpress/ui';
+
+/**
+ * Internal dependencies.
+ */
+import './style.scss';
+
+type InfoButtonProps = React.ComponentPropsWithoutRef< 'button' > & {
+	description?: string;
+	triggerLabel?: string;
+};
+
+/**
+ * Uses `Popover` rather than `Tooltip`: a tooltip never opens from a touch
+ * pointer, and its popup is not exposed to assistive technology.
+ */
+const InfoButton = forwardRef< HTMLButtonElement, InfoButtonProps >( function InfoButton(
+	{ description, className, triggerLabel, 'aria-label': ariaLabel, ...rest },
+	ref
+) {
+	if ( ! description ) {
+		return null;
+	}
+
+	const name = triggerLabel || ariaLabel || __( 'More information', 'newspack-plugin' );
+
+	return (
+		<Popover.Root>
+			<Popover.Trigger
+				ref={ ref }
+				openOnHover
+				delay={ 200 }
+				closeDelay={ 200 }
+				aria-label={ name }
+				className={ classnames( 'newspack-info-button', className ) }
+				{ ...rest }
+			>
+				<Icon icon={ info } size={ 20 } />
+			</Popover.Trigger>
+			<Popover.Popup
+				variant="unstyled"
+				className="newspack-info-button__popup"
+				portal={ <Popover.Portal className="newspack-info-button__portal" container={ getWpCompatOverlaySlot() } /> }
+				positioner={ <Popover.Positioner className="newspack-info-button__positioner" side="top" sideOffset={ 4 } /> }
+			>
+				<VisuallyHidden render={ <Popover.Title /> }>{ name }</VisuallyHidden>
+				<Popover.Description>{ description }</Popover.Description>
+			</Popover.Popup>
+		</Popover.Root>
+	);
+} );
+
+export default InfoButton;

package/src/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/src/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/src/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/src/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/src/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/src/plugin-installer/index.js

@@ -8,7 +8,7 @@
 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.
@@ -227,14 +227,8 @@ class PluginInstaller extends Component {
 								</span>
 							);
 						} else if ( Status === 'active' ) {
-							actionText = (
-								<span className="newspack-plugin-installer__status">
-									{ __( 'Installed', 'newspack-plugin' ) }
-									<span className="newspack-checkbox-icon newspack-checkbox-icon--checked">
-										<Icon icon={ check } />
-									</span>
-								</span>
-							);
+							// Installed is a state, not an action, so the slot takes a badge.
+							actionText = <Badge intent="stable">{ __( 'Installed', 'newspack-plugin' ) }</Badge>;
 						}
 
 						const classes = classnames( 'newspack-action-card__plugin-installer', this.classForInstallationStatus( installationStatus ) );

package/src/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/src/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.
@@ -85,7 +89,8 @@ const SectionHeader = ( {
 		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 === 'small' && 'newspack-section-header--small',
+		size === 'hidden' && 'newspack-section-header--hidden'
 	);
 
 	// The breadcrumb `Page` owns the single page `<h1>`, so a `pageHeader` section
@@ -93,17 +98,23 @@ const SectionHeader = ( {
 	// 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.
 	const HeadingTag = `h${ heading }`;
+	// `hidden` drops the title rather than announcing a level no reader can see.
+	const hiddenText = size === 'hidden' ? 'newspack-section-header__hidden-text' : undefined;
 
 	let titleContent = null;
 
+	const renderBadge = ( badge, i ) => (
+		<Badge key={ i } className="newspack-section-header__badge" intent={ badge.intent || 'none' }>
+			{ badge.label }
+		</Badge>
+	);
+
 	if ( typeof title === 'string' ) {
 		titleContent = (
 			<div className="newspack-section-header__title-container">
-				<HeadingTag className="newspack-section-header__title">
+				<HeadingTag className={ classnames( 'newspack-section-header__title', hiddenText ) }>
 					{ title }
-					{ badges?.length
-						? badges.map( ( badge, i ) => <Badge key={ i } text={ badge.label } level={ badge.level || 'default' } /> )
-						: null }
+					{ ( badges || [] ).filter( badge => badge?.label ).map( renderBadge ) }
 				</HeadingTag>
 				{ /* Secondary action before the overflow menu, so a promoted link reads as an action rather than sitting to the right of the kebab. */ }
 				{ secondaryAction && (
@@ -134,7 +145,7 @@ const SectionHeader = ( {
 			</div>
 		);
 	} else if ( typeof title === 'function' ) {
-		titleContent = <HeadingTag className="newspack-section-header__title">{ title() }</HeadingTag>;
+		titleContent = <HeadingTag className={ classnames( 'newspack-section-header__title', hiddenText ) }>{ title() }</HeadingTag>;
 	}
 
 	return (
@@ -166,9 +177,11 @@ const SectionHeader = ( {
 				) : (
 					titleContent
 				) }
-				{ description && typeof description === 'string' && <p>{ description }</p> }
-				{ typeof description === 'function' && <p>{ description() }</p> }
-				{ description && typeof description !== 'string' && typeof description !== 'function' && <p>{ description }</p> }
+				{ description && typeof description === 'string' && <p className={ hiddenText }>{ description }</p> }
+				{ typeof description === 'function' && <p className={ hiddenText }>{ description() }</p> }
+				{ description && typeof description !== 'string' && typeof description !== 'function' && (
+					<p className={ hiddenText }>{ description }</p>
+				) }
 				{ children && <div className="newspack-section-header__children">{ children }</div> }
 			</Grid>
 			{ primaryAction && (

package/src/section-header/index.test.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { envelope } from '@wordpress/icons';
+
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import SectionHeader from '.';
+
+describe( 'SectionHeader size', () => {
+	it( 'renders a 48px icon and no small modifier by default', () => {
+		const { container } = render( <SectionHeader title="Get started" icon={ envelope } /> );
+		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"', () => {
+		const { container } = render( <SectionHeader title="Get started" icon={ envelope } size="small" /> );
+		expect( container.querySelector( '.newspack-section-header--small' ) ).toBeInTheDocument();
+		expect( container.querySelector( '.newspack-section-header__icon svg' ) ).toHaveAttribute( 'width', '24' );
+	} );
+} );