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

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,16 +2,16 @@
 
 ## 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';
 ```
 
-```
-const [openState, setOpenState] = useState<AccordionOpenStateType>(undefined);
+```javascript
+const [openState, setOpenState] = useState < AccordionOpenStateType > undefined;
 ```
 
 ```javascript
@@ -52,19 +52,19 @@ const toggle = (id) => {
 </Accordion>
 ```
 
-### Default with opened on init
+### Default with Opened on Init
 
-```
-const [openState, setOpenState] = useState<AccordionOpenStateType>(['accordion-item-example-1']);
+```javascript
+const [openState, setOpenState] = useState < AccordionOpenStateType > ['accordion-item-example-1'];
 ```
 
-### Open only one at a time
+### Open Only One at a Time
 
-```
-const [openState, setOpenState] = useState<AccordionOpenStateType>('');
+```javascript
+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">

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/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';

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

@@ -35,7 +35,7 @@ const onToggle = () => setIsOpen(!isOpen);
 </Dropdown>;
 ```
 
-### Uncontrolled dropdown
+### Uncontrolled Dropdown
 
 ```jsx
 import { UncontrolledDropdown, DropdownTrigger, DropdownPopover } from '@lmc-eu/spirit-web-react/components';
@@ -52,15 +52,15 @@ import { UncontrolledDropdown, DropdownTrigger, DropdownPopover } from '@lmc-eu/
 
 ### Dropdown
 
-| Name              | Type                                              | Default        | Required | Description                                    |
-| ----------------- | ------------------------------------------------- | -------------- | -------- | ---------------------------------------------- |
-| `enableAutoClose` | `bool`                                            | `true`         | ✕        | Enables close on click outside of Dropdown     |
-| `fullWidthMode`   | \[`DropdownFullwidthMode`][dropdownfullwidthmode] | `off`          | ✕        | Full-width mode                                |
-| `id`              | `string`                                          | —              | ✓        | Component id                                   |
-| `isOpen`          | `bool`                                            | `false`        | ✓        | Open state                                     |
-| `onAutoClose`     | `(event: Event) => void`                          | —              | ✕        | Callback on close on click outside of Dropdown |
-| `onToggle`        | `() => void`                                      | —              | ✓        | Function for toggle open state of dropdown     |
-| `placement`       | [Placement dictionary][dictionary-placement]      | `bottom-start` | ✕        | Alignment of the component                     |
+| Name              | Type                                               | Default        | Required | Description                                    |
+| ----------------- | -------------------------------------------------- | -------------- | -------- | ---------------------------------------------- |
+| `enableAutoClose` | `bool`                                             | `true`         | ✕        | Enables close on click outside of Dropdown     |
+| `fullWidthMode`   | [`DropdownFullWidthMode`][dropdown-fullwidth-mode] | `off`          | ✕        | Full-width mode                                |
+| `id`              | `string`                                           | —              | ✓        | Component id                                   |
+| `isOpen`          | `bool`                                             | `false`        | ✓        | Open state                                     |
+| `onAutoClose`     | `(event: Event) => void`                           | —              | ✕        | Callback on close on click outside of Dropdown |
+| `onToggle`        | `() => void`                                       | —              | ✓        | Function for toggle open state of dropdown     |
+| `placement`       | [Placement dictionary][dictionary-placement]       | `bottom-start` | ✕        | Alignment of the component                     |
 
 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]
@@ -89,20 +89,20 @@ and [escape hatches][readme-escape-hatches].
 
 ### UncontrolledDropdown
 
-| Name              | Type                                              | Default        | Required | Description                                    |
-| ----------------- | ------------------------------------------------- | -------------- | -------- | ---------------------------------------------- |
-| `enableAutoClose` | `bool`                                            | `true`         | ✕        | Enables close on click outside of Dropdown     |
-| `fullWidthMode`   | \[`DropdownFullwidthMode`][dropdownfullwidthmode] | `off`          | ✕        | Full-width mode                                |
-| `id`              | `string`                                          | `<random>`     | ✕        | Component id                                   |
-| `onAutoClose`     | `(event: Event) => void`                          | —              | ✕        | Callback on close on click outside of Dropdown |
-| `placement`       | [Placement dictionary][dictionary-placement]      | `bottom-start` | ✕        | Alignment of the component                     |
+| Name              | Type                                               | Default        | Required | Description                                    |
+| ----------------- | -------------------------------------------------- | -------------- | -------- | ---------------------------------------------- |
+| `enableAutoClose` | `bool`                                             | `true`         | ✕        | Enables close on click outside of Dropdown     |
+| `fullWidthMode`   | [`DropdownFullWidthMode`][dropdown-fullwidth-mode] | `off`          | ✕        | Full-width mode                                |
+| `id`              | `string`                                           | `<random>`     | ✕        | Component id                                   |
+| `onAutoClose`     | `(event: Event) => void`                           | —              | ✕        | Callback on close on click outside of Dropdown |
+| `placement`       | [Placement dictionary][dictionary-placement]       | `bottom-start` | ✕        | Alignment of the component                     |
 
 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]
 and [escape hatches][readme-escape-hatches].
 
 [dictionary-placement]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#placement
-[dropdownfullwidthmode]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/types/dropdown.ts#L19
+[dropdown-fullwidth-mode]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/types/dropdown.ts#L19
 [item]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Item/README.md
 [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes
 [readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches

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

@@ -66,7 +66,7 @@ const { fileQueue, addToQueue, clearQueue, onDismiss } = useFileQueue();
 </FileUploader>;
 ```
 
-### List with image previews
+### List with Image Previews
 
 ```javascript
 <FileUploaderList
@@ -97,7 +97,7 @@ const { fileQueue, addToQueue, clearQueue, onDismiss } = useFileQueue();
 </FileUploader>
 ```
 
-### Input behavior when the queue is filled
+### Input Behavior When the Queue Is Filled
 
 FileUploaderInput will disappear or disable after reaching the limit for files in the queue.
 
@@ -298,7 +298,7 @@ const resetStateHandler = () => {
 </form>;
 ```
 
-### Passing additional metadata
+### Passing Additional Metadata
 
 When you need to send additional data along with the image you can do it with the `meta` argument on `addToQueue` and `updateQueue` callbacks.
 If any data in `meta` option will be present, the FileUploader adds an additional hidden input with JSON stringified data to the form.
@@ -326,7 +326,7 @@ const customUpdate = (_event: MouseEvent, file: File) => {
 // …
 ```
 
-#### Updating Image Preview with cropped image
+#### Updating Image Preview with Cropped Image
 
 When you are using FileUploader with some kind of image cropper you want to also update the image preview on FileUploaderAttachment when image changes.
 You can do this by passing a specific object in shape of coordinates (`{ x: number, y: number, cropWidth: number, cropHeight: number, originalWidth: number, originalHeight: number }`) to the `meta` argument.

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

@@ -174,7 +174,7 @@ If you need more control over the styling of a component, you can use [style pro
 and [escape hatches][readme-escape-hatches].
 
 [dictionary-alignment]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#alignment
-[dictionary-direction]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#direction
+[direction-dictionary]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#direction
 [mdn-display-flex]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout
 [mdn-display-grid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout
 [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes