@coorpacademy/components 11.32.34 → 11.32.35-alpha.11

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

@@ -17,7 +17,7 @@ var _provider = _interopRequireDefault(require("../../atom/provider"));
 
 var _tag = _interopRequireDefault(require("../../atom/tag"));
 
-var _select = _interopRequireWildcard(require("../../atom/select"));
+var _select = require("../../atom/select");
 
 var _buttonLinkIcon = _interopRequireDefault(require("../../atom/button-link-icon"));
 
@@ -27,8 +27,6 @@ var _cardsGrid = _interopRequireDefault(require("../../organism/cards-grid"));
 
 var _allCourses = _interopRequireDefault(require("../skill-detail/all-courses"));
 
-var _continueLearning = _interopRequireDefault(require("../skill-detail/continue-learning"));
-
 var _skillDetail = require("../skill-detail");
 
 var _progressWrapper = _interopRequireDefault(require("../../molecule/progress-wrapper"));
@@ -49,31 +47,24 @@ const CertificationDetail = (props, context) => {
     title,
     description,
     certificationCourses,
-    ongoingCourses,
-    totalCourses,
-    totalModules,
+    ongoingCoursesAvailable,
     filters,
-    sorting,
     onBackClick,
     onContinueLearningClick,
     metrics,
     logoUrl,
-    onDownloadDiploma,
-    badge = {}
+    diplomaUrl,
+    badgeUrl
   } = props;
   const {
     translate
   } = context;
   const {
     progression,
-    completedCourses,
-    completedModules,
-    stars
+    mandatoryModules,
+    stars,
+    totalModules
   } = metrics;
-  const {
-    badgeUrl = false,
-    onDownloadBadge
-  } = badge;
   const [showMore, setShowMore] = (0, _react.useState)(false);
   const handleShowMore = (0, _react.useCallback)(() => setShowMore(!showMore), [setShowMore, showMore]);
   const Description = (0, _react.useCallback)(() => {
@@ -81,6 +72,7 @@ const CertificationDetail = (props, context) => {
       className: (0, _classnames.default)(_style.default.description, !showMore && _style.default.truncate)
     }, description);
   }, [showMore, description]);
+  const completedModules = (0, _react.useMemo)(() => mandatoryModules * progression / 100, [mandatoryModules, progression]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.backgroundContainer
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -115,37 +107,29 @@ const CertificationDetail = (props, context) => {
     }
   })) : null) : null, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.contentStats
-  }, /*#__PURE__*/_react.default.createElement("span", null, `${totalCourses} ${(0, _lowerCase2.default)(translate('courses'))}`), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.divider
-  }), /*#__PURE__*/_react.default.createElement("span", null, `${totalModules} ${(0, _lowerCase2.default)(translate('modules'))}`)), /*#__PURE__*/_react.default.createElement(_skillDetail.ContinueLearningButton, {
-    ongoingCoursesAvailable: !!ongoingCourses.list.length,
+  }, /*#__PURE__*/_react.default.createElement("span", null, `${totalModules} ${(0, _lowerCase2.default)(translate('modules'))}`)), /*#__PURE__*/_react.default.createElement(_skillDetail.ContinueLearningButton, {
+    ongoingCoursesAvailable: ongoingCoursesAvailable,
     onClick: onContinueLearningClick
-  }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.continueLearningSection
-  }, /*#__PURE__*/_react.default.createElement(_continueLearning.default, {
-    ongoingCourses: ongoingCourses
-  })), /*#__PURE__*/_react.default.createElement(_progressWrapper.default, {
+  }))), /*#__PURE__*/_react.default.createElement(_progressWrapper.default, {
     title: translate('your_progress'),
     subtitle: translate('certification_progress_wrapper_subtitle'),
     progression: progression,
-    completedCourses: completedCourses,
     completedModules: completedModules,
+    mandatoryModules: mandatoryModules,
     sections: (0, _compact2.default)([{
       type: 'diploma',
-      onDownload: () => onDownloadDiploma
+      downloadUrl: diplomaUrl
     }, badgeUrl && {
       type: 'badge',
-      badgeUrl,
-      onDownload: () => onDownloadBadge
+      downloadUrl: badgeUrl
     }, {
       type: 'stars',
       stars
     }])
   }), /*#__PURE__*/_react.default.createElement(_allCourses.default, {
-    courses: certificationCourses,
-    totalCourses: totalCourses,
+    content: certificationCourses,
     filters: filters,
-    sorting: sorting
+    "data-name": "certification-courses"
   })));
 };
 
@@ -161,23 +145,17 @@ CertificationDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   metrics: _propTypes.default.shape({
     progression: _propTypes.default.number,
     stars: _propTypes.default.number,
-    completedCourses: _propTypes.default.number,
-    completedModules: _propTypes.default.number
-  }),
-  onDownloadDiploma: _propTypes.default.func,
-  badge: _propTypes.default.shape({
-    badgeUrl: _propTypes.default.string,
-    onDownloadBadge: _propTypes.default.func
+    mandatoryModules: _propTypes.default.number,
+    totalModules: _propTypes.default.number
   }),
-  ongoingCourses: _propTypes.default.shape(_cardsGrid.default.propTypes),
+  diplomaUrl: _propTypes.default.string,
+  badgeUrl: _propTypes.default.string,
+  ongoingCoursesAvailable: _propTypes.default.bool,
   certificationCourses: _propTypes.default.shape(_cardsGrid.default.propTypes),
-  totalCourses: _propTypes.default.number,
-  totalModules: _propTypes.default.number,
   filters: _propTypes.default.shape({
     onChange: _propTypes.default.func,
     options: _propTypes.default.arrayOf(_propTypes.default.shape(_select.SelectOptionPropTypes))
   }),
-  sorting: _propTypes.default.shape(_select.default.propTypes),
   onBackClick: _propTypes.default.func,
   onContinueLearningClick: _propTypes.default.func
 } : {};

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DESCRIPTION_BREAKPOINT","CertificationDetail","props","context","certificationRef","title","description","certificationCourses","ongoingCourses","totalCourses","totalModules","filters","sorting","onBackClick","onContinueLearningClick","metrics","logoUrl","onDownloadDiploma","badge","translate","progression","completedCourses","completedModules","stars","badgeUrl","onDownloadBadge","showMore","setShowMore","useState","handleShowMore","useCallback","Description","classnames","style","truncate","backgroundContainer","container","backButton","ctaContainer","logoContainer","logo","length","showMoreWrapper","faSize","wrapperSize","contentStats","divider","list","continueLearningSection","type","onDownload","contextTypes","skin","Provider","childContextTypes","propTypes","PropTypes","string","isRequired","shape","number","func","CardsGrid","onChange","options","arrayOf","SelectOptionPropTypes","Select"],"sources":["../../../src/template/certification-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {compact, lowerCase} 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 ContinueLearning from '../skill-detail/continue-learning';\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    ongoingCourses,\n    totalCourses,\n    totalModules,\n    filters,\n    sorting,\n    onBackClick,\n    onContinueLearningClick,\n    metrics,\n    logoUrl,\n    onDownloadDiploma,\n    badge = {}\n  } = props;\n  const {translate} = context;\n  const {progression, completedCourses, completedModules, stars} = metrics;\n  const {badgeUrl = false, onDownloadBadge} = badge;\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  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={certificationRef}>\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        <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>{`${totalCourses} ${lowerCase(translate('courses'))}`}</span>\n              <div className={style.divider} />\n              <span>{`${totalModules} ${lowerCase(translate('modules'))}`}</span>\n            </div>\n            <ContinueLearningButton\n              ongoingCoursesAvailable={!!ongoingCourses.list.length}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        <div className={style.continueLearningSection}>\n          <ContinueLearning ongoingCourses={ongoingCourses} />\n        </div>\n        <ProgressWrapper\n          title={translate('your_progress')}\n          subtitle={translate('certification_progress_wrapper_subtitle')}\n          progression={progression}\n          completedCourses={completedCourses}\n          completedModules={completedModules}\n          sections={compact([\n            {\n              type: 'diploma',\n              onDownload: () => onDownloadDiploma\n            },\n            badgeUrl && {\n              type: 'badge',\n              badgeUrl,\n              onDownload: () => onDownloadBadge\n            },\n            {\n              type: 'stars',\n              stars\n            }\n          ])}\n        />\n        <AllCourses\n          courses={certificationCourses}\n          totalCourses={totalCourses}\n          filters={filters}\n          sorting={sorting}\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    completedCourses: PropTypes.number,\n    completedModules: PropTypes.number\n  }),\n  onDownloadDiploma: PropTypes.func,\n  badge: PropTypes.shape({\n    badgeUrl: PropTypes.string,\n    onDownloadBadge: PropTypes.func\n  }),\n  ongoingCourses: PropTypes.shape(CardsGrid.propTypes),\n  certificationCourses: PropTypes.shape(CardsGrid.propTypes),\n  totalCourses: PropTypes.number,\n  totalModules: 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  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default CertificationDetail;\n"],"mappings":"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"}
+{"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, pipe, get, size} 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    () => (mandatoryModules * progression) / 100,\n    [mandatoryModules, progression]\n  );\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={certificationRef}>\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        <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/certification-detail/style.css

@@ -8,14 +8,6 @@
 @value cm_grey_200 from colors;
 @value cm_grey_400 from colors;
 
-.divider {
-  width: 4px;
-  height: 4px;
-  background-color: cm_grey_400;
-  border: solid cm_grey_400 1px;
-  border-radius: 4px;
-}
-
 .textBase {
   font-family: "Gilroy";
   font-style: normal;
@@ -53,6 +45,7 @@
   align-items: center;
   width: 100%;
   gap: 40px;
+  margin-bottom: 40px;
 }
 
 .logoContainer {
@@ -112,10 +105,6 @@
   color: cm_grey_400;
 }
 
-.continueLearningSection {
-  padding: 24px 0 32px 0;
-}
-
 @media tablet {
   .ctaContainer {
     flex-direction: column;

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

@@ -26,14 +26,13 @@ declare namespace AllCourses {
         const translate: PropTypes.Requireable<(...args: any[]) => any>;
     }
     namespace propTypes {
-        const courses: PropTypes.Requireable<PropTypes.InferProps<{
+        const content: PropTypes.Requireable<PropTypes.InferProps<{
             list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
             customStyle: PropTypes.Requireable<{
                 [x: string]: string | null | undefined;
             }>;
             loading: PropTypes.Requireable<boolean>;
         }>>;
-        const totalCourses: PropTypes.Requireable<number>;
         const filters: PropTypes.Requireable<PropTypes.InferProps<{
             onChange: PropTypes.Requireable<(...args: any[]) => any>;
             options: PropTypes.Requireable<(PropTypes.InferProps<{

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":";AA2CA,mEAwHC"}
+{"version":3,"file":"all-courses.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/all-courses.js"],"names":[],"mappings":";AA6CA,mEAsHC"}

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

@@ -3,9 +3,11 @@
 exports.__esModule = true;
 exports.default = void 0;
 
-var _sortBy2 = _interopRequireDefault(require("lodash/fp/sortBy"));
+var _size2 = _interopRequireDefault(require("lodash/fp/size"));
 
-var _getOr2 = _interopRequireDefault(require("lodash/fp/getOr"));
+var _map2 = _interopRequireDefault(require("lodash/fp/map"));
+
+var _filter2 = _interopRequireDefault(require("lodash/fp/filter"));
 
 var _get2 = _interopRequireDefault(require("lodash/fp/get"));
 
@@ -37,10 +39,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+const uncappedMap = _map2.default.convert({
+  cap: false
+});
+
 const FilterButton = (props, context) => {
   const {
     selected,
-    filter,
+    label,
     onClick
   } = props;
   const {
@@ -54,7 +60,7 @@ const FilterButton = (props, context) => {
       transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',
       width: 'fit-content'
     },
-    label: filter,
+    label,
     onClick,
     'data-name': 'filter-type-course-button'
   };
@@ -67,14 +73,13 @@ FilterButton.contextTypes = {
 };
 FilterButton.propTypes = process.env.NODE_ENV !== "production" ? {
   selected: _propTypes.default.bool,
-  filter: _propTypes.default.string,
+  label: _propTypes.default.string,
   onClick: _propTypes.default.func
 } : {};
 
 const AllCourses = (props, context) => {
   const {
-    courses,
-    totalCourses,
+    content,
     filters,
     sorting
   } = props;
@@ -85,47 +90,43 @@ const AllCourses = (props, context) => {
   const {
     list,
     loading
-  } = courses;
+  } = content;
   const {
     translate
   } = context;
   const [showCompleted, setShowCompleted] = (0, _react.useState)(true);
   const [searchValue, setSearchValue] = (0, _react.useState)('');
-  const [searchResults, setSearchResults] = (0, _react.useState)((0, _sortBy2.default)(course => -(0, _getOr2.default)(0, ['progress'], course), list));
   const sortView = sorting !== undefined ? /*#__PURE__*/_react.default.createElement("div", {
     "data-name": "choice"
   }, /*#__PURE__*/_react.default.createElement(_select.default, _extends({}, sorting, {
     "aria-label": "All courses sort"
   }))) : null;
-  (0, _react.useEffect)(() => {
-    setSearchResults((0, _sortBy2.default)(course => -(0, _getOr2.default)(0, ['progress'], course), list));
-  }, [list]);
+  const filteredContent = (0, _react.useMemo)(() => {
+    return showCompleted ? list : (0, _filter2.default)(course => course.progress < 1, list);
+  }, [list, showCompleted]);
+  const contentResult = (0, _react.useMemo)(() => {
+    return (0, _filter2.default)(skill => (0, _searchValueIncluded.default)(skill.title, searchValue), filteredContent);
+  }, [filteredContent, searchValue]);
   const handleSearch = (0, _react.useCallback)(value => {
     setSearchValue(value);
-    setSearchResults(list.filter(skill => (0, _searchValueIncluded.default)(skill.title, value)));
-  }, [list, setSearchValue, setSearchResults]);
+  }, [setSearchValue]);
   const handleSearchReset = (0, _react.useCallback)(() => {
     setSearchValue('');
-    setSearchResults(list);
-  }, [list, setSearchValue, setSearchResults]);
+  }, [setSearchValue]);
   const handleShowCompletedToggle = (0, _react.useCallback)(() => {
-    const toggledShowCompleted = !showCompleted;
-    setShowCompleted(toggledShowCompleted);
-
-    if (toggledShowCompleted) {
-      setSearchResults(list);
-      handleSearchReset();
-    } else {
-      setSearchResults(searchResults.filter(skill => skill.progress < 100));
-    }
-  }, [list, searchResults, showCompleted, setShowCompleted, setSearchResults, handleSearchReset]);
+    setShowCompleted(prevShowCompleted => !prevShowCompleted);
+  }, []);
+  const handleFilterChange = (0, _react.useCallback)(value => {
+    onChange(value);
+    handleSearchReset();
+  }, [onChange, handleSearchReset]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: _allCourses.default.continueLearningWrapper
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: _allCourses.default.continueLearningTitle
-  }, translate('all_courses')), /*#__PURE__*/_react.default.createElement("span", {
+  }, translate('all_content')), /*#__PURE__*/_react.default.createElement("span", {
     className: _allCourses.default.continueLearningNumber
-  }, totalCourses)), /*#__PURE__*/_react.default.createElement("div", {
+  }, (0, _size2.default)(contentResult))), /*#__PURE__*/_react.default.createElement("div", {
     className: _allCourses.default.searchAndSortSection
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _allCourses.default.searchWrapper
@@ -146,34 +147,28 @@ const AllCourses = (props, context) => {
     "aria-label": 'Show completed courses aria label',
     value: showCompleted,
     onChange: handleShowCompletedToggle
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  }), sortView ? /*#__PURE__*/_react.default.createElement("div", {
     className: _allCourses.default.sortWrapper
-  }, translate('sort_by'), sortView))), /*#__PURE__*/_react.default.createElement("div", {
+  }, translate('sort_by'), sortView) : null)), /*#__PURE__*/_react.default.createElement("div", {
     className: _allCourses.default.filterWrapper
-  }, options.length > 2 && searchResults.length > 0 ? options.map((filter, index) => {
+  }, (0, _size2.default)(options) > 2 && (0, _size2.default)(contentResult) ? uncappedMap((filterProps, index) => {
     const {
       name,
       value,
       selected
-    } = filter;
-
-    function handleChange() {
-      onChange(value);
-      handleSearchReset();
-    }
-
+    } = filterProps;
     return /*#__PURE__*/_react.default.createElement("div", {
       key: index,
       className: _allCourses.default.filterButtonWrapper
     }, /*#__PURE__*/_react.default.createElement(FilterButton, {
       selected: selected,
-      filter: name,
-      onClick: handleChange
+      label: name,
+      onClick: handleFilterChange
     }), value === 'ALL' ? /*#__PURE__*/_react.default.createElement("div", {
       className: _allCourses.default.divider
     }) : null);
-  }) : null), /*#__PURE__*/_react.default.createElement("div", null, searchResults.length > 0 ? /*#__PURE__*/_react.default.createElement(_cardsGrid.default, {
-    list: searchResults,
+  }, options) : null), /*#__PURE__*/_react.default.createElement("div", null, (0, _size2.default)(contentResult) ? /*#__PURE__*/_react.default.createElement(_cardsGrid.default, {
+    list: contentResult,
     loading: loading,
     customStyle: {
       justifyContent: 'left'
@@ -197,8 +192,7 @@ AllCourses.contextTypes = {
   translate: _provider.default.childContextTypes.translate
 };
 AllCourses.propTypes = process.env.NODE_ENV !== "production" ? {
-  courses: _propTypes.default.shape(_cardsGrid.default.propTypes),
-  totalCourses: _propTypes.default.number,
+  content: _propTypes.default.shape(_cardsGrid.default.propTypes),
   filters: _propTypes.default.shape({
     onChange: _propTypes.default.func,
     options: _propTypes.default.arrayOf(_propTypes.default.shape(_select.SelectOptionPropTypes))

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

@@ -1 +1 @@
-{"version":3,"file":"all-courses.js","names":["FilterButton","props","context","selected","filter","onClick","skin","primarySkinColor","buttonProps","customStyle","backgroundColor","color","transition","width","label","contextTypes","Provider","childContextTypes","translate","propTypes","PropTypes","bool","string","func","AllCourses","courses","totalCourses","filters","sorting","options","onChange","list","loading","showCompleted","setShowCompleted","useState","searchValue","setSearchValue","searchResults","setSearchResults","course","sortView","undefined","useEffect","handleSearch","useCallback","value","skill","searchValueIncluded","title","handleSearchReset","handleShowCompletedToggle","toggledShowCompleted","progress","style","continueLearningWrapper","continueLearningTitle","continueLearningNumber","searchAndSortSection","searchWrapper","placeholder","sortSection","sortWrapper","filterWrapper","length","map","index","name","handleChange","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, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {get, getOr, sortBy} 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 FilterButton = (props, context) => {\n  const {selected, filter, 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: filter,\n    onClick,\n    'data-name': 'filter-type-course-button'\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  selected: PropTypes.bool,\n  filter: PropTypes.string,\n  onClick: PropTypes.func\n};\n\nconst AllCourses = (props, context) => {\n  const {courses, totalCourses, filters, sorting} = props;\n  const {options, onChange} = filters;\n  const {list, loading} = courses;\n  const {translate} = context;\n  const [showCompleted, setShowCompleted] = useState(true);\n  const [searchValue, setSearchValue] = useState('');\n  const [searchResults, setSearchResults] = useState(\n    sortBy(course => -getOr(0, ['progress'], course), list)\n  );\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  useEffect(() => {\n    setSearchResults(sortBy(course => -getOr(0, ['progress'], course), list));\n  }, [list]);\n\n  const handleSearch = useCallback(\n    value => {\n      setSearchValue(value);\n      setSearchResults(list.filter(skill => searchValueIncluded(skill.title, value)));\n    },\n    [list, setSearchValue, setSearchResults]\n  );\n\n  const handleSearchReset = useCallback(() => {\n    setSearchValue('');\n    setSearchResults(list);\n  }, [list, setSearchValue, setSearchResults]);\n\n  const handleShowCompletedToggle = useCallback(() => {\n    const toggledShowCompleted = !showCompleted;\n    setShowCompleted(toggledShowCompleted);\n    if (toggledShowCompleted) {\n      setSearchResults(list);\n      handleSearchReset();\n    } else {\n      setSearchResults(searchResults.filter(skill => skill.progress < 100));\n    }\n  }, [list, searchResults, showCompleted, setShowCompleted, setSearchResults, handleSearchReset]);\n\n  return (\n    <>\n      <div className={style.continueLearningWrapper}>\n        <span className={style.continueLearningTitle}>{translate('all_courses')}</span>\n        <span className={style.continueLearningNumber}>{totalCourses}</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          />\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          <div className={style.sortWrapper}>\n            {translate('sort_by')}\n            {sortView}\n          </div>\n        </div>\n      </div>\n      <div className={style.filterWrapper}>\n        {options.length > 2 && searchResults.length > 0\n          ? options.map((filter, index) => {\n              const {name, value, selected} = filter;\n\n              function handleChange() {\n                onChange(value);\n                handleSearchReset();\n              }\n              return (\n                <div key={index} className={style.filterButtonWrapper}>\n                  <FilterButton selected={selected} filter={name} onClick={handleChange} />\n                  {value === 'ALL' ? <div className={style.divider} /> : null}\n                </div>\n              );\n            })\n          : null}\n      </div>\n      <div>\n        {searchResults.length > 0 ? (\n          <CardsGrid\n            list={searchResults}\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  courses: PropTypes.shape(CardsGrid.propTypes),\n  totalCourses: 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":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,YAAY,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACvC,MAAM;IAACC,QAAD;IAAWC,MAAX;IAAmBC;EAAnB,IAA8BJ,KAApC;EACA,MAAM;IAACK;EAAD,IAASJ,OAAf;EACA,MAAMK,gBAAgB,GAAG,mBAAI,gBAAJ,EAAsBD,IAAtB,CAAzB;EAEA,MAAME,WAAW,GAAG;IAClBC,WAAW,EAAE;MACXC,eAAe,EAAEP,QAAQ,GAAGI,gBAAH,GAAsB,SADpC;MAEXI,KAAK,EAAER,QAAQ,GAAG,SAAH,GAAe,SAFnB;MAGXS,UAAU,EAAE,6DAHD;MAIXC,KAAK,EAAE;IAJI,CADK;IAOlBC,KAAK,EAAEV,MAPW;IAQlBC,OARkB;IASlB,aAAa;EATK,CAApB;EAYA,oBAAO,6BAAC,mBAAD,EAAgBG,WAAhB,CAAP;AACD,CAlBD;;AAoBAR,YAAY,CAACe,YAAb,GAA4B;EAC1BT,IAAI,EAAEU,iBAAA,CAASC,iBAAT,CAA2BX,IADP;EAE1BY,SAAS,EAAEF,iBAAA,CAASC,iBAAT,CAA2BC;AAFZ,CAA5B;AAKAlB,YAAY,CAACmB,SAAb,2CAAyB;EACvBhB,QAAQ,EAAEiB,kBAAA,CAAUC,IADG;EAEvBjB,MAAM,EAAEgB,kBAAA,CAAUE,MAFK;EAGvBjB,OAAO,EAAEe,kBAAA,CAAUG;AAHI,CAAzB;;AAMA,MAAMC,UAAU,GAAG,CAACvB,KAAD,EAAQC,OAAR,KAAoB;EACrC,MAAM;IAACuB,OAAD;IAAUC,YAAV;IAAwBC,OAAxB;IAAiCC;EAAjC,IAA4C3B,KAAlD;EACA,MAAM;IAAC4B,OAAD;IAAUC;EAAV,IAAsBH,OAA5B;EACA,MAAM;IAACI,IAAD;IAAOC;EAAP,IAAkBP,OAAxB;EACA,MAAM;IAACP;EAAD,IAAchB,OAApB;EACA,MAAM,CAAC+B,aAAD,EAAgBC,gBAAhB,IAAoC,IAAAC,eAAA,EAAS,IAAT,CAA1C;EACA,MAAM,CAACC,WAAD,EAAcC,cAAd,IAAgC,IAAAF,eAAA,EAAS,EAAT,CAAtC;EACA,MAAM,CAACG,aAAD,EAAgBC,gBAAhB,IAAoC,IAAAJ,eAAA,EACxC,sBAAOK,MAAM,IAAI,CAAC,qBAAM,CAAN,EAAS,CAAC,UAAD,CAAT,EAAuBA,MAAvB,CAAlB,EAAkDT,IAAlD,CADwC,CAA1C;EAIA,MAAMU,QAAQ,GACZb,OAAO,KAAKc,SAAZ,gBACE;IAAK,aAAU;EAAf,gBACE,6BAAC,eAAD,eAAYd,OAAZ;IAAqB,cAAW;EAAhC,GADF,CADF,GAII,IALN;EAOA,IAAAe,gBAAA,EAAU,MAAM;IACdJ,gBAAgB,CAAC,sBAAOC,MAAM,IAAI,CAAC,qBAAM,CAAN,EAAS,CAAC,UAAD,CAAT,EAAuBA,MAAvB,CAAlB,EAAkDT,IAAlD,CAAD,CAAhB;EACD,CAFD,EAEG,CAACA,IAAD,CAFH;EAIA,MAAMa,YAAY,GAAG,IAAAC,kBAAA,EACnBC,KAAK,IAAI;IACPT,cAAc,CAACS,KAAD,CAAd;IACAP,gBAAgB,CAACR,IAAI,CAAC3B,MAAL,CAAY2C,KAAK,IAAI,IAAAC,4BAAA,EAAoBD,KAAK,CAACE,KAA1B,EAAiCH,KAAjC,CAArB,CAAD,CAAhB;EACD,CAJkB,EAKnB,CAACf,IAAD,EAAOM,cAAP,EAAuBE,gBAAvB,CALmB,CAArB;EAQA,MAAMW,iBAAiB,GAAG,IAAAL,kBAAA,EAAY,MAAM;IAC1CR,cAAc,CAAC,EAAD,CAAd;IACAE,gBAAgB,CAACR,IAAD,CAAhB;EACD,CAHyB,EAGvB,CAACA,IAAD,EAAOM,cAAP,EAAuBE,gBAAvB,CAHuB,CAA1B;EAKA,MAAMY,yBAAyB,GAAG,IAAAN,kBAAA,EAAY,MAAM;IAClD,MAAMO,oBAAoB,GAAG,CAACnB,aAA9B;IACAC,gBAAgB,CAACkB,oBAAD,CAAhB;;IACA,IAAIA,oBAAJ,EAA0B;MACxBb,gBAAgB,CAACR,IAAD,CAAhB;MACAmB,iBAAiB;IAClB,CAHD,MAGO;MACLX,gBAAgB,CAACD,aAAa,CAAClC,MAAd,CAAqB2C,KAAK,IAAIA,KAAK,CAACM,QAAN,GAAiB,GAA/C,CAAD,CAAhB;IACD;EACF,CATiC,EAS/B,CAACtB,IAAD,EAAOO,aAAP,EAAsBL,aAAtB,EAAqCC,gBAArC,EAAuDK,gBAAvD,EAAyEW,iBAAzE,CAT+B,CAAlC;EAWA,oBACE,yEACE;IAAK,SAAS,EAAEI,mBAAA,CAAMC;EAAtB,gBACE;IAAM,SAAS,EAAED,mBAAA,CAAME;EAAvB,GAA+CtC,SAAS,CAAC,aAAD,CAAxD,CADF,eAEE;IAAM,SAAS,EAAEoC,mBAAA,CAAMG;EAAvB,GAAgD/B,YAAhD,CAFF,CADF,eAKE;IAAK,SAAS,EAAE4B,mBAAA,CAAMI;EAAtB,gBACE;IAAK,SAAS,EAAEJ,mBAAA,CAAMK;EAAtB,gBACE,6BAAC,mBAAD;IACE,MAAM,EAAE;MACNC,WAAW,EAAE1C,SAAS,CAAC,qBAAD,CADhB;MAEN4B,KAAK,EAAEV,WAFD;MAGNN,QAAQ,EAAEc;IAHJ,CADV;IAME,OAAO,EAAEM;EANX,EADF,CADF,eAWE;IAAK,SAAS,EAAEI,mBAAA,CAAMO;EAAtB,gBACE,6BAAC,oBAAD;IACE,EAAE,EAAE,+BADN;IAEE,IAAI,EAAC,QAFP;IAGE,IAAI,EAAE3C,SAAS,CAAC,gBAAD,CAHjB;IAIE,KAAK,EAAEA,SAAS,CAAC,gBAAD,CAJlB;IAKE,cAAY,mCALd;IAME,KAAK,EAAEe,aANT;IAOE,QAAQ,EAAEkB;EAPZ,EADF,eAUE;IAAK,SAAS,EAAEG,mBAAA,CAAMQ;EAAtB,GACG5C,SAAS,CAAC,SAAD,CADZ,EAEGuB,QAFH,CAVF,CAXF,CALF,eAgCE;IAAK,SAAS,EAAEa,mBAAA,CAAMS;EAAtB,GACGlC,OAAO,CAACmC,MAAR,GAAiB,CAAjB,IAAsB1B,aAAa,CAAC0B,MAAd,GAAuB,CAA7C,GACGnC,OAAO,CAACoC,GAAR,CAAY,CAAC7D,MAAD,EAAS8D,KAAT,KAAmB;IAC7B,MAAM;MAACC,IAAD;MAAOrB,KAAP;MAAc3C;IAAd,IAA0BC,MAAhC;;IAEA,SAASgE,YAAT,GAAwB;MACtBtC,QAAQ,CAACgB,KAAD,CAAR;MACAI,iBAAiB;IAClB;;IACD,oBACE;MAAK,GAAG,EAAEgB,KAAV;MAAiB,SAAS,EAAEZ,mBAAA,CAAMe;IAAlC,gBACE,6BAAC,YAAD;MAAc,QAAQ,EAAElE,QAAxB;MAAkC,MAAM,EAAEgE,IAA1C;MAAgD,OAAO,EAAEC;IAAzD,EADF,EAEGtB,KAAK,KAAK,KAAV,gBAAkB;MAAK,SAAS,EAAEQ,mBAAA,CAAMgB;IAAtB,EAAlB,GAAsD,IAFzD,CADF;EAMD,CAbD,CADH,GAeG,IAhBN,CAhCF,eAkDE,0CACGhC,aAAa,CAAC0B,MAAd,GAAuB,CAAvB,gBACC,6BAAC,kBAAD;IACE,IAAI,EAAE1B,aADR;IAEE,OAAO,EAAEN,OAFX;IAGE,WAAW,EAAE;MAACuC,cAAc,EAAE;IAAjB;EAHf,EADD,gBAOC;IAAK,SAAS,EAAEjB,mBAAA,CAAMkB;EAAtB,gBACE;IAAK,SAAS,EAAElB,mBAAA,CAAMmB;EAAtB,GACGvD,SAAS,CAAC,2BAAD,EAA8B;IAACkB;EAAD,CAA9B,CADZ,CADF,eAIE;IAAK,SAAS,EAAEkB,mBAAA,CAAMoB;EAAtB,GACGxD,SAAS,CAAC,iCAAD,CADZ,CAJF,eAOE;IAAK,SAAS,EAAEoC,mBAAA,CAAMqB,4BAAtB;IAAoD,OAAO,EAAEzB;EAA7D,GACGhC,SAAS,CAAC,kCAAD,CADZ,CAPF,CARJ,CAlDF,CADF;AA0ED,CAxHD;;AA0HAM,UAAU,CAACT,YAAX,GAA0B;EACxBT,IAAI,EAAEU,iBAAA,CAASC,iBAAT,CAA2BX,IADT;EAExBY,SAAS,EAAEF,iBAAA,CAASC,iBAAT,CAA2BC;AAFd,CAA1B;AAKAM,UAAU,CAACL,SAAX,2CAAuB;EACrBM,OAAO,EAAEL,kBAAA,CAAUwD,KAAV,CAAgBC,kBAAA,CAAU1D,SAA1B,CADY;EAErBO,YAAY,EAAEN,kBAAA,CAAU0D,MAFH;EAGrBnD,OAAO,EAAEP,kBAAA,CAAUwD,KAAV,CAAgB;IACvB9C,QAAQ,EAAEV,kBAAA,CAAUG,IADG;IAEvBM,OAAO,EAAET,kBAAA,CAAU2D,OAAV,CAAkB3D,kBAAA,CAAUwD,KAAV,CAAgBI,6BAAhB,CAAlB;EAFc,CAAhB,CAHY;EAOrBpD,OAAO,EAAER,kBAAA,CAAUwD,KAAV,CAAgBK,eAAA,CAAO9D,SAAvB;AAPY,CAAvB;eAUeK,U"}
+{"version":3,"file":"all-courses.js","names":["uncappedMap","convert","cap","FilterButton","props","context","selected","label","onClick","skin","primarySkinColor","buttonProps","customStyle","backgroundColor","color","transition","width","contextTypes","Provider","childContextTypes","translate","propTypes","PropTypes","bool","string","func","AllCourses","content","filters","sorting","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","handleFilterChange","style","continueLearningWrapper","continueLearningTitle","continueLearningNumber","searchAndSortSection","searchWrapper","placeholder","sortSection","sortWrapper","filterWrapper","filterProps","index","name","filterButtonWrapper","divider","justifyContent","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","shape","CardsGrid","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} 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 {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': 'filter-type-course-button'\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  selected: PropTypes.bool,\n  label: PropTypes.string,\n  onClick: PropTypes.func\n};\n\nconst AllCourses = (props, context) => {\n  const {content, filters, sorting} = 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  const handleFilterChange = useCallback(\n    value => {\n      onChange(value);\n      handleSearchReset();\n    },\n    [onChange, handleSearchReset]\n  );\n\n  return (\n    <>\n      <div className={style.continueLearningWrapper}>\n        <span className={style.continueLearningTitle}>{translate('all_content')}</span>\n        <span className={style.continueLearningNumber}>{size(contentResult)}</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          />\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              return (\n                <div key={index} className={style.filterButtonWrapper}>\n                  <FilterButton selected={selected} label={name} onClick={handleFilterChange} />\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  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/locales/en/global.json

@@ -1,6 +1,7 @@
 {
   "all": "All",
   "all_courses": "All courses",
+  "all_content": "All content",
   "alphabetical": "Alphabetical",
   "add_learning_priority": "Add learning priority",
   "accepted_cards": "Credit or debit card",
@@ -67,6 +68,7 @@
   "media_stars_to_win": "Win {{count}} additional star in this chapter the first time you view a lesson!",
   "modules": "Modules",
   "modules_completed": "modules completed",
+  "modules_completed_mandatory": "mandatory modules completed",
   "More": "More",
   "More details": "More details",
   "New media": "New lesson",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "11.32.34",
+  "version": "11.32.35-alpha.11+5dab2fab6",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -177,5 +177,5 @@
     "last 2 versions",
     "IE 11"
   ],
-  "gitHead": "30607074e685fb930d63f17285279163254a67a3"
+  "gitHead": "5dab2fab63a77ed12849a26d3445d45d6ed38337"
 }