@coorpacademy/components 11.40.22 → 11.40.23

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useMemo","useRef","PropTypes","Provider","GetTranslateFromContext","ProgressBar","COLORS","createGradientBackground","FaIcon","style","MAX_SCORE","updateBackgroundImage","ref","background","current","backgroundImage","LearnerSkillCard","props","context","ariaLabel","cardIndex","title","label","focus","metrics","progress","icon","onClick","content","questionsToReview","translate","color","name","badgeIconName","badgeLocale","tagTextColor","tagBackgroundColor","purple_700","purple_100","neutral_500","cm_grey_100","headerBackgroundRef","defaultBackground","focusBackground","handleMouseEnter","handleMouseLeave","createElement","className","learnerSkillCardContainer","onMouseEnter","onMouseLeave","iconHeaderWrapper","iconWrapper","iconName","iconColor","size","faSize","wrapperSize","borderRadius","gradientBackground","customStyle","border","learnerSkillCardContent","skillTitleWrapper","skillFocusBadge","backgroundColor","questionWrapper","skillTitle","contentAndQuestionsWrapper","dangerouslySetInnerHTML","__html","count","skillInformation","cm_grey_400","progressInformations","value","displayInfo","max","progressWrapper","cm_positive_500","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","type","oneOf","isRequired","string","number","bool","shape","func"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React, {useCallback, useMemo, useRef} from 'react';\nimport PropTypes from 'prop-types';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport ProgressBar from '../progress-bar';\nimport {COLORS} from '../../variables/colors';\nimport {createGradientBackground} from '../../util/get-background-gradient-color';\nimport FaIcon from '../../atom/icon';\nimport style from './style.css';\n\nconst MAX_SCORE = 100;\n\nexport const updateBackgroundImage = (ref, background) => {\n  if (ref.current) {\n    ref.current.style.backgroundImage = background;\n  }\n};\nconst LearnerSkillCard = (props, context) => {\n  const {\n    'aria-label': ariaLabel,\n    cardIndex,\n    title,\n    label,\n    focus,\n    metrics,\n    progress = 0,\n    icon,\n    onClick\n  } = props;\n  const {content, questionsToReview = 0} = metrics;\n  const translate = GetTranslateFromContext(context);\n  const {color, name} = icon;\n  const [badgeIconName, badgeLocale, tagTextColor, tagBackgroundColor] = focus\n    ? ['bullseye-arrow', translate('skill_focus'), COLORS.purple_700, COLORS.purple_100]\n    : ['shapes', translate('skill'), COLORS.neutral_500, COLORS.cm_grey_100];\n  const headerBackgroundRef = useRef(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      data-name={`skill-card-${label}`}\n      onClick={onClick}\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            <span style={{color: tagTextColor}}>{badgeLocale}</span>\n          </div>\n\n          <div className={style.questionWrapper}>\n            <div\n              data-name=\"skill-card-title\"\n              className={style.skillTitle}\n              aria-label={ariaLabel || title}\n            >\n              {title}\n            </div>\n            <div className={style.contentAndQuestionsWrapper}>\n              <div\n                data-name=\"learner-skill-card-skill-content-number\"\n                // eslint-disable-next-line react/no-danger\n                dangerouslySetInnerHTML={{__html: translate('content', {count: content})}}\n              />\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                      backgroundColor: 'transparent',\n                      size: {faSize: 4, wrapperSize: 0}\n                    }}\n                  />\n                  <span\n                    data-name=\"learner-skill-card-questions-to-review\"\n                    // eslint-disable-next-line react/no-danger\n                    dangerouslySetInnerHTML={{\n                      __html: translate('skill_chart_side_panel_questions_to_review', {\n                        count: questionsToReview\n                      })\n                    }}\n                  />\n                </div>\n              ) : null}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className={style.progressInformations}>\n        <ProgressBar\n          value={progress}\n          displayInfo={false}\n          max={MAX_SCORE}\n          className={style.progressWrapper}\n          style={{backgroundColor: COLORS.cm_positive_500}}\n        />\n      </div>\n    </div>\n  );\n};\n\nLearnerSkillCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nLearnerSkillCard.propTypes = {\n  type: PropTypes.oneOf(['skill']).isRequired,\n  title: PropTypes.string.isRequired,\n  label: PropTypes.string,\n  'aria-label': PropTypes.string,\n  cardIndex: PropTypes.number,\n  focus: PropTypes.bool,\n  progress: PropTypes.number,\n  metrics: PropTypes.shape({\n    content: PropTypes.number,\n    questionsToReview: PropTypes.number\n  }),\n  icon: PropTypes.shape({\n    color: PropTypes.string,\n    name: PropTypes.string\n  }),\n  onClick: PropTypes.func\n};\nexport default LearnerSkillCard;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAGC,WAAW,EAAEC,OAAO,EAAEC,MAAM,QAAO,OAAO;AACzD,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,QAAQ,IAAGC,uBAAuB,QAAO,qBAAqB;AACrE,OAAOC,WAAW,MAAM,iBAAiB;AACzC,SAAQC,MAAM,QAAO,wBAAwB;AAC7C,SAAQC,wBAAwB,QAAO,0CAA0C;AACjF,OAAOC,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,MAAM,aAAa;AAE/B,MAAMC,SAAS,GAAG,GAAG;AAErB,OAAO,MAAMC,qBAAqB,GAAGA,CAACC,GAAG,EAAEC,UAAU,KAAK;EACxD,IAAID,GAAG,CAACE,OAAO,EAAE;IACfF,GAAG,CAACE,OAAO,CAACL,KAAK,CAACM,eAAe,GAAGF,UAAU;EAChD;AACF,CAAC;AACD,MAAMG,gBAAgB,GAAGA,CAACC,KAAK,EAAEC,OAAO,KAAK;EAC3C,MAAM;IACJ,YAAY,EAAEC,SAAS;IACvBC,SAAS;IACTC,KAAK;IACLC,KAAK;IACLC,KAAK;IACLC,OAAO;IACPC,QAAQ,GAAG,CAAC;IACZC,IAAI;IACJC;EACF,CAAC,GAAGV,KAAK;EACT,MAAM;IAACW,OAAO;IAAEC,iBAAiB,GAAG;EAAC,CAAC,GAAGL,OAAO;EAChD,MAAMM,SAAS,GAAG1B,uBAAuB,CAACc,OAAO,CAAC;EAClD,MAAM;IAACa,KAAK;IAAEC;EAAI,CAAC,GAAGN,IAAI;EAC1B,MAAM,CAACO,aAAa,EAAEC,WAAW,EAAEC,YAAY,EAAEC,kBAAkB,CAAC,GAAGb,KAAK,GACxE,CAAC,gBAAgB,EAAEO,SAAS,CAAC,aAAa,CAAC,EAAExB,MAAM,CAAC+B,UAAU,EAAE/B,MAAM,CAACgC,UAAU,CAAC,GAClF,CAAC,QAAQ,EAAER,SAAS,CAAC,OAAO,CAAC,EAAExB,MAAM,CAACiC,WAAW,EAAEjC,MAAM,CAACkC,WAAW,CAAC;EAC1E,MAAMC,mBAAmB,GAAGxC,MAAM,CAAC,IAAI,CAAC;EACxC,MAAMyC,iBAAiB,GAAG1C,OAAO,CAAC,MAAMO,wBAAwB,CAACwB,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAChG,MAAMY,eAAe,GAAG3C,OAAO,CAAC,MAAMO,wBAAwB,CAACwB,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAC9F,MAAMa,gBAAgB,GAAG7C,WAAW,CAAC,MAAM;IACzCY,qBAAqB,CAAC8B,mBAAmB,EAAEE,eAAe,CAAC;EAC7D,CAAC,EAAE,CAACA,eAAe,CAAC,CAAC;EACrB,MAAME,gBAAgB,GAAG9C,WAAW,CAAC,MAAM;IACzCY,qBAAqB,CAAC8B,mBAAmB,EAAEC,iBAAiB,CAAC;EAC/D,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;EACvB,oBACE5C,KAAA,CAAAgD,aAAA;IACE,eAAa,8BAA8B1B,SAAS,EAAG;IACvD,aAAW,cAAcE,KAAK,EAAG;IACjCK,OAAO,EAAEA,OAAQ;IACjBoB,SAAS,EAAEtC,KAAK,CAACuC,yBAA0B;IAC3C,cAAY7B,SAAU;IACtB8B,YAAY,EAAEL,gBAAiB;IAC/BM,YAAY,EAAEL;EAAiB,gBAE/B/C,KAAA,CAAAgD,aAAA;IACE,eAAY,wCAAwC;IACpDlC,GAAG,EAAE6B,mBAAoB;IACzBM,SAAS,EAAEtC,KAAK,CAAC0C,iBAAkB;IACnC1C,KAAK,EAAE;MAACM,eAAe,EAAE2B,iBAAiB;MAAEX,KAAK,EAAEI;IAAY;EAAE,gBAEjErC,KAAA,CAAAgD,aAAA;IAAKC,SAAS,EAAEtC,KAAK,CAAC2C,WAAY;IAAC,eAAY;EAAiC,gBAC9EtD,KAAA,CAAAgD,aAAA,CAACtC,MAAM;IAEH6C,QAAQ,EAAErB,IAAI;IACdsB,SAAS,EAAEvB,KAAK;IAChBwB,IAAI,EAAE;MACJC,MAAM,EAAE,EAAE;MACVC,WAAW,EAAE;IACf,CAAC;IACDC,YAAY,EAAE,MAAM;IACpBC,kBAAkB,EAAE,IAAI;IACxBC,WAAW,EAAE;MAACC,MAAM,EAAE;IAAiB;EAAC,CAE3C,CACE,CACF,CAAC,eACN/D,KAAA,CAAAgD,aAAA;IAAKC,SAAS,EAAEtC,KAAK,CAACqD;EAAwB,gBAC5ChE,KAAA,CAAAgD,aAAA;IAAKC,SAAS,EAAEtC,KAAK,CAACsD;EAAkB,gBACtCjE,KAAA,CAAAgD,aAAA;IACEC,SAAS,EAAEtC,KAAK,CAACuD,eAAgB;IACjCvD,KAAK,EAAE;MACLwD,eAAe,EAAE7B,kBAAkB;MACnCL,KAAK,EAAEI;IACT;EAAE,gBAEFrC,KAAA,CAAAgD,aAAA,CAACtC,MAAM;IAEH6C,QAAQ,EAAEpB,aAAa;IACvBgC,eAAe,EAAE7B,kBAAkB;IACnCmB,IAAI,EAAE;MACJC,MAAM,EAAE,EAAE;MACVC,WAAW,EAAE;IACf;EAAC,CAEJ,CAAC,eACF3D,KAAA,CAAAgD,aAAA;IAAMrC,KAAK,EAAE;MAACsB,KAAK,EAAEI;IAAY;EAAE,GAAED,WAAkB,CACpD,CAAC,eAENpC,KAAA,CAAAgD,aAAA;IAAKC,SAAS,EAAEtC,KAAK,CAACyD;EAAgB,gBACpCpE,KAAA,CAAAgD,aAAA;IACE,aAAU,kBAAkB;IAC5BC,SAAS,EAAEtC,KAAK,CAAC0D,UAAW;IAC5B,cAAYhD,SAAS,IAAIE;EAAM,GAE9BA,KACE,CAAC,eACNvB,KAAA,CAAAgD,aAAA;IAAKC,SAAS,EAAEtC,KAAK,CAAC2D;EAA2B,gBAC/CtE,KAAA,CAAAgD,aAAA;IACE,aAAU;IACV;IAAA;IACAuB,uBAAuB,EAAE;MAACC,MAAM,EAAExC,SAAS,CAAC,SAAS,EAAE;QAACyC,KAAK,EAAE3C;MAAO,CAAC;IAAC;EAAE,CAC3E,CAAC,EACDC,iBAAiB,gBAChB/B,KAAA,CAAAgD,aAAA;IACEC,SAAS,EAAEtC,KAAK,CAAC+D,gBAAiB;IAClC,aAAU;EAA4C,gBAEtD1E,KAAA,CAAAgD,aAAA,CAACtC,MAAM;IAEH6C,QAAQ,EAAE,QAAQ;IAClBC,SAAS,EAAEhD,MAAM,CAACmE,WAAW;IAC7BR,eAAe,EAAE,aAAa;IAC9BV,IAAI,EAAE;MAACC,MAAM,EAAE,CAAC;MAAEC,WAAW,EAAE;IAAC;EAAC,CAEpC,CAAC,eACF3D,KAAA,CAAAgD,aAAA;IACE,aAAU;IACV;IAAA;IACAuB,uBAAuB,EAAE;MACvBC,MAAM,EAAExC,SAAS,CAAC,4CAA4C,EAAE;QAC9DyC,KAAK,EAAE1C;MACT,CAAC;IACH;EAAE,CACH,CACE,CAAC,GACJ,IACD,CACF,CACF,CACF,CAAC,eACN/B,KAAA,CAAAgD,aAAA;IAAKC,SAAS,EAAEtC,KAAK,CAACiE;EAAqB,gBACzC5E,KAAA,CAAAgD,aAAA,CAACzC,WAAW;IACVsE,KAAK,EAAElD,QAAS;IAChBmD,WAAW,EAAE,KAAM;IACnBC,GAAG,EAAEnE,SAAU;IACfqC,SAAS,EAAEtC,KAAK,CAACqE,eAAgB;IACjCrE,KAAK,EAAE;MAACwD,eAAe,EAAE3D,MAAM,CAACyE;IAAe;EAAE,CAClD,CACE,CACF,CAAC;AAEV,CAAC;AAED/D,gBAAgB,CAACgE,YAAY,GAAG;EAC9BlD,SAAS,EAAE3B,QAAQ,CAAC8E,iBAAiB,CAACnD;AACxC,CAAC;AAEDd,gBAAgB,CAACkE,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EAC3BC,IAAI,EAAEpF,SAAS,CAACqF,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAACC,UAAU;EAC3CnE,KAAK,EAAEnB,SAAS,CAACuF,MAAM,CAACD,UAAU;EAClClE,KAAK,EAAEpB,SAAS,CAACuF,MAAM;EACvB,YAAY,EAAEvF,SAAS,CAACuF,MAAM;EAC9BrE,SAAS,EAAElB,SAAS,CAACwF,MAAM;EAC3BnE,KAAK,EAAErB,SAAS,CAACyF,IAAI;EACrBlE,QAAQ,EAAEvB,SAAS,CAACwF,MAAM;EAC1BlE,OAAO,EAAEtB,SAAS,CAAC0F,KAAK,CAAC;IACvBhE,OAAO,EAAE1B,SAAS,CAACwF,MAAM;IACzB7D,iBAAiB,EAAE3B,SAAS,CAACwF;EAC/B,CAAC,CAAC;EACFhE,IAAI,EAAExB,SAAS,CAAC0F,KAAK,CAAC;IACpB7D,KAAK,EAAE7B,SAAS,CAACuF,MAAM;IACvBzD,IAAI,EAAE9B,SAAS,CAACuF;EAClB,CAAC,CAAC;EACF9D,OAAO,EAAEzB,SAAS,CAAC2F;AACrB,CAAC;AACD,eAAe7E,gBAAgB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useMemo","useRef","PropTypes","Provider","GetTranslateFromContext","ProgressBar","COLORS","createGradientBackground","FaIcon","style","MAX_SCORE","updateBackgroundImage","ref","background","current","backgroundImage","handleCardKeyDown","onClick","event","key","preventDefault","LearnerSkillCard","props","context","ariaLabel","cardIndex","title","label","focus","metrics","progress","icon","content","questionsToReview","translate","color","name","badgeIconName","badgeLocale","tagTextColor","tagBackgroundColor","purple_700","purple_100","neutral_500","cm_grey_100","headerBackgroundRef","defaultBackground","focusBackground","handleMouseEnter","handleMouseLeave","createElement","role","tabIndex","undefined","onKeyDown","className","learnerSkillCardContainer","onMouseEnter","onMouseLeave","iconHeaderWrapper","iconWrapper","iconName","iconColor","size","faSize","wrapperSize","borderRadius","gradientBackground","customStyle","border","learnerSkillCardContent","skillTitleWrapper","skillFocusBadge","backgroundColor","questionWrapper","skillTitle","contentAndQuestionsWrapper","dangerouslySetInnerHTML","__html","count","skillInformation","cm_grey_400","progressInformations","value","displayInfo","max","progressWrapper","cm_positive_500","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","type","oneOf","isRequired","string","number","bool","shape","func"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React, {useCallback, useMemo, useRef} from 'react';\nimport PropTypes from 'prop-types';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport ProgressBar from '../progress-bar';\nimport {COLORS} from '../../variables/colors';\nimport {createGradientBackground} from '../../util/get-background-gradient-color';\nimport FaIcon from '../../atom/icon';\nimport style from './style.css';\n\nconst MAX_SCORE = 100;\n\nexport const updateBackgroundImage = (ref, background) => {\n  if (ref.current) {\n    ref.current.style.backgroundImage = background;\n  }\n};\n\nconst handleCardKeyDown = onClick => event => {\n  if (!onClick) return;\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    onClick(event);\n  }\n};\n\nconst LearnerSkillCard = (props, context) => {\n  const {\n    'aria-label': ariaLabel,\n    cardIndex,\n    title,\n    label,\n    focus,\n    metrics,\n    progress = 0,\n    icon,\n    onClick\n  } = props;\n  const {content, questionsToReview = 0} = metrics;\n  const translate = GetTranslateFromContext(context);\n  const {color, name} = icon;\n  const [badgeIconName, badgeLocale, tagTextColor, tagBackgroundColor] = focus\n    ? ['bullseye-arrow', translate('skill_focus'), COLORS.purple_700, COLORS.purple_100]\n    : ['shapes', translate('skill'), COLORS.neutral_500, COLORS.cm_grey_100];\n  const headerBackgroundRef = useRef(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      data-name={`skill-card-${label}`}\n      onClick={onClick}\n      role={onClick ? 'button' : 'group'}\n      tabIndex={onClick ? 0 : undefined}\n      onKeyDown={handleCardKeyDown(onClick)}\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            <span style={{color: tagTextColor}}>{badgeLocale}</span>\n          </div>\n\n          <div className={style.questionWrapper}>\n            <div\n              data-name=\"skill-card-title\"\n              className={style.skillTitle}\n              role=\"group\"\n              aria-label={ariaLabel || title}\n            >\n              {title}\n            </div>\n            <div className={style.contentAndQuestionsWrapper}>\n              <div\n                data-name=\"learner-skill-card-skill-content-number\"\n                // eslint-disable-next-line react/no-danger\n                dangerouslySetInnerHTML={{__html: translate('content', {count: content})}}\n              />\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                      backgroundColor: 'transparent',\n                      size: {faSize: 4, wrapperSize: 0}\n                    }}\n                  />\n                  <span\n                    data-name=\"learner-skill-card-questions-to-review\"\n                    // eslint-disable-next-line react/no-danger\n                    dangerouslySetInnerHTML={{\n                      __html: translate('skill_chart_side_panel_questions_to_review', {\n                        count: questionsToReview\n                      })\n                    }}\n                  />\n                </div>\n              ) : null}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className={style.progressInformations}>\n        <ProgressBar\n          value={progress}\n          displayInfo={false}\n          max={MAX_SCORE}\n          className={style.progressWrapper}\n          style={{backgroundColor: COLORS.cm_positive_500}}\n        />\n      </div>\n    </div>\n  );\n};\n\nLearnerSkillCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nLearnerSkillCard.propTypes = {\n  type: PropTypes.oneOf(['skill']).isRequired,\n  title: PropTypes.string.isRequired,\n  label: PropTypes.string,\n  'aria-label': PropTypes.string,\n  cardIndex: PropTypes.number,\n  focus: PropTypes.bool,\n  progress: PropTypes.number,\n  metrics: PropTypes.shape({\n    content: PropTypes.number,\n    questionsToReview: PropTypes.number\n  }),\n  icon: PropTypes.shape({\n    color: PropTypes.string,\n    name: PropTypes.string\n  }),\n  onClick: PropTypes.func\n};\nexport default LearnerSkillCard;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/learning-priority-card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learning-priority-card/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AAIjE,OAAO,EAAC,6BAA6B,EAAY,MAAM,SAAS,CAAC;AAGjE,QAAA,MAAM,oBAAoB;YAAW,6BAA6B,WAAW,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyD5F,CAAC;AASF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learning-priority-card/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AAIjE,OAAO,EAAC,6BAA6B,EAAY,MAAM,SAAS,CAAC;AAGjE,QAAA,MAAM,oBAAoB;YAAW,6BAA6B,WAAW,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0D5F,CAAC;AASF,eAAe,oBAAoB,CAAC"}

package/es/molecule/learning-priority-card/index.js

@@ -42,6 +42,7 @@ const LearningPriorityCard = (props, context) => {
   };
   return /*#__PURE__*/React.createElement("div", {
     className: style.container,
+    role: "group",
     "aria-label": `learning priority card ${title}`,
     "data-name": `learning-priority-card-${title}`
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tag, {

package/es/molecule/learning-priority-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","convert","Provider","GetTranslateFromContext","GetSkinFromContext","Tag","ButtonLink","CircularProgressBar","propTypes","style","LearningPriorityCard","props","context","tagLabel","title","progression","onClick","translate","skin","exploreLocale","primarySkinColor","_get","buttonExploreProps","customStyle","backgroundColor","color","transition","hoverBackgroundColor","hoverColor","label","icon","position","faIcon","name","size","createElement","className","container","circularProgressBarContainer","strokeWidth","process","env","NODE_ENV","contextTypes","childContextTypes"],"sources":["../../../src/molecule/learning-priority-card/index.tsx"],"sourcesContent":["import React from 'react';\nimport {get} from 'lodash/fp';\nimport {convert} from 'css-color-function';\nimport Provider, {GetTranslateFromContext, GetSkinFromContext} from '../../atom/provider';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport CircularProgressBar from '../../atom/circular-progress-bar';\nimport {LearningPriorityCardPropTypes, propTypes} from './types';\nimport style from './style.css';\n\nconst LearningPriorityCard = (props: LearningPriorityCardPropTypes, context: WebContextValues) => {\n  const {tagLabel, title, progression, onClick} = props;\n  const translate = GetTranslateFromContext(context);\n  const skin = GetSkinFromContext(context);\n  const exploreLocale = translate('Explore');\n  const primarySkinColor = get('common.primary', skin);\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    hoverBackgroundColor: primarySkinColor,\n    hoverColor: '#FFFFFF',\n    onClick,\n    'aria-label': `${title}, ${exploreLocale}`,\n    label: exploreLocale,\n    'data-name': 'learning-priority-explore-button',\n    icon: {\n      position: 'left' as const,\n      faIcon: {\n        name: 'compass',\n        backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n        color: primarySkinColor,\n        size: 16\n      }\n    }\n  };\n\n  return (\n    <div\n      className={style.container}\n      aria-label={`learning priority card ${title}`}\n      data-name={`learning-priority-card-${title}`}\n    >\n      <div>\n        <Tag label={tagLabel} size={'S'} />\n      </div>\n      <div className={style.title}>{title}</div>\n      <div className={style.circularProgressBarContainer}>\n        <CircularProgressBar\n          {...{\n            size: 162,\n            strokeWidth: 12,\n            progression,\n            label: translate('completed'),\n            'aria-label': `${title} ${progression}%`,\n            'data-name': `circular-progress-bar-${title}`\n          }}\n        />\n      </div>\n      <div data-name=\"button-explore-wrapper\">\n        <ButtonLink {...buttonExploreProps} />\n      </div>\n    </div>\n  );\n};\n\nLearningPriorityCard.propTypes = propTypes;\n\nLearningPriorityCard.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nexport default LearningPriorityCard;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","convert","Provider","GetTranslateFromContext","GetSkinFromContext","Tag","ButtonLink","CircularProgressBar","propTypes","style","LearningPriorityCard","props","context","tagLabel","title","progression","onClick","translate","skin","exploreLocale","primarySkinColor","_get","buttonExploreProps","customStyle","backgroundColor","color","transition","hoverBackgroundColor","hoverColor","label","icon","position","faIcon","name","size","createElement","className","container","role","circularProgressBarContainer","strokeWidth","process","env","NODE_ENV","contextTypes","childContextTypes"],"sources":["../../../src/molecule/learning-priority-card/index.tsx"],"sourcesContent":["import React from 'react';\nimport {get} from 'lodash/fp';\nimport {convert} from 'css-color-function';\nimport Provider, {GetTranslateFromContext, GetSkinFromContext} from '../../atom/provider';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport CircularProgressBar from '../../atom/circular-progress-bar';\nimport {LearningPriorityCardPropTypes, propTypes} from './types';\nimport style from './style.css';\n\nconst LearningPriorityCard = (props: LearningPriorityCardPropTypes, context: WebContextValues) => {\n  const {tagLabel, title, progression, onClick} = props;\n  const translate = GetTranslateFromContext(context);\n  const skin = GetSkinFromContext(context);\n  const exploreLocale = translate('Explore');\n  const primarySkinColor = get('common.primary', skin);\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    hoverBackgroundColor: primarySkinColor,\n    hoverColor: '#FFFFFF',\n    onClick,\n    'aria-label': `${title}, ${exploreLocale}`,\n    label: exploreLocale,\n    'data-name': 'learning-priority-explore-button',\n    icon: {\n      position: 'left' as const,\n      faIcon: {\n        name: 'compass',\n        backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n        color: primarySkinColor,\n        size: 16\n      }\n    }\n  };\n\n  return (\n    <div\n      className={style.container}\n      role=\"group\"\n      aria-label={`learning priority card ${title}`}\n      data-name={`learning-priority-card-${title}`}\n    >\n      <div>\n        <Tag label={tagLabel} size={'S'} />\n      </div>\n      <div className={style.title}>{title}</div>\n      <div className={style.circularProgressBarContainer}>\n        <CircularProgressBar\n          {...{\n            size: 162,\n            strokeWidth: 12,\n            progression,\n            label: translate('completed'),\n            'aria-label': `${title} ${progression}%`,\n            'data-name': `circular-progress-bar-${title}`\n          }}\n        />\n      </div>\n      <div data-name=\"button-explore-wrapper\">\n        <ButtonLink {...buttonExploreProps} />\n      </div>\n    </div>\n  );\n};\n\nLearningPriorityCard.propTypes = propTypes;\n\nLearningPriorityCard.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nexport default LearningPriorityCard;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/learning-priority-setup-item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learning-priority-setup-item/index.js"],"names":[],"mappings":";AAOA,kFA4DC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learning-priority-setup-item/index.js"],"names":[],"mappings":";AAOA,kFA6DC"}

package/es/molecule/learning-priority-setup-item/index.js

@@ -30,6 +30,7 @@ const LearningPrioritySetupItem = (props, context) => {
   };
   return /*#__PURE__*/React.createElement("div", {
     className: style.container,
+    role: "group",
     "aria-label": ariaLabel,
     "data-name": `learning-priority-setup-item-${id}`
   }, /*#__PURE__*/React.createElement("div", {

package/es/molecule/learning-priority-setup-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","Provider","Tag","ButtonLink","style","LearningPrioritySetupItem","props","context","priorityRef","id","title","courses","type","ariaLabel","onRemove","translate","handleRemovePriority","handleTypeTranslate","itemType","createElement","className","container","containerInfos","titleWrapper","label","size","customStyle","width","backgroundColor","hoverBackgroundColor","icon","position","faIcon","name","color","onClick","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","string","number","oneOf","func"],"sources":["../../../src/molecule/learning-priority-setup-item/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport style from './style.css';\n\nconst LearningPrioritySetupItem = (props, context) => {\n  const {priorityRef, id, title, courses = null, type, 'aria-label': ariaLabel, onRemove} = props;\n\n  const {translate} = context;\n\n  const handleRemovePriority = useCallback(\n    () => onRemove(priorityRef, type),\n    [priorityRef, type, onRemove]\n  );\n\n  const handleTypeTranslate = itemType => {\n    switch (itemType) {\n      case 'skill':\n        return translate('skill');\n      case 'playlist':\n        return translate('playlist');\n      case 'certificate':\n        return translate('certificate');\n    }\n  };\n\n  return (\n    <div\n      className={style.container}\n      aria-label={ariaLabel}\n      data-name={`learning-priority-setup-item-${id}`}\n    >\n      <div className={style.containerInfos}>\n        <div className={style.titleWrapper}>\n          <div className={style.title} data-name=\"learning-priority-setup-item-title\">\n            {title}\n          </div>\n          <div>\n            <Tag label={handleTypeTranslate(type)} size={'S'} />\n          </div>\n        </div>\n        {courses !== null ? (\n          <span className={style.courses}>{`${courses} ${translate('courses')}`}</span>\n        ) : null}\n      </div>\n      <ButtonLink\n        type=\"primary\"\n        customStyle={{\n          width: 'fit-content',\n          backgroundColor: 'transparent'\n        }}\n        hoverBackgroundColor=\"#EAEAEB\"\n        icon={{\n          position: 'left',\n          faIcon: {\n            name: 'trash',\n            color: '#515161',\n            size: 16\n          }\n        }}\n        onClick={handleRemovePriority}\n        data-testid={`button-link-trash-${priorityRef}`}\n      />\n    </div>\n  );\n};\n\nLearningPrioritySetupItem.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nLearningPrioritySetupItem.propTypes = {\n  'aria-label': PropTypes.string,\n  id: PropTypes.string,\n  priorityRef: PropTypes.string,\n  title: PropTypes.string,\n  courses: PropTypes.number,\n  type: PropTypes.oneOf(['skill', 'playlist', 'certificate']),\n  onRemove: PropTypes.func\n};\n\nexport default LearningPrioritySetupItem;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","Provider","Tag","ButtonLink","style","LearningPrioritySetupItem","props","context","priorityRef","id","title","courses","type","ariaLabel","onRemove","translate","handleRemovePriority","handleTypeTranslate","itemType","createElement","className","container","role","containerInfos","titleWrapper","label","size","customStyle","width","backgroundColor","hoverBackgroundColor","icon","position","faIcon","name","color","onClick","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","string","number","oneOf","func"],"sources":["../../../src/molecule/learning-priority-setup-item/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport style from './style.css';\n\nconst LearningPrioritySetupItem = (props, context) => {\n  const {priorityRef, id, title, courses = null, type, 'aria-label': ariaLabel, onRemove} = props;\n\n  const {translate} = context;\n\n  const handleRemovePriority = useCallback(\n    () => onRemove(priorityRef, type),\n    [priorityRef, type, onRemove]\n  );\n\n  const handleTypeTranslate = itemType => {\n    switch (itemType) {\n      case 'skill':\n        return translate('skill');\n      case 'playlist':\n        return translate('playlist');\n      case 'certificate':\n        return translate('certificate');\n    }\n  };\n\n  return (\n    <div\n      className={style.container}\n      role=\"group\"\n      aria-label={ariaLabel}\n      data-name={`learning-priority-setup-item-${id}`}\n    >\n      <div className={style.containerInfos}>\n        <div className={style.titleWrapper}>\n          <div className={style.title} data-name=\"learning-priority-setup-item-title\">\n            {title}\n          </div>\n          <div>\n            <Tag label={handleTypeTranslate(type)} size={'S'} />\n          </div>\n        </div>\n        {courses !== null ? (\n          <span className={style.courses}>{`${courses} ${translate('courses')}`}</span>\n        ) : null}\n      </div>\n      <ButtonLink\n        type=\"primary\"\n        customStyle={{\n          width: 'fit-content',\n          backgroundColor: 'transparent'\n        }}\n        hoverBackgroundColor=\"#EAEAEB\"\n        icon={{\n          position: 'left',\n          faIcon: {\n            name: 'trash',\n            color: '#515161',\n            size: 16\n          }\n        }}\n        onClick={handleRemovePriority}\n        data-testid={`button-link-trash-${priorityRef}`}\n      />\n    </div>\n  );\n};\n\nLearningPrioritySetupItem.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nLearningPrioritySetupItem.propTypes = {\n  'aria-label': PropTypes.string,\n  id: PropTypes.string,\n  priorityRef: PropTypes.string,\n  title: PropTypes.string,\n  courses: PropTypes.number,\n  type: PropTypes.oneOf(['skill', 'playlist', 'certificate']),\n  onRemove: PropTypes.func\n};\n\nexport default LearningPrioritySetupItem;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/progress-wrapper/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/progress-wrapper/index.js"],"names":[],"mappings":";AAgGA;;;;;;;8BAsGC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/progress-wrapper/index.js"],"names":[],"mappings":";AAkGA;;;;;;;8BAuGC"}

package/es/molecule/progress-wrapper/index.js

@@ -63,6 +63,7 @@ const DetailSection = ({
   return isTypeStars ? /*#__PURE__*/React.createElement("div", {
     className: style[`detailsSection${index}`],
     "data-name": type,
+    role: "group",
     "aria-label": `${type} informations`
   }, /*#__PURE__*/React.createElement("div", {
     className: style.detailsInfo
@@ -80,6 +81,7 @@ const DetailSection = ({
   }), /*#__PURE__*/React.createElement("span", null, stars)))) : /*#__PURE__*/React.createElement("div", {
     className: style[`detailsSection${index}`],
     "data-name": type,
+    role: "group",
     "aria-label": `${type} informations`
   }, /*#__PURE__*/React.createElement("img", {
     className: style.img,
@@ -117,6 +119,7 @@ const ProgressWrapper = ({
   return /*#__PURE__*/React.createElement("div", {
     className: style.container,
     "data-name": "prgress-wrapper",
+    role: "group",
     "aria-label": "progress wrapper section"
   }, /*#__PURE__*/React.createElement("div", {
     className: style.titleContainer

package/es/molecule/progress-wrapper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","classNames","PropTypes","convert","Title","ProgressBar","COLORS","Tag","ButtonLink","Icon","Provider","GetSkinFromContext","style","uncappedMap","_map","cap","DetailSection","index","type","isLocked","downloadUrl","stars","context","translate","skin","primarySkinColor","_get","isTypeStars","downloadButtonProps","label","link","target","href","customStyle","backgroundColor","color","width","transition","hoverBackgroundColor","hoverColor","white","icon","position","faIcon","name","size","padding","disabled","createElement","className","detailsInfo","detailsInfoText","detailsTitle","iconName","iconColor","preset","img","src","buttonContainer","ProgressWrapper","completedModules","mandatoryModules","title","subtitle","progression","sections","mandatoryCompletedModulesLocale","total","count","showDetails","setShowDetails","handleToggleDetails","container","titleContainer","titleSize","statscontainer","stats","dangerouslySetInnerHTML","__html","statsNumber","customProgressBar","cm_positive_500","displayInfo","value","max","statsProgressionMobile","_isEmpty","Fragment","toggleDetailsButton","onClick","toggleDetailsLabel","toggleDetailsTitle","cm_grey_500","cm_grey_700","faSize","wrapperSize","details","visibleDetails","hiddenDetails","section","_extends","key","commonDetailSectionPropTypes","process","env","NODE_ENV","oneOf","string","number","contextTypes","childContextTypes","propTypes","bool","arrayOf","shape"],"sources":["../../../src/molecule/progress-wrapper/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport {isEmpty, map, get} from 'lodash/fp';\nimport Title from '../../atom/title';\nimport ProgressBar from '../progress-bar';\nimport {COLORS} from '../../variables/colors';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport Provider, {GetSkinFromContext} from '../../atom/provider';\n// eslint-disable-next-line css-modules/no-unused-class\nimport style from './style.css';\n\nconst uncappedMap = map.convert({cap: false});\n\nconst DetailSection = ({index, type, isLocked, downloadUrl, stars}, context) => {\n  const {translate} = context;\n  const skin = GetSkinFromContext(context);\n  const primarySkinColor = get('common.primary', skin);\n  const isTypeStars = type === 'stars';\n\n  const downloadButtonProps = {\n    label: translate('download'),\n    link: {\n      target: '_blank',\n      href: downloadUrl\n    },\n    'data-name': `download-${type}-button`,\n    'aria-label': `download ${type} button`,\n    customStyle: {\n      backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n      color: primarySkinColor,\n      width: 'auto',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    hoverBackgroundColor: primarySkinColor,\n    hoverColor: COLORS.white,\n    icon: {\n      position: 'left',\n      faIcon: {\n        name: 'download',\n        color: primarySkinColor,\n        size: 14,\n        customStyle: {padding: 0}\n      }\n    },\n    disabled: isLocked\n  };\n\n  return isTypeStars ? (\n    <div\n      className={style[`detailsSection${index}`]}\n      data-name={type}\n      aria-label={`${type} informations`}\n    >\n      <div className={style.detailsInfo}>\n        <div className={style.detailsInfoText}>\n          <span className={style.detailsTitle}>{translate('bonus_stars')}</span>\n        </div>\n        <div className={style.stars}>\n          <Icon iconName=\"star\" iconColor=\"#FFCE0A\" backgroundColor=\"#FFF9D1\" preset=\"xl\" />\n          <span>{stars}</span>\n        </div>\n      </div>\n    </div>\n  ) : (\n    <div\n      className={style[`detailsSection${index}`]}\n      data-name={type}\n      aria-label={`${type} informations`}\n    >\n      <img\n        className={style.img}\n        src={\n          type === 'badge'\n            ? downloadUrl\n            : 'https://s3.eu-west-1.amazonaws.com/static.coorpacademy.com/assets/images/diploma.svg'\n        }\n      />\n      <div className={style.detailsInfo}>\n        <div className={style.detailsInfoText}>\n          <span className={style.detailsTitle}>\n            {type === 'diploma' ? translate('diploma') : translate('badge')}\n          </span>\n        </div>\n\n        <div className={style.buttonContainer}>\n          <ButtonLink {...downloadButtonProps} />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nconst ProgressWrapper = (\n  {completedModules, mandatoryModules, title, subtitle, progression, sections},\n  context\n) => {\n  const {translate} = context;\n  const mandatoryCompletedModulesLocale = translate('modules_completed_mandatory', {\n    total: mandatoryModules,\n    count: completedModules > mandatoryModules ? mandatoryModules : completedModules\n  });\n  const isLocked = progression !== 100;\n\n  const [showDetails, setShowDetails] = useState(false);\n\n  const handleToggleDetails = useCallback(() => {\n    setShowDetails(!showDetails);\n  }, [showDetails]);\n  return (\n    <div\n      className={style.container}\n      data-name=\"prgress-wrapper\"\n      aria-label=\"progress wrapper section\"\n    >\n      <div className={style.titleContainer}>\n        <Title type=\"form-group\" titleSize=\"medium\" title={title} subtitle={subtitle} />\n      </div>\n      <div className={style.statscontainer}>\n        <div className={style.stats}>\n          <div\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: mandatoryCompletedModulesLocale}}\n          />\n        </div>\n        <div className={style.progression}>\n          <span className={style.statsNumber} data-name=\"progress-value\">\n            {progression}%\n          </span>\n        </div>\n      </div>\n      <ProgressBar\n        className={style.customProgressBar}\n        style={{backgroundColor: COLORS.cm_positive_500}}\n        displayInfo={false}\n        value={progression}\n        max={100}\n      />\n      <div className={style.statsProgressionMobile}>\n        <span className={style.statsNumber}>{progression}%</span>\n      </div>\n\n      {!isEmpty(sections) ? (\n        <>\n          <div\n            className={style.toggleDetailsButton}\n            onClick={handleToggleDetails}\n            data-testid=\"progress-wrapper-toggle-details-button\"\n          >\n            <div className={style.toggleDetailsLabel}>\n              <span className={style.toggleDetailsTitle}>{translate('rewards')}</span>\n              {isLocked ? (\n                <Tag\n                  label={translate('locked')}\n                  size=\"S\"\n                  icon={{\n                    position: 'left',\n                    iconName: 'lock',\n                    iconColor: COLORS.cm_grey_500,\n                    preset: 's',\n                    customStyle: {padding: 0}\n                  }}\n                />\n              ) : null}\n            </div>\n            <Icon\n              iconColor={COLORS.cm_grey_700}\n              iconName={showDetails ? 'chevron-up' : 'chevron-down'}\n              size={{faSize: 20, wrapperSize: 24}}\n            />\n          </div>\n\n          <div\n            className={classNames(\n              style.details,\n              showDetails ? style.visibleDetails : style.hiddenDetails\n            )}\n            data-testid=\"progress-wrapper-details\"\n          >\n            {uncappedMap(\n              (section, index) => (\n                <DetailSection\n                  {...section}\n                  isLocked={isLocked}\n                  key={`${section.type}-${index}`}\n                  index={index}\n                />\n              ),\n              sections\n            )}\n          </div>\n        </>\n      ) : null}\n    </div>\n  );\n};\n\nconst commonDetailSectionPropTypes = {\n  type: PropTypes.oneOf(['diploma', 'badge', 'stars']),\n  downloadUrl: PropTypes.string,\n  stars: PropTypes.number\n};\n\nDetailSection.contextTypes = {\n  translate: Provider.childContextTypes.translate,\n  skin: Provider.childContextTypes.skin\n};\n\nDetailSection.propTypes = {\n  index: PropTypes.number,\n  isLocked: PropTypes.bool,\n  ...commonDetailSectionPropTypes\n};\n\nProgressWrapper.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nProgressWrapper.propTypes = {\n  title: PropTypes.string,\n  subtitle: PropTypes.string,\n  completedModules: PropTypes.number,\n  mandatoryModules: PropTypes.number,\n  progression: PropTypes.number,\n  sections: PropTypes.arrayOf(PropTypes.shape(commonDetailSectionPropTypes))\n};\n\nexport default ProgressWrapper;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","classNames","PropTypes","convert","Title","ProgressBar","COLORS","Tag","ButtonLink","Icon","Provider","GetSkinFromContext","style","uncappedMap","_map","cap","DetailSection","index","type","isLocked","downloadUrl","stars","context","translate","skin","primarySkinColor","_get","isTypeStars","downloadButtonProps","label","link","target","href","customStyle","backgroundColor","color","width","transition","hoverBackgroundColor","hoverColor","white","icon","position","faIcon","name","size","padding","disabled","createElement","className","role","detailsInfo","detailsInfoText","detailsTitle","iconName","iconColor","preset","img","src","buttonContainer","ProgressWrapper","completedModules","mandatoryModules","title","subtitle","progression","sections","mandatoryCompletedModulesLocale","total","count","showDetails","setShowDetails","handleToggleDetails","container","titleContainer","titleSize","statscontainer","stats","dangerouslySetInnerHTML","__html","statsNumber","customProgressBar","cm_positive_500","displayInfo","value","max","statsProgressionMobile","_isEmpty","Fragment","toggleDetailsButton","onClick","toggleDetailsLabel","toggleDetailsTitle","cm_grey_500","cm_grey_700","faSize","wrapperSize","details","visibleDetails","hiddenDetails","section","_extends","key","commonDetailSectionPropTypes","process","env","NODE_ENV","oneOf","string","number","contextTypes","childContextTypes","propTypes","bool","arrayOf","shape"],"sources":["../../../src/molecule/progress-wrapper/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport {isEmpty, map, get} from 'lodash/fp';\nimport Title from '../../atom/title';\nimport ProgressBar from '../progress-bar';\nimport {COLORS} from '../../variables/colors';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport Provider, {GetSkinFromContext} from '../../atom/provider';\n// eslint-disable-next-line css-modules/no-unused-class\nimport style from './style.css';\n\nconst uncappedMap = map.convert({cap: false});\n\nconst DetailSection = ({index, type, isLocked, downloadUrl, stars}, context) => {\n  const {translate} = context;\n  const skin = GetSkinFromContext(context);\n  const primarySkinColor = get('common.primary', skin);\n  const isTypeStars = type === 'stars';\n\n  const downloadButtonProps = {\n    label: translate('download'),\n    link: {\n      target: '_blank',\n      href: downloadUrl\n    },\n    'data-name': `download-${type}-button`,\n    'aria-label': `download ${type} button`,\n    customStyle: {\n      backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n      color: primarySkinColor,\n      width: 'auto',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    hoverBackgroundColor: primarySkinColor,\n    hoverColor: COLORS.white,\n    icon: {\n      position: 'left',\n      faIcon: {\n        name: 'download',\n        color: primarySkinColor,\n        size: 14,\n        customStyle: {padding: 0}\n      }\n    },\n    disabled: isLocked\n  };\n\n  return isTypeStars ? (\n    <div\n      className={style[`detailsSection${index}`]}\n      data-name={type}\n      role=\"group\"\n      aria-label={`${type} informations`}\n    >\n      <div className={style.detailsInfo}>\n        <div className={style.detailsInfoText}>\n          <span className={style.detailsTitle}>{translate('bonus_stars')}</span>\n        </div>\n        <div className={style.stars}>\n          <Icon iconName=\"star\" iconColor=\"#FFCE0A\" backgroundColor=\"#FFF9D1\" preset=\"xl\" />\n          <span>{stars}</span>\n        </div>\n      </div>\n    </div>\n  ) : (\n    <div\n      className={style[`detailsSection${index}`]}\n      data-name={type}\n      role=\"group\"\n      aria-label={`${type} informations`}\n    >\n      <img\n        className={style.img}\n        src={\n          type === 'badge'\n            ? downloadUrl\n            : 'https://s3.eu-west-1.amazonaws.com/static.coorpacademy.com/assets/images/diploma.svg'\n        }\n      />\n      <div className={style.detailsInfo}>\n        <div className={style.detailsInfoText}>\n          <span className={style.detailsTitle}>\n            {type === 'diploma' ? translate('diploma') : translate('badge')}\n          </span>\n        </div>\n\n        <div className={style.buttonContainer}>\n          <ButtonLink {...downloadButtonProps} />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nconst ProgressWrapper = (\n  {completedModules, mandatoryModules, title, subtitle, progression, sections},\n  context\n) => {\n  const {translate} = context;\n  const mandatoryCompletedModulesLocale = translate('modules_completed_mandatory', {\n    total: mandatoryModules,\n    count: completedModules > mandatoryModules ? mandatoryModules : completedModules\n  });\n  const isLocked = progression !== 100;\n\n  const [showDetails, setShowDetails] = useState(false);\n\n  const handleToggleDetails = useCallback(() => {\n    setShowDetails(!showDetails);\n  }, [showDetails]);\n  return (\n    <div\n      className={style.container}\n      data-name=\"prgress-wrapper\"\n      role=\"group\"\n      aria-label=\"progress wrapper section\"\n    >\n      <div className={style.titleContainer}>\n        <Title type=\"form-group\" titleSize=\"medium\" title={title} subtitle={subtitle} />\n      </div>\n      <div className={style.statscontainer}>\n        <div className={style.stats}>\n          <div\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: mandatoryCompletedModulesLocale}}\n          />\n        </div>\n        <div className={style.progression}>\n          <span className={style.statsNumber} data-name=\"progress-value\">\n            {progression}%\n          </span>\n        </div>\n      </div>\n      <ProgressBar\n        className={style.customProgressBar}\n        style={{backgroundColor: COLORS.cm_positive_500}}\n        displayInfo={false}\n        value={progression}\n        max={100}\n      />\n      <div className={style.statsProgressionMobile}>\n        <span className={style.statsNumber}>{progression}%</span>\n      </div>\n\n      {!isEmpty(sections) ? (\n        <>\n          <div\n            className={style.toggleDetailsButton}\n            onClick={handleToggleDetails}\n            data-testid=\"progress-wrapper-toggle-details-button\"\n          >\n            <div className={style.toggleDetailsLabel}>\n              <span className={style.toggleDetailsTitle}>{translate('rewards')}</span>\n              {isLocked ? (\n                <Tag\n                  label={translate('locked')}\n                  size=\"S\"\n                  icon={{\n                    position: 'left',\n                    iconName: 'lock',\n                    iconColor: COLORS.cm_grey_500,\n                    preset: 's',\n                    customStyle: {padding: 0}\n                  }}\n                />\n              ) : null}\n            </div>\n            <Icon\n              iconColor={COLORS.cm_grey_700}\n              iconName={showDetails ? 'chevron-up' : 'chevron-down'}\n              size={{faSize: 20, wrapperSize: 24}}\n            />\n          </div>\n\n          <div\n            className={classNames(\n              style.details,\n              showDetails ? style.visibleDetails : style.hiddenDetails\n            )}\n            data-testid=\"progress-wrapper-details\"\n          >\n            {uncappedMap(\n              (section, index) => (\n                <DetailSection\n                  {...section}\n                  isLocked={isLocked}\n                  key={`${section.type}-${index}`}\n                  index={index}\n                />\n              ),\n              sections\n            )}\n          </div>\n        </>\n      ) : null}\n    </div>\n  );\n};\n\nconst commonDetailSectionPropTypes = {\n  type: PropTypes.oneOf(['diploma', 'badge', 'stars']),\n  downloadUrl: PropTypes.string,\n  stars: PropTypes.number\n};\n\nDetailSection.contextTypes = {\n  translate: Provider.childContextTypes.translate,\n  skin: Provider.childContextTypes.skin\n};\n\nDetailSection.propTypes = {\n  index: PropTypes.number,\n  isLocked: PropTypes.bool,\n  ...commonDetailSectionPropTypes\n};\n\nProgressWrapper.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nProgressWrapper.propTypes = {\n  title: PropTypes.string,\n  subtitle: PropTypes.string,\n  completedModules: PropTypes.number,\n  mandatoryModules: PropTypes.number,\n  progression: PropTypes.number,\n  sections: PropTypes.arrayOf(PropTypes.shape(commonDetailSectionPropTypes))\n};\n\nexport default ProgressWrapper;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/questions/qcm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/questions/qcm/index.js"],"names":[],"mappings":";AASA,kEAwDC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/questions/qcm/index.js"],"names":[],"mappings":";AAiBA,kEA2DC"}

package/es/molecule/questions/qcm/index.js

@@ -6,6 +6,13 @@ import maxBy from 'lodash/fp/maxBy';
 import Provider, { GetSkinFromContext } from '../../../atom/provider';
 import { getShadowBoxColorFromPrimary } from '../../../util/get-shadow-box-color-from-primary';
 import style from './style.css';
+const handleAnswerKeyDown = onClick => event => {
+  if (!onClick) return;
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault();
+    onClick(event);
+  }
+};
 const QCM = (props, legacyContext) => {
   const {
     answers,
@@ -27,10 +34,13 @@ const QCM = (props, legacyContext) => {
     const selectedAnswerClass = selected ? style.selectedAnswer : style.unselectedAnswer;
     return /*#__PURE__*/React.createElement("div", {
       "data-name": "answer",
+      role: "button",
+      tabIndex: 0,
       "aria-label": ariaLabel || title,
       title: ariaLabel || title,
       className: classnames(longAnswerClass, style.innerHTML, selectedAnswerClass),
       onClick: onClick,
+      onKeyDown: handleAnswerKeyDown(onClick),
       style: {
         ...(selected && {
           boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`

package/es/molecule/questions/qcm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","classnames","PropTypes","getOr","maxBy","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","QCM","props","legacyContext","answers","groupAriaLabel","longestAnswer","title","length","skin","primarySkinColor","answersViews","map","answer","key","onClick","selected","ariaLabel","longAnswerClass","selectedAnswerClass","selectedAnswer","unselectedAnswer","createElement","className","innerHTML","boxShadow","backgroundColor","background","answerText","dangerouslySetInnerHTML","__html","wrapper","role","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","arrayOf","shape","string","bool","func"],"sources":["../../../../src/molecule/questions/qcm/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport getOr from 'lodash/fp/getOr';\nimport maxBy from 'lodash/fp/maxBy';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst QCM = (props, legacyContext) => {\n  const {answers, groupAriaLabel} = props;\n  const longestAnswer = maxBy(({title}) => title.length, answers);\n  const skin = GetSkinFromContext(legacyContext);\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const answersViews = useMemo(\n    () =>\n      answers.map((answer, key) => {\n        const {onClick, title, selected, 'aria-label': ariaLabel} = answer;\n        const longAnswerClass = longestAnswer.title === title ? style.longestAnswer : style.answer;\n        const selectedAnswerClass = selected ? style.selectedAnswer : style.unselectedAnswer;\n\n        return (\n          <div\n            data-name=\"answer\"\n            aria-label={ariaLabel || title}\n            title={ariaLabel || title}\n            className={classnames(longAnswerClass, style.innerHTML, selectedAnswerClass)}\n            onClick={onClick}\n            style={{\n              ...(selected && {\n                boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n              })\n            }}\n            data-selected={selected}\n            key={key}\n          >\n            <div\n              data-name=\"answer-background\"\n              style={{backgroundColor: selected ? primarySkinColor : '#F4F4F5' /* cm_grey_75 */}}\n              className={style.background}\n            />\n            <span\n              data-name=\"answer-label\"\n              className={style.answerText}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n          </div>\n        );\n      }),\n    [answers, longestAnswer, primarySkinColor]\n  );\n\n  return (\n    <div\n      data-name=\"qcm\"\n      className={style.wrapper}\n      role=\"group\"\n      aria-label={groupAriaLabel}\n      title={groupAriaLabel}\n    >\n      {answersViews}\n    </div>\n  );\n};\n\nQCM.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQCM.propTypes = {\n  answers: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      selected: PropTypes.bool,\n      onClick: PropTypes.func,\n      'aria-label': PropTypes.string\n    })\n  ),\n  groupAriaLabel: PropTypes.string\n};\n\nexport default QCM;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useMemo","classnames","PropTypes","getOr","maxBy","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","handleAnswerKeyDown","onClick","event","key","preventDefault","QCM","props","legacyContext","answers","groupAriaLabel","longestAnswer","title","length","skin","primarySkinColor","answersViews","map","answer","selected","ariaLabel","longAnswerClass","selectedAnswerClass","selectedAnswer","unselectedAnswer","createElement","role","tabIndex","className","innerHTML","onKeyDown","boxShadow","backgroundColor","background","answerText","dangerouslySetInnerHTML","__html","wrapper","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","arrayOf","shape","string","bool","func"],"sources":["../../../../src/molecule/questions/qcm/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport getOr from 'lodash/fp/getOr';\nimport maxBy from 'lodash/fp/maxBy';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst handleAnswerKeyDown = onClick => event => {\n  if (!onClick) return;\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    onClick(event);\n  }\n};\n\nconst QCM = (props, legacyContext) => {\n  const {answers, groupAriaLabel} = props;\n  const longestAnswer = maxBy(({title}) => title.length, answers);\n  const skin = GetSkinFromContext(legacyContext);\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const answersViews = useMemo(\n    () =>\n      answers.map((answer, key) => {\n        const {onClick, title, selected, 'aria-label': ariaLabel} = answer;\n        const longAnswerClass = longestAnswer.title === title ? style.longestAnswer : style.answer;\n        const selectedAnswerClass = selected ? style.selectedAnswer : style.unselectedAnswer;\n\n        return (\n          <div\n            data-name=\"answer\"\n            role=\"button\"\n            tabIndex={0}\n            aria-label={ariaLabel || title}\n            title={ariaLabel || title}\n            className={classnames(longAnswerClass, style.innerHTML, selectedAnswerClass)}\n            onClick={onClick}\n            onKeyDown={handleAnswerKeyDown(onClick)}\n            style={{\n              ...(selected && {\n                boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n              })\n            }}\n            data-selected={selected}\n            key={key}\n          >\n            <div\n              data-name=\"answer-background\"\n              style={{backgroundColor: selected ? primarySkinColor : '#F4F4F5' /* cm_grey_75 */}}\n              className={style.background}\n            />\n            <span\n              data-name=\"answer-label\"\n              className={style.answerText}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n          </div>\n        );\n      }),\n    [answers, longestAnswer, primarySkinColor]\n  );\n\n  return (\n    <div\n      data-name=\"qcm\"\n      className={style.wrapper}\n      role=\"group\"\n      aria-label={groupAriaLabel}\n      title={groupAriaLabel}\n    >\n      {answersViews}\n    </div>\n  );\n};\n\nQCM.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQCM.propTypes = {\n  answers: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      selected: PropTypes.bool,\n      onClick: PropTypes.func,\n      'aria-label': PropTypes.string\n    })\n  ),\n  groupAriaLabel: PropTypes.string\n};\n\nexport default QCM;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/questions/qcm-graphic/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/questions/qcm-graphic/index.js"],"names":[],"mappings":";AAQA,uEAwEC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/questions/qcm-graphic/index.js"],"names":[],"mappings":";AAQA,uEAyEC"}

package/es/molecule/questions/qcm-graphic/index.js

@@ -44,6 +44,7 @@ const QCMImage = (props, legacyContext) => {
     }, /*#__PURE__*/React.createElement("div", {
       className: style.imageWrapper,
       "data-name": "answerImage",
+      role: "img",
       "aria-label": ariaLabel || title,
       title: ariaLabel || title,
       style: {

package/es/molecule/questions/qcm-graphic/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classnames","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","QCMImage","props","legacyContext","answers","groupAriaLabel","skin","primarySkinColor","_getOr","answersViews","map","answer","key","onClick","title","selected","image","ariaLabel","checkboxId","createElement","boxShadow","className","backgroundColor","background","content","imageWrapper","backgroundImage","titleWrapper","innerHTML","htmlFor","id","type","value","checked","onChange","hiddenCheckbox","wrapper","role","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","arrayOf","shape","string","bool","func"],"sources":["../../../../src/molecule/questions/qcm-graphic/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst QCMImage = (props, legacyContext) => {\n  const {answers, groupAriaLabel} = props;\n  const skin = GetSkinFromContext(legacyContext);\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const answersViews = answers.map((answer, key) => {\n    const {onClick, title, selected, image, ariaLabel} = answer;\n    const checkboxId = `checkbox-graphic-${key}`;\n\n    return (\n      <div\n        onClick={onClick}\n        data-selected={selected}\n        data-name=\"answerGraphic\"\n        style={{\n          ...(selected && {\n            boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n          })\n        }}\n        className={selected ? style.selected : style.answer}\n        key={key}\n      >\n        <div\n          data-name=\"answerBackground\"\n          style={{\n            backgroundColor: selected ? primarySkinColor : '#F4F4F5'\n          }}\n          className={style.background}\n        />\n        <div data-name=\"answerContent\" className={style.content}>\n          <div\n            className={style.imageWrapper}\n            data-name=\"answerImage\"\n            aria-label={ariaLabel || title}\n            title={ariaLabel || title}\n            style={{\n              backgroundImage: `url(${image})`\n            }}\n          />\n          <div data-name=\"answerText\" className={style.titleWrapper}>\n            <div title={title} className={classnames(style.title, style.innerHTML)}>\n              <label htmlFor={checkboxId}>\n                <input\n                  id={checkboxId}\n                  type=\"checkbox\"\n                  value={title}\n                  title={title}\n                  aria-label={title}\n                  checked={selected}\n                  onChange={onClick}\n                  className={style.hiddenCheckbox}\n                />\n                {title}\n              </label>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  });\n\n  return (\n    <div\n      data-name=\"qcm-graphic-wrapper\"\n      className={style.wrapper}\n      role=\"group\"\n      aria-label={groupAriaLabel}\n      title={groupAriaLabel}\n    >\n      {answersViews}\n    </div>\n  );\n};\n\nQCMImage.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQCMImage.propTypes = {\n  answers: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      selected: PropTypes.bool,\n      onClick: PropTypes.func,\n      image: PropTypes.string,\n      ariaLabel: PropTypes.string\n    })\n  ),\n  groupAriaLabel: PropTypes.string\n};\n\nexport default QCMImage;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","PropTypes","classnames","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","QCMImage","props","legacyContext","answers","groupAriaLabel","skin","primarySkinColor","_getOr","answersViews","map","answer","key","onClick","title","selected","image","ariaLabel","checkboxId","createElement","boxShadow","className","backgroundColor","background","content","imageWrapper","role","backgroundImage","titleWrapper","innerHTML","htmlFor","id","type","value","checked","onChange","hiddenCheckbox","wrapper","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","arrayOf","shape","string","bool","func"],"sources":["../../../../src/molecule/questions/qcm-graphic/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst QCMImage = (props, legacyContext) => {\n  const {answers, groupAriaLabel} = props;\n  const skin = GetSkinFromContext(legacyContext);\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const answersViews = answers.map((answer, key) => {\n    const {onClick, title, selected, image, ariaLabel} = answer;\n    const checkboxId = `checkbox-graphic-${key}`;\n\n    return (\n      <div\n        onClick={onClick}\n        data-selected={selected}\n        data-name=\"answerGraphic\"\n        style={{\n          ...(selected && {\n            boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n          })\n        }}\n        className={selected ? style.selected : style.answer}\n        key={key}\n      >\n        <div\n          data-name=\"answerBackground\"\n          style={{\n            backgroundColor: selected ? primarySkinColor : '#F4F4F5'\n          }}\n          className={style.background}\n        />\n        <div data-name=\"answerContent\" className={style.content}>\n          <div\n            className={style.imageWrapper}\n            data-name=\"answerImage\"\n            role=\"img\"\n            aria-label={ariaLabel || title}\n            title={ariaLabel || title}\n            style={{\n              backgroundImage: `url(${image})`\n            }}\n          />\n          <div data-name=\"answerText\" className={style.titleWrapper}>\n            <div title={title} className={classnames(style.title, style.innerHTML)}>\n              <label htmlFor={checkboxId}>\n                <input\n                  id={checkboxId}\n                  type=\"checkbox\"\n                  value={title}\n                  title={title}\n                  aria-label={title}\n                  checked={selected}\n                  onChange={onClick}\n                  className={style.hiddenCheckbox}\n                />\n                {title}\n              </label>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  });\n\n  return (\n    <div\n      data-name=\"qcm-graphic-wrapper\"\n      className={style.wrapper}\n      role=\"group\"\n      aria-label={groupAriaLabel}\n      title={groupAriaLabel}\n    >\n      {answersViews}\n    </div>\n  );\n};\n\nQCMImage.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQCMImage.propTypes = {\n  answers: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      selected: PropTypes.bool,\n      onClick: PropTypes.func,\n      image: PropTypes.string,\n      ariaLabel: PropTypes.string\n    })\n  ),\n  groupAriaLabel: PropTypes.string\n};\n\nexport default QCMImage;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/quick-filters/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/quick-filters/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAO5D,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AAGjE,OAAO,EAAC,iBAAiB,EAAY,MAAM,SAAS,CAAC;AAIrD,eAAO,MAAM,YAAY,cAAe,MAAM,WAAW,MAAM,SAAS,CAAC,cAAc,CAAC,SAOvF,CAAC;AAyCF,QAAA,MAAM,YAAY;6EACsD,iBAAiB,WAC9E,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmH1B,CAAC;AAMF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/quick-filters/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAO5D,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AAGjE,OAAO,EAAC,iBAAiB,EAAY,MAAM,SAAS,CAAC;AAIrD,eAAO,MAAM,YAAY,cAAe,MAAM,WAAW,MAAM,SAAS,CAAC,cAAc,CAAC,SAOvF,CAAC;AAyCF,QAAA,MAAM,YAAY;6EACsD,iBAAiB,WAC9E,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoH1B,CAAC;AAMF,eAAe,YAAY,CAAC"}

package/es/molecule/quick-filters/index.js

@@ -128,6 +128,7 @@ const QuickFilters = ({
     className: style.filtersList,
     ref: filtersListRef,
     "data-testid": "filters-options-list",
+    role: "group",
     "aria-label": filterOptionsAriaLabel
   }, /*#__PURE__*/React.createElement("div", {
     "data-testid": "all-option",

package/es/molecule/quick-filters/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useRef","useEffect","classNames","FaIcon","COLORS","ButtonLink","Provider","GetSkinFromContext","style","propTypes","SCROLL_RIGHT_SIZE","SCROLL_LEFT_SIZE","handleScroll","direction","listRef","current","scrollBy","left","behavior","getFilterButton","filterButtonProps","primarySkinColor","tag","rest","createElement","className","filterButtonWrapper","borderColor","label","filterButton","_extends","icon","position","faIcon","name","size","color","cm_grey_700","neutral_500","customStyle","backgroundColor","undefined","borderRadius","QuickFilters","primaryOption","filterOptions","filterOptionsAriaLabel","context","skin","_get","defaultLabel","defaultIconName","defaultSelected","defaultAriaLabel","onDefaultClick","filtersListRef","rightBtnRef","leftBtnRef","handleScrollRight","handleScrollLeft","list","rightButton","leftButton","update","rightArrowWidth","offsetWidth","showingRightButton","scrollLeft","clientWidth","scrollWidth","showingLeftButton","visibility","opacity","addEventListener","window","removeEventListener","filtersMainContainer","leftArrowButton","ref","onClick","height","filtersList","defaultOption","filterSelected","iconName","faSize","wrapperSize","filterLabel","bar","background","filterSeparator","filtersContainer","map","filterOption","idx","selected","value","ariaLabel","key","borderBottomColor","rightArrowButton","process","env","NODE_ENV","contextTypes","childContextTypes"],"sources":["../../../src/molecule/quick-filters/index.tsx"],"sourcesContent":["import React, {useCallback, useRef, useEffect} from 'react';\nimport classNames from 'classnames';\nimport {get} from 'lodash/fp';\nimport FaIcon from '../../atom/icon';\nimport {COLORS} from '../../variables/colors';\nimport ButtonLink from '../../atom/button-link';\nimport {ButtonLinkProps} from '../../atom/button-link/types';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport Provider, {GetSkinFromContext} from '../../atom/provider';\nimport style from './style.css';\nimport {QuickFiltersProps, propTypes} from './types';\n\nconst SCROLL_RIGHT_SIZE = 400;\nconst SCROLL_LEFT_SIZE = -400;\nexport const handleScroll = (direction: number, listRef: React.RefObject<HTMLDivElement>) => {\n  if (listRef.current) {\n    listRef.current.scrollBy({\n      left: direction,\n      behavior: 'smooth'\n    });\n  }\n};\n\nconst getFilterButton = (\n  filterButtonProps: ButtonLinkProps | undefined,\n  primarySkinColor: string\n) => {\n  if (!filterButtonProps) return null;\n  const {tag, ...rest} = filterButtonProps;\n  return (\n    <div\n      className={style.filterButtonWrapper}\n      style={{borderColor: tag?.label ? primarySkinColor : 'transparent'}}\n    >\n      <div className={style.filterButton}>\n        <ButtonLink\n          {...rest}\n          icon={{\n            position: 'left',\n            faIcon: {\n              name: 'sliders',\n              size: 14,\n              color: tag ? COLORS.cm_grey_700 : COLORS.neutral_500\n            }\n          }}\n          tag={\n            tag\n              ? {\n                  label: tag.label,\n                  customStyle: {backgroundColor: primarySkinColor, color: '#FFFFFF'}\n                }\n              : undefined\n          }\n          className={style.filterButton}\n          data-testid=\"open-filters-modal-button\"\n          customStyle={{borderRadius: '12px'}}\n        />\n      </div>\n    </div>\n  );\n};\n\nconst QuickFilters = (\n  {primaryOption, filterOptions, filterButton, filterOptionsAriaLabel}: QuickFiltersProps,\n  context: WebContextValues\n) => {\n  const skin = GetSkinFromContext(context);\n  const primarySkinColor = get('common.primary', skin);\n  const {defaultLabel, defaultIconName, defaultSelected, defaultAriaLabel, onDefaultClick} =\n    primaryOption;\n  const filtersListRef = React.useRef<HTMLDivElement>(null);\n  const rightBtnRef = useRef<HTMLDivElement>(null);\n  const leftBtnRef = useRef<HTMLDivElement>(null);\n\n  const handleScrollRight = useCallback(() => {\n    handleScroll(SCROLL_RIGHT_SIZE, filtersListRef);\n  }, [filtersListRef]);\n  const handleScrollLeft = useCallback(() => {\n    handleScroll(SCROLL_LEFT_SIZE, filtersListRef);\n  }, [filtersListRef]);\n  useEffect(() => {\n    const list = filtersListRef.current;\n    const rightButton = rightBtnRef.current;\n    const leftButton = leftBtnRef.current;\n    /* istanbul ignore next */ // not testable without complex mocking useRef\n    if (!list || !leftButton || !rightButton) return;\n\n    const update = () => {\n      const rightArrowWidth = rightButton.offsetWidth;\n      const showingRightButton =\n        list.scrollLeft + list.clientWidth < list.scrollWidth - rightArrowWidth;\n      const showingLeftButton = list.scrollLeft > 0;\n      rightButton.style.visibility = showingRightButton ? 'visible' : 'hidden';\n      rightButton.style.opacity = showingRightButton ? '1' : '0';\n      leftButton.style.visibility = showingLeftButton ? 'visible' : 'hidden';\n      leftButton.style.opacity = showingLeftButton ? '1' : '0';\n    };\n\n    list.addEventListener('scroll', update);\n    window.addEventListener('resize', update);\n    update();\n    return () => {\n      list.removeEventListener('scroll', update);\n      window.removeEventListener('resize', update);\n    };\n  }, [filterOptions]);\n\n  return (\n    <div className={style.filtersMainContainer} data-name=\"search\">\n      <div className={style.leftArrowButton} ref={leftBtnRef} style={{visibility: 'hidden'}}>\n        <ButtonLink\n          icon={{position: 'left', faIcon: {name: 'arrow-left', size: 15}}}\n          onClick={handleScrollLeft}\n          className={style.leftArrowButton}\n          customStyle={{height: '36px'}}\n          data-testid=\"scroll-left-button\"\n        />\n      </div>\n      <div\n        className={style.filtersList}\n        ref={filtersListRef}\n        data-testid=\"filters-options-list\"\n        aria-label={filterOptionsAriaLabel}\n      >\n        <div\n          data-testid=\"all-option\"\n          className={classNames(style.defaultOption, defaultSelected && style.filterSelected)}\n          onClick={onDefaultClick}\n        >\n          <FaIcon\n            iconName={defaultIconName}\n            size={{faSize: 20, wrapperSize: 20}}\n            aria-label={defaultAriaLabel}\n          />\n          <span className={style.filterLabel}>{defaultLabel}</span>\n          <div className={style.bar} style={{background: primarySkinColor}} />\n        </div>\n        <div className={style.filterSeparator} />\n        <div className={style.filtersContainer}>\n          {filterOptions.map((filterOption, idx) => {\n            const {iconName, label, selected, value, onClick, ariaLabel} = filterOption;\n            return (\n              <div\n                key={idx}\n                className={classNames(style.filterOption, selected && style.filterSelected)}\n                data-testid={`filter-${value}-${idx}`}\n                style={{borderBottomColor: primarySkinColor}}\n                onClick={onClick}\n              >\n                <FaIcon\n                  iconName={iconName}\n                  size={{faSize: 20, wrapperSize: 20}}\n                  aria-label={ariaLabel}\n                />\n                <span className={style.filterLabel}>{label}</span>\n                <div className={style.bar} style={{background: primarySkinColor}} />\n              </div>\n            );\n          })}\n          <div className={style.rightArrowButton} ref={rightBtnRef} style={{visibility: 'hidden'}}>\n            <ButtonLink\n              icon={{\n                position: 'left',\n                faIcon: {\n                  name: 'arrow-right',\n                  size: 15\n                }\n              }}\n              className={style.rightArrowButton}\n              onClick={handleScrollRight}\n              customStyle={{height: '36px'}}\n              data-testid=\"scroll-right-button\"\n            />\n          </div>\n        </div>\n      </div>\n      {getFilterButton(filterButton, primarySkinColor)}\n    </div>\n  );\n};\n\nQuickFilters.propTypes = propTypes;\nQuickFilters.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\nexport default QuickFilters;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useRef","useEffect","classNames","FaIcon","COLORS","ButtonLink","Provider","GetSkinFromContext","style","propTypes","SCROLL_RIGHT_SIZE","SCROLL_LEFT_SIZE","handleScroll","direction","listRef","current","scrollBy","left","behavior","getFilterButton","filterButtonProps","primarySkinColor","tag","rest","createElement","className","filterButtonWrapper","borderColor","label","filterButton","_extends","icon","position","faIcon","name","size","color","cm_grey_700","neutral_500","customStyle","backgroundColor","undefined","borderRadius","QuickFilters","primaryOption","filterOptions","filterOptionsAriaLabel","context","skin","_get","defaultLabel","defaultIconName","defaultSelected","defaultAriaLabel","onDefaultClick","filtersListRef","rightBtnRef","leftBtnRef","handleScrollRight","handleScrollLeft","list","rightButton","leftButton","update","rightArrowWidth","offsetWidth","showingRightButton","scrollLeft","clientWidth","scrollWidth","showingLeftButton","visibility","opacity","addEventListener","window","removeEventListener","filtersMainContainer","leftArrowButton","ref","onClick","height","filtersList","role","defaultOption","filterSelected","iconName","faSize","wrapperSize","filterLabel","bar","background","filterSeparator","filtersContainer","map","filterOption","idx","selected","value","ariaLabel","key","borderBottomColor","rightArrowButton","process","env","NODE_ENV","contextTypes","childContextTypes"],"sources":["../../../src/molecule/quick-filters/index.tsx"],"sourcesContent":["import React, {useCallback, useRef, useEffect} from 'react';\nimport classNames from 'classnames';\nimport {get} from 'lodash/fp';\nimport FaIcon from '../../atom/icon';\nimport {COLORS} from '../../variables/colors';\nimport ButtonLink from '../../atom/button-link';\nimport {ButtonLinkProps} from '../../atom/button-link/types';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport Provider, {GetSkinFromContext} from '../../atom/provider';\nimport style from './style.css';\nimport {QuickFiltersProps, propTypes} from './types';\n\nconst SCROLL_RIGHT_SIZE = 400;\nconst SCROLL_LEFT_SIZE = -400;\nexport const handleScroll = (direction: number, listRef: React.RefObject<HTMLDivElement>) => {\n  if (listRef.current) {\n    listRef.current.scrollBy({\n      left: direction,\n      behavior: 'smooth'\n    });\n  }\n};\n\nconst getFilterButton = (\n  filterButtonProps: ButtonLinkProps | undefined,\n  primarySkinColor: string\n) => {\n  if (!filterButtonProps) return null;\n  const {tag, ...rest} = filterButtonProps;\n  return (\n    <div\n      className={style.filterButtonWrapper}\n      style={{borderColor: tag?.label ? primarySkinColor : 'transparent'}}\n    >\n      <div className={style.filterButton}>\n        <ButtonLink\n          {...rest}\n          icon={{\n            position: 'left',\n            faIcon: {\n              name: 'sliders',\n              size: 14,\n              color: tag ? COLORS.cm_grey_700 : COLORS.neutral_500\n            }\n          }}\n          tag={\n            tag\n              ? {\n                  label: tag.label,\n                  customStyle: {backgroundColor: primarySkinColor, color: '#FFFFFF'}\n                }\n              : undefined\n          }\n          className={style.filterButton}\n          data-testid=\"open-filters-modal-button\"\n          customStyle={{borderRadius: '12px'}}\n        />\n      </div>\n    </div>\n  );\n};\n\nconst QuickFilters = (\n  {primaryOption, filterOptions, filterButton, filterOptionsAriaLabel}: QuickFiltersProps,\n  context: WebContextValues\n) => {\n  const skin = GetSkinFromContext(context);\n  const primarySkinColor = get('common.primary', skin);\n  const {defaultLabel, defaultIconName, defaultSelected, defaultAriaLabel, onDefaultClick} =\n    primaryOption;\n  const filtersListRef = React.useRef<HTMLDivElement>(null);\n  const rightBtnRef = useRef<HTMLDivElement>(null);\n  const leftBtnRef = useRef<HTMLDivElement>(null);\n\n  const handleScrollRight = useCallback(() => {\n    handleScroll(SCROLL_RIGHT_SIZE, filtersListRef);\n  }, [filtersListRef]);\n  const handleScrollLeft = useCallback(() => {\n    handleScroll(SCROLL_LEFT_SIZE, filtersListRef);\n  }, [filtersListRef]);\n  useEffect(() => {\n    const list = filtersListRef.current;\n    const rightButton = rightBtnRef.current;\n    const leftButton = leftBtnRef.current;\n    /* istanbul ignore next */ // not testable without complex mocking useRef\n    if (!list || !leftButton || !rightButton) return;\n\n    const update = () => {\n      const rightArrowWidth = rightButton.offsetWidth;\n      const showingRightButton =\n        list.scrollLeft + list.clientWidth < list.scrollWidth - rightArrowWidth;\n      const showingLeftButton = list.scrollLeft > 0;\n      rightButton.style.visibility = showingRightButton ? 'visible' : 'hidden';\n      rightButton.style.opacity = showingRightButton ? '1' : '0';\n      leftButton.style.visibility = showingLeftButton ? 'visible' : 'hidden';\n      leftButton.style.opacity = showingLeftButton ? '1' : '0';\n    };\n\n    list.addEventListener('scroll', update);\n    window.addEventListener('resize', update);\n    update();\n    return () => {\n      list.removeEventListener('scroll', update);\n      window.removeEventListener('resize', update);\n    };\n  }, [filterOptions]);\n\n  return (\n    <div className={style.filtersMainContainer} data-name=\"search\">\n      <div className={style.leftArrowButton} ref={leftBtnRef} style={{visibility: 'hidden'}}>\n        <ButtonLink\n          icon={{position: 'left', faIcon: {name: 'arrow-left', size: 15}}}\n          onClick={handleScrollLeft}\n          className={style.leftArrowButton}\n          customStyle={{height: '36px'}}\n          data-testid=\"scroll-left-button\"\n        />\n      </div>\n      <div\n        className={style.filtersList}\n        ref={filtersListRef}\n        data-testid=\"filters-options-list\"\n        role=\"group\"\n        aria-label={filterOptionsAriaLabel}\n      >\n        <div\n          data-testid=\"all-option\"\n          className={classNames(style.defaultOption, defaultSelected && style.filterSelected)}\n          onClick={onDefaultClick}\n        >\n          <FaIcon\n            iconName={defaultIconName}\n            size={{faSize: 20, wrapperSize: 20}}\n            aria-label={defaultAriaLabel}\n          />\n          <span className={style.filterLabel}>{defaultLabel}</span>\n          <div className={style.bar} style={{background: primarySkinColor}} />\n        </div>\n        <div className={style.filterSeparator} />\n        <div className={style.filtersContainer}>\n          {filterOptions.map((filterOption, idx) => {\n            const {iconName, label, selected, value, onClick, ariaLabel} = filterOption;\n            return (\n              <div\n                key={idx}\n                className={classNames(style.filterOption, selected && style.filterSelected)}\n                data-testid={`filter-${value}-${idx}`}\n                style={{borderBottomColor: primarySkinColor}}\n                onClick={onClick}\n              >\n                <FaIcon\n                  iconName={iconName}\n                  size={{faSize: 20, wrapperSize: 20}}\n                  aria-label={ariaLabel}\n                />\n                <span className={style.filterLabel}>{label}</span>\n                <div className={style.bar} style={{background: primarySkinColor}} />\n              </div>\n            );\n          })}\n          <div className={style.rightArrowButton} ref={rightBtnRef} style={{visibility: 'hidden'}}>\n            <ButtonLink\n              icon={{\n                position: 'left',\n                faIcon: {\n                  name: 'arrow-right',\n                  size: 15\n                }\n              }}\n              className={style.rightArrowButton}\n              onClick={handleScrollRight}\n              customStyle={{height: '36px'}}\n              data-testid=\"scroll-right-button\"\n            />\n          </div>\n        </div>\n      </div>\n      {getFilterButton(filterButton, primarySkinColor)}\n    </div>\n  );\n};\n\nQuickFilters.propTypes = propTypes;\nQuickFilters.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\nexport default QuickFilters;\n"],"mappings":"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","ignoreList":[]}

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

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

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

@@ -93,14 +93,17 @@ const ReviewCorrectionPopin = props => {
     className: style.feedbackSection
   }, /*#__PURE__*/React.createElement("div", {
     className: style.information,
+    role: "group",
     "aria-label": "answer-information"
   }, /*#__PURE__*/React.createElement("div", {
     className: style.labelContainer
   }, /*#__PURE__*/React.createElement("span", {
     className: style.label,
+    role: "group",
     "aria-label": information.label
   }, information.label)), /*#__PURE__*/React.createElement("span", {
     className: style.message,
+    role: "group",
     "aria-label": information.message
     // eslint-disable-next-line react/no-danger
     ,

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

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

package/es/molecule/search-form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/search-form/index.js"],"names":[],"mappings":";AAOA,mEAoEC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/search-form/index.js"],"names":[],"mappings":";AAOA,mEA8EC"}