@oslokommune/punkt-react 12.40.9 → 12.41.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "12.40.9",
+  "version": "12.41.0",
   "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.9",
+    "@oslokommune/punkt-elements": "^12.41.0",
     "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.9",
+    "@oslokommune/punkt-css": "^12.41.0",
     "@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": "c0dcdafe2c567fae82afb53fa36abd998bbef63a"
+  "gitHead": "0fa02d9d211044739d7b86ec9f24f334df782a1d"
 }

package/src/components/button/Button.test.tsx

@@ -87,8 +87,6 @@ test('forwardRef works correctly', async () => {
   const ref = createRef<HTMLButtonElement>()
   render(<PktButton ref={ref}>Click me</PktButton>)
 
-  await window.customElements.whenDefined('pkt-button')
-
   await userEvent.click(screen.getByText('Click me'))
 
   expect(ref.current).toBe(screen.getByRole('button'))
@@ -96,17 +94,14 @@ test('forwardRef works correctly', async () => {
 
 test('PktButton triggers click when focused and enter is pressed', async () => {
   const handleClick = jest.fn()
-  render(<PktButton onClick={handleClick}>Trøkk her</PktButton>)
-
-  await window.customElements.whenDefined('pkt-button')
+  render(<PktButton onClick={handleClick}>trøkk her</PktButton>)
 
-  const button = screen.getByRole('button')
+  const button = screen.getByRole('button', { name: /trøkk her/i })
 
   button.focus()
   expect(button).toHaveFocus()
 
   await userEvent.keyboard('{Enter}')
-
   expect(handleClick).toHaveBeenCalledTimes(1)
 })
 
@@ -114,8 +109,6 @@ test('PktButton triggers click when focused and space is pressed', async () => {
   const handleClick = jest.fn()
   render(<PktButton onClick={handleClick}>Trøkk igjen</PktButton>)
 
-  await window.customElements.whenDefined('pkt-button')
-
   const button = screen.getByRole('button')
 
   button.focus()

package/src/components/button/Button.tsx

@@ -1,49 +1,93 @@
 'use client'
+import React, { ForwardedRef, forwardRef } from 'react'
 
-import React, {
-  ForwardRefExoticComponent,
-  LegacyRef,
-  FC,
-  forwardRef,
-  ForwardedRef,
-  KeyboardEventHandler,
-  ChangeEventHandler,
-  FocusEventHandler,
-  MouseEventHandler,
-  ButtonHTMLAttributes,
-} from 'react'
-import { createComponent, EventName } from '@lit/react'
-import { PktButton as PktElButton } from '@oslokommune/punkt-elements'
-import type { IPktButton as IPktElButton } from '@oslokommune/punkt-elements'
+import { PktIcon } from '../icon/Icon'
+declare global {
+  interface Window {
+    pktAnimationPath?: string
+  }
+}
 
-type ExtendedButton = IPktElButton & ButtonHTMLAttributes<HTMLButtonElement>
+window.pktAnimationPath = window.pktAnimationPath || 'https://punkt-cdn.oslo.kommune.no/latest/animations/'
 
-export interface IPktButton extends ExtendedButton {
-  ref?: LegacyRef<HTMLButtonElement>
-  onClick?: MouseEventHandler<HTMLButtonElement>
-  onChange?: ChangeEventHandler<HTMLButtonElement>
-  onBlur?: FocusEventHandler<HTMLButtonElement>
-  onFocus?: FocusEventHandler<HTMLButtonElement>
-  onKeydown?: KeyboardEventHandler<HTMLButtonElement>
-  onKeyup?: KeyboardEventHandler<HTMLButtonElement>
+export interface IPktButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  iconName?: string
+  secondIconName?: string
+  mode?: 'light' | 'dark'
+  size?: 'small' | 'medium' | 'large'
+  color?:
+    | 'blue'
+    | 'blue-outline'
+    | 'green'
+    | 'green-outline'
+    | 'green-dark'
+    | 'green-dark-outline'
+    | 'beige-light'
+    | 'beige-dark-outline'
+    | 'yellow'
+    | 'yellow-outline'
+    | 'red'
+    | 'red-outline'
+  skin?: 'primary' | 'secondary' | 'tertiary'
+  variant?: 'label-only' | 'icon-left' | 'icon-right' | 'icon-only' | 'icons-right-and-left'
+  state?: 'normal' | 'focus' | 'hover' | 'active'
+  type?: 'button' | 'submit' | 'reset'
+  isLoading?: boolean
+  loadingAnimationPath?: string
 }
 
-export const LitComponent = createComponent({
-  tagName: 'pkt-button',
-  elementClass: PktElButton,
-  react: React,
-  displayName: 'PktButton',
-  events: {
-    onButtonClick: 'button-click' as EventName<CustomEvent>,
-  },
-}) as ForwardRefExoticComponent<IPktButton>
+export const PktButton = forwardRef(
+  (
+    {
+      children,
+      className,
+      iconName = 'user',
+      secondIconName = 'user',
+      size = 'medium',
+      skin = 'primary',
+      type = 'button',
+      variant = 'label-only',
+      state,
+      color,
+      isLoading = undefined,
+      disabled = undefined,
+      loadingAnimationPath = window.pktAnimationPath,
+      ...props
+    }: IPktButton,
+    ref: ForwardedRef<HTMLButtonElement>,
+  ) => {
+    const classes = [
+      className,
+      'pkt-btn',
+      size && `pkt-btn--${size}`,
+      skin && `pkt-btn--${skin}`,
+      variant && `pkt-btn--${variant}`,
+      color && `pkt-btn--${color}`,
+      state && `pkt-btn--${state}`,
+      isLoading && `pkt-btn--isLoading`,
+    ]
+      .filter(Boolean)
+      .join(' ')
 
-export const PktButton: FC<IPktButton> = forwardRef(({ children, ...props }, ref: ForwardedRef<HTMLButtonElement>) => {
-  return (
-    <LitComponent {...props} ref={ref}>
-      <div className="pkt-contents">{children}</div>
-    </LitComponent>
-  )
-})
+    return (
+      <button
+        {...props}
+        aria-busy={isLoading || undefined}
+        aria-disabled={disabled || undefined}
+        disabled={disabled}
+        className={classes}
+        type={type}
+        ref={ref}
+      >
+        {isLoading && (
+          <PktIcon className="pkt-btn__icon pkt-btn__spinner" name="spinner-blue" path={loadingAnimationPath} />
+        )}
+        {variant !== 'label-only' && <PktIcon className="pkt-btn__icon" name={iconName}></PktIcon>}
+        <span className="pkt-btn__text">{children}</span>
+        {variant === 'icons-right-and-left' && <PktIcon className="pkt-btn__icon" name={secondIconName}></PktIcon>}
+      </button>
+    )
+  },
+)
 
 PktButton.displayName = 'PktButton'