@covalent/components 0.0.0-COVALENT

package/src/status-dialog/status-dialog.scss

@@ -0,0 +1,204 @@
+:host {
+  --mdc-dialog-content-ink-color: var(--cv-theme-on-surface-variant);
+  --mdc-dialog-heading-ink-color: var(--cv-theme-on-surface);
+  --mdc-dialog-min-width: 96vw;
+  --mdc-theme-surface: var(--cv-theme-surface-container-lowest);
+  --mdc-typography-body1-font-family: var(
+    --cv-typography-subtitle1-font-family
+  );
+  --mdc-typography-headline6-font-size: var(
+    --cv-typography-headline6-font-size
+  );
+  --mdc-typography-headline6-font-weight: var(
+    --cv-typography-headline1-font-weight
+  );
+
+  .mdc-dialog {
+    &.error .status-dialog__state {
+      background-color: var(--cv-theme-negative-8);
+
+      cv-icon {
+        color: var(--cv-theme-negative);
+      }
+    }
+
+    &.positive .status-dialog__state {
+      background-color: var(--cv-theme-positive-8);
+
+      cv-icon {
+        color: var(--cv-theme-positive);
+      }
+    }
+
+    &.warning .status-dialog__state {
+      background-color: var(--cv-theme-caution-8);
+
+      cv-icon {
+        color: var(--cv-theme-caution);
+      }
+    }
+  }
+
+  .mdc-dialog .mdc-dialog__surface {
+    max-width: calc(100vw - 40px);
+  }
+
+  .mdc-dialog .mdc-dialog__content {
+    padding: 0 16px;
+
+    &.padding-bottom {
+      padding-bottom: 2rem;
+    }
+  }
+
+  .mdc-dialog__actions {
+    flex-shrink: 0;
+    padding: 16px;
+  }
+
+  .mdc-dialog__content {
+    flex-grow: 1;
+  }
+
+  .mdc-dialog__title {
+    flex: 1;
+    line-height: var(--cv-typography-body1-line-height);
+    margin: 0;
+    padding: 0 40px 0 0;
+  }
+
+  .mdc-dialog__title::before {
+    display: none;
+  }
+
+  .mdc-dialog.mdc-dialog--scrollable .mdc-dialog__title,
+  .mdc-dialog.mdc-dialog--scrollable .mdc-dialog__actions {
+    border: none;
+  }
+}
+
+.status-dialog__arrow-icon {
+  margin-top: 2px;
+
+  &.open {
+    transform: rotate(0deg);
+    transition: transform 250ms ease-out;
+  }
+
+  &.close {
+    transform: rotate(180deg);
+    transition: transform 250ms ease-in;
+  }
+}
+
+.status-dialog__container {
+  display: flex;
+}
+
+.status-dialog__content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+.status-dialog__container,
+.status-dialog__content {
+  max-height: calc(100% - 32px);
+  overflow-y: auto;
+}
+
+.status-dialog__details {
+  display: none;
+
+  &.visible {
+    display: block;
+  }
+}
+
+.status-dialog__heading {
+  --mdc-icon-button-size: 40px;
+
+  align-items: start;
+  box-sizing: border-box;
+  display: inline-flex;
+  justify-content: space-between;
+  padding: 18px 16px;
+  width: 100%;
+
+  &.no-heading {
+    justify-content: flex-end;
+  }
+
+  .status-dialog__close-icon {
+    position: absolute;
+    right: 8px;
+    top: 10px;
+  }
+}
+
+.status-dialog__state {
+  --mdc-icon-size: 32px;
+
+  padding: 14px 16px 0;
+
+  cv-icon {
+    font-variation-settings: 'FILL' 1;
+  }
+}
+
+.status-dialog__toggle-details {
+  align-items: center;
+  color: var(--cv-theme-primary);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.25px;
+  line-height: 20px;
+  padding: 16px 0;
+}
+
+@media screen and (min-width: 600px) {
+  :host {
+    --mdc-dialog-min-width: 575px;
+
+    .mdc-dialog .mdc-dialog__surface {
+      max-width: 575px;
+    }
+  }
+}
+
+@media screen and (max-width: 480px) {
+  :host {
+    .status-dialog__container {
+      flex-direction: column;
+    }
+
+    .status-dialog__heading .status-dialog__close-icon {
+      top: 18px;
+    }
+
+    .status-dialog__state {
+      padding: 4px;
+
+      cv-icon {
+        display: none;
+      }
+    }
+
+    .mdc-dialog {
+      &.error .status-dialog__state {
+        background-color: var(--cv-theme-negative);
+      }
+
+      &.positive .status-dialog__state {
+        background-color: var(--cv-theme-positive);
+      }
+
+      &.warning .status-dialog__state {
+        background-color: var(--cv-theme-caution);
+      }
+    }
+  }
+}

package/src/status-dialog/status-dialog.spec.ts

@@ -0,0 +1,48 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect, beforeAll } from 'vitest';
+import { CovalentStatusDialog } from './status-dialog';
+
+describe('Dialog', () => {
+  let dialogElements: NodeListOf<CovalentStatusDialog>;
+  const heading = 'Test heading';
+  const content = 'Content in dialog';
+
+  beforeAll(() => {
+    document.body.innerHTML = `<cv-status-dialog  heading="${heading}">${content}</cv-status-dialog>
+    <cv-status-dialog state="positive"  heading="${heading}">
+      ${content}
+      <div slot="details">Additional details</div>
+    </cv-status-dialog>
+      `;
+    dialogElements = document.body.querySelectorAll('cv-status-dialog');
+  });
+
+  it('should work', () => {
+    expect(new CovalentStatusDialog()).toBeDefined();
+  });
+
+  it('should display heading and content', () => {
+    const dialog = dialogElements[0];
+    expect(dialog.heading).toBe(heading);
+    expect(dialog.innerHTML).toContain(content);
+  });
+
+  it('should set the state of the dialog', () => {
+    const dialog = dialogElements[1];
+    expect(dialog.state).toBe('positive');
+  });
+
+  it('should show details link when details are present', () => {
+    const dialog = dialogElements[1];
+    expect(dialog.showDetailsLink).toBe(true);
+  });
+
+  it('should toggle details open and close', () => {
+    const dialog = dialogElements[1];
+    expect(dialog['expandDetails']).toBe(false);
+    expect(dialog.toggleDetails());
+    expect(dialog['expandDetails']).toBe(true);
+  });
+});

package/src/status-dialog/status-dialog.stories.js

@@ -0,0 +1,136 @@
+import '../code-snippet/code-snippet';
+import '../button/button';
+import '../icon/icon';
+import '../icon-button/icon-button';
+import './status-dialog';
+
+const dialogContent = {
+  error: `<p style="margin: 0;">
+    We’re experiencing an issue in the system, so the users didn’t get added.
+  </p>
+  <p style="margin-bottom: 0;">
+    Find a fix in the knowledge base. If the issue persists, contact Teradata Support and include the error details.
+  </p>`,
+  positive: `<p style="margin: 0;">
+    We’ve successfully added data sharing users.
+  </p>`,
+  warning: `<p style="margin: 0;">
+    This action will stop a process in use by other users, including: user a, user b, user c
+  </p>`,
+};
+
+const sqlContent = `
+SELECT * FROM load_to_teradata (
+    ON (
+    SELECT "class" AS class_col,
+            "variable" AS variable_col,
+            "type" AS type_col,
+            category,
+            cnt,
+            "sum" AS sum_col,
+            "sumSq",
+            "totalCnt"
+    FROM aster_nb_modelSC
+    )
+    tdpid ('sdt12432.labs.teradata.com')
+    username ('sample_user')
+    password ('sample_user')
+    target_table ('td_nb_modelSC')
+);
+`;
+
+export default {
+  title: 'Components/Status Dialog',
+  argTypes: {
+    state: {
+      options: ['error', 'positive', 'warning'],
+      control: { type: 'select' },
+    },
+  },
+  args: {
+    state: 'error',
+    open: false,
+    hideActions: false,
+    heading: 'Basic heading for the dialog',
+  },
+};
+
+const Template = ({ state, hideActions, heading }) => {
+  document.addEventListener(
+    'DOMContentLoaded',
+    () => {
+      const button = document.body.querySelector('#dialog-button');
+      button.addEventListener('click', () => {
+        const dialog = document.body.querySelector('#dialog');
+        dialog.open = true;
+      });
+    },
+    { once: true }
+  );
+
+  const buttonName = `${heading}`.includes('Basic')
+    ? 'Open basic dialog'
+    : `${`${state[0]}`.toUpperCase()}${`${state}`.substring(1)}`;
+
+  return `
+    <cv-button id="dialog-button" raised>${buttonName}</cv-button>
+    <cv-status-dialog id="dialog" state="${state}" heading="${heading}" ${
+    hideActions ? 'hideActions' : ''
+  } scrimClickAction="" >
+      ${dialogContent[state]}
+      <cv-button raised slot="primaryAction" dialogAction="close">Close</cv-button>
+    </cv-status-dialog>`;
+};
+
+const TemplateWithDetails = ({ state, hideActions, heading }) => {
+  document.addEventListener(
+    'DOMContentLoaded',
+    () => {
+      const button = document.body.querySelector('#dialog-button-2');
+      button.addEventListener('click', () => {
+        const dialog = document.body.querySelector('#dialog-2');
+        dialog.open = true;
+      });
+    },
+    { once: true }
+  );
+
+  return `
+    <cv-button id="dialog-button-2" raised>Open dialog with details</cv-button>
+    <cv-status-dialog id="dialog-2" state="${state}" heading="${heading}" ${
+    hideActions ? 'hideActions' : ''
+  } scrimClickAction="" >
+      ${dialogContent[state]}
+      <div slot="details">
+        <cv-code-snippet language="sql" hideHeader=true>
+          ${sqlContent}
+        </cv-code-snippet>
+      </div>
+      <cv-button raised slot="primaryAction" dialogAction="close">Close</cv-button>
+    </cv-status-dialog>`;
+};
+
+export const Basic = Template.bind({});
+
+export const Positive = Template.bind({});
+Positive.args = {
+  state: 'positive',
+  heading: 'Data sharing users added',
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  state: 'warning',
+  heading: 'Warning',
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  state: 'error',
+  heading: 'Couldn’t add data sharing users',
+};
+
+export const WithDetails = TemplateWithDetails.bind({});
+WithDetails.args = {
+  heading: 'Couldn’t add data sharing users',
+};

package/src/status-dialog/status-dialog.ts

@@ -0,0 +1,188 @@
+import { css, html, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { styles as baseStyles } from '@material/mwc-dialog/mwc-dialog.css';
+import { classMap } from 'lit/directives/class-map.js';
+import CovalentDialog from '../dialog/dialog';
+import styles from './status-dialog.scss?inline';
+import '../icon/icon';
+import '../icon-button/icon-button';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-status-dialog': CovalentStatusDialog;
+  }
+}
+
+/**
+ * Status Dialog
+ *
+ * @slot - This element has a slot
+ */
+@customElement('cv-status-dialog')
+export class CovalentStatusDialog extends CovalentDialog {
+  @query('#details')
+  _details?: HTMLSlotElement;
+
+  /**
+   * The state representation error|positive|warning
+   */
+  @property({ type: String })
+  state: 'error' | 'positive' | 'warning' = 'error';
+
+  /**
+   * Whether the content details are expanded
+   */
+  @state()
+  protected expandDetails = false;
+
+  /**
+   * Whether the expand details link is shown
+   */
+  @state()
+  showDetailsLink = false;
+
+  static override styles = [
+    baseStyles,
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+
+  protected override firstUpdated(): void {
+    super.firstUpdated();
+    if (this._details) {
+      const detailNodes = this._details.assignedNodes({
+        flatten: true,
+      }) as Element[];
+
+      // Filter out non-element nodes
+      this.showDetailsLink = detailNodes.some(
+        (node) => node.nodeType === Node.ELEMENT_NODE
+      );
+    }
+  }
+
+  toggleDetails() {
+    this.expandDetails = !this.expandDetails;
+  }
+
+  private _getStatusIcon(): string {
+    switch (this.state) {
+      case 'positive':
+        return 'check';
+      default:
+        return this.state;
+    }
+  }
+
+  // Renders the details section in the dialog content
+  renderDetails() {
+    const detailsClasses = {
+      'status-dialog__details': true,
+      visible: this.expandDetails,
+    };
+
+    const animation = {
+      open: !this.expandDetails,
+      close: this.expandDetails,
+    };
+
+    const arrow = html`<cv-icon
+      class="${classMap(animation)} status-dialog__arrow-icon"
+      >arrow_drop_down</cv-icon
+    >`;
+    return html`${this.showDetailsLink
+        ? html`<div>
+            <span
+              class="status-dialog__toggle-details"
+              @click="${this.toggleDetails}"
+              >${this.expandDetails ? 'Hide details' : 'Show details'} ${arrow}
+            </span>
+          </div>`
+        : ''}
+      <slot
+        name="details"
+        id="details"
+        class="${classMap(detailsClasses)}"
+      ></slot>`;
+  }
+
+  protected override renderHeading() {
+    const headingClasses = {
+      'status-dialog__heading': true,
+      'no-heading': !this.heading,
+    };
+    let heading = html``;
+    if (this.heading) {
+      heading = html`<h2 id="title" class="mdc-dialog__title">
+        ${this.heading}
+      </h2>`;
+    }
+    return html`<span class="${classMap(headingClasses)}">
+      ${heading}
+      <cv-icon-button
+        class="status-dialog__close-icon"
+        icon="close"
+        @click=${this.close}
+      ></cv-icon-button>
+    </span>`;
+  }
+
+  override render() {
+    const classes = {
+      'mdc-dialog--stacked': this.stacked,
+      error: this.state === 'error',
+      positive: this.state === 'positive',
+      warning: this.state === 'warning',
+    };
+
+    const heading = this.renderHeading();
+
+    const details = this.renderDetails();
+
+    const actionsClasses = {
+      'mdc-dialog__actions': !this.hideActions,
+    };
+
+    const contentClasses = {
+      'mdc-dialog__content': true,
+      'padding-bottom': this.hideActions,
+    };
+
+    return html` <div
+      class="mdc-dialog ${classMap(classes)}"
+      role="alertdialog"
+      aria-modal="true"
+      aria-labelledby="title"
+      aria-describedby="content"
+    >
+      <div class="mdc-dialog__container">
+        <div class="mdc-dialog__surface">
+          <div class="status-dialog__container">
+            <div class="status-dialog__state">
+              <cv-icon>${this._getStatusIcon()}<cv-icon>
+            </div>
+            <div class="status-dialog__content">
+              ${heading}
+              <div id="content" class="${classMap(contentClasses)}">
+                <slot id="contentSlot"></slot>
+                ${details}
+              </div>
+              <footer id="actions" class="${classMap(actionsClasses)}">
+                <span>
+                  <slot name="secondaryAction"></slot>
+                </span>
+                <span>
+                  <slot name="primaryAction"></slot>
+                </span>
+              </footer>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mdc-dialog__scrim"></div>
+    </div>`;
+  }
+}
+
+export default CovalentStatusDialog;

package/src/status-header/_status-header.theme.scss

@@ -0,0 +1,79 @@
+@mixin theme {
+  .status-header {
+    --cv-status-header-background: transparent;
+    --cv-status-header-icon-background: var(
+      --mdc-theme-surface-neutral-highlight-hover
+    );
+    --cv-status-header-icon-color: var(--mdc-theme-text-icon-on-background);
+    --cv-status-header-status-color: var(--mdc-theme-on-surface);
+
+    background-color: var(--cv-status-header-background);
+
+    .status-header-content {
+      max-width: inherit;
+      flex-direction: column;
+    }
+
+    .status-header-icon {
+      background-color: var(--cv-status-header-icon-background);
+      color: var(--cv-status-header-icon-color);
+    }
+
+    .status-header-text {
+      --mdc-theme-primary: var(--mdc-theme-surface-neutral-highlight-hover);
+      --mdc-theme-on-surface: var(--mdc-theme-text-icon-on-background);
+
+      color: var(--cv-status-header-status-color);
+    }
+
+    .status-header-helper {
+      color: var(--mdc-theme-text-secondary-on-background);
+    }
+
+    .status-header-title-text {
+      color: var(--mdc-theme-on-surface);
+    }
+
+    &.active {
+      --cv-status-header-background: var(
+        --mdc-theme-surface-secondary-highlight
+      );
+      --cv-status-header-icon-background: var(
+        --mdc-theme-surface-secondary-highlight-hover
+      );
+      --cv-status-header-icon-color: var(--mdc-theme-secondary);
+      --cv-status-header-status-color: var(--mdc-theme-secondary);
+    }
+
+    &.caution {
+      --cv-status-header-background: var(--mdc-theme-surface-caution-highlight);
+      --cv-status-header-icon-background: var(
+        --mdc-theme-surface-caution-highlight-hover
+      );
+      --cv-status-header-icon-color: var(--mdc-theme-caution);
+      --cv-status-header-status-color: var(--mdc-theme-caution);
+    }
+
+    &.error {
+      --cv-status-header-background: var(
+        --mdc-theme-surface-negative-highlight
+      );
+      --cv-status-header-icon-background: var(
+        --mdc-theme-surface-negative-highlight-hover
+      );
+      --cv-status-header-icon-color: var(--mdc-theme-negative);
+      --cv-status-header-status-color: var(--mdc-theme-negative);
+    }
+
+    &.positive {
+      --cv-status-header-background: var(
+        --mdc-theme-surface-positive-highlight
+      );
+      --cv-status-header-icon-background: var(
+        --mdc-theme-surface-positive-highlight-hover
+      );
+      --cv-status-header-icon-color: var(--mdc-theme-positive);
+      --cv-status-header-status-color: var(--mdc-theme-positive);
+    }
+  }
+}

package/src/status-header/status-header-base.ts

@@ -0,0 +1,42 @@
+import { html, LitElement } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { property } from 'lit/decorators.js';
+
+export class StatusHeaderBase extends LitElement {
+  @property() state: 'active' | 'positive' | 'caution' | 'error' | 'neutral' =
+    'neutral';
+  @property({ type: String }) statusText = '';
+  @property({ type: String }) statusHelper = '';
+  @property({ type: String }) titleText = '';
+
+  protected override render() {
+    const classes = {
+      active: this.state === 'active',
+      caution: this.state === 'caution',
+      error: this.state === 'error',
+      positive: this.state === 'positive',
+    };
+
+    return html`
+      <div class="status-header ${classMap(classes)}">
+        <div class="status-header-title">
+          <div class="status-header-title-text">${this.titleText}</div>
+          <slot name="status-header-actions"></slot>
+        </div>
+        <div class="status-header-status">
+          <div class="status-header-icon">
+            <slot name="status-header-icon"></slot>
+          </div>
+          <div class="status-header-text-block">
+            <div class="status-header-text">${this.statusText}</div>
+            <div class="status-header-helper">${this.statusHelper}</div>
+          </div>
+          <div class="status-header-slot">
+            <slot name="status-header-text"></slot>
+          </div>
+        </div>
+        <slot></slot>
+      </div>
+    `;
+  }
+}