@oslokommune/punkt-react 12.40.1 → 12.40.3

package/CHANGELOG.md

@@ -5,6 +5,27 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [12.40.3](https://github.com/oslokommune/punkt/compare/12.40.2...12.40.3) (2025-05-20)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+* update propnames for cards (#2574). - direction til layout
+  - portrait til vertical
+  - landscape til horizontal
+  - padding: standard til padding: default
+
+
+---
+
+
 ## [12.40.1](https://github.com/oslokommune/punkt/compare/12.40.0...12.40.1) (2025-05-20)
 
 ### ⚠ BREAKING CHANGES

package/dist/index.d.ts

@@ -126,7 +126,7 @@ export declare interface IPktCard extends PktElType {
     metaLead?: string | null;
     borderOnHover?: boolean | null;
     metaTrail?: string | null;
-    direction?: TDirection;
+    layout?: TLayout;
     heading?: string;
     headingLevel?: IPktHeading['level'];
     image?: {
@@ -759,13 +759,13 @@ declare interface SocialLink {
 
 declare type TCardImageShape = 'square' | 'round';
 
-declare type TCardPadding = 'none' | 'standard';
+declare type TCardPadding = 'none' | 'default';
 
 declare type TCardSkin = 'outlined' | 'outlined-beige' | 'gray' | 'beige' | 'green' | 'blue';
 
 declare type TCardTagPosition = 'top' | 'bottom';
 
-declare type TDirection = 'portrait' | 'landscape';
+declare type TLayout = 'vertical' | 'horizontal';
 
 declare type TSkin = 'blue' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray' | 'blue-light';
 

package/dist/punkt-react.es.js

@@ -25191,14 +25191,14 @@ al = ic([
   cr("pkt-tag")
 ], al);
 const AI = {
+  layout: {
+    default: "vertical"
+  },
   skin: {
     default: "outlined"
   },
-  direction: {
-    default: "portrait"
-  },
   padding: {
-    default: "standard"
+    default: "default"
   }
 }, GD = {
   props: AI
@@ -25211,7 +25211,7 @@ var FI = Object.defineProperty, $I = Object.getOwnPropertyDescriptor, ki = (n, r
 let ja = class extends Gr {
   //Constructor
   constructor() {
-    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 = {
+    super(), this.defaultSlot = dn(), this.ariaLabel = "", this.metaLead = null, this.borderOnHover = !0, this.clickCardLink = null, this.metaTrail = null, this.layout = GD.props.layout.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);
@@ -25227,7 +25227,7 @@ let ja = class extends Gr {
     const l = {
       "pkt-card": !0,
       [`pkt-card--${this.skin}`]: this.skin,
-      [`pkt-card--${this.direction}`]: this.direction,
+      [`pkt-card--${this.layout}`]: this.layout,
       [`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");
@@ -25377,7 +25377,7 @@ ki([
 ], ja.prototype, "metaTrail", 2);
 ki([
   z({ type: String })
-], ja.prototype, "direction", 2);
+], ja.prototype, "layout", 2);
 ki([
   z({ type: String })
 ], ja.prototype, "heading", 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})],_s.prototype,"closeTag",2),cu([z({type:String,reflect:!0})],_s.prototype,"size",2),cu([z({type:String,reflect:!0})],_s.prototype,"skin",2),cu([z({type:String,reflect:!0})],_s.prototype,"textStyle",2),cu([z({type:String,reflect:!0})],_s.prototype,"iconName",2),cu([z({type:String})],_s.prototype,"type",2),cu([z({type:String})],_s.prototype,"ariaLabel",2),cu([$n()],_s.prototype,"_isClosed",2),cu([$n()],_s.prototype,"_ariaDescription",2),_s=cu([dr("pkt-tag")],_s);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 _a=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 xa(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})],_s.prototype,"closeTag",2),cu([z({type:String,reflect:!0})],_s.prototype,"size",2),cu([z({type:String,reflect:!0})],_s.prototype,"skin",2),cu([z({type:String,reflect:!0})],_s.prototype,"textStyle",2),cu([z({type:String,reflect:!0})],_s.prototype,"iconName",2),cu([z({type:String})],_s.prototype,"type",2),cu([z({type:String})],_s.prototype,"ariaLabel",2),cu([$n()],_s.prototype,"_isClosed",2),cu([$n()],_s.prototype,"_ariaDescription",2),_s=cu([dr("pkt-tag")],_s);const f3={layout:{default:"vertical"},skin:{default:"outlined"},padding:{default:"default"}},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 _a=class extends Hr{constructor(){super(),this.defaultSlot=dn(),this.ariaLabel="",this.metaLead=null,this.borderOnHover=!0,this.clickCardLink=null,this.metaTrail=null,this.layout=p0.props.layout.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 xa(this,this.defaultSlot)}connectedCallback(){super.connectedCallback()}render(){var r,i;const l={"pkt-card":!0,[`pkt-card--${this.skin}`]:this.skin,[`pkt-card--${this.layout}`]:this.layout,[`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)}
@@ -635,7 +635,7 @@ You might need to use a local HTTP server (instead of file://): https://reactjs.
               ${this.metaTrail?be`<span class="pkt-card__metadata-trail">${this.metaTrail}</span>`:qe}
             </footer>
           `:qe}
-    `}};ri([z({type:String})],_a.prototype,"ariaLabel",2),ri([z({type:String})],_a.prototype,"metaLead",2),ri([z({type:Boolean})],_a.prototype,"borderOnHover",2),ri([z({type:String,reflect:!0})],_a.prototype,"clickCardLink",2),ri([z({type:String})],_a.prototype,"metaTrail",2),ri([z({type:String})],_a.prototype,"direction",2),ri([z({type:String})],_a.prototype,"heading",2),ri([z({type:Number})],_a.prototype,"headinglevel",2),ri([z({type:Object})],_a.prototype,"image",2),ri([z({type:String})],_a.prototype,"imageShape",2),ri([z({type:Boolean})],_a.prototype,"openLinkInNewTab",2),ri([z({type:String})],_a.prototype,"padding",2),ri([z({type:String})],_a.prototype,"skin",2),ri([z({type:String})],_a.prototype,"subheading",2),ri([z({type:String})],_a.prototype,"tagPosition",2),ri([z({type:Array})],_a.prototype,"tags",2),_a=ri([dr("pkt-card")],_a);/**
+    `}};ri([z({type:String})],_a.prototype,"ariaLabel",2),ri([z({type:String})],_a.prototype,"metaLead",2),ri([z({type:Boolean})],_a.prototype,"borderOnHover",2),ri([z({type:String,reflect:!0})],_a.prototype,"clickCardLink",2),ri([z({type:String})],_a.prototype,"metaTrail",2),ri([z({type:String})],_a.prototype,"layout",2),ri([z({type:String})],_a.prototype,"heading",2),ri([z({type:Number})],_a.prototype,"headinglevel",2),ri([z({type:Object})],_a.prototype,"image",2),ri([z({type:String})],_a.prototype,"imageShape",2),ri([z({type:Boolean})],_a.prototype,"openLinkInNewTab",2),ri([z({type:String})],_a.prototype,"padding",2),ri([z({type:String})],_a.prototype,"skin",2),ri([z({type:String})],_a.prototype,"subheading",2),ri([z({type:String})],_a.prototype,"tagPosition",2),ri([z({type:Array})],_a.prototype,"tags",2),_a=ri([dr("pkt-card")],_a);/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "12.40.1",
+  "version": "12.40.3",
   "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.40.1",
+    "@oslokommune/punkt-elements": "^12.40.3",
     "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.40.0",
+    "@oslokommune/punkt-css": "^12.40.3",
     "@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": "6bd6f3b4b95dc4beadf43392788dfd17d1f37efc"
+  "gitHead": "ed16d8e18201f36c905e47b96d62d29278595ba8"
 }

package/src/components/card/Card.tsx

@@ -7,8 +7,8 @@ import type { PktElType, PktElConstructor } from '@/interfaces/IPktElements'
 import { IPktTag } from '../tag/Tag'
 
 type TCardSkin = 'outlined' | 'outlined-beige' | 'gray' | 'beige' | 'green' | 'blue'
-type TDirection = 'portrait' | 'landscape'
-type TCardPadding = 'none' | 'standard'
+type TLayout = 'vertical' | 'horizontal'
+type TCardPadding = 'none' | 'default'
 type TCardImageShape = 'square' | 'round'
 type TCardTagPosition = 'top' | 'bottom'
 
@@ -17,7 +17,7 @@ export interface IPktCard extends PktElType {
   metaLead?: string | null
   borderOnHover?: boolean | null
   metaTrail?: string | null
-  direction?: TDirection
+  layout?: TLayout
   heading?: string
   headingLevel?: IPktHeading['level']
   image?: { src: string; alt: string }