@covalent/components 0.0.0-COVALENT

package/src/code-snippet/code-snippet.stories.js

@@ -0,0 +1,134 @@
+import './code-snippet';
+import '../dialog/dialog';
+import '../icon-button/icon-button';
+import '../button/button';
+
+import { addons } from '@storybook/preview-api';
+import {
+  DARK_MODE_EVENT_NAME,
+  UPDATE_DARK_MODE_EVENT_NAME,
+} from 'storybook-dark-mode';
+
+// get channel to listen to event emitter
+const channel = addons.getChannel();
+
+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/Code snippet',
+  args: {
+    hideHeader: false,
+    inline: false,
+    label: 'Example.sql',
+    language: 'sql',
+    content: sqlContent,
+    maxHeight: 0,
+  },
+};
+
+const Template = ({
+  inline,
+  content,
+  hideHeader,
+  label,
+  language,
+  maxHeight,
+}) => {
+  document.addEventListener(
+    'DOMContentLoaded',
+    () => {
+      const themeToggle = document.querySelector('#theme-toggle');
+
+      // listen to DARK_MODE event
+      channel.on(DARK_MODE_EVENT_NAME, (darkMode) => {
+        if (darkMode) {
+          themeToggle.setAttribute('icon', 'brightness_high');
+        } else {
+          themeToggle.setAttribute('icon', 'brightness_4');
+        }
+      });
+
+      themeToggle.addEventListener('click', () => {
+        channel.emit(UPDATE_DARK_MODE_EVENT_NAME);
+      });
+    },
+    { once: true }
+  );
+  return `
+    <cv-code-snippet
+        label="${label}"
+        maxHeight="${maxHeight}"
+        language="${language}"
+        ${hideHeader ? 'hideHeader' : ''}
+        ${inline ? 'inline' : ''}>
+    <cv-icon-button slot="actionItems" id="theme-toggle"></cv-icon-button>
+    <cv-icon-button slot="actionItems" icon="content_copy"></cv-icon-button>
+    ${content}
+    </cv-code-snippet>`;
+};
+
+export const Basic = Template.bind();
+Basic.args = {
+  language: 'sql',
+  content: sqlContent,
+};
+
+export const Scrollable = Template.bind();
+Scrollable.args = {
+  maxHeight: 250,
+};
+
+export const HiddenHeader = Template.bind();
+HiddenHeader.args = {
+  hideHeader: true,
+};
+
+const TemplateDialog = (...args) => {
+  return `
+    <style>
+    cv-code-snippet {
+        margin:8px -24px -36px;
+    }
+    cv-code-snippet::part(container) {
+        padding-left: 8px;
+        padding-right: 8px;
+    }
+    cv-code-snippet::part(header) {
+        padding-left: 24px;
+    }
+    </style>
+    <cv-dialog heading="Lorem ipsum dolor sit amet" open>
+        <cv-typography scale="body1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tortor consectetur quis velit donec vel integer diam. Nisl pretium egestas ultrices facilisis sed amet et. Odio elementum ut eu magnis at ullamcorper euismod.</cv-typography>
+        ${Template(...args)}
+        <cv-button outlined slot="primaryAction">Export</cv-button>
+        <cv-button slot="secondaryAction">Close</cv-button>
+    </cv-dialog>
+    `;
+};
+export const Dialog = TemplateDialog.bind();
+Dialog.args = {
+  inline: true,
+};
+Dialog.parameters = {
+  docs: {
+    inlineStories: false,
+  },
+};

package/src/code-snippet/code-snippet.ts

@@ -0,0 +1,93 @@
+import { css, LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, queryAssignedNodes } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import styles from './code-snippet.scss?inline';
+import hljs from 'highlight.js/lib/common';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-code-snippet': CovalentCodeSnippet;
+  }
+}
+
+@customElement('cv-code-snippet')
+export class CovalentCodeSnippet extends LitElement {
+  static override styles = [
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+
+  @property()
+  language?: string;
+
+  @property()
+  label?: string;
+
+  @property({ type: Boolean, reflect: true })
+  inline = false;
+
+  @property({ type: Boolean, reflect: true })
+  hideHeader = false;
+
+  @queryAssignedNodes({})
+  _codeItems!: Array<Node>;
+
+  @property()
+  maxHeight?: number;
+
+  private _code = '';
+
+  highlight() {
+    this._code = '';
+    this._codeItems.forEach((codeEl) => {
+      this._code += hljs.highlight(codeEl.textContent ?? '', {
+        language: this.language ?? '',
+      }).value;
+      this.requestUpdate();
+    });
+  }
+
+  firstUpdated() {
+    this.highlight();
+  }
+
+  override render() {
+    let container = html`${this.renderContainer()}`;
+    if (!this.hideHeader) {
+      container = html`${this.renderHeader()}${this.renderContainer()}`;
+    }
+    return container;
+  }
+
+  renderContainer() {
+    const classes: { [key: string]: boolean } = {
+      'cv-code-snippet': true,
+      hljs: true,
+      inline: this.inline,
+    };
+    classes[`language-${this.language}`] = true;
+    const container = document.createElement('div');
+    container.innerHTML = this._code.trim();
+
+    let styleHeight;
+    if (this.maxHeight && this.maxHeight > 0) {
+      styleHeight = `max-height: ${this.maxHeight}px`;
+    }
+
+    return html` <pre
+        style="${styleHeight}"
+        part="container"
+      ><code part="code" class="${classMap(classes)}">${container}</code></pre>
+      <slot class="code-slot"></slot>`;
+  }
+
+  renderHeader() {
+    return html`<div class="header" part="header">
+      <div class="title">${this.label}</div>
+      <span><slot name="actionItems"></slot></span>
+    </div>`;
+  }
+}
+
+export default CovalentCodeSnippet;

package/src/data-table/_data-table.theme.scss

@@ -0,0 +1,39 @@
+@use '@material/data-table' as data-table;
+
+@mixin data-table-theme($theme) {
+  $surface: map-get($theme, surface);
+  $highlight: map-get($theme, surface-neutral-highlight);
+  $highlight-hover: map-get($theme, surface-neutral-highlight-hover);
+  $text: map-get($theme, text-primary-on-background);
+  $hint-text: map-get($theme, text-hint-on-background);
+  $icon: map-get($theme, text-icon-on-background);
+  $divider: map-get($theme, divider);
+
+  @include data-table.sort-icon-color($hint-text);
+  @include data-table.sort-icon-active-color($icon);
+  // @include data-table.header-row-fill-color,
+  // @include data-table.row-fill-color();
+  @include data-table.selected-row-fill-color($highlight);
+  @include data-table.row-hover-fill-color($highlight-hover);
+  @include data-table.header-row-text-color($text);
+  @include data-table.row-text-color($text);
+  @include data-table.divider-color($divider);
+  @include data-table.stroke-size(0);
+
+  .mdc-data-table {
+    width: 100%;
+    border-width: 0;
+    white-space: normal;
+  }
+
+  .mdc-data-table__header-cell {
+    font-family: var(--mdc-typography-font-family);
+    font-size: var(--mdc-typography-body2-font-size);
+    font-weight: 600;
+    line-height: var(--mdc-typography-body2-line-height);
+  }
+
+  .mdc-data-table__sort-icon-button {
+    font-size: 1rem;
+  }
+}

package/src/data-table/data-table.stories.js

@@ -0,0 +1,24 @@
+import '../icon/icon';
+import '../linear-progress/linear-progress';
+
+// Example Content
+import tableContent from '../../stories/demos/table.content.html?raw';
+import tableRowSelectionContent from '../../stories/demos/table-row-selection.content.html?raw';
+import tablePagination from '../../stories/demos/table-pagination.content.html?raw';
+import tableProgressIndicator from '../../stories/demos/table-progress-indicator.content.html?raw';
+import tableColumnSorting from '../../stories/demos/table-column-sorting.content.html?raw';
+
+import './data-table.stories.scss';
+
+export default {
+  title: 'Components/Data Table',
+  parameters: {
+    //    layout: "fullscreen",
+  },
+};
+
+export const Basic = ({}) => tableContent;
+export const RowSelection = ({}) => tableRowSelectionContent;
+export const WithPagination = ({}) => tablePagination;
+export const WithColumnSorting = ({}) => tableColumnSorting;
+export const ProgressIndicator = ({}) => tableProgressIndicator;

package/src/data-table/data-table.stories.scss

@@ -0,0 +1,11 @@
+@use '@material/checkbox'; // Required only for data table with row selection.
+@use '@material/icon-button/icon-button'; // Required only for data table with column sorting.
+@use '@material/linear-progress'; // Required only for data table with linear progress
+@use '@material/select/styles'; // Required only for data table with pagination
+@use '@material/data-table/data-table';
+
+@include checkbox.core-styles;
+@include linear-progress.core-styles;
+@include icon-button.core-styles;
+@include data-table.core-styles;
+@include data-table.theme-baseline;

package/src/dialog/Overview.mdx

@@ -0,0 +1,39 @@
+import { Canvas, Meta, DocsContainer, Story } from '@storybook/blocks';
+import * as DialogStories from './dialog.stories';
+
+<Meta of={DialogStories} />
+
+# Dialogs
+
+## Basics
+
+- Use only when the user has to make a decision RIGHT NOW
+- It's always better to do the action and then allow an "undo" option rather than using an "Are you sure?" dialog
+- To notify the user less intrusively, consider using a [snackbar](?path=/story/components-snackbar--basic) instead
+
+---
+
+## Anatomy
+
+{/* <Story id="components-dialog--anatomy" /> is deprecated, please migrate it to <Story of={referenceToStory} /> see: https://storybook.js.org/migration-guides/7.0 */}
+
+{' '}
+<Story id="components-dialog--anatomy" />
+
+---
+
+## Examples
+
+### Logout
+
+{/* <Story id="components-dialog--logout" /> is deprecated, please migrate it to <Story of={referenceToStory} /> see: https://storybook.js.org/migration-guides/7.0 */}
+
+{' '}
+<Story id="components-dialog--logout" />
+
+### Destructive dialog
+
+{/* <Story id="components-dialog--udf" /> is deprecated, please migrate it to <Story of={referenceToStory} /> see: https://storybook.js.org/migration-guides/7.0 */}
+
+{' '}
+<Story id="components-dialog--udf" />

package/src/dialog/dialog.scss

@@ -0,0 +1,17 @@
+:host {
+  --mdc-dialog-heading-ink-color: var(--mdc-theme-text-primary-on-background);
+  --mdc-dialog-content-ink-color: var(--mdc-theme-text-primary-on-background);
+  --mdc-dialog-scroll-divider-color: var(--mdc-theme-border);
+
+  // Allow consumer to set border radius and height of the dialog
+  .mdc-dialog .mdc-dialog__surface {
+    border-radius: var(--cv-dialog-border-radius, var(--mdc-shape-medium, 4));
+    min-height: var(--mdc-dialog-min-height);
+  }
+
+  // Allow consumer to set padding of the dialog content
+  .mdc-dialog .mdc-dialog__content {
+    padding: var(--cv-dialog-vertical-padding, 20px)
+      var(--cv-dialog-horizontal-padding, 24px);
+  }
+}

package/src/dialog/dialog.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentDialog } from './dialog';
+
+describe('Dialog', () => {
+  it('should work', () => {
+    expect(new CovalentDialog()).toBeDefined();
+  });
+});

package/src/dialog/dialog.stories.js

@@ -0,0 +1,89 @@
+import dialogComponent from '../../stories/demos/dialog.component';
+import './dialog';
+import '../button/button';
+import '../textfield/textfield';
+
+export default {
+  title: 'Components/Dialog',
+};
+
+const Template = ({ trapFocus }) => {
+  document.addEventListener(
+    'DOMContentLoaded',
+    () => {
+      const button = document.body.querySelector('#dialog-button');
+      button.addEventListener('click', () => {
+        const dialog = document.body.querySelector('#dialog1');
+        dialog.open = true;
+      });
+    },
+    { once: true },
+  );
+  return `
+    <cv-button id="dialog-button" raised>Open basic dialog</cv-button>
+    <cv-dialog id="dialog1" heading="Dialog header" ${trapFocus ? 'trapFocus' : ''} scrimClickAction="">
+      Dialog body text
+      <cv-button slot="primaryAction" dialogAction="close">Action 2</cv-button>
+      <cv-button slot="secondaryAction" dialogAction="close">Action 1</cv-button>
+    </cv-dialog>`;
+};
+
+export const Basic = dialogComponent.bind({});
+
+export const Anatomy = Template.bind({});
+Anatomy.args = {
+  trapFocus: true,
+};
+
+const templateLogout = () => {
+  document.addEventListener(
+    'DOMContentLoaded',
+    () => {
+      const button = document.body.querySelector('#logout-button');
+      button.addEventListener('click', () => {
+        const dialog = document.body.querySelector('#example-logout');
+        dialog.open = true;
+      });
+    },
+    { once: true },
+  );
+  return `
+  <cv-button id="logoout-button" raised>Open logout dialog</cv-button>
+  <cv-dialog id="example-logout" heading="You will be logged out soon" scrimClickAction="">
+            Due to inactivity, you’ll be logged out in 3 minutes to protect your security.
+            <cv-button slot="primaryAction" dialogAction="close">Log out</cv-button>
+            <cv-button slot="secondaryAction" dialogAction="close">Stay logged in</cv-button>
+          </cv-dialog>`;
+};
+
+export const Logout = templateLogout.bind({});
+
+const templateUDF = ({}) => {
+  document.addEventListener(
+    'DOMContentLoaded',
+    () => {
+      const button = document.body.querySelector('#udf-button');
+      button.addEventListener('click', () => {
+        const dialog = document.body.querySelector('#example-udf');
+        dialog.open = true;
+      });
+    },
+    { once: true },
+  );
+  return `
+          <cv-button id="udf-button" raised>Open UDF dialog</cv-button>
+          <cv-dialog id="example-udf" heading="Delete User Defined Function" scrimClickAction="" >
+            
+            <div class="key-value">
+              <div class="key-value--key mdc-typography--caption">Function to delete</div>
+              <div class="key-value--value">UDF_StrCpy</div>
+            </div>
+            <cv-formfield label="I understand that all queries currently using this UDF will be canceled">
+              <cv-checkbox class="child"></cv-checkbox>
+            </cv-formfield>
+            <cv-button slot="primaryAction" dialogAction="close" class="destructive primary" disabled>Delete</cv-button>
+            <cv-button slot="secondaryAction" dialogAction="close">Cancel</cv-button>
+          </cv-dialog>`;
+};
+
+export const UDF = templateUDF.bind({});

package/src/dialog/dialog.ts

@@ -0,0 +1,44 @@
+import { css, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { DialogBase } from '@material/mwc-dialog/mwc-dialog-base';
+import { MDCDialogAdapter } from '@material/dialog/adapter.js';
+import { styles as baseStyles } from '@material/mwc-dialog/mwc-dialog.css';
+import styles from './dialog.scss?inline';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-dialog': CovalentDialog;
+  }
+}
+
+@customElement('cv-dialog')
+export class CovalentDialog extends DialogBase {
+  static override styles = [
+    baseStyles,
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+
+  /** Enables/Disables the trap focus functionality that uses blocking-elements library */
+  @property({ type: Boolean, reflect: true })
+  trapFocus = false;
+
+  protected override createAdapter(): MDCDialogAdapter {
+    const baseAdapater = super.createAdapter();
+
+    return {
+      ...baseAdapater,
+      // Override the trapFocus method to prevent the blocking-elements from assigning inert attribute
+      trapFocus: (el) => {
+        if (this.trapFocus) {
+          baseAdapater.trapFocus(el);
+        } else if (el && !this.isConnected) {
+          el.focus();
+        }
+      },
+    };
+  }
+}
+
+export default CovalentDialog;

package/src/drawer/drawer.scss

@@ -0,0 +1,4 @@
+
+:host {
+  border-color: var(--mdc-theme-border);
+}

package/src/drawer/drawer.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentDrawer } from './drawer';
+
+describe('Drawer', () => {
+  it('should work', () => {
+    expect(new CovalentDrawer()).toBeDefined();
+  });
+});

package/src/drawer/drawer.ts

@@ -0,0 +1,18 @@
+import { css, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { DrawerBase } from '@material/mwc-drawer/mwc-drawer-base';
+import { styles as baseStyles } from '@material/mwc-drawer/mwc-drawer.css';
+import styles from './drawer.scss?inline';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-drawer': CovalentDrawer;
+  }
+}
+
+@customElement('cv-drawer')
+export class CovalentDrawer extends DrawerBase {
+  static override styles = [baseStyles, css`${unsafeCSS(styles)}`];
+}
+
+export default CovalentDrawer

package/src/empty-state/empty-state.scss

@@ -0,0 +1,67 @@
+@use '@material/typography/mdc-typography';
+
+:host {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  align-self: center;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  max-width: 360px;
+  margin: auto;
+}
+
+.icon-background {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 96px;
+  height: 96px;
+  border-radius: 50%;
+  background-color: color-mix(
+    in srgb,
+    var(--mdc-theme-on-surface) 4%,
+    transparent
+  );
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.covalent-icon {
+  font-size: 40px;
+  color: var(--mdc-theme-text-secondary-on-background);
+}
+
+.mdc-typography--headline6 {
+  font-family: var(--mdc-typography-headline6-font-family);
+  font-size: var(--mdc-typography-headline6-font-size);
+  font-weight: var(--mdc-typography-headline6-font-weight);
+  line-height: var(--mdc-typography-headline6-line-height);
+  color: var(--mdc-theme-text-secondary-on-background);
+  margin: 16px 0 8px;
+}
+
+.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);
+  color: var(--mdc-theme-text-secondary-on-background);
+  margin: 0;
+}
+
+.buttonContainer {
+  display: flex;
+  gap: 0 20px;
+  margin-top: 16px;
+}
+
+h6 {
+  margin: 16px;
+}

package/src/empty-state/empty-state.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentEmptyState } from './empty-state';
+
+describe('Empty state', () => {
+  it('should work', () => {
+    expect(new CovalentEmptyState()).toBeDefined();
+  });
+});