@understood/design-system

---

description: >- Voyager is Understood's Design System, a lightweight collection of immutable utilities designed for speed, clarity, performance, and scalability.

Voyager

Installation And Setup

Use NPM to install Understood Design System.

npm install --save @understood/design-system

Running Linting tests

Lint config is located at tools/stylelint/.stylelintrc``

npm run lint

Compiling Assets

Compile all assets

npm run development
npm run dev

Compile all assets and minify output

npm run production
npm run prod

Checking Bundle size

Current bundle size limit is 20Kb

npm run checksize

Watching Assets For Changes

npm run watch

Additional command for certain environments that do not support npm run watch

npm run watch-poll

Hot Module Replacement

Hot Module Replacement (or Hot Reloading) allows you to, not just refresh the page when a piece of JavaScript is changed, but it will also maintain the current state of the component in the browser.

npm run hot

Continuous Integration

Continuous integration is handled by Circle CI. Circle CI YML config is located at .circleci/config.yml Circle CI run following tasks on each commit

• npm install

• npm run lint

• npm run production

• npm run checksize

• npm release $VERSION

  $VERSION is being taken from package.json. Release won't succeed in case you didn't update the version number in package.json

Release Candidates

Circle CI publishes new release candidate each time you make a pull request or a commit to any branch that differs from master branch.

Release candidates version is autoincremented after each commit and looks like this: 0.1.9-rc.1 For example you have version 2.1.5 in package.json. Then on the first commit Circle CI will publish release candidate with version 2.1.5-rc.1. Second commit will trigger publishing release candidate with version 2.1.5-rc.2 etc. Version 2.1.5 will be released only after you merge the pull request into master branch.

Distrubution repository

npm release $VERSION command publishes the package to npm, then takes minified files and releases it into distribution repository. You can find latest released minified files in public GitHub repo https://github.com/understood/design-system-dist