# HSDS: React
## HSDS: React
[](https://travis-ci.org/helpscout/hsds-react) [](https://coveralls.io/github/helpscout/hsds-react?branch=master) [](https://badge.fury.io/js/%40helpscout%2Fhsds-react)   [](https://github.com/styled-components/styled-components)
React components for Help Scout's Design System
### Live Demo
Check out HSDS's Storybook: .
### Install
```
npm install @helpscout/hsds-react --save
```
### Getting Started
After cloning this repo down, run:
```
npm install
```
Once everything is installed, run:
```
npm start
```
Check out HSDS's Storybook at in your browser!
### SVG Adapter
As of v2.18.0, the `svg` set is opt-in. This was done to reduce the compiled bundle size. To load the `svg` icons, add the appropriate adapter to your app.
It is recommended that the adapter be loaded somewhere within your main entry point (e.g. `src/index.js`).
```javascript
// src/index.js
// For a lighter-weight svg set for embeddables
import '@helpscout/hsds-react/adapters/embed'
// For the complete svg set
import '@helpscout/hsds-react/adapters/app'
```
Note: This loads all the `svg` images, including [`Icon`](https://github.com/helpscout/hsds-react/tree/71458bf2c89cf51e133f77f549e0f884393a3f28/src/components/Icon/README.md) and [`Illo`](https://github.com/helpscout/hsds-react/tree/71458bf2c89cf51e133f77f549e0f884393a3f28/src/components/Illo/README.md).
### Testing
To run Jest in watch mode, run:
```
npm run dev
```
To execute all the tests (with Coverage reporting), run:
```
npm run test
```
### Publishing
#### Merging a PR
To merge a PR when the release is completed, please do a *Squash and merge* from the PR page. It will keep the history clean in the master branch
We tend to do a release with only one PR at the time, *if possible*
#### Releasing on NPM
You can learn more about [releasing master](https://helpscout.gitbook.io/hsds-react/contributing/release) or [releasing a beta build](https://helpscout.gitbook.io/hsds-react/testing/local-integration-testing)
To publish and release a new version of HSDS, run the following command:
```
npm run release
```
You'll be presented with a CLI prompt with options. Pick the one you want, and that's it! The script will take care of the rest (from testing to publishing).
### Deploying Storybook
To deploy the Storybook, run the following command:
```
npm run deploy
```
### Learning
* HSDS documentation:
* Developer in-depth documentation: [dev docs](https://github.com/helpscout/hsds-react/tree/71458bf2c89cf51e133f77f549e0f884393a3f28/docs/README.md)
* Also, check out our [videos](https://github.com/helpscout/hsds-react/tree/71458bf2c89cf51e133f77f549e0f884393a3f28/VIDEOS.md) for more learning resources
### Blue?
On Nov 8, 2018, we rebranded Blue to HSDS: React :tada:.
The original [Blue](https://www.npmjs.com/package/@helpscout/blue) library will still exist on npm, and is still installable via:
```
npm install @helpscout/blue --save
```
However, continued development of this component library will continue under HSDS: React, which is installable via:
```
npm install @helpscout/hsds-react --save
```
A big thanks to all the folks involved in Blue! Blue will always be your boy :blue\_heart: .
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://helpscout.gitbook.io/hsds-react/master.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.