@coorpacademy/components 11.13.2 → 11.13.3

package/lib/atom/button-link/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getButtonContent","icon","label","type","position","Icon","ICONS","style","buttonContent","ButtonLink","props","disabled","dataName","dataTestId","ariaLabel","link","onClick","className","customStyle","contentView","styleButton","classnames","button","primary","secondary","tertiary","text","dangerous","handleOnClick","useCallback","propTypes","PropTypes","oneOf","string","shape","func","href","download","bool","target"],"sources":["../../../src/atom/button-link/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, keys, noop} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Link from '../link';\nimport {ICONS} from '../../util/button-icons';\nimport style from './style.css';\n\nconst getButtonContent = (icon, label) => {\n  const {type, position} = icon;\n  const Icon = getOr(null, type, ICONS);\n\n  if (!Icon) {\n    return (\n      <div className={style.buttonContent}>\n        <span className={style.label}>{label}</span>\n      </div>\n    );\n  }\n\n  return (\n    <div className={style.buttonContent}>\n      {position === 'left' ? <Icon className={style.icon} /> : null}\n      <span className={style.label}>{label}</span>\n      {position === 'right' ? <Icon className={style.icon} /> : null}\n    </div>\n  );\n};\n\nconst ButtonLink = props => {\n  const {\n    type,\n    label,\n    disabled,\n    icon = {},\n    'data-name': dataName,\n    'data-testid': dataTestId = 'button-link',\n    'aria-label': ariaLabel,\n    link,\n    onClick = noop,\n    className,\n    customStyle\n  } = props;\n  const contentView = getButtonContent(icon, label);\n  const styleButton = classnames(\n    className,\n    style.button,\n    type === 'primary' && style.primary,\n    type === 'secondary' && style.secondary,\n    type === 'tertiary' && style.tertiary,\n    type === 'text' && style.text,\n    type === 'dangerous' && style.dangerous,\n    link && style.link,\n    disabled && style.disabled\n  );\n\n  const handleOnClick = useCallback(() => onClick(), [onClick]);\n\n  if (link) {\n    return (\n      <Link\n        {...link}\n        style={customStyle}\n        className={styleButton}\n        data-name={dataName}\n        data-testid={dataTestId}\n        aria-label={ariaLabel || label}\n        title={ariaLabel || label}\n      >\n        {contentView}\n      </Link>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={ariaLabel || label}\n      title={ariaLabel || label}\n      data-name={dataName}\n      data-testid={dataTestId}\n      style={customStyle}\n      className={styleButton}\n      onClick={handleOnClick}\n    >\n      {contentView}\n    </button>\n  );\n};\n\nButtonLink.propTypes = {\n  type: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'text', 'dangerous']),\n  label: PropTypes.string,\n  'aria-label': PropTypes.string,\n  'data-name': PropTypes.string,\n  'data-testid': PropTypes.string,\n  icon: PropTypes.shape({\n    position: PropTypes.oneOf(['right', 'left']),\n    type: PropTypes.oneOf(keys(ICONS))\n  }),\n  onClick: PropTypes.func,\n  link: PropTypes.shape({\n    href: PropTypes.string,\n    download: PropTypes.bool,\n    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top'])\n  }),\n  disabled: PropTypes.bool,\n  className: PropTypes.string,\n  customStyle: PropTypes.shape({})\n};\n\nexport default ButtonLink;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["getButtonContent","icon","label","type","position","Icon","ICONS","style","buttonContent","ButtonLink","props","disabled","dataName","dataTestId","ariaLabel","link","onClick","onKeyDown","className","customStyle","useTitle","contentView","styleButton","classnames","button","primary","secondary","tertiary","text","dangerous","handleOnClick","useCallback","handleOnKeyDown","event","title","propTypes","PropTypes","oneOf","string","shape","func","href","download","bool","target"],"sources":["../../../src/atom/button-link/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, keys, noop} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Link from '../link';\nimport {ICONS} from '../../util/button-icons';\nimport style from './style.css';\n\nconst getButtonContent = (icon, label) => {\n  const {type, position} = icon;\n  const Icon = getOr(null, type, ICONS);\n\n  if (!Icon) {\n    return (\n      <div className={style.buttonContent}>\n        <span className={style.label}>{label}</span>\n      </div>\n    );\n  }\n\n  return (\n    <div className={style.buttonContent}>\n      {position === 'left' ? <Icon className={style.icon} /> : null}\n      <span className={style.label}>{label}</span>\n      {position === 'right' ? <Icon className={style.icon} /> : null}\n    </div>\n  );\n};\n\nconst ButtonLink = props => {\n  const {\n    type,\n    label,\n    disabled,\n    icon = {},\n    'data-name': dataName,\n    'data-testid': dataTestId = 'button-link',\n    'aria-label': ariaLabel,\n    link,\n    onClick = noop,\n    onKeyDown = noop,\n    className,\n    customStyle,\n    useTitle = true\n  } = props;\n  const contentView = getButtonContent(icon, label);\n  const styleButton = classnames(\n    className,\n    style.button,\n    type === 'primary' && style.primary,\n    type === 'secondary' && style.secondary,\n    type === 'tertiary' && style.tertiary,\n    type === 'text' && style.text,\n    type === 'dangerous' && style.dangerous,\n    link && style.link,\n    disabled && style.disabled\n  );\n\n  const handleOnClick = useCallback(() => onClick(), [onClick]);\n\n  const handleOnKeyDown = useCallback(event => onKeyDown(event), [onKeyDown]);\n\n  if (link) {\n    return (\n      <Link\n        {...link}\n        {...(useTitle && {\n          title: ariaLabel || label\n        })}\n        style={customStyle}\n        className={styleButton}\n        data-name={dataName}\n        data-testid={dataTestId}\n        aria-label={ariaLabel || label}\n      >\n        {contentView}\n      </Link>\n    );\n  }\n\n  return (\n    <button\n      {...(useTitle && {\n        title: ariaLabel || label\n      })}\n      type=\"button\"\n      aria-label={ariaLabel || label}\n      data-name={dataName}\n      data-testid={dataTestId}\n      style={customStyle}\n      className={styleButton}\n      onClick={handleOnClick}\n      onKeyDown={handleOnKeyDown}\n      tabIndex={0}\n    >\n      {contentView}\n    </button>\n  );\n};\n\nButtonLink.propTypes = {\n  type: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'text', 'dangerous']),\n  label: PropTypes.string,\n  'aria-label': PropTypes.string,\n  'data-name': PropTypes.string,\n  'data-testid': PropTypes.string,\n  icon: PropTypes.shape({\n    position: PropTypes.oneOf(['right', 'left']),\n    type: PropTypes.oneOf(keys(ICONS))\n  }),\n  onClick: PropTypes.func,\n  onKeyDown: PropTypes.func,\n  link: PropTypes.shape({\n    href: PropTypes.string,\n    download: PropTypes.bool,\n    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top'])\n  }),\n  disabled: PropTypes.bool,\n  className: PropTypes.string,\n  customStyle: PropTypes.shape({}),\n  useTitle: PropTypes.bool\n};\n\nexport default ButtonLink;\n"],"mappings":"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"}

package/lib/atom/tooltip/index.d.ts

@@ -1,6 +1,6 @@
 export function toggleStateOnKeyPress(state: any, setState: any, ref: any): (event: any) => void;
 export default ToolTip;
-declare function ToolTip({ anchorId, TooltipContent, "aria-label": ariaLabel, "data-testid": dataTestId, closeToolTipInformationTextAriaLabel, toolTipIsVisible: _toolTipIsVisible, iconContainerClassName, delayHide, fontSize, iconSize }: {
+declare function ToolTip({ anchorId, TooltipContent, "aria-label": ariaLabel, "data-testid": dataTestId, closeToolTipInformationTextAriaLabel, toolTipIsVisible: _toolTipIsVisible, iconContainerClassName, delayHide, fontSize, iconSize, AnchorElement, tooltipClassName }: {
     anchorId: any;
     TooltipContent: any;
     "aria-label": any;
@@ -11,6 +11,8 @@ declare function ToolTip({ anchorId, TooltipContent, "aria-label": ariaLabel, "d
     delayHide?: number | undefined;
     fontSize?: number | undefined;
     iconSize?: string | undefined;
+    AnchorElement: any;
+    tooltipClassName: any;
 }): JSX.Element;
 declare namespace ToolTip {
     const propTypes: {
@@ -18,6 +20,8 @@ declare namespace ToolTip {
         'data-testid': PropTypes.Requireable<string>;
         'aria-label': PropTypes.Requireable<string>;
         closeToolTipInformationTextAriaLabel: PropTypes.Validator<string>;
+        AnchorElement: PropTypes.Requireable<(...args: any[]) => any>;
+        tooltipClassName: PropTypes.Requireable<string>;
         iconContainerClassName: PropTypes.Requireable<string>;
         delayHide: PropTypes.Requireable<number>;
         fontSize: PropTypes.Requireable<number>;

package/lib/atom/tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/tooltip/index.js"],"names":[],"mappings":"AAoEO,iGASN;;AAED;;;;;;;;;;;gBA0FC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/tooltip/index.js"],"names":[],"mappings":"AA4EO,iGAUN;;AAED;;;;;;;;;;;;;gBAwGC"}

package/lib/atom/tooltip/index.js

@@ -13,6 +13,10 @@ var _reactTooltip = _interopRequireDefault(require("react-tooltip"));
 
 var _isString = _interopRequireDefault(require("lodash/fp/isString"));
 
+var _has = _interopRequireDefault(require("lodash/fp/has"));
+
+var _isNil = _interopRequireDefault(require("lodash/fp/isNil"));
+
 var _keys = _interopRequireDefault(require("lodash/fp/keys"));
 
 var _novaIcons = require("@coorpacademy/nova-icons");
@@ -40,9 +44,12 @@ const ToolTipWrapper = ({
   closeToolTipInformationTextAriaLabel,
   content,
   handleContentMouseOver,
-  iconSize
+  iconSize,
+  tooltipClassName,
+  usesAnchorElement
 }) => {
-  const coorpToolTipClasses = (0, _classnames.default)(_style.default.toolTip, iconSize === 'big' ? _style.default.bigIconToolTip : _style.default.smallIconToolTip);
+  const coorpToolTipClasses = (0, _classnames.default)(_style.default.toolTip, tooltipClassName, // eslint-disable-next-line no-nested-ternary
+  usesAnchorElement ? null : iconSize === 'big' ? _style.default.bigIconToolTip : _style.default.smallIconToolTip);
   if (!toolTipIsVisible) return null;
 
   if (anchorId) {
@@ -70,11 +77,13 @@ ToolTipWrapper.propTypes = process.env.NODE_ENV !== "production" ? {
   closeToolTipInformationTextAriaLabel: _propTypes.default.string.isRequired,
   content: _propTypes.default.node,
   handleContentMouseOver: _propTypes.default.func,
-  iconSize: _propTypes.default.oneOf((0, _keys.default)(IconSizes))
+  iconSize: _propTypes.default.oneOf((0, _keys.default)(IconSizes)),
+  tooltipClassName: _propTypes.default.string,
+  usesAnchorElement: _propTypes.default.bool
 } : {};
 
 const toggleStateOnKeyPress = (state, setState, ref) => event => {
-  if (event.key === 'Enter') {
+  if (!(0, _has.default)('key', event)) return;else if (event.key === 'Enter') {
     if (ref) ref.current.focus();
     event.stopPropagation();
     event.preventDefault();
@@ -96,7 +105,9 @@ const ToolTip = ({
   iconContainerClassName,
   delayHide = 250,
   fontSize = 14,
-  iconSize = 'small'
+  iconSize = 'small',
+  AnchorElement,
+  tooltipClassName
 }) => {
   const isComponent = (0, _react.useMemo)(() => !(0, _isString.default)(TooltipContent) && /*#__PURE__*/(0, _react.isValidElement)(TooltipContent()), [TooltipContent]);
   const [toolTipIsVisible, setToolTipIsVisible] = (0, _react.useState)(false);
@@ -121,6 +132,20 @@ const ToolTip = ({
       className: (0, _classnames.default)([_style.default.tooltipContent, FontSizes[fontSize]])
     }, TooltipContent);
   }, [TooltipContent, fontSize, isComponent]);
+  const anchorElement = (0, _react.useMemo)(() => AnchorElement ? /*#__PURE__*/_react.default.createElement(AnchorElement, {
+    onKeyDown: handleKeyPress
+  }) : /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: (0, _classnames.default)([_style.default.tooltipIconContainer, iconContainerClassName]),
+    "data-testid": dataTestId,
+    onKeyDown: handleKeyPress,
+    tabIndex: 0
+  }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyInformationIcon, {
+    className: _style.default.informationIcon,
+    width: IconSizes[iconSize],
+    height: IconSizes[iconSize],
+    "aria-label": ariaLabel
+  })), [AnchorElement, ariaLabel, dataTestId, handleKeyPress, iconContainerClassName, iconSize]);
   return anchorId ? /*#__PURE__*/_react.default.createElement(ToolTipWrapper, {
     toolTipIsVisible: _toolTipIsVisible,
     anchorId: anchorId,
@@ -133,25 +158,16 @@ const ToolTip = ({
     className: _style.default.tooltipContainer,
     onMouseLeave: handleMouseLeave,
     onMouseOver: handleMouseOver
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    type: "button",
-    className: (0, _classnames.default)([_style.default.tooltipIconContainer, iconContainerClassName]),
-    "data-testid": dataTestId,
-    onKeyDown: handleKeyPress,
-    tabIndex: 0
-  }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyInformationIcon, {
-    className: _style.default.informationIcon,
-    width: IconSizes[iconSize],
-    height: IconSizes[iconSize],
-    "aria-label": ariaLabel
-  })), /*#__PURE__*/_react.default.createElement(ToolTipWrapper, {
+  }, anchorElement, /*#__PURE__*/_react.default.createElement(ToolTipWrapper, {
     toolTipIsVisible: toolTipIsVisible,
     anchorId: anchorId,
     closeToolTipInformationTextAriaLabel: closeToolTipInformationTextAriaLabel,
     content: content,
     handleContentMouseOver: handleContentMouseOver,
     fontSize: fontSize,
-    iconSize: iconSize
+    iconSize: iconSize,
+    tooltipClassName: tooltipClassName,
+    usesAnchorElement: !(0, _isNil.default)(AnchorElement)
   }));
 };
 
@@ -161,6 +177,10 @@ ToolTip.propTypes = process.env.NODE_ENV !== "production" ? {
   'aria-label': _propTypes.default.string,
   closeToolTipInformationTextAriaLabel: _propTypes.default.string.isRequired,
   // ---------- Regular Tooltip exclusive --------------
+  // If using an Anchor element w/ the regular Tooltip
+  AnchorElement: _propTypes.default.func,
+  tooltipClassName: _propTypes.default.string,
+  //
   iconContainerClassName: _propTypes.default.string,
   delayHide: _propTypes.default.number,
   fontSize: _propTypes.default.oneOf([12, 14]),

package/lib/atom/tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["FontSizes","style","tooltipContentFontSize12","tooltipContentFontSize14","IconSizes","small","big","ToolTipWrapper","toolTipIsVisible","anchorId","closeToolTipInformationTextAriaLabel","content","handleContentMouseOver","iconSize","coorpToolTipClasses","classnames","toolTip","bigIconToolTip","smallIconToolTip","toolTipReact","propTypes","PropTypes","bool","string","isRequired","node","func","oneOf","keys","toggleStateOnKeyPress","state","setState","ref","event","key","current","focus","stopPropagation","preventDefault","ToolTip","TooltipContent","ariaLabel","dataTestId","_toolTipIsVisible","iconContainerClassName","delayHide","fontSize","isComponent","useMemo","isString","isValidElement","setToolTipIsVisible","useState","mouseLeaveTimer","setMouseLeaveTimer","undefined","handleKeyPress","useCallback","clearTimeout","handleMouseOver","handleMouseLeave","setTimeout","tooltipContent","tooltipContainer","tooltipIconContainer","informationIcon","oneOfType","number"],"sources":["../../../src/atom/tooltip/index.js"],"sourcesContent":["import React, {isValidElement, useState, useCallback, useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport ReactTooltip from 'react-tooltip';\nimport isString from 'lodash/fp/isString';\nimport keys from 'lodash/fp/keys';\nimport {NovaCompositionCoorpacademyInformationIcon as InformationIcon} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst FontSizes = {\n  12: style.tooltipContentFontSize12,\n  14: style.tooltipContentFontSize14\n};\n\nconst IconSizes = {\n  small: 12,\n  big: 20\n};\n\nconst ToolTipWrapper = ({\n  toolTipIsVisible,\n  anchorId,\n  closeToolTipInformationTextAriaLabel,\n  content,\n  handleContentMouseOver,\n  iconSize\n}) => {\n  const coorpToolTipClasses = classnames(\n    style.toolTip,\n    iconSize === 'big' ? style.bigIconToolTip : style.smallIconToolTip\n  );\n  if (!toolTipIsVisible) return null;\n  if (anchorId) {\n    return (\n      <ReactTooltip\n        id={anchorId}\n        className={style.toolTipReact}\n        data-event-off=\"click\"\n        place=\"left\"\n        effect=\"solid\"\n        aria-label={closeToolTipInformationTextAriaLabel}\n      >\n        {content}\n      </ReactTooltip>\n    );\n  } else {\n    return (\n      <div\n        className={coorpToolTipClasses}\n        data-testid=\"tooltip\"\n        aria-label={closeToolTipInformationTextAriaLabel}\n        onMouseOver={handleContentMouseOver}\n      >\n        {content}\n      </div>\n    );\n  }\n};\n\nToolTipWrapper.propTypes = {\n  toolTipIsVisible: PropTypes.bool,\n  anchorId: PropTypes.string,\n  closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n  content: PropTypes.node,\n  handleContentMouseOver: PropTypes.func,\n  iconSize: PropTypes.oneOf(keys(IconSizes))\n};\n\nexport const toggleStateOnKeyPress = (state, setState, ref) => event => {\n  if (event.key === 'Enter') {\n    if (ref) ref.current.focus();\n    event.stopPropagation();\n    event.preventDefault();\n    setState(!state);\n  } else if (event.key === 'Tab' || event.key === 'Escape') {\n    setState(false);\n  }\n};\n\nconst ToolTip = ({\n  anchorId,\n  TooltipContent,\n  'aria-label': ariaLabel,\n  'data-testid': dataTestId,\n  closeToolTipInformationTextAriaLabel,\n  toolTipIsVisible: _toolTipIsVisible,\n  iconContainerClassName,\n  delayHide = 250,\n  fontSize = 14,\n  iconSize = 'small'\n}) => {\n  const isComponent = useMemo(\n    () => !isString(TooltipContent) && isValidElement(TooltipContent()),\n    [TooltipContent]\n  );\n\n  const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n\n  const [mouseLeaveTimer, setMouseLeaveTimer] = useState(undefined);\n\n  const handleKeyPress = useCallback(\n    event => {\n      toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible)(event);\n    },\n    [toolTipIsVisible]\n  );\n\n  const handleContentMouseOver = useCallback(() => {\n    mouseLeaveTimer && /* istanbul ignore next */ clearTimeout(mouseLeaveTimer);\n  }, [mouseLeaveTimer]);\n\n  const handleMouseOver = useCallback(() => {\n    mouseLeaveTimer && clearTimeout(mouseLeaveTimer);\n    setToolTipIsVisible(true);\n  }, [mouseLeaveTimer]);\n\n  const handleMouseLeave = useCallback(() => {\n    setMouseLeaveTimer(setTimeout(() => setToolTipIsVisible(false), delayHide));\n  }, [delayHide]);\n\n  const content = useMemo(() => {\n    return isComponent ? (\n      <TooltipContent />\n    ) : (\n      <p className={classnames([style.tooltipContent, FontSizes[fontSize]])}>{TooltipContent}</p>\n    );\n  }, [TooltipContent, fontSize, isComponent]);\n\n  return anchorId ? (\n    <ToolTipWrapper\n      toolTipIsVisible={_toolTipIsVisible}\n      anchorId={anchorId}\n      closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n      content={content}\n      onMouseLeave={handleMouseLeave}\n      onMouseOver={handleMouseOver}\n      fontSize={fontSize}\n    />\n  ) : (\n    <div\n      className={style.tooltipContainer}\n      onMouseLeave={handleMouseLeave}\n      onMouseOver={handleMouseOver}\n    >\n      <button\n        type=\"button\"\n        className={classnames([style.tooltipIconContainer, iconContainerClassName])}\n        data-testid={dataTestId}\n        onKeyDown={handleKeyPress}\n        tabIndex={0}\n      >\n        <InformationIcon\n          className={style.informationIcon}\n          width={IconSizes[iconSize]}\n          height={IconSizes[iconSize]}\n          aria-label={ariaLabel}\n        />\n      </button>\n      <ToolTipWrapper\n        toolTipIsVisible={toolTipIsVisible}\n        anchorId={anchorId}\n        closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n        content={content}\n        handleContentMouseOver={handleContentMouseOver}\n        fontSize={fontSize}\n        iconSize={iconSize}\n      />\n    </div>\n  );\n};\n\nToolTip.propTypes = {\n  TooltipContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.string]),\n  'data-testid': PropTypes.string,\n  'aria-label': PropTypes.string,\n  closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n  // ---------- Regular Tooltip exclusive --------------\n  iconContainerClassName: PropTypes.string,\n  delayHide: PropTypes.number,\n  fontSize: PropTypes.oneOf([12, 14]),\n  iconSize: PropTypes.oneOf(keys(IconSizes)),\n  // ----------  React Tooltip exclusive  --------------\n  // externalHandling: if passed down, React Tooltip is used instead, due to limitations on\n  // parents overflow hidden controls\n  // data-for={anchorId} && data-tooltip-place=\"left\" are needed on the anchored component\n  anchorId: PropTypes.string,\n  toolTipIsVisible: PropTypes.bool\n};\n\nexport default ToolTip;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["FontSizes","style","tooltipContentFontSize12","tooltipContentFontSize14","IconSizes","small","big","ToolTipWrapper","toolTipIsVisible","anchorId","closeToolTipInformationTextAriaLabel","content","handleContentMouseOver","iconSize","tooltipClassName","usesAnchorElement","coorpToolTipClasses","classnames","toolTip","bigIconToolTip","smallIconToolTip","toolTipReact","propTypes","PropTypes","bool","string","isRequired","node","func","oneOf","keys","toggleStateOnKeyPress","state","setState","ref","event","has","key","current","focus","stopPropagation","preventDefault","ToolTip","TooltipContent","ariaLabel","dataTestId","_toolTipIsVisible","iconContainerClassName","delayHide","fontSize","AnchorElement","isComponent","useMemo","isString","isValidElement","setToolTipIsVisible","useState","mouseLeaveTimer","setMouseLeaveTimer","undefined","handleKeyPress","useCallback","clearTimeout","handleMouseOver","handleMouseLeave","setTimeout","tooltipContent","anchorElement","tooltipIconContainer","informationIcon","tooltipContainer","isNil","oneOfType","number"],"sources":["../../../src/atom/tooltip/index.js"],"sourcesContent":["import React, {isValidElement, useState, useCallback, useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport ReactTooltip from 'react-tooltip';\nimport isString from 'lodash/fp/isString';\nimport has from 'lodash/fp/has';\nimport isNil from 'lodash/fp/isNil';\nimport keys from 'lodash/fp/keys';\nimport {NovaCompositionCoorpacademyInformationIcon as InformationIcon} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst FontSizes = {\n  12: style.tooltipContentFontSize12,\n  14: style.tooltipContentFontSize14\n};\n\nconst IconSizes = {\n  small: 12,\n  big: 20\n};\n\nconst ToolTipWrapper = ({\n  toolTipIsVisible,\n  anchorId,\n  closeToolTipInformationTextAriaLabel,\n  content,\n  handleContentMouseOver,\n  iconSize,\n  tooltipClassName,\n  usesAnchorElement\n}) => {\n  const coorpToolTipClasses = classnames(\n    style.toolTip,\n    tooltipClassName,\n    // eslint-disable-next-line no-nested-ternary\n    usesAnchorElement ? null : iconSize === 'big' ? style.bigIconToolTip : style.smallIconToolTip\n  );\n  if (!toolTipIsVisible) return null;\n  if (anchorId) {\n    return (\n      <ReactTooltip\n        id={anchorId}\n        className={style.toolTipReact}\n        data-event-off=\"click\"\n        place=\"left\"\n        effect=\"solid\"\n        aria-label={closeToolTipInformationTextAriaLabel}\n      >\n        {content}\n      </ReactTooltip>\n    );\n  } else {\n    return (\n      <div\n        className={coorpToolTipClasses}\n        data-testid=\"tooltip\"\n        aria-label={closeToolTipInformationTextAriaLabel}\n        onMouseOver={handleContentMouseOver}\n      >\n        {content}\n      </div>\n    );\n  }\n};\n\nToolTipWrapper.propTypes = {\n  toolTipIsVisible: PropTypes.bool,\n  anchorId: PropTypes.string,\n  closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n  content: PropTypes.node,\n  handleContentMouseOver: PropTypes.func,\n  iconSize: PropTypes.oneOf(keys(IconSizes)),\n  tooltipClassName: PropTypes.string,\n  usesAnchorElement: PropTypes.bool\n};\n\nexport const toggleStateOnKeyPress = (state, setState, ref) => event => {\n  if (!has('key', event)) return;\n  else if (event.key === 'Enter') {\n    if (ref) ref.current.focus();\n    event.stopPropagation();\n    event.preventDefault();\n    setState(!state);\n  } else if (event.key === 'Tab' || event.key === 'Escape') {\n    setState(false);\n  }\n};\n\nconst ToolTip = ({\n  anchorId,\n  TooltipContent,\n  'aria-label': ariaLabel,\n  'data-testid': dataTestId,\n  closeToolTipInformationTextAriaLabel,\n  toolTipIsVisible: _toolTipIsVisible,\n  iconContainerClassName,\n  delayHide = 250,\n  fontSize = 14,\n  iconSize = 'small',\n  AnchorElement,\n  tooltipClassName\n}) => {\n  const isComponent = useMemo(\n    () => !isString(TooltipContent) && isValidElement(TooltipContent()),\n    [TooltipContent]\n  );\n\n  const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n\n  const [mouseLeaveTimer, setMouseLeaveTimer] = useState(undefined);\n\n  const handleKeyPress = useCallback(\n    event => {\n      toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible)(event);\n    },\n    [toolTipIsVisible]\n  );\n\n  const handleContentMouseOver = useCallback(() => {\n    mouseLeaveTimer && /* istanbul ignore next */ clearTimeout(mouseLeaveTimer);\n  }, [mouseLeaveTimer]);\n\n  const handleMouseOver = useCallback(() => {\n    mouseLeaveTimer && clearTimeout(mouseLeaveTimer);\n    setToolTipIsVisible(true);\n  }, [mouseLeaveTimer]);\n\n  const handleMouseLeave = useCallback(() => {\n    setMouseLeaveTimer(setTimeout(() => setToolTipIsVisible(false), delayHide));\n  }, [delayHide]);\n\n  const content = useMemo(() => {\n    return isComponent ? (\n      <TooltipContent />\n    ) : (\n      <p className={classnames([style.tooltipContent, FontSizes[fontSize]])}>{TooltipContent}</p>\n    );\n  }, [TooltipContent, fontSize, isComponent]);\n\n  const anchorElement = useMemo(\n    () =>\n      AnchorElement ? (\n        <AnchorElement onKeyDown={handleKeyPress} />\n      ) : (\n        <button\n          type=\"button\"\n          className={classnames([style.tooltipIconContainer, iconContainerClassName])}\n          data-testid={dataTestId}\n          onKeyDown={handleKeyPress}\n          tabIndex={0}\n        >\n          <InformationIcon\n            className={style.informationIcon}\n            width={IconSizes[iconSize]}\n            height={IconSizes[iconSize]}\n            aria-label={ariaLabel}\n          />\n        </button>\n      ),\n    [AnchorElement, ariaLabel, dataTestId, handleKeyPress, iconContainerClassName, iconSize]\n  );\n\n  return anchorId ? (\n    <ToolTipWrapper\n      toolTipIsVisible={_toolTipIsVisible}\n      anchorId={anchorId}\n      closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n      content={content}\n      onMouseLeave={handleMouseLeave}\n      onMouseOver={handleMouseOver}\n      fontSize={fontSize}\n    />\n  ) : (\n    <div\n      className={style.tooltipContainer}\n      onMouseLeave={handleMouseLeave}\n      onMouseOver={handleMouseOver}\n    >\n      {anchorElement}\n      <ToolTipWrapper\n        toolTipIsVisible={toolTipIsVisible}\n        anchorId={anchorId}\n        closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n        content={content}\n        handleContentMouseOver={handleContentMouseOver}\n        fontSize={fontSize}\n        iconSize={iconSize}\n        tooltipClassName={tooltipClassName}\n        usesAnchorElement={!isNil(AnchorElement)}\n      />\n    </div>\n  );\n};\n\nToolTip.propTypes = {\n  TooltipContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.string]),\n  'data-testid': PropTypes.string,\n  'aria-label': PropTypes.string,\n  closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n  // ---------- Regular Tooltip exclusive --------------\n  // If using an Anchor element w/ the regular Tooltip\n  AnchorElement: PropTypes.func,\n  tooltipClassName: PropTypes.string,\n  //\n  iconContainerClassName: PropTypes.string,\n  delayHide: PropTypes.number,\n  fontSize: PropTypes.oneOf([12, 14]),\n  iconSize: PropTypes.oneOf(keys(IconSizes)),\n  // ----------  React Tooltip exclusive  --------------\n  // externalHandling: if passed down, React Tooltip is used instead, due to limitations on\n  // parents overflow hidden controls\n  // data-for={anchorId} && data-tooltip-place=\"left\" are needed on the anchored component\n  anchorId: PropTypes.string,\n  toolTipIsVisible: PropTypes.bool\n};\n\nexport default ToolTip;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,SAAS,GAAG;EAChB,IAAIC,cAAA,CAAMC,wBADM;EAEhB,IAAID,cAAA,CAAME;AAFM,CAAlB;AAKA,MAAMC,SAAS,GAAG;EAChBC,KAAK,EAAE,EADS;EAEhBC,GAAG,EAAE;AAFW,CAAlB;;AAKA,MAAMC,cAAc,GAAG,CAAC;EACtBC,gBADsB;EAEtBC,QAFsB;EAGtBC,oCAHsB;EAItBC,OAJsB;EAKtBC,sBALsB;EAMtBC,QANsB;EAOtBC,gBAPsB;EAQtBC;AARsB,CAAD,KASjB;EACJ,MAAMC,mBAAmB,GAAG,IAAAC,mBAAA,EAC1BhB,cAAA,CAAMiB,OADoB,EAE1BJ,gBAF0B,EAG1B;EACAC,iBAAiB,GAAG,IAAH,GAAUF,QAAQ,KAAK,KAAb,GAAqBZ,cAAA,CAAMkB,cAA3B,GAA4ClB,cAAA,CAAMmB,gBAJnD,CAA5B;EAMA,IAAI,CAACZ,gBAAL,EAAuB,OAAO,IAAP;;EACvB,IAAIC,QAAJ,EAAc;IACZ,oBACE,6BAAC,qBAAD;MACE,EAAE,EAAEA,QADN;MAEE,SAAS,EAAER,cAAA,CAAMoB,YAFnB;MAGE,kBAAe,OAHjB;MAIE,KAAK,EAAC,MAJR;MAKE,MAAM,EAAC,OALT;MAME,cAAYX;IANd,GAQGC,OARH,CADF;EAYD,CAbD,MAaO;IACL,oBACE;MACE,SAAS,EAAEK,mBADb;MAEE,eAAY,SAFd;MAGE,cAAYN,oCAHd;MAIE,WAAW,EAAEE;IAJf,GAMGD,OANH,CADF;EAUD;AACF,CA1CD;;AA4CAJ,cAAc,CAACe,SAAf,2CAA2B;EACzBd,gBAAgB,EAAEe,kBAAA,CAAUC,IADH;EAEzBf,QAAQ,EAAEc,kBAAA,CAAUE,MAFK;EAGzBf,oCAAoC,EAAEa,kBAAA,CAAUE,MAAV,CAAiBC,UAH9B;EAIzBf,OAAO,EAAEY,kBAAA,CAAUI,IAJM;EAKzBf,sBAAsB,EAAEW,kBAAA,CAAUK,IALT;EAMzBf,QAAQ,EAAEU,kBAAA,CAAUM,KAAV,CAAgB,IAAAC,aAAA,EAAK1B,SAAL,CAAhB,CANe;EAOzBU,gBAAgB,EAAES,kBAAA,CAAUE,MAPH;EAQzBV,iBAAiB,EAAEQ,kBAAA,CAAUC;AARJ,CAA3B;;AAWO,MAAMO,qBAAqB,GAAG,CAACC,KAAD,EAAQC,QAAR,EAAkBC,GAAlB,KAA0BC,KAAK,IAAI;EACtE,IAAI,CAAC,IAAAC,YAAA,EAAI,KAAJ,EAAWD,KAAX,CAAL,EAAwB,OAAxB,KACK,IAAIA,KAAK,CAACE,GAAN,KAAc,OAAlB,EAA2B;IAC9B,IAAIH,GAAJ,EAASA,GAAG,CAACI,OAAJ,CAAYC,KAAZ;IACTJ,KAAK,CAACK,eAAN;IACAL,KAAK,CAACM,cAAN;IACAR,QAAQ,CAAC,CAACD,KAAF,CAAR;EACD,CALI,MAKE,IAAIG,KAAK,CAACE,GAAN,KAAc,KAAd,IAAuBF,KAAK,CAACE,GAAN,KAAc,QAAzC,EAAmD;IACxDJ,QAAQ,CAAC,KAAD,CAAR;EACD;AACF,CAVM;;;;AAYP,MAAMS,OAAO,GAAG,CAAC;EACfjC,QADe;EAEfkC,cAFe;EAGf,cAAcC,SAHC;EAIf,eAAeC,UAJA;EAKfnC,oCALe;EAMfF,gBAAgB,EAAEsC,iBANH;EAOfC,sBAPe;EAQfC,SAAS,GAAG,GARG;EASfC,QAAQ,GAAG,EATI;EAUfpC,QAAQ,GAAG,OAVI;EAWfqC,aAXe;EAYfpC;AAZe,CAAD,KAaV;EACJ,MAAMqC,WAAW,GAAG,IAAAC,cAAA,EAClB,MAAM,CAAC,IAAAC,iBAAA,EAASV,cAAT,CAAD,iBAA6B,IAAAW,qBAAA,EAAeX,cAAc,EAA7B,CADjB,EAElB,CAACA,cAAD,CAFkB,CAApB;EAKA,MAAM,CAACnC,gBAAD,EAAmB+C,mBAAnB,IAA0C,IAAAC,eAAA,EAAS,KAAT,CAAhD;EAEA,MAAM,CAACC,eAAD,EAAkBC,kBAAlB,IAAwC,IAAAF,eAAA,EAASG,SAAT,CAA9C;EAEA,MAAMC,cAAc,GAAG,IAAAC,kBAAA,EACrB1B,KAAK,IAAI;IACPJ,qBAAqB,CAACvB,gBAAD,EAAmB+C,mBAAnB,CAArB,CAA6DpB,KAA7D;EACD,CAHoB,EAIrB,CAAC3B,gBAAD,CAJqB,CAAvB;EAOA,MAAMI,sBAAsB,GAAG,IAAAiD,kBAAA,EAAY,MAAM;IAC/CJ,eAAe;IAAI;IAA2BK,YAAY,CAACL,eAAD,CAA1D;EACD,CAF8B,EAE5B,CAACA,eAAD,CAF4B,CAA/B;EAIA,MAAMM,eAAe,GAAG,IAAAF,kBAAA,EAAY,MAAM;IACxCJ,eAAe,IAAIK,YAAY,CAACL,eAAD,CAA/B;IACAF,mBAAmB,CAAC,IAAD,CAAnB;EACD,CAHuB,EAGrB,CAACE,eAAD,CAHqB,CAAxB;EAKA,MAAMO,gBAAgB,GAAG,IAAAH,kBAAA,EAAY,MAAM;IACzCH,kBAAkB,CAACO,UAAU,CAAC,MAAMV,mBAAmB,CAAC,KAAD,CAA1B,EAAmCP,SAAnC,CAAX,CAAlB;EACD,CAFwB,EAEtB,CAACA,SAAD,CAFsB,CAAzB;EAIA,MAAMrC,OAAO,GAAG,IAAAyC,cAAA,EAAQ,MAAM;IAC5B,OAAOD,WAAW,gBAChB,6BAAC,cAAD,OADgB,gBAGhB;MAAG,SAAS,EAAE,IAAAlC,mBAAA,EAAW,CAAChB,cAAA,CAAMiE,cAAP,EAAuBlE,SAAS,CAACiD,QAAD,CAAhC,CAAX;IAAd,GAAwEN,cAAxE,CAHF;EAKD,CANe,EAMb,CAACA,cAAD,EAAiBM,QAAjB,EAA2BE,WAA3B,CANa,CAAhB;EAQA,MAAMgB,aAAa,GAAG,IAAAf,cAAA,EACpB,MACEF,aAAa,gBACX,6BAAC,aAAD;IAAe,SAAS,EAAEU;EAA1B,EADW,gBAGX;IACE,IAAI,EAAC,QADP;IAEE,SAAS,EAAE,IAAA3C,mBAAA,EAAW,CAAChB,cAAA,CAAMmE,oBAAP,EAA6BrB,sBAA7B,CAAX,CAFb;IAGE,eAAaF,UAHf;IAIE,SAAS,EAAEe,cAJb;IAKE,QAAQ,EAAE;EALZ,gBAOE,6BAAC,qDAAD;IACE,SAAS,EAAE3D,cAAA,CAAMoE,eADnB;IAEE,KAAK,EAAEjE,SAAS,CAACS,QAAD,CAFlB;IAGE,MAAM,EAAET,SAAS,CAACS,QAAD,CAHnB;IAIE,cAAY+B;EAJd,EAPF,CALgB,EAoBpB,CAACM,aAAD,EAAgBN,SAAhB,EAA2BC,UAA3B,EAAuCe,cAAvC,EAAuDb,sBAAvD,EAA+ElC,QAA/E,CApBoB,CAAtB;EAuBA,OAAOJ,QAAQ,gBACb,6BAAC,cAAD;IACE,gBAAgB,EAAEqC,iBADpB;IAEE,QAAQ,EAAErC,QAFZ;IAGE,oCAAoC,EAAEC,oCAHxC;IAIE,OAAO,EAAEC,OAJX;IAKE,YAAY,EAAEqD,gBALhB;IAME,WAAW,EAAED,eANf;IAOE,QAAQ,EAAEd;EAPZ,EADa,gBAWb;IACE,SAAS,EAAEhD,cAAA,CAAMqE,gBADnB;IAEE,YAAY,EAAEN,gBAFhB;IAGE,WAAW,EAAED;EAHf,GAKGI,aALH,eAME,6BAAC,cAAD;IACE,gBAAgB,EAAE3D,gBADpB;IAEE,QAAQ,EAAEC,QAFZ;IAGE,oCAAoC,EAAEC,oCAHxC;IAIE,OAAO,EAAEC,OAJX;IAKE,sBAAsB,EAAEC,sBAL1B;IAME,QAAQ,EAAEqC,QANZ;IAOE,QAAQ,EAAEpC,QAPZ;IAQE,gBAAgB,EAAEC,gBARpB;IASE,iBAAiB,EAAE,CAAC,IAAAyD,cAAA,EAAMrB,aAAN;EATtB,EANF,CAXF;AA8BD,CAxGD;;AA0GAR,OAAO,CAACpB,SAAR,2CAAoB;EAClBqB,cAAc,EAAEpB,kBAAA,CAAUiD,SAAV,CAAoB,CAACjD,kBAAA,CAAUK,IAAX,EAAiBL,kBAAA,CAAUI,IAA3B,EAAiCJ,kBAAA,CAAUE,MAA3C,CAApB,CADE;EAElB,eAAeF,kBAAA,CAAUE,MAFP;EAGlB,cAAcF,kBAAA,CAAUE,MAHN;EAIlBf,oCAAoC,EAAEa,kBAAA,CAAUE,MAAV,CAAiBC,UAJrC;EAKlB;EACA;EACAwB,aAAa,EAAE3B,kBAAA,CAAUK,IAPP;EAQlBd,gBAAgB,EAAES,kBAAA,CAAUE,MARV;EASlB;EACAsB,sBAAsB,EAAExB,kBAAA,CAAUE,MAVhB;EAWlBuB,SAAS,EAAEzB,kBAAA,CAAUkD,MAXH;EAYlBxB,QAAQ,EAAE1B,kBAAA,CAAUM,KAAV,CAAgB,CAAC,EAAD,EAAK,EAAL,CAAhB,CAZQ;EAalBhB,QAAQ,EAAEU,kBAAA,CAAUM,KAAV,CAAgB,IAAAC,aAAA,EAAK1B,SAAL,CAAhB,CAbQ;EAclB;EACA;EACA;EACA;EACAK,QAAQ,EAAEc,kBAAA,CAAUE,MAlBF;EAmBlBjB,gBAAgB,EAAEe,kBAAA,CAAUC;AAnBV,CAApB;eAsBekB,O"}

package/lib/atom/tooltip/style.css

@@ -56,7 +56,7 @@
   width: 15px;
   height: 15px;
   transform: rotate(-45deg);
-  background-color: cm_grey_700;
+  background-color: inherit;
   position: inherit;
   border-radius: 2px;
   bottom: -5px;

package/lib/molecule/brand-form-group/index.d.ts

@@ -419,6 +419,7 @@ declare namespace BrandFormGroup {
                 type: PropTypes.Requireable<string>;
             }>>;
             onClick: PropTypes.Requireable<(...args: any[]) => any>;
+            onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
             link: PropTypes.Requireable<PropTypes.InferProps<{
                 href: PropTypes.Requireable<string>;
                 download: PropTypes.Requireable<boolean>;
@@ -427,6 +428,7 @@ declare namespace BrandFormGroup {
             disabled: PropTypes.Requireable<boolean>;
             className: PropTypes.Requireable<string>;
             customStyle: PropTypes.Requireable<PropTypes.InferProps<{}>>;
+            useTitle: PropTypes.Requireable<boolean>;
         }> | PropTypes.InferProps<{
             type: PropTypes.Requireable<string>;
             title: PropTypes.Requireable<string>;

package/lib/molecule/review-correction-popin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/review-correction-popin/index.js"],"names":[],"mappings":";AAoCA,gEAqDC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/review-correction-popin/index.js"],"names":[],"mappings":";AA+EA,gEAqDC"}

package/lib/molecule/review-correction-popin/index.js

@@ -3,7 +3,7 @@
 exports.__esModule = true;
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -11,38 +11,66 @@ var _novaIcons = require("@coorpacademy/nova-icons");
 
 var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
 
+var _provider = _interopRequireWildcard(require("../../atom/provider"));
+
+var _tooltip = _interopRequireDefault(require("../../atom/tooltip"));
+
 var _style = _interopRequireDefault(require("./style.css"));
 
 var _propTypes = _interopRequireDefault(require("./prop-types"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const buildKlfButton = klf => {
-  const klfButtonProps = _extends({}, klf, {
+const KlfButton = ({
+  klf
+}, legacyContext) => {
+  const translate = (0, _provider.GetTranslateFromContext)(legacyContext);
+  const klfButtonProps = (0, _react.useMemo)(() => _extends({}, klf, {
     icon: {
       position: 'left',
       type: 'key'
     },
     type: 'primary'
-  });
-
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.klfContainer
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }), [klf]);
+  const AnchorButton = (0, _react.useCallback)(({
+    onKeyDown
+  }) => /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.klfButtonContainer
   }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, _extends({}, klfButtonProps, {
-    className: _style.default.klfButton
-  }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.toolTip
-  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.klfButton,
+    onKeyDown: onKeyDown,
+    useTitle: false
+  }))), [klfButtonProps]);
+  const TooltipContent = (0, _react.useCallback)(() => /*#__PURE__*/_react.default.createElement("span", {
     className: _style.default.tooltipText // eslint-disable-next-line react/no-danger
     ,
     dangerouslySetInnerHTML: {
       __html: klf.tooltip
     }
-  })));
+  }), [klf.tooltip]);
+  const toolTipProps = (0, _react.useMemo)(() => ({
+    closeToolTipInformationTextAriaLabel: translate('Press the escape key to close the information text'),
+    AnchorElement: AnchorButton,
+    TooltipContent,
+    'aria-label': translate('More details'),
+    tooltipClassName: _style.default.toolTipCustomization
+  }), [AnchorButton, TooltipContent, translate]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.klfContainer
+  }, /*#__PURE__*/_react.default.createElement(_tooltip.default, toolTipProps));
+};
+
+KlfButton.propTypes = process.env.NODE_ENV !== "production" ? {
+  klf: _propTypes.default.klf
+} : {};
+KlfButton.contextTypes = {
+  translate: _provider.default.childContextTypes.translate
 };
 
 const ReviewCorrectionPopin = props => {
@@ -58,7 +86,9 @@ const ReviewCorrectionPopin = props => {
     type: 'primary'
   });
 
-  const cta = type === 'wrong' ? buildKlfButton(klf) : null;
+  const cta = type === 'wrong' ? /*#__PURE__*/_react.default.createElement(KlfButton, {
+    klf: klf
+  }) : null;
   const ICONS = {
     right: _novaIcons.NovaCompositionCoorpacademyCheck,
     wrong: _novaIcons.NovaSolidStatusClose

package/lib/molecule/review-correction-popin/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["buildKlfButton","klf","klfButtonProps","icon","position","type","style","klfContainer","klfButtonContainer","klfButton","toolTip","tooltipText","__html","tooltip","ReviewCorrectionPopin","props","information","resultLabel","next","nextQuestionButtonProps","cta","ICONS","right","RightIcon","wrong","WrongIcon","Icon","wrapper","classnames","popin","correctionSection","iconCircle","iconRight","iconWrong","feedbackSection","labelContainer","label","message","actions","actionsWrong","nextQuestionContainer","nextQuestionButton","propTypes"],"sources":["../../../src/molecule/review-correction-popin/index.js"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport {\n  NovaCompositionCoorpacademyCheck as RightIcon,\n  NovaSolidStatusClose as WrongIcon\n} from '@coorpacademy/nova-icons';\nimport ButtonLink from '../../atom/button-link';\nimport style from './style.css';\nimport propTypes from './prop-types';\n\nconst buildKlfButton = klf => {\n  const klfButtonProps = {\n    ...klf,\n    icon: {\n      position: 'left',\n      type: 'key'\n    },\n    type: 'primary'\n  };\n\n  return (\n    <div className={style.klfContainer}>\n      <div className={style.klfButtonContainer}>\n        <ButtonLink {...klfButtonProps} className={style.klfButton} />\n      </div>\n      <div className={style.toolTip}>\n        <span\n          className={style.tooltipText}\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{__html: klf.tooltip}}\n        />\n      </div>\n    </div>\n  );\n};\n\nconst ReviewCorrectionPopin = props => {\n  const {information, resultLabel, type, klf, next} = props;\n\n  const nextQuestionButtonProps = {\n    ...next,\n    type: 'primary'\n  };\n\n  const cta = type === 'wrong' ? buildKlfButton(klf) : null;\n\n  const ICONS = {\n    right: RightIcon,\n    wrong: WrongIcon\n  };\n  const Icon = ICONS[type];\n\n  return (\n    <div className={style.wrapper} data-testid=\"review-correction-popin\">\n      <div className={classnames(style.popin, type === 'right' ? style.right : style.wrong)}>\n        <div className={style.correctionSection}>\n          <div className={style.iconCircle}>\n            <Icon className={type === 'right' ? style.iconRight : style.iconWrong} />\n          </div>\n          <div className={style.resultLabel}>\n            <span aria-label={resultLabel} role=\"status\">\n              {resultLabel}\n            </span>\n          </div>\n        </div>\n        <div className={style.feedbackSection}>\n          <div className={style.information} aria-label=\"answer-information\">\n            <div className={style.labelContainer}>\n              <span className={style.label} aria-label={information.label}>\n                {information.label}\n              </span>\n            </div>\n            <span\n              className={style.message}\n              aria-label={information.message}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: information.message}}\n            />\n          </div>\n        </div>\n        <div className={type === 'right' ? style.actions : style.actionsWrong}>\n          {cta}\n          <div className={style.nextQuestionContainer} data-testid=\"next-question-button-container\">\n            <ButtonLink {...nextQuestionButtonProps} className={style.nextQuestionButton} />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nReviewCorrectionPopin.propTypes = propTypes;\n\nexport default ReviewCorrectionPopin;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["KlfButton","klf","legacyContext","translate","GetTranslateFromContext","klfButtonProps","useMemo","icon","position","type","AnchorButton","useCallback","onKeyDown","style","klfButtonContainer","klfButton","TooltipContent","tooltipText","__html","tooltip","toolTipProps","closeToolTipInformationTextAriaLabel","AnchorElement","tooltipClassName","toolTipCustomization","klfContainer","propTypes","contextTypes","Provider","childContextTypes","ReviewCorrectionPopin","props","information","resultLabel","next","nextQuestionButtonProps","cta","ICONS","right","RightIcon","wrong","WrongIcon","Icon","wrapper","classnames","popin","correctionSection","iconCircle","iconRight","iconWrong","feedbackSection","labelContainer","label","message","actions","actionsWrong","nextQuestionContainer","nextQuestionButton"],"sources":["../../../src/molecule/review-correction-popin/index.js"],"sourcesContent":["import React, {useCallback, useMemo} from 'react';\nimport classnames from 'classnames';\nimport {\n  NovaCompositionCoorpacademyCheck as RightIcon,\n  NovaSolidStatusClose as WrongIcon\n} from '@coorpacademy/nova-icons';\nimport ButtonLink from '../../atom/button-link';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport Tooltip from '../../atom/tooltip';\nimport style from './style.css';\nimport propTypes from './prop-types';\n\nconst KlfButton = ({klf}, legacyContext) => {\n  const translate = GetTranslateFromContext(legacyContext);\n  const klfButtonProps = useMemo(\n    () => ({\n      ...klf,\n      icon: {\n        position: 'left',\n        type: 'key'\n      },\n      type: 'primary'\n    }),\n    [klf]\n  );\n\n  const AnchorButton = useCallback(\n    ({onKeyDown}) => (\n      <div className={style.klfButtonContainer}>\n        <ButtonLink\n          {...klfButtonProps}\n          className={style.klfButton}\n          onKeyDown={onKeyDown}\n          useTitle={false}\n        />\n      </div>\n    ),\n    [klfButtonProps]\n  );\n\n  const TooltipContent = useCallback(\n    () => (\n      <span\n        className={style.tooltipText}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: klf.tooltip}}\n      />\n    ),\n    [klf.tooltip]\n  );\n\n  const toolTipProps = useMemo(\n    () => ({\n      closeToolTipInformationTextAriaLabel: translate(\n        'Press the escape key to close the information text'\n      ),\n      AnchorElement: AnchorButton,\n      TooltipContent,\n      'aria-label': translate('More details'),\n      tooltipClassName: style.toolTipCustomization\n    }),\n    [AnchorButton, TooltipContent, translate]\n  );\n\n  return (\n    <div className={style.klfContainer}>\n      <Tooltip {...toolTipProps} />\n    </div>\n  );\n};\n\nKlfButton.propTypes = {\n  klf: propTypes.klf\n};\n\nKlfButton.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nconst ReviewCorrectionPopin = props => {\n  const {information, resultLabel, type, klf, next} = props;\n\n  const nextQuestionButtonProps = {\n    ...next,\n    type: 'primary'\n  };\n\n  const cta = type === 'wrong' ? <KlfButton klf={klf} /> : null;\n\n  const ICONS = {\n    right: RightIcon,\n    wrong: WrongIcon\n  };\n  const Icon = ICONS[type];\n\n  return (\n    <div className={style.wrapper} data-testid=\"review-correction-popin\">\n      <div className={classnames(style.popin, type === 'right' ? style.right : style.wrong)}>\n        <div className={style.correctionSection}>\n          <div className={style.iconCircle}>\n            <Icon className={type === 'right' ? style.iconRight : style.iconWrong} />\n          </div>\n          <div className={style.resultLabel}>\n            <span aria-label={resultLabel} role=\"status\">\n              {resultLabel}\n            </span>\n          </div>\n        </div>\n        <div className={style.feedbackSection}>\n          <div className={style.information} aria-label=\"answer-information\">\n            <div className={style.labelContainer}>\n              <span className={style.label} aria-label={information.label}>\n                {information.label}\n              </span>\n            </div>\n            <span\n              className={style.message}\n              aria-label={information.message}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: information.message}}\n            />\n          </div>\n        </div>\n        <div className={type === 'right' ? style.actions : style.actionsWrong}>\n          {cta}\n          <div className={style.nextQuestionContainer} data-testid=\"next-question-button-container\">\n            <ButtonLink {...nextQuestionButtonProps} className={style.nextQuestionButton} />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nReviewCorrectionPopin.propTypes = propTypes;\n\nexport default ReviewCorrectionPopin;\n"],"mappings":"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"}

package/lib/molecule/review-correction-popin/style.css

@@ -137,34 +137,6 @@
   flex: 0 1 auto;
 }
 
-.toolTip {
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity 0.4s;
-  position: absolute;
-  width: 142%;
-  border-radius: 15px;
-  background-color: white;
-  right: 0px;
-  bottom: 55px;
-  filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.32));
-}
-
-.toolTip::before {
-  content: '';
-  display: inline-block;
-  visibility: hidden;
-  opacity: 0;
-  width: 15px;
-  height: 15px;
-  transform: rotate(-45deg);
-  transition: opacity 0.4s;
-  background-color: white;
-  position: inherit;
-  bottom: -7px;
-  right: 10%;
-}
-
 .tooltipText {
   display: inline-block;
   margin: 16px;
@@ -184,16 +156,6 @@
   position: relative;
 }
 
-.klfButtonContainer:hover ~ .toolTip {
-  visibility: visible;
-  opacity: 1;
-}
-
-.klfButtonContainer:hover ~ .toolTip::before {
-  visibility: visible;
-  opacity: 1;
-}
-
 .klfButtonContainer {
   width: 100%;
   margin-right: 16px;
@@ -225,6 +187,13 @@
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.07)), #FFFFFF;
 }
 
+.toolTipCustomization {
+  right: 0;
+  bottom: 52px;
+  background-color: white;
+  filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.32));
+}
+
 @media tablet {
   .resultLabel {
     display: none;
@@ -248,6 +217,10 @@
 }
 
 @media mobile {
+  .toolTipCustomization {
+    right: 90px;
+  }
+
   .popin {
     width: 100%;
     min-height: 100px;
@@ -305,19 +278,4 @@
   .klfButtonContainer {
     margin: 0;
   }
-
-  .toolTip {
-    width: 106%;
-    right: -3%;
-    top: auto;
-    bottom: 52px;
-  }
-
-  .toolTip::before {
-    right: 50%
-  }
-
-  .tooltipText {
-    max-width: none;
-  }
 }

package/lib/organism/brand-form/index.d.ts

@@ -449,6 +449,7 @@ declare namespace BrandForm {
                     type: PropTypes.Requireable<string>;
                 }>>;
                 onClick: PropTypes.Requireable<(...args: any[]) => any>;
+                onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
                 link: PropTypes.Requireable<PropTypes.InferProps<{
                     href: PropTypes.Requireable<string>;
                     download: PropTypes.Requireable<boolean>;
@@ -457,6 +458,7 @@ declare namespace BrandForm {
                 disabled: PropTypes.Requireable<boolean>;
                 className: PropTypes.Requireable<string>;
                 customStyle: PropTypes.Requireable<PropTypes.InferProps<{}>>;
+                useTitle: PropTypes.Requireable<boolean>;
             }> | PropTypes.InferProps<{
                 type: PropTypes.Requireable<string>;
                 title: PropTypes.Requireable<string>;

package/lib/organism/list-items/index.d.ts

@@ -20,6 +20,7 @@ declare namespace ListItems {
                 type: PropTypes.Requireable<string>;
             }>>;
             onClick: PropTypes.Requireable<(...args: any[]) => any>;
+            onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
             link: PropTypes.Requireable<PropTypes.InferProps<{
                 href: PropTypes.Requireable<string>;
                 download: PropTypes.Requireable<boolean>;
@@ -28,6 +29,7 @@ declare namespace ListItems {
             disabled: PropTypes.Requireable<boolean>;
             className: PropTypes.Requireable<string>;
             customStyle: PropTypes.Requireable<PropTypes.InferProps<{}>>;
+            useTitle: PropTypes.Requireable<boolean>;
         }>>;
         items: PropTypes.Requireable<(PropTypes.InferProps<{
             bulletPointMenuButton: PropTypes.Requireable<PropTypes.InferProps<{

package/lib/organism/setup-header/index.d.ts

@@ -14,6 +14,7 @@ declare namespace SetupHeader {
                     type: PropTypes.Requireable<string>;
                 }>>;
                 onClick: PropTypes.Requireable<(...args: any[]) => any>;
+                onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
                 link: PropTypes.Requireable<PropTypes.InferProps<{
                     href: PropTypes.Requireable<string>;
                     download: PropTypes.Requireable<boolean>;
@@ -22,6 +23,7 @@ declare namespace SetupHeader {
                 disabled: PropTypes.Requireable<boolean>;
                 className: PropTypes.Requireable<string>;
                 customStyle: PropTypes.Requireable<PropTypes.InferProps<{}>>;
+                useTitle: PropTypes.Requireable<boolean>;
             }>>;
             logOut: PropTypes.Requireable<PropTypes.InferProps<{
                 type: PropTypes.Requireable<string>;
@@ -34,6 +36,7 @@ declare namespace SetupHeader {
                     type: PropTypes.Requireable<string>;
                 }>>;
                 onClick: PropTypes.Requireable<(...args: any[]) => any>;
+                onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
                 link: PropTypes.Requireable<PropTypes.InferProps<{
                     href: PropTypes.Requireable<string>;
                     download: PropTypes.Requireable<boolean>;
@@ -42,6 +45,7 @@ declare namespace SetupHeader {
                 disabled: PropTypes.Requireable<boolean>;
                 className: PropTypes.Requireable<string>;
                 customStyle: PropTypes.Requireable<PropTypes.InferProps<{}>>;
+                useTitle: PropTypes.Requireable<boolean>;
             }>>;
             globalAnalytics: PropTypes.Requireable<PropTypes.InferProps<{
                 type: PropTypes.Requireable<string>;
@@ -54,6 +58,7 @@ declare namespace SetupHeader {
                     type: PropTypes.Requireable<string>;
                 }>>;
                 onClick: PropTypes.Requireable<(...args: any[]) => any>;
+                onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
                 link: PropTypes.Requireable<PropTypes.InferProps<{
                     href: PropTypes.Requireable<string>;
                     download: PropTypes.Requireable<boolean>;
@@ -62,6 +67,7 @@ declare namespace SetupHeader {
                 disabled: PropTypes.Requireable<boolean>;
                 className: PropTypes.Requireable<string>;
                 customStyle: PropTypes.Requireable<PropTypes.InferProps<{}>>;
+                useTitle: PropTypes.Requireable<boolean>;
             }>>;
             platformList: PropTypes.Requireable<PropTypes.InferProps<{
                 type: PropTypes.Requireable<string>;
@@ -74,6 +80,7 @@ declare namespace SetupHeader {
                     type: PropTypes.Requireable<string>;
                 }>>;
                 onClick: PropTypes.Requireable<(...args: any[]) => any>;
+                onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
                 link: PropTypes.Requireable<PropTypes.InferProps<{
                     href: PropTypes.Requireable<string>;
                     download: PropTypes.Requireable<boolean>;
@@ -82,6 +89,7 @@ declare namespace SetupHeader {
                 disabled: PropTypes.Requireable<boolean>;
                 className: PropTypes.Requireable<string>;
                 customStyle: PropTypes.Requireable<PropTypes.InferProps<{}>>;
+                useTitle: PropTypes.Requireable<boolean>;
             }>>;
         }>>;
         const platformName: PropTypes.Requireable<string>;

package/lib/organism/wizard-contents/index.d.ts

@@ -466,6 +466,7 @@ declare namespace WizardContents {
                         type: PropTypes.Requireable<string>;
                     }>>;
                     onClick: PropTypes.Requireable<(...args: any[]) => any>;
+                    onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
                     link: PropTypes.Requireable<PropTypes.InferProps<{
                         href: PropTypes.Requireable<string>;
                         download: PropTypes.Requireable<boolean>;
@@ -474,6 +475,7 @@ declare namespace WizardContents {
                     disabled: PropTypes.Requireable<boolean>;
                     className: PropTypes.Requireable<string>;
                     customStyle: PropTypes.Requireable<PropTypes.InferProps<{}>>;
+                    useTitle: PropTypes.Requireable<boolean>;
                 }> | PropTypes.InferProps<{
                     type: PropTypes.Requireable<string>;
                     title: PropTypes.Requireable<string>;

package/lib/template/activity/engine-stars.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"engine-stars.d.ts","sourceRoot":"","sources":["../../../src/template/activity/engine-stars.js"],"names":[],"mappings":";AAuEA,0EA6IC"}
+{"version":3,"file":"engine-stars.d.ts","sourceRoot":"","sources":["../../../src/template/activity/engine-stars.js"],"names":[],"mappings":";AAuEA,0EA8IC"}