Blueprint Component Library

Epsilon Blueprint

Blueprint is the component library and design system used across Epsilon products. See Trello for an update on in progress and upcoming work.

Blueprint is in the process of being sunsetted and replaced with a new component library, Core UI. We have released a version of Blueprint that has been reskinned to look similar to Core UI to maintain a consistent look and feel as products transition over to Core UI. To use this version, run npm install epsilon-blueprint@core. To continue using the original Blueprint styles, continue setup as normal.

Documentation Variants

Project setup

Please reach out to the UX team before getting started!

Architecture and base template

All Epsilon products use the same application architecture to ensure scalability, reusability, and code cleanliness. The UX team works closely with product teams in the setup of the application architecture as well as the implementation of the base template. The base template is used to create the page structure. See the Skeleton UI for an example of the standard project architecture and base template implementation.

Dependencies

The epsilon-blueprint package has two dependencies that are not included in the package:

  • Angular 10
  • ng-select 5

Imports

All applications should have the below imports in the index. The latest versions can be copied from the Skeleton UI index.

  • Bootstrap v4
  • Open Sans
  • Font Awesome 5
  • IBM Plex Mono
  • Google Analytics

Automated code quality tools

All applications should use automated code quality tools to help avoid errors, provide real-time feedback, reduce the amount of human code review needed, allow code reviewers to focus on providing higher-level feedback, and enforce best practices and coding standards. See Code Standards for more information on front-end code standards, and DevOps for more information on automated code quality tools.

stylelint
  1. Run npm install stylelint stylelint-config-standard --save-dev
  2. Run npm install stylelint-order --save-dev
  3. Run npm install stylelint-scss --save-dev
  4. Add the stylelint config to the root of the project
  5. In the application's package.json file, add the following script: "stylelint": "stylelint '**/*.scss'"
ESLint
  1. Run npm install eslint --save-dev
  2. Run npm install @typescript-eslint/parser --save-dev
  3. Run npm install @typescript-eslint/eslint-plugin --save-dev
  4. Run npm install @angular-eslint/eslint-plugin --save-dev
  5. Add the ESLint config to the root of the project
  6. Add the ESLint ignore to the root of the project
  7. In the application's package.json file, add the following script: "eslint": "eslint 'src/**/*.ts'"

Installation

Once project setup is complete, install epsilon-blueprint.

  1. Run npm install epsilon-blueprint
  2. In the application's styles.scss file, add the following import statement: @import "~epsilon-blueprint/styles";
  3. When global variables are needed in a scss file, add the following import statement: @import "~epsilon-blueprint/styles/global-variables";

Usage

Please do not override or customize Blueprint components. If Blueprint components are overridden or customized in products, we will be unable to safely update the epsilon-blueprint component library without introducing breaking changes in the products. If you experience any issues using Blueprint components, please reach out to the UX team.

Process

Collaboration

The collaboration process between the UX team and product teams varies slightly from product to product. However, the UX team should have read and write access to all product repositories. The UX team will share all available resources with product teams including the epsilon-blueprint component library, mockups, and training resources.

Code review

The UX team reviews all front-end pull requests. Code review is an important part of development: it helps developers learn, offers different perspectives, and ensures quality. See DevOps for more information on development practices.

Resources