feat(badge): update badge samples

live-editing/configs/BadgeConfigGenerator.ts

@@ -17,34 +17,53 @@ export class BadgeConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/data-display/badge/"
         }));
 
-        // badge sample 2
+        // badge overview
         configs.push(new Config({
-            component: 'BadgeSample2Component',
-            additionalFiles: ["src/app/data-display/badge/model/member.model.ts"],
+            component: 'BadgeOverviewComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-display/badge/"
         }));
 
-        // badge sample 3
+        // badge size
         configs.push(new Config({
-            component: 'BadgeSample3Component',
-            additionalFiles: ["src/app/data-display/badge/model/member.model.ts"],
+            component: 'BadgeSizeComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-display/badge/"
+        }));
+
+        // badge type
+        configs.push(new Config({
+            component: 'BadgeTypeComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-display/badge/"
+        }));
+
+        // badge shape
+        configs.push(new Config({
+            component: 'BadgeShapeComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-display/badge/"
+        }));
+
+        // badge variants
+        configs.push(new Config({
+            component: 'BadgeVariantsComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-display/badge/"
         }));
 
-        // badge styling sample
+        // badge styling
         configs.push(new Config({
-            component: 'BadgeStylingSampleComponent',
-            additionalFiles: ["src/app/data-display/badge/model/member.model.ts", "src/app/data-display/badge/badge-styling-sample/layout.scss"],
+            component: 'BadgeStylingComponent',
+            additionalFiles: ["src/app/data-display/badge/model/member.model.ts", "src/app/data-display/badge/badge-styling/layout.scss"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-display/badge/"
         }));
 
-        // badge dot sample
+        // badge dot
         configs.push(new Config({
-            component: 'BadgeDotSampleComponent',
-            additionalFiles: ["src/app/data-display/badge/model/member.model.ts", "src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.scss"],
+            component: 'BadgeDotComponent',
+            additionalFiles: ["src/app/data-display/badge/badge-dot/badge-dot.component.scss"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-display/badge/"
         }));

src/app/data-display/badge/badge-dot/badge-dot.component.html

@@ -0,0 +1,43 @@
+<div class="badge-dot">
+    <div class="dot-example icon-example">
+        <div class="icon-circle">
+            <igx-icon>notifications</igx-icon>
+        </div>
+        <igx-badge dot outlined type="error"></igx-badge>
+    </div>
+    <div class="dot-example notifications-card">
+        @for (item of notifications; track item.title) {
+            <div class="notification-row">
+                <span class="row-indicator">
+                    @if (item.unread) {
+                        <igx-badge dot type="info"></igx-badge>
+                    }
+                </span>
+                <span class="row-title">{{ item.title }}</span>
+                <span class="row-time" [class.unread]="item.unread">{{ item.time }}</span>
+                <igx-icon class="row-chevron">chevron_right</igx-icon>
+            </div>
+        }
+    </div>
+    <div class="dot-example avatar-example">
+        <igx-avatar src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png" shape="circle" size="small"></igx-avatar>
+        <igx-badge dot outlined type="error"></igx-badge>
+    </div>
+    <div class="dot-example nav-card">
+        @for (tab of tabs; track tab.label) {
+            <div class="nav-item" [class.active]="tab.active">
+                <span class="nav-icon">
+                    @if (tab.icon === 'facebookMessenger') {
+                        <igx-icon name="facebookMessenger"></igx-icon>
+                    } @else {
+                        <igx-icon [name]="tab.icon"></igx-icon>
+                    }
+                    @if (tab.hasUpdates) {
+                        <igx-badge dot type="info"></igx-badge>
+                    }
+                </span>
+                <span class="nav-label">{{ tab.label }}</span>
+            </div>
+        }
+    </div>
+</div>

src/app/data-display/badge/badge-dot/badge-dot.component.scss

@@ -0,0 +1,129 @@
+igx-badge {
+    --ig-size: var(--ig-size-small);
+}
+
+igx-avatar {
+    --size: 40px;
+}
+
+.icon-example igx-badge,
+.avatar-example igx-badge,
+.nav-icon igx-badge {
+    position: absolute;
+}
+
+.icon-example igx-badge {
+    inset-block-start: 0;
+    inset-inline-end: 2px;
+}
+
+.avatar-example igx-badge {
+	inset-block-start: -0.25rem;
+	inset-inline-end: -2px;
+}
+
+.nav-icon igx-badge {
+    inset-block-start: -2px;
+    inset-inline-end: -6px;
+}
+
+.badge-dot {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 40px;
+    min-height: 8.5rem;
+}
+
+.dot-example {
+    position: relative;
+}
+
+.icon-example,
+.avatar-example,
+.icon-circle {
+    display: flex;
+    align-items: center;
+    width: 36px;
+    height: 36px;
+}
+
+.icon-circle {
+    justify-content: center;
+    border-radius: 50%;
+    background: var(--ig-gray-200);
+    color: var(--ig-gray-800);
+}
+
+.notifications-card,
+.nav-card {
+    background: var(--ig-surface-500);
+    border-radius: 4px;
+    box-shadow: 0 1px 3px hsl(from var(--ig-gray-900) h s l / 0.12);
+}
+
+.notifications-card {
+    min-width: 272px;
+    padding: 8px 0;
+}
+
+.notification-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    font-size: 14px;
+    color: var(--ig-gray-900);
+}
+
+.row-indicator {
+    display: inline-flex;
+    justify-content: center;
+    width: 12px;
+}
+
+.row-title {
+    flex: 1;
+}
+
+.row-time {
+    font-size: 13px;
+    color: var(--ig-gray-900);
+}
+
+.row-time.unread {
+    color: #0057A9;
+    font-weight: 600;
+}
+
+.row-chevron {
+    --ig-size: 1rem;
+    color: var(--ig-gray-600);
+    font-size: 18px;
+}
+
+.nav-card {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+}
+
+.nav-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    min-width: 56px;
+    color: var(--ig-gray-700);
+    font-size: 12px;
+}
+
+.nav-item.active {
+    color: #0057A9;
+}
+
+.nav-icon {
+    position: relative;
+    display: inline-flex;
+}

src/app/data-display/badge/badge-dot/badge-dot.component.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import { IgxAvatarComponent } from 'igniteui-angular/avatar';
+import { IgxBadgeComponent } from 'igniteui-angular/badge';
+import { IgxIconComponent, IgxIconService} from 'igniteui-angular/icon';
+import { facebookMessenger } from '@igniteui/material-icons-extended';
+
+@Component({
+    selector: 'app-badge-dot',
+    styleUrls: ['./badge-dot.component.scss'],
+    templateUrl: './badge-dot.component.html',
+    imports: [IgxAvatarComponent, IgxBadgeComponent, IgxIconComponent]
+})
+export class BadgeDotComponent {
+    constructor(private iconService: IgxIconService) {
+        this.iconService.addSvgIconFromText('facebookMessenger', facebookMessenger.value);
+    }
+
+    public notifications = [
+        { title: 'Contract renewal', time: '09:12', unread: true },
+        { title: 'Weekly digest', time: 'Yesterday', unread: false }
+    ];
+
+    public tabs = [
+        { label: 'Home', icon: 'home', active: true, hasUpdates: false },
+        { label: 'Chat', icon: 'facebookMessenger', active: false, hasUpdates: true },
+        { label: 'Profile', icon: 'person', active: false, hasUpdates: false }
+    ];
+}

src/app/data-display/badge/badge-icon/badge-icon.component.html

@@ -1,4 +1,17 @@
-<div class="wrapper">
-    <igx-avatar icon="face" size="small" shape="rounded"></igx-avatar>
-    <igx-badge type="error" icon="heart-monitor" iconSet="imx-icons"></igx-badge>
-</div>
+<div class="badge-icon">
+    @for (item of badges; track item.label) {
+        <div class="badge-icon-item">
+            <div class="icon-wrapper">
+                <igx-badge [icon]="item.icon" [type]="item.type"></igx-badge>
+            </div>
+            <span>{{ item.label }}</span>
+        </div>
+    }
+    <div class="badge-icon-item">
+        <div class="icon-wrapper avatar-wrapper">
+            <igx-avatar initials="AZ" shape="circle" size="small"></igx-avatar>
+            <igx-badge icon="close" type="error" outlined ></igx-badge>
+        </div>
+        <span>on avatar</span>
+    </div>
+</div>

src/app/data-display/badge/badge-icon/badge-icon.component.scss

@@ -1,10 +1,58 @@
-.wrapper {
-  position: relative;
-  margin: 15px 0 0 15px;
+igx-avatar {
+    --size: 40px;
+    --ig-avatar-background: var(--ig-gray-700);
+    --ig-avatar-color: var(--ig-gray-50);
 }
 
-igx-badge {
-  position: absolute;
-  bottom: 0;
-  left: 28px;
+.icon-wrapper {
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+}
+
+.icon-wrapper > igx-badge {
+    --ig-size: var(--ig-size-medium);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+.avatar-wrapper igx-badge {
+    --ig-size: var(--ig-size-small);
+    position: absolute;
+    inset-block-start: -4px;
+    inset-inline-end: -6px;
+}
+
+.badge-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 40px;
+    min-height: 8.5rem;
+}
+
+.badge-icon-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+    min-width: 56px;
+}
+
+.badge-icon-item span {
+    color: var(--ig-gray-700);
+    font-size: 12px;
+    transform: translateY(4px);
+}
+
+.avatar-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
 }