Style(web-twig): Reformat documentation by the style rule

.editorconfig

@@ -15,3 +15,5 @@ trim_trailing_whitespace = true
 [*.scss]
 indent_size = 4
 
+[packages/web-twig/*.yaml]
+indent_size = 4

packages/web-twig/CHANGELOG.md

@@ -1,7 +1,9 @@
 # Changelog
 
 <!-- There should always be "Unreleased" section at the beginning. -->
+
 ## Unreleased
+
 - Introduce `Tooltip` component
 - Require compiler as separate dependency
 - Refactor components and update their readme
@@ -11,6 +13,7 @@
 - Fix: Make `TextField` `id` mandatory as it is required for linking the label to the input
 
 ## 1.8.0 - 2022-07-18
+
 - Update `Tag` - add sizes, split theme and color classes, allow elementType change
 - Bugfix `isRequired` functionality in `TextField` component
 - Introduce `Pill` component
@@ -19,10 +22,12 @@
 - Introduce filter for conversion of stringified boolean props
 
 ## 1.7.0 - 2022-05-09
+
 - Add Svg twig extension for optimal loading of svg files as inline
 - Add configuration param `icons` to define icon set path and alias
 
 ## 1.6.0 - 2022-04-29
+
 - Add main props `data-*` and `id` into `Button` and `ButtonLink` components
 - Introduce `Header`, `Navbar`, `NavbarActions`, `NavbarClose`, `NavbarToggle`, `Nav `, `NavItem`, `NavLink `components
 - Allow `aria-*` as main props in `Button` and `ButtonLink` components
@@ -34,31 +39,37 @@
 - Print raw `label` and `message` props in `TextField` and `CheckboxField` components
 
 ## 1.5.0 - 2022-04-04
+
 - [BC] Use is prefix for boolean props
 - Bugfix `Grid` component props
 - Bugfix `Grid` component reset layout class if cols, tablet or desktop props defined
 - Add onClick prop into `ButtonLink` component
 - Add `title` prop into `ButtonLink`
 
 ## 1.4.0 - 2022-03-28
+
 - Add support Twig 1.44.6 for Jobs
 
 ## 1.3.0 - 2022-03-22
+
 - Add `ButtonLink`, `Container`, `Grid`, `Stack`, `TextField` and `CheckboxField` component
 - Add Snapshot tests
 - Update documentation
 - Bugfix camelCase filename in compiler
 
 ## 1.2.0 - 2021-12-15
+
 - Add prop `class` into components for customization
 - Add base spirit component alias `spirit`
 - Add tests extendable components cases
 - Bugfix load bundle in project with multiple twig extension
 
 ## 1.1.0 - 2021-12-13
+
 - Add Symfony 3 support for Jobs
 
 ## 1.0.0 - 2021-12-10
+
 - [BC] Add possible link multiple components path into same alias in configuration
 - [BC] Rename config param `path` into `paths`
 - [BC] Rename config param `path_alias` into `paths_alias`
@@ -69,15 +80,18 @@
 - Add `square` and `onClick` properties into Button component
 
 ## 0.1.0 - 2021-11-29
+
 - Drop support php 7.3
 - Add lowest deps into QA pipeline
 - Add symfony polyfill php 8.0 functions
 - Add simple components unit tests
 - Upgrade LMC coding standards from v2 to v3
 
 ## 0.0.2 - 2021-11-24
+
 - Add syntax example into README
 - Fix connect yaml configuration into Twig
 
 ## 0.0.1 - 2021-11-24
+
 - Initial release

packages/web-twig/CONTRIBUTING.md

@@ -3,12 +3,14 @@
 > Guide for contributors.
 
 ## Components definition
+
 In order to maintain the uniformity of writing and functioning of components in HTML-like syntax, it is necessary to accept the following rules in the implementation.
 
 ## Rules in components
 
 1. Name of components must be camelCase with first letter small.
 2. New components must contain a property class so that they can be extended according to the [instructions](./docs/extendComponents.md)
+
 ```twig
 {% set _class = (props.class is defined) ? ' ' ~  props.class : '' -%}
 ```
@@ -50,4 +52,5 @@ In order to maintain the uniformity of writing and functioning of components in
 ```
 
 ## Release new version
-* run script `. ./newVersion.sh <version>`
+
+- run script `. ./newVersion.sh <version>`

packages/web-twig/README.md

@@ -1,23 +1,25 @@
-Spirit Web Twig Bundle
-=================
+# Spirit Web Twig Bundle
+
 ![QA](https://jenkins-seduo-ci.prod.internal.lmc/job/Spirit-web-twig-bundle-qa/badge/icon?subject=QA&link=https://jenkins-seduo-ci.prod.internal.lmc/job/Spirit-web-twig-bundle-qa/)
 ![Version](https://img.shields.io/badge/version-1.8.0-blue.svg)
 
 This is a Symfony bundle with Twig implementation of [Spirit Design System] components, extended with HTML-like syntax.
 
 ## Requirements
+
 - PHP 7.4
 - Symfony 3.4+ || 4.2+ || 5.0+
 - Twig >=1.44.6 || >=2.12.5 || 3+
 
 ## Changelog
+
 See [CHANGELOG](./CHANGELOG.md)
 
 ## How to install
 
 ### Step 1
 
-Download using *composer*
+Download using **composer**
 
 1. Add satis repository into composer.json
 
@@ -30,11 +32,13 @@ Download using *composer*
         }
     ]
 ```
+
 2. Install package
 
 ```bash
 composer require lmc/spirit-web-twig-bundle:~1.8.0
 ```
+
 ### Step 2
 
 Add `SpiritWebTwigBundle` into bundles (under `all` bundles). If you use Symfony flex, it will be configured automatically.
@@ -53,27 +57,29 @@ Add `SpiritWebTwigBundle` into bundles (under `all` bundles). If you use Symfony
 If you want to change the default settings, create a config
 
 **config/packages/spirit_web_twig.yml**
+
 ```yaml
-    # all parameters are optional
-    spirit_web_twig:
-        # define one or more paths to expand or overload components
-        paths:
-            - "%kernel.project_dir%/templates/components"
-        paths_alias: 'jobs-ui' # default is 'spirit'
-        html_syntax_lexer: false # default is true
-        spirit_css_class_prefix: 'jobs' # default is null
-        icons: # optional settings for svg assets
-          paths:
-            - "%kernel.project_dir%/assets/icons" # define paths for svg icons set
-          alias: 'jobs-icons' # default is 'icons-assets'
+# all parameters are optional
+spirit_web_twig:
+  # define one or more paths to expand or overload components
+  paths:
+    - '%kernel.project_dir%/templates/components'
+  paths_alias: 'jobs-ui' # default is 'spirit'
+  html_syntax_lexer: false # default is true
+  spirit_css_class_prefix: 'jobs' # default is null
+  icons: # optional settings for svg assets
+    paths:
+      - '%kernel.project_dir%/assets/icons' # define paths for svg icons set
+    alias: 'jobs-icons' # default is 'icons-assets'
 ```
 
 ## Usage
+
 Now you can use Twig components with HTML-like syntax in your Symfony project. You only need to remember that, unlike in HTML, component tags must always start with a capital letter:
 
 ```html
 <ComponentName attr="value">Some other content</ComponentName>
-  ...
+...
 <ComponentName attr="value" />
 ```
 
@@ -125,4 +131,4 @@ or pure original implementation
 if you want to extend these components, an example guide is [here](./docs/extendComponents.md).
 if you want to contribute, read guide [here](./docs/contribution.md).
 
-[Spirit Design System]: https://github.com/lmc-eu/spirit-design-system
+[spirit design system]: https://github.com/lmc-eu/spirit-design-system

packages/web-twig/docs/extendComponents.md

@@ -3,11 +3,12 @@
 In some cases, you might want to extend the components with visual functionality. It is Possible.
 Each component has a customizable property `class`.
 
-
 ## Example
+
 For example, if we want to extend the [Button] component with size, we can do it in the project as follows:
 
-*button.twig*
+**button.twig**
+
 ```twig
 {% set _sizeClass = props.size is defined ? _spiritClassPrefix ~ 'Button--' ~ props.size %}
 {% set props = props|merge({ 'class': _sizeClass }) %}
@@ -33,4 +34,4 @@ After the previous change, we can now call the Button component with additional
 <Button color="primary" size="small">Primary buttom</Button>
 ```
 
-[Button]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/components/Button
+[button]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/components/Button

packages/web-twig/docs/inlineSVG.md

@@ -6,6 +6,7 @@ For these cases, we have prepared `SvgExtension` with function `inlineSvg`.
 In the project where the bundle is used, it is necessary to set in the configuration:
 
 **config/packages/spirit_web_twig.yml**
+
 ```yaml
     spirit_web_twig:
        ...
@@ -14,6 +15,7 @@ In the project where the bundle is used, it is necessary to set in the configura
             - "%kernel.project_dir%/assets/icons" # define paths for svg icons set
           alias: 'jobs-icons' # default is 'icons-assets'
 ```
+
 then it is possible to call in the component
 
 ```twig

packages/web-twig/easy-coding-standard.yaml

@@ -1,2 +1,2 @@
 imports:
-    - { resource: 'vendor/lmc/coding-standard/easy-coding-standard.yaml' }
+    - { resource: 'vendor/lmc/coding-standard/easy-coding-standard.yaml' }

packages/web-twig/src/Resources/components/Alert/README.md

@@ -5,17 +5,13 @@ This is Twig implementation of the [Alert] component.
 Basic example usage:
 
 ```html
-<Alert>
-    Alert
-</Alert>
+<Alert>Alert</Alert>
 ```
 
 Advanced example usage:
 
 ```html
-<Alert color="danger" elementType="span">
-    Danger Alert
-</Alert>
+<Alert color="danger" elementType="span">Danger Alert</Alert>
 ```
 
 Without lexer:
@@ -34,12 +30,12 @@ Without lexer:
 ## API
 
 | Prop name     | Type                | Default   | Required | Description        |
-|---------------|---------------------|-----------|----------|--------------------|
+| ------------- | ------------------- | --------- | -------- | ------------------ |
 | `class`       | `string`            | `null`    | no       | Custom CSS class   |
 | `color`       | `success`, `danger` | `success` | no       | Color variant      |
 | `elementType` | `string`            | `div`     | no       | HTML tag to render |
 
 You can add `id`, `data-*` or `aria-*` attributes to further extend component's
 descriptiveness and accessibility.
 
-[Alert]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Alert
+[alert]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Alert

packages/web-twig/src/Resources/components/Button/README.md

@@ -4,19 +4,19 @@ This is Twig implementation of the [Button] component.
 
 Basic example usage:
 
-```html
+```twig
 <Button>Primary button</Button>
 ```
 
 Advanced example usage:
 
-```html
-<Button 
-    color="primary"
-    isBlock
-    type="submit"
+```twig
+<Button
+  color="primary"
+  isBlock
+  type="submit"
 >
-    Primary block submit button
+  Primary block submit button
 </Button>
 ```
 
@@ -35,7 +35,7 @@ Without lexer:
 ## API
 
 | Prop name    | Type                                                     | Default   | Required | Description                                          |
-|--------------|----------------------------------------------------------|-----------|----------|------------------------------------------------------|
+| ------------ | -------------------------------------------------------- | --------- | -------- | ---------------------------------------------------- |
 | `class`      | `string`                                                 | `null`    | no       | Custom CSS class                                     |
 | `color`      | `primary`, `secondary`, `tertiary`, `inverted`, `danger` | `primary` | no       | Color variant                                        |
 | `isBlock`    | `bool`                                                   | `false`   | no       | Span the element to the full width of its parent     |
@@ -47,4 +47,4 @@ Without lexer:
 You can add `id`, `data-*` or `aria-*` attributes to further extend component's
 descriptiveness and accessibility.
 
-[Button]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Button
+[button]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Button

packages/web-twig/src/Resources/components/ButtonLink/README.md

@@ -11,13 +11,7 @@ Basic example usage:
 Advanced example usage:
 
 ```html
-<ButtonLink
-    color="primary"
-    href="#"
-    isBlock
->
-    Primary block ButtonLink
-</ButtonLink>
+<ButtonLink color="primary" href="#" isBlock>Primary block ButtonLink</ButtonLink>
 ```
 
 Without lexer:
@@ -36,7 +30,7 @@ Without lexer:
 ## API
 
 | Prop name    | Type                                                     | Default   | Required | Description                                              |
-|--------------|----------------------------------------------------------|-----------|----------|----------------------------------------------------------|
+| ------------ | -------------------------------------------------------- | --------- | -------- | -------------------------------------------------------- |
 | `class`      | `string`                                                 | `null`    | no       | Custom CSS class                                         |
 | `color`      | `primary`, `secondary`, `tertiary`, `inverted`, `danger` | `primary` | no       | Color variant                                            |
 | `href`       | `string`                                                 | —         | yes      | Link URL                                                 |
@@ -50,4 +44,4 @@ Without lexer:
 You can add `id`, `data-*` or `aria-*` attributes to further extend component's
 descriptiveness and accessibility.
 
-[Button]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Button
+[button]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Button