HSDS: React
  • HSDS: React
  • Quick start
    • Components
  • Testing
    • Local Integration Testing
  • Reporting Issues
  • Contributing
    • Getting started
    • Creating a component
    • Styling
    • Write a story
    • Writing tests
    • Adding documentation
    • Submitting for review
    • Publishing a release
Powered by GitBook
On this page
  • HSDS: React
  • Live Demo
  • Install
  • Getting Started
  • SVG Adapter
  • Testing
  • Publishing
  • Deploying Storybook
  • Learning
  • Blue?

HSDS: React

NextQuick start

Last updated 4 years ago

HSDS: React

React components for Help Scout's Design System

Live Demo

Install

npm install @helpscout/hsds-react --save

Getting Started

After cloning this repo down, run:

npm install

Once everything is installed, run:

npm start

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).

// 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'

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

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

Blue?

On Nov 8, 2018, we rebranded Blue to HSDS: React :tada:.

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: .

Check out HSDS's Storybook: .

Check out HSDS's Storybook at in your browser!

Note: This loads all the svg images, including and .

You can learn more about or

HSDS documentation:

Developer in-depth documentation:

Also, check out our for more learning resources

The original library will still exist on npm, and is still installable via:

https://hsds.helpscout.com/
http://localhost:8900/
Icon
Illo
releasing master
releasing a beta build
https://hsds.helpscout.com/
dev docs
videos
Blue
node
npm
Build Status
Coverage Status
npm version
style: styled-components