From e586e0c9d1c79e60bdd13be5c91eb2b64e0866b5 Mon Sep 17 00:00:00 2001
From: raczyk <pawel.raczyk@nordcloud.com>
Date: Fri, 30 Jun 2023 12:41:56 +0200
Subject: [PATCH] extend tooltip color

---
 package.json                                  |  2 +-
 .../ExtendedTooltip.stories.mdx               | 15 ++++++++++++
 .../extendedTooltip/ExtendedTooltip.tsx       | 24 +++++++++++++++----
 3 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 20902aac..b4de9216 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@nordcloud/gnui",
   "description": "Nordcloud Design System - a collection of reusable React components used in Nordcloud's SaaS products",
-  "version": "8.9.1",
+  "version": "8.10.0",
   "license": "MIT",
   "repository": {
     "type": "git",
diff --git a/src/components/extendedTooltip/ExtendedTooltip.stories.mdx b/src/components/extendedTooltip/ExtendedTooltip.stories.mdx
index 8de59335..9d2ec81b 100644
--- a/src/components/extendedTooltip/ExtendedTooltip.stories.mdx
+++ b/src/components/extendedTooltip/ExtendedTooltip.stories.mdx
@@ -409,6 +409,21 @@ import { SVGIcon } from "../svgicon";
           <button type="button">Hover Me!</button>
         </ExtendedTooltip>
       </div>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+        }}
+      >
+        <span style={{ color: "purple", marginBottom: "2rem" }}>Accent</span>
+        <ExtendedTooltip
+          caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin."
+          status="accent"
+        >
+          <button type="button">Hover Me!</button>
+        </ExtendedTooltip>
+      </div>
     </div>
   </Story>
 </Canvas>
diff --git a/src/components/extendedTooltip/ExtendedTooltip.tsx b/src/components/extendedTooltip/ExtendedTooltip.tsx
index b35d025c..2093e5a9 100644
--- a/src/components/extendedTooltip/ExtendedTooltip.tsx
+++ b/src/components/extendedTooltip/ExtendedTooltip.tsx
@@ -11,7 +11,6 @@ import {
   Placement,
   Position,
 } from "../../utils/position";
-import { setColor } from "../../utils/setcolor";
 import { useTooltipHover } from "../tooltip/hooks";
 
 type Timeout = {
@@ -19,7 +18,7 @@ type Timeout = {
   hideTimeout?: number;
 };
 
-type Status = "danger" | "notification" | "success" | "warning";
+type Status = "accent" | "danger" | "notification" | "success" | "warning";
 
 export type ExtendedTooltipProps = Timeout & {
   caption: React.ReactNode;
@@ -171,10 +170,27 @@ const TooltipWrapper = styled.div<TooltipWrapperProps>`
 
 function getColor(status: Status) {
   return css`
-    background-color: ${setColor(status)};
+    background-color: ${changeStatus(status)};
     color: ${theme.color.text.text04};
     &:after {
-      border-top-color: ${setColor(status)};
+      border-top-color: ${changeStatus(status)};
     }
   `;
 }
+
+const changeStatus = (status?: Status) => {
+  switch (status) {
+    case "danger":
+      return theme.color.interactive.error;
+    case "warning":
+      return theme.color.interactive.warning;
+    case "success":
+      return theme.color.interactive.success;
+    case "notification":
+      return theme.color.interactive.info;
+    case "accent":
+      return theme.color.interactive.accent;
+    default:
+      return theme.color.interactive.primary;
+  }
+};