@oslokommune/punkt-react 12.39.7 → 12.39.8

package/CHANGELOG.md

@@ -5,6 +5,24 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [12.39.8](https://github.com/oslokommune/punkt/compare/12.39.7...12.39.8) (2025-05-19)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+* new, generic prop names for author and date (#2563). 
+
+
+### Chores
+Ingen
+
+---
+
+
 ## [12.39.7](https://github.com/oslokommune/punkt/compare/12.39.6...12.39.7) (2025-05-16)
 
 ### ⚠ BREAKING CHANGES

package/dist/index.d.ts

@@ -123,9 +123,9 @@ export declare interface IPktButton extends ExtendedButton {
 
 export declare interface IPktCard extends PktElType {
     ariaLabel?: string;
-    author?: string | null;
+    metaLead?: string | null;
     borderOnHover?: boolean | null;
-    date?: string | null;
+    metaTrail?: string | null;
     direction?: TDirection;
     heading?: string;
     headingLevel?: IPktHeading['level'];

package/dist/punkt-react.es.js

@@ -25211,7 +25211,7 @@ var FM = Object.defineProperty, $M = Object.getOwnPropertyDescriptor, ki = (r, n
 let ja = class extends Gr {
   //Constructor
   constructor() {
-    super(), this.defaultSlot = dn(), this.ariaLabel = "", this.author = null, this.borderOnHover = !0, this.clickCardLink = null, this.date = null, this.direction = GD.props.direction.default, this.heading = "", this.headinglevel = 3, this.image = {
+    super(), this.defaultSlot = dn(), this.ariaLabel = "", this.metaLead = null, this.borderOnHover = !0, this.clickCardLink = null, this.metaTrail = null, this.direction = GD.props.direction.default, this.heading = "", this.headinglevel = 3, this.image = {
       src: "",
       alt: ""
     }, this.imageShape = "square", this.openLinkInNewTab = !1, this.padding = GD.props.padding.default, this.skin = GD.props.skin.default, this.subheading = "", this.tagPosition = "top", this.tags = [], this.slotController = new za(this, this.defaultSlot);
@@ -25242,7 +25242,7 @@ let ja = class extends Gr {
           ${this.renderHeader()}
           ${this.renderSlot()} 
           ${this.tagPosition === "bottom" ? this.renderTags() : Ve}
-          ${this.renderCreditline()}
+          ${this.renderMetadata()}
         </div>
       </article>
     `;
@@ -25349,12 +25349,12 @@ let ja = class extends Gr {
       ${this.defaultSlot && be`<section class="pkt-card__content" ${Kt(this.defaultSlot)}></section>`}
     `;
   }
-  renderCreditline() {
+  renderMetadata() {
     return be`
-      ${this.author || this.date ? be`
-            <footer class="pkt-card__creditline">
-              ${this.author ? be`<span class="pkt-card__creditline-author">${this.author}</span>` : Ve}
-              ${this.date ? be`<span class="pkt-card__creditline-date">${this.date}</span>` : Ve}
+      ${this.metaLead || this.metaTrail ? be`
+            <footer class="pkt-card__metadata">
+              ${this.metaLead ? be`<span class="pkt-card__metadata-lead">${this.metaLead}</span>` : Ve}
+              ${this.metaTrail ? be`<span class="pkt-card__metadata-trail">${this.metaTrail}</span>` : Ve}
             </footer>
           ` : Ve}
     `;
@@ -25365,7 +25365,7 @@ ki([
 ], ja.prototype, "ariaLabel", 2);
 ki([
   z({ type: String })
-], ja.prototype, "author", 2);
+], ja.prototype, "metaLead", 2);
 ki([
   z({ type: Boolean })
 ], ja.prototype, "borderOnHover", 2);
@@ -25374,7 +25374,7 @@ ki([
 ], ja.prototype, "clickCardLink", 2);
 ki([
   z({ type: String })
-], ja.prototype, "date", 2);
+], ja.prototype, "metaTrail", 2);
 ki([
   z({ type: String })
 ], ja.prototype, "direction", 2);

package/dist/punkt-react.umd.js

@@ -549,7 +549,7 @@ You might need to use a local HTTP server (instead of file://): https://reactjs.
           ${this.iconName&&be`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
           <span ${qt(this.defaultSlot)}></span>
         </span>
-      `}};cu([z({type:Boolean,reflect:!0})],xs.prototype,"closeTag",2),cu([z({type:String,reflect:!0})],xs.prototype,"size",2),cu([z({type:String,reflect:!0})],xs.prototype,"skin",2),cu([z({type:String,reflect:!0})],xs.prototype,"textStyle",2),cu([z({type:String,reflect:!0})],xs.prototype,"iconName",2),cu([z({type:String})],xs.prototype,"type",2),cu([z({type:String})],xs.prototype,"ariaLabel",2),cu([$n()],xs.prototype,"_isClosed",2),cu([$n()],xs.prototype,"_ariaDescription",2),xs=cu([dr("pkt-tag")],xs);const f3={skin:{default:"outlined"},direction:{default:"portrait"},padding:{default:"standard"}},p0={props:f3};var p3=Object.defineProperty,h3=Object.getOwnPropertyDescriptor,ri=(n,r,i,l)=>{for(var c=l>1?void 0:l?h3(r,i):r,h=n.length-1,m;h>=0;h--)(m=n[h])&&(c=(l?m(r,i,c):m(c))||c);return l&&c&&p3(r,i,c),c};let xa=class extends Hr{constructor(){super(),this.defaultSlot=dn(),this.ariaLabel="",this.author=null,this.borderOnHover=!0,this.clickCardLink=null,this.date=null,this.direction=p0.props.direction.default,this.heading="",this.headinglevel=3,this.image={src:"",alt:""},this.imageShape="square",this.openLinkInNewTab=!1,this.padding=p0.props.padding.default,this.skin=p0.props.skin.default,this.subheading="",this.tagPosition="top",this.tags=[],this.slotController=new _a(this,this.defaultSlot)}connectedCallback(){super.connectedCallback()}render(){var r,i;const l={"pkt-card":!0,[`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},c=((r=this.ariaLabel)==null?void 0:r.trim())||(this.heading?`${this.heading} lenkekort`:"lenkekort"),h=((i=this.ariaLabel)==null?void 0:i.trim())||(this.heading?this.heading:"kort");return be`
+      `}};cu([z({type:Boolean,reflect:!0})],xs.prototype,"closeTag",2),cu([z({type:String,reflect:!0})],xs.prototype,"size",2),cu([z({type:String,reflect:!0})],xs.prototype,"skin",2),cu([z({type:String,reflect:!0})],xs.prototype,"textStyle",2),cu([z({type:String,reflect:!0})],xs.prototype,"iconName",2),cu([z({type:String})],xs.prototype,"type",2),cu([z({type:String})],xs.prototype,"ariaLabel",2),cu([$n()],xs.prototype,"_isClosed",2),cu([$n()],xs.prototype,"_ariaDescription",2),xs=cu([dr("pkt-tag")],xs);const f3={skin:{default:"outlined"},direction:{default:"portrait"},padding:{default:"standard"}},p0={props:f3};var p3=Object.defineProperty,h3=Object.getOwnPropertyDescriptor,ri=(n,r,i,l)=>{for(var c=l>1?void 0:l?h3(r,i):r,h=n.length-1,m;h>=0;h--)(m=n[h])&&(c=(l?m(r,i,c):m(c))||c);return l&&c&&p3(r,i,c),c};let xa=class extends Hr{constructor(){super(),this.defaultSlot=dn(),this.ariaLabel="",this.metaLead=null,this.borderOnHover=!0,this.clickCardLink=null,this.metaTrail=null,this.direction=p0.props.direction.default,this.heading="",this.headinglevel=3,this.image={src:"",alt:""},this.imageShape="square",this.openLinkInNewTab=!1,this.padding=p0.props.padding.default,this.skin=p0.props.skin.default,this.subheading="",this.tagPosition="top",this.tags=[],this.slotController=new _a(this,this.defaultSlot)}connectedCallback(){super.connectedCallback()}render(){var r,i;const l={"pkt-card":!0,[`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},c=((r=this.ariaLabel)==null?void 0:r.trim())||(this.heading?`${this.heading} lenkekort`:"lenkekort"),h=((i=this.ariaLabel)==null?void 0:i.trim())||(this.heading?this.heading:"kort");return be`
       <article
         class=${It(l)}
         aria-label=${Cn(this.clickCardLink?c:h)}
@@ -560,7 +560,7 @@ You might need to use a local HTTP server (instead of file://): https://reactjs.
           ${this.renderHeader()}
           ${this.renderSlot()} 
           ${this.tagPosition==="bottom"?this.renderTags():qe}
-          ${this.renderCreditline()}
+          ${this.renderMetadata()}
         </div>
       </article>
     `}renderImage(){const r={"pkt-card__image":!0,[`pkt-card__image-${this.imageShape}`]:this.imageShape};return be`
@@ -628,14 +628,14 @@ You might need to use a local HTTP server (instead of file://): https://reactjs.
           `:qe}
     `}renderSlot(){return be`
       ${this.defaultSlot&&be`<section class="pkt-card__content" ${qt(this.defaultSlot)}></section>`}
-    `}renderCreditline(){return be`
-      ${this.author||this.date?be`
-            <footer class="pkt-card__creditline">
-              ${this.author?be`<span class="pkt-card__creditline-author">${this.author}</span>`:qe}
-              ${this.date?be`<span class="pkt-card__creditline-date">${this.date}</span>`:qe}
+    `}renderMetadata(){return be`
+      ${this.metaLead||this.metaTrail?be`
+            <footer class="pkt-card__metadata">
+              ${this.metaLead?be`<span class="pkt-card__metadata-lead">${this.metaLead}</span>`:qe}
+              ${this.metaTrail?be`<span class="pkt-card__metadata-trail">${this.metaTrail}</span>`:qe}
             </footer>
           `:qe}
-    `}};ri([z({type:String})],xa.prototype,"ariaLabel",2),ri([z({type:String})],xa.prototype,"author",2),ri([z({type:Boolean})],xa.prototype,"borderOnHover",2),ri([z({type:String,reflect:!0})],xa.prototype,"clickCardLink",2),ri([z({type:String})],xa.prototype,"date",2),ri([z({type:String})],xa.prototype,"direction",2),ri([z({type:String})],xa.prototype,"heading",2),ri([z({type:Number})],xa.prototype,"headinglevel",2),ri([z({type:Object})],xa.prototype,"image",2),ri([z({type:String})],xa.prototype,"imageShape",2),ri([z({type:Boolean})],xa.prototype,"openLinkInNewTab",2),ri([z({type:String})],xa.prototype,"padding",2),ri([z({type:String})],xa.prototype,"skin",2),ri([z({type:String})],xa.prototype,"subheading",2),ri([z({type:String})],xa.prototype,"tagPosition",2),ri([z({type:Array})],xa.prototype,"tags",2),xa=ri([dr("pkt-card")],xa);/**
+    `}};ri([z({type:String})],xa.prototype,"ariaLabel",2),ri([z({type:String})],xa.prototype,"metaLead",2),ri([z({type:Boolean})],xa.prototype,"borderOnHover",2),ri([z({type:String,reflect:!0})],xa.prototype,"clickCardLink",2),ri([z({type:String})],xa.prototype,"metaTrail",2),ri([z({type:String})],xa.prototype,"direction",2),ri([z({type:String})],xa.prototype,"heading",2),ri([z({type:Number})],xa.prototype,"headinglevel",2),ri([z({type:Object})],xa.prototype,"image",2),ri([z({type:String})],xa.prototype,"imageShape",2),ri([z({type:Boolean})],xa.prototype,"openLinkInNewTab",2),ri([z({type:String})],xa.prototype,"padding",2),ri([z({type:String})],xa.prototype,"skin",2),ri([z({type:String})],xa.prototype,"subheading",2),ri([z({type:String})],xa.prototype,"tagPosition",2),ri([z({type:Array})],xa.prototype,"tags",2),xa=ri([dr("pkt-card")],xa);/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "12.39.7",
+  "version": "12.39.8",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -38,7 +38,7 @@
   "dependencies": {
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@lit/react": "^1.0.7",
-    "@oslokommune/punkt-elements": "^12.39.7",
+    "@oslokommune/punkt-elements": "^12.39.8",
     "angular-html-parser": "^6.0.2",
     "html-format": "^1.1.7",
     "prettier": "^3.3.3",
@@ -49,7 +49,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
     "@oslokommune/punkt-assets": "^12.39.2",
-    "@oslokommune/punkt-css": "^12.39.7",
+    "@oslokommune/punkt-css": "^12.39.8",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -112,5 +112,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "504099164121e630280de133dfc4accf97765a8f"
+  "gitHead": "9837c1edd0b49ecdc14a46ede9442d30bdb9d908"
 }

package/src/components/card/Card.tsx

@@ -14,9 +14,9 @@ type TCardTagPosition = 'top' | 'bottom'
 
 export interface IPktCard extends PktElType {
   ariaLabel?: string
-  author?: string | null
+  metaLead?: string | null
   borderOnHover?: boolean | null
-  date?: string | null
+  metaTrail?: string | null
   direction?: TDirection
   heading?: string
   headingLevel?: IPktHeading['level']