Add group name classes to tag page so groups can be hidden with CSS (#8118)

Add group name classes to tag page so groups can be hidden with CSS (#8118)

diff --git a/app/assets/javascripts/discourse/components/tag-list.js.es6 b/app/assets/javascripts/discourse/components/tag-list.js.es6
index a6578bb398..e703a1801d 100644
--- a/app/assets/javascripts/discourse/components/tag-list.js.es6
+++ b/app/assets/javascripts/discourse/components/tag-list.js.es6
@@ -1,7 +1,7 @@
 import computed from "ember-addons/ember-computed-decorators";
 
 export default Ember.Component.extend({
-  classNameBindings: [":tag-list", "categoryClass"],
+  classNameBindings: [":tag-list", "categoryClass", "tagGroupNameClass"],
 
   isPrivateMessage: false,
   sortedTags: Ember.computed.sort("tags", "sortProperties"),
@@ -19,5 +19,16 @@ export default Ember.Component.extend({
   @computed("category.fullSlug")
   categoryClass(slug) {
     return slug && `tag-list-${slug}`;
+  },
+
+  @computed("tagGroupName")
+  tagGroupNameClass(groupName) {
+    if (groupName) {
+      groupName = groupName
+        .replace(/\s+/g, "-")
+        .replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, "")
+        .toLowerCase();
+      return groupName && `tag-group-${groupName}`;
+    }
   }
 });

GitHub sha: 56862f61