feat(badge): update badge samples

live-editing/configs/BadgeConfigGenerator.ts

@@ -17,34 +17,48 @@ export class BadgeConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/data-display/badge/"
         }));
 
-        // badge sample 2
+        // badge overview
         configs.push(new Config({
-            component: 'BadgeSample2Component',
+            component: 'BadgeOverviewComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-display/badge/"
+        }));
+
+        // badge shape
+        configs.push(new Config({
+            component: 'BadgeShapeComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-display/badge/"
+        }));
+
+        // badge overview
+        configs.push(new Config({
+            component: 'BadgeVariantsComponent',
             additionalFiles: ["src/app/data-display/badge/model/member.model.ts"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-display/badge/"
         }));
 
-        // badge sample 3
+        // badge list
         configs.push(new Config({
-            component: 'BadgeSample3Component',
+            component: 'BadgeListComponent',
             additionalFiles: ["src/app/data-display/badge/model/member.model.ts"],
             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/model/member.model.ts", "src/app/data-display/badge/badge-dot/badge-dot.component.scss"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-display/badge/"
         }));

src/app/data-display/badge/badge-sample-2/badge-sample-2.component.ts → src/app/data-display/badge/badge-dot/badge-dot.component.ts

@@ -3,10 +3,10 @@ import { IgxAvatarComponent } from 'igniteui-angular/avatar';
 import { IgxBadgeComponent } from 'igniteui-angular/badge';
 
 @Component({
-    selector: 'app-badge-sample-2',
-    styleUrls: ['./badge-sample-2.component.scss'],
-    templateUrl: './badge-sample-2.component.html',
+    selector: 'app-badge-dot',
+    styleUrls: ['./badge-dot.component.scss'],
+    templateUrl: './badge-dot.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IgxAvatarComponent, IgxBadgeComponent]
 })
-export class BadgeSample2Component { }
+export class BadgeDotComponent { }

src/app/data-display/badge/badge-sample-3/badge-sample-3.component.ts → src/app/data-display/badge/badge-list/badge-list.component.ts

@@ -6,13 +6,13 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge';
 
 
 @Component({
-    selector: 'app-badge-sample-3',
-    styleUrls: ['./badge-sample-3.component.scss'],
-    templateUrl: './badge-sample-3.component.html',
+    selector: 'app-badge-list',
+    styleUrls: ['./badge-list.component.scss'],
+    templateUrl: './badge-list.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent]
 })
-export class BadgeSample3Component {
+export class BadgeListComponent {
   public members: Member[] = [
     new Member('Terrance Orta', 'online'),
     new Member('Donna Price', 'online'),

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

@@ -0,0 +1,4 @@
+<div class="wrapper">
+  <igx-avatar initials="JD"></igx-avatar>
+  <igx-badge outlined></igx-badge>
+</div>

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

@@ -0,0 +1,18 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem;
+}
+
+igx-badge {
+  --size: 18px;
+
+  position: relative;
+  right: 10px;
+  top: -15px;
+}
+
+igx-avatar {
+  --size: 45px;
+  margin-top: 6px;
+}

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

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { IgxAvatarComponent } from 'igniteui-angular/avatar';
+import { IgxBadgeComponent } from 'igniteui-angular/badge';
+
+@Component({
+    selector: 'app-badge-overview',
+    templateUrl: './badge-overview.component.html',
+    styleUrls: ['./badge-overview.component.scss'],
+    changeDetection: ChangeDetectionStrategy.Eager,
+    imports: [IgxAvatarComponent, IgxBadgeComponent]
+})
+export class BadgeOverviewComponent { }

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

@@ -0,0 +1,3 @@
+<div class="wrapper">
+  <igx-badge shape="square"></igx-badge>
+</div>

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

@@ -0,0 +1,3 @@
+.wrapper {
+  padding: 16px;
+}

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

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { IgxBadgeComponent } from 'igniteui-angular/badge';
+
+@Component({
+    selector: 'app-badge-shape',
+    templateUrl: './badge-shape.component.html',
+    styleUrls: ['./badge-shape.component.scss'],
+    changeDetection: ChangeDetectionStrategy.Eager,
+    imports: [IgxBadgeComponent]
+})
+export class BadgeShapeComponent { }

src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.ts → src/app/data-display/badge/badge-styling/badge-styling.component.ts

@@ -6,13 +6,13 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge';
 
 
 @Component({
-    selector: 'app-badge-styling-sample',
-    styleUrls: ['./badge-styling-sample.component.scss'],
-    templateUrl: './badge-styling-sample.component.html',
+    selector: 'app-badge-styling',
+    styleUrls: ['./badge-styling.component.scss'],
+    templateUrl: './badge-styling.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent]
 })
-export class BadgeStylingSampleComponent {
+export class BadgeStylingComponent {
   public members: Member[] = [
     new Member('Terrance Orta', 'online'),
     new Member('Donna Price', 'online'),

src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.ts → src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.ts

@@ -6,13 +6,13 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge';
 
 
 @Component({
-    selector: 'app-badge-tailwind-styling-sample',
-    styleUrls: ['./badge-tailwind-styling-sample.component.scss'],
-    templateUrl: './badge-tailwind-styling-sample.component.html',
+    selector: 'app-badge-tailwind-styling',
+    styleUrls: ['./badge-tailwind-styling.component.scss'],
+    templateUrl: './badge-tailwind-styling.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent]
 })
-export class BadgeTailwindStylingSampleComponent {
+export class BadgeTailwindStylingComponent {
   public members: Member[] = [
     new Member('Terrance Orta', 'online'),
     new Member('Donna Price', 'online'),

src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.ts → src/app/data-display/badge/badge-variants/badge-variants.component.ts

@@ -3,10 +3,10 @@ import { IgxAvatarComponent } from 'igniteui-angular/avatar';
 import { IgxBadgeComponent } from 'igniteui-angular/badge';
 
 @Component({
-    selector: 'app-badge-dot-sample',
-    styleUrls: ['./badge-dot-sample.component.scss'],
-    templateUrl: './badge-dot-sample.component.html',
+    selector: 'app-badge-variants',
+    styleUrls: ['./badge-variants.component.scss'],
+    templateUrl: './badge-variants.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IgxAvatarComponent, IgxBadgeComponent]
 })
-export class BadgeDotSampleComponent { }
+export class BadgeVariantsComponent { }

src/app/data-display/data-display-routes-data.ts

@@ -2,12 +2,14 @@
 
 export const dataDisplayRoutesData = {
     "badge-icon": { displayName: "Badge Icon Sample", parentName: "Badge" },
-    "badge-sample-2": { displayName: "Simple Badge", parentName: "Badge" },
-    "badge-sample-3": { displayName: "Badge for List Items", parentName: "Badge" },
-    "badge-outlined-sample": { displayName: "Badge Outlined Sample", parentName: "Badge" },
-    "badge-dot-sample": { displayName: "Badge Dot Sample", parentName: "Badge" },
-    "badge-styling-sample": { displayName: "Badge Styling Sample", parentName: "Badge" },
-    "badge-tailwind-styling-sample": { displayName: "Badge Tailwind Styling Sample", parentName: "Badge" },
+    "badge-overview": { displayName: "Overview", parentName: "Badge" },
+    "badge-shape": { displayName: "Badge Shape", parentName: "Badge" },
+    "badge-variants": { displayName: "Badge Variants", parentName: "Badge" },
+    "badge-list": { displayName: "Badge for List Items", parentName: "Badge" },
+    "badge-outlined": { displayName: "Badge Outlined", parentName: "Badge" },
+    "badge-dot": { displayName: "Badge Dot", parentName: "Badge" },
+    "badge-styling": { displayName: "Badge Styling", parentName: "Badge" },
+    "badge-tailwind-styling": { displayName: "Badge Tailwind Styling", parentName: "Badge" },
     "chip-simple": { displayName: "Chip Simple", parentName: "Chip" },
     "chip-variants": { displayName: "Chip Variants", parentName: "Chip" },
     "chip-area-sample": { displayName: "Chip Area Sample", parentName: "Chip" },

src/app/data-display/data-display.routes.ts

@@ -1,10 +1,12 @@
 import { BadgeIconComponent } from './badge/badge-icon/badge-icon.component';
-import { BadgeSample2Component } from './badge/badge-sample-2/badge-sample-2.component';
-import { BadgeSample3Component } from './badge/badge-sample-3/badge-sample-3.component';
+import { BadgeOverviewComponent } from './badge/badge-overview/badge-overview.component';
+import { BadgeShapeComponent } from './badge/badge-shape/badge-shape.component';
+import { BadgeVariantsComponent } from './badge/badge-variants/badge-variants.component';
+import { BadgeListComponent } from './badge/badge-list/badge-list.component';
 import { BadgeOutlinedComponent } from './badge/badge-outlined/badge-outlined.component';
-import { BadgeDotSampleComponent } from './badge/badge-dot-sample/badge-dot-sample.component';
-import { BadgeStylingSampleComponent } from './badge/badge-styling-sample/badge-styling-sample.component';
-import { BadgeTailwindStylingSampleComponent } from './badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component';
+import { BadgeDotComponent } from './badge/badge-dot/badge-dot.component';
+import { BadgeStylingComponent } from './badge/badge-styling/badge-styling.component';
+import { BadgeTailwindStylingComponent } from './badge/badge-tailwind-styling/badge-tailwind-styling.component';
 import { ChipAreaSampleComponent } from './chip/chip-area-sample/chip-area-sample.component';
 import { ChipSimpleComponent } from './chip/chip-simple/chip-simple.component';
 import { ChipVariantsComponent } from './chip/chip-variants/chip-variants.component';
@@ -55,34 +57,44 @@ export const DataDisplayRoutes: Routes = [
         path: 'badge-icon'
     },
     {
-        component: BadgeSample2Component,
-        data: dataDisplayRoutesData['badge-sample-2'],
-        path: 'badge-sample-2'
+        component: BadgeOverviewComponent,
+        data: dataDisplayRoutesData['badge-overview'],
+        path: 'badge-overview'
     },
     {
-        component: BadgeSample3Component,
-        data: dataDisplayRoutesData['badge-sample-3'],
-        path: 'badge-sample-3'
+        component: BadgeShapeComponent,
+        data: dataDisplayRoutesData['badge-shape'],
+        path: 'badge-shape'
+    },
+    {
+        component: BadgeVariantsComponent,
+        data: dataDisplayRoutesData['badge-variants'],
+        path: 'badge-variants'
+    },
+    {
+        component: BadgeListComponent,
+        data: dataDisplayRoutesData['badge-list'],
+        path: 'badge-list'
     },
     {
         component: BadgeOutlinedComponent,
-        data: dataDisplayRoutesData['badge-outlined-sample'],
-        path: 'badge-outlined-sample'
+        data: dataDisplayRoutesData['badge-outlined'],
+        path: 'badge-outlined'
     },
     {
-        component: BadgeDotSampleComponent,
-        data: dataDisplayRoutesData['badge-dot-sample'],
-        path: 'badge-dot-sample'
+        component: BadgeDotComponent,
+        data: dataDisplayRoutesData['badge-dot'],
+        path: 'badge-dot'
     },
     {
-        component: BadgeStylingSampleComponent,
-        data: dataDisplayRoutesData['badge-styling-sample'],
-        path: 'badge-styling-sample'
+        component: BadgeStylingComponent,
+        data: dataDisplayRoutesData['badge-styling'],
+        path: 'badge-styling'
     },
     {
-        component: BadgeTailwindStylingSampleComponent,
-        data: dataDisplayRoutesData['badge-tailwind-styling-sample'],
-        path: 'badge-tailwind-styling-sample'
+        component: BadgeTailwindStylingComponent,
+        data: dataDisplayRoutesData['badge-tailwind-styling'],
+        path: 'badge-tailwind-styling'
     },
     {
         component: ChipAreaSampleComponent,