@oslokommune/punkt-elements 12.37.6 → 12.38.0

package/src/components/card/card.ts

@@ -6,78 +6,247 @@ import { IPktTag } from '@/components/tag'
 import { PktElement } from '@/base-elements/element'
 import { PktSlotController } from '@/controllers/pkt-slot-controller'
 import { ref, createRef, Ref } from 'lit/directives/ref.js'
+import { IPktHeading } from '../heading'
 import specs from 'componentSpecs/card.json'
 import '@/components/icon'
 import '@/components/tag'
+import { IAriaAttributes } from '@/types/aria'
 
-export type TCardSkin = 'outlined' | 'gray' | 'beige' | 'green' | 'blue'
+export type TCardSkin = 'outlined' | 'outlined-beige' | 'gray' | 'beige' | 'green' | 'blue'
 export type TDirection = 'portrait' | 'landscape'
+export type TCardPadding = 'none' | 'standard'
+export type TCardImageShape = 'square' | 'round'
+export type TCardTagPosition = 'top' | 'bottom'
+
+export interface IPktCard {
+  ariaLabel?: IAriaAttributes['aria-label']
+  author?: string | null
+  date?: string | null
+  direction?: TDirection
+  heading?: string
+  headingLevel?: IPktHeading['level']
+  image?: { src: string; alt: string }
+  imageShape?: TCardImageShape
+  clickCardLink?: string | null
+  openLinkInNewTab?: boolean | null
+  borderOnHover?: boolean | null
+  padding?: TCardPadding
+  skin?: TCardSkin
+  subheading?: string
+  tagPosition?: TCardTagPosition
+  tags?: (Omit<IPktTag, 'closeTag'> & { text: string })[]
+}
 
 @customElement('pkt-card')
-export class PktCard extends PktElement {
+export class PktCard extends PktElement implements IPktCard {
+  // Refs
+
   defaultSlot: Ref<HTMLElement> = createRef()
 
+  //Constructor
+
   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 } = {
+  // Properties
+
+  @property({ type: String }) ariaLabel: string = ''
+  @property({ type: String }) author: string | null = null
+  @property({ type: Boolean }) borderOnHover: boolean = true
+  @property({ type: String, reflect: true }) clickCardLink: IPktCard['clickCardLink'] = null
+  @property({ type: String }) date: string | null = null
+  @property({ type: String }) direction: TDirection = specs.props.direction.default as TDirection
+  @property({ type: String }) heading: string = ''
+  @property({ type: Number }) headinglevel: IPktHeading['level'] = 3
+  @property({ type: Object }) 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 })[] =
-    []
+  @property({ type: String }) imageShape: TCardImageShape = 'square'
+  @property({ type: Boolean }) openLinkInNewTab: boolean = false
+  @property({ type: String }) padding: TCardPadding = specs.props.padding.default as TCardPadding
+  @property({ type: String }) skin: TCardSkin = specs.props.skin.default as TCardSkin
+  @property({ type: String }) subheading: string = ''
+  @property({ type: String }) tagPosition: 'top' | 'bottom' = 'top'
+  @property({ type: Array }) tags: (Omit<IPktTag, 'closeTag'> & { text: string })[] = []
 
   connectedCallback() {
     super.connectedCallback()
   }
 
+  // Render methods
+
+  // Main render method
+  // prettier-ignore
   render() {
     const classes = {
       'pkt-card': true,
       [`pkt-card--${this.skin}`]: this.skin,
       [`pkt-card--${this.direction}`]: this.direction,
+      [`pkt-card--padding-${this.padding}`]: this.padding,
+      [`pkt-card--border-on-hover`]: this.borderOnHover,
+     
     }
 
+    //
+    const ariaLabelLenke =
+      this.ariaLabel?.trim() || (this.heading ? `${this.heading} lenkekort` : 'lenkekort')
+    const ariaLabelVanlig = this.ariaLabel?.trim() || (this.heading ? this.heading : 'kort')
+
     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>
-        `}
+      <article
+        class=${classMap(classes)}
+        aria-label=${ifDefined(this.clickCardLink ? ariaLabelLenke : ariaLabelVanlig)}
+      >
+        ${this.renderImage()}
         <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)}
-                        iconName=${ifDefined(tag.iconName)}
-                      >
-                        ${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>`}
+          ${this.tagPosition === 'top' ? this.renderTags() : nothing} 
+          ${this.renderHeader()}
+          ${this.renderSlot()} 
+          ${this.tagPosition === 'bottom' ? this.renderTags() : nothing}
+          ${this.renderCreditline()}
+        </div>
+      </article>
+    `
+  }
+
+  // Render methods for different parts of the card
+  renderImage() {
+    const imageClasses = {
+      'pkt-card__image': true,
+      [`pkt-card__image-${this.imageShape}`]: this.imageShape,
+    }
+
+    return html`
+      ${this.image.src &&
+      html`
+        <div class=${classMap(imageClasses)}>
+          <img src=${this.image.src} alt=${this.image.alt || ''} />
         </div>
-      </div>
+      `}
+    `
+  }
+
+  // Do not render heading if link is present, render link heading instead
+  // Combine the rendering for headings into a renderHeader method
+  renderHeading() {
+    return html`
+      ${this.heading && !this.clickCardLink
+        ? html`
+            <pkt-heading
+              class="pkt-card__heading"
+              .level=${this.headinglevel || 3}
+              size="medium"
+              nospacing
+            >
+              ${this.heading}
+            </pkt-heading>
+          `
+        : nothing}
+    `
+  }
+
+  renderLinkHeading() {
+    return html`
+      ${this.clickCardLink
+        ? html`
+            <pkt-heading
+              class="pkt-card__link-heading pkt-card__heading"
+              .level=${this.headinglevel || 3}
+              size="medium"
+              nospacing
+            >
+              <a
+                class="pkt-card__link"
+                href=${this.clickCardLink}
+                target=${this.openLinkInNewTab ? '_blank' : '_self'}
+                >${this.heading}</a
+              >
+            </pkt-heading>
+          `
+        : nothing}
+    `
+  }
+
+  renderSubheading() {
+    return html`
+      ${this.subheading ? html` <p class="pkt-card__subheading ">${this.subheading}</p> ` : nothing}
+    `
+  }
+
+  // Render header
+
+  // prettier-ignore
+  renderHeader() {
+    const hasHeading = !!this.heading || !!this.subheading
+    return html`
+      ${hasHeading
+        ? html`
+            <header class="pkt-card__header">
+              ${this.renderHeading()} 
+              ${this.renderLinkHeading()} 
+              ${this.renderSubheading()}
+            </header>
+          `
+        : nothing}
+    `
+  }
+
+  renderTags() {
+    const tagClasses = {
+      'pkt-card__tags': true,
+      [`pkt-card__tags-${this.tagPosition}`]: this.tagPosition,
+    }
+    return html`
+      ${this.tags.length > 0
+        ? html`
+            <div
+              class=${classMap(tagClasses)}
+              role="list"
+              aria-label=${this.tags.length > 1 ? 'merkelapper' : 'merkelapp'}
+            >
+              ${this.tags.map(
+                (tag) => html`
+                  <pkt-tag
+                    role="listitem"
+                    textStyle="normal-text"
+                    size="medium"
+                    skin=${ifDefined(tag.skin)}
+                    iconName=${ifDefined(tag.iconName)}
+                  >
+                    ${tag.text}
+                  </pkt-tag>
+                `,
+              )}
+            </div>
+          `
+        : nothing}
+    `
+  }
+
+  renderSlot() {
+    return html`
+      ${this.defaultSlot &&
+      html`<section class="pkt-card__content" ${ref(this.defaultSlot)}></section>`}
+    `
+  }
+
+  renderCreditline() {
+    return html`
+      ${this.author || this.date
+        ? html`
+            <footer class="pkt-card__creditline">
+              ${this.author
+                ? html`<span class="pkt-card__creditline-author">${this.author}</span>`
+                : nothing}
+              ${this.date
+                ? html`<span class="pkt-card__creditline-date">${this.date}</span>`
+                : nothing}
+            </footer>
+          `
+        : nothing}
     `
   }
 }

package/src/components/radiobutton/radiobutton.ts

@@ -67,6 +67,7 @@ export class PktRadioButton extends PktInputElement {
             type="radio"
             role="radio"
             ?disabled=${this.disabled}
+            form=""
             name=${this.name + '-internal'}
             ${ref(this.inputRef)}
             @change=${this.toggleChecked}

package/dist/card-Cyww1yKr.js

@@ -1,94 +0,0 @@
-import { e as m } from "./class-map-KyMqi0fa.js";
-import { o as d } from "./if-defined-BErSJCeJ.js";
-import { P as u, E as g, x as i, n as a, a as f } from "./element-DjjF_tEh.js";
-import { P as k } from "./pkt-slot-controller-DtDaD9q_.js";
-import { e as $, n as v } from "./ref-iIffqQAI.js";
-import "./icon-Beoxup8E.js";
-import "./tag-Cu8afZy8.js";
-const y = {
-  skin: {
-    default: "outlined"
-  },
-  direction: {
-    default: "portrait"
-  }
-}, h = {
-  props: y
-};
-var _ = Object.defineProperty, P = Object.getOwnPropertyDescriptor, r = (o, t, n, p) => {
-  for (var s = p > 1 ? void 0 : p ? P(t, n) : t, c = o.length - 1, l; c >= 0; c--)
-    (l = o[c]) && (s = (p ? l(t, n, s) : l(s)) || s);
-  return p && s && _(t, n, s), s;
-};
-let e = class extends u {
-  constructor() {
-    super(), this.defaultSlot = $(), this.skin = h.props.skin.default, this.direction = h.props.direction.default, this.image = {
-      src: "",
-      alt: ""
-    }, this.heading = "", this.subheading = "", this.tags = [], this.slotController = new k(this, this.defaultSlot);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-  }
-  render() {
-    const o = {
-      "pkt-card": !0,
-      [`pkt-card--${this.skin}`]: this.skin,
-      [`pkt-card--${this.direction}`]: this.direction
-    };
-    return i`
-      <div class=${m(o)}>
-        ${this.image.src && i`
-          <div class="pkt-card__image">
-            <img src=${this.image.src} alt=${this.image.alt || ""} />
-          </div>
-        `}
-        <div class="pkt-card__wrapper">
-          ${this.tags.length > 0 ? i`
-                <div class="pkt-card__tags">
-                  ${this.tags.map(
-      (t) => i`
-                      <pkt-tag
-                        textStyle="normal-text"
-                        size="medium"
-                        skin=${d(t.skin)}
-                        iconName=${d(t.iconName)}
-                      >
-                        ${t.text}
-                      </pkt-tag>
-                    `
-    )}
-                </div>
-              ` : g}
-          ${this.heading && i`<h3 class="pkt-txt-30-medium">${this.heading}</h3>`}
-          ${this.subheading && i`<p class="pkt-txt-20-light">${this.subheading}</p>`}
-          ${this.defaultSlot && i`<div class="pkt-card__content" ${v(this.defaultSlot)}></div>`}
-        </div>
-      </div>
-    `;
-  }
-};
-r([
-  a({ type: String, reflect: !0 })
-], e.prototype, "skin", 2);
-r([
-  a({ type: String, reflect: !0 })
-], e.prototype, "direction", 2);
-r([
-  a({ type: Object, reflect: !0 })
-], e.prototype, "image", 2);
-r([
-  a({ type: String, reflect: !0 })
-], e.prototype, "heading", 2);
-r([
-  a({ type: String, reflect: !0 })
-], e.prototype, "subheading", 2);
-r([
-  a({ type: Array, reflect: !0 })
-], e.prototype, "tags", 2);
-e = r([
-  f("pkt-card")
-], e);
-export {
-  e as P
-};

package/dist/card-DH-3qNgp.cjs

@@ -1,28 +0,0 @@
-"use strict";const h=require("./class-map-DCyaICmy.cjs"),d=require("./if-defined-a3sotaUr.cjs"),t=require("./element-BSypUpzA.cjs"),u=require("./pkt-slot-controller-Da-RgXfS.cjs"),l=require("./ref-BvbyvXRH.cjs");require("./icon-BnKGwYjj.cjs");require("./tag-B9kFYxHg.cjs");const k={skin:{default:"outlined"},direction:{default:"portrait"}},p={props:k};var g=Object.defineProperty,f=Object.getOwnPropertyDescriptor,s=(n,i,e,a)=>{for(var r=a>1?void 0:a?f(i,e):i,c=n.length-1,o;c>=0;c--)(o=n[c])&&(r=(a?o(i,e,r):o(r))||r);return a&&r&&g(i,e,r),r};exports.PktCard=class extends t.PktElement{constructor(){super(),this.defaultSlot=l.e(),this.skin=p.props.skin.default,this.direction=p.props.direction.default,this.image={src:"",alt:""},this.heading="",this.subheading="",this.tags=[],this.slotController=new u.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback()}render(){const i={"pkt-card":!0,[`pkt-card--${this.skin}`]:this.skin,[`pkt-card--${this.direction}`]:this.direction};return t.x`
-      <div class=${h.e(i)}>
-        ${this.image.src&&t.x`
-          <div class="pkt-card__image">
-            <img src=${this.image.src} alt=${this.image.alt||""} />
-          </div>
-        `}
-        <div class="pkt-card__wrapper">
-          ${this.tags.length>0?t.x`
-                <div class="pkt-card__tags">
-                  ${this.tags.map(e=>t.x`
-                      <pkt-tag
-                        textStyle="normal-text"
-                        size="medium"
-                        skin=${d.o(e.skin)}
-                        iconName=${d.o(e.iconName)}
-                      >
-                        ${e.text}
-                      </pkt-tag>
-                    `)}
-                </div>
-              `:t.E}
-          ${this.heading&&t.x`<h3 class="pkt-txt-30-medium">${this.heading}</h3>`}
-          ${this.subheading&&t.x`<p class="pkt-txt-20-light">${this.subheading}</p>`}
-          ${this.defaultSlot&&t.x`<div class="pkt-card__content" ${l.n(this.defaultSlot)}></div>`}
-        </div>
-      </div>
-    `}};s([t.n({type:String,reflect:!0})],exports.PktCard.prototype,"skin",2);s([t.n({type:String,reflect:!0})],exports.PktCard.prototype,"direction",2);s([t.n({type:Object,reflect:!0})],exports.PktCard.prototype,"image",2);s([t.n({type:String,reflect:!0})],exports.PktCard.prototype,"heading",2);s([t.n({type:String,reflect:!0})],exports.PktCard.prototype,"subheading",2);s([t.n({type:Array,reflect:!0})],exports.PktCard.prototype,"tags",2);exports.PktCard=s([t.t("pkt-card")],exports.PktCard);