UN-554-alert

src/index.tsx

@@ -6,7 +6,7 @@ import { GlobalStyle } from "./stories/shared/globalStyle";
 export * from "./stories/accordions";
 
 // --- Alerts ---
-export * from "./stories/alerts";
+export * from "./stories/notifications/alerts";
 
 // --- Avatar ---
 export * from "./stories/avatar";

src/stories/alerts/index.stories.tsx → src/stories/notifications/alerts/index.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta as ComponentMeta, StoryFn as Story } from "@storybook/react";
-import { Alert } from ".";
-import { AlertArgs } from "./_types";
+import { Alert, AlertArgs } from ".";
 
 const Template: Story<AlertArgs> = (args) => {
   return (
@@ -25,7 +24,7 @@ Default.parameters = {
 };
 
 export default {
-  title: "Atoms/Alerts",
+  title: "Molecules/Notification/Alerts",
   component: Alert,
   parameters: {
     // Sets a delay for the component's stories

src/stories/notifications/alerts/index.tsx

@@ -0,0 +1,11 @@
+import { Alert as ZendeskAlert, Title as ZendeskTitle, Close as ZendeskClose } from '@zendeskgarden/react-notifications';
+import { IAlertProps } from '@zendeskgarden/react-notifications';
+
+
+export interface AlertArgs extends IAlertProps {}
+
+const Alert = (props: AlertArgs) => <ZendeskAlert {...props}/>;
+Alert.Title = ZendeskTitle;
+Alert.Close = ZendeskClose;
+
+export { Alert };

src/stories/theme/components.ts

@@ -5,6 +5,7 @@ import { colors } from "./colors";
 import { fontWeights } from "./fontWeights";
 import { palette } from "./palette";
 import { getColor } from "./utils";
+import { AlertArgs } from "../notifications/alerts";
 
 export const components = {
   ...DEFAULT_THEME.components,
@@ -41,6 +42,13 @@ export const components = {
       }),
     };
   },
+  "notifications.alert": ({ type }: AlertArgs) => {
+    return {
+      ...(type === "success" && {
+        backgroundColor: getColor(colors.successHue, 10),
+      }),
+    };
+  },
   "text.primary": () => ({
     color: getColor(colors.primaryHue, 600),
   }),

src/stories/theme/palette.ts

@@ -64,6 +64,7 @@ export const palette = {
     "900": "#734A15",
   },
   "green": {
+    "10": "#EBF5F2",
     "50": "#B3E8D9",
     "100": "#80D9C0",
     "200": "#66D1B3",