Brand story can be expanded and contracted

app/assets/javascripts/darkswarm/controllers/home_controller.js.coffee

@@ -0,0 +1,5 @@
+Darkswarm.controller "HomeCtrl", ($scope) ->
+  $scope.brandStoryExpanded = false
+
+  $scope.toggleBrandStory = ->
+    $scope.brandStoryExpanded = !$scope.brandStoryExpanded

app/views/home/_brandstory.html.haml

@@ -3,19 +3,16 @@
     .small-12.medium-8.medium-offset-2.columns.text-center
       %h2 Food, unincorporated.
       %p Sometimes the best way to fix the system is to start a new one…
-      
-      .hide-show{"ng-show" => "brandstory_expanded"}
+
+      .hide-show{"ng-show" => "brandStoryExpanded"}
         %p We begin from the ground up. With farmers and growers ready to tell their stories proudly and truly. With distributors ready to connect people with products fairly and honestly. With buyers who believe that better weekly shopping decisions can seriously change the world.
         %p Then we need a way to make it real. A way to empower everyone who grows, sells and buys food. A way to tell all the stories, to handle all the logistics. A way to turn transaction into transformation every day.
         %p So we build an online marketplace that levels the playing field. It’s transparent, so it creates real relationships. It’s open source, so it‘s owned by everyone. It scales to regions and nations, so people start versions across the world.
         %p It works everywhere. It changes everything.
-        %p 
+        %p
           %strong We call it Open Food Network.
         %p We all love food. Now we can love our food system too.
 
-      %a.text-vbig{"ng-click" => "toggle_brandstory()"}
-        // TODO: needs to toogle to show/hide brandstory
-        / Read more
-        %i.ofn-i_005-caret-down
-      
-      
+      %a.text-vbig{"ng-click" => "toggleBrandStory()"}
+        %i.ofn-i_005-caret-down{"ng-hide" => "brandStoryExpanded"}
+        %i.ofn-i_006-caret-up{  "ng-show" => "brandStoryExpanded"}

app/views/home/index.html.haml

@@ -1,19 +1,20 @@
-= render partial: "shared/menu/alert"
+%div{"ng-controller" => "HomeCtrl"}
+  = render partial: "shared/menu/alert"
 
-#tagline
-  .row
-    .small-12.text-center.columns
-      %h1
-        / TODO: Rohan - logo asset & width is content manageable: 
-        %img{src: "/assets/logo-color.png", srcset: "/assets/logo-color.svg", width: "350", height: "121", title: "Open Food Network Australia"}
+  #tagline
+    .row
+      .small-12.text-center.columns
+        %h1
+          / TODO: Rohan - logo asset & width is content manageable:
+          %img{src: "/assets/logo-color.png", srcset: "/assets/logo-color.svg", width: "350", height: "121", title: "Open Food Network Australia"}
 
-.ng-cloak
+  .ng-cloak
 
-#panes
-  = render partial: "home/cta1"
-  = render partial: "home/brandstory"
-  = render partial: "home/system"
-  = render partial: "home/cta2"
-  = render partial: "home/stats"
+  #panes
+    = render partial: "home/cta1"
+    = render partial: "home/brandstory"
+    = render partial: "home/system"
+    = render partial: "home/cta2"
+    = render partial: "home/stats"
 
-= render partial: "shared/footer"
+  = render partial: "shared/footer"

spec/javascripts/unit/darkswarm/controllers/home_controller_spec.js.coffee

@@ -0,0 +1,19 @@
+describe "HomeCtrl", ->
+  ctrl = null
+  scope = null
+
+  beforeEach ->
+    module 'Darkswarm'
+    scope = {}
+
+    inject ($controller) ->
+      ctrl = $controller 'HomeCtrl', {$scope: scope}
+
+  it "starts with the brand story contracted", ->
+    expect(scope.brandStoryExpanded).toBe false
+
+  it "toggles the brand story", ->
+    scope.toggleBrandStory()
+    expect(scope.brandStoryExpanded).toBe true
+    scope.toggleBrandStory()
+    expect(scope.brandStoryExpanded).toBe false