Skip to content

Commit 51c3dac

Browse files
tlabajtlabaj
authored
chore(Masthead): Consume Penta tokens (#9853)
* chore(Masthead): Update logo in masthead docs for Penta * chore(Masthead): Update logo in masthead docs for Penta
1 parent edac507 commit 51c3dac

30 files changed

+249
-166
lines changed

‎packages/react-core/src/components/Masthead/examples/Masthead.md‎

Lines changed: 8 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ propComponents: ['Masthead', 'MastheadToggle', 'MastheadMain', 'MastheadBrand',
77

88
import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
99
import { Link } from '@reach/router';
10-
import pfIcon from '../../assets/pf-logo.svg';
10+
import pfIcon from '../../assets/PF-HorizontalLogo-Color.svg';
1111

1212
`Masthead` should contain the following components to maintain proper layout and formatting: `MastheadToggle`, `MastheadMain`, and `MastheadContent`.
1313

@@ -17,173 +17,35 @@ import pfIcon from '../../assets/pf-logo.svg';
1717

1818
### Basic
1919

20-
```ts
21-
import React from 'react';
22-
import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
23-
import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
24-
25-
<Masthead id="basic-example">
26-
<MastheadToggle>
27-
<Button variant="plain" onClick={() => {}} aria-label="Global navigation">
28-
<BarsIcon />
29-
</Button>
30-
</MastheadToggle>
31-
<MastheadMain>
32-
<MastheadBrand>Logo</MastheadBrand>
33-
</MastheadMain>
34-
<MastheadContent>
35-
<span>Content</span>
36-
</MastheadContent>
37-
</Masthead>;
20+
```ts file="./MastheadBasic.tsx"
3821
```
3922

4023
### Basic with mixed content
4124

42-
```ts
43-
import React from 'react';
44-
import {
45-
Masthead,
46-
MastheadToggle,
47-
MastheadMain,
48-
MastheadBrand,
49-
MastheadContent,
50-
Button,
51-
Flex,
52-
FlexItem
53-
} from '@patternfly/react-core';
54-
import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
55-
56-
<Masthead id="basic-mixed">
57-
<MastheadToggle>
58-
<Button variant="plain" onClick={() => {}} aria-label="Global navigation">
59-
<BarsIcon />
60-
</Button>
61-
</MastheadToggle>
62-
<MastheadMain>
63-
<MastheadBrand>Logo</MastheadBrand>
64-
</MastheadMain>
65-
<MastheadContent>
66-
<Flex>
67-
<span>Testing text color</span>
68-
<Button>testing</Button>
69-
<FlexItem alignSelf={{ default: 'alignSelfFlexEnd' }}>
70-
<Button>testing</Button>
71-
</FlexItem>
72-
</Flex>
73-
</MastheadContent>
74-
</Masthead>;
25+
```ts file="./MastheadBasicMixedContent.tsx"
7526
```
7627

7728
### Display inline
7829

79-
```ts
80-
import React from 'react';
81-
import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
82-
import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
83-
84-
<Masthead id="inline-masthead" display={{ default: 'inline' }}>
85-
<MastheadToggle>
86-
<Button variant="plain" onClick={() => {}} aria-label="Global navigation">
87-
<BarsIcon />
88-
</Button>
89-
</MastheadToggle>
90-
<MastheadMain>
91-
<MastheadBrand>Logo</MastheadBrand>
92-
</MastheadMain>
93-
<MastheadContent>
94-
<span>Content</span>
95-
</MastheadContent>
96-
</Masthead>;
30+
```ts file="./MastheadDisplayInline.tsx"
9731
```
9832

9933
### Display stack
10034

101-
```ts
102-
import React from 'react';
103-
import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
104-
import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
105-
106-
<Masthead id="stack-masthead" display={{ default: 'stack' }}>
107-
<MastheadToggle>
108-
<Button variant="plain" onClick={() => {}} aria-label="Global navigation">
109-
<BarsIcon />
110-
</Button>
111-
</MastheadToggle>
112-
<MastheadMain>
113-
<MastheadBrand>Logo</MastheadBrand>
114-
</MastheadMain>
115-
<MastheadContent>
116-
<span>Content</span>
117-
</MastheadContent>
118-
</Masthead>;
35+
```ts file="./MastheadDisplayStack.tsx"
11936
```
12037

12138
### Display stack, display inline responsive
12239

123-
```ts
124-
import React from 'react';
125-
import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
126-
import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
127-
128-
<Masthead id="stack-inline-masthead" display={{ default: 'inline', lg: 'stack', '2xl': 'inline' }}>
129-
<MastheadToggle>
130-
<Button variant="plain" onClick={() => {}} aria-label="Global navigation">
131-
<BarsIcon />
132-
</Button>
133-
</MastheadToggle>
134-
<MastheadMain>
135-
<MastheadBrand>Logo</MastheadBrand>
136-
</MastheadMain>
137-
<MastheadContent>
138-
<span>Content</span>
139-
</MastheadContent>
140-
</Masthead>;
40+
```ts file="./MastheadDisplayStackInlineResponsive.tsx"
14141
```
14242

14343
### Inset
14444

145-
```ts
146-
import React from 'react';
147-
import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
148-
import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
149-
150-
<Masthead id="inset-masthead" inset={{ default: 'insetSm' }}>
151-
<MastheadToggle>
152-
<Button variant="plain" onClick={() => {}} aria-label="Global navigation">
153-
<BarsIcon />
154-
</Button>
155-
</MastheadToggle>
156-
<MastheadMain>
157-
<MastheadBrand>Logo</MastheadBrand>
158-
</MastheadMain>
159-
<MastheadContent>
160-
<span>Content</span>
161-
</MastheadContent>
162-
</Masthead>;
45+
```ts file="./MastheadInsets.tsx"
16346
```
16447

16548
### With icon router link
16649

167-
```ts
168-
import React from 'react';
169-
import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button, Brand } from '@patternfly/react-core';
170-
import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
171-
import { Link } from '@reach/router';
172-
import pfIcon from '../../assets/pf-logo.svg';
173-
174-
<Masthead id="icon-router-link">
175-
<MastheadToggle>
176-
<Button variant="plain" onClick={() => {}} aria-label="Global navigation">
177-
<BarsIcon />
178-
</Button>
179-
</MastheadToggle>
180-
<MastheadMain>
181-
<MastheadBrand component={props => <Link {...props} to="#" />}>
182-
<Brand src={pfIcon} alt="PatternFly" heights={{ default: '36px' }} />
183-
</MastheadBrand>
184-
</MastheadMain>
185-
<MastheadContent>
186-
<span>Content</span>
187-
</MastheadContent>
188-
</Masthead>;
50+
```ts file="./MastheadIconRouterLink.tsx"
18951
```

‎packages/react-core/src/components/Masthead/examples/MastheadBasic.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
3+
import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
4+
5+
export const MastheadBasic: React.FunctionComponent = () => (
6+
<Masthead id="basic-example">
7+
<MastheadToggle>
8+
<Button variant="plain" onClick={() => {}} aria-label="Global navigation">
9+
<BarsIcon />
10+
</Button>
11+
</MastheadToggle>
12+
<MastheadMain>
13+
<MastheadBrand component="a">Logo</MastheadBrand>
14+
</MastheadMain>
15+
<MastheadContent>
16+
<span>Content</span>
17+
</MastheadContent>
18+
</Masthead>
19+
);

‎packages/react-core/src/components/Masthead/examples/MastheadBasicMixedContent.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import {
3+
Masthead,
4+
MastheadToggle,
5+
MastheadMain,
6+
MastheadBrand,
7+
MastheadContent,
8+
Button,
9+
Flex,
10+
FlexItem
11+
} from '@patternfly/react-core';
12+
import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
13+
14+
export const MastheadBasicMixedContent: React.FunctionComponent = () => (
15+
<Masthead id="basic-mixed">
16+
<MastheadToggle>
17+
<Button variant="plain" onClick={() => {}} aria-label="Global navigation">
18+
<BarsIcon />
19+
</Button>
20+
</MastheadToggle>
21+
<MastheadMain>
22+
<MastheadBrand component="a">Logo</MastheadBrand>
23+
</MastheadMain>
24+
<MastheadContent>
25+
<Flex>
26+
<span>Content</span>
27+
<Button>Primary</Button>
28+
<FlexItem alignSelf={{ default: 'alignSelfFlexEnd' }}>
29+
<Button variant="secondary">Secondary</Button>
30+
</FlexItem>
31+
<FlexItem alignSelf={{ default: 'alignSelfFlexEnd' }}>
32+
<Button variant="tertiary">Tertiary</Button>
33+
</FlexItem>
34+
</Flex>
35+
</MastheadContent>
36+
</Masthead>
37+
);

‎packages/react-core/src/components/Masthead/examples/MastheadDisplayInline.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
3+
import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
4+
5+
export const MastheadDisplayInline: React.FunctionComponent = () => (
6+
<Masthead id="inline-masthead" display={{ default: 'inline' }}>
7+
<MastheadToggle>
8+
<Button variant="plain" onClick={() => {}} aria-label="Global navigation">
9+
<BarsIcon />
10+
</Button>
11+
</MastheadToggle>
12+
<MastheadMain>
13+
<MastheadBrand component="a">Logo</MastheadBrand>
14+
</MastheadMain>
15+
<MastheadContent>
16+
<span>Content</span>
17+
</MastheadContent>
18+
</Masthead>
19+
);

‎packages/react-core/src/components/Masthead/examples/MastheadDisplayStack.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
3+
import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
4+
5+
export const MastheadDisplayStack: React.FunctionComponent = () => (
6+
<Masthead id="stack-masthead" display={{ default: 'stack' }}>
7+
<MastheadToggle>
8+
<Button variant="plain" onClick={() => {}} aria-label="Global navigation">
9+
<BarsIcon />
10+
</Button>
11+
</MastheadToggle>
12+
<MastheadMain>
13+
<MastheadBrand component="a">Logo</MastheadBrand>
14+
</MastheadMain>
15+
<MastheadContent>
16+
<span>Content</span>
17+
</MastheadContent>
18+
</Masthead>
19+
);

‎packages/react-core/src/components/Masthead/examples/MastheadDisplayStackInlineResponsive.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
3+
import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
4+
5+
export const MastheadDisplayStackInlineResponsive: React.FunctionComponent = () => (
6+
<Masthead id="stack-inline-masthead" display={{ default: 'inline', lg: 'stack', '2xl': 'inline' }}>
7+
<MastheadToggle>
8+
<Button variant="plain" onClick={() => {}} aria-label="Global navigation">
9+
<BarsIcon />
10+
</Button>
11+
</MastheadToggle>
12+
<MastheadMain>
13+
<MastheadBrand component="a">Logo</MastheadBrand>
14+
</MastheadMain>
15+
<MastheadContent>
16+
<span>Content</span>
17+
</MastheadContent>
18+
</Masthead>
19+
);

‎packages/react-core/src/components/Masthead/examples/MastheadIconRouterLink.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
import {
3+
Masthead,
4+
MastheadToggle,
5+
MastheadMain,
6+
MastheadBrand,
7+
MastheadContent,
8+
Button,
9+
Brand
10+
} from '@patternfly/react-core';
11+
import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
12+
import { Link } from '@reach/router';
13+
import pfIcon from '../../assets/PF-HorizontalLogo-Color.svg';
14+
15+
export const MastheadIconRouterLink: React.FunctionComponent = () => (
16+
<Masthead id="icon-router-link">
17+
<MastheadToggle>
18+
<Button variant="plain" onClick={() => {}} aria-label="Global navigation">
19+
<BarsIcon />
20+
</Button>
21+
</MastheadToggle>
22+
<MastheadMain>
23+
<MastheadBrand component={(props) => <Link {...props} to="#" />}>
24+
<Brand src={pfIcon} alt="PatternFly" heights={{ default: '36px' }} />
25+
</MastheadBrand>
26+
</MastheadMain>
27+
<MastheadContent>
28+
<span>Content</span>
29+
</MastheadContent>
30+
</Masthead>
31+
);

‎packages/react-core/src/components/Masthead/examples/MastheadInsets.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
3+
import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
4+
5+
export const MastheadInsets: React.FunctionComponent = () => (
6+
<Masthead id="inset-masthead" inset={{ default: 'insetSm' }}>
7+
<MastheadToggle>
8+
<Button variant="plain" onClick={() => {}} aria-label="Global navigation">
9+
<BarsIcon />
10+
</Button>
11+
</MastheadToggle>
12+
<MastheadMain>
13+
<MastheadBrand component="a">Logo</MastheadBrand>
14+
</MastheadMain>
15+
<MastheadContent>
16+
<span>Content</span>
17+
</MastheadContent>
18+
</Masthead>
19+
);

‎packages/react-core/src/components/assets/PF-HorizontalLogo-Color.svg‎

Lines changed: 29 additions & 0 deletions
Loading

‎packages/react-core/src/demos/DashboardHeader.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-
2828
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
2929
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
3030
import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
31-
import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
31+
import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
3232

3333
interface DashboardHeaderProps {
3434
/** Render custom notification badge */

0 commit comments

Comments
 (0)