diff --git a/datahub-web-react/src/alchemy-components/README.mdx b/datahub-web-react/src/alchemy-components/README.mdx index 99d8c44754..be7fd739b8 100644 --- a/datahub-web-react/src/alchemy-components/README.mdx +++ b/datahub-web-react/src/alchemy-components/README.mdx @@ -4,7 +4,7 @@ This is a comprehensive library of accessible and reusable React components that ### Component Usage -It's easy to use the components availble in the library. Simply import the component and use it anywhere you're rendering React components. +It's easy to use the components available in the library. Simply import the component and use it anywhere you're rendering React components. ```tsx import { Button } from '@components'; @@ -40,7 +40,7 @@ You can access the theme types at `@components/theme/types` and the theme config ### Writing Docs -Our docs are generated using [Storybook](https://storybook.js.org/) and deployed to [Cloudfare](https://www.cloudflare.com/). +Our docs are generated using [Storybook](https://storybook.js.org/) and deployed to [Cloudflare](https://www.cloudflare.com/). - Storybook config is located at `.storybook` - Static doc files are located at `alchemy-components/.docs` @@ -56,14 +56,14 @@ This launches the docs app at `localhost:6006` and enables everything you need t ### Contributing -Building a component library is a collaboriate effort! We're aiming to provide a first-class experience, so here's a list of the standards we'll be looking for: +Building a component library is a collaborative effort! We're aiming to provide a first-class experience, so here's a list of the standards we'll be looking for: -- Consitent prop and variant naming conventions:
+- Consistent prop and variant naming conventions:
-- `variant` is used to define style types, such as `outline` or `filled`.
-- `color` is used to define the components color, such as `violet` or `blue`.
-- `size` is used to define the components size, such as `xs` or `4xl`.
-- Booleans are prefixed with `is`: `isLoading` or `isDisabled`. -- All style props have a correseponding theme type, ie. `FontSizeOptions`. +- All style props have a corresponding theme type, ie. `FontSizeOptions`. - All components have an export of default props. - Styles are defined using `style objects` instead of `tagged template literals`. - Stories are organized into the correct directory .