@coorpacademy/components 11.40.2-alpha.10.10 → 11.40.2-alpha.11.12

package/es/molecule/certification-card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/certification-card/index.js"],"names":[],"mappings":";AAQA,0EA2DC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/certification-card/index.js"],"names":[],"mappings":";AAQA,0EA+DC"}

package/es/molecule/certification-card/index.js

@@ -73,7 +73,12 @@ const CertificationCard = (props, context) => {
     "data-name": "certification-title"
   }, title), /*#__PURE__*/React.createElement("div", {
     className: style.moduleCount
-  }, conditionDescriptionProgress)), /*#__PURE__*/React.createElement(ProgressBar, {
+    // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: conditionDescriptionProgress
+    }
+  })), /*#__PURE__*/React.createElement(ProgressBar, {
     className: style.customProgressBar,
     style: {
       backgroundColor: COLORS.cm_positive_500

package/es/molecule/certification-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","COLORS","Provider","Tag","ProgressBar","style","CertificationCard","props","context","label","locales","conditionDescriptionProgress","tag","goal","title","progress","imgUrl","onClick","translate","isInprogress","progressLabel","progressTagType","progressIconProps","position","iconName","iconColor","backgroundColor","size","faSize","wrapperSize","customStyle","padding","certificationIcon","createElement","className","container","type","top","right","icon","imageSection","imageContainer","src","detailWrapper","titleWrapper","moduleCount","customProgressBar","cm_positive_500","displayInfo","value","max","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","string","shape","condition","nbDone","number","func"],"sources":["../../../src/molecule/certification-card/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {COLORS} from '../../variables/colors';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport ProgressBar from '../progress-bar';\nimport style from './style.css';\n\nconst CertificationCard = (props, context) => {\n  const {\n    label,\n    locales: {conditionDescriptionProgress, tag},\n    goal: {title},\n    progress,\n    imgUrl,\n    onClick\n  } = props;\n  const {translate} = context;\n  const isInprogress = progress < 100;\n  const progressLabel = isInprogress ? translate('in_progress') : translate('completed');\n  const progressTagType = isInprogress ? 'progress' : 'success';\n\n  const progressIconProps = {\n    position: 'left',\n    iconName: isInprogress ? 'clock' : 'circle-check',\n    iconColor: isInprogress ? '#B87A00' : '#05944F',\n    backgroundColor: isInprogress ? '#FFEECC' : '#D6F5E5',\n    size: {\n      faSize: 10,\n      wrapperSize: 10\n    },\n    customStyle: {padding: 0}\n  };\n  const certificationIcon = {iconName: 'wreath-laurel'};\n  return (\n    <div className={style.container} data-name={`certification-card-${label}`} onClick={onClick}>\n      {progress > 0 ? (\n        <Tag\n          label={progressLabel}\n          type={progressTagType}\n          customStyle={{position: 'absolute', top: '12px', right: '12px'}}\n          icon={progressIconProps}\n        />\n      ) : null}\n      <div className={style.imageSection}>\n        <div className={style.imageContainer}>\n          <img src={imgUrl} />\n        </div>\n      </div>\n      <div className={style.detailWrapper}>\n        <div className={style.titleWrapper}>\n          <Tag label={tag} size=\"S\" icon={certificationIcon} />\n          <div className={style.title} data-name=\"certification-title\">\n            {title}\n          </div>\n          <div className={style.moduleCount}>{conditionDescriptionProgress}</div>\n        </div>\n        <ProgressBar\n          className={style.customProgressBar}\n          style={{backgroundColor: COLORS.cm_positive_500}}\n          displayInfo={false}\n          value={progress}\n          max={100}\n        />\n      </div>\n    </div>\n  );\n};\n\nCertificationCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nCertificationCard.propTypes = {\n  label: PropTypes.string,\n  goal: PropTypes.shape({\n    title: PropTypes.string,\n    condition: PropTypes.shape({\n      nbDone: PropTypes.number\n    })\n  }),\n  progress: PropTypes.number,\n  imgUrl: PropTypes.string,\n  onClick: PropTypes.func,\n  locales: PropTypes.shape({\n    conditionDescriptionProgress: PropTypes.string,\n    tag: PropTypes.string\n  })\n};\n\nexport default CertificationCard;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","PropTypes","COLORS","Provider","Tag","ProgressBar","style","CertificationCard","props","context","label","locales","conditionDescriptionProgress","tag","goal","title","progress","imgUrl","onClick","translate","isInprogress","progressLabel","progressTagType","progressIconProps","position","iconName","iconColor","backgroundColor","size","faSize","wrapperSize","customStyle","padding","certificationIcon","createElement","className","container","type","top","right","icon","imageSection","imageContainer","src","detailWrapper","titleWrapper","moduleCount","dangerouslySetInnerHTML","__html","customProgressBar","cm_positive_500","displayInfo","value","max","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","string","shape","condition","nbDone","number","func"],"sources":["../../../src/molecule/certification-card/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {COLORS} from '../../variables/colors';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport ProgressBar from '../progress-bar';\nimport style from './style.css';\n\nconst CertificationCard = (props, context) => {\n  const {\n    label,\n    locales: {conditionDescriptionProgress, tag},\n    goal: {title},\n    progress,\n    imgUrl,\n    onClick\n  } = props;\n  const {translate} = context;\n  const isInprogress = progress < 100;\n  const progressLabel = isInprogress ? translate('in_progress') : translate('completed');\n  const progressTagType = isInprogress ? 'progress' : 'success';\n\n  const progressIconProps = {\n    position: 'left',\n    iconName: isInprogress ? 'clock' : 'circle-check',\n    iconColor: isInprogress ? '#B87A00' : '#05944F',\n    backgroundColor: isInprogress ? '#FFEECC' : '#D6F5E5',\n    size: {\n      faSize: 10,\n      wrapperSize: 10\n    },\n    customStyle: {padding: 0}\n  };\n  const certificationIcon = {iconName: 'wreath-laurel'};\n  return (\n    <div className={style.container} data-name={`certification-card-${label}`} onClick={onClick}>\n      {progress > 0 ? (\n        <Tag\n          label={progressLabel}\n          type={progressTagType}\n          customStyle={{position: 'absolute', top: '12px', right: '12px'}}\n          icon={progressIconProps}\n        />\n      ) : null}\n      <div className={style.imageSection}>\n        <div className={style.imageContainer}>\n          <img src={imgUrl} />\n        </div>\n      </div>\n      <div className={style.detailWrapper}>\n        <div className={style.titleWrapper}>\n          <Tag label={tag} size=\"S\" icon={certificationIcon} />\n          <div className={style.title} data-name=\"certification-title\">\n            {title}\n          </div>\n          <div\n            className={style.moduleCount}\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: conditionDescriptionProgress}}\n          />\n        </div>\n        <ProgressBar\n          className={style.customProgressBar}\n          style={{backgroundColor: COLORS.cm_positive_500}}\n          displayInfo={false}\n          value={progress}\n          max={100}\n        />\n      </div>\n    </div>\n  );\n};\n\nCertificationCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nCertificationCard.propTypes = {\n  label: PropTypes.string,\n  goal: PropTypes.shape({\n    title: PropTypes.string,\n    condition: PropTypes.shape({\n      nbDone: PropTypes.number\n    })\n  }),\n  progress: PropTypes.number,\n  imgUrl: PropTypes.string,\n  onClick: PropTypes.func,\n  locales: PropTypes.shape({\n    conditionDescriptionProgress: PropTypes.string,\n    tag: PropTypes.string\n  })\n};\n\nexport default CertificationCard;\n"],"mappings":"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","ignoreList":[]}

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

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

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

@@ -33,7 +33,6 @@ const LearnerSkillCard = (props, context) => {
     color,
     name
   } = icon;
-  const questionsLocale = translate('skill_chart_side_panel_questions_to_review');
   const [badgeIconName, badgeLocale, tagTextColor, tagBackgroundColor] = focus ? ['bullseye-arrow', translate('skill_focus'), COLORS.purple_700, COLORS.purple_100] : ['shapes', translate('skill'), COLORS.neutral_500, COLORS.cm_grey_100];
   const headerBackgroundRef = useRef(null);
   const defaultBackground = useMemo(() => createGradientBackground(color, '93%', '100%'), [color]);
@@ -105,7 +104,14 @@ const LearnerSkillCard = (props, context) => {
     className: style.contentAndQuestionsWrapper
   }, /*#__PURE__*/React.createElement("div", {
     "data-name": "learner-skill-card-skill-content-number"
-  }, content, " ", translate('content')), questionsToReview ? /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: translate('content', {
+        count: content
+      })
+    }
+  }), questionsToReview ? /*#__PURE__*/React.createElement("div", {
     className: style.skillInformation,
     "data-name": "learner-skill-card-skill-questions-wrapper"
   }, /*#__PURE__*/React.createElement(FaIcon, {
@@ -118,7 +124,14 @@ const LearnerSkillCard = (props, context) => {
     }
   }), /*#__PURE__*/React.createElement("span", {
     "data-name": "learner-skill-card-questions-to-review"
-  }, questionsToReview), "\xA0", questionsLocale) : null)))), /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: translate('skill_chart_side_panel_questions_to_review', {
+        count: questionsToReview
+      })
+    }
+  })) : null)))), /*#__PURE__*/React.createElement("div", {
     className: style.progressInformations
   }, /*#__PURE__*/React.createElement(ProgressBar, {
     value: score,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useMemo","useRef","Provider","GetTranslateFromContext","ProgressBar","COLORS","createGradientBackground","FaIcon","propTypes","style","MAX_SCORE","updateBackgroundImage","ref","background","current","backgroundImage","LearnerSkillCard","props","context","ariaLabel","cardIndex","skillTitle","skillAriaLabel","focus","metrics","icon","onExploreClick","score","content","questionsToReview","translate","color","name","questionsLocale","badgeIconName","badgeLocale","tagTextColor","tagBackgroundColor","purple_700","purple_100","neutral_500","cm_grey_100","headerBackgroundRef","defaultBackground","focusBackground","handleMouseEnter","handleMouseLeave","createElement","onClick","className","learnerSkillCardContainer","onMouseEnter","onMouseLeave","iconHeaderWrapper","iconWrapper","iconName","iconColor","size","faSize","wrapperSize","borderRadius","gradientBackground","customStyle","border","learnerSkillCardContent","skillTitleWrapper","skillFocusBadge","backgroundColor","questionWrapper","contentAndQuestionsWrapper","skillInformation","cm_grey_400","progressInformations","value","displayInfo","max","progressWrapper","cm_positive_500","contextTypes","childContextTypes","process","env","NODE_ENV"],"sources":["../../../src/molecule/learner-skill-card/index.tsx"],"sourcesContent":["import React, {useCallback, useMemo, useRef} from 'react';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport ProgressBar from '../progress-bar';\nimport {COLORS} from '../../variables/colors';\nimport {createGradientBackground} from '../../util/get-background-gradient-color';\nimport FaIcon from '../../atom/icon';\nimport propTypes, {LearnerSkillCardProps} from './prop-types';\nimport style from './style.css';\n\nconst MAX_SCORE = 100;\n\nexport const updateBackgroundImage = (ref: React.RefObject<HTMLDivElement>, background: string) => {\n  if (ref.current) {\n    ref.current.style.backgroundImage = background;\n  }\n};\n\nconst LearnerSkillCard = (props: LearnerSkillCardProps, context: WebContextValues) => {\n  const {\n    'aria-label': ariaLabel,\n    cardIndex,\n    skillTitle,\n    skillAriaLabel,\n    focus,\n    metrics,\n    icon,\n    onExploreClick\n  } = props;\n  const {score, content, questionsToReview = 0} = metrics;\n  const translate = GetTranslateFromContext(context);\n  const {color, name} = icon;\n  const questionsLocale = translate('skill_chart_side_panel_questions_to_review') as string;\n  const [badgeIconName, badgeLocale, tagTextColor, tagBackgroundColor] = focus\n    ? ['bullseye-arrow', translate('skill_focus') as string, COLORS.purple_700, COLORS.purple_100]\n    : ['shapes', translate('skill') as string, COLORS.neutral_500, COLORS.cm_grey_100];\n  const headerBackgroundRef = useRef<HTMLDivElement | null>(null);\n  const defaultBackground = useMemo(() => createGradientBackground(color, '93%', '100%'), [color]);\n  const focusBackground = useMemo(() => createGradientBackground(color, '83%', '100%'), [color]);\n  const handleMouseEnter = useCallback(() => {\n    updateBackgroundImage(headerBackgroundRef, focusBackground);\n  }, [focusBackground]);\n  const handleMouseLeave = useCallback(() => {\n    updateBackgroundImage(headerBackgroundRef, defaultBackground);\n  }, [defaultBackground]);\n  return (\n    <div\n      data-testid={`learner-skill-card-wrapper-${cardIndex}`}\n      onClick={onExploreClick}\n      className={style.learnerSkillCardContainer}\n      aria-label={ariaLabel}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      <div\n        data-testid=\"learner-skill-card-icon-header-wrapper\"\n        ref={headerBackgroundRef}\n        className={style.iconHeaderWrapper}\n        style={{backgroundImage: defaultBackground, color: tagTextColor}}\n      >\n        <div className={style.iconWrapper} data-testid=\"learner-skill-card-icon-wrapper\">\n          <FaIcon\n            {...{\n              iconName: name,\n              iconColor: color,\n              size: {\n                faSize: 20,\n                wrapperSize: 44\n              },\n              borderRadius: '12px',\n              gradientBackground: true,\n              customStyle: {border: '4px solid white'}\n            }}\n          />\n        </div>\n      </div>\n      <div className={style.learnerSkillCardContent}>\n        <div className={style.skillTitleWrapper}>\n          <div\n            className={style.skillFocusBadge}\n            style={{\n              backgroundColor: tagBackgroundColor,\n              color: tagTextColor\n            }}\n          >\n            <FaIcon\n              {...{\n                iconName: badgeIconName,\n                backgroundColor: tagBackgroundColor,\n                size: {\n                  faSize: 10,\n                  wrapperSize: 16\n                }\n              }}\n            />\n            <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={skillAriaLabel || skillTitle}\n            >\n              {skillTitle}\n            </div>\n            <div className={style.contentAndQuestionsWrapper}>\n              <div data-name=\"learner-skill-card-skill-content-number\">\n                {content} {translate('content')}\n              </div>\n              {questionsToReview ? (\n                <div\n                  className={style.skillInformation}\n                  data-name=\"learner-skill-card-skill-questions-wrapper\"\n                >\n                  <FaIcon\n                    {...{\n                      iconName: 'circle',\n                      iconColor: COLORS.cm_grey_400,\n                      backgroundColor: 'transparent',\n                      size: {faSize: 4, wrapperSize: 0}\n                    }}\n                  />\n                  <span data-name=\"learner-skill-card-questions-to-review\">\n                    {questionsToReview}\n                  </span>\n                  &nbsp;{questionsLocale}\n                </div>\n              ) : null}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className={style.progressInformations}>\n        <ProgressBar\n          value={score}\n          displayInfo={false}\n          max={MAX_SCORE}\n          className={style.progressWrapper}\n          style={{backgroundColor: COLORS.cm_positive_500}}\n        />\n      </div>\n    </div>\n  );\n};\n\nLearnerSkillCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nLearnerSkillCard.propTypes = propTypes;\n\nexport default LearnerSkillCard;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useMemo","useRef","Provider","GetTranslateFromContext","ProgressBar","COLORS","createGradientBackground","FaIcon","propTypes","style","MAX_SCORE","updateBackgroundImage","ref","background","current","backgroundImage","LearnerSkillCard","props","context","ariaLabel","cardIndex","skillTitle","skillAriaLabel","focus","metrics","icon","onExploreClick","score","content","questionsToReview","translate","color","name","badgeIconName","badgeLocale","tagTextColor","tagBackgroundColor","purple_700","purple_100","neutral_500","cm_grey_100","headerBackgroundRef","defaultBackground","focusBackground","handleMouseEnter","handleMouseLeave","createElement","onClick","className","learnerSkillCardContainer","onMouseEnter","onMouseLeave","iconHeaderWrapper","iconWrapper","iconName","iconColor","size","faSize","wrapperSize","borderRadius","gradientBackground","customStyle","border","learnerSkillCardContent","skillTitleWrapper","skillFocusBadge","backgroundColor","questionWrapper","contentAndQuestionsWrapper","dangerouslySetInnerHTML","__html","count","skillInformation","cm_grey_400","progressInformations","value","displayInfo","max","progressWrapper","cm_positive_500","contextTypes","childContextTypes","process","env","NODE_ENV"],"sources":["../../../src/molecule/learner-skill-card/index.tsx"],"sourcesContent":["import React, {useCallback, useMemo, useRef} from 'react';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport ProgressBar from '../progress-bar';\nimport {COLORS} from '../../variables/colors';\nimport {createGradientBackground} from '../../util/get-background-gradient-color';\nimport FaIcon from '../../atom/icon';\nimport propTypes, {LearnerSkillCardProps} from './prop-types';\nimport style from './style.css';\n\nconst MAX_SCORE = 100;\n\nexport const updateBackgroundImage = (ref: React.RefObject<HTMLDivElement>, background: string) => {\n  if (ref.current) {\n    ref.current.style.backgroundImage = background;\n  }\n};\n\nconst LearnerSkillCard = (props: LearnerSkillCardProps, context: WebContextValues) => {\n  const {\n    'aria-label': ariaLabel,\n    cardIndex,\n    skillTitle,\n    skillAriaLabel,\n    focus,\n    metrics,\n    icon,\n    onExploreClick\n  } = props;\n  const {score, content, questionsToReview = 0} = metrics;\n  const translate = GetTranslateFromContext(context);\n  const {color, name} = icon;\n  const [badgeIconName, badgeLocale, tagTextColor, tagBackgroundColor] = focus\n    ? ['bullseye-arrow', translate('skill_focus') as string, COLORS.purple_700, COLORS.purple_100]\n    : ['shapes', translate('skill') as string, COLORS.neutral_500, COLORS.cm_grey_100];\n  const headerBackgroundRef = useRef<HTMLDivElement | null>(null);\n  const defaultBackground = useMemo(() => createGradientBackground(color, '93%', '100%'), [color]);\n  const focusBackground = useMemo(() => createGradientBackground(color, '83%', '100%'), [color]);\n  const handleMouseEnter = useCallback(() => {\n    updateBackgroundImage(headerBackgroundRef, focusBackground);\n  }, [focusBackground]);\n  const handleMouseLeave = useCallback(() => {\n    updateBackgroundImage(headerBackgroundRef, defaultBackground);\n  }, [defaultBackground]);\n  return (\n    <div\n      data-testid={`learner-skill-card-wrapper-${cardIndex}`}\n      onClick={onExploreClick}\n      className={style.learnerSkillCardContainer}\n      aria-label={ariaLabel}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      <div\n        data-testid=\"learner-skill-card-icon-header-wrapper\"\n        ref={headerBackgroundRef}\n        className={style.iconHeaderWrapper}\n        style={{backgroundImage: defaultBackground, color: tagTextColor}}\n      >\n        <div className={style.iconWrapper} data-testid=\"learner-skill-card-icon-wrapper\">\n          <FaIcon\n            {...{\n              iconName: name,\n              iconColor: color,\n              size: {\n                faSize: 20,\n                wrapperSize: 44\n              },\n              borderRadius: '12px',\n              gradientBackground: true,\n              customStyle: {border: '4px solid white'}\n            }}\n          />\n        </div>\n      </div>\n      <div className={style.learnerSkillCardContent}>\n        <div className={style.skillTitleWrapper}>\n          <div\n            className={style.skillFocusBadge}\n            style={{\n              backgroundColor: tagBackgroundColor,\n              color: tagTextColor\n            }}\n          >\n            <FaIcon\n              {...{\n                iconName: badgeIconName,\n                backgroundColor: tagBackgroundColor,\n                size: {\n                  faSize: 10,\n                  wrapperSize: 16\n                }\n              }}\n            />\n            <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={skillAriaLabel || skillTitle}\n            >\n              {skillTitle}\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={score}\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 = propTypes;\n\nexport default LearnerSkillCard;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/playlist-card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/playlist-card/index.js"],"names":[],"mappings":";AASA,qEAmCC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/playlist-card/index.js"],"names":[],"mappings":";AASA,qEAuCC"}

package/es/molecule/playlist-card/index.js

@@ -44,7 +44,12 @@ const PlaylistCard = (props, context) => {
     "data-name": "playlist-title"
   }, title), /*#__PURE__*/React.createElement("div", {
     className: style.courseCount
-  }, coursesLabel)), /*#__PURE__*/React.createElement(ProgressBar, {
+    // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: coursesLabel
+    }
+  })), /*#__PURE__*/React.createElement(ProgressBar, {
     className: style.customProgressBar,
     style: {
       backgroundColor: COLORS.cm_positive_500

package/es/molecule/playlist-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","COLORS","Provider","Tag","ProgressBar","PlaylistDetailCover","style","PlaylistCard","props","context","label","title","progress","coverImages","onClick","locales","playlistTag","coursesLabel","cover","createElement","className","images","icon","iconName","container","imageContainer","detailWrapper","titleWrapper","size","courseCount","customProgressBar","backgroundColor","cm_positive_500","displayInfo","value","max","contextTypes","translate","childContextTypes","propTypes","process","env","NODE_ENV","string","isRequired","number","func","shape","defaultProps"],"sources":["../../../src/molecule/playlist-card/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {COLORS} from '../../variables/colors';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport ProgressBar from '../progress-bar';\nimport PlaylistDetailCover from '../playlist-detail-cover';\nimport style from './style.css';\n\nconst PlaylistCard = (props, context) => {\n  const {\n    label,\n    title,\n    progress = 0,\n    coverImages,\n    onClick,\n    locales: {playlistTag, coursesLabel}\n  } = props;\n\n  const cover = coverImages ? (\n    <PlaylistDetailCover className={style.cover} images={coverImages} />\n  ) : null;\n  const icon = {iconName: 'lines-leaning'};\n  return (\n    <div className={style.container} data-name={`playlist-card-${label}`} onClick={onClick}>\n      <div className={style.imageContainer}>{cover}</div>\n      <div className={style.detailWrapper}>\n        <div className={style.titleWrapper}>\n          <Tag label={playlistTag} size=\"S\" icon={icon} />\n          <div className={style.title} data-name=\"playlist-title\">\n            {title}\n          </div>\n          <div className={style.courseCount}>{coursesLabel}</div>\n        </div>\n        <ProgressBar\n          className={style.customProgressBar}\n          style={{backgroundColor: COLORS.cm_positive_500}}\n          displayInfo={false}\n          value={progress}\n          max={100}\n        />\n      </div>\n    </div>\n  );\n};\n\nPlaylistCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nPlaylistCard.propTypes = {\n  label: PropTypes.string,\n  title: PropTypes.string.isRequired,\n  progress: PropTypes.number,\n  coverImages: PlaylistDetailCover.propTypes.images,\n  onClick: PropTypes.func,\n  locales: PropTypes.shape({\n    playlistTag: PropTypes.string,\n    coursesLabel: PropTypes.string\n  })\n};\n\nPlaylistCard.defaultProps = {\n  locales: {\n    playlistTag: 'Playlist',\n    coursesLabel: 'courses'\n  }\n};\n\nexport default PlaylistCard;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","PropTypes","COLORS","Provider","Tag","ProgressBar","PlaylistDetailCover","style","PlaylistCard","props","context","label","title","progress","coverImages","onClick","locales","playlistTag","coursesLabel","cover","createElement","className","images","icon","iconName","container","imageContainer","detailWrapper","titleWrapper","size","courseCount","dangerouslySetInnerHTML","__html","customProgressBar","backgroundColor","cm_positive_500","displayInfo","value","max","contextTypes","translate","childContextTypes","propTypes","process","env","NODE_ENV","string","isRequired","number","func","shape","defaultProps"],"sources":["../../../src/molecule/playlist-card/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {COLORS} from '../../variables/colors';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport ProgressBar from '../progress-bar';\nimport PlaylistDetailCover from '../playlist-detail-cover';\nimport style from './style.css';\n\nconst PlaylistCard = (props, context) => {\n  const {\n    label,\n    title,\n    progress = 0,\n    coverImages,\n    onClick,\n    locales: {playlistTag, coursesLabel}\n  } = props;\n\n  const cover = coverImages ? (\n    <PlaylistDetailCover className={style.cover} images={coverImages} />\n  ) : null;\n  const icon = {iconName: 'lines-leaning'};\n  return (\n    <div className={style.container} data-name={`playlist-card-${label}`} onClick={onClick}>\n      <div className={style.imageContainer}>{cover}</div>\n      <div className={style.detailWrapper}>\n        <div className={style.titleWrapper}>\n          <Tag label={playlistTag} size=\"S\" icon={icon} />\n          <div className={style.title} data-name=\"playlist-title\">\n            {title}\n          </div>\n          <div\n            className={style.courseCount}\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: coursesLabel}}\n          />\n        </div>\n        <ProgressBar\n          className={style.customProgressBar}\n          style={{backgroundColor: COLORS.cm_positive_500}}\n          displayInfo={false}\n          value={progress}\n          max={100}\n        />\n      </div>\n    </div>\n  );\n};\n\nPlaylistCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nPlaylistCard.propTypes = {\n  label: PropTypes.string,\n  title: PropTypes.string.isRequired,\n  progress: PropTypes.number,\n  coverImages: PlaylistDetailCover.propTypes.images,\n  onClick: PropTypes.func,\n  locales: PropTypes.shape({\n    playlistTag: PropTypes.string,\n    coursesLabel: PropTypes.string\n  })\n};\n\nPlaylistCard.defaultProps = {\n  locales: {\n    playlistTag: 'Playlist',\n    coursesLabel: 'courses'\n  }\n};\n\nexport default PlaylistCard;\n"],"mappings":"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","ignoreList":[]}

package/es/template/common/search-page/style.css

@@ -113,6 +113,7 @@
 
 .contentGrid {
   max-width: 1090px;
+  width: 100%;
   margin: auto 0 auto -8px;
   box-sizing: border-box;
 }

package/lib/molecule/certification-card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/certification-card/index.js"],"names":[],"mappings":";AAQA,0EA2DC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/certification-card/index.js"],"names":[],"mappings":";AAQA,0EA+DC"}

package/lib/molecule/certification-card/index.js

@@ -78,7 +78,12 @@ const CertificationCard = (props, context) => {
     "data-name": "certification-title"
   }, title), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.moduleCount
-  }, conditionDescriptionProgress)), /*#__PURE__*/_react.default.createElement(_progressBar.default, {
+    // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: conditionDescriptionProgress
+    }
+  })), /*#__PURE__*/_react.default.createElement(_progressBar.default, {
     className: _style.default.customProgressBar,
     style: {
       backgroundColor: _colors.COLORS.cm_positive_500

package/lib/molecule/certification-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_colors","_provider","_tag","_progressBar","_style","e","__esModule","default","CertificationCard","props","context","label","locales","conditionDescriptionProgress","tag","goal","title","progress","imgUrl","onClick","translate","isInprogress","progressLabel","progressTagType","progressIconProps","position","iconName","iconColor","backgroundColor","size","faSize","wrapperSize","customStyle","padding","certificationIcon","createElement","className","style","container","type","top","right","icon","imageSection","imageContainer","src","detailWrapper","titleWrapper","moduleCount","customProgressBar","COLORS","cm_positive_500","displayInfo","value","max","contextTypes","Provider","childContextTypes","propTypes","process","env","NODE_ENV","PropTypes","string","shape","condition","nbDone","number","func","_default","exports"],"sources":["../../../src/molecule/certification-card/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {COLORS} from '../../variables/colors';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport ProgressBar from '../progress-bar';\nimport style from './style.css';\n\nconst CertificationCard = (props, context) => {\n  const {\n    label,\n    locales: {conditionDescriptionProgress, tag},\n    goal: {title},\n    progress,\n    imgUrl,\n    onClick\n  } = props;\n  const {translate} = context;\n  const isInprogress = progress < 100;\n  const progressLabel = isInprogress ? translate('in_progress') : translate('completed');\n  const progressTagType = isInprogress ? 'progress' : 'success';\n\n  const progressIconProps = {\n    position: 'left',\n    iconName: isInprogress ? 'clock' : 'circle-check',\n    iconColor: isInprogress ? '#B87A00' : '#05944F',\n    backgroundColor: isInprogress ? '#FFEECC' : '#D6F5E5',\n    size: {\n      faSize: 10,\n      wrapperSize: 10\n    },\n    customStyle: {padding: 0}\n  };\n  const certificationIcon = {iconName: 'wreath-laurel'};\n  return (\n    <div className={style.container} data-name={`certification-card-${label}`} onClick={onClick}>\n      {progress > 0 ? (\n        <Tag\n          label={progressLabel}\n          type={progressTagType}\n          customStyle={{position: 'absolute', top: '12px', right: '12px'}}\n          icon={progressIconProps}\n        />\n      ) : null}\n      <div className={style.imageSection}>\n        <div className={style.imageContainer}>\n          <img src={imgUrl} />\n        </div>\n      </div>\n      <div className={style.detailWrapper}>\n        <div className={style.titleWrapper}>\n          <Tag label={tag} size=\"S\" icon={certificationIcon} />\n          <div className={style.title} data-name=\"certification-title\">\n            {title}\n          </div>\n          <div className={style.moduleCount}>{conditionDescriptionProgress}</div>\n        </div>\n        <ProgressBar\n          className={style.customProgressBar}\n          style={{backgroundColor: COLORS.cm_positive_500}}\n          displayInfo={false}\n          value={progress}\n          max={100}\n        />\n      </div>\n    </div>\n  );\n};\n\nCertificationCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nCertificationCard.propTypes = {\n  label: PropTypes.string,\n  goal: PropTypes.shape({\n    title: PropTypes.string,\n    condition: PropTypes.shape({\n      nbDone: PropTypes.number\n    })\n  }),\n  progress: PropTypes.number,\n  imgUrl: PropTypes.string,\n  onClick: PropTypes.func,\n  locales: PropTypes.shape({\n    conditionDescriptionProgress: PropTypes.string,\n    tag: PropTypes.string\n  })\n};\n\nexport default CertificationCard;\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,IAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,YAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,MAAA,GAAAP,sBAAA,CAAAC,OAAA;AAAgC,SAAAD,uBAAAQ,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,iBAAiB,GAAGA,CAACC,KAAK,EAAEC,OAAO,KAAK;EAC5C,MAAM;IACJC,KAAK;IACLC,OAAO,EAAE;MAACC,4BAA4B;MAAEC;IAAG,CAAC;IAC5CC,IAAI,EAAE;MAACC;IAAK,CAAC;IACbC,QAAQ;IACRC,MAAM;IACNC;EACF,CAAC,GAAGV,KAAK;EACT,MAAM;IAACW;EAAS,CAAC,GAAGV,OAAO;EAC3B,MAAMW,YAAY,GAAGJ,QAAQ,GAAG,GAAG;EACnC,MAAMK,aAAa,GAAGD,YAAY,GAAGD,SAAS,CAAC,aAAa,CAAC,GAAGA,SAAS,CAAC,WAAW,CAAC;EACtF,MAAMG,eAAe,GAAGF,YAAY,GAAG,UAAU,GAAG,SAAS;EAE7D,MAAMG,iBAAiB,GAAG;IACxBC,QAAQ,EAAE,MAAM;IAChBC,QAAQ,EAAEL,YAAY,GAAG,OAAO,GAAG,cAAc;IACjDM,SAAS,EAAEN,YAAY,GAAG,SAAS,GAAG,SAAS;IAC/CO,eAAe,EAAEP,YAAY,GAAG,SAAS,GAAG,SAAS;IACrDQ,IAAI,EAAE;MACJC,MAAM,EAAE,EAAE;MACVC,WAAW,EAAE;IACf,CAAC;IACDC,WAAW,EAAE;MAACC,OAAO,EAAE;IAAC;EAC1B,CAAC;EACD,MAAMC,iBAAiB,GAAG;IAACR,QAAQ,EAAE;EAAe,CAAC;EACrD,oBACE9B,MAAA,CAAAW,OAAA,CAAA4B,aAAA;IAAKC,SAAS,EAAEC,cAAK,CAACC,SAAU;IAAC,aAAW,sBAAsB3B,KAAK,EAAG;IAACQ,OAAO,EAAEA;EAAQ,GACzFF,QAAQ,GAAG,CAAC,gBACXrB,MAAA,CAAAW,OAAA,CAAA4B,aAAA,CAACjC,IAAA,CAAAK,OAAG;IACFI,KAAK,EAAEW,aAAc;IACrBiB,IAAI,EAAEhB,eAAgB;IACtBS,WAAW,EAAE;MAACP,QAAQ,EAAE,UAAU;MAAEe,GAAG,EAAE,MAAM;MAAEC,KAAK,EAAE;IAAM,CAAE;IAChEC,IAAI,EAAElB;EAAkB,CACzB,CAAC,GACA,IAAI,eACR5B,MAAA,CAAAW,OAAA,CAAA4B,aAAA;IAAKC,SAAS,EAAEC,cAAK,CAACM;EAAa,gBACjC/C,MAAA,CAAAW,OAAA,CAAA4B,aAAA;IAAKC,SAAS,EAAEC,cAAK,CAACO;EAAe,gBACnChD,MAAA,CAAAW,OAAA,CAAA4B,aAAA;IAAKU,GAAG,EAAE3B;EAAO,CAAE,CAChB,CACF,CAAC,eACNtB,MAAA,CAAAW,OAAA,CAAA4B,aAAA;IAAKC,SAAS,EAAEC,cAAK,CAACS;EAAc,gBAClClD,MAAA,CAAAW,OAAA,CAAA4B,aAAA;IAAKC,SAAS,EAAEC,cAAK,CAACU;EAAa,gBACjCnD,MAAA,CAAAW,OAAA,CAAA4B,aAAA,CAACjC,IAAA,CAAAK,OAAG;IAACI,KAAK,EAAEG,GAAI;IAACe,IAAI,EAAC,GAAG;IAACa,IAAI,EAAER;EAAkB,CAAE,CAAC,eACrDtC,MAAA,CAAAW,OAAA,CAAA4B,aAAA;IAAKC,SAAS,EAAEC,cAAK,CAACrB,KAAM;IAAC,aAAU;EAAqB,GACzDA,KACE,CAAC,eACNpB,MAAA,CAAAW,OAAA,CAAA4B,aAAA;IAAKC,SAAS,EAAEC,cAAK,CAACW;EAAY,GAAEnC,4BAAkC,CACnE,CAAC,eACNjB,MAAA,CAAAW,OAAA,CAAA4B,aAAA,CAAChC,YAAA,CAAAI,OAAW;IACV6B,SAAS,EAAEC,cAAK,CAACY,iBAAkB;IACnCZ,KAAK,EAAE;MAACT,eAAe,EAAEsB,cAAM,CAACC;IAAe,CAAE;IACjDC,WAAW,EAAE,KAAM;IACnBC,KAAK,EAAEpC,QAAS;IAChBqC,GAAG,EAAE;EAAI,CACV,CACE,CACF,CAAC;AAEV,CAAC;AAED9C,iBAAiB,CAAC+C,YAAY,GAAG;EAC/BnC,SAAS,EAAEoC,iBAAQ,CAACC,iBAAiB,CAACrC;AACxC,CAAC;AAEDZ,iBAAiB,CAACkD,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EAC5BlD,KAAK,EAAEmD,kBAAS,CAACC,MAAM;EACvBhD,IAAI,EAAE+C,kBAAS,CAACE,KAAK,CAAC;IACpBhD,KAAK,EAAE8C,kBAAS,CAACC,MAAM;IACvBE,SAAS,EAAEH,kBAAS,CAACE,KAAK,CAAC;MACzBE,MAAM,EAAEJ,kBAAS,CAACK;IACpB,CAAC;EACH,CAAC,CAAC;EACFlD,QAAQ,EAAE6C,kBAAS,CAACK,MAAM;EAC1BjD,MAAM,EAAE4C,kBAAS,CAACC,MAAM;EACxB5C,OAAO,EAAE2C,kBAAS,CAACM,IAAI;EACvBxD,OAAO,EAAEkD,kBAAS,CAACE,KAAK,CAAC;IACvBnD,4BAA4B,EAAEiD,kBAAS,CAACC,MAAM;IAC9CjD,GAAG,EAAEgD,kBAAS,CAACC;EACjB,CAAC;AACH,CAAC;AAAC,IAAAM,QAAA,GAAAC,OAAA,CAAA/D,OAAA,GAEaC,iBAAiB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_colors","_provider","_tag","_progressBar","_style","e","__esModule","default","CertificationCard","props","context","label","locales","conditionDescriptionProgress","tag","goal","title","progress","imgUrl","onClick","translate","isInprogress","progressLabel","progressTagType","progressIconProps","position","iconName","iconColor","backgroundColor","size","faSize","wrapperSize","customStyle","padding","certificationIcon","createElement","className","style","container","type","top","right","icon","imageSection","imageContainer","src","detailWrapper","titleWrapper","moduleCount","dangerouslySetInnerHTML","__html","customProgressBar","COLORS","cm_positive_500","displayInfo","value","max","contextTypes","Provider","childContextTypes","propTypes","process","env","NODE_ENV","PropTypes","string","shape","condition","nbDone","number","func","_default","exports"],"sources":["../../../src/molecule/certification-card/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {COLORS} from '../../variables/colors';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport ProgressBar from '../progress-bar';\nimport style from './style.css';\n\nconst CertificationCard = (props, context) => {\n  const {\n    label,\n    locales: {conditionDescriptionProgress, tag},\n    goal: {title},\n    progress,\n    imgUrl,\n    onClick\n  } = props;\n  const {translate} = context;\n  const isInprogress = progress < 100;\n  const progressLabel = isInprogress ? translate('in_progress') : translate('completed');\n  const progressTagType = isInprogress ? 'progress' : 'success';\n\n  const progressIconProps = {\n    position: 'left',\n    iconName: isInprogress ? 'clock' : 'circle-check',\n    iconColor: isInprogress ? '#B87A00' : '#05944F',\n    backgroundColor: isInprogress ? '#FFEECC' : '#D6F5E5',\n    size: {\n      faSize: 10,\n      wrapperSize: 10\n    },\n    customStyle: {padding: 0}\n  };\n  const certificationIcon = {iconName: 'wreath-laurel'};\n  return (\n    <div className={style.container} data-name={`certification-card-${label}`} onClick={onClick}>\n      {progress > 0 ? (\n        <Tag\n          label={progressLabel}\n          type={progressTagType}\n          customStyle={{position: 'absolute', top: '12px', right: '12px'}}\n          icon={progressIconProps}\n        />\n      ) : null}\n      <div className={style.imageSection}>\n        <div className={style.imageContainer}>\n          <img src={imgUrl} />\n        </div>\n      </div>\n      <div className={style.detailWrapper}>\n        <div className={style.titleWrapper}>\n          <Tag label={tag} size=\"S\" icon={certificationIcon} />\n          <div className={style.title} data-name=\"certification-title\">\n            {title}\n          </div>\n          <div\n            className={style.moduleCount}\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: conditionDescriptionProgress}}\n          />\n        </div>\n        <ProgressBar\n          className={style.customProgressBar}\n          style={{backgroundColor: COLORS.cm_positive_500}}\n          displayInfo={false}\n          value={progress}\n          max={100}\n        />\n      </div>\n    </div>\n  );\n};\n\nCertificationCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nCertificationCard.propTypes = {\n  label: PropTypes.string,\n  goal: PropTypes.shape({\n    title: PropTypes.string,\n    condition: PropTypes.shape({\n      nbDone: PropTypes.number\n    })\n  }),\n  progress: PropTypes.number,\n  imgUrl: PropTypes.string,\n  onClick: PropTypes.func,\n  locales: PropTypes.shape({\n    conditionDescriptionProgress: PropTypes.string,\n    tag: PropTypes.string\n  })\n};\n\nexport default CertificationCard;\n"],"mappings":"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","ignoreList":[]}

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

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

@@ -41,7 +41,6 @@ const LearnerSkillCard = (props, context) => {
     color,
     name
   } = icon;
-  const questionsLocale = translate('skill_chart_side_panel_questions_to_review');
   const [badgeIconName, badgeLocale, tagTextColor, tagBackgroundColor] = focus ? ['bullseye-arrow', translate('skill_focus'), _colors.COLORS.purple_700, _colors.COLORS.purple_100] : ['shapes', translate('skill'), _colors.COLORS.neutral_500, _colors.COLORS.cm_grey_100];
   const headerBackgroundRef = (0, _react.useRef)(null);
   const defaultBackground = (0, _react.useMemo)(() => (0, _getBackgroundGradientColor.createGradientBackground)(color, '93%', '100%'), [color]);
@@ -113,7 +112,14 @@ const LearnerSkillCard = (props, context) => {
     className: _style.default.contentAndQuestionsWrapper
   }, /*#__PURE__*/_react.default.createElement("div", {
     "data-name": "learner-skill-card-skill-content-number"
-  }, content, " ", translate('content')), questionsToReview ? /*#__PURE__*/_react.default.createElement("div", {
+    // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: translate('content', {
+        count: content
+      })
+    }
+  }), questionsToReview ? /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.skillInformation,
     "data-name": "learner-skill-card-skill-questions-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
@@ -126,7 +132,14 @@ const LearnerSkillCard = (props, context) => {
     }
   }), /*#__PURE__*/_react.default.createElement("span", {
     "data-name": "learner-skill-card-questions-to-review"
-  }, questionsToReview), "\xA0", questionsLocale) : null)))), /*#__PURE__*/_react.default.createElement("div", {
+    // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: translate('skill_chart_side_panel_questions_to_review', {
+        count: questionsToReview
+      })
+    }
+  })) : null)))), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.progressInformations
   }, /*#__PURE__*/_react.default.createElement(_progressBar.default, {
     value: score,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_provider","_progressBar","_interopRequireDefault","_colors","_getBackgroundGradientColor","_icon","_propTypes","_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","skillTitle","skillAriaLabel","focus","metrics","icon","onExploreClick","score","content","questionsToReview","translate","GetTranslateFromContext","color","name","questionsLocale","badgeIconName","badgeLocale","tagTextColor","tagBackgroundColor","COLORS","purple_700","purple_100","neutral_500","cm_grey_100","headerBackgroundRef","useRef","defaultBackground","useMemo","createGradientBackground","focusBackground","handleMouseEnter","useCallback","handleMouseLeave","createElement","onClick","className","learnerSkillCardContainer","onMouseEnter","onMouseLeave","iconHeaderWrapper","iconWrapper","iconName","iconColor","size","faSize","wrapperSize","borderRadius","gradientBackground","customStyle","border","learnerSkillCardContent","skillTitleWrapper","skillFocusBadge","backgroundColor","questionWrapper","contentAndQuestionsWrapper","skillInformation","cm_grey_400","progressInformations","value","displayInfo","max","progressWrapper","cm_positive_500","contextTypes","Provider","childContextTypes","propTypes","process","env","NODE_ENV","_default"],"sources":["../../../src/molecule/learner-skill-card/index.tsx"],"sourcesContent":["import React, {useCallback, useMemo, useRef} from 'react';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport ProgressBar from '../progress-bar';\nimport {COLORS} from '../../variables/colors';\nimport {createGradientBackground} from '../../util/get-background-gradient-color';\nimport FaIcon from '../../atom/icon';\nimport propTypes, {LearnerSkillCardProps} from './prop-types';\nimport style from './style.css';\n\nconst MAX_SCORE = 100;\n\nexport const updateBackgroundImage = (ref: React.RefObject<HTMLDivElement>, background: string) => {\n  if (ref.current) {\n    ref.current.style.backgroundImage = background;\n  }\n};\n\nconst LearnerSkillCard = (props: LearnerSkillCardProps, context: WebContextValues) => {\n  const {\n    'aria-label': ariaLabel,\n    cardIndex,\n    skillTitle,\n    skillAriaLabel,\n    focus,\n    metrics,\n    icon,\n    onExploreClick\n  } = props;\n  const {score, content, questionsToReview = 0} = metrics;\n  const translate = GetTranslateFromContext(context);\n  const {color, name} = icon;\n  const questionsLocale = translate('skill_chart_side_panel_questions_to_review') as string;\n  const [badgeIconName, badgeLocale, tagTextColor, tagBackgroundColor] = focus\n    ? ['bullseye-arrow', translate('skill_focus') as string, COLORS.purple_700, COLORS.purple_100]\n    : ['shapes', translate('skill') as string, COLORS.neutral_500, COLORS.cm_grey_100];\n  const headerBackgroundRef = useRef<HTMLDivElement | null>(null);\n  const defaultBackground = useMemo(() => createGradientBackground(color, '93%', '100%'), [color]);\n  const focusBackground = useMemo(() => createGradientBackground(color, '83%', '100%'), [color]);\n  const handleMouseEnter = useCallback(() => {\n    updateBackgroundImage(headerBackgroundRef, focusBackground);\n  }, [focusBackground]);\n  const handleMouseLeave = useCallback(() => {\n    updateBackgroundImage(headerBackgroundRef, defaultBackground);\n  }, [defaultBackground]);\n  return (\n    <div\n      data-testid={`learner-skill-card-wrapper-${cardIndex}`}\n      onClick={onExploreClick}\n      className={style.learnerSkillCardContainer}\n      aria-label={ariaLabel}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      <div\n        data-testid=\"learner-skill-card-icon-header-wrapper\"\n        ref={headerBackgroundRef}\n        className={style.iconHeaderWrapper}\n        style={{backgroundImage: defaultBackground, color: tagTextColor}}\n      >\n        <div className={style.iconWrapper} data-testid=\"learner-skill-card-icon-wrapper\">\n          <FaIcon\n            {...{\n              iconName: name,\n              iconColor: color,\n              size: {\n                faSize: 20,\n                wrapperSize: 44\n              },\n              borderRadius: '12px',\n              gradientBackground: true,\n              customStyle: {border: '4px solid white'}\n            }}\n          />\n        </div>\n      </div>\n      <div className={style.learnerSkillCardContent}>\n        <div className={style.skillTitleWrapper}>\n          <div\n            className={style.skillFocusBadge}\n            style={{\n              backgroundColor: tagBackgroundColor,\n              color: tagTextColor\n            }}\n          >\n            <FaIcon\n              {...{\n                iconName: badgeIconName,\n                backgroundColor: tagBackgroundColor,\n                size: {\n                  faSize: 10,\n                  wrapperSize: 16\n                }\n              }}\n            />\n            <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={skillAriaLabel || skillTitle}\n            >\n              {skillTitle}\n            </div>\n            <div className={style.contentAndQuestionsWrapper}>\n              <div data-name=\"learner-skill-card-skill-content-number\">\n                {content} {translate('content')}\n              </div>\n              {questionsToReview ? (\n                <div\n                  className={style.skillInformation}\n                  data-name=\"learner-skill-card-skill-questions-wrapper\"\n                >\n                  <FaIcon\n                    {...{\n                      iconName: 'circle',\n                      iconColor: COLORS.cm_grey_400,\n                      backgroundColor: 'transparent',\n                      size: {faSize: 4, wrapperSize: 0}\n                    }}\n                  />\n                  <span data-name=\"learner-skill-card-questions-to-review\">\n                    {questionsToReview}\n                  </span>\n                  &nbsp;{questionsLocale}\n                </div>\n              ) : null}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className={style.progressInformations}>\n        <ProgressBar\n          value={score}\n          displayInfo={false}\n          max={MAX_SCORE}\n          className={style.progressWrapper}\n          style={{backgroundColor: COLORS.cm_positive_500}}\n        />\n      </div>\n    </div>\n  );\n};\n\nLearnerSkillCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nLearnerSkillCard.propTypes = propTypes;\n\nexport default LearnerSkillCard;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_provider","_progressBar","_interopRequireDefault","_colors","_getBackgroundGradientColor","_icon","_propTypes","_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","skillTitle","skillAriaLabel","focus","metrics","icon","onExploreClick","score","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","onClick","className","learnerSkillCardContainer","onMouseEnter","onMouseLeave","iconHeaderWrapper","iconWrapper","iconName","iconColor","size","faSize","wrapperSize","borderRadius","gradientBackground","customStyle","border","learnerSkillCardContent","skillTitleWrapper","skillFocusBadge","backgroundColor","questionWrapper","contentAndQuestionsWrapper","dangerouslySetInnerHTML","__html","count","skillInformation","cm_grey_400","progressInformations","value","displayInfo","max","progressWrapper","cm_positive_500","contextTypes","Provider","childContextTypes","propTypes","process","env","NODE_ENV","_default"],"sources":["../../../src/molecule/learner-skill-card/index.tsx"],"sourcesContent":["import React, {useCallback, useMemo, useRef} from 'react';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport ProgressBar from '../progress-bar';\nimport {COLORS} from '../../variables/colors';\nimport {createGradientBackground} from '../../util/get-background-gradient-color';\nimport FaIcon from '../../atom/icon';\nimport propTypes, {LearnerSkillCardProps} from './prop-types';\nimport style from './style.css';\n\nconst MAX_SCORE = 100;\n\nexport const updateBackgroundImage = (ref: React.RefObject<HTMLDivElement>, background: string) => {\n  if (ref.current) {\n    ref.current.style.backgroundImage = background;\n  }\n};\n\nconst LearnerSkillCard = (props: LearnerSkillCardProps, context: WebContextValues) => {\n  const {\n    'aria-label': ariaLabel,\n    cardIndex,\n    skillTitle,\n    skillAriaLabel,\n    focus,\n    metrics,\n    icon,\n    onExploreClick\n  } = props;\n  const {score, content, questionsToReview = 0} = metrics;\n  const translate = GetTranslateFromContext(context);\n  const {color, name} = icon;\n  const [badgeIconName, badgeLocale, tagTextColor, tagBackgroundColor] = focus\n    ? ['bullseye-arrow', translate('skill_focus') as string, COLORS.purple_700, COLORS.purple_100]\n    : ['shapes', translate('skill') as string, COLORS.neutral_500, COLORS.cm_grey_100];\n  const headerBackgroundRef = useRef<HTMLDivElement | null>(null);\n  const defaultBackground = useMemo(() => createGradientBackground(color, '93%', '100%'), [color]);\n  const focusBackground = useMemo(() => createGradientBackground(color, '83%', '100%'), [color]);\n  const handleMouseEnter = useCallback(() => {\n    updateBackgroundImage(headerBackgroundRef, focusBackground);\n  }, [focusBackground]);\n  const handleMouseLeave = useCallback(() => {\n    updateBackgroundImage(headerBackgroundRef, defaultBackground);\n  }, [defaultBackground]);\n  return (\n    <div\n      data-testid={`learner-skill-card-wrapper-${cardIndex}`}\n      onClick={onExploreClick}\n      className={style.learnerSkillCardContainer}\n      aria-label={ariaLabel}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      <div\n        data-testid=\"learner-skill-card-icon-header-wrapper\"\n        ref={headerBackgroundRef}\n        className={style.iconHeaderWrapper}\n        style={{backgroundImage: defaultBackground, color: tagTextColor}}\n      >\n        <div className={style.iconWrapper} data-testid=\"learner-skill-card-icon-wrapper\">\n          <FaIcon\n            {...{\n              iconName: name,\n              iconColor: color,\n              size: {\n                faSize: 20,\n                wrapperSize: 44\n              },\n              borderRadius: '12px',\n              gradientBackground: true,\n              customStyle: {border: '4px solid white'}\n            }}\n          />\n        </div>\n      </div>\n      <div className={style.learnerSkillCardContent}>\n        <div className={style.skillTitleWrapper}>\n          <div\n            className={style.skillFocusBadge}\n            style={{\n              backgroundColor: tagBackgroundColor,\n              color: tagTextColor\n            }}\n          >\n            <FaIcon\n              {...{\n                iconName: badgeIconName,\n                backgroundColor: tagBackgroundColor,\n                size: {\n                  faSize: 10,\n                  wrapperSize: 16\n                }\n              }}\n            />\n            <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={skillAriaLabel || skillTitle}\n            >\n              {skillTitle}\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={score}\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 = propTypes;\n\nexport default LearnerSkillCard;\n"],"mappings":"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","ignoreList":[]}

package/lib/molecule/playlist-card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/playlist-card/index.js"],"names":[],"mappings":";AASA,qEAmCC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/playlist-card/index.js"],"names":[],"mappings":";AASA,qEAuCC"}

package/lib/molecule/playlist-card/index.js

@@ -49,7 +49,12 @@ const PlaylistCard = (props, context) => {
     "data-name": "playlist-title"
   }, title), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.courseCount
-  }, coursesLabel)), /*#__PURE__*/_react.default.createElement(_progressBar.default, {
+    // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: coursesLabel
+    }
+  })), /*#__PURE__*/_react.default.createElement(_progressBar.default, {
     className: _style.default.customProgressBar,
     style: {
       backgroundColor: _colors.COLORS.cm_positive_500

package/lib/molecule/playlist-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_colors","_provider","_tag","_progressBar","_playlistDetailCover","_style","e","__esModule","default","PlaylistCard","props","context","label","title","progress","coverImages","onClick","locales","playlistTag","coursesLabel","cover","createElement","className","style","images","icon","iconName","container","imageContainer","detailWrapper","titleWrapper","size","courseCount","customProgressBar","backgroundColor","COLORS","cm_positive_500","displayInfo","value","max","contextTypes","translate","Provider","childContextTypes","propTypes","process","env","NODE_ENV","PropTypes","string","isRequired","number","PlaylistDetailCover","func","shape","defaultProps","_default","exports"],"sources":["../../../src/molecule/playlist-card/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {COLORS} from '../../variables/colors';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport ProgressBar from '../progress-bar';\nimport PlaylistDetailCover from '../playlist-detail-cover';\nimport style from './style.css';\n\nconst PlaylistCard = (props, context) => {\n  const {\n    label,\n    title,\n    progress = 0,\n    coverImages,\n    onClick,\n    locales: {playlistTag, coursesLabel}\n  } = props;\n\n  const cover = coverImages ? (\n    <PlaylistDetailCover className={style.cover} images={coverImages} />\n  ) : null;\n  const icon = {iconName: 'lines-leaning'};\n  return (\n    <div className={style.container} data-name={`playlist-card-${label}`} onClick={onClick}>\n      <div className={style.imageContainer}>{cover}</div>\n      <div className={style.detailWrapper}>\n        <div className={style.titleWrapper}>\n          <Tag label={playlistTag} size=\"S\" icon={icon} />\n          <div className={style.title} data-name=\"playlist-title\">\n            {title}\n          </div>\n          <div className={style.courseCount}>{coursesLabel}</div>\n        </div>\n        <ProgressBar\n          className={style.customProgressBar}\n          style={{backgroundColor: COLORS.cm_positive_500}}\n          displayInfo={false}\n          value={progress}\n          max={100}\n        />\n      </div>\n    </div>\n  );\n};\n\nPlaylistCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nPlaylistCard.propTypes = {\n  label: PropTypes.string,\n  title: PropTypes.string.isRequired,\n  progress: PropTypes.number,\n  coverImages: PlaylistDetailCover.propTypes.images,\n  onClick: PropTypes.func,\n  locales: PropTypes.shape({\n    playlistTag: PropTypes.string,\n    coursesLabel: PropTypes.string\n  })\n};\n\nPlaylistCard.defaultProps = {\n  locales: {\n    playlistTag: 'Playlist',\n    coursesLabel: 'courses'\n  }\n};\n\nexport default PlaylistCard;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_colors","_provider","_tag","_progressBar","_playlistDetailCover","_style","e","__esModule","default","PlaylistCard","props","context","label","title","progress","coverImages","onClick","locales","playlistTag","coursesLabel","cover","createElement","className","style","images","icon","iconName","container","imageContainer","detailWrapper","titleWrapper","size","courseCount","dangerouslySetInnerHTML","__html","customProgressBar","backgroundColor","COLORS","cm_positive_500","displayInfo","value","max","contextTypes","translate","Provider","childContextTypes","propTypes","process","env","NODE_ENV","PropTypes","string","isRequired","number","PlaylistDetailCover","func","shape","defaultProps","_default","exports"],"sources":["../../../src/molecule/playlist-card/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {COLORS} from '../../variables/colors';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport ProgressBar from '../progress-bar';\nimport PlaylistDetailCover from '../playlist-detail-cover';\nimport style from './style.css';\n\nconst PlaylistCard = (props, context) => {\n  const {\n    label,\n    title,\n    progress = 0,\n    coverImages,\n    onClick,\n    locales: {playlistTag, coursesLabel}\n  } = props;\n\n  const cover = coverImages ? (\n    <PlaylistDetailCover className={style.cover} images={coverImages} />\n  ) : null;\n  const icon = {iconName: 'lines-leaning'};\n  return (\n    <div className={style.container} data-name={`playlist-card-${label}`} onClick={onClick}>\n      <div className={style.imageContainer}>{cover}</div>\n      <div className={style.detailWrapper}>\n        <div className={style.titleWrapper}>\n          <Tag label={playlistTag} size=\"S\" icon={icon} />\n          <div className={style.title} data-name=\"playlist-title\">\n            {title}\n          </div>\n          <div\n            className={style.courseCount}\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: coursesLabel}}\n          />\n        </div>\n        <ProgressBar\n          className={style.customProgressBar}\n          style={{backgroundColor: COLORS.cm_positive_500}}\n          displayInfo={false}\n          value={progress}\n          max={100}\n        />\n      </div>\n    </div>\n  );\n};\n\nPlaylistCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nPlaylistCard.propTypes = {\n  label: PropTypes.string,\n  title: PropTypes.string.isRequired,\n  progress: PropTypes.number,\n  coverImages: PlaylistDetailCover.propTypes.images,\n  onClick: PropTypes.func,\n  locales: PropTypes.shape({\n    playlistTag: PropTypes.string,\n    coursesLabel: PropTypes.string\n  })\n};\n\nPlaylistCard.defaultProps = {\n  locales: {\n    playlistTag: 'Playlist',\n    coursesLabel: 'courses'\n  }\n};\n\nexport default PlaylistCard;\n"],"mappings":"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","ignoreList":[]}

package/lib/template/common/search-page/style.css

@@ -113,6 +113,7 @@
 
 .contentGrid {
   max-width: 1090px;
+  width: 100%;
   margin: auto 0 auto -8px;
   box-sizing: border-box;
 }

package/locales/bs/global.json

@@ -42,7 +42,8 @@
   "cookies_title": "Kako koristimo kolačiće:",
   "Create a new cohort": "Kreiraj novu kohortu",
   "courses": "Kursevi",
-  "content": "sadržaj",
+  "content": "<b>{{count}}</b> sadržaj",
+  "content_plural": "<b>{{count}}</b> sadržaja",
   "courses_completed": "Kursevi završeni",
   "continue_learning": "Nastavite sa učenjem",
   "learning_priority_modal_title": "Novi prioritet učenja",
@@ -149,7 +150,8 @@
   "skill_focus_footer_description": "Odaberite barem {{skillNumber}} više vještina",
   "skill_focus_footer_error_description": "Poništite odabir barem {{skillNumber}} više vještina",
   "skill_chart_side_panel_content_completed": "Sadržaj je završen",
-  "skill_chart_side_panel_questions_to_review": "Pitanja za pregled",
+  "skill_chart_side_panel_questions_to_review": "<b>{{count}}</b> pitanje za pregled",
+  "skill_chart_side_panel_questions_to_review_plural": "<b>{{count}}</b> pitanja za pregled",
   "skill_chart_side_panel_learning_hours": "Vrijeme učenja",
   "skill_focused_chip_tooltip": "Ova vještina je fokusirana",
   "selected": "odabrano",
@@ -196,7 +198,7 @@
   "questions": "Pitanja",
   "skill_scope_specifier": "na <b>{{focusedSkill}}</b>",
   "focused_skills": "fokusirane vještine",
-  "custom":{
+  "custom": {
     "digitlearning": {
       "comment_aria_label": "Ocijenite ovaj kurs",
       "diploma": "Validirani put"
@@ -218,7 +220,7 @@
       "diploma": "Certificate"
     },
     "mylcl-learning": {
-       "diploma": "learning path"
+      "diploma": "learning path"
     },
     "who": {
       "badge": "Dodatne informacije o vašem certifikatu"

package/locales/cs/global.json

@@ -42,7 +42,8 @@
   "cookies_title": "Jak využíváme soubory cookie:",
   "Create a new cohort": "Create a new cohort",
   "courses": "Kurzy",
-  "content": "obsah",
+  "content": "<b>{{count}}</b> obsah",
+  "content_plural": "<b>{{count}}</b> obsahy",
   "courses_completed": "Dokončené kurzy",
   "continue_learning": "Pokračujte v učení",
   "learning_priority_modal_title": "Nová priorita učení",
@@ -149,7 +150,8 @@
   "skill_focus_footer_description": "Vyberte alespoň {{skillNumber}} dalších dovedností",
   "skill_focus_footer_error_description": "Zrušte výběr alespoň {{skillNumber}} dalších dovedností",
   "skill_chart_side_panel_content_completed": "Obsah dokončen",
-  "skill_chart_side_panel_questions_to_review": "Otázky ke kontrole",
+  "skill_chart_side_panel_questions_to_review": "<b>{{count}}</b> otázka k revizi",
+  "skill_chart_side_panel_questions_to_review_plural": "<b>{{count}}</b> otázky k revizi",
   "skill_chart_side_panel_learning_hours": "Čas na učení",
   "skill_focused_chip_tooltip": "Tato dovednost je zaměřena",
   "selected": "vybráno",
@@ -196,7 +198,7 @@
   "questions": "Otázky",
   "skill_scope_specifier": " na <b>{{focusedSkill}}</b>",
   "focused_skills": "zaměřených dovedností",
-  "custom":{
+  "custom": {
     "digitlearning": {
       "comment_aria_label": "Ohodnoťte tento kurz",
       "diploma": "Ověřená cesta"
@@ -218,7 +220,7 @@
       "diploma": "Certifikát"
     },
     "mylcl-learning": {
-       "diploma": "learning path"
+      "diploma": "learning path"
     },
     "who": {
       "badge": "Další informace o vašem certifikátu"

package/locales/de/global.json

@@ -42,7 +42,8 @@
   "cookies_title": "Wie wir Cookies verwenden:",
   "Create a new cohort": "Create a new cohort",
   "courses": "Kurse",
-  "content": "Inhalt",
+  "content": "<b>{{count}}</b> Inhalt",
+  "content_plural": "<b>{{count}}</b> Inhalte",
   "courses_completed": "Kurse abgeschlossen",
   "continue_learning": "Weiter lernen",
   "learning_priority_modal_title": "Neue Lernpriorität",
@@ -149,7 +150,8 @@
   "skill_focus_footer_description": "Wählen Sie mindestens {{skillNumber}} weitere Fähigkeiten aus.",
   "skill_focus_footer_error_description": "Heben Sie die Auswahl von mindestens {{SkillNumber}} weiteren Skills auf.",
   "skill_chart_side_panel_content_completed": "Inhalt abgeschlossen",
-  "skill_chart_side_panel_questions_to_review": "Zu überprüfende Fragen",
+  "skill_chart_side_panel_questions_to_review": "<b>{{count}}</b> Frage zur Überprüfung",
+  "skill_chart_side_panel_questions_to_review_plural": "<b>{{count}}</b> Fragen zur Überprüfung",
   "skill_chart_side_panel_learning_hours": "Lernzeit",
   "skill_focused_chip_tooltip": "Diese Fähigkeit konzentriert sich",
   "selected": "ausgewählt",
@@ -196,7 +198,7 @@
   "questions": "Fragen",
   "skill_scope_specifier": "auf <b>{{focusedSkill}}</b>\n",
   "focused_skills": "fokussierte Fähigkeiten\n",
-  "custom":{
+  "custom": {
     "digitlearning": {
       "comment_aria_label": "Bewerten Sie diesen Kurs",
       "diploma": "Validierter Weg"
@@ -218,7 +220,7 @@
       "diploma": "Zertifikat"
     },
     "mylcl-learning": {
-       "diploma": "learning path"
+      "diploma": "learning path"
     },
     "who": {
       "badge": "Die zusätzlichen Informationen zu Ihrem Zertifikat"