pkp/pkp-lib#10820 Add FormErrorSummary component

Author: blesildaramirez

src/components/Form/Form.stories.js

@@ -1,4 +1,5 @@
 import Form from './Form.vue';
+import FormErrorSummary from './FormErrorSummary.vue';
 import {useContainerStateManager} from '@/composables/useContainerStateManager';
 import FormBase from './mocks/form-base';
 import FormMultilingual from './mocks/form-multilingual';
@@ -126,3 +127,42 @@ export const WithErrors = {
 
 	args: {},
 };
+
+export const WithErrorSummary = {
+	render: (args) => ({
+		components: {PkpForm: Form, FormErrorSummary},
+		setup() {
+			const {get, set, components} = useContainerStateManager();
+			const errors = {
+				email: ['Please provide a valid email address'],
+				affiliation: {
+					en: ['You must enter your affiliation in English.'],
+					fr_CA: ['You must enter your affiliation in French.'],
+					ar: ['You must enter your affiliation in Arabic.'],
+				},
+				'user-locales': ['You must select at least two options.'],
+				bio: {
+					en: ['Please provide a bio statement to accompany your publication.'],
+				},
+				country: ['Please select your country.'],
+				'mailing-address': [
+					'You must enter a mailing address where you can receive post.',
+				],
+			};
+			set('errorSummary', {
+				...FormUser,
+				...args,
+				errors,
+			});
+			return {args, errors, get, set, components};
+		},
+		template: `
+			<FormErrorSummary :errors="errors"/>
+			<PkpForm v-bind="components.errorSummary" @set="set" />
+		`,
+	}),
+
+	args: {
+		showErrorFooter: false,
+	},
+};

src/components/Form/FormErrorSummary.vue

@@ -0,0 +1,32 @@
+<template>
+	<div
+		v-if="errorsCount"
+		class="inline-flex w-full gap-x-1 rounded border border-s-4 border-attention p-2"
+	>
+		<div class="leading-none">
+			<Icon icon="Error" class="h-5 w-5" :inline="true" />
+		</div>
+		<span class="text-lg-normal">
+			{{ message }}
+		</span>
+	</div>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+import Icon from '@/components/Icon/Icon.vue';
+
+const props = defineProps({
+	errors: {
+		type: Object,
+		default: () => {},
+	},
+});
+
+const errorsCount = computed(() => Object.keys(props.errors).length);
+
+const message = computed(() => {
+	const error = errorsCount.value > 1 ? 'errors' : 'error';
+	return `${errorsCount.value} ${error} detected! Please correct the following ${error} before proceeding.`;
+});
+</script>