kemet-ui 0.2.0 → 1.0.0

package/dist/components/kemet-button.js

@@ -0,0 +1,230 @@
+import { html, css, LitElement } from 'lit';
+import '../kemet-icon/kemet-icon.js';
+import { FormSubmitController } from '../../utilities/controllers/forms.js';
+
+export default class KemetButton extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          cursor: pointer;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          font-size: var(--kemet-button-font-size, inherit);
+          color: var(--kemet-button-color, var(--kemet-color-white));
+          width: var(--kemet-button-width, auto);
+          height: var(--kemet-button-height, auto);
+          border: var(--kemet-button-border, 0);
+          border-radius: var(--kemet-button-border-radius, 0);
+          transition: filter var(--kemet-button-transition-speed, 300ms) ease;
+          background-color: var(--kemet-button-background-color, var(--kemet-color-primary));
+        }
+
+        :host(:hover:not([disabled])) {
+          filter: brightness(var(--kemet-button-hover-brightness, 1.25));
+        }
+
+        :host([disabled]) {
+          opacity: var(--kemet-button-disabled-opacity, 0.5);
+        }
+
+        .button {
+          cursor: pointer;
+          text-decoration: none;
+          display: flex;
+          gap: var(--kemet-button-gap, 0.5rem);
+          align-items: center;
+          color: inherit;
+          font-size: inherit;
+          padding: var(--kemet-button-padding, 1rem 1.25rem);
+          border: 0;
+          background: none;
+        }
+
+        :host([disabled]) .button {
+          cursor: not-allowed;
+        }
+
+        :host([type='text']) {
+          --kemet-button-color: var(--kemet-color-primary);
+          --kemet-button-background-color: none;
+        }
+
+        :host([type='text']:hover) {
+          text-decoration: var(--kemet-button-hover-decoration, underline);
+        }
+
+        :host([type='circle']) {
+          --kemet-button-border-radius: 50%;
+          --kemet-button-width: var(--kemet-button-circle-size, 50px);
+          --kemet-button-height: var(--kemet-button-circle-size, 50px);
+        }
+
+        :host([type='rounded']) {
+          --kemet-button-border-radius: var(--kemet-button-rounded-amount, 6px);
+        }
+
+        :host([type='pill']) {
+          --kemet-button-border-radius: 10rem;
+        }
+
+        :host([outlined]) {
+          --kemet-button-color: var(--kemet-color-primary);
+          --kemet-button-background-color: var(--kemet-color-white);
+          --kemet-button-border: var(--kemet-button-border-width, 1px) var(--kemet-button-border-style, solid) var(--kemet-button-border-color, var(--kemet-color-primary));
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * Determines whether or not the button is active
+       */
+      active: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Is true when the button is hovered
+       */
+      hover: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Is true when the button is focused
+       */
+      focused: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * The url a button should link too
+       */
+      link: {
+        type: String,
+      },
+      /**
+       * Outline style for a button
+       */
+      outlined: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Determines whether not a button is disabled
+       */
+      disabled: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Controls the type of button
+       * standard | text | circle | rounded | pill
+       */
+      type: {
+        type: String,
+        reflect: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.addEventListener('click', this.handleClick.bind(this));
+    this.addEventListener('mouseover', this.handleMouseOver.bind(this));
+    this.addEventListener('mouseout', this.handleMouseOut.bind(this));
+    this.addEventListener('blur', this.handleBlur.bind(this));
+    this.addEventListener('keyup', event => this.handleKeyUp(event));
+
+    this.type = 'standard';
+    this.outline = false;
+    this.disable = false;
+
+    /**
+      * Used only for form reactive controller
+      */
+    this.formSubmitController = new FormSubmitController(this);
+  }
+
+  render() {
+    if (this.link && !this.disabled) {
+      return html`
+        <a href=${this.link} class="button" role="button" part="button">
+          <slot name="left"></slot>
+          <slot></slot>
+          <slot name="right"></slot>
+        </a>
+      `;
+    }
+
+    return html`
+      <button class="button" part="button" ?disabled=${this.disabled} aria-disabled=${this.disabled ? 'true' : 'false'}>
+        <slot name="left"></slot>
+        <slot></slot>
+        <slot name="right"></slot>
+      </button>
+    `;
+  }
+
+  /**
+   * Sets hover to true onMouseOver
+   * @private
+   */
+  handleMouseOver() {
+    this.hover = true;
+  }
+
+  /**
+   * Sets hover to false onMouseOut
+   * @private
+   */
+  handleMouseOut() {
+    this.hover = false;
+  }
+
+  /**
+   * Handles click behavior
+   * @private
+   */
+  handleClick() {
+    this.hover = false;
+    this.active = true;
+
+    setTimeout(() => {
+      this.active = false;
+    }, 300);
+
+    if (this.shadowRoot.querySelector('button')) {
+      this.formSubmitController.submit(this);
+    }
+  }
+
+  /**
+   * Handles blur
+   * @private
+   */
+  handleBlur() {
+    this.focused = false;
+    this.active = false;
+    this.hover = false;
+  }
+
+  /**
+   * Handles keyup
+   * @private
+   * @param {object} event - event object
+   */
+  handleKeyUp(event) {
+    if (event.key === 'Tab') {
+      this.focused = true;
+    }
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-button') || customElements.define('kemet-button', KemetButton);

package/dist/components/kemet-checkbox.js

@@ -0,0 +1,298 @@
+import { html, css, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
+import { FormSubmitController } from '../../utilities/controllers/forms.js';
+
+export default class KemetCheckbox extends LitElement {
+  static get styles() {
+    return [
+      css`
+        *,
+        *::before,
+        *::after {
+          box-sizing: border-box;
+        }
+
+        :host {
+          display: inline-block;
+        }
+
+        :host([disabled]) {
+          opacity: 0.5;
+        }
+
+        label {
+          display: inline-flex;
+          gap: 0.5rem;
+          align-items: center;
+        }
+
+        input {
+          cursor: pointer;
+          margin: 0;
+          padding: 0;
+          width: var(--kemet-checkbox-size, 18px);
+          height: var(--kemet-checkbox-size, 18px);
+          position: absolute;
+          opacity: 0;
+        }
+
+        button {
+          margin: 0;
+          border: none;
+          background: none;
+        }
+
+        [part='checkbox'] {
+          color: var(--kemet-checkbox-color, var(--kemet-color-primary));
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: var(--kemet-checkbox-size, 18px);
+          height: var(--kemet-checkbox-size, 18px);
+          border: var(--kemet-checkbox-border, 1px solid var(--kemet-color-primary));
+        }
+
+        :host([rounded]) [part='checkbox'] {
+          border-radius: var(--kemet-checkbox-border-radius, 4px);
+        }
+
+        :host([filled][checked]) [part='checkbox'],
+        :host([filled][indeterminate]) [part='checkbox'] {
+          border: none;
+          background-color: var(--kemet-checkbox-filled-background-color, var(--kemet-color-primary));
+        }
+
+        [part='mark'] {
+          display: flex;
+          width: calc(var(--kemet-checkbox-size, 18px) - 4px);
+          height: calc(var(--kemet-checkbox-size, 18px) - 4px);
+        }
+
+        :host([filled][checked]) [part='mark'],
+        :host([filled][indeterminate]) [part='mark'] {
+          color: var(--kemet-checkbox-filled-color, var(--kemet-color-white));
+        }
+
+        [part='message'] {
+          display: block;
+          margin-top: 0.5rem;
+        }
+
+        :host([status='error']) [part='message'] {
+          color: var(--kemet-color-error);
+        }
+
+        :host([status='warning']) [part='message'] {
+          color: var(--kemet-color-error);
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      label: {
+        type: String,
+      },
+      checked: {
+        type: Boolean,
+        reflect: true,
+      },
+      indeterminate: {
+        type: Boolean,
+        reflect: true,
+      },
+      name: {
+        type: String,
+      },
+      value: {
+        type: String,
+      },
+      disabled: {
+        type: Boolean,
+        reflect: true,
+      },
+      required: {
+        type: Boolean,
+        reflect: true,
+      },
+      focused: {
+        type: Boolean,
+        reflect: true,
+      },
+      rounded: {
+        type: Boolean,
+        reflect: true,
+      },
+      filled: {
+        type: Boolean,
+        reflect: true,
+      },
+      status: {
+        type: String,
+        reflect: true,
+      },
+      message: {
+        type: String,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    // managed properties
+    this.label = '';
+    this.name = 'checkbox';
+    this.disabled = false;
+    this.required = false;
+    this.rounded = false;
+    this.filled = false;
+    this.status = 'standard';
+
+    /**
+     * Used only for form reactive controller
+     */
+    this.formSubmitController = new FormSubmitController(this);
+  }
+
+  firstUpdated() {
+    this.input = this.shadowRoot.querySelector('input');
+  }
+
+  render() {
+    return html`
+      <label part="label">
+        <input
+          type="checkbox"
+          name=${ifDefined(this.name)}
+          .value=${this.value}
+          .indeterminate=${live(this.indeterminate)}
+          .checked=${live(this.checked)}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          aria-checked=${this.checked ? 'true' : 'false'}
+          @click=${() => this.handleClick()}
+          @blur=${() => this.handleBlur()}
+          @focus=${() => this.handleFocus()}
+          @change=${() => this.handleChange()}
+        />
+        <button part="checkbox" aria-label=${this.label}>
+          ${this.makeCheckMark()}
+        </button>
+        <span part="text">${this.label}</span>
+      </label>
+      ${this.makeMessage()}
+    `;
+  }
+
+  click() {
+    this.input.click();
+  }
+
+  handleClick() {
+    this.checked = !this.checked;
+    this.indeterminate = false;
+
+    /**
+     * Fires when the state of the checkbox changes
+     */
+    this.dispatchEvent(
+      new CustomEvent('kemet-checkbox-change', {
+        bubbles: true,
+        composed: true,
+        detail: this,
+      }),
+    );
+  }
+
+  handleBlur() {
+    this.focused = false;
+
+    /**
+     * Fires when the checkbox loses or receives focus
+     */
+    this.dispatchEvent(
+      new CustomEvent('kemet-checkbox-focused', {
+        bubbles: true,
+        composed: true,
+        detail: false,
+      }),
+    );
+  }
+
+  handleFocus() {
+    this.focused = true;
+    /**
+     * Fires when the checkbox loses or receives focus
+     */
+    this.dispatchEvent(
+      new CustomEvent('kemet-checkbox-focused', {
+        bubbles: true,
+        composed: true,
+        detail: true,
+      }),
+    );
+  }
+
+  handleChange() {
+    this.value = this.checked;
+
+    if (this.input.checkValidity()) {
+      this.status = 'standard';
+    }
+  }
+
+  makeMessage() {
+    if (this.status === 'error' || this.status === 'warning') {
+      return html`<span part="message">${this.message}</span>`;
+    }
+
+    return null;
+  }
+
+  makeCheckMark() {
+    if (this.checked) {
+      return html`
+        <span part="mark">
+          <svg viewBox="0 0 16 16">
+            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+              <g stroke="currentColor" stroke-width="2">
+                <g transform="translate(3.428571, 3.428571)">
+                  <path d="M0,5.71428571 L3.42857143,9.14285714"></path>
+                  <path d="M9.14285714,0 L3.42857143,9.14285714"></path>
+                </g>
+              </g>
+            </g>
+          </svg>
+        </span>
+      `;
+    }
+
+    if (!this.checked && this.indeterminate) {
+      return html`
+        <span part="mark">
+          <svg viewBox="0 0 16 16">
+            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+              <g stroke="currentColor" stroke-width="2">
+                <g transform="translate(2.285714, 6.857143)">
+                  <path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path>
+                </g>
+              </g>
+            </g>
+          </svg>
+        </span>
+      `;
+    }
+
+    return null;
+  }
+
+  checkValidity() {
+    return this.input.checkValidity();
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-checkbox') || customElements.define('kemet-checkbox', KemetCheckbox);