From 6b3f8660564a209f127f3de73142b44b2f4e41ea Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Sun, 15 Dec 2024 14:57:35 +0100
Subject: [PATCH 1/2] Move alert icon into thick left border

---
 packages/css/src/components/alert/alert.scss  | 36 ++++++++++++++++---
 packages/react/src/Alert/Alert.tsx            | 12 ++++---
 .../src/components/ams/alert.tokens.json      | 36 +++++++++++++------
 3 files changed, 65 insertions(+), 19 deletions(-)

diff --git a/packages/css/src/components/alert/alert.scss b/packages/css/src/components/alert/alert.scss
index 12316c6485..7972513c3a 100644
--- a/packages/css/src/components/alert/alert.scss
+++ b/packages/css/src/components/alert/alert.scss
@@ -4,16 +4,23 @@
  */
 
 .ams-alert {
-  align-items: flex-start;
   background-color: var(--ams-alert-background-color);
   border-style: var(--ams-alert-border-style);
   border-width: var(--ams-alert-border-width);
   display: flex;
   flex-direction: row;
-  gap: var(--ams-alert-gap);
   justify-content: space-between;
-  padding-block: var(--ams-alert-padding-block);
-  padding-inline: var(--ams-alert-padding-inline);
+}
+
+.ams-alert__section {
+  padding-block: var(--ams-alert-section-padding-block);
+  padding-inline: var(--ams-alert-section-padding-inline);
+}
+
+.ams-alert__severity {
+  border-inline-end-style: solid;
+  border-inline-end-width: var(--ams-alert-border-width);
+  flex: none;
 }
 
 .ams-alert__content {
@@ -21,20 +28,41 @@
   flex: auto;
   flex-direction: column;
   gap: var(--ams-alert-content-gap);
+  padding-inline: var(--ams-alert-content-padding-inline);
 }
 
 .ams-alert--error {
   border-color: var(--ams-alert-error-border-color);
+
+  > .ams-alert__severity {
+    background-color: var(--ams-alert-error-icon-background-color);
+    border-inline-end-color: var(--ams-alert-error-border-color);
+  }
 }
 
 .ams-alert--info {
   border-color: var(--ams-alert-info-border-color);
+
+  > .ams-alert__severity {
+    background-color: var(--ams-alert-info-icon-background-color);
+    border-inline-end-color: var(--ams-alert-info-border-color);
+  }
 }
 
 .ams-alert--success {
   border-color: var(--ams-alert-success-border-color);
+
+  > .ams-alert__severity {
+    background-color: var(--ams-alert-success-icon-background-color);
+    border-inline-end-color: var(--ams-alert-success-border-color);
+  }
 }
 
 .ams-alert--warning {
   border-color: var(--ams-alert-warning-border-color);
+
+  > .ams-alert__severity {
+    background-color: var(--ams-alert-warning-icon-background-color);
+    border-inline-end-color: var(--ams-alert-warning-border-color);
+  }
 }
diff --git a/packages/react/src/Alert/Alert.tsx b/packages/react/src/Alert/Alert.tsx
index fddfb9841d..3da36ec995 100644
--- a/packages/react/src/Alert/Alert.tsx
+++ b/packages/react/src/Alert/Alert.tsx
@@ -57,10 +57,10 @@ export const Alert = forwardRef(
 
     return (
       <Tag {...restProps} ref={ref} className={clsx('ams-alert', severity && `ams-alert--${severity}`, className)}>
-        <div className="ams-alert__icon">
-          <Icon size={alertSize} svg={iconSvgBySeverity[severity]} />
+        <div className="ams-alert__section ams-alert__severity">
+          <Icon inverseColor size={alertSize} svg={iconSvgBySeverity[severity]} />
         </div>
-        <div className="ams-alert__content">
+        <div className="ams-alert__section ams-alert__content">
           {heading && (
             <Heading level={headingLevel} size="level-4">
               {heading}
@@ -68,7 +68,11 @@ export const Alert = forwardRef(
           )}
           {children}
         </div>
-        {closeable && <IconButton label={closeButtonLabel} size={alertSize} onClick={onClose} />}
+        {closeable && (
+          <div className="ams-alert__section">
+            <IconButton label={closeButtonLabel} size={alertSize} onClick={onClose} />
+          </div>
+        )}
       </Tag>
     )
   },
diff --git a/proprietary/tokens/src/components/ams/alert.tokens.json b/proprietary/tokens/src/components/ams/alert.tokens.json
index d7857e68f1..3cc580c9ce 100644
--- a/proprietary/tokens/src/components/ams/alert.tokens.json
+++ b/proprietary/tokens/src/components/ams/alert.tokens.json
@@ -2,25 +2,39 @@
   "ams": {
     "alert": {
       "background-color": { "value": "{ams.brand.color.neutral.0}" },
-      "border-width": { "value": "{ams.border.width.xl}" },
       "border-style": { "value": "solid" },
-      "gap": { "value": "{ams.space.sm}" },
-      "padding-block": { "value": "{ams.space.md}" },
-      "padding-inline": { "value": "{ams.space.lg}" },
+      "border-width": { "value": "{ams.border.width.xl}" },
+      "section": {
+        "padding-block": { "value": "{ams.space.md}" },
+        "padding-inline": { "value": "{ams.space.xs}" }
+      },
+      "content": {
+        "gap": { "value": "{ams.space.sm}" },
+        "padding-inline": { "value": "{ams.space.md}" }
+      },
       "error": {
-        "border-color": { "value": "{ams.brand.color.red.60}" }
+        "border-color": { "value": "{ams.brand.color.red.60}" },
+        "icon": {
+          "background-color": { "value": "{ams.brand.color.red.60}" }
+        }
       },
       "info": {
-        "border-color": { "value": "{ams.brand.color.azure.60}" }
+        "border-color": { "value": "{ams.brand.color.azure.60}" },
+        "icon": {
+          "background-color": { "value": "{ams.brand.color.azure.60}" }
+        }
       },
       "success": {
-        "border-color": { "value": "{ams.brand.color.green.60}" }
+        "border-color": { "value": "{ams.brand.color.green.60}" },
+        "icon": {
+          "background-color": { "value": "{ams.brand.color.green.60}" }
+        }
       },
       "warning": {
-        "border-color": { "value": "{ams.brand.color.orange.60}" }
-      },
-      "content": {
-        "gap": { "value": "{ams.space.sm}" }
+        "border-color": { "value": "{ams.brand.color.orange.60}" },
+        "icon": {
+          "background-color": { "value": "{ams.brand.color.orange.60}" }
+        }
       }
     }
   }

From ae3959c6712f1a95b19c348df5dd7e2380c83d6d Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Mon, 16 Dec 2024 14:50:51 +0100
Subject: [PATCH 2/2] Update icon test for changed markup

---
 packages/react/src/Alert/Alert.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/Alert/Alert.test.tsx b/packages/react/src/Alert/Alert.test.tsx
index 892879ec87..bf904287ea 100644
--- a/packages/react/src/Alert/Alert.test.tsx
+++ b/packages/react/src/Alert/Alert.test.tsx
@@ -8,7 +8,7 @@ describe('Alert', () => {
     const { container } = render(<Alert />)
 
     const component = container.querySelector(':only-child')
-    const icon = component?.querySelector('.ams-alert__icon')
+    const icon = component?.querySelector('.ams-alert__severity > .ams-icon')
 
     expect(component).toBeInTheDocument()
     expect(component).toBeVisible()