@momentum-design/components 0.115.0 → 0.116.1

package/dist/components/banner/banner.component.d.ts

@@ -0,0 +1,79 @@
+import type { CSSResult } from 'lit';
+import { Component } from '../../models';
+import type { BannerVariant } from './banner.types';
+/**
+ * `mdc-banner` is a component that allows applications to communicate important messages to users
+ * and requires user action to dismiss them. It supports different message types with appropriate styling
+ * and icons, and provides flexibility for customization through label, secondary label, icons, and actions.
+ *
+ * They are designed to be noticeable yet non-intrusive, helping users stay informed without interrupting their workflow.
+ *
+ * This component supports both structured content via properties and flexible customization via slots:
+ * - Use the properties (`label`, `secondaryLabel`, `variant`) for standard banner layouts with automatic icon selection.
+ * - Use slots for custom content and complete layout control.
+ * - Combine both approaches for maximum flexibility.
+ * - Create custom orientations and actions using CSS parts and slots.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @slot content - Complete content override. When used, it replaces all default banner content including icon, label, secondary label, and actions.
+ * @slot leading-icon - Custom icon content. Overrides the default variant-based icon.
+ * @slot leading-text - Custom text content. Overrides the label and secondaryLabel properties.
+ * @slot trailing-actions - Custom action buttons and controls. Use this for dismiss buttons, reset buttons, or any other actions.
+ *
+ * @tagname mdc-banner
+ *
+ * @csspart leading - The leading section containing the icon and text.
+ * @csspart leading-icon - The icon displayed for variants or custom icon slot.
+ * @csspart leading-text - The leading section containing label and secondary label text.
+ * @csspart trailing - The trailing section containing action buttons and controls.
+ * @csspart leading-label - The label text of the banner.
+ * @csspart leading-secondary-label - The secondary label text of the banner.
+ *
+ * @cssproperty --mdc-banner-background-color - Background color of the banner.
+ * @cssproperty --mdc-banner-border-color - Border color of the banner.
+ * @cssproperty --mdc-banner-icon-color - Color of the icon in the banner.
+ * @cssproperty --mdc-banner-elevation - Elevation/shadow of the banner.
+ * @cssproperty --mdc-banner-padding - Padding inside the banner.
+ * @cssproperty --mdc-banner-gap - Gap between banner elements.
+ */
+declare class Banner extends Component {
+    /**
+     * The type of banner variant.
+     * - Can be `custom`, `informational`, `warning`, `error`, or `success`.
+     *
+     * Note: When using the `custom` variant, provide your own icon via the `leading-icon` slot; otherwise, no icon will be shown.
+     * @default 'custom'
+     */
+    variant: BannerVariant;
+    /**
+     * Banner label text
+     */
+    label: string;
+    /**
+     * Banner secondary label text
+     *
+     * Note: Optional supporting text that appears below the label. Only rendered when label is also provided.
+     */
+    secondaryLabel?: string;
+    /**
+     * @internal
+     * Renders the icon based on the provided icon name.
+     *
+     * @param iconName - The name of the icon to render
+     * @returns Template result containing the icon element, or nothing if no icon name provided
+     */
+    private renderIcon;
+    /**
+     * @internal
+     * Generates a template for the label and secondary label text.
+     * Returns nothing if no label is provided, ensuring secondary label is only shown when label exists.
+     *
+     * @returns Template result containing label and optional secondary label elements
+     */
+    private getTextLabel;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Banner;

package/dist/components/banner/banner.component.js

@@ -0,0 +1,142 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Component } from '../../models';
+import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
+import { DEFAULTS } from './banner.constants';
+import styles from './banner.styles';
+import { getIconNameForVariant } from './banner.utils';
+/**
+ * `mdc-banner` is a component that allows applications to communicate important messages to users
+ * and requires user action to dismiss them. It supports different message types with appropriate styling
+ * and icons, and provides flexibility for customization through label, secondary label, icons, and actions.
+ *
+ * They are designed to be noticeable yet non-intrusive, helping users stay informed without interrupting their workflow.
+ *
+ * This component supports both structured content via properties and flexible customization via slots:
+ * - Use the properties (`label`, `secondaryLabel`, `variant`) for standard banner layouts with automatic icon selection.
+ * - Use slots for custom content and complete layout control.
+ * - Combine both approaches for maximum flexibility.
+ * - Create custom orientations and actions using CSS parts and slots.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @slot content - Complete content override. When used, it replaces all default banner content including icon, label, secondary label, and actions.
+ * @slot leading-icon - Custom icon content. Overrides the default variant-based icon.
+ * @slot leading-text - Custom text content. Overrides the label and secondaryLabel properties.
+ * @slot trailing-actions - Custom action buttons and controls. Use this for dismiss buttons, reset buttons, or any other actions.
+ *
+ * @tagname mdc-banner
+ *
+ * @csspart leading - The leading section containing the icon and text.
+ * @csspart leading-icon - The icon displayed for variants or custom icon slot.
+ * @csspart leading-text - The leading section containing label and secondary label text.
+ * @csspart trailing - The trailing section containing action buttons and controls.
+ * @csspart leading-label - The label text of the banner.
+ * @csspart leading-secondary-label - The secondary label text of the banner.
+ *
+ * @cssproperty --mdc-banner-background-color - Background color of the banner.
+ * @cssproperty --mdc-banner-border-color - Border color of the banner.
+ * @cssproperty --mdc-banner-icon-color - Color of the icon in the banner.
+ * @cssproperty --mdc-banner-elevation - Elevation/shadow of the banner.
+ * @cssproperty --mdc-banner-padding - Padding inside the banner.
+ * @cssproperty --mdc-banner-gap - Gap between banner elements.
+ */
+class Banner extends Component {
+    constructor() {
+        super(...arguments);
+        /**
+         * The type of banner variant.
+         * - Can be `custom`, `informational`, `warning`, `error`, or `success`.
+         *
+         * Note: When using the `custom` variant, provide your own icon via the `leading-icon` slot; otherwise, no icon will be shown.
+         * @default 'custom'
+         */
+        this.variant = DEFAULTS.VARIANT;
+        /**
+         * Banner label text
+         */
+        this.label = '';
+    }
+    /**
+     * @internal
+     * Renders the icon based on the provided icon name.
+     *
+     * @param iconName - The name of the icon to render
+     * @returns Template result containing the icon element, or nothing if no icon name provided
+     */
+    renderIcon(iconName) {
+        if (!iconName)
+            return nothing;
+        return html `
+      <mdc-icon
+        name="${iconName}"
+        size="${DEFAULTS.PREFIX_ICON_SIZE}"
+        part="leading-icon"
+        length-unit="rem"
+      ></mdc-icon>
+    `;
+    }
+    /**
+     * @internal
+     * Generates a template for the label and secondary label text.
+     * Returns nothing if no label is provided, ensuring secondary label is only shown when label exists.
+     *
+     * @returns Template result containing label and optional secondary label elements
+     */
+    getTextLabel() {
+        if (!this.label)
+            return nothing;
+        return html `
+      <mdc-text part="leading-label" type="${TYPE.BODY_LARGE_REGULAR}" tagname="${VALID_TEXT_TAGS.SPAN}"
+        >${this.label}</mdc-text
+      >
+      ${this.secondaryLabel
+            ? html `<mdc-text part="leading-secondary-label" type="${TYPE.BODY_MIDSIZE_REGULAR}" tagname="${VALID_TEXT_TAGS.SPAN}"
+            >${this.secondaryLabel}</mdc-text
+          >`
+            : nothing}
+    `;
+    }
+    render() {
+        var _a;
+        return html `
+      <slot name="content">
+        <div part="leading">
+          <slot name="leading-icon">
+            ${this.variant !== DEFAULTS.VARIANT ? this.renderIcon((_a = getIconNameForVariant(this.variant)) !== null && _a !== void 0 ? _a : '') : nothing}
+          </slot>
+          <slot name="leading-text">
+            <div part="leading-text">${this.getTextLabel()}</div>
+          </slot>
+        </div>
+        <div part="trailing">
+          <slot name="trailing-actions"></slot>
+        </div>
+      </slot>
+    `;
+    }
+}
+Banner.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Banner.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Banner.prototype, "label", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'secondary-label' }),
+    __metadata("design:type", String)
+], Banner.prototype, "secondaryLabel", void 0);
+export default Banner;

package/dist/components/banner/banner.constants.d.ts

@@ -0,0 +1,28 @@
+declare const TAG_NAME: "mdc-banner";
+/**
+ * Banner variants
+ */
+declare const BANNER_VARIANT: {
+    readonly CUSTOM: "custom";
+    readonly INFORMATIONAL: "informational";
+    readonly WARNING: "warning";
+    readonly ERROR: "error";
+    readonly SUCCESS: "success";
+};
+/**
+ * Icon names for variants
+ */
+declare const VARIANT_ICON_NAMES: {
+    readonly INFORMATIONAL_ICON_NAME: "info-circle-bold";
+    readonly SUCCESS_ICON_NAME: "check-circle-bold";
+    readonly WARNING_ICON_NAME: "warning-bold";
+    readonly ERROR_ICON_NAME: "error-legacy-bold";
+};
+/**
+ * Default values
+ */
+declare const DEFAULTS: {
+    readonly VARIANT: "custom";
+    readonly PREFIX_ICON_SIZE: 1.5;
+};
+export { TAG_NAME, BANNER_VARIANT, DEFAULTS, VARIANT_ICON_NAMES };

package/dist/components/banner/banner.constants.js

@@ -0,0 +1,29 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('banner');
+/**
+ * Banner variants
+ */
+const BANNER_VARIANT = {
+    CUSTOM: 'custom',
+    INFORMATIONAL: 'informational',
+    WARNING: 'warning',
+    ERROR: 'error',
+    SUCCESS: 'success',
+};
+/**
+ * Icon names for variants
+ */
+const VARIANT_ICON_NAMES = {
+    INFORMATIONAL_ICON_NAME: 'info-circle-bold',
+    SUCCESS_ICON_NAME: 'check-circle-bold',
+    WARNING_ICON_NAME: 'warning-bold',
+    ERROR_ICON_NAME: 'error-legacy-bold',
+};
+/**
+ * Default values
+ */
+const DEFAULTS = {
+    VARIANT: BANNER_VARIANT.CUSTOM,
+    PREFIX_ICON_SIZE: 1.5,
+};
+export { TAG_NAME, BANNER_VARIANT, DEFAULTS, VARIANT_ICON_NAMES };

package/dist/components/banner/banner.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/components/banner/banner.styles.js

@@ -0,0 +1,86 @@
+import { css } from 'lit';
+const styles = css `
+  :host {
+    --mdc-banner-background-color: var(--mds-color-theme-background-solid-primary-normal);
+    --mdc-banner-border-color: var(--mds-color-theme-outline-secondary-normal);
+    --mdc-banner-icon-color: var(--mds-color-theme-text-primary-normal);
+    --mdc-banner-elevation: var(--mds-elevation-3);
+    --mdc-banner-padding: 0.75rem;
+    --mdc-banner-gap: 0.5rem;
+
+    display: flex;
+    padding: var(--mdc-banner-padding);
+    align-items: flex-start;
+    gap: var(--mdc-banner-gap);
+    align-self: stretch;
+    width: 100%;
+    background-color: var(--mdc-banner-background-color);
+    border: 1px solid var(--mdc-banner-border-color);
+    border-radius: 0.5rem;
+    filter: var(--mdc-banner-elevation);
+  }
+
+  :host([variant='success']) {
+    --mdc-banner-icon-color: var(--mds-color-theme-text-success-normal);
+    --mdc-banner-background-color: var(--mds-color-theme-background-alert-success-normal);
+    --mdc-banner-border-color: var(--mds-color-theme-outline-join-normal);
+  }
+
+  :host([variant='warning']) {
+    --mdc-banner-icon-color: var(--mds-color-theme-text-warning-normal);
+    --mdc-banner-background-color: var(--mds-color-theme-background-alert-warning-normal);
+    --mdc-banner-border-color: var(--mds-color-theme-outline-warning-normal);
+  }
+
+  :host([variant='error']) {
+    --mdc-banner-icon-color: var(--mds-color-theme-text-error-normal);
+    --mdc-banner-background-color: var(--mds-color-theme-background-alert-error-normal);
+    --mdc-banner-border-color: var(--mds-color-theme-outline-cancel-normal);
+  }
+
+  :host([variant='informational']) {
+    --mdc-banner-icon-color: var(--mds-color-theme-text-accent-normal);
+    --mdc-banner-background-color: var(--mds-color-theme-background-alert-theme-normal);
+    --mdc-banner-border-color: var(--mds-color-theme-outline-theme-normal);
+  }
+
+  :host::part(leading) {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--mdc-banner-gap);
+    align-self: stretch;
+    flex: 1 0 0;
+  }
+
+  :host::part(leading-text) {
+    flex: 1 0 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  :host(:not([secondary-label]))::part(leading) {
+    align-items: center;
+  }
+
+  :host::part(leading-icon) {
+    color: var(--mdc-banner-icon-color);
+    padding: 0.25rem 0;
+  }
+
+  :host::part(trailing) {
+    display: flex;
+    align-items: center;
+    gap: var(--mdc-banner-gap);
+    align-self: stretch;
+    flex-wrap: wrap;
+  }
+
+  ::slotted([slot='trailing-actions']) {
+    display: flex;
+    align-items: center;
+    gap: var(--mdc-banner-gap);
+    flex-wrap: wrap;
+  }
+`;
+export default [styles];

package/dist/components/banner/banner.types.d.ts

@@ -0,0 +1,4 @@
+import type { ValueOf } from '../../utils/types';
+import type { BANNER_VARIANT } from './banner.constants';
+type BannerVariant = ValueOf<typeof BANNER_VARIANT>;
+export type { BannerVariant };

package/dist/components/banner/banner.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/banner/banner.utils.d.ts

@@ -0,0 +1,3 @@
+import type { BannerVariant } from './banner.types';
+declare const getIconNameForVariant: (variant: BannerVariant) => string | null;
+export { getIconNameForVariant };

package/dist/components/banner/banner.utils.js

@@ -0,0 +1,16 @@
+import { BANNER_VARIANT, VARIANT_ICON_NAMES } from './banner.constants';
+const getIconNameForVariant = (variant) => {
+    switch (variant) {
+        case BANNER_VARIANT.INFORMATIONAL:
+            return VARIANT_ICON_NAMES.INFORMATIONAL_ICON_NAME;
+        case BANNER_VARIANT.SUCCESS:
+            return VARIANT_ICON_NAMES.SUCCESS_ICON_NAME;
+        case BANNER_VARIANT.WARNING:
+            return VARIANT_ICON_NAMES.WARNING_ICON_NAME;
+        case BANNER_VARIANT.ERROR:
+            return VARIANT_ICON_NAMES.ERROR_ICON_NAME;
+        default:
+            return null;
+    }
+};
+export { getIconNameForVariant };

package/dist/components/banner/index.d.ts

@@ -0,0 +1,9 @@
+import '../icon';
+import '../text';
+import Banner from './banner.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-banner']: Banner;
+    }
+}
+export default Banner;

package/dist/components/banner/index.js

@@ -0,0 +1,6 @@
+import '../icon';
+import '../text';
+import Banner from './banner.component';
+import { TAG_NAME } from './banner.constants';
+Banner.register(TAG_NAME);
+export default Banner;