From 3d13f4ef73c0d937f6c64872428518b228e094f3 Mon Sep 17 00:00:00 2001 From: Adam Kudrna Date: Tue, 24 Jan 2023 14:11:12 +0100 Subject: [PATCH] Docs(web, web-react): Fix external links in README's --- packages/web-react/README.md | 19 ++++++++++++------- packages/web/README.md | 8 +++----- .../web/src/scss/components/Header/README.md | 2 +- 3 files changed, 16 insertions(+), 13 deletions(-) diff --git a/packages/web-react/README.md b/packages/web-react/README.md index 4fb4cecfb1..c5e6b881a7 100644 --- a/packages/web-react/README.md +++ b/packages/web-react/README.md @@ -76,12 +76,15 @@ Please consult additional styling with [web package documentation][web-pkg-rebra ## Controlled vs Uncontrolled components -- A [Controlled Component](https://reactjs.org/docs/forms.html#controlled-components) is one that takes its current value through props and notifies changes through callbacks like onChange. - A parent component "controls" it by handling the callback and managing its own state and passing the new values as props to the controlled component. +- A [Controlled Component][react-controlled] is one that takes its current + value through props and notifies changes through callbacks like onChange. + A parent component "controls" it by handling the callback and managing its own + state and passing the new values as props to the controlled component. You could also call this a "dumb component". -- An [Uncontrolled Component](https://reactjs.org/docs/uncontrolled-components.html) is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. - This is a bit more like traditional HTML. +- An [Uncontrolled Component][react-uncontrolled] is one that stores its own + state internally, and you query the DOM using a ref to find its current value + when you need it. This is a bit more like traditional HTML. All components are by default provided as _controlled_ components so you must provide your own controlling or toggle functionality to make them work as you want. @@ -90,13 +93,15 @@ You can use the `Uncontrolled` variant for faster development. ## Examples -👀 See [example] for a live demo. +👀 See [examples] for a live demo. ## License See the [LICENSE](LICENSE.md) file for information. -[web-docs]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md -[examples]: https://lmc-eu.github.io/spirit-design-system/web-react/ +[examples]: https://spirit-design-system-storybook.netlify.app +[web-docs]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web#readme [web-pkg-rebrand]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web#rebranding [web-pkg-prefixes]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web#prefixing-css-class-names +[react-controlled]: https://reactjs.org/docs/forms.html#controlled-components +[react-uncontrolled]: https://reactjs.org/docs/uncontrolled-components.html diff --git a/packages/web/README.md b/packages/web/README.md index 7af32cddfd..afa2faf556 100644 --- a/packages/web/README.md +++ b/packages/web/README.md @@ -96,13 +96,11 @@ rebranding of Spirit Sass components and styles. Once you have created your own design tokens, just provide them to your Sass compiler and you are ready to go! Learn more in the [`spirit-design-tokens` docs][rebranding]. -👀 Head to the [rebranding example] to see how it works. - ## Development Start local development server with `yarn start` to get started. You will get the live preview of all components and plugins in your browser. Just get dirty and change something and you will see the changes live. -The dev-stack is based on [vite](https://vitejs.dev/). +The dev-stack is based on [Vite]. ## Examples @@ -115,6 +113,6 @@ See the [LICENSE](LICENSE.md) file for information. [configuring-load-path]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/design-tokens#configuring-load-path [tokens-api]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/design-tokens#tokens-api [rebranding]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/design-tokens#b-via-load-path -[rebranding example]: https://github.com/lmc-eu/spirit-design-system/tree/main/examples/web/src/jobs -[examples]: https://lmc-eu.github.io/spirit-design-system/web/ +[examples]: https://lmc-eu.github.io/spirit-design-system/ [postcss-prefixer]: https://www.npmjs.com/package/postcss-prefixer +[vite]: https://vitejs.dev diff --git a/packages/web/src/scss/components/Header/README.md b/packages/web/src/scss/components/Header/README.md index 5efe4c5b16..6dd699ecb5 100644 --- a/packages/web/src/scss/components/Header/README.md +++ b/packages/web/src/scss/components/Header/README.md @@ -314,5 +314,5 @@ demo. ✍️ Please do feel free to let us know when you believe this component lacks some important capabilities. Thank you! 🙏 -[examples]: https://lmc-eu.github.io/spirit-design-system/web/ +[examples]: https://lmc-eu.github.io/spirit-design-system/ [web-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md