@dxc-technology/halstack-react 0.0.0-f2bad31 → 0.0.0-f319e71

package/text-input/TextInput.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { userEvent, within } from "@storybook/testing-library";
+import { userEvent, within } from "@storybook/test";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import DxcTextInput from "./TextInput";
@@ -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",
@@ -21,6 +22,7 @@ const action = {
       <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" />
     </svg>
   ),
+  title: "Copy",
 };
 
 const actionLargeIconSVG = {
@@ -31,11 +33,13 @@ const actionLargeIconSVG = {
       <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z" />
     </svg>
   ),
+  title: "Clock",
 };
 
 const actionLargeIconURL = {
   onClick: () => {},
   icon: "search",
+  title: "Search",
 };
 
 const country = ["Afghanistan"];
@@ -265,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}>
@@ -371,7 +383,7 @@ const AutosuggestListbox = () => {
         <ExampleContainer pseudoState="pseudo-hover">
           <Title title="Hovered suggestion" theme="light" level={4} />
           <Suggestions
-            id="x"
+            id="x1"
             value=""
             suggestions={country}
             visualFocusIndex={-1}
@@ -385,7 +397,7 @@ const AutosuggestListbox = () => {
         <ExampleContainer pseudoState="pseudo-active">
           <Title title="Active suggestion" theme="light" level={4} />
           <Suggestions
-            id="x"
+            id="x2"
             value=""
             suggestions={country}
             visualFocusIndex={-1}
@@ -399,7 +411,7 @@ const AutosuggestListbox = () => {
         <ExampleContainer>
           <Title title="Focused suggestion" theme="light" level={4} />
           <Suggestions
-            id="x"
+            id="x3"
             value=""
             suggestions={country}
             visualFocusIndex={0}
@@ -413,7 +425,7 @@ const AutosuggestListbox = () => {
         <ExampleContainer>
           <Title title="Highlighted suggestion" theme="light" level={4} />
           <Suggestions
-            id="x"
+            id="x4"
             value="Afgh"
             suggestions={country}
             visualFocusIndex={-1}
@@ -428,7 +440,7 @@ const AutosuggestListbox = () => {
       <ExampleContainer>
         <Title title="Autosuggest Error" theme="light" level={3} />
         <Suggestions
-          id="x"
+          id="x5"
           value=""
           suggestions={country}
           visualFocusIndex={-1}
@@ -442,7 +454,7 @@ const AutosuggestListbox = () => {
       <ExampleContainer>
         <Title title="Autosuggest Searching message" theme="light" level={3} />
         <Suggestions
-          id="x"
+          id="x6"
           value=""
           suggestions={country}
           visualFocusIndex={-1}

package/text-input/TextInput.test.d.ts

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

package/text-input/TextInput.test.js

@@ -8,7 +8,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-var _TextInput = _interopRequireDefault(require("./TextInput.tsx"));
+var _TextInput = _interopRequireDefault(require("./TextInput"));
 // Mocking DOMRect for Radix Primitive Popover
 global.globalThis = global;
 global.DOMRect = {
@@ -27,7 +27,7 @@ global.ResizeObserver = /*#__PURE__*/function () {
   function ResizeObserver() {
     (0, _classCallCheck2["default"])(this, ResizeObserver);
   }
-  (0, _createClass2["default"])(ResizeObserver, [{
+  return (0, _createClass2["default"])(ResizeObserver, [{
     key: "observe",
     value: function observe() {}
   }, {
@@ -37,7 +37,6 @@ global.ResizeObserver = /*#__PURE__*/function () {
     key: "disconnect",
     value: function disconnect() {}
   }]);
-  return ResizeObserver;
 }();
 var countries = ["Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antigua and Barbuda", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Cabo Verde", "Cambodia", "Cameroon", "Canada", "Cayman Islands, The", "Central African Republic", "Chad", "Democratic Republic of the Congo", "Dominican Republic", "Dominica", "Denmark", "Djibouti"];
 var specialCharacters = ["/", "\\", "*", "(", ")", "[", "]", "+", "?", "*{[]}|"];

package/textarea/Textarea.accessibility.test.d.ts

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

package/textarea/Textarea.accessibility.test.js

@@ -5,8 +5,8 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _jestAxe = require("jest-axe");
-var _Textarea = _interopRequireDefault(require("./Textarea.tsx"));
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _Textarea = _interopRequireDefault(require("./Textarea"));
 describe("Textarea component accessibility tests", function () {
   it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
     var _render, container, results;
@@ -27,7 +27,7 @@ describe("Textarea component accessibility tests", function () {
             optional: true
           })), container = _render.container;
           _context.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context.sent;
           expect(results).toHaveNoViolations();
@@ -56,7 +56,7 @@ describe("Textarea component accessibility tests", function () {
             pattern: "^.*(?=.*[a-zA-Z])(?=.*)(?=.*[!&$%&? \"]).*$"
           })), container = _render2.container;
           _context2.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context2.sent;
           expect(results).toHaveNoViolations();
@@ -84,7 +84,7 @@ describe("Textarea component accessibility tests", function () {
             maxLength: 100
           })), container = _render3.container;
           _context3.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context3.sent;
           expect(results).toHaveNoViolations();
@@ -113,7 +113,7 @@ describe("Textarea component accessibility tests", function () {
             disabled: true
           })), container = _render4.container;
           _context4.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context4.sent;
           expect(results).toHaveNoViolations();
@@ -142,7 +142,7 @@ describe("Textarea component accessibility tests", function () {
             readOnly: true
           })), container = _render5.container;
           _context5.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context5.sent;
           expect(results).toHaveNoViolations();

package/textarea/Textarea.js

@@ -15,10 +15,9 @@ var _utils = require("../common/utils");
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
 var _variables = require("../common/variables");
-var _uuid = require("uuid");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 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" != _typeof3(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 && Object.prototype.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; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(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 patternMatch = function patternMatch(pattern, value) {
   return new RegExp(pattern).test(value);
 };
@@ -59,12 +58,11 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     innerValue = _useState2[0],
     setInnerValue = _useState2[1];
-  var _useState3 = (0, _react.useState)("textarea-".concat((0, _uuid.v4)())),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 1),
-    textareaId = _useState4[0];
+  var textareaId = "textarea-".concat((0, _react.useId)());
   var colorsTheme = (0, _useTheme["default"])();
   var translatedLabels = (0, _useTranslatedLabels["default"])();
   var textareaRef = (0, _react.useRef)(null);
+  var prevValueRef = (0, _react.useRef)(null);
   var errorId = "error-".concat(textareaId);
   var isNotOptional = function isNotOptional(value) {
     return value === "" && !optional;
@@ -87,13 +85,6 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
       value: newValue
     });
   };
-  var autoVerticalGrow = function autoVerticalGrow() {
-    var textareaLineHeight = parseInt(window.getComputedStyle(textareaRef.current)["line-height"]);
-    var textareaPaddingTopBottom = parseInt(window.getComputedStyle(textareaRef.current)["padding-top"]) * 2;
-    textareaRef.current.style.height = "".concat(textareaLineHeight * rows, "px");
-    var newHeight = textareaRef.current.scrollHeight - textareaPaddingTopBottom;
-    textareaRef.current.style.height = "".concat(newHeight, "px");
-  };
   var handleOnBlur = function handleOnBlur(event) {
     if (isNotOptional(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value,
@@ -110,8 +101,17 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
   };
   var handleOnChange = function handleOnChange(event) {
     changeValue(event.target.value);
-    verticalGrow === "auto" && autoVerticalGrow();
   };
+  (0, _react.useEffect)(function () {
+    if (verticalGrow === "auto" && prevValueRef.current !== (value !== null && value !== void 0 ? value : innerValue)) {
+      var textareaLineHeight = parseInt(window.getComputedStyle(textareaRef.current)["line-height"]);
+      var textareaPaddingTopBottom = parseInt(window.getComputedStyle(textareaRef.current)["padding-top"]) * 2;
+      textareaRef.current.style.height = "".concat(textareaLineHeight * rows, "px");
+      var newHeight = textareaRef.current.scrollHeight - textareaPaddingTopBottom;
+      textareaRef.current.style.height = "".concat(newHeight, "px");
+      prevValueRef.current = value !== null && value !== void 0 ? value : innerValue;
+    }
+  }, [verticalGrow, value, innerValue, rows]);
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.textarea
   }, /*#__PURE__*/_react["default"].createElement(TextareaContainer, {
@@ -146,6 +146,7 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
     "aria-required": !disabled && !optional
   }), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, {
     id: errorId,
+    role: "alert",
     "aria-live": error ? "assertive" : "off"
   }, error)));
 });

package/textarea/Textarea.test.d.ts

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

package/textarea/Textarea.test.js

@@ -6,7 +6,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-var _Textarea = _interopRequireDefault(require("./Textarea.tsx"));
+var _Textarea = _interopRequireDefault(require("./Textarea"));
 describe("Textarea component tests", function () {
   test("Renders with correct label", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {

package/toggle-group/ToggleGroup.accessibility.test.d.ts

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

package/toggle-group/ToggleGroup.accessibility.test.js

@@ -5,8 +5,8 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _jestAxe = require("jest-axe");
-var _ToggleGroup = _interopRequireDefault(require("./ToggleGroup.tsx"));
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _ToggleGroup = _interopRequireDefault(require("./ToggleGroup"));
 var ethernetSVG = /*#__PURE__*/_react["default"].createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   height: "24px",
@@ -67,11 +67,11 @@ describe("Toggle group component accessibility tests", function () {
             helperText: "Toggle group helper text",
             options: options,
             margin: "medium",
-            defaultValue: 2,
+            defaultValue: [2],
             multiple: true
           })), container = _render.container;
           _context.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context.sent;
           expect(results).toHaveNoViolations();
@@ -94,7 +94,7 @@ describe("Toggle group component accessibility tests", function () {
             disabled: true
           })), container = _render2.container;
           _context2.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context2.sent;
           expect(results).toHaveNoViolations();

package/toggle-group/ToggleGroup.js

@@ -11,13 +11,13 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _uuid = require("uuid");
 var _variables = require("../common/variables");
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _Flex = _interopRequireDefault(require("../flex/Flex"));
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 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" != _typeof3(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 && Object.prototype.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; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(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 DxcToggleGroup = function DxcToggleGroup(_ref) {
   var label = _ref.label,
     helperText = _ref.helperText,
@@ -32,13 +32,11 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
     multiple = _ref$multiple === void 0 ? false : _ref$multiple,
     _ref$tabIndex = _ref.tabIndex,
     tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
-  var _useState = (0, _react.useState)("label-toggle-group-".concat((0, _uuid.v4)())),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
-    toggleGroupLabelId = _useState2[0];
-  var _useState3 = (0, _react.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : multiple ? [] : -1),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    selectedValue = _useState4[0],
-    setSelectedValue = _useState4[1];
+  var toggleGroupLabelId = "label-toggle-group-".concat((0, _react.useId)());
+  var _useState = (0, _react.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : multiple ? [] : -1),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    selectedValue = _useState2[0],
+    setSelectedValue = _useState2[1];
   var colorsTheme = (0, _useTheme["default"])();
   var handleToggleChange = function handleToggleChange(selectedOption) {
     var newSelectedOptions;
@@ -106,8 +104,8 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
       alignItems: "center"
     }, option.icon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
       optionLabel: option.label
-    }, typeof option.icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
-      src: option.icon
+    }, typeof option.icon === "string" ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      icon: option.icon
     }) : option.icon), option.label && /*#__PURE__*/_react["default"].createElement(LabelContainer, null, option.label)));
   }))));
 };
@@ -195,7 +193,7 @@ var LabelContainer = _styledComponents["default"].span(_templateObject6 || (_tem
 }, function (props) {
   return props.theme.optionLabelFontWeight;
 });
-var IconContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  height: 24px;\n  width: 24px;\n  margin-right: ", ";\n  overflow: hidden;\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
+var IconContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  margin-right: ", ";\n  overflow: hidden;\n  font-size: 24px;\n  svg {\n    height: 24px;\n    width: 24px;\n  }\n"])), function (props) {
   return props.optionLabel && props.theme.iconMarginRight;
 });
 var _default = exports["default"] = DxcToggleGroup;

package/toggle-group/ToggleGroup.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { userEvent, within } from "@storybook/testing-library";
+import { userEvent, within } from "@storybook/test";
 import DxcToggleGroup from "./ToggleGroup";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
@@ -52,17 +52,17 @@ const options = [
 const optionsWithIcon = [
   {
     value: 1,
-    icon: wifiSVG,
+    icon: "wifi",
     title: "WiFi connection",
   },
   {
     value: 2,
-    icon: ethernetSVG,
+    icon: "filled_lan",
     title: "Ethernet connection",
   },
   {
     value: 3,
-    icon: gMobileSVG,
+    icon: "5g",
     title: "3G Mobile data connection",
   },
 ];

package/toggle-group/ToggleGroup.test.d.ts

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

package/toggle-group/ToggleGroup.test.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _ToggleGroup = _interopRequireDefault(require("./ToggleGroup.tsx"));
+var _ToggleGroup = _interopRequireDefault(require("./ToggleGroup"));
 var options = [{
   value: 1,
   label: "Amazon"

package/toggle-group/types.d.ts

@@ -13,7 +13,7 @@ type OptionIcon = {
      */
     label?: never;
     /**
-     * Element used as the icon. Icon and label can't be used at same time.
+     * Material Symbols icon or SVG element. Icon and label can't be used at same time.
      */
     icon: string | SVG;
     /**
@@ -28,7 +28,7 @@ export type OptionLabel = {
      */
     label: string;
     /**
-     * Element used as the icon. Icon and label can't be used at same time.
+     * Material Symbols icon or SVG element. Icon and label can't be used at same time.
      */
     icon?: string | SVG;
     /**

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;