kemet-ui 0.2.0 → 1.1.0

package/dist/components/kemet-accordion/kemet-accordion-panel.js

@@ -0,0 +1,178 @@
+import { html, css, LitElement } from 'lit';
+import '../kemet-icon/kemet-icon.js';
+
+export default class KemetAccordionPanel extends LitElement {
+  static get styles() {
+    return [
+      css`
+        *,
+        *::before,
+        *::after {
+          box-sizing: border-box;
+        }
+
+        :host {
+          display: block;
+          padding: 1.5rem 1rem;
+          border-bottom: 1px solid var(--kemet-color-primary);
+        }
+
+        .trigger {
+          cursor: pointer;
+          display: grid;
+          gap: 1rem;
+          grid-template-columns: 1fr auto;
+          width: 100%;
+          text-align: left;
+          padding: 0;
+          border: none;
+          background: none;
+        }
+
+        .body {
+          overflow: hidden;
+          transition: all var(--kemet-accordion-panel-transition-speed, 300ms) ease;
+        }
+
+        ::slotted([slot='body']) {
+          padding: 1rem 0;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * Determines the opened state of the panel
+       */
+      opened: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Sets the max height of the panel's body
+       */
+      maxHeight: {
+        type: String,
+        attribute: 'max-height',
+      },
+      /**
+       * Uniquely identifies a panel for accessibility purposes
+       */
+      slug: {
+        type: String,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    // managed properties
+    this.opened = undefined;
+    this.maxHeight = '0px';
+    this.slug = 'panel';
+  }
+
+  firstUpdated() {
+    this.focusableSelector = 'body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';
+    this.bodyElement = this.querySelector('[slot="body"]');
+    this.bodyElementFirst = this.bodyElement.querySelector(':first-child');
+    this.bodyElementLast = this.bodyElement.querySelector(':last-child');
+
+    if (this.bodyElementFirst) this.bodyElementFirst.style.marginTop = 0;
+    if (this.bodyELementLast) this.bodyElementLast.style.marginBottom = 0;
+  }
+
+  updated(prevProps) {
+    if (!prevProps.get('opened') && this.opened === true) {
+      this.maxHeight = `${this.bodyElement.offsetHeight}px`;
+
+      /**
+       * Fires when a panel is opened
+       */
+      this.dispatchEvent(
+        new CustomEvent('kemet-accordion-panel-opened', {
+          bubbles: true,
+          composed: true,
+          detail: this,
+        }),
+      );
+    }
+
+    if (prevProps.get('opened') && this.opened === false) {
+      this.maxHeight = '0px';
+
+      /**
+       * Fires when a panel is closed
+       */
+      this.dispatchEvent(
+        new CustomEvent('kemet-accordion-panel-closed', {
+          bubbles: true,
+          composed: true,
+          detail: this,
+        }),
+      );
+    }
+
+    this.a11y();
+    this.focusableBodyElements();
+  }
+
+  render() {
+    return html`
+      <button
+        class="trigger"
+        part="trigger"
+        @click=${() => this.toggle()}
+        @keydown=${event => this.handleKeyDown(event)}
+      >
+        <slot name="trigger"></slot>
+        <slot name="icon"></slot>
+      </button>
+      <section class="body" part="body" style="max-height:${this.maxHeight};">
+        <slot name="body"></slot>
+      </section>
+    `;
+  }
+
+  toggle() {
+    this.opened = !this.opened;
+  }
+
+  focusableBodyElements() {
+    const focusableElements = this.bodyElement.querySelectorAll(this.focusableSelector);
+
+    if (this.opened) {
+      focusableElements.forEach((element) => {
+        element.removeAttribute('tabindex');
+      });
+    } else {
+      focusableElements.forEach((element) => {
+        element.setAttribute('tabindex', '-1');
+      });
+    }
+  }
+
+  a11y() {
+    const trigger = this.shadowRoot.querySelector('.trigger');
+    const body = this.shadowRoot.querySelector('.body');
+
+    trigger.setAttribute('id', `${this.slug}-button`);
+    trigger.setAttribute('aria-controls', `${this.slug}-content`);
+
+    body.setAttribute('id', `${this.slug}-content`);
+    body.setAttribute('aria-labelledby', `${this.slug}-button`);
+    body.setAttribute('aria-hidden', `${!this.opened}`);
+  }
+
+  handleKeyDown(event) {
+    if (event.key === 'Space' || event.key === 'Enter') {
+      this.toggle();
+    }
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-accordion-panel') || customElements.define('kemet-accordion-panel', KemetAccordionPanel);

package/dist/components/kemet-accordion/kemet-accordion.js

@@ -0,0 +1,139 @@
+import { html, css, LitElement } from 'lit';
+
+export default class KemetAccordion extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: block;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The index value for the most recently opened panel
+       */
+      currentPanel: {
+        type: Number,
+      },
+      /**
+       * Support for closing all inactive panels when one is opened
+       */
+      togglePanels: {
+        type: Boolean,
+        attribute: 'toggle-panels',
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    // managed properties
+    this.togglePanels = false;
+    this.currentPanel = undefined;
+
+    // bindings
+    this.addEventListener('kemet-accordion-panel-opened', this.handlePanelOpened.bind(this));
+  }
+
+  firstUpdated() {
+    this.onKeyDown = event => this.handleKeyDown(event);
+  }
+
+  render() {
+    return html`<slot @slotchange=${event => this.handleSlotChange(event)}></slot>`;
+  }
+
+  handleSlotChange() {
+    this.panels = this.querySelectorAll('kemet-accordion-panel');
+
+    this.panels.forEach((panel) => {
+      panel.removeEventListener('keydown', this.onKeyDown);
+      panel.addEventListener('keydown', this.onKeyDown);
+    });
+  }
+
+  handlePanelOpened(event) {
+    if (this.togglePanels) {
+      this.panels.forEach((panel) => {
+        if (panel !== event.detail) {
+          panel.opened = false;
+        }
+      });
+    }
+  }
+
+  navigatePanels(direction) {
+    switch (direction) {
+      case 'home':
+        this.currentPanel = 0;
+        break;
+      case 'end':
+        this.currentPanel = this.panels.length - 1;
+        break;
+      case 'next':
+        this.currentPanel += 1;
+        break;
+      case 'prev':
+        this.currentPanel -= 1;
+        break;
+      default:
+        this.currentPanelFocus = 0;
+        break;
+    }
+
+    if (this.currentPanel > this.panels.length - 1) this.currentPanel = 0;
+    if (this.currentPanel < 0) this.currentPanel = this.panels.length - 1;
+
+    this.panels[this.currentPanel].shadowRoot.querySelector('button').focus();
+  }
+
+  handleKeyDown(event) {
+    switch (event.key) {
+      case 'Enter':
+      case 'Space':
+        event.preventDefault();
+        event.target.click();
+        break;
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        event.preventDefault();
+        this.navigatePanels('prev');
+        break;
+      case 'ArrowRight':
+      case 'ArrowDown':
+        event.preventDefault();
+        this.navigatePanels('next');
+        break;
+      case 'End':
+        event.preventDefault();
+        this.navigatePanels('end');
+        break;
+      case 'Home':
+        event.preventDefault();
+        this.navigatePanels('home');
+        break;
+      default:
+        break;
+    }
+  }
+
+  expandAll() {
+    this.panels.forEach((panel) => {
+      panel.opened = true;
+    });
+  }
+
+  collapseAll() {
+    this.panels.forEach((panel) => {
+      panel.opened = false;
+    });
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-accordion') || customElements.define('kemet-accordion', KemetAccordion);

package/dist/components/kemet-badge/kemet-badge.js

@@ -0,0 +1,102 @@
+import { html, css, LitElement } from 'lit';
+
+export default class KemetBadge extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          padding: var(--kemet-badge-padding, 10px);
+          line-height: 1;
+          color: var(--kemet-color-white);
+        }
+
+        :host([status='primary']) {
+          background-color: var(--kemet-color-primary);
+        }
+
+        :host([status='success']) {
+          background-color: var(--kemet-color-success);
+        }
+
+        :host([status='standard']) {
+          background-color: var(--kemet-color-gray6);
+        }
+
+        :host([status='warning']) {
+          background-color: var(--kemet-color-warning);
+        }
+
+        :host([status='error']) {
+          background-color: var(--kemet-color-error);
+        }
+
+        :host([circle]) {
+          border-radius: 50%;
+        }
+
+        :host([pill]) {
+          border-radius: 99rem;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The status of the badge
+       */
+      status: {
+        type: String,
+        reflect: true,
+      },
+      /**
+       * Displays the badge in a circle
+       */
+      circle: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Rounds the corners on the badge
+       */
+      pill: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Padding on the badge as a circle
+       */
+      circlePadding: {
+        type: Number,
+        attribute: 'circle-padding',
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.status = 'primary';
+    this.pill = false;
+    this.circle = false;
+    this.circlePadding = 0;
+  }
+
+  render() {
+    return html`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;
+  }
+
+  handleSlotChange() {
+    if (this.circle) {
+      this.style.height = `${this.offsetWidth + this.circlePadding}px`;
+      this.style.width = `${this.offsetWidth + this.circlePadding}px`;
+    }
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-badge') || customElements.define('kemet-badge', KemetBadge);

package/dist/components/kemet-button/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-carousel/kemet-carousel-current.js

@@ -0,0 +1,36 @@
+import { html, css, LitElement } from 'lit';
+
+export class KemetCarouselCurrent extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: inline-block;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      current: {
+        type: Number,
+      },
+    };
+  }
+
+  firstUpdated() {
+    this.carousel = this.closest('kemet-carousel');
+  }
+
+  updated() {
+    this.current = this.carousel.index + 1;
+  }
+
+  render() {
+    return html`${this.current}`;
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-carousel-current') || customElements.define('kemet-carousel-current', KemetCarouselCurrent);