@oslokommune/punkt-react 18.2.0 → 18.3.1

package/dist/punkt-react.js

@@ -62,7 +62,7 @@ var M = /* @__PURE__ */ O((/* @__PURE__ */ E(((e, t) => {
 			return n;
 		}) : window.classNames = n;
 	})();
-})))(), 1), N = "https://punkt-cdn.oslo.kommune.no/18.2/icons/";
+})))(), 1), N = "https://punkt-cdn.oslo.kommune.no/18.3/icons/";
 typeof window < "u" && (window.pktFetch = window.pktFetch === void 0 ? fetch : window.pktFetch, window.pktIconPath = window.pktIconPath || N);
 var P = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"></svg>", ee = {}, te = 2, ne = 1500, F = typeof Storage < "u" && typeof sessionStorage < "u", re = typeof window < "u" ? d : c, ie = (e, t) => !e || !F ? "" : sessionStorage.getItem(t + e + ".svg") ?? "", ae = (e) => window.pktFetch(e).then((t) => {
 	if (!t.ok) throw Error("Missing icon: " + e);
@@ -278,6 +278,7 @@ var ce = {
 	},
 	backlink: { label: "Gå tilbake til forrige side" },
 	breadcrumbs: { ariaLabel: "brødsmulemeny" },
+	linkcard: { openInNewTab: "Åpnes i ny fane" },
 	alert: { lastUpdated: "Sist oppdatert: {date}" },
 	tag: { remove: "Klikk for å fjerne {label}" },
 	header: {
@@ -526,7 +527,7 @@ var ge = {
 };
 //#endregion
 //#region src/components/button/Button.tsx
-typeof window < "u" && (window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/18.2/animations/");
+typeof window < "u" && (window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/18.3/animations/");
 var Y = i(({ children: e, className: t, iconName: n = "user", secondIconName: r = "user", iconPath: i, secondIconPath: a, size: o = "medium", fullWidth: s = !1, fullWidthOnMobile: c = !1, skin: l = "primary", type: u = "button", variant: d = "label-only", state: f, color: p, isLoading: m = void 0, disabled: h = void 0, loadingAnimationPath: g = window.pktAnimationPath, ...y }, b) => {
 	let x = [
 		t,
@@ -7074,7 +7075,7 @@ var co = i(({ appearance: e = "local", inputSize: t = "medium", disabled: n = !1
 co.displayName = "PktSearchInput";
 //#endregion
 //#region src/components/header/HeaderGlobal.tsx
-var lo = "https://punkt-cdn.oslo.kommune.no/18.2/logos/";
+var lo = "https://punkt-cdn.oslo.kommune.no/18.3/logos/";
 typeof window < "u" && (window.pktLogoPath = window.pktLogoPath || lo);
 var uo = "pkt-header-global-menu", fo = "pkt-header-global-menu-toggle", po = "pkt-header-global-search-panel", mo = "pkt-header-global-search-toggle", ho = i(({ className: e, "data-mode": t, dataUrl: n, data: r, locale: i = "nb-NO", logoLink: a = ga, logoClick: s, logoPath: l = typeof window < "u" ? window.pktLogoPath : lo, showSearch: u = !0, searchPlaceholder: h, onSearch: y, showContact: b = !0, user: x, userMenu: S, representing: C, canChangeRepresentation: w = !1, changeRepresentation: T, logOutButtonPlacement: E = "none", logOut: D, position: O = "fixed", scrollBehavior: k = "hide", mobileBreakpoint: A = 768, tabletBreakpoint: j = 1024, onDataLoaded: N, onDataError: P, strings: ee }, te) => {
 	let ne = k === "hide", [F, re] = m("none"), [ie, ae] = m(void 0), [oe, se] = m(!1), I = p(N), R = p(P);
@@ -7431,7 +7432,7 @@ var go = i(({ id: e, ariaDescribedby: t, ariaLabelledby: n, autocomplete: r = "o
 go.displayName = "PktTextinput";
 //#endregion
 //#region src/components/header/HeaderService.tsx
-var _o = "https://punkt-cdn.oslo.kommune.no/18.2/logos/";
+var _o = "https://punkt-cdn.oslo.kommune.no/18.3/logos/";
 typeof window < "u" && (window.pktLogoPath = window.pktLogoPath || _o);
 var vo = i(({ mobileBreakpoint: e = 768, tabletBreakpoint: t = 1280, children: n, className: r, compact: i = !1, "data-mode": a, logOutButtonPlacement: s = "none", logOut: l, openedMenu: u, showSearch: d = !1, onSearch: h, onSearchChange: y, searchValue: b, searchPlaceholder: x, representing: S, serviceLink: C, serviceClick: w, serviceName: T, user: E, userMenu: D, userMenuFooter: O, userOptions: k, canChangeRepresentation: A = !1, changeRepresentation: j, hideLogo: N = !1, logoLink: P = ga, logoClick: ee, logoPath: te = typeof window < "u" ? window.pktLogoPath : _o, position: ne = "fixed", scrollBehavior: F = "hide", slotMenuVariant: re = "icon-only", slotMenuText: ie = "Meny", strings: ae }, oe) => {
 	let se = F === "hide";
@@ -7752,12 +7753,12 @@ var Co = i(({ label: e, id: t, children: n, ...r }, i) => /* @__PURE__ */ v("div
 Co.displayName = "PktInput";
 //#endregion
 //#region src/components/linkcard/LinkCard.tsx
-var wo = ({ children: e, skin: t, title: n, href: r, iconName: i, openInNewTab: a, external: o, className: s, ...c }) => {
-	let l = ["pkt-linkcard", t && `pkt-linkcard--${t}`].filter(Boolean).join(" "), u = ["pkt-linkcard__title", o && "pkt-link pkt-link--external"].filter(Boolean).join(" ");
+var wo = ({ children: e, skin: t, title: n, href: r, iconName: i, openInNewTab: a, external: o, className: s, strings: c, ...l }) => {
+	let u = _e(["linkcard"], c), d = ["pkt-linkcard", t && `pkt-linkcard--${t}`].filter(Boolean).join(" "), f = ["pkt-linkcard__title", o && "pkt-link pkt-link--external"].filter(Boolean).join(" ");
 	return /* @__PURE__ */ v("a", {
-		...c,
+		...l,
 		href: r,
-		className: (0, M.default)(l, s),
+		className: (0, M.default)(d, s),
 		target: a ? "_blank" : "_self",
 		rel: a ? "noopener noreferrer" : void 0,
 		children: [
@@ -7766,9 +7767,13 @@ var wo = ({ children: e, skin: t, title: n, href: r, iconName: i, openInNewTab:
 				name: i
 			}),
 			n && /* @__PURE__ */ _("div", {
-				className: (0, M.default)(u),
+				className: (0, M.default)(f),
 				children: n
 			}),
+			a && u.linkcard.openInNewTab ? /* @__PURE__ */ _("span", {
+				className: "pkt-sr-only",
+				children: u.linkcard.openInNewTab
+			}) : null,
 			/* @__PURE__ */ _("div", {
 				className: "pkt-linkcard__text",
 				children: e
@@ -7778,7 +7783,7 @@ var wo = ({ children: e, skin: t, title: n, href: r, iconName: i, openInNewTab:
 };
 //#endregion
 //#region src/components/loader/Loader.tsx
-wo.displayName = "PktLinkCard", typeof window < "u" && (window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/18.2/animations/");
+wo.displayName = "PktLinkCard", typeof window < "u" && (window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/18.3/animations/");
 var To = (e) => {
 	switch (e) {
 		case "blue": return "spinner-blue";
@@ -7972,7 +7977,7 @@ var Ao = /* @__PURE__ */ _("svg", {
 		cx: "12",
 		cy: "12",
 		r: "7",
-		style: { fill: "var(--pkt-color-grays-grey-200, #CCC)" }
+		style: { fill: "var(--pkt-color-brand-neutrals-300, #CCC)" }
 	})
 }), jo = /* @__PURE__ */ v("svg", {
 	xmlns: "http://www.w3.org/2000/svg",

package/dist/shared-strings/nb.d.ts

@@ -66,6 +66,9 @@ export declare const nb: {
     breadcrumbs: {
         ariaLabel: string;
     };
+    linkcard: {
+        openInNewTab: string;
+    };
     alert: {
         lastUpdated: string;
     };

package/dist/shared-types/index.d.ts

@@ -15,6 +15,8 @@ export type { TPktInputSize, TSize3, TSize5, TSize7 } from './size';
 export { ACCORDION_SKINS } from './accordion';
 export type { TAccordionSkin, IPktAccordionBase, IPktAccordionItemBase, IAccordionSpecProps, IAccordionItemSpecProps, IAccordionVisualProps, } from './accordion';
 export type { IPktBackLinkBase, IBacklinkSpecProps } from './backlink';
+export { LINKCARD_SKINS } from './linkcard';
+export type { TLinkCardSkin, IPktLinkCardBase, ILinkcardSpecProps } from './linkcard';
 export { BREADCRUMBS_NAVIGATION_TYPES } from './breadcrumbs';
 export type { TBreadcrumbsNavigationType, IBreadcrumb, IBreadcrumbItem, IBreadcrumbs, IPktBreadcrumbsBase, IBreadcrumbsSpecProps, } from './breadcrumbs';
 export type { IRenderLink, TRenderLink } from './render-link';

package/dist/shared-types/linkcard.d.ts

@@ -0,0 +1,24 @@
+/**
+ * linkcard.ts
+ *
+ * Type definitions for pkt-linkcard.
+ * Used by React, Elements, and typed component specs.
+ */
+import type { IPktStringsProps } from '../shared-strings';
+/** LinkCard skin variants — shared runtime source for types, specs, and Preview. */
+export declare const LINKCARD_SKINS: readonly ['normal', 'no-padding', 'blue', 'beige', 'green', 'gray', 'beige-outline', 'gray-outline'];
+export type TLinkCardSkin = (typeof LINKCARD_SKINS)[number];
+/** Shared LinkCard props for React, Elements, and typed specs. */
+export type IPktLinkCardBase = IPktStringsProps<'linkcard'> & {
+    title?: string;
+    href?: string;
+    skin?: TLinkCardSkin;
+    iconName?: string;
+    openInNewTab?: boolean;
+    external?: boolean;
+};
+/**
+ * Documented LinkCard props (subset of `IPktLinkCardBase`).
+ * Used for typed component specs in documentation.
+ */
+export type ILinkcardSpecProps = Pick<IPktLinkCardBase, 'title' | 'href' | 'skin' | 'iconName' | 'openInNewTab' | 'external'>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "18.2.0",
+  "version": "18.3.1",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -45,7 +45,7 @@
     "@eslint/eslintrc": "^3.3.5",
     "@eslint/js": "^10.0.1",
     "@oslokommune/punkt-assets": "^18.0.0",
-    "@oslokommune/punkt-css": "^18.0.0",
+    "@oslokommune/punkt-css": "^18.3.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
@@ -102,5 +102,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "3e850f524f546977081c875a222256fb2e63eb5a"
+  "gitHead": "076395b7934546d637a3136ac35eef4583d8f8a7"
 }

package/src/components/linkcard/LinkCard.test.tsx

@@ -3,6 +3,7 @@ import '@testing-library/jest-dom'
 
 import { render } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { nb } from 'shared-strings'
 
 import { PktLinkCard } from './LinkCard'
 
@@ -103,6 +104,48 @@ describe('PktLinkCard', () => {
     })
   })
 
+  describe('openInNewTab strings', () => {
+    it('does not announce a new-tab string when openInNewTab is unset', () => {
+      const { container, queryByText } = render(<PktLinkCard title="Normal">Content</PktLinkCard>)
+      expect(container.querySelector('.pkt-sr-only')).not.toBeInTheDocument()
+      expect(queryByText(nb.linkcard.openInNewTab)).not.toBeInTheDocument()
+    })
+
+    it('uses the catalogue default when strings is omitted', () => {
+      const { getByText } = render(
+        <PktLinkCard title="Normal" openInNewTab>
+          Content
+        </PktLinkCard>,
+      )
+      const srOnly = getByText(nb.linkcard.openInNewTab)
+      expect(srOnly).toHaveClass('pkt-sr-only')
+    })
+
+    it('uses a custom override from the strings prop', () => {
+      const { getByText, queryByText } = render(
+        <PktLinkCard
+          title="Normal"
+          openInNewTab
+          strings={{ linkcard: { openInNewTab: 'Opens in a new tab' } }}
+        >
+          Content
+        </PktLinkCard>,
+      )
+      expect(getByText('Opens in a new tab')).toHaveClass('pkt-sr-only')
+      expect(queryByText(nb.linkcard.openInNewTab)).not.toBeInTheDocument()
+    })
+
+    it('hides the announcement when the override is an empty string', () => {
+      const { container, queryByText } = render(
+        <PktLinkCard title="Normal" openInNewTab strings={{ linkcard: { openInNewTab: '' } }}>
+          Content
+        </PktLinkCard>,
+      )
+      expect(container.querySelector('.pkt-sr-only')).not.toBeInTheDocument()
+      expect(queryByText(nb.linkcard.openInNewTab)).not.toBeInTheDocument()
+    })
+  })
+
   // ACCESSIBILITY TESTS
 
   describe('accessibility', () => {

package/src/components/linkcard/LinkCard.tsx

@@ -2,16 +2,16 @@
 
 import classNames from 'classnames'
 import { HTMLAttributes, ReactNode } from 'react'
+import type { IPktLinkCardBase, TLinkCardSkin } from 'shared-types'
 
 import { PktIcon } from '../icon/Icon'
+import { usePktStrings } from '../../hooks/usePktStrings'
 
-export interface IPktLinkCard extends Omit<HTMLAttributes<HTMLAnchorElement>, 'title'> {
-  skin?: 'normal' | 'no-padding' | 'blue' | 'beige' | 'green' | 'gray' | 'beige-outline' | 'gray-outline'
-  title?: string
-  href?: string
-  iconName?: string
-  openInNewTab?: boolean
-  external?: boolean
+export type { TLinkCardSkin }
+
+export interface IPktLinkCard
+  extends IPktLinkCardBase,
+    Omit<HTMLAttributes<HTMLAnchorElement>, 'title'> {
   children?: ReactNode
 }
 
@@ -24,8 +24,10 @@ export const PktLinkCard = ({
   openInNewTab,
   external,
   className,
+  strings,
   ...props
 }: IPktLinkCard) => {
+  const s = usePktStrings(['linkcard'], strings)
   const classes = ['pkt-linkcard', skin && `pkt-linkcard--${skin}`].filter(Boolean).join(' ')
 
   const titleClasses = ['pkt-linkcard__title', external && 'pkt-link pkt-link--external'].filter(Boolean).join(' ')
@@ -40,6 +42,9 @@ export const PktLinkCard = ({
     >
       {iconName && <PktIcon className="pkt-link__icon" name={iconName} />}
       {title && <div className={classNames(titleClasses)}>{title}</div>}
+      {openInNewTab && s.linkcard.openInNewTab ? (
+        <span className="pkt-sr-only">{s.linkcard.openInNewTab}</span>
+      ) : null}
       <div className="pkt-linkcard__text">{children}</div>
     </a>
   )

package/src/components/stepper/Step.tsx

@@ -26,7 +26,7 @@ export interface IPktStep {
 
 const incompleteStepSVG = (
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
-    <circle cx="12" cy="12" r="7" style={{ fill: 'var(--pkt-color-grays-grey-200, #CCC)' }} />
+    <circle cx="12" cy="12" r="7" style={{ fill: 'var(--pkt-color-brand-neutrals-300, #CCC)' }} />
   </svg>
 )
 

package/src/components/strings/strings-override.test.tsx

@@ -5,6 +5,7 @@ import { resetPktStrings, setPktStrings } from 'shared-strings'
 import { PktBackLink } from '../backlink/BackLink'
 import { PktBreadcrumbs } from '../breadcrumbs/Breadcrumbs'
 import { PktFileUpload } from '../fileupload/FileUpload'
+import { PktLinkCard } from '../linkcard/LinkCard'
 import { PktSearchInput } from '../searchinput/SearchInput'
 import { PktTextinput } from '../textinput/Textinput'
 import { PktStringsProvider } from './PktStringsProvider'
@@ -25,6 +26,18 @@ describe('strings-propen per komponent', () => {
     expect(screen.getByLabelText('Tilbake til lista')).toBeInTheDocument()
   })
 
+  test('linkcard bruker teksten fra propen', () => {
+    render(
+      <PktLinkCard
+        title="Dokument"
+        href="/"
+        openInNewTab
+        strings={{ linkcard: { openInNewTab: 'Opens in a new tab' } }}
+      />,
+    )
+    expect(screen.getByText('Opens in a new tab')).toBeInTheDocument()
+  })
+
   test('breadcrumbs bruker teksten fra propen', () => {
     render(
       <PktBreadcrumbs