Skip to content

Commit 0de7bfa

Browse files
committed
Add documentation around usage and styles
1 parent 8e29aab commit 0de7bfa

File tree

1 file changed

+43
-1
lines changed

1 file changed

+43
-1
lines changed

README.md

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,49 @@
22

33
Extensions to the NHS.UK React Components Library
44

5-
### Storybook
5+
## Usage
6+
7+
### Installation
8+
9+
The `nhsuk-react-components-extensions` package is published on NPM, and is installable via:
10+
11+
```bash
12+
yarn add nhsuk-react-components-extensions
13+
14+
# Or
15+
16+
npm i --save nhsuk-react-components-extensions
17+
```
18+
19+
### Importing Components
20+
21+
Components can either be imported from the global package or from the `/lib` directory. The package is tree-shakeable, so you should not see a sizeable difference between the import sizes using either method.
22+
23+
```jsx
24+
// From the global package
25+
import { SubNavigation } from 'nhsuk-react-components-extensions';
26+
27+
// From the lib directory
28+
import SubNavigation from 'nhsuk-react-components/lib/components/sub-navigation';
29+
```
30+
31+
### Styles
32+
33+
The package comes with two separate "master" stylesheets. These can be found at `~nhsuk-react-components-extensions/css/all.css` and `~nhsuk-react-components-extensions/css/components.css`.
34+
35+
If you are already using components from `nhsuk-frontend` or the `nhsuk-react-components` packages, it is strongly recommended to use the `components.css` file as this only contains the additional styles required to use the extra components in this library.
36+
37+
If you are not using any of those other packages, or the standard NHS.UK stylesheets, you will require the `all.css` file as this contains all of the core NHS.UK styles as well as the component styles.
38+
39+
```scss
40+
// Core NHS.UK Styles and Components
41+
@import '~nhsuk-react-components-extensions/css/all.css';
42+
43+
// Just Components
44+
@import '~nhsuk-react-components-extensions/css/components.css';
45+
```
46+
47+
## Storybook
648

749
A storybook containing all of the components and their usage can be found [here](https://nhsdigital.github.io/nhsuk-react-components-extensions).
850

0 commit comments

Comments
 (0)