Docs(web-react): Align Field components README examples with other

packages' READMEs

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"
 />
 ```
 

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

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) => {

packages/web-react/src/components/Field/useValidationText.tsx

@@ -3,25 +3,25 @@ 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(
  () =>
  validationState &&
  validationText && (
  <ValidationText
  className={validationTextClassName}
- validationText={validationText}
  elementType={validationElementType}
+ validationText={validationText}
  />
  ),
- [validationState, validationText, validationElementType, validationTextClassName],
+ [validationElementType, validationState, validationText, validationTextClassName],
  );
 };

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

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>

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} />

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>
 );

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

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>
 );

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