feat: pr comments

Orfium · Oct 11, 2023 · 0b9e221 · 0b9e221
1 parent 1d1e757
commit 0b9e221
Show file tree

Hide file tree

Showing 3 changed files with 137 additions and 14 deletions.
diff --git a/src/components/Tooltip/Tooltip.stories.mdx b/src/components/Tooltip/Tooltip.stories.mdx
@@ -1,6 +1,7 @@
 import { Meta, Story, Preview, Props } from '@storybook/addon-docs';
 import { text, number, select, boolean, withKnobs } from '@storybook/addon-knobs';
 import Tooltip from './Tooltip';
+import { hoverOnTooltips } from './utils';
 import Stack from '../storyUtils/Stack';
 import TooltipShowcase from '../storyUtils/TooltipShowcase';
 import { FIGMA_URL, Function } from '../../utils/common';
@@ -55,7 +56,7 @@ Tooltips provide brief, helpful information when a user hovers or focuses on the
 Text Tooltip takes a string as a content prop. There are 2 variations of Text Tooltips, default and inverted.
 
 <Preview>
-  <Story name="Text Tooltip">
+  <Story name="Text Tooltip" play={hoverOnTooltips} autoPlay>
     <Stack>
       <Function>
         {() => {
@@ -90,7 +91,7 @@ Text Tooltip takes a string as a content prop. There are 2 variations of Text To
 Interactive Tooltip takes a React Component as a content prop. There are 2 variations of Text Tooltips, default and inverted.
 
 <Preview>
-  <Story name="Interactive Tooltip">
+  <Story name="Interactive Tooltip" play={hoverOnTooltips} autoPlay>
     <Stack>
       <TooltipShowcase />
     </Stack>
@@ -105,26 +106,33 @@ Interactive Tooltip takes a React Component as a content prop. There are 2 varia
 Tooltip can be placed to the top, bottom, left or right of the element.
 
 <Preview>
-  <Story name="Tooltip Placement" parameters={{ decorators: [withKnobs] }}>
+  <Story name="Tooltip Placement" play={hoverOnTooltips} autoPlay>
     <Stack>
       <Function>
         {() => {
           return (
             <div
               style={{
-                padding: '16px',
-                width: '300px',
+                padding: '48px 72px',
+                width: '600px',
+                gap: '32px',
                 height: '100px',
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
               }}
             >
-              <Tooltip
-                content={'This is a Tooltip'}
-                placement={select('placement', ['top', 'right', 'bottom', 'left'], 'right')}
-              >
-                <Button>Hover here</Button>
+              <Tooltip content={'This is a Tooltip'} placement={'left'}>
+                <Button>Left Tooltip</Button>
+              </Tooltip>
+              <Tooltip content={'This is a Tooltip'} placement={'top'}>
+                <Button>Top Tooltip</Button>
+              </Tooltip>
+              <Tooltip content={'This is a Tooltip'} placement={'bottom'}>
+                <Button>Bottom Tooltip</Button>
+              </Tooltip>
+              <Tooltip content={'This is a Tooltip'} placement={'right'}>
+                <Button>Right Tooltip</Button>
               </Tooltip>
             </div>
           );
@@ -137,7 +145,7 @@ Tooltip can be placed to the top, bottom, left or right of the element.
 ### Playground
 
 <Preview>
-  <Story name="Playground" parameters={{ decorators: [withKnobs] }}>
+  <Story name="Playground" parameters={{ decorators: [withKnobs] }} play={hoverOnTooltips} autoPlay>
     <Stack>
       <Function>
         {() => {

diff --git a/src/components/Tooltip/__snapshots__/Tooltip.stories.storyshot b/src/components/Tooltip/__snapshots__/Tooltip.stories.storyshot
@@ -1114,13 +1114,119 @@ exports[`Storyshots Design System/Tooltip Tooltip Placement 1`] = `
             Object {
               "alignItems": "center",
               "display": "flex",
+              "gap": "32px",
               "height": "100px",
               "justifyContent": "center",
-              "padding": "16px",
-              "width": "300px",
+              "padding": "48px 72px",
+              "width": "600px",
             }
           }
         >
+          <div
+            arrow={true}
+            className="emotion-3"
+            delay={
+              Array [
+                500,
+                500,
+              ]
+            }
+            interactive={false}
+            placement="left"
+          >
+            <div
+              className="emotion-4"
+            >
+              <button
+                className="emotion-5"
+                data-testid="button"
+                disabled={false}
+                onClick={[Function]}
+                type="button"
+              >
+                <span
+                  className="emotion-6"
+                >
+                  <span>
+                    Left Tooltip
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+          <div>
+            This is a Tooltip
+          </div>
+          <div
+            arrow={true}
+            className="emotion-3"
+            delay={
+              Array [
+                500,
+                500,
+              ]
+            }
+            interactive={false}
+            placement="top"
+          >
+            <div
+              className="emotion-4"
+            >
+              <button
+                className="emotion-5"
+                data-testid="button"
+                disabled={false}
+                onClick={[Function]}
+                type="button"
+              >
+                <span
+                  className="emotion-6"
+                >
+                  <span>
+                    Top Tooltip
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+          <div>
+            This is a Tooltip
+          </div>
+          <div
+            arrow={true}
+            className="emotion-3"
+            delay={
+              Array [
+                500,
+                500,
+              ]
+            }
+            interactive={false}
+            placement="bottom"
+          >
+            <div
+              className="emotion-4"
+            >
+              <button
+                className="emotion-5"
+                data-testid="button"
+                disabled={false}
+                onClick={[Function]}
+                type="button"
+              >
+                <span
+                  className="emotion-6"
+                >
+                  <span>
+                    Bottom Tooltip
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+          <div>
+            This is a Tooltip
+          </div>
           <div
             arrow={true}
             className="emotion-3"
@@ -1147,7 +1253,7 @@ exports[`Storyshots Design System/Tooltip Tooltip Placement 1`] = `
                   className="emotion-6"
                 >
                   <span>
-                    Hover here
+                    Right Tooltip
                   </span>
                 </span>
               </button>

diff --git a/src/components/Tooltip/utils.ts b/src/components/Tooltip/utils.ts
@@ -0,0 +1,9 @@
+import { fireEvent, screen } from '@testing-library/react';
+
+export const hoverOnTooltips = async () => {
+  const buttons = screen.getAllByTestId('button');
+
+  buttons.forEach((button) => {
+    fireEvent.focus(button);
+  });
+};