Style(web): Apply markdonw linting rules

packages/web/CONTRIBUTING.md

@@ -14,7 +14,7 @@
 
 This is an example of a typical file structure of a component:
 
-```
+```txt
 ├── src
     ├── scss
     │   └── components
@@ -60,7 +60,7 @@ Similarly, component's tools serve as a storage of component-scoped:
 
 ## Linking Design Tokens
 
-Components can (and should!) reuse Spirit [design tokens].
+Components can (and should!) reuse Spirit [design tokens][design-tokens].
 
 Component's theme properties can be linked to design tokens. This way, the
 appearance of individual components is always unified and coherent: **anytime
@@ -71,7 +71,7 @@ discussion between Spirit developers and designers. Linking component
 properties to design tokens needs to be done carefully **in order for the design
 to work as a system.**
 
-Default Spirit design tokens live in the [`spirit-design-tokens`] package.
+Default Spirit design tokens live in the [`spirit-design-tokens`][design-tokens] package.
 Products may define their own design tokens as long as they preserve the same
 structure and naming.
 
@@ -85,7 +85,7 @@ the [`@tokens` API][tokens-api] with
 From the implementation point of view, design tokens are Sass variables
 organized in Sass modules. Within component styles, Sass modules with design
 tokens are referred to just by filename. However, because the modules do not
-exist in the place they are called in (the [`spirit-design-tokens`] package is
+exist in the place they are called in (the [`spirit-design-tokens`][design-tokens] package is
 stored in `node_modules`), the correct load path for the desired set of design
 tokens must be [provided on build time][configuring-load-path]. This is the only
 way how Sass modules can be affected from outside, without giving in their
@@ -193,7 +193,7 @@ great portion of encapsulation, traceability, and more.
 <summary>Does <code>@use</code> behave the same way as <code>@import</code>?</summary>
 
 In most situations, no. Most importantly, while `@import` loads everything into
-global context, `@use` is scoped and works more like `import` in [ES modules].
+global context, `@use` is scoped and works more like `import` in [ES modules][es-modules].
 
 </details>
 
@@ -217,12 +217,11 @@ To avoid conflicts, we need a convention to distinguish situations when somethin
 - `id` attribute can be used by **JS only**.
 </details>
 
-[design tokens]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/design-tokens
-[`spirit-design-tokens`]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/design-tokens
+[design-tokens]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/design-tokens
 [tokens-api]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/design-tokens#tokens-api
 [configuring-load-path]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/design-tokens#configuring-load-path
 [rebranding]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web#rebranding
 [design-tokens-faq]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/design-tokens#faq
 [sass-modules]: https://sass-lang.com/blog/the-module-system-is-launched
-[es modules]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
+[es-modules]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
 [sass-true]: https://github.com/oddbird/true

packages/web/README.md

@@ -1,5 +1,10 @@
+<!-- @see: https://github.com/ilyatitovich/remark-lint-heading-capitalization/issues/13 -->
+<!--lint disable heading-capitalization -->
+
 # @lmc-eu/spirit-web
 
+<!--lint enable heading-capitalization -->
+
 > CSS implementation of Spirit Design System.
 
 ## Install
@@ -73,7 +78,7 @@ module.exports = {
 
 Some components require JavaScript plugins for their full functionality. You can use individual modules or compiled bundle.
 
-#### Individual or compiled
+#### Individual or Compiled
 
 Plugins can be included individually as an EcmaScript module (using `import { <plugin> } from '@lmc-eu/spirit-web'`, see [Using Spirit Web as a module](#using-spirit-web-as-a-module)), or all at once using `js/{cjs|esm|bundle}/spirit-web.js` or the minified `js/{cjs|esm|bundle}/spirit-web.min.js` (do not include both), all files are UMD ready.
 
@@ -83,7 +88,7 @@ Plugins can be included individually as an EcmaScript module (using `import { <p
 
 If you use a bundler (Webpack, Rollup, ...), you can use `/js/*.js` files which are EcmaScript modules.
 
-#### Using Spirit Web as a module in browser
+#### Using Spirit Web as a Module in Browser
 
 We provide a version of Spirit Web as `ESM` (`spirit-web.esm.js` and `spirit-web.esm.min.js`) which allows you to use Spirit Web as a module in your browser.
 
@@ -95,7 +100,7 @@ We provide a version of Spirit Web as `ESM` (`spirit-web.esm.js` and `spirit-web
 </script>
 ```
 
-#### Data attributes
+#### Data Attributes
 
 Nearly all Spirit-Web plugins can be enabled and configured through HTML alone with data attributes (our preferred way of using JavaScript functionality).
 Be sure to only use one set of data attributes on a single element (e.g., you cannot trigger a tooltip and modal from the same button.).
@@ -136,7 +141,7 @@ var modal = new Modal(myModalEl); // initialized with defaults
 
 If you’d like to get a particular plugin instance, each plugin exposes a `getInstance` method.
 
-#### CSS selectors in constructors
+#### CSS Selectors in Constructors
 
 You can also use a CSS selector as the first argument instead of a DOM element to initialize the plugin.
 Currently the element for the plugin is found by the `querySelector` method since our plugins support a single element only.
@@ -171,7 +176,7 @@ Learn more in the [`spirit-design-tokens` docs][rebranding].
 
 Start local development server with `yarn start` to get started. You will get the live preview of all components and plugins in your browser. Just get dirty and change something and you will see the changes live.
 
-The dev-stack is based on [Vite].
+The dev-stack is based on [Vite][vite].
 
 ## Deprecations
 
@@ -186,7 +191,7 @@ Check your browser console to see if you are using any of the deprecated functio
 
 ## Examples
 
-👀 See [examples] for a live demo.
+👀 See [examples][examples] for a live demo.
 
 ## License
 

packages/web/src/scss/components/Accordion/README.md

@@ -14,7 +14,7 @@ Building blocks:
     - Collapse
       - Accordion content
 
-### Accordion
+### Accordion Component
 
 Common wrapper for all items:
 
@@ -172,7 +172,7 @@ When you put it all together:
 <!-- Accordion: end -->
 ```
 
-### Open only one item at a time
+### Open Inly One Item at a Time
 
 Link individual **Collapse items** to their **Accordion parent** via
 `data-spirit-parent` attribute to allow just a single item being open at a time.

packages/web/src/scss/components/Breadcrumbs/README.md

@@ -38,7 +38,7 @@ Shows where the user is within the app hierarchy.
 </nav>
 ```
 
-### Dealing with long titles
+### Dealing with Long Titles
 
 When you need to shorten the title of the Breadcrumbs item you can use a helper class `text-truncate` with defined width.
 

packages/web/src/scss/components/Checkbox/README.md

@@ -1,6 +1,6 @@
 # Checkbox
 
-## Basic usage:
+## Basic Usage
 
 ```html
 <label for="checkbox-default" class="Checkbox">
@@ -11,7 +11,7 @@
 </label>
 ```
 
-## Required input:
+## Required Input
 
 ```html
 <label for="checkbox-required" class="Checkbox">
@@ -22,7 +22,7 @@
 </label>
 ```
 
-## Validation State with Validation Text:
+## Validation State with Validation Text
 
 See Validation state [dictionary][dictionary-validation].
 
@@ -47,7 +47,7 @@ See Validation state [dictionary][dictionary-validation].
 </label>
 ```
 
-## Hidden label:
+## Hidden Label
 
 ```html
 <label for="checkbox-hidden-label" class="Checkbox">
@@ -58,7 +58,7 @@ See Validation state [dictionary][dictionary-validation].
 </label>
 ```
 
-## Helper Text:
+## Helper Text
 
 ```html
 <label for="checkbox-helper-text" class="Checkbox">
@@ -70,7 +70,7 @@ See Validation state [dictionary][dictionary-validation].
 </label>
 ```
 
-## Disabled state:
+## Disabled State
 
 ```html
 <label for="checkbox-disabled" class="Checkbox Checkbox--disabled">
@@ -81,7 +81,7 @@ See Validation state [dictionary][dictionary-validation].
 </label>
 ```
 
-## As an Item:
+## As an Item
 
 ```html
 <label for="checkbox-item-default" class="Checkbox Checkbox--item">

packages/web/src/scss/components/Collapse/README.md

@@ -43,7 +43,7 @@ Hide button when collapse
 <button ... data-spirit-more>trigger</button> ...
 ```
 
-## Trigger attributes
+## Trigger Attributes
 
 | Name                 | Type     | Default    | Required | Description                         |
 | -------------------- | -------- | ---------- | -------- | ----------------------------------- |
@@ -53,20 +53,20 @@ Hide button when collapse
 | `aria-expanded`      | `string` | —          | ✕        | Aria expanded state (auto)          |
 | `aria-controls`      | `string` | —          | ✕        | Aria controls state (auto)          |
 
-## Wrapper attributes
+## Wrapper Attributes
 
-| Name                     | Type                    | Default | Required | Description                                                              |
-| ------------------------ | ----------------------- | ------- | -------- | ------------------------------------------------------------------------ |
-| `data-spirit-breakpoint` | [`tablet` \| `desktop`] | —       | ✕        | Breakpoint on which the collapsed content is forced to reveal \*         |
-| `data-spirit-parent`     | `string`                | —       | ✕        | A parent element selector that ensures that only one item is opened \*\* |
+| Name                     | Type                     | Default | Required | Description                                                              |
+| ------------------------ | ------------------------ | ------- | -------- | ------------------------------------------------------------------------ |
+| `data-spirit-breakpoint` | \[`tablet` \| `desktop`] | —       | ✕        | Breakpoint on which the collapsed content is forced to reveal \*         |
+| `data-spirit-parent`     | `string`                 | —       | ✕        | A parent element selector that ensures that only one item is opened \*\* |
 
 There can be several triggers, the same rules apply to each.
 
 (\*) The mobile breakpoint rule doesn't exist because it doesn't make sense given the implementation because it always stays hidden.
 
 (\*\*) Attribute for Accordion implementation
 
-## State classes
+## State Classes
 
 The component provides auto toggle attributes and classes, like `.is-open` when triggered or initiated.
 It also provides `.is-transitioning` class switching during animation. This means that `.Collapse.is-transitioning` during

packages/web/src/scss/components/Dropdown/README.md

@@ -1,6 +1,6 @@
 # Dropdown
 
-## Basic usage
+## Basic Usage
 
 ```html
 <div class="Dropdown">
@@ -42,7 +42,7 @@
 </div>
 ```
 
-## Usage with top-end align
+## Usage with Top End Align
 
 ```html
 <div class="Dropdown">
@@ -84,7 +84,7 @@
 </div>
 ```
 
-## Usage with disabled autoclose
+## Usage with Disabled Autoclose
 
 ```html
 <div class="Dropdown">
@@ -127,7 +127,7 @@
 </div>
 ```
 
-## Usage with full width mode `all`
+## Usage with Full Width Mode All
 
 ```html
 <div class="Dropdown">
@@ -174,7 +174,7 @@
 </div>
 ```
 
-## Usage with full width mode `mobile-only`
+## Usage with Full Width Mode Mobile-Only
 
 ```html
 <div class="Dropdown">
@@ -221,7 +221,7 @@
 </div>
 ```
 
-## Usage with [Item] component
+## Usage with [Item][item] Component
 
 ```html
 <div class="Dropdown">
@@ -256,7 +256,7 @@ a value of data attribute `data-spirit-placement`, e.g. `data-spirit-placement="
 
 There are two options here. Use the trigger element as an anchor or wrap the menu together with the trigger into a `.Dropdown` class.
 
-### Dropdown trigger
+### Dropdown Trigger
 
 | Attribute               | Type     | Default | Required | Description                                                                                                    |
 | ----------------------- | -------- | ------- | -------- | -------------------------------------------------------------------------------------------------------------- |
@@ -267,9 +267,9 @@ There are two options here. Use the trigger element as an anchor or wrap the men
 
 ## DropdownPopover
 
-| Attribute                   | Type                              | Default | Required | Description     |
-| --------------------------- | --------------------------------- | ------- | -------- | --------------- |
-| `data-spirit-fullwidthmode` | [`off` \| `mobile-only` \| `all`] | —       | ✕        | Full-width mode |
+| Attribute                   | Type                               | Default | Required | Description     |
+| --------------------------- | ---------------------------------- | ------- | -------- | --------------- |
+| `data-spirit-fullwidthmode` | \[`off` \| `mobile-only` \| `all`] | —       | ✕        | Full-width mode |
 
 ## JavaScript API
 

packages/web/src/scss/components/FieldGroup/README.md

@@ -161,7 +161,7 @@ To render validation text as a list, use `<ul>` element instead of `<div>`.
 When implementing client-side form validation, use JS interaction state classes (`has-success`, `has-warning`,
 `has-danger`) on the wrapping `<fieldset>` element and render validation texts in a `<div>` or `<ul>` with
 `data-spirit-element="validation_text"` attribute. This way your JS remains disconnected from CSS that may or may not be
-[prefixed].
+[prefixed][prefixed].
 
 **Remember this approach is only valid for vanilla JS implementation. React components mix CSS with JS by design and
 handle prefixes their own way.**

packages/web/src/scss/components/FileUploader/README.md

@@ -2,7 +2,7 @@
 
 FileUploader allows users to pick one or more files to upload.
 
-**FileUploader itself actually does not upload anything to the server.**
+> FileUploader itself actually does not upload anything to the server.
 
 FileUploader is a composition of a few subcomponents:
 
@@ -25,7 +25,7 @@ Please consult the [main README][web-readme] for how to include JavaScript plugi
 
 Or, feel free to write the controlling script yourself.
 
-## FileUploader
+## FileUploader Component
 
 This is the main wrapper for the whole composition. It provides proper spacing
 for its subcomponents:
@@ -124,7 +124,7 @@ the `data-spirit-file-queue-limit` attribute:
 </div>
 ```
 
-### Input Behavior When the Queue is Filled (JavaScript)
+### Input Behavior When the Queue Is Filled (JavaScript)
 
 Using the `data-spirit-queue-limit-behavior` attribute together with the desired limit for the queue, you can set the
 input/drop zone to be hidden or disabled when the file queue limit is reached. Available options are: `hide`, `disable`,
@@ -235,7 +235,7 @@ When implementing client-side form validation, use JS interaction state classes
 (`has-success`, `has-warning`, `has-danger`) on the wrapping `<div>` element and
 render validation texts in a `<div>` or `<ul>` with `data-spirit-element="validation_text"`
 attribute. This way your JS remains disconnected from CSS that may or may not be
-[prefixed].
+[prefixed][prefixed].
 
 **Remember this approach is only valid for vanilla JS implementation. React
 components mix CSS with JS by design and handle CSS class-name prefixes their
@@ -472,7 +472,7 @@ document.addEventListener('unqueueFile.fileUploader', () => {
 
 👉 Read more about [fileUploader JavaScript events](#javascript-events).
 
-### 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` methods of the `FileUploader` JS plugin.
 If any data in `meta` option will be present, the FileUploader adds an additional hidden input with JSON stringified data to the form.
@@ -490,7 +490,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 FileUploader attachment 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.
@@ -607,9 +607,9 @@ const input = myUploaderInstance.inputElement; // Returns an input element, for
 | `unqueuedFile.fileUploader` | This event is fired after the file was removed from queue.                                                                                  |
 | `error.fileUploader`        | This event is fired when an error occurs when adding files to the queue. A specific error message is also returned together with the event. |
 
-## Implementation notes
+## Implementation Notes
 
-### Name attribute
+### Name Attribute
 
 ⚠️ The `name` attribute on hidden input will be always set as an array `[]` for both single-file and multiple-file usage. Make sure you handle it correctly in your code.