@redvars/peacock 3.3.0 → 3.3.2

package/src/peacock-loader.ts

@@ -22,7 +22,7 @@ import { Checkbox } from './checkbox/checkbox.js';
 
 import { Menu } from './menu/menu/menu.js';
 import { MenuItem } from './menu/menu-item/menu-item.js';
-import { MenuList } from './menu/menu-list/menu-list.js';
+import { SubMenu } from './menu/sub-menu/sub-menu.js';
 
 import { Accordion } from './accordion/accordion.js';
 import { Link } from './link/link.js';
@@ -48,10 +48,14 @@ import { Tabs } from './tabs/tabs.js';
 import { Tab } from './tabs/tab.js';
 import { TabPanel } from './tabs/tab-panel.js';
 import { Slider } from './slider/slider.js';
-
+import { Table } from './table/table.js';
+import { Pagination } from './pagination/pagination.js';
+import { TreeView } from './tree-view/tree-view.js';
+import { Card } from './card/card.js';
+import { Snackbar } from './snackbar/snackbar.js';
 
 const distDirectory = `${import.meta.url}/..`;
-await loadCSS(`${distDirectory  }/assets/styles.css`);
+await loadCSS(`${distDirectory}/assets/styles.css`);
 
 /*
 import tooltipStyles from './popover/tooltip.css-component.scss';
@@ -122,7 +126,7 @@ const loaderConfig: LoaderConfig = {
       CustomElementClass: TabGroup,
     },
     'wc-tab': {
-      CustomElementClass: Tab
+      CustomElementClass: Tab,
     },
     'wc-tab-panel': {
       CustomElementClass: TabPanel,
@@ -133,6 +137,9 @@ const loaderConfig: LoaderConfig = {
     'wc-chip': {
       CustomElementClass: Chip,
     },
+    'wc-card': {
+      CustomElementClass: Card,
+    },
     'wc-tag': {
       CustomElementClass: Tag,
     },
@@ -194,30 +201,51 @@ const loaderConfig: LoaderConfig = {
     'wc-empty-state': {
       CustomElementClass: EmptyState,
     },
-    'wc-base-menu': {
+    'wc-menu': {
       CustomElementClass: Menu,
     },
     'wc-menu-item': {
       CustomElementClass: MenuItem,
     },
-    'wc-menu-list': {
-      CustomElementClass: MenuList,
+    'wc-sub-menu': {
+      CustomElementClass: SubMenu,
     },
     'wc-container': {
-      CustomElementClass: Container
+      CustomElementClass: Container,
     },
     'wc-image': {
-      CustomElementClass: Image
+      CustomElementClass: Image,
     },
     'wc-slider': {
-      CustomElementClass: Slider
+      CustomElementClass: Slider,
+    },
+    'wc-table': {
+      CustomElementClass: Table,
+    },
+    'wc-pagination': {
+      CustomElementClass: Pagination,
+    },
+    'wc-tree-view': {
+      CustomElementClass: TreeView,
+    },
+    'wc-tree-node': {
+      CustomElementClass: TreeView.Node,
+    },
+    'wc-snackbar': {
+      CustomElementClass: Snackbar,
     },
     'wc-chart-doughnut': {
       importPath: `${distDirectory}/chart-doughnut.js`,
     },
     'wc-chart-pie': {
       importPath: `${distDirectory}/chart-pie.js`,
-    }
+    },
+    'wc-chart-bar': {
+      importPath: `${distDirectory}/chart-bar.js`,
+    },
+    'wc-chart-stacked-bar': {
+      importPath: `${distDirectory}/chart-stacked-bar.js`,
+    },
   },
 };
 

package/src/popover/PopoverController.ts

@@ -22,19 +22,25 @@ export class PopoverController implements ReactiveController {
   }
 
   // Set up the floating logic
-  async updatePosition(reference: HTMLElement | null, floating: HTMLElement) {
+  async updatePosition(
+    reference: HTMLElement | null,
+    floating: HTMLElement,
+    options?: {
+      placement?: Placement;
+      offset?: number;
+    },
+  ) {
     if (!reference) return;
 
     this.cleanup?.();
 
+    const placement = options?.placement ?? this.options.placement;
+    const spacing = options?.offset ?? this.options.offset;
+
     this.cleanup = autoUpdate(reference, floating, async () => {
       const { x, y } = await computePosition(reference, floating, {
-        placement: this.options.placement,
-        middleware: [
-          offset(this.options.offset),
-          flip(),
-          shift({ padding: 4 }),
-        ],
+        placement,
+        middleware: [offset(spacing), flip(), shift({ padding: 4 })],
       });
 
       Object.assign(floating.style, {

package/src/snackbar/demo/index.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang='en-GB'>
+<head>
+  <meta charset='utf-8'>
+  <meta name='viewport' content='width=device-width, initial-scale=1.0, viewport-fit=cover' />
+  <link rel='stylesheet' href='/dist/assets/styles/tokens.css' />
+  <style>
+    body {
+      background: #fafafa;
+      padding: 2rem;
+      display: grid;
+      gap: 1rem;
+    }
+  </style>
+</head>
+<body>
+  <wc-snackbar open message="File archived" action-label="Undo"></wc-snackbar>
+  <wc-snackbar open multiline show-close-icon>
+    Network connection was lost. Please try again when you are back online.
+  </wc-snackbar>
+
+  <script type='module'>
+    import { Snackbar, Icon } from '/dist/index.js';
+
+    window.customElements.define('wc-snackbar', Snackbar);
+    window.customElements.define('wc-icon', Icon);
+  </script>
+</body>
+</html>

package/src/snackbar/index.ts

@@ -0,0 +1 @@
+export { Snackbar } from './snackbar.js';

package/src/snackbar/snackbar.scss

@@ -0,0 +1,73 @@
+@use "../../scss/mixin";
+
+@include mixin.base-styles;
+
+:host {
+  display: inline-flex;
+  max-width: 42rem;
+  min-width: 21.5rem;
+
+  --snackbar-container-color: var(--color-inverse-surface);
+  --snackbar-label-text-color: var(--color-inverse-on-surface);
+  --snackbar-action-text-color: var(--color-inverse-primary);
+  --snackbar-close-icon-color: var(--color-inverse-on-surface);
+  --snackbar-border-radius: var(--shape-corner-extra-small);
+}
+
+.snackbar {
+  @include mixin.get-typography(body-medium);
+  align-items: center;
+  background-color: var(--snackbar-container-color);
+  border-radius: var(--snackbar-border-radius);
+  color: var(--snackbar-label-text-color);
+  display: inline-flex;
+  gap: var(--spacing-100);
+  min-height: 3rem;
+  opacity: 0;
+  padding: var(--spacing-100) var(--spacing-200);
+  pointer-events: none;
+  transform: translateY(0.5rem);
+  transition: opacity var(--duration-short2) var(--easing-standard),
+    transform var(--duration-short2) var(--easing-standard);
+}
+
+.snackbar.open {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.label {
+  flex: 1 1 auto;
+  color: inherit;
+}
+
+.action,
+.close {
+  @include mixin.get-typography(label-large);
+  align-items: center;
+  background: transparent;
+  border: none;
+  color: var(--snackbar-action-text-color);
+  cursor: pointer;
+  display: inline-flex;
+  justify-content: center;
+  margin: 0;
+  min-height: 2rem;
+  min-width: 2rem;
+  padding: 0 var(--spacing-100);
+}
+
+.close {
+  color: var(--snackbar-close-icon-color);
+  padding: 0;
+}
+
+.close wc-icon {
+  --icon-size: 1.125rem;
+  color: inherit;
+}
+
+.snackbar.multiline {
+  align-items: flex-start;
+}

package/src/snackbar/snackbar.ts

@@ -0,0 +1,151 @@
+import { LitElement, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import styles from './snackbar.scss';
+
+type SnackbarCloseReason = 'timeout' | 'dismiss' | 'action' | 'programmatic';
+
+/**
+ * @label Snackbar
+ * @tag wc-snackbar
+ * @rawTag snackbar
+ * @summary Snackbars provide brief messages about app processes at the bottom of the screen.
+ *
+ * @cssprop --snackbar-container-color - Container color for the snackbar.
+ * @cssprop --snackbar-label-text-color - Label text color for the snackbar.
+ * @cssprop --snackbar-action-text-color - Action text color.
+ * @cssprop --snackbar-close-icon-color - Close icon color.
+ * @cssprop --snackbar-border-radius - Border radius of the snackbar surface.
+ *
+ * @example
+ * ```html
+ * <wc-snackbar open message="Message archived" action-label="Undo"></wc-snackbar>
+ * ```
+ * @tags display, feedback
+ */
+export class Snackbar extends LitElement {
+  static styles = [styles];
+
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  @property({ type: String }) message = '';
+
+  @property({ type: String, attribute: 'action-label' }) actionLabel = '';
+
+  @property({ type: Boolean, attribute: 'show-close-icon' })
+  showCloseIcon = false;
+
+  @property({ type: Number }) duration = 4000;
+
+  @property({ type: Boolean, reflect: true }) multiline = false;
+
+  private hideTimer: ReturnType<typeof setTimeout> | null = null;
+
+  show() {
+    this.open = true;
+  }
+
+  hide() {
+    this.close('programmatic');
+  }
+
+  private close(reason: SnackbarCloseReason) {
+    if (!this.open) {
+      return;
+    }
+
+    this.open = false;
+    this.dispatchEvent(
+      new CustomEvent('snackbar-close', {
+        detail: { reason },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private dispatchActionEvent() {
+    this.dispatchEvent(
+      new CustomEvent('snackbar-action', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private handleActionClick() {
+    this.dispatchActionEvent();
+    this.close('action');
+  }
+
+  private handleCloseClick() {
+    this.close('dismiss');
+  }
+
+  private clearTimer() {
+    if (this.hideTimer !== null) {
+      clearTimeout(this.hideTimer);
+      this.hideTimer = null;
+    }
+  }
+
+  private scheduleAutoHide() {
+    this.clearTimer();
+    if (!this.open || this.duration <= 0) {
+      return;
+    }
+
+    this.hideTimer = setTimeout(() => {
+      this.close('timeout');
+    }, this.duration);
+  }
+
+  protected updated(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('open')) {
+      this.scheduleAutoHide();
+    }
+  }
+
+  disconnectedCallback() {
+    this.clearTimer();
+    super.disconnectedCallback();
+  }
+
+  render() {
+    const liveRole =
+      this.actionLabel || this.showCloseIcon ? 'alert' : 'status';
+
+    return html`
+      <div
+        class=${classMap({
+          snackbar: true,
+          open: this.open,
+          multiline: this.multiline,
+        })}
+        role=${liveRole}
+        aria-live="polite"
+      >
+        <div class="label">
+          <slot>${this.message}</slot>
+        </div>
+
+        ${this.actionLabel
+          ? html`<button class="action" type="button" @click=${this.handleActionClick}>
+              ${this.actionLabel}
+            </button>`
+          : nothing}
+
+        ${this.showCloseIcon
+          ? html`<button
+              class="close"
+              type="button"
+              aria-label="Dismiss notification"
+              @click=${this.handleCloseClick}
+            >
+              <wc-icon name="close"></wc-icon>
+            </button>`
+          : nothing}
+      </div>
+    `;
+  }
+}

package/src/table/index.ts

@@ -0,0 +1 @@
+export { Table } from './table.js';

package/src/table/table.scss

@@ -0,0 +1,174 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+  height: 100%;
+  min-height: 20em;
+  --table-border-color: var(--color-outline-variant);
+  --table-border: 1px solid var(--table-border-color);
+  --table-col-content-padding: var(--spacing-150, 0.75rem) var(--spacing-200, 1rem);
+}
+
+.table {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-surface, #fff);
+
+  @include mixin.get-typography-not-important('body-medium');
+
+  .table-scroll-container {
+    position: relative;
+    overflow: auto;
+    height: 100%;
+  }
+
+  .empty-table {
+    height: 80%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .empty-state {
+      width: 10rem;
+    }
+  }
+
+  wc-pagination {
+    border-top: 1px solid var(--table-border-color);
+  }
+
+  &.horizontal-scrolled {
+    .fixed-columns::after {
+      box-shadow: 10px 0 20px -20px var(--color-outline) inset;
+      content: ' ';
+      height: 100%;
+      position: absolute;
+      top: 0;
+      right: -20px;
+      width: 20px;
+    }
+  }
+}
+
+.row {
+  display: flex;
+  box-sizing: border-box;
+  width: max-content;
+  min-width: 100%;
+
+  .columns-container {
+    display: flex;
+  }
+
+  .col {
+    margin: 0;
+    color: var(--color-on-surface);
+    flex-shrink: 0;
+
+    .col-content {
+      display: flex;
+      align-items: center;
+      height: 100%;
+
+      .col-text {
+        padding: var(--table-col-content-padding);
+        flex: 1;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      .col-template {
+        width: 100%;
+      }
+
+      .col-action {
+        --button-border-radius: 0;
+
+        &.has-focus {
+          z-index: 12;
+        }
+      }
+
+      .checkbox {
+        padding: 0 var(--spacing-100, 0.5rem);
+      }
+    }
+
+    &.center .col-content {
+      justify-content: center;
+    }
+
+    &:last-child {
+      flex: 1;
+    }
+  }
+
+  .fixed-columns {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  .scrollable-columns {
+    flex: 0 0 auto;
+  }
+}
+
+.header {
+  z-index: 2;
+  position: sticky;
+  top: 0;
+
+  @include mixin.get-typography-not-important('label-medium');
+
+  .col {
+    background: var(--color-surface-variant, #f4f4f4);
+
+    &.sort {
+      background: var(--color-secondary-container, #e8eaf6);
+    }
+  }
+}
+
+.body {
+  .row {
+    .col {
+      cursor: pointer;
+      background: var(--color-surface, #fff);
+      border-bottom: 1px solid var(--color-surface-variant, #f4f4f4);
+
+      &.col-checkbox .col-content {
+        border: 0;
+      }
+
+      .col-content {
+        border: 2px solid transparent;
+        border-bottom: 1px solid transparent;
+
+        .col-text {
+          text-wrap: wrap;
+        }
+      }
+
+      &:focus {
+        outline: none;
+        border-bottom-color: var(--color-primary);
+        z-index: 1;
+
+        .col-content {
+          border-color: var(--color-primary);
+        }
+      }
+    }
+
+    &:hover {
+      .col {
+        background-color: var(--color-surface-container-low, #f8f8f8);
+      }
+    }
+  }
+}