From 5bb898e090a91629534f753f0502ceba6afc2716 Mon Sep 17 00:00:00 2001
From: Iacopo Leardini <iacopo.lea@gmail.com>
Date: Thu, 12 Dec 2024 14:48:57 +0100
Subject: [PATCH 1/2] refactor: move alerts to notifications and update import

---
 src/index.tsx                                            | 2 +-
 src/stories/{ => notifications}/alerts/_types.tsx        | 0
 src/stories/{ => notifications}/alerts/index.stories.tsx | 0
 src/stories/{ => notifications}/alerts/index.tsx         | 0
 4 files changed, 1 insertion(+), 1 deletion(-)
 rename src/stories/{ => notifications}/alerts/_types.tsx (100%)
 rename src/stories/{ => notifications}/alerts/index.stories.tsx (100%)
 rename src/stories/{ => notifications}/alerts/index.tsx (100%)

diff --git a/src/index.tsx b/src/index.tsx
index c75185e2..097adef1 100644
--- a/src/index.tsx
+++ b/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";
diff --git a/src/stories/alerts/_types.tsx b/src/stories/notifications/alerts/_types.tsx
similarity index 100%
rename from src/stories/alerts/_types.tsx
rename to src/stories/notifications/alerts/_types.tsx
diff --git a/src/stories/alerts/index.stories.tsx b/src/stories/notifications/alerts/index.stories.tsx
similarity index 100%
rename from src/stories/alerts/index.stories.tsx
rename to src/stories/notifications/alerts/index.stories.tsx
diff --git a/src/stories/alerts/index.tsx b/src/stories/notifications/alerts/index.tsx
similarity index 100%
rename from src/stories/alerts/index.tsx
rename to src/stories/notifications/alerts/index.tsx

From 6a5b33ec85f3a43cd391e5939e88c7614f6202d4 Mon Sep 17 00:00:00 2001
From: Iacopo Leardini <iacopo.lea@gmail.com>
Date: Thu, 12 Dec 2024 16:45:37 +0100
Subject: [PATCH 2/2] rework: update Alert component to use ZendeskAlert
 directly with success custom bg

---
 src/stories/notifications/alerts/_types.tsx   |  6 -----
 .../notifications/alerts/index.stories.tsx    |  5 ++--
 src/stories/notifications/alerts/index.tsx    | 24 ++++---------------
 src/stories/theme/components.ts               |  8 +++++++
 src/stories/theme/palette.ts                  |  1 +
 5 files changed, 15 insertions(+), 29 deletions(-)
 delete mode 100644 src/stories/notifications/alerts/_types.tsx

diff --git a/src/stories/notifications/alerts/_types.tsx b/src/stories/notifications/alerts/_types.tsx
deleted file mode 100644
index a3f4d6ed..00000000
--- a/src/stories/notifications/alerts/_types.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { IAlertProps } from '@zendeskgarden/react-notifications';
-
-export interface AlertArgs extends IAlertProps {
-  /** Applies alert type styles */
-  type: 'success' | 'warning' | 'error' | 'info';
-}
diff --git a/src/stories/notifications/alerts/index.stories.tsx b/src/stories/notifications/alerts/index.stories.tsx
index 2aa5d8b3..afb1ce48 100644
--- a/src/stories/notifications/alerts/index.stories.tsx
+++ b/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
diff --git a/src/stories/notifications/alerts/index.tsx b/src/stories/notifications/alerts/index.tsx
index 9fafbcc4..31d8e5a3 100644
--- a/src/stories/notifications/alerts/index.tsx
+++ b/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 };
diff --git a/src/stories/theme/components.ts b/src/stories/theme/components.ts
index 43f7be1a..fa9b06ee 100644
--- a/src/stories/theme/components.ts
+++ b/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),
   }),
diff --git a/src/stories/theme/palette.ts b/src/stories/theme/palette.ts
index b428959f..e957ba5c 100644
--- a/src/stories/theme/palette.ts
+++ b/src/stories/theme/palette.ts
@@ -64,6 +64,7 @@ export const palette = {
     "900": "#734A15",
   },
   "green": {
+    "10": "#EBF5F2",
     "50": "#B3E8D9",
     "100": "#80D9C0",
     "200": "#66D1B3",