@kubex/zinc 0.0.2 → 1.0.0

package/src/components/note/note.component.ts

@@ -0,0 +1,60 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type colors} from "../data-select/providers/color-data-provider";
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property} from "lit/decorators.js";
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './note.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/note
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-example
+ *
+ * @event zn-event-name - Emitted as an example.
+ *
+ * @slot caption - The note's caption.
+ * @slot date - The note's date.
+ * @slot body - The note's body.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --example - An example CSS custom property.
+ */
+export default class ZnNote extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property({reflect: true}) color: typeof colors[number];
+  @property({reflect: true}) caption: string = '';
+  @property({reflect: true}) date: string = '';
+  @property({type: HTMLElement, reflect: true}) body: string = '';
+
+  protected render(): unknown {
+    return html`
+      <div class="${classMap({
+        'note': true,
+        'note--red': this.color === 'red',
+        'note--blue': this.color === 'blue',
+        'note--orange': this.color === 'orange',
+        'note--yellow': this.color === 'yellow',
+        'note--indigo': this.color === 'indigo',
+        'note--violet': this.color === 'violet',
+        'note--green': this.color === 'green',
+        'note--pink': this.color === 'pink',
+        'note--gray': this.color === 'gray',
+      })}">
+        <div class="note__header">
+          <slot name="caption" class="note__header__caption">${this.caption}</slot>
+          <slot name="date" class="note__header__date">
+            <small>${this.date}</small>
+          </slot>
+        </div>
+        <slot class="note__body"></slot>
+        <slot name="footer" class="note__footer"></slot>
+      </div>
+    `;
+  }
+}

package/src/components/note/note.scss

@@ -0,0 +1,69 @@
+@use "../../wc";
+
+$colors: (
+  red: var(--zn-color-red-600),
+  blue: var(--zn-color-blue-500),
+  orange: var(--zn-color-orange-500),
+  yellow: var(--zn-color-yellow-400),
+  indigo: var(--zn-color-indigo-400),
+  violet: var(--zn-color-violet-600),
+  green: var(--zn-color-green-500),
+  pink: var(--zn-color-pink-400),
+  gray: var(--zn-color-gray-500)
+);
+
+:host {
+  display: block;
+}
+
+.note {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  flex-wrap: nowrap;
+  padding: var(--zn-spacing-x-small) var(--zn-spacing-small);
+  gap: var(--zn-spacing-3x-small);
+  border-left: 3px solid transparent;
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+
+    &__caption {
+      font-weight: var(--zn-font-weight-semibold);
+      font-size: var(--zn-font-size-medium);
+      color: rgb(var(--zn-text-heading));
+    }
+
+    &__date {
+      font-size: var(--zn-font-size-small);
+    }
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--zn-spacing-3x-small);
+    max-width: var(--zn-container-md);
+  }
+
+  @each $name, $color in $colors {
+    &--#{'' + $name} {
+      .note__header__caption {
+        color: hsl(from #{$color} h s 40%);
+      }
+
+      border-left: 3px solid #{$color};
+      background-color: hsla(from #{$color} h s l / 0.02);
+    }
+  }
+
+  &__footer {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--zn-spacing-x-small);
+  }
+}

package/src/components/note/note.test.ts

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

package/src/components/option/index.ts

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

package/src/components/option/option.component.ts

@@ -0,0 +1,152 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {LocalizeController} from "../../utilities/localize";
+import {property, query, state} from 'lit/decorators.js';
+import {watch} from '../../internal/watch';
+import ZincElement from '../../internal/zinc-element';
+import ZnIcon from "../icon";
+
+import styles from './option.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/option
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-icon
+ *
+ * @slot - The option's label.
+ * @slot prefix - Used to prepend an icon or similar element to the menu item.
+ * @slot suffix - Used to append an icon or similar element to the menu item.
+ *
+ * @csspart checked-option-icon - The checked option icon, an `<zn-icon>` element.
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The option's label.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ */
+export default class ZnOption extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+  static dependencies = {'zn-icon': ZnIcon};
+
+  private cachedTextLabel: string;
+  // @ts-expect-error - Controller is currently unused
+  private readonly localize = new LocalizeController(this);
+
+  @query('.option__label') defaultSlot: HTMLSlotElement;
+
+  @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)
+  @state() selected = false; // the option is selected and has aria-selected="true"
+  @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging
+
+  /**
+   * The option's value. When selected, the containing form control will receive this value. The value must be unique
+   * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
+   * multiple values.
+   */
+  @property({reflect: true}) value = '';
+
+  /** Draws the option in a disabled state, preventing selection. */
+  @property({type: Boolean, reflect: true}) disabled = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'option');
+    this.setAttribute('aria-selected', 'false');
+  }
+
+  private handleDefaultSlotChange() {
+    const textLabel = this.getTextLabel();
+
+    // Ignore the first time the label is set
+    if (typeof this.cachedTextLabel === 'undefined') {
+      this.cachedTextLabel = textLabel;
+      return;
+    }
+
+    // When the label changes, emit a slotchange event so parent controls see it
+    if (textLabel !== this.cachedTextLabel) {
+      this.cachedTextLabel = textLabel;
+      this.emit('slotchange', {bubbles: true, composed: false, cancelable: false});
+    }
+  }
+
+  private handleMouseEnter() {
+    this.hasHover = true;
+  }
+
+  private handleMouseLeave() {
+    this.hasHover = false;
+  }
+
+  @watch('disabled')
+  handleDisabledChange() {
+    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+  }
+
+  @watch('selected')
+  handleSelectedChange() {
+    this.setAttribute('aria-selected', this.selected ? 'true' : 'false');
+  }
+
+  @watch('value')
+  handleValueChange() {
+    // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers
+    // instead of requiring them to cast the value to a string.
+    if (typeof this.value !== 'string') {
+      this.value = String(this.value);
+    }
+
+    if (this.value.includes(' ')) {
+      console.error(`Option values cannot include a space. All spaces have been replaced with underscores.`, this);
+      this.value = this.value.replace(/ /g, '_');
+    }
+  }
+
+  /** Returns a plain text label based on the option's content. */
+  getTextLabel() {
+    const nodes = this.childNodes;
+    let label = '';
+
+    [...nodes].forEach(node => {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        if (!(node as HTMLElement).hasAttribute('slot')) {
+          label += (node as HTMLElement).textContent;
+        }
+      }
+
+      if (node.nodeType === Node.TEXT_NODE) {
+        label += node.textContent;
+      }
+    });
+
+    return label.trim();
+  }
+
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+          option: true,
+          'option--current': this.current,
+          'option--disabled': this.disabled,
+          'option--selected': this.selected,
+          'option--hover': this.hasHover
+        })}
+        @mouseenter=${this.handleMouseEnter}
+        @mouseleave=${this.handleMouseLeave}>
+        <zn-icon
+          part="checked-option-icon"
+          class="option__check"
+          src="check_small"
+          aria-hidden="true"
+        ></zn-icon>
+        <slot part="prefix" name="prefix" class="option__prefix"></slot>
+        <slot part="label" class="option__label" @slotchange=${this.handleDefaultSlotChange}></slot>
+        <slot part="suffix" name="suffix" class="option__suffix"></slot>
+      </div>
+    `;
+  }
+}

package/src/components/option/option.scss

@@ -0,0 +1,88 @@
+@use "../../wc";
+
+:host {
+  display: block;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+:host(:focus) {
+  outline: none;
+}
+
+.option {
+  position: relative;
+  display: flex;
+  align-items: center;
+  font-family: var(--zn-font-sans);
+  font-size: var(--zn-font-size-medium);
+  font-weight: var(--zn-font-weight-normal);
+  line-height: var(--zn-line-height-normal);
+  letter-spacing: var(--zn-letter-spacing-normal);
+  color: var(--zn-input-color);
+  padding: var(--zn-spacing-x-small) var(--zn-spacing-2x-large) var(--zn-spacing-x-small) var(--zn-spacing-2x-small);
+  transition: var(--zn-transition-fast) fill;
+  cursor: pointer;
+}
+
+.option--hover:not(.option--current):not(.option--disabled) {
+  background-color: var(--zn-color-primary-100);
+  color: var(--zn-input-color);
+}
+
+.option--current,
+.option--current.option--disabled {
+  background-color: var(--zn-color-primary-100);
+  color: var(--zn-input-color);
+  opacity: 1;
+}
+
+.option--disabled {
+  outline: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.option__label {
+  flex: 1 1 auto;
+  display: inline-block;
+  font-size: var(--zn-font-size-small);
+  line-height: var(--ts-leading-5);
+}
+
+.option .option__check {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  visibility: hidden;
+  padding-inline-start: 0.375rem;
+  padding-inline-end: 0.375rem;
+}
+
+.option--selected .option__check {
+  visibility: visible;
+}
+
+.option__prefix,
+.option__suffix {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+}
+
+.option__prefix::slotted(*) {
+  margin-inline-end: var(--zn-spacing-small);
+  font-size: var(--zn-font-size-large);
+}
+
+.option__suffix::slotted(*) {
+  margin-inline-start: var(--zn-spacing-small);
+}
+
+@media (forced-colors: active) {
+  :host(:hover:not([aria-disabled='true'])) .option {
+    outline: dashed 1px SelectedItem;
+    outline-offset: -1px;
+  }
+}

package/src/components/option/option.test.ts

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

package/src/components/order-table/index.ts

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