@coorpacademy/components 11.32.30 → 11.32.31-alpha.16

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["DESCRIPTION_BREAKPOINT","CertificationDetail","props","context","certificationRef","title","description","certificationCourses","ongoingCourses","totalCourses","totalModules","filters","sorting","onBackClick","onContinueLearningClick","metrics","logo","onDownloadDiploma","badge","translate","progression","completedCourses","completedModules","stars","badgeUrl","onDownloadBadge","showMore","setShowMore","useState","handleShowMore","useCallback","Description","classnames","style","truncate","backgroundContainer","container","backButton","ctaContainer","logoContainer","length","showMoreWrapper","faSize","wrapperSize","contentStats","divider","list","continueLearningSection","type","onDownload","contextTypes","skin","Provider","childContextTypes","propTypes","PropTypes","string","isRequired","shape","number","func","CardsGrid","onChange","options","arrayOf","SelectOptionPropTypes","Select"],"sources":["../../../src/template/certification-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {compact, lowerCase} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport AllCourses from '../skill-detail/all-courses';\nimport ContinueLearning from '../skill-detail/continue-learning';\nimport {ContinueLearningButton} from '../skill-detail';\nimport ProgressWrapper from '../../molecule/progress-wrapper';\nimport style from './style.css';\n\nconst DESCRIPTION_BREAKPOINT = 382;\n\nconst CertificationDetail = (props, context) => {\n  const {\n    certificationRef,\n    title,\n    description,\n    certificationCourses,\n    ongoingCourses,\n    totalCourses,\n    totalModules,\n    filters,\n    sorting,\n    onBackClick,\n    onContinueLearningClick,\n    metrics,\n    logo,\n    onDownloadDiploma,\n    badge = {}\n  } = props;\n  const {translate} = context;\n  const {progression, completedCourses, completedModules, stars} = metrics;\n  const {badgeUrl = false, onDownloadBadge} = badge;\n\n  const [showMore, setShowMore] = useState(false);\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        {description}\n      </div>\n    );\n  }, [showMore, description]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={certificationRef}>\n        <ButtonLinkIcon\n          faIcon=\"arrow-left\"\n          data-name=\"back-button\"\n          aria-label=\"Back\"\n          onClick={onBackClick}\n          className={style.backButton}\n          tooltipPlacement=\"right\"\n        />\n        <div className={style.ctaContainer}>\n          <div className={style.logoContainer}>\n            {logo ? <div className={style.logo}>logo</div> : null}\n          </div>\n          <div>\n            <Tag label={translate('certification')} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {description.length >= DESCRIPTION_BREAKPOINT ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {translate(showMore ? 'Show less' : 'Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{faSize: 14, wrapperSize: 16}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n            <div className={style.contentStats}>\n              <span>{`${totalCourses} ${lowerCase(translate('courses'))}`}</span>\n              <div className={style.divider} />\n              <span>{`${totalModules} ${lowerCase(translate('modules'))}`}</span>\n            </div>\n            <ContinueLearningButton\n              ongoingCoursesAvailable={!!ongoingCourses.list.length}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        <div className={style.continueLearningSection}>\n          <ContinueLearning ongoingCourses={ongoingCourses} />\n        </div>\n        <ProgressWrapper\n          title={translate('your_progress')}\n          subtitle={translate('certification_progress_wrapper_subtitle')}\n          progression={progression}\n          completedCourses={completedCourses}\n          completedModules={completedModules}\n          sections={compact([\n            {\n              type: 'diploma',\n              onDownload: () => onDownloadDiploma\n            },\n            badgeUrl && {\n              type: 'badge',\n              badgeUrl,\n              onDownload: () => onDownloadBadge\n            },\n            {\n              type: 'stars',\n              stars\n            }\n          ])}\n        />\n        <AllCourses\n          courses={certificationCourses}\n          totalCourses={totalCourses}\n          filters={filters}\n          sorting={sorting}\n        />\n      </div>\n    </div>\n  );\n};\n\nCertificationDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nCertificationDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  certificationRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  logo: PropTypes.string,\n  metrics: PropTypes.shape({\n    progression: PropTypes.number,\n    stars: PropTypes.number,\n    completedCourses: PropTypes.number,\n    completedModules: PropTypes.number\n  }),\n  onDownloadDiploma: PropTypes.func,\n  badge: PropTypes.shape({\n    badgeUrl: PropTypes.string,\n    onDownloadBadge: PropTypes.func\n  }),\n  ongoingCourses: PropTypes.shape(CardsGrid.propTypes),\n  certificationCourses: PropTypes.shape(CardsGrid.propTypes),\n  totalCourses: PropTypes.number,\n  totalModules: 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  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default CertificationDetail;\n"],"mappings":"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"}

package/lib/template/certification-detail/style.css

@@ -0,0 +1,130 @@
+@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_50 from colors;
+@value cm_grey_100 from colors;
+@value cm_grey_200 from colors;
+@value cm_grey_400 from colors;
+
+.divider {
+  width: 4px;
+  height: 4px;
+  background-color: cm_grey_400;
+  border: solid cm_grey_400 1px;
+  border-radius: 4px;
+}
+
+.textBase {
+  font-family: "Gilroy";
+  font-style: normal;
+}
+
+.backgroundContainer {
+  background-color: white;
+  min-height: 100%;
+  width: 100%;
+}
+
+.container {
+  composes: textBase;
+  background-color: white;
+  font-family: "Gilroy";
+  font-style: normal;
+  margin-top: 48px;
+  margin-bottom: 48px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0 16px;
+  position: relative;
+  box-sizing: border-box;
+  min-height: 100%;
+  width: 100%;
+  max-width: calc(1080px + 40px);
+}
+
+.backButton {
+  margin-bottom: 16px;
+}
+
+.ctaContainer {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 40px;
+}
+
+.logoContainer {
+  height: 300px;
+  width: 450px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: cm_grey_50;
+  border-radius: 16px;
+}
+
+.logo {
+  width: 191px;
+  height: 191px;
+}
+
+.showMoreWrapper {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-top: 8px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.title {
+  margin-top: 8px;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 32px;
+}
+
+.description {
+  margin-top: 8px;
+  max-width: 620px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: cm_grey_400;
+}
+
+.truncate {
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.contentStats {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 24px 0;
+  font-weight: 600;
+  color: cm_grey_400;
+}
+
+.continueLearningSection {
+  padding: 24px 0 32px 0;
+}
+
+@media tablet {
+  .ctaContainer {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+@media mobile {
+  .logoContainer {
+    width: 100%;
+  }
+}

package/lib/template/common/dashboard/index.d.ts

@@ -25,8 +25,9 @@ declare namespace Dashboard {
                         type: PropTypes.Requireable<string>;
                         size: PropTypes.Requireable<string>;
                         customStyle: PropTypes.Requireable<{
-                            [x: string]: string | null | undefined;
+                            [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                         }>;
+                        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
                     }>>;
                 }>>;
                 headerIcon: PropTypes.Requireable<string>;
@@ -321,8 +322,9 @@ declare namespace Dashboard {
                         type: PropTypes.Requireable<string>;
                         size: PropTypes.Requireable<string>;
                         customStyle: PropTypes.Requireable<{
-                            [x: string]: string | null | undefined;
+                            [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                         }>;
+                        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
                     }>>;
                 }>>;
                 headerIcon: PropTypes.Requireable<string>;

package/lib/template/common/search-page/index.d.ts

@@ -206,8 +206,9 @@ declare namespace SearchPage {
                         type: PropTypes.Requireable<string>;
                         size: PropTypes.Requireable<string>;
                         customStyle: PropTypes.Requireable<{
-                            [x: string]: string | null | undefined;
+                            [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                         }>;
+                        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
                     }>>;
                 }>>;
                 headerIcon: PropTypes.Requireable<string>;

package/lib/template/external-course/index.d.ts

@@ -43,8 +43,9 @@ declare namespace ExternalCourse {
                         type: PropTypes.Requireable<string>;
                         size: PropTypes.Requireable<string>;
                         customStyle: PropTypes.Requireable<{
-                            [x: string]: string | null | undefined;
+                            [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                         }>;
+                        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
                     }>>;
                 }>>;
                 headerIcon: PropTypes.Requireable<string>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/playlist-detail/index.js"],"names":[],"mappings":";AAiBA,uEA8EC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/playlist-detail/index.js"],"names":[],"mappings":";AAiBA,uEAgFC"}

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

@@ -99,9 +99,11 @@ const PlaylistDetail = (props, context) => {
   }, /*#__PURE__*/_react.default.createElement(_skillDetail.ContinueLearningButton, {
     ongoingCoursesAvailable: !!ongoingCourses.list.length,
     onClick: onContinueLearningClick
-  })))), /*#__PURE__*/_react.default.createElement(_continueLearning.default, {
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.continueLearningSection
+  }, /*#__PURE__*/_react.default.createElement(_continueLearning.default, {
     ongoingCourses: ongoingCourses
-  }), /*#__PURE__*/_react.default.createElement(_allCourses.default, {
+  })), /*#__PURE__*/_react.default.createElement(_allCourses.default, {
     courses: playlistCourses,
     totalCourses: totalCourses,
     filters: filters,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DESCRIPTION_BREAKPOINT","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCourses","playlistCourses","totalCourses","filters","sorting","onBackClick","onContinueLearningClick","translate","showMore","setShowMore","useState","handleShowMore","useCallback","Description","classnames","style","truncate","backgroundContainer","container","backButton","ctaContainer","coverWrapper","length","showMoreWrapper","faSize","wrapperSize","continueLearningButton","list","contextTypes","skin","Provider","childContextTypes","propTypes","PropTypes","string","isRequired","PlaylistDetailCover","images","shape","CardsGrid","number","onChange","func","options","arrayOf","SelectOptionPropTypes","Select"],"sources":["../../../src/template/playlist-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport AllCourses from '../skill-detail/all-courses';\nimport ContinueLearning from '../skill-detail/continue-learning';\nimport PlaylistDetailCover from '../../molecule/playlist-detail-cover';\nimport {ContinueLearningButton} from '../skill-detail';\nimport style from './style.css';\n\nconst DESCRIPTION_BREAKPOINT = 382;\n\nconst PlaylistDetail = (props, context) => {\n  const {\n    title,\n    coverImages,\n    playlistRef,\n    description,\n    ongoingCourses,\n    playlistCourses,\n    totalCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onContinueLearningClick\n  } = props;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        {description}\n      </div>\n    );\n  }, [showMore, description]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={playlistRef}>\n        <ButtonLinkIcon\n          faIcon=\"arrow-left\"\n          data-name=\"back-button\"\n          aria-label=\"Back\"\n          onClick={onBackClick}\n          className={style.backButton}\n          tooltipPlacement=\"right\"\n        />\n        <div className={style.ctaContainer}>\n          <div className={style.coverWrapper}>\n            <PlaylistDetailCover images={coverImages} />\n          </div>\n          <div>\n            <Tag label={translate('playlist')} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {description.length >= DESCRIPTION_BREAKPOINT ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {translate(showMore ? 'Show less' : 'Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{faSize: 14, wrapperSize: 16}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n            <div className={style.continueLearningButton}>\n              <ContinueLearningButton\n                ongoingCoursesAvailable={!!ongoingCourses.list.length}\n                onClick={onContinueLearningClick}\n              />\n            </div>\n          </div>\n        </div>\n        <ContinueLearning ongoingCourses={ongoingCourses} />\n        <AllCourses\n          courses={playlistCourses}\n          totalCourses={totalCourses}\n          filters={filters}\n          sorting={sorting}\n        />\n      </div>\n    </div>\n  );\n};\n\nPlaylistDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nPlaylistDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  coverImages: PlaylistDetailCover.propTypes.images,\n  playlistRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  ongoingCourses: PropTypes.shape(CardsGrid.propTypes),\n  playlistCourses: 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  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default PlaylistDetail;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["DESCRIPTION_BREAKPOINT","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCourses","playlistCourses","totalCourses","filters","sorting","onBackClick","onContinueLearningClick","translate","showMore","setShowMore","useState","handleShowMore","useCallback","Description","classnames","style","truncate","backgroundContainer","container","backButton","ctaContainer","coverWrapper","length","showMoreWrapper","faSize","wrapperSize","continueLearningButton","list","continueLearningSection","contextTypes","skin","Provider","childContextTypes","propTypes","PropTypes","string","isRequired","PlaylistDetailCover","images","shape","CardsGrid","number","onChange","func","options","arrayOf","SelectOptionPropTypes","Select"],"sources":["../../../src/template/playlist-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport AllCourses from '../skill-detail/all-courses';\nimport ContinueLearning from '../skill-detail/continue-learning';\nimport PlaylistDetailCover from '../../molecule/playlist-detail-cover';\nimport {ContinueLearningButton} from '../skill-detail';\nimport style from './style.css';\n\nconst DESCRIPTION_BREAKPOINT = 382;\n\nconst PlaylistDetail = (props, context) => {\n  const {\n    title,\n    coverImages,\n    playlistRef,\n    description,\n    ongoingCourses,\n    playlistCourses,\n    totalCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onContinueLearningClick\n  } = props;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        {description}\n      </div>\n    );\n  }, [showMore, description]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={playlistRef}>\n        <ButtonLinkIcon\n          faIcon=\"arrow-left\"\n          data-name=\"back-button\"\n          aria-label=\"Back\"\n          onClick={onBackClick}\n          className={style.backButton}\n          tooltipPlacement=\"right\"\n        />\n        <div className={style.ctaContainer}>\n          <div className={style.coverWrapper}>\n            <PlaylistDetailCover images={coverImages} />\n          </div>\n          <div>\n            <Tag label={translate('playlist')} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {description.length >= DESCRIPTION_BREAKPOINT ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {translate(showMore ? 'Show less' : 'Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{faSize: 14, wrapperSize: 16}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n            <div className={style.continueLearningButton}>\n              <ContinueLearningButton\n                ongoingCoursesAvailable={!!ongoingCourses.list.length}\n                onClick={onContinueLearningClick}\n              />\n            </div>\n          </div>\n        </div>\n        <div className={style.continueLearningSection}>\n          <ContinueLearning ongoingCourses={ongoingCourses} />\n        </div>\n        <AllCourses\n          courses={playlistCourses}\n          totalCourses={totalCourses}\n          filters={filters}\n          sorting={sorting}\n        />\n      </div>\n    </div>\n  );\n};\n\nPlaylistDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nPlaylistDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  coverImages: PlaylistDetailCover.propTypes.images,\n  playlistRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  ongoingCourses: PropTypes.shape(CardsGrid.propTypes),\n  playlistCourses: 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  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default PlaylistDetail;\n"],"mappings":"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"}

package/lib/template/playlist-detail/style.css

@@ -91,9 +91,14 @@
   margin-top: 24px;
 }
 
+.continueLearningSection {
+  padding: 24px 0 32px 0;
+}
+
 @media tablet {
   .ctaContainer {
     flex-direction: column;
+    align-items: flex-start;
   }
 }
 

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

@@ -109,7 +109,7 @@
   text-decoration: underline;
 }
 
-@media (max-width: 940px) {
+@media tablet {
   .searchAndSortSection {
     flex-direction: column;
   }
@@ -117,6 +117,10 @@
   .sortSection {
     margin-top: 16px;
   }
+
+  .filterWrapper {
+    overflow-x: scroll;
+  }
 }
 
 @media mobile {
@@ -126,8 +130,4 @@
     align-items: flex-start;
     margin-top: 16px;
   }
-
-  .filterWrapper {
-    overflow-x: scroll;
-  }
-}
+}

package/lib/template/skill-detail/continue-learning.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"continue-learning.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/continue-learning.js"],"names":[],"mappings":";AAQA,gFAyBC"}
+{"version":3,"file":"continue-learning.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/continue-learning.js"],"names":[],"mappings":";AAQA,gFA0BC"}

package/lib/template/skill-detail/continue-learning.js

@@ -44,9 +44,10 @@ const ContinueLearning = (props, context) => {
 
   return /*#__PURE__*/_react.default.createElement(_cardsList.default, {
     cards: (0, _sortBy2.default)(course => -(0, _getOr2.default)(0, ['progress'], course), ongoingCourses.list),
-    title: /*#__PURE__*/_react.default.createElement(Title, null),
+    title: /*#__PURE__*/_react.default.createElement(Title, null) // to override CardList wrapper padding
+    ,
     customStyle: {
-      padding: '16px 0px 8px'
+      padding: '0px'
     }
   });
 };

package/lib/template/skill-detail/continue-learning.js.map

@@ -1 +1 @@
-{"version":3,"file":"continue-learning.js","names":["ContinueLearning","props","context","ongoingCourses","translate","Title","useCallback","style","continueLearningTitle","continueLearningNumber","list","length","course","padding","contextTypes","skin","Provider","childContextTypes","propTypes","PropTypes","shape","CardsGrid"],"sources":["../../../src/template/skill-detail/continue-learning.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, sortBy} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport CardsGrid from '../../organism/cards-grid';\nimport CardsList from '../../molecule/dashboard/cards-list';\nimport style from './continue-learning.css';\n\nconst ContinueLearning = (props, context) => {\n  const {ongoingCourses} = props;\n  const {translate} = context;\n\n  const Title = useCallback(\n    () => (\n      <>\n        <span className={style.continueLearningTitle}>{translate('continue_learning')}</span>\n        <span className={style.continueLearningNumber}>{ongoingCourses.list.length}</span>\n      </>\n    ),\n    [ongoingCourses, translate]\n  );\n\n  if (ongoingCourses.list.length === 0) {\n    return null;\n  }\n\n  return (\n    <CardsList\n      cards={sortBy(course => -getOr(0, ['progress'], course), ongoingCourses.list)}\n      title={<Title />}\n      customStyle={{padding: '16px 0px 8px'}}\n    />\n  );\n};\n\nContinueLearning.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nContinueLearning.propTypes = {\n  ongoingCourses: PropTypes.shape(CardsGrid.propTypes)\n};\n\nexport default ContinueLearning;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,gBAAgB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EAC3C,MAAM;IAACC;EAAD,IAAmBF,KAAzB;EACA,MAAM;IAACG;EAAD,IAAcF,OAApB;EAEA,MAAMG,KAAK,GAAG,IAAAC,kBAAA,EACZ,mBACE,yEACE;IAAM,SAAS,EAAEC,yBAAA,CAAMC;EAAvB,GAA+CJ,SAAS,CAAC,mBAAD,CAAxD,CADF,eAEE;IAAM,SAAS,EAAEG,yBAAA,CAAME;EAAvB,GAAgDN,cAAc,CAACO,IAAf,CAAoBC,MAApE,CAFF,CAFU,EAOZ,CAACR,cAAD,EAAiBC,SAAjB,CAPY,CAAd;;EAUA,IAAID,cAAc,CAACO,IAAf,CAAoBC,MAApB,KAA+B,CAAnC,EAAsC;IACpC,OAAO,IAAP;EACD;;EAED,oBACE,6BAAC,kBAAD;IACE,KAAK,EAAE,sBAAOC,MAAM,IAAI,CAAC,qBAAM,CAAN,EAAS,CAAC,UAAD,CAAT,EAAuBA,MAAvB,CAAlB,EAAkDT,cAAc,CAACO,IAAjE,CADT;IAEE,KAAK,eAAE,6BAAC,KAAD,OAFT;IAGE,WAAW,EAAE;MAACG,OAAO,EAAE;IAAV;EAHf,EADF;AAOD,CAzBD;;AA2BAb,gBAAgB,CAACc,YAAjB,GAAgC;EAC9BC,IAAI,EAAEC,iBAAA,CAASC,iBAAT,CAA2BF,IADH;EAE9BX,SAAS,EAAEY,iBAAA,CAASC,iBAAT,CAA2Bb;AAFR,CAAhC;AAKAJ,gBAAgB,CAACkB,SAAjB,2CAA6B;EAC3Bf,cAAc,EAAEgB,kBAAA,CAAUC,KAAV,CAAgBC,kBAAA,CAAUH,SAA1B;AADW,CAA7B;eAIelB,gB"}
+{"version":3,"file":"continue-learning.js","names":["ContinueLearning","props","context","ongoingCourses","translate","Title","useCallback","style","continueLearningTitle","continueLearningNumber","list","length","course","padding","contextTypes","skin","Provider","childContextTypes","propTypes","PropTypes","shape","CardsGrid"],"sources":["../../../src/template/skill-detail/continue-learning.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, sortBy} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport CardsGrid from '../../organism/cards-grid';\nimport CardsList from '../../molecule/dashboard/cards-list';\nimport style from './continue-learning.css';\n\nconst ContinueLearning = (props, context) => {\n  const {ongoingCourses} = props;\n  const {translate} = context;\n\n  const Title = useCallback(\n    () => (\n      <>\n        <span className={style.continueLearningTitle}>{translate('continue_learning')}</span>\n        <span className={style.continueLearningNumber}>{ongoingCourses.list.length}</span>\n      </>\n    ),\n    [ongoingCourses, translate]\n  );\n\n  if (ongoingCourses.list.length === 0) {\n    return null;\n  }\n\n  return (\n    <CardsList\n      cards={sortBy(course => -getOr(0, ['progress'], course), ongoingCourses.list)}\n      title={<Title />}\n      // to override CardList wrapper padding\n      customStyle={{padding: '0px'}}\n    />\n  );\n};\n\nContinueLearning.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nContinueLearning.propTypes = {\n  ongoingCourses: PropTypes.shape(CardsGrid.propTypes)\n};\n\nexport default ContinueLearning;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,gBAAgB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EAC3C,MAAM;IAACC;EAAD,IAAmBF,KAAzB;EACA,MAAM;IAACG;EAAD,IAAcF,OAApB;EAEA,MAAMG,KAAK,GAAG,IAAAC,kBAAA,EACZ,mBACE,yEACE;IAAM,SAAS,EAAEC,yBAAA,CAAMC;EAAvB,GAA+CJ,SAAS,CAAC,mBAAD,CAAxD,CADF,eAEE;IAAM,SAAS,EAAEG,yBAAA,CAAME;EAAvB,GAAgDN,cAAc,CAACO,IAAf,CAAoBC,MAApE,CAFF,CAFU,EAOZ,CAACR,cAAD,EAAiBC,SAAjB,CAPY,CAAd;;EAUA,IAAID,cAAc,CAACO,IAAf,CAAoBC,MAApB,KAA+B,CAAnC,EAAsC;IACpC,OAAO,IAAP;EACD;;EAED,oBACE,6BAAC,kBAAD;IACE,KAAK,EAAE,sBAAOC,MAAM,IAAI,CAAC,qBAAM,CAAN,EAAS,CAAC,UAAD,CAAT,EAAuBA,MAAvB,CAAlB,EAAkDT,cAAc,CAACO,IAAjE,CADT;IAEE,KAAK,eAAE,6BAAC,KAAD,OAFT,CAGE;IAHF;IAIE,WAAW,EAAE;MAACG,OAAO,EAAE;IAAV;EAJf,EADF;AAQD,CA1BD;;AA4BAb,gBAAgB,CAACc,YAAjB,GAAgC;EAC9BC,IAAI,EAAEC,iBAAA,CAASC,iBAAT,CAA2BF,IADH;EAE9BX,SAAS,EAAEY,iBAAA,CAASC,iBAAT,CAA2Bb;AAFR,CAAhC;AAKAJ,gBAAgB,CAACkB,SAAjB,2CAA6B;EAC3Bf,cAAc,EAAEgB,kBAAA,CAAUC,KAAV,CAAgBC,kBAAA,CAAUH,SAA1B;AADW,CAA7B;eAIelB,gB"}

package/locales/en/global.json

@@ -12,11 +12,16 @@
   "associated_skills": "Associated skills",
   "Back to Dashboard Home": "Back to Dashboard Home",
   "back_to_catalog": "Back to courses",
+  "badge": "Badge",
+  "bonus_stars": "Bonus stars",
   "cart_title": "Coorpacademy Subscription",
   "challenges you on": "challenges you on",
+  "download": "Download",
   "is challenging you": "{{username}} is challenging you {{courseName}}",
   "items": "items",
   "certificate": "Certificate",
+  "certification": "Certification",
+  "certification_progress_wrapper_subtitle": "To unlock your rewards, you need to complete this certification",
   "chapters": "chapters",
   "Close": "Close",
   "clue_stars_to_loose_plural": "Unlocking the clue reduces the stars you can gain on this question by {{count}} (if you get it right)",
@@ -38,6 +43,7 @@
   "confirm": "Confirm",
   "Delete": "Delete",
   "Draft": "Draft",
+  "diploma": "Diploma",
   "answer_the_question": "Answer the question",
   "Edit": "Edit",
   "Explore": "Explore",
@@ -54,6 +60,8 @@
   "learning_priorities_brand_description": "Define learning priorities for your company with skills, playlists or certifications. They will appear on the My Learning page.",
   "media_stars_to_win_plural": "Win {{count}} additional stars in this chapter the first time you view a lesson!",
   "media_stars_to_win": "Win {{count}} additional star in this chapter the first time you view a lesson!",
+  "modules": "Modules",
+  "modules_completed": "modules completed",
   "More": "More",
   "More details": "More details",
   "New media": "New lesson",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "11.32.30",
+  "version": "11.32.31-alpha.16+8571f9e91",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -177,5 +177,5 @@
     "last 2 versions",
     "IE 11"
   ],
-  "gitHead": "0cf16f47f7093251aba48dad2b106e6e66b6ad7f"
+  "gitHead": "8571f9e915884dc12f9a45f1d43c1a28e8ce4516"
 }