Adjust theme, add testing

awx/ui/client/components/_common.less

@@ -1,17 +0,0 @@
-.at-Button(@bg, @bg-hover: @bg, @color, @color-hover: @color) {
-    color: @color;
-    background-color: @bg;
-    padding: @at-padding-xs @at-padding-md;
-    padding-bottom: @at-padding-xs + 1;
-
-    &:hover {
-        color: @color-hover;
-        background-color: @bg-hover;
-    }
-}
-
-.at-Button--success { .at-Button(@at-success, @at-success-dark, @at-white) }
-.at-Button--link { .at-Button(@at-link, @at-link-dark, @at-white) }
-.at-Button--danger { .at-Button(@at-danger, @at-danger, @at-white) }
-.at-Button--light { .at-Button(@at-white, @at-gray-light, @at-gray-dark) }
-

awx/ui/client/components/_index.less

@@ -1,4 +1,3 @@
-@import '_common';
 @import 'badge/_index';
 @import 'input/_index';
 @import 'panel/_index';

awx/ui/client/components/input/_index.less

@@ -1,29 +1,12 @@
-.at-InputSearch {
-}
-
 .at-InputSearch-field {
-    .at-placeholder;  
+    .at-placeholder(@at-gray-dark);
 
     border-color: @at-gray-light;
     background-color: @at-white; 
     font-size: @at-font-md;
-
-    @include placeholder(@at-gray);
 }
 
 .at-InputSearch-field:focus {
     border-color: @at-gray-light;
 }
 
-.at-Input-searchButton {
-    .at-buttonColor;
-
-    padding: 4px 10px;
-    padding-bottom: 5px;
-    font-size: @at-font-lg;
-}
-
-.at-Input-searchButton:hover {
-    .at-buttonColorHover;
-}
-

awx/ui/client/components/input/search.partial.html

@@ -3,7 +3,7 @@
          class="form-control at-InputSearch-field" 
          placeholder="{{ config.placeholder }}" />
   <div class="input-group-btn">
-    <button class="btn btn-default at-Input-searchButton" type="button">
+    <button class="btn at-Button--default at-Button--icon" type="button">
       <span class="fa fa-search"></span>
     </button>
   </div>

awx/ui/client/test/index.js

@@ -0,0 +1,7 @@
+import 'angular';
+import 'angular-mocks';
+
+import '../components/index.js';
+import './panel.spec.js';
+
+

awx/ui/client/test/karma.conf.js

@@ -1,18 +1,46 @@
+let path = require('path');
+
 module.exports = config => {
     config.set({
-        basePath: '..',
+        basePath: '',
         singleRun: true,
-        autoWatch: true,
+        autoWatch: false,
+        colors: true,
         frameworks: ['jasmine'],
         browsers: ['PhantomJS'],
-        reporters: ['mocha'],
+        reporters: ['progress'],
         files: [
-            'components/**/*.js',
+          './index.js',
-            'test/*.spec.js'
+          '../components/**/*.html'
         ],
         plugins: [
-            'karma-jasmine'
+            'karma-webpack',
-            'karma-mocha-reporter'
+            'karma-jasmine',
+            'karma-phantomjs-launcher',
+            'karma-ng-html2js-preprocessor'
         ],
+        preprocessors: {
+            '../components/index.js': 'webpack',
+            '../components/**/*.html': 'ng-html2js',
+            './index.js': 'webpack'
+        },
+        ngHtml2JsPreprocessor: {
+            moduleName: 'at.test.templates',
+            prependPrefix: '/'
+        },
+        webpack: {
+            module: {
+                loaders: [
+                    {
+                        test: /\.js$/,
+                        loader: 'babel',
+                        exclude: /node_modules/
+                    }
+                ]
+            }
+        },
+        webpackMiddleware: {
+            noInfo: 'errors-only'
+        }
     });
 };

awx/ui/client/test/panel.spec.js

@@ -1,20 +1,25 @@
 describe('Components | panel', () => {
-    var $compile,
+    let $compile;
-        $rootScope;
+    let $rootScope;
 
-    beforeEach(module('at.components'));
+    beforeEach(done => {
+        angular.mock.module('at.components')
+        angular.mock.module('at.test.templates');
 
-    beforeEach(inject((_$compile_, _$rootScope_) => {
+        inject((_$compile_, _$rootScope_) => {
-        $compile = _$compile_;
+            $compile = _$compile_;
-        $rootScope = _$rootScope_;
+            $rootScope = _$rootScope_;
-    }));
+
+            done();
+        });
+    });
 
     it('should load the navigation partial', function() {
+        console.log($rootScope);
         var element = $compile('<at-panel></at-panel>')($rootScope);
 
         $rootScope.$digest();
       
-        console.log(element.html());
+        expect(element.html()).toContain('<nav class="navbar navbar-default" role="navigation">');
-        //expect(element.html()).toContain('<nav class="navbar navbar-default" role="navigation">');
     });
 });

awx/ui/client/theme/_common.less

@@ -1,3 +1,13 @@
+/**
+ * For styles that are used in more than one place throughout the application.
+ *
+ * 1. Content
+ * 2. Buttons
+ *
+ */
+
+// 1. Content
+// ------------------------------------------------------------------------------------------------
 .at-Title-row {
     align-items: center;
     flex: 1 0 auto;
@@ -12,3 +22,29 @@
     text-transform: uppercase;
 }
 
+// 2. Buttons
+// ------------------------------------------------------------------------------------------------
+.at-Button--success {
+  .at-Button(@at-success, @at-white);
+}
+.at-Button--link {
+  .at-Button(@at-link, @at-white);
+}
+.at-Button--danger {
+  .at-Button(@at-danger, @at-white);
+}
+.at-Button--default { 
+  .at-Button(@at-white, @at-gray);
+
+  border-color: @at-gray-light;
+
+  &:hover {
+    background: @at-gray-lightest;
+  }
+}
+
+.at-Button--icon {
+  padding: @at-padding-xxs @at-padding-sm;
+  font-size: @at-font-lg;
+}
+

awx/ui/client/theme/_mixins.less

@@ -1,23 +1,22 @@
-.at-placeholder {
+.at-placeholder(@color) {
     &:-moz-placeholder {
-        color: @at-gray-dark;
+        color: @color;
     }
     &:-ms-input-placeholder {
-        color: @at-gray-dark;
+        color: @color;
     }
     &::-webkit-input-placeholder {
-        color: @at-gray-dark;
+        color: @color;
     }
 }
 
-.at-buttonColor () {
+.at-Button(@bg, @color) {
-    background-color: @at-white;
+    color: @color;
-    border-color: @at-gray-light;
+    background-color: @bg;
-    color: @at-gray;
+    padding: @at-padding-xs @at-padding-md;
-}
 
-.at-buttonColorHover () {
+    &:hover {
-    background-color: @at-gray-lighter;  
+        color: @color;
-    border-color: @at-gray-light;
+        background-color: '@{bg}-dark';
-    color: @at-gray;
+    }
 }

awx/ui/client/theme/_variables.less

@@ -1,7 +1,7 @@
 @at-white: #ffffff;
 
-@at-gray-lightest: #f6f6f6;
+@at-gray-lightest: #fafafa;
-@at-gray-lighter: #fafafa;
+@at-gray-lighter: #f6f6f6;
 @at-gray-light: #b7b7b7;
 @at-gray: #848992;
 @at-gray-dark: #707070;
@@ -18,6 +18,7 @@
 @at-font-md: 14px;
 @at-font-lg: 16px;
 
+@at-padding-xxs: 5px;
 @at-padding-xs: 6px;
 @at-padding-sm: 10px;
 @at-padding-md: 20px;

awx/ui/package.json

@@ -67,6 +67,7 @@
     "karma-html2js-preprocessor": "^1.0.0",
     "karma-jasmine": "^1.1.0",
     "karma-junit-reporter": "^1.2.0",
+    "karma-ng-html2js-preprocessor": "^1.0.0",
     "karma-phantomjs-launcher": "^1.0.2",
     "karma-sauce-launcher": "^1.0.0",
     "karma-sourcemap-loader": "^0.3.7",