From 173fdf3abba307fc01c179aba99764a55b8a4610 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Thu, 27 Feb 2025 08:55:59 +0100
Subject: [PATCH 1/3] docs: remove use of combobox

---
 apps/_components/src/Showcase/Showcase.tsx | 46 ++++++++++++++--------
 packages/react/stories/testing.stories.tsx | 29 +++++++++++---
 2 files changed, 53 insertions(+), 22 deletions(-)

diff --git a/apps/_components/src/Showcase/Showcase.tsx b/apps/_components/src/Showcase/Showcase.tsx
index 499712eea8..21813b0f79 100644
--- a/apps/_components/src/Showcase/Showcase.tsx
+++ b/apps/_components/src/Showcase/Showcase.tsx
@@ -4,17 +4,19 @@ import {
   Button,
   Card,
   Checkbox,
-  Combobox,
   Details,
   Divider,
+  Field,
   Fieldset,
   Heading,
+  Label,
   Link,
   Pagination,
   Paragraph,
   Radio,
   Search,
   Select,
+  EXPERIMENTAL_Suggestion as Suggestion,
   Switch,
   Table,
   Tabs,
@@ -28,6 +30,16 @@ import cl from 'clsx/lite';
 import { type HTMLAttributes, useState } from 'react';
 import classes from './Showcase.module.css';
 
+const DATA_PLACES = [
+  'Sogndal',
+  'Oslo',
+  'Brønnøysund',
+  'Stavanger',
+  'Trondheim',
+  'Bergen',
+  'Lillestrøm',
+];
+
 type ShowcaseProps = HTMLAttributes<HTMLDivElement>;
 
 export function Showcase({ className, ...props }: ShowcaseProps) {
@@ -240,22 +252,22 @@ export function Showcase({ className, ...props }: ShowcaseProps) {
             <ToggleGroup.Item value='sweden'>Sverige</ToggleGroup.Item>
             <ToggleGroup.Item value='utlandet'>Utlandet</ToggleGroup.Item>
           </ToggleGroup>
-          <Combobox
-            description='Velg et sted'
-            label='Hvor går reisen?'
-            portal={false}
-            multiple
-          >
-            <Combobox.Empty>Fant ingen treff</Combobox.Empty>
-            <Combobox.Option value='leikanger'>Leikanger</Combobox.Option>
-            <Combobox.Option value='oslo'>Oslo</Combobox.Option>
-            <Combobox.Option value='bronnoysund'>Brønnøysund</Combobox.Option>
-            <Combobox.Option value='stavanger'>Stavanger</Combobox.Option>
-            <Combobox.Option value='trondheim'>Trondheim</Combobox.Option>
-            <Combobox.Option value='tromso'>Tromsø</Combobox.Option>
-            <Combobox.Option value='bergen'>Bergen</Combobox.Option>
-            <Combobox.Option value='moirana'>Mo i Rana</Combobox.Option>
-          </Combobox>
+          <Field>
+            <Label>Velg en destinasjon</Label>
+            <Suggestion>
+              <Suggestion.Input />
+              <Suggestion.Clear />
+              <Suggestion.List>
+                <Suggestion.Empty>Tomt</Suggestion.Empty>
+                {DATA_PLACES.map((place) => (
+                  <Suggestion.Option key={place} value={place}>
+                    {place}
+                    <div>Kommune</div>
+                  </Suggestion.Option>
+                ))}
+              </Suggestion.List>
+            </Suggestion>
+          </Field>
         </div>
       </div>
       <div className={cl(classes.card, classes.tabs)}>
diff --git a/packages/react/stories/testing.stories.tsx b/packages/react/stories/testing.stories.tsx
index 166a62a278..3749df53c5 100644
--- a/packages/react/stories/testing.stories.tsx
+++ b/packages/react/stories/testing.stories.tsx
@@ -10,7 +10,6 @@ import {
   Card,
   Checkbox,
   Chip,
-  Combobox,
   Details,
   Dialog,
   Dropdown,
@@ -27,6 +26,7 @@ import {
   Radio,
   Select,
   Spinner,
+  EXPERIMENTAL_Suggestion as Suggestion,
   Switch,
   Table,
   Tabs,
@@ -57,6 +57,16 @@ export default {
   },
 } as Meta;
 
+const DATA_PLACES = [
+  'Sogndal',
+  'Oslo',
+  'Brønnøysund',
+  'Stavanger',
+  'Trondheim',
+  'Bergen',
+  'Lillestrøm',
+];
+
 export const MediumRow: StoryFn<{
   size: 'sm' | 'md' | 'lg';
   direction: 'column' | 'row';
@@ -85,10 +95,19 @@ export const MediumRow: StoryFn<{
           <Select.Option>opt3</Select.Option>
         </Select>
         <Button data-size={size}>Knapp</Button>
-        <Combobox data-size={size}>
-          <Combobox.Option value='sogndal'>Sogndal</Combobox.Option>
-          <Combobox.Option value='stavanger'>Stavanger</Combobox.Option>
-        </Combobox>
+        <Suggestion>
+          <Suggestion.Input />
+          <Suggestion.Clear />
+          <Suggestion.List>
+            <Suggestion.Empty>Tomt</Suggestion.Empty>
+            {DATA_PLACES.map((place) => (
+              <Suggestion.Option key={place} value={place}>
+                {place}
+                <div>Kommune</div>
+              </Suggestion.Option>
+            ))}
+          </Suggestion.List>
+        </Suggestion>
       </div>
       <br />
       <div

From f36010e5060269620573789fe7bb42fef884c1ca Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Thu, 27 Feb 2025 09:39:38 +0100
Subject: [PATCH 2/3] disable some a11y

---
 apps/_components/src/Showcase/Showcase.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/apps/_components/src/Showcase/Showcase.tsx b/apps/_components/src/Showcase/Showcase.tsx
index 21813b0f79..11fdb76a6b 100644
--- a/apps/_components/src/Showcase/Showcase.tsx
+++ b/apps/_components/src/Showcase/Showcase.tsx
@@ -337,3 +337,23 @@ export function Showcase({ className, ...props }: ShowcaseProps) {
     </div>
   );
 }
+
+Showcase.parameters = {
+  a11y: {
+    // TODO: these rules should be enabled after figuring out why they occur.
+    // for some reason it says `aria-expanded` is not allowed
+    config: {
+      rules: [
+        {
+          id: 'aria-allowed-attr',
+          enabled: false,
+        },
+        /* It does not like role="combobox" either */
+        {
+          id: 'aria-allowed-role',
+          enabled: false,
+        },
+      ],
+    },
+  },
+};

From c80f7d55015ec5fcbb92eb168b95c9831baf9813 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Thu, 27 Feb 2025 09:44:33 +0100
Subject: [PATCH 3/3] parameters in correct place

---
 apps/_components/src/Showcase/Showcase.tsx  | 20 --------------------
 apps/storybook/stories/showcase.stories.tsx | 17 +++++++++++++++++
 2 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/apps/_components/src/Showcase/Showcase.tsx b/apps/_components/src/Showcase/Showcase.tsx
index 11fdb76a6b..21813b0f79 100644
--- a/apps/_components/src/Showcase/Showcase.tsx
+++ b/apps/_components/src/Showcase/Showcase.tsx
@@ -337,23 +337,3 @@ export function Showcase({ className, ...props }: ShowcaseProps) {
     </div>
   );
 }
-
-Showcase.parameters = {
-  a11y: {
-    // TODO: these rules should be enabled after figuring out why they occur.
-    // for some reason it says `aria-expanded` is not allowed
-    config: {
-      rules: [
-        {
-          id: 'aria-allowed-attr',
-          enabled: false,
-        },
-        /* It does not like role="combobox" either */
-        {
-          id: 'aria-allowed-role',
-          enabled: false,
-        },
-      ],
-    },
-  },
-};
diff --git a/apps/storybook/stories/showcase.stories.tsx b/apps/storybook/stories/showcase.stories.tsx
index f1eb3d6fed..e097d38499 100644
--- a/apps/storybook/stories/showcase.stories.tsx
+++ b/apps/storybook/stories/showcase.stories.tsx
@@ -16,6 +16,23 @@ export default {
         },
       },
     },
+    a11y: {
+      // TODO: these rules should be enabled after figuring out why they occur.
+      // for some reason it says `aria-expanded` is not allowed
+      config: {
+        rules: [
+          {
+            id: 'aria-allowed-attr',
+            enabled: false,
+          },
+          /* It does not like role="combobox" either */
+          {
+            id: 'aria-allowed-role',
+            enabled: false,
+          },
+        ],
+      },
+    },
   },
 } as Meta;