export as EXPERIMENTAL_Suggestion

digdir · Jan 10, 2025 · b4a2617 · b4a2617
1 parent bf7e449
commit b4a2617
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 63 deletions.
diff --git a/packages/react/src/components/Suggestion/Suggestion.stories.tsx b/packages/react/src/components/Suggestion/Suggestion.stories.tsx
@@ -1,14 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react';
 import { type ChangeEvent, useRef, useState } from 'react';
-import {
-  Button,
-  Divider,
-  Field,
-  Label,
-  Paragraph,
-  Spinner,
-  Suggestion,
-} from '../';
+import { Button, Divider, Field, Label, Paragraph, Spinner } from '../';
+import { EXPERIMENTAL_Suggestion as Suggestion } from './';
 export default {
   title: 'Komponenter/Suggestion',
   component: Suggestion,
@@ -127,56 +120,30 @@ export const DefaultValue: StoryFn<typeof Suggestion> = (args) => {
 };
 
 export const CustomFilter: StoryFn<typeof Suggestion> = (args) => {
-  const emails = ['live.com', 'icloud.com', 'hotmail.com', 'gmail.com'];
   const [value, setValue] = useState('');
-  const [email, setEmail] = useState('');
 
   return (
-    <>
-      <Field>
-        <Label>Skriv inn et tall mellom 1-6</Label>
-        <Suggestion {...args}>
-          <Suggestion.Input
-            value={value}
-            onChange={(event) => setValue(event.target.value)}
-          />
-          <Suggestion.Clear />
-          <Suggestion.List>
-            <Suggestion.Empty>Tomt</Suggestion.Empty>
-            {DATA_PLACES.filter(
-              (_, index) => !value || index === Number(value) - 1,
-            ).map((text) => (
-              // Setting label ensures that item is always displayed regardless of input.value
-              <Suggestion.Option label={value} key={text}>
-                {text}
-              </Suggestion.Option>
-            ))}
-          </Suggestion.List>
-        </Suggestion>
-      </Field>
-      <Field>
-        <Label>Skriv inn din e-post</Label>
-        <Suggestion {...args}>
-          <Suggestion.Input
-            value={email}
-            onChange={(event) => setEmail(event.target.value)}
-          />
-          <Suggestion.Clear />
-          <Suggestion.List>
-            <Suggestion.Empty>Tomt</Suggestion.Empty>
-            {email.includes('@') && (
-              <Suggestion.Option>{email}</Suggestion.Option>
-            )}
-            {emails.map((suffix) => (
-              // Setting label ensures that item is always displayed regardless of input.value
-              <Suggestion.Option label={email} key={suffix}>
-                {`${email.split('@')[0]}@${suffix}`}
-              </Suggestion.Option>
-            ))}
-          </Suggestion.List>
-        </Suggestion>
-      </Field>
-    </>
+    <Field>
+      <Label>Skriv inn et tall mellom 1-6</Label>
+      <Suggestion {...args}>
+        <Suggestion.Input
+          value={value}
+          onChange={(event) => setValue(event.target.value)}
+        />
+        <Suggestion.Clear />
+        <Suggestion.List>
+          <Suggestion.Empty>Tomt</Suggestion.Empty>
+          {DATA_PLACES.filter(
+            (_, index) => !value || index === Number(value) - 1,
+          ).map((text) => (
+            // Setting label ensures that item is always displayed regardless of input.value
+            <Suggestion.Option label={value} key={text}>
+              {text}
+            </Suggestion.Option>
+          ))}
+        </Suggestion.List>
+      </Suggestion>
+    </Field>
   );
 };
 

diff --git a/packages/react/src/components/Suggestion/index.ts b/packages/react/src/components/Suggestion/index.ts
@@ -5,21 +5,29 @@ import { SuggestionInput } from './SuggestionInput';
 import { SuggestionList } from './SuggestionList';
 import { SuggestionOption } from './SuggestionOption';
 
-const Suggestion = Object.assign(SuggestionRoot, {
+const EXPERIMENTAL_Suggestion = Object.assign(SuggestionRoot, {
   List: SuggestionList,
   Input: SuggestionInput,
   Empty: SuggestionEmpty,
   Option: SuggestionOption,
   Clear: SuggestionClear,
 });
 
-Suggestion.List.displayName = 'Suggestion.List';
-Suggestion.Input.displayName = 'Suggestion.Input';
-Suggestion.Empty.displayName = 'Suggestion.Empty';
-Suggestion.Option.displayName = 'Suggestion.Option';
-Suggestion.Clear.displayName = 'Suggestion.Clear';
+EXPERIMENTAL_Suggestion.displayName = 'EXPERIMENTAL_Suggestion';
+EXPERIMENTAL_Suggestion.List.displayName = 'EXPERIMENTAL_Suggestion.List';
+EXPERIMENTAL_Suggestion.Input.displayName = 'EXPERIMENTAL_Suggestion.Input';
+EXPERIMENTAL_Suggestion.Empty.displayName = 'EXPERIMENTAL_Suggestion.Empty';
+EXPERIMENTAL_Suggestion.Option.displayName = 'EXPERIMENTAL_Suggestion.Option';
+EXPERIMENTAL_Suggestion.Clear.displayName = 'EXPERIMENTAL_Suggestion.Clear';
 
-export { Suggestion, SuggestionList, SuggestionInput, SuggestionEmpty };
+export {
+  EXPERIMENTAL_Suggestion,
+  SuggestionList as EXPERIMENTAL_SuggestionList,
+  SuggestionInput as EXPERIMENTAL_SuggestionInput,
+  SuggestionEmpty as EXPERIMENTAL_SuggestionEmpty,
+  SuggestionOption as EXPERIMENTAL_SuggestionOption,
+  SuggestionClear as EXPERIMENTAL_SuggestionClear,
+};
 export type { SuggestionProps } from './Suggestion';
 export type { SuggestionListProps } from './SuggestionList';
 export type { SuggestionInputProps } from './SuggestionInput';