@oslokommune/punkt-react 6.0.6 → 7.1.0

package/src/components/textarea/Textarea.test.tsx

@@ -0,0 +1,62 @@
+import '@testing-library/jest-dom/extend-expect'
+
+import { fireEvent, render } from '@testing-library/react'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import React from 'react'
+
+import { PktTextarea } from './Textarea'
+
+expect.extend(toHaveNoViolations)
+
+describe('PktTextarea', () => {
+  test('renders input field with correct props', () => {
+    const { getByLabelText } = render(<PktTextarea label="Input Label" id="inputId" />)
+
+    const inputElement = getByLabelText('Input Label')
+    expect(inputElement).toBeInTheDocument()
+    expect(inputElement.tagName).toBe('TEXTAREA')
+    expect(inputElement.id).toBe('inputId')
+  })
+
+  test('renders error message when hasError prop is true', () => {
+    const { getByText } = render(
+      <PktTextarea label="Input Label" id="inputId" hasError errorMessage="Input error" />,
+    )
+
+    const errorMessage = getByText('Input error')
+    expect(errorMessage).toBeInTheDocument()
+    expect(errorMessage).toHaveClass('pkt-alert__text')
+  })
+
+  describe('PktTextarea', () => {
+    test('toggles helptext class', () => {
+      const { getByText, container } = render(
+        <PktTextarea
+          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',
+      )
+
+      fireEvent.click(expandButton)
+      expect(helptextElement).toHaveClass('pkt-inputwrapper__helptext-expandable-open')
+
+      fireEvent.click(expandButton)
+      expect(helptextElement).toHaveClass('pkt-inputwrapper__helptext-expandable-closed')
+    })
+  })
+
+  describe('accessibility', () => {
+    it('renders with no wcag errors with axe', async () => {
+      const { container } = render(<PktTextarea label="Input Label" id="inputId" />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/textarea/Textarea.tsx

@@ -1,21 +1,102 @@
 import React, { ForwardedRef, forwardRef, TextareaHTMLAttributes } from 'react'
 
-interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+import { PktInputWrapper } from '../inputwrapper/InputWrapper'
+
+export interface IPktTextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
   id: string
+  ariaDescribedby?: string
+  ariaLabelledby?: string
+  counter?: boolean
+  counterMaxLength?: number
+  disabled?: boolean
+  errorMessage?: string
+  hasError?: boolean
+  helptext?: string
+  helptextDropdown?: string
+  helptextDropdownButton?: string
+  inline?: boolean
   label: string
+  name?: string
+  optional?: boolean
+  placeholder?: string
+  required?: boolean
+  rows?: number
+  useWrapper?: boolean
+  value?: string
 }
 
 export const PktTextarea = forwardRef(
-  ({ id, label, ...props }: TextareaProps, ref: ForwardedRef<HTMLTextAreaElement>): React.ReactElement => {
+  (
+    {
+      id,
+      ariaDescribedby,
+      ariaLabelledby,
+      counter,
+      counterMaxLength,
+      className,
+      disabled,
+      errorMessage,
+      hasError,
+      helptext,
+      helptextDropdown,
+      helptextDropdownButton,
+      inline,
+      label,
+      name,
+      optional,
+      placeholder,
+      required,
+      rows,
+      useWrapper,
+      value = '',
+      ...props
+    }: IPktTextareaProps,
+    ref: ForwardedRef<HTMLTextAreaElement>,
+  ) => {
+    const classNames = [className, 'pkt-textinput', 'pkt-textarea'].join(' ')
+    const labelledBy = ariaLabelledby || `${id}-label`
     return (
-      <div className="pkt-form-group">
-        <label htmlFor={id} className="pkt-form-label">
-          {label}
-        </label>
-        <textarea className="pkt-form-textarea" id={id} ref={ref} {...props}></textarea>
-      </div>
+      <PktInputWrapper
+        ariaDescribedby={ariaDescribedby}
+        className={classNames}
+        disabled={disabled}
+        errorMessage={errorMessage}
+        forId={id}
+        hasError={hasError}
+        helptext={helptext}
+        helptextDropdown={helptextDropdown}
+        helptextDropdownButton={helptextDropdownButton}
+        inline={inline}
+        label={label}
+        optional={optional}
+        required={required}
+        useWrapper={useWrapper}
+      >
+        <textarea
+          ref={ref}
+          className={`pkt-textinput__input ${
+            counterMaxLength && value?.length > counterMaxLength
+              ? 'pkt-textinput__input--counter-error'
+              : ''
+          }`}
+          name={name || id}
+          id={id}
+          placeholder={placeholder}
+          value={value}
+          disabled={disabled}
+          rows={rows}
+          aria-labelledby={labelledBy}
+          aria-invalid={hasError}
+          aria-required={required}
+          {...props}
+        />
+        {counter && (
+          <div className="pkt-textinput__counter" aria-live="polite" aria-atomic={true}>
+            {value?.length || 0}
+            {counterMaxLength && `/${counterMaxLength}`}
+          </div>
+        )}
+      </PktInputWrapper>
     )
   },
 )
-
-PktTextarea.displayName = 'PktTextarea'

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

@@ -40,13 +40,15 @@ describe('PktTextinput', () => {
       )
 
       const expandButton = getByText('Les mer')
-      const helptextElement = container.querySelector('.pkt-textinput__helptext-expandable-closed')
+      const helptextElement = container.querySelector(
+        '.pkt-inputwrapper__helptext-expandable-closed',
+      )
 
       fireEvent.click(expandButton)
-      expect(helptextElement).toHaveClass('pkt-textinput__helptext-expandable-open')
+      expect(helptextElement).toHaveClass('pkt-inputwrapper__helptext-expandable-open')
 
       fireEvent.click(expandButton)
-      expect(helptextElement).toHaveClass('pkt-textinput__helptext-expandable-closed')
+      expect(helptextElement).toHaveClass('pkt-inputwrapper__helptext-expandable-closed')
     })
   })
 

package/src/components/textinput/Textinput.tsx

@@ -1,197 +1,105 @@
-import React, { ForwardedRef, forwardRef, useState } from 'react'
+import React, { ForwardedRef, forwardRef, InputHTMLAttributes } from 'react'
 
-import { PktAlert } from '../alert/Alert'
-import { PktButton } from '../button/Button'
 import { PktIcon } from '../icon/Icon'
+import { PktInputWrapper } from '../inputwrapper/InputWrapper'
 
-export interface IPktTextinput extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface IPktTextinput extends InputHTMLAttributes<HTMLInputElement> {
   id: string
-  label: string
-  name?: string
-  srOnlyLabel?: boolean
+  ariaDescribedby?: string
+  ariaLabelledby?: string
+  autocomplete?: string
+  disabled?: boolean
+  errorMessage?: string
+  hasError?: boolean
   helptext?: string
   helptextDropdown?: string
   helptextDropdownButton?: string
+  iconNameRight?: string
+  inline?: boolean
+  label: string
+  name?: string
   optional?: boolean
-  required?: boolean
-  hasError?: boolean
-  errorMessage?: string
   placeholder?: string
+  prefix?: string
+  required?: boolean
+  suffix?: string
   type?: string
-  autocomplete?: string
+  useWrapper?: boolean
   value?: string
-  suffix?: string
-  prefix?: string
-  iconNameRight?: string
-  disabled?: boolean
-  inline?: boolean
-  ariaLabelledby?: string
-  ariaDescribedby?: string
 }
 
 export const PktTextinput = forwardRef(
   (
     {
       id,
-      label,
-      name,
-      srOnlyLabel = false,
+      ariaDescribedby,
+      ariaLabelledby,
+      autocomplete = 'off',
+      className,
+      disabled = false,
+      errorMessage,
+      hasError = false,
       helptext,
       helptextDropdown,
       helptextDropdownButton,
+      iconNameRight,
+      inline = false,
+      label,
+      name,
       optional = false,
-      required = false,
-      hasError = false,
-      errorMessage,
       placeholder,
+      prefix,
+      required = false,
+      suffix,
       type = 'text',
-      autocomplete = 'off',
+      useWrapper = true,
       value,
-      suffix,
-      prefix,
-      iconNameRight,
-      disabled = false,
-      inline = false,
-      ariaLabelledby,
-      ariaDescribedby,
-      className,
       ...props
     }: IPktTextinput,
     ref: ForwardedRef<HTMLInputElement>,
   ) => {
-    const [isHelpTextOpen, setIsHelpTextOpen] = useState(false)
-
-    const toggleHelpText = () => {
-      setIsHelpTextOpen(!isHelpTextOpen)
-    }
-
-    const tagClass = () => {
-      if (optional) {
-        return 'pkt-tag pkt-tag--small pkt-tag--thin-text pkt-tag--blue-light'
-      } else if (required) {
-        return 'pkt-tag pkt-tag--small pkt-tag--thin-text pkt-tag--beige'
-      } else {
-        return ''
-      }
-    }
-
-    const tagText = optional ? 'Valgfritt' : required ? 'Må fylles ut' : ''
-
-    const disabledClass = disabled ? 'pkt-textinput--disabled' : ''
-    const inlineClass = inline ? 'pkt-textinput--inline' : ''
-    const errorClass = hasError ? 'pkt-textinput--error' : ''
-    const classNames = [className, 'pkt-textinput', disabledClass, inlineClass, errorClass].join(
-      ' ',
-    )
-    const hasDropDown = !!helptextDropdown && helptextDropdown !== ''
-    const WrapperElement = hasDropDown ? 'div' : 'label'
-    const LabelElement = hasDropDown ? 'h2' : 'span'
+    const classNames = [className, 'pkt-textinput'].join(' ')
+    const labelledBy = ariaLabelledby || `${id}-label`
     return (
-      <div className={classNames}>
-        <WrapperElement
-          htmlFor={id}
-          className={`pkt-textinput__label ${srOnlyLabel ? 'pkt-sr-only' : ''}`}
-          aria-describedby={hasDropDown ? '' : ariaDescribedby}
-        >
-          <LabelElement>
-            {label}
-            {tagText !== '' && <span className={tagClass()}>{tagText}</span>}
-          </LabelElement>
-          {helptext && <div className="pkt-textinput__helptext">{helptext}</div>}
-
-          {hasDropDown && (
-            <>
-              <PktButton
-                skin="tertiary"
-                size="small"
-                variant="icon-right"
-                iconName={isHelpTextOpen ? 'chevron-thin-up' : 'chevron-thin-down'}
-                className="pkt-textinput__helptext-expandable pkt-link pkt-link--icon-right"
-                onClick={toggleHelpText}
-              >
-                {helptextDropdownButton ? (
-                  helptextDropdownButton
-                ) : (
-                  <>
-                    Les mer <span className="pkt-sr-only">om inputfeltet</span>
-                  </>
-                )}
-              </PktButton>
-              <div
-                className={`pkt-textinput__helptext ${
-                  isHelpTextOpen
-                    ? 'pkt-textinput__helptext-expandable-open'
-                    : 'pkt-textinput__helptext-expandable-closed'
-                }`}
-              >
-                <PktAlert>{helptextDropdown}</PktAlert>
-              </div>
-
-              <label
-                htmlFor={id}
-                className="pkt-textinput__label pkt-sr-only"
-                aria-describedby={ariaDescribedby}
-              >
-                {label}
-              </label>
-            </>
-          )}
-
-          {prefix && (
-            <div className="pkt-textinput__input-prefix-wrapper">
-              <div className="pkt-textinput__input-prefix">{prefix}</div>
-              <input
-                ref={ref}
-                className="pkt-textinput__input"
-                type={type}
-                name={name || id}
-                id={id}
-                placeholder={placeholder}
-                autoComplete={autocomplete}
-                value={value}
-                disabled={disabled}
-                aria-required={required}
-                aria-invalid={hasError}
-                aria-labelledby={ariaLabelledby}
-                {...props}
-              />
-            </div>
-          )}
-
-          {!prefix && (suffix || iconNameRight) && (
-            <div className="pkt-textinput__input-suffix-wrapper">
-              <input
-                ref={ref}
-                className="pkt-textinput__input"
-                type={type}
-                name={name || id}
-                id={id}
-                placeholder={placeholder}
-                autoComplete={autocomplete}
-                value={value}
-                disabled={disabled}
-                aria-required={required}
-                aria-invalid={hasError}
-                aria-labelledby={ariaLabelledby}
-                {...props}
-              />
-
-              {suffix && (
-                <p className="pkt-textinput__input-suffix">
-                  {suffix}
-                  {iconNameRight && (
-                    <PktIcon className="pkt-textinput__input-suffix-icon" name={iconNameRight} />
-                  )}
-                </p>
-              )}
-
-              {!suffix && iconNameRight && (
-                <PktIcon className="pkt-textinput__input-icon" name={iconNameRight} />
-              )}
-            </div>
-          )}
+      <PktInputWrapper
+        ariaDescribedby={ariaDescribedby}
+        className={classNames}
+        disabled={disabled}
+        errorMessage={errorMessage}
+        forId={id}
+        hasError={hasError}
+        helptext={helptext}
+        helptextDropdown={helptextDropdown}
+        helptextDropdownButton={helptextDropdownButton}
+        inline={inline}
+        label={label}
+        optional={optional}
+        required={required}
+        useWrapper={useWrapper}
+      >
+        {prefix && (
+          <div className="pkt-textinput__input-prefix-wrapper">
+            <div className="pkt-textinput__input-prefix">{prefix}</div>
+            <input
+              ref={ref}
+              className="pkt-textinput__input"
+              type={type}
+              name={name || id}
+              id={id}
+              placeholder={placeholder}
+              autoComplete={autocomplete}
+              value={value}
+              disabled={disabled}
+              aria-required={required}
+              aria-invalid={hasError}
+              aria-labelledby={labelledBy}
+              {...props}
+            />
+          </div>
+        )}
 
-          {!prefix && !suffix && !iconNameRight && !helptextDropdown && (
+        {!prefix && (suffix || iconNameRight) && (
+          <div className="pkt-textinput__input-suffix-wrapper">
             <input
               ref={ref}
               className="pkt-textinput__input"
@@ -204,18 +112,43 @@ export const PktTextinput = forwardRef(
               disabled={disabled}
               aria-required={required}
               aria-invalid={hasError}
-              aria-labelledby={ariaLabelledby}
+              aria-labelledby={labelledBy}
               {...props}
             />
-          )}
-        </WrapperElement>
 
-        {hasError && (
-          <PktAlert skin="error" aria-live="assertive">
-            {errorMessage}
-          </PktAlert>
+            {suffix && (
+              <p className="pkt-textinput__input-suffix">
+                {suffix}
+                {iconNameRight && (
+                  <PktIcon className="pkt-textinput__input-suffix-icon" name={iconNameRight} />
+                )}
+              </p>
+            )}
+
+            {!suffix && iconNameRight && (
+              <PktIcon className="pkt-textinput__input-icon" name={iconNameRight} />
+            )}
+          </div>
+        )}
+
+        {!prefix && !suffix && !iconNameRight && (
+          <input
+            ref={ref}
+            className="pkt-textinput__input"
+            type={type}
+            name={name || id}
+            id={id}
+            placeholder={placeholder}
+            autoComplete={autocomplete}
+            value={value}
+            disabled={disabled}
+            aria-required={required}
+            aria-invalid={hasError}
+            aria-labelledby={labelledBy}
+            {...props}
+          />
         )}
-      </div>
+      </PktInputWrapper>
     )
   },
 )