@coorpacademy/components 11.32.14 → 11.32.15-alpha.13

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

@@ -0,0 +1,250 @@
+"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 {
+    ongoingCoursesAvailable,
+    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: ongoingCoursesAvailable ? translate('continue_learning') : translate('start_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" ? {
+  ongoingCoursesAvailable: _propTypes.default.bool,
+  onClick: _propTypes.default.func
+} : {};
+
+const SkillDetail = (props, context) => {
+  const {
+    title,
+    skillRef,
+    description,
+    metrics = {},
+    focused,
+    availableForReview,
+    ongoingCourses,
+    skillIncludedCourses,
+    totalCourses,
+    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);
+  }, [showMore, 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,
+    "data-name": skillRef
+  }, /*#__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, {
+    ongoingCoursesAvailable: !!ongoingCourses.list.length,
+    onClick: onContinueLearningClick
+  }))), score !== undefined ? /*#__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, "%"))))) : null, /*#__PURE__*/_react.default.createElement(_continueLearning.default, {
+    ongoingCourses: ongoingCourses
+  }), /*#__PURE__*/_react.default.createElement(_allCourses.default, {
+    skillIncludedCourses: skillIncludedCourses,
+    totalCourses: totalCourses,
+    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,
+  skillRef: _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),
+  totalCourses: _propTypes.default.number,
+  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","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","handleMouseOver","useCallback","handleMouseLeave","width","borderRadius","backgroundColor","convert","position","faIcon","name","color","size","contextTypes","Provider","childContextTypes","propTypes","PropTypes","bool","func","SkillDetail","title","skillRef","description","metrics","focused","availableForReview","ongoingCourses","skillIncludedCourses","totalCourses","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","list","progressInformationsWrapper","progressTitle","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","progressInformations","progressInformation","progressInformationNumber","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} 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 {ongoingCoursesAvailable, 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={\n          ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')\n        }\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  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    ongoingCourses,\n    skillIncludedCourses,\n    totalCourses,\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        <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\n              ongoingCoursesAvailable={!!ongoingCourses.list.length}\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              {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        ) : null}\n        <ContinueLearning ongoingCourses={ongoingCourses} />\n        <AllCourses\n          skillIncludedCourses={skillIncludedCourses}\n          totalCourses={totalCourses}\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  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  ongoingCourses: PropTypes.shape(CardsGrid.propTypes),\n  skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n  totalCourses: PropTypes.number,\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  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,174 @@
+@value colors: "../../variables/colors.css";
+@value breakpoints: "../../variables/breakpoints.css";
+@value tablet from breakpoints;
+@value mobile from breakpoints;
+@value xtraLightGrey from colors;
+@value cm_grey_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;
+  }
+}
+
+@media mobile {
+  .ctaWrapper {
+    flex-direction: column;
+
+    button {
+      width: 100% !important;
+    }
+  }
+}

package/lib/template/teams-dashboard/index.d.ts

@@ -37,7 +37,7 @@ declare namespace TeamsDashboard {
         const sections: PropTypes.Requireable<(PropTypes.InferProps<{
             contentType: PropTypes.Requireable<string>;
             dataName: PropTypes.Requireable<string>;
-            title: PropTypes.Requireable<string>;
+            title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
             showMore: PropTypes.Requireable<string>;
             cards: PropTypes.Requireable<(PropTypes.InferProps<{
                 badge: PropTypes.Requireable<string>;
@@ -91,6 +91,9 @@ declare namespace TeamsDashboard {
                     adaptive: PropTypes.Requireable<string>;
                 }>>;
             }> | null | undefined)[]>;
+            customStyle: PropTypes.Requireable<{
+                [x: string]: string | null | undefined;
+            }>;
             onScroll: PropTypes.Requireable<(...args: any[]) => any>;
             onShowMore: PropTypes.Requireable<(...args: any[]) => any>;
             'arrows-aria-label': PropTypes.Requireable<PropTypes.InferProps<{

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,16 @@
   "Review lesson": "Review lesson",
   "search_place_holder": "Search...",
   "secured_payment": "Secure server",
+  "start_learning": "Start learning",
+  "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 +134,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.14",
+  "version": "11.32.15-alpha.13+c89a54bac",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -177,5 +177,5 @@
     "last 2 versions",
     "IE 11"
   ],
-  "gitHead": "252d239ebc4bb4f0cac1795f82341b68adcfcced"
+  "gitHead": "c89a54bac172a097fc2a0f29decd8dcfeea31b8e"
 }