feat(list): add badge count

src/components/list/list-item.types.ts

@@ -63,6 +63,8 @@ export interface ListItem<T = any> {
      * Component used to render the list item.
      */
     primaryComponent?: ListComponent;
+
+    badgeCount?: number | string;
 }
 
 /**

src/components/list/list-renderer.tsx

@@ -152,6 +152,7 @@ export class ListRenderer {
                 {...attributes}
             >
                 {this.renderIcon(this.config, item)}
+                {this.renderBadge(item)}
                 {this.getPrimaryComponent(item)}
                 {this.renderText(item)}
                 {this.twoLines && this.avatarList ? this.renderDivider() : null}
@@ -160,6 +161,14 @@ export class ListRenderer {
         );
     };
 
+    private renderBadge = (item: ListItem) => {
+        if (!item.badgeCount) {
+            return;
+        }
+
+        return <limel-badge label={item.badgeCount} />;
+    };
+
     private renderTextForSeparator = (item: ListSeparator) => {
         if ('text' in item) {
             return <h2 class="limel-list-divider-title">{item.text}</h2>;

src/components/list/list.scss

@@ -258,6 +258,15 @@ $list-mdc-list-item: 0;
     }
 }
 
+limel-badge {
+    position: absolute;
+    top: 0rem;
+    left: -0.0125rem;
+    /* color: red; */
+    --badge-background-color: rgb(var(--color-red-default));
+    --badge-text-color: rgb(var(--color-yellow-lighter));
+}
+
 @import '../checkbox/checkbox.scss';
 
 @import './radio-button/radio-button.scss';