Merge pull request #17 from nypublicradio/mwalsh/WE-6492_social-icon-…

…list

Add nypr-social-icons component

README.md

@@ -72,6 +72,7 @@ This add-on also provides a few components which can be invoked in templates:
 * `nypr-card`: basic UI widget
 * `nypr-multi-card`: switch between multiple panels in the same card
 * `nypr-input`: form field with error states. compatible with changesets
+* `nypr-social-icons`: a list of links formatted as a row of font awesome icons
 
 ## Installation
 

addon/components/nypr-social-icons.js

@@ -0,0 +1,7 @@
+import Ember from 'ember';
+import layout from '../templates/components/nypr-social-icons';
+
+export default Ember.Component.extend({
+  classNames: ["nypr-social-icons"],
+  layout
+});

addon/templates/components/nypr-social-icons.hbs

@@ -0,0 +1,13 @@
+<h3 class="nypr-social-icons__header">{{title}}</h3>
+{{yield}}
+<ul class="nypr-social-icons__list">
+  {{#each items as |item|}}
+  <li class="nypr-social-icons__item">
+    <a class="nypr-social-icons__link"
+       href="{{item.url}}"
+       target="_blank">
+      <i class="nypr-social-icons__icon fa fa-{{item.icon}}"></i>
+    </a>
+  </li>
+  {{/each}}
+</ul>

app/components/nypr-social-icons.js

@@ -0,0 +1 @@
+export { default } from 'nypr-ui/components/nypr-social-icons';

app/styles/nypr-ui.scss

@@ -31,3 +31,4 @@ $ember-power-select-trigger-ltr-padding: 0 8px 0 0;
 @import "nypr-ui/mini-chrome";
 @import "nypr-ui/story";
 @import "nypr-ui/stream-banner";
+@import "nypr-ui/social-icons";

app/styles/nypr-ui/_social-icons.scss

@@ -0,0 +1,30 @@
+@import 'nypr-ui/mixins/lists';
+
+.nypr-social-icons {
+  padding: 0 18px 26px 24px;
+  text-align: right;
+}
+
+.nypr-social-icons__header {
+  margin: 0;
+  padding: 0 0 11px 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: #ffffff;
+}
+
+.nypr-social-icons__list {
+  @include list-base;
+  @include display-flex;
+  @include justify-content(space-between);
+  margin: 0;
+}
+
+.nypr-social-icons__link {
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    border-bottom-color: transparent;
+    color: rgba(white, 0.05);
+  }
+}

app/styles/nypr-ui/mixins/_lists.scss

@@ -0,0 +1,4 @@
+@mixin list-base {
+  list-style: none;
+  padding: 0;
+}

tests/integration/components/nypr-social-icons-test.js

@@ -0,0 +1,25 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('nypr-social-icons', 'Integration | Component | nypr social icons', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{nypr-social-icons}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#nypr-social-icons}}
+      template block text
+    {{/nypr-social-icons}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});