@coorpacademy/components 11.32.33-alpha.30 → 11.32.33-alpha.31.30

package/es/template/certifications/index.js

@@ -0,0 +1,91 @@
+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 } from 'react';
+import PropTypes from 'prop-types';
+import Provider from '../../atom/provider';
+import Title from '../../atom/title';
+import Select from '../../atom/select';
+import InputSwitch from '../../atom/input-switch';
+import CertificationCard from '../../molecule/certification-card';
+import style from './style.css';
+
+const Certifications = (props, context) => {
+  const {
+    certifications,
+    sorting
+  } = props;
+  const {
+    translate
+  } = context;
+  const [showCompleted, setShowCompleted] = useState(true);
+  const sortView = sorting !== undefined ? /*#__PURE__*/React.createElement("div", {
+    "data-name": "choice"
+  }, /*#__PURE__*/React.createElement(Select, _extends({}, sorting, {
+    "aria-label": "All courses sort"
+  }))) : null;
+  const handleShowCompletedToggle = useCallback(() => {
+    setShowCompleted(!showCompleted);
+  }, [showCompleted, setShowCompleted]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.container
+  }, /*#__PURE__*/React.createElement(Title, {
+    title: translate('certificates'),
+    subtitle: translate('certificates_subtitle'),
+    type: "form-group",
+    titleSize: "standard-light-weight",
+    subtitleSize: "standard-without-margin",
+    icon: {
+      iconName: 'wreath-laurel',
+      iconColor: '#B87A00',
+      borderRadius: '12px',
+      backgroundColor: '#FFEECC'
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: style.sortSectionWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.certificatesCount
+  }, `${certifications.length} ${translate('certificate(s)')}`), /*#__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'),
+    "aria-label": 'Show completed courses aria label',
+    value: showCompleted,
+    onChange: handleShowCompletedToggle
+  }), /*#__PURE__*/React.createElement("div", {
+    className: style.sortWrapper
+  }, translate('sort_by'), sortView))), /*#__PURE__*/React.createElement("div", {
+    className: style.certificateList
+  }, certifications.map(certification => {
+    if (!showCompleted && certification.progress === 100) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      key: certification.label
+    }, /*#__PURE__*/React.createElement(CertificationCard, certification));
+  })));
+};
+
+Certifications.contextTypes = {
+  translate: Provider.childContextTypes.translate
+};
+Certifications.propTypes = process.env.NODE_ENV !== "production" ? {
+  certifications: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    goal: PropTypes.shape({
+      title: PropTypes.string,
+      condition: PropTypes.shape({
+        nbDone: PropTypes.number
+      })
+    }),
+    progress: PropTypes.number,
+    imgUrl: PropTypes.string,
+    onClick: PropTypes.func
+  })),
+  sorting: PropTypes.shape(Select.propTypes)
+} : {};
+export default Certifications;
+//# sourceMappingURL=index.js.map

package/es/template/certifications/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useState","useCallback","PropTypes","Provider","Title","Select","InputSwitch","CertificationCard","style","Certifications","props","context","certifications","sorting","translate","showCompleted","setShowCompleted","sortView","undefined","handleShowCompletedToggle","container","iconName","iconColor","borderRadius","backgroundColor","sortSectionWrapper","certificatesCount","length","sortSection","sortWrapper","certificateList","map","certification","progress","label","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","goal","title","condition","nbDone","number","imgUrl","onClick","func"],"sources":["../../../src/template/certifications/index.js"],"sourcesContent":["import React, {useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport Provider from '../../atom/provider';\nimport Title from '../../atom/title';\nimport Select from '../../atom/select';\nimport InputSwitch from '../../atom/input-switch';\nimport CertificationCard from '../../molecule/certification-card';\nimport style from './style.css';\n\nconst Certifications = (props, context) => {\n  const {certifications, sorting} = props;\n  const {translate} = context;\n\n  const [showCompleted, setShowCompleted] = useState(true);\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 handleShowCompletedToggle = useCallback(() => {\n    setShowCompleted(!showCompleted);\n  }, [showCompleted, setShowCompleted]);\n\n  return (\n    <div className={style.container}>\n      <Title\n        title={translate('certificates')}\n        subtitle={translate('certificates_subtitle')}\n        type=\"form-group\"\n        titleSize=\"standard-light-weight\"\n        subtitleSize=\"standard-without-margin\"\n        icon={{\n          iconName: 'wreath-laurel',\n          iconColor: '#B87A00',\n          borderRadius: '12px',\n          backgroundColor: '#FFEECC'\n        }}\n      />\n      <div className={style.sortSectionWrapper}>\n        <div className={style.certificatesCount}>\n          {`${certifications.length} ${translate('certificate(s)')}`}\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.certificateList}>\n        {certifications.map(certification => {\n          if (!showCompleted && certification.progress === 100) {\n            return null;\n          }\n          return (\n            <div key={certification.label}>\n              <CertificationCard {...certification} />\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nCertifications.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nCertifications.propTypes = {\n  certifications: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      goal: PropTypes.shape({\n        title: PropTypes.string,\n        condition: PropTypes.shape({\n          nbDone: PropTypes.number\n        })\n      }),\n      progress: PropTypes.number,\n      imgUrl: PropTypes.string,\n      onClick: PropTypes.func\n    })\n  ),\n  sorting: PropTypes.shape(Select.propTypes)\n};\n\nexport default Certifications;\n"],"mappings":"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"}

package/es/template/certifications/style.css

@@ -0,0 +1,70 @@
+@value colors: "../../variables/colors.css";
+@value breakpoints: "../../variables/breakpoints.css";
+@value tablet from breakpoints;
+@value mobile from breakpoints;
+@value xtraLightGrey from colors;
+@value cm_grey_100 from colors;
+@value cm_grey_200 from colors;
+@value cm_grey_400 from colors;
+@value cm_grey_500 from colors;
+
+.container {
+  font-family: "Gilroy";
+  font-style: normal;
+  max-width: 1080px;
+  margin: auto;
+}
+
+.sortSection {
+  display: flex;
+  margin: 16px 0;
+  justify-content: space-between;
+}
+
+.certificatesCount {
+  color: cm_grey_500;
+}
+
+.sortSectionWrapper {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-top: 4px;
+}
+
+.sortSection {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 32px;
+  align-items: center;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+}
+
+.sortWrapper {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: cm_grey_500;
+}
+
+.certificateList {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+@media mobile {
+  .sortSectionWrapper {
+    flex-direction: column-reverse;
+    margin-bottom: 16px;
+    align-items: normal;
+  }
+
+  .sortSection {
+    gap: 16px;
+  }
+  
+}

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

@@ -96,7 +96,7 @@ const AllCourses = (props, context) => {
       setSearchResults(list);
       handleSearchReset();
     } else {
-      setSearchResults(searchResults.filter(skill => skill.progress === 0));
+      setSearchResults(searchResults.filter(skill => skill.progress < 100));
     }
   }, [list, searchResults, showCompleted, setShowCompleted, setSearchResults, handleSearchReset]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {

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 === 0));\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","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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"}

package/lib/atom/title/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/title/index.js"],"names":[],"mappings":";AAwCA,gDA4BC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/title/index.js"],"names":[],"mappings":";AA4CA,gDA4BC"}

package/lib/atom/title/index.js

@@ -24,6 +24,9 @@ const getTitleStyle = (type, size) => {
 
     case 'form-group':
       switch (size) {
+        case 'standard-light-weight':
+          return _style.default.titleFormGroupLightWeight;
+
         case 'standard':
           return _style.default.titleFormGroup;
 
@@ -47,6 +50,9 @@ const getSubtitleStyle = (type, size) => {
         case 'standard':
           return _style.default.subtitleFormGroup;
 
+        case 'standard-without-margin':
+          return _style.default.subtitleFormGroupWithoutMargin;
+
         case 'small':
           return _style.default.smallSubtitleFormGroup;
 

package/lib/atom/title/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getTitleStyle","type","size","style","titlePage","titleFormGroup","mediumTitleFormGroup","smallTitleFormGroup","getSubtitleStyle","subtitlePage","subtitleFormGroup","smallSubtitleFormGroup","smallSubtitleFormGroupWithoutMargin","extraSmallSubtitleFormGroup","Title","props","title","subtitle","dataName","titleSize","subtitleSize","icon","tag","titleStyle","subtitleStyle","subtitleSection","container","propTypes","PropTypes","string","oneOf","shape","Icon","Tag"],"sources":["../../../src/atom/title/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '../icon';\nimport Tag from '../tag';\nimport style from './style.css';\n\nconst getTitleStyle = (type, size) => {\n  switch (type) {\n    case 'page':\n      return style.titlePage;\n    case 'form-group':\n      switch (size) {\n        case 'standard':\n          return style.titleFormGroup;\n        case 'medium':\n          return style.mediumTitleFormGroup;\n        case 'small':\n          return style.smallTitleFormGroup;\n      }\n  }\n};\n\nconst getSubtitleStyle = (type, size) => {\n  switch (type) {\n    case 'page':\n      return style.subtitlePage;\n    case 'form-group':\n      switch (size) {\n        case 'standard':\n          return style.subtitleFormGroup;\n        case 'small':\n          return style.smallSubtitleFormGroup;\n        case 'small-without-margin':\n          return style.smallSubtitleFormGroupWithoutMargin;\n        case 'extra-small':\n          return style.extraSmallSubtitleFormGroup;\n      }\n  }\n};\n\nconst Title = props => {\n  const {\n    title,\n    subtitle,\n    type,\n    'data-name': dataName,\n    titleSize = 'standard',\n    subtitleSize = 'standard',\n    icon,\n    tag\n  } = props;\n  const titleStyle = getTitleStyle(type, titleSize);\n  const subtitleStyle = getSubtitleStyle(type, subtitleSize);\n\n  const subtitleSection = subtitle ? <div className={subtitleStyle}>{subtitle}</div> : null;\n\n  return (\n    <div className={style.container}>\n      {icon ? <Icon {...icon} className={style.icon} /> : null}\n      <div>\n        <div className={titleStyle} data-name={dataName}>\n          {title}\n          {tag ? <Tag {...tag} /> : null}\n        </div>\n        {subtitleSection}\n      </div>\n    </div>\n  );\n};\n\nTitle.propTypes = {\n  title: PropTypes.string,\n  subtitle: PropTypes.string,\n  type: PropTypes.oneOf(['page', 'form-group']),\n  'data-name': PropTypes.string,\n  titleSize: PropTypes.oneOf(['standard', 'medium', 'small']),\n  subtitleSize: PropTypes.oneOf(['standard', 'small', 'small-without-margin', 'extra-small']),\n  icon: PropTypes.shape(Icon.propTypes),\n  tag: PropTypes.shape(Tag.propTypes)\n};\nexport default Title;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,aAAa,GAAG,CAACC,IAAD,EAAOC,IAAP,KAAgB;EACpC,QAAQD,IAAR;IACE,KAAK,MAAL;MACE,OAAOE,cAAA,CAAMC,SAAb;;IACF,KAAK,YAAL;MACE,QAAQF,IAAR;QACE,KAAK,UAAL;UACE,OAAOC,cAAA,CAAME,cAAb;;QACF,KAAK,QAAL;UACE,OAAOF,cAAA,CAAMG,oBAAb;;QACF,KAAK,OAAL;UACE,OAAOH,cAAA,CAAMI,mBAAb;MANJ;;EAJJ;AAaD,CAdD;;AAgBA,MAAMC,gBAAgB,GAAG,CAACP,IAAD,EAAOC,IAAP,KAAgB;EACvC,QAAQD,IAAR;IACE,KAAK,MAAL;MACE,OAAOE,cAAA,CAAMM,YAAb;;IACF,KAAK,YAAL;MACE,QAAQP,IAAR;QACE,KAAK,UAAL;UACE,OAAOC,cAAA,CAAMO,iBAAb;;QACF,KAAK,OAAL;UACE,OAAOP,cAAA,CAAMQ,sBAAb;;QACF,KAAK,sBAAL;UACE,OAAOR,cAAA,CAAMS,mCAAb;;QACF,KAAK,aAAL;UACE,OAAOT,cAAA,CAAMU,2BAAb;MARJ;;EAJJ;AAeD,CAhBD;;AAkBA,MAAMC,KAAK,GAAGC,KAAK,IAAI;EACrB,MAAM;IACJC,KADI;IAEJC,QAFI;IAGJhB,IAHI;IAIJ,aAAaiB,QAJT;IAKJC,SAAS,GAAG,UALR;IAMJC,YAAY,GAAG,UANX;IAOJC,IAPI;IAQJC;EARI,IASFP,KATJ;EAUA,MAAMQ,UAAU,GAAGvB,aAAa,CAACC,IAAD,EAAOkB,SAAP,CAAhC;EACA,MAAMK,aAAa,GAAGhB,gBAAgB,CAACP,IAAD,EAAOmB,YAAP,CAAtC;EAEA,MAAMK,eAAe,GAAGR,QAAQ,gBAAG;IAAK,SAAS,EAAEO;EAAhB,GAAgCP,QAAhC,CAAH,GAAqD,IAArF;EAEA,oBACE;IAAK,SAAS,EAAEd,cAAA,CAAMuB;EAAtB,GACGL,IAAI,gBAAG,6BAAC,aAAD,eAAUA,IAAV;IAAgB,SAAS,EAAElB,cAAA,CAAMkB;EAAjC,GAAH,GAA+C,IADtD,eAEE,uDACE;IAAK,SAAS,EAAEE,UAAhB;IAA4B,aAAWL;EAAvC,GACGF,KADH,EAEGM,GAAG,gBAAG,6BAAC,YAAD,EAASA,GAAT,CAAH,GAAsB,IAF5B,CADF,EAKGG,eALH,CAFF,CADF;AAYD,CA5BD;;AA8BAX,KAAK,CAACa,SAAN,2CAAkB;EAChBX,KAAK,EAAEY,kBAAA,CAAUC,MADD;EAEhBZ,QAAQ,EAAEW,kBAAA,CAAUC,MAFJ;EAGhB5B,IAAI,EAAE2B,kBAAA,CAAUE,KAAV,CAAgB,CAAC,MAAD,EAAS,YAAT,CAAhB,CAHU;EAIhB,aAAaF,kBAAA,CAAUC,MAJP;EAKhBV,SAAS,EAAES,kBAAA,CAAUE,KAAV,CAAgB,CAAC,UAAD,EAAa,QAAb,EAAuB,OAAvB,CAAhB,CALK;EAMhBV,YAAY,EAAEQ,kBAAA,CAAUE,KAAV,CAAgB,CAAC,UAAD,EAAa,OAAb,EAAsB,sBAAtB,EAA8C,aAA9C,CAAhB,CANE;EAOhBT,IAAI,EAAEO,kBAAA,CAAUG,KAAV,CAAgBC,aAAA,CAAKL,SAArB,CAPU;EAQhBL,GAAG,EAAEM,kBAAA,CAAUG,KAAV,CAAgBE,YAAA,CAAIN,SAApB;AARW,CAAlB;eAUeb,K"}
+{"version":3,"file":"index.js","names":["getTitleStyle","type","size","style","titlePage","titleFormGroupLightWeight","titleFormGroup","mediumTitleFormGroup","smallTitleFormGroup","getSubtitleStyle","subtitlePage","subtitleFormGroup","subtitleFormGroupWithoutMargin","smallSubtitleFormGroup","smallSubtitleFormGroupWithoutMargin","extraSmallSubtitleFormGroup","Title","props","title","subtitle","dataName","titleSize","subtitleSize","icon","tag","titleStyle","subtitleStyle","subtitleSection","container","propTypes","PropTypes","string","oneOf","shape","Icon","Tag"],"sources":["../../../src/atom/title/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '../icon';\nimport Tag from '../tag';\nimport style from './style.css';\n\nconst getTitleStyle = (type, size) => {\n  switch (type) {\n    case 'page':\n      return style.titlePage;\n    case 'form-group':\n      switch (size) {\n        case 'standard-light-weight':\n          return style.titleFormGroupLightWeight;\n        case 'standard':\n          return style.titleFormGroup;\n        case 'medium':\n          return style.mediumTitleFormGroup;\n        case 'small':\n          return style.smallTitleFormGroup;\n      }\n  }\n};\n\nconst getSubtitleStyle = (type, size) => {\n  switch (type) {\n    case 'page':\n      return style.subtitlePage;\n    case 'form-group':\n      switch (size) {\n        case 'standard':\n          return style.subtitleFormGroup;\n        case 'standard-without-margin':\n          return style.subtitleFormGroupWithoutMargin;\n        case 'small':\n          return style.smallSubtitleFormGroup;\n        case 'small-without-margin':\n          return style.smallSubtitleFormGroupWithoutMargin;\n        case 'extra-small':\n          return style.extraSmallSubtitleFormGroup;\n      }\n  }\n};\n\nconst Title = props => {\n  const {\n    title,\n    subtitle,\n    type,\n    'data-name': dataName,\n    titleSize = 'standard',\n    subtitleSize = 'standard',\n    icon,\n    tag\n  } = props;\n  const titleStyle = getTitleStyle(type, titleSize);\n  const subtitleStyle = getSubtitleStyle(type, subtitleSize);\n\n  const subtitleSection = subtitle ? <div className={subtitleStyle}>{subtitle}</div> : null;\n\n  return (\n    <div className={style.container}>\n      {icon ? <Icon {...icon} className={style.icon} /> : null}\n      <div>\n        <div className={titleStyle} data-name={dataName}>\n          {title}\n          {tag ? <Tag {...tag} /> : null}\n        </div>\n        {subtitleSection}\n      </div>\n    </div>\n  );\n};\n\nTitle.propTypes = {\n  title: PropTypes.string,\n  subtitle: PropTypes.string,\n  type: PropTypes.oneOf(['page', 'form-group']),\n  'data-name': PropTypes.string,\n  titleSize: PropTypes.oneOf(['standard', 'medium', 'small']),\n  subtitleSize: PropTypes.oneOf(['standard', 'small', 'small-without-margin', 'extra-small']),\n  icon: PropTypes.shape(Icon.propTypes),\n  tag: PropTypes.shape(Tag.propTypes)\n};\nexport default Title;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,aAAa,GAAG,CAACC,IAAD,EAAOC,IAAP,KAAgB;EACpC,QAAQD,IAAR;IACE,KAAK,MAAL;MACE,OAAOE,cAAA,CAAMC,SAAb;;IACF,KAAK,YAAL;MACE,QAAQF,IAAR;QACE,KAAK,uBAAL;UACE,OAAOC,cAAA,CAAME,yBAAb;;QACF,KAAK,UAAL;UACE,OAAOF,cAAA,CAAMG,cAAb;;QACF,KAAK,QAAL;UACE,OAAOH,cAAA,CAAMI,oBAAb;;QACF,KAAK,OAAL;UACE,OAAOJ,cAAA,CAAMK,mBAAb;MARJ;;EAJJ;AAeD,CAhBD;;AAkBA,MAAMC,gBAAgB,GAAG,CAACR,IAAD,EAAOC,IAAP,KAAgB;EACvC,QAAQD,IAAR;IACE,KAAK,MAAL;MACE,OAAOE,cAAA,CAAMO,YAAb;;IACF,KAAK,YAAL;MACE,QAAQR,IAAR;QACE,KAAK,UAAL;UACE,OAAOC,cAAA,CAAMQ,iBAAb;;QACF,KAAK,yBAAL;UACE,OAAOR,cAAA,CAAMS,8BAAb;;QACF,KAAK,OAAL;UACE,OAAOT,cAAA,CAAMU,sBAAb;;QACF,KAAK,sBAAL;UACE,OAAOV,cAAA,CAAMW,mCAAb;;QACF,KAAK,aAAL;UACE,OAAOX,cAAA,CAAMY,2BAAb;MAVJ;;EAJJ;AAiBD,CAlBD;;AAoBA,MAAMC,KAAK,GAAGC,KAAK,IAAI;EACrB,MAAM;IACJC,KADI;IAEJC,QAFI;IAGJlB,IAHI;IAIJ,aAAamB,QAJT;IAKJC,SAAS,GAAG,UALR;IAMJC,YAAY,GAAG,UANX;IAOJC,IAPI;IAQJC;EARI,IASFP,KATJ;EAUA,MAAMQ,UAAU,GAAGzB,aAAa,CAACC,IAAD,EAAOoB,SAAP,CAAhC;EACA,MAAMK,aAAa,GAAGjB,gBAAgB,CAACR,IAAD,EAAOqB,YAAP,CAAtC;EAEA,MAAMK,eAAe,GAAGR,QAAQ,gBAAG;IAAK,SAAS,EAAEO;EAAhB,GAAgCP,QAAhC,CAAH,GAAqD,IAArF;EAEA,oBACE;IAAK,SAAS,EAAEhB,cAAA,CAAMyB;EAAtB,GACGL,IAAI,gBAAG,6BAAC,aAAD,eAAUA,IAAV;IAAgB,SAAS,EAAEpB,cAAA,CAAMoB;EAAjC,GAAH,GAA+C,IADtD,eAEE,uDACE;IAAK,SAAS,EAAEE,UAAhB;IAA4B,aAAWL;EAAvC,GACGF,KADH,EAEGM,GAAG,gBAAG,6BAAC,YAAD,EAASA,GAAT,CAAH,GAAsB,IAF5B,CADF,EAKGG,eALH,CAFF,CADF;AAYD,CA5BD;;AA8BAX,KAAK,CAACa,SAAN,2CAAkB;EAChBX,KAAK,EAAEY,kBAAA,CAAUC,MADD;EAEhBZ,QAAQ,EAAEW,kBAAA,CAAUC,MAFJ;EAGhB9B,IAAI,EAAE6B,kBAAA,CAAUE,KAAV,CAAgB,CAAC,MAAD,EAAS,YAAT,CAAhB,CAHU;EAIhB,aAAaF,kBAAA,CAAUC,MAJP;EAKhBV,SAAS,EAAES,kBAAA,CAAUE,KAAV,CAAgB,CAAC,UAAD,EAAa,QAAb,EAAuB,OAAvB,CAAhB,CALK;EAMhBV,YAAY,EAAEQ,kBAAA,CAAUE,KAAV,CAAgB,CAAC,UAAD,EAAa,OAAb,EAAsB,sBAAtB,EAA8C,aAA9C,CAAhB,CANE;EAOhBT,IAAI,EAAEO,kBAAA,CAAUG,KAAV,CAAgBC,aAAA,CAAKL,SAArB,CAPU;EAQhBL,GAAG,EAAEM,kBAAA,CAAUG,KAAV,CAAgBE,YAAA,CAAIN,SAApB;AARW,CAAlB;eAUeb,K"}

package/lib/atom/title/style.css

@@ -28,6 +28,11 @@
     gap: 4px;
 }
 
+.titleFormGroupLightWeight {
+    composes: titleFormGroup;
+    font-weight: 600;
+}
+
 .mediumTitleFormGroup {
     composes: title;
     font-size: 16px;
@@ -64,6 +69,12 @@
     color: cm_grey_400;
 }
 
+.subtitleFormGroupWithoutMargin {
+    composes: subtitleFormGroup;
+    font-weight: 500;
+    margin: 0;
+}
+
 .smallSubtitleFormGroup{
     composes: subtitleFormGroup;
     max-width: 455px;

package/lib/molecule/certification-card/index.d.ts

@@ -0,0 +1,21 @@
+export default CertificationCard;
+declare function CertificationCard(props: any, context: any): JSX.Element;
+declare namespace CertificationCard {
+    namespace contextTypes {
+        const translate: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+    namespace propTypes {
+        const label: PropTypes.Requireable<string>;
+        const goal: PropTypes.Requireable<PropTypes.InferProps<{
+            title: PropTypes.Requireable<string>;
+            condition: PropTypes.Requireable<PropTypes.InferProps<{
+                nbDone: PropTypes.Requireable<number>;
+            }>>;
+        }>>;
+        const progress: PropTypes.Requireable<number>;
+        const imgUrl: PropTypes.Requireable<string>;
+        const onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=index.d.ts.map

package/lib/molecule/certification-card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/certification-card/index.js"],"names":[],"mappings":";AAQA,0EAsDC"}

package/lib/molecule/certification-card/index.js

@@ -0,0 +1,113 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _colors = require("../../variables/colors");
+
+var _provider = _interopRequireDefault(require("../../atom/provider"));
+
+var _tag = _interopRequireDefault(require("../../atom/tag"));
+
+var _progressBar = _interopRequireDefault(require("../progress-bar"));
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const CertificationCard = (props, context) => {
+  const {
+    label,
+    goal,
+    progress,
+    imgUrl,
+    onClick
+  } = props;
+  const {
+    title,
+    condition: {
+      nbDone
+    }
+  } = goal;
+  const {
+    translate
+  } = context;
+  const isInprogress = progress < 100;
+  const progressLabel = isInprogress ? translate('in_progress') : translate('completed');
+  const progressTagType = isInprogress ? 'progress' : 'success';
+  const progressIconProps = {
+    position: 'left',
+    iconName: isInprogress ? 'clock' : 'circle-check',
+    iconColor: isInprogress ? '#B87A00' : '#05944F',
+    backgroundColor: isInprogress ? '#FFEECC' : '#D6F5E5',
+    size: {
+      faSize: 10,
+      wrapperSize: 10
+    },
+    customStyle: {
+      padding: 0
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.container,
+    "data-name": `certification-card-${label}`,
+    onClick: onClick
+  }, progress > 0 ? /*#__PURE__*/_react.default.createElement(_tag.default, {
+    label: progressLabel,
+    type: progressTagType,
+    customStyle: {
+      position: 'absolute',
+      top: '12px',
+      right: '12px'
+    },
+    icon: progressIconProps
+  }) : null, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.imageWrapper
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: imgUrl,
+    width: "104",
+    height: "104"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.detailWrapper
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.titleWrapper
+  }, /*#__PURE__*/_react.default.createElement(_tag.default, {
+    label: translate('certification'),
+    size: "S"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.title
+  }, title), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.moduleCount
+  }, /*#__PURE__*/_react.default.createElement("span", null, nbDone), ` ${translate('certification_module')}`)), /*#__PURE__*/_react.default.createElement(_progressBar.default, {
+    className: _style.default.customProgressBar,
+    style: {
+      backgroundColor: _colors.COLORS.positive
+    },
+    displayInfo: false,
+    value: progress,
+    max: 100
+  })));
+};
+
+CertificationCard.contextTypes = {
+  translate: _provider.default.childContextTypes.translate
+};
+CertificationCard.propTypes = process.env.NODE_ENV !== "production" ? {
+  label: _propTypes.default.string,
+  goal: _propTypes.default.shape({
+    title: _propTypes.default.string,
+    condition: _propTypes.default.shape({
+      nbDone: _propTypes.default.number
+    })
+  }),
+  progress: _propTypes.default.number,
+  imgUrl: _propTypes.default.string,
+  onClick: _propTypes.default.func
+} : {};
+var _default = CertificationCard;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/molecule/certification-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["CertificationCard","props","context","label","goal","progress","imgUrl","onClick","title","condition","nbDone","translate","isInprogress","progressLabel","progressTagType","progressIconProps","position","iconName","iconColor","backgroundColor","size","faSize","wrapperSize","customStyle","padding","style","container","top","right","imageWrapper","detailWrapper","titleWrapper","moduleCount","customProgressBar","COLORS","positive","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","shape","number","func"],"sources":["../../../src/molecule/certification-card/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {COLORS} from '../../variables/colors';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport ProgressBar from '../progress-bar';\nimport style from './style.css';\n\nconst CertificationCard = (props, context) => {\n  const {label, goal, progress, imgUrl, onClick} = props;\n  const {\n    title,\n    condition: {nbDone}\n  } = goal;\n  const {translate} = context;\n\n  const isInprogress = progress < 100;\n  const progressLabel = isInprogress ? translate('in_progress') : translate('completed');\n  const progressTagType = isInprogress ? 'progress' : 'success';\n  const progressIconProps = {\n    position: 'left',\n    iconName: isInprogress ? 'clock' : 'circle-check',\n    iconColor: isInprogress ? '#B87A00' : '#05944F',\n    backgroundColor: isInprogress ? '#FFEECC' : '#D6F5E5',\n    size: {\n      faSize: 10,\n      wrapperSize: 10\n    },\n    customStyle: {padding: 0}\n  };\n  return (\n    <div className={style.container} data-name={`certification-card-${label}`} onClick={onClick}>\n      {progress > 0 ? (\n        <Tag\n          label={progressLabel}\n          type={progressTagType}\n          customStyle={{position: 'absolute', top: '12px', right: '12px'}}\n          icon={progressIconProps}\n        />\n      ) : null}\n      <div className={style.imageWrapper}>\n        <img src={imgUrl} width=\"104\" height=\"104\" />\n      </div>\n      <div className={style.detailWrapper}>\n        <div className={style.titleWrapper}>\n          <Tag label={translate('certification')} size=\"S\" />\n          <div className={style.title}>{title}</div>\n          <div className={style.moduleCount}>\n            <span>{nbDone}</span>\n            {` ${translate('certification_module')}`}\n          </div>\n        </div>\n        <ProgressBar\n          className={style.customProgressBar}\n          style={{backgroundColor: COLORS.positive}}\n          displayInfo={false}\n          value={progress}\n          max={100}\n        />\n      </div>\n    </div>\n  );\n};\n\nCertificationCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nCertificationCard.propTypes = {\n  label: PropTypes.string,\n  goal: PropTypes.shape({\n    title: PropTypes.string,\n    condition: PropTypes.shape({\n      nbDone: PropTypes.number\n    })\n  }),\n  progress: PropTypes.number,\n  imgUrl: PropTypes.string,\n  onClick: PropTypes.func\n};\n\nexport default CertificationCard;\n"],"mappings":"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"}

package/lib/molecule/certification-card/style.css

@@ -0,0 +1,72 @@
+@value colors: "../../variables/colors.css";
+@value xtraLightGrey from colors;
+@value cm_grey_100 from colors;
+@value cm_grey_400 from colors;
+@value cm_grey_500 from colors;
+
+.container {
+  font-family: "Gilroy";
+  font-style: normal;
+  border-radius: 12px;
+  width: 345px;
+  height: 309px;
+  min-width: 288px;
+  background-color: #FFF;
+  border: 2px solid #FFF;
+  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.10);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+}
+
+.imageWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: xtraLightGrey;
+  height: 160px;
+  width: auto;
+
+  img {
+    min-width: 100px;
+  }
+}
+
+.detailWrapper {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  flex-grow: 1;
+}
+
+.titleWrapper {
+  width: 100%;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 22px;
+  margin-top: 4px;
+}
+
+.moduleCount {
+  margin-top: 4px;
+  color: cm_grey_400;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+
+  span {
+    color: cm_grey_500;
+  }
+}
+
+.customProgressBar {
+  width: 269px;
+  height: 4px;
+  background-color: cm_grey_100;
+}

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

@@ -19,7 +19,8 @@ declare namespace ProgressWrapper {
         const progression: PropTypes.Requireable<number>;
         const sections: PropTypes.Requireable<(PropTypes.InferProps<{
             type: PropTypes.Requireable<string>;
-            downloadUrl: PropTypes.Requireable<string>;
+            badgeUrl: PropTypes.Requireable<string>;
+            onDownload: PropTypes.Requireable<(...args: any[]) => any>;
             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":";AA6FA;;;;;;;8BA8DC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/progress-wrapper/index.js"],"names":[],"mappings":";AAyFA;;;;;;;8BA8DC"}

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

@@ -41,7 +41,8 @@ const DetailSection = ({
   index,
   type,
   isLocked,
-  downloadUrl,
+  badgeUrl,
+  onDownload,
   stars
 }, context) => {
   const {
@@ -51,10 +52,7 @@ const DetailSection = ({
 
   const DownloadButton = /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
     label: translate('download'),
-    link: {
-      target: '_blank',
-      href: downloadUrl
-    },
+    onClick: onDownload,
     "data-name": "download-button",
     "aria-label": "download button",
     customStyle: {
@@ -108,7 +106,7 @@ const DetailSection = ({
     className: _style.default[`detailsSection${index}`]
   }, /*#__PURE__*/_react.default.createElement("img", {
     className: _style.default.img,
-    src: type === 'badge' ? downloadUrl : 'https://s3.eu-west-1.amazonaws.com/static.coorpacademy.com/assets/images/diploma.svg'
+    src: badgeUrl || '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", {
@@ -181,11 +179,13 @@ const ProgressWrapper = ({
   }, uncappedMap(({
     type,
     stars,
-    downloadUrl
+    badgeUrl,
+    onDownload
   }, index) => /*#__PURE__*/_react.default.createElement(DetailSection, {
     type,
     isLocked,
-    downloadUrl,
+    badgeUrl,
+    onDownload,
     stars,
     key: `${type}-${index}`,
     index: index
@@ -194,7 +194,8 @@ const ProgressWrapper = ({
 
 const commonDetailSectionPropTypes = process.env.NODE_ENV !== "production" ? {
   type: _propTypes.default.oneOf(['diploma', 'badge', 'stars']),
-  downloadUrl: _propTypes.default.string,
+  badgeUrl: _propTypes.default.string,
+  onDownload: _propTypes.default.func,
   stars: _propTypes.default.number
 } : {};
 DetailSection.contextTypes = {