@coorpacademy/components 11.32.52-alpha.64 → 11.32.52

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

@@ -58,6 +58,10 @@ declare namespace CertificationDetail {
         }>>;
         const onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
         const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
+        const search: PropTypes.Requireable<PropTypes.InferProps<{
+            oldValue: PropTypes.Requireable<string>;
+            onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>;
     }
 }
 import PropTypes from "prop-types";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/certification-detail/index.js"],"names":[],"mappings":";AAgBA,4EAyHC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/certification-detail/index.js"],"names":[],"mappings":";AAgBA,4EA2HC"}

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

@@ -31,7 +31,8 @@ const CertificationDetail = (props, context) => {
     metrics,
     logoUrl,
     diplomaUrl,
-    badgeUrl
+    badgeUrl,
+    search
   } = props;
   const descriptionRef = useRef(null);
   const {
@@ -118,7 +119,8 @@ const CertificationDetail = (props, context) => {
   }), /*#__PURE__*/React.createElement(AllCourses, {
     content: certificationCourses,
     filters: filters,
-    "data-name": "certification-courses"
+    "data-name": "certification-courses",
+    search: search
   })));
 };
 
@@ -147,7 +149,11 @@ CertificationDetail.propTypes = process.env.NODE_ENV !== "production" ? {
     options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))
   }),
   onBackClick: PropTypes.func,
-  onContinueLearningClick: PropTypes.func
+  onContinueLearningClick: PropTypes.func,
+  search: PropTypes.shape({
+    oldValue: PropTypes.string,
+    onChange: PropTypes.func
+  })
 } : {};
 export default CertificationDetail;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useRef","useState","useMemo","PropTypes","classnames","Markdown","Provider","Tag","SelectOptionPropTypes","ButtonLinkIcon","Icon","CardsGrid","AllCourses","ContinueLearningButton","ProgressWrapper","style","CertificationDetail","props","context","certificationRef","title","tag","description","certificationCourses","ongoingCoursesAvailable","filters","onBackClick","onContinueLearningClick","metrics","logoUrl","diplomaUrl","badgeUrl","descriptionRef","translate","progression","mandatoryModules","stars","totalModules","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","truncate","completedModules","backgroundContainer","container","backButton","ctaContainer","logoContainer","logo","showMoreWrapper","faSize","wrapperSize","contentStats","type","downloadUrl","contextTypes","skin","childContextTypes","propTypes","string","isRequired","shape","number","bool","onChange","func","options","arrayOf"],"sources":["../../../src/template/certification-detail/index.js"],"sourcesContent":["import React, {useCallback, useEffect, useRef, useState, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {compact, lowerCase, round, isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport AllCourses from '../skill-detail/all-courses';\nimport {ContinueLearningButton} from '../skill-detail';\nimport ProgressWrapper from '../../molecule/progress-wrapper';\nimport style from './style.css';\n\nconst CertificationDetail = (props, context) => {\n  const {\n    certificationRef,\n    title,\n    tag,\n    description,\n    certificationCourses,\n    ongoingCoursesAvailable,\n    filters,\n    onBackClick,\n    onContinueLearningClick,\n    metrics,\n    logoUrl,\n    diplomaUrl,\n    badgeUrl\n  } = props;\n  const descriptionRef = useRef(null);\n  const {translate} = context;\n\n  const {progression, mandatoryModules, stars, totalModules} = metrics;\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 completedModules = useMemo(\n    () => round((mandatoryModules * progression) / 100),\n    [mandatoryModules, progression]\n  );\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={certificationRef}>\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 className={style.logoContainer}>\n            <img className={style.logo} src={logoUrl} />\n          </div>\n          <div>\n            <Tag label={tag} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {isDescriptionTruncated ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {translate(showMore ? 'Show less' : 'Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{faSize: 14, wrapperSize: 16}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n            <div className={style.contentStats}>\n              <span>{`${totalModules} ${lowerCase(translate('modules'))}`}</span>\n            </div>\n            <ContinueLearningButton\n              ongoingCoursesAvailable={ongoingCoursesAvailable}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        <ProgressWrapper\n          title={translate('your_progress')}\n          subtitle={translate('certification_progress_wrapper_subtitle')}\n          progression={progression}\n          completedModules={completedModules}\n          mandatoryModules={mandatoryModules}\n          sections={compact([\n            diplomaUrl && {\n              type: 'diploma',\n              downloadUrl: diplomaUrl\n            },\n            badgeUrl && {\n              type: 'badge',\n              downloadUrl: badgeUrl\n            },\n            stars && {\n              type: 'stars',\n              stars\n            }\n          ])}\n        />\n        <AllCourses\n          content={certificationCourses}\n          filters={filters}\n          data-name=\"certification-courses\"\n        />\n      </div>\n    </div>\n  );\n};\n\nCertificationDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nCertificationDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  tag: PropTypes.string,\n  certificationRef: PropTypes.string.isRequired,\n  description: PropTypes.string.isRequired,\n  logoUrl: PropTypes.string,\n  metrics: PropTypes.shape({\n    progression: PropTypes.number,\n    stars: PropTypes.number,\n    mandatoryModules: PropTypes.number,\n    totalModules: PropTypes.number\n  }),\n  diplomaUrl: PropTypes.string,\n  badgeUrl: PropTypes.string,\n  ongoingCoursesAvailable: PropTypes.bool,\n  certificationCourses: 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  onContinueLearningClick: PropTypes.func\n};\n\nexport default CertificationDetail;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useRef","useState","useMemo","PropTypes","classnames","Markdown","Provider","Tag","SelectOptionPropTypes","ButtonLinkIcon","Icon","CardsGrid","AllCourses","ContinueLearningButton","ProgressWrapper","style","CertificationDetail","props","context","certificationRef","title","tag","description","certificationCourses","ongoingCoursesAvailable","filters","onBackClick","onContinueLearningClick","metrics","logoUrl","diplomaUrl","badgeUrl","search","descriptionRef","translate","progression","mandatoryModules","stars","totalModules","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","truncate","completedModules","backgroundContainer","container","backButton","ctaContainer","logoContainer","logo","showMoreWrapper","faSize","wrapperSize","contentStats","type","downloadUrl","contextTypes","skin","childContextTypes","propTypes","string","isRequired","shape","number","bool","onChange","func","options","arrayOf","oldValue"],"sources":["../../../src/template/certification-detail/index.js"],"sourcesContent":["import React, {useCallback, useEffect, useRef, useState, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {compact, lowerCase, round, isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport AllCourses from '../skill-detail/all-courses';\nimport {ContinueLearningButton} from '../skill-detail';\nimport ProgressWrapper from '../../molecule/progress-wrapper';\nimport style from './style.css';\n\nconst CertificationDetail = (props, context) => {\n  const {\n    certificationRef,\n    title,\n    tag,\n    description,\n    certificationCourses,\n    ongoingCoursesAvailable,\n    filters,\n    onBackClick,\n    onContinueLearningClick,\n    metrics,\n    logoUrl,\n    diplomaUrl,\n    badgeUrl,\n    search\n  } = props;\n  const descriptionRef = useRef(null);\n  const {translate} = context;\n\n  const {progression, mandatoryModules, stars, totalModules} = metrics;\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 completedModules = useMemo(\n    () => round((mandatoryModules * progression) / 100),\n    [mandatoryModules, progression]\n  );\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={certificationRef}>\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 className={style.logoContainer}>\n            <img className={style.logo} src={logoUrl} />\n          </div>\n          <div>\n            <Tag label={tag} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {isDescriptionTruncated ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {translate(showMore ? 'Show less' : 'Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{faSize: 14, wrapperSize: 16}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n            <div className={style.contentStats}>\n              <span>{`${totalModules} ${lowerCase(translate('modules'))}`}</span>\n            </div>\n            <ContinueLearningButton\n              ongoingCoursesAvailable={ongoingCoursesAvailable}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        <ProgressWrapper\n          title={translate('your_progress')}\n          subtitle={translate('certification_progress_wrapper_subtitle')}\n          progression={progression}\n          completedModules={completedModules}\n          mandatoryModules={mandatoryModules}\n          sections={compact([\n            diplomaUrl && {\n              type: 'diploma',\n              downloadUrl: diplomaUrl\n            },\n            badgeUrl && {\n              type: 'badge',\n              downloadUrl: badgeUrl\n            },\n            stars && {\n              type: 'stars',\n              stars\n            }\n          ])}\n        />\n        <AllCourses\n          content={certificationCourses}\n          filters={filters}\n          data-name=\"certification-courses\"\n          search={search}\n        />\n      </div>\n    </div>\n  );\n};\n\nCertificationDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nCertificationDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  tag: PropTypes.string,\n  certificationRef: PropTypes.string.isRequired,\n  description: PropTypes.string.isRequired,\n  logoUrl: PropTypes.string,\n  metrics: PropTypes.shape({\n    progression: PropTypes.number,\n    stars: PropTypes.number,\n    mandatoryModules: PropTypes.number,\n    totalModules: PropTypes.number\n  }),\n  diplomaUrl: PropTypes.string,\n  badgeUrl: PropTypes.string,\n  ongoingCoursesAvailable: PropTypes.bool,\n  certificationCourses: 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  onContinueLearningClick: PropTypes.func,\n  search: PropTypes.shape({\n    oldValue: PropTypes.string,\n    onChange: PropTypes.func\n  })\n};\n\nexport default CertificationDetail;\n"],"mappings":"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"}

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

@@ -87,10 +87,10 @@ declare namespace PlaylistDetail {
         }>>;
         const onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
         const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
-        namespace bannerMicrolearning {
-            const action: PropTypes.Requireable<(...args: any[]) => any>;
-            const oldSwitchValue: PropTypes.Requireable<boolean>;
-        }
+        const bannerMicrolearning: PropTypes.Requireable<PropTypes.InferProps<{
+            action: PropTypes.Requireable<(...args: any[]) => any>;
+            oldSwitchValue: PropTypes.Requireable<boolean>;
+        }>>;
     }
 }
 import PropTypes from "prop-types";

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

@@ -126,10 +126,10 @@ PlaylistDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   }),
   onBackClick: PropTypes.func,
   onContinueLearningClick: PropTypes.func,
-  bannerMicrolearning: {
+  bannerMicrolearning: PropTypes.shape({
     action: PropTypes.func,
     oldSwitchValue: PropTypes.bool
-  }
+  })
 } : {};
 export default PlaylistDetail;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","useEffect","useRef","PropTypes","classnames","Markdown","Provider","Tag","Select","SelectOptionPropTypes","ButtonLinkIcon","Icon","CardsGrid","AllCourses","PlaylistDetailCover","ContinueLearningButton","style","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCoursesAvailable","playlistCourses","filters","sorting","onBackClick","onContinueLearningClick","search","bannerMicrolearning","descriptionRef","translate","action","bannerMicrolearningAction","oldSwitchValue","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","truncate","backgroundContainer","container","backButton","ctaContainer","coverWrapper","showMoreWrapper","faSize","wrapperSize","continueLearningButton","type","contextTypes","skin","childContextTypes","propTypes","string","isRequired","images","bool","shape","onChange","func","options","arrayOf","oldValue"],"sources":["../../../src/template/playlist-detail/index.js"],"sourcesContent":["import React, {useCallback, useState, useEffect, useRef} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport AllCourses from '../skill-detail/all-courses';\nimport PlaylistDetailCover from '../../molecule/playlist-detail-cover';\nimport {ContinueLearningButton} from '../skill-detail';\nimport style from './style.css';\n\nconst PlaylistDetail = (props, context) => {\n  const {\n    title,\n    coverImages,\n    playlistRef,\n    description,\n    ongoingCoursesAvailable,\n    playlistCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onContinueLearningClick,\n    search,\n    bannerMicrolearning = {}\n  } = props;\n  const descriptionRef = useRef(null);\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  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={playlistRef}>\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 className={style.coverWrapper}>\n            <PlaylistDetailCover images={coverImages} />\n          </div>\n          <div>\n            <Tag label={translate('playlist')} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {isDescriptionTruncated ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {translate(showMore ? 'Show less' : 'Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{faSize: 14, wrapperSize: 16}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n            <div className={style.continueLearningButton}>\n              <ContinueLearningButton\n                ongoingCoursesAvailable={ongoingCoursesAvailable}\n                onClick={onContinueLearningClick}\n              />\n            </div>\n          </div>\n        </div>\n        <AllCourses\n          content={playlistCourses}\n          filters={filters}\n          sorting={sorting}\n          bannerMicrolearning={\n            bannerMicrolearningAction\n              ? {\n                  type: 'playlist',\n                  action: bannerMicrolearningAction,\n                  oldSwitchValue\n                }\n              : {}\n          }\n          search={search}\n        />\n      </div>\n    </div>\n  );\n};\n\nPlaylistDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nPlaylistDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  coverImages: PlaylistDetailCover.propTypes.images,\n  playlistRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  ongoingCoursesAvailable: PropTypes.bool,\n  playlistCourses: 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  search: PropTypes.shape({\n    oldValue: PropTypes.string,\n    onChange: PropTypes.func\n  }),\n  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func,\n  bannerMicrolearning: {\n    action: PropTypes.func,\n    oldSwitchValue: PropTypes.bool\n  }\n};\n\nexport default PlaylistDetail;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","useEffect","useRef","PropTypes","classnames","Markdown","Provider","Tag","Select","SelectOptionPropTypes","ButtonLinkIcon","Icon","CardsGrid","AllCourses","PlaylistDetailCover","ContinueLearningButton","style","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCoursesAvailable","playlistCourses","filters","sorting","onBackClick","onContinueLearningClick","search","bannerMicrolearning","descriptionRef","translate","action","bannerMicrolearningAction","oldSwitchValue","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","truncate","backgroundContainer","container","backButton","ctaContainer","coverWrapper","showMoreWrapper","faSize","wrapperSize","continueLearningButton","type","contextTypes","skin","childContextTypes","propTypes","string","isRequired","images","bool","shape","onChange","func","options","arrayOf","oldValue"],"sources":["../../../src/template/playlist-detail/index.js"],"sourcesContent":["import React, {useCallback, useState, useEffect, useRef} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport AllCourses from '../skill-detail/all-courses';\nimport PlaylistDetailCover from '../../molecule/playlist-detail-cover';\nimport {ContinueLearningButton} from '../skill-detail';\nimport style from './style.css';\n\nconst PlaylistDetail = (props, context) => {\n  const {\n    title,\n    coverImages,\n    playlistRef,\n    description,\n    ongoingCoursesAvailable,\n    playlistCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onContinueLearningClick,\n    search,\n    bannerMicrolearning = {}\n  } = props;\n  const descriptionRef = useRef(null);\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  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={playlistRef}>\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 className={style.coverWrapper}>\n            <PlaylistDetailCover images={coverImages} />\n          </div>\n          <div>\n            <Tag label={translate('playlist')} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {isDescriptionTruncated ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {translate(showMore ? 'Show less' : 'Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{faSize: 14, wrapperSize: 16}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n            <div className={style.continueLearningButton}>\n              <ContinueLearningButton\n                ongoingCoursesAvailable={ongoingCoursesAvailable}\n                onClick={onContinueLearningClick}\n              />\n            </div>\n          </div>\n        </div>\n        <AllCourses\n          content={playlistCourses}\n          filters={filters}\n          sorting={sorting}\n          bannerMicrolearning={\n            bannerMicrolearningAction\n              ? {\n                  type: 'playlist',\n                  action: bannerMicrolearningAction,\n                  oldSwitchValue\n                }\n              : {}\n          }\n          search={search}\n        />\n      </div>\n    </div>\n  );\n};\n\nPlaylistDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nPlaylistDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  coverImages: PlaylistDetailCover.propTypes.images,\n  playlistRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  ongoingCoursesAvailable: PropTypes.bool,\n  playlistCourses: 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  search: PropTypes.shape({\n    oldValue: PropTypes.string,\n    onChange: PropTypes.func\n  }),\n  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func,\n  bannerMicrolearning: PropTypes.shape({\n    action: PropTypes.func,\n    oldSwitchValue: PropTypes.bool\n  })\n};\n\nexport default PlaylistDetail;\n"],"mappings":"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"}

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

@@ -127,10 +127,10 @@ declare namespace SkillDetail {
             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>;
-        }
+        export const bannerMicrolearning: PropTypes.Requireable<PropTypes.InferProps<{
+            action: PropTypes.Requireable<(...args: any[]) => any>;
+            oldSwitchValue: PropTypes.Requireable<boolean>;
+        }>>;
     }
     export { propTypes_1 as propTypes };
 }

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

@@ -220,10 +220,10 @@ SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
     oldValue: PropTypes.string,
     onChange: PropTypes.func
   }),
-  bannerMicrolearning: {
+  bannerMicrolearning: PropTypes.shape({
     action: PropTypes.func,
     oldSwitchValue: PropTypes.bool
-  }
+  })
 } : {};
 export default SkillDetail;
 //# sourceMappingURL=index.js.map

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","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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"}
+{"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: PropTypes.shape({\n    action: PropTypes.func,\n    oldSwitchValue: PropTypes.bool\n  })\n};\n\nexport default SkillDetail;\n"],"mappings":"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"}

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

@@ -58,6 +58,10 @@ declare namespace CertificationDetail {
         }>>;
         const onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
         const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
+        const search: PropTypes.Requireable<PropTypes.InferProps<{
+            oldValue: PropTypes.Requireable<string>;
+            onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>;
     }
 }
 import PropTypes from "prop-types";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/certification-detail/index.js"],"names":[],"mappings":";AAgBA,4EAyHC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/certification-detail/index.js"],"names":[],"mappings":";AAgBA,4EA2HC"}

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

@@ -59,7 +59,8 @@ const CertificationDetail = (props, context) => {
     metrics,
     logoUrl,
     diplomaUrl,
-    badgeUrl
+    badgeUrl,
+    search
   } = props;
   const descriptionRef = (0, _react.useRef)(null);
   const {
@@ -146,7 +147,8 @@ const CertificationDetail = (props, context) => {
   }), /*#__PURE__*/_react.default.createElement(_allCourses.default, {
     content: certificationCourses,
     filters: filters,
-    "data-name": "certification-courses"
+    "data-name": "certification-courses",
+    search: search
   })));
 };
 
@@ -175,7 +177,11 @@ CertificationDetail.propTypes = process.env.NODE_ENV !== "production" ? {
     options: _propTypes.default.arrayOf(_propTypes.default.shape(_select.SelectOptionPropTypes))
   }),
   onBackClick: _propTypes.default.func,
-  onContinueLearningClick: _propTypes.default.func
+  onContinueLearningClick: _propTypes.default.func,
+  search: _propTypes.default.shape({
+    oldValue: _propTypes.default.string,
+    onChange: _propTypes.default.func
+  })
 } : {};
 var _default = CertificationDetail;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["CertificationDetail","props","context","certificationRef","title","tag","description","certificationCourses","ongoingCoursesAvailable","filters","onBackClick","onContinueLearningClick","metrics","logoUrl","diplomaUrl","badgeUrl","descriptionRef","useRef","translate","progression","mandatoryModules","stars","totalModules","isDescriptionTruncated","setIsDescriptionTruncated","useState","showMore","setShowMore","handleShowMore","useCallback","useEffect","current","clientHeight","scrollHeight","Description","classnames","style","truncate","completedModules","useMemo","backgroundContainer","container","backButton","ctaContainer","logoContainer","logo","showMoreWrapper","faSize","wrapperSize","contentStats","type","downloadUrl","contextTypes","skin","Provider","childContextTypes","propTypes","PropTypes","string","isRequired","shape","number","bool","CardsGrid","onChange","func","options","arrayOf","SelectOptionPropTypes"],"sources":["../../../src/template/certification-detail/index.js"],"sourcesContent":["import React, {useCallback, useEffect, useRef, useState, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {compact, lowerCase, round, isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport AllCourses from '../skill-detail/all-courses';\nimport {ContinueLearningButton} from '../skill-detail';\nimport ProgressWrapper from '../../molecule/progress-wrapper';\nimport style from './style.css';\n\nconst CertificationDetail = (props, context) => {\n  const {\n    certificationRef,\n    title,\n    tag,\n    description,\n    certificationCourses,\n    ongoingCoursesAvailable,\n    filters,\n    onBackClick,\n    onContinueLearningClick,\n    metrics,\n    logoUrl,\n    diplomaUrl,\n    badgeUrl\n  } = props;\n  const descriptionRef = useRef(null);\n  const {translate} = context;\n\n  const {progression, mandatoryModules, stars, totalModules} = metrics;\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 completedModules = useMemo(\n    () => round((mandatoryModules * progression) / 100),\n    [mandatoryModules, progression]\n  );\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={certificationRef}>\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 className={style.logoContainer}>\n            <img className={style.logo} src={logoUrl} />\n          </div>\n          <div>\n            <Tag label={tag} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {isDescriptionTruncated ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {translate(showMore ? 'Show less' : 'Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{faSize: 14, wrapperSize: 16}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n            <div className={style.contentStats}>\n              <span>{`${totalModules} ${lowerCase(translate('modules'))}`}</span>\n            </div>\n            <ContinueLearningButton\n              ongoingCoursesAvailable={ongoingCoursesAvailable}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        <ProgressWrapper\n          title={translate('your_progress')}\n          subtitle={translate('certification_progress_wrapper_subtitle')}\n          progression={progression}\n          completedModules={completedModules}\n          mandatoryModules={mandatoryModules}\n          sections={compact([\n            diplomaUrl && {\n              type: 'diploma',\n              downloadUrl: diplomaUrl\n            },\n            badgeUrl && {\n              type: 'badge',\n              downloadUrl: badgeUrl\n            },\n            stars && {\n              type: 'stars',\n              stars\n            }\n          ])}\n        />\n        <AllCourses\n          content={certificationCourses}\n          filters={filters}\n          data-name=\"certification-courses\"\n        />\n      </div>\n    </div>\n  );\n};\n\nCertificationDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nCertificationDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  tag: PropTypes.string,\n  certificationRef: PropTypes.string.isRequired,\n  description: PropTypes.string.isRequired,\n  logoUrl: PropTypes.string,\n  metrics: PropTypes.shape({\n    progression: PropTypes.number,\n    stars: PropTypes.number,\n    mandatoryModules: PropTypes.number,\n    totalModules: PropTypes.number\n  }),\n  diplomaUrl: PropTypes.string,\n  badgeUrl: PropTypes.string,\n  ongoingCoursesAvailable: PropTypes.bool,\n  certificationCourses: 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  onContinueLearningClick: PropTypes.func\n};\n\nexport default CertificationDetail;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["CertificationDetail","props","context","certificationRef","title","tag","description","certificationCourses","ongoingCoursesAvailable","filters","onBackClick","onContinueLearningClick","metrics","logoUrl","diplomaUrl","badgeUrl","search","descriptionRef","useRef","translate","progression","mandatoryModules","stars","totalModules","isDescriptionTruncated","setIsDescriptionTruncated","useState","showMore","setShowMore","handleShowMore","useCallback","useEffect","current","clientHeight","scrollHeight","Description","classnames","style","truncate","completedModules","useMemo","backgroundContainer","container","backButton","ctaContainer","logoContainer","logo","showMoreWrapper","faSize","wrapperSize","contentStats","type","downloadUrl","contextTypes","skin","Provider","childContextTypes","propTypes","PropTypes","string","isRequired","shape","number","bool","CardsGrid","onChange","func","options","arrayOf","SelectOptionPropTypes","oldValue"],"sources":["../../../src/template/certification-detail/index.js"],"sourcesContent":["import React, {useCallback, useEffect, useRef, useState, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {compact, lowerCase, round, isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport AllCourses from '../skill-detail/all-courses';\nimport {ContinueLearningButton} from '../skill-detail';\nimport ProgressWrapper from '../../molecule/progress-wrapper';\nimport style from './style.css';\n\nconst CertificationDetail = (props, context) => {\n  const {\n    certificationRef,\n    title,\n    tag,\n    description,\n    certificationCourses,\n    ongoingCoursesAvailable,\n    filters,\n    onBackClick,\n    onContinueLearningClick,\n    metrics,\n    logoUrl,\n    diplomaUrl,\n    badgeUrl,\n    search\n  } = props;\n  const descriptionRef = useRef(null);\n  const {translate} = context;\n\n  const {progression, mandatoryModules, stars, totalModules} = metrics;\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 completedModules = useMemo(\n    () => round((mandatoryModules * progression) / 100),\n    [mandatoryModules, progression]\n  );\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={certificationRef}>\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 className={style.logoContainer}>\n            <img className={style.logo} src={logoUrl} />\n          </div>\n          <div>\n            <Tag label={tag} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {isDescriptionTruncated ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {translate(showMore ? 'Show less' : 'Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{faSize: 14, wrapperSize: 16}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n            <div className={style.contentStats}>\n              <span>{`${totalModules} ${lowerCase(translate('modules'))}`}</span>\n            </div>\n            <ContinueLearningButton\n              ongoingCoursesAvailable={ongoingCoursesAvailable}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        <ProgressWrapper\n          title={translate('your_progress')}\n          subtitle={translate('certification_progress_wrapper_subtitle')}\n          progression={progression}\n          completedModules={completedModules}\n          mandatoryModules={mandatoryModules}\n          sections={compact([\n            diplomaUrl && {\n              type: 'diploma',\n              downloadUrl: diplomaUrl\n            },\n            badgeUrl && {\n              type: 'badge',\n              downloadUrl: badgeUrl\n            },\n            stars && {\n              type: 'stars',\n              stars\n            }\n          ])}\n        />\n        <AllCourses\n          content={certificationCourses}\n          filters={filters}\n          data-name=\"certification-courses\"\n          search={search}\n        />\n      </div>\n    </div>\n  );\n};\n\nCertificationDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nCertificationDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  tag: PropTypes.string,\n  certificationRef: PropTypes.string.isRequired,\n  description: PropTypes.string.isRequired,\n  logoUrl: PropTypes.string,\n  metrics: PropTypes.shape({\n    progression: PropTypes.number,\n    stars: PropTypes.number,\n    mandatoryModules: PropTypes.number,\n    totalModules: PropTypes.number\n  }),\n  diplomaUrl: PropTypes.string,\n  badgeUrl: PropTypes.string,\n  ongoingCoursesAvailable: PropTypes.bool,\n  certificationCourses: 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  onContinueLearningClick: PropTypes.func,\n  search: PropTypes.shape({\n    oldValue: PropTypes.string,\n    onChange: PropTypes.func\n  })\n};\n\nexport default CertificationDetail;\n"],"mappings":"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"}

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

@@ -87,10 +87,10 @@ declare namespace PlaylistDetail {
         }>>;
         const onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
         const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
-        namespace bannerMicrolearning {
-            const action: PropTypes.Requireable<(...args: any[]) => any>;
-            const oldSwitchValue: PropTypes.Requireable<boolean>;
-        }
+        const bannerMicrolearning: PropTypes.Requireable<PropTypes.InferProps<{
+            action: PropTypes.Requireable<(...args: any[]) => any>;
+            oldSwitchValue: PropTypes.Requireable<boolean>;
+        }>>;
     }
 }
 import PropTypes from "prop-types";

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

@@ -151,10 +151,10 @@ PlaylistDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   }),
   onBackClick: _propTypes.default.func,
   onContinueLearningClick: _propTypes.default.func,
-  bannerMicrolearning: {
+  bannerMicrolearning: _propTypes.default.shape({
     action: _propTypes.default.func,
     oldSwitchValue: _propTypes.default.bool
-  }
+  })
 } : {};
 var _default = PlaylistDetail;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCoursesAvailable","playlistCourses","filters","sorting","onBackClick","onContinueLearningClick","search","bannerMicrolearning","descriptionRef","useRef","translate","action","bannerMicrolearningAction","oldSwitchValue","isDescriptionTruncated","setIsDescriptionTruncated","useState","showMore","setShowMore","handleShowMore","useCallback","useEffect","current","clientHeight","scrollHeight","Description","classnames","style","truncate","backgroundContainer","container","backButton","ctaContainer","coverWrapper","showMoreWrapper","faSize","wrapperSize","continueLearningButton","type","contextTypes","skin","Provider","childContextTypes","propTypes","PropTypes","string","isRequired","PlaylistDetailCover","images","bool","shape","CardsGrid","onChange","func","options","arrayOf","SelectOptionPropTypes","Select","oldValue"],"sources":["../../../src/template/playlist-detail/index.js"],"sourcesContent":["import React, {useCallback, useState, useEffect, useRef} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport AllCourses from '../skill-detail/all-courses';\nimport PlaylistDetailCover from '../../molecule/playlist-detail-cover';\nimport {ContinueLearningButton} from '../skill-detail';\nimport style from './style.css';\n\nconst PlaylistDetail = (props, context) => {\n  const {\n    title,\n    coverImages,\n    playlistRef,\n    description,\n    ongoingCoursesAvailable,\n    playlistCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onContinueLearningClick,\n    search,\n    bannerMicrolearning = {}\n  } = props;\n  const descriptionRef = useRef(null);\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  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={playlistRef}>\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 className={style.coverWrapper}>\n            <PlaylistDetailCover images={coverImages} />\n          </div>\n          <div>\n            <Tag label={translate('playlist')} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {isDescriptionTruncated ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {translate(showMore ? 'Show less' : 'Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{faSize: 14, wrapperSize: 16}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n            <div className={style.continueLearningButton}>\n              <ContinueLearningButton\n                ongoingCoursesAvailable={ongoingCoursesAvailable}\n                onClick={onContinueLearningClick}\n              />\n            </div>\n          </div>\n        </div>\n        <AllCourses\n          content={playlistCourses}\n          filters={filters}\n          sorting={sorting}\n          bannerMicrolearning={\n            bannerMicrolearningAction\n              ? {\n                  type: 'playlist',\n                  action: bannerMicrolearningAction,\n                  oldSwitchValue\n                }\n              : {}\n          }\n          search={search}\n        />\n      </div>\n    </div>\n  );\n};\n\nPlaylistDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nPlaylistDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  coverImages: PlaylistDetailCover.propTypes.images,\n  playlistRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  ongoingCoursesAvailable: PropTypes.bool,\n  playlistCourses: 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  search: PropTypes.shape({\n    oldValue: PropTypes.string,\n    onChange: PropTypes.func\n  }),\n  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func,\n  bannerMicrolearning: {\n    action: PropTypes.func,\n    oldSwitchValue: PropTypes.bool\n  }\n};\n\nexport default PlaylistDetail;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCoursesAvailable","playlistCourses","filters","sorting","onBackClick","onContinueLearningClick","search","bannerMicrolearning","descriptionRef","useRef","translate","action","bannerMicrolearningAction","oldSwitchValue","isDescriptionTruncated","setIsDescriptionTruncated","useState","showMore","setShowMore","handleShowMore","useCallback","useEffect","current","clientHeight","scrollHeight","Description","classnames","style","truncate","backgroundContainer","container","backButton","ctaContainer","coverWrapper","showMoreWrapper","faSize","wrapperSize","continueLearningButton","type","contextTypes","skin","Provider","childContextTypes","propTypes","PropTypes","string","isRequired","PlaylistDetailCover","images","bool","shape","CardsGrid","onChange","func","options","arrayOf","SelectOptionPropTypes","Select","oldValue"],"sources":["../../../src/template/playlist-detail/index.js"],"sourcesContent":["import React, {useCallback, useState, useEffect, useRef} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport AllCourses from '../skill-detail/all-courses';\nimport PlaylistDetailCover from '../../molecule/playlist-detail-cover';\nimport {ContinueLearningButton} from '../skill-detail';\nimport style from './style.css';\n\nconst PlaylistDetail = (props, context) => {\n  const {\n    title,\n    coverImages,\n    playlistRef,\n    description,\n    ongoingCoursesAvailable,\n    playlistCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onContinueLearningClick,\n    search,\n    bannerMicrolearning = {}\n  } = props;\n  const descriptionRef = useRef(null);\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  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={playlistRef}>\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 className={style.coverWrapper}>\n            <PlaylistDetailCover images={coverImages} />\n          </div>\n          <div>\n            <Tag label={translate('playlist')} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {isDescriptionTruncated ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {translate(showMore ? 'Show less' : 'Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{faSize: 14, wrapperSize: 16}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n            <div className={style.continueLearningButton}>\n              <ContinueLearningButton\n                ongoingCoursesAvailable={ongoingCoursesAvailable}\n                onClick={onContinueLearningClick}\n              />\n            </div>\n          </div>\n        </div>\n        <AllCourses\n          content={playlistCourses}\n          filters={filters}\n          sorting={sorting}\n          bannerMicrolearning={\n            bannerMicrolearningAction\n              ? {\n                  type: 'playlist',\n                  action: bannerMicrolearningAction,\n                  oldSwitchValue\n                }\n              : {}\n          }\n          search={search}\n        />\n      </div>\n    </div>\n  );\n};\n\nPlaylistDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nPlaylistDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  coverImages: PlaylistDetailCover.propTypes.images,\n  playlistRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  ongoingCoursesAvailable: PropTypes.bool,\n  playlistCourses: 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  search: PropTypes.shape({\n    oldValue: PropTypes.string,\n    onChange: PropTypes.func\n  }),\n  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func,\n  bannerMicrolearning: PropTypes.shape({\n    action: PropTypes.func,\n    oldSwitchValue: PropTypes.bool\n  })\n};\n\nexport default PlaylistDetail;\n"],"mappings":"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"}

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

@@ -127,10 +127,10 @@ declare namespace SkillDetail {
             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>;
-        }
+        export const bannerMicrolearning: PropTypes.Requireable<PropTypes.InferProps<{
+            action: PropTypes.Requireable<(...args: any[]) => any>;
+            oldSwitchValue: PropTypes.Requireable<boolean>;
+        }>>;
     }
     export { propTypes_1 as propTypes };
 }

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

@@ -246,10 +246,10 @@ SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
     oldValue: _propTypes.default.string,
     onChange: _propTypes.default.func
   }),
-  bannerMicrolearning: {
+  bannerMicrolearning: _propTypes.default.shape({
     action: _propTypes.default.func,
     oldSwitchValue: _propTypes.default.bool
-  }
+  })
 } : {};
 var _default = SkillDetail;
 exports.default = _default;

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","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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"}
+{"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: PropTypes.shape({\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.64+9342a48c1",
+  "version": "11.32.52",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -178,5 +178,5 @@
     "last 2 versions",
     "IE 11"
   ],
-  "gitHead": "9342a48c1b3f3e0628c8e6b0daa55cf56ff9aee9"
+  "gitHead": "e5146830dbafd71879e2e5ad267c109c492bee3a"
 }