newspack-components 4.7.0 → 4.8.0

package/src/card-feature/index.tsx

@@ -7,20 +7,19 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __, _x, sprintf } from '@wordpress/i18n';
-import { isValidElement } from '@wordpress/element';
-import { DropdownMenu, __experimentalHStack as HStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
+import { createElement, isValidElement } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import { DropdownMenu } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
+import { Badge, Card, Stack } from '@wordpress/ui';
 
 /**
  * Internal dependencies
  */
-import Badge from '../badge';
 import Button from '../button';
-import Card from '../card';
+import type { BadgeIntent, CardBadge, HeadingLevel } from '../types';
 import './style.scss';
 
-type BadgeLevel = 'default' | 'info' | 'success' | 'warning' | 'error';
-
 type CardFeatureIcon = {
 	/** The icon node to render (e.g. a WordPress <Icon> component). */
 	node: React.ReactNode;
@@ -31,7 +30,7 @@ type CardFeatureIcon = {
 	/**
 	 * Border-radius of the icon container.
 	 * 'small' uses $radius-small (2px), 'full' uses $radius-round (50%).
-	 * Only relevant when backgroundColor is set.
+	 * Only relevant when backgroundColor is set, where it defaults to 'small'.
 	 */
 	radius?: 'small' | 'full';
 };
@@ -44,16 +43,19 @@ type MoreControl = {
 
 type CardFeatureProps = {
 	title: string;
+	/** Heading level for the title. Defaults to 3, which sits under a `SectionHeader` or a `WizardsTab` heading. */
+	headingLevel?: HeadingLevel;
 	description?: string;
 	/** Icon shown beside the title: a descriptor (coloured badge) or a ready element rendered as-is. */
 	icon?: CardFeatureIcon | React.ReactElement;
 	/** Whether the feature is currently enabled. */
 	enabled?: boolean;
 	/**
-	 * When set, the card enters the "unmet requirements" state: an error
-	 * badge displays this string and the title/description are muted. By
-	 * default the primary button is disabled — set `requirementsActionable`
+	 * When set, the card enters the "unmet requirements" state: an error badge
+	 * displays this string and the title drops to the muted text colour. By
+	 * default the primary button is blocked — set `requirementsActionable`
 	 * if the primary button is the remediation for the unmet requirement.
+	 * Also the button's accessible description, so it must read after the label.
 	 */
 	requirements?: string;
 	/**
@@ -63,22 +65,24 @@ type CardFeatureProps = {
 	 * (e.g. can be disabled), unlike a hard-locked requirement.
 	 */
 	requirementsActionable?: boolean;
-	/** Primary button label when not enabled. Default: "Enable". */
+	/** Label for the primary button in its "Enable" states: not enabled, or enabled with an unmet requirement. Default: "Enable". */
 	enableLabel?: string;
 	/** Show the primary button as busy (spinner) and disabled while an action is in flight. */
 	busy?: boolean;
-	/** Primary button label when enabled. Default: "Configure". */
+	/** Label for the primary button in its "Configure" state: enabled, with no unmet requirement. Default: "Configure". */
 	configureLabel?: string;
-	/** Called when the primary button is clicked and the feature is not enabled. */
+	/**
+	 * Called when the primary button is clicked while it reads "Enable". That is
+	 * the not-enabled state, and also the enabled state with unmet requirements,
+	 * where the requirement rather than the feature is what the button acts on.
+	 */
 	onEnable?: () => void;
-	/** Called when the primary button is clicked and the feature is enabled. */
+	/** Called when the primary button is clicked while it reads "Configure": enabled, with no unmet requirements. */
 	onConfigure?: () => void;
 	/** Controls rendered inside the "More" dropdown, shown when enabled — including the unmet-requirements state when `requirementsActionable`. */
 	moreControls?: MoreControl[];
-	/** Badge text shown when enabled. Default: "Enabled". */
-	badgeText?: string;
-	/** Badge level shown when enabled. Default: "success". */
-	badgeLevel?: BadgeLevel;
+	/** Badge shown when enabled. Ignored while `requirements` is set, which takes the badge. Defaults to "Enabled" at the "stable" intent. */
+	badge?: CardBadge;
 	className?: string;
 };
 
@@ -91,6 +95,7 @@ type CardFeatureProps = {
  */
 const CardFeature = ( {
 	title,
+	headingLevel = 3,
 	description,
 	icon,
 	enabled = false,
@@ -102,20 +107,22 @@ const CardFeature = ( {
 	onEnable,
 	onConfigure,
 	moreControls,
-	badgeText,
-	badgeLevel = 'success',
+	badge: badgeProp,
 	className,
 }: CardFeatureProps ) => {
+	const instanceId = useInstanceId( CardFeature, 'newspack-card-feature' );
+	const badgeId = `${ instanceId }__badge`;
+	const describedById = requirements ? badgeId : undefined;
 	const isMuted = !! requirements;
 	const classes = classnames( 'newspack-card-feature', className, {
 		'newspack-card-feature--muted': isMuted,
 	} );
 
-	let badge: { text: string; level: BadgeLevel } | undefined;
+	let badge: { label: string; intent: BadgeIntent } | undefined;
 	if ( requirements ) {
-		badge = { text: requirements, level: 'error' };
+		badge = { label: requirements, intent: 'high' };
 	} else if ( enabled ) {
-		badge = { text: badgeText ?? __( 'Enabled', 'newspack-plugin' ), level: badgeLevel };
+		badge = { label: badgeProp?.label ?? __( 'Enabled', 'newspack-plugin' ), intent: badgeProp?.intent ?? 'stable' };
 	}
 
 	const isConfigureState = enabled && ! requirements;
@@ -149,7 +156,9 @@ const CardFeature = ( {
 		renderedIcon = icon;
 	} else if ( iconDescriptor ) {
 		renderedIcon = (
+			// Decorative: a vendor mark passed as `node` carries no aria-hidden of its own.
 			<div
+				aria-hidden="true"
 				className={ iconClasses }
 				style={ {
 					backgroundColor: iconDescriptor.backgroundColor,
@@ -162,51 +171,52 @@ const CardFeature = ( {
 	}
 
 	return (
-		<Card
-			className={ classes }
-			__experimentalCoreCard
-			__experimentalCoreProps={ {
-				headerStyle: { padding: 32 },
-				header: (
-					<>
-						<HStack alignment="top" spacing={ 4 }>
-							<div className="newspack-card-feature__content">
-								<h2 className="newspack-card-feature__title">{ title }</h2>
-								{ description && <p className="newspack-card-feature__description">{ description }</p> }
-							</div>
-							{ renderedIcon }
-						</HStack>
-						<HStack alignment="edge">
-							<HStack expanded={ false } spacing="8px">
-								<Button
-									variant={ isConfigureState ? 'tertiary' : 'secondary' }
-									disabled={ ( isMuted && ! requirementsActionable ) || busy }
-									isBusy={ busy }
-									onClick={ handleButtonClick }
-									size="compact"
-									aria-label={ buttonAccessibleLabel }
-								>
-									{ buttonLabel }
-								</Button>
-								{ showMoreControls && (
-									<DropdownMenu
-										icon={ moreVertical }
-										label={ sprintf(
-											// translators: %s: the feature's name.
-											__( 'More options for %s', 'newspack-plugin' ),
-											title
-										) }
-										controls={ moreControls }
-										toggleProps={ { size: 'compact' } }
-									/>
+		<Card.Root className={ classes }>
+			<Card.Header>
+				<Stack direction="row" align="start" gap="lg">
+					<Stack className="newspack-card-feature__content" direction="column" gap="sm">
+						{ createElement( `h${ headingLevel }`, { className: 'newspack-card-feature__title' }, title ) }
+						{ description && <p className="newspack-card-feature__description">{ description }</p> }
+					</Stack>
+					{ renderedIcon }
+				</Stack>
+			</Card.Header>
+			<Card.Content className="newspack-card-feature__actions">
+				<Stack direction="row" align="center" justify="space-between" gap="sm" wrap="wrap">
+					<Stack direction="row" align="center" gap="sm">
+						<Button
+							variant={ isConfigureState ? 'tertiary' : 'secondary' }
+							accessibleWhenDisabled
+							aria-describedby={ describedById }
+							aria-label={ buttonAccessibleLabel }
+							disabled={ ( isMuted && ! requirementsActionable ) || busy }
+							isBusy={ busy }
+							onClick={ handleButtonClick }
+							size="compact"
+						>
+							{ buttonLabel }
+						</Button>
+						{ showMoreControls && (
+							<DropdownMenu
+								icon={ moreVertical }
+								label={ sprintf(
+									// translators: %s: the feature's name.
+									__( 'More options for %s', 'newspack-plugin' ),
+									title
 								) }
-							</HStack>
-							{ badge && <Badge text={ badge.text } level={ badge.level } /> }
-						</HStack>
-					</>
-				),
-			} }
-		/>
+								controls={ moreControls }
+								toggleProps={ { size: 'compact' } }
+							/>
+						) }
+					</Stack>
+					{ badge && (
+						<Badge id={ describedById } className="newspack-card-feature__badge" intent={ badge.intent }>
+							{ badge.label }
+						</Badge>
+					) }
+				</Stack>
+			</Card.Content>
+		</Card.Root>
 	);
 };
 

package/src/card-feature/style.scss

@@ -2,55 +2,51 @@
  * CardFeature
  */
 
-@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/mixins" as wp-mixins;
 @use "~@wordpress/base-styles/variables" as wp-vars;
+@use "../mixins" as np-mixins;
 
 .newspack-card-feature {
 	height: 100%;
 
-	.newspack-card--core__header {
-		height: 100%;
-	}
-
-	.newspack-card--core__header-content {
-		gap: 16px;
-		display: flex;
-		flex-direction: column;
-		height: 100%;
+	&__actions {
+		margin-top: auto;
 
-		// Push the action row (buttons + badge) to the bottom.
-		> :last-child {
-			margin-top: auto;
+		.newspack-card-feature__badge {
+			flex-shrink: 1;
+			min-width: 0;
 		}
 	}
 
 	&__content {
 		flex: 1;
-		min-width: 0; // prevent flex blowout on long words
+		min-width: 0;
 	}
 
 	&__title {
-		font-size: wp-vars.$font-size-x-large;
-		line-height: wp-vars.$font-line-height-x-large;
-		text-align: left;
+		@include wp-mixins.heading-x-large();
+
+		margin: 0;
 	}
 
 	&__description {
-		text-align: left;
+		@include np-mixins.text-muted;
+
+		margin: 0;
 	}
 
 	&__icon {
 		align-items: center;
 		display: flex;
-		flex: 0 0 40px;
-		height: 40px;
+		flex: 0 0 wp-vars.$grid-unit-50;
+		height: wp-vars.$grid-unit-50;
 		justify-content: center;
 
 		svg {
 			display: block;
 			fill: currentcolor;
-			height: 24px;
-			width: 24px;
+			height: wp-vars.$grid-unit-30;
+			width: wp-vars.$grid-unit-30;
 		}
 
 		&--radius-small {
@@ -62,14 +58,7 @@
 		}
 	}
 
-	// Unmet requirements state: lighter border, muted content.
-	&.newspack-card-feature--muted {
-		border-color: wp-colors.$gray-100;
-		box-shadow: wp-colors.$gray-100 0 0 0 1px;
-
-		.newspack-card-feature__title,
-		.newspack-card-feature__description {
-			color: wp-colors.$gray-700;
-		}
+	&.newspack-card-feature--muted &__title {
+		@include np-mixins.text-muted;
 	}
 }

package/src/card-form/README.md

@@ -33,7 +33,7 @@ const handleClose = () => setIsOpen( false );
 <CardForm
 	title={ __( 'Above Header', 'newspack-plugin' ) }
 	description={ __( 'Displays an ad above the site header.', 'newspack-plugin' ) }
-	badge={ isEnabled ? { level: 'success', text: __( 'Enabled', 'newspack-plugin' ) } : undefined }
+	badge={ isEnabled ? { intent: 'stable', label: __( 'Enabled', 'newspack-plugin' ) } : undefined }
 	actions={
 		isEnabled ? (
 			<Button variant="tertiary" size="compact" onClick={ () => isOpen ? handleClose() : setIsOpen( true ) }>
@@ -55,14 +55,16 @@ const handleClose = () => setIsOpen( false );
 </CardForm>
 ```
 
-## With a custom badge level
+## With a custom badge intent
 
-The `badge` prop accepts any `BadgeLevel`. Use `warning` or `error` to communicate a degraded state.
+The `badge` prop accepts any `BadgeIntent`. Use `medium` or `high` to communicate a degraded state.
+
+Omitting `intent` defaults to `stable`, because a `CardForm` badge marks a feature that is switched on. That differs from `ActionCard` and `SectionHeader`, whose badges are free-form labels and so default to `none`.
 
 ```tsx
 <CardForm
 	title={ __( 'Above Header', 'newspack-plugin' ) }
-	badge={ { level: 'warning', text: __( 'Missing ad unit', 'newspack-plugin' ) } }
+	badge={ { intent: 'medium', label: __( 'Missing ad unit', 'newspack-plugin' ) } }
 	actions={ <Button variant="tertiary" size="compact">{ __( 'Edit', 'newspack-plugin' ) }</Button> }
 	isOpen={ false }
 />
@@ -91,11 +93,11 @@ Omit `badge` (or pass `undefined`) to show no badge at all.
 |---|---|---|---|
 | `title` | `string` | — | Card heading (**required**) |
 | `description` | `string` | — | Supporting text below the title |
-| `badge` | `{ text: string; level?: BadgeLevel }` | — | Badge shown next to the actions slot. Omit or pass `undefined` to hide. |
+| `badge` | `{ label: string; intent?: BadgeIntent }` | — | Badge shown next to the actions slot. Omit or pass `undefined` to hide. |
 | `actions` | `React.ReactNode` | — | JSX rendered in the header action area (buttons, dropdowns, etc.) |
 | `isOpen` | `boolean` | `false` | When `true`, renders `children` in the card body and removes the header border |
 | `onRequestClose` | `() => void` | — | Called when the user presses Escape while focus is inside the open form |
-| `titleLevel` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `3` | Heading level rendered for `title`. Pick the level that fits the surrounding document outline. |
+| `titleLevel` | `2 \| 3 \| 4 \| 5 \| 6` | `3` | Heading level rendered for `title`. Pick the level that fits the surrounding document outline. |
 | `className` | `string` | — | Additional class name applied to the card element |
 | `children` | `React.ReactNode` | — | Form content rendered inside the card body when `isOpen` is `true` |
 
@@ -106,8 +108,6 @@ Omit `badge` (or pass `undefined`) to show no badge at all.
 - The Escape listener is scoped to the open form's body, so multiple open cards do not all close on a single keypress. If an inner control needs to consume Escape (for example, to close its own menu), call `event.preventDefault()` and CardForm will ignore it.
 
 
-### `BadgeLevel`
+### `BadgeIntent`
 
-```ts
-type BadgeLevel = 'default' | 'info' | 'success' | 'warning' | 'error';
-```
+Defined in [`src/types.ts`](../types.ts), which derives the union from the `@wordpress/ui` `Badge` component so the values track the library instead of a copy kept here.

package/src/card-form/index.tsx

@@ -17,23 +17,19 @@ import classnames from 'classnames';
 import { useEffect, useRef, createElement } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 import { __experimentalHStack as HStack, __experimentalVStack as VStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
+import { Badge } from '@wordpress/ui';
 
 /**
  * Internal dependencies
  */
-import Badge, { BadgeLevel } from '../badge';
 import Card from '../card';
+import type { CardBadge, HeadingLevel } from '../types';
 import './style.scss';
 
-type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-
 type CardFormProps = {
 	title: string;
 	description?: string;
-	badge?: {
-		text: string;
-		level?: BadgeLevel;
-	};
+	badge?: CardBadge;
 	/** JSX rendered in the header action area (buttons, etc.). */
 	actions?: React.ReactNode;
 	/** When true, children are shown and the header border is removed. */
@@ -109,7 +105,7 @@ const CardForm = ( { title, description, badge, actions, isOpen = false, onReque
 							{ description && <p className="newspack-card-form__description">{ description }</p> }
 						</VStack>
 						<HStack spacing={ 2 } expanded={ false }>
-							{ badge && <Badge text={ badge.text } level={ badge.level ?? 'success' } /> }
+							{ badge?.label && <Badge intent={ badge.intent ?? 'stable' }>{ badge.label }</Badge> }
 							{ actions }
 						</HStack>
 					</HStack>

package/src/card-sortable-list/README.md

@@ -16,8 +16,7 @@ A drag-and-drop sortable list of cards. Each item displays a title and a status
 |-------|------|-------------|
 | `id` | `string` \| `number` | Unique identifier for the item. Used as the React `key`. |
 | `title` | `string` | Label rendered in the card header. |
-| `badgeLevel` | `'default'` \| `'success'` \| `'info'` \| `'warning'` \| `'error'` | Visual style of the status badge. |
-| `badgeText` | `string` | Text displayed inside the badge. |
+| `badge` | `{ label: string; intent?: BadgeIntent }` | Status badge for the row. Omit it, or leave `label` empty, to render no badge. `intent` defaults to `none`. See [`BadgeIntent`](../types.ts) for the available intents. |
 
 ## Usage
 
@@ -25,9 +24,9 @@ A drag-and-drop sortable list of cards. Each item displays a title and a status
 import { CardSortableList } from 'newspack-components';
 
 const [ items, setItems ] = useState( [
-	{ id: 1, title: 'Homepage', badgeLevel: 'success', badgeText: 'Active' },
-	{ id: 2, title: 'About',    badgeLevel: 'default', badgeText: 'Draft'  },
-	{ id: 3, title: 'Contact',  badgeLevel: 'warning', badgeText: 'Review' },
+	{ id: 1, title: 'Homepage', badge: { label: 'Active', intent: 'stable' } },
+	{ id: 2, title: 'About',    badge: { label: 'Draft',  intent: 'draft'  } },
+	{ id: 3, title: 'Contact',  badge: { label: 'Review', intent: 'medium' } },
 ] );
 
 const handleReorder = ( fromIndex, toIndex ) => {

package/src/card-sortable-list/index.test.js

@@ -0,0 +1,29 @@
+/**
+ * External dependencies.
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies.
+ */
+import CardSortableList from './';
+
+const items = [
+	{ id: 1, title: 'Homepage', badge: { label: 'Active', intent: 'stable' } },
+	{ id: 2, title: 'About', badge: { label: 'Draft', intent: 'draft' } },
+];
+
+describe( 'CardSortableList', () => {
+	it( 'renders a badge for each item that has badge text', () => {
+		render( <CardSortableList items={ items } /> );
+		expect( screen.getByText( 'Active' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Draft' ) ).toBeInTheDocument();
+	} );
+
+	it( 'renders no badge for an item without badge text', () => {
+		const { container } = render( <CardSortableList items={ [ { id: 1, title: 'Homepage' } ] } /> );
+		expect( screen.getByText( 'Homepage' ) ).toBeInTheDocument();
+		// An unguarded Badge would still emit an empty span, so assert on element children.
+		expect( container.querySelector( 'h3' ).children ).toHaveLength( 0 );
+	} );
+} );

package/src/card-sortable-list/index.tsx

@@ -7,11 +7,13 @@
  */
 import { Disabled, Draggable, __experimentalVStack as VStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
 import { useEffect, useLayoutEffect, useRef, useState } from '@wordpress/element';
+import { Badge } from '@wordpress/ui';
 
 /**
  * Internal dependencies
  */
-import { Badge, Card } from '../';
+import { Card } from '../';
+import type { CardBadge } from '../types';
 import './style.scss';
 
 /**
@@ -34,8 +36,7 @@ type DraggableItem = {
 	id: string | number;
 	title: string;
 	description?: React.ReactNode;
-	badgeLevel: 'default' | 'success' | 'info' | 'warning' | 'error';
-	badgeText: string;
+	badge?: CardBadge;
 	toggleChecked?: boolean;
 	onToggleChange?: () => void;
 	actions?: DraggableItemAction[];
@@ -402,7 +403,9 @@ const CardSortableList = ( {
 												<>
 													<h3>
 														{ item.title }
-														<Badge level={ item.badgeLevel } text={ item.badgeText } />
+														{ item.badge?.label && (
+															<Badge intent={ item.badge.intent ?? 'none' }>{ item.badge.label }</Badge>
+														) }
 													</h3>
 													{ item.description && <p>{ item.description }</p> }
 												</>

package/src/collapsible-group/README.md

@@ -0,0 +1,50 @@
+# CollapsibleGroup
+
+A stack of independently collapsible items, separated by dividers and sitting flush with the surrounding column. Built on `Collapsible` from `@wordpress/ui`.
+
+Each item is its own disclosure: opening one does not close the others. This is deliberately not a W3C accordion, which coordinates its panels and moves focus between headers with the arrow keys, so the component is not named for one. It is also not `CollapsibleCard` from the same library, which renders its root as a `Card` and so brings a border, a background and card padding; this component sits flush with the column around it.
+
+A collapsed item is hidden with `hidden="until-found"`, so the browser's find-in-page can match text inside it and expand the item to reveal the result. Find-in-page can only match text that exists, so a collapsed item keeps its children mounted, out of the focus order and the accessibility tree but present in the DOM. Every item therefore renders on first paint, and a child's state and effects persist while it is closed. Keep expensive children, or anything that fetches on mount, behind the item's own open state.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | — | Additional class on the group wrapper. |
+| `hideSingleTitle` | `boolean` | `false` | When the group holds exactly one item, render it open and drop its title. Use it where a group can collapse to a single section and the title would repeat the heading above it. |
+| `gap` | `GapSize` | `'xl'` | `Stack` gap, on the design system's token scale (`'xl'` is 24px). The divider is a sibling of the items rather than part of one, so the gap applies on both sides of it and items sit twice this far apart: 49px at the default. |
+| `titleLevel` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | inherited, or `2` | Heading level for every item title. Set it once on the group so the items share one place in the document outline: under a section header rendered as `h2`, pass `3`. It changes the tag only, never the size, so the same group looks the same wherever it sits. A group nested inside another matches the level it inherits rather than descending a step, so give a nested group its own `titleLevel`. A value outside the range is clamped to the nearest valid level. |
+
+Children must be `CollapsibleGroup.Item`. Bare text and numbers are dropped; any other element counts as one item and takes a divider, so a wrapper component, or a `Fragment` holding two items, puts the dividers in the wrong place.
+
+### `CollapsibleGroup.Item`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | — | Additional class on the item. |
+| `defaultOpen` | `boolean` | `false` | Whether the item starts expanded. |
+| `title` | `string` | — | Trigger label, rendered as a button inside the heading. Without a title there is no trigger and the content renders permanently open. |
+
+## Usage
+
+```jsx
+import { CollapsibleGroup } from 'newspack-components';
+
+<CollapsibleGroup titleLevel={ 3 }>
+	<CollapsibleGroup.Item title="Contact fields" defaultOpen>
+		…
+	</CollapsibleGroup.Item>
+	<CollapsibleGroup.Item title="Tags and segments">
+		…
+	</CollapsibleGroup.Item>
+</CollapsibleGroup>
+
+// A group that may collapse to one section
+<CollapsibleGroup hideSingleTitle>
+	{ groups.map( group => (
+		<CollapsibleGroup.Item key={ group.id } title={ group.section }>
+			…
+		</CollapsibleGroup.Item>
+	) ) }
+</CollapsibleGroup>
+```

package/src/collapsible-group/context.ts

@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { HeadingLevel } from './types';
+
+export const TitleLevelContext = createContext< HeadingLevel >( 2 );
+
+export const useTitleLevel = (): HeadingLevel => useContext( TitleLevelContext );