@coorpacademy/components 11.32.12-alpha.4 → 11.32.12-alpha.5

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

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

@@ -116,6 +116,7 @@ const AllCourses = (props, context) => {
   })), /*#__PURE__*/React.createElement("div", {
     className: style.sortSection
   }, /*#__PURE__*/React.createElement(InputSwitch, {
+    id: 'show-completed-courses-switch',
     type: "switch",
     name: translate('show_completed'),
     title: translate('show_completed'),

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

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

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

@@ -27,6 +27,7 @@ declare namespace SkillDetail {
     }
     namespace propTypes {
         const title: PropTypes.Validator<string>;
+        const ref: PropTypes.Validator<string>;
         const description: PropTypes.Requireable<string>;
         const metrics: PropTypes.Requireable<PropTypes.InferProps<{
             score: PropTypes.Requireable<number>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":";AA2DA,oEAuJC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":";AA4DA,oEAwJC"}

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

@@ -15,6 +15,7 @@ import ContinueLearning from './continue-learning';
 const ContinueLearningButton = (props, context) => {
   const [hovered, setHovered] = useState(false);
   const {
+    ongoingCoursesAvailable,
     onClick
   } = props;
   const {
@@ -30,7 +31,7 @@ const ContinueLearningButton = (props, context) => {
     onMouseOver: handleMouseOver,
     onMouseLeave: handleMouseLeave
   }, /*#__PURE__*/React.createElement(ButtonLink, {
-    label: translate('continue_learning'),
+    label: ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning'),
     type: "primary",
     customStyle: {
       width: 'fit-content',
@@ -54,14 +55,16 @@ ContinueLearningButton.contextTypes = {
   translate: Provider.childContextTypes.translate
 };
 ContinueLearningButton.propTypes = process.env.NODE_ENV !== "production" ? {
+  ongoingCoursesAvailable: PropTypes.bool,
   onClick: PropTypes.func
 } : {};
 
 const SkillDetail = (props, context) => {
   const {
     title,
+    ref,
     description,
-    metrics,
+    metrics = {},
     focused,
     availableForReview,
     ongoingCourses,
@@ -107,7 +110,8 @@ const SkillDetail = (props, context) => {
   return /*#__PURE__*/React.createElement("div", {
     className: style.backgroundContainer
   }, /*#__PURE__*/React.createElement("div", {
-    className: style.container
+    className: style.container,
+    "data-name": ref
   }, /*#__PURE__*/React.createElement("div", {
     className: style.backButtonWrapper,
     onClick: onBackClick
@@ -151,8 +155,9 @@ const SkillDetail = (props, context) => {
       borderRadius: '12px'
     }
   }), /*#__PURE__*/React.createElement(ContinueLearningButton, {
+    ongoingCoursesAvailable: !!ongoingCourses.list.length,
     onClick: onContinueLearningClick
-  }))), /*#__PURE__*/React.createElement("div", {
+  }))), score !== undefined ? /*#__PURE__*/React.createElement("div", {
     className: style.progressInformationsWrapper
   }, /*#__PURE__*/React.createElement("div", {
     className: style.progressTitle
@@ -180,7 +185,7 @@ const SkillDetail = (props, context) => {
     "data-name": "completed-percentage"
   }, /*#__PURE__*/React.createElement("span", {
     className: style.progressInformationNumber
-  }, score, "%"))))), /*#__PURE__*/React.createElement(ContinueLearning, {
+  }, score, "%"))))) : null, /*#__PURE__*/React.createElement(ContinueLearning, {
     ongoingCourses: ongoingCourses
   }), /*#__PURE__*/React.createElement(AllCourses, {
     skillIncludedCourses: skillIncludedCourses,
@@ -195,6 +200,7 @@ SkillDetail.contextTypes = {
 };
 SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   title: PropTypes.string.isRequired,
+  ref: PropTypes.string.isRequired,
   description: PropTypes.string,
   metrics: PropTypes.shape({
     score: PropTypes.number,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","convert","classnames","Provider","Select","SelectOptionPropTypes","ButtonLink","Icon","CardsGrid","style","AllCourses","ContinueLearning","ContinueLearningButton","props","context","hovered","setHovered","onClick","skin","translate","primarySkinColor","handleMouseOver","handleMouseLeave","width","borderRadius","backgroundColor","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","func","SkillDetail","title","description","metrics","focused","availableForReview","ongoingCourses","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","score","content","questionsToReview","contentCompleted","showMore","setShowMore","handleShowMore","Description","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButtonWrapper","faSize","wrapperSize","ctaContainer","skillFocusBadge","length","showMoreWrapper","ctaWrapper","progressInformationsWrapper","progressTitle","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","progressInformations","progressInformation","progressInformationNumber","string","isRequired","shape","number","bool","onChange","options","arrayOf"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\nimport ContinueLearning from './continue-learning';\n\nconst ContinueLearningButton = (props, context) => {\n  const [hovered, setHovered] = useState(false);\n  const {onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  return (\n    <div onMouseOver={handleMouseOver} onMouseLeave={handleMouseLeave}>\n      <ButtonLink\n        label={translate('continue_learning')}\n        type=\"primary\"\n        customStyle={{\n          width: 'fit-content',\n          borderRadius: '12px',\n          backgroundColor: hovered\n            ? convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)\n            : primarySkinColor\n        }}\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  onClick: PropTypes.func\n};\n\nconst SkillDetail = (props, context) => {\n  const {\n    title,\n    description,\n    metrics,\n    focused,\n    availableForReview,\n    ongoingCourses,\n    skillIncludedCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick\n  } = props;\n  const {score, content, questionsToReview, contentCompleted = 0} = metrics;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        {description}\n      </div>\n    );\n  });\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}>\n        <div className={style.backButtonWrapper} onClick={onBackClick}>\n          <Icon\n            iconName=\"arrow-left\"\n            size={{\n              faSize: 14,\n              wrapperSize: 14\n            }}\n          />\n        </div>\n        <div className={style.ctaContainer}>\n          <div>\n            {focused ? (\n              <div className={style.skillFocusBadge}>\n                <Icon\n                  iconName=\"bullseye-arrow\"\n                  backgroundColor=\"#DDD1FF\"\n                  size={{\n                    faSize: 10,\n                    wrapperSize: 16\n                  }}\n                />\n                {translate('skill_focus')}\n              </div>\n            ) : null}\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {description.length >= 226 ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {showMore ? translate('Show less') : translate('Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{\n                        faSize: 14,\n                        wrapperSize: 16\n                      }}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n          </div>\n\n          <div className={style.ctaWrapper}>\n            <ButtonLink\n              type=\"secondary\"\n              onClick={onReviewClick}\n              label={translate('review_this_skill')}\n              disabled={!availableForReview}\n              customStyle={{\n                width: 'fit-content',\n                borderRadius: '12px'\n              }}\n            />\n            <ContinueLearningButton onClick={onContinueLearningClick} />\n          </div>\n        </div>\n        <div className={style.progressInformationsWrapper}>\n          <div className={style.progressTitle}>{translate('your_progress')}</div>\n          <div className={style.skillCoursesAndQuestionsWrapper}>\n            {content ? (\n              <div className={style.skillInformation} data-name=\"skill-courses\">\n                <span className={style.skillInformationNumber}>{content}</span>{' '}\n                {translate('courses')}\n              </div>\n            ) : null}\n            {questionsToReview ? (\n              <div className={style.skillInformation} data-name=\"skill-questions\">\n                <span className={style.skillInformationNumber}>{questionsToReview}</span>\n                &nbsp;{translate('questions')}\n              </div>\n            ) : null}\n          </div>\n          <ProgressBar />\n          <div className={style.progressInformations}>\n            {content && (\n              <>\n                <div className={style.progressInformation} data-name=\"skill-completed-courses\">\n                  <span className={style.progressInformationNumber}>{contentCompleted}</span>\n                  {` ${translate('courses_completed')}`}\n                </div>\n                <div className={style.progressInformation} data-name=\"completed-percentage\">\n                  <span className={style.progressInformationNumber}>{score}%</span>\n                </div>\n              </>\n            )}\n          </div>\n        </div>\n        <ContinueLearning ongoingCourses={ongoingCourses} />\n        <AllCourses\n          skillIncludedCourses={skillIncludedCourses}\n          filters={filters}\n          sorting={sorting}\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  description: PropTypes.string,\n  metrics: PropTypes.shape({\n    score: PropTypes.number,\n    content: PropTypes.number,\n    questionsToReview: PropTypes.number,\n    contentCompleted: PropTypes.number\n  }),\n  focused: PropTypes.bool,\n  availableForReview: PropTypes.bool,\n  ongoingCourses: PropTypes.shape(CardsGrid.propTypes),\n  skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onReviewClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default SkillDetail;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","convert","classnames","Provider","Select","SelectOptionPropTypes","ButtonLink","Icon","CardsGrid","style","AllCourses","ContinueLearning","ContinueLearningButton","props","context","hovered","setHovered","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","handleMouseOver","handleMouseLeave","width","borderRadius","backgroundColor","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","bool","func","SkillDetail","title","ref","description","metrics","focused","availableForReview","ongoingCourses","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","score","content","questionsToReview","contentCompleted","showMore","setShowMore","handleShowMore","Description","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButtonWrapper","faSize","wrapperSize","ctaContainer","skillFocusBadge","length","showMoreWrapper","ctaWrapper","list","progressInformationsWrapper","progressTitle","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","progressInformations","progressInformation","progressInformationNumber","string","isRequired","shape","number","onChange","options","arrayOf"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, isEmpty} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\nimport ContinueLearning from './continue-learning';\n\nconst ContinueLearningButton = (props, context) => {\n  const [hovered, setHovered] = useState(false);\n  const {ongoingCoursesAvailable, onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  return (\n    <div onMouseOver={handleMouseOver} onMouseLeave={handleMouseLeave}>\n      <ButtonLink\n        label={ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')}\n        type=\"primary\"\n        customStyle={{\n          width: 'fit-content',\n          borderRadius: '12px',\n          backgroundColor: hovered\n            ? convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)\n            : primarySkinColor\n        }}\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    ref,\n    description,\n    metrics = {},\n    focused,\n    availableForReview,\n    ongoingCourses,\n    skillIncludedCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick\n  } = props;\n  const {score, content, questionsToReview, contentCompleted = 0} = metrics;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        {description}\n      </div>\n    );\n  });\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={ref}>\n        <div className={style.backButtonWrapper} onClick={onBackClick}>\n          <Icon\n            iconName=\"arrow-left\"\n            size={{\n              faSize: 14,\n              wrapperSize: 14\n            }}\n          />\n        </div>\n        <div className={style.ctaContainer}>\n          <div>\n            {focused ? (\n              <div className={style.skillFocusBadge}>\n                <Icon\n                  iconName=\"bullseye-arrow\"\n                  backgroundColor=\"#DDD1FF\"\n                  size={{\n                    faSize: 10,\n                    wrapperSize: 16\n                  }}\n                />\n                {translate('skill_focus')}\n              </div>\n            ) : null}\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {description.length >= 226 ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {showMore ? translate('Show less') : translate('Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{\n                        faSize: 14,\n                        wrapperSize: 16\n                      }}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n          </div>\n\n          <div className={style.ctaWrapper}>\n            <ButtonLink\n              type=\"secondary\"\n              onClick={onReviewClick}\n              label={translate('review_this_skill')}\n              disabled={!availableForReview}\n              customStyle={{\n                width: 'fit-content',\n                borderRadius: '12px'\n              }}\n            />\n            <ContinueLearningButton ongoingCoursesAvailable={!!ongoingCourses.list.length} onClick={onContinueLearningClick} />\n          </div>\n        </div>\n        {score !== undefined ? <div className={style.progressInformationsWrapper}>\n          <div className={style.progressTitle}>{translate('your_progress')}</div>\n          <div className={style.skillCoursesAndQuestionsWrapper}>\n            {content ? (\n              <div className={style.skillInformation} data-name=\"skill-courses\">\n                <span className={style.skillInformationNumber}>{content}</span>{' '}\n                {translate('courses')}\n              </div>\n            ) : null}\n            {questionsToReview ? (\n              <div className={style.skillInformation} data-name=\"skill-questions\">\n                <span className={style.skillInformationNumber}>{questionsToReview}</span>\n                &nbsp;{translate('questions')}\n              </div>\n            ) : null}\n          </div>\n          <ProgressBar />\n          <div className={style.progressInformations}>\n            {content && (\n              <>\n                <div className={style.progressInformation} data-name=\"skill-completed-courses\">\n                  <span className={style.progressInformationNumber}>{contentCompleted}</span>\n                  {` ${translate('courses_completed')}`}\n                </div>\n                <div className={style.progressInformation} data-name=\"completed-percentage\">\n                  <span className={style.progressInformationNumber}>{score}%</span>\n                </div>\n              </>\n            )}\n          </div>\n        </div> : null}\n        <ContinueLearning ongoingCourses={ongoingCourses} />\n        <AllCourses\n          skillIncludedCourses={skillIncludedCourses}\n          filters={filters}\n          sorting={sorting}\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  ref: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  metrics: PropTypes.shape({\n    score: PropTypes.number,\n    content: PropTypes.number,\n    questionsToReview: PropTypes.number,\n    contentCompleted: PropTypes.number\n  }),\n  focused: PropTypes.bool,\n  availableForReview: PropTypes.bool,\n  ongoingCourses: PropTypes.shape(CardsGrid.propTypes),\n  skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onReviewClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default SkillDetail;\n"],"mappings":"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"}

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

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

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

@@ -134,6 +134,7 @@ const AllCourses = (props, context) => {
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: _allCourses.default.sortSection
   }, /*#__PURE__*/_react.default.createElement(_inputSwitch.default, {
+    id: 'show-completed-courses-switch',
     type: "switch",
     name: translate('show_completed'),
     title: translate('show_completed'),

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

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

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

@@ -27,6 +27,7 @@ declare namespace SkillDetail {
     }
     namespace propTypes {
         const title: PropTypes.Validator<string>;
+        const ref: PropTypes.Validator<string>;
         const description: PropTypes.Requireable<string>;
         const metrics: PropTypes.Requireable<PropTypes.InferProps<{
             score: PropTypes.Requireable<number>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":";AA2DA,oEAuJC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":";AA4DA,oEAwJC"}

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

@@ -38,6 +38,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const ContinueLearningButton = (props, context) => {
   const [hovered, setHovered] = (0, _react.useState)(false);
   const {
+    ongoingCoursesAvailable,
     onClick
   } = props;
   const {
@@ -51,7 +52,7 @@ const ContinueLearningButton = (props, context) => {
     onMouseOver: handleMouseOver,
     onMouseLeave: handleMouseLeave
   }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
-    label: translate('continue_learning'),
+    label: ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning'),
     type: "primary",
     customStyle: {
       width: 'fit-content',
@@ -75,14 +76,16 @@ ContinueLearningButton.contextTypes = {
   translate: _provider.default.childContextTypes.translate
 };
 ContinueLearningButton.propTypes = process.env.NODE_ENV !== "production" ? {
+  ongoingCoursesAvailable: _propTypes.default.bool,
   onClick: _propTypes.default.func
 } : {};
 
 const SkillDetail = (props, context) => {
   const {
     title,
+    ref,
     description,
-    metrics,
+    metrics = {},
     focused,
     availableForReview,
     ongoingCourses,
@@ -128,7 +131,8 @@ const SkillDetail = (props, context) => {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.backgroundContainer
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.container
+    className: _style.default.container,
+    "data-name": ref
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.backButtonWrapper,
     onClick: onBackClick
@@ -172,8 +176,9 @@ const SkillDetail = (props, context) => {
       borderRadius: '12px'
     }
   }), /*#__PURE__*/_react.default.createElement(ContinueLearningButton, {
+    ongoingCoursesAvailable: !!ongoingCourses.list.length,
     onClick: onContinueLearningClick
-  }))), /*#__PURE__*/_react.default.createElement("div", {
+  }))), score !== undefined ? /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.progressInformationsWrapper
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.progressTitle
@@ -201,7 +206,7 @@ const SkillDetail = (props, context) => {
     "data-name": "completed-percentage"
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: _style.default.progressInformationNumber
-  }, score, "%"))))), /*#__PURE__*/_react.default.createElement(_continueLearning.default, {
+  }, score, "%"))))) : null, /*#__PURE__*/_react.default.createElement(_continueLearning.default, {
     ongoingCourses: ongoingCourses
   }), /*#__PURE__*/_react.default.createElement(_allCourses.default, {
     skillIncludedCourses: skillIncludedCourses,
@@ -216,6 +221,7 @@ SkillDetail.contextTypes = {
 };
 SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   title: _propTypes.default.string.isRequired,
+  ref: _propTypes.default.string.isRequired,
   description: _propTypes.default.string,
   metrics: _propTypes.default.shape({
     score: _propTypes.default.number,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ContinueLearningButton","props","context","hovered","setHovered","useState","onClick","skin","translate","primarySkinColor","handleMouseOver","useCallback","handleMouseLeave","width","borderRadius","backgroundColor","convert","position","faIcon","name","color","size","contextTypes","Provider","childContextTypes","propTypes","PropTypes","func","SkillDetail","title","description","metrics","focused","availableForReview","ongoingCourses","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","score","content","questionsToReview","contentCompleted","showMore","setShowMore","handleShowMore","Description","classnames","style","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButtonWrapper","faSize","wrapperSize","ctaContainer","skillFocusBadge","length","showMoreWrapper","ctaWrapper","progressInformationsWrapper","progressTitle","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","progressInformations","progressInformation","progressInformationNumber","string","isRequired","shape","number","bool","CardsGrid","onChange","options","arrayOf","SelectOptionPropTypes","Select"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\nimport ContinueLearning from './continue-learning';\n\nconst ContinueLearningButton = (props, context) => {\n  const [hovered, setHovered] = useState(false);\n  const {onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  return (\n    <div onMouseOver={handleMouseOver} onMouseLeave={handleMouseLeave}>\n      <ButtonLink\n        label={translate('continue_learning')}\n        type=\"primary\"\n        customStyle={{\n          width: 'fit-content',\n          borderRadius: '12px',\n          backgroundColor: hovered\n            ? convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)\n            : primarySkinColor\n        }}\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  onClick: PropTypes.func\n};\n\nconst SkillDetail = (props, context) => {\n  const {\n    title,\n    description,\n    metrics,\n    focused,\n    availableForReview,\n    ongoingCourses,\n    skillIncludedCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick\n  } = props;\n  const {score, content, questionsToReview, contentCompleted = 0} = metrics;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        {description}\n      </div>\n    );\n  });\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}>\n        <div className={style.backButtonWrapper} onClick={onBackClick}>\n          <Icon\n            iconName=\"arrow-left\"\n            size={{\n              faSize: 14,\n              wrapperSize: 14\n            }}\n          />\n        </div>\n        <div className={style.ctaContainer}>\n          <div>\n            {focused ? (\n              <div className={style.skillFocusBadge}>\n                <Icon\n                  iconName=\"bullseye-arrow\"\n                  backgroundColor=\"#DDD1FF\"\n                  size={{\n                    faSize: 10,\n                    wrapperSize: 16\n                  }}\n                />\n                {translate('skill_focus')}\n              </div>\n            ) : null}\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {description.length >= 226 ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {showMore ? translate('Show less') : translate('Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{\n                        faSize: 14,\n                        wrapperSize: 16\n                      }}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n          </div>\n\n          <div className={style.ctaWrapper}>\n            <ButtonLink\n              type=\"secondary\"\n              onClick={onReviewClick}\n              label={translate('review_this_skill')}\n              disabled={!availableForReview}\n              customStyle={{\n                width: 'fit-content',\n                borderRadius: '12px'\n              }}\n            />\n            <ContinueLearningButton onClick={onContinueLearningClick} />\n          </div>\n        </div>\n        <div className={style.progressInformationsWrapper}>\n          <div className={style.progressTitle}>{translate('your_progress')}</div>\n          <div className={style.skillCoursesAndQuestionsWrapper}>\n            {content ? (\n              <div className={style.skillInformation} data-name=\"skill-courses\">\n                <span className={style.skillInformationNumber}>{content}</span>{' '}\n                {translate('courses')}\n              </div>\n            ) : null}\n            {questionsToReview ? (\n              <div className={style.skillInformation} data-name=\"skill-questions\">\n                <span className={style.skillInformationNumber}>{questionsToReview}</span>\n                &nbsp;{translate('questions')}\n              </div>\n            ) : null}\n          </div>\n          <ProgressBar />\n          <div className={style.progressInformations}>\n            {content && (\n              <>\n                <div className={style.progressInformation} data-name=\"skill-completed-courses\">\n                  <span className={style.progressInformationNumber}>{contentCompleted}</span>\n                  {` ${translate('courses_completed')}`}\n                </div>\n                <div className={style.progressInformation} data-name=\"completed-percentage\">\n                  <span className={style.progressInformationNumber}>{score}%</span>\n                </div>\n              </>\n            )}\n          </div>\n        </div>\n        <ContinueLearning ongoingCourses={ongoingCourses} />\n        <AllCourses\n          skillIncludedCourses={skillIncludedCourses}\n          filters={filters}\n          sorting={sorting}\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  description: PropTypes.string,\n  metrics: PropTypes.shape({\n    score: PropTypes.number,\n    content: PropTypes.number,\n    questionsToReview: PropTypes.number,\n    contentCompleted: PropTypes.number\n  }),\n  focused: PropTypes.bool,\n  availableForReview: PropTypes.bool,\n  ongoingCourses: PropTypes.shape(CardsGrid.propTypes),\n  skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onReviewClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default SkillDetail;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ContinueLearningButton","props","context","hovered","setHovered","useState","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","handleMouseOver","useCallback","handleMouseLeave","width","borderRadius","backgroundColor","convert","position","faIcon","name","color","size","contextTypes","Provider","childContextTypes","propTypes","PropTypes","bool","func","SkillDetail","title","ref","description","metrics","focused","availableForReview","ongoingCourses","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","score","content","questionsToReview","contentCompleted","showMore","setShowMore","handleShowMore","Description","classnames","style","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButtonWrapper","faSize","wrapperSize","ctaContainer","skillFocusBadge","length","showMoreWrapper","ctaWrapper","list","progressInformationsWrapper","progressTitle","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","progressInformations","progressInformation","progressInformationNumber","string","isRequired","shape","number","CardsGrid","onChange","options","arrayOf","SelectOptionPropTypes","Select"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, isEmpty} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\nimport ContinueLearning from './continue-learning';\n\nconst ContinueLearningButton = (props, context) => {\n  const [hovered, setHovered] = useState(false);\n  const {ongoingCoursesAvailable, onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  return (\n    <div onMouseOver={handleMouseOver} onMouseLeave={handleMouseLeave}>\n      <ButtonLink\n        label={ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')}\n        type=\"primary\"\n        customStyle={{\n          width: 'fit-content',\n          borderRadius: '12px',\n          backgroundColor: hovered\n            ? convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)\n            : primarySkinColor\n        }}\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    ref,\n    description,\n    metrics = {},\n    focused,\n    availableForReview,\n    ongoingCourses,\n    skillIncludedCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick\n  } = props;\n  const {score, content, questionsToReview, contentCompleted = 0} = metrics;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        {description}\n      </div>\n    );\n  });\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={ref}>\n        <div className={style.backButtonWrapper} onClick={onBackClick}>\n          <Icon\n            iconName=\"arrow-left\"\n            size={{\n              faSize: 14,\n              wrapperSize: 14\n            }}\n          />\n        </div>\n        <div className={style.ctaContainer}>\n          <div>\n            {focused ? (\n              <div className={style.skillFocusBadge}>\n                <Icon\n                  iconName=\"bullseye-arrow\"\n                  backgroundColor=\"#DDD1FF\"\n                  size={{\n                    faSize: 10,\n                    wrapperSize: 16\n                  }}\n                />\n                {translate('skill_focus')}\n              </div>\n            ) : null}\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {description.length >= 226 ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {showMore ? translate('Show less') : translate('Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{\n                        faSize: 14,\n                        wrapperSize: 16\n                      }}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n          </div>\n\n          <div className={style.ctaWrapper}>\n            <ButtonLink\n              type=\"secondary\"\n              onClick={onReviewClick}\n              label={translate('review_this_skill')}\n              disabled={!availableForReview}\n              customStyle={{\n                width: 'fit-content',\n                borderRadius: '12px'\n              }}\n            />\n            <ContinueLearningButton ongoingCoursesAvailable={!!ongoingCourses.list.length} onClick={onContinueLearningClick} />\n          </div>\n        </div>\n        {score !== undefined ? <div className={style.progressInformationsWrapper}>\n          <div className={style.progressTitle}>{translate('your_progress')}</div>\n          <div className={style.skillCoursesAndQuestionsWrapper}>\n            {content ? (\n              <div className={style.skillInformation} data-name=\"skill-courses\">\n                <span className={style.skillInformationNumber}>{content}</span>{' '}\n                {translate('courses')}\n              </div>\n            ) : null}\n            {questionsToReview ? (\n              <div className={style.skillInformation} data-name=\"skill-questions\">\n                <span className={style.skillInformationNumber}>{questionsToReview}</span>\n                &nbsp;{translate('questions')}\n              </div>\n            ) : null}\n          </div>\n          <ProgressBar />\n          <div className={style.progressInformations}>\n            {content && (\n              <>\n                <div className={style.progressInformation} data-name=\"skill-completed-courses\">\n                  <span className={style.progressInformationNumber}>{contentCompleted}</span>\n                  {` ${translate('courses_completed')}`}\n                </div>\n                <div className={style.progressInformation} data-name=\"completed-percentage\">\n                  <span className={style.progressInformationNumber}>{score}%</span>\n                </div>\n              </>\n            )}\n          </div>\n        </div> : null}\n        <ContinueLearning ongoingCourses={ongoingCourses} />\n        <AllCourses\n          skillIncludedCourses={skillIncludedCourses}\n          filters={filters}\n          sorting={sorting}\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  ref: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  metrics: PropTypes.shape({\n    score: PropTypes.number,\n    content: PropTypes.number,\n    questionsToReview: PropTypes.number,\n    contentCompleted: PropTypes.number\n  }),\n  focused: PropTypes.bool,\n  availableForReview: PropTypes.bool,\n  ongoingCourses: PropTypes.shape(CardsGrid.propTypes),\n  skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onReviewClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default SkillDetail;\n"],"mappings":"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"}

package/locales/en/global.json

@@ -69,6 +69,7 @@
   "Review lesson": "Review lesson",
   "search_place_holder": "Search...",
   "secured_payment": "Secure server",
+  "start_learning": "Start learning",
   "sort_by": "Sort by:",
   "See clue": "See clue",
   "See less": "See less",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "11.32.12-alpha.4+de06f398e",
+  "version": "11.32.12-alpha.5+5ebe37eb1",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -177,5 +177,5 @@
     "last 2 versions",
     "IE 11"
   ],
-  "gitHead": "de06f398e3e7030b222cd757cd14e2d54c1c9640"
+  "gitHead": "5ebe37eb102fd233281316c1d10730c8bb63d6b6"
 }