diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 12ffc3f95..b227370da 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -50,6 +50,12 @@ Icons are located in [packages/react/src/components/Icon/icons](./packages/react - Save your icon in the above location with the proposed name of your icon, e.g. `[your-name].svg`. The `your-name` portion will be how the icon is used in the React Component, e.g. ``. - Submit a new `feat` PR with your changes. +## Server-side Rendering + +Avoid referencing `window` properties, such as `document`, unless you are sure the code will only be executed in a browser environment. For instance, it is safe to reference `document` in an [Effect Hook](https://reactjs.org/docs/hooks-effect.html) or a lifecycle method like `componentDidMount()`, but not in the `render()` method of a class component. + +Ensuring you only reference these objects when it is safe to do so will ensure that library consumers can use Cauldron with platforms that use an SSR engine, such as GatsbyJS and NextJS. + ## Breaking Changes Cauldron is constantly evolving, and it's inevitable that breaking changes will need to be introduced. Before a breaking change is released, other alternatives should be considered and allow for a deprecation period before the breaking change is released. diff --git a/docs/pages/intro.mdx b/docs/pages/intro.mdx index 61caec1e3..d53ca7ed3 100644 --- a/docs/pages/intro.mdx +++ b/docs/pages/intro.mdx @@ -7,7 +7,9 @@ index: 1 ## Purpose -Friends don’t let friends ship inaccessible code! These accessible packages include everything from typography and colors to components like custom form controls. The design and interactions shown throughout this site are intended to show how Deque provides accessible experiences for the users of our own products - through the use of common, accessible components like these. +Friends don’t let friends ship inaccessible code! Cauldron is designed with accessibility in mind, including styles covering everything from typography to colors, and React components that are designed to be inclusive of all users. Additionally, Cauldron's React components are designed to include full screen reader and keyboard navigation support. + +The design and interactions shown throughout this site are intended to show how Deque provides accessible experiences for the users of our own products - through the use of common, accessible components like these. ## Usage diff --git a/packages/react/README.md b/packages/react/README.md index db77a2930..7407b3c9e 100644 --- a/packages/react/README.md +++ b/packages/react/README.md @@ -1,19 +1,29 @@ -# cauldron react +# Cauldron React -## installation +Friends don’t let friends ship inaccessible code! Cauldron is designed with accessibility in mind, including styles covering everything from typography to colors, and React components that are designed to be inclusive of all users. Additionally, Cauldron's React components are designed to include full screen reader and keyboard navigation support. -```sh -$ npm install @deque/cauldron-react --save +## Installation + +To start using Cauldron React, install the packages with your package manager of choice: + +### npm + +```js +npm install @deque/cauldron-react @deque/cauldron-styles ``` -and pull in the styles: +### yarn -```sh -$ npm install @deque/cauldron-styles --save +```js +yarn add @deque/cauldron-react @deque/cauldron-styles ``` -## server-side rendering +## Getting Started + +To get started, follow our [usage guide](https://cauldron.dequelabs.com/#usage) that includes setup instructions and necessary dependencies. Further documentation is also available at [cauldron.dequelabs.com](https://cauldron.dequelabs.com) that includes documentation for every available Cauldron component. + +## Contribute -Avoid referencing `window` properties, such as `document`, unless you are sure the code will only be executed in a browser environment. For instance, it is safe to reference `document` in an [Effect Hook](https://reactjs.org/docs/hooks-effect.html) or a lifecycle method like `componentDidMount()`, but not in the `render()` method of a class component. +If you're interested in contributing to Cauldron, you can check out our [contribution guide](https://github.com/dequelabs/cauldron/blob/develop/CONTRIBUTING.md) as well as our [code of conduct](https://github.com/dequelabs/cauldron/blob/develop/CODE_OF_CONDUCT.md). -Ensuring you only reference these objects when it is safe to do so will ensure that library consumers can use Cauldron with platforms that use an SSR engine, such as GatsbyJS and NextJS. +Did you find a bug or have a feature request? [Open an issue!](https://github.com/dequelabs/cauldron/issues/new/choose)