@coorpacademy/components 11.32.52-alpha.63 → 11.32.52-alpha.64

package/es/template/skill-detail/index.d.ts

@@ -123,6 +123,10 @@ declare namespace SkillDetail {
         export const onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
         export const onReviewClick: PropTypes.Requireable<(...args: any[]) => any>;
         export const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
+        export const search: PropTypes.Requireable<PropTypes.InferProps<{
+            oldValue: PropTypes.Requireable<string>;
+            onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>;
         export namespace bannerMicrolearning {
             const action: PropTypes.Requireable<(...args: any[]) => any>;
             const oldSwitchValue: PropTypes.Requireable<boolean>;

package/es/template/skill-detail/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":"AAeO,8EA+BN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD,oEA8JC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":"AAeO,8EA+BN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD,oEAgKC"}

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

@@ -70,6 +70,7 @@ const SkillDetail = (props, context) => {
     onBackClick,
     onReviewClick,
     onContinueLearningClick,
+    search,
     bannerMicrolearning = {}
   } = props;
   const descriptionRef = useRef(null);
@@ -185,7 +186,8 @@ const SkillDetail = (props, context) => {
       type: 'skill',
       action: bannerMicrolearningAction,
       oldSwitchValue
-    } : {}
+    } : {},
+    search: search
   })));
 };
 
@@ -214,6 +216,10 @@ SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   onBackClick: PropTypes.func,
   onReviewClick: PropTypes.func,
   onContinueLearningClick: PropTypes.func,
+  search: PropTypes.shape({
+    oldValue: PropTypes.string,
+    onChange: PropTypes.func
+  }),
   bannerMicrolearning: {
     action: PropTypes.func,
     oldSwitchValue: PropTypes.bool

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","useRef","useEffect","PropTypes","convert","classnames","Markdown","Provider","Select","SelectOptionPropTypes","ButtonLink","ButtonLinkIcon","Icon","CardsGrid","style","AllCourses","ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","width","borderRadius","backgroundColor","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","bool","func","SkillDetail","title","skillRef","description","metrics","focused","availableForReview","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","bannerMicrolearning","descriptionRef","score","questionsToReview","totalContents","action","bannerMicrolearningAction","oldSwitchValue","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButton","ctaContainer","skillFocusBadge","faSize","wrapperSize","showMoreWrapper","ctaWrapper","skillInformation","skillInformationNumber","progressContainer","progressInformationNumber","toFixed","type","string","isRequired","shape","number","onChange","options","arrayOf"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState, useRef, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\n\nexport const ContinueLearningButton = (props, context) => {\n  const {ongoingCoursesAvailable, onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <div>\n      <ButtonLink\n        label={\n          ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')\n        }\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=\"#FFFFFF\"\n        icon={{\n          position: 'left',\n          faIcon: {\n            name: 'play',\n            color: '#FFFFFF',\n            size: 16\n          }\n        }}\n        onClick={onClick}\n      />\n    </div>\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\nconst SkillDetail = (props, context) => {\n  const {\n    title,\n    skillRef,\n    description,\n    metrics = {},\n    focused,\n    availableForReview,\n    ongoingCoursesAvailable,\n    skillIncludedCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick,\n    bannerMicrolearning = {}\n  } = props;\n  const descriptionRef = useRef(null);\n  const {score = 0, questionsToReview, totalContents} = metrics;\n  const {translate} = context;\n  const {action: bannerMicrolearningAction, oldSwitchValue} = bannerMicrolearning;\n\n  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, 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        className={classnames(style.description, !showMore && style.truncate)}\n      >\n        <Markdown>{description}</Markdown>\n      </div>\n    );\n  }, [showMore, description]);\n\n  const ProgressBar = useCallback(() => {\n    if (score === undefined) return null;\n    const progressBarColor = '#3EC483';\n    const inlineProgressValueStyle = {\n      backgroundColor: progressBarColor,\n      width: `${score}%`\n    };\n\n    return (\n      <div className={style.progressBarWrapper}>\n        <div\n          data-name=\"progress\"\n          className={style.progress}\n          style={inlineProgressValueStyle}\n          role=\"progressbar\"\n        />\n      </div>\n    );\n  }, [score]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={skillRef}>\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 className={style.ctaContainer}>\n          <div>\n            {focused ? (\n              <div className={style.skillFocusBadge}>\n                <Icon\n                  iconName=\"bullseye-arrow\"\n                  backgroundColor=\"#DDD1FF\"\n                  size={{\n                    faSize: 10,\n                    wrapperSize: 16\n                  }}\n                />\n                {translate('skill_focus')}\n              </div>\n            ) : null}\n            <div className={style.title}>{title}</div>\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={{\n                        faSize: 14,\n                        wrapperSize: 16\n                      }}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n          </div>\n\n          <div className={style.ctaWrapper}>\n            <ButtonLink\n              type=\"secondary\"\n              onClick={onReviewClick}\n              label={translate('review_this_skill')}\n              disabled={!availableForReview}\n              customStyle={{\n                width: 'fit-content',\n                borderRadius: '12px'\n              }}\n            />\n            <ContinueLearningButton\n              ongoingCoursesAvailable={ongoingCoursesAvailable}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        {questionsToReview > 0 ? (\n          <div className={style.skillInformation} data-name=\"skill-questions\">\n            <span className={style.skillInformationNumber}>{questionsToReview}</span>\n            &nbsp;{translate('skill_chart_side_panel_questions_to_review')}\n          </div>\n        ) : null}\n        <div className={style.progressContainer}>\n          <ProgressBar />\n          <span className={style.progressInformationNumber}>{score.toFixed(1)}%</span>\n        </div>\n        <AllCourses\n          content={skillIncludedCourses}\n          filters={filters}\n          sorting={sorting}\n          totalContents={totalContents}\n          bannerMicrolearning={\n            bannerMicrolearningAction\n              ? {\n                  type: 'skill',\n                  action: bannerMicrolearningAction,\n                  oldSwitchValue\n                }\n              : {}\n          }\n        />\n      </div>\n    </div>\n  );\n};\n\nSkillDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nSkillDetail.propTypes = {\n  title: PropTypes.string.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  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onReviewClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func,\n  bannerMicrolearning: {\n    action: PropTypes.func,\n    oldSwitchValue: PropTypes.bool\n  }\n};\n\nexport default SkillDetail;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","useRef","useEffect","PropTypes","convert","classnames","Markdown","Provider","Select","SelectOptionPropTypes","ButtonLink","ButtonLinkIcon","Icon","CardsGrid","style","AllCourses","ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","width","borderRadius","backgroundColor","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","bool","func","SkillDetail","title","skillRef","description","metrics","focused","availableForReview","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","search","bannerMicrolearning","descriptionRef","score","questionsToReview","totalContents","action","bannerMicrolearningAction","oldSwitchValue","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButton","ctaContainer","skillFocusBadge","faSize","wrapperSize","showMoreWrapper","ctaWrapper","skillInformation","skillInformationNumber","progressContainer","progressInformationNumber","toFixed","type","string","isRequired","shape","number","onChange","options","arrayOf","oldValue"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState, useRef, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\n\nexport const ContinueLearningButton = (props, context) => {\n  const {ongoingCoursesAvailable, onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <div>\n      <ButtonLink\n        label={\n          ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')\n        }\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=\"#FFFFFF\"\n        icon={{\n          position: 'left',\n          faIcon: {\n            name: 'play',\n            color: '#FFFFFF',\n            size: 16\n          }\n        }}\n        onClick={onClick}\n      />\n    </div>\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\nconst SkillDetail = (props, context) => {\n  const {\n    title,\n    skillRef,\n    description,\n    metrics = {},\n    focused,\n    availableForReview,\n    ongoingCoursesAvailable,\n    skillIncludedCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick,\n    search,\n    bannerMicrolearning = {}\n  } = props;\n  const descriptionRef = useRef(null);\n  const {score = 0, questionsToReview, totalContents} = metrics;\n  const {translate} = context;\n  const {action: bannerMicrolearningAction, oldSwitchValue} = bannerMicrolearning;\n\n  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, 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        className={classnames(style.description, !showMore && style.truncate)}\n      >\n        <Markdown>{description}</Markdown>\n      </div>\n    );\n  }, [showMore, description]);\n\n  const ProgressBar = useCallback(() => {\n    if (score === undefined) return null;\n    const progressBarColor = '#3EC483';\n    const inlineProgressValueStyle = {\n      backgroundColor: progressBarColor,\n      width: `${score}%`\n    };\n\n    return (\n      <div className={style.progressBarWrapper}>\n        <div\n          data-name=\"progress\"\n          className={style.progress}\n          style={inlineProgressValueStyle}\n          role=\"progressbar\"\n        />\n      </div>\n    );\n  }, [score]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={skillRef}>\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 className={style.ctaContainer}>\n          <div>\n            {focused ? (\n              <div className={style.skillFocusBadge}>\n                <Icon\n                  iconName=\"bullseye-arrow\"\n                  backgroundColor=\"#DDD1FF\"\n                  size={{\n                    faSize: 10,\n                    wrapperSize: 16\n                  }}\n                />\n                {translate('skill_focus')}\n              </div>\n            ) : null}\n            <div className={style.title}>{title}</div>\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={{\n                        faSize: 14,\n                        wrapperSize: 16\n                      }}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n          </div>\n\n          <div className={style.ctaWrapper}>\n            <ButtonLink\n              type=\"secondary\"\n              onClick={onReviewClick}\n              label={translate('review_this_skill')}\n              disabled={!availableForReview}\n              customStyle={{\n                width: 'fit-content',\n                borderRadius: '12px'\n              }}\n            />\n            <ContinueLearningButton\n              ongoingCoursesAvailable={ongoingCoursesAvailable}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        {questionsToReview > 0 ? (\n          <div className={style.skillInformation} data-name=\"skill-questions\">\n            <span className={style.skillInformationNumber}>{questionsToReview}</span>\n            &nbsp;{translate('skill_chart_side_panel_questions_to_review')}\n          </div>\n        ) : null}\n        <div className={style.progressContainer}>\n          <ProgressBar />\n          <span className={style.progressInformationNumber}>{score.toFixed(1)}%</span>\n        </div>\n        <AllCourses\n          content={skillIncludedCourses}\n          filters={filters}\n          sorting={sorting}\n          totalContents={totalContents}\n          bannerMicrolearning={\n            bannerMicrolearningAction\n              ? {\n                  type: 'skill',\n                  action: bannerMicrolearningAction,\n                  oldSwitchValue\n                }\n              : {}\n          }\n          search={search}\n        />\n      </div>\n    </div>\n  );\n};\n\nSkillDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nSkillDetail.propTypes = {\n  title: PropTypes.string.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  sorting: PropTypes.shape(Select.propTypes),\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: {\n    action: PropTypes.func,\n    oldSwitchValue: PropTypes.bool\n  }\n};\n\nexport default SkillDetail;\n"],"mappings":"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"}

package/lib/template/skill-detail/index.d.ts

@@ -123,6 +123,10 @@ declare namespace SkillDetail {
         export const onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
         export const onReviewClick: PropTypes.Requireable<(...args: any[]) => any>;
         export const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
+        export const search: PropTypes.Requireable<PropTypes.InferProps<{
+            oldValue: PropTypes.Requireable<string>;
+            onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>;
         export namespace bannerMicrolearning {
             const action: PropTypes.Requireable<(...args: any[]) => any>;
             const oldSwitchValue: PropTypes.Requireable<boolean>;

package/lib/template/skill-detail/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":"AAeO,8EA+BN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD,oEA8JC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":"AAeO,8EA+BN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD,oEAgKC"}

package/lib/template/skill-detail/index.js

@@ -96,6 +96,7 @@ const SkillDetail = (props, context) => {
     onBackClick,
     onReviewClick,
     onContinueLearningClick,
+    search,
     bannerMicrolearning = {}
   } = props;
   const descriptionRef = (0, _react.useRef)(null);
@@ -211,7 +212,8 @@ const SkillDetail = (props, context) => {
       type: 'skill',
       action: bannerMicrolearningAction,
       oldSwitchValue
-    } : {}
+    } : {},
+    search: search
   })));
 };
 
@@ -240,6 +242,10 @@ SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   onBackClick: _propTypes.default.func,
   onReviewClick: _propTypes.default.func,
   onContinueLearningClick: _propTypes.default.func,
+  search: _propTypes.default.shape({
+    oldValue: _propTypes.default.string,
+    onChange: _propTypes.default.func
+  }),
   bannerMicrolearning: {
     action: _propTypes.default.func,
     oldSwitchValue: _propTypes.default.bool

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","width","borderRadius","backgroundColor","convert","position","faIcon","name","color","size","contextTypes","Provider","childContextTypes","propTypes","PropTypes","bool","func","SkillDetail","title","skillRef","description","metrics","focused","availableForReview","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","bannerMicrolearning","descriptionRef","useRef","score","questionsToReview","totalContents","action","bannerMicrolearningAction","oldSwitchValue","isDescriptionTruncated","setIsDescriptionTruncated","useState","showMore","setShowMore","handleShowMore","useCallback","useEffect","current","clientHeight","scrollHeight","Description","classnames","style","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButton","ctaContainer","skillFocusBadge","faSize","wrapperSize","showMoreWrapper","ctaWrapper","skillInformation","skillInformationNumber","progressContainer","progressInformationNumber","toFixed","type","string","isRequired","shape","number","CardsGrid","onChange","options","arrayOf","SelectOptionPropTypes","Select"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState, useRef, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\n\nexport const ContinueLearningButton = (props, context) => {\n  const {ongoingCoursesAvailable, onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <div>\n      <ButtonLink\n        label={\n          ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')\n        }\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=\"#FFFFFF\"\n        icon={{\n          position: 'left',\n          faIcon: {\n            name: 'play',\n            color: '#FFFFFF',\n            size: 16\n          }\n        }}\n        onClick={onClick}\n      />\n    </div>\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\nconst SkillDetail = (props, context) => {\n  const {\n    title,\n    skillRef,\n    description,\n    metrics = {},\n    focused,\n    availableForReview,\n    ongoingCoursesAvailable,\n    skillIncludedCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick,\n    bannerMicrolearning = {}\n  } = props;\n  const descriptionRef = useRef(null);\n  const {score = 0, questionsToReview, totalContents} = metrics;\n  const {translate} = context;\n  const {action: bannerMicrolearningAction, oldSwitchValue} = bannerMicrolearning;\n\n  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, 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        className={classnames(style.description, !showMore && style.truncate)}\n      >\n        <Markdown>{description}</Markdown>\n      </div>\n    );\n  }, [showMore, description]);\n\n  const ProgressBar = useCallback(() => {\n    if (score === undefined) return null;\n    const progressBarColor = '#3EC483';\n    const inlineProgressValueStyle = {\n      backgroundColor: progressBarColor,\n      width: `${score}%`\n    };\n\n    return (\n      <div className={style.progressBarWrapper}>\n        <div\n          data-name=\"progress\"\n          className={style.progress}\n          style={inlineProgressValueStyle}\n          role=\"progressbar\"\n        />\n      </div>\n    );\n  }, [score]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={skillRef}>\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 className={style.ctaContainer}>\n          <div>\n            {focused ? (\n              <div className={style.skillFocusBadge}>\n                <Icon\n                  iconName=\"bullseye-arrow\"\n                  backgroundColor=\"#DDD1FF\"\n                  size={{\n                    faSize: 10,\n                    wrapperSize: 16\n                  }}\n                />\n                {translate('skill_focus')}\n              </div>\n            ) : null}\n            <div className={style.title}>{title}</div>\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={{\n                        faSize: 14,\n                        wrapperSize: 16\n                      }}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n          </div>\n\n          <div className={style.ctaWrapper}>\n            <ButtonLink\n              type=\"secondary\"\n              onClick={onReviewClick}\n              label={translate('review_this_skill')}\n              disabled={!availableForReview}\n              customStyle={{\n                width: 'fit-content',\n                borderRadius: '12px'\n              }}\n            />\n            <ContinueLearningButton\n              ongoingCoursesAvailable={ongoingCoursesAvailable}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        {questionsToReview > 0 ? (\n          <div className={style.skillInformation} data-name=\"skill-questions\">\n            <span className={style.skillInformationNumber}>{questionsToReview}</span>\n            &nbsp;{translate('skill_chart_side_panel_questions_to_review')}\n          </div>\n        ) : null}\n        <div className={style.progressContainer}>\n          <ProgressBar />\n          <span className={style.progressInformationNumber}>{score.toFixed(1)}%</span>\n        </div>\n        <AllCourses\n          content={skillIncludedCourses}\n          filters={filters}\n          sorting={sorting}\n          totalContents={totalContents}\n          bannerMicrolearning={\n            bannerMicrolearningAction\n              ? {\n                  type: 'skill',\n                  action: bannerMicrolearningAction,\n                  oldSwitchValue\n                }\n              : {}\n          }\n        />\n      </div>\n    </div>\n  );\n};\n\nSkillDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nSkillDetail.propTypes = {\n  title: PropTypes.string.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  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onReviewClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func,\n  bannerMicrolearning: {\n    action: PropTypes.func,\n    oldSwitchValue: PropTypes.bool\n  }\n};\n\nexport default SkillDetail;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEO,MAAMA,sBAAsB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACxD,MAAM;IAACC,uBAAD;IAA0BC;EAA1B,IAAqCH,KAA3C;EACA,MAAM;IAACI,IAAD;IAAOC;EAAP,IAAoBJ,OAA1B;EACA,MAAMK,gBAAgB,GAAG,mBAAI,gBAAJ,EAAsBF,IAAtB,CAAzB;EAEA,oBACE,uDACE,6BAAC,mBAAD;IACE,KAAK,EACHF,uBAAuB,GAAGG,SAAS,CAAC,mBAAD,CAAZ,GAAoCA,SAAS,CAAC,gBAAD,CAFxE;IAIE,IAAI,EAAC,SAJP;IAKE,WAAW,EAAE;MACXE,KAAK,EAAE,aADI;MAEXC,YAAY,EAAE,MAFH;MAGXC,eAAe,EAAEH;IAHN,CALf;IAUE,oBAAoB,EAAE,IAAAI,yBAAA,EAAS,YAAWJ,gBAAiB,0BAArC,CAVxB;IAWE,UAAU,EAAC,SAXb;IAYE,IAAI,EAAE;MACJK,QAAQ,EAAE,MADN;MAEJC,MAAM,EAAE;QACNC,IAAI,EAAE,MADA;QAENC,KAAK,EAAE,SAFD;QAGNC,IAAI,EAAE;MAHA;IAFJ,CAZR;IAoBE,OAAO,EAAEZ;EApBX,EADF,CADF;AA0BD,CA/BM;;;AAiCPJ,sBAAsB,CAACiB,YAAvB,GAAsC;EACpCZ,IAAI,EAAEa,iBAAA,CAASC,iBAAT,CAA2Bd,IADG;EAEpCC,SAAS,EAAEY,iBAAA,CAASC,iBAAT,CAA2Bb;AAFF,CAAtC;AAKAN,sBAAsB,CAACoB,SAAvB,2CAAmC;EACjCjB,uBAAuB,EAAEkB,kBAAA,CAAUC,IADF;EAEjClB,OAAO,EAAEiB,kBAAA,CAAUE;AAFc,CAAnC;;AAKA,MAAMC,WAAW,GAAG,CAACvB,KAAD,EAAQC,OAAR,KAAoB;EACtC,MAAM;IACJuB,KADI;IAEJC,QAFI;IAGJC,WAHI;IAIJC,OAAO,GAAG,EAJN;IAKJC,OALI;IAMJC,kBANI;IAOJ3B,uBAPI;IAQJ4B,oBARI;IASJC,OATI;IAUJC,OAVI;IAWJC,WAXI;IAYJC,aAZI;IAaJC,uBAbI;IAcJC,mBAAmB,GAAG;EAdlB,IAeFpC,KAfJ;EAgBA,MAAMqC,cAAc,GAAG,IAAAC,aAAA,EAAO,IAAP,CAAvB;EACA,MAAM;IAACC,KAAK,GAAG,CAAT;IAAYC,iBAAZ;IAA+BC;EAA/B,IAAgDd,OAAtD;EACA,MAAM;IAACtB;EAAD,IAAcJ,OAApB;EACA,MAAM;IAACyC,MAAM,EAAEC,yBAAT;IAAoCC;EAApC,IAAsDR,mBAA5D;EAEA,MAAM,CAACS,sBAAD,EAAyBC,yBAAzB,IAAsD,IAAAC,eAAA,EAAS,KAAT,CAA5D;EACA,MAAM,CAACC,QAAD,EAAWC,WAAX,IAA0B,IAAAF,eAAA,EAAS,KAAT,CAAhC;EAEA,MAAMG,cAAc,GAAG,IAAAC,kBAAA,EAAY,MAAMF,WAAW,CAAC,CAACD,QAAF,CAA7B,EAA0C,CAACC,WAAD,EAAcD,QAAd,CAA1C,CAAvB;EAEA,IAAAI,gBAAA,EAAU,MAAM;IACd,IAAIf,cAAc,CAACgB,OAAnB,EAA4B;MAC1B,MAAM;QAACC,YAAY,GAAG,CAAhB;QAAmBC,YAAY,GAAG;MAAlC,IAAuClB,cAAc,CAACgB,OAA5D;MACAP,yBAAyB,CAACS,YAAY,GAAGD,YAAhB,CAAzB;IACD;EACF,CALD,EAKG,CAAC5B,WAAD,CALH;EAOA,MAAM8B,WAAW,GAAG,IAAAL,kBAAA,EAAY,MAAM;IACpC,oBACE;MACE,GAAG,EAAEd,cADP;MAEE,SAAS,EAAE,IAAAoB,mBAAA,EAAWC,cAAA,CAAMhC,WAAjB,EAA8B,CAACsB,QAAD,IAAaU,cAAA,CAAMC,QAAjD;IAFb,gBAIE,6BAAC,sBAAD,QAAWjC,WAAX,CAJF,CADF;EAQD,CATmB,EASjB,CAACsB,QAAD,EAAWtB,WAAX,CATiB,CAApB;EAWA,MAAMkC,WAAW,GAAG,IAAAT,kBAAA,EAAY,MAAM;IACpC,IAAIZ,KAAK,KAAKsB,SAAd,EAAyB,OAAO,IAAP;IACzB,MAAMC,gBAAgB,GAAG,SAAzB;IACA,MAAMC,wBAAwB,GAAG;MAC/BtD,eAAe,EAAEqD,gBADc;MAE/BvD,KAAK,EAAG,GAAEgC,KAAM;IAFe,CAAjC;IAKA,oBACE;MAAK,SAAS,EAAEmB,cAAA,CAAMM;IAAtB,gBACE;MACE,aAAU,UADZ;MAEE,SAAS,EAAEN,cAAA,CAAMO,QAFnB;MAGE,KAAK,EAAEF,wBAHT;MAIE,IAAI,EAAC;IAJP,EADF,CADF;EAUD,CAlBmB,EAkBjB,CAACxB,KAAD,CAlBiB,CAApB;EAoBA,oBACE;IAAK,SAAS,EAAEmB,cAAA,CAAMQ;EAAtB,gBACE;IAAK,SAAS,EAAER,cAAA,CAAMS,SAAtB;IAAiC,aAAW1C;EAA5C,GACG,CAAC,qBAAMQ,WAAN,CAAD,gBACC,6BAAC,uBAAD;IACE,MAAM,EAAC,YADT;IAEE,aAAU,aAFZ;IAGE,cAAY5B,SAAS,CAAC,MAAD,CAHvB;IAIE,OAAO,EAAE4B,WAJX;IAKE,SAAS,EAAEyB,cAAA,CAAMU,UALnB;IAME,gBAAgB,EAAC;EANnB,EADD,GASG,IAVN,eAWE;IAAK,SAAS,EAAEV,cAAA,CAAMW;EAAtB,gBACE,0CACGzC,OAAO,gBACN;IAAK,SAAS,EAAE8B,cAAA,CAAMY;EAAtB,gBACE,6BAAC,aAAD;IACE,QAAQ,EAAC,gBADX;IAEE,eAAe,EAAC,SAFlB;IAGE,IAAI,EAAE;MACJC,MAAM,EAAE,EADJ;MAEJC,WAAW,EAAE;IAFT;EAHR,EADF,EASGnE,SAAS,CAAC,aAAD,CATZ,CADM,GAYJ,IAbN,eAcE;IAAK,SAAS,EAAEqD,cAAA,CAAMlC;EAAtB,GAA8BA,KAA9B,CAdF,EAeGE,WAAW,gBACV,yEACE,6BAAC,WAAD,OADF,EAEGmB,sBAAsB,gBACrB;IAAK,SAAS,EAAEa,cAAA,CAAMe,eAAtB;IAAuC,OAAO,EAAEvB;EAAhD,GACGF,QAAQ,GAAG3C,SAAS,CAAC,WAAD,CAAZ,GAA4BA,SAAS,CAAC,WAAD,CADhD,eAEE,6BAAC,aAAD;IACE,QAAQ,EAAE2C,QAAQ,GAAG,YAAH,GAAkB,cADtC;IAEE,IAAI,EAAE;MACJuB,MAAM,EAAE,EADJ;MAEJC,WAAW,EAAE;IAFT;EAFR,EAFF,CADqB,GAWnB,IAbN,CADU,GAgBR,IA/BN,CADF,eAmCE;IAAK,SAAS,EAAEd,cAAA,CAAMgB;EAAtB,gBACE,6BAAC,mBAAD;IACE,IAAI,EAAC,WADP;IAEE,OAAO,EAAExC,aAFX;IAGE,KAAK,EAAE7B,SAAS,CAAC,mBAAD,CAHlB;IAIE,QAAQ,EAAE,CAACwB,kBAJb;IAKE,WAAW,EAAE;MACXtB,KAAK,EAAE,aADI;MAEXC,YAAY,EAAE;IAFH;EALf,EADF,eAWE,6BAAC,sBAAD;IACE,uBAAuB,EAAEN,uBAD3B;IAEE,OAAO,EAAEiC;EAFX,EAXF,CAnCF,CAXF,EA+DGK,iBAAiB,GAAG,CAApB,gBACC;IAAK,SAAS,EAAEkB,cAAA,CAAMiB,gBAAtB;IAAwC,aAAU;EAAlD,gBACE;IAAM,SAAS,EAAEjB,cAAA,CAAMkB;EAAvB,GAAgDpC,iBAAhD,CADF,UAESnC,SAAS,CAAC,4CAAD,CAFlB,CADD,GAKG,IApEN,eAqEE;IAAK,SAAS,EAAEqD,cAAA,CAAMmB;EAAtB,gBACE,6BAAC,WAAD,OADF,eAEE;IAAM,SAAS,EAAEnB,cAAA,CAAMoB;EAAvB,GAAmDvC,KAAK,CAACwC,OAAN,CAAc,CAAd,CAAnD,MAFF,CArEF,eAyEE,6BAAC,mBAAD;IACE,OAAO,EAAEjD,oBADX;IAEE,OAAO,EAAEC,OAFX;IAGE,OAAO,EAAEC,OAHX;IAIE,aAAa,EAAES,aAJjB;IAKE,mBAAmB,EACjBE,yBAAyB,GACrB;MACEqC,IAAI,EAAE,OADR;MAEEtC,MAAM,EAAEC,yBAFV;MAGEC;IAHF,CADqB,GAMrB;EAZR,EAzEF,CADF,CADF;AA6FD,CA9JD;;AAgKArB,WAAW,CAACP,YAAZ,GAA2B;EACzBZ,IAAI,EAAEa,iBAAA,CAASC,iBAAT,CAA2Bd,IADR;EAEzBC,SAAS,EAAEY,iBAAA,CAASC,iBAAT,CAA2Bb;AAFb,CAA3B;AAKAkB,WAAW,CAACJ,SAAZ,2CAAwB;EACtBK,KAAK,EAAEJ,kBAAA,CAAU6D,MAAV,CAAiBC,UADF;EAEtBzD,QAAQ,EAAEL,kBAAA,CAAU6D,MAAV,CAAiBC,UAFL;EAGtBxD,WAAW,EAAEN,kBAAA,CAAU6D,MAHD;EAItBtD,OAAO,EAAEP,kBAAA,CAAU+D,KAAV,CAAgB;IACvB5C,KAAK,EAAEnB,kBAAA,CAAUgE,MADM;IAEvB5C,iBAAiB,EAAEpB,kBAAA,CAAUgE,MAFN;IAGvB3C,aAAa,EAAErB,kBAAA,CAAUgE;EAHF,CAAhB,CAJa;EAStBxD,OAAO,EAAER,kBAAA,CAAUC,IATG;EAUtBQ,kBAAkB,EAAET,kBAAA,CAAUC,IAVR;EAWtBnB,uBAAuB,EAAEkB,kBAAA,CAAUC,IAXb;EAYtBS,oBAAoB,EAAEV,kBAAA,CAAU+D,KAAV,CAAgBE,kBAAA,CAAUlE,SAA1B,CAZA;EAatBY,OAAO,EAAEX,kBAAA,CAAU+D,KAAV,CAAgB;IACvBG,QAAQ,EAAElE,kBAAA,CAAUE,IADG;IAEvBiE,OAAO,EAAEnE,kBAAA,CAAUoE,OAAV,CAAkBpE,kBAAA,CAAU+D,KAAV,CAAgBM,6BAAhB,CAAlB;EAFc,CAAhB,CAba;EAiBtBzD,OAAO,EAAEZ,kBAAA,CAAU+D,KAAV,CAAgBO,eAAA,CAAOvE,SAAvB,CAjBa;EAkBtBc,WAAW,EAAEb,kBAAA,CAAUE,IAlBD;EAmBtBY,aAAa,EAAEd,kBAAA,CAAUE,IAnBH;EAoBtBa,uBAAuB,EAAEf,kBAAA,CAAUE,IApBb;EAqBtBc,mBAAmB,EAAE;IACnBM,MAAM,EAAEtB,kBAAA,CAAUE,IADC;IAEnBsB,cAAc,EAAExB,kBAAA,CAAUC;EAFP;AArBC,CAAxB;eA2BeE,W"}
+{"version":3,"file":"index.js","names":["ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","width","borderRadius","backgroundColor","convert","position","faIcon","name","color","size","contextTypes","Provider","childContextTypes","propTypes","PropTypes","bool","func","SkillDetail","title","skillRef","description","metrics","focused","availableForReview","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","search","bannerMicrolearning","descriptionRef","useRef","score","questionsToReview","totalContents","action","bannerMicrolearningAction","oldSwitchValue","isDescriptionTruncated","setIsDescriptionTruncated","useState","showMore","setShowMore","handleShowMore","useCallback","useEffect","current","clientHeight","scrollHeight","Description","classnames","style","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButton","ctaContainer","skillFocusBadge","faSize","wrapperSize","showMoreWrapper","ctaWrapper","skillInformation","skillInformationNumber","progressContainer","progressInformationNumber","toFixed","type","string","isRequired","shape","number","CardsGrid","onChange","options","arrayOf","SelectOptionPropTypes","Select","oldValue"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState, useRef, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\n\nexport const ContinueLearningButton = (props, context) => {\n  const {ongoingCoursesAvailable, onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <div>\n      <ButtonLink\n        label={\n          ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')\n        }\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=\"#FFFFFF\"\n        icon={{\n          position: 'left',\n          faIcon: {\n            name: 'play',\n            color: '#FFFFFF',\n            size: 16\n          }\n        }}\n        onClick={onClick}\n      />\n    </div>\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\nconst SkillDetail = (props, context) => {\n  const {\n    title,\n    skillRef,\n    description,\n    metrics = {},\n    focused,\n    availableForReview,\n    ongoingCoursesAvailable,\n    skillIncludedCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick,\n    search,\n    bannerMicrolearning = {}\n  } = props;\n  const descriptionRef = useRef(null);\n  const {score = 0, questionsToReview, totalContents} = metrics;\n  const {translate} = context;\n  const {action: bannerMicrolearningAction, oldSwitchValue} = bannerMicrolearning;\n\n  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, 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        className={classnames(style.description, !showMore && style.truncate)}\n      >\n        <Markdown>{description}</Markdown>\n      </div>\n    );\n  }, [showMore, description]);\n\n  const ProgressBar = useCallback(() => {\n    if (score === undefined) return null;\n    const progressBarColor = '#3EC483';\n    const inlineProgressValueStyle = {\n      backgroundColor: progressBarColor,\n      width: `${score}%`\n    };\n\n    return (\n      <div className={style.progressBarWrapper}>\n        <div\n          data-name=\"progress\"\n          className={style.progress}\n          style={inlineProgressValueStyle}\n          role=\"progressbar\"\n        />\n      </div>\n    );\n  }, [score]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={skillRef}>\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 className={style.ctaContainer}>\n          <div>\n            {focused ? (\n              <div className={style.skillFocusBadge}>\n                <Icon\n                  iconName=\"bullseye-arrow\"\n                  backgroundColor=\"#DDD1FF\"\n                  size={{\n                    faSize: 10,\n                    wrapperSize: 16\n                  }}\n                />\n                {translate('skill_focus')}\n              </div>\n            ) : null}\n            <div className={style.title}>{title}</div>\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={{\n                        faSize: 14,\n                        wrapperSize: 16\n                      }}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n          </div>\n\n          <div className={style.ctaWrapper}>\n            <ButtonLink\n              type=\"secondary\"\n              onClick={onReviewClick}\n              label={translate('review_this_skill')}\n              disabled={!availableForReview}\n              customStyle={{\n                width: 'fit-content',\n                borderRadius: '12px'\n              }}\n            />\n            <ContinueLearningButton\n              ongoingCoursesAvailable={ongoingCoursesAvailable}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        {questionsToReview > 0 ? (\n          <div className={style.skillInformation} data-name=\"skill-questions\">\n            <span className={style.skillInformationNumber}>{questionsToReview}</span>\n            &nbsp;{translate('skill_chart_side_panel_questions_to_review')}\n          </div>\n        ) : null}\n        <div className={style.progressContainer}>\n          <ProgressBar />\n          <span className={style.progressInformationNumber}>{score.toFixed(1)}%</span>\n        </div>\n        <AllCourses\n          content={skillIncludedCourses}\n          filters={filters}\n          sorting={sorting}\n          totalContents={totalContents}\n          bannerMicrolearning={\n            bannerMicrolearningAction\n              ? {\n                  type: 'skill',\n                  action: bannerMicrolearningAction,\n                  oldSwitchValue\n                }\n              : {}\n          }\n          search={search}\n        />\n      </div>\n    </div>\n  );\n};\n\nSkillDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nSkillDetail.propTypes = {\n  title: PropTypes.string.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  sorting: PropTypes.shape(Select.propTypes),\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: {\n    action: PropTypes.func,\n    oldSwitchValue: PropTypes.bool\n  }\n};\n\nexport default SkillDetail;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "11.32.52-alpha.63+a20b8eb7c",
+  "version": "11.32.52-alpha.64+9342a48c1",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -178,5 +178,5 @@
     "last 2 versions",
     "IE 11"
   ],
-  "gitHead": "a20b8eb7cd21a2fcf7cbfd534b382bb08018fd0d"
+  "gitHead": "9342a48c1b3f3e0628c8e6b0daa55cf56ff9aee9"
 }