From fe5dcbf0a202bd0038e969bba258121fe434ce6e Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Thu, 31 Oct 2024 00:49:02 +0800
Subject: [PATCH] pkp/pkp-lib#9626 Add InitialsAvatar component

---
 .../InitialsAvatar/InitialsAvatar.stories.js  | 31 +++++++++++
 .../InitialsAvatar/InitialsAvatar.vue         | 54 +++++++++++++++++++
 2 files changed, 85 insertions(+)
 create mode 100644 src/components/InitialsAvatar/InitialsAvatar.stories.js
 create mode 100644 src/components/InitialsAvatar/InitialsAvatar.vue

diff --git a/src/components/InitialsAvatar/InitialsAvatar.stories.js b/src/components/InitialsAvatar/InitialsAvatar.stories.js
new file mode 100644
index 000000000..407923ec9
--- /dev/null
+++ b/src/components/InitialsAvatar/InitialsAvatar.stories.js
@@ -0,0 +1,31 @@
+import InitialsAvatar from './InitialsAvatar.vue';
+
+export default {
+	title: 'Components/InitialsAvatar',
+	component: InitialsAvatar,
+	render: (args) => ({
+		components: {InitialsAvatar},
+		setup() {
+			return {args};
+		},
+		template: `
+			<InitialsAvatar v-bind="args" />
+		`,
+	}),
+};
+
+export const Default = {
+	args: {givenName: 'Ramiro', familyName: 'Vaca'},
+};
+
+export const GivenNameOnly = {
+	args: {givenName: 'Daniel'},
+};
+
+export const IsSecondary = {
+	args: {givenName: 'David', familyName: 'Buskins', isSecondary: true},
+};
+
+export const Undefined = {
+	args: {},
+};
diff --git a/src/components/InitialsAvatar/InitialsAvatar.vue b/src/components/InitialsAvatar/InitialsAvatar.vue
new file mode 100644
index 000000000..762576ee8
--- /dev/null
+++ b/src/components/InitialsAvatar/InitialsAvatar.vue
@@ -0,0 +1,54 @@
+<template>
+	<div :class="classes">
+		<span v-if="initials">{{ initials }}</span>
+		<Icon v-else icon="User" class="h-5 w-5"></Icon>
+	</div>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+import Icon from '../Icon/Icon.vue';
+const props = defineProps({
+	givenName: {
+		type: String,
+		required: true,
+	},
+	familyName: {
+		type: String,
+		default: '',
+	},
+	isPrimary: {
+		type: Boolean,
+		default: true,
+	},
+	isSecondary: {
+		type: Boolean,
+		default: false,
+	},
+	isWarnable: {
+		type: Boolean,
+		default: false,
+	},
+	shrink: {
+		type: Boolean,
+		default: false,
+	},
+});
+
+const initials = computed(() => {
+	return `${props.givenName?.charAt(0) || ''}${props.familyName?.charAt(0) || ''}`.toUpperCase();
+});
+
+const classes = computed(() => ({
+	// Base
+	'inline-flex items-center justify-center align-middle rounded-full p-1 text-3xl-medium cursor-pointer': true,
+	'h-8 w-8': !props.shrink,
+	'h-5 w-5': props.shrink,
+	// Default
+	'bg-primary text-on-dark hover:text-on-dark hover:bg-hover':
+		props.isPrimary && !props.isSecondary && !props.isWarnable,
+	// Is secondary
+	'bg-secondary text-primary': props.isSecondary,
+	'bg-negative text-on-dark': props.isWarnable,
+}));
+</script>