@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 { PktElementWithSlot } from '@/base-elements/element-with-slot'
import { slotContent } from '@/directives/slot-content'
import '@/components/icon'
import { ifDefined } from 'lit/directives/if-defined.js'

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

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

export class PktLinkCard extends PktElementWithSlot implements IPktLinkCard {
  @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'

  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=${ifDefined(this.openInNewTab ? 'noopener noreferrer' : undefined)}
      >
        ${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">${slotContent(this)}</div>
      </a>
    `
  }
}

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