Epc-design-system NPM

Integration Steps

To integrate epc-design-system with your project do the following...

1. npm install epc-design-system
1. Add "node_modules/epc-design-system/styles/less/CMStheme.css" to your build styles in the anguler.json file
1. For validation add "node_modules/epc-design-system/js/cms-validation.uncompressed.js" to your build scripts in the anguler.json file
1. Import / Inject validation service:

import { ValidationService } from 'epc-design-system/dist/validation.service.js'; 
constructor(private validationService: ValidationService) {
}

1. Bind validations to control.

ngOnInit() {
this.validationService._bindValidations();  
}

1. Apply validations to button clicks:

// On Form Submit Handle Like This
buttonClick(obj) {
    let self = this;
    this.validationService.validate("forum-id-1").then(
        success=>{    
          //Success
        },
        err=>{
          //Error
        }
      )
}
formSubmit(obj) {
    let self = this;
    this.validationService.validate("forum-id-2").then(
        success=>{    
          //Success
        },
        err=>{
          //Error
        }
      )
}

1. Apply validation classes to fields:

<form id="forum-id-1" (ngSubmit)="formSubmit()">
  <input id="justification-field" class="cms-regreq-field cms-check-just"/>
  <button type="button">
</form>
<div id="forum-id-2">
  <input id="justification-field" class="cms-regreq-field cms-check-just"/>
  <button type="button" (click)="buttonClick($event)">
</div>

Release Notes

0.12.94 - validateThen, validateAsync
0.12.90 - Updated Read Me.
0.12.89 - Added Country Validations.
0.12.77 - Stable.
0.12.58 - Not stable until this point.
0.12.41 - Update Read me
0.12.40 - Stable on help desk dev branch.
0.12.38 - Integration Steps and Release Notes added to the read me.
0.12.37 - Validation tool tips added. (Bug fix)
0.12.36 - Validations working with help desk.

Project Info

https://www.npmjs.com/package/epc-design-system

Test Scripts

Chrome IE

Menu Nav & To Top button

1.1 Desktop

Responsive - tablet
Responsive - iPhone -- Footer not all silver -- code snippets are opened

3.1 Big hr

3.2 Alignment

Buttons clickable?
Code and Doc buttons
Code actually works?

TO DO:

Add tips
Add code and docs to Text Inputs

END Test Scripts

PS C:\ws\Projects\node_modules\epc-design-system> history Id CommandLine

1 cd c:/ws/Projects 2 npm i epc-design-system 2.5 npm update epc-design-system 3 dir 4 cd node_ 5 dir 6 cd e 7 cls 8 npm i 9 grunt

https://www.npmjs.com/package/epc-design-system https://design.cms.gov/components/button/

PS C:\ws\Projects\node_modules\epc-design-system> Next Step

Please have a look at the package.json file and the gruntfile I provided, the next steps are to setup both linting and minification for the js/css files so we can have reports generated on the codebase’s health.