Style(web-twig): Fix docs using markdown linter

refs #DS-1100
lmc-eu · Dec 12, 2024 · 332d07c · 332d07c
1 parent c8da7c7
commit 332d07c
Show file tree

Hide file tree

Showing 30 changed files with 193 additions and 189 deletions.
diff --git a/.remarkignore b/.remarkignore
@@ -10,6 +10,5 @@ build
 # we will fix them incrementally
 docs
 form-validations
-web-twig
 # Codemods transforms directory
 transforms
diff --git a/packages/web-twig/CONTRIBUTING.md b/packages/web-twig/CONTRIBUTING.md
@@ -2,7 +2,7 @@
 
 > Guide for contributors.
 
-## PHP support using Docker
+## PHP Support Using Docker
 
 PHP language is required to develop this package. In order to support other frontend developers which do not have installed PHP locally, there is a Docker image available to develop this package.
 
@@ -12,15 +12,15 @@ In a moment the app will be setup and ready on `https://localhost:4443`.
 
 Please consult [`Makefile`][makefile] for available commands and options to setup and run this project.
 
-## Components definition
+## 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.
 
 ## File Structure
 
 This is an example of a typical file structure of a component:
 
-```
+```text
 ├── src
     └── Resources
         └── components
@@ -31,7 +31,7 @@ This is an example of a typical file structure of a component:
                 └── README.md — documentation of the component
 ```
 
-## Rules in components
+## 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](https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/docs/extendComponents.md)
@@ -78,7 +78,7 @@ For example we used this prefix for props that can accept HTML string.
 <Checkbox UNSAFE_helperText="<strong>Help!</strong>" />
 ```
 
-### Example of component definition
+### Example of Component Definition
 
 ```twig
 {# This represent main component class and prepend class prefix #}
@@ -94,7 +94,7 @@ For example we used this prefix for props that can accept HTML string.
 </span>
 ```
 
-### Example of component usage
+### Example of Component Usage
 
 ```twig
 {% embed "@spirit/button.twig" with { props: {
@@ -106,7 +106,7 @@ For example we used this prefix for props that can accept HTML string.
 {% endembed %}
 ```
 
-## Components tests
+## Components Tests
 
 Components testing is done by snapshots tests. It is required to create snapshot test for each component. Please create a new component fixture file in `tests/components-fixtures/` folder and name it according to the component name.
 
@@ -124,7 +124,7 @@ When adding new functionality or removing an old one, please, check twice the ou
 
 Every component has its own suite of snapshot tests in the following directory architecture:
 
-```
+```text
 ├── src
     └── Resources
         └── components
@@ -140,7 +140,7 @@ Snapshots are generated based on prescription by the [command above](#components
 **Note:** Every component MUST contain the test that extends `tests/AbstractComponentSnapshotTest.php` which contains the current logic of the test itself.
 It is balanced between the DRY principle and how the PHPUnit works.
 
-## Release new version
+## Release New Version
 
 TODO: [Automate release process][automate-release-process].
 
@@ -152,7 +152,7 @@ As we are now using only `dev-main` version of this package, until we have stabl
 
 Packagist requires a single repository for a single package to be present to publish the package. In order to publish this package we are using READ-ONLY repository https://github.com/lmc-eu/spirit-web-twig-bundle where we are publishing the subtree of this monorepo.
 
-### Updating READ-ONLY repository
+### Updating READ-ONLY Repository
 
 Please use these commands to update the READ-ONLY repository.
 

diff --git a/packages/web-twig/DEPRECATIONS.md b/packages/web-twig/DEPRECATIONS.md
@@ -6,11 +6,14 @@ This document lists all deprecations that will be removed in the next major vers
 
 ## Deprecations
 
+<!-- @see: https://jira.almacareer.tech/browse/DS-1604 -->
+<!--lint ignore heading-capitalization-->
+
 ## Collapse `data-spirit-is-disposable`
 
 The `data-spirit-more` attribute was removed, please use `data-spirit-is-disposable` instead.
 
-#### Migration Guide
+### Migration Guide
 
 - `<a data-spirit-more … />` → `<a data-spirit-is-disposable … />`
 

diff --git a/packages/web-twig/README.md b/packages/web-twig/README.md
@@ -1,6 +1,6 @@
 # Spirit Web Twig Bundle
 
-This is a Symfony bundle with Twig implementation of [Spirit Design System] components, extended with JSX-like syntax.
+This is a Symfony bundle with Twig implementation of [Spirit Design System][spirit-design-system] components, extended with JSX-like syntax.
 
 ## Requirements
 
@@ -12,7 +12,7 @@ This is a Symfony bundle with Twig implementation of [Spirit Design System] comp
 
 See [CHANGELOG][changelog]
 
-## How to install
+## How to Install
 
 ### Step 1
 
@@ -71,7 +71,7 @@ This is considered a way how you can pass down HTML strings.
 <Checkbox UNSAFE_helperText="<strong>Help!</strong>" />
 ```
 
-# Spirit Components
+## Spirit Components
 
 For available components see the [components directory][components-directory].
 
@@ -163,6 +163,6 @@ Check your Symfony console or log to see if you are using any of the deprecated
 [contributing]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/CONTRIBUTING.md
 [example-guide]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/docs/extendComponents.md
 [raw]: https://twig.symfony.com/doc/3.x/filters/raw.html
-[spirit design system]: https://github.com/lmc-eu/spirit-design-system
+[spirit-design-system]: https://github.com/lmc-eu/spirit-design-system
 [twigx-bundle]: https://github.com/lmc-eu/twigx-bundle/blob/main/README.md#usage
 [web-pkg-rebrand]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web#rebranding
diff --git a/packages/web-twig/docs/extendComponents.md → packages/web-twig/docs/extend-components.md b/packages/web-twig/docs/extendComponents.md → packages/web-twig/docs/extend-components.md
@@ -1,11 +1,11 @@
-# How to extend components
+# How to Extend Components
 
 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:
+For example, if we want to extend the [Button][button] component with size, we can do it in the project as follows:
 
 **button.twig**
 

diff --git a/packages/web-twig/docs/inlineSVG.md → packages/web-twig/docs/inline-svg.md b/packages/web-twig/docs/inlineSVG.md → packages/web-twig/docs/inline-svg.md
@@ -1,4 +1,4 @@
-# How to use inline SVG in components
+# How to Use Inline SVG in Components
 
 In some cases, you might want use SVG icons in components. It is Possible.
 For these cases, we have prepared `SvgExtension` with function `inlineSvg`.

diff --git a/packages/web-twig/src/Resources/components/Accordion/README.md b/packages/web-twig/src/Resources/components/Accordion/README.md
@@ -2,7 +2,7 @@
 
 This is Twig implementation of the [Accordion][accordion] component.
 
-## Default usage (Stay open)
+## Default Usage (Stay Open)
 
 ```twig
 <Accordion>
@@ -42,7 +42,7 @@ This is Twig implementation of the [Accordion][accordion] component.
 </Accordion>
 ```
 
-## Usage with initial open state (Stay open)
+## Usage with Initial Open State (Stay Open)
 
 ```twig
 <Accordion>
@@ -65,7 +65,7 @@ This is Twig implementation of the [Accordion][accordion] component.
 </Accordion>
 ```
 
-## Usage with only one open item at a time
+## Usage with Only One Open Item at a Time
 
 ```twig
 <Accordion id="accordion-example">
@@ -141,7 +141,7 @@ rendered result into the slot:
 </AccordionHeader>
 ```
 
-## Usage without lexer:
+## Usage Without Lexer
 
 ```twig
 {% embed "@spirit/accordion.twig" with { props: {

diff --git a/packages/web-twig/src/Resources/components/Alert/README.md b/packages/web-twig/src/Resources/components/Alert/README.md
@@ -27,7 +27,7 @@ Without lexer:
 {% endembed %}
 ```
 
-## Default Icons according to Color Variant
+## Default Icons According to Color Variant
 
 | Color name    | Icon name     |
 | ------------- | ------------- |

diff --git a/packages/web-twig/src/Resources/components/Breadcrumbs/README.md b/packages/web-twig/src/Resources/components/Breadcrumbs/README.md
@@ -137,7 +137,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.
 Twig has an implementation of text truncating using [`u` filter][twig-truncate].

diff --git a/packages/web-twig/src/Resources/components/Checkbox/README.md b/packages/web-twig/src/Resources/components/Checkbox/README.md
@@ -53,9 +53,9 @@ Without lexer:
 | `name`                  | `string`                                       | `null`  | ✕        | Input name                                           |
 | `UNSAFE_helperText`     | `string`                                       | `null`  | ✕\*\*    | Unescaped custom helper text                         |
 | `UNSAFE_label`          | `string`                                       | —       | ✓\*      | Unescaped label text (allows HTML)                   |
-| `UNSAFE_validationText` | [`string` \| `string[]`]                       | `null`  | ✕\*\*    | Unescaped validation text                            |
+| `UNSAFE_validationText` | \[`string` \| `string[]`]                      | `null`  | ✕\*\*    | Unescaped validation text                            |
 | `validationState`       | [Validation dictionary][dictionary-validation] | `null`  | ✕        | Type of validation state.                            |
-| `validationText`        | [`string` \| `string[]`]                       | `null`  | ✕\*\*    | Validation text                                      |
+| `validationText`        | \[`string` \| `string[]`]                      | `null`  | ✕\*\*    | Validation text                                      |
 | `value`                 | `string`                                       | `null`  | ✕        | Input value                                          |
 
 (\*) Label is required. You can use the `label` for simple text or `UNSAFE_label` for HTML content.

diff --git a/packages/web-twig/src/Resources/components/Collapse/README.md b/packages/web-twig/src/Resources/components/Collapse/README.md
@@ -55,7 +55,7 @@ attributes to register trigger events.
 
 | Name          | Type     | Default | Required | Description                                                            |
 | ------------- | -------- | ------- | -------- | ---------------------------------------------------------------------- |
-| `breakpoint`  | `string` | `null`  | ✕        | Breakpoint level [mobile,tablet,desktop]                               |
+| `breakpoint`  | `string` | `null`  | ✕        | Breakpoint level \[`mobile,tablet,desktop`]                            |
 | `elementType` | `string` | `div`   | ✕        | Custom element type for wrapper and content                            |
 | `id`          | `string` | —       | ✓        | Collapse ID                                                            |
 | `isOpen`      | `bool`   | `false` | ✕        | If true, make the item open on page load                               |
@@ -67,7 +67,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].
 
-## Trigger attributes
+## Trigger Attributes
 
 | Name                        | Type     | Default    | Required | Description                                                                                                         |
 | --------------------------- | -------- | ---------- | -------- | ------------------------------------------------------------------------------------------------------------------- |

diff --git a/packages/web-twig/src/Resources/components/Dropdown/README.md b/packages/web-twig/src/Resources/components/Dropdown/README.md
@@ -47,18 +47,18 @@ attributes to register trigger events.
 
 ### DropdownPopover
 
-| Name            | Type                                         | Default        | Required | Description                           |
-| --------------- | -------------------------------------------- | -------------- | -------- | ------------------------------------- |
-| `elementType`   | `string`                                     | `div`          | ✕        | HTML tag to render                    |
-| `fullWidthMode` | `string`                                     | —              | ✕        | Full-width mode [off,mobile-only,all] |
-| `id`            | `string`                                     | —              | ✓        | DropdownPopover ID                    |
-| `placement`     | [Placement Dictionary][dictionary-placement] | `bottom-start` | ✕        | Placement of the dropdown             |
+| Name            | Type                                         | Default        | Required | Description               |
+| --------------- | -------------------------------------------- | -------------- | -------- | ------------------------- |
+| `elementType`   | `string`                                     | `div`          | ✕        | HTML tag to render        |
+| `fullWidthMode` | \[`off,mobile-only,all`]`                    | —              | ✕        | Full-width mode           |
+| `id`            | `string`                                     | —              | ✓        | DropdownPopover ID        |
+| `placement`     | [Placement Dictionary][dictionary-placement] | `bottom-start` | ✕        | Placement of the dropdown |
 
 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].
 
-### Trigger attributes
+### Trigger Attributes
 
 | Name                 | Type     | Default    | Required | Description                |
 | -------------------- | -------- | ---------- | -------- | -------------------------- |

diff --git a/packages/web-twig/src/Resources/components/FieldGroup/README.md b/packages/web-twig/src/Resources/components/FieldGroup/README.md
@@ -113,9 +113,9 @@ When validated on server:
 | `name`                  | `string`                                       | `null`  | ✕        | Group name                                                 |
 | `UNSAFE_helperText`     | `string`                                       | `null`  | ✕\*\*    | Unescaped custom helper text (allows HTML)                 |
 | `UNSAFE_label`          | `string`                                       | `null`  | ✕\*      | Unescaped label text (allows HTML)                         |
-| `UNSAFE_validationText` | [`string` \| `string[]`]                       | `null`  | ✕\*\*    | Unescaped validation text (allows HTML)                    |
+| `UNSAFE_validationText` | \[`string` \| `string[]`]                      | `null`  | ✕\*\*    | Unescaped validation text (allows HTML)                    |
 | `validationState`       | [Validation dictionary][dictionary-validation] | `null`  | ✕        | Type of validation state                                   |
-| `validationText`        | [`string` \| `string[]`]                       | `null`  | ✕\*\*    | Validation text                                            |
+| `validationText`        | \[`string` \| `string[]`]                      | `null`  | ✕\*\*    | Validation text                                            |
 
 (\*) To keep the component accessible, a label is always required. You can use the `label` for simple text or `UNSAFE_label` for HTML content.
 (\*\*) Props with and without `UNSAFE_` prefix are mutually exclusive.