Style(web-react): Fix docs using makrdown linter

refs #DS-1100

.remarkignore

@@ -11,4 +11,5 @@ build
 docs
 form-validations
 web-twig
-web-react
+# Codemods transforms directory
+transforms

.remarkrc.mjs

@@ -48,8 +48,14 @@ export default {
           'v1',
           'v2',
           'v3',
+          'v4',
+          'vs',
         ],
       },
     ],
+
+    // Maximum length of the titles
+    // @see: https://github.com/remarkjs/remark-lint/tree/main/packages/remark-lint-maximum-heading-length
+    ['remark-lint-maximum-heading-length', 120],
   ],
 };

packages/web-react/CONTRIBUTING.md

@@ -2,7 +2,7 @@
 
 > Guide for Spirit Web React contributors.
 
-## Adding new component
+## Adding New Component
 
 Do not forget to export and register new component in all necessary places.
 
@@ -13,7 +13,7 @@ Do not forget to export and register new component in all necessary places.
 
 This is an example of a typical file structure of a component:
 
-```
+```text
 ├── src
     └── components
         ├── index.ts — components root

packages/web-react/DEPRECATIONS.md

@@ -8,6 +8,9 @@ This document lists all deprecations that will be removed in the next major vers
 
 👉 [What are deprecations?][readme-deprecations]
 
+<!-- @see: https://jira.almacareer.tech/browse/DS-1604 -->
+<!--lint ignore heading-capitalization-->
+
 ### UncontrolledCollapse `isDisposable`
 
 The `hideOnCollapse` prop was removed, please use `isDisposable` instead.

packages/web-react/README.md

@@ -1,3 +1,6 @@
+<!-- @see: https://jira.almacareer.tech/browse/DS-1604 -->
+<!--lint ignore heading-capitalization-->
+
 # @lmc-eu/spirit-web-react
 
 [![minified](https://badgen.net/bundlephobia/min/@lmc-eu/spirit-web-react)](https://bundlephobia.com/package/@lmc-eu/spirit-web-react)
@@ -41,7 +44,7 @@ Import React components in your app:
 import { Button } from '@lmc-eu/spirit-web-react/components/Button';
 ```
 
-### Prefixing CSS classes in components
+### Prefixing CSS Classes in Components
 
 If you want to prefix the component classes with your own namespace, you can use the `ClassNamePrefixProvider` context to provide a prefix to all components in your app.
 
@@ -124,7 +127,7 @@ are doing so at your own risk.
 
 Please consult additional styling with [web package documentation][web-pkg-rebrand].
 
-## Controlled vs Uncontrolled components
+## Controlled vs Uncontrolled Components
 
 - A [Controlled Component][react-controlled] is one that takes its current
   value through props and notifies changes through callbacks like onChange.
@@ -150,7 +153,7 @@ Check your browser console to see if you are using any of the deprecated functio
 
 👉 [See the DEPRECATIONS file][all-deprecations] for the list of all deprecations.
 
-### Warnings in environments
+### Warnings in Environments
 
 #### Production
 
@@ -180,7 +183,7 @@ afterEach(() => {
 
 ## Examples
 
-👀 See [examples] for a live demo.
+👀 See [examples][examples] for a live demo.
 
 ## License
 

packages/web-react/src/components/Accordion/README.md

@@ -2,15 +2,15 @@
 
 ## Usage
 
-### Default (Stay open)
+### Default (Stay Open)
 
 ```javascript
 import React, { useState } from 'react';
 import { Accordion, AccordionItem, AccordionHeader, AccordionContent } from '@lmc-eu/spirit-web-react/components';
 import { AccordionOpenStateType } from '@lmc-eu/spirit-web-react/types';
 ```
 
-```
+```typescript
 const [openState, setOpenState] = useState<AccordionOpenStateType>(undefined);
 ```
 
@@ -52,19 +52,19 @@ const toggle = (id) => {
 </Accordion>
 ```
 
-### Default with opened on init
+### Default with Opened on Init
 
-```
+```typescript
 const [openState, setOpenState] = useState<AccordionOpenStateType>(['accordion-item-example-1']);
 ```
 
-### Open only one at a time
+### Open Only One at a Time
 
-```
+```typescript
 const [openState, setOpenState] = useState<AccordionOpenStateType>('');
 ```
 
-### Uncontrolled Accordion (Stay open)
+### Uncontrolled Accordion (Stay Open)
 
 ```javascript
 import {
@@ -89,7 +89,7 @@ import { AccordionOpenStateType } from '@lmc-eu/spirit-web-react/types';
 </UncontrolledAccordion>
 ```
 
-### Uncontrolled Accordion with default open value (Stay open)
+### Uncontrolled Accordion with Default Open Value (Stay Open)
 
 ```javascript
 <UncontrolledAccordion defaultOpen={['accordion-item-example-1']} stayOpen>
@@ -104,7 +104,7 @@ import { AccordionOpenStateType } from '@lmc-eu/spirit-web-react/types';
 </UncontrolledAccordion>
 ```
 
-### Uncontrolled Accordion with open only one at a time
+### Uncontrolled Accordion with Open Only One at a Time
 
 ```javascript
 <UncontrolledAccordion>
@@ -119,7 +119,7 @@ import { AccordionOpenStateType } from '@lmc-eu/spirit-web-react/types';
 </UncontrolledAccordion>
 ```
 
-### Uncontrolled Accordion with open only one at a time and default open value
+### Uncontrolled Accordion with Open Only One at a Time and Default Open Value
 
 ```javascript
 <UncontrolledAccordion defaultOpen="accordion-item-example-1">
@@ -136,12 +136,12 @@ import { AccordionOpenStateType } from '@lmc-eu/spirit-web-react/types';
 
 ## Accordion Props
 
-| Name          | Type                              | Default   | Required | Description                                      |
-| ------------- | --------------------------------- | --------- | -------- | ------------------------------------------------ |
-| `children`    | `ReactNode`                       | —         | ✓        | Accordion children's nodes                       |
-| `elementType` | [`section` \| `article` \| `div`] | `section` | ✕        | Type of element used as wrapper                  |
-| `open`        | [`string` \| `string[]`]          | —         | ✕        | Open item or list of open items \*               |
-| `toggle`      | `(id: string) => void`            | —         | ✕        | A generic handler for a single **AccordionItem** |
+| Name          | Type                               | Default   | Required | Description                                      |
+| ------------- | ---------------------------------- | --------- | -------- | ------------------------------------------------ |
+| `children`    | `ReactNode`                        | —         | ✓        | Accordion children's nodes                       |
+| `elementType` | \[`section` \| `article` \| `div`] | `section` | ✕        | Type of element used as wrapper                  |
+| `open`        | \[`string` \| `string[]`]          | —         | ✕        | Open item or list of open items \*               |
+| `toggle`      | `(id: string) => void`             | —         | ✕        | A generic handler for a single **AccordionItem** |
 
 (\*) Depending on the type of default value, what is set as the default will affect whether one or more will be open at the same time.
 
@@ -151,12 +151,12 @@ and [escape hatches][readme-escape-hatches].
 
 ## Uncontrolled Accordion Props
 
-| Name          | Type                              | Default   | Required | Description                                    |
-| ------------- | --------------------------------- | --------- | -------- | ---------------------------------------------- |
-| `children`    | `ReactNode`                       | —         | ✓        | Accordion children's nodes                     |
-| `defaultOpen` | [`string` \| `string[]`]          | —         | ✕        | Default open item(s) \*                        |
-| `elementType` | [`section` \| `article` \| `div`] | `section` | ✕        | Type of element used as wrapper                |
-| `stayOpen`    | `bool`                            | —         | ✕        | Item stay open when another one is also opened |
+| Name          | Type                               | Default   | Required | Description                                    |
+| ------------- | ---------------------------------- | --------- | -------- | ---------------------------------------------- |
+| `children`    | `ReactNode`                        | —         | ✓        | Accordion children's nodes                     |
+| `defaultOpen` | \[`string` \| `string[]`]          | —         | ✕        | Default open item(s) \*                        |
+| `elementType` | \[`section` \| `article` \| `div`] | `section` | ✕        | Type of element used as wrapper                |
+| `stayOpen`    | `bool`                             | —         | ✕        | Item stay open when another one is also opened |
 
 (\*) If this attribute is an array, then the `stayOpen` parameter should also be set.
 
@@ -166,11 +166,11 @@ and [escape hatches][readme-escape-hatches].
 
 ## AccordionItem Props
 
-| Name          | Type                              | Default   | Required | Description                                     |
-| ------------- | --------------------------------- | --------- | -------- | ----------------------------------------------- |
-| `children`    | `ReactNode`                       | —         | ✓        | Item children node                              |
-| `elementType` | [`article` \| `section` \| `div`] | `article` | ✕        | Type of element used as wrapper for single item |
-| `id`          | `string`                          | —         | ✓        | Item id                                         |
+| Name          | Type                               | Default   | Required | Description                                     |
+| ------------- | ---------------------------------- | --------- | -------- | ----------------------------------------------- |
+| `children`    | `ReactNode`                        | —         | ✓        | Item children node                              |
+| `elementType` | \[`article` \| `section` \| `div`] | `article` | ✕        | Type of element used as wrapper for single item |
+| `id`          | `string`                           | —         | ✓        | Item id                                         |
 
 On top of the API options, the components accept [additional attributes][readme-additional-attributes].
 If you need more control over the styling of a component, you can use [style props][readme-style-props]

packages/web-react/src/components/Alert/README.md

@@ -15,7 +15,7 @@ import { Alert } from '@lmc-eu/spirit-web-react/components';
 <Alert color="informative" isCentered>Hey! Pay attention!</Alert>
 ```
 
-## Default Icons according to Color Variant
+## Default Icons According to Color Variant
 
 | Color name    | Icon name     |
 | ------------- | ------------- |

packages/web-react/src/components/Breadcrumbs/README.md

@@ -37,7 +37,7 @@ Simply pass the breadcrumbs array as a prop:
 <Breadcrumbs items={items} goBackTitle="Custom back link translation" />
 ```
 
-### Custom usage
+### Custom Usage
 
 Use custom content for the ordered list as component's children instead of passing breadcrumb items array via props:
 
@@ -97,7 +97,7 @@ On top of the API options, the components accept [additional attributes][readme-
 If you need more control over the styling of a component, you can use [style props][readme-style-props]
 and [escape hatches][readme-escape-hatches].
 
-### Dealing with long titles
+### Dealing with Long Titles
 
 When you need to shorten the title of the BreadcrumbsItem the preferred way is to use platform native helpers.
 There are multiple ways in JavaScript which will truncate a string for you like `.slice` or `.substring`, e.g. `str.slice(0, num) + '…'`.

packages/web-react/src/components/Button/README.md

@@ -2,7 +2,7 @@
 
 This is React implementation of the [Button][button].
 
-### Basic example usage
+## Basic Example Usage
 
 ```jsx
 import { Button } from '@lmc-eu/spirit-web-react';
@@ -19,7 +19,7 @@ import { Button } from '@lmc-eu/spirit-web-react';
   <Button color="danger">Click me</Button>
 ```
 
-### Example usage with third-party component
+### Example Usage with Third-Party Component
 
 So if you use a third-party component, the Button will take on all of its proper attributes.
 

packages/web-react/src/components/ButtonLink/README.md

@@ -1,6 +1,6 @@
 # ButtonLink
 
-### Basic example usage
+## Basic Example Usage
 
 ```jsx
 import { ButtonLink } from '@lmc-eu/spirit-web-react';

packages/web-react/src/components/Checkbox/README.md

@@ -48,7 +48,7 @@ On top of the API options, the components accept [additional attributes][readme-
 If you need more control over the styling of a component, you can use [style props][readme-style-props]
 and [escape hatches][readme-escape-hatches].
 
-## Custom component
+## Custom Component
 
 Text field classes are fabricated using `useCheckboxStyleProps` hook. You can use it to create your own custom Checkbox component.
 

packages/web-react/src/components/Collapse/README.md

@@ -20,7 +20,7 @@ const [isOpen, toggle] = useState<boolean>(true);
 </Collapse>
 ```
 
-### With toggle from hook
+### With Toggle From Hook
 
 ```javascript
 import React, { useState} from 'react';
@@ -38,7 +38,7 @@ const { isOpen, toggle } = useCollapse(false);
 </Collapse>
 ```
 
-### With toggle handler from hook
+### With Toggle Handler From Hook
 
 ```javascript
 import React, { useState} from 'react';
@@ -76,13 +76,13 @@ const [isOpen, toggle] = useState<boolean>(true);
 
 ## API
 
-| Name                      | Type                                | Default | Required | Description                                 |
-| ------------------------- | ----------------------------------- | ------- | -------- | ------------------------------------------- |
-| `collapsibleToBreakpoint` | [`mobile` \| `tablet` \| `desktop`] | —       | ✕        | Handle for responsive breakpoint            |
-| `elementType`             | [`span` \| `div`]                   | `div`   | ✕        | Type of element used as wrapper and content |
-| `id`                      | `string`                            | —       | ✓        | Component id                                |
-| `isOpen`                  | `bool`                              | —       | ✕        | Is open on initialization                   |
-| `transitionDuration`      | `number`                            | `250`   | ✕        | Transition duration in miliseconds          |
+| Name                      | Type                                 | Default | Required | Description                                 |
+| ------------------------- | ------------------------------------ | ------- | -------- | ------------------------------------------- |
+| `collapsibleToBreakpoint` | \[`mobile` \| `tablet` \| `desktop`] | —       | ✕        | Handle for responsive breakpoint            |
+| `elementType`             | \[`span` \| `div`]                   | `div`   | ✕        | Type of element used as wrapper and content |
+| `id`                      | `string`                             | —       | ✓        | Component id                                |
+| `isOpen`                  | `bool`                               | —       | ✕        | Is open on initialization                   |
+| `transitionDuration`      | `number`                             | `250`   | ✕        | Transition duration in miliseconds          |
 
 On top of the API options, the components accept [additional attributes][readme-additional-attributes].
 If you need more control over the styling of a component, you can use [style props][readme-style-props]
@@ -129,8 +129,8 @@ import { Button, UncontrolledCollapse } from '@lmc-eu/spirit-web-react/component
 
 | Name                      | Type                                         | Default | Required | Description                                                                                              |
 | ------------------------- | -------------------------------------------- | ------- | -------- | -------------------------------------------------------------------------------------------------------- |
-| `collapsibleToBreakpoint` | [`mobile` \| `tablet` \| `desktop`]          | —       | ✕        | Handle for responsive breakpoint                                                                         |
-| `elementType`             | [`span` \| `div`]                            | `div`   | ✕        | Type of element used as wrapper and content                                                              |
+| `collapsibleToBreakpoint` | \[`mobile` \| `tablet` \| `desktop`]         | —       | ✕        | Handle for responsive breakpoint                                                                         |
+| `elementType`             | \[`span` \| `div`]                           | `div`   | ✕        | Type of element used as wrapper and content                                                              |
 | `hideOnCollapse`          | `bool`                                       | `false` | ✕        | [**DEPRECATED**][readme-deprecations] in favor of `isDisposable`; Hides button when content is displayed |
 | `id`                      | `string`                                     | —       | ✓        | Component id                                                                                             |
 | `isDisposable`            | `bool`                                       | `false` | ✕        | Hides trigger when content is displayed                                                                  |