feat: [avatar] - add singleInitial prop and prohibit special characters

PrestaShopCorp · Nov 6, 2023 · ca0ec1d · ca0ec1d
1 parent 86ac9fd
commit ca0ec1d
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 9 deletions.
diff --git a/packages/components/avatar/src/avatar.ts b/packages/components/avatar/src/avatar.ts
@@ -84,6 +84,11 @@ export const avatarProps = buildProps({
     required: false,
     default: '',
   },
+  singleInitial: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 } as const)
 
 export type AvatarProps = ExtractPropTypes<typeof avatarProps>

diff --git a/packages/components/avatar/src/avatar.vue b/packages/components/avatar/src/avatar.vue
@@ -58,14 +58,35 @@ const colorMode = computed(() => {
 })
 
 const initials = computed(() => {
-  if (props.firstname !== '' && props.lastname !== '') {
-    return props.firstname[0]?.toUpperCase() + props.lastname[0]?.toUpperCase()
-  } else if (props.firstname.length > 1 && !props.lastname) {
-    return props.firstname[0]?.toUpperCase() + props.firstname[1]?.toUpperCase()
-  } else if (props.lastname.length > 1 && !props.firstname) {
-    return props.lastname[0]?.toUpperCase() + props.lastname[1]?.toUpperCase()
-  } else {
-    return 'PS'
-  }
+  const firstInitial = props.firstname
+    ? props.firstname
+        .replace(/[^a-zA-Z0-9]/g, '')
+        .charAt(0)
+        .toUpperCase()
+    : ''
+  const lastInitial = props.lastname
+    ? props.lastname
+        .replace(/[^a-zA-Z0-9]/g, '')
+        .charAt(0)
+        .toUpperCase()
+    : ''
+  const initialsValue = props.singleInitial
+    ? firstInitial || lastInitial || 'P'
+    : firstInitial && lastInitial
+    ? firstInitial + lastInitial
+    : firstInitial && props.firstname.length > 1
+    ? firstInitial +
+      props.firstname
+        .replace(/[^a-zA-Z0-9]/g, '')
+        .charAt(1)
+        .toUpperCase()
+    : lastInitial && props.lastname.length > 1
+    ? lastInitial +
+      props.lastname
+        .replace(/[^a-zA-Z0-9]/g, '')
+        .charAt(1)
+        .toUpperCase()
+    : 'PS'
+  return initialsValue
 })
 </script>
diff --git a/packages/components/avatar/stories/avatar.stories.ts b/packages/components/avatar/stories/avatar.stories.ts
@@ -128,6 +128,14 @@ export default {
         },
       },
     },
+    singleInitial: {
+      description: 'initials match a single letter',
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
   },
   args: {
     id: 'puik-avatar-id',
@@ -139,6 +147,7 @@ export default {
     alt: 'puik-avatar-alt',
     firstname: 'Presta',
     lastname: 'Shop',
+    singleInitial: false,
   },
 } as Meta