Combine LicenseDropdown and DropdownStep components

src/components/DropdownStep.vue

@@ -1,25 +1,26 @@
 <template>
-    <div class="step-content">
-        <div
-            v-if="status==='previous'"
-            class="step-header__caption"
-        >
-            {{ cardText }}
-        </div>
-        <div
-            v-else-if="status==='active'"
-            class="step-actions"
-        >
-            <LicenseDropdown @input="updateSelected" />
-        </div>
+    <div class="step-actions">
+        <b-field class="license-dropdown">
+            <b-select
+                :placeholder="this.$t('stepper.DD.placeholder')"
+                :value="shortName"
+                @input="setCurrentLicense"
+            >
+                <option
+                    v-for="license in licenseList"
+                    :key="license"
+                    :value="license"
+                >
+                    {{ license }}
+                </option>
+            </b-select>
+        </b-field>
     </div>
 </template>
 <script>
 import { mapGetters } from 'vuex'
-import LicenseDropdown from './LicenseDropdown'
 export default {
     name: 'DropdownStep',
-    components: { LicenseDropdown },
     props: {
         status: {
             type: String,
@@ -29,16 +30,55 @@ export default {
         },
         id: Number
     },
-    computed: {
-        ...mapGetters(['fullName']),
-        cardText() {
-            return this.fullName
+    data() {
+        return {
+            licenseList: [
+                'CC0 1.0',
+                'CC BY 4.0',
+                'CC BY-SA 4.0',
+                'CC BY-ND 4.0',
+                'CC BY-NC 4.0',
+                'CC BY-NC-SA 4.0',
+                'CC BY-NC-ND 4.0'
+            ],
+            currentLicense: undefined
         }
     },
+    computed: {
+        ...mapGetters(['shortName', 'fullName'])
+    },
     methods: {
-        updateSelected() {
+        setCurrentLicense(currentLicense) {
+            this.$store.commit('updateAttributesFromShort', currentLicense)
+            if (process.env.NODE_ENV === 'production') {
+                this.$ga.event({
+                    eventCategory: 'LicenseDropdown',
+                    eventAction: 'licenseSelected',
+                    eventLabel: currentLicense
+                })
+            }
             this.$emit('change', { name: 'DD', id: this.$props.id, selected: true })
         }
     }
 }
 </script>
+
+<style lang="scss">
+.license-dropdown {
+    margin-top: 1rem;
+    .label{
+        font-weight: normal;
+        opacity: 0.8;
+        font-size: 1em;
+    }
+    .select, select {
+        width: 100%;
+    }
+    .select select {
+        border: 0.125rem solid #d8d8d8;
+        &:active, &:focus, &:hover {
+            border-color: #b0b0b0;
+        }
+    }
+}
+</style>