@oslokommune/punkt-react 12.14.2 → 12.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "12.14.2",
+  "version": "12.15.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.5",
-    "@oslokommune/punkt-elements": "^12.14.1",
+    "@oslokommune/punkt-elements": "^12.15.0",
     "angular-html-parser": "^6.0.2",
     "html-format": "^1.1.7",
     "prettier": "^3.3.3",
@@ -48,7 +48,7 @@
   },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^12.14.0",
-    "@oslokommune/punkt-css": "^12.14.0",
+    "@oslokommune/punkt-css": "^12.15.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -111,5 +111,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "ebf92a4691afcf52453556ba41f603c14dc953b0"
+  "gitHead": "31e12e08dcb69c897c9cfb553e3364efe5e340a1"
 }

package/src/components/preview/Preview.tsx

@@ -42,7 +42,7 @@ export const PktPreview: React.FC<PreviewProps> = ({ specs, children, fullWidth
           return acc
         }, {})
       : {}
-
+  const [iteratedKey, setIteratedKey] = useState(0)
   const [props, setProps] = useState(initialProps)
   const [mode, setMode] = useState<'light' | 'dark'>('light')
   const [htmlContent, setHtmlContent] = useState('')
@@ -153,6 +153,7 @@ export const PktPreview: React.FC<PreviewProps> = ({ specs, children, fullWidth
     )
 
   const handleChange = (key: string, value: any, displayAsFalse: boolean = false) => {
+    setIteratedKey(iteratedKey + 1)
     if (!displayAsFalse && (!value || value == 'false')) {
       const { [key]: _, ...rest } = props
       setProps(rest)
@@ -183,6 +184,7 @@ export const PktPreview: React.FC<PreviewProps> = ({ specs, children, fullWidth
         <div
           className={`pkt-preview__component ${fullWidth && 'pkt-preview__component--fullwidth'}`}
           ref={previewComponent}
+          key={iteratedKey}
         >
           <div>{component}</div>
         </div>

package/src/components/preview/PreviewPropEditor.tsx

@@ -41,7 +41,7 @@ export const PktPreviewPropEditor: FC<PropEditorProps> = ({ propKey, spec, props
           id={propKey}
           label={propKey}
           type="checkbox"
-          checked={props[propKey]}
+          checked={props[propKey] || false}
           onChange={(e) => handleChange(propKey, e.target.checked, spec.displayAsFalse)}
           labelPosition="right"
           isSwitch
@@ -56,7 +56,7 @@ export const PktPreviewPropEditor: FC<PropEditorProps> = ({ propKey, spec, props
         label={spec.name || propKey}
         helptext={spec.description || null}
         id={propKey}
-        value={props[propKey]}
+        value={props[propKey] || ''}
         onChange={(e) => handleChange(propKey, e.target.value)}
         requiredTag={spec.required}
       >
@@ -76,8 +76,8 @@ export const PktPreviewPropEditor: FC<PropEditorProps> = ({ propKey, spec, props
         id={propKey}
         label={spec.name || propKey}
         helptext={spec.description || null}
-        value={props[propKey]}
-        multiple={spec.variant === 'multiple'}
+        value={props[propKey] || ''}
+        multiple={!!(spec.variant === 'multiple')}
         maxlength={999}
         onChange={(e) => handleChange(propKey, (e.target as HTMLInputElement).value)}
         requiredTag={spec.required}
@@ -113,7 +113,7 @@ export const PktPreviewPropEditor: FC<PropEditorProps> = ({ propKey, spec, props
         label={spec.name || propKey}
         helptext={spec.description || null}
         type="number"
-        value={props[propKey]}
+        value={props[propKey] || ''}
         onChange={(e) => handleChange(propKey, parseFloat(e.currentTarget.value))}
         requiredTag={spec.required}
       />
@@ -147,7 +147,7 @@ export const PktPreviewPropEditor: FC<PropEditorProps> = ({ propKey, spec, props
       label={spec.name || propKey}
       helptext={spec.description || null}
       type="text"
-      value={props[propKey]}
+      value={props[propKey] || ''}
       onChange={(e) =>
         handleChange(propKey, spec.type === 'number' ? parseFloat(e.currentTarget.value) : e.currentTarget.value)
       }

package/src/components/preview/PreviewSpecs.tsx

@@ -49,8 +49,8 @@ export const PktPreviewSpecs: React.FC<{ specs: ISpecObject }> = ({ specs }) =>
       <PktTable compact>
         <PktTableHeader>
           <PktTableRow>
-            <PktTableHeaderCell>Navn</PktTableHeaderCell>
             <PktTableHeaderCell>Prop</PktTableHeaderCell>
+            <PktTableHeaderCell>Navn</PktTableHeaderCell>
             <PktTableHeaderCell>Beskrivelse</PktTableHeaderCell>
             <PktTableHeaderCell>Type</PktTableHeaderCell>
             <PktTableHeaderCell>Standardverdi</PktTableHeaderCell>
@@ -67,7 +67,7 @@ export const PktPreviewSpecs: React.FC<{ specs: ISpecObject }> = ({ specs }) =>
                 <>
                   <PktTableDataCell dataLabel="Beskrivelse"></PktTableDataCell>
                   <PktTableDataCell dataLabel="Type">
-                    <pre>{value.join(' \n')}</pre>
+                    <pre>{value.join('\n')}</pre>
                   </PktTableDataCell>
                 </>
               ) : (

package/src/components/textinput/Textinput.test.tsx

@@ -9,35 +9,39 @@ import { PktTextinput } from './Textinput'
 expect.extend(toHaveNoViolations)
 
 describe('PktTextinput', () => {
-  test('renders input field with correct props', () => {
+  test('renders input field with correct props', async () => {
     const { getByLabelText } = render(<PktTextinput label="Input Label" id="inputId" />)
+    await window.customElements.whenDefined('pkt-textinput')
 
     const inputElement = getByLabelText('Input Label')
     expect(inputElement).toBeInTheDocument()
     expect(inputElement.tagName).toBe('INPUT')
-    expect(inputElement.id).toBe('inputId')
+    expect(inputElement.id).toBe('inputId-input')
   })
 
-  test('renders error message when hasError prop is true', () => {
+  test('renders error message when hasError prop is true', async () => {
     const { getByText } = render(<PktTextinput label="Input Label" id="inputId" hasError errorMessage="Input error" />)
+    await window.customElements.whenDefined('pkt-textinput')
+
     const errorMessage = getByText('Input error')
     expect(errorMessage).toBeInTheDocument()
-    expect(errorMessage.closest('pkt-alert')).toHaveAttribute('id', 'inputId-error')
+    expect(errorMessage.closest('.pkt-alert')).toHaveAttribute('id', 'inputId-input-error')
   })
 
   describe('PktTextinput', () => {
-    test('toggles helptext class', () => {
+    test('toggles helptext class', async () => {
       const { getByText, container } = render(
         <PktTextinput label="Input Label" id="inputId" helptext="Help Text" helptextDropdown="Help Text" />,
       )
+      await window.customElements.whenDefined('pkt-textinput')
 
-      const expandButton = getByText('Les mer')
+      const expandButton = getByText('Les mer').closest('button') as HTMLButtonElement
       const helptextElement = container.querySelector('.pkt-inputwrapper__helptext-expandable-closed')
 
-      fireEvent.click(expandButton)
+      await fireEvent.click(expandButton)
       expect(helptextElement).toHaveClass('pkt-inputwrapper__helptext-expandable-open')
 
-      fireEvent.click(expandButton)
+      await fireEvent.click(expandButton)
       expect(helptextElement).toHaveClass('pkt-inputwrapper__helptext-expandable-closed')
     })
   })
@@ -45,6 +49,7 @@ describe('PktTextinput', () => {
   describe('accessibility', () => {
     it('renders with no wcag errors with axe', async () => {
       const { container } = render(<PktTextinput label="Input Label" id="inputId" />)
+      await window.customElements.whenDefined('pkt-textinput')
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })

package/src/components/textinput/Textinput.tsx

@@ -1,11 +1,10 @@
-import React, { ForwardedRef, forwardRef, InputHTMLAttributes, useRef, useState, ChangeEvent, ReactNode } from 'react'
+import React, { ForwardRefExoticComponent, LegacyRef, ChangeEventHandler, FocusEventHandler, ReactNode } from 'react'
+import { createComponent, EventName } from '@lit/react'
+import { PktTextinput as PktEl } from '@oslokommune/punkt-elements'
+import type { PktElType, PktEventWithTarget } from '@/interfaces/IPktElements'
 
-import { PktIcon } from '../icon/Icon'
-import { PktInputWrapper } from '../inputwrapper/InputWrapper'
-
-export interface IPktTextinput extends InputHTMLAttributes<HTMLInputElement> {
+export interface IPktTextinput extends Omit<PktElType, 'ref'> {
   id: string
-  ariaDescribedby?: string
   ariaLabelledby?: string
   autocomplete?: string
   counter?: boolean
@@ -32,112 +31,24 @@ export interface IPktTextinput extends InputHTMLAttributes<HTMLInputElement> {
   useWrapper?: boolean
   value?: string
   omitSearchIcon?: boolean
+  ref?: LegacyRef<PktEl>
+  onChange?: ChangeEventHandler<HTMLInputElement>
+  onInput?: ChangeEventHandler<HTMLInputElement>
+  onBlur?: FocusEventHandler<HTMLInputElement>
+  onFocus?: FocusEventHandler<HTMLInputElement>
+  onValueChange?: (e: CustomEvent) => void
+  onToggleHelpText?: (e: CustomEvent) => void
 }
 
-export const PktTextinput = forwardRef(
-  (
-    {
-      id,
-      ariaDescribedby,
-      ariaLabelledby,
-      autocomplete = 'off',
-      counter,
-      counterMaxLength,
-      className,
-      disabled = false,
-      errorMessage,
-      hasError = false,
-      helptext,
-      helptextDropdown,
-      helptextDropdownButton,
-      iconNameRight,
-      inline = false,
-      fullwidth = false,
-      label,
-      name,
-      optionalTag = false,
-      optionalText,
-      requiredTag = false,
-      requiredText,
-      placeholder,
-      prefix,
-      suffix,
-      type = 'text',
-      useWrapper = true,
-      omitSearchIcon = false,
-      value,
-      onChange,
-      ...props
-    }: IPktTextinput,
-    ref: ForwardedRef<HTMLInputElement>,
-  ) => {
-    const classNames = [className, 'pkt-textinput'].join(' ')
-    const labelledBy = ariaLabelledby || `${id}-label`
-    const shouldShowSearchIcon = type === 'search' && !iconNameRight && !omitSearchIcon
-
-    const internalRef = useRef<HTMLTextAreaElement>(null)
-    const [counterCurrent, setCounterCurrent] = useState(0)
-    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-      counter && setCounterCurrent(e.currentTarget?.value?.length || 0)
-      if (onChange) {
-        return onChange(e)
-      }
-    }
-
-    return (
-      <PktInputWrapper
-        ariaDescribedby={ariaDescribedby}
-        className={classNames}
-        disabled={disabled}
-        errorMessage={errorMessage}
-        forId={id}
-        hasError={hasError}
-        helptext={helptext}
-        helptextDropdown={helptextDropdown}
-        helptextDropdownButton={helptextDropdownButton}
-        inline={inline}
-        label={label}
-        optionalTag={optionalTag}
-        optionalText={optionalText}
-        requiredTag={requiredTag}
-        requiredText={requiredText}
-        useWrapper={useWrapper}
-        counter={counter}
-        counterCurrent={counterCurrent}
-        counterMaxLength={counterMaxLength}
-      >
-        <div className="pkt-input__container">
-          {prefix && <div className="pkt-input-prefix">{prefix}</div>}
-          <input
-            ref={ref}
-            className={`pkt-input ${fullwidth ? 'pkt-input--fullwidth' : ''} ${
-              counterMaxLength && counterCurrent > counterMaxLength ? 'pkt-input--counter-error' : ''
-            }`}
-            type={type}
-            name={name || id}
-            id={id}
-            placeholder={placeholder}
-            autoComplete={autocomplete}
-            value={value}
-            disabled={disabled}
-            aria-invalid={hasError}
-            aria-errormessage={`${id}-error`}
-            aria-labelledby={labelledBy}
-            {...props}
-            onChange={handleChange}
-          />
-          {suffix && (
-            <p className="pkt-input-suffix">
-              {suffix}
-              {iconNameRight && <PktIcon className="pkt-input-suffix-icon" name={iconNameRight} />}
-              {shouldShowSearchIcon && <PktIcon className="pkt-input-suffix-icon" name="magnifying-glass-big" />}
-            </p>
-          )}
-
-          {!suffix && iconNameRight && <PktIcon className="pkt-input-icon" name={iconNameRight} />}
-          {!suffix && shouldShowSearchIcon && <PktIcon className="pkt-input-icon" name="magnifying-glass-big" />}
-        </div>
-      </PktInputWrapper>
-    )
+export const PktTextinput: ForwardRefExoticComponent<IPktTextinput> = createComponent({
+  tagName: 'pkt-textinput',
+  elementClass: PktEl,
+  react: React,
+  displayName: 'PktTextinput',
+  events: {
+    onChange: 'change' as EventName<PktEventWithTarget>,
+    onBlur: 'blur' as EventName<FocusEvent>,
+    onFocus: 'focus' as EventName<FocusEvent>,
+    onToggleHelpText: 'toggleHelpText' as EventName<CustomEvent>,
   },
-)
+})