From 4c3ebc42d86961a35959282c683668c633c32f20 Mon Sep 17 00:00:00 2001
From: Pipicz Petra <ppipicz24@gmail.com>
Date: Thu, 23 Jul 2026 15:54:31 +0200
Subject: [PATCH] feat(avatar): create examples to the avatar component

---
 .../avatar/avatar-examples.ts                 | 70 +++++++++++++++++++
 .../avatar-size-example.component.html        | 14 ++++
 .../avatar-size-example.component.ts          |  9 +++
 .../avatar-variants-example.component.html    |  7 ++
 .../avatar-variants-example.component.ts      |  9 +++
 .../avatar-with-icon-example.component.html   | 14 ++++
 .../avatar-with-icon-example.component.ts     | 13 ++++
 .../avatar-with-image-example.component.html  | 12 ++++
 .../avatar-with-image-example.component.ts    | 12 ++++
 ...vatar-with-initials-example.component.html |  6 ++
 .../avatar-with-initials-example.component.ts |  9 +++
 .../pages/avatar/avatar-demo.component.html   |  6 ++
 .../app/pages/avatar/avatar-demo.component.ts |  4 ++
 projects/demo/src/assets/i18n/en.json         | 22 ++++++
 projects/demo/src/assets/i18n/hu.json         | 18 +++++
 15 files changed, 225 insertions(+)
 create mode 100644 projects/demo/src/app/components-example/avatar/avatar-examples.ts
 create mode 100644 projects/demo/src/app/components-example/avatar/avatar-size-example/avatar-size-example.component.html
 create mode 100644 projects/demo/src/app/components-example/avatar/avatar-size-example/avatar-size-example.component.ts
 create mode 100644 projects/demo/src/app/components-example/avatar/avatar-variants-example/avatar-variants-example.component.html
 create mode 100644 projects/demo/src/app/components-example/avatar/avatar-variants-example/avatar-variants-example.component.ts
 create mode 100644 projects/demo/src/app/components-example/avatar/avatar-with-icon-example/avatar-with-icon-example.component.html
 create mode 100644 projects/demo/src/app/components-example/avatar/avatar-with-icon-example/avatar-with-icon-example.component.ts
 create mode 100644 projects/demo/src/app/components-example/avatar/avatar-with-image-example/avatar-with-image-example.component.html
 create mode 100644 projects/demo/src/app/components-example/avatar/avatar-with-image-example/avatar-with-image-example.component.ts
 create mode 100644 projects/demo/src/app/components-example/avatar/avatar-with-initials-example/avatar-with-initials-example.component.html
 create mode 100644 projects/demo/src/app/components-example/avatar/avatar-with-initials-example/avatar-with-initials-example.component.ts

diff --git a/projects/demo/src/app/components-example/avatar/avatar-examples.ts b/projects/demo/src/app/components-example/avatar/avatar-examples.ts
new file mode 100644
index 00000000..3937ae25
--- /dev/null
+++ b/projects/demo/src/app/components-example/avatar/avatar-examples.ts
@@ -0,0 +1,70 @@
+import { AvatarSizeExampleComponent } from './avatar-size-example/avatar-size-example.component';
+import { AvatarVariantsExampleComponent } from './avatar-variants-example/avatar-variants-example.component';
+import { AvatarWithIconExampleComponent } from './avatar-with-icon-example/avatar-with-icon-example.component';
+import { AvatarWithImageExampleComponent } from './avatar-with-image-example/avatar-with-image-example.component';
+import { AvatarWithInitialsExampleComponent } from './avatar-with-initials-example/avatar-with-initials-example.component';
+
+import { IdsExampleDef } from '../../shared/ids-example-viewer/ids-example.model';
+
+export const AVATAR_EXAMPLES: IdsExampleDef[] = [
+  {
+    id: 'avatar-sizes',
+    title: 'EXAMPLES.AVATAR.SIZES.TITLE',
+    description: 'EXAMPLES.AVATAR.SIZES.DESCRIPTION',
+    component: AvatarSizeExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/avatar/avatar-size-example/avatar-size-example.component.html',
+        TSpath: 'assets/examples/avatar/avatar-size-example/avatar-size-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'avatar-variants',
+    title: 'EXAMPLES.AVATAR.VARIANTS.TITLE',
+    description: 'EXAMPLES.AVATAR.VARIANTS.DESCRIPTION',
+    component: AvatarVariantsExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/avatar/avatar-variants-example/avatar-variants-example.component.html',
+        TSpath: 'assets/examples/avatar/avatar-variants-example/avatar-variants-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'avatar-with-initials',
+    title: 'EXAMPLES.AVATAR.INITIALS.TITLE',
+    description: 'EXAMPLES.AVATAR.INITIALS.DESCRIPTION',
+    component: AvatarWithInitialsExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/avatar/avatar-with-initials-example/avatar-with-initials-example.component.html',
+        TSpath: 'assets/examples/avatar/avatar-with-initials-example/avatar-with-initials-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'avatar-with-icon',
+    title: 'EXAMPLES.AVATAR.ICONS.TITLE',
+    description: 'EXAMPLES.AVATAR.ICONS.DESCRIPTION',
+    component: AvatarWithIconExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/avatar/avatar-with-icon-example/avatar-with-icon-example.component.html',
+        TSpath: 'assets/examples/avatar/avatar-with-icon-example/avatar-with-icon-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'avatar-with-image',
+    title: 'EXAMPLES.AVATAR.IMAGES.TITLE',
+    description: 'EXAMPLES.AVATAR.IMAGES.DESCRIPTION',
+    component: AvatarWithImageExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/avatar/avatar-with-image-example/avatar-with-image-example.component.html',
+        TSpath: 'assets/examples/avatar/avatar-with-image-example/avatar-with-image-example.component.ts',
+      },
+    ],
+  },
+];
diff --git a/projects/demo/src/app/components-example/avatar/avatar-size-example/avatar-size-example.component.html b/projects/demo/src/app/components-example/avatar/avatar-size-example/avatar-size-example.component.html
new file mode 100644
index 00000000..68ea8108
--- /dev/null
+++ b/projects/demo/src/app/components-example/avatar/avatar-size-example/avatar-size-example.component.html
@@ -0,0 +1,14 @@
+<div class="flex flex-col gap-ids-container-gap-4">
+  <div class="flex gap-ids-container-gap-4 items-center">
+    <ids-avatar sizeCollection="small" size="dense" initials="DS" />
+    <ids-avatar sizeCollection="small" size="compact" initials="CT" />
+    <ids-avatar sizeCollection="small" size="comfortable" initials="CF" />
+    <ids-avatar sizeCollection="small" size="spacious" initials="SP" />
+  </div>
+  <div class="flex gap-ids-container-gap-4 items-center">
+    <ids-avatar sizeCollection="big" size="dense" initials="DS" />
+    <ids-avatar sizeCollection="big" size="compact" initials="CT" />
+    <ids-avatar sizeCollection="big" size="comfortable" initials="CF" />
+    <ids-avatar sizeCollection="big" size="spacious" initials="SP" />
+  </div>
+</div>
diff --git a/projects/demo/src/app/components-example/avatar/avatar-size-example/avatar-size-example.component.ts b/projects/demo/src/app/components-example/avatar/avatar-size-example/avatar-size-example.component.ts
new file mode 100644
index 00000000..138bbccd
--- /dev/null
+++ b/projects/demo/src/app/components-example/avatar/avatar-size-example/avatar-size-example.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { IdsAvatarComponent } from '@i-cell/ids-angular/avatar';
+
+@Component({
+  selector: 'app-avatar-size-example',
+  imports: [IdsAvatarComponent],
+  templateUrl: './avatar-size-example.component.html',
+})
+export class AvatarSizeExampleComponent {}
diff --git a/projects/demo/src/app/components-example/avatar/avatar-variants-example/avatar-variants-example.component.html b/projects/demo/src/app/components-example/avatar/avatar-variants-example/avatar-variants-example.component.html
new file mode 100644
index 00000000..a9f0a795
--- /dev/null
+++ b/projects/demo/src/app/components-example/avatar/avatar-variants-example/avatar-variants-example.component.html
@@ -0,0 +1,7 @@
+<div class="flex gap-ids-container-gap-4 items-center">
+  <ids-avatar variant="primary" size="comfortable" initials="PR" />
+  <ids-avatar variant="secondary" size="comfortable" initials="SC" />
+  <ids-avatar variant="dark" size="comfortable" initials="DK" />
+  <ids-avatar variant="surface" size="comfortable" initials="SF" />
+  <ids-avatar variant="light" size="comfortable" initials="LT" />
+</div>
diff --git a/projects/demo/src/app/components-example/avatar/avatar-variants-example/avatar-variants-example.component.ts b/projects/demo/src/app/components-example/avatar/avatar-variants-example/avatar-variants-example.component.ts
new file mode 100644
index 00000000..7d0625d4
--- /dev/null
+++ b/projects/demo/src/app/components-example/avatar/avatar-variants-example/avatar-variants-example.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { IdsAvatarComponent } from '@i-cell/ids-angular/avatar';
+
+@Component({
+  selector: 'app-avatar-variants-example',
+  imports: [IdsAvatarComponent],
+  templateUrl: './avatar-variants-example.component.html',
+})
+export class AvatarVariantsExampleComponent {}
diff --git a/projects/demo/src/app/components-example/avatar/avatar-with-icon-example/avatar-with-icon-example.component.html b/projects/demo/src/app/components-example/avatar/avatar-with-icon-example/avatar-with-icon-example.component.html
new file mode 100644
index 00000000..87b53332
--- /dev/null
+++ b/projects/demo/src/app/components-example/avatar/avatar-with-icon-example/avatar-with-icon-example.component.html
@@ -0,0 +1,14 @@
+<div class="flex gap-ids-container-gap-4 items-center">
+  <ids-avatar size="comfortable" variant="primary">
+    <ids-icon fontIcon="account" />
+  </ids-avatar>
+  <ids-avatar size="comfortable" variant="secondary">
+    <ids-icon fontIcon="settings" />
+  </ids-avatar>
+  <ids-avatar size="comfortable" variant="dark">
+    <ids-icon fontIcon="favorite" />
+  </ids-avatar>
+  <ids-avatar size="comfortable" variant="surface">
+    <ids-icon fontIcon="notifications" />
+  </ids-avatar>
+</div>
diff --git a/projects/demo/src/app/components-example/avatar/avatar-with-icon-example/avatar-with-icon-example.component.ts b/projects/demo/src/app/components-example/avatar/avatar-with-icon-example/avatar-with-icon-example.component.ts
new file mode 100644
index 00000000..eb08f44f
--- /dev/null
+++ b/projects/demo/src/app/components-example/avatar/avatar-with-icon-example/avatar-with-icon-example.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { IdsAvatarComponent } from '@i-cell/ids-angular/avatar';
+import { IdsIconComponent } from '@i-cell/ids-angular/icon';
+
+@Component({
+  selector: 'app-avatar-with-icon-example',
+  imports: [
+    IdsAvatarComponent,
+    IdsIconComponent,
+  ],
+  templateUrl: './avatar-with-icon-example.component.html',
+})
+export class AvatarWithIconExampleComponent {}
diff --git a/projects/demo/src/app/components-example/avatar/avatar-with-image-example/avatar-with-image-example.component.html b/projects/demo/src/app/components-example/avatar/avatar-with-image-example/avatar-with-image-example.component.html
new file mode 100644
index 00000000..a44335d4
--- /dev/null
+++ b/projects/demo/src/app/components-example/avatar/avatar-with-image-example/avatar-with-image-example.component.html
@@ -0,0 +1,12 @@
+<div class="flex gap-ids-container-gap-4 items-center">
+  <ids-avatar size="comfortable">
+    <img idsAvatarImage src="https://sm.ign.com/t/ign_nordic/cover/a/avatar-gen/avatar-generations_prsz.300.jpg" alt="User avatar" />
+  </ids-avatar>
+  <ids-avatar size="comfortable">
+    <img
+      idsAvatarImage
+      src="https://hips.hearstapps.com/harpersbazaaruk.cdnds.net/16/38/1600x1600/square-1474624165-scarlett-johansson.jpg"
+      alt="Scarlett Johansson"
+    />
+  </ids-avatar>
+</div>
diff --git a/projects/demo/src/app/components-example/avatar/avatar-with-image-example/avatar-with-image-example.component.ts b/projects/demo/src/app/components-example/avatar/avatar-with-image-example/avatar-with-image-example.component.ts
new file mode 100644
index 00000000..9bf0e475
--- /dev/null
+++ b/projects/demo/src/app/components-example/avatar/avatar-with-image-example/avatar-with-image-example.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { IdsAvatarComponent, IdsAvatarImageDirective } from '@i-cell/ids-angular/avatar';
+
+@Component({
+  selector: 'app-avatar-with-image-example',
+  imports: [
+    IdsAvatarComponent,
+    IdsAvatarImageDirective,
+  ],
+  templateUrl: './avatar-with-image-example.component.html',
+})
+export class AvatarWithImageExampleComponent {}
diff --git a/projects/demo/src/app/components-example/avatar/avatar-with-initials-example/avatar-with-initials-example.component.html b/projects/demo/src/app/components-example/avatar/avatar-with-initials-example/avatar-with-initials-example.component.html
new file mode 100644
index 00000000..4d0fc0b7
--- /dev/null
+++ b/projects/demo/src/app/components-example/avatar/avatar-with-initials-example/avatar-with-initials-example.component.html
@@ -0,0 +1,6 @@
+<div class="flex gap-ids-container-gap-4 items-center">
+  <ids-avatar size="comfortable" variant="primary" initials="AB" />
+  <ids-avatar size="comfortable" variant="secondary" initials="CD" />
+  <ids-avatar size="comfortable" variant="dark" initials="EF" />
+  <ids-avatar size="comfortable" variant="surface" initials="GH" />
+</div>
diff --git a/projects/demo/src/app/components-example/avatar/avatar-with-initials-example/avatar-with-initials-example.component.ts b/projects/demo/src/app/components-example/avatar/avatar-with-initials-example/avatar-with-initials-example.component.ts
new file mode 100644
index 00000000..8f77de3b
--- /dev/null
+++ b/projects/demo/src/app/components-example/avatar/avatar-with-initials-example/avatar-with-initials-example.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { IdsAvatarComponent } from '@i-cell/ids-angular/avatar';
+
+@Component({
+  selector: 'app-avatar-with-initials-example',
+  imports: [IdsAvatarComponent],
+  templateUrl: './avatar-with-initials-example.component.html',
+})
+export class AvatarWithInitialsExampleComponent {}
diff --git a/projects/demo/src/app/pages/avatar/avatar-demo.component.html b/projects/demo/src/app/pages/avatar/avatar-demo.component.html
index 43f48e9e..604df714 100644
--- a/projects/demo/src/app/pages/avatar/avatar-demo.component.html
+++ b/projects/demo/src/app/pages/avatar/avatar-demo.component.html
@@ -54,3 +54,9 @@ <h2>With image</h2>
     </app-tryout-controls>
   </div>
 </app-demo-and-code>
+
+<div examples class="flex flex-col gap-6 w-full pt-6">
+  @for (example of avatarExamples; track example.id) {
+    <ids-example-viewer [example]="example" />
+  }
+</div>
diff --git a/projects/demo/src/app/pages/avatar/avatar-demo.component.ts b/projects/demo/src/app/pages/avatar/avatar-demo.component.ts
index 8d055595..7075b35c 100644
--- a/projects/demo/src/app/pages/avatar/avatar-demo.component.ts
+++ b/projects/demo/src/app/pages/avatar/avatar-demo.component.ts
@@ -4,6 +4,8 @@ import { ControlTableComponent } from '../../components/control-table/control-ta
 import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component';
 import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component';
 import { TryoutComponent } from '../../components/tryout/tryout.component';
+import { AVATAR_EXAMPLES } from '../../components-example/avatar/avatar-examples';
+import { IdsExampleViewerComponent } from '../../shared/ids-example-viewer/ids-example-viewer.component';
 
 import { Component, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
@@ -23,6 +25,7 @@ import { TranslateModule } from '@ngx-translate/core';
     DemoAndCodeComponent,
     TryoutControlComponent,
     ControlTableComponent,
+    IdsExampleViewerComponent,
   ],
   templateUrl: './avatar-demo.component.html',
   styleUrls: [
@@ -32,4 +35,5 @@ import { TranslateModule } from '@ngx-translate/core';
 })
 export class AvatarDemoComponent {
   protected _avatarDemoService = inject(AvatarDemoService);
+  public avatarExamples = AVATAR_EXAMPLES;
 }
diff --git a/projects/demo/src/assets/i18n/en.json b/projects/demo/src/assets/i18n/en.json
index c8f01d5e..5a1ee676 100644
--- a/projects/demo/src/assets/i18n/en.json
+++ b/projects/demo/src/assets/i18n/en.json
@@ -154,6 +154,28 @@
     }
   },
   "EXAMPLES": {
+    "AVATAR": {
+      "SIZES": {
+        "TITLE": "Avatar sizes",
+        "DESCRIPTION": "Avatars with different sizes: dense, compact, comfortable and spacious, available in both small and big size collections."
+      },
+      "VARIANTS": {
+        "TITLE": "Avatar variants",
+        "DESCRIPTION": "Avatars with different color variants: primary, secondary, dark, surface, and light."
+      },
+      "INITIALS": {
+        "TITLE": "Avatar with initials",
+        "DESCRIPTION": "Avatars can display a user's initials using the initials input."
+      },
+      "ICONS": {
+        "TITLE": "Avatar with icon",
+        "DESCRIPTION": "Avatars can display an icon by projecting an ids-icon element inside the avatar."
+      },
+      "IMAGES": {
+        "TITLE": "Avatar with images",
+        "DESCRIPTION": "Avatars can display a user profile image by projecting an img element with the idsAvatarImage directive."
+      }
+    },
     "BUTTON": {
       "APPEARANCES": {
         "TITLE": "Button appearances",
diff --git a/projects/demo/src/assets/i18n/hu.json b/projects/demo/src/assets/i18n/hu.json
index cdca4f44..a966cf79 100644
--- a/projects/demo/src/assets/i18n/hu.json
+++ b/projects/demo/src/assets/i18n/hu.json
@@ -154,6 +154,24 @@
     }
   },
   "EXAMPLES": {
+    "AVATAR": {
+      "SIZES": {
+        "TITLE": "Avatar méretek",
+        "DESCRIPTION": "Az avatar komponens különböző méretei: dense, compact, comfortable és spacious, elérhető mind a small, mind a big méretkészletekben."
+      },
+      "VARIANTS": {
+        "TITLE": "Avatar változatai",
+        "DESCRIPTION": "Az avatar komponens különböző változatai: primary, secondary, dark, surface, és light."
+      },
+      "INITIALS": {
+        "TITLE": "Avatar monogrammal",
+        "DESCRIPTION": "Az avatar komponens megjelenítheti a felhasználó monogramját vagy egyéb szöveges tartalmat."
+      },
+      "IMAGES": {
+        "TITLE": "Avatar képpel",
+        "DESCRIPTION": "Az avatar komponens megjelenítheti a felhasználó profilképét."
+      }
+    },
     "BUTTON": {
       "APPEARANCES": {
         "TITLE": "Button megjelenései",