@dxc-technology/halstack-react 0.0.0-2c43bcf → 0.0.0-2c7db3b

package/tooltip/Tooltip.stories.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import DxcTooltip from "./Tooltip";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import DxcButton from "../button/Button";
+import { userEvent, within } from "@storybook/test";
+import DxcInset from "../inset/Inset";
+import Title from "../../.storybook/components/Title";
+import DxcFlex from "../flex/Flex";
+
+export default {
+  title: "Tooltip",
+  component: DxcTooltip,
+};
+
+const Tooltip = () => (
+  <>
+    <Title title="Default tooltip" theme="light" level={4} />
+    <ExampleContainer>
+      <DxcInset bottom="3rem">
+        <DxcTooltip label="Tooltip Test">
+          <DxcButton label="Hoverable button" />
+        </DxcTooltip>
+      </DxcInset>
+    </ExampleContainer>
+  </>
+);
+
+const LargeTextWithinTooltip = () => (
+  <>
+    <Title title="Multiple line tooltip" theme="light" level={4} />
+    <ExampleContainer>
+      <DxcInset bottom="5rem" left="1rem">
+        <DxcTooltip label="Tooltip Test with a large text to display in the container while hovering the component">
+          <DxcButton label="Hoverable button" />
+        </DxcTooltip>
+      </DxcInset>
+    </ExampleContainer>
+  </>
+);
+
+const TopTooltip = () => (
+  <>
+    <Title title="Top tooltip" theme="light" level={4} />
+    <ExampleContainer>
+      <DxcInset top="3rem">
+        <DxcTooltip label="Tooltip Test" position="top">
+          <DxcButton label="Hoverable button" />
+        </DxcTooltip>
+      </DxcInset>
+    </ExampleContainer>
+  </>
+);
+
+const LeftTooltip = () => (
+  <>
+    <Title title="Left tooltip" theme="light" level={4} />
+    <ExampleContainer>
+      <DxcFlex justifyContent="center">
+        <DxcTooltip label="Tooltip Test" position="left">
+          <DxcButton label="Hoverable button" />
+        </DxcTooltip>
+      </DxcFlex>
+    </ExampleContainer>
+  </>
+);
+
+const RightTooltip = () => (
+  <>
+    <Title title="Right tooltip" theme="light" level={4} />
+    <ExampleContainer>
+      <DxcTooltip label="Tooltip Test" position="right">
+        <DxcButton label="Hoverable button" />
+      </DxcTooltip>
+    </ExampleContainer>
+  </>
+);
+
+export const Chromatic = Tooltip.bind({});
+Chromatic.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const buttonList = canvas.getByRole("button");
+  await userEvent.hover(buttonList);
+};
+
+export const LargeTextTooltip = LargeTextWithinTooltip.bind({});
+LargeTextTooltip.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const buttonList = canvas.getByRole("button");
+  await userEvent.hover(buttonList);
+};
+
+export const TooltipPositionTop = TopTooltip.bind({});
+TooltipPositionTop.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const buttonList = canvas.getByRole("button");
+  await userEvent.hover(buttonList);
+};
+
+export const TooltipPositionLeft = LeftTooltip.bind({});
+TooltipPositionLeft.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const buttonList = canvas.getByRole("button");
+  await userEvent.hover(buttonList);
+};
+
+export const TooltipPositionRight = RightTooltip.bind({});
+TooltipPositionRight.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const buttonList = canvas.getByRole("button");
+  await userEvent.hover(buttonList);
+};

package/tooltip/Tooltip.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/tooltip/Tooltip.test.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _Tooltip = _interopRequireDefault(require("./Tooltip"));
+var _Button = _interopRequireDefault(require("../button/Button"));
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+require("@testing-library/jest-dom");
+global.globalThis = global;
+global.DOMRect = {
+  fromRect: function fromRect() {
+    return {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0,
+      x: 0,
+      y: 0
+    };
+  }
+};
+global.ResizeObserver = /*#__PURE__*/function () {
+  function ResizeObserver() {
+    (0, _classCallCheck2["default"])(this, ResizeObserver);
+  }
+  return (0, _createClass2["default"])(ResizeObserver, [{
+    key: "observe",
+    value: function observe() {}
+  }, {
+    key: "unobserve",
+    value: function unobserve() {}
+  }, {
+    key: "disconnect",
+    value: function disconnect() {}
+  }]);
+}();
+describe("Tooltip component tests", function () {
+  test("Tooltip does not render by default", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, queryByRole;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+            label: "Tooltip Test"
+          }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+            label: "Hoverable button"
+          }))), queryByRole = _render.queryByRole;
+          _context.next = 3;
+          return (0, _react2.waitFor)(function () {
+            var tooltipElement = queryByRole("tooltip");
+            expect(tooltipElement).toBeFalsy();
+          });
+        case 3:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  test("Tooltip renders with correct label on hover", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render2, getByText, triggerElement;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+            label: "Tooltip Test"
+          }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+            label: "Hoverable button"
+          }))), getByText = _render2.getByText;
+          triggerElement = getByText("Hoverable button");
+          _userEvent["default"].hover(triggerElement);
+          _context2.next = 5;
+          return _react2.screen.findByRole("tooltip", {
+            name: "Tooltip Test"
+          });
+        case 5:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+  test("Tooltip stops being rendered when hover is stopped", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    var _render3, getByText, queryByRole, triggerElement;
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+            label: "Tooltip Test"
+          }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+            label: "Hoverable button"
+          }))), getByText = _render3.getByText, queryByRole = _render3.queryByRole;
+          triggerElement = getByText("Hoverable button");
+          _userEvent["default"].hover(triggerElement);
+          _userEvent["default"].unhover(triggerElement);
+          _context3.next = 6;
+          return (0, _react2.waitFor)(function () {
+            var tooltipElement = queryByRole("tooltip");
+            expect(tooltipElement).toBeFalsy();
+          });
+        case 6:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })));
+});

package/tooltip/types.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+type Props = {
+    /**
+     * Preferred position for displaying the tooltip. It may adjust automatically based on available space.
+     */
+    position?: "bottom" | "top" | "left" | "right";
+    /**
+     * Text to be displayed inside the tooltip.
+     */
+    label: string;
+    /**
+     * Content in which the Tooltip will be displayed.
+     */
+    children: React.ReactNode;
+};
+export default Props;

package/tooltip/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/useTheme.d.ts

@@ -217,6 +217,29 @@ declare const useTheme: () => {
         focusBorderThickness: string;
         focusBorderRadius: string;
     }>;
+    contextualMenu?: Partial<{
+        fontFamily: string;
+        backgroundColor: string;
+        borderColor: string;
+        menuItemFontColor: string;
+        menuItemFontSize: string;
+        menuItemFontStyle: string;
+        menuItemFontWeight: string;
+        menuItemLineHeight: string;
+        hoverMenuItemBackgroundColor: string;
+        activeMenuItemBackgroundColor: string;
+        selectedMenuItemBackgroundColor: string;
+        hoverSelectedMenuItemBackgroundColor: string;
+        activeSelectedMenuItemBackgroundColor: string;
+        selectedMenuItemFontWeight: string;
+        sectionTitleFontColor: string;
+        sectionTitleFontSize: string;
+        sectionTitleFontStyle: string;
+        sectionTitleFontWeight: string;
+        sectionTitleLineHeight: string;
+        iconColor: string;
+        iconSize: string;
+    }>;
     dateInput?: Partial<{
         pickerBackgroundColor: string;
         pickerFontColor: string;