Integration Steps

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

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

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

• 5. Bind validations to control.

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

• 6. 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
        }
      )
}

• 7. 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

1. Menu Nav & To Top button

1.1 Desktop

2. Responsive - tablet

3. Responsive - iPhone -- Footer not all silver -- code snippets are opened

3.1 Big hr

3.2 Alignment

4. Buttons clickable?

5. Code and Doc buttons

6. Code actually works?

TO DO:

7. Add tips

8. 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.

https://portal.cms.gov/wps/contenthandler/!ut/p/digest!3JKaotSk_gMd0aUfF0xN-w/war/EPThemeStatic/themes/Simple/modules/cms_css/head/../images/cms-portal-logo.svg

https://portaldev-beta.cms.gov https://portaldev-beta.cms.cmstest/ https://portallab-beta.cms.cmstest https://portallab-beta.cms.cmstest/wps/portal/unauthportal/home/

https://portallab-beta.cms.cmstest

https://portal.cms.gov

https://portaldev-beta.cms.gov/wps/myportal/cmsportal/myportal/