Indicators api (#1837)

* [API] Added Indicators API

* [Indicators] Converted Follow Indicator to new Indicators API

* [Indicators] Converted URL Indicator to new Indicators API

* [Indicators] Changes to some legacy indicators for compatibility with new Indicators API

* [Indicators] Addressed code review items from https://github.com/nasa/openmct/pull/1837

* Updated tests for URL Indicator

* Adding Indicator API spec

* Address linting issues

* Switched to direct DOM manipulation rather than template compilation to avoid an unnecessary extra holder element

* Updated documentation to reflect changes to API

* Indicators api styling (#2076)

Updated styling for Indicators

* Update API TOC

* Fix color of items w-mct-example areas of Style Guide

Fixes #1837

* Status class refactoring and cleanups

Fixes #1837
- Significant cleanups and name refactoring to allow more
concise selector definitions, with changes in js, html and scss files;
- Updates in Style Guide > Status page, with some content
reorganization and clarification;

* Corrected out of date API

* de-zeptoed Indicator API test spec

* Remove promise from URLIndicator

* Separated legacy indicators support

* Updated Indicator specs to Jasmine 3

* Fixed checkstyle and lint issues

* Moved legacy indicators support to adapter folder

* Various fixes for Indicators

Fixes #1837
- Added SASS constants for Indicator colors;
- Removed commented code;
- Removed unused indicator classes from _messages.scss
- Fixed missing s-status-on class;

* Significant revisions to Style Guide Indicators content

Fixes #1837
- Better documentation including recommendations;
- Better and more concrete examples;

* Style Guide example tweaks

Fixes #1837

* Refinement to Style Guide Status and Limits content

Fixes #1837
- More detail and clarification on Status and Limits;

* Cleanup code

Fixes #1837
- Remove commented styles;
- Line return refinements;

platform/features/clock/test/indicators/FollowIndicatorSpec.js

@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
+ * Open MCT, Copyright (c) 2009-2018, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,39 +20,77 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(["../../src/indicators/FollowIndicator"], function (FollowIndicator) {
-    var TIMER_SERVICE_METHODS =
-        ['setTimer', 'getTimer', 'clearTimer', 'on', 'off'];
-
+define([
+    "../../src/indicators/FollowIndicator",
+    "../../src/services/TimerService",
+    "../../../../../src/MCT",
+    'zepto'
+], function (
+    FollowIndicator,
+    TimerService,
+    MCT,
+    $
+) {
     describe("The timer-following indicator", function () {
-        var mockTimerService;
-        var indicator;
+        var timerService;
+        var openmct;
 
         beforeEach(function () {
-            mockTimerService =
-                jasmine.createSpyObj('timerService', TIMER_SERVICE_METHODS);
-            indicator = new FollowIndicator(mockTimerService);
+            openmct = new MCT();
+            timerService = new TimerService(openmct);
+            spyOn(openmct.indicators, "add");
         });
 
-        it("implements the Indicator interface", function () {
-            expect(indicator.getGlyphClass()).toEqual(jasmine.any(String));
-            expect(indicator.getCssClass()).toEqual(jasmine.any(String));
-            expect(indicator.getText()).toEqual(jasmine.any(String));
-            expect(indicator.getDescription()).toEqual(jasmine.any(String));
+        it("adds an indicator when installed", function () {
+            FollowIndicator(openmct, timerService);
+            expect(openmct.indicators.add).toHaveBeenCalled();
+        });
+
+        it("indicates that no timer is being followed", function () {
+            FollowIndicator(openmct, timerService);
+            var simpleIndicator = openmct.indicators.add.calls.mostRecent().args[0];
+            var element = simpleIndicator.element;
+            var text = $('.indicator-text', element).text().trim();
+            expect(text).toEqual('No timer being followed');
         });
 
         describe("when a timer is set", function () {
             var testObject;
+            var simpleIndicator;
 
             beforeEach(function () {
-                testObject = { name: "some timer!" };
-                mockTimerService.getTimer.and.returnValue(testObject);
+                testObject = {
+                    identifier: {
+                        namespace: 'namespace',
+                        key: 'key'
+                    },
+                    name: "some timer!"
+                };
+                timerService.setTimer(testObject);
+                FollowIndicator(openmct, timerService);
+                simpleIndicator = openmct.indicators.add.calls.mostRecent().args[0];
             });
 
             it("displays the timer's name", function () {
-                expect(indicator.getText().indexOf(testObject.name))
-                    .not.toEqual(-1);
+                var element = simpleIndicator.element;
+                var text = $('.indicator-text', element).text().trim();
+                expect(text).toEqual('Following timer ' + testObject.name);
             });
+
+            it("displays the timer's name when it changes", function () {
+                var secondTimer = {
+                    identifier: {
+                        namespace: 'namespace',
+                        key: 'key2'
+                    },
+                    name: "Some other timer"
+                };
+                var element = simpleIndicator.element;
+                timerService.setTimer(secondTimer);
+                var text = $('.indicator-text', element).text().trim();
+                expect(text).toEqual('Following timer ' + secondTimer.name);
+            });
+
         });
     });
 });