@oslokommune/punkt-react 18.3.0 → 18.3.1

package/dist/punkt-react.js

@@ -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: {
@@ -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

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.3.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.3.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": "72a1389ecb1c277a463dfe5d2c020d96dd4c7ded"
+  "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/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