Docs(web-react): Add TextArea demo #DS-912

- TextArea demo in web-react is now same as demo in web and web-twig

packages/web-react/src/components/TextArea/demo/TextAreaAutoResize.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import TextArea from '../TextArea';
+
+const TextAreaAutoResize = () => {
+  return <TextArea id="textareaAutoResize" label="Label" name="textareaAutoResize" isAutoResizing />;
+};
+
+export default TextAreaAutoResize;

packages/web-react/src/components/TextArea/demo/TextAreaDefault.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import TextArea from '../TextArea';
+
+const TextAreaDefault = () => (
+  <>
+    <TextArea id="textareaDefault" label="Label" name="textareaDefault" placeholder="Placeholder" />
+
+    <TextArea id="textareaFilled" label="Label" name="textareaFilled" placeholder="Placeholder" value="Filled" />
+  </>
+);
+
+export default TextAreaDefault;

packages/web-react/src/components/TextArea/demo/TextAreaDisabled.tsx

@@ -1,19 +1,20 @@
 import React from 'react';
 import TextArea from '../TextArea';
 
-// @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' }}>
-    <TextArea id="textarea-disabled" label="Disabled" name="textarea-disabled" isDisabled />
+const TextAreaDisabled = () => (
+  <>
+    <TextArea id="textareaDisabled" label="Label" name="textareaDisabled" placeholder="Placeholder" isDisabled />
+
     <TextArea
-      id="textarea-disabled-filled"
-      label="Disabled filled"
-      name="textarea-disabled-filled"
-      value="TextArea value"
+      id="textareaDisabledFilled"
+      label="Label"
+      name="textareaDisabledFilled"
+      placeholder="Placeholder"
+      value="Filled"
       isDisabled
+      isRequired
     />
-  </div>
+  </>
 );
 
-export default Story;
+export default TextAreaDisabled;

packages/web-react/src/components/TextArea/demo/TextAreaFluid.tsx

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

packages/web-react/src/components/TextArea/demo/TextAreaHelperText.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 { SpiritTextAreaProps } from '../../../types';
 import TextArea from '../TextArea';
 
-const Story: ComponentStory<typeof TextArea> = (args: SpiritTextAreaProps) => <TextArea {...args} />;
+const TextAreaHelperText = () => (
+  <TextArea
+    helperText="Helper text"
+    id="textareaHelperText"
+    label="Label"
+    name="textareaHelperText"
+    placeholder="Placeholder"
+  />
+);
 
-Story.args = {
-  id: 'textarea-helper-text-example',
-  label: 'Label with helper text',
-  helperText: 'Custom helper text',
-};
-
-export default Story;
+export default TextAreaHelperText;

packages/web-react/src/components/TextArea/demo/TextAreaHiddenLabel.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import TextArea from '../TextArea';
+
+const TextAreaHiddenLabel = () => (
+  <TextArea id="textareaHiddenLabel" label="Label" name="textareaHiddenLabel" placeholder="Placeholder" isLabelHidden />
+);
+
+export default TextAreaHiddenLabel;

packages/web-react/src/components/TextArea/demo/TextAreaInline.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Button } from '../../Button';
+import TextArea from '../TextArea';
+
+const TextAreaInline = () => (
+  <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start' }}>
+    <TextArea
+      id="textareaInline"
+      isLabelHidden
+      label="Hidden Label"
+      name="textareaInline"
+      placeholder="Placeholder"
+      value="Filled"
+    />
+    <Button>Button</Button>
+  </div>
+);
+
+export default TextAreaInline;

packages/web-react/src/components/TextArea/demo/TextAreaRequired.tsx

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

packages/web-react/src/components/TextArea/demo/TextAreaValidation.tsx

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

packages/web-react/src/components/TextArea/demo/index.tsx

@@ -5,47 +5,47 @@ import ReactDOM from 'react-dom/client';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment, import/extensions, import/no-unresolved
 // @ts-ignore: No declaration file
 import icons from '@lmc-eu/spirit-icons/dist/icons';
-import { IconsProvider } from '../../../context';
 import DocsSection from '../../../../docs/DocsSections';
-import TextArea from './TextArea';
+import { IconsProvider } from '../../../context';
+import TextAreaDefault from './TextAreaDefault';
+import TextAreaRequired from './TextAreaRequired';
+import TextAreaHiddenLabel from './TextAreaHiddenLabel';
+import TextAreaHelperText from './TextAreaHelperText';
 import TextAreaDisabled from './TextAreaDisabled';
+import TextAreaValidation from './TextAreaValidation';
 import TextAreaFluid from './TextAreaFluid';
-import TextAreaInputHeight from './TextAreaInputHeight';
-import TextAreaLabelHidden from './TextAreaLabelHidden';
-import TextAreaLabelRequired from './TextAreaRequired';
-import TextAreaValidationState from './TextAreaValidationState';
-import TextAreaWithAutoResize from './TextAreaWithAutoResize';
-import TextAreaHelperText from './TextAreaHelperText';
+import TextAreaInline from './TextAreaInline';
+import TextAreaAutoResize from './TextAreaAutoResize';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <IconsProvider value={icons}>
       <DocsSection title="Default">
-        <TextArea {...TextArea.args} />
+        <TextAreaDefault />
       </DocsSection>
-      <DocsSection title="Disabled">
-        <TextAreaDisabled />
+      <DocsSection title="Required">
+        <TextAreaRequired />
       </DocsSection>
-      <DocsSection title="Fluid">
-        <TextAreaFluid />
+      <DocsSection title="Hidden Label">
+        <TextAreaHiddenLabel />
       </DocsSection>
-      <DocsSection title="Input Height">
-        <TextAreaInputHeight />
+      <DocsSection title="Helper Text">
+        <TextAreaHelperText />
       </DocsSection>
-      <DocsSection title="Label Hidden">
-        <TextAreaLabelHidden />
+      <DocsSection title="Disabled">
+        <TextAreaDisabled />
       </DocsSection>
-      <DocsSection title="Required">
-        <TextAreaLabelRequired />
+      <DocsSection title="Validation State with Validation Text">
+        <TextAreaValidation />
       </DocsSection>
-      <DocsSection title="Validation State">
-        <TextAreaValidationState />
+      <DocsSection title="Fluid">
+        <TextAreaFluid />
       </DocsSection>
-      <DocsSection title="With Auto Resize">
-        <TextAreaWithAutoResize />
+      <DocsSection title="Inline">
+        <TextAreaInline />
       </DocsSection>
-      <DocsSection title="Helper Text">
-        <TextAreaHelperText {...TextAreaHelperText.args} />
+      <DocsSection title="AutoResize">
+        <TextAreaAutoResize />
       </DocsSection>
     </IconsProvider>
   </React.StrictMode>,