@oslokommune/punkt-react 13.13.1 → 13.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "13.13.1",
+  "version": "13.14.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": "^13.13.1",
+    "@oslokommune/punkt-elements": "^13.13.2",
     "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-element-to-jsx-string": "^15.0.0",
@@ -49,7 +49,7 @@
   "devDependencies": {
     "@babel/plugin-transform-private-property-in-object": "^7.25.9",
     "@oslokommune/punkt-assets": "^13.11.0",
-    "@oslokommune/punkt-css": "^13.13.1",
+    "@oslokommune/punkt-css": "^13.13.2",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -106,5 +106,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "609519ab399ad3e68840069b8cdd69bb2feb8614"
+  "gitHead": "fe689e7956b40608a560d8c8cd6ee32b5f408f27"
 }

package/src/components/button/Button.tsx

@@ -16,6 +16,8 @@ export interface IPktButton extends ButtonHTMLAttributes<HTMLButtonElement> {
   secondIconName?: string
   mode?: 'light' | 'dark'
   size?: 'small' | 'medium' | 'large'
+  fullWidth?: boolean
+  fullWidthOnMobile?: boolean
   color?:
     | 'blue'
     | 'blue-outline'
@@ -45,6 +47,8 @@ export const PktButton = forwardRef(
       iconName = 'user',
       secondIconName = 'user',
       size = 'medium',
+      fullWidth = false,
+      fullWidthOnMobile = false,
       skin = 'primary',
       type = 'button',
       variant = 'label-only',
@@ -61,6 +65,8 @@ export const PktButton = forwardRef(
       className,
       'pkt-btn',
       size && `pkt-btn--${size}`,
+      fullWidth && 'pkt-btn--full',
+      fullWidthOnMobile && 'pkt-btn--full-small',
       skin && `pkt-btn--${skin}`,
       variant && `pkt-btn--${variant}`,
       color && `pkt-btn--${color}`,

package/src/components/link/Link.test.tsx

@@ -0,0 +1,112 @@
+import { render, screen } from '@testing-library/react'
+
+import { PktLink } from './Link'
+
+describe('PktLink', () => {
+  it('should render with children element', () => {
+    render(
+      <PktLink href="/test">
+        Test <strong>Link</strong>
+      </PktLink>,
+    )
+    const link = screen.getByRole('link')
+    expect(link.innerHTML).toEqual('Test <strong>Link</strong>')
+  })
+
+  it('should apply href attribute', () => {
+    render(<PktLink href="/test-url">Test Link</PktLink>)
+    const link = screen.getByText('Test Link')
+    expect(link).toHaveAttribute('href', '/test-url')
+  })
+
+  it('should apply base pkt-link class', () => {
+    render(<PktLink href="/test">Test Link</PktLink>)
+    const link = screen.getByText('Test Link')
+    expect(link).toHaveClass('pkt-link')
+  })
+
+  it('should apply custom className in addition to base class', () => {
+    render(
+      <PktLink href="/test" className="custom-class">
+        Test Link
+      </PktLink>,
+    )
+    const link = screen.getByText('Test Link')
+    expect(link).toHaveClass('pkt-link')
+    expect(link).toHaveClass('custom-class')
+  })
+
+  it.each`
+    description                                            | iconName     | iconPosition | expectedClasses             | notExpectedClasses
+    ${'icon-left class when iconName and no iconPosition'} | ${'arrow'}   | ${undefined} | ${['pkt-link--icon-left']}  | ${['pkt-link--icon-right']}
+    ${'icon-left class when iconPosition is "left"'}       | ${'arrow'}   | ${'left'}    | ${['pkt-link--icon-left']}  | ${['pkt-link--icon-right']}
+    ${'icon-right class when iconPosition is "right"'}     | ${'arrow'}   | ${'right'}   | ${['pkt-link--icon-right']} | ${['pkt-link--icon-left']}
+    ${'no icon classes when iconName is not provided'}     | ${undefined} | ${undefined} | ${[]}                       | ${['pkt-link--icon-left', 'pkt-link--icon-right']}
+    ${'no icon classes when iconName is not provided'}     | ${undefined} | ${'left'}    | ${[]}                       | ${['pkt-link--icon-left', 'pkt-link--icon-right']}
+  `('should apply $description', ({ iconName, iconPosition, expectedClasses, notExpectedClasses }) => {
+    render(
+      <PktLink href="/test" iconName={iconName} iconPosition={iconPosition}>
+        Test Link
+      </PktLink>,
+    )
+    const link = screen.getByText('Test Link')
+    expectedClasses.forEach((className: string) => {
+      expect(link).toHaveClass(className)
+    })
+    notExpectedClasses.forEach((className: string) => {
+      expect(link).not.toHaveClass(className)
+    })
+    const icon = document.querySelector('.pkt-link__icon')
+    if (iconName) {
+      expect(icon).toBeInTheDocument();
+    } else {
+      expect(icon).not.toBeInTheDocument();
+    }
+  })
+
+  it.each`
+    description                                              | external     | hasExternalClass | relAttribute
+    ${'external class and rel when external is true'}        | ${true}      | ${true}          | ${'noopener noreferrer'}
+    ${'no external class or rel when external is false'}     | ${false}     | ${false}         | ${null}
+    ${'no external class or rel when external is undefined'} | ${undefined} | ${false}         | ${null}
+  `('should apply $description', ({ external, hasExternalClass, relAttribute }) => {
+    render(
+      <PktLink href="/test" external={external}>
+        Test Link
+      </PktLink>,
+    )
+    const link = screen.getByText('Test Link')
+
+    if (hasExternalClass) {
+      expect(link).toHaveClass('pkt-link--external')
+    } else {
+      expect(link).not.toHaveClass('pkt-link--external')
+    }
+
+    if (relAttribute) {
+      expect(link).toHaveAttribute('rel', relAttribute)
+    } else {
+      expect(link).not.toHaveAttribute('rel')
+    }
+  })
+
+  it('should apply target attribute', () => {
+    render(
+      <PktLink href="/test" target="_blank">
+        Test Link
+      </PktLink>,
+    )
+    const link = screen.getByText('Test Link')
+    expect(link).toHaveAttribute('target', '_blank')
+  })
+
+  it('should spread additional props to anchor element', () => {
+    render(
+      <PktLink href="/test" data-testid="custom-link" aria-label="Custom label">
+        Test Link
+      </PktLink>,
+    )
+    const link = screen.getByTestId('custom-link')
+    expect(link).toHaveAttribute('aria-label', 'Custom label')
+  })
+})

package/src/components/link/Link.tsx

@@ -1,41 +1,48 @@
 'use client'
 
-import React, {
-  FC,
-  ForwardedRef,
-  forwardRef,
-  ForwardRefExoticComponent,
-  LegacyRef,
-  LinkHTMLAttributes,
-  ReactElement,
-} from 'react'
-import { createComponent } from '@lit/react'
-import { PktLink as PktElLink } from '@oslokommune/punkt-elements'
+import classNames from 'classnames'
+import { FC, LinkHTMLAttributes } from 'react'
+
+import { PktIcon } from '..'
 
 interface IPktLink extends LinkHTMLAttributes<HTMLAnchorElement> {
   href?: string
   iconName?: string | undefined
+  className?: string | undefined
   iconPosition?: string | undefined
   external?: boolean
-  target?: string | null
-  ref?: LegacyRef<HTMLAnchorElement>
+  target?: string | undefined
 }
 
-const LitComponent = createComponent({
-  tagName: 'pkt-link',
-  elementClass: PktElLink,
-  react: React,
-  displayName: 'PktLink',
-}) as ForwardRefExoticComponent<IPktLink>
+export const PktLink: FC<IPktLink> = ({
+  href,
+  iconName,
+  className,
+  iconPosition,
+  external,
+  target,
+  children,
+  ...props
+}: IPktLink) => {
+  const classes = {
+    'pkt-link': true,
+    'pkt-link--icon-left': (!!iconName && iconPosition === 'left') || !!(iconName && !iconPosition),
+    'pkt-link--icon-right': !!iconName && iconPosition === 'right',
+    'pkt-link--external': external,
+  }
 
-export const PktLink: FC<IPktLink> = forwardRef(
-  ({ children, ...props }: IPktLink, ref: LegacyRef<HTMLAnchorElement>): ReactElement => {
-    return (
-      <LitComponent {...props} ref={ref}>
-        <span className="pkt-contents">{children}</span>
-      </LitComponent>
-    )
-  },
-)
+  return (
+    <a
+      {...props}
+      className={classNames(classes, className)}
+      href={href}
+      target={target}
+      rel={external ? 'noopener noreferrer' : undefined}
+    >
+      {iconName && <PktIcon name={iconName} className="pkt-link__icon" />}
+      {children}
+    </a>
+  )
+}
 
 PktLink.displayName = 'PktLink'