pkp/pkp-lib#10792 Update ORCiD brand guideline

pkp · Jan 21, 2025 · 10f4eec · 10f4eec
1 parent 63c6795
commit 10f4eec
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 5 deletions.
diff --git a/src/components/Form/fields/FieldOrcid.stories.js b/src/components/Form/fields/FieldOrcid.stories.js
@@ -52,6 +52,7 @@ export const WithOrcid = {
 		...FieldBaseMock,
 		...FieldOrcidMock,
 		orcid: 'https://sandbox.orcid.org/0009-0009-3222-5777',
+		orcidDisplayValue: 'https://sandbox.orcid.org/0009-0009-3222-5777',
 		isVerified: true,
 	},
 };
@@ -61,5 +62,7 @@ export const WithUnverifiedOrcid = {
 		...FieldBaseMock,
 		...FieldOrcidMock,
 		orcid: 'https://sandbox.orcid.org/0009-0009-3222-5777',
+		orcidDisplayValue:
+			'https://sandbox.orcid.org/0009-0009-3222-5777 (unauthenticated)',
 	},
 };
diff --git a/src/components/Form/fields/FieldOrcid.vue b/src/components/Form/fields/FieldOrcid.vue
@@ -27,10 +27,18 @@
 				class="h-6 w-6"
 				:inline="true"
 			/>
+
+			<Icon
+				v-if="!isVerified && hasOrcid"
+				:class="'mr-2'"
+				icon="OrcidUnauthenticated"
+				class="w-6"
+				:inline="true"
+			/>
 			<div
 				v-if="hasOrcid"
 				class="pkpFormField__control pkpFormField__control--html"
-				v-html="orcidDisplayValue"
+				v-html="orcidDisplayText"
 			/>
 			<PkpButton
 				v-if="hasOrcid"
@@ -107,6 +115,11 @@ export default {
 			type: Boolean,
 			required: true,
 		},
+		orcidDisplayValue: {
+			type: String,
+			required: true,
+			default: '',
+		},
 	},
 	data() {
 		return {
@@ -129,9 +142,9 @@ export default {
 		 * Wraps ORCID in <a> tag for HTML display
 		 * @returns {string}
 		 */
-		orcidDisplayValue: function () {
+		orcidDisplayText: function () {
 			if (this.hasOrcid) {
-				return `<a target="_blank" class="underline" href="${this.orcidValue}">${this.orcidValue}</a>`;
+				return `<a target="_blank" class="underline" href="${this.orcidValue}">${this.orcidDisplayValue}</a>`;
 			} else {
 				return this.orcidValue;
 			}

diff --git a/src/components/Form/mocks/field-orcid.js b/src/components/Form/mocks/field-orcid.js
@@ -3,6 +3,7 @@ export default {
 	component: 'field-orcid',
 	label: 'ORCID',
 	orcid: '',
+	orcidDisplayValue: '',
 	authorId: 1,
 	tooltip:
 		'ORCID is an independent non-profit organization that provides a persistent identifier – an ORCID iD – that distinguishes you from other researchers and a mechanism for linking your research outputs and activities to your iD. ORCID is integrated into many systems used by publishers, funders, institutions, and other research-related services. Learn more at https://orcid.org.',

diff --git a/src/components/Icon/Icon.vue b/src/components/Icon/Icon.vue
@@ -85,6 +85,7 @@ import Notifications from './icons/Notifications.vue';
 import NotVisible from './icons/NotVisible.vue';
 import OpenReview from './icons/OpenReview.vue';
 import Orcid from './icons/Orcid.vue';
+import OrcidUnauthenticated from './icons/OrcidUnauthenticated.vue';
 import Overdue from './icons/Overdue.vue';
 import Paste from './icons/Paste.vue';
 import Payment from './icons/Payment.vue';
@@ -228,6 +229,7 @@ const svgIcons = {
 	User,
 	View,
 	Workflow,
+	OrcidUnauthenticated,
 };
 
 const props = defineProps({

diff --git a/src/components/Icon/icons/OrcidUnauthenticated.vue b/src/components/Icon/icons/OrcidUnauthenticated.vue
@@ -0,0 +1,27 @@
+<template>
+	<svg
+		viewBox="0 0 32 32"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		class="mr-2 inline-block w-6 align-middle"
+	>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M29.474 16c0 7.442-6.032 13.474-13.474 13.474S2.526 23.442 2.526 16 8.558 2.526 16 2.526 29.474 8.558 29.474 16Z"
+			fill="#fff"
+		/>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0s16 7.163 16 16ZM16 29.474c7.442 0 13.474-6.032 13.474-13.474S23.442 2.526 16 2.526 2.526 8.558 2.526 16 8.558 29.474 16 29.474Z"
+			fill="#7FAA26"
+		/>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M18.22 10.973h-4.547v11.6h4.569c3.8 0 6.133-2.82 6.133-5.8 0-1.365-.469-2.815-1.478-3.925-1.013-1.115-2.557-1.875-4.676-1.875Zm-.177 9.732h-2.347v-7.864h2.264c1.521 0 2.603.46 3.304 1.167.703.709 1.046 1.688 1.046 2.765 0 .654-.2 1.641-.83 2.46-.621.808-1.677 1.473-3.437 1.473Zm-.083-8.073c3.13 0 4.558 1.898 4.558 4.141 0-2.243-1.429-4.141-4.558-4.141h-2.472 2.472Zm6.205 4.017.001.124c0 2.869-2.242 5.591-5.924 5.591h-4.36V11.182v11.182h4.36c3.682 0 5.924-2.722 5.924-5.591l-.001-.124ZM9.5 11.005v11.588h2.024V11.005H9.5Zm1.815.208v11.172-11.172H9.71h1.606ZM10.512 10.15c.7 0 1.262-.575 1.262-1.263 0-.687-.561-1.262-1.262-1.262-.7 0-1.262.563-1.262 1.262 0 .688.561 1.262 1.262 1.262Zm.614-.408a1.044 1.044 0 0 0 0 0Z"
+			fill="#7FAA26"
+		/>
+	</svg>
+</template>
diff --git a/src/components/ListPanel/contributors/ContributorsListPanel.vue b/src/components/ListPanel/contributors/ContributorsListPanel.vue
@@ -392,6 +392,7 @@ export default {
 						if (field.name === 'orcid') {
 							field.orcid = author['orcid'] ?? '';
 							field.authorId = author['id'];
+							field.orcidDisplayValue = author['orcidDisplayValue'];
 							field.isVerified = author['orcidIsVerified'] ?? false;
 							field.orcidVerificationRequested =
 								author['orcidVerificationRequested'];

diff --git a/src/components/ListPanel/users/SelectReviewerListItem.vue b/src/components/ListPanel/users/SelectReviewerListItem.vue
@@ -45,8 +45,12 @@
 							class="listPanel__item--reviewer__orcid"
 							target="_blank"
 						>
-							<Icon icon="Orcid" :inline="true" class="me-1 h-5 w-5" />
-							{{ item.orcid }}
+							<Icon
+								:icon="item.orcidIsVerified ? 'Orcid' : 'OrcidUnauthenticated'"
+								:inline="true"
+								class="me-1 w-6"
+							/>
+							{{ item.orcidDisplayValue }}
 						</a>
 					</div>
 				</div>