[IN-219][Reviews] Ember-Component-CSS -> Ember-CSS-Modules (#140)

* [IN-219][Feature] Ember-Component-CSS -> Ember-CSS-Modules

* Fix final style bits

* Fix tests

.eslintrc.js

@@ -4,4 +4,10 @@ module.exports = {
     globals: {
         MathJax: true
     },
+    rules: {
+        'ember/avoid-leaking-state-in-components': ['error', [
+            'localClassNames',
+            'localClassNameBindings',
+        ]],
+    },
 };

.stylelintrc.yml

@@ -0,0 +1,14 @@
+extends:
+  - stylelint-config-css-modules
+  - stylelint-config-sass-guidelines
+rules:
+  indentation: 4
+  max-nesting-depth: 2
+  order/properties-alphabetical-order: null
+  scss/selector-no-redundant-nesting-selector: null
+  selector-class-pattern: null
+  property-no-unknown:
+    - true
+    - ignoreProperties:
+      - composes
+      - compose-with

app/components/action-feed-entry-skeleton/style.scss → app/components/action-feed-entry-skeleton/styles.scss

@@ -1,11 +1,11 @@
 .action-body--skeleton {
-  margin-left: 30px;
+    margin-left: 30px;
 }
 
 .action-heading--skeleton {
-  width: 200px;
+    width: 200px;
 }
 
 .icon--skeleton {
-  float: left;
+    float: left;
 }

app/components/action-feed-entry-skeleton/template.hbs

@@ -1,8 +1,8 @@
-<div class="p-b-lg">
+<div local-class="action-feed-entry-skeleton" class="p-b-lg">
     {{#content-placeholders as |placeholder|}}
-        <div class="icon--skeleton">{{placeholder.icon}}</div>
-        <div class="action-body--skeleton">
-            <div class="action-heading--skeleton">{{placeholder.text lines=1}}</div>
+        <div local-class="icon--skeleton">{{placeholder.icon}}</div>
+        <div local-class="action-body--skeleton">
+            <div local-class="action-heading--skeleton">{{placeholder.text lines=1}}</div>
             {{placeholder.heading}}
         </div>
     {{/content-placeholders}}

app/components/action-feed-entry/component.js

@@ -33,6 +33,8 @@ const CLASS_NAMES = Object.freeze({
 export default Component.extend({
     i18n: service(),
 
+    localClassNames: 'action-feed-entry',
+
     iconClass: computed('action.actionTrigger', function() {
         return CLASS_NAMES[this.get('action.actionTrigger')];
     }),

app/components/action-feed-entry/style.scss → app/components/action-feed-entry/styles.scss

@@ -1,49 +1,57 @@
-& {
-  clear: both;
+.action-feed-entry {
+    clear: both;
 
-  :hover {
-    background: $color-bg-gray-light;
-    cursor: pointer;
-  }
+    :hover {
+        background: $color-bg-gray-light;
+        cursor: pointer;
+    }
 
-  .submit-icon {
-    color: $color-action-submit;
-  }
-  .accept-icon {
-    color: $color-action-accept;
-  }
-  .reject-icon {
-    color: $color-action-reject;
-  }
-  .edit-comment-icon {
-    color: $color-action-edit-comment;
-  }
+}
 
-  .icon {
-    float: left;
-    font-size: 20px;
-  }
+// Used in Unit tests
+.action-body { } /* stylelint-disable-line block-no-empty */
 
-  .action-date {
+.action-date {
     color: $color-text-gray-light;
     font-size: 16px;
     margin-left: 30px;
-  }
+}
 
-  .action-heading {
+.action-heading {
     color: $color-text-gray-dark;
     font-size: 18px;
     font-weight: bold;
     margin-left: 30px;
     line-height: 23px;
-  }
+}
 
-  .action-detail {
+.action-detail {
     margin-left: 30px;
 
     a {
-      color: $color-text-gray;
-      font-size: 16px;
+        color: $color-text-gray;
+        font-size: 16px;
     }
-  }
+}
+
+.submit-icon {
+    color: $color-action-submit;
+}
+
+.accept-icon {
+    color: $color-action-accept;
+}
+
+.reject-icon {
+    color: $color-action-reject;
+}
+
+.edit-comment-icon {
+    color: $color-action-edit-comment;
+}
+
+
+.icon {
+    float: left;
+    font-size: 20px;
 }

app/components/action-feed-entry/template.hbs

@@ -2,18 +2,18 @@
     {{action-feed-entry-skeleton}}
 {{else}}
     <div class="m-b-xs p-sm">
-        <div class="icon {{iconClass}}">
+        <div class="icon" local-class="icon {{iconClass}}">
             <i class="fa {{icon}}"></i>
         </div>
-        <div class="action-body">
-            <div class="action-date">
+        <div local-class="action-body">
+            <div local-class="action-date">
                 {{moment-format action.dateCreated 'MMMM D, Y'}}
             </div>
-            <div class="action-heading">
+            <div local-class="action-heading">
                 {{action.creator.fullName}}
                 {{message}}
             </div>
-            <div class="action-detail">
+            <div local-class="action-detail">
                 {{#link-to 'preprints.provider.preprint-detail' action.provider action.target}}
                     {{action.target.title}}
                 {{/link-to}}

app/components/action-feed/component.js

@@ -17,9 +17,11 @@ export default Component.extend({
     store: service(),
     toast: service(),
     i18n: service(),
-
     currentUser: service(),
+
     classNames: ['action-feed'],
+    localClassNames: 'action-feed',
+
     page: 0,
 
     dummyActionList: computed(function() {

app/components/action-feed/styles.scss

@@ -0,0 +1,8 @@
+.action-feed {
+    padding: 40px 0;
+
+    .see-more {
+        height: 20px;
+        padding-left: 45px;
+    }
+}

app/components/action-feed/template.hbs

@@ -8,7 +8,7 @@
         {{action-feed-entry-skeleton}}
     {{/each}}
 {{else if moreActions}}
-    <div class='see-more'>
+    <div local-class='see-more'>
         <a role='button' onclick={{perform loadActions}}>{{t 'components.actionFeed.seeMore'}}</a>
     </div>
 {{/if}}

app/components/contact-bar/component.js

@@ -2,6 +2,7 @@ import { computed } from '@ember/object';
 import Component from '@ember/component';
 
 export default Component.extend({
+    localClassNames: 'contact-bar',
     classNames: ['reviews-contact-bar'],
 
     // Show language asking for feedback instead of setting up a provider

app/components/contact-bar/styles.scss

@@ -0,0 +1,15 @@
+.contact-bar {
+    background: $color-bg-gray-cool;
+    padding-top: 90px;
+    padding-bottom: 50px;
+    color: $color-text-gray-dark;
+
+    h2 {
+        font-size: 24px;
+        font-weight: bold;
+    }
+
+    p {
+        font-size: 21px;
+    }
+}

app/components/contributor-list/component.js

@@ -8,6 +8,7 @@ export default Component.extend({
     store: service(),
 
     tagName: 'ul',
+    localClassNames: 'contributor-list',
 
     bibliographicContributors: filterBy('contributorsList', 'bibliographic', true),
 

app/components/contributor-list/styles.scss

@@ -0,0 +1,27 @@
+.contributor-list {
+    display: inline;
+    list-style: none;
+    padding-left: 0;
+
+    li {
+        display: inline;
+    }
+
+    li::after {
+        content: ', ';
+    }
+
+    li:last-child::after {
+        content: '';
+    }
+
+    a {
+        color: $color-text-cyan;
+    }
+
+    .ember-content-placeholders-text {
+        &__line {
+            background: $ember-content-placeholders-primary-color;
+        }
+    }
+}

app/components/dashboard-sidebar/component.js

@@ -1,5 +1,5 @@
 import Component from '@ember/component';
 
 export default Component.extend({
-    classNames: ['dashboard-sidebar'],
+    localClassNames: ['dashboard-sidebar'],
 });

app/components/dashboard-sidebar/style.scss → app/components/dashboard-sidebar/styles.scss

@@ -1,18 +1,18 @@
-& {
-  padding-top: 50px;
+.dashboard-sidebar {
+    padding-top: 50px;
+}
 
-  .sidebar-header {
+.sidebar-header {
     font-size: 24px;
     color: $color-text-gray-dark;
     background: $color-bg-gray-light;
     border: 1px solid $color-border-gray-light;
     padding: 11px 27px;
-  }
+}
 
-  .sidebar-body {
-    background: white;
+.sidebar-body {
+    background: #fff;
     border: 1px solid $color-border-gray-light;
     padding: 5px 20px;
     font-size: 20px;
-  }
 }

app/components/dashboard-sidebar/template.hbs

@@ -1,7 +1,7 @@
-<div class="sidebar-header">
+<div local-class="sidebar-header">
     {{t 'components.dashboardSidebar.providers'}}
 </div>
-<div class="sidebar-body">
+<div local-class="sidebar-body">
     <ul class="fa-ul">
         {{#each providers as |provider|}}
             {{provider-links provider=provider}}

app/components/error-page/component.js

@@ -16,7 +16,8 @@ const TITLES = {
 
 
 export default Component.extend({
-    classNames: ['reviews-error-page', 'content'],
+    classNames: ['content'],
+    localClassNames: 'reviews-error-page',
     supportEmail: '[email protected]',
 
     errorMessage: computed('error', function() {

app/components/error-page/styles.scss

@@ -0,0 +1,5 @@
+.reviews-error-page {
+    padding: 70px 0;
+    background-color: $color-bg-blue-light;
+    border-bottom: 1px solid $color-border-gray-cool;
+}

app/components/file-renderer-skeleton/styles.scss

@@ -0,0 +1,8 @@
+.file-renderer--skeleton {
+    height: 700px;
+    width: 99%;
+}
+
+:global(.ember-content-placeholders-img) {
+    height: 100%;
+}