docs(Textfield): better prefix and suffix story (#2375)

resolves #2299 Also removed full width story, as this was not adding anything useful to the docs --------- Co-authored-by: Michael Marszalek <[email protected]>
digdir · Sep 6, 2024 · 5efdf2e · 5efdf2e
1 parent 4abf5e6
commit 5efdf2e
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 19 deletions.
diff --git a/packages/react/src/components/form/Textfield/Textfield.mdx b/packages/react/src/components/form/Textfield/Textfield.mdx
@@ -13,6 +13,10 @@ import * as TextfieldStories from './Textfield.stories';
 
 ## Prefix/Suffix
 
+Prefixer og suffixer er nyttige for å vise enheter, valuta eller andre typer informasjon som er relevant for feltet.
+Du skal **ikke** bruke disse alene, siden skjermlesere ikke leser dem opp.
+Det er viktig at samme informasjon som vises i prefixet eller suffixet også er inkludert i ledeteksten.
+
 <Canvas of={TextfieldStories.Adornments} />
 
 ## Antall tegn
@@ -23,10 +27,6 @@ import * as TextfieldStories from './Textfield.stories';
 
 <Canvas of={TextfieldStories.Controlled} />
 
-## Full bredde
-
-<Canvas of={TextfieldStories.FullWidth} />
-
 ## Html Size
 
 <Canvas of={TextfieldStories.HtmlSize} />

diff --git a/packages/react/src/components/form/Textfield/Textfield.stories.tsx b/packages/react/src/components/form/Textfield/Textfield.stories.tsx
@@ -32,30 +32,22 @@ export const WithCharacterCounter: Story = {
   },
 };
 
-export const FullWidth: Story = {
+export const HtmlSize: Story = {
   args: {
     label: 'Label',
-  },
-  parameters: {
-    layout: 'padded',
+    htmlSize: 10,
   },
 };
 
-export const HtmlSize: Story = {
+export const Adornments: Story = {
   args: {
-    label: 'Label',
-    htmlSize: 10,
+    prefix: 'NOK',
+    suffix: 'pr. mnd',
+    size: 'md',
+    label: 'Hvor mange kroner koster det per måned?',
   },
 };
 
-export const Adornments: StoryFn<typeof Textfield> = () => (
-  <div style={{ display: 'grid', gap: 'var(--ds-spacing-2)' }}>
-    <Textfield prefix='prefix' suffix='suffix' size='sm' />
-    <Textfield prefix='prefix' suffix='suffix' size='md' />
-    <Textfield prefix='prefix' suffix='suffix' size='lg' />
-  </div>
-);
-
 export const Controlled: StoryFn<typeof Textfield> = () => {
   const [value, setValue] = useState<string>();
   return (