@kubex/zinc 0.0.2 → 1.0.0

package/src/components/file/file.scss

@@ -0,0 +1,200 @@
+@use "../../wc";
+@use "../../form-control";
+
+:host {
+  display: block;
+}
+
+.input__control {
+  /**
+   * Visually hide the input type=file without display:none
+   * This is necessary for accessibility reasons and so the native html input validation popup
+   * is shown.
+   */
+  border: 0;
+  clip-path: inset(50%);
+  height: 1px;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.form-control--droparea .input__control {
+  /* move the input into the center, so the native validation popup is centered to the droparea */
+  left: 50%;
+}
+
+.form-control-input {
+  /* needed, so the native validation popup is centered correctly */
+  position: relative;
+}
+
+/* Regular Input with button only */
+.button__wrapper {
+  align-items: center;
+  display: flex;
+  gap: var(--zn-input-spacing-medium);
+}
+
+.form-control--small .button__wrapper {
+  gap: var(--zn-input-spacing-small);
+}
+
+:host([size="large"]) .button__wrapper {
+  gap: var(--zn-input-spacing-large);
+}
+
+/**
+ * The value of the chosen file(s) or the placeholder text
+ */
+.input__value {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--zn-spacing-small);
+  color: var(--zn-input-color);
+  font-size: var(--zn-input-label-font-size-medium);
+}
+
+.input__value.input__value--hidden {
+  display: none;
+}
+
+.input__delete {
+  cursor: pointer;
+  color: var(--zn-input-color);
+  font-size: var(--zn-input-label-font-size-medium);
+
+  &:hover {
+    color: var(--zn-color-primary-600);
+  }
+}
+
+.input__value--placeholder {
+  color: var(--zn-input-help-text-color);
+}
+
+.form-control--small .input__value {
+  font-size: var(--zn-input-label-font-size-small);
+}
+
+.form-control--large .input__value {
+  font-size: var(--zn-input-label-font-size-large);
+}
+
+/**
+ * Special case for regular inputs:
+ * When the user uses drag and drop, highlight the button with the primary color
+ */
+.form-control--user-dragging:not([disabled]) .button::part(base) {
+  background: none;
+  border-color: var(--zn-color-primary-900);
+  color: var(--zn-color-primary-900);
+}
+
+/* Drop Area */
+.droparea {
+  --highlight-color: var(--zn-color-primary-600);
+
+  border: 2px dashed var(--zn-input-border-color);
+  font: var(--zn-font-size-medium);
+  padding: var(--zn-spacing-x-large) var(--zn-spacing-large);
+  transition: var(--zn-transition-medium) background,
+  var(--zn-transition-medium) border-color;
+}
+
+.droparea:focus-visible {
+  border: 2px dashed var(--zn-color-primary-600);
+  outline: var(--zn-focus-ring);
+  outline-offset: var(--zn-focus-ring-offset);
+}
+
+/* Adjust the highlight to match an inactive item */
+:host([disabled]) .droparea {
+  --highlight-color: var(--zn-color-neutral-600);
+}
+
+:host([disabled]) .input__value {
+  display: none;
+}
+
+.droparea__background {
+  align-items: center;
+  display: flex;
+  gap: var(--zn-spacing-x-small);
+  padding: var(--zn-spacing-x-small) var(--zn-spacing-medium);
+}
+
+.droparea__icon {
+  align-items: center;
+  color: var(--highlight-color);
+  display: flex;
+  font-size: var(--zn-spacing-3x-large);
+}
+
+.file-wrapper {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.droparea__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--zn-spacing-3x-small);
+  margin: 0;
+}
+
+.droparea__text strong {
+  color: var(--highlight-color);
+  font-weight: var(--zn-font-weight-bold);
+}
+
+/* Sizes */
+/* stylelint-disable-next-line no-descending-specificity */
+.form-control--small .droparea {
+  font: var(--zn-font-size-small);
+}
+
+.form-control--small .droparea__icon {
+  font-size: var(--zn-spacing-2x-large)
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.form-control--large .droparea {
+  font: var(--zn-font-size-large);
+}
+
+.form-control--large .droparea__icon {
+  font-size: var(--zn-spacing-4x-large)
+}
+
+/* Disabled Styles */
+:host([disabled]) .droparea,
+:host([disabled]) .input__value {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:host(:not([disabled])) .form-control--user-dragging .droparea {
+  background: var(--zn-color-primary-50);
+  border: 2px solid var(--zn-color-primary-600);
+  cursor: pointer;
+}
+
+:host(:not([disabled])) .droparea:not(:focus-visible):hover {
+  --highlight-color: var(--zn-color-primary-800);
+
+  border: 2px dashed var(--zn-color-primary-700);
+  background-color: var(--zn-color-primary-50);
+  cursor: pointer;
+}
+
+/* Validation */
+/* stylelint-disable-next-line no-descending-specificity */
+:host([data-user-invalid]:not([disabled])) .droparea {
+  border: 2px dashed var(--zn-color-error);
+}

package/src/components/file/file.test.ts

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

package/src/components/file/index.ts

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

package/src/components/form-group/form-group.component.ts

@@ -0,0 +1,93 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {HasSlotController} from "../../internal/slot";
+import {property} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './form-group.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/form-group
+ * @status experimental
+ * @since 1.0
+ *
+ * @slot - The default slot.
+ *
+ */
+export default class ZnFormGroup extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
+
+  /**
+   * The form group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
+   * instead.
+   */
+  @property() label = '';
+
+  /**
+   * Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the
+   * `label-tooltip` slot instead.
+   */
+  @property({attribute: 'label-tooltip'}) labelTooltip = '';
+
+  /** The form groups help text. If you need to display HTML, use the `help-text` slot instead. */
+  @property({attribute: 'help-text'}) helpText = '';
+
+
+  render() {
+    const hasLabelSlot = this.hasSlotController.test('label');
+    const hasLabelTooltipSlot = this.hasSlotController.test('label-tooltip');
+    const hasHelpTextSlot = this.hasSlotController.test('help-text');
+    const hasLabel = this.label ? true : hasLabelSlot;
+    const hasLabelTooltip = this.labelTooltip ? true : hasLabelTooltipSlot;
+    const hasHelpText = this.helpText ? true : hasHelpTextSlot;
+
+    return html`
+      <fieldset
+        part="form-control"
+        class=${classMap({
+          'form-control': true,
+          'form-control--has-label': hasLabel,
+          'form-control--has-label-tooltip': hasLabelTooltip,
+          'form-control--has-help-text': hasHelpText
+        })}
+        aria-labelledby="label"
+        aria-describedby="help-text">
+
+        <zn-cols layout="1,2" mc="2" part="form-control-container" class="form-control__container">
+          <div>
+            <label
+              part="form-control-label"
+              id="label"
+              class="form-control__label"
+              aria-hidden=${hasLabel ? 'false' : 'true'}>
+              <slot name="label">${this.label}</slot>
+              ${hasLabelTooltip
+                ? html`
+                  <zn-tooltip class="form-control--label-tooltip">
+                    <div slot="content">
+                      <slot name="label-tooltip">${this.labelTooltip}</slot>
+                    </div>
+                    <zn-icon src="info"></zn-icon>
+                  </zn-tooltip>`
+                : ''}
+            </label>
+
+            <div
+              part="form-control-help-text"
+              id="help-text"
+              class="form-control__help-text"
+              aria-hidden=${hasHelpText ? 'false' : 'true'}>
+              <slot name="help-text">${this.helpText}</slot>
+            </div>
+          </div>
+
+          <div part="form-control-input" class="form-control-input">
+            <slot></slot>
+          </div>
+        </zn-cols>
+      </fieldset>`;
+  }
+}

package/src/components/form-group/form-group.scss

@@ -0,0 +1,84 @@
+@use "../../wc";
+@use "../../form-control";
+
+:host {
+  display: block;
+  line-height: var(--zn-line-height-dense);
+  max-width: var(--zn-container-lg);
+}
+
+.form-control {
+  position: relative;
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.form-control__label {
+  padding: 0;
+}
+
+.form-control--has-label .form-control__label {
+  font-weight: var(--zn-font-weight-bold);
+  font-size: var(--zn-font-size-large);
+}
+
+.form-control__container {
+  --zn-col-basis: 200px;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.form-control-input {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--zn-spacing-medium) var(--zn-spacing-small);
+
+  @include wc.media-query(md) {
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
+
+.form-control-input > ::slotted(*) {
+  grid-column: span 6 / span 6;
+}
+
+.form-control-input > ::slotted([span="1"]) {
+  @include wc.media-query(md) {
+    grid-column: span 1 / span 1;
+  }
+}
+
+.form-control-input > ::slotted([span="2"]) {
+  @include wc.media-query(md) {
+    grid-column: span 2 / span 2;
+  }
+}
+
+.form-control-input > ::slotted([span="3"]) {
+  @include wc.media-query(md) {
+    grid-column: span 3 / span 3;
+  }
+}
+
+.form-control-input > ::slotted([span="4"]) {
+  @include wc.media-query(md) {
+    grid-column: span 4 / span 4;
+  }
+}
+
+.form-control-input > ::slotted([span="5"]) {
+  @include wc.media-query(md) {
+    grid-column: span 5 / span 5;
+  }
+}

package/src/components/form-group/form-group.test.ts

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

package/src/components/form-group/index.ts

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

package/src/components/header/header.component.ts

@@ -0,0 +1,186 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {HasSlotController} from "../../internal/slot";
+import {property} from 'lit/decorators.js';
+import {watch} from "../../internal/watch";
+import ZincElement from '../../internal/zinc-element';
+import type ZnNavbar from "../navbar";
+
+import styles from './header.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/header
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-example
+ *
+ * @event zn-event-name - Emitted as an example.
+ *
+ * @slot - The default slot.
+ * @slot example - An example slot.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --example - An example CSS custom property.
+ */
+export default class ZnHeader extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  private readonly hasSlotController = new HasSlotController(this, '[default]', 'nav', 'breadcrumb');
+
+  @property({attribute: 'full-location'}) fullLocation: string;
+
+  @property({attribute: 'entity-id'}) entityId: string;
+
+  @property({attribute: 'entity-id-show', type: Boolean}) entityIdShow: boolean;
+
+  @property({type: Boolean}) transparent: boolean = false;
+
+  @property() caption: string;
+
+  @property() description: string;
+
+  @property({type: Array}) navigation = [];
+
+  @property({attribute: 'full-width', type: Boolean}) fullWidth: boolean;
+
+  @property({attribute: 'previous-path'}) previousPath: string;
+
+  @property({attribute: 'previous-target'}) previousTarget: string;
+
+  private navbar: ZnNavbar;
+
+  // Attach any event listeners you may need
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener('alt-press', this.handleAltPress);
+    window.addEventListener('alt-up', this.handleAltUp);
+  }
+
+  // Clean up event listeners
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener('alt-press', this.handleAltPress);
+    window.removeEventListener('alt-up', this.handleAltUp);
+  }
+
+  protected firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties);
+    this.navbar = this.querySelector('zn-navbar')!;
+    this.updateNav();
+  }
+
+  handleAltPress = () => {
+    this.classList.toggle('alt-pressed', true);
+  }
+
+  handleAltUp = () => {
+    this.classList.toggle('alt-pressed', false);
+  }
+
+  @watch('navigation', {waitUntilFirstUpdate: true})
+  updateNav() {
+
+    if (!this.navbar && this.navigation && this.navigation.length > 0) {
+      this.navbar = document.createElement('zn-navbar');
+      const nc = this.shadowRoot?.querySelector('#nav-container');
+      if (nc) {
+        nc.appendChild(this.navbar);
+      }
+    }
+
+    if (this.navbar) {
+      (this.navbar as ZnNavbar).navigation = this.navigation;
+      this.navbar.setAttribute('baseless', '');
+    }
+  }
+
+  render() {
+    const hasDefaultSlot = this.hasSlotController.test('[default]');
+    const hasNavigationSlot = this.hasSlotController.test('nav');
+    const hasNavigation = this.navigation && this.navigation.length > 0 || hasNavigationSlot;
+
+    const hasPreviousPath = this.previousPath;
+    const hasEntityId = this.entityId;
+    const hasFullLocation = this.fullLocation;
+    const hasBreadcrumb = this.hasSlotController.test('breadcrumb');
+
+    // Do not add formatting within breadcrumb or navigation - css:empty in use
+    const header = html`
+      <div class="${classMap({
+        'header': true,
+        'header--transparent': this.transparent,
+        'header--full-width': this.fullWidth,
+        'header--has-nav': hasNavigation,
+        'header--has-breadcrumb': hasBreadcrumb,
+        'header--has-previous': hasPreviousPath,
+        'header--has-entity-id': hasEntityId,
+        'header--has-full-location': hasFullLocation,
+      })}" part="base">
+
+        ${hasFullLocation || hasEntityId ? html`
+          <div class="alt-overlay">
+            ${hasFullLocation ? html`
+              <a href="${this.fullLocation}" target="_blank">
+                <zn-icon src="open_in_new"></zn-icon>
+              </a>` : null}
+            ${hasEntityId ? html`
+                <zn-copy-button copy-label="Copy Entity ID" value="${this.entityId}" src="fingerprint"></zn-copy-button>`
+              : null}
+            ${hasFullLocation ? html`
+                <zn-copy-button copy-label="Copy Full Location" value="${this.fullLocation}" src="link"></zn-copy-button>`
+              : null}
+          </div>` : null}
+
+
+        <div class="content" part="content">
+          ${hasBreadcrumb ? html`<slot name="breadcrumb" class="breadcrumb"></slot>` : null}
+
+          ${hasPreviousPath ? html`
+            <a href="${this.previousPath}" class="caption__back"
+               data-target="${this.previousTarget ? this.previousTarget : ''}">
+              <zn-button size="content" icon="arrow_back" icon-size="24" color="transparent"></zn-buttonicon>
+            </a>` : null}
+
+          ${hasDefaultSlot ? html`
+            <div class="actions">
+              <slot></slot>
+            </div>` : ''}
+
+          <div class="caption">
+            <div part="header-left" class="header__left">
+              <span class="header__caption" part="header-caption">${this.caption}</span>
+              ${this.description ? html`
+                  <span class="header__description"
+                        part="header-description">${this.description}</span>`
+                : ''}
+            </div>
+
+            <div class="header__right">
+              <slot name="actions"></slot>
+            </div>
+          </div>
+
+        </div>
+
+        ${hasNavigation ? html`
+          <div id="nav-container">
+            <slot name="nav"></slot>
+          </div>` : null}
+
+      </div>
+    `;
+    if (this.fullWidth) {
+      return html`
+        <style>
+          :host {
+            --max-width: 100%;
+          }
+        </style>${header}`;
+    }
+
+    return header;
+  }
+}