From c3d7c8c606b47e74f1d15f1d372fe958dabc2c33 Mon Sep 17 00:00:00 2001
From: Per Fryking <per.fryking@lime.tech>
Date: Wed, 13 Nov 2024 11:57:19 +0100
Subject: [PATCH] feat(list): add badge count

Adds the possibility so supply a `badgeCount` to the list items. If
added a badge will be shown in the list with either a number or string
supplied by the consumer.

fixes: Lundalogik/hack-tuesday#376
---
 src/components/list/list-item.types.ts | 2 ++
 src/components/list/list-renderer.tsx  | 9 +++++++++
 src/components/list/list.scss          | 9 +++++++++
 3 files changed, 20 insertions(+)

diff --git a/src/components/list/list-item.types.ts b/src/components/list/list-item.types.ts
index e8047f993c..fdbcaf0bde 100644
--- a/src/components/list/list-item.types.ts
+++ b/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;
 }
 
 /**
diff --git a/src/components/list/list-renderer.tsx b/src/components/list/list-renderer.tsx
index 252a700035..9d8296ce0f 100644
--- a/src/components/list/list-renderer.tsx
+++ b/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>;
diff --git a/src/components/list/list.scss b/src/components/list/list.scss
index 298df4dcb1..ce72694675 100644
--- a/src/components/list/list.scss
+++ b/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';