UX: Change category badge style to use stripes

app/assets/javascripts/discourse/components/category-drop.js.es6

@@ -1,11 +1,5 @@
-/**
+var get = Ember.get;
-  Renders a drop down for selecting a category
 
-  @class CategoryDropComponent
-  @extends Ember.Component
-  @namespace Discourse
-  @module Discourse
-**/
 export default Ember.Component.extend({
   classNameBindings: ['category::no-category', 'categories:has-drop'],
   tagName: 'li',
@@ -44,11 +38,20 @@ export default Ember.Component.extend({
 
   badgeStyle: function() {
     var category = this.get('category');
+
     if (category) {
-      return Discourse.HTML.categoryStyle(category);
+      var color = get(category, 'color'),
-    } else {
+          textColor = get(category, 'text_color');
-      return "background-color: #eee; color: #333";
+
+      if (color || textColor) {
+        var style = "";
+        if (color) { style += "background-color: #" + color + "; "; }
+        if (textColor) { style += "color: #" + textColor + "; "; }
+        return style;
+      }
     }
+
+    return "background-color: #eee; color: #333";
   }.property('category'),
 
   clickEventName: function() {

app/assets/javascripts/discourse/components/category-group.js.es6

@@ -1,3 +1,5 @@
+import { categoryBadgeHTML } from 'discourse/helpers/category-link';
+
 export default Ember.Component.extend({
 
   _initializeAutocomplete: function(){
@@ -25,7 +27,7 @@ export default Ember.Component.extend({
       },
       template: template,
       transformComplete: function(category) {
-        return Discourse.HTML.categoryBadge(category, {allowUncategorized: true});
+        return categoryBadgeHTML(category, {allowUncategorized: true});
       }
     });
   }.on('didInsertElement')

app/assets/javascripts/discourse/controllers/edit-category.js.es6

@@ -1,5 +1,6 @@
 import ModalFunctionality from 'discourse/mixins/modal-functionality';
 import ObjectController from 'discourse/controllers/object';
+import { categoryBadgeHTML } from 'discourse/helpers/category-link';
 
 // Modal for editing / creating a category
 export default ObjectController.extend(ModalFunctionality, {
@@ -69,7 +70,7 @@ export default ObjectController.extend(ModalFunctionality, {
       parent_category_id: parseInt(this.get('parent_category_id'),10),
       read_restricted: this.get('model.read_restricted')
     });
-    return Discourse.HTML.categoryBadge(c, {showParent: true, link: false});
+    return categoryBadgeHTML(c, {link: false});
   }.property('parent_category_id', 'categoryName', 'color', 'text_color'),
 
   // background colors are available as a pipe-separated string

app/assets/javascripts/discourse/controllers/history.js.es6

@@ -1,5 +1,6 @@
 import ModalFunctionality from 'discourse/mixins/modal-functionality';
 import ObjectController from 'discourse/controllers/object';
+import { categoryBadgeHTML } from 'discourse/helpers/category-link';
 
 // This controller handles displaying of history
 export default ObjectController.extend(ModalFunctionality, {
@@ -22,14 +23,14 @@ export default ObjectController.extend(ModalFunctionality, {
 
   hide: function(postId, postVersion) {
     var self = this;
-    Discourse.Post.hideRevision(postId, postVersion).then(function (result) {
+    Discourse.Post.hideRevision(postId, postVersion).then(function () {
       self.refresh(postId, postVersion);
     });
   },
 
   show: function(postId, postVersion) {
     var self = this;
-    Discourse.Post.showRevision(postId, postVersion).then(function (result) {
+    Discourse.Post.showRevision(postId, postVersion).then(function () {
       self.refresh(postId, postVersion);
     });
   },
@@ -68,7 +69,7 @@ export default ObjectController.extend(ModalFunctionality, {
     var changes = this.get("category_changes");
     if (changes) {
       var category = Discourse.Category.findById(changes["previous"]);
-      return Discourse.HTML.categoryBadge(category, { allowUncategorized: true });
+      return categoryBadgeHTML(category, { allowUncategorized: true });
     }
   }.property("category_changes"),
 
@@ -76,12 +77,12 @@ export default ObjectController.extend(ModalFunctionality, {
     var changes = this.get("category_changes");
     if (changes) {
       var category = Discourse.Category.findById(changes["current"]);
-      return Discourse.HTML.categoryBadge(category, { allowUncategorized: true });
+      return categoryBadgeHTML(category, { allowUncategorized: true });
     }
   }.property("category_changes"),
 
   wiki_diff: function() {
-    var changes = this.get("wiki_changes")
+    var changes = this.get("wiki_changes");
     if (changes) {
       return changes["current"] ?
              '<span class="fa-stack"><i class="fa fa-pencil-square-o fa-stack-2x"></i></span>' :
@@ -93,7 +94,7 @@ export default ObjectController.extend(ModalFunctionality, {
     var moderator = Discourse.Site.currentProp('post_types.moderator_action');
     var changes = this.get("post_type_changes");
     if (changes) {
-      return changes["current"] == moderator ?
+      return changes["current"] === moderator ?
              '<span class="fa-stack"><i class="fa fa-shield fa-stack-2x"></i></span>' :
              '<span class="fa-stack"><i class="fa fa-shield fa-stack-2x"></i><i class="fa fa-ban fa-stack-2x"></i></span>';
     }

app/assets/javascripts/discourse/helpers/category-link.js.es6

@@ -1,4 +1,63 @@
 import registerUnbound from 'discourse/helpers/register-unbound';
+import { iconHTML } from 'discourse/helpers/fa-icon';
+
+var get = Em.get,
+    escapeExpression = Handlebars.Utils.escapeExpression;
+
+function categoryStripe(tagName, category, extraClasses, href) {
+  if (!category) { return ""; }
+
+  var color = Em.get(category, 'color'),
+      style = color ? "style='background-color: #" + color + ";'" : "";
+
+  return "<" + tagName + " class='badge-category-parent" + extraClasses + "' " + style + " href=\"" + href + "\"></" + tagName + ">";
+}
+
+export function categoryBadgeHTML(category, opts) {
+  opts = opts || {};
+
+  if ((!category) ||
+        (!opts.allowUncategorized &&
+         Em.get(category, 'id') === Discourse.Site.currentProp("uncategorized_category_id") &&
+         Discourse.SiteSettings.suppress_uncategorized_badge
+        )
+     ) return "";
+
+  var description = get(category, 'description_text'),
+      restricted = get(category, 'read_restricted'),
+      url = Discourse.getURL("/c/") + Discourse.Category.slugFor(category),
+      href = (opts.link === false ? '' : url),
+      tagName = (opts.link === false || opts.link === "false" ? 'span' : 'a'),
+      extraClasses = (opts.extraClasses ? (' ' + opts.extraClasses) : '');
+
+  var html = "";
+
+  var parentCat = Discourse.Category.findById(category.get('parent_category_id'));
+  if (opts.hideParent) { parentCat = null; }
+  html += categoryStripe(tagName, parentCat, extraClasses, href);
+
+  if (parentCat !== category) {
+    html += categoryStripe(tagName, category, extraClasses, href);
+  }
+
+  var classNames = "badge-category clear-badge" + extraClasses;
+  if (restricted) { classNames += " restricted"; }
+
+  html += "<" + tagName + ' href="' + href + '" ' +
+             'data-drop-close="true" class="' + classNames + '"' +
+             (description ? 'title="' + escapeExpression(description) + '" ' : '') +
+          ">";
+
+  var name = escapeExpression(get(category, 'name'));
+  if (restricted) {
+    html += "<div>" + iconHTML('lock') + " " + name + "</div>";
+  } else {
+    html += name;
+  }
+  html += "</" + tagName + ">";
+
+  return "<span class='badge-wrapper'>" + html + "</span>";
+}
 
 export function categoryLinkHTML(category, options) {
   var categoryOptions = {};
@@ -9,12 +68,11 @@ export function categoryLinkHTML(category, options) {
 
   if (options) {
     if (options.allowUncategorized) { categoryOptions.allowUncategorized = true; }
-    if (options.showParent) { categoryOptions.showParent = true; }
-    if (options.onlyStripe) { categoryOptions.onlyStripe = true; }
     if (options.link !== undefined) { categoryOptions.link = options.link; }
     if (options.extraClasses) { categoryOptions.extraClasses = options.extraClasses; }
+    if (options.hideParent) { categoryOptions.hideParent = true; }
   }
-  return new Handlebars.SafeString(Discourse.HTML.categoryBadge(category, categoryOptions));
+  return new Handlebars.SafeString(categoryBadgeHTML(category, categoryOptions));
 }
 
 registerUnbound('category-link', categoryLinkHTML);

app/assets/javascripts/discourse/lib/html.js

@@ -1,11 +1,3 @@
-/**
-  Helpers to build HTML strings as well as custom fragments.
-
-  @class HTML
-  @namespace Discourse
-  @module Discourse
-**/
-
 var customizations = {};
 
 Discourse.HTML = {
@@ -15,9 +7,6 @@ Discourse.HTML = {
     using `setCustomHTML(key, html)`. This is used by a handlebars helper to find
     the HTML content it wants. It will also check the `PreloadStore` for any server
     side preloaded HTML.
-
-    @method getCustomHTML
-    @param {String} key to lookup
   **/
   getCustomHTML: function(key) {
     var c = customizations[key];
@@ -31,104 +20,9 @@ Discourse.HTML = {
     }
   },
 
-  /**
+  // Set a fragment of HTML by key. It can then be looked up with `getCustomHTML(key)`.
-    Set a fragment of HTML by key. It can then be looked up with `getCustomHTML(key)`.
-
-    @method setCustomHTML
-    @param {String} key to store the html
-    @param {String} html fragment to store
-  **/
   setCustomHTML: function(key, html) {
     customizations[key] = html;
-  },
-
-  /**
-    Returns the CSS styles for a category
-
-    @method categoryStyle
-    @param {Discourse.Category} category the category whose link we want
-  **/
-  categoryStyle: function(category) {
-    var color = Em.get(category, 'color'),
-        textColor = Em.get(category, 'text_color');
-
-    if (!color && !textColor) { return; }
-
-    // Add the custom style if we need to
-    var style = "";
-    if (color) { style += "background-color: #" + color + "; "; }
-    if (textColor) { style += "color: #" + textColor + "; "; }
-    return style;
-  },
-
-  /**
-    Create a category badge
-
-    @method categoryBadge
-    @param {Discourse.Category} category the category whose link we want
-    @param {Object} opts The options for the category link
-      @param {Boolean} opts.allowUncategorized Whether we allow rendering of the uncategorized category (default false)
-      @param {Boolean} opts.showParent Whether to visually show whether category is a sub-category (default false)
-      @param {Boolean} opts.link Whether this category badge should link to the category (default true)
-      @param {String}  opts.extraClasses add this string to the class attribute of the badge
-    @returns {String} the html category badge
-  **/
-  categoryBadge: function(category, opts) {
-    opts = opts || {};
-
-    if ((!category) ||
-          (!opts.allowUncategorized &&
-           Em.get(category, 'id') === Discourse.Site.currentProp("uncategorized_category_id") &&
-           Discourse.SiteSettings.suppress_uncategorized_badge
-          )
-       ) return "";
-
-    var name = Em.get(category, 'name'),
-        description = Em.get(category, 'description_text'),
-        restricted = Em.get(category, 'read_restricted'),
-        url = Discourse.getURL("/c/") + Discourse.Category.slugFor(category),
-        elem = (opts.link === false ? 'span' : 'a'),
-        extraClasses = (opts.extraClasses ? (' ' + opts.extraClasses) : ''),
-        html = "<" + elem + " href=\"" + (opts.link === false ? '' : url) + "\" ",
-        categoryStyle;
-
-    // Parent stripe implies onlyStripe
-    if (opts.onlyStripe) { opts.showParent = true; }
-
-    html += "data-drop-close=\"true\" class=\"badge-category" + (restricted ? ' restricted' : '' ) +
-            (opts.onlyStripe ? ' clear-badge' : '') +
-            extraClasses + "\" ";
-    name = Handlebars.Utils.escapeExpression(name);
-
-    // Add description if we have it, without tags. Server has sanitized the description value.
-    if (description) html += "title=\"" + Handlebars.Utils.escapeExpression(description) + "\" ";
-
-    if (!opts.onlyStripe) {
-      categoryStyle = Discourse.HTML.categoryStyle(category);
-      if (categoryStyle) {
-        html += "style=\"" + categoryStyle + "\" ";
-      }
-    }
-
-    if (restricted) {
-      html += "><div><i class='fa fa-lock'></i> " + name + "</div></" + elem + ">";
-    } else {
-      html += ">" + name + "</" + elem + ">";
-    }
-
-    if (opts.onlyStripe || (opts.showParent && category.get('parent_category_id'))) {
-      var parent = Discourse.Category.findById(category.get('parent_category_id'));
-      if (!parent) { parent = category; }
-
-      categoryStyle = Discourse.HTML.categoryStyle(opts.onlyStripe ? category : parent) || '';
-      html = "<span class='badge-wrapper'><" + elem + " class='badge-category-parent" + extraClasses + "' style=\"" + categoryStyle +
-             "\" href=\"" + (opts.link === false ? '' : url) + "\"><span class='category-name'>" +
-             (Em.get(parent, 'read_restricted') ? "<i class='fa fa-lock'></i> " : "") +
-             Em.get(parent, 'name') + "</span></" + elem + ">" +
-             html + "</span>";
-    }
-
-    return html;
   }
 
 };

app/assets/javascripts/discourse/models/category.js

@@ -232,6 +232,7 @@ Discourse.Category.reopenClass({
   },
 
   findById: function(id) {
+    if (!id) { return; }
     return Discourse.Category.idMap()[id];
   },
 

app/assets/javascripts/discourse/templates/category-group-autocomplete.raw.hbs

@@ -1,7 +1,7 @@
 <div class='autocomplete'>
   <ul>
     {{#each option in options}}
-      <li>{{category-link option allowUncategorized="true"}}</li>
+      <li>{{category-link option allowUncategorized="true" link="false"}}</li>
     {{/each}}
   </ul>
 </div>

app/assets/javascripts/discourse/templates/components/category-drop.hbs

@@ -1,27 +1,27 @@
 {{#if category}}
-  <a href="#" {{action "expand"}} class="badge-category" {{bind-attr style="badgeStyle"}}>
+  <a href {{action "expand"}} class="badge-category" {{bind-attr style="badgeStyle"}}>
     {{#if category.read_restricted}}
-      <i class='fa fa-lock'></i>
+      {{fa-icon "lock"}}
     {{/if}}
     {{category.name}}
   </a>
 {{else}}
   {{#if noSubcategories}}
-    <a href='#' {{action "expand"}} class='badge-category home' {{bind-attr style="badgeStyle"}}>{{i18n 'categories.no_subcategory'}}</a>
+    <a href {{action "expand"}} class='badge-category home' {{bind-attr style="badgeStyle"}}>{{i18n 'categories.no_subcategory'}}</a>
   {{else}}
-    <a href='#' {{action "expand"}} class='badge-category home' {{bind-attr style="badgeStyle"}}>{{allCategoriesLabel}}</a>
+    <a href {{action "expand"}} class='badge-category home' {{bind-attr style="badgeStyle"}}>{{allCategoriesLabel}}</a>
   {{/if}}
 {{/if}}
 
 {{#if categories}}
-  <a href='#' {{action "expand"}} {{bind-attr class="dropdownButtonClass" style="badgeStyle"}}><i {{bind-attr class="iconClass"}}></i></a>
+  <a href {{action "expand"}} {{bind-attr class="dropdownButtonClass" style="badgeStyle"}}><i {{bind-attr class="iconClass"}}></i></a>
   <section {{bind-attr class="expanded::hidden :category-dropdown-menu"}} class='chooser'>
     <div class='cat'><a {{bind-attr href=allCategoriesUrl}} data-drop-close="true" class='badge-category home'>{{allCategoriesLabel}}</a></div>
     {{#if subCategory}}
-    <div class='cat'><a {{bind-attr href=noCategoriesUrl}} data-drop-close="true" class='badge-category home'>{{i18n 'categories.no_subcategory'}}</a></div>
+      <div class='cat'><a {{bind-attr href=noCategoriesUrl}} data-drop-close="true" class='badge-category home'>{{i18n 'categories.no_subcategory'}}</a></div>
     {{/if}}
     {{#if renderCategories}}
-    {{#each c in categories}}<div class='cat'>{{category-link c allowUncategorized=true}}</div>{{/each}}
+      {{#each c in categories}}<div class='cat'>{{category-link c allowUncategorized=true hideParent=subCategory}}</div>{{/each}}
     {{/if}}
   </section>
 {{/if}}

app/assets/javascripts/discourse/templates/discovery/categories.hbs

@@ -32,7 +32,7 @@
               {{#if c.subcategories}}
                 <div class='subcategories'>
                   {{#each s in c.subcategories}}
-                    {{category-link s showParent="true" onlyStripe="true"}}
+                    {{category-link s hideParent="true"}}
                     {{#if s.unreadTopics}}
                       <a href={{unbound s.unreadUrl}} class='badge new-posts badge-notification' title='{{i18n 'topic.unread_topics' count=s.unreadTopics}}'>{{unbound s.unreadTopics}}</a>
                     {{/if}}

app/assets/javascripts/discourse/templates/header.hbs

@@ -113,9 +113,9 @@
               {{/if}}
             </h1>
             {{#if topic.category.parentCategory}}
-              {{bound-category-link topic.category.parentCategory onlyStripe="true"}}
+              {{bound-category-link topic.category.parentCategory}}
             {{/if}}
-            {{bound-category-link topic.category onlyStripe="true"}}
+            {{bound-category-link topic.category hideParent=true}}
           </div>
         </div>
       </div>

app/assets/javascripts/discourse/templates/list/category-column.raw.hbs

@@ -1 +1 @@
-<td class='category'>{{category-link category showParent="true"}}</td>
+<td class='category'>{{category-link category}}</td>

app/assets/javascripts/discourse/templates/mobile/components/basic-topic-list.hbs

@@ -32,7 +32,7 @@
               </div>
               {{#unless controller.hideCategory}}
                 <div class='category'>
-                  {{category-link t.category showParent="true"}}
+                  {{category-link t.category}}
                 </div>
               {{/unless}}
               {{#if controller.showParticipants}}

app/assets/javascripts/discourse/templates/mobile/discovery/categories.hbs

@@ -46,7 +46,7 @@
           <td>
             <div class='subcategories'>
               {{#each subcategory in c.subcategories}}
-                {{category-link subcategory showParent="true"}}
+                {{category-link subcategory}}
               {{/each}}
             </div>
           </td>

app/assets/javascripts/discourse/templates/mobile/list/topic_list_item.raw.hbs

@@ -11,7 +11,7 @@
 <div class="topic-item-stats clearfix">
   {{#unless controller.hideCategory}}
     <div class='category'>
-      {{category-link content.category showParent="true"}}
+      {{category-link content.category}}
     </div>
   {{/unless}}
 

app/assets/javascripts/discourse/templates/modal/edit-category-general.hbs

@@ -15,7 +15,7 @@
       {{#if subCategories}}
         <label>{{i18n 'categories.subcategories'}}</label>
         {{#each s in subCategories}}
-          {{category-badge s}}
+          {{category-badge s hideParent="true"}}
         {{/each}}
       {{else}}
         <label>{{i18n 'category.parent'}}</label>

app/assets/javascripts/discourse/templates/site-map.hbs

@@ -46,7 +46,7 @@
 
       {{#each c in categories itemController='site-map-category'}}
         <li class="category">
-          {{category-link c allowUncategorized="true" showParent="true"}}
+          {{category-link c allowUncategorized="true"}}
 
           {{#if c.unreadTotal}}
             <a href={{unbound c.url}} class='badge badge-notification'>{{c.unreadTotal}}</a>

app/assets/javascripts/discourse/templates/topic.hbs

@@ -46,7 +46,7 @@
               {{#if category.parentCategory}}
                 {{bound-category-link category.parentCategory}}
               {{/if}}
-              {{bound-category-link category}}
+              {{bound-category-link category hideParent=true}}
               {{plugin-outlet "topic-category"}}
             {{/unless}}
           {{/if}}

app/assets/javascripts/discourse/views/category-chooser.js.es6

@@ -1,6 +1,5 @@
 import ComboboxView from 'discourse/views/combo-box';
-
+import { categoryBadgeHTML } from 'discourse/helpers/category-link';
-var badgeHtml = Discourse.HTML.categoryBadge;
 
 export default ComboboxView.extend({
   classNames: ['combobox category-combobox'],
@@ -57,10 +56,10 @@ export default ComboboxView.extend({
     }
 
     if (!category) return item.text;
-    var result = badgeHtml(category, {showParent: false, link: false, allowUncategorized: true}),
+    var result = categoryBadgeHTML(category, {link: false, allowUncategorized: true, hideParent: true}),
         parentCategoryId = category.get('parent_category_id');
     if (parentCategoryId) {
-      result = badgeHtml(Discourse.Category.findById(parentCategoryId), {link: false}) + " " + result;
+      result = categoryBadgeHTML(Discourse.Category.findById(parentCategoryId), {link: false}) + " " + result;
     }
 
     result += " <span class='topic-count'>&times; " + category.get('topic_count') + "</span>";

app/assets/javascripts/discourse/views/topic.js.es6

@@ -1,5 +1,6 @@
 import AddCategoryClass from 'discourse/mixins/add-category-class';
 import { listenForViewEvent } from 'discourse/lib/app-events';
+import { categoryBadgeHTML } from 'discourse/helpers/category-link';
 
 var TopicView = Discourse.View.extend(AddCategoryClass, Discourse.Scrolling, {
   templateName: 'topic',
@@ -130,7 +131,7 @@ var TopicView = Discourse.View.extend(AddCategoryClass, Discourse.Scrolling, {
     }
 
     if (category) {
-      opts.catLink = Discourse.HTML.categoryBadge(category, {showParent: true});
+      opts.catLink = categoryBadgeHTML(category);
     } else {
       opts.catLink = "<a href=\"" + Discourse.getURL("/categories") + "\">" + I18n.t("topic.browse_all_categories") + "</a>";
     }

app/assets/stylesheets/common/base/_topic-list.scss

@@ -154,9 +154,9 @@
 }
 
 .list-controls {
-  .home {
+  .category-dropdown-menu .home {
-    background-color: scale-color-diff();
     color: $primary;
+    margin-left: 8px;
   }
   .badge-category {
     padding: 4px 10px;
@@ -164,6 +164,10 @@
     line-height: 24px;
     float: left;
   }
+
+  .category-dropdown-menu .badge-category {
+    width: 100%;
+  }
   .category-dropdown-button {
     border-left: 1px solid rgba(0,0,0,0.15);
     font-size: 1.143em;
@@ -223,18 +227,21 @@ ol.category-breadcrumb {
   background-color: $secondary;
   z-index: 100;
 
+  .cat {
+    margin-right: 20px;
+  }
+
+  a.badge-category, a.badge-category-parent {
+    line-height: 19px;
+    overflow:hidden;
+    margin-bottom: 0;
+  }
   a.badge-category {
     font-size: 0.929em;
     font-weight: bold;
     float: none;
-    line-height: 19px;
     text-transform: none;
-    width: 100%;
-    min-width: 102px;
-    margin-right: 20px;
-    margin-bottom: 0;
     max-width:200px;
-    overflow:hidden;
     text-overflow:ellipsis;
   }
 }

app/assets/stylesheets/common/components/badges.css.scss

@@ -28,9 +28,9 @@
 
 .badge-category {
   padding: 6px;
-  color: $secondary;
+  color: $primary;
   &[href] {
-  color: $secondary;
+  color: $primary;
   }
 }
 

app/assets/stylesheets/desktop/user.scss

@@ -402,6 +402,9 @@
 
 
   .user-stream {
+    .category {
+      margin-left: 3px;
+    }
     .excerpt {
       margin: 5px 0;
       font-size: 0.929em;

app/helpers/user_notifications_helper.rb

@@ -71,15 +71,8 @@ module UserNotificationsHelper
 
     category_url = "#{Discourse.base_url}#{category.url}"
 
-    if opts[:only_stripe]
+    result << "<a href='#{category_url}' style='background-color: ##{category.color}; font-size: 12px; padding: 2px 1px; font-weight: bold; margin: 0; width: 2px; white-space:nowrap;'>&nbsp;</a>"
-      result << "<a href='#{category_url}' style='background-color: ##{category.color}; font-size: 12px; padding: 2px 1px; font-weight: bold; margin: 0; width: 2px; white-space:nowrap;'>&nbsp;</a>"
+    result << "<a href='#{category_url}' style='font-size: 12px; font-weight: bold; margin-left: 3px; color: #222;'>#{category.name}</a>"
-      result << "<a href='#{category_url}' style='font-size: 12px; font-weight: bold; margin-left: 3px; color: #222;'>#{category.name}</a>"
-    else
-      if category.parent_category.present?
-        result << "<a href='#{category_url}' style='background-color: ##{category.parent_category.color}; font-size: 12px; padding: 4px 2px; font-weight: bold; margin: 0; width: 2px; white-space:nowrap;'>&nbsp;</a>"
-      end
-      result << "<a href='#{category_url}' style='background-color: ##{category.color}; color: ##{category.text_color}; font-size: 12px; padding: 4px 6px; font-weight: bold; margin: 0; white-space:nowrap;'>#{category.name}</a>"
-    end
 
     result.html_safe
   end

app/views/user_notifications/digest.html.erb

@@ -45,7 +45,7 @@
           <li>
             <%= link_to t.title, "#{Discourse.base_url}#{t.relative_url}" %>
             <span class='post-count'><%= t('user_notifications.digest.posts', count: t.posts_count) %></span>
-            <%= email_category(t.category, only_stripe: true) %>
+            <%= email_category(t.category) %>
           </li>
         </ul>
       <%- end -%>

test/javascripts/lib/category-badge-test.js.es6

@@ -0,0 +1,41 @@
+module("categoryBadgeHTML");
+
+import { categoryBadgeHTML } from "discourse/helpers/category-link";
+
+test("categoryBadge without a category", function() {
+  blank(categoryBadgeHTML(), "it returns no HTML");
+});
+
+test("Regular categoryBadge", function() {
+  var category = Discourse.Category.create({
+        name: 'hello',
+        id: 123,
+        description_text: 'cool description',
+        color: 'ff0',
+        text_color: 'f00'
+      }),
+      tag = parseHTML(categoryBadgeHTML(category))[0];
+
+  equal(tag.name, 'span', 'it creates a `span` wrapper tag');
+  equal(tag.attributes['class'], 'badge-wrapper', 'it has the correct class');
+
+  var label = tag.children[1];
+  equal(label.attributes.title, 'cool description', 'it has the correct title');
+
+  equal(label.children[0].data, 'hello', 'it has the category name');
+});
+
+test("undefined color", function() {
+  var noColor = Discourse.Category.create({ name: 'hello', id: 123 }),
+      tag = parseHTML(categoryBadgeHTML(noColor))[0];
+
+  blank(tag.attributes.style, "it has no color style because there are no colors");
+});
+
+test("allowUncategorized", function() {
+  var uncategorized = Discourse.Category.create({name: 'uncategorized', id: 345});
+  sandbox.stub(Discourse.Site, 'currentProp').withArgs('uncategorized_category_id').returns(345);
+
+  blank(categoryBadgeHTML(uncategorized), "it doesn't return HTML for uncategorized by default");
+  present(categoryBadgeHTML(uncategorized, {allowUncategorized: true}), "it returns HTML");
+});

test/javascripts/lib/html-test.js.es6

@@ -2,46 +2,6 @@ module("Discourse.HTML");
 
 var html = Discourse.HTML;
 
-test("categoryBadge without a category", function() {
-  blank(html.categoryBadge(), "it returns no HTML");
-});
-
-test("Regular categoryBadge", function() {
-  var category = Discourse.Category.create({
-        name: 'hello',
-        id: 123,
-        description_text: 'cool description',
-        color: 'ff0',
-        text_color: 'f00'
-      }),
-      tag = parseHTML(html.categoryBadge(category))[0];
-
-  equal(tag.name, 'a', 'it creates an `a` tag');
-  equal(tag.attributes['class'], 'badge-category', 'it has the correct class');
-  equal(tag.attributes.title, 'cool description', 'it has the correct title');
-
-  ok(tag.attributes.style.indexOf('#ff0') !== -1, "it has the color style");
-  ok(tag.attributes.style.indexOf('#f00') !== -1, "it has the textColor style");
-
-  equal(tag.children[0].data, 'hello', 'it has the category name');
-});
-
-test("undefined color", function() {
-  var noColor = Discourse.Category.create({ name: 'hello', id: 123 }),
-      tag = parseHTML(html.categoryBadge(noColor))[0];
-
-  blank(tag.attributes.style, "it has no color style because there are no colors");
-});
-
-test("allowUncategorized", function() {
-  var uncategorized = Discourse.Category.create({name: 'uncategorized', id: 345});
-  sandbox.stub(Discourse.Site, 'currentProp').withArgs('uncategorized_category_id').returns(345);
-
-  blank(html.categoryBadge(uncategorized), "it doesn't return HTML for uncategorized by default");
-  present(html.categoryBadge(uncategorized, {allowUncategorized: true}), "it returns HTML");
-});
-
-
 test("customHTML", function() {
   blank(html.getCustomHTML('evil'), "there is no custom HTML for a key by default");