From 2f9c253b97ecbc9813c97757ab5ecdc9b2d74596 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Thu, 19 Oct 2023 18:24:53 +0200
Subject: [PATCH 01/16] feat: create avatar component (wip)

---
 packages/components/avatar/index.ts           |  8 ++
 packages/components/avatar/src/avatar.ts      | 78 ++++++++++++++++++
 packages/components/avatar/src/avatar.vue     | 45 +++++++++++
 .../avatar/stories/avatar.stories.ts          | 34 ++++++++
 packages/components/avatar/style/css.ts       |  2 +
 packages/components/avatar/style/index.ts     |  2 +
 .../components/avatar/test/avatar.spec.ts     | 23 ++++++
 packages/components/index.ts                  |  1 +
 packages/puik/component.ts                    |  2 +
 packages/theme/src/avatar.scss                | 80 +++++++++++++++++++
 packages/theme/src/index.scss                 |  1 +
 typings/global.d.ts                           |  1 +
 12 files changed, 277 insertions(+)
 create mode 100644 packages/components/avatar/index.ts
 create mode 100644 packages/components/avatar/src/avatar.ts
 create mode 100644 packages/components/avatar/src/avatar.vue
 create mode 100644 packages/components/avatar/stories/avatar.stories.ts
 create mode 100644 packages/components/avatar/style/css.ts
 create mode 100644 packages/components/avatar/style/index.ts
 create mode 100644 packages/components/avatar/test/avatar.spec.ts
 create mode 100644 packages/theme/src/avatar.scss

diff --git a/packages/components/avatar/index.ts b/packages/components/avatar/index.ts
new file mode 100644
index 00000000..8e96fb3c
--- /dev/null
+++ b/packages/components/avatar/index.ts
@@ -0,0 +1,8 @@
+import { withInstall } from '@puik/utils'
+
+import Avatar from './src/avatar.vue'
+
+export const PuikAvatar = withInstall(Avatar)
+export default PuikAvatar
+
+export * from './src/avatar'
diff --git a/packages/components/avatar/src/avatar.ts b/packages/components/avatar/src/avatar.ts
new file mode 100644
index 00000000..a7e77338
--- /dev/null
+++ b/packages/components/avatar/src/avatar.ts
@@ -0,0 +1,78 @@
+import { buildProps } from '@puik/utils'
+import type { ExtractPropTypes, PropType } from 'vue'
+import type Avatar from './avatar.vue'
+
+export const avatarColorVariants = [
+  'neutral',
+  'blue',
+  'yellow',
+  'green',
+  'purple',
+] as const
+export type PuikAvatarBgColor = (typeof avatarColorVariants)[number]
+
+export const avatarModes = ['primary', 'reverse'] as const
+export type PuikAvatarMode = (typeof avatarModes)[number]
+
+export const avatarSizes = ['small', 'medium', 'large', 'jumbo'] as const
+export type PuikAvatarSize = (typeof avatarSizes)[number]
+
+export const avatarTypes = ['photo', 'icon', 'initials'] as const
+export type PuikAvatarType = (typeof avatarTypes)[number]
+
+export const avatarProps = buildProps({
+  id: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  colorVariant: {
+    type: String as PropType<PuikAvatarBgColor>,
+    required: false,
+    default: 'neutral',
+  },
+  size: {
+    type: String as PropType<PuikAvatarSize>,
+    required: false,
+    default: 'medium',
+  },
+  type: {
+    type: String as PropType<PuikAvatarType>,
+    required: false,
+    default: 'initials',
+  },
+  mode: {
+    type: String as PropType<PuikAvatarMode>,
+    required: false,
+    default: 'primary',
+  },
+  src: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  alt: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  icon: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  firstname: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  lastname: {
+    type: String,
+    required: false,
+    default: '',
+  },
+} as const)
+
+export type AvatarProps = ExtractPropTypes<typeof avatarProps>
+
+export type AvatarInstance = InstanceType<typeof Avatar>
diff --git a/packages/components/avatar/src/avatar.vue b/packages/components/avatar/src/avatar.vue
new file mode 100644
index 00000000..2aab2c8b
--- /dev/null
+++ b/packages/components/avatar/src/avatar.vue
@@ -0,0 +1,45 @@
+<template>
+  <div
+    :id="id"
+    :class="`puik-avatar puik-avatar--${size} puik-avatar--${type} puik-avatar--${mode} puik-avatar--${colorVariant}`"
+  >
+    <img v-if="src && type == 'photo'" :src="src" :alt="alt" />
+    <puik-icon
+      v-else-if="icon && type == 'icon'"
+      :icon="icon"
+      :font-size="iconFontSize"
+      :color="mode === 'primary' ? 'white' : 'black'"
+    />
+    <div v-else :class="`puik-avatar_initials puik-avatar_initials--${size}`">
+      {{ initials }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import PuikIcon from '../../icon'
+import { avatarProps } from './avatar'
+defineOptions({
+  name: 'PuikAvatar',
+})
+
+const props = defineProps(avatarProps)
+const iconFontSize = ref()
+const initials = ref('PS')
+
+props.size === 'small'
+  ? (iconFontSize.value = '1rem')
+  : props.size === 'medium'
+  ? (iconFontSize.value = '1.5rem')
+  : props.size === 'large'
+  ? (iconFontSize.value = '2rem')
+  : props.size === 'jumbo'
+  ? (iconFontSize.value = '2.8rem')
+  : '1rem'
+
+if (props.firstname !== '' && props.lastname !== '') {
+  initials.value =
+    props.firstname[0].toUpperCase() + props.lastname[0].toUpperCase()
+}
+</script>
diff --git a/packages/components/avatar/stories/avatar.stories.ts b/packages/components/avatar/stories/avatar.stories.ts
new file mode 100644
index 00000000..92ee5478
--- /dev/null
+++ b/packages/components/avatar/stories/avatar.stories.ts
@@ -0,0 +1,34 @@
+import PuikAvatar from './../src/avatar.vue'
+import type { Meta, StoryFn, Args } from '@storybook/vue3'
+
+export default {
+  title: 'Components/Avatar',
+  component: PuikAvatar,
+} as Meta
+
+const Template: StoryFn = (args: Args) => ({
+  components: {
+    PuikAvatar,
+  },
+  setup() {
+    return { args }
+  },
+  template: `<puik-avatar></puik-avatar>`,
+})
+
+export const Default = {
+  render: Template,
+  args: {},
+  parameters: {
+    docs: {
+      source: {
+        code: `
+        <!--VueJS Snippet-->
+
+        <!--HTML/CSS Snippet-->
+        `,
+        language: 'html',
+      },
+    },
+  },
+}
diff --git a/packages/components/avatar/style/css.ts b/packages/components/avatar/style/css.ts
new file mode 100644
index 00000000..baf5bacb
--- /dev/null
+++ b/packages/components/avatar/style/css.ts
@@ -0,0 +1,2 @@
+import '@puik/components/base/style/css'
+import '@puik/theme/puik-avatar.css'
diff --git a/packages/components/avatar/style/index.ts b/packages/components/avatar/style/index.ts
new file mode 100644
index 00000000..22f633c6
--- /dev/null
+++ b/packages/components/avatar/style/index.ts
@@ -0,0 +1,2 @@
+import '@puik/components/base/style'
+import '@puik/theme/src/avatar.scss'
diff --git a/packages/components/avatar/test/avatar.spec.ts b/packages/components/avatar/test/avatar.spec.ts
new file mode 100644
index 00000000..099d67e0
--- /dev/null
+++ b/packages/components/avatar/test/avatar.spec.ts
@@ -0,0 +1,23 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import PuikAvatar from '../src/avatar.vue'
+import type { MountingOptions, VueWrapper } from '@vue/test-utils'
+
+describe('Avatar tests', () => {
+  let wrapper: VueWrapper<any>
+  const factory = (
+    propsData: Record<string, any> = {},
+    options: MountingOptions<any> = {}
+  ) => {
+    wrapper = mount(PuikAvatar, {
+      props: {
+        ...propsData,
+      },
+      ...options,
+    })
+  }
+  it('should be a vue instance', () => {
+    factory()
+    expect(wrapper).toBeTruthy()
+  })
+})
diff --git a/packages/components/index.ts b/packages/components/index.ts
index d0a24516..1e283aff 100644
--- a/packages/components/index.ts
+++ b/packages/components/index.ts
@@ -29,3 +29,4 @@ export * from './tab-navigation'
 export * from './progress-stepper'
 export * from './chip'
 export * from './tag'
+export * from './avatar'
diff --git a/packages/puik/component.ts b/packages/puik/component.ts
index 4bc52ab5..8e556d5b 100644
--- a/packages/puik/component.ts
+++ b/packages/puik/component.ts
@@ -1,3 +1,4 @@
+import { PuikAvatar } from '@puik/components/avatar'
 import { PuikTag } from '@puik/components/tag'
 import { PuikChip } from '@puik/components/chip'
 import {
@@ -50,6 +51,7 @@ import type { Plugin } from 'vue'
 
 // prettier-ignore
 export default [
+  PuikAvatar,
   PuikTag,
   PuikChip,
   PuikTabNavigationGroupPanels,
diff --git a/packages/theme/src/avatar.scss b/packages/theme/src/avatar.scss
new file mode 100644
index 00000000..8cf32458
--- /dev/null
+++ b/packages/theme/src/avatar.scss
@@ -0,0 +1,80 @@
+@use './common/typography.scss';
+
+.puik-avatar {
+  @apply flex justify-center items-center rounded-full overflow-hidden;
+}
+.puik-avatar--small {
+  @apply w-6 h-6;
+}
+.puik-avatar--medium {
+  @apply w-8 h-8;
+}
+.puik-avatar--large {
+  @apply w-12 h-12;
+}
+.puik-avatar--jumbo {
+  @apply w-14 h-14;
+}
+.puik-avatar--primary {
+  @apply border border-transparent;
+  .puik-avatar_initials {
+    @apply text-white;
+  }
+}
+.puik-avatar--reverse {
+  @apply border border-primary-300;
+  .puik-avatar_initials {
+    @apply text-primary-800;
+  }
+}
+.puik-avatar--photo {
+  @apply border-none;
+  img {
+    object-fit: cover;
+  }
+}
+.puik-avatar--neutral {
+  @apply bg-primary-800;
+}
+.puik-avatar--blue {
+  @apply bg-ocean-blue;
+}
+.puik-avatar--yellow {
+  @apply bg-amber;
+}
+.puik-avatar--green {
+  @apply bg-green-400;
+}
+.puik-avatar--purple {
+  @apply bg-purple;
+}
+.puik-avatar--reverse.puik-avatar--neutral {
+  @apply bg-white;
+}
+.puik-avatar--reverse.puik-avatar--blue {
+  @apply bg-ocean-blue-50;
+}
+.puik-avatar--reverse.puik-avatar--yellow {
+  @apply bg-amber-100;
+}
+.puik-avatar--reverse.puik-avatar--green {
+  @apply bg-green-50;
+}
+.puik-avatar--reverse.puik-avatar--purple {
+  @apply bg-purple-50;
+}
+.puik-avatar_initials {
+  @apply font-bold;
+  &--small {
+    @apply text-xs/none;
+  }
+  &--medium {
+    @apply text-sm/none;
+  }
+  &--large {
+    @apply text-base/none;
+  }
+  &--jumbo {
+    @apply text-2xl/none;
+  }
+}
diff --git a/packages/theme/src/index.scss b/packages/theme/src/index.scss
index d888a495..81d1eb8c 100644
--- a/packages/theme/src/index.scss
+++ b/packages/theme/src/index.scss
@@ -42,3 +42,4 @@
 @use 'progress-stepper-step';
 @use 'chip';
 @use 'tag';
+@use 'avatar';
diff --git a/typings/global.d.ts b/typings/global.d.ts
index df474081..c403a209 100644
--- a/typings/global.d.ts
+++ b/typings/global.d.ts
@@ -1,6 +1,7 @@
 // GlobalComponents for Volar
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    PuikAvatar: typeof import('@prestashopcorp/puik')['PuikAvatar']
     PuikTag: typeof import('@prestashopcorp/puik')['PuikTag']
     PuikTabNavigationGroupPanels: typeof import('@prestashopcorp/puik')['PuikTabNavigationGroupPanels']
     PuikTabNavigationTitle: typeof import('@prestashopcorp/puik')['PuikTabNavigationTitle']

From 77ab4da25fe202ba6a4ab426257882e91a5a012f Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Fri, 20 Oct 2023 17:59:37 +0200
Subject: [PATCH 02/16] docs: storybook docs (wip)

---
 packages/components/avatar/src/avatar.ts      |  22 +-
 packages/components/avatar/src/avatar.vue     |   2 +-
 .../avatar/stories/avatar.stories.ts          | 286 +++++++++++++++++-
 3 files changed, 292 insertions(+), 18 deletions(-)

diff --git a/packages/components/avatar/src/avatar.ts b/packages/components/avatar/src/avatar.ts
index a7e77338..29b053eb 100644
--- a/packages/components/avatar/src/avatar.ts
+++ b/packages/components/avatar/src/avatar.ts
@@ -2,14 +2,14 @@ import { buildProps } from '@puik/utils'
 import type { ExtractPropTypes, PropType } from 'vue'
 import type Avatar from './avatar.vue'
 
-export const avatarColorVariants = [
+export const avatarColors = [
   'neutral',
   'blue',
   'yellow',
   'green',
   'purple',
 ] as const
-export type PuikAvatarBgColor = (typeof avatarColorVariants)[number]
+export type PuikAvatarBgColor = (typeof avatarColors)[number]
 
 export const avatarModes = ['primary', 'reverse'] as const
 export type PuikAvatarMode = (typeof avatarModes)[number]
@@ -26,11 +26,16 @@ export const avatarProps = buildProps({
     required: false,
     default: undefined,
   },
-  colorVariant: {
+  color: {
     type: String as PropType<PuikAvatarBgColor>,
     required: false,
     default: 'neutral',
   },
+  mode: {
+    type: String as PropType<PuikAvatarMode>,
+    required: false,
+    default: 'primary',
+  },
   size: {
     type: String as PropType<PuikAvatarSize>,
     required: false,
@@ -41,22 +46,17 @@ export const avatarProps = buildProps({
     required: false,
     default: 'initials',
   },
-  mode: {
-    type: String as PropType<PuikAvatarMode>,
-    required: false,
-    default: 'primary',
-  },
-  src: {
+  icon: {
     type: String,
     required: false,
     default: '',
   },
-  alt: {
+  src: {
     type: String,
     required: false,
     default: '',
   },
-  icon: {
+  alt: {
     type: String,
     required: false,
     default: '',
diff --git a/packages/components/avatar/src/avatar.vue b/packages/components/avatar/src/avatar.vue
index 2aab2c8b..61fe1b81 100644
--- a/packages/components/avatar/src/avatar.vue
+++ b/packages/components/avatar/src/avatar.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     :id="id"
-    :class="`puik-avatar puik-avatar--${size} puik-avatar--${type} puik-avatar--${mode} puik-avatar--${colorVariant}`"
+    :class="`puik-avatar puik-avatar--${size} puik-avatar--${type} puik-avatar--${mode} puik-avatar--${color}`"
   >
     <img v-if="src && type == 'photo'" :src="src" :alt="alt" />
     <puik-icon
diff --git a/packages/components/avatar/stories/avatar.stories.ts b/packages/components/avatar/stories/avatar.stories.ts
index 92ee5478..03f9bd69 100644
--- a/packages/components/avatar/stories/avatar.stories.ts
+++ b/packages/components/avatar/stories/avatar.stories.ts
@@ -1,34 +1,308 @@
+import { ref } from 'vue'
+import { PuikIcon } from '@puik/components'
+import {
+  avatarColors,
+  avatarModes,
+  avatarSizes,
+  avatarTypes,
+} from '../src/avatar'
 import PuikAvatar from './../src/avatar.vue'
 import type { Meta, StoryFn, Args } from '@storybook/vue3'
 
+const avatarColorsSummary = avatarColors.join('|')
+const avatarModesSummary = avatarModes.join('|')
+const avatarSizesSummary = avatarSizes.join('|')
+const avatarTypesSummary = avatarTypes.join('|')
+
 export default {
   title: 'Components/Avatar',
   component: PuikAvatar,
+  argTypes: {
+    id: {
+      description:
+        "Prop which will correspond to the component's html id attribute. NB: must not start with a number",
+      control: 'text',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: 'undefined',
+        },
+      },
+    },
+    color: {
+      description:
+        'Color variants of avatar component (neutral by default, blue, yellow, green, purple)',
+      control: 'select',
+      options: avatarColors,
+      table: {
+        type: {
+          summary: avatarColorsSummary,
+        },
+        defaultValue: {
+          summary: 'neutral',
+        },
+      },
+    },
+    mode: {
+      description:
+        'Two possible variations (primary and reverse) : depending on a dark or light background of the container where the avatar is placed',
+      control: 'select',
+      options: avatarModes,
+      table: {
+        type: {
+          summary: avatarModesSummary,
+        },
+        defaultValue: {
+          summary: 'primary',
+        },
+      },
+    },
+    size: {
+      description:
+        'Size variants of avatar component (small, medium, large, jumbo)',
+      control: 'select',
+      options: avatarSizes,
+      table: {
+        type: {
+          summary: avatarSizesSummary,
+        },
+        defaultValue: {
+          summary: 'medium',
+        },
+      },
+    },
+    type: {
+      description: 'Content type of avatar (initials, image or icon)',
+      control: 'select',
+      options: avatarTypes,
+      table: {
+        type: {
+          summary: avatarTypesSummary,
+        },
+        defaultValue: {
+          summary: 'initials',
+        },
+      },
+    },
+    icon: {
+      description: 'Material icon name (cf https://fonts.google.com/icons)',
+      control: 'text',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: 'none',
+        },
+      },
+    },
+    src: {
+      description: 'Image source if avatar type is set to "photo"',
+      control: 'text',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: 'none',
+        },
+      },
+    },
+    alt: {
+      description: 'Image alt attribute if avatar type prop is set to "photo"',
+      control: 'text',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: 'none',
+        },
+      },
+    },
+    firstname: {
+      description:
+        'If avatar type prop is set to "initials". The "initials" type is composed of two letters max (first letter of firstname prop corresponds to the first)',
+      control: 'text',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: 'none',
+        },
+      },
+    },
+    lastname: {
+      description:
+        'If avatar type prop is set to "initials". The "initials" type is composed of two letters max (first letter of lastname corresponds to the last)',
+      control: 'text',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: 'none',
+        },
+      },
+    },
+  },
+  args: {
+    id: 'puik-avatar-id',
+    color: 'neutral',
+    mode: 'primary',
+    size: 'medium',
+    type: 'initials',
+    icon: 'home',
+    src: 'https://picsum.photos/200',
+    alt: 'puik-avatar-alt',
+    firstname: 'Presta',
+    lastname: 'Shop',
+  },
 } as Meta
 
-const Template: StoryFn = (args: Args) => ({
+const DefaultTemplate: StoryFn = (args: Args) => ({
   components: {
+    PuikIcon,
     PuikAvatar,
   },
   setup() {
     return { args }
   },
-  template: `<puik-avatar></puik-avatar>`,
+  template: `
+<PuikAvatar v-bind="args" />
+`,
+})
+
+const SizeTemplate: StoryFn = (args: Args) => ({
+  components: {
+    PuikIcon,
+    PuikAvatar,
+  },
+  setup() {
+    const avatars = ref([
+      {
+        type: 'initials',
+        size: 'small',
+      },
+      {
+        type: 'initials',
+        size: 'medium',
+      },
+      {
+        type: 'initials',
+        size: 'large',
+      },
+      {
+        type: 'initials',
+        size: 'jumbo',
+      },
+      {
+        type: 'icon',
+        size: 'small',
+        icon: 'home',
+      },
+      {
+        type: 'icon',
+        size: 'medium',
+        icon: 'home',
+      },
+      {
+        type: 'icon',
+        size: 'large',
+        icon: 'home',
+      },
+      {
+        type: 'icon',
+        size: 'jumbo',
+        icon: 'home',
+      },
+      {
+        type: 'photo',
+        size: 'small',
+        src: 'https://picsum.photos/200',
+      },
+      {
+        type: 'photo',
+        size: 'medium',
+        src: 'https://picsum.photos/200',
+      },
+      {
+        type: 'photo',
+        size: 'large',
+        src: 'https://picsum.photos/200',
+      },
+      {
+        type: 'photo',
+        size: 'jumbo',
+        src: 'https://picsum.photos/200',
+      },
+    ])
+    return { avatars, args }
+  },
+  template: `
+<div class="flex space-x-2">
+  <puik-avatar
+    v-for="(avatar, index) in avatars"
+    :key="index"
+    :size="avatar.size"
+    :type="avatar.type"
+    :icon="avatar.icon"
+    :src="avatar.src"
+  />
+</div>
+`,
 })
 
 export const Default = {
-  render: Template,
+  render: DefaultTemplate,
   args: {},
   parameters: {
     docs: {
       source: {
         code: `
-        <!--VueJS Snippet-->
-
-        <!--HTML/CSS Snippet-->
+<!--VueJS Snippet-->
+<PuikAvatar
+  :id="args.id"
+  :color="args.color"
+  :size="args.size"
+  :type="args.type"
+  :mode="args.mode"
+  :src="args.src"
+  :alt="args.alt"
+  :icon="args.icon"
+  :firstname="args.firstname"
+  :lastname="args.lastname"
+/>
+<!--HTML/CSS Snippet-->
         `,
         language: 'html',
       },
     },
   },
 }
+
+export const Size = {
+  render: SizeTemplate,
+  args: {},
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<!--VueJS Snippet-->
+<!-- $colors: ${avatarColorsSummary} -->
+<!-- $types: ${avatarTypesSummary} -->
+
+<PuikAvatar
+  :size="{$color}"
+  :type="{$type}"
+/>
+<!--HTML/CSS Snippet-->
+`,
+        language: 'html',
+      },
+    },
+  },
+}

From 32ba3b4c560932b0e32bbb5d889baf96dd6acc97 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Sun, 22 Oct 2023 22:25:07 +0200
Subject: [PATCH 03/16] docs: avatar storybook

---
 .../avatar/stories/avatar.stories.ts          | 317 +++++++++++++++++-
 packages/theme/src/avatar.scss                |   2 +-
 2 files changed, 309 insertions(+), 10 deletions(-)

diff --git a/packages/components/avatar/stories/avatar.stories.ts b/packages/components/avatar/stories/avatar.stories.ts
index 03f9bd69..20beaf9a 100644
--- a/packages/components/avatar/stories/avatar.stories.ts
+++ b/packages/components/avatar/stories/avatar.stories.ts
@@ -176,7 +176,35 @@ const DefaultTemplate: StoryFn = (args: Args) => ({
 `,
 })
 
-const SizeTemplate: StoryFn = (args: Args) => ({
+const TypesTemplate: StoryFn = (args: Args) => ({
+  components: {
+    PuikIcon,
+    PuikAvatar,
+  },
+  setup() {
+    return { args }
+  },
+  template: `
+<div class="flex space-x-2">
+  <PuikAvatar
+    type="initials"
+    :firstname="args.firstname"
+    :lastname="args.lastname"
+  />
+  <PuikAvatar
+    type="icon"
+    :icon="args.icon"
+  />
+  <PuikAvatar
+    type="photo"
+    :src="args.src"
+    :alt="args.alt"
+  />
+</div>
+`,
+})
+
+const SizesTemplate: StoryFn = (args: Args) => ({
   components: {
     PuikIcon,
     PuikAvatar,
@@ -256,6 +284,154 @@ const SizeTemplate: StoryFn = (args: Args) => ({
 `,
 })
 
+const ModesAndColorsTemplate: StoryFn = (args: Args) => ({
+  components: {
+    PuikIcon,
+    PuikAvatar,
+  },
+  setup() {
+    const avatarsPrimary = ref([
+      {
+        type: 'initials',
+        mode: 'primary',
+        color: 'neutral',
+      },
+      {
+        type: 'initials',
+        mode: 'primary',
+        color: 'blue',
+      },
+      {
+        type: 'initials',
+        mode: 'primary',
+        color: 'yellow',
+      },
+      {
+        type: 'initials',
+        mode: 'primary',
+        color: 'green',
+      },
+      {
+        type: 'initials',
+        mode: 'primary',
+        color: 'purple',
+      },
+      {
+        type: 'icon',
+        mode: 'primary',
+        color: 'neutral',
+        icon: 'home',
+      },
+      {
+        type: 'icon',
+        mode: 'primary',
+        color: 'blue',
+        icon: 'home',
+      },
+      {
+        type: 'icon',
+        mode: 'primary',
+        color: 'yellow',
+        icon: 'home',
+      },
+      {
+        type: 'icon',
+        mode: 'primary',
+        color: 'green',
+        icon: 'home',
+      },
+      {
+        type: 'icon',
+        mode: 'primary',
+        color: 'purple',
+        icon: 'home',
+      },
+    ])
+
+    const avatarsReverse = ref([
+      {
+        type: 'initials',
+        mode: 'reverse',
+        color: 'neutral',
+      },
+      {
+        type: 'initials',
+        mode: 'reverse',
+        color: 'blue',
+      },
+      {
+        type: 'initials',
+        mode: 'reverse',
+        color: 'yellow',
+      },
+      {
+        type: 'initials',
+        mode: 'reverse',
+        color: 'green',
+      },
+      {
+        type: 'initials',
+        mode: 'reverse',
+        color: 'purple',
+      },
+      {
+        type: 'icon',
+        mode: 'reverse',
+        color: 'neutral',
+        icon: 'home',
+      },
+      {
+        type: 'icon',
+        mode: 'reverse',
+        color: 'blue',
+        icon: 'home',
+      },
+      {
+        type: 'icon',
+        mode: 'reverse',
+        color: 'yellow',
+        icon: 'home',
+      },
+      {
+        type: 'icon',
+        mode: 'reverse',
+        color: 'green',
+        icon: 'home',
+      },
+      {
+        type: 'icon',
+        mode: 'reverse',
+        color: 'purple',
+        icon: 'home',
+      },
+    ])
+
+    return { avatarsPrimary, avatarsReverse, args }
+  },
+  template: `
+<div class="flex space-x-2" style="margin-bottom: 1rem; padding: 1rem;">
+  <puik-avatar
+    v-for="(avatar, index) in avatarsPrimary"
+    :key="index"
+    :type="avatar.type"
+    :mode="avatar.mode"
+    :color="avatar.color"
+    :icon="avatar.icon"
+  />
+</div>
+<div class="flex space-x-2" style="padding: 1rem; background-color: black;">
+  <puik-avatar
+    v-for="(avatar, index) in avatarsReverse"
+    :key="index"
+    :type="avatar.type"
+    :mode="avatar.mode"
+    :color="avatar.color"
+    :icon="avatar.icon"
+  />
+</div>
+`,
+})
+
 export const Default = {
   render: DefaultTemplate,
   args: {},
@@ -263,7 +439,8 @@ export const Default = {
     docs: {
       source: {
         code: `
-<!--VueJS Snippet-->
+<!-- VueJS Snippet -->
+<!-- Vue component with all possible props -->
 <PuikAvatar
   :id="args.id"
   :color="args.color"
@@ -276,7 +453,14 @@ export const Default = {
   :firstname="args.firstname"
   :lastname="args.lastname"
 />
-<!--HTML/CSS Snippet-->
+
+<!-- HTML/CSS Snippet -->
+<!-- Avatar (by default) -->
+<div id="puik-avatar-id" class="puik-avatar puik-avatar--medium puik-avatar--initials puik-avatar--primary puik-avatar--neutral">
+  <div class="puik-avatar_initials puik-avatar_initials--medium">
+    PS
+  </div>
+</div>
         `,
         language: 'html',
       },
@@ -284,22 +468,137 @@ export const Default = {
   },
 }
 
-export const Size = {
-  render: SizeTemplate,
+export const Types = {
+  render: TypesTemplate,
   args: {},
   parameters: {
     docs: {
       source: {
         code: `
-<!--VueJS Snippet-->
-<!-- $colors: ${avatarColorsSummary} -->
+<!-- VueJS Snippet -->
+<!-- initials type -->
+<PuikAvatar
+  type="initials"
+  :firstname="args.firstname"
+  :lastname="args.lastname"
+/>
+<!-- icon type -->
+<PuikAvatar
+  type="icon"
+  :icon="args.icon"
+/>
+<!-- photo type -->
+<PuikAvatar
+  type="photo"
+  :src="args.src"
+  :alt="args.alt"
+/>
+
+<!-- HTML/CSS Snippet -->
+<!-- type initials-->
+<div class="puik-avatar puik-avatar--medium puik-avatar--initials puik-avatar--primary puik-avatar--neutral">
+  <div class="puik-avatar_initials puik-avatar_initials--medium">
+    PS
+  </div>
+</div>
+<!-- type icon-->
+<div class="puik-avatar puik-avatar--medium puik-avatar--icon puik-avatar--primary puik-avatar--neutral">
+  <div class="puik-icon" style="font-size: 1.5rem; color: white;">
+    home
+  </div>
+</div>
+<!-- type photo-->
+<div class="puik-avatar puik-avatar--medium puik-avatar--photo puik-avatar--primary puik-avatar--neutral">
+  <img src="https://picsum.photos/200" alt="puik-avatar-alt">
+</div>
+        `,
+        language: 'html',
+      },
+    },
+  },
+}
+
+export const Sizes = {
+  render: SizesTemplate,
+  args: {},
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<!-- VueJS Snippet -->
+<!-- $sizes: ${avatarSizesSummary} -->
 <!-- $types: ${avatarTypesSummary} -->
 
 <PuikAvatar
-  :size="{$color}"
+  :size="{$size}"
   :type="{$type}"
 />
-<!--HTML/CSS Snippet-->
+
+<!-- HTML/CSS Snippet -->
+<!-- initials type -->
+<div class="puik-avatar puik-avatar--{$size} puik-avatar--initials puik-avatar--primary puik-avatar--neutral">
+  <div class="puik-avatar_initials puik-avatar_initials--{$size}">
+    PS
+  </div>
+</div>
+<!-- icon type -->
+<!-- 
+NB: values of {$iconFontSize} to apply depending on the prop size:
+  small = 1rem
+  medium = 1.5rem
+  large = 2rem
+  jumbo = 2.8rem
+-->
+<div class="puik-avatar puik-avatar--{$size} puik-avatar--icon puik-avatar--primary puik-avatar--neutral">
+  <div class="puik-icon" style="font-size: {$iconFontSize}; color: white;">
+    home
+  </div>
+</div>
+<!-- photo type -->
+<div class="puik-avatar puik-avatar--{$size} puik-avatar--photo puik-avatar--primary puik-avatar--neutral">
+  <img src="https://picsum.photos/200" alt="puik-avatar-alt">
+</div>
+`,
+        language: 'html',
+      },
+    },
+  },
+}
+
+export const ModesAndColors = {
+  render: ModesAndColorsTemplate,
+  args: {},
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<!-- VueJS Snippet -->
+<!-- $colors: ${avatarColorsSummary} -->
+<!-- $modes: ${avatarModesSummary} -->
+
+<puik-avatar
+  :mode="{$mode}"
+  :color="{$color}"
+/>
+
+<!-- HTML/CSS Snippet -->
+<!-- initials type -->
+<div class="puik-avatar puik-avatar--medium puik-avatar--initials puik-avatar--{$mode} puik-avatar--{$color}">
+  <div class="puik-avatar_initials puik-avatar_initials--{$mode}">
+    PS
+  </div>
+</div>
+<!-- icon type -->
+<!--
+NB: values of {$iconColor} to apply depending on the prop mode:
+  primary = white
+  reverse = black
+-->
+<div class="puik-avatar puik-avatar--medium puik-avatar--icon puik-avatar--{$mode} puik-avatar--{$color}">
+  <div class="puik-icon" style="font-size: 1.5rem; color: {$iconColor};">
+    home
+  </div>
+</div>
 `,
         language: 'html',
       },
diff --git a/packages/theme/src/avatar.scss b/packages/theme/src/avatar.scss
index 8cf32458..22418829 100644
--- a/packages/theme/src/avatar.scss
+++ b/packages/theme/src/avatar.scss
@@ -43,7 +43,7 @@
   @apply bg-amber;
 }
 .puik-avatar--green {
-  @apply bg-green-400;
+  @apply bg-green;
 }
 .puik-avatar--purple {
   @apply bg-purple;

From 3444cfd4d8ea4371e469f1f538084d7da7c7b823 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Sun, 22 Oct 2023 22:56:00 +0200
Subject: [PATCH 04/16] test: vitest specs

---
 .../components/avatar/test/avatar.spec.ts     | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/packages/components/avatar/test/avatar.spec.ts b/packages/components/avatar/test/avatar.spec.ts
index 099d67e0..39e8c0d3 100644
--- a/packages/components/avatar/test/avatar.spec.ts
+++ b/packages/components/avatar/test/avatar.spec.ts
@@ -5,6 +5,11 @@ import type { MountingOptions, VueWrapper } from '@vue/test-utils'
 
 describe('Avatar tests', () => {
   let wrapper: VueWrapper<any>
+  const findAvatar = () => wrapper.find('.puik-avatar')
+  const findInitialsWrapper = () => wrapper.find('.puik-avatar_initials')
+  const findIconWrapper = () => wrapper.find('.puik-icon')
+  const findImg = () => wrapper.find('.puik-avatar img')
+
   const factory = (
     propsData: Record<string, any> = {},
     options: MountingOptions<any> = {}
@@ -20,4 +25,40 @@ describe('Avatar tests', () => {
     factory()
     expect(wrapper).toBeTruthy()
   })
+
+  it('as id prop value is "puik-avatar-id", id html attribute of puik-avatar should be "puik-avatar-id"', () => {
+    factory({ id: 'puik-avatar-id' })
+    expect(findAvatar().attributes().id).toBe('puik-avatar-id')
+  })
+
+  it('should display a blue version of the avatar', () => {
+    factory({ color: 'blue' })
+    expect(findAvatar().classes()).toContain('puik-avatar--blue')
+  })
+
+  it('should display the avatar in reverse mode', () => {
+    factory({ mode: 'reverse' })
+    expect(findAvatar().classes()).toContain('puik-avatar--reverse')
+  })
+
+  it('should display the avatar in large size', () => {
+    factory({ size: 'large' })
+    expect(findAvatar().classes()).toContain('puik-avatar--large')
+  })
+
+  it('should display the initials "PA"', () => {
+    factory({ firstname: 'Puik', lastname: 'Avatar' })
+    expect(findInitialsWrapper().text()).toBe('PA')
+  })
+
+  it('icon type avatar should display the icon material "home"', () => {
+    factory({ type: 'icon', icon: 'home' })
+    expect(findIconWrapper().text()).toBe('home')
+  })
+
+  it('photo type avatar should display an image with src attribute set to "src-img" and an attribute alt set to "alt-img"', () => {
+    factory({ type: 'photo', src: 'src-img', alt: 'alt-img' })
+    expect(findImg().attributes().src).toBe('src-img')
+    expect(findImg().attributes().alt).toBe('alt-img')
+  })
 })

From 39f4b7990974839ee308a168313571ce38bec822 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Tue, 24 Oct 2023 11:45:28 +0200
Subject: [PATCH 05/16] fix: handle case where one of the firstname and
 lastname is missing

---
 packages/components/avatar/src/avatar.vue          | 14 ++++++++++----
 .../components/avatar/stories/avatar.stories.ts    |  4 ++--
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/components/avatar/src/avatar.vue b/packages/components/avatar/src/avatar.vue
index 61fe1b81..069d56e2 100644
--- a/packages/components/avatar/src/avatar.vue
+++ b/packages/components/avatar/src/avatar.vue
@@ -38,8 +38,14 @@ props.size === 'small'
   ? (iconFontSize.value = '2.8rem')
   : '1rem'
 
-if (props.firstname !== '' && props.lastname !== '') {
-  initials.value =
-    props.firstname[0].toUpperCase() + props.lastname[0].toUpperCase()
-}
+props.firstname !== '' && props.lastname !== ''
+  ? (initials.value =
+      props.firstname[0]?.toUpperCase() + props.lastname[0]?.toUpperCase())
+  : props.firstname.length > 1 && !props.lastname
+  ? (initials.value =
+      props.firstname[0]?.toUpperCase() + props.firstname[1]?.toUpperCase())
+  : props.lastname.length > 1 && !props.firstname
+  ? (initials.value =
+      props.lastname[0]?.toUpperCase() + props.lastname[1]?.toUpperCase())
+  : (initials.value = 'PS')
 </script>
diff --git a/packages/components/avatar/stories/avatar.stories.ts b/packages/components/avatar/stories/avatar.stories.ts
index 20beaf9a..0c4a268e 100644
--- a/packages/components/avatar/stories/avatar.stories.ts
+++ b/packages/components/avatar/stories/avatar.stories.ts
@@ -124,7 +124,7 @@ export default {
     },
     firstname: {
       description:
-        'If avatar type prop is set to "initials". The "initials" type is composed of two letters max (first letter of firstname prop corresponds to the first)',
+        'If avatar type prop is set to "initials". The "initials" type is composed of two letters max (first letter of firstname prop corresponds to the first). NB: if the lastname prop is missing then the initials will be the first two letters of the firstname prop',
       control: 'text',
       table: {
         type: {
@@ -137,7 +137,7 @@ export default {
     },
     lastname: {
       description:
-        'If avatar type prop is set to "initials". The "initials" type is composed of two letters max (first letter of lastname corresponds to the last)',
+        'If avatar type prop is set to "initials". The "initials" type is composed of two letters max (first letter of lastname corresponds to the last). NB : if the firstname prop is missing then the initials will be the first two letters of the lastname prop ',
       control: 'text',
       table: {
         type: {

From 75f36b9ecf383a8e08518b101f1979c63f4fcd22 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Fri, 3 Nov 2023 10:39:48 +0100
Subject: [PATCH 06/16] feat: [avatar] - remove color prop

---
 packages/components/avatar/src/avatar.ts      |  14 --
 packages/components/avatar/src/avatar.vue     |   3 +-
 .../avatar/stories/avatar.stories.ts          | 148 ++----------------
 .../components/avatar/test/avatar.spec.ts     |   5 -
 packages/theme/src/avatar.scss                |  31 +---
 5 files changed, 18 insertions(+), 183 deletions(-)

diff --git a/packages/components/avatar/src/avatar.ts b/packages/components/avatar/src/avatar.ts
index 29b053eb..bd7a5fe6 100644
--- a/packages/components/avatar/src/avatar.ts
+++ b/packages/components/avatar/src/avatar.ts
@@ -2,15 +2,6 @@ import { buildProps } from '@puik/utils'
 import type { ExtractPropTypes, PropType } from 'vue'
 import type Avatar from './avatar.vue'
 
-export const avatarColors = [
-  'neutral',
-  'blue',
-  'yellow',
-  'green',
-  'purple',
-] as const
-export type PuikAvatarBgColor = (typeof avatarColors)[number]
-
 export const avatarModes = ['primary', 'reverse'] as const
 export type PuikAvatarMode = (typeof avatarModes)[number]
 
@@ -26,11 +17,6 @@ export const avatarProps = buildProps({
     required: false,
     default: undefined,
   },
-  color: {
-    type: String as PropType<PuikAvatarBgColor>,
-    required: false,
-    default: 'neutral',
-  },
   mode: {
     type: String as PropType<PuikAvatarMode>,
     required: false,
diff --git a/packages/components/avatar/src/avatar.vue b/packages/components/avatar/src/avatar.vue
index 069d56e2..d4e81c8a 100644
--- a/packages/components/avatar/src/avatar.vue
+++ b/packages/components/avatar/src/avatar.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     :id="id"
-    :class="`puik-avatar puik-avatar--${size} puik-avatar--${type} puik-avatar--${mode} puik-avatar--${color}`"
+    :class="`puik-avatar puik-avatar--${size} puik-avatar--${type} puik-avatar--${mode}`"
   >
     <img v-if="src && type == 'photo'" :src="src" :alt="alt" />
     <puik-icon
@@ -20,6 +20,7 @@
 import { ref } from 'vue'
 import PuikIcon from '../../icon'
 import { avatarProps } from './avatar'
+
 defineOptions({
   name: 'PuikAvatar',
 })
diff --git a/packages/components/avatar/stories/avatar.stories.ts b/packages/components/avatar/stories/avatar.stories.ts
index 0c4a268e..fa6fcfd3 100644
--- a/packages/components/avatar/stories/avatar.stories.ts
+++ b/packages/components/avatar/stories/avatar.stories.ts
@@ -1,15 +1,9 @@
 import { ref } from 'vue'
 import { PuikIcon } from '@puik/components'
-import {
-  avatarColors,
-  avatarModes,
-  avatarSizes,
-  avatarTypes,
-} from '../src/avatar'
+import { avatarModes, avatarSizes, avatarTypes } from '../src/avatar'
 import PuikAvatar from './../src/avatar.vue'
 import type { Meta, StoryFn, Args } from '@storybook/vue3'
 
-const avatarColorsSummary = avatarColors.join('|')
 const avatarModesSummary = avatarModes.join('|')
 const avatarSizesSummary = avatarSizes.join('|')
 const avatarTypesSummary = avatarTypes.join('|')
@@ -31,20 +25,6 @@ export default {
         },
       },
     },
-    color: {
-      description:
-        'Color variants of avatar component (neutral by default, blue, yellow, green, purple)',
-      control: 'select',
-      options: avatarColors,
-      table: {
-        type: {
-          summary: avatarColorsSummary,
-        },
-        defaultValue: {
-          summary: 'neutral',
-        },
-      },
-    },
     mode: {
       description:
         'Two possible variations (primary and reverse) : depending on a dark or light background of the container where the avatar is placed',
@@ -151,7 +131,6 @@ export default {
   },
   args: {
     id: 'puik-avatar-id',
-    color: 'neutral',
     mode: 'primary',
     size: 'medium',
     type: 'initials',
@@ -284,7 +263,7 @@ const SizesTemplate: StoryFn = (args: Args) => ({
 `,
 })
 
-const ModesAndColorsTemplate: StoryFn = (args: Args) => ({
+const ModesTemplate: StoryFn = (args: Args) => ({
   components: {
     PuikIcon,
     PuikAvatar,
@@ -294,56 +273,10 @@ const ModesAndColorsTemplate: StoryFn = (args: Args) => ({
       {
         type: 'initials',
         mode: 'primary',
-        color: 'neutral',
-      },
-      {
-        type: 'initials',
-        mode: 'primary',
-        color: 'blue',
-      },
-      {
-        type: 'initials',
-        mode: 'primary',
-        color: 'yellow',
-      },
-      {
-        type: 'initials',
-        mode: 'primary',
-        color: 'green',
-      },
-      {
-        type: 'initials',
-        mode: 'primary',
-        color: 'purple',
-      },
-      {
-        type: 'icon',
-        mode: 'primary',
-        color: 'neutral',
-        icon: 'home',
-      },
-      {
-        type: 'icon',
-        mode: 'primary',
-        color: 'blue',
-        icon: 'home',
-      },
-      {
-        type: 'icon',
-        mode: 'primary',
-        color: 'yellow',
-        icon: 'home',
-      },
-      {
-        type: 'icon',
-        mode: 'primary',
-        color: 'green',
-        icon: 'home',
       },
       {
         type: 'icon',
         mode: 'primary',
-        color: 'purple',
         icon: 'home',
       },
     ])
@@ -352,56 +285,10 @@ const ModesAndColorsTemplate: StoryFn = (args: Args) => ({
       {
         type: 'initials',
         mode: 'reverse',
-        color: 'neutral',
-      },
-      {
-        type: 'initials',
-        mode: 'reverse',
-        color: 'blue',
-      },
-      {
-        type: 'initials',
-        mode: 'reverse',
-        color: 'yellow',
-      },
-      {
-        type: 'initials',
-        mode: 'reverse',
-        color: 'green',
-      },
-      {
-        type: 'initials',
-        mode: 'reverse',
-        color: 'purple',
       },
       {
         type: 'icon',
         mode: 'reverse',
-        color: 'neutral',
-        icon: 'home',
-      },
-      {
-        type: 'icon',
-        mode: 'reverse',
-        color: 'blue',
-        icon: 'home',
-      },
-      {
-        type: 'icon',
-        mode: 'reverse',
-        color: 'yellow',
-        icon: 'home',
-      },
-      {
-        type: 'icon',
-        mode: 'reverse',
-        color: 'green',
-        icon: 'home',
-      },
-      {
-        type: 'icon',
-        mode: 'reverse',
-        color: 'purple',
         icon: 'home',
       },
     ])
@@ -415,7 +302,6 @@ const ModesAndColorsTemplate: StoryFn = (args: Args) => ({
     :key="index"
     :type="avatar.type"
     :mode="avatar.mode"
-    :color="avatar.color"
     :icon="avatar.icon"
   />
 </div>
@@ -425,7 +311,6 @@ const ModesAndColorsTemplate: StoryFn = (args: Args) => ({
     :key="index"
     :type="avatar.type"
     :mode="avatar.mode"
-    :color="avatar.color"
     :icon="avatar.icon"
   />
 </div>
@@ -443,7 +328,6 @@ export const Default = {
 <!-- Vue component with all possible props -->
 <PuikAvatar
   :id="args.id"
-  :color="args.color"
   :size="args.size"
   :type="args.type"
   :mode="args.mode"
@@ -456,7 +340,7 @@ export const Default = {
 
 <!-- HTML/CSS Snippet -->
 <!-- Avatar (by default) -->
-<div id="puik-avatar-id" class="puik-avatar puik-avatar--medium puik-avatar--initials puik-avatar--primary puik-avatar--neutral">
+<div id="puik-avatar-id" class="puik-avatar puik-avatar--medium puik-avatar--initials puik-avatar--primary">
   <div class="puik-avatar_initials puik-avatar_initials--medium">
     PS
   </div>
@@ -496,19 +380,19 @@ export const Types = {
 
 <!-- HTML/CSS Snippet -->
 <!-- type initials-->
-<div class="puik-avatar puik-avatar--medium puik-avatar--initials puik-avatar--primary puik-avatar--neutral">
+<div class="puik-avatar puik-avatar--medium puik-avatar--initials puik-avatar--primary">
   <div class="puik-avatar_initials puik-avatar_initials--medium">
     PS
   </div>
 </div>
 <!-- type icon-->
-<div class="puik-avatar puik-avatar--medium puik-avatar--icon puik-avatar--primary puik-avatar--neutral">
+<div class="puik-avatar puik-avatar--medium puik-avatar--icon puik-avatar--primary">
   <div class="puik-icon" style="font-size: 1.5rem; color: white;">
     home
   </div>
 </div>
 <!-- type photo-->
-<div class="puik-avatar puik-avatar--medium puik-avatar--photo puik-avatar--primary puik-avatar--neutral">
+<div class="puik-avatar puik-avatar--medium puik-avatar--photo puik-avatar--primary">
   <img src="https://picsum.photos/200" alt="puik-avatar-alt">
 </div>
         `,
@@ -536,7 +420,7 @@ export const Sizes = {
 
 <!-- HTML/CSS Snippet -->
 <!-- initials type -->
-<div class="puik-avatar puik-avatar--{$size} puik-avatar--initials puik-avatar--primary puik-avatar--neutral">
+<div class="puik-avatar puik-avatar--{$size} puik-avatar--initials puik-avatar--primary">
   <div class="puik-avatar_initials puik-avatar_initials--{$size}">
     PS
   </div>
@@ -549,13 +433,13 @@ NB: values of {$iconFontSize} to apply depending on the prop size:
   large = 2rem
   jumbo = 2.8rem
 -->
-<div class="puik-avatar puik-avatar--{$size} puik-avatar--icon puik-avatar--primary puik-avatar--neutral">
+<div class="puik-avatar puik-avatar--{$size} puik-avatar--icon puik-avatar--primary">
   <div class="puik-icon" style="font-size: {$iconFontSize}; color: white;">
     home
   </div>
 </div>
 <!-- photo type -->
-<div class="puik-avatar puik-avatar--{$size} puik-avatar--photo puik-avatar--primary puik-avatar--neutral">
+<div class="puik-avatar puik-avatar--{$size} puik-avatar--photo puik-avatar--primary">
   <img src="https://picsum.photos/200" alt="puik-avatar-alt">
 </div>
 `,
@@ -565,25 +449,21 @@ NB: values of {$iconFontSize} to apply depending on the prop size:
   },
 }
 
-export const ModesAndColors = {
-  render: ModesAndColorsTemplate,
+export const Modes = {
+  render: ModesTemplate,
   args: {},
   parameters: {
     docs: {
       source: {
         code: `
 <!-- VueJS Snippet -->
-<!-- $colors: ${avatarColorsSummary} -->
 <!-- $modes: ${avatarModesSummary} -->
 
-<puik-avatar
-  :mode="{$mode}"
-  :color="{$color}"
-/>
+<puik-avatar :mode="{$mode}"/>
 
 <!-- HTML/CSS Snippet -->
 <!-- initials type -->
-<div class="puik-avatar puik-avatar--medium puik-avatar--initials puik-avatar--{$mode} puik-avatar--{$color}">
+<div class="puik-avatar puik-avatar--medium puik-avatar--initials puik-avatar--{$mode}">
   <div class="puik-avatar_initials puik-avatar_initials--{$mode}">
     PS
   </div>
@@ -594,7 +474,7 @@ NB: values of {$iconColor} to apply depending on the prop mode:
   primary = white
   reverse = black
 -->
-<div class="puik-avatar puik-avatar--medium puik-avatar--icon puik-avatar--{$mode} puik-avatar--{$color}">
+<div class="puik-avatar puik-avatar--medium puik-avatar--icon puik-avatar--{$mode}">
   <div class="puik-icon" style="font-size: 1.5rem; color: {$iconColor};">
     home
   </div>
diff --git a/packages/components/avatar/test/avatar.spec.ts b/packages/components/avatar/test/avatar.spec.ts
index 39e8c0d3..449faa15 100644
--- a/packages/components/avatar/test/avatar.spec.ts
+++ b/packages/components/avatar/test/avatar.spec.ts
@@ -31,11 +31,6 @@ describe('Avatar tests', () => {
     expect(findAvatar().attributes().id).toBe('puik-avatar-id')
   })
 
-  it('should display a blue version of the avatar', () => {
-    factory({ color: 'blue' })
-    expect(findAvatar().classes()).toContain('puik-avatar--blue')
-  })
-
   it('should display the avatar in reverse mode', () => {
     factory({ mode: 'reverse' })
     expect(findAvatar().classes()).toContain('puik-avatar--reverse')
diff --git a/packages/theme/src/avatar.scss b/packages/theme/src/avatar.scss
index 22418829..2be87a78 100644
--- a/packages/theme/src/avatar.scss
+++ b/packages/theme/src/avatar.scss
@@ -1,7 +1,7 @@
 @use './common/typography.scss';
 
 .puik-avatar {
-  @apply flex justify-center items-center rounded-full overflow-hidden;
+  @apply flex justify-center items-center bg-primary-800 rounded-full overflow-hidden;
 }
 .puik-avatar--small {
   @apply w-6 h-6;
@@ -33,36 +33,9 @@
     object-fit: cover;
   }
 }
-.puik-avatar--neutral {
-  @apply bg-primary-800;
-}
-.puik-avatar--blue {
-  @apply bg-ocean-blue;
-}
-.puik-avatar--yellow {
-  @apply bg-amber;
-}
-.puik-avatar--green {
-  @apply bg-green;
-}
-.puik-avatar--purple {
-  @apply bg-purple;
-}
-.puik-avatar--reverse.puik-avatar--neutral {
+.puik-avatar--reverse.puik-avatar {
   @apply bg-white;
 }
-.puik-avatar--reverse.puik-avatar--blue {
-  @apply bg-ocean-blue-50;
-}
-.puik-avatar--reverse.puik-avatar--yellow {
-  @apply bg-amber-100;
-}
-.puik-avatar--reverse.puik-avatar--green {
-  @apply bg-green-50;
-}
-.puik-avatar--reverse.puik-avatar--purple {
-  @apply bg-purple-50;
-}
 .puik-avatar_initials {
   @apply font-bold;
   &--small {

From b38289d542d81ad509b9e28d27d2afad345bddf1 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Fri, 3 Nov 2023 12:03:22 +0100
Subject: [PATCH 07/16] feat: [avatar] - create enum alternatives for mode,
 size and type

---
 packages/components/avatar/src/avatar.ts  | 39 +++++++++++++++++++----
 packages/components/avatar/src/avatar.vue | 21 +++++++-----
 2 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/packages/components/avatar/src/avatar.ts b/packages/components/avatar/src/avatar.ts
index bd7a5fe6..81d51a7b 100644
--- a/packages/components/avatar/src/avatar.ts
+++ b/packages/components/avatar/src/avatar.ts
@@ -2,14 +2,32 @@ import { buildProps } from '@puik/utils'
 import type { ExtractPropTypes, PropType } from 'vue'
 import type Avatar from './avatar.vue'
 
+export enum PuikAvatarMode {
+  PRIMARY = 'primary',
+  REVERSE = 'reverse',
+}
+
 export const avatarModes = ['primary', 'reverse'] as const
-export type PuikAvatarMode = (typeof avatarModes)[number]
+export type PuikAvatarModeString = (typeof avatarModes)[number]
+
+export enum PuikAvatarSize {
+  SMALL = 'small',
+  MEDIUM = 'medium',
+  LARGE = 'large',
+  JUMBO = 'jumbo',
+}
 
 export const avatarSizes = ['small', 'medium', 'large', 'jumbo'] as const
-export type PuikAvatarSize = (typeof avatarSizes)[number]
+export type PuikAvatarSizeString = (typeof avatarSizes)[number]
+
+export enum PuikAvatarType {
+  PHOTO = 'photo',
+  ICON = 'icon',
+  INITIALS = 'initials',
+}
 
 export const avatarTypes = ['photo', 'icon', 'initials'] as const
-export type PuikAvatarType = (typeof avatarTypes)[number]
+export type PuikAvatarTypeString = (typeof avatarTypes)[number]
 
 export const avatarProps = buildProps({
   id: {
@@ -18,17 +36,26 @@ export const avatarProps = buildProps({
     default: undefined,
   },
   mode: {
-    type: String as PropType<PuikAvatarMode>,
+    type: [
+      String as PropType<PuikAvatarMode>,
+      String as PropType<PuikAvatarModeString>,
+    ],
     required: false,
     default: 'primary',
   },
   size: {
-    type: String as PropType<PuikAvatarSize>,
+    type: [
+      String as PropType<PuikAvatarSize>,
+      String as PropType<PuikAvatarSizeString>,
+    ],
     required: false,
     default: 'medium',
   },
   type: {
-    type: String as PropType<PuikAvatarType>,
+    type: [
+      String as PropType<PuikAvatarType>,
+      String as PropType<PuikAvatarTypeString>,
+    ],
     required: false,
     default: 'initials',
   },
diff --git a/packages/components/avatar/src/avatar.vue b/packages/components/avatar/src/avatar.vue
index d4e81c8a..63067931 100644
--- a/packages/components/avatar/src/avatar.vue
+++ b/packages/components/avatar/src/avatar.vue
@@ -3,12 +3,12 @@
     :id="id"
     :class="`puik-avatar puik-avatar--${size} puik-avatar--${type} puik-avatar--${mode}`"
   >
-    <img v-if="src && type == 'photo'" :src="src" :alt="alt" />
+    <img v-if="src && type == PuikAvatarType.PHOTO" :src="src" :alt="alt" />
     <puik-icon
-      v-else-if="icon && type == 'icon'"
+      v-else-if="icon && type == PuikAvatarType.ICON"
       :icon="icon"
       :font-size="iconFontSize"
-      :color="mode === 'primary' ? 'white' : 'black'"
+      :color="mode === PuikAvatarMode.PRIMARY ? 'white' : 'black'"
     />
     <div v-else :class="`puik-avatar_initials puik-avatar_initials--${size}`">
       {{ initials }}
@@ -19,7 +19,12 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import PuikIcon from '../../icon'
-import { avatarProps } from './avatar'
+import {
+  avatarProps,
+  PuikAvatarMode,
+  PuikAvatarType,
+  PuikAvatarSize,
+} from './avatar'
 
 defineOptions({
   name: 'PuikAvatar',
@@ -29,13 +34,13 @@ const props = defineProps(avatarProps)
 const iconFontSize = ref()
 const initials = ref('PS')
 
-props.size === 'small'
+props.size === PuikAvatarSize.SMALL
   ? (iconFontSize.value = '1rem')
-  : props.size === 'medium'
+  : props.size === PuikAvatarSize.MEDIUM
   ? (iconFontSize.value = '1.5rem')
-  : props.size === 'large'
+  : props.size === PuikAvatarSize.LARGE
   ? (iconFontSize.value = '2rem')
-  : props.size === 'jumbo'
+  : props.size === PuikAvatarSize.JUMBO
   ? (iconFontSize.value = '2.8rem')
   : '1rem'
 

From 4b6e3863911d16b8419b17562b6b186d0343d388 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Fri, 3 Nov 2023 14:44:47 +0100
Subject: [PATCH 08/16] feat: [avatar] - rerender puik-icon and initials when
 they update

---
 packages/components/avatar/src/avatar.vue | 49 +++++++++++++----------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/packages/components/avatar/src/avatar.vue b/packages/components/avatar/src/avatar.vue
index 63067931..d912ac4e 100644
--- a/packages/components/avatar/src/avatar.vue
+++ b/packages/components/avatar/src/avatar.vue
@@ -6,18 +6,23 @@
     <img v-if="src && type == PuikAvatarType.PHOTO" :src="src" :alt="alt" />
     <puik-icon
       v-else-if="icon && type == PuikAvatarType.ICON"
+      :key="iconFontSize"
       :icon="icon"
       :font-size="iconFontSize"
       :color="mode === PuikAvatarMode.PRIMARY ? 'white' : 'black'"
     />
-    <div v-else :class="`puik-avatar_initials puik-avatar_initials--${size}`">
+    <div
+      v-else
+      :key="initials"
+      :class="`puik-avatar_initials puik-avatar_initials--${size}`"
+    >
       {{ initials }}
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import PuikIcon from '../../icon'
 import {
   avatarProps,
@@ -34,24 +39,26 @@ const props = defineProps(avatarProps)
 const iconFontSize = ref()
 const initials = ref('PS')
 
-props.size === PuikAvatarSize.SMALL
-  ? (iconFontSize.value = '1rem')
-  : props.size === PuikAvatarSize.MEDIUM
-  ? (iconFontSize.value = '1.5rem')
-  : props.size === PuikAvatarSize.LARGE
-  ? (iconFontSize.value = '2rem')
-  : props.size === PuikAvatarSize.JUMBO
-  ? (iconFontSize.value = '2.8rem')
-  : '1rem'
+watch(() => {
+  props.size === PuikAvatarSize.SMALL
+    ? (iconFontSize.value = '1rem')
+    : props.size === PuikAvatarSize.MEDIUM
+    ? (iconFontSize.value = '1.5rem')
+    : props.size === PuikAvatarSize.LARGE
+    ? (iconFontSize.value = '2rem')
+    : props.size === PuikAvatarSize.JUMBO
+    ? (iconFontSize.value = '2.8rem')
+    : '1rem'
 
-props.firstname !== '' && props.lastname !== ''
-  ? (initials.value =
-      props.firstname[0]?.toUpperCase() + props.lastname[0]?.toUpperCase())
-  : props.firstname.length > 1 && !props.lastname
-  ? (initials.value =
-      props.firstname[0]?.toUpperCase() + props.firstname[1]?.toUpperCase())
-  : props.lastname.length > 1 && !props.firstname
-  ? (initials.value =
-      props.lastname[0]?.toUpperCase() + props.lastname[1]?.toUpperCase())
-  : (initials.value = 'PS')
+  props.firstname !== '' && props.lastname !== ''
+    ? (initials.value =
+        props.firstname[0]?.toUpperCase() + props.lastname[0]?.toUpperCase())
+    : props.firstname.length > 1 && !props.lastname
+    ? (initials.value =
+        props.firstname[0]?.toUpperCase() + props.firstname[1]?.toUpperCase())
+    : props.lastname.length > 1 && !props.firstname
+    ? (initials.value =
+        props.lastname[0]?.toUpperCase() + props.lastname[1]?.toUpperCase())
+    : (initials.value = 'PS')
+})
 </script>

From 86ac9fdab5bb9586d8f0c68bc61e886e17b36bfa Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Fri, 3 Nov 2023 17:21:47 +0100
Subject: [PATCH 09/16] feat: [avatar/icon] computed functions for a better
 reactive behavior

---
 packages/components/avatar/src/avatar.vue | 57 +++++++++++++----------
 packages/components/icon/src/icon.vue     | 11 +++--
 2 files changed, 38 insertions(+), 30 deletions(-)

diff --git a/packages/components/avatar/src/avatar.vue b/packages/components/avatar/src/avatar.vue
index d912ac4e..03f4fac9 100644
--- a/packages/components/avatar/src/avatar.vue
+++ b/packages/components/avatar/src/avatar.vue
@@ -6,10 +6,9 @@
     <img v-if="src && type == PuikAvatarType.PHOTO" :src="src" :alt="alt" />
     <puik-icon
       v-else-if="icon && type == PuikAvatarType.ICON"
-      :key="iconFontSize"
       :icon="icon"
       :font-size="iconFontSize"
-      :color="mode === PuikAvatarMode.PRIMARY ? 'white' : 'black'"
+      :color="colorMode"
     />
     <div
       v-else
@@ -22,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { computed } from 'vue'
 import PuikIcon from '../../icon'
 import {
   avatarProps,
@@ -36,29 +35,37 @@ defineOptions({
 })
 
 const props = defineProps(avatarProps)
-const iconFontSize = ref()
-const initials = ref('PS')
 
-watch(() => {
-  props.size === PuikAvatarSize.SMALL
-    ? (iconFontSize.value = '1rem')
-    : props.size === PuikAvatarSize.MEDIUM
-    ? (iconFontSize.value = '1.5rem')
-    : props.size === PuikAvatarSize.LARGE
-    ? (iconFontSize.value = '2rem')
-    : props.size === PuikAvatarSize.JUMBO
-    ? (iconFontSize.value = '2.8rem')
-    : '1rem'
+const iconFontSize = computed(() => {
+  if (props.size === PuikAvatarSize.SMALL) {
+    return '1rem'
+  } else if (props.size === PuikAvatarSize.MEDIUM) {
+    return '1.5rem'
+  } else if (props.size === PuikAvatarSize.LARGE) {
+    return '2rem'
+  } else if (props.size === PuikAvatarSize.JUMBO) {
+    return '2.8rem'
+  } else {
+    return '1rem'
+  }
+})
+
+const colorMode = computed(() => {
+  if (props.mode === PuikAvatarMode.PRIMARY) {
+    return 'white'
+  }
+  return 'black'
+})
 
-  props.firstname !== '' && props.lastname !== ''
-    ? (initials.value =
-        props.firstname[0]?.toUpperCase() + props.lastname[0]?.toUpperCase())
-    : props.firstname.length > 1 && !props.lastname
-    ? (initials.value =
-        props.firstname[0]?.toUpperCase() + props.firstname[1]?.toUpperCase())
-    : props.lastname.length > 1 && !props.firstname
-    ? (initials.value =
-        props.lastname[0]?.toUpperCase() + props.lastname[1]?.toUpperCase())
-    : (initials.value = 'PS')
+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'
+  }
 })
 </script>
diff --git a/packages/components/icon/src/icon.vue b/packages/components/icon/src/icon.vue
index 22cd7bc0..7f1c8daf 100644
--- a/packages/components/icon/src/icon.vue
+++ b/packages/components/icon/src/icon.vue
@@ -17,12 +17,13 @@ const fontSize = computed(() => {
   if (!Number.isNaN(Number(props.fontSize))) {
     return `${props.fontSize}px`
   }
-
   return props.fontSize
 })
 
-const style = {
-  fontSize: fontSize.value,
-  color: props.color,
-}
+const style = computed(() => {
+  return {
+    fontSize: fontSize.value,
+    color: props.color,
+  }
+})
 </script>

From ca0ec1d2b0ac39aaf28ab33120af757c787ab613 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Mon, 6 Nov 2023 11:33:38 +0100
Subject: [PATCH 10/16] feat: [avatar] - add singleInitial prop and prohibit
 special characters

---
 packages/components/avatar/src/avatar.ts      |  5 +++
 packages/components/avatar/src/avatar.vue     | 39 ++++++++++++++-----
 .../avatar/stories/avatar.stories.ts          |  9 +++++
 3 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/packages/components/avatar/src/avatar.ts b/packages/components/avatar/src/avatar.ts
index 81d51a7b..dd117664 100644
--- 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
index 03f4fac9..efb6c8f2 100644
--- 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
index fa6fcfd3..39a82e38 100644
--- 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
 

From dafcf297d9d490b98ed635427b0f82df8f18ad03 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Mon, 6 Nov 2023 12:02:12 +0100
Subject: [PATCH 11/16] docs: [avatar] - storybook update

---
 packages/components/avatar/stories/avatar.stories.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/components/avatar/stories/avatar.stories.ts b/packages/components/avatar/stories/avatar.stories.ts
index 39a82e38..f97a6d64 100644
--- a/packages/components/avatar/stories/avatar.stories.ts
+++ b/packages/components/avatar/stories/avatar.stories.ts
@@ -104,7 +104,7 @@ export default {
     },
     firstname: {
       description:
-        'If avatar type prop is set to "initials". The "initials" type is composed of two letters max (first letter of firstname prop corresponds to the first). NB: if the lastname prop is missing then the initials will be the first two letters of the firstname prop',
+        'If avatar type prop is set to "initials". The "initials" type is composed of two letters max (first letter of firstname prop corresponds to the first). NB: if the lastname prop is missing then the initials will be the first two letters of the firstname prop in the case where the singleInitial prop is false. Special characters are removed',
       control: 'text',
       table: {
         type: {
@@ -117,7 +117,7 @@ export default {
     },
     lastname: {
       description:
-        'If avatar type prop is set to "initials". The "initials" type is composed of two letters max (first letter of lastname corresponds to the last). NB : if the firstname prop is missing then the initials will be the first two letters of the lastname prop ',
+        'If avatar type prop is set to "initials". The "initials" type is composed of two letters max (first letter of lastname corresponds to the last). NB : if the firstname prop is missing then the initials will be the first two letters of the lastname prop in the case where the singleInitial prop is false. Special characters are removed.',
       control: 'text',
       table: {
         type: {
@@ -129,7 +129,8 @@ export default {
       },
     },
     singleInitial: {
-      description: 'initials match a single letter',
+      description:
+        'Initials match a single letter (first letter of firstname. If the firstname conditions are not met this is the first letter of lastname). NB: if the conditions for the firstname and lastname props are not met then the default value is "P" (singleInitial set to true) or "PS" (singleInitial set to false).',
       table: {
         defaultValue: {
           summary: false,

From 66d9c1e5620173b8f32c1f9c2502e988cac67ac9 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Mon, 6 Nov 2023 14:33:48 +0100
Subject: [PATCH 12/16] test: [avatar] - add dataTest prop

---
 packages/components/avatar/src/avatar.ts      |  5 +++
 packages/components/avatar/src/avatar.vue     |  9 ++++-
 .../avatar/stories/avatar.stories.ts          |  6 ++++
 .../components/avatar/test/avatar.spec.ts     | 33 +++++++++++++++++--
 4 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/packages/components/avatar/src/avatar.ts b/packages/components/avatar/src/avatar.ts
index dd117664..829987e3 100644
--- a/packages/components/avatar/src/avatar.ts
+++ b/packages/components/avatar/src/avatar.ts
@@ -89,6 +89,11 @@ export const avatarProps = buildProps({
     required: false,
     default: false,
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type AvatarProps = ExtractPropTypes<typeof avatarProps>
diff --git a/packages/components/avatar/src/avatar.vue b/packages/components/avatar/src/avatar.vue
index efb6c8f2..21b90f25 100644
--- a/packages/components/avatar/src/avatar.vue
+++ b/packages/components/avatar/src/avatar.vue
@@ -3,17 +3,24 @@
     :id="id"
     :class="`puik-avatar puik-avatar--${size} puik-avatar--${type} puik-avatar--${mode}`"
   >
-    <img v-if="src && type == PuikAvatarType.PHOTO" :src="src" :alt="alt" />
+    <img
+      v-if="src && type == PuikAvatarType.PHOTO"
+      :src="src"
+      :alt="alt"
+      :data-test="dataTest != undefined ? `image-${dataTest}` : undefined"
+    />
     <puik-icon
       v-else-if="icon && type == PuikAvatarType.ICON"
       :icon="icon"
       :font-size="iconFontSize"
       :color="colorMode"
+      :data-test="dataTest != undefined ? `icon-${dataTest}` : undefined"
     />
     <div
       v-else
       :key="initials"
       :class="`puik-avatar_initials puik-avatar_initials--${size}`"
+      :data-test="dataTest != undefined ? `initials-${dataTest}` : undefined"
     >
       {{ initials }}
     </div>
diff --git a/packages/components/avatar/stories/avatar.stories.ts b/packages/components/avatar/stories/avatar.stories.ts
index f97a6d64..ebfd562b 100644
--- a/packages/components/avatar/stories/avatar.stories.ts
+++ b/packages/components/avatar/stories/avatar.stories.ts
@@ -137,6 +137,11 @@ export default {
         },
       },
     },
+    dataTest: {
+      control: 'text',
+      description:
+        'Set the data-test attribute for the avatar `image-${dataTest}` `icon-${dataTest}` `initials-${dataTest}`',
+    },
   },
   args: {
     id: 'puik-avatar-id',
@@ -149,6 +154,7 @@ export default {
     firstname: 'Presta',
     lastname: 'Shop',
     singleInitial: false,
+    dataTest: undefined,
   },
 } as Meta
 
diff --git a/packages/components/avatar/test/avatar.spec.ts b/packages/components/avatar/test/avatar.spec.ts
index 449faa15..761bf94f 100644
--- a/packages/components/avatar/test/avatar.spec.ts
+++ b/packages/components/avatar/test/avatar.spec.ts
@@ -7,7 +7,7 @@ describe('Avatar tests', () => {
   let wrapper: VueWrapper<any>
   const findAvatar = () => wrapper.find('.puik-avatar')
   const findInitialsWrapper = () => wrapper.find('.puik-avatar_initials')
-  const findIconWrapper = () => wrapper.find('.puik-icon')
+  const findIcon = () => wrapper.find('.puik-icon')
   const findImg = () => wrapper.find('.puik-avatar img')
 
   const factory = (
@@ -48,7 +48,7 @@ describe('Avatar tests', () => {
 
   it('icon type avatar should display the icon material "home"', () => {
     factory({ type: 'icon', icon: 'home' })
-    expect(findIconWrapper().text()).toBe('home')
+    expect(findIcon().text()).toBe('home')
   })
 
   it('photo type avatar should display an image with src attribute set to "src-img" and an attribute alt set to "alt-img"', () => {
@@ -56,4 +56,33 @@ describe('Avatar tests', () => {
     expect(findImg().attributes().src).toBe('src-img')
     expect(findImg().attributes().alt).toBe('alt-img')
   })
+
+  it('should have data-test attribute on initials wrapper', () => {
+    factory({
+      type: 'initials',
+      dataTest: 'example',
+    })
+    expect(findInitialsWrapper().attributes('data-test')).toBe(
+      'initials-example'
+    )
+  })
+
+  it('should have data-test attribute on icon', () => {
+    factory({
+      type: 'icon',
+      icon: 'home',
+      dataTest: 'example',
+    })
+    expect(findIcon().attributes('data-test')).toBe('icon-example')
+  })
+
+  it('should have data-test attribute on image', () => {
+    factory({
+      type: 'photo',
+      src: 'src-example',
+      alt: 'alt-example',
+      dataTest: 'example',
+    })
+    expect(findImg().attributes('data-test')).toBe('image-example')
+  })
 })

From cd876759dfbfea855bca5ff0b7efed98a439b0ef Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Mon, 6 Nov 2023 14:56:01 +0100
Subject: [PATCH 13/16] feat: remove computed func for mode and fontsize
 (create const instead)

---
 packages/components/avatar/src/avatar.ts  | 13 +++++++---
 packages/components/avatar/src/avatar.vue | 29 ++++-------------------
 2 files changed, 14 insertions(+), 28 deletions(-)

diff --git a/packages/components/avatar/src/avatar.ts b/packages/components/avatar/src/avatar.ts
index 829987e3..595da22e 100644
--- a/packages/components/avatar/src/avatar.ts
+++ b/packages/components/avatar/src/avatar.ts
@@ -6,7 +6,10 @@ export enum PuikAvatarMode {
   PRIMARY = 'primary',
   REVERSE = 'reverse',
 }
-
+export const COLOR_MODE = {
+  primary: 'white',
+  reverse: 'black',
+}
 export const avatarModes = ['primary', 'reverse'] as const
 export type PuikAvatarModeString = (typeof avatarModes)[number]
 
@@ -16,7 +19,12 @@ export enum PuikAvatarSize {
   LARGE = 'large',
   JUMBO = 'jumbo',
 }
-
+export const ICONS_FONTSIZE = {
+  small: '1rem',
+  medium: '1.5rem',
+  large: '2rem',
+  jumbo: '2.8rem',
+}
 export const avatarSizes = ['small', 'medium', 'large', 'jumbo'] as const
 export type PuikAvatarSizeString = (typeof avatarSizes)[number]
 
@@ -25,7 +33,6 @@ export enum PuikAvatarType {
   ICON = 'icon',
   INITIALS = 'initials',
 }
-
 export const avatarTypes = ['photo', 'icon', 'initials'] as const
 export type PuikAvatarTypeString = (typeof avatarTypes)[number]
 
diff --git a/packages/components/avatar/src/avatar.vue b/packages/components/avatar/src/avatar.vue
index 21b90f25..2ac003f6 100644
--- a/packages/components/avatar/src/avatar.vue
+++ b/packages/components/avatar/src/avatar.vue
@@ -12,8 +12,8 @@
     <puik-icon
       v-else-if="icon && type == PuikAvatarType.ICON"
       :icon="icon"
-      :font-size="iconFontSize"
-      :color="colorMode"
+      :font-size="ICONS_FONTSIZE[props.size]"
+      :color="COLOR_MODE[props.mode]"
       :data-test="dataTest != undefined ? `icon-${dataTest}` : undefined"
     />
     <div
@@ -32,9 +32,9 @@ import { computed } from 'vue'
 import PuikIcon from '../../icon'
 import {
   avatarProps,
-  PuikAvatarMode,
   PuikAvatarType,
-  PuikAvatarSize,
+  ICONS_FONTSIZE,
+  COLOR_MODE,
 } from './avatar'
 
 defineOptions({
@@ -43,27 +43,6 @@ defineOptions({
 
 const props = defineProps(avatarProps)
 
-const iconFontSize = computed(() => {
-  if (props.size === PuikAvatarSize.SMALL) {
-    return '1rem'
-  } else if (props.size === PuikAvatarSize.MEDIUM) {
-    return '1.5rem'
-  } else if (props.size === PuikAvatarSize.LARGE) {
-    return '2rem'
-  } else if (props.size === PuikAvatarSize.JUMBO) {
-    return '2.8rem'
-  } else {
-    return '1rem'
-  }
-})
-
-const colorMode = computed(() => {
-  if (props.mode === PuikAvatarMode.PRIMARY) {
-    return 'white'
-  }
-  return 'black'
-})
-
 const initials = computed(() => {
   const firstInitial = props.firstname
     ? props.firstname

From dd887b749d607214f9ee241cb22df7903ef0ceb4 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Wed, 8 Nov 2023 13:13:15 +0100
Subject: [PATCH 14/16] feat: [avatar] - create getInitialLetter func

---
 packages/components/avatar/src/avatar.vue | 28 +++++++----------------
 packages/utils/getInitialLetter.ts        | 13 +++++++++++
 packages/utils/index.ts                   |  1 +
 3 files changed, 22 insertions(+), 20 deletions(-)
 create mode 100644 packages/utils/getInitialLetter.ts

diff --git a/packages/components/avatar/src/avatar.vue b/packages/components/avatar/src/avatar.vue
index 2ac003f6..eb98d413 100644
--- a/packages/components/avatar/src/avatar.vue
+++ b/packages/components/avatar/src/avatar.vue
@@ -29,6 +29,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { getInitialLetter } from '@puik/utils'
 import PuikIcon from '../../icon'
 import {
   avatarProps,
@@ -45,34 +46,21 @@ const props = defineProps(avatarProps)
 
 const initials = computed(() => {
   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()
+    ? getInitialLetter(props.firstname, 0)
     : ''
+
+  const lastInitial = props.lastname ? getInitialLetter(props.lastname, 0) : ''
+
   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()
+    ? firstInitial + getInitialLetter(props.firstname, 1)
     : lastInitial && props.lastname.length > 1
-    ? lastInitial +
-      props.lastname
-        .replace(/[^a-zA-Z0-9]/g, '')
-        .charAt(1)
-        .toUpperCase()
+    ? lastInitial + getInitialLetter(props.lastname, 1)
     : 'PS'
+
   return initialsValue
 })
 </script>
diff --git a/packages/utils/getInitialLetter.ts b/packages/utils/getInitialLetter.ts
new file mode 100644
index 00000000..3a8a5f29
--- /dev/null
+++ b/packages/utils/getInitialLetter.ts
@@ -0,0 +1,13 @@
+/**
+ * Retrieves a letter from a string.
+ *
+ * @param {string} str - The string to process (with removal of special characters + uppercase process).
+ * @param {number} index - The index of the letter to retrieve.
+ * @returns {string} The letter at the specified index.
+ */
+export const getInitialLetter = (str: string, index: number): string => {
+  return str
+    .replace(/[^a-zA-Z0-9]/g, '')
+    .charAt(index)
+    .toUpperCase()
+}
diff --git a/packages/utils/index.ts b/packages/utils/index.ts
index 20ea01d9..6a9c57dc 100644
--- a/packages/utils/index.ts
+++ b/packages/utils/index.ts
@@ -7,3 +7,4 @@ export * from './types'
 export * from './typescript'
 export * from './isEllipsisActive'
 export * from './clamp'
+export * from './getInitialLetter'

From de0e3466a81a3796e81fcbf34bcd950b790635ac Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Wed, 8 Nov 2023 14:01:43 +0100
Subject: [PATCH 15/16] feat: [avatar] - only enum type for mode, size and type
 props

---
 packages/components/avatar/src/avatar.ts      | 29 +++++--------------
 packages/components/avatar/src/avatar.vue     |  4 +--
 .../avatar/stories/avatar.stories.ts          |  5 +++-
 3 files changed, 13 insertions(+), 25 deletions(-)

diff --git a/packages/components/avatar/src/avatar.ts b/packages/components/avatar/src/avatar.ts
index 595da22e..454d9bf9 100644
--- a/packages/components/avatar/src/avatar.ts
+++ b/packages/components/avatar/src/avatar.ts
@@ -6,12 +6,10 @@ export enum PuikAvatarMode {
   PRIMARY = 'primary',
   REVERSE = 'reverse',
 }
-export const COLOR_MODE = {
+export const AVATAR_MODE = {
   primary: 'white',
   reverse: 'black',
 }
-export const avatarModes = ['primary', 'reverse'] as const
-export type PuikAvatarModeString = (typeof avatarModes)[number]
 
 export enum PuikAvatarSize {
   SMALL = 'small',
@@ -25,16 +23,12 @@ export const ICONS_FONTSIZE = {
   large: '2rem',
   jumbo: '2.8rem',
 }
-export const avatarSizes = ['small', 'medium', 'large', 'jumbo'] as const
-export type PuikAvatarSizeString = (typeof avatarSizes)[number]
 
 export enum PuikAvatarType {
   PHOTO = 'photo',
   ICON = 'icon',
   INITIALS = 'initials',
 }
-export const avatarTypes = ['photo', 'icon', 'initials'] as const
-export type PuikAvatarTypeString = (typeof avatarTypes)[number]
 
 export const avatarProps = buildProps({
   id: {
@@ -43,28 +37,19 @@ export const avatarProps = buildProps({
     default: undefined,
   },
   mode: {
-    type: [
-      String as PropType<PuikAvatarMode>,
-      String as PropType<PuikAvatarModeString>,
-    ],
+    type: String as PropType<PuikAvatarMode>,
     required: false,
-    default: 'primary',
+    default: PuikAvatarMode.PRIMARY,
   },
   size: {
-    type: [
-      String as PropType<PuikAvatarSize>,
-      String as PropType<PuikAvatarSizeString>,
-    ],
+    type: String as PropType<PuikAvatarSize>,
     required: false,
-    default: 'medium',
+    default: PuikAvatarSize.MEDIUM,
   },
   type: {
-    type: [
-      String as PropType<PuikAvatarType>,
-      String as PropType<PuikAvatarTypeString>,
-    ],
+    type: String as PropType<PuikAvatarType>,
     required: false,
-    default: 'initials',
+    default: PuikAvatarType.INITIALS,
   },
   icon: {
     type: String,
diff --git a/packages/components/avatar/src/avatar.vue b/packages/components/avatar/src/avatar.vue
index eb98d413..5cb22e5f 100644
--- a/packages/components/avatar/src/avatar.vue
+++ b/packages/components/avatar/src/avatar.vue
@@ -13,7 +13,7 @@
       v-else-if="icon && type == PuikAvatarType.ICON"
       :icon="icon"
       :font-size="ICONS_FONTSIZE[props.size]"
-      :color="COLOR_MODE[props.mode]"
+      :color="AVATAR_MODE[props.mode]"
       :data-test="dataTest != undefined ? `icon-${dataTest}` : undefined"
     />
     <div
@@ -35,7 +35,7 @@ import {
   avatarProps,
   PuikAvatarType,
   ICONS_FONTSIZE,
-  COLOR_MODE,
+  AVATAR_MODE,
 } from './avatar'
 
 defineOptions({
diff --git a/packages/components/avatar/stories/avatar.stories.ts b/packages/components/avatar/stories/avatar.stories.ts
index ebfd562b..07b4312c 100644
--- a/packages/components/avatar/stories/avatar.stories.ts
+++ b/packages/components/avatar/stories/avatar.stories.ts
@@ -1,9 +1,12 @@
 import { ref } from 'vue'
 import { PuikIcon } from '@puik/components'
-import { avatarModes, avatarSizes, avatarTypes } from '../src/avatar'
+import { PuikAvatarMode, PuikAvatarSize, PuikAvatarType } from '../src/avatar'
 import PuikAvatar from './../src/avatar.vue'
 import type { Meta, StoryFn, Args } from '@storybook/vue3'
 
+const avatarModes = Object.values(PuikAvatarMode)
+const avatarSizes = Object.values(PuikAvatarSize)
+const avatarTypes = Object.values(PuikAvatarType)
 const avatarModesSummary = avatarModes.join('|')
 const avatarSizesSummary = avatarSizes.join('|')
 const avatarTypesSummary = avatarTypes.join('|')

From 18d844e1380fb85213290819df686d358993dc5a Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Sun, 12 Nov 2023 18:37:44 +0100
Subject: [PATCH 16/16] feat: [avatar] - apply tailwind class object-cover for
 img type

---
 packages/theme/src/avatar.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/theme/src/avatar.scss b/packages/theme/src/avatar.scss
index 2be87a78..e84b2b7a 100644
--- a/packages/theme/src/avatar.scss
+++ b/packages/theme/src/avatar.scss
@@ -30,7 +30,7 @@
 .puik-avatar--photo {
   @apply border-none;
   img {
-    object-fit: cover;
+    @apply object-cover;
   }
 }
 .puik-avatar--reverse.puik-avatar {