@coorpacademy/components 11.32.34 → 11.32.35-alpha.11

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

@@ -1,10 +1,11 @@
-import _sortBy from "lodash/fp/sortBy";
-import _getOr from "lodash/fp/getOr";
+import _size from "lodash/fp/size";
+import _map from "lodash/fp/map";
+import _filter from "lodash/fp/filter";
 import _get from "lodash/fp/get";
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import Provider from '../../atom/provider';
 import Select, { SelectOptionPropTypes } from '../../atom/select';
@@ -15,10 +16,14 @@ import searchValueIncluded from '../../util/search-value-included';
 import InputSwitch from '../../atom/input-switch';
 import style from './all-courses.css';
 
+const uncappedMap = _map.convert({
+  cap: false
+});
+
 const FilterButton = (props, context) => {
   const {
     selected,
-    filter,
+    label,
     onClick
   } = props;
   const {
@@ -34,7 +39,7 @@ const FilterButton = (props, context) => {
       transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',
       width: 'fit-content'
     },
-    label: filter,
+    label,
     onClick,
     'data-name': 'filter-type-course-button'
   };
@@ -47,14 +52,13 @@ FilterButton.contextTypes = {
 };
 FilterButton.propTypes = process.env.NODE_ENV !== "production" ? {
   selected: PropTypes.bool,
-  filter: PropTypes.string,
+  label: PropTypes.string,
   onClick: PropTypes.func
 } : {};
 
 const AllCourses = (props, context) => {
   const {
-    courses,
-    totalCourses,
+    content,
     filters,
     sorting
   } = props;
@@ -65,47 +69,43 @@ const AllCourses = (props, context) => {
   const {
     list,
     loading
-  } = courses;
+  } = content;
   const {
     translate
   } = context;
   const [showCompleted, setShowCompleted] = useState(true);
   const [searchValue, setSearchValue] = useState('');
-  const [searchResults, setSearchResults] = useState(_sortBy(course => -_getOr(0, ['progress'], course), list));
   const sortView = sorting !== undefined ? /*#__PURE__*/React.createElement("div", {
     "data-name": "choice"
   }, /*#__PURE__*/React.createElement(Select, _extends({}, sorting, {
     "aria-label": "All courses sort"
   }))) : null;
-  useEffect(() => {
-    setSearchResults(_sortBy(course => -_getOr(0, ['progress'], course), list));
-  }, [list]);
+  const filteredContent = useMemo(() => {
+    return showCompleted ? list : _filter(course => course.progress < 1, list);
+  }, [list, showCompleted]);
+  const contentResult = useMemo(() => {
+    return _filter(skill => searchValueIncluded(skill.title, searchValue), filteredContent);
+  }, [filteredContent, searchValue]);
   const handleSearch = useCallback(value => {
     setSearchValue(value);
-    setSearchResults(list.filter(skill => searchValueIncluded(skill.title, value)));
-  }, [list, setSearchValue, setSearchResults]);
+  }, [setSearchValue]);
   const handleSearchReset = useCallback(() => {
     setSearchValue('');
-    setSearchResults(list);
-  }, [list, setSearchValue, setSearchResults]);
+  }, [setSearchValue]);
   const handleShowCompletedToggle = useCallback(() => {
-    const toggledShowCompleted = !showCompleted;
-    setShowCompleted(toggledShowCompleted);
-
-    if (toggledShowCompleted) {
-      setSearchResults(list);
-      handleSearchReset();
-    } else {
-      setSearchResults(searchResults.filter(skill => skill.progress < 100));
-    }
-  }, [list, searchResults, showCompleted, setShowCompleted, setSearchResults, handleSearchReset]);
+    setShowCompleted(prevShowCompleted => !prevShowCompleted);
+  }, []);
+  const handleFilterChange = useCallback(value => {
+    onChange(value);
+    handleSearchReset();
+  }, [onChange, handleSearchReset]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: style.continueLearningWrapper
   }, /*#__PURE__*/React.createElement("span", {
     className: style.continueLearningTitle
-  }, translate('all_courses')), /*#__PURE__*/React.createElement("span", {
+  }, translate('all_content')), /*#__PURE__*/React.createElement("span", {
     className: style.continueLearningNumber
-  }, totalCourses)), /*#__PURE__*/React.createElement("div", {
+  }, _size(contentResult))), /*#__PURE__*/React.createElement("div", {
     className: style.searchAndSortSection
   }, /*#__PURE__*/React.createElement("div", {
     className: style.searchWrapper
@@ -126,34 +126,28 @@ const AllCourses = (props, context) => {
     "aria-label": 'Show completed courses aria label',
     value: showCompleted,
     onChange: handleShowCompletedToggle
-  }), /*#__PURE__*/React.createElement("div", {
+  }), sortView ? /*#__PURE__*/React.createElement("div", {
     className: style.sortWrapper
-  }, translate('sort_by'), sortView))), /*#__PURE__*/React.createElement("div", {
+  }, translate('sort_by'), sortView) : null)), /*#__PURE__*/React.createElement("div", {
     className: style.filterWrapper
-  }, options.length > 2 && searchResults.length > 0 ? options.map((filter, index) => {
+  }, _size(options) > 2 && _size(contentResult) ? uncappedMap((filterProps, index) => {
     const {
       name,
       value,
       selected
-    } = filter;
-
-    function handleChange() {
-      onChange(value);
-      handleSearchReset();
-    }
-
+    } = filterProps;
     return /*#__PURE__*/React.createElement("div", {
       key: index,
       className: style.filterButtonWrapper
     }, /*#__PURE__*/React.createElement(FilterButton, {
       selected: selected,
-      filter: name,
-      onClick: handleChange
+      label: name,
+      onClick: handleFilterChange
     }), value === 'ALL' ? /*#__PURE__*/React.createElement("div", {
       className: style.divider
     }) : null);
-  }) : null), /*#__PURE__*/React.createElement("div", null, searchResults.length > 0 ? /*#__PURE__*/React.createElement(CardsGrid, {
-    list: searchResults,
+  }, options) : null), /*#__PURE__*/React.createElement("div", null, _size(contentResult) ? /*#__PURE__*/React.createElement(CardsGrid, {
+    list: contentResult,
     loading: loading,
     customStyle: {
       justifyContent: 'left'
@@ -177,8 +171,7 @@ AllCourses.contextTypes = {
   translate: Provider.childContextTypes.translate
 };
 AllCourses.propTypes = process.env.NODE_ENV !== "production" ? {
-  courses: PropTypes.shape(CardsGrid.propTypes),
-  totalCourses: PropTypes.number,
+  content: PropTypes.shape(CardsGrid.propTypes),
   filters: PropTypes.shape({
     onChange: PropTypes.func,
     options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))

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

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

package/lib/molecule/progress-wrapper/index.d.ts

@@ -1,7 +1,7 @@
 export default ProgressWrapper;
-declare function ProgressWrapper({ completedCourses, completedModules, title, subtitle, progression, sections }: {
-    completedCourses: any;
+declare function ProgressWrapper({ completedModules, mandatoryModules, title, subtitle, progression, sections }: {
     completedModules: any;
+    mandatoryModules: any;
     title: any;
     subtitle: any;
     progression: any;
@@ -14,13 +14,12 @@ declare namespace ProgressWrapper {
     namespace propTypes {
         const title: PropTypes.Requireable<string>;
         const subtitle: PropTypes.Requireable<string>;
-        const completedCourses: PropTypes.Requireable<number>;
         const completedModules: PropTypes.Requireable<number>;
+        const mandatoryModules: PropTypes.Requireable<number>;
         const progression: PropTypes.Requireable<number>;
         const sections: PropTypes.Requireable<(PropTypes.InferProps<{
             type: PropTypes.Requireable<string>;
-            badgeUrl: PropTypes.Requireable<string>;
-            onDownload: PropTypes.Requireable<(...args: any[]) => any>;
+            downloadUrl: PropTypes.Requireable<string>;
             stars: PropTypes.Requireable<number>;
         }> | null | undefined)[]>;
     }

package/lib/molecule/progress-wrapper/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/progress-wrapper/index.js"],"names":[],"mappings":";AAyFA;;;;;;;8BA8DC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/progress-wrapper/index.js"],"names":[],"mappings":";AAqGA;;;;;;;8BA8DC"}

package/lib/molecule/progress-wrapper/index.js

@@ -5,8 +5,6 @@ exports.default = void 0;
 
 var _map2 = _interopRequireDefault(require("lodash/fp/map"));
 
-var _lowerCase2 = _interopRequireDefault(require("lodash/fp/lowerCase"));
-
 var _isEmpty2 = _interopRequireDefault(require("lodash/fp/isEmpty"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -38,11 +36,11 @@ const uncappedMap = _map2.default.convert({
 });
 
 const DetailSection = ({
+  dataName,
   index,
   type,
   isLocked,
-  badgeUrl,
-  onDownload,
+  downloadUrl,
   stars
 }, context) => {
   const {
@@ -52,12 +50,16 @@ const DetailSection = ({
 
   const DownloadButton = /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
     label: translate('download'),
-    onClick: onDownload,
-    "data-name": "download-button",
-    "aria-label": "download button",
+    link: {
+      target: '_blank',
+      href: downloadUrl
+    },
+    "data-name": `download-${type}-button`,
+    "aria-label": `download ${type} button`,
     customStyle: {
       backgroundColor: '#F1F6FE',
-      color: '#0061FF'
+      color: '#0061FF',
+      width: 'auto'
     },
     icon: {
       position: 'left',
@@ -88,7 +90,9 @@ const DetailSection = ({
   });
 
   return isTypeStars ? /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default[`detailsSection${index}`]
+    className: _style.default[`detailsSection${index}`],
+    "data-name": type,
+    "aria-label": `${type} informations`
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.detailsInfo
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -103,10 +107,12 @@ const DetailSection = ({
     backgroundColor: "#FFF9D1",
     preset: "xl"
   }), /*#__PURE__*/_react.default.createElement("span", null, stars)))) : /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default[`detailsSection${index}`]
+    className: _style.default[`detailsSection${index}`],
+    "data-name": type,
+    "aria-label": `${type} informations`
   }, /*#__PURE__*/_react.default.createElement("img", {
     className: _style.default.img,
-    src: badgeUrl || 'https://s3.eu-west-1.amazonaws.com/static.coorpacademy.com/assets/images/diploma.svg'
+    src: type === 'badge' ? downloadUrl : 'https://s3.eu-west-1.amazonaws.com/static.coorpacademy.com/assets/images/diploma.svg'
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.detailsInfo
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -119,8 +125,8 @@ const DetailSection = ({
 };
 
 const ProgressWrapper = ({
-  completedCourses,
   completedModules,
+  mandatoryModules,
   title,
   subtitle,
   progression,
@@ -129,10 +135,12 @@ const ProgressWrapper = ({
   const {
     translate
   } = context;
-  const modulesCompletedLocal = translate('modules_completed');
+  const mandatoryCompletedModulesLocal = translate('modules_completed_mandatory');
   const isLocked = progression !== 100;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.container
+    className: _style.default.container,
+    "data-name": "prgress-wrapper",
+    "aria-label": "progress wrapper section"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.titleContainer
   }, /*#__PURE__*/_react.default.createElement(_title.default, {
@@ -145,17 +153,13 @@ const ProgressWrapper = ({
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.stats
   }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.default.statsNumber
-  }, completedCourses), (0, _lowerCase2.default)(translate('courses_completed'))), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.divider
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.statsModule
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.default.statsNumber
-  }, completedModules), modulesCompletedLocal)), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.statsNumber,
+    "data-name": "progress-stats"
+  }, `${completedModules > mandatoryModules ? mandatoryModules : completedModules} / ${mandatoryModules}`), mandatoryCompletedModulesLocal)), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.progression
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.default.statsNumber
+    className: _style.default.statsNumber,
+    "data-name": "progress-value"
   }, progression, "%"))), /*#__PURE__*/_react.default.createElement(_progressBar.default, {
     className: _style.default.customProgressBar,
     style: {
@@ -165,37 +169,21 @@ const ProgressWrapper = ({
     value: progression,
     max: 100
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.statsMobile
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.statsModuleMobile
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.default.statsNumber
-  }, completedModules), modulesCompletedLocal), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.statsProgressionMobile
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: _style.default.statsNumber
-  }, progression, "%"))), (0, _isEmpty2.default)(sections) ? null : /*#__PURE__*/_react.default.createElement("div", {
+  }, progression, "%")), (0, _isEmpty2.default)(sections) ? null : /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.details
-  }, uncappedMap(({
-    type,
-    stars,
-    badgeUrl,
-    onDownload
-  }, index) => /*#__PURE__*/_react.default.createElement(DetailSection, {
-    type,
-    isLocked,
-    badgeUrl,
-    onDownload,
-    stars,
-    key: `${type}-${index}`,
+  }, uncappedMap((section, index) => /*#__PURE__*/_react.default.createElement(DetailSection, _extends({}, section, {
+    isLocked: isLocked,
+    key: `${section.type}-${index}`,
     index: index
-  }), sections)));
+  })), sections)));
 };
 
 const commonDetailSectionPropTypes = process.env.NODE_ENV !== "production" ? {
   type: _propTypes.default.oneOf(['diploma', 'badge', 'stars']),
-  badgeUrl: _propTypes.default.string,
-  onDownload: _propTypes.default.func,
+  downloadUrl: _propTypes.default.string,
   stars: _propTypes.default.number
 } : {};
 DetailSection.contextTypes = {
@@ -211,8 +199,8 @@ ProgressWrapper.contextTypes = {
 ProgressWrapper.propTypes = process.env.NODE_ENV !== "production" ? {
   title: _propTypes.default.string,
   subtitle: _propTypes.default.string,
-  completedCourses: _propTypes.default.number,
   completedModules: _propTypes.default.number,
+  mandatoryModules: _propTypes.default.number,
   progression: _propTypes.default.number,
   sections: _propTypes.default.arrayOf(_propTypes.default.shape(commonDetailSectionPropTypes))
 } : {};

package/lib/molecule/progress-wrapper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["uncappedMap","convert","cap","DetailSection","index","type","isLocked","badgeUrl","onDownload","stars","context","translate","isTypeStars","DownloadButton","backgroundColor","color","position","faIcon","name","size","customStyle","padding","LockedTag","iconName","iconColor","preset","style","detailsInfo","detailsInfoText","detailsTitle","img","buttonContainer","ProgressWrapper","completedCourses","completedModules","title","subtitle","progression","sections","modulesCompletedLocal","container","titleContainer","statscontainer","stats","statsNumber","divider","statsModule","customProgressBar","COLORS","positive","statsMobile","statsModuleMobile","statsProgressionMobile","details","commonDetailSectionPropTypes","PropTypes","oneOf","string","func","number","contextTypes","Provider","childContextTypes","propTypes","bool","arrayOf","shape"],"sources":["../../../src/molecule/progress-wrapper/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty, lowerCase, map} from 'lodash/fp';\nimport Title from '../../atom/title';\nimport ProgressBar from '../progress-bar';\nimport {COLORS} from '../../variables/colors';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport Provider from '../../atom/provider';\n// eslint-disable-next-line css-modules/no-unused-class\nimport style from './style.css';\n\nconst uncappedMap = map.convert({cap: false});\n\nconst DetailSection = ({index, type, isLocked, badgeUrl, onDownload, stars}, context) => {\n  const {translate} = context;\n  const isTypeStars = type === 'stars';\n\n  const DownloadButton = (\n    <ButtonLink\n      label={translate('download')}\n      onClick={onDownload}\n      data-name=\"download-button\"\n      aria-label=\"download button\"\n      customStyle={{backgroundColor: '#F1F6FE', color: '#0061FF'}}\n      icon={{\n        position: 'left',\n        faIcon: {\n          name: 'download',\n          color: '#0061FF',\n          size: 14,\n          customStyle: {padding: 0}\n        }\n      }}\n      disabled={isLocked}\n    />\n  );\n\n  const LockedTag = (\n    <Tag\n      label=\"Locked\"\n      size=\"S\"\n      icon={{\n        position: 'left',\n        iconName: 'lock',\n        iconColor: '#515161',\n        preset: 's',\n        customStyle: {padding: 0}\n      }}\n    />\n  );\n\n  return isTypeStars ? (\n    <div className={style[`detailsSection${index}`]}>\n      <div className={style.detailsInfo}>\n        <div className={style.detailsInfoText}>\n          <span className={style.detailsTitle}>{translate('bonus_stars')}</span>\n          {isLocked ? LockedTag : null}\n        </div>\n        <div className={style.stars}>\n          <Icon iconName=\"star\" iconColor=\"#FFCE0A\" backgroundColor=\"#FFF9D1\" preset=\"xl\" />\n          <span>{stars}</span>\n        </div>\n      </div>\n    </div>\n  ) : (\n    <div className={style[`detailsSection${index}`]}>\n      <img\n        className={style.img}\n        src={\n          badgeUrl ||\n          'https://s3.eu-west-1.amazonaws.com/static.coorpacademy.com/assets/images/diploma.svg'\n        }\n      />\n      <div className={style.detailsInfo}>\n        <div className={style.detailsInfoText}>\n          <span className={style.detailsTitle}>\n            {type === 'diploma' ? translate('diploma') : translate('badge')}\n          </span>\n          {isLocked ? LockedTag : null}\n        </div>\n\n        <div className={style.buttonContainer}>{DownloadButton}</div>\n      </div>\n    </div>\n  );\n};\n\nconst ProgressWrapper = (\n  {completedCourses, completedModules, title, subtitle, progression, sections},\n  context\n) => {\n  const {translate} = context;\n  const modulesCompletedLocal = translate('modules_completed');\n  const isLocked = progression !== 100;\n\n  return (\n    <div className={style.container}>\n      <div className={style.titleContainer}>\n        <Title type=\"form-group\" titleSize=\"medium\" title={title} subtitle={subtitle} />\n      </div>\n      <div className={style.statscontainer}>\n        <div className={style.stats}>\n          <div>\n            <span className={style.statsNumber}>{completedCourses}</span>\n            {lowerCase(translate('courses_completed'))}\n          </div>\n          <div className={style.divider} />\n          <div className={style.statsModule}>\n            <span className={style.statsNumber}>{completedModules}</span>\n            {modulesCompletedLocal}\n          </div>\n        </div>\n        <div className={style.progression}>\n          <span className={style.statsNumber}>{progression}%</span>\n        </div>\n      </div>\n      <ProgressBar\n        className={style.customProgressBar}\n        style={{backgroundColor: COLORS.positive}}\n        displayInfo={false}\n        value={progression}\n        max={100}\n      />\n      <div className={style.statsMobile}>\n        <div className={style.statsModuleMobile}>\n          <span className={style.statsNumber}>{completedModules}</span>\n          {modulesCompletedLocal}\n        </div>\n        <div className={style.statsProgressionMobile}>\n          <span className={style.statsNumber}>{progression}%</span>\n        </div>\n      </div>\n\n      {isEmpty(sections) ? null : (\n        <div className={style.details}>\n          {uncappedMap(\n            ({type, stars, badgeUrl, onDownload}, index) => (\n              <DetailSection\n                {...{type, isLocked, badgeUrl, onDownload, stars}}\n                key={`${type}-${index}`}\n                index={index}\n              />\n            ),\n            sections\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst commonDetailSectionPropTypes = {\n  type: PropTypes.oneOf(['diploma', 'badge', 'stars']),\n  badgeUrl: PropTypes.string,\n  onDownload: PropTypes.func,\n  stars: PropTypes.number\n};\n\nDetailSection.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nDetailSection.propTypes = {\n  index: PropTypes.number,\n  isLocked: PropTypes.bool,\n  ...commonDetailSectionPropTypes\n};\n\nProgressWrapper.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nProgressWrapper.propTypes = {\n  title: PropTypes.string,\n  subtitle: PropTypes.string,\n  completedCourses: PropTypes.number,\n  completedModules: PropTypes.number,\n  progression: PropTypes.number,\n  sections: PropTypes.arrayOf(PropTypes.shape(commonDetailSectionPropTypes))\n};\n\nexport default ProgressWrapper;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["uncappedMap","convert","cap","DetailSection","dataName","index","type","isLocked","downloadUrl","stars","context","translate","isTypeStars","DownloadButton","target","href","backgroundColor","color","width","position","faIcon","name","size","customStyle","padding","LockedTag","iconName","iconColor","preset","style","detailsInfo","detailsInfoText","detailsTitle","img","buttonContainer","ProgressWrapper","completedModules","mandatoryModules","title","subtitle","progression","sections","mandatoryCompletedModulesLocal","container","titleContainer","statscontainer","stats","statsNumber","customProgressBar","COLORS","positive","statsProgressionMobile","details","section","commonDetailSectionPropTypes","PropTypes","oneOf","string","number","contextTypes","Provider","childContextTypes","propTypes","bool","arrayOf","shape"],"sources":["../../../src/molecule/progress-wrapper/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty, map} from 'lodash/fp';\nimport Title from '../../atom/title';\nimport ProgressBar from '../progress-bar';\nimport {COLORS} from '../../variables/colors';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport Provider from '../../atom/provider';\n// eslint-disable-next-line css-modules/no-unused-class\nimport style from './style.css';\n\nconst uncappedMap = map.convert({cap: false});\n\nconst DetailSection = ({dataName, index, type, isLocked, downloadUrl, stars}, context) => {\n  const {translate} = context;\n  const isTypeStars = type === 'stars';\n\n  const DownloadButton = (\n    <ButtonLink\n      label={translate('download')}\n      link={{\n        target: '_blank',\n        href: downloadUrl\n      }}\n      data-name={`download-${type}-button`}\n      aria-label={`download ${type} button`}\n      customStyle={{backgroundColor: '#F1F6FE', color: '#0061FF', width: 'auto'}}\n      icon={{\n        position: 'left',\n        faIcon: {\n          name: 'download',\n          color: '#0061FF',\n          size: 14,\n          customStyle: {padding: 0}\n        }\n      }}\n      disabled={isLocked}\n    />\n  );\n\n  const LockedTag = (\n    <Tag\n      label=\"Locked\"\n      size=\"S\"\n      icon={{\n        position: 'left',\n        iconName: 'lock',\n        iconColor: '#515161',\n        preset: 's',\n        customStyle: {padding: 0}\n      }}\n    />\n  );\n\n  return isTypeStars ? (\n    <div\n      className={style[`detailsSection${index}`]}\n      data-name={type}\n      aria-label={`${type} informations`}\n    >\n      <div className={style.detailsInfo}>\n        <div className={style.detailsInfoText}>\n          <span className={style.detailsTitle}>{translate('bonus_stars')}</span>\n          {isLocked ? LockedTag : null}\n        </div>\n        <div className={style.stars}>\n          <Icon iconName=\"star\" iconColor=\"#FFCE0A\" backgroundColor=\"#FFF9D1\" preset=\"xl\" />\n          <span>{stars}</span>\n        </div>\n      </div>\n    </div>\n  ) : (\n    <div\n      className={style[`detailsSection${index}`]}\n      data-name={type}\n      aria-label={`${type} informations`}\n    >\n      <img\n        className={style.img}\n        src={\n          type === 'badge'\n            ? downloadUrl\n            : 'https://s3.eu-west-1.amazonaws.com/static.coorpacademy.com/assets/images/diploma.svg'\n        }\n      />\n      <div className={style.detailsInfo}>\n        <div className={style.detailsInfoText}>\n          <span className={style.detailsTitle}>\n            {type === 'diploma' ? translate('diploma') : translate('badge')}\n          </span>\n          {isLocked ? LockedTag : null}\n        </div>\n\n        <div className={style.buttonContainer}>{DownloadButton}</div>\n      </div>\n    </div>\n  );\n};\n\nconst ProgressWrapper = (\n  {completedModules, mandatoryModules, title, subtitle, progression, sections},\n  context\n) => {\n  const {translate} = context;\n  const mandatoryCompletedModulesLocal = translate('modules_completed_mandatory');\n  const isLocked = progression !== 100;\n\n  return (\n    <div\n      className={style.container}\n      data-name=\"prgress-wrapper\"\n      aria-label=\"progress wrapper section\"\n    >\n      <div className={style.titleContainer}>\n        <Title type=\"form-group\" titleSize=\"medium\" title={title} subtitle={subtitle} />\n      </div>\n      <div className={style.statscontainer}>\n        <div className={style.stats}>\n          <div>\n            <span className={style.statsNumber} data-name=\"progress-stats\">\n              {`${\n                completedModules > mandatoryModules ? mandatoryModules : completedModules\n              } / ${mandatoryModules}`}\n            </span>\n            {mandatoryCompletedModulesLocal}\n          </div>\n        </div>\n        <div className={style.progression}>\n          <span className={style.statsNumber} data-name=\"progress-value\">\n            {progression}%\n          </span>\n        </div>\n      </div>\n      <ProgressBar\n        className={style.customProgressBar}\n        style={{backgroundColor: COLORS.positive}}\n        displayInfo={false}\n        value={progression}\n        max={100}\n      />\n      <div className={style.statsProgressionMobile}>\n        <span className={style.statsNumber}>{progression}%</span>\n      </div>\n\n      {isEmpty(sections) ? null : (\n        <div className={style.details}>\n          {uncappedMap(\n            (section, index) => (\n              <DetailSection\n                {...section}\n                isLocked={isLocked}\n                key={`${section.type}-${index}`}\n                index={index}\n              />\n            ),\n            sections\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst commonDetailSectionPropTypes = {\n  type: PropTypes.oneOf(['diploma', 'badge', 'stars']),\n  downloadUrl: PropTypes.string,\n  stars: PropTypes.number\n};\n\nDetailSection.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nDetailSection.propTypes = {\n  index: PropTypes.number,\n  isLocked: PropTypes.bool,\n  ...commonDetailSectionPropTypes\n};\n\nProgressWrapper.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nProgressWrapper.propTypes = {\n  title: PropTypes.string,\n  subtitle: PropTypes.string,\n  completedModules: PropTypes.number,\n  mandatoryModules: PropTypes.number,\n  progression: PropTypes.number,\n  sections: PropTypes.arrayOf(PropTypes.shape(commonDetailSectionPropTypes))\n};\n\nexport default ProgressWrapper;\n"],"mappings":"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"}

package/lib/molecule/progress-wrapper/style.css

@@ -41,14 +41,6 @@
   gap: 16px;
 }
 
-.divider {
-  width: 4px;
-  height: 4px;
-  background-color: #d7d7da;
-  border: solid #d7d7da 1px;
-  border-radius: 4px;
-}
-
 .progression {
   display: flex;
   justify-content: end;
@@ -129,10 +121,6 @@
   font-weight: 700;
 }
 
-.statsMobile {
-  display: none;
-}
-
 .statsModuleMobile {
   display: none;
 }
@@ -140,6 +128,9 @@
 .statsProgressionMobile {
   composes: progression;
   display: none;
+  color: cm_grey_400;
+  font-weight: 600;
+  padding-top: 16px;
 }
 
 @media mobile, tablet {
@@ -160,12 +151,6 @@
    justify-content: space-around;
    gap: 0;
   }
-  .divider {
-    display: none;
-  }
-  .statsModule {
-    display: none;
-  }
   .progression {
     display: none;
   }
@@ -175,11 +160,4 @@
   .statsModuleMobile {
     display: block;
   }
-  .statsMobile {
-    display: flex;
-    justify-content: space-between;
-    padding-top: 16px;
-    color: cm_grey_400;
-    font-weight: 600;
-  }    
 }

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

@@ -33,21 +33,12 @@ declare namespace CertificationDetail {
         const metrics: PropTypes.Requireable<PropTypes.InferProps<{
             progression: PropTypes.Requireable<number>;
             stars: PropTypes.Requireable<number>;
-            completedCourses: PropTypes.Requireable<number>;
-            completedModules: PropTypes.Requireable<number>;
-        }>>;
-        const onDownloadDiploma: PropTypes.Requireable<(...args: any[]) => any>;
-        const badge: PropTypes.Requireable<PropTypes.InferProps<{
-            badgeUrl: PropTypes.Requireable<string>;
-            onDownloadBadge: PropTypes.Requireable<(...args: any[]) => any>;
-        }>>;
-        const ongoingCourses: PropTypes.Requireable<PropTypes.InferProps<{
-            list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
-            customStyle: PropTypes.Requireable<{
-                [x: string]: string | null | undefined;
-            }>;
-            loading: PropTypes.Requireable<boolean>;
+            mandatoryModules: PropTypes.Requireable<number>;
+            totalModules: PropTypes.Requireable<number>;
         }>>;
+        const diplomaUrl: PropTypes.Requireable<string>;
+        const badgeUrl: PropTypes.Requireable<string>;
+        const ongoingCoursesAvailable: PropTypes.Requireable<boolean>;
         const certificationCourses: PropTypes.Requireable<PropTypes.InferProps<{
             list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
             customStyle: PropTypes.Requireable<{
@@ -55,8 +46,6 @@ declare namespace CertificationDetail {
             }>;
             loading: PropTypes.Requireable<boolean>;
         }>>;
-        const totalCourses: PropTypes.Requireable<number>;
-        const totalModules: PropTypes.Requireable<number>;
         const filters: PropTypes.Requireable<PropTypes.InferProps<{
             onChange: PropTypes.Requireable<(...args: any[]) => any>;
             options: PropTypes.Requireable<(PropTypes.InferProps<{
@@ -66,37 +55,6 @@ declare namespace CertificationDetail {
                 validOption: PropTypes.Requireable<boolean>;
             }> | null | undefined)[]>;
         }>>;
-        const sorting: PropTypes.Requireable<PropTypes.InferProps<{
-            title: PropTypes.Requireable<string>;
-            name: PropTypes.Requireable<string>;
-            className: PropTypes.Requireable<string>;
-            borderClassName: PropTypes.Requireable<string>;
-            disabled: PropTypes.Requireable<boolean>;
-            multiple: PropTypes.Requireable<boolean>;
-            description: PropTypes.Requireable<string>;
-            required: PropTypes.Requireable<boolean>;
-            onChange: PropTypes.Requireable<(...args: any[]) => any>;
-            theme: PropTypes.Requireable<string>;
-            options: PropTypes.Requireable<(PropTypes.InferProps<{
-                name: PropTypes.Validator<string>;
-                value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-                selected: PropTypes.Requireable<boolean>;
-                validOption: PropTypes.Requireable<boolean>;
-            }> | null | undefined)[]>;
-            optgroups: PropTypes.Requireable<(PropTypes.InferProps<{
-                label: PropTypes.Validator<string>;
-                options: PropTypes.Requireable<(PropTypes.InferProps<{
-                    name: PropTypes.Validator<string>;
-                    value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-                    selected: PropTypes.Requireable<boolean>;
-                    validOption: PropTypes.Requireable<boolean>;
-                }> | null | undefined)[]>;
-            }> | null | undefined)[]>;
-            modified: PropTypes.Requireable<boolean>;
-            error: PropTypes.Requireable<boolean>;
-            'aria-label': PropTypes.Requireable<string>;
-            'aria-labelledby': PropTypes.Requireable<string>;
-        }>>;
         const onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
         const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/certification-detail/index.js"],"names":[],"mappings":";AAkBA,4EA8GC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/certification-detail/index.js"],"names":[],"mappings":";AAiBA,4EAwGC"}