@kubex/zinc 0.0.2 → 1.0.0

package/src/components/button/button.component.ts

@@ -0,0 +1,242 @@
+import {classMap} from 'lit/directives/class-map.js';
+import {type CSSResultGroup, unsafeCSS} from 'lit';
+import {FormControlController, validValidityState} from "../../internal/form";
+import {HasSlotController} from '../../internal/slot';
+import {html, literal} from 'lit/static-html.js';
+import {ifDefined} from 'lit/directives/if-defined.js';
+import {property, query} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+import ZnDropdown from "../dropdown";
+import ZnIcon from "../icon";
+import ZnTooltip from "../tooltip";
+import type {IconColor} from "../icon";
+import type {ZincFormControl} from '../../internal/zinc-element';
+
+import styles from './button.scss';
+
+/**
+ * @summary Buttons represent actions that are available to the user.
+ * @documentation https://inc.style/components/button
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency zn-icon
+ * @dependency zn-tooltip
+ *
+ * @event zn-blur - Emitted when the button loses focus.
+ * @event zn-focus - Emitted when the button gains focus.
+ * @event zn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ *
+ * @slot - The button's label.
+ * @slot prefix - A presentational prefix icon or similar element.
+ * @slot suffix - A presentational suffix icon or similar element.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart label - The button's label.
+ * @csspart suffix - The container that wraps the suffix.
+ * @csspart caret - The button's caret icon, an `<zn-icon>` element.
+ * @csspart spinner - The spinner that shows when the button is in the loading state.
+ */
+export default class ZnButton extends ZincElement implements ZincFormControl {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+  static dependencies = {
+    'zn-tooltip': ZnTooltip,
+    'zn-icon': ZnIcon
+  };
+
+  private readonly formControlController = new FormControlController(this);
+  private readonly hasSlotController = new HasSlotController(this, '[default]');
+
+  @query('.button') button: HTMLButtonElement;
+
+  @property({}) color: 'default' | 'secondary' | 'error' | 'info' | 'success' | 'warning' |
+    'transparent' | 'star' = 'default';
+  @property({}) size: 'content' | 'x-small' | 'small' | 'medium' | 'large' = 'medium';
+  @property({type: Boolean}) text = false;
+  @property({type: Boolean}) outline = false;
+  @property({type: Boolean}) disabled = false;
+  @property({type: Boolean}) grow = false;
+  @property({type: Boolean}) square = false;
+
+  @property({attribute: 'dropdown-closer', type: Boolean}) dropdownCloser = false;
+
+  @property({type: Number}) notification: number;
+
+  @property() verticalAlign: 'start' | 'center' | 'end';
+
+  @property() content = '';
+  @property() icon: string = '';
+  @property() gaid: string = '';
+  @property({attribute: "icon-position"}) iconPosition: 'left' | 'right' = 'left';
+  @property({attribute: "icon-size"}) iconSize: string;
+  @property({attribute: "icon-color"}) iconColor: IconColor;
+  @property() type: 'button' | 'submit' | 'reset';
+
+  @property() name: string;
+  @property() value: string;
+
+  @property() form: string;
+  @property({attribute: 'formaction'}) formAction: string;
+  @property({attribute: 'formenctype'}) formEnctype: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
+  @property({attribute: 'formmethod'}) formMethod: 'post' | 'get';
+  @property({attribute: 'formnovalidate', type: Boolean}) formNoValidate: boolean;
+  @property({attribute: 'formtarget'}) formTarget: '_self' | '_blank' | '_parent' | '_top' | string;
+
+  // Link Specific
+  @property() href: string;
+  @property() target: '_self' | '_blank' | '_parent' | '_top' | string;
+  @property({attribute: 'data-target'}) dataTarget: 'modal' | 'slide' | string;
+  @property() rel: string = 'noreferrer noopener';
+
+  // Tooltip Specific
+  @property() tooltip: string;
+
+  get validity() {
+    if (this._isButton() && this.button) {
+      return (this.button as HTMLButtonElement).validity;
+    }
+
+    return validValidityState;
+  }
+
+
+  get validationMessage() {
+    if (this._isButton() && this.button) {
+      return (this.button as HTMLButtonElement).validationMessage;
+    }
+
+    return '';
+  }
+
+  firstUpdated() {
+    if (this._isButton()) {
+      this.formControlController.updateValidity();
+    }
+  }
+
+  checkValidity() {
+    if (this._isButton() && this.button) {
+      return (this.button as HTMLButtonElement).checkValidity();
+    }
+
+    return true;
+  }
+
+  getForm(): HTMLFormElement | null {
+    return this.formControlController.getForm();
+  }
+
+  reportValidity() {
+    if (this._isButton() && this.button) {
+      return (this.button as HTMLButtonElement).reportValidity();
+    }
+
+    return true;
+  }
+
+  setCustomValidity(message: string) {
+    if (this._isButton()) {
+      (this.button as HTMLButtonElement).setCustomValidity(message);
+      this.formControlController.updateValidity();
+    }
+  }
+
+  handleClick = () => {
+    if (this.disabled) {
+      return;
+    }
+
+    if (this.dropdownCloser) {
+      let dropdown: ZnDropdown | null = null;
+      let parent: HTMLElement | null = this as HTMLElement | null;
+      let count = 0;
+      const max = 30; // Break the loop if too deep in the DOM tree
+
+      while (parent && count < max) {
+        if (parent instanceof ZnDropdown) {
+          dropdown = parent;
+          break;
+        }
+        parent = parent.parentElement || (parent.getRootNode() instanceof ShadowRoot ? (parent.getRootNode() as ShadowRoot).host as HTMLElement : null);
+        count++;
+      }
+
+      dropdown?.hide();
+    }
+
+    if (this.type === 'submit') {
+      this.formControlController.submit();
+    }
+  }
+
+  private _isLink() {
+    return this.href !== undefined;
+  }
+
+  private _isButton() {
+    return !this._isLink();
+  }
+
+  protected render(): unknown {
+    const isLink = this._isLink();
+
+    const icon = this.icon ? html`
+      <zn-icon src="${this.icon}" id="xy2" size="${this.iconSize ? this.iconSize : 16}"
+               color="${this.iconColor ? this.iconColor : null}"></zn-icon>` : '';
+
+    const tag = isLink ? literal`a` : literal`button`;
+
+    let content = html`
+      <${tag}
+        part="base"
+        class="${classMap({
+          'button': true,
+          'button--default': this.color === 'default',
+          'button--secondary': this.color === 'secondary',
+          'button--error': this.color === 'error',
+          'button--info': this.color === 'info',
+          'button--success': this.color === 'success',
+          'button--warning': this.color === 'warning',
+          'button--transparent': this.color === 'transparent',
+          'button--star': this.color === 'star',
+          'button--content': this.size === 'content',
+          'button--x-small': this.size === 'x-small',
+          'button--small': this.size === 'small',
+          'button--medium': this.size === 'medium',
+          'button--large': this.size === 'large',
+          'button--outline': this.outline,
+          'button--text': (this.text && !this.outline),
+          'button--grow': this.grow,
+          'button--standard': !this.outline && !this.text,
+          'button--disabled': this.disabled,
+          'button--with-icon': this.icon,
+          'button--icon-left': this.iconPosition === 'left',
+          'button--icon-right': this.iconPosition === 'right',
+          'button--with-content': this.hasSlotController.test('[default]') || this.content,
+          'button--square': this.square,
+          'button--has-notification': this.notification !== undefined && this.notification > 0,
+        })}"
+        type="${ifDefined(this.type)}"
+        href="${ifDefined(this.href)}"
+        target="${ifDefined(isLink ? this.target : undefined)}"
+        data-target="${ifDefined(isLink ? this.dataTarget : undefined)}"
+        rel="${ifDefined(isLink ? this.rel : undefined)}"
+        gaid="${ifDefined(this.gaid)}"
+        data-notification="${ifDefined(this.notification)}"
+        @click="${this.handleClick}">
+        ${this.iconPosition === 'left' ? icon : ''}
+        <slot part="label" class="button__label">${this.content}</slot>
+        ${this.iconPosition === 'right' ? icon : ''}
+      </${tag}>`;
+
+    if (this.tooltip !== undefined) {
+      content = html`
+        <zn-tooltip placement="top" content="${this.tooltip}">
+          ${content}
+        </zn-tooltip>`;
+    }
+
+    return content;
+  }
+}

package/src/components/button/button.scss

@@ -0,0 +1,346 @@
+@use "../../../scss/shared";
+@use "../../wc";
+
+:host {
+  display: inline-block;
+  position: relative;
+  width: auto;
+  cursor: pointer;
+  user-select: none;
+
+  button, a {
+    width: 100%;
+  }
+}
+
+.button {
+  @include shared.button;
+
+  --btn-color: var(--zn-primary);
+
+  border-width: 1px;
+  border-color: transparent;
+  height: 100%;
+  display: inline-flex;
+
+  &.button--info {
+    --btn-color: var(--zn-color-info);
+  }
+
+  &.button--error {
+    --btn-color: var(--zn-color-error);
+  }
+
+  &.button--warning {
+    --btn-color: var(--zn-color-warning);
+  }
+
+  &.button--success {
+    --btn-color: var(--zn-color-success);
+  }
+}
+
+.button--has-notification {
+  position: relative;
+
+  &::after {
+    content: attr(data-notification);
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 0;
+    inset-inline-end: 0;
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    font-size: 10px;
+    color: white;
+    background-color: rgb(var(--zn-color-error));
+  }
+}
+
+.button::-moz-focus-inner {
+  border: 0;
+}
+
+.button:focus {
+  outline: none;
+}
+
+.button:focus-visible {
+  outline: 2px solid rgb(var(--btn-color));
+  outline-offset: 2px;
+}
+
+.button--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+
+  * {
+    pointer-events: none;
+  }
+}
+
+.button--standard {
+  &.button--secondary {
+    background-color: var(--zn-color-neutral-50);
+    border-color: var(--zn-color-neutral-50);
+    color: rgb(var(--zn-primary));
+
+    &:hover:not(.button--disabled) {
+      background-color: var(--zn-color-neutral-100)
+    }
+
+    &:active:not(.button--disabled) {
+      background-color: var(--zn-color-neutral-100)
+    }
+  }
+
+
+  background-color: rgba(var(--btn-color), .85);
+  border-color: rgb(var(--btn-color));
+  color: rgba(255, 255, 255, 0.9);
+
+  &:hover:not(.button--disabled) {
+    background-color: rgba(var(--btn-color), 0.8);
+  }
+
+  &:active:not(.button--disabled) {
+    background-color: rgba(var(--btn-color));
+  }
+}
+
+.button--outline {
+  background: none;
+  border-width: 1px;
+  border-color: rgb(var(--btn-color));
+  color: rgb(var(--btn-color));
+
+  &:hover:not(.button--disabled), &:active:not(.button--disabled) {
+    background-color: rgb(var(--btn-color));
+    color: white;
+  }
+
+  &.button--secondary {
+    border-color: #F3EFFF;
+
+    &:hover:not(.button--disabled), &:active:not(.button--disabled) {
+      background-color: rgb(221, 218, 236);
+    }
+  }
+}
+
+
+.button--text {
+  background: none;
+  color: rgb(var(--btn-color));
+
+  &:hover:not(.button--disabled), &:active:not(.button--disabled) {
+    background-color: rgba(var(--btn-color), 0.1);
+  }
+
+  &.button--secondary {
+    font-weight: normal;
+  }
+}
+
+.button--x-small {
+  padding: 2px 10px;
+  font-size: 12px;
+}
+
+.button--content {
+  padding: 0 0;
+  font-size: 12px;
+
+  zn-icon {
+    line-height: 0;
+  }
+}
+
+.button--grow {
+  width: 100%;
+}
+
+.button--small {
+  padding: 4px 14px;
+}
+
+.button--large {
+  padding: 10px 20px;
+}
+
+.button--with-icon:not(.button--with-content) {
+  &.button--x-small,
+  &.button--small {
+    padding: 4px;
+  }
+
+  &.button--medium {
+    padding: 7px;
+  }
+
+  &.button--large {
+    padding: 10px;
+    font-size: 16px;
+  }
+}
+
+.button--with-icon.button--with-content {
+  &.button--x-small,
+  &.button--small {
+    padding-left: 10px;
+
+    &.button--icon-left {
+      padding-left: 10px;
+
+      zn-icon {
+        margin-right: 4px;
+      }
+    }
+
+    &.button--icon-right {
+      padding-right: 10px;
+
+      zn-icon {
+        margin-left: 4px;
+      }
+    }
+  }
+
+  &.button--medium {
+    &.button--icon-left {
+      padding-left: 10px;
+
+      zn-icon {
+        margin-right: 6px;
+      }
+    }
+
+    &.button--icon-right {
+      padding-right: 10px;
+
+      zn-icon {
+        margin-left: 6px;
+      }
+    }
+  }
+
+  &.button--large {
+    &.button--icon-left {
+      padding-left: 14px;
+
+      zn-icon {
+        margin-right: 8px;
+      }
+    }
+
+    &.button--icon-right {
+      padding-right: 14px;
+
+      zn-icon {
+        margin-left: 8px;
+      }
+    }
+  }
+}
+
+.button--square {
+  border-radius: 0;
+}
+
+.button--transparent {
+  background-color: transparent;
+  border-color: transparent !important;
+  color: inherit;
+
+  &:hover:not(.button--disabled) {
+    background-color: rgba(var(--zn-primary), 0.1);
+  }
+
+  &:active:not(.button--disabled) {
+    background-color: rgba(var(--zn-primary), 0.2);
+  }
+}
+
+.button--star {
+  --btn-color: var(--zn-orange);
+  background-color: rgb(var(--btn-color));
+  border-color: rgb(var(--btn-color));
+  color: white;
+  opacity: 1 !important;
+
+  &:hover {
+    background-color: rgb(var(--btn-color));
+  }
+
+  &:active {
+    background-color: rgb(var(--btn-color));
+  }
+
+  &.button--outline {
+    background-color: transparent;
+    border-color: rgb(var(--btn-color));
+    color: rgb(var(--btn-color));
+
+    &:hover, &:active {
+      background-color: rgba(var(--btn-color));
+      color: white;
+    }
+  }
+}
+
+:host([vertical-align="center"]) {
+  align-self: center;
+}
+
+:host([vertical-align="end"]) {
+  align-self: end;
+}
+
+:host([vertical-align="start"]) {
+  align-self: start;
+}
+
+:host([grow]) {
+  width: 100%;
+
+  button {
+    width: 100%;
+  }
+}
+
+:host([data-zn-button-group__button--grow]) {
+  flex-grow: 1;
+  flex-basis: 0;
+}
+
+:host([data-zn-button-group__button--inner]) .button {
+  border-radius: 0 !important;
+  border-left: 0 !important;
+  border-right: 0 !important;
+}
+
+:host([data-zn-button-group__button]:not([data-zn-button-group__button--first]):not(:hover)) {
+  .button:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    bottom: 0;
+    border-left: solid 1px;
+    mix-blend-mode: multiply;
+    color: rgb(var(--zn-border-color));
+  }
+}
+
+:host([data-zn-button-group__button--first]:not([data-zn-button-group__button--last])) .button {
+  border-radius: 5px 0 0 5px !important;
+  border-right: 0 !important;
+}
+
+:host([data-zn-button-group__button--last]:not([data-zn-button-group__button--first])) .button {
+  border-radius: 0 5px 5px 0 !important;
+  border-left: 0 !important;
+}

package/src/components/button/button.test.ts

@@ -0,0 +1,32 @@
+import '../../../dist/zn.min.js';
+import { expect, fixture, html } from '@open-wc/testing';
+import type ZnButton from "./button.component";
+
+const variants = ['default', 'primary', 'secondary', 'success', 'neutral', 'warning', 'danger', 'text']
+
+describe('<zn-button>', () => {
+
+  describe('accessibility tests', () => {
+    variants.forEach(variant => {
+      it(`should be accessible when variant is "${variant}"`, async () => {
+        const el = await fixture<ZnButton>(html`<zn-button variant="${variant}">Button Label</zn-button>`)
+        await expect(el).to.be.accessible();
+      });
+    });
+  });
+
+  describe('when provided no parameters', () => {
+    it('passes accessibility test', async () => {
+      const el = await fixture<ZnButton>(html`<zn-button>Button Label</zn-button>`);
+      await expect(el).to.be.accessible();
+    });
+  });
+
+  it('default values are set correctly', async () => {
+    const el = await fixture<ZnButton>(html`<zn-button>Button Label</zn-button>`);
+
+    expect(el.title).to.equal('');
+    expect(el.color).to.equal('default');
+  });
+
+});

package/src/components/button/index.ts

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

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

@@ -0,0 +1,74 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property, query} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './button-group.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/button-group
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-example
+ *
+ * @event zn-event-name - Emitted as an example.
+ *
+ * @slot - The default slot.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --grow - Use flex-grow to fill available space.
+ * @cssproperty --start - Justify content at the start of the flex space.
+ */
+export default class ZnButtonGroup extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property({}) direction: 'horizontal' | 'vertical' = 'horizontal';
+  @property({type: Boolean}) grow = false;
+  @property({type: Boolean}) wrap = false;
+  @property({type: Boolean}) start = false;
+  @property({type: Boolean}) gap = false;
+
+  @query('slot') defaultSlot: HTMLSlotElement;
+
+  private handleSlotChange() {
+    if (this.direction === 'vertical') {
+      return;
+    }
+
+    let slottedElements = [...this.defaultSlot.assignedElements({flatten: true})] as HTMLElement[];
+
+    slottedElements = slottedElements.filter(el => el.tagName === 'ZN-BUTTON');
+    slottedElements.forEach(el => {
+      const index = slottedElements.indexOf(el);
+      const button = el.closest('zn-button') ?? el.querySelector('zn-button');
+
+      if (button) {
+        button.toggleAttribute('data-zn-button-group__button--grow', this.grow);
+
+        if (!this.gap) {
+          button.toggleAttribute('data-zn-button-group__button', true);
+          button.toggleAttribute('data-zn-button-group__button--first', index === 0);
+          button.toggleAttribute('data-zn-button-group__button--inner', index > 0 && index < slottedElements.length - 1);
+          button.toggleAttribute('data-zn-button-group__button--last', index === slottedElements.length - 1);
+        }
+      }
+    });
+  }
+
+  render() {
+    return html`
+      <div part="base"
+           class="${classMap({
+             'button-group': true,
+             'button-group--grow': this.grow,
+             'button-group--start': this.start,
+             'button-group--gap': this.gap,
+           })}"
+           role="group">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>`;
+  }
+}