@oslokommune/punkt-react 11.12.3 → 11.12.8

package/src/components/footer/Footer.test.tsx

@@ -1,5 +1,5 @@
 // Test med axe https://www.npmjs.com/package/jest-axe
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom'
 
 import { render, screen } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
@@ -8,9 +8,7 @@ import { PktFooter } from './Footer'
 
 expect.extend(toHaveNoViolations)
 
-
 describe('PktFooterSimple', () => {
-
   const columnOne = {
     title: 'Column One',
     links: [
@@ -54,7 +52,6 @@ describe('PktFooterSimple', () => {
     },
   ]
 
-
   describe('basic rendering', () => {
     it('should render columns and social links', () => {
       render(<PktFooter columnOne={columnOne} columnTwo={columnTwo} socialLinks={socialLinks} />)
@@ -87,11 +84,11 @@ describe('PktFooterSimple', () => {
       const columnTwoTextElement = screen.getByText('Column Two Text')
       expect(columnTwoTextElement).toBeInTheDocument()
 
-      const personvernLink = screen.getByText('Personvern og informasjonskapsler');
-      expect(personvernLink).toBeInTheDocument();
+      const personvernLink = screen.getByText('Personvern og informasjonskapsler')
+      expect(personvernLink).toBeInTheDocument()
 
-      const tilgjengelighetLink = screen.getByText('Tilgjengelighet');
-      expect(tilgjengelighetLink).toBeInTheDocument();
+      const tilgjengelighetLink = screen.getByText('Tilgjengelighet')
+      expect(tilgjengelighetLink).toBeInTheDocument()
 
       const socialLinksElement = screen.getByLabelText('standard lenker')
       expect(socialLinksElement).toBeInTheDocument()
@@ -106,16 +103,16 @@ describe('PktFooterSimple', () => {
 
   describe('accessibility', () => {
     it('renders with no wcag errors with axe', async () => {
-      const { container } = render(<PktFooter columnOne={columnOne} columnTwo={columnTwo} socialLinks={socialLinks} />);
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
+      const { container } = render(<PktFooter columnOne={columnOne} columnTwo={columnTwo} socialLinks={socialLinks} />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
     })
   })
 
   describe('snapshot', () => {
     it('renders correctly with all props', () => {
-      const { container } = render(<PktFooter columnOne={columnOne} columnTwo={columnTwo} socialLinks={socialLinks} />);
-      expect(container).toMatchSnapshot();
+      const { container } = render(<PktFooter columnOne={columnOne} columnTwo={columnTwo} socialLinks={socialLinks} />)
+      expect(container).toMatchSnapshot()
     })
   })
-});
+})

package/src/components/footerSimple/FooterSimple.test.tsx

@@ -1,5 +1,5 @@
 // Test med axe https://www.npmjs.com/package/jest-axe
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom'
 
 import { render } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
@@ -8,58 +8,55 @@ import { PktFooterSimple } from './FooterSimple'
 
 expect.extend(toHaveNoViolations)
 
-
-
 describe('PktFooterSimple', () => {
-
   const links = [
     { href: 'https://www.example.com', text: 'Example Link 1' },
     { href: 'https://www.example.com', text: 'Example Link 2' },
     { href: 'https://www.example.com', text: 'Example Link 3' },
-  ];
+  ]
 
   describe('basic rendering', () => {
     it('renders a list of links', () => {
-      const { getByText } = render(<PktFooterSimple links={links} />);
+      const { getByText } = render(<PktFooterSimple links={links} />)
       links.forEach((link) => {
-        expect(getByText(link.text)).toBeInTheDocument();
-        expect(getByText(link.text).getAttribute('href')).toEqual(link.href);
-      });
-    });
+        expect(getByText(link.text)).toBeInTheDocument()
+        expect(getByText(link.text).getAttribute('href')).toEqual(link.href)
+      })
+    })
 
     it('renders an external link with an external class', () => {
-      const links = [
-        { href: 'https://www.example.com', text: 'Example Link', external: true },
-      ];
-      const { getByText } = render(<PktFooterSimple links={links} />);
-      expect(getByText(links[0].text)).toHaveClass('pkt-link--external');
-    });
+      const links = [{ href: 'https://www.example.com', text: 'Example Link', external: true }]
+      const { getByText } = render(<PktFooterSimple links={links} />)
+      expect(getByText(links[0].text)).toHaveClass('pkt-link--external')
+    })
 
     it('renders a privacy link', () => {
-      const { getByText } = render(<PktFooterSimple />);
-      expect(getByText('Personvern og informasjonskapsler')).toBeInTheDocument();
-      expect(getByText('Personvern og informasjonskapsler').getAttribute('href')).toEqual('https://www.oslo.kommune.no/personvern-og-informasjonskapsler/');
-    });
+      const { getByText } = render(<PktFooterSimple />)
+      expect(getByText('Personvern og informasjonskapsler')).toBeInTheDocument()
+      expect(getByText('Personvern og informasjonskapsler').getAttribute('href')).toEqual(
+        'https://www.oslo.kommune.no/personvern-og-informasjonskapsler/',
+      )
+    })
 
     it('renders an accessibility link', () => {
-      const { getByText } = render(<PktFooterSimple />);
-      expect(getByText('Tilgjengelighet')).toBeInTheDocument();
-      expect(getByText('Tilgjengelighet').getAttribute('href')).toEqual('https://www.oslo.kommune.no/tilgjengelighet/');
-    });
+      const { getByText } = render(<PktFooterSimple />)
+      expect(getByText('Tilgjengelighet')).toBeInTheDocument()
+      expect(getByText('Tilgjengelighet').getAttribute('href')).toEqual('https://www.oslo.kommune.no/tilgjengelighet/')
+    })
   })
 
   describe('accessibility', () => {
     it('renders with no wcag errors with axe', async () => {
-      const { container } = render(<PktFooterSimple links={links} />);
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
+      const { container } = render(<PktFooterSimple links={links} />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
     })
   })
 
   describe('snapshot', () => {
     it('renders correctly with all props', () => {
-      const { container } = render(<PktFooterSimple links={links} />);
-      expect(container).toMatchSnapshot();
+      const { container } = render(<PktFooterSimple links={links} />)
+      expect(container).toMatchSnapshot()
     })
   })
-});
+})

package/src/components/header/Header.test.tsx

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 
 import { fireEvent, render, screen } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
@@ -59,20 +59,14 @@ describe('PktHeader', () => {
   })
 
   it('toggles user menu when user button is clicked', () => {
-    render(
-      <PktHeader user={mockUser} userMenu={mockUserMenu} userMenuFooter={mockUserMenuFooter} />,
-    )
+    render(<PktHeader user={mockUser} userMenu={mockUserMenu} userMenuFooter={mockUserMenuFooter} />)
     const userButton = screen.getByRole('button', { name: 'John Doe JD' })
     fireEvent.click(userButton)
     // Add assertions to check if user menu is open
-    expect(screen.getByTestId('usermenu').classList.contains('pkt-header--open-dropdown')).toBe(
-      true,
-    )
+    expect(screen.getByTestId('usermenu').classList.contains('pkt-header--open-dropdown')).toBe(true)
     fireEvent.click(userButton)
     // Add assertions to check if user menu is closed
-    expect(screen.getByTestId('usermenu').classList.contains('pkt-header--open-dropdown')).toBe(
-      false,
-    )
+    expect(screen.getByTestId('usermenu').classList.contains('pkt-header--open-dropdown')).toBe(false)
   })
 
   describe('accessibility', () => {

package/src/components/header/Header.tsx

@@ -43,7 +43,7 @@ export interface IPktHeader extends HTMLAttributes<HTMLDivElement> {
   openMenu?: () => void
   logOut?: () => void
   changeRepresentation?: () => void
-  children?: React.ReactNode
+  children?: React.ReactNode | React.ReactNode[]
 }
 
 export const PktHeader = forwardRef(

package/src/components/icon/Icon.test.tsx

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 
 import { render, screen, waitFor } from '@testing-library/react'
 import React from 'react'
@@ -28,9 +28,7 @@ describe('PktIcon', () => {
 
   describe('with default fetcher', () => {
     test('fetches SVG with default fetcher', async () => {
-      fetchSpy.mockResolvedValue(
-        new Response('<svg role="img">arrow Her er noe SVG</svg>', { status: 200 }),
-      )
+      fetchSpy.mockResolvedValue(new Response('<svg role="img">arrow Her er noe SVG</svg>', { status: 200 }))
 
       render(<PktIcon name={'arrow'} />)
 
@@ -46,9 +44,7 @@ describe('PktIcon', () => {
 
     test('fetches SVG', async () => {
       fetchSpy.mockImplementation(() =>
-        Promise.resolve(
-          new Response('<svg role="img">some-icon Her er noe SVG</svg>', { status: 200 }),
-        ),
+        Promise.resolve(new Response('<svg role="img">some-icon Her er noe SVG</svg>', { status: 200 })),
       )
 
       render(

package/src/components/index.ts

@@ -17,8 +17,11 @@ export { PktRadioButton } from './radio/RadioButton'
 export { PktSearchInput } from './searchinput/SearchInput'
 export { PktSelect } from './select/Select'
 export { PktTable } from './table/Table'
-export { PktTableData } from './table/TableData'
+export { PktTableDataCell } from './table/TableDataCell'
+export { PktTableHeaderCell } from './table/TableHeaderCell'
 export { PktTableHeader } from './table/TableHeader'
+export { PktTableRow } from './table/TableRow'
+export { PktTableBody } from './table/TableBody'
 export { PktTabs } from './tabs/Tabs'
 export { PktTag } from './tag/Tag'
 export { PktTextarea } from './textarea/Textarea'

package/src/components/inputwrapper/InputWrapper.tsx

@@ -19,7 +19,7 @@ export interface IPktInputWrapper extends RefAttributes<HTMLElement> {
   inline?: boolean
   ariaDescribedby?: string
   useWrapper?: boolean
-  children?: ReactNode
+  children?: ReactNode | ReactNode[]
   className?: string
   hasFieldset?: boolean
 }
@@ -72,38 +72,23 @@ export const PktInputWrapper = forwardRef(
 
     const hasDropDown = !!helptextDropdown && helptextDropdown !== ''
 
-    const dropdownButton =
-      helptextDropdownButton || 'Les mer <span class="pkt-sr-only">om inputfeltet</span>'
+    const dropdownButton = helptextDropdownButton || 'Les mer <span class="pkt-sr-only">om inputfeltet</span>'
 
     const LabelComponent = hasFieldset ? 'fieldset' : hasDropDown ? 'div' : 'label'
     const LabelTextComponent = hasFieldset ? 'legend' : hasDropDown ? 'h2' : 'span'
 
-    const describedBy = ariaDescribedby
-      ? ariaDescribedby
-      : helptext
-      ? `${forId}-helptext`
-      : undefined
+    const describedBy = ariaDescribedby ? ariaDescribedby : helptext ? `${forId}-helptext` : undefined
 
     return (
-      <div
-        className={['pkt-inputwrapper', className, disabledClass, inlineClass, errorClass].join(
-          ' ',
-        )}
-        ref={ref}
-      >
+      <div className={['pkt-inputwrapper', className, disabledClass, inlineClass, errorClass].join(' ')} ref={ref}>
         {useWrapper ? (
           <>
             <LabelComponent
               htmlFor={!hasFieldset ? forId : undefined}
               aria-describedby={hasDropDown ? undefined : ariaDescribedby}
-              className={`pkt-inputwrapper__label${
-                hasFieldset ? ' pkt-inputwrapper__fieldset' : ''
-              }`}
+              className={`pkt-inputwrapper__label${hasFieldset ? ' pkt-inputwrapper__fieldset' : ''}`}
             >
-              <LabelTextComponent
-                id={`${forId}-label`}
-                className={`${hasFieldset ? ' pkt-inputwrapper__legend' : ''}`}
-              >
+              <LabelTextComponent id={`${forId}-label`} className={`${hasFieldset ? ' pkt-inputwrapper__legend' : ''}`}>
                 {label}
                 {tagText !== '' && <span className={tagClass()}>{tagText}</span>}
               </LabelTextComponent>
@@ -148,12 +133,7 @@ export const PktInputWrapper = forwardRef(
         ) : (
           <>
             {!hasFieldset && (
-              <label
-                htmlFor={forId}
-                className="pkt-sr-only"
-                aria-describedby={describedBy}
-                id={`${forId}-label`}
-              >
+              <label htmlFor={forId} className="pkt-sr-only" aria-describedby={describedBy} id={`${forId}-label`}>
                 {label}
               </label>
             )}

package/src/components/linkcard/LinkCard.test.tsx

@@ -1,5 +1,5 @@
 // Test med axe https://www.npmjs.com/package/jest-axe
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom'
 
 import { render } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
@@ -9,17 +9,13 @@ import { PktLinkCard } from './LinkCard'
 
 expect.extend(toHaveNoViolations)
 
-
-
 describe('PktLinkCard', () => {
-
   describe('basic rendering', () => {
-
     it('renders with title and content', () => {
       const { getByRole, getByText } = render(
         <PktLinkCard title="Link title" href="/example">
           Link content
-        </PktLinkCard>
+        </PktLinkCard>,
       )
 
       expect(getByRole('link')).toHaveAttribute('href', '/example')
@@ -33,7 +29,6 @@ describe('PktLinkCard', () => {
       const linkElement = getByRole('link')
       expect(linkElement).toHaveAttribute('href', href)
     })
-
   })
 
   describe('skins', () => {
@@ -45,7 +40,7 @@ describe('PktLinkCard', () => {
           <PktLinkCard title="Beige" skin="beige" />
           <PktLinkCard title="Beige outline" skin="beige-outline" />
           <PktLinkCard title="Grey outline" skin="grey-outline" />
-        </div>
+        </div>,
       )
 
       expect(container.querySelectorAll('.pkt-linkcard--normal')).toHaveLength(1)
@@ -70,10 +65,9 @@ describe('PktLinkCard', () => {
       const { asFragment } = render(
         <PktLinkCard title="Link title" href="/example">
           Link content
-        </PktLinkCard>
+        </PktLinkCard>,
       )
       expect(asFragment()).toMatchSnapshot()
     })
   })
-
 })

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

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import React from 'react'
 
 import { render } from '@testing-library/react'
@@ -15,9 +15,7 @@ describe('PktLoader', () => {
     })
 
     it('renders', () => {
-      const { container } = render(
-        <PktLoader size="medium" variant="rainbow" message="Loading.." />,
-      )
+      const { container } = render(<PktLoader size="medium" variant="rainbow" message="Loading.." />)
       expect(container.firstChild).toHaveClass('pkt-loader--box')
     })
     it('renders inline', () => {

package/src/components/radio/RadioButton.test.tsx

@@ -1,53 +1,54 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom'
 
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
 
-import { PktRadioButton } from './RadioButton';
+import { PktRadioButton } from './RadioButton'
 
 expect.extend(toHaveNoViolations)
 
 describe('PktRadiobutton', () => {
-    // Test case for rendering a basic radiogroup
-    it('renders without errors', () => {
-        const { getByLabelText } = render(
-            <div>
-                <PktRadioButton id="radio1" name="radioGroup" label="Option 1" value="option1" />
-                <PktRadioButton id="radio2" name="radioGroup" label="Option 2" value="option2" />
-            </div>
-        );
-
-        expect(getByLabelText('Option 1')).toBeTruthy();
-        expect(getByLabelText('Option 2')).toBeTruthy();
-    });
-
-    it('allows selecting one option from the group', () => {
-        const { getByLabelText } = render(
-            <div>
-                <PktRadioButton id="radio1" name="radioGroup" label="Option 1" value="option1" />
-                <PktRadioButton id="radio2" name="radioGroup" label="Option 2" value="option2" />
-            </div>
-        );
-
-        const option1 = getByLabelText('Option 1') as HTMLInputElement;
-        const option2 = getByLabelText('Option 2') as HTMLInputElement;
-
-        fireEvent.click(option1);
-        expect(option1.checked).toBe(true);
-        expect(option2.checked).toBe(false);
-
-        fireEvent.click(option2);
-        expect(option1.checked).toBe(false);
-        expect(option2.checked).toBe(true);
-    });
-
-
-    describe('accessibility', () => {
-        it('renders with no wcag errors with axe', async () => {
-            const { container } = render(<PktRadioButton name="accessibilitytest" id="accessibilityTest" label="My checkkbox" />)
-            const results = await axe(container)
-
-            expect(results).toHaveNoViolations()
-        })
+  // Test case for rendering a basic radiogroup
+  it('renders without errors', () => {
+    const { getByLabelText } = render(
+      <div>
+        <PktRadioButton id="radio1" name="radioGroup" label="Option 1" value="option1" />
+        <PktRadioButton id="radio2" name="radioGroup" label="Option 2" value="option2" />
+      </div>,
+    )
+
+    expect(getByLabelText('Option 1')).toBeTruthy()
+    expect(getByLabelText('Option 2')).toBeTruthy()
+  })
+
+  it('allows selecting one option from the group', () => {
+    const { getByLabelText } = render(
+      <div>
+        <PktRadioButton id="radio1" name="radioGroup" label="Option 1" value="option1" />
+        <PktRadioButton id="radio2" name="radioGroup" label="Option 2" value="option2" />
+      </div>,
+    )
+
+    const option1 = getByLabelText('Option 1') as HTMLInputElement
+    const option2 = getByLabelText('Option 2') as HTMLInputElement
+
+    fireEvent.click(option1)
+    expect(option1.checked).toBe(true)
+    expect(option2.checked).toBe(false)
+
+    fireEvent.click(option2)
+    expect(option1.checked).toBe(false)
+    expect(option2.checked).toBe(true)
+  })
+
+  describe('accessibility', () => {
+    it('renders with no wcag errors with axe', async () => {
+      const { container } = render(
+        <PktRadioButton name="accessibilitytest" id="accessibilityTest" label="My checkkbox" />,
+      )
+      const results = await axe(container)
+
+      expect(results).toHaveNoViolations()
     })
+  })
 })

package/src/components/searchinput/SearchInput.test.tsx

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 
 import { fireEvent, render, screen } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
@@ -17,7 +17,7 @@ describe('PktSearchInput', () => {
   it('renders with div element when action prop does not exist', () => {
     const { container } = render(<PktSearchInput id="test-search-input" />)
     expect(container.querySelector('div')).toBeInTheDocument()
-    expect(container.querySelector('form')).not.toBeInTheDocument();
+    expect(container.querySelector('form')).not.toBeInTheDocument()
   })
 
   it('renders with label element when label prop exists', () => {
@@ -70,9 +70,7 @@ describe('PktSearchInput', () => {
         { title: 'Suggestion 1', onClick: jest.fn() },
         { title: 'Suggestion 2', onClick: jest.fn() },
       ]
-      const { container } = render(
-        <PktSearchInput id="test-search-input" label="My label" suggestions={suggestions} />,
-      )
+      const { container } = render(<PktSearchInput id="test-search-input" label="My label" suggestions={suggestions} />)
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })

package/src/components/searchinput/SearchInput.tsx

@@ -70,21 +70,16 @@ export const PktSearchInput = forwardRef<HTMLFormElement & HTMLDivElement, ISear
         ref={ref}
         {...props}
       >
-        <LabelElement
-          htmlFor={label ? id : undefined}
-          className={label ? 'pkt-inputwrapper__label' : ''}
-        >
+        <LabelElement htmlFor={label ? id : undefined} className={label ? 'pkt-inputwrapper__label' : ''}>
           {label && <>{label}</>}
-          <div
-            className={appearance === 'local' ? 'pkt-input__container' : 'pkt-searchinput__field'}
-          >
+          <div className={appearance === 'local' ? 'pkt-input__container' : 'pkt-searchinput__field'}>
             <input
               className={`pkt-input ${fullwidth ? 'pkt-input--fullwidth' : ''}`}
               type="search"
               name={name || id}
               id={id}
               placeholder={placeholder}
-              value={value}
+              defaultValue={value}
               disabled={disabled}
               onInput={onSearch && ((event) => onSearch(event.currentTarget.value))}
               autoComplete="off"
@@ -92,9 +87,7 @@ export const PktSearchInput = forwardRef<HTMLFormElement & HTMLDivElement, ISear
               aria-controls={`${id}-suggestions`}
             />
             <PktButton
-              className={`pkt-searchinput__button ${
-                appearance === 'local' ? 'pkt-input-icon' : ''
-              }`}
+              className={`pkt-searchinput__button ${appearance === 'local' ? 'pkt-input-icon' : ''}`}
               variant="icon-only"
               iconName="magnifying-glass-big"
               skin={appearance === 'local' ? 'tertiary' : 'primary'}
@@ -109,35 +102,23 @@ export const PktSearchInput = forwardRef<HTMLFormElement & HTMLDivElement, ISear
           </div>
         </LabelElement>
         {suggestions && (
-          <ul
-            id={`${id}-suggestions`}
-            className="pkt-searchinput__suggestions"
-            aria-live="assertive"
-          >
+          <ul id={`${id}-suggestions`} className="pkt-searchinput__suggestions" aria-live="assertive">
             {suggestions.map((suggestion, index) => (
               <li key={`search-suggestion-${index}`}>
                 {React.createElement(
                   suggestion.href ? 'a' : suggestion.onClick ? 'button' : 'div',
                   {
                     href: suggestion.href,
-                    className: `pkt-searchinput__suggestion ${
-                      suggestion.onClick ? 'pkt-link-button' : ''
-                    } ${
-                      suggestion.href || suggestion.onClick
-                        ? 'pkt-searchinput__suggestion--has-hover'
-                        : ''
+                    className: `pkt-searchinput__suggestion ${suggestion.onClick ? 'pkt-link-button' : ''} ${
+                      suggestion.href || suggestion.onClick ? 'pkt-searchinput__suggestion--has-hover' : ''
                     }`,
                     type: suggestion.onClick ? 'button' : undefined,
                     onClick: () => handleSuggestionClick(suggestion.onClick, index),
                     onKeyUp: () => handleSuggestionClick(suggestion.onClick, index),
                   },
                   <>
-                    {suggestion.title && (
-                      <h3 className="pkt-searchinput__suggestion-title">{suggestion.title}</h3>
-                    )}
-                    {suggestion.text && (
-                      <p className="pkt-searchinput__suggestion-text">{suggestion.text}</p>
-                    )}
+                    {suggestion.title && <h3 className="pkt-searchinput__suggestion-title">{suggestion.title}</h3>}
+                    {suggestion.text && <p className="pkt-searchinput__suggestion-text">{suggestion.text}</p>}
                   </>,
                 )}
               </li>

package/src/components/select/Select.test.tsx

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 
 import { fireEvent, render } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
@@ -19,9 +19,7 @@ describe('PktSelect', () => {
   })
 
   test('renders error message when hasError prop is true', () => {
-    const { getByText } = render(
-      <PktSelect label="Input Label" id="inputId" hasError errorMessage="Input error" />,
-    )
+    const { getByText } = render(<PktSelect label="Input Label" id="inputId" hasError errorMessage="Input error" />)
 
     const errorMessage = getByText('Input error')
     expect(errorMessage).toBeInTheDocument()
@@ -31,18 +29,11 @@ describe('PktSelect', () => {
   describe('PktSelect', () => {
     test('toggles helptext class', () => {
       const { getByText, container } = render(
-        <PktSelect
-          label="Input Label"
-          id="inputId"
-          helptext="Help Text"
-          helptextDropdown="Help Text"
-        />,
+        <PktSelect label="Input Label" id="inputId" helptext="Help Text" helptextDropdown="Help Text" />,
       )
 
       const expandButton = getByText('Les mer')
-      const helptextElement = container.querySelector(
-        '.pkt-inputwrapper__helptext-expandable-closed',
-      )
+      const helptextElement = container.querySelector('.pkt-inputwrapper__helptext-expandable-closed')
 
       fireEvent.click(expandButton)
       expect(helptextElement).toHaveClass('pkt-inputwrapper__helptext-expandable-open')

package/src/components/select/Select.tsx

@@ -5,7 +5,7 @@ import { PktInputWrapper } from '../inputwrapper/InputWrapper'
 export interface IPktSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
   ariaDescribedby?: string
   ariaLabelledby?: string
-  children?: ReactNode
+  children?: ReactNode | ReactNode[]
   disabled?: boolean
   errorMessage?: string
   hasError?: boolean