From cb53fa73dce9ba963325db0cb95dbd6d1a32f1fc Mon Sep 17 00:00:00 2001
From: Lewis Hankinson <lewis.hankinson@gmail.com>
Date: Thu, 16 Nov 2023 11:42:31 +0000
Subject: [PATCH 1/2] Add visible prop to Notification Blip

---
 lib/Notification/blip/NotificationBlip.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/lib/Notification/blip/NotificationBlip.tsx b/lib/Notification/blip/NotificationBlip.tsx
index cf2fe2d88..4a392824e 100644
--- a/lib/Notification/blip/NotificationBlip.tsx
+++ b/lib/Notification/blip/NotificationBlip.tsx
@@ -3,10 +3,15 @@ import cx from 'classnames';
 
 interface Props {
   children: React.ReactNode;
+  visible: boolean;
   className?: string;
 }
 
-export function NotificationBlip({ children, className }: Props) {
-  const classes = cx('notification-blip', className);
+export function NotificationBlip({ children, visible, className }: Props) {
+  const classes = cx(
+    'notification-blip',
+    visible ? 'after:opacity-1' : 'after:opacity-0',
+    className,
+  );
   return <div className={classes}>{children}</div>;
 }
\ No newline at end of file

From cfcd03209695de4723bdc889d60b02afcaa55c41 Mon Sep 17 00:00:00 2001
From: Lewis Hankinson <lewis.hankinson@gmail.com>
Date: Thu, 16 Nov 2023 11:42:39 +0000
Subject: [PATCH 2/2] Update Notification Blip story

---
 stories/components/NotificationBlip.stories.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/stories/components/NotificationBlip.stories.tsx b/stories/components/NotificationBlip.stories.tsx
index f42b93e04..ffca50818 100644
--- a/stories/components/NotificationBlip.stories.tsx
+++ b/stories/components/NotificationBlip.stories.tsx
@@ -1,12 +1,14 @@
 import React from "react";
-import { Button, ButtonIcon } from "../../lib";
-import { Icon } from "../../lib";
+import { ButtonIcon } from "../../lib";
 import { NotificationBlip as NotificationBlipComponent } from "../../lib/Notification/blip/NotificationBlip";
 import StoryItem from "../styleguide/StoryItem";
 
 export default {
   title: 'GUI/Notification Blip',
   component: NotificationBlipComponent,
+  args: {
+    visible: true,
+  }
 };
 
 export const NotificationBlip = (args: any) => <>
@@ -14,7 +16,7 @@ export const NotificationBlip = (args: any) => <>
     title="Notification blip"
     description="A visual indicator to inform the user they have notifications"
   >
-    <NotificationBlipComponent>
+    <NotificationBlipComponent visible={args.visible} className={args.className}>
       <ButtonIcon name={'bell'} />
     </NotificationBlipComponent>
   </StoryItem>