@automattic/vip-design-system 2.18.0 → 2.19.0

package/src/system/Pagination/SimplePagination.stories.tsx

@@ -0,0 +1,127 @@
+/** @jsxImportSource theme-ui */
+
+import { useState } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { SimplePagination } from './SimplePagination';
+import { Badge } from '../Badge';
+import { Flex } from '../Flex';
+import { Text } from '../Text';
+
+import type { StoryObj, Meta } from '@storybook/react-vite';
+
+const meta: Meta< typeof SimplePagination > = {
+	title: 'SimplePagination',
+	component: SimplePagination,
+	parameters: {
+		docs: {
+			description: {
+				component: `
+A pagination control with only previous/next arrow buttons.
+Designed for cursor-based pagination APIs with custom param names (e.g., \`after\`/\`before\`).
+
+For page-number based pagination, see \`Pagination\`.
+
+## Component Properties
+`,
+			},
+		},
+	},
+};
+
+export default meta;
+
+type Story = StoryObj< typeof SimplePagination >;
+
+const pageTokens = [ 'start', 'abc123', 'def456', 'ghi789', 'jkl012', 'end' ];
+
+const SimplePaginationWithState = ( {
+	initialIndex = 0,
+	displayItemsPerPageSelector = false,
+}: {
+	initialIndex?: number;
+	displayItemsPerPageSelector?: boolean;
+} ) => {
+	const [ index, setIndex ] = useState( initialIndex );
+	const [ itemsPerPage, setItemsPerPage ] = useState( 20 );
+
+	const hasPreviousPage = index > 0;
+	const hasNextPage = index < pageTokens.length - 1;
+
+	return (
+		<SimplePagination
+			hasNextPage={ hasNextPage }
+			hasPreviousPage={ hasPreviousPage }
+			nextParam={ hasNextPage ? { param: 'after', value: pageTokens[ index + 1 ] } : undefined }
+			previousParam={
+				hasPreviousPage ? { param: 'before', value: pageTokens[ index ] } : undefined
+			}
+			onNavigate={ param => {
+				if ( param === 'after' ) {
+					setIndex( i => i + 1 );
+				}
+				if ( param === 'before' ) {
+					setIndex( i => i - 1 );
+				}
+			} }
+			displayItemsPerPageSelector={ displayItemsPerPageSelector }
+			itemsPerPage={ displayItemsPerPageSelector ? itemsPerPage : undefined }
+			onItemsPerPageChange={
+				displayItemsPerPageSelector
+					? size => {
+							setItemsPerPage( size );
+							setIndex( 0 );
+					  }
+					: undefined
+			}
+		>
+			<Flex sx={ { justifyContent: 'center', alignItems: 'center', verticalAlign: 'middle' } }>
+				<Badge variant="gold" sx={ { mr: 2 } }>
+					DEBUG
+				</Badge>
+				<Text>
+					Index: { index } — token: { pageTokens[ index ] }
+				</Text>
+			</Flex>
+		</SimplePagination>
+	);
+};
+
+export const Default: Story = {
+	render: () => <SimplePaginationWithState />,
+};
+
+export const FirstPage: Story = {
+	render: () => <SimplePaginationWithState />,
+	parameters: {
+		docs: {
+			description: {
+				story: 'On the first page — Previous button is disabled.',
+			},
+		},
+	},
+};
+
+export const LastPage: Story = {
+	render: () => <SimplePaginationWithState initialIndex={ pageTokens.length - 1 } />,
+	parameters: {
+		docs: {
+			description: {
+				story: 'On the last page — Next button is disabled.',
+			},
+		},
+	},
+};
+
+export const WithPageSize: Story = {
+	render: () => <SimplePaginationWithState displayItemsPerPageSelector />,
+	parameters: {
+		docs: {
+			description: {
+				story: 'With an items-per-page selector.',
+			},
+		},
+	},
+};

package/src/system/Pagination/SimplePagination.test.tsx

@@ -0,0 +1,120 @@
+/** @jsxImportSource theme-ui */
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'jest-axe';
+import '@testing-library/jest-dom';
+
+import { SimplePagination } from './SimplePagination';
+
+const defaultProps = {
+	hasNextPage: true,
+	hasPreviousPage: true,
+	nextParam: { param: 'after', value: 'cursor_abc' },
+	previousParam: { param: 'before', value: 'cursor_xyz' },
+	onNavigate: jest.fn(),
+};
+
+describe( '<SimplePagination />', () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'renders a nav landmark with aria-label', () => {
+		render( <SimplePagination { ...defaultProps } /> );
+
+		expect( screen.getByRole( 'navigation', { name: 'Pagination' } ) ).toBeInTheDocument();
+	} );
+
+	it( 'renders prev and next arrow buttons', () => {
+		render( <SimplePagination { ...defaultProps } /> );
+
+		expect( screen.getByRole( 'button', { name: 'Previous page' } ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'button', { name: 'Next page' } ) ).toBeInTheDocument();
+	} );
+
+	it( 'does not render page number buttons', () => {
+		render( <SimplePagination { ...defaultProps } /> );
+
+		expect( screen.queryByRole( 'button', { name: /Go to page/ } ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'disables previous button when hasPreviousPage is false', () => {
+		render( <SimplePagination { ...defaultProps } hasPreviousPage={ false } /> );
+
+		expect( screen.getByRole( 'button', { name: 'Previous page' } ) ).toBeDisabled();
+	} );
+
+	it( 'disables next button when hasNextPage is false', () => {
+		render( <SimplePagination { ...defaultProps } hasNextPage={ false } /> );
+
+		expect( screen.getByRole( 'button', { name: 'Next page' } ) ).toBeDisabled();
+	} );
+
+	it( 'disables previous button when previousParam is undefined', () => {
+		render( <SimplePagination { ...defaultProps } previousParam={ undefined } /> );
+
+		expect( screen.getByRole( 'button', { name: 'Previous page' } ) ).toBeDisabled();
+	} );
+
+	it( 'disables next button when nextParam is undefined', () => {
+		render( <SimplePagination { ...defaultProps } nextParam={ undefined } /> );
+
+		expect( screen.getByRole( 'button', { name: 'Next page' } ) ).toBeDisabled();
+	} );
+
+	it( 'calls onNavigate with correct param and value when clicking next', async () => {
+		const user = userEvent.setup();
+		render( <SimplePagination { ...defaultProps } /> );
+
+		await user.click( screen.getByRole( 'button', { name: 'Next page' } ) );
+
+		expect( defaultProps.onNavigate ).toHaveBeenCalledWith( 'after', 'cursor_abc' );
+	} );
+
+	it( 'calls onNavigate with correct param and value when clicking previous', async () => {
+		const user = userEvent.setup();
+		render( <SimplePagination { ...defaultProps } /> );
+
+		await user.click( screen.getByRole( 'button', { name: 'Previous page' } ) );
+
+		expect( defaultProps.onNavigate ).toHaveBeenCalledWith( 'before', 'cursor_xyz' );
+	} );
+
+	it( 'renders children content', () => {
+		render(
+			<SimplePagination { ...defaultProps }>
+				<span>Showing results</span>
+			</SimplePagination>
+		);
+
+		expect( screen.getByText( 'Showing results' ) ).toBeInTheDocument();
+	} );
+
+	it( 'renders items-per-page selector when enabled', () => {
+		render(
+			<SimplePagination
+				{ ...defaultProps }
+				displayItemsPerPageSelector
+				itemsPerPage={ 20 }
+				onItemsPerPageChange={ jest.fn() }
+			/>
+		);
+
+		expect( screen.getByRole( 'combobox' ) ).toBeInTheDocument();
+	} );
+
+	it( 'has no accessibility violations', async () => {
+		const { container } = render( <SimplePagination { ...defaultProps } /> );
+
+		expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	it( 'has no accessibility violations with both buttons disabled', async () => {
+		const { container } = render(
+			<SimplePagination { ...defaultProps } hasNextPage={ false } hasPreviousPage={ false } />
+		);
+
+		expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/Pagination/SimplePagination.tsx

@@ -0,0 +1,97 @@
+/** @jsxImportSource theme-ui */
+
+import { forwardRef } from 'react';
+import { MdChevronLeft, MdChevronRight } from 'react-icons/md';
+import { Flex } from 'theme-ui';
+
+import { PaginationLayout, PaginationLayoutProps } from './PaginationLayout';
+import { navigationStyles, arrowButtonStyles } from './styles';
+import { Box } from '../Box';
+import { Button } from '../Button';
+
+/** A navigation parameter for SimplePagination. */
+export interface SimpleNavigationParam {
+	/** The query parameter name (e.g., 'after', 'before'). */
+	param: string;
+	/** The parameter token value. */
+	value: string;
+}
+
+export interface SimplePaginationProps extends PaginationLayoutProps {
+	/** Whether there is a next page available. */
+	hasNextPage?: boolean;
+	/** Whether there is a previous page available. */
+	hasPreviousPage?: boolean;
+	/** Navigation parameter for the next page. */
+	nextParam?: SimpleNavigationParam;
+	/** Navigation parameter for the previous page. */
+	previousParam?: SimpleNavigationParam;
+	/** Callback fired when the user navigates. Receives the param name and value. */
+	onNavigate: ( param: string, value: string ) => void;
+}
+
+/**
+ * A pagination control with only previous/next arrow buttons.
+ * Designed for cursor-based pagination APIs with custom param names (e.g., `after`/`before`).
+ */
+export const SimplePagination = forwardRef< HTMLElement, SimplePaginationProps >(
+	(
+		{
+			hasNextPage,
+			hasPreviousPage,
+			nextParam,
+			previousParam,
+			onNavigate,
+			displayItemsPerPageSelector,
+			itemsPerPage,
+			pageSizeOptions,
+			onItemsPerPageChange,
+			className,
+			sx,
+			children,
+			...rest
+		},
+		ref
+	) => {
+		const isPrevDisabled = ! hasPreviousPage || ! previousParam?.value;
+		const isNextDisabled = ! hasNextPage || ! nextParam?.value;
+
+		return (
+			<PaginationLayout
+				ref={ ref }
+				displayItemsPerPageSelector={ displayItemsPerPageSelector }
+				itemsPerPage={ itemsPerPage }
+				pageSizeOptions={ pageSizeOptions }
+				onItemsPerPageChange={ onItemsPerPageChange }
+				className={ className }
+				sx={ sx }
+				{ ...rest }
+			>
+				<Box sx={ { flex: 1 } }>{ children }</Box>
+				<Flex sx={ navigationStyles }>
+					<Button
+						aria-label="Previous page"
+						disabled={ isPrevDisabled }
+						onClick={ () =>
+							previousParam && onNavigate( previousParam.param, previousParam.value )
+						}
+						sx={ arrowButtonStyles }
+					>
+						<MdChevronLeft size={ 20 } />
+					</Button>
+
+					<Button
+						aria-label="Next page"
+						disabled={ isNextDisabled }
+						onClick={ () => nextParam && onNavigate( nextParam.param, nextParam.value ) }
+						sx={ arrowButtonStyles }
+					>
+						<MdChevronRight size={ 20 } />
+					</Button>
+				</Flex>
+			</PaginationLayout>
+		);
+	}
+);
+
+SimplePagination.displayName = 'SimplePagination';

package/src/system/Pagination/index.ts

@@ -1,2 +1,4 @@
 export { Pagination, getPageNumbers } from './Pagination';
-export type { PaginationProps, PaginationVariant, PageNumberItem } from './Pagination';
+export { SimplePagination } from './SimplePagination';
+export type { PaginationProps, PageNumberItem } from './Pagination';
+export type { SimplePaginationProps, SimpleNavigationParam } from './SimplePagination';

package/src/system/Pagination/styles.ts

@@ -26,8 +26,7 @@ export const pageButtonStyles: ThemeUIStyleObject = {
 	bg: 'transparent',
 	color: 'heading',
 	cursor: 'pointer',
-	fontSize: 2,
-	fontFamily: 'body',
+	variant: 'text.default',
 	px: 2,
 	borderBottom: '3px solid',
 	borderColor: 'transparent',
@@ -89,8 +88,6 @@ export const compactTriggerStyles: ThemeUIStyleObject = {
 	bg: 'transparent',
 	color: 'heading',
 	cursor: 'pointer',
-	fontSize: 2,
-	fontFamily: 'body',
 	fontWeight: 'bold',
 	px: 2,
 	borderRadius: 1,

package/src/system/Table/TableCell.tsx

@@ -31,7 +31,7 @@ export const TableCell = ( { children, head, sx, ...rest }: TableCellProps ) =>
 		borderTop: head ? '1px solid' : 'none',
 		// borderColor should come after borderTop so it can override it
 		borderColor: 'table.border',
-		fontWeight: 'body',
+		variant: 'text.default',
 		px: 3,
 		py: 2,
 		textAlign: 'left',

package/src/system/Text/Text.stories.tsx

@@ -33,16 +33,19 @@ export const Default: Story = {
 				with silver.{ ' ' }
 			</Text>
 
-			<Text sx={ { color: 'texts.accent' } }>Text Accent</Text>
+			<Text variant="default">Body Default</Text>
+			<Text variant="small">Body Small</Text>
+			<Text variant="large">Body Large</Text>
+			<Text variant="mono">Body Mono</Text>
+			<Text variant="mono-bold">Body Mono Bold</Text>
 
+			<Text sx={ { color: 'texts.accent' } }>Text Accent</Text>
 			<Text sx={ { color: 'texts.helper' } }>Text Helper</Text>
 
-			<Text sx={ { color: 'texts.helper', fontWeight: 'body' } }>Text Helper</Text>
-			<Text sx={ { color: 'texts.helper', fontWeight: 'heading' } }>Text Helper</Text>
+			<Text sx={ { color: 'texts.helper', fontWeight: 'light' } }>Text Helper</Text>
 			<Text sx={ { color: 'texts.helper', fontWeight: 'regular' } }>Text Helper</Text>
 			<Text sx={ { color: 'texts.helper', fontWeight: 'medium' } }>Text Helper</Text>
 			<Text sx={ { color: 'texts.helper', fontWeight: 'bold' } }>Text Helper</Text>
-			<Text sx={ { color: 'texts.helper', fontWeight: 'light' } }>Text Helper</Text>
 
 			<Text sx={ { color: 'texts.secondary' } }>Text Secondary</Text>
 

package/src/system/Text/Text.tsx

@@ -13,7 +13,6 @@ export const Text = forwardRef< HTMLDivElement, ThemeTextProps >(
 		<ThemeText
 			as="p"
 			sx={ {
-				lineHeight: 'body',
 				marginBottom: 2,
 				color: 'text',
 				...sx,

package/src/system/Toolbar/Logo.tsx

@@ -37,11 +37,28 @@ export const Logo = ( { className, as = 'a', href }: LogoProps ) => (
 		<svg
 			className={ classNames( VIP_LOGO, className ) }
 			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 55 24"
+			viewBox="0 0 393.6 176.6"
 			role="img"
 			aria-label="WordPress VIP Logo"
+			sx={ {
+				display: 'block',
+				width: '100%',
+				height: 'auto',
+			} }
 		>
-			<path d="m12.014 0c-6.6103 0-12.014 5.3911-12.014 11.986 0 6.6226 5.4034 12.014 12.014 12.014 6.6377 0 12.041-5.3911 12.041-12.014 0-6.5952-5.4035-11.986-12.041-11.986zm-10.807 11.986c0-1.5598 0.32914-3.0376 0.93257-4.3786l5.1566 14.094c-3.5931-1.7515-6.0891-5.4459-6.0891-9.715zm10.807 10.782c-1.0697 0-2.0846-0.1642-3.0446-0.4378l3.2366-9.4139 3.3189 9.0855c0.0274 0.0547 0.0548 0.1094 0.0823 0.1368-1.1246 0.4105-2.3315 0.6294-3.5932 0.6294zm1.5086-15.818c0.6583-0.02737 1.2343-0.10946 1.2343-0.10946 0.576-0.0821 0.5211-0.93045-0.0823-0.87572 0 0-1.7554 0.13683-2.88 0.13683-1.0697 0-2.8526-0.13683-2.8526-0.13683-0.576-0.02736-0.65828 0.84835-0.05485 0.87572 0 0 0.54857 0.05473 1.1245 0.10946l1.6732 4.5975-2.3589 7.0604-3.9223-11.658c0.65828-0.02737 1.2343-0.10946 1.2343-0.10946 0.576-0.0821 0.52115-0.93045-0.08228-0.87572 0 0-1.7554 0.13683-2.88 0.13683h-0.68572c1.9474-2.9555 5.2663-4.8985 9.024-4.8985 2.8252 0 5.376 1.0673 7.296 2.8187h-0.1371c-1.0697 0-1.8103 0.93044-1.8103 1.9156 0 0.87571 0.5211 1.642 1.0697 2.5177 0.4114 0.71152 0.8777 1.642 0.8777 2.9829 0 0.9304-0.2743 2.0798-0.8228 3.4755l-1.0698 3.5849-3.8948-11.548zm3.9223 14.367l3.2914-9.5233c0.6034-1.5325 0.8229-2.764 0.8229-3.8586 0-0.41049-0.0275-0.76625-0.0823-1.122 0.8503 1.5325 1.3165 3.3113 1.3165 5.1722 0.0275 3.9955-2.112 7.4709-5.3485 9.3318zm17.472-14.86l-2.4412 7.1425c-0.2468 0.8757-0.4663 1.6967-0.5485 2.463h-0.0549c-0.0549-0.7663-0.2743-1.6146-0.5486-2.463l-2.4411-7.1425h-3.2092l4.608 12.068h3.2915l4.608-12.068h-3.264zm4.8548 0l-0.9051 2.3808v9.6602h3.2366v-12.041h-2.3315zm13.879 1.423c-0.7954-1.0946-1.92-1.642-3.3463-1.642-1.5086 0-2.5509 0.60206-3.3189 1.7788h-0.1645l-0.4663-1.5599h-2.6332v17.542h3.2366v-5.0627c0-0.1642-0.0548-0.7389-0.1646-1.7514h0.1646c0.7954 1.0399 1.8103 1.5325 3.2366 1.5325 0.9326 0 1.7554-0.2463 2.4686-0.7389 0.6857-0.4926 1.2342-1.2315 1.6182-2.1619 0.384-0.9579 0.576-2.0799 0.576-3.3661 0-1.9429-0.4114-3.4754-1.2068-4.5701zm-4.2514 8.1825c-0.8229 0-1.4538-0.2737-1.8378-0.8484-0.384-0.5473-0.576-1.4778-0.576-2.7913v-0.3558c0.0275-1.1494 0.2195-1.9703 0.576-2.4629 0.384-0.49259 0.96-0.73888 1.7829-0.73888 0.768 0 1.344 0.30103 1.7006 0.90308 0.3565 0.60203 0.5485 1.4777 0.5485 2.6818 0.0275 2.3809-0.7131 3.6124-2.1942 3.6124z" />
+			<path
+				fill="currentColor"
+				d="m88.3,0C39.6,0,0,39.6,0,88.3s39.6,88.3,88.3,88.3,88.3-39.5,88.3-88.3S137.1,0,88.3,0ZM8.8,88.3c0-11.5,2.5-22.5,6.8-32.4l37.8,103.8c-26-13-44.6-39.9-44.6-71.4Zm79.5,79.5c-7.7,0-15.3-1.1-22.5-3.2l23.7-69.2,24.4,66.9c.2.4.4.7.5,1.1-8.1,2.8-16.7,4.4-26.1,4.4Zm11-116.8c4.8-.4,9-.7,9-.7,4.1-.5,3.8-6.8-.5-6.5,0,0-13,.9-21.2.9-7.7,0-20.9-.9-20.9-.9-4.1-.4-4.8,6.3-.5,6.5,0,0,4.1.5,8.3.7l12.2,34-17.2,52-28.6-86c4.8-.4,9-.7,9-.7,4.1-.5,3.8-6.8-.5-6.5,0,0-13,.9-21.2.9-1.6,0-3.2,0-5.2-.2C36.1,23,60.5,8.8,88.2,8.8c20.7,0,39.5,7.9,53.6,20.9h-1.1c-7.7,0-13.3,6.8-13.3,14.2,0,6.5,3.8,12.2,7.7,18.7,2.9,5.2,6.5,12.2,6.5,21.9,0,6.8-2,15.5-6.1,25.7l-7.9,26.3-28.3-85.5Zm29.2,106l24.3-70.1c4.5-11.3,6.1-20.3,6.1-28.4,0-2.9-.2-5.5-.5-8.1,6.3,11.3,9.7,24.3,9.7,38.1-.3,29.1-16.3,54.8-39.6,68.5Z"
+			/>
+			<path
+				fill="currentColor"
+				d="m323.7,39.2h33.4c7.2,0,13.1.9,17.8,2.5,4.7,1.6,8.5,3.8,11.1,6.5,2.9,2.7,4.7,5.8,5.8,9.3,1.1,3.4,1.8,7.2,1.8,11,0,4.1-.5,8.1-1.8,11.9-1.1,3.8-3.1,7-5.8,10.1-2.7,2.9-6.5,5.1-11,6.6-4.5,1.6-10.4,2.5-17.5,2.5h-14.7v33.4h-19.2V39.2h.1Zm33.3,44.1c3.4,0,6.3-.4,8.5-1.1,2.4-.7,4.1-1.6,5.4-2.9,1.3-1.3,2.1-2.7,2.7-4.5.5-1.8.7-3.8.7-5.9s-.2-4.1-.7-5.8c-.5-1.6-1.4-3.1-2.7-4.1-1.3-1.1-3.1-2-5.4-2.7-2.1-.5-5.1-.9-8.5-.9h-14v27.8h14v.1Z"
+			/>
+			<path
+				fill="currentColor"
+				d="m197.5,39.2h21.9l22.8,66.3,23.4-66.3h21l-35.3,93.9h-18.5l-35.3-93.9Z"
+			/>
+			<path fill="currentColor" fillRule="evenodd" d="m311,39.2h-13.3l-6.3,16.9v76.9h19.6V39.2Z" />
 		</svg>
 	</Link>
 );

package/src/system/Wizard/Wizard.stories.tsx

@@ -30,18 +30,18 @@ export const Primary: Story = {
 		steps: [
 			{
 				title: 'Step One',
-				titleVariant: 'h2',
+				titleVariant: 'h3',
 				subTitle: 'First step description.',
 				children: 'Step one content',
 			},
 			{
 				title: 'Step Two',
-				titleVariant: 'h2',
+				titleVariant: 'h3',
 				subTitle: 'Second step description.',
 			},
 			{
 				title: 'Step Three',
-				titleVariant: 'h2',
+				titleVariant: 'h3',
 			},
 		],
 	},
@@ -52,7 +52,7 @@ export const Default: Story = {
 		const steps: WizardStepProps[] = [
 			{
 				title: 'Choose Domain',
-				titleVariant: 'h2',
+				titleVariant: 'h3',
 				subTitle: 'You can bring a domain name you already own, or buy a new one.',
 				children: (
 					<Box>
@@ -64,16 +64,16 @@ export const Default: Story = {
 			},
 			{
 				title: 'Configure DNS',
-				titleVariant: 'h2',
+				titleVariant: 'h3',
 				summaryTitle: 'Summary of Configure DNS',
 			},
 			{
 				title: 'Configure Certificate',
-				titleVariant: 'h2',
+				titleVariant: 'h3',
 			},
 			{
 				title: 'Verify Domain',
-				titleVariant: 'h2',
+				titleVariant: 'h3',
 			},
 		];
 		return (
@@ -99,7 +99,7 @@ export const WithTitleAutoFocus: Story = {
 		const steps: WizardStepProps[] = [
 			{
 				title: 'Choose Domain',
-				titleVariant: 'h2',
+				titleVariant: 'h3',
 				summary: [
 					{
 						label: 'Demo Label',
@@ -119,7 +119,7 @@ export const WithTitleAutoFocus: Story = {
 			},
 			{
 				title: 'Configure DNS',
-				titleVariant: 'h2',
+				titleVariant: 'h3',
 				onChange: () => setActiveStep( 1 ),
 				actionLabel: 'Edit',
 				actionDisabled: true,
@@ -136,7 +136,7 @@ export const WithTitleAutoFocus: Story = {
 
 			{
 				title: 'Certificate',
-				titleVariant: 'h2',
+				titleVariant: 'h3',
 				summary: [
 					{
 						label: 'Certificate status',
@@ -192,7 +192,7 @@ export const HideStepText: Story = {
 		const steps: WizardStepProps[] = [
 			{
 				title: 'Included Logs',
-				titleVariant: 'h2',
+				titleVariant: 'h3',
 				subTitle: '',
 				children: <Text sx={ { mb: 0 } }>Error Logs</Text>,
 				onChange: () => {

package/src/system/Wizard/WizardStep.tsx

@@ -171,8 +171,6 @@ export const WizardStep = React.forwardRef< HTMLDivElement, WizardStepProps >(
 						sx={ {
 							mb: 0,
 							color: headingColor,
-							fontSize: 2,
-							fontWeight: 'heading',
 							flexGrow: 1,
 						} }
 						ref={ titleRef }

package/src/system/index.ts

@@ -50,7 +50,7 @@ import * as Form from './NewForm';
 import { NewTooltip } from './NewTooltip';
 import { Notice } from './Notice';
 import { OptionRow } from './OptionRow';
-import { Pagination } from './Pagination';
+import { SimplePagination, Pagination } from './Pagination';
 import { Progress } from './Progress';
 import { ScreenReaderText } from './ScreenReaderText';
 import { Skeleton } from './Skeleton';
@@ -99,6 +99,7 @@ export {
 	Flex,
 	Notice,
 	OptionRow,
+	SimplePagination,
 	Pagination,
 	Heading,
 	Hr,