Skip to content

Commit 05718c0

Browse files
obulatobulat
authored
Stepper style (#238)
* Refactor stepper and adjust styles to match the v2 mockup * Combine LicenseDropdown and DropdownStep components * Remove unused StepResult component * Extract StepHeader component * Improve tests * Remove extra spaces * Fix license code generation regression (creator was not added) * Remove brittle tests * Fix testing errors and linting * Fix gh actions * Remove snapshot
1 parent 63440f9 commit 05718c0

28 files changed

+954
-1351
lines changed

‎.github/workflows/pull_request.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
name: Pull request
1+
name: Publish
22

33
on:
44
push:
@@ -26,7 +26,7 @@ jobs:
2626
- name: Build
2727
run: |
2828
npm run build
29-
echo "chooser-beta.creatovecommons.org" > "./dist/CNAME"
29+
echo "chooser-beta.creativecommons.org" > "./dist/CNAME"
3030
rm -r -f "./docs"
3131
mv -f -v "./dist" "./docs"
3232

‎.github/workflows/push.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
name: Push
1+
name: Lint and Test
22

3-
on: [push]
3+
on: pull_request
44

55
jobs:
66
build:

‎src/components/AttributionDetailsStep.vue‎

Lines changed: 31 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,34 @@
11
<template>
2-
<div class="step-content">
3-
<div
4-
v-if="status==='current'"
5-
class="step-actions"
6-
>
7-
<p class="attribution-details-instructions">
8-
{{ $t('stepper.AD.instructions') }}
9-
</p>
10-
<form class="attribution-details-form">
11-
<b-field :label="this.$t('stepper.AD.form.work-title.label')">
12-
<b-input
13-
v-model="workTitle"
14-
:placeholder="this.$t('stepper.AD.form.work-title.placeholder')"
15-
/>
16-
</b-field>
17-
<b-field :label="this.$t('stepper.AD.form.creator-name.label')">
18-
<b-input
19-
v-model="creatorName"
20-
:placeholder="this.$t('stepper.AD.form.creator-name.placeholder')"
21-
/>
22-
</b-field>
23-
<b-field :label="this.$t('stepper.AD.form.work-url.label')">
24-
<b-input
25-
v-model="workUrl"
26-
:placeholder="this.$t('stepper.AD.form.work-url.placeholder')"
27-
/>
28-
</b-field>
29-
<b-field :label="this.$t('stepper.AD.form.creator-profile.label')">
30-
<b-input
31-
v-model="creatorProfileUrl"
32-
:placeholder="this.$t('stepper.AD.form.creator-profile.placeholder')"
33-
/>
34-
</b-field>
35-
</form>
36-
</div>
2+
<div class="step-actions">
3+
<p class="attribution-details-instructions">
4+
{{ $t('stepper.AD.instructions') }}
5+
</p>
6+
<form class="attribution-details-form">
7+
<b-field :label="this.$t('stepper.AD.form.creator-name.label')">
8+
<b-input
9+
v-model="creatorName"
10+
:placeholder="this.$t('stepper.AD.form.creator-name.placeholder')"
11+
/>
12+
</b-field>
13+
<b-field :label="this.$t('stepper.AD.form.work-title.label')">
14+
<b-input
15+
v-model="workTitle"
16+
:placeholder="this.$t('stepper.AD.form.work-title.placeholder')"
17+
/>
18+
</b-field>
19+
<b-field :label="this.$t('stepper.AD.form.work-url.label')">
20+
<b-input
21+
v-model="workUrl"
22+
:placeholder="this.$t('stepper.AD.form.work-url.placeholder')"
23+
/>
24+
</b-field>
25+
<b-field :label="this.$t('stepper.AD.form.creator-profile.label')">
26+
<b-input
27+
v-model="creatorProfileUrl"
28+
:placeholder="this.$t('stepper.AD.form.creator-profile.placeholder')"
29+
/>
30+
</b-field>
31+
</form>
3732
</div>
3833
</template>
3934
<script>
@@ -45,7 +40,7 @@ export default {
4540
status: {
4641
type: String,
4742
validator(value) {
48-
return ['current', 'previous', 'inactive'].includes(value)
43+
return ['active', 'previous', 'inactive'].includes(value)
4944
}
5045
}
5146
},

‎src/components/ChooserStep.vue‎

Lines changed: 33 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,57 @@
11
<template>
2-
<div class="step-content">
3-
<div
4-
v-if="status==='previous'||showDisabledDue"
5-
class="step-description vocab-body body-normal"
6-
>
7-
<p class="vocab-body body-normal">
8-
{{ $t(cardText) }}
9-
</p>
10-
</div>
11-
<div
12-
v-else-if="status==='current'"
13-
class="step-actions"
14-
>
15-
<div
16-
class="field"
17-
:class="yesSelected"
2+
<div class="step-actions">
3+
<div :class="['field', yesSelected]">
4+
<v-radio
5+
v-model="radio"
6+
native-value="yes"
7+
name="radio"
188
>
19-
<v-radio
20-
v-model="radio"
21-
native-value="yes"
22-
>
23-
<span class="vocab-body body-normal">{{ $t('stepper.yes') }}{{ $t(yesText) }}</span>
24-
</v-radio>
25-
</div>
26-
<div
27-
class="field"
28-
:class="noSelected"
9+
<span class="vocab-body body-normal">{{ $t('stepper.yes') }}{{ $t(yesText) }}</span>
10+
</v-radio>
11+
</div>
12+
<div :class="['field', noSelected]">
13+
<v-radio
14+
v-model="radio"
15+
native-value="no"
16+
name="radio"
2917
>
30-
<v-radio
31-
v-model="radio"
32-
native-value="no"
33-
>
34-
<span class="vocab-body body-normal">{{ $t('stepper.no') }}{{ $t(noText) }}</span>
35-
</v-radio>
36-
</div>
18+
<span class="vocab-body body-normal">{{ $t('stepper.no') }}{{ $t(noText) }}</span>
19+
</v-radio>
3720
</div>
3821
</div>
3922
</template>
4023

4124
<script>
42-
4325
export default {
4426
name: 'ChooserStep',
4527
props: {
46-
stepName: String,
28+
name: String,
4729
selected: Boolean,
48-
stepId: Number,
30+
id: Number,
4931
status: {
5032
type: String,
5133
validator(value) {
52-
return ['current', 'previous', 'inactive'].includes(value)
34+
return ['active', 'previous', 'inactive'].includes(value)
5335
}
5436
},
55-
reversed: Boolean,
5637
enabled: Boolean,
5738
disabledDue: String
5839
},
5940
computed: {
41+
/**
42+
* NC, ND and SA steps are reversed: unlike BY, they are selected when the user
43+
* answers no, and not selected when the user answers yes
44+
* @returns {boolean}
45+
*/
46+
reversed() {
47+
return ['NC', 'ND', 'SA'].indexOf(this.$props.name) > -1
48+
},
6049
showDisabledDue() {
6150
return !this.$props.enabled && this.$props.disabledDue !== undefined
6251
},
6352
qualifier() {
6453
return this.reversed ? !this.selected : this.selected
6554
},
66-
cardText() {
67-
if (this.stepName === 'FS') {
68-
return this.$props.selected ? 'stepper.FS.selected' : 'stepper.FS.not-selected'
69-
}
70-
if (this.$props.enabled === false) {
71-
return this.$props.disabledDue === 'ND'
72-
? 'stepper.disabled-text-ND'
73-
: 'stepper.disabled-text'
74-
}
75-
const prefix = `stepper.${this.$props.stepName}.${this.qualifier ? '' : 'not-'}`
76-
return `${prefix}selected`
77-
},
7855
radio: {
7956
get() {
8057
if (this.$props.selected === undefined) {
@@ -84,22 +61,19 @@ export default {
8461
}
8562
},
8663
set(newVal) {
87-
let isSelected = newVal === 'yes'
88-
isSelected = this.reversed ? !isSelected : isSelected
89-
this.$emit('change', this.$props.stepName, this.$props.stepId, isSelected)
64+
let selected = newVal === 'yes'
65+
selected = this.reversed ? !selected : selected
66+
this.$emit('change', { name: this.$props.name, id: this.$props.id, selected })
9067
}
9168
},
9269
tPrefix() {
93-
return 'stepper.' + this.stepName
94-
},
95-
question() {
96-
return this.tPrefix + '.question'
70+
return `stepper.${this.$props.name}`
9771
},
9872
yesText() {
99-
return this.tPrefix + '.selected'
73+
return `${this.tPrefix}.selected`
10074
},
10175
noText() {
102-
return this.tPrefix + '.not-selected'
76+
return `${this.tPrefix}.not-selected`
10377
},
10478
yesSelected() {
10579
return this.selected ? 'selected' : 'not-selected'

‎src/components/CopyrightWaiverStep.vue‎

Lines changed: 22 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,28 @@
11
<template>
2-
<div class="step-content">
3-
<div
4-
v-if="status==='previous'"
5-
class="step-description vocab-body body-normal"
6-
>
7-
<p class="vocab-body body-normal">
8-
{{ $t('stepper.CW.selected') }}
9-
</p>
10-
</div>
11-
<div
12-
v-else-if="status==='current'"
13-
class="step-actions"
14-
>
15-
<v-checkbox v-model="copyrightWaiverAgreed">
16-
{{ $t('stepper.CW.copyright-waive-agreement') }}
17-
</v-checkbox>
18-
<textarea
19-
:value="this.$t('cc0-waiver.text')"
20-
:class="'waiver-textarea'"
21-
/>
22-
<v-checkbox v-model="copyrightWaiverConfirmed">
23-
{{ $t("stepper.CW.copyright-waive-confirmation") }}
24-
</v-checkbox>
25-
</div>
2+
<div class="step-actions">
3+
<v-checkbox v-model="copyrightWaiverAgreed">
4+
{{ $t('stepper.CW.copyright-waive-agreement') }}
5+
</v-checkbox>
6+
<textarea
7+
:value="this.$t('cc0-waiver.text')"
8+
:class="'waiver-textarea'"
9+
/>
10+
<v-checkbox v-model="copyrightWaiverConfirmed">
11+
{{ $t("stepper.CW.copyright-waive-confirmation") }}
12+
</v-checkbox>
2613
</div>
2714
</template>
2815
<script>
2916
export default {
3017
name: 'CopyrightWaiverStep',
3118
props: {
32-
stepId: Number,
33-
stepName: String,
19+
id: Number,
20+
name: String,
3421
selected: Boolean,
3522
status: {
3623
type: String,
3724
validator(value) {
38-
return ['current', 'previous', 'inactive'].includes(value)
25+
return ['active', 'previous', 'inactive'].includes(value)
3926
}
4027
}
4128
},
@@ -52,11 +39,13 @@ export default {
5239
},
5340
set() {
5441
this.agreed = !this.agreed
42+
const payload = { name: this.$props.name, id: this.$props.id }
5543
if (this.agreed && this.confirmed) {
56-
this.$emit('change', this.$props.stepName, this.$props.stepId, true)
44+
payload.selected = true
5745
} else if (!this.agreed) {
58-
this.$emit('change', this.$props.stepName, this.$props.stepId, undefined)
46+
payload.selected = undefined
5947
}
48+
this.$emit('change', payload)
6049
}
6150
},
6251
copyrightWaiverConfirmed: {
@@ -65,11 +54,13 @@ export default {
6554
},
6655
set() {
6756
this.confirmed = !this.confirmed
57+
const payload = { name: this.$props.name, id: this.$props.id }
6858
if (this.agreed && this.confirmed) {
69-
this.$emit('change', this.$props.stepName, this.$props.stepId, true)
59+
payload.selected = true
7060
} else if (!this.confirmed) {
71-
this.$emit('change', this.$props.stepName, this.$props.stepId, undefined)
61+
payload.selected = undefined
7262
}
63+
this.$emit('change', payload)
7364
}
7465
}
7566
}

0 commit comments

Comments
 (0)