@dxc-technology/halstack-react 12.1.0 → 12.2.0

package/resultset-table/ResultsetTable.test.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _ResultsetTable = _interopRequireDefault(require("./ResultsetTable"));
+var _Checkbox = _interopRequireDefault(require("../checkbox/Checkbox"));
 // Mocking DOMRect for Radix Primitive Popover
 global.globalThis = global;
 global.DOMRect = {
@@ -151,36 +152,55 @@ var rows = [[{
   displayValue: "Barcelona",
   sortValue: "Barcelona"
 }]];
-var rows2 = [[{
-  displayValue: "546",
-  sortValue: "465"
+var columnsWithCheckbox = [{
+  displayValue: "Id",
+  isSortable: true
+}, {
+  displayValue: "Checkbox",
+  isSortable: false
 }, {
-  displayValue: "OtherValue",
-  sortValue: "OtherValue"
+  displayValue: "Name",
+  isSortable: false
 }, {
-  displayValue: "OtherValue",
-  sortValue: "OtherValue"
+  displayValue: "City",
+  isSortable: false
+}];
+var rowsWithCheckbox = [[{
+  displayValue: "001",
+  sortValue: "001"
+}, {
+  displayValue: /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+    size: "fillParent",
+    defaultChecked: true
+  })
+}, {
+  displayValue: "Peter"
+}, {
+  displayValue: "Miami"
 }], [{
-  displayValue: "978",
-  sortValue: "465"
+  displayValue: "002",
+  sortValue: "002"
 }, {
-  displayValue: "OtherValue",
-  sortValue: "OtherValue"
+  displayValue: /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+    size: "fillParent"
+  })
 }, {
-  displayValue: "OtherValue",
-  sortValue: "OtherValue"
+  displayValue: "Louis"
 }, {
-  displayValue: ""
+  displayValue: "London"
 }], [{
-  displayValue: "678",
-  sortValue: "344"
+  displayValue: "003",
+  sortValue: "003"
+}, {
+  displayValue: /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+    size: "fillParent"
+  })
 }, {
-  displayValue: "OtherValue",
-  sortValue: "OtherValue"
+  displayValue: "Lana"
 }, {
-  displayValue: "OtherValue",
-  sortValue: "OtherValue"
+  displayValue: "Amsterdam"
 }]];
+var rows2 = [].concat(rows).slice(0, -1);
 describe("Resultset table component tests", function () {
   test("Resultset table rendered correctly", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
@@ -284,42 +304,93 @@ describe("Resultset table component tests", function () {
     expect(component.queryByText("Tina")).toBeTruthy();
     expect(component.queryByText("Cosmin")).not.toBeTruthy();
   });
-  test("Resultset table change rows should go to first page", function () {
+  test("Resultset table should go one page back when removing the last page data", function () {
     var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
         columns: columns,
         rows: rows,
         itemsPerPage: 3
       })),
+      getAllByRole = _render6.getAllByRole,
       queryByText = _render6.queryByText,
       rerender = _render6.rerender;
+    expect(queryByText("1 to 3 of 10")).toBeTruthy();
+    var lastButton = getAllByRole("button")[4];
     expect(queryByText("Peter")).toBeTruthy();
+    _react2.fireEvent.click(lastButton);
+    expect(queryByText("10 to 10 of 10")).toBeTruthy();
     rerender( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
       columns: columns,
       rows: rows2,
       itemsPerPage: 3
     }));
-    expect(queryByText("1 to 3 of 3")).toBeTruthy();
+    expect(queryByText("7 to 9 of 9")).toBeTruthy();
   });
-  test("Resultset table change itemsPerPage should go to first page", function () {
+  test("Resultset table shouldn't go one page back when there is data left in the last page", function () {
     var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
+        columns: columns,
+        rows: rows,
+        itemsPerPage: 2
+      })),
+      getAllByRole = _render7.getAllByRole,
+      queryByText = _render7.queryByText,
+      rerender = _render7.rerender;
+    expect(queryByText("1 to 2 of 10")).toBeTruthy();
+    var lastButton = getAllByRole("button")[4];
+    expect(queryByText("Peter")).toBeTruthy();
+    _react2.fireEvent.click(lastButton);
+    expect(queryByText("9 to 10 of 10")).toBeTruthy();
+    rerender( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
+      columns: columns,
+      rows: rows2,
+      itemsPerPage: 2
+    }));
+    expect(queryByText("9 to 9 of 9")).toBeTruthy();
+  });
+  test("Resultset table uncontrolled components maintain its value when sorting", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render8, getAllByRole, columnHeader, sortButton;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
+            columns: columnsWithCheckbox,
+            rows: rowsWithCheckbox,
+            itemsPerPage: 3
+          })), getAllByRole = _render8.getAllByRole;
+          columnHeader = getAllByRole("columnheader")[0];
+          sortButton = getAllByRole("button")[0];
+          expect(getAllByRole("checkbox")[0].getAttribute("aria-checked")).toBe("true");
+          expect(columnHeader.getAttribute("aria-sort")).toBe("none");
+          _react2.fireEvent.click(sortButton);
+          expect(columnHeader.getAttribute("aria-sort")).toBe("ascending");
+          _react2.fireEvent.click(sortButton);
+          expect(columnHeader.getAttribute("aria-sort")).toBe("descending");
+          expect(getAllByRole("checkbox")[0].getAttribute("aria-checked")).toBe("false");
+        case 10:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+  test("Resultset table change itemsPerPage should go to first page", function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
         columns: columns,
         rows: rows,
         itemsPerPage: 3,
         itemsPerPageOptions: [2, 3]
       })),
-      getAllByRole = _render7.getAllByRole;
+      getAllByRole = _render9.getAllByRole;
     var lastButton = getAllByRole("button")[4];
     expect(getAllByRole("row").length - 1).toEqual(3);
     _react2.fireEvent.click(lastButton);
     expect(getAllByRole("row").length - 1).toEqual(1);
   });
   test("Resultset table may not use the paginator", function () {
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
         columns: columns,
         rows: rows,
         hidePaginator: true
       })),
-      getAllByRole = _render8.getAllByRole;
+      getAllByRole = _render10.getAllByRole;
     var nextButton = getAllByRole("button")[3];
     expect(nextButton).not.toBeTruthy();
   });
@@ -356,14 +427,14 @@ describe("Resultset table component tests", function () {
       }),
       sortValue: "Actions"
     }]];
-    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
         columns: columns,
         rows: actionRows,
         itemsPerPage: 3
       })),
-      getAllByRole = _render9.getAllByRole,
-      getByRole = _render9.getByRole,
-      getByText = _render9.getByText;
+      getAllByRole = _render11.getAllByRole,
+      getByRole = _render11.getByRole,
+      getByText = _render11.getByText;
     var dropdown = getAllByRole("button")[2];
     (0, _react2.act)(function () {
       _userEvent["default"].click(dropdown);

package/resultset-table/types.d.ts

@@ -16,7 +16,7 @@ export type Column = {
      */
     isSortable?: boolean;
 };
-export type Row = {
+type Cell = {
     /**
      * Value to be displayed in the cell.
      */
@@ -27,6 +27,7 @@ export type Row = {
      */
     sortValue?: string;
 };
+export type Row = Cell[];
 type CommonProps = {
     /**
      * An array of objects representing the columns of the table.
@@ -36,7 +37,7 @@ type CommonProps = {
      * An array of objects representing the rows of the table, you will have
      * as many objects as columns in the table.
      */
-    rows: Row[][];
+    rows: Row[];
     /**
      * Size of the margin to be applied to the component. You can pass an object with 'top',
      * 'bottom', 'left' and 'right' properties in order to specify different margin sizes.

package/select/Select.js

@@ -462,8 +462,10 @@ var sizes = {
 var calculateWidth = function calculateWidth(margin, size) {
   return size === "fillParent" ? "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")") : sizes[size];
 };
-var SelectContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n\n  width: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
+var SelectContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n\n  width: ", ";\n  ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
   return calculateWidth(props.margin, props.size);
+}, function (props) {
+  return props.size !== "fillParent" && "min-width:" + calculateWidth(props.margin, props.size);
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
 }, function (props) {

package/select/Select.stories.tsx

@@ -9,6 +9,7 @@ import useTheme from "../useTheme";
 import { HalstackProvider } from "../HalstackContext";
 import { disabledRules } from "../../test/accessibility/rules/specific/select/disabledRules";
 import preview from "../../.storybook/preview";
+import DxcFlex from "../flex/Flex";
 
 export default {
   title: "Select",
@@ -305,6 +306,14 @@ const Select = () => (
       <Title title="Fillparent size" theme="light" level={4} />
       <DxcSelect label="Fillparent" options={single_options} size="fillParent" />
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Different sizes inside a flex" theme="light" level={4} />
+      <DxcFlex justifyContent="space-between" gap="1rem">
+        <DxcSelect label="fillParent" size="fillParent" options={single_options} />
+        <DxcSelect label="medium" size="medium" options={single_options} />
+        <DxcSelect label="large" size="large" options={single_options} />
+      </DxcFlex>
+    </ExampleContainer>
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="xxsmall margin" theme="light" level={4} />
@@ -402,7 +411,7 @@ const Select = () => (
 );
 
 const SelectListbox = () => {
-  const colorsTheme: any = useTheme();
+  const colorsTheme = useTheme();
 
   return (
     <>

package/text-input/TextInput.js

@@ -478,8 +478,10 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, re
     "aria-live": error ? "assertive" : "off"
   }, error)));
 });
-var TextInputContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
+var TextInputContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
   return calculateWidth(props.margin, props.size);
+}, function (props) {
+  return props.size !== "fillParent" && "min-width:" + calculateWidth(props.margin, props.size);
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
 }, function (props) {

package/text-input/TextInput.stories.tsx

@@ -7,6 +7,7 @@ import Suggestions from "./Suggestions";
 import { ThemeProvider } from "styled-components";
 import useTheme from "../useTheme";
 import { HalstackProvider } from "../HalstackContext";
+import DxcFlex from "../flex/Flex";
 
 export default {
   title: "Text Input",
@@ -268,6 +269,14 @@ export const Chromatic = () => (
       <Title title="FillParent size" theme="light" level={4} />
       <DxcTextInput label="FillParent" size="fillParent" />
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Different sizes inside a flex" theme="light" level={4} />
+      <DxcFlex justifyContent="space-between" gap="1.5rem">
+        <DxcTextInput label="Text input" size="fillParent" />
+        <DxcTextInput label="Text input" size="medium" />
+        <DxcTextInput label="Text input" size="large" />
+      </DxcFlex>
+    </ExampleContainer>
     <Title title="Opinionated theme" theme="light" level={2} />
     <ExampleContainer>
       <HalstackProvider theme={opinionatedTheme}>

package/tooltip/Tooltip.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/tooltip/Tooltip.accessibility.test.js

@@ -0,0 +1,144 @@
+"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 _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _Tooltip = _interopRequireDefault(require("./Tooltip"));
+var _Button = _interopRequireDefault(require("../button/Button"));
+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 accessibility tests", function () {
+  it("Should not have basic accessibility issues for bottom position", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, baseElement, getByText, triggerElement, results;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          // baseElement is needed when using React Portals
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+            label: "Tooltip Test",
+            position: "bottom"
+          }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+            label: "Hoverable button"
+          }))), baseElement = _render.baseElement, getByText = _render.getByText;
+          triggerElement = getByText("Hoverable button");
+          _react2.fireEvent.mouseEnter(triggerElement);
+          _context.next = 5;
+          return (0, _axeHelper.axe)(baseElement);
+        case 5:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 7:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it("Should not have basic accessibility issues for top position", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render2, baseElement, getByText, triggerElement, results;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          // baseElement is needed when using React Portals
+          _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+            label: "Tooltip Test",
+            position: "top"
+          }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+            label: "Hoverable button"
+          }))), baseElement = _render2.baseElement, getByText = _render2.getByText;
+          triggerElement = getByText("Hoverable button");
+          _react2.fireEvent.mouseEnter(triggerElement);
+          _context2.next = 5;
+          return (0, _axeHelper.axe)(baseElement);
+        case 5:
+          results = _context2.sent;
+          expect(results).toHaveNoViolations();
+        case 7:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+  it("Should not have basic accessibility issues for left position", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    var _render3, baseElement, getByText, triggerElement, results;
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          // baseElement is needed when using React Portals
+          _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+            label: "Tooltip Test",
+            position: "left"
+          }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+            label: "Hoverable button"
+          }))), baseElement = _render3.baseElement, getByText = _render3.getByText;
+          triggerElement = getByText("Hoverable button");
+          _react2.fireEvent.mouseEnter(triggerElement);
+          _context3.next = 5;
+          return (0, _axeHelper.axe)(baseElement);
+        case 5:
+          results = _context3.sent;
+          expect(results).toHaveNoViolations();
+        case 7:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })));
+  it("Should not have basic accessibility issues for right position", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+    var _render4, baseElement, getByText, triggerElement, results;
+    return _regenerator["default"].wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          // baseElement is needed when using React Portals
+          _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+            label: "Tooltip Test",
+            position: "right"
+          }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+            label: "Hoverable button"
+          }))), baseElement = _render4.baseElement, getByText = _render4.getByText;
+          triggerElement = getByText("Hoverable button");
+          _react2.fireEvent.mouseEnter(triggerElement);
+          _context4.next = 5;
+          return (0, _axeHelper.axe)(baseElement);
+        case 5:
+          results = _context4.sent;
+          expect(results).toHaveNoViolations();
+        case 7:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  })));
+});

package/tooltip/Tooltip.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import TooltipPropsType from "./types";
+declare const DxcTooltip: ({ position, label, children }: TooltipPropsType) => JSX.Element;
+export default DxcTooltip;

package/tooltip/Tooltip.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var Tooltip = _interopRequireWildcard(require("@radix-ui/react-tooltip"));
+var _coreTokens = _interopRequireDefault(require("../common/coreTokens"));
+var _templateObject, _templateObject2, _templateObject3;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var Triangle = function Triangle() {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "12",
+    height: "6",
+    viewBox: "0 0 12 6",
+    xmlns: "http://www.w3.org/2000/svg",
+    preserveAspectRatio: "none",
+    display: "block"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M0.351562 0L5.30131 4.94975C5.69184 5.34027 6.325 5.34027 6.71552 4.94975L11.6653 0H6.00842H0.351562Z",
+    fill: _coreTokens["default"].color_grey_800
+  }));
+};
+var DxcTooltip = function DxcTooltip(_ref) {
+  var _ref$position = _ref.position,
+    position = _ref$position === void 0 ? "bottom" : _ref$position,
+    label = _ref.label,
+    children = _ref.children;
+  return label ? /*#__PURE__*/_react["default"].createElement(Tooltip.Provider, {
+    delayDuration: 300
+  }, /*#__PURE__*/_react["default"].createElement(Tooltip.Root, null, /*#__PURE__*/_react["default"].createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /*#__PURE__*/_react["default"].createElement(TooltipTriggerContainer, null, children)), /*#__PURE__*/_react["default"].createElement(Tooltip.Portal, null, /*#__PURE__*/_react["default"].createElement(StyledTooltipContent, {
+    side: position,
+    sideOffset: 8
+  }, /*#__PURE__*/_react["default"].createElement(TooltipContainer, null, label), /*#__PURE__*/_react["default"].createElement(Tooltip.Arrow, {
+    asChild: true,
+    "aria-hidden": true
+  }, /*#__PURE__*/_react["default"].createElement(Triangle, null)))))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
+};
+var TooltipTriggerContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  position: relative;\n"])));
+var StyledTooltipContent = (0, _styledComponents["default"])(Tooltip.Content)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  z-index: 2147483647;\n\n  animation-duration: 0.2s;\n  animation-timing-function: ease-out;\n\n  /* Additional optimization to prevent blurry text in certain browsers */\n  -webkit-font-smoothing: antialiased;\n  transform: translateZ(0) scale(1, 1);\n\n  &[data-side=\"top\"] {\n    animation-name: slideUp;\n  }\n  &[data-side=\"bottom\"] {\n    animation-name: slideDown;\n  }\n  &[data-side=\"left\"] {\n    animation-name: slideLeft;\n  }\n  &[data-side=\"right\"] {\n    animation-name: slideRight;\n  }\n  @keyframes slideDown {\n    from {\n      opacity: 0;\n      transform: translateY(-10px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n  @keyframes slideUp {\n    from {\n      opacity: 0;\n      transform: translateY(10px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n  @keyframes slideLeft {\n    from {\n      opacity: 0;\n      transform: translateX(10px);\n    }\n    to {\n      opacity: 1;\n      transform: translateX(0);\n    }\n  }\n  @keyframes slideRight {\n    from {\n      opacity: 0;\n      transform: translateX(-10px);\n    }\n    to {\n      opacity: 1;\n      transform: translateX(0);\n    }\n  }\n"])));
+var TooltipContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  padding: 8px 12px;\n  border-radius: 4px;\n  font-size: ", ";\n  font-family: ", ";\n  max-width: 242px;\n  color: ", ";\n  background-color: ", ";\n  border-color: ", ";\n"])), _coreTokens["default"].type_scale_01, _coreTokens["default"].type_sans, _coreTokens["default"].color_white, _coreTokens["default"].color_grey_800, _coreTokens["default"].color_grey_800);
+var _default = exports["default"] = DxcTooltip;

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";