Skip to content

Commit 4a848b0

Browse files
zeroedinzeroedin
authored
Merge b6b32af into 2914145 
2 parents 2914145 + b6b32af commit 4a848b0

7 files changed

Lines changed: 397 additions & 0 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ core/pfe-core/demo/*
105105

106106
# AI
107107
.claude/settings.local.json
108+
.claude/worktrees
108109

109110
# Temp files
110111
*~

‎elements/pf-v6-banner/demo/basic.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
name: Basic
3+
description: Banners can be styled with one of 9 different colors. A basic banner should only be used when the banner color does not represent status or severity.
4+
---
5+
<pf-v6-banner>Default banner</pf-v6-banner>
6+
<pf-v6-banner color="red">Red banner</pf-v6-banner>
7+
<pf-v6-banner color="orangered">Orangered banner</pf-v6-banner>
8+
<pf-v6-banner color="orange">Orange banner</pf-v6-banner>
9+
<pf-v6-banner color="yellow">Yellow banner</pf-v6-banner>
10+
<pf-v6-banner color="green">Green banner</pf-v6-banner>
11+
<pf-v6-banner color="teal">Teal banner</pf-v6-banner>
12+
<pf-v6-banner color="blue">Blue banner</pf-v6-banner>
13+
<pf-v6-banner color="purple">Purple banner</pf-v6-banner>
14+
15+
<script type="module">
16+
import '@patternfly/elements/pf-v6-banner/pf-v6-banner.js';
17+
</script>
18+
19+
<style>
20+
pf-v6-banner + pf-v6-banner {
21+
margin-block-start: 0.5rem;
22+
}
23+
</style>

‎elements/pf-v6-banner/demo/index.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
name: Default
3+
description: A default banner communicates a short snippet of information.
4+
---
5+
<pf-v6-banner>Default banner</pf-v6-banner>
6+
7+
<script type="module">
8+
import '@patternfly/elements/pf-v6-banner/pf-v6-banner.js';
9+
</script>

‎elements/pf-v6-banner/demo/status.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
name: Status
3+
description: When a banner conveys status, use the status attribute. Include an icon and screen-reader-text for accessibility.
4+
---
5+
<pf-v6-banner status="success" screen-reader-text="Success banner">
6+
<pf-v5-icon icon="check-circle"></pf-v5-icon>
7+
Success banner
8+
</pf-v6-banner>
9+
10+
<pf-v6-banner status="warning" screen-reader-text="Warning banner">
11+
<pf-v5-icon icon="exclamation-triangle"></pf-v5-icon>
12+
Warning banner
13+
</pf-v6-banner>
14+
15+
<pf-v6-banner status="danger" screen-reader-text="Danger banner">
16+
<pf-v5-icon icon="exclamation-circle"></pf-v5-icon>
17+
Danger banner
18+
</pf-v6-banner>
19+
20+
<pf-v6-banner status="info" screen-reader-text="Info banner">
21+
<pf-v5-icon icon="info-circle"></pf-v5-icon>
22+
Info banner
23+
</pf-v6-banner>
24+
25+
<pf-v6-banner status="custom" screen-reader-text="Custom banner">
26+
<pf-v5-icon icon="bell"></pf-v5-icon>
27+
Custom banner
28+
</pf-v6-banner>
29+
30+
<script type="module">
31+
import '@patternfly/elements/pf-v6-banner/pf-v6-banner.js';
32+
import '@patternfly/elements/pf-v5-icon/pf-v5-icon.js';
33+
</script>
34+
35+
<style>
36+
pf-v6-banner + pf-v6-banner {
37+
margin-block-start: 0.5rem;
38+
}
39+
</style>

‎elements/pf-v6-banner/demo/sticky.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
name: Sticky
3+
description: A sticky banner stays fixed at the top of its container as content scrolls.
4+
---
5+
<pf-v6-banner sticky>Sticky banner</pf-v6-banner>
6+
<article>
7+
<h2>The Open Source Definition</h2>
8+
<p><a href="https://opensource.org/osd/">https://opensource.org/osd/</a></p>
9+
10+
<h3>Introduction</h3>
11+
<p>Open source doesn't just mean access to the source code. The distribution
12+
terms of open-source software must comply with the following criteria:</p>
13+
14+
<h3>1. Free Redistribution</h3>
15+
<p>The license shall not restrict any party from selling or giving away the
16+
software as a component of an aggregate software distribution containing
17+
programs from several different sources. The license shall not require a
18+
royalty or other fee for such sale.</p>
19+
20+
<h3>2. Source Code</h3>
21+
<p>The program must include source code, and must allow distribution in
22+
source code as well as compiled form.</p>
23+
24+
<h3>3. Derived Works</h3>
25+
<p>The license must allow modifications and derived works, and must allow
26+
them to be distributed under the same terms as the license of the original
27+
software.</p>
28+
29+
<h3>4. Integrity of The Author's Source Code</h3>
30+
<p>The license may restrict source-code from being distributed in modified
31+
form only if the license allows the distribution of "patch files" with the
32+
source code for the purpose of modifying the program at build time.</p>
33+
34+
<h3>5. No Discrimination Against Persons or Groups</h3>
35+
<p>The license must not discriminate against any person or group of
36+
persons.</p>
37+
38+
<h3>6. No Discrimination Against Fields of Endeavor</h3>
39+
<p>The license must not restrict anyone from making use of the program in a
40+
specific field of endeavor.</p>
41+
42+
<h3>7. Distribution of License</h3>
43+
<p>The rights attached to the program must apply to all to whom the program
44+
is redistributed without the need for execution of an additional license by
45+
those parties.</p>
46+
</article>
47+
48+
<script type="module">
49+
import '@patternfly/elements/pf-v6-banner/pf-v6-banner.js';
50+
</script>

‎elements/pf-v6-banner/pf-v6-banner.css‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
:host {
2+
display: block;
3+
box-sizing: border-box;
4+
}
5+
6+
:host([hidden]) {
7+
display: none !important;
8+
}
9+
10+
:host([sticky]) {
11+
position: sticky;
12+
inset-block-start: 0;
13+
z-index: var(--pf-v6-c-banner--m-sticky--ZIndex,
14+
var(--pf-t--global--z-index--md, 300));
15+
box-shadow: var(--pf-v6-c-banner--m-sticky--BoxShadow,
16+
var(--pf-t--global--box-shadow--md));
17+
}
18+
19+
#container {
20+
--_bg: var(--pf-v6-c-banner--BackgroundColor,
21+
var(--pf-t--global--color--nonstatus--gray--default,
22+
light-dark(var(--pf-t--color--gray--20, #e0e0e0), var(--pf-t--color--gray--60, #4d4d4d))));
23+
--_color: var(--pf-v6-c-banner--Color,
24+
var(--pf-t--global--text--color--nonstatus--on-gray--default,
25+
light-dark(var(--pf-t--color--gray--100, #151515), var(--pf-t--color--white, #ffffff))));
26+
--_padding-block: var(--pf-v6-c-banner--PaddingBlockStart,
27+
var(--pf-t--global--spacer--xs, 0.25rem));
28+
--_padding-inline: var(--pf-v6-c-banner--PaddingInlineStart,
29+
var(--pf-t--global--spacer--md, 1rem));
30+
--_font-size: var(--pf-v6-c-banner--FontSize,
31+
var(--pf-t--global--font--size--body--default, 0.875rem));
32+
--_border-color: var(--pf-v6-c-banner--BorderColor,
33+
var(--pf-t--global--border--color--high-contrast, transparent));
34+
--_border-width: var(--pf-v6-c-banner--BorderWidth,
35+
var(--pf-t--global--border--width--high-contrast--regular, 0));
36+
37+
flex-shrink: 0;
38+
padding-block: var(--_padding-block);
39+
padding-inline: var(--_padding-inline);
40+
font-size: var(--_font-size);
41+
color: var(--_color);
42+
white-space: nowrap;
43+
background-color: var(--_bg);
44+
border-block: var(--_border-width) solid var(--_border-color);
45+
46+
@media (min-width: 768px) {
47+
--_padding-inline: var(--pf-v6-c-banner--md--PaddingInlineStart,
48+
var(--pf-t--global--spacer--lg, 1.5rem));
49+
}
50+
51+
/* Non-status color modifiers (before status so status takes precedence) */
52+
53+
&.red {
54+
--_bg: var(--pf-v6-c-banner--m-red--BackgroundColor,
55+
var(--pf-t--global--color--nonstatus--red--default,
56+
light-dark(var(--pf-t--color--red--20, #fbc5c5), var(--pf-t--color--red--30, #f9a8a8))));
57+
--_color: var(--pf-v6-c-banner--m-red--Color,
58+
var(--pf-t--global--text--color--nonstatus--on-red--default,
59+
var(--pf-t--color--gray--100, #151515)));
60+
}
61+
62+
&.orangered {
63+
--_bg: var(--pf-v6-c-banner--m-orangered--BackgroundColor,
64+
var(--pf-t--global--color--nonstatus--orangered--default,
65+
light-dark(var(--pf-t--color--red-orange--20, #fbbea8), var(--pf-t--color--red-orange--30, #f89b78))));
66+
--_color: var(--pf-v6-c-banner--m-orangered--Color,
67+
var(--pf-t--global--text--color--nonstatus--on-orangered--default,
68+
var(--pf-t--color--gray--100, #151515)));
69+
}
70+
71+
&.orange {
72+
--_bg: var(--pf-v6-c-banner--m-orange--BackgroundColor,
73+
var(--pf-t--global--color--nonstatus--orange--default,
74+
light-dark(var(--pf-t--color--orange--20, #fccb8f), var(--pf-t--color--orange--30, #f8ae54))));
75+
--_color: var(--pf-v6-c-banner--m-orange--Color,
76+
var(--pf-t--global--text--color--nonstatus--on-orange--default,
77+
var(--pf-t--color--gray--100, #151515)));
78+
}
79+
80+
&.yellow {
81+
--_bg: var(--pf-v6-c-banner--m-yellow--BackgroundColor,
82+
var(--pf-t--global--color--nonstatus--yellow--default,
83+
light-dark(var(--pf-t--color--yellow--20, #ffe072), var(--pf-t--color--yellow--30, #ffcc17))));
84+
--_color: var(--pf-v6-c-banner--m-yellow--Color,
85+
var(--pf-t--global--text--color--nonstatus--on-yellow--default,
86+
var(--pf-t--color--gray--100, #151515)));
87+
}
88+
89+
&.green {
90+
--_bg: var(--pf-v6-c-banner--m-green--BackgroundColor,
91+
var(--pf-t--global--color--nonstatus--green--default,
92+
light-dark(var(--pf-t--color--green--20, #d1f1bb), var(--pf-t--color--green--30, #afdc8f))));
93+
--_color: var(--pf-v6-c-banner--m-green--Color,
94+
var(--pf-t--global--text--color--nonstatus--on-green--default,
95+
var(--pf-t--color--gray--100, #151515)));
96+
}
97+
98+
&.teal {
99+
--_bg: var(--pf-v6-c-banner--m-teal--BackgroundColor,
100+
var(--pf-t--global--color--nonstatus--teal--default,
101+
light-dark(var(--pf-t--color--teal--20, #b9e5e5), var(--pf-t--color--teal--30, #9ad8d8))));
102+
--_color: var(--pf-v6-c-banner--m-teal--Color,
103+
var(--pf-t--global--text--color--nonstatus--on-teal--default,
104+
var(--pf-t--color--gray--100, #151515)));
105+
}
106+
107+
&.blue {
108+
--_bg: var(--pf-v6-c-banner--m-blue--BackgroundColor,
109+
var(--pf-t--global--color--nonstatus--blue--default,
110+
light-dark(var(--pf-t--color--blue--20, #b9dafc), var(--pf-t--color--blue--30, #92c5f9))));
111+
--_color: var(--pf-v6-c-banner--m-blue--Color,
112+
var(--pf-t--global--text--color--nonstatus--on-blue--default,
113+
var(--pf-t--color--gray--100, #151515)));
114+
}
115+
116+
&.purple {
117+
--_bg: var(--pf-v6-c-banner--m-purple--BackgroundColor,
118+
var(--pf-t--global--color--nonstatus--purple--default,
119+
light-dark(var(--pf-t--color--purple--20, #d0c5f4), var(--pf-t--color--purple--30, #b6a6e9))));
120+
--_color: var(--pf-v6-c-banner--m-purple--Color,
121+
var(--pf-t--global--text--color--nonstatus--on-purple--default,
122+
var(--pf-t--color--gray--100, #151515)));
123+
}
124+
125+
/* Status modifiers (after color so status takes precedence at equal specificity) */
126+
127+
&.danger {
128+
--_bg: var(--pf-v6-c-banner--m-danger--BackgroundColor,
129+
var(--pf-t--global--color--status--danger--default,
130+
light-dark(var(--pf-t--color--red-orange--60, #b1380b), var(--pf-t--color--red-orange--50, #f0561d))));
131+
--_color: var(--pf-v6-c-banner--m-danger--Color,
132+
var(--pf-t--global--text--color--status--on-danger--default,
133+
light-dark(var(--pf-t--color--white, #ffffff), var(--pf-t--color--gray--100, #1f1f1f))));
134+
}
135+
136+
&.success {
137+
--_bg: var(--pf-v6-c-banner--m-success--BackgroundColor,
138+
var(--pf-t--global--color--status--success--default,
139+
light-dark(var(--pf-t--color--green--60, #3d7317), var(--pf-t--color--green--40, #87bb62))));
140+
--_color: var(--pf-v6-c-banner--m-success--Color,
141+
var(--pf-t--global--text--color--status--on-success--default,
142+
light-dark(var(--pf-t--color--white, #ffffff), var(--pf-t--color--gray--100, #1f1f1f))));
143+
}
144+
145+
&.warning {
146+
--_bg: var(--pf-v6-c-banner--m-warning--BackgroundColor,
147+
var(--pf-t--global--color--status--warning--default,
148+
light-dark(var(--pf-t--color--yellow--30, #ffcc17), var(--pf-t--color--yellow--30, #ffcc17))));
149+
--_color: var(--pf-v6-c-banner--m-warning--Color,
150+
var(--pf-t--global--text--color--status--on-warning--default,
151+
light-dark(var(--pf-t--color--gray--100, #151515), var(--pf-t--color--gray--100, #1f1f1f))));
152+
}
153+
154+
&.info {
155+
--_bg: var(--pf-v6-c-banner--m-info--BackgroundColor,
156+
var(--pf-t--global--color--status--info--default,
157+
light-dark(var(--pf-t--color--purple--50, #5e40be), var(--pf-t--color--purple--30, #b6a6e9))));
158+
--_color: var(--pf-v6-c-banner--m-info--Color,
159+
var(--pf-t--global--text--color--status--on-info--default,
160+
light-dark(var(--pf-t--color--white, #ffffff), var(--pf-t--color--gray--100, #1f1f1f))));
161+
}
162+
163+
&.custom {
164+
--_bg: var(--pf-v6-c-banner--m-custom--BackgroundColor,
165+
var(--pf-t--global--color--status--custom--default,
166+
light-dark(var(--pf-t--color--teal--60, #147878), var(--pf-t--color--teal--40, #63bdbd))));
167+
--_color: var(--pf-v6-c-banner--m-custom--Color,
168+
var(--pf-t--global--text--color--status--on-custom--default,
169+
light-dark(var(--pf-t--color--white, #ffffff), var(--pf-t--color--gray--100, #1f1f1f))));
170+
}
171+
}
172+
173+
::slotted(a) {
174+
color: inherit;
175+
text-decoration-line: underline;
176+
}
177+
178+
.sr-only {
179+
position: absolute;
180+
inline-size: 1px;
181+
block-size: 1px;
182+
padding: 0;
183+
margin: -1px;
184+
overflow: hidden;
185+
clip: rect(0, 0, 0, 0);
186+
white-space: nowrap;
187+
border: 0;
188+
}

0 commit comments

Comments
 (0)