Fix Stepper first label not shown bug

The label for first step depends on currently selected license: it's set to Attribution if it's a 'BY' license and 'Public Domain' if 'CC0' is selected. When the label was based on computed property translated by i18n, the label didn't change. So, the change was moved to a method.

Signed-off-by: Olga Bulat <obulat@gmail.com>

Author: obulat

src/components/Stepper.vue

@@ -12,10 +12,10 @@
                      ref="steps"
                     >
                 <b-step-item
-                    v-for="item in this.steps"
+                    v-for="(item, index) in this.steps"
                     :icon-pack="item['icon-pack']"
                     :icon="getIcon(item.shortName)"
-                    :label=$t(item.label)
+                    :label="$t(labels[index])"
                     :key="item.shortName"
                     :selected="isStepSelected(item.shortName)"
                     :visible="isStepVisible(item.shortName)"
@@ -62,37 +62,31 @@ export default {
             currentStep: 0,
             steps: [
                 {
-                    label: this.attributionName,
                     shortName: 'BY',
                     'icon-pack': 'fab',
                     itemType: 'licenseAttribute'
                 },
                 {
-                    label: 'stepper-label.NonCommercial',
                     shortName: 'NC',
                     'icon-pack': 'fab',
                     itemType: 'licenseAttribute'
                 },
                 {
-                    label: 'stepper-label.NoDerivatives',
                     shortName: 'ND',
                     'icon-pack': 'fab',
                     itemType: 'licenseAttribute'
                 },
                 {
-                    label: 'stepper-label.Share-Alike',
                     shortName: 'SA',
                     'icon-pack': 'fab',
                     itemType: 'licenseAttribute'
                 },
                 {
-                    label: 'stepper-label.CopyrightWaiver',
                     shortName: 'wv',
                     'icon-pack': 'fas',
                     itemType: 'CC0Attribute'
                 },
                 {
-                    label: 'stepper-label.AttributionDetails',
                     shortName: 'ad',
                     'icon-pack': 'fas',
                     itemType: 'AttributionDetails'
@@ -107,8 +101,17 @@ export default {
         attributionIcon() {
             return this.$props.value.shortName.includes('BY') ? 'creative-commons-by' : 'creative-commons-zero'
         },
-        attributionName() {
-            return this.$props.value.shortName.includes('BY') ? 'stepper-label.Attribution' : 'stepper-label.PublicDomain'
+        labels() {
+            const attributionStepLabel = this.$props.value.shortName.includes('BY') ? 'Attribution' : 'PublicDomain'
+            const stepLabels = [
+                `stepper-label.${attributionStepLabel}`,
+                'stepper-label.NoDerivatives',
+                'stepper-label.NonCommercial',
+                'stepper-label.Share-Alike',
+                'stepper-label.CopyrightWaiver',
+                'stepper-label.AttributionDetails'
+            ]
+            return stepLabels
         }
     },
     methods: {
@@ -130,6 +133,9 @@ export default {
                 return `creative-commons-${attrName.toLowerCase()}`
             }
         },
+        getAttributionName() {
+            return this.$props.value.shortName.includes('BY') ? 'stepper-label.Attribution' : 'stepper-label.PublicDomain'
+        },
         updateLicense(itemId) {
             const attrs = { ...this.licenseAttributes }
             attrs[itemId] = !attrs[itemId]