add ask/offer buttons to Contributions page

rubyforgood · Oct 15, 2020 · a50099c · a50099c
1 parent 4469bb0
commit a50099c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/app/javascript/pages/Browse.vue b/app/javascript/pages/Browse.vue
@@ -19,6 +19,13 @@
         <BrowserSelector :browser="browser" @clicked="browser = $event" />
       </section>
       <component :is="browser" :contributions="activeContributions" class="row" accessToken="pk.eyJ1IjoibXV0dWFsLWFpZC1hcHAiLCJhIjoiY2tmZTBvd3UwMDBhbTJ4cDlic2JmMWZoaiJ9.rWscBjdl1SMT5N0yekIJYg"/>
+      <section class="has-text-centered mt-2">
+        <h2 class="is-size-4 mb-1">Can't find what you're looking for?</h2>
+        <div>
+          <a href="/asks/new" class="button is-primary">Submit an Ask</a>
+          <a href="/offers/new" class="button is-primary">Submit an Offer</a>
+        </div>
+      </section>
     </section>
   </div>
 </template>
@@ -83,3 +90,13 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+  .actions {
+    display: flex;
+    justify-content: center;
+  }
+  a {
+    margin: 0 0.5em;
+  }
+</style>
diff --git a/spec/javascript/pages/Browse.spec.js b/spec/javascript/pages/Browse.spec.js
@@ -40,6 +40,12 @@ describe('Browse', () => {
       it('activates the List view button', () => {
         assert.deepEqual($showListButton.classes(), ['navbar-item', 'is-active'])
       })
+
+      it('renders Ask and Offer section with action buttons', () => {
+        assert.equal($wrapper.findAll('.has-text-centered a').length, 2)
+        assert.deepEqual($wrapper.findAll('.has-text-centered a').at(0).text(), 'Submit an Ask')
+        assert.deepEqual($wrapper.findAll('.has-text-centered a').at(1).text(), 'Submit an Offer')
+      })
     })
   })
 })