Version Packages (#2090)

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

.storybook/preview.jsx

@@ -4,7 +4,7 @@ import "./layout.css";
 export const parameters = {
   options: {
     storySort: {
-      method: "",
+      method: "alphabetical",
       order: ["Intro", "ds-react", ["form"], ["Default"], "ds-icons"],
       locales: "",
     },

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/aksel-icons
 
+## 4.6.1
+
+## 4.6.0
+
 ## 4.5.0
 
 ## 4.4.2

@navikt/aksel-icons/package.json

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

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/aksel-stylelint
 
+## 4.6.1
+
+## 4.6.0
+
 ## 4.5.0
 
 ## 4.4.2

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "4.5.0",
+  "version": "4.6.1",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
   "repository": {
@@ -35,8 +35,8 @@
     "dev": "yarn watch:lint"
   },
   "devDependencies": {
-    "@navikt/ds-css": "^4.5.0",
-    "@navikt/ds-tokens": "^4.5.0",
+    "@navikt/ds-css": "^4.6.1",
+    "@navikt/ds-tokens": "^4.6.1",
     "@types/jest": "^29.0.0",
     "concurrently": "7.2.1",
     "copyfiles": "2.4.1",

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @navikt/aksel
 
+## 4.6.1
+
+### Patch Changes
+
+- Updated dependencies [[`28430f134`](https://github.com/navikt/aksel/commit/28430f13455a8ecc10447e5e1ad75625d29c4bcb)]:
+  - @navikt/ds-css@4.6.1
+
+## 4.6.0
+
+### Patch Changes
+
+- Updated dependencies [[`ae70bfa71`](https://github.com/navikt/aksel/commit/ae70bfa7192db46d8dea0dfb0222a857efc46be5)]:
+  - @navikt/ds-css@4.6.0
+
 ## 4.5.0
 
 ### Patch Changes

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "4.5.0",
+  "version": "4.6.1",
   "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": "4.5.0",
+    "@navikt/ds-css": "4.6.1",
     "axios": "1.3.6",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @navikt/ds-css
 
+## 4.6.1
+
+### Patch Changes
+
+- Skjema: Labels og Legends bruker nå inline-flex når readOnly er satt ([#2089](https://github.com/navikt/aksel/pull/2089))
+
+## 4.6.0
+
+### Minor Changes
+
+- Skjema: De fleste skjemakomponenter har nå styling for `readOnly`-state ([#2080](https://github.com/navikt/aksel/pull/2080))
+
 ## 4.5.0
 
 ### Minor Changes

@navikt/core/css/date.css

@@ -282,3 +282,9 @@
 .navds-date__popover:where(.navds-popover) {
   border: none;
 }
+
+/* Readonly */
+
+.navds-date__field--readonly .navds-date__field-button {
+  cursor: default;
+}

@navikt/core/css/form/fieldset.css

@@ -30,6 +30,10 @@
   padding: 0;
 }
 
+.navds-fieldset--readonly > :where(.navds-fieldset__legend) {
+  display: inline-flex;
+}
+
 .navds-fieldset:disabled > .navds-fieldset__legend,
 .navds-fieldset:disabled > .navds-fieldset__description {
   opacity: 0.3;

@navikt/core/css/form/form.css

@@ -36,3 +36,14 @@
 .navds-form-field__subdescription {
   color: var(--ac-form-subdescription, var(--a-text-subtle));
 }
+
+.navds-form-field--readonly > :where(.navds-form-field__label) {
+  display: inline-flex;
+}
+
+.navds-form-field__readonly-icon {
+  margin-top: var(--a-spacing-05);
+  margin-right: var(--a-spacing-2);
+  flex-shrink: 0;
+  align-self: flex-start;
+}

@navikt/core/css/form/radio-checkbox.css

@@ -22,6 +22,9 @@
   cursor: pointer;
   display: flex;
   gap: var(--a-spacing-2);
+
+  --__ac-radio-checkbox-readonly-bg: var(--a-surface-subtle);
+  --__ac-radio-checkbox-readonly-border: var(--a-border-subtle);
 }
 
 .navds-checkbox__label::before,
@@ -102,7 +105,7 @@
   background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
   width: 0.75rem;
   height: 0.25rem;
-  border-radius: 1px; /* Custom value OK */
+  border-radius: 1px;
   flex-shrink: 0;
 }
 
@@ -244,3 +247,57 @@
 .navds-radio--disabled > .navds-radio__label {
   cursor: not-allowed;
 }
+
+/* Readonly */
+.navds-checkbox--readonly > :where(.navds-checkbox__input, .navds-checkbox__label),
+.navds-radio--readonly > :where(.navds-radio__input, .navds-radio__label) {
+  cursor: default;
+}
+
+.navds-checkbox--readonly .navds-checkbox__label-text {
+  display: inline-flex;
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:hover + .navds-checkbox__label,
+.navds-radio--readonly > .navds-radio__input:hover + .navds-radio__label {
+  color: var(--a-text-default);
+}
+
+.navds-checkbox--readonly
+  > .navds-checkbox__input:not(:disabled):not(:checked):not(:indeterminate)
+  + .navds-checkbox__label::before,
+.navds-checkbox--readonly
+  > .navds-checkbox__input:hover:not(:checked):not(:indeterminate):not(:focus-visible)
+  + .navds-checkbox__label::before,
+.navds-radio--readonly > .navds-radio__input:not(:disabled):not(:checked):not(:indeterminate) + .navds-radio__label::before,
+.navds-radio--readonly
+  > .navds-radio__input:hover:not(:checked):not(:indeterminate):not(:focus-visible)
+  + .navds-radio__label::before {
+  background-color: var(--__ac-radio-checkbox-readonly-bg);
+  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
+.navds-radio--readonly > .navds-radio__input:focus-visible + .navds-radio__label::before {
+  --__ac-radio-checkbox-readonly-border: var(--a-border-subtle), var(--a-shadow-focus);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSJyZ2JhKDAsIDAsIDAsIDAuNjUpIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
+  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+  background-color: var(--__ac-radio-checkbox-readonly-bg);
+}
+
+.navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 4px var(--__ac-radio-checkbox-readonly-bg);
+  background-color: var(--a-icon-subtle);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
+  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+  background-color: var(--__ac-radio-checkbox-readonly-bg);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  background-color: var(--a-icon-subtle);
+}

@navikt/core/css/form/select.css

@@ -79,3 +79,9 @@
 .navds-select__input:disabled > option {
   color: var(--a-text-default);
 }
+
+.navds-select--readonly .navds-select__input {
+  background-color: var(--a-surface-subtle);
+  border-color: var(--a-border-subtle);
+  cursor: default;
+}

@navikt/core/css/form/switch.css

@@ -178,3 +178,44 @@
 .navds-switch__input:disabled ~ .navds-switch__label-wrapper {
   cursor: not-allowed;
 }
+
+/* Readonly */
+.navds-switch--readonly > .navds-switch__track,
+.navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track,
+.navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track,
+.navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track {
+  background-color: var(--a-surface-neutral-moderate);
+}
+
+.navds-switch--readonly > .navds-switch__label-wrapper,
+.navds-switch--readonly > .navds-switch__input {
+  cursor: default;
+}
+
+.navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__label-wrapper,
+.navds-switch--readonly .navds-switch__label-wrapper:hover {
+  color: var(--a-text-default);
+}
+
+.navds-switch--readonly .navds-switch__label {
+  display: inline-flex;
+}
+
+.navds-switch--readonly .navds-switch__thumb {
+  background-color: var(--a-surface-subtle);
+  box-shadow: 0 0 0 2px var(--a-border-default);
+}
+
+.navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+  color: var(--a-icon-subtle);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(0);
+  }
+
+  .navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(20px);
+  }
+}

@navikt/core/css/form/text-field.css

@@ -73,11 +73,10 @@
   cursor: not-allowed;
 }
 
-.navds-text-field__input[readonly] {
-  background-color: var(--ac-textfield-bg, var(--a-surface-default));
-  border-color: var(--ac-textfield-border, var(--a-border-default));
-  box-shadow: none;
-  cursor: not-allowed;
+.navds-text-field--readonly .navds-text-field__input {
+  background-color: var(--a-surface-subtle);
+  border-color: var(--a-border-subtle);
+  cursor: default;
 }
 
 /**

@navikt/core/css/form/textarea.css

@@ -99,9 +99,8 @@
   cursor: not-allowed;
 }
 
-.navds-textarea__input[readonly] {
-  background-color: var(--ac-textarea-bg, var(--a-surface-default));
-  border-color: var(--ac-textarea-border, var(--a-border-default));
-  box-shadow: none;
-  cursor: not-allowed;
+.navds-textarea--readonly .navds-textarea__input {
+  background-color: var(--a-surface-subtle);
+  border-color: var(--a-border-subtle);
+  cursor: default;
 }

@navikt/core/css/package.json

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

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @navikt/ds-react
 
+## 4.6.1
+
+### Patch Changes
+
+- Skjema: Labels og Legends bruker nå inline-flex når readOnly er satt ([#2089](https://github.com/navikt/aksel/pull/2089))
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@4.6.1
+
+## 4.6.0
+
+### Minor Changes
+
+- Skjema: De fleste skjemakomponenter støtter nå `readOnly`-state ([#2080](https://github.com/navikt/aksel/pull/2080))
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@4.6.0
+
 ## 4.5.0
 
 ### Minor Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "4.5.0",
+  "version": "4.6.1",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.24.1",
-    "@navikt/aksel-icons": "^4.5.0",
+    "@navikt/aksel-icons": "^4.6.1",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

@navikt/core/react/src/date/DateInput.tsx

@@ -4,6 +4,7 @@ import React, { forwardRef, InputHTMLAttributes } from "react";
 import { BodyShort, ErrorMessage, Label, omit } from "..";
 import { FormFieldProps, useFormField } from "../form/useFormField";
 import { useDateInputContext } from "./context";
+import { ReadOnlyIcon } from "../form/ReadOnlyIcon";
 
 export interface DateInputProps
   extends FormFieldProps,
@@ -57,6 +58,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
     errorId,
     showErrorMsg,
     hasError,
+    readOnly,
   } = useFormField(props, conditionalVariables.prefix);
 
   return (
@@ -71,6 +73,9 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           "navds-date__field--error": hasError,
           "navds-form-field--disabled": !!inputProps.disabled,
           "navds-text-field--disabled": !!inputProps.disabled,
+          "navds-form-field--readonly": readOnly,
+          "navds-text-field--readonly": readOnly,
+          "navds-date__field--readonly": readOnly,
         }
       )}
     >
@@ -81,6 +86,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           "navds-sr-only": hideLabel,
         })}
       >
+        <ReadOnlyIcon readOnly={readOnly} />
         {label}
       </Label>
       {!!description && (
@@ -102,6 +108,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           {...inputProps}
           autoComplete="off"
           aria-controls={ariaId}
+          readOnly={readOnly}
           className={cl(
             "navds-date__field-input",
             "navds-text-field__input",
@@ -111,8 +118,8 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           size={14}
         />
         <button
-          disabled={inputProps.disabled}
-          tabIndex={open ? -1 : 0}
+          disabled={inputProps.disabled || readOnly}
+          tabIndex={readOnly ? -1 : open ? -1 : 0}
           onClick={() => onOpen()}
           type="button"
           className="navds-date__field-button"

@navikt/core/react/src/date/datepicker/datepicker.stories.tsx

@@ -341,3 +341,25 @@ export const Size = () => {
     </div>
   );
 };
+
+export const Readonly = () => {
+  const { datepickerProps, inputProps } = useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    toDate: new Date("Feb 23 2024"),
+    onDateChange: console.log,
+  });
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <DatePicker {...datepickerProps} dropdownCaption>
+        <DatePicker.Input
+          size="medium"
+          {...inputProps}
+          value="01.02.2021"
+          label="Velg dato"
+          readOnly
+        />
+      </DatePicker>
+    </div>
+  );
+};

@navikt/core/react/src/date/hooks/useDatepicker.tsx

@@ -204,6 +204,9 @@ export const useDatepicker = (
   };
 
   const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
+    if (e.target.readOnly) {
+      return;
+    }
     !open && openOnFocus && handleOpen(true);
     let day = parseDate(
       e.target.value,

@navikt/core/react/src/date/hooks/useMonthPicker.tsx

@@ -201,6 +201,9 @@ export const useMonthpicker = (
   };
 
   const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
+    if (e.target.readOnly) {
+      return;
+    }
     !open && openOnFocus && handleOpen(true);
     let day = parseDate(
       e.target.value,

@navikt/core/react/src/date/hooks/useRangeDatepicker.tsx

@@ -321,6 +321,9 @@ export const useRangeDatepicker = (
   };
 
   const handleFocus = (e, src: RangeT) => {
+    if (e.target.readOnly) {
+      return;
+    }
     !open && openOnFocus && setOpen(true);
     let day = parseDate(
       e.target.value,

@navikt/core/react/src/form/ConfirmationPanel.tsx

@@ -6,7 +6,7 @@ import { useFormField } from "./useFormField";
 export interface ConfirmationPanelProps
   extends Omit<
     CheckboxProps,
-    "children" | "indeterminate" | "hideLabel" | "error"
+    "children" | "indeterminate" | "hideLabel" | "error" | "readOnly"
   > {
   /**
    * Additional information on panel

@navikt/core/react/src/form/Fieldset/Fieldset.tsx

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

@navikt/core/react/src/form/ReadOnlyIcon.tsx

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

@navikt/core/react/src/form/Select.tsx

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

@navikt/core/react/src/form/Switch.tsx

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

@navikt/core/react/src/form/TextField.tsx

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

@navikt/core/react/src/form/Textarea.tsx

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

@navikt/core/react/src/form/checkbox/Checkbox.tsx

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

@navikt/core/react/src/form/checkbox/CheckboxGroup.tsx

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

@navikt/core/react/src/form/checkbox/checkbox.stories.tsx

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

@navikt/core/react/src/form/checkbox/useCheckbox.ts

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

@navikt/core/react/src/form/radio/Radio.tsx

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

@navikt/core/react/src/form/radio/RadioGroup.tsx

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

@navikt/core/react/src/form/radio/radio.stories.tsx

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

@navikt/core/react/src/form/radio/useRadio.ts

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

@navikt/core/react/src/form/search/Search.tsx

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

@navikt/core/react/src/form/stories/select.stories.tsx

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

@navikt/core/react/src/form/stories/switch.stories.tsx

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

@navikt/core/react/src/form/stories/text-field.stories.tsx

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

@navikt/core/react/src/form/stories/textarea.stories.tsx

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

@navikt/core/react/src/form/useFormField.ts

@@ -29,6 +29,10 @@ export interface FormFieldProps {
    * Override internal id
    */
   id?: string;
+  /**
+   * Read only-state
+   */
+  readOnly?: boolean;
 }
 
 /**
@@ -46,8 +50,24 @@ export const useFormField = (props: FormFieldProps, prefix: string) => {
   const inputDescriptionId = `${prefix}-description-${genId}`;
 
   const disabled = fieldset?.disabled || props.disabled;
-  const hasError: boolean = !disabled && !!(error || fieldset?.error);
-  const showErrorMsg = !disabled && !!error && typeof error !== "boolean";
+  const readOnly =
+    ((fieldset?.readOnly || props.readOnly) && !disabled) || undefined;
+
+  const hasError: boolean =
+    !disabled && !readOnly && !!(error || fieldset?.error);
+  const showErrorMsg =
+    !disabled && !readOnly && !!error && typeof error !== "boolean";
+
+  const ariaInvalid = { ...(hasError ? { "aria-invalid": true } : {}) };
+
+  if ((props as any)?.required && process.env.NODE_ENV !== "production") {
+    console.warn(
+      "Aksel: Use of 'required' in form-elements is heavily discuouraged. Docs about why here:"
+    );
+    console.warn(
+      "https://aksel.nav.no/god-praksis/artikler/obligatoriske-og-valgfrie-skjemafelter#h3bfe00453471"
+    );
+  }
 
   return {
     showErrorMsg,
@@ -55,9 +75,10 @@ export const useFormField = (props: FormFieldProps, prefix: string) => {
     errorId,
     inputDescriptionId,
     size: size ?? fieldset?.size ?? "medium",
+    readOnly,
     inputProps: {
       id,
-      "aria-invalid": hasError,
+      ...ariaInvalid,
       "aria-describedby":
         cl(props["aria-describedby"], {
           [inputDescriptionId]:
@@ -65,6 +86,7 @@ export const useFormField = (props: FormFieldProps, prefix: string) => {
           [errorId]: showErrorMsg,
           [fieldset?.errorId ?? ""]: hasError && !!fieldset?.error,
         }) || undefined,
+
       disabled,
     },
   };

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/ds-tailwind
 
+## 4.6.1
+
+## 4.6.0
+
 ## 4.5.0
 
 ## 4.4.2

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "4.5.0",
+  "version": "4.6.1",
   "description": "Tailwind config based on @navikt/ds-tokens",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -22,7 +22,7 @@
     "directory": "@navikt/core/tailwind"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^4.5.0",
+    "@navikt/ds-tokens": "^4.6.1",
     "@types/jest": "^29.0.0",
     "color": "4.2.3",
     "jest": "^29.0.0",

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/ds-tokens
 
+## 4.6.1
+
+## 4.6.0
+
 ## 4.5.0
 
 ## 4.4.2

@navikt/core/tokens/package.json

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

CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 4.6.1
+
+### @navikt/ds-react
+
+- Skjema: Labels og Legends bruker nå inline-flex når readOnly er satt ([#2089](https://github.com/navikt/aksel/pull/2089))
+
+### @navikt/ds-css
+
+- Skjema: Labels og Legends bruker nå inline-flex når readOnly er satt ([#2089](https://github.com/navikt/aksel/pull/2089))
+
+## 4.6.0
+
+### @navikt/ds-react
+
+- Skjema: De fleste skjemakomponenter støtter nå `readOnly`-state ([#2080](https://github.com/navikt/aksel/pull/2080))
+
+### @navikt/ds-css
+
+- Skjema: De fleste skjemakomponenter har nå styling for `readOnly`-state ([#2080](https://github.com/navikt/aksel/pull/2080))
+
 ## 4.5.0
 
 ### @navikt/ds-react

aksel.nav.no/README.md

@@ -11,7 +11,7 @@ CMS og nettside for [aksel.nav.no](https://aksel.nav.no/)
 
 ### /website/sanity
 
-Det publiserte studioet finner man på [aksel.nav.no/admin](https://aksel.nav.no/admin)(krever NAV SSO).
+Det publiserte studioet finner man på [aksel.nav.no/admin](https://aksel.nav.no/admin)(krever NAV SSO for innlogging).
 
 `production`-datasettet er privat, så man må ha riktige tilganger for å kunne lese/jobbe med dataen der.
 
@@ -19,17 +19,24 @@ Det publiserte studioet finner man på [aksel.nav.no/admin](https://aksel.nav.no
 
 ### Bidrag
 
-Branch `main` blir pusher rett til prod -> aksel.nav.no. For å utvikle nye features brukes branch `next` som ved push publiseres til devmiljø https://aksel.ekstern.dev.nav.no/. Kan også publisere andre branches til dev ved bruk av workflow-dispatch.
+Branch `main` blir pusher rett til prod -> aksel.nav.no. For å utvikle nye features kan branch `next` brukes, som ved push publiseres til devmiljø https://aksel.ekstern.dev.nav.no/. Kan også publisere andre branches til dev ved bruk av workflow-dispatch.
 
 ## Kode-eksempler
 
-Alle eksemplene våre ligger under /website/pages/eksempler. For å se endringene live kan man starte opp storybook med `yarn storybook`. Du trenger da ikke tilgang til sanity for å se endringene.
+Alle eksemplene våre ligger under `/website/pages/eksempler`. For å se endringene live kan man starte opp storybook med `yarn storybook:aksel`.
+
+> Du trenger ikke secrets for å teste storybook
 
 ### Nettside (localhost:3000)
 
 ```bash
+// dev
 yarn install
 yarn dev
+
+// prod
+yarn build:next
+yarn serve:next
 ```
 
 **Rettigheter**
@@ -58,4 +65,4 @@ Kjøres backups hver 3 dag til GCP-bucket under `designsystem-prod`
 
 Spørsmål og kontakt kan rettes til team Aksel
 
-Aksel har også en egen Slack-kanal #aksel-designsystemet
+Aksel har også en egen Slack-kanal `#aksel-designsystemet`

aksel.nav.no/package.json

@@ -15,11 +15,11 @@
     "website"
   ],
   "dependencies": {
-    "@navikt/aksel-icons": "^4.5.0",
-    "@navikt/ds-css": "^4.5.0",
-    "@navikt/ds-react": "^4.5.0",
-    "@navikt/ds-tailwind": "^4.5.0",
-    "@navikt/ds-tokens": "^4.5.0"
+    "@navikt/aksel-icons": "^4.6.1",
+    "@navikt/ds-css": "^4.6.1",
+    "@navikt/ds-react": "^4.6.1",
+    "@navikt/ds-tailwind": "^4.6.1",
+    "@navikt/ds-tokens": "^4.6.1"
   },
   "devDependencies": {
     "prettier-plugin-tailwindcss": "^0.2.3"

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

@@ -25,5 +25,5 @@ export const Demo = {
 };
 
 export const args = {
-  index: 5,
+  index: 99,
 };

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

@@ -0,0 +1,30 @@
+import { Checkbox, CheckboxGroup } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  const handleChange = (val: any[]) => console.log(val);
+
+  return (
+    <CheckboxGroup
+      legend="Hvor vil du sitte?"
+      onChange={(val: any[]) => handleChange(val)}
+      value={["Midterst"]}
+      readOnly
+    >
+      <Checkbox value="Bakerst">Bakerst</Checkbox>
+      <Checkbox value="Midterst">Midterst</Checkbox>
+      <Checkbox value="Fremst">Fremst</Checkbox>
+    </CheckboxGroup>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 98,
+};

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

@@ -0,0 +1,27 @@
+import { DatePicker, useDatepicker } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  const { datepickerProps, inputProps } = useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    defaultSelected: new Date("Aug 28 2020"),
+    onDateChange: console.log,
+  });
+
+  return (
+    <DatePicker {...datepickerProps}>
+      <DatePicker.Input {...inputProps} label="Velg dato" readOnly />
+    </DatePicker>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 99,
+};

aksel.nav.no/website/pages/eksempler/monthpicker/input.tsx

@@ -11,9 +11,7 @@ const Example = () => {
   return (
     <div className="min-h-96">
       <MonthPicker {...monthpickerProps}>
-        <div className="grid gap-4">
-          <MonthPicker.Input {...inputProps} label="Velg månede" />
-        </div>
+        <MonthPicker.Input {...inputProps} label="Velg månede" />
       </MonthPicker>
       {selectedMonth && <div className="pt-4">{selectedMonth.getMonth()}</div>}
     </div>

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

@@ -0,0 +1,28 @@
+import { MonthPicker, useMonthpicker } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  const { monthpickerProps, inputProps } = useMonthpicker({
+    fromDate: new Date("Aug 23 2019"),
+    toDate: new Date("Aug 23 2025"),
+    defaultSelected: new Date("Aug 28 2020"),
+    onMonthChange: console.log,
+  });
+
+  return (
+    <MonthPicker {...monthpickerProps}>
+      <MonthPicker.Input {...inputProps} label="Velg månede" readOnly />
+    </MonthPicker>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 99,
+};

aksel.nav.no/website/pages/eksempler/monthpicker/validation.tsx

@@ -16,13 +16,11 @@ const Example = () => {
   return (
     <div className="min-h-96">
       <MonthPicker {...monthpickerProps}>
-        <div className="grid gap-4">
-          <MonthPicker.Input
-            {...inputProps}
-            label="Velg månede"
-            error={hasError && "Du må velge månede"}
-          />
-        </div>
+        <MonthPicker.Input
+          {...inputProps}
+          label="Velg månede"
+          error={hasError && "Du må velge månede"}
+        />
       </MonthPicker>
     </div>
   );

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

@@ -25,5 +25,5 @@ export const Demo = {
 };
 
 export const args = {
-  index: 5,
+  index: 99,
 };

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

@@ -0,0 +1,30 @@
+import { Radio, RadioGroup } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  const handleChange = (val: any) => console.log(val);
+
+  return (
+    <RadioGroup
+      legend="Velg din aldersgruppe."
+      onChange={(val: any) => handleChange(val)}
+      value="20"
+      readOnly
+    >
+      <Radio value="10">10-20 år</Radio>
+      <Radio value="20">21-45 år</Radio>
+      <Radio value="40">46-80 år</Radio>
+    </RadioGroup>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 98,
+};

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

@@ -20,5 +20,5 @@ export const Demo = {
 };
 
 export const args = {
-  index: 5,
+  index: 99,
 };

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

@@ -0,0 +1,24 @@
+import { Select } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <Select label="Hvilket land har du bosted i." readOnly value="sverige">
+      <option value="">Velg land</option>
+      <option value="norge">Norge</option>
+      <option value="sverige">Sverige</option>
+      <option value="danmark">Danmark</option>
+    </Select>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 98,
+};

aksel.nav.no/website/pages/eksempler/switch/default.tsx

@@ -2,7 +2,7 @@ import { Switch } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";
 
 const Example = () => {
-  return <Switch>Slå på notifikasjoner</Switch>;
+  return <Switch>Varsle med SMS</Switch>;
 };
 
 export default withDsExample(Example);

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

@@ -3,8 +3,8 @@ import { withDsExample } from "components/website-modules/examples/withDsExample
 
 const Example = () => {
   return (
-    <Switch description="Velg det landet du tilbringer mest tid.">
-      Slå på notifikasjoner
+    <Switch description="Vi sender SMS mellom 08:00 og 17:00">
+      Varsle med SMS
     </Switch>
   );
 };

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

@@ -2,7 +2,7 @@ import { Switch } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";
 
 const Example = () => {
-  return <Switch disabled>Slå på notifikasjoner</Switch>;
+  return <Switch disabled>Varsle med SMS</Switch>;
 };
 
 export default withDsExample(Example);
@@ -13,5 +13,5 @@ export const Demo = {
 };
 
 export const args = {
-  index: 7,
+  index: 99,
 };

aksel.nav.no/website/pages/eksempler/switch/hide-label.tsx

@@ -2,7 +2,7 @@ import { Switch } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";
 
 const Example = () => {
-  return <Switch hideLabel>Slå på notifikasjoner</Switch>;
+  return <Switch hideLabel>Varsle med SMS</Switch>;
 };
 
 export default withDsExample(Example);

aksel.nav.no/website/pages/eksempler/switch/loading.tsx

@@ -2,7 +2,7 @@ import { Switch } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";
 
 const Example = () => {
-  return <Switch loading>Slå på notifikasjoner</Switch>;
+  return <Switch loading>Varsle med SMS</Switch>;
 };
 
 export default withDsExample(Example);

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

@@ -0,0 +1,24 @@
+import { Switch } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <div className="grid gap-4">
+      <Switch readOnly>Slå på notifikasjoner</Switch>
+      <Switch readOnly checked>
+        Slå på notifikasjoner
+      </Switch>
+    </div>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 98,
+};

aksel.nav.no/website/pages/eksempler/switch/right.tsx

@@ -2,7 +2,7 @@ import { Switch } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";
 
 const Example = () => {
-  return <Switch position="right">Slå på notifikasjoner</Switch>;
+  return <Switch position="right">Varsle med SMS</Switch>;
 };
 
 export default withDsExample(Example);

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

@@ -2,7 +2,7 @@ import { Switch } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";
 
 const Example = () => {
-  return <Switch size="small">Slå på notifikasjoner</Switch>;
+  return <Switch size="small">Varsle med SMS</Switch>;
 };
 
 export default withDsExample(Example);

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

@@ -13,5 +13,5 @@ export const Demo = {
 };
 
 export const args = {
-  index: 10,
+  index: 99,
 };

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

@@ -0,0 +1,17 @@
+import { Textarea } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return <Textarea label="Har du noen tilbakemeldinger?" readOnly />;
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 98,
+};

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

@@ -13,5 +13,5 @@ export const Demo = {
 };
 
 export const args = {
-  index: 10,
+  index: 99,
 };

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

@@ -0,0 +1,17 @@
+import { TextField } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return <TextField label="Har du noen tilbakemeldinger?" readOnly />;
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 98,
+};

aksel.nav.no/website/sanity/config.ts

@@ -36,11 +36,11 @@ export const allArticleDocsRef = allArticleDocuments.map((x) => ({ type: x }));
 export const komponentKategorier = [{ title: "Core", value: "core" }];
 
 export const grunnleggendeKategorier = [
+  { title: "Introduksjon", value: "introduksjon" },
   { title: "Styling", value: "styling" },
   { title: "Guider", value: "guider" },
   { title: "Design", value: "design" },
   { title: "Kode", value: "kode" },
-  { title: "Nedlastbart", value: "nedlastbart" },
 ];
 
 export const monsterKategorier = [];

examples/shadow-dom/package.json

@@ -10,8 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@navikt/ds-css": "4.5.0",
-    "@navikt/ds-react": "4.5.0",
+    "@navikt/ds-css": "4.6.1",
+    "@navikt/ds-react": "4.6.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

yarn.lock

@@ -3787,7 +3787,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@^4.4.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@^4.6.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
   dependencies:
@@ -3814,8 +3814,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint"
   dependencies:
-    "@navikt/ds-css": ^4.4.0
-    "@navikt/ds-tokens": ^4.4.0
+    "@navikt/ds-css": ^4.6.0
+    "@navikt/ds-tokens": ^4.6.0
     "@types/jest": ^29.0.0
     concurrently: 7.2.1
     copyfiles: 2.4.1
@@ -3832,7 +3832,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel@workspace:@navikt/aksel"
   dependencies:
-    "@navikt/ds-css": 4.4.0
+    "@navikt/ds-css": 4.6.0
     "@types/inquirer": ^9.0.3
     "@types/jest": ^29.0.0
     axios: 1.3.6
@@ -3856,11 +3856,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-css@*, @navikt/ds-css@4.4.0, @navikt/ds-css@^4.4.0, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@*, @navikt/ds-css@4.6.0, @navikt/ds-css@^4.6.0, @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": ^4.4.0
+    "@navikt/ds-tokens": ^4.6.0
     cssnano: 6.0.0
     fast-glob: 3.2.11
     lodash: 4.17.21
@@ -3873,12 +3873,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react@*, @navikt/ds-react@4.4.0, @navikt/ds-react@^4.4.0, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@*, @navikt/ds-react@4.6.0, @navikt/ds-react@^4.6.0, @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.24.1
-    "@navikt/aksel-icons": ^4.4.0
+    "@navikt/aksel-icons": ^4.6.0
     "@radix-ui/react-tabs": 1.0.0
     "@radix-ui/react-toggle-group": 1.0.0
     "@testing-library/dom": 8.13.0
@@ -3914,11 +3914,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tailwind@^4.4.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^4.6.0, @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": ^4.4.0
+    "@navikt/ds-tokens": ^4.6.0
     "@types/jest": ^29.0.0
     color: 4.2.3
     jest: ^29.0.0
@@ -3929,7 +3929,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tokens@^4.4.0, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^4.6.0, @navikt/ds-tokens@workspace:@navikt/core/tokens":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
   dependencies:
@@ -7996,11 +7996,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "aksel.nav.no@workspace:aksel.nav.no"
   dependencies:
-    "@navikt/aksel-icons": ^4.4.0
-    "@navikt/ds-css": ^4.4.0
-    "@navikt/ds-react": ^4.4.0
-    "@navikt/ds-tailwind": ^4.4.0
-    "@navikt/ds-tokens": ^4.4.0
+    "@navikt/aksel-icons": ^4.6.0
+    "@navikt/ds-css": ^4.6.0
+    "@navikt/ds-react": ^4.6.0
+    "@navikt/ds-tailwind": ^4.6.0
+    "@navikt/ds-tokens": ^4.6.0
     prettier-plugin-tailwindcss: ^0.2.3
   languageName: unknown
   linkType: soft
@@ -22408,8 +22408,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "shadow-dom@workspace:examples/shadow-dom"
   dependencies:
-    "@navikt/ds-css": 4.4.0
-    "@navikt/ds-react": 4.4.0
+    "@navikt/ds-css": 4.6.0
+    "@navikt/ds-react": 4.6.0
     "@types/react": ^18.0.0
     "@types/react-dom": ^18.0.0
     "@vitejs/plugin-react": ^2.1.0