Merge branch 'main' into formvalidation-demo

.changeset/fast-beans-repeat.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Combobox :children_crossing: single select now hides selected value when typing, onBlur clears input

.changeset/yellow-crabs-remember.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Fixed bug in Combobox where the wrong option was selected on Enter if the autocompleted word was not the first in FilteredOptions

.github/workflows/aksel-dev.yml

@@ -25,10 +25,6 @@ jobs:
 
       - name: add tokens to .env
         run: |
-          echo "SLACK_BOT_TOKEN=${{ secrets.SLACK_BOT_TOKEN }}" >> aksel.nav.no/website/.env
-          echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
-          echo "SANITY_PREVIEW_TOKEN=${{ secrets.SANITY_PREVIEW_TOKEN }}" >> aksel.nav.no/website/.env
-          echo "SANITY_PRIVATE_NO_DRAFTS=${{ secrets.SANITY_PRIVATE_NO_DRAFTS }}" >> aksel.nav.no/website/.env
           echo "USE_CDN_ASSETS=true" >> aksel.nav.no/website/.env
 
       - name: Hide page from search engines
@@ -39,6 +35,9 @@ jobs:
         run: yarn
 
       - name: Build application
+        env:
+          SANITY_READ: ${{ secrets.SANITY_READ }}
+          SANITY_READ_NO_DRAFTS: ${{ secrets.SANITY_READ_NO_DRAFTS }}
         run: |
           yarn boot
           yarn workspace aksel.nav.no build:next

.github/workflows/aksel-prod.yml

@@ -24,10 +24,6 @@ jobs:
         shell: bash
         run: echo "NPM_AUTH_TOKEN=${{ secrets.READER_TOKEN }}" >> $GITHUB_ENV
 
-      - name: add tokens to .env
-        run: |
-          echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
-
       - name: Install dependencies
         run: yarn
 
@@ -37,6 +33,8 @@ jobs:
           yarn docgen
 
       - name: Update sanity sync
+        env:
+          SANITY_WRITE: ${{ secrets.SANITY_WRITE }}
         run: yarn workspace aksel.nav.no sanity:update
 
   build_and_deploy:
@@ -59,10 +57,6 @@ jobs:
 
       - name: add tokens to .env
         run: |
-          echo "SLACK_BOT_TOKEN=${{ secrets.SLACK_BOT_TOKEN }}" >> aksel.nav.no/website/.env
-          echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
-          echo "SANITY_PREVIEW_TOKEN=${{ secrets.SANITY_PREVIEW_TOKEN }}" >> aksel.nav.no/website/.env
-          echo "SANITY_PRIVATE_NO_DRAFTS=${{ secrets.SANITY_PRIVATE_NO_DRAFTS }}" >> aksel.nav.no/website/.env
           echo "USE_CDN_ASSETS=true" >> aksel.nav.no/website/.env
 
       - name: Install dependencies
@@ -75,6 +69,9 @@ jobs:
         run: yarn workspace website test
 
       - name: Build application
+        env:
+          SANITY_READ: ${{ secrets.SANITY_READ }}
+          SANITY_READ_NO_DRAFTS: ${{ secrets.SANITY_READ_NO_DRAFTS }}
         run: yarn workspace aksel.nav.no build:next
 
       - name: Upload static files to NAV CDN

.github/workflows/backup-sanity.yml

@@ -24,7 +24,9 @@ jobs:
         run: cd aksel.nav.no/website && yarn
 
       - name: Export dataset
-        run: cd aksel.nav.no/website && SANITY_PREVIEW_TOKEN=${{secrets.SANITY_DATASET_EDITOR_TOKEN}} yarn backup
+        env:
+          SANITY_READ: ${{ secrets.SANITY_READ }}
+        run: cd aksel.nav.no/website && yarn backup
       - name: Upload GCP bucket
         uses: "google-github-actions/auth@v2"
         with:

.github/workflows/e2e.yml

@@ -24,12 +24,6 @@ jobs:
         shell: bash
         run: echo "NPM_AUTH_TOKEN=${{ secrets.READER_TOKEN }}" >> $GITHUB_ENV
 
-      - name: add tokens to .env
-        run: |
-          echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
-          echo "SANITY_PREVIEW_TOKEN=${{ secrets.SANITY_PREVIEW_TOKEN }}" >> aksel.nav.no/website/.env
-          echo "SANITY_PRIVATE_NO_DRAFTS=${{ secrets.SANITY_PRIVATE_NO_DRAFTS }}" >> aksel.nav.no/website/.env
-
       - name: Install dependencies
         run: yarn
 
@@ -38,9 +32,15 @@ jobs:
           yarn boot
 
       - name: Build application
+        env:
+          SANITY_READ: ${{ secrets.SANITY_READ }}
+          SANITY_READ_NO_DRAFTS: ${{ secrets.SANITY_READ_NO_DRAFTS }}
         run: yarn workspace aksel.nav.no build:next
 
       - name: Run Playwright tests
+        env:
+          SANITY_READ: ${{ secrets.SANITY_READ }}
+          SANITY_READ_NO_DRAFTS: ${{ secrets.SANITY_READ_NO_DRAFTS }}
         run: yarn workspace website e2e:ci-full
       - uses: actions/upload-artifact@v4
         if: always()

.github/workflows/update-article-views.yml

@@ -22,9 +22,7 @@ jobs:
           key: ${{ runner.os }}-build-${{ github.sha }}
           restore-keys: |
             ${{ runner.os }}-build-
-      - name: add tokens to .env
-        run: |
-          echo "SANITY_WRITE_KEY=${{ secrets.SANITY_UTILITY_WRITE }}" >> scripts/article-views/.env
+
       - uses: nais/docker-build-push@v0
         id: docker-push
         with:

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

@@ -99,6 +99,7 @@
   border: none;
   padding: 0;
   margin: 0;
+  margin-left: var(--a-spacing-1);
   min-width: 10ch;
   width: 100%;
   height: var(--__ac-combobox-input-height);

@navikt/core/react/src/form/combobox/ComboboxWrapper.tsx

@@ -21,7 +21,7 @@ const ComboboxWrapper = ({
   inputSize,
   toggleIsListOpen,
 }: ComboboxWrapperProps) => {
-  const { toggleOpenButtonRef } = useInputContext();
+  const { toggleOpenButtonRef, clearInput } = useInputContext();
 
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const [hasFocusWithin, setHasFocusWithin] = useState(false);
@@ -40,6 +40,7 @@ const ComboboxWrapper = ({
     if (!wrapperRef.current?.contains(e.relatedTarget)) {
       toggleIsListOpen(false);
       setHasFocusWithin(false);
+      clearInput(e);
     }
   }
 

@navikt/core/react/src/form/combobox/Input/Input.tsx

@@ -78,7 +78,10 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           const selectedValue =
             allowNewValues && isValueNew
               ? { label: value, value }
-              : filteredOptions[0];
+              : filteredOptionsUtil.getFirstValueStartingWith(
+                  value,
+                  filteredOptions,
+                ) || filteredOptions[0];
 
           if (!selectedValue) {
             return;

@navikt/core/react/src/form/combobox/SelectedOptions/SelectedOptions.tsx

@@ -36,9 +36,11 @@ const SelectedOptions: React.FC<SelectedOptionsProps> = ({
   size,
   children,
 }) => {
+  const { value } = useInputContext();
+  const { isMultiSelect } = useSelectedOptionsContext();
   return (
     <Chips className="navds-combobox__selected-options" size={size}>
-      {selectedOptions.length
+      {value.length === 0 || (isMultiSelect && selectedOptions.length)
         ? selectedOptions.map((option, i) => (
             <Option key={option.label + i} option={option} />
           ))

@navikt/core/react/src/form/combobox/__tests__/combobox.test.tsx

@@ -3,35 +3,32 @@ import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React, { useId } from "react";
 import { describe, expect, test, vi } from "vitest";
-import { UNSAFE_Combobox } from "../index";
+import { ComboboxProps, UNSAFE_Combobox } from "../index";
 
 const options = [
-  "banana",
   "apple",
   "apple pie",
-  "tangerine",
-  "pear",
+  "banana",
   "grape",
+  "grape fruit",
   "kiwi",
   "mango",
   "passion fruit",
+  "pear",
   "pineapple",
   "strawberry",
+  "tangerine",
   "watermelon",
-  "grape fruit",
 ];
 
-const App = (props) => {
+const App = ({
+  label = "Hva er dine favorittfrukter?",
+  ...rest
+}: Omit<ComboboxProps, "label"> & { label?: ComboboxProps["label"] }) => {
   const id = useId();
   return (
     <div data-theme="light">
-      <UNSAFE_Combobox
-        label="Hva er dine favorittfrukter?"
-        size="medium"
-        variant="simple"
-        id={id}
-        {...props}
-      />
+      <UNSAFE_Combobox label={label} size="medium" id={id} {...rest} />
     </div>
   );
 };
@@ -260,5 +257,38 @@ describe("Render combobox", () => {
         ).toBe(true);
       });
     });
+
+    test("and pressing enter to select autocompleted word will select the correct word", async () => {
+      const onToggleSelected = vi.fn();
+      render(
+        <App
+          onToggleSelected={onToggleSelected}
+          options={options}
+          shouldAutocomplete
+        />,
+      );
+
+      const combobox = screen.getByRole("combobox", {
+        name: "Hva er dine favorittfrukter?",
+      });
+
+      await act(async () => {
+        await userEvent.click(combobox);
+
+        await userEvent.type(combobox, "p");
+      });
+
+      expect(combobox.getAttribute("value")).toBe("passion fruit");
+
+      await act(async () => {
+        await userEvent.keyboard("{Enter}");
+      });
+
+      expect(onToggleSelected).toHaveBeenCalledWith(
+        "passion fruit",
+        true,
+        false,
+      );
+    });
   });
 });

@navikt/core/react/src/form/error-summary/ErrorSummary.tsx

@@ -52,7 +52,7 @@ interface ErrorSummaryComponent
  *
  * @example
  * ```jsx
- * <ErrorSummary heading="Du må fikse disse feilene før du kan sende inn søknad.">
+ * <ErrorSummary heading="Du må rette disse feilene før du kan sende inn søknaden:">
  *   <ErrorSummary.Item href="#1">
  *     Felt må fylles ut med alder
  *   </ErrorSummary.Item>

aksel.nav.no/README.md

@@ -44,18 +44,18 @@ yarn serve:next
 Sanity-datasettet er privat, noe som betyr du må ha tilgang til sanity applikasjonen + følgende token for å få data lokalt:
 
 ```env
-SANITY_PREVIEW_TOKEN
-SANITY_PRIVATE_NO_DRAFTS
+SANITY_READ
+SANITY_READ_NO_DRAFTS
 ```
 
 ### .env
 
-Blir brukt flere keys i .env under `./website`, men kun `SANITY_PRIVATE_NO_DRAFTS` trengs for å teste lokalt
+Blir brukt flere keys i .env under `./website`, men kun `SANITY_READ_NO_DRAFTS` trengs for å teste lokalt
 
-- SANITY_WRITE_KEY:
+- SANITY_WRITE:
   For å sende dokumenter til sanity, brukt til å oppdatere sandboxes/examples/farger. Trengs bare hvis kode skal synkes fra lokal branch/teste feedback-løsning
-- SANITY_PREVIEW_TOKEN: Gir appen tilgang til å lese draft innhold fra sanity i "preview"-mode. Trengs for å teste ikke publiserte-sider
-- SANITY_PRIVATE_NO_DRAFTS: Gir appen tilgang til å lese innhold fra Sanity da datasettet er privat
+- SANITY_READ: Gir appen tilgang til å lese draft innhold fra sanity i "preview"-mode. Trengs for å teste ikke publiserte-sider
+- SANITY_READ_NO_DRAFTS: Gir appen tilgang til å lese innhold fra Sanity da datasettet er privat
 
 ## Backups
 

aksel.nav.no/nais-dev.yaml

@@ -6,10 +6,12 @@ metadata:
   labels:
     team: designsystem
 spec:
+  envFrom:
+    - secret: aksel-website-secrets-dev
   image: {{ image }}
   port: 3000
   ingresses:
-    - "https://aksel.ekstern.dev.nav.no"
+    - "https://aksel.ansatt.dev.nav.no"
   liveness:
     path: /api/isAlive
     initialDelay: 10

aksel.nav.no/nais-prod.yaml

@@ -6,6 +6,8 @@ metadata:
   labels:
     team: designsystem
 spec:
+  envFrom:
+    - secret: aksel-website-secrets
   image: {{ image }}
   port: 3000
   ingresses:

aksel.nav.no/website/components/sanity-modules/relatert-innhold/RelatertInnhold.tsx

@@ -10,7 +10,7 @@ type RelatertInnholdProps = {
 };
 
 const RelatertInnhold = ({ node }: RelatertInnholdProps) => {
-  if (!node || node?.lenker?.length === 0) {
+  if (!node || !node.lenker || node?.lenker?.length === 0) {
     return null;
   }
 

aksel.nav.no/website/components/utils/slack/fetch-members.ts

@@ -22,7 +22,7 @@ export async function fetchSlackMembers(): Promise<
     };
   }
 
-  const client = new WebClient(process.env.SLACK_BOT_TOKEN);
+  const client = new WebClient(process.env.SLACK_BOT_USER_TOKEN);
 
   const pagination: {
     limit: number;

aksel.nav.no/website/e2e/genUrls.ts

@@ -4,7 +4,7 @@ import { sitemapPages } from "../sanity/interface/interface";
 
 dotenv.config();
 
-const token = process.env.SANITY_PRIVATE_NO_DRAFTS;
+const token = process.env.SANITY_READ_NO_DRAFTS;
 
 sitemapPages(token)
   .then((pages) =>

aksel.nav.no/website/middleware.ts

@@ -42,7 +42,7 @@ export async function middleware(req: NextRequest) {
     );
 
     if (redirect) {
-      const token = process.env.SANITY_WRITE_KEY;
+      const token = process.env.SANITY_WRITE;
       if (token) {
         noCdnClient(token)
           .patch(redirect._id)

aksel.nav.no/website/pages/api/preview.ts

@@ -4,7 +4,7 @@ import { clientConfig } from "../../sanity/config";
 
 const previewClient = createClient({
   ...clientConfig,
-  token: process.env.SANITY_PREVIEW_TOKEN,
+  token: process.env.SANITY_READ,
   ignoreBrowserTokenWarning: process.env.NODE_ENV === "test",
 });
 
@@ -37,7 +37,7 @@ export default async function preview(
     return redirectToPreview(res, "/");
   }
 
-  if (!process.env.SANITY_PREVIEW_TOKEN) {
+  if (!process.env.SANITY_READ) {
     return res.status(401).json({ message: "Invalid preview-token" });
   }
 

aksel.nav.no/website/pages/api/preview/draft.ts

@@ -7,11 +7,11 @@ import {
   SANITY_PROJECT_ID,
 } from "@/sanity/config";
 
-const token = process.env.SANITY_PREVIEW_TOKEN;
+const token = process.env.SANITY_READ;
 
 if (!token) {
   throw new Error(
-    "A secret is provided but there is no `SANITY_PREVIEW_TOKEN` environment variable setup.",
+    "A secret is provided but there is no `SANITY_READ` environment variable setup.",
   );
 }
 

aksel.nav.no/website/pages/api/slack/feedback/v1/index.ts

@@ -32,7 +32,7 @@ const requestBodySchema = z.object({
   }),
 });
 
-const client = new WebClient(process.env.SLACK_BOT_TOKEN);
+const client = new WebClient(process.env.SLACK_BOT_USER_TOKEN);
 
 export default authProtectedApi(sendSlackbotFeedback);