@coorpacademy/components 11.32.11 → 11.32.12-alpha.0

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

@@ -0,0 +1,241 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _get2 = _interopRequireDefault(require("lodash/fp/get"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _cssColorFunction = require("css-color-function");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _provider = _interopRequireDefault(require("../../atom/provider"));
+
+var _select = _interopRequireWildcard(require("../../atom/select"));
+
+var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
+
+var _icon = _interopRequireDefault(require("../../atom/icon"));
+
+var _cardsGrid = _interopRequireDefault(require("../../organism/cards-grid"));
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+var _allCourses = _interopRequireDefault(require("./all-courses"));
+
+var _continueLearning = _interopRequireDefault(require("./continue-learning"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ContinueLearningButton = (props, context) => {
+  const [hovered, setHovered] = (0, _react.useState)(false);
+  const {
+    onClick
+  } = props;
+  const {
+    skin,
+    translate
+  } = context;
+  const primarySkinColor = (0, _get2.default)('common.primary', skin);
+  const handleMouseOver = (0, _react.useCallback)(() => setHovered(true), [setHovered]);
+  const handleMouseLeave = (0, _react.useCallback)(() => setHovered(false), [setHovered]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    onMouseOver: handleMouseOver,
+    onMouseLeave: handleMouseLeave
+  }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
+    label: translate('continue_learning'),
+    type: "primary",
+    customStyle: {
+      width: 'fit-content',
+      borderRadius: '12px',
+      backgroundColor: hovered ? (0, _cssColorFunction.convert)(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`) : primarySkinColor
+    },
+    icon: {
+      position: 'left',
+      faIcon: {
+        name: 'play',
+        color: '#FFFFFF',
+        size: 16
+      }
+    },
+    onClick: onClick
+  }));
+};
+
+ContinueLearningButton.contextTypes = {
+  skin: _provider.default.childContextTypes.skin,
+  translate: _provider.default.childContextTypes.translate
+};
+ContinueLearningButton.propTypes = process.env.NODE_ENV !== "production" ? {
+  onClick: _propTypes.default.func
+} : {};
+
+const SkillDetail = (props, context) => {
+  const {
+    title,
+    description,
+    metrics,
+    focused,
+    availableForReview,
+    ongoingCourses,
+    skillIncludedCourses,
+    filters,
+    sorting,
+    onBackClick,
+    onReviewClick,
+    onContinueLearningClick
+  } = props;
+  const {
+    score,
+    content,
+    questionsToReview,
+    contentCompleted = 0
+  } = metrics;
+  const {
+    translate
+  } = context;
+  const [showMore, setShowMore] = (0, _react.useState)(false);
+  const handleShowMore = (0, _react.useCallback)(() => setShowMore(!showMore), [setShowMore, showMore]);
+  const Description = (0, _react.useCallback)(() => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)(_style.default.description, !showMore && _style.default.truncate)
+    }, description);
+  });
+  const ProgressBar = (0, _react.useCallback)(() => {
+    if (score === undefined) return null;
+    const progressBarColor = '#3EC483';
+    const inlineProgressValueStyle = {
+      backgroundColor: progressBarColor,
+      width: `${score}%`
+    };
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: _style.default.progressBarWrapper
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      "data-name": "progress",
+      className: _style.default.progress,
+      style: inlineProgressValueStyle,
+      role: "progressbar"
+    }));
+  }, [score]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.backgroundContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.container
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.backButtonWrapper,
+    onClick: onBackClick
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    iconName: "arrow-left",
+    size: {
+      faSize: 14,
+      wrapperSize: 14
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.ctaContainer
+  }, /*#__PURE__*/_react.default.createElement("div", null, focused ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.skillFocusBadge
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    iconName: "bullseye-arrow",
+    backgroundColor: "#DDD1FF",
+    size: {
+      faSize: 10,
+      wrapperSize: 16
+    }
+  }), translate('skill_focus')) : null, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.title
+  }, title), description ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Description, null), description.length >= 226 ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.showMoreWrapper,
+    onClick: handleShowMore
+  }, showMore ? translate('Show less') : translate('Show more'), /*#__PURE__*/_react.default.createElement(_icon.default, {
+    iconName: showMore ? 'chevron-up' : 'chevron-down',
+    size: {
+      faSize: 14,
+      wrapperSize: 16
+    }
+  })) : null) : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.ctaWrapper
+  }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
+    type: "secondary",
+    onClick: onReviewClick,
+    label: translate('review_this_skill'),
+    disabled: !availableForReview,
+    customStyle: {
+      width: 'fit-content',
+      borderRadius: '12px'
+    }
+  }), /*#__PURE__*/_react.default.createElement(ContinueLearningButton, {
+    onClick: onContinueLearningClick
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.progressInformationsWrapper
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.progressTitle
+  }, translate('your_progress')), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.skillCoursesAndQuestionsWrapper
+  }, content ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.skillInformation,
+    "data-name": "skill-courses"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.skillInformationNumber
+  }, content), ' ', translate('courses')) : null, questionsToReview ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.skillInformation,
+    "data-name": "skill-questions"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.skillInformationNumber
+  }, questionsToReview), "\xA0", translate('questions')) : null), /*#__PURE__*/_react.default.createElement(ProgressBar, null), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.progressInformations
+  }, content && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.progressInformation,
+    "data-name": "skill-completed-courses"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.progressInformationNumber
+  }, contentCompleted), ` ${translate('courses_completed')}`), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.progressInformation,
+    "data-name": "completed-percentage"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.progressInformationNumber
+  }, score, "%"))))), /*#__PURE__*/_react.default.createElement(_continueLearning.default, {
+    ongoingCourses: ongoingCourses
+  }), /*#__PURE__*/_react.default.createElement(_allCourses.default, {
+    skillIncludedCourses: skillIncludedCourses,
+    filters: filters,
+    sorting: sorting
+  })));
+};
+
+SkillDetail.contextTypes = {
+  skin: _provider.default.childContextTypes.skin,
+  translate: _provider.default.childContextTypes.translate
+};
+SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: _propTypes.default.string.isRequired,
+  description: _propTypes.default.string,
+  metrics: _propTypes.default.shape({
+    score: _propTypes.default.number,
+    content: _propTypes.default.number,
+    questionsToReview: _propTypes.default.number,
+    contentCompleted: _propTypes.default.number
+  }),
+  focused: _propTypes.default.bool,
+  availableForReview: _propTypes.default.bool,
+  ongoingCourses: _propTypes.default.shape(_cardsGrid.default.propTypes),
+  skillIncludedCourses: _propTypes.default.shape(_cardsGrid.default.propTypes),
+  filters: _propTypes.default.shape({
+    onChange: _propTypes.default.func,
+    options: _propTypes.default.arrayOf(_propTypes.default.shape(_select.SelectOptionPropTypes))
+  }),
+  sorting: _propTypes.default.shape(_select.default.propTypes),
+  onBackClick: _propTypes.default.func,
+  onReviewClick: _propTypes.default.func,
+  onContinueLearningClick: _propTypes.default.func
+} : {};
+var _default = SkillDetail;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ContinueLearningButton","props","context","hovered","setHovered","useState","onClick","skin","translate","primarySkinColor","handleMouseOver","useCallback","handleMouseLeave","width","borderRadius","backgroundColor","convert","position","faIcon","name","color","size","contextTypes","Provider","childContextTypes","propTypes","PropTypes","func","SkillDetail","title","description","metrics","focused","availableForReview","ongoingCourses","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","score","content","questionsToReview","contentCompleted","showMore","setShowMore","handleShowMore","Description","classnames","style","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButtonWrapper","faSize","wrapperSize","ctaContainer","skillFocusBadge","length","showMoreWrapper","ctaWrapper","progressInformationsWrapper","progressTitle","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","progressInformations","progressInformation","progressInformationNumber","string","isRequired","shape","number","bool","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} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\nimport ContinueLearning from './continue-learning';\n\nconst ContinueLearningButton = (props, context) => {\n  const [hovered, setHovered] = useState(false);\n  const {onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  return (\n    <div onMouseOver={handleMouseOver} onMouseLeave={handleMouseLeave}>\n      <ButtonLink\n        label={translate('continue_learning')}\n        type=\"primary\"\n        customStyle={{\n          width: 'fit-content',\n          borderRadius: '12px',\n          backgroundColor: hovered\n            ? convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)\n            : primarySkinColor\n        }}\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  onClick: PropTypes.func\n};\n\nconst SkillDetail = (props, context) => {\n  const {\n    title,\n    description,\n    metrics,\n    focused,\n    availableForReview,\n    ongoingCourses,\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  });\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}>\n        <div className={style.backButtonWrapper} onClick={onBackClick}>\n          <Icon\n            iconName=\"arrow-left\"\n            size={{\n              faSize: 14,\n              wrapperSize: 14\n            }}\n          />\n        </div>\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 onClick={onContinueLearningClick} />\n          </div>\n        </div>\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            {questionsToReview ? (\n              <div className={style.skillInformation} data-name=\"skill-questions\">\n                <span className={style.skillInformationNumber}>{questionsToReview}</span>\n                &nbsp;{translate('questions')}\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                  {` ${translate('courses_completed')}`}\n                </div>\n                <div className={style.progressInformation} data-name=\"completed-percentage\">\n                  <span className={style.progressInformationNumber}>{score}%</span>\n                </div>\n              </>\n            )}\n          </div>\n        </div>\n        <ContinueLearning ongoingCourses={ongoingCourses} />\n        <AllCourses\n          skillIncludedCourses={skillIncludedCourses}\n          filters={filters}\n          sorting={sorting}\n        />\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  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  ongoingCourses: PropTypes.shape(CardsGrid.propTypes),\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/lib/template/skill-detail/style.css

@@ -0,0 +1,163 @@
+@value colors: "../../variables/colors.css";
+@value breakpoints: "../../variables/breakpoints.css";
+@value tablet from breakpoints;
+@value xtraLightGrey from colors;
+@value cm_grey_100 from colors;
+@value cm_grey_200 from colors;
+@value cm_grey_400 from colors;
+
+.textBase {
+  font-family: "Gilroy";
+  font-style: normal;
+}
+
+.backgroundContainer {
+  background-color: white;
+  min-height: 100%;
+  width: 100%;
+}
+
+.container {
+  composes: textBase;
+  background-color: white;
+  font-family: "Gilroy";
+  font-style: normal;
+  margin-top: 48px;
+  margin-bottom: 48px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0 16px;
+  position: relative;
+  box-sizing: border-box;
+  min-height: 100%;
+  width: 100%;
+  max-width: calc(1080px + 40px);
+}
+
+.backButtonWrapper {
+  margin-bottom: 16px;
+  background-color: cm_grey_100;
+  border-radius: 8px;
+  width: fit-content;
+  padding: 8px;
+  cursor: pointer;
+}
+
+.ctaContainer {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.skillFocusBadge {
+  display: flex;
+  height: 12px;
+  width: fit-content;
+  align-items: center;
+  background-color: #DDD1FF;
+  border-radius: 24px;
+  padding: 4px 8px;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 600;
+  color: #3900D6;
+  margin-bottom: 16px;
+}
+
+.ctaWrapper,
+.showMoreWrapper {
+  display: flex;
+  gap: 8px;
+}
+
+.showMoreWrapper {
+  align-items: center;
+  margin-top: 8px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 32px;
+}
+
+.description {
+  margin-top: 8px;
+  max-width: 734px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: cm_grey_400;
+}
+
+.truncate {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.progressInformationsWrapper {
+  margin-top: 40px;
+  background-color: xtraLightGrey;
+  border-radius: 16px;
+  padding: 24px;
+}
+
+.progressTitle {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 22px;
+  margin-bottom: 16px;
+}
+
+.skillCoursesAndQuestionsWrapper,
+.progressInformations {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.skillInformation,
+.progressInformation {
+  composes: textBase;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
+  color: cm_grey_400;
+}
+
+.skillInformationNumber,
+.progressInformationNumber {
+  color: #000;
+}
+
+.progressBarWrapper {
+  position: relative;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  border-radius: 2px;
+  overflow: hidden;
+  background-color: cm_grey_100;
+  margin: 16px 0;
+}
+
+.progress {
+  display: block;
+  height: 8px;
+  animation: progressbar 2s ease-in-out;
+}
+
+@media tablet {
+  .ctaContainer {
+    flex-direction: column;
+  }
+
+  .ctaWrapper {
+    margin-top: 32px;
+  }
+}

package/locales/en/global.json

@@ -1,5 +1,6 @@
 {
   "all": "All",
+  "all_courses": "All courses",
   "accepted_cards": "Credit or debit card",
   "An Error Occurred": "An Error Occurred",
   "Answer": "Answer",
@@ -22,6 +23,7 @@
   "Create a new cohort": "Create a new cohort",
   "courses": "Courses",
   "courses_completed": "Courses completed",
+  "continue_learning": "Continue learning",
   "skills_change_focus": "Change skill focus",
   "skills_choose_focus": "Choose your focus",
   "cancel": "Cancel",
@@ -59,6 +61,7 @@
   "product_desc_culture": "Digital culture: All levels completed",
   "product_desc_forum": "Forum",
   "product_desc_partnership": "All training courses of our partners",
+  "your_progress": "Your progress",
   "Put back": "Put back",
   "Reject": "Reject",
   "Reload": "Reload",
@@ -66,12 +69,15 @@
   "Review lesson": "Review lesson",
   "search_place_holder": "Search...",
   "secured_payment": "Secure server",
+  "sort_by": "Sort by:",
   "See clue": "See clue",
   "See less": "See less",
   "See lesson": "See lesson",
   "Select a dashboard in the Sidebar": "Select a dashboard in the Sidebar",
   "Show more": "Show more",
+  "Show less": "Show less",
   "Show": "Show",
+  "show_completed": "Show completed",
   "Start battle": "Start battle",
   "skills_section_title": "Skills",
   "skills_section_description": "Explore or review skills",
@@ -127,6 +133,7 @@
     "invalid_scorm": "scorm file is not valid",
     "show_errors": "show errors"
   },
+  "review_this_skill": "Review this skill",
   "review_skill_empty": "You have no skill to revise yet",
   "review_skill_empty_description": "First you need to complete courses before you can review different skills.",
   "close_button_ariaLabel": "Close review slide",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "11.32.11",
+  "version": "11.32.12-alpha.0+6ec0d1859",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -177,5 +177,5 @@
     "last 2 versions",
     "IE 11"
   ],
-  "gitHead": "fc105a306cf838f85f8f6c58210257db27c51b32"
+  "gitHead": "6ec0d1859050f4f1d689b94e86ea25e06aa26064"
 }