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

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

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

@@ -102,11 +102,12 @@ const AllCourses = (props, context) => {
   const filteredContent = useMemo(() => {
     return showCompleted ? list : _filter(course => course.progress < 1, list);
   }, [list, showCompleted]);
-
-  const debounceHandleSearch = _debounce(500, handleSearch);
-
+  const debounceHandleSearch = useMemo(() => {
+    return _debounce(800, value => {
+      handleSearch(value);
+    });
+  }, [handleSearch]);
   const onSearchChange = useCallback(value => {
-    console.log('TCL ------>  ~ onSearchChange ~ value:', value);
     setSearchValue(value);
     debounceHandleSearch(value);
   }, [debounceHandleSearch]);

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","InputSwitch","Banner","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","bannerMicrolearning","search","oldValue","oldSearchValue","onChange","handleSearch","options","list","loading","type","bannerMessageType","action","bannerAction","oldSwitchValue","showCompleted","setShowCompleted","searchValue","setSearchValue","sortView","undefined","filteredContent","course","progress","debounceHandleSearch","onSearchChange","value","console","log","handleSearchReset","handleShowCompletedToggle","prevShowCompleted","continueLearningWrapper","continueLearningTitle","continueLearningNumber","searchAndSortSection","searchWrapper","placeholder","sortSection","sortWrapper","bannerWrapper","filterWrapper","filterProps","index","name","handleFilterChange","filterButtonWrapper","divider","justifyContent","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","shape","number","arrayOf","oneOf"],"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, isEmpty, debounce} 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 InputSwitch from '../../atom/input-switch';\nimport Banner from '../../molecule/banner';\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 {translate} = context;\n  const {\n    content,\n    filters,\n    sorting,\n    totalContents,\n    bannerMicrolearning = {},\n    search: {oldValue: oldSearchValue, onChange: handleSearch}\n  } = props;\n  const {options, onChange} = filters;\n  const {list, loading} = content;\n  const {type: bannerMessageType, action: bannerAction, oldSwitchValue} = bannerMicrolearning;\n  const [showCompleted, setShowCompleted] = useState(true);\n  const [searchValue, setSearchValue] = useState(oldSearchValue || '');\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 debounceHandleSearch = debounce(500, handleSearch);\n\n  const onSearchChange = useCallback(\n    value => {\n      console.log('TCL ------>  ~ onSearchChange ~ value:', value);\n      setSearchValue(value);\n      debounceHandleSearch(value);\n    },\n    [debounceHandleSearch]\n  );\n\n  const handleSearchReset = useCallback(\n    value => {\n      setSearchValue('');\n      debounceHandleSearch('');\n    },\n    [debounceHandleSearch]\n  );\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(filteredContent) : 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: onSearchChange\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      {!isEmpty(bannerMicrolearning) ? (\n        <div className={style.bannerWrapper}>\n          <Banner\n            type=\"info\"\n            message={\n              bannerMessageType === 'skill'\n                ? translate('banner_microlearning_rule_message_skill')\n                : translate('banner_microlearning_rule_message')\n            }\n            cta={[\n              {\n                type: 'switch',\n                label: translate('banner_microlearning_rule_label'),\n                action: bannerAction,\n                oldSwitchValue\n              }\n            ]}\n          />\n        </div>\n      ) : null}\n      <div className={style.filterWrapper}>\n        {size(options) > 2\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(filteredContent) ? (\n          <CardsGrid\n            list={filteredContent}\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  bannerMicrolearning: PropTypes.shape({\n    type: PropTypes.oneOf(['skill', 'playlist']),\n    action: PropTypes.func,\n    oldSwitchValue: PropTypes.bool\n  }),\n  search: PropTypes.shape({\n    oldValue: PropTypes.string,\n    onChange: PropTypes.func\n  })\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","InputSwitch","Banner","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","bannerMicrolearning","search","oldValue","oldSearchValue","onChange","handleSearch","options","list","loading","type","bannerMessageType","action","bannerAction","oldSwitchValue","showCompleted","setShowCompleted","searchValue","setSearchValue","sortView","undefined","filteredContent","course","progress","debounceHandleSearch","value","onSearchChange","handleSearchReset","handleShowCompletedToggle","prevShowCompleted","continueLearningWrapper","continueLearningTitle","continueLearningNumber","searchAndSortSection","searchWrapper","placeholder","sortSection","sortWrapper","bannerWrapper","filterWrapper","filterProps","index","name","handleFilterChange","filterButtonWrapper","divider","justifyContent","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","shape","number","arrayOf","oneOf"],"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, isEmpty, debounce} 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 InputSwitch from '../../atom/input-switch';\nimport Banner from '../../molecule/banner';\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 {translate} = context;\n  const {\n    content,\n    filters,\n    sorting,\n    totalContents,\n    bannerMicrolearning = {},\n    search: {oldValue: oldSearchValue, onChange: handleSearch}\n  } = props;\n  const {options, onChange} = filters;\n  const {list, loading} = content;\n  const {type: bannerMessageType, action: bannerAction, oldSwitchValue} = bannerMicrolearning;\n  const [showCompleted, setShowCompleted] = useState(true);\n  const [searchValue, setSearchValue] = useState(oldSearchValue || '');\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 debounceHandleSearch = useMemo(() => {\n    return debounce(800, value => {\n      handleSearch(value);\n    });\n  }, [handleSearch]);\n\n  const onSearchChange = useCallback(\n    value => {\n      setSearchValue(value);\n      debounceHandleSearch(value);\n    },\n    [debounceHandleSearch]\n  );\n\n  const handleSearchReset = useCallback(\n    value => {\n      setSearchValue('');\n      debounceHandleSearch('');\n    },\n    [debounceHandleSearch]\n  );\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(filteredContent) : 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: onSearchChange\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      {!isEmpty(bannerMicrolearning) ? (\n        <div className={style.bannerWrapper}>\n          <Banner\n            type=\"info\"\n            message={\n              bannerMessageType === 'skill'\n                ? translate('banner_microlearning_rule_message_skill')\n                : translate('banner_microlearning_rule_message')\n            }\n            cta={[\n              {\n                type: 'switch',\n                label: translate('banner_microlearning_rule_label'),\n                action: bannerAction,\n                oldSwitchValue\n              }\n            ]}\n          />\n        </div>\n      ) : null}\n      <div className={style.filterWrapper}>\n        {size(options) > 2\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(filteredContent) ? (\n          <CardsGrid\n            list={filteredContent}\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  bannerMicrolearning: PropTypes.shape({\n    type: PropTypes.oneOf(['skill', 'playlist']),\n    action: PropTypes.func,\n    oldSwitchValue: PropTypes.bool\n  }),\n  search: PropTypes.shape({\n    oldValue: PropTypes.string,\n    onChange: PropTypes.func\n  })\n};\n\nexport default AllCourses;\n"],"mappings":"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"}

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

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

@@ -126,9 +126,12 @@ const AllCourses = (props, context) => {
   const filteredContent = (0, _react.useMemo)(() => {
     return showCompleted ? list : (0, _filter2.default)(course => course.progress < 1, list);
   }, [list, showCompleted]);
-  const debounceHandleSearch = (0, _debounce2.default)(500, handleSearch);
+  const debounceHandleSearch = (0, _react.useMemo)(() => {
+    return (0, _debounce2.default)(800, value => {
+      handleSearch(value);
+    });
+  }, [handleSearch]);
   const onSearchChange = (0, _react.useCallback)(value => {
-    console.log('TCL ------>  ~ onSearchChange ~ value:', value);
     setSearchValue(value);
     debounceHandleSearch(value);
   }, [debounceHandleSearch]);

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","bannerMicrolearning","search","oldValue","oldSearchValue","onChange","handleSearch","options","list","loading","type","bannerMessageType","action","bannerAction","oldSwitchValue","showCompleted","setShowCompleted","useState","searchValue","setSearchValue","sortView","undefined","filteredContent","useMemo","course","progress","debounceHandleSearch","onSearchChange","useCallback","value","console","log","handleSearchReset","handleShowCompletedToggle","prevShowCompleted","style","continueLearningWrapper","continueLearningTitle","continueLearningNumber","searchAndSortSection","searchWrapper","placeholder","sortSection","sortWrapper","bannerWrapper","filterWrapper","filterProps","index","name","handleFilterChange","filterButtonWrapper","divider","justifyContent","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","shape","CardsGrid","number","arrayOf","SelectOptionPropTypes","Select","oneOf"],"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, isEmpty, debounce} 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 InputSwitch from '../../atom/input-switch';\nimport Banner from '../../molecule/banner';\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 {translate} = context;\n  const {\n    content,\n    filters,\n    sorting,\n    totalContents,\n    bannerMicrolearning = {},\n    search: {oldValue: oldSearchValue, onChange: handleSearch}\n  } = props;\n  const {options, onChange} = filters;\n  const {list, loading} = content;\n  const {type: bannerMessageType, action: bannerAction, oldSwitchValue} = bannerMicrolearning;\n  const [showCompleted, setShowCompleted] = useState(true);\n  const [searchValue, setSearchValue] = useState(oldSearchValue || '');\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 debounceHandleSearch = debounce(500, handleSearch);\n\n  const onSearchChange = useCallback(\n    value => {\n      console.log('TCL ------>  ~ onSearchChange ~ value:', value);\n      setSearchValue(value);\n      debounceHandleSearch(value);\n    },\n    [debounceHandleSearch]\n  );\n\n  const handleSearchReset = useCallback(\n    value => {\n      setSearchValue('');\n      debounceHandleSearch('');\n    },\n    [debounceHandleSearch]\n  );\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(filteredContent) : 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: onSearchChange\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      {!isEmpty(bannerMicrolearning) ? (\n        <div className={style.bannerWrapper}>\n          <Banner\n            type=\"info\"\n            message={\n              bannerMessageType === 'skill'\n                ? translate('banner_microlearning_rule_message_skill')\n                : translate('banner_microlearning_rule_message')\n            }\n            cta={[\n              {\n                type: 'switch',\n                label: translate('banner_microlearning_rule_label'),\n                action: bannerAction,\n                oldSwitchValue\n              }\n            ]}\n          />\n        </div>\n      ) : null}\n      <div className={style.filterWrapper}>\n        {size(options) > 2\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(filteredContent) ? (\n          <CardsGrid\n            list={filteredContent}\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  bannerMicrolearning: PropTypes.shape({\n    type: PropTypes.oneOf(['skill', 'playlist']),\n    action: PropTypes.func,\n    oldSwitchValue: PropTypes.bool\n  }),\n  search: PropTypes.shape({\n    oldValue: PropTypes.string,\n    onChange: PropTypes.func\n  })\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","bannerMicrolearning","search","oldValue","oldSearchValue","onChange","handleSearch","options","list","loading","type","bannerMessageType","action","bannerAction","oldSwitchValue","showCompleted","setShowCompleted","useState","searchValue","setSearchValue","sortView","undefined","filteredContent","useMemo","course","progress","debounceHandleSearch","value","onSearchChange","useCallback","handleSearchReset","handleShowCompletedToggle","prevShowCompleted","style","continueLearningWrapper","continueLearningTitle","continueLearningNumber","searchAndSortSection","searchWrapper","placeholder","sortSection","sortWrapper","bannerWrapper","filterWrapper","filterProps","index","name","handleFilterChange","filterButtonWrapper","divider","justifyContent","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","shape","CardsGrid","number","arrayOf","SelectOptionPropTypes","Select","oneOf"],"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, isEmpty, debounce} 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 InputSwitch from '../../atom/input-switch';\nimport Banner from '../../molecule/banner';\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 {translate} = context;\n  const {\n    content,\n    filters,\n    sorting,\n    totalContents,\n    bannerMicrolearning = {},\n    search: {oldValue: oldSearchValue, onChange: handleSearch}\n  } = props;\n  const {options, onChange} = filters;\n  const {list, loading} = content;\n  const {type: bannerMessageType, action: bannerAction, oldSwitchValue} = bannerMicrolearning;\n  const [showCompleted, setShowCompleted] = useState(true);\n  const [searchValue, setSearchValue] = useState(oldSearchValue || '');\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 debounceHandleSearch = useMemo(() => {\n    return debounce(800, value => {\n      handleSearch(value);\n    });\n  }, [handleSearch]);\n\n  const onSearchChange = useCallback(\n    value => {\n      setSearchValue(value);\n      debounceHandleSearch(value);\n    },\n    [debounceHandleSearch]\n  );\n\n  const handleSearchReset = useCallback(\n    value => {\n      setSearchValue('');\n      debounceHandleSearch('');\n    },\n    [debounceHandleSearch]\n  );\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(filteredContent) : 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: onSearchChange\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      {!isEmpty(bannerMicrolearning) ? (\n        <div className={style.bannerWrapper}>\n          <Banner\n            type=\"info\"\n            message={\n              bannerMessageType === 'skill'\n                ? translate('banner_microlearning_rule_message_skill')\n                : translate('banner_microlearning_rule_message')\n            }\n            cta={[\n              {\n                type: 'switch',\n                label: translate('banner_microlearning_rule_label'),\n                action: bannerAction,\n                oldSwitchValue\n              }\n            ]}\n          />\n        </div>\n      ) : null}\n      <div className={style.filterWrapper}>\n        {size(options) > 2\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(filteredContent) ? (\n          <CardsGrid\n            list={filteredContent}\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  bannerMicrolearning: PropTypes.shape({\n    type: PropTypes.oneOf(['skill', 'playlist']),\n    action: PropTypes.func,\n    oldSwitchValue: PropTypes.bool\n  }),\n  search: PropTypes.shape({\n    oldValue: PropTypes.string,\n    onChange: PropTypes.func\n  })\n};\n\nexport default AllCourses;\n"],"mappings":"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"}

package/package.json

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