@coorpacademy/components 11.32.38-alpha.39.2 → 11.32.38-alpha.4.2

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

@@ -29,7 +29,6 @@ declare namespace CertificationDetail {
         const title: PropTypes.Validator<string>;
         const certificationRef: PropTypes.Validator<string>;
         const description: PropTypes.Requireable<string>;
-        const searchValue: PropTypes.Requireable<string>;
         const logoUrl: PropTypes.Requireable<string>;
         const metrics: PropTypes.Requireable<PropTypes.InferProps<{
             progression: PropTypes.Requireable<number>;
@@ -58,7 +57,6 @@ declare namespace CertificationDetail {
         }>>;
         const onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
         const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
-        const onSearchChange: 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":";AAiBA,4EA8GC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/certification-detail/index.js"],"names":[],"mappings":";AAiBA,4EA0GC"}

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

@@ -22,13 +22,11 @@ const CertificationDetail = (props, context) => {
     certificationRef,
     title,
     description,
-    searchValue,
     certificationCourses,
     ongoingCoursesAvailable,
     filters,
     onBackClick,
     onContinueLearningClick,
-    onSearchChange,
     metrics,
     logoUrl,
     diplomaUrl,
@@ -107,9 +105,7 @@ const CertificationDetail = (props, context) => {
   }), /*#__PURE__*/React.createElement(AllCourses, {
     content: certificationCourses,
     filters: filters,
-    "data-name": "certification-courses",
-    searchValue: searchValue,
-    onSearchChange: onSearchChange
+    "data-name": "certification-courses"
   })));
 };
 
@@ -121,7 +117,6 @@ CertificationDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   title: PropTypes.string.isRequired,
   certificationRef: PropTypes.string.isRequired,
   description: PropTypes.string,
-  searchValue: PropTypes.string,
   logoUrl: PropTypes.string,
   metrics: PropTypes.shape({
     progression: PropTypes.number,
@@ -138,8 +133,7 @@ CertificationDetail.propTypes = process.env.NODE_ENV !== "production" ? {
     options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))
   }),
   onBackClick: PropTypes.func,
-  onContinueLearningClick: PropTypes.func,
-  onSearchChange: PropTypes.func
+  onContinueLearningClick: 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","useState","useMemo","PropTypes","classnames","Provider","Tag","SelectOptionPropTypes","ButtonLinkIcon","Icon","CardsGrid","AllCourses","ContinueLearningButton","ProgressWrapper","style","DESCRIPTION_BREAKPOINT","CertificationDetail","props","context","certificationRef","title","description","searchValue","certificationCourses","ongoingCoursesAvailable","filters","onBackClick","onContinueLearningClick","onSearchChange","metrics","logoUrl","diplomaUrl","badgeUrl","translate","progression","mandatoryModules","stars","totalModules","showMore","setShowMore","handleShowMore","Description","truncate","completedModules","backgroundContainer","container","backButton","ctaContainer","logoContainer","logo","length","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, useState, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {compact, lowerCase, round, isNil} from 'lodash/fp';\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 DESCRIPTION_BREAKPOINT = 382;\n\nconst CertificationDetail = (props, context) => {\n  const {\n    certificationRef,\n    title,\n    description,\n    searchValue,\n    certificationCourses,\n    ongoingCoursesAvailable,\n    filters,\n    onBackClick,\n    onContinueLearningClick,\n    onSearchChange,\n    metrics,\n    logoUrl,\n    diplomaUrl,\n    badgeUrl\n  } = props;\n  const {translate} = context;\n  const {progression, mandatoryModules, stars, totalModules} = metrics;\n\n  const [showMore, setShowMore] = useState(false);\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        {description}\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=\"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={translate('certification')} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {description.length >= DESCRIPTION_BREAKPOINT ? (\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            {\n              type: 'diploma',\n              downloadUrl: diplomaUrl\n            },\n            badgeUrl && {\n              type: 'badge',\n              downloadUrl: badgeUrl\n            },\n            {\n              type: 'stars',\n              stars\n            }\n          ])}\n        />\n        <AllCourses\n          content={certificationCourses}\n          filters={filters}\n          data-name=\"certification-courses\"\n          searchValue={searchValue}\n          onSearchChange={onSearchChange}\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  certificationRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  searchValue: PropTypes.string,\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  onSearchChange: PropTypes.func\n};\n\nexport default CertificationDetail;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","useMemo","PropTypes","classnames","Provider","Tag","SelectOptionPropTypes","ButtonLinkIcon","Icon","CardsGrid","AllCourses","ContinueLearningButton","ProgressWrapper","style","DESCRIPTION_BREAKPOINT","CertificationDetail","props","context","certificationRef","title","description","certificationCourses","ongoingCoursesAvailable","filters","onBackClick","onContinueLearningClick","metrics","logoUrl","diplomaUrl","badgeUrl","translate","progression","mandatoryModules","stars","totalModules","showMore","setShowMore","handleShowMore","Description","truncate","completedModules","backgroundContainer","container","backButton","ctaContainer","logoContainer","logo","length","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, useState, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {compact, lowerCase, round, isNil} from 'lodash/fp';\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 DESCRIPTION_BREAKPOINT = 382;\n\nconst CertificationDetail = (props, context) => {\n  const {\n    certificationRef,\n    title,\n    description,\n    certificationCourses,\n    ongoingCoursesAvailable,\n    filters,\n    onBackClick,\n    onContinueLearningClick,\n    metrics,\n    logoUrl,\n    diplomaUrl,\n    badgeUrl\n  } = props;\n  const {translate} = context;\n  const {progression, mandatoryModules, stars, totalModules} = metrics;\n\n  const [showMore, setShowMore] = useState(false);\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        {description}\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=\"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={translate('certification')} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {description.length >= DESCRIPTION_BREAKPOINT ? (\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            {\n              type: 'diploma',\n              downloadUrl: diplomaUrl\n            },\n            badgeUrl && {\n              type: 'badge',\n              downloadUrl: badgeUrl\n            },\n            {\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  certificationRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\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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"}

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

@@ -33,7 +33,6 @@ declare namespace PlaylistDetail {
         }> | null | undefined)[]>;
         const playlistRef: PropTypes.Validator<string>;
         const description: PropTypes.Requireable<string>;
-        const searchValue: PropTypes.Requireable<string>;
         const ongoingCoursesAvailable: PropTypes.Requireable<boolean>;
         const playlistCourses: PropTypes.Requireable<PropTypes.InferProps<{
             list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
@@ -84,7 +83,6 @@ declare namespace PlaylistDetail {
         }>>;
         const onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
         const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
-        const onSearchChange: PropTypes.Requireable<(...args: any[]) => any>;
     }
 }
 import PropTypes from "prop-types";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/playlist-detail/index.js"],"names":[],"mappings":";AAiBA,uEAiFC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/playlist-detail/index.js"],"names":[],"mappings":";AAiBA,uEAyEC"}

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

@@ -20,14 +20,12 @@ const PlaylistDetail = (props, context) => {
     coverImages,
     playlistRef,
     description,
-    searchValue,
     ongoingCoursesAvailable,
     playlistCourses,
     filters,
     sorting,
     onBackClick,
-    onContinueLearningClick,
-    onSearchChange
+    onContinueLearningClick
   } = props;
   const {
     translate
@@ -78,9 +76,7 @@ const PlaylistDetail = (props, context) => {
   })))), /*#__PURE__*/React.createElement(AllCourses, {
     content: playlistCourses,
     filters: filters,
-    sorting: sorting,
-    searchValue: searchValue,
-    onSearchChange: onSearchChange
+    sorting: sorting
   })));
 };
 
@@ -93,7 +89,6 @@ PlaylistDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   coverImages: PlaylistDetailCover.propTypes.images,
   playlistRef: PropTypes.string.isRequired,
   description: PropTypes.string,
-  searchValue: PropTypes.string,
   ongoingCoursesAvailable: PropTypes.bool,
   playlistCourses: PropTypes.shape(CardsGrid.propTypes),
   filters: PropTypes.shape({
@@ -102,8 +97,7 @@ PlaylistDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   }),
   sorting: PropTypes.shape(Select.propTypes),
   onBackClick: PropTypes.func,
-  onContinueLearningClick: PropTypes.func,
-  onSearchChange: PropTypes.func
+  onContinueLearningClick: PropTypes.func
 } : {};
 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","PropTypes","classnames","Provider","Tag","Select","SelectOptionPropTypes","ButtonLinkIcon","Icon","CardsGrid","AllCourses","PlaylistDetailCover","ContinueLearningButton","style","DESCRIPTION_BREAKPOINT","PlaylistDetail","props","context","title","coverImages","playlistRef","description","searchValue","ongoingCoursesAvailable","playlistCourses","filters","sorting","onBackClick","onContinueLearningClick","onSearchChange","translate","showMore","setShowMore","handleShowMore","Description","truncate","backgroundContainer","container","backButton","ctaContainer","coverWrapper","length","showMoreWrapper","faSize","wrapperSize","continueLearningButton","contextTypes","skin","childContextTypes","propTypes","string","isRequired","images","bool","shape","onChange","func","options","arrayOf"],"sources":["../../../src/template/playlist-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isNil} from 'lodash/fp';\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 DESCRIPTION_BREAKPOINT = 382;\n\nconst PlaylistDetail = (props, context) => {\n  const {\n    title,\n    coverImages,\n    playlistRef,\n    description,\n    searchValue,\n    ongoingCoursesAvailable,\n    playlistCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onContinueLearningClick,\n    onSearchChange\n  } = props;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        {description}\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=\"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                {description.length >= DESCRIPTION_BREAKPOINT ? (\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          searchValue={searchValue}\n          onSearchChange={onSearchChange}\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  searchValue: 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  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func,\n  onSearchChange: PropTypes.func\n};\n\nexport default PlaylistDetail;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","classnames","Provider","Tag","Select","SelectOptionPropTypes","ButtonLinkIcon","Icon","CardsGrid","AllCourses","PlaylistDetailCover","ContinueLearningButton","style","DESCRIPTION_BREAKPOINT","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCoursesAvailable","playlistCourses","filters","sorting","onBackClick","onContinueLearningClick","translate","showMore","setShowMore","handleShowMore","Description","truncate","backgroundContainer","container","backButton","ctaContainer","coverWrapper","length","showMoreWrapper","faSize","wrapperSize","continueLearningButton","contextTypes","skin","childContextTypes","propTypes","string","isRequired","images","bool","shape","onChange","func","options","arrayOf"],"sources":["../../../src/template/playlist-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isNil} from 'lodash/fp';\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 DESCRIPTION_BREAKPOINT = 382;\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  } = props;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        {description}\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=\"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                {description.length >= DESCRIPTION_BREAKPOINT ? (\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 content={playlistCourses} filters={filters} sorting={sorting} />\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  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default PlaylistDetail;\n"],"mappings":"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"}

package/es/template/skill-detail/all-courses.d.ts

@@ -33,7 +33,6 @@ declare namespace AllCourses {
             }>;
             loading: PropTypes.Requireable<boolean>;
         }>>;
-        const searchValue: PropTypes.Requireable<string>;
         const totalContents: PropTypes.Requireable<number>;
         const filters: PropTypes.Requireable<PropTypes.InferProps<{
             onChange: PropTypes.Requireable<(...args: any[]) => any>;
@@ -44,7 +43,6 @@ declare namespace AllCourses {
                 validOption: PropTypes.Requireable<boolean>;
             }> | null | undefined)[]>;
         }>>;
-        const onSearchChange: PropTypes.Requireable<(...args: any[]) => any>;
         const sorting: PropTypes.Requireable<PropTypes.InferProps<{
             title: PropTypes.Requireable<string>;
             name: PropTypes.Requireable<string>;

package/es/template/skill-detail/all-courses.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"all-courses.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/all-courses.js"],"names":[],"mappings":";AAgDA,mEAmIC"}
+{"version":3,"file":"all-courses.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/all-courses.js"],"names":[],"mappings":";AAgDA,mEA2HC"}

package/es/template/skill-detail/all-courses.js

@@ -67,9 +67,7 @@ const AllCourses = (props, context) => {
     content,
     filters,
     sorting,
-    totalContents,
-    searchValue: _searchValue,
-    onSearchChange
+    totalContents
   } = props;
   const {
     options,
@@ -83,7 +81,7 @@ const AllCourses = (props, context) => {
     translate
   } = context;
   const [showCompleted, setShowCompleted] = useState(true);
-  const searchValue = useMemo(() => _searchValue, [_searchValue]);
+  const [searchValue, setSearchValue] = useState('');
   const sortView = sorting !== undefined ? /*#__PURE__*/React.createElement("div", {
     "data-name": "choice"
   }, /*#__PURE__*/React.createElement(Select, _extends({}, sorting, {
@@ -96,11 +94,11 @@ const AllCourses = (props, context) => {
     return _filter(skill => searchValueIncluded(skill.title, searchValue), filteredContent);
   }, [filteredContent, searchValue]);
   const handleSearch = useCallback(value => {
-    onSearchChange(value);
-  }, [onSearchChange]);
+    setSearchValue(value);
+  }, [setSearchValue]);
   const handleSearchReset = useCallback(() => {
-    onSearchChange('');
-  }, [onSearchChange]);
+    setSearchValue('');
+  }, [setSearchValue]);
   const handleShowCompletedToggle = useCallback(() => {
     setShowCompleted(prevShowCompleted => !prevShowCompleted);
   }, []);
@@ -145,7 +143,6 @@ const AllCourses = (props, context) => {
 
     function handleFilterChange() {
       onChange(value);
-      handleSearchReset();
     }
 
     return /*#__PURE__*/React.createElement("div", {
@@ -186,13 +183,11 @@ AllCourses.contextTypes = {
 };
 AllCourses.propTypes = process.env.NODE_ENV !== "production" ? {
   content: PropTypes.shape(CardsGrid.propTypes),
-  searchValue: PropTypes.string,
   totalContents: PropTypes.number,
   filters: PropTypes.shape({
     onChange: PropTypes.func,
     options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))
   }),
-  onSearchChange: PropTypes.func,
   sorting: PropTypes.shape(Select.propTypes)
 } : {};
 export default AllCourses;

package/es/template/skill-detail/all-courses.js.map

@@ -1 +1 @@
-{"version":3,"file":"all-courses.js","names":["React","useState","useCallback","useMemo","PropTypes","Provider","Select","SelectOptionPropTypes","ButtonLink","SearchForm","CardsGrid","searchValueIncluded","InputSwitch","style","uncappedMap","convert","cap","FilterButton","props","context","dataName","ariaLabel","selected","label","onClick","skin","primarySkinColor","buttonProps","customStyle","backgroundColor","color","transition","width","contextTypes","childContextTypes","translate","propTypes","string","bool","func","AllCourses","content","filters","sorting","totalContents","searchValue","_searchValue","onSearchChange","options","onChange","list","loading","showCompleted","setShowCompleted","sortView","undefined","filteredContent","course","progress","contentResult","skill","title","handleSearch","value","handleSearchReset","handleShowCompletedToggle","prevShowCompleted","continueLearningWrapper","continueLearningTitle","continueLearningNumber","searchAndSortSection","searchWrapper","placeholder","sortSection","sortWrapper","filterWrapper","filterProps","index","name","handleFilterChange","filterButtonWrapper","divider","justifyContent","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","shape","number","arrayOf"],"sources":["../../../src/template/skill-detail/all-courses.js"],"sourcesContent":["import React, {useState, useCallback, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {get, filter, map, size, isNil} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport SearchForm from '../../molecule/search-form';\nimport CardsGrid from '../../organism/cards-grid';\nimport searchValueIncluded from '../../util/search-value-included';\nimport InputSwitch from '../../atom/input-switch';\nimport style from './all-courses.css';\n\nconst uncappedMap = map.convert({cap: false});\n\nconst FilterButton = (props, context) => {\n  const {dataName, ariaLabel, selected, label, onClick} = props;\n  const {skin} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: selected ? primarySkinColor : '#E1E1E3',\n      color: selected ? '#FFFFFF' : '#515161',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n      width: 'fit-content'\n    },\n    label,\n    onClick,\n    'data-name': dataName,\n    'aria-label': ariaLabel\n  };\n\n  return <ButtonLink {...buttonProps} />;\n};\n\nFilterButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nFilterButton.propTypes = {\n  dataName: PropTypes.string,\n  ariaLabel: PropTypes.string,\n  selected: PropTypes.bool,\n  label: PropTypes.string,\n  onClick: PropTypes.func\n};\n\nconst AllCourses = (props, context) => {\n  const {\n    content,\n    filters,\n    sorting,\n    totalContents,\n    searchValue: _searchValue,\n    onSearchChange\n  } = props;\n  const {options, onChange} = filters;\n  const {list, loading} = content;\n  const {translate} = context;\n  const [showCompleted, setShowCompleted] = useState(true);\n  const searchValue = useMemo(() => _searchValue, [_searchValue]);\n\n  const sortView =\n    sorting !== undefined ? (\n      <div data-name=\"choice\">\n        <Select {...sorting} aria-label=\"All courses sort\" />\n      </div>\n    ) : null;\n\n  const filteredContent = useMemo(() => {\n    return showCompleted ? list : filter(course => course.progress < 1, list);\n  }, [list, showCompleted]);\n\n  const contentResult = useMemo(() => {\n    return filter(skill => searchValueIncluded(skill.title, searchValue), filteredContent);\n  }, [filteredContent, searchValue]);\n\n  const handleSearch = useCallback(\n    value => {\n      onSearchChange(value);\n    },\n    [onSearchChange]\n  );\n\n  const handleSearchReset = useCallback(() => {\n    onSearchChange('');\n  }, [onSearchChange]);\n\n  const handleShowCompletedToggle = useCallback(() => {\n    setShowCompleted(prevShowCompleted => !prevShowCompleted);\n  }, []);\n\n  return (\n    <>\n      <div className={style.continueLearningWrapper}>\n        <span className={style.continueLearningTitle}>{translate('all_content')}</span>\n        <span className={style.continueLearningNumber}>\n          {isNil(totalContents) ? size(contentResult) : totalContents}\n        </span>\n      </div>\n      <div className={style.searchAndSortSection}>\n        <div className={style.searchWrapper}>\n          <SearchForm\n            search={{\n              placeholder: translate('search_place_holder'),\n              value: searchValue,\n              onChange: handleSearch\n            }}\n            onReset={handleSearchReset}\n            dataTestId=\"all-courses-search-input\"\n          />\n        </div>\n        <div className={style.sortSection}>\n          <InputSwitch\n            id={'show-completed-courses-switch'}\n            type=\"switch\"\n            name={translate('show_completed')}\n            title={translate('show_completed')}\n            aria-label={'Show completed courses aria label'}\n            value={showCompleted}\n            onChange={handleShowCompletedToggle}\n          />\n          {sortView ? (\n            <div className={style.sortWrapper}>\n              {translate('sort_by')}\n              {sortView}\n            </div>\n          ) : null}\n        </div>\n      </div>\n      <div className={style.filterWrapper}>\n        {size(options) > 2 && size(contentResult)\n          ? uncappedMap((filterProps, index) => {\n              const {name, value, selected} = filterProps;\n\n              function handleFilterChange() {\n                onChange(value);\n                handleSearchReset();\n              }\n\n              return (\n                <div key={index} className={style.filterButtonWrapper}>\n                  <FilterButton\n                    dataName={`filter-button-${value}`}\n                    ariaLabel={`Filter by ${name}`}\n                    selected={selected}\n                    label={name}\n                    onClick={handleFilterChange}\n                  />\n                  {value === 'ALL' ? <div className={style.divider} /> : null}\n                </div>\n              );\n            }, options)\n          : null}\n      </div>\n      <div>\n        {size(contentResult) ? (\n          <CardsGrid\n            list={contentResult}\n            loading={loading}\n            customStyle={{justifyContent: 'left'}}\n          />\n        ) : (\n          <div className={style.emptySearchResultContainer}>\n            <div className={style.emptySearchResultTitle}>\n              {translate('empty_search_result_title', {searchValue})}\n            </div>\n            <div className={style.emptySearchResultDescription}>\n              {translate('empty_search_result_description')}\n            </div>\n            <div className={style.emptySearchResultClearSearch} onClick={handleSearchReset}>\n              {translate('empty_search_result_clear_search')}\n            </div>\n          </div>\n        )}\n      </div>\n    </>\n  );\n};\n\nAllCourses.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nAllCourses.propTypes = {\n  content: PropTypes.shape(CardsGrid.propTypes),\n  searchValue: PropTypes.string,\n  totalContents: PropTypes.number,\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  onSearchChange: PropTypes.func,\n  sorting: PropTypes.shape(Select.propTypes)\n};\n\nexport default AllCourses;\n"],"mappings":"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"}
+{"version":3,"file":"all-courses.js","names":["React","useState","useCallback","useMemo","PropTypes","Provider","Select","SelectOptionPropTypes","ButtonLink","SearchForm","CardsGrid","searchValueIncluded","InputSwitch","style","uncappedMap","convert","cap","FilterButton","props","context","dataName","ariaLabel","selected","label","onClick","skin","primarySkinColor","buttonProps","customStyle","backgroundColor","color","transition","width","contextTypes","childContextTypes","translate","propTypes","string","bool","func","AllCourses","content","filters","sorting","totalContents","options","onChange","list","loading","showCompleted","setShowCompleted","searchValue","setSearchValue","sortView","undefined","filteredContent","course","progress","contentResult","skill","title","handleSearch","value","handleSearchReset","handleShowCompletedToggle","prevShowCompleted","continueLearningWrapper","continueLearningTitle","continueLearningNumber","searchAndSortSection","searchWrapper","placeholder","sortSection","sortWrapper","filterWrapper","filterProps","index","name","handleFilterChange","filterButtonWrapper","divider","justifyContent","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","shape","number","arrayOf"],"sources":["../../../src/template/skill-detail/all-courses.js"],"sourcesContent":["import React, {useState, useCallback, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {get, filter, map, size, isNil} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport SearchForm from '../../molecule/search-form';\nimport CardsGrid from '../../organism/cards-grid';\nimport searchValueIncluded from '../../util/search-value-included';\nimport InputSwitch from '../../atom/input-switch';\nimport style from './all-courses.css';\n\nconst uncappedMap = map.convert({cap: false});\n\nconst FilterButton = (props, context) => {\n  const {dataName, ariaLabel, selected, label, onClick} = props;\n  const {skin} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: selected ? primarySkinColor : '#E1E1E3',\n      color: selected ? '#FFFFFF' : '#515161',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n      width: 'fit-content'\n    },\n    label,\n    onClick,\n    'data-name': dataName,\n    'aria-label': ariaLabel\n  };\n\n  return <ButtonLink {...buttonProps} />;\n};\n\nFilterButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nFilterButton.propTypes = {\n  dataName: PropTypes.string,\n  ariaLabel: PropTypes.string,\n  selected: PropTypes.bool,\n  label: PropTypes.string,\n  onClick: PropTypes.func\n};\n\nconst AllCourses = (props, context) => {\n  const {content, filters, sorting, totalContents} = props;\n  const {options, onChange} = filters;\n  const {list, loading} = content;\n  const {translate} = context;\n  const [showCompleted, setShowCompleted] = useState(true);\n  const [searchValue, setSearchValue] = useState('');\n\n  const sortView =\n    sorting !== undefined ? (\n      <div data-name=\"choice\">\n        <Select {...sorting} aria-label=\"All courses sort\" />\n      </div>\n    ) : null;\n\n  const filteredContent = useMemo(() => {\n    return showCompleted ? list : filter(course => course.progress < 1, list);\n  }, [list, showCompleted]);\n\n  const contentResult = useMemo(() => {\n    return filter(skill => searchValueIncluded(skill.title, searchValue), filteredContent);\n  }, [filteredContent, searchValue]);\n\n  const handleSearch = useCallback(\n    value => {\n      setSearchValue(value);\n    },\n    [setSearchValue]\n  );\n\n  const handleSearchReset = useCallback(() => {\n    setSearchValue('');\n  }, [setSearchValue]);\n\n  const handleShowCompletedToggle = useCallback(() => {\n    setShowCompleted(prevShowCompleted => !prevShowCompleted);\n  }, []);\n\n  return (\n    <>\n      <div className={style.continueLearningWrapper}>\n        <span className={style.continueLearningTitle}>{translate('all_content')}</span>\n        <span className={style.continueLearningNumber}>\n          {isNil(totalContents) ? size(contentResult) : totalContents}\n        </span>\n      </div>\n      <div className={style.searchAndSortSection}>\n        <div className={style.searchWrapper}>\n          <SearchForm\n            search={{\n              placeholder: translate('search_place_holder'),\n              value: searchValue,\n              onChange: handleSearch\n            }}\n            onReset={handleSearchReset}\n            dataTestId=\"all-courses-search-input\"\n          />\n        </div>\n        <div className={style.sortSection}>\n          <InputSwitch\n            id={'show-completed-courses-switch'}\n            type=\"switch\"\n            name={translate('show_completed')}\n            title={translate('show_completed')}\n            aria-label={'Show completed courses aria label'}\n            value={showCompleted}\n            onChange={handleShowCompletedToggle}\n          />\n          {sortView ? (\n            <div className={style.sortWrapper}>\n              {translate('sort_by')}\n              {sortView}\n            </div>\n          ) : null}\n        </div>\n      </div>\n      <div className={style.filterWrapper}>\n        {size(options) > 2 && size(contentResult)\n          ? uncappedMap((filterProps, index) => {\n              const {name, value, selected} = filterProps;\n\n              function handleFilterChange() {\n                onChange(value);\n              }\n\n              return (\n                <div key={index} className={style.filterButtonWrapper}>\n                  <FilterButton\n                    dataName={`filter-button-${value}`}\n                    ariaLabel={`Filter by ${name}`}\n                    selected={selected}\n                    label={name}\n                    onClick={handleFilterChange}\n                  />\n                  {value === 'ALL' ? <div className={style.divider} /> : null}\n                </div>\n              );\n            }, options)\n          : null}\n      </div>\n      <div>\n        {size(contentResult) ? (\n          <CardsGrid\n            list={contentResult}\n            loading={loading}\n            customStyle={{justifyContent: 'left'}}\n          />\n        ) : (\n          <div className={style.emptySearchResultContainer}>\n            <div className={style.emptySearchResultTitle}>\n              {translate('empty_search_result_title', {searchValue})}\n            </div>\n            <div className={style.emptySearchResultDescription}>\n              {translate('empty_search_result_description')}\n            </div>\n            <div className={style.emptySearchResultClearSearch} onClick={handleSearchReset}>\n              {translate('empty_search_result_clear_search')}\n            </div>\n          </div>\n        )}\n      </div>\n    </>\n  );\n};\n\nAllCourses.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nAllCourses.propTypes = {\n  content: PropTypes.shape(CardsGrid.propTypes),\n  totalContents: PropTypes.number,\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes)\n};\n\nexport default AllCourses;\n"],"mappings":"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"}

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

@@ -63,7 +63,6 @@ declare namespace SkillDetail {
     export namespace propTypes_1 {
         export const title: PropTypes.Validator<string>;
         export const skillRef: PropTypes.Validator<string>;
-        export const searchValue: PropTypes.Requireable<string>;
         export const description: PropTypes.Requireable<string>;
         export const metrics: PropTypes.Requireable<PropTypes.InferProps<{
             score: PropTypes.Requireable<number>;
@@ -124,7 +123,6 @@ declare namespace SkillDetail {
         export const onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
         export const onReviewClick: PropTypes.Requireable<(...args: any[]) => any>;
         export const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
-        export const onSearchChange: PropTypes.Requireable<(...args: any[]) => any>;
     }
     export { propTypes_1 as propTypes };
 }

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

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

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

@@ -59,7 +59,6 @@ const SkillDetail = (props, context) => {
     title,
     skillRef,
     description,
-    searchValue,
     metrics = {},
     focused,
     availableForReview,
@@ -70,8 +69,7 @@ const SkillDetail = (props, context) => {
     sorting,
     onBackClick,
     onReviewClick,
-    onContinueLearningClick,
-    onSearchChange
+    onContinueLearningClick
   } = props;
   const {
     score = 0,
@@ -162,11 +160,9 @@ const SkillDetail = (props, context) => {
     className: style.progressInformationNumber
   }, score.toFixed(1), "%")), /*#__PURE__*/React.createElement(AllCourses, {
     content: skillIncludedCourses,
-    searchValue: searchValue,
     filters: filters,
     sorting: sorting,
-    totalContents: totalCourses,
-    onSearchChange: onSearchChange
+    totalContents: totalCourses
   })));
 };
 
@@ -177,7 +173,6 @@ SkillDetail.contextTypes = {
 SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   title: PropTypes.string.isRequired,
   skillRef: PropTypes.string.isRequired,
-  searchValue: PropTypes.string,
   description: PropTypes.string,
   metrics: PropTypes.shape({
     score: PropTypes.number,
@@ -195,8 +190,7 @@ SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   sorting: PropTypes.shape(Select.propTypes),
   onBackClick: PropTypes.func,
   onReviewClick: PropTypes.func,
-  onContinueLearningClick: PropTypes.func,
-  onSearchChange: PropTypes.func
+  onContinueLearningClick: PropTypes.func
 } : {};
 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","PropTypes","convert","classnames","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","searchValue","metrics","focused","availableForReview","totalCourses","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","onSearchChange","score","questionsToReview","showMore","setShowMore","handleShowMore","Description","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButton","ctaContainer","skillFocusBadge","faSize","wrapperSize","length","showMoreWrapper","ctaWrapper","skillInformation","skillInformationNumber","progressContainer","progressInformationNumber","toFixed","string","isRequired","shape","number","onChange","options","arrayOf"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, isNil} from 'lodash/fp';\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    searchValue,\n    metrics = {},\n    focused,\n    availableForReview,\n    ongoingCoursesAvailable,\n    totalCourses,\n    skillIncludedCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick,\n    onSearchChange\n  } = props;\n  const {score = 0, questionsToReview} = metrics;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        {description}\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=\"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                {description.length >= 226 ? (\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          searchValue={searchValue}\n          filters={filters}\n          sorting={sorting}\n          totalContents={totalCourses}\n          onSearchChange={onSearchChange}\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  searchValue: PropTypes.string,\n  description: PropTypes.string,\n  metrics: PropTypes.shape({\n    score: PropTypes.number,\n    questionsToReview: PropTypes.number\n  }),\n  focused: PropTypes.bool,\n  availableForReview: PropTypes.bool,\n  ongoingCoursesAvailable: PropTypes.bool,\n  totalCourses: PropTypes.number,\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  onSearchChange: PropTypes.func\n};\n\nexport default SkillDetail;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","convert","classnames","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","totalCourses","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","score","questionsToReview","showMore","setShowMore","handleShowMore","Description","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButton","ctaContainer","skillFocusBadge","faSize","wrapperSize","length","showMoreWrapper","ctaWrapper","skillInformation","skillInformationNumber","progressContainer","progressInformationNumber","toFixed","string","isRequired","shape","number","onChange","options","arrayOf"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, isNil} from 'lodash/fp';\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    totalCourses,\n    skillIncludedCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick\n  } = props;\n  const {score = 0, questionsToReview} = metrics;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        {description}\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=\"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                {description.length >= 226 ? (\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={totalCourses}\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  }),\n  focused: PropTypes.bool,\n  availableForReview: PropTypes.bool,\n  ongoingCoursesAvailable: PropTypes.bool,\n  totalCourses: PropTypes.number,\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};\n\nexport default SkillDetail;\n"],"mappings":"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"}

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

@@ -29,7 +29,6 @@ declare namespace CertificationDetail {
         const title: PropTypes.Validator<string>;
         const certificationRef: PropTypes.Validator<string>;
         const description: PropTypes.Requireable<string>;
-        const searchValue: PropTypes.Requireable<string>;
         const logoUrl: PropTypes.Requireable<string>;
         const metrics: PropTypes.Requireable<PropTypes.InferProps<{
             progression: PropTypes.Requireable<number>;
@@ -58,7 +57,6 @@ declare namespace CertificationDetail {
         }>>;
         const onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
         const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
-        const onSearchChange: 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":";AAiBA,4EA8GC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/certification-detail/index.js"],"names":[],"mappings":";AAiBA,4EA0GC"}

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

@@ -50,13 +50,11 @@ const CertificationDetail = (props, context) => {
     certificationRef,
     title,
     description,
-    searchValue,
     certificationCourses,
     ongoingCoursesAvailable,
     filters,
     onBackClick,
     onContinueLearningClick,
-    onSearchChange,
     metrics,
     logoUrl,
     diplomaUrl,
@@ -135,9 +133,7 @@ const CertificationDetail = (props, context) => {
   }), /*#__PURE__*/_react.default.createElement(_allCourses.default, {
     content: certificationCourses,
     filters: filters,
-    "data-name": "certification-courses",
-    searchValue: searchValue,
-    onSearchChange: onSearchChange
+    "data-name": "certification-courses"
   })));
 };
 
@@ -149,7 +145,6 @@ CertificationDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   title: _propTypes.default.string.isRequired,
   certificationRef: _propTypes.default.string.isRequired,
   description: _propTypes.default.string,
-  searchValue: _propTypes.default.string,
   logoUrl: _propTypes.default.string,
   metrics: _propTypes.default.shape({
     progression: _propTypes.default.number,
@@ -166,8 +161,7 @@ CertificationDetail.propTypes = process.env.NODE_ENV !== "production" ? {
     options: _propTypes.default.arrayOf(_propTypes.default.shape(_select.SelectOptionPropTypes))
   }),
   onBackClick: _propTypes.default.func,
-  onContinueLearningClick: _propTypes.default.func,
-  onSearchChange: _propTypes.default.func
+  onContinueLearningClick: _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":["DESCRIPTION_BREAKPOINT","CertificationDetail","props","context","certificationRef","title","description","searchValue","certificationCourses","ongoingCoursesAvailable","filters","onBackClick","onContinueLearningClick","onSearchChange","metrics","logoUrl","diplomaUrl","badgeUrl","translate","progression","mandatoryModules","stars","totalModules","showMore","setShowMore","useState","handleShowMore","useCallback","Description","classnames","style","truncate","completedModules","useMemo","backgroundContainer","container","backButton","ctaContainer","logoContainer","logo","length","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, useState, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {compact, lowerCase, round, isNil} from 'lodash/fp';\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 DESCRIPTION_BREAKPOINT = 382;\n\nconst CertificationDetail = (props, context) => {\n  const {\n    certificationRef,\n    title,\n    description,\n    searchValue,\n    certificationCourses,\n    ongoingCoursesAvailable,\n    filters,\n    onBackClick,\n    onContinueLearningClick,\n    onSearchChange,\n    metrics,\n    logoUrl,\n    diplomaUrl,\n    badgeUrl\n  } = props;\n  const {translate} = context;\n  const {progression, mandatoryModules, stars, totalModules} = metrics;\n\n  const [showMore, setShowMore] = useState(false);\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        {description}\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=\"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={translate('certification')} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {description.length >= DESCRIPTION_BREAKPOINT ? (\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            {\n              type: 'diploma',\n              downloadUrl: diplomaUrl\n            },\n            badgeUrl && {\n              type: 'badge',\n              downloadUrl: badgeUrl\n            },\n            {\n              type: 'stars',\n              stars\n            }\n          ])}\n        />\n        <AllCourses\n          content={certificationCourses}\n          filters={filters}\n          data-name=\"certification-courses\"\n          searchValue={searchValue}\n          onSearchChange={onSearchChange}\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  certificationRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  searchValue: PropTypes.string,\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  onSearchChange: PropTypes.func\n};\n\nexport default CertificationDetail;\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,sBAAsB,GAAG,GAA/B;;AAEA,MAAMC,mBAAmB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EAC9C,MAAM;IACJC,gBADI;IAEJC,KAFI;IAGJC,WAHI;IAIJC,WAJI;IAKJC,oBALI;IAMJC,uBANI;IAOJC,OAPI;IAQJC,WARI;IASJC,uBATI;IAUJC,cAVI;IAWJC,OAXI;IAYJC,OAZI;IAaJC,UAbI;IAcJC;EAdI,IAeFf,KAfJ;EAgBA,MAAM;IAACgB;EAAD,IAAcf,OAApB;EACA,MAAM;IAACgB,WAAD;IAAcC,gBAAd;IAAgCC,KAAhC;IAAuCC;EAAvC,IAAuDR,OAA7D;EAEA,MAAM,CAACS,QAAD,EAAWC,WAAX,IAA0B,IAAAC,eAAA,EAAS,KAAT,CAAhC;EACA,MAAMC,cAAc,GAAG,IAAAC,kBAAA,EAAY,MAAMH,WAAW,CAAC,CAACD,QAAF,CAA7B,EAA0C,CAACC,WAAD,EAAcD,QAAd,CAA1C,CAAvB;EAEA,MAAMK,WAAW,GAAG,IAAAD,kBAAA,EAAY,MAAM;IACpC,oBACE;MAAK,SAAS,EAAE,IAAAE,mBAAA,EAAWC,cAAA,CAAMxB,WAAjB,EAA8B,CAACiB,QAAD,IAAaO,cAAA,CAAMC,QAAjD;IAAhB,GACGzB,WADH,CADF;EAKD,CANmB,EAMjB,CAACiB,QAAD,EAAWjB,WAAX,CANiB,CAApB;EAQA,MAAM0B,gBAAgB,GAAG,IAAAC,cAAA,EACvB,MAAM,qBAAOb,gBAAgB,GAAGD,WAApB,GAAmC,GAAzC,CADiB,EAEvB,CAACC,gBAAD,EAAmBD,WAAnB,CAFuB,CAAzB;EAKA,oBACE;IAAK,SAAS,EAAEW,cAAA,CAAMI;EAAtB,gBACE;IAAK,SAAS,EAAEJ,cAAA,CAAMK,SAAtB;IAAiC,aAAW/B;EAA5C,GACG,CAAC,qBAAMO,WAAN,CAAD,gBACC,6BAAC,uBAAD;IACE,MAAM,EAAC,YADT;IAEE,aAAU,aAFZ;IAGE,cAAW,MAHb;IAIE,OAAO,EAAEA,WAJX;IAKE,SAAS,EAAEmB,cAAA,CAAMM,UALnB;IAME,gBAAgB,EAAC;EANnB,EADD,GASG,IAVN,eAWE;IAAK,SAAS,EAAEN,cAAA,CAAMO;EAAtB,gBACE;IAAK,SAAS,EAAEP,cAAA,CAAMQ;EAAtB,gBACE;IAAK,SAAS,EAAER,cAAA,CAAMS,IAAtB;IAA4B,GAAG,EAAExB;EAAjC,EADF,CADF,eAIE,uDACE,6BAAC,YAAD;IAAK,KAAK,EAAEG,SAAS,CAAC,eAAD;EAArB,EADF,eAEE;IAAK,SAAS,EAAEY,cAAA,CAAMzB;EAAtB,GAA8BA,KAA9B,CAFF,EAGGC,WAAW,gBACV,yEACE,6BAAC,WAAD,OADF,EAEGA,WAAW,CAACkC,MAAZ,IAAsBxC,sBAAtB,gBACC;IAAK,SAAS,EAAE8B,cAAA,CAAMW,eAAtB;IAAuC,OAAO,EAAEf;EAAhD,GACGR,SAAS,CAACK,QAAQ,GAAG,WAAH,GAAiB,WAA1B,CADZ,eAEE,6BAAC,aAAD;IACE,QAAQ,EAAEA,QAAQ,GAAG,YAAH,GAAkB,cADtC;IAEE,IAAI,EAAE;MAACmB,MAAM,EAAE,EAAT;MAAaC,WAAW,EAAE;IAA1B;EAFR,EAFF,CADD,GAQG,IAVN,CADU,GAaR,IAhBN,eAiBE;IAAK,SAAS,EAAEb,cAAA,CAAMc;EAAtB,gBACE,2CAAQ,GAAEtB,YAAa,IAAG,yBAAUJ,SAAS,CAAC,SAAD,CAAnB,CAAgC,EAA1D,CADF,CAjBF,eAoBE,6BAAC,mCAAD;IACE,uBAAuB,EAAET,uBAD3B;IAEE,OAAO,EAAEG;EAFX,EApBF,CAJF,CAXF,eAyCE,6BAAC,wBAAD;IACE,KAAK,EAAEM,SAAS,CAAC,eAAD,CADlB;IAEE,QAAQ,EAAEA,SAAS,CAAC,yCAAD,CAFrB;IAGE,WAAW,EAAEC,WAHf;IAIE,gBAAgB,EAAEa,gBAJpB;IAKE,gBAAgB,EAAEZ,gBALpB;IAME,QAAQ,EAAE,uBAAQ,CAChB;MACEyB,IAAI,EAAE,SADR;MAEEC,WAAW,EAAE9B;IAFf,CADgB,EAKhBC,QAAQ,IAAI;MACV4B,IAAI,EAAE,OADI;MAEVC,WAAW,EAAE7B;IAFH,CALI,EAShB;MACE4B,IAAI,EAAE,OADR;MAEExB;IAFF,CATgB,CAAR;EANZ,EAzCF,eA8DE,6BAAC,mBAAD;IACE,OAAO,EAAEb,oBADX;IAEE,OAAO,EAAEE,OAFX;IAGE,aAAU,uBAHZ;IAIE,WAAW,EAAEH,WAJf;IAKE,cAAc,EAAEM;EALlB,EA9DF,CADF,CADF;AA0ED,CA9GD;;AAgHAZ,mBAAmB,CAAC8C,YAApB,GAAmC;EACjCC,IAAI,EAAEC,iBAAA,CAASC,iBAAT,CAA2BF,IADA;EAEjC9B,SAAS,EAAE+B,iBAAA,CAASC,iBAAT,CAA2BhC;AAFL,CAAnC;AAKAjB,mBAAmB,CAACkD,SAApB,2CAAgC;EAC9B9C,KAAK,EAAE+C,kBAAA,CAAUC,MAAV,CAAiBC,UADM;EAE9BlD,gBAAgB,EAAEgD,kBAAA,CAAUC,MAAV,CAAiBC,UAFL;EAG9BhD,WAAW,EAAE8C,kBAAA,CAAUC,MAHO;EAI9B9C,WAAW,EAAE6C,kBAAA,CAAUC,MAJO;EAK9BtC,OAAO,EAAEqC,kBAAA,CAAUC,MALW;EAM9BvC,OAAO,EAAEsC,kBAAA,CAAUG,KAAV,CAAgB;IACvBpC,WAAW,EAAEiC,kBAAA,CAAUI,MADA;IAEvBnC,KAAK,EAAE+B,kBAAA,CAAUI,MAFM;IAGvBpC,gBAAgB,EAAEgC,kBAAA,CAAUI,MAHL;IAIvBlC,YAAY,EAAE8B,kBAAA,CAAUI;EAJD,CAAhB,CANqB;EAY9BxC,UAAU,EAAEoC,kBAAA,CAAUC,MAZQ;EAa9BpC,QAAQ,EAAEmC,kBAAA,CAAUC,MAbU;EAc9B5C,uBAAuB,EAAE2C,kBAAA,CAAUK,IAdL;EAe9BjD,oBAAoB,EAAE4C,kBAAA,CAAUG,KAAV,CAAgBG,kBAAA,CAAUP,SAA1B,CAfQ;EAgB9BzC,OAAO,EAAE0C,kBAAA,CAAUG,KAAV,CAAgB;IACvBI,QAAQ,EAAEP,kBAAA,CAAUQ,IADG;IAEvBC,OAAO,EAAET,kBAAA,CAAUU,OAAV,CAAkBV,kBAAA,CAAUG,KAAV,CAAgBQ,6BAAhB,CAAlB;EAFc,CAAhB,CAhBqB;EAoB9BpD,WAAW,EAAEyC,kBAAA,CAAUQ,IApBO;EAqB9BhD,uBAAuB,EAAEwC,kBAAA,CAAUQ,IArBL;EAsB9B/C,cAAc,EAAEuC,kBAAA,CAAUQ;AAtBI,CAAhC;eAyBe3D,mB"}
+{"version":3,"file":"index.js","names":["DESCRIPTION_BREAKPOINT","CertificationDetail","props","context","certificationRef","title","description","certificationCourses","ongoingCoursesAvailable","filters","onBackClick","onContinueLearningClick","metrics","logoUrl","diplomaUrl","badgeUrl","translate","progression","mandatoryModules","stars","totalModules","showMore","setShowMore","useState","handleShowMore","useCallback","Description","classnames","style","truncate","completedModules","useMemo","backgroundContainer","container","backButton","ctaContainer","logoContainer","logo","length","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, useState, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {compact, lowerCase, round, isNil} from 'lodash/fp';\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 DESCRIPTION_BREAKPOINT = 382;\n\nconst CertificationDetail = (props, context) => {\n  const {\n    certificationRef,\n    title,\n    description,\n    certificationCourses,\n    ongoingCoursesAvailable,\n    filters,\n    onBackClick,\n    onContinueLearningClick,\n    metrics,\n    logoUrl,\n    diplomaUrl,\n    badgeUrl\n  } = props;\n  const {translate} = context;\n  const {progression, mandatoryModules, stars, totalModules} = metrics;\n\n  const [showMore, setShowMore] = useState(false);\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        {description}\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=\"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={translate('certification')} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {description.length >= DESCRIPTION_BREAKPOINT ? (\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            {\n              type: 'diploma',\n              downloadUrl: diplomaUrl\n            },\n            badgeUrl && {\n              type: 'badge',\n              downloadUrl: badgeUrl\n            },\n            {\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  certificationRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\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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"}

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

@@ -33,7 +33,6 @@ declare namespace PlaylistDetail {
         }> | null | undefined)[]>;
         const playlistRef: PropTypes.Validator<string>;
         const description: PropTypes.Requireable<string>;
-        const searchValue: PropTypes.Requireable<string>;
         const ongoingCoursesAvailable: PropTypes.Requireable<boolean>;
         const playlistCourses: PropTypes.Requireable<PropTypes.InferProps<{
             list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
@@ -84,7 +83,6 @@ declare namespace PlaylistDetail {
         }>>;
         const onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
         const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
-        const onSearchChange: PropTypes.Requireable<(...args: any[]) => any>;
     }
 }
 import PropTypes from "prop-types";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/playlist-detail/index.js"],"names":[],"mappings":";AAiBA,uEAiFC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/playlist-detail/index.js"],"names":[],"mappings":";AAiBA,uEAyEC"}

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

@@ -45,14 +45,12 @@ const PlaylistDetail = (props, context) => {
     coverImages,
     playlistRef,
     description,
-    searchValue,
     ongoingCoursesAvailable,
     playlistCourses,
     filters,
     sorting,
     onBackClick,
-    onContinueLearningClick,
-    onSearchChange
+    onContinueLearningClick
   } = props;
   const {
     translate
@@ -103,9 +101,7 @@ const PlaylistDetail = (props, context) => {
   })))), /*#__PURE__*/_react.default.createElement(_allCourses.default, {
     content: playlistCourses,
     filters: filters,
-    sorting: sorting,
-    searchValue: searchValue,
-    onSearchChange: onSearchChange
+    sorting: sorting
   })));
 };
 
@@ -118,7 +114,6 @@ PlaylistDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   coverImages: _playlistDetailCover.default.propTypes.images,
   playlistRef: _propTypes.default.string.isRequired,
   description: _propTypes.default.string,
-  searchValue: _propTypes.default.string,
   ongoingCoursesAvailable: _propTypes.default.bool,
   playlistCourses: _propTypes.default.shape(_cardsGrid.default.propTypes),
   filters: _propTypes.default.shape({
@@ -127,8 +122,7 @@ PlaylistDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   }),
   sorting: _propTypes.default.shape(_select.default.propTypes),
   onBackClick: _propTypes.default.func,
-  onContinueLearningClick: _propTypes.default.func,
-  onSearchChange: _propTypes.default.func
+  onContinueLearningClick: _propTypes.default.func
 } : {};
 var _default = PlaylistDetail;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DESCRIPTION_BREAKPOINT","PlaylistDetail","props","context","title","coverImages","playlistRef","description","searchValue","ongoingCoursesAvailable","playlistCourses","filters","sorting","onBackClick","onContinueLearningClick","onSearchChange","translate","showMore","setShowMore","useState","handleShowMore","useCallback","Description","classnames","style","truncate","backgroundContainer","container","backButton","ctaContainer","coverWrapper","length","showMoreWrapper","faSize","wrapperSize","continueLearningButton","contextTypes","skin","Provider","childContextTypes","propTypes","PropTypes","string","isRequired","PlaylistDetailCover","images","bool","shape","CardsGrid","onChange","func","options","arrayOf","SelectOptionPropTypes","Select"],"sources":["../../../src/template/playlist-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isNil} from 'lodash/fp';\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 DESCRIPTION_BREAKPOINT = 382;\n\nconst PlaylistDetail = (props, context) => {\n  const {\n    title,\n    coverImages,\n    playlistRef,\n    description,\n    searchValue,\n    ongoingCoursesAvailable,\n    playlistCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onContinueLearningClick,\n    onSearchChange\n  } = props;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        {description}\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=\"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                {description.length >= DESCRIPTION_BREAKPOINT ? (\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          searchValue={searchValue}\n          onSearchChange={onSearchChange}\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  searchValue: 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  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func,\n  onSearchChange: PropTypes.func\n};\n\nexport default PlaylistDetail;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["DESCRIPTION_BREAKPOINT","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCoursesAvailable","playlistCourses","filters","sorting","onBackClick","onContinueLearningClick","translate","showMore","setShowMore","useState","handleShowMore","useCallback","Description","classnames","style","truncate","backgroundContainer","container","backButton","ctaContainer","coverWrapper","length","showMoreWrapper","faSize","wrapperSize","continueLearningButton","contextTypes","skin","Provider","childContextTypes","propTypes","PropTypes","string","isRequired","PlaylistDetailCover","images","bool","shape","CardsGrid","onChange","func","options","arrayOf","SelectOptionPropTypes","Select"],"sources":["../../../src/template/playlist-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isNil} from 'lodash/fp';\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 DESCRIPTION_BREAKPOINT = 382;\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  } = props;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        {description}\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=\"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                {description.length >= DESCRIPTION_BREAKPOINT ? (\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 content={playlistCourses} filters={filters} sorting={sorting} />\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  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default PlaylistDetail;\n"],"mappings":"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"}

package/lib/template/skill-detail/all-courses.d.ts

@@ -33,7 +33,6 @@ declare namespace AllCourses {
             }>;
             loading: PropTypes.Requireable<boolean>;
         }>>;
-        const searchValue: PropTypes.Requireable<string>;
         const totalContents: PropTypes.Requireable<number>;
         const filters: PropTypes.Requireable<PropTypes.InferProps<{
             onChange: PropTypes.Requireable<(...args: any[]) => any>;
@@ -44,7 +43,6 @@ declare namespace AllCourses {
                 validOption: PropTypes.Requireable<boolean>;
             }> | null | undefined)[]>;
         }>>;
-        const onSearchChange: PropTypes.Requireable<(...args: any[]) => any>;
         const sorting: PropTypes.Requireable<PropTypes.InferProps<{
             title: PropTypes.Requireable<string>;
             name: PropTypes.Requireable<string>;

package/lib/template/skill-detail/all-courses.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"all-courses.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/all-courses.js"],"names":[],"mappings":";AAgDA,mEAmIC"}
+{"version":3,"file":"all-courses.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/all-courses.js"],"names":[],"mappings":";AAgDA,mEA2HC"}

package/lib/template/skill-detail/all-courses.js

@@ -89,9 +89,7 @@ const AllCourses = (props, context) => {
     content,
     filters,
     sorting,
-    totalContents,
-    searchValue: _searchValue,
-    onSearchChange
+    totalContents
   } = props;
   const {
     options,
@@ -105,7 +103,7 @@ const AllCourses = (props, context) => {
     translate
   } = context;
   const [showCompleted, setShowCompleted] = (0, _react.useState)(true);
-  const searchValue = (0, _react.useMemo)(() => _searchValue, [_searchValue]);
+  const [searchValue, setSearchValue] = (0, _react.useState)('');
   const sortView = sorting !== undefined ? /*#__PURE__*/_react.default.createElement("div", {
     "data-name": "choice"
   }, /*#__PURE__*/_react.default.createElement(_select.default, _extends({}, sorting, {
@@ -118,11 +116,11 @@ const AllCourses = (props, context) => {
     return (0, _filter2.default)(skill => (0, _searchValueIncluded.default)(skill.title, searchValue), filteredContent);
   }, [filteredContent, searchValue]);
   const handleSearch = (0, _react.useCallback)(value => {
-    onSearchChange(value);
-  }, [onSearchChange]);
+    setSearchValue(value);
+  }, [setSearchValue]);
   const handleSearchReset = (0, _react.useCallback)(() => {
-    onSearchChange('');
-  }, [onSearchChange]);
+    setSearchValue('');
+  }, [setSearchValue]);
   const handleShowCompletedToggle = (0, _react.useCallback)(() => {
     setShowCompleted(prevShowCompleted => !prevShowCompleted);
   }, []);
@@ -167,7 +165,6 @@ const AllCourses = (props, context) => {
 
     function handleFilterChange() {
       onChange(value);
-      handleSearchReset();
     }
 
     return /*#__PURE__*/_react.default.createElement("div", {
@@ -208,13 +205,11 @@ AllCourses.contextTypes = {
 };
 AllCourses.propTypes = process.env.NODE_ENV !== "production" ? {
   content: _propTypes.default.shape(_cardsGrid.default.propTypes),
-  searchValue: _propTypes.default.string,
   totalContents: _propTypes.default.number,
   filters: _propTypes.default.shape({
     onChange: _propTypes.default.func,
     options: _propTypes.default.arrayOf(_propTypes.default.shape(_select.SelectOptionPropTypes))
   }),
-  onSearchChange: _propTypes.default.func,
   sorting: _propTypes.default.shape(_select.default.propTypes)
 } : {};
 var _default = AllCourses;

package/lib/template/skill-detail/all-courses.js.map

@@ -1 +1 @@
-{"version":3,"file":"all-courses.js","names":["uncappedMap","convert","cap","FilterButton","props","context","dataName","ariaLabel","selected","label","onClick","skin","primarySkinColor","buttonProps","customStyle","backgroundColor","color","transition","width","contextTypes","Provider","childContextTypes","translate","propTypes","PropTypes","string","bool","func","AllCourses","content","filters","sorting","totalContents","searchValue","_searchValue","onSearchChange","options","onChange","list","loading","showCompleted","setShowCompleted","useState","useMemo","sortView","undefined","filteredContent","course","progress","contentResult","skill","searchValueIncluded","title","handleSearch","useCallback","value","handleSearchReset","handleShowCompletedToggle","prevShowCompleted","style","continueLearningWrapper","continueLearningTitle","continueLearningNumber","searchAndSortSection","searchWrapper","placeholder","sortSection","sortWrapper","filterWrapper","filterProps","index","name","handleFilterChange","filterButtonWrapper","divider","justifyContent","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","shape","CardsGrid","number","arrayOf","SelectOptionPropTypes","Select"],"sources":["../../../src/template/skill-detail/all-courses.js"],"sourcesContent":["import React, {useState, useCallback, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {get, filter, map, size, isNil} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport SearchForm from '../../molecule/search-form';\nimport CardsGrid from '../../organism/cards-grid';\nimport searchValueIncluded from '../../util/search-value-included';\nimport InputSwitch from '../../atom/input-switch';\nimport style from './all-courses.css';\n\nconst uncappedMap = map.convert({cap: false});\n\nconst FilterButton = (props, context) => {\n  const {dataName, ariaLabel, selected, label, onClick} = props;\n  const {skin} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: selected ? primarySkinColor : '#E1E1E3',\n      color: selected ? '#FFFFFF' : '#515161',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n      width: 'fit-content'\n    },\n    label,\n    onClick,\n    'data-name': dataName,\n    'aria-label': ariaLabel\n  };\n\n  return <ButtonLink {...buttonProps} />;\n};\n\nFilterButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nFilterButton.propTypes = {\n  dataName: PropTypes.string,\n  ariaLabel: PropTypes.string,\n  selected: PropTypes.bool,\n  label: PropTypes.string,\n  onClick: PropTypes.func\n};\n\nconst AllCourses = (props, context) => {\n  const {\n    content,\n    filters,\n    sorting,\n    totalContents,\n    searchValue: _searchValue,\n    onSearchChange\n  } = props;\n  const {options, onChange} = filters;\n  const {list, loading} = content;\n  const {translate} = context;\n  const [showCompleted, setShowCompleted] = useState(true);\n  const searchValue = useMemo(() => _searchValue, [_searchValue]);\n\n  const sortView =\n    sorting !== undefined ? (\n      <div data-name=\"choice\">\n        <Select {...sorting} aria-label=\"All courses sort\" />\n      </div>\n    ) : null;\n\n  const filteredContent = useMemo(() => {\n    return showCompleted ? list : filter(course => course.progress < 1, list);\n  }, [list, showCompleted]);\n\n  const contentResult = useMemo(() => {\n    return filter(skill => searchValueIncluded(skill.title, searchValue), filteredContent);\n  }, [filteredContent, searchValue]);\n\n  const handleSearch = useCallback(\n    value => {\n      onSearchChange(value);\n    },\n    [onSearchChange]\n  );\n\n  const handleSearchReset = useCallback(() => {\n    onSearchChange('');\n  }, [onSearchChange]);\n\n  const handleShowCompletedToggle = useCallback(() => {\n    setShowCompleted(prevShowCompleted => !prevShowCompleted);\n  }, []);\n\n  return (\n    <>\n      <div className={style.continueLearningWrapper}>\n        <span className={style.continueLearningTitle}>{translate('all_content')}</span>\n        <span className={style.continueLearningNumber}>\n          {isNil(totalContents) ? size(contentResult) : totalContents}\n        </span>\n      </div>\n      <div className={style.searchAndSortSection}>\n        <div className={style.searchWrapper}>\n          <SearchForm\n            search={{\n              placeholder: translate('search_place_holder'),\n              value: searchValue,\n              onChange: handleSearch\n            }}\n            onReset={handleSearchReset}\n            dataTestId=\"all-courses-search-input\"\n          />\n        </div>\n        <div className={style.sortSection}>\n          <InputSwitch\n            id={'show-completed-courses-switch'}\n            type=\"switch\"\n            name={translate('show_completed')}\n            title={translate('show_completed')}\n            aria-label={'Show completed courses aria label'}\n            value={showCompleted}\n            onChange={handleShowCompletedToggle}\n          />\n          {sortView ? (\n            <div className={style.sortWrapper}>\n              {translate('sort_by')}\n              {sortView}\n            </div>\n          ) : null}\n        </div>\n      </div>\n      <div className={style.filterWrapper}>\n        {size(options) > 2 && size(contentResult)\n          ? uncappedMap((filterProps, index) => {\n              const {name, value, selected} = filterProps;\n\n              function handleFilterChange() {\n                onChange(value);\n                handleSearchReset();\n              }\n\n              return (\n                <div key={index} className={style.filterButtonWrapper}>\n                  <FilterButton\n                    dataName={`filter-button-${value}`}\n                    ariaLabel={`Filter by ${name}`}\n                    selected={selected}\n                    label={name}\n                    onClick={handleFilterChange}\n                  />\n                  {value === 'ALL' ? <div className={style.divider} /> : null}\n                </div>\n              );\n            }, options)\n          : null}\n      </div>\n      <div>\n        {size(contentResult) ? (\n          <CardsGrid\n            list={contentResult}\n            loading={loading}\n            customStyle={{justifyContent: 'left'}}\n          />\n        ) : (\n          <div className={style.emptySearchResultContainer}>\n            <div className={style.emptySearchResultTitle}>\n              {translate('empty_search_result_title', {searchValue})}\n            </div>\n            <div className={style.emptySearchResultDescription}>\n              {translate('empty_search_result_description')}\n            </div>\n            <div className={style.emptySearchResultClearSearch} onClick={handleSearchReset}>\n              {translate('empty_search_result_clear_search')}\n            </div>\n          </div>\n        )}\n      </div>\n    </>\n  );\n};\n\nAllCourses.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nAllCourses.propTypes = {\n  content: PropTypes.shape(CardsGrid.propTypes),\n  searchValue: PropTypes.string,\n  totalContents: PropTypes.number,\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  onSearchChange: PropTypes.func,\n  sorting: PropTypes.shape(Select.propTypes)\n};\n\nexport default AllCourses;\n"],"mappings":"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"}
+{"version":3,"file":"all-courses.js","names":["uncappedMap","convert","cap","FilterButton","props","context","dataName","ariaLabel","selected","label","onClick","skin","primarySkinColor","buttonProps","customStyle","backgroundColor","color","transition","width","contextTypes","Provider","childContextTypes","translate","propTypes","PropTypes","string","bool","func","AllCourses","content","filters","sorting","totalContents","options","onChange","list","loading","showCompleted","setShowCompleted","useState","searchValue","setSearchValue","sortView","undefined","filteredContent","useMemo","course","progress","contentResult","skill","searchValueIncluded","title","handleSearch","useCallback","value","handleSearchReset","handleShowCompletedToggle","prevShowCompleted","style","continueLearningWrapper","continueLearningTitle","continueLearningNumber","searchAndSortSection","searchWrapper","placeholder","sortSection","sortWrapper","filterWrapper","filterProps","index","name","handleFilterChange","filterButtonWrapper","divider","justifyContent","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","shape","CardsGrid","number","arrayOf","SelectOptionPropTypes","Select"],"sources":["../../../src/template/skill-detail/all-courses.js"],"sourcesContent":["import React, {useState, useCallback, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {get, filter, map, size, isNil} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport SearchForm from '../../molecule/search-form';\nimport CardsGrid from '../../organism/cards-grid';\nimport searchValueIncluded from '../../util/search-value-included';\nimport InputSwitch from '../../atom/input-switch';\nimport style from './all-courses.css';\n\nconst uncappedMap = map.convert({cap: false});\n\nconst FilterButton = (props, context) => {\n  const {dataName, ariaLabel, selected, label, onClick} = props;\n  const {skin} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: selected ? primarySkinColor : '#E1E1E3',\n      color: selected ? '#FFFFFF' : '#515161',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n      width: 'fit-content'\n    },\n    label,\n    onClick,\n    'data-name': dataName,\n    'aria-label': ariaLabel\n  };\n\n  return <ButtonLink {...buttonProps} />;\n};\n\nFilterButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nFilterButton.propTypes = {\n  dataName: PropTypes.string,\n  ariaLabel: PropTypes.string,\n  selected: PropTypes.bool,\n  label: PropTypes.string,\n  onClick: PropTypes.func\n};\n\nconst AllCourses = (props, context) => {\n  const {content, filters, sorting, totalContents} = props;\n  const {options, onChange} = filters;\n  const {list, loading} = content;\n  const {translate} = context;\n  const [showCompleted, setShowCompleted] = useState(true);\n  const [searchValue, setSearchValue] = useState('');\n\n  const sortView =\n    sorting !== undefined ? (\n      <div data-name=\"choice\">\n        <Select {...sorting} aria-label=\"All courses sort\" />\n      </div>\n    ) : null;\n\n  const filteredContent = useMemo(() => {\n    return showCompleted ? list : filter(course => course.progress < 1, list);\n  }, [list, showCompleted]);\n\n  const contentResult = useMemo(() => {\n    return filter(skill => searchValueIncluded(skill.title, searchValue), filteredContent);\n  }, [filteredContent, searchValue]);\n\n  const handleSearch = useCallback(\n    value => {\n      setSearchValue(value);\n    },\n    [setSearchValue]\n  );\n\n  const handleSearchReset = useCallback(() => {\n    setSearchValue('');\n  }, [setSearchValue]);\n\n  const handleShowCompletedToggle = useCallback(() => {\n    setShowCompleted(prevShowCompleted => !prevShowCompleted);\n  }, []);\n\n  return (\n    <>\n      <div className={style.continueLearningWrapper}>\n        <span className={style.continueLearningTitle}>{translate('all_content')}</span>\n        <span className={style.continueLearningNumber}>\n          {isNil(totalContents) ? size(contentResult) : totalContents}\n        </span>\n      </div>\n      <div className={style.searchAndSortSection}>\n        <div className={style.searchWrapper}>\n          <SearchForm\n            search={{\n              placeholder: translate('search_place_holder'),\n              value: searchValue,\n              onChange: handleSearch\n            }}\n            onReset={handleSearchReset}\n            dataTestId=\"all-courses-search-input\"\n          />\n        </div>\n        <div className={style.sortSection}>\n          <InputSwitch\n            id={'show-completed-courses-switch'}\n            type=\"switch\"\n            name={translate('show_completed')}\n            title={translate('show_completed')}\n            aria-label={'Show completed courses aria label'}\n            value={showCompleted}\n            onChange={handleShowCompletedToggle}\n          />\n          {sortView ? (\n            <div className={style.sortWrapper}>\n              {translate('sort_by')}\n              {sortView}\n            </div>\n          ) : null}\n        </div>\n      </div>\n      <div className={style.filterWrapper}>\n        {size(options) > 2 && size(contentResult)\n          ? uncappedMap((filterProps, index) => {\n              const {name, value, selected} = filterProps;\n\n              function handleFilterChange() {\n                onChange(value);\n              }\n\n              return (\n                <div key={index} className={style.filterButtonWrapper}>\n                  <FilterButton\n                    dataName={`filter-button-${value}`}\n                    ariaLabel={`Filter by ${name}`}\n                    selected={selected}\n                    label={name}\n                    onClick={handleFilterChange}\n                  />\n                  {value === 'ALL' ? <div className={style.divider} /> : null}\n                </div>\n              );\n            }, options)\n          : null}\n      </div>\n      <div>\n        {size(contentResult) ? (\n          <CardsGrid\n            list={contentResult}\n            loading={loading}\n            customStyle={{justifyContent: 'left'}}\n          />\n        ) : (\n          <div className={style.emptySearchResultContainer}>\n            <div className={style.emptySearchResultTitle}>\n              {translate('empty_search_result_title', {searchValue})}\n            </div>\n            <div className={style.emptySearchResultDescription}>\n              {translate('empty_search_result_description')}\n            </div>\n            <div className={style.emptySearchResultClearSearch} onClick={handleSearchReset}>\n              {translate('empty_search_result_clear_search')}\n            </div>\n          </div>\n        )}\n      </div>\n    </>\n  );\n};\n\nAllCourses.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nAllCourses.propTypes = {\n  content: PropTypes.shape(CardsGrid.propTypes),\n  totalContents: PropTypes.number,\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes)\n};\n\nexport default AllCourses;\n"],"mappings":"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"}

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

@@ -63,7 +63,6 @@ declare namespace SkillDetail {
     export namespace propTypes_1 {
         export const title: PropTypes.Validator<string>;
         export const skillRef: PropTypes.Validator<string>;
-        export const searchValue: PropTypes.Requireable<string>;
         export const description: PropTypes.Requireable<string>;
         export const metrics: PropTypes.Requireable<PropTypes.InferProps<{
             score: PropTypes.Requireable<number>;
@@ -124,7 +123,6 @@ declare namespace SkillDetail {
         export const onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
         export const onReviewClick: PropTypes.Requireable<(...args: any[]) => any>;
         export const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
-        export const onSearchChange: PropTypes.Requireable<(...args: any[]) => any>;
     }
     export { propTypes_1 as propTypes };
 }

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

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

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

@@ -84,7 +84,6 @@ const SkillDetail = (props, context) => {
     title,
     skillRef,
     description,
-    searchValue,
     metrics = {},
     focused,
     availableForReview,
@@ -95,8 +94,7 @@ const SkillDetail = (props, context) => {
     sorting,
     onBackClick,
     onReviewClick,
-    onContinueLearningClick,
-    onSearchChange
+    onContinueLearningClick
   } = props;
   const {
     score = 0,
@@ -187,11 +185,9 @@ const SkillDetail = (props, context) => {
     className: _style.default.progressInformationNumber
   }, score.toFixed(1), "%")), /*#__PURE__*/_react.default.createElement(_allCourses.default, {
     content: skillIncludedCourses,
-    searchValue: searchValue,
     filters: filters,
     sorting: sorting,
-    totalContents: totalCourses,
-    onSearchChange: onSearchChange
+    totalContents: totalCourses
   })));
 };
 
@@ -202,7 +198,6 @@ SkillDetail.contextTypes = {
 SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   title: _propTypes.default.string.isRequired,
   skillRef: _propTypes.default.string.isRequired,
-  searchValue: _propTypes.default.string,
   description: _propTypes.default.string,
   metrics: _propTypes.default.shape({
     score: _propTypes.default.number,
@@ -220,8 +215,7 @@ SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   sorting: _propTypes.default.shape(_select.default.propTypes),
   onBackClick: _propTypes.default.func,
   onReviewClick: _propTypes.default.func,
-  onContinueLearningClick: _propTypes.default.func,
-  onSearchChange: _propTypes.default.func
+  onContinueLearningClick: _propTypes.default.func
 } : {};
 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","searchValue","metrics","focused","availableForReview","totalCourses","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","onSearchChange","score","questionsToReview","showMore","setShowMore","useState","handleShowMore","useCallback","Description","classnames","style","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButton","ctaContainer","skillFocusBadge","faSize","wrapperSize","length","showMoreWrapper","ctaWrapper","skillInformation","skillInformationNumber","progressContainer","progressInformationNumber","toFixed","string","isRequired","shape","number","CardsGrid","onChange","options","arrayOf","SelectOptionPropTypes","Select"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, isNil} from 'lodash/fp';\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    searchValue,\n    metrics = {},\n    focused,\n    availableForReview,\n    ongoingCoursesAvailable,\n    totalCourses,\n    skillIncludedCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick,\n    onSearchChange\n  } = props;\n  const {score = 0, questionsToReview} = metrics;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        {description}\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=\"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                {description.length >= 226 ? (\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          searchValue={searchValue}\n          filters={filters}\n          sorting={sorting}\n          totalContents={totalCourses}\n          onSearchChange={onSearchChange}\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  searchValue: PropTypes.string,\n  description: PropTypes.string,\n  metrics: PropTypes.shape({\n    score: PropTypes.number,\n    questionsToReview: PropTypes.number\n  }),\n  focused: PropTypes.bool,\n  availableForReview: PropTypes.bool,\n  ongoingCoursesAvailable: PropTypes.bool,\n  totalCourses: PropTypes.number,\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  onSearchChange: PropTypes.func\n};\n\nexport default SkillDetail;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEO,MAAMA,sBAAsB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACxD,MAAM;IAACC,uBAAD;IAA0BC;EAA1B,IAAqCH,KAA3C;EACA,MAAM;IAACI,IAAD;IAAOC;EAAP,IAAoBJ,OAA1B;EACA,MAAMK,gBAAgB,GAAG,mBAAI,gBAAJ,EAAsBF,IAAtB,CAAzB;EAEA,oBACE,uDACE,6BAAC,mBAAD;IACE,KAAK,EACHF,uBAAuB,GAAGG,SAAS,CAAC,mBAAD,CAAZ,GAAoCA,SAAS,CAAC,gBAAD,CAFxE;IAIE,IAAI,EAAC,SAJP;IAKE,WAAW,EAAE;MACXE,KAAK,EAAE,aADI;MAEXC,YAAY,EAAE,MAFH;MAGXC,eAAe,EAAEH;IAHN,CALf;IAUE,oBAAoB,EAAE,IAAAI,yBAAA,EAAS,YAAWJ,gBAAiB,0BAArC,CAVxB;IAWE,UAAU,EAAC,SAXb;IAYE,IAAI,EAAE;MACJK,QAAQ,EAAE,MADN;MAEJC,MAAM,EAAE;QACNC,IAAI,EAAE,MADA;QAENC,KAAK,EAAE,SAFD;QAGNC,IAAI,EAAE;MAHA;IAFJ,CAZR;IAoBE,OAAO,EAAEZ;EApBX,EADF,CADF;AA0BD,CA/BM;;;AAiCPJ,sBAAsB,CAACiB,YAAvB,GAAsC;EACpCZ,IAAI,EAAEa,iBAAA,CAASC,iBAAT,CAA2Bd,IADG;EAEpCC,SAAS,EAAEY,iBAAA,CAASC,iBAAT,CAA2Bb;AAFF,CAAtC;AAKAN,sBAAsB,CAACoB,SAAvB,2CAAmC;EACjCjB,uBAAuB,EAAEkB,kBAAA,CAAUC,IADF;EAEjClB,OAAO,EAAEiB,kBAAA,CAAUE;AAFc,CAAnC;;AAKA,MAAMC,WAAW,GAAG,CAACvB,KAAD,EAAQC,OAAR,KAAoB;EACtC,MAAM;IACJuB,KADI;IAEJC,QAFI;IAGJC,WAHI;IAIJC,WAJI;IAKJC,OAAO,GAAG,EALN;IAMJC,OANI;IAOJC,kBAPI;IAQJ5B,uBARI;IASJ6B,YATI;IAUJC,oBAVI;IAWJC,OAXI;IAYJC,OAZI;IAaJC,WAbI;IAcJC,aAdI;IAeJC,uBAfI;IAgBJC;EAhBI,IAiBFtC,KAjBJ;EAkBA,MAAM;IAACuC,KAAK,GAAG,CAAT;IAAYC;EAAZ,IAAiCZ,OAAvC;EACA,MAAM;IAACvB;EAAD,IAAcJ,OAApB;EAEA,MAAM,CAACwC,QAAD,EAAWC,WAAX,IAA0B,IAAAC,eAAA,EAAS,KAAT,CAAhC;EAEA,MAAMC,cAAc,GAAG,IAAAC,kBAAA,EAAY,MAAMH,WAAW,CAAC,CAACD,QAAF,CAA7B,EAA0C,CAACC,WAAD,EAAcD,QAAd,CAA1C,CAAvB;EAEA,MAAMK,WAAW,GAAG,IAAAD,kBAAA,EAAY,MAAM;IACpC,oBACE;MAAK,SAAS,EAAE,IAAAE,mBAAA,EAAWC,cAAA,CAAMtB,WAAjB,EAA8B,CAACe,QAAD,IAAaO,cAAA,CAAMC,QAAjD;IAAhB,GACGvB,WADH,CADF;EAKD,CANmB,EAMjB,CAACe,QAAD,EAAWf,WAAX,CANiB,CAApB;EAQA,MAAMwB,WAAW,GAAG,IAAAL,kBAAA,EAAY,MAAM;IACpC,IAAIN,KAAK,KAAKY,SAAd,EAAyB,OAAO,IAAP;IACzB,MAAMC,gBAAgB,GAAG,SAAzB;IACA,MAAMC,wBAAwB,GAAG;MAC/B5C,eAAe,EAAE2C,gBADc;MAE/B7C,KAAK,EAAG,GAAEgC,KAAM;IAFe,CAAjC;IAKA,oBACE;MAAK,SAAS,EAAES,cAAA,CAAMM;IAAtB,gBACE;MACE,aAAU,UADZ;MAEE,SAAS,EAAEN,cAAA,CAAMO,QAFnB;MAGE,KAAK,EAAEF,wBAHT;MAIE,IAAI,EAAC;IAJP,EADF,CADF;EAUD,CAlBmB,EAkBjB,CAACd,KAAD,CAlBiB,CAApB;EAoBA,oBACE;IAAK,SAAS,EAAES,cAAA,CAAMQ;EAAtB,gBACE;IAAK,SAAS,EAAER,cAAA,CAAMS,SAAtB;IAAiC,aAAWhC;EAA5C,GACG,CAAC,qBAAMU,WAAN,CAAD,gBACC,6BAAC,uBAAD;IACE,MAAM,EAAC,YADT;IAEE,aAAU,aAFZ;IAGE,cAAW,MAHb;IAIE,OAAO,EAAEA,WAJX;IAKE,SAAS,EAAEa,cAAA,CAAMU,UALnB;IAME,gBAAgB,EAAC;EANnB,EADD,GASG,IAVN,eAWE;IAAK,SAAS,EAAEV,cAAA,CAAMW;EAAtB,gBACE,0CACG9B,OAAO,gBACN;IAAK,SAAS,EAAEmB,cAAA,CAAMY;EAAtB,gBACE,6BAAC,aAAD;IACE,QAAQ,EAAC,gBADX;IAEE,eAAe,EAAC,SAFlB;IAGE,IAAI,EAAE;MACJC,MAAM,EAAE,EADJ;MAEJC,WAAW,EAAE;IAFT;EAHR,EADF,EASGzD,SAAS,CAAC,aAAD,CATZ,CADM,GAYJ,IAbN,eAcE;IAAK,SAAS,EAAE2C,cAAA,CAAMxB;EAAtB,GAA8BA,KAA9B,CAdF,EAeGE,WAAW,gBACV,yEACE,6BAAC,WAAD,OADF,EAEGA,WAAW,CAACqC,MAAZ,IAAsB,GAAtB,gBACC;IAAK,SAAS,EAAEf,cAAA,CAAMgB,eAAtB;IAAuC,OAAO,EAAEpB;EAAhD,GACGH,QAAQ,GAAGpC,SAAS,CAAC,WAAD,CAAZ,GAA4BA,SAAS,CAAC,WAAD,CADhD,eAEE,6BAAC,aAAD;IACE,QAAQ,EAAEoC,QAAQ,GAAG,YAAH,GAAkB,cADtC;IAEE,IAAI,EAAE;MACJoB,MAAM,EAAE,EADJ;MAEJC,WAAW,EAAE;IAFT;EAFR,EAFF,CADD,GAWG,IAbN,CADU,GAgBR,IA/BN,CADF,eAmCE;IAAK,SAAS,EAAEd,cAAA,CAAMiB;EAAtB,gBACE,6BAAC,mBAAD;IACE,IAAI,EAAC,WADP;IAEE,OAAO,EAAE7B,aAFX;IAGE,KAAK,EAAE/B,SAAS,CAAC,mBAAD,CAHlB;IAIE,QAAQ,EAAE,CAACyB,kBAJb;IAKE,WAAW,EAAE;MACXvB,KAAK,EAAE,aADI;MAEXC,YAAY,EAAE;IAFH;EALf,EADF,eAWE,6BAAC,sBAAD;IACE,uBAAuB,EAAEN,uBAD3B;IAEE,OAAO,EAAEmC;EAFX,EAXF,CAnCF,CAXF,EA+DGG,iBAAiB,GAAG,CAApB,gBACC;IAAK,SAAS,EAAEQ,cAAA,CAAMkB,gBAAtB;IAAwC,aAAU;EAAlD,gBACE;IAAM,SAAS,EAAElB,cAAA,CAAMmB;EAAvB,GAAgD3B,iBAAhD,CADF,UAESnC,SAAS,CAAC,4CAAD,CAFlB,CADD,GAKG,IApEN,eAqEE;IAAK,SAAS,EAAE2C,cAAA,CAAMoB;EAAtB,gBACE,6BAAC,WAAD,OADF,eAEE;IAAM,SAAS,EAAEpB,cAAA,CAAMqB;EAAvB,GAAmD9B,KAAK,CAAC+B,OAAN,CAAc,CAAd,CAAnD,MAFF,CArEF,eAyEE,6BAAC,mBAAD;IACE,OAAO,EAAEtC,oBADX;IAEE,WAAW,EAAEL,WAFf;IAGE,OAAO,EAAEM,OAHX;IAIE,OAAO,EAAEC,OAJX;IAKE,aAAa,EAAEH,YALjB;IAME,cAAc,EAAEO;EANlB,EAzEF,CADF,CADF;AAsFD,CA5ID;;AA8IAf,WAAW,CAACP,YAAZ,GAA2B;EACzBZ,IAAI,EAAEa,iBAAA,CAASC,iBAAT,CAA2Bd,IADR;EAEzBC,SAAS,EAAEY,iBAAA,CAASC,iBAAT,CAA2Bb;AAFb,CAA3B;AAKAkB,WAAW,CAACJ,SAAZ,2CAAwB;EACtBK,KAAK,EAAEJ,kBAAA,CAAUmD,MAAV,CAAiBC,UADF;EAEtB/C,QAAQ,EAAEL,kBAAA,CAAUmD,MAAV,CAAiBC,UAFL;EAGtB7C,WAAW,EAAEP,kBAAA,CAAUmD,MAHD;EAItB7C,WAAW,EAAEN,kBAAA,CAAUmD,MAJD;EAKtB3C,OAAO,EAAER,kBAAA,CAAUqD,KAAV,CAAgB;IACvBlC,KAAK,EAAEnB,kBAAA,CAAUsD,MADM;IAEvBlC,iBAAiB,EAAEpB,kBAAA,CAAUsD;EAFN,CAAhB,CALa;EAStB7C,OAAO,EAAET,kBAAA,CAAUC,IATG;EAUtBS,kBAAkB,EAAEV,kBAAA,CAAUC,IAVR;EAWtBnB,uBAAuB,EAAEkB,kBAAA,CAAUC,IAXb;EAYtBU,YAAY,EAAEX,kBAAA,CAAUsD,MAZF;EAatB1C,oBAAoB,EAAEZ,kBAAA,CAAUqD,KAAV,CAAgBE,kBAAA,CAAUxD,SAA1B,CAbA;EActBc,OAAO,EAAEb,kBAAA,CAAUqD,KAAV,CAAgB;IACvBG,QAAQ,EAAExD,kBAAA,CAAUE,IADG;IAEvBuD,OAAO,EAAEzD,kBAAA,CAAU0D,OAAV,CAAkB1D,kBAAA,CAAUqD,KAAV,CAAgBM,6BAAhB,CAAlB;EAFc,CAAhB,CAda;EAkBtB7C,OAAO,EAAEd,kBAAA,CAAUqD,KAAV,CAAgBO,eAAA,CAAO7D,SAAvB,CAlBa;EAmBtBgB,WAAW,EAAEf,kBAAA,CAAUE,IAnBD;EAoBtBc,aAAa,EAAEhB,kBAAA,CAAUE,IApBH;EAqBtBe,uBAAuB,EAAEjB,kBAAA,CAAUE,IArBb;EAsBtBgB,cAAc,EAAElB,kBAAA,CAAUE;AAtBJ,CAAxB;eAyBeC,W"}
+{"version":3,"file":"index.js","names":["ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","width","borderRadius","backgroundColor","convert","position","faIcon","name","color","size","contextTypes","Provider","childContextTypes","propTypes","PropTypes","bool","func","SkillDetail","title","skillRef","description","metrics","focused","availableForReview","totalCourses","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","score","questionsToReview","showMore","setShowMore","useState","handleShowMore","useCallback","Description","classnames","style","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButton","ctaContainer","skillFocusBadge","faSize","wrapperSize","length","showMoreWrapper","ctaWrapper","skillInformation","skillInformationNumber","progressContainer","progressInformationNumber","toFixed","string","isRequired","shape","number","CardsGrid","onChange","options","arrayOf","SelectOptionPropTypes","Select"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, isNil} from 'lodash/fp';\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    totalCourses,\n    skillIncludedCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick\n  } = props;\n  const {score = 0, questionsToReview} = metrics;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        {description}\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=\"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                {description.length >= 226 ? (\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={totalCourses}\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  }),\n  focused: PropTypes.bool,\n  availableForReview: PropTypes.bool,\n  ongoingCoursesAvailable: PropTypes.bool,\n  totalCourses: PropTypes.number,\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};\n\nexport default SkillDetail;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "11.32.38-alpha.39.2+d0d593156",
+  "version": "11.32.38-alpha.4.2+1dd33138c",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -177,5 +177,5 @@
     "last 2 versions",
     "IE 11"
   ],
-  "gitHead": "d0d593156ab8051270a90794d5b61c646c0e2756"
+  "gitHead": "1dd33138c99f7f4f394c59f5312ef0dc3037f6e3"
 }