Merge pull request #1313 from Bynder/GC-3155-notification-blip-rework

GC-3155 Rework the notification blip to take children
Bynder · Oct 20, 2023 · cbdbfa8 · cbdbfa8
2 parents 06ba595 + 3cd3dd1
commit cbdbfa8
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 7 deletions.
diff --git a/lib/Notification/blip/NotificationBlip.tsx b/lib/Notification/blip/NotificationBlip.tsx
@@ -2,10 +2,11 @@ import React from 'react';
 import cx from 'classnames';
 
 interface Props {
+  children: React.ReactNode;
   className?: string;
 }
 
-export default function NotificationBlip({ className }: Props) {
+export function NotificationBlip({ children, className }: Props) {
   const classes = cx('notification-blip', className);
-  return <div className={classes} />;
+  return <div className={classes}>{children}</div>;
 }
diff --git a/lib/Notification/blip/styles/NotificationBlip.scss b/lib/Notification/blip/styles/NotificationBlip.scss
@@ -1,5 +1,5 @@
 .notification-blip {
-  @apply absolute h-full w-full;
+  @apply relative w-fit h-fit;
 }
 
 .notification-blip::after {

diff --git a/lib/index.ts b/lib/index.ts
@@ -20,6 +20,7 @@ export { NotificationInlineDanger } from "./Notification/inline/NotificationInli
 export { NotificationInlineInformation } from "./Notification/inline/NotificationInlineInformation";
 export { NotificationInlineSuccess } from "./Notification/inline/NotificationInlineSuccess";
 export { NotificationInlineWarning } from "./Notification/inline/NotificationInlineWarning";
+export { NotificationBlip } from "./Notification/blip/NotificationBlip";
 export { Dropdown } from "./Dropdown";
 export { DropdownMenu } from "./DropdownMenu";
 export { ProgressButton } from "./ProgressButton";

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