@coorpacademy/components 11.32.52-alpha.62 → 11.32.52-alpha.64

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"all-courses.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/all-courses.js"],"names":[],"mappings":";AAgDA,mEA+JC"}
1
+ {"version":3,"file":"all-courses.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/all-courses.js"],"names":[],"mappings":";AAgDA,mEA8JC"}
@@ -103,12 +103,11 @@ const AllCourses = (props, context) => {
103
103
  return showCompleted ? list : _filter(course => course.progress < 1, list);
104
104
  }, [list, showCompleted]);
105
105
  const debounceHandleSearch = useMemo(() => {
106
- return _debounce(500, value => {
106
+ return _debounce(800, value => {
107
107
  handleSearch(value);
108
108
  });
109
109
  }, [handleSearch]);
110
110
  const onSearchChange = useCallback(value => {
111
- console.log('TCL ------> ~ onSearchChange ~ value:', value);
112
111
  setSearchValue(value);
113
112
  debounceHandleSearch(value);
114
113
  }, [debounceHandleSearch]);
@@ -1 +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","value","onSearchChange","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 = useMemo(() => {\n return debounce(500, value => {\n handleSearch(value);\n });\n }, [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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"}
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","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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"}
@@ -123,6 +123,10 @@ declare namespace SkillDetail {
123
123
  export const onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
124
124
  export const onReviewClick: PropTypes.Requireable<(...args: any[]) => any>;
125
125
  export const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
126
+ export const search: PropTypes.Requireable<PropTypes.InferProps<{
127
+ oldValue: PropTypes.Requireable<string>;
128
+ onChange: PropTypes.Requireable<(...args: any[]) => any>;
129
+ }>>;
126
130
  export namespace bannerMicrolearning {
127
131
  const action: PropTypes.Requireable<(...args: any[]) => any>;
128
132
  const oldSwitchValue: PropTypes.Requireable<boolean>;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":"AAeO,8EA+BN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD,oEA8JC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":"AAeO,8EA+BN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD,oEAgKC"}
@@ -70,6 +70,7 @@ const SkillDetail = (props, context) => {
70
70
  onBackClick,
71
71
  onReviewClick,
72
72
  onContinueLearningClick,
73
+ search,
73
74
  bannerMicrolearning = {}
74
75
  } = props;
75
76
  const descriptionRef = useRef(null);
@@ -185,7 +186,8 @@ const SkillDetail = (props, context) => {
185
186
  type: 'skill',
186
187
  action: bannerMicrolearningAction,
187
188
  oldSwitchValue
188
- } : {}
189
+ } : {},
190
+ search: search
189
191
  })));
190
192
  };
191
193
 
@@ -214,6 +216,10 @@ SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
214
216
  onBackClick: PropTypes.func,
215
217
  onReviewClick: PropTypes.func,
216
218
  onContinueLearningClick: PropTypes.func,
219
+ search: PropTypes.shape({
220
+ oldValue: PropTypes.string,
221
+ onChange: PropTypes.func
222
+ }),
217
223
  bannerMicrolearning: {
218
224
  action: PropTypes.func,
219
225
  oldSwitchValue: PropTypes.bool
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","useCallback","useState","useRef","useEffect","PropTypes","convert","classnames","Markdown","Provider","Select","SelectOptionPropTypes","ButtonLink","ButtonLinkIcon","Icon","CardsGrid","style","AllCourses","ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","width","borderRadius","backgroundColor","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","bool","func","SkillDetail","title","skillRef","description","metrics","focused","availableForReview","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","bannerMicrolearning","descriptionRef","score","questionsToReview","totalContents","action","bannerMicrolearningAction","oldSwitchValue","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButton","ctaContainer","skillFocusBadge","faSize","wrapperSize","showMoreWrapper","ctaWrapper","skillInformation","skillInformationNumber","progressContainer","progressInformationNumber","toFixed","type","string","isRequired","shape","number","onChange","options","arrayOf"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState, useRef, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\n\nexport const ContinueLearningButton = (props, context) => {\n const {ongoingCoursesAvailable, onClick} = props;\n const {skin, translate} = context;\n const primarySkinColor = get('common.primary', skin);\n\n return (\n <div>\n <ButtonLink\n label={\n ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')\n }\n type=\"primary\"\n customStyle={{\n width: 'fit-content',\n borderRadius: '12px',\n backgroundColor: primarySkinColor\n }}\n hoverBackgroundColor={convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)}\n hoverColor=\"#FFFFFF\"\n icon={{\n position: 'left',\n faIcon: {\n name: 'play',\n color: '#FFFFFF',\n size: 16\n }\n }}\n onClick={onClick}\n />\n </div>\n );\n};\n\nContinueLearningButton.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nContinueLearningButton.propTypes = {\n ongoingCoursesAvailable: PropTypes.bool,\n onClick: PropTypes.func\n};\n\nconst SkillDetail = (props, context) => {\n const {\n title,\n skillRef,\n description,\n metrics = {},\n focused,\n availableForReview,\n ongoingCoursesAvailable,\n skillIncludedCourses,\n filters,\n sorting,\n onBackClick,\n onReviewClick,\n onContinueLearningClick,\n bannerMicrolearning = {}\n } = props;\n const descriptionRef = useRef(null);\n const {score = 0, questionsToReview, totalContents} = metrics;\n const {translate} = context;\n const {action: bannerMicrolearningAction, oldSwitchValue} = bannerMicrolearning;\n\n const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);\n const [showMore, setShowMore] = useState(false);\n\n const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n useEffect(() => {\n if (descriptionRef.current) {\n const {clientHeight = 0, scrollHeight = 0} = descriptionRef.current;\n setIsDescriptionTruncated(scrollHeight > clientHeight);\n }\n }, [description]);\n\n const Description = useCallback(() => {\n return (\n <div\n ref={descriptionRef}\n className={classnames(style.description, !showMore && style.truncate)}\n >\n <Markdown>{description}</Markdown>\n </div>\n );\n }, [showMore, description]);\n\n const ProgressBar = useCallback(() => {\n if (score === undefined) return null;\n const progressBarColor = '#3EC483';\n const inlineProgressValueStyle = {\n backgroundColor: progressBarColor,\n width: `${score}%`\n };\n\n return (\n <div className={style.progressBarWrapper}>\n <div\n data-name=\"progress\"\n className={style.progress}\n style={inlineProgressValueStyle}\n role=\"progressbar\"\n />\n </div>\n );\n }, [score]);\n\n return (\n <div className={style.backgroundContainer}>\n <div className={style.container} data-name={skillRef}>\n {!isNil(onBackClick) ? (\n <ButtonLinkIcon\n faIcon=\"arrow-left\"\n data-name=\"back-button\"\n aria-label={translate('back')}\n onClick={onBackClick}\n className={style.backButton}\n tooltipPlacement=\"right\"\n />\n ) : null}\n <div className={style.ctaContainer}>\n <div>\n {focused ? (\n <div className={style.skillFocusBadge}>\n <Icon\n iconName=\"bullseye-arrow\"\n backgroundColor=\"#DDD1FF\"\n size={{\n faSize: 10,\n wrapperSize: 16\n }}\n />\n {translate('skill_focus')}\n </div>\n ) : null}\n <div className={style.title}>{title}</div>\n {description ? (\n <>\n <Description />\n {isDescriptionTruncated ? (\n <div className={style.showMoreWrapper} onClick={handleShowMore}>\n {showMore ? translate('Show less') : translate('Show more')}\n <Icon\n iconName={showMore ? 'chevron-up' : 'chevron-down'}\n size={{\n faSize: 14,\n wrapperSize: 16\n }}\n />\n </div>\n ) : null}\n </>\n ) : null}\n </div>\n\n <div className={style.ctaWrapper}>\n <ButtonLink\n type=\"secondary\"\n onClick={onReviewClick}\n label={translate('review_this_skill')}\n disabled={!availableForReview}\n customStyle={{\n width: 'fit-content',\n borderRadius: '12px'\n }}\n />\n <ContinueLearningButton\n ongoingCoursesAvailable={ongoingCoursesAvailable}\n onClick={onContinueLearningClick}\n />\n </div>\n </div>\n {questionsToReview > 0 ? (\n <div className={style.skillInformation} data-name=\"skill-questions\">\n <span className={style.skillInformationNumber}>{questionsToReview}</span>\n &nbsp;{translate('skill_chart_side_panel_questions_to_review')}\n </div>\n ) : null}\n <div className={style.progressContainer}>\n <ProgressBar />\n <span className={style.progressInformationNumber}>{score.toFixed(1)}%</span>\n </div>\n <AllCourses\n content={skillIncludedCourses}\n filters={filters}\n sorting={sorting}\n totalContents={totalContents}\n bannerMicrolearning={\n bannerMicrolearningAction\n ? {\n type: 'skill',\n action: bannerMicrolearningAction,\n oldSwitchValue\n }\n : {}\n }\n />\n </div>\n </div>\n );\n};\n\nSkillDetail.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nSkillDetail.propTypes = {\n title: PropTypes.string.isRequired,\n skillRef: PropTypes.string.isRequired,\n description: PropTypes.string,\n metrics: PropTypes.shape({\n score: PropTypes.number,\n questionsToReview: PropTypes.number,\n totalContents: PropTypes.number\n }),\n focused: PropTypes.bool,\n availableForReview: PropTypes.bool,\n ongoingCoursesAvailable: PropTypes.bool,\n skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n filters: PropTypes.shape({\n onChange: PropTypes.func,\n options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n }),\n sorting: PropTypes.shape(Select.propTypes),\n onBackClick: PropTypes.func,\n onReviewClick: PropTypes.func,\n onContinueLearningClick: PropTypes.func,\n bannerMicrolearning: {\n action: PropTypes.func,\n oldSwitchValue: PropTypes.bool\n }\n};\n\nexport default SkillDetail;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["React","useCallback","useState","useRef","useEffect","PropTypes","convert","classnames","Markdown","Provider","Select","SelectOptionPropTypes","ButtonLink","ButtonLinkIcon","Icon","CardsGrid","style","AllCourses","ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","width","borderRadius","backgroundColor","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","bool","func","SkillDetail","title","skillRef","description","metrics","focused","availableForReview","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","search","bannerMicrolearning","descriptionRef","score","questionsToReview","totalContents","action","bannerMicrolearningAction","oldSwitchValue","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButton","ctaContainer","skillFocusBadge","faSize","wrapperSize","showMoreWrapper","ctaWrapper","skillInformation","skillInformationNumber","progressContainer","progressInformationNumber","toFixed","type","string","isRequired","shape","number","onChange","options","arrayOf","oldValue"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState, useRef, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\n\nexport const ContinueLearningButton = (props, context) => {\n const {ongoingCoursesAvailable, onClick} = props;\n const {skin, translate} = context;\n const primarySkinColor = get('common.primary', skin);\n\n return (\n <div>\n <ButtonLink\n label={\n ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')\n }\n type=\"primary\"\n customStyle={{\n width: 'fit-content',\n borderRadius: '12px',\n backgroundColor: primarySkinColor\n }}\n hoverBackgroundColor={convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)}\n hoverColor=\"#FFFFFF\"\n icon={{\n position: 'left',\n faIcon: {\n name: 'play',\n color: '#FFFFFF',\n size: 16\n }\n }}\n onClick={onClick}\n />\n </div>\n );\n};\n\nContinueLearningButton.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nContinueLearningButton.propTypes = {\n ongoingCoursesAvailable: PropTypes.bool,\n onClick: PropTypes.func\n};\n\nconst SkillDetail = (props, context) => {\n const {\n title,\n skillRef,\n description,\n metrics = {},\n focused,\n availableForReview,\n ongoingCoursesAvailable,\n skillIncludedCourses,\n filters,\n sorting,\n onBackClick,\n onReviewClick,\n onContinueLearningClick,\n search,\n bannerMicrolearning = {}\n } = props;\n const descriptionRef = useRef(null);\n const {score = 0, questionsToReview, totalContents} = metrics;\n const {translate} = context;\n const {action: bannerMicrolearningAction, oldSwitchValue} = bannerMicrolearning;\n\n const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);\n const [showMore, setShowMore] = useState(false);\n\n const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n useEffect(() => {\n if (descriptionRef.current) {\n const {clientHeight = 0, scrollHeight = 0} = descriptionRef.current;\n setIsDescriptionTruncated(scrollHeight > clientHeight);\n }\n }, [description]);\n\n const Description = useCallback(() => {\n return (\n <div\n ref={descriptionRef}\n className={classnames(style.description, !showMore && style.truncate)}\n >\n <Markdown>{description}</Markdown>\n </div>\n );\n }, [showMore, description]);\n\n const ProgressBar = useCallback(() => {\n if (score === undefined) return null;\n const progressBarColor = '#3EC483';\n const inlineProgressValueStyle = {\n backgroundColor: progressBarColor,\n width: `${score}%`\n };\n\n return (\n <div className={style.progressBarWrapper}>\n <div\n data-name=\"progress\"\n className={style.progress}\n style={inlineProgressValueStyle}\n role=\"progressbar\"\n />\n </div>\n );\n }, [score]);\n\n return (\n <div className={style.backgroundContainer}>\n <div className={style.container} data-name={skillRef}>\n {!isNil(onBackClick) ? (\n <ButtonLinkIcon\n faIcon=\"arrow-left\"\n data-name=\"back-button\"\n aria-label={translate('back')}\n onClick={onBackClick}\n className={style.backButton}\n tooltipPlacement=\"right\"\n />\n ) : null}\n <div className={style.ctaContainer}>\n <div>\n {focused ? (\n <div className={style.skillFocusBadge}>\n <Icon\n iconName=\"bullseye-arrow\"\n backgroundColor=\"#DDD1FF\"\n size={{\n faSize: 10,\n wrapperSize: 16\n }}\n />\n {translate('skill_focus')}\n </div>\n ) : null}\n <div className={style.title}>{title}</div>\n {description ? (\n <>\n <Description />\n {isDescriptionTruncated ? (\n <div className={style.showMoreWrapper} onClick={handleShowMore}>\n {showMore ? translate('Show less') : translate('Show more')}\n <Icon\n iconName={showMore ? 'chevron-up' : 'chevron-down'}\n size={{\n faSize: 14,\n wrapperSize: 16\n }}\n />\n </div>\n ) : null}\n </>\n ) : null}\n </div>\n\n <div className={style.ctaWrapper}>\n <ButtonLink\n type=\"secondary\"\n onClick={onReviewClick}\n label={translate('review_this_skill')}\n disabled={!availableForReview}\n customStyle={{\n width: 'fit-content',\n borderRadius: '12px'\n }}\n />\n <ContinueLearningButton\n ongoingCoursesAvailable={ongoingCoursesAvailable}\n onClick={onContinueLearningClick}\n />\n </div>\n </div>\n {questionsToReview > 0 ? (\n <div className={style.skillInformation} data-name=\"skill-questions\">\n <span className={style.skillInformationNumber}>{questionsToReview}</span>\n &nbsp;{translate('skill_chart_side_panel_questions_to_review')}\n </div>\n ) : null}\n <div className={style.progressContainer}>\n <ProgressBar />\n <span className={style.progressInformationNumber}>{score.toFixed(1)}%</span>\n </div>\n <AllCourses\n content={skillIncludedCourses}\n filters={filters}\n sorting={sorting}\n totalContents={totalContents}\n bannerMicrolearning={\n bannerMicrolearningAction\n ? {\n type: 'skill',\n action: bannerMicrolearningAction,\n oldSwitchValue\n }\n : {}\n }\n search={search}\n />\n </div>\n </div>\n );\n};\n\nSkillDetail.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nSkillDetail.propTypes = {\n title: PropTypes.string.isRequired,\n skillRef: PropTypes.string.isRequired,\n description: PropTypes.string,\n metrics: PropTypes.shape({\n score: PropTypes.number,\n questionsToReview: PropTypes.number,\n totalContents: PropTypes.number\n }),\n focused: PropTypes.bool,\n availableForReview: PropTypes.bool,\n ongoingCoursesAvailable: PropTypes.bool,\n skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n filters: PropTypes.shape({\n onChange: PropTypes.func,\n options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n }),\n sorting: PropTypes.shape(Select.propTypes),\n onBackClick: PropTypes.func,\n onReviewClick: PropTypes.func,\n onContinueLearningClick: PropTypes.func,\n search: PropTypes.shape({\n oldValue: PropTypes.string,\n onChange: PropTypes.func\n }),\n bannerMicrolearning: {\n action: PropTypes.func,\n oldSwitchValue: PropTypes.bool\n }\n};\n\nexport default SkillDetail;\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"all-courses.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/all-courses.js"],"names":[],"mappings":";AAgDA,mEA+JC"}
1
+ {"version":3,"file":"all-courses.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/all-courses.js"],"names":[],"mappings":";AAgDA,mEA8JC"}
@@ -127,12 +127,11 @@ const AllCourses = (props, context) => {
127
127
  return showCompleted ? list : (0, _filter2.default)(course => course.progress < 1, list);
128
128
  }, [list, showCompleted]);
129
129
  const debounceHandleSearch = (0, _react.useMemo)(() => {
130
- return (0, _debounce2.default)(500, value => {
130
+ return (0, _debounce2.default)(800, value => {
131
131
  handleSearch(value);
132
132
  });
133
133
  }, [handleSearch]);
134
134
  const onSearchChange = (0, _react.useCallback)(value => {
135
- console.log('TCL ------> ~ onSearchChange ~ value:', value);
136
135
  setSearchValue(value);
137
136
  debounceHandleSearch(value);
138
137
  }, [debounceHandleSearch]);
@@ -1 +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","value","onSearchChange","useCallback","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 = useMemo(() => {\n return debounce(500, value => {\n handleSearch(value);\n });\n }, [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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"}
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","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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"}
@@ -123,6 +123,10 @@ declare namespace SkillDetail {
123
123
  export const onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
124
124
  export const onReviewClick: PropTypes.Requireable<(...args: any[]) => any>;
125
125
  export const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
126
+ export const search: PropTypes.Requireable<PropTypes.InferProps<{
127
+ oldValue: PropTypes.Requireable<string>;
128
+ onChange: PropTypes.Requireable<(...args: any[]) => any>;
129
+ }>>;
126
130
  export namespace bannerMicrolearning {
127
131
  const action: PropTypes.Requireable<(...args: any[]) => any>;
128
132
  const oldSwitchValue: PropTypes.Requireable<boolean>;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":"AAeO,8EA+BN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD,oEA8JC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":"AAeO,8EA+BN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD,oEAgKC"}
@@ -96,6 +96,7 @@ const SkillDetail = (props, context) => {
96
96
  onBackClick,
97
97
  onReviewClick,
98
98
  onContinueLearningClick,
99
+ search,
99
100
  bannerMicrolearning = {}
100
101
  } = props;
101
102
  const descriptionRef = (0, _react.useRef)(null);
@@ -211,7 +212,8 @@ const SkillDetail = (props, context) => {
211
212
  type: 'skill',
212
213
  action: bannerMicrolearningAction,
213
214
  oldSwitchValue
214
- } : {}
215
+ } : {},
216
+ search: search
215
217
  })));
216
218
  };
217
219
 
@@ -240,6 +242,10 @@ SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
240
242
  onBackClick: _propTypes.default.func,
241
243
  onReviewClick: _propTypes.default.func,
242
244
  onContinueLearningClick: _propTypes.default.func,
245
+ search: _propTypes.default.shape({
246
+ oldValue: _propTypes.default.string,
247
+ onChange: _propTypes.default.func
248
+ }),
243
249
  bannerMicrolearning: {
244
250
  action: _propTypes.default.func,
245
251
  oldSwitchValue: _propTypes.default.bool
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","width","borderRadius","backgroundColor","convert","position","faIcon","name","color","size","contextTypes","Provider","childContextTypes","propTypes","PropTypes","bool","func","SkillDetail","title","skillRef","description","metrics","focused","availableForReview","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","bannerMicrolearning","descriptionRef","useRef","score","questionsToReview","totalContents","action","bannerMicrolearningAction","oldSwitchValue","isDescriptionTruncated","setIsDescriptionTruncated","useState","showMore","setShowMore","handleShowMore","useCallback","useEffect","current","clientHeight","scrollHeight","Description","classnames","style","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButton","ctaContainer","skillFocusBadge","faSize","wrapperSize","showMoreWrapper","ctaWrapper","skillInformation","skillInformationNumber","progressContainer","progressInformationNumber","toFixed","type","string","isRequired","shape","number","CardsGrid","onChange","options","arrayOf","SelectOptionPropTypes","Select"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState, useRef, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\n\nexport const ContinueLearningButton = (props, context) => {\n const {ongoingCoursesAvailable, onClick} = props;\n const {skin, translate} = context;\n const primarySkinColor = get('common.primary', skin);\n\n return (\n <div>\n <ButtonLink\n label={\n ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')\n }\n type=\"primary\"\n customStyle={{\n width: 'fit-content',\n borderRadius: '12px',\n backgroundColor: primarySkinColor\n }}\n hoverBackgroundColor={convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)}\n hoverColor=\"#FFFFFF\"\n icon={{\n position: 'left',\n faIcon: {\n name: 'play',\n color: '#FFFFFF',\n size: 16\n }\n }}\n onClick={onClick}\n />\n </div>\n );\n};\n\nContinueLearningButton.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nContinueLearningButton.propTypes = {\n ongoingCoursesAvailable: PropTypes.bool,\n onClick: PropTypes.func\n};\n\nconst SkillDetail = (props, context) => {\n const {\n title,\n skillRef,\n description,\n metrics = {},\n focused,\n availableForReview,\n ongoingCoursesAvailable,\n skillIncludedCourses,\n filters,\n sorting,\n onBackClick,\n onReviewClick,\n onContinueLearningClick,\n bannerMicrolearning = {}\n } = props;\n const descriptionRef = useRef(null);\n const {score = 0, questionsToReview, totalContents} = metrics;\n const {translate} = context;\n const {action: bannerMicrolearningAction, oldSwitchValue} = bannerMicrolearning;\n\n const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);\n const [showMore, setShowMore] = useState(false);\n\n const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n useEffect(() => {\n if (descriptionRef.current) {\n const {clientHeight = 0, scrollHeight = 0} = descriptionRef.current;\n setIsDescriptionTruncated(scrollHeight > clientHeight);\n }\n }, [description]);\n\n const Description = useCallback(() => {\n return (\n <div\n ref={descriptionRef}\n className={classnames(style.description, !showMore && style.truncate)}\n >\n <Markdown>{description}</Markdown>\n </div>\n );\n }, [showMore, description]);\n\n const ProgressBar = useCallback(() => {\n if (score === undefined) return null;\n const progressBarColor = '#3EC483';\n const inlineProgressValueStyle = {\n backgroundColor: progressBarColor,\n width: `${score}%`\n };\n\n return (\n <div className={style.progressBarWrapper}>\n <div\n data-name=\"progress\"\n className={style.progress}\n style={inlineProgressValueStyle}\n role=\"progressbar\"\n />\n </div>\n );\n }, [score]);\n\n return (\n <div className={style.backgroundContainer}>\n <div className={style.container} data-name={skillRef}>\n {!isNil(onBackClick) ? (\n <ButtonLinkIcon\n faIcon=\"arrow-left\"\n data-name=\"back-button\"\n aria-label={translate('back')}\n onClick={onBackClick}\n className={style.backButton}\n tooltipPlacement=\"right\"\n />\n ) : null}\n <div className={style.ctaContainer}>\n <div>\n {focused ? (\n <div className={style.skillFocusBadge}>\n <Icon\n iconName=\"bullseye-arrow\"\n backgroundColor=\"#DDD1FF\"\n size={{\n faSize: 10,\n wrapperSize: 16\n }}\n />\n {translate('skill_focus')}\n </div>\n ) : null}\n <div className={style.title}>{title}</div>\n {description ? (\n <>\n <Description />\n {isDescriptionTruncated ? (\n <div className={style.showMoreWrapper} onClick={handleShowMore}>\n {showMore ? translate('Show less') : translate('Show more')}\n <Icon\n iconName={showMore ? 'chevron-up' : 'chevron-down'}\n size={{\n faSize: 14,\n wrapperSize: 16\n }}\n />\n </div>\n ) : null}\n </>\n ) : null}\n </div>\n\n <div className={style.ctaWrapper}>\n <ButtonLink\n type=\"secondary\"\n onClick={onReviewClick}\n label={translate('review_this_skill')}\n disabled={!availableForReview}\n customStyle={{\n width: 'fit-content',\n borderRadius: '12px'\n }}\n />\n <ContinueLearningButton\n ongoingCoursesAvailable={ongoingCoursesAvailable}\n onClick={onContinueLearningClick}\n />\n </div>\n </div>\n {questionsToReview > 0 ? (\n <div className={style.skillInformation} data-name=\"skill-questions\">\n <span className={style.skillInformationNumber}>{questionsToReview}</span>\n &nbsp;{translate('skill_chart_side_panel_questions_to_review')}\n </div>\n ) : null}\n <div className={style.progressContainer}>\n <ProgressBar />\n <span className={style.progressInformationNumber}>{score.toFixed(1)}%</span>\n </div>\n <AllCourses\n content={skillIncludedCourses}\n filters={filters}\n sorting={sorting}\n totalContents={totalContents}\n bannerMicrolearning={\n bannerMicrolearningAction\n ? {\n type: 'skill',\n action: bannerMicrolearningAction,\n oldSwitchValue\n }\n : {}\n }\n />\n </div>\n </div>\n );\n};\n\nSkillDetail.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nSkillDetail.propTypes = {\n title: PropTypes.string.isRequired,\n skillRef: PropTypes.string.isRequired,\n description: PropTypes.string,\n metrics: PropTypes.shape({\n score: PropTypes.number,\n questionsToReview: PropTypes.number,\n totalContents: PropTypes.number\n }),\n focused: PropTypes.bool,\n availableForReview: PropTypes.bool,\n ongoingCoursesAvailable: PropTypes.bool,\n skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n filters: PropTypes.shape({\n onChange: PropTypes.func,\n options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n }),\n sorting: PropTypes.shape(Select.propTypes),\n onBackClick: PropTypes.func,\n onReviewClick: PropTypes.func,\n onContinueLearningClick: PropTypes.func,\n bannerMicrolearning: {\n action: PropTypes.func,\n oldSwitchValue: PropTypes.bool\n }\n};\n\nexport default SkillDetail;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","width","borderRadius","backgroundColor","convert","position","faIcon","name","color","size","contextTypes","Provider","childContextTypes","propTypes","PropTypes","bool","func","SkillDetail","title","skillRef","description","metrics","focused","availableForReview","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","search","bannerMicrolearning","descriptionRef","useRef","score","questionsToReview","totalContents","action","bannerMicrolearningAction","oldSwitchValue","isDescriptionTruncated","setIsDescriptionTruncated","useState","showMore","setShowMore","handleShowMore","useCallback","useEffect","current","clientHeight","scrollHeight","Description","classnames","style","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButton","ctaContainer","skillFocusBadge","faSize","wrapperSize","showMoreWrapper","ctaWrapper","skillInformation","skillInformationNumber","progressContainer","progressInformationNumber","toFixed","type","string","isRequired","shape","number","CardsGrid","onChange","options","arrayOf","SelectOptionPropTypes","Select","oldValue"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState, useRef, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\n\nexport const ContinueLearningButton = (props, context) => {\n const {ongoingCoursesAvailable, onClick} = props;\n const {skin, translate} = context;\n const primarySkinColor = get('common.primary', skin);\n\n return (\n <div>\n <ButtonLink\n label={\n ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')\n }\n type=\"primary\"\n customStyle={{\n width: 'fit-content',\n borderRadius: '12px',\n backgroundColor: primarySkinColor\n }}\n hoverBackgroundColor={convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)}\n hoverColor=\"#FFFFFF\"\n icon={{\n position: 'left',\n faIcon: {\n name: 'play',\n color: '#FFFFFF',\n size: 16\n }\n }}\n onClick={onClick}\n />\n </div>\n );\n};\n\nContinueLearningButton.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nContinueLearningButton.propTypes = {\n ongoingCoursesAvailable: PropTypes.bool,\n onClick: PropTypes.func\n};\n\nconst SkillDetail = (props, context) => {\n const {\n title,\n skillRef,\n description,\n metrics = {},\n focused,\n availableForReview,\n ongoingCoursesAvailable,\n skillIncludedCourses,\n filters,\n sorting,\n onBackClick,\n onReviewClick,\n onContinueLearningClick,\n search,\n bannerMicrolearning = {}\n } = props;\n const descriptionRef = useRef(null);\n const {score = 0, questionsToReview, totalContents} = metrics;\n const {translate} = context;\n const {action: bannerMicrolearningAction, oldSwitchValue} = bannerMicrolearning;\n\n const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);\n const [showMore, setShowMore] = useState(false);\n\n const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n useEffect(() => {\n if (descriptionRef.current) {\n const {clientHeight = 0, scrollHeight = 0} = descriptionRef.current;\n setIsDescriptionTruncated(scrollHeight > clientHeight);\n }\n }, [description]);\n\n const Description = useCallback(() => {\n return (\n <div\n ref={descriptionRef}\n className={classnames(style.description, !showMore && style.truncate)}\n >\n <Markdown>{description}</Markdown>\n </div>\n );\n }, [showMore, description]);\n\n const ProgressBar = useCallback(() => {\n if (score === undefined) return null;\n const progressBarColor = '#3EC483';\n const inlineProgressValueStyle = {\n backgroundColor: progressBarColor,\n width: `${score}%`\n };\n\n return (\n <div className={style.progressBarWrapper}>\n <div\n data-name=\"progress\"\n className={style.progress}\n style={inlineProgressValueStyle}\n role=\"progressbar\"\n />\n </div>\n );\n }, [score]);\n\n return (\n <div className={style.backgroundContainer}>\n <div className={style.container} data-name={skillRef}>\n {!isNil(onBackClick) ? (\n <ButtonLinkIcon\n faIcon=\"arrow-left\"\n data-name=\"back-button\"\n aria-label={translate('back')}\n onClick={onBackClick}\n className={style.backButton}\n tooltipPlacement=\"right\"\n />\n ) : null}\n <div className={style.ctaContainer}>\n <div>\n {focused ? (\n <div className={style.skillFocusBadge}>\n <Icon\n iconName=\"bullseye-arrow\"\n backgroundColor=\"#DDD1FF\"\n size={{\n faSize: 10,\n wrapperSize: 16\n }}\n />\n {translate('skill_focus')}\n </div>\n ) : null}\n <div className={style.title}>{title}</div>\n {description ? (\n <>\n <Description />\n {isDescriptionTruncated ? (\n <div className={style.showMoreWrapper} onClick={handleShowMore}>\n {showMore ? translate('Show less') : translate('Show more')}\n <Icon\n iconName={showMore ? 'chevron-up' : 'chevron-down'}\n size={{\n faSize: 14,\n wrapperSize: 16\n }}\n />\n </div>\n ) : null}\n </>\n ) : null}\n </div>\n\n <div className={style.ctaWrapper}>\n <ButtonLink\n type=\"secondary\"\n onClick={onReviewClick}\n label={translate('review_this_skill')}\n disabled={!availableForReview}\n customStyle={{\n width: 'fit-content',\n borderRadius: '12px'\n }}\n />\n <ContinueLearningButton\n ongoingCoursesAvailable={ongoingCoursesAvailable}\n onClick={onContinueLearningClick}\n />\n </div>\n </div>\n {questionsToReview > 0 ? (\n <div className={style.skillInformation} data-name=\"skill-questions\">\n <span className={style.skillInformationNumber}>{questionsToReview}</span>\n &nbsp;{translate('skill_chart_side_panel_questions_to_review')}\n </div>\n ) : null}\n <div className={style.progressContainer}>\n <ProgressBar />\n <span className={style.progressInformationNumber}>{score.toFixed(1)}%</span>\n </div>\n <AllCourses\n content={skillIncludedCourses}\n filters={filters}\n sorting={sorting}\n totalContents={totalContents}\n bannerMicrolearning={\n bannerMicrolearningAction\n ? {\n type: 'skill',\n action: bannerMicrolearningAction,\n oldSwitchValue\n }\n : {}\n }\n search={search}\n />\n </div>\n </div>\n );\n};\n\nSkillDetail.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nSkillDetail.propTypes = {\n title: PropTypes.string.isRequired,\n skillRef: PropTypes.string.isRequired,\n description: PropTypes.string,\n metrics: PropTypes.shape({\n score: PropTypes.number,\n questionsToReview: PropTypes.number,\n totalContents: PropTypes.number\n }),\n focused: PropTypes.bool,\n availableForReview: PropTypes.bool,\n ongoingCoursesAvailable: PropTypes.bool,\n skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n filters: PropTypes.shape({\n onChange: PropTypes.func,\n options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n }),\n sorting: PropTypes.shape(Select.propTypes),\n onBackClick: PropTypes.func,\n onReviewClick: PropTypes.func,\n onContinueLearningClick: PropTypes.func,\n search: PropTypes.shape({\n oldValue: PropTypes.string,\n onChange: PropTypes.func\n }),\n bannerMicrolearning: {\n action: PropTypes.func,\n oldSwitchValue: PropTypes.bool\n }\n};\n\nexport default SkillDetail;\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coorpacademy/components",
3
- "version": "11.32.52-alpha.62+fe2cc01fe",
3
+ "version": "11.32.52-alpha.64+9342a48c1",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
@@ -178,5 +178,5 @@
178
178
  "last 2 versions",
179
179
  "IE 11"
180
180
  ],
181
- "gitHead": "fe2cc01fe0ddc1bfc03dbe1a47a3d75b2050a83f"
181
+ "gitHead": "9342a48c1b3f3e0628c8e6b0daa55cf56ff9aee9"
182
182
  }