Skip to content

Commit cf5abb5

Browse files
zeroedinbennypowers
zeroedin
and
bennypowers
authored
feat(banner): add pf-banner element (#2579)
* feat(banner): pf-banner element * docs(banner): fix variant description * docs(banner): add screenshot image * docs(banner): update summary text * chore(banner): add changeset * fix(tabs): add display flex and gap when icon is present * style(banner): nits and docs --------- Co-authored-by: Benny Powers <[email protected]> Co-authored-by: Benny Powers <[email protected]>
1 parent 2fe69cb commit cf5abb5

File tree

12 files changed

+527
-0
lines changed

12 files changed

+527
-0
lines changed

‎.changeset/pf-banner.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
"@patternfly/elements": minor
3+
---
4+
5+
✨ Added `<pf-banner>`
6+
7+
```html
8+
<pf-banner variant="info" icon="info" sticky>
9+
Important information.
10+
</pf-banner>
11+
```

‎elements/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"./pf-avatar/pf-avatar.js": "./pf-avatar/pf-avatar.js",
2121
"./pf-badge/BaseBadge.js": "./pf-badge/BaseBadge.js",
2222
"./pf-badge/pf-badge.js": "./pf-badge/pf-badge.js",
23+
"./pf-banner/pf-banner.js": "./pf-banner/pf-banner.js",
2324
"./pf-button/BaseButton.js": "./pf-button/BaseButton.js",
2425
"./pf-button/pf-button.js": "./pf-button/pf-button.js",
2526
"./pf-card/BaseCard.js": "./pf-card/BaseCard.js",

‎elements/pf-banner/README.md‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# Patternfly Elements Banner
2+
A banner is a 1-line, full color, full width container that can be used to communicate short snippets of information to users. Banners are un-intrusive and non-dismissible.
3+
4+
Read more about Button in the [PatternFly Elements Banner documentation](https://patternflyelements.org/components/banner)
5+
6+
## Installation
7+
Load `<pf-banner>` via CDN:
8+
9+
```html
10+
<script src="https://jspm.dev/@patternfly/elements/pf-banner/pf-banner.js"></script>
11+
```
12+
Or, if you are using [NPM](https://npm.im/), install it
13+
14+
```bash
15+
npm install @patternfly/elements
16+
```
17+
Then once installed, import it to your application:
18+
19+
```js
20+
import '@patternfly/elements/pf-banner/pf-banner.js';
21+
```
22+
23+
24+
## Usage
25+
26+
```html
27+
<pf-banner>
28+
Default banner
29+
</pf-banner>
30+
```
31+
32+
33+
## Attributes
34+
35+
### Variant
36+
Banners have five different variants. The available variants are `default`, `info`, `success`, `danger`, and `warning`.
37+
38+
```html
39+
<pf-banner variant="info">
40+
Info banner
41+
</pf-banner>
42+
```
43+
44+
### Icon
45+
Banners can have an icon attribute for a shorthand to Patternfly Icons. To see available icons, visit the [Patternfly Elements Icons documentation](https://patternflyelements.com/components/icons/).
46+
47+
```html
48+
<pf-banner variant="info" icon="info">
49+
Info banner
50+
</pf-banner>
51+
```
52+
53+
### Sticky
54+
Banners can be sticky, so they stick to the top of the parent.
55+
56+
```html
57+
<pf-banner sticky>
58+
Sticky banner
59+
</pf-banner>
60+
```

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<pf-banner>Default Banner</pf-banner>
2+
<pf-banner variant="info">Blue Banner</pf-banner>
3+
<pf-banner variant="danger">Red Banner</pf-banner>
4+
<pf-banner variant="success">Green Banner</pf-banner>
5+
<pf-banner variant="warning">Gold Banner</pf-banner>
6+
7+
<script type="module">
8+
import '@patternfly/elements/pf-banner/pf-banner.js';
9+
</script>
10+
11+
<style>
12+
pf-banner + pf-banner {
13+
margin-block-start: 1rem;
14+
}
15+
</style>

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<pf-banner>
2+
<svg slot="icon"
3+
viewBox="0 0 896 1024"
4+
aria-hidden="true"
5+
role="img">
6+
<path d="M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z"></path>
7+
</svg>
8+
Default Banner
9+
</pf-banner>
10+
11+
<pf-banner variant="info">
12+
<pf-icon icon="info-circle" slot="icon"></pf-icon>
13+
Info Banner
14+
</pf-banner>
15+
16+
<pf-banner variant="danger">
17+
<pf-icon icon="exclamation-circle" slot="icon"></pf-icon>
18+
Danger Banner
19+
</pf-banner>
20+
21+
<pf-banner variant="success">
22+
<pf-icon icon="check-circle" slot="icon"></pf-icon>
23+
Success Banner
24+
</pf-banner>
25+
26+
<pf-banner variant="warning">
27+
<pf-icon icon="exclamation-triangle" slot="icon"></pf-icon>
28+
Warning Banner
29+
</pf-banner>
30+
31+
<script type="module">
32+
import '@patternfly/elements/pf-banner/pf-banner.js';
33+
</script>
34+
35+
<style>
36+
pf-banner + pf-banner {
37+
margin-block-start: 1rem;
38+
}
39+
</style>

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<pf-banner sticky>I stick to the top</pf-banner>
2+
<header>
3+
<h2 class="entry-title page--title">The Open Source Definition</h2>
4+
<a href="https://opensource.org/osd/">https://opensource.org/osd/</a>
5+
</header>
6+
7+
<h3>Introduction</h3>
8+
<p>Open source doesn’t just mean access to the source code. The distribution terms of open-source software must comply with the following criteria:</p>
9+
10+
<h4>1. Free Redistribution</h4>
11+
<p>The license shall not restrict any party from selling or giving away the software as a component of an aggregate software distribution containing programs from several different sources. The license shall not require a royalty or other fee for such sale.</p>
12+
13+
14+
<h4>2. Source Code</h4>
15+
<p>The program must include source code, and must allow distribution in source code as well as compiled form. Where some form of a product is not distributed with source code, there must be a well-publicized means of obtaining the source code for no more than a reasonable reproduction cost, preferably downloading via the Internet without charge. The source code must be the preferred form in which a programmer would modify the program. Deliberately obfuscated source code is not allowed. Intermediate forms such as the output of a preprocessor or translator are not allowed.</p>
16+
17+
18+
<h4>3. Derived Works</h4>
19+
<p>The license must allow modifications and derived works, and must allow them to be distributed under the same terms as the license of the original software.</p>
20+
21+
22+
<h4>4. Integrity of The Author’s Source Code</h4>
23+
<p>The license may restrict source-code from being distributed in modified form <em>only</em> if the license allows the distribution of “patch files” with the source code for the purpose of modifying the program at build time. The license must explicitly permit distribution of software built from modified source code. The license may require derived works to carry a different name or version number from the original software.</p>
24+
25+
26+
<h4>5. No Discrimination Against Persons or Groups</h4>
27+
<p>The license must not discriminate against any person or group of persons.</p>
28+
29+
30+
<h4>6. No Discrimination Against Fields of Endeavor</h4>
31+
<p>The license must not restrict anyone from making use of the program in a specific field of endeavor. For example, it may not restrict the program from being used in a business, or from being used for genetic research.</p>
32+
33+
34+
<h4>7. Distribution of License</h4>
35+
<p>The rights attached to the program must apply to all to whom the program is redistributed without the need for execution of an additional license by those parties.</p>
36+
37+
38+
<h4>8. License Must Not Be Specific to a Product</h4>
39+
<p>The rights attached to the program must not depend on the program’s being part of a particular software distribution. If the program is extracted from that distribution and used or distributed within the terms of the program’s license, all parties to whom the program is redistributed should have the same rights as those that are granted in conjunction with the original software distribution.</p>
40+
41+
42+
<h4>9. License Must Not Restrict Other Software</h4>
43+
<p>The license must not place restrictions on other software that is distributed along with the licensed software. For example, the license must not insist that all other programs distributed on the same medium must be open-source software.</p>
44+
45+
46+
<h4>10. License Must Be Technology-Neutral</h4>
47+
<p>No provision of the license may be predicated on any individual technology or style of interface.</p>
48+
49+
<hr>
50+
<p>The Open Source Definition was originally derived from the <a href="https://www.debian.org/social_contract#guidelines">Debian Free Software Guidelines</a> (DFSG).</p>
51+
<p><em>Version 1.9, last modified, 2007-03-22</em></p>
52+
<p><em>Here’s the historical “<a href="https://opensource.org/definition-annotated/">Annotated OSD</a>” from the early 2000’s. </em>
53+
<script type="module">
54+
import '@patternfly/elements/pf-banner/pf-banner.js';
55+
</script>

‎elements/pf-banner/docs/pf-banner.md‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
{% renderOverview %}
2+
<pf-banner>Default</pf-banner>
3+
{% endrenderOverview %}
4+
5+
{% band header="Usage" %}
6+
{% htmlexample %}
7+
<pf-banner>Default</pf-banner>
8+
{% endhtmlexample %}
9+
10+
11+
### With a variant
12+
Available variants are: default, info, danger, success, warning
13+
14+
{% htmlexample %}
15+
<pf-banner variant="default">Default</pf-banner>
16+
<pf-banner variant="info">Info</pf-banner>
17+
<pf-banner variant="danger">Danger</pf-banner>
18+
<pf-banner variant="success">Success</pf-banner>
19+
<pf-banner variant="warning">Warning</pf-banner>
20+
{% endhtmlexample %}
21+
22+
23+
### Sticky
24+
Banners can be set to stick to the top of their container by adding the `sticky` attribute.
25+
26+
{% htmlexample %}
27+
<pf-banner sticky>Sticky</pf-banner>
28+
{% endhtmlexample %}
29+
30+
31+
### With an icon
32+
You can add a icon by using the shorthand icon attribute
33+
34+
{% htmlexample %}
35+
<pf-banner icon="info">Info</pf-banner>
36+
{% endhtmlexample %}
37+
38+
Or you can use the icon slot and slot in a `svg` or `pf-icon` element
39+
40+
{% htmlexample %}
41+
<pf-banner>
42+
<pf-icon slot="icon" icon="info-circle"></pf-icon>
43+
Info
44+
</pf-banner>
45+
{% endhtmlexample %}
46+
47+
{% endband %}
48+
49+
{% renderSlots %}{% endrenderSlots %}
50+
51+
{% renderAttributes %}{% endrenderAttributes %}
52+
53+
{% renderMethods %}{% endrenderMethods %}
54+
55+
{% renderEvents %}{% endrenderEvents %}
56+
57+
{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
58+
59+
{% renderCssParts %}{% endrenderCssParts %}

‎elements/pf-banner/docs/screenshot.png‎

11.2 KB
Loading

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

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
:host {
2+
display: block;
3+
--pf-c-banner--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
4+
--pf-c-banner--PaddingRight: var(--pf-global--spacer--md, 1rem);
5+
--pf-c-banner--md--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);
6+
--pf-c-banner--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
7+
--pf-c-banner--PaddingLeft: var(--pf-global--spacer--md, 1rem);
8+
--pf-c-banner--md--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
9+
--pf-c-banner--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
10+
--pf-c-banner--Color: var(--pf-global--Color--100, #151515);
11+
--pf-c-banner--BackgroundColor: var(--pf-global--BackgroundColor--dark-400, #4f5255);
12+
--pf-c-banner--link--Color: var(--pf-c-banner--Color);
13+
--pf-c-banner--link--TextDecoration: underline;
14+
--pf-c-banner--link--hover--Color: var(--pf-c-banner--Color);
15+
--pf-c-banner--link--hover--FontWeight: var(--pf-global--FontWeight--semi-bold, 700);
16+
--pf-c-banner--link--disabled--Color: var(--pf-c-banner--Color);
17+
--pf-c-banner--link--disabled--TextDecoration: none;
18+
--pf-c-banner--m-info--BackgroundColor: var(--pf-global--palette--blue-200, #73bcf7);
19+
--pf-c-banner--m-danger--BackgroundColor: var(--pf-global--danger-color--100, #c9190b);
20+
--pf-c-banner--m-success--BackgroundColor: var(--pf-global--success-color--100, #3e8635);
21+
--pf-c-banner--m-warning--BackgroundColor: var(--pf-global--warning-color--100, #f0ab00);
22+
--pf-c-banner--m-sticky--ZIndex: var(--pf-global--ZIndex--md, 300);
23+
--pf-c-banner--m-sticky--BoxShadow: var(--pf-global--BoxShadow--md-bottom);
24+
}
25+
26+
#container,
27+
#container.default {
28+
color: var(--pf-global--Color--100, var(--pf-global--Color--light-100, #ffffff));
29+
overflow: hidden;
30+
text-overflow: ellipsis;
31+
padding:
32+
var(--pf-c-banner--PaddingTop, var(--pf-global--spacer--xs, 0.25rem))
33+
var(--pf-c-banner--PaddingRight, var(--pf-global--spacer--md, 1rem))
34+
var(--pf-c-banner--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem))
35+
var(--pf-c-banner--PaddingLeft, var(--pf-global--spacer--md, 1rem));
36+
font-size: var(--pf-c-banner--FontSize, var(--pf-global--FontSize--sm, 0.875rem));
37+
color: var(--pf-global--Color--100, var(--pf-global--Color--light-100, #ffffff));
38+
white-space: nowrap;
39+
background-color: var(--pf-c-banner--BackgroundColor, var(--pf-global--BackgroundColor--dark-400, #4f5255));
40+
41+
--pf-icon--size: 1em;
42+
}
43+
44+
#container.info {
45+
color: var(--pf-global--Color--100, var(--pf-global--Color--dark-100, #151515));
46+
--pf-c-banner--BackgroundColor: var(--pf-c-banner--m-info--BackgroundColor, var(--pf-global--palette--blue-200, #73bcf7));
47+
}
48+
49+
#container.danger {
50+
--pf-c-banner--BackgroundColor: var(--pf-c-banner--m-danger--BackgroundColor, var(--pf-global--danger-color--100, #c9190b));
51+
}
52+
53+
#container.success {
54+
--pf-c-banner--BackgroundColor: var(--pf-c-banner--m-success--BackgroundColor, var(--pf-global--success-color--100, #3e8635));
55+
}
56+
57+
#container.warning {
58+
color: var(--pf-global--Color--100, var(--pf-global--Color--dark-100, #151515));
59+
--pf-c-banner--BackgroundColor: var(--pf-c-banner--m-warning--BackgroundColor, var(--pf-global--warning-color--100, #f0ab00));
60+
}
61+
62+
#container.hasIcon {
63+
display: var(--pf-l-flex--Display, flex);
64+
flex-wrap: var(--pf-l-flex--FlexWrap, wrap);
65+
align-items: var(--pf-l-flex--AlignItems, baseline);
66+
gap: var(--pf-l-flex--spacer, var(--pf-l-flex--spacer--sm, var(--pf-global--spacer--sm, 0.5rem)));
67+
}
68+
69+
:host([sticky]) {
70+
position: sticky;
71+
top: 0;
72+
z-index: var(--pf-c-banner--m-sticky--ZIndex, var(--pf-global--ZIndex--md, 300));
73+
box-shadow:
74+
var(--pf-c-banner--m-sticky--BoxShadow,
75+
var(--pf-global--BoxShadow--md-bottom, 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)));
76+
}
77+
78+
pf-icon,
79+
::slotted(pf-icon),
80+
::slotted(svg) {
81+
position: relative;
82+
inset-block-start: 0.125em;
83+
}
84+
85+
::slotted(svg) {
86+
height: 1em;
87+
width: 1em;
88+
fill: currentcolor;
89+
}
90+
91+
@media (min-width: 768px) {
92+
#container {
93+
--pf-c-banner--PaddingRight: var(--pf-c-banner--md--PaddingRight, var(--pf-global--spacer--lg, 1.5rem));
94+
--pf-c-banner--PaddingLeft: var(--pf-c-banner--md--PaddingLeft, var(--pf-global--spacer--lg, 1.5rem));
95+
}
96+
}

0 commit comments

Comments
 (0)