@oslokommune/punkt-elements/src/components/helptext/helptext.ts

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { PktElementWithSlot } from '@/base-elements/element-with-slot'
import { html, nothing } from 'lit'
import { unsafeHTML } from 'lit/directives/unsafe-html.js'
import { classMap } from 'lit/directives/class-map.js'
import { customElement, property, state } from 'lit/decorators.js'
import { uuidish } from 'shared-utils/utils'
import specs from 'componentSpecs/input-wrapper.json'
import '@/components/icon'
import { slotContent } from '@/directives/slot-content'

export class PktHelptext extends PktElementWithSlot {
  @property({ type: String, reflect: true })
  forId: string = uuidish()

  @property({ type: String })
  helptext: string = ''

  @property({ type: String })
  helptextDropdown: string = ''

  @property({ type: String })
  helptextDropdownButton: string = specs.props.helptextDropdownButton.default

  @state() isHelpTextOpen: boolean = false

  render() {
    const toggleDropdown = () => {
      const isOpen = !this.isHelpTextOpen
      this.isHelpTextOpen = isOpen
      this.dispatchEvent(
        new CustomEvent('toggleHelpText', {
          bubbles: true,
          detail: { isOpen },
        }),
      )
    }

    const helptextClasses = classMap({
      'pkt-inputwrapper__helptext-container': true,
      'pkt-inputwrapper__has-helptext':
        this.helptext || this.helptextDropdown || this.hasSlotContent(),
    })

    const helptextDropdown = () => {
      if (this.helptextDropdown) {
        return html`<div class="pkt-inputwrapper__helptext-expandable">
          <button
            class="pkt-link pkt-link--icon-right pkt-btn pkt-btn--small pkt-btn--tertiary pkt-btn--icon-right"
            type="button"
            @click=${toggleDropdown}
          >
            <pkt-icon
              class="pkt-btn__icon"
              name="${this.isHelpTextOpen ? 'chevron-thin-up' : 'chevron-thin-down'}"
            ></pkt-icon>
            <span class="pkt-btn__text">${unsafeHTML(this.helptextDropdownButton)}</span>
          </button>
          <div
            class="${classMap({
              'pkt-inputwrapper__helptext': true,
              'pkt-inputwrapper__helptext-expandable-open': this.isHelpTextOpen,
              'pkt-inputwrapper__helptext-expandable-closed': !this.isHelpTextOpen,
            })}"
          >
            ${unsafeHTML(this.helptextDropdown)}
          </div>
        </div>`
      } else {
        return nothing
      }
    }

    const helptextElement = () => {
      return html`<div class="${helptextClasses}">
        <div class="pkt-inputwrapper__helptext" id="${this.forId}-helptext">
          <div class="pkt-contents" name="helptext">${slotContent(this)}</div>
          ${this.helptext && unsafeHTML(this.helptext)}
        </div>
        ${helptextDropdown()}
      </div>`
    }

    return html`${helptextElement()}`
  }
}

try {
  customElement('pkt-helptext')(PktHelptext)
} catch (e) {
  console.warn('Forsøker å definere <pkt-helptext>, men den er allerede definert')
}