@covalent/components 0.0.0-COVALENT

package/src/alert/_alert.theme.scss

@@ -0,0 +1,116 @@
+@mixin theme() {
+  .mdc-banner {
+    --mdc-theme-surface: var(--cv-theme-surface-container-highest);
+    --mdc-theme-text-primary-on-background: var(--cv-theme-on-surface);
+    --mdc-theme-text-secondary-on-background: var(--cv-theme-on-surface);
+
+    background-color: var(--mdc-theme-surface);
+
+    .mdc-banner__graphic {
+      --mdc-theme-surface: var(--mdc-theme-text-icon-on-background);
+    }
+
+    .mdc-banner__text {
+      color: var(--mdc-theme-text-primary-on-background);
+
+      .mdc-typography--body2 {
+        font-family: var(--mdc-typography-body2-font-family);
+        font-size: var(--mdc-typography-body2-font-size);
+        font-weight: var(--mdc-typography-body2-font-weight);
+        line-height: var(--mdc-typography-body2-line-height);
+      }
+
+      .mdc-typography--body1 {
+        color: var(--mdc-theme-text-secondary-on-background);
+        font-family: var(--mdc-typography-body1-font-family);
+        font-size: var(--mdc-typography-body1-font-size);
+        font-weight: var(--mdc-typography-body1-font-weight);
+        line-height: var(--mdc-typography-body1-line-height);
+      }
+    }
+
+    &.cv-banner--inline {
+      --mdc-theme-surface: var(--cv-theme-surface-container);
+    }
+
+    &.caution {
+      --mdc-theme-surface: var(--mdc-theme-caution);
+      --mdc-theme-text-primary-on-background: var(--mdc-theme-on-caution);
+      --mdc-theme-text-secondary-on-background: var(--mdc-theme-on-caution);
+      --mdc-theme-text-icon-on-background: var(--mdc-theme-on-caution);
+
+      &.cv-banner--inline {
+        --mdc-theme-surface: var(--cv-theme-caution-container);
+        --mdc-theme-text-primary-on-background: var(
+          --mdc-theme-on-caution-container
+        );
+        --mdc-theme-text-secondary-on-background: var(
+          --mdc-theme-on-caution-container
+        );
+        --mdc-theme-text-icon-on-background: var(
+          --mdc-theme-on-caution-container
+        );
+      }
+    }
+
+    &.negative {
+      --mdc-theme-surface: var(--mdc-theme-negative);
+      --mdc-theme-text-primary-on-background: var(--mdc-theme-on-negative);
+      --mdc-theme-text-secondary-on-background: var(--mdc-theme-on-negative);
+      --mdc-theme-text-icon-on-background: var(--mdc-theme-on-negative);
+
+      &.cv-banner--inline {
+        --mdc-theme-surface: var(--cv-theme-negative-container);
+        --mdc-theme-text-primary-on-background: var(
+          --mdc-theme-on-negative-container
+        );
+        --mdc-theme-text-secondary-on-background: var(
+          --mdc-theme-on-negative-container
+        );
+        --mdc-theme-text-icon-on-background: var(
+          --mdc-theme-on-negative-container
+        );
+      }
+    }
+
+    &.active {
+      --mdc-theme-surface: var(--mdc-theme-secondary);
+      --mdc-theme-text-primary-on-background: var(--mdc-theme-on-secondary);
+      --mdc-theme-text-secondary-on-background: var(--mdc-theme-on-secondary);
+      --mdc-theme-text-icon-on-background: var(--mdc-theme-on-secondary);
+
+      &.cv-banner--inline {
+        --mdc-theme-surface: var(--cv-theme-secondary-container);
+        --mdc-theme-text-primary-on-background: var(
+          --mdc-theme-on-secondary-container
+        );
+        --mdc-theme-text-secondary-on-background: var(
+          --mdc-theme-on-secondary-container
+        );
+        --mdc-theme-text-icon-on-background: var(
+          --mdc-theme-on-secondary-container
+        );
+      }
+    }
+
+    &.positive {
+      --mdc-theme-surface: var(--mdc-theme-positive);
+      --mdc-theme-text-primary-on-background: var(--mdc-theme-on-positive);
+      --mdc-theme-text-secondary-on-background: var(--mdc-theme-on-positive);
+      --mdc-theme-text-icon-on-background: var(--mdc-theme-on-positive);
+
+      &.cv-banner--inline {
+        --mdc-theme-surface: var(--cv-theme-positive-container);
+        --mdc-theme-text-primary-on-background: var(
+          --mdc-theme-on-positive-container
+        );
+        --mdc-theme-text-secondary-on-background: var(
+          --mdc-theme-on-positive-container
+        );
+        --mdc-theme-text-icon-on-background: var(
+          --mdc-theme-on-positive-container
+        );
+      }
+    }
+  }
+}

package/src/alert/alert-base.ts

@@ -0,0 +1,175 @@
+import { addHasRemoveClass } from '@material/mwc-base/base-element';
+import { observer } from '@material/mwc-base/observer';
+import { MDCBannerFoundation } from '@material/banner/foundation';
+import { MDCBannerAdapter } from '@material/banner/adapter';
+import { Action, CloseReason, events } from '@material/banner/constants';
+
+import { html, LitElement, TemplateResult } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { property, query, state } from 'lit/decorators.js';
+
+import '../icon/icon';
+
+export class AlertBase extends LitElement {
+  protected mdcFoundation!: MDCBannerFoundation;
+  protected readonly mdcFoundationClass = MDCBannerFoundation;
+  private _resizeObserver!: ResizeObserver;
+
+  @query('.mdc-banner') protected mdcRoot!: HTMLElement;
+  @query('.mdc-banner__content') protected mdcContent!: HTMLElement;
+  @query('.mdc-banner__graphic-text-wrapper')
+  protected mdcGraphicTextWrapper!: HTMLElement;
+  @state() protected currentWidth = 0;
+
+  @property({ type: Boolean, reflect: true })
+  @observer(function (this: AlertBase, value: boolean) {
+    if (this.mdcFoundation) {
+      if (value) {
+        this.mdcFoundation.open();
+      } else {
+        this.mdcFoundation.close(this.reason);
+        this.reason = CloseReason.UNSPECIFIED;
+      }
+    }
+  })
+  open = true;
+
+  @property({ type: String }) titleText = '';
+  @property({ type: String }) descriptionText = '';
+
+  @property({ type: String }) icon = '';
+  @property({ type: String }) iconAriaLabel = '';
+
+  @property({ type: Boolean }) inline = false;
+  /**
+   * The state representation active|negative|positive|caution
+   */
+  @property()
+  state = '';
+
+  constructor() {
+    super();
+    // Create ResizeObserver with callback
+    this._resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const newWidth = entry.contentRect.width;
+        if (newWidth !== this.currentWidth) {
+          this.currentWidth = newWidth;
+          this.mdcFoundation.layout();
+        }
+      }
+    });
+  }
+
+  // Cleanup when element is removed
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._resizeObserver.disconnect();
+  }
+
+  protected reason: CloseReason = CloseReason.UNSPECIFIED;
+
+  protected override render() {
+    const classes = {
+      'mdc-banner': true,
+      'cv-banner--inline': this.inline,
+      negative: this.state === 'negative',
+      positive: this.state === 'positive',
+      caution: this.state === 'caution',
+      active: this.state === 'active',
+    };
+    return html` <div class="${classMap(classes)}" role="banner">
+      <div
+        class="mdc-banner__content"
+        role="alertdialog"
+        aria-live="assertive"
+        aria-label="${this.titleText}"
+      >
+        <div class="mdc-banner__graphic-text-wrapper">
+          ${this.icon ? this.renderIcon() : ''}
+          <div class="mdc-banner__text">
+            <span class="mdc-typography--body1">${this.titleText}</span>
+            <div class="mdc-typography--body2">${this.descriptionText}</div>
+          </div>
+        </div>
+        <div class="mdc-banner__actions">
+          <slot name="action-items"></slot>
+        </div>
+      </div>
+    </div>`;
+  }
+
+  /** @soyTemplate */
+  protected renderIcon(): TemplateResult {
+    return html` <div
+      class="mdc-banner__graphic"
+      role="img"
+      aria-label="${this.iconAriaLabel}"
+    >
+      <slot name="icon">
+        <cv-icon class="mdc-banner__icon"> ${this.icon} </cv-icon>
+      </slot>
+    </div>`;
+  }
+
+  protected createAdapter(): MDCBannerAdapter {
+    return {
+      ...addHasRemoveClass(this.mdcRoot),
+      getContentHeight: () => {
+        return this.mdcContent.offsetHeight;
+      },
+      setStyleProperty: (property: any, value: string) => {
+        this.mdcRoot.style.setProperty(property, value);
+      },
+      trapFocus: () => {
+        /* */
+      },
+      releaseFocus: () => {
+        /* */
+      },
+      notifyActionClicked: (action: Action) =>
+        this.dispatchEvent(
+          new CustomEvent(events.ACTION_CLICKED, {
+            bubbles: true,
+            cancelable: true,
+            detail: { reason: action },
+          }),
+        ),
+      notifyClosed: () => {
+        /* */
+      },
+      notifyClosing: () => {
+        this.open = false;
+      },
+      notifyOpened: () => {
+        /* */
+      },
+      notifyOpening: () => {
+        this.open = true;
+      },
+    };
+  }
+
+  /** @export */
+  show() {
+    this.open = true;
+  }
+
+  /** @export */
+  close(reason = CloseReason.UNSPECIFIED) {
+    this.reason = reason;
+    this.open = false;
+  }
+
+  protected override async firstUpdated() {
+    if (this.mdcFoundation !== undefined) {
+      this.mdcFoundation.destroy();
+    }
+    this.mdcFoundation = new this.mdcFoundationClass(this.createAdapter());
+    if (this.open) {
+      this.mdcFoundation.open();
+    }
+    // Observe when element is resized
+    this._resizeObserver.observe(this.mdcGraphicTextWrapper);
+  }
+}

package/src/alert/alert.scss

@@ -0,0 +1,55 @@
+@use '@material/banner/banner' as banner-core;
+@use '@material/elevation/mixins' as elevation-mixins;
+@use '@material/feature-targeting/feature-targeting';
+@use '@material/shape';
+
+@use './alert.theme';
+
+$query: feature-targeting.all();
+
+:host {
+  @include banner-core.core-styles();
+  @include alert.theme();
+  @include elevation-mixins.overlay-common(
+    $query
+  ); // COPYBARA_COMMENT_THIS_LINE
+
+  .mdc-banner {
+    @include shape.radius(8px);
+    @include elevation-mixins.overlay-surface-position($query: $query);
+    @include elevation-mixins.overlay-dimensions(100%, $query: $query);
+    @include elevation-mixins.elevation(1, $query: $query);
+
+    overflow: hidden;
+    border: none;
+
+    .mdc-banner__content {
+      max-width: inherit;
+    }
+
+    .mdc-banner__graphic {
+      background: none;
+      margin-left: 24px;
+      width: 24px;
+      font-variation-settings: 'FILL' 1;
+    }
+
+    .mdc-banner__text {
+      margin-left: 24px;
+    }
+
+    .mdc-banner__actions {
+      align-self: center;
+      align-items: center;
+    }
+
+    &.cv-banner--inline {
+      @include shape.radius(0);
+      @include elevation-mixins.elevation(0, $query: $query);
+    }
+  }
+
+  ::slotted(*) {
+    margin-left: 8px;
+  }
+}

package/src/alert/alert.spec.ts

@@ -0,0 +1,26 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentAlert } from './alert';
+
+global.ResizeObserver = class MockResizeObserver {
+  constructor() {
+    /**/
+  }
+  observe() {
+    /**/
+  }
+  unobserve() {
+    /**/
+  }
+  disconnect() {
+    /**/
+  }
+};
+
+describe('Alert', () => {
+  it('should work', () => {
+    expect(new CovalentAlert()).toBeDefined();
+  });
+});

package/src/alert/alert.stories.js

@@ -0,0 +1,76 @@
+import './alert';
+
+export default {
+  title: 'Components/Alert',
+  parameters: {
+    layout: 'padded',
+  },
+  argTypes: {
+    state: {
+      options: ['neutral', 'active', 'positive', 'negative', 'caution'],
+      control: { type: 'select' },
+    },
+    actionElement: {
+      options: ['button', 'close icon', 'none'],
+      control: { type: 'select' },
+    },
+  },
+  args: {
+    title: 'Alert title',
+    description: 'Alert description',
+    state: 'active',
+    actionElement: 'button',
+  },
+};
+
+export const PageLevel = ({
+  title,
+  description,
+  state,
+  icon,
+  actionElement,
+  inline,
+}) => {
+  switch (state) {
+    case 'positive':
+      icon = 'check';
+      break;
+    case 'negative':
+      icon = 'error';
+      break;
+    case 'caution':
+      icon = 'warning';
+      break;
+    case 'active':
+    default:
+      icon = 'info';
+  }
+
+  return `
+        <cv-alert
+          titleText="${title}"
+          descriptionText="${description}"
+          state="${state}"
+          ${icon ? `icon="${icon}"` : ''}
+          ${icon ? `iconAriaLabel="${icon}"` : ''}
+          ${inline ? `inline` : ''}>
+          ${
+            actionElement === 'button'
+              ? `<cv-button slot="action-items">Button text</cv-button>`
+              : ''
+          }
+          ${
+            actionElement === 'close icon'
+              ? `<cv-icon-button slot="action-items" icon="close"></cv-icon-button>`
+              : ''
+          }
+        </cv-alert>`;
+};
+
+export const Inline = PageLevel.bind({});
+Inline.args = {
+  inline: true,
+};
+Inline.parameters = {
+  layout: 'fullscreen',
+};

package/src/alert/alert.ts

@@ -0,0 +1,26 @@
+import { css, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { AlertBase } from './alert-base';
+import styles from './alert.scss?inline';
+
+/**
+ * Action ribbon
+ *
+ * @slot - This element has a slot
+ */
+@customElement('cv-alert')
+export class CovalentAlert extends AlertBase {
+  static override styles = [
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-alert': CovalentAlert;
+  }
+}
+
+export default CovalentAlert;