Skip to content

Commit f559843

Browse files
mfrances17mfrances17
authored
feat(Brand): consumed Penta updates (#10045)
* feat(Brand): consumed Penta updates * revise alt text * code and wording changes from PR review
1 parent 8ea0699 commit f559843

File tree

7 files changed

+118
-22
lines changed

7 files changed

+118
-22
lines changed

‎packages/react-core/src/components/Brand/examples/Brand.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.show-dark,
2+
:where(.pf-v5-theme-dark) .show-light {
3+
display: none;
4+
}
5+
6+
:where(.pf-v5-theme-dark) .show-dark {
7+
display: revert;
8+
}
9+
10+
:where(.pf-v5-theme-dark) .show-dark .pf-m-picture {
11+
display: inline-flex;
12+
}

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

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,18 @@ cssPrefix: null
55
propComponents: ['Brand']
66
---
77

8-
import pfLogo from '../../assets/pfLogo.svg';
9-
import logoXl from '../../assets/pf-c-brand--logo-on-xl.svg';
10-
import logoLg from '../../assets/pf-c-brand--logo-on-lg.svg';
11-
import logoMd from '../../assets/pf-c-brand--logo-on-md.svg';
12-
import logoSm from '../../assets/pf-c-brand--logo-on-sm.svg';
13-
import logo from '../../assets/pf-c-brand--logo.svg';
14-
import logoBase from '../../assets/pf-c-brand--logo-base.jpg';
8+
import './Brand.css';
9+
import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
10+
import pfLogoDark from '../../assets/PF-HorizontalLogo-Reverse.svg';
11+
import pfLogoSm from '../../assets/PF-IconLogo-color.svg';
12+
import pfLogoSmDark from '../../assets/PF-IconLogo-Reverse.svg';
1513

1614
## Examples
1715

16+
The brand component does not have any built-in theme support. If a brand should be dynamically styled, you must manually set up the necessary logic on your own.
17+
18+
These examples adjust styling when the PatternFly website is toggled between the light and dark theme.
19+
1820
### Basic
1921

2022
```ts file="./BrandBasic.tsx"

‎packages/react-core/src/components/Brand/examples/BrandBasic.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
11
import React from 'react';
22
import { Brand } from '@patternfly/react-core';
3-
import pfLogo from '../../assets/pfLogo.svg';
3+
import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
4+
import pfLogoDark from '../../assets/PF-HorizontalLogo-Reverse.svg';
45

56
export const BrandBasic: React.FunctionComponent = () => (
6-
<Brand src={pfLogo} alt="Patternfly Logo" widths={{ default: '200px', md: '400px', xl: '600px' }} />
7+
<>
8+
<div className="show-light">
9+
<Brand src={pfLogo} alt="Patternfly" widths={{ default: '200px', md: '400px', xl: '600px' }} />
10+
</div>
11+
<div className="show-dark">
12+
<Brand src={pfLogoDark} alt="Patternfly" widths={{ default: '200px', md: '400px', xl: '600px' }} />
13+
</div>
14+
</>
715
);

‎packages/react-core/src/components/Brand/examples/BrandResponsive.tsx‎

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,32 @@
11
import React from 'react';
22
import { Brand } from '@patternfly/react-core';
3-
import logoXl from '../../assets/pf-c-brand--logo-on-xl.svg';
43

5-
import logoLg from '../../assets/pf-c-brand--logo-on-lg.svg';
6-
import logoMd from '../../assets/pf-c-brand--logo-on-md.svg';
7-
import logoSm from '../../assets/pf-c-brand--logo-on-sm.svg';
8-
import logo from '../../assets/pf-c-brand--logo.svg';
9-
import logoBase from '../../assets/pf-c-brand--logo-base.jpg';
4+
import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
5+
import pfLogoDark from '../../assets/PF-HorizontalLogo-Reverse.svg';
6+
import pfLogoSm from '../../assets/PF-IconLogo-color.svg';
7+
import pfLogoSmDark from '../../assets/PF-IconLogo-Reverse.svg';
108

119
export const BrandBasic: React.FunctionComponent = () => (
12-
<Brand src={logoBase} alt="Fallback patternfly default logo" widths={{ default: '40px', sm: '60px', md: '220px' }}>
13-
<source media="(min-width: 1200px)" srcSet={logoXl} />
14-
<source media="(min-width: 992px)" srcSet={logoLg} />
15-
<source media="(min-width: 768px)" srcSet={logoMd} />
16-
<source media="(min-width: 576px)" srcSet={logoSm} />
17-
<source srcSet={logo} />
18-
</Brand>
10+
<>
11+
<div className="show-light">
12+
<Brand src={pfLogo} alt="Patternfly" widths={{ default: '40px', sm: '60px', md: '220px' }}>
13+
<source media="(min-width: 1200px)" srcSet={pfLogo} />
14+
<source media="(min-width: 992px)" srcSet={pfLogo} />
15+
<source media="(min-width: 768px)" srcSet={pfLogo} />
16+
<source media="(min-width: 576px)" srcSet={pfLogoSm} />
17+
<source media="(min-width: 320px)" srcSet={pfLogoSm} />
18+
<source srcSet={pfLogo} />
19+
</Brand>
20+
</div>
21+
<div className="show-dark">
22+
<Brand src={pfLogoDark} alt="Patternfly" widths={{ default: '40px', sm: '60px', md: '220px' }}>
23+
<source media="(min-width: 1200px)" srcSet={pfLogoDark} />
24+
<source media="(min-width: 992px)" srcSet={pfLogoDark} />
25+
<source media="(min-width: 768px)" srcSet={pfLogoDark} />
26+
<source media="(min-width: 576px)" srcSet={pfLogoSmDark} />
27+
<source media="(min-width: 320px)" srcSet={pfLogoSmDark} />
28+
<source srcSet={pfLogoDark} />
29+
</Brand>
30+
</div>
31+
</>
1932
);

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

Lines changed: 28 additions & 0 deletions
Loading

‎packages/react-core/src/components/assets/PF-IconLogo-Reverse.svg‎

Lines changed: 16 additions & 0 deletions
Loading

‎packages/react-core/src/components/assets/PF-IconLogo-color.svg‎

Lines changed: 17 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)