Skip to content

Commit dcc8043

Browse files
ntsekourasntsekouras
committed
Add Header component
1 parent 0d7eba3 commit dcc8043

File tree

30 files changed

+544
-110
lines changed

30 files changed

+544
-110
lines changed

‎client/dashboard/.eslintrc.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ module.exports = {
3232
'@automattic/components/src/*',
3333
'!@automattic/components/src/summary-button',
3434
'!@automattic/components/src/core-badge',
35+
'!@automattic/components/src/header',
3536
'!@automattic/dataviews',
3637
// Please do not add exceptions unless agreed on
3738
// with the #architecture group.

‎client/dashboard/agency-overview/index.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,18 @@ import PageLayout from '../components/page-layout';
55
export default function AgencyOverview() {
66
return (
77
<PageLayout
8-
title={ __( 'Agency Overview' ) }
9-
actions={
10-
<>
11-
<Button variant="primary" __next40pxDefaultSize>
8+
headerProps={ {
9+
title: __( 'Agency Overview' ),
10+
actions: [
11+
<Button key="add-sites" variant="primary" __next40pxDefaultSize>
1212
{ __( 'Add Sites' ) }
13-
</Button>
14-
<Button variant="secondary" __next40pxDefaultSize>
13+
</Button>,
14+
<Button key="add-products" variant="secondary" __next40pxDefaultSize>
1515
{ __( 'Add Products' ) }
16-
</Button>
17-
</>
18-
}
19-
description={ __( 'This is a sample overview page.' ) }
16+
</Button>,
17+
],
18+
description: __( 'This is a sample overview page.' ),
19+
} }
2020
/>
2121
);
2222
}

‎client/dashboard/app/404/index.tsx

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,15 @@ import RouterLinkButton from '../../components/router-link-button';
55
function NotFound() {
66
return (
77
<PageLayout
8-
title={ __( '404 Not Found' ) }
9-
description={ __( 'The page you are looking for does not exist.' ) }
10-
actions={
11-
<RouterLinkButton to="/sites" variant="primary" __next40pxDefaultSize>
12-
{ __( 'Go to Sites' ) }
13-
</RouterLinkButton>
14-
}
8+
headerProps={ {
9+
title: __( '404 Not Found' ),
10+
description: __( 'The page you are looking for does not exist.' ),
11+
actions: [
12+
<RouterLinkButton key="go-to-sites" to="/sites" variant="primary" __next40pxDefaultSize>
13+
{ __( 'Go to Sites' ) }
14+
</RouterLinkButton>,
15+
],
16+
} }
1517
/>
1618
);
1719
}

‎client/dashboard/app/500/index.tsx

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,15 @@ import RouterLinkButton from '../../components/router-link-button';
66
function UnknownError( { error }: { error: Error } ) {
77
return (
88
<PageLayout
9-
title={ __( '500 Error' ) }
10-
description={ __( 'Something wrong happened.' ) }
11-
actions={
12-
<RouterLinkButton to="/sites" variant="primary" __next40pxDefaultSize>
13-
{ __( 'Go to Sites' ) }
14-
</RouterLinkButton>
15-
}
9+
headerProps={ {
10+
title: __( '500 Error' ),
11+
description: __( 'Something wrong happened.' ),
12+
actions: [
13+
<RouterLinkButton key="go-to-sites" to="/sites" variant="primary" __next40pxDefaultSize>
14+
{ __( 'Go to Sites' ) }
15+
</RouterLinkButton>,
16+
],
17+
} }
1618
>
1719
<Notice status="error" isDismissible={ false }>
1820
{ error.message }

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

Lines changed: 8 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,25 @@
1-
import {
2-
__experimentalVStack as VStack,
3-
__experimentalHStack as HStack,
4-
__experimentalHeading as Heading,
5-
__experimentalText as Text,
6-
} from '@wordpress/components';
1+
import Header from '@automattic/components/src/header';
2+
import { __experimentalVStack as VStack } from '@wordpress/components';
3+
import type { HeaderProps } from '@automattic/components/src/header/types';
74
import './style.scss';
85

96
const sizes = {
10-
large: {
11-
maxWidth: '1200px',
12-
},
13-
small: {
14-
maxWidth: '600px',
15-
},
7+
large: { maxWidth: '1200px' },
8+
small: { maxWidth: '600px' },
169
};
1710

1811
function PageLayout( {
19-
title,
20-
description,
21-
actions,
12+
headerProps,
2213
children,
2314
size = 'large',
2415
}: {
25-
title: string;
26-
description?: React.ReactNode;
27-
actions?: React.ReactNode;
16+
headerProps: Omit< HeaderProps, 'level' >;
2817
children?: React.ReactNode;
2918
size?: 'large' | 'small';
3019
} ) {
3120
return (
3221
<VStack spacing={ 8 } className="dashboard-page-layout" style={ sizes[ size ] }>
33-
<VStack spacing={ 4 }>
34-
<HStack justify="space-between" alignment="center">
35-
<Heading level={ 1 } style={ { flexShrink: 0 } }>
36-
{ title }
37-
</Heading>
38-
{ !! actions && (
39-
<HStack spacing={ 4 } justify="flex-end">
40-
{ actions }
41-
</HStack>
42-
) }
43-
</HStack>
44-
{ !! description && (
45-
<Text className="dasboard-page-layout__description">{ description } </Text>
46-
) }
47-
</VStack>
22+
<Header { ...headerProps } level={ 1 } />
4823
{ !! children && <VStack spacing={ 8 }>{ children }</VStack> }
4924
</VStack>
5025
);

‎client/dashboard/components/page-layout/style.scss

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
@import '@wordpress/base-styles/variables';
2-
@import '@wordpress/base-styles/colors';
32

43
.dashboard-page-layout {
54
margin: auto;
65
padding: $grid-unit-60 $grid-unit-20;
76
}
8-
9-
.dasboard-page-layout__description {
10-
color: $gray-700 !important;
11-
}

‎client/dashboard/domains/index.tsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -100,12 +100,14 @@ function Domains() {
100100
const { data: filteredData, paginationInfo } = filterSortAndPaginate( domains, view, fields );
101101
return (
102102
<PageLayout
103-
title={ __( 'Domains' ) }
104-
actions={
105-
<Button variant="primary" __next40pxDefaultSize>
106-
{ __( 'Add New Domain' ) }
107-
</Button>
108-
}
103+
headerProps={ {
104+
title: __( 'Domains' ),
105+
actions: [
106+
<Button key="add-new-domain" variant="primary" __next40pxDefaultSize>
107+
{ __( 'Add New Domain' ) }
108+
</Button>,
109+
],
110+
} }
109111
>
110112
<DataViewsCard>
111113
<DataViews

‎client/dashboard/emails/index.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -118,17 +118,17 @@ function Emails() {
118118

119119
return (
120120
<PageLayout
121-
title={ __( 'Emails' ) }
122-
actions={
123-
<div style={ { display: 'flex', gap: '12px' } }>
124-
<Button variant="secondary" __next40pxDefaultSize>
121+
headerProps={ {
122+
title: __( 'Emails' ),
123+
actions: [
124+
<Button key="add-forwarder" variant="secondary" __next40pxDefaultSize>
125125
{ __( 'Add Email Forwarder' ) }
126-
</Button>
127-
<Button variant="primary" __next40pxDefaultSize>
126+
</Button>,
127+
<Button key="add-mailbox" variant="primary" __next40pxDefaultSize>
128128
{ __( 'Add Mailbox' ) }
129-
</Button>
130-
</div>
131-
}
129+
</Button>,
130+
],
131+
} }
132132
>
133133
<Notice status="warning" isDismissible={ false }>
134134
{ __( 'This is using fake data for the moment' ) }

‎client/dashboard/me/active-subscriptions/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import PageLayout from '../../components/page-layout';
33

44
export default function ActiveSubscriptions() {
55
return (
6-
<PageLayout title={ __( 'Active Subscriptions' ) }>
6+
<PageLayout headerProps={ { title: __( 'Active Subscriptions' ) } }>
77
<div>Active subscriptions content will go here</div>
88
</PageLayout>
99
);

‎client/dashboard/me/billing-history/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import PageLayout from '../../components/page-layout';
33

44
function BillingHistory() {
55
return (
6-
<PageLayout title={ __( 'Billing History' ) }>
6+
<PageLayout headerProps={ { title: __( 'Billing History' ) } }>
77
<div>Billing history content will go here</div>
88
</PageLayout>
99
);

‎client/dashboard/me/billing/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import RouterLinkSummaryButton from '../../components/router-link-summary-button
1212

1313
function Billing() {
1414
return (
15-
<PageLayout title={ __( 'Billing' ) } size="small">
15+
<PageLayout headerProps={ { title: __( 'Billing' ) } } size="small">
1616
<VStack spacing={ 4 }>
1717
<RouterLinkSummaryButton
1818
title={ __( 'Active subscriptions' ) }

‎client/dashboard/me/notifications/index.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@ import PageLayout from '../../components/page-layout';
44
function Notifications() {
55
return (
66
<PageLayout
7-
title={ __( 'Notifications' ) }
8-
description={ __( 'Manage your notification settings.' ) }
7+
headerProps={ {
8+
title: __( 'Notifications' ),
9+
description: __( 'Manage your notification settings.' ),
10+
} }
911
/>
1012
);
1113
}

‎client/dashboard/me/payment-methods/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import PageLayout from '../../components/page-layout';
33

44
export default function PaymentMethods() {
55
return (
6-
<PageLayout title={ __( 'Payment Methods' ) }>
6+
<PageLayout headerProps={ { title: __( 'Payment Methods' ) } }>
77
<div>Payment methods content will go here</div>
88
</PageLayout>
99
);

‎client/dashboard/me/privacy/index.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ import PageLayout from '../../components/page-layout';
33

44
function Privacy() {
55
return (
6-
<PageLayout title={ __( 'Privacy' ) } description={ __( 'Manage your privacy settings.' ) } />
6+
<PageLayout
7+
headerProps={ { title: __( 'Privacy' ), description: __( 'Manage your privacy settings.' ) } }
8+
/>
79
);
810
}
911

‎client/dashboard/me/profile/index.tsx

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -169,13 +169,15 @@ export default function Profile() {
169169
<>
170170
<form onSubmit={ handleSubmit }>
171171
<PageLayout
172-
title={ __( 'Profile' ) }
173-
description={
174-
<>
175-
{ __( 'Set your name, bio, and other public-facing information.' ) }{ ' ' }
176-
<ExternalLink href="#learn-more">{ __( 'Learn more' ) }</ExternalLink>
177-
</>
178-
}
172+
headerProps={ {
173+
title: __( 'Profile' ),
174+
description: (
175+
<>
176+
{ __( 'Set your name, bio, and other public-facing information.' ) }{ ' ' }
177+
<ExternalLink href="#learn-more">{ __( 'Learn more' ) }</ExternalLink>
178+
</>
179+
),
180+
} }
179181
size="small"
180182
>
181183
<Card>

‎client/dashboard/me/security/index.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,12 @@ import PageLayout from '../../components/page-layout';
33

44
function Security() {
55
return (
6-
<PageLayout title={ __( 'Security' ) } description={ __( 'Manage your security settings.' ) } />
6+
<PageLayout
7+
headerProps={ {
8+
title: __( 'Security' ),
9+
description: __( 'Manage your security settings.' ),
10+
} }
11+
/>
712
);
813
}
914

‎client/dashboard/me/tax-details/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import PageLayout from '../../components/page-layout';
33

44
export default function TaxDetails() {
55
return (
6-
<PageLayout title={ __( 'Tax Details' ) }>
6+
<PageLayout headerProps={ { title: __( 'Tax Details' ) } }>
77
<div>Tax details content will go here</div>
88
</PageLayout>
99
);

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import {
2+
__experimentalVStack as VStack,
3+
__experimentalHStack as HStack,
4+
__experimentalHeading as Heading,
5+
__experimentalText as Text,
6+
} from '@wordpress/components';
7+
import './style.scss';
8+
9+
const sizes = {
10+
large: {
11+
maxWidth: '1200px',
12+
},
13+
small: {
14+
maxWidth: '600px',
15+
},
16+
};
17+
18+
function PageLayout( {
19+
title,
20+
description,
21+
actions,
22+
children,
23+
size = 'large',
24+
}: {
25+
title: string;
26+
description?: React.ReactNode;
27+
actions?: React.ReactNode;
28+
children?: React.ReactNode;
29+
size?: 'large' | 'small';
30+
} ) {
31+
return (
32+
<VStack spacing={ 8 } className="dashboard-page-layout" style={ sizes[ size ] }>
33+
<VStack spacing={ 4 }>
34+
<HStack justify="space-between" alignment="center">
35+
<Heading level={ 1 } style={ { flexShrink: 0 } }>
36+
{ title }
37+
</Heading>
38+
{ !! actions && (
39+
<HStack spacing={ 4 } justify="flex-end">
40+
{ actions }
41+
</HStack>
42+
) }
43+
</HStack>
44+
{ !! description && (
45+
<Text className="dasboard-page-layout__description">{ description } </Text>
46+
) }
47+
</VStack>
48+
{ !! children && <VStack spacing={ 8 }>{ children }</VStack> }
49+
</VStack>
50+
);
51+
}
52+
53+
export default PageLayout;

0 commit comments

Comments
 (0)