Move src to dashboard (#152)

app/javascript/dashboard/components/ui/Wizard.vue

@@ -0,0 +1,58 @@
+<template>
+  <transition-group
+    name="wizard-items"
+    tag="div"
+    class="wizard-box flex-child-shrink"
+    :class="classObject"
+  >
+    <div
+      v-for="item in items"
+      :key="item.route"
+      class="item"
+      :class="{ active: isActive(item), over: isOver(item) }"
+    >
+      <h3>
+        {{ item.title }}
+        <span v-if="isOver(item)" class="completed">
+          <i class="ion-checkmark"></i>
+        </span>
+      </h3>
+      <span class="step">
+        {{ items.indexOf(item) + 1 }}
+      </span>
+      <p>{{ item.body }}</p>
+    </div>
+  </transition-group>
+</template>
+
+<script>
+/* eslint no-console: 0 */
+export default {
+  props: {
+    items: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    isFullwidth: Boolean,
+  },
+
+  computed: {
+    classObject() {
+      return 'full-width';
+    },
+    activeIndex() {
+      return this.items.findIndex(i => i.route === this.$route.name);
+    },
+  },
+  methods: {
+    isActive(item) {
+      return this.items.indexOf(item) === this.activeIndex;
+    },
+    isOver(item) {
+      return this.items.indexOf(item) < this.activeIndex;
+    },
+  },
+};
+</script>