Docs(web-react, web): Add TextField demo #DS-913

packages/web-react/src/components/TextField/demo/TextFieldDefault.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import TextField from '../TextField';
+
+const TextFieldDefault = () => (
+  <>
+    <TextField id="textfieldDefault" label="Label" name="textfieldDefault" placeholder="Placeholder" />
+
+    <TextField id="textfieldFilled" label="Label" name="textfieldFilled" placeholder="Placeholder" value="Filled" />
+
+    <TextField
+      id="textfieldPassword"
+      label="Label"
+      name="textfieldPassword"
+      placeholder="Placeholder"
+      value="Filled"
+      type="password"
+    />
+  </>
+);
+
+export default TextFieldDefault;

packages/web-react/src/components/TextField/demo/TextFieldDisabled.tsx

@@ -1,19 +1,20 @@
 import React from 'react';
 import TextField from '../TextField';
 
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1.5rem 1rem' }}>
-    <TextField id="textfield-disabled" label="Disabled" name="textfield-disabled" isDisabled />
+const TextFieldDisabled = () => (
+  <>
+    <TextField id="textfieldDisabled" label="Label" name="textfieldDisabled" placeholder="Placeholder" isDisabled />
+
     <TextField
-      id="textfield-disabled-filled"
-      label="Disabled filled"
-      name="textfield-disabled-filled"
-      value="TextField value"
+      id="textfieldDisabledFilled"
+      label="Label"
+      name="textfieldDisabledFilled"
+      placeholder="Placeholder"
+      value="Filled"
       isDisabled
+      isRequired
     />
-  </div>
+  </>
 );
 
-export default Story;
+export default TextFieldDisabled;

packages/web-react/src/components/TextField/demo/TextFieldFluid.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import TextField from '../TextField';
 
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => <TextField id="textfield-fluid" label="Fluid" name="textfield-fluid" isFluid />;
+const TextFieldFluid = () => (
+  <TextField id="textfieldFluid" isFluid label="Label" name="textfieldFluid" placeholder="Placeholder" value="Filled" />
+);
 
-export default Story;
+export default TextFieldFluid;

packages/web-react/src/components/TextField/demo/TextFieldHelperText.tsx

@@ -1,18 +1,14 @@
-// Because there is no `dist` directory during the CI run
-/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */
 import React from 'react';
-import { ComponentStory } from '@storybook/react';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore: No declaration file
-import { SpiritTextFieldProps } from '../../../types';
 import TextField from '../TextField';
 
-const Story: ComponentStory<typeof TextField> = (args: SpiritTextFieldProps) => <TextField {...args} />;
+const TextFieldHelperText = () => (
+  <TextField
+    helperText="Helper text"
+    id="textfieldHelperText"
+    label="Label"
+    name="textfieldHelperText"
+    placeholder="Placeholder"
+  />
+);
 
-Story.args = {
-  id: 'textfield-helper-text-example',
-  label: 'Label with helper text',
-  helperText: 'Custom helper text',
-};
-
-export default Story;
+export default TextFieldHelperText;

packages/web-react/src/components/TextField/demo/TextFieldHiddenLabel.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import TextField from '../TextField';
+
+const TextFieldHiddenLabel = () => (
+  <TextField
+    id="textfieldHiddenLabel"
+    label="Label"
+    name="textfieldHiddenLabel"
+    placeholder="Placeholder"
+    isLabelHidden
+  />
+);
+
+export default TextFieldHiddenLabel;

packages/web-react/src/components/TextField/demo/TextFieldInline.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Button } from '../../Button';
+import TextField from '../TextField';
+
+const TextFieldInline = () => (
+  <>
+    <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start', maxWidth: '320px' }}>
+      <TextField
+        id="textfieldInline"
+        isLabelHidden
+        label="Hidden Label"
+        name="textfieldInline"
+        placeholder="Placeholder"
+        value="Filled"
+      />
+      <Button>Button</Button>
+    </div>
+
+    <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start', maxWidth: '320px' }}>
+      <TextField
+        id="textfieldInlineFirst"
+        isLabelHidden
+        label="Hidden Label"
+        name="textfieldInlineFirst"
+        placeholder="Placeholder"
+        value="Filled"
+      />
+      <TextField
+        id="textfieldInlinePassword"
+        isLabelHidden
+        label="Hidden Label"
+        hasPasswordToggle
+        name="textfieldInlinePassword"
+        validationState="danger"
+        validationText="Too short"
+        placeholder="Placeholder"
+        value="1234"
+      />
+      <Button>Button</Button>
+    </div>
+  </>
+);
+
+export default TextFieldInline;

packages/web-react/src/components/TextField/demo/TextFieldInputWidth.tsx

@@ -1,10 +1,15 @@
 import React from 'react';
 import TextField from '../TextField';
 
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <TextField id="textfield-with-input-width" label="Width 10 em" name="textfield-with-size" inputWidth={10} />
+const TextFieldInputWidth = () => (
+  <TextField
+    id="textfieldSize"
+    isFluid
+    label="4000 (in Roman numerals)"
+    name="textfieldSize"
+    placeholder="Placeholder"
+    inputWidth={4}
+  />
 );
 
-export default Story;
+export default TextFieldInputWidth;

packages/web-react/src/components/TextField/demo/TextFieldPasswordToggle.tsx

@@ -1,15 +1,25 @@
 import React from 'react';
 import TextField from '../TextField';
 
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <TextField
-    id="textfield-password-toggle"
-    label="Password toggle"
-    name="textfield-password-toggle"
-    hasPasswordToggle
-  />
+const TextFieldPasswordToggle = () => (
+  <>
+    <TextField
+      id="textfieldPasswordToggle"
+      label="Password Toggle"
+      hasPasswordToggle
+      name="textfieldPasswordToggle"
+      placeholder="Password must be at least 6 characters long"
+    />
+
+    <TextField
+      id="textfieldPasswordToggleDisabled"
+      label="Password Toggle"
+      hasPasswordToggle
+      isDisabled
+      name="textfieldPasswordToggleDisabled"
+      placeholder="Password must be at least 6 characters long"
+    />
+  </>
 );
 
-export default Story;
+export default TextFieldPasswordToggle;

packages/web-react/src/components/TextField/demo/TextFieldRequired.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
 import TextField from '../TextField';
 
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <TextField id="textfield-required" label="Required" name="textfield-required" isRequired />
+const TextFieldRequired = () => (
+  <TextField id="textfieldRequired" label="Label" name="textfieldRequired" placeholder="Placeholder" isRequired />
 );
 
-export default Story;
+export default TextFieldRequired;

packages/web-react/src/components/TextField/demo/TextFieldValidation.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import TextField from '../TextField';
+
+const TextFieldValidation = () => (
+  <>
+    <TextField
+      id="textfieldSuccess"
+      label="Label"
+      name="textfieldSuccess"
+      placeholder="Placeholder"
+      validationState="success"
+      value="Filled"
+    />
+
+    <TextField
+      id="textfieldWarning"
+      label="Label"
+      validationText="Validation text"
+      name="textfieldWarning"
+      placeholder="Placeholder"
+      validationState="warning"
+      value="Filled"
+    />
+
+    <TextField
+      id="textfieldDanger"
+      label="Label"
+      validationText={['Validation text', 'Second validation text']}
+      name="textfieldDanger"
+      placeholder="Placeholder"
+      validationState="danger"
+      value="Filled"
+    />
+
+    <TextField
+      id="textfieldDangerHelper"
+      isRequired
+      label="Label"
+      helperText="This is helper text"
+      validationText="Danger validation text"
+      validationState="danger"
+      name="textfieldDangerHelper"
+      placeholder="Placeholder"
+      value="Filled"
+    />
+  </>
+);
+
+export default TextFieldValidation;