login-gov-component.js

login-gov-component.js

import { html, LitElement } from "lit";
import { customElement, property } from "lit/decorators.js";
import { submit } from "@open-wc/form-helpers";
import { importMdwdsLinkTag } from "../../lib/mdwdsAssetsPath.js";

@customElement("login-gov-button")
export class LoginGovButton extends LitElement {
  @property({ type: Boolean })
  big = false;

  @property({ type: String })
  color = "primary";

  submit() {
    const form = this.closest("form");
    if (form) {
      submit(form);
    } else {
      console.error("submit button is not inside of a form");
    }
  }

  render() {
    return html`
      ${importMdwdsLinkTag}
      <style>
        /*
        Login.gov button styles copied verbatim from:
        https://developers.login.gov/user-experience/sign-in-sign-out/
        */

        .login-button__logo {
          margin-left: 3px;
        }
        .login-button.login-button--primary-lighter {
          color: #112e51;
          background-color: #ebf3fa;
        }
        .login-button.login-button--primary-lighter:hover {
          background-color: #cedced;
        }
        .login-button.login-button--primary {
          color: #112e51;
          background-color: #fff;
          border: 1px solid #767676;
        }
        .login-button.login-button--primary:hover {
          background-color: #ebf3fa;
          border: 1px solid #767676;
        }
        .login-button.login-button--primary-darker {
          color: #fff;
          background-color: #112e51;
        }
        .login-button.login-button--primary-darker:hover {
          background-color: #0c213a;
        }
      </style>
      <button
        class="usa-button ${this.big ? "usa-button--big" : ""}
        login-button login-button--${this.color}"
        type="submit"
        @click=${{ handleEvent: () => this.submit(), once: true }}
      >
        <slot></slot>
        ${loginGovSVG(this.big, this.color)}
      </button>
    `;
  }
}

function loginGovSVG(big, color) {
  let width, height, textColor, keyholeColor;
  if (big) {
    width = "11.1rem";
    height = "1.5rem";
  } else {
    width = "7.4rem";
    height = "1rem";
  }

  if (color == "primary" || color == "primary-lighter") {
    keyholeColor = "#fff";
    textColor = "#112e51";
  } else if (color == "primary-darker") {
    keyholeColor = "#fff";
    textColor = "#fff";
  } else {
    keyholeColor = "#fff";
    textColor = "#fff";
  }

  return html`
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 292.1 39.47"
      role="img"
      class="login-button__logo"
      width="${width}"
      height="${height}"
      aria-label="Login.gov"
    >
      <path fill="${keyholeColor}" d="M7.44 6.89h17.2v22.06H7.44z"></path>
      <path
        fill="${textColor}"
        d="M53.45 5.28h-6.16v27.31h17.87v-5.38H53.45zm30.76-.19c-8.35 0-14.67 5.89-14.67 13.85s6.32 13.93 14.67 13.93 14.67-6 14.67-13.93S92.56 5.09 84.21 5.09m.08 22.39a8.49 8.49 0 0 1-8.43-8.54 8.4 8.4 0 0 1 8.43-8.47 8.29 8.29 0 0 1 8.27 8.47 8.36 8.36 0 0 1-8.27 8.54m35.36-17.05a11.43 11.43 0 0 1 7.49 3l3.47-4.41a17.2 17.2 0 0 0-11-4c-8.51 0-14.9 6-14.9 13.85s6.29 13.99 14.58 13.99a20.2 20.2 0 0 0 11.08-3.55V17.57h-10.11v4.82H125V26a12.4 12.4 0 0 1-5.34 1.48 8.52 8.52 0 1 1 0-17zm19.61-5.15h6.17v27.31h-6.17zm34.53 17.56L160.52 5.28h-5.61v27.31h5.89V15.07l13.22 17.52h5.62V5.28h-5.85zm17.47 2.85a3.39 3.39 0 0 0-3.47 3.56 3.47 3.47 0 1 0 6.94 0 3.36 3.36 0 0 0-3.47-3.56m23.15-15.26a11.43 11.43 0 0 1 7.49 3l3.47-4.41a17.2 17.2 0 0 0-11-4c-8.51 0-14.9 6-14.9 13.85s6.28 13.93 14.55 13.93a20.2 20.2 0 0 0 11.08-3.55V17.57H215v4.82h4.77V26a12.4 12.4 0 0 1-5.34 1.48 8.52 8.52 0 1 1 0-17zm32.23-5.34C238.29 5.09 232 11 232 18.94s6.32 13.93 14.67 13.93 14.67-6 14.67-13.93S255 5.09 246.64 5.09m.08 22.39a8.49 8.49 0 0 1-8.43-8.54 8.4 8.4 0 0 1 8.43-8.47 8.29 8.29 0 0 1 8.28 8.47 8.36 8.36 0 0 1-8.28 8.54m39.02-22.2-7.49 20.6-7.45-20.6h-6.63l10.73 27.31h6.36L292.1 5.28z"
      ></path>
      <path
        fill="#e21d3e"
        d="m11.38 25.34 1.45-8.28a4.39 4.39 0 0 1 2.71-7.86V0H4.34A4.34 4.34 0 0 0 0 4.34v21.28a2.6 2.6 0 0 0 .26 1.16c.94 1.9 4.65 8 15.27 12.69V25.7a24.3 24.3 0 0 1-4.15-.36"
      ></path>
      <path
        fill="#b51e23"
        d="M26.72 0H15.53v9.19A4.39 4.39 0 0 1 18.28 17l1.45 8.32a24.3 24.3 0 0 1-4.2.36v13.79C26.14 34.8 29.86 28.68 30.8 26.79a2.6 2.6 0 0 0 .26-1.16V4.34A4.34 4.34 0 0 0 26.72 0"
      ></path>
      <title>Login.gov</title>
    </svg>
  `;
}