added new 'year-of-creation' attribution details

src/components/AttributionDetailsStep.vue

@@ -24,6 +24,12 @@
                 :label="$t('stepper.AD.form.creator-profile.label')"
                 :placeholder="$t('stepper.AD.form.creator-profile.placeholder')"
             />
+            <v-input
+                v-if="currentLicenseAttributes.BY"
+                v-model="yearOfCreation"
+                :label="$t('stepper.AD.form.year-of-creation.label')"
+                :placeholder="$t('stepper.AD.form.year-of-creation.placeholder')"
+            />
         </form>
     </div>
 </template>
@@ -44,7 +50,7 @@ export default {
         }
     },
     computed: {
-        ...mapState(['attributionDetails']),
+        ...mapState(['attributionDetails', 'currentLicenseAttributes']),
         creatorName: {
             get() { return this.attributionDetails.creatorName },
             set(newVal) {
@@ -68,10 +74,16 @@ export default {
             set(newVal) {
                 this.setWorkUrl(newVal)
             }
+        },
+        yearOfCreation: {
+            get() { return this.attributionDetails.yearOfCreation },
+            set(newVal) {
+                this.setYearOfCreation(newVal)
+            }
         }
     },
     methods: {
-        ...mapMutations(['setCreatorName', 'setCreatorProfileUrl', 'setWorkTitle', 'setWorkUrl'])
+        ...mapMutations(['setCreatorName', 'setCreatorProfileUrl', 'setWorkTitle', 'setWorkUrl', 'setYearOfCreation'])
     }
 
 }

src/components/LicenseText.vue

@@ -14,6 +14,13 @@
                 {{ workTitle }}
             </component>
         </template>
+        <template #yearOfCreation>
+            <component
+                :is="'span'"
+            >
+                {{ yearOfCreation }}
+            </component>
+        </template>
         <template #creator>
             <component
                 :is="isCreatorLink ? 'a' : 'span'"
@@ -105,9 +112,14 @@ export default {
         },
         workTitle() {
             return this.attributionDetails.workTitle
-                ? this.attributionDetails.workTitle
+                ? `${this.attributionDetails.workTitle}`
                 : this.$t('license-use.richtext.workTitle')
         },
+        yearOfCreation() {
+            return this.attributionDetails.yearOfCreation
+                ? `© ${this.attributionDetails.yearOfCreation}`
+                : ''
+        },
         workUrl() {
             const { workUrl } = this.attributionDetails
             if (workUrl && !workUrl.startsWith('http')) {

src/locales/en.json

@@ -84,6 +84,10 @@
         "work-url": {
           "label": "Link to Work",
           "placeholder": "https://janedoe.com/best-photo-ever.jpg"
+        },
+        "year-of-creation": {
+            "label": "Year Of Creation",
+            "placeholder": "YYYY"
         }
       }
     }
@@ -125,12 +129,13 @@
     "copy-label": "Copy",
     "copied-label": "Copied!",
     "richtext": {
-      "full-text": "{workTitle}{by}{creator}{licenseMark} {license}{print-instructions}",
+      "full-text": "{workTitle}{yearOfCreation}{by}{creator}{licenseMark} {license}{print-instructions}",
       "workTitle": "This work",
       "by": " by ",
       "licensed-text": " is licensed under",
       "marked-text": " is marked with",
-      "print-instructions": ". To view a copy of this license, visit {linkToLicenseDeed}"
+      "print-instructions": ". To view a copy of this license, visit {linkToLicenseDeed}",
+      "yearOfCreation": ""
     },
     "print": {
       "label": " To view a copy of this license, visit {linkToLicenseDeed}"

src/store/index.js

@@ -10,7 +10,8 @@ export const defaultState = {
         creatorName: '',
         creatorProfileUrl: '',
         workTitle: '',
-        workUrl: ''
+        workUrl: '',
+        yearOfCreation: ''
     },
     attributionType: 'short'
 }
@@ -85,6 +86,9 @@ const createStore = (state) => {
             setWorkUrl(state, newName) {
                 state.attributionDetails.workUrl = newName
             },
+            setYearOfCreation(state, newName) {
+                state.attributionDetails.yearOfCreation = newName
+            },
             setAttributionType(state, attrType) {
                 state.attributionType = attrType
             },

src/utils/license-utilities.js

@@ -198,7 +198,6 @@ function generateWorkCode(title, workUrl, isTitleDefault) {
     if (isTitleDefault && !workUrl) {
         return title
     }
-
     const titleMeta = 'property="dct:title"'
     if (!workUrl) {
         return `<span ${titleMeta}>${title}</span>`
@@ -208,6 +207,15 @@ function generateWorkCode(title, workUrl, isTitleDefault) {
     return `<a ${isTitleDefault ? '' : titleMeta} rel="cc:attributionURL" href="${absoluteUrl}">${title}</a>`
 }
 
+/**
+ * Generates the HTML for the rich text Year of Creation , including the year of Creation
+ * @param {number} yearOfCreation
+ * @returns {string}
+ */
+function generateYearOfCreation(yearOfCreation) {
+    const yearMeta = 'property="dct:title"'
+    return `<span ${yearMeta}> © ${yearOfCreation}</span>`
+}
 /**
  * Generates the html for the rich text license information, including license name,
  * link to the license deed, and license icons
@@ -235,11 +243,11 @@ function generateLicenseLink(licenseIcons, licenseUrl, licenseName) {
  * @param {ShortLicenseName} shortLicenseName
  * @param {Boolean} useFullName - Should the license name be full (short by default)
  * @param {Boolean} isTitleDefault
- * @returns {{creator: string, work: string, license: string}}
+ * @returns {{creator: string, work: string, license: string, year: string}}
  */
 function generateHTML(attributionDetails, shortLicenseName, useFullName = false, isTitleDefault = true) {
     const data = {}
-    const { creatorName, creatorProfileUrl, workUrl, workTitle } = attributionDetails
+    const { creatorName, creatorProfileUrl, workUrl, workTitle, yearOfCreation } = attributionDetails
 
     const licenseSlug = slugFromShort(shortLicenseName)
     const { ICONS: icons, URL: url, FULL: fullLicenseName } = LICENSES[licenseSlug]
@@ -248,6 +256,7 @@ function generateHTML(attributionDetails, shortLicenseName, useFullName = false,
     data.license = generateLicenseLink(icons, url, licenseName)
     data.creator = generateCreatorCode(creatorName, creatorProfileUrl)
     data.work = generateWorkCode(workTitle, workUrl, isTitleDefault)
+    data.year = generateYearOfCreation(yearOfCreation)
     return data
 }
 

tests/unit/specs/components/AttributionDetailsStep.spec.js

@@ -21,7 +21,8 @@ describe('AttributionDetailsStep Component Rendering', () => {
                             creatorProfileUrl: '',
                             workTitle: '',
                             workUrl: ''
-                        }
+                        },
+                        currentLicenseAttributes: {}
                     }
                 }
             }
@@ -51,7 +52,8 @@ describe('Store is updated when a user provides input', () => {
                 creatorProfileUrl: '',
                 workTitle: '',
                 workUrl: ''
-            }
+            },
+            currentLicenseAttributes: {}
         }
 
         store = new Vuex.Store({

tests/unit/specs/components/LicenseText.spec.js

@@ -70,7 +70,7 @@ describe('LicenseText.vue', () => {
 
     it('has correct information all data are provided', async() => {
         await wrapper.vm.$store.commit('setCreatorName', TEST_DATA.creatorName)
-        await wrapper.vm.$store.commit('setWorkTitle', TEST_DATA.workTitle)
+        await wrapper.vm.$store.commit('setWorkTitle', `${TEST_DATA.workTitle}`)
         await wrapper.vm.$store.commit('setCreatorProfileUrl', TEST_DATA.creatorProfileUrl)
         await wrapper.vm.$store.commit('setWorkUrl', TEST_DATA.workUrl)
         const titleElement = wrapper.find('[property="dct:title"]')