From 40e789cd5f03eaabc75f2251bf5a0351efaa5887 Mon Sep 17 00:00:00 2001
From: literat <tomas@litera.me>
Date: Wed, 28 Jun 2023 10:22:57 +0200
Subject: [PATCH] Docs(web-react): Align Field components README examples with
 other packages' READMEs

---
 .../src/components/CheckboxField/README.md    | 23 +++++++++---
 .../web-react/src/components/Field/README.md  | 10 ++++-
 .../src/components/Field/ValidationText.tsx   |  2 +-
 .../components/Field/useValidationText.tsx    | 10 ++---
 .../src/components/RadioField/README.md       | 23 +++++++++++-
 .../web-react/src/components/Select/README.md | 24 +++++++++++-
 .../src/components/TextArea/README.md         | 26 +++++++++++--
 .../stories/TextAreaValidationState.tsx       |  6 +--
 .../src/components/TextField/README.md        | 37 +++++++++++++++++--
 .../stories/TextFieldValidationState.tsx      |  6 +--
 .../src/components/TextFieldBase/README.md    | 36 +++++++++++++++++-
 11 files changed, 173 insertions(+), 30 deletions(-)

diff --git a/packages/web-react/src/components/CheckboxField/README.md b/packages/web-react/src/components/CheckboxField/README.md
index e7d3158d0e..998b3e16cb 100644
--- a/packages/web-react/src/components/CheckboxField/README.md
+++ b/packages/web-react/src/components/CheckboxField/README.md
@@ -1,16 +1,27 @@
 # CheckboxField
 
-CheckboxField enables the user to check/uncheck choice. It has input, a label, and an optional helperText.
-It could be disabled or have a validation state. The label could be hidden and show if the input is required.
+CheckboxField enables the user to check/uncheck choice.
+It has input, a label, and an optional helperText.
+It could be disabled or have a validation state.
+The label could be hidden and show if the input is required.
+
+Basic example usage:
+
+```jsx
+<CheckboxField id="checkboxfieldDefault" label="Label" name="checkboxfieldDefault" />
+```
+
+Advanced example usage:
 
 ```jsx
 <CheckboxField
-  id="example"
-  name="example"
-  isRequired
+  id="checkboxfieldAdvanced"
   isChecked
+  isRequired
+  name="checkboxfieldAdvanced"
+  validationText="validation text"
   validationState="danger"
-  validationText="validation failed"
+  helperText="Helper text"
 />
 ```
 
diff --git a/packages/web-react/src/components/Field/README.md b/packages/web-react/src/components/Field/README.md
index a9a70274e0..c3f163af18 100644
--- a/packages/web-react/src/components/Field/README.md
+++ b/packages/web-react/src/components/Field/README.md
@@ -8,8 +8,16 @@ The ValidationText subcomponent displays validation texts for Field components l
 import { ValidationText } from '@lmc-eu/spirit-web-react/components';
 ```
 
+Basic example usage:
+
+```jsx
+<ValidationText className="Component__validationText" validationText="Danger validation text" />
+```
+
+Advanced example:
+
 ```jsx
-<ValidationText elementType="div" className="TextField__validationText" validationText="This field is required" />
+<ValidationText className="Component__validationText" elementType="span" validationState="danger" />
 ```
 
 ## ValidationText
diff --git a/packages/web-react/src/components/Field/ValidationText.tsx b/packages/web-react/src/components/Field/ValidationText.tsx
index 1661c3f783..4ecf6f389b 100644
--- a/packages/web-react/src/components/Field/ValidationText.tsx
+++ b/packages/web-react/src/components/Field/ValidationText.tsx
@@ -7,8 +7,8 @@ export interface ValidationTextProps extends ValidationTextProp {
 }
 
 const defaultProps = {
-  elementType: 'div',
   className: undefined,
+  elementType: 'div',
 };
 
 export const ValidationText = (props: ValidationTextProps) => {
diff --git a/packages/web-react/src/components/Field/useValidationText.tsx b/packages/web-react/src/components/Field/useValidationText.tsx
index 8d65f0b490..bff99ffd03 100644
--- a/packages/web-react/src/components/Field/useValidationText.tsx
+++ b/packages/web-react/src/components/Field/useValidationText.tsx
@@ -3,14 +3,14 @@ import { ValidationState, ValidationTextType } from '../../types';
 import ValidationText from './ValidationText';
 
 export interface UseValidationTextProps {
-  validationTextClassName?: string;
+  validationElementType?: ElementType;
   validationState?: ValidationState;
   validationText?: ValidationTextType;
-  validationElementType?: ElementType;
+  validationTextClassName?: string;
 }
 
 export const useValidationText = (props: UseValidationTextProps): ReactNode => {
-  const { validationTextClassName, validationState, validationText, validationElementType } = props;
+  const { validationElementType, validationState, validationText, validationTextClassName } = props;
 
   return useMemo(
     () =>
@@ -18,10 +18,10 @@ export const useValidationText = (props: UseValidationTextProps): ReactNode => {
       validationText && (
         <ValidationText
           className={validationTextClassName}
-          validationText={validationText}
           elementType={validationElementType}
+          validationText={validationText}
         />
       ),
-    [validationState, validationText, validationElementType, validationTextClassName],
+    [validationElementType, validationState, validationText, validationTextClassName],
   );
 };
diff --git a/packages/web-react/src/components/RadioField/README.md b/packages/web-react/src/components/RadioField/README.md
index 55d2cddb58..1a9dae6192 100644
--- a/packages/web-react/src/components/RadioField/README.md
+++ b/packages/web-react/src/components/RadioField/README.md
@@ -1,9 +1,28 @@
 # RadioField
 
-Use RadioField when you have a group of mutually exclusive choices and only one selection from the group is allowed. It has input and label. It can be disabled or have a validation state. The label can be hidden.
+Use RadioField when you have a group of mutually exclusive choices and only one selection from the group is allowed.
+It has input and label.
+It can be disabled or have a validation state.
+The label can be hidden.
+
+Basic example usage:
+
+```jsx
+<RadioField id="radiofieldDefault" isChecked label="Label" name="radiofieldDefault" />
+```
+
+Advanced example usage:
 
 ```jsx
-<RadioField id="example" name="example" label="Label text" isChecked />
+<RadioField
+  autocomplete="off"
+  helperText="Helper text"
+  id="radiofieldAdvanced"
+  isChecked
+  label="some label"
+  name="radiofieldAdvanced"
+  validationState="danger"
+/>
 ```
 
 ## Available props
diff --git a/packages/web-react/src/components/Select/README.md b/packages/web-react/src/components/Select/README.md
index a63da2347e..68b869024b 100644
--- a/packages/web-react/src/components/Select/README.md
+++ b/packages/web-react/src/components/Select/README.md
@@ -1,7 +1,29 @@
 # Select
 
+This is React implementation of the [Select][select] component.
+
+Basic example usage:
+
+```jsx
+<Select id="selectDefault" label="Label" name="selectDefault">
+  <option value="" selected>
+    Placeholder
+  </option>
+  <option value="1">Option 1</option>
+  <option value="2">Option 2</option>
+</Select>
+```
+
+Advanced example usage:
+
 ```jsx
-<Select id="example" name="example" validationState="danger" validationText="validation failed" isRequired>
+<Select
+  id="selectAdvanced"
+  name="selectAdvanced"
+  validationState="danger"
+  validationText="validation failed"
+  isRequired
+>
   <option value="" selected disabled>
     Placeholder
   </option>
diff --git a/packages/web-react/src/components/TextArea/README.md b/packages/web-react/src/components/TextArea/README.md
index 163cb7af27..46f382cd01 100644
--- a/packages/web-react/src/components/TextArea/README.md
+++ b/packages/web-react/src/components/TextArea/README.md
@@ -1,14 +1,34 @@
 # TextArea
 
 TextArea enables the user to add longer text to a form.
-It could be disabled or have a validation state with validation text.
+It could be disabled or have a validation state with optional validation text.
 The label could be hidden and show if the textarea is required.
 
+Basic example usage:
+
+```jsx
+<TextArea id="textAreaDefault" label="Label" name="textAreaDefault" />
+```
+
+Advanced example usage:
+
 ```jsx
-<TextArea id="example" name="example" validationState="danger" validationText="validation failed" isRequired />
+<TextArea
+  helperText="custom helper text"
+  id="textAreaAdvanced"
+  isRequired
+  label="Label"
+  maxlength="180"
+  name="textAreaAdvanced"
+  placeholder="Placeholder"
+  rows="10"
+  validationState="danger"
+  validationText="validation failed"
+  value="TextArea"
+/>
 ```
 
-## Textarea with Auto-Height Adjustment
+Example with Auto-Height Adjustment
 
 ```jsx
 <TextArea id="example" name="example" isAutoResizing autoResizingMaxHeight={500} />
diff --git a/packages/web-react/src/components/TextArea/stories/TextAreaValidationState.tsx b/packages/web-react/src/components/TextArea/stories/TextAreaValidationState.tsx
index c789c3de89..d969fa3d8a 100644
--- a/packages/web-react/src/components/TextArea/stories/TextAreaValidationState.tsx
+++ b/packages/web-react/src/components/TextArea/stories/TextAreaValidationState.tsx
@@ -10,21 +10,21 @@ const Story = (props: unknown) => (
       label="Validation success"
       name="textarea-success"
       validationState="success"
-      validationText="Success validationText"
+      validationText="Validation text"
     />
     <TextArea
       id="textarea-warning"
       label="Validation warning"
       name="textarea-warning"
       validationState="warning"
-      validationText="Warning validationText"
+      validationText="Validation text"
     />
     <TextArea
       id="textarea-danger"
       label="Validation danger"
       name="textarea-danger"
       validationState="danger"
-      validationText={['Danger validationText', 'Second Danger validationText']}
+      validationText={['Validation text', 'Second validation text']}
     />
   </div>
 );
diff --git a/packages/web-react/src/components/TextField/README.md b/packages/web-react/src/components/TextField/README.md
index ef5b50d789..c7cfe277e9 100644
--- a/packages/web-react/src/components/TextField/README.md
+++ b/packages/web-react/src/components/TextField/README.md
@@ -5,10 +5,41 @@ label, and an optional helper text. It supports several input types like `text`
 `password` etc. It can be disabled or have a validation state. The label can be
 hidden or show if the input is required.
 
+Basic example usage:
+
+```jsx
+<TextField id="textFieldDefault" name="textFieldDefault" />
+```
+
+Advanced example usage:
+
+```jsx
+<TextField
+  helperText="custom helper text"
+  id="textFieldAdvanced"
+  isRequired
+  label="Label"
+  name="textFieldAdvanced"
+  placeholder="Placeholder"
+  type="text"
+  validationState="danger"
+  validationText="validation failed"
+/>
+```
+
+TextField with password toggle (button to reveal the password):
+
 ```jsx
-<TextField id="example-text" name="example" validationState="danger" validationText="validation failed" isRequired />
-<TextField id="example-password" type="password" name="example" validationState="danger" validationText="validation failed" isRequired />
-<TextField id="example-password-toggle" name="example" validationState="danger" validationText="validation failed" hasPasswordToggle isRequired />
+<TextField
+  hasPasswordToggle
+  id="textFieldPasswordToggle"
+  isRequired
+  label="Password"
+  name="textFieldPasswordToggle"
+  placeholder="Placeholder"
+  validationState="danger"
+  validationText="validation failed"
+/>
 ```
 
 ## Available props
diff --git a/packages/web-react/src/components/TextField/stories/TextFieldValidationState.tsx b/packages/web-react/src/components/TextField/stories/TextFieldValidationState.tsx
index bdf8a58086..770c8ffd6a 100644
--- a/packages/web-react/src/components/TextField/stories/TextFieldValidationState.tsx
+++ b/packages/web-react/src/components/TextField/stories/TextFieldValidationState.tsx
@@ -10,21 +10,21 @@ const Story = (props: unknown) => (
       label="Validation success"
       name="textfield-success"
       validationState="success"
-      validationText="Success validationText"
+      validationText="Validation text"
     />
     <TextField
       id="textfield-warning"
       label="Validation warning"
       name="textfield-warning"
       validationState="warning"
-      validationText="Warning validationText"
+      validationText="Validation text"
     />
     <TextField
       id="textfield-danger"
       label="Validation danger"
       name="textfield-danger"
       validationState="danger"
-      validationText={['Danger validationText', 'Second Danger validationText']}
+      validationText={['Validation text', 'Second validation text']}
     />
   </div>
 );
diff --git a/packages/web-react/src/components/TextFieldBase/README.md b/packages/web-react/src/components/TextFieldBase/README.md
index faacbe2e77..1e0bf3467a 100644
--- a/packages/web-react/src/components/TextFieldBase/README.md
+++ b/packages/web-react/src/components/TextFieldBase/README.md
@@ -2,9 +2,41 @@
 
 This is React implementation of the abstract component TextFieldBase for the purposes of the form components [TextField] and [TextArea].
 
+Basic example usage:
+
+```jsx
+<TextFieldBase id="textFieldBaseDefault" label="Example TextFieldBase" name="textFieldBaseDefault" />
+```
+
+Advanced example usage:
+
+```jsx
+<TextFieldBase
+  helperText="custom helper text"
+  id="textFieldBaseAdvanced"
+  isMultiline
+  isRequired
+  label="Example multiline TextFieldBase"
+  name="textFieldBaseAdvanced"
+  placeholder="Placeholder"
+  validationState="danger"
+  validationText="validation failed"
+/>
+```
+
+TextFieldBase with password toggle (button to reveal the password):
+
 ```jsx
-<TextFieldBase id="example" label="Example TextFieldBase" name="example" isRequired validationState="danger" validationText="validation failed" />
-<TextFieldBase id="example" label="Example multiline TextFieldBase" name="example" isMultiline isRequired validationState="danger" validationText="validation failed" />
+<TextFieldBase
+  hasPasswordToggle
+  id="textFieldBasePasswordToggle"
+  isRequired
+  label="Password"
+  name="textFieldBasePasswordToggle"
+  placeholder="Placeholder"
+  validationState="danger"
+  validationText="validation failed"
+/>
 ```
 
 ## Available props