kemet-ui 0.2.0 → 1.0.0

package/dist/components/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.js

@@ -1,36 +1,30 @@
-import { LitElement, html, css } from 'lit';
+import { html, css, LitElement } from 'lit';
 
-export class KemetAccordion extends LitElement {
+export default class KemetAccordion extends LitElement {
   static get styles() {
-    return css`
-      :host {
-        display: block;
-      }
-
-      [name="trigger"] {
-        cursor: pointer
-      }
-
-      #panel {
-        overflow: hidden;
-        transition: all var(--kemet-accordion-transition-speed, 300ms) ease;
-      }
-    `;
+    return [
+      css`
+        :host {
+          display: block;
+        }
+      `,
+    ];
   }
 
   static get properties() {
     return {
-      opened: {
-        type: Boolean,
-        reflect: true,
-      },
-      maxHeight: {
-        type: String,
-        attribute: 'max-height',
+      /**
+       * The index value for the most recently opened panel
+       */
+      currentPanel: {
+        type: Number,
       },
-      closeOthers: {
+      /**
+       * Support for closing all inactive panels when one is opened
+       */
+      togglePanels: {
         type: Boolean,
-        attribute: 'close-others',
+        attribute: 'toggle-panels',
       },
     };
   }
@@ -38,69 +32,108 @@ export class KemetAccordion extends LitElement {
   constructor() {
     super();
 
-    this.opened = undefined;
-    this.maxHeight = '0px';
-    this.closeOthers = false;
+    // managed properties
+    this.togglePanels = false;
+    this.currentPanel = undefined;
+
+    // bindings
+    this.addEventListener('kemet-accordion-panel-opened', this.handlePanelOpened.bind(this));
   }
 
   firstUpdated() {
-    // eslint-disable-next-line prefer-destructuring
-    this.panelElement = this.shadowRoot
-      .querySelector('slot[name="panel"]')
-      .assignedNodes({ flatten: true })[0];
+    this.onKeyDown = event => this.handleKeyDown(event);
   }
 
-  updated(prevProps) {
-    if (!prevProps.get('opened') && this.opened === true) {
-      this.makeEvent('opened');
-    }
+  render() {
+    return html`<slot @slotchange=${event => this.handleSlotChange(event)}></slot>`;
+  }
 
-    if (prevProps.get('opened') && this.opened === false) {
-      this.makeEvent('closed');
-    }
+  handleSlotChange() {
+    this.panels = this.querySelectorAll('kemet-accordion-panel');
+
+    this.panels.forEach((panel) => {
+      panel.removeEventListener('keydown', this.onKeyDown);
+      panel.addEventListener('keydown', this.onKeyDown);
+    });
   }
 
-  render() {
-    return html`
-      <div id="trigger" tabindex="0" @keyup=${() => this.toggle()} @click="${() => this.toggle()}">
-        <slot name="trigger"></slot>
-      </div>
-      <div id="panel" style="max-height:${this.maxHeight};">
-        <slot name="panel"></slot>
-      </div>
-    `;
+  handlePanelOpened(event) {
+    if (this.togglePanels) {
+      this.panels.forEach((panel) => {
+        if (panel !== event.detail) {
+          panel.opened = false;
+        }
+      });
+    }
   }
 
-  toggle() {
-    this.opened = !this.opened;
+  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;
 
-    if (this.opened) {
-      this.closeAll();
-      this.opened = true;
-      this.maxHeight = `${this.panelElement.offsetHeight}px`;
-    } else {
-      this.maxHeight = '0px';
+    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;
     }
   }
 
-  makeEvent(type) {
-    this.dispatchEvent(
-      new CustomEvent(`kemet-accordion-${type}`, {
-        bubbles: true,
-        composed: true,
-        detail: this,
-      }),
-    );
+  expandAll() {
+    this.panels.forEach((panel) => {
+      panel.opened = true;
+    });
   }
 
-  closeAll() {
-    if (this.closeOthers) {
-      document.querySelectorAll('kemet-accordion').forEach((accordion) => {
-        accordion.opened = false;
-        accordion.maxHeight = '0px';
-      });
-    }
+  collapseAll() {
+    this.panels.forEach((panel) => {
+      panel.opened = false;
+    });
   }
 }
 
-window.customElements.define('kemet-accordion', KemetAccordion);
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-accordion') || customElements.define('kemet-accordion', KemetAccordion);

package/dist/components/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);