pkp/pkp-lib#9626 Update InitialsAvatar component

src/components/InitialsAvatar/InitialsAvatar.mdx

@@ -0,0 +1,15 @@
+import {Primary, Controls, Stories, Meta, ArgTypes} from '@storybook/blocks';
+
+import * as InitialsAvatarStories from './InitialsAvatar.stories.js';
+
+<Meta of={InitialsAvatarStories} />
+
+# InitialsAvatar
+
+## Usage
+
+Use this component to display an avatar that shows the name initials of the user. It can be used in user lists or as a user information icon in the top navbar.
+
+<Primary />
+<Controls />
+<Stories />

src/components/InitialsAvatar/InitialsAvatar.stories.js

@@ -26,6 +26,23 @@ export const IsSecondary = {
 	args: {givenName: 'David', familyName: 'Buskins', isSecondary: true},
 };
 
-export const Undefined = {
+export const IsWarnable = {
+	args: {givenName: 'Aisla', familyName: 'McCrae', isWarnable: true},
+};
+
+export const IsDisabled = {
+	args: {
+		givenName: 'Adela',
+		familyName: 'Gallego',
+		isSecondary: true,
+		isDisabled: true,
+	},
+};
+
+export const UndefinedName = {
 	args: {},
 };
+
+export const SmallIcon = {
+	args: {givenName: 'Paul', familyName: 'Hudson', shrink: true},
+};

src/components/InitialsAvatar/InitialsAvatar.vue

@@ -1,34 +1,45 @@
 <template>
 	<div :class="classes">
 		<span v-if="initials">{{ initials }}</span>
-		<Icon v-else icon="User" class="h-5 w-5"></Icon>
+		<Icon v-else icon="User" :class="shrink ? 'h-3 w-3' : 'h-5 w-5'"></Icon>
 	</div>
 </template>
 
 <script setup>
 import {computed} from 'vue';
 import Icon from '../Icon/Icon.vue';
 const props = defineProps({
+	/** User's given name */
 	givenName: {
 		type: String,
 		required: true,
 	},
+	/** User's family name  */
 	familyName: {
 		type: String,
 		default: '',
 	},
+	/** If the background should use primary color (blue) */
 	isPrimary: {
 		type: Boolean,
 		default: true,
 	},
+	/** If the background should use secondary color (white) */
 	isSecondary: {
 		type: Boolean,
 		default: false,
 	},
+	/** If the background should use negative color (red) */
 	isWarnable: {
 		type: Boolean,
 		default: false,
 	},
+	/** Use the disabled text color (gray) */
+	isDisabled: {
+		type: Boolean,
+		default: false,
+	},
+	/** Whether the avatar should be smaller in size */
 	shrink: {
 		type: Boolean,
 		default: false,
@@ -41,14 +52,18 @@ const initials = computed(() => {
 
 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,
+	'inline-flex items-center justify-center align-middle rounded-full p-1 cursor-pointer': true,
+	'h-8 w-8 text-3xl-medium': !props.shrink,
+	'h-5 w-5 text-base-normal': 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-secondary': props.isSecondary,
+	'text-primary': props.isSecondary && !props.isDisabled,
+	// Is warnable
 	'bg-negative text-on-dark': props.isWarnable,
+	// Is disabled
+	'text-disabled': props.isDisabled,
 }));
 </script>