@cfpb/cfpb-design-system/src/elements/cfpb-label/index.js

CFPB's UI framework

import { LitElement, html, css, unsafeCSS } from 'lit';
import { defineComponent } from '../cfpb-utilities/shared-config';
import styles from './styles.component.scss?inline';
import { ifDefined } from 'lit/directives/if-defined.js';

/**
 *
 * @element cfpb-label.
 * @slot label - The content for the label text.
 * @slot helper - The content for the label helper text.
 */
export class CfpbLabel extends LitElement {
  static styles = css`
    ${unsafeCSS(styles)}
  `;

  /**
   * @property {boolean} block - Whether this has block or inline helper text.
   * @property {string} for - Associate the label with an ID elsewhere.
   * @returns {object} The map of properties.
   */
  static properties = {
    block: { type: Boolean, reflect: true },
    for: { type: String },
  };

  constructor() {
    super();
    this.block = false;
    this.for = '';
  }

  get #helperClass() {
    let helperClass = 'a-label__helper';
    if (this.block) {
      helperClass += ' a-label__helper--block';
    }

    return helperClass;
  }

  render() {
    return html`
      <label
        class="a-label a-label--heading"
        for=${ifDefined(this.for && this.for.trim() ? this.for : undefined)}
      >
        <slot name="label"></slot>
        <small class=${this.#helperClass}>
          <slot name="helper"></slot>
        </small>
      </label>
    `;
  }

  static init() {
    defineComponent('cfpb-label', CfpbLabel);
  }
}