Skip to content

Commit

Permalink
Docs(web, web-react): Fix external links in README's
Browse files Browse the repository at this point in the history
  • Loading branch information
adamkudrna committed Jan 24, 2023
1 parent 9f21660 commit 3d13f4e
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 13 deletions.
19 changes: 12 additions & 7 deletions packages/web-react/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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
8 changes: 3 additions & 5 deletions packages/web/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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
2 changes: 1 addition & 1 deletion packages/web/src/scss/components/Header/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

0 comments on commit 3d13f4e

Please sign in to comment.