feat: global alert

src/index.tsx

@@ -136,6 +136,7 @@ export * from "./stories/navigation/nav/nav-item";
 
 // --- Notifications ---
 export * from "./stories/notifications";
+export * from "./stories/notifications/global-alert";
 
 // --- Pagination ---
 export * from "./stories/pagination";

src/stories/notifications/global-alert/index.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta as ComponentMeta, StoryFn as Story } from "@storybook/react";
+import {
+  GlobalAlert as UgGlobalAlert,
+  GlobalAlertProps
+} from ".";
+import { Anchor } from "../../buttons/anchor";
+
+const GlobalAlertTemplate: Story<GlobalAlertProps> = ({ ...props }) => (
+  <UgGlobalAlert {...props}>
+    <UgGlobalAlert.Content>
+      <UgGlobalAlert.Title>New update available</UgGlobalAlert.Title>
+      Your account will automatically update in 5 days.{' '}
+      <Anchor href="#" isExternal>
+        Find out more
+      </Anchor>
+    </UgGlobalAlert.Content>
+    <UgGlobalAlert.Button>Update now</UgGlobalAlert.Button>
+    <UgGlobalAlert.Close aria-label="Close Global Alert" />
+  </UgGlobalAlert>
+);
+
+export const GlobalAlert = GlobalAlertTemplate.bind({});
+GlobalAlert.args = {
+  type: "info"
+};
+
+export default {
+  title: "Molecules/Notification",
+  component: UgGlobalAlert,
+  parameters: {
+    // Sets a delay for the component's stories
+    chromatic: { delay: 300 },
+  },
+} as ComponentMeta<typeof UgGlobalAlert>;

src/stories/notifications/global-alert/index.tsx

@@ -0,0 +1,24 @@
+import {
+  GlobalAlert as ZendeskGlobalAlert,
+  IGlobalAlertProps
+} from "@zendeskgarden/react-notifications";
+import { forwardRef } from "react";
+
+export interface GlobalAlertProps extends IGlobalAlertProps {}
+
+const GlobalAlertComponent = forwardRef<HTMLDivElement, IGlobalAlertProps>((props, ref) => (
+  <ZendeskGlobalAlert ref={ref} {...props} />
+));
+
+export const GlobalAlert = GlobalAlertComponent as typeof GlobalAlertComponent & {
+  Title: typeof ZendeskGlobalAlert.Title;
+  Button: typeof ZendeskGlobalAlert.Button;
+  Close: typeof ZendeskGlobalAlert.Close;
+  Content: typeof ZendeskGlobalAlert.Content;
+};
+
+GlobalAlert.Title = ZendeskGlobalAlert.Title;
+GlobalAlert.Button = ZendeskGlobalAlert.Button;
+GlobalAlert.Close = ZendeskGlobalAlert.Close;
+GlobalAlert.Content = ZendeskGlobalAlert.Content;
+