Harmonize classnames

plugins/talk-plugin-featured-comments/client/components/Button.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 import styles from './Button.css';
-import {name} from '../../package.json';
+import {pluginName} from '../../package.json';
 import {can} from 'plugin-api/beta/client/services';
 import {withTags} from 'plugin-api/beta/client/hocs';
 import {Icon} from 'plugin-api/beta/client/components/ui';
@@ -11,7 +11,7 @@ const Button = (props) => {
 
   return can(user, 'MODERATE_COMMENTS') ? (
     <button
-      className={cn([name, styles.button, {[styles.featured] : alreadyTagged}])}
+      className={cn([`${pluginName}-tag-button`, styles.button, {[styles.featured] : alreadyTagged}])}
       onClick={alreadyTagged ? deleteTag : postTag} >
 
       {alreadyTagged ?

plugins/talk-plugin-featured-comments/client/components/Comment.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import cn from 'classnames';
 import styles from './Comment.css';
-import {name} from '../../package.json';
 import {t, timeago} from 'plugin-api/beta/client/services';
 import {Slot} from 'plugin-api/beta/client/components';
 import {Icon} from 'plugin-api/beta/client/components/ui';
+import {pluginName} from '../../package.json';
 
 class Comment extends React.Component {
 
@@ -15,23 +15,23 @@ class Comment extends React.Component {
   render() {
     const {comment, asset, root, data} = this.props;
     return (
-      <div className={cn(styles.featuredComment, `${name}__featured-comment`)}>
+      <div className={cn(styles.featuredComment, `${pluginName}-comment`)}>
 
-        <blockquote className={cn(styles.quote, `${name}__featured-comment__comment-body`)}>
+        <blockquote className={cn(styles.quote, `${pluginName}-comment-body`)}>
           {comment.body}
         </blockquote>
 
-        <div className={cn(`${name}__featured-comment__username-box`)}>
-          <strong className={cn(styles.username, `${name}__featured-comment__username`)}>
+        <div className={cn(`${pluginName}-comment-username-box`)}>
+          <strong className={cn(styles.username, `${pluginName}-comment-username`)}>
             {comment.user.username}
           </strong>
-          <span className={cn(styles.timeago, `${name}__featured-comment__timeago`)}>
+          <span className={cn(styles.timeago, `${pluginName}-comment-timeago`)}>
             ,{' '}{timeago(comment.created_at)}
           </span>
         </div>
 
-        <footer className={cn(styles.footer, `${name}__featured-comment__footer`)}>
-          <div className={cn(styles.reactionsContainer, `${name}__featured-comment__reactions`)}>
+        <footer className={cn(styles.footer, `${pluginName}-comment-footer`)}>
+          <div className={cn(styles.reactionsContainer, `${pluginName}-comment-reactions`)}>
 
             <Slot
               fill="commentReactions"
@@ -42,8 +42,8 @@ class Comment extends React.Component {
               inline
             />
           </div>
-          <div className={cn(styles.actionsContainer, `${name}__featured-comment__actions`)}>
-            <a className={cn(styles.goTo, `${name}__featured-comment__go-to`)}
+          <div className={cn(styles.actionsContainer, `${pluginName}-comment-actions`)}>
+            <a className={cn(styles.goTo, `${pluginName}-comment-go-to`)}
               onClick={this.viewComment}>
               <Icon name="forum" className={styles.repliesIcon} /> {comment.replyCount} | {t('talk-plugin-featured-comments.go_to_conversation')} <Icon name="keyboard_arrow_right" className={styles.goToIcon} />
             </a>

plugins/talk-plugin-featured-comments/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@coralproject/talk-plugin-featured-comments",
+  "pluginName": "talk-plugin-featured-comments",
   "version": "0.0.1",
   "description": "Provides support for featured comments",
   "main": "index.js",