Skip to content

Commit f9dc7df

Browse files
committed
namespace the classNames used, update the export and remove backButton prop
1 parent dcd796f commit f9dc7df

File tree

8 files changed

+43
-83
lines changed

8 files changed

+43
-83
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Header from '@automattic/components/src/header';
1+
import { Header } from '@automattic/components/src/header';
22
import { __experimentalVStack as VStack } from '@wordpress/components';
33
import type { HeaderProps } from '@automattic/components/src/header/types';
44
import './style.scss';

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,10 +55,12 @@ export default function SubscriptionGiftingSettings() {
5555
return (
5656
<PageLayout
5757
size="small"
58-
title={ __( 'Accept a gift subscription' ) }
59-
description={ __(
60-
'Allow a site visitor to cover the full cost of your site’s WordPress.com plan.'
61-
) }
58+
headerProps={ {
59+
title: __( 'Accept a gift subscription' ),
60+
description: __(
61+
'Allow a site visitor to cover the full cost of your site’s WordPress.com plan.'
62+
),
63+
} }
6264
>
6365
<Card>
6466
<CardBody>

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

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { Meta, StoryObj } from '@storybook/react';
22
import { Button, Icon, DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
33
import { help, wordpress, moreVertical } from '@wordpress/icons';
4-
import Header from './index';
4+
import { Header } from './index';
55

66
const meta = {
7-
title: 'Header',
7+
title: 'packages/components/Header',
88
component: Header,
99
parameters: {
1010
actions: { argTypesRegex: '^on.*' },
@@ -24,13 +24,9 @@ export const Default: Story = {
2424
export const WithActions: Story = {
2525
args: {
2626
title: 'Site Settings',
27-
description: (
28-
<>
29-
Manage how your site works and appears. Configure your site's basic functionality,
27+
description: `Manage how your site works and appears. Configure your site's basic functionality,
3028
appearance, and behavior. These settings control everything from your site title to how your
31-
content is displayed to visitors.
32-
</>
33-
),
29+
content is displayed to visitors.`,
3430
actions: [
3531
<Button key="cancel" variant="secondary">
3632
Cancel
@@ -48,7 +44,6 @@ export const FullExample: Story = {
4844
title: 'Site Customization',
4945
description: 'Make your site look exactly how you want it to',
5046
decoration: <Icon icon={ wordpress } />,
51-
backButton: { onClick: () => {} },
5247
actions: [
5348
<Button key="help" icon={ help } variant="tertiary">
5449
Help

packages/components/src/header/index.tsx

Lines changed: 29 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -2,46 +2,57 @@ import {
22
__experimentalVStack as VStack,
33
__experimentalHStack as HStack,
44
__experimentalText as Text,
5-
Button,
65
__experimentalHeading as Heading,
76
} from '@wordpress/components';
8-
import { __, isRTL } from '@wordpress/i18n';
9-
import { chevronLeft, chevronRight } from '@wordpress/icons';
107
import type { HeaderProps } from './types';
118

129
import './style.scss';
1310

14-
const Header = ( {
11+
/**
12+
* The Header component provides a structured introduction to a page or section,
13+
* combining a title, optional description, and contextual actions. It supports
14+
* varying levels of hierarchy through semantic heading levels, and can include
15+
* visual decorations, navigational aids like breadcrumbs, and utility controls
16+
* such as buttons or dropdowns.
17+
*
18+
* ```jsx
19+
* import { Header } from '@automattic/components';
20+
* import { Button } from '@wordpress/components';
21+
* import { cog } from '@wordpress/icons';
22+
*
23+
* function MyComponent() {
24+
* return (
25+
* <Header
26+
* level={1}
27+
* title="Settings"
28+
* description="Configure your application settings"
29+
* decoration={<Icon icon={cog} />}
30+
* actions={<Button variant="primary">Save Changes</Button>}
31+
* />
32+
* );
33+
* }
34+
* ```
35+
*/
36+
export const Header = ( {
1537
level = 2,
1638
title,
1739
description,
1840
actions,
1941
decoration,
20-
backButton,
2142
breadcrumbs,
2243
}: HeaderProps ) => {
2344
const _actions = actions?.filter( Boolean );
2445
return (
2546
<VStack spacing={ 4 }>
26-
{ ( !! backButton || !! breadcrumbs ) && (
47+
{ !! breadcrumbs && (
2748
<VStack spacing={ 4 }>
28-
{ backButton && (
29-
<Button
30-
icon={ isRTL() ? chevronRight : chevronLeft }
31-
href={ backButton.href }
32-
onClick={ backButton.onClick }
33-
style={ { width: 'fit-content' } }
34-
>
35-
{ backButton.label || __( 'Back' ) }
36-
</Button>
37-
) }
3849
{ /* // TODO: this will use the Breadcrumbs component when it is available.. */ }
39-
{ !! breadcrumbs && <div>{ breadcrumbs }</div> }
50+
<div>{ breadcrumbs }</div>
4051
</VStack>
4152
) }
4253
<HStack spacing={ 4 } justify="space-between" alignment="flex-start" wrap>
4354
<HStack spacing={ 4 } justify="flex-start" expanded={ false }>
44-
{ decoration && <span className="header-decoration">{ decoration }</span> }
55+
{ decoration && <span className="a8c-components-header-decoration">{ decoration }</span> }
4556
<Heading level={ level } style={ { flexShrink: 0 } }>
4657
{ title }
4758
</Heading>
@@ -56,31 +67,3 @@ const Header = ( {
5667
</VStack>
5768
);
5869
};
59-
60-
/**
61-
* The Header component provides a structured introduction to a page or section,
62-
* combining a title, optional description, and contextual actions. It supports
63-
* varying levels of hierarchy through semantic heading levels, and can include
64-
* visual decorations, navigational aids like a back button or breadcrumbs, and
65-
* utility controls such as buttons or dropdowns.
66-
*
67-
* ```jsx
68-
* import { Header } from '@automattic/components';
69-
* import { Button } from '@wordpress/components';
70-
* import { cog } from '@wordpress/icons';
71-
*
72-
* function MyComponent() {
73-
* return (
74-
* <Header
75-
* level={1}
76-
* title="Settings"
77-
* description="Configure your application settings"
78-
* decoration={<Icon icon={cog} />}
79-
* actions={<Button variant="primary">Save Changes</Button>}
80-
* backButton={{ onClick: () => console.log('Back clicked') }}
81-
* />
82-
* );
83-
* }
84-
* ```
85-
*/
86-
export default Header;

packages/components/src/header/style.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import "@wordpress/base-styles/variables";
22

3-
.header-decoration {
3+
.a8c-components-header-decoration {
44
display: inline-flex;
55

66
svg {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { render, screen } from '@testing-library/react';
55
import { Button, Icon } from '@wordpress/components';
66
import { cog } from '@wordpress/icons';
77
import * as React from 'react';
8-
import Header from '../';
8+
import { Header } from '../';
99

1010
describe( 'Header', () => {
1111
test( 'should render with title', () => {

packages/components/src/header/types.ts

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -29,26 +29,6 @@ export interface HeaderProps {
2929
* to enhance recognition or provide visual interest.
3030
*/
3131
decoration?: React.ReactNode;
32-
/**
33-
* A navigational element used to return to the previous view
34-
* or move up one level in the navigational hierarchy.
35-
*/
36-
backButton?: {
37-
/**
38-
* Text label for the back button
39-
* @default 'Back'
40-
*/
41-
label?: string;
42-
/**
43-
* If provided, causes the component to render an `<a />` element
44-
* instead of a `<button />` element.
45-
*/
46-
href?: string;
47-
/**
48-
* A callback to handle clicking an item.
49-
*/
50-
onClick?: React.MouseEventHandler;
51-
};
5232
/**
5333
* An optional breadcrumb trail used to indicate the user's current position
5434
* in a complex navigational structure and allow quick access to parent levels.

packages/components/src/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,4 +69,4 @@ export { default as EmbedContainer } from './embed-container';
6969
export { ExperienceControl } from './experience-control';
7070
export { default as SummaryButton } from './summary-button';
7171
export { default as CoreBadge } from './core-badge';
72-
export { default as Header } from './header';
72+
export { Header } from './header';

0 commit comments

Comments
 (0)