diff --git a/packages/web-react/src/components/Accordion/README.md b/packages/web-react/src/components/Accordion/README.md index bd502b93a0..19bcf6fab6 100644 --- a/packages/web-react/src/components/Accordion/README.md +++ b/packages/web-react/src/components/Accordion/README.md @@ -198,6 +198,12 @@ On top of the API options, the components accept [additional attributes][readme- If you need more control over the styling of a component, you can use [style props][readme-style-props] and [escape hatches][readme-escape-hatches]. +## Icons + +This component uses the `Icon` component internally. To ensure correct rendering, +please refer to the [Icon component documentation][web-react-icon-documentation] for setup instructions. + [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes [readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches [readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#style-props +[web-react-icon-documentation]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Icon/README.md#-usage diff --git a/packages/web-react/src/components/Alert/README.md b/packages/web-react/src/components/Alert/README.md index 93523132b1..4144579b67 100644 --- a/packages/web-react/src/components/Alert/README.md +++ b/packages/web-react/src/components/Alert/README.md @@ -47,9 +47,15 @@ For detailed information see [Alert][alert] component. ⚠ī¸ Please pay attention to the accessibility setting when Alert is dynamically displayed. In case you need to use the component as an information that requires the user's immediate attention, you can set `role="alert"` as an [additional attribute][readme-additional-attributes]. +## Icons + +This component uses the `Icon` component internally. To ensure correct rendering, +please refer to the [Icon component documentation][web-react-icon-documentation] for setup instructions. + [alert]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Alert/README.md [dictionary-color]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#color [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-react/README.md#additional-attributes [readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches [readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#style-props +[web-react-icon-documentation]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Icon/README.md#-usage diff --git a/packages/web-react/src/components/Breadcrumbs/README.md b/packages/web-react/src/components/Breadcrumbs/README.md index 428d2f46ef..05299b3734 100644 --- a/packages/web-react/src/components/Breadcrumbs/README.md +++ b/packages/web-react/src/components/Breadcrumbs/README.md @@ -108,8 +108,14 @@ You can also use any of the existing [npm packages which deal with truncating th For detailed information see [Breadcrumbs][breadcrumbs] component. +## Icons + +This component uses the `Icon` component internally. To ensure correct rendering, +please refer to the [Icon component documentation][web-react-icon-documentation] for setup instructions. + [breadcrumbs]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Breadcrumbs/README.md [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes [readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches [readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#style-props [truncate-npm-search]: https://www.npmjs.com/search?q=truncate +[web-react-icon-documentation]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Icon/README.md#-usage diff --git a/packages/web-react/src/components/Button/README.md b/packages/web-react/src/components/Button/README.md index f487188c2e..963e803691 100644 --- a/packages/web-react/src/components/Button/README.md +++ b/packages/web-react/src/components/Button/README.md @@ -55,9 +55,15 @@ On top of the API options, the components accept [additional attributes][readme- If you need more control over the styling of a component, you can use [style props][readme-style-props] and [escape hatches][readme-escape-hatches]. +## Icons + +This component uses the `Icon` component internally. To ensure correct rendering, +please refer to the [Icon component documentation][web-react-icon-documentation] for setup instructions. + [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 [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes [readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches [readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#style-props +[web-react-icon-documentation]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Icon/README.md#-usage diff --git a/packages/web-react/src/components/ButtonLink/README.md b/packages/web-react/src/components/ButtonLink/README.md index 8ceb4b2532..2875b264fc 100644 --- a/packages/web-react/src/components/ButtonLink/README.md +++ b/packages/web-react/src/components/ButtonLink/README.md @@ -41,9 +41,15 @@ On top of the API options, the components accept [additional attributes][readme- If you need more control over the styling of a component, you can use [style props][readme-style-props] and [escape hatches][readme-escape-hatches]. +## Icons + +This component uses the `Icon` component internally. To ensure correct rendering, +please refer to the [Icon component documentation][web-react-icon-documentation] for setup instructions. + [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 [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes [readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches [readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#style-props +[web-react-icon-documentation]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Icon/README.md#-usage diff --git a/packages/web-react/src/components/FileUploader/README.md b/packages/web-react/src/components/FileUploader/README.md index 45c5da639e..f798aa8fe5 100644 --- a/packages/web-react/src/components/FileUploader/README.md +++ b/packages/web-react/src/components/FileUploader/README.md @@ -502,6 +502,11 @@ and [escape hatches][readme-escape-hatches]. For detailed information see [FileUploader][file-uploader] component. +## Icons + +This component uses the `Icon` component internally. To ensure correct rendering, +please refer to the [Icon component documentation][web-react-icon-documentation] for setup instructions. + [button-element-docs]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button [div-element-docs]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div [file-uploader]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/FileUploader/README.md @@ -511,3 +516,4 @@ For detailed information see [FileUploader][file-uploader] component. [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes [readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches [readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#style-props +[web-react-icon-documentation]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Icon/README.md#-usage diff --git a/packages/web-react/src/components/Header/README.md b/packages/web-react/src/components/Header/README.md index 312229e907..0c2ba11f8a 100644 --- a/packages/web-react/src/components/Header/README.md +++ b/packages/web-react/src/components/Header/README.md @@ -579,6 +579,11 @@ const handleClose = () => setOpen(false); +## Icons + +This component uses the `Icon` component internally. To ensure correct rendering, +please refer to the [Icon component documentation][web-react-icon-documentation] for setup instructions. + [mdn-a-element]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a [mdn-api-html-element]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement [mdn-button-element]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button @@ -588,3 +593,4 @@ const handleClose = () => setOpen(false); [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes [readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches [readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#style-props +[web-react-icon-documentation]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Icon/README.md#-usage diff --git a/packages/web-react/src/components/Icon/README.md b/packages/web-react/src/components/Icon/README.md index 968596eeec..f7052f2724 100644 --- a/packages/web-react/src/components/Icon/README.md +++ b/packages/web-react/src/components/Icon/README.md @@ -26,16 +26,26 @@ So it will not be automatically installed with `@lmc-eu/spirit-web-react`. ## 📝 Usage +To ensure the `Icon` component functions as expected, wrap your application or the component tree where Icon is used with the `IconsProvider`. +You need to pass the icon set to the provider as its value. + ```jsx -import { Icon, IconsProvider } from '@lmc-eu/spirit-web-react/components'; +import { Icon, IconsProvider } from '@lmc-eu/spirit-web-react'; import icons from '@lmc-eu/spirit-icons/icons'; + +{/* Your Icon, app or component where Icon is used */}; ``` +### Example + ```jsx +import { Icon, IconsProvider } from '@lmc-eu/spirit-web-react'; +import icons from '@lmc-eu/spirit-icons/icons'; + Hey! Pay attention! - +; ``` ## 🧩 API diff --git a/packages/web-react/src/components/Item/README.md b/packages/web-react/src/components/Item/README.md index 7468a9d9ad..2ac843ca86 100644 --- a/packages/web-react/src/components/Item/README.md +++ b/packages/web-react/src/components/Item/README.md @@ -108,9 +108,15 @@ On top of the API options, the components accept [additional attributes][readme- If you need more control over the styling of a component, you can use [style props][readme-style-props] and [escape hatches][readme-escape-hatches]. +## Icons + +This component uses the `Icon` component internally. To ensure correct rendering, +please refer to the [Icon component documentation][web-react-icon-documentation] for setup instructions. + [checkbox]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Checkbox/README.md [dropdown]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Dropdown [radio]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Radio/README.md [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes [readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches [readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#style-props +[web-react-icon-documentation]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Icon/README.md#-usage diff --git a/packages/web-react/src/components/Modal/README.md b/packages/web-react/src/components/Modal/README.md index c2d7bfdee4..d58091f4fd 100644 --- a/packages/web-react/src/components/Modal/README.md +++ b/packages/web-react/src/components/Modal/README.md @@ -423,6 +423,11 @@ const handleClose = () => setOpen(false); ``` +## Icons + +This component uses the `Icon` component internally. To ensure correct rendering, +please refer to the [Icon component documentation][web-react-icon-documentation] for setup instructions. + [dictionary-alignment]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#alignment [mdn-article]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article [mdn-dialog-form]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#usage_notes @@ -433,3 +438,4 @@ const handleClose = () => setOpen(false); [readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches [readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#style-props [scroll-view]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/ScrollView/README.md +[web-react-icon-documentation]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Icon/README.md#-usage diff --git a/packages/web-react/src/components/Pagination/README.md b/packages/web-react/src/components/Pagination/README.md index 1f1be887b1..2d8409e711 100644 --- a/packages/web-react/src/components/Pagination/README.md +++ b/packages/web-react/src/components/Pagination/README.md @@ -171,26 +171,19 @@ and [escape hatches][readme-escape-hatches]. | `accessibilityLabelPrevious` | `string` | `Previous` | ✕ | Accessibility label of the previous link | | `defaultPage` | `number` | `1` | ✕ | The number of the page selected as current page at the first render | | `onChange` | `(pageNumber: number) => void` | - | ✕ | On page change callback | -| `totalPages` | `number` | 0 | ✓ | Total count of pages | +| `totalPages` | `number` | `0` | ✓ | Total count of pages | | `visiblePages` | `number` | `5` | ✕ | Number of displayed pages | 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]. -## Icons Provider - -To display the icons correctly, the component needs to be wrapped with IconsProvider. - -```jsx -import { IconsProvider } from 'packages/web-react/src/context'; +For detailed information see [Pagination][pagination] component. - - ... -; -``` +## Icons -For detailed information see [Pagination][pagination] component. +This component uses the `Icon` component internally. To ensure correct rendering, +please refer to the [Icon component documentation][web-react-icon-documentation] for setup instructions. [button]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Button/README.md [html-element]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement @@ -200,3 +193,4 @@ For detailed information see [Pagination][pagination] component. [readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches [readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#style-props [ul-element]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul +[web-react-icon-documentation]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Icon/README.md#-usage diff --git a/packages/web-react/src/components/Select/README.md b/packages/web-react/src/components/Select/README.md index d812e7e98d..3cdf69339a 100644 --- a/packages/web-react/src/components/Select/README.md +++ b/packages/web-react/src/components/Select/README.md @@ -53,17 +53,10 @@ On top of the API options, the components accept [additional attributes][readme- If you need more control over the styling of a component, you can use [style props][readme-style-props] and [escape hatches][readme-escape-hatches]. -## Icons Provider +## Icons -To display the icons correctly, the component needs to be wrapped with IconsProvider. - -```jsx -import { IconsProvider } from 'packages/web-react/src/context'; - - -