Directory Structure
├── README.md # what is it, who support it, how do developers use it, etc
├── gulpfile.js
├── main\ # where JS and optionally images and fonts are placed
│ ├── images\ # only if you have them
│ └── main.js # required, can be the primary code, or an empty placeholder
├── package.json # required so that npm pack will package your files
├── style\ # location of SASS files
│ └── _header.scss
└── test\ # karma tests
├── karma.conf.js
└── test-main.js
Standards
- JS code must be structured as AMD modules
- SASS code must compile with node-sass version 0.9.3 or higher
- SASS code must use variables to define the path to images and fonts
- Have unit tests
- Have API documentation or examples
- Only use external JS from foundation-client/vendor
Example Files
README.md
---
title: gs-header
tags: ['client', 'component']
tocSection: developers
---
myapp.js
angular.module("uxApp").controller("AppAreaCtrl",
[ '$scope', 'appAreaService',
function ($scope, appService) {
$scope.my_data = "This is my data";
appService.getMyApps().then(function(data){
$scope.myapps = data;
});
}]);
package.json
{
"name": "header",
"version": "1.0.0",
"repository": {
"type": "svn",
"url": "svn+ssh://mq-fdn-client.svn.services.gs.com/svnroot/mq-fdn-client"
},
"dependencies": {
"uitoolkit": "http://prod.area.services.gs.com/area/repo/public/com/gs/ux/uitoolkit/uitoolkit.nm/2.0.0_beta4/uitoolkit.n m-2.0.0_beta4.tgz"
},
"config": {
"lintFiles": [
"main/**/*.js"
],
"sassWatchFiles": [
"style/*.scss"
]
}
}
_main.scss
$font-path:"../features/uitoolkit/font";
$fa-font-path:"../features/uitoolkit/font";
$ui-header-root: "../javascripts/features/header";
$ux-images-root: $ui-header-root +"/images" !default;
.logo {
background-image: url('#{$ux-images-root}/gs_signature_logo.svg'), none;
}