@oslokommune/punkt-react 16.1.0 → 16.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "16.1.0",
+  "version": "16.2.0",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -39,7 +39,7 @@
   "dependencies": {
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@lit/react": "^1.0.7",
-    "@oslokommune/punkt-elements": "^16.1.0",
+    "@oslokommune/punkt-elements": "^16.2.0",
     "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-hook-form": "^7.53.0"
@@ -50,7 +50,7 @@
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.37.0",
     "@oslokommune/punkt-assets": "^16.0.0",
-    "@oslokommune/punkt-css": "^16.0.5",
+    "@oslokommune/punkt-css": "^16.2.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -109,5 +109,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "d6bf3b8ba1ebb83dafc1de2937609f67257d011e"
+  "gitHead": "554167272be133d1486fb9b041b3afe0980c5069"
 }

package/src/components/card/Card.test.tsx

@@ -0,0 +1,373 @@
+import '@testing-library/jest-dom'
+
+import { cleanup, render } from '@testing-library/react'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { createRef } from 'react'
+
+import { PktCard } from './Card'
+
+expect.extend(toHaveNoViolations)
+
+afterEach(cleanup)
+
+describe('PktCard', () => {
+  describe('Rendering and basic functionality', () => {
+    test('renders without errors', () => {
+      const { container } = render(<PktCard>innhold</PktCard>)
+      const article = container.querySelector('article.pkt-card')
+      expect(article).toBeInTheDocument()
+    })
+
+    test('renders content in children', () => {
+      const { container } = render(<PktCard><p>Test content here</p></PktCard>)
+      const content = container.querySelector('.pkt-card__content')
+      expect(content).toBeInTheDocument()
+      expect(content?.textContent).toContain('Test content here')
+    })
+
+    test('renders basic structure correctly', () => {
+      const { container } = render(<PktCard heading="Test Heading">Test content</PktCard>)
+      const article = container.querySelector('article')
+      const wrapper = article?.querySelector('.pkt-card__wrapper')
+      const header = wrapper?.querySelector('.pkt-card__header')
+      const content = wrapper?.querySelector('.pkt-card__content')
+
+      expect(wrapper).toBeInTheDocument()
+      expect(header).toBeInTheDocument()
+      expect(content).toBeInTheDocument()
+    })
+
+    test('forwards ref correctly', () => {
+      const ref = createRef<HTMLDivElement>()
+      const { unmount } = render(<PktCard ref={ref} heading="Test">innhold</PktCard>)
+      expect(ref.current).toBeInstanceOf(HTMLElement)
+      unmount()
+      expect(ref.current).toBeNull()
+    })
+  })
+
+  describe('Properties and attributes', () => {
+    test('applies default properties correctly', () => {
+      const { container } = render(<PktCard>innhold</PktCard>)
+      const article = container.querySelector('article')
+      expect(article).toHaveClass('pkt-card--outlined')
+      expect(article).toHaveClass('pkt-card--vertical')
+      expect(article).toHaveClass('pkt-card--padding-default')
+      expect(article).toHaveClass('pkt-card--border-on-hover')
+    })
+
+    test('applies different skin properties correctly', () => {
+      const skins = ['outlined', 'outlined-beige', 'gray', 'beige', 'green', 'blue'] as const
+      for (const skin of skins) {
+        const { container, unmount } = render(<PktCard skin={skin}>innhold</PktCard>)
+        const article = container.querySelector('article')
+        expect(article).toHaveClass(`pkt-card--${skin}`)
+        unmount()
+      }
+    })
+
+    test('applies different layout properties correctly', () => {
+      const layouts = ['vertical', 'horizontal'] as const
+      for (const layout of layouts) {
+        const { container, unmount } = render(<PktCard layout={layout}>innhold</PktCard>)
+        const article = container.querySelector('article')
+        expect(article).toHaveClass(`pkt-card--${layout}`)
+        unmount()
+      }
+    })
+
+    test('applies different padding properties correctly', () => {
+      const paddingOptions = ['none', 'default'] as const
+      for (const padding of paddingOptions) {
+        const { container, unmount } = render(<PktCard padding={padding}>innhold</PktCard>)
+        const article = container.querySelector('article')
+        expect(article).toHaveClass(`pkt-card--padding-${padding}`)
+        unmount()
+      }
+    })
+
+    test('handles borderOnHover property correctly', () => {
+      const { container } = render(<PktCard borderOnHover={false}>innhold</PktCard>)
+      const article = container.querySelector('article')
+      expect(article).not.toHaveClass('pkt-card--border-on-hover')
+    })
+
+    test('supports custom className', () => {
+      const { container } = render(<PktCard className="custom-class">innhold</PktCard>)
+      const wrapper = container.querySelector('.pkt-card-root')
+      expect(wrapper).toHaveClass('custom-class')
+    })
+  })
+
+  describe('Heading functionality', () => {
+    test('renders heading when provided', () => {
+      const { container } = render(<PktCard heading="Test Card Title">innhold</PktCard>)
+      const heading = container.querySelector('.pkt-card__heading')
+      expect(heading).toBeInTheDocument()
+      expect(heading?.textContent?.trim()).toBe('Test Card Title')
+    })
+
+    test('renders subheading when provided', () => {
+      const { container } = render(<PktCard subheading="Test Subheading">innhold</PktCard>)
+      const subheading = container.querySelector('.pkt-card__subheading')
+      expect(subheading).toBeInTheDocument()
+      expect(subheading?.textContent).toBe('Test Subheading')
+    })
+
+    test('applies correct heading level', () => {
+      const { container } = render(
+        <PktCard heading="Test" headingLevel={2}>innhold</PktCard>,
+      )
+      const heading = container.querySelector('h2.pkt-card__heading')
+      expect(heading).toBeInTheDocument()
+    })
+
+    test('defaults to h3 heading level', () => {
+      const { container } = render(<PktCard heading="Test">innhold</PktCard>)
+      const heading = container.querySelector('h3.pkt-card__heading')
+      expect(heading).toBeInTheDocument()
+    })
+
+    test('does not render header when no heading or subheading', () => {
+      const { container } = render(<PktCard>innhold</PktCard>)
+      const header = container.querySelector('.pkt-card__header')
+      expect(header).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Link functionality', () => {
+    test('renders as regular card when no clickCardLink', () => {
+      const { container } = render(<PktCard heading="Test Title">innhold</PktCard>)
+      const link = container.querySelector('.pkt-card__link')
+      expect(link).not.toBeInTheDocument()
+
+      const article = container.querySelector('article')
+      expect(article?.getAttribute('aria-label')).toBe('Test Title')
+    })
+
+    test('renders as link card when clickCardLink provided', () => {
+      const { container } = render(
+        <PktCard heading="Test Title" clickCardLink="/test-url">innhold</PktCard>,
+      )
+      const linkHeading = container.querySelector('.pkt-card__link-heading')
+      const link = container.querySelector('.pkt-card__link')
+      expect(linkHeading).toBeInTheDocument()
+      expect(link).toBeInTheDocument()
+      expect(link?.getAttribute('href')).toBe('/test-url')
+      expect(link?.textContent).toBe('Test Title')
+
+      const article = container.querySelector('article')
+      expect(article?.getAttribute('aria-label')).toBe('Test Title lenkekort')
+    })
+
+    test('does not render plain heading when clickCardLink is set', () => {
+      const { container } = render(
+        <PktCard heading="Test" clickCardLink="/test">innhold</PktCard>,
+      )
+      const headings = container.querySelectorAll('.pkt-card__heading')
+      // Should only have the link heading, not both
+      expect(headings).toHaveLength(1)
+      expect(headings[0]).toHaveClass('pkt-card__link-heading')
+    })
+
+    test('handles openLinkInNewTab correctly', () => {
+      const { container } = render(
+        <PktCard heading="Test" clickCardLink="/test" openLinkInNewTab>innhold</PktCard>,
+      )
+      const link = container.querySelector('.pkt-card__link')
+      expect(link?.getAttribute('target')).toBe('_blank')
+      expect(link?.getAttribute('rel')).toBe('noopener noreferrer')
+    })
+
+    test('applies correct aria-label for link cards with custom ariaLabel', () => {
+      const { container } = render(
+        <PktCard clickCardLink="/test" ariaLabel="Custom aria label">innhold</PktCard>,
+      )
+      const article = container.querySelector('article')
+      expect(article?.getAttribute('aria-label')).toBe('Custom aria label')
+    })
+  })
+
+  describe('Image functionality', () => {
+    test('renders image when provided', () => {
+      const { container } = render(
+        <PktCard image={{ src: '/test-image.jpg', alt: 'Test image' }}>innhold</PktCard>,
+      )
+      const imageDiv = container.querySelector('.pkt-card__image')
+      const img = imageDiv?.querySelector('img')
+      expect(imageDiv).toBeInTheDocument()
+      expect(img).toBeInTheDocument()
+      expect(img?.getAttribute('src')).toBe('/test-image.jpg')
+      expect(img?.getAttribute('alt')).toBe('Test image')
+    })
+
+    test('does not render image when not provided', () => {
+      const { container } = render(<PktCard>innhold</PktCard>)
+      const imageDiv = container.querySelector('.pkt-card__image')
+      expect(imageDiv).not.toBeInTheDocument()
+    })
+
+    test('applies correct image shape classes', () => {
+      const shapes = ['square', 'round'] as const
+      for (const shape of shapes) {
+        const { container, unmount } = render(
+          <PktCard image={{ src: '/test.jpg', alt: 'Test' }} imageShape={shape}>innhold</PktCard>,
+        )
+        const imageDiv = container.querySelector('.pkt-card__image')
+        expect(imageDiv).toHaveClass(`pkt-card__image-${shape}`)
+        unmount()
+      }
+    })
+  })
+
+  describe('Tags functionality', () => {
+    test('renders tags when provided', () => {
+      const tags = [
+        { text: 'Tag 1', skin: 'blue' as const },
+        { text: 'Tag 2', skin: 'green' as const },
+      ]
+      const { container } = render(<PktCard tags={tags}>innhold</PktCard>)
+      const tagsContainer = container.querySelector('.pkt-card__tags')
+      expect(tagsContainer).toBeInTheDocument()
+      expect(tagsContainer?.getAttribute('aria-label')).toBe('merkelapper')
+    })
+
+    test('renders single tag with correct aria-label', () => {
+      const tags = [{ text: 'Single Tag' }]
+      const { container } = render(<PktCard tags={tags}>innhold</PktCard>)
+      const tagsContainer = container.querySelector('.pkt-card__tags')
+      expect(tagsContainer?.getAttribute('aria-label')).toBe('merkelapp')
+    })
+
+    test('applies correct tag position classes', () => {
+      const positions = ['top', 'bottom'] as const
+      for (const position of positions) {
+        const tags = [{ text: 'Test Tag' }]
+        const { container, unmount } = render(
+          <PktCard tags={tags} tagPosition={position}>innhold</PktCard>,
+        )
+        const tagsContainer = container.querySelector('.pkt-card__tags')
+        expect(tagsContainer).toHaveClass(`pkt-card__tags-${position}`)
+        unmount()
+      }
+    })
+
+    test('does not render tags when array is empty', () => {
+      const { container } = render(<PktCard>innhold</PktCard>)
+      const tagsContainer = container.querySelector('.pkt-card__tags')
+      expect(tagsContainer).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Metadata functionality', () => {
+    test('renders metadata when provided', () => {
+      const { container } = render(
+        <PktCard metaLead="Author Name" metaTrail="2023-12-01">innhold</PktCard>,
+      )
+      const metadata = container.querySelector('.pkt-card__metadata')
+      const metaLead = metadata?.querySelector('.pkt-card__metadata-lead')
+      const metaTrail = metadata?.querySelector('.pkt-card__metadata-trail')
+
+      expect(metadata).toBeInTheDocument()
+      expect(metaLead?.textContent).toBe('Author Name')
+      expect(metaTrail?.textContent).toBe('2023-12-01')
+    })
+
+    test('renders only metaLead when metaTrail not provided', () => {
+      const { container } = render(<PktCard metaLead="Author Only">innhold</PktCard>)
+      const metaLead = container.querySelector('.pkt-card__metadata-lead')
+      const metaTrail = container.querySelector('.pkt-card__metadata-trail')
+      expect(metaLead).toBeInTheDocument()
+      expect(metaTrail).not.toBeInTheDocument()
+    })
+
+    test('renders only metaTrail when metaLead not provided', () => {
+      const { container } = render(<PktCard metaTrail="Date Only">innhold</PktCard>)
+      const metaLead = container.querySelector('.pkt-card__metadata-lead')
+      const metaTrail = container.querySelector('.pkt-card__metadata-trail')
+      expect(metaLead).not.toBeInTheDocument()
+      expect(metaTrail).toBeInTheDocument()
+    })
+
+    test('does not render metadata when neither provided', () => {
+      const { container } = render(<PktCard>innhold</PktCard>)
+      const metadata = container.querySelector('.pkt-card__metadata')
+      expect(metadata).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Content placement and structure', () => {
+    test('renders content elements in correct order', () => {
+      const tags = [{ text: 'Test Tag' }]
+      const { container } = render(
+        <PktCard
+          heading="Test Title"
+          subheading="Test Sub"
+          tags={tags}
+          image={{ src: '/test.jpg', alt: 'Test' }}
+          metaLead="Author"
+          metaTrail="Date"
+        >
+          innhold
+        </PktCard>,
+      )
+      const article = container.querySelector('article')
+      const children = Array.from(article?.children || [])
+
+      // Image first, then wrapper
+      expect(children[0]).toHaveClass('pkt-card__image')
+      expect(children[1]).toHaveClass('pkt-card__wrapper')
+
+      const wrapperChildren = Array.from(children[1]?.children || [])
+
+      // Order within wrapper: tags (top), header, content, metadata
+      expect(wrapperChildren[0]).toHaveClass('pkt-card__tags-top')
+      expect(wrapperChildren[1]).toHaveClass('pkt-card__header')
+      expect(wrapperChildren[2]).toHaveClass('pkt-card__content')
+      expect(wrapperChildren[3]).toHaveClass('pkt-card__metadata')
+    })
+
+    test('places tags at bottom when tagPosition is bottom', () => {
+      const tags = [{ text: 'Test Tag' }]
+      const { container } = render(
+        <PktCard heading="Test Title" tags={tags} tagPosition="bottom">innhold</PktCard>,
+      )
+      const wrapperChildren = Array.from(
+        container.querySelector('.pkt-card__wrapper')?.children || [],
+      )
+
+      // Order: header, content, tags (bottom)
+      expect(wrapperChildren[0]).toHaveClass('pkt-card__header')
+      expect(wrapperChildren[1]).toHaveClass('pkt-card__content')
+      expect(wrapperChildren[2]).toHaveClass('pkt-card__tags-bottom')
+    })
+  })
+
+  describe('Accessibility', () => {
+    test('has no accessibility violations', async () => {
+      const { container } = render(<PktCard heading="Accessible Card">innhold</PktCard>)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('applies custom aria-label', () => {
+      const { container } = render(
+        <PktCard heading="Test" ariaLabel="Custom accessible label">innhold</PktCard>,
+      )
+      const article = container.querySelector('article')
+      expect(article?.getAttribute('aria-label')).toBe('Custom accessible label')
+    })
+
+    test('falls back to heading for aria-label', () => {
+      const { container } = render(<PktCard heading="Default Aria Label">innhold</PktCard>)
+      const article = container.querySelector('article')
+      expect(article?.getAttribute('aria-label')).toBe('Default Aria Label')
+    })
+
+    test('falls back to "kort" when no heading or aria-label', () => {
+      const { container } = render(<PktCard>innhold</PktCard>)
+      const article = container.querySelector('article')
+      expect(article?.getAttribute('aria-label')).toBe('kort')
+    })
+  })
+})

package/src/components/card/Card.tsx

@@ -1,53 +1,188 @@
 'use client'
 
-import { createComponent } from '@lit/react'
-import { IPktHeading, PktCard as PktElCard } from '@oslokommune/punkt-elements'
-// eslint-disable-next-line no-restricted-syntax -- React is required for createComponent
-import React, { FC, ForwardedRef, forwardRef, type ReactElement } from 'react'
+import classNames from 'classnames'
+import { forwardRef, HTMLAttributes, ReactNode, Ref } from 'react'
 import type { TCardSkin, TLayout } from 'shared-types'
 
-import type { PktElConstructor, PktElType } from '@/interfaces/IPktElements'
-
-import { IPktTag } from '../tag/Tag'
+import { PktIcon } from '../icon/Icon'
+import { PktTag } from '../tag/Tag'
 
 export type { TCardSkin, TLayout }
 type TCardPadding = 'none' | 'default'
 type TCardImageShape = 'square' | 'round'
 type TCardTagPosition = 'top' | 'bottom'
+type THeadingLevel = 1 | 2 | 3 | 4 | 5 | 6
+
+type TTagSkin = 'blue' | 'blue-light' | 'blue-dark' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray'
 
-export interface IPktCard extends PktElType {
+interface ICardTag {
+  skin?: TTagSkin
+  iconName?: string
+  ariaLabel?: string
+  text: string
+}
+
+export interface IPktCard extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
   ariaLabel?: string
   metaLead?: string | null
-  borderOnHover?: boolean | null
+  borderOnHover?: boolean
   metaTrail?: string | null
   layout?: TLayout
   heading?: string
-  headingLevel?: IPktHeading['level']
+  headingLevel?: THeadingLevel
   image?: { src: string; alt: string }
   imageShape?: TCardImageShape
   clickCardLink?: string | null
   padding?: TCardPadding
-  openLinkInNewTab?: boolean | null
+  openLinkInNewTab?: boolean
   skin?: TCardSkin
   subheading?: string
   tagPosition?: TCardTagPosition
-  tags?: (Omit<IPktTag, 'closeTag'> & { text: string })[]
+  tags?: ICardTag[]
+  children?: ReactNode
+  ref?: Ref<HTMLDivElement>
 }
 
-const LitComponent: FC<IPktCard> = createComponent({
-  tagName: 'pkt-card',
-  elementClass: PktElCard as PktElConstructor<HTMLElement>,
-  react: React,
-  displayName: 'PktCard',
-  events: {},
-})
+export const PktCard = forwardRef<HTMLDivElement, IPktCard>(
+  (
+    {
+      children,
+      className,
+      ariaLabel,
+      metaLead,
+      borderOnHover = true,
+      metaTrail,
+      layout = 'vertical',
+      heading = '',
+      headingLevel = 3,
+      image,
+      imageShape = 'square',
+      clickCardLink,
+      padding = 'default',
+      openLinkInNewTab = false,
+      skin = 'outlined',
+      subheading = '',
+      tagPosition = 'top',
+      tags = [],
+      ...props
+    },
+    ref,
+  ) => {
+    const classes = classNames({
+      'pkt-card': true,
+      [`pkt-card--${skin}`]: skin,
+      [`pkt-card--${layout}`]: layout,
+      [`pkt-card--padding-${padding}`]: padding,
+      'pkt-card--border-on-hover': borderOnHover,
+    })
+
+    const ariaLabelLenke =
+      ariaLabel?.trim() || (heading ? `${heading} lenkekort` : 'lenkekort')
+    const ariaLabelVanlig = ariaLabel?.trim() || (heading ? heading : 'kort')
+
+    const HeadingTag = `h${headingLevel}` as keyof JSX.IntrinsicElements
+
+    const renderImage = () => {
+      if (!image?.src) return null
+      return (
+        <div className={classNames('pkt-card__image', `pkt-card__image-${imageShape}`)}>
+          <img src={image.src} alt={image.alt || ''} />
+        </div>
+      )
+    }
+
+    const renderTags = () => {
+      if (tags.length === 0) return null
+      return (
+        <div
+          className={classNames('pkt-card__tags', `pkt-card__tags-${tagPosition}`)}
+          role="list"
+          aria-label={tags.length > 1 ? 'merkelapper' : 'merkelapp'}
+        >
+          {tags.map((tag, index) => (
+            <PktTag
+              key={index}
+              role="listitem"
+              textStyle="normal-text"
+              size="medium"
+              skin={tag.skin}
+              iconName={tag.iconName}
+            >
+              <span>{tag.text}</span>
+            </PktTag>
+          ))}
+        </div>
+      )
+    }
+
+    const renderHeading = () => {
+      if (!heading || clickCardLink) return null
+      return (
+        <HeadingTag className="pkt-heading pkt-heading--medium pkt-heading--fw-regular pkt-card__heading">
+          {heading}
+        </HeadingTag>
+      )
+    }
+
+    const renderLinkHeading = () => {
+      if (!clickCardLink) return null
+      return (
+        <HeadingTag className="pkt-heading pkt-heading--medium pkt-heading--fw-regular pkt-card__link-heading pkt-card__heading">
+          <a
+            className="pkt-card__link"
+            href={clickCardLink}
+            target={openLinkInNewTab ? '_blank' : '_self'}
+            rel={openLinkInNewTab ? 'noopener noreferrer' : undefined}
+          >
+            {heading}
+          </a>
+        </HeadingTag>
+      )
+    }
+
+    const renderSubheading = () => {
+      if (!subheading) return null
+      return <p className="pkt-card__subheading">{subheading}</p>
+    }
+
+    const renderHeader = () => {
+      if (!heading && !subheading) return null
+      return (
+        <header className="pkt-card__header">
+          {renderHeading()}
+          {renderLinkHeading()}
+          {renderSubheading()}
+        </header>
+      )
+    }
+
+    const renderMetadata = () => {
+      if (!metaLead && !metaTrail) return null
+      return (
+        <footer className="pkt-card__metadata">
+          {metaLead && <span className="pkt-card__metadata-lead">{metaLead}</span>}
+          {metaTrail && <span className="pkt-card__metadata-trail">{metaTrail}</span>}
+        </footer>
+      )
+    }
 
-export const PktCard: FC<IPktCard> = forwardRef(
-  ({ children, ...props }: IPktCard, ref: ForwardedRef<HTMLElement>): ReactElement => {
     return (
-      <LitComponent {...props} ref={ref}>
-        <div className="pkt-contents">{children}</div>
-      </LitComponent>
+      <div ref={ref} className={classNames('pkt-card-root', className)} style={{ display: 'block', width: '100%' }}>
+        <article
+          {...props}
+          className={classes}
+          aria-label={clickCardLink ? ariaLabelLenke : ariaLabelVanlig}
+        >
+          {renderImage()}
+          <div className="pkt-card__wrapper">
+            {tagPosition === 'top' && renderTags()}
+            {renderHeader()}
+            <section className="pkt-card__content">{children}</section>
+            {tagPosition === 'bottom' && renderTags()}
+            {renderMetadata()}
+          </div>
+        </article>
+      </div>
     )
   },
 )