PR corrections

Author: pbishop16

addon/components/es-blog-heading.js

@@ -9,7 +9,7 @@ import {
 
 export default Component.extend({
   layout,
-  classNames: ['post-header'],
+  classNames: ['es-blog-heading'],
 
   author: null,
   postDate: null,

addon/styles/_es-blog-heading.scss

@@ -1,58 +1,62 @@
-h1.post-title {
-  color: $secondary;
-  font-size: 2.25em;
-  margin-bottom: 0.01em;
-	margin-top: 0.7em;
-}
+.es-blog-heading {
+  .post-title {
+    &.page-view {
+      color: $secondary;
+      font-size: 2.25em;
+      margin-bottom: 0.01em;
+      margin-top: 0.7em;
+    }
 
-h2.post-title {
-  color: $orange-darkest;
-  font-size: 1.75em;
-  font-weight: bold;
-  letter-spacing: none;
-  line-height: 1;
-	margin-bottom: 0.19em;
-	margin-top: 0.2em;
-  a {
-    color: $orange-darker;
-    text-decoration: none;
-    &:hover {
-      text-decoration: underline;
+    &.list-view {
+      color: $orange-darkest;
+      font-size: 1.75em;
+      font-weight: bold;
+      letter-spacing: none;
+      line-height: 1;
+      margin-bottom: 0.19em;
+      margin-top: 0.2em;
+      a {
+        color: $orange-darker;
+        text-decoration: none;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
     }
   }
-}
 
-.post-date {
-  color: $gray;
-  display: block;
-  font-size: 0.8em;
-  text-transform: uppercase;
-  padding: 0.2em 0.25em 0 0;
-  @media screen and (min-width: 768px) {
-    display: inline-block;
-    padding: 0 0.25em 0 0;
+  .post-date {
+    color: $gray;
+    display: block;
+    font-size: 0.8em;
+    text-transform: uppercase;
+    padding: 0.2em 0.25em 0 0;
+    @media screen and (min-width: 768px) {
+      display: inline-block;
+      padding: 0 0.25em 0 0;
+    }
   }
-}
 
-.post-author {
-  color: $blue;
-  display: inline-block;
-	font-size: 0.8em;
-	font-weight: bold;
-	text-transform: uppercase;
-}
+  .post-author {
+    color: $blue;
+    display: inline-block;
+    font-size: 0.8em;
+    font-weight: bold;
+    text-transform: uppercase;
+  }
 
-.post-tag {
-	clear: both;
-	display: block;
-	font-size: 0.8em;
-	line-height: 1;
-  text-transform: uppercase;
-  margin-top: 0.35em;
-	&.syndicated {
-		color: $blue;
-	}
-	&.guest {
-		color: $gray;
-	}
+  .post-tag {
+    clear: both;
+    display: block;
+    font-size: 0.8em;
+    line-height: 1;
+    text-transform: uppercase;
+    margin-top: 0.35em;
+    &.syndicated {
+      color: $blue;
+    }
+    &.guest {
+      color: $gray;
+    }
+  }
 }

addon/templates/components/es-blog-heading.hbs

@@ -1,9 +1,9 @@
 {{#if postUrl}}
-  <h2 class="post-title">
+  <h2 class="post-title list-view">
     <a href={{postUrl}}>{{postTitle}}</a>
   </h2>
 {{else}}
-  <h1 class="post-title">{{postTitle}}</h1>
+  <h1 class="post-title page-view">{{postTitle}}</h1>
 {{/if}}
 <div class="post-date">{{moment-format postDate 'MMM DD, YYYY' 'MM-DD-YYYY'}}</div>
 <div class="post-author">By {{author}}</div>

tests/integration/components/es-blog-heading-test.js

@@ -47,12 +47,12 @@ moduleForComponent('es-blog-heading', 'Integration | Component | es blog heading
 
 test('it renders', function(assert) {
   assert.equal(
-    find('.post-title a'),
+    find('.post-title.list-view a'),
     postUrl,
     'displays title as link'
   );
   assert.equal(
-    find('h2.post-title').textContent.trim(),
+    find('.post-title.list-view').textContent.trim(),
     postTitle,
     'displays title'
   );
@@ -68,14 +68,14 @@ test('it renders', function(assert) {
   );
   assert.notOk(
     find('.post-tag'),
-    'does not tag if not set'
+    'does not display tag if not set'
   );
 });
 
 test('displays proper tag', function(assert) {
   assert.notOk(
     find('.post-tag'),
-    'does not tag if not set'
+    'does not display tag if not set'
   );
 
   run(() => {
@@ -101,25 +101,25 @@ test('displays proper tag', function(assert) {
 
 test('renders correct title format', function(assert) {
   assert.equal(
-    find('.post-title a'),
+    find('.post-title.list-view a'),
     postUrl,
     'displays title as link when url is provided'
   );
   assert.ok(
-    find('h2.post-title'),
-    'displays title with h2 tag when url provided'
+    find('.post-title.list-view'),
+    'displays list view title when a url is provided'
   );
 
   run(() => {
     set(this, 'postUrl', null);
   });
 
   assert.notOk(
-    find('.post-title a'),
-    'does not display title as link when url is not provided'
+    find('.post-title.list-view a'),
+    'does not display title as link when a url is not provided'
   );
   assert.ok(
-    find('h1.post-title'),
-    'displays title with h1 tag when url provided'
+    find('.post-title.page-view'),
+    'displays page view title when a url is provided'
   );
 });