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

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { html } from 'lit'
import { customElement, property } from 'lit/decorators.js'
import { ref } from 'lit/directives/ref.js'
import { Ref, createRef } from 'lit/directives/ref.js'
import { PktElement } from '@/base-elements/element'
import { PktSlotController } from '@/controllers/pkt-slot-controller'
import '@/components/icon'

export type TLinkCardSkin =
  | 'normal'
  | 'blue'
  | 'beige'
  | 'green'
  | 'gray'
  | 'beige-outline'
  | 'gray-outline'

export interface IPktLinkCard {
  title?: string
  href?: string
  iconName?: string
  external?: boolean
  openInNewTab?: boolean
  skin?: TLinkCardSkin
}

@customElement('pkt-linkcard')
export class PktLinkCard extends PktElement implements IPktLinkCard {
  defaultSlot: Ref<HTMLElement> = createRef()

  @property({ type: String, reflect: true }) title: string = ''
  @property({ type: String, reflect: true }) href: string = '#'
  @property({ type: String, reflect: true }) iconName: string = ''
  @property({ type: Boolean, reflect: true }) external: boolean = false
  @property({ type: Boolean, reflect: true }) openInNewTab: boolean = false
  @property({ type: String, reflect: true }) skin: TLinkCardSkin = 'normal'

  constructor() {
    super()
    this.slotController = new PktSlotController(this, this.defaultSlot)
  }

  render() {
    const classes = ['pkt-linkcard', this.skin && `pkt-linkcard--${this.skin}`]
      .filter(Boolean)
      .join(' ')

    const titleClasses = ['pkt-linkcard__title', this.external && 'pkt-link pkt-link--external']
      .filter(Boolean)
      .join(' ')

    return html`
      <a
        href=${this.href}
        class=${classes}
        target=${this.openInNewTab ? '_blank' : '_self'}
        rel=${this.openInNewTab ?? 'noopener noreferrer'}
      >
        ${this.iconName && html`<pkt-icon class="pkt-link__icon" name="${this.iconName}" />`}
        ${this.title && html`<div class=${titleClasses}>${this.title}</div>`}

        <div class="pkt-linkcard__text" ${ref(this.defaultSlot)}></div>
      </a>
    `
  }
}