Merge branch 'master' of https://github.com/creativecommons/chooser into master

obulat · obulat · commit aaafd9bfb39b · 2020-12-18T15:20:30.000+03:00
diff --git a/src/components/AttributionDetailsStep.vue b/src/components/AttributionDetailsStep.vue
@@ -1,31 +1,31 @@
 <template>
     <div class="step-actions">
-        <p class="attribution-details-instructions">
+        <p class="body-normal">
             {{ $t('stepper.AD.instructions') }}
         </p>
         <form class="attribution-details-form">
-            <b-field :label="this.$t('stepper.AD.form.work-title.label')">
+            <b-field :label="$t('stepper.AD.form.work-title.label')">
                 <b-input
                     v-model="workTitle"
-                    :placeholder="this.$t('stepper.AD.form.work-title.placeholder')"
+                    :placeholder="$t('stepper.AD.form.work-title.placeholder')"
                 />
             </b-field>
-            <b-field :label="this.$t('stepper.AD.form.creator-name.label')">
+            <b-field :label="$t('stepper.AD.form.creator-name.label')">
                 <b-input
                     v-model="creatorName"
-                    :placeholder="this.$t('stepper.AD.form.creator-name.placeholder')"
+                    :placeholder="$t('stepper.AD.form.creator-name.placeholder')"
                 />
             </b-field>
-            <b-field :label="this.$t('stepper.AD.form.work-url.label')">
+            <b-field :label="$t('stepper.AD.form.work-url.label')">
                 <b-input
                     v-model="workUrl"
-                    :placeholder="this.$t('stepper.AD.form.work-url.placeholder')"
+                    :placeholder="$t('stepper.AD.form.work-url.placeholder')"
                 />
             </b-field>
-            <b-field :label="this.$t('stepper.AD.form.creator-profile.label')">
+            <b-field :label="$t('stepper.AD.form.creator-profile.label')">
                 <b-input
                     v-model="creatorProfileUrl"
-                    :placeholder="this.$t('stepper.AD.form.creator-profile.placeholder')"
+                    :placeholder="$t('stepper.AD.form.creator-profile.placeholder')"
                 />
             </b-field>
         </form>
@@ -36,14 +36,7 @@ import { mapMutations, mapState } from 'vuex'
 
 export default {
     name: 'AttributionDetails',
-    props: {
-        status: {
-            type: String,
-            validator(value) {
-                return ['active', 'previous', 'inactive'].includes(value)
-            }
-        }
-    },
+    inheritAttrs: false,
     computed: {
         ...mapState(['attributionDetails']),
         creatorName: {
@@ -100,11 +93,6 @@ export default {
     }
 }
 @media only screen and (max-width: 768px) {
-    .attribution-details-instructions {
-        font-size: 0.8125rem;
-        line-height: 1.1875rem;
-        font-weight: 600;
-    }
     .attribution-details-form .label {
         font-style: normal;
         font-size: 0.8125rem;
diff --git a/src/components/ChooserStep.vue b/src/components/ChooserStep.vue
@@ -24,16 +24,11 @@
 <script>
 export default {
     name: 'ChooserStep',
+    inheritAttrs: false,
     props: {
         name: String,
         selected: Boolean,
         id: Number,
-        status: {
-            type: String,
-            validator(value) {
-                return ['active', 'previous', 'inactive'].includes(value)
-            }
-        },
         enabled: Boolean,
         disabledDue: String
     },
diff --git a/src/components/CopyrightWaiverStep.vue b/src/components/CopyrightWaiverStep.vue
@@ -4,7 +4,7 @@
             {{ $t('stepper.CW.copyright-waive-agreement') }}
         </v-checkbox>
         <textarea
-            :value="this.$t('cc0-waiver.text')"
+            :value="$t('cc0-waiver.text')"
             :class="'waiver-textarea'"
         />
         <v-checkbox v-model="copyrightWaiverConfirmed">
@@ -15,16 +15,11 @@
 <script>
 export default {
     name: 'CopyrightWaiverStep',
+    inheritAttrs: false,
     props: {
         id: Number,
         name: String,
-        selected: Boolean,
-        status: {
-            type: String,
-            validator(value) {
-                return ['active', 'previous', 'inactive'].includes(value)
-            }
-        }
+        selected: Boolean
     },
     data() {
         return {
diff --git a/src/components/DropdownStep.vue b/src/components/DropdownStep.vue
@@ -2,7 +2,7 @@
     <div class="step-actions">
         <b-field class="license-dropdown">
             <b-select
-                :placeholder="this.$t('stepper.DD.placeholder')"
+                :placeholder="$t('stepper.DD.placeholder')"
                 :value="shortName"
                 @input="setCurrentLicense"
             >
@@ -21,13 +21,8 @@
 import { mapGetters } from 'vuex'
 export default {
     name: 'DropdownStep',
+    inheritAttrs: false,
     props: {
-        status: {
-            type: String,
-            validator(value) {
-                return ['active', 'previous', 'inactive'].includes(value)
-            }
-        },
         id: Number
     },
     data() {
@@ -66,11 +61,6 @@ export default {
 <style lang="scss">
 .license-dropdown {
     margin-top: 1rem;
-    .label{
-        font-weight: normal;
-        opacity: 0.8;
-        font-size: 1em;
-    }
     .select, select {
         width: 100%;
     }
@@ -81,4 +71,9 @@ export default {
         }
     }
 }
+@media only screen and (max-width: 768px) {
+    .license-dropdown {
+        margin-top: 0;
+    }
+}
 </style>
diff --git a/src/components/LicenseHTML.vue b/src/components/LicenseHTML.vue
@@ -11,7 +11,7 @@
 
 <script>
 import { mapGetters, mapState } from 'vuex'
-import { generateHTML } from '../utils/license-utilities'
+import { generateHTML, LICENSES } from '../utils/license-utilities'
 
 export default {
     name: 'LicenseHTML',
@@ -24,10 +24,12 @@ export default {
             const { work, creator, license, paragraph } = generateHTML(this.attributionDetails, this.shortName, isFull)
             const licenseCodeSpan = this.$t('license-use.richtext.full-text', {
                 workTitle: work || this.$t('license-use.richtext.workTitle'),
-                creator,
-                license,
+                creator: creator,
+                license: license,
                 by: creator ? this.$t('license-use.richtext.by') : '',
-                'licensed-text': this.$t('license-use.richtext.licensed-text')
+                'licenseMark': this.shortName === LICENSES.CC0.SHORT
+                    ? this.$t('license-use.richtext.marked-text')
+                    : this.$t('license-use.richtext.licensed-text')
             })
             return `${paragraph}${licenseCodeSpan}</p>`
         }
diff --git a/src/components/StepHeader.vue b/src/components/StepHeader.vue
@@ -136,9 +136,9 @@ export default {
         }
     }
     .step-header__caption {
-        font-size: 0.8125rem;
-        line-height: 1.1875rem;
-        font-weight: 600;
+        font-size: 1rem;
+        line-height: 1.5rem;
+        font-weight: 400;
     }
     .step-header {
         padding-top: 1rem;
diff --git a/src/components/StepNavigation.vue b/src/components/StepNavigation.vue
@@ -9,7 +9,7 @@
         </v-button>
         <v-button
             v-if="stepName!=='AD'"
-            :class="['is-success', 'next-button', { 'disabled' : isNextEnabled } ]"
+            :class="['is-success', 'next-button', { 'disabled' : !isNextEnabled } ]"
             :disabled="!isNextEnabled"
             @click="handleNavigation('next')"
         >
@@ -60,7 +60,8 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
+@import '~@creativecommons/vocabulary/scss/color';
 .step-navigation {
     display: flex;
     flex-direction: row;
@@ -72,15 +73,20 @@ export default {
     }
     .button.restart-button {
         margin-left: auto;
-        color: #008000;
+        color: $color-forest-green;
     }
     .button.next-button.is-success {
-        background-color: #008000;
+        background-color: $color-forest-green;
         color: white;
         &:hover, &:active, &:focus {
-            background-color: #008B00;
+            background-color: $color-brighter-forest-green;
         }
     }
 }
-
+@media only screen and (max-width: 768px) {
+    .step-navigation {
+        padding-right: 0;
+        padding-left: 0;
+    }
+}
 </style>
diff --git a/src/components/Stepper.vue b/src/components/Stepper.vue
@@ -1,8 +1,5 @@
 <template>
-    <div
-        ref="top"
-        class="stepper__container"
-    >
+    <div class="stepper__container">
         <div
             v-for="(step, idx) in visibleSteps()"
             :key="idx"
@@ -11,7 +8,6 @@
         >
             <step-header
                 :step="step"
-                v-bind="step"
                 @activate="setActiveStep(step.id)"
             />
             <div
@@ -21,19 +17,17 @@
             >
                 <component
                     :is="stepActionComponent(step)"
-                    v-if="step.status === 'active'"
                     v-bind="stepActionProps(step)"
                     @change="changeStepSelected"
                 />
+                <StepNavigation
+                    :step-name="step.name"
+                    :is-next-enabled="isNextEnabled(step.id)"
+                    @navigate="navigate"
+                    @restart="restart"
+                    @done="done"
+                />
             </div>
-            <StepNavigation
-                v-if="step.status === 'active'"
-                :step-name="step.name"
-                :is-next-enabled="isNextEnabled(step.id)"
-                @navigate="navigate"
-                @restart="restart"
-                @done="done"
-            />
         </div>
     </div>
 </template>
@@ -289,8 +283,6 @@ export default {
             cursor: pointer;
         }
     }
-    .step-container.completed:not(.disabled):hover {
-    }
     .step-container.completed:not(.disabled):hover + .step-container {
         border-top: none;
     }
diff --git a/src/locales/en.js b/src/locales/en.js
@@ -152,11 +152,11 @@ export const messages = {
         'copy-label': 'Copy',
         'copied-label': 'Copied!',
         richtext: {
-            'full-text': '{workTitle} {by} {creator}{licenseMark} {license}{print-instructions}',
+            'full-text': '{workTitle}{by}{creator}{licenseMark} {license}{print-instructions}',
             workTitle: 'This work',
-            by: 'by',
-            'licensed-text': 'is licensed under',
-            'marked-text': 'is marked with',
+            by: ' by ',
+            'licensed-text': ' is licensed under',
+            'marked-text': '  marked with',
             'print-instructions': '. To view a copy of this license, visit {linkToLicenseDeed}'
         },
         print: {
diff --git a/src/styles/vocab.scss b/src/styles/vocab.scss
@@ -27,10 +27,10 @@
 
         }
         .body-normal {
-            font-size: 0.8125rem;
+            font-size: 1rem;
             font-style: normal;
-            font-weight: 600;
-            line-height: 1.1875rem;
+            font-weight: 400;
+            line-height: 1.5rem;
             letter-spacing: 0;
             text-align: left;
 
diff --git a/src/utils/license-utilities.js b/src/utils/license-utilities.js
@@ -218,9 +218,9 @@ function generateLicenseCode(licenseAttr, licenseName) {
         .map(attr => `<img ${iconStyle} src="${ICON_BASE_URL}/${attr.toLowerCase()}.svg${assetPathRef}">`
         ).join('')
 
-    return (`<a rel="license" href="${licenseURL(licenseAttr)}" target="_blank"
-        rel="license noopener noreferrer" style="display:inline-block;">
-        ${licenseName}${licenseIconsCode}</a>`)
+    return (`<a rel="license" href="${licenseURL(licenseAttr)}" target="_blank"` +
+        ' rel="license noopener noreferrer" style="display:inline-block;">' +
+        `${licenseName}${licenseIconsCode}</a>`)
 }
 
 /**
diff --git a/tests/unit/specs/components/LicenseHTML.spec.js b/tests/unit/specs/components/LicenseHTML.spec.js
@@ -5,9 +5,10 @@ import LicenseHTML from '@/components/LicenseHTML'
 import createStore from '@/store'
 import { CCBYAttributes } from '@/utils/license-utilities'
 
-const defaultHTML = '<p xmlns:dct="http://purl.org/dc/terms/" xmlns:cc="http://creativecommons.org/ns#">This work   <a rel="license" href="https://creativecommons.org/licenses/by/4.0?ref=chooser-v1" target="_blank"\n' +
-    '        rel="license noopener noreferrer" style="display:inline-block;">\n' +
-    '        CC BY 4.0<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"></a></p>'
+const defaultHTML = '<p xmlns:dct="http://purl.org/dc/terms/" xmlns:cc="http://creativecommons.org/ns#">This work is licensed under <a rel="license" href="https://creativecommons.org/licenses/by/4.0' +
+    '?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY 4.0<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"' +
+    ' src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.cre' +
+    'ativecommons.org/presskit/icons/by.svg?ref=chooser-v1"></a></p>'
 
 describe('LicenseHTML.vue', () => {
     let wrapper

Original file line number	Diff line number	Diff line change
`@@ -136,9 +136,9 @@ export default {`
`136`	`136`	`}`
`137`	`137`	`}`
`138`	`138`	`.step-header__caption {`
`139`		`- font-size: 0.8125rem;`
`140`		`- line-height: 1.1875rem;`
`141`		`- font-weight: 600;`
	`139`	`+ font-size: 1rem;`
	`140`	`+ line-height: 1.5rem;`
	`141`	`+ font-weight: 400;`
`142`	`142`	`}`
`143`	`143`	`.step-header {`
`144`	`144`	`padding-top: 1rem;`