@coorpacademy/components 11.34.2-alpha.94 → 11.34.2

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

@@ -52,7 +52,7 @@ const ButtonLinkIcon = props => {
   const timer = useRef();
   const contentView = getButtonContent(icon, faIcon);
   const styleButton = classnames(getSizeStyle(size), link && style.link, disabled && style.disabled, className);
-  const handleOnClick = useCallback(() => onClick(), [onClick]);
+  const handleOnClick = useCallback(event => onClick(event), [onClick]);
   const handleMouseOver = useCallback(() => {
     timer.current && clearTimeout(timer.current);
     timer.current = setTimeout(() => {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useState","useCallback","useRef","PropTypes","classnames","ICONS","FaIcon","Link","ToolTip","style","getButtonContent","icon","faIcon","Icon","_getOr","createElement","className","buttonContent","iconName","getSizeStyle","size","small","responsive","defaultStyle","ButtonLinkIcon","props","disabled","dataName","ariaLabel","link","onClick","tooltipPlacement","toolTipIsVisible","setToolTipIsVisible","timer","contentView","styleButton","handleOnClick","handleMouseOver","current","clearTimeout","setTimeout","undefined","handleMouseLeave","TooltipContent","tooltipContentWrapper","Button","_extends","onMouseEnter","onMouseLeave","type","onMouseOver","Fragment","fontSize","anchorId","placement","closeToolTipInformationTextAriaLabel","propTypes","process","env","NODE_ENV","oneOf","string","_keys","func","shape","href","download","bool","target"],"sources":["../../../src/atom/button-link-icon/index.js"],"sourcesContent":["import React, {useState, useCallback, useRef} from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, keys} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {ICONS} from '../../util/button-icons';\nimport FaIcon from '../icon';\nimport Link from '../link';\nimport ToolTip from '../tooltip';\n// eslint-disable-next-line css-modules/no-unused-class\nimport style from './style.css';\n\nconst getButtonContent = (icon, faIcon) => {\n  const Icon = getOr(null, icon, ICONS);\n\n  if (!Icon && !faIcon) {\n    return <div className={style.buttonContent} />;\n  }\n\n  return (\n    <div className={style.buttonContent}>\n      {faIcon ? <FaIcon iconName={faIcon} /> : <Icon className={style.icon} />}\n    </div>\n  );\n};\n\nconst getSizeStyle = size => {\n  switch (size) {\n    case 'small':\n      return style.small;\n    case 'responsive':\n      return style.responsive;\n    default:\n      return style.defaultStyle;\n  }\n};\n\nconst ButtonLinkIcon = props => {\n  const {\n    size = 'default',\n    disabled,\n    icon,\n    faIcon,\n    'data-name': dataName = 'button-icon',\n    'aria-label': ariaLabel,\n    link,\n    onClick,\n    className,\n    tooltipPlacement = 'left'\n  } = props;\n  const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n  const timer = useRef();\n\n  const contentView = getButtonContent(icon, faIcon);\n  const styleButton = classnames(\n    getSizeStyle(size),\n    link && style.link,\n    disabled && style.disabled,\n    className\n  );\n\n  const handleOnClick = useCallback(() => onClick(), [onClick]);\n\n  const handleMouseOver = useCallback(() => {\n    timer.current && clearTimeout(timer.current);\n    timer.current = setTimeout(() => {\n      setToolTipIsVisible(true);\n      timer.current = undefined;\n    }, 300);\n  }, [timer, setToolTipIsVisible]);\n\n  const handleMouseLeave = useCallback(() => {\n    timer.current && clearTimeout(timer.current);\n    setToolTipIsVisible(false);\n  }, [timer, setToolTipIsVisible]);\n\n  const TooltipContent = useCallback(\n    () => <span className={style.tooltipContentWrapper}>{ariaLabel}</span>,\n    [ariaLabel]\n  );\n\n  const Button = useCallback(\n    () =>\n      link ? (\n        <Link\n          {...link}\n          {...(ariaLabel\n            ? {\n                'data-for': dataName,\n                'data-tip': toolTipIsVisible\n              }\n            : {})}\n          className={styleButton}\n          data-name={dataName}\n          aria-label={ariaLabel}\n          onMouseEnter={handleMouseOver}\n          onMouseLeave={handleMouseLeave}\n        >\n          {contentView}\n        </Link>\n      ) : (\n        <button\n          {...(ariaLabel\n            ? {\n                'data-for': dataName,\n                'data-tip': toolTipIsVisible\n              }\n            : {})}\n          type=\"button\"\n          aria-label={ariaLabel}\n          data-name={dataName}\n          data-testid={`button-${dataName}-${className}`}\n          className={styleButton}\n          onClick={handleOnClick}\n          onMouseLeave={handleMouseLeave}\n          onMouseOver={handleMouseOver}\n          disabled={disabled}\n        >\n          {contentView}\n        </button>\n      ),\n    [\n      link,\n      ariaLabel,\n      className,\n      contentView,\n      dataName,\n      disabled,\n      handleMouseLeave,\n      handleMouseOver,\n      handleOnClick,\n      styleButton,\n      toolTipIsVisible\n    ]\n  );\n\n  return (\n    <>\n      <Button />\n      {ariaLabel ? (\n        <ToolTip\n          fontSize={12}\n          anchorId={dataName}\n          toolTipIsVisible={toolTipIsVisible}\n          placement={tooltipPlacement}\n          TooltipContent={TooltipContent}\n          closeToolTipInformationTextAriaLabel={ariaLabel}\n        />\n      ) : null}\n    </>\n  );\n};\n\nButtonLinkIcon.propTypes = {\n  size: PropTypes.oneOf(['default', 'small', 'responsive']),\n  'aria-label': PropTypes.string,\n  'data-name': PropTypes.string,\n  icon: PropTypes.oneOf(keys(ICONS)),\n  faIcon: PropTypes.string,\n  onClick: PropTypes.func,\n  link: PropTypes.shape({\n    href: PropTypes.string,\n    download: PropTypes.bool,\n    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top'])\n  }),\n  disabled: PropTypes.bool,\n  className: PropTypes.string,\n  tooltipPlacement: PropTypes.oneOf(['left', 'right', 'top', 'bottom'])\n};\n\nexport default ButtonLinkIcon;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useState","useCallback","useRef","PropTypes","classnames","ICONS","FaIcon","Link","ToolTip","style","getButtonContent","icon","faIcon","Icon","_getOr","createElement","className","buttonContent","iconName","getSizeStyle","size","small","responsive","defaultStyle","ButtonLinkIcon","props","disabled","dataName","ariaLabel","link","onClick","tooltipPlacement","toolTipIsVisible","setToolTipIsVisible","timer","contentView","styleButton","handleOnClick","event","handleMouseOver","current","clearTimeout","setTimeout","undefined","handleMouseLeave","TooltipContent","tooltipContentWrapper","Button","_extends","onMouseEnter","onMouseLeave","type","onMouseOver","Fragment","fontSize","anchorId","placement","closeToolTipInformationTextAriaLabel","propTypes","process","env","NODE_ENV","oneOf","string","_keys","func","shape","href","download","bool","target"],"sources":["../../../src/atom/button-link-icon/index.js"],"sourcesContent":["import React, {useState, useCallback, useRef} from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, keys} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {ICONS} from '../../util/button-icons';\nimport FaIcon from '../icon';\nimport Link from '../link';\nimport ToolTip from '../tooltip';\n// eslint-disable-next-line css-modules/no-unused-class\nimport style from './style.css';\n\nconst getButtonContent = (icon, faIcon) => {\n  const Icon = getOr(null, icon, ICONS);\n\n  if (!Icon && !faIcon) {\n    return <div className={style.buttonContent} />;\n  }\n\n  return (\n    <div className={style.buttonContent}>\n      {faIcon ? <FaIcon iconName={faIcon} /> : <Icon className={style.icon} />}\n    </div>\n  );\n};\n\nconst getSizeStyle = size => {\n  switch (size) {\n    case 'small':\n      return style.small;\n    case 'responsive':\n      return style.responsive;\n    default:\n      return style.defaultStyle;\n  }\n};\n\nconst ButtonLinkIcon = props => {\n  const {\n    size = 'default',\n    disabled,\n    icon,\n    faIcon,\n    'data-name': dataName = 'button-icon',\n    'aria-label': ariaLabel,\n    link,\n    onClick,\n    className,\n    tooltipPlacement = 'left'\n  } = props;\n  const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n  const timer = useRef();\n\n  const contentView = getButtonContent(icon, faIcon);\n  const styleButton = classnames(\n    getSizeStyle(size),\n    link && style.link,\n    disabled && style.disabled,\n    className\n  );\n\n  const handleOnClick = useCallback(event => onClick(event), [onClick]);\n\n  const handleMouseOver = useCallback(() => {\n    timer.current && clearTimeout(timer.current);\n    timer.current = setTimeout(() => {\n      setToolTipIsVisible(true);\n      timer.current = undefined;\n    }, 300);\n  }, [timer, setToolTipIsVisible]);\n\n  const handleMouseLeave = useCallback(() => {\n    timer.current && clearTimeout(timer.current);\n    setToolTipIsVisible(false);\n  }, [timer, setToolTipIsVisible]);\n\n  const TooltipContent = useCallback(\n    () => <span className={style.tooltipContentWrapper}>{ariaLabel}</span>,\n    [ariaLabel]\n  );\n\n  const Button = useCallback(\n    () =>\n      link ? (\n        <Link\n          {...link}\n          {...(ariaLabel\n            ? {\n                'data-for': dataName,\n                'data-tip': toolTipIsVisible\n              }\n            : {})}\n          className={styleButton}\n          data-name={dataName}\n          aria-label={ariaLabel}\n          onMouseEnter={handleMouseOver}\n          onMouseLeave={handleMouseLeave}\n        >\n          {contentView}\n        </Link>\n      ) : (\n        <button\n          {...(ariaLabel\n            ? {\n                'data-for': dataName,\n                'data-tip': toolTipIsVisible\n              }\n            : {})}\n          type=\"button\"\n          aria-label={ariaLabel}\n          data-name={dataName}\n          data-testid={`button-${dataName}-${className}`}\n          className={styleButton}\n          onClick={handleOnClick}\n          onMouseLeave={handleMouseLeave}\n          onMouseOver={handleMouseOver}\n          disabled={disabled}\n        >\n          {contentView}\n        </button>\n      ),\n    [\n      link,\n      ariaLabel,\n      className,\n      contentView,\n      dataName,\n      disabled,\n      handleMouseLeave,\n      handleMouseOver,\n      handleOnClick,\n      styleButton,\n      toolTipIsVisible\n    ]\n  );\n\n  return (\n    <>\n      <Button />\n      {ariaLabel ? (\n        <ToolTip\n          fontSize={12}\n          anchorId={dataName}\n          toolTipIsVisible={toolTipIsVisible}\n          placement={tooltipPlacement}\n          TooltipContent={TooltipContent}\n          closeToolTipInformationTextAriaLabel={ariaLabel}\n        />\n      ) : null}\n    </>\n  );\n};\n\nButtonLinkIcon.propTypes = {\n  size: PropTypes.oneOf(['default', 'small', 'responsive']),\n  'aria-label': PropTypes.string,\n  'data-name': PropTypes.string,\n  icon: PropTypes.oneOf(keys(ICONS)),\n  faIcon: PropTypes.string,\n  onClick: PropTypes.func,\n  link: PropTypes.shape({\n    href: PropTypes.string,\n    download: PropTypes.bool,\n    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top'])\n  }),\n  disabled: PropTypes.bool,\n  className: PropTypes.string,\n  tooltipPlacement: PropTypes.oneOf(['left', 'right', 'top', 'bottom'])\n};\n\nexport default ButtonLinkIcon;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/bullet-point-menu-button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/bullet-point-menu-button/index.tsx"],"names":[],"mappings":";AAKA,OAAkB,EAAC,0BAA0B,EAAC,MAAM,SAAS,CAAC;AAG9D,QAAA,MAAM,qBAAqB;YAAW,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2D/D,CAAC;AAIF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/bullet-point-menu-button/index.tsx"],"names":[],"mappings":";AAKA,OAAkB,EAAC,0BAA0B,EAAC,MAAM,SAAS,CAAC;AAG9D,QAAA,MAAM,qBAAqB;YAAW,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgF/D,CAAC;AAIF,eAAe,qBAAqB,CAAC"}

package/es/molecule/bullet-point-menu-button/index.js

@@ -1,5 +1,5 @@
 import _noop from "lodash/fp/noop";
-import React, { useCallback, useState, useEffect } from 'react';
+import React, { useCallback, useState, useEffect, useRef } from 'react';
 import classnames from 'classnames';
 import ButtonLinkIcon from '../../atom/button-link-icon';
 import ButtonMenu from '../../atom/button-menu';
@@ -17,17 +17,31 @@ const BulletPointMenuButton = props => {
     'data-name': dataName = 'bullet-point-button'
   } = props;
   const [visible, setVisible] = useState(false);
-  const handleOnClick = useCallback(() => {
+  const wrapperRef = useRef(null);
+  const handleOnClick = useCallback(event => {
+    event.stopPropagation();
+    event.preventDefault();
     onClick();
-    setVisible(true);
-  }, [onClick]);
+    setVisible(!visible);
+  }, [onClick, visible]);
   useEffect(() => {
-    const handleMouseDown = () => setVisible(false);
-    document.addEventListener('mousedown', handleMouseDown);
+    const handleClick = clickEvent => {
+      if (wrapperRef && wrapperRef.current && !wrapperRef.current.contains(clickEvent.target)) {
+        setVisible(false);
+      }
+    };
+    if (visible) {
+      document.addEventListener('click', handleClick);
+      document.addEventListener('touchstart', handleClick);
+    } else {
+      document.removeEventListener('click', handleClick);
+      document.removeEventListener('touchstart', handleClick);
+    }
     return () => {
-      document.removeEventListener('mousedown', handleMouseDown);
+      document.removeEventListener('click', handleClick);
+      document.removeEventListener('touchstart', handleClick);
     };
-  }, []);
+  }, [visible]);
   const menuProps = {
     'data-name': 'button-menu',
     buttons
@@ -36,7 +50,8 @@ const BulletPointMenuButton = props => {
   const menu = visible ? /*#__PURE__*/React.createElement("div", {
     className: menuStyle,
     "data-name": "menu-wrapper",
-    "aria-label": menuAriaLabel
+    "aria-label": menuAriaLabel,
+    ref: wrapperRef
   }, /*#__PURE__*/React.createElement(ButtonMenu, menuProps)) : null;
   const bulletPointButtonProps = {
     size: 'default',

package/es/molecule/bullet-point-menu-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","useEffect","classnames","ButtonLinkIcon","ButtonMenu","propTypes","style","BulletPointMenuButton","props","disabled","buttonAriaLabel","menuAriaLabel","onClick","_noop","buttons","menuButtonClassName","isBulkMenu","dataName","visible","setVisible","handleOnClick","handleMouseDown","document","addEventListener","removeEventListener","menuProps","menuStyle","bulletPointMenu","bulkBulletPointMenu","menu","createElement","className","bulletPointButtonProps","size","icon","bulletPointWrapper","process","env","NODE_ENV"],"sources":["../../../src/molecule/bullet-point-menu-button/index.tsx"],"sourcesContent":["import React, {useCallback, useState, useEffect} from 'react';\nimport classnames from 'classnames';\nimport {noop} from 'lodash/fp';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport ButtonMenu from '../../atom/button-menu';\nimport propTypes, {BulletPointMenuButtonProps} from './types';\nimport style from './style.css';\n\nconst BulletPointMenuButton = (props: BulletPointMenuButtonProps) => {\n  const {\n    disabled = false,\n    buttonAriaLabel,\n    menuAriaLabel,\n    onClick = noop,\n    buttons,\n    menuButtonClassName,\n    isBulkMenu,\n    'data-name': dataName = 'bullet-point-button'\n  } = props;\n  const [visible, setVisible] = useState(false);\n\n  const handleOnClick = useCallback(() => {\n    onClick();\n    setVisible(true);\n  }, [onClick]);\n\n  useEffect(() => {\n    const handleMouseDown = () => setVisible(false);\n    document.addEventListener('mousedown', handleMouseDown);\n    return () => {\n      document.removeEventListener('mousedown', handleMouseDown);\n    };\n  }, []);\n\n  const menuProps = {\n    'data-name': 'button-menu',\n    buttons\n  };\n\n  const menuStyle = classnames(\n    style.bulletPointMenu,\n    isBulkMenu && style.bulkBulletPointMenu,\n    style.visible\n  );\n\n  const menu = visible ? (\n    <div className={menuStyle} data-name=\"menu-wrapper\" aria-label={menuAriaLabel}>\n      <ButtonMenu {...menuProps} />\n    </div>\n  ) : null;\n\n  const bulletPointButtonProps = {\n    size: 'default',\n    'aria-label': buttonAriaLabel,\n    'data-name': dataName,\n    icon: 'bullet-point',\n    onClick: handleOnClick,\n    disabled,\n    className: menuButtonClassName\n  };\n\n  return (\n    <div className={style.bulletPointWrapper} data-name=\"bullet-point-wrapper\">\n      <ButtonLinkIcon {...bulletPointButtonProps} />\n      {menu}\n    </div>\n  );\n};\n\nBulletPointMenuButton.propTypes = propTypes;\n\nexport default BulletPointMenuButton;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAGC,WAAW,EAAEC,QAAQ,EAAEC,SAAS,QAAO,OAAO;AAC7D,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAOC,cAAc,MAAM,6BAA6B;AACxD,OAAOC,UAAU,MAAM,wBAAwB;AAC/C,OAAOC,SAAS,MAAoC,SAAS;AAC7D,OAAOC,KAAK,MAAM,aAAa;AAE/B,MAAMC,qBAAqB,GAAIC,KAAiC,IAAK;EACnE,MAAM;IACJC,QAAQ,GAAG,KAAK;IAChBC,eAAe;IACfC,aAAa;IACbC,OAAO,GAAAC,KAAO;IACdC,OAAO;IACPC,mBAAmB;IACnBC,UAAU;IACV,WAAW,EAAEC,QAAQ,GAAG;EAC1B,CAAC,GAAGT,KAAK;EACT,MAAM,CAACU,OAAO,EAAEC,UAAU,CAAC,GAAGnB,QAAQ,CAAC,KAAK,CAAC;EAE7C,MAAMoB,aAAa,GAAGrB,WAAW,CAAC,MAAM;IACtCa,OAAO,CAAC,CAAC;IACTO,UAAU,CAAC,IAAI,CAAC;EAClB,CAAC,EAAE,CAACP,OAAO,CAAC,CAAC;EAEbX,SAAS,CAAC,MAAM;IACd,MAAMoB,eAAe,GAAGA,CAAA,KAAMF,UAAU,CAAC,KAAK,CAAC;IAC/CG,QAAQ,CAACC,gBAAgB,CAAC,WAAW,EAAEF,eAAe,CAAC;IACvD,OAAO,MAAM;MACXC,QAAQ,CAACE,mBAAmB,CAAC,WAAW,EAAEH,eAAe,CAAC;IAC5D,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMI,SAAS,GAAG;IAChB,WAAW,EAAE,aAAa;IAC1BX;EACF,CAAC;EAED,MAAMY,SAAS,GAAGxB,UAAU,CAC1BI,KAAK,CAACqB,eAAe,EACrBX,UAAU,IAAIV,KAAK,CAACsB,mBAAmB,EACvCtB,KAAK,CAACY,OACR,CAAC;EAED,MAAMW,IAAI,GAAGX,OAAO,gBAClBpB,KAAA,CAAAgC,aAAA;IAAKC,SAAS,EAAEL,SAAU;IAAC,aAAU,cAAc;IAAC,cAAYf;EAAc,gBAC5Eb,KAAA,CAAAgC,aAAA,CAAC1B,UAAU,EAAKqB,SAAY,CACzB,CAAC,GACJ,IAAI;EAER,MAAMO,sBAAsB,GAAG;IAC7BC,IAAI,EAAE,SAAS;IACf,YAAY,EAAEvB,eAAe;IAC7B,WAAW,EAAEO,QAAQ;IACrBiB,IAAI,EAAE,cAAc;IACpBtB,OAAO,EAAEQ,aAAa;IACtBX,QAAQ;IACRsB,SAAS,EAAEhB;EACb,CAAC;EAED,oBACEjB,KAAA,CAAAgC,aAAA;IAAKC,SAAS,EAAEzB,KAAK,CAAC6B,kBAAmB;IAAC,aAAU;EAAsB,gBACxErC,KAAA,CAAAgC,aAAA,CAAC3B,cAAc,EAAK6B,sBAAyB,CAAC,EAC7CH,IACE,CAAC;AAEV,CAAC;AAEDtB,qBAAqB,CAACF,SAAS,GAAA+B,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAGjC,SAAS;AAE3C,eAAeE,qBAAqB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","useEffect","useRef","classnames","ButtonLinkIcon","ButtonMenu","propTypes","style","BulletPointMenuButton","props","disabled","buttonAriaLabel","menuAriaLabel","onClick","_noop","buttons","menuButtonClassName","isBulkMenu","dataName","visible","setVisible","wrapperRef","handleOnClick","event","stopPropagation","preventDefault","handleClick","clickEvent","current","contains","target","document","addEventListener","removeEventListener","menuProps","menuStyle","bulletPointMenu","bulkBulletPointMenu","menu","createElement","className","ref","bulletPointButtonProps","size","icon","bulletPointWrapper","process","env","NODE_ENV"],"sources":["../../../src/molecule/bullet-point-menu-button/index.tsx"],"sourcesContent":["import React, {useCallback, useState, useEffect, useRef} from 'react';\nimport classnames from 'classnames';\nimport {noop} from 'lodash/fp';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport ButtonMenu from '../../atom/button-menu';\nimport propTypes, {BulletPointMenuButtonProps} from './types';\nimport style from './style.css';\n\nconst BulletPointMenuButton = (props: BulletPointMenuButtonProps) => {\n  const {\n    disabled = false,\n    buttonAriaLabel,\n    menuAriaLabel,\n    onClick = noop,\n    buttons,\n    menuButtonClassName,\n    isBulkMenu,\n    'data-name': dataName = 'bullet-point-button'\n  } = props;\n  const [visible, setVisible] = useState(false);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  const handleOnClick = useCallback(\n    (event: React.MouseEvent | React.TouchEvent) => {\n      event.stopPropagation();\n      event.preventDefault();\n      onClick();\n      setVisible(!visible);\n    },\n    [onClick, visible]\n  );\n\n  useEffect(() => {\n    const handleClick = (clickEvent: MouseEvent | TouchEvent) => {\n      if (\n        wrapperRef &&\n        wrapperRef.current &&\n        !wrapperRef.current.contains(clickEvent.target as Node)\n      ) {\n        setVisible(false);\n      }\n    };\n    if (visible) {\n      document.addEventListener('click', handleClick);\n      document.addEventListener('touchstart', handleClick);\n    } else {\n      document.removeEventListener('click', handleClick);\n      document.removeEventListener('touchstart', handleClick);\n    }\n    return () => {\n      document.removeEventListener('click', handleClick);\n      document.removeEventListener('touchstart', handleClick);\n    };\n  }, [visible]);\n\n  const menuProps = {\n    'data-name': 'button-menu',\n    buttons\n  };\n\n  const menuStyle = classnames(\n    style.bulletPointMenu,\n    isBulkMenu && style.bulkBulletPointMenu,\n    style.visible\n  );\n\n  const menu = visible ? (\n    <div className={menuStyle} data-name=\"menu-wrapper\" aria-label={menuAriaLabel} ref={wrapperRef}>\n      <ButtonMenu {...menuProps} />\n    </div>\n  ) : null;\n\n  const bulletPointButtonProps = {\n    size: 'default',\n    'aria-label': buttonAriaLabel,\n    'data-name': dataName,\n    icon: 'bullet-point',\n    onClick: handleOnClick,\n    disabled,\n    className: menuButtonClassName\n  };\n\n  return (\n    <div className={style.bulletPointWrapper} data-name=\"bullet-point-wrapper\">\n      <ButtonLinkIcon {...bulletPointButtonProps} />\n      {menu}\n    </div>\n  );\n};\n\nBulletPointMenuButton.propTypes = propTypes;\n\nexport default BulletPointMenuButton;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/bullet-point-menu-button/types.d.ts

@@ -41,7 +41,7 @@ export declare type BulletPointMenuButtonProps = {
     buttonAriaLabel?: string;
     menuAriaLabel?: string;
     buttons: ButtonProps[];
-    onClick: () => void;
+    onClick?: () => void;
     menuButtonClassName?: string;
     isBulkMenu?: boolean;
 };

package/es/molecule/bullet-point-menu-button/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/bullet-point-menu-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAC,WAAW,EAAC,MAAM,8BAA8B,CAAC;AAEzD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASd,CAAC;AAEF,eAAe,SAAS,CAAC;AAEzB,oBAAY,0BAA0B,GAAG;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,oBAAY,iCAAiC,GAAG;IAAC,KAAK,EAAE,0BAA0B,CAAA;CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/bullet-point-menu-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAC,WAAW,EAAC,MAAM,8BAA8B,CAAC;AAEzD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASd,CAAC;AAEF,eAAe,SAAS,CAAC;AAEzB,oBAAY,0BAA0B,GAAG;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,oBAAY,iCAAiC,GAAG;IAAC,KAAK,EAAE,0BAA0B,CAAA;CAAC,CAAC"}

package/es/molecule/bullet-point-menu-button/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["PropTypes","ButtonMenu","propTypes","string","disabled","bool","buttonAriaLabel","menuAriaLabel","buttons","onClick","func","menuButtonClassName","isBulkMenu"],"sources":["../../../src/molecule/bullet-point-menu-button/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport ButtonMenu from '../../atom/button-menu';\nimport {ButtonProps} from '../../atom/button-menu/types';\n\nconst propTypes = {\n  'data-name': PropTypes.string,\n  disabled: PropTypes.bool,\n  buttonAriaLabel: PropTypes.string,\n  menuAriaLabel: PropTypes.string,\n  buttons: ButtonMenu.propTypes.buttons,\n  onClick: PropTypes.func,\n  menuButtonClassName: PropTypes.string,\n  isBulkMenu: PropTypes.bool\n};\n\nexport default propTypes;\n\nexport type BulletPointMenuButtonProps = {\n  'data-name'?: string;\n  disabled?: boolean;\n  buttonAriaLabel?: string;\n  menuAriaLabel?: string;\n  buttons: ButtonProps[];\n  onClick: () => void;\n  menuButtonClassName?: string;\n  isBulkMenu?: boolean;\n};\n\nexport type BulletPointMenuButtonPropsFixture = {props: BulletPointMenuButtonProps};\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,wBAAwB;AAG/C,MAAMC,SAAS,GAAG;EAChB,WAAW,EAAEF,SAAS,CAACG,MAAM;EAC7BC,QAAQ,EAAEJ,SAAS,CAACK,IAAI;EACxBC,eAAe,EAAEN,SAAS,CAACG,MAAM;EACjCI,aAAa,EAAEP,SAAS,CAACG,MAAM;EAC/BK,OAAO,EAAEP,UAAU,CAACC,SAAS,CAACM,OAAO;EACrCC,OAAO,EAAET,SAAS,CAACU,IAAI;EACvBC,mBAAmB,EAAEX,SAAS,CAACG,MAAM;EACrCS,UAAU,EAAEZ,SAAS,CAACK;AACxB,CAAC;AAED,eAAeH,SAAS","ignoreList":[]}
+{"version":3,"file":"types.js","names":["PropTypes","ButtonMenu","propTypes","string","disabled","bool","buttonAriaLabel","menuAriaLabel","buttons","onClick","func","menuButtonClassName","isBulkMenu"],"sources":["../../../src/molecule/bullet-point-menu-button/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport ButtonMenu from '../../atom/button-menu';\nimport {ButtonProps} from '../../atom/button-menu/types';\n\nconst propTypes = {\n  'data-name': PropTypes.string,\n  disabled: PropTypes.bool,\n  buttonAriaLabel: PropTypes.string,\n  menuAriaLabel: PropTypes.string,\n  buttons: ButtonMenu.propTypes.buttons,\n  onClick: PropTypes.func,\n  menuButtonClassName: PropTypes.string,\n  isBulkMenu: PropTypes.bool\n};\n\nexport default propTypes;\n\nexport type BulletPointMenuButtonProps = {\n  'data-name'?: string;\n  disabled?: boolean;\n  buttonAriaLabel?: string;\n  menuAriaLabel?: string;\n  buttons: ButtonProps[];\n  onClick?: () => void;\n  menuButtonClassName?: string;\n  isBulkMenu?: boolean;\n};\n\nexport type BulletPointMenuButtonPropsFixture = {props: BulletPointMenuButtonProps};\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,wBAAwB;AAG/C,MAAMC,SAAS,GAAG;EAChB,WAAW,EAAEF,SAAS,CAACG,MAAM;EAC7BC,QAAQ,EAAEJ,SAAS,CAACK,IAAI;EACxBC,eAAe,EAAEN,SAAS,CAACG,MAAM;EACjCI,aAAa,EAAEP,SAAS,CAACG,MAAM;EAC/BK,OAAO,EAAEP,UAAU,CAACC,SAAS,CAACM,OAAO;EACrCC,OAAO,EAAET,SAAS,CAACU,IAAI;EACvBC,mBAAmB,EAAEX,SAAS,CAACG,MAAM;EACrCS,UAAU,EAAEZ,SAAS,CAACK;AACxB,CAAC;AAED,eAAeH,SAAS","ignoreList":[]}

package/es/molecule/learner-skill-card/index.d.ts

@@ -1,29 +1,44 @@
-import React from 'react';
-import { WebContextValues } from '../../atom/provider/web-context';
-import { LearnerSkillCardProps } from './prop-types';
-export declare const updateBackgroundImage: (ref: React.RefObject<HTMLDivElement>, background: string) => void;
-declare const LearnerSkillCard: {
-    (props: LearnerSkillCardProps, context: WebContextValues): JSX.Element;
-    contextTypes: {
-        translate: import("prop-types").Requireable<(...args: any[]) => any>;
-    };
-    propTypes: {
-        'aria-label': import("prop-types").Requireable<string>;
-        cardIndex: import("prop-types").Requireable<number>;
-        skillTitle: import("prop-types").Requireable<string>;
-        skillAriaLabel: import("prop-types").Requireable<string>;
-        focus: import("prop-types").Requireable<boolean>;
-        metrics: import("prop-types").Requireable<import("prop-types").InferProps<{
-            content: import("prop-types").Requireable<number>;
-            score: import("prop-types").Requireable<number>;
-            questionsToReview: import("prop-types").Requireable<number>;
+export default LearnerSkillCard;
+declare function LearnerSkillCard(props: any, context: any): JSX.Element;
+declare namespace LearnerSkillCard {
+    namespace contextTypes {
+        const skin: PropTypes.Requireable<PropTypes.InferProps<{
+            common: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            images: PropTypes.Requireable<PropTypes.InferProps<{
+                'logo-mobile': PropTypes.Requireable<any>;
+                logo: PropTypes.Requireable<any>;
+                'logo-email': PropTypes.Requireable<any>;
+                login: PropTypes.Requireable<any>;
+            }>>;
+            icons: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            mod: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            courses: PropTypes.Requireable<any[]>;
+            texts: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
         }>>;
-        icon: import("prop-types").Requireable<import("prop-types").InferProps<{
-            color: import("prop-types").Requireable<string>;
-            name: import("prop-types").Requireable<string>;
+        const translate: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+    const propTypes: {
+        'aria-label': PropTypes.Requireable<string>;
+        skillTitle: PropTypes.Requireable<string>;
+        skillAriaLabel: PropTypes.Requireable<string>;
+        focus: PropTypes.Requireable<boolean>;
+        metrics: PropTypes.Requireable<PropTypes.InferProps<{
+            score: PropTypes.Requireable<number>;
+            content: PropTypes.Requireable<number>;
+            questionsToReview: PropTypes.Requireable<number>;
         }>>;
-        onExploreClick: import("prop-types").Requireable<(...args: any[]) => any>;
+        review: PropTypes.Requireable<boolean>;
+        onReviewClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onExploreClick: PropTypes.Requireable<(...args: any[]) => any>;
     };
-};
-export default LearnerSkillCard;
+}
+import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/es/molecule/learner-skill-card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learner-skill-card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AAKjE,OAAkB,EAAC,qBAAqB,EAAC,MAAM,cAAc,CAAC;AAK9D,eAAO,MAAM,qBAAqB,QAAS,MAAM,SAAS,CAAC,cAAc,CAAC,cAAc,MAAM,SAI7F,CAAC;AAEF,QAAA,MAAM,gBAAgB;YAAW,qBAAqB,WAAW,gBAAgB;;;;;;;;;;;;;;;;;;;;;CA8HhF,CAAC;AAQF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learner-skill-card/index.js"],"names":[],"mappings":";AAaA,yEAiHC"}

package/es/molecule/learner-skill-card/index.js

@@ -1,26 +1,23 @@
-import React, { useCallback, useMemo, useRef } from 'react';
-import Provider, { GetTranslateFromContext } from '../../atom/provider';
+import _get from "lodash/fp/get";
+import React from 'react';
+import { convert } from 'css-color-function';
+import PropTypes from 'prop-types';
+import Icon from '../../atom/icon';
+import ButtonLink from '../../atom/button-link';
+import Provider from '../../atom/provider';
 import ProgressBar from '../progress-bar';
 import { COLORS } from '../../variables/colors';
-import { createGradientBackground } from '../../util/get-background-gradient-color';
-import FaIcon from '../../atom/icon';
-import propTypes from './prop-types';
 import style from './style.css';
 const MAX_SCORE = 100;
-export const updateBackgroundImage = (ref, background) => {
-  if (ref.current) {
-    ref.current.style.backgroundImage = background;
-  }
-};
 const LearnerSkillCard = (props, context) => {
   const {
     'aria-label': ariaLabel,
-    cardIndex,
     skillTitle,
     skillAriaLabel,
-    focus,
+    focus = false,
     metrics,
-    icon,
+    review = false,
+    onReviewClick,
     onExploreClick
   } = props;
   const {
@@ -28,95 +25,76 @@ const LearnerSkillCard = (props, context) => {
     content,
     questionsToReview = 0
   } = metrics;
-  const translate = GetTranslateFromContext(context);
   const {
-    color,
-    name
-  } = icon;
+    skin,
+    translate
+  } = context;
+  const primarySkinColor = _get('common.primary', skin);
+  const reviewLocale = translate('Review');
+  const exploreLocale = translate('Explore');
   const questionsLocale = translate('skill_chart_side_panel_questions_to_review');
-  const [badgeIconName, badgeLocale, tagTextColor, tagBackgroundColor] = focus ? ['bullseye-arrow', translate('skill_focus'), COLORS.purple_700, COLORS.purple_100] : ['shapes', translate('skill'), COLORS.cm_grey_500, COLORS.gray];
-  const headerBackgroundRef = useRef(null);
-  const defaultBackground = useMemo(() => createGradientBackground(color, '93%', '100%'), [color]);
-  const focusBackground = useMemo(() => createGradientBackground(color, '83%', '100%'), [color]);
-  const handleMouseEnter = useCallback(() => {
-    updateBackgroundImage(headerBackgroundRef, focusBackground);
-  }, [focusBackground]);
-  const handleMouseLeave = useCallback(() => {
-    updateBackgroundImage(headerBackgroundRef, defaultBackground);
-  }, [defaultBackground]);
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": `learner-skill-card-wrapper-${cardIndex}`,
-    onClick: onExploreClick,
-    className: style.learnerSkillCardContainer,
-    "aria-label": ariaLabel,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave
-  }, /*#__PURE__*/React.createElement("div", {
-    "data-testid": "learner-skill-card-icon-header-wrapper",
-    ref: headerBackgroundRef,
-    className: style.iconHeaderWrapper,
-    style: {
-      backgroundImage: defaultBackground,
-      color: tagTextColor
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: style.iconWrapper,
-    "data-testid": "learner-skill-card-icon-wrapper"
-  }, /*#__PURE__*/React.createElement(FaIcon, {
-    iconName: name,
-    iconColor: color,
-    size: {
-      faSize: 20,
-      wrapperSize: 44
+  const skillFocusLocale = translate('skill_focus');
+  const buttonReviewProps = {
+    customStyle: {
+      backgroundColor: '#FFF',
+      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',
+      padding: '0px'
     },
-    borderRadius: '12px',
-    gradientBackground: true,
+    disabled: !review,
+    onClick: onReviewClick,
+    'aria-label': `${skillTitle}, ${reviewLocale}`,
+    label: reviewLocale,
+    'data-name': 'learner-skill-card-review-button'
+  };
+  const buttonExploreProps = {
     customStyle: {
-      border: '4px solid white'
+      backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),
+      color: primarySkinColor,
+      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'
+    },
+    hoverColor: '#FFFFFF',
+    hoverBackgroundColor: primarySkinColor,
+    onClick: onExploreClick,
+    'aria-label': `${skillTitle}, ${exploreLocale}`,
+    label: exploreLocale,
+    'data-name': 'learner-skill-card-explore-button',
+    icon: {
+      position: 'left',
+      faIcon: {
+        name: 'compass',
+        backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),
+        color: primarySkinColor,
+        size: 16
+      }
     }
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: style.learnerSkillCardContent
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.learnerSkillCardWrapper,
+    "data-name": "learner-skill-card-wrapper",
+    "aria-label": ariaLabel
+  }, questionsToReview ? /*#__PURE__*/React.createElement("div", {
+    className: style.skillQuestionsWrapper
   }, /*#__PURE__*/React.createElement("div", {
+    className: style.skillInformation,
+    "data-name": "skill-questions"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.skillInformationNumber
+  }, questionsToReview), "\xA0", questionsLocale)) : null, /*#__PURE__*/React.createElement("div", {
     className: style.skillTitleWrapper
   }, /*#__PURE__*/React.createElement("div", {
-    className: style.skillFocusBadge,
-    style: {
-      backgroundColor: tagBackgroundColor,
-      color: tagTextColor
-    }
-  }, /*#__PURE__*/React.createElement(FaIcon, {
-    iconName: badgeIconName,
-    backgroundColor: tagBackgroundColor,
-    size: {
-      faSize: 10,
-      wrapperSize: 16
-    }
-  }), badgeLocale), /*#__PURE__*/React.createElement("div", {
-    className: style.questionWrapper
-  }, /*#__PURE__*/React.createElement("div", {
-    "data-name": "skill-card-title",
+    "data-name": "skill-title",
     className: style.skillTitle,
     "aria-label": skillAriaLabel || skillTitle
-  }, skillTitle), /*#__PURE__*/React.createElement("div", {
-    className: style.contentAndQuestionsWrapper
-  }, /*#__PURE__*/React.createElement("div", {
-    "data-name": "learner-skill-card-skill-content-number"
-  }, content, " ", translate('content')), questionsToReview ? /*#__PURE__*/React.createElement("div", {
-    className: style.skillInformation,
-    "data-name": "learner-skill-card-skill-questions-wrapper"
-  }, /*#__PURE__*/React.createElement(FaIcon, {
-    iconName: 'circle',
-    iconColor: COLORS.cm_grey_400,
+  }, skillTitle), focus ? /*#__PURE__*/React.createElement("div", {
+    className: style.skillFocusBadge
+  }, /*#__PURE__*/React.createElement(Icon, {
+    iconName: "bullseye-arrow",
+    backgroundColor: "#DDD1FF",
     size: {
-      faSize: 4
-    },
-    customStyle: {
-      padding: 0,
-      height: 'auto'
+      faSize: 10,
+      wrapperSize: 16
     }
-  }), /*#__PURE__*/React.createElement("span", {
-    "data-name": "learner-skill-card-questions-to-review"
-  }, questionsToReview), "\xA0", questionsLocale) : null)))), /*#__PURE__*/React.createElement("div", {
+  }), skillFocusLocale) : null), content ? /*#__PURE__*/React.createElement("div", {
     className: style.progressInformations
   }, /*#__PURE__*/React.createElement(ProgressBar, {
     value: score,
@@ -126,11 +104,36 @@ const LearnerSkillCard = (props, context) => {
     style: {
       backgroundColor: COLORS.positive
     }
-  })));
+  }), /*#__PURE__*/React.createElement("div", {
+    className: style.progressInformation,
+    "data-name": "completed-percentage"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.progressInformationNumber
+  }, score, "%"))) : null, /*#__PURE__*/React.createElement("div", {
+    className: style.ctaWrapper,
+    "data-name": "cta-wrapper"
+  }, /*#__PURE__*/React.createElement(ButtonLink, buttonReviewProps), /*#__PURE__*/React.createElement("div", {
+    className: style.buttonWrapper,
+    "data-name": "button-explore-wrapper"
+  }, /*#__PURE__*/React.createElement(ButtonLink, buttonExploreProps))));
 };
 LearnerSkillCard.contextTypes = {
+  skin: Provider.childContextTypes.skin,
   translate: Provider.childContextTypes.translate
 };
-LearnerSkillCard.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+LearnerSkillCard.propTypes = process.env.NODE_ENV !== "production" ? {
+  'aria-label': PropTypes.string,
+  skillTitle: PropTypes.string,
+  skillAriaLabel: PropTypes.string,
+  focus: PropTypes.bool,
+  metrics: PropTypes.shape({
+    score: PropTypes.number,
+    content: PropTypes.number,
+    questionsToReview: PropTypes.number
+  }),
+  review: PropTypes.bool,
+  onReviewClick: PropTypes.func,
+  onExploreClick: PropTypes.func
+} : {};
 export default LearnerSkillCard;
 //# sourceMappingURL=index.js.map

package/es/molecule/learner-skill-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useMemo","useRef","Provider","GetTranslateFromContext","ProgressBar","COLORS","createGradientBackground","FaIcon","propTypes","style","MAX_SCORE","updateBackgroundImage","ref","background","current","backgroundImage","LearnerSkillCard","props","context","ariaLabel","cardIndex","skillTitle","skillAriaLabel","focus","metrics","icon","onExploreClick","score","content","questionsToReview","translate","color","name","questionsLocale","badgeIconName","badgeLocale","tagTextColor","tagBackgroundColor","purple_700","purple_100","cm_grey_500","gray","headerBackgroundRef","defaultBackground","focusBackground","handleMouseEnter","handleMouseLeave","createElement","onClick","className","learnerSkillCardContainer","onMouseEnter","onMouseLeave","iconHeaderWrapper","iconWrapper","iconName","iconColor","size","faSize","wrapperSize","borderRadius","gradientBackground","customStyle","border","learnerSkillCardContent","skillTitleWrapper","skillFocusBadge","backgroundColor","questionWrapper","contentAndQuestionsWrapper","skillInformation","cm_grey_400","padding","height","progressInformations","value","displayInfo","max","progressWrapper","positive","contextTypes","childContextTypes","process","env","NODE_ENV"],"sources":["../../../src/molecule/learner-skill-card/index.tsx"],"sourcesContent":["import React, {useCallback, useMemo, useRef} from 'react';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport ProgressBar from '../progress-bar';\nimport {COLORS} from '../../variables/colors';\nimport {createGradientBackground} from '../../util/get-background-gradient-color';\nimport FaIcon from '../../atom/icon';\nimport propTypes, {LearnerSkillCardProps} from './prop-types';\nimport style from './style.css';\n\nconst MAX_SCORE = 100;\n\nexport const updateBackgroundImage = (ref: React.RefObject<HTMLDivElement>, background: string) => {\n  if (ref.current) {\n    ref.current.style.backgroundImage = background;\n  }\n};\n\nconst LearnerSkillCard = (props: LearnerSkillCardProps, context: WebContextValues) => {\n  const {\n    'aria-label': ariaLabel,\n    cardIndex,\n    skillTitle,\n    skillAriaLabel,\n    focus,\n    metrics,\n    icon,\n    onExploreClick\n  } = props;\n  const {score, content, questionsToReview = 0} = metrics;\n  const translate = GetTranslateFromContext(context);\n  const {color, name} = icon;\n  const questionsLocale = translate('skill_chart_side_panel_questions_to_review') as string;\n  const [badgeIconName, badgeLocale, tagTextColor, tagBackgroundColor] = focus\n    ? ['bullseye-arrow', translate('skill_focus') as string, COLORS.purple_700, COLORS.purple_100]\n    : ['shapes', translate('skill') as string, COLORS.cm_grey_500, COLORS.gray];\n  const headerBackgroundRef = useRef<HTMLDivElement | null>(null);\n  const defaultBackground = useMemo(() => createGradientBackground(color, '93%', '100%'), [color]);\n  const focusBackground = useMemo(() => createGradientBackground(color, '83%', '100%'), [color]);\n  const handleMouseEnter = useCallback(() => {\n    updateBackgroundImage(headerBackgroundRef, focusBackground);\n  }, [focusBackground]);\n  const handleMouseLeave = useCallback(() => {\n    updateBackgroundImage(headerBackgroundRef, defaultBackground);\n  }, [defaultBackground]);\n  return (\n    <div\n      data-testid={`learner-skill-card-wrapper-${cardIndex}`}\n      onClick={onExploreClick}\n      className={style.learnerSkillCardContainer}\n      aria-label={ariaLabel}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      <div\n        data-testid=\"learner-skill-card-icon-header-wrapper\"\n        ref={headerBackgroundRef}\n        className={style.iconHeaderWrapper}\n        style={{backgroundImage: defaultBackground, color: tagTextColor}}\n      >\n        <div className={style.iconWrapper} data-testid=\"learner-skill-card-icon-wrapper\">\n          <FaIcon\n            {...{\n              iconName: name,\n              iconColor: color,\n              size: {\n                faSize: 20,\n                wrapperSize: 44\n              },\n              borderRadius: '12px',\n              gradientBackground: true,\n              customStyle: {border: '4px solid white'}\n            }}\n          />\n        </div>\n      </div>\n      <div className={style.learnerSkillCardContent}>\n        <div className={style.skillTitleWrapper}>\n          <div\n            className={style.skillFocusBadge}\n            style={{\n              backgroundColor: tagBackgroundColor,\n              color: tagTextColor\n            }}\n          >\n            <FaIcon\n              {...{\n                iconName: badgeIconName,\n                backgroundColor: tagBackgroundColor,\n                size: {\n                  faSize: 10,\n                  wrapperSize: 16\n                }\n              }}\n            />\n            {badgeLocale}\n          </div>\n\n          <div className={style.questionWrapper}>\n            <div\n              data-name=\"skill-card-title\"\n              className={style.skillTitle}\n              aria-label={skillAriaLabel || skillTitle}\n            >\n              {skillTitle}\n            </div>\n            <div className={style.contentAndQuestionsWrapper}>\n              <div data-name=\"learner-skill-card-skill-content-number\">\n                {content} {translate('content')}\n              </div>\n              {questionsToReview ? (\n                <div\n                  className={style.skillInformation}\n                  data-name=\"learner-skill-card-skill-questions-wrapper\"\n                >\n                  <FaIcon\n                    {...{\n                      iconName: 'circle',\n                      iconColor: COLORS.cm_grey_400,\n                      size: {faSize: 4},\n                      customStyle: {padding: 0, height: 'auto'}\n                    }}\n                  />\n                  <span data-name=\"learner-skill-card-questions-to-review\">\n                    {questionsToReview}\n                  </span>\n                  &nbsp;{questionsLocale}\n                </div>\n              ) : null}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className={style.progressInformations}>\n        <ProgressBar\n          value={score}\n          displayInfo={false}\n          max={MAX_SCORE}\n          className={style.progressWrapper}\n          style={{backgroundColor: COLORS.positive}}\n        />\n      </div>\n    </div>\n  );\n};\n\nLearnerSkillCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nLearnerSkillCard.propTypes = propTypes;\n\nexport default LearnerSkillCard;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","convert","PropTypes","Icon","ButtonLink","Provider","ProgressBar","COLORS","style","MAX_SCORE","LearnerSkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","focus","metrics","review","onReviewClick","onExploreClick","score","content","questionsToReview","skin","translate","primarySkinColor","_get","reviewLocale","exploreLocale","questionsLocale","skillFocusLocale","buttonReviewProps","customStyle","backgroundColor","transition","padding","disabled","onClick","label","buttonExploreProps","color","hoverColor","hoverBackgroundColor","icon","position","faIcon","name","size","createElement","className","learnerSkillCardWrapper","skillQuestionsWrapper","skillInformation","skillInformationNumber","skillTitleWrapper","skillFocusBadge","iconName","faSize","wrapperSize","progressInformations","value","displayInfo","max","progressWrapper","positive","progressInformation","progressInformationNumber","ctaWrapper","buttonWrapper","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","string","bool","shape","number","func"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React from 'react';\nimport {convert} from 'css-color-function';\nimport {get} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport Provider from '../../atom/provider';\nimport ProgressBar from '../progress-bar';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nconst MAX_SCORE = 100;\n\nconst LearnerSkillCard = (props, context) => {\n  const {\n    'aria-label': ariaLabel,\n    skillTitle,\n    skillAriaLabel,\n    focus = false,\n    metrics,\n    review = false,\n    onReviewClick,\n    onExploreClick\n  } = props;\n  const {score, content, questionsToReview = 0} = metrics;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const reviewLocale = translate('Review');\n  const exploreLocale = translate('Explore');\n  const questionsLocale = translate('skill_chart_side_panel_questions_to_review');\n  const skillFocusLocale = translate('skill_focus');\n\n  const buttonReviewProps = {\n    customStyle: {\n      backgroundColor: '#FFF',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n      padding: '0px'\n    },\n    disabled: !review,\n    onClick: onReviewClick,\n    'aria-label': `${skillTitle}, ${reviewLocale}`,\n    label: reviewLocale,\n    'data-name': 'learner-skill-card-review-button'\n  };\n\n  const buttonExploreProps = {\n    customStyle: {\n      backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n      color: primarySkinColor,\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    hoverColor: '#FFFFFF',\n    hoverBackgroundColor: primarySkinColor,\n    onClick: onExploreClick,\n    'aria-label': `${skillTitle}, ${exploreLocale}`,\n    label: exploreLocale,\n    'data-name': 'learner-skill-card-explore-button',\n    icon: {\n      position: 'left',\n      faIcon: {\n        name: 'compass',\n        backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n        color: primarySkinColor,\n        size: 16\n      }\n    }\n  };\n  return (\n    <div\n      className={style.learnerSkillCardWrapper}\n      data-name=\"learner-skill-card-wrapper\"\n      aria-label={ariaLabel}\n    >\n      {questionsToReview ? (\n        <div className={style.skillQuestionsWrapper}>\n          <div className={style.skillInformation} data-name=\"skill-questions\">\n            <span className={style.skillInformationNumber}>{questionsToReview}</span>\n            &nbsp;{questionsLocale}\n          </div>\n        </div>\n      ) : null}\n      <div className={style.skillTitleWrapper}>\n        <div\n          data-name=\"skill-title\"\n          className={style.skillTitle}\n          aria-label={skillAriaLabel || skillTitle}\n        >\n          {skillTitle}\n        </div>\n        {focus ? (\n          <div className={style.skillFocusBadge}>\n            <Icon\n              iconName=\"bullseye-arrow\"\n              backgroundColor=\"#DDD1FF\"\n              size={{\n                faSize: 10,\n                wrapperSize: 16\n              }}\n            />\n            {skillFocusLocale}\n          </div>\n        ) : null}\n      </div>\n      {content ? (\n        <div className={style.progressInformations}>\n          <ProgressBar\n            value={score}\n            displayInfo={false}\n            max={MAX_SCORE}\n            className={style.progressWrapper}\n            style={{backgroundColor: COLORS.positive}}\n          />\n          <div className={style.progressInformation} data-name=\"completed-percentage\">\n            <span className={style.progressInformationNumber}>{score}%</span>\n          </div>\n        </div>\n      ) : null}\n      <div className={style.ctaWrapper} data-name=\"cta-wrapper\">\n        <ButtonLink {...buttonReviewProps} />\n        <div className={style.buttonWrapper} data-name=\"button-explore-wrapper\">\n          <ButtonLink {...buttonExploreProps} />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nLearnerSkillCard.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nLearnerSkillCard.propTypes = {\n  'aria-label': PropTypes.string,\n  skillTitle: PropTypes.string,\n  skillAriaLabel: PropTypes.string,\n  focus: PropTypes.bool,\n  metrics: PropTypes.shape({\n    score: PropTypes.number,\n    content: PropTypes.number,\n    questionsToReview: PropTypes.number\n  }),\n  review: PropTypes.bool,\n  onReviewClick: PropTypes.func,\n  onExploreClick: PropTypes.func\n};\n\nexport default LearnerSkillCard;\n"],"mappings":"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","ignoreList":[]}