@oslokommune/punkt-react 17.0.9 → 17.1.0

package/src/components/textinput/Textinput.tsx

@@ -13,6 +13,7 @@ import {
 
 import { PktIcon } from '../icon/Icon'
 import { PktInputWrapper } from '../inputwrapper/InputWrapper'
+import { describedByIds } from 'shared-utils/forms/described-by'
 
 export interface IPktTextinput extends InputHTMLAttributes<HTMLInputElement> {
   id: string
@@ -20,6 +21,7 @@ export interface IPktTextinput extends InputHTMLAttributes<HTMLInputElement> {
   ariaLabelledby?: string
   autocomplete?: string
   counter?: boolean
+  hasFieldset?: boolean
   counterMaxLength?: number
   disabled?: boolean
   errorMessage?: string | ReactNode | ReactNode[]
@@ -66,6 +68,7 @@ export const PktTextinput = forwardRef(
       ariaLabelledby,
       autocomplete = 'off',
       counter,
+      hasFieldset,
       counterMaxLength,
       className,
       disabled = false,
@@ -107,7 +110,8 @@ export const PktTextinput = forwardRef(
     }: IPktTextinput,
     ref: ForwardedRef<HTMLInputElement>,
   ) => {
-    const classNames = [className, 'pkt-textinput'].join(' ')
+    const showCounter = counter ?? (counterMaxLength ?? 0) > 0
+    const outerClasses = [className, 'pkt-textinput'].filter(Boolean).join(' ')
 
     const shouldShowSearchIcon = type === 'search' && !iconNameRight && !omitSearchIcon
     const isoValue = type === 'date' && value ? value.slice(0, 10) : value
@@ -119,7 +123,7 @@ export const PktTextinput = forwardRef(
     const labelledBy = ariaLabelledby || labelId
 
     const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-      if (counter) {
+      if (showCounter) {
         setCounterCurrent(event.currentTarget?.value?.length || 0)
       }
       if (onChange) {
@@ -134,73 +138,81 @@ export const PktTextinput = forwardRef(
     }, [value])
 
     return (
-      <PktInputWrapper
-        ariaDescribedby={ariaDescribedby}
-        className={classNames}
-        disabled={disabled}
-        errorMessage={errorMessage}
-        forId={inputId}
-        hasError={hasError}
-        helptext={helptext}
-        helptextDropdown={helptextDropdown}
-        helptextDropdownButton={helptextDropdownButton}
-        inline={inline}
-        label={label}
-        optionalTag={optionalTag}
-        optionalText={optionalText}
-        requiredTag={requiredTag}
-        requiredText={requiredText}
-        tagText={tagText}
-        useWrapper={useWrapper}
-        counter={counter}
-        counterCurrent={counterCurrent}
-        counterMaxLength={counterMaxLength}
-        size={inputSize}
-      >
-        <div
-          className={`pkt-input__container pkt-input__container--${inputSize}`}
-          data-testid={dataTestid}
-          data-skip-forward-testid={skipForwardTestid ? 'true' : undefined}
+      <div className={outerClasses}>
+        <PktInputWrapper
+          ariaDescribedby={ariaDescribedby}
+          disabled={disabled}
+          errorMessage={errorMessage}
+          forId={inputId}
+          hasError={hasError}
+          helptext={helptext}
+          helptextDropdown={helptextDropdown}
+          helptextDropdownButton={helptextDropdownButton}
+          inline={inline}
+          label={label}
+          optionalTag={optionalTag}
+          optionalText={optionalText}
+          requiredTag={requiredTag}
+          requiredText={requiredText}
+          tagText={tagText}
+          useWrapper={useWrapper}
+          counter={showCounter}
+          counterCurrent={counterCurrent}
+          counterMaxLength={counterMaxLength}
+          hasFieldset={hasFieldset ?? false}
+          size={inputSize}
         >
-          {prefix && <div className="pkt-input-prefix">{prefix}</div>}
-          <input
-            {...props}
-            ref={ref}
-            className={`pkt-input pkt-input--${inputSize} ${fullwidth ? 'pkt-input--fullwidth' : ''} ${
-              counterMaxLength && counterCurrent > counterMaxLength ? 'pkt-input--counter-error' : ''
-            }`}
-            type={type}
-            name={`${name || id}`}
-            value={isoValue}
-            id={inputId}
-            placeholder={placeholder}
-            autoComplete={autocomplete}
-            disabled={disabled}
-            aria-invalid={hasError}
-            aria-errormessage={`${id}-error`}
-            aria-labelledby={labelledBy}
-            min={min}
-            max={max}
-            onChange={handleChange}
-            step={step}
-            minLength={minLength}
-            maxLength={maxLength}
-            size={size}
-            readOnly={readOnly}
-            required={required}
-          />
-          {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>
-          )}
+          <div
+            className={`pkt-input__container pkt-input__container--${inputSize}`}
+            data-testid={dataTestid}
+            data-skip-forward-testid={skipForwardTestid ? 'true' : undefined}
+          >
+            {prefix && <div className="pkt-input-prefix">{prefix}</div>}
+            <input
+              {...props}
+              ref={ref}
+              className={`pkt-input pkt-input--${inputSize} ${fullwidth ? 'pkt-input--fullwidth' : ''} ${
+                counterMaxLength && counterCurrent > counterMaxLength ? 'pkt-input--counter-error' : ''
+              }`}
+              type={type}
+              name={`${name || id}`}
+              value={isoValue}
+              id={inputId}
+              placeholder={placeholder}
+              autoComplete={autocomplete}
+              disabled={disabled}
+              aria-invalid={hasError}
+              aria-errormessage={hasError ? `${id}-error` : undefined}
+              aria-describedby={describedByIds({
+                id: inputId,
+                hasHelptext: !!helptext,
+                hasCounter: showCounter,
+                ariaDescribedby,
+              })}
+              aria-labelledby={labelledBy}
+              min={min}
+              max={max}
+              onChange={handleChange}
+              step={step}
+              minLength={minLength}
+              maxLength={maxLength}
+              size={size}
+              readOnly={readOnly}
+              required={required}
+            />
+            {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>
+            {!suffix && iconNameRight && <PktIcon className="pkt-input-icon" name={iconNameRight} />}
+            {!suffix && shouldShowSearchIcon && <PktIcon className="pkt-input-icon" name="magnifying-glass-big" />}
+          </div>
+        </PktInputWrapper>
+      </div>
     )
   },
 )

package/src/components/timepicker/Timepicker.tsx

@@ -114,6 +114,7 @@ export const PktTimepicker = forwardRef<HTMLDivElement, IPktTimepicker>((props,
         aria-label={hoursAriaLabel}
         role="spinbutton"
         aria-invalid={state.hasError || state.isInvalid || undefined}
+        aria-errormessage={state.hasError ? `${state.hoursId}-error` : undefined}
         aria-valuemin={0}
         aria-valuemax={23}
         aria-valuenow={state.hours !== '' ? parseInt(state.hours, 10) : undefined}
@@ -146,6 +147,7 @@ export const PktTimepicker = forwardRef<HTMLDivElement, IPktTimepicker>((props,
         aria-label={minutesAriaLabel}
         role="spinbutton"
         aria-invalid={state.hasError || state.isInvalid || undefined}
+        aria-errormessage={state.hasError ? `${state.hoursId}-error` : undefined}
         aria-valuemin={0}
         aria-valuemax={59}
         aria-valuenow={state.minutes !== '' ? parseInt(state.minutes, 10) : undefined}
@@ -222,6 +224,7 @@ export const PktTimepicker = forwardRef<HTMLDivElement, IPktTimepicker>((props,
         label={state.label}
         disabled={state.disabled}
         hasError={state.hasError}
+        hasFieldset={props.hasFieldset ?? false}
         inline={state.inline}
         optionalTag={state.optionalTag}
         optionalText={state.optionalText}

package/src/components/timepicker/types.ts

@@ -88,6 +88,8 @@ export interface IPktTimepicker extends Omit<
 
   /** Show visible label and help text (`false` = screen-reader-only label). */
   useWrapper?: boolean
+  /** Bruk fieldset og legend i stedet for label. */
+  hasFieldset?: boolean
 
   /** Passed through to InputWrapper as `aria-describedby`. */
   ariaDescribedby?: string