@oslokommune/punkt-react 12.26.2 → 12.27.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "12.26.2",
+  "version": "12.27.1",
   "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.26.2",
+    "@oslokommune/punkt-elements": "^12.27.1",
     "angular-html-parser": "^6.0.2",
     "html-format": "^1.1.7",
     "prettier": "^3.3.3",
@@ -47,8 +47,8 @@
     "react-syntax-highlighter": "^15.5.0"
   },
   "devDependencies": {
-    "@oslokommune/punkt-assets": "^12.23.0",
-    "@oslokommune/punkt-css": "^12.26.0",
+    "@oslokommune/punkt-assets": "^12.27.1",
+    "@oslokommune/punkt-css": "^12.27.1",
     "@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": "40edb9d3d4eab9308ced03492923de706deff59d"
+  "gitHead": "0b2f47770a00b04fc9f29d1e4fcb5e87800c8e54"
 }

package/src/components/datepicker/Datepicker.tsx

@@ -5,6 +5,10 @@ import React, {
   FocusEventHandler,
   ReactNode,
   InputHTMLAttributes,
+  FC,
+  ReactElement,
+  ForwardedRef,
+  forwardRef,
 } from 'react'
 import { createComponent, EventName } from '@lit/react'
 import { PktDatepicker as PktEl } from '@oslokommune/punkt-elements'
@@ -46,7 +50,7 @@ export interface IPktDatepicker extends InputHTMLAttributes<HTMLInputElement> {
   skipForwardTestid?: boolean
 }
 
-export const PktDatepicker = createComponent({
+export const LitComponent = createComponent({
   tagName: 'pkt-datepicker',
   elementClass: PktEl,
   react: React,
@@ -59,3 +63,17 @@ export const PktDatepicker = createComponent({
     onToggleHelpText: 'toggleHelpText' as EventName<CustomEvent>,
   },
 }) as ForwardRefExoticComponent<IPktDatepicker>
+
+export const PktDatepicker: FC<IPktDatepicker> = forwardRef(
+  ({ helptext, ...props }: IPktDatepicker, ref: ForwardedRef<HTMLInputElement>): ReactElement => {
+    return (
+      <LitComponent ref={ref} {...props}>
+        <div className="pkt-contents" slot="helptext">
+          {helptext}
+        </div>
+      </LitComponent>
+    )
+  },
+)
+
+PktDatepicker.displayName = 'PktDatepicker'

package/src/components/helptext/Helptext.tsx

@@ -0,0 +1,34 @@
+import React, { ForwardRefExoticComponent, ReactNode, LegacyRef, FC, forwardRef, HTMLAttributes } from 'react'
+import { PktHelptext as PktElHelptext } from '@oslokommune/punkt-elements'
+import { createComponent, EventName } from '@lit/react'
+
+export interface IPktHelptextProps extends HTMLAttributes<HTMLDivElement> {
+  helptext?: string | ReactNode | ReactNode[]
+  helptextDropdown?: string | ReactNode | ReactNode[]
+  helptextDropdownButton?: string
+  forId?: string
+  ref?: LegacyRef<HTMLDivElement>
+  onToggleHelpText?: (e: CustomEvent) => void
+}
+
+export const LitComponent = createComponent({
+  tagName: 'pkt-helptext',
+  elementClass: PktElHelptext,
+  react: React,
+  displayName: 'PktHelptext',
+  events: {
+    onToggleHelpText: 'toggleHelpText' as EventName<CustomEvent>,
+  },
+}) as ForwardRefExoticComponent<IPktHelptextProps>
+
+export const PktHelptext: FC<IPktHelptextProps> = forwardRef(
+  ({ children, ...props }, ref: LegacyRef<HTMLDivElement>) => {
+    return (
+      <LitComponent {...props} ref={ref}>
+        {children}
+      </LitComponent>
+    )
+  },
+)
+
+PktHelptext.displayName = 'PktHelptext'

package/src/components/index.ts

@@ -10,6 +10,7 @@ export { PktDatepicker } from './datepicker/Datepicker'
 export { PktFooter } from './footer/Footer'
 export { PktFooterSimple } from './footerSimple/FooterSimple'
 export { PktHeader } from './header/Header'
+export { PktHelptext } from './helptext/Helptext'
 export { PktIcon } from './icon/Icon'
 export { PktInput } from './input/Input'
 export { PktInputWrapper } from './inputwrapper/InputWrapper'

package/src/components/inputwrapper/InputWrapper.tsx

@@ -46,9 +46,12 @@ const LitComponent: ForwardRefExoticComponent<IPktInputWrapper> = createComponen
 })
 
 export const PktInputWrapper: FC<IPktInputWrapper> = forwardRef(
-  ({ children, ...props }: IPktInputWrapper, ref: LegacyRef<PktEl>): ReactElement => {
+  ({ children, helptext, ...props }: IPktInputWrapper, ref: LegacyRef<PktEl>): ReactElement => {
     return (
       <LitComponent ref={ref} {...props}>
+        <div className="pkt-contents" slot="helptext">
+          {helptext}
+        </div>
         <div className="pkt-contents">{children}</div>
       </LitComponent>
     )

package/src/components/preview/PreviewPropEditor.tsx

@@ -4,7 +4,7 @@ import { PktDatepicker } from '../datepicker/Datepicker'
 import { PktInputWrapper } from '../inputwrapper/InputWrapper'
 import { PktSelect } from '../select/Select'
 import { PktTextinput } from '../textinput/Textinput'
-import icons from '../../../../../apps/docs-astro/src/pages/json/icons.json'
+import icons from '@oslokommune/punkt-assets/dist/icons/icons.json'
 import { PktButton } from '../button/Button'
 
 interface PropEditorProps {

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

@@ -10,8 +10,13 @@ expect.extend(toHaveNoViolations)
 
 describe('PktSelect', () => {
   test('renders select field with correct props', async () => {
-    const { getByLabelText, container } = render(
-      <PktSelect label="Input Label" id="inputId" ariaLabelledby="inputId" />,
+    const { container } = render(
+      <PktSelect
+        label="Input Label"
+        id="inputId"
+        ariaLabelledby="inputId"
+        options={[{ value: 'verdi', label: 'Verdi' }]}
+      />,
     )
     await window.customElements.whenDefined('pkt-select')
 
@@ -21,27 +26,40 @@ describe('PktSelect', () => {
     expect(select?.tagName).toBe('PKT-SELECT')
     expect(select?.id).toBe('inputId')
 
-    await window.customElements.whenDefined('pkt-input-wrapper')
     const inputWrapper = container.querySelector('pkt-input-wrapper')
     expect(inputWrapper).toBeInTheDocument()
     expect(inputWrapper).toHaveAttribute('label', 'Input Label')
   })
 
   test('renders error message when hasError prop is true', async () => {
-    const { getByText } = render(<PktSelect label="Input Label" id="inputId" hasError errorMessage="Input error" />)
-    await window.customElements.whenDefined('pkt-input-wrapper')
+    const { getByText } = render(
+      <PktSelect
+        label="Input Label"
+        id="inputId"
+        hasError
+        errorMessage="Input error"
+        options={[{ value: 'verdi', label: 'Verdi' }]}
+      />,
+    )
+    await window.customElements.whenDefined('pkt-select')
 
     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('PktSelect', () => {
     test('toggles helptext class', async () => {
       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"
+          options={[{ value: 'verdi', label: 'Verdi' }]}
+        />,
       )
-      await window.customElements.whenDefined('pkt-input-wrapper')
+      await window.customElements.whenDefined('pkt-select')
 
       const expandButton = getByText('Les mer').closest('button') as HTMLButtonElement
       const helptextElement = container.querySelector('.pkt-inputwrapper__helptext-expandable-closed')
@@ -56,8 +74,10 @@ describe('PktSelect', () => {
 
   describe('accessibility', () => {
     it('renders with no wcag errors with axe', async () => {
-      const { container } = render(<PktSelect label="Input Label" id="inputId" />)
-      await window.customElements.whenDefined('pkt-input-wrapper')
+      const { container } = render(
+        <PktSelect label="Input Label" id="inputId" options={[{ value: 'verdi', label: 'Verdi' }]} />,
+      )
+      await window.customElements.whenDefined('pkt-select')
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })

package/src/components/select/Select.tsx

@@ -5,6 +5,8 @@ import React, {
   ChangeEventHandler,
   FocusEventHandler,
   LegacyRef,
+  FC,
+  forwardRef,
 } from 'react'
 import { PktSelect as PktElSelect } from '@oslokommune/punkt-elements'
 import type { TSelectOption } from '@oslokommune/punkt-elements'
@@ -40,7 +42,7 @@ export interface IPktSelectProps extends SelectHTMLAttributes<HTMLSelectElement>
   onToggleHelpText?: (e: CustomEvent) => void
 }
 
-export const PktSelect = createComponent({
+export const LitComponent = createComponent({
   tagName: 'pkt-select',
   elementClass: PktElSelect,
   react: React,
@@ -54,3 +56,21 @@ export const PktSelect = createComponent({
     onToggleHelpText: 'toggleHelpText' as EventName<CustomEvent>,
   },
 }) as ForwardRefExoticComponent<IPktSelectProps>
+
+// Note:
+// helptext slot needs to be before children because of how React reactivity works.
+// Please do not change this.
+export const PktSelect: FC<IPktSelectProps> = forwardRef(({ children, helptext, ...props }: IPktSelectProps, ref) => {
+  return (
+    <LitComponent ref={ref} {...props}>
+      {helptext && (
+        <div slot="helptext" className="pkt-contents">
+          {helptext}
+        </div>
+      )}
+      {children}
+    </LitComponent>
+  )
+})
+
+PktSelect.displayName = 'PktSelect'

package/src/components/textarea/Textarea.tsx

@@ -5,6 +5,8 @@ import React, {
   FocusEventHandler,
   ReactNode,
   TextareaHTMLAttributes,
+  FC,
+  forwardRef,
 } from 'react'
 import { createComponent, EventName } from '@lit/react'
 import { PktTextarea as PktEl } from '@oslokommune/punkt-elements'
@@ -40,7 +42,7 @@ export interface IPktTextarea extends TextareaHTMLAttributes<HTMLTextAreaElement
   skipForwardTestid?: boolean
 }
 
-export const PktTextarea = createComponent({
+export const LitComponent = createComponent({
   tagName: 'pkt-textarea',
   elementClass: PktEl,
   react: React,
@@ -54,3 +56,19 @@ export const PktTextarea = createComponent({
     onToggleHelpText: 'toggleHelpText' as EventName<CustomEvent>,
   },
 }) as ForwardRefExoticComponent<IPktTextarea>
+
+export const PktTextarea: FC<IPktTextarea> = forwardRef(
+  ({ helptext, ...props }, ref: LegacyRef<HTMLTextAreaElement>) => {
+    return (
+      <LitComponent {...props} ref={ref}>
+        {helptext && (
+          <div slot="helptext" className="pkt-contents">
+            {helptext}
+          </div>
+        )}
+      </LitComponent>
+    )
+  },
+)
+
+PktTextarea.displayName = 'PktTextarea'

package/src/components/textinput/Textinput.tsx

@@ -5,6 +5,8 @@ import React, {
   FocusEventHandler,
   ReactNode,
   InputHTMLAttributes,
+  FC,
+  forwardRef,
 } from 'react'
 import { createComponent, EventName } from '@lit/react'
 import { PktTextinput as PktEl } from '@oslokommune/punkt-elements'
@@ -43,7 +45,7 @@ export interface IPktTextinput extends InputHTMLAttributes<HTMLInputElement> {
   skipForwardTestid?: boolean
 }
 
-export const PktTextinput = createComponent({
+export const LitComponent = createComponent({
   tagName: 'pkt-textinput',
   elementClass: PktEl,
   react: React,
@@ -57,3 +59,19 @@ export const PktTextinput = createComponent({
     onToggleHelpText: 'toggleHelpText' as EventName<CustomEvent>,
   },
 }) as ForwardRefExoticComponent<IPktTextinput>
+
+export const PktTextinput: FC<IPktTextinput> = forwardRef(
+  ({ helptext, ...props }, ref: LegacyRef<HTMLInputElement>) => {
+    return (
+      <LitComponent {...props} ref={ref}>
+        {helptext && (
+          <div slot="helptext" className="pkt-contents">
+            {helptext}
+          </div>
+        )}
+      </LitComponent>
+    )
+  },
+)
+
+PktTextinput.displayName = 'PktTextinput'