feat: Add prop to hide badge in icon

Author: cizil-keyvalue

src/components/NotificationIcon.vue

@@ -5,19 +5,24 @@
     data-testid="notification-icon-container"
   >
     <slot name="notification-icon">
-      <BellIcon :stroke=" darkMode
-              ? COLORS.dark.notificationIcon
-              : COLORS.light.notificationIcon" />
+      <BellIcon
+        :stroke="
+          darkMode
+            ? COLORS.dark.notificationIcon
+            : COLORS.light.notificationIcon
+        "
+      />
     </slot>
     <div
+      v-if="!hideBadge"
       class="siren-sdk-notificationIcon-badge-container"
       :style="
         badgeType === BadgeType.DEFAULT && unViewedCount > 0
           ? styles.badgeStyle
           : {
               width: 0,
               height: 0,
-              overflow: 'hidden'
+              overflow: 'hidden',
             }
       "
     >
@@ -29,8 +34,7 @@
 </template>
 
 <script setup lang="ts">
-import type {
-Ref } from 'vue';
+import type { Ref } from 'vue';
 import {
   defineProps,
   inject,
@@ -39,20 +43,27 @@ import {
   ref,
   watch
 } from 'vue';
-import PubSub from 'pubsub-js';
 import type { Siren } from 'test_notification';
+import PubSub from 'pubsub-js';
 
 import type { SirenStyleProps } from '../types';
-import { BadgeType, EventType, eventTypes, events, COLORS } from '../utils/constants';
+import {
+  BadgeType,
+  EventType,
+  eventTypes,
+  events,
+  COLORS
+} from '../utils/constants';
 import BellIcon from './BellIcon.vue';
 
 import '../styles/icon.css';
 
-defineProps<{
+const props = defineProps<{
   handleNotification: (event: any) => void;
   badgeType: BadgeType;
   darkMode: boolean;
   styles: SirenStyleProps;
+  hideBadge: boolean;
 }>();
 
 const siren: Ref<Siren> = inject('siren') as Ref<Siren>;
@@ -93,20 +104,21 @@ const getUnViewedCount = async (): Promise<void> => {
 };
 
 onMounted(() => {
-  PubSub.subscribe(
-    events.NOTIFICATION_COUNT_EVENT,
-    notificationCountSubscriber
-  );
+  if (!props.hideBadge)
+    PubSub.subscribe(
+      events.NOTIFICATION_COUNT_EVENT,
+      notificationCountSubscriber
+    );
 });
 
 onMounted(() => {
-  startRealTimeDataFetch();
+  if (!props.hideBadge) startRealTimeDataFetch();
 });
 
 watch(
   () => siren.value,
   () => {
-    getUnViewedCount();
+    if (!props.hideBadge) getUnViewedCount();
   },
   { immediate: true }
 );

src/components/SirenInbox.vue

@@ -3,7 +3,7 @@
       <div v-if="!windowViewOnly" ref="iconRef" data-testid="siren-inbox-icon">
         <NotificationIcon :handleNotification="handleNotification"
           :badgeType="showNotifications ? BadgeType.NONE : BadgeType.DEFAULT"
-          :darkMode="darkMode" :styles="styles" />
+          :darkMode="darkMode" :styles="styles" :hideBadge="hideBadge" />
       </div>
       <div v-if="showNotifications || windowViewOnly" :style="{
     ...styles.container,

src/components/SirenPanel.vue

@@ -320,7 +320,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
   cleanUp();
   notificationsContent.value = [];
-  restartNotificationCountFetch();
+  if (!props.hideBadge) restartNotificationCountFetch();
   handleMarkNotificationsAsViewed(new Date().toISOString());
 });
 
@@ -356,7 +356,7 @@ watch(
   [() => siren.value, () => verificationStatus.value],
   () => {
     if (siren.value && verificationStatus.value !== VerificationStatus.PENDING) {
-      siren.value?.stopRealTimeFetch(EventType.UNVIEWED_COUNT);
+      if (!props.hideBadge) siren.value?.stopRealTimeFetch(EventType.UNVIEWED_COUNT);
       fetchNotifications(true);
     }
     if (!siren.value && isLoading.value) {

stories/NotificationIcon.stories.ts

@@ -26,7 +26,8 @@ const meta = {
     badgeType: BadgeType.DEFAULT,
     darkMode: false,
     handleNotification: () => {},
-    styles: applyTheme({}, ThemeMode.LIGHT, {})
+    styles: applyTheme({}, ThemeMode.LIGHT, {}),
+    hideBadge: false
   }
 } satisfies Meta<typeof NotificationIcon>;