Remove default options from Stepper

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

Author: obulat

src/components/FirstStep.vue

@@ -33,7 +33,11 @@ export default {
         },
         radio: {
             get() {
-                return this.$props.selected ? 'yes' : 'no'
+                if (this.$props.selected === undefined) {
+                    return undefined
+                } else {
+                    return this.$props.selected ? 'yes' : 'no'
+                }
             },
             set(newVal) {
                 this.$emit('change', newVal === 'yes')

src/components/Step.vue

@@ -49,7 +49,12 @@ export default {
         },
         radio: {
             get() {
-                return this.attributes[this.$props.stepName] ? 'yes' : 'no'
+                const selected = this.attributes[this.$props.stepName]
+                if (selected === undefined) {
+                    return undefined
+                } else {
+                    return selected ? 'yes' : 'no'
+                }
             },
             set(newVal) {
                 this.$store.commit('toggleSelected', this.$props.stepName)

src/components/Stepper.vue

@@ -49,7 +49,7 @@
                 <a
                     v-if="step.name!=='AD'"
                     role="button"
-                    class="pagination-next"
+                    :class="['pagination-next', nextButtonDisabled(idx)]"
                     @click="handleNext(step.name)">
                     {{$t('step.next-label')}}
                 </a>
@@ -96,12 +96,12 @@ export default {
                 // eg. When we choose BY, Copyright Waiver is not shown
                 // ENABLED: Steps are shown but disabled when they cannot be chosen
                 // eg. When we choose ND, SA is disabled
-                { id: 0, name: 'FS', visible: true, enabled: true, status: 'current', selected: false },
-                { id: 1, name: 'BY', visible: true, enabled: true, status: 'inactive', selected: true },
-                { id: 2, name: 'NC', visible: true, enabled: true, status: 'inactive', selected: false },
-                { id: 3, name: 'ND', visible: true, enabled: true, status: 'inactive', selected: false },
-                { id: 4, name: 'SA', visible: true, enabled: true, status: 'inactive', selected: false },
-                { id: 5, name: 'CW', visible: false, enabled: true, status: 'inactive', selected: false },
+                { id: 0, name: 'FS', visible: true, enabled: true, status: 'current', selected: undefined },
+                { id: 1, name: 'BY', visible: true, enabled: true, status: 'inactive', selected: undefined },
+                { id: 2, name: 'NC', visible: true, enabled: true, status: 'inactive', selected: undefined },
+                { id: 3, name: 'ND', visible: true, enabled: true, status: 'inactive', selected: undefined },
+                { id: 4, name: 'SA', visible: true, enabled: true, status: 'inactive', selected: undefined },
+                { id: 5, name: 'CW', visible: false, enabled: true, status: 'inactive', selected: undefined },
                 { id: 6, name: 'DD', visible: false, enabled: true, status: 'inactive', selected: undefined },
                 { id: 7, name: 'AD', visible: true, enabled: true, status: 'inactive', selected: undefined }
             ]
@@ -112,13 +112,21 @@ export default {
             const prefix = `stepper.${stepId}`
             return this.status === 'current' ? `${prefix}.question` : `${prefix}.heading`
         },
+        nextButtonDisabled(stepId) {
+            if (this.steps[stepId].selected === undefined) {
+                return 'disabled'
+            } else {
+                return ''
+            }
+        },
         changeFirstStep() {
             this.$set(this.steps, 0, { ...this.steps[0], selected: !this.steps[0].selected })
         },
         isLicenseAttribute(stepId) {
             return ['BY', 'NC', 'ND', 'SA'].indexOf(stepId) > -1
         },
         handleNext() {
+            if (this.steps[this.currentStepId].selected === undefined) return
             const currentStepName = this.steps[this.currentStepId].name
             const stepSelected = this.currentStepId === 0
                 ? this.steps[0].selected
@@ -268,6 +276,14 @@ export default {
         font-size: 18px;
         line-height: 24px;
     }
+    .pagination-next.disabled {
+        background-color: #D8D8D8;
+    }
+    .pagination-next.disabled:hover,
+    .pagination-next.disabled:active {
+        box-shadow: none;
+        border: 1px solid transparent;
+    }
     /* Tooltip container */
     .tooltip {
         position: relative;

src/store/index.js

@@ -1,12 +1,12 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import { CCBYAttributes, CC0Attributes, attrToShort, attrToFull, licenseUrl, licenseIconsArr } from '../utils/license-utilities.js'
+import { defaultAttributes, CC0Attributes, attrToShort, attrToFull, licenseUrl, licenseIconsArr } from '../utils/license-utilities.js'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
     state: {
-        currentLicenseAttributes: { ...CCBYAttributes },
+        currentLicenseAttributes: { ...defaultAttributes },
         attributionDetails: {
             creatorName: '',
             creatorProfileUrl: '',

src/utils/license-utilities.js

@@ -1,5 +1,6 @@
 const CC0Attributes = { BY: false, NC: false, ND: false, SA: false }
 const CCBYAttributes = { BY: true, NC: false, ND: false, SA: false }
+const defaultAttributes = { BY: undefined, NC: undefined, ND: undefined, SA: undefined }
 const visibleSetters = {
     FS: {
         true: ['FS', 'DD', 'AD'],
@@ -101,4 +102,4 @@ function licenseIconsArr(licenseAttributes) {
     return iconsArray
 }
 
-export { CC0Attributes, CCBYAttributes, visibleSetters, disabledSetters, shortToAttr, attrToShort, attrToFull, licenseUrl, licenseSlug, licenseIconsArr }
+export { defaultAttributes, CC0Attributes, CCBYAttributes, visibleSetters, disabledSetters, shortToAttr, attrToShort, attrToFull, licenseUrl, licenseSlug, licenseIconsArr }