chore(tooltip.tsx): add property borderColor (#618)

* chore(tooltip.tsx): add property borderColor
* chore(tooltip.tsx): apply borderColor to arrow

Author: maryxan

src/components/Tooltip/Tooltip.stories.tsx

@@ -59,3 +59,12 @@ WithNoArrow.args = {
   as: "div",
   showArrow: false,
 };
+
+export const WithBorderColor = Default.bind({});
+
+WithBorderColor.args = {
+  placement: "top",
+  content: "This is a tooltip with a border color",
+  as: "div",
+  borderColor: "red",
+};

src/components/Tooltip/Tooltip.tsx

@@ -31,6 +31,7 @@ export type TooltipProps = TippyProps & {
   content: TippyProps["content"];
   maxWidth?: number;
   showArrow?: boolean;
+  borderColor?: string;
 };
 
 const Tooltip: FC<TooltipProps> = ({
@@ -42,6 +43,7 @@ const Tooltip: FC<TooltipProps> = ({
   maxWidth = 350,
   interactive = true,
   showArrow = true,
+  borderColor,
   ...rest
 }) => {
   const Tag = as;
@@ -59,7 +61,7 @@ const Tooltip: FC<TooltipProps> = ({
         <div
           className="tooltip"
           role="alert"
-          css={(theme) => tooltipContainer(maxWidth, theme)}
+          css={(theme) => tooltipContainer(maxWidth, theme, borderColor)}
           {...attrs}
         >
           {content}

src/components/Tooltip/styles.ts

@@ -3,11 +3,12 @@ import { css, Theme, SerializedStyles } from "@emotion/react";
 export const tooltipContainer = (
   maxWidth: number,
   { typeScaleSizes, tooltip }: Theme,
+  borderColor?: string,
 ): SerializedStyles => {
   return css`
     max-width: ${maxWidth}px;
     background: ${tooltip.background};
-    border: 1px solid ${tooltip.border};
+    border: 1px solid ${borderColor || tooltip.border};
     border-radius: 5px;
     color: ${tooltip.color};
     padding: 0.5rem;
@@ -44,7 +45,7 @@ export const tooltipContainer = (
     #arrow::before {
       content: "";
       transform: rotate(45deg);
-      background: ${tooltip.border};
+      background: ${borderColor || tooltip.border};
     }
   `;
 };