Extend tooltip color (#613)

Author: raczyk

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",

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>

src/components/extendedTooltip/ExtendedTooltip.tsx

@@ -11,15 +11,14 @@ import {
   Placement,
   Position,
 } from "../../utils/position";
-import { setColor } from "../../utils/setcolor";
 import { useTooltipHover } from "../tooltip/hooks";
 
 type Timeout = {
   showTimeout?: number;
   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;
+  }
+};