Version Packages (#2831 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Justering av eksempler på Checkbox (#2833 )
2026-10-13 01:02:02 +00:00 · 2024-04-09 09:12:06 +02:00 · 2024-04-09 09:06:58 +02:00 · 2024-04-09 07:33:16 +02:00 · 2024-04-08 09:16:53 +02:00 · 2024-04-04 20:54:12 +02:00
55 changed files with 513 additions and 441 deletions
@@ -1,5 +1,7 @@
 # @navikt/aksel-icons

+## 6.4.0
+
 ## 6.3.6

 ## 6.3.5
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "6.3.6",
+  "version": "6.4.0",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,7 @@
 # @navikt/aksel-stylelint

+## 6.4.0
+
 ## 6.3.6

 ## 6.3.5
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "6.3.6",
+  "version": "6.4.0",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
  "repository": {
@@ -35,8 +35,8 @@
    "dev": "yarn watch:lint"
  },
  "devDependencies": {
-    "@navikt/ds-css": "^6.3.6",
-    "@navikt/ds-tokens": "^6.3.6",
+    "@navikt/ds-css": "^6.4.0",
+    "@navikt/ds-tokens": "^6.4.0",
    "concurrently": "7.2.1",
    "postcss-selector-parser": "^6.0.13",
    "postcss-value-parser": "^4.2.0",
@@ -1,5 +1,12 @@
 # @navikt/aksel

+## 6.4.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@6.4.0
+
 ## 6.3.6

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "6.3.6",
+  "version": "6.4.0",
  "description": "Aksel command line interface. Handles css-imports, codemods and more",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -29,7 +29,7 @@
  },
  "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
  "dependencies": {
-    "@navikt/ds-css": "6.3.6",
+    "@navikt/ds-css": "6.4.0",
    "axios": "1.6.0",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -1,5 +1,7 @@
 # @navikt/ds-css

+## 6.4.0
+
 ## 6.3.6

 ## 6.3.5
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "6.3.6",
+  "version": "6.4.0",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -27,7 +27,7 @@
    "css:get-version": "node config/get-version.js"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^6.3.6",
+    "@navikt/ds-tokens": "^6.4.0",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -1,5 +1,17 @@
 # @navikt/ds-react

+## 6.4.0
+
+### Minor Changes
+
+- FileUpload.Item: :boom: Endret API og støtte for å sette ID på knappen ([#2824](https://github.com/navikt/aksel/pull/2824))
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@6.4.0
+  - @navikt/aksel-icons@6.4.0
+
 ## 6.3.6

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "6.3.6",
+  "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.6",
-    "@navikt/ds-tokens": "^6.3.6",
+    "@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",
@@ -33,6 +33,7 @@ export interface CopyButtonProps
  /**
   * Text shown when button is clicked.
   * Only set if used with `text`-prop.
+   * @default "Kopiert!"
   */
  activeText?: string;
  /**
@@ -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>
 * ```
 */
@@ -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;
 }
@@ -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;
@@ -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>
  ),
@@ -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 }}
@@ -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>
@@ -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;
@@ -18,7 +18,7 @@ export const RadioGroupContext =
 export interface RadioGroupProps
  extends Omit<
    FieldsetProps,
-    "onChange" | "errorPropagation" | "defaultValue"
+    "onChange" | "errorPropagation" | "defaultValue" | "nativeReadOnly"
  > {
  /**
   * Collection of `<Radio />`-elements
@@ -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;
 }
@@ -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;
  /**
@@ -1,5 +1,7 @@
 # @navikt/ds-tailwind

+## 6.4.0
+
 ## 6.3.6

 ## 6.3.5
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "6.3.6",
+  "version": "6.4.0",
  "description": "Tailwind config based on @navikt/ds-tokens",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -25,7 +25,7 @@
    "directory": "@navikt/core/tailwind"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^6.3.6",
+    "@navikt/ds-tokens": "^6.4.0",
    "color": "4.2.3",
    "lodash": "^4.17.21",
    "tailwindcss": "^3.3.3",
@@ -1,5 +1,7 @@
 # @navikt/ds-tokens

+## 6.4.0
+
 ## 6.3.6

 ## 6.3.5
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "6.3.6",
+  "version": "6.4.0",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,5 +1,11 @@
 # Changelog

+## 6.4
+
+### @navikt/ds-react
+
+- FileUpload.Item: :boom: Endret API og støtte for å sette ID på knappen ([#2824](https://github.com/navikt/aksel/pull/2824))
+
 ## 6.3

 ### @navikt/ds-css
@@ -32,16 +38,16 @@

 ## 6.2

-### @navikt/ds-react
-
- Select: Fjern 'multiple' fra SelectProps ([#2782](https://github.com/navikt/aksel/pull/2782))
-
 ### @navikt/aksel-icons

 - Ikoner: Nytt ikon `archive` ([#2772](https://github.com/navikt/aksel/pull/2772))

 - Ikoner: Nytt ikon `opensource` ([#2787](https://github.com/navikt/aksel/pull/2787))

+### @navikt/ds-react
+
+- Select: Fjern 'multiple' fra SelectProps ([#2782](https://github.com/navikt/aksel/pull/2782))
+
 ## 6.1

 ### @navikt/ds-css
@@ -64,9 +70,11 @@

 ## 6.0

-### @navikt/ds-tailwind
+### @navikt/aksel-icons

- Tokens: La til nytt brekkpunkt `2xl` for `1440px`. Alle primitives er oppdatert for å reflektere oppdateringen. Brukere av Tailwind vil måtte sjekke at overskriving av `screen: "2xl"` ikke brekker app. ([#2623](https://github.com/navikt/aksel/pull/2623))
+- ESM: ds-react og aksel-icons støtter nå native ESM 🎉 ([#2623](https://github.com/navikt/aksel/pull/2623))
+
+* SSR: ds-react og aksel-icons støtter nå `use client` og kan brukes i nextjs app-router uten lokal re-eksportering. ([#2623](https://github.com/navikt/aksel/pull/2623))

 ### @navikt/ds-css

@@ -80,6 +88,10 @@

 - Textarea: Fjernet div med klassen navds-textarea\_\_wrapper ([#2623](https://github.com/navikt/aksel/pull/2623))

+### @navikt/ds-tailwind
+
+- Tokens: La til nytt brekkpunkt `2xl` for `1440px`. Alle primitives er oppdatert for å reflektere oppdateringen. Brukere av Tailwind vil måtte sjekke at overskriving av `screen: "2xl"` ikke brekker app. ([#2623](https://github.com/navikt/aksel/pull/2623))
+
 ### @navikt/ds-tokens

 - Tokens: La til nytt brekkpunkt `2xl` for `1440px`. Alle primitives er oppdatert for å reflektere oppdateringen. Brukere av Tailwind vil måtte sjekke at overskriving av `screen: "2xl"` ikke brekker app. ([#2623](https://github.com/navikt/aksel/pull/2623))
@@ -108,19 +120,13 @@

 * SSR: ds-react og aksel-icons støtter nå `use client` og kan brukes i nextjs app-router uten lokal re-eksportering. ([#2623](https://github.com/navikt/aksel/pull/2623))

-### @navikt/aksel-stylelint
-
- Textarea: Fjernet div med klassen navds-textarea\_\_wrapper ([#2623](https://github.com/navikt/aksel/pull/2623))
-
 ### @navikt/aksel

 - Chat: Fjernet deprecated props `backgroundColor` og `avatarBgColor`. Bruk prop `variant` som erstatning. ([#2623](https://github.com/navikt/aksel/pull/2623))

-### @navikt/aksel-icons
+### @navikt/aksel-stylelint

- ESM: ds-react og aksel-icons støtter nå native ESM 🎉 ([#2623](https://github.com/navikt/aksel/pull/2623))
-
-* SSR: ds-react og aksel-icons støtter nå `use client` og kan brukes i nextjs app-router uten lokal re-eksportering. ([#2623](https://github.com/navikt/aksel/pull/2623))
+- Textarea: Fjernet div med klassen navds-textarea\_\_wrapper ([#2623](https://github.com/navikt/aksel/pull/2623))

 ## 5.18

@@ -162,32 +168,32 @@

 ## 5.16

-### @navikt/ds-tailwind
+### @navikt/aksel-icons

- Tailwind: La til ny `maxWidth` for text ([#2652](https://github.com/navikt/aksel/pull/2652))
+- Ikoner: Nytt ikon `LocationPin` ✨ ([#2672](https://github.com/navikt/aksel/pull/2672))

 ### @navikt/ds-css

 - :sparkles: Combobox: Mulighet for å begrense hvor mange valg bruker kan ta ([#2260](https://github.com/navikt/aksel/pull/2260))

+### @navikt/ds-tailwind
+
+- Tailwind: La til ny `maxWidth` for text ([#2652](https://github.com/navikt/aksel/pull/2652))
+
 ### @navikt/ds-react

 - :sparkles: Combobox: Mulighet for å begrense hvor mange valg bruker kan ta ([#2260](https://github.com/navikt/aksel/pull/2260))

-### @navikt/aksel-icons
-
- Ikoner: Nytt ikon `LocationPin` ✨ ([#2672](https://github.com/navikt/aksel/pull/2672))
-
 ## 5.15

-### @navikt/ds-react
-
- HelpText: HelpText-state ble ikke riktig oppdatert ved klikk ([#2643](https://github.com/navikt/aksel/pull/2643))
-
 ### @navikt/aksel-icons

 - Ikoner: Synket ikoner med Figma. Lagt til nytt ikon `FigureChild` ([#2629](https://github.com/navikt/aksel/pull/2629))

+### @navikt/ds-react
+
+- HelpText: HelpText-state ble ikke riktig oppdatert ved klikk ([#2643](https://github.com/navikt/aksel/pull/2643))
+
 ## 5.14

 ### @navikt/ds-css
@@ -228,6 +234,10 @@

 ## 5.12

+### @navikt/aksel-icons
+
+- Ikoner: Oppdatert ikonpakke med diverse bugdfixes og oppdateringer av stroke ([#2538](https://github.com/navikt/aksel/pull/2538))
+
 ### @navikt/ds-css

 - ExpansionCard: Divider mellom header og innhold ([#2566](https://github.com/navikt/aksel/pull/2566))
@@ -248,11 +258,11 @@

 - Stylelint: Støtter nå stylelint v16 ([#2591](https://github.com/navikt/aksel/pull/2591))

+## 5.11
+
 ### @navikt/aksel-icons

- Ikoner: Oppdatert ikonpakke med diverse bugdfixes og oppdateringer av stroke ([#2538](https://github.com/navikt/aksel/pull/2538))
-
-## 5.11
+- Ikoner: Nytt ikon `PushPin` ([#2503](https://github.com/navikt/aksel/pull/2503))

 ### @navikt/ds-css

@@ -294,16 +304,8 @@

 - :wheelchair: Textarea: Forsinkelse ved live-opplesning av gjenstående tegn ([#2502](https://github.com/navikt/aksel/pull/2502))

-### @navikt/aksel-icons
-
- Ikoner: Nytt ikon `PushPin` ([#2503](https://github.com/navikt/aksel/pull/2503))
-
 ## 5.10

-### @navikt/ds-tailwind
-
- typescript types for tailwind preset ([#2486](https://github.com/navikt/aksel/pull/2486))
-
 ### @navikt/ds-css

 - :bug: Textarea: Teller flyttet ut av tekstfeltet for å unngå overlapp og misforståelser ([#2483](https://github.com/navikt/aksel/pull/2483))
@@ -312,6 +314,10 @@

 - Primitives: Ny komponent `Page` og `Page.Block` ([#2456](https://github.com/navikt/aksel/pull/2456))

+### @navikt/ds-tailwind
+
+- typescript types for tailwind preset ([#2486](https://github.com/navikt/aksel/pull/2486))
+
 ### @navikt/ds-react

 - Gjør lukknapp i Alert til type button ([#2497](https://github.com/navikt/aksel/pull/2497))
@@ -374,6 +380,10 @@

 ## 5.7

+### @navikt/aksel-icons
+
+- Ikoner: Nye ikoner `ChevronLeftFirstCircle` og `ChevronRightLastCircle` ([#2365](https://github.com/navikt/aksel/pull/2365))
+
 ### @navikt/ds-css

 - :lipstick: Chips.Toggle: Ikon i uvalgt tilstand ([#2395](https://github.com/navikt/aksel/pull/2395))
@@ -414,11 +424,15 @@

 - :lipstick: CopyButton: Justert padding, gap og animasjon ([#2355](https://github.com/navikt/aksel/pull/2355))

+## 5.6
+
 ### @navikt/aksel-icons

- Ikoner: Nye ikoner `ChevronLeftFirstCircle` og `ChevronRightLastCircle` ([#2365](https://github.com/navikt/aksel/pull/2365))
+- Ikoner: SVG export setter nå `height="1em"`, `width="1em"` og `fill="currentColor"`. ([#2300](https://github.com/navikt/aksel/pull/2300))

-## 5.6
+- Ikoner: Nye ikoner `book` og `books` ([#2313](https://github.com/navikt/aksel/pull/2313))
+
+* Ikoner: Nye ikoner `ClipboardCheckmark` og `ClipboardLink` ([#2307](https://github.com/navikt/aksel/pull/2307))

 ### @navikt/ds-css

@@ -470,14 +484,6 @@

 - Remove tabIndex="-1" on Popover to fix VoiceOver navigation issue inside Popover ([#2303](https://github.com/navikt/aksel/pull/2303))

-### @navikt/aksel-icons
-
- Ikoner: SVG export setter nå `height="1em"`, `width="1em"` og `fill="currentColor"`. ([#2300](https://github.com/navikt/aksel/pull/2300))
-
- Ikoner: Nye ikoner `book` og `books` ([#2313](https://github.com/navikt/aksel/pull/2313))
-
-* Ikoner: Nye ikoner `ClipboardCheckmark` og `ClipboardLink` ([#2307](https://github.com/navikt/aksel/pull/2307))
-
 ## 5.5

 ### @navikt/ds-css
@@ -518,6 +524,10 @@

 ## 5.3

+### @navikt/aksel-icons
+
+- :bug: SVG import map er nå riktig path ([#2250](https://github.com/navikt/aksel/pull/2250))
+
 ### @navikt/ds-css

 - Alert: 12px -> 8px gap mellom tekst og ikon ved `size="small"` ([#2240](https://github.com/navikt/aksel/pull/2240))
@@ -554,11 +564,11 @@

 * :wheelchair: Textarea: Skjermleser-spesifikk tekst leses opp sammenhengende ([#2216](https://github.com/navikt/aksel/pull/2216))

+## 5.2
+
 ### @navikt/aksel-icons

- :bug: SVG import map er nå riktig path ([#2250](https://github.com/navikt/aksel/pull/2250))
-
-## 5.2
+- Ikoner: Oppdatert ikonpakke ([#2197](https://github.com/navikt/aksel/pull/2197))

 ### @navikt/ds-css

@@ -576,10 +586,6 @@

 - Hovering over combobox dropdown will move selection/focus in the list, so we don't end up with a split focus, and reversely when moving focus while hovering ([#2193](https://github.com/navikt/aksel/pull/2193))

-### @navikt/aksel-icons
-
- Ikoner: Oppdatert ikonpakke ([#2197](https://github.com/navikt/aksel/pull/2197))
-
 ## 5.1

 ### @navikt/ds-css
@@ -789,18 +795,18 @@

 ## 4.4

-### @navikt/ds-tailwind
-
- Shadow-tokens er oppdatert ([PR](https://github.com/navikt/aksel/pull/2041))
-
- Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). ([PR](https://github.com/navikt/aksel/pull/2036))
-
 ### @navikt/ds-css

 - :lipstick: Chat: fjernet border, satt avatar svg til 24x24px, byttet om "subtle" og "neutral" ([#2077](https://github.com/navikt/aksel/pull/2077))

 * Shadow-tokens er oppdatert: Datepicker har nå ikke border, Modal bruker shadow-xlarge, LinkCard bruker shadow-xsmall ([PR](https://github.com/navikt/aksel/pull/2041))

+### @navikt/ds-tailwind
+
+- Shadow-tokens er oppdatert ([PR](https://github.com/navikt/aksel/pull/2041))
+
+- Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). ([PR](https://github.com/navikt/aksel/pull/2036))
+
 ### @navikt/ds-tokens

 - Shadow-tokens er oppdatert til mer tydeligere varianter ([PR](https://github.com/navikt/aksel/pull/2041))
@@ -835,9 +841,9 @@

 ## 4.1

-### @navikt/ds-tailwind
+### @navikt/aksel-icons

- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
+- Nye ikoner `ChevronRightLast` og `ChevronLeftLast` ([PR](https://github.com/navikt/aksel/pull/2054))

 ### @navikt/ds-css

@@ -849,6 +855,10 @@

 - Alle description-felter på fieldsets har nå `text-subtle` som farge. ([PR](https://github.com/navikt/aksel/pull/2036))

+### @navikt/ds-tailwind
+
+- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
+
 ### @navikt/ds-tokens

 - :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
@@ -883,10 +893,6 @@

 - Deprecated klassenavn `navds-chips--icon-left` ([PR](https://github.com/navikt/aksel/pull/2035))

-### @navikt/aksel-icons
-
- Nye ikoner `ChevronRightLast` og `ChevronLeftLast` ([PR](https://github.com/navikt/aksel/pull/2054))
-
 ## 4.0

 ### @navikt/ds-css
@@ -939,6 +945,10 @@

 ## 3.2

+### @navikt/aksel-icons
+
+- Nye ikoner `FileParagraph` og `FilePlus` ([PR](https://github.com/navikt/aksel/pull/1998))
+
 ### @navikt/ds-css

 - Datepicker: Fikset small-variant av datepicker-input. ([PR](https://github.com/navikt/aksel/pull/1993))
@@ -957,10 +967,6 @@

 * Ny komponent CopyButton! Erstatter `CopyToClipboard` som nå er tagget som deprecated ([PR](https://github.com/navikt/aksel/pull/1982))

-### @navikt/aksel-icons
-
- Nye ikoner `FileParagraph` og `FilePlus` ([PR](https://github.com/navikt/aksel/pull/1998))
-
 ## 3.1

 ### @navikt/ds-css
@@ -993,6 +999,16 @@

 ## 2.9

+### @navikt/aksel-icons
+
+- Oppdatert Statusikoner til å være tydeligere og mer konsistente. ([PR](https://github.com/navikt/aksel/pull/1959))
+
+* Fikset `CheckmarkIcon`-bug
+
+- Fikset `CheckmarkCircleIcon`-bug ([PR](https://github.com/navikt/aksel/pull/1956))
+
+* Nye ikoner `BulletList` og `NumberList` ([PR](https://github.com/navikt/aksel/pull/1950))
+
 ### @navikt/ds-css

 - CSS nå tilgjengelig som separate filer: Kan lastest fra CDN, minified-versjoner tilgjengelig ([PR](https://github.com/navikt/aksel/pull/1941))
@@ -1005,17 +1021,19 @@

 - :truck: Flyttet Codemods fra `@navikt/ds-codemods` -> `@navikt/aksel`. `@navikt/ds-codemods` regnes nå som deprecated ([PR](https://github.com/navikt/aksel/pull/1952))

+## 2.8
+
 ### @navikt/aksel-icons

- Oppdatert Statusikoner til å være tydeligere og mer konsistente. ([PR](https://github.com/navikt/aksel/pull/1959))
+- :tada: Nye ikoner `HandKnot` og `HandKnotFilled` ([PR](https://github.com/navikt/aksel/pull/1928))

-* Fikset `CheckmarkIcon`-bug
+* Oppdatert `InformationSquare`-ikon ([PR](https://github.com/navikt/aksel/pull/1921))

- Fikset `CheckmarkCircleIcon`-bug ([PR](https://github.com/navikt/aksel/pull/1956))
+- Oppdatert `VideoSlack`, `Questionmark` og `Information`-ikoner ([PR](https://github.com/navikt/aksel/pull/1909))

-* Nye ikoner `BulletList` og `NumberList` ([PR](https://github.com/navikt/aksel/pull/1950))
+* Nye ikoner `VideoSlash` og `VideoSlashFill`

-## 2.8
+- Fikset Sourcemap-bug

 ### @navikt/ds-css

@@ -1051,26 +1069,8 @@

 * Ny komponent ExpansionCard! ([PR](https://github.com/navikt/aksel/pull/1820))

-### @navikt/aksel-icons
-
- :tada: Nye ikoner `HandKnot` og `HandKnotFilled` ([PR](https://github.com/navikt/aksel/pull/1928))
-
-* Oppdatert `InformationSquare`-ikon ([PR](https://github.com/navikt/aksel/pull/1921))
-
- Oppdatert `VideoSlack`, `Questionmark` og `Information`-ikoner ([PR](https://github.com/navikt/aksel/pull/1909))
-
-* Nye ikoner `VideoSlash` og `VideoSlashFill`
-
- Fikset Sourcemap-bug
-
 ## 2.7

-### @navikt/ds-css
-
- Tabs: La til focus-markering for Tabs.Panel ([PR](https://github.com/navikt/aksel/pull/1863))
-
-* ToggleGroup: Fikset token-bug
-
 ### @navikt/aksel-icons

 - Nye ikoner `CaretUpDownFilledDown`, `CaretUpDownFilledUp`, `CloudDown`, `CloudDownFill`, `CloudUp`, `CloudUpFill`, `HddDown`, `HddDownFill`, `HddUp`, `HddUpFill`, `Inbox`, `InboxDown`, `InboxDownFill`, `InboxFill`, `InboxUp`, `InboxUpFill`, `ShoppingBasket`, `ShoppingBasketFill`
@@ -1079,6 +1079,12 @@

 - Ny ikonpakke med for core icons 3! `@navikt/aksel-icons` ([PR](https://github.com/navikt/aksel/pull/1847))

+### @navikt/ds-css
+
+- Tabs: La til focus-markering for Tabs.Panel ([PR](https://github.com/navikt/aksel/pull/1863))
+
+* ToggleGroup: Fikset token-bug
+
 ## 2.6

 ### @navikt/ds-react
@@ -1175,10 +1181,6 @@

 ## 2.0

-### @navikt/ds-tailwind
-
- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
-
 ### @navikt/ds-css

 - Radio: Fikset default visuell error-state ([PR](https://github.com/navikt/aksel/pull/1737))
@@ -1191,6 +1193,10 @@

 * Tokens: Alle komponenter bruker nå semantiske tokens for som standard, med innebygd støtte for komponent-spesifikke tokens.

+### @navikt/ds-tailwind
+
+- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
+
 ### @navikt/ds-tokens

 - Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
@@ -15,10 +15,10 @@
    "playroom"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^6.3.6",
-    "@navikt/ds-css": "^6.3.6",
-    "@navikt/ds-react": "^6.3.6",
-    "@navikt/ds-tailwind": "^6.3.6",
-    "@navikt/ds-tokens": "^6.3.6"
+    "@navikt/aksel-icons": "^6.4.0",
+    "@navikt/ds-css": "^6.4.0",
+    "@navikt/ds-react": "^6.4.0",
+    "@navikt/ds-tailwind": "^6.4.0",
+    "@navikt/ds-tokens": "^6.4.0"
  }
 }
@@ -30,4 +30,5 @@ export const Demo = {

 export const args = {
  index: 20,
+  desc: "Vi fraråder bruk av disabled state da elementet blir gjemt fra hjelpeteknologier og ofte vil være vanskelig å oppfatte visuelt.",
 };
@@ -2,17 +2,17 @@ import { Checkbox, CheckboxGroup } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
-  const handleChange = (val: any[]) => console.log(val);
+  const handleChange = (val: string[]) => console.log(val);

  return (
-    <CheckboxGroup
-      legend="Hvor vil du sitte?"
-      onChange={(val: any[]) => handleChange(val)}
-    >
-      <Checkbox value="Bakerst">Bakerst</Checkbox>
-      <Checkbox value="Midterst">Midterst</Checkbox>
-      <Checkbox value="Fremst" description="Tilgjengelig med rullestol">
-        Fremst
+    <CheckboxGroup legend="Transportmiddel" onChange={handleChange}>
+      <Checkbox value="car">Bil</Checkbox>
+      <Checkbox value="taxi">Drosje</Checkbox>
+      <Checkbox
+        value="public"
+        description="Buss, båt, fly, trikk, T-bane eller tog."
+      >
+        Kollektivt
      </Checkbox>
    </CheckboxGroup>
  );
@@ -3,17 +3,13 @@ import { Checkbox, CheckboxGroup } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
-  const [state, setState] = useState(["Midterst"]);
+  const [state, setState] = useState(["taxi"]);

  return (
-    <CheckboxGroup
-      legend="Hvor vil du sitte?"
-      onChange={(v) => setState(v)}
-      value={state}
-    >
-      <Checkbox value="Bakerst">Bakerst</Checkbox>
-      <Checkbox value="Midterst">Midterst</Checkbox>
-      <Checkbox value="Fremst">Fremst</Checkbox>
+    <CheckboxGroup legend="Transportmiddel" onChange={setState} value={state}>
+      <Checkbox value="car">Bil</Checkbox>
+      <Checkbox value="taxi">Drosje</Checkbox>
+      <Checkbox value="public">Kollektivt</Checkbox>
    </CheckboxGroup>
  );
 };
@@ -2,17 +2,17 @@ import { Checkbox, CheckboxGroup } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
-  const handleChange = (val: any[]) => console.log(val);
+  const handleChange = (val: string[]) => console.log(val);

  return (
    <CheckboxGroup
-      legend="Hvor vil du sitte?"
-      description="Fremste rad er nærmest nødutgangene"
-      onChange={(val: any[]) => handleChange(val)}
+      legend="Transportmiddel"
+      description="Oppgi alle transportmidlene du brukte for å komme til reisemålet."
+      onChange={handleChange}
    >
-      <Checkbox value="Bakerst">Bakerst</Checkbox>
-      <Checkbox value="Midterst">Midterst</Checkbox>
-      <Checkbox value="Fremst">Fremst</Checkbox>
+      <Checkbox value="car">Bil</Checkbox>
+      <Checkbox value="taxi">Drosje</Checkbox>
+      <Checkbox value="public">Kollektivt</Checkbox>
    </CheckboxGroup>
  );
 };
@@ -2,17 +2,18 @@ import { Checkbox, CheckboxGroup } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
-  const handleChange = (val: any[]) => console.log(val);
+  const handleChange = (val: string[]) => console.log(val);

  return (
    <CheckboxGroup
-      legend="Hvor vil du sitte?"
-      onChange={(val: any[]) => handleChange(val)}
+      legend="Transportmiddel"
+      onChange={handleChange}
+      value={["taxi"]}
      disabled
    >
-      <Checkbox value="Bakerst">Bakerst</Checkbox>
-      <Checkbox value="Midterst">Midterst</Checkbox>
-      <Checkbox value="Fremst">Fremst</Checkbox>
+      <Checkbox value="car">Bil</Checkbox>
+      <Checkbox value="taxi">Drosje</Checkbox>
+      <Checkbox value="public">Kollektivt</Checkbox>
    </CheckboxGroup>
  );
 };
@@ -27,4 +28,5 @@ export const Demo = {

 export const args = {
  index: 99,
+  desc: "Vi fraråder bruk av disabled state. Vurder om du trenger å vise feltet i det hele tatt, om du heller kan bruke 'readOnly', eller bare kan skrive det ut i ren tekst.",
 };
@@ -2,17 +2,17 @@ import { Checkbox, CheckboxGroup } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
-  const handleChange = (val: any[]) => console.log(val);
+  const handleChange = (val: string[]) => console.log(val);

  return (
    <CheckboxGroup
-      legend="Hvor vil du sitte?"
-      onChange={(val: any[]) => handleChange(val)}
-      error="Feilmelding"
+      legend="Transportmiddel"
+      onChange={handleChange}
+      error="Du må velge minst ett transportmiddel."
    >
-      <Checkbox value="Bakerst">Bakerst</Checkbox>
-      <Checkbox value="Midterst">Midterst</Checkbox>
-      <Checkbox value="Fremst">Fremst</Checkbox>
+      <Checkbox value="car">Bil</Checkbox>
+      <Checkbox value="taxi">Drosje</Checkbox>
+      <Checkbox value="public">Kollektivt</Checkbox>
    </CheckboxGroup>
  );
 };
@@ -3,8 +3,8 @@ import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  return (
-    <Checkbox hideLabel value="Midterst">
-      Midterst
+    <Checkbox hideLabel value="car">
+      Bil
    </Checkbox>
  );
 };
@@ -19,4 +19,5 @@ export const Demo = {

 export const args = {
  index: 3,
+  desc: "Label må være meningsfull selv om den skjules, siden den fortsatt leses av skjermlesere.",
 };
@@ -2,17 +2,13 @@ import { Checkbox, CheckboxGroup } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
-  const handleChange = (val: any[]) => console.log(val);
+  const handleChange = (val: string[]) => console.log(val);

  return (
-    <CheckboxGroup
-      legend="Hvor vil du sitte?"
-      hideLegend
-      onChange={(val: any[]) => handleChange(val)}
-    >
-      <Checkbox value="Bakerst">Bakerst</Checkbox>
-      <Checkbox value="Midterst">Midterst</Checkbox>
-      <Checkbox value="Fremst">Fremst</Checkbox>
+    <CheckboxGroup legend="Transportmiddel" hideLegend onChange={handleChange}>
+      <Checkbox value="car">Bil</Checkbox>
+      <Checkbox value="taxi">Drosje</Checkbox>
+      <Checkbox value="public">Kollektivt</Checkbox>
    </CheckboxGroup>
  );
 };
@@ -27,4 +23,5 @@ export const Demo = {

 export const args = {
  index: 4,
+  desc: "Legend må være meningsfull selv om den skjules, siden den fortsatt leses av skjermlesere.",
 };
@@ -1,23 +1,105 @@
-import { Checkbox, CheckboxGroup } from "@navikt/ds-react";
+import { useState } from "react";
+import { Checkbox, Table } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
-  const handleChange = (val: any[]) => console.log(val);
+  const [selectedRows, setSelectedRows] = useState<string[]>(["18124441438"]);
+
+  const toggleSelectedRow = (value) =>
+    setSelectedRows((list) =>
+      list.includes(value)
+        ? list.filter((id) => id !== value)
+        : [...list, value],
+    );

  return (
-    <CheckboxGroup
-      legend="Hvor vil du sitte?"
-      onChange={(val: any[]) => handleChange(val)}
-    >
-      <Checkbox value="Bakerst">Bakerst</Checkbox>
-      <Checkbox value="Midterst" indeterminate>
-        Midterst
-      </Checkbox>
-      <Checkbox value="Fremst">Fremst</Checkbox>
-    </CheckboxGroup>
+    <Table>
+      <Table.Header>
+        <Table.Row>
+          <Table.DataCell>
+            <Checkbox
+              checked={selectedRows.length === data.length}
+              indeterminate={
+                selectedRows.length > 0 && selectedRows.length !== data.length
+              }
+              onChange={() => {
+                selectedRows.length
+                  ? setSelectedRows([])
+                  : setSelectedRows(data.map(({ fnr }) => fnr));
+              }}
+              hideLabel
+            >
+              Velg alle rader
+            </Checkbox>
+          </Table.DataCell>
+
+          <Table.HeaderCell scope="col">Navn</Table.HeaderCell>
+          <Table.HeaderCell scope="col">Fødselsnr.</Table.HeaderCell>
+          <Table.HeaderCell scope="col">Start</Table.HeaderCell>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {data.map(({ name, fnr, start }, i) => {
+          return (
+            <Table.Row key={i + fnr} selected={selectedRows.includes(fnr)}>
+              <Table.DataCell>
+                <Checkbox
+                  hideLabel
+                  checked={selectedRows.includes(fnr)}
+                  onChange={() => toggleSelectedRow(fnr)}
+                  aria-labelledby={`id-${fnr}`}
+                >
+                  {" "}
+                </Checkbox>
+              </Table.DataCell>
+              <Table.HeaderCell scope="row">
+                <span id={`id-${fnr}`}>{name}</span>
+              </Table.HeaderCell>
+              <Table.DataCell>{fnr}</Table.DataCell>
+              <Table.DataCell>{format(new Date(start))}</Table.DataCell>
+            </Table.Row>
+          );
+        })}
+      </Table.Body>
+    </Table>
  );
 };

+const format = (date: Date) => {
+  const y = date.getFullYear();
+  const m = (date.getMonth() + 1).toString().padStart(2, "0");
+  const d = date.getDate().toString().padStart(2, "0");
+  return `${d}.${m}.${y}`;
+};
+
+const data = [
+  {
+    name: "Jakobsen, Markus",
+    fnr: "03129265463",
+    start: "2020-04-28T19:12:14.358Z",
+  },
+  {
+    name: "Halvorsen, Mari",
+    fnr: "16063634134",
+    start: "2022-01-29T09:51:19.833Z",
+  },
+  {
+    name: "Christiansen, Mathias",
+    fnr: "18124441438",
+    start: "2021-06-04T20:57:29.159Z",
+  },
+  {
+    name: "Fredriksen, Leah",
+    fnr: "24089080180",
+    start: "2015-08-31T15:47:36.293Z",
+  },
+  {
+    name: "Evensen, Jonas",
+    fnr: "18106248460",
+    start: "2010-07-17T11:13:26.116Z",
+  },
+];
+
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);

@@ -2,16 +2,13 @@ import { Checkbox, CheckboxGroup } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
-  const handleChange = (val: any[]) => console.log(val);
+  const handleChange = (val: string[]) => console.log(val);

  return (
-    <CheckboxGroup
-      legend="Hvor vil du sitte?"
-      onChange={(val: any[]) => handleChange(val)}
-    >
-      <Checkbox value="Bakerst">Bakerst</Checkbox>
-      <Checkbox value="Midterst">Midterst</Checkbox>
-      <Checkbox value="Fremst">Fremst</Checkbox>
+    <CheckboxGroup legend="Transportmiddel" onChange={handleChange}>
+      <Checkbox value="car">Bil</Checkbox>
+      <Checkbox value="taxi">Drosje</Checkbox>
+      <Checkbox value="public">Kollektivt</Checkbox>
    </CheckboxGroup>
  );
 };
@@ -2,18 +2,18 @@ import { Checkbox, CheckboxGroup } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
-  const handleChange = (val: any[]) => console.log(val);
+  const handleChange = (val: string[]) => console.log(val);

  return (
    <CheckboxGroup
-      legend="Hvor vil du sitte?"
-      onChange={(val: any[]) => handleChange(val)}
-      value={["Midterst"]}
+      legend="Transportmiddel"
+      onChange={handleChange}
+      value={["taxi"]}
      readOnly
    >
-      <Checkbox value="Bakerst">Bakerst</Checkbox>
-      <Checkbox value="Midterst">Midterst</Checkbox>
-      <Checkbox value="Fremst">Fremst</Checkbox>
+      <Checkbox value="car">Bil</Checkbox>
+      <Checkbox value="taxi">Drosje</Checkbox>
+      <Checkbox value="public">Kollektivt</Checkbox>
    </CheckboxGroup>
  );
 };
@@ -28,4 +28,5 @@ export const Demo = {

 export const args = {
  index: 98,
+  desc: "Readonly-attributtet gjør at valgene ikke kan endres, men brukere vil fortsatt kunne markere og kopiere teksten. Til forskjell fra disabled vil brukere også kunne tabbe til det, og feltet vil inkluderes når skjemaet sendes inn.",
 };
@@ -1,31 +0,0 @@
-import { Checkbox, CheckboxGroup } from "@navikt/ds-react";
-import { withDsExample } from "@/web/examples/withDsExample";
-
-const Example = () => {
-  const handleChange = (val: any[]) => console.log(val);
-
-  return (
-    <CheckboxGroup
-      legend="Hvor vil du sitte?"
-      onChange={(val: any[]) => handleChange(val)}
-    >
-      <Checkbox value="Bakerst">Bakerst</Checkbox>
-      <Checkbox error value="Midterst">
-        Midterst
-      </Checkbox>
-      <Checkbox value="Fremst">Fremst</Checkbox>
-    </CheckboxGroup>
-  );
-};
-
-// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example);
-
-/* Storybook story */
-export const Demo = {
-  render: Example,
-};
-
-export const args = {
-  index: 7,
-};
@@ -2,17 +2,17 @@ import { Checkbox, CheckboxGroup } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
-  const handleChange = (val: any[]) => console.log(val);
+  const handleChange = (val: string[]) => console.log(val);

  return (
    <CheckboxGroup
-      legend="Hvor vil du sitte?"
-      onChange={(val: any[]) => handleChange(val)}
+      legend="Transportmiddel"
+      onChange={handleChange}
      size="small"
    >
-      <Checkbox value="Bakerst">Bakerst</Checkbox>
-      <Checkbox value="Midterst">Midterst</Checkbox>
-      <Checkbox value="Fremst">Fremst</Checkbox>
+      <Checkbox value="car">Bil</Checkbox>
+      <Checkbox value="taxi">Drosje</Checkbox>
+      <Checkbox value="public">Kollektivt</Checkbox>
    </CheckboxGroup>
  );
 };
@@ -27,4 +27,5 @@ export const Demo = {

 export const args = {
  index: 1,
+  desc: "Small brukes på interne flater der det er behov for et mer komprimert grensesnitt.",
 };
@@ -41,7 +41,10 @@ const Example = () => {
                as="li"
                key={index}
                file={file.file}
-                onDelete={() => removeFile(file)}
+                button={{
+                  action: "delete",
+                  onClick: () => removeFile(file),
+                }}
              />
            ))}
          </VStack>
@@ -59,7 +62,10 @@ const Example = () => {
                key={index}
                file={rejected.file}
                error={errors[rejected.reasons[0]]}
-                onDelete={() => removeFile(rejected)}
+                button={{
+                  action: "delete",
+                  onClick: () => removeFile(rejected),
+                }}
              />
            ))}
          </VStack>
@@ -7,8 +7,10 @@ const Example = () => (
      <Heading size="small">retry</Heading>
      <UNSAFE_FileUpload.Item
        file={new File(["abc".repeat(100000)], "eksempel1.pdf")}
-        onRetry={() => null}
-        itemAction="retry"
+        button={{
+          action: "retry",
+          onClick: () => null,
+        }}
      />
    </div>
    <div>
@@ -16,8 +18,10 @@ const Example = () => (
      <UNSAFE_FileUpload.Item
        file={{ name: "eksempel2.pdf", size: 200000 }}
        href="#"
-        onDelete={() => null}
-        itemAction="delete"
+        button={{
+          action: "delete",
+          onClick: () => null,
+        }}
      />
    </div>
  </VStack>
@@ -17,7 +17,10 @@ const Example = () => {
        <UNSAFE_FileUpload.Item
          key={file.file.name}
          file={file.file}
-          onDelete={() => setFiles([])}
+          button={{
+            action: "delete",
+            onClick: () => setFiles([]),
+          }}
        />
      ))}
    </VStack>
@@ -2,12 +2,12 @@ import { Radio, RadioGroup } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
-  const handleChange = (val: any) => console.log(val);
+  const handleChange = (val: string) => console.log(val);

  return (
    <RadioGroup
      legend="Velg din aldersgruppe."
-      onChange={(val: any) => handleChange(val)}
+      onChange={handleChange}
      description="Informasjonen blir brukt for å gi deg bedre søketreff."
    >
      <Radio value="10">10-20 år</Radio>
@@ -2,12 +2,12 @@ import { Radio, RadioGroup } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
-  const handleChange = (val: any) => console.log(val);
+  const handleChange = (val: string) => console.log(val);

  return (
    <RadioGroup
      legend="Velg din aldersgruppe."
-      onChange={(val: any) => handleChange(val)}
+      onChange={handleChange}
      disabled
    >
      <Radio value="10">10-20 år</Radio>
@@ -27,4 +27,5 @@ export const Demo = {

 export const args = {
  index: 99,
+  desc: "Vi fraråder bruk av disabled state. Vurder om du trenger å vise feltet i det hele tatt, om du heller kan bruke 'readOnly', eller bare kan skrive det ut i ren tekst.",
 };
@@ -2,12 +2,12 @@ import { Radio, RadioGroup } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
-  const handleChange = (val: any) => console.log(val);
+  const handleChange = (val: string) => console.log(val);

  return (
    <RadioGroup
      legend="Velg din aldersgruppe."
-      onChange={(val: any) => handleChange(val)}
+      onChange={handleChange}
      hideLegend
    >
      <Radio value="10">10-20 år</Radio>
@@ -27,4 +27,5 @@ export const Demo = {

 export const args = {
  index: 4,
+  desc: "Legend må være meningsfull selv om den skjules, siden den fortsatt leses av skjermlesere.",
 };
@@ -2,13 +2,10 @@ import { Radio, RadioGroup } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
-  const handleChange = (val: any) => console.log(val);
+  const handleChange = (val: string) => console.log(val);

  return (
-    <RadioGroup
-      legend="Velg din aldersgruppe."
-      onChange={(val: any) => handleChange(val)}
-    >
+    <RadioGroup legend="Velg din aldersgruppe." onChange={handleChange}>
      <Radio value="10">10-20 år</Radio>
      <Radio value="20">21-45 år</Radio>
      <Radio value="40">46-80 år</Radio>
@@ -2,13 +2,10 @@ import { Radio, RadioGroup } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
-  const handleChange = (val: any) => console.log(val);
+  const handleChange = (val: string) => console.log(val);

  return (
-    <RadioGroup
-      legend="Velg din aldersgruppe."
-      onChange={(val: any) => handleChange(val)}
-    >
+    <RadioGroup legend="Velg din aldersgruppe." onChange={handleChange}>
      <Radio value="10">10-20 år</Radio>
      <Radio value="20" description="Gjelder fra året man blir 21">
        21-45 år
@@ -2,12 +2,12 @@ import { Radio, RadioGroup } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
-  const handleChange = (val: any) => console.log(val);
+  const handleChange = (val: string) => console.log(val);

  return (
    <RadioGroup
      legend="Velg din aldersgruppe."
-      onChange={(val: any) => handleChange(val)}
+      onChange={handleChange}
      value="20"
      readOnly
    >
@@ -28,4 +28,5 @@ export const Demo = {

 export const args = {
  index: 98,
+  desc: "Readonly-attributtet gjør at valget ikke kan endres, men brukere vil fortsatt kunne markere og kopiere teksten. Til forskjell fra disabled vil brukere også kunne tabbe til det, og feltet vil inkluderes når skjemaet sendes inn.",
 };
@@ -2,12 +2,12 @@ import { Radio, RadioGroup } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
-  const handleChange = (val: any) => console.log(val);
+  const handleChange = (val: string) => console.log(val);

  return (
    <RadioGroup
      legend="Velg din aldersgruppe."
-      onChange={(val: any) => handleChange(val)}
+      onChange={handleChange}
      size="small"
    >
      <Radio value="10">10-20 år</Radio>
@@ -27,4 +27,5 @@ export const Demo = {

 export const args = {
  index: 1,
+  desc: "Small brukes på interne flater der det er behov for et mer komprimert grensesnitt.",
 };
@@ -22,4 +22,5 @@ export const Demo = {

 export const args = {
  index: 99,
+  desc: "Vi fraråder bruk av disabled state. Vurder om du trenger å vise feltet i det hele tatt, om du heller kan bruke 'readOnly', eller bare kan skrive det ut i ren tekst.",
 };
@@ -13,59 +13,55 @@ const Example = () => {
    );

  return (
-    <>
-      <Table>
-        <Table.Header>
-          <Table.Row>
-            <Table.DataCell>
-              <Checkbox
-                checked={selectedRows.length === data.length}
-                indeterminate={
-                  selectedRows.length > 0 && selectedRows.length !== data.length
-                }
-                onChange={() => {
-                  selectedRows.length
-                    ? setSelectedRows([])
-                    : setSelectedRows(data.map(({ fnr }) => fnr));
-                }}
-                hideLabel
-              >
-                Velg alle rader
-              </Checkbox>
-            </Table.DataCell>
+    <Table>
+      <Table.Header>
+        <Table.Row>
+          <Table.DataCell>
+            <Checkbox
+              checked={selectedRows.length === data.length}
+              indeterminate={
+                selectedRows.length > 0 && selectedRows.length !== data.length
+              }
+              onChange={() => {
+                selectedRows.length
+                  ? setSelectedRows([])
+                  : setSelectedRows(data.map(({ fnr }) => fnr));
+              }}
+              hideLabel
+            >
+              Velg alle rader
+            </Checkbox>
+          </Table.DataCell>

-            <Table.HeaderCell scope="col">Navn</Table.HeaderCell>
-            <Table.HeaderCell scope="col">Fødselsnr.</Table.HeaderCell>
-            <Table.HeaderCell scope="col">Start</Table.HeaderCell>
-          </Table.Row>
-        </Table.Header>
-        <Table.Body>
-          {data.map(({ name, fnr, start }, i) => {
-            return (
-              <Table.Row key={i + fnr} selected={selectedRows.includes(fnr)}>
-                <Table.DataCell>
-                  <Checkbox
-                    hideLabel
-                    checked={selectedRows.includes(fnr)}
-                    onChange={() => {
-                      toggleSelectedRow(fnr);
-                    }}
-                    aria-labelledby={`id-${fnr}`}
-                  >
-                    {" "}
-                  </Checkbox>
-                </Table.DataCell>
-                <Table.HeaderCell scope="row">
-                  <span id={`id-${fnr}`}>{name}</span>
-                </Table.HeaderCell>
-                <Table.DataCell>{fnr}</Table.DataCell>
-                <Table.DataCell>{format(new Date(start))}</Table.DataCell>
-              </Table.Row>
-            );
-          })}
-        </Table.Body>
-      </Table>
-    </>
+          <Table.HeaderCell scope="col">Navn</Table.HeaderCell>
+          <Table.HeaderCell scope="col">Fødselsnr.</Table.HeaderCell>
+          <Table.HeaderCell scope="col">Start</Table.HeaderCell>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {data.map(({ name, fnr, start }, i) => {
+          return (
+            <Table.Row key={i + fnr} selected={selectedRows.includes(fnr)}>
+              <Table.DataCell>
+                <Checkbox
+                  hideLabel
+                  checked={selectedRows.includes(fnr)}
+                  onChange={() => toggleSelectedRow(fnr)}
+                  aria-labelledby={`id-${fnr}`}
+                >
+                  {" "}
+                </Checkbox>
+              </Table.DataCell>
+              <Table.HeaderCell scope="row">
+                <span id={`id-${fnr}`}>{name}</span>
+              </Table.HeaderCell>
+              <Table.DataCell>{fnr}</Table.DataCell>
+              <Table.DataCell>{format(new Date(start))}</Table.DataCell>
+            </Table.Row>
+          );
+        })}
+      </Table.Body>
+    </Table>
  );
 };

@@ -15,4 +15,5 @@ export const Demo = {

 export const args = {
  index: 99,
+  desc: "Vi fraråder bruk av disabled state. Vurder om du trenger å vise feltet i det hele tatt, om du heller kan bruke 'readOnly', eller bare kan skrive det ut i ren tekst.",
 };
@@ -256,7 +256,7 @@ const Page = ({
                  <BodyShort as="span" className="text-text-subtle">
                    Publisert: {publishDate}
                  </BodyShort>
-                  <Feedback userState={userState} />
+                  {userState && <Feedback userState={userState} />}
                </div>
              </div>
            </div>
@@ -3360,7 +3360,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@navikt/aksel-icons@^6.3.4, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@^6.3.6, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
  version: 0.0.0-use.local
  resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
  dependencies:
@@ -3388,8 +3388,8 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint"
  dependencies:
-    "@navikt/ds-css": ^6.3.4
-    "@navikt/ds-tokens": ^6.3.4
+    "@navikt/ds-css": ^6.3.6
+    "@navikt/ds-tokens": ^6.3.6
    concurrently: 7.2.1
    postcss-selector-parser: ^6.0.13
    postcss-value-parser: ^4.2.0
@@ -3404,7 +3404,7 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "@navikt/aksel@workspace:@navikt/aksel"
  dependencies:
-    "@navikt/ds-css": 6.3.4
+    "@navikt/ds-css": 6.3.6
    axios: 1.6.0
    chalk: 4.1.0
    clipboardy: ^2.3.0
@@ -3425,11 +3425,11 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-css@*, @navikt/ds-css@6.3.4, @navikt/ds-css@^6.3.4, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@*, @navikt/ds-css@6.3.6, @navikt/ds-css@^6.3.6, @navikt/ds-css@workspace:@navikt/core/css":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-css@workspace:@navikt/core/css"
  dependencies:
-    "@navikt/ds-tokens": ^6.3.4
+    "@navikt/ds-tokens": ^6.3.6
    cssnano: 6.0.0
    fast-glob: 3.2.11
    lodash: 4.17.21
@@ -3442,13 +3442,13 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-react@*, @navikt/ds-react@^6.3.4, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@*, @navikt/ds-react@^6.3.6, @navikt/ds-react@workspace:@navikt/core/react":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-react@workspace:@navikt/core/react"
  dependencies:
    "@floating-ui/react": 0.25.4
-    "@navikt/aksel-icons": ^6.3.4
-    "@navikt/ds-tokens": ^6.3.4
+    "@navikt/aksel-icons": ^6.3.6
+    "@navikt/ds-tokens": ^6.3.6
    "@radix-ui/react-tabs": 1.0.0
    "@radix-ui/react-toggle-group": 1.0.0
    "@testing-library/dom": 8.13.0
@@ -3480,11 +3480,11 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-tailwind@^6.3.4, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^6.3.6, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
  dependencies:
-    "@navikt/ds-tokens": ^6.3.4
+    "@navikt/ds-tokens": ^6.3.6
    color: 4.2.3
    lodash: ^4.17.21
    tailwindcss: ^3.3.3
@@ -3494,7 +3494,7 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-tokens@^6.3.4, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^6.3.6, @navikt/ds-tokens@workspace:@navikt/core/tokens":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
  dependencies:
@@ -8177,11 +8177,11 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "aksel.nav.no@workspace:aksel.nav.no"
  dependencies:
-    "@navikt/aksel-icons": ^6.3.4
-    "@navikt/ds-css": ^6.3.4
-    "@navikt/ds-react": ^6.3.4
-    "@navikt/ds-tailwind": ^6.3.4
-    "@navikt/ds-tokens": ^6.3.4
+    "@navikt/aksel-icons": ^6.3.6
+    "@navikt/ds-css": ^6.3.6
+    "@navikt/ds-react": ^6.3.6
+    "@navikt/ds-tailwind": ^6.3.6
+    "@navikt/ds-tokens": ^6.3.6
  languageName: unknown
  linkType: soft
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	2364e689ed	Version Packages (#2831 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-04-09 09:12:06 +02:00
Halvor Haugan	d57c0b2c2c	Justering av eksempler på Checkbox (#2833 )	2024-04-09 09:06:58 +02:00
Ken	868bb543a5	🐛 Preview brakk for god-praksis Siden 'userState' ikke hentes fra Sanity, blir den undefined ved lasting av previewdata	2024-04-09 07:33:16 +02:00
Torkjel SkjetneandHalvor Haugan	8f9ed7a404	FileUpload.Item: 💥 Endret API og støtte for å sette ID på knappen (#2824 ) Co-authored-by: Halvor Haugan <halvor.haugan@nav.no>	2024-04-08 09:16:53 +02:00
Halvor HauganandKen	5ea6255f6d	Justeringer av eksempler på Radio og Checkbox med mer (#2830 ) Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2024-04-04 20:54:12 +02:00