From f5f6aff572fdcd1fe430675da640e499da2b8291 Mon Sep 17 00:00:00 2001
From: Faruk D <f.diblen@esciencecenter.nl>
Date: Thu, 25 Aug 2022 10:42:26 +0200
Subject: [PATCH 1/9] move lastname i icons outside

---
 src/components/AuthorCardEditing.vue | 217 +++++++++++----------------
 1 file changed, 90 insertions(+), 127 deletions(-)

diff --git a/src/components/AuthorCardEditing.vue b/src/components/AuthorCardEditing.vue
index 27fb5502..00d70b60 100644
--- a/src/components/AuthorCardEditing.vue
+++ b/src/components/AuthorCardEditing.vue
@@ -1,9 +1,5 @@
 <template>
-    <q-card
-        flat
-        bordered
-        class="bg-formcard q-pa-md"
-    >
+    <q-card flat bordered class="bg-formcard q-pa-md">
         <div class="row">
             <h3 class="subquestion">
                 The person's given names
@@ -11,81 +7,37 @@
             </h3>
         </div>
         <div class="row">
-            <q-input
-                autofocus
-                bg-color="white"
-                class="col"
-                dense
-                label="given-names"
-                outlined
-                standout
-                title="The person's given names."
-                v-bind:model-value="givenNames"
-                v-bind:error="false"
-                v-bind:error-message="''"
-                v-on:update:modelValue="$emit('update', 'givenNames', $event)"
-            />
+            <q-input autofocus bg-color="white" class="col" dense label="given-names" outlined standout
+                title="The person's given names." v-bind:model-value="givenNames" v-bind:error="false"
+                v-bind:error-message="''" v-on:update:modelValue="$emit('update', 'givenNames', $event)" />
         </div>
         <div class="row">
             <h3 class="subquestion">
                 The person's last names, split into parts
+                <q-icon
+                    name="ion-information-circle-outline"
+                    size="24px"
+                    color="primary"
+                    v-on:click="showLastNameHelp = true"
+                    style="cursor:pointer;"
+                />
+                <SchemaGuideLink anchor="#definitionspersonname-particle" />
+                <SchemaGuideLink anchor="#definitionspersonname-suffix" class="q-pt-sm" />
+                <SchemaGuideLink anchor="#definitionspersonfamily-names" class="q-pt-sm" />
             </h3>
         </div>
         <div class="row">
-            <q-input
-                bg-color="white"
-                class="col-3"
-                dense
-                label="name-particle"
-                outlined
-                standout
+            <q-input bg-color="white" class="col-3" dense label="name-particle" outlined standout
                 title="The person's name particle, e.g., a nobiliary particle or a [preposition] meaning 'of' or 'from' (for example 'von' in 'Alexander von Humboldt')."
-                v-bind:model-value="nameParticle"
-                v-bind:error="false"
-                v-bind:error-message="''"
-                v-on:update:modelValue="$emit('update', 'nameParticle', $event)"
-            >
-                <SchemaGuideLink
-                    anchor="#definitionspersonname-particle"
-                    class="q-pt-sm"
-                />
-            </q-input>
-            <q-input
-                bg-color="white"
-                class="col"
-                dense
-                label="family-names"
-                outlined
-                standout
-                title="The person's family names."
-                v-bind:model-value="familyNames"
-                v-bind:error="false"
-                v-bind:error-message="''"
-                v-on:update:modelValue="$emit('update', 'familyNames', $event)"
-            >
-                <SchemaGuideLink
-                    anchor="#definitionspersonfamily-names"
-                    class="q-pt-sm"
-                />
-            </q-input>
-            <q-input
-                bg-color="white"
-                class="col-3"
-                dense
-                label="name-suffix"
-                outlined
-                standout
+                v-bind:model-value="nameParticle" v-bind:error="false" v-bind:error-message="''"
+                v-on:update:modelValue="$emit('update', 'nameParticle', $event)" />
+            <q-input bg-color="white" class="col" dense label="family-names" outlined standout
+                title="The person's family names." v-bind:model-value="familyNames" v-bind:error="false"
+                v-bind:error-message="''" v-on:update:modelValue="$emit('update', 'familyNames', $event)" />
+            <q-input bg-color="white" class="col-3" dense label="name-suffix" outlined standout
                 title="The person's name suffix, e.g. 'Jr.' for Sammy Davis Jr. or 'III' for Frank Edwin Wright III."
-                v-bind:model-value="nameSuffix"
-                v-bind:error="false"
-                v-bind:error-message="''"
-                v-on:update:modelValue="$emit('update', 'nameSuffix', $event)"
-            >
-                <SchemaGuideLink
-                    anchor="#definitionspersonname-suffix"
-                    class="q-pt-sm"
-                />
-            </q-input>
+                v-bind:model-value="nameSuffix" v-bind:error="false" v-bind:error-message="''"
+                v-on:update:modelValue="$emit('update', 'nameSuffix', $event)" />
         </div>
         <div class="row">
             <h3 class="subquestion">
@@ -94,21 +46,11 @@
             </h3>
         </div>
         <div class="row">
-            <q-input
-                bg-color="white"
-                class="col"
-                dense
-                label="email"
-                outlined
-                standout
-                title="The person's email address."
-                type="email"
-                v-bind:model-value="email"
-                v-bind:class="emailErrors.length > 0 ? 'has-error' : ''"
-                v-bind:error="emailErrors.length > 0"
+            <q-input bg-color="white" class="col" dense label="email" outlined standout
+                title="The person's email address." type="email" v-bind:model-value="email"
+                v-bind:class="emailErrors.length > 0 ? 'has-error' : ''" v-bind:error="emailErrors.length > 0"
                 v-bind:error-message="emailErrors.join(', ')"
-                v-on:update:modelValue="$emit('update', 'email', $event)"
-            />
+                v-on:update:modelValue="$emit('update', 'email', $event)" />
         </div>
         <div class="row">
             <h3 class="subquestion col">
@@ -121,57 +63,29 @@
             </h3>
         </div>
         <div class="row">
-            <q-input
-                bg-color="white"
-                class="col"
-                dense
-                label="affiliation"
-                outlined
-                standout
-                title="The person's affiliation."
-                v-bind:model-value="affiliation"
-                v-bind:error="false"
-                v-bind:error-message="''"
-                v-on:update:modelValue="$emit('update', 'affiliation', $event)"
-            />
-            <q-input
-                bg-color="white"
-                class="col"
-                dense
-                hint="Format: https://orcid.org/0000-0000-0000-0000"
-                mask="https://orcid.org/####-####-####-###X"
-                outlined
-                standout
-                title="The person's ORCID identifier."
-                v-bind:class="orcidErrors.length > 0 ? 'has-error' : ''"
-                v-bind:model-value="orcid"
-                v-bind:error="orcidErrors.length > 0"
+            <q-input bg-color="white" class="col" dense label="affiliation" outlined standout
+                title="The person's affiliation." v-bind:model-value="affiliation" v-bind:error="false"
+                v-bind:error-message="''" v-on:update:modelValue="$emit('update', 'affiliation', $event)" />
+            <q-input bg-color="white" class="col" dense hint="Format: https://orcid.org/0000-0000-0000-0000"
+                label="orcid" mask="https://orcid.org/####-####-####-###X" outlined standout
+                title="The person's ORCID identifier." v-bind:class="orcidErrors.length > 0 ? 'has-error' : ''"
+                v-bind:model-value="orcid" v-bind:error="orcidErrors.length > 0"
                 v-bind:error-message="orcidErrors.join(', ')"
-                v-on:update:modelValue="$emit('update', 'orcid', $event)"
-            />
+                v-on:update:modelValue="$emit('update', 'orcid', $event)" />
         </div>
 
         <q-card-actions align="right">
-            <q-btn
-                color="negative"
-                dense
-                icon="delete"
-                label="Remove"
-                v-on:click="$emit('removePressed')"
-            />
-            <q-btn
-                dense
-                icon="done"
-                label="Done"
-                v-on:click="$emit('closePressed')"
-            />
+            <q-btn color="negative" dense icon="delete" label="Remove" v-on:click="$emit('removePressed')" />
+            <q-btn dense icon="done" label="Done" v-on:click="$emit('closePressed')" />
         </q-card-actions>
     </q-card>
+    <InfoDialog v-model="showLastNameHelp" v-bind:data="helpData.lastName" />
 </template>
 
 <script lang="ts">
 import { byError, emailQueries, orcidQueries } from 'src/error-filtering'
-import { computed, defineComponent, onUpdated } from 'vue'
+import { computed, defineComponent, onUpdated, ref } from 'vue'
+import InfoDialog from 'components/InfoDialog.vue'
 import SchemaGuideLink from 'src/components/SchemaGuideLink.vue'
 import { useStepperErrors } from 'src/store/stepper-errors'
 import { useValidation } from 'src/store/validation'
@@ -228,9 +142,58 @@ export default defineComponent({
                 .filter(byError(errors.value))
                 .map(query => query.replace.message)
         })
+        const helpData = {
+            name: {
+                title: 'name',
+                url: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#type',
+                description: 'The type of the work that is being described by this CITATION.cff file.'
+            },
+            lastName: {
+                title: 'lastName',
+                url: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#title',
+                description: 'The name of the software or dataset.',
+                examples: [
+                    'cffconvert',
+                    'Firefox',
+                    'LibreOffice'
+                ]
+            },
+            email: {
+                title: 'email',
+                url: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#message',
+                description: 'A message to the human reader of the CITATION.cff file to let them know what to do with the citation metadata.',
+                examples: [
+                    'If you use this software, please cite it using the metadata from this file.',
+                    'Please cite this software using these metadata.',
+                    'Please cite this software using the metadata from "preferred-citation".'
+                ]
+            },
+            affiliation: {
+                title: 'affiliation',
+                url: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#message',
+                description: 'A message to the human reader of the CITATION.cff file to let them know what to do with the citation metadata.',
+                examples: [
+                    'If you use this software, please cite it using the metadata from this file.',
+                    'Please cite this software using these metadata.',
+                    'Please cite this software using the metadata from "preferred-citation".'
+                ]
+            },
+            orcid: {
+                title: 'orcid',
+                url: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#message',
+                description: 'A message to the human reader of the CITATION.cff file to let them know what to do with the citation metadata.',
+                examples: [
+                    'If you use this software, please cite it using the metadata from this file.',
+                    'Please cite this software using these metadata.',
+                    'Please cite this software using the metadata from "preferred-citation".'
+                ]
+            }
+        }
         return {
             emailErrors,
-            orcidErrors
+            helpData,
+            orcidErrors,
+            showLastNameHelp: ref(false),
         }
     },
     emits: ['closePressed', 'removePressed', 'update'],

From 79801ee6e9fd72cd47572a2fead178ffc797c1c8 Mon Sep 17 00:00:00 2001
From: Faruk D <f.diblen@esciencecenter.nl>
Date: Mon, 29 Aug 2022 12:09:27 +0200
Subject: [PATCH 2/9] add info dialog for author edit card and improve
 infodialog

---
 src/components/AuthorCardEditing.vue | 298 +++++++++++++++++++++------
 src/components/InfoDialog.vue        |  22 +-
 2 files changed, 251 insertions(+), 69 deletions(-)

diff --git a/src/components/AuthorCardEditing.vue b/src/components/AuthorCardEditing.vue
index 00d70b60..44cb27af 100644
--- a/src/components/AuthorCardEditing.vue
+++ b/src/components/AuthorCardEditing.vue
@@ -1,15 +1,36 @@
 <template>
-    <q-card flat bordered class="bg-formcard q-pa-md">
+    <q-card
+        flat
+        bordered
+        class="bg-formcard q-pa-md"
+    >
         <div class="row">
             <h3 class="subquestion">
                 The person's given names
-                <SchemaGuideLink anchor="#definitionspersongiven-names" />
+                <q-icon
+                    name="ion-information-circle-outline"
+                    size="24px"
+                    color="primary"
+                    v-on:click="showHelpDialogName = true"
+                    style="cursor:pointer;"
+                />
             </h3>
         </div>
         <div class="row">
-            <q-input autofocus bg-color="white" class="col" dense label="given-names" outlined standout
-                title="The person's given names." v-bind:model-value="givenNames" v-bind:error="false"
-                v-bind:error-message="''" v-on:update:modelValue="$emit('update', 'givenNames', $event)" />
+            <q-input
+                autofocus
+                bg-color="white"
+                class="col"
+                dense
+                label="given-names"
+                outlined
+                standout
+                title="The person's given names."
+                v-bind:model-value="givenNames"
+                v-bind:error="false"
+                v-bind:error-message="''"
+                v-on:update:modelValue="$emit('update', 'givenNames', $event)"
+            />
         </div>
         <div class="row">
             <h3 class="subquestion">
@@ -18,80 +39,194 @@
                     name="ion-information-circle-outline"
                     size="24px"
                     color="primary"
-                    v-on:click="showLastNameHelp = true"
+                    v-on:click="showHelpDialogLastName = true"
                     style="cursor:pointer;"
                 />
                 <SchemaGuideLink anchor="#definitionspersonname-particle" />
-                <SchemaGuideLink anchor="#definitionspersonname-suffix" class="q-pt-sm" />
-                <SchemaGuideLink anchor="#definitionspersonfamily-names" class="q-pt-sm" />
+                <SchemaGuideLink
+                    anchor="#definitionspersonname-suffix"
+                    class="q-pt-sm"
+                />
+                <SchemaGuideLink
+                    anchor="#definitionspersonfamily-names"
+                    class="q-pt-sm"
+                />
             </h3>
         </div>
         <div class="row">
-            <q-input bg-color="white" class="col-3" dense label="name-particle" outlined standout
+            <q-input
+                bg-color="white"
+                class="col-3"
+                dense
+                label="name-particle"
+                outlined
+                standout
                 title="The person's name particle, e.g., a nobiliary particle or a [preposition] meaning 'of' or 'from' (for example 'von' in 'Alexander von Humboldt')."
-                v-bind:model-value="nameParticle" v-bind:error="false" v-bind:error-message="''"
-                v-on:update:modelValue="$emit('update', 'nameParticle', $event)" />
-            <q-input bg-color="white" class="col" dense label="family-names" outlined standout
-                title="The person's family names." v-bind:model-value="familyNames" v-bind:error="false"
-                v-bind:error-message="''" v-on:update:modelValue="$emit('update', 'familyNames', $event)" />
-            <q-input bg-color="white" class="col-3" dense label="name-suffix" outlined standout
+                v-bind:model-value="nameParticle"
+                v-bind:error="false"
+                v-bind:error-message="''"
+                v-on:update:modelValue="$emit('update', 'nameParticle', $event)"
+            />
+            <q-input
+                bg-color="white"
+                class="col"
+                dense
+                label="family-names"
+                outlined
+                standout
+                title="The person's family names."
+                v-bind:model-value="familyNames"
+                v-bind:error="false"
+                v-bind:error-message="''"
+                v-on:update:modelValue="$emit('update', 'familyNames', $event)"
+            />
+            <q-input
+                bg-color="white"
+                class="col-3"
+                dense
+                label="name-suffix"
+                outlined
+                standout
                 title="The person's name suffix, e.g. 'Jr.' for Sammy Davis Jr. or 'III' for Frank Edwin Wright III."
-                v-bind:model-value="nameSuffix" v-bind:error="false" v-bind:error-message="''"
-                v-on:update:modelValue="$emit('update', 'nameSuffix', $event)" />
+                v-bind:model-value="nameSuffix"
+                v-bind:error="false"
+                v-bind:error-message="''"
+                v-on:update:modelValue="$emit('update', 'nameSuffix', $event)"
+            />
         </div>
         <div class="row">
             <h3 class="subquestion">
                 The person's email address
-                <SchemaGuideLink anchor="#definitionspersonemail" />
+                <q-icon
+                    name="ion-information-circle-outline"
+                    size="24px"
+                    color="primary"
+                    v-on:click="showHelpDialogEmail = true"
+                    style="cursor:pointer;"
+                />
             </h3>
         </div>
         <div class="row">
-            <q-input bg-color="white" class="col" dense label="email" outlined standout
-                title="The person's email address." type="email" v-bind:model-value="email"
-                v-bind:class="emailErrors.length > 0 ? 'has-error' : ''" v-bind:error="emailErrors.length > 0"
+            <q-input
+                bg-color="white"
+                class="col"
+                dense
+                label="email"
+                outlined
+                standout
+                title="The person's email address."
+                type="email"
+                v-bind:model-value="email"
+                v-bind:class="emailErrors.length > 0 ? 'has-error' : ''"
+                v-bind:error="emailErrors.length > 0"
                 v-bind:error-message="emailErrors.join(', ')"
-                v-on:update:modelValue="$emit('update', 'email', $event)" />
+                v-on:update:modelValue="$emit('update', 'email', $event)"
+            />
         </div>
         <div class="row">
             <h3 class="subquestion col">
                 The person's affiliation
-                <SchemaGuideLink anchor="#definitionspersonaffiliation" />
+                <q-icon
+                    name="ion-information-circle-outline"
+                    size="24px"
+                    color="primary"
+                    v-on:click="showHelpDialogAffiliation = true"
+                    style="cursor:pointer;"
+                />
             </h3>
             <h3 class="subquestion col">
                 The person's ORCID
-                <SchemaGuideLink anchor="#definitionspersonorcid" />
+                <q-icon
+                    name="ion-information-circle-outline"
+                    size="24px"
+                    color="primary"
+                    v-on:click="showHelpDialogOrcid = true"
+                    style="cursor:pointer;"
+                />
             </h3>
         </div>
         <div class="row">
-            <q-input bg-color="white" class="col" dense label="affiliation" outlined standout
-                title="The person's affiliation." v-bind:model-value="affiliation" v-bind:error="false"
-                v-bind:error-message="''" v-on:update:modelValue="$emit('update', 'affiliation', $event)" />
-            <q-input bg-color="white" class="col" dense hint="Format: https://orcid.org/0000-0000-0000-0000"
-                label="orcid" mask="https://orcid.org/####-####-####-###X" outlined standout
-                title="The person's ORCID identifier." v-bind:class="orcidErrors.length > 0 ? 'has-error' : ''"
-                v-bind:model-value="orcid" v-bind:error="orcidErrors.length > 0"
+            <q-input
+                bg-color="white"
+                class="col"
+                dense
+                label="affiliation"
+                outlined
+                standout
+                title="The person's affiliation."
+                v-bind:model-value="affiliation"
+                v-bind:error="false"
+                v-bind:error-message="''"
+                v-on:update:modelValue="$emit('update', 'affiliation', $event)"
+            />
+            <q-input
+                bg-color="white"
+                class="col"
+                dense
+                hint="Format: https://orcid.org/0000-0000-0000-0000"
+                label="orcid"
+                mask="https://orcid.org/####-####-####-###X"
+                outlined
+                standout
+                title="The person's ORCID identifier."
+                v-bind:class="orcidErrors.length > 0 ? 'has-error' : ''"
+                v-bind:model-value="orcid"
+                v-bind:error="orcidErrors.length > 0"
                 v-bind:error-message="orcidErrors.join(', ')"
-                v-on:update:modelValue="$emit('update', 'orcid', $event)" />
+                v-on:update:modelValue="$emit('update', 'orcid', $event)"
+            />
         </div>
 
         <q-card-actions align="right">
-            <q-btn color="negative" dense icon="delete" label="Remove" v-on:click="$emit('removePressed')" />
-            <q-btn dense icon="done" label="Done" v-on:click="$emit('closePressed')" />
+            <q-btn
+                color="negative"
+                dense
+                icon="delete"
+                label="Remove"
+                v-on:click="$emit('removePressed')"
+            />
+            <q-btn
+                dense
+                icon="done"
+                label="Done"
+                v-on:click="$emit('closePressed')"
+            />
         </q-card-actions>
     </q-card>
-    <InfoDialog v-model="showLastNameHelp" v-bind:data="helpData.lastName" />
+    <InfoDialog
+        v-model="showHelpDialogName"
+        v-bind:data="helpData.name"
+    />
+    <InfoDialog
+        v-model="showHelpDialogLastName"
+        v-bind:data="helpData.lastName"
+    />
+    <InfoDialog
+        v-model="showHelpDialogEmail"
+        v-bind:data="helpData.email"
+    />
+    <InfoDialog
+        v-model="showHelpDialogAffiliation"
+        v-bind:data="helpData.affiliation"
+    />
+    <InfoDialog
+        v-model="showHelpDialogOrcid"
+        v-bind:data="helpData.orcid"
+    />
 </template>
 
 <script lang="ts">
 import { byError, emailQueries, orcidQueries } from 'src/error-filtering'
 import { computed, defineComponent, onUpdated, ref } from 'vue'
 import InfoDialog from 'components/InfoDialog.vue'
-import SchemaGuideLink from 'src/components/SchemaGuideLink.vue'
 import { useStepperErrors } from 'src/store/stepper-errors'
 import { useValidation } from 'src/store/validation'
 
 export default defineComponent({
     name: 'AuthorCardEditing',
+    components: {
+        InfoDialog
+    },
     props: {
         index: {
             type: Number,
@@ -145,47 +280,83 @@ export default defineComponent({
         const helpData = {
             name: {
                 title: 'name',
-                url: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#type',
-                description: 'The type of the work that is being described by this CITATION.cff file.'
+                url: [
+                    {
+                        text: 'Click here to see the documentation for name.',
+                        link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersongiven-names'
+                    }
+                ],
+                description: 'The person\'s given names.',
+                examples: [
+                    'Jane',
+                    'John'
+                ]
             },
             lastName: {
-                title: 'lastName',
-                url: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#title',
-                description: 'The name of the software or dataset.',
+                title: 'lastNames',
+                url: [
+                    {
+                        text: 'Click here to see the documentation for name particle.',
+                        link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersonname-particle'
+                    },
+                    {
+                        text: 'Click here to see the documentation for family name.',
+                        link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersonfamily-names'
+                    },
+                    {
+                        text: 'Click here to see the documentation for name suffix.',
+                        link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersonname-suffix'
+                    }
+                ],
+                description: 'The person\'s given names.',
                 examples: [
-                    'cffconvert',
-                    'Firefox',
-                    'LibreOffice'
+                    'name particle: von',
+                    'family name: Doe',
+                    'name suffix: Jr.'
                 ]
             },
             email: {
                 title: 'email',
-                url: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#message',
-                description: 'A message to the human reader of the CITATION.cff file to let them know what to do with the citation metadata.',
+                url: [
+                    {
+                        text: 'Click here to see the documentation for email.',
+                        link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersonemail'
+                    }
+                ],
+                description: 'The person\'s email address.',
                 examples: [
-                    'If you use this software, please cite it using the metadata from this file.',
-                    'Please cite this software using these metadata.',
-                    'Please cite this software using the metadata from "preferred-citation".'
+                    'mail@research-project.org'
                 ]
             },
             affiliation: {
                 title: 'affiliation',
-                url: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#message',
-                description: 'A message to the human reader of the CITATION.cff file to let them know what to do with the citation metadata.',
+                url: [
+                    {
+                        text: 'Click here to see the documentation for affiliation.',
+                        link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersonaffiliation'
+                    }
+                ],
+                description: 'The person\'s affiliation.',
                 examples: [
-                    'If you use this software, please cite it using the metadata from this file.',
-                    'Please cite this software using these metadata.',
-                    'Please cite this software using the metadata from "preferred-citation".'
+                    'Netherlands eScience Center',
+                    'German Aerospace Center (DLR)'
                 ]
             },
             orcid: {
                 title: 'orcid',
-                url: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#message',
-                description: 'A message to the human reader of the CITATION.cff file to let them know what to do with the citation metadata.',
+                url: [
+                    {
+                        text: 'Click here to see the documentation for orcid.',
+                        link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersonorcid'
+                    },
+                    {
+                        text: 'https://orcid.org',
+                        link: 'https://orcid.org'
+                    }
+                ],
+                description: 'The person\'s ORCID identifier.',
                 examples: [
-                    'If you use this software, please cite it using the metadata from this file.',
-                    'Please cite this software using these metadata.',
-                    'Please cite this software using the metadata from "preferred-citation".'
+                    'https://orcid.org/0000-0003-4925-7248'
                 ]
             }
         }
@@ -193,11 +364,14 @@ export default defineComponent({
             emailErrors,
             helpData,
             orcidErrors,
-            showLastNameHelp: ref(false),
+            showHelpDialogLastName: ref(false),
+            showHelpDialogName: ref(false),
+            showHelpDialogEmail: ref(false),
+            showHelpDialogAffiliation: ref(false),
+            showHelpDialogOrcid: ref(false)
         }
     },
-    emits: ['closePressed', 'removePressed', 'update'],
-    components: { SchemaGuideLink }
+    emits: ['closePressed', 'removePressed', 'update']
 })
 </script>
 <style scoped>
diff --git a/src/components/InfoDialog.vue b/src/components/InfoDialog.vue
index 41581b64..a9bd39c0 100644
--- a/src/components/InfoDialog.vue
+++ b/src/components/InfoDialog.vue
@@ -38,14 +38,22 @@
                         </li>
                     </ul>
                 </q-card-section>
-                <q-card-section>
-                    <a
-                        v-bind:href="data.url"
-                        tabindex="-1"
-                        target="_blank"
+                <q-card-section v-if="data.url">
+                    <div class="text-h6">
+                        Related links
+                    </div>
+                    <div
+                        v-for="item in data.url"
+                        v-bind:key="item"
                     >
-                        Click here to see the documentation.
-                    </a>
+                        <a
+                            v-bind:href="item.link"
+                            tabindex="-1"
+                            target="_blank"
+                        >
+                            {{ item.text }}
+                        </a>
+                    </div>
                 </q-card-section>
             </q-card>
         </q-dialog>

From 54dd2fbe0a8edc873346c8aecacc467dbd4bb59d Mon Sep 17 00:00:00 2001
From: Faruk D <f.diblen@esciencecenter.nl>
Date: Mon, 29 Aug 2022 12:32:20 +0200
Subject: [PATCH 3/9] update info dialog example rendering

---
 src/components/InfoDialog.vue    |  5 +++-
 src/components/ScreenAuthors.vue | 43 ++++++++++++++++++++++++++++----
 2 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/src/components/InfoDialog.vue b/src/components/InfoDialog.vue
index a9bd39c0..c197e918 100644
--- a/src/components/InfoDialog.vue
+++ b/src/components/InfoDialog.vue
@@ -33,8 +33,11 @@
                         <li
                             v-for="item in data.examples"
                             v-bind:key="item"
+                            class="q-mt-sm"
                         >
-                            {{ item }}
+                            <div v-for="(line, index) in item.split('\n')" :key="index">
+                                {{ line }}
+                            </div>
                         </li>
                     </ul>
                 </q-card-section>
diff --git a/src/components/ScreenAuthors.vue b/src/components/ScreenAuthors.vue
index d3acfdc0..7af18aa7 100644
--- a/src/components/ScreenAuthors.vue
+++ b/src/components/ScreenAuthors.vue
@@ -8,7 +8,13 @@
     <div id="form-content">
         <h2 class="question">
             Who are the author(s) of the work?
-            <SchemaGuideLink anchor="#authors" />
+            <q-icon
+                name="ion-information-circle-outline"
+                size="24px"
+                color="primary"
+                v-on:click="showAuthorsHelp = true"
+                style="cursor:pointer;"
+            />
         </h2>
         <div class="scroll-to-bottom-container">
             <span class="bottom" />
@@ -59,6 +65,10 @@
                 {{ screenMessage }}
             </div>
         </q-banner>
+        <InfoDialog
+            v-model="showAuthorsHelp"
+            v-bind:data="helpData.authors"
+        />
     </div>
 </template>
 
@@ -69,7 +79,7 @@ import { moveDown, moveUp } from 'src/updown'
 import AuthorCardEditing from 'components/AuthorCardEditing.vue'
 import AuthorCardViewing from 'components/AuthorCardViewing.vue'
 import { AuthorType } from 'src/types'
-import SchemaGuideLink from 'components/SchemaGuideLink.vue'
+import InfoDialog from 'components/InfoDialog.vue'
 import { scrollToBottom } from 'src/scroll-to-bottom'
 import { useCff } from 'src/store/cff'
 import { useStepperErrors } from 'src/store/stepper-errors'
@@ -78,9 +88,9 @@ import { useValidation } from 'src/store/validation'
 export default defineComponent({
     name: 'ScreenAuthors',
     components: {
-        SchemaGuideLink,
         AuthorCardEditing,
-        AuthorCardViewing
+        AuthorCardViewing,
+        InfoDialog
     },
     setup () {
         onUpdated(() => {
@@ -132,15 +142,38 @@ export default defineComponent({
                 .filter(byError(errors.value))
                 .map(query => query.replace.message)
         })
+        const helpData = {
+            authors: {
+                title: 'authors',
+                url: [
+                    {
+                        text: 'Click here to see the documentation for authors.',
+                        link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#authors'
+                    },
+                    {
+                        text: 'How to deal with unknown individual authors?',
+                        link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#how-to-deal-with-unknown-individual-authors'
+                    }
+                ],
+                description: 'The authors of a software or dataset.',
+                examples: [
+                    ' given-names: Jane\n family-names: Doe',
+                    ' name: "The Research Software project"',
+                    ' given-names: John\n family-names: Doe\n name: "The Research Software project"'
+                ]
+            }
+        }
         return {
             addAuthor,
             authors,
             authorsErrors,
             editingId,
+            helpData,
             moveAuthorDown,
             moveAuthorUp,
             removeAuthor,
-            setAuthorField
+            setAuthorField,
+            showAuthorsHelp: ref(false)
         }
     }
 })

From 2c32a03b56bb974ba0287da7f137769d94376041 Mon Sep 17 00:00:00 2001
From: Faruk D <f.diblen@esciencecenter.nl>
Date: Mon, 29 Aug 2022 12:33:05 +0200
Subject: [PATCH 4/9] fix linter issues

---
 src/components/InfoDialog.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/InfoDialog.vue b/src/components/InfoDialog.vue
index c197e918..01110fb1 100644
--- a/src/components/InfoDialog.vue
+++ b/src/components/InfoDialog.vue
@@ -35,7 +35,10 @@
                             v-bind:key="item"
                             class="q-mt-sm"
                         >
-                            <div v-for="(line, index) in item.split('\n')" :key="index">
+                            <div
+                                v-for="(line, index) in item.split('\n')"
+                                v-bind:key="index"
+                            >
                                 {{ line }}
                             </div>
                         </li>

From cc0ea84134196b75ddc3ab4dd3c2751fe1133509 Mon Sep 17 00:00:00 2001
From: fdiblen <144492+fdiblen@users.noreply.github.com>
Date: Mon, 29 Aug 2022 13:38:45 +0200
Subject: [PATCH 5/9] Update src/components/AuthorCardEditing.vue

Co-authored-by: Abel Soares Siqueira <abel.s.siqueira@gmail.com>
---
 src/components/AuthorCardEditing.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AuthorCardEditing.vue b/src/components/AuthorCardEditing.vue
index 62fd7d42..47e0dfff 100644
--- a/src/components/AuthorCardEditing.vue
+++ b/src/components/AuthorCardEditing.vue
@@ -309,7 +309,7 @@ export default defineComponent({
                         link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersonname-suffix'
                     }
                 ],
-                description: 'The person\'s given names.',
+                description: 'The person\'s last names, split into parts.',
                 examples: [
                     'name particle: von',
                     'family name: Doe',

From d283e637e1ff1b8a84b6cf0e881ce6d89da26db7 Mon Sep 17 00:00:00 2001
From: fdiblen <144492+fdiblen@users.noreply.github.com>
Date: Mon, 29 Aug 2022 13:39:09 +0200
Subject: [PATCH 6/9] Update src/components/AuthorCardEditing.vue

Co-authored-by: Abel Soares Siqueira <abel.s.siqueira@gmail.com>
---
 src/components/AuthorCardEditing.vue | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/components/AuthorCardEditing.vue b/src/components/AuthorCardEditing.vue
index 47e0dfff..23ea1a8f 100644
--- a/src/components/AuthorCardEditing.vue
+++ b/src/components/AuthorCardEditing.vue
@@ -42,15 +42,6 @@
                     v-on:click="showHelpDialogLastName = true"
                     style="cursor:pointer;"
                 />
-                <SchemaGuideLink anchor="#definitionspersonname-particle" />
-                <SchemaGuideLink
-                    anchor="#definitionspersonname-suffix"
-                    class="q-pt-sm"
-                />
-                <SchemaGuideLink
-                    anchor="#definitionspersonfamily-names"
-                    class="q-pt-sm"
-                />
             </h3>
         </div>
         <div class="row">

From aab2605665370658ea27bb3725e794bd48778920 Mon Sep 17 00:00:00 2001
From: Faruk D <f.diblen@esciencecenter.nl>
Date: Mon, 29 Aug 2022 13:41:59 +0200
Subject: [PATCH 7/9] update title for authors last name fields

---
 src/components/AuthorCardEditing.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AuthorCardEditing.vue b/src/components/AuthorCardEditing.vue
index 23ea1a8f..da05ece7 100644
--- a/src/components/AuthorCardEditing.vue
+++ b/src/components/AuthorCardEditing.vue
@@ -285,7 +285,7 @@ export default defineComponent({
                 ]
             },
             lastName: {
-                title: 'lastNames',
+                title: 'name particle, family name, name suffix',
                 url: [
                     {
                         text: 'Click here to see the documentation for name particle.',

From b11c4915ba994e27384c76ac4c24795deb00c3c7 Mon Sep 17 00:00:00 2001
From: fdiblen <144492+fdiblen@users.noreply.github.com>
Date: Mon, 29 Aug 2022 13:47:48 +0200
Subject: [PATCH 8/9] Update src/components/AuthorCardEditing.vue

Co-authored-by: Abel Soares Siqueira <abel.s.siqueira@gmail.com>
---
 src/components/AuthorCardEditing.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AuthorCardEditing.vue b/src/components/AuthorCardEditing.vue
index da05ece7..3c2d501b 100644
--- a/src/components/AuthorCardEditing.vue
+++ b/src/components/AuthorCardEditing.vue
@@ -285,7 +285,7 @@ export default defineComponent({
                 ]
             },
             lastName: {
-                title: 'name particle, family name, name suffix',
+                title: 'name-particle, family-names, name-suffix',
                 url: [
                     {
                         text: 'Click here to see the documentation for name particle.',

From 5352f1d2be88efc40a52142ad8af3177a2405df0 Mon Sep 17 00:00:00 2001
From: fdiblen <144492+fdiblen@users.noreply.github.com>
Date: Mon, 29 Aug 2022 14:09:18 +0200
Subject: [PATCH 9/9] Update src/components/AuthorCardEditing.vue

Co-authored-by: Abel Soares Siqueira <abel.s.siqueira@gmail.com>
---
 src/components/AuthorCardEditing.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AuthorCardEditing.vue b/src/components/AuthorCardEditing.vue
index 3c2d501b..da6c8190 100644
--- a/src/components/AuthorCardEditing.vue
+++ b/src/components/AuthorCardEditing.vue
@@ -271,7 +271,7 @@ export default defineComponent({
         })
         const helpData = {
             name: {
-                title: 'name',
+                title: 'given-names',
                 url: [
                     {
                         text: 'Click here to see the documentation for name.',