Move data

src/App.vue

@@ -1,16 +1,44 @@
 <template>
   <div id="app">
-    <environments></environments>
+    <environments :project="projects[0]"></environments>
   </div>
 </template>
 
 <script>
-import Environments from './components/Environments.vue'
+import Environments from './components/Environments'
 
 export default {
-  name: 'app',
   components: {
     Environments
+  },
+
+  data() {
+    return {
+      projects: [
+        {
+          name: 'Rebuilding Acquia',
+          type: 'Drupal',
+          level: 'Enterprise',
+          environments: {
+            dev: {
+              name: 'Dev',
+              url: 'dev.rebuilding-acquia.com',
+              label: 'develop'
+            },
+            stage: {
+              name: 'Stage',
+              url: 'stg.rebuilding-acquia.com',
+              label: 'master'
+            },
+            prod: {
+              name: 'Prod',
+              url: 'rebuilding-acquia.com',
+              label: 'tags/2018-12-21'
+            },
+          },
+        },
+      ],
+    }
   }
 }
 </script>

src/components/EnvironmentCards.vue

@@ -40,26 +40,8 @@
 
 <script>
 export default {
-  data() {
-    return {
-      environments: [
-        {
-          name: 'Dev',
-          url: 'dev.rebuilding-acquia.com',
-          label: 'develop'
+  props: {
+    environments: Array,
   },
-        {
-          name: 'Stage',
-          url: 'stg.rebuilding-acquia.com',
-          label: 'master'
-        },
-        {
-          name: 'Prod',
-          url: 'rebuilding-acquia.com',
-          label: 'tags/2018-12-21'
-        },
-      ],
-    }
-  }
 }
 </script>

src/components/Environments.vue

@@ -35,12 +35,12 @@
         <div class="text-xs mb-3">
           <ol class="list-reset flex">
             <li class="mr-6"><a href="#0" class="text-blue-dark no-underline hover:underline">Applications</a></li>
-            <li>{{ name }}</li>
+            <li>{{ project.name }}</li>
           </ol>
         </div>
 
         <div class="flex flex-1 items-center justify-between md:justify-start">
-          <div class="text-2xl font-hairline mr-2">{{ name }}</div>
+          <div class="text-2xl font-hairline mr-2">{{ project.name }}</div>
           <svg class="h-6 w-6 text-blue-dark fill-current" role="presentation"><use xlink:href="icons.symbol.svg#actions__down-arrow"></use></svg>
         </div>
       </div>
@@ -94,14 +94,14 @@
 
           <div>
             <ul class="list-reset flex -mr-2">
-              <li class="text-2xs uppercase py-1 px-2 rounded border border-transparent bg-blue-light text-white mr-2">Drupal</li>
-              <li class="text-2xs uppercase py-1 px-2 rounded border border-grey bg-white mr-2">Enterprise</li>
+              <li class="text-2xs uppercase py-1 px-2 rounded border border-transparent bg-blue-light text-white mr-2">{{ project.type }}</li>
+              <li class="text-2xs uppercase py-1 px-2 rounded border border-grey bg-white mr-2">{{ project.level }}</li>
             </ul>
           </div>
         </div>
 
         <quick-help :hidden="help.hidden"></quick-help>
-        <environment-cards></environment-cards>
+        <environment-cards :environments="project.environments"></environment-cards>
         <task-log></task-log>
       </div>
 
@@ -152,9 +152,12 @@ export default {
     ToggleHelp,
   },
 
+  props: {
+    project: Object,
+  },
+
   data() {
     return {
-      name: 'Rebuilding Acquia',
       help: {
         hidden: false,
       }