kemet-ui 1.1.0 → 1.2.0

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

@@ -0,0 +1,209 @@
+import { html, css, LitElement } from 'lit';
+
+export default class KemetFAB extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          --kemet-fab-size: 50px;
+
+          display: inline-block;
+          position: relative;
+        }
+
+        button {
+          color: var(--kemet-fab-color, var(--kemet-color-white));
+          font-size: inherit;
+          display: inline-flex;
+          padding: 0;
+          position: relative;
+          min-height: var(--kemet-fab-size);
+          min-width: var(--kemet-fab-size);
+          max-width: var(--kemet-fab-size);
+          align-items: center;
+          justify-content: flex-start;
+          transition: all 0.4s ease;
+          border: none;
+          background-color: var(--kemet-fab-background-color, var(--kemet-color-primary));
+        }
+
+        :host([outlined]) button {
+          color: var(--kemet-fab-outlined-color, var(--kemet-color-primary));
+          border: var(--kemet-fab-outlined-border, 1px solid var(--kemet-color-primary));
+          background-color: transparent;
+        }
+
+        :host([pill]) button {
+          border-radius: var(--kemet-fab-pill-radius, 10rem);
+        }
+
+        button::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          transition: background-color 0.3s ease-in-out;
+          background-color: var(--kemet-fab-background-color, var(--kemet-color-primary));
+        }
+
+        :host([pill]) button::before {
+          border-radius: var(--kemet-fab-pill-radius, 10rem);
+        }
+
+        :host([outlined]) button::before {
+          border: var(--kemet-fab-outline-border, 1px solid var(--kemet-color-primary));
+          background-color: transparent;
+        }
+
+        :host([expanded]) button {
+          max-width: 99rem;
+          padding: 0 1.35rem 0 0.25rem;
+        }
+
+        :host([disabled]) button {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+
+        .icon {
+          width: var(--kemet-fab-size);
+          height: var(--kemet-fab-size);
+          display: flex;
+          flex: 0 0 auto;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .text {
+          color: var(--kemet-fab-color, var(--kemet-color-white));
+          z-index: 1;
+          white-space: nowrap;
+          pointer-events: none;
+          opacity: 0;
+          transition: opacity 0.2s ease-in-out;
+        }
+
+        :host([outlined]) .text {
+          color: var(--kemet-fab-outlined-color, var(--kemet-color-primary));
+        }
+
+        :host([expanded]) .text {
+          opacity: 1;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The expanded state of the button
+       */
+      expanded: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Outline style for a button
+       */
+      outlined: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Determines whether not a button is disabled
+       */
+      disabled: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Displays the fab with rounded corners
+       */
+      pill: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * The distance, in pixels, where the fab should automatically expand
+       */
+      expandPoint: {
+        type: Number,
+        attribute: 'expand-point',
+      },
+      /**
+       * The distance, in pixels, where the fab should automatically collapse
+       */
+      collapsePoint: {
+        type: Number,
+        attribute: 'collapse-point',
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.outlined = false;
+    this.disabled = false;
+    this.expanded = false;
+  }
+
+  firstUpdated() {
+    // events
+    window.addEventListener('scroll', this.handleScroll.bind(this));
+    this.addEventListener('mouseover', this.handleMouseOver.bind(this));
+    this.addEventListener('mouseout', this.handleMouseOut.bind(this));
+  }
+
+  render() {
+    return html`
+      <button class="button" part="button" ?disabled=${this.disabled} aria-disabled=${this.disabled ? 'true' : 'false'}>
+        <span class="icon" part="icon">
+          <slot name="icon"></slot>
+        </span>
+        <span class="text" part="text">
+          <slot></slot>
+        </span>
+      </button>
+    `;
+  }
+
+  handleMouseOver() {
+    if (!this.disabled) {
+      this.expanded = true;
+    }
+  }
+
+  handleMouseOut() {
+    if (!this.disabled) {
+      this.expanded = false;
+    }
+  }
+
+  handleScroll() {
+    if (window.scrollY > this.expandPoint) {
+      this.expanded = true;
+    }
+
+    if (window.scrollY < this.expandPoint) {
+      this.expanded = false;
+    }
+
+    if (window.scrollY > this.collapsePoint) {
+      this.expanded = false;
+    }
+
+    if (window.scrollY < this.collapsePoint) {
+      this.expanded = true;
+    }
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-fab') || customElements.define('kemet-fab', KemetFAB);

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

@@ -322,6 +322,13 @@ export default class KemetInput extends LitElement {
       inputType: {
         type: String,
       },
+      /**
+       * Determines if the input is focused
+       */
+      focused: {
+        type: Boolean,
+        reflect: true,
+      },
     };
   }
 
@@ -336,6 +343,7 @@ export default class KemetInput extends LitElement {
     this.iconSize = 20;
     this.validateOnBlur = false;
     this.isPasswordVisible = false;
+    this.focused = false;
 
     /**
      * Used only for form reactive controller
@@ -349,6 +357,10 @@ export default class KemetInput extends LitElement {
     this.field = this.closest('kemet-field');
     this.form = this.closest('form');
     this.slug = this.field ? this.field.slug : 'input';
+
+    if (this.field) {
+      this.field.addEventListener('fmc-password-status', event => this.handleStatus(event));
+    }
   }
 
   render() {
@@ -463,7 +475,7 @@ export default class KemetInput extends LitElement {
    * @private
    */
   handleFocus() {
-    this.hasFocus = true;
+    this.focused = true;
 
     /**
      * Fires when the input receives and loses focus
@@ -487,7 +499,7 @@ export default class KemetInput extends LitElement {
       this.validity = this.input.validity;
     }
 
-    this.hasFocus = false;
+    this.focused = false;
 
     /**
      * Fires when the input receives and loses focus
@@ -537,8 +549,7 @@ export default class KemetInput extends LitElement {
    * Handles when the input receives input
    * @private
    */
-  handleInput(e) {
-    this.inputType = e.inputType;
+  handleInput() {
     this.value = this.input.value;
 
     /**

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

@@ -0,0 +1,278 @@
+import { html, css, LitElement } from 'lit';
+
+export default class KemetPassword extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          color: inherit;
+          display: none;
+        }
+
+        :host([show]) {
+          display: block;
+        }
+
+        p {
+          margin: 1.6rem 0;
+        }
+
+        .status {
+          display: grid;
+          align-items: center;
+          grid-template-columns: 1fr auto;
+          line-height: 1;
+          margin-top: 0.8rem;
+        }
+
+        .status > span {
+          text-transform: capitalize;
+        }
+
+        .status--weak,
+        .status--better {
+          color: var(--kemet-color-error);
+        }
+
+        .status--strong {
+          color: var(--kemet-color-success);
+        }
+
+        .indicator {
+          display: flex;
+          gap: 0.4rem;
+          margin: 0;
+          list-style: none;
+        }
+
+        .indicator li {
+          width: 1.6rem;
+          height: 0.2rem;
+          background-color: var(--fds-color--gray2);
+        }
+
+        .status--weak .indicator li:nth-child(1) {
+          background-color: var(--kemet-color-error);
+        }
+
+        .status--better .indicator li:nth-child(1),
+        .status--better .indicator li:nth-child(2) {
+          background-color: var(--kemet-color-error);
+        }
+
+        .status--strong .indicator li {
+          background-color: var(--kemet-color-success);
+        }
+
+        .rules {
+          color: var(--kemet-color-primary);
+          list-style: none;
+          font-size: 90%;
+          padding-left: 2rem;
+        }
+
+        .rules li {
+          position: relative;
+        }
+
+        .rules kemet-icon {
+          color: var(--kemet-color-success);
+          position: absolute;
+          left: -2.4rem;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * An array of objects containing the rules the password must meet
+       */
+      rules: {
+        type: Array,
+      },
+      /**
+       * Controls the display of the component
+       */
+      show: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * The value of the input component
+       */
+      value: {
+        type: String,
+      },
+      /**
+       * A message that is above the rules
+       */
+      message: {
+        type: String,
+      },
+      /**
+       * The strength of the password. Weak | Better | Strong
+       */
+      strength: {
+        type: String,
+      },
+      icon: {
+        type: String,
+      },
+      iconSize: {
+        type: Number,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    // managed properties
+    this.rules = [
+      { pattern: '(?=.{8,}$)', message: 'At least 8 characters long' },
+      { pattern: '(?=.*[a-z])(?=.*[A-Z])', message: 'Uppercase and lowercase' },
+      { pattern: '(?=.*[0-9])', message: 'At least one number (0-9)' },
+    ];
+    this.message = 'Please make sure you meet all the requirements.';
+    this.icon = 'check2';
+    this.iconSize = 16;
+  }
+
+  firstUpdated() {
+    // standard properties
+    this.field = this.closest('kemet-field');
+    this.input = this.field.querySelector('[slot="input"]');
+
+    // managed properties
+    this.slug = this.field.slug;
+
+    // events listeners
+    this.input.addEventListener('kemet-input-input', this.handleInput.bind(this));
+  }
+
+  render() {
+    return html`
+      <div role="alert" aria-live="assertive">
+        <div class="status status--${this.strength}" part="status">
+          <span>${this.strength}</span>
+          <ul class="indicator" part="indicator">
+            <li></li>
+            <li></li>
+            <li></li>
+          </ul>
+        </div>
+        <p class="message" part="message">${this.message}</p>
+        <ul class="rules" part="rules">
+          ${this.makeRules()}
+        </ul>
+      </div>
+    `;
+  }
+
+  /**
+   * Makes the list of rules
+   * @private
+   * @returns {templateResults} the criteria rules
+   */
+  makeRules() {
+    if (this.input) {
+      const rules = this.rules.map((rule, index) => {
+        const regExp = new RegExp(rule.pattern);
+        const meetsCriteria = regExp.test(this.input.value);
+        this.rules[index].meetsCriteria = meetsCriteria;
+        return html`<li>${this.makeCheckIcon(meetsCriteria)} ${rule.message}</li>`;
+      });
+
+      return rules;
+    }
+
+    return null;
+  }
+
+  /**
+   * Makes the check icon if the criteria has been met
+   * @param {boolean} meetsCriteria
+   * @private
+   * @returns {templateResults} an icon component
+   */
+  makeCheckIcon(meetsCriteria) {
+    if (meetsCriteria) {
+      return html`<kemet-icon icon=${this.icon} size=${this.iconSize}></kemet-icon>`;
+    }
+
+    return null;
+  }
+
+  /**
+   * Handles the kemet-input-input event
+   * @param {*} event
+   * @private
+   */
+  handleInput(event) {
+    this.value = event.detail;
+    this.setStrength();
+    this.visibility();
+  }
+
+  /**
+   * Determines the strength of the password
+   * @private
+   */
+  setStrength() {
+    // We use a setTimeout here because makeRules adds the meetsCriteria
+    // property to the rules. We need that to be set by render() before
+    // setting the Strength because the percentage calc is based on it
+    setTimeout(() => {
+      const totalRules = this.rules.length;
+      const metRules = this.rules.filter(rule => rule.meetsCriteria).length;
+      const metRulesPercentage = Math.round((metRules / totalRules) * 100) / 100;
+
+      if (metRulesPercentage <= 0.33) {
+        this.strength = 'weak';
+        this.status = 'error';
+      }
+
+      if (metRulesPercentage > 0.33 && metRulesPercentage <= 0.67) {
+        this.strength = 'better';
+        this.status = 'error';
+      }
+
+      if (metRulesPercentage > 0.67) {
+        this.strength = 'strong';
+        this.status = 'success';
+      }
+
+      /**
+       * Fires when there's a change in status.
+       */
+      this.dispatchEvent(
+        new CustomEvent('kemet-password-status', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            status: this.status,
+            validity: { meetsPasswordCriteria: this.status === 'success' },
+            element: this,
+          },
+        }),
+      );
+    }, 1);
+  }
+
+  /**
+   * Determines whether to show or hide the component
+   * @private
+   */
+  visibility() {
+    if (this.value.length > 0) {
+      this.show = true;
+    } else {
+      this.show = false;
+    }
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-password') || customElements.define('kemet-password', KemetPassword);