Toggle quick help

src/components/Environments.vue

@@ -81,10 +81,7 @@
               </div>
 
               <div class="flex-1">
-                <button type="button" class="text-blue text-sm font-hairline flex items-center hover:underline focus:underline">
-                  <svg class="h-5 w-5 mr-1 text-blue-dark fill-current" role="presentation"><use xlink:href="icons.symbol.svg#actions__info"></use></svg>
-                  Hide quick help
-                </button>
+                <toggle-help @toggle="help.hidden = !help.hidden" :hidden="help.hidden"></toggle-help>
               </div>
             </div>
 
@@ -103,7 +100,7 @@
           </div>
         </div>
 
-        <quick-help></quick-help>
+        <quick-help :hidden="help.hidden"></quick-help>
         <environment-cards></environment-cards>
         <task-log></task-log>
       </div>
@@ -142,20 +139,25 @@
 </template>
 
 <script>
-import QuickHelp from './QuickHelp'
 import EnvironmentCards from './EnvironmentCards'
+import QuickHelp from './QuickHelp'
 import TaskLog from './TaskLog'
+import ToggleHelp from './ToggleHelp'
 
 export default {
   components: {
     EnvironmentCards,
     QuickHelp,
     TaskLog,
+    ToggleHelp,
   },
 
   data() {
     return {
       name: 'Rebuilding Acquia',
+      help: {
+        hidden: false,
+      }
     }
   }
 }

src/components/QuickHelp.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white border-t-10 border-purple flex mb-6">
+  <div class="bg-white border-t-10 border-purple mb-6" :class="[hidden ? 'hidden' : 'flex']">
     <div class="flex-none py-3 pl-3 pr-8 border-r border-grey-lighter">
       <div class="flex items-center">
         <svg class="h-6 w-6 mr-1 text-purple fill-current" role="presentation"><use xlink:href="icons.symbol.svg#actions__info"></use></svg>
@@ -29,6 +29,10 @@
 
 <script>
 export default {
+  props: {
+    hidden: Boolean,
+  },
+
   data() {
     return {
       selected: 0,

src/components/ToggleHelp.vue

@@ -0,0 +1,14 @@
+<template>
+  <button type="button" class="text-blue text-sm font-hairline flex items-center hover:underline focus:underline focus:outline-none" @click="$emit('toggle')">
+    <svg class="h-5 w-5 mr-1 text-blue-dark fill-current" role="presentation"><use xlink:href="icons.symbol.svg#actions__info"></use></svg>
+    {{ hidden ? 'Show quick help' : 'Hide quick help' }}
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    hidden: Boolean,
+  },
+}
+</script>