From f565c911956fba4d3d4c648a97f75d30b5c42e2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Pot=C4=99pa?= <adrian.potepa@gmail.com>
Date: Wed, 8 Nov 2023 18:05:56 +0100
Subject: [PATCH] fix(Toast): middle dot color TET-524

---
 src/components/Toast/Toast.styles.ts              | 15 +++++++++++----
 src/components/Toast/Toast.tsx                    |  4 ++--
 .../Toast/stylesBuilder/stylesBuilder.ts          |  8 ++++++--
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/components/Toast/Toast.styles.ts b/src/components/Toast/Toast.styles.ts
index ac6c6a53..327895cf 100644
--- a/src/components/Toast/Toast.styles.ts
+++ b/src/components/Toast/Toast.styles.ts
@@ -1,5 +1,4 @@
 import type { ToastEmphasis, ToastIntent } from './types';
-import { BareButtonProps } from '../Button/Button.props';
 
 import type { BaseProps } from '@/types/BaseProps';
 import type { IconName } from '@/utility-types/IconName';
@@ -19,9 +18,8 @@ export type ToastConfig = {
     } & BaseProps;
     actionContainer?: BaseProps;
     middleDot?: {
-      emphasis: Partial<
-        Record<ToastEmphasis, BaseProps | Partial<BareButtonProps>>
-      >;
+      emphasis: Partial<Record<ToastEmphasis, BaseProps>>;
+      intent: Partial<Record<ToastIntent, BaseProps>>;
     } & BaseProps;
     closeButton?: BaseProps;
   };
@@ -136,6 +134,15 @@ export const defaultConfig = {
           color: '$color-content-tertiary',
         },
       },
+      intent: {
+        neutral: {},
+        informative: {},
+        success: {},
+        warning: {
+          color: '$color-content-secondary',
+        },
+        negative: {},
+      },
     },
     closeButton: {
       ml: '$space-component-padding-large',
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
index 41c344dd..09129d89 100644
--- a/src/components/Toast/Toast.tsx
+++ b/src/components/Toast/Toast.tsx
@@ -57,9 +57,9 @@ export const Toast: FC<ToastProps & MarginProps> = ({
           <Button variant="bare" appearance={appearance} {...firstAction} />
           {secondAction && (
             <>
-              <tet.div {...styles.middleDot} data-testid="toast-middleDot">
+              <tet.span {...styles.middleDot} data-testid="toast-middleDot">
                 &middot;
-              </tet.div>
+              </tet.span>
               <Button
                 variant="bare"
                 appearance={appearance}
diff --git a/src/components/Toast/stylesBuilder/stylesBuilder.ts b/src/components/Toast/stylesBuilder/stylesBuilder.ts
index d0989193..a6251daf 100644
--- a/src/components/Toast/stylesBuilder/stylesBuilder.ts
+++ b/src/components/Toast/stylesBuilder/stylesBuilder.ts
@@ -52,8 +52,11 @@ export const stylesBuilder = ({
     ...restIconContainerStyles,
   };
 
-  const { emphasis: emphasisMiddleDotStyles, ...restMiddleDotStyles } =
-    middleDot;
+  const {
+    emphasis: emphasisMiddleDotStyles,
+    intent: intentMiddleDotStyles,
+    ...restMiddleDotStyles
+  } = middleDot;
 
   return {
     container,
@@ -63,6 +66,7 @@ export const stylesBuilder = ({
     middleDot: {
       ...restMiddleDotStyles,
       ...emphasisMiddleDotStyles[props.emphasis],
+      ...intentMiddleDotStyles[props.intent],
     },
   };
 };