Merge pull request #1321 from Bynder/GC-3452-set-unread-notification-…

…blip-on-page-load GC-3452 Control Notification Blip visibility with visible prop
Bynder · Nov 16, 2023 · 4e0dd6d · 4e0dd6d
2 parents cbe86a1 + cfcd032
commit 4e0dd6d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git 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>;
 }
diff --git a/stories/components/NotificationBlip.stories.tsx b/stories/components/NotificationBlip.stories.tsx
@@ -1,20 +1,22 @@
 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) => <>
   <StoryItem
     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>