@oslokommune/punkt-react 12.29.2 → 12.29.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "12.29.2",
+  "version": "12.29.3",
   "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.5",
-    "@oslokommune/punkt-elements": "^12.29.2",
+    "@oslokommune/punkt-elements": "^12.29.3",
     "angular-html-parser": "^6.0.2",
     "html-format": "^1.1.7",
     "prettier": "^3.3.3",
@@ -111,5 +111,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "bba55044dd965cd3cab5a32614be5a600b02b2ed"
+  "gitHead": "59a0d70f10e765285167342a739bbe6b126a9882"
 }

package/src/components/index.ts

@@ -36,4 +36,4 @@ export { PktTabs } from './tabs/Tabs'
 export { PktTag } from './tag/Tag'
 export { PktTextarea } from './textarea/Textarea'
 export { PktTextinput } from './textinput/Textinput'
-export * from './interfaces';
+export * from './interfaces'

package/src/components/loader/Loader.test.tsx

@@ -9,18 +9,31 @@ expect.extend(toHaveNoViolations)
 
 describe('PktLoader', () => {
   describe('basic rendering', () => {
-    it('renders correctly without any props', () => {
-      const { getByRole } = render(<PktLoader />)
-      expect(getByRole('status')).toBeInTheDocument()
+    it('renders correctly without any props', async () => {
+      const { container } = render(<PktLoader id="loader1" />)
+      await window.customElements.whenDefined('pkt-loader')
+
+      const element = container.querySelector('pkt-loader')
+      expect(element).toBeInTheDocument()
     })
 
-    it('renders', () => {
-      const { container } = render(<PktLoader size="medium" variant="rainbow" message="Loading.." />)
-      expect(container.firstChild).toHaveClass('pkt-loader--box')
+    it('renders with size and variant', async () => {
+      const { container } = render(<PktLoader id="loader1" size="small" variant="rainbow" message="Loading.." />)
+      await window.customElements.whenDefined('pkt-loader')
+
+      const loaderBox = container.querySelector('pkt-loader')
+      const loaderSize = loaderBox?.querySelector('.pkt-loader--small')
+
+      expect(loaderSize).toBeInTheDocument()
+      expect(loaderBox).toHaveTextContent('Loading..')
     })
-    it('renders inline', () => {
+
+    it('renders inline', async () => {
       const { container } = render(<PktLoader size="medium" message="Loading.." inline />)
-      expect(container.firstChild).toHaveClass('pkt-loader--inline')
+      await window.customElements.whenDefined('pkt-loader')
+      const elementInline = container.querySelector('.pkt-loader--inline')
+
+      expect(elementInline).toBeInTheDocument()
     })
   })
 

package/src/components/loader/Loader.tsx

@@ -1,84 +1,27 @@
-import React, { HTMLAttributes, forwardRef, useState, ForwardedRef } from 'react'
-import PktIcon from '../icon/Icon'
-
-export interface IPktLoader extends HTMLAttributes<HTMLDivElement> {
-  message?: string
-  inline?: boolean
-  /**
-   * The boolean 'isLoading' decides whether the loader or the children will be displayed.
-   * If set to false, the children will be displayed.
-   */
-  isLoading?: boolean
-  /**
-   * Default size is set to "medium"
-   */
-  size?: 'small' | 'medium' | 'large'
-  /**
-   * Variants available are "blue" spinner, "rainbow" spinner and
-   * "shapes" oslo wave loader. Default is rainbow.
-   */
-  variant?: 'blue' | 'rainbow' | 'shapes'
-  /**
-   * The `delay` prop controls how much time the loading should be given before the loader is displayed.
-   * This is handy for situations where the load time might be so short that loader is not necessary.
-   * Delay time is in milliseconds.
-   */
-  delay?: number
-}
-
-export const PktLoader = forwardRef(
-  (
-    {
-      className,
-      message,
-      size = 'medium',
-      inline = false,
-      isLoading = true,
-      variant = 'rainbow',
-      delay = 0,
-      children,
-      ...props
-    }: IPktLoader,
-    ref: ForwardedRef<HTMLDivElement>,
-  ) => {
-    const classes = `pkt-loader pkt-loader--${size}`
-
-    const [shouldDisplayLoader, setShouldDisplayLoader] = useState(delay > 0 ? false : true)
-
-    delay > 0 &&
-      setTimeout(() => {
-        setShouldDisplayLoader(true)
-      }, delay)
-
-    const getVariant = (variant: 'blue' | 'rainbow' | 'shapes'): string => {
-      return variant === 'shapes' ? 'loader' : variant === 'blue' ? 'spinner-blue' : 'spinner'
-    }
-
+import React, { forwardRef, ForwardedRef, FC, ReactElement } from 'react'
+import { createComponent } from '@lit/react'
+import { PktLoader as PktElLoader } from '@oslokommune/punkt-elements'
+import type { IPktLoader as IPktElLoader } from '@oslokommune/punkt-elements'
+import type { PktElType, PktElConstructor } from '@/interfaces/IPktElements'
+
+type ExtendedLoader = IPktElLoader & PktElType
+
+export interface IPktLoader extends ExtendedLoader {}
+
+const LitComponent: FC<IPktLoader> = createComponent({
+  tagName: 'pkt-loader',
+  elementClass: PktElLoader as PktElConstructor<HTMLElement>,
+  react: React,
+  displayName: 'PktLoader',
+  events: {},
+})
+
+export const PktLoader: FC<IPktLoader> = forwardRef(
+  ({ children, ...props }: IPktLoader, ref: ForwardedRef<HTMLElement>): ReactElement => {
     return (
-      <div
-        role="status"
-        aria-live="polite"
-        aria-busy={isLoading}
-        className={`pkt-loader--${inline ? 'inline' : 'box'}  ${className ? className : ''}`}
-      >
-        {isLoading ? (
-          <>
-            {shouldDisplayLoader ? (
-              <div className={classes} data-testid="pkt-loader" ref={ref} {...props}>
-                <PktIcon
-                  name={getVariant(variant)}
-                  path="https://punkt-cdn.oslo.kommune.no/latest/animations/"
-                  className={`pkt-loader__svg pkt-loader__${variant}`}
-                />
-
-                {message && <p>{message}</p>}
-              </div>
-            ) : null}
-          </>
-        ) : (
-          children
-        )}
-      </div>
+      <LitComponent {...props} ref={ref}>
+        <div className="pkt-contents">{children}</div>
+      </LitComponent>
     )
   },
 )