CBP Design System consists of the UX Guidances in the CBP Design System Guide website and the CBP Design System CSS (DS CSS). The CBP DS CSS is an npm project built and published as cbp-ds, bundled using Webpack 4.
- Node 10 or greater
- To run multiple versions of Node nvm is highly recommended.
- Git
These are the basic npm commands to run from the project root:
- css:init - installs libraries
- css:build - builds the css
- css:dist - prepares ds css for publishing, creating a dist folder at the root of this project
For development, use the ds css package.json in the ds-css folder
The CBP DS Style Guide is a static site built on Gatsby and the DS CSS.
These are the basic npm commands to run from the project root:
- website:init - installs libraries
- website:build - builds the static site
- website:prepare - prepares the static site for publishing to GitHub Pages,
For development, use the package.json in the ds-ux-guidelines folder
The Design System uses Travis CI for the build pipeline. Commits trigger the build pipeline. For the DS CSS, commits and the creation of tags trigger the build pipeline. Tag creation also triggers npm publish.
- .travis.yml - build pipeline configuration
- publish.sh - script to automate deployment to GitHub pages
- .npmrc.template - npmrc template file for npm publishing
If you have access, discuss next release to publish. We are starting 2.x as the predecessor to the CBP DS was 1.x. So, for the CBP DS we will publish only minor and patches.
Steps to publish
- Update Travis CI settings with your authorized email and token used for npm. Note, you will need to delete the NPM_EMAIL and NPM_TOKEN environment variables and recreate it with your email and token.
- optionally you may want to change the npm tag to beta or next
- Run
npm version patch or minor(This creates a new version and git tag) - Verify the npm version command worked
- Verify the Travis CI Build for the tag ran successfully