@coorpacademy/components 11.32.4 → 11.32.6

package/es/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;;;;;;;;;;;;;CA2GhC,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;;;;;;;;;;;;;CAyGhC,CAAC;AAQF,eAAe,cAAc,CAAC"}

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

@@ -90,7 +90,7 @@ const BattleOpponent = ({
     anchorId: battleOpponentInfoId,
     toolTipIsVisible: toolTipIsVisible,
     TooltipContent: TooltipContent,
-    closeToolTipInformationTextAriaLabel: translate('Press the escape key to close the information text')
+    closeToolTipInformationTextAriaLabel: translate('close_tooltip_information')
   }))) : /*#__PURE__*/React.createElement(ArrowRight, {
     className: style.rightArrow,
     width: 16,

package/es/atom/battle-opponent/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useMemo","useState","useRef","classnames","v5","uuidV5","has","NovaCompositionNavigationArrowRight","ArrowRight","NovaCompositionCoorpacademyInformationIcon","InformationIcon","ToolTip","toggleStateOnKeyPress","Provider","GetTranslateFromContext","propTypes","style","BattleOpponent","isAlreadyEngaged","isRandom","userAvatarSrc","onClick","displayName","tooltipText","ariaLabel","legacyContext","translate","wrapperClassnames","card","random","displayNameClassnames","name","alreadyEngaged","mouseLeaveTimer","setMouseLeaveTimer","undefined","toolTipIsVisible","setToolTipIsVisible","battleOpponentInfoId","URL","buttonRef","handleMouseOver","clearTimeout","current","focus","handleMouseLeave","setTimeout","blur","handleKeyPress","event","TooltipContent","_props","avatar","tooltipIconContainer","informationIcon","toolTipWrapper","rightArrow","contextTypes","childContextTypes"],"sources":["../../../src/atom/battle-opponent/index.tsx"],"sourcesContent":["import React, {useCallback, useMemo, useState, useRef} from 'react';\nimport classnames from 'classnames';\nimport {v5 as uuidV5} from 'uuid';\nimport has from 'lodash/fp/has';\nimport {\n  NovaCompositionNavigationArrowRight as ArrowRight,\n  NovaCompositionCoorpacademyInformationIcon as InformationIcon\n} from '@coorpacademy/nova-icons';\nimport ToolTip, {toggleStateOnKeyPress} from '../tooltip';\nimport Provider, {GetTranslateFromContext} from '../provider';\nimport {WebContextValues} from '../provider/web-context';\nimport propTypes, {BattleOpponentProps} from './prop-types';\nimport style from './style.css';\n\nconst BattleOpponent = (\n  {\n    isAlreadyEngaged,\n    isRandom,\n    userAvatarSrc,\n    onClick,\n    displayName,\n    tooltipText,\n    'aria-label': ariaLabel\n  }: BattleOpponentProps,\n  legacyContext: WebContextValues\n) => {\n  const translate: Required<WebContextValues>['translate'] = GetTranslateFromContext(legacyContext);\n  const wrapperClassnames = useMemo(\n    () => classnames(style.card, style['opponent-card'], isRandom ? style.random : null),\n    [isRandom]\n  );\n\n  const displayNameClassnames = useMemo(\n    () => classnames(style.name, isAlreadyEngaged ? style.alreadyEngaged : null),\n    [isAlreadyEngaged]\n  );\n\n  const [mouseLeaveTimer, setMouseLeaveTimer] = useState<number | undefined>(undefined);\n  const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n\n  // to be replaced by useId when React17 is bumped to React18\n  const [battleOpponentInfoId] = useState(\n    isAlreadyEngaged ? uuidV5('engaged-battle-', uuidV5.URL) : undefined\n  );\n\n  const buttonRef = useRef(null);\n\n  const handleMouseOver = useCallback(() => {\n    mouseLeaveTimer && clearTimeout(mouseLeaveTimer);\n    // @ts-expect-error (error: focus does not exists on type never)\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) as unknown as number\n    );\n  }, []);\n\n  const handleKeyPress = useCallback(\n    event => {\n      toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible, buttonRef)(event);\n    },\n    [toolTipIsVisible]\n  );\n\n  const TooltipContent = useCallback(\n    _props => (\n      <p\n        {..._props}\n        onMouseOver={handleMouseOver}\n        onMouseLeave={handleMouseLeave}\n        data-testid=\"battle-opponent-tooltip-content\"\n      >\n        {tooltipText}\n      </p>\n    ),\n    [handleMouseLeave, handleMouseOver, tooltipText]\n  );\n\n  return (\n    <li\n      {...(!isAlreadyEngaged && {onClick})}\n      className={wrapperClassnames}\n      data-testid=\"battle-opponent-wrapper\"\n      tabIndex={0}\n    >\n      <div className={style.avatar}>{isRandom ? null : <img src={userAvatarSrc} alt=\"\" />}</div>\n      <p className={displayNameClassnames} tabIndex={0}>\n        {displayName}\n      </p>\n      {isAlreadyEngaged ? (\n        <>\n          <button\n            ref={buttonRef}\n            tabIndex={0}\n            type=\"button\"\n            className={style.tooltipIconContainer}\n            data-testid=\"battle-engaged-opponent-information-button\"\n            onKeyDown={handleKeyPress}\n            onMouseLeave={handleMouseLeave}\n            onMouseOver={handleMouseOver}\n            data-for={battleOpponentInfoId}\n            data-tooltip-place=\"left\"\n            data-tip={isAlreadyEngaged}\n            aria-label={ariaLabel}\n          >\n            <InformationIcon className={style.informationIcon} width={20} height={20} />\n          </button>\n          <span className={style.toolTipWrapper}>\n            <ToolTip\n              fontSize={12}\n              anchorId={battleOpponentInfoId}\n              toolTipIsVisible={toolTipIsVisible}\n              TooltipContent={TooltipContent}\n              closeToolTipInformationTextAriaLabel={translate(\n                'Press the escape key to close the information text'\n              )}\n            />\n          </span>\n        </>\n      ) : (\n        <ArrowRight className={style.rightArrow} width={16} height={16} />\n      )}\n    </li>\n  );\n};\n\nBattleOpponent.propTypes = propTypes;\n\nBattleOpponent.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nexport default BattleOpponent;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useMemo","useState","useRef","classnames","v5","uuidV5","has","NovaCompositionNavigationArrowRight","ArrowRight","NovaCompositionCoorpacademyInformationIcon","InformationIcon","ToolTip","toggleStateOnKeyPress","Provider","GetTranslateFromContext","propTypes","style","BattleOpponent","isAlreadyEngaged","isRandom","userAvatarSrc","onClick","displayName","tooltipText","ariaLabel","legacyContext","translate","wrapperClassnames","card","random","displayNameClassnames","name","alreadyEngaged","mouseLeaveTimer","setMouseLeaveTimer","undefined","toolTipIsVisible","setToolTipIsVisible","battleOpponentInfoId","URL","buttonRef","handleMouseOver","clearTimeout","current","focus","handleMouseLeave","setTimeout","blur","handleKeyPress","event","TooltipContent","_props","avatar","tooltipIconContainer","informationIcon","toolTipWrapper","rightArrow","contextTypes","childContextTypes"],"sources":["../../../src/atom/battle-opponent/index.tsx"],"sourcesContent":["import React, {useCallback, useMemo, useState, useRef} from 'react';\nimport classnames from 'classnames';\nimport {v5 as uuidV5} from 'uuid';\nimport has from 'lodash/fp/has';\nimport {\n  NovaCompositionNavigationArrowRight as ArrowRight,\n  NovaCompositionCoorpacademyInformationIcon as InformationIcon\n} from '@coorpacademy/nova-icons';\nimport ToolTip, {toggleStateOnKeyPress} from '../tooltip';\nimport Provider, {GetTranslateFromContext} from '../provider';\nimport {WebContextValues} from '../provider/web-context';\nimport propTypes, {BattleOpponentProps} from './prop-types';\nimport style from './style.css';\n\nconst BattleOpponent = (\n  {\n    isAlreadyEngaged,\n    isRandom,\n    userAvatarSrc,\n    onClick,\n    displayName,\n    tooltipText,\n    'aria-label': ariaLabel\n  }: BattleOpponentProps,\n  legacyContext: WebContextValues\n) => {\n  const translate: Required<WebContextValues>['translate'] = GetTranslateFromContext(legacyContext);\n  const wrapperClassnames = useMemo(\n    () => classnames(style.card, style['opponent-card'], isRandom ? style.random : null),\n    [isRandom]\n  );\n\n  const displayNameClassnames = useMemo(\n    () => classnames(style.name, isAlreadyEngaged ? style.alreadyEngaged : null),\n    [isAlreadyEngaged]\n  );\n\n  const [mouseLeaveTimer, setMouseLeaveTimer] = useState<number | undefined>(undefined);\n  const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n\n  // to be replaced by useId when React17 is bumped to React18\n  const [battleOpponentInfoId] = useState(\n    isAlreadyEngaged ? uuidV5('engaged-battle-', uuidV5.URL) : undefined\n  );\n\n  const buttonRef = useRef(null);\n\n  const handleMouseOver = useCallback(() => {\n    mouseLeaveTimer && clearTimeout(mouseLeaveTimer);\n    // @ts-expect-error (error: focus does not exists on type never)\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) as unknown as number\n    );\n  }, []);\n\n  const handleKeyPress = useCallback(\n    event => {\n      toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible, buttonRef)(event);\n    },\n    [toolTipIsVisible]\n  );\n\n  const TooltipContent = useCallback(\n    _props => (\n      <p\n        {..._props}\n        onMouseOver={handleMouseOver}\n        onMouseLeave={handleMouseLeave}\n        data-testid=\"battle-opponent-tooltip-content\"\n      >\n        {tooltipText}\n      </p>\n    ),\n    [handleMouseLeave, handleMouseOver, tooltipText]\n  );\n\n  return (\n    <li\n      {...(!isAlreadyEngaged && {onClick})}\n      className={wrapperClassnames}\n      data-testid=\"battle-opponent-wrapper\"\n      tabIndex={0}\n    >\n      <div className={style.avatar}>{isRandom ? null : <img src={userAvatarSrc} alt=\"\" />}</div>\n      <p className={displayNameClassnames} tabIndex={0}>\n        {displayName}\n      </p>\n      {isAlreadyEngaged ? (\n        <>\n          <button\n            ref={buttonRef}\n            tabIndex={0}\n            type=\"button\"\n            className={style.tooltipIconContainer}\n            data-testid=\"battle-engaged-opponent-information-button\"\n            onKeyDown={handleKeyPress}\n            onMouseLeave={handleMouseLeave}\n            onMouseOver={handleMouseOver}\n            data-for={battleOpponentInfoId}\n            data-tooltip-place=\"left\"\n            data-tip={isAlreadyEngaged}\n            aria-label={ariaLabel}\n          >\n            <InformationIcon className={style.informationIcon} width={20} height={20} />\n          </button>\n          <span className={style.toolTipWrapper}>\n            <ToolTip\n              fontSize={12}\n              anchorId={battleOpponentInfoId}\n              toolTipIsVisible={toolTipIsVisible}\n              TooltipContent={TooltipContent}\n              closeToolTipInformationTextAriaLabel={translate('close_tooltip_information')}\n            />\n          </span>\n        </>\n      ) : (\n        <ArrowRight className={style.rightArrow} width={16} height={16} />\n      )}\n    </li>\n  );\n};\n\nBattleOpponent.propTypes = propTypes;\n\nBattleOpponent.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nexport default BattleOpponent;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,WAAf,EAA4BC,OAA5B,EAAqCC,QAArC,EAA+CC,MAA/C,QAA4D,OAA5D;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAAQC,EAAE,IAAIC,MAAd,QAA2B,MAA3B;AACA,OAAOC,GAAP,MAAgB,eAAhB;AACA,SACEC,mCAAmC,IAAIC,UADzC,EAEEC,0CAA0C,IAAIC,eAFhD,QAGO,0BAHP;AAIA,OAAOC,OAAP,IAAiBC,qBAAjB,QAA6C,YAA7C;AACA,OAAOC,QAAP,IAAkBC,uBAAlB,QAAgD,aAAhD;AAEA,OAAOC,SAAP,MAA6C,cAA7C;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,cAAc,GAAG,CACrB;EACEC,gBADF;EAEEC,QAFF;EAGEC,aAHF;EAIEC,OAJF;EAKEC,WALF;EAMEC,WANF;EAOE,cAAcC;AAPhB,CADqB,EAUrBC,aAVqB,KAWlB;EACH,MAAMC,SAAkD,GAAGZ,uBAAuB,CAACW,aAAD,CAAlF;EACA,MAAME,iBAAiB,GAAG3B,OAAO,CAC/B,MAAMG,UAAU,CAACa,KAAK,CAACY,IAAP,EAAaZ,KAAK,CAAC,eAAD,CAAlB,EAAqCG,QAAQ,GAAGH,KAAK,CAACa,MAAT,GAAkB,IAA/D,CADe,EAE/B,CAACV,QAAD,CAF+B,CAAjC;EAKA,MAAMW,qBAAqB,GAAG9B,OAAO,CACnC,MAAMG,UAAU,CAACa,KAAK,CAACe,IAAP,EAAab,gBAAgB,GAAGF,KAAK,CAACgB,cAAT,GAA0B,IAAvD,CADmB,EAEnC,CAACd,gBAAD,CAFmC,CAArC;EAKA,MAAM,CAACe,eAAD,EAAkBC,kBAAlB,IAAwCjC,QAAQ,CAAqBkC,SAArB,CAAtD;EACA,MAAM,CAACC,gBAAD,EAAmBC,mBAAnB,IAA0CpC,QAAQ,CAAC,KAAD,CAAxD,CAbG,CAeH;;EACA,MAAM,CAACqC,oBAAD,IAAyBrC,QAAQ,CACrCiB,gBAAgB,GAAGb,MAAM,CAAC,iBAAD,EAAoBA,MAAM,CAACkC,GAA3B,CAAT,GAA2CJ,SADtB,CAAvC;EAIA,MAAMK,SAAS,GAAGtC,MAAM,CAAC,IAAD,CAAxB;EAEA,MAAMuC,eAAe,GAAG1C,WAAW,CAAC,MAAM;IACxCkC,eAAe,IAAIS,YAAY,CAACT,eAAD,CAA/B,CADwC,CAExC;;IACA;;IAA2B3B,GAAG,CAAC,CAAC,SAAD,EAAY,OAAZ,CAAD,EAAuBkC,SAAvB,CAAH,IAAwCA,SAAS,CAACG,OAAV,CAAkBC,KAAlB,EAAxC;IAC3BP,mBAAmB,CAAC,IAAD,CAAnB;EACD,CALkC,EAKhC,CAACJ,eAAD,CALgC,CAAnC;EAOA,MAAMY,gBAAgB,GAAG9C,WAAW,CAAC,MAAM;IACzCmC,kBAAkB,CAChBY,UAAU,CAAC,MAAM;MACfT,mBAAmB,CAAC,KAAD,CAAnB,CADe,CAEf;;MACA;;MAA2B/B,GAAG,CAAC,CAAC,SAAD,EAAY,MAAZ,CAAD,EAAsBkC,SAAtB,CAAH,IAAuCA,SAAS,CAACG,OAAV,CAAkBI,IAAlB,EAAvC;IAC5B,CAJS,EAIP,GAJO,CADM,CAAlB;EAOD,CARmC,EAQjC,EARiC,CAApC;EAUA,MAAMC,cAAc,GAAGjD,WAAW,CAChCkD,KAAK,IAAI;IACPrC,qBAAqB,CAACwB,gBAAD,EAAmBC,mBAAnB,EAAwCG,SAAxC,CAArB,CAAwES,KAAxE;EACD,CAH+B,EAIhC,CAACb,gBAAD,CAJgC,CAAlC;EAOA,MAAMc,cAAc,GAAGnD,WAAW,CAChCoD,MAAM,iBACJ,sCACMA,MADN;IAEE,WAAW,EAAEV,eAFf;IAGE,YAAY,EAAEI,gBAHhB;IAIE,eAAY;EAJd,IAMGtB,WANH,CAF8B,EAWhC,CAACsB,gBAAD,EAAmBJ,eAAnB,EAAoClB,WAApC,CAXgC,CAAlC;EAcA,oBACE,uCACO,CAACL,gBAAD,IAAqB;IAACG;EAAD,CAD5B;IAEE,SAAS,EAAEM,iBAFb;IAGE,eAAY,yBAHd;IAIE,QAAQ,EAAE;EAJZ,iBAME;IAAK,SAAS,EAAEX,KAAK,CAACoC;EAAtB,GAA+BjC,QAAQ,GAAG,IAAH,gBAAU;IAAK,GAAG,EAAEC,aAAV;IAAyB,GAAG,EAAC;EAA7B,EAAjD,CANF,eAOE;IAAG,SAAS,EAAEU,qBAAd;IAAqC,QAAQ,EAAE;EAA/C,GACGR,WADH,CAPF,EAUGJ,gBAAgB,gBACf,uDACE;IACE,GAAG,EAAEsB,SADP;IAEE,QAAQ,EAAE,CAFZ;IAGE,IAAI,EAAC,QAHP;IAIE,SAAS,EAAExB,KAAK,CAACqC,oBAJnB;IAKE,eAAY,4CALd;IAME,SAAS,EAAEL,cANb;IAOE,YAAY,EAAEH,gBAPhB;IAQE,WAAW,EAAEJ,eARf;IASE,YAAUH,oBATZ;IAUE,sBAAmB,MAVrB;IAWE,YAAUpB,gBAXZ;IAYE,cAAYM;EAZd,gBAcE,oBAAC,eAAD;IAAiB,SAAS,EAAER,KAAK,CAACsC,eAAlC;IAAmD,KAAK,EAAE,EAA1D;IAA8D,MAAM,EAAE;EAAtE,EAdF,CADF,eAiBE;IAAM,SAAS,EAAEtC,KAAK,CAACuC;EAAvB,gBACE,oBAAC,OAAD;IACE,QAAQ,EAAE,EADZ;IAEE,QAAQ,EAAEjB,oBAFZ;IAGE,gBAAgB,EAAEF,gBAHpB;IAIE,cAAc,EAAEc,cAJlB;IAKE,oCAAoC,EAAExB,SAAS,CAAC,2BAAD;EALjD,EADF,CAjBF,CADe,gBA6Bf,oBAAC,UAAD;IAAY,SAAS,EAAEV,KAAK,CAACwC,UAA7B;IAAyC,KAAK,EAAE,EAAhD;IAAoD,MAAM,EAAE;EAA5D,EAvCJ,CADF;AA4CD,CAnHD;;AAqHAvC,cAAc,CAACF,SAAf,2CAA2BA,SAA3B;AAEAE,cAAc,CAACwC,YAAf,GAA8B;EAC5B/B,SAAS,EAAEb,QAAQ,CAAC6C,iBAAT,CAA2BhC;AADV,CAA9B;AAIA,eAAeT,cAAf"}

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":";AAcA;;;;;;;;oCA0IC"}
+{"version":3,"file":"favorite.d.ts","sourceRoot":"","sources":["../../../src/molecule/card/favorite.js"],"names":[],"mappings":";AAcA;;;;;;;;oCAwIC"}

package/es/molecule/card/favorite.js

@@ -111,7 +111,7 @@ const Favorite = ({
     anchorId: favoriteButtonAnchorId,
     toolTipIsVisible: toolTipIsVisible,
     TooltipContent: toolTipContent,
-    closeToolTipInformationTextAriaLabel: translate('Press the escape key to close the information text'),
+    closeToolTipInformationTextAriaLabel: translate('close_tooltip_information'),
     stickyOnKeyboardNavigation: true
   }));
 };

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

@@ -1 +1 @@
-{"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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"}
+{"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('close_tooltip_information')}\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/discipline-associated-skills/index.d.ts

@@ -0,0 +1,17 @@
+export default DisciplineAssociatedSkills;
+declare function DisciplineAssociatedSkills(props: any, context: any): JSX.Element | null;
+declare namespace DisciplineAssociatedSkills {
+    namespace contextTypes {
+        const translate: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+    namespace propTypes {
+        const skills: PropTypes.Requireable<(PropTypes.InferProps<{
+            ref: PropTypes.Requireable<string>;
+            locale: PropTypes.Requireable<string>;
+            focused: PropTypes.Requireable<boolean>;
+        }> | null | undefined)[]>;
+        const onSkillClick: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=index.d.ts.map

package/es/molecule/discipline-associated-skills/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/discipline-associated-skills/index.js"],"names":[],"mappings":";AAUA,0FA2DC"}

package/es/molecule/discipline-associated-skills/index.js

@@ -0,0 +1,74 @@
+import _uniqueId from "lodash/fp/uniqueId";
+import _isEmpty from "lodash/fp/isEmpty";
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Icon from '../../atom/icon';
+import ToolTip from '../../atom/tooltip';
+import Provider from '../../atom/provider';
+import CatalogSection from '../../atom/catalog-section';
+import style from './style.css';
+
+const DisciplineAssociatedSkills = (props, context) => {
+  const {
+    translate
+  } = context;
+  const {
+    skills = [],
+    onSkillClick
+  } = props;
+  const AnchorElement = useCallback(skill => /*#__PURE__*/React.createElement("div", {
+    className: style.chipFocusedContent
+  }, /*#__PURE__*/React.createElement(Icon, {
+    iconName: "bullseye-arrow",
+    backgroundColor: "#DDD1FF",
+    size: {
+      faSize: 12,
+      wrapperSize: 12
+    }
+  }), skill), []);
+  return !_isEmpty(skills) ? /*#__PURE__*/React.createElement("div", {
+    "data-name": "discipline-associated-skills",
+    className: style.associatedSkillsWrapper
+  }, /*#__PURE__*/React.createElement(CatalogSection, {
+    title: translate('associated_skills')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.chipsWrapper
+  }, skills.map(skill => {
+    function handleSkillClick() {
+      return onSkillClick(skill.ref);
+    }
+
+    function handleAnchorElement() {
+      return AnchorElement(skill.locale);
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      key: _uniqueId(),
+      className: classnames(style.chipWrapper, skill.focused && style.chipWrapperFocused),
+      onClick: handleSkillClick
+    }, skill.focused ? /*#__PURE__*/React.createElement(ToolTip, {
+      AnchorElement: handleAnchorElement,
+      fontSize: 12,
+      delayHide: 0,
+      iconContainerClassName: style.infoIconTooltip,
+      tooltipClassName: style.tooltip,
+      TooltipContent: translate('skill_focused_chip_tooltip'),
+      closeToolTipInformationTextAriaLabel: translate('close_tooltip_information')
+    }) : skill.locale);
+  })))) : null;
+};
+
+DisciplineAssociatedSkills.contextTypes = {
+  translate: Provider.childContextTypes.translate
+};
+DisciplineAssociatedSkills.propTypes = process.env.NODE_ENV !== "production" ? {
+  skills: PropTypes.arrayOf(PropTypes.shape({
+    ref: PropTypes.string,
+    locale: PropTypes.string,
+    focused: PropTypes.bool
+  })),
+  onSkillClick: PropTypes.func
+} : {};
+export default DisciplineAssociatedSkills;
+//# sourceMappingURL=index.js.map

package/es/molecule/discipline-associated-skills/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","classnames","Icon","ToolTip","Provider","CatalogSection","style","DisciplineAssociatedSkills","props","context","translate","skills","onSkillClick","AnchorElement","skill","chipFocusedContent","faSize","wrapperSize","associatedSkillsWrapper","chipsWrapper","map","handleSkillClick","ref","handleAnchorElement","locale","chipWrapper","focused","chipWrapperFocused","infoIconTooltip","tooltip","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","bool","func"],"sources":["../../../src/molecule/discipline-associated-skills/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isEmpty, uniqueId} from 'lodash/fp';\nimport Icon from '../../atom/icon';\nimport ToolTip from '../../atom/tooltip';\nimport Provider from '../../atom/provider';\nimport CatalogSection from '../../atom/catalog-section';\nimport style from './style.css';\n\nconst DisciplineAssociatedSkills = (props, context) => {\n  const {translate} = context;\n\n  const {skills = [], onSkillClick} = props;\n\n  const AnchorElement = useCallback(\n    skill => (\n      <div className={style.chipFocusedContent}>\n        <Icon\n          iconName=\"bullseye-arrow\"\n          backgroundColor=\"#DDD1FF\"\n          size={{\n            faSize: 12,\n            wrapperSize: 12\n          }}\n        />\n        {skill}\n      </div>\n    ),\n    []\n  );\n\n  return !isEmpty(skills) ? (\n    <div data-name=\"discipline-associated-skills\" className={style.associatedSkillsWrapper}>\n      <CatalogSection title={translate('associated_skills')}>\n        <div className={style.chipsWrapper}>\n          {skills.map(skill => {\n            function handleSkillClick() {\n              return onSkillClick(skill.ref);\n            }\n            function handleAnchorElement() {\n              return AnchorElement(skill.locale);\n            }\n            return (\n              <div\n                key={uniqueId()}\n                className={classnames(style.chipWrapper, skill.focused && style.chipWrapperFocused)}\n                onClick={handleSkillClick}\n              >\n                {skill.focused ? (\n                  <ToolTip\n                    AnchorElement={handleAnchorElement}\n                    fontSize={12}\n                    delayHide={0}\n                    iconContainerClassName={style.infoIconTooltip}\n                    tooltipClassName={style.tooltip}\n                    TooltipContent={translate('skill_focused_chip_tooltip')}\n                    closeToolTipInformationTextAriaLabel={translate('close_tooltip_information')}\n                  />\n                ) : (\n                  skill.locale\n                )}\n              </div>\n            );\n          })}\n        </div>\n      </CatalogSection>\n    </div>\n  ) : null;\n};\n\nDisciplineAssociatedSkills.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nDisciplineAssociatedSkills.propTypes = {\n  skills: PropTypes.arrayOf(\n    PropTypes.shape({\n      ref: PropTypes.string,\n      locale: PropTypes.string,\n      focused: PropTypes.bool\n    })\n  ),\n  onSkillClick: PropTypes.func\n};\n\nexport default DisciplineAssociatedSkills;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,WAAf,QAAiC,OAAjC;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,OAAOC,IAAP,MAAiB,iBAAjB;AACA,OAAOC,OAAP,MAAoB,oBAApB;AACA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,cAAP,MAA2B,4BAA3B;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,0BAA0B,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACrD,MAAM;IAACC;EAAD,IAAcD,OAApB;EAEA,MAAM;IAACE,MAAM,GAAG,EAAV;IAAcC;EAAd,IAA8BJ,KAApC;EAEA,MAAMK,aAAa,GAAGd,WAAW,CAC/Be,KAAK,iBACH;IAAK,SAAS,EAAER,KAAK,CAACS;EAAtB,gBACE,oBAAC,IAAD;IACE,QAAQ,EAAC,gBADX;IAEE,eAAe,EAAC,SAFlB;IAGE,IAAI,EAAE;MACJC,MAAM,EAAE,EADJ;MAEJC,WAAW,EAAE;IAFT;EAHR,EADF,EASGH,KATH,CAF6B,EAc/B,EAd+B,CAAjC;EAiBA,OAAO,CAAC,SAAQH,MAAR,CAAD,gBACL;IAAK,aAAU,8BAAf;IAA8C,SAAS,EAAEL,KAAK,CAACY;EAA/D,gBACE,oBAAC,cAAD;IAAgB,KAAK,EAAER,SAAS,CAAC,mBAAD;EAAhC,gBACE;IAAK,SAAS,EAAEJ,KAAK,CAACa;EAAtB,GACGR,MAAM,CAACS,GAAP,CAAWN,KAAK,IAAI;IACnB,SAASO,gBAAT,GAA4B;MAC1B,OAAOT,YAAY,CAACE,KAAK,CAACQ,GAAP,CAAnB;IACD;;IACD,SAASC,mBAAT,GAA+B;MAC7B,OAAOV,aAAa,CAACC,KAAK,CAACU,MAAP,CAApB;IACD;;IACD,oBACE;MACE,GAAG,EAAE,WADP;MAEE,SAAS,EAAEvB,UAAU,CAACK,KAAK,CAACmB,WAAP,EAAoBX,KAAK,CAACY,OAAN,IAAiBpB,KAAK,CAACqB,kBAA3C,CAFvB;MAGE,OAAO,EAAEN;IAHX,GAKGP,KAAK,CAACY,OAAN,gBACC,oBAAC,OAAD;MACE,aAAa,EAAEH,mBADjB;MAEE,QAAQ,EAAE,EAFZ;MAGE,SAAS,EAAE,CAHb;MAIE,sBAAsB,EAAEjB,KAAK,CAACsB,eAJhC;MAKE,gBAAgB,EAAEtB,KAAK,CAACuB,OAL1B;MAME,cAAc,EAAEnB,SAAS,CAAC,4BAAD,CAN3B;MAOE,oCAAoC,EAAEA,SAAS,CAAC,2BAAD;IAPjD,EADD,GAWCI,KAAK,CAACU,MAhBV,CADF;EAqBD,CA5BA,CADH,CADF,CADF,CADK,GAoCH,IApCJ;AAqCD,CA3DD;;AA6DAjB,0BAA0B,CAACuB,YAA3B,GAA0C;EACxCpB,SAAS,EAAEN,QAAQ,CAAC2B,iBAAT,CAA2BrB;AADE,CAA1C;AAIAH,0BAA0B,CAACyB,SAA3B,2CAAuC;EACrCrB,MAAM,EAAEX,SAAS,CAACiC,OAAV,CACNjC,SAAS,CAACkC,KAAV,CAAgB;IACdZ,GAAG,EAAEtB,SAAS,CAACmC,MADD;IAEdX,MAAM,EAAExB,SAAS,CAACmC,MAFJ;IAGdT,OAAO,EAAE1B,SAAS,CAACoC;EAHL,CAAhB,CADM,CAD6B;EAQrCxB,YAAY,EAAEZ,SAAS,CAACqC;AARa,CAAvC;AAWA,eAAe9B,0BAAf"}

package/es/molecule/discipline-associated-skills/style.css

@@ -0,0 +1,70 @@
+@value colors: "../../variables/colors.css";
+@value breakpoints: "../../variables/breakpoints.css";
+@value desktop from breakpoints;
+@value cm_grey_100 from colors;
+@value cm_grey_200 from colors;
+@value cm_grey_700 from colors;
+
+.associatedSkillsWrapper {
+  margin-bottom: 12px;
+}
+
+.chipsWrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.chipWrapper {
+  width: fit-content;
+  border-radius: 8px;
+  padding: 4px 8px;
+  background-color: cm_grey_200;
+  color: cm_grey_700;
+  font-family: 'Gilroy';
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chipWrapperFocused {
+  background-color: #DDD1FF;
+  color: #3900D6;
+}
+
+.chipFocusedContent {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  div {
+    padding: 0 !important;
+  }
+}
+
+.infoIconTooltip {
+  background-color: transparent;
+}
+
+.tooltip {
+  width: fit-content;
+  color: #FFF;
+  font-size: 12px;
+  font-style: normal;
+  line-height: 16px;
+  top: -48px;
+
+  p {
+    padding: 8px 8px;
+    margin: 0;
+  }
+}
+
+@media desktop {
+  .associatedSkillsWrapper {
+    margin-top: 24px;
+  }
+}

package/es/molecule/learning-profile-radar-chart/index.d.ts

@@ -1,10 +1,35 @@
 /// <reference types="react" />
+import { WebContextValues } from '../../atom/provider/web-context';
 import { FormatedDataType, LearningProfileRadarChartPropTypes } from './types';
 export declare const formatData: (legend: {
     [ref: string]: string;
 }, data_: LearningProfileRadarChartPropTypes['data']) => FormatedDataType[];
 export declare const LearningProfileRadarChart: {
-    ({ data, legend, totalDataset, colors: colorsProps, onClick, width, height, margin }: LearningProfileRadarChartPropTypes): JSX.Element;
+    ({ data, legend, totalDataset, colors: colorsProps, onClick, onExploreClick, width, height, margin }: LearningProfileRadarChartPropTypes, legacyContext: WebContextValues): JSX.Element;
+    contextTypes: {
+        skin: import("prop-types").Requireable<import("prop-types").InferProps<{
+            common: import("prop-types").Requireable<{
+                [x: string]: any;
+            }>;
+            images: import("prop-types").Requireable<import("prop-types").InferProps<{
+                'logo-mobile': import("prop-types").Requireable<any>;
+                logo: import("prop-types").Requireable<any>;
+                'logo-email': import("prop-types").Requireable<any>;
+                login: import("prop-types").Requireable<any>;
+            }>>;
+            icons: import("prop-types").Requireable<{
+                [x: string]: any;
+            }>;
+            mod: import("prop-types").Requireable<{
+                [x: string]: any;
+            }>;
+            courses: import("prop-types").Requireable<any[]>;
+            texts: import("prop-types").Requireable<{
+                [x: string]: any;
+            }>;
+        }>>;
+        translate: import("prop-types").Requireable<(...args: any[]) => any>;
+    };
     propTypes: {
         data: import("prop-types").Validator<{
             [x: string]: NonNullable<number | (number | null | undefined)[] | null | undefined> | null | undefined;
@@ -26,6 +51,7 @@ export declare const LearningProfileRadarChart: {
         }> | null | undefined)[]>;
         width: import("prop-types").Requireable<number>;
         height: import("prop-types").Requireable<number>;
+        onExploreClick: import("prop-types").Requireable<(...args: any[]) => any>;
     };
 };
 declare const ResponsiveLearningProfileRadarChart: {
@@ -51,6 +77,7 @@ declare const ResponsiveLearningProfileRadarChart: {
         }> | null | undefined)[]>;
         width: import("prop-types").Requireable<number>;
         height: import("prop-types").Requireable<number>;
+        onExploreClick: import("prop-types").Requireable<(...args: any[]) => any>;
     };
 };
 export default ResponsiveLearningProfileRadarChart;

package/es/molecule/learning-profile-radar-chart/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learning-profile-radar-chart/index.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAGL,gBAAgB,EAChB,kCAAkC,EAGnC,MAAM,SAAS,CAAC;AAkQjB,eAAO,MAAM,UAAU,EAAE,CACvB,MAAM,EAAE;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,EAC/B,KAAK,EAAE,kCAAkC,CAAC,MAAM,CAAC,KAC9C,gBAAgB,EAOX,CAAC;AAEX,eAAO,MAAM,yBAAyB;0FASnC,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CAqHpC,CAAC;AAEF,QAAA,MAAM,mCAAmC;YAAW,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CAIrF,CAAC;AAKF,eAAe,mCAAmC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learning-profile-radar-chart/index.tsx"],"names":[],"mappings":";AAiCA,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAGL,gBAAgB,EAChB,kCAAkC,EAGnC,MAAM,SAAS,CAAC;AAmUjB,eAAO,MAAM,UAAU,EAAE,CACvB,MAAM,EAAE;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,EAC/B,KAAK,EAAE,kCAAkC,CAAC,MAAM,CAAC,KAC9C,gBAAgB,EAOX,CAAC;AAEX,eAAO,MAAM,yBAAyB;0GAWjC,kCAAkC,iBACtB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqJhC,CAAC;AAEF,QAAA,MAAM,mCAAmC;YAAW,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;;CAIrF,CAAC;AAUF,eAAe,mCAAmC,CAAC"}

package/es/molecule/learning-profile-radar-chart/index.js

@@ -1,3 +1,4 @@
+import _get from "lodash/fp/get";
 import _findKey from "lodash/fp/findKey";
 import _flatten from "lodash/fp/flatten";
 import _times from "lodash/fp/times";
@@ -20,10 +21,13 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { Radar, RadarChart, PolarGrid, PolarAngleAxis, ResponsiveContainer, Tooltip, PolarRadiusAxis } from 'recharts';
+import { convert } from 'css-color-function';
 import classnames from 'classnames';
 import { isMobile as getIsMobile } from '../../util/check-is-mobile';
-import style from './style.css';
+import ButtonLink from '../../atom/button-link';
+import Provider, { GetSkinFromContext, GetTranslateFromContext } from '../../atom/provider';
 import { learningProfileRadarChartPropTypes } from './types';
+import style from './style.css';
 
 /* TICK_POSITIONS */
 const top = {
@@ -154,6 +158,7 @@ const CustomDot = ({
   cx,
   cy,
   payload,
+  onDotHover,
   onDotClick,
   stroke,
   activeDot,
@@ -171,10 +176,15 @@ const CustomDot = ({
     if (!payload?.name) return;
     onDotClick(payload.name);
   },
+  onMouseOver: () => {
+    if (!payload?.name) return;
+    onDotHover(payload.name);
+  },
+  onMouseLeave: () => onDotHover(''),
   'data-name': dataName
 }));
 
-const buildRadars = (totalDataset, handleOnDotClick, activeDot) => _times(index => {
+const buildRadars = (totalDataset, handleDotHover, handleOnDotClick, activeDot) => _times(index => {
   const datakey = `value${index + 1}`;
   const dataset = `dataset-${index + 1}`;
   return /*#__PURE__*/React.createElement(Radar, _extends({}, RADAR_DEFAULT_PROPS, {
@@ -190,6 +200,7 @@ const buildRadars = (totalDataset, handleOnDotClick, activeDot) => _times(index
     // use with the tooltip component
     ,
     dot: /*#__PURE__*/React.createElement(CustomDot, {
+      onDotHover: handleDotHover,
       onDotClick: handleOnDotClick,
       activeDot: activeDot,
       dataKey: datakey,
@@ -199,7 +210,7 @@ const buildRadars = (totalDataset, handleOnDotClick, activeDot) => _times(index
   }));
 }, totalDataset);
 
-const buildCustomLabel = ({
+const CustomLabel = ({
   index,
   x,
   y,
@@ -208,8 +219,13 @@ const buildCustomLabel = ({
   activeDot,
   chartType,
   formatedColors,
-  onClick
+  primarySkinColor,
+  exploreLocale,
+  hoveredDot,
+  onClick,
+  onExploreClick
 }) => {
+  const [hovered, setHovered] = useState(false);
   const isCurrentDotActive = activeDot?.label === label;
 
   const _CHART_CONFIGS$chartT = CHART_CONFIGS[chartType].ticks[index],
@@ -227,16 +243,44 @@ const buildCustomLabel = ({
     onClick(label);
   }
 
+  function handleExploreClick() {
+    onExploreClick(label);
+  }
+
+  const buttonExploreProps = {
+    customStyle: {
+      height: '36px',
+      backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),
+      color: hovered ? '#FFFFFF' : primarySkinColor,
+      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'
+    },
+    onClick: handleExploreClick,
+    'aria-label': `${label}, ${exploreLocale}`,
+    label: exploreLocale,
+    'data-name': 'learner-skill-card-explore-button',
+    icon: {
+      position: 'left',
+      faIcon: {
+        name: 'compass',
+        backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),
+        color: hovered ? '#FFFFFF' : primarySkinColor,
+        size: 16
+      }
+    }
+  };
+  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);
+  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);
+  const extraOffsetY = isCurrentDotActive && index === 0 ? -25 : 0;
   return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("foreignObject", {
     className: style.tickeForeignObject,
     x: x + offsetX,
-    y: y + offsetY,
+    y: y + offsetY + extraOffsetY,
     width: "200",
     height: "65"
   }, /*#__PURE__*/React.createElement("div", {
     "data-name": label,
     onClick: onLabelClick,
-    className: classnames(style.tickWrapper, isCurrentDotActive && style.tickWrapperFocus),
+    className: classnames(style.tickWrapper, isCurrentDotActive && style.tickWrapperFocus, hoveredDot === label && style.tickWrapperHover),
     style: _extends({}, rest, {
       alignItems: alignment,
       textAlign: alignment,
@@ -263,7 +307,12 @@ const buildCustomLabel = ({
     style: {
       color: colorLabel
     }
-  }, label))))));
+  }, label))), isCurrentDotActive ? /*#__PURE__*/React.createElement("div", {
+    className: style.buttonWrapper,
+    onMouseOver: handleMouseOver,
+    onMouseLeave: handleMouseLeave,
+    "data-name": "button-explore-wrapper"
+  }, /*#__PURE__*/React.createElement(ButtonLink, buttonExploreProps)) : null)));
 };
 /* UTILS */
 
@@ -283,12 +332,18 @@ export const LearningProfileRadarChart = ({
   totalDataset,
   colors: colorsProps,
   onClick,
+  onExploreClick,
   width,
   height,
   margin
-}) => {
+}, legacyContext) => {
   const [isMobile, setIsMobile] = useState(false);
   const [activeDot, setActiveDot] = useState();
+  const [hoveredDot, setHoveredDot] = useState('');
+  const skin = GetSkinFromContext(legacyContext);
+  const translate = GetTranslateFromContext(legacyContext);
+
+  const primarySkinColor = _get('common.primary', skin);
 
   const formatedColors = _times(i => {
     if (!colorsProps?.length) return DEFAULT_COLORS;
@@ -329,7 +384,17 @@ export const LearningProfileRadarChart = ({
     };
   }, [activeDot, onClick, setActiveDot]);
 
+  function handleOnActiveDotClick() {
+    setActiveDot(undefined);
+    onClick(undefined);
+  }
+
   function handleOnDotClick(label) {
+    if (!_isEmpty(activeDot) && activeDot?.label === label) {
+      handleOnActiveDotClick();
+      return;
+    }
+
     const payload = formatedData.find(({
       subject
     }) => subject === label);
@@ -349,30 +414,48 @@ export const LearningProfileRadarChart = ({
     }
   }
 
-  function renderCustomLabel({
-    x,
-    y,
-    payload: {
-      value: label
-    },
-    index
-  }) {
-    const currentData = formatedData.find(({
+  function handleExploreClick(label) {
+    const payload = formatedData.find(({
       subject
     }) => subject === label);
+    if (!payload) return;
 
-    const percentagesValues = _pipe(_omit('subject'), _mapValues(value => `${value}%`), _values)(currentData);
+    const skillRef = _findKey(val => val === payload?.subject, legend);
+
+    if (skillRef) {
+      onExploreClick(skillRef);
+    }
+  }
 
-    return buildCustomLabel({
-      index,
+  function renderCustomLabel(props) {
+    const {
       x,
       y,
-      percentagesValues,
-      label,
-      activeDot,
-      chartType,
-      formatedColors,
-      onClick: handleOnDotClick
+      payload: {
+        value: label
+      },
+      index
+    } = props;
+    const currentData = formatedData.find(({
+      subject
+    }) => subject === label);
+
+    const percentagesValues = _pipe(_omit('subject'), _mapValues(value => `${value}%`), _values)(currentData);
+
+    return /*#__PURE__*/React.createElement(CustomLabel, {
+      index: index,
+      x: x,
+      y: y,
+      percentagesValues: percentagesValues,
+      label: label,
+      activeDot: activeDot,
+      chartType: chartType,
+      formatedColors: formatedColors,
+      primarySkinColor: primarySkinColor,
+      exploreLocale: translate('Explore'),
+      hoveredDot: hoveredDot,
+      onClick: handleOnDotClick,
+      onExploreClick: handleExploreClick
     });
   }
 
@@ -400,7 +483,7 @@ export const LearningProfileRadarChart = ({
     tick: false,
     axisLine: false,
     domain: [0, 100]
-  }), buildRadars(totalDataset, handleOnDotClick, activeDot), isMobile ? /*#__PURE__*/React.createElement(Tooltip, {
+  }), buildRadars(totalDataset, setHoveredDot, handleOnDotClick, activeDot), isMobile ? /*#__PURE__*/React.createElement(Tooltip, {
     cursor: false,
     content: /*#__PURE__*/React.createElement(CustomTooltip, null)
   }) : null);
@@ -411,6 +494,10 @@ const ResponsiveLearningProfileRadarChart = props => /*#__PURE__*/React.createEl
   height: "100%"
 }, /*#__PURE__*/React.createElement(LearningProfileRadarChart, props));
 
+LearningProfileRadarChart.contextTypes = {
+  skin: Provider.childContextTypes.skin,
+  translate: Provider.childContextTypes.translate
+};
 LearningProfileRadarChart.propTypes = process.env.NODE_ENV !== "production" ? learningProfileRadarChartPropTypes : {};
 ResponsiveLearningProfileRadarChart.propTypes = process.env.NODE_ENV !== "production" ? learningProfileRadarChartPropTypes : {};
 export default ResponsiveLearningProfileRadarChart;