feat(security badge): add a security badge to api docs. Only appears if @security is present in angular2

public/_includes/_hero.jade

@@ -20,6 +20,9 @@ header(class="hero background-sky")
           // badge circle is filled based on stability by matching a css selector in _hero.scss
           span(class="status-circle status-#{stability}")
           span Stability: #{capitalize(stability)}
+      if security
+        span(class="status-badge security-risk-badge").
+          Security Risk
 
   if subtitle
     h2.hero-subtitle.text-subhead #{subtitle}

public/resources/css/module/_hero.scss

@@ -83,9 +83,18 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 7);
         margin-left: 0;
       }
     }
+
+    .security-risk-badge {
+      background-color: #FFF59D;
+    }
   }
 
   @media screen and (max-width: 599px) {
+    /* three items */
+    .badges .status-badge:nth-child(3) {
+      margin-left: 0;
+      margin-top: 4px;
+    }
 
     .hero-title-with-badges {
       margin-bottom: $unit * 2;

tools/api-builder/angular.io-package/processors/addJadeDataDocsProcessor.js

@@ -75,7 +75,7 @@ module.exports = function addJadeDataDocsProcessor() {
             } else if (_.has(exportDoc, 'deprecated')) {
               stability = 'deprecated';
             }
-
+            
             var howToUse = '';
             if(_.has(exportDoc, 'howToUse')) {
               var howToUseArray = exportDoc.tags.tags.filter(function(tag) {
@@ -96,6 +96,16 @@ module.exports = function addJadeDataDocsProcessor() {
               whatItDoes = whatItDoesArray[0].description.replace(/(\r\n|\n|\r)/gm,"");
             }
 
+            // SECURITY STATUS
+            // Supported tags:
+            // @security
+            // Default is no security risk assessed for api
+            var security = false;
+            if (_.has(exportDoc, 'security')) {
+              security = true;
+            }
+
+            // Data inserted into jade-data.template.html
             var dataDoc = {
               name: exportDoc.name + '-' + exportDoc.docType,
               title: exportDoc.name,
@@ -103,7 +113,8 @@ module.exports = function addJadeDataDocsProcessor() {
               exportDoc: exportDoc,
               stability: stability,
               howToUse: howToUse,
-              whatItDoes: whatItDoes
+              whatItDoes: whatItDoes,
+              security: security
             };
 
             if (exportDoc.symbolTypeName) dataDoc.varType = titleCase(exportDoc.symbolTypeName);

tools/api-builder/angular.io-package/tag-defs/index.js

@@ -6,4 +6,5 @@ module.exports = [
   require('./stable'),
   require('./experimental'),
   require('./docsNotRequired'),
+  require('./security'),
 ];

tools/api-builder/angular.io-package/tag-defs/security.js

@@ -0,0 +1,5 @@
+module.exports = function() {
+  return {
+    name: 'security'
+  };
+};

tools/api-builder/angular.io-package/templates/jade-data.template.html

@@ -15,6 +15,9 @@
     {%- if item.stability %}
     "stability" : "{$ item.stability $}",
     {%- endif %}
+    {%- if item.security %}
+    "security" : "{$ item.security $}",
+    {%- endif %}
     "docType": "{$ item.docType $}"
   }{% if not loop.last %},{% endif %}
 {% endfor -%}