@pingux/astro 1.2.0-alpha.0 → 1.2.0-alpha.12

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js

@@ -0,0 +1,295 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty2(exports, "__esModule", {
+  value: true
+});
+
+exports.OrgLevel = exports.WithSections = exports.Default = exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _EnvironmentBreadcrumb = _interopRequireDefault(require("./EnvironmentBreadcrumb"));
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context6; (0, _forEach["default"])(_context6 = ownKeys(Object(source), true)).call(_context6, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context7; (0, _forEach["default"])(_context7 = ownKeys(Object(source))).call(_context7, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+var _default = {
+  title: 'EnvironmentBreadcrumb',
+  component: _EnvironmentBreadcrumb["default"]
+};
+exports["default"] = _default;
+var defaultEnvironments = [{
+  name: 'Default'
+}, {
+  name: 'Kangaroo'
+}, {
+  name: 'Snake'
+}, {
+  name: 'Snail'
+}, {
+  name: 'Slug'
+}, {
+  name: 'Crow'
+}, {
+  name: 'Dog'
+}, {
+  name: 'Crab',
+  isSandbox: true
+}, {
+  name: 'Fish'
+}, {
+  name: 'Turtle'
+}, {
+  name: 'Mouse'
+}, {
+  name: 'Banana'
+}, {
+  name: 'Shark'
+}, {
+  name: 'Gorilla'
+}, {
+  name: 'Goat'
+}];
+var environmentsWithSections = [{
+  name: 'Recent',
+  options: [{
+    name: 'Default'
+  }, {
+    name: 'Consumer Banking Prod'
+  }, {
+    name: 'Custom 360 Test'
+  }]
+}, {
+  name: 'All',
+  options: [{
+    name: 'Consumer Banking Prod'
+  }, {
+    name: 'Custom 360 Test'
+  }, {
+    name: 'Default'
+  }, {
+    name: 'Great New One',
+    isSandbox: true
+  }, {
+    name: 'Jeff’s Workforce'
+  }, {
+    name: 'Lindemuller Prod'
+  }, {
+    name: 'Mine'
+  }]
+}];
+
+var Default = function Default(args) {
+  var _useState = (0, _react.useState)({
+    name: 'Snail',
+    isSandbox: true
+  }),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      selectedEnvironment = _useState2[0],
+      setSelectedEnvironment = _useState2[1];
+
+  var envNode = (0, _react2.jsx)(_index.Box, {
+    isRow: true
+  }, (0, _react2.jsx)(_index.Text, {
+    color: "inherit"
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Chip, {
+    label: "SANDBOX",
+    variant: "boxes.environmentChip",
+    bg: "neutral.40"
+  }) : null);
+
+  var findEnvObj = function findEnvObj(envName) {
+    return (0, _find["default"])(defaultEnvironments).call(defaultEnvironments, function (_ref) {
+      var name = _ref.name;
+      return name === envName;
+    });
+  };
+
+  var handleSelectionChange = function handleSelectionChange(newEnvName) {
+    var envObj = findEnvObj(newEnvName);
+    setSelectedEnvironment(_objectSpread({}, envObj));
+  };
+
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_EnvironmentBreadcrumb["default"], (0, _extends2["default"])({}, args, {
+    items: defaultEnvironments,
+    name: "Globochem",
+    selectedItem: envNode,
+    onSelectionChange: handleSelectionChange
+  }), function (_ref2) {
+    var name = _ref2.name,
+        isSandbox = _ref2.isSandbox;
+    return (0, _react2.jsx)(_index.Item, {
+      key: name,
+      textValue: name
+    }, name, isSandbox ? (0, _react2.jsx)(_index.Chip, {
+      label: "SANDBOX",
+      variant: "boxes.environmentChip",
+      bg: "neutral.40"
+    }) : null);
+  }));
+};
+
+exports.Default = Default;
+
+var WithSections = function WithSections() {
+  var _useState3 = (0, _react.useState)(environmentsWithSections),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      environments = _useState4[0],
+      setEnvironments = _useState4[1];
+
+  var _useState5 = (0, _react.useState)({
+    name: 'Consumer Banking Prod'
+  }),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      selectedEnvironment = _useState6[0],
+      setSelectedEnvironment = _useState6[1];
+
+  var recentEnvShown = 3;
+
+  var getUpdatedRecentEnvs = function getUpdatedRecentEnvs(envObj, prevEnvs) {
+    var _context3;
+
+    var envName = envObj.name;
+    var isDuplicate = (0, _filter["default"])(prevEnvs).call(prevEnvs, function (prevEnv) {
+      return prevEnv.name === envName;
+    }).length > 0;
+
+    if (isDuplicate) {
+      var _context;
+
+      return (0, _concat["default"])(_context = [_objectSpread({}, envObj)]).call(_context, (0, _filter["default"])(prevEnvs).call(prevEnvs, function (prevEnv) {
+        return prevEnv.name !== envName;
+      }));
+    }
+
+    if (prevEnvs.length >= recentEnvShown) {
+      var _context2;
+
+      return (0, _concat["default"])(_context2 = [_objectSpread({}, envObj)]).call(_context2, (0, _slice["default"])(prevEnvs).call(prevEnvs, 0, recentEnvShown - 1));
+    }
+
+    return (0, _concat["default"])(_context3 = [_objectSpread({}, envObj)]).call(_context3, prevEnvs);
+  };
+
+  var findEnvObj = function findEnvObj(envName) {
+    var _context4;
+
+    return (0, _find["default"])(_context4 = (0, _find["default"])(environments).call(environments, function (section) {
+      return section.name === 'All';
+    }).options).call(_context4, function (option) {
+      return option.name === envName;
+    });
+  };
+
+  var handleEnvPress = function handleEnvPress(newEnv) {
+    var sectionPrefixIndex = (0, _indexOf["default"])(newEnv).call(newEnv, '-');
+    var envKey = newEnv.substr(sectionPrefixIndex + 1);
+    var recentEnvironments = (0, _find["default"])(environments).call(environments, function (envSection) {
+      return envSection.name === 'Recent';
+    }).options;
+    var envObj = findEnvObj(envKey);
+    var updatedRecentEnvironments = getUpdatedRecentEnvs(envObj, recentEnvironments);
+    setEnvironments(function (prevEnvs) {
+      return (0, _map["default"])(prevEnvs).call(prevEnvs, function (section) {
+        return section.name === 'Recent' ? _objectSpread(_objectSpread({}, section), {}, {
+          options: updatedRecentEnvironments
+        }) : section;
+      });
+    });
+    setSelectedEnvironment(_objectSpread({}, envObj));
+  };
+
+  var envNode = (0, _react2.jsx)(_index.Box, {
+    isRow: true
+  }, (0, _react2.jsx)(_index.Text, {
+    color: "inherit"
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Chip, {
+    label: "SANDBOX",
+    variant: "boxes.environmentChip",
+    bg: "neutral.40"
+  }) : null);
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_EnvironmentBreadcrumb["default"], {
+    items: environments,
+    name: "Globochem",
+    selectedItem: envNode,
+    onSelectionChange: handleEnvPress
+  }, function (_ref3) {
+    var sectionName = _ref3.name,
+        sectionOptions = _ref3.options;
+    return (0, _react2.jsx)(_index.Section, {
+      key: sectionName,
+      title: sectionName,
+      items: sectionOptions
+    }, function (_ref4) {
+      var _context5;
+
+      var itemName = _ref4.name,
+          itemOptions = _ref4.options,
+          isSandbox = _ref4.isSandbox;
+      return (0, _react2.jsx)(_index.Item, {
+        key: (0, _concat["default"])(_context5 = "".concat(sectionName, "-")).call(_context5, itemName),
+        childItems: itemOptions,
+        textValue: itemName
+      }, (0, _react2.jsx)(_index.Box, {
+        isRow: true
+      }, itemName, isSandbox ? (0, _react2.jsx)(_index.Chip, {
+        label: "SANDBOX",
+        variant: "boxes.environmentChip",
+        bg: "neutral.40"
+      }) : null));
+    });
+  }));
+};
+
+exports.WithSections = WithSections;
+
+var OrgLevel = function OrgLevel() {
+  return (0, _react2.jsx)(_EnvironmentBreadcrumb["default"], {
+    name: "Globochem"
+  });
+};
+
+exports.OrgLevel = OrgLevel;

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.test.js

@@ -0,0 +1,287 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _collections = require("@react-stately/collections");
+
+var _jestAxe = require("jest-axe");
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+var testEnvBreadcrumb = 'test-env-breadcrumb';
+var testName = 'test-name';
+var testSelectedItem = 'test-selected-item';
+var testSearchLabel = 'test-Search-Label';
+var items = [{
+  name: 'a'
+}, {
+  name: 'b'
+}, {
+  name: 'c'
+}];
+var itemsWithSections = [{
+  name: 'Heading 1',
+  options: [{
+    name: 'Foo'
+  }, {
+    name: 'Bar'
+  }, {
+    name: 'Baz'
+  }]
+}];
+var defaultProps = {
+  'data-testid': testEnvBreadcrumb,
+  name: testName,
+  selectedItem: testSelectedItem,
+  searchProps: {
+    label: testSearchLabel
+  },
+  items: items
+};
+var defaultWithSectionsProps = {
+  'data-testid': testEnvBreadcrumb,
+  name: testName,
+  selectedItem: testSelectedItem,
+  searchProps: {
+    label: testSearchLabel
+  },
+  items: itemsWithSections
+};
+var onSelectionChange = jest.fn();
+
+var getComponent = function getComponent(props) {
+  return (0, _testWrapper.render)((0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.EnvironmentBreadcrumb, (0, _extends2["default"])({}, defaultProps, props), function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name
+    }, item.name);
+  })));
+};
+
+var getSectionsComponent = function getSectionsComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.EnvironmentBreadcrumb, (0, _extends2["default"])({}, defaultWithSectionsProps, props), function (section) {
+    return (// eslint-disable-next-line testing-library/no-node-access
+      (0, _react2.jsx)(_collections.Section, {
+        key: section.name,
+        name: section.name,
+        items: section.options
+      }, function (item) {
+        return (0, _react2.jsx)(_index.Item, {
+          key: item.name,
+          childItems: item.options
+        }, item.name);
+      })
+    );
+  })));
+};
+
+beforeAll(function () {
+  jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function () {
+    return 1000;
+  });
+  jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(function () {
+    return 1000;
+  });
+  window.HTMLElement.prototype.scrollIntoView = jest.fn();
+  jest.spyOn(window.screen, 'width', 'get').mockImplementation(function () {
+    return 1024;
+  });
+  jest.spyOn(window, 'requestAnimationFrame').mockImplementation(function (cb) {
+    return cb();
+  });
+  jest.useFakeTimers();
+});
+afterEach(function () {
+  jest.clearAllMocks();
+  onSelectionChange.mockClear();
+});
+afterAll(function () {
+  jest.restoreAllMocks();
+});
+test('should render environment breadcrumb component by default', function () {
+  getComponent();
+
+  var imageUploadButton = _testWrapper.screen.getByTestId(testEnvBreadcrumb);
+
+  expect(imageUploadButton).toBeInstanceOf(HTMLDivElement);
+  expect(imageUploadButton).toBeInTheDocument();
+});
+test('should display name', function () {
+  getComponent();
+  expect(_testWrapper.screen.getByText(testName)).toBeInTheDocument();
+});
+test('should display selectedItem', function () {
+  getComponent();
+  expect(_testWrapper.screen.getByText(testSelectedItem)).toBeInTheDocument();
+});
+test('should call onNamePress when name pressed', function () {
+  var onNamePressMock = jest.fn();
+  getComponent({
+    onNamePress: onNamePressMock
+  });
+  expect(onNamePressMock).not.toHaveBeenCalled();
+
+  _userEvent["default"].click(_testWrapper.screen.getByText(testName));
+
+  expect(onNamePressMock).toHaveBeenCalledTimes(1);
+});
+test('should not call onNamePress when current env button pressed', function () {
+  var onNamePressMock = jest.fn();
+  getComponent({
+    onNamePress: onNamePressMock
+  });
+  expect(onNamePressMock).not.toHaveBeenCalled();
+
+  _userEvent["default"].click(_testWrapper.screen.getByText(testSelectedItem));
+
+  expect(onNamePressMock).not.toHaveBeenCalled();
+});
+test('should render items passed in props', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+  return _regenerator["default"].wrap(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          getComponent();
+          expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+          expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
+
+          _userEvent["default"].click(_testWrapper.screen.getByText(testSelectedItem));
+
+          expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+          expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(3);
+
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _callee);
+})));
+test('should render items with sections passed in props', function () {
+  getSectionsComponent();
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
+
+  _userEvent["default"].click(_testWrapper.screen.getByText(testSelectedItem));
+
+  expect(_testWrapper.screen.getByRole('group')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(3);
+});
+test('should call onSelectionChange when env clicked', function () {
+  var onSelectionChangeMock = jest.fn();
+  getComponent({
+    onSelectionChange: onSelectionChangeMock
+  });
+  expect(onSelectionChangeMock).not.toHaveBeenCalled();
+
+  _userEvent["default"].click(_testWrapper.screen.getByText(testSelectedItem));
+
+  _userEvent["default"].click(_testWrapper.screen.getByText(items[0].name));
+
+  expect(onSelectionChangeMock).toHaveBeenNthCalledWith(1, items[0].name);
+});
+test('should disable item if his hey passed in the disabledKeys prop', function () {
+  getComponent({
+    disabledKeys: ['a']
+  });
+
+  _userEvent["default"].click(_testWrapper.screen.getByText(testSelectedItem));
+
+  expect(_testWrapper.screen.getByText(items[0].name)).toHaveClass('is-disabled');
+});
+test('should call onPopoverOpen if it is passed in the props', function () {
+  var onPopoverOpenMock = jest.fn();
+  getComponent({
+    onPopoverOpen: onPopoverOpenMock
+  });
+  expect(onPopoverOpenMock).not.toHaveBeenCalled();
+
+  _userEvent["default"].click(_testWrapper.screen.getByText(testSelectedItem));
+
+  expect(onPopoverOpenMock).toHaveBeenCalled();
+});
+test('should call onPopoverClose if it is passed in the props', function () {
+  var onPopoverCloseMock = jest.fn();
+  getComponent({
+    onPopoverClose: onPopoverCloseMock
+  });
+  expect(onPopoverCloseMock).not.toHaveBeenCalled();
+
+  _userEvent["default"].click(_testWrapper.screen.getByText(testSelectedItem));
+
+  _userEvent["default"].click(_testWrapper.screen.getByText(testName));
+
+  expect(onPopoverCloseMock).toHaveBeenCalled();
+});
+test('should close popover when other component clicked', function () {
+  getComponent();
+
+  _userEvent["default"].click(_testWrapper.screen.getByText(testSelectedItem));
+
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(3);
+
+  _userEvent["default"].click(_testWrapper.screen.getByText(testName));
+
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryAllByRole('option')).not.toHaveLength(3);
+});
+test('should render current env node if passed in props', function () {
+  var testSelectedItemId = 'testSelectedItemId';
+  getComponent({
+    selectedItem: (0, _react2.jsx)("div", {
+      "data-testid": testSelectedItemId
+    })
+  });
+  expect(_testWrapper.screen.getByTestId(testSelectedItemId)).toBeInTheDocument();
+});
+test('should show empty state in search if there are no results', function () {
+  var testEmptySearchText = 'testEmptySearchText';
+  getComponent({
+    emptySearchText: testEmptySearchText
+  });
+
+  _userEvent["default"].click(_testWrapper.screen.getByText(testSelectedItem));
+
+  _userEvent["default"].type(_testWrapper.screen.getByRole('searchbox'), '111');
+
+  expect(_testWrapper.screen.getByText(testEmptySearchText)).toBeInTheDocument();
+});
+test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+  var _getComponent, container, results;
+
+  return _regenerator["default"].wrap(function _callee2$(_context2) {
+    while (1) {
+      switch (_context2.prev = _context2.next) {
+        case 0:
+          jest.useRealTimers();
+          _getComponent = getComponent(), container = _getComponent.container;
+          _context2.next = 4;
+          return (0, _jestAxe.axe)(container);
+
+        case 4:
+          results = _context2.sent;
+          expect(results).toHaveNoViolations();
+
+        case 6:
+        case "end":
+          return _context2.stop();
+      }
+    }
+  }, _callee2);
+})));

package/lib/cjs/components/EnvironmentBreadcrumb/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _EnvironmentBreadcrumb["default"];
+  }
+});
+
+var _EnvironmentBreadcrumb = _interopRequireDefault(require("./EnvironmentBreadcrumb"));

package/lib/cjs/components/HelpHint/HelpHint.js

@@ -18,8 +18,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _HelpIcon = _interopRequireDefault(require("mdi-react/HelpIcon"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _IconButton = _interopRequireDefault(require("../IconButton"));
@@ -30,20 +28,40 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _react2 = require("@emotion/react");
 
+var HelpIcon = function HelpIcon() {
+  return (0, _react2.jsx)("svg", {
+    width: "7",
+    height: "9",
+    viewBox: "0 0 7 9",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, (0, _react2.jsx)("path", {
+    d: "M2.56685 7.306V9H4.29385V7.306H2.56685ZM0.795848 3.676H2.41285C2.41285 3.478 2.43485 3.29467 2.47885 3.126C2.52285 2.95 2.58885 2.79967 2.67685 2.675C2.77218 2.543 2.88951 2.44033 3.02885 2.367C3.17551 2.28633 3.34785 2.246 3.54585 2.246C3.83918 2.246 4.06651 2.32667 4.22785 2.488C4.39651 2.64933 4.48085 2.89867 4.48085 3.236C4.48818 3.434 4.45151 3.599 4.37085 3.731C4.29751 3.863 4.19851 3.984 4.07385 4.094C3.94918 4.204 3.81351 4.314 3.66685 4.424C3.52018 4.534 3.38085 4.666 3.24885 4.82C3.11685 4.96667 2.99951 5.14633 2.89685 5.359C2.80151 5.57167 2.74285 5.83567 2.72085 6.151V6.646H4.20585V6.228C4.23518 6.008 4.30485 5.82467 4.41485 5.678C4.53218 5.53133 4.66418 5.403 4.81085 5.293C4.95751 5.17567 5.11151 5.062 5.27285 4.952C5.44151 4.83467 5.59185 4.69533 5.72385 4.534C5.86318 4.37267 5.97685 4.17833 6.06485 3.951C6.16018 3.72367 6.20785 3.434 6.20785 3.082C6.20785 2.86933 6.16018 2.642 6.06485 2.4C5.97685 2.15067 5.82651 1.91967 5.61385 1.707C5.40118 1.49433 5.11885 1.31833 4.76685 1.179C4.42218 1.03233 3.98951 0.959 3.46885 0.959C3.06551 0.959 2.69885 1.02867 2.36885 1.168C2.04618 1.3 1.76751 1.487 1.53285 1.729C1.30551 1.971 1.12585 2.257 0.993848 2.587C0.869181 2.917 0.803181 3.28 0.795848 3.676Z",
+    fill: "#3B4A58"
+  }));
+};
+/**
+ * A `HelpHint` is a composed component using tooltip trigger and icon button.
+ *
+ * For customization the trigger icon,
+ * please see the [TooltipTrigger](./?path=/docs/tooltiptrigger--default) docs.
+ */
+
+
 var HelpHint = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
       tooltipProps = props.tooltipProps,
       iconButtonProps = props.iconButtonProps,
       others = (0, _objectWithoutProperties2["default"])(props, ["children", "tooltipProps", "iconButtonProps"]);
   return (0, _react2.jsx)(_TooltipTrigger["default"], (0, _extends2["default"])({
-    ref: ref
-  }, others), (0, _react2.jsx)(_IconButton["default"], (0, _extends2["default"])({
+    ref: ref,
+    direction: "top"
+  }, others, tooltipProps), (0, _react2.jsx)(_IconButton["default"], (0, _extends2["default"])({
     variant: "helpHint",
     "aria-label": "label help hint",
     "data-testid": "help-hint__button"
   }, iconButtonProps), (0, _react2.jsx)(_Icon["default"], {
-    icon: _HelpIcon["default"],
-    size: "11px"
+    icon: HelpIcon
   })), (0, _react2.jsx)(_TooltipTrigger.Tooltip, tooltipProps, children));
 });
 HelpHint.propTypes = {