@navikt/ds-react 6.3.5 → 6.4.0

package/esm/form/radio/types.d.ts

@@ -6,11 +6,11 @@ export interface RadioProps extends Omit<FormFieldProps, "error" | "errorId" | "
      */
     children: React.ReactNode;
     /**
-     * The value of the HTML element.
+     * Radio value.
      */
     value: any;
     /**
-     * Adds a description to extend labeling of Radio.
+     * Adds a description to extend the labeling.
      */
     description?: string;
 }

package/esm/form/useFormField.d.ts

@@ -1,8 +1,7 @@
 import React from "react";
 export interface FormFieldProps {
     /**
-     * Adds a description to extend labeling of the field.
-     * Error message for element.
+     * Error message.
      */
     error?: React.ReactNode;
     /**
@@ -20,7 +19,7 @@ export interface FormFieldProps {
      */
     disabled?: boolean;
     /**
-     * Adds a description to extend labeling of a field.
+     * Adds a description to extend the labeling.
      */
     description?: React.ReactNode;
     /**

package/esm/form/useFormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormField.js","sourceRoot":"","sources":["../../src/form/useFormField.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAmDrD;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,KAAqB,EACrB,MAAc,EACC,EAAE;;IACjB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAEpD,MAAM,QAAQ,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAE7C,MAAM,KAAK,GAAG,KAAK,EAAE,CAAC;IAEtB,MAAM,EAAE,GAAG,MAAA,KAAK,CAAC,EAAE,mCAAI,GAAG,MAAM,IAAI,KAAK,EAAE,CAAC;IAC5C,MAAM,OAAO,GAAG,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,GAAG,MAAM,UAAU,KAAK,EAAE,CAAC;IAC1D,MAAM,kBAAkB,GAAG,GAAG,MAAM,gBAAgB,KAAK,EAAE,CAAC;IAE5D,MAAM,QAAQ,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,KAAI,KAAK,CAAC,QAAQ,CAAC;IACtD,MAAM,QAAQ,GACZ,CAAC,CAAC,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,KAAI,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,SAAS,CAAC;IAErE,MAAM,QAAQ,GACZ,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAC,KAAK,KAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,CAAA,CAAC,CAAC;IACzD,MAAM,YAAY,GAChB,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,SAAS,CAAC;IAElE,MAAM,WAAW,qBAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAE,CAAC;IAEtE,IAAI,CAAC,KAAa,aAAb,KAAK,uBAAL,KAAK,CAAU,QAAQ,KAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;QACtE,OAAO,CAAC,IAAI,CACV,yFAAyF,CAC1F,CAAC;QACF,OAAO,CAAC,IAAI,CACV,gGAAgG,CACjG,CAAC;IACJ,CAAC;IAED,OAAO;QACL,YAAY;QACZ,QAAQ;QACR,OAAO;QACP,kBAAkB;QAClB,IAAI,EAAE,MAAA,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,mCAAI,QAAQ;QACxC,QAAQ;QACR,UAAU,gCACR,EAAE,IACC,WAAW,KACd,kBAAkB,EAChB,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,EAAE;gBAC5B,CAAC,kBAAkB,CAAC,EAClB,CAAC,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,CAAA,IAAI,OAAO,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,CAAA,KAAK,QAAQ;gBAChE,CAAC,OAAO,CAAC,EAAE,YAAY;gBACvB,CAAC,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,mCAAI,EAAE,CAAC,EAAE,QAAQ,IAAI,CAAC,CAAC,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,CAAA;aACzD,CAAC,IAAI,SAAS,EAEjB,QAAQ,GACT;KACF,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"useFormField.js","sourceRoot":"","sources":["../../src/form/useFormField.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAkDrD;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,KAAqB,EACrB,MAAc,EACC,EAAE;;IACjB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAEpD,MAAM,QAAQ,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAE7C,MAAM,KAAK,GAAG,KAAK,EAAE,CAAC;IAEtB,MAAM,EAAE,GAAG,MAAA,KAAK,CAAC,EAAE,mCAAI,GAAG,MAAM,IAAI,KAAK,EAAE,CAAC;IAC5C,MAAM,OAAO,GAAG,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,GAAG,MAAM,UAAU,KAAK,EAAE,CAAC;IAC1D,MAAM,kBAAkB,GAAG,GAAG,MAAM,gBAAgB,KAAK,EAAE,CAAC;IAE5D,MAAM,QAAQ,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,KAAI,KAAK,CAAC,QAAQ,CAAC;IACtD,MAAM,QAAQ,GACZ,CAAC,CAAC,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,KAAI,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,SAAS,CAAC;IAErE,MAAM,QAAQ,GACZ,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAC,KAAK,KAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,CAAA,CAAC,CAAC;IACzD,MAAM,YAAY,GAChB,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,SAAS,CAAC;IAElE,MAAM,WAAW,qBAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAE,CAAC;IAEtE,IAAI,CAAC,KAAa,aAAb,KAAK,uBAAL,KAAK,CAAU,QAAQ,KAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;QACtE,OAAO,CAAC,IAAI,CACV,yFAAyF,CAC1F,CAAC;QACF,OAAO,CAAC,IAAI,CACV,gGAAgG,CACjG,CAAC;IACJ,CAAC;IAED,OAAO;QACL,YAAY;QACZ,QAAQ;QACR,OAAO;QACP,kBAAkB;QAClB,IAAI,EAAE,MAAA,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,mCAAI,QAAQ;QACxC,QAAQ;QACR,UAAU,gCACR,EAAE,IACC,WAAW,KACd,kBAAkB,EAChB,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,EAAE;gBAC5B,CAAC,kBAAkB,CAAC,EAClB,CAAC,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,CAAA,IAAI,OAAO,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,CAAA,KAAK,QAAQ;gBAChE,CAAC,OAAO,CAAC,EAAE,YAAY;gBACvB,CAAC,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,mCAAI,EAAE,CAAC,EAAE,QAAQ,IAAI,CAAC,CAAC,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,CAAA;aACzD,CAAC,IAAI,SAAS,EAEjB,QAAQ,GACT;KACF,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "6.3.5",
+  "version": "6.4.0",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -562,8 +562,8 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^6.3.5",
-    "@navikt/ds-tokens": "^6.3.5",
+    "@navikt/aksel-icons": "^6.4.0",
+    "@navikt/ds-tokens": "^6.4.0",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^2.1.0",

package/src/copybutton/CopyButton.tsx

@@ -33,6 +33,7 @@ export interface CopyButtonProps
   /**
    * Text shown when button is clicked.
    * Only set if used with `text`-prop.
+   * @default "Kopiert!"
    */
   activeText?: string;
   /**

package/src/date/datepicker/parts/DayButton.tsx

@@ -20,6 +20,7 @@ const DayButton = (props: DayProps) => {
       name="day"
       ref={buttonRef}
       {...dayRender.buttonProps}
+      role={undefined}
       aria-label={dateTime}
       aria-hidden={dayRender.activeModifiers.outside}
     />

package/src/form/checkbox/CheckboxGroup.tsx

@@ -16,7 +16,7 @@ export const CheckboxGroupContext = createContext<CheckboxGroupState | null>(
 export interface CheckboxGroupProps
   extends Omit<
     FieldsetProps,
-    "onChange" | "errorPropagation" | "defaultValue"
+    "onChange" | "errorPropagation" | "defaultValue" | "nativeReadOnly"
   > {
   /**
    * Collection of `<Checkbox/>`.
@@ -27,7 +27,7 @@ export interface CheckboxGroupProps
    */
   value?: any[];
   /**
-   * Default checked checkboxes on render.
+   * Default checked checkboxes.
    */
   defaultValue?: any[];
   /**
@@ -44,10 +44,10 @@ export interface CheckboxGroupProps
  *
  * @example
  * ```jsx
- * <CheckboxGroup legend="Hvor vil du sitte?">
- *   <Checkbox value="Bakerst">Bakerst</Checkbox>
- *   <Checkbox value="Midterst">Midterst</Checkbox>
- *   <Checkbox value="Fremst">Fremst</Checkbox>
+ * <CheckboxGroup legend="Transportmiddel">
+ *   <Checkbox value="car">Bil</Checkbox>
+ *   <Checkbox value="taxi">Drosje</Checkbox>
+ *   <Checkbox value="public">Kollektivt</Checkbox>
  * </CheckboxGroup>
  * ```
  */

package/src/form/checkbox/types.ts

@@ -14,7 +14,7 @@ export interface CheckboxProps
    */
   errorId?: string;
   /**
-   * Checkbox label
+   * Checkbox label.
    */
   children: React.ReactNode;
   /**
@@ -22,7 +22,7 @@ export interface CheckboxProps
    */
   hideLabel?: boolean;
   /**
-   * The value of the HTML element.
+   * Checkbox value.
    */
   value?: any;
   /**
@@ -31,7 +31,7 @@ export interface CheckboxProps
    */
   indeterminate?: boolean;
   /**
-   * Adds a description to extend labeling of Checkbox.
+   * Adds a description to extend the labeling.
    */
   description?: string;
 }

package/src/form/file-upload/FileUpload.tsx

@@ -89,8 +89,8 @@ interface FileUploadComponent
    * ```jsx
    * <FileUpload.Item file={file} status="uploading" />
    * <FileUpload.Item file={file} status="downloading" />
-   * <FileUpload.Item file={file} itemAction="retry" onRetry={...} />
-   * <FileUpload.Item file={file} itemAction="delete" onDelete={...} />
+   * <FileUpload.Item file={file} button={{ action:"retry", onClick:... }} />
+   * <FileUpload.Item file={file} button={{ action:"delete", onClick:... }} />
    * ```
    */
   Item: typeof Item;

package/src/form/file-upload/file-upload-item.stories.tsx

@@ -57,51 +57,63 @@ export const States: StoryObj<typeof FileUpload.Item> = {
         file={fileTxt}
         error="Error og uploading"
         status="uploading"
-        onRetry={() => onRetry(fileTxt)}
-        onDelete={() => onDelete(fileTxt)}
+        button={{
+          onClick: () => onDelete(fileTxt),
+          action: "delete",
+        }}
       />
       <h2>Item Actions</h2>
       <h3>status + delete</h3>
       <FileUpload.Item
         file={fileDocx}
-        onDelete={() => onDelete(fileDocx)}
-        onRetry={() => onRetry(fileDocx)}
         status="uploading"
-        itemAction="delete"
+        button={{
+          onClick: () => onDelete(fileDocx),
+          action: "delete",
+        }}
       />
       <h3>status + retry</h3>
       <FileUpload.Item
         file={fileDocx}
-        onDelete={() => onDelete(fileDocx)}
-        onRetry={() => onRetry(fileDocx)}
         status="downloading"
-        itemAction="retry"
+        button={{
+          onClick: () => onRetry(fileDocx),
+          action: "retry",
+        }}
       />
       <h3>retry</h3>
       <FileUpload.Item
         file={fileCsv}
-        onRetry={() => onRetry(fileCsv)}
-        itemAction="retry"
+        button={{
+          onClick: () => onRetry(fileCsv),
+          action: "retry",
+        }}
       />
       <h3>delete</h3>
       <FileUpload.Item
         file={filePptx}
-        onDelete={() => onDelete(filePptx)}
-        itemAction="delete"
+        button={{
+          onClick: () => onDelete(filePptx),
+          action: "delete",
+        }}
       />
       <h3>retry + error</h3>
       <FileUpload.Item
         file={fileCsv}
         error="Error og onRetry"
-        onRetry={() => onRetry(fileCsv)}
-        itemAction="retry"
+        button={{
+          onClick: () => onRetry(fileCsv),
+          action: "retry",
+        }}
       />
       <h3>delete + error</h3>
       <FileUpload.Item
         file={filePptx}
         error="Error og onDelete"
-        onDelete={() => onDelete(filePptx)}
-        itemAction="delete"
+        button={{
+          onClick: () => onDelete(filePptx),
+          action: "delete",
+        }}
       />
     </div>
   ),

package/src/form/file-upload/file-upload.stories.tsx

@@ -25,6 +25,7 @@ const MAX_SIZE = MAX_SIZE_MB * 1024 * 1024;
 
 const CustomItem = ({
   index,
+  onDelete,
   ...props
 }: FileUploadItemProps & {
   index: number;
@@ -45,7 +46,10 @@ const CustomItem = ({
     <FileUpload.Item
       {...props}
       status={loading ? "uploading" : "idle"}
-      itemAction="delete"
+      button={{
+        action: "delete",
+        onClick: onDelete,
+      }}
       as="li"
     />
   );
@@ -165,7 +169,10 @@ export const Single: StoryFn = () => {
           key={file.file.name}
           file={file.file}
           error={file.error ? errors[file.reasons[0]] : undefined}
-          onDelete={removeFile}
+          button={{
+            action: "delete",
+            onClick: removeFile,
+          }}
         />
       ))}
     </VStack>
@@ -194,12 +201,17 @@ export const Translation = () => (
       <FileUpload.Dropzone label="Last opp bilder" onSelect={console.log} />
       <FileUpload.Item
         file={{ name: "eksempel.png", size: 200000 }}
-        onDelete={() => null}
+        button={{
+          action: "delete",
+          onClick: () => null,
+        }}
       />
       <FileUpload.Item
         file={{ name: "eksempel.png", size: 200000 }}
-        itemAction="retry"
-        onRetry={() => null}
+        button={{
+          action: "retry",
+          onClick: () => null,
+        }}
       />
       <FileUpload.Item
         file={{ name: "eksempel.png", size: 200000 }}

package/src/form/file-upload/parts/item/Item.tsx

@@ -12,12 +12,13 @@ import ItemIcon from "./ItemIcon";
 import ItemName from "./ItemName";
 import { formatFileSize } from "./utils/format-file-size";
 
-export interface FileItemBaseProps {
+export interface FileUploadItemProps
+  extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Overrides html-tag
    * @default "div"
    */
-  as?: "div" | "li";
+  as?: ("div" | "li") & React.ElementType;
   /**
    * Either a native File or file metadata.
    */
@@ -43,37 +44,20 @@ export interface FileItemBaseProps {
    * @default "idle"
    */
   status?: "downloading" | "uploading" | "idle";
+  /**
+   * Props for the action button.
+   */
+  button?: {
+    action: "delete" | "retry";
+    onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    id?: string;
+  };
   /**
    * i18n-API for customizing texts and labels
    */
   translations?: ComponentTranslation<"FileUpload">["item"];
-  onRetry?: (event: MouseEvent<HTMLButtonElement>) => void;
-  onDelete?: (event: MouseEvent<HTMLButtonElement>) => void;
 }
 
-type FileItemActionDelete = {
-  onDelete: (event: MouseEvent<HTMLButtonElement>) => void;
-  itemAction: "delete";
-};
-
-type FileItemActionRetry = {
-  onRetry: (event: MouseEvent<HTMLButtonElement>) => void;
-  itemAction: "retry";
-};
-
-type FileItemActionNone = {
-  itemAction?: "none";
-};
-
-type FileItemConditionalProps =
-  | FileItemActionDelete
-  | FileItemActionRetry
-  | FileItemActionNone;
-
-export type FileUploadItemProps = FileItemBaseProps &
-  FileItemConditionalProps &
-  React.HTMLAttributes<HTMLDivElement>;
-
 export const Item: OverridableComponent<FileUploadItemProps, HTMLDivElement> =
   forwardRef(
     (
@@ -81,16 +65,14 @@ export const Item: OverridableComponent<FileUploadItemProps, HTMLDivElement> =
         as: Component = "div",
         file,
         status = "idle",
-        onDelete,
-        onRetry,
         error,
         className,
         href,
         onFileClick,
-        itemAction = "delete",
+        button,
         translations,
         ...rest
-      },
+      }: FileUploadItemProps,
       ref,
     ) => {
       const context = useFileUploadTranslation(false);
@@ -148,14 +130,14 @@ export const Item: OverridableComponent<FileUploadItemProps, HTMLDivElement> =
               </div>
             </div>
 
-            {status === "idle" && (
+            {status === "idle" && button && (
               <ItemButton
-                file={file}
-                onRetry={onRetry}
-                onDelete={onDelete}
-                action={itemAction}
-                retryTitle={translate("item.retryButtonTitle")}
-                deleteTitle={translate("item.deleteButtonTitle")}
+                {...button}
+                title={translate(
+                  button.action === "retry"
+                    ? "item.retryButtonTitle"
+                    : "item.deleteButtonTitle",
+                )}
               />
             )}
           </div>

package/src/form/file-upload/parts/item/ItemButton.tsx

@@ -1,52 +1,27 @@
 import React from "react";
 import { ArrowsCirclepathIcon, TrashIcon } from "@navikt/aksel-icons";
 import { Button } from "../../../../button";
-import { FileItem } from "./Item.types";
 
 interface Props {
-  file: FileItem;
-  onRetry?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  onDelete?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  action: "delete" | "retry" | "none";
-  retryTitle: string;
-  deleteTitle: string;
+  action: "delete" | "retry";
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  id?: string;
+  title: string;
 }
 
-const ItemButton = ({
-  onRetry,
-  onDelete,
-  action,
-  retryTitle,
-  deleteTitle,
-}: Props) => {
-  if (action === "none") {
-    return null;
-  }
+const ItemButton = ({ action, onClick, id, title }: Props) => {
+  const Icon = action === "delete" ? TrashIcon : ArrowsCirclepathIcon;
 
-  if (onRetry && action === "retry") {
-    return (
-      <Button
-        className="navds-file-item__button"
-        type="button"
-        variant="tertiary-neutral"
-        onClick={onRetry}
-        icon={<ArrowsCirclepathIcon title={retryTitle} />}
-      />
-    );
-  }
-  if (onDelete && action === "delete") {
-    return (
-      <Button
-        className="navds-file-item__button"
-        type="button"
-        variant="tertiary-neutral"
-        onClick={onDelete}
-        icon={<TrashIcon title={deleteTitle} />}
-      />
-    );
-  }
-
-  return null;
+  return (
+    <Button
+      id={id}
+      className="navds-file-item__button"
+      type="button"
+      variant="tertiary-neutral"
+      onClick={onClick}
+      icon={<Icon title={title} />}
+    />
+  );
 };
 
 export default ItemButton;

package/src/form/radio/RadioGroup.tsx

@@ -18,7 +18,7 @@ export const RadioGroupContext =
 export interface RadioGroupProps
   extends Omit<
     FieldsetProps,
-    "onChange" | "errorPropagation" | "defaultValue"
+    "onChange" | "errorPropagation" | "defaultValue" | "nativeReadOnly"
   > {
   /**
    * Collection of `<Radio />`-elements

package/src/form/radio/types.ts

@@ -9,11 +9,11 @@ export interface RadioProps
    */
   children: React.ReactNode;
   /**
-   * The value of the HTML element.
+   * Radio value.
    */
   value: any;
   /**
-   * Adds a description to extend labeling of Radio.
+   * Adds a description to extend the labeling.
    */
   description?: string;
 }

package/src/form/useFormField.ts

@@ -5,8 +5,7 @@ import { FieldsetContext } from "./fieldset/context";
 
 export interface FormFieldProps {
   /**
-   * Adds a description to extend labeling of the field.
-   * Error message for element.
+   * Error message.
    */
   error?: React.ReactNode;
   /**
@@ -24,7 +23,7 @@ export interface FormFieldProps {
    */
   disabled?: boolean;
   /**
-   * Adds a description to extend labeling of a field.
+   * Adds a description to extend the labeling.
    */
   description?: React.ReactNode;
   /**

package/src/guide-panel/guidepanel.stories.tsx

@@ -41,16 +41,14 @@ export const PosterVariants = {
   render: () => (
     <VStack gap="6" align="start">
       <GuidePanel>
-        If you exclude the <code>poster</code> prop, you will get the poster
-        variant on mobile (&lt;480px) and the non-poster variant otherwise.
+        If you exclude the `poster` prop, you will get the poster variant on
+        mobile (&lt;480px) and the non-poster variant otherwise.
       </GuidePanel>
       <GuidePanel poster>
-        Use the <code>poster</code> prop to get the poster variant on all
-        viewports.
+        Use the `poster` prop to get the poster variant on all viewports.
       </GuidePanel>
       <GuidePanel poster={false}>
-        Set <code>poster=false</code> to get the non-poster variant on all
-        viewports.
+        Set `poster=false` to get the non-poster variant on all viewports.
       </GuidePanel>
     </VStack>
   ),

package/src/typography/stories/bodylong.stories.tsx

@@ -4,18 +4,17 @@ import React from "react";
 import { VStack } from "../../layout/stack";
 import BodyLong from "../BodyLong";
 
-const meta = {
+const meta: Meta<typeof BodyLong> = {
   title: "ds-react/Typography/BodyLong",
   component: BodyLong,
   decorators: [(story) => <div style={{ maxWidth: "700px" }}>{story()}</div>],
   parameters: {
     chromatic: { disable: true },
   },
-} satisfies Meta<typeof BodyLong>;
-
+};
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof BodyLong>;
 
 const lorem =
   "Hvis du ikke bor sammen med begge foreldrene dine, kan du ha rett til barnebidrag fra en eller begge foreldre mens du fullfører videregående skole eller tilsvarende.";

package/src/typography/stories/bodyshort.stories.tsx

@@ -4,18 +4,17 @@ import React from "react";
 import { VStack } from "../../layout/stack";
 import { BodyShort } from "../BodyShort";
 
-const meta = {
+const meta: Meta<typeof BodyShort> = {
   title: "ds-react/Typography/BodyShort",
   component: BodyShort,
   decorators: [(story) => <div style={{ maxWidth: "250px" }}>{story()}</div>],
   parameters: {
     chromatic: { disable: true },
   },
-} satisfies Meta<typeof BodyShort>;
-
+};
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof BodyShort>;
 
 const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
 

package/src/typography/stories/detail.stories.tsx

@@ -4,18 +4,17 @@ import React from "react";
 import { VStack } from "../../layout/stack";
 import Detail from "../Detail";
 
-const meta = {
+const meta: Meta<typeof Detail> = {
   title: "ds-react/Typography/Detail",
   component: Detail,
   decorators: [(story) => <div style={{ maxWidth: "200px" }}>{story()}</div>],
   parameters: {
     chromatic: { disable: true },
   },
-} satisfies Meta<typeof Detail>;
-
+};
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Detail>;
 
 const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
 

package/src/typography/stories/error-message.stories.tsx

@@ -4,17 +4,16 @@ import React from "react";
 import { VStack } from "../../layout/stack";
 import ErrorMessage from "../ErrorMessage";
 
-const meta = {
+const meta: Meta<typeof ErrorMessage> = {
   title: "ds-react/Typography/ErrorMessage",
   component: ErrorMessage,
   parameters: {
     chromatic: { disable: true },
   },
-} satisfies Meta<typeof ErrorMessage>;
-
+};
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof ErrorMessage>;
 
 const lorem =
   "Du må fylle ut: Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon";

package/src/typography/stories/heading.stories.tsx

@@ -4,18 +4,17 @@ import { default as React } from "react";
 import { VStack } from "../../layout/stack";
 import Heading from "../Heading";
 
-const meta = {
+const meta: Meta<typeof Heading> = {
   title: "ds-react/Typography/Heading",
   component: Heading,
   decorators: [(story) => <div style={{ maxWidth: "300px" }}>{story()}</div>],
   parameters: {
     chromatic: { disable: true },
   },
-} satisfies Meta<typeof Heading>;
-
+};
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Heading>;
 
 const lorem = "Hva kan vi hjelpe deg med?";
 

package/src/typography/stories/label.stories.tsx

@@ -4,18 +4,17 @@ import React from "react";
 import { VStack } from "../../layout/stack";
 import Label from "../Label";
 
-const meta = {
+const meta: Meta<typeof Label> = {
   title: "ds-react/Typography/Label",
   component: Label,
   decorators: [(story) => <div style={{ maxWidth: "400px" }}>{story()}</div>],
   parameters: {
     chromatic: { disable: true },
   },
-} satisfies Meta<typeof Label>;
-
+};
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Label>;
 
 const lorem =
   "Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon";