@coorpacademy/components 11.32.32 → 11.32.33-alpha.27

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","logoUrl","onDownloadDiploma","badge","translate","progression","completedCourses","completedModules","stars","badgeUrl","onDownloadBadge","showMore","setShowMore","useState","handleShowMore","useCallback","Description","classnames","style","truncate","backgroundContainer","container","backButton","ctaContainer","logoContainer","logo","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    logoUrl,\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            <img className={style.logo} src={logoUrl} />\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  logoUrl: 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":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,sBAAsB,GAAG,GAA/B;;AAEA,MAAMC,cAAc,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACzC,MAAM;IACJC,KADI;IAEJC,WAFI;IAGJC,WAHI;IAIJC,WAJI;IAKJC,cALI;IAMJC,eANI;IAOJC,YAPI;IAQJC,OARI;IASJC,OATI;IAUJC,WAVI;IAWJC;EAXI,IAYFZ,KAZJ;EAaA,MAAM;IAACa;EAAD,IAAcZ,OAApB;EAEA,MAAM,CAACa,QAAD,EAAWC,WAAX,IAA0B,IAAAC,eAAA,EAAS,KAAT,CAAhC;EAEA,MAAMC,cAAc,GAAG,IAAAC,kBAAA,EAAY,MAAMH,WAAW,CAAC,CAACD,QAAF,CAA7B,EAA0C,CAACC,WAAD,EAAcD,QAAd,CAA1C,CAAvB;EAEA,MAAMK,WAAW,GAAG,IAAAD,kBAAA,EAAY,MAAM;IACpC,oBACE;MAAK,SAAS,EAAE,IAAAE,mBAAA,EAAWC,cAAA,CAAMhB,WAAjB,EAA8B,CAACS,QAAD,IAAaO,cAAA,CAAMC,QAAjD;IAAhB,GACGjB,WADH,CADF;EAKD,CANmB,EAMjB,CAACS,QAAD,EAAWT,WAAX,CANiB,CAApB;EAQA,oBACE;IAAK,SAAS,EAAEgB,cAAA,CAAME;EAAtB,gBACE;IAAK,SAAS,EAAEF,cAAA,CAAMG,SAAtB;IAAiC,aAAWpB;EAA5C,gBACE,6BAAC,uBAAD;IACE,MAAM,EAAC,YADT;IAEE,aAAU,aAFZ;IAGE,cAAW,MAHb;IAIE,OAAO,EAAEO,WAJX;IAKE,SAAS,EAAEU,cAAA,CAAMI,UALnB;IAME,gBAAgB,EAAC;EANnB,EADF,eASE;IAAK,SAAS,EAAEJ,cAAA,CAAMK;EAAtB,gBACE;IAAK,SAAS,EAAEL,cAAA,CAAMM;EAAtB,gBACE,6BAAC,4BAAD;IAAqB,MAAM,EAAExB;EAA7B,EADF,CADF,eAIE,uDACE,6BAAC,YAAD;IAAK,KAAK,EAAEU,SAAS,CAAC,UAAD;EAArB,EADF,eAEE;IAAK,SAAS,EAAEQ,cAAA,CAAMnB;EAAtB,GAA8BA,KAA9B,CAFF,EAGGG,WAAW,gBACV,yEACE,6BAAC,WAAD,OADF,EAEGA,WAAW,CAACuB,MAAZ,IAAsB9B,sBAAtB,gBACC;IAAK,SAAS,EAAEuB,cAAA,CAAMQ,eAAtB;IAAuC,OAAO,EAAEZ;EAAhD,GACGJ,SAAS,CAACC,QAAQ,GAAG,WAAH,GAAiB,WAA1B,CADZ,eAEE,6BAAC,aAAD;IACE,QAAQ,EAAEA,QAAQ,GAAG,YAAH,GAAkB,cADtC;IAEE,IAAI,EAAE;MAACgB,MAAM,EAAE,EAAT;MAAaC,WAAW,EAAE;IAA1B;EAFR,EAFF,CADD,GAQG,IAVN,CADU,GAaR,IAhBN,eAiBE;IAAK,SAAS,EAAEV,cAAA,CAAMW;EAAtB,gBACE,6BAAC,mCAAD;IACE,uBAAuB,EAAE,CAAC,CAAC1B,cAAc,CAAC2B,IAAf,CAAoBL,MADjD;IAEE,OAAO,EAAEhB;EAFX,EADF,CAjBF,CAJF,CATF,eAsCE;IAAK,SAAS,EAAES,cAAA,CAAMa;EAAtB,gBACE,6BAAC,yBAAD;IAAkB,cAAc,EAAE5B;EAAlC,EADF,CAtCF,eAyCE,6BAAC,mBAAD;IACE,OAAO,EAAEC,eADX;IAEE,YAAY,EAAEC,YAFhB;IAGE,OAAO,EAAEC,OAHX;IAIE,OAAO,EAAEC;EAJX,EAzCF,CADF,CADF;AAoDD,CAhFD;;AAkFAX,cAAc,CAACoC,YAAf,GAA8B;EAC5BC,IAAI,EAAEC,iBAAA,CAASC,iBAAT,CAA2BF,IADL;EAE5BvB,SAAS,EAAEwB,iBAAA,CAASC,iBAAT,CAA2BzB;AAFV,CAA9B;AAKAd,cAAc,CAACwC,SAAf,2CAA2B;EACzBrC,KAAK,EAAEsC,kBAAA,CAAUC,MAAV,CAAiBC,UADC;EAEzBvC,WAAW,EAAEwC,4BAAA,CAAoBJ,SAApB,CAA8BK,MAFlB;EAGzBxC,WAAW,EAAEoC,kBAAA,CAAUC,MAAV,CAAiBC,UAHL;EAIzBrC,WAAW,EAAEmC,kBAAA,CAAUC,MAJE;EAKzBnC,cAAc,EAAEkC,kBAAA,CAAUK,KAAV,CAAgBC,kBAAA,CAAUP,SAA1B,CALS;EAMzBhC,eAAe,EAAEiC,kBAAA,CAAUK,KAAV,CAAgBC,kBAAA,CAAUP,SAA1B,CANQ;EAOzB/B,YAAY,EAAEgC,kBAAA,CAAUO,MAPC;EAQzBtC,OAAO,EAAE+B,kBAAA,CAAUK,KAAV,CAAgB;IACvBG,QAAQ,EAAER,kBAAA,CAAUS,IADG;IAEvBC,OAAO,EAAEV,kBAAA,CAAUW,OAAV,CAAkBX,kBAAA,CAAUK,KAAV,CAAgBO,6BAAhB,CAAlB;EAFc,CAAhB,CARgB;EAYzB1C,OAAO,EAAE8B,kBAAA,CAAUK,KAAV,CAAgBQ,eAAA,CAAOd,SAAvB,CAZgB;EAazB5B,WAAW,EAAE6B,kBAAA,CAAUS,IAbE;EAczBrC,uBAAuB,EAAE4B,kBAAA,CAAUS;AAdV,CAA3B;eAiBelD,c"}

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/bs/global.json

@@ -12,11 +12,16 @@
   "associated_skills": "Povezane vještine",
   "Back to Dashboard Home": "Povratak na kontrolnu tablu",
   "back_to_catalog": "Povratak na kurseve",
+  "badge": "Badge",
+  "bonus_stars": "Bonus stars",
   "cart_title": "Pretplata za Coorpacademy",
   "challenges you on": "izaziva te",
+  "download": "Download",
   "is challenging you": "{{username}} te izaziva za {{courseName}}",
   "items": "stavke",
   "certificate": "Certifikat",
+  "certification": "Certification",
+  "certification_progress_wrapper_subtitle": "To unlock your rewards, you need to complete this certification",
   "chapters": "poglavlja",
   "Close": "Zatvori",
   "clue_stars_to_loose_plural": "Otključavanje traga smanjuje broj zvijezda koje možete dobiti za ovo pitanje za {{count}} (ako tačno odgovorite)",
@@ -38,6 +43,7 @@
   "confirm": "Potvrdi",
   "Delete": "Izbrisati",
   "Draft": "Skica",
+  "diploma": "Diploma",
   "answer_the_question": "Odgovori na pitanje",
   "Edit": "Uredi",
   "Explore": "Istražiti",
@@ -54,6 +60,8 @@
   "learning_priorities_brand_description": "Definirajte prioritete učenja za svoju kompaniju pomoću vještina, lista za reprodukciju ili certifikata. Oni će se pojaviti na stranici Moje učenje.",
   "media_stars_to_win_plural": "Osvoji {{count}} dodatnu zvijezdu u ovom poglavlju prvi put kad vidiš lekciju!",
   "media_stars_to_win": "Osvoji {{count}} dodatnu zvijezdu u ovom poglavlju prvi put kad vidiš lekciju!",
+  "modules": "Modules",
+  "modules_completed": "modules completed",
   "More": "Više",
   "More details": "Više detalja",
   "New media": "Nova lekcija",

package/locales/cs/global.json

@@ -12,11 +12,16 @@
   "associated_skills": "Přidružené dovednosti",
   "Back to Dashboard Home": "Zpět na domovskou stránku ovládacího panelu",
   "back_to_catalog": "Zpět na kurzy",
+  "badge": "Badge",
+  "bonus_stars": "Bonus stars",
   "cart_title": "Předplatné Coorpacademy",
   "challenges you on": "vás vyzve",
+  "download": "Download",
   "is challenging you": "{{username}} vám posílá výzvu do {{courseName}}",
   "items": "položky",
   "certificate": "Osvědčení",
+  "certification": "Certification",
+  "certification_progress_wrapper_subtitle": "To unlock your rewards, you need to complete this certification",
   "chapters": "kapitoly",
   "Close": "Zavřít",
   "clue_stars_to_loose_plural": "Odemknutí nápovědy sníží počet hvězd, které můžete získat na této otázce, o {{count}} (pokud ji zodpovíte správně)",
@@ -38,6 +43,7 @@
   "confirm": "Potvrdit",
   "Delete": "Smazat",
   "Draft": "Návrh",
+  "diploma": "Diploma",
   "answer_the_question": "Odpovězte na otázku",
   "Edit": "Upravit",
   "Explore": "Prozkoumat",
@@ -54,6 +60,8 @@
   "learning_priorities_brand_description": "Definujte pro svou společnost priority vzdělávání pomocí dovedností, seznamů skladeb nebo certifikací. Zobrazí se na stránce Moje učení.",
   "media_stars_to_win_plural": "Získejte další hvězdy ({{count}}) v této kapitole při prvním zobrazení lekce!",
   "media_stars_to_win": "Vyhrajte další hvězdu ({{count}}) v této kapitole při prvním zobrazení lekce!",
+  "modules": "Modules",
+  "modules_completed": "modules completed",
   "More": "Více",
   "More details": "Více informací",
   "New media": "Nová lekce",

package/locales/de/global.json

@@ -12,11 +12,16 @@
   "associated_skills": "Zugehörige Fähigkeiten",
   "Back to Dashboard Home": "Zurück zur Startseite des Dashboards",
   "back_to_catalog": "Zurück zu den Kursen",
+  "badge": "Badge",
+  "bonus_stars": "Bonus stars",
   "cart_title": "Coorpacademy Abo",
   "challenges you on": "Herausforderungen für Sie",
+  "download": "Download",
   "is challenging you": "{{username}} fordert Sie heraus {{courseName}}",
   "items": "Artikel",
   "certificate": "Zertifikat",
+  "certification": "Certification",
+  "certification_progress_wrapper_subtitle": "To unlock your rewards, you need to complete this certification",
   "chapters": "Kapitel",
   "Close": "Schliessen",
   "clue_stars_to_loose_plural": "Wenn Sie den Hinweis benutzen, reduziert sich die Anzahl Sterne, die Sie bei dieser Frage gewinnen können um {{count}}  (wenn Sie richtig antworten)",
@@ -38,6 +43,7 @@
   "confirm": "Bestätigen",
   "Delete": "Löschen",
   "Draft": "Entwurf",
+  "diploma": "Diploma",
   "answer_the_question": "Beantworten Sie die Frage",
   "Edit": "Bearbeiten",
   "Explore": "Erkunden",
@@ -54,6 +60,8 @@
   "learning_priorities_brand_description": "Definieren Sie Lernprioritäten für Ihr Unternehmen mit Fähigkeiten, Playlists oder Zertifizierungen. Diese werden auf der Seite „Mein Lernen“ angezeigt.",
   "media_stars_to_win_plural": "Gewinnen Sie {{count}} zusätzliche Sterne in diesem Kapitel, wenn Sie die Lektion das erste Mal ansehen!",
   "media_stars_to_win": "Gewinnen Sie {{count}} zusätzliche Sterne in diesem Kapitel, wenn Sie die Lektion das erste Mal ansehen!",
+  "modules": "Modules",
+  "modules_completed": "modules completed",
   "More": "Mehr",
   "More details": "Mehr Details",
   "New media": "Neue Lektion",

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/locales/es/global.json

@@ -12,11 +12,16 @@
   "associated_skills": "Habilidades asociadas",
   "Back to Dashboard Home": "Volver al panel de inicio",
   "back_to_catalog": "Volver a los cursos",
+  "badge": "Badge",
+  "bonus_stars": "Bonus stars",
   "cart_title": "Suscripción a Coorpacademy",
   "challenges you on": "te reta en",
+  "download": "Download",
   "is challenging you": "{{username}} te reta a {{courseName}}",
   "items": "elementos",
   "certificate": "Certificado",
+  "certification": "Certification",
+  "certification_progress_wrapper_subtitle": "To unlock your rewards, you need to complete this certification",
   "chapters": "capítulos",
   "Close": "Cerrar",
   "clue_stars_to_loose_plural": "Desbloquear la pista reduce en {{count}} las estrellas que puedes ganar por esta pregunta (si la aciertas)",
@@ -38,6 +43,7 @@
   "confirm": "Confirmar",
   "Delete": "Borrar",
   "Draft": "Sequía",
+  "diploma": "Diploma",
   "answer_the_question": "Responda a la pregunta",
   "Edit": "Editar",
   "Explore": "Explorar",
@@ -54,6 +60,8 @@
   "learning_priorities_brand_description": "Define las prioridades de aprendizaje de tu empresa con habilidades, listas de reproducción o certificaciones. Aparecerán en la página Mi aprendizaje.",
   "media_stars_to_win_plural": "Gana {{count}} estrellas adicionales en este capítulo la primera vez que veas una lección.",
   "media_stars_to_win": "Gana {{count}} estrellas adicionales en este capítulo la primera vez que veas una lección.",
+  "modules": "Modules",
+  "modules_completed": "modules completed",
   "More": "Más",
   "More details": "Más detalles",
   "New media": "Nueva lección",

package/locales/et/global.json

@@ -12,11 +12,16 @@
   "associated_skills": "Seotud oskused",
   "Back to Dashboard Home": "Tagasi esilehele",
   "back_to_catalog": "Tagasi kursuste esilehele",
+  "badge": "Badge",
+  "bonus_stars": "Bonus stars",
   "cart_title": "Coorpacademy tellimus",
   "challenges you on": "esitas sulle väljakutse",
+  "download": "Download",
   "is challenging you": "{{username}} esitab sulle väljakutse {{courseName}}",
   "items": "esemed",
   "certificate": "tunnistus",
+  "certification": "Certification",
+  "certification_progress_wrapper_subtitle": "To unlock your rewards, you need to complete this certification",
   "chapters": "peatükid",
   "Close": "Sulge",
   "clue_stars_to_loose_plural": "Vihje kasutamine vähendab saadavat punktisummat {{count}} võrra (juhul, kui vastad õigesti)",
@@ -38,6 +43,7 @@
   "confirm": "Kinnita",
   "Delete": "Kustuta",
   "Draft": "Mustand",
+  "diploma": "Diploma",
   "answer_the_question": "Vastake küsimusele",
   "Edit": "Muuda",
   "Explore": "Avasta",
@@ -54,6 +60,8 @@
   "learning_priorities_brand_description": "Määrake oma ettevõtte õppimisprioriteedid oskuste, esitusloendite või sertifikaatide abil. Need kuvatakse lehel Minu õppimine.",
   "media_stars_to_win_plural": "Võida selles peatükis õppetunni esmakordsel vaatamisel  {{count}} lisatähepunkti!",
   "media_stars_to_win": "Võida selles peatükis õppetunni esmakordsel vaatamisel  {{count}} lisatähepunkt!",
+  "modules": "Modules",
+  "modules_completed": "modules completed",
   "More": "Lisaks",
   "More details": "Rohkem detaile",
   "New media": "Uus õppetund",

package/locales/fi/global.json

@@ -12,11 +12,16 @@
   "associated_skills": "Liittyvät taidot",
   "Back to Dashboard Home": "Takaisin koontinäytön kotisivulle",
   "back_to_catalog": "Takaisin kursseihin",
+  "badge": "Badge",
+  "bonus_stars": "Bonus stars",
   "cart_title": "Coorpacademyn tilaus",
   "challenges you on": "haastaa sinut",
+  "download": "Download",
   "is challenging you": "{{username}} haastaa sinut {{courseName}}",
   "items": "kohteita",
   "certificate": "Todistus",
+  "certification": "Certification",
+  "certification_progress_wrapper_subtitle": "To unlock your rewards, you need to complete this certification",
   "chapters": "kappaleet",
   "Close": "Sulje",
   "clue_stars_to_loose_plural": "Jos avaat tämän vihjeen, voitat tästä kysymyksestä {{count}} tähteä vähemmän (jos saat sen oikein)",
@@ -38,6 +43,7 @@
   "confirm": "Vahvista",
   "Delete": "Poista",
   "Draft": "Luonnos",
+  "diploma": "Diploma",
   "answer_the_question": "Vastaa kysymykseen",
   "Edit": "Muokkaa",
   "Explore": "Tutustu",
@@ -54,6 +60,8 @@
   "learning_priorities_brand_description": "Määritä yrityksesi oppimisprioriteetit taitojen, soittolistojen tai sertifikaattien avulla. Ne näkyvät Oma oppiminen -sivulla.",
   "media_stars_to_win_plural": "Voita {{count}} ylimääräistä tähteä tässä kappaleessa, kun katsot oppitunnin ensimmäisen kerran!",
   "media_stars_to_win": "Voita {{count}} ylimääräinen tähti tässä kappaleessa, kun katsot oppitunnin ensimmäisen kerran!",
+  "modules": "Modules",
+  "modules_completed": "modules completed",
   "More": "Enemmän",
   "More details": "Lisää tietoja",
   "New media": "Uusi oppitunti",

package/locales/fr/global.json

@@ -12,11 +12,16 @@
   "associated_skills": "Compétences associées",
   "Back to Dashboard Home": "Retour à l’accueil du tableau de bord",
   "back_to_catalog": "Retour aux cours",
+  "badge": "Badge",
+  "bonus_stars": "Bonus stars",
   "cart_title": "Abonnement Coorpacademy ",
   "challenges you on": "vous défie sur",
+  "download": "Download",
   "is challenging you": "{{username}} vous défie {{courseName}}",
   "items": "articles",
   "certificate": "Certificat",
+  "certification": "Certification",
+  "certification_progress_wrapper_subtitle": "To unlock your rewards, you need to complete this certification",
   "chapters": "chapitres",
   "Close": "Fermer",
   "clue_stars_to_loose_plural": "En regardant l'indice, cette question vous rapportera {{count}} étoiles en moins (si vous y répondez correctement)",
@@ -38,6 +43,7 @@
   "confirm": "Confirmer",
   "Delete": "Supprimer",
   "Draft": "Brouillon",
+  "diploma": "Diploma",
   "answer_the_question": "Répondez à la question",
   "Edit": "Modifier",
   "Explore": "Explorer",
@@ -54,6 +60,8 @@
   "learning_priorities_brand_description": "Définissez les priorités d'apprentissage de votre entreprise avec des compétences, des playlists ou des certifications. Elles apparaîtront sur la page Mon apprentissage.",
   "media_stars_to_win_plural": "Gagnez {{count}} étoiles supplémentaires par chapitre en consultant la leçon !",
   "media_stars_to_win": "Gagnez {{count}} étoile supplémentaire par chapitre en consultant la leçon !",
+  "modules": "Modules",
+  "modules_completed": "modules completed",
   "More": "Plus",
   "More details": "Plus de détails",
   "New media": "Nouvelle leçon",