@coorpacademy/components 11.32.11 → 11.32.12-alpha.3

package/lib/template/common/authors/index.d.ts

@@ -3,6 +3,7 @@ declare class Authors extends React.Component<any, any, any> {
     static propTypes: {
         cards: PropTypes.Requireable<PropTypes.InferProps<{
             list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
+            justifyContent: PropTypes.Requireable<string>;
             loading: PropTypes.Requireable<boolean>;
         }>>;
         cardsTitle: PropTypes.Requireable<string>;

package/lib/template/common/authors/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/template/common/authors/index.js"],"names":[],"mappings":";AASA;IACE;;;;;;;;;;;;;;;;;MAgBE;IAEF;;;;;;;;;;;;;;;;;;;;;;;MAGE;IAEF,sCAMC;IAJC;;MAEC;IAIH,4BAIC;IAED,sBA+EC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/template/common/authors/index.js"],"names":[],"mappings":";AASA;IACE;;;;;;;;;;;;;;;;;;MAgBE;IAEF;;;;;;;;;;;;;;;;;;;;;;;MAGE;IAEF,sCAMC;IAJC;;MAEC;IAIH,4BAIC;IAED,sBA+EC;CACF"}

package/lib/template/common/dashboard/index.d.ts

@@ -76,6 +76,7 @@ declare namespace Dashboard {
                 type: PropTypes.Requireable<string>;
                 list: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{
                     list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
+                    justifyContent: PropTypes.Requireable<string>;
                     loading: PropTypes.Requireable<boolean>;
                 }> | PropTypes.InferProps<{
                     'aria-label': PropTypes.Requireable<string>;
@@ -348,6 +349,7 @@ declare namespace Dashboard {
                 type: PropTypes.Requireable<string>;
                 list: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{
                     list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
+                    justifyContent: PropTypes.Requireable<string>;
                     loading: PropTypes.Requireable<boolean>;
                 }> | PropTypes.InferProps<{
                     'aria-label': PropTypes.Requireable<string>;

package/lib/template/common/search-page/index.d.ts

@@ -79,6 +79,7 @@ declare namespace SearchPage {
         }>>;
         const cards: PropTypes.Requireable<PropTypes.InferProps<{
             list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
+            justifyContent: PropTypes.Requireable<string>;
             loading: PropTypes.Requireable<boolean>;
         }>>;
         const clearFilters: PropTypes.Requireable<PropTypes.InferProps<{
@@ -111,7 +112,7 @@ declare namespace SearchPage {
         const recommendations: PropTypes.Requireable<PropTypes.InferProps<{
             contentType: PropTypes.Requireable<string>;
             dataName: PropTypes.Requireable<string>;
-            title: PropTypes.Requireable<string>;
+            title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
             showMore: PropTypes.Requireable<string>;
             cards: PropTypes.Requireable<(PropTypes.InferProps<{
                 badge: PropTypes.Requireable<string>;
@@ -165,6 +166,7 @@ declare namespace SearchPage {
                     adaptive: PropTypes.Requireable<string>;
                 }>>;
             }> | null | undefined)[]>;
+            customStyle: PropTypes.Requireable<object>;
             onScroll: PropTypes.Requireable<(...args: any[]) => any>;
             onShowMore: PropTypes.Requireable<(...args: any[]) => any>;
             'arrows-aria-label': PropTypes.Requireable<PropTypes.InferProps<{
@@ -248,6 +250,7 @@ declare namespace SearchPage {
                 type: PropTypes.Requireable<string>;
                 list: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{
                     list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
+                    justifyContent: PropTypes.Requireable<string>;
                     loading: PropTypes.Requireable<boolean>;
                 }> | PropTypes.InferProps<{
                     'aria-label': PropTypes.Requireable<string>;

package/lib/template/external-course/index.d.ts

@@ -93,6 +93,7 @@ declare namespace ExternalCourse {
                 type: PropTypes.Requireable<string>;
                 list: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{
                     list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
+                    justifyContent: PropTypes.Requireable<string>;
                     loading: PropTypes.Requireable<boolean>;
                 }> | PropTypes.InferProps<{
                     'aria-label': PropTypes.Requireable<string>;

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

@@ -0,0 +1,128 @@
+@value colors: "../../variables/colors.css";
+@value breakpoints: "../../variables/breakpoints.css";
+@value tablet from breakpoints;
+@value mobile from breakpoints;
+@value xtraLightGrey from colors;
+@value cm_grey_100 from colors;
+@value cm_grey_200 from colors;
+@value cm_grey_400 from colors;
+
+.continueLearningWrapper {
+  margin-top: 40px;
+  margin-bottom: 16px;
+}
+
+.continueLearningTitle {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 22px;
+}
+
+.continueLearningNumber {
+  border-radius: 50%;
+  background-color: #EAEAEB;
+  color: #515161;
+  padding: 2px 4px;
+  margin-left: 8px;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 12px;
+}
+
+.searchAndSortSection {
+  display: flex;
+  margin-bottom: 16px;
+  justify-content: space-between;
+}
+
+.searchWrapper {
+  border-radius: 12px;
+  width: 300px;
+  background-color: cm_grey_100;
+}
+
+.sortSection {
+  display: flex;
+  gap: 32px;
+  align-items: center;
+}
+
+.sortWrapper {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.filterWrapper {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 32px;
+}
+
+.filterButtonWrapper {
+  display: flex;
+  align-items: center;
+}
+
+.divider {
+  height: 24px;
+  width: 1px;
+  background-color: cm_grey_200;
+  margin-left: 12px;
+}
+
+.emptySearchResultContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.emptySearchResultTitle {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 28px;
+  margin-bottom: 8px;
+}
+
+.emptySearchResultDescription {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 22px;
+  margin-bottom: 16px;
+}
+
+.emptySearchResultClearSearch {
+  color: #0061FF;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+  cursor: pointer;
+}
+
+.emptySearchResultClearSearch:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 799px) {
+  .searchAndSortSection {
+    flex-direction: column;
+  }
+
+  .sortSection {
+    margin-top: 16px;
+  }
+}
+
+@media mobile {
+  .sortSection {
+    flex-direction: column;
+    gap: 16px;
+    align-items: flex-start;
+    margin-top: 16px;
+  }
+
+  .filterWrapper {
+    overflow-x: scroll;
+  }
+}

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

@@ -0,0 +1,77 @@
+export default AllCourses;
+declare function AllCourses(props: any, context: any): JSX.Element;
+declare namespace AllCourses {
+    namespace contextTypes {
+        const skin: PropTypes.Requireable<PropTypes.InferProps<{
+            common: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            images: PropTypes.Requireable<PropTypes.InferProps<{
+                'logo-mobile': PropTypes.Requireable<any>;
+                logo: PropTypes.Requireable<any>;
+                'logo-email': PropTypes.Requireable<any>;
+                login: PropTypes.Requireable<any>;
+            }>>;
+            icons: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            mod: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            courses: PropTypes.Requireable<any[]>;
+            texts: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+        }>>;
+        const translate: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+    namespace propTypes {
+        const skillIncludedCourses: PropTypes.Requireable<PropTypes.InferProps<{
+            list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
+            justifyContent: PropTypes.Requireable<string>;
+            loading: PropTypes.Requireable<boolean>;
+        }>>;
+        const filters: PropTypes.Requireable<PropTypes.InferProps<{
+            onChange: PropTypes.Requireable<(...args: any[]) => any>;
+            options: PropTypes.Requireable<(PropTypes.InferProps<{
+                name: PropTypes.Validator<string>;
+                value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+                selected: PropTypes.Requireable<boolean>;
+                validOption: PropTypes.Requireable<boolean>;
+            }> | null | undefined)[]>;
+        }>>;
+        const sorting: PropTypes.Requireable<PropTypes.InferProps<{
+            title: PropTypes.Requireable<string>;
+            name: PropTypes.Requireable<string>;
+            className: PropTypes.Requireable<string>;
+            borderClassName: PropTypes.Requireable<string>;
+            disabled: PropTypes.Requireable<boolean>;
+            multiple: PropTypes.Requireable<boolean>;
+            description: PropTypes.Requireable<string>;
+            required: PropTypes.Requireable<boolean>;
+            onChange: PropTypes.Requireable<(...args: any[]) => any>;
+            theme: PropTypes.Requireable<string>;
+            options: PropTypes.Requireable<(PropTypes.InferProps<{
+                name: PropTypes.Validator<string>;
+                value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+                selected: PropTypes.Requireable<boolean>;
+                validOption: PropTypes.Requireable<boolean>;
+            }> | null | undefined)[]>;
+            optgroups: PropTypes.Requireable<(PropTypes.InferProps<{
+                label: PropTypes.Validator<string>;
+                options: PropTypes.Requireable<(PropTypes.InferProps<{
+                    name: PropTypes.Validator<string>;
+                    value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+                    selected: PropTypes.Requireable<boolean>;
+                    validOption: PropTypes.Requireable<boolean>;
+                }> | null | undefined)[]>;
+            }> | null | undefined)[]>;
+            modified: PropTypes.Requireable<boolean>;
+            error: PropTypes.Requireable<boolean>;
+            'aria-label': PropTypes.Requireable<string>;
+            'aria-labelledby': PropTypes.Requireable<string>;
+        }>>;
+    }
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=all-courses.d.ts.map

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

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

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

@@ -0,0 +1,198 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _get2 = _interopRequireDefault(require("lodash/fp/get"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _provider = _interopRequireDefault(require("../../atom/provider"));
+
+var _select = _interopRequireWildcard(require("../../atom/select"));
+
+var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
+
+var _searchForm = _interopRequireDefault(require("../../molecule/search-form"));
+
+var _cardsGrid = _interopRequireDefault(require("../../organism/cards-grid"));
+
+var _searchValueIncluded = _interopRequireDefault(require("../../util/search-value-included"));
+
+var _inputSwitch = _interopRequireDefault(require("../../atom/input-switch"));
+
+var _allCourses = _interopRequireDefault(require("./all-courses.css"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 FilterButton = (props, context) => {
+  const {
+    selected,
+    filter,
+    onClick
+  } = props;
+  const {
+    skin
+  } = context;
+  const primarySkinColor = (0, _get2.default)('common.primary', skin);
+  const buttonProps = {
+    customStyle: {
+      backgroundColor: selected ? primarySkinColor : '#E1E1E3',
+      color: selected ? '#FFFFFF' : '#515161',
+      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',
+      width: 'fit-content'
+    },
+    label: filter,
+    onClick,
+    'data-name': 'filter-type-course-button'
+  };
+  return /*#__PURE__*/_react.default.createElement(_buttonLink.default, buttonProps);
+};
+
+FilterButton.contextTypes = {
+  skin: _provider.default.childContextTypes.skin,
+  translate: _provider.default.childContextTypes.translate
+};
+FilterButton.propTypes = process.env.NODE_ENV !== "production" ? {
+  selected: _propTypes.default.bool,
+  filter: _propTypes.default.string,
+  onClick: _propTypes.default.func
+} : {};
+
+const AllCourses = (props, context) => {
+  const {
+    skillIncludedCourses,
+    filters,
+    sorting
+  } = props;
+  const {
+    options,
+    onChange
+  } = filters;
+  const {
+    list
+  } = skillIncludedCourses;
+  const {
+    translate
+  } = context;
+  const [showCompleted, setShowCompleted] = (0, _react.useState)(true);
+  const [searchValue, setSearchValue] = (0, _react.useState)('');
+  const [searchResults, setSearchResults] = (0, _react.useState)(list.sort((a, b) => {
+    const progressA = a.progress ?? 0;
+    const progressB = b.progress ?? 0;
+    return progressB - progressA;
+  }));
+  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;
+  const handleSearch = (0, _react.useCallback)(value => {
+    setSearchValue(value);
+    setSearchResults(list.filter(skill => (0, _searchValueIncluded.default)(skill.title, value)));
+  }, [list, setSearchValue, setSearchResults]);
+  const handleSearchReset = (0, _react.useCallback)(() => {
+    setSearchValue('');
+    setSearchResults(list);
+  }, [list, setSearchValue, setSearchResults]);
+  const handleShowCompletedToggle = (0, _react.useCallback)(() => {
+    const tempShowCompleted = !showCompleted;
+    setShowCompleted(tempShowCompleted);
+
+    if (tempShowCompleted) {
+      setSearchResults(list);
+      handleSearchReset();
+    } else {
+      setSearchResults(searchResults.filter(skill => skill.progress === 0));
+    }
+  }, [searchResults, showCompleted, setShowCompleted]);
+  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", {
+    className: _allCourses.default.continueLearningNumber
+  }, skillIncludedCourses.list.length)), /*#__PURE__*/_react.default.createElement("div", {
+    className: _allCourses.default.searchAndSortSection
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _allCourses.default.searchWrapper
+  }, /*#__PURE__*/_react.default.createElement(_searchForm.default, {
+    search: {
+      placeholder: translate('search_place_holder'),
+      value: searchValue,
+      onChange: handleSearch
+    },
+    onReset: handleSearchReset
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _allCourses.default.sortSection
+  }, /*#__PURE__*/_react.default.createElement(_inputSwitch.default, {
+    type: "switch",
+    title: translate('show_completed'),
+    value: showCompleted,
+    onChange: handleShowCompletedToggle
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _allCourses.default.sortWrapper
+  }, translate('sort_by'), sortView))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _allCourses.default.filterWrapper
+  }, options.length > 2 && searchResults.length > 0 ? options.map((filter, index) => {
+    const {
+      name,
+      value,
+      selected
+    } = filter;
+
+    function handleChange() {
+      onChange(value);
+      handleSearchReset();
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: index,
+      className: _allCourses.default.filterButtonWrapper
+    }, /*#__PURE__*/_react.default.createElement(FilterButton, {
+      selected: selected,
+      filter: name,
+      onClick: handleChange
+    }), 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,
+    justifyContent: "left"
+  }) : /*#__PURE__*/_react.default.createElement("div", {
+    className: _allCourses.default.emptySearchResultContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _allCourses.default.emptySearchResultTitle
+  }, translate('empty_search_result_title', {
+    searchValue
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _allCourses.default.emptySearchResultDescription
+  }, translate('empty_search_result_description')), /*#__PURE__*/_react.default.createElement("div", {
+    className: _allCourses.default.emptySearchResultClearSearch,
+    onClick: handleSearchReset
+  }, translate('empty_search_result_clear_search')))));
+};
+
+AllCourses.contextTypes = {
+  skin: _provider.default.childContextTypes.skin,
+  translate: _provider.default.childContextTypes.translate
+};
+AllCourses.propTypes = process.env.NODE_ENV !== "production" ? {
+  skillIncludedCourses: _propTypes.default.shape(_cardsGrid.default.propTypes),
+  filters: _propTypes.default.shape({
+    onChange: _propTypes.default.func,
+    options: _propTypes.default.arrayOf(_propTypes.default.shape(_select.SelectOptionPropTypes))
+  }),
+  sorting: _propTypes.default.shape(_select.default.propTypes)
+} : {};
+var _default = AllCourses;
+exports.default = _default;
+//# sourceMappingURL=all-courses.js.map

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

@@ -0,0 +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","skillIncludedCourses","filters","sorting","options","onChange","list","showCompleted","setShowCompleted","useState","searchValue","setSearchValue","searchResults","setSearchResults","sort","a","b","progressA","progress","progressB","sortView","undefined","handleSearch","useCallback","value","skill","searchValueIncluded","title","handleSearchReset","handleShowCompletedToggle","tempShowCompleted","style","continueLearningWrapper","continueLearningTitle","continueLearningNumber","length","searchAndSortSection","searchWrapper","placeholder","sortSection","sortWrapper","filterWrapper","map","index","name","handleChange","filterButtonWrapper","divider","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","shape","CardsGrid","arrayOf","SelectOptionPropTypes","Select"],"sources":["../../../src/template/skill-detail/all-courses.js"],"sourcesContent":["import React, {useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {get} 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 {skillIncludedCourses, filters, sorting} = props;\n  const {options, onChange} = filters;\n  const {list} = skillIncludedCourses;\n  const {translate} = context;\n  const [showCompleted, setShowCompleted] = useState(true);\n  const [searchValue, setSearchValue] = useState('');\n  const [searchResults, setSearchResults] = useState(\n    list.sort((a, b) => {\n      const progressA = a.progress ?? 0;\n      const progressB = b.progress ?? 0;\n      return progressB - progressA;\n    })\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  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 tempShowCompleted = !showCompleted;\n    setShowCompleted(tempShowCompleted);\n    if (tempShowCompleted) {\n      setSearchResults(list);\n      handleSearchReset();\n    } else {\n      setSearchResults(searchResults.filter(skill => skill.progress === 0));\n    }\n  }, [searchResults, showCompleted, setShowCompleted]);\n\n  return (\n    <>\n      <div className={style.continueLearningWrapper}>\n        <span className={style.continueLearningTitle}>{translate('all_courses')}</span>\n        <span className={style.continueLearningNumber}>{skillIncludedCourses.list.length}</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            type=\"switch\"\n            title={translate('show_completed')}\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 list={searchResults} justifyContent=\"left\" />\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  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};\n\nexport default AllCourses;\n"],"mappings":"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"}

package/lib/template/skill-detail/continue-learning.css

@@ -0,0 +1,21 @@
+.continueLearningWrapper {
+  margin-top: 40px;
+  margin-bottom: 16px;
+}
+
+.continueLearningTitle {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 22px;
+}
+
+.continueLearningNumber {
+  border-radius: 50%;
+  background-color: #EAEAEB;
+  color: #515161;
+  padding: 2px 4px;
+  margin-left: 8px;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 12px;
+}

package/lib/template/skill-detail/continue-learning.d.ts

@@ -0,0 +1,37 @@
+export default ContinueLearning;
+declare function ContinueLearning(props: any, context: any): JSX.Element | null;
+declare namespace ContinueLearning {
+    namespace contextTypes {
+        const skin: PropTypes.Requireable<PropTypes.InferProps<{
+            common: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            images: PropTypes.Requireable<PropTypes.InferProps<{
+                'logo-mobile': PropTypes.Requireable<any>;
+                logo: PropTypes.Requireable<any>;
+                'logo-email': PropTypes.Requireable<any>;
+                login: PropTypes.Requireable<any>;
+            }>>;
+            icons: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            mod: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            courses: PropTypes.Requireable<any[]>;
+            texts: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+        }>>;
+        const translate: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+    namespace propTypes {
+        const ongoingCourses: PropTypes.Requireable<PropTypes.InferProps<{
+            list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
+            justifyContent: PropTypes.Requireable<string>;
+            loading: PropTypes.Requireable<boolean>;
+        }>>;
+    }
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=continue-learning.d.ts.map

package/lib/template/skill-detail/continue-learning.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"continue-learning.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/continue-learning.js"],"names":[],"mappings":";AAOA,gFAkBC"}

package/lib/template/skill-detail/continue-learning.js

@@ -0,0 +1,56 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _provider = _interopRequireDefault(require("../../atom/provider"));
+
+var _cardsGrid = _interopRequireDefault(require("../../organism/cards-grid"));
+
+var _cardsList = _interopRequireDefault(require("../../molecule/dashboard/cards-list"));
+
+var _continueLearning = _interopRequireDefault(require("./continue-learning.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ContinueLearning = (props, context) => {
+  const {
+    ongoingCourses
+  } = props;
+  const {
+    translate
+  } = context;
+
+  if (ongoingCourses.list.length === 0) {
+    return null;
+  }
+
+  const Title = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+    className: _continueLearning.default.continueLearningTitle
+  }, translate('continue_learning')), /*#__PURE__*/_react.default.createElement("span", {
+    className: _continueLearning.default.continueLearningNumber
+  }, ongoingCourses.list.length));
+
+  return /*#__PURE__*/_react.default.createElement(_cardsList.default, {
+    cards: ongoingCourses.list,
+    title: /*#__PURE__*/_react.default.createElement(Title, null),
+    customStyle: {
+      padding: '16px 0px 8px'
+    }
+  });
+};
+
+ContinueLearning.contextTypes = {
+  skin: _provider.default.childContextTypes.skin,
+  translate: _provider.default.childContextTypes.translate
+};
+ContinueLearning.propTypes = process.env.NODE_ENV !== "production" ? {
+  ongoingCourses: _propTypes.default.shape(_cardsGrid.default.propTypes)
+} : {};
+var _default = ContinueLearning;
+exports.default = _default;
+//# sourceMappingURL=continue-learning.js.map

package/lib/template/skill-detail/continue-learning.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"continue-learning.js","names":["ContinueLearning","props","context","ongoingCourses","translate","list","length","Title","style","continueLearningTitle","continueLearningNumber","padding","contextTypes","skin","Provider","childContextTypes","propTypes","PropTypes","shape","CardsGrid"],"sources":["../../../src/template/skill-detail/continue-learning.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Provider from '../../atom/provider';\nimport CardsGrid from '../../organism/cards-grid';\nimport CardsList from '../../molecule/dashboard/cards-list';\nimport style from './continue-learning.css';\n\nconst ContinueLearning = (props, context) => {\n  const {ongoingCourses} = props;\n  const {translate} = context;\n\n  if (ongoingCourses.list.length === 0) {\n    return null;\n  }\n\n  const Title = () => (\n    <>\n      <span className={style.continueLearningTitle}>{translate('continue_learning')}</span>\n      <span className={style.continueLearningNumber}>{ongoingCourses.list.length}</span>\n    </>\n  );\n\n  return (\n    <CardsList cards={ongoingCourses.list} title={<Title />} customStyle={{padding: '16px 0px 8px'}}/>\n  );\n};\n\nContinueLearning.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nContinueLearning.propTypes = {\n  ongoingCourses: PropTypes.shape(CardsGrid.propTypes)\n};\n\nexport default ContinueLearning;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,gBAAgB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EAC3C,MAAM;IAACC;EAAD,IAAmBF,KAAzB;EACA,MAAM;IAACG;EAAD,IAAcF,OAApB;;EAEA,IAAIC,cAAc,CAACE,IAAf,CAAoBC,MAApB,KAA+B,CAAnC,EAAsC;IACpC,OAAO,IAAP;EACD;;EAED,MAAMC,KAAK,GAAG,mBACZ,yEACE;IAAM,SAAS,EAAEC,yBAAA,CAAMC;EAAvB,GAA+CL,SAAS,CAAC,mBAAD,CAAxD,CADF,eAEE;IAAM,SAAS,EAAEI,yBAAA,CAAME;EAAvB,GAAgDP,cAAc,CAACE,IAAf,CAAoBC,MAApE,CAFF,CADF;;EAOA,oBACE,6BAAC,kBAAD;IAAW,KAAK,EAAEH,cAAc,CAACE,IAAjC;IAAuC,KAAK,eAAE,6BAAC,KAAD,OAA9C;IAAyD,WAAW,EAAE;MAACM,OAAO,EAAE;IAAV;EAAtE,EADF;AAGD,CAlBD;;AAoBAX,gBAAgB,CAACY,YAAjB,GAAgC;EAC9BC,IAAI,EAAEC,iBAAA,CAASC,iBAAT,CAA2BF,IADH;EAE9BT,SAAS,EAAEU,iBAAA,CAASC,iBAAT,CAA2BX;AAFR,CAAhC;AAKAJ,gBAAgB,CAACgB,SAAjB,2CAA6B;EAC3Bb,cAAc,EAAEc,kBAAA,CAAUC,KAAV,CAAgBC,kBAAA,CAAUH,SAA1B;AADW,CAA7B;eAIehB,gB"}