Version Packages (#2916 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
refactor: removed unsplash plugin from sanity media input (#2921 )
2026-10-17 03:02:03 +00:00 · 2024-05-14 15:29:55 +02:00 · 2024-05-14 11:31:45 +02:00 · 2024-05-14 10:15:52 +02:00 · 2024-05-14 10:14:35 +02:00 · 2024-05-14 09:40:59 +02:00
60 changed files with 1305 additions and 355 deletions
@@ -19,6 +19,7 @@ add links to project-tasks, slack discussions etc here
 - Check that styling is correctly exported from `@navikt/core/css/index.css`
 - Check that correct tokens for component is documented in `@navikt/core/css/tokens.json`
 - Check that only needed components and types are exported from `@navikt/core/react/src/index.ts`
+- Check that component is exported from `@navikt/core/react/package.json`
 - Add JSDoc to component (see other components for reference)
 - Create storybook-stories for relevant component variations and compositions. Stories are used for [visual regression testing](https://www.chromatic.com/docs/), so make sure they are complete.
 - Is the component sufficiently complex to warrant tests? Add some unit-tests for vitest.
@@ -1,5 +1,7 @@
 # @navikt/aksel-icons

+## 6.8.0
+
 ## 6.7.1

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

+## 6.8.0
+
 ## 6.7.1

 ## 6.7.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "6.7.1",
+  "version": "6.8.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.7.1",
-    "@navikt/ds-tokens": "^6.7.1",
+    "@navikt/ds-css": "^6.8.0",
+    "@navikt/ds-tokens": "^6.8.0",
    "concurrently": "7.2.1",
    "postcss-selector-parser": "^6.0.13",
    "postcss-value-parser": "^4.2.0",
@@ -1,5 +1,12 @@
 # @navikt/aksel

+## 6.8.0
+
+### Patch Changes
+
+- Updated dependencies [[`bd482c5d3`](https://github.com/navikt/aksel/commit/bd482c5d3ea9c7f84114d1199e73594c7b593154), [`7becf3e4c`](https://github.com/navikt/aksel/commit/7becf3e4cf47b119e4b456a066b53e6077669bcd)]:
+  - @navikt/ds-css@6.8.0
+
 ## 6.7.1

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "6.7.1",
+  "version": "6.8.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.7.1",
+    "@navikt/ds-css": "6.8.0",
    "axios": "1.6.0",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -1,5 +1,15 @@
 # @navikt/ds-css

+## 6.8.0
+
+### Minor Changes
+
+- :sparkles: Ny komponent: FormProgress ([#2855](https://github.com/navikt/aksel/pull/2855))
+
+### Patch Changes
+
+- HGrid: forenklet CSS. ([#2917](https://github.com/navikt/aksel/pull/2917))
+
 ## 6.7.1

 ### Patch Changes
@@ -179,6 +179,17 @@ const StyleMappings = {
      main: formCss,
      dependencies: [typoCss, "link.css"],
    },
+    {
+      component: "FormProgress",
+      main: formCss,
+      dependencies: [
+        typoCss,
+        "progress-bar.css",
+        "button.css",
+        primitivesCss,
+        "stepper.css",
+      ],
+    },
    {
      component: "ToggleGroup",
      main: "toggle-group.css",
@@ -0,0 +1,52 @@
+.navds-form-progress__bar {
+  margin-bottom: var(--a-spacing-2);
+}
+
+.navds-form-progress__button[data-state="closed"] .navds-form-progress__btn-txt-hide,
+.navds-form-progress__button[data-state="open"] .navds-form-progress__btn-txt-show {
+  display: none;
+}
+
+.navds-form-progress__button:hover svg {
+  transform: translateY(1px);
+}
+
+.navds-form-progress__button[data-state="open"] svg {
+  transform: rotate(-180deg);
+}
+
+.navds-form-progress__button[data-state="open"]:hover svg {
+  transform: translateY(-1px) rotate(-180deg);
+}
+
+.navds-form-progress__collapsible {
+  display: grid;
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  transition: grid-template-rows 0.3s cubic-bezier(0.3, 0, 0.15, 1);
+}
+
+.navds-form-progress__collapsible[hidden] {
+  display: grid;
+}
+
+.navds-form-progress__collapsible[data-state="open"] {
+  grid-template-rows: 1fr;
+}
+
+.navds-form-progress__collapsible-content {
+  min-height: 0;
+  transition: visibility 0.3s;
+  visibility: hidden;
+}
+
+.navds-form-progress__collapsible[data-state="open"] .navds-form-progress__collapsible-content {
+  visibility: visible;
+}
+
+.navds-form-progress__stepper {
+  border: 2px solid var(--a-border-subtle);
+  border-radius: var(--a-border-radius-large);
+  padding: var(--a-spacing-2) var(--a-spacing-4) 0;
+  margin-top: var(--a-spacing-1);
+}
@@ -14,3 +14,4 @@
@import "search.css";
@import "combobox.css";
@import "form-summary.css";
+@import "form-progress.css";
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "6.7.1",
+  "version": "6.8.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.7.1",
+    "@navikt/ds-tokens": "^6.8.0",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -1,17 +1,17 @@
 .navds-hgrid {
  --__ac-hgrid-columns-xs: initial;
-  --__ac-hgrid-columns-sm: initial;
-  --__ac-hgrid-columns-md: initial;
-  --__ac-hgrid-columns-lg: initial;
-  --__ac-hgrid-columns-xl: initial;
-  --__ac-hgrid-columns-2xl: initial;
+  --__ac-hgrid-columns-sm: var(--__ac-hgrid-columns-xs);
+  --__ac-hgrid-columns-md: var(--__ac-hgrid-columns-sm);
+  --__ac-hgrid-columns-lg: var(--__ac-hgrid-columns-md);
+  --__ac-hgrid-columns-xl: var(--__ac-hgrid-columns-lg);
+  --__ac-hgrid-columns-2xl: var(--__ac-hgrid-columns-xl);
  --__ac-hgrid-columns: var(--__ac-hgrid-columns-xs);
  --__ac-hgrid-gap-xs: initial;
-  --__ac-hgrid-gap-sm: initial;
-  --__ac-hgrid-gap-md: initial;
-  --__ac-hgrid-gap-lg: initial;
-  --__ac-hgrid-gap-xl: initial;
-  --__ac-hgrid-gap-2xl: initial;
+  --__ac-hgrid-gap-sm: var(--__ac-hgrid-gap-xs);
+  --__ac-hgrid-gap-md: var(--__ac-hgrid-gap-sm);
+  --__ac-hgrid-gap-lg: var(--__ac-hgrid-gap-md);
+  --__ac-hgrid-gap-xl: var(--__ac-hgrid-gap-lg);
+  --__ac-hgrid-gap-2xl: var(--__ac-hgrid-gap-xl);
  --__ac-hgrid-gap: var(--__ac-hgrid-gap-xs);
  --__ac-hgrid-align: initial;

@@ -23,56 +23,35 @@

@media (min-width: 480px) {
  .navds-hgrid {
-    --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs));
-    --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs));
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm);
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm);
  }
 }

@media (min-width: 768px) {
  .navds-hgrid {
-    --__ac-hgrid-columns: var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)));
-    --__ac-hgrid-gap: var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs)));
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-md);
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-md);
  }
 }

@media (min-width: 1024px) {
  .navds-hgrid {
-    --__ac-hgrid-columns: var(
-      --__ac-hgrid-columns-lg,
-      var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)))
-    );
-    --__ac-hgrid-gap: var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))));
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-lg);
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-lg);
  }
 }

@media (min-width: 1280px) {
  .navds-hgrid {
-    --__ac-hgrid-columns: var(
-      --__ac-hgrid-columns-xl,
-      var(--__ac-hgrid-columns-lg, var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs))))
-    );
-    --__ac-hgrid-gap: var(
-      --__ac-hgrid-gap-xl,
-      var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))))
-    );
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-xl);
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-xl);
  }
 }

@media (min-width: 1440px) {
  .navds-hgrid {
-    --__ac-hgrid-columns: var(
-      --__ac-hgrid-columns-2xl,
-      var(
-        --__ac-hgrid-columns-xl,
-        var(--__ac-hgrid-columns-lg, var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs))))
-      )
-    );
-    --__ac-hgrid-gap: var(
-      --__ac-hgrid-gap-2xl,
-      var(
-        --__ac-hgrid-gap-xl,
-        var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))))
-      )
-    );
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-2xl);
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-2xl);
  }
 }
@@ -1,5 +1,19 @@
 # @navikt/ds-react

+## 6.8.0
+
+### Minor Changes
+
+- :sparkles: Ny komponent: FormProgress ([#2855](https://github.com/navikt/aksel/pull/2855))
+
+### Patch Changes
+
+- Stepper.Step: Set aria-current to "step" instead of true ([#2920](https://github.com/navikt/aksel/pull/2920))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@6.8.0
+  - @navikt/aksel-icons@6.8.0
+
 ## 6.7.1

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "6.7.1",
+  "version": "6.8.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",
@@ -570,6 +570,16 @@
        "default": "./cjs/form/form-summary/index.js"
      }
    },
+    "./FormProgress": {
+      "import": {
+        "types": "./esm/form/form-progress/index.d.ts",
+        "default": "./esm/form/form-progress/index.js"
+      },
+      "require": {
+        "types": "./cjs/form/form-progress/index.d.ts",
+        "default": "./cjs/form/form-progress/index.js"
+      }
+    },
    "./package.json": "./package.json"
  },
  "scripts": {
@@ -584,8 +594,8 @@
  "dependencies": {
    "@floating-ui/react": "0.25.4",
    "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^6.7.1",
-    "@navikt/ds-tokens": "^6.7.1",
+    "@navikt/aksel-icons": "^6.8.0",
+    "@navikt/ds-tokens": "^6.8.0",
    "clsx": "^2.1.0",
    "date-fns": "^3.0.0",
    "react-day-picker": "8.10.0"
@@ -13,6 +13,10 @@ export interface CollapsibleTriggerProps
   * @default false
   */
  asChild?: boolean;
+  /**
+   * You may disable aria-expanded if the accessable name of the trigger is changed when toggled, e.g. "Show"/"Hide".
+   */
+  "aria-expanded"?: undefined;
 }

 export const CollapsibleTrigger = forwardRef<
@@ -29,10 +33,10 @@ export const CollapsibleTrigger = forwardRef<
      type="button"
      data-state={ctx.state}
      onClick={composeEventHandlers(onClick, ctx.onOpenToggle)}
+      aria-expanded={ctx.open}
      {...rest}
      id={ctx.triggerId}
      aria-controls={ctx.open ? ctx.contentId : undefined}
-      aria-expanded={ctx.open}
    >
      {children}
    </Comp>
@@ -1,5 +1,5 @@
 import { createContext } from "../../util/create-context";
-import { ComponentTranslation } from "./i18n/i18n.types";
+import { ComponentTranslation } from "../../util/i18n/i18n.types";

 export type FileUploadLocaleContextProps = {
  translations?: ComponentTranslation<"FileUpload">;
@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
+import { ComponentTranslation } from "../../util/i18n/i18n.types";
 import { FileUploadLocaleContextProvider } from "./FileUpload.context";
-import { ComponentTranslation } from "./i18n/i18n.types";
 import Trigger from "./parts/Trigger";
 import Dropzone from "./parts/dropzone/Dropzone";
 import Item from "./parts/item/Item";
@@ -80,7 +80,7 @@ export const States: StoryObj = {
    </div>
  ),
 };
-States.play = async ({ canvasElement }) => {
+States.play = ({ canvasElement }) => {
  const canvas = within(canvasElement);
  const button = canvas.getByText("Velg fil");
  fireEvent.dragEnter(button);
@@ -5,10 +5,10 @@ import { Button } from "../../../../button";
 import { BodyShort, ErrorMessage, Label } from "../../../../typography";
 import { composeEventHandlers } from "../../../../util/composeEventHandlers";
 import { useId } from "../../../../util/hooks";
+import { useI18n } from "../../../../util/i18n/i18n.context";
 import { omit } from "../../../../util/omit";
 import { useFormField } from "../../../useFormField";
 import { useFileUploadTranslation } from "../../FileUpload.context";
-import { useI18n } from "../../i18n/i18n.context";
 import { useFileUpload } from "../../useFileUpload";
 import { FileUploadDropzoneProps } from "./dropzone.types";
 import { useDropzone } from "./useDropzone";
@@ -1,6 +1,6 @@
+import { ComponentTranslation } from "../../../../util/i18n/i18n.types";
 import { FormFieldProps } from "../../../useFormField";
 import { FileUploadBaseProps } from "../../FileUpload.types";
-import { ComponentTranslation } from "../../i18n/i18n.types";

 export interface FileUploadDropzoneProps
  extends FileUploadBaseProps,
@@ -3,9 +3,9 @@ import React, { MouseEvent, forwardRef } from "react";
 import { ExclamationmarkTriangleIcon } from "@navikt/aksel-icons";
 import { BodyShort } from "../../../../typography";
 import { OverridableComponent } from "../../../../util";
+import { useI18n } from "../../../../util/i18n/i18n.context";
+import { ComponentTranslation } from "../../../../util/i18n/i18n.types";
 import { useFileUploadTranslation } from "../../FileUpload.context";
-import { useI18n } from "../../i18n/i18n.context";
-import { ComponentTranslation } from "../../i18n/i18n.types";
 import { FileItem } from "./Item.types";
 import ItemButton from "./ItemButton";
 import ItemIcon from "./ItemIcon";
@@ -0,0 +1,73 @@
+import { Meta, StoryFn } from "@storybook/react";
+import React, { useState } from "react";
+import VStack from "../../layout/stack/VStack";
+import FormProgress, { FormProgressProps } from "./FormProgress";
+
+export default {
+  title: "ds-react/FormProgress",
+  component: FormProgress,
+  decorators: [(story) => <div style={{ width: 300 }}>{story()}</div>],
+  parameters: { chromatic: { disable: true } },
+} satisfies Meta<typeof FormProgress>;
+
+type ControllableProps = Pick<
+  FormProgressProps,
+  "activeStep" | "totalSteps" | "interactiveSteps"
+>;
+
+export const Default: StoryFn<ControllableProps> = (props) => (
+  <div style={{ minHeight: 700 }}>
+    <FormProgress {...props}>
+      <FormProgress.Step href="#" completed>
+        Start søknad
+      </FormProgress.Step>
+      <FormProgress.Step href="#">Personopplysninger</FormProgress.Step>
+      <FormProgress.Step interactive={false}>
+        Saksopplysninger
+      </FormProgress.Step>
+      <FormProgress.Step interactive={false}>
+        Søknadstekst for en veldig spesifikk prosess i NAV som har lang tekst
+      </FormProgress.Step>
+      <FormProgress.Step href="#">Vedlegg</FormProgress.Step>
+      <FormProgress.Step href="#">Oppsummering</FormProgress.Step>
+      <FormProgress.Step href="#">Innsending</FormProgress.Step>
+    </FormProgress>
+    <p>Noe innhold som dyttes ned</p>
+  </div>
+);
+Default.args = { activeStep: 2, totalSteps: 7, interactiveSteps: true };
+
+export const Controlled: StoryFn = () => {
+  const [open, setOpen] = useState(true);
+  return (
+    <>
+      <button onClick={() => setOpen(!open)}>State: {open.toString()}</button>
+      <FormProgress
+        totalSteps={5}
+        activeStep={3}
+        open={open}
+        onOpenChange={setOpen}
+      >
+        <FormProgress.Step completed>Start søknad</FormProgress.Step>
+        <FormProgress.Step completed interactive={false}>
+          Personopplysninger
+        </FormProgress.Step>
+        <FormProgress.Step>Saksopplysninger</FormProgress.Step>
+        <FormProgress.Step>Vedlegg</FormProgress.Step>
+        <FormProgress.Step interactive={false}>Oppsummering</FormProgress.Step>
+      </FormProgress>
+    </>
+  );
+};
+
+export const Chromatic: StoryFn = () => (
+  <VStack gap="10">
+    <div>
+      <Default activeStep={1} totalSteps={7} />
+    </div>
+    <div>
+      <Controlled />
+    </div>
+  </VStack>
+);
+Chromatic.parameters = { chromatic: { disable: false } };
@@ -0,0 +1,152 @@
+import React, { forwardRef } from "react";
+import { ChevronDownIcon } from "@navikt/aksel-icons";
+import Button from "../../button/Button";
+import Collapsible from "../../collapsible/Collapsible";
+import { HStack } from "../../layout/stack";
+import { ProgressBar } from "../../progress-bar";
+import { Stepper, StepperStepProps } from "../../stepper";
+import { BodyShort } from "../../typography";
+import { useI18n } from "../../util/i18n/i18n.context";
+import { ComponentTranslation } from "../../util/i18n/i18n.types";
+
+export interface FormProgressProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Total number of steps.
+   */
+  totalSteps: number;
+  /**
+   * Current active step.
+   *
+   * Index starts at 1, not 0.
+   */
+  activeStep: number;
+  /**
+   * Shows Stepper if `true`, hides if `false`.
+   * Using this prop removes automatic control of open-state.
+   */
+  open?: boolean;
+  /**
+   * Callback for current open-state
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Should contain <FormProgress.Step> elements.
+   */
+  children: React.ReactNode;
+  /**
+   * Callback for next `activeStep`.
+   *
+   * Index starts at 1, not 0.
+   */
+  onStepChange?: (step: number) => void;
+  /**
+   * Makes Stepper non-interactive if false.
+   * @default true
+   */
+  interactiveSteps?: boolean;
+  /**
+   * i18n API for customizing texts and labels.
+   */
+  translations?: ComponentTranslation<"FormProgress">;
+}
+
+export type FormProgressStepProps = StepperStepProps;
+
+interface FormProgressComponent
+  extends React.ForwardRefExoticComponent<
+    FormProgressProps & React.RefAttributes<HTMLDivElement>
+  > {
+  /**
+   * To be used inside `<FormProgress>`.
+   */
+  Step: typeof Stepper.Step;
+}
+
+/**
+ * Component for visualizing progression in a form with multiple steps.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/formprogress)
+ * @see 🏷️ {@link FormProgressProps}
+ *
+ * @example
+ * <FormProgress activeStep={2} totalSteps={3}>
+ *   <FormProgress.Step completed href="#">Children</FormProgress.Step>
+ *   <FormProgress.Step href="#">Personal information</FormProgress.Step>
+ *   <FormProgress.Step interactive={false}>Summary</FormProgress.Step>
+ * </FormProgress>
+ */
+export const FormProgress = forwardRef<HTMLDivElement, FormProgressProps>(
+  (
+    {
+      totalSteps,
+      activeStep,
+      open,
+      onOpenChange,
+      children,
+      onStepChange,
+      interactiveSteps,
+      translations,
+      ...rest
+    }: FormProgressProps,
+    ref,
+  ) => {
+    const translate = useI18n("FormProgress", translations);
+
+    return (
+      <div ref={ref} {...rest}>
+        <ProgressBar
+          aria-hidden
+          value={activeStep}
+          valueMax={totalSteps}
+          className="navds-form-progress__bar"
+        />
+
+        <Collapsible lazy open={open} onOpenChange={onOpenChange}>
+          <HStack justify="space-between" align="center">
+            <BodyShort as="span">
+              {translate("step", {
+                replacements: { activeStep, totalSteps },
+              })}
+            </BodyShort>
+            <Collapsible.Trigger asChild aria-expanded={undefined}>
+              <Button
+                variant="tertiary"
+                size="small"
+                className="navds-form-progress__button"
+                icon={<ChevronDownIcon aria-hidden />}
+              >
+                <span className="navds-form-progress__btn-txt-hide">
+                  {translate("hideAllSteps")}
+                </span>
+                <span className="navds-form-progress__btn-txt-show">
+                  {translate("showAllSteps")}
+                </span>
+              </Button>
+            </Collapsible.Trigger>
+          </HStack>
+
+          <Collapsible.Content className="navds-form-progress__collapsible">
+            <div className="navds-form-progress__collapsible-content">
+              <div className="navds-form-progress__stepper">
+                <Stepper
+                  activeStep={activeStep}
+                  onStepChange={onStepChange}
+                  interactive={interactiveSteps}
+                >
+                  {children}
+                </Stepper>
+              </div>
+            </div>
+          </Collapsible.Content>
+        </Collapsible>
+      </div>
+    );
+  },
+) as FormProgressComponent;
+
+FormProgress.Step = Stepper.Step;
+
+export const FormProgressStep = Stepper.Step;
+
+export default FormProgress;
@@ -0,0 +1,7 @@
+"use client";
+export {
+  default as FormProgress,
+  type FormProgressProps,
+  FormProgressStep,
+  type FormProgressStepProps,
+} from "./FormProgress";
@@ -141,6 +141,7 @@ export {
  type FilesPartitioned,
 } from "./form/file-upload";
 export { FormSummary, type FormSummaryProps } from "./form/form-summary";
+export { FormProgress, type FormProgressProps } from "./form/form-progress";
 export {
  Radio,
  RadioGroup,
@@ -110,6 +110,21 @@ export const AlignItems = {
  ),
 };

+export const Nested = {
+  render: () => (
+    <HGrid columns={{ xs: 1, sm: 2 }} gap="8">
+      <HGrid columns={2} gap="2">
+        <Placeholder text="1" />
+        <Placeholder text="2" />
+      </HGrid>
+      <HGrid columns={2} gap="2">
+        <Placeholder text="3" />
+        <Placeholder text="4" />
+      </HGrid>
+    </HGrid>
+  ),
+};
+
 function Placeholder({ text, height }: { text: string; height?: string }) {
  return (
    <div
@@ -148,6 +163,10 @@ export const Chromatic: Story = {
        <h2>AlignItems</h2>
        <AlignItems.render />
      </div>
+      <div>
+        <h2>Nested</h2>
+        <Nested.render />
+      </div>
    </VStack>
  ),
  parameters: {
@@ -80,7 +80,7 @@ export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
      return (
        <Comp
          {...rest}
-          aria-current={activeStep === unsafe_index}
+          aria-current={activeStep === unsafe_index ? "step" : undefined}
          ref={ref}
          className={cl("navds-stepper__step", className, {
            "navds-stepper__step--active": activeStep === unsafe_index,
@@ -58,7 +58,7 @@ interface StepperComponent
 *   <Stepper
 *     aria-labelledby="stepper-heading"
 *     activeStep={activeStep}
- *     onStepChange={(x) => setActiveStep(x)}
+ *     onStepChange={setActiveStep}
 *   >
 *     <Stepper.Step href="#">Start søknad</Stepper.Step>
 *     <Stepper.Step href="#">Saksopplysninger</Stepper.Step>
@@ -17,4 +17,9 @@ export default {
      downloading: "Laster ned…",
    },
  },
+  FormProgress: {
+    step: "Steg {activeStep} av {totalSteps}",
+    showAllSteps: "Vis alle steg",
+    hideAllSteps: "Skjul alle steg",
+  },
 };
@@ -1,5 +1,7 @@
 # @navikt/ds-tailwind

+## 6.8.0
+
 ## 6.7.1

 ## 6.7.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "6.7.1",
+  "version": "6.8.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.7.1",
+    "@navikt/ds-tokens": "^6.8.0",
    "color": "4.2.3",
    "lodash": "^4.17.21",
    "tailwindcss": "^3.3.3",
@@ -1,5 +1,7 @@
 # @navikt/ds-tokens

+## 6.8.0
+
 ## 6.7.1

 ## 6.7.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "6.7.1",
+  "version": "6.8.0",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,5 +1,19 @@
 # Changelog

+## 6.8
+
+### @navikt/ds-react
+
+- :sparkles: Ny komponent: FormProgress ([#2855](https://github.com/navikt/aksel/pull/2855))
+
+* Stepper.Step: Set aria-current to "step" instead of true ([#2920](https://github.com/navikt/aksel/pull/2920))
+
+### @navikt/ds-css
+
+- :sparkles: Ny komponent: FormProgress ([#2855](https://github.com/navikt/aksel/pull/2855))
+
+* HGrid: forenklet CSS. ([#2917](https://github.com/navikt/aksel/pull/2917))
+
 ## 6.7

 ### @navikt/ds-react
@@ -15,10 +15,10 @@
    "playroom"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^6.7.1",
-    "@navikt/ds-css": "^6.7.1",
-    "@navikt/ds-react": "^6.7.1",
-    "@navikt/ds-tailwind": "^6.7.1",
-    "@navikt/ds-tokens": "^6.7.1"
+    "@navikt/aksel-icons": "^6.8.0",
+    "@navikt/ds-css": "^6.8.0",
+    "@navikt/ds-react": "^6.8.0",
+    "@navikt/ds-tailwind": "^6.8.0",
+    "@navikt/ds-tokens": "^6.8.0"
  }
 }
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AkselTheme } from "@/sb-util";
+import ExampletextBlock from "./ExampletextBlock";
+
+const meta = {
+  title: "Sanity-modules/ExampletextBlock",
+  component: ExampletextBlock,
+  tags: ["autodocs"],
+} satisfies Meta<typeof ExampletextBlock>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Aksel: Story = {
+  args: {
+    node: {
+      title: "Eksempeltekst for ABC",
+      text: "Jeg er her for å veilede deg gjennom søknaden. Svarene dine lagres underveis, slik at du trygt kan gå tilbake og endre dem.\n\nArbeidsavklaringspenger forkortes ofte med “AAP”.\n\nAAP skal sikre deg inntekt når du på grunn av sykdom eller skade har behov for å få avklart mulighetene dine til å jobbe. Les mer om AAP, hvem som kan søke og hva du kan få på nav.no (åpnes i ny fane).",
+    },
+  },
+  decorators: [AkselTheme],
+};
@@ -0,0 +1,52 @@
+import { useId } from "react";
+import { BodyLong, Box, CopyButton, HStack, Heading } from "@navikt/ds-react";
+import ErrorBoundary from "@/error-boundary";
+
+type ExampletextBlockProps = {
+  node: {
+    title: string;
+    text: string;
+  };
+};
+
+const ExampletextBlock = ({ node }: ExampletextBlockProps) => {
+  const id = useId();
+
+  if (!node.text || !node.title) return null;
+
+  return (
+    <Box
+      as="section"
+      background="surface-subtle"
+      padding="6"
+      aria-labelledby={id}
+      className="mb-7 last:mb-0 dark:bg-surface-neutral-moderate"
+      borderRadius="large"
+    >
+      <HStack justify="space-between" gap="4" align="center" wrap={false}>
+        <Heading size="small" as="p" textColor="subtle" id={id} aria-hidden>
+          {node.title}
+        </Heading>
+        <CopyButton copyText={node.text} size="small" />
+      </HStack>
+      <hr className="my-4 border-border-subtle" aria-hidden />
+      <div className="space-y-7">{formatText(node.text)}</div>
+    </Box>
+  );
+};
+
+function formatText(text: string) {
+  if (!text) return null;
+  return text
+    .split("\n")
+    .filter(Boolean)
+    .map((line, index) => <BodyLong key={index}>{line}</BodyLong>);
+}
+
+export default function Component(props: ExampletextBlockProps) {
+  return (
+    <ErrorBoundary boundaryName="ExampletextBlock">
+      <ExampletextBlock {...props} />
+    </ErrorBoundary>
+  );
+}
@@ -132,6 +132,7 @@ export interface AkselTemplatesDocT extends DocumentT<"ds_artikkel">, ArticleT {
    unsafe?: boolean;
    bilde?: any;
  };
+  gh_discussions?: string;
  intro: {
    body?: any[];
    brukes_til: string[];
@@ -14,6 +14,7 @@ import InnholdsKort from "@/cms/cards/InnholdsKort";
 import CodeExamples from "@/cms/code-examples/CodeExamples";
 import SnippetLazy from "@/cms/code-snippet/SnippetLazy";
 import DoDont from "@/cms/do-dont/DoDont";
+import ExampletextBlock from "@/cms/exampletext-block/ExampletextBlock";
 import ExpansionCard from "@/cms/expansioncard/ExpansionCard";
 import PropsSeksjon from "@/cms/props/PropsSeksjon";
 import RelatertInnhold from "@/cms/relatert-innhold/RelatertInnhold";
@@ -46,6 +47,7 @@ const serializers: Partial<PortableTextReactComponents> = {
    video: ({ value }) => <Video node={value} />,
    tips: ({ value }) => <Tips node={value} />,
    kode_eksempler: ({ value }) => <CodeExamples node={value} />,
+    exampletext_block: ({ value }) => <ExampletextBlock node={value} />,
  },
  unknownType: () => null,
  block: {
@@ -0,0 +1,37 @@
+import { HandShakeHeartIcon } from "@navikt/aksel-icons";
+import { BodyLong, Button, Heading } from "@navikt/ds-react";
+
+export const SuggestionBlockGhPages = ({
+  reference,
+}: {
+  reference: string;
+}) => {
+  return (
+    <div className="mb-12 flex gap-2 rounded-lg bg-pink-100 px-6 py-4 ring-1 ring-inset ring-pink-300">
+      <span className="-mt-[1px] grid h-7 shrink-0 place-content-center text-2xl">
+        <HandShakeHeartIcon aria-hidden />
+      </span>
+      <div>
+        <Heading size="small" level="2">
+          Samarbeid
+        </Heading>
+        <BodyLong className="mt-2">
+          Malen er klar til bruk. Når du har fått prøvd den og høstet erfaringer
+          ønsker vi å lære av din innsikt. Delta i diskusjonen og bli med på å
+          forbedre malen.
+        </BodyLong>
+        <Button
+          variant="secondary-neutral"
+          as="a"
+          href={reference}
+          className="mt-4"
+          target="_blank"
+          rel="noreferrer noopener"
+          size="small"
+        >
+          Delta i diskusjonen
+        </Button>
+      </div>
+    </div>
+  );
+};
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { SuggestionBlock } from "@/web/suggestionblock/SuggestionBlock";
+import { SuggestionBlockGhPages } from "./SuggestionBlock.GhPages";

 const meta = {
  title: "Website-modules/SuggestionBlock",
@@ -45,3 +46,7 @@ export const Ikoner: Story = {
    variant: "ikoner",
  },
 };
+
+export const GhPages = {
+  render: () => <SuggestionBlockGhPages reference="http://localhost:6007" />,
+};
@@ -190,7 +190,7 @@ const options: {
    text: "Denne komponenten er ny eller oppdatert. Tar du den i bruk ønsker vi gjerne innspill til hvordan den fungerer i tjenesten din!",
    link: `${issueUrl}?labels=forespørsel+🥰%2Ckomponenter+🧩%2Cnytt+✨&template=update-component.yml&title=%5BInnspill+til+komponent%5D%3A+`,
    heading: "Ny",
-    icon: <ChangeLogIconOutline />,
+    icon: <ChangeLogIconOutline aria-hidden />,
  },
  "komponent-beta": {
    text: "Komponenten er under utvikling, men klar for adopsjon. Vi ønsker gjerne innspill på hvordan den fungerer og hvilke forbedringer vi kan gjøre.",
@@ -32,16 +32,16 @@
  },
  "dependencies": {
    "@amplitude/analytics-browser": "^2.2.3",
-    "@navikt/next-logger": "1.23.0",
+    "@navikt/next-logger": "1.24.0",
    "@navikt/oasis": "3.2.1",
    "@portabletext/react": "^3.0.11",
-    "@sanity/client": "^6.13.3",
-    "@sanity/code-input": "4.1.2",
-    "@sanity/color-input": "^3.1.0",
+    "@sanity/client": "^6.18.0",
+    "@sanity/code-input": "4.1.4",
+    "@sanity/color-input": "^3.1.1",
    "@sanity/image-url": "1.0.2",
-    "@sanity/locale-nb-no": "^1.1.0",
+    "@sanity/locale-nb-no": "^1.1.7",
    "@sanity/table": "1.1.2",
-    "@sanity/vision": "3.37.2",
+    "@sanity/vision": "3.41.1",
    "@slack/web-api": "^7.0.2",
    "boring-avatars": "1.10.1",
    "clsx": "^2.1.0",
@@ -51,11 +51,11 @@
    "jscodeshift": "^0.15.1",
    "lodash": "^4.17.21",
    "lz-string": "^1.5.0",
-    "next": "14.1.1-canary.57",
-    "next-logger": "^3.0.2",
+    "next": "^14.2.3",
+    "next-logger": "^4.0.0",
    "next-sanity": "5.5.8",
    "node-cache": "^5.1.2",
-    "pino": "^8.14.1",
+    "pino": "^8.21.0",
    "prism-react-renderer": "^2.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
@@ -63,8 +63,7 @@
    "react-responsive-masonry": "^2.1.7",
    "react-rx": "^2.1.3",
    "remark-gfm": "^4.0.0",
-    "sanity": "3.37.2",
-    "sanity-plugin-asset-source-unsplash": "^1.1.2",
+    "sanity": "3.41.1",
    "sanity-plugin-media": "^2.2.5",
    "sanity-plugin-utils": "^1.6.4",
    "sharp": "0.32.6",
@@ -77,11 +76,11 @@
  "devDependencies": {
    "@axe-core/playwright": "^4.5.2",
    "@babel/core": "^7.19.0",
-    "@next/bundle-analyzer": "14.1.1-canary.57",
-    "@next/eslint-plugin-next": "14.1.1-canary.57",
+    "@next/bundle-analyzer": "^14.2.3",
+    "@next/eslint-plugin-next": "^14.2.3",
    "@playwright/test": "1.35.1",
-    "@sanity/block-tools": "3.37.2",
-    "@sanity/schema": "3.37.2",
+    "@sanity/block-tools": "3.41.1",
+    "@sanity/schema": "3.41.1",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "autoprefixer": "^10.4.0",
@@ -39,7 +39,7 @@ const Example = () => {
 };

 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example);
+export default withDsExample(Example, { variant: "static" });

 /* Storybook story */
 export const Demo = {
@@ -0,0 +1,35 @@
+import { FormProgress } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
+
+const Example = () => {
+  const activeStep = 2; // Finn steg basert på rute
+
+  return (
+    <div style={{ minHeight: 260 }}>
+      <FormProgress totalSteps={5} activeStep={activeStep}>
+        <FormProgress.Step href="#/steg-1" completed>
+          Dine opplysninger
+        </FormProgress.Step>
+        <FormProgress.Step href="#/steg-2">Barn</FormProgress.Step>
+        <FormProgress.Step href="#/steg-3">Fastlege</FormProgress.Step>
+        <FormProgress.Step href="#/steg-4">
+          Tilleggsopplysninger
+        </FormProgress.Step>
+        <FormProgress.Step interactive={false}>Oppsummering</FormProgress.Step>
+      </FormProgress>
+    </div>
+  );
+};
+
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
+export default withDsExample(Example, { variant: "static" });
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 1,
+  desc: "Hvis hvert steg har sin egen URL, kan du bruke href på FormProgress.Step i stedet for onStepChange.",
+};
@@ -0,0 +1,37 @@
+import { useState } from "react";
+import { FormProgress } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
+
+const Example = () => {
+  const [activeStep, setActiveStep] = useState(2);
+
+  return (
+    <div style={{ minHeight: 260 }}>
+      <FormProgress
+        totalSteps={5}
+        activeStep={activeStep}
+        onStepChange={setActiveStep}
+      >
+        <FormProgress.Step completed href="#">
+          Dine opplysninger
+        </FormProgress.Step>
+        <FormProgress.Step href="#">Barn</FormProgress.Step>
+        <FormProgress.Step href="#">Fastlege</FormProgress.Step>
+        <FormProgress.Step href="#">Tilleggsopplysninger</FormProgress.Step>
+        <FormProgress.Step interactive={false}>Oppsummering</FormProgress.Step>
+      </FormProgress>
+    </div>
+  );
+};
+
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
+export default withDsExample(Example, { variant: "static" });
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 0,
+};
@@ -23,6 +23,7 @@ import { dateStr, generateSidebar, generateTableOfContents } from "@/utils";
 import { StatusTag } from "@/web/StatusTag";
 import { AkselTable, AkselTableRow } from "@/web/Table";
 import { SEO } from "@/web/seo/SEO";
+import { SuggestionBlockGhPages } from "@/web/suggestionblock/SuggestionBlock.GhPages";
 import NotFotfund from "../404";

 type PageProps = NextPageT<{
@@ -136,6 +137,9 @@ const Page = ({ page, sidebar, seo, publishDate, toc }: PageProps["props"]) => {
        pageProps={page}
        variant="page"
      >
+        {page.gh_discussions && (
+          <SuggestionBlockGhPages reference={page.gh_discussions} />
+        )}
        <IntroSeksjon node={page?.intro} />
        <SanityBlockContent blocks={page["content"]} />

@@ -4,7 +4,6 @@ import { nbNOLocale } from "@sanity/locale-nb-no";
 import { table } from "@sanity/table";
 import { visionTool } from "@sanity/vision";
 import { defineConfig } from "sanity";
-import { unsplashImageAsset } from "sanity-plugin-asset-source-unsplash";
 import { media } from "sanity-plugin-media";
 import { structureTool } from "sanity/structure";
 import { DatabaseIcon, TestFlaskIcon } from "@navikt/aksel-icons";
@@ -77,7 +76,6 @@ function defaultConfig() {
      codeInput(),
      media(),
      visionTool(),
-      unsplashImageAsset(),
      colorInput(),
      nbNOLocale(),
    ],
@@ -68,6 +68,12 @@ export const TemplatesArtikkel = defineType({
        collapsed: false,
      },
    }),
+    defineField({
+      title: "Github discussions link",
+      name: "gh_discussions",
+      type: "url",
+      group: "settings",
+    }),
    defineField({
      title: "Sidebar index",
      description:
@@ -78,6 +78,9 @@ export const schema: SchemaPluginOptions = {
    object.TokenTabell,
    object.KomponentIntro,

+    /* Templatesider */
+    object.ExampletextBlock,
+
    /* Prinsipper */
    object.HeroBilde,
    object.InnholdsKort,
@@ -17,3 +17,4 @@ export * from "./shared/tabell";
 export * from "./shared/tips";
 export * from "./shared/unik-sidemodul";
 export * from "./shared/video";
+export * from "./templates/ExampletextBlock";
@@ -170,6 +170,7 @@ const Riktekst = (
    "do_dont",
    "alert",
    "tabell_v2",
+    "exampletext_block",
  ];

  const komponent = [
@@ -179,7 +180,7 @@ const Riktekst = (
    "token_ref",
  ];

-  const templates = ["kode_eksempler"];
+  const templates = ["kode_eksempler", "exampletext_block"];

  const grunnleggende = ["spesial_seksjon"];

@@ -0,0 +1,34 @@
+import { defineField, defineType } from "sanity";
+import { Chat2Icon } from "@navikt/aksel-icons";
+import AkselExampletextBlock from "@/cms/exampletext-block/ExampletextBlock";
+
+export const ExampletextBlock = defineType({
+  name: "exampletext_block",
+  title: "Eksempel/Standard tekst",
+  type: "object",
+  icon: Chat2Icon,
+  fields: [
+    defineField({
+      title: "Heading",
+      name: "title",
+      type: "string",
+      initialValue: "Eksempeltekst",
+      validation: (Rule) => Rule.required(),
+    }),
+    defineField({
+      title: "Tekst",
+      name: "text",
+      type: "text",
+      validation: (Rule) => Rule.required(),
+    }),
+  ],
+  preview: {
+    select: {
+      title: "title",
+      text: "text",
+    },
+  },
+  components: {
+    preview: (values) => <AkselExampletextBlock node={values as any} />,
+  },
+});
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	7b691b6cd0	Version Packages (#2916 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-05-14 15:29:55 +02:00
Ken	1b048ba5c3	refactor: removed unsplash plugin from sanity media input (#2921 )	2024-05-14 11:31:45 +02:00
Ken	e92c897c01	update: New sanity versions (#2918 ) * update: New sanity versions * update: Bump canary-release of devDeps for nextjs * sync: yarn lock	2024-05-14 10:15:52 +02:00
Halvor Haugan	a1041d13cd	Stepper.Step: Set aria-current to "step" instead of true (#2920 )	2024-05-14 10:14:35 +02:00
Ken	241dd79ecb	Block to show template/standard-texts on template-pages (#2913 ) * feat: Standard highlighting komponent * feat: Immplementert StandardHighlight i CMS * refactor: Rename StandardHighlight -> ExampletextBlock * memo: Riktigere initialValue	2024-05-14 09:40:59 +02:00
Halvor Haugan	6aaf56bc10	Adjust examples FormProgress	2024-05-13 15:54:23 +02:00
Ken	7becf3e4cf	Simplified HGrid CSS-nesting (#2917 ) * test: Setup testing env for HGrid bug * refactor: Forenklet HGrid-css * memo: Changeset	2024-05-13 14:39:41 +02:00
Ken	a358d222b5	refactor: Removed extra w-fit left after refactor	2024-05-13 13:53:13 +02:00
Ken	24d4d48c87	Link to GH-discussions from template-pages (#2914 ) * feat: New gh-discussions field for template-articles * feat: Link to gh-discussions on template-pages * refactor: removed extra display grid in wrapper * feat: Added story for GHPages suggeestionBlock	2024-05-13 12:27:49 +02:00
Ken	2d0c2c6567	deps: Updated Nextjs and logging depdendencies (#2915 )	2024-05-13 11:36:32 +02:00
Halvor Haugan	bd482c5d3e	Ny komponent FormProgress (#2855 )	2024-05-13 10:30:28 +02:00