@nvps/design

NvDesign

The Angular UI Library by New Visions for Public Schools

Usage

1. Install using npm install @nvps/design
2. Import @nvps/design into the appropriate modules
3. Add @import '~@nvps/design/nv-global.css'; to your main css file
   • This is necessary to get the appropriate design system color, size, and font variables
   • If you want to use thes

Development

Creating a new component

Testing a component

Karma

We're using Angular CLI's built-in Karma testing library. Run npm run test to run your tests.

To check your coverage report, run npm run coverage

These tests are run automatically in CircleCI when you open a PR.

Chromatic

We use Chromatic for visual QA. When you open a PR (and every push afterwards), Chromatic will run and check for visual changes.

Your CI build will fail if there are visual changes. Once the changes are approved by Design, you can re-run from the failed step, to complete the CI build.

Deploying

When a PR is merged to master, the CI build will run, and deploy the Storybook documentation

Publishing

After a PR is merged to master, we manually deploy to npm.

To publish:

1. Make sure you are a member, and can contribute to the package
2. Run npm login and follow the instructions
3. Update the version of the package with npm run version "patch | minor | major"
   • While we don't explicitly plan releases, we're using Semantic Versioning for our design system
   • Patch: A small no-impact change to an existing component
   • Minor: A new component is added, or new functionality is added to an existing component
   • Major: A breaking change to any component's API
   • Note - This versioning will not be followed closely untill the 1.0.0 release
4. Build the distribution library with npm run build
5. Oublish with npm run publish
6. Install the package in the Portal, or other project, using npm i @nvps/design@latest

Elements - (experimental)

Angular Elements is a technology that compiles Angular components into HTML custom elements. The experimental library is found in projects/nv-elements.