@coorpacademy/components 11.40.22 → 11.40.23

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learner-skill-card/index.js"],"names":[],"mappings":"AAWO,uEAIN;;AACD,yEAsIC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learner-skill-card/index.js"],"names":[],"mappings":"AAWO,uEAIN;;AAUD,yEA0IC"}

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

@@ -20,6 +20,13 @@ const updateBackgroundImage = (ref, background) => {
   }
 };
 exports.updateBackgroundImage = updateBackgroundImage;
+const handleCardKeyDown = onClick => event => {
+  if (!onClick) return;
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault();
+    onClick(event);
+  }
+};
 const LearnerSkillCard = (props, context) => {
   const {
     'aria-label': ariaLabel,
@@ -55,6 +62,9 @@ const LearnerSkillCard = (props, context) => {
     "data-testid": `learner-skill-card-wrapper-${cardIndex}`,
     "data-name": `skill-card-${label}`,
     onClick: onClick,
+    role: onClick ? 'button' : 'group',
+    tabIndex: onClick ? 0 : undefined,
+    onKeyDown: handleCardKeyDown(onClick),
     className: _style.default.learnerSkillCardContainer,
     "aria-label": ariaLabel,
     onMouseEnter: handleMouseEnter,
@@ -108,6 +118,7 @@ const LearnerSkillCard = (props, context) => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     "data-name": "skill-card-title",
     className: _style.default.skillTitle,
+    role: "group",
     "aria-label": ariaLabel || title
   }, title), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.contentAndQuestionsWrapper

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_provider","_progressBar","_colors","_getBackgroundGradientColor","_icon","_style","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","MAX_SCORE","updateBackgroundImage","ref","background","current","style","backgroundImage","exports","LearnerSkillCard","props","context","ariaLabel","cardIndex","title","label","focus","metrics","progress","icon","onClick","content","questionsToReview","translate","GetTranslateFromContext","color","name","badgeIconName","badgeLocale","tagTextColor","tagBackgroundColor","COLORS","purple_700","purple_100","neutral_500","cm_grey_100","headerBackgroundRef","useRef","defaultBackground","useMemo","createGradientBackground","focusBackground","handleMouseEnter","useCallback","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","Provider","childContextTypes","propTypes","process","env","NODE_ENV","type","PropTypes","oneOf","isRequired","string","number","bool","shape","func","_default"],"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":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_provider","_progressBar","_colors","_getBackgroundGradientColor","_icon","_style","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","MAX_SCORE","updateBackgroundImage","ref","background","current","style","backgroundImage","exports","handleCardKeyDown","onClick","event","key","preventDefault","LearnerSkillCard","props","context","ariaLabel","cardIndex","title","label","focus","metrics","progress","icon","content","questionsToReview","translate","GetTranslateFromContext","color","name","badgeIconName","badgeLocale","tagTextColor","tagBackgroundColor","COLORS","purple_700","purple_100","neutral_500","cm_grey_100","headerBackgroundRef","useRef","defaultBackground","useMemo","createGradientBackground","focusBackground","handleMouseEnter","useCallback","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","Provider","childContextTypes","propTypes","process","env","NODE_ENV","type","PropTypes","oneOf","isRequired","string","number","bool","shape","func","_default"],"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":";;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,SAAA,GAAAJ,uBAAA,CAAAC,OAAA;AACA,IAAAI,YAAA,GAAAF,sBAAA,CAAAF,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AACA,IAAAM,2BAAA,GAAAN,OAAA;AACA,IAAAO,KAAA,GAAAL,sBAAA,CAAAF,OAAA;AACA,IAAAQ,MAAA,GAAAN,sBAAA,CAAAF,OAAA;AAAgC,SAAAE,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,yBAAAH,CAAA,6BAAAI,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAD,wBAAA,YAAAA,CAAAH,CAAA,WAAAA,CAAA,GAAAM,CAAA,GAAAD,CAAA,KAAAL,CAAA;AAAA,SAAAV,wBAAAU,CAAA,EAAAK,CAAA,SAAAA,CAAA,IAAAL,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAE,OAAA,EAAAF,CAAA,QAAAM,CAAA,GAAAH,wBAAA,CAAAE,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAP,CAAA,UAAAM,CAAA,CAAAE,GAAA,CAAAR,CAAA,OAAAS,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAf,CAAA,oBAAAe,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAe,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAd,CAAA,EAAAe,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAf,CAAA,CAAAe,CAAA,YAAAN,CAAA,CAAAP,OAAA,GAAAF,CAAA,EAAAM,CAAA,IAAAA,CAAA,CAAAa,GAAA,CAAAnB,CAAA,EAAAS,CAAA,GAAAA,CAAA;AAEhC,MAAMW,SAAS,GAAG,GAAG;AAEd,MAAMC,qBAAqB,GAAGA,CAACC,GAAG,EAAEC,UAAU,KAAK;EACxD,IAAID,GAAG,CAACE,OAAO,EAAE;IACfF,GAAG,CAACE,OAAO,CAACC,KAAK,CAACC,eAAe,GAAGH,UAAU;EAChD;AACF,CAAC;AAACI,OAAA,CAAAN,qBAAA,GAAAA,qBAAA;AAEF,MAAMO,iBAAiB,GAAGC,OAAO,IAAIC,KAAK,IAAI;EAC5C,IAAI,CAACD,OAAO,EAAE;EACd,IAAIC,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;IAC9CD,KAAK,CAACE,cAAc,CAAC,CAAC;IACtBH,OAAO,CAACC,KAAK,CAAC;EAChB;AACF,CAAC;AAED,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;IACJd;EACF,CAAC,GAAGK,KAAK;EACT,MAAM;IAACU,OAAO;IAAEC,iBAAiB,GAAG;EAAC,CAAC,GAAGJ,OAAO;EAChD,MAAMK,SAAS,GAAG,IAAAC,iCAAuB,EAACZ,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,EAAEM,SAAS,CAAC,aAAa,CAAC,EAAEQ,cAAM,CAACC,UAAU,EAAED,cAAM,CAACE,UAAU,CAAC,GAClF,CAAC,QAAQ,EAAEV,SAAS,CAAC,OAAO,CAAC,EAAEQ,cAAM,CAACG,WAAW,EAAEH,cAAM,CAACI,WAAW,CAAC;EAC1E,MAAMC,mBAAmB,GAAG,IAAAC,aAAM,EAAC,IAAI,CAAC;EACxC,MAAMC,iBAAiB,GAAG,IAAAC,cAAO,EAAC,MAAM,IAAAC,oDAAwB,EAACf,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAChG,MAAMgB,eAAe,GAAG,IAAAF,cAAO,EAAC,MAAM,IAAAC,oDAAwB,EAACf,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAC9F,MAAMiB,gBAAgB,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACzC7C,qBAAqB,CAACsC,mBAAmB,EAAEK,eAAe,CAAC;EAC7D,CAAC,EAAE,CAACA,eAAe,CAAC,CAAC;EACrB,MAAMG,gBAAgB,GAAG,IAAAD,kBAAW,EAAC,MAAM;IACzC7C,qBAAqB,CAACsC,mBAAmB,EAAEE,iBAAiB,CAAC;EAC/D,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;EACvB,oBACExE,MAAA,CAAAa,OAAA,CAAAkE,aAAA;IACE,eAAa,8BAA8B/B,SAAS,EAAG;IACvD,aAAW,cAAcE,KAAK,EAAG;IACjCV,OAAO,EAAEA,OAAQ;IACjBwC,IAAI,EAAExC,OAAO,GAAG,QAAQ,GAAG,OAAQ;IACnCyC,QAAQ,EAAEzC,OAAO,GAAG,CAAC,GAAG0C,SAAU;IAClCC,SAAS,EAAE5C,iBAAiB,CAACC,OAAO,CAAE;IACtC4C,SAAS,EAAEhD,cAAK,CAACiD,yBAA0B;IAC3C,cAAYtC,SAAU;IACtBuC,YAAY,EAAEV,gBAAiB;IAC/BW,YAAY,EAAET;EAAiB,gBAE/B9E,MAAA,CAAAa,OAAA,CAAAkE,aAAA;IACE,eAAY,wCAAwC;IACpD9C,GAAG,EAAEqC,mBAAoB;IACzBc,SAAS,EAAEhD,cAAK,CAACoD,iBAAkB;IACnCpD,KAAK,EAAE;MAACC,eAAe,EAAEmC,iBAAiB;MAAEb,KAAK,EAAEI;IAAY;EAAE,gBAEjE/D,MAAA,CAAAa,OAAA,CAAAkE,aAAA;IAAKK,SAAS,EAAEhD,cAAK,CAACqD,WAAY;IAAC,eAAY;EAAiC,gBAC9EzF,MAAA,CAAAa,OAAA,CAAAkE,aAAA,CAACtE,KAAA,CAAAI,OAAM;IAEH6E,QAAQ,EAAE9B,IAAI;IACd+B,SAAS,EAAEhC,KAAK;IAChBiC,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,eACNlG,MAAA,CAAAa,OAAA,CAAAkE,aAAA;IAAKK,SAAS,EAAEhD,cAAK,CAAC+D;EAAwB,gBAC5CnG,MAAA,CAAAa,OAAA,CAAAkE,aAAA;IAAKK,SAAS,EAAEhD,cAAK,CAACgE;EAAkB,gBACtCpG,MAAA,CAAAa,OAAA,CAAAkE,aAAA;IACEK,SAAS,EAAEhD,cAAK,CAACiE,eAAgB;IACjCjE,KAAK,EAAE;MACLkE,eAAe,EAAEtC,kBAAkB;MACnCL,KAAK,EAAEI;IACT;EAAE,gBAEF/D,MAAA,CAAAa,OAAA,CAAAkE,aAAA,CAACtE,KAAA,CAAAI,OAAM;IAEH6E,QAAQ,EAAE7B,aAAa;IACvByC,eAAe,EAAEtC,kBAAkB;IACnC4B,IAAI,EAAE;MACJC,MAAM,EAAE,EAAE;MACVC,WAAW,EAAE;IACf;EAAC,CAEJ,CAAC,eACF9F,MAAA,CAAAa,OAAA,CAAAkE,aAAA;IAAM3C,KAAK,EAAE;MAACuB,KAAK,EAAEI;IAAY;EAAE,GAAED,WAAkB,CACpD,CAAC,eAEN9D,MAAA,CAAAa,OAAA,CAAAkE,aAAA;IAAKK,SAAS,EAAEhD,cAAK,CAACmE;EAAgB,gBACpCvG,MAAA,CAAAa,OAAA,CAAAkE,aAAA;IACE,aAAU,kBAAkB;IAC5BK,SAAS,EAAEhD,cAAK,CAACoE,UAAW;IAC5BxB,IAAI,EAAC,OAAO;IACZ,cAAYjC,SAAS,IAAIE;EAAM,GAE9BA,KACE,CAAC,eACNjD,MAAA,CAAAa,OAAA,CAAAkE,aAAA;IAAKK,SAAS,EAAEhD,cAAK,CAACqE;EAA2B,gBAC/CzG,MAAA,CAAAa,OAAA,CAAAkE,aAAA;IACE,aAAU;IACV;IAAA;IACA2B,uBAAuB,EAAE;MAACC,MAAM,EAAElD,SAAS,CAAC,SAAS,EAAE;QAACmD,KAAK,EAAErD;MAAO,CAAC;IAAC;EAAE,CAC3E,CAAC,EACDC,iBAAiB,gBAChBxD,MAAA,CAAAa,OAAA,CAAAkE,aAAA;IACEK,SAAS,EAAEhD,cAAK,CAACyE,gBAAiB;IAClC,aAAU;EAA4C,gBAEtD7G,MAAA,CAAAa,OAAA,CAAAkE,aAAA,CAACtE,KAAA,CAAAI,OAAM;IAEH6E,QAAQ,EAAE,QAAQ;IAClBC,SAAS,EAAE1B,cAAM,CAAC6C,WAAW;IAC7BR,eAAe,EAAE,aAAa;IAC9BV,IAAI,EAAE;MAACC,MAAM,EAAE,CAAC;MAAEC,WAAW,EAAE;IAAC;EAAC,CAEpC,CAAC,eACF9F,MAAA,CAAAa,OAAA,CAAAkE,aAAA;IACE,aAAU;IACV;IAAA;IACA2B,uBAAuB,EAAE;MACvBC,MAAM,EAAElD,SAAS,CAAC,4CAA4C,EAAE;QAC9DmD,KAAK,EAAEpD;MACT,CAAC;IACH;EAAE,CACH,CACE,CAAC,GACJ,IACD,CACF,CACF,CACF,CAAC,eACNxD,MAAA,CAAAa,OAAA,CAAAkE,aAAA;IAAKK,SAAS,EAAEhD,cAAK,CAAC2E;EAAqB,gBACzC/G,MAAA,CAAAa,OAAA,CAAAkE,aAAA,CAACzE,YAAA,CAAAO,OAAW;IACVmG,KAAK,EAAE3D,QAAS;IAChB4D,WAAW,EAAE,KAAM;IACnBC,GAAG,EAAEnF,SAAU;IACfqD,SAAS,EAAEhD,cAAK,CAAC+E,eAAgB;IACjC/E,KAAK,EAAE;MAACkE,eAAe,EAAErC,cAAM,CAACmD;IAAe;EAAE,CAClD,CACE,CACF,CAAC;AAEV,CAAC;AAEDxE,gBAAgB,CAACyE,YAAY,GAAG;EAC9B5D,SAAS,EAAE6D,iBAAQ,CAACC,iBAAiB,CAAC9D;AACxC,CAAC;AAEDb,gBAAgB,CAAC4E,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EAC3BC,IAAI,EAAEC,kBAAS,CAACC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAACC,UAAU;EAC3C9E,KAAK,EAAE4E,kBAAS,CAACG,MAAM,CAACD,UAAU;EAClC7E,KAAK,EAAE2E,kBAAS,CAACG,MAAM;EACvB,YAAY,EAAEH,kBAAS,CAACG,MAAM;EAC9BhF,SAAS,EAAE6E,kBAAS,CAACI,MAAM;EAC3B9E,KAAK,EAAE0E,kBAAS,CAACK,IAAI;EACrB7E,QAAQ,EAAEwE,kBAAS,CAACI,MAAM;EAC1B7E,OAAO,EAAEyE,kBAAS,CAACM,KAAK,CAAC;IACvB5E,OAAO,EAAEsE,kBAAS,CAACI,MAAM;IACzBzE,iBAAiB,EAAEqE,kBAAS,CAACI;EAC/B,CAAC,CAAC;EACF3E,IAAI,EAAEuE,kBAAS,CAACM,KAAK,CAAC;IACpBxE,KAAK,EAAEkE,kBAAS,CAACG,MAAM;IACvBpE,IAAI,EAAEiE,kBAAS,CAACG;EAClB,CAAC,CAAC;EACFxF,OAAO,EAAEqF,kBAAS,CAACO;AACrB,CAAC;AAAC,IAAAC,QAAA,GAAA/F,OAAA,CAAAzB,OAAA,GACa+B,gBAAgB","ignoreList":[]}

package/lib/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/lib/molecule/learning-priority-card/index.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_cssColorFunction","_provider","_interopRequireWildcard","_tag","_buttonLink","_circularProgressBar","_types","_style","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","LearningPriorityCard","props","context","tagLabel","title","progression","onClick","translate","GetTranslateFromContext","skin","GetSkinFromContext","exploreLocale","primarySkinColor","_get2","buttonExploreProps","customStyle","backgroundColor","convert","color","transition","hoverBackgroundColor","hoverColor","label","icon","position","faIcon","name","size","createElement","className","style","container","circularProgressBarContainer","strokeWidth","propTypes","process","env","NODE_ENV","contextTypes","Provider","childContextTypes","_default","exports"],"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","_interopRequireDefault","require","_cssColorFunction","_provider","_interopRequireWildcard","_tag","_buttonLink","_circularProgressBar","_types","_style","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","LearningPriorityCard","props","context","tagLabel","title","progression","onClick","translate","GetTranslateFromContext","skin","GetSkinFromContext","exploreLocale","primarySkinColor","_get2","buttonExploreProps","customStyle","backgroundColor","convert","color","transition","hoverBackgroundColor","hoverColor","label","icon","position","faIcon","name","size","createElement","className","style","container","role","circularProgressBarContainer","strokeWidth","propTypes","process","env","NODE_ENV","contextTypes","Provider","childContextTypes","_default","exports"],"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/lib/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/lib/molecule/learning-priority-setup-item/index.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_provider","_tag","_buttonLink","_style","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","LearningPrioritySetupItem","props","context","priorityRef","id","title","courses","type","ariaLabel","onRemove","translate","handleRemovePriority","useCallback","handleTypeTranslate","itemType","createElement","className","style","container","containerInfos","titleWrapper","label","size","customStyle","width","backgroundColor","hoverBackgroundColor","icon","position","faIcon","name","color","onClick","contextTypes","Provider","childContextTypes","propTypes","process","env","NODE_ENV","PropTypes","string","number","oneOf","func","_default","exports"],"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","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_provider","_tag","_buttonLink","_style","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","LearningPrioritySetupItem","props","context","priorityRef","id","title","courses","type","ariaLabel","onRemove","translate","handleRemovePriority","useCallback","handleTypeTranslate","itemType","createElement","className","style","container","role","containerInfos","titleWrapper","label","size","customStyle","width","backgroundColor","hoverBackgroundColor","icon","position","faIcon","name","color","onClick","contextTypes","Provider","childContextTypes","propTypes","process","env","NODE_ENV","PropTypes","string","number","oneOf","func","_default","exports"],"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/lib/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/lib/molecule/progress-wrapper/index.js

@@ -69,6 +69,7 @@ const DetailSection = ({
   return isTypeStars ? /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default[`detailsSection${index}`],
     "data-name": type,
+    role: "group",
     "aria-label": `${type} informations`
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.detailsInfo
@@ -86,6 +87,7 @@ const DetailSection = ({
   }), /*#__PURE__*/_react.default.createElement("span", null, stars)))) : /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default[`detailsSection${index}`],
     "data-name": type,
+    role: "group",
     "aria-label": `${type} informations`
   }, /*#__PURE__*/_react.default.createElement("img", {
     className: _style.default.img,
@@ -123,6 +125,7 @@ const ProgressWrapper = ({
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.container,
     "data-name": "prgress-wrapper",
+    role: "group",
     "aria-label": "progress wrapper section"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.titleContainer

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_propTypes","_cssColorFunction","_title","_progressBar","_colors","_tag","_buttonLink","_icon","_provider","_style","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","uncappedMap","_map2","convert","cap","DetailSection","index","type","isLocked","downloadUrl","stars","context","translate","skin","GetSkinFromContext","primarySkinColor","_get2","isTypeStars","downloadButtonProps","label","link","target","href","customStyle","backgroundColor","color","width","transition","hoverBackgroundColor","hoverColor","COLORS","white","icon","position","faIcon","name","size","padding","disabled","createElement","className","style","detailsInfo","detailsInfoText","detailsTitle","iconName","iconColor","preset","img","src","buttonContainer","ProgressWrapper","completedModules","mandatoryModules","title","subtitle","progression","sections","mandatoryCompletedModulesLocale","total","count","showDetails","setShowDetails","useState","handleToggleDetails","useCallback","container","titleContainer","titleSize","statscontainer","stats","dangerouslySetInnerHTML","__html","statsNumber","customProgressBar","cm_positive_500","displayInfo","value","max","statsProgressionMobile","_isEmpty2","Fragment","toggleDetailsButton","onClick","toggleDetailsLabel","toggleDetailsTitle","cm_grey_500","cm_grey_700","faSize","wrapperSize","classNames","details","visibleDetails","hiddenDetails","section","key","commonDetailSectionPropTypes","process","env","NODE_ENV","PropTypes","oneOf","string","number","contextTypes","Provider","childContextTypes","propTypes","bool","arrayOf","shape","_default","exports"],"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","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_propTypes","_cssColorFunction","_title","_progressBar","_colors","_tag","_buttonLink","_icon","_provider","_style","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","uncappedMap","_map2","convert","cap","DetailSection","index","type","isLocked","downloadUrl","stars","context","translate","skin","GetSkinFromContext","primarySkinColor","_get2","isTypeStars","downloadButtonProps","label","link","target","href","customStyle","backgroundColor","color","width","transition","hoverBackgroundColor","hoverColor","COLORS","white","icon","position","faIcon","name","size","padding","disabled","createElement","className","style","role","detailsInfo","detailsInfoText","detailsTitle","iconName","iconColor","preset","img","src","buttonContainer","ProgressWrapper","completedModules","mandatoryModules","title","subtitle","progression","sections","mandatoryCompletedModulesLocale","total","count","showDetails","setShowDetails","useState","handleToggleDetails","useCallback","container","titleContainer","titleSize","statscontainer","stats","dangerouslySetInnerHTML","__html","statsNumber","customProgressBar","cm_positive_500","displayInfo","value","max","statsProgressionMobile","_isEmpty2","Fragment","toggleDetailsButton","onClick","toggleDetailsLabel","toggleDetailsTitle","cm_grey_500","cm_grey_700","faSize","wrapperSize","classNames","details","visibleDetails","hiddenDetails","section","key","commonDetailSectionPropTypes","process","env","NODE_ENV","PropTypes","oneOf","string","number","contextTypes","Provider","childContextTypes","propTypes","bool","arrayOf","shape","_default","exports"],"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/lib/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/lib/molecule/questions/qcm/index.js

@@ -13,6 +13,13 @@ var _style = _interopRequireDefault(require("./style.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const handleAnswerKeyDown = onClick => event => {
+  if (!onClick) return;
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault();
+    onClick(event);
+  }
+};
 const QCM = (props, legacyContext) => {
   const {
     answers,
@@ -34,10 +41,13 @@ const QCM = (props, legacyContext) => {
     const selectedAnswerClass = selected ? _style.default.selectedAnswer : _style.default.unselectedAnswer;
     return /*#__PURE__*/_react.default.createElement("div", {
       "data-name": "answer",
+      role: "button",
+      tabIndex: 0,
       "aria-label": ariaLabel || title,
       title: ariaLabel || title,
       className: (0, _classnames.default)(longAnswerClass, _style.default.innerHTML, selectedAnswerClass),
       onClick: onClick,
+      onKeyDown: handleAnswerKeyDown(onClick),
       style: {
         ...(selected && {
           boxShadow: `0 4px 16px ${(0, _getShadowBoxColorFromPrimary.getShadowBoxColorFromPrimary)(primarySkinColor)}`

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_propTypes","_getOr","_maxBy","_provider","_getShadowBoxColorFromPrimary","_style","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","QCM","props","legacyContext","answers","groupAriaLabel","longestAnswer","maxBy","title","length","skin","GetSkinFromContext","primarySkinColor","getOr","answersViews","useMemo","map","answer","key","onClick","selected","ariaLabel","longAnswerClass","style","selectedAnswerClass","selectedAnswer","unselectedAnswer","createElement","className","classnames","innerHTML","boxShadow","getShadowBoxColorFromPrimary","backgroundColor","background","answerText","dangerouslySetInnerHTML","__html","wrapper","role","contextTypes","Provider","childContextTypes","propTypes","process","env","NODE_ENV","PropTypes","arrayOf","shape","string","bool","func","_default","exports"],"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","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_propTypes","_getOr","_maxBy","_provider","_getShadowBoxColorFromPrimary","_style","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","handleAnswerKeyDown","onClick","event","key","preventDefault","QCM","props","legacyContext","answers","groupAriaLabel","longestAnswer","maxBy","title","length","skin","GetSkinFromContext","primarySkinColor","getOr","answersViews","useMemo","map","answer","selected","ariaLabel","longAnswerClass","style","selectedAnswerClass","selectedAnswer","unselectedAnswer","createElement","role","tabIndex","className","classnames","innerHTML","onKeyDown","boxShadow","getShadowBoxColorFromPrimary","backgroundColor","background","answerText","dangerouslySetInnerHTML","__html","wrapper","contextTypes","Provider","childContextTypes","propTypes","process","env","NODE_ENV","PropTypes","arrayOf","shape","string","bool","func","_default","exports"],"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":";;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,UAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,MAAA,GAAAF,sBAAA,CAAAF,OAAA;AACA,IAAAK,MAAA,GAAAH,sBAAA,CAAAF,OAAA;AACA,IAAAM,SAAA,GAAAP,uBAAA,CAAAC,OAAA;AACA,IAAAO,6BAAA,GAAAP,OAAA;AACA,IAAAQ,MAAA,GAAAN,sBAAA,CAAAF,OAAA;AAAgC,SAAAE,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,yBAAAH,CAAA,6BAAAI,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAD,wBAAA,YAAAA,CAAAH,CAAA,WAAAA,CAAA,GAAAM,CAAA,GAAAD,CAAA,KAAAL,CAAA;AAAA,SAAAV,wBAAAU,CAAA,EAAAK,CAAA,SAAAA,CAAA,IAAAL,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAE,OAAA,EAAAF,CAAA,QAAAM,CAAA,GAAAH,wBAAA,CAAAE,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAP,CAAA,UAAAM,CAAA,CAAAE,GAAA,CAAAR,CAAA,OAAAS,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAf,CAAA,oBAAAe,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAe,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAd,CAAA,EAAAe,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAf,CAAA,CAAAe,CAAA,YAAAN,CAAA,CAAAP,OAAA,GAAAF,CAAA,EAAAM,CAAA,IAAAA,CAAA,CAAAa,GAAA,CAAAnB,CAAA,EAAAS,CAAA,GAAAA,CAAA;AAEhC,MAAMW,mBAAmB,GAAGC,OAAO,IAAIC,KAAK,IAAI;EAC9C,IAAI,CAACD,OAAO,EAAE;EACd,IAAIC,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;IAC9CD,KAAK,CAACE,cAAc,CAAC,CAAC;IACtBH,OAAO,CAACC,KAAK,CAAC;EAChB;AACF,CAAC;AAED,MAAMG,GAAG,GAAGA,CAACC,KAAK,EAAEC,aAAa,KAAK;EACpC,MAAM;IAACC,OAAO;IAAEC;EAAc,CAAC,GAAGH,KAAK;EACvC,MAAMI,aAAa,GAAG,IAAAC,cAAK,EAAC,CAAC;IAACC;EAAK,CAAC,KAAKA,KAAK,CAACC,MAAM,EAAEL,OAAO,CAAC;EAC/D,MAAMM,IAAI,GAAG,IAAAC,4BAAkB,EAACR,aAAa,CAAC;EAC9C,MAAMS,gBAAgB,GAAG,IAAAC,cAAK,EAAC,SAAS,EAAE,gBAAgB,EAAEH,IAAI,CAAC;EAEjE,MAAMI,YAAY,GAAG,IAAAC,cAAO,EAC1B,MACEX,OAAO,CAACY,GAAG,CAAC,CAACC,MAAM,EAAElB,GAAG,KAAK;IAC3B,MAAM;MAACF,OAAO;MAAEW,KAAK;MAAEU,QAAQ;MAAE,YAAY,EAAEC;IAAS,CAAC,GAAGF,MAAM;IAClE,MAAMG,eAAe,GAAGd,aAAa,CAACE,KAAK,KAAKA,KAAK,GAAGa,cAAK,CAACf,aAAa,GAAGe,cAAK,CAACJ,MAAM;IAC1F,MAAMK,mBAAmB,GAAGJ,QAAQ,GAAGG,cAAK,CAACE,cAAc,GAAGF,cAAK,CAACG,gBAAgB;IAEpF,oBACE3D,MAAA,CAAAa,OAAA,CAAA+C,aAAA;MACE,aAAU,QAAQ;MAClBC,IAAI,EAAC,QAAQ;MACbC,QAAQ,EAAE,CAAE;MACZ,cAAYR,SAAS,IAAIX,KAAM;MAC/BA,KAAK,EAAEW,SAAS,IAAIX,KAAM;MAC1BoB,SAAS,EAAE,IAAAC,mBAAU,EAACT,eAAe,EAAEC,cAAK,CAACS,SAAS,EAAER,mBAAmB,CAAE;MAC7EzB,OAAO,EAAEA,OAAQ;MACjBkC,SAAS,EAAEnC,mBAAmB,CAACC,OAAO,CAAE;MACxCwB,KAAK,EAAE;QACL,IAAIH,QAAQ,IAAI;UACdc,SAAS,EAAE,cAAc,IAAAC,0DAA4B,EAACrB,gBAAgB,CAAC;QACzE,CAAC;MACH,CAAE;MACF,iBAAeM,QAAS;MACxBnB,GAAG,EAAEA;IAAI,gBAETlC,MAAA,CAAAa,OAAA,CAAA+C,aAAA;MACE,aAAU,mBAAmB;MAC7BJ,KAAK,EAAE;QAACa,eAAe,EAAEhB,QAAQ,GAAGN,gBAAgB,GAAG,SAAS,CAAC;MAAgB,CAAE;MACnFgB,SAAS,EAAEP,cAAK,CAACc;IAAW,CAC7B,CAAC,eACFtE,MAAA,CAAAa,OAAA,CAAA+C,aAAA;MACE,aAAU,cAAc;MACxBG,SAAS,EAAEP,cAAK,CAACe;MACjB;MAAA;MACAC,uBAAuB,EAAE;QAACC,MAAM,EAAE9B;MAAK;IAAE,CAC1C,CACE,CAAC;EAEV,CAAC,CAAC,EACJ,CAACJ,OAAO,EAAEE,aAAa,EAAEM,gBAAgB,CAC3C,CAAC;EAED,oBACE/C,MAAA,CAAAa,OAAA,CAAA+C,aAAA;IACE,aAAU,KAAK;IACfG,SAAS,EAAEP,cAAK,CAACkB,OAAQ;IACzBb,IAAI,EAAC,OAAO;IACZ,cAAYrB,cAAe;IAC3BG,KAAK,EAAEH;EAAe,GAErBS,YACE,CAAC;AAEV,CAAC;AAEDb,GAAG,CAACuC,YAAY,GAAG;EACjB9B,IAAI,EAAE+B,iBAAQ,CAACC,iBAAiB,CAAChC;AACnC,CAAC;AAEDT,GAAG,CAAC0C,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EACd1C,OAAO,EAAE2C,kBAAS,CAACC,OAAO,CACxBD,kBAAS,CAACE,KAAK,CAAC;IACdzC,KAAK,EAAEuC,kBAAS,CAACG,MAAM;IACvBhC,QAAQ,EAAE6B,kBAAS,CAACI,IAAI;IACxBtD,OAAO,EAAEkD,kBAAS,CAACK,IAAI;IACvB,YAAY,EAAEL,kBAAS,CAACG;EAC1B,CAAC,CACH,CAAC;EACD7C,cAAc,EAAE0C,kBAAS,CAACG;AAC5B,CAAC;AAAC,IAAAG,QAAA,GAAAC,OAAA,CAAA5E,OAAA,GAEauB,GAAG","ignoreList":[]}

package/lib/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/lib/molecule/questions/qcm-graphic/index.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_classnames","_provider","_interopRequireWildcard","_getShadowBoxColorFromPrimary","_style","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","QCMImage","props","legacyContext","answers","groupAriaLabel","skin","GetSkinFromContext","primarySkinColor","_getOr2","answersViews","map","answer","key","onClick","title","selected","image","ariaLabel","checkboxId","createElement","style","boxShadow","getShadowBoxColorFromPrimary","className","backgroundColor","background","content","imageWrapper","backgroundImage","titleWrapper","classnames","innerHTML","htmlFor","id","type","value","checked","onChange","hiddenCheckbox","wrapper","role","contextTypes","Provider","childContextTypes","propTypes","process","env","NODE_ENV","PropTypes","arrayOf","shape","string","bool","func","_default","exports"],"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","_interopRequireDefault","require","_propTypes","_classnames","_provider","_interopRequireWildcard","_getShadowBoxColorFromPrimary","_style","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","QCMImage","props","legacyContext","answers","groupAriaLabel","skin","GetSkinFromContext","primarySkinColor","_getOr2","answersViews","map","answer","key","onClick","title","selected","image","ariaLabel","checkboxId","createElement","style","boxShadow","getShadowBoxColorFromPrimary","className","backgroundColor","background","content","imageWrapper","role","backgroundImage","titleWrapper","classnames","innerHTML","htmlFor","id","type","value","checked","onChange","hiddenCheckbox","wrapper","contextTypes","Provider","childContextTypes","propTypes","process","env","NODE_ENV","PropTypes","arrayOf","shape","string","bool","func","_default","exports"],"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/lib/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/lib/molecule/quick-filters/index.js

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