From 00e1905c17278aa26283a357ed722031432056d9 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Fri, 21 Dec 2018 22:13:14 +0000
Subject: [PATCH] Make quick help text dynamic

---
 src/components/QuickHelp.vue | 42 ++++++++++++++++++++++++++++++------
 1 file changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/components/QuickHelp.vue b/src/components/QuickHelp.vue
index 917fcd7..368615f 100644
--- a/src/components/QuickHelp.vue
+++ b/src/components/QuickHelp.vue
@@ -9,18 +9,48 @@
 
     <div class="p-4">
       <div class="flex mb-6">
-        <button type="button" class="text-grey-darkest hover:underline mr-6">Deploying code</button>
-        <button type="button" class="text-blue-dark hover:underline mr-6">Copying files</button>
-        <button type="button" class="text-blue-dark hover:underline mr-6">Copying database</button>
-        <button type="button" class="text-blue-dark hover:underline ">Task Log</button>
+        <button
+          v-for="(item, i) in items"
+          type="button"
+          class="hover:underline focus:underline mr-6 focus:outline-none"
+          :class="[ i === selected ? 'text-grey-darkest' : 'text-blue-dark' ]"
+          @click="selected = i"
+        >{{ item.subject }}</button>
       </div>
       <div class="leading-normal">
-        <p>Drag a code element from one environment to another environment, which creates a new tag for the HEAD of that branch and then deploys the tag. Learn more</p>
+        <p class="text-sm text-grey-darker">
+          {{ items[selected].text }}
+          <a href="#0" class="text-blue-dark no-underline hover:underline focus:underline">Learn more</a>
+        </p>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-export default {}
+export default {
+  data() {
+    return {
+      selected: 0,
+      items: [
+        {
+          subject: 'Deploying code',
+          text: 'Drag a code element from one environment to another environment, which creates a new tag for the HEAD of that branch and then deploys the tag.',
+        },
+        {
+          subject: 'Copying files',
+          text: 'Drag a file element from one environment to another environment, which writes new files, overwrites existing files, and ignores files already in place.',
+        },
+        {
+          subject: 'Copying database',
+          text: 'Drag a database element from one environment to another environment, which overwrites the target database(s). Dragging database elements with more than one database displays a dialog box that allows you to select the databases to deploy',
+        },
+        {
+          subject: 'Task Log',
+          text: 'The Task Log is displayed below your Acquia Cloud environments and contains information on all of the actions taken against your application, including code deployments, configuration updates and environment specific changes.',
+        },
+      ]
+    }
+  }
+}
 </script>