rework: update Alert component to use ZendeskAlert directly with succ…

…ess custom bg

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

@@ -1,27 +1,11 @@
 import { Alert as ZendeskAlert, Title as ZendeskTitle, Close as ZendeskClose } from '@zendeskgarden/react-notifications';
-import styled from 'styled-components';
-import { AlertArgs } from './_types';
+import { IAlertProps } from '@zendeskgarden/react-notifications';
 
-const UgAlert = styled(ZendeskAlert)`
-   background-color: white;
-   color: ${({ theme }) => theme.palette.grey[700]};
-   border-width: 2px;
-   font-size: ${({ theme }) => theme.fontSizes.sm};
-`;
 
-const UgAlertTitle = styled(ZendeskTitle)`
-   font-size: ${({ theme }) => theme.fontSizes.md};
-`;
+export interface AlertArgs extends IAlertProps {}
 
-/**
- * Breadcrumbs mark and communicate a user’s location in the product.
- * <hr>
- * Used for this:
-    - To show the user where they are in a nested navigation
-    - To provide a quick way to navigate to ancestor pages
- */
-const Alert = (props: AlertArgs) => <UgAlert {...props}/>;
-Alert.Title = UgAlertTitle;
+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",