Merge pull request #1312 from Bynder/GC-3155-notification-icon-and-blip

GC-3155 Notification Blip

lib/Notification/blip/NotificationBlip.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import cx from 'classnames';
+
+interface Props {
+  className?: string;
+}
+
+export default function NotificationBlip({ className }: Props) {
+  const classes = cx('notification-blip', className);
+  return <div className={classes}></div>;
+}

lib/Notification/blip/styles/NotificationBlip.scss

@@ -0,0 +1,9 @@
+.notification-blip {
+  @apply absolute h-full w-full;
+}
+
+.notification-blip::after {
+  @apply rounded-full absolute block h-1.5 w-1.5 bg-red-40 right-[13%] top-[13%];
+
+  content: '';
+}

stories/components/Icons.stories.tsx

@@ -125,6 +125,7 @@ const allIcons = (additionalProps?: any) => (
     <Icon name="caretRight" {...additionalProps} />
     <Icon name="arrowReturn" {...additionalProps} />
     <Icon name="arrowRightAngle" {...additionalProps} />
+    <Icon name="bell" {...additionalProps} />
   </div>
 );
 

stories/components/NotificationBlip.stories.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Button, ButtonIcon } from "../../lib";
+import { Icon } from "../../lib";
+import NotificationBlipComponent from "../../lib/Notification/blip/NotificationBlip";
+import StoryItem from "../styleguide/StoryItem";
+
+export default {
+  title: 'GUI/Notification Blip',
+  component: NotificationBlipComponent,
+};
+
+export const NotificationBlip = (args: any) => <>
+  <StoryItem
+    title="Notification blip"
+    description="A visual indicator to inform the user they have notifications"
+  >
+    <ButtonIcon name={'bell'}>
+      <NotificationBlipComponent />
+    </ButtonIcon>
+  </StoryItem>
+</>;

styles/components/_ui.scss

@@ -7,6 +7,7 @@
 @import "../../lib/Avatar/AvatarGroup/styles";
 @import "../../lib/CheckToggle/styles";
 @import "../../lib/Notification/styles";
+@import "../../lib/Notification/blip/styles/NotificationBlip";
 @import "../../lib/Dropdown/styles";
 @import "../../lib/DropdownMenu/styles";
 @import "../../lib/Progress/styles";