@coorpacademy/components 11.12.5 → 11.12.6

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

@@ -386,16 +386,27 @@ declare namespace BrandFormGroup {
             color: any;
             submitValue: PropTypes.Requireable<string>;
             disabled: PropTypes.Requireable<boolean>;
-            isLinkDisabled: PropTypes.Requireable<boolean>;
             href: PropTypes.Requireable<string>;
             download: PropTypes.Requireable<boolean>;
             target: PropTypes.Requireable<string>;
-            onClick: PropTypes.Requireable<(...args: any[]) => any>;
             children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
             className: PropTypes.Requireable<string>;
-            buttonContentClassName: PropTypes.Requireable<string>;
             style: PropTypes.Requireable<PropTypes.InferProps<{}>>;
             'data-name': PropTypes.Requireable<string>;
+            'aria-label': PropTypes.Requireable<string>;
+            'data-testid': PropTypes.Requireable<string>;
+            useButtonTag: PropTypes.Requireable<boolean>;
+            onClick: PropTypes.Requireable<(...args: any[]) => any>;
+            onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+            onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
+            onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
+            buttonRef: PropTypes.Requireable<PropTypes.InferProps<{}>>;
+            'data-for': PropTypes.Requireable<string>;
+            'data-tooltip-place': PropTypes.Requireable<string>;
+            'data-tip': PropTypes.Requireable<boolean>;
+            isLinkDisabled: PropTypes.Requireable<boolean>;
+            useWrapper: PropTypes.Requireable<boolean>;
+            buttonContentClassName: PropTypes.Requireable<string>;
         }> | PropTypes.InferProps<{
             buttonType: PropTypes.Requireable<string>;
             type: PropTypes.Requireable<string>;

package/es/molecule/brand-form-group/style.css

@@ -42,10 +42,16 @@
   justify-content: space-evenly;
 }
 
+.grid .field {
+  margin-right: 20px;
+}
+
 .field {
-  display: flex;
-  margin: 0 32px 64px 0;
-  flex: 1 0 0;
+  margin-bottom: 10px;
+}
+
+.field:last-child {
+  margin-bottom: 0;
 }
 
 
@@ -71,8 +77,8 @@
 .imageUploadContainer {
  display: flex;
  flex-direction: column;
- width: 100%;
- min-width: 230px;
+ height: 300px;
+ width: 360px;
 }
 
 @media desktop {
@@ -81,8 +87,6 @@
   }
 
   .groupGrid .grid {
-    display: flex;
-    flex-direction: row;
     justify-content: flex-start;
     margin-top: 0;
   }

package/es/molecule/card/customer.js

@@ -14,7 +14,7 @@ const Customer = props => {
     type,
     coorpOriginal,
     theme,
-    disabled = false,
+    disabled,
     'aria-label': ariaLabel
   } = props;
   const className = classnames(THEMES[theme], style.customer, type === 'chapter' ? style.chapterCustomer : null);

package/es/molecule/card/customer.js.map

@@ -1 +1 @@
-{"version":3,"file":"customer.js","names":["React","PropTypes","classnames","style","THEMES","default","coorpmanager","Customer","props","name","type","coorpOriginal","theme","disabled","ariaLabel","className","customer","chapterCustomer","content","coorp","original","propTypes","oneOf","string","bool","isRequired"],"sources":["../../../src/molecule/card/customer.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {keys} from 'lodash/fp';\nimport style from './customer.css';\n\nexport const THEMES = {\n  default: null,\n  coorpmanager: style.coorpmanager\n};\n\nconst Customer = props => {\n  const {name, type, coorpOriginal, theme, disabled = false, 'aria-label': ariaLabel} = props;\n  const className = classnames(\n    THEMES[theme],\n    style.customer,\n    type === 'chapter' ? style.chapterCustomer : null\n  );\n\n  return (\n    <div className={className} disabled={disabled} aria-label={ariaLabel}>\n      <div className={style.content}>\n        {coorpOriginal ? <span className={style.coorp}>Coorp </span> : null}\n        {coorpOriginal ? <span className={style.original}>Original </span> : null}\n        {!coorpOriginal && name}\n      </div>\n    </div>\n  );\n};\n\nCustomer.propTypes = {\n  theme: PropTypes.oneOf(keys(THEMES)),\n  type: PropTypes.string,\n  name: PropTypes.string,\n  coorpOriginal: PropTypes.bool.isRequired,\n  disabled: PropTypes.bool,\n  'aria-label': PropTypes.string\n};\n\nexport default Customer;\n"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,OAAOC,KAAP,MAAkB,gBAAlB;AAEA,OAAO,MAAMC,MAAM,GAAG;EACpBC,OAAO,EAAE,IADW;EAEpBC,YAAY,EAAEH,KAAK,CAACG;AAFA,CAAf;;AAKP,MAAMC,QAAQ,GAAGC,KAAK,IAAI;EACxB,MAAM;IAACC,IAAD;IAAOC,IAAP;IAAaC,aAAb;IAA4BC,KAA5B;IAAmCC,QAAQ,GAAG,KAA9C;IAAqD,cAAcC;EAAnE,IAAgFN,KAAtF;EACA,MAAMO,SAAS,GAAGb,UAAU,CAC1BE,MAAM,CAACQ,KAAD,CADoB,EAE1BT,KAAK,CAACa,QAFoB,EAG1BN,IAAI,KAAK,SAAT,GAAqBP,KAAK,CAACc,eAA3B,GAA6C,IAHnB,CAA5B;EAMA,oBACE;IAAK,SAAS,EAAEF,SAAhB;IAA2B,QAAQ,EAAEF,QAArC;IAA+C,cAAYC;EAA3D,gBACE;IAAK,SAAS,EAAEX,KAAK,CAACe;EAAtB,GACGP,aAAa,gBAAG;IAAM,SAAS,EAAER,KAAK,CAACgB;EAAvB,YAAH,GAAiD,IADjE,EAEGR,aAAa,gBAAG;IAAM,SAAS,EAAER,KAAK,CAACiB;EAAvB,eAAH,GAAuD,IAFvE,EAGG,CAACT,aAAD,IAAkBF,IAHrB,CADF,CADF;AASD,CAjBD;;AAmBAF,QAAQ,CAACc,SAAT,2CAAqB;EACnBT,KAAK,EAAEX,SAAS,CAACqB,KAAV,CAAgB,MAAKlB,MAAL,CAAhB,CADY;EAEnBM,IAAI,EAAET,SAAS,CAACsB,MAFG;EAGnBd,IAAI,EAAER,SAAS,CAACsB,MAHG;EAInBZ,aAAa,EAAEV,SAAS,CAACuB,IAAV,CAAeC,UAJX;EAKnBZ,QAAQ,EAAEZ,SAAS,CAACuB,IALD;EAMnB,cAAcvB,SAAS,CAACsB;AANL,CAArB;AASA,eAAehB,QAAf"}
+{"version":3,"file":"customer.js","names":["React","PropTypes","classnames","style","THEMES","default","coorpmanager","Customer","props","name","type","coorpOriginal","theme","disabled","ariaLabel","className","customer","chapterCustomer","content","coorp","original","propTypes","oneOf","string","bool","isRequired"],"sources":["../../../src/molecule/card/customer.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {keys} from 'lodash/fp';\nimport style from './customer.css';\n\nexport const THEMES = {\n  default: null,\n  coorpmanager: style.coorpmanager\n};\n\nconst Customer = props => {\n  const {name, type, coorpOriginal, theme, disabled, 'aria-label': ariaLabel} = props;\n  const className = classnames(\n    THEMES[theme],\n    style.customer,\n    type === 'chapter' ? style.chapterCustomer : null\n  );\n\n  return (\n    <div className={className} disabled={disabled} aria-label={ariaLabel}>\n      <div className={style.content}>\n        {coorpOriginal ? <span className={style.coorp}>Coorp </span> : null}\n        {coorpOriginal ? <span className={style.original}>Original </span> : null}\n        {!coorpOriginal && name}\n      </div>\n    </div>\n  );\n};\n\nCustomer.propTypes = {\n  theme: PropTypes.oneOf(keys(THEMES)),\n  type: PropTypes.string,\n  name: PropTypes.string,\n  coorpOriginal: PropTypes.bool.isRequired,\n  disabled: PropTypes.bool,\n  'aria-label': PropTypes.string\n};\n\nexport default Customer;\n"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,OAAOC,KAAP,MAAkB,gBAAlB;AAEA,OAAO,MAAMC,MAAM,GAAG;EACpBC,OAAO,EAAE,IADW;EAEpBC,YAAY,EAAEH,KAAK,CAACG;AAFA,CAAf;;AAKP,MAAMC,QAAQ,GAAGC,KAAK,IAAI;EACxB,MAAM;IAACC,IAAD;IAAOC,IAAP;IAAaC,aAAb;IAA4BC,KAA5B;IAAmCC,QAAnC;IAA6C,cAAcC;EAA3D,IAAwEN,KAA9E;EACA,MAAMO,SAAS,GAAGb,UAAU,CAC1BE,MAAM,CAACQ,KAAD,CADoB,EAE1BT,KAAK,CAACa,QAFoB,EAG1BN,IAAI,KAAK,SAAT,GAAqBP,KAAK,CAACc,eAA3B,GAA6C,IAHnB,CAA5B;EAMA,oBACE;IAAK,SAAS,EAAEF,SAAhB;IAA2B,QAAQ,EAAEF,QAArC;IAA+C,cAAYC;EAA3D,gBACE;IAAK,SAAS,EAAEX,KAAK,CAACe;EAAtB,GACGP,aAAa,gBAAG;IAAM,SAAS,EAAER,KAAK,CAACgB;EAAvB,YAAH,GAAiD,IADjE,EAEGR,aAAa,gBAAG;IAAM,SAAS,EAAER,KAAK,CAACiB;EAAvB,eAAH,GAAuD,IAFvE,EAGG,CAACT,aAAD,IAAkBF,IAHrB,CADF,CADF;AASD,CAjBD;;AAmBAF,QAAQ,CAACc,SAAT,2CAAqB;EACnBT,KAAK,EAAEX,SAAS,CAACqB,KAAV,CAAgB,MAAKlB,MAAL,CAAhB,CADY;EAEnBM,IAAI,EAAET,SAAS,CAACsB,MAFG;EAGnBd,IAAI,EAAER,SAAS,CAACsB,MAHG;EAInBZ,aAAa,EAAEV,SAAS,CAACuB,IAAV,CAAeC,UAJX;EAKnBZ,QAAQ,EAAEZ,SAAS,CAACuB,IALD;EAMnB,cAAcvB,SAAS,CAACsB;AANL,CAArB;AASA,eAAehB,QAAf"}

package/es/molecule/card/favorite.css

@@ -16,10 +16,12 @@
   z-index: 1;
   font-size: 30px;
   overflow: hidden;
-  line-height: 20px;
+  line-height: 0px;
   box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.11);
   background-color: #ffffff;
   border-radius: 100%;
+  border: none;
+  padding: 0;
 }
 
 .favorite:hover .moreIcon {
@@ -29,10 +31,6 @@
 .favorite .moreIcon {
   color: color(black a(63%));
   transition: color 0.25s ease-in-out;
-  margin: 6px;
-}
-.favorite .checkIcon {
-  margin: 6px;
 }
 
 .favorite.selected .moreIcon {
@@ -47,48 +45,30 @@
   color: inherit;
 }
 
-.showToolTip {
-  visibility: hidden;
-  background-color: color(black a(80%));
-  color: #fff;
-  text-align: center;
-  border-radius: 3px;
-  z-index: 1;
-  opacity: 0;
-  transition: opacity 0.8s;
+.favoriteWrapper {
   position: absolute;
-  max-width: 104px;
-  right: 45px;
-  top: 8px;
+  width: 100%;
 }
 
-.showToolTip::after {
-  content: "";
-  position: absolute;
-  top: 8px;
-  left: 100%;
-  border: solid 5px ;
-  border-color: transparent transparent transparent color(black a(80%));
+.favoriteWrapper .favorite + [class*="__react_component_tooltip"]:not([class*="toolTipReact"]) {
+  position: sticky;
+  top: unset !important;
+  left: unset !important;
+  transform: translateX(25%);
 }
 
-.blocFavorite:hover .showToolTip {
-  visibility: visible;
-  opacity: 1;
+.favoriteWrapper .favorite + [class*="__react_component_tooltip"] {
+  opacity: 0.95!important;
 }
 
-.showToolTip span {
-  display: block;
-  word-wrap: break-word;
-  padding: 3px 10px 5px;
-  font-family: "Gilroy";
-  font-size: 12px;
-  font-weight: bold;
-}
 
 @media mobile {
   .favorite {
     font-size: 33px;
   }
+  .favoriteWrapper .favorite + [class*="__react_component_tooltip"]:not([class*="toolTipReact"]) {
+    transform: translateX(10%);
+  }
 }
 
 @media (hover: none) {

package/es/molecule/card/favorite.d.ts

@@ -44,6 +44,7 @@ declare namespace Favorite {
                 [x: string]: any;
             }>;
         }>>;
+        const translate: PropTypes.Requireable<(...args: any[]) => any>;
     }
 }
 import PropTypes from "prop-types";

package/es/molecule/card/favorite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"favorite.d.ts","sourceRoot":"","sources":["../../../src/molecule/card/favorite.js"],"names":[],"mappings":";AAWA;;;;;;;;oCAoEC"}
+{"version":3,"file":"favorite.d.ts","sourceRoot":"","sources":["../../../src/molecule/card/favorite.js"],"names":[],"mappings":";AAcA;;;;;;;;oCA0IC"}

package/es/molecule/card/favorite.js

@@ -1,11 +1,15 @@
 import _noop from "lodash/fp/noop";
 import _isEmpty from "lodash/fp/isEmpty";
+import _has from "lodash/fp/has";
 import _get from "lodash/fp/get";
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { v5 as uuidV5 } from 'uuid';
 import { NovaCompositionNavigationMore as MoreIcon, NovaCompositionCoorpacademyCheck as CheckIcon } from '@coorpacademy/nova-icons';
-import Provider, { GetSkinFromContext } from '../../atom/provider';
+import Provider, { GetSkinFromContext, GetTranslateFromContext } from '../../atom/provider';
+import ToolTip, { toggleStateOnKeyPress } from '../../atom/tooltip';
+import Button from '../../atom/button';
 import style from './favorite.css';
 
 const Favorite = ({
@@ -18,6 +22,7 @@ const Favorite = ({
   disabled
 }, legacyContext) => {
   const skin = GetSkinFromContext(legacyContext);
+  const translate = GetTranslateFromContext(legacyContext);
   const handleFavoriteClick = useCallback(e => {
     e.stopPropagation();
     e.preventDefault();
@@ -30,26 +35,43 @@ const Favorite = ({
 
   const brandColor = _get('common.brand', skin);
 
-  const toolTipView = useMemo(() => !_isEmpty(removeFavoriteToolTip) && !_isEmpty(addFavoriteToolTip) ? /*#__PURE__*/React.createElement("div", {
-    className: style.showToolTip
-  }, /*#__PURE__*/React.createElement("span", null, favorite ? removeFavoriteToolTip : addFavoriteToolTip)) : null, [addFavoriteToolTip, favorite, removeFavoriteToolTip]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: style.blocFavorite
-  }, toolTipView, /*#__PURE__*/React.createElement("div", {
-    "data-name": "favorite",
-    "aria-label": ariaLabel.favorite,
-    className: classnames(style.favorite, className, favorite && style.selected),
-    onClick: handleFavoriteClick,
-    style: {
-      color: primaryColor
-    }
-  }, favorite ? /*#__PURE__*/React.createElement(CheckIcon, {
+  const buttonRef = useRef(null);
+  const allowToolTip = useMemo(() => !_isEmpty(removeFavoriteToolTip) && !_isEmpty(addFavoriteToolTip), [addFavoriteToolTip, removeFavoriteToolTip]); // to be replaced by useId when React17 is bumped to React18
+
+  const [favoriteButtonAnchorId] = useState(allowToolTip ? uuidV5('engaged-battle-', uuidV5.URL) : undefined);
+  const toolTipContent = useMemo( // eslint-disable-next-line no-nested-ternary
+  () => allowToolTip ? favorite ? removeFavoriteToolTip : addFavoriteToolTip : null, [addFavoriteToolTip, favorite, removeFavoriteToolTip, allowToolTip]);
+  const [mouseLeaveTimer, setMouseLeaveTimer] = useState(undefined);
+  const [toolTipIsVisible, setToolTipIsVisible] = useState(false);
+  const handleMouseOver = useCallback(() => {
+    mouseLeaveTimer && clearTimeout(mouseLeaveTimer);
+    /* istanbul ignore next */
+
+    _has(['current', 'focus'], buttonRef) && buttonRef.current.focus();
+    setToolTipIsVisible(true);
+  }, [mouseLeaveTimer]);
+  const handleMouseLeave = useCallback(() => {
+    setMouseLeaveTimer(setTimeout(() => {
+      setToolTipIsVisible(false); // @ts-expect-error (error: blur does not exists on type never)
+
+      /* istanbul ignore next */
+
+      _has(['current', 'blur'], buttonRef) && buttonRef.current.blur();
+    }, 500));
+  }, []);
+  const handleKeyPress = useCallback(event => {
+    toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible, buttonRef)(event);
+  }, [toolTipIsVisible]);
+  const iconWrapperClassName = useMemo(() => classnames(style.favorite, className, favorite && style.selected), [className, favorite]);
+  const icon = useMemo(() => favorite ? /*#__PURE__*/React.createElement(CheckIcon // eslint-disable-next-line css-modules/no-undef-class
+  , {
     className: style.checkIcon,
     style: {
       color: brandColor
     },
     width: 13,
     height: 13,
+    "data-testid": "favorite-check-icon",
     "aria-label": ariaLabel.removeFromFavorite
   }) : /*#__PURE__*/React.createElement(MoreIcon, {
     className: style.moreIcon,
@@ -58,8 +80,40 @@ const Favorite = ({
     },
     width: 13,
     height: 13,
+    "data-testid": "favorite-add-icon",
     "aria-label": ariaLabel.addToFavorite
-  })));
+  }), [ariaLabel.addToFavorite, ariaLabel.removeFromFavorite, brandColor, darkColor, favorite]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.favoriteWrapper,
+    "data-testid": "favorite-wrapper"
+  }, /*#__PURE__*/React.createElement(Button, {
+    buttonRef: buttonRef,
+    type: "button",
+    "data-for": favoriteButtonAnchorId,
+    "data-tooltip-place": "left",
+    "data-tip": allowToolTip,
+    "data-name": "favorite",
+    "data-testid": "favorite-button",
+    "aria-label": ariaLabel.favorite,
+    buttonContentClassName: iconWrapperClassName,
+    onClick: handleFavoriteClick,
+    style: {
+      color: primaryColor
+    },
+    onKeyDown: handleKeyPress,
+    onMouseLeave: handleMouseLeave,
+    onMouseOver: handleMouseOver,
+    tabIndex: 0,
+    useButtonTag: true,
+    useWrapper: false
+  }, icon), /*#__PURE__*/React.createElement(ToolTip, {
+    fontSize: 12,
+    anchorId: favoriteButtonAnchorId,
+    toolTipIsVisible: toolTipIsVisible,
+    TooltipContent: toolTipContent,
+    closeToolTipInformationTextAriaLabel: translate('Press the escape key to close the information text'),
+    stickyOnKeyboardNavigation: true
+  }));
 };
 
 Favorite.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -76,7 +130,8 @@ Favorite.propTypes = process.env.NODE_ENV !== "production" ? {
   })
 } : {};
 Favorite.contextTypes = {
-  skin: Provider.childContextTypes.skin
+  skin: Provider.childContextTypes.skin,
+  translate: Provider.childContextTypes.translate
 };
 export default Favorite;
 //# sourceMappingURL=favorite.js.map

package/es/molecule/card/favorite.js.map

@@ -1 +1 @@
-{"version":3,"file":"favorite.js","names":["React","useCallback","useMemo","PropTypes","classnames","NovaCompositionNavigationMore","MoreIcon","NovaCompositionCoorpacademyCheck","CheckIcon","Provider","GetSkinFromContext","style","Favorite","favorite","addFavoriteToolTip","removeFavoriteToolTip","className","ariaLabel","onFavoriteClick","disabled","legacyContext","skin","handleFavoriteClick","e","stopPropagation","preventDefault","primaryColor","darkColor","brandColor","toolTipView","showToolTip","blocFavorite","selected","color","checkIcon","removeFromFavorite","moreIcon","addToFavorite","propTypes","string","bool","func","shape","contextTypes","childContextTypes"],"sources":["../../../src/molecule/card/favorite.js"],"sourcesContent":["import React, {useCallback, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {get, isEmpty, noop} from 'lodash/fp';\nimport {\n  NovaCompositionNavigationMore as MoreIcon,\n  NovaCompositionCoorpacademyCheck as CheckIcon\n} from '@coorpacademy/nova-icons';\nimport Provider, {GetSkinFromContext} from '../../atom/provider';\nimport style from './favorite.css';\n\nconst Favorite = (\n  {\n    favorite,\n    addFavoriteToolTip,\n    removeFavoriteToolTip,\n    className,\n    'aria-label': ariaLabel = {},\n    onFavoriteClick = noop,\n    disabled\n  },\n  legacyContext\n) => {\n  const skin = GetSkinFromContext(legacyContext);\n  const handleFavoriteClick = useCallback(\n    e => {\n      e.stopPropagation();\n      e.preventDefault();\n      if (!disabled) onFavoriteClick(e);\n    },\n    [disabled, onFavoriteClick]\n  );\n\n  const primaryColor = get('common.primary', skin);\n  const darkColor = get('common.dark', skin);\n  const brandColor = get('common.brand', skin);\n\n  const toolTipView = useMemo(\n    () =>\n      !isEmpty(removeFavoriteToolTip) && !isEmpty(addFavoriteToolTip) ? (\n        <div className={style.showToolTip}>\n          <span>{favorite ? removeFavoriteToolTip : addFavoriteToolTip}</span>\n        </div>\n      ) : null,\n    [addFavoriteToolTip, favorite, removeFavoriteToolTip]\n  );\n\n  return (\n    <div className={style.blocFavorite}>\n      {toolTipView}\n      <div\n        data-name=\"favorite\"\n        aria-label={ariaLabel.favorite}\n        className={classnames(style.favorite, className, favorite && style.selected)}\n        onClick={handleFavoriteClick}\n        style={{\n          color: primaryColor\n        }}\n      >\n        {favorite ? (\n          <CheckIcon\n            className={style.checkIcon}\n            style={{color: brandColor}}\n            width={13}\n            height={13}\n            aria-label={ariaLabel.removeFromFavorite}\n          />\n        ) : (\n          <MoreIcon\n            className={style.moreIcon}\n            style={{color: darkColor}}\n            width={13}\n            height={13}\n            aria-label={ariaLabel.addToFavorite}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nFavorite.propTypes = {\n  className: PropTypes.string,\n  favorite: PropTypes.bool,\n  disabled: PropTypes.bool,\n  addFavoriteToolTip: PropTypes.string,\n  removeFavoriteToolTip: PropTypes.string,\n  onFavoriteClick: PropTypes.func,\n  'aria-label': PropTypes.shape({\n    favorite: PropTypes.string,\n    addToFavorite: PropTypes.string,\n    removeFromFavorite: PropTypes.string\n  })\n};\n\nFavorite.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default Favorite;\n"],"mappings":"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"}
+{"version":3,"file":"favorite.js","names":["React","useCallback","useMemo","useRef","useState","PropTypes","classnames","v5","uuidV5","NovaCompositionNavigationMore","MoreIcon","NovaCompositionCoorpacademyCheck","CheckIcon","Provider","GetSkinFromContext","GetTranslateFromContext","ToolTip","toggleStateOnKeyPress","Button","style","Favorite","favorite","addFavoriteToolTip","removeFavoriteToolTip","className","ariaLabel","onFavoriteClick","disabled","legacyContext","skin","translate","handleFavoriteClick","e","stopPropagation","preventDefault","primaryColor","darkColor","brandColor","buttonRef","allowToolTip","favoriteButtonAnchorId","URL","undefined","toolTipContent","mouseLeaveTimer","setMouseLeaveTimer","toolTipIsVisible","setToolTipIsVisible","handleMouseOver","clearTimeout","current","focus","handleMouseLeave","setTimeout","blur","handleKeyPress","event","iconWrapperClassName","selected","icon","checkIcon","color","removeFromFavorite","moreIcon","addToFavorite","favoriteWrapper","propTypes","string","bool","func","shape","contextTypes","childContextTypes"],"sources":["../../../src/molecule/card/favorite.js"],"sourcesContent":["import React, {useCallback, useMemo, useRef, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {v5 as uuidV5} from 'uuid';\nimport {get, has, isEmpty, noop} from 'lodash/fp';\nimport {\n  NovaCompositionNavigationMore as MoreIcon,\n  NovaCompositionCoorpacademyCheck as CheckIcon\n} from '@coorpacademy/nova-icons';\nimport Provider, {GetSkinFromContext, GetTranslateFromContext} from '../../atom/provider';\nimport ToolTip, {toggleStateOnKeyPress} from '../../atom/tooltip';\nimport Button from '../../atom/button';\nimport style from './favorite.css';\n\nconst Favorite = (\n  {\n    favorite,\n    addFavoriteToolTip,\n    removeFavoriteToolTip,\n    className,\n    'aria-label': ariaLabel = {},\n    onFavoriteClick = noop,\n    disabled\n  },\n  legacyContext\n) => {\n  const skin = GetSkinFromContext(legacyContext);\n  const translate = GetTranslateFromContext(legacyContext);\n  const handleFavoriteClick = useCallback(\n    e => {\n      e.stopPropagation();\n      e.preventDefault();\n      if (!disabled) onFavoriteClick(e);\n    },\n    [disabled, onFavoriteClick]\n  );\n\n  const primaryColor = get('common.primary', skin);\n  const darkColor = get('common.dark', skin);\n  const brandColor = get('common.brand', skin);\n\n  const buttonRef = useRef(null);\n\n  const allowToolTip = useMemo(\n    () => !isEmpty(removeFavoriteToolTip) && !isEmpty(addFavoriteToolTip),\n    [addFavoriteToolTip, removeFavoriteToolTip]\n  );\n\n  // to be replaced by useId when React17 is bumped to React18\n  const [favoriteButtonAnchorId] = useState(\n    allowToolTip ? uuidV5('engaged-battle-', uuidV5.URL) : undefined\n  );\n\n  const toolTipContent = useMemo(\n    // eslint-disable-next-line no-nested-ternary\n    () => (allowToolTip ? (favorite ? removeFavoriteToolTip : addFavoriteToolTip) : null),\n    [addFavoriteToolTip, favorite, removeFavoriteToolTip, allowToolTip]\n  );\n\n  const [mouseLeaveTimer, setMouseLeaveTimer] = useState(undefined);\n\n  const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n\n  const handleMouseOver = useCallback(() => {\n    mouseLeaveTimer && clearTimeout(mouseLeaveTimer);\n    /* istanbul ignore next */ has(['current', 'focus'], buttonRef) && buttonRef.current.focus();\n    setToolTipIsVisible(true);\n  }, [mouseLeaveTimer]);\n\n  const handleMouseLeave = useCallback(() => {\n    setMouseLeaveTimer(\n      setTimeout(() => {\n        setToolTipIsVisible(false);\n        // @ts-expect-error (error: blur does not exists on type never)\n        /* istanbul ignore next */ has(['current', 'blur'], buttonRef) && buttonRef.current.blur();\n      }, 500)\n    );\n  }, []);\n\n  const handleKeyPress = useCallback(\n    event => {\n      toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible, buttonRef)(event);\n    },\n    [toolTipIsVisible]\n  );\n\n  const iconWrapperClassName = useMemo(\n    () => classnames(style.favorite, className, favorite && style.selected),\n    [className, favorite]\n  );\n  const icon = useMemo(\n    () =>\n      favorite ? (\n        <CheckIcon\n          // eslint-disable-next-line css-modules/no-undef-class\n          className={style.checkIcon}\n          style={{color: brandColor}}\n          width={13}\n          height={13}\n          data-testid=\"favorite-check-icon\"\n          aria-label={ariaLabel.removeFromFavorite}\n        />\n      ) : (\n        <MoreIcon\n          className={style.moreIcon}\n          style={{color: darkColor}}\n          width={13}\n          height={13}\n          data-testid=\"favorite-add-icon\"\n          aria-label={ariaLabel.addToFavorite}\n        />\n      ),\n    [ariaLabel.addToFavorite, ariaLabel.removeFromFavorite, brandColor, darkColor, favorite]\n  );\n\n  return (\n    <div className={style.favoriteWrapper} data-testid=\"favorite-wrapper\">\n      <Button\n        buttonRef={buttonRef}\n        type=\"button\"\n        data-for={favoriteButtonAnchorId}\n        data-tooltip-place=\"left\"\n        data-tip={allowToolTip}\n        data-name=\"favorite\"\n        data-testid=\"favorite-button\"\n        aria-label={ariaLabel.favorite}\n        buttonContentClassName={iconWrapperClassName}\n        onClick={handleFavoriteClick}\n        style={{\n          color: primaryColor\n        }}\n        onKeyDown={handleKeyPress}\n        onMouseLeave={handleMouseLeave}\n        onMouseOver={handleMouseOver}\n        tabIndex={0}\n        useButtonTag\n        useWrapper={false}\n      >\n        {icon}\n      </Button>\n      <ToolTip\n        fontSize={12}\n        anchorId={favoriteButtonAnchorId}\n        toolTipIsVisible={toolTipIsVisible}\n        TooltipContent={toolTipContent}\n        closeToolTipInformationTextAriaLabel={translate(\n          'Press the escape key to close the information text'\n        )}\n        stickyOnKeyboardNavigation\n      />\n    </div>\n  );\n};\n\nFavorite.propTypes = {\n  className: PropTypes.string,\n  favorite: PropTypes.bool,\n  disabled: PropTypes.bool,\n  addFavoriteToolTip: PropTypes.string,\n  removeFavoriteToolTip: PropTypes.string,\n  onFavoriteClick: PropTypes.func,\n  'aria-label': PropTypes.shape({\n    favorite: PropTypes.string,\n    addToFavorite: PropTypes.string,\n    removeFromFavorite: PropTypes.string\n  })\n};\n\nFavorite.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nexport default Favorite;\n"],"mappings":"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"}

package/es/molecule/card/selectable.js

@@ -8,7 +8,7 @@ import style from './selectable.css';
 const Selectable = props => {
   const {
     isSelected,
-    hidden = false,
+    hidden,
     'aria-label': ariaLabel = {}
   } = props;
   if (_isUndefined(isSelected)) return null;

package/es/molecule/card/selectable.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectable.js","names":["React","PropTypes","classnames","NovaSolidStatusCheckCircle2","CheckIcon","NovaSolidRemoveAddAddCircle1","AddIcon","NovaLineContentEditionHide","HideIcon","NovaCompositionCoorpacademyEye","ShowIcon","style","Selectable","props","isSelected","hidden","ariaLabel","selectable","selected","circle","iconWrapper","addIcon","select","checkIcon","unSelect","hideIcon","hide","showIcon","show","propTypes","bool","shape","string"],"sources":["../../../src/molecule/card/selectable.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isUndefined} from 'lodash/fp';\nimport {\n  NovaSolidStatusCheckCircle2 as CheckIcon,\n  NovaSolidRemoveAddAddCircle1 as AddIcon,\n  NovaLineContentEditionHide as HideIcon,\n  NovaCompositionCoorpacademyEye as ShowIcon\n} from '@coorpacademy/nova-icons';\nimport style from './selectable.css';\n\nconst Selectable = props => {\n  const {isSelected, hidden = false, 'aria-label': ariaLabel = {}} = props;\n\n  if (isUndefined(isSelected)) return null;\n\n  return (\n    <div\n      className={classnames(style.selectable, isSelected && style.selected, hidden && style.hidden)}\n    >\n      <div className={style.circle} />\n      <div className={style.iconWrapper}>\n        <AddIcon className={style.addIcon} aria-label={ariaLabel.select} />\n        <CheckIcon className={style.checkIcon} aria-label={ariaLabel.unSelect} />\n        <HideIcon className={style.hideIcon} aria-label={ariaLabel.hide} />\n        <ShowIcon className={style.showIcon} aria-label={ariaLabel.show} />\n      </div>\n    </div>\n  );\n};\n\nSelectable.propTypes = {\n  isSelected: PropTypes.bool,\n  hidden: PropTypes.bool,\n  'aria-label': PropTypes.shape({\n    select: PropTypes.string,\n    unSelect: PropTypes.string\n  })\n};\n\nexport default Selectable;\n"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,SACEC,2BAA2B,IAAIC,SADjC,EAEEC,4BAA4B,IAAIC,OAFlC,EAGEC,0BAA0B,IAAIC,QAHhC,EAIEC,8BAA8B,IAAIC,QAJpC,QAKO,0BALP;AAMA,OAAOC,KAAP,MAAkB,kBAAlB;;AAEA,MAAMC,UAAU,GAAGC,KAAK,IAAI;EAC1B,MAAM;IAACC,UAAD;IAAaC,MAAM,GAAG,KAAtB;IAA6B,cAAcC,SAAS,GAAG;EAAvD,IAA6DH,KAAnE;EAEA,IAAI,aAAYC,UAAZ,CAAJ,EAA6B,OAAO,IAAP;EAE7B,oBACE;IACE,SAAS,EAAEZ,UAAU,CAACS,KAAK,CAACM,UAAP,EAAmBH,UAAU,IAAIH,KAAK,CAACO,QAAvC,EAAiDH,MAAM,IAAIJ,KAAK,CAACI,MAAjE;EADvB,gBAGE;IAAK,SAAS,EAAEJ,KAAK,CAACQ;EAAtB,EAHF,eAIE;IAAK,SAAS,EAAER,KAAK,CAACS;EAAtB,gBACE,oBAAC,OAAD;IAAS,SAAS,EAAET,KAAK,CAACU,OAA1B;IAAmC,cAAYL,SAAS,CAACM;EAAzD,EADF,eAEE,oBAAC,SAAD;IAAW,SAAS,EAAEX,KAAK,CAACY,SAA5B;IAAuC,cAAYP,SAAS,CAACQ;EAA7D,EAFF,eAGE,oBAAC,QAAD;IAAU,SAAS,EAAEb,KAAK,CAACc,QAA3B;IAAqC,cAAYT,SAAS,CAACU;EAA3D,EAHF,eAIE,oBAAC,QAAD;IAAU,SAAS,EAAEf,KAAK,CAACgB,QAA3B;IAAqC,cAAYX,SAAS,CAACY;EAA3D,EAJF,CAJF,CADF;AAaD,CAlBD;;AAoBAhB,UAAU,CAACiB,SAAX,2CAAuB;EACrBf,UAAU,EAAEb,SAAS,CAAC6B,IADD;EAErBf,MAAM,EAAEd,SAAS,CAAC6B,IAFG;EAGrB,cAAc7B,SAAS,CAAC8B,KAAV,CAAgB;IAC5BT,MAAM,EAAErB,SAAS,CAAC+B,MADU;IAE5BR,QAAQ,EAAEvB,SAAS,CAAC+B;EAFQ,CAAhB;AAHO,CAAvB;AASA,eAAepB,UAAf"}
+{"version":3,"file":"selectable.js","names":["React","PropTypes","classnames","NovaSolidStatusCheckCircle2","CheckIcon","NovaSolidRemoveAddAddCircle1","AddIcon","NovaLineContentEditionHide","HideIcon","NovaCompositionCoorpacademyEye","ShowIcon","style","Selectable","props","isSelected","hidden","ariaLabel","selectable","selected","circle","iconWrapper","addIcon","select","checkIcon","unSelect","hideIcon","hide","showIcon","show","propTypes","bool","shape","string"],"sources":["../../../src/molecule/card/selectable.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isUndefined} from 'lodash/fp';\nimport {\n  NovaSolidStatusCheckCircle2 as CheckIcon,\n  NovaSolidRemoveAddAddCircle1 as AddIcon,\n  NovaLineContentEditionHide as HideIcon,\n  NovaCompositionCoorpacademyEye as ShowIcon\n} from '@coorpacademy/nova-icons';\nimport style from './selectable.css';\n\nconst Selectable = props => {\n  const {isSelected, hidden, 'aria-label': ariaLabel = {}} = props;\n\n  if (isUndefined(isSelected)) return null;\n\n  return (\n    <div\n      className={classnames(style.selectable, isSelected && style.selected, hidden && style.hidden)}\n    >\n      <div className={style.circle} />\n      <div className={style.iconWrapper}>\n        <AddIcon className={style.addIcon} aria-label={ariaLabel.select} />\n        <CheckIcon className={style.checkIcon} aria-label={ariaLabel.unSelect} />\n        <HideIcon className={style.hideIcon} aria-label={ariaLabel.hide} />\n        <ShowIcon className={style.showIcon} aria-label={ariaLabel.show} />\n      </div>\n    </div>\n  );\n};\n\nSelectable.propTypes = {\n  isSelected: PropTypes.bool,\n  hidden: PropTypes.bool,\n  'aria-label': PropTypes.shape({\n    select: PropTypes.string,\n    unSelect: PropTypes.string\n  })\n};\n\nexport default Selectable;\n"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,SACEC,2BAA2B,IAAIC,SADjC,EAEEC,4BAA4B,IAAIC,OAFlC,EAGEC,0BAA0B,IAAIC,QAHhC,EAIEC,8BAA8B,IAAIC,QAJpC,QAKO,0BALP;AAMA,OAAOC,KAAP,MAAkB,kBAAlB;;AAEA,MAAMC,UAAU,GAAGC,KAAK,IAAI;EAC1B,MAAM;IAACC,UAAD;IAAaC,MAAb;IAAqB,cAAcC,SAAS,GAAG;EAA/C,IAAqDH,KAA3D;EAEA,IAAI,aAAYC,UAAZ,CAAJ,EAA6B,OAAO,IAAP;EAE7B,oBACE;IACE,SAAS,EAAEZ,UAAU,CAACS,KAAK,CAACM,UAAP,EAAmBH,UAAU,IAAIH,KAAK,CAACO,QAAvC,EAAiDH,MAAM,IAAIJ,KAAK,CAACI,MAAjE;EADvB,gBAGE;IAAK,SAAS,EAAEJ,KAAK,CAACQ;EAAtB,EAHF,eAIE;IAAK,SAAS,EAAER,KAAK,CAACS;EAAtB,gBACE,oBAAC,OAAD;IAAS,SAAS,EAAET,KAAK,CAACU,OAA1B;IAAmC,cAAYL,SAAS,CAACM;EAAzD,EADF,eAEE,oBAAC,SAAD;IAAW,SAAS,EAAEX,KAAK,CAACY,SAA5B;IAAuC,cAAYP,SAAS,CAACQ;EAA7D,EAFF,eAGE,oBAAC,QAAD;IAAU,SAAS,EAAEb,KAAK,CAACc,QAA3B;IAAqC,cAAYT,SAAS,CAACU;EAA3D,EAHF,eAIE,oBAAC,QAAD;IAAU,SAAS,EAAEf,KAAK,CAACgB,QAA3B;IAAqC,cAAYX,SAAS,CAACY;EAA3D,EAJF,CAJF,CADF;AAaD,CAlBD;;AAoBAhB,UAAU,CAACiB,SAAX,2CAAuB;EACrBf,UAAU,EAAEb,SAAS,CAAC6B,IADD;EAErBf,MAAM,EAAEd,SAAS,CAAC6B,IAFG;EAGrB,cAAc7B,SAAS,CAAC8B,KAAV,CAAgB;IAC5BT,MAAM,EAAErB,SAAS,CAAC+B,MADU;IAE5BR,QAAQ,EAAEvB,SAAS,CAAC+B;EAFQ,CAAhB;AAHO,CAAvB;AASA,eAAepB,UAAf"}

package/es/molecule/drag-and-drop-wrapper/style.css

@@ -10,5 +10,5 @@
 .dragAndDrop {
   margin-right: 16px;
   width: 202px;
-  min-height: 183px;
+  height: 183px;
 }

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

@@ -416,16 +416,27 @@ declare namespace BrandForm {
                 color: any;
                 submitValue: PropTypes.Requireable<string>;
                 disabled: PropTypes.Requireable<boolean>;
-                isLinkDisabled: PropTypes.Requireable<boolean>;
                 href: PropTypes.Requireable<string>;
                 download: PropTypes.Requireable<boolean>;
                 target: PropTypes.Requireable<string>;
-                onClick: PropTypes.Requireable<(...args: any[]) => any>;
                 children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
                 className: PropTypes.Requireable<string>;
-                buttonContentClassName: PropTypes.Requireable<string>;
                 style: PropTypes.Requireable<PropTypes.InferProps<{}>>;
                 'data-name': PropTypes.Requireable<string>;
+                'aria-label': PropTypes.Requireable<string>;
+                'data-testid': PropTypes.Requireable<string>;
+                useButtonTag: PropTypes.Requireable<boolean>;
+                onClick: PropTypes.Requireable<(...args: any[]) => any>;
+                onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+                onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
+                onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
+                buttonRef: PropTypes.Requireable<PropTypes.InferProps<{}>>;
+                'data-for': PropTypes.Requireable<string>;
+                'data-tooltip-place': PropTypes.Requireable<string>;
+                'data-tip': PropTypes.Requireable<boolean>;
+                isLinkDisabled: PropTypes.Requireable<boolean>;
+                useWrapper: PropTypes.Requireable<boolean>;
+                buttonContentClassName: PropTypes.Requireable<string>;
             }> | PropTypes.InferProps<{
                 buttonType: PropTypes.Requireable<string>;
                 type: PropTypes.Requireable<string>;

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

@@ -433,16 +433,27 @@ declare namespace WizardContents {
                     color: any;
                     submitValue: PropTypes.Requireable<string>;
                     disabled: PropTypes.Requireable<boolean>;
-                    isLinkDisabled: PropTypes.Requireable<boolean>;
                     href: PropTypes.Requireable<string>;
                     download: PropTypes.Requireable<boolean>;
                     target: PropTypes.Requireable<string>;
-                    onClick: PropTypes.Requireable<(...args: any[]) => any>;
                     children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
                     className: PropTypes.Requireable<string>;
-                    buttonContentClassName: PropTypes.Requireable<string>;
                     style: PropTypes.Requireable<PropTypes.InferProps<{}>>;
                     'data-name': PropTypes.Requireable<string>;
+                    'aria-label': PropTypes.Requireable<string>;
+                    'data-testid': PropTypes.Requireable<string>;
+                    useButtonTag: PropTypes.Requireable<boolean>;
+                    onClick: PropTypes.Requireable<(...args: any[]) => any>;
+                    onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+                    onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
+                    onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
+                    buttonRef: PropTypes.Requireable<PropTypes.InferProps<{}>>;
+                    'data-for': PropTypes.Requireable<string>;
+                    'data-tooltip-place': PropTypes.Requireable<string>;
+                    'data-tip': PropTypes.Requireable<boolean>;
+                    isLinkDisabled: PropTypes.Requireable<boolean>;
+                    useWrapper: PropTypes.Requireable<boolean>;
+                    buttonContentClassName: PropTypes.Requireable<string>;
                 }> | PropTypes.InferProps<{
                     buttonType: PropTypes.Requireable<string>;
                     type: PropTypes.Requireable<string>;

package/es/template/back-office/brand-update/index.d.ts

@@ -518,16 +518,27 @@ declare namespace BrandUpdate {
                     color: any;
                     submitValue: PropTypes.Requireable<string>;
                     disabled: PropTypes.Requireable<boolean>;
-                    isLinkDisabled: PropTypes.Requireable<boolean>;
                     href: PropTypes.Requireable<string>;
                     download: PropTypes.Requireable<boolean>;
                     target: PropTypes.Requireable<string>;
-                    onClick: PropTypes.Requireable<(...args: any[]) => any>;
                     children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
                     className: PropTypes.Requireable<string>;
-                    buttonContentClassName: PropTypes.Requireable<string>;
                     style: PropTypes.Requireable<PropTypes.InferProps<{}>>;
                     'data-name': PropTypes.Requireable<string>;
+                    'aria-label': PropTypes.Requireable<string>;
+                    'data-testid': PropTypes.Requireable<string>;
+                    useButtonTag: PropTypes.Requireable<boolean>;
+                    onClick: PropTypes.Requireable<(...args: any[]) => any>;
+                    onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+                    onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
+                    onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
+                    buttonRef: PropTypes.Requireable<PropTypes.InferProps<{}>>;
+                    'data-for': PropTypes.Requireable<string>;
+                    'data-tooltip-place': PropTypes.Requireable<string>;
+                    'data-tip': PropTypes.Requireable<boolean>;
+                    isLinkDisabled: PropTypes.Requireable<boolean>;
+                    useWrapper: PropTypes.Requireable<boolean>;
+                    buttonContentClassName: PropTypes.Requireable<string>;
                 }> | PropTypes.InferProps<{
                     buttonType: PropTypes.Requireable<string>;
                     type: PropTypes.Requireable<string>;
@@ -1176,16 +1187,27 @@ declare namespace BrandUpdate {
                         color: any;
                         submitValue: PropTypes.Requireable<string>;
                         disabled: PropTypes.Requireable<boolean>;
-                        isLinkDisabled: PropTypes.Requireable<boolean>;
                         href: PropTypes.Requireable<string>;
                         download: PropTypes.Requireable<boolean>;
                         target: PropTypes.Requireable<string>;
-                        onClick: PropTypes.Requireable<(...args: any[]) => any>;
                         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
                         className: PropTypes.Requireable<string>;
-                        buttonContentClassName: PropTypes.Requireable<string>;
                         style: PropTypes.Requireable<PropTypes.InferProps<{}>>;
                         'data-name': PropTypes.Requireable<string>;
+                        'aria-label': PropTypes.Requireable<string>;
+                        'data-testid': PropTypes.Requireable<string>;
+                        useButtonTag: PropTypes.Requireable<boolean>;
+                        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+                        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+                        onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
+                        onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
+                        buttonRef: PropTypes.Requireable<PropTypes.InferProps<{}>>;
+                        'data-for': PropTypes.Requireable<string>;
+                        'data-tooltip-place': PropTypes.Requireable<string>;
+                        'data-tip': PropTypes.Requireable<boolean>;
+                        isLinkDisabled: PropTypes.Requireable<boolean>;
+                        useWrapper: PropTypes.Requireable<boolean>;
+                        buttonContentClassName: PropTypes.Requireable<string>;
                     }> | PropTypes.InferProps<{
                         buttonType: PropTypes.Requireable<string>;
                         type: PropTypes.Requireable<string>;

package/es/template/common/search-page/index.d.ts

@@ -85,17 +85,28 @@ declare namespace SearchPage {
             color: any;
             submitValue: PropTypes.Requireable<string>;
             disabled: PropTypes.Requireable<boolean>;
-            isLinkDisabled: PropTypes.Requireable<boolean>;
             href: PropTypes.Requireable<string>;
             download: PropTypes.Requireable<boolean>;
             target: PropTypes.Requireable<string>;
             type: PropTypes.Requireable<string>;
-            onClick: PropTypes.Requireable<(...args: any[]) => any>;
             children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
             className: PropTypes.Requireable<string>;
-            buttonContentClassName: PropTypes.Requireable<string>;
             style: PropTypes.Requireable<PropTypes.InferProps<{}>>;
             'data-name': PropTypes.Requireable<string>;
+            'aria-label': PropTypes.Requireable<string>;
+            'data-testid': PropTypes.Requireable<string>;
+            useButtonTag: PropTypes.Requireable<boolean>;
+            onClick: PropTypes.Requireable<(...args: any[]) => any>;
+            onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+            onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
+            onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
+            buttonRef: PropTypes.Requireable<PropTypes.InferProps<{}>>;
+            'data-for': PropTypes.Requireable<string>;
+            'data-tooltip-place': PropTypes.Requireable<string>;
+            'data-tip': PropTypes.Requireable<boolean>;
+            isLinkDisabled: PropTypes.Requireable<boolean>;
+            useWrapper: PropTypes.Requireable<boolean>;
+            buttonContentClassName: PropTypes.Requireable<string>;
         }>>;
         const recommendations: PropTypes.Requireable<PropTypes.InferProps<{
             contentType: PropTypes.Requireable<string>;

package/lib/atom/battle-opponent/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/battle-opponent/index.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAC,gBAAgB,EAAC,MAAM,yBAAyB,CAAC;AACzD,OAAkB,EAAC,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAG5D,QAAA,MAAM,cAAc;gHASf,mBAAmB,iBACP,gBAAgB;;;;;;;;;;;;;CAyGhC,CAAC;AAQF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/battle-opponent/index.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAC,gBAAgB,EAAC,MAAM,yBAAyB,CAAC;AACzD,OAAkB,EAAC,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAG5D,QAAA,MAAM,cAAc;gHASf,mBAAmB,iBACP,gBAAgB;;;;;;;;;;;;;CA2GhC,CAAC;AAQF,eAAe,cAAc,CAAC"}

package/lib/atom/battle-opponent/index.js

@@ -102,13 +102,15 @@ const BattleOpponent = ({
     className: _style.default.informationIcon,
     width: 20,
     height: 20
-  })), /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.toolTipWrapper
+  }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     fontSize: 12,
     anchorId: battleOpponentInfoId,
     toolTipIsVisible: toolTipIsVisible,
     TooltipContent: TooltipContent,
     closeToolTipInformationTextAriaLabel: translate('Press the escape key to close the information text')
-  })) : /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationArrowRight, {
+  }))) : /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationArrowRight, {
     className: _style.default.rightArrow,
     width: 16,
     height: 16