@madie/madie-design-system 1.2.7 → 1.2.8

package/storybook-static/project.json

@@ -1 +1 @@
-{"generatedAt":1705597535482,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"9.8.0"},"storybookVersion":"6.5.16","language":"javascript","storybookPackages":{"@storybook/addons":{"version":"6.5.15"},"@storybook/builder-webpack5":{"version":"6.5.15"},"@storybook/manager-webpack5":{"version":"6.5.15"},"@storybook/react":{"version":"6.5.16"}},"framework":{"name":"react"},"addons":{"@storybook/addon-actions":{"version":"6.5.15"},"@storybook/addon-links":{"version":"6.5.15"},"@storybook/addon-storysource":{"version":"6.5.15"},"@storybook/addon-knobs":{"version":"6.4.0"},"@storybook/addon-a11y":{"version":"6.5.15"},"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-backgrounds":{"version":"6.5.15"},"@storybook/addon-viewport":{"version":"6.5.15"},"@storybook/addon-postcss":{"version":"2.0.0"}}}
+{"generatedAt":1706120305844,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"9.8.0"},"storybookVersion":"6.5.16","language":"javascript","storybookPackages":{"@storybook/addons":{"version":"6.5.15"},"@storybook/builder-webpack5":{"version":"6.5.15"},"@storybook/manager-webpack5":{"version":"6.5.15"},"@storybook/react":{"version":"6.5.16"}},"framework":{"name":"react"},"addons":{"@storybook/addon-actions":{"version":"6.5.15"},"@storybook/addon-links":{"version":"6.5.15"},"@storybook/addon-storysource":{"version":"6.5.15"},"@storybook/addon-knobs":{"version":"6.4.0"},"@storybook/addon-a11y":{"version":"6.5.15"},"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-backgrounds":{"version":"6.5.15"},"@storybook/addon-viewport":{"version":"6.5.15"},"@storybook/addon-postcss":{"version":"2.0.0"}}}

package/styles/_qpp-style.scss

@@ -15,6 +15,7 @@
 @import 'components/madie-discard-dialog';
 @import 'components/madie-delete-dialog';
 @import 'components/madie-alert';
+@import 'components/madie-tooltip';
 @import 'components/text-field-variable';
 @import 'components/pie-chart';
 @import 'components/score-chart';

package/styles/components/_madie-tooltip.scss

@@ -0,0 +1,63 @@
+@import '../../styles/qppds/settings/index';
+
+.madie-tooltip-button {
+    padding: 0;
+    background-color: transparent;
+    border:none;
+    display: flex;
+    flex-direction: row;
+    height: 14px;
+    align-self: flex-end;
+    margin-right: 1px;
+    margin-left: 4px;
+    margin-bottom: -1px;
+    position: relative;
+    overflow: visible;
+    
+    &:focus {
+        outline-color: $cyan-50
+    }
+
+    > svg {
+        display: flex;
+        align-self: center;
+    }
+
+    > .madie-tooltip {
+        z-index: 1;
+        border-radius: 4px;
+        color: #fff;
+        background: $grey-80;
+        max-width: 250px;
+        min-width: 250px;
+        width: max-content;
+        padding: 8px 16px;
+        position: absolute;
+        top: 24px;
+        overflow: visible;
+        left: -125px;
+
+        &.hidden {
+            visibility: hidden;
+        }
+
+        > p {
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 400;
+            margin: 0;
+        }
+
+        &:after {
+            content: "";
+            position: absolute;
+            top: -8px;
+            height: 16px;
+            width: 16px;
+            background-color: $grey-80;
+            rotate: 45deg;
+            left: calc(50% - 1px)
+        }
+    }
+}
+

package/styles/qppds/components/_madie-tooltip.scss

@@ -0,0 +1,63 @@
+@import '../settings/index';
+
+.madie-tooltip-button {
+    padding: 0;
+    background-color: transparent;
+    border:none;
+    display: flex;
+    flex-direction: row;
+    height: 14px;
+    align-self: flex-end;
+    margin-right: 1px;
+    margin-left: 4px;
+    margin-bottom: -1px;
+    position: relative;
+    overflow: visible;
+    
+    &:focus {
+        outline-color: $cyan-50
+    }
+
+    > svg {
+        display: flex;
+        align-self: center;
+    }
+
+    > .madie-tooltip {
+        z-index: 1;
+        border-radius: 4px;
+        color: #fff;
+        background: $grey-80;
+        max-width: 250px;
+        min-width: 250px;
+        width: max-content;
+        padding: 8px 16px;
+        position: absolute;
+        top: 24px;
+        overflow: visible;
+        left: -125px;
+
+        &.hidden {
+            visibility: hidden;
+        }
+
+        > p {
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 400;
+            margin: 0;
+        }
+
+        &:after {
+            content: "";
+            position: absolute;
+            top: -8px;
+            height: 16px;
+            width: 16px;
+            background-color: $grey-80;
+            rotate: 45deg;
+            left: calc(50% - 1px)
+        }
+    }
+}
+

package/styles/qppds/components/index.scss

@@ -1,6 +1,7 @@
 @import './link';
 @import './madie-discard-dialog';
 @import './madie-delete-dialog';
+@import './madie-tooltip';
 @import './madie-alert';
 @import './button';
 @import './dropdown';

package/styles/qppds/settings/variables/_color.scss

@@ -26,6 +26,8 @@ $red-10: #fde7ea;
 $red-50: #d92f2f;
 $red-60: #ae1c1c;
 
+$grey-80: #333;
+
 $gray-02: #fafafa;
 $gray-04: #f7f7f7;
 $gray-10: #dddddd;

package/test/components/TextField.test.js

@@ -2,7 +2,7 @@ import "@testing-library/jest-dom";
 import { describe, expect, test } from "@jest/globals";
 import TextField from "../../components/TextField/index";
 import { act, Simulate } from "react-dom/test-utils";
-import { render } from "@testing-library/react";
+import { findByTestId, render, fireEvent } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import * as React from "react";
@@ -83,4 +83,58 @@ describe("TextField", () => {
             expect(helperText).toBeInTheDocument();
         });
     });
+
+    test("tooltip text renders, can be seen and removed.", async () => {
+        await act(async () => {
+            const { getByTestId, findByTestId, getByText } = render(
+                <TextField
+                    placeholder="test Name"
+                    helperText="helper text"
+                    label="test Name"
+                    id="testName"
+                    tooltipText="tooltip text"
+                    inputProps={{ "data-testid": "test-name-input" }}
+                    data-testid="test-name-text-field"
+                    size="small"
+                />
+            );
+            const tooltipTrigger = await findByTestId("testName-tooltip-button")
+
+            // click and escape
+            act(() => {
+                fireEvent.click(tooltipTrigger);
+            })
+            expect(getByText("tooltip text")).toBeInTheDocument();
+            act(() => {
+                fireEvent.keyDown(getByText(/tooltip text/i), {
+                    key: "Escape",
+                    code: "Escape",
+                    keyCode: 27,
+                    charCode: 27
+              });
+            })
+            expect(getByTestId("testName-tooltip")).toHaveClass("hidden")
+
+            // enter and leave
+            act(() => {
+                fireEvent.mouseEnter(getByTestId("testName-tooltip-button"));
+            })
+            expect(getByTestId("testName-tooltip")).not.toHaveClass("hidden")
+            act(() => {
+                fireEvent.mouseLeave(getByTestId("testName-tooltip-button"));
+            })
+            expect(getByTestId("testName-tooltip")).toHaveClass("hidden")
+
+            // focus, blur
+            act(() => {
+                fireEvent.focus(getByTestId("testName-tooltip-button"));
+            })
+            expect(getByTestId("testName-tooltip")).not.toHaveClass("hidden")
+
+            act(() => {
+                fireEvent.blur(getByTestId("testName-tooltip-button"));
+            })
+            expect(getByTestId("testName-tooltip")).toHaveClass("hidden")
+        });
+    });
 });