@navikt/ds-react 4.4.2 → 4.6.0

package/src/form/Fieldset/Fieldset.tsx

@@ -3,6 +3,7 @@ import React, { FieldsetHTMLAttributes, forwardRef, useContext } from "react";
 import { BodyShort, ErrorMessage, Label, omit } from "../..";
 import { FormFieldProps } from "../useFormField";
 import { useFieldset } from "./useFieldset";
+import { ReadOnlyIcon } from "../ReadOnlyIcon";
 
 export type FieldsetContextProps = {
   /**
@@ -21,6 +22,10 @@ export type FieldsetContextProps = {
    * Sets fieldset and all form-children to disabled
    */
   disabled: boolean;
+  /**
+   * Read only-state
+   */
+  readOnly?: boolean;
 };
 
 export const FieldsetContext = React.createContext<FieldsetContextProps | null>(
@@ -47,6 +52,7 @@ export interface FieldsetProps
    * @default true
    */
   errorPropagation?: boolean;
+  nativeReadOnly?: boolean;
 }
 
 export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
@@ -57,6 +63,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
       showErrorMsg,
       hasError,
       size,
+      readOnly,
       inputDescriptionId,
     } = useFieldset(props);
 
@@ -69,6 +76,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
       legend,
       description,
       hideLegend,
+      nativeReadOnly = true,
       ...rest
     } = props;
 
@@ -82,17 +90,21 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
           }),
           size,
           disabled: props.disabled ?? false,
+          readOnly,
         }}
       >
         <fieldset
-          {...omit(rest, ["errorId", "error", "size"])}
+          {...omit(rest, ["errorId", "error", "size", "readOnly"])}
           {...inputProps}
           ref={ref}
           className={cl(
             className,
             "navds-fieldset",
             `navds-fieldset--${size}`,
-            { "navds-fieldset--error": hasError }
+            {
+              "navds-fieldset--error": hasError,
+              "navds-fieldset--readonly": readOnly,
+            }
           )}
         >
           <Label
@@ -102,6 +114,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
               "navds-sr-only": !!hideLegend,
             })}
           >
+            <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={nativeReadOnly} />
             {legend}
           </Label>
           {!!description && (

package/src/form/ReadOnlyIcon.tsx

@@ -0,0 +1,20 @@
+import { PadlockLockedFillIcon } from "@navikt/aksel-icons";
+import React from "react";
+
+export const ReadOnlyIcon = ({
+  readOnly,
+  nativeReadOnly = true,
+}: {
+  readOnly?: boolean;
+  nativeReadOnly?: boolean;
+}) => {
+  if (readOnly) {
+    return (
+      <PadlockLockedFillIcon
+        {...(nativeReadOnly ? { "aria-hidden": true } : { title: "readonly" })}
+        className="navds-form-field__readonly-icon"
+      />
+    );
+  }
+  return null;
+};

package/src/form/Select.tsx

@@ -4,6 +4,7 @@ import React, { forwardRef, SelectHTMLAttributes } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
 import { BodyShort, ErrorMessage, Label, omit } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
+import { ReadOnlyIcon } from "./ReadOnlyIcon";
 
 export interface SelectProps
   extends FormFieldProps,
@@ -55,7 +56,8 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
       hasError,
       size,
       inputDescriptionId,
-    } = useFormField(props, "textField");
+      readOnly,
+    } = useFormField(props, "select");
 
     const {
       children,
@@ -68,6 +70,27 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
       ...rest
     } = props;
 
+    const readOnlyEventHandlers = {
+      onMouseDown: (evt) => {
+        // NOTE: does not prevent click
+        if (readOnly) {
+          evt.preventDefault();
+          // focus on the element as per readonly input behavior
+          evt.target.focus();
+        }
+      },
+      onKeyDown: (evt) => {
+        if (
+          readOnly &&
+          ["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft", " "].includes(
+            evt.key
+          )
+        ) {
+          evt.preventDefault();
+        }
+      },
+    };
+
     return (
       <div
         className={cl(
@@ -77,6 +100,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
           {
             "navds-form-field--disabled": !!inputProps.disabled,
             "navds-select--error": hasError,
+            "navds-select--readonly": readOnly,
           }
         )}
       >
@@ -87,6 +111,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
             "navds-sr-only": hideLabel,
           })}
         >
+          <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
           {label}
         </Label>
         {!!description && (
@@ -103,8 +128,9 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
         )}
         <div className="navds-select__container" style={style}>
           <select
-            {...omit(rest, ["error", "errorId", "size"])}
+            {...omit(rest, ["error", "errorId", "size", "readOnly"])}
             {...inputProps}
+            {...readOnlyEventHandlers}
             ref={ref}
             className={cl(
               "navds-select__input",

package/src/form/Switch.tsx

@@ -7,6 +7,7 @@ import React, {
 } from "react";
 import { BodyShort, Loader, omit } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
+import { ReadOnlyIcon } from "./ReadOnlyIcon";
 
 const SelectedIcon = () => (
   <svg
@@ -63,12 +64,12 @@ export interface SwitchProps
  *
  * @example
  * ```jsx
- * <Switch>Slå på notifikasjoner</Switch>
+ * <Switch>Varsle med SMS</Switch>
  * ```
  */
 export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
   (props, ref) => {
-    const { inputProps, size } = useFormField(props, "switch");
+    const { inputProps, size, readOnly } = useFormField(props, "switch");
 
     const {
       children,
@@ -90,11 +91,6 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
       checkedProp !== undefined && setChecked(checkedProp);
     }, [checkedProp]);
 
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      setChecked(e.target.checked);
-      props.onChange && props.onChange(e);
-    };
-
     return (
       <div
         className={cl(
@@ -105,18 +101,32 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
           {
             "navds-switch--loading": loading,
             "navds-switch--disabled": inputProps.disabled ?? loading,
+            "navds-switch--readonly": readOnly,
           }
         )}
       >
         <input
-          {...omit(rest, ["size"])}
+          {...omit(rest, ["size", "readOnly"])}
           {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
           disabled={inputProps.disabled ?? loading}
           checked={checkedProp}
           defaultChecked={defaultChecked}
           ref={ref}
           type="checkbox"
-          onChange={(e) => handleChange(e)}
+          onChange={(e) => {
+            if (readOnly) {
+              return;
+            }
+            setChecked(e.target.checked);
+            props.onChange && props.onChange(e);
+          }}
+          onClick={(e) => {
+            if (readOnly) {
+              e.preventDefault();
+              return;
+            }
+            props?.onClick?.(e);
+          }}
           className={cl(className, "navds-switch__input")}
         />
         <span className="navds-switch__track">
@@ -136,6 +146,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
             })}
           >
             <BodyShort as="div" size={size} className="navds-switch__label">
+              <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
               {children}
             </BodyShort>
             {description && (

package/src/form/TextField.tsx

@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, InputHTMLAttributes } from "react";
 import { BodyShort, ErrorMessage, Label, omit } from "..";
+import { ReadOnlyIcon } from "./ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "./useFormField";
 
 export interface TextFieldProps
@@ -62,6 +63,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       htmlSize,
       hideLabel = false,
       type = "text",
+      readOnly,
       ...rest
     } = props;
 
@@ -75,6 +77,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             "navds-text-field--error": hasError,
             "navds-text-field--disabled": !!inputProps.disabled,
             "navds-form-field--disabled": !!inputProps.disabled,
+            "navds-text-field--readonly": readOnly,
           }
         )}
       >
@@ -85,6 +88,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             "navds-sr-only": hideLabel,
           })}
         >
+          <ReadOnlyIcon readOnly={readOnly} />
           {label}
         </Label>
 
@@ -105,6 +109,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           {...inputProps}
           ref={ref}
           type={type}
+          readOnly={readOnly}
           className={cl(
             "navds-text-field__input",
             "navds-body-short",

package/src/form/Textarea.tsx

@@ -3,6 +3,7 @@ import React, { forwardRef, useState } from "react";
 import { BodyShort, ErrorMessage, Label, omit, useId } from "..";
 import TextareaAutosize from "../util/TextareaAutoSize";
 import { FormFieldProps, useFormField } from "./useFormField";
+import { ReadOnlyIcon } from "./ReadOnlyIcon";
 
 /**
  * TODO: Mulighet for lokalisering av sr-only/counter text
@@ -85,6 +86,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       hideLabel = false,
       resize,
       i18n,
+      readOnly,
       ...rest
     } = props;
 
@@ -115,6 +117,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           `navds-form-field--${size}`,
           {
             "navds-form-field--disabled": !!inputProps.disabled,
+            "navds-textarea--readonly": readOnly,
             "navds-textarea--error": hasError,
             "navds-textarea--resize": resize,
           }
@@ -127,6 +130,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             "navds-sr-only": hideLabel,
           })}
         >
+          <ReadOnlyIcon readOnly={readOnly} />
           {label}
         </Label>
         {!!description && (
@@ -152,6 +156,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             }
             minRows={getMinRows()}
             ref={ref}
+            readOnly={readOnly}
             className={cl(
               "navds-textarea__input",
               "navds-body-short",

package/src/form/checkbox/Checkbox.tsx

@@ -4,6 +4,7 @@ import { BodyShort } from "../../typography";
 import { omit } from "../../util";
 import { FormFieldProps } from "../useFormField";
 import useCheckbox from "./useCheckbox";
+import { ReadOnlyIcon } from "../ReadOnlyIcon";
 
 export interface CheckboxProps
   extends FormFieldProps,
@@ -42,7 +43,7 @@ export interface CheckboxProps
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   (props, ref) => {
-    const { inputProps, hasError, size } = useCheckbox(props);
+    const { inputProps, hasError, size, readOnly, nested } = useCheckbox(props);
 
     return (
       <div
@@ -53,6 +54,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           {
             "navds-checkbox--error": hasError,
             "navds-checkbox--disabled": inputProps.disabled,
+            "navds-checkbox--readonly": readOnly,
           }
         )}
       >
@@ -65,6 +67,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             "hideLabel",
             "indeterminate",
             "errorId",
+            "readOnly",
           ])}
           {...inputProps}
           type="checkbox"
@@ -89,6 +92,9 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             })}
           >
             <BodyShort as="span" size={size}>
+              {!nested && (
+                <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
+              )}
               {props.children}
             </BodyShort>
             {props.description && (

package/src/form/checkbox/CheckboxGroup.tsx

@@ -81,6 +81,7 @@ export const CheckboxGroup = forwardRef<
           "navds-checkbox-group",
           `navds-checkbox-group--${rest.size ?? fieldset?.size ?? "medium"}`
         )}
+        nativeReadOnly={false}
       >
         <CheckboxGroupContext.Provider
           value={{

package/src/form/checkbox/checkbox.stories.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
+import { Meta } from "@storybook/react";
 import React, { useState } from "react";
 import { Checkbox, CheckboxGroup } from "../../index";
-import { Meta } from "@storybook/react";
 
 export default {
   title: "ds-react/Checkbox",
@@ -190,3 +190,37 @@ export const Indeterminate = () => {
     </>
   );
 };
+
+export const Readonly = () => (
+  <div className="colgap">
+    <CheckboxGroup
+      legend="Hvilken frukt liker du?"
+      defaultValue={["banan"]}
+      readOnly
+    >
+      <Checkbox value="banan">Banan</Checkbox>
+      <Checkbox value="eple">Eple</Checkbox>
+      <Checkbox value="druer" indeterminate>
+        Druer
+      </Checkbox>
+    </CheckboxGroup>
+    <CheckboxGroup
+      legend="Hvilken frukt liker du?"
+      error="feilmelding"
+      defaultValue={["Eple"]}
+      readOnly
+    >
+      <Checkbox value="eple" description="Epler kommer i 4 varianter">
+        Eple
+      </Checkbox>
+      <Checkbox value="banan">Banan</Checkbox>
+    </CheckboxGroup>
+    <hr />
+    <Checkbox value="tekst1" readOnly>
+      Eple single
+    </Checkbox>
+    <Checkbox value="tekst1" checked readOnly>
+      Banan single
+    </Checkbox>
+  </div>
+);

package/src/form/checkbox/useCheckbox.ts

@@ -10,7 +10,7 @@ import { omit } from "../..";
 const useCheckbox = ({ children, ...props }: CheckboxProps) => {
   const checkboxGroup = useContext(CheckboxGroupContext);
 
-  const { inputProps, ...rest } = useFormField(
+  const { inputProps, readOnly, ...rest } = useFormField(
     omit(props, ["description"]),
     "checkbox"
   );
@@ -30,6 +30,8 @@ const useCheckbox = ({ children, ...props }: CheckboxProps) => {
 
   return {
     ...rest,
+    readOnly,
+    nested: !!checkboxGroup,
     inputProps: {
       ...inputProps,
       checked: checkboxGroup?.value
@@ -39,9 +41,19 @@ const useCheckbox = ({ children, ...props }: CheckboxProps) => {
         ? checkboxGroup.defaultValue.includes(props.value)
         : props.defaultChecked,
       onChange: (e) => {
+        if (readOnly) {
+          return;
+        }
         props.onChange && props.onChange(e);
         checkboxGroup && checkboxGroup.toggleValue(props.value);
       },
+      onClick: (e) => {
+        if (readOnly) {
+          e.preventDefault();
+          return;
+        }
+        props?.onClick?.(e);
+      },
     },
   };
 };

package/src/form/radio/Radio.tsx

@@ -6,7 +6,7 @@ import { FormFieldProps } from "../useFormField";
 import { useRadio } from "./useRadio";
 
 export interface RadioProps
-  extends Omit<FormFieldProps, "error" | "errorId">,
+  extends Omit<FormFieldProps, "error" | "errorId" | "readOnly">,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value"> {
   /**
    * Radio label
@@ -23,17 +23,18 @@ export interface RadioProps
 }
 
 export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
-  const { inputProps, size, hasError } = useRadio(props);
+  const { inputProps, size, hasError, readOnly } = useRadio(props);
 
   return (
     <div
       className={cl(props.className, "navds-radio", `navds-radio--${size}`, {
         "navds-radio--error": hasError,
         "navds-radio--disabled": inputProps.disabled,
+        "navds-radio--readonly": readOnly,
       })}
     >
       <input
-        {...omit(props, ["children", "size", "description"])}
+        {...omit(props, ["children", "size", "description", "readOnly"])}
         {...inputProps}
         className="navds-radio__input"
         ref={ref}

package/src/form/radio/RadioGroup.tsx

@@ -65,6 +65,7 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
       value,
       onChange = () => {},
       required,
+      readOnly,
       ...rest
     },
     ref
@@ -76,12 +77,14 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
     return (
       <Fieldset
         {...rest}
+        readOnly={readOnly}
         ref={ref}
         className={cl(
           className,
           "navds-radio-group",
           `navds-radio-group--${rest.size ?? fieldset?.size ?? "medium"}`
         )}
+        nativeReadOnly={false}
       >
         <RadioGroupContext.Provider
           value={{

package/src/form/radio/radio.stories.tsx

@@ -92,3 +92,30 @@ export const GroupDescription = () => (
     <Radio value="tekst2">Radiotekst</Radio>
   </RadioGroup>
 );
+
+export const UUDemo = () => (
+  <div className="colgap">
+    <RadioGroup
+      legend="Hvilken frukt vil du ha?"
+      description="Du kan bare velge en frukt"
+      defaultValue="eple"
+      readOnly
+    >
+      <Radio value="eple">Eple</Radio>
+      <Radio value="banan" description="Bananer er importert fra X">
+        Banan
+      </Radio>
+      <Radio value="druer">Druer</Radio>
+    </RadioGroup>
+    <RadioGroup
+      legend="Når har du ferie?"
+      defaultValue="1"
+      readOnly
+      error="du må velge en ferie"
+    >
+      <Radio value="1">August</Radio>
+      <Radio value="2">Juli</Radio>
+      <Radio value="3">Juni</Radio>
+    </RadioGroup>
+  </div>
+);

package/src/form/radio/useRadio.ts

@@ -10,7 +10,7 @@ import { omit } from "../..";
 export const useRadio = (props: RadioProps) => {
   const radioGroup = useContext(RadioGroupContext);
 
-  const { inputProps, ...rest } = useFormField(
+  const { inputProps, readOnly, ...rest } = useFormField(
     omit(props, ["description"]),
     "radio"
   );
@@ -25,6 +25,7 @@ export const useRadio = (props: RadioProps) => {
 
   return {
     ...rest,
+    readOnly,
     inputProps: {
       ...inputProps,
       name: radioGroup?.name,
@@ -37,9 +38,19 @@ export const useRadio = (props: RadioProps) => {
           ? undefined
           : radioGroup?.value === props.value,
       onChange: (e) => {
+        if (readOnly) {
+          return;
+        }
         props.onChange && props.onChange(e);
         radioGroup?.onChange && radioGroup.onChange(props.value);
       },
+      onClick: (e) => {
+        if (readOnly) {
+          e.preventDefault();
+          return;
+        }
+        props?.onClick?.(e);
+      },
       required: radioGroup?.required,
       type: "radio",
     },

package/src/form/search/Search.tsx

@@ -27,7 +27,7 @@ export type SearchClearEvent =
   | { trigger: "Escape"; event: React.KeyboardEvent<HTMLDivElement> };
 
 export interface SearchProps
-  extends FormFieldProps,
+  extends Omit<FormFieldProps, "readOnly">,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
   children?: React.ReactNode;
   /**
@@ -221,7 +221,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
             )}
             <input
               ref={mergedRef}
-              {...omit(rest, ["error", "errorId", "size"])}
+              {...omit(rest, ["error", "errorId", "size", "readOnly"])}
               {...inputProps}
               value={value ?? internalValue}
               onChange={(e) => handleChange(e.target.value)}

package/src/form/stories/select.stories.tsx

@@ -114,3 +114,20 @@ export const HideLabel = () => {
     </Select>
   );
 };
+
+export const Readonly = () => {
+  return (
+    <div className="colgap">
+      <Select
+        label="Hvilkets land er du fra?"
+        description="Velg landet du bor 180 dagen i året"
+        readOnly
+      >
+        {content}
+      </Select>
+      <Select label="Hvilkets land er du fra?" readOnly error="feilmelding">
+        {content}
+      </Select>
+    </div>
+  );
+};

package/src/form/stories/switch.stories.tsx

@@ -116,3 +116,17 @@ export const HideLabel = () => {
     </div>
   );
 };
+
+export const Readonly = () => {
+  return (
+    <div className="colgap">
+      <Switch description="Slår av alle notifikasjoner" readOnly>
+        Notifikasjoner
+      </Switch>
+
+      <Switch checked readOnly>
+        Notifikasjoner
+      </Switch>
+    </div>
+  );
+};

package/src/form/stories/text-field.stories.tsx

@@ -83,3 +83,17 @@ export const Disabled = () => {
 export const HideLabel = () => {
   return <TextField label="Ipsum enim quis culpa" hideLabel />;
 };
+
+export const Readonly = () => {
+  return (
+    <div className="colgap">
+      <TextField
+        label="Bosted"
+        description="Skriv bosted i Norge"
+        readOnly
+        value="Oslo"
+      />
+      <TextField label="Bosted" readOnly error="feilmelding" value="Oslo" />
+    </div>
+  );
+};

package/src/form/stories/textarea.stories.tsx

@@ -120,3 +120,22 @@ export const MaxRows = () => {
 export const Resize = () => {
   return <Textarea resize label="Ipsum enim quis culpa" />;
 };
+
+export const Readonly = () => {
+  return (
+    <div className="colgap">
+      <Textarea
+        label="På hvilket grunnlag har du tatt denne vurderingen?"
+        description="Beskriv i korte punkter"
+        value="Denne vurderingen ble gjort på grunnlag av X og Y"
+        readOnly
+      />
+      <Textarea
+        label="På hvilket grunnlag har du tatt denne vurderingen?"
+        readOnly
+        value="Denne vurderingen ble gjort på grunnlag av X og Y"
+        error="feilmelding"
+      />
+    </div>
+  );
+};