@cfpb/cfpb-design-system/src/elements/cfpb-tag-topic/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';

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

  /**
   * @property {string} href - href attribute, if this is a topic link.
   * @property {boolean} siblingOfJumpLink
   *   Whether the preceding sibling is a jump link or not.
   * @returns {object} The map of properties.
   */
  static properties = {
    href: { type: String, reflect: true },
    siblingOfJumpLink: { type: Boolean },
  };

  /*
   * @property {string} href - The URL to link to (makes the tag a link).
   * @property {boolean} siblingOfJumpLink
   *   Whether the preceding sibling is a link or not. This is used to stack the
   *   divider lines between the links at mobile.
   */
  constructor() {
    super();
    this.href = '';
    this.siblingOfJumpLink = false;
  }

  async focus() {
    // Wait for UI to settle.
    await this.updateComplete;

    this.shadowRoot.querySelector('.a-tag-topic').focus();
  }

  get #tagClass() {
    let tagClass = 'a-tag-topic';

    if (this.siblingOfJumpLink) {
      tagClass += ' a-tag-topic--no-top-border';
    }

    return tagClass;
  }

  render() {
    const bullet = html`<span class="a-tag-topic__bullet" aria-hidden="true"
      >•</span
    >`;
    const slot =
      this.href === ''
        ? html`<span class="a-tag-topic"
            >${bullet}<span class="a-tag-topic__text"><slot></slot></span
          ></span>`
        : html`<a class=${this.#tagClass} href=${this.href}
            >${bullet}<span class="a-tag-topic__text"><slot></slot></span
          ></a>`;
    return html`${slot}`;
  }

  static init() {
    defineComponent('cfpb-tag-topic', CfpbTagTopic);
  }
}