Resolving merge conflicts

Author: SanthoshRaju91

addon/components/es-blog-heading.js

@@ -0,0 +1,22 @@
+import Component from '@ember/component';
+import layout from '../templates/components/es-blog-heading';
+import {
+  BlogPostType,
+} from '../constants/es-blog-heading';
+import {
+  computed,
+} from '@ember/object';
+
+export default Component.extend({
+  layout,
+  classNames: ['es-blog-heading'],
+
+  author: null,
+  postDate: null,
+  postTitle: null,
+  postType: null,
+  postUrl: null,
+
+  isGuestPost: computed.equal('postType', BlogPostType.GUEST),
+  isNonStandardPost: computed.readOnly('postType'),
+});

addon/constants/es-blog-heading.js

@@ -0,0 +1,5 @@
+export const BlogPostType = {
+    REGULAR: 'regular',
+    GUEST: 'guest',
+    SYNDICATED: 'syndicated',
+};

addon/styles/_es-blog-heading.scss

@@ -0,0 +1,62 @@
+.es-blog-heading {
+  .post-title {
+    &.page-view {
+      color: $secondary;
+      font-size: 2.25em;
+      margin-bottom: 0.01em;
+      margin-top: 0.7em;
+    }
+
+    &.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-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;
+    }
+  }
+}

addon/styles/addon.scss

@@ -21,6 +21,7 @@
 @import 'es-ulist';
 @import 'es-note';
 @import 'es-accordion';
+@import 'es-blog-heading';
 
 body {
   font-family: $font-family;

addon/styles/variables.scss

@@ -9,6 +9,7 @@ $primary-dark: #EF4326;
 $secondary: #4A4A4A;
 $secondary-light: #969696;
 $secondary-dark: #303030;
+$blue: #1e719b;
 $black: #212121; //never pure black
 $white: #fdfdfd; //never pure white
 $success: green; //come back to these state colors and put proper colors in here

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

@@ -0,0 +1,14 @@
+{{#if postUrl}}
+  <h2 class="post-title list-view">
+    <a href={{postUrl}}>{{postTitle}}</a>
+  </h2>
+{{else}}
+  <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>
+{{#if isNonStandardPost}}
+  <div class="post-tag {{if isGuestPost "guest" "syndicated"}}">
+    {{if isGuestPost "Guest" "Syndicated"}} Post
+  </div>
+{{/if}}

app/components/es-blog-heading.js

@@ -0,0 +1 @@
+export { default } from 'ember-styleguide/components/es-blog-heading';

package.json

@@ -39,6 +39,7 @@
     "ember-cli-htmlbars-inline-precompile": "^1.0.0",
     "ember-cli-inject-live-reload": "^1.4.1",
     "ember-cli-mirage": "^0.3.4",
+    "ember-cli-moment-shim": "^3.5.0",
     "ember-cli-qunit": "^4.1.1",
     "ember-cli-shims": "^1.2.0",
     "ember-cli-sri": "^2.1.0",
@@ -48,6 +49,7 @@
     "ember-export-application-global": "^2.0.0",
     "ember-font-awesome": "^3.0.5",
     "ember-load-initializers": "^1.0.0",
+    "ember-moment": "^7.6.0",
     "ember-native-dom-helpers": "^0.5.10",
     "ember-resolver": "^4.0.0",
     "ember-sinon": "^1.0.1",

tests/dummy/app/templates/index.hbs

@@ -41,4 +41,4 @@
   {{#es-ulist/image item=item as |item|}}
       {{es-ulist/link item=item isExternal=true}}
   {{/es-ulist/image}}
-{{/es-ulist}}
+{{/es-ulist}}

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

@@ -0,0 +1,125 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import {
+  find,
+} from 'ember-native-dom-helpers';
+import {
+  set,
+  setProperties,
+} from '@ember/object';
+import {
+  run,
+} from '@ember/runloop';
+
+let author, postDate, postUrl, postTitle, postType;
+
+moduleForComponent('es-blog-heading', 'Integration | Component | es blog heading', {
+  integration: true,
+  beforeEach() {
+    author = 'Sara Poster';
+    postDate = '03-20-2018';
+    postUrl = 'https://emberjs.com/blog';
+    postTitle = 'Pretty Awesome Blog Post';
+    postType = null;
+
+    setProperties(this, {
+      author,
+      postDate,
+      postUrl,
+      postTitle,
+      postType,
+    });
+
+    this.render(hbs`
+      {{es-blog-heading
+        author=author
+        postDate=postDate
+        postType=postType
+        postUrl=postUrl
+        postTitle=postTitle
+      }}
+    `);
+  },
+  afterEach() {
+    author = postDate = postUrl = postTitle = postType = null;
+  }
+});
+
+test('it renders', function(assert) {
+  assert.equal(
+    find('.post-title.list-view a'),
+    postUrl,
+    'displays title as link'
+  );
+  assert.equal(
+    find('.post-title.list-view').textContent.trim(),
+    postTitle,
+    'displays title'
+  );
+  assert.equal(
+    find('.post-date').textContent.trim(),
+    'Mar 20, 2018',
+    'displays formatted date'
+  );
+  assert.equal(
+    find('.post-author').textContent.trim(),
+    `By ${author}`,
+    'displays author'
+  );
+  assert.notOk(
+    find('.post-tag'),
+    'does not display tag if not set'
+  );
+});
+
+test('displays proper tag', function(assert) {
+  assert.notOk(
+    find('.post-tag'),
+    'does not display tag if not set'
+  );
+
+  run(() => {
+    set(this, 'postType', 'guest');
+  });
+
+  assert.equal(
+    find('.post-tag').textContent.trim(),
+    'Guest Post',
+    'displays guest tag'
+  );
+
+  run(() => {
+    set(this, 'postType', 'syndicated');
+  });
+
+  assert.equal(
+    find('.post-tag').textContent.trim(),
+    'Syndicated Post',
+    'displays syndicated tag'
+  );
+});
+
+test('renders correct title format', function(assert) {
+  assert.equal(
+    find('.post-title.list-view a'),
+    postUrl,
+    'displays title as link when url is provided'
+  );
+  assert.ok(
+    find('.post-title.list-view'),
+    'displays list view title when a url is provided'
+  );
+
+  run(() => {
+    set(this, 'postUrl', null);
+  });
+
+  assert.notOk(
+    find('.post-title.list-view a'),
+    'does not display title as link when a url is not provided'
+  );
+  assert.ok(
+    find('.post-title.page-view'),
+    'displays page view title when a url is provided'
+  );
+});