From bc4f57f0cccecafd159da86ebe1c98fd709b7382 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexander=20R=C3=B6sel?=
 <320272+Traxmaxx@users.noreply.github.com>
Date: Wed, 4 Oct 2023 13:10:59 +0200
Subject: [PATCH] fix: fix tooltip component positioning and add it to
 storybook

---
 .../components/explorer/DependencyGraph.tsx   |  2 +-
 .../components/tooltip/Tooltip.stories.tsx    | 67 +++++++++++++++++++
 dashboard/components/tooltip/Tooltip.tsx      | 20 ++++--
 3 files changed, 83 insertions(+), 6 deletions(-)
 create mode 100644 dashboard/components/tooltip/Tooltip.stories.tsx

diff --git a/dashboard/components/explorer/DependencyGraph.tsx b/dashboard/components/explorer/DependencyGraph.tsx
index 0b116759f..4c98ab025 100644
--- a/dashboard/components/explorer/DependencyGraph.tsx
+++ b/dashboard/components/explorer/DependencyGraph.tsx
@@ -151,7 +151,7 @@ const DependencyGraph = ({ data }: DependencyGraphProps) => {
         {data?.nodes?.length} Resources
         <div className="relative">
           <WarningIcon className="peer" height="16" width="16" />
-          <Tooltip top="sm" align="right" width="lg">
+          <Tooltip bottom="xs" align="left" width="lg">
             Only AWS resources are currently supported on the explorer.
           </Tooltip>
         </div>
diff --git a/dashboard/components/tooltip/Tooltip.stories.tsx b/dashboard/components/tooltip/Tooltip.stories.tsx
new file mode 100644
index 000000000..ffb727ba2
--- /dev/null
+++ b/dashboard/components/tooltip/Tooltip.stories.tsx
@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import WarningIcon from '@components/icons/WarningIcon';
+import Tooltip from './Tooltip';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof Tooltip> = {
+  title: 'Komiser/Tooltip',
+  component: Tooltip,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          // eslint-disable-next-line no-multi-str
+          'The tooltip component required to be wrapped inside an relative positioned container. There also need to be a trigger element which is required to have `className="peer"`!\
+          In this example the strigger element is the Info icon.\
+          The Storybook preview gives you an idea about possible parameters but might not work 100% because you should either define top **or** bottom, **not** both.\
+          To allow to show all possible options, we define both top, bottom and left, right in this example. Please keep this in mind!'
+      }
+    }
+  },
+  tags: ['autodocs'],
+  decorators: [
+    Story => (
+      <div className="flex h-96 items-center justify-center">
+        <div className="relative h-[16px] w-[16px]">
+          <WarningIcon className="peer" height="16" width="16" />
+          <Story />
+        </div>
+      </div>
+    )
+  ],
+  argTypes: {
+    top: {
+      control: {
+        type: 'inline-radio'
+      }
+    },
+    bottom: {
+      control: {
+        type: 'inline-radio'
+      }
+    },
+    align: {
+      control: {
+        type: 'inline-radio'
+      }
+    },
+    width: {
+      control: {
+        type: 'inline-radio'
+      }
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const TopTiny: Story = {
+  args: {
+    top: 'xs',
+    align: 'left',
+    width: 'lg',
+    children: "That's a tooltip"
+  }
+};
diff --git a/dashboard/components/tooltip/Tooltip.tsx b/dashboard/components/tooltip/Tooltip.tsx
index f66552cf2..7fdec818a 100644
--- a/dashboard/components/tooltip/Tooltip.tsx
+++ b/dashboard/components/tooltip/Tooltip.tsx
@@ -3,7 +3,8 @@ import { ReactNode } from 'react';
 
 type TooltipProps = {
   children: ReactNode;
-  top?: 'sm' | 'md' | 'lg';
+  top?: 'xs' | 'sm' | 'md' | 'lg';
+  bottom?: 'xs' | 'sm' | 'md' | 'lg';
   align?: 'left' | 'center' | 'right';
   width?: 'sm' | 'md' | 'lg';
 };
@@ -12,15 +13,24 @@ function Tooltip({
   children,
   top = 'md',
   align = 'left',
-  width = 'md'
+  width = 'md',
+  bottom
 }: TooltipProps) {
   return (
     <div
       role="tooltip"
       className={classNames(
-        'absolute left-6 top-24 z-[1000] hidden animate-fade-in-up items-center rounded-lg bg-black-900 px-4 py-2 text-xs font-medium text-black-200 opacity-0 peer-hover:flex',
-        { 'top-[3rem]': top === 'sm' },
-        { 'left-auto right-0': align === 'right' },
+        'absolute z-[1000] hidden animate-fade-in-up items-center rounded-lg bg-black-900 px-4 py-2 text-xs font-medium text-black-200 opacity-0 peer-hover:flex',
+        { 'top-0': top === 'xs' && !bottom },
+        { 'top-[3rem]': top === 'sm' && !bottom },
+        { 'top-24': top === 'md' && !bottom },
+        { 'top-36': top === 'lg' && !bottom },
+        { 'bottom-0': bottom === 'xs' },
+        { 'bottom-[3rem]': bottom === 'sm' },
+        { 'bottom-24': bottom === 'md' },
+        { 'bottom-36': bottom === 'lg' },
+        { 'left-6': align === 'left' },
+        { 'right-6': align === 'right' },
         { 'w-72': width === 'lg' }
       )}
     >