@coorpacademy/components 11.32.38 → 11.32.39-alpha.4

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 (9) hide show
  1. package/es/molecule/learner-skill-card/index.d.ts.map +1 -1
  2. package/es/molecule/learner-skill-card/index.js +6 -19
  3. package/es/molecule/learner-skill-card/index.js.map +1 -1
  4. package/es/molecule/learner-skill-card/style.css +3 -0
  5. package/lib/molecule/learner-skill-card/index.d.ts.map +1 -1
  6. package/lib/molecule/learner-skill-card/index.js +6 -19
  7. package/lib/molecule/learner-skill-card/index.js.map +1 -1
  8. package/lib/molecule/learner-skill-card/style.css +3 -0
  9. package/package.json +2 -2
package/es/molecule/learner-skill-card/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learner-skill-card/index.js"],"names":[],"mappings":";AASA,yEAiJC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learner-skill-card/index.js"],"names":[],"mappings":";AASA,yEAoIC"}
package/es/molecule/learner-skill-card/index.js CHANGED
@@ -21,8 +21,7 @@ const LearnerSkillCard = (props, context) => {
21
21
  const {
22
22
  score,
23
23
  content,
24
- questionsToReview,
25
- contentCompleted = 0
24
+ questionsToReview = 0
26
25
  } = metrics;
27
26
  const {
28
27
  skin,
@@ -33,10 +32,8 @@ const LearnerSkillCard = (props, context) => {
33
32
 
34
33
  const reviewLocale = translate('Review');
35
34
  const exploreLocale = translate('Explore');
36
- const coursesLocale = translate('courses');
37
35
  const questionsLocale = translate('questions');
38
36
  const skillFocusLocale = translate('skill_focus');
39
- const contentCompletedLocale = translate('courses_completed');
40
37
  const buttonReviewProps = {
41
38
  customStyle: {
42
39
  backgroundColor: '#FFF',
@@ -92,14 +89,9 @@ const LearnerSkillCard = (props, context) => {
92
89
  className: style.learnerSkillCardWrapper,
93
90
  "data-name": "learner-skill-card-wrapper",
94
91
  "aria-label": ariaLabel
95
- }, content || questionsToReview ? /*#__PURE__*/React.createElement("div", {
92
+ }, questionsToReview ? /*#__PURE__*/React.createElement("div", {
96
93
  className: style.skillCoursesAndQuestionsWrapper
97
- }, content ? /*#__PURE__*/React.createElement("div", {
98
- className: style.skillInformation,
99
- "data-name": "skill-courses"
100
- }, /*#__PURE__*/React.createElement("span", {
101
- className: style.skillInformationNumber
102
- }, content), " ", coursesLocale) : null, questionsToReview ? /*#__PURE__*/React.createElement("div", {
94
+ }, questionsToReview ? /*#__PURE__*/React.createElement("div", {
103
95
  className: style.skillInformation,
104
96
  "data-name": "skill-questions"
105
97
  }, /*#__PURE__*/React.createElement("span", {
@@ -119,19 +111,14 @@ const LearnerSkillCard = (props, context) => {
119
111
  faSize: 10,
120
112
  wrapperSize: 16
121
113
  }
122
- }), skillFocusLocale) : null), /*#__PURE__*/React.createElement(ProgressBar, null), /*#__PURE__*/React.createElement("div", {
114
+ }), skillFocusLocale) : null), /*#__PURE__*/React.createElement("div", {
123
115
  className: style.progressInformations
124
- }, content ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
125
- className: style.progressInformation,
126
- "data-name": "skill-completed-courses"
127
- }, /*#__PURE__*/React.createElement("span", {
128
- className: style.progressInformationNumber
129
- }, contentCompleted), ` ${contentCompletedLocale}`), /*#__PURE__*/React.createElement("div", {
116
+ }, /*#__PURE__*/React.createElement(ProgressBar, null), content ? /*#__PURE__*/React.createElement("div", {
130
117
  className: style.progressInformation,
131
118
  "data-name": "completed-percentage"
132
119
  }, /*#__PURE__*/React.createElement("span", {
133
120
  className: style.progressInformationNumber
134
- }, score, "%"))) : null), /*#__PURE__*/React.createElement("div", {
121
+ }, score, "%")) : null), /*#__PURE__*/React.createElement("div", {
135
122
  className: style.ctaWrapper,
136
123
  "data-name": "cta-wrapper"
137
124
  }, /*#__PURE__*/React.createElement(ButtonLink, buttonReviewProps), /*#__PURE__*/React.createElement("div", {
package/es/molecule/learner-skill-card/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","useCallback","convert","PropTypes","Icon","ButtonLink","Provider","style","LearnerSkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","focus","metrics","review","onReviewClick","onExploreClick","score","content","questionsToReview","contentCompleted","skin","translate","primarySkinColor","reviewLocale","exploreLocale","coursesLocale","questionsLocale","skillFocusLocale","contentCompletedLocale","buttonReviewProps","customStyle","backgroundColor","transition","padding","disabled","onClick","label","buttonExploreProps","color","hoverColor","hoverBackgroundColor","icon","position","faIcon","name","size","ProgressBar","progressBarColor","inlineProgressValueStyle","width","progressWrapper","progress","learnerSkillCardWrapper","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","skillTitleWrapper","skillFocusBadge","faSize","wrapperSize","progressInformations","progressInformation","progressInformationNumber","ctaWrapper","buttonWrapper","contextTypes","childContextTypes","propTypes","string","bool","shape","number","func"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport {convert} from 'css-color-function';\nimport {get} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\n\nconst LearnerSkillCard = (props, context) => {\n const {\n 'aria-label': ariaLabel,\n skillTitle,\n skillAriaLabel,\n focus = false,\n metrics,\n review = false,\n onReviewClick,\n onExploreClick\n } = props;\n const {score, content, questionsToReview, contentCompleted = 0} = metrics;\n const {skin, translate} = context;\n const primarySkinColor = get('common.primary', skin);\n\n const reviewLocale = translate('Review');\n const exploreLocale = translate('Explore');\n const coursesLocale = translate('courses');\n const questionsLocale = translate('questions');\n const skillFocusLocale = translate('skill_focus');\n const contentCompletedLocale = translate('courses_completed');\n\n const buttonReviewProps = {\n customStyle: {\n backgroundColor: '#FFF',\n transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n padding: '0px'\n },\n disabled: !review,\n onClick: onReviewClick,\n 'aria-label': `${skillTitle}, ${reviewLocale}`,\n label: reviewLocale,\n 'data-name': 'learner-skill-card-review-button'\n };\n\n const buttonExploreProps = {\n customStyle: {\n backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n color: primarySkinColor,\n transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n },\n hoverColor: '#FFFFFF',\n hoverBackgroundColor: primarySkinColor,\n onClick: onExploreClick,\n 'aria-label': `${skillTitle}, ${exploreLocale}`,\n label: exploreLocale,\n 'data-name': 'learner-skill-card-explore-button',\n icon: {\n position: 'left',\n faIcon: {\n name: 'compass',\n backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n color: primarySkinColor,\n size: 16\n }\n }\n };\n\n const ProgressBar = useCallback(() => {\n if (!content) return null;\n\n const progressBarColor = '#3EC483';\n const inlineProgressValueStyle = {\n backgroundColor: progressBarColor,\n width: `${score}%`\n };\n\n return (\n <div className={style.progressWrapper}>\n <div\n data-name=\"progress\"\n className={style.progress}\n style={inlineProgressValueStyle}\n role=\"progressbar\"\n aria-label={get('progression', ariaLabel)}\n />\n </div>\n );\n }, [score, ariaLabel, content]);\n\n return (\n <div\n className={style.learnerSkillCardWrapper}\n data-name=\"learner-skill-card-wrapper\"\n aria-label={ariaLabel}\n >\n {content || questionsToReview ? (\n <div className={style.skillCoursesAndQuestionsWrapper}>\n {content ? (\n <div className={style.skillInformation} data-name=\"skill-courses\">\n <span className={style.skillInformationNumber}>{content}</span> {coursesLocale}\n </div>\n ) : null}\n {questionsToReview ? (\n <div className={style.skillInformation} data-name=\"skill-questions\">\n <span className={style.skillInformationNumber}>{questionsToReview}</span>\n &nbsp;{questionsLocale}\n </div>\n ) : null}\n </div>\n ) : null}\n <div className={style.skillTitleWrapper}>\n <div\n data-name=\"skill-title\"\n className={style.skillTitle}\n aria-label={skillAriaLabel || skillTitle}\n >\n {skillTitle}\n </div>\n {focus ? (\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 {skillFocusLocale}\n </div>\n ) : null}\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 {` ${contentCompletedLocale}`}\n </div>\n <div className={style.progressInformation} data-name=\"completed-percentage\">\n <span className={style.progressInformationNumber}>{score}%</span>\n </div>\n </>\n ) : null}\n </div>\n <div className={style.ctaWrapper} data-name=\"cta-wrapper\">\n <ButtonLink {...buttonReviewProps} />\n <div className={style.buttonWrapper} data-name=\"button-explore-wrapper\">\n <ButtonLink {...buttonExploreProps} />\n </div>\n </div>\n </div>\n );\n};\n\nLearnerSkillCard.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nLearnerSkillCard.propTypes = {\n 'aria-label': PropTypes.string,\n skillTitle: PropTypes.string,\n skillAriaLabel: PropTypes.string,\n focus: PropTypes.bool,\n metrics: PropTypes.shape({\n score: PropTypes.number,\n content: PropTypes.number,\n questionsToReview: PropTypes.number,\n contentCompleted: PropTypes.number\n }),\n review: PropTypes.bool,\n onReviewClick: PropTypes.func,\n onExploreClick: PropTypes.func\n};\n\nexport default LearnerSkillCard;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["React","useCallback","convert","PropTypes","Icon","ButtonLink","Provider","style","LearnerSkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","focus","metrics","review","onReviewClick","onExploreClick","score","content","questionsToReview","skin","translate","primarySkinColor","reviewLocale","exploreLocale","questionsLocale","skillFocusLocale","buttonReviewProps","customStyle","backgroundColor","transition","padding","disabled","onClick","label","buttonExploreProps","color","hoverColor","hoverBackgroundColor","icon","position","faIcon","name","size","ProgressBar","progressBarColor","inlineProgressValueStyle","width","progressWrapper","progress","learnerSkillCardWrapper","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","skillTitleWrapper","skillFocusBadge","faSize","wrapperSize","progressInformations","progressInformation","progressInformationNumber","ctaWrapper","buttonWrapper","contextTypes","childContextTypes","propTypes","string","bool","shape","number","contentCompleted","func"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport {convert} from 'css-color-function';\nimport {get} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\n\nconst LearnerSkillCard = (props, context) => {\n const {\n 'aria-label': ariaLabel,\n skillTitle,\n skillAriaLabel,\n focus = false,\n metrics,\n review = false,\n onReviewClick,\n onExploreClick\n } = props;\n const {score, content, questionsToReview = 0} = metrics;\n const {skin, translate} = context;\n const primarySkinColor = get('common.primary', skin);\n\n const reviewLocale = translate('Review');\n const exploreLocale = translate('Explore');\n const questionsLocale = translate('questions');\n const skillFocusLocale = translate('skill_focus');\n\n const buttonReviewProps = {\n customStyle: {\n backgroundColor: '#FFF',\n transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n padding: '0px'\n },\n disabled: !review,\n onClick: onReviewClick,\n 'aria-label': `${skillTitle}, ${reviewLocale}`,\n label: reviewLocale,\n 'data-name': 'learner-skill-card-review-button'\n };\n\n const buttonExploreProps = {\n customStyle: {\n backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n color: primarySkinColor,\n transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n },\n hoverColor: '#FFFFFF',\n hoverBackgroundColor: primarySkinColor,\n onClick: onExploreClick,\n 'aria-label': `${skillTitle}, ${exploreLocale}`,\n label: exploreLocale,\n 'data-name': 'learner-skill-card-explore-button',\n icon: {\n position: 'left',\n faIcon: {\n name: 'compass',\n backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n color: primarySkinColor,\n size: 16\n }\n }\n };\n\n const ProgressBar = useCallback(() => {\n if (!content) return null;\n\n const progressBarColor = '#3EC483';\n const inlineProgressValueStyle = {\n backgroundColor: progressBarColor,\n width: `${score}%`\n };\n\n return (\n <div className={style.progressWrapper}>\n <div\n data-name=\"progress\"\n className={style.progress}\n style={inlineProgressValueStyle}\n role=\"progressbar\"\n aria-label={get('progression', ariaLabel)}\n />\n </div>\n );\n }, [score, ariaLabel, content]);\n\n return (\n <div\n className={style.learnerSkillCardWrapper}\n data-name=\"learner-skill-card-wrapper\"\n aria-label={ariaLabel}\n >\n {questionsToReview ? (\n <div className={style.skillCoursesAndQuestionsWrapper}>\n {questionsToReview ? (\n <div className={style.skillInformation} data-name=\"skill-questions\">\n <span className={style.skillInformationNumber}>{questionsToReview}</span>\n &nbsp;{questionsLocale}\n </div>\n ) : null}\n </div>\n ) : null}\n <div className={style.skillTitleWrapper}>\n <div\n data-name=\"skill-title\"\n className={style.skillTitle}\n aria-label={skillAriaLabel || skillTitle}\n >\n {skillTitle}\n </div>\n {focus ? (\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 {skillFocusLocale}\n </div>\n ) : null}\n </div>\n <div className={style.progressInformations}>\n <ProgressBar />\n {content ? (\n <div className={style.progressInformation} data-name=\"completed-percentage\">\n <span className={style.progressInformationNumber}>{score}%</span>\n </div>\n ) : null}\n </div>\n <div className={style.ctaWrapper} data-name=\"cta-wrapper\">\n <ButtonLink {...buttonReviewProps} />\n <div className={style.buttonWrapper} data-name=\"button-explore-wrapper\">\n <ButtonLink {...buttonExploreProps} />\n </div>\n </div>\n </div>\n );\n};\n\nLearnerSkillCard.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nLearnerSkillCard.propTypes = {\n 'aria-label': PropTypes.string,\n skillTitle: PropTypes.string,\n skillAriaLabel: PropTypes.string,\n focus: PropTypes.bool,\n metrics: PropTypes.shape({\n score: PropTypes.number,\n content: PropTypes.number,\n questionsToReview: PropTypes.number,\n contentCompleted: PropTypes.number\n }),\n review: PropTypes.bool,\n onReviewClick: PropTypes.func,\n onExploreClick: PropTypes.func\n};\n\nexport default LearnerSkillCard;\n"],"mappings":"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"}
package/es/molecule/learner-skill-card/style.css CHANGED
@@ -90,6 +90,7 @@
90
90
 
91
91
  .progressWrapper {
92
92
  position: relative;
93
+ top: 4px;
93
94
  left: 0;
94
95
  width: 100%;
95
96
  height: 4px;
@@ -106,6 +107,8 @@
106
107
  }
107
108
 
108
109
  .progressInformations {
110
+ display: flex;
111
+ gap: 8px;
109
112
  min-height: 12px;
110
113
  margin-bottom: 24px;
111
114
  }
package/lib/molecule/learner-skill-card/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learner-skill-card/index.js"],"names":[],"mappings":";AASA,yEAiJC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learner-skill-card/index.js"],"names":[],"mappings":";AASA,yEAoIC"}
package/lib/molecule/learner-skill-card/index.js CHANGED
@@ -39,8 +39,7 @@ const LearnerSkillCard = (props, context) => {
39
39
  const {
40
40
  score,
41
41
  content,
42
- questionsToReview,
43
- contentCompleted = 0
42
+ questionsToReview = 0
44
43
  } = metrics;
45
44
  const {
46
45
  skin,
@@ -49,10 +48,8 @@ const LearnerSkillCard = (props, context) => {
49
48
  const primarySkinColor = (0, _get2.default)('common.primary', skin);
50
49
  const reviewLocale = translate('Review');
51
50
  const exploreLocale = translate('Explore');
52
- const coursesLocale = translate('courses');
53
51
  const questionsLocale = translate('questions');
54
52
  const skillFocusLocale = translate('skill_focus');
55
- const contentCompletedLocale = translate('courses_completed');
56
53
  const buttonReviewProps = {
57
54
  customStyle: {
58
55
  backgroundColor: '#FFF',
@@ -108,14 +105,9 @@ const LearnerSkillCard = (props, context) => {
108
105
  className: _style.default.learnerSkillCardWrapper,
109
106
  "data-name": "learner-skill-card-wrapper",
110
107
  "aria-label": ariaLabel
111
- }, content || questionsToReview ? /*#__PURE__*/_react.default.createElement("div", {
108
+ }, questionsToReview ? /*#__PURE__*/_react.default.createElement("div", {
112
109
  className: _style.default.skillCoursesAndQuestionsWrapper
113
- }, content ? /*#__PURE__*/_react.default.createElement("div", {
114
- className: _style.default.skillInformation,
115
- "data-name": "skill-courses"
116
- }, /*#__PURE__*/_react.default.createElement("span", {
117
- className: _style.default.skillInformationNumber
118
- }, content), " ", coursesLocale) : null, questionsToReview ? /*#__PURE__*/_react.default.createElement("div", {
110
+ }, questionsToReview ? /*#__PURE__*/_react.default.createElement("div", {
119
111
  className: _style.default.skillInformation,
120
112
  "data-name": "skill-questions"
121
113
  }, /*#__PURE__*/_react.default.createElement("span", {
@@ -135,19 +127,14 @@ const LearnerSkillCard = (props, context) => {
135
127
  faSize: 10,
136
128
  wrapperSize: 16
137
129
  }
138
- }), skillFocusLocale) : null), /*#__PURE__*/_react.default.createElement(ProgressBar, null), /*#__PURE__*/_react.default.createElement("div", {
130
+ }), skillFocusLocale) : null), /*#__PURE__*/_react.default.createElement("div", {
139
131
  className: _style.default.progressInformations
140
- }, content ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
141
- className: _style.default.progressInformation,
142
- "data-name": "skill-completed-courses"
143
- }, /*#__PURE__*/_react.default.createElement("span", {
144
- className: _style.default.progressInformationNumber
145
- }, contentCompleted), ` ${contentCompletedLocale}`), /*#__PURE__*/_react.default.createElement("div", {
132
+ }, /*#__PURE__*/_react.default.createElement(ProgressBar, null), content ? /*#__PURE__*/_react.default.createElement("div", {
146
133
  className: _style.default.progressInformation,
147
134
  "data-name": "completed-percentage"
148
135
  }, /*#__PURE__*/_react.default.createElement("span", {
149
136
  className: _style.default.progressInformationNumber
150
- }, score, "%"))) : null), /*#__PURE__*/_react.default.createElement("div", {
137
+ }, score, "%")) : null), /*#__PURE__*/_react.default.createElement("div", {
151
138
  className: _style.default.ctaWrapper,
152
139
  "data-name": "cta-wrapper"
153
140
  }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, buttonReviewProps), /*#__PURE__*/_react.default.createElement("div", {
package/lib/molecule/learner-skill-card/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["LearnerSkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","focus","metrics","review","onReviewClick","onExploreClick","score","content","questionsToReview","contentCompleted","skin","translate","primarySkinColor","reviewLocale","exploreLocale","coursesLocale","questionsLocale","skillFocusLocale","contentCompletedLocale","buttonReviewProps","customStyle","backgroundColor","transition","padding","disabled","onClick","label","buttonExploreProps","convert","color","hoverColor","hoverBackgroundColor","icon","position","faIcon","name","size","ProgressBar","useCallback","progressBarColor","inlineProgressValueStyle","width","style","progressWrapper","progress","learnerSkillCardWrapper","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","skillTitleWrapper","skillFocusBadge","faSize","wrapperSize","progressInformations","progressInformation","progressInformationNumber","ctaWrapper","buttonWrapper","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","bool","shape","number","func"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport {convert} from 'css-color-function';\nimport {get} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\n\nconst LearnerSkillCard = (props, context) => {\n const {\n 'aria-label': ariaLabel,\n skillTitle,\n skillAriaLabel,\n focus = false,\n metrics,\n review = false,\n onReviewClick,\n onExploreClick\n } = props;\n const {score, content, questionsToReview, contentCompleted = 0} = metrics;\n const {skin, translate} = context;\n const primarySkinColor = get('common.primary', skin);\n\n const reviewLocale = translate('Review');\n const exploreLocale = translate('Explore');\n const coursesLocale = translate('courses');\n const questionsLocale = translate('questions');\n const skillFocusLocale = translate('skill_focus');\n const contentCompletedLocale = translate('courses_completed');\n\n const buttonReviewProps = {\n customStyle: {\n backgroundColor: '#FFF',\n transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n padding: '0px'\n },\n disabled: !review,\n onClick: onReviewClick,\n 'aria-label': `${skillTitle}, ${reviewLocale}`,\n label: reviewLocale,\n 'data-name': 'learner-skill-card-review-button'\n };\n\n const buttonExploreProps = {\n customStyle: {\n backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n color: primarySkinColor,\n transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n },\n hoverColor: '#FFFFFF',\n hoverBackgroundColor: primarySkinColor,\n onClick: onExploreClick,\n 'aria-label': `${skillTitle}, ${exploreLocale}`,\n label: exploreLocale,\n 'data-name': 'learner-skill-card-explore-button',\n icon: {\n position: 'left',\n faIcon: {\n name: 'compass',\n backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n color: primarySkinColor,\n size: 16\n }\n }\n };\n\n const ProgressBar = useCallback(() => {\n if (!content) return null;\n\n const progressBarColor = '#3EC483';\n const inlineProgressValueStyle = {\n backgroundColor: progressBarColor,\n width: `${score}%`\n };\n\n return (\n <div className={style.progressWrapper}>\n <div\n data-name=\"progress\"\n className={style.progress}\n style={inlineProgressValueStyle}\n role=\"progressbar\"\n aria-label={get('progression', ariaLabel)}\n />\n </div>\n );\n }, [score, ariaLabel, content]);\n\n return (\n <div\n className={style.learnerSkillCardWrapper}\n data-name=\"learner-skill-card-wrapper\"\n aria-label={ariaLabel}\n >\n {content || questionsToReview ? (\n <div className={style.skillCoursesAndQuestionsWrapper}>\n {content ? (\n <div className={style.skillInformation} data-name=\"skill-courses\">\n <span className={style.skillInformationNumber}>{content}</span> {coursesLocale}\n </div>\n ) : null}\n {questionsToReview ? (\n <div className={style.skillInformation} data-name=\"skill-questions\">\n <span className={style.skillInformationNumber}>{questionsToReview}</span>\n &nbsp;{questionsLocale}\n </div>\n ) : null}\n </div>\n ) : null}\n <div className={style.skillTitleWrapper}>\n <div\n data-name=\"skill-title\"\n className={style.skillTitle}\n aria-label={skillAriaLabel || skillTitle}\n >\n {skillTitle}\n </div>\n {focus ? (\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 {skillFocusLocale}\n </div>\n ) : null}\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 {` ${contentCompletedLocale}`}\n </div>\n <div className={style.progressInformation} data-name=\"completed-percentage\">\n <span className={style.progressInformationNumber}>{score}%</span>\n </div>\n </>\n ) : null}\n </div>\n <div className={style.ctaWrapper} data-name=\"cta-wrapper\">\n <ButtonLink {...buttonReviewProps} />\n <div className={style.buttonWrapper} data-name=\"button-explore-wrapper\">\n <ButtonLink {...buttonExploreProps} />\n </div>\n </div>\n </div>\n );\n};\n\nLearnerSkillCard.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nLearnerSkillCard.propTypes = {\n 'aria-label': PropTypes.string,\n skillTitle: PropTypes.string,\n skillAriaLabel: PropTypes.string,\n focus: PropTypes.bool,\n metrics: PropTypes.shape({\n score: PropTypes.number,\n content: PropTypes.number,\n questionsToReview: PropTypes.number,\n contentCompleted: PropTypes.number\n }),\n review: PropTypes.bool,\n onReviewClick: PropTypes.func,\n onExploreClick: PropTypes.func\n};\n\nexport default LearnerSkillCard;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,gBAAgB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EAC3C,MAAM;IACJ,cAAcC,SADV;IAEJC,UAFI;IAGJC,cAHI;IAIJC,KAAK,GAAG,KAJJ;IAKJC,OALI;IAMJC,MAAM,GAAG,KANL;IAOJC,aAPI;IAQJC;EARI,IASFT,KATJ;EAUA,MAAM;IAACU,KAAD;IAAQC,OAAR;IAAiBC,iBAAjB;IAAoCC,gBAAgB,GAAG;EAAvD,IAA4DP,OAAlE;EACA,MAAM;IAACQ,IAAD;IAAOC;EAAP,IAAoBd,OAA1B;EACA,MAAMe,gBAAgB,GAAG,mBAAI,gBAAJ,EAAsBF,IAAtB,CAAzB;EAEA,MAAMG,YAAY,GAAGF,SAAS,CAAC,QAAD,CAA9B;EACA,MAAMG,aAAa,GAAGH,SAAS,CAAC,SAAD,CAA/B;EACA,MAAMI,aAAa,GAAGJ,SAAS,CAAC,SAAD,CAA/B;EACA,MAAMK,eAAe,GAAGL,SAAS,CAAC,WAAD,CAAjC;EACA,MAAMM,gBAAgB,GAAGN,SAAS,CAAC,aAAD,CAAlC;EACA,MAAMO,sBAAsB,GAAGP,SAAS,CAAC,mBAAD,CAAxC;EAEA,MAAMQ,iBAAiB,GAAG;IACxBC,WAAW,EAAE;MACXC,eAAe,EAAE,MADN;MAEXC,UAAU,EAAE,6DAFD;MAGXC,OAAO,EAAE;IAHE,CADW;IAMxBC,QAAQ,EAAE,CAACrB,MANa;IAOxBsB,OAAO,EAAErB,aAPe;IAQxB,cAAe,GAAEL,UAAW,KAAIc,YAAa,EARrB;IASxBa,KAAK,EAAEb,YATiB;IAUxB,aAAa;EAVW,CAA1B;EAaA,MAAMc,kBAAkB,GAAG;IACzBP,WAAW,EAAE;MACXC,eAAe,EAAE,IAAAO,yBAAA,EAAS,SAAQhB,gBAAiB,WAAlC,CADN;MAEXiB,KAAK,EAAEjB,gBAFI;MAGXU,UAAU,EAAE;IAHD,CADY;IAMzBQ,UAAU,EAAE,SANa;IAOzBC,oBAAoB,EAAEnB,gBAPG;IAQzBa,OAAO,EAAEpB,cARgB;IASzB,cAAe,GAAEN,UAAW,KAAIe,aAAc,EATrB;IAUzBY,KAAK,EAAEZ,aAVkB;IAWzB,aAAa,mCAXY;IAYzBkB,IAAI,EAAE;MACJC,QAAQ,EAAE,MADN;MAEJC,MAAM,EAAE;QACNC,IAAI,EAAE,SADA;QAENd,eAAe,EAAE,IAAAO,yBAAA,EAAS,SAAQhB,gBAAiB,WAAlC,CAFX;QAGNiB,KAAK,EAAEjB,gBAHD;QAINwB,IAAI,EAAE;MAJA;IAFJ;EAZmB,CAA3B;EAuBA,MAAMC,WAAW,GAAG,IAAAC,kBAAA,EAAY,MAAM;IACpC,IAAI,CAAC/B,OAAL,EAAc,OAAO,IAAP;IAEd,MAAMgC,gBAAgB,GAAG,SAAzB;IACA,MAAMC,wBAAwB,GAAG;MAC/BnB,eAAe,EAAEkB,gBADc;MAE/BE,KAAK,EAAG,GAAEnC,KAAM;IAFe,CAAjC;IAKA,oBACE;MAAK,SAAS,EAAEoC,cAAA,CAAMC;IAAtB,gBACE;MACE,aAAU,UADZ;MAEE,SAAS,EAAED,cAAA,CAAME,QAFnB;MAGE,KAAK,EAAEJ,wBAHT;MAIE,IAAI,EAAC,aAJP;MAKE,cAAY,mBAAI,aAAJ,EAAmB1C,SAAnB;IALd,EADF,CADF;EAWD,CApBmB,EAoBjB,CAACQ,KAAD,EAAQR,SAAR,EAAmBS,OAAnB,CApBiB,CAApB;EAsBA,oBACE;IACE,SAAS,EAAEmC,cAAA,CAAMG,uBADnB;IAEE,aAAU,4BAFZ;IAGE,cAAY/C;EAHd,GAKGS,OAAO,IAAIC,iBAAX,gBACC;IAAK,SAAS,EAAEkC,cAAA,CAAMI;EAAtB,GACGvC,OAAO,gBACN;IAAK,SAAS,EAAEmC,cAAA,CAAMK,gBAAtB;IAAwC,aAAU;EAAlD,gBACE;IAAM,SAAS,EAAEL,cAAA,CAAMM;EAAvB,GAAgDzC,OAAhD,CADF,OACmEQ,aADnE,CADM,GAIJ,IALN,EAMGP,iBAAiB,gBAChB;IAAK,SAAS,EAAEkC,cAAA,CAAMK,gBAAtB;IAAwC,aAAU;EAAlD,gBACE;IAAM,SAAS,EAAEL,cAAA,CAAMM;EAAvB,GAAgDxC,iBAAhD,CADF,UAESQ,eAFT,CADgB,GAKd,IAXN,CADD,GAcG,IAnBN,eAoBE;IAAK,SAAS,EAAE0B,cAAA,CAAMO;EAAtB,gBACE;IACE,aAAU,aADZ;IAEE,SAAS,EAAEP,cAAA,CAAM3C,UAFnB;IAGE,cAAYC,cAAc,IAAID;EAHhC,GAKGA,UALH,CADF,EAQGE,KAAK,gBACJ;IAAK,SAAS,EAAEyC,cAAA,CAAMQ;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,EASGnC,gBATH,CADI,GAYF,IApBN,CApBF,eA0CE,6BAAC,WAAD,OA1CF,eA2CE;IAAK,SAAS,EAAEyB,cAAA,CAAMW;EAAtB,GACG9C,OAAO,gBACN,yEACE;IAAK,SAAS,EAAEmC,cAAA,CAAMY,mBAAtB;IAA2C,aAAU;EAArD,gBACE;IAAM,SAAS,EAAEZ,cAAA,CAAMa;EAAvB,GAAmD9C,gBAAnD,CADF,EAEI,IAAGS,sBAAuB,EAF9B,CADF,eAKE;IAAK,SAAS,EAAEwB,cAAA,CAAMY,mBAAtB;IAA2C,aAAU;EAArD,gBACE;IAAM,SAAS,EAAEZ,cAAA,CAAMa;EAAvB,GAAmDjD,KAAnD,MADF,CALF,CADM,GAUJ,IAXN,CA3CF,eAwDE;IAAK,SAAS,EAAEoC,cAAA,CAAMc,UAAtB;IAAkC,aAAU;EAA5C,gBACE,6BAAC,mBAAD,EAAgBrC,iBAAhB,CADF,eAEE;IAAK,SAAS,EAAEuB,cAAA,CAAMe,aAAtB;IAAqC,aAAU;EAA/C,gBACE,6BAAC,mBAAD,EAAgB9B,kBAAhB,CADF,CAFF,CAxDF,CADF;AAiED,CAjJD;;AAmJAhC,gBAAgB,CAAC+D,YAAjB,GAAgC;EAC9BhD,IAAI,EAAEiD,iBAAA,CAASC,iBAAT,CAA2BlD,IADH;EAE9BC,SAAS,EAAEgD,iBAAA,CAASC,iBAAT,CAA2BjD;AAFR,CAAhC;AAKAhB,gBAAgB,CAACkE,SAAjB,2CAA6B;EAC3B,cAAcC,kBAAA,CAAUC,MADG;EAE3BhE,UAAU,EAAE+D,kBAAA,CAAUC,MAFK;EAG3B/D,cAAc,EAAE8D,kBAAA,CAAUC,MAHC;EAI3B9D,KAAK,EAAE6D,kBAAA,CAAUE,IAJU;EAK3B9D,OAAO,EAAE4D,kBAAA,CAAUG,KAAV,CAAgB;IACvB3D,KAAK,EAAEwD,kBAAA,CAAUI,MADM;IAEvB3D,OAAO,EAAEuD,kBAAA,CAAUI,MAFI;IAGvB1D,iBAAiB,EAAEsD,kBAAA,CAAUI,MAHN;IAIvBzD,gBAAgB,EAAEqD,kBAAA,CAAUI;EAJL,CAAhB,CALkB;EAW3B/D,MAAM,EAAE2D,kBAAA,CAAUE,IAXS;EAY3B5D,aAAa,EAAE0D,kBAAA,CAAUK,IAZE;EAa3B9D,cAAc,EAAEyD,kBAAA,CAAUK;AAbC,CAA7B;eAgBexE,gB"}
1
+ {"version":3,"file":"index.js","names":["LearnerSkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","focus","metrics","review","onReviewClick","onExploreClick","score","content","questionsToReview","skin","translate","primarySkinColor","reviewLocale","exploreLocale","questionsLocale","skillFocusLocale","buttonReviewProps","customStyle","backgroundColor","transition","padding","disabled","onClick","label","buttonExploreProps","convert","color","hoverColor","hoverBackgroundColor","icon","position","faIcon","name","size","ProgressBar","useCallback","progressBarColor","inlineProgressValueStyle","width","style","progressWrapper","progress","learnerSkillCardWrapper","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","skillTitleWrapper","skillFocusBadge","faSize","wrapperSize","progressInformations","progressInformation","progressInformationNumber","ctaWrapper","buttonWrapper","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","bool","shape","number","contentCompleted","func"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport {convert} from 'css-color-function';\nimport {get} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\n\nconst LearnerSkillCard = (props, context) => {\n const {\n 'aria-label': ariaLabel,\n skillTitle,\n skillAriaLabel,\n focus = false,\n metrics,\n review = false,\n onReviewClick,\n onExploreClick\n } = props;\n const {score, content, questionsToReview = 0} = metrics;\n const {skin, translate} = context;\n const primarySkinColor = get('common.primary', skin);\n\n const reviewLocale = translate('Review');\n const exploreLocale = translate('Explore');\n const questionsLocale = translate('questions');\n const skillFocusLocale = translate('skill_focus');\n\n const buttonReviewProps = {\n customStyle: {\n backgroundColor: '#FFF',\n transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n padding: '0px'\n },\n disabled: !review,\n onClick: onReviewClick,\n 'aria-label': `${skillTitle}, ${reviewLocale}`,\n label: reviewLocale,\n 'data-name': 'learner-skill-card-review-button'\n };\n\n const buttonExploreProps = {\n customStyle: {\n backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n color: primarySkinColor,\n transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n },\n hoverColor: '#FFFFFF',\n hoverBackgroundColor: primarySkinColor,\n onClick: onExploreClick,\n 'aria-label': `${skillTitle}, ${exploreLocale}`,\n label: exploreLocale,\n 'data-name': 'learner-skill-card-explore-button',\n icon: {\n position: 'left',\n faIcon: {\n name: 'compass',\n backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n color: primarySkinColor,\n size: 16\n }\n }\n };\n\n const ProgressBar = useCallback(() => {\n if (!content) return null;\n\n const progressBarColor = '#3EC483';\n const inlineProgressValueStyle = {\n backgroundColor: progressBarColor,\n width: `${score}%`\n };\n\n return (\n <div className={style.progressWrapper}>\n <div\n data-name=\"progress\"\n className={style.progress}\n style={inlineProgressValueStyle}\n role=\"progressbar\"\n aria-label={get('progression', ariaLabel)}\n />\n </div>\n );\n }, [score, ariaLabel, content]);\n\n return (\n <div\n className={style.learnerSkillCardWrapper}\n data-name=\"learner-skill-card-wrapper\"\n aria-label={ariaLabel}\n >\n {questionsToReview ? (\n <div className={style.skillCoursesAndQuestionsWrapper}>\n {questionsToReview ? (\n <div className={style.skillInformation} data-name=\"skill-questions\">\n <span className={style.skillInformationNumber}>{questionsToReview}</span>\n &nbsp;{questionsLocale}\n </div>\n ) : null}\n </div>\n ) : null}\n <div className={style.skillTitleWrapper}>\n <div\n data-name=\"skill-title\"\n className={style.skillTitle}\n aria-label={skillAriaLabel || skillTitle}\n >\n {skillTitle}\n </div>\n {focus ? (\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 {skillFocusLocale}\n </div>\n ) : null}\n </div>\n <div className={style.progressInformations}>\n <ProgressBar />\n {content ? (\n <div className={style.progressInformation} data-name=\"completed-percentage\">\n <span className={style.progressInformationNumber}>{score}%</span>\n </div>\n ) : null}\n </div>\n <div className={style.ctaWrapper} data-name=\"cta-wrapper\">\n <ButtonLink {...buttonReviewProps} />\n <div className={style.buttonWrapper} data-name=\"button-explore-wrapper\">\n <ButtonLink {...buttonExploreProps} />\n </div>\n </div>\n </div>\n );\n};\n\nLearnerSkillCard.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nLearnerSkillCard.propTypes = {\n 'aria-label': PropTypes.string,\n skillTitle: PropTypes.string,\n skillAriaLabel: PropTypes.string,\n focus: PropTypes.bool,\n metrics: PropTypes.shape({\n score: PropTypes.number,\n content: PropTypes.number,\n questionsToReview: PropTypes.number,\n contentCompleted: PropTypes.number\n }),\n review: PropTypes.bool,\n onReviewClick: PropTypes.func,\n onExploreClick: PropTypes.func\n};\n\nexport default LearnerSkillCard;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,gBAAgB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EAC3C,MAAM;IACJ,cAAcC,SADV;IAEJC,UAFI;IAGJC,cAHI;IAIJC,KAAK,GAAG,KAJJ;IAKJC,OALI;IAMJC,MAAM,GAAG,KANL;IAOJC,aAPI;IAQJC;EARI,IASFT,KATJ;EAUA,MAAM;IAACU,KAAD;IAAQC,OAAR;IAAiBC,iBAAiB,GAAG;EAArC,IAA0CN,OAAhD;EACA,MAAM;IAACO,IAAD;IAAOC;EAAP,IAAoBb,OAA1B;EACA,MAAMc,gBAAgB,GAAG,mBAAI,gBAAJ,EAAsBF,IAAtB,CAAzB;EAEA,MAAMG,YAAY,GAAGF,SAAS,CAAC,QAAD,CAA9B;EACA,MAAMG,aAAa,GAAGH,SAAS,CAAC,SAAD,CAA/B;EACA,MAAMI,eAAe,GAAGJ,SAAS,CAAC,WAAD,CAAjC;EACA,MAAMK,gBAAgB,GAAGL,SAAS,CAAC,aAAD,CAAlC;EAEA,MAAMM,iBAAiB,GAAG;IACxBC,WAAW,EAAE;MACXC,eAAe,EAAE,MADN;MAEXC,UAAU,EAAE,6DAFD;MAGXC,OAAO,EAAE;IAHE,CADW;IAMxBC,QAAQ,EAAE,CAAClB,MANa;IAOxBmB,OAAO,EAAElB,aAPe;IAQxB,cAAe,GAAEL,UAAW,KAAIa,YAAa,EARrB;IASxBW,KAAK,EAAEX,YATiB;IAUxB,aAAa;EAVW,CAA1B;EAaA,MAAMY,kBAAkB,GAAG;IACzBP,WAAW,EAAE;MACXC,eAAe,EAAE,IAAAO,yBAAA,EAAS,SAAQd,gBAAiB,WAAlC,CADN;MAEXe,KAAK,EAAEf,gBAFI;MAGXQ,UAAU,EAAE;IAHD,CADY;IAMzBQ,UAAU,EAAE,SANa;IAOzBC,oBAAoB,EAAEjB,gBAPG;IAQzBW,OAAO,EAAEjB,cARgB;IASzB,cAAe,GAAEN,UAAW,KAAIc,aAAc,EATrB;IAUzBU,KAAK,EAAEV,aAVkB;IAWzB,aAAa,mCAXY;IAYzBgB,IAAI,EAAE;MACJC,QAAQ,EAAE,MADN;MAEJC,MAAM,EAAE;QACNC,IAAI,EAAE,SADA;QAENd,eAAe,EAAE,IAAAO,yBAAA,EAAS,SAAQd,gBAAiB,WAAlC,CAFX;QAGNe,KAAK,EAAEf,gBAHD;QAINsB,IAAI,EAAE;MAJA;IAFJ;EAZmB,CAA3B;EAuBA,MAAMC,WAAW,GAAG,IAAAC,kBAAA,EAAY,MAAM;IACpC,IAAI,CAAC5B,OAAL,EAAc,OAAO,IAAP;IAEd,MAAM6B,gBAAgB,GAAG,SAAzB;IACA,MAAMC,wBAAwB,GAAG;MAC/BnB,eAAe,EAAEkB,gBADc;MAE/BE,KAAK,EAAG,GAAEhC,KAAM;IAFe,CAAjC;IAKA,oBACE;MAAK,SAAS,EAAEiC,cAAA,CAAMC;IAAtB,gBACE;MACE,aAAU,UADZ;MAEE,SAAS,EAAED,cAAA,CAAME,QAFnB;MAGE,KAAK,EAAEJ,wBAHT;MAIE,IAAI,EAAC,aAJP;MAKE,cAAY,mBAAI,aAAJ,EAAmBvC,SAAnB;IALd,EADF,CADF;EAWD,CApBmB,EAoBjB,CAACQ,KAAD,EAAQR,SAAR,EAAmBS,OAAnB,CApBiB,CAApB;EAsBA,oBACE;IACE,SAAS,EAAEgC,cAAA,CAAMG,uBADnB;IAEE,aAAU,4BAFZ;IAGE,cAAY5C;EAHd,GAKGU,iBAAiB,gBAChB;IAAK,SAAS,EAAE+B,cAAA,CAAMI;EAAtB,GACGnC,iBAAiB,gBAChB;IAAK,SAAS,EAAE+B,cAAA,CAAMK,gBAAtB;IAAwC,aAAU;EAAlD,gBACE;IAAM,SAAS,EAAEL,cAAA,CAAMM;EAAvB,GAAgDrC,iBAAhD,CADF,UAESM,eAFT,CADgB,GAKd,IANN,CADgB,GASd,IAdN,eAeE;IAAK,SAAS,EAAEyB,cAAA,CAAMO;EAAtB,gBACE;IACE,aAAU,aADZ;IAEE,SAAS,EAAEP,cAAA,CAAMxC,UAFnB;IAGE,cAAYC,cAAc,IAAID;EAHhC,GAKGA,UALH,CADF,EAQGE,KAAK,gBACJ;IAAK,SAAS,EAAEsC,cAAA,CAAMQ;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,EASGlC,gBATH,CADI,GAYF,IApBN,CAfF,eAqCE;IAAK,SAAS,EAAEwB,cAAA,CAAMW;EAAtB,gBACE,6BAAC,WAAD,OADF,EAEG3C,OAAO,gBACN;IAAK,SAAS,EAAEgC,cAAA,CAAMY,mBAAtB;IAA2C,aAAU;EAArD,gBACE;IAAM,SAAS,EAAEZ,cAAA,CAAMa;EAAvB,GAAmD9C,KAAnD,MADF,CADM,GAIJ,IANN,CArCF,eA6CE;IAAK,SAAS,EAAEiC,cAAA,CAAMc,UAAtB;IAAkC,aAAU;EAA5C,gBACE,6BAAC,mBAAD,EAAgBrC,iBAAhB,CADF,eAEE;IAAK,SAAS,EAAEuB,cAAA,CAAMe,aAAtB;IAAqC,aAAU;EAA/C,gBACE,6BAAC,mBAAD,EAAgB9B,kBAAhB,CADF,CAFF,CA7CF,CADF;AAsDD,CApID;;AAsIA7B,gBAAgB,CAAC4D,YAAjB,GAAgC;EAC9B9C,IAAI,EAAE+C,iBAAA,CAASC,iBAAT,CAA2BhD,IADH;EAE9BC,SAAS,EAAE8C,iBAAA,CAASC,iBAAT,CAA2B/C;AAFR,CAAhC;AAKAf,gBAAgB,CAAC+D,SAAjB,2CAA6B;EAC3B,cAAcC,kBAAA,CAAUC,MADG;EAE3B7D,UAAU,EAAE4D,kBAAA,CAAUC,MAFK;EAG3B5D,cAAc,EAAE2D,kBAAA,CAAUC,MAHC;EAI3B3D,KAAK,EAAE0D,kBAAA,CAAUE,IAJU;EAK3B3D,OAAO,EAAEyD,kBAAA,CAAUG,KAAV,CAAgB;IACvBxD,KAAK,EAAEqD,kBAAA,CAAUI,MADM;IAEvBxD,OAAO,EAAEoD,kBAAA,CAAUI,MAFI;IAGvBvD,iBAAiB,EAAEmD,kBAAA,CAAUI,MAHN;IAIvBC,gBAAgB,EAAEL,kBAAA,CAAUI;EAJL,CAAhB,CALkB;EAW3B5D,MAAM,EAAEwD,kBAAA,CAAUE,IAXS;EAY3BzD,aAAa,EAAEuD,kBAAA,CAAUM,IAZE;EAa3B5D,cAAc,EAAEsD,kBAAA,CAAUM;AAbC,CAA7B;eAgBetE,gB"}
package/lib/molecule/learner-skill-card/style.css CHANGED
@@ -90,6 +90,7 @@
90
90
 
91
91
  .progressWrapper {
92
92
  position: relative;
93
+ top: 4px;
93
94
  left: 0;
94
95
  width: 100%;
95
96
  height: 4px;
@@ -106,6 +107,8 @@
106
107
  }
107
108
 
108
109
  .progressInformations {
110
+ display: flex;
111
+ gap: 8px;
109
112
  min-height: 12px;
110
113
  margin-bottom: 24px;
111
114
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coorpacademy/components",
3
- "version": "11.32.38",
3
+ "version": "11.32.39-alpha.4+e62dc9e5b",
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": "72a6ea41c8aa41f5706221e4b4335733a8b56fa8"
180
+ "gitHead": "e62dc9e5b270d320ec8b479cc3ca74427a7884a0"
181
181
  }