@ds-mo/ui 1.0.2 → 1.2.0

package/src/wc/components/Banner/Banner.tsx

@@ -0,0 +1,148 @@
+import { Component, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';
+
+export type BannerIntent =
+  | 'brand' | 'positive' | 'negative' | 'warning' | 'caution'
+  | 'ai' | 'neutral' | 'walkthrough' | 'guide';
+
+export type BannerContrast = 'faint' | 'medium' | 'bold' | 'strong';
+
+const FADE_OUT_MS = 200;
+const AUTO_DISMISS_MS = 4000;
+
+@Component({
+  tag: 'ds-banner',
+  styleUrl: 'Banner.css',
+  scoped: true,
+})
+export class Banner {
+  @Prop() intent: BannerIntent = 'neutral';
+  @Prop() contrast: BannerContrast = 'medium';
+  @Prop() message: string = '';
+  /** Renders the diagonal-stripe accent bar above the body. */
+  @Prop() header: boolean = false;
+  /** Renders at a fixed position (centered top) and auto-dismisses after 4 s. */
+  @Prop() floating: boolean = false;
+  @Prop() showDismiss: boolean = false;
+  @Prop() dismissLabel: string = 'Dismiss';
+
+  @State() private closing: boolean = false;
+
+  @Event() dsDismiss!: EventEmitter<void>;
+
+  private dismissTimer: ReturnType<typeof setTimeout> | null = null;
+  private closeTimer: ReturnType<typeof setTimeout> | null = null;
+
+  componentDidLoad() {
+    if (this.floating && this.message) this.scheduleDismiss();
+  }
+
+  @Watch('message')
+  onMessageChange(newVal: string) {
+    if (this.floating && newVal) {
+      this.closing = false;
+      this.scheduleDismiss();
+    }
+  }
+
+  disconnectedCallback() {
+    this.clearTimers();
+  }
+
+  private clearTimers() {
+    if (this.dismissTimer) { clearTimeout(this.dismissTimer); this.dismissTimer = null; }
+    if (this.closeTimer)   { clearTimeout(this.closeTimer);   this.closeTimer = null; }
+  }
+
+  private scheduleDismiss() {
+    this.clearTimers();
+    this.dismissTimer = setTimeout(() => {
+      this.dismissTimer = null;
+      this.beginClose();
+    }, AUTO_DISMISS_MS);
+  }
+
+  private beginClose() {
+    this.clearTimers();
+    if (this.floating) {
+      this.closing = true;
+      this.closeTimer = setTimeout(() => {
+        this.closing = false;
+        this.closeTimer = null;
+        this.dsDismiss.emit();
+      }, FADE_OUT_MS);
+    } else {
+      this.dsDismiss.emit();
+    }
+  }
+
+  private getContentColor(): string {
+    if (this.contrast === 'bold') return 'var(--color-foreground-on-bold-background-primary)';
+    const c = this.contrast === 'faint' ? 'bold' : this.contrast === 'medium' ? 'strong' : 'medium';
+    return `var(--color-foreground-${c}-${this.intent})`;
+  }
+
+  private getBg(): string {
+    return `var(--color-background-${this.contrast}-${this.intent})`;
+  }
+
+  private getElevation(): string {
+    return this.floating
+      ? 'var(--effect-elevation-elevated-floating, var(--effect-elevation-floating))'
+      : 'var(--effect-elevation-elevated)';
+  }
+
+  render() {
+    const contentColor = this.getContentColor();
+    const isAssertive = this.intent === 'negative';
+
+    const bannerEl = (
+      <div
+        class={{ 'banner-wrapper': true }}
+        style={{ '--banner-content': contentColor } as { [key: string]: string }}
+        role={isAssertive ? 'alert' : 'status'}
+        aria-live={isAssertive ? undefined : 'polite'}
+      >
+        <div
+          class="banner-surface"
+          style={{
+            backgroundColor: this.getBg(),
+            boxShadow: this.getElevation(),
+          }}
+        >
+          {this.header && (
+            <div class="banner-header-surface">
+              <div class="banner-header" />
+            </div>
+          )}
+          <div class="banner-body">
+            <span class="text-body-medium banner-message">{this.message}</span>
+            {this.showDismiss && (
+              <button
+                type="button"
+                class="banner-dismiss"
+                onClick={() => this.beginClose()}
+                aria-label={this.dismissLabel}
+              >
+                &times;
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+
+    if (this.floating) {
+      return (
+        <Host style={{ display: 'contents' }}>
+          <div class="floating-position" style={{ zIndex: '9998' }}>
+            <div class={{ 'floating-toast': true, 'floating-toast--closing': this.closing }}>
+              {bannerEl}
+            </div>
+          </div>
+        </Host>
+      );
+    }
+
+    return <Host style={{ display: 'contents' }}>{bannerEl}</Host>;
+  }
+}