Version Packages (#2831)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.storybook/main.ts

@@ -1,4 +1,3 @@
-import { mergeConfig } from "vite";
 import turbosnap from "vite-plugin-turbosnap";
 
 export default {
@@ -7,7 +6,7 @@ export default {
   stories: () => ["../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)", "./*.mdx"],
   addons: [
     "@storybook/addon-a11y",
-    "@xfinx/storybook-addon-html",
+    "@whitespace/storybook-addon-html",
     "@storybook/addon-interactions",
     {
       name: "@storybook/addon-storysource",
@@ -42,6 +41,7 @@ export default {
   },
 
   async viteFinal(config, { configType }) {
+    const { mergeConfig } = await import("vite");
     return mergeConfig(config, {
       plugins:
         configType === "PRODUCTION"

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/aksel-icons
 
+## 6.4.0
+
+## 6.3.6
+
+## 6.3.5
+
 ## 6.3.4
 
 ## 6.3.3

@navikt/aksel-icons/icons.stories.tsx

@@ -3,12 +3,12 @@ import React from "react";
 import * as AkselIcons from "@navikt/aksel-icons";
 import { StarFillIcon } from "@navikt/aksel-icons";
 
-const meta = {
+const meta: Meta<typeof StarFillIcon> = {
   title: "aksel-icons/Icons",
-} satisfies Meta<typeof StarFillIcon>;
-
+};
 export default meta;
-type Story = StoryObj<typeof meta>;
+
+type Story = StoryObj<typeof StarFillIcon>;
 
 export const Icons: Story = {
   render: () => {

@navikt/aksel-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "6.3.4",
+  "version": "6.4.0",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/aksel-stylelint
 
+## 6.4.0
+
+## 6.3.6
+
+## 6.3.5
+
 ## 6.3.4
 
 ## 6.3.3

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "6.3.4",
+  "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.4",
-    "@navikt/ds-tokens": "^6.3.4",
+    "@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",

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @navikt/aksel
 
+## 6.4.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@6.4.0
+
+## 6.3.6
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@6.3.6
+
+## 6.3.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@6.3.5
+
 ## 6.3.4
 
 ### Patch Changes

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "6.3.4",
+  "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.4",
+    "@navikt/ds-css": "6.4.0",
     "axios": "1.6.0",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-css
 
+## 6.4.0
+
+## 6.3.6
+
+## 6.3.5
+
 ## 6.3.4
 
 ### Patch Changes

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "6.3.4",
+  "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.4",
+    "@navikt/ds-tokens": "^6.4.0",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",
     "lodash": "4.17.21",

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @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
+
+- DatePicker: Fjernet role gridcell fra dato-knapper. ([#2826](https://github.com/navikt/aksel/pull/2826))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@6.3.6
+  - @navikt/aksel-icons@6.3.6
+
+## 6.3.5
+
+### Patch Changes
+
+- Modal: Fjern tomt element ([#2819](https://github.com/navikt/aksel/pull/2819))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@6.3.5
+  - @navikt/aksel-icons@6.3.5
+
 ## 6.3.4
 
 ### Patch Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "6.3.4",
+  "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.4",
-    "@navikt/ds-tokens": "^6.3.4",
+    "@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",

@navikt/core/react/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;
   /**

@navikt/core/react/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}
     />

@navikt/core/react/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>
  * ```
  */

@navikt/core/react/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;
 }

@navikt/core/react/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;

@navikt/core/react/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>
   ),

@navikt/core/react/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 }}

@navikt/core/react/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>

@navikt/core/react/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;

@navikt/core/react/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

@navikt/core/react/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;
 }

@navikt/core/react/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;
   /**

@navikt/core/react/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>
   ),

@navikt/core/react/src/modal/Modal.tsx

@@ -238,7 +238,11 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
                 level="1"
                 id={ariaLabelId}
               >
-                <span className="navds-modal__header-icon">{header.icon}</span>
+                {header.icon && (
+                  <span className="navds-modal__header-icon">
+                    {header.icon}
+                  </span>
+                )}
                 {header.heading}
               </Heading>
             </ModalHeader>

@navikt/core/react/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.";

@navikt/core/react/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.";
 

@navikt/core/react/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.";
 

@navikt/core/react/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";

@navikt/core/react/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?";
 

@navikt/core/react/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";

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-tailwind
 
+## 6.4.0
+
+## 6.3.6
+
+## 6.3.5
+
 ## 6.3.4
 
 ## 6.3.3

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "6.3.4",
+  "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.4",
+    "@navikt/ds-tokens": "^6.4.0",
     "color": "4.2.3",
     "lodash": "^4.17.21",
     "tailwindcss": "^3.3.3",

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-tokens
 
+## 6.4.0
+
+## 6.3.6
+
+## 6.3.5
+
 ## 6.3.4
 
 ## 6.3.3

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "6.3.4",
+  "version": "6.4.0",
   "description": "Design-tokens for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [

CHANGELOG.md

@@ -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
@@ -10,6 +16,10 @@
 
 ### @navikt/ds-react
 
+- DatePicker: Fjernet role gridcell fra dato-knapper. ([#2826](https://github.com/navikt/aksel/pull/2826))
+
+* Modal: Fjern tomt element ([#2819](https://github.com/navikt/aksel/pull/2819))
+
 - Switch: Fikset edgecase der checked Switch var visuelt unchecked ([#2810](https://github.com/navikt/aksel/pull/2810))
 
 - FileUpload.Dropzone: id prop settes på button ([#2817](https://github.com/navikt/aksel/pull/2817))
@@ -28,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
@@ -60,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
 
@@ -76,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))
@@ -104,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
 
@@ -158,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
@@ -224,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))
@@ -244,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
 
@@ -290,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))
@@ -308,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))
@@ -370,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))
@@ -410,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
 
@@ -466,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
@@ -514,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))
@@ -550,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
 
@@ -572,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
@@ -785,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))
@@ -831,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
 
@@ -845,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))
@@ -879,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
@@ -935,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))
@@ -953,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
@@ -989,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))
@@ -1001,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
 
@@ -1047,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`
@@ -1075,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
@@ -1171,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))
@@ -1187,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))

aksel.nav.no/package.json

@@ -15,10 +15,10 @@
     "playroom"
   ],
   "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.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"
   }
 }

aksel.nav.no/website/.storybook/main.ts

@@ -12,10 +12,10 @@ function getAbsolutePath(value: string): any {
 }
 
 const config: StorybookConfig = {
-  storyIndexers: (indexers) => {
+  experimental_indexers: (indexers) => {
     const csfIndexer = async (fileName: string, opts) => {
       const code = readFileSync(fileName, "utf-8").toString();
-      return loadCsf(code, { ...opts, fileName }).parse();
+      return loadCsf(code, { ...opts, fileName }).parse().indexInputs;
     };
 
     const exampleIndexer = async (fileName: string, opts) => {
@@ -32,18 +32,18 @@ const config: StorybookConfig = {
         .split("pages/eksempler/")[1]
         .replace(".tsx", "")}"  };\n`;
 
-      return loadCsf(code, { ...opts, fileName }).parse();
+      return loadCsf(code, { ...opts, fileName }).parse().indexInputs;
     };
 
     return [
       ...(indexers || []),
       {
         test: /(stories|story)\.[tj]sx?$/,
-        indexer: csfIndexer,
+        createIndex: csfIndexer,
       },
       {
         test: /pages\/eksempler\/|(".+")|(.+.tsx)$/,
-        indexer: exampleIndexer,
+        createIndex: exampleIndexer,
       },
     ];
   },

aksel.nav.no/website/components/layout/footer/Footer.tsx

@@ -32,7 +32,7 @@ const Footer = () => {
             heading="Snarveier"
             links={[
               {
-                url: "/god-praksis/artikler/skriv-for-aksel",
+                url: "/side/skriv-for-aksel",
                 text: "Skriv for Aksel",
               },
               {
@@ -50,7 +50,7 @@ const Footer = () => {
             heading="Om nettstedet"
             links={[
               {
-                url: "/god-praksis/artikler/om-aksel",
+                url: "/side/om-aksel",
                 text: "Hva er Aksel?",
               },
               {

aksel.nav.no/website/components/sanity-modules/cards/BloggCard.tsx

@@ -15,7 +15,7 @@ const BloggCard = ({ blog }: BloggCardProps) => {
   return (
     <li
       key={blog._id}
-      className="flex h-full flex-col place-content-start border-b border-b-border-subtle pb-8"
+      className="flex h-full flex-col place-content-start border-b border-b-border-subtle pb-10"
     >
       <Heading size="medium" as="div">
         <NextLink href={`/${blog.slug}`} passHref legacyBehavior>
@@ -32,7 +32,7 @@ const BloggCard = ({ blog }: BloggCardProps) => {
           </Link>
         </NextLink>
       </Heading>
-      <BodyLong className="my-2">{blog?.ingress}</BodyLong>
+      <BodyLong className="my-2 line-clamp-2">{blog?.ingress}</BodyLong>
       {getAuthors(blog).length > 0 && (
         <BodyShort
           size="small"

aksel.nav.no/website/pages/eksempler/button/disabled.tsx

@@ -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.",
 };

aksel.nav.no/website/pages/eksempler/checkbox/checkbox-description.tsx

@@ -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>
   );

aksel.nav.no/website/pages/eksempler/checkbox/controlled.tsx

@@ -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>
   );
 };

aksel.nav.no/website/pages/eksempler/checkbox/description.tsx

@@ -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>
   );
 };

aksel.nav.no/website/pages/eksempler/checkbox/disabled.tsx

@@ -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.",
 };

aksel.nav.no/website/pages/eksempler/checkbox/group-error.tsx

@@ -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>
   );
 };

aksel.nav.no/website/pages/eksempler/checkbox/hide-labels.tsx

@@ -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.",
 };

aksel.nav.no/website/pages/eksempler/checkbox/hide-legend.tsx

@@ -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.",
 };

aksel.nav.no/website/pages/eksempler/checkbox/indeterminate.tsx

@@ -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);
 

aksel.nav.no/website/pages/eksempler/checkbox/medium.tsx

@@ -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>
   );
 };

aksel.nav.no/website/pages/eksempler/checkbox/readonly.tsx

@@ -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.",
 };

aksel.nav.no/website/pages/eksempler/checkbox/single-error.tsx

@@ -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,
-};

aksel.nav.no/website/pages/eksempler/checkbox/small.tsx

@@ -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.",
 };

aksel.nav.no/website/pages/eksempler/file-upload/default.tsx

@@ -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>

aksel.nav.no/website/pages/eksempler/file-upload/item-actions.tsx

@@ -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>

aksel.nav.no/website/pages/eksempler/file-upload/single.tsx

@@ -17,7 +17,10 @@ const Example = () => {
         <UNSAFE_FileUpload.Item
           key={file.file.name}
           file={file.file}
-          onDelete={() => setFiles([])}
+          button={{
+            action: "delete",
+            onClick: () => setFiles([]),
+          }}
         />
       ))}
     </VStack>

aksel.nav.no/website/pages/eksempler/radio/description.tsx

@@ -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>

aksel.nav.no/website/pages/eksempler/radio/disabled.tsx

@@ -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.",
 };

aksel.nav.no/website/pages/eksempler/radio/hide-legend.tsx

@@ -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.",
 };

aksel.nav.no/website/pages/eksempler/radio/medium.tsx

@@ -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>

aksel.nav.no/website/pages/eksempler/radio/radio-description.tsx

@@ -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

aksel.nav.no/website/pages/eksempler/radio/readonly.tsx

@@ -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.",
 };

aksel.nav.no/website/pages/eksempler/radio/small.tsx

@@ -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.",
 };

aksel.nav.no/website/pages/eksempler/select/disabled.tsx

@@ -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.",
 };

aksel.nav.no/website/pages/eksempler/table/selectable.tsx

@@ -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>
   );
 };
 

aksel.nav.no/website/pages/eksempler/textfield/disabled.tsx

@@ -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.",
 };

aksel.nav.no/website/pages/god-praksis/artikler/[slug].tsx

@@ -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>

aksel.nav.no/website/pages/produktbloggen/[slug].tsx

@@ -17,7 +17,6 @@ import {
 } from "@/types";
 import { abbrName, dateStr, getImage } from "@/utils";
 import { BloggAd } from "@/web/BloggAd";
-import { AkselCubeStatic } from "@/web/aksel-cube/AkselCube";
 import { SEO } from "@/web/seo/SEO";
 import NotFotfund from "../404";
 
@@ -165,7 +164,6 @@ const Page = ({ blogg, morePosts, publishDate }: PageProps["props"]) => {
           </div>
         </div>
         <div className="relative mt-16">
-          <AkselCubeStatic className="z-0 text-amber-300 opacity-20" />
           <div className="relative z-10 mt-8 px-4">
             <SanityBlockContent
               className="dynamic-wrapper-prose"

aksel.nav.no/website/pages/produktbloggen/index.tsx

@@ -14,7 +14,6 @@ import {
   ResolveSlugT,
 } from "@/types";
 import { BloggAd } from "@/web/BloggAd";
-import { AkselCubeStatic } from "@/web/aksel-cube/AkselCube";
 import { LatestBloggposts } from "@/web/blogg-page/BloggPage";
 import { SEO } from "@/web/seo/SEO";
 import NotFotfund from "../404";
@@ -80,7 +79,6 @@ const Page = (props: PageProps["props"]) => {
           id="hovedinnhold"
           className="relative overflow-hidden focus:outline-none"
         >
-          <AkselCubeStatic className="text-[#FFE78A] opacity-10" />
           <div className="mx-auto mb-40 grid w-full max-w-screen-2xl px-4 sm:px-6">
             <LatestBloggposts
               bloggs={props?.bloggposts}

aksel.nav.no/website/sanity/schema/objects/shared/relatert-innhold.tsx

@@ -32,10 +32,7 @@ export const RelatertInnhold = defineType({
               title: "Tittel",
               name: "title",
               type: "string",
-              validation: (Rule) =>
-                Rule.required()
-                  .max(40)
-                  .error("Tittelen kan være på maks 40 tegn"),
+              validation: (Rule) => Rule.required(),
             }),
             defineField({
               title: "Intern side i Sanity",

package.json

@@ -143,23 +143,23 @@
   },
   "devDependencies": {
     "@changesets/cli": "2.26.2",
-    "@storybook/addon-a11y": "^7.6.7",
-    "@storybook/addon-essentials": "^7.6.7",
-    "@storybook/addon-interactions": "^7.6.7",
-    "@storybook/addon-storysource": "^7.6.7",
-    "@storybook/blocks": "^7.6.7",
-    "@storybook/csf-tools": "^7.6.7",
-    "@storybook/manager-api": "^7.6.7",
-    "@storybook/nextjs": "^7.6.7",
-    "@storybook/react": "^7.6.7",
-    "@storybook/react-vite": "^7.6.7",
-    "@storybook/test": "^7.6.7",
-    "@storybook/theming": "^7.6.7",
+    "@storybook/addon-a11y": "^8.0.5",
+    "@storybook/addon-essentials": "^8.0.5",
+    "@storybook/addon-interactions": "^8.0.5",
+    "@storybook/addon-storysource": "^8.0.5",
+    "@storybook/blocks": "^8.0.5",
+    "@storybook/csf-tools": "^8.0.5",
+    "@storybook/manager-api": "^8.0.5",
+    "@storybook/nextjs": "^8.0.5",
+    "@storybook/react": "^8.0.5",
+    "@storybook/react-vite": "^8.0.5",
+    "@storybook/test": "^8.0.5",
+    "@storybook/theming": "^8.0.5",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@typescript-eslint/eslint-plugin": "^6.7.3",
     "@typescript-eslint/parser": "^6.7.3",
-    "@xfinx/storybook-addon-html": "5.1.10",
+    "@whitespace/storybook-addon-html": "^6.0.4",
     "chromatic": "9.1.0",
     "concurrently": "7.2.1",
     "cross-env": "^7.0.0",
@@ -182,8 +182,8 @@
     "react-docgen-typescript": "2.2.2",
     "react-dom": "^18.0.0",
     "react-syntax-highlighter": "^15.5.0",
-    "storybook": "^7.6.7",
-    "storybook-addon-pseudo-states": "^2.1.2",
+    "storybook": "^8.0.5",
+    "storybook-addon-pseudo-states": "^3.0.1",
     "stylelint": "^14.8.5",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-standard": "^25.0.0",
@@ -194,6 +194,6 @@
     "vite-plugin-turbosnap": "^1.0.3",
     "yarn": "^1.22.10"
   },
-  "_notes": "react-syntax-highlighter is a dependency of @xfinx/storybook-addon-html",
+  "_notes": "react-syntax-highlighter is a dependency of @whitespace/storybook-addon-html",
   "packageManager": "yarn@3.2.1"
 }