@coorpacademy/components 11.13.2 → 11.13.3-alpha.2

package/es/atom/button-link/index.d.ts

@@ -12,6 +12,7 @@ declare namespace ButtonLink {
             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>;
@@ -20,6 +21,7 @@ declare namespace ButtonLink {
         disabled: PropTypes.Requireable<boolean>;
         className: PropTypes.Requireable<string>;
         customStyle: PropTypes.Requireable<PropTypes.InferProps<{}>>;
+        useTitle: PropTypes.Requireable<boolean>;
     };
 }
 import PropTypes from "prop-types";

package/es/atom/button-link/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link/index.js"],"names":[],"mappings":";AA6BA,qDA2DC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link/index.js"],"names":[],"mappings":";AA6BA,qDAqEC"}

package/es/atom/button-link/index.js

@@ -49,34 +49,41 @@ const ButtonLink = props => {
     'aria-label': ariaLabel,
     link,
     onClick = _noop,
+    onKeyDown = _noop,
     className,
-    customStyle
+    customStyle,
+    useTitle = true
   } = props;
   const contentView = getButtonContent(icon, label);
   const styleButton = classnames(className, style.button, type === 'primary' && style.primary, type === 'secondary' && style.secondary, type === 'tertiary' && style.tertiary, type === 'text' && style.text, type === 'dangerous' && style.dangerous, link && style.link, disabled && style.disabled);
   const handleOnClick = useCallback(() => onClick(), [onClick]);
+  const handleOnKeyDown = useCallback(event => onKeyDown(event), [onKeyDown]);
 
   if (link) {
-    return /*#__PURE__*/React.createElement(Link, _extends({}, link, {
+    return /*#__PURE__*/React.createElement(Link, _extends({}, link, useTitle && {
+      title: ariaLabel || label
+    }, {
       style: customStyle,
       className: styleButton,
       "data-name": dataName,
       "data-testid": dataTestId,
-      "aria-label": ariaLabel || label,
-      title: ariaLabel || label
+      "aria-label": ariaLabel || label
     }), contentView);
   }
 
-  return /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/React.createElement("button", _extends({}, useTitle && {
+    title: ariaLabel || label
+  }, {
     type: "button",
     "aria-label": ariaLabel || label,
-    title: ariaLabel || label,
     "data-name": dataName,
     "data-testid": dataTestId,
     style: customStyle,
     className: styleButton,
-    onClick: handleOnClick
-  }, contentView);
+    onClick: handleOnClick,
+    onKeyDown: handleOnKeyDown,
+    tabIndex: 0
+  }), contentView);
 };
 
 ButtonLink.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -90,6 +97,7 @@ ButtonLink.propTypes = process.env.NODE_ENV !== "production" ? {
     type: PropTypes.oneOf(_keys(ICONS))
   }),
   onClick: PropTypes.func,
+  onKeyDown: PropTypes.func,
   link: PropTypes.shape({
     href: PropTypes.string,
     download: PropTypes.bool,
@@ -97,7 +105,8 @@ ButtonLink.propTypes = process.env.NODE_ENV !== "production" ? {
   }),
   disabled: PropTypes.bool,
   className: PropTypes.string,
-  customStyle: PropTypes.shape({})
+  customStyle: PropTypes.shape({}),
+  useTitle: PropTypes.bool
 } : {};
 export default ButtonLink;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","classnames","Link","ICONS","style","getButtonContent","icon","label","type","position","Icon","buttonContent","ButtonLink","props","disabled","dataName","dataTestId","ariaLabel","link","onClick","className","customStyle","contentView","styleButton","button","primary","secondary","tertiary","text","dangerous","handleOnClick","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":["React","useCallback","PropTypes","classnames","Link","ICONS","style","getButtonContent","icon","label","type","position","Icon","buttonContent","ButtonLink","props","disabled","dataName","dataTestId","ariaLabel","link","onClick","onKeyDown","className","customStyle","useTitle","contentView","styleButton","button","primary","secondary","tertiary","text","dangerous","handleOnClick","handleOnKeyDown","event","title","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/es/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/es/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/es/atom/tooltip/index.js

@@ -3,6 +3,8 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import ReactTooltip from 'react-tooltip';
 import isString from 'lodash/fp/isString';
+import has from 'lodash/fp/has';
+import isNil from 'lodash/fp/isNil';
 import keys from 'lodash/fp/keys';
 import { NovaCompositionCoorpacademyInformationIcon as InformationIcon } from '@coorpacademy/nova-icons';
 import style from './style.css';
@@ -21,9 +23,12 @@ const ToolTipWrapper = ({
   closeToolTipInformationTextAriaLabel,
   content,
   handleContentMouseOver,
-  iconSize
+  iconSize,
+  tooltipClassName,
+  usesAnchorElement
 }) => {
-  const coorpToolTipClasses = classnames(style.toolTip, iconSize === 'big' ? style.bigIconToolTip : style.smallIconToolTip);
+  const coorpToolTipClasses = classnames(style.toolTip, tooltipClassName, // eslint-disable-next-line no-nested-ternary
+  usesAnchorElement ? null : iconSize === 'big' ? style.bigIconToolTip : style.smallIconToolTip);
   if (!toolTipIsVisible) return null;
 
   if (anchorId) {
@@ -51,10 +56,12 @@ ToolTipWrapper.propTypes = process.env.NODE_ENV !== "production" ? {
   closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,
   content: PropTypes.node,
   handleContentMouseOver: PropTypes.func,
-  iconSize: PropTypes.oneOf(keys(IconSizes))
+  iconSize: PropTypes.oneOf(keys(IconSizes)),
+  tooltipClassName: PropTypes.string,
+  usesAnchorElement: PropTypes.bool
 } : {};
 export const toggleStateOnKeyPress = (state, setState, ref) => event => {
-  if (event.key === 'Enter') {
+  if (!has('key', event)) return;else if (event.key === 'Enter') {
     if (ref) ref.current.focus();
     event.stopPropagation();
     event.preventDefault();
@@ -74,7 +81,9 @@ const ToolTip = ({
   iconContainerClassName,
   delayHide = 250,
   fontSize = 14,
-  iconSize = 'small'
+  iconSize = 'small',
+  AnchorElement,
+  tooltipClassName
 }) => {
   const isComponent = useMemo(() => !isString(TooltipContent) && /*#__PURE__*/isValidElement(TooltipContent()), [TooltipContent]);
   const [toolTipIsVisible, setToolTipIsVisible] = useState(false);
@@ -99,6 +108,20 @@ const ToolTip = ({
       className: classnames([style.tooltipContent, FontSizes[fontSize]])
     }, TooltipContent);
   }, [TooltipContent, fontSize, isComponent]);
+  const anchorElement = useMemo(() => AnchorElement ? /*#__PURE__*/React.createElement(AnchorElement, {
+    onKeyDown: handleKeyPress
+  }) : /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: classnames([style.tooltipIconContainer, iconContainerClassName]),
+    "data-testid": dataTestId,
+    onKeyDown: handleKeyPress,
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement(InformationIcon, {
+    className: style.informationIcon,
+    width: IconSizes[iconSize],
+    height: IconSizes[iconSize],
+    "aria-label": ariaLabel
+  })), [AnchorElement, ariaLabel, dataTestId, handleKeyPress, iconContainerClassName, iconSize]);
   return anchorId ? /*#__PURE__*/React.createElement(ToolTipWrapper, {
     toolTipIsVisible: _toolTipIsVisible,
     anchorId: anchorId,
@@ -111,25 +134,16 @@ const ToolTip = ({
     className: style.tooltipContainer,
     onMouseLeave: handleMouseLeave,
     onMouseOver: handleMouseOver
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: classnames([style.tooltipIconContainer, iconContainerClassName]),
-    "data-testid": dataTestId,
-    onKeyDown: handleKeyPress,
-    tabIndex: 0
-  }, /*#__PURE__*/React.createElement(InformationIcon, {
-    className: style.informationIcon,
-    width: IconSizes[iconSize],
-    height: IconSizes[iconSize],
-    "aria-label": ariaLabel
-  })), /*#__PURE__*/React.createElement(ToolTipWrapper, {
+  }, anchorElement, /*#__PURE__*/React.createElement(ToolTipWrapper, {
     toolTipIsVisible: toolTipIsVisible,
     anchorId: anchorId,
     closeToolTipInformationTextAriaLabel: closeToolTipInformationTextAriaLabel,
     content: content,
     handleContentMouseOver: handleContentMouseOver,
     fontSize: fontSize,
-    iconSize: iconSize
+    iconSize: iconSize,
+    tooltipClassName: tooltipClassName,
+    usesAnchorElement: !isNil(AnchorElement)
   }));
 };
 
@@ -139,6 +153,10 @@ ToolTip.propTypes = process.env.NODE_ENV !== "production" ? {
   'aria-label': PropTypes.string,
   closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,
   // ---------- Regular Tooltip exclusive --------------
+  // If using an Anchor element w/ the regular Tooltip
+  AnchorElement: PropTypes.func,
+  tooltipClassName: PropTypes.string,
+  //
   iconContainerClassName: PropTypes.string,
   delayHide: PropTypes.number,
   fontSize: PropTypes.oneOf([12, 14]),

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","isValidElement","useState","useCallback","useMemo","classnames","PropTypes","ReactTooltip","isString","keys","NovaCompositionCoorpacademyInformationIcon","InformationIcon","style","FontSizes","tooltipContentFontSize12","tooltipContentFontSize14","IconSizes","small","big","ToolTipWrapper","toolTipIsVisible","anchorId","closeToolTipInformationTextAriaLabel","content","handleContentMouseOver","iconSize","coorpToolTipClasses","toolTip","bigIconToolTip","smallIconToolTip","toolTipReact","propTypes","bool","string","isRequired","node","func","oneOf","toggleStateOnKeyPress","state","setState","ref","event","key","current","focus","stopPropagation","preventDefault","ToolTip","TooltipContent","ariaLabel","dataTestId","_toolTipIsVisible","iconContainerClassName","delayHide","fontSize","isComponent","setToolTipIsVisible","mouseLeaveTimer","setMouseLeaveTimer","undefined","handleKeyPress","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":["React","isValidElement","useState","useCallback","useMemo","classnames","PropTypes","ReactTooltip","isString","has","isNil","keys","NovaCompositionCoorpacademyInformationIcon","InformationIcon","style","FontSizes","tooltipContentFontSize12","tooltipContentFontSize14","IconSizes","small","big","ToolTipWrapper","toolTipIsVisible","anchorId","closeToolTipInformationTextAriaLabel","content","handleContentMouseOver","iconSize","tooltipClassName","usesAnchorElement","coorpToolTipClasses","toolTip","bigIconToolTip","smallIconToolTip","toolTipReact","propTypes","bool","string","isRequired","node","func","oneOf","toggleStateOnKeyPress","state","setState","ref","event","key","current","focus","stopPropagation","preventDefault","ToolTip","TooltipContent","ariaLabel","dataTestId","_toolTipIsVisible","iconContainerClassName","delayHide","fontSize","AnchorElement","isComponent","setToolTipIsVisible","mouseLeaveTimer","setMouseLeaveTimer","undefined","handleKeyPress","clearTimeout","handleMouseOver","handleMouseLeave","setTimeout","tooltipContent","anchorElement","tooltipIconContainer","informationIcon","tooltipContainer","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":"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"}

package/es/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/es/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/es/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/es/molecule/review-correction-popin/index.js

@@ -1,36 +1,58 @@
 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); }
 
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import classnames from 'classnames';
 import { NovaCompositionCoorpacademyCheck as RightIcon, NovaSolidStatusClose as WrongIcon } from '@coorpacademy/nova-icons';
 import ButtonLink from '../../atom/button-link';
+import Provider, { GetTranslateFromContext } from '../../atom/provider';
+import Tooltip from '../../atom/tooltip';
 import style from './style.css';
 import propTypes from './prop-types';
 
-const buildKlfButton = klf => {
-  const klfButtonProps = _extends({}, klf, {
+const KlfButton = ({
+  klf
+}, legacyContext) => {
+  const translate = GetTranslateFromContext(legacyContext);
+  const klfButtonProps = useMemo(() => _extends({}, klf, {
     icon: {
       position: 'left',
       type: 'key'
     },
     type: 'primary'
-  });
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: style.klfContainer
-  }, /*#__PURE__*/React.createElement("div", {
+  }), [klf]);
+  const AnchorButton = useCallback(({
+    onKeyDown
+  }) => /*#__PURE__*/React.createElement("div", {
     className: style.klfButtonContainer
   }, /*#__PURE__*/React.createElement(ButtonLink, _extends({}, klfButtonProps, {
-    className: style.klfButton
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: style.toolTip
-  }, /*#__PURE__*/React.createElement("span", {
+    className: style.klfButton,
+    onKeyDown: onKeyDown,
+    useTitle: false
+  }))), [klfButtonProps]);
+  const TooltipContent = useCallback(() => /*#__PURE__*/React.createElement("span", {
     className: style.tooltipText // eslint-disable-next-line react/no-danger
     ,
     dangerouslySetInnerHTML: {
       __html: klf.tooltip
     }
-  })));
+  }), [klf.tooltip]);
+  const toolTipProps = useMemo(() => ({
+    closeToolTipInformationTextAriaLabel: translate('Press the escape key to close the information text'),
+    AnchorElement: AnchorButton,
+    TooltipContent,
+    'aria-label': translate('More details'),
+    tooltipClassName: style.toolTipCustomization
+  }), [AnchorButton, TooltipContent, translate]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.klfContainer
+  }, /*#__PURE__*/React.createElement(Tooltip, toolTipProps));
+};
+
+KlfButton.propTypes = process.env.NODE_ENV !== "production" ? {
+  klf: propTypes.klf
+} : {};
+KlfButton.contextTypes = {
+  translate: Provider.childContextTypes.translate
 };
 
 const ReviewCorrectionPopin = props => {
@@ -46,7 +68,9 @@ const ReviewCorrectionPopin = props => {
     type: 'primary'
   });
 
-  const cta = type === 'wrong' ? buildKlfButton(klf) : null;
+  const cta = type === 'wrong' ? /*#__PURE__*/React.createElement(KlfButton, {
+    klf: klf
+  }) : null;
   const ICONS = {
     right: RightIcon,
     wrong: WrongIcon

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","classnames","NovaCompositionCoorpacademyCheck","RightIcon","NovaSolidStatusClose","WrongIcon","ButtonLink","style","propTypes","buildKlfButton","klf","klfButtonProps","icon","position","type","klfContainer","klfButtonContainer","klfButton","toolTip","tooltipText","__html","tooltip","ReviewCorrectionPopin","props","information","resultLabel","next","nextQuestionButtonProps","cta","ICONS","right","wrong","Icon","wrapper","popin","correctionSection","iconCircle","iconRight","iconWrong","feedbackSection","labelContainer","label","message","actions","actionsWrong","nextQuestionContainer","nextQuestionButton"],"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":["React","useCallback","useMemo","classnames","NovaCompositionCoorpacademyCheck","RightIcon","NovaSolidStatusClose","WrongIcon","ButtonLink","Provider","GetTranslateFromContext","Tooltip","style","propTypes","KlfButton","klf","legacyContext","translate","klfButtonProps","icon","position","type","AnchorButton","onKeyDown","klfButtonContainer","klfButton","TooltipContent","tooltipText","__html","tooltip","toolTipProps","closeToolTipInformationTextAriaLabel","AnchorElement","tooltipClassName","toolTipCustomization","klfContainer","contextTypes","childContextTypes","ReviewCorrectionPopin","props","information","resultLabel","next","nextQuestionButtonProps","cta","ICONS","right","wrong","Icon","wrapper","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/es/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/es/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/es/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<{