pkp/pkp-lib#9626 Migrate icons to svg (#414)

* pkp/pkp-lib#9626 Update Expand, Orcid and UsefulTips icons based on new icon designs from Figma * pkp/pkp-lib#9626 Add new icons * pkp/pkp-lib#9626 Add InitialsAvatar component * pkp/pkp-lib#9262 Add Checkbox icons * pkp/pkp-lib#9626 Update svg for StarTicked icon * pkp/pkp-lib#9626 Use svg icons for components that use Icon component * pkp/pkp-lib#9626 Rename Sitemap icon filename * pkp/pkp-lib#9626 Adjust vertical alignment of icons next to texts * pkp/pkp-lib#9626 Add documentation for added new Tooltip props * pkp/pkp-lib#9626 Update InitialsAvatar component * pkp/pkp-lib#9626 Remove fontawesome support from icon component * pkp/pkp-lib#9626 Use icon Orcid in UserInvitationManager component * pkp/pkp-lib#9626 Use default colors for UsefulTips icon * pkp/pkp-lib#9626 Remove props in UsefulTips icon * pkp/pkp-lib#9626 Remove prop flex in Tooltip and HelpButton components * pkp/pkp-lib#9626 Use align-middle for inline-block containers when displaying icons * pkp/pkp-lib#9626 Revert removed aria-hidden prop in Modal component * pkp/pkp-lib#9626 Use InitialsAvatar component to display isLoggedInAs icon
pkp · Nov 20, 2024 · a67fd26 · a67fd26
1 parent 1104bbe
commit a67fd26
Show file tree

Hide file tree

Showing 110 changed files with 1,308 additions and 445 deletions.
diff --git a/src/components/Badge/Badge.stories.js b/src/components/Badge/Badge.stories.js
@@ -79,7 +79,7 @@ export const Comments = {
 		},
 		template: `
 			<Badge v-bind="args" >			
-				<Icon icon="comment-o" :inline="true" />{{args.slot}}
+				<Icon icon="Comment" class="h-3 w-3 me-1" :inline="true" />{{args.slot}}
 			</Badge>`,
 	}),
 };

diff --git a/src/components/ButtonRow/ButtonRow.stories.js b/src/components/ButtonRow/ButtonRow.stories.js
@@ -14,7 +14,7 @@ export const Default = {
 			<ButtonRow v-bind="args">
 				<template #end>
 					<PkpButton :is-link="true">
-						<Icon icon="long-arrow-left" :inline="true" />
+						<Icon icon="ArrowLeft" class="h-4 w-4" :inline="true" />
 						Back
 					</PkpButton>
 				</template>

diff --git a/src/components/Composer/Composer.vue b/src/components/Composer/Composer.vue
@@ -70,7 +70,7 @@
 									class="-linkButton composer__templates__moreSearchResults"
 									@click="showSearchResultCount = searchResults.length"
 								>
-									<Icon icon="plus-circle" :inline="true" />
+									<Icon icon="Add" class="h-3 w-3" :inline="true" />
 									{{
 										moreSearchResultsLabel.replace(
 											'{$number}',
@@ -241,10 +241,10 @@
 								/>
 								{{ attachment.name }}
 								<button
-									class="composer__attachment__remove"
+									class="composer__attachment__remove text-negative hover:text-on-dark"
 									@click="removeAttachment(i)"
 								>
-									<Icon icon="times" />
+									<Icon icon="Cancel" class="h-3 w-3" />
 									<span class="-screenReader">
 										{{ removeItemLabel.replace('{$item}', attachment.name) }}
 									</span>
@@ -785,7 +785,7 @@ export default {
 				!!attachment.documentType &&
 				!!pkp.documentTypeIcons[attachment.documentType]
 				? pkp.documentTypeIcons[attachment.documentType]
-				: 'file-o';
+				: 'DefaultDocument';
 		},
 
 		/**
@@ -1158,14 +1158,6 @@ export default {
 	border-bottom-right-radius: 1.2em;
 	color: @no;
 
-	.fa {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		margin-left: -1px;
-	}
-
 	&:hover,
 	&:focus {
 		outline: 0;

diff --git a/src/components/Container/ManageEmailsPage.stories.js b/src/components/Container/ManageEmailsPage.stories.js
@@ -51,7 +51,7 @@ const ManageEmailsPageWithDataAndTemplate = {
 			<template #sidebar>
 				<PkpHeader>
 					<h2>
-						<Icon icon="filter" :inline="true" />
+						<Icon icon="Filter" class="h-4 w-4" :inline="true" />
 						Filters
 					</h2>
 				</PkpHeader>

diff --git a/src/components/Container/Page.stories.js b/src/components/Container/Page.stories.js
@@ -2,6 +2,7 @@ import {computed} from 'vue';
 import Page from './Page.vue';
 import Dropdown from '@/components/Dropdown/Dropdown.vue';
 import SideNav from '@/components/SideNav/SideNav.vue';
+import InitialsAvatar from '@/components/InitialsAvatar/InitialsAvatar.vue';
 import PageMock from '@/mocks/page';
 
 export default {
@@ -11,7 +12,7 @@ export default {
 
 export const Default = {
 	render: (args) => ({
-		components: {Page, Dropdown, SideNav},
+		components: {Page, Dropdown, SideNav, InitialsAvatar},
 		setup() {
 			const classes = computed(() => {
 				let _classes = [];
@@ -35,7 +36,7 @@ export const Default = {
 				<header class="app__header" role="banner">
 					<Dropdown v-if="contexts.length" class="app__headerAction app__contexts">
 						<template #button>
-							<Icon icon="sitemap" />
+							<Icon icon="Sitemap" class="h-7 w-7" />
 							<span class="-screenReader">Journals</span>
 						</template>
 						<ul>
@@ -53,7 +54,7 @@ export const Default = {
 								ref="tasksButton"
 								@click="alert('Opens the tasks grid in a modal')"
 							>
-								<Icon icon="bell-o"></Icon>
+								<Icon icon="Notifications" class="h-7 w-7"></Icon>
 								<span class="-screenReader">Tasks</span>
 								<span v-if="unreadTasksCount" class="app__tasksCount">
 									{{ unreadTasksCount }}
@@ -62,12 +63,13 @@ export const Default = {
 						</div>
 						<Dropdown class="app__headerAction app__userNav">
 							<template #button>
-								<Icon icon="user-circle-o" />
-								<Icon
+								<InitialsAvatar :is-secondary="true" given-name="Test" family-name="User"></InitialsAvatar>
+								<InitialsAvatar
 									v-if="isLoggedInAs"
-									icon="user-circle"
-									class="app__userNav__isLoggedInAsWarning"
-								/>
+									class="absolute right-2 top-2 rounded-full h-5 w-5"
+									:is-warnable="true"
+									:shrink="true"
+								></InitialsAvatar>
 								<span class="-screenReader">Options for {{ currentUsername }}</span>
 							</template>
 							<div v-if="isLoggedInAs" class="pkpDropdown__section">
@@ -96,7 +98,8 @@ export const Default = {
 										<a :href="locale.key" class="pkpDropdown__action">
 											<Icon
 												v-if="locale.key === 'en'"
-												icon="check"
+												icon="Complete"
+												class="h-5 w-5"
 												:inline="true"
 											/>
 											{{ locale.name }}

diff --git a/src/components/Container/Page.vue b/src/components/Container/Page.vue
@@ -311,16 +311,6 @@ export default {
 	right: 0.25rem;
 }
 
-.app__userNav > .pkpButton > .app__userNav__isLoggedInAsWarning {
-	position: absolute;
-	right: 0.5em;
-	top: 0.5em;
-	font-size: 1rem;
-	color: #fff;
-	background: @primary;
-	border-radius: 50%;
-}
-
 .app__userNav .pkpDropdown__content {
 	min-width: 13rem;
 }

diff --git a/src/components/Container/StatsPage.stories.js b/src/components/Container/StatsPage.stories.js
@@ -80,7 +80,7 @@ const EditorialStatsPageWithDataAndTemplate = {
 					:is-active="isSidebarVisible"
 					@click="toggleSidebar"
 				>
-					<Icon icon="filter" :inline="true" />
+					<Icon icon="Filter" class="h-4 w-4" :inline="true" />
 					{{ t('common.filter') }}
 				</PkpButton>
 			</template>
@@ -130,6 +130,7 @@ const EditorialStatsPageWithDataAndTemplate = {
 										v-if="row.description"
 										:label="'Description for ' + row.name"
 										:tooltip="row.description"
+										icon-size="small"
 									></Tooltip>
 								</TableCell>
 								<TableCell>{{ row.dateRange }}</TableCell>
@@ -400,7 +401,7 @@ const PublicationStatsPageWithDataAndTemplate = {
 					:is-active="isSidebarVisible"
 					@click="toggleSidebar"
 				>
-					<Icon icon="filter" :inline="true" />
+					<Icon icon="Filter" class="h-4 w-4" :inline="true" />
 					{{ t('common.filter') }}
 				</PkpButton>
 			</template>
@@ -418,7 +419,7 @@ const PublicationStatsPageWithDataAndTemplate = {
 					:tabindex="isSidebarVisible ? 0 : -1"
 				>
 					<h2>
-						<Icon icon="filter" :inline="true" />
+						<Icon icon="Filter" class="h-4 w-4" :inline="true" />
 						{{ t('common.filter') }}
 					</h2>
 				</PkpHeader>

diff --git a/src/components/Container/SubmissionWizardPage.stories.js b/src/components/Container/SubmissionWizardPage.stories.js
@@ -139,7 +139,7 @@ const SubmissionWizardPageWithDataAndTemplate = {
 												type="warning"
 												class="submissionWizard__reviewEmptyWarning"
 											>
-												<Icon icon="exclamation-triangle" :inline="true"></Icon>
+												<Icon icon="Error" class="h-5 w-5" :inline="true"></Icon>
 												{{ error }}
 											</Notification>
 											<ul class="submissionWizard__reviewPanel__list">
@@ -176,14 +176,15 @@ const SubmissionWizardPageWithDataAndTemplate = {
 												type="warning"
 												class="submissionWizard__reviewEmptyWarning"
 											>
-												<Icon icon="exclamation-triangle" :inline="true"></Icon>
+												<Icon icon="Error" class="h-5 w-5" :inline="true"></Icon>
 												No contributors have been added to this submission.
 											</Notification>
 											<ul v-else class="submissionWizard__reviewPanel__list">
 												<li v-for="(error, i) in errors.contributors" :key="i">
 													<Notification type="warning">
 														<Icon
-															icon="exclamation-triangle"
+															icon="Error"
+															class="h-5 w-5"
 															:inline="true"
 														></Icon>
 														{{ error }}
@@ -221,7 +222,7 @@ const SubmissionWizardPageWithDataAndTemplate = {
 														:key="i"
 														type="warning"
 													>
-														<Icon icon="exclamation-triangle"></Icon>
+														<Icon icon="Error" class="h-5 w-5"></Icon>
 														{{ error }}
 													</Notification>
 												</template>
@@ -240,7 +241,7 @@ const SubmissionWizardPageWithDataAndTemplate = {
 														:key="i"
 														type="warning"
 													>
-														<Icon icon="exclamation-triangle"></Icon>
+														<Icon icon="Error" class="h-5 w-5"></Icon>
 														{{ error }}
 													</Notification>
 												</template>
@@ -262,7 +263,7 @@ const SubmissionWizardPageWithDataAndTemplate = {
 														:key="i"
 														type="warning"
 													>
-														<Icon icon="exclamation-triangle"></Icon>
+														<Icon icon="Error" class="h-5 w-5"></Icon>
 														{{ error }}
 													</Notification>
 												</template>

diff --git a/src/components/DateRange/DateRange.vue b/src/components/DateRange/DateRange.vue
@@ -8,7 +8,11 @@
 			@click="toggle"
 			@blur="closeOnBlur"
 		>
-			<Icon icon="calendar" />
+			<div
+				class="flex h-8 w-8 items-center justify-center border-e border-e-light border-opacity-40 text-primary"
+			>
+				<Icon icon="Calendar" class="h-5 w-5" :inline="true" />
+			</div>
 			<span class="-screenReader">
 				{{ changeDateRangeLabel }}
 			</span>
@@ -61,9 +65,9 @@
 					</label>
 				</fieldset>
 				<PkpButton @click="applyCustomRange">{{ applyLabel }}</PkpButton>
-				<div v-if="errorMessage" class="pkpDateRange__error">
-					<Icon icon="exclamation-triangle" :inline="true" />
-					<span v-html="errorMessage" />
+				<div v-if="errorMessage" class="pt-2 text-base-normal">
+					<Icon icon="Error" class="me-1 h-5 w-5" :inline="true" />
+					<span class="align-middle" v-html="errorMessage" />
 				</div>
 			</form>
 		</div>
@@ -452,25 +456,8 @@ export default {
 		border-color: @primary;
 		outline: 0;
 
-		.fa {
-			border-inline-end-color: @primary;
-		}
-	}
-
-	.fa {
-		position: absolute;
-		top: 0;
-		left: 0;
-		bottom: 0;
-		width: 2rem;
-		border-inline-end: @bg-border-light;
-		color: @primary;
-
-		&:before {
-			position: absolute;
-			top: 50%;
-			left: 50%;
-			transform: translate(-50%, -50%);
+		div {
+			@apply border-e-primary;
 		}
 	}
 }
@@ -558,12 +545,6 @@ export default {
 	color: @bg-border-color;
 }
 
-.pkpDateRange__error {
-	padding-top: 0.5rem;
-	font-size: @font-tiny;
-	line-height: 1.5em;
-}
-
 [dir='rtl'] {
 	.pkpDateRange__button .fa {
 		left: auto;

diff --git a/src/components/Dropdown/Dropdown.stories.js b/src/components/Dropdown/Dropdown.stories.js
@@ -61,7 +61,7 @@ export const WithSections = {
 					<ul>
 						<li>
 							<a href="#" class="pkpDropdown__action">
-								<Icon icon="check" :inline="true" />
+								<Icon icon="Complete" class="h-5 w-5" :inline="true" />
 								English
 							</a>
 						</li>

diff --git a/src/components/Expander/Expander.vue b/src/components/Expander/Expander.vue
@@ -1,7 +1,7 @@
 <template>
 	<button class="expander" @click="$emit('toggle')">
-		<Icon v-if="isExpanded" icon="angle-up" />
-		<Icon v-else icon="angle-down" />
+		<Icon v-if="isExpanded" icon="ChevronUp" class="h-5 w-5" :inline="true" />
+		<Icon v-else icon="ChevronDown" class="h-5 w-5" :inline="true" />
 		<span v-if="isExpanded" class="-screenReader">
 			{{ t('list.viewLess', {name: itemName}) }}
 		</span>
@@ -35,7 +35,6 @@ export default {
 @import '../../styles/_import';
 
 .expander {
-	width: 2rem;
 	padding: 0 0.5em;
 	background: transparent;
 	border: @bg-border-light;

diff --git a/src/components/FileAttacher/FileAttacherFileStage.vue b/src/components/FileAttacher/FileAttacherFileStage.vue
@@ -45,7 +45,7 @@
 		<ButtonRow class="fileAttacher__footer">
 			<template #end>
 				<PkpButton :is-link="true" @click="$emit('cancel')">
-					<Icon icon="long-arrow-left" :inline="true" />
+					<Icon icon="ArrowLeft" class="h-4 w-4" :inline="true" />
 					{{ backLabel }}
 				</PkpButton>
 			</template>

diff --git a/src/components/FileAttacher/FileAttacherLibrary.vue b/src/components/FileAttacher/FileAttacherLibrary.vue
@@ -26,7 +26,7 @@
 		<ButtonRow class="fileAttacher__footer">
 			<template #end>
 				<PkpButton :is-link="true" @click="$emit('cancel')">
-					<Icon icon="long-arrow-left" :inline="true" />
+					<Icon icon="ArrowLeft" class="h-4 w-4" :inline="true" />
 					{{ backLabel }}
 				</PkpButton>
 			</template>

diff --git a/src/components/FileAttacher/FileAttacherReviewFiles.vue b/src/components/FileAttacher/FileAttacherReviewFiles.vue
@@ -20,7 +20,7 @@
 		<ButtonRow class="fileAttacher__footer">
 			<template #end>
 				<PkpButton :is-link="true" @click="$emit('cancel')">
-					<Icon icon="long-arrow-left" :inline="true" />
+					<Icon icon="ArrowLeft" class="h-4 w-4" :inline="true" />
 					{{ backLabel }}
 				</PkpButton>
 			</template>

diff --git a/src/components/FileAttacher/FileAttacherUpload.vue b/src/components/FileAttacher/FileAttacherUpload.vue
@@ -59,7 +59,7 @@
 		<ButtonRow class="fileAttacher__footer">
 			<template #end>
 				<PkpButton :is-link="true" @click="$emit('cancel')">
-					<Icon icon="long-arrow-left" :inline="true" />
+					<Icon icon="ArrowLeft" class="h-4 w-4" :inline="true" />
 					{{ backLabel }}
 				</PkpButton>
 			</template>

diff --git a/src/components/Filter/Filter.vue b/src/components/Filter/Filter.vue
@@ -12,7 +12,7 @@
 			class="pkpFilter__remove"
 			@click.prevent.stop="remove(param, value)"
 		>
-			<Icon icon="times-circle-o" />
+			<Icon icon="Cancel" class="h-4 w-4 text-negative" />
 			<span class="-screenReader">
 				{{ t('common.filterRemove', {filterTitle: title}) }}
 			</span>