kemet-ui 1.0.0 → 1.2.0

package/dist/components/{kemet-input.js → 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);

package/dist/components/kemet-tracker/kemet-tracker-step.js

@@ -0,0 +1,239 @@
+import { html, css, LitElement } from 'lit';
+
+export default class KemetTrackerStep extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          --kemet-tracker-step-dot-size: 50px;
+          --kemet-tracker-step-dot-size-mobile: 25px;
+          --kemet-tracker-step-dot-gap: 4px;
+          --kemet-tracker-step-standard-line-weight: 1px;
+          --kemet-tracker-step-completed-line-weight: 3px;
+          --kemet-tracker-step-dot-transition: all 300ms ease-in-out;
+
+          position: relative;
+          width: 100%;
+          text-align: center;
+        }
+
+        .dot {
+          font-size: var(--kemet-tracker-step-dot-font-size, 90%);
+          color: var(--kemet-tracker-step-dot-color, var(--kemet-color-primary));
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin: 0 auto;
+          position: relative;
+          z-index: 1;
+          width: var(--kemet-tracker-step-dot-size);
+          height: var(--kemet-tracker-step-dot-size);
+          border-radius: 100%;
+          transition: var(--kemet-tracker-step-dot-transition);
+          background-color: var(--kemet-tracker-step-dot-background-color, var(--kemet-color-white));
+        }
+
+        .dot::after {
+          content: "";
+          width: unset;
+          height: unset;
+          position: absolute;
+          top: var(--kemet-tracker-step-dot-gap);
+          left: var(--kemet-tracker-step-dot-gap);
+          right: var(--kemet-tracker-step-dot-gap);
+          bottom: var(--kemet-tracker-step-dot-gap);
+          z-index: -1;
+          border-radius: 100%;
+          transition: var(--kemet-tracker-step-dot-transition);
+          border: var(--kemet-tracker-step-dot-border, 1px solid var(--kemet-color-primary));
+          background-color: var(--kemet-tracker-step-dot-fill-color, transparent);
+        }
+
+        :host([completed]) .dot {
+          color: var(--kemet-tracker-step-completed-color, var(--kemet-color-white));
+        }
+
+        :host([completed]) .dot::after {
+          border: 0;
+          background-color: var(--kemet-tracker-step-completed-fill-color, var(--kemet-color-success));
+        }
+
+        :host([current]) .dot.animate {
+          color: var(--kemet-tracker-step-current-color, var(--kemet-color-white));
+        }
+
+        :host([current]) .dot.animate::after {
+          border: 0;
+          background-color: var(--kemet-tracker-step-current-fill-color, var(--kemet-color-primary));
+        }
+
+        :host([mobile]) .dot {
+          width: var(--kemet-tracker-step-dot-size-mobile);
+          height: var(--kemet-tracker-step-dot-size-mobile);
+        }
+
+        .line {
+          display: block;
+          position: absolute;
+          left: 50%;
+          right: 0;
+          bottom: 0;
+          width: 100%;
+
+          /* standard */
+          top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-standard-line-weight)) / 2);
+          height: var(--kemet-tracker-step-standard-line-weight);
+          background-color: var(--kemet-tracker-step-line-color, var(--kemet-color-primary));
+        }
+
+        .line.completed {
+          width: 100%;
+          transform: scaleX(0);
+          transform-origin: left center;
+          top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-completed-line-weight)) / 2);
+          height: var(--kemet-tracker-step-completed-line-weight);
+          background-color: var(--kemet-tracker-step-completed-line-color, var(--kemet-color-primary));
+          animation-name: grow;
+          animation-delay: 1s;
+          animation-duration: 600ms;
+          animation-fill-mode: forwards;
+        }
+
+        :host([mobile]) .line {
+          top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-standard-line-weight)) / 2);
+        }
+
+        :host([mobile]) .line.completed {
+          top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-completed-line-weight)) / 2);
+        }
+
+        @keyframes grow {
+          from { transform: scaleX(0); }
+          to { transform: scaleX(1); }
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The current step number
+       */
+      step: {
+        type: Number,
+      },
+      /**
+       * Determines whether or not a step renders as complete
+       */
+      completed: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Determines whether or not a step renders as the current step
+       */
+      current: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Is automatically added to the last step
+       */
+      last: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Determines if a step should render as mobile
+       */
+      mobile: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Hides the label inside of a dot
+       */
+      hideDotContent: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'hide-dot-content',
+      },
+      /**
+       * The icon size for the completed check mark
+       */
+      completedSize: {
+        type: Number,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.completedSize = 16;
+  }
+
+  firstUpdated() {
+    this.tracker = this.closest('kemet-tracker');
+  }
+
+  render() {
+    return html`
+      ${this.makeLine()}
+      ${this.makeCompletedLine()}
+      <div class="dot" part="dot">${this.makeDotContent()}</div>
+      ${this.makeSlotContent()}
+    `;
+  }
+
+  makeLine() {
+    if (!this.last) {
+      return html`<div class="line" part="line"></div>`;
+    }
+
+    return null;
+  }
+
+  makeCompletedLine() {
+    if (this.completed && !this.last) {
+      return html`<div class="line completed" part="completed-line" @animationend=${() => this.handleCompletedLineEnd()}></div>`;
+    }
+
+    return null;
+  }
+
+  makeDotContent() {
+    if (this.completed && !this.mobile && !this.hideDotContent) {
+      return html`
+        <kemet-icon icon="check2" size=${this.completedSize}></kemet-icon>
+      `;
+    }
+
+    if (!this.mobile && !this.hideDotContent) {
+      return html`
+        <span>${this.step}/${this.tracker?.total}</span>
+      `;
+    }
+
+    return null;
+  }
+
+  makeSlotContent() {
+    if (!this.mobile) {
+      return html`<slot></slot>`;
+    }
+
+    return null;
+  }
+
+  handleCompletedLineEnd() {
+    const currentDot = this.tracker.querySelector('[current]').shadowRoot.querySelector('.dot');
+
+    if (currentDot) {
+      currentDot.classList.add('animate');
+    }
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-tracker-step') || customElements.define('kemet-tracker-step', KemetTrackerStep);