@kubex/zinc 0.0.3 → 1.0.1

package/src/components/stat/stat.scss

@@ -0,0 +1,92 @@
+@use "../../wc";
+
+
+:host {
+  display: contents;
+}
+
+.stat-tile {
+
+  .caption, .description, .amount, .bottom {
+    margin: 0;
+  }
+
+  .caption {
+    color: rgb(var(--zn-primary));
+    margin-bottom: var(--zn-spacing-x-small);
+    font-size: var(--zn-font-size-medium);
+  }
+
+  .container {
+    display: flex;
+    flex-direction: row;
+    gap: var(--zn-spacing-medium);
+    height: 100%;
+  }
+
+  .left {
+    flex-basis: 50%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .right {
+    flex-basis: 50%;
+  }
+
+  .amount {
+    color: rgb(var(--zn-text-heading));
+    font-weight: 600;
+    font-size: var(--zn-font-size-x-large);
+    line-height: var(--zn-line-height-loose);
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+  }
+
+  .bottom {
+    color: rgb(var(--zn-text));
+    font-weight: 400;
+    padding-top: var(--zn-spacing-medium);
+    font-size: var(--zn-font-size-small);
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  .diff {
+    .positive {
+      color: rgb(var(--zn-color-success));
+    }
+
+    .negative {
+      color: rgb(var(--zn-color-error));
+    }
+
+    .neutral {
+      color: rgb(var(--zn-color-warning));
+    }
+  }
+
+  &--chart {
+    .amount {
+      padding-top: var(--zn-spacing-small);
+    }
+
+    .bottom {
+      padding-top: var(--zn-spacing-small);
+    }
+  }
+
+  @container (max-width:550px) {
+    ::slotted(.zn-col-1) {
+      flex-basis: 170px;
+    }
+
+    .amount {
+      font-size: 20px;
+      padding-top: 5px;
+    }
+  }
+}

package/src/components/stat/stat.test.ts

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

package/src/components/status-indicator/index.ts

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

package/src/components/status-indicator/status-indicator.component.ts

@@ -0,0 +1,31 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property} from "lit/decorators.js";
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './status-indicator.scss';
+
+/**
+ * @summary Circular status indicators.
+ * @documentation https://zinc.style/components/status-indicator
+ * @status experimental
+ * @since 1.0
+ */
+export default class ZnStatusIndicator extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property() type: 'success' | 'error' | 'warning' | 'info' = 'info';
+
+  render() {
+    return html`
+      <div class=${classMap({
+        'indicator': true,
+        'indicator--warning': this.type === 'warning',
+        'indicator--error': this.type === 'error',
+        'indicator--success': this.type === 'success',
+        'indicator--info': this.type === 'info',
+      })}>
+      </div>
+    `;
+  }
+}

package/src/components/status-indicator/status-indicator.scss

@@ -0,0 +1,32 @@
+@use "../../wc";
+
+:host {
+  --indicator-color: var(--zn-color-info);
+  white-space: nowrap;
+  display: inline-block;
+}
+
+.indicator {
+  display: inline-block;
+  background-color: rgba(var(--indicator-color), 0.7);
+  border: 1px solid rgb(var(--indicator-color));
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+
+  &--info {
+    --indicator-color: var(--zn-color-info);
+  }
+
+  &--error {
+    --indicator-color: var(--zn-color-error);
+  }
+
+  &--warning {
+    --indicator-color: var(--zn-color-warning);
+  }
+
+  &--success {
+    --indicator-color: var(--zn-color-success);
+  }
+}

package/src/components/status-indicator/status-indicator.test.ts

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

package/src/components/stepper/index.ts

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

package/src/components/stepper/stepper.component.ts

@@ -0,0 +1,80 @@
+import {property} from 'lit/decorators.js';
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './stepper.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/stepper
+ * @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 ZnStepper extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property({reflect: true}) caption: string;
+  @property({reflect: true}) label: string;
+  @property({type: Number, reflect: true}) steps: number
+  @property({type: Number, reflect: true}) value: number;
+  @property({type: Boolean, reflect: true, attribute: 'show-progress'}) showProgress: boolean;
+
+  render() {
+    const steps = [];
+    for (let i = 0; i < this.steps; i++) {
+      steps.push(html`
+        <div class="step">
+        </div>
+      `);
+    }
+
+    let progress = this.value / this.steps * 100;
+    if (progress > 100) progress = 100;
+
+    return html`
+      ${this.label
+        ? html`
+          <div class="label">
+            ${this.label
+              ? html`
+                <span class="info">
+                  ${this.label}
+                </span>`
+              : ''}
+          </div>
+        `
+        : ''}
+      ${this.caption || this.showProgress
+        ? html`
+          <div class="header">
+            <span class="caption">${this.caption}</span>
+            ${this.showProgress
+              ? html`
+                <span class="progress">${this.value > this.steps ? this.steps : this.value} / ${this.steps} steps</span>`
+              : ''}
+          </div>
+        `
+        : ''}
+      <div class="step-container">
+        <div class="step-line"></div>
+        <div id="progress" class="step-progress"
+             style="width: calc((${progress}% - 4px) + 1px)"></div>
+        <div class="steps">
+          <div></div>
+          ${steps}
+        </div>
+      </div>
+    `;
+  }
+}

package/src/components/stepper/stepper.scss

@@ -0,0 +1,88 @@
+@use "../../wc";
+
+:host {
+  width: calc(100% - 4px);
+  display: flex;
+  flex-direction: column;
+  padding: 10px 0;
+}
+
+.header {
+  font-weight: 500;
+  color: rgb(var(--zn-text-heading));
+}
+
+.progress {
+  color: rgb(var(--zn-text));
+}
+
+.info {
+  font-size: 90%;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.label,
+.info {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.header {
+  margin-bottom: var(--zn-spacing-x-small);
+}
+
+.step-container {
+  width: 100%;
+  position: relative;
+  height: 12px;
+  display: flex;
+  align-items: center;
+}
+
+.step-line {
+  position: absolute;
+  width: 100%;
+  left: 2px;
+  height: 2px;
+  background-color: rgb(var(--zn-border-color));
+}
+
+.step-progress {
+  background-color: rgb(var(--zn-primary));
+  height: 8px;
+  position: absolute;
+  top: 2px;
+  border-radius: 10px;
+}
+
+.steps {
+  position: relative;
+  width: 100%;
+  left: 2px;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+}
+
+
+.step {
+  position: relative;
+  width: 17px;
+  height: 17px;
+  border-radius: 50%;
+  background-color: rgb(var(--zn-border-color));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-width: 3px;
+  border-color: rgba(var(--zn-panel), var(--zn-panel-opacity));
+}
+

package/src/components/stepper/stepper.test.ts

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

package/src/components/style/index.ts

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

package/src/components/style/style.component.ts

@@ -0,0 +1,150 @@
+import {type CSSResultGroup, unsafeCSS} from 'lit';
+import {LocalizeController} from '../../utilities/localize';
+import {property} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './style.scss';
+
+export default class ZnStyle extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  // @ts-expect-error unused property
+  private readonly localize = new LocalizeController(this);
+
+  @property() color = '';
+  @property({type: Boolean}) border = false;
+  @property({type: Boolean}) error = false;
+  @property({type: Boolean}) success = false;
+  @property({type: Boolean}) info = false;
+  @property({type: Boolean}) warning = false;
+  @property({type: Boolean}) primary = false;
+  @property({type: Boolean}) accent = false;
+  @property() pad = '';
+  @property() margin = '';
+  @property({attribute: 'a-margin'}) autoMargin = '';
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    let display = 'contents';
+
+    if (this.color === '') {
+      if (this.error) {
+        this.color = 'error';
+      } else if (this.success) {
+        this.color = 'success';
+      } else if (this.info) {
+        this.color = 'info';
+      } else if (this.warning) {
+        this.color = 'warning';
+      } else if (this.primary) {
+        this.color = 'primary';
+      } else if (this.accent) {
+        this.color = 'accent';
+      }
+    }
+    if (this.color) {
+      this.classList.toggle('zn-' + this.color, true);
+    }
+
+    if (this.border) {
+      display = 'inline-block'
+      this.classList.toggle('zn-border', true);
+    }
+
+    if (this.pad) {
+      display = 'inline-block'
+      this.style.display = 'inline-block';
+      for (const pt of this.pad) {
+        switch (pt) {
+          case 'a':
+            this.classList.toggle('zn-pad', true);
+            break;
+          case 'l':
+            this.classList.toggle('zn-pl', true);
+            break;
+          case 'r':
+            this.classList.toggle('zn-pr', true);
+            break;
+          case 't':
+            this.classList.toggle('zn-pt', true);
+            break;
+          case 'b':
+            this.classList.toggle('zn-pb', true);
+            break;
+          case 'x':
+            this.classList.toggle('zn-px', true);
+            break;
+          case 'y':
+            this.classList.toggle('zn-py', true);
+            break;
+        }
+      }
+    }
+    if (this.margin) {
+      display = 'inline-block'
+      for (const pt of this.margin) {
+        switch (pt) {
+          case 'a':
+            this.classList.toggle('zn-margin', true);
+            break;
+          case 'l':
+            this.classList.toggle('zn-ml', true);
+            break;
+          case 'r':
+            this.classList.toggle('zn-mr', true);
+            break;
+          case 't':
+            this.classList.toggle('zn-mt', true);
+            break;
+          case 'b':
+            this.classList.toggle('zn-mb', true);
+            break;
+          case 'x':
+            this.classList.toggle('zn-mx', true);
+            break;
+          case 'y':
+            this.classList.toggle('zn-my', true);
+            break;
+        }
+      }
+    }
+    if (this.autoMargin) {
+      display = 'inline-block'
+      for (const pt of this.autoMargin) {
+        switch (pt) {
+          case 'a':
+            this.classList.toggle('m-auto', true);
+            break;
+          case 't':
+            this.classList.toggle('zn-mta', true);
+            break;
+          case 'b':
+            this.classList.toggle('zn-mba', true);
+            break;
+          case 'l':
+            this.classList.toggle('zn-mla', true);
+            break;
+          case 'r':
+            this.classList.toggle('zn-mra', true);
+            break;
+          case 'x':
+            this.classList.toggle('zn-mra', true);
+            this.classList.toggle('zn-mla', true);
+            break;
+          case 'y':
+            this.classList.toggle('zn-mta', true);
+            this.classList.toggle('zn-mba', true);
+            break;
+        }
+      }
+    }
+
+
+    this.style.display = display;
+  }
+
+  createRenderRoot() {
+    return this;
+  }
+}

package/src/components/style/style.scss

@@ -0,0 +1 @@
+@use "../../wc";

package/src/components/style/style.test.ts

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

package/src/components/table/index.ts

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