Add Children's Church in group showcase

Author: achan

app/controllers/index.js

@@ -2,8 +2,8 @@ import Ember from 'ember';
 
 export default Ember.Controller.extend({
   actions: {
-    viewEnglishService() {
-      this.transitionToRoute("group.index", "english-service");
+    viewGroup(slug) {
+      this.transitionToRoute("group.index", slug);
     },
     viewOnlineSermons() {
       this.transitionToRoute("bulletin/sunday");

app/styles/pages/index.scss

@@ -32,10 +32,15 @@
 
     .group {
       text-align: center;
+      margin-top: $padding-l;
 
       .description {
         margin-top: $padding-m;
       }
+
+      &:first-of-type {
+        margin-top: 0
+      }
     }
   }
 
@@ -57,6 +62,12 @@
       background-color: $gray-blue-light;
     }
 
+    .around-church {
+      .group, .group:first-of-type {
+        margin-top: 0;
+      }
+    }
+
     section {
       font-size: 22px;
       padding-bottom: $padding-xl * 2;

app/templates/index.hbs

@@ -24,7 +24,16 @@
       </div>
     </div>
     <div class="row">
-      <div class="col-sm-offset-4 col-sm-4 group" {{action "viewEnglishService"}}>
+      <div class="col-sm-offset-2 col-sm-4 group" {{action "viewGroup" "childrens-church"}}>
+        <img src={{cloudinary-fetch url="https://mcac.s3.amazonaws.com/groups/fabe359d-8611-4112-b675-842cd40ef57e.jpg"
+                                    width=200
+                                    radius="max"
+                                    height=200 crop="fill"}} />
+        <div class="description">
+          Children's Church
+        </div>
+      </div>
+      <div class="col-sm-4 group" {{action "viewGroup" "english-service"}}>
         <img src={{cloudinary-fetch url="https://mcac.s3.amazonaws.com/groups/5c7d76a8-d195-4907-951d-5b3fb00c438d.jpg"
                                     width=200
                                     radius="max"

tests/unit/controllers/index-test.js

@@ -17,15 +17,15 @@ test("viewOnlineSermons: it redirects to sunday's bulletin", function(assert) {
   controller.send("viewOnlineSermons");
 });
 
-test("viewEnglishService: it redirects to english service hub", function(assert) {
+test("viewGroup: it redirects to group with group slug", function(assert) {
   const controller = this.subject();
 
   const done = assert.async();
   controller.transitionToRoute = function(name, model) {
     assert.equal(name, "group.index");
-    assert.equal(model, "english-service");
+    assert.equal(model, "random-slug");
     done();
   };
 
-  controller.send("viewEnglishService");
+  controller.send("viewGroup", "random-slug");
 });