pkp/pkp-lib#10451 (main) Long affiliations should be wrapped in backe…

…nd (bad UI/UX) (pkp#420)

* pkp/pkp-lib#10451 Add whitespace-normal class to display affiliations in full

* pkp/pkp-lib#10451 Add stories for contributors list panel

src/components/Form/mocks/form-contributors.js

@@ -0,0 +1,161 @@
+import Form from './form';
+import FieldSelectCountryMock from './field-select-country';
+
+export default {
+	...Form,
+	id: 'contributor',
+	method: 'POST',
+	action: '/submissions/9/publications/__publicationId__/contributors',
+	fields: [
+		{
+			name: 'givenName',
+			component: 'field-text',
+			label: 'Given Name',
+			groupId: 'default',
+			isRequired: true,
+			isMultilingual: true,
+			isInert: false,
+			value: {en: '', es: '', fr_CA: '', pt: ''},
+			inputType: 'text',
+			optIntoEdit: false,
+			optIntoEditLabel: '',
+			size: 'normal',
+			prefix: '',
+		},
+		{
+			name: 'familyName',
+			component: 'field-text',
+			label: 'Family Name',
+			groupId: 'default',
+			isRequired: false,
+			isMultilingual: true,
+			isInert: false,
+			value: {en: '', es: '', fr_CA: '', pt: ''},
+			inputType: 'text',
+			optIntoEdit: false,
+			optIntoEditLabel: '',
+			size: 'normal',
+			prefix: '',
+		},
+		{
+			name: 'preferredPublicName',
+			component: 'field-text',
+			label: 'Preferred Public Name',
+			description:
+				'Please provide the full name as the author should be identified on the published work. Example: Dr. Alan P. Mwandenga',
+			groupId: 'default',
+			isRequired: false,
+			isMultilingual: true,
+			isInert: false,
+			value: {en: '', es: '', fr_CA: '', pt: ''},
+			inputType: 'text',
+			optIntoEdit: false,
+			optIntoEditLabel: '',
+			size: 'normal',
+			prefix: '',
+		},
+		{
+			name: 'email',
+			component: 'field-text',
+			label: 'Email',
+			groupId: 'default',
+			isRequired: true,
+			isMultilingual: false,
+			isInert: false,
+			value: null,
+			inputType: 'text',
+			optIntoEdit: false,
+			optIntoEditLabel: '',
+			size: 'normal',
+			prefix: '',
+		},
+		FieldSelectCountryMock,
+		{
+			name: 'url',
+			component: 'field-text',
+			label: 'Homepage URL',
+			groupId: 'default',
+			isRequired: false,
+			isMultilingual: false,
+			isInert: false,
+			value: null,
+			inputType: 'text',
+			optIntoEdit: false,
+			optIntoEditLabel: '',
+			size: 'normal',
+			prefix: '',
+		},
+		{
+			name: 'biography',
+			component: 'field-rich-textarea',
+			label: 'Bio Statement (e.g., department and rank)',
+			groupId: 'default',
+			isRequired: false,
+			isMultilingual: true,
+			isInert: false,
+			value: {en: '', es: '', fr_CA: '', pt: ''},
+			plugins: 'paste,link,noneditable',
+			toolbar: 'bold italic superscript subscript | link',
+		},
+		{
+			name: 'affiliation',
+			component: 'field-text',
+			label: 'Affiliation',
+			groupId: 'default',
+			isRequired: false,
+			isMultilingual: true,
+			isInert: false,
+			value: {en: '', es: '', fr_CA: '', pt: ''},
+			inputType: 'text',
+			optIntoEdit: false,
+			optIntoEditLabel: '',
+			size: 'normal',
+			prefix: '',
+		},
+		{
+			name: 'userGroupId',
+			component: 'field-options',
+			label: "Contributor's role",
+			groupId: 'default',
+			isRequired: false,
+			isMultilingual: false,
+			isInert: false,
+			value: 14,
+			type: 'radio',
+			isOrderable: false,
+			allowOnlySorting: false,
+			options: [
+				{value: 14, label: 'Author'},
+				{value: 15, label: 'Translator'},
+			],
+		},
+		{
+			name: 'includeInBrowse',
+			component: 'field-options',
+			label: 'Publication Lists',
+			groupId: 'default',
+			isRequired: false,
+			isMultilingual: false,
+			isInert: false,
+			value: true,
+			type: 'checkbox',
+			isOrderable: false,
+			allowOnlySorting: false,
+			options: [
+				{
+					value: true,
+					label:
+						'Include this contributor when identifying authors in lists of publications.',
+				},
+			],
+		},
+	],
+	groups: [{id: 'default', pageId: 'default'}],
+	hiddenFields: {},
+	supportedFormLocales: [
+		{key: 'en', label: 'English'},
+		{key: 'es', label: 'Spanish'},
+		{key: 'fr_CA', label: 'French (Canada)'},
+		{key: 'pt', label: 'Portuguese'},
+	],
+};

src/components/ListPanel/contributors/ContributorsListPanel.stories.js

@@ -0,0 +1,59 @@
+import ContributorsListPanel from './ContributorsListPanel.vue';
+
+import ContributorMock from '@/mocks/contributor';
+import PublicationMock from '@/mocks/publication';
+import FormContributorsMock from '@/components/Form/mocks/form-contributors';
+
+export default {
+	title: 'ListPanel/ContributorsListPanel',
+	component: ContributorsListPanel,
+};
+
+const contributors = [
+	{
+		...ContributorMock,
+		affiliation: {
+			en: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+		},
+		fullName: 'Clara Mitchell',
+	},
+	{
+		...ContributorMock,
+		affiliation: {
+			en: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
+		},
+		fullName: 'Ethan Brooks',
+	},
+	{
+		...ContributorMock,
+		affiliation: {
+			en: ' Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+		},
+		fullName: 'Sophia Reyes',
+	},
+];
+
+export const Base = {
+	render: (args) => ({
+		components: {ContributorsListPanel},
+		setup() {
+			return {args};
+		},
+		template: `
+			<ContributorsListPanel
+				v-bind="args"
+			/>
+		`,
+	}),
+
+	args: {
+		canEditPublication: true,
+		form: {...FormContributorsMock},
+		id: 'contributors',
+		items: [...contributors],
+		publication: PublicationMock,
+		publicationApiUrlFormat: '/submissions/9/publications/__publicationId__',
+		itemsMax: contributors.length,
+		title: 'Contributors',
+	},
+};

src/components/ListPanel/contributors/ContributorsListPanel.vue

@@ -53,13 +53,17 @@
 					</PkpHeader>
 				</template>
 				<template #item-title="{item}">
-					{{ item.fullName }}
-					<Badge v-if="item.userGroupName">
-						{{ localize(item.userGroupName) }}
-					</Badge>
+					<div class="whitespace-normal text-justify">
+						{{ item.fullName }}
+						<Badge v-if="item.userGroupName">
+							{{ localize(item.userGroupName) }}
+						</Badge>
+					</div>
 				</template>
 				<template #item-subtitle="{item}">
-					{{ localize(item.affiliation) }}
+					<div class="whitespace-normal text-justify">
+						{{ localize(item.affiliation) }}
+					</div>
 				</template>
 				<template
 					v-if="

src/components/ListPanel/contributors/ContritbutorsListPanel.mdx

@@ -0,0 +1,14 @@
+import {Primary, Controls, Stories, Meta, ArgTypes} from '@storybook/blocks';
+
+import * as ContributorsListPanelStories from './ContributorsListPanel.stories.js';
+
+<Meta of={ContributorsListPanelStories} />
+
+# ContributorsListPanel
+
+## Usage
+
+Use this component to view, add, edit and delete contributors.
+
+<Primary />
+<ArgTypes />

src/components/Tabs/Tab.vue

@@ -1,7 +1,7 @@
 <template>
 	<div
 		:id="id"
-		class="pkpTab"
+		class="pkpTab min-w-0"
 		:class="classes"
 		role="tabpanel"
 		:aria-labelledby="id + '-button'"

src/mocks/contributor.js

@@ -0,0 +1,31 @@
+export default {
+	affiliation: {
+		en: 'Test affiliation',
+		es: '',
+		fr_CA: '',
+		pt: '',
+	},
+	country: 'IT',
+	email: '[email protected]',
+	familyName: {en: 'Paglieri', es: '', fr_CA: '', pt: ''},
+	fullName: 'Fabio Paglieri',
+	givenName: {en: 'Fabio', es: '', fr_CA: '', pt: ''},
+	id: 17,
+	includeInBrowse: true,
+	locale: 'en',
+	orcid: null,
+	orcidAccessDenied: null,
+	orcidAccessExpiresOn: null,
+	orcidAccessScope: null,
+	orcidAccessToken: null,
+	orcidEmailToken: null,
+	orcidIsVerified: null,
+	orcidRefreshToken: null,
+	orcidSandbox: null,
+	orcidWorkPutCode: null,
+	preferredPublicName: {en: '', es: '', fr_CA: '', pt: ''},
+	publicationId: 10,
+	seq: 0,
+	userGroupId: 14,
+	userGroupName: {en: 'Author', fr_CA: 'Auteur-e'},
+};