@covalent/components 0.0.0-COVALENT

package/src/app-shell/app-shell.ts

@@ -0,0 +1,388 @@
+import { css, html, nothing, unsafeCSS } from 'lit';
+import {
+  customElement,
+  property,
+  queryAssignedElements,
+} from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { DrawerBase } from '@material/mwc-drawer/mwc-drawer-base';
+import styles from './app-shell.scss?inline';
+
+import '../top-app-bar/top-app-bar-fixed';
+import '../icon-button/icon-button';
+import '../card/card';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-app-shell': CovalentAppShell;
+  }
+}
+
+/**
+ * App Shell element.
+ *
+ * @slot - This element has a slot
+ */
+@customElement('cv-app-shell')
+export class CovalentAppShell extends DrawerBase {
+  static override styles = [
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+
+  element = document.querySelector('.help');
+  helpWidth = 0;
+  private _startX!: number;
+  private _startWidth!: number;
+  private _resizing = false;
+
+  @queryAssignedElements({ slot: 'navigation' })
+  navigationListElements!: HTMLElement[];
+
+  @queryAssignedElements({ slot: 'user-menu' })
+  userMenuElements!: HTMLElement[];
+
+  /**
+   * The name of the application to show in the small app bar
+   */
+  @property()
+  appName = '';
+
+  /**
+   * The name of the section shown above the navigation
+   */
+  @property()
+  sectionName = '';
+
+  @property({ type: Boolean, reflect: true })
+  drawerOpen = false;
+
+  @property({ type: Boolean, reflect: true })
+  helpOpen = false;
+
+  /**
+   * Make help resizable with drag/drop handle
+   */
+  @property({ type: Boolean, reflect: true })
+  helpResizable = false;
+
+  /**
+   * Wrap the main area with a contained card surface
+   */
+  @property({ type: Boolean, reflect: true })
+  contained = false;
+
+  /**
+   * Force the left navigation visibly open
+   */
+  @property({ type: Boolean, reflect: true })
+  forcedOpen = false;
+
+  /**
+   * Make the content area full width
+   */
+  @property({ type: Boolean, reflect: true })
+  fullWidth = false;
+
+  private hovered = false;
+  private hoverTimeout: any | undefined;
+  private hoverEntryDuration = 250;
+  private hoverExitDuration = 250;
+
+  constructor() {
+    super();
+    this.resizeEvent();
+    this._resize = this._resize.bind(this);
+    this._stopResize = this._stopResize.bind(this);
+    this._startResizing = this._startResizing.bind(this);
+    this._setupEventListeners();
+    window.addEventListener('DOMContentLoaded', () => {
+      this.setupHelpPanelListeners();
+      const storedWidth = localStorage.getItem('helpWidth');
+      if (storedWidth) {
+        this.helpWidth = parseInt(storedWidth, 10);
+        this.updateHelpPanelWidth();
+      }
+    });
+  }
+
+  setupHelpPanelListeners() {
+    const helpToggle = document.querySelector('.help-item');
+    const helpClose = document.querySelector('.help-close');
+
+    helpToggle?.addEventListener('click', () => {
+      this.toggleHelpPanel();
+    });
+
+    helpClose?.addEventListener('click', () => {
+      this.toggleHelpPanel(false);
+    });
+  }
+
+  toggleHelpPanel(open?: boolean) {
+    this.helpOpen = open !== undefined ? open : !this.helpOpen;
+    if (this.helpOpen) {
+      const storedWidth = localStorage.getItem('helpWidth');
+      this.helpWidth = storedWidth ? parseInt(storedWidth, 10) : 320;
+    } else {
+      this.helpWidth = 0;
+    }
+    this.updateHelpPanelWidth();
+    this.requestUpdate();
+  }
+
+  private _setupEventListeners() {
+    window.addEventListener('DOMContentLoaded', () => {
+      const helpToggle = document.querySelector('.help-item');
+      const helpClose = document.querySelector('.help-close');
+
+      helpToggle?.addEventListener('click', () => {
+        this.helpOpen = !this.helpOpen;
+        this.helpWidth = this.helpOpen ? 320 : 0;
+        this.requestUpdate();
+      });
+
+      helpClose?.addEventListener('click', () => {
+        this.helpOpen = false;
+        this.helpWidth = 0;
+        this.requestUpdate();
+      });
+    });
+  }
+
+  private _startResizing(event: MouseEvent) {
+    if (!this.helpResizable) return;
+
+    const resizeHandle = this.shadowRoot?.querySelector('.resize-handle');
+    if (event.target === resizeHandle) {
+      this._startX = event.clientX;
+      this._startWidth = this.helpWidth;
+      this._resizing = true;
+      document.addEventListener('mousemove', this._resize);
+      document.addEventListener('mouseup', this._stopResize);
+      (event.target as HTMLElement).classList.add('helpResizable');
+    }
+
+    resizeHandle?.addEventListener('dblclick', () => {
+      if (this.helpWidth > 320 || this.helpWidth !== 320) {
+        this.helpWidth = 320;
+        localStorage.setItem('helpWidth', '320');
+        this.updateHelpPanelWidth();
+        this.requestUpdate();
+      }
+    });
+
+    this.requestUpdate();
+  }
+
+  private _resize(event: MouseEvent) {
+    const diff = event.clientX - this._startX;
+    const windowWidth = window.innerWidth;
+    const mainMinWidth = 600;
+    const maxWidthForHelp = Math.max(320, windowWidth - mainMinWidth);
+    const newWidth = Math.max(
+      320,
+      Math.min(maxWidthForHelp, this._startWidth - diff)
+    );
+    if (this.helpWidth !== newWidth) {
+      this.helpWidth = newWidth;
+      localStorage.setItem('helpWidth', this.helpWidth.toString());
+      this.updateHelpPanelWidth();
+    }
+    event.preventDefault();
+  }
+
+  private _stopResize() {
+    document.removeEventListener('mousemove', this._resize);
+    document.removeEventListener('mouseup', this._stopResize);
+    this._resizing = false;
+    const resizeHandle = this.shadowRoot?.querySelector('.resize-handle');
+    if (resizeHandle) {
+      resizeHandle.classList.remove('helpResizable');
+    }
+
+    this.requestUpdate();
+  }
+
+  private _toggleOpen(forcedOpen = false) {
+    if (this.mdcFoundation.isOpening() || this.mdcFoundation.isClosing()) {
+      return;
+    }
+
+    this.open = forcedOpen ? forcedOpen : !this.open;
+    this.forcedOpen = forcedOpen;
+
+    this.dispatchEvent(
+      new Event('CovalentAppShell:toggle', { bubbles: true, composed: true })
+    );
+
+    this.requestUpdate();
+  }
+
+  private updateHelpPanelWidth() {
+    const appShell = this.shadowRoot?.querySelector(
+      '.app-shell'
+    ) as HTMLElement;
+    appShell?.style.setProperty('--cv-help-width', `${this.helpWidth}px`);
+  }
+
+  private _handleMenuClick() {
+    this.mdcRoot.dispatchEvent(
+      new Event('transitionend', { bubbles: true, composed: true })
+    );
+    // Forcefully toggle the open/close state
+    this._toggleOpen(!this.forcedOpen);
+
+    this.dispatchEvent(new Event('CovalentAppShell:menuClick'));
+
+    this.hovered = false;
+  }
+
+  private _handleNavMouseOver = () => {
+    this.hovered = true;
+
+    // clear timeout if user hovers over nav before it closes
+    clearTimeout(this.hoverTimeout);
+
+    if (!this.open && !this.forcedOpen) {
+      this.hoverTimeout = setTimeout(() => {
+        if (this.hovered) {
+          this._toggleOpen();
+        }
+      }, this.hoverEntryDuration);
+    }
+  };
+
+  private _handleNavMouseOut = () => {
+    this.hovered = false;
+
+    // clear timeout if user leaves nav before it opens
+    clearTimeout(this.hoverTimeout);
+
+    if (this.open && !this.forcedOpen) {
+      this.hoverTimeout = setTimeout(() => {
+        if (!this.hovered) {
+          this._toggleOpen();
+        }
+      }, this.hoverExitDuration);
+    }
+  };
+
+  private _handleDrawerClosed() {
+    this.forcedOpen = false;
+    this.hovered = false;
+    this.requestUpdate();
+  }
+
+  resizeEvent() {
+    // TODO should be configurable outside appshell
+    const mql = window.matchMedia('(max-width: 767px)');
+    if (mql.matches && this.type !== 'modal') {
+      this.type = 'modal';
+    } else if (!mql.matches && this.type !== 'dismissible') {
+      this.type = 'dismissible';
+    }
+    this.requestUpdate();
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('MDCDrawer:closed', this._handleDrawerClosed);
+    window.addEventListener('resize', () => this.resizeEvent());
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('MDCDrawer:closed', this._handleDrawerClosed);
+    window.removeEventListener('resize', this.resizeEvent);
+  }
+
+  protected renderSection() {
+    return this.sectionName
+      ? html`<div class="current-section">
+          <slot name="section-action"></slot>
+          <span class="current-section-name">${this.sectionName}</span>
+        </div>`
+      : nothing;
+  }
+
+  protected renderMain() {
+    return this.contained
+      ? html`<cv-card class="wrapper-card"><slot></slot></cv-card>`
+      : html`<slot></slot>`;
+  }
+
+  override render() {
+    const dismissible = this.type === 'dismissible' || this.type === 'modal';
+    const modal = this.type === 'modal';
+    const classes = {
+      'cov-drawer--forced-open': this.forcedOpen,
+      'cov-drawer--open': this.drawerOpen || this.forcedOpen,
+      'cov-drawer--hovered': this.hovered,
+      'cov-help--open': this.helpOpen,
+      'cov-help--closed': !this.helpOpen,
+      'cov-help--resizing': this._resizing,
+      'cov-content--full-width': this.fullWidth,
+    };
+    const drawerClasses = {
+      'mdc-drawer--dismissible': dismissible,
+      'mdc-drawer--modal': modal,
+    };
+
+    const scrim = modal
+      ? html`<div
+          class="mdc-drawer-scrim"
+          @click="${this._handleScrimClick}"
+        ></div>`
+      : nothing;
+
+    return html`
+      <div class="app-shell ${classMap(classes)}">
+        <span class="header"
+          ><cv-top-app-bar-fixed centerTitle>
+            <cv-icon-button
+              class="toggle-drawer"
+              @click=${this._handleMenuClick}
+              slot="navigationIcon"
+              icon="menu"
+            ></cv-icon-button>
+            <span slot="title">${this.appName}</span>
+          </cv-top-app-bar-fixed>
+        </span>
+        <nav
+          class="navigation mdc-drawer ${classMap(drawerClasses)}"
+          @mouseenter="${this._handleNavMouseOver}"
+          @mouseleave="${this._handleNavMouseOut}"
+        >
+          <div class="navigation-toolbar">
+            <cv-icon-button
+              @click="${this._handleMenuClick}"
+              class="toggle-drawer"
+              icon="menu"
+            ></cv-icon-button>
+            <slot name="logo"></slot>
+          </div>
+          ${this.renderSection()}
+          <slot name="navigation"></slot>
+        </nav>
+        ${scrim}
+        <slot name="mini-list"></slot>
+        <div class="main mdc-drawer-app-content">
+          <div class="main-wrapper">
+            <slot name="user-menu"></slot>
+            ${this.renderMain()}
+          </div>
+        </div>
+        <div class="help" @mousedown="${this._startResizing}">
+          ${this.helpResizable
+            ? html`<div class="resize-handle"></div>`
+            : nothing}
+          <slot name="help"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+export default CovalentAppShell;

package/src/badge/badge.scss

@@ -0,0 +1,60 @@
+.cv-badge {
+  background-color: var(--cv-theme-negative);
+  border-radius: 11px;
+  box-sizing: border-box;
+  color: var(--cv-theme-on-negative);
+  display: inline-block;
+  font-family: var(--mdc-typography-caption-font-family);
+  font-size: var(--mdc-typography-caption-font-size);
+  font-weight: var(--mdc-typography-caption-font-weight);
+  line-height: var(--mdc-typography-caption-line-height);
+  height: 16px;
+  min-width: 16px;
+  padding: 0 4px;
+  position: absolute;
+  text-align: center;
+
+  &.small {
+    height: 2px;
+    padding: 2px;
+    min-width: 2px;
+  }
+
+  &.top-right {
+    top: var(--cv-badge-position-y, -2px);
+    right: var(--cv-badge-position-x, -2px);
+  }
+
+  &.top-left {
+    top: var(--cv-badge-position-y, -2px);
+    left: var(--cv-badge-position-x, -2px);
+  }
+
+  &.bottom-right {
+    bottom: var(--cv-badge-position-y, -2px);
+    right: var(--cv-badge-position-x, -2px);
+  }
+
+  &.bottom-left {
+    bottom: var(--cv-badge-position-y, -2px);
+    left: var(--cv-badge-position-x, -2px);
+  }
+
+  &.isolated {
+    position: relative;
+    inset: 0;
+  }
+}
+
+.cv-badge-container {
+  position: relative;
+  display: inline-flex;
+}
+
+.wrapped-content {
+  flex-grow: 1;
+}
+
+.hidden {
+  display: none;
+}

package/src/badge/badge.spec.ts

@@ -0,0 +1,40 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect, beforeAll } from 'vitest';
+import { CovalentBadge } from './badge';
+
+describe('Covalent Badge', () => {
+  let badgeElements: NodeListOf<CovalentBadge>;
+
+  beforeAll(() => {
+    document.body.innerHTML = `<cv-badge content="99"></cv-badge>
+      <cv-badge content="0" showZero="true"></cv-badge>
+      <cv-badge content="hello" size="small"></cv-badge>
+      <cv-badge content="1000" max="999"></cv-badge>
+      `;
+    badgeElements = document.body.querySelectorAll('cv-badge');
+  });
+
+  it('should work', () => {
+    expect(new CovalentBadge()).toBeDefined();
+  });
+
+  it('should show content', () => {
+    expect(badgeElements[0]?.shadowRoot?.innerHTML).toContain('99');
+  });
+
+  it('should show zero when showZero prop is true', () => {
+    expect(badgeElements[1]?.shadowRoot?.innerHTML).toContain('0');
+  });
+
+  it('should not show content when size is small', () => {
+    if (badgeElements[2]?.shadowRoot?.innerHTML) {
+      expect(badgeElements[2]?.shadowRoot?.innerHTML).not.toContain('hello');
+    }
+  });
+
+  it('should cap the content based on max prop', () => {
+    expect(badgeElements[3]?.shadowRoot?.innerHTML).toContain('999+');
+  });
+});

package/src/badge/badge.stories.js

@@ -0,0 +1,88 @@
+import './badge';
+
+import '../icon/icon';
+import '../list/list-item';
+import '../list/list';
+import '../typography/typography';
+
+export default {
+  title: 'Components/Badge',
+  argTypes: {
+    size: { options: ['large', 'small'], control: { type: 'select' } },
+    verticalAlignment: {
+      options: ['top', 'bottom'],
+      control: { type: 'select' },
+    },
+    horizontalAlignment: {
+      options: ['right', 'left'],
+      control: { type: 'select' },
+    },
+  },
+  args: {
+    content: 22,
+    max: 99,
+    size: 'large',
+    verticalAlignment: 'top',
+    horizontalAlignment: 'right',
+    showZero: true,
+    hideBadge: false,
+  },
+};
+
+const Template = ({
+  content,
+  max,
+  size,
+  showZero,
+  hideBadge,
+  verticalAlignment,
+  horizontalAlignment,
+}) => {
+  return `<cv-badge${content || content == 0 ? ` content=${content}` : ''}${
+    size ? ` size=${size}` : ''
+  }${max ? ` max=${max}` : ''}${
+    verticalAlignment ? ` verticalAlignment=${verticalAlignment}` : ''
+  }${horizontalAlignment ? ` horizontalAlignment=${horizontalAlignment}` : ''}${
+    showZero ? ' showZero' : ''
+  }${hideBadge ? ' hideBadge' : ''}>
+    <cv-icon style="font-size: 36px">chat<cv-icon>
+  </cv-badge>`;
+};
+
+const ListTemplate = () => {
+  return `
+  <div style="margin-bottom: 3em;">
+    <cv-typography scale="headline5">Basic</cv-typography>
+    <cv-badge content='Hello world'></cv-badge>
+  </div>
+  <cv-typography scale="headline5">Used in a list</cv-typography>
+  <cv-list>
+    <cv-list-item>
+      <span style="padding-right: 2em;">Item 1</span>
+      <cv-badge content=22 max=999></cv-badge>
+    </cv-list-item>
+    <cv-list-item>
+      <span style="padding-right: 2em;">Item 2</span>
+      <cv-badge content=1000 max=999></cv-badge>
+    </cv-list-item>
+  </cv-list>`;
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  content: 3,
+  max: 99,
+};
+
+export const LargeWithLimit = Template.bind({});
+LargeWithLimit.args = {
+  content: 9999,
+  max: 99,
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  size: 'small',
+};
+
+export const Basic = ListTemplate.bind({});

package/src/badge/badge.ts

@@ -0,0 +1,122 @@
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import styles from './badge.scss?inline';
+
+export type BadgeSize = 'small' | 'large';
+export type BadgeAlignmentVertical = 'top' | 'bottom';
+export type BadgeAlignmentHorizonatal = 'left' | 'right';
+
+/**
+ * Badge
+ *
+ * @slot - This element has a slot
+ */
+
+@customElement('cv-badge')
+export class CovalentBadge extends LitElement {
+  static override styles = [
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+
+  /**
+   * The content to be displayed in the badge
+   */
+  @property()
+  content?: number | string;
+
+  /**
+   * Caps the value of badge content
+   */
+  @property()
+  max?: number = 100;
+
+  /**
+   * Sets the size of the badge
+   * 'small' represents a dot to notify that something has changed without providing content
+   */
+  @property()
+  size?: BadgeSize = 'large';
+
+  /**
+   * Controls the visibility of the badge
+   */
+  @property({ type: Boolean, reflect: true })
+  hideBadge? = false;
+
+  /**
+   * Aligns the badge vertically in the wrapped element
+   */
+  @property()
+  verticalAlignment?: BadgeAlignmentVertical = 'top';
+
+  /**
+   * Aligns the badge horizontally in the wrapped element
+   */
+  @property()
+  horizontalAlignment?: BadgeAlignmentHorizonatal = 'right';
+
+  /**
+   * Shows the badge when count is zero
+   */
+  @property({ type: Boolean, reflect: true })
+  showZero?: boolean;
+
+  firstUpdated(): void {
+    const slot = this.renderRoot.querySelector('slot');
+
+    if (slot) {
+      const assignedNodes = slot.assignedNodes({
+        flatten: true,
+      }) as Element[];
+
+      // Filter out non-element nodes
+      const elements = assignedNodes.filter(
+        (node) => node.nodeType === Node.ELEMENT_NODE
+      );
+
+      if (!elements.length) {
+        const badge = this.renderRoot.querySelector('#badge-content');
+        badge?.classList?.add('isolated');
+      }
+    }
+  }
+
+  getContent(): number | string {
+    let content = this.content;
+    const numericContent = Number(content);
+    if (this.showZero && content == 0) {
+      content = content.toString();
+    } else if (!isNaN(numericContent) && this.max) {
+      content = numericContent > this.max ? `${this.max}+` : numericContent;
+    }
+    return content || '';
+  }
+
+  override render() {
+    const classes: { [key: string]: boolean } = {
+      'cv-badge': true,
+      small: this.size === 'small',
+      hidden: !!this.hideBadge || (!this.showZero && this.content == 0),
+    };
+    classes[`${this.verticalAlignment}-${this.horizontalAlignment}`] = true;
+    return html`
+      <div class="cv-badge-container">
+        <slot class="wrapped-content"></slot>
+        <span id="badge-content" class="${classMap(classes)}">
+          ${this.size !== 'small' ? this.getContent() : ''}
+        </span>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-badge': CovalentBadge;
+  }
+}
+
+export default CovalentBadge;