namespace the classNames used, update the export and remove backButton prop

Author: ntsekouras

client/dashboard/components/page-layout/index.tsx

@@ -1,4 +1,4 @@
-import Header from '@automattic/components/src/header';
+import { Header } from '@automattic/components/src/header';
 import { __experimentalVStack as VStack } from '@wordpress/components';
 import type { HeaderProps } from '@automattic/components/src/header/types';
 import './style.scss';

client/dashboard/sites/settings-subscription-gifting/index.tsx

@@ -55,10 +55,12 @@ export default function SubscriptionGiftingSettings() {
 	return (
 		<PageLayout
 			size="small"
-			title={ __( 'Accept a gift subscription' ) }
-			description={ __(
-				'Allow a site visitor to cover the full cost of your site’s WordPress.com plan.'
-			) }
+			headerProps={ {
+				title: __( 'Accept a gift subscription' ),
+				description: __(
+					'Allow a site visitor to cover the full cost of your site’s WordPress.com plan.'
+				),
+			} }
 		>
 			<Card>
 				<CardBody>

packages/components/src/header/index.stories.tsx

@@ -1,10 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Button, Icon, DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { help, wordpress, moreVertical } from '@wordpress/icons';
-import Header from './index';
+import { Header } from './index';
 
 const meta = {
-	title: 'Header',
+	title: 'packages/components/Header',
 	component: Header,
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
@@ -24,13 +24,9 @@ export const Default: Story = {
 export const WithActions: Story = {
 	args: {
 		title: 'Site Settings',
-		description: (
-			<>
-				Manage how your site works and appears. Configure your site's basic functionality,
+		description: `Manage how your site works and appears. Configure your site's basic functionality,
 				appearance, and behavior. These settings control everything from your site title to how your
-				content is displayed to visitors.
-			</>
-		),
+				content is displayed to visitors.`,
 		actions: [
 			<Button key="cancel" variant="secondary">
 				Cancel
@@ -48,7 +44,6 @@ export const FullExample: Story = {
 		title: 'Site Customization',
 		description: 'Make your site look exactly how you want it to',
 		decoration: <Icon icon={ wordpress } />,
-		backButton: { onClick: () => {} },
 		actions: [
 			<Button key="help" icon={ help } variant="tertiary">
 				Help

packages/components/src/header/index.tsx

@@ -2,46 +2,57 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
 	__experimentalText as Text,
-	Button,
 	__experimentalHeading as Heading,
 } from '@wordpress/components';
-import { __, isRTL } from '@wordpress/i18n';
-import { chevronLeft, chevronRight } from '@wordpress/icons';
 import type { HeaderProps } from './types';
 
 import './style.scss';
 
-const Header = ( {
+/**
+ * The Header component provides a structured introduction to a page or section,
+ * combining a title, optional description, and contextual actions. It supports
+ * varying levels of hierarchy through semantic heading levels, and can include
+ * visual decorations, navigational aids like breadcrumbs, and utility controls
+ * such as buttons or dropdowns.
+ *
+ * ```jsx
+ * import { Header } from '@automattic/components';
+ * import { Button } from '@wordpress/components';
+ * import { cog } from '@wordpress/icons';
+ *
+ * function MyComponent() {
+ * 	return (
+ * 		<Header
+ * 			level={1}
+ * 			title="Settings"
+ * 			description="Configure your application settings"
+ * 			decoration={<Icon icon={cog} />}
+ * 			actions={<Button variant="primary">Save Changes</Button>}
+ * 		/>
+ * 	);
+ * }
+ * ```
+ */
+export const Header = ( {
 	level = 2,
 	title,
 	description,
 	actions,
 	decoration,
-	backButton,
 	breadcrumbs,
 }: HeaderProps ) => {
 	const _actions = actions?.filter( Boolean );
 	return (
 		<VStack spacing={ 4 }>
-			{ ( !! backButton || !! breadcrumbs ) && (
+			{ !! breadcrumbs && (
 				<VStack spacing={ 4 }>
-					{ backButton && (
-						<Button
-							icon={ isRTL() ? chevronRight : chevronLeft }
-							href={ backButton.href }
-							onClick={ backButton.onClick }
-							style={ { width: 'fit-content' } }
-						>
-							{ backButton.label || __( 'Back' ) }
-						</Button>
-					) }
 					{ /* // TODO: this will use the Breadcrumbs component when it is available.. */ }
-					{ !! breadcrumbs && <div>{ breadcrumbs }</div> }
+					<div>{ breadcrumbs }</div>
 				</VStack>
 			) }
 			<HStack spacing={ 4 } justify="space-between" alignment="flex-start" wrap>
 				<HStack spacing={ 4 } justify="flex-start" expanded={ false }>
-					{ decoration && <span className="header-decoration">{ decoration }</span> }
+					{ decoration && <span className="a8c-components-header-decoration">{ decoration }</span> }
 					<Heading level={ level } style={ { flexShrink: 0 } }>
 						{ title }
 					</Heading>
@@ -56,31 +67,3 @@ const Header = ( {
 		</VStack>
 	);
 };
-
-/**
- * The Header component provides a structured introduction to a page or section,
- * combining a title, optional description, and contextual actions. It supports
- * varying levels of hierarchy through semantic heading levels, and can include
- * visual decorations, navigational aids like a back button or breadcrumbs, and
- * utility controls such as buttons or dropdowns.
- *
- * ```jsx
- * import { Header } from '@automattic/components';
- * import { Button } from '@wordpress/components';
- * import { cog } from '@wordpress/icons';
- *
- * function MyComponent() {
- * 	return (
- * 		<Header
- * 			level={1}
- * 			title="Settings"
- * 			description="Configure your application settings"
- * 			decoration={<Icon icon={cog} />}
- * 			actions={<Button variant="primary">Save Changes</Button>}
- * 			backButton={{ onClick: () => console.log('Back clicked') }}
- * 		/>
- * 	);
- * }
- * ```
- */
-export default Header;

packages/components/src/header/style.scss

@@ -1,6 +1,6 @@
 @import "@wordpress/base-styles/variables";
 
-.header-decoration {
+.a8c-components-header-decoration {
 	display: inline-flex;
 
 	svg {

packages/components/src/header/test/index.tsx

@@ -5,7 +5,7 @@ import { render, screen } from '@testing-library/react';
 import { Button, Icon } from '@wordpress/components';
 import { cog } from '@wordpress/icons';
 import * as React from 'react';
-import Header from '../';
+import { Header } from '../';
 
 describe( 'Header', () => {
 	test( 'should render with title', () => {

packages/components/src/header/types.ts

@@ -29,26 +29,6 @@ export interface HeaderProps {
 	 * to enhance recognition or provide visual interest.
 	 */
 	decoration?: React.ReactNode;
-	/**
-	 * A navigational element used to return to the previous view
-	 * or move up one level in the navigational hierarchy.
-	 */
-	backButton?: {
-		/**
-		 * Text label for the back button
-		 * @default 'Back'
-		 */
-		label?: string;
-		/**
-		 * If provided, causes the component to render an `<a />` element
-		 * instead of a `<button />` element.
-		 */
-		href?: string;
-		/**
-		 * A callback to handle clicking an item.
-		 */
-		onClick?: React.MouseEventHandler;
-	};
 	/**
 	 * An optional breadcrumb trail used to indicate the user's current position
 	 * in a complex navigational structure and allow quick access to parent levels.

packages/components/src/index.ts

@@ -69,4 +69,4 @@ export { default as EmbedContainer } from './embed-container';
 export { ExperienceControl } from './experience-control';
 export { default as SummaryButton } from './summary-button';
 export { default as CoreBadge } from './core-badge';
-export { default as Header } from './header';
+export { Header } from './header';