@kubex/zinc 0.0.2 → 1.0.0

package/src/components/header/header.scss

@@ -0,0 +1,244 @@
+@use "../../wc";
+
+:host {
+  display: block;
+}
+
+// TODO, update scss to match this bit and not the below
+.header {
+  flex-grow: 1;
+
+  // This isn't correct fix this also
+  .caption {
+    //padding: var(--zn-spacing-small) 0;
+    justify-content: space-between;
+    gap: var(--zn-spacing-2x-small);
+    max-width: 100%;
+  }
+
+  &__caption {
+    font-weight: var(--zn-font-weight-semibold);
+    font-size: var(--zn-font-size-large);
+    color: rgba(var(--zn-text-panel-title), 100%);
+    margin: 0;
+  }
+
+  &--has-breadcrumb {
+    .caption {
+      padding-top: 0;
+    }
+  }
+
+  // remove the padding on the nav
+  &--has-nav {
+    .caption {
+      padding-bottom: 0;
+    }
+  }
+}
+
+.caption__back {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: inherit;
+}
+
+.content {
+  padding: var(--zn-spacing-x-small) 0;
+}
+
+:host([transparent]) > div {
+  background-color: transparent;
+}
+
+:host([with-closer]) .content {
+  padding-right: 40px;
+}
+
+:host([navigation]) > div {
+  h1 {
+    padding-bottom: 0;
+  }
+}
+
+:host #nav-container {
+  gap: 0;
+}
+
+.alt-overlay {
+  display: none;
+}
+
+:host(.alt-pressed) {
+  .alt-overlay:empty {
+    display: none !important;
+  }
+
+  .alt-overlay {
+    display: flex;
+    gap: 10px;
+    align-items: flex-end;
+    position: absolute;
+    left: 0;
+    top: 10px;
+    padding: 6px 15px;
+    background: rgba(var(--zn-panel), 0.95);
+    z-index: 10;
+
+    a {
+      display: flex;
+    }
+
+    zn-icon:hover {
+      color: rgb(var(--zn-primary));
+      cursor: pointer;
+    }
+  }
+}
+
+
+.header {
+  display: flex;
+  flex-direction: column;
+  border-bottom-width: 1px;
+  // border-top-width: 1px;
+  overflow: hidden;
+  background-color: rgba(var(--zn-panel), var(--zn-panel-opacity));
+
+  .content {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    height: fit-content;
+    gap: 10px;
+    margin: 0 auto;
+    padding-left: var(--zn-spacing-medium);
+    padding-right: var(--zn-spacing-medium);
+  }
+
+  &__left {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    gap: 1px;
+    min-height: 43px;
+    flex-shrink: 0;
+  }
+
+  &__right {
+    flex-grow: 1;
+    flex-shrink: 1;
+    overflow: hidden;
+  }
+
+  &__description {
+    display: contents;
+    font-size: var(--zn-font-size-medium);
+    line-height: 28px;
+  }
+
+  .navless {
+    min-height: 10px;
+  }
+
+  .content {
+    position: relative; // For use on expanding actions
+    gap: 10px;
+  }
+
+  .breadcrumb {
+    flex-basis: 100%;
+    font-size: var(--zn-font-size-x-small);
+    font-weight: var(--zn-font-weight-semibold);
+    color: rgb(var(--zn-text));
+
+    display: flex;
+    align-items: center;
+    gap: var(--zn-spacing-2x-small);
+
+    &::slotted(a) {
+      font-size: 0.875rem;
+      color: inherit;
+      font-weight: var(--zn-font-weight-normal);
+      text-decoration: inherit;
+    }
+
+    &::slotted(a:hover) {
+      color: rgb(var(--zn-primary));
+    }
+
+    &::slotted(a:not(:last-of-type))::after {
+      content: '>';
+      margin-left: var(--zn-spacing-2x-small);
+      color: rgb(var(--zn-text-muted));
+    }
+  }
+
+  .caption {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    a {
+      display: flex;
+      align-items: center;
+      color: inherit;
+      text-decoration: none;
+    }
+
+    zn-icon {
+      cursor: pointer;
+
+      &:hover {
+        color: rgb(var(--zn-primary));
+      }
+    }
+  }
+
+  h1 {
+    flex-grow: 1;
+    font-size: 18px;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    color: rgb(var(--zn-text-page-title));
+    margin: 0;
+    font-weight: var(--zn-font-weight-medium);
+
+    @media screen and (min-width: var(--zn-container-lg)) {
+      font-size: var(--zn-font-size-large);
+    }
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  slot {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--zn-spacing-x-small);
+  }
+
+  slot[name="nav"] {
+    flex-basis: 100%;
+  }
+
+  slot[name="actions"] {
+    justify-content: end;
+    flex-wrap: nowrap;
+  }
+
+  slot[name="actions"]::slotted(zn-button-menu) {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+
+  .actions {
+    display: flex;
+  }
+}

package/src/components/header/header.test.ts

@@ -0,0 +1,10 @@
+import '../../../dist/zn.min.js';
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('<zn-header>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html` <zn-header></zn-header> `);
+
+    expect(el).to.exist;
+  });
+});

package/src/components/header/index.ts

@@ -0,0 +1,12 @@
+import ZnHeader from './header.component';
+
+export * from './header.component';
+export default ZnHeader;
+
+ZnHeader.define('zn-header');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-header': ZnHeader;
+  }
+}

package/src/components/hover-container/hover-container.component.ts

@@ -0,0 +1,214 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {property, query} from 'lit/decorators.js';
+import {waitForEvent} from "../../internal/event";
+import {watch} from '../../internal/watch';
+import ZincElement from '../../internal/zinc-element';
+import type Popup from "../popup";
+
+import styles from './hover-container.scss';
+
+/**
+ * @summary The HoverContainer component is used to display additional information when a user hovers over or clicks
+ * on an element.
+ *
+ * @documentation https://zinc.style/components/hover-container
+ * @status experimental
+ * @since 1.0
+ *
+ * @event zn-show - Emitted when the hover-container is shown.
+ * @event zn-after-show - Emitted after the hover-container is shown.
+ * @event zn-hide - Emitted when the hover-container is hidden.
+ * @event zn-after-hide - Emitted after the hover-container is hidden.
+ *
+ * @slot - The content of the hover-container
+ * @slot anchor - The anchor the hover-container is attached to.
+ */
+export default class ZnHoverContainer extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  private hoverTimeout: number;
+  private closeWatcher: CloseWatcher | null;
+
+  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
+  @query('.hover-container__body') body: HTMLElement;
+  @query('zn-popup') popup: Popup;
+
+  @property() content = '';
+
+  @property() placement: | 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' |
+    'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' = 'top';
+
+  @property({type: Boolean, reflect: true}) disabled = false;
+
+  @property({type: Number}) distance = 4;
+
+  @property({type: Boolean, reflect: true}) open = false;
+
+  @property({type: Number}) skidding = 0;
+
+  @property() trigger = 'hover focus';
+
+  @property({type: Boolean}) hoist = true;
+
+  constructor() {
+    super();
+    this.addEventListener('blur', this.handleBlur, true);
+    this.addEventListener('focus', this.handleFocus, true);
+    this.addEventListener('click', this.handleClick);
+    this.addEventListener('mouseover', this.handleMouseOver);
+    this.addEventListener('mouseout', this.handleMouseOut);
+  }
+
+  disconnectedCallback() {
+    this.closeWatcher?.destroy();
+    document.removeEventListener('keydown', this.handleDocumentKeyDown);
+  }
+
+  protected firstUpdated(_changedProperties: PropertyValues) {
+    this.body.hidden = !this.open;
+
+    if (this.open) {
+      this.popup.active = true;
+      this.popup.reposition();
+    }
+
+    super.firstUpdated(_changedProperties);
+  }
+
+  private hasTrigger(triggerType: string) {
+    const triggers = this.trigger.split(' ');
+    return triggers.includes(triggerType);
+  }
+
+  private handleBlur = () => {
+    if (this.hasTrigger('focus')) {
+      this.hide();
+    }
+  };
+
+  private handleClick = () => {
+    if (this.hasTrigger('click')) {
+      if (this.open) {
+        this.hide()
+      }
+      this.show();
+    }
+  };
+
+  private handleFocus = () => {
+    if (this.hasTrigger('focus')) {
+      this.show();
+    }
+  };
+
+  private handleDocumentKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      event.stopPropagation();
+      this.hide();
+    }
+  };
+
+  private handleMouseOver() {
+    if (this.hasTrigger('hover')) {
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = window.setTimeout(() => this.show(), 0);
+    }
+  }
+
+  private handleMouseOut() {
+    if (this.hasTrigger('hover')) {
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = window.setTimeout(() => this.hide(), 0);
+    }
+  }
+
+  @watch('open', {waitUntilFirstUpdate: true})
+  handleOpenChange() {
+    if (this.open) {
+      if (this.disabled) {
+        return;
+      }
+
+      this.emit('zn-show');
+      if ('CloseWatcher' in window) {
+        this.closeWatcher?.destroy();
+        this.closeWatcher = new CloseWatcher();
+        this.closeWatcher.onclose = () => {
+          this.hide();
+        };
+      } else {
+        document.addEventListener('keydown', this.handleDocumentKeyDown);
+      }
+      this.body.hidden = false;
+      this.popup.active = true;
+      this.popup.reposition();
+      this.emit('zn-after-show');
+    } else {
+      this.emit('zn-hide');
+      this.popup.active = false;
+      this.body.hidden = true;
+      this.emit('zn-after-hide');
+    }
+  }
+
+  @watch(['content', 'distance', 'hoist', 'placement', 'skidding'])
+  async handleOptionsChange() {
+    if (this.hasUpdated) {
+      await this.updateComplete;
+      this.popup.reposition();
+    }
+  }
+
+  @watch('disabled')
+  handleDisabledChange() {
+    if (this.disabled && this.open) {
+      this.hide();
+    }
+  }
+
+  async show() {
+    if (this.open) {
+      return undefined;
+    }
+
+    this.open = true;
+    return waitForEvent(this, 'zn-after-show');
+  }
+
+  hide() {
+    if (!this.open) {
+      return;
+    }
+
+    this.open = false;
+    waitForEvent(this, 'zn-after-hide');
+  }
+
+  render() {
+    return html`
+      <zn-popup
+        part="base"
+        exportparts="popup:base__popup,arrow:base__arrow"
+        class=${classMap({
+          'hover-container': true,
+          'hover-container--open': this.open,
+          [`hover-container--${this.placement}`]: this.placement
+        })}
+        placement=${this.placement}
+        distance=${this.distance}
+        skidding=${this.skidding}
+        strategy=${this.hoist ? 'fixed' : 'absolute'}
+        flip
+        shift
+        hover-bridge>
+        <slot slot="anchor"></slot>
+        <div part="body" id="hover-container" class="hover-container__body"
+             role="hover-container"
+             aria-live=${this.open ? 'polite' : 'off'}
+             aria-label="hover-container">
+          <slot name="content">${this.content}</slot>
+        </div>
+      </zn-popup>`;
+  }
+}

package/src/components/hover-container/hover-container.scss

@@ -0,0 +1,59 @@
+@use "../../wc";
+
+
+:host {
+  --width: 20rem;
+  --header-spacing: var(--zn-spacing-large) var(--zn-spacing-large) var(--zn-spacing-medium);
+  --body-spacing: var(--zn-spacing-x-small) var(--zn-spacing-large);
+  --footer-spacing: var(--zn-spacing-large);
+  --icon-background-color: var(--zn-color-primary-200);
+  --icon-color: var(--zn-color-primary-600);
+  --caption-color: var(--zn-color-primary-600);
+
+  display: contents;
+}
+
+.hover-container--top::part(popup) {
+  transform-origin: bottom;
+}
+
+.hover-container--bottom::part(popup) {
+  transform-origin: top;
+}
+
+.hover-container--left::part(popup) {
+  transform-origin: right;
+}
+
+.hover-container--right::part(popup) {
+  transform-origin: left;
+}
+
+slot[slot='anchor'] {
+  cursor: pointer;
+}
+
+.hover-container__body {
+  flex-direction: column;
+  z-index: 2;
+  background-color: var(--zn-panel-background-color);
+  border-radius: var(--zn-border-radius-large);
+  border: 1px solid rgb(var(--zn-border-color));
+  box-shadow: var(--zn-shadow-x-large);
+  width: var(--width);
+  max-width: calc(100% - var(--zn-spacing-2x-large));
+  max-height: calc(100% - var(--zn-spacing-2x-large));
+
+  ::slotted(*) {
+    flex: 1 1 auto;
+    display: block;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    color: var(--zn-color-text-default);
+    font-size: var(--zn-font-size-medium);
+    font-weight: var(--zn-font-weight-normal);
+    letter-spacing: var(--zn-tracking-normal);
+    line-height: var(--zn-line-height-dense);
+  }
+}
+

package/src/components/hover-container/hover-container.ts

@@ -0,0 +1,10 @@
+import '../../../dist/zn.min.js';
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('<zn-hover-container>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html` <zn-hover-container></zn-hover-container> `);
+
+    expect(el).to.exist;
+  });
+});

package/src/components/hover-container/index.ts

@@ -0,0 +1,12 @@
+import ZnHoverContainer from './hover-container.component';
+
+export * from './hover-container.component';
+export default ZnHoverContainer;
+
+ZnHoverContainer.define('zn-hover-container');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-hover-container': ZnHoverContainer;
+  }
+}