Banner component

README.md

@@ -69,8 +69,8 @@ NOTE: To update the component status:
 | Accordion | |  [Issue](https://github.com/ni/nimble/issues/533) | :o: | :o: | :o: |
 | Anchor | [XD](https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/bfadf499-caf5-4ca0-9814-e777fbae0d46/) |  [Issue](https://github.com/ni/nimble/issues/324) | [:white_check_mark: - SB](https://ni.github.io/nimble/storybook/?path=/docs/anchor--text-anchor) | :white_check_mark: | :white_check_mark: |
 | Anchor Button | |  [Issue](https://github.com/ni/nimble/issues/324) | [:white_check_mark: - SB](https://ni.github.io/nimble/storybook/?path=/docs/anchor-button--outline-anchor-button) | :white_check_mark: | :white_check_mark: |
-| Anchor Tabs | [XD](https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/b2aa2c0c-03b7-4571-8e0d-de88baf0814b) |  [Issue](https://github.com/ni/nimble/issues/479) | [:white_check_mark: - SB](https://nimble.ni.dev/storybook/?path=/docs/anchor-tabs--tabs) | :o: | :o: |
-| Banners | [XD](https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/29c405f7-08ea-48b6-973f-546970b9dbab) |  [Issue](https://github.com/ni/nimble/issues/305) | :o: | :o: | :o: |
+| Anchor Tabs | [XD](https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/b2aa2c0c-03b7-4571-8e0d-de88baf0814b) |  [Issue](https://github.com/ni/nimble/issues/479) | [:white_check_mark: - SB](https://nimble.ni.dev/storybook/?path=/docs/anchor-tabs--anchor-tabs) | :white_check_mark: | :white_check_mark: |
+| Banner | [XD](https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/29c405f7-08ea-48b6-973f-546970b9dbab) |  [Issue](https://github.com/ni/nimble/issues/305) | [:white_check_mark: - SB](https://nimble.ni.dev/storybook/?path=/docs/banner--banner) | :o: | :o: |
 | Breadcrumb | [XD](https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/7b53bb3e-439b-4f13-9d5f-55adc7da8a2e) | | [:white_check_mark: - SB](https://ni.github.io/nimble/storybook/?path=/docs/breadcrumb--standard-breadcrumb) | :white_check_mark: | :white_check_mark: |
 | Card | |  [Issue](https://github.com/ni/nimble/issues/296) | :o: | :o: | :o: |
 | Card button | [XD](https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/d4ebeb5d-023c-4ff2-a71c-f6385fffca20) |  [Issue](https://github.com/ni/nimble/issues/643) | [:white_check_mark: - SB](https://ni.github.io/nimble/storybook/?path=/docs/card-button--card-button) | :white_check_mark: | :white_check_mark: |

change/@ni-nimble-components-9ab8666d-2f01-435f-9a9d-44ca9f141412.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Banner component",
+  "packageName": "@ni/nimble-components",
+  "email": "7282195+m-akinc@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/all-components.ts

@@ -9,6 +9,7 @@ import './anchor-button';
 import './anchor-tab';
 import './anchor-tabs';
 import './anchored-region';
+import './banner';
 import './breadcrumb';
 import './breadcrumb-item';
 import './button';

packages/nimble-components/src/banner/index.ts

@@ -0,0 +1,89 @@
+import { attr, observable } from '@microsoft/fast-element';
+import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+import { BannerSeverity } from './types';
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-banner': Banner;
+    }
+}
+
+/**
+ * A nimble-styled notification banner for persistent messages.
+ */
+export class Banner extends FoundationElement {
+    /**
+     * @public
+     * @description
+     * Whether the banner is visible or not
+     */
+    @attr({ mode: 'boolean' })
+    public open = false;
+
+    /**
+     * @public
+     * @description
+     * Severity of the banner's message
+     */
+    @attr()
+    public severity: BannerSeverity = BannerSeverity.default;
+
+    /**
+     * @public
+     * @description
+     * Whether the banner title is hidden
+     */
+    @attr({ attribute: 'title-hidden', mode: 'boolean' })
+    public titleHidden = false;
+
+    /**
+     * @public
+     * @description
+     * Hides the dismiss button
+     */
+    @attr({ attribute: 'prevent-dismiss', mode: 'boolean' })
+    public preventDismiss = false;
+
+    /**
+     * @public
+     * @description
+     * Label (not visible) for the dismiss button
+     */
+    @attr({ attribute: 'dismiss-button-label' })
+    public dismissButtonLabel?: string;
+
+    /** @internal */
+    @observable
+    public readonly slottedTitle?: HTMLElement[];
+
+    /**
+     * @internal
+     */
+    public openChanged(): void {
+        this.$emit('toggle', { oldState: !this.open, newState: this.open });
+    }
+
+    /**
+     * @internal
+     */
+    public closeBanner(): void {
+        this.open = false;
+    }
+
+    /**
+     * @internal
+     */
+    public getAriaLabel(): string {
+        return this.slottedTitle ? this.slottedTitle[0]?.innerText ?? '' : '';
+    }
+}
+
+const nimbleBanner = Banner.compose({
+    baseName: 'banner',
+    template,
+    styles
+});
+
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());

packages/nimble-components/src/banner/styles.ts

@@ -0,0 +1,157 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+
+import {
+    actionRgbPartialColor,
+    bannerButtonFillSelectedColor,
+    bannerButtonHeight,
+    bannerCloseButtonIconSize,
+    bannerCloseButtonSize,
+    bannerColor,
+    bannerErrorBackgroundColor,
+    bannerFontSize,
+    bannerIconColor,
+    bannerIconMarginTop,
+    bannerInfoBackgroundColor,
+    bannerLinkActiveFontColor,
+    bannerNeutralBackgroundColor,
+    bannerStartEndWidth,
+    bannerTextGap,
+    bannerTextMarginVertical,
+    bannerWarningBackgroundColor,
+    bodyFont,
+    borderHoverColor,
+    buttonLabelFontColor,
+    controlHeight,
+    fillSelectedColor,
+    iconColor,
+    iconSize,
+    linkActiveFontColor,
+    linkDisabledFontColor,
+    linkFontColor
+} from '../theme-provider/design-tokens';
+import { MultivaluePropertyStyleSheetBehavior } from '../utilities/style/multivalue-property-stylesheet-behavior';
+import { BannerSeverity } from './types';
+
+export const styles = css`
+    ${display('flex')}
+
+    :host {
+        width: 100%;
+        font: ${bodyFont};
+        font-size: ${bannerFontSize};
+        align-items: top;
+        overflow: hidden;
+        background: ${bannerNeutralBackgroundColor};
+        color: ${bannerColor};
+        ${iconColor.cssCustomProperty}: ${bannerIconColor};
+    }
+
+    :host(:not([open])) {
+        display: none;
+    }
+
+    .icon {
+        width: ${bannerStartEndWidth};
+        display: flex;
+        justify-content: center;
+        margin-top: ${bannerIconMarginTop};
+        flex: 0 0 auto;
+    }
+
+    .text {
+        display: inline;
+        margin-top: ${bannerTextMarginVertical};
+        margin-bottom: ${bannerTextMarginVertical};
+    }
+
+    ::slotted([slot='title']) {
+        font-weight: bold;
+        padding-right: ${bannerTextGap};
+        white-space: nowrap;
+    }
+
+    .controls {
+        margin-left: auto;
+        display: flex;
+        justify-content: center;
+    }
+
+    slot[name='action'] {
+        display: flex;
+        align-content: center;
+    }
+
+    ::slotted(nimble-anchor[slot='action']) {
+        ${linkFontColor.cssCustomProperty}: ${bannerColor};
+        ${linkDisabledFontColor.cssCustomProperty}: ${bannerColor};
+        ${linkActiveFontColor.cssCustomProperty}: ${bannerLinkActiveFontColor};
+        white-space: nowrap;
+        margin-top: ${bannerTextMarginVertical};
+    }
+
+    ::slotted(nimble-button[slot='action']) {
+        height: 24px;
+        ${buttonLabelFontColor.cssCustomProperty}: ${bannerColor};
+        ${fillSelectedColor.cssCustomProperty}: ${bannerButtonFillSelectedColor};
+        ${borderHoverColor.cssCustomProperty}: ${bannerColor};
+        white-space: nowrap;
+        margin-top: calc((${controlHeight} - ${bannerButtonHeight}) / 2);
+    }
+
+    ::slotted(nimble-button[slot='action'][appearance='outline']) {
+        ${actionRgbPartialColor.cssCustomProperty}: ${bannerColor}
+    }
+
+    .close {
+        width: ${bannerStartEndWidth};
+        display: flex;
+        justify-content: center;
+        margin-top: ${bannerIconMarginTop};
+    }
+
+    .close nimble-button {
+        height: ${bannerCloseButtonSize};
+        width: ${bannerCloseButtonSize};
+        ${iconSize.cssCustomProperty}: ${bannerCloseButtonIconSize};
+        ${buttonLabelFontColor.cssCustomProperty}: ${bannerColor};
+        ${borderHoverColor.cssCustomProperty}: transparent;
+        ${fillSelectedColor.cssCustomProperty}: ${bannerButtonFillSelectedColor};
+    }
+
+    .close nimble-button:hover {
+        background: ${bannerButtonFillSelectedColor};
+    }
+`.withBehaviors(
+    new MultivaluePropertyStyleSheetBehavior(
+        'severity',
+        BannerSeverity.error,
+        css`
+            :host {
+                background: ${bannerErrorBackgroundColor};
+            }
+        `
+    ),
+    new MultivaluePropertyStyleSheetBehavior(
+        'severity',
+        BannerSeverity.warning,
+        css`
+            :host {
+                background: ${bannerWarningBackgroundColor};
+            }
+        `
+    ),
+    new MultivaluePropertyStyleSheetBehavior(
+        'severity',
+        BannerSeverity.info,
+        css`
+            :host {
+                background: ${bannerInfoBackgroundColor};
+            }
+
+            .icon {
+                ${iconSize.cssCustomProperty}: 18px;
+            }
+        `
+    )
+);

packages/nimble-components/src/banner/template.ts

@@ -0,0 +1,42 @@
+import { html, slotted, when } from '@microsoft/fast-element';
+import { DesignSystem } from '@microsoft/fast-foundation';
+import type { Banner } from '.';
+import { Button } from '../button';
+import { IconExclamationMark } from '../icons/exclamation-mark';
+import { IconInfo } from '../icons/info';
+import { IconTriangleFilled } from '../icons/triangle-filled';
+import { IconXmark } from '../icons/xmark';
+
+// prettier-ignore
+export const template = html<Banner>`
+    <template role="status" aria-label=${x => x.getAriaLabel()}>
+        <div class="icon">
+            ${when(x => x.severity === 'error', html`
+                <${DesignSystem.tagFor(IconExclamationMark)}></${DesignSystem.tagFor(IconExclamationMark)}>
+            `)}
+            ${when(x => x.severity === 'warning', html`
+                <${DesignSystem.tagFor(IconTriangleFilled)}></${DesignSystem.tagFor(IconTriangleFilled)}>
+            `)}
+            ${when(x => x.severity === 'info', html`
+                <${DesignSystem.tagFor(IconInfo)}></${DesignSystem.tagFor(IconInfo)}>
+            `)}
+        </div>
+        <div class="text">
+            ${when(x => !x.titleHidden, html`
+                <slot name="title" ${slotted('slottedTitle')}></slot>
+            `)}
+            <slot></slot>
+        </div>
+        <div class="controls">
+            <slot name="action"></slot>
+            <div class="close">
+                ${when(x => !x.preventDismiss, html<Banner>`
+                    <${DesignSystem.tagFor(Button)} appearance="ghost" content-hidden @click="${x => x.closeBanner()}">
+                        <${DesignSystem.tagFor(IconXmark)} slot="start"></${DesignSystem.tagFor(IconXmark)}>
+                        ${x => x.dismissButtonLabel}
+                    </${DesignSystem.tagFor(Button)}>
+                `)}
+            </div>
+        </div>
+    </template>
+`;