diff --git a/.changeset/smooth-webs-travel.md b/.changeset/smooth-webs-travel.md new file mode 100644 index 0000000000..0e98815a32 --- /dev/null +++ b/.changeset/smooth-webs-travel.md @@ -0,0 +1,26 @@ +--- +"@patternfly/elements": major +--- + +✨ Added `` replacing ``. Banner now follows +PatternFly v6 design specs. + +```html + + Info banner content + +``` + +** Breaking Changes from v5 ** + +- Renamed tag from `` to `` +- `variant` attribute split into separate color and status attributes +- CSS custom properties renamed from `--pf-v5-c-banner--*` to `--pf-v6-c-banner--*` +- ✨ Added `color` attribute for decorative colors (red, orangered, orange, yellow, +green, teal, blue, purple) +- ✨ Added `status `attribute for semantic statuses (success, warning, danger, info, +custom) +- ✨ Added `screen-reader-text` attribute for visually-hidden accessible text +- Removed `variant` attribute (use color or status instead) +- Removed `icon` attribute and icon slot (compose icons in default slot) +- Removed container and icon CSS parts diff --git a/.gitignore b/.gitignore index db944ad73f..278d51f110 100644 --- a/.gitignore +++ b/.gitignore @@ -105,6 +105,7 @@ core/pfe-core/demo/* # AI .claude/settings.local.json +.claude/worktrees # Temp files *~ diff --git a/elements/pf-v5-banner/README.md b/elements/pf-v5-banner/README.md deleted file mode 100644 index 75d8362cd5..0000000000 --- a/elements/pf-v5-banner/README.md +++ /dev/null @@ -1,60 +0,0 @@ -# Patternfly Elements Banner -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. - -Read more about Button in the [PatternFly Elements Banner documentation](https://patternflyelements.org/components/banner) - -## Installation -Load `` via CDN: - -```html - -``` -Or, if you are using [NPM](https://npm.im/), install it - -```bash -npm install @patternfly/elements -``` -Then once installed, import it to your application: - -```js -import '@patternfly/elements/pf-v5-banner/pf-v5-banner.js'; -``` - - -## Usage - -```html - - Default banner - -``` - - -## Attributes - -### Variant -Banners have five different variants. The available variants are `default`, `info`, `success`, `danger`, and `warning`. - -```html - - Info banner - -``` - -### Icon -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/). - -```html - - Info banner - -``` - -### Sticky -Banners can be sticky, so they stick to the top of the parent. - -```html - - Sticky banner - -``` diff --git a/elements/pf-v5-banner/demo/index.html b/elements/pf-v5-banner/demo/index.html deleted file mode 100644 index 0cbdbf711e..0000000000 --- a/elements/pf-v5-banner/demo/index.html +++ /dev/null @@ -1,15 +0,0 @@ -Default Banner -Blue Banner -Red Banner -Green Banner -Gold Banner - - - - diff --git a/elements/pf-v5-banner/demo/status-banners.html b/elements/pf-v5-banner/demo/status-banners.html deleted file mode 100644 index 1c2c3d68e4..0000000000 --- a/elements/pf-v5-banner/demo/status-banners.html +++ /dev/null @@ -1,40 +0,0 @@ - - - Default Banner - - - - - Info Banner - - - - - Danger Banner - - - - - Success Banner - - - - - Warning Banner - - - - - diff --git a/elements/pf-v5-banner/demo/sticky.html b/elements/pf-v5-banner/demo/sticky.html deleted file mode 100644 index 3f00ceaf4c..0000000000 --- a/elements/pf-v5-banner/demo/sticky.html +++ /dev/null @@ -1,55 +0,0 @@ -I stick to the top -
-

The Open Source Definition

- https://opensource.org/osd/ -
- -

Introduction

-

Open source doesn’t just mean access to the source code. The distribution terms of open-source software must comply with the following criteria:

- -

1. Free Redistribution

-

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.

- - -

2. Source Code

-

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.

- - -

3. Derived Works

-

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.

- - -

4. Integrity of The Author’s Source Code

-

The license may restrict source-code from being distributed in modified form only 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.

- - -

5. No Discrimination Against Persons or Groups

-

The license must not discriminate against any person or group of persons.

- - -

6. No Discrimination Against Fields of Endeavor

-

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.

- - -

7. Distribution of License

-

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.

- - -

8. License Must Not Be Specific to a Product

-

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.

- - -

9. License Must Not Restrict Other Software

-

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.

- - -

10. License Must Be Technology-Neutral

-

No provision of the license may be predicated on any individual technology or style of interface.

- -
-

The Open Source Definition was originally derived from the Debian Free Software Guidelines (DFSG).

-

Version 1.9, last modified, 2007-03-22

-

Here’s the historical “Annotated OSD” from the early 2000’s. - diff --git a/elements/pf-v5-banner/docs/pf-v5-banner.md b/elements/pf-v5-banner/docs/pf-v5-banner.md deleted file mode 100644 index c2c4924ee3..0000000000 --- a/elements/pf-v5-banner/docs/pf-v5-banner.md +++ /dev/null @@ -1,59 +0,0 @@ -{% renderOverview %} - Default -{% endrenderOverview %} - -{% band header="Usage" %} - {% htmlexample %} - Default - {% endhtmlexample %} - - - ### With a variant - Available variants are: default, info, danger, success, warning - - {% htmlexample %} - Default - Info - Danger - Success - Warning - {% endhtmlexample %} - - - ### Sticky - Banners can be set to stick to the top of their container by adding the `sticky` attribute. - - {% htmlexample %} - Sticky - {% endhtmlexample %} - - - ### With an icon - You can add a icon by using the shorthand icon attribute - - {% htmlexample %} - Info - {% endhtmlexample %} - - Or you can use the icon slot and slot in a `svg` or `pf-v5-icon` element - - {% htmlexample %} - - - Info - - {% endhtmlexample %} - -{% endband %} - -{% renderSlots %}{% endrenderSlots %} - -{% renderAttributes %}{% endrenderAttributes %} - -{% renderMethods %}{% endrenderMethods %} - -{% renderEvents %}{% endrenderEvents %} - -{% renderCssCustomProperties %}{% endrenderCssCustomProperties %} - -{% renderCssParts %}{% endrenderCssParts %} diff --git a/elements/pf-v5-banner/docs/screenshot.png b/elements/pf-v5-banner/docs/screenshot.png deleted file mode 100644 index db0887a28a..0000000000 Binary files a/elements/pf-v5-banner/docs/screenshot.png and /dev/null differ diff --git a/elements/pf-v5-banner/pf-v5-banner.css b/elements/pf-v5-banner/pf-v5-banner.css deleted file mode 100644 index 6b67a56f9a..0000000000 --- a/elements/pf-v5-banner/pf-v5-banner.css +++ /dev/null @@ -1,117 +0,0 @@ -:host { - display: block; - /** Top padding for banner */ - --pf-v5-c-banner--PaddingTop: var(--pf-global--spacer--xs, 0.25rem); - /** Right padding for banner */ - --pf-v5-c-banner--PaddingRight: var(--pf-global--spacer--md, 1rem); - /** Right padding for banner on medium screens */ - --pf-v5-c-banner--md--PaddingRight: var(--pf-global--spacer--lg, 1.5rem); - /** Bottom padding for banner */ - --pf-v5-c-banner--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem); - /** Left padding for banner */ - --pf-v5-c-banner--PaddingLeft: var(--pf-global--spacer--md, 1rem); - /** Left padding for banner on medium screens */ - --pf-v5-c-banner--md--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem); - /** Font size for banner */ - --pf-v5-c-banner--FontSize: var(--pf-global--FontSize--sm, 0.875rem); - /** Text color for banner */ - --pf-v5-c-banner--Color: var(--pf-global--Color--100, #151515); - /** Background color for banner */ - --pf-v5-c-banner--BackgroundColor: var(--pf-global--BackgroundColor--dark-400, #4f5255); - /** Link color for banner (references banner color) */ - --pf-v5-c-banner--link--Color: var(--pf-v5-c-banner--Color); - /** Link text decoration for banner */ - --pf-v5-c-banner--link--TextDecoration: underline; - /** Link hover color for banner (references banner color) */ - --pf-v5-c-banner--link--hover--Color: var(--pf-v5-c-banner--Color); - /** Link hover font weight for banner */ - --pf-v5-c-banner--link--hover--FontWeight: var(--pf-global--FontWeight--semi-bold, 700); - /** Disabled link color for banner (references banner color) */ - --pf-v5-c-banner--link--disabled--Color: var(--pf-v5-c-banner--Color); - /** Disabled link text decoration for banner */ - --pf-v5-c-banner--link--disabled--TextDecoration: none; - /** Background color for info banner */ - --pf-v5-c-banner--m-info--BackgroundColor: var(--pf-global--palette--blue-200, #73bcf7); - /** Background color for danger banner */ - --pf-v5-c-banner--m-danger--BackgroundColor: var(--pf-global--danger-color--100, #c9190b); - /** Background color for success banner */ - --pf-v5-c-banner--m-success--BackgroundColor: var(--pf-global--success-color--100, #3e8635); - /** Background color for warning banner */ - --pf-v5-c-banner--m-warning--BackgroundColor: var(--pf-global--warning-color--100, #f0ab00); - /** Z-index for sticky banner */ - --pf-v5-c-banner--m-sticky--ZIndex: var(--pf-global--ZIndex--md, 300); - /** Box shadow for sticky banner */ - --pf-v5-c-banner--m-sticky--BoxShadow: var(--pf-global--BoxShadow--md-bottom); -} - -#container, -#container.default { - color: var(--pf-global--Color--100, var(--pf-global--Color--light-100, #ffffff)); - overflow: hidden; - text-overflow: ellipsis; - padding: - var(--pf-v5-c-banner--PaddingTop, var(--pf-global--spacer--xs, 0.25rem)) - var(--pf-v5-c-banner--PaddingRight, var(--pf-global--spacer--md, 1rem)) - var(--pf-v5-c-banner--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem)) - var(--pf-v5-c-banner--PaddingLeft, var(--pf-global--spacer--md, 1rem)); - font-size: var(--pf-v5-c-banner--FontSize, var(--pf-global--FontSize--sm, 0.875rem)); - color: var(--pf-global--Color--100, var(--pf-global--Color--light-100, #ffffff)); - white-space: nowrap; - background-color: var(--pf-v5-c-banner--BackgroundColor, var(--pf-global--BackgroundColor--dark-400, #4f5255)); - - --pf-v5-icon--size: 1em; -} - -#container.info { - color: var(--pf-global--Color--100, var(--pf-global--Color--dark-100, #151515)); - --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-info--BackgroundColor, var(--pf-global--palette--blue-200, #73bcf7)); -} - -#container.danger { - --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-danger--BackgroundColor, var(--pf-global--danger-color--100, #c9190b)); -} - -#container.success { - --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-success--BackgroundColor, var(--pf-global--success-color--100, #3e8635)); -} - -#container.warning { - color: var(--pf-global--Color--100, var(--pf-global--Color--dark-100, #151515)); - --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-warning--BackgroundColor, var(--pf-global--warning-color--100, #f0ab00)); -} - -#container.hasIcon { - display: var(--pf-v5-l-flex--Display, flex); - flex-wrap: var(--pf-v5-l-flex--FlexWrap, wrap); - align-items: var(--pf-v5-l-flex--AlignItems, baseline); - gap: var(--pf-v5-l-flex--spacer, var(--pf-v5-l-flex--spacer--sm, var(--pf-global--spacer--sm, 0.5rem))); -} - -:host([sticky]) { - position: sticky; - top: 0; - z-index: var(--pf-v5-c-banner--m-sticky--ZIndex, var(--pf-global--ZIndex--md, 300)); - box-shadow: - var(--pf-v5-c-banner--m-sticky--BoxShadow, - var(--pf-global--BoxShadow--md-bottom, 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18))); -} - -pf-v5-icon, -::slotted(pf-v5-icon), -::slotted(svg) { - position: relative; - inset-block-start: 0.125em; -} - -::slotted(svg) { - height: 1em; - width: 1em; - fill: currentcolor; -} - -@media (min-width: 768px) { - #container { - --pf-v5-c-banner--PaddingRight: var(--pf-v5-c-banner--md--PaddingRight, var(--pf-global--spacer--lg, 1.5rem)); - --pf-v5-c-banner--PaddingLeft: var(--pf-v5-c-banner--md--PaddingLeft, var(--pf-global--spacer--lg, 1.5rem)); - } -} diff --git a/elements/pf-v5-banner/pf-v5-banner.ts b/elements/pf-v5-banner/pf-v5-banner.ts deleted file mode 100644 index 5f4f7b2d06..0000000000 --- a/elements/pf-v5-banner/pf-v5-banner.ts +++ /dev/null @@ -1,69 +0,0 @@ -import { LitElement, html, type PropertyValues, type TemplateResult } from 'lit'; - -import { customElement } from 'lit/decorators/custom-element.js'; -import { property } from 'lit/decorators/property.js'; -import { classMap } from 'lit/directives/class-map.js'; - -import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js'; - -import styles from './pf-v5-banner.css'; - -export type BannerVariant = ( - | 'default' - | 'info' - | 'warning' - | 'danger' - | 'success' -); - -/** - * 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. - * @summary Allows users to display a stylized banner. - * @alias Banner - */ -@customElement('pf-v5-banner') -export class PfV5Banner extends LitElement { - static readonly styles: CSSStyleSheet[] = [styles]; - - /** Changes the visual appearance of the banner. */ - @property({ reflect: true }) variant?: BannerVariant; - - /** Shorthand for the `icon` slot, the value is icon name */ - @property() icon?: string; - - /** Shorthand for the `icon` slot, the value is icon name */ - @property({ type: Boolean }) sticky = false; - - /** Represents the state of the anonymous and icon slots */ - #slots = new SlotController(this, null, 'icon'); - - override willUpdate(changed: PropertyValues): void { - if (changed.has('icon') && this.icon) { - import('@patternfly/elements/pf-v5-icon/pf-v5-icon.js'); - } - } - - override render(): TemplateResult<1> { - const { variant, icon } = this; - const hasIcon = !!icon || this.#slots.hasSlotted('icon'); - return html` - -

- - ${!this.icon ? '' : html` - `} - - - -
- `; - } -} - -declare global { - interface HTMLElementTagNameMap { - 'pf-v5-banner': PfV5Banner; - } -} diff --git a/elements/pf-v5-banner/test/pf-banner.e2e.ts b/elements/pf-v5-banner/test/pf-banner.e2e.ts deleted file mode 100644 index c833252a2c..0000000000 --- a/elements/pf-v5-banner/test/pf-banner.e2e.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { test } from '@playwright/test'; -import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js'; -import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js'; - -const tagName = 'pf-v5-banner'; - -test.describe(tagName, () => { - test('snapshot', async ({ page }) => { - const componentPage = new PfeDemoPage(page, tagName); - await componentPage.navigate(); - await componentPage.snapshot(); - }); - - test('ssr', async ({ browser }) => { - const fixture = new SSRPage({ - tagName, - browser, - demoDir: new URL('../demo/', import.meta.url), - importSpecifiers: [ - `@patternfly/elements/${tagName}/${tagName}.js`, - ], - }); - await fixture.snapshots(); - }); -}); diff --git a/elements/pf-v5-banner/test/pf-banner.spec.ts b/elements/pf-v5-banner/test/pf-banner.spec.ts deleted file mode 100644 index 5a6bcd4d1e..0000000000 --- a/elements/pf-v5-banner/test/pf-banner.spec.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { expect, html } from '@open-wc/testing'; -import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js'; -import { getColor, hexToRgb } from '@patternfly/pfe-tools/test/hex-to-rgb.js'; -import { PfV5Banner } from '@patternfly/elements/pf-v5-banner/pf-v5-banner.js'; - -describe('', function() { - describe('simply instantiating', function() { - it('imperatively instantiates', function() { - expect(document.createElement('pf-v5-banner')).to.be.an.instanceof(PfV5Banner); - }); - - it('should upgrade', async function() { - const el = await createFixture(html` - Default - `); - const klass = customElements.get('pf-v5-banner'); - expect(el) - .to.be.an.instanceOf(klass) - .and - .to.be.an.instanceOf(PfV5Banner); - }); - - describe('without variant attribute', function() { - let element: PfV5Banner; - beforeEach(async function() { - element = await createFixture(html` - Default - `); - await element.updateComplete; - }); - // TODO: remove assertions on shadow roots - it('should display default variant', async function() { - const container = element.shadowRoot!.querySelector('#container')!; - expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#ffffff')); - expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#4f5255')); - }); - }); - - describe('with variant="info" attribute', function() { - let element: PfV5Banner; - beforeEach(async function() { - element = await createFixture(html` - Info - `); - await element.updateComplete; - }); - // TODO: remove assertions on shadow roots - it('should display info variant', async function() { - const container = element.shadowRoot!.querySelector('#container')!; - expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#151515')); - expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#73bcf7')); - }); - }); - - describe('with variant="danger" attribute', function() { - let element: PfV5Banner; - beforeEach(async function() { - element = await createFixture(html` - Info - `); - await element.updateComplete; - }); - // TODO: remove assertions on shadow roots - it('should display danger variant', async function() { - const container = element.shadowRoot!.querySelector('#container')!; - expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#ffffff')); - expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#c9190b')); - }); - }); - - describe('with valid icon attribute', function() { - let element: PfV5Banner; - beforeEach(async function() { - element = await createFixture(html` - Info - `); - await element.updateComplete; - }); - // TODO: remove assertions on shadow roots - it('should render an icon', async function() { - const icon = element.shadowRoot!.querySelector('pf-v5-icon'); - expect(icon).to.exist; - }); - }); - }); -}); diff --git a/elements/pf-v6-banner/demo/basic.html b/elements/pf-v6-banner/demo/basic.html new file mode 100644 index 0000000000..91a4c58891 --- /dev/null +++ b/elements/pf-v6-banner/demo/basic.html @@ -0,0 +1,23 @@ +--- +name: Basic +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. +--- +Default banner +Red banner +Orangered banner +Orange banner +Yellow banner +Green banner +Teal banner +Blue banner +Purple banner + + + + diff --git a/elements/pf-v6-banner/demo/index.html b/elements/pf-v6-banner/demo/index.html new file mode 100644 index 0000000000..462905d585 --- /dev/null +++ b/elements/pf-v6-banner/demo/index.html @@ -0,0 +1,9 @@ +--- +name: Default +description: A default banner communicates a short snippet of information. +--- +Default banner + + diff --git a/elements/pf-v6-banner/demo/status.html b/elements/pf-v6-banner/demo/status.html new file mode 100644 index 0000000000..21686c2c72 --- /dev/null +++ b/elements/pf-v6-banner/demo/status.html @@ -0,0 +1,39 @@ +--- +name: Status +description: When a banner conveys status, use the status attribute. Include an icon and screen-reader-text for accessibility. +--- + + + Success banner + + + + + Warning banner + + + + + Danger banner + + + + + Info banner + + + + + Custom banner + + + + + diff --git a/elements/pf-v6-banner/demo/sticky.html b/elements/pf-v6-banner/demo/sticky.html new file mode 100644 index 0000000000..3af89c14fa --- /dev/null +++ b/elements/pf-v6-banner/demo/sticky.html @@ -0,0 +1,50 @@ +--- +name: Sticky +description: A sticky banner stays fixed at the top of its container as content scrolls. +--- +Sticky banner +
+

The Open Source Definition

+

https://opensource.org/osd/

+ +

Introduction

+

Open source doesn't just mean access to the source code. The distribution + terms of open-source software must comply with the following criteria:

+ +

1. Free Redistribution

+

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.

+ +

2. Source Code

+

The program must include source code, and must allow distribution in + source code as well as compiled form.

+ +

3. Derived Works

+

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.

+ +

4. Integrity of The Author's Source Code

+

The license may restrict source-code from being distributed in modified + form only if the license allows the distribution of "patch files" with the + source code for the purpose of modifying the program at build time.

+ +

5. No Discrimination Against Persons or Groups

+

The license must not discriminate against any person or group of + persons.

+ +

6. No Discrimination Against Fields of Endeavor

+

The license must not restrict anyone from making use of the program in a + specific field of endeavor.

+ +

7. Distribution of License

+

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.

+
+ + diff --git a/elements/pf-v6-banner/pf-v6-banner.css b/elements/pf-v6-banner/pf-v6-banner.css new file mode 100644 index 0000000000..cde10de3b1 --- /dev/null +++ b/elements/pf-v6-banner/pf-v6-banner.css @@ -0,0 +1,208 @@ +:host { + display: block; + box-sizing: border-box; +} + +:host([hidden]) { + display: none !important; +} + +:host([sticky]) { + position: sticky; + inset-block-start: 0; + z-index: + /** Overrides the z-index when sticky */ + var(--pf-v6-c-banner--m-sticky--ZIndex, + var(--pf-t--global--z-index--md, 300)); + box-shadow: + /** Overrides the box shadow when sticky */ + var(--pf-v6-c-banner--m-sticky--BoxShadow, + var(--pf-t--global--box-shadow--md)); +} + +#container { + --_bg: + /** Overrides the banner background color */ + var(--pf-v6-c-banner--BackgroundColor, + var(--pf-t--global--color--nonstatus--gray--default, + light-dark(var(--pf-t--color--gray--20, #e0e0e0), var(--pf-t--color--gray--60, #4d4d4d)))); + --_color: + /** Overrides the banner text color */ + var(--pf-v6-c-banner--Color, + var(--pf-t--global--text--color--nonstatus--on-gray--default, + light-dark(var(--pf-t--color--gray--100, #151515), var(--pf-t--color--white, #ffffff)))); + --_padding-block: + /** Overrides the block padding */ + var(--pf-v6-c-banner--PaddingBlockStart, + var(--pf-t--global--spacer--xs, 0.25rem)); + --_padding-inline: + /** Overrides the inline padding */ + var(--pf-v6-c-banner--PaddingInlineStart, + var(--pf-t--global--spacer--md, 1rem)); + --_font-size: + /** Overrides the font size */ + var(--pf-v6-c-banner--FontSize, + var(--pf-t--global--font--size--body--default, 0.875rem)); + --_border-color: + /** Overrides the block border color, visible in high-contrast mode */ + var(--pf-v6-c-banner--BorderColor, + var(--pf-t--global--border--color--high-contrast, transparent)); + --_border-width: + /** Overrides the block border width, visible in high-contrast mode */ + var(--pf-v6-c-banner--BorderWidth, + var(--pf-t--global--border--width--high-contrast--regular, 0)); + + flex-shrink: 0; + padding-block: var(--_padding-block); + padding-inline: var(--_padding-inline); + font-size: var(--_font-size); + color: var(--_color); + white-space: nowrap; + background-color: var(--_bg); + border-block: var(--_border-width) solid var(--_border-color); + + @media (min-width: 768px) { + --_padding-inline: + /** Overrides the inline padding at the medium breakpoint */ + var(--pf-v6-c-banner--md--PaddingInlineStart, + var(--pf-t--global--spacer--lg, 1.5rem)); + } + + /* Non-status color modifiers (before status so status takes precedence) */ + + &.red { + --_bg: var(--pf-v6-c-banner--m-red--BackgroundColor, + var(--pf-t--global--color--nonstatus--red--default, + light-dark(var(--pf-t--color--red--20, #fbc5c5), var(--pf-t--color--red--30, #f9a8a8)))); + --_color: var(--pf-v6-c-banner--m-red--Color, + var(--pf-t--global--text--color--nonstatus--on-red--default, + var(--pf-t--color--gray--100, #151515))); + } + + &.orangered { + --_bg: var(--pf-v6-c-banner--m-orangered--BackgroundColor, + var(--pf-t--global--color--nonstatus--orangered--default, + light-dark(var(--pf-t--color--red-orange--20, #fbbea8), var(--pf-t--color--red-orange--30, #f89b78)))); + --_color: var(--pf-v6-c-banner--m-orangered--Color, + var(--pf-t--global--text--color--nonstatus--on-orangered--default, + var(--pf-t--color--gray--100, #151515))); + } + + &.orange { + --_bg: var(--pf-v6-c-banner--m-orange--BackgroundColor, + var(--pf-t--global--color--nonstatus--orange--default, + light-dark(var(--pf-t--color--orange--20, #fccb8f), var(--pf-t--color--orange--30, #f8ae54)))); + --_color: var(--pf-v6-c-banner--m-orange--Color, + var(--pf-t--global--text--color--nonstatus--on-orange--default, + var(--pf-t--color--gray--100, #151515))); + } + + &.yellow { + --_bg: var(--pf-v6-c-banner--m-yellow--BackgroundColor, + var(--pf-t--global--color--nonstatus--yellow--default, + light-dark(var(--pf-t--color--yellow--20, #ffe072), var(--pf-t--color--yellow--30, #ffcc17)))); + --_color: var(--pf-v6-c-banner--m-yellow--Color, + var(--pf-t--global--text--color--nonstatus--on-yellow--default, + var(--pf-t--color--gray--100, #151515))); + } + + &.green { + --_bg: var(--pf-v6-c-banner--m-green--BackgroundColor, + var(--pf-t--global--color--nonstatus--green--default, + light-dark(var(--pf-t--color--green--20, #d1f1bb), var(--pf-t--color--green--30, #afdc8f)))); + --_color: var(--pf-v6-c-banner--m-green--Color, + var(--pf-t--global--text--color--nonstatus--on-green--default, + var(--pf-t--color--gray--100, #151515))); + } + + &.teal { + --_bg: var(--pf-v6-c-banner--m-teal--BackgroundColor, + var(--pf-t--global--color--nonstatus--teal--default, + light-dark(var(--pf-t--color--teal--20, #b9e5e5), var(--pf-t--color--teal--30, #9ad8d8)))); + --_color: var(--pf-v6-c-banner--m-teal--Color, + var(--pf-t--global--text--color--nonstatus--on-teal--default, + var(--pf-t--color--gray--100, #151515))); + } + + &.blue { + --_bg: var(--pf-v6-c-banner--m-blue--BackgroundColor, + var(--pf-t--global--color--nonstatus--blue--default, + light-dark(var(--pf-t--color--blue--20, #b9dafc), var(--pf-t--color--blue--30, #92c5f9)))); + --_color: var(--pf-v6-c-banner--m-blue--Color, + var(--pf-t--global--text--color--nonstatus--on-blue--default, + var(--pf-t--color--gray--100, #151515))); + } + + &.purple { + --_bg: var(--pf-v6-c-banner--m-purple--BackgroundColor, + var(--pf-t--global--color--nonstatus--purple--default, + light-dark(var(--pf-t--color--purple--20, #d0c5f4), var(--pf-t--color--purple--30, #b6a6e9)))); + --_color: var(--pf-v6-c-banner--m-purple--Color, + var(--pf-t--global--text--color--nonstatus--on-purple--default, + var(--pf-t--color--gray--100, #151515))); + } + + /* Status modifiers (after color so status takes precedence at equal specificity) */ + + &.danger { + --_bg: var(--pf-v6-c-banner--m-danger--BackgroundColor, + var(--pf-t--global--color--status--danger--default, + light-dark(var(--pf-t--color--red-orange--60, #b1380b), var(--pf-t--color--red-orange--50, #f0561d)))); + --_color: var(--pf-v6-c-banner--m-danger--Color, + var(--pf-t--global--text--color--status--on-danger--default, + light-dark(var(--pf-t--color--white, #ffffff), var(--pf-t--color--gray--100, #1f1f1f)))); + } + + &.success { + --_bg: var(--pf-v6-c-banner--m-success--BackgroundColor, + var(--pf-t--global--color--status--success--default, + light-dark(var(--pf-t--color--green--60, #3d7317), var(--pf-t--color--green--40, #87bb62)))); + --_color: var(--pf-v6-c-banner--m-success--Color, + var(--pf-t--global--text--color--status--on-success--default, + light-dark(var(--pf-t--color--white, #ffffff), var(--pf-t--color--gray--100, #1f1f1f)))); + } + + &.warning { + --_bg: var(--pf-v6-c-banner--m-warning--BackgroundColor, + var(--pf-t--global--color--status--warning--default, + light-dark(var(--pf-t--color--yellow--30, #ffcc17), var(--pf-t--color--yellow--30, #ffcc17)))); + --_color: var(--pf-v6-c-banner--m-warning--Color, + var(--pf-t--global--text--color--status--on-warning--default, + light-dark(var(--pf-t--color--gray--100, #151515), var(--pf-t--color--gray--100, #1f1f1f)))); + } + + &.info { + --_bg: var(--pf-v6-c-banner--m-info--BackgroundColor, + var(--pf-t--global--color--status--info--default, + light-dark(var(--pf-t--color--purple--50, #5e40be), var(--pf-t--color--purple--30, #b6a6e9)))); + --_color: var(--pf-v6-c-banner--m-info--Color, + var(--pf-t--global--text--color--status--on-info--default, + light-dark(var(--pf-t--color--white, #ffffff), var(--pf-t--color--gray--100, #1f1f1f)))); + } + + &.custom { + --_bg: var(--pf-v6-c-banner--m-custom--BackgroundColor, + var(--pf-t--global--color--status--custom--default, + light-dark(var(--pf-t--color--teal--60, #147878), var(--pf-t--color--teal--40, #63bdbd)))); + --_color: var(--pf-v6-c-banner--m-custom--Color, + var(--pf-t--global--text--color--status--on-custom--default, + light-dark(var(--pf-t--color--white, #ffffff), var(--pf-t--color--gray--100, #1f1f1f)))); + } +} + +::slotted(a) { + color: inherit; + text-decoration-line: underline; +} + +.sr-only { + position: absolute; + inline-size: 1px; + block-size: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} diff --git a/elements/pf-v6-banner/pf-v6-banner.ts b/elements/pf-v6-banner/pf-v6-banner.ts new file mode 100644 index 0000000000..ace38d1f9e --- /dev/null +++ b/elements/pf-v6-banner/pf-v6-banner.ts @@ -0,0 +1,71 @@ +import { LitElement, html, type TemplateResult } from 'lit'; + +import { classMap } from 'lit/directives/class-map.js'; +import { customElement } from 'lit/decorators/custom-element.js'; +import { property } from 'lit/decorators/property.js'; + +import style from './pf-v6-banner.css'; + +export type BannerColor = + | 'red' + | 'orangered' + | 'orange' + | 'yellow' + | 'green' + | 'teal' + | 'blue' + | 'purple'; + +export type BannerStatus = + | 'success' + | 'warning' + | 'danger' + | 'info' + | 'custom'; + +/** + * A banner provides a full-width container for communicating short, + * non-dismissible messages. Use a banner when you need to display a + * brief announcement that allows users to continue without interruption. + * + * Status banners SHOULD include an icon and `screen-reader-text` so + * screen readers can announce the status context (WCAG 1.3.1). Authors + * SHOULD AVOID using color alone to convey meaning (WCAG 1.4.1). + * + * The banner is not focusable. Slotted interactive content like links + * remains focusable via Tab. + * + * @summary Provides a full-width banner for brief, non-dismissible messages. + */ +@customElement('pf-v6-banner') +export class PfV6Banner extends LitElement { + static readonly styles: CSSStyleSheet[] = [style]; + + /** Non-status color for the banner background. Overridden by `status` if both are set. */ + @property({ reflect: true }) color?: BannerColor; + + /** Status style for the banner. Conveys semantic meaning and overrides `color`. */ + @property({ reflect: true }) status?: BannerStatus; + + /** Whether the banner sticks to the top of its container. */ + @property({ type: Boolean, reflect: true }) sticky = false; + + /** Text announced by screen readers to indicate the type of banner. */ + @property({ attribute: 'screen-reader-text' }) screenReaderText?: string; + + override render(): TemplateResult { + const { color = '', status = '', screenReaderText } = this; + return html` +
+ ${screenReaderText} + +
+ `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'pf-v6-banner': PfV6Banner; + } +}