@coorpacademy/components 11.32.37 → 11.32.38-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/es/template/skill-detail/index.d.ts +0 -2
  2. package/es/template/skill-detail/index.d.ts.map +1 -1
  3. package/es/template/skill-detail/index.js +8 -31
  4. package/es/template/skill-detail/index.js.map +1 -1
  5. package/es/template/skill-detail/style.css +16 -26
  6. package/lib/template/skill-detail/index.d.ts +0 -2
  7. package/lib/template/skill-detail/index.d.ts.map +1 -1
  8. package/lib/template/skill-detail/index.js +8 -31
  9. package/lib/template/skill-detail/index.js.map +1 -1
  10. package/lib/template/skill-detail/style.css +16 -26
  11. package/package.json +2 -2
package/es/template/skill-detail/index.d.ts CHANGED
@@ -66,9 +66,7 @@ declare namespace SkillDetail {
66
66
  export const description: PropTypes.Requireable<string>;
67
67
  export const metrics: PropTypes.Requireable<PropTypes.InferProps<{
68
68
  score: PropTypes.Requireable<number>;
69
- content: PropTypes.Requireable<number>;
70
69
  questionsToReview: PropTypes.Requireable<number>;
71
- contentCompleted: PropTypes.Requireable<number>;
72
70
  }>>;
73
71
  export const focused: PropTypes.Requireable<boolean>;
74
72
  export const availableForReview: PropTypes.Requireable<boolean>;
package/es/template/skill-detail/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":"AAcO,8EA+BN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD,oEAuJC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":"AAcO,8EA+BN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD,oEAkIC"}
package/es/template/skill-detail/index.js CHANGED
@@ -71,10 +71,8 @@ const SkillDetail = (props, context) => {
71
71
  onContinueLearningClick
72
72
  } = props;
73
73
  const {
74
- score,
75
- content,
76
- questionsToReview,
77
- contentCompleted = 0
74
+ score = 0,
75
+ questionsToReview
78
76
  } = metrics;
79
77
  const {
80
78
  translate
@@ -150,35 +148,16 @@ const SkillDetail = (props, context) => {
150
148
  }), /*#__PURE__*/React.createElement(ContinueLearningButton, {
151
149
  ongoingCoursesAvailable: ongoingCoursesAvailable,
152
150
  onClick: onContinueLearningClick
153
- }))), score !== undefined ? /*#__PURE__*/React.createElement("div", {
154
- className: style.progressInformationsWrapper
155
- }, /*#__PURE__*/React.createElement("div", {
156
- className: style.progressTitle
157
- }, translate('your_progress')), /*#__PURE__*/React.createElement("div", {
158
- className: style.skillCoursesAndQuestionsWrapper
159
- }, content ? /*#__PURE__*/React.createElement("div", {
160
- className: style.skillInformation,
161
- "data-name": "skill-courses"
162
- }, /*#__PURE__*/React.createElement("span", {
163
- className: style.skillInformationNumber
164
- }, content), ' ', translate('courses')) : null, /*#__PURE__*/React.createElement("div", {
151
+ }))), questionsToReview > 0 ? /*#__PURE__*/React.createElement("div", {
165
152
  className: style.skillInformation,
166
153
  "data-name": "skill-questions"
167
154
  }, /*#__PURE__*/React.createElement("span", {
168
155
  className: style.skillInformationNumber
169
- }, questionsToReview), "\xA0", translate('skill_chart_side_panel_questions_to_review'))), /*#__PURE__*/React.createElement(ProgressBar, null), /*#__PURE__*/React.createElement("div", {
170
- className: style.progressInformations
171
- }, content && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
172
- className: style.progressInformation,
173
- "data-name": "skill-completed-courses"
174
- }, /*#__PURE__*/React.createElement("span", {
175
- className: style.progressInformationNumber
176
- }, contentCompleted), ` ${translate('courses_completed')}`), /*#__PURE__*/React.createElement("div", {
177
- className: style.progressInformation,
178
- "data-name": "completed-percentage"
179
- }, /*#__PURE__*/React.createElement("span", {
156
+ }, questionsToReview), "\xA0", translate('skill_chart_side_panel_questions_to_review')) : null, /*#__PURE__*/React.createElement("div", {
157
+ className: style.progressContainer
158
+ }, /*#__PURE__*/React.createElement(ProgressBar, null), /*#__PURE__*/React.createElement("span", {
180
159
  className: style.progressInformationNumber
181
- }, score.toFixed(1), "%"))))) : null, /*#__PURE__*/React.createElement(AllCourses, {
160
+ }, score.toFixed(1), "%")), /*#__PURE__*/React.createElement(AllCourses, {
182
161
  content: skillIncludedCourses,
183
162
  filters: filters,
184
163
  sorting: sorting
@@ -195,9 +174,7 @@ SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
195
174
  description: PropTypes.string,
196
175
  metrics: PropTypes.shape({
197
176
  score: PropTypes.number,
198
- content: PropTypes.number,
199
- questionsToReview: PropTypes.number,
200
- contentCompleted: PropTypes.number
177
+ questionsToReview: PropTypes.number
201
178
  }),
202
179
  focused: PropTypes.bool,
203
180
  availableForReview: PropTypes.bool,
package/es/template/skill-detail/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","convert","classnames","Provider","Select","SelectOptionPropTypes","ButtonLink","ButtonLinkIcon","Icon","CardsGrid","style","AllCourses","ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","width","borderRadius","backgroundColor","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","bool","func","SkillDetail","title","skillRef","description","metrics","focused","availableForReview","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","score","content","questionsToReview","contentCompleted","showMore","setShowMore","handleShowMore","Description","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButton","ctaContainer","skillFocusBadge","faSize","wrapperSize","length","showMoreWrapper","ctaWrapper","progressInformationsWrapper","progressTitle","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","progressInformations","progressInformation","progressInformationNumber","toFixed","string","isRequired","shape","number","onChange","options","arrayOf"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, isNil} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\n\nexport const ContinueLearningButton = (props, context) => {\n const {ongoingCoursesAvailable, onClick} = props;\n const {skin, translate} = context;\n const primarySkinColor = get('common.primary', skin);\n\n return (\n <div>\n <ButtonLink\n label={\n ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')\n }\n type=\"primary\"\n customStyle={{\n width: 'fit-content',\n borderRadius: '12px',\n backgroundColor: primarySkinColor\n }}\n hoverBackgroundColor={convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)}\n hoverColor=\"#FFFFFF\"\n icon={{\n position: 'left',\n faIcon: {\n name: 'play',\n color: '#FFFFFF',\n size: 16\n }\n }}\n onClick={onClick}\n />\n </div>\n );\n};\n\nContinueLearningButton.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nContinueLearningButton.propTypes = {\n ongoingCoursesAvailable: PropTypes.bool,\n onClick: PropTypes.func\n};\n\nconst SkillDetail = (props, context) => {\n const {\n title,\n skillRef,\n description,\n metrics = {},\n focused,\n availableForReview,\n ongoingCoursesAvailable,\n skillIncludedCourses,\n filters,\n sorting,\n onBackClick,\n onReviewClick,\n onContinueLearningClick\n } = props;\n const {score, content, questionsToReview, contentCompleted = 0} = metrics;\n const {translate} = context;\n\n const [showMore, setShowMore] = useState(false);\n\n const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n const Description = useCallback(() => {\n return (\n <div className={classnames(style.description, !showMore && style.truncate)}>\n {description}\n </div>\n );\n }, [showMore, description]);\n\n const ProgressBar = useCallback(() => {\n if (score === undefined) return null;\n const progressBarColor = '#3EC483';\n const inlineProgressValueStyle = {\n backgroundColor: progressBarColor,\n width: `${score}%`\n };\n\n return (\n <div className={style.progressBarWrapper}>\n <div\n data-name=\"progress\"\n className={style.progress}\n style={inlineProgressValueStyle}\n role=\"progressbar\"\n />\n </div>\n );\n }, [score]);\n\n return (\n <div className={style.backgroundContainer}>\n <div className={style.container} data-name={skillRef}>\n {!isNil(onBackClick) ? (\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 ) : null}\n <div className={style.ctaContainer}>\n <div>\n {focused ? (\n <div className={style.skillFocusBadge}>\n <Icon\n iconName=\"bullseye-arrow\"\n backgroundColor=\"#DDD1FF\"\n size={{\n faSize: 10,\n wrapperSize: 16\n }}\n />\n {translate('skill_focus')}\n </div>\n ) : null}\n <div className={style.title}>{title}</div>\n {description ? (\n <>\n <Description />\n {description.length >= 226 ? (\n <div className={style.showMoreWrapper} onClick={handleShowMore}>\n {showMore ? translate('Show less') : translate('Show more')}\n <Icon\n iconName={showMore ? 'chevron-up' : 'chevron-down'}\n size={{\n faSize: 14,\n wrapperSize: 16\n }}\n />\n </div>\n ) : null}\n </>\n ) : null}\n </div>\n\n <div className={style.ctaWrapper}>\n <ButtonLink\n type=\"secondary\"\n onClick={onReviewClick}\n label={translate('review_this_skill')}\n disabled={!availableForReview}\n customStyle={{\n width: 'fit-content',\n borderRadius: '12px'\n }}\n />\n <ContinueLearningButton\n ongoingCoursesAvailable={ongoingCoursesAvailable}\n onClick={onContinueLearningClick}\n />\n </div>\n </div>\n {score !== undefined ? (\n <div className={style.progressInformationsWrapper}>\n <div className={style.progressTitle}>{translate('your_progress')}</div>\n <div className={style.skillCoursesAndQuestionsWrapper}>\n {content ? (\n <div className={style.skillInformation} data-name=\"skill-courses\">\n <span className={style.skillInformationNumber}>{content}</span>{' '}\n {translate('courses')}\n </div>\n ) : null}\n <div className={style.skillInformation} data-name=\"skill-questions\">\n <span className={style.skillInformationNumber}>{questionsToReview}</span>\n &nbsp;{translate('skill_chart_side_panel_questions_to_review')}\n </div>\n </div>\n <ProgressBar />\n <div className={style.progressInformations}>\n {content && (\n <>\n <div className={style.progressInformation} data-name=\"skill-completed-courses\">\n <span className={style.progressInformationNumber}>{contentCompleted}</span>\n {` ${translate('courses_completed')}`}\n </div>\n <div className={style.progressInformation} data-name=\"completed-percentage\">\n <span className={style.progressInformationNumber}>{score.toFixed(1)}%</span>\n </div>\n </>\n )}\n </div>\n </div>\n ) : null}\n <AllCourses content={skillIncludedCourses} filters={filters} sorting={sorting} />\n </div>\n </div>\n );\n};\n\nSkillDetail.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nSkillDetail.propTypes = {\n title: PropTypes.string.isRequired,\n skillRef: PropTypes.string.isRequired,\n description: PropTypes.string,\n metrics: PropTypes.shape({\n score: PropTypes.number,\n content: PropTypes.number,\n questionsToReview: PropTypes.number,\n contentCompleted: PropTypes.number\n }),\n focused: PropTypes.bool,\n availableForReview: PropTypes.bool,\n ongoingCoursesAvailable: PropTypes.bool,\n skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n filters: PropTypes.shape({\n onChange: PropTypes.func,\n options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n }),\n sorting: PropTypes.shape(Select.propTypes),\n onBackClick: PropTypes.func,\n onReviewClick: PropTypes.func,\n onContinueLearningClick: PropTypes.func\n};\n\nexport default SkillDetail;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,WAAf,EAA4BC,QAA5B,QAA2C,OAA3C;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAAQC,OAAR,QAAsB,oBAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,MAAP,IAAgBC,qBAAhB,QAA4C,mBAA5C;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,OAAOC,cAAP,MAA2B,6BAA3B;AACA,OAAOC,IAAP,MAAiB,iBAAjB;AACA,OAAOC,SAAP,MAAsB,2BAAtB;AACA,OAAOC,KAAP,MAAkB,aAAlB;AACA,OAAOC,UAAP,MAAuB,eAAvB;AAEA,OAAO,MAAMC,sBAAsB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACxD,MAAM;IAACC,uBAAD;IAA0BC;EAA1B,IAAqCH,KAA3C;EACA,MAAM;IAACI,IAAD;IAAOC;EAAP,IAAoBJ,OAA1B;;EACA,MAAMK,gBAAgB,GAAG,KAAI,gBAAJ,EAAsBF,IAAtB,CAAzB;;EAEA,oBACE,8CACE,oBAAC,UAAD;IACE,KAAK,EACHF,uBAAuB,GAAGG,SAAS,CAAC,mBAAD,CAAZ,GAAoCA,SAAS,CAAC,gBAAD,CAFxE;IAIE,IAAI,EAAC,SAJP;IAKE,WAAW,EAAE;MACXE,KAAK,EAAE,aADI;MAEXC,YAAY,EAAE,MAFH;MAGXC,eAAe,EAAEH;IAHN,CALf;IAUE,oBAAoB,EAAElB,OAAO,CAAE,YAAWkB,gBAAiB,0BAA9B,CAV/B;IAWE,UAAU,EAAC,SAXb;IAYE,IAAI,EAAE;MACJI,QAAQ,EAAE,MADN;MAEJC,MAAM,EAAE;QACNC,IAAI,EAAE,MADA;QAENC,KAAK,EAAE,SAFD;QAGNC,IAAI,EAAE;MAHA;IAFJ,CAZR;IAoBE,OAAO,EAAEX;EApBX,EADF,CADF;AA0BD,CA/BM;AAiCPJ,sBAAsB,CAACgB,YAAvB,GAAsC;EACpCX,IAAI,EAAEd,QAAQ,CAAC0B,iBAAT,CAA2BZ,IADG;EAEpCC,SAAS,EAAEf,QAAQ,CAAC0B,iBAAT,CAA2BX;AAFF,CAAtC;AAKAN,sBAAsB,CAACkB,SAAvB,2CAAmC;EACjCf,uBAAuB,EAAEf,SAAS,CAAC+B,IADF;EAEjCf,OAAO,EAAEhB,SAAS,CAACgC;AAFc,CAAnC;;AAKA,MAAMC,WAAW,GAAG,CAACpB,KAAD,EAAQC,OAAR,KAAoB;EACtC,MAAM;IACJoB,KADI;IAEJC,QAFI;IAGJC,WAHI;IAIJC,OAAO,GAAG,EAJN;IAKJC,OALI;IAMJC,kBANI;IAOJxB,uBAPI;IAQJyB,oBARI;IASJC,OATI;IAUJC,OAVI;IAWJC,WAXI;IAYJC,aAZI;IAaJC;EAbI,IAcFhC,KAdJ;EAeA,MAAM;IAACiC,KAAD;IAAQC,OAAR;IAAiBC,iBAAjB;IAAoCC,gBAAgB,GAAG;EAAvD,IAA4DZ,OAAlE;EACA,MAAM;IAACnB;EAAD,IAAcJ,OAApB;EAEA,MAAM,CAACoC,QAAD,EAAWC,WAAX,IAA0BpD,QAAQ,CAAC,KAAD,CAAxC;EAEA,MAAMqD,cAAc,GAAGtD,WAAW,CAAC,MAAMqD,WAAW,CAAC,CAACD,QAAF,CAAlB,EAA+B,CAACC,WAAD,EAAcD,QAAd,CAA/B,CAAlC;EAEA,MAAMG,WAAW,GAAGvD,WAAW,CAAC,MAAM;IACpC,oBACE;MAAK,SAAS,EAAEI,UAAU,CAACQ,KAAK,CAAC0B,WAAP,EAAoB,CAACc,QAAD,IAAaxC,KAAK,CAAC4C,QAAvC;IAA1B,GACGlB,WADH,CADF;EAKD,CAN8B,EAM5B,CAACc,QAAD,EAAWd,WAAX,CAN4B,CAA/B;EAQA,MAAMmB,WAAW,GAAGzD,WAAW,CAAC,MAAM;IACpC,IAAIgD,KAAK,KAAKU,SAAd,EAAyB,OAAO,IAAP;IACzB,MAAMC,gBAAgB,GAAG,SAAzB;IACA,MAAMC,wBAAwB,GAAG;MAC/BpC,eAAe,EAAEmC,gBADc;MAE/BrC,KAAK,EAAG,GAAE0B,KAAM;IAFe,CAAjC;IAKA,oBACE;MAAK,SAAS,EAAEpC,KAAK,CAACiD;IAAtB,gBACE;MACE,aAAU,UADZ;MAEE,SAAS,EAAEjD,KAAK,CAACkD,QAFnB;MAGE,KAAK,EAAEF,wBAHT;MAIE,IAAI,EAAC;IAJP,EADF,CADF;EAUD,CAlB8B,EAkB5B,CAACZ,KAAD,CAlB4B,CAA/B;EAoBA,oBACE;IAAK,SAAS,EAAEpC,KAAK,CAACmD;EAAtB,gBACE;IAAK,SAAS,EAAEnD,KAAK,CAACoD,SAAtB;IAAiC,aAAW3B;EAA5C,GACG,CAAC,OAAMQ,WAAN,CAAD,gBACC,oBAAC,cAAD;IACE,MAAM,EAAC,YADT;IAEE,aAAU,aAFZ;IAGE,cAAW,MAHb;IAIE,OAAO,EAAEA,WAJX;IAKE,SAAS,EAAEjC,KAAK,CAACqD,UALnB;IAME,gBAAgB,EAAC;EANnB,EADD,GASG,IAVN,eAWE;IAAK,SAAS,EAAErD,KAAK,CAACsD;EAAtB,gBACE,iCACG1B,OAAO,gBACN;IAAK,SAAS,EAAE5B,KAAK,CAACuD;EAAtB,gBACE,oBAAC,IAAD;IACE,QAAQ,EAAC,gBADX;IAEE,eAAe,EAAC,SAFlB;IAGE,IAAI,EAAE;MACJC,MAAM,EAAE,EADJ;MAEJC,WAAW,EAAE;IAFT;EAHR,EADF,EASGjD,SAAS,CAAC,aAAD,CATZ,CADM,GAYJ,IAbN,eAcE;IAAK,SAAS,EAAER,KAAK,CAACwB;EAAtB,GAA8BA,KAA9B,CAdF,EAeGE,WAAW,gBACV,uDACE,oBAAC,WAAD,OADF,EAEGA,WAAW,CAACgC,MAAZ,IAAsB,GAAtB,gBACC;IAAK,SAAS,EAAE1D,KAAK,CAAC2D,eAAtB;IAAuC,OAAO,EAAEjB;EAAhD,GACGF,QAAQ,GAAGhC,SAAS,CAAC,WAAD,CAAZ,GAA4BA,SAAS,CAAC,WAAD,CADhD,eAEE,oBAAC,IAAD;IACE,QAAQ,EAAEgC,QAAQ,GAAG,YAAH,GAAkB,cADtC;IAEE,IAAI,EAAE;MACJgB,MAAM,EAAE,EADJ;MAEJC,WAAW,EAAE;IAFT;EAFR,EAFF,CADD,GAWG,IAbN,CADU,GAgBR,IA/BN,CADF,eAmCE;IAAK,SAAS,EAAEzD,KAAK,CAAC4D;EAAtB,gBACE,oBAAC,UAAD;IACE,IAAI,EAAC,WADP;IAEE,OAAO,EAAE1B,aAFX;IAGE,KAAK,EAAE1B,SAAS,CAAC,mBAAD,CAHlB;IAIE,QAAQ,EAAE,CAACqB,kBAJb;IAKE,WAAW,EAAE;MACXnB,KAAK,EAAE,aADI;MAEXC,YAAY,EAAE;IAFH;EALf,EADF,eAWE,oBAAC,sBAAD;IACE,uBAAuB,EAAEN,uBAD3B;IAEE,OAAO,EAAE8B;EAFX,EAXF,CAnCF,CAXF,EA+DGC,KAAK,KAAKU,SAAV,gBACC;IAAK,SAAS,EAAE9C,KAAK,CAAC6D;EAAtB,gBACE;IAAK,SAAS,EAAE7D,KAAK,CAAC8D;EAAtB,GAAsCtD,SAAS,CAAC,eAAD,CAA/C,CADF,eAEE;IAAK,SAAS,EAAER,KAAK,CAAC+D;EAAtB,GACG1B,OAAO,gBACN;IAAK,SAAS,EAAErC,KAAK,CAACgE,gBAAtB;IAAwC,aAAU;EAAlD,gBACE;IAAM,SAAS,EAAEhE,KAAK,CAACiE;EAAvB,GAAgD5B,OAAhD,CADF,EACkE,GADlE,EAEG7B,SAAS,CAAC,SAAD,CAFZ,CADM,GAKJ,IANN,eAOE;IAAK,SAAS,EAAER,KAAK,CAACgE,gBAAtB;IAAwC,aAAU;EAAlD,gBACE;IAAM,SAAS,EAAEhE,KAAK,CAACiE;EAAvB,GAAgD3B,iBAAhD,CADF,UAES9B,SAAS,CAAC,4CAAD,CAFlB,CAPF,CAFF,eAcE,oBAAC,WAAD,OAdF,eAeE;IAAK,SAAS,EAAER,KAAK,CAACkE;EAAtB,GACG7B,OAAO,iBACN,uDACE;IAAK,SAAS,EAAErC,KAAK,CAACmE,mBAAtB;IAA2C,aAAU;EAArD,gBACE;IAAM,SAAS,EAAEnE,KAAK,CAACoE;EAAvB,GAAmD7B,gBAAnD,CADF,EAEI,IAAG/B,SAAS,CAAC,mBAAD,CAAsB,EAFtC,CADF,eAKE;IAAK,SAAS,EAAER,KAAK,CAACmE,mBAAtB;IAA2C,aAAU;EAArD,gBACE;IAAM,SAAS,EAAEnE,KAAK,CAACoE;EAAvB,GAAmDhC,KAAK,CAACiC,OAAN,CAAc,CAAd,CAAnD,MADF,CALF,CAFJ,CAfF,CADD,GA8BG,IA7FN,eA8FE,oBAAC,UAAD;IAAY,OAAO,EAAEvC,oBAArB;IAA2C,OAAO,EAAEC,OAApD;IAA6D,OAAO,EAAEC;EAAtE,EA9FF,CADF,CADF;AAoGD,CAvJD;;AAyJAT,WAAW,CAACL,YAAZ,GAA2B;EACzBX,IAAI,EAAEd,QAAQ,CAAC0B,iBAAT,CAA2BZ,IADR;EAEzBC,SAAS,EAAEf,QAAQ,CAAC0B,iBAAT,CAA2BX;AAFb,CAA3B;AAKAe,WAAW,CAACH,SAAZ,2CAAwB;EACtBI,KAAK,EAAElC,SAAS,CAACgF,MAAV,CAAiBC,UADF;EAEtB9C,QAAQ,EAAEnC,SAAS,CAACgF,MAAV,CAAiBC,UAFL;EAGtB7C,WAAW,EAAEpC,SAAS,CAACgF,MAHD;EAItB3C,OAAO,EAAErC,SAAS,CAACkF,KAAV,CAAgB;IACvBpC,KAAK,EAAE9C,SAAS,CAACmF,MADM;IAEvBpC,OAAO,EAAE/C,SAAS,CAACmF,MAFI;IAGvBnC,iBAAiB,EAAEhD,SAAS,CAACmF,MAHN;IAIvBlC,gBAAgB,EAAEjD,SAAS,CAACmF;EAJL,CAAhB,CAJa;EAUtB7C,OAAO,EAAEtC,SAAS,CAAC+B,IAVG;EAWtBQ,kBAAkB,EAAEvC,SAAS,CAAC+B,IAXR;EAYtBhB,uBAAuB,EAAEf,SAAS,CAAC+B,IAZb;EAatBS,oBAAoB,EAAExC,SAAS,CAACkF,KAAV,CAAgBzE,SAAS,CAACqB,SAA1B,CAbA;EActBW,OAAO,EAAEzC,SAAS,CAACkF,KAAV,CAAgB;IACvBE,QAAQ,EAAEpF,SAAS,CAACgC,IADG;IAEvBqD,OAAO,EAAErF,SAAS,CAACsF,OAAV,CAAkBtF,SAAS,CAACkF,KAAV,CAAgB7E,qBAAhB,CAAlB;EAFc,CAAhB,CAda;EAkBtBqC,OAAO,EAAE1C,SAAS,CAACkF,KAAV,CAAgB9E,MAAM,CAAC0B,SAAvB,CAlBa;EAmBtBa,WAAW,EAAE3C,SAAS,CAACgC,IAnBD;EAoBtBY,aAAa,EAAE5C,SAAS,CAACgC,IApBH;EAqBtBa,uBAAuB,EAAE7C,SAAS,CAACgC;AArBb,CAAxB;AAwBA,eAAeC,WAAf"}
1
+ {"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","convert","classnames","Provider","Select","SelectOptionPropTypes","ButtonLink","ButtonLinkIcon","Icon","CardsGrid","style","AllCourses","ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","width","borderRadius","backgroundColor","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","bool","func","SkillDetail","title","skillRef","description","metrics","focused","availableForReview","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","score","questionsToReview","showMore","setShowMore","handleShowMore","Description","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButton","ctaContainer","skillFocusBadge","faSize","wrapperSize","length","showMoreWrapper","ctaWrapper","skillInformation","skillInformationNumber","progressContainer","progressInformationNumber","toFixed","string","isRequired","shape","number","onChange","options","arrayOf"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, isNil} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\n\nexport const ContinueLearningButton = (props, context) => {\n const {ongoingCoursesAvailable, onClick} = props;\n const {skin, translate} = context;\n const primarySkinColor = get('common.primary', skin);\n\n return (\n <div>\n <ButtonLink\n label={\n ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')\n }\n type=\"primary\"\n customStyle={{\n width: 'fit-content',\n borderRadius: '12px',\n backgroundColor: primarySkinColor\n }}\n hoverBackgroundColor={convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)}\n hoverColor=\"#FFFFFF\"\n icon={{\n position: 'left',\n faIcon: {\n name: 'play',\n color: '#FFFFFF',\n size: 16\n }\n }}\n onClick={onClick}\n />\n </div>\n );\n};\n\nContinueLearningButton.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nContinueLearningButton.propTypes = {\n ongoingCoursesAvailable: PropTypes.bool,\n onClick: PropTypes.func\n};\n\nconst SkillDetail = (props, context) => {\n const {\n title,\n skillRef,\n description,\n metrics = {},\n focused,\n availableForReview,\n ongoingCoursesAvailable,\n skillIncludedCourses,\n filters,\n sorting,\n onBackClick,\n onReviewClick,\n onContinueLearningClick\n } = props;\n const {score = 0, questionsToReview} = metrics;\n const {translate} = context;\n\n const [showMore, setShowMore] = useState(false);\n\n const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n const Description = useCallback(() => {\n return (\n <div className={classnames(style.description, !showMore && style.truncate)}>\n {description}\n </div>\n );\n }, [showMore, description]);\n\n const ProgressBar = useCallback(() => {\n if (score === undefined) return null;\n const progressBarColor = '#3EC483';\n const inlineProgressValueStyle = {\n backgroundColor: progressBarColor,\n width: `${score}%`\n };\n\n return (\n <div className={style.progressBarWrapper}>\n <div\n data-name=\"progress\"\n className={style.progress}\n style={inlineProgressValueStyle}\n role=\"progressbar\"\n />\n </div>\n );\n }, [score]);\n\n return (\n <div className={style.backgroundContainer}>\n <div className={style.container} data-name={skillRef}>\n {!isNil(onBackClick) ? (\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 ) : null}\n <div className={style.ctaContainer}>\n <div>\n {focused ? (\n <div className={style.skillFocusBadge}>\n <Icon\n iconName=\"bullseye-arrow\"\n backgroundColor=\"#DDD1FF\"\n size={{\n faSize: 10,\n wrapperSize: 16\n }}\n />\n {translate('skill_focus')}\n </div>\n ) : null}\n <div className={style.title}>{title}</div>\n {description ? (\n <>\n <Description />\n {description.length >= 226 ? (\n <div className={style.showMoreWrapper} onClick={handleShowMore}>\n {showMore ? translate('Show less') : translate('Show more')}\n <Icon\n iconName={showMore ? 'chevron-up' : 'chevron-down'}\n size={{\n faSize: 14,\n wrapperSize: 16\n }}\n />\n </div>\n ) : null}\n </>\n ) : null}\n </div>\n\n <div className={style.ctaWrapper}>\n <ButtonLink\n type=\"secondary\"\n onClick={onReviewClick}\n label={translate('review_this_skill')}\n disabled={!availableForReview}\n customStyle={{\n width: 'fit-content',\n borderRadius: '12px'\n }}\n />\n <ContinueLearningButton\n ongoingCoursesAvailable={ongoingCoursesAvailable}\n onClick={onContinueLearningClick}\n />\n </div>\n </div>\n {questionsToReview > 0 ? (\n <div className={style.skillInformation} data-name=\"skill-questions\">\n <span className={style.skillInformationNumber}>{questionsToReview}</span>\n &nbsp;{translate('skill_chart_side_panel_questions_to_review')}\n </div>\n ) : null}\n <div className={style.progressContainer}>\n <ProgressBar />\n <span className={style.progressInformationNumber}>{score.toFixed(1)}%</span>\n </div>\n <AllCourses content={skillIncludedCourses} filters={filters} sorting={sorting} />\n </div>\n </div>\n );\n};\n\nSkillDetail.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nSkillDetail.propTypes = {\n title: PropTypes.string.isRequired,\n skillRef: PropTypes.string.isRequired,\n description: PropTypes.string,\n metrics: PropTypes.shape({\n score: PropTypes.number,\n questionsToReview: PropTypes.number\n }),\n focused: PropTypes.bool,\n availableForReview: PropTypes.bool,\n ongoingCoursesAvailable: PropTypes.bool,\n skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n filters: PropTypes.shape({\n onChange: PropTypes.func,\n options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n }),\n sorting: PropTypes.shape(Select.propTypes),\n onBackClick: PropTypes.func,\n onReviewClick: PropTypes.func,\n onContinueLearningClick: PropTypes.func\n};\n\nexport default SkillDetail;\n"],"mappings":"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"}
package/es/template/skill-detail/style.css CHANGED
@@ -6,6 +6,7 @@
6
6
  @value cm_grey_100 from colors;
7
7
  @value cm_grey_200 from colors;
8
8
  @value cm_grey_400 from colors;
9
+ @value cm_grey_500 from colors;
9
10
 
10
11
  .textBase {
11
12
  font-family: "Gilroy";
@@ -96,50 +97,39 @@
96
97
  text-overflow: ellipsis;
97
98
  }
98
99
 
99
- .progressInformationsWrapper {
100
- margin-top: 40px;
101
- background-color: xtraLightGrey;
102
- border-radius: 16px;
103
- padding: 24px;
104
- }
105
-
106
- .progressTitle {
107
- font-size: 16px;
108
- font-weight: 600;
109
- line-height: 22px;
110
- margin-bottom: 16px;
111
- }
112
-
113
- .skillCoursesAndQuestionsWrapper,
114
- .progressInformations {
115
- display: flex;
116
- justify-content: space-between;
117
- margin-bottom: 8px;
118
- }
119
-
120
- .skillInformation,
121
- .progressInformation {
100
+ .skillInformation {
122
101
  composes: textBase;
123
102
  font-weight: 600;
124
103
  font-size: 14px;
125
104
  line-height: 20px;
126
105
  color: cm_grey_400;
106
+ margin-top: 16px;
127
107
  }
128
108
 
129
- .skillInformationNumber,
130
- .progressInformationNumber {
109
+ .skillInformationNumber {
131
110
  color: #000;
132
111
  }
133
112
 
113
+ .progressContainer {
114
+ display: flex;
115
+ align-items: center;
116
+ gap: 8px;
117
+ margin: 16px 0 40px 0;
118
+ }
119
+
120
+ .progressInformationNumber {
121
+ color: cm_grey_500;
122
+ }
123
+
134
124
  .progressBarWrapper {
135
125
  position: relative;
136
126
  left: 0;
127
+ max-width: 300px;
137
128
  width: 100%;
138
129
  height: 4px;
139
130
  border-radius: 2px;
140
131
  overflow: hidden;
141
132
  background-color: cm_grey_100;
142
- margin: 16px 0;
143
133
  }
144
134
 
145
135
  .progress {
package/lib/template/skill-detail/index.d.ts CHANGED
@@ -66,9 +66,7 @@ declare namespace SkillDetail {
66
66
  export const description: PropTypes.Requireable<string>;
67
67
  export const metrics: PropTypes.Requireable<PropTypes.InferProps<{
68
68
  score: PropTypes.Requireable<number>;
69
- content: PropTypes.Requireable<number>;
70
69
  questionsToReview: PropTypes.Requireable<number>;
71
- contentCompleted: PropTypes.Requireable<number>;
72
70
  }>>;
73
71
  export const focused: PropTypes.Requireable<boolean>;
74
72
  export const availableForReview: PropTypes.Requireable<boolean>;
package/lib/template/skill-detail/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":"AAcO,8EA+BN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD,oEAuJC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":"AAcO,8EA+BN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD,oEAkIC"}
package/lib/template/skill-detail/index.js CHANGED
@@ -96,10 +96,8 @@ const SkillDetail = (props, context) => {
96
96
  onContinueLearningClick
97
97
  } = props;
98
98
  const {
99
- score,
100
- content,
101
- questionsToReview,
102
- contentCompleted = 0
99
+ score = 0,
100
+ questionsToReview
103
101
  } = metrics;
104
102
  const {
105
103
  translate
@@ -175,35 +173,16 @@ const SkillDetail = (props, context) => {
175
173
  }), /*#__PURE__*/_react.default.createElement(ContinueLearningButton, {
176
174
  ongoingCoursesAvailable: ongoingCoursesAvailable,
177
175
  onClick: onContinueLearningClick
178
- }))), score !== undefined ? /*#__PURE__*/_react.default.createElement("div", {
179
- className: _style.default.progressInformationsWrapper
180
- }, /*#__PURE__*/_react.default.createElement("div", {
181
- className: _style.default.progressTitle
182
- }, translate('your_progress')), /*#__PURE__*/_react.default.createElement("div", {
183
- className: _style.default.skillCoursesAndQuestionsWrapper
184
- }, content ? /*#__PURE__*/_react.default.createElement("div", {
185
- className: _style.default.skillInformation,
186
- "data-name": "skill-courses"
187
- }, /*#__PURE__*/_react.default.createElement("span", {
188
- className: _style.default.skillInformationNumber
189
- }, content), ' ', translate('courses')) : null, /*#__PURE__*/_react.default.createElement("div", {
176
+ }))), questionsToReview > 0 ? /*#__PURE__*/_react.default.createElement("div", {
190
177
  className: _style.default.skillInformation,
191
178
  "data-name": "skill-questions"
192
179
  }, /*#__PURE__*/_react.default.createElement("span", {
193
180
  className: _style.default.skillInformationNumber
194
- }, questionsToReview), "\xA0", translate('skill_chart_side_panel_questions_to_review'))), /*#__PURE__*/_react.default.createElement(ProgressBar, null), /*#__PURE__*/_react.default.createElement("div", {
195
- className: _style.default.progressInformations
196
- }, content && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
197
- className: _style.default.progressInformation,
198
- "data-name": "skill-completed-courses"
199
- }, /*#__PURE__*/_react.default.createElement("span", {
200
- className: _style.default.progressInformationNumber
201
- }, contentCompleted), ` ${translate('courses_completed')}`), /*#__PURE__*/_react.default.createElement("div", {
202
- className: _style.default.progressInformation,
203
- "data-name": "completed-percentage"
204
- }, /*#__PURE__*/_react.default.createElement("span", {
181
+ }, questionsToReview), "\xA0", translate('skill_chart_side_panel_questions_to_review')) : null, /*#__PURE__*/_react.default.createElement("div", {
182
+ className: _style.default.progressContainer
183
+ }, /*#__PURE__*/_react.default.createElement(ProgressBar, null), /*#__PURE__*/_react.default.createElement("span", {
205
184
  className: _style.default.progressInformationNumber
206
- }, score.toFixed(1), "%"))))) : null, /*#__PURE__*/_react.default.createElement(_allCourses.default, {
185
+ }, score.toFixed(1), "%")), /*#__PURE__*/_react.default.createElement(_allCourses.default, {
207
186
  content: skillIncludedCourses,
208
187
  filters: filters,
209
188
  sorting: sorting
@@ -220,9 +199,7 @@ SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
220
199
  description: _propTypes.default.string,
221
200
  metrics: _propTypes.default.shape({
222
201
  score: _propTypes.default.number,
223
- content: _propTypes.default.number,
224
- questionsToReview: _propTypes.default.number,
225
- contentCompleted: _propTypes.default.number
202
+ questionsToReview: _propTypes.default.number
226
203
  }),
227
204
  focused: _propTypes.default.bool,
228
205
  availableForReview: _propTypes.default.bool,
package/lib/template/skill-detail/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","width","borderRadius","backgroundColor","convert","position","faIcon","name","color","size","contextTypes","Provider","childContextTypes","propTypes","PropTypes","bool","func","SkillDetail","title","skillRef","description","metrics","focused","availableForReview","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","score","content","questionsToReview","contentCompleted","showMore","setShowMore","useState","handleShowMore","useCallback","Description","classnames","style","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButton","ctaContainer","skillFocusBadge","faSize","wrapperSize","length","showMoreWrapper","ctaWrapper","progressInformationsWrapper","progressTitle","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","progressInformations","progressInformation","progressInformationNumber","toFixed","string","isRequired","shape","number","CardsGrid","onChange","options","arrayOf","SelectOptionPropTypes","Select"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, isNil} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\n\nexport const ContinueLearningButton = (props, context) => {\n const {ongoingCoursesAvailable, onClick} = props;\n const {skin, translate} = context;\n const primarySkinColor = get('common.primary', skin);\n\n return (\n <div>\n <ButtonLink\n label={\n ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')\n }\n type=\"primary\"\n customStyle={{\n width: 'fit-content',\n borderRadius: '12px',\n backgroundColor: primarySkinColor\n }}\n hoverBackgroundColor={convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)}\n hoverColor=\"#FFFFFF\"\n icon={{\n position: 'left',\n faIcon: {\n name: 'play',\n color: '#FFFFFF',\n size: 16\n }\n }}\n onClick={onClick}\n />\n </div>\n );\n};\n\nContinueLearningButton.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nContinueLearningButton.propTypes = {\n ongoingCoursesAvailable: PropTypes.bool,\n onClick: PropTypes.func\n};\n\nconst SkillDetail = (props, context) => {\n const {\n title,\n skillRef,\n description,\n metrics = {},\n focused,\n availableForReview,\n ongoingCoursesAvailable,\n skillIncludedCourses,\n filters,\n sorting,\n onBackClick,\n onReviewClick,\n onContinueLearningClick\n } = props;\n const {score, content, questionsToReview, contentCompleted = 0} = metrics;\n const {translate} = context;\n\n const [showMore, setShowMore] = useState(false);\n\n const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n const Description = useCallback(() => {\n return (\n <div className={classnames(style.description, !showMore && style.truncate)}>\n {description}\n </div>\n );\n }, [showMore, description]);\n\n const ProgressBar = useCallback(() => {\n if (score === undefined) return null;\n const progressBarColor = '#3EC483';\n const inlineProgressValueStyle = {\n backgroundColor: progressBarColor,\n width: `${score}%`\n };\n\n return (\n <div className={style.progressBarWrapper}>\n <div\n data-name=\"progress\"\n className={style.progress}\n style={inlineProgressValueStyle}\n role=\"progressbar\"\n />\n </div>\n );\n }, [score]);\n\n return (\n <div className={style.backgroundContainer}>\n <div className={style.container} data-name={skillRef}>\n {!isNil(onBackClick) ? (\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 ) : null}\n <div className={style.ctaContainer}>\n <div>\n {focused ? (\n <div className={style.skillFocusBadge}>\n <Icon\n iconName=\"bullseye-arrow\"\n backgroundColor=\"#DDD1FF\"\n size={{\n faSize: 10,\n wrapperSize: 16\n }}\n />\n {translate('skill_focus')}\n </div>\n ) : null}\n <div className={style.title}>{title}</div>\n {description ? (\n <>\n <Description />\n {description.length >= 226 ? (\n <div className={style.showMoreWrapper} onClick={handleShowMore}>\n {showMore ? translate('Show less') : translate('Show more')}\n <Icon\n iconName={showMore ? 'chevron-up' : 'chevron-down'}\n size={{\n faSize: 14,\n wrapperSize: 16\n }}\n />\n </div>\n ) : null}\n </>\n ) : null}\n </div>\n\n <div className={style.ctaWrapper}>\n <ButtonLink\n type=\"secondary\"\n onClick={onReviewClick}\n label={translate('review_this_skill')}\n disabled={!availableForReview}\n customStyle={{\n width: 'fit-content',\n borderRadius: '12px'\n }}\n />\n <ContinueLearningButton\n ongoingCoursesAvailable={ongoingCoursesAvailable}\n onClick={onContinueLearningClick}\n />\n </div>\n </div>\n {score !== undefined ? (\n <div className={style.progressInformationsWrapper}>\n <div className={style.progressTitle}>{translate('your_progress')}</div>\n <div className={style.skillCoursesAndQuestionsWrapper}>\n {content ? (\n <div className={style.skillInformation} data-name=\"skill-courses\">\n <span className={style.skillInformationNumber}>{content}</span>{' '}\n {translate('courses')}\n </div>\n ) : null}\n <div className={style.skillInformation} data-name=\"skill-questions\">\n <span className={style.skillInformationNumber}>{questionsToReview}</span>\n &nbsp;{translate('skill_chart_side_panel_questions_to_review')}\n </div>\n </div>\n <ProgressBar />\n <div className={style.progressInformations}>\n {content && (\n <>\n <div className={style.progressInformation} data-name=\"skill-completed-courses\">\n <span className={style.progressInformationNumber}>{contentCompleted}</span>\n {` ${translate('courses_completed')}`}\n </div>\n <div className={style.progressInformation} data-name=\"completed-percentage\">\n <span className={style.progressInformationNumber}>{score.toFixed(1)}%</span>\n </div>\n </>\n )}\n </div>\n </div>\n ) : null}\n <AllCourses content={skillIncludedCourses} filters={filters} sorting={sorting} />\n </div>\n </div>\n );\n};\n\nSkillDetail.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nSkillDetail.propTypes = {\n title: PropTypes.string.isRequired,\n skillRef: PropTypes.string.isRequired,\n description: PropTypes.string,\n metrics: PropTypes.shape({\n score: PropTypes.number,\n content: PropTypes.number,\n questionsToReview: PropTypes.number,\n contentCompleted: PropTypes.number\n }),\n focused: PropTypes.bool,\n availableForReview: PropTypes.bool,\n ongoingCoursesAvailable: PropTypes.bool,\n skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n filters: PropTypes.shape({\n onChange: PropTypes.func,\n options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n }),\n sorting: PropTypes.shape(Select.propTypes),\n onBackClick: PropTypes.func,\n onReviewClick: PropTypes.func,\n onContinueLearningClick: PropTypes.func\n};\n\nexport default SkillDetail;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","width","borderRadius","backgroundColor","convert","position","faIcon","name","color","size","contextTypes","Provider","childContextTypes","propTypes","PropTypes","bool","func","SkillDetail","title","skillRef","description","metrics","focused","availableForReview","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","score","questionsToReview","showMore","setShowMore","useState","handleShowMore","useCallback","Description","classnames","style","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButton","ctaContainer","skillFocusBadge","faSize","wrapperSize","length","showMoreWrapper","ctaWrapper","skillInformation","skillInformationNumber","progressContainer","progressInformationNumber","toFixed","string","isRequired","shape","number","CardsGrid","onChange","options","arrayOf","SelectOptionPropTypes","Select"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, isNil} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\n\nexport const ContinueLearningButton = (props, context) => {\n const {ongoingCoursesAvailable, onClick} = props;\n const {skin, translate} = context;\n const primarySkinColor = get('common.primary', skin);\n\n return (\n <div>\n <ButtonLink\n label={\n ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')\n }\n type=\"primary\"\n customStyle={{\n width: 'fit-content',\n borderRadius: '12px',\n backgroundColor: primarySkinColor\n }}\n hoverBackgroundColor={convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)}\n hoverColor=\"#FFFFFF\"\n icon={{\n position: 'left',\n faIcon: {\n name: 'play',\n color: '#FFFFFF',\n size: 16\n }\n }}\n onClick={onClick}\n />\n </div>\n );\n};\n\nContinueLearningButton.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nContinueLearningButton.propTypes = {\n ongoingCoursesAvailable: PropTypes.bool,\n onClick: PropTypes.func\n};\n\nconst SkillDetail = (props, context) => {\n const {\n title,\n skillRef,\n description,\n metrics = {},\n focused,\n availableForReview,\n ongoingCoursesAvailable,\n skillIncludedCourses,\n filters,\n sorting,\n onBackClick,\n onReviewClick,\n onContinueLearningClick\n } = props;\n const {score = 0, questionsToReview} = metrics;\n const {translate} = context;\n\n const [showMore, setShowMore] = useState(false);\n\n const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n const Description = useCallback(() => {\n return (\n <div className={classnames(style.description, !showMore && style.truncate)}>\n {description}\n </div>\n );\n }, [showMore, description]);\n\n const ProgressBar = useCallback(() => {\n if (score === undefined) return null;\n const progressBarColor = '#3EC483';\n const inlineProgressValueStyle = {\n backgroundColor: progressBarColor,\n width: `${score}%`\n };\n\n return (\n <div className={style.progressBarWrapper}>\n <div\n data-name=\"progress\"\n className={style.progress}\n style={inlineProgressValueStyle}\n role=\"progressbar\"\n />\n </div>\n );\n }, [score]);\n\n return (\n <div className={style.backgroundContainer}>\n <div className={style.container} data-name={skillRef}>\n {!isNil(onBackClick) ? (\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 ) : null}\n <div className={style.ctaContainer}>\n <div>\n {focused ? (\n <div className={style.skillFocusBadge}>\n <Icon\n iconName=\"bullseye-arrow\"\n backgroundColor=\"#DDD1FF\"\n size={{\n faSize: 10,\n wrapperSize: 16\n }}\n />\n {translate('skill_focus')}\n </div>\n ) : null}\n <div className={style.title}>{title}</div>\n {description ? (\n <>\n <Description />\n {description.length >= 226 ? (\n <div className={style.showMoreWrapper} onClick={handleShowMore}>\n {showMore ? translate('Show less') : translate('Show more')}\n <Icon\n iconName={showMore ? 'chevron-up' : 'chevron-down'}\n size={{\n faSize: 14,\n wrapperSize: 16\n }}\n />\n </div>\n ) : null}\n </>\n ) : null}\n </div>\n\n <div className={style.ctaWrapper}>\n <ButtonLink\n type=\"secondary\"\n onClick={onReviewClick}\n label={translate('review_this_skill')}\n disabled={!availableForReview}\n customStyle={{\n width: 'fit-content',\n borderRadius: '12px'\n }}\n />\n <ContinueLearningButton\n ongoingCoursesAvailable={ongoingCoursesAvailable}\n onClick={onContinueLearningClick}\n />\n </div>\n </div>\n {questionsToReview > 0 ? (\n <div className={style.skillInformation} data-name=\"skill-questions\">\n <span className={style.skillInformationNumber}>{questionsToReview}</span>\n &nbsp;{translate('skill_chart_side_panel_questions_to_review')}\n </div>\n ) : null}\n <div className={style.progressContainer}>\n <ProgressBar />\n <span className={style.progressInformationNumber}>{score.toFixed(1)}%</span>\n </div>\n <AllCourses content={skillIncludedCourses} filters={filters} sorting={sorting} />\n </div>\n </div>\n );\n};\n\nSkillDetail.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nSkillDetail.propTypes = {\n title: PropTypes.string.isRequired,\n skillRef: PropTypes.string.isRequired,\n description: PropTypes.string,\n metrics: PropTypes.shape({\n score: PropTypes.number,\n questionsToReview: PropTypes.number\n }),\n focused: PropTypes.bool,\n availableForReview: PropTypes.bool,\n ongoingCoursesAvailable: PropTypes.bool,\n skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n filters: PropTypes.shape({\n onChange: PropTypes.func,\n options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n }),\n sorting: PropTypes.shape(Select.propTypes),\n onBackClick: PropTypes.func,\n onReviewClick: PropTypes.func,\n onContinueLearningClick: PropTypes.func\n};\n\nexport default SkillDetail;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEO,MAAMA,sBAAsB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACxD,MAAM;IAACC,uBAAD;IAA0BC;EAA1B,IAAqCH,KAA3C;EACA,MAAM;IAACI,IAAD;IAAOC;EAAP,IAAoBJ,OAA1B;EACA,MAAMK,gBAAgB,GAAG,mBAAI,gBAAJ,EAAsBF,IAAtB,CAAzB;EAEA,oBACE,uDACE,6BAAC,mBAAD;IACE,KAAK,EACHF,uBAAuB,GAAGG,SAAS,CAAC,mBAAD,CAAZ,GAAoCA,SAAS,CAAC,gBAAD,CAFxE;IAIE,IAAI,EAAC,SAJP;IAKE,WAAW,EAAE;MACXE,KAAK,EAAE,aADI;MAEXC,YAAY,EAAE,MAFH;MAGXC,eAAe,EAAEH;IAHN,CALf;IAUE,oBAAoB,EAAE,IAAAI,yBAAA,EAAS,YAAWJ,gBAAiB,0BAArC,CAVxB;IAWE,UAAU,EAAC,SAXb;IAYE,IAAI,EAAE;MACJK,QAAQ,EAAE,MADN;MAEJC,MAAM,EAAE;QACNC,IAAI,EAAE,MADA;QAENC,KAAK,EAAE,SAFD;QAGNC,IAAI,EAAE;MAHA;IAFJ,CAZR;IAoBE,OAAO,EAAEZ;EApBX,EADF,CADF;AA0BD,CA/BM;;;AAiCPJ,sBAAsB,CAACiB,YAAvB,GAAsC;EACpCZ,IAAI,EAAEa,iBAAA,CAASC,iBAAT,CAA2Bd,IADG;EAEpCC,SAAS,EAAEY,iBAAA,CAASC,iBAAT,CAA2Bb;AAFF,CAAtC;AAKAN,sBAAsB,CAACoB,SAAvB,2CAAmC;EACjCjB,uBAAuB,EAAEkB,kBAAA,CAAUC,IADF;EAEjClB,OAAO,EAAEiB,kBAAA,CAAUE;AAFc,CAAnC;;AAKA,MAAMC,WAAW,GAAG,CAACvB,KAAD,EAAQC,OAAR,KAAoB;EACtC,MAAM;IACJuB,KADI;IAEJC,QAFI;IAGJC,WAHI;IAIJC,OAAO,GAAG,EAJN;IAKJC,OALI;IAMJC,kBANI;IAOJ3B,uBAPI;IAQJ4B,oBARI;IASJC,OATI;IAUJC,OAVI;IAWJC,WAXI;IAYJC,aAZI;IAaJC;EAbI,IAcFnC,KAdJ;EAeA,MAAM;IAACoC,KAAK,GAAG,CAAT;IAAYC;EAAZ,IAAiCV,OAAvC;EACA,MAAM;IAACtB;EAAD,IAAcJ,OAApB;EAEA,MAAM,CAACqC,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,CAAMnB,WAAjB,EAA8B,CAACY,QAAD,IAAaO,cAAA,CAAMC,QAAjD;IAAhB,GACGpB,WADH,CADF;EAKD,CANmB,EAMjB,CAACY,QAAD,EAAWZ,WAAX,CANiB,CAApB;EAQA,MAAMqB,WAAW,GAAG,IAAAL,kBAAA,EAAY,MAAM;IACpC,IAAIN,KAAK,KAAKY,SAAd,EAAyB,OAAO,IAAP;IACzB,MAAMC,gBAAgB,GAAG,SAAzB;IACA,MAAMC,wBAAwB,GAAG;MAC/BzC,eAAe,EAAEwC,gBADc;MAE/B1C,KAAK,EAAG,GAAE6B,KAAM;IAFe,CAAjC;IAKA,oBACE;MAAK,SAAS,EAAES,cAAA,CAAMM;IAAtB,gBACE;MACE,aAAU,UADZ;MAEE,SAAS,EAAEN,cAAA,CAAMO,QAFnB;MAGE,KAAK,EAAEF,wBAHT;MAIE,IAAI,EAAC;IAJP,EADF,CADF;EAUD,CAlBmB,EAkBjB,CAACd,KAAD,CAlBiB,CAApB;EAoBA,oBACE;IAAK,SAAS,EAAES,cAAA,CAAMQ;EAAtB,gBACE;IAAK,SAAS,EAAER,cAAA,CAAMS,SAAtB;IAAiC,aAAW7B;EAA5C,GACG,CAAC,qBAAMQ,WAAN,CAAD,gBACC,6BAAC,uBAAD;IACE,MAAM,EAAC,YADT;IAEE,aAAU,aAFZ;IAGE,cAAW,MAHb;IAIE,OAAO,EAAEA,WAJX;IAKE,SAAS,EAAEY,cAAA,CAAMU,UALnB;IAME,gBAAgB,EAAC;EANnB,EADD,GASG,IAVN,eAWE;IAAK,SAAS,EAAEV,cAAA,CAAMW;EAAtB,gBACE,0CACG5B,OAAO,gBACN;IAAK,SAAS,EAAEiB,cAAA,CAAMY;EAAtB,gBACE,6BAAC,aAAD;IACE,QAAQ,EAAC,gBADX;IAEE,eAAe,EAAC,SAFlB;IAGE,IAAI,EAAE;MACJC,MAAM,EAAE,EADJ;MAEJC,WAAW,EAAE;IAFT;EAHR,EADF,EASGtD,SAAS,CAAC,aAAD,CATZ,CADM,GAYJ,IAbN,eAcE;IAAK,SAAS,EAAEwC,cAAA,CAAMrB;EAAtB,GAA8BA,KAA9B,CAdF,EAeGE,WAAW,gBACV,yEACE,6BAAC,WAAD,OADF,EAEGA,WAAW,CAACkC,MAAZ,IAAsB,GAAtB,gBACC;IAAK,SAAS,EAAEf,cAAA,CAAMgB,eAAtB;IAAuC,OAAO,EAAEpB;EAAhD,GACGH,QAAQ,GAAGjC,SAAS,CAAC,WAAD,CAAZ,GAA4BA,SAAS,CAAC,WAAD,CADhD,eAEE,6BAAC,aAAD;IACE,QAAQ,EAAEiC,QAAQ,GAAG,YAAH,GAAkB,cADtC;IAEE,IAAI,EAAE;MACJoB,MAAM,EAAE,EADJ;MAEJC,WAAW,EAAE;IAFT;EAFR,EAFF,CADD,GAWG,IAbN,CADU,GAgBR,IA/BN,CADF,eAmCE;IAAK,SAAS,EAAEd,cAAA,CAAMiB;EAAtB,gBACE,6BAAC,mBAAD;IACE,IAAI,EAAC,WADP;IAEE,OAAO,EAAE5B,aAFX;IAGE,KAAK,EAAE7B,SAAS,CAAC,mBAAD,CAHlB;IAIE,QAAQ,EAAE,CAACwB,kBAJb;IAKE,WAAW,EAAE;MACXtB,KAAK,EAAE,aADI;MAEXC,YAAY,EAAE;IAFH;EALf,EADF,eAWE,6BAAC,sBAAD;IACE,uBAAuB,EAAEN,uBAD3B;IAEE,OAAO,EAAEiC;EAFX,EAXF,CAnCF,CAXF,EA+DGE,iBAAiB,GAAG,CAApB,gBACC;IAAK,SAAS,EAAEQ,cAAA,CAAMkB,gBAAtB;IAAwC,aAAU;EAAlD,gBACE;IAAM,SAAS,EAAElB,cAAA,CAAMmB;EAAvB,GAAgD3B,iBAAhD,CADF,UAEShC,SAAS,CAAC,4CAAD,CAFlB,CADD,GAKG,IApEN,eAqEE;IAAK,SAAS,EAAEwC,cAAA,CAAMoB;EAAtB,gBACE,6BAAC,WAAD,OADF,eAEE;IAAM,SAAS,EAAEpB,cAAA,CAAMqB;EAAvB,GAAmD9B,KAAK,CAAC+B,OAAN,CAAc,CAAd,CAAnD,MAFF,CArEF,eAyEE,6BAAC,mBAAD;IAAY,OAAO,EAAErC,oBAArB;IAA2C,OAAO,EAAEC,OAApD;IAA6D,OAAO,EAAEC;EAAtE,EAzEF,CADF,CADF;AA+ED,CAlID;;AAoIAT,WAAW,CAACP,YAAZ,GAA2B;EACzBZ,IAAI,EAAEa,iBAAA,CAASC,iBAAT,CAA2Bd,IADR;EAEzBC,SAAS,EAAEY,iBAAA,CAASC,iBAAT,CAA2Bb;AAFb,CAA3B;AAKAkB,WAAW,CAACJ,SAAZ,2CAAwB;EACtBK,KAAK,EAAEJ,kBAAA,CAAUgD,MAAV,CAAiBC,UADF;EAEtB5C,QAAQ,EAAEL,kBAAA,CAAUgD,MAAV,CAAiBC,UAFL;EAGtB3C,WAAW,EAAEN,kBAAA,CAAUgD,MAHD;EAItBzC,OAAO,EAAEP,kBAAA,CAAUkD,KAAV,CAAgB;IACvBlC,KAAK,EAAEhB,kBAAA,CAAUmD,MADM;IAEvBlC,iBAAiB,EAAEjB,kBAAA,CAAUmD;EAFN,CAAhB,CAJa;EAQtB3C,OAAO,EAAER,kBAAA,CAAUC,IARG;EAStBQ,kBAAkB,EAAET,kBAAA,CAAUC,IATR;EAUtBnB,uBAAuB,EAAEkB,kBAAA,CAAUC,IAVb;EAWtBS,oBAAoB,EAAEV,kBAAA,CAAUkD,KAAV,CAAgBE,kBAAA,CAAUrD,SAA1B,CAXA;EAYtBY,OAAO,EAAEX,kBAAA,CAAUkD,KAAV,CAAgB;IACvBG,QAAQ,EAAErD,kBAAA,CAAUE,IADG;IAEvBoD,OAAO,EAAEtD,kBAAA,CAAUuD,OAAV,CAAkBvD,kBAAA,CAAUkD,KAAV,CAAgBM,6BAAhB,CAAlB;EAFc,CAAhB,CAZa;EAgBtB5C,OAAO,EAAEZ,kBAAA,CAAUkD,KAAV,CAAgBO,eAAA,CAAO1D,SAAvB,CAhBa;EAiBtBc,WAAW,EAAEb,kBAAA,CAAUE,IAjBD;EAkBtBY,aAAa,EAAEd,kBAAA,CAAUE,IAlBH;EAmBtBa,uBAAuB,EAAEf,kBAAA,CAAUE;AAnBb,CAAxB;eAsBeC,W"}
package/lib/template/skill-detail/style.css CHANGED
@@ -6,6 +6,7 @@
6
6
  @value cm_grey_100 from colors;
7
7
  @value cm_grey_200 from colors;
8
8
  @value cm_grey_400 from colors;
9
+ @value cm_grey_500 from colors;
9
10
 
10
11
  .textBase {
11
12
  font-family: "Gilroy";
@@ -96,50 +97,39 @@
96
97
  text-overflow: ellipsis;
97
98
  }
98
99
 
99
- .progressInformationsWrapper {
100
- margin-top: 40px;
101
- background-color: xtraLightGrey;
102
- border-radius: 16px;
103
- padding: 24px;
104
- }
105
-
106
- .progressTitle {
107
- font-size: 16px;
108
- font-weight: 600;
109
- line-height: 22px;
110
- margin-bottom: 16px;
111
- }
112
-
113
- .skillCoursesAndQuestionsWrapper,
114
- .progressInformations {
115
- display: flex;
116
- justify-content: space-between;
117
- margin-bottom: 8px;
118
- }
119
-
120
- .skillInformation,
121
- .progressInformation {
100
+ .skillInformation {
122
101
  composes: textBase;
123
102
  font-weight: 600;
124
103
  font-size: 14px;
125
104
  line-height: 20px;
126
105
  color: cm_grey_400;
106
+ margin-top: 16px;
127
107
  }
128
108
 
129
- .skillInformationNumber,
130
- .progressInformationNumber {
109
+ .skillInformationNumber {
131
110
  color: #000;
132
111
  }
133
112
 
113
+ .progressContainer {
114
+ display: flex;
115
+ align-items: center;
116
+ gap: 8px;
117
+ margin: 16px 0 40px 0;
118
+ }
119
+
120
+ .progressInformationNumber {
121
+ color: cm_grey_500;
122
+ }
123
+
134
124
  .progressBarWrapper {
135
125
  position: relative;
136
126
  left: 0;
127
+ max-width: 300px;
137
128
  width: 100%;
138
129
  height: 4px;
139
130
  border-radius: 2px;
140
131
  overflow: hidden;
141
132
  background-color: cm_grey_100;
142
- margin: 16px 0;
143
133
  }
144
134
 
145
135
  .progress {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coorpacademy/components",
3
- "version": "11.32.37",
3
+ "version": "11.32.38-alpha.0+0c6f356cd",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
@@ -177,5 +177,5 @@
177
177
  "last 2 versions",
178
178
  "IE 11"
179
179
  ],
180
- "gitHead": "5b5e11456b4a168023c36374f5a18bde7f8b939f"
180
+ "gitHead": "0c6f356cde5acbc844fe7eef93688531664f5ea3"
181
181
  }