http://localhost:8000/html/styleguide.html https://portallab-beta.cms.cmstest/wps/portal/unauthportal/home/ https://portal.cms.gov/wps/portal/unauthportal/home/ https://design.cms.gov/components/button/#usage https://www.npmjs.com/package/epc-design-s
npm install epc-design-system
-----------------
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:
``typescript
`
import { ValidationService } from 'epc-design-system/dist/validation.service.js';
constructor(private validationService: ValidationService) {
}
`
- 5. Bind validations to control.
typescript
`
ngOnInit() {
this.validationService._bindValidations();
}
`
- 6. Apply validations to button clicks:
typescript
`
// 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:
html
``
-------------
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/