Docs(web-react): Introduce new stories for form fields #DS-476

Affected components are Checkbox, FieldGroup, FileUploader, Radio, Select, TextArea and TextField.

packages/web-react/src/components/Button/stories/args.tsx

@@ -5,12 +5,12 @@ import { Icon } from '../../Icon';
 export const argTypes = {
   children: {
     control: 'text',
-    description:
-      'This is the place for the content of the button. In the real code you can pass in any JSX. ' +
-      'In this demo you can set any text you want, or use one of the predefined texts: `<Icon />` ' +
-      '(to see how it looks with an Icon) or `<Icon /> Text` (to see how it looks with an Icon ' +
-      'and text).  Please note the predefined texts in this demo are not customizable and have ' +
-      'to be written exactly as shown.',
+    description: `This is the place for the content of the button. In the real code you
+      can pass in any JSX. In this demo you can set any text you want, or use one
+      of the predefined texts: \`<Icon />\` (to see how it looks with an Icon) or
+      \`<Icon /> Text\` (to see how it looks with an Icon and text).  Please note the
+      predefined texts in this demo are not customizable and have to be written exactly
+      as shown.`,
     mapping: {
       '<Icon />': <Icon name="profile" />,
       '<Icon /> Text': (

packages/web-react/src/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ValidationStates } from '../../constants';
+import { Checkbox } from './Checkbox';
+import ReadMe from './README.md';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    autoComplete: {
+      control: 'text',
+    },
+    helperText: {
+      control: 'text',
+    },
+    id: {
+      control: 'text',
+    },
+    isDisabled: {
+      control: 'boolean',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    isChecked: {
+      control: 'boolean',
+      table: {
+        defaultValue: { summary: true },
+      },
+    },
+    isItem: {
+      control: 'boolean',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    isLabelHidden: {
+      control: 'boolean',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    isRequired: {
+      control: 'boolean',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    label: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+    validationState: {
+      control: 'select',
+      options: [...Object.values(ValidationStates), undefined],
+      table: {
+        defaultValue: { summary: undefined },
+      },
+    },
+    validationText: {
+      control: 'object',
+      description:
+        'The validation text. Only visible if validationState is set. Use a string `"foo"` for single validation text or an array for multiple validation texts `["foo", "bar"]`.',
+    },
+    value: {
+      control: 'text',
+    },
+  },
+  args: {
+    autoComplete: 'off',
+    helperText: 'Helper text',
+    id: 'checkbox',
+    isDisabled: false,
+    isChecked: true,
+    isItem: false,
+    isLabelHidden: false,
+    isRequired: false,
+    label: 'Label',
+    name: 'checkbox',
+    validationState: undefined,
+    validationText: 'Validation text',
+    value: 'checkbox',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+
+export const Playground: Story = {
+  name: 'Checkbox',
+};

packages/web-react/src/components/FieldGroup/FieldGroup.stories.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ValidationStates } from '../../constants';
+import { Radio } from '../Radio';
+import { Checkbox } from '../Checkbox';
+import FieldGroup from './FieldGroup';
+import ReadMe from './README.md';
+
+const meta: Meta<typeof FieldGroup> = {
+  title: 'Components/FieldGroup',
+  component: FieldGroup,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    children: {
+      control: 'select',
+      options: ['boxes', 'radios', 'checkboxes'],
+      description: `This is the place for the content of the FieldGroup. In the real code
+        you can pass in any children you want. In this demo we have predefined options:
+        \`boxes\`, \`radios\` and \`checkboxes\`. Please note the predefined options
+        in this demo are not customizable.`,
+      mapping: {
+        boxes: (
+          <>
+            <div className="docs-Box">Item</div>
+            <div className="docs-Box">Item</div>
+            <div className="docs-Box">Item</div>
+          </>
+        ),
+        radios: (
+          <>
+            <Radio label="Radio 1" name="radio" />
+            <Radio label="Radio 2" name="radio" />
+          </>
+        ),
+        checkboxes: (
+          <>
+            <Checkbox label="Checkbox 1" name="checkbox" />
+            <Checkbox label="Checkbox 2" name="checkbox" />
+          </>
+        ),
+      },
+    },
+    form: {
+      control: 'text',
+    },
+    helperText: {
+      control: 'text',
+    },
+    id: {
+      control: 'text',
+    },
+    isDisabled: {
+      control: 'boolean',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    isLabelHidden: {
+      control: 'boolean',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    isRequired: {
+      control: 'boolean',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    label: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+    validationState: {
+      control: 'FieldGroup',
+      options: [...Object.values(ValidationStates), undefined],
+      table: {
+        defaultValue: { summary: undefined },
+      },
+    },
+    validationText: {
+      control: 'object',
+      description:
+        'The validation text. Only visible if validationState is set. Use a string `"foo"` for single validation text or an array for multiple validation texts `["foo", "bar"]`.',
+    },
+  },
+  args: {
+    children: 'boxes',
+    helperText: 'Helper text',
+    id: 'FieldGroup',
+    isDisabled: false,
+    isFluid: false,
+    isLabelHidden: false,
+    isRequired: false,
+    label: 'Label',
+    name: 'FieldGroup',
+    validationState: undefined,
+    validationText: 'Validation text',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FieldGroup>;
+
+export const Playground: Story = {
+  name: 'FieldGroup',
+};