chore: Improve demo content in Text Input examples (#2157)

Co-authored-by: alimpens <[email protected]>
Co-authored-by: Aram <[email protected]>

Author: VincentSmedinga

storybook/src/components/TextInput/TextInput.docs.mdx

@@ -96,22 +96,30 @@ We follow the advice against using `type="number"` by [NL Design System](https:/
 
 ### Size
 
-The size of the input should be appropriate for the information to be entered.
-Use the `size` attribute to set the right size.
+Make the width of the input appropriate for the information to be entered.
+Use the `size` attribute for this.
+
+Avoid making it too narrow – ensure the user has enough space to operate comfortably.
+This also gives browsers or extensions an opportunity to add an icon or button at the end.
+
+We suggest a size of 15 for a phone number, 30 for an e-mail address, 40 for a web address, and 7 for a postal code.
 
 <Canvas of={TextInputStories.Size} />
 
 ### Placeholder
 
-This text appears in the field when it is empty. It can give a brief hint about the kind of data to enter.
+We advise against placing a placeholder in an input field.
+
+This text would only appear in the field when it is empty, which instead may make it appear filled in.
+Even more so, the text disappears immediately after the user starts typing, which means they are no longer able to check whether their input matches the suggestions.
+Thirdly, their usual grey colour is often difficult to read.
 
-Don’t try too hard to find a suitable text for a placeholder.
-Inputs without placeholder text are just fine – the label and a description should be clear enough.
-Do not use a placeholder instead of a [Label](/docs/components-forms-label--docs).
+Inputs without placeholder text are just fine.
+Any text that you consider for a placeholder can be included in the description.
 
-Follow the [guidelines for placeholder text](https://www.nldesignsystem.nl/richtlijnen/formulieren/placeholders) by NL Design System.
+See also the [guidelines for placeholder text](https://www.nldesignsystem.nl/richtlijnen/formulieren/placeholders) by NL Design System, and [the advice to avoid them](https://design-system.service.gov.uk/components/text-input/#avoid-placeholder-text) by GOV UK.
 
-<Canvas of={TextInputStories.Placeholder} />
+In case third party applications does use placeholders, the component does apply the correct font and colour to them.
 
 ### Invalid
 
@@ -166,4 +174,4 @@ Check [the Field docs](/docs/components-forms-field--docs) for more information
 ## Further reading
 
 - Extensive [guidelines for all types of input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text) on Mozilla Developer Network.
-- An overview of [suitable metadata for various kinds of content](https://nl-design-system.github.io/utrecht/storybook/?path=/docs/react_react-textbox--docs) to be entered by Gemeente Utrecht.
+- At the same site, an overview of [autocompletion values](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete#token_list_tokens) which help enter personal details faster.

storybook/src/components/TextInput/TextInput.stories.tsx

@@ -4,13 +4,15 @@
  */
 
 import { ErrorMessage, Field, Label, Paragraph } from '@amsterdam/design-system-react'
+import { textInputTypes } from '@amsterdam/design-system-react/dist/TextInput/TextInput'
 import { TextInput } from '@amsterdam/design-system-react/src'
 import { Meta, StoryObj } from '@storybook/react-vite'
 
 const meta = {
   title: 'Components/Forms/Text Input',
   component: TextInput,
   args: {
+    defaultValue: 'Amsterdam',
     disabled: false,
     invalid: false,
   },
@@ -28,6 +30,13 @@ const meta = {
       control: { min: 0, type: 'number' },
       description: 'The width, expressed in the average number of characters.',
     },
+    type: {
+      control: {
+        labels: { undefined: 'text (default)' },
+        type: 'radio',
+      },
+      options: [undefined, ...textInputTypes.filter((type) => type !== 'text')],
+    },
   },
 } satisfies Meta<typeof TextInput>
 
@@ -40,27 +49,30 @@ export const Default: Story = {}
 export const EmailAddress: Story = {
   args: {
     defaultValue: '[email protected]',
+    size: 30,
     type: 'email',
   },
 }
 
 export const WebAddress: Story = {
   args: {
     defaultValue: 'https://designsystem.amsterdam/',
+    size: 40,
     type: 'url',
   },
 }
 
 export const PhoneNumber: Story = {
   args: {
     defaultValue: '14020',
+    size: 15,
     type: 'tel',
   },
 }
 
 export const WholeNumber: Story = {
   args: {
-    defaultValue: '1',
+    defaultValue: '20',
     inputMode: 'numeric',
     pattern: '[0-9]*',
     size: 5,
@@ -70,7 +82,7 @@ export const WholeNumber: Story = {
 
 export const DecimalNumber: Story = {
   args: {
-    defaultValue: '1.99',
+    defaultValue: '12.75',
     pattern: '[0-9.,]*',
     size: 5,
     spellCheck: false,
@@ -79,31 +91,29 @@ export const DecimalNumber: Story = {
 
 export const Size: Story = {
   args: {
-    size: 10,
-  },
-}
-
-export const Placeholder: Story = {
-  args: {
-    placeholder: 'Placeholder text',
+    defaultValue: '1011 PN',
+    size: 7,
   },
 }
 
 export const Invalid: Story = {
   args: {
-    defaultValue: 'Invalid value',
+    defaultValue: 'Deze waarde is ongeldig',
     invalid: true,
   },
 }
 
 export const Disabled: Story = {
   args: {
-    defaultValue: 'Disabled input',
+    defaultValue: 'Deze waarde kan niet veranderd worden',
     disabled: true,
   },
 }
 
 export const InAField: Story = {
+  args: {
+    defaultValue: '',
+  },
   render: (args) => (
     <Field invalid={args.invalid}>
       <Label htmlFor="input1">Label</Label>
@@ -116,6 +126,7 @@ export const InAField: Story = {
 
 export const InAFieldWithValidation: Story = {
   args: {
+    defaultValue: '',
     invalid: true,
   },
   render: (args) => (