Enhance badge sample with comprehensive examples of new features

Co-authored-by: kdinev <[email protected]>

Author: Copilot

src/app/badge/badge.sample.html

@@ -1,23 +1,97 @@
 <div class="wrapper">
     <div class="badges">
-        <h3 class="sample-title">Angular Badge</h3>
-        <igx-badge
-            [type]="properties.variant"
-            value="8"
-            [shape]="properties.shape"
-            [size]="properties.size"
-            [outlined]="properties.outlined"
-        ></igx-badge>
-        <div class="avatar-sample">
-            <igx-avatar icon="face" shape="rounded"></igx-avatar>
-            <igx-badge
-                [type]="properties.variant"
-                [shape]="properties.shape"
-                [size]="properties.size"
-                [outlined]="properties.outlined"
-            >
-                <igx-icon>bluetooth</igx-icon>
-            </igx-badge>
+        <h3 class="sample-title">Angular Badge - Interactive</h3>
+        <div class="badge-examples">
+            <div class="badge-item">
+                <igx-badge
+                    [type]="properties.variant"
+                    value="8"
+                    [shape]="properties.shape"
+                    [size]="properties.size"
+                    [outlined]="properties.outlined"
+                ></igx-badge>
+                <span>With Value</span>
+            </div>
+            <div class="badge-item">
+                <igx-badge
+                    [type]="properties.variant"
+                    [shape]="properties.shape"
+                    [size]="properties.size"
+                    [outlined]="properties.outlined"
+                >
+                    <igx-icon>bluetooth</igx-icon>
+                </igx-badge>
+                <span>With Icon</span>
+            </div>
+            <div class="badge-item avatar-sample">
+                <igx-avatar icon="face" shape="rounded"></igx-avatar>
+                <igx-badge
+                    [type]="properties.variant"
+                    [shape]="properties.shape"
+                    [size]="properties.size"
+                    [outlined]="properties.outlined"
+                >
+                    <igx-icon>bluetooth</igx-icon>
+                </igx-badge>
+                <span>On Avatar</span>
+            </div>
+        </div>
+
+        <h3 class="sample-title">Size Variants</h3>
+        <div class="badge-examples">
+            <div class="badge-item">
+                <igx-badge type="info" value="5" size="small"></igx-badge>
+                <span>Small</span>
+            </div>
+            <div class="badge-item">
+                <igx-badge type="info" value="10" size="medium"></igx-badge>
+                <span>Medium</span>
+            </div>
+            <div class="badge-item">
+                <igx-badge type="info" value="99+" size="large"></igx-badge>
+                <span>Large</span>
+            </div>
+        </div>
+
+        <h3 class="sample-title">Dot Type</h3>
+        <div class="badge-examples">
+            <div class="badge-item">
+                <igx-badge type="dot"></igx-badge>
+                <span>Default Dot</span>
+            </div>
+            <div class="badge-item">
+                <igx-badge type="dot" outlined></igx-badge>
+                <span>Outlined Dot</span>
+            </div>
+            <div class="badge-item avatar-sample">
+                <igx-avatar icon="face" shape="rounded"></igx-avatar>
+                <igx-badge type="dot"></igx-badge>
+                <span>Dot on Avatar</span>
+            </div>
+        </div>
+
+        <h3 class="sample-title">Type Variants</h3>
+        <div class="badge-examples">
+            <div class="badge-item">
+                <igx-badge type="primary" value="1"></igx-badge>
+                <span>Primary</span>
+            </div>
+            <div class="badge-item">
+                <igx-badge type="info" value="2"></igx-badge>
+                <span>Info</span>
+            </div>
+            <div class="badge-item">
+                <igx-badge type="success" value="3"></igx-badge>
+                <span>Success</span>
+            </div>
+            <div class="badge-item">
+                <igx-badge type="warning" value="4"></igx-badge>
+                <span>Warning</span>
+            </div>
+            <div class="badge-item">
+                <igx-badge type="error" value="5"></igx-badge>
+                <span>Error</span>
+            </div>
         </div>
     </div>
 

src/app/badge/badge.sample.scss

@@ -1,16 +1,52 @@
 .wrapper {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
+    gap: 48px;
+    padding: 24px;
 }
 
 .badges {
-    place-items: center;
-    display: grid;
-    grid-template-columns: subgrid;
+    place-items: start;
+    display: flex;
+    flex-direction: column;
     gap: 24px;
 }
 
+.sample-title {
+    margin: 16px 0 8px 0;
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.badge-examples {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 32px;
+    align-items: center;
+}
+
+.badge-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    position: relative;
+
+    span {
+        font-size: 12px;
+        color: #666;
+        margin-top: 4px;
+    }
+}
+
 .avatar-sample {
     display: flex;
     align-items: center;
+    position: relative;
+
+    igx-badge {
+        position: absolute;
+        top: -4px;
+        right: -4px;
+    }
 }