@oslokommune/punkt-elements 12.17.2 → 12.18.1

package/src/components/card/card.ts

@@ -0,0 +1,78 @@
+import { classMap } from 'lit/directives/class-map.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
+import { customElement, property } from 'lit/decorators.js'
+import { html, nothing } from 'lit'
+import { IPktTag } from '../tag/tag'
+import { PktElement } from '@/base-elements/element'
+import { PktSlotController } from '@/controllers/pkt-slot-controller'
+import { ref, createRef, Ref } from 'lit/directives/ref.js'
+import specs from 'componentSpecs/card.json'
+import '../icon/icon'
+import '../tag/tag'
+
+export type TCardSkin = 'outlined' | 'gray' | 'beige' | 'green' | 'blue'
+export type TDirection = 'portrait' | 'landscape'
+
+@customElement('pkt-card')
+export class PktCard extends PktElement {
+  defaultSlot: Ref<HTMLElement> = createRef()
+
+  constructor() {
+    super()
+    this.slotController = new PktSlotController(this, this.defaultSlot)
+  }
+
+  @property({ type: String, reflect: true }) skin: TCardSkin = specs.props.skin.default as TCardSkin
+  @property({ type: String, reflect: true }) direction: TDirection = specs.props.direction
+    .default as TDirection
+  @property({ type: Object, reflect: true }) image: { src: string; alt: string } = {
+    src: '',
+    alt: '',
+  }
+  @property({ type: String, reflect: true }) heading: string = ''
+  @property({ type: String, reflect: true }) subheading: string = ''
+  @property({ type: Array, reflect: true }) tags: (Omit<IPktTag, 'closeTag'> & { text: string })[] =
+    []
+
+  connectedCallback() {
+    super.connectedCallback()
+  }
+
+  render() {
+    const classes = {
+      'pkt-card': true,
+      [`pkt-card--${this.skin}`]: this.skin,
+      [`pkt-card--${this.direction}`]: this.direction,
+    }
+
+    return html`
+      <div class=${classMap(classes)}>
+        ${this.image.src &&
+        html`
+          <div class="pkt-card__image">
+            <img src=${this.image.src} alt=${this.image.alt || ''} />
+          </div>
+        `}
+        <div class="pkt-card__wrapper">
+          ${this.tags.length > 0
+            ? html`
+                <div class="pkt-card__tags">
+                  ${this.tags.map(
+                    (tag) => html`
+                      <pkt-tag textStyle="normal-text" size="medium" skin=${ifDefined(tag.skin)}>
+                        ${tag.text}
+                      </pkt-tag>
+                    `,
+                  )}
+                </div>
+              `
+            : nothing}
+          ${this.heading && html`<h3 class="pkt-txt-30-medium">${this.heading}</h3>`}
+          ${this.subheading && html`<p class="pkt-txt-20-light">${this.subheading}</p>`}
+          ${this.defaultSlot &&
+          html`<div class="pkt-card__content" ${ref(this.defaultSlot)}></div>`}
+        </div>
+      </div>
+    `
+  }
+}

package/src/components/card/index.ts

@@ -1,77 +1,4 @@
-import { classMap } from 'lit/directives/class-map.js'
-import { customElement, property } from 'lit/decorators.js'
-import { html, nothing } from 'lit'
-import { IPktTag } from '../tag'
-import { PktElement } from '../element'
-import { PktSlotController } from '../../controllers/pkt-slot-controller'
-import { ref, createRef, Ref } from 'lit/directives/ref.js'
-import specs from 'componentSpecs/card.json'
-import '../icon'
-import '../tag'
-
-export type ICardSkin = 'outlined' | 'gray' | 'beige' | 'green' | 'blue'
-export type IDirection = 'portrait' | 'landscape'
-
-@customElement('pkt-card')
-export class PktCard extends PktElement {
-  defaultSlot: Ref<HTMLElement> = createRef()
-
-  constructor() {
-    super()
-    this.slotController = new PktSlotController(this, this.defaultSlot)
-  }
-
-  @property({ type: String, reflect: true }) skin: ICardSkin = specs.props.skin.default as ICardSkin
-  @property({ type: String, reflect: true }) direction: IDirection = specs.props.direction
-    .default as IDirection
-  @property({ type: Object, reflect: true }) image: { src: string; alt: string } = {
-    src: '',
-    alt: '',
-  }
-  @property({ type: String, reflect: true }) heading: string = ''
-  @property({ type: String, reflect: true }) subheading: string = ''
-  @property({ type: Array, reflect: true }) tags: (Omit<IPktTag, 'closeTag'> & { text: string })[] =
-    []
-
-  connectedCallback() {
-    super.connectedCallback()
-  }
-
-  render() {
-    const classes = {
-      'pkt-card': true,
-      [`pkt-card--${this.skin}`]: this.skin,
-      [`pkt-card--${this.direction}`]: this.direction,
-    }
-
-    return html`
-      <div class=${classMap(classes)}>
-        ${this.image.src &&
-        html`
-          <div class="pkt-card__image">
-            <img src=${this.image.src} alt=${this.image.alt || ''} />
-          </div>
-        `}
-        <div class="pkt-card__wrapper">
-          ${this.tags.length > 0
-            ? html`
-                <div class="pkt-card__tags">
-                  ${this.tags.map(
-                    (tag) => html`
-                      <pkt-tag textStyle="normal-text" size="medium" skin=${tag.skin}>
-                        ${tag.text}
-                      </pkt-tag>
-                    `,
-                  )}
-                </div>
-              `
-            : nothing}
-          ${this.heading && html`<h3 class="pkt-txt-30-medium">${this.heading}</h3>`}
-          ${this.subheading && html`<p class="pkt-txt-20-light">${this.subheading}</p>`}
-          ${this.defaultSlot &&
-          html`<div class="pkt-card__content" ${ref(this.defaultSlot)}></div>`}
-        </div>
-      </div>
-    `
-  }
-}
+import { PktCard } from './card'
+import type { TCardSkin, TDirection } from './card'
+export { PktCard, TCardSkin, TDirection }
+export default PktCard