Improve the UI for the rules documentation (#2275)

* Improve the UI for the rules documentation & add "feature" badges for each listed rule

docs/_includes/rule_list.html

@@ -1,6 +1,21 @@
-<ul>
+<ul class="rules-list">
  {% assign rules = site.data.rules | where: "type",include.ruleType | sort: "name" %}
  {% for rule in rules %}
-  <li><a href="{{rule.ruleName}}">{{rule.ruleName}}</a> - {{rule.description | markdownify | remove:"<p>" | remove: "</p>"}}</li>
+  <li>
+      <a href="{{rule.ruleName}}">
+        <div class="rule-features">
+            {% if rule.typescriptOnly %}
+                <span class="feature feature-sm feature-ts-only" title="This rule cannot be run against JavaScript files">TS Only</span>
+            {% endif %}
+            {% if rule.hasFix %}
+                <span class="feature feature-sm feature-fixer" title="This rule has the ability to auto-fix violations">Has Fixer</span>
+            {% endif %}
+            {% if rule.requiresTypeInfo %}
+                <span class="feature feature-sm feature-requires-type-info" title="This rule requires type information to run">Requires Type Info</span>
+            {% endif %}
+        </div>
+        <strong>{{rule.ruleName}}</strong> - {{rule.description | markdownify | remove:"<p>" | remove: "</p>"}}
+      </a>
+  </li>
  {% endfor %}
 </ul>

docs/_layouts/rule.html

@@ -9,11 +9,21 @@
    <h5>Rationale</h5>
    {{page.rationale | markdownify}}
 {% endif %}
-{% if page.requiresTypeInfo %}
-   <strong>Note:</strong>
-   <a href="https://github.com/palantir/tslint#type-checking">This rule requires type info to run</a>
-{% endif %}
 
+{% if page.typescriptOnly or page.hasFix or page.requiresTypeInfo %}
+   <h5>Notes: </h5>
+    <div class="rule-features">
+        {% if page.typescriptOnly %}
+            <span class="feature feature-ts-only" title="This rule cannot be run against JavaScript files">TS Only</span>
+        {% endif %}
+        {% if page.hasFix %}
+            <span class="feature feature-fixer" title="This rule has the ability to auto-fix violations">Has Fixer</span>
+        {% endif %}
+        {% if page.requiresTypeInfo %}
+            <a class="feature feature-requires-type-info" href="https://github.com/palantir/tslint#type-checking" title="This rule requires type information to run. Click to learn more.">Requires Type Info</a>
+        {% endif %}
+    </div>
+{% endif %}
 
 <h3>Config</h3>
 {{page.optionsDescription | markdownify}}

docs/_sass/_base.scss

@@ -70,3 +70,106 @@ figcaption {
         }
     }
 }
+
+
+/**
+ * Rules & Feature Badges
+ */
+ .rules-list {
+    list-style: none;
+    margin: 0 !important; //need to override the `main-content ul` selector
+
+    > li {
+        &:nth-child(odd) {
+            a {
+                background-color: rgba(0, 0, 0, .03);
+            }
+        }
+
+        a {
+            display: block;
+            border-left: 3px solid transparent;
+            text-decoration: none;
+            padding: .75rem;
+
+            &:hover {
+                background-color: rgba(0, 0, 0,.075);
+                border-left-color: #159957;
+            }
+        }
+    }
+ }
+
+ .rule-features {
+     //This is the container for a list of feature badges
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+ }
+
+ .feature {
+     //This is the setup for the a feature badge
+    display: inline-block;
+    margin-right: 2px;
+    padding: 2px 4px;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border: 1px solid transparent;
+    border-radius: .25rem;
+    cursor: help;
+
+    &:before {
+        //This is the setup for the icon that appears inside the badge
+        display: inline-block;
+        margin-right: 2px;
+    }
+
+    &.feature-sm {
+        //This class is added to make the feature badge smaller.  This is used on the rules list
+        padding: 1px 3px;
+        font-size: 75%;
+    }
+
+    &.feature-ts-only {
+        //This feature badge is added to rules that are "TypeScript Only"
+        background-color: #FCF8E3;
+        border-color: #FAF2CC;
+        color: #8A6D3B;
+
+        &:before {
+            content: "\1F4C4"; //"page facing up" icon - http://www.fileformat.info/info/unicode/char/1F4C4/index.htm
+        }
+    }
+
+    &.feature-fixer {
+        //This feature badge is added to rules that have an auto-fixer
+        background-color: #DFF0D8;
+        border-color: #D0E9C6;
+        color: #3C763D;
+
+        &:before {
+            content: "\1f527"; //"wrench" icon - http://www.fileformat.info/info/unicode/char/1f527/index.htm
+        }
+    }
+
+    &.feature-requires-type-info {
+        //This feature badge is added to rules that require type information
+        background-color: #F2DEDE;
+        border-color: #EBCCCC;
+        color: #A94442;
+
+        &:before {
+            content: "\2139"; //"information source" icon - http://www.fileformat.info/info/unicode/char/2139/index.htm
+            //Surround it with a blue circle
+            border-radius: 50%;
+            background: #0078D7;
+            color: #FFF;
+            width: 1em;
+        }
+    }
+ }

src/rules/completedDocsRule.ts

@@ -140,8 +140,8 @@ export class Rule extends Lint.Rules.TypedRule {
         ruleName: "completed-docs",
         description: "Enforces documentation for important items be filled out.",
         optionsDescription: Lint.Utils.dedent`
-             \`true\` to enable for ["${ARGUMENT_CLASSES}", "${ARGUMENT_FUNCTIONS}", "${ARGUMENT_METHODS}", "${ARGUMENT_PROPERTIES}"],
-             or an array with each item in one of two formats:
+            \`true\` to enable for ["${ARGUMENT_CLASSES}", "${ARGUMENT_FUNCTIONS}", "${ARGUMENT_METHODS}", "${ARGUMENT_PROPERTIES}"],
+            or an array with each item in one of two formats:
 
             * \`string\` to enable for that type
             * \`object\` keying types to when their documentation is required: