refactor(tooltip): use showWarningIfFirstOccurence to handle tooltip warnings (#314)

Author: masoudmanson

src/common/warnings.ts

@@ -3,6 +3,9 @@ export enum SDSWarningTypes {
   ChipDeprecated = "chipDeprecated",
   MenuSelectDeprecated = "menuSelectDeprecated",
   ButtonIconMediumSize = "buttonIconMediumSize",
+  TooltipSubtitle = "tooltipSubtitle",
+  TooltipWidth = "tooltipWidth",
+  TooltipInverted = "tooltipInverted",
 }
 
 const SDS_WARNINGS = {
@@ -24,6 +27,20 @@ const SDS_WARNINGS = {
     hasWarned: false,
     message: "Warning: A medium size ButtonIcon can only be of type tertiary!",
   },
+  [SDSWarningTypes.TooltipSubtitle]: {
+    hasWarned: false,
+    message:
+      "Warning: The 'subtitle' text is only available for dark tooltips!",
+  },
+  [SDSWarningTypes.TooltipWidth]: {
+    hasWarned: false,
+    message: "Warning: The 'wide' width is only available for light tooltips!",
+  },
+  [SDSWarningTypes.TooltipInverted]: {
+    hasWarned: false,
+    message:
+      "Warning: Tooltips using the inverted prop will be deprecated. Please use sdsStyle: 'dark' | 'light' instead!",
+  },
 };
 
 export const showWarningIfFirstOccurence = (warningType: SDSWarningTypes) => {

src/core/Tooltip/index.tsx

@@ -5,6 +5,10 @@ import {
 } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import React, { forwardRef } from "react";
+import {
+  SDSWarningTypes,
+  showWarningIfFirstOccurence,
+} from "src/common/warnings";
 import {
   arrowCss,
   StyledPopper,
@@ -43,24 +47,15 @@ const Tooltip = forwardRef(function Tooltip(
   const { children } = rest;
 
   if (inverted) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      "Warning: Tooltips using the inverted prop will be deprecated. Please use sdsStyle: 'dark' | 'light' instead."
-    );
+    showWarningIfFirstOccurence(SDSWarningTypes.TooltipInverted);
   }
 
   if (width === "wide" && sdsStyle === "dark") {
-    // eslint-disable-next-line no-console
-    console.warn(
-      "Warning: The 'wide' width is only available for light tooltips."
-    );
+    showWarningIfFirstOccurence(SDSWarningTypes.TooltipWidth);
   }
 
   if (subtitle && sdsStyle === "light") {
-    // eslint-disable-next-line no-console
-    console.warn(
-      "Warning: The 'subtitle' text is only available for dark tooltips."
-    );
+    showWarningIfFirstOccurence(SDSWarningTypes.TooltipSubtitle);
   }
 
   const theme = useTheme();