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

package/es/template/skill-detail/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","useRef","useEffect","PropTypes","classnames","Markdown","convert","Provider","ButtonLinkIcon","Icon","IconPreview","ButtonLink","CardsGrid","COLORS","SelectOptionPropTypes","AllCourses","style","ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","_get","createElement","label","type","customStyle","width","borderRadius","backgroundColor","hoverBackgroundColor","hoverColor","white","icon","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","bool","func","SkillDetail","title","iconColor","iconName","skillRef","description","metrics","focused","availableForReview","skillIncludedCourses","filters","onBackClick","onReviewClick","onContinueLearningClick","search","bannerMicrolearning","score","questionsToReview","totalContents","bannerMicrolearningAction","action","descriptionRef","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","ref","className","truncate","ProgressBar","progressBarColor","cm_positive_500","inlineProgressStyle","progressBarRow","progressBarWrapper","progress","role","progressInformationNumber","toFixed","hasDescription","Boolean","trim","length","backgroundContainer","container","topSection","_isNil","backButton","tooltipPlacement","mainSection","leftSide","gap","padding","rightSide","skillFocusBadge","purple_100","faSize","wrapperSize","skillBadge","cm_grey_100","Fragment","showMoreWrapper","skillInformation","progressContainer","noDescriptionSpacing","ctaWrapper","disabled","cm_grey_700","content","oldSwitchValue","undefined","string","isRequired","shape","number","onChange","options","arrayOf","oldValue"],"sources":["../../../src/template/skill-detail/index.tsx"],"sourcesContent":["import React, {useCallback, useState, useRef, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {get, isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport {convert} from 'css-color-function';\nimport Provider from '../../atom/provider';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport IconPreview from '../../molecule/icon-preview';\nimport ButtonLink from '../../atom/button-link';\nimport CardsGrid, {CardsGridProps} from '../../organism/cards-grid';\nimport {COLORS} from '../../variables/colors';\nimport {SelectOptionPropTypes} from '../../atom/select';\nimport AllCourses from './all-courses';\nimport style from './style.css';\n\ninterface ContinueLearningButtonProps {\n  ongoingCoursesAvailable?: boolean;\n  onClick?: () => void;\n}\ninterface ProviderContext {\n  skin: {\n    common: {\n      primary: string;\n      secondary: string;\n    };\n  };\n  translate: (key: string) => string;\n}\n\nexport const ContinueLearningButton = (\n  props: ContinueLearningButtonProps,\n  context: ProviderContext\n) => {\n  const {ongoingCoursesAvailable, onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <ButtonLink\n      label={ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')}\n      type=\"primary\"\n      customStyle={{\n        width: 'fit-content',\n        borderRadius: '12px',\n        backgroundColor: primarySkinColor\n      }}\n      hoverBackgroundColor={convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)}\n      hoverColor={COLORS.white}\n      icon={{\n        position: 'left',\n        faIcon: {\n          name: 'play',\n          color: COLORS.white,\n          size: 14\n        }\n      }}\n      onClick={onClick}\n    />\n  );\n};\n\nContinueLearningButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nContinueLearningButton.propTypes = {\n  ongoingCoursesAvailable: PropTypes.bool,\n  onClick: PropTypes.func\n};\n\ninterface Metrics {\n  score?: number;\n  questionsToReview?: number;\n  totalContents?: number;\n}\n\ntype BannerMicrolearning =\n  | Record<string, never>\n  | {\n      action: () => void;\n      oldSwitchValue: boolean;\n    };\ninterface SkillDetailProps {\n  title: string;\n  icon: {name: string; color: string};\n  skillRef: string;\n  description?: string;\n  metrics?: Metrics;\n  focused?: boolean;\n  availableForReview?: boolean;\n  ongoingCoursesAvailable?: boolean;\n  skillIncludedCourses: CardsGridProps;\n  filters: {\n    onChange?: () => void;\n    options?: unknown[];\n  };\n  onBackClick?: () => void;\n  onReviewClick?: () => void;\n  onContinueLearningClick?: () => void;\n  search: {\n    oldValue: string;\n    onChange: () => void;\n  };\n  bannerMicrolearning?: BannerMicrolearning;\n}\nconst SkillDetail = (props: SkillDetailProps, context: ProviderContext) => {\n  const {\n    title,\n    icon: {color: iconColor, name: iconName},\n    skillRef,\n    description,\n    metrics = {},\n    focused,\n    availableForReview,\n    ongoingCoursesAvailable,\n    skillIncludedCourses,\n    filters,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick,\n    search,\n    bannerMicrolearning\n  } = props;\n\n  const {score = 0, questionsToReview = 0, totalContents = 0} = metrics;\n  const {translate} = context;\n  const bannerMicrolearningAction = bannerMicrolearning?.action;\n  const descriptionRef = useRef(null);\n  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => {\n    setShowMore(!showMore);\n  }, [showMore]);\n\n  useEffect(() => {\n    if (descriptionRef.current) {\n      const {clientHeight = 0, scrollHeight = 0} = descriptionRef.current;\n      setIsDescriptionTruncated(scrollHeight > clientHeight);\n    }\n  }, [description]);\n\n  const Description = useCallback(() => {\n    return (\n      <div\n        ref={descriptionRef}\n        data-testid=\"skill-description\"\n        className={classnames(style.description, !showMore && style.truncate)}\n      >\n        {description ? <Markdown>{description}</Markdown> : null}\n      </div>\n    );\n  }, [showMore, description]);\n\n  const ProgressBar = useCallback(() => {\n    if (typeof score !== 'number') return null;\n\n    const progressBarColor = COLORS.cm_positive_500;\n    const inlineProgressStyle = {\n      backgroundColor: progressBarColor,\n      width: `${score}%`\n    };\n\n    return (\n      <div className={style.progressBarRow}>\n        <div className={style.progressBarWrapper}>\n          <div\n            data-name=\"progress\"\n            className={style.progress}\n            style={inlineProgressStyle}\n            role=\"progressbar\"\n            aria-valuenow={score}\n            aria-valuemin={0}\n            aria-valuemax={100}\n          />\n        </div>\n        <span className={style.progressInformationNumber}>{score.toFixed(1)}%</span>\n      </div>\n    );\n  }, [score]);\n  const hasDescription = Boolean(description && description.trim().length > 0);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={skillRef}>\n        {/* Top section for the back arrow (optional) */}\n        <div className={style.topSection}>\n          {!isNil(onBackClick) ? (\n            <ButtonLinkIcon\n              faIcon=\"arrow-left\"\n              data-name=\"back-button\"\n              aria-label={translate('back')}\n              onClick={onBackClick}\n              className={style.backButton}\n              tooltipPlacement=\"right\"\n            />\n          ) : null}\n        </div>\n\n        {/* Main section: icon on the left, skill info on the right */}\n        <div className={style.mainSection}>\n          <div className={style.leftSide}>\n            <IconPreview\n              icon={{\n                name: iconName,\n                color: iconColor\n              }}\n              title={title}\n              customStyle={{gap: 24, padding: '50px 49px 50px 50px'}}\n            />\n          </div>\n          <div className={style.rightSide}>\n            {focused ? (\n              <div className={style.skillFocusBadge}>\n                <Icon\n                  iconName=\"bullseye-arrow\"\n                  backgroundColor={COLORS.purple_100}\n                  size={{faSize: 10, wrapperSize: 16}}\n                />\n                {translate('skill_focus')}\n              </div>\n            ) : (\n              <div className={style.skillBadge}>\n                <Icon\n                  iconName=\"shapes\"\n                  backgroundColor={COLORS.cm_grey_100}\n                  size={{faSize: 10, wrapperSize: 16}}\n                />\n                {translate('skill')}\n              </div>\n            )}\n\n            <h2 className={style.title}>{title}</h2>\n\n            {description && (\n              <>\n                <Description />\n                {isDescriptionTruncated ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {showMore ? translate('Show less') : translate('Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{faSize: 14, wrapperSize: 14}}\n                      customStyle={{padding: '8px'}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            )}\n\n            {questionsToReview > 0 ? (\n              <div className={style.skillInformation}>\n                <span>{questionsToReview}</span>\n                &nbsp;{translate('skill_chart_side_panel_questions_to_review')}\n              </div>\n            ) : null}\n\n            <div\n              className={classnames(\n                style.progressContainer,\n                !hasDescription && style.noDescriptionSpacing\n              )}\n            >\n              <ProgressBar />\n            </div>\n\n            <div className={style.ctaWrapper}>\n              <ContinueLearningButton\n                ongoingCoursesAvailable={ongoingCoursesAvailable}\n                onClick={onContinueLearningClick}\n              />\n              <ButtonLink\n                type=\"secondary\"\n                label={translate('review_this_skill')}\n                disabled={!availableForReview}\n                onClick={onReviewClick}\n                icon={{\n                  position: 'left',\n                  faIcon: {\n                    name: 'rotate-right',\n                    color: COLORS.cm_grey_700,\n                    size: 14\n                  }\n                }}\n                customStyle={{borderRadius: '12px', width: 'fit-content'}}\n              />\n            </div>\n          </div>\n        </div>\n\n        {/* Courses section below */}\n        <AllCourses\n          content={skillIncludedCourses}\n          filters={filters}\n          totalContents={totalContents}\n          bannerMicrolearning={\n            bannerMicrolearning && bannerMicrolearningAction\n              ? {\n                  type: 'skill',\n                  action: bannerMicrolearningAction,\n                  oldSwitchValue: bannerMicrolearning.oldSwitchValue\n                }\n              : undefined\n          }\n          search={search}\n        />\n      </div>\n    </div>\n  );\n};\n\nSkillDetail.contextTypes = {\n  translate: Provider.childContextTypes.translate,\n  skin: Provider.childContextTypes.skin\n};\n\nSkillDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  icon: PropTypes.shape({\n    name: PropTypes.string,\n    color: PropTypes.string\n  }).isRequired,\n  skillRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  metrics: PropTypes.shape({\n    score: PropTypes.number,\n    questionsToReview: PropTypes.number,\n    totalContents: PropTypes.number\n  }),\n  focused: PropTypes.bool,\n  availableForReview: PropTypes.bool,\n  ongoingCoursesAvailable: PropTypes.bool,\n  skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  onBackClick: PropTypes.func,\n  onReviewClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func,\n  search: PropTypes.shape({\n    oldValue: PropTypes.string,\n    onChange: PropTypes.func\n  }),\n  bannerMicrolearning: PropTypes.shape({\n    action: PropTypes.func,\n    oldSwitchValue: PropTypes.bool\n  })\n};\n\nexport default SkillDetail;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","useRef","useEffect","PropTypes","classnames","Markdown","convert","Provider","ButtonLinkIcon","Icon","IconPreview","ButtonLink","CardsGrid","COLORS","SelectOptionPropTypes","AllCourses","style","ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","_get","createElement","label","type","customStyle","width","borderRadius","backgroundColor","hoverBackgroundColor","hoverColor","white","icon","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","bool","func","SkillDetail","title","iconColor","iconName","skillRef","description","metrics","focused","availableForReview","skillIncludedCourses","filters","onBackClick","onReviewClick","onContinueLearningClick","search","bannerMicrolearning","score","questionsToReview","totalContents","bannerMicrolearningAction","action","descriptionRef","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","ref","className","truncate","ProgressBar","progressBarColor","cm_positive_500","inlineProgressStyle","progressBarRow","progressBarWrapper","progress","role","progressInformationNumber","toFixed","hasDescription","Boolean","trim","length","backgroundContainer","container","topSection","_isNil","backButton","tooltipPlacement","mainSection","leftSide","gap","padding","rightSide","skillFocusBadge","purple_100","faSize","wrapperSize","skillBadge","cm_grey_100","Fragment","showMoreWrapper","skillInformation","count","progressContainer","noDescriptionSpacing","ctaWrapper","disabled","cm_grey_700","content","oldSwitchValue","undefined","string","isRequired","shape","number","onChange","options","arrayOf","oldValue"],"sources":["../../../src/template/skill-detail/index.tsx"],"sourcesContent":["import React, {useCallback, useState, useRef, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {get, isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport {convert} from 'css-color-function';\nimport Provider from '../../atom/provider';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport IconPreview from '../../molecule/icon-preview';\nimport ButtonLink from '../../atom/button-link';\nimport CardsGrid, {CardsGridProps} from '../../organism/cards-grid';\nimport {COLORS} from '../../variables/colors';\nimport {SelectOptionPropTypes} from '../../atom/select';\nimport AllCourses from './all-courses';\nimport style from './style.css';\n\ninterface ContinueLearningButtonProps {\n  ongoingCoursesAvailable?: boolean;\n  onClick?: () => void;\n}\ninterface ProviderContext {\n  skin: {\n    common: {\n      primary: string;\n      secondary: string;\n    };\n  };\n  translate: (key: string, options?: any) => string;\n}\n\nexport const ContinueLearningButton = (\n  props: ContinueLearningButtonProps,\n  context: ProviderContext\n) => {\n  const {ongoingCoursesAvailable, onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <ButtonLink\n      label={ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')}\n      type=\"primary\"\n      customStyle={{\n        width: 'fit-content',\n        borderRadius: '12px',\n        backgroundColor: primarySkinColor\n      }}\n      hoverBackgroundColor={convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)}\n      hoverColor={COLORS.white}\n      icon={{\n        position: 'left',\n        faIcon: {\n          name: 'play',\n          color: COLORS.white,\n          size: 14\n        }\n      }}\n      onClick={onClick}\n    />\n  );\n};\n\nContinueLearningButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nContinueLearningButton.propTypes = {\n  ongoingCoursesAvailable: PropTypes.bool,\n  onClick: PropTypes.func\n};\n\ninterface Metrics {\n  score?: number;\n  questionsToReview?: number;\n  totalContents?: number;\n}\n\ntype BannerMicrolearning =\n  | Record<string, never>\n  | {\n      action: () => void;\n      oldSwitchValue: boolean;\n    };\ninterface SkillDetailProps {\n  title: string;\n  icon: {name: string; color: string};\n  skillRef: string;\n  description?: string;\n  metrics?: Metrics;\n  focused?: boolean;\n  availableForReview?: boolean;\n  ongoingCoursesAvailable?: boolean;\n  skillIncludedCourses: CardsGridProps;\n  filters: {\n    onChange?: () => void;\n    options?: unknown[];\n  };\n  onBackClick?: () => void;\n  onReviewClick?: () => void;\n  onContinueLearningClick?: () => void;\n  search: {\n    oldValue: string;\n    onChange: () => void;\n  };\n  bannerMicrolearning?: BannerMicrolearning;\n}\nconst SkillDetail = (props: SkillDetailProps, context: ProviderContext) => {\n  const {\n    title,\n    icon: {color: iconColor, name: iconName},\n    skillRef,\n    description,\n    metrics = {},\n    focused,\n    availableForReview,\n    ongoingCoursesAvailable,\n    skillIncludedCourses,\n    filters,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick,\n    search,\n    bannerMicrolearning\n  } = props;\n\n  const {score = 0, questionsToReview = 0, totalContents = 0} = metrics;\n  const {translate} = context;\n  const bannerMicrolearningAction = bannerMicrolearning?.action;\n  const descriptionRef = useRef(null);\n  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => {\n    setShowMore(!showMore);\n  }, [showMore]);\n\n  useEffect(() => {\n    if (descriptionRef.current) {\n      const {clientHeight = 0, scrollHeight = 0} = descriptionRef.current;\n      setIsDescriptionTruncated(scrollHeight > clientHeight);\n    }\n  }, [description]);\n\n  const Description = useCallback(() => {\n    return (\n      <div\n        ref={descriptionRef}\n        data-testid=\"skill-description\"\n        className={classnames(style.description, !showMore && style.truncate)}\n      >\n        {description ? <Markdown>{description}</Markdown> : null}\n      </div>\n    );\n  }, [showMore, description]);\n\n  const ProgressBar = useCallback(() => {\n    if (typeof score !== 'number') return null;\n\n    const progressBarColor = COLORS.cm_positive_500;\n    const inlineProgressStyle = {\n      backgroundColor: progressBarColor,\n      width: `${score}%`\n    };\n\n    return (\n      <div className={style.progressBarRow}>\n        <div className={style.progressBarWrapper}>\n          <div\n            data-name=\"progress\"\n            className={style.progress}\n            style={inlineProgressStyle}\n            role=\"progressbar\"\n            aria-valuenow={score}\n            aria-valuemin={0}\n            aria-valuemax={100}\n          />\n        </div>\n        <span className={style.progressInformationNumber}>{score.toFixed(1)}%</span>\n      </div>\n    );\n  }, [score]);\n  const hasDescription = Boolean(description && description.trim().length > 0);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={skillRef}>\n        {/* Top section for the back arrow (optional) */}\n        <div className={style.topSection}>\n          {!isNil(onBackClick) ? (\n            <ButtonLinkIcon\n              faIcon=\"arrow-left\"\n              data-name=\"back-button\"\n              aria-label={translate('back')}\n              onClick={onBackClick}\n              className={style.backButton}\n              tooltipPlacement=\"right\"\n            />\n          ) : null}\n        </div>\n\n        {/* Main section: icon on the left, skill info on the right */}\n        <div className={style.mainSection}>\n          <div className={style.leftSide}>\n            <IconPreview\n              icon={{\n                name: iconName,\n                color: iconColor\n              }}\n              title={title}\n              customStyle={{gap: 24, padding: '50px 49px 50px 50px'}}\n            />\n          </div>\n          <div className={style.rightSide}>\n            {focused ? (\n              <div className={style.skillFocusBadge}>\n                <Icon\n                  iconName=\"bullseye-arrow\"\n                  backgroundColor={COLORS.purple_100}\n                  size={{faSize: 10, wrapperSize: 16}}\n                />\n                {translate('skill_focus')}\n              </div>\n            ) : (\n              <div className={style.skillBadge}>\n                <Icon\n                  iconName=\"shapes\"\n                  backgroundColor={COLORS.cm_grey_100}\n                  size={{faSize: 10, wrapperSize: 16}}\n                />\n                {translate('skill')}\n              </div>\n            )}\n\n            <h2 className={style.title}>{title}</h2>\n\n            {description && (\n              <>\n                <Description />\n                {isDescriptionTruncated ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {showMore ? translate('Show less') : translate('Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{faSize: 14, wrapperSize: 14}}\n                      customStyle={{padding: '8px'}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            )}\n\n            {questionsToReview > 0 ? (\n              <div className={style.skillInformation}>\n                <span>\n                  {translate('skill_chart_side_panel_questions_to_review', {\n                    count: questionsToReview\n                  })}\n                </span>\n              </div>\n            ) : null}\n\n            <div\n              className={classnames(\n                style.progressContainer,\n                !hasDescription && style.noDescriptionSpacing\n              )}\n            >\n              <ProgressBar />\n            </div>\n\n            <div className={style.ctaWrapper}>\n              <ContinueLearningButton\n                ongoingCoursesAvailable={ongoingCoursesAvailable}\n                onClick={onContinueLearningClick}\n              />\n              <ButtonLink\n                type=\"secondary\"\n                label={translate('review_this_skill')}\n                disabled={!availableForReview}\n                onClick={onReviewClick}\n                icon={{\n                  position: 'left',\n                  faIcon: {\n                    name: 'rotate-right',\n                    color: COLORS.cm_grey_700,\n                    size: 14\n                  }\n                }}\n                customStyle={{borderRadius: '12px', width: 'fit-content'}}\n              />\n            </div>\n          </div>\n        </div>\n\n        {/* Courses section below */}\n        <AllCourses\n          content={skillIncludedCourses}\n          filters={filters}\n          totalContents={totalContents}\n          bannerMicrolearning={\n            bannerMicrolearning && bannerMicrolearningAction\n              ? {\n                  type: 'skill',\n                  action: bannerMicrolearningAction,\n                  oldSwitchValue: bannerMicrolearning.oldSwitchValue\n                }\n              : undefined\n          }\n          search={search}\n        />\n      </div>\n    </div>\n  );\n};\n\nSkillDetail.contextTypes = {\n  translate: Provider.childContextTypes.translate,\n  skin: Provider.childContextTypes.skin\n};\n\nSkillDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  icon: PropTypes.shape({\n    name: PropTypes.string,\n    color: PropTypes.string\n  }).isRequired,\n  skillRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  metrics: PropTypes.shape({\n    score: PropTypes.number,\n    questionsToReview: PropTypes.number,\n    totalContents: PropTypes.number\n  }),\n  focused: PropTypes.bool,\n  availableForReview: PropTypes.bool,\n  ongoingCoursesAvailable: PropTypes.bool,\n  skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  onBackClick: PropTypes.func,\n  onReviewClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func,\n  search: PropTypes.shape({\n    oldValue: PropTypes.string,\n    onChange: PropTypes.func\n  }),\n  bannerMicrolearning: PropTypes.shape({\n    action: PropTypes.func,\n    oldSwitchValue: PropTypes.bool\n  })\n};\n\nexport default SkillDetail;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,10 +1,11 @@
 export default CertificationCard;
-declare function CertificationCard(props: any, context: any): JSX.Element;
+declare function CertificationCard(props: any, context: any): JSX.Element | null;
 declare namespace CertificationCard {
     namespace contextTypes {
         const translate: PropTypes.Requireable<(...args: any[]) => any>;
     }
     namespace propTypes {
+        const type: PropTypes.Validator<string>;
         const label: PropTypes.Requireable<string>;
         const goal: PropTypes.Requireable<PropTypes.InferProps<{
             title: PropTypes.Requireable<string>;

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,0EA+DC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/certification-card/index.js"],"names":[],"mappings":";AAQA,iFAiEC"}

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

@@ -12,6 +12,7 @@ var _style = _interopRequireDefault(require("./style.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const CertificationCard = (props, context) => {
   const {
+    type,
     label,
     locales: {
       conditionDescriptionProgress,
@@ -24,6 +25,7 @@ const CertificationCard = (props, context) => {
     imgUrl,
     onClick
   } = props;
+  if (type !== 'certification') return null;
   const {
     translate
   } = context;
@@ -97,6 +99,7 @@ CertificationCard.contextTypes = {
   translate: _provider.default.childContextTypes.translate
 };
 CertificationCard.propTypes = process.env.NODE_ENV !== "production" ? {
+  type: _propTypes.default.oneOf(['certification']).isRequired,
   label: _propTypes.default.string,
   goal: _propTypes.default.shape({
     title: _propTypes.default.string,

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","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":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_colors","_provider","_tag","_progressBar","_style","e","__esModule","default","CertificationCard","props","context","type","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","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","oneOf","isRequired","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    type,\n    label,\n    locales: {conditionDescriptionProgress, tag},\n    goal: {title},\n    progress,\n    imgUrl,\n    onClick\n  } = props;\n  if (type !== 'certification') return null;\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  type: PropTypes.oneOf(['certification']).isRequired,\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,IAAI;IACJC,KAAK;IACLC,OAAO,EAAE;MAACC,4BAA4B;MAAEC;IAAG,CAAC;IAC5CC,IAAI,EAAE;MAACC;IAAK,CAAC;IACbC,QAAQ;IACRC,MAAM;IACNC;EACF,CAAC,GAAGX,KAAK;EACT,IAAIE,IAAI,KAAK,eAAe,EAAE,OAAO,IAAI;EACzC,MAAM;IAACU;EAAS,CAAC,GAAGX,OAAO;EAC3B,MAAMY,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,oBACE/B,MAAA,CAAAW,OAAA,CAAA6B,aAAA;IAAKC,SAAS,EAAEC,cAAK,CAACC,SAAU;IAAC,aAAW,sBAAsB3B,KAAK,EAAG;IAACQ,OAAO,EAAEA;EAAQ,GACzFF,QAAQ,GAAG,CAAC,gBACXtB,MAAA,CAAAW,OAAA,CAAA6B,aAAA,CAAClC,IAAA,CAAAK,OAAG;IACFK,KAAK,EAAEW,aAAc;IACrBZ,IAAI,EAAEa,eAAgB;IACtBS,WAAW,EAAE;MAACP,QAAQ,EAAE,UAAU;MAAEc,GAAG,EAAE,MAAM;MAAEC,KAAK,EAAE;IAAM,CAAE;IAChEC,IAAI,EAAEjB;EAAkB,CACzB,CAAC,GACA,IAAI,eACR7B,MAAA,CAAAW,OAAA,CAAA6B,aAAA;IAAKC,SAAS,EAAEC,cAAK,CAACK;EAAa,gBACjC/C,MAAA,CAAAW,OAAA,CAAA6B,aAAA;IAAKC,SAAS,EAAEC,cAAK,CAACM;EAAe,gBACnChD,MAAA,CAAAW,OAAA,CAAA6B,aAAA;IAAKS,GAAG,EAAE1B;EAAO,CAAE,CAChB,CACF,CAAC,eACNvB,MAAA,CAAAW,OAAA,CAAA6B,aAAA;IAAKC,SAAS,EAAEC,cAAK,CAACQ;EAAc,gBAClClD,MAAA,CAAAW,OAAA,CAAA6B,aAAA;IAAKC,SAAS,EAAEC,cAAK,CAACS;EAAa,gBACjCnD,MAAA,CAAAW,OAAA,CAAA6B,aAAA,CAAClC,IAAA,CAAAK,OAAG;IAACK,KAAK,EAAEG,GAAI;IAACe,IAAI,EAAC,GAAG;IAACY,IAAI,EAAEP;EAAkB,CAAE,CAAC,eACrDvC,MAAA,CAAAW,OAAA,CAAA6B,aAAA;IAAKC,SAAS,EAAEC,cAAK,CAACrB,KAAM;IAAC,aAAU;EAAqB,GACzDA,KACE,CAAC,eACNrB,MAAA,CAAAW,OAAA,CAAA6B,aAAA;IACEC,SAAS,EAAEC,cAAK,CAACU;IACjB;IAAA;IACAC,uBAAuB,EAAE;MAACC,MAAM,EAAEpC;IAA4B;EAAE,CACjE,CACE,CAAC,eACNlB,MAAA,CAAAW,OAAA,CAAA6B,aAAA,CAACjC,YAAA,CAAAI,OAAW;IACV8B,SAAS,EAAEC,cAAK,CAACa,iBAAkB;IACnCb,KAAK,EAAE;MAACT,eAAe,EAAEuB,cAAM,CAACC;IAAe,CAAE;IACjDC,WAAW,EAAE,KAAM;IACnBC,KAAK,EAAErC,QAAS;IAChBsC,GAAG,EAAE;EAAI,CACV,CACE,CACF,CAAC;AAEV,CAAC;AAEDhD,iBAAiB,CAACiD,YAAY,GAAG;EAC/BpC,SAAS,EAAEqC,iBAAQ,CAACC,iBAAiB,CAACtC;AACxC,CAAC;AAEDb,iBAAiB,CAACoD,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EAC5BpD,IAAI,EAAEqD,kBAAS,CAACC,KAAK,CAAC,CAAC,eAAe,CAAC,CAAC,CAACC,UAAU;EACnDtD,KAAK,EAAEoD,kBAAS,CAACG,MAAM;EACvBnD,IAAI,EAAEgD,kBAAS,CAACI,KAAK,CAAC;IACpBnD,KAAK,EAAE+C,kBAAS,CAACG,MAAM;IACvBE,SAAS,EAAEL,kBAAS,CAACI,KAAK,CAAC;MACzBE,MAAM,EAAEN,kBAAS,CAACO;IACpB,CAAC;EACH,CAAC,CAAC;EACFrD,QAAQ,EAAE8C,kBAAS,CAACO,MAAM;EAC1BpD,MAAM,EAAE6C,kBAAS,CAACG,MAAM;EACxB/C,OAAO,EAAE4C,kBAAS,CAACQ,IAAI;EACvB3D,OAAO,EAAEmD,kBAAS,CAACI,KAAK,CAAC;IACvBtD,4BAA4B,EAAEkD,kBAAS,CAACG,MAAM;IAC9CpD,GAAG,EAAEiD,kBAAS,CAACG;EACjB,CAAC;AACH,CAAC;AAAC,IAAAM,QAAA,GAAAC,OAAA,CAAAnE,OAAA,GAEaC,iBAAiB","ignoreList":[]}

package/lib/molecule/cm-popin/types.d.ts

@@ -156,7 +156,7 @@ declare const propTypes: {
     items: PropTypes.Requireable<PropTypes.InferProps<{
         type: PropTypes.Requireable<string>;
         list: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{
-            list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
+            list: PropTypes.Requireable<((PropTypes.InferPropsInner<Pick<any, any>> & Partial<PropTypes.InferPropsInner<Pick<any, never>>>) | null | undefined)[]>;
             customStyle: PropTypes.Requireable<{
                 [x: string]: string | null | undefined;
             }>;

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

@@ -1,29 +1,28 @@
-import React from 'react';
-import { WebContextValues } from '../../atom/provider/web-context';
-import { LearnerSkillCardProps } from './prop-types';
-export declare const updateBackgroundImage: (ref: React.RefObject<HTMLDivElement>, background: string) => void;
-declare const LearnerSkillCard: {
-    (props: LearnerSkillCardProps, context: WebContextValues): JSX.Element;
-    contextTypes: {
-        translate: import("prop-types").Requireable<(...args: any[]) => any>;
-    };
-    propTypes: {
-        'aria-label': import("prop-types").Requireable<string>;
-        cardIndex: import("prop-types").Requireable<number>;
-        skillTitle: import("prop-types").Requireable<string>;
-        skillAriaLabel: import("prop-types").Requireable<string>;
-        focus: import("prop-types").Requireable<boolean>;
-        metrics: import("prop-types").Requireable<import("prop-types").InferProps<{
-            content: import("prop-types").Requireable<number>;
-            score: import("prop-types").Requireable<number>;
-            questionsToReview: import("prop-types").Requireable<number>;
+export function updateBackgroundImage(ref: any, background: any): void;
+export default LearnerSkillCard;
+declare function LearnerSkillCard(props: any, context: any): JSX.Element;
+declare namespace LearnerSkillCard {
+    namespace contextTypes {
+        const translate: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+    const propTypes: {
+        type: PropTypes.Validator<string>;
+        title: PropTypes.Validator<string>;
+        label: PropTypes.Requireable<string>;
+        'aria-label': PropTypes.Requireable<string>;
+        cardIndex: PropTypes.Requireable<number>;
+        focus: PropTypes.Requireable<boolean>;
+        progress: PropTypes.Requireable<number>;
+        metrics: PropTypes.Requireable<PropTypes.InferProps<{
+            content: PropTypes.Requireable<number>;
+            questionsToReview: PropTypes.Requireable<number>;
         }>>;
-        icon: import("prop-types").Requireable<import("prop-types").InferProps<{
-            color: import("prop-types").Requireable<string>;
-            name: import("prop-types").Requireable<string>;
+        icon: PropTypes.Requireable<PropTypes.InferProps<{
+            color: PropTypes.Requireable<string>;
+            name: PropTypes.Requireable<string>;
         }>>;
-        onExploreClick: import("prop-types").Requireable<(...args: any[]) => any>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
     };
-};
-export default LearnerSkillCard;
+}
+import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

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;;;;;;;;;;;;;;;;;;;;;CAoIhF,CAAC;AAQF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learner-skill-card/index.js"],"names":[],"mappings":"AAWO,uEAIN;;AACD,yEAsIC"}

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

@@ -3,12 +3,12 @@
 exports.__esModule = true;
 exports.updateBackgroundImage = exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _provider = _interopRequireWildcard(require("../../atom/provider"));
 var _progressBar = _interopRequireDefault(require("../progress-bar"));
 var _colors = require("../../variables/colors");
 var _getBackgroundGradientColor = require("../../util/get-background-gradient-color");
 var _icon = _interopRequireDefault(require("../../atom/icon"));
-var _propTypes = _interopRequireDefault(require("./prop-types"));
 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); }
@@ -24,15 +24,15 @@ const LearnerSkillCard = (props, context) => {
   const {
     'aria-label': ariaLabel,
     cardIndex,
-    skillTitle,
-    skillAriaLabel,
+    title,
+    label,
     focus,
     metrics,
+    progress,
     icon,
-    onExploreClick
+    onClick
   } = props;
   const {
-    score,
     content,
     questionsToReview = 0
   } = metrics;
@@ -53,7 +53,8 @@ const LearnerSkillCard = (props, context) => {
   }, [defaultBackground]);
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": `learner-skill-card-wrapper-${cardIndex}`,
-    onClick: onExploreClick,
+    "data-name": `skill-card-${label}`,
+    onClick: onClick,
     className: _style.default.learnerSkillCardContainer,
     "aria-label": ariaLabel,
     onMouseEnter: handleMouseEnter,
@@ -107,8 +108,8 @@ const LearnerSkillCard = (props, context) => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     "data-name": "skill-card-title",
     className: _style.default.skillTitle,
-    "aria-label": skillAriaLabel || skillTitle
-  }, skillTitle), /*#__PURE__*/_react.default.createElement("div", {
+    "aria-label": ariaLabel || title
+  }, title), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.contentAndQuestionsWrapper
   }, /*#__PURE__*/_react.default.createElement("div", {
     "data-name": "learner-skill-card-skill-content-number"
@@ -142,7 +143,7 @@ const LearnerSkillCard = (props, context) => {
   })) : null)))), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.progressInformations
   }, /*#__PURE__*/_react.default.createElement(_progressBar.default, {
-    value: score,
+    value: progress,
     displayInfo: false,
     max: MAX_SCORE,
     className: _style.default.progressWrapper,
@@ -154,6 +155,23 @@ const LearnerSkillCard = (props, context) => {
 LearnerSkillCard.contextTypes = {
   translate: _provider.default.childContextTypes.translate
 };
-LearnerSkillCard.propTypes = process.env.NODE_ENV !== "production" ? _propTypes.default : {};
+LearnerSkillCard.propTypes = process.env.NODE_ENV !== "production" ? {
+  type: _propTypes.default.oneOf(['skill']).isRequired,
+  title: _propTypes.default.string.isRequired,
+  label: _propTypes.default.string,
+  'aria-label': _propTypes.default.string,
+  cardIndex: _propTypes.default.number,
+  focus: _propTypes.default.bool,
+  progress: _propTypes.default.number,
+  metrics: _propTypes.default.shape({
+    content: _propTypes.default.number,
+    questionsToReview: _propTypes.default.number
+  }),
+  icon: _propTypes.default.shape({
+    color: _propTypes.default.string,
+    name: _propTypes.default.string
+  }),
+  onClick: _propTypes.default.func
+} : {};
 var _default = exports.default = LearnerSkillCard;
 //# sourceMappingURL=index.js.map

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","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":[]}
+{"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,\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":[]}

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

@@ -1,10 +1,11 @@
 export default PlaylistCard;
-declare function PlaylistCard(props: any, context: any): JSX.Element;
+declare function PlaylistCard(props: any, context: any): JSX.Element | null;
 declare namespace PlaylistCard {
     namespace contextTypes {
         const translate: PropTypes.Requireable<(...args: any[]) => any>;
     }
     namespace propTypes {
+        const type: PropTypes.Validator<string>;
         const label: PropTypes.Requireable<string>;
         const title: PropTypes.Validator<string>;
         const progress: PropTypes.Requireable<number>;

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,qEAuCC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/playlist-card/index.js"],"names":[],"mappings":";AASA,4EAwCC"}

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

@@ -13,6 +13,7 @@ var _style = _interopRequireDefault(require("./style.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const PlaylistCard = (props, context) => {
   const {
+    type,
     label,
     title,
     progress = 0,
@@ -23,6 +24,7 @@ const PlaylistCard = (props, context) => {
       coursesLabel
     }
   } = props;
+  if (type !== 'playlist') return null;
   const cover = coverImages ? /*#__PURE__*/_react.default.createElement(_playlistDetailCover.default, {
     className: _style.default.cover,
     images: coverImages
@@ -68,6 +70,7 @@ PlaylistCard.contextTypes = {
   translate: _provider.default.childContextTypes.translate
 };
 PlaylistCard.propTypes = process.env.NODE_ENV !== "production" ? {
+  type: _propTypes.default.oneOf(['playlist']).isRequired,
   label: _propTypes.default.string,
   title: _propTypes.default.string.isRequired,
   progress: _propTypes.default.number,

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","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":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_colors","_provider","_tag","_progressBar","_playlistDetailCover","_style","e","__esModule","default","PlaylistCard","props","context","type","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","oneOf","isRequired","string","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    type,\n    label,\n    title,\n    progress = 0,\n    coverImages,\n    onClick,\n    locales: {playlistTag, coursesLabel}\n  } = props;\n  if (type !== 'playlist') return null;\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  type: PropTypes.oneOf(['playlist']).isRequired,\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/molecule/skills-chart-side-information-item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/skills-chart-side-information-item/index.js"],"names":[],"mappings":";AAMA;;;;;gBAcC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/skills-chart-side-information-item/index.js"],"names":[],"mappings":";AAMA;;;;;gBAkBC"}

package/lib/molecule/skills-chart-side-information-item/index.js

@@ -21,7 +21,12 @@ const SkillsChartSideInformationItem = ({
   preset: 's'
 }, iconProps)), /*#__PURE__*/_react.default.createElement("div", {
   className: _style.default.title
-}, title)), /*#__PURE__*/_react.default.createElement("div", {
+  // eslint-disable-next-line react/no-danger
+  ,
+  dangerouslySetInnerHTML: {
+    __html: title
+  }
+})), /*#__PURE__*/_react.default.createElement("div", {
   className: _style.default.value
 }, value), /*#__PURE__*/_react.default.createElement("div", {
   className: _style.default.legend

package/lib/molecule/skills-chart-side-information-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_defaults","_icon","_style","e","__esModule","default","SkillsChartSideInformationItem","title","value","legend","icon","iconProps","createElement","className","style","InformationElement","titleContainer","defaults","preset","dangerouslySetInnerHTML","__html","propTypes","process","env","NODE_ENV","PropTypes","shape","Icon","string","_default","exports"],"sources":["../../../src/molecule/skills-chart-side-information-item/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport defaults from 'lodash/fp/defaults';\nimport Icon from '../../atom/icon';\nimport style from './style.css';\n\nconst SkillsChartSideInformationItem = ({title, value, legend, icon: iconProps}) => (\n  <div className={style.InformationElement}>\n    <div className={style.titleContainer}>\n      <Icon {...defaults({preset: 's'}, iconProps)} />\n      <div className={style.title}>{title}</div>\n    </div>\n    <div className={style.value}>{value}</div>\n    <div className={style.legend}>\n      <span\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: legend}}\n      />\n    </div>\n  </div>\n);\n\nSkillsChartSideInformationItem.propTypes = {\n  icon: PropTypes.shape(Icon.propTypes),\n  title: PropTypes.string,\n  value: PropTypes.string,\n  legend: PropTypes.string\n};\n\nexport default SkillsChartSideInformationItem;\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,SAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,KAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,MAAA,GAAAL,sBAAA,CAAAC,OAAA;AAAgC,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,8BAA8B,GAAGA,CAAC;EAACC,KAAK;EAAEC,KAAK;EAAEC,MAAM;EAAEC,IAAI,EAAEC;AAAS,CAAC,kBAC7Ef,MAAA,CAAAS,OAAA,CAAAO,aAAA;EAAKC,SAAS,EAAEC,cAAK,CAACC;AAAmB,gBACvCnB,MAAA,CAAAS,OAAA,CAAAO,aAAA;EAAKC,SAAS,EAAEC,cAAK,CAACE;AAAe,gBACnCpB,MAAA,CAAAS,OAAA,CAAAO,aAAA,CAACX,KAAA,CAAAI,OAAI,EAAK,IAAAY,iBAAQ,EAAC;EAACC,MAAM,EAAE;AAAG,CAAC,EAAEP,SAAS,CAAI,CAAC,eAChDf,MAAA,CAAAS,OAAA,CAAAO,aAAA;EAAKC,SAAS,EAAEC,cAAK,CAACP;AAAM,GAAEA,KAAW,CACtC,CAAC,eACNX,MAAA,CAAAS,OAAA,CAAAO,aAAA;EAAKC,SAAS,EAAEC,cAAK,CAACN;AAAM,GAAEA,KAAW,CAAC,eAC1CZ,MAAA,CAAAS,OAAA,CAAAO,aAAA;EAAKC,SAAS,EAAEC,cAAK,CAACL;AAAO,gBAC3Bb,MAAA,CAAAS,OAAA,CAAAO,aAAA;EACE;EACAO,uBAAuB,EAAE;IAACC,MAAM,EAAEX;EAAM;AAAE,CAC3C,CACE,CACF,CACN;AAEDH,8BAA8B,CAACe,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EACzCd,IAAI,EAAEe,kBAAS,CAACC,KAAK,CAACC,aAAI,CAACN,SAAS,CAAC;EACrCd,KAAK,EAAEkB,kBAAS,CAACG,MAAM;EACvBpB,KAAK,EAAEiB,kBAAS,CAACG,MAAM;EACvBnB,MAAM,EAAEgB,kBAAS,CAACG;AACpB,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAzB,OAAA,GAEaC,8BAA8B","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_defaults","_icon","_style","e","__esModule","default","SkillsChartSideInformationItem","title","value","legend","icon","iconProps","createElement","className","style","InformationElement","titleContainer","defaults","preset","dangerouslySetInnerHTML","__html","propTypes","process","env","NODE_ENV","PropTypes","shape","Icon","string","_default","exports"],"sources":["../../../src/molecule/skills-chart-side-information-item/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport defaults from 'lodash/fp/defaults';\nimport Icon from '../../atom/icon';\nimport style from './style.css';\n\nconst SkillsChartSideInformationItem = ({title, value, legend, icon: iconProps}) => (\n  <div className={style.InformationElement}>\n    <div className={style.titleContainer}>\n      <Icon {...defaults({preset: 's'}, iconProps)} />\n      <div\n        className={style.title}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: title}}\n      />\n    </div>\n    <div className={style.value}>{value}</div>\n    <div className={style.legend}>\n      <span\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: legend}}\n      />\n    </div>\n  </div>\n);\n\nSkillsChartSideInformationItem.propTypes = {\n  icon: PropTypes.shape(Icon.propTypes),\n  title: PropTypes.string,\n  value: PropTypes.string,\n  legend: PropTypes.string\n};\n\nexport default SkillsChartSideInformationItem;\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,SAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,KAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,MAAA,GAAAL,sBAAA,CAAAC,OAAA;AAAgC,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,8BAA8B,GAAGA,CAAC;EAACC,KAAK;EAAEC,KAAK;EAAEC,MAAM;EAAEC,IAAI,EAAEC;AAAS,CAAC,kBAC7Ef,MAAA,CAAAS,OAAA,CAAAO,aAAA;EAAKC,SAAS,EAAEC,cAAK,CAACC;AAAmB,gBACvCnB,MAAA,CAAAS,OAAA,CAAAO,aAAA;EAAKC,SAAS,EAAEC,cAAK,CAACE;AAAe,gBACnCpB,MAAA,CAAAS,OAAA,CAAAO,aAAA,CAACX,KAAA,CAAAI,OAAI,EAAK,IAAAY,iBAAQ,EAAC;EAACC,MAAM,EAAE;AAAG,CAAC,EAAEP,SAAS,CAAI,CAAC,eAChDf,MAAA,CAAAS,OAAA,CAAAO,aAAA;EACEC,SAAS,EAAEC,cAAK,CAACP;EACjB;EAAA;EACAY,uBAAuB,EAAE;IAACC,MAAM,EAAEb;EAAK;AAAE,CAC1C,CACE,CAAC,eACNX,MAAA,CAAAS,OAAA,CAAAO,aAAA;EAAKC,SAAS,EAAEC,cAAK,CAACN;AAAM,GAAEA,KAAW,CAAC,eAC1CZ,MAAA,CAAAS,OAAA,CAAAO,aAAA;EAAKC,SAAS,EAAEC,cAAK,CAACL;AAAO,gBAC3Bb,MAAA,CAAAS,OAAA,CAAAO,aAAA;EACE;EACAO,uBAAuB,EAAE;IAACC,MAAM,EAAEX;EAAM;AAAE,CAC3C,CACE,CACF,CACN;AAEDH,8BAA8B,CAACe,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EACzCd,IAAI,EAAEe,kBAAS,CAACC,KAAK,CAACC,aAAI,CAACN,SAAS,CAAC;EACrCd,KAAK,EAAEkB,kBAAS,CAACG,MAAM;EACvBpB,KAAK,EAAEiB,kBAAS,CAACG,MAAM;EACvBnB,MAAM,EAAEgB,kBAAS,CAACG;AACpB,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAzB,OAAA,GAEaC,8BAA8B","ignoreList":[]}

package/lib/molecule/skills-chart-side-information-item/style.css

@@ -28,6 +28,9 @@
   line-height: 22px;
   margin-left: 8px;
 }
+.title::first-letter {
+  text-transform: uppercase;
+}
 
 .value {
   color: cm_grey_700;

package/lib/organism/cards-grid/index.d.ts

@@ -31,6 +31,34 @@ export interface CardProps {
     'badge-aria-label'?: string;
     'disabled-aria-label'?: string;
     'card-content-aria-label'?: string;
+    cardIndex?: number;
+    focus?: boolean;
+    metrics?: {
+        content?: number;
+        questionsToReview?: number;
+    };
+    icon?: {
+        color: string;
+        name: string;
+    };
+    label?: string;
+    goal?: {
+        title?: string;
+        condition?: {
+            nbDone?: number;
+        };
+    };
+    imgUrl?: string;
+    locales?: {
+        conditionDescriptionProgress?: string;
+        tag?: string;
+        playlistTag?: string;
+        coursesLabel?: string;
+    };
+    coverImages?: {
+        url: string;
+        title: string;
+    }[];
 }
 export interface CardsGridProps {
     list: CardProps[];
@@ -40,7 +68,7 @@ export interface CardsGridProps {
 declare const CardsGrid: {
     (props: CardsGridProps): JSX.Element;
     propTypes: {
-        list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
+        list: PropTypes.Requireable<((PropTypes.InferPropsInner<Pick<any, any>> & Partial<PropTypes.InferPropsInner<Pick<any, never>>>) | null | undefined)[]>;
         customStyle: PropTypes.Requireable<{
             [x: string]: string | null | undefined;
         }>;