From 8d931958086ee7b5f68312f6864ecbf2f39377ca Mon Sep 17 00:00:00 2001 From: literat Date: Wed, 11 Dec 2024 18:20:45 +0100 Subject: [PATCH] Style(web-twig): Fix docs using markdown linter refs #DS-1100 --- .remarkignore | 1 - packages/web-twig/CONTRIBUTING.md | 20 ++++---- packages/web-twig/DEPRECATIONS.md | 5 +- packages/web-twig/README.md | 8 +-- ...tendComponents.md => extend-components.md} | 4 +- .../docs/{inlineSVG.md => inline-svg.md} | 2 +- .../Resources/components/Accordion/README.md | 8 +-- .../src/Resources/components/Alert/README.md | 2 +- .../components/Breadcrumbs/README.md | 2 +- .../Resources/components/Checkbox/README.md | 4 +- .../Resources/components/Collapse/README.md | 4 +- .../Resources/components/Dropdown/README.md | 14 +++--- .../Resources/components/FieldGroup/README.md | 4 +- .../components/FileUploader/README.md | 30 ++++++------ .../src/Resources/components/Grid/README.md | 36 +++++++------- .../src/Resources/components/Header/README.md | 6 +-- .../src/Resources/components/Modal/README.md | 35 +++++++------ .../Resources/components/Pagination/README.md | 10 ++-- .../src/Resources/components/Pill/README.md | 8 +-- .../Resources/components/ScrollView/README.md | 10 ++-- .../src/Resources/components/Select/README.md | 4 +- .../src/Resources/components/Stack/README.md | 18 +++---- .../src/Resources/components/Tabs/README.md | 6 +-- .../Resources/components/TextArea/README.md | 5 +- .../Resources/components/TextField/README.md | 44 ++++++++--------- .../components/TextFieldBase/README.md | 49 +++++++++---------- .../src/Resources/components/Toast/README.md | 30 ++++++------ .../Resources/components/Tooltip/README.md | 5 +- .../components/UNSTABLE_EmptyState/README.md | 6 +-- .../components/VisuallyHidden/README.md | 2 + 30 files changed, 193 insertions(+), 189 deletions(-) rename packages/web-twig/docs/{extendComponents.md => extend-components.md} (86%) rename packages/web-twig/docs/{inlineSVG.md => inline-svg.md} (95%) diff --git a/.remarkignore b/.remarkignore index 52fe95b830..bdfbf1bd9b 100644 --- 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 index 85ec8c0c8d..2c71207385 100644 --- 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,7 +12,7 @@ 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. @@ -20,7 +20,7 @@ In order to maintain the uniformity of writing and functioning of components in 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. ``` -### 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. ``` -### 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 index 65eea2bb02..1d5794b3c0 100644 --- 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 + + + ## Collapse `data-spirit-is-disposable` The `data-spirit-more` attribute was removed, please use `data-spirit-is-disposable` instead. -#### Migration Guide +### Migration Guide - `` → `` diff --git a/packages/web-twig/README.md b/packages/web-twig/README.md index 3a656d2b2e..d898105ddb 100644 --- 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. ``` -# 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 b/packages/web-twig/docs/extend-components.md similarity index 86% rename from packages/web-twig/docs/extendComponents.md rename to packages/web-twig/docs/extend-components.md index ef6f492f12..1ebe711505 100644 --- a/packages/web-twig/docs/extendComponents.md +++ b/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 b/packages/web-twig/docs/inline-svg.md similarity index 95% rename from packages/web-twig/docs/inlineSVG.md rename to packages/web-twig/docs/inline-svg.md index 5ee6480d03..dac51ccdea 100644 --- a/packages/web-twig/docs/inlineSVG.md +++ b/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 index d6501963fb..043a322397 100644 --- 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 @@ -42,7 +42,7 @@ This is Twig implementation of the [Accordion][accordion] component. ``` -## Usage with initial open state (Stay open) +## Usage with Initial Open State (Stay Open) ```twig @@ -65,7 +65,7 @@ This is Twig implementation of the [Accordion][accordion] component. ``` -## Usage with only one open item at a time +## Usage with Only One Open Item at a Time ```twig @@ -141,7 +141,7 @@ rendered result into the slot: ``` -## 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 index 3fa6ac86ba..f1e8c741b2 100644 --- 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 index e423612bff..31f1935504 100644 --- 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 index 3de2b2b00f..21b957542c 100644 --- 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 index 049a0c6193..7f4e33cd11 100644 --- 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 index 02fe0323bb..ffe0f8d804 100644 --- 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 index 4257da68af..e0800dffd2 100644 --- 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. diff --git a/packages/web-twig/src/Resources/components/FileUploader/README.md b/packages/web-twig/src/Resources/components/FileUploader/README.md index 20b1b9c0b3..0969a6551e 100644 --- a/packages/web-twig/src/Resources/components/FileUploader/README.md +++ b/packages/web-twig/src/Resources/components/FileUploader/README.md @@ -2,6 +2,8 @@ FileUploader allows users to pick one or more files to upload. + + **FileUploader itself actually does not upload anything to the server.** FileUploader is a composition of a few subcomponents: @@ -122,7 +124,7 @@ the `maxUploadedFiles` attribute: ``` -### Input Behavior When the Queue is Filled (JavaScript) +### Input Behavior When the Queue Is Filled (JavaScript) You can set the input/drop zone to be hidden or disabled when the file queue limit is reached. When you set `queueLimitBehavior` together with the desired limit for the queue: @@ -216,12 +218,12 @@ To mark the input as disabled, simply add the `isDisabled` attribute: | `multiple` | `void` | `null` | ✕ | If set, [multiple files can be selected][multiple-attr] | | `name` | `string` | `null` | ✕ | Input name | | `pickAFileText` | `string` | `Upload your file` | ✕ | Text shown in the drop zone | -| `queueLimitBehavior` | [`hide` \| `disable` \| `none`] | `none` | ✕ | Input behavior when the file queue is filled | +| `queueLimitBehavior` | \[`hide` \| `disable` \| `none`] | `none` | ✕ | Input behavior when the file queue is filled | | `UNSAFE_helperText` | `string` | `null` | ✕\*\* | Unescaped custom helper text | | `UNSAFE_label` | `string` | `null` | ✕\* | 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 | (\*) 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. @@ -300,16 +302,16 @@ With image preview: ### API -| Name | Type | Default | Required | Description | -| ---------------------- | ---------------------- | -------- | -------- | -------------------------------------------------------------------------------------------------- | -| `editText` | `string` | `Edit` | ✕ | Edit button text | -| `fileName` | `string` | `null` | ✕ | File name | -| `generateImagePreview` | `bool` | `false` | ✕ | If true and used in the attachment template, the JS plugin will try to show a preview of the image | -| `iconName` | `string` | `file` | ✕ | Icon shown along the file | -| `imagePreview` | `string` | `null` | ✕ | URL or base64 of an image | -| `imageObjectFit` | [`cover` \| `contain`] | `cover` | ✕ | Defines FileUploaderAttachment image fit in container | -| `onEdit` | `func` | `null` | ✕ | Function to trigger on click on edit button | -| `removeText` | `string` | `Remove` | ✕ | Remove button text | +| Name | Type | Default | Required | Description | +| ---------------------- | ----------------------- | -------- | -------- | -------------------------------------------------------------------------------------------------- | +| `editText` | `string` | `Edit` | ✕ | Edit button text | +| `fileName` | `string` | `null` | ✕ | File name | +| `generateImagePreview` | `bool` | `false` | ✕ | If true and used in the attachment template, the JS plugin will try to show a preview of the image | +| `iconName` | `string` | `file` | ✕ | Icon shown along the file | +| `imagePreview` | `string` | `null` | ✕ | URL or base64 of an image | +| `imageObjectFit` | \[`cover` \| `contain`] | `cover` | ✕ | Defines FileUploaderAttachment image fit in container | +| `onEdit` | `func` | `null` | ✕ | Function to trigger on click on edit button | +| `removeText` | `string` | `Remove` | ✕ | Remove button text | 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] diff --git a/packages/web-twig/src/Resources/components/Grid/README.md b/packages/web-twig/src/Resources/components/Grid/README.md index 0a90fd74ed..87a8109fe5 100644 --- a/packages/web-twig/src/Resources/components/Grid/README.md +++ b/packages/web-twig/src/Resources/components/Grid/README.md @@ -99,7 +99,7 @@ Custom vertical (y-axis) spacing: ## Item Alignment The `alignmentX` and `alignmentY` props are used to control the alignment of items within the `Grid` container. -The available values for these properties can be found in our [alignment dictionary][alignment-dictionary]. +The available values for these properties can be found in our [alignment dictionary][dictionary-alignment]. `alignmentX`: Manages horizontal alignment, allowing you to position items to the left, center, or right of the container. It can also be configured with responsive values for different breakpoints. `alignmentY`: Manages vertical alignment, enabling you to position items at the top, center, or bottom of the container. It supports responsive values for various breakpoints as well. @@ -137,15 +137,15 @@ Responsive horizontal and vertical alignment: ### API -| Name | Type | Default | Required | Description | -| ------------- | -------------------------------------------------------------------- | --------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------- | -| `alignmentX` | [ [AlignmentXExtended dictionary][dictionary-alignment] \| `object`] | `stretch` | ✕ | Apply vertical alignment of items, use object to set responsive values, e.g. `{ mobile: 'left', tablet: 'center', desktop: 'right' }` | -| `alignmentY` | [ [AlignmentYExtended dictionary][dictionary-alignment] \| `object`] | `stretch` | ✕ | Apply horizontal alignment of items, use object to set responsive values, e.g. `{ mobile: 'top', tablet: 'center', desktop: 'bottom' }` | -| `cols` | [`1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `12` \| `object`] | `null` | ✕ | Number of columns to use, use object to set responsive values, e.g. `{ mobile: 1, tablet: 2, desktop: 3 }` | -| `elementType` | `string` | `div` | ✕ | HTML tag to render | -| `spacing` | [`spacing token` \| `object`] | `null` | ✕ | Apply [custom spacing](#custom-spacing) in both horizontal and vertical directions between items | -| `spacingX` | [`spacing token` \| `object`] | `null` | ✕ | Apply horizontal [custom spacing](#custom-spacing) between items | -| `spacingY` | [`spacing token` \| `object`] | `null` | ✕ | Apply vertical [custom spacing](#custom-spacing) between items | +| Name | Type | Default | Required | Description | +| ------------- | --------------------------------------------------------------------- | --------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------- | +| `alignmentX` | \[ [AlignmentXExtended dictionary][dictionary-alignment] \| `object`] | `stretch` | ✕ | Apply vertical alignment of items, use object to set responsive values, e.g. `{ mobile: 'left', tablet: 'center', desktop: 'right' }` | +| `alignmentY` | \[ [AlignmentYExtended dictionary][dictionary-alignment] \| `object`] | `stretch` | ✕ | Apply horizontal alignment of items, use object to set responsive values, e.g. `{ mobile: 'top', tablet: 'center', desktop: 'bottom' }` | +| `cols` | \[`1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `12` \| `object`] | `null` | ✕ | Number of columns to use, use object to set responsive values, e.g. `{ mobile: 1, tablet: 2, desktop: 3 }` | +| `elementType` | `string` | `div` | ✕ | HTML tag to render | +| `spacing` | \[`spacing token` \| `object`] | `null` | ✕ | Apply [custom spacing](#custom-spacing) in both horizontal and vertical directions between items | +| `spacingX` | \[`spacing token` \| `object`] | `null` | ✕ | Apply horizontal [custom spacing](#custom-spacing) between items | +| `spacingY` | \[`spacing token` \| `object`] | `null` | ✕ | Apply vertical [custom spacing](#custom-spacing) between items | 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] @@ -184,7 +184,7 @@ Basic example usage: ``` -### Responsive example usage: +### Responsive Example Usage Pass an object to props to set different values for different breakpoints. The values will be applied from mobile to desktop and if not set for a breakpoint, the value from the @@ -219,13 +219,13 @@ Without lexer: ### API -| Name | Type | Default | Required | Description | -| ------------- | ---------------------------------- | ------- | -------- | ---------------------------------- | -| `elementType` | `string` | `div` | ✕ | HTML tag to render | -| `columnEnd` | [`number` \| `string` \| `object`] | `null` | ✕ | Column where the item should end | -| `columnStart` | [`number` \| `string` \| `object`] | `null` | ✕ | Column where the item should start | -| `rowEnd` | [`number` \| `string` \| `object`] | `null` | ✕ | Row where the item should end | -| `rowStart` | [`number` \| `string` \| `object`] | `null` | ✕ | Row where the item should start | +| Name | Type | Default | Required | Description | +| ------------- | ----------------------------------- | ------- | -------- | ---------------------------------- | +| `elementType` | `string` | `div` | ✕ | HTML tag to render | +| `columnEnd` | \[`number` \| `string` \| `object`] | `null` | ✕ | Column where the item should end | +| `columnStart` | \[`number` \| `string` \| `object`] | `null` | ✕ | Column where the item should start | +| `rowEnd` | \[`number` \| `string` \| `object`] | `null` | ✕ | Row where the item should end | +| `rowStart` | \[`number` \| `string` \| `object`] | `null` | ✕ | Row where the item should start | 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] diff --git a/packages/web-twig/src/Resources/components/Header/README.md b/packages/web-twig/src/Resources/components/Header/README.md index 24c5bade13..3dc47df807 100644 --- a/packages/web-twig/src/Resources/components/Header/README.md +++ b/packages/web-twig/src/Resources/components/Header/README.md @@ -329,9 +329,9 @@ the optional secondary actions slot. #### API -| Name | Type | Default | Required | Description | -| ------- | -------------------------- | --------- | -------- | ------------------------- | -| `color` | [`primary` \| `secondary`] | `primary` | ✕ | Color of the actions slot | +| Name | Type | Default | Required | Description | +| ------- | --------------------------- | --------- | -------- | ------------------------- | +| `color` | \[`primary` \| `secondary`] | `primary` | ✕ | Color of the actions slot | 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] diff --git a/packages/web-twig/src/Resources/components/Modal/README.md b/packages/web-twig/src/Resources/components/Modal/README.md index fc9fc681ef..2eec2c044c 100644 --- a/packages/web-twig/src/Resources/components/Modal/README.md +++ b/packages/web-twig/src/Resources/components/Modal/README.md @@ -108,23 +108,23 @@ By default, the docked dialog on mobile screens shrinks to fit the height of its ### API -| Name | Type | Default | Required | Description | -| -------------------- | ----------------------------- | --------- | -------- | -------------------------------------------------------------------------------------------------------------------------- | -| `accept-charset` | `string` | `null` | ✕ | `elementType="form"` only: Character encodings to use for form submission (intentionally in kebab-case) | -| `action` | `string` | `null` | ✕ | `elementType="form"` only: URL to use for form submission | -| `autocomplete` | `string` | `null` | ✕ | `elementType="form"` only: [Automated assistance in filling][autocomplete-attr] | -| `elementType` | `string` | `article` | ✕ | HTML tag to render | -| `enctype` | `string` | `null` | ✕ | `elementType="form"` only: Encoding to use for form submission | -| `height` | [`string` \| `object`] | `null` | ✕ | Preferred height of the modal. Accepts any valid CSS value, either as a string or an object with breakpoints as keys. | -| `isDockedOnMobile` | `bool` | `false` | ✕ | Dock the ModalDialog to the bottom of the screen on mobile | -| `isExpandedOnMobile` | `bool` | `false` | ✕ | If the ModalDialog should expand on mobile. Overrides any height defined by `preferredHeightOnMobile`. | -| `isScrollable` | `bool` | `true` | ✕ | If the ModalDialog should be scrollable. If set to `false`, the dialog will not scroll and will expand to fit the content. | -| `maxHeight` | [`string` \| `object`] | `null` | ✕ | Max height of the modal. Accepts any valid CSS value. | -| `method` | [`get` \| `post` \| `dialog`] | `null` | ✕ | `elementType="form"` only: HTTP method to use for form submission | -| `name` | `string` | `null` | ✕ | `elementType="form"` only: Name of the form | -| `novalidate` | `void` | `null` | ✕ | `elementType="form"` only: [If the dialog should have validation disabled][novalidate-attr] | -| `rel` | `string` | `null` | ✕ | `elementType="form"` only: Relationship between the current document and the linked resource | -| `target` | `string` | `null` | ✕ | `elementType="form"` only: Browsing context for form submission | +| Name | Type | Default | Required | Description | +| -------------------- | ------------------------------ | --------- | -------- | -------------------------------------------------------------------------------------------------------------------------- | +| `accept-charset` | `string` | `null` | ✕ | `elementType="form"` only: Character encodings to use for form submission (intentionally in kebab-case) | +| `action` | `string` | `null` | ✕ | `elementType="form"` only: URL to use for form submission | +| `autocomplete` | `string` | `null` | ✕ | `elementType="form"` only: [Automated assistance in filling][autocomplete-attr] | +| `elementType` | `string` | `article` | ✕ | HTML tag to render | +| `enctype` | `string` | `null` | ✕ | `elementType="form"` only: Encoding to use for form submission | +| `height` | \[`string` \| `object`] | `null` | ✕ | Preferred height of the modal. Accepts any valid CSS value, either as a string or an object with breakpoints as keys. | +| `isDockedOnMobile` | `bool` | `false` | ✕ | Dock the ModalDialog to the bottom of the screen on mobile | +| `isExpandedOnMobile` | `bool` | `false` | ✕ | If the ModalDialog should expand on mobile. Overrides any height defined by `preferredHeightOnMobile`. | +| `isScrollable` | `bool` | `true` | ✕ | If the ModalDialog should be scrollable. If set to `false`, the dialog will not scroll and will expand to fit the content. | +| `maxHeight` | \[`string` \| `object`] | `null` | ✕ | Max height of the modal. Accepts any valid CSS value. | +| `method` | \[`get` \| `post` \| `dialog`] | `null` | ✕ | `elementType="form"` only: HTTP method to use for form submission | +| `name` | `string` | `null` | ✕ | `elementType="form"` only: Name of the form | +| `novalidate` | `void` | `null` | ✕ | `elementType="form"` only: [If the dialog should have validation disabled][novalidate-attr] | +| `rel` | `string` | `null` | ✕ | `elementType="form"` only: Relationship between the current document and the linked resource | +| `target` | `string` | `null` | ✕ | `elementType="form"` only: Browsing context for form submission | 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] @@ -440,7 +440,6 @@ Or, feel free to write the controlling script yourself. [novalidate-attr]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#novalidate [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes [readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#escape-hatches -[readme-feature-flags]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md#feature-flags [readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props [scroll-view]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/src/Resources/components/ScrollView/README.md [web-js-api]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Modal/README.md#javascript-plugin diff --git a/packages/web-twig/src/Resources/components/Pagination/README.md b/packages/web-twig/src/Resources/components/Pagination/README.md index 154e62a479..fe3ffadacb 100644 --- a/packages/web-twig/src/Resources/components/Pagination/README.md +++ b/packages/web-twig/src/Resources/components/Pagination/README.md @@ -10,11 +10,11 @@ The Pagination is a composition of several subcomponents: - [PaginationLinkNext](#paginationlinknext--paginationlinkprevious) - [PaginationLinkPrevious](#paginationlinknext--paginationlinkprevious) -Basic example usage: +## Basic Usage ### Pagination -#### Examples: +#### Examples ```twig @@ -32,7 +32,7 @@ and [escape hatches][readme-escape-hatches]. ### PaginationItem -#### Examples: +#### Examples ```twig @@ -58,7 +58,7 @@ and [escape hatches][readme-escape-hatches]. 👉 Make sure to add all the necessary attributes and children to make the component accessible. -#### Examples: +#### Examples ```twig diff --git a/packages/web-twig/src/Resources/components/Pill/README.md b/packages/web-twig/src/Resources/components/Pill/README.md index cc3536ea17..bcb407d6e2 100644 --- a/packages/web-twig/src/Resources/components/Pill/README.md +++ b/packages/web-twig/src/Resources/components/Pill/README.md @@ -29,10 +29,10 @@ Without lexer: ## API -| Name | Type | Default | Required | Description | -| ------------- | ------------------------------------------------------------------------- | ---------- | -------- | ------------------ | -| `color` | [[Emotion Color dictionary][dictionary-color] \| `selected` \| `neutral`] | `selected` | ✕ | Color variant | -| `elementType` | `string` | `span` | ✕ | HTML tag to render | +| Name | Type | Default | Required | Description | +| ------------- | -------------------------------------------------------------------------- | ---------- | -------- | ------------------ | +| `color` | \[[Emotion Color dictionary][dictionary-color] \| `selected` \| `neutral`] | `selected` | ✕ | Color variant | +| `elementType` | `string` | `span` | ✕ | HTML tag to render | 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] diff --git a/packages/web-twig/src/Resources/components/ScrollView/README.md b/packages/web-twig/src/Resources/components/ScrollView/README.md index 82154fb07d..2798e94c9c 100644 --- a/packages/web-twig/src/Resources/components/ScrollView/README.md +++ b/packages/web-twig/src/Resources/components/ScrollView/README.md @@ -46,11 +46,11 @@ Or, feel free to write the controlling script yourself. ## API -| Name | Type | Default | Required | Description | -| --------------------- | ---------------------------------- | ---------- | -------- | ---------------------------------- | -| `direction` | [`horizontal` \| `vertical`] | `vertical` | ✕ | Direction of the scroll | -| `isScrollbarDisabled` | `bool` | `false` | ✕ | If true, the Scrollbar is disabled | -| `overflowDecorators` | [`borders` \| `shadows` \| `both`] | `shadows` | ✕ | Type of overflow decorators | +| Name | Type | Default | Required | Description | +| --------------------- | ----------------------------------- | ---------- | -------- | ---------------------------------- | +| `direction` | \[`horizontal` \| `vertical`] | `vertical` | ✕ | Direction of the scroll | +| `isScrollbarDisabled` | `bool` | `false` | ✕ | If true, the Scrollbar is disabled | +| `overflowDecorators` | \[`borders` \| `shadows` \| `both`] | `shadows` | ✕ | Type of overflow decorators | 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] diff --git a/packages/web-twig/src/Resources/components/Select/README.md b/packages/web-twig/src/Resources/components/Select/README.md index 9667f7aa69..56de177727 100644 --- a/packages/web-twig/src/Resources/components/Select/README.md +++ b/packages/web-twig/src/Resources/components/Select/README.md @@ -58,9 +58,9 @@ Without lexer: | `name` | `string` | `null` | ✕ | Select name | | `UNSAFE_helperText` | `string` | `null` | ✕ | Unescaped custom helper text | | `UNSAFE_label` | `string` | — | ✓\* | Unescaped label text | -| `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 | (\*) The label is required for this component. Use `label` or `UNSAFE_label` to set the label. diff --git a/packages/web-twig/src/Resources/components/Stack/README.md b/packages/web-twig/src/Resources/components/Stack/README.md index b0922591b3..8c4f033c96 100644 --- a/packages/web-twig/src/Resources/components/Stack/README.md +++ b/packages/web-twig/src/Resources/components/Stack/README.md @@ -1,6 +1,6 @@ # Stack -[Stack] is a component that allows you to compose elements vertically. +[Stack][stack] is a component that allows you to compose elements vertically. Basic example usage: @@ -79,14 +79,14 @@ Custom responsive spacing: ## API -| Name | Type | Default | Required | Description | -| ------------------------- | ----------------------------- | ------- | -------- | ----------------------------------------------------- | -| `elementType` | `string` | `div` | ✕ | Element type of the wrapper element | -| `hasEndDivider` | `bool` | `false` | ✕ | Render a divider after the last item | -| `hasIntermediateDividers` | `bool` | `false` | ✕ | Render dividers between items | -| `hasSpacing` | `bool` | `false` | ✕ | Apply default spacing between items | -| `hasStartDivider` | `bool` | `false` | ✕ | Render a divider before the first item | -| `spacing` | [`spacing token` \| `object`] | `null` | ✕ | Apply [custom spacing](#custom-spacing) between items | +| Name | Type | Default | Required | Description | +| ------------------------- | ------------------------------ | ------- | -------- | ----------------------------------------------------- | +| `elementType` | `string` | `div` | ✕ | Element type of the wrapper element | +| `hasEndDivider` | `bool` | `false` | ✕ | Render a divider after the last item | +| `hasIntermediateDividers` | `bool` | `false` | ✕ | Render dividers between items | +| `hasSpacing` | `bool` | `false` | ✕ | Apply default spacing between items | +| `hasStartDivider` | `bool` | `false` | ✕ | Render a divider before the first item | +| `spacing` | \[`spacing token` \| `object`] | `null` | ✕ | Apply [custom spacing](#custom-spacing) between items | 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] diff --git a/packages/web-twig/src/Resources/components/Tabs/README.md b/packages/web-twig/src/Resources/components/Tabs/README.md index 371233ab3f..4ab7f7e948 100644 --- a/packages/web-twig/src/Resources/components/Tabs/README.md +++ b/packages/web-twig/src/Resources/components/Tabs/README.md @@ -69,9 +69,9 @@ The Tabs itself consists of many components which cannot be used independently. ### TabList -| Name | Type | Default | Required | Description | -| --------- | ----------------------------- | ------- | -------- | --------------------------------------------------------- | -| `spacing` | [`spacing token` \| `object`] | `null` | ✕ | Apply [custom spacing](#custom-spacing) between tab items | +| Name | Type | Default | Required | Description | +| --------- | ------------------------------ | ------- | -------- | --------------------------------------------------------- | +| `spacing` | \[`spacing token` \| `object`] | `null` | ✕ | Apply [custom spacing](#custom-spacing) between tab items | ### TabItem diff --git a/packages/web-twig/src/Resources/components/TextArea/README.md b/packages/web-twig/src/Resources/components/TextArea/README.md index 2010068e24..1b1c9b3f71 100644 --- a/packages/web-twig/src/Resources/components/TextArea/README.md +++ b/packages/web-twig/src/Resources/components/TextArea/README.md @@ -64,9 +64,9 @@ Without lexer: | `rows` | `number` | `null` | ✕ | Number of visible rows | | `UNSAFE_helperText` | `string` | `null` | ✕ | Unescaped custom helper text | | `UNSAFE_label` | `string` | — | ✓\* | Unescaped label text | -| `UNSAFE_validationText` | [`string` \| `string[]`] | `null` | ✕ | Unescaped custom validation text | +| `UNSAFE_validationText` | \[`string` \| `string[]`] | `null` | ✕ | Unescaped custom 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` | ✕ | TextArea value | (\*) Label is required. You can use the `label` for simple text or `UNSAFE_label` for HTML content. @@ -99,7 +99,6 @@ Then you need to add attribute `isAutoResizing` to the component. 👉 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 [autocomplete-attr]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete [dictionary-validation]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#validation [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes diff --git a/packages/web-twig/src/Resources/components/TextField/README.md b/packages/web-twig/src/Resources/components/TextField/README.md index c20e198fef..23d0ed25f7 100644 --- a/packages/web-twig/src/Resources/components/TextField/README.md +++ b/packages/web-twig/src/Resources/components/TextField/README.md @@ -58,28 +58,28 @@ Without lexer: ## API -| Name | Type | Default | Required | Description | -| ----------------------- | --------------------------------------------------------------------------- | ------- | -------- | ----------------------------------------------------------------------- | -| `autocomplete` | `string` | `null` | ✕ | [Automated assistance in filling][autocomplete-attr] | -| `hasPasswordToggle` | `bool` | `false` | ✕ | If true, the `type` is set to `password` and a password toggle is shown | -| `helperText` | `string` | `null` | ✕ | Custom helper text | -| `id` | `string` | — | ✓ | Input and label identification | -| `inputProps` | `string[]` | `[]` | ✕ | Pass additional attributes to the input element | -| `inputWidth` | `number` | `null` | ✕ | Input width | -| `isDisabled` | `bool` | `false` | ✕ | If true, input is disabled | -| `isFluid` | `bool` | `false` | ✕ | If true, the element spans to the full width of its parent | -| `isLabelHidden` | `bool` | `false` | ✕ | If true, label is hidden | -| `isRequired` | `bool` | `false` | ✕ | If true, input is required | -| `label` | `string` | — | ✓\* | Label text | -| `name` | `string` | `null` | ✕ | Input name | -| `placeholder` | `string` | `null` | ✕ | Input placeholder | -| `type` | [`email` \| `number` \| `password` \| `search` \| `tel` \| `text` \| `url`] | `text` | ✕ | Input type | -| `UNSAFE_helperText` | `string` | `null` | ✕ | Unescaped custom helper text | -| `UNSAFE_label` | `string` | — | ✓\* | Unescaped label 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 | -| `value` | `string` | `null` | ✕ | Input value | +| Name | Type | Default | Required | Description | +| ----------------------- | ---------------------------------------------------------------------------- | ------- | -------- | ----------------------------------------------------------------------- | +| `autocomplete` | `string` | `null` | ✕ | [Automated assistance in filling][autocomplete-attr] | +| `hasPasswordToggle` | `bool` | `false` | ✕ | If true, the `type` is set to `password` and a password toggle is shown | +| `helperText` | `string` | `null` | ✕ | Custom helper text | +| `id` | `string` | — | ✓ | Input and label identification | +| `inputProps` | `string[]` | `[]` | ✕ | Pass additional attributes to the input element | +| `inputWidth` | `number` | `null` | ✕ | Input width | +| `isDisabled` | `bool` | `false` | ✕ | If true, input is disabled | +| `isFluid` | `bool` | `false` | ✕ | If true, the element spans to the full width of its parent | +| `isLabelHidden` | `bool` | `false` | ✕ | If true, label is hidden | +| `isRequired` | `bool` | `false` | ✕ | If true, input is required | +| `label` | `string` | — | ✓\* | Label text | +| `name` | `string` | `null` | ✕ | Input name | +| `placeholder` | `string` | `null` | ✕ | Input placeholder | +| `type` | \[`email` \| `number` \| `password` \| `search` \| `tel` \| `text` \| `url`] | `text` | ✕ | Input type | +| `UNSAFE_helperText` | `string` | `null` | ✕ | Unescaped custom helper text | +| `UNSAFE_label` | `string` | — | ✓\* | Unescaped label 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 | +| `value` | `string` | `null` | ✕ | Input value | (\*) The label is required for this component. Use `label` or `UNSAFE_label` to set the label. diff --git a/packages/web-twig/src/Resources/components/TextFieldBase/README.md b/packages/web-twig/src/Resources/components/TextFieldBase/README.md index 97e83b51ba..2fa71c283e 100644 --- a/packages/web-twig/src/Resources/components/TextFieldBase/README.md +++ b/packages/web-twig/src/Resources/components/TextFieldBase/README.md @@ -58,30 +58,30 @@ Without lexer: ## API -| Name | Type | Default | Required | Description | -| ----------------------- | --------------------------------------------------------------------------- | ------- | -------- | ----------------------------------------------------------------------- | -| `autocomplete` | `string` | `null` | ✕ | [Automated assistance in filling][autocomplete-attr] | -| `hasPasswordToggle` | `bool` | `false` | ✕ | If true, the `type` is set to `password` and a password toggle is shown | -| `helperText` | `string` | `null` | ✕ | Custom helper text | -| `id` | `string` | — | ✓ | Input and label identification | -| `inputProps` | `string[]` | `[]` | ✕ | Pass additional attributes to the input/textarea element | -| `isAutoResizing` | `bool` | `false` | ✕ | If true, TextArea adjusts its height as user types | -| `isDisabled` | `bool` | `false` | ✕ | If true, input is disabled | -| `isFluid` | `bool` | `false` | ✕ | If true, the element spans to the full width of its parent | -| `isLabelHidden` | `bool` | `false` | ✕ | If true, label is hidden | -| `isMultiline` | `bool` | `false` | ✕ | If true, rendered DOM element is `textarea` | -| `isRequired` | `bool` | `false` | ✕ | If true, input is required | -| `label` | `string` | — | ✓\* | Label text | -| `name` | `string` | `null` | ✕ | Input name | -| `pattern` | `string` | `null` | ✕ | Defines regular expressions for allowed value types | -| `placeholder` | `string` | `null` | ✕ | Input placeholder | -| `type` | [`email` \| `number` \| `password` \| `search` \| `tel` \| `text` \| `url`] | `text` | ✕ | Input type | -| `UNSAFE_helperText` | `string` | `null` | ✕ | Unescaped custom helper text | -| `UNSAFE_label` | `string` | — | ✓\* | Unescaped label 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 | -| `value` | `string` | `null` | ✕ | Input value | +| Name | Type | Default | Required | Description | +| ----------------------- | ---------------------------------------------------------------------------- | ------- | -------- | ----------------------------------------------------------------------- | +| `autocomplete` | `string` | `null` | ✕ | [Automated assistance in filling][autocomplete-attr] | +| `hasPasswordToggle` | `bool` | `false` | ✕ | If true, the `type` is set to `password` and a password toggle is shown | +| `helperText` | `string` | `null` | ✕ | Custom helper text | +| `id` | `string` | — | ✓ | Input and label identification | +| `inputProps` | `string[]` | `[]` | ✕ | Pass additional attributes to the input/textarea element | +| `isAutoResizing` | `bool` | `false` | ✕ | If true, TextArea adjusts its height as user types | +| `isDisabled` | `bool` | `false` | ✕ | If true, input is disabled | +| `isFluid` | `bool` | `false` | ✕ | If true, the element spans to the full width of its parent | +| `isLabelHidden` | `bool` | `false` | ✕ | If true, label is hidden | +| `isMultiline` | `bool` | `false` | ✕ | If true, rendered DOM element is `textarea` | +| `isRequired` | `bool` | `false` | ✕ | If true, input is required | +| `label` | `string` | — | ✓\* | Label text | +| `name` | `string` | `null` | ✕ | Input name | +| `pattern` | `string` | `null` | ✕ | Defines regular expressions for allowed value types | +| `placeholder` | `string` | `null` | ✕ | Input placeholder | +| `type` | \[`email` \| `number` \| `password` \| `search` \| `tel` \| `text` \| `url`] | `text` | ✕ | Input type | +| `UNSAFE_helperText` | `string` | `null` | ✕ | Unescaped custom helper text | +| `UNSAFE_label` | `string` | — | ✓\* | Unescaped label 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 | +| `value` | `string` | `null` | ✕ | Input value | (\*) The label is required for this component. Use `label` or `UNSAFE_label` to set the label. @@ -89,7 +89,6 @@ 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]. -[autocomplete-attr]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete [autocomplete-attr]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete [dictionary-validation]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#validation [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes diff --git a/packages/web-twig/src/Resources/components/Toast/README.md b/packages/web-twig/src/Resources/components/Toast/README.md index a768ddf1fc..7d0cb4417e 100644 --- a/packages/web-twig/src/Resources/components/Toast/README.md +++ b/packages/web-twig/src/Resources/components/Toast/README.md @@ -133,11 +133,11 @@ items are dismissed. ### API -| Name | Type | Default | Required | Description | -| --------------- | ----------------------------------------------------------- | -------- | -------- | ----------------------------------------------------------------- | -| `alignmentX` | [[AlignmentX dictionary][dictionary-alignment] \| `object`] | `center` | ✕ | Horizontal alignment of the toast queue | -| `alignmentY` | [`top` \| `bottom` \| `object`] | `bottom` | ✕ | Vertical alignment of the toast queue | -| `isCollapsible` | `bool` | `true` | ✕ | If true, Toast queue collapses if there are more than 3 ToastBars | +| Name | Type | Default | Required | Description | +| --------------- | ------------------------------------------------------------ | -------- | -------- | ----------------------------------------------------------------- | +| `alignmentX` | \[[AlignmentX dictionary][dictionary-alignment] \| `object`] | `center` | ✕ | Horizontal alignment of the toast queue | +| `alignmentY` | \[`top` \| `bottom` \| `object`] | `bottom` | ✕ | Vertical alignment of the toast queue | +| `isCollapsible` | `bool` | `true` | ✕ | If true, Toast queue collapses if there are more than 3 ToastBars | 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] @@ -280,16 +280,16 @@ To make the ToastBar dismissible, add the `isDismissible` prop along with a uniq ### API -| Name | Type | Default | Required | Description | -| --------------- | ----------------------------------------------------------- | ---------- | -------- | -------------------------------------------------------------------- | -| `closeLabel` | `string` | `Close` | ✕ | Close label | -| `color` | [[Emotion Color dictionary][dictionary-color] \| `neutral`] | `neutral` | ✕ | Color variant | -| `hasIcon` | `bool` | `false` \* | ✕ | If true, an icon is shown along the message | -| `iconName` | `string` | `info` \* | ✕ | Name of a custom icon to be shown along the message | -| `id` | `string` | — | ✕ | Optional ToastBar ID. Required when `isDismissible` is set to `true` | -| `isDismissible` | `bool` | `false` | ✕ | If true, ToastBar can be dismissed by user | -| `isTemplate` | `bool` | `false` | ✕ | If true, ToastBar will be adjusted for rendering inside `