Merge f5175b7 into e55953c

demo/index.html

@@ -65,6 +65,7 @@
     <script src="scripts/rxStyleguide.js"></script>
     <script src="scripts/rxExample.js"></script>
     <script src="scripts/rxPermalink.js"></script>
+    <script src="scripts/rxStability.js"></script>
     <!-- controllers -->
     <script src="scripts/layout/page/layoutDataTableController.js"></script>
     <script src="scripts/layout/page/layoutRadioOptionTableController.js"></script>

demo/less/_rxStability.less

@@ -0,0 +1,33 @@
+.rxStability {
+  &__pill {
+    font-size: 9px;
+    font-weight: 600;
+    text-transform: uppercase;
+    display: inline-block;
+    padding: 2px 10px;
+    border-radius: 12px;
+    vertical-align: top;
+    background-color: @gray-500;
+    color: @black;
+
+    &--prototype {
+      background-color: @orange-500;
+      color: @gray-950;
+    }
+
+    &--deprecated {
+      background-color: @red-500;
+      color: @white;
+    }
+
+    &--stable {
+      background-color: @green-500;
+      color: @white;
+    }
+  }
+  .tooltip-inner {
+    font-size: 13px;
+    text-align: left;
+    max-width: 300px;
+  }
+}

demo/less/demoApp.less

@@ -3,6 +3,7 @@
 @import "_palette";
 @import "_rxExample";
 @import "_rxPermalink";
+@import "_rxStability";
 
 /* TODO: (deprecated) remove with last of components */
 .module-description {
@@ -93,13 +94,12 @@
       cursor: pointer;
 
       &.column {
-        &.category {
-          width: 120px;
-        }
-
         &.stability {
           width: 120px;
         }
+        &.category {
+          width: 100px;
+        }
       }
     }
     td,

demo/scripts/rxStability.js

@@ -0,0 +1,27 @@
+angular.module('demoApp')
+.directive('rxStability', function () {
+    return {
+        restrict: 'E',
+        templateUrl: 'templates/rx-stability.html',
+        scope: {
+            stability: '='
+        },
+        transclude: true,
+        link: function (scope) {
+            scope.tooltips = {
+                'prototype': [
+                    '<b>Unstable API</b>',
+                    'Consistent functionality is not guaranteed.'
+                ],
+                'deprecated': [
+                    '<b>Stop Using!</b>',
+                    'This item will be removed in a future release.'
+                ],
+                'stable': [
+                    '<b>Feature Complete</b>',
+                    'This item is ready to use.'
+                ]
+            };
+        }
+    };
+});

demo/templates/modules/listCategoryModules.html

@@ -14,24 +14,22 @@
           </th>
         </tr>
         <tr>
-          <th class="column name" ng-click="vm.sortColumn('displayName')">Name
-            <span ng-show="vm.showCaret('displayName')" ng-class="vm.getCaretType()"></span>
-          </th>
           <th class="column stability" ng-click="vm.sortColumn('stability')">Stability
             <span ng-show="vm.showCaret('stability')" ng-class="vm.getCaretType()"></span>
           </th>
+          <th class="column name" ng-click="vm.sortColumn('displayName')">Name
+            <span ng-show="vm.showCaret('displayName')" ng-class="vm.getCaretType()"></span>
+          </th>
         </tr>
       </thead>
       <tbody>
         <tr ng-if="vm.modules.length" ng-repeat="module in vm.modules | categoryModulesFilter:searchText | orderBy:vm.sortKey:vm.sortReverse">
+          <td class="column stability">
+            <rx-stability stability="module.stability"></rx-stability>
+          </td>
           <td class="column name">
             <a href="#/{{vm.category}}/{{module.name}}">{{ module.displayName }}</a>
           </td>
-          <td class="column stability">
-            <span ng-if="module.stability">
-              <img ng-src="http://badges.github.io/stability-badges/dist/{{module.stability}}.svg"></img>
-            </span>
-          </td>
         </tr>
         <tr ng-if="!vm.modules.length">
           <td colspan="10">No {{vm.category}} were found.</td>

demo/templates/modules/listModules.html

@@ -11,27 +11,25 @@
           </th>
         </tr>
         <tr>
-          <th class="column name" ng-click="vm.sortColumn('displayName')">Name
-            <span ng-show="vm.showCaret('displayName')" ng-class="vm.getCaretType()"></span>
-          </th>
           <th class="column stability" ng-click="vm.sortColumn('stability')">Stability
             <span ng-show="vm.showCaret('stability')" ng-class="vm.getCaretType()"></span>
           </th>
+          <th class="column name" ng-click="vm.sortColumn('displayName')">Name
+            <span ng-show="vm.showCaret('displayName')" ng-class="vm.getCaretType()"></span>
+          </th>
           <th class="column category" ng-click="vm.sortColumn('category')">Category
             <span ng-show="vm.showCaret('category')" ng-class="vm.getCaretType()"></span>
           </th>
         </tr>
       </thead>
       <tbody>
         <tr ng-if="vm.modules.length" ng-repeat="module in vm.modules | modulesFilter:searchText | orderBy:vm.sortKey:vm.sortReverse">
+          <td class="column stability">
+            <rx-stability stability="module.stability"></rx-stability>
+          </td>
           <td class="column name">
             <a href="#/{{module.category}}/{{module.name}}">{{ module.displayName }}</a>
           </td>
-          <td class="column stability">
-            <span ng-if="module.stability">
-              <img ng-src="http://badges.github.io/stability-badges/dist/{{module.stability}}.svg"></img>
-            </span>
-          </td>
           <td><a href="#/{{module.category}}">{{module.category | rxCapitalize}}</a></td>
         </tr>
         <tr ng-if="!vm.modules.length">

demo/templates/modules/showModule.html

@@ -1,9 +1,7 @@
 <rx-page title="module.displayName" class="{{module.name}}-demo">
   <div layout="row" layout-align="middle">
     <div flex>
-      <img ng-if="module.stability"
-        alt="stability is {{module.stability}}"
-        ng-src="http://badges.github.io/stability-badges/dist/{{module.stability}}.svg" />
+      <rx-stability stability="module.stability"></rx-stability>
     </div>
 
     <div flex class="align-right">

demo/templates/rx-stability.html

@@ -0,0 +1,8 @@
+<div class="rxStability">
+  <div 
+    class="rxStability__pill rxStability__pill--{{stability}}" 
+    tooltip-html="tooltips[stability].join('<br />')"
+    tooltip-placement="right">
+    {{stability}}
+  </div>
+</div>

src/components/rxApp/docs/rxApp.meta.json

@@ -1,6 +1,6 @@
 {
     "displayName": "rxApp",
-    "stability": "unstable",
+    "stability": "stable",
     "description": "",
     "isLegacy": true,
     "keywords": []

src/components/rxOptionTable/docs/rxOptionTable.meta.json

@@ -1,6 +1,6 @@
 {
     "displayName": "rxOptionTable",
-    "stability": "unstable",
+    "stability": "prototype",
     "description": "",
     "isLegacy": true,
     "keywords": []

src/elements/Buttons/docs/Buttons.meta.json

@@ -1,6 +1,6 @@
 {
     "displayName": "Buttons",
-    "stability": "unstable",
+    "stability": "stable",
     "description": "Several examples and styles of Buttons available for different contexts.",
     "api": "directive:rxButton",
     "keywords": [

src/elements/Copy/docs/Copy.meta.json

@@ -1,6 +1,6 @@
 {
     "displayName": "Copy",
-    "stability": "experimental",
+    "stability": "prototype",
     "description": "Element to aid in copying text to the system clipboard",
     "api": "directive:rxCopy",
     "keywords": [

src/elements/Links/docs/Links.meta.json

@@ -1,6 +1,6 @@
 {
     "displayName": "Links",
-    "stability": "unstable",
+    "stability": "stable",
     "description": "Usage and examples of different link and status message patterns.",
     "hasApi": false,
     "keywords": [

src/elements/Lists/docs/Lists.meta.json

@@ -1,6 +1,6 @@
 {
     "displayName": "Lists",
-    "stability": "unstable",
+    "stability": "stable",
     "description": "Usage and examples of different List patterns.",
     "hasApi": false,
     "keywords": [

src/elements/Progressbar/docs/Progressbar.meta.json

@@ -1,6 +1,6 @@
 {
     "displayName": "Progress Bars",
-    "stability": "experimental",
+    "stability": "prototype",
     "description": "Provides feedback on the progress of a workflow or action",
     "api": "directive:rxProgressbar",
     "keywords": [

src/utilities/Auth/docs/Auth.meta.json

@@ -1,6 +1,6 @@
 {
     "displayName": "Auth",
-    "stability": "unstable",
+    "stability": "stable",
     "description": "Provides logic for authenticating, validating permissions, and managing sessions.",
     "api": "service:Auth",
     "keywords": []

src/utilities/Environment/docs/Environment.meta.json

@@ -1,6 +1,6 @@
 {
     "displayName": "Environment",
-    "stability": "unstable",
+    "stability": "stable",
     "description": "Allows environments to be defined, and retrieving the current environment based on location.",
     "api": "service:Environment",
     "keywords": []

src/utilities/Identity/docs/Identity.meta.json

@@ -1,6 +1,6 @@
 {
     "displayName": "Identity",
-    "stability": "unstable",
+    "stability": "stable",
     "description": "This is a component designed to aid interaction with Rackspace's Identity API.",
     "api": "service:Identity",
     "keywords": []

src/utilities/NotifyProperties/docs/NotifyProperties.meta.json

@@ -1,6 +1,6 @@
 {
     "displayName": "NotifyProperties",
-    "stability": "experimental",
+    "stability": "prototype",
     "description": "Provides a registration service for directive, controller, or other service notification updates.",
     "api": "service:NotifyProperties",
     "keywords": []

src/utilities/Permission/docs/Permission.meta.json

@@ -1,6 +1,6 @@
 {
     "displayName": "Permission",
-    "stability": "unstable",
+    "stability": "stable",
     "description": "Simple service for accessing roles and permissions for a user.",
     "api": "service:Permission",
     "keywords": []

src/utilities/SelectFilter/docs/SelectFilter.meta.json

@@ -1,6 +1,6 @@
 {
     "displayName": "SelectFilter",
-    "stability": "experimental",
+    "stability": "prototype",
     "description": "A prototype for creating objects that can be used for filtering arrays.",
     "api": "service:SelectFilter",
     "keywords": []

src/utilities/Session/docs/Session.meta.json

@@ -1,6 +1,6 @@
 {
     "displayName": "Session",
-    "stability": "unstable",
+    "stability": "stable",
     "description": "Manages user session",
     "api": "service:Session",
     "keywords": []

src/utilities/SessionStorage/docs/SessionStorage.meta.json

@@ -1,6 +1,6 @@
 {
     "displayName": "SessionStorage",
-    "stability": "unstable",
+    "stability": "stable",
     "description": "",
     "keywords": []
 }

src/utilities/TokenInterceptor/docs/TokenInterceptor.meta.json

@@ -1,6 +1,6 @@
 {
     "displayName": "TokenInterceptor",
-    "stability": "unstable",
+    "stability": "stable",
     "description": "Adds an authorization token to all HTTP requests, which allows access to system services.",
     "api": "service:TokenInterceptor",
     "keywords": []

src/utilities/UnauthorizedInterceptor/docs/UnauthorizedInterceptor.meta.json

@@ -1,6 +1,6 @@
 {
     "displayName": "UnauthorizedInterceptor",
-    "stability": "unstable",
+    "stability": "stable",
     "description": "Redirects users to the login page, when user authentication fails during a system service request.",
     "api": "service:UnauthorizedInterceptor",
     "keywords": []

src/utilities/UtcOffsets/docs/UtcOffsets.meta.json

@@ -1,6 +1,6 @@
 {
     "displayName": "UtcOffsets",
-    "stability": "experimental",
+    "stability": "prototype",
     "description": "List of known UTC offset values",
     "api": "constant:UtcOffsets",
     "keywords": []

src/utilities/encoreRoutes/docs/encoreRoutes.meta.json

@@ -1,6 +1,6 @@
 {
     "displayName": "encoreRoutes",
-    "stability": "unstable",
+    "stability": "stable",
     "description": "Allows apps to make updates to the navigation.",
     "api": "service:encoreRoutes",
     "keywords": []

src/utilities/feedbackTypes/docs/feedbackTypes.meta.json

@@ -1,6 +1,6 @@
 {
     "displayName": "feedbackTypes",
-    "stability": "unstable",
+    "stability": "stable",
     "description": "Provides default feedback types with placeholder text.",
     "api": "value:feedbackTypes",
     "keywords": []

src/utilities/hotkeys/docs/hotkeys.meta.json

@@ -1,6 +1,6 @@
 {
     "displayName": "hotkeys",
-    "stability": "unstable",
+    "stability": "stable",
     "description": "",
     "api": "service:hotkeys",
     "keywords": []

src/utilities/rxAppRoutes/docs/rxAppRoutes.meta.json

@@ -1,6 +1,6 @@
 {
     "displayName": "rxAppRoutes",
-    "stability": "unstable",
+    "stability": "stable",
     "description": "Manage application routes and states of routes.",
     "api": "service:rxAppRoutes",
     "keywords": []

src/utilities/rxApply/docs/rxApply.meta.json

@@ -1,6 +1,6 @@
 {
     "displayName": "rxApply",
-    "stability": "experimental",
+    "stability": "prototype",
     "description": "Used to apply an instance of SelectFilter to an array.",
     "api": "filter:rxApply",
     "keywords": [

src/utilities/rxAttributes/docs/rxAttributes.meta.json

@@ -1,6 +1,6 @@
 {
     "displayName": "rxAttributes",
-    "stability": "unstable",
+    "stability": "stable",
     "description": "used to add attributes based on scope values.",
     "api": "directive:rxAttributes",
     "keywords": [

src/utilities/rxAutoSave/docs/rxAutoSave.meta.json

@@ -1,6 +1,6 @@
 {
     "displayName": "rxAutoSave",
-    "stability": "unstable",
+    "stability": "stable",
     "description": "Service to help automatically save/load form data.",
     "api": "service:rxAutoSave",
     "keywords": []

src/utilities/rxBreadcrumbsSvc/docs/rxBreadcrumbsSvc.meta.json

@@ -1,6 +1,6 @@
 {
     "displayName": "rxBreadcrumbsSvc",
-    "stability": "unstable",
+    "stability": "stable",
     "description": "",
     "api": "service:rxBreadcrumbsSvc",
     "keywords": []

src/utilities/rxBulkSelectController/docs/rxBulkSelectController.meta.json

@@ -1,6 +1,6 @@
 {
     "displayName": "rxBulkSelectController",
-    "stability": "experimental",
+    "stability": "prototype",
     "description": "Provides controller logic for rxBulkSelect",
     "api": "controller:rxBulkSelectController",
     "keywords": []