From e2ef7414ca81580f875b4346431c1996dae0fbae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= Date: Thu, 25 Jan 2024 16:03:54 +0100 Subject: [PATCH] Docs(web-twig): Improve additional API options info #DS-1099 Also unify links. --- packages/web-twig/README.md | 18 ++++++ .../Resources/components/Accordion/README.md | 15 +++-- .../src/Resources/components/Alert/README.md | 16 +++-- .../components/Breadcrumbs/README.md | 18 +++--- .../src/Resources/components/Button/README.md | 12 ++-- .../Resources/components/ButtonLink/README.md | 14 ++-- .../Resources/components/Checkbox/README.md | 17 ++--- .../Resources/components/Collapse/README.md | 14 ++-- .../Resources/components/Container/README.md | 12 ++-- .../Resources/components/Dropdown/README.md | 20 +++--- .../Resources/components/FieldGroup/README.md | 13 ++-- .../components/FileUploader/README.md | 40 ++++++------ .../src/Resources/components/Grid/README.md | 26 ++++---- .../src/Resources/components/Header/README.md | 64 +++++++++---------- .../Resources/components/Heading/README.md | 14 ++-- .../src/Resources/components/Icon/README.md | 8 +-- .../src/Resources/components/Item/README.md | 11 ++-- .../src/Resources/components/Link/README.md | 14 ++-- .../src/Resources/components/Modal/README.md | 56 ++++++++-------- .../Resources/components/Pagination/README.md | 36 +++++------ .../src/Resources/components/Pill/README.md | 14 ++-- .../src/Resources/components/Radio/README.md | 19 +++--- .../Resources/components/ScrollView/README.md | 14 ++-- .../src/Resources/components/Select/README.md | 13 ++-- .../Resources/components/Spinner/README.md | 10 +-- .../src/Resources/components/Stack/README.md | 10 +-- .../src/Resources/components/Tabs/README.md | 14 ++-- .../src/Resources/components/Tag/README.md | 14 ++-- .../src/Resources/components/Text/README.md | 14 ++-- .../Resources/components/TextArea/README.md | 21 +++--- .../Resources/components/TextField/README.md | 19 +++--- .../components/TextFieldBase/README.md | 18 +++--- .../Resources/components/Tooltip/README.md | 23 +++---- .../components/VisuallyHidden/README.md | 10 +-- 34 files changed, 351 insertions(+), 300 deletions(-) diff --git a/packages/web-twig/README.md b/packages/web-twig/README.md index 16c95c99e8..76d60e0697 100644 --- a/packages/web-twig/README.md +++ b/packages/web-twig/README.md @@ -78,6 +78,24 @@ For available components see the [components directory](https://github.com/lmc-e if you want to extend these components, an example guide is [here](./docs/extendComponents.md). if you want to contribute, read the guide [here](./CONTRIBUTING.md). +## 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, +you can use the `inputProps` prop. + +Supported attributes are: + +- `on*` (eg. `onclick`) +- `data-*` +- `aria-*` +- `id` + +If the component sets a value for any of these attributes, the value passed in will be overwritten. + ## Styling Spirit components are designed to be consistent across all LMC applications. They include built-in styling that has been diff --git a/packages/web-twig/src/Resources/components/Accordion/README.md b/packages/web-twig/src/Resources/components/Accordion/README.md index d2344ec50b..b1f6da5f32 100644 --- a/packages/web-twig/src/Resources/components/Accordion/README.md +++ b/packages/web-twig/src/Resources/components/Accordion/README.md @@ -1,6 +1,6 @@ # Accordion -This is Twig implementation of the [Accordion] component. +This is Twig implementation of the [Accordion][accordion] component. ## Default usage (Stay open) @@ -214,10 +214,9 @@ The Accordion itself consists of several components which cannot be used indepen | `labelledById` | `string` | `null` | ✔ | AccordionHeader ID | | `parent` | `string` | `null` | ✕ | A parent element selector that ensures that only one item is open at a time | -On top of the API options, you can add `data-*` or `aria-*` attributes to -further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. +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]. ## JavaScript Plugin @@ -233,7 +232,9 @@ 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. +[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 +[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props +[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#escape-hatches [web-js-api]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Accordion/README.md#javascript-plugin [web-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md -[accordion]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Accordion -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches diff --git a/packages/web-twig/src/Resources/components/Alert/README.md b/packages/web-twig/src/Resources/components/Alert/README.md index 0bf77daaf2..d02e4bde37 100644 --- a/packages/web-twig/src/Resources/components/Alert/README.md +++ b/packages/web-twig/src/Resources/components/Alert/README.md @@ -1,6 +1,6 @@ # Alert -This is Twig implementation of the [Alert] component. +This is Twig implementation of the [Alert][alert] component. Basic example usage: @@ -47,14 +47,16 @@ Without lexer: | `isCentered` | `bool` | `false` | ✕ | If true, Alert is centered | (\*) For each emotion color, a default icon is defined. -The icons come from the [Icon package], or from your custom source of icons. +The icons come from the [Icon package][icon-package], or from your custom source of icons. Read the section [Default Icons according to Color Variant](#default-icons-according-to-color-variant). -You can add `id`, `data-*` or `aria-*` attributes to further extend the component's -descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. +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]. [alert]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Alert [dictionary-color]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#color -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches -[icon package]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/icons +[icon-package]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/icons +[readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes +[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props +[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#escape-hatches diff --git a/packages/web-twig/src/Resources/components/Breadcrumbs/README.md b/packages/web-twig/src/Resources/components/Breadcrumbs/README.md index 9d44413410..b85cccd452 100644 --- a/packages/web-twig/src/Resources/components/Breadcrumbs/README.md +++ b/packages/web-twig/src/Resources/components/Breadcrumbs/README.md @@ -1,6 +1,6 @@ # Breadcrumbs -This is the Twig implementation of the [Breadcrumbs] component. +This is the Twig implementation of the [Breadcrumbs][breadcrumbs] component. Basic example usage: @@ -101,9 +101,9 @@ content can be overridden by any custom block content. | `goBackTitle` | `string` | — | ✕ | Title/translation for back link to previous page on mobile. It's essential to be set along with items. If items property is not passed, backlink is to be created within children property. [**Optional DEPRECATED**][deprecated] Will be **required** in the next major version. | | `items` | `array` | `[]` | ✕ | Navigation menu items | -You can add `id`, `data-*` or `aria-*` attributes to further extend the component's -descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. +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]. ## BreadcrumbsItem @@ -133,9 +133,9 @@ Use the `BreadcrumbsItem` component for the ordered list as the component's chil (\*) Optional only for the current page. -You can add `id`, `data-*` or `aria-*` attributes to further extend the component's -descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. +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]. ### Dealing with long titles @@ -151,5 +151,7 @@ Additional option is to use helper class `text-truncate` with defined width. [breadcrumbs]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Breadcrumbs [deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#deprecations -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches +[readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes +[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props +[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#escape-hatches [twig-truncate]: https://twig.symfony.com/doc/3.x/filters/u.html diff --git a/packages/web-twig/src/Resources/components/Button/README.md b/packages/web-twig/src/Resources/components/Button/README.md index 25cc53bc9e..0af1fa32ea 100644 --- a/packages/web-twig/src/Resources/components/Button/README.md +++ b/packages/web-twig/src/Resources/components/Button/README.md @@ -1,6 +1,6 @@ # Button -This is Twig implementation of the [Button] component. +This is Twig implementation of the [Button][button] component. Basic example usage: @@ -46,11 +46,13 @@ Without lexer: | `size` | [Size dictionary][dictionary-size] | `medium` | ✕ | Size variant | | `type` | `string` | `button` | ✕ | Type of the Button | -You can add `id`, `data-*` or `aria-*` attributes to further extend component's -descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. +YOn 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]. [button]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Button [dictionary-color]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#color [dictionary-size]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#size -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches +[readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes +[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props +[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#escape-hatches diff --git a/packages/web-twig/src/Resources/components/ButtonLink/README.md b/packages/web-twig/src/Resources/components/ButtonLink/README.md index ef592176b9..172cb27e8b 100644 --- a/packages/web-twig/src/Resources/components/ButtonLink/README.md +++ b/packages/web-twig/src/Resources/components/ButtonLink/README.md @@ -1,6 +1,6 @@ # ButtonLink -This is Twig implementation of the [ButtonLink] component. +This is Twig implementation of the [ButtonLink][button] component. Basic example usage: @@ -41,11 +41,13 @@ Without lexer: | `target` | `string` | `null` | ✕ | Browsing context for the link | | `title` | `string` | `null` | ✕ | Optional title to display on hover | -You can add `id`, `data-*` or `aria-*` attributes to further extend component's -descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. +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]. -[buttonLink]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Button +[button]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Button [dictionary-color]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#color [dictionary-size]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#size -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches +[readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes +[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props +[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#escape-hatches diff --git a/packages/web-twig/src/Resources/components/Checkbox/README.md b/packages/web-twig/src/Resources/components/Checkbox/README.md index c8f158799e..41fa37522b 100644 --- a/packages/web-twig/src/Resources/components/Checkbox/README.md +++ b/packages/web-twig/src/Resources/components/Checkbox/README.md @@ -1,6 +1,6 @@ # Checkbox -This is Twig implementation of the [Checkbox] component. +This is Twig implementation of the [Checkbox][checkbox] component. Basic example usage: @@ -61,13 +61,14 @@ Without lexer: (\*) Label is required. You can use the `label` for simple text or `UNSAFE_label` for HTML content. (\*\*) Props with and without `UNSAFE_` prefix are mutually exclusive. -On top of the API options, you can add `data-*` or `aria-*` attributes to -further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. +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]. +[autocomplete-attr]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete [checkbox]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Checkbox -[item]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/src/Resources/components/Item/README.md [dictionary-validation]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#validation -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches -[autocomplete-attr]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete +[item]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/src/Resources/components/Item/README.md +[readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes +[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props +[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#escape-hatches diff --git a/packages/web-twig/src/Resources/components/Collapse/README.md b/packages/web-twig/src/Resources/components/Collapse/README.md index bce93b8add..e80f63425f 100644 --- a/packages/web-twig/src/Resources/components/Collapse/README.md +++ b/packages/web-twig/src/Resources/components/Collapse/README.md @@ -1,6 +1,6 @@ # Collapse -This is Twig implementation of the [Collapse] component. +This is Twig implementation of the [Collapse][collapse] component. Basic example usage: @@ -63,9 +63,9 @@ attributes to register trigger events. (\*) Attribute for Accordion implementation -You can add `data-*` or `aria-*` attributes to further extend the component's -descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. +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 @@ -94,7 +94,9 @@ 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. +[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 +[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props +[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#escape-hatches [web-js-api]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Collapse/README.md#javascript-plugin [web-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md -[collapse]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Collapse -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches diff --git a/packages/web-twig/src/Resources/components/Container/README.md b/packages/web-twig/src/Resources/components/Container/README.md index 061cc4e795..db99835ade 100644 --- a/packages/web-twig/src/Resources/components/Container/README.md +++ b/packages/web-twig/src/Resources/components/Container/README.md @@ -1,6 +1,6 @@ # Container -This is Twig implementation of the [Container] component. +This is Twig implementation of the [Container][container] component. Basic example usage: @@ -22,9 +22,11 @@ Without lexer: There is no API for Container. -You can add `id`, `data-*` or `aria-*` attributes to further extend component's -descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. +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]. [container]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Container -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches +[readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes +[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props +[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#escape-hatches diff --git a/packages/web-twig/src/Resources/components/Dropdown/README.md b/packages/web-twig/src/Resources/components/Dropdown/README.md index 7d89aa1d95..cfcb7722bf 100644 --- a/packages/web-twig/src/Resources/components/Dropdown/README.md +++ b/packages/web-twig/src/Resources/components/Dropdown/README.md @@ -1,6 +1,6 @@ # Dropdown -This is the Twig implementation of the [Dropdown] component. +This is the Twig implementation of the [Dropdown][dropdown] component. Basic example usage: @@ -29,7 +29,7 @@ Advanced example usage with positioning: ``` -Example with [Item] component: +Example with [Item][item] component: ```twig @@ -54,9 +54,9 @@ attributes to register trigger events. | `id` | `string` | — | ✔ | Dropdown ID | | `placement` | [Placement Dictionary][dictionary-placement] | `bottom-left` | ✕ | Placement of the dropdown | -You can add `data-*` or `aria-*` attributes to further extend the component's -descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. +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 @@ -76,9 +76,9 @@ or the width of the window is changed. There can be several triggers, the same r | ------------- | -------- | ------- | -------- | ------------------ | | `elementType` | `string` | `div` | ✕ | HTML tag to render | -You can add `id`, `data-*` or `aria-*` attributes to further extend the component's -descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. +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]. ## JavaScript Plugin @@ -96,7 +96,9 @@ Or, feel free to write the controlling script yourself. [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 -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches [item]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/src/Resources/components/Item/README.md +[readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes +[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props +[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#escape-hatches [web-js-api]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Dropdown/README.md#javascript [web-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md diff --git a/packages/web-twig/src/Resources/components/FieldGroup/README.md b/packages/web-twig/src/Resources/components/FieldGroup/README.md index ca8363233a..da6cb27726 100644 --- a/packages/web-twig/src/Resources/components/FieldGroup/README.md +++ b/packages/web-twig/src/Resources/components/FieldGroup/README.md @@ -116,12 +116,13 @@ When validated on server: (\*) 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. -On top of the API options, you can add `data-*` or `aria-*` (except `aria-describedby` which is reserved for linking -helper text and validation text to the group) attributes to further extend component's descriptiveness and -accessibility. Also, UNSAFE styling props are available, see the [Escape hatches][escape-hatches] section in README to -learn how and when to use them. These attributes will be passed to the topmost HTML element of the component. +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]. +[dictionary-validation]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#validation [gh-web-field-group-html]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/FieldGroup#html-semantics [gh-web-field-group-disabled]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/FieldGroup#disabled-state -[dictionary-validation]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#validation -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches +[readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes +[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props +[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#escape-hatches diff --git a/packages/web-twig/src/Resources/components/FileUploader/README.md b/packages/web-twig/src/Resources/components/FileUploader/README.md index fd8178d3f9..85cec4c1e5 100644 --- a/packages/web-twig/src/Resources/components/FileUploader/README.md +++ b/packages/web-twig/src/Resources/components/FileUploader/README.md @@ -70,10 +70,9 @@ By adding the `isFluid` attribute, FileUploader can take up all the available ho | --------- | ------ | ------- | -------- | ---------------------------------------------------------- | | `isFluid` | `bool` | `false` | ✕ | If true, the element spans to the full width of its parent | -On top of the API options, you can add `data-*` or `aria-*` attributes to -further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. +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]. ## FileUploaderInput @@ -223,10 +222,9 @@ To mark the input as disabled, simply add the `isDisabled` attribute: (\*) 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. -On top of the API options, you can add `data-*` or `aria-*` attributes to -further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. +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]. ## FileUploaderList @@ -247,10 +245,9 @@ FileUploaderList is a simple wrapper which provides an accessible title and the | `headingId` | `string` | `file-uploader-attachments` | ✕ | List and heading identification | | `headingText` | `string` | `Attachments` | ✕ | List title | -On top of the API options, you can add `data-*` or `aria-*` attributes to -further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. +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]. ## FileUploaderAttachment @@ -310,10 +307,9 @@ With image preview: | `onEdit` | `func` | `null` | ✕ | Function to trigger on click on edit button | | `removeText` | `string` | `Remove` | ✕ | Remove button text | -On top of the API options, you can add `data-*` or `aria-*` attributes to -further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. +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]. ## Composition @@ -334,12 +330,14 @@ This is how all subcomponents build up the complete FileUploader: ``` -[web-js-api]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/FileUploader/README.md#javascript-plugin-api -[web-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md +[dictionary-validation]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#validation +[mdn-accept]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept [mdn-input-file]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file [mdn-multiple]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple -[mdn-accept]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept [mdn-template]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template -[dictionary-validation]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#validation -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches [multiple-attr]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple +[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-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props +[web-js-api]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/FileUploader/README.md#javascript-plugin-api +[web-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md diff --git a/packages/web-twig/src/Resources/components/Grid/README.md b/packages/web-twig/src/Resources/components/Grid/README.md index 02b81f706b..5cb6e2b20e 100644 --- a/packages/web-twig/src/Resources/components/Grid/README.md +++ b/packages/web-twig/src/Resources/components/Grid/README.md @@ -1,6 +1,6 @@ # Grid -This is Twig implementation of the [Grid] component. +This is Twig implementation of the [Grid][grid] component. ## Grid @@ -60,15 +60,15 @@ Without lexer: | `elementType` | `string` | `div` | ✕ | HTML tag to render | | `tablet` | [`1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `12`] | `null` | ✕ | [**DEPRECATED**][deprecated] in favor of `cols`; Number of columns to use on tablet | -You can add `id`, `data-*` or `aria-*` attributes to further extend component's -descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. +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]. ## GridSpan Grid Span allows to center content over multiple grid columns. -For more info when and why to use it, see [Grid] component. +For more info when and why to use it, see [Grid][grid] component. Basic example usage: @@ -111,9 +111,9 @@ Without lexer: | `over` | [`2` \| `4` \| `6` \| `8` \| `10` \| `12`] | `null` | ✕ | Number of columns to span over | | `tablet` | [`2` \| `4` \| `6` \| `8` \| `10` \| `12`] | `null` | ✕ | Number of columns to span over on tablet | -You can add `id`, `data-*` or `aria-*` attributes to further extend component's -descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. +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]. ## GridItem @@ -191,11 +191,13 @@ Without lexer: | `rowEnd` | [`number` \| `string` \| `object`] | `null` | ✕ | Row where the item should end | | `rowStart` | [`number` \| `string` \| `object`] | `null` | ✕ | Row where the item should start | -You can add `id`, `data-*` or `aria-*` attributes to further extend component's -descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. +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]. [digitalocean-span]: https://www.digitalocean.com/community/tutorials/css-css-grid-layout-span-keyword [deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#deprecations -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches [grid]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Grid +[readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes +[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props +[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#escape-hatches diff --git a/packages/web-twig/src/Resources/components/Header/README.md b/packages/web-twig/src/Resources/components/Header/README.md index 76879a7cf1..24899a3cb5 100644 --- a/packages/web-twig/src/Resources/components/Header/README.md +++ b/packages/web-twig/src/Resources/components/Header/README.md @@ -1,6 +1,6 @@ # Header -This is the Twig implementation of the [Header] component. +This is the Twig implementation of the [Header][header] component. The Header is a highly variable and customizable component. It comes in several design variants and provides a handful of building blocks you can use to achieve @@ -112,10 +112,9 @@ just branding. | `color` | [`transparent` \| `inverted`] | `transparent` | ✕ | Color variant | | `isSimple` | `bool` | `false` | ✕ | Shorter, centered version of Header | -On top of the API options, you can add `data-*` or `aria-*` attributes to -further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. +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]. ## Supported Content @@ -161,10 +160,9 @@ You can place any custom content into the mobile actions component: | `dialogId` | `string` | — | ✔ | ID of the linked HeaderDialog | | `menuToggleLabel` | `string` | `Menu` | ✕ | Label of the menu toggle button | -On top of the API options, you can add `data-*` or `aria-*` attributes to -further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. +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]. ### Desktop-Only Actions @@ -193,10 +191,9 @@ control here. | ------- | -------------------------- | --------- | -------- | --------------------------- | | `color` | [`primary` \| `secondary`] | `primary` | ✕ | Color and alignment variant | -On top of the API options, you can add `data-*` or `aria-*` attributes to -further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. +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]. #### Navigation @@ -271,10 +268,9 @@ There is no API for HeaderNavItem. There is no API for HeaderButton. -On top of the API options, you can add `data-*` or `aria-*` attributes to -further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. +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]. ## Header Dialog @@ -294,10 +290,9 @@ used for second-level navigation in general. | ---- | -------- | ------- | -------- | -------------------------------------- | | `id` | `string` | — | ✔ | ID to be linked in HeaderMobileActions | -On top of the API options, you can add `data-*` or `aria-*` attributes to -further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. +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]. ### Close Button @@ -315,10 +310,9 @@ Close button closes the Header Dialog using our Off-canvas JavaScript plugin. | `enableDismiss` | `bool` | `true` | ✕ | Enable Off-canvas JS dismiss | | `label` | `string` | `Close` | ✕ | Label of the menu toggle button | -On top of the API options, you can add `data-*` or `aria-*` attributes to -further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. +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]. ### Primary and Secondary Actions @@ -340,10 +334,9 @@ the optional secondary actions slot. | ------- | -------------------------- | --------- | -------- | ------------------------- | | `color` | [`primary` \| `secondary`] | `primary` | ✕ | Color of the actions slot | -On top of the API options, you can add `data-*` or `aria-*` attributes to -further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. +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]. #### Navigation @@ -417,10 +410,9 @@ There is no API for HeaderDialogButton. There is no API for HeaderDialogText. -On top of the API options, you can add `data-*` or `aria-*` attributes to -further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. +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]. ## Composition @@ -532,7 +524,9 @@ And the complete Header Dialog: -[web-js-api]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Header/README.md#javascript-plugin [header]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Header +[readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes +[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props +[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#escape-hatches +[web-js-api]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Header/README.md#javascript-plugin [web-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches diff --git a/packages/web-twig/src/Resources/components/Heading/README.md b/packages/web-twig/src/Resources/components/Heading/README.md index 7e9082fdd7..3787ad4c91 100644 --- a/packages/web-twig/src/Resources/components/Heading/README.md +++ b/packages/web-twig/src/Resources/components/Heading/README.md @@ -1,6 +1,6 @@ # Heading -This is Twig implementation of the [Heading] component. +This is Twig implementation of the [Heading][heading] component. Basic example usage: @@ -34,10 +34,12 @@ Without lexer: | `elementType` | `string` | `div` | ✕ | HTML tag to render | | `translate` | [`yes` \| `no` \| `''`] | `null` | ✕ | Set to `no` to disable machine translation of the text content | -You can add `id`, `data-*` or `aria-*` attributes to further extend component's -descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. +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]. -[heading]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-react/src/components/Heading [dictionary-size]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#size -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches +[heading]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-react/src/components/Heading +[readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes +[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props +[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#escape-hatches diff --git a/packages/web-twig/src/Resources/components/Icon/README.md b/packages/web-twig/src/Resources/components/Icon/README.md index 28e9a44599..fc9819e5ea 100644 --- a/packages/web-twig/src/Resources/components/Icon/README.md +++ b/packages/web-twig/src/Resources/components/Icon/README.md @@ -1,7 +1,7 @@ # Icon Icon component uses inlineSVG extension, so don't forget to add icons path in the configuration -as seen in [inlineSVG docs]. +as seen in [inlineSVG docs][inlinesvg-docs]. Basic example usage: @@ -33,11 +33,11 @@ Without lexer: | `name` | `string` | — | ✔ | Name of the icon, case sensitive | | `title` | `string` | `null` | ✕ | Optional title to display on hover | -Get the list of `name` options in the [Icon package] or your source of icons. +Get the list of `name` options in the [Icon package][icon-package] or your source of icons. Also, UNSAFE styling props are available, see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -[inlinesvg docs]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/docs/inlineSVG.md -[icon package]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/icons +[inlinesvg-docs]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/docs/inlineSVG.md +[icon-package]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/icons [escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches diff --git a/packages/web-twig/src/Resources/components/Item/README.md b/packages/web-twig/src/Resources/components/Item/README.md index b416deda40..9bb946ef73 100644 --- a/packages/web-twig/src/Resources/components/Item/README.md +++ b/packages/web-twig/src/Resources/components/Item/README.md @@ -91,12 +91,13 @@ Usage in [Dropdown][dropdown] component: (\*) Label is required. You can use the `label` for simple text or `UNSAFE_label` for HTML content. (\*\*) Props with and without `UNSAFE_` prefix are mutually exclusive. -On top of the API options, you can add `data-*` or `aria-*` attributes to -further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. +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]. [checkbox]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/src/Resources/components/Checkbox/README.md [dropdown]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Dropdown -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches [radio]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/src/Resources/components/Radio/README.md +[readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes +[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props +[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#escape-hatches diff --git a/packages/web-twig/src/Resources/components/Link/README.md b/packages/web-twig/src/Resources/components/Link/README.md index 41cc9d7df0..6758760480 100644 --- a/packages/web-twig/src/Resources/components/Link/README.md +++ b/packages/web-twig/src/Resources/components/Link/README.md @@ -1,6 +1,6 @@ # Text -This is Twig implementation of the [Link] component. +This is Twig implementation of the [Link][link] component. Basic example usage: @@ -44,10 +44,12 @@ Without lexer: | `target` | `string` | `null` | ✕ | Browsing context for the link | | `title` | `string` | `null` | ✕ | Optional title to display on hover | -You can add `id`, `data-*` or `aria-*` attributes to further extend component's -descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. +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]. -[link]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-react/src/components/Link [dictionary-color]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#color -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches +[link]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-react/src/components/Link +[readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes +[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props +[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#escape-hatches diff --git a/packages/web-twig/src/Resources/components/Modal/README.md b/packages/web-twig/src/Resources/components/Modal/README.md index cad7bc4fb5..7c9a17bf52 100644 --- a/packages/web-twig/src/Resources/components/Modal/README.md +++ b/packages/web-twig/src/Resources/components/Modal/README.md @@ -1,6 +1,6 @@ # Modal -This is the Twig implementation of the [Modal] component. +This is the Twig implementation of the [Modal][modal] component. Modal is a composition of several subcomponents: @@ -50,10 +50,9 @@ Example: | `id` | `string` | — | ✔ | Modal ID | | `titleId` | `string` | `null` | ✕ | ID of the title inside ModalHeader | -On top of the API options, you can add `data-*` or `aria-*` attributes to -further extend the component's descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. +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]. ## ModalDialog @@ -144,11 +143,9 @@ You can use the `maxHeightFromTabletUp` option to override the max height on tab | `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, you can add `data-*` or `aria-*` attributes to -further extend the component's descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. Also, all `form` attributes -are allowed when the `elementType` is set to `form`. +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]. ## ModalHeader @@ -188,10 +185,9 @@ using the `aria-label` attribute on `` component: | `modalId` | `string` | — | ✔ | Modal ID | | `titleId` | `string` | `null` | ✕ | ID of the title | -On top of the API options, you can add `data-*` or `aria-*` attributes to -further extend the component's descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. +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]. ## ModalBody @@ -211,10 +207,9 @@ ModalBody holds the actual content of the Modal. There are no API options for ModalBody. -You can add `data-*` or `aria-*` attributes to further extend the -component's descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. +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]. ## ModalFooter @@ -268,10 +263,9 @@ accordingly: | `alignmentX` | [AlignmentX dictionary][dictionary-alignment] | `right` | ✕ | Alignment of Footer Actions | | `description` | `string` | `null` | ✕ | Optional Footer Description | -On top of the API options, you can add `data-*` or `aria-*` attributes to -further extend the component's descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. +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]. ## Opening the Modal @@ -384,15 +378,17 @@ 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. -[web-js-api]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Modal/README.md#javascript-plugin -[web-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md -[modal]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Modal -[mdn-dialog]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog -[mdn-dialog-form]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#usage_notes [autocomplete-attr]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete -[novalidate-attr]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#novalidate [dictionary-alignment]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#alignment -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches -[scroll-view]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/src/Resources/components/ScrollView/README.md +[mdn-dialog-form]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#usage_notes +[mdn-dialog]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog +[modal]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Modal +[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-deprecations]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#deprecations +[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 +[web-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md diff --git a/packages/web-twig/src/Resources/components/Pagination/README.md b/packages/web-twig/src/Resources/components/Pagination/README.md index 053881948d..3ea4668856 100644 --- a/packages/web-twig/src/Resources/components/Pagination/README.md +++ b/packages/web-twig/src/Resources/components/Pagination/README.md @@ -1,6 +1,6 @@ # Pagination -This is Twig implementation of the [Pagination] component. +This is Twig implementation of the [Pagination][pagination] component. The Pagination is a composition of several subcomponents: @@ -26,10 +26,9 @@ Basic example usage: There are no API options for Pagination. -You can add `data-*` or `aria-*` attributes to further extend component's -descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. +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]. ### PaginationItem @@ -51,10 +50,9 @@ These attributes will be passed to the topmost HTML element of the component. There are no API options for PaginationItem. -You can add `data-*` or `aria-*` attributes to further extend component's -descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. +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]. ### PaginationLink @@ -104,10 +102,9 @@ These attributes will be passed to the topmost HTML element of the component. | `pageNumber` | `string` | `null` | ✔ | Page number, hidden for screen readers | | `target` | `string` | `null` | ✕ | Browsing context for the link | -You can add `data-*` or `aria-*` attributes to further extend component's -descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. +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]. ### PaginationLinkNext & PaginationLinkPrevious @@ -144,10 +141,9 @@ These attributes will be passed to the topmost HTML element of the component. | `href` | `string` | — | ✕ | Link URL | | `target` | `string` | `null` | ✕ | Browsing context for the link | -You can add `data-*` or `aria-*` attributes to further extend component's -descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. +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]. ### Full Example @@ -197,5 +193,7 @@ When you put it all together: ``` -[Pagination]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Pagination -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches +[pagination]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Pagination +[readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes +[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props +[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#escape-hatches diff --git a/packages/web-twig/src/Resources/components/Pill/README.md b/packages/web-twig/src/Resources/components/Pill/README.md index 8b36065322..e6435dacd5 100644 --- a/packages/web-twig/src/Resources/components/Pill/README.md +++ b/packages/web-twig/src/Resources/components/Pill/README.md @@ -1,6 +1,6 @@ # Pill -This is Twig implementation of the [Pill] component. +This is Twig implementation of the [Pill][pill] component. Basic example usage: @@ -34,10 +34,12 @@ Without lexer: | `color` | [[Action Color dictionary][dictionary-color] \| [Emotion Color dictionary][dictionary-color] \| `selected` \| `unselected`] | `selected` | ✕ | Color variant | | `elementType` | `string` | `span` | ✕ | HTML tag to render | -You can add `id`, `data-*` or `aria-*` attributes to further extend component's -descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. +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]. -[pill]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Pill [dictionary-color]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#color -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches +[pill]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Pill +[readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes +[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props +[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#escape-hatches diff --git a/packages/web-twig/src/Resources/components/Radio/README.md b/packages/web-twig/src/Resources/components/Radio/README.md index b5ea569862..5370f6496b 100644 --- a/packages/web-twig/src/Resources/components/Radio/README.md +++ b/packages/web-twig/src/Resources/components/Radio/README.md @@ -1,6 +1,6 @@ # Radio -This is Twig implementation of the [Radio] component. +This is Twig implementation of the [Radio][radio] component. Basic example usage: @@ -56,13 +56,14 @@ Without lexer: (\*) Label is required. You can use the `label` for simple text or `UNSAFE_label` for HTML content. -On top of the API options, you can add `data-*` or `aria-*` attributes to -further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. +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]. -[radio]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Radio -[item]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/src/Resources/components/Item/README.md -[dictionary-validation]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#validation [autocomplete-attr]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches +[dictionary-validation]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#validation +[item]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/src/Resources/components/Item/README.md +[radio]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Radio +[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-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#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 edab5b94ed..636bcc1cad 100644 --- a/packages/web-twig/src/Resources/components/ScrollView/README.md +++ b/packages/web-twig/src/Resources/components/ScrollView/README.md @@ -1,6 +1,6 @@ # ScrollView -This is the Twig implementation of the [ScrollView] component. +This is the Twig implementation of the [ScrollView][scrollview] component. Basic example usage: @@ -52,11 +52,13 @@ Or, feel free to write the controlling script yourself. | `isScrollbarDisabled` | `bool` | `false` | ✕ | If true, the Scrollbar is disabled | | `overflowDecorators` | [`borders` \| `shadows` \| `both`] | `shadows` | ✕ | Type of overflow decorators | -You can add `id`, `data-*` or `aria-*` attributes to further extend component's -descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. +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]. -[ScrollView]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/ScrollView +[scrollview]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/ScrollView +[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-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props [web-js-api]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/ScrollView/README.md#javascript-plugin-api [web-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches diff --git a/packages/web-twig/src/Resources/components/Select/README.md b/packages/web-twig/src/Resources/components/Select/README.md index e6b5ad6728..e8d76c4007 100644 --- a/packages/web-twig/src/Resources/components/Select/README.md +++ b/packages/web-twig/src/Resources/components/Select/README.md @@ -64,11 +64,12 @@ Without lexer: (\*) The label is required for this component. Use `label` or `UNSAFE_label` to set the label. -On top of the API options, you can add `data-*` or `aria-*` attributes to -further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. +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]. -[select]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Select [dictionary-validation]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#validation -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches +[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-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props +[select]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Select diff --git a/packages/web-twig/src/Resources/components/Spinner/README.md b/packages/web-twig/src/Resources/components/Spinner/README.md index 61d6775660..d2efa81cc3 100644 --- a/packages/web-twig/src/Resources/components/Spinner/README.md +++ b/packages/web-twig/src/Resources/components/Spinner/README.md @@ -33,10 +33,12 @@ Without lexer: 👉 `Spinner` is a wrapper of the `Icon` component. Please, read [`Icon` documentation][icon-documentation] to find out which other props can be passed. -You can add `data-*` or `aria-*` attributes to further extend component's -descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. +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]. [dictionary-color]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#color [icon-documentation]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/src/Resources/components/Icon/README.md -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches +[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-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props diff --git a/packages/web-twig/src/Resources/components/Stack/README.md b/packages/web-twig/src/Resources/components/Stack/README.md index e86093cda5..46d86c2e3c 100644 --- a/packages/web-twig/src/Resources/components/Stack/README.md +++ b/packages/web-twig/src/Resources/components/Stack/README.md @@ -78,9 +78,11 @@ accepts either a spacing token (eg. `space-100`) or an object with breakpoint ke | `hasStartDivider` | `bool` | `false` | ✕ | Render a divider before the first item | | `spacing` | [`spacing token` \| `object`] | `null` | ✕ | Custom spacing between items, see [Custom Spacing](#custom-spacing) | -You can add `id`, `data-*` or `aria-*` attributes to further extend component's -descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. +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]. [stack]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Stack -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches +[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-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#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 2db532ce14..6470b8eb90 100644 --- a/packages/web-twig/src/Resources/components/Tabs/README.md +++ b/packages/web-twig/src/Resources/components/Tabs/README.md @@ -1,6 +1,6 @@ # Tabs -This is Twig implementation of the [Tabs] component. +This is Twig implementation of the [Tabs][tabs] component. Basic example usage: @@ -70,9 +70,9 @@ There is no API for TabItem. | `isSelected` | `bool` | `false` | ✕ | Whether is tab pane selected | | `label` | `string` | `null` | ✕ | Aria label of the tab pane | -You can add `id`, `data-*` or `aria-*` attributes to further extend component's -descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. +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]. ## JavaScript Plugin @@ -88,7 +88,9 @@ 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. +[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-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props +[tabs]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Tabs [web-js-api]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Tabs/README.md#javascript-plugin [web-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md -[tabs]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Tabs -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches diff --git a/packages/web-twig/src/Resources/components/Tag/README.md b/packages/web-twig/src/Resources/components/Tag/README.md index 8fde0925b1..946c817bc2 100644 --- a/packages/web-twig/src/Resources/components/Tag/README.md +++ b/packages/web-twig/src/Resources/components/Tag/README.md @@ -1,6 +1,6 @@ # Tag -This is Twig implementation of the [Tag] component. +This is Twig implementation of the [Tag][tag] component. Basic example usage: @@ -38,11 +38,13 @@ Without lexer: | `isSubtle` | `bool` | `false` | ✕ | Whether the Tag is displayed in subtle variant | | `size` | [Size Extended dictionary][dictionary-size] | `medium` | ✕ | Size of the Tag | -You can add `id`, `data-*` or `aria-*` attributes to further extend component's -descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. +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]. -[tag]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Tag [dictionary-color]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#color [dictionary-size]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#size -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches +[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-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props +[tag]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Tag diff --git a/packages/web-twig/src/Resources/components/Text/README.md b/packages/web-twig/src/Resources/components/Text/README.md index fb37e4247b..278ceda7a5 100644 --- a/packages/web-twig/src/Resources/components/Text/README.md +++ b/packages/web-twig/src/Resources/components/Text/README.md @@ -1,6 +1,6 @@ # Text -This is Twig implementation of the [Text] component. +This is Twig implementation of the [Text][text] component. Basic example usage: @@ -36,10 +36,12 @@ Without lexer: | `size` | [Size Extended dictionary][dictionary-size] | `medium` | ✕ | Size of the text | | `translate` | [`yes` \| `no` \| `''`] | `null` | ✕ | Set to `no` to disable machine translation of the text content | -You can add `id`, `data-*` or `aria-*` attributes to further extend component's -descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. +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]. -[text]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-react/src/components/Text [dictionary-size]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#size -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches +[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-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props +[text]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-react/src/components/Text diff --git a/packages/web-twig/src/Resources/components/TextArea/README.md b/packages/web-twig/src/Resources/components/TextArea/README.md index 492e44a44e..3e90279173 100644 --- a/packages/web-twig/src/Resources/components/TextArea/README.md +++ b/packages/web-twig/src/Resources/components/TextArea/README.md @@ -1,6 +1,6 @@ # TextArea -This is Twig implementation of the [TextArea] component. +This is Twig implementation of the [TextArea][textarea] component. Basic example usage: @@ -71,10 +71,9 @@ Without lexer: (\*) Label is required. You can use the `label` for simple text or `UNSAFE_label` for HTML content. -On top of the API options, you can add `data-*` or `aria-*` attributes to -further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. +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]. ## JavaScript Plugin for Auto-Resizing @@ -100,10 +99,12 @@ 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. -[web-js-api]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/TextArea/README.md#javascript-plugin-for-auto-resizing -[textarea]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/TextArea -[web-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md [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 -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches [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 +[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#escape-hatches +[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props +[textarea]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/TextArea +[web-js-api]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/TextArea/README.md#javascript-plugin-for-auto-resizing +[web-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md diff --git a/packages/web-twig/src/Resources/components/TextField/README.md b/packages/web-twig/src/Resources/components/TextField/README.md index fb19dee129..03154cfcf1 100644 --- a/packages/web-twig/src/Resources/components/TextField/README.md +++ b/packages/web-twig/src/Resources/components/TextField/README.md @@ -1,6 +1,6 @@ # TextField -This is Twig implementation of the [TextField] component. +This is Twig implementation of the [TextField][textfield] component. Basic example usage: @@ -83,10 +83,9 @@ Without lexer: (\*) The label is required for this component. Use `label` or `UNSAFE_label` to set the label. -On top of the API options, you can add `data-*` or `aria-*` attributes to -further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. +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]. ## JavaScript Plugin for Password Toggle @@ -113,9 +112,11 @@ Then you need to add attribute `hasPasswordToggle` 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 +[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 +[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#escape-hatches +[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props +[textfield]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/TextField [web-js-api]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/TextField/README.md#javascript-plugin-for-password-toggle [web-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md -[textfield]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/TextField -[dictionary-validation]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#validation -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches -[autocomplete-attr]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete diff --git a/packages/web-twig/src/Resources/components/TextFieldBase/README.md b/packages/web-twig/src/Resources/components/TextFieldBase/README.md index dac6ff3136..451f5689c0 100644 --- a/packages/web-twig/src/Resources/components/TextFieldBase/README.md +++ b/packages/web-twig/src/Resources/components/TextFieldBase/README.md @@ -1,6 +1,6 @@ # TextFieldBase -This is Twig implementation of the abstract component [TextFieldBase] for the purposes of the form components TextField and TextArea. +This is Twig implementation of the abstract component TextFieldBase for the purposes of the form components [TextField][textfield] and [TextArea][textarea]. Basic example usage: @@ -85,13 +85,15 @@ Without lexer: (\*) The label is required for this component. Use `label` or `UNSAFE_label` to set the label. -On top of the API options, you can add `data-*` or `aria-*` attributes to -further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. +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]. -[textfield]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/TextField [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 -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches [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 +[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#escape-hatches +[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props +[textarea]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/TextArea +[textfield]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/TextField diff --git a/packages/web-twig/src/Resources/components/Tooltip/README.md b/packages/web-twig/src/Resources/components/Tooltip/README.md index 421ad6795b..9026c8b5a4 100644 --- a/packages/web-twig/src/Resources/components/Tooltip/README.md +++ b/packages/web-twig/src/Resources/components/Tooltip/README.md @@ -1,6 +1,6 @@ # Tooltip -This is Twig implementation of the [Tooltip] component. +This is Twig implementation of the [Tooltip][tooltip] component. Basic usage: @@ -65,16 +65,15 @@ best positioning approach for your use case. | `isDismissible` | `bool` | `false` | ✕ | Make tooltip dismissible | | `placement` | [Placement Dictionary][dictionary-placement] | `bottom` | ✕ | Tooltip placement | -On top of the API options, you can add `data-*` or `aria-*` attributes to -further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. -These attributes will be passed to the topmost HTML element of the component. +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]. ### TooltipWrapper -You can add `id`, `data-*` or `aria-*` attributes to further extend the component's -descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. +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]. ## JavaScript Plugin @@ -90,8 +89,10 @@ 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. +[dictionary-placement]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#placement +[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-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props +[tooltip]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Tooltip [web-js-api]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Tooltip/README.md#javascript-api [web-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md -[tooltip]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Tooltip -[dictionary-placement]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#placement -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches diff --git a/packages/web-twig/src/Resources/components/VisuallyHidden/README.md b/packages/web-twig/src/Resources/components/VisuallyHidden/README.md index 2cb15ab209..4b85e0be87 100644 --- a/packages/web-twig/src/Resources/components/VisuallyHidden/README.md +++ b/packages/web-twig/src/Resources/components/VisuallyHidden/README.md @@ -35,8 +35,10 @@ Without lexer: | `UNSAFE_className` | `string` | — | ✕ | Wrapper custom class name | | `UNSAFE_style` | `CSSProperties` | — | ✕ | Wrapper custom style | -You can add `id`, `data-*` or `aria-*` attributes to further extend component's -descriptiveness and accessibility. Also, UNSAFE styling props are available, -see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. +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]. -[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches +[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-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props