Style(web-twig): Fix documentation content according to the textlint …

…rules

packages/web-twig/CONTRIBUTING.md

@@ -4,7 +4,7 @@
 
 ## 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.
+PHP language is required to develop this package. To support other frontend developers which do not have installed PHP locally, there is a Docker image available to develop this package.
 
 To start this project simply run `make start` and then add project certificates to your machine by `make cert`.
 
@@ -14,7 +14,7 @@ Please consult [`Makefile`][makefile] for available commands and options to setu
 
 ## 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.
+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
 
@@ -150,7 +150,7 @@ As we are now using only `dev-main` version of this package, until we have stabl
 
 ### Monorepo and Packagist.org
 
-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.
+Packagist requires a single repository for a single package to be present to publish the package. 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
 

packages/web-twig/README.md

@@ -39,7 +39,7 @@ Add `SpiritWebTwigBundle` into bundles (under `all` bundles). If you use Symfony
 
 ### Step 3 (optional)
 
-If you want to change the default settings, create a config
+To change the default settings, create a config
 
 **config/packages/spirit_web_twig.yml**
 
@@ -75,21 +75,21 @@ This is considered a way how you can pass down HTML strings.
 
 For available components see the [components directory][components-directory].
 
-if you want to extend these components, an example guide is [here][example-guide].
-if you want to contribute, read the guide [here][contributing].
+to extend these components, an example guide is [here][example-guide].
+to contribute, read the guide [here][contributing].
 
 ## Additional Attributes
 
 All components accept additional attributes that are passed down to the root element of the component.
 This is useful for adding custom event handlers, accessibility attributes, or other attributes that
 are not supported by the component API.
 
-ℹ️ If you need to pass down event handlers to the native form elements in our form components,
+ℹ️ To pass down event handlers to the native form elements in our form components,
 you can use the `inputProps` prop.
 
 Supported attributes are:
 
-- `on*` (eg. `onclick`)
+- `on*` (for example `onclick`)
 - `data-*`
 - `aria-*`
 - `id`
@@ -115,7 +115,7 @@ All Spirit components accept a set of props that can be used to control their ou
 - `marginX`
 - `marginY`
 
-These props accept a spacing token (eg. `space-100`), `auto` or an object with breakpoint keys and spacing token
+These props accept a spacing token (for example `space-100`), `auto` or an object with breakpoint keys and spacing token
 values or `auto`. We use these props to set global CSS utility classes on the root element of the component.
 
 Examples:
@@ -132,7 +132,7 @@ If you need more control over the styling of a component, you can use [escape ha
 
 ### Escape Hatches
 
-While we encourage teams to utilize Spirit design as it is, we do realize that sometimes product specific customizations
+While we encourage teams to use Spirit design as it is, we do realize that sometimes product specific customizations
 may be needed. In these cases, we encourage you or your designers to **talk to us**. We may be able to suggest
 an alternative implementation strategy, or perhaps your design can help propose future Spirit additions.
 

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

@@ -186,7 +186,7 @@ The Accordion itself consists of several components which cannot be used indepen
 | Name          | Type     | Default   | Required | Description                                                                                       |
 | ------------- | -------- | --------- | -------- | ------------------------------------------------------------------------------------------------- |
 | `elementType` | `string` | `section` | ✕        | Custom element type                                                                               |
-| `id`          | `string` | `null`    | optional | It depends on whether the "Stay open" functionality is used. If so, the id field is not required. |
+| `id`          | `string` | `null`    | optional | It depends on whether the "Stay open" functionality is used. If so, the ID field is not required. |
 
 ### AccordionItem
 
@@ -230,7 +230,7 @@ Please consult the [main README][web-readme] for how to include JavaScript plugi
 
 Or, feel free to write the controlling script yourself.
 
-👉 Check the [component's docs in the web package][web-js-api] to see the full documentation and API of the plugin.
+👉 Check the [component’s docs in the web package][web-js-api] to see the full documentation and API of the plugin.
 
 [accordion]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Accordion
 [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes

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

@@ -54,7 +54,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].
 
-⚠️ Please pay attention to the accessibility setting when Alert is dynamically displayed. In cases where you need to use the component as an information that requires the user's immediate attention,
+⚠️ Please pay attention to the accessibility setting when Alert is dynamically displayed. In cases where you need to use the component as an information that requires the user’s immediate attention,
 you can set `role="alert"` as an [additional attributes][readme-additional-attributes].
 
 [alert]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Alert

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

@@ -98,7 +98,7 @@ content can be overridden by any custom block content.
 | Name          | Type     | Default | Required | Description                                                                                                                                                                                                                                                        |
 | ------------- | -------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `elementType` | `string` | `nav`   | ✕        | HTML tag to render                                                                                                                                                                                                                                                 |
-| `goBackTitle` | `string` | —       | ✕        | Title/translation for backlink to previous page on mobile. It's required to be set when `items` are present. If the `items` property is not passed and the link tree is constructed manually within the children, the backlink needs to be included there as well. |
+| `goBackTitle` | `string` | —       | ✕        | Title/translation for backlink to previous page on mobile. It’s required to be set when `items` are present. If the `items` property is not passed and the link tree is constructed manually within the children, the backlink needs to be included there as well. |
 | `items`       | `array`  | `[]`    | ✕        | Navigation menu items                                                                                                                                                                                                                                              |
 
 On top of the API options, the components accept [additional attributes][readme-additional-attributes].
@@ -107,7 +107,7 @@ and [escape hatches][readme-escape-hatches].
 
 ## BreadcrumbsItem
 
-Use the `BreadcrumbsItem` component for the ordered list as the component's children instead of passing the breadcrumb items array via props:
+Use the `BreadcrumbsItem` component for the ordered list as the component’s children instead of passing the breadcrumb items array via props:
 
 ```twig
 <Breadcrumbs>

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

@@ -92,7 +92,7 @@ Please consult the [main README][web-readme] for how to include JavaScript plugi
 
 Or, feel free to write the controlling script yourself.
 
-👉 Check the [component's docs in the web package][web-js-api] to see the full documentation and API of the plugin.
+👉 Check the [component’s docs in the web package][web-js-api] to see the full documentation and API of the plugin.
 
 [collapse]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Collapse
 [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes

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

@@ -92,7 +92,7 @@ Please consult the [main README][web-readme] for how to include JavaScript plugi
 
 Or, feel free to write the controlling script yourself.
 
-👉 Check the [component's docs in the web package][web-js-api] to see the full documentation and API of the plugin.
+👉 Check the [component’s docs in the web package][web-js-api] to see the full documentation and API of the plugin.
 
 [dictionary-placement]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#placement
 [dropdown]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Dropdown

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

@@ -39,7 +39,7 @@ Please consult the [main README][web-readme] for how to include JavaScript plugi
 
 Or, feel free to write the controlling script yourself.
 
-👉 Check the [component's docs in the web package][web-js-api] to see the full documentation and API of the plugin.
+👉 Check the [component’s docs in the web package][web-js-api] to see the full documentation and API of the plugin.
 
 ## FileUploader
 
@@ -163,7 +163,7 @@ To mark the input as required, simply add the `isRequired` attribute:
 />
 ```
 
-> ⚠️ We don't use the `required` attribute on the input element. This is because it triggers the browser's default validation, which can block form submission.
+> ⚠️ We don’t use the `required` attribute on the input element. This is because it triggers the browser’s default validation, which can block form submission.
 > Instead, the `FileUploaderInput` component is used to open the system file dialog, and our [JS plugin][web-js-api] manages the file(s).
 > Please note, the validation for required files is not automatically handled. Developers need to implement this validation independently, using our JS plugin. This approach provides more flexibility and customization to meet specific validation requirements.
 
@@ -273,7 +273,7 @@ FileUploaderAttachment with image preview and edit button:
 While you may insert FileUploaderAttachment into your FileUploaderList, in typical use cases it will live inside a
 [`<template>`][mdn-template] tag in the parent FileUploader. The `<template>` tag must be inserted inside the main
 wrapper element that has the `data-spirit-toggle="fileUploader"` attribute. Our JavaScript FileUploader plugin will then pick
-up the template and apply it on any attachments the user wants to upload. In order to make the template work with image preview,
+up the template and apply it on any attachments the user wants to upload. To make the template work with image preview,
 add the `generateImagePreview` prop to the `FileUploaderAttachment` inside the `<template>`.
 
 ```twig

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

@@ -60,7 +60,7 @@ Without lexer:
 ## Custom Spacing
 
 You can use the `spacing` prop to apply custom spacing between items in both horizontal and vertical directions. The prop
-accepts either a spacing token (e.g. `space-100`) or an object with breakpoint keys and spacing token values.
+accepts either a spacing token (for example `space-100`) or an object with breakpoint keys and spacing token values.
 
 You can set custom spacing in the horizontal (x-axis) and vertical (y-axis) direction separately using the `spacingX` and `spacingY` props.
 
@@ -157,14 +157,14 @@ Grid Item is a wrapper for Grid items. It allows you to configure your Grid stru
 as you wish. Use props to set a column and rows where the Grid Item should start or end.
 Numeric values are used as a coordinates in the grid.
 
-If you want to set how to item should span over columns or rows, set the value as `span X`
+To set how to item should span over columns or rows, set the value as `span X`
 where X is the number of columns or rows the item should span, like this `columnStart="span 2"`
 or `rowEnd="span 3"`. Span could be used with responsive props as well and for both start and end.
 To understand how to use `span` read one of many articles about CSS Grid,
-eg. [CSS Grid Layout: The Span Keyword][digitalocean-span].
+for example [CSS Grid Layout: The Span Keyword][digitalocean-span].
 
-If you need to set a layout with repetitive columns, you can set this on the `Grid`
-component itself using the [`cols` prop](#api) and might not need to set columns on the items. Eg. article
+To set a layout with repetitive columns, you can set this on the `Grid`
+component itself using the [`cols` prop](#api) and might not need to set columns on the items. For example article
 listing with 3 columns is easier to set using `cols="3"` on the `Grid` component than setting
 `columnStart` and `columnEnd` on each `GridItem`.
 

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

@@ -38,14 +38,14 @@ plugins.
 
 Or, feel free to write the controlling script yourself.
 
-👉 Check the [component's docs in the web package][web-js-api] to see the full documentation and API of the plugin.
+👉 Check the [component’s docs in the web package][web-js-api] to see the full documentation and API of the plugin.
 
 ## Accessibility Guidelines
 
 👉 The animation effect of this component is dependent on the
 `prefers-reduced-motion` media query.
 
-🌍 Although we don't need it yet, this component experimentally supports RTL
+🌍 Although we don’t need it yet, this component experimentally supports RTL
 languages (because just a single line had to be added to make it all work 🎉).
 
 ## Minimal Header
@@ -169,7 +169,7 @@ and [escape hatches][readme-escape-hatches].
 As the name suggests, desktop-only actions are intended to display on desktop screens only. They generally work as flex
 containers that define vertical alignment and spacing.
 
-If you need to align actions to the end of the Header, use the `isAtEnd` prop.
+To align actions to the end of the Header, use the `isAtEnd` prop.
 
 👉 It is critical to **make sure all your actions fit the Header on the
 desktop breakpoint**. Spirit intentionally does not provide any overflow
@@ -273,7 +273,7 @@ and [escape hatches][readme-escape-hatches].
 
 ## Header Dialog
 
-Header Dialog is Spirit's solution for responsive navigation and selected use
+Header Dialog is Spirit’s solution for responsive navigation and selected use
 cases such as the user menu. Please note Header Dialog is not intended to be
 used for second-level navigation in general.
 

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

@@ -1,6 +1,6 @@
 # Icon
 
-Icon component uses inlineSVG extension, so don't forget to add icons path in the configuration
+Icon component uses inlineSVG extension, so don’t forget to add icons path in the configuration
 as seen in [inlineSVG docs][inlinesvg-docs].
 
 Basic example usage:
@@ -25,7 +25,7 @@ Without lexer:
 
 ## Render as Symbol
 
-If you need to prerender the icon as a [symbol][mdn-symbol], you can use the `isSymbol` prop:
+To prerender the icon as a [symbol][mdn-symbol], you can use the `isSymbol` prop:
 
 ```twig
 <Icon name="warning" isSymbol />

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

@@ -80,7 +80,7 @@ the state of the form and closing the dialog.
 
 ### Dropdowns in Modal
 
-Dropdowns can be safely used inside **non-scrollable** Modals so that the Dropdown popover is not clipped by the Modal's
+Dropdowns can be safely used inside **non-scrollable** Modals so that the Dropdown popover is not clipped by the Modal’s
 boundaries.
 
 👉 See the [Scrolling Long Content](#scrolling-long-content) section for more information on scroll control of Modals.
@@ -145,7 +145,7 @@ and allows users to easily close it.
 
 ### Hidden Title
 
-Even in cases you don't need the title to be visible you should provide an accessible name for the dialog, e.g.
+Even in cases you don’t need the title to be visible you should provide an accessible name for the dialog, e.g.
 using the `aria-label` attribute on `<Modal>` component:
 
 ```twig
@@ -268,7 +268,7 @@ and [escape hatches][readme-escape-hatches].
 
 ## Opening the Modal
 
-Use our JavaScript plugin to open your Modal, e.g.:
+Use our JavaScript plugin to open your Modal, for example:
 
 ```twig
 <Button
@@ -283,7 +283,7 @@ Use our JavaScript plugin to open your Modal, e.g.:
 
 ## Scrolling Long Content
 
-In case the content is longer than user's viewport or device, the ModalBody will expand to fit the height of its content
+In case the content is longer than user’s viewport or device, the ModalBody will expand to fit the height of its content
 and the whole ModalDialog will scroll.
 
 ### Enable Scrolling Inside ModalDialog
@@ -299,7 +299,7 @@ Scrolling inside ModalDialog can be turned on by adding the `isScrollable` prop:
 ### Scrolling with ScrollView
 
 To make content overflow more obvious to users, you can wrap the ModalBody content in a [ScrollView][scroll-view] that
-takes over the responsibility for scrolling and provides visual overflow decorators, e.g.:
+takes over the responsibility for scrolling and provides visual overflow decorators, for example:
 
 ```twig
 <ModalDialog isScrollable>
@@ -325,7 +325,7 @@ The custom properties fall back to the previous breakpoint using the mobile-firs
 `height="{{ { tablet: '500px' } }}"` while not setting the `desktop` breakpoint, the value will be used for
 both tablet and desktop screens. The single non-object value will be used for all breakpoints.
 
-This is useful for Modals with dynamic content, e.g. a list of items that can be added or removed, or a multistep wizard.
+This is useful for Modals with dynamic content, for example a list of items that can be added or removed, or a multistep wizard.
 
 ```twig
 <ModalDialog isScrollable height="500px">
@@ -365,7 +365,7 @@ both tablet and desktop screens. The single non-object value will be used for al
 
 ⚠️ This feature is only available for ModalDialogs with the `isScrollable` prop.
 
-👉 If a [custom height](#custom-height) is set, the custom max height is only applied if it's smaller than the custom
+👉 If a [custom height](#custom-height) is set, the custom max height is only applied if it’s smaller than the custom
 height.
 
 ## Stacking Modals
@@ -430,7 +430,7 @@ Please consult the [main README][web-readme] for how to include JavaScript plugi
 
 Or, feel free to write the controlling script yourself.
 
-👉 Check the [component's docs in the web package][web-js-api] to see the full documentation and API of the plugin.
+👉 Check the [component’s docs in the web package][web-js-api] to see the full documentation and API of the plugin.
 
 [autocomplete-attr]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
 [dictionary-alignment]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#alignment