npm - @designcrowd/fe-shared-lib - Versions diffs - 1.6.0-eng-4039 → 1.6.1 - Mend

@designcrowd/fe-shared-lib 1.6.0-eng-4039 → 1.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (710) hide show

package/src/atoms/components/Tooltip/Tooltip.stories.js CHANGED Viewed

@@ -1,493 +1,493 @@
-import Tooltip from './Tooltip.vue';
-export default {
-  title: 'Components/Tooltip',
-  component: Tooltip,
-};
-export const DirectionsAndAlignments = () => {
-  return {
-    components: {
-      Tooltip,
-    },
-    template: `
-      <table class="tw-w-full">
-        <thead>
-          <tr>
-            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Tooltip</th>
-            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans" colspan="2">Directions</th>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="bottom">
-                <template v-slot:open>I am a tooltip on the bottom!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="bottom"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip direction="right">
-                <template v-slot:open>I am a tooltip on the right!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-right tw-p-4">
-              <Tooltip direction="left">
-                <template v-slot:open>I am a tooltip on the left!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="left"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="top">
-                <template v-slot:open>I am a tooltip on the top!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="top"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr>
-            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans" colspan="2">Alignments</th>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="bottom" alignment="left">
-                <template v-slot:open>I am a tooltip on the bottom, aligned to the left!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="bottom" alignment="left"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="bottom" alignment="right">
-                <template v-slot:open>I am a tooltip on the bottom, aligned to the right!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="bottom" alignment="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="bottom" alignment="center">
-                <template v-slot:open>I am a tooltip on the bottom, aligned to the center!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="bottom" alignment="center"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip direction="right" alignment="top">
-                <template v-slot:open>I am a tooltip on the right, aligned to the top!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="right" alignment="top"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip direction="right" alignment="bottom">
-                <template v-slot:open>I am a tooltip on the right, aligned to the bottom!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="right" alignment="bottom"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip direction="right" alignment="middle">
-                <template v-slot:open>I am a tooltip on the right, aligned to the middle!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="right" alignment="middle"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-right tw-p-4">
-              <Tooltip direction="left" alignment="top">
-                <template v-slot:open>I am a tooltip on the left, aligned to the top!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="left" alignment="top"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-right tw-p-4">
-              <Tooltip direction="left" alignment="bottom">
-                <template v-slot:open>I am a tooltip on the left, aligned to the bottom!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="left" alignment="bottom"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-right tw-p-4">
-              <Tooltip direction="left" alignment="middle">
-                <template v-slot:open>I am a tooltip on the left, aligned to the middle!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="left" alignment="middle"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="top" alignment="left">
-                <template v-slot:open>I am a tooltip on the top, aligned to the left!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="top" alignment="left"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="top" alignment="right">
-                <template v-slot:open>I am a tooltip on the top, aligned to the right!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="top" alignment="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="top" alignment="center">
-                <template v-slot:open>I am a tooltip on the top, aligned to the center!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="top" alignment="center"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    `,
-  };
-};
-export const Colors = () => {
-  return {
-    components: {
-      Tooltip,
-    },
-    template: `
-      <table class="tw-w-full">
-        <thead>
-          <tr>
-            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Tooltip</th>
-            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip color="info-500" direction="right">
-                <template v-slot:open>I am an info tooltip!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip color="info-500" direction="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip color="secondary-500" direction="right">
-                <template v-slot:open>I am an secondary tooltip!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip color="secondary-500" direction="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip color="success-500" direction="right">
-                <template v-slot:open>I am an success tooltip!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip color="success-500" direction="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip color="warning-500" direction="right">
-                <template v-slot:open>I am an warning tooltip!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip color="warning-500" direction="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip color="error-500" direction="right">
-                <template v-slot:open>I am an error tooltip!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip color="error-500" direction="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    `,
-  };
-};
+import Tooltip from './Tooltip.vue';
+export default {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+};
+export const DirectionsAndAlignments = () => {
+  return {
+    components: {
+      Tooltip,
+    },
+    template: `
+      <table class="tw-w-full">
+        <thead>
+          <tr>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Tooltip</th>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans" colspan="2">Directions</th>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-text-center tw-p-4">
+              <Tooltip direction="bottom">
+                <template v-slot:open>I am a tooltip on the bottom!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="bottom"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4">
+              <Tooltip direction="right">
+                <template v-slot:open>I am a tooltip on the right!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="right"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-text-right tw-p-4">
+              <Tooltip direction="left">
+                <template v-slot:open>I am a tooltip on the left!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="left"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-text-center tw-p-4">
+              <Tooltip direction="top">
+                <template v-slot:open>I am a tooltip on the top!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="top"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans" colspan="2">Alignments</th>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-text-center tw-p-4">
+              <Tooltip direction="bottom" alignment="left">
+                <template v-slot:open>I am a tooltip on the bottom, aligned to the left!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="bottom" alignment="left"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-text-center tw-p-4">
+              <Tooltip direction="bottom" alignment="right">
+                <template v-slot:open>I am a tooltip on the bottom, aligned to the right!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="bottom" alignment="right"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-text-center tw-p-4">
+              <Tooltip direction="bottom" alignment="center">
+                <template v-slot:open>I am a tooltip on the bottom, aligned to the center!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="bottom" alignment="center"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4">
+              <Tooltip direction="right" alignment="top">
+                <template v-slot:open>I am a tooltip on the right, aligned to the top!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="right" alignment="top"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4">
+              <Tooltip direction="right" alignment="bottom">
+                <template v-slot:open>I am a tooltip on the right, aligned to the bottom!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="right" alignment="bottom"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4">
+              <Tooltip direction="right" alignment="middle">
+                <template v-slot:open>I am a tooltip on the right, aligned to the middle!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="right" alignment="middle"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-text-right tw-p-4">
+              <Tooltip direction="left" alignment="top">
+                <template v-slot:open>I am a tooltip on the left, aligned to the top!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="left" alignment="top"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-text-right tw-p-4">
+              <Tooltip direction="left" alignment="bottom">
+                <template v-slot:open>I am a tooltip on the left, aligned to the bottom!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="left" alignment="bottom"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-text-right tw-p-4">
+              <Tooltip direction="left" alignment="middle">
+                <template v-slot:open>I am a tooltip on the left, aligned to the middle!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="left" alignment="middle"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-text-center tw-p-4">
+              <Tooltip direction="top" alignment="left">
+                <template v-slot:open>I am a tooltip on the top, aligned to the left!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="top" alignment="left"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-text-center tw-p-4">
+              <Tooltip direction="top" alignment="right">
+                <template v-slot:open>I am a tooltip on the top, aligned to the right!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="top" alignment="right"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-text-center tw-p-4">
+              <Tooltip direction="top" alignment="center">
+                <template v-slot:open>I am a tooltip on the top, aligned to the center!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="top" alignment="center"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    `,
+  };
+};
+export const Colors = () => {
+  return {
+    components: {
+      Tooltip,
+    },
+    template: `
+      <table class="tw-w-full">
+        <thead>
+          <tr>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Tooltip</th>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4">
+              <Tooltip color="info-500" direction="right">
+                <template v-slot:open>I am an info tooltip!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip color="info-500" direction="right"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4">
+              <Tooltip color="secondary-500" direction="right">
+                <template v-slot:open>I am an secondary tooltip!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip color="secondary-500" direction="right"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4">
+              <Tooltip color="success-500" direction="right">
+                <template v-slot:open>I am an success tooltip!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip color="success-500" direction="right"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4">
+              <Tooltip color="warning-500" direction="right">
+                <template v-slot:open>I am an warning tooltip!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip color="warning-500" direction="right"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4">
+              <Tooltip color="error-500" direction="right">
+                <template v-slot:open>I am an error tooltip!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip color="error-500" direction="right"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    `,
+  };
+};