From b865189166d4207637de21721f8bf1b291f41a32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20=C4=8Curda?= Date: Mon, 9 Dec 2024 20:24:18 +0100 Subject: [PATCH] Docs(web-react): Add IconsProvider documentation #DS-815 --- .../web-react/src/components/Accordion/README.md | 6 ++++++ packages/web-react/src/components/Alert/README.md | 6 ++++++ .../src/components/Breadcrumbs/README.md | 6 ++++++ .../web-react/src/components/Button/README.md | 6 ++++++ .../web-react/src/components/ButtonLink/README.md | 6 ++++++ .../src/components/FileUploader/README.md | 6 ++++++ .../web-react/src/components/Header/README.md | 6 ++++++ packages/web-react/src/components/Icon/README.md | 15 ++++++++++++++- packages/web-react/src/components/Item/README.md | 6 ++++++ packages/web-react/src/components/Modal/README.md | 6 ++++++ .../web-react/src/components/Pagination/README.md | 6 ++++++ .../web-react/src/components/Select/README.md | 14 ++++---------- .../web-react/src/components/Spinner/README.md | 6 ++++++ packages/web-react/src/components/Toast/README.md | 6 ++++++ .../src/components/UNSTABLE_Avatar/README.md | 3 +++ 15 files changed, 93 insertions(+), 11 deletions(-) diff --git a/packages/web-react/src/components/Accordion/README.md b/packages/web-react/src/components/Accordion/README.md index bd502b93a0..a59b91689a 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]. +## Dependencies + +The Accordion 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 diff --git a/packages/web-react/src/components/Alert/README.md b/packages/web-react/src/components/Alert/README.md index 93523132b1..c52b0bd39f 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]. +## Dependencies + +The Alert 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 diff --git a/packages/web-react/src/components/Breadcrumbs/README.md b/packages/web-react/src/components/Breadcrumbs/README.md index 428d2f46ef..aae910a56b 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. +## Dependencies + +The Breadcrumbs 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 diff --git a/packages/web-react/src/components/Button/README.md b/packages/web-react/src/components/Button/README.md index f487188c2e..f0a0e52270 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]. +## Dependencies + +The Button 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 diff --git a/packages/web-react/src/components/ButtonLink/README.md b/packages/web-react/src/components/ButtonLink/README.md index 8ceb4b2532..da7e502dbf 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]. +## Dependencies + +The ButtonLink 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 diff --git a/packages/web-react/src/components/FileUploader/README.md b/packages/web-react/src/components/FileUploader/README.md index 45c5da639e..5f565eb29d 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. +## Dependencies + +The FileUploader 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 diff --git a/packages/web-react/src/components/Header/README.md b/packages/web-react/src/components/Header/README.md index 312229e907..2f97869532 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); +## Dependencies + +The Header 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 diff --git a/packages/web-react/src/components/Icon/README.md b/packages/web-react/src/components/Icon/README.md index 968596eeec..a3b422cea3 100644 --- a/packages/web-react/src/components/Icon/README.md +++ b/packages/web-react/src/components/Icon/README.md @@ -26,16 +26,29 @@ 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. + +import { IconsProvider } from '@lmc-eu/spirit-web-react/components'; +import icons from '@lmc-eu/spirit-icons/icons'; + ```jsx import { Icon, IconsProvider } from '@lmc-eu/spirit-web-react/components'; import icons from '@lmc-eu/spirit-icons/icons'; + +{/* Your app or component with Icon */}; ``` +### Example + ```jsx +import { Icon, IconsProvider } from '@lmc-eu/spirit-web-react/components'; +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..c5eb7fe5b4 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]. +## Dependencies + +The Item 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 diff --git a/packages/web-react/src/components/Modal/README.md b/packages/web-react/src/components/Modal/README.md index c2d7bfdee4..5c93dca89d 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); ``` +## Dependencies + +The Modal 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 diff --git a/packages/web-react/src/components/Pagination/README.md b/packages/web-react/src/components/Pagination/README.md index 1f1be887b1..d77fb2c165 100644 --- a/packages/web-react/src/components/Pagination/README.md +++ b/packages/web-react/src/components/Pagination/README.md @@ -192,6 +192,11 @@ import { IconsProvider } from 'packages/web-react/src/context'; For detailed information see [Pagination][pagination] component. +## Dependencies + +The Pagination 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 [li-element]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li @@ -200,3 +205,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 diff --git a/packages/web-react/src/components/Select/README.md b/packages/web-react/src/components/Select/README.md index d812e7e98d..385df2f444 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 +## Dependencies -To display the icons correctly, the component needs to be wrapped with IconsProvider. - -```jsx -import { IconsProvider } from 'packages/web-react/src/context'; - - -