@coorpacademy/components 11.34.2-alpha.94 → 11.34.2

package/lib/molecule/learner-skill-card/index.js

@@ -1,34 +1,28 @@
 "use strict";
 
 exports.__esModule = true;
-exports.updateBackgroundImage = exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _provider = _interopRequireWildcard(require("../../atom/provider"));
+exports.default = void 0;
+var _get2 = _interopRequireDefault(require("lodash/fp/get"));
+var _react = _interopRequireDefault(require("react"));
+var _cssColorFunction = require("css-color-function");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _icon = _interopRequireDefault(require("../../atom/icon"));
+var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
+var _provider = _interopRequireDefault(require("../../atom/provider"));
 var _progressBar = _interopRequireDefault(require("../progress-bar"));
 var _colors = require("../../variables/colors");
-var _getBackgroundGradientColor = require("../../util/get-background-gradient-color");
-var _icon = _interopRequireDefault(require("../../atom/icon"));
-var _propTypes = _interopRequireDefault(require("./prop-types"));
 var _style = _interopRequireDefault(require("./style.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const MAX_SCORE = 100;
-const updateBackgroundImage = (ref, background) => {
-  if (ref.current) {
-    ref.current.style.backgroundImage = background;
-  }
-};
-exports.updateBackgroundImage = updateBackgroundImage;
 const LearnerSkillCard = (props, context) => {
   const {
     'aria-label': ariaLabel,
-    cardIndex,
     skillTitle,
     skillAriaLabel,
-    focus,
+    focus = false,
     metrics,
-    icon,
+    review = false,
+    onReviewClick,
     onExploreClick
   } = props;
   const {
@@ -36,95 +30,76 @@ const LearnerSkillCard = (props, context) => {
     content,
     questionsToReview = 0
   } = metrics;
-  const translate = (0, _provider.GetTranslateFromContext)(context);
   const {
-    color,
-    name
-  } = icon;
+    skin,
+    translate
+  } = context;
+  const primarySkinColor = (0, _get2.default)('common.primary', skin);
+  const reviewLocale = translate('Review');
+  const exploreLocale = translate('Explore');
   const questionsLocale = translate('skill_chart_side_panel_questions_to_review');
-  const [badgeIconName, badgeLocale, tagTextColor, tagBackgroundColor] = focus ? ['bullseye-arrow', translate('skill_focus'), _colors.COLORS.purple_700, _colors.COLORS.purple_100] : ['shapes', translate('skill'), _colors.COLORS.cm_grey_500, _colors.COLORS.gray];
-  const headerBackgroundRef = (0, _react.useRef)(null);
-  const defaultBackground = (0, _react.useMemo)(() => (0, _getBackgroundGradientColor.createGradientBackground)(color, '93%', '100%'), [color]);
-  const focusBackground = (0, _react.useMemo)(() => (0, _getBackgroundGradientColor.createGradientBackground)(color, '83%', '100%'), [color]);
-  const handleMouseEnter = (0, _react.useCallback)(() => {
-    updateBackgroundImage(headerBackgroundRef, focusBackground);
-  }, [focusBackground]);
-  const handleMouseLeave = (0, _react.useCallback)(() => {
-    updateBackgroundImage(headerBackgroundRef, defaultBackground);
-  }, [defaultBackground]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": `learner-skill-card-wrapper-${cardIndex}`,
-    onClick: onExploreClick,
-    className: _style.default.learnerSkillCardContainer,
-    "aria-label": ariaLabel,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": "learner-skill-card-icon-header-wrapper",
-    ref: headerBackgroundRef,
-    className: _style.default.iconHeaderWrapper,
-    style: {
-      backgroundImage: defaultBackground,
-      color: tagTextColor
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.iconWrapper,
-    "data-testid": "learner-skill-card-icon-wrapper"
-  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-    iconName: name,
-    iconColor: color,
-    size: {
-      faSize: 20,
-      wrapperSize: 44
+  const skillFocusLocale = translate('skill_focus');
+  const buttonReviewProps = {
+    customStyle: {
+      backgroundColor: '#FFF',
+      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',
+      padding: '0px'
     },
-    borderRadius: '12px',
-    gradientBackground: true,
+    disabled: !review,
+    onClick: onReviewClick,
+    'aria-label': `${skillTitle}, ${reviewLocale}`,
+    label: reviewLocale,
+    'data-name': 'learner-skill-card-review-button'
+  };
+  const buttonExploreProps = {
     customStyle: {
-      border: '4px solid white'
+      backgroundColor: (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.07))`),
+      color: primarySkinColor,
+      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'
+    },
+    hoverColor: '#FFFFFF',
+    hoverBackgroundColor: primarySkinColor,
+    onClick: onExploreClick,
+    'aria-label': `${skillTitle}, ${exploreLocale}`,
+    label: exploreLocale,
+    'data-name': 'learner-skill-card-explore-button',
+    icon: {
+      position: 'left',
+      faIcon: {
+        name: 'compass',
+        backgroundColor: (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.07))`),
+        color: primarySkinColor,
+        size: 16
+      }
     }
-  }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.learnerSkillCardContent
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.learnerSkillCardWrapper,
+    "data-name": "learner-skill-card-wrapper",
+    "aria-label": ariaLabel
+  }, questionsToReview ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.skillQuestionsWrapper
   }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.skillInformation,
+    "data-name": "skill-questions"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.skillInformationNumber
+  }, questionsToReview), "\xA0", questionsLocale)) : null, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.skillTitleWrapper
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.skillFocusBadge,
-    style: {
-      backgroundColor: tagBackgroundColor,
-      color: tagTextColor
-    }
-  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-    iconName: badgeIconName,
-    backgroundColor: tagBackgroundColor,
-    size: {
-      faSize: 10,
-      wrapperSize: 16
-    }
-  }), badgeLocale), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.questionWrapper
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    "data-name": "skill-card-title",
+    "data-name": "skill-title",
     className: _style.default.skillTitle,
     "aria-label": skillAriaLabel || skillTitle
-  }, skillTitle), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.contentAndQuestionsWrapper
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    "data-name": "learner-skill-card-skill-content-number"
-  }, content, " ", translate('content')), questionsToReview ? /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.skillInformation,
-    "data-name": "learner-skill-card-skill-questions-wrapper"
+  }, skillTitle), focus ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.skillFocusBadge
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-    iconName: 'circle',
-    iconColor: _colors.COLORS.cm_grey_400,
+    iconName: "bullseye-arrow",
+    backgroundColor: "#DDD1FF",
     size: {
-      faSize: 4
-    },
-    customStyle: {
-      padding: 0,
-      height: 'auto'
+      faSize: 10,
+      wrapperSize: 16
     }
-  }), /*#__PURE__*/_react.default.createElement("span", {
-    "data-name": "learner-skill-card-questions-to-review"
-  }, questionsToReview), "\xA0", questionsLocale) : null)))), /*#__PURE__*/_react.default.createElement("div", {
+  }), skillFocusLocale) : null), content ? /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.progressInformations
   }, /*#__PURE__*/_react.default.createElement(_progressBar.default, {
     value: score,
@@ -134,11 +109,36 @@ const LearnerSkillCard = (props, context) => {
     style: {
       backgroundColor: _colors.COLORS.positive
     }
-  })));
+  }), /*#__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("div", {
+    className: _style.default.ctaWrapper,
+    "data-name": "cta-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, buttonReviewProps), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.buttonWrapper,
+    "data-name": "button-explore-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, buttonExploreProps))));
 };
 LearnerSkillCard.contextTypes = {
+  skin: _provider.default.childContextTypes.skin,
   translate: _provider.default.childContextTypes.translate
 };
-LearnerSkillCard.propTypes = process.env.NODE_ENV !== "production" ? _propTypes.default : {};
+LearnerSkillCard.propTypes = process.env.NODE_ENV !== "production" ? {
+  'aria-label': _propTypes.default.string,
+  skillTitle: _propTypes.default.string,
+  skillAriaLabel: _propTypes.default.string,
+  focus: _propTypes.default.bool,
+  metrics: _propTypes.default.shape({
+    score: _propTypes.default.number,
+    content: _propTypes.default.number,
+    questionsToReview: _propTypes.default.number
+  }),
+  review: _propTypes.default.bool,
+  onReviewClick: _propTypes.default.func,
+  onExploreClick: _propTypes.default.func
+} : {};
 var _default = exports.default = LearnerSkillCard;
 //# sourceMappingURL=index.js.map

package/lib/molecule/learner-skill-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_provider","_progressBar","_interopRequireDefault","_colors","_getBackgroundGradientColor","_icon","_propTypes","_style","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","MAX_SCORE","updateBackgroundImage","ref","background","current","style","backgroundImage","exports","LearnerSkillCard","props","context","ariaLabel","cardIndex","skillTitle","skillAriaLabel","focus","metrics","icon","onExploreClick","score","content","questionsToReview","translate","GetTranslateFromContext","color","name","questionsLocale","badgeIconName","badgeLocale","tagTextColor","tagBackgroundColor","COLORS","purple_700","purple_100","cm_grey_500","gray","headerBackgroundRef","useRef","defaultBackground","useMemo","createGradientBackground","focusBackground","handleMouseEnter","useCallback","handleMouseLeave","createElement","onClick","className","learnerSkillCardContainer","onMouseEnter","onMouseLeave","iconHeaderWrapper","iconWrapper","iconName","iconColor","size","faSize","wrapperSize","borderRadius","gradientBackground","customStyle","border","learnerSkillCardContent","skillTitleWrapper","skillFocusBadge","backgroundColor","questionWrapper","contentAndQuestionsWrapper","skillInformation","cm_grey_400","padding","height","progressInformations","value","displayInfo","max","progressWrapper","positive","contextTypes","Provider","childContextTypes","propTypes","process","env","NODE_ENV","_default"],"sources":["../../../src/molecule/learner-skill-card/index.tsx"],"sourcesContent":["import React, {useCallback, useMemo, useRef} from 'react';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport ProgressBar from '../progress-bar';\nimport {COLORS} from '../../variables/colors';\nimport {createGradientBackground} from '../../util/get-background-gradient-color';\nimport FaIcon from '../../atom/icon';\nimport propTypes, {LearnerSkillCardProps} from './prop-types';\nimport style from './style.css';\n\nconst MAX_SCORE = 100;\n\nexport const updateBackgroundImage = (ref: React.RefObject<HTMLDivElement>, background: string) => {\n  if (ref.current) {\n    ref.current.style.backgroundImage = background;\n  }\n};\n\nconst LearnerSkillCard = (props: LearnerSkillCardProps, context: WebContextValues) => {\n  const {\n    'aria-label': ariaLabel,\n    cardIndex,\n    skillTitle,\n    skillAriaLabel,\n    focus,\n    metrics,\n    icon,\n    onExploreClick\n  } = props;\n  const {score, content, questionsToReview = 0} = metrics;\n  const translate = GetTranslateFromContext(context);\n  const {color, name} = icon;\n  const questionsLocale = translate('skill_chart_side_panel_questions_to_review') as string;\n  const [badgeIconName, badgeLocale, tagTextColor, tagBackgroundColor] = focus\n    ? ['bullseye-arrow', translate('skill_focus') as string, COLORS.purple_700, COLORS.purple_100]\n    : ['shapes', translate('skill') as string, COLORS.cm_grey_500, COLORS.gray];\n  const headerBackgroundRef = useRef<HTMLDivElement | null>(null);\n  const defaultBackground = useMemo(() => createGradientBackground(color, '93%', '100%'), [color]);\n  const focusBackground = useMemo(() => createGradientBackground(color, '83%', '100%'), [color]);\n  const handleMouseEnter = useCallback(() => {\n    updateBackgroundImage(headerBackgroundRef, focusBackground);\n  }, [focusBackground]);\n  const handleMouseLeave = useCallback(() => {\n    updateBackgroundImage(headerBackgroundRef, defaultBackground);\n  }, [defaultBackground]);\n  return (\n    <div\n      data-testid={`learner-skill-card-wrapper-${cardIndex}`}\n      onClick={onExploreClick}\n      className={style.learnerSkillCardContainer}\n      aria-label={ariaLabel}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      <div\n        data-testid=\"learner-skill-card-icon-header-wrapper\"\n        ref={headerBackgroundRef}\n        className={style.iconHeaderWrapper}\n        style={{backgroundImage: defaultBackground, color: tagTextColor}}\n      >\n        <div className={style.iconWrapper} data-testid=\"learner-skill-card-icon-wrapper\">\n          <FaIcon\n            {...{\n              iconName: name,\n              iconColor: color,\n              size: {\n                faSize: 20,\n                wrapperSize: 44\n              },\n              borderRadius: '12px',\n              gradientBackground: true,\n              customStyle: {border: '4px solid white'}\n            }}\n          />\n        </div>\n      </div>\n      <div className={style.learnerSkillCardContent}>\n        <div className={style.skillTitleWrapper}>\n          <div\n            className={style.skillFocusBadge}\n            style={{\n              backgroundColor: tagBackgroundColor,\n              color: tagTextColor\n            }}\n          >\n            <FaIcon\n              {...{\n                iconName: badgeIconName,\n                backgroundColor: tagBackgroundColor,\n                size: {\n                  faSize: 10,\n                  wrapperSize: 16\n                }\n              }}\n            />\n            {badgeLocale}\n          </div>\n\n          <div className={style.questionWrapper}>\n            <div\n              data-name=\"skill-card-title\"\n              className={style.skillTitle}\n              aria-label={skillAriaLabel || skillTitle}\n            >\n              {skillTitle}\n            </div>\n            <div className={style.contentAndQuestionsWrapper}>\n              <div data-name=\"learner-skill-card-skill-content-number\">\n                {content} {translate('content')}\n              </div>\n              {questionsToReview ? (\n                <div\n                  className={style.skillInformation}\n                  data-name=\"learner-skill-card-skill-questions-wrapper\"\n                >\n                  <FaIcon\n                    {...{\n                      iconName: 'circle',\n                      iconColor: COLORS.cm_grey_400,\n                      size: {faSize: 4},\n                      customStyle: {padding: 0, height: 'auto'}\n                    }}\n                  />\n                  <span data-name=\"learner-skill-card-questions-to-review\">\n                    {questionsToReview}\n                  </span>\n                  &nbsp;{questionsLocale}\n                </div>\n              ) : null}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className={style.progressInformations}>\n        <ProgressBar\n          value={score}\n          displayInfo={false}\n          max={MAX_SCORE}\n          className={style.progressWrapper}\n          style={{backgroundColor: COLORS.positive}}\n        />\n      </div>\n    </div>\n  );\n};\n\nLearnerSkillCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nLearnerSkillCard.propTypes = propTypes;\n\nexport default LearnerSkillCard;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_cssColorFunction","_propTypes","_icon","_buttonLink","_provider","_progressBar","_colors","_style","e","__esModule","default","MAX_SCORE","LearnerSkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","focus","metrics","review","onReviewClick","onExploreClick","score","content","questionsToReview","skin","translate","primarySkinColor","_get2","reviewLocale","exploreLocale","questionsLocale","skillFocusLocale","buttonReviewProps","customStyle","backgroundColor","transition","padding","disabled","onClick","label","buttonExploreProps","convert","color","hoverColor","hoverBackgroundColor","icon","position","faIcon","name","size","createElement","className","style","learnerSkillCardWrapper","skillQuestionsWrapper","skillInformation","skillInformationNumber","skillTitleWrapper","skillFocusBadge","iconName","faSize","wrapperSize","progressInformations","value","displayInfo","max","progressWrapper","COLORS","positive","progressInformation","progressInformationNumber","ctaWrapper","buttonWrapper","contextTypes","Provider","childContextTypes","propTypes","process","env","NODE_ENV","PropTypes","string","bool","shape","number","func","_default","exports"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React 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 ProgressBar from '../progress-bar';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nconst MAX_SCORE = 100;\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('skill_chart_side_panel_questions_to_review');\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  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.skillQuestionsWrapper}>\n          <div className={style.skillInformation} data-name=\"skill-questions\">\n            <span className={style.skillInformationNumber}>{questionsToReview}</span>\n            &nbsp;{questionsLocale}\n          </div>\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      {content ? (\n        <div className={style.progressInformations}>\n          <ProgressBar\n            value={score}\n            displayInfo={false}\n            max={MAX_SCORE}\n            className={style.progressWrapper}\n            style={{backgroundColor: COLORS.positive}}\n          />\n          <div className={style.progressInformation} data-name=\"completed-percentage\">\n            <span className={style.progressInformationNumber}>{score}%</span>\n          </div>\n        </div>\n      ) : null}\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  }),\n  review: PropTypes.bool,\n  onReviewClick: PropTypes.func,\n  onExploreClick: PropTypes.func\n};\n\nexport default LearnerSkillCard;\n"],"mappings":"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","ignoreList":[]}

package/lib/molecule/learner-skill-card/style.css

@@ -18,52 +18,58 @@
   font-style: normal;
 }
 
-.learnerSkillCardContainer {
+.learnerSkillCardWrapper {
   display: flex;
   flex-direction: column;
-  width: 258px;
-  height: 220px;
+  max-width: 258px;
+  min-width: 254px;
+  width: 100%;
+  min-height: 252px;
   box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.04);
   transition: box-shadow 0.15s ease-in-out;
   border-radius: 12px;
+  padding: 24px;
   box-sizing: border-box;
-  cursor: pointer;
-  position: relative;
 }
 
-.learnerSkillCardContainer:hover {
-  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.10); 
+.learnerSkillCardWrapper:hover {
+  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.10);
 }
 
-.skillInformation {
+.skillQuestionsWrapper,
+.progressInformations {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.skillInformation,
+.progressInformation {
   composes: textBase;
   font-weight: 400;
-  font-size: 12px;
-  line-height: 16px;
+  font-size: 10px;
+  line-height: 12px;
   color: cm_grey_400;
-  display: flex;
-  align-items: center;
 }
 
+.skillInformationNumber,
+.progressInformationNumber {
+  color: #000;
+}
 
 .skillTitleWrapper {
   display: flex;
-  gap: 8px;
   flex-direction: column;
-  justify-content: space-between;
   min-height: 68px;
+  margin-bottom: 24px;
 }
 
 .skillTitle {
   composes: textBase;
   font-weight: 600;
   font-size: 16px;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  line-clamp: 2;
-  text-overflow: ellipsis;
-  overflow: hidden;
+  line-height: 22px;
+  margin-bottom: 8px;
 }
 
 .skillFocusBadge {
@@ -72,67 +78,40 @@
   height: 12px;
   width: fit-content;
   align-items: center;
+  background-color: #DDD1FF;
   border-radius: 24px;
   padding: 2px 4px;
   font-size: 10px;
   line-height: 12px;
   font-weight: 600;
+  color: #3900D6;
   margin-right: 8px;
 }
 
 .progressWrapper {
-  position: absolute;
-  bottom: 16px;
-  left: 40px;
-  width: 178px;
+  position: relative;
+  top: 4px;
+  left: 0;
+  width: 100%;
   height: 4px;
   border-radius: 2px;
   overflow: hidden;
   background: light;
+  margin-bottom: 8px;
 }
 
 .progressInformations {
-  padding: 16px 24px;
-}
-
-.contentAndQuestionsWrapper {
-  composes: textBase;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 16px;
-  color: cm_grey_400;
   display: flex;
-  align-items: center;
-}
-
-.iconWrapper {
-  border-radius: 12px;
-}
-
-.iconHeaderWrapper {
-  padding: 12px 0 12px 16px;
-  border-radius: 12px 12px 0 0;
-  border: 2px solid white;
-  background-position-y: -2px;
-  background-repeat: repeat-x;
-  background-color: white;
-}
-
-.learnerSkillCardContainer:hover .iconHeaderWrapper {
-  border: 2px solid transparent;
-  cursor: pointer;
+  gap: 8px;
+  min-height: 12px;
+  margin-bottom: 24px;
 }
 
-.learnerSkillCardContent {
-  padding: 16px;
-  padding-bottom: 0;
+.ctaWrapper {
+  margin-top: auto;
   display: flex;
-  gap: 8px;
-  flex-direction: column;
 }
 
-.questionWrapper {
+.buttonWrapper {
   display: flex;
-  gap: 8px;
-  flex-direction: column;
-}
+}

package/lib/template/my-learning/index.d.ts

@@ -46,6 +46,7 @@ declare namespace MyLearning {
         const learnerFeature: PropTypes.Requireable<boolean>;
         const isLoading: PropTypes.Requireable<boolean>;
         const onSkillFocusConfirm: PropTypes.Requireable<(...args: any[]) => any>;
+        const onReviewSkill: PropTypes.Requireable<(...args: any[]) => any>;
         const onExploreSkill: PropTypes.Requireable<(...args: any[]) => any>;
         const learningPriorities: PropTypes.Requireable<PropTypes.InferProps<{
             contentType: PropTypes.Requireable<string>;

package/lib/template/my-learning/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/my-learning/index.js"],"names":[],"mappings":";AAmHA,mEAwZC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/my-learning/index.js"],"names":[],"mappings":";AAgHA,mEA+ZC"}

package/lib/template/my-learning/index.js

@@ -30,13 +30,11 @@ var _searchValueIncluded = _interopRequireDefault(require("../../util/search-val
 var _timeFormat = require("../../util/time-format");
 var _cardsList = _interopRequireDefault(require("../../molecule/dashboard/cards-list"));
 var _title = _interopRequireDefault(require("../../atom/title"));
-var _colors = require("../../variables/colors");
 var _style = _interopRequireDefault(require("./style.css"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const roundScore = value => Math.round(value * 10) / 10;
 const ChangeSkillFocusButton = (props, context) => {
   const {
     onClick
@@ -55,7 +53,7 @@ const ChangeSkillFocusButton = (props, context) => {
       transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'
     },
     hoverBackgroundColor: primarySkinColor,
-    hoverColor: _colors.COLORS.white,
+    hoverColor: "#FFFFFF",
     onClick: onClick,
     label: translate('skills_change_focus'),
     "data-name": "change-skill-focus-button",
@@ -91,14 +89,14 @@ const FilterButton = (props, context) => {
   const Content = (0, _react.useCallback)(() => /*#__PURE__*/_react.default.createElement("div", null, filter, /*#__PURE__*/_react.default.createElement("span", {
     className: active ? _style.default.skillFilterNumber : _style.default.skillFilterNumberInActive,
     style: {
-      backgroundColor: active ? (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.07))`) : _colors.COLORS.gray,
-      color: active ? primarySkinColor : _colors.COLORS.cm_grey_500
+      backgroundColor: active ? (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.07))`) : '#EAEAEB',
+      color: active ? primarySkinColor : '#515161'
     }
   }, skillTotal)), [filter, skillTotal, active, primarySkinColor]);
   const buttonProps = {
     customStyle: {
-      backgroundColor: active ? (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.07))`) : _colors.COLORS.white,
-      color: active ? primarySkinColor : _colors.COLORS.cm_grey_400,
+      backgroundColor: active ? (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.07))`) : '#FFFFFF',
+      color: active ? primarySkinColor : '#9999A8',
       transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',
       width: 'fit-content'
     },
@@ -127,6 +125,7 @@ const MyLearning = (props, context) => {
     learnerFeature = true,
     isLoading,
     onSkillFocusConfirm,
+    onReviewSkill,
     onExploreSkill,
     learningPriorities
   } = props;
@@ -139,12 +138,12 @@ const MyLearning = (props, context) => {
   const [selectedSkillsList, setSelectedSkillsList] = (0, _react.useState)(selectedSkills);
   const [skillFocusSelectedOnChart, setSkillFocusSelectedOnChart] = (0, _react.useState)(undefined);
   const [searchValue, setSearchValue] = (0, _react.useState)('');
-  const [searchResults, setSearchResults] = (0, _react.useState)((0, _sortBy2.default)(skillRef => (0, _getOr2.default)(0, [skillRef, 'stats', 'score'], skillsInformation), skills));
+  const [searchResults, setSearchResults] = (0, _react.useState)((0, _sortBy2.default)(skillRef => -(0, _getOr2.default)(0, [skillRef, 'stats', 'score'], skillsInformation), skills));
   const [activeFilter, setActiveFilter] = (0, _react.useState)('all');
   const skillsReviewReady = (0, _react.useMemo)(() => {
     return searchResults.filter(skill => skillsInformation[skill] ? skillsInformation[skill].availableForReview : false);
   }, [searchResults, skillsInformation]);
-  const graphDatas = (0, _react.useMemo)(() => (0, _pipe2.default)((0, _map2.default)(skill => [skill, roundScore((0, _getOr2.default)(0, [skill, 'stats', 'score'], skillsInformation))]), _fromPairs2.default)(selectedSkillsList), [selectedSkillsList, skillsInformation]);
+  const graphDatas = (0, _react.useMemo)(() => (0, _pipe2.default)((0, _map2.default)(skill => [skill, (0, _getOr2.default)(0, [skill, 'stats', 'score'], skillsInformation).toFixed(1)]), _fromPairs2.default)(selectedSkillsList), [selectedSkillsList, skillsInformation]);
   const graphLegends = (0, _react.useMemo)(() => (0, _pipe2.default)((0, _map2.default)(skill => [skill, skillsLocales[skill]]), _fromPairs2.default)(selectedSkillsList), [selectedSkillsList, skillsLocales]);
   const filters = (0, _react.useMemo)(() => {
     return {
@@ -168,7 +167,7 @@ const MyLearning = (props, context) => {
     legend: skillChartPaneLegends,
     icon: {
       iconName: 'book-open-cover',
-      backgroundColor: _colors.COLORS.turquoise_100
+      backgroundColor: '#D9F4F7'
     }
   }, {
     title: translate('skill_chart_side_panel_learning_hours'),
@@ -176,7 +175,7 @@ const MyLearning = (props, context) => {
     legend: skillChartPaneLegends,
     icon: {
       iconName: 'clock',
-      backgroundColor: _colors.COLORS.pink_100
+      backgroundColor: '#FAD6DE'
     }
   }, {
     title: translate('skill_chart_side_panel_questions_to_review'),
@@ -184,7 +183,7 @@ const MyLearning = (props, context) => {
     legend: skillChartPaneLegends,
     icon: {
       iconName: 'circle-question',
-      backgroundColor: _colors.COLORS.orange_100
+      backgroundColor: '#FFDCD1'
     }
   }];
   const skillsScore = (0, _react.useMemo)(() => (0, _pipe2.default)((0, _map2.default)(skill => [skill, (0, _getOr2.default)(0, [skill, 'stats', 'score'], skillsInformation)]), _fromPairs2.default)(skills), [skills, skillsInformation]);
@@ -218,9 +217,9 @@ const MyLearning = (props, context) => {
       subtitle: translate('learning_priorities_description'),
       icon: {
         iconName: 'sign-post',
-        iconColor: _colors.COLORS.cm_orange_800,
+        iconColor: '#A32700',
         borderRadius: '12px',
-        backgroundColor: _colors.COLORS.orange_100
+        backgroundColor: '#FFDCD1'
       },
       tag: {
         label: `${(0, _size2.default)(learningPriorities.cards)}`,
@@ -251,7 +250,7 @@ const MyLearning = (props, context) => {
     className: _style.default.skillFocusHeaderIcon
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
     iconName: "bullseye-arrow",
-    backgroundColor: _colors.COLORS.purple_100,
+    backgroundColor: "#DDD1FF",
     borderRadius: "12px",
     size: {
       faSize: 20,
@@ -319,7 +318,7 @@ const MyLearning = (props, context) => {
     className: _style.default.skillListHeaderIcon
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
     iconName: "dumbbell",
-    backgroundColor: _colors.COLORS.yellow_100,
+    backgroundColor: "#FFF9D1",
     size: {
       faSize: 20,
       wrapperSize: 48
@@ -374,7 +373,7 @@ const MyLearning = (props, context) => {
     onClick: handleSearchReset
   }, translate('empty_search_result_clear_search'))) : /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.skillListContainer
-  }, activeFilter === 'review' && filters[activeFilter].length === 0 ? /*#__PURE__*/_react.default.createElement("div", {
+  }, activeFilter === 'review_mode_available' && filters[activeFilter].length === 0 ? /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.skillListEmptyContainer
   }, /*#__PURE__*/_react.default.createElement(_reviewNoSkills.default, {
     titleNoSkills: translate('review_skill_empty'),
@@ -388,6 +387,9 @@ const MyLearning = (props, context) => {
       contentCompleted: 0,
       questionsToReview: 0
     };
+    function handleReviewSkill() {
+      onReviewSkill(skill);
+    }
     function handleExploreSkill() {
       onExploreSkill(skill);
     }
@@ -396,25 +398,18 @@ const MyLearning = (props, context) => {
       content,
       questionsToReview
     } = skillsInformation[skill] ? skillsInformation[skill].stats : defaultStats;
-    const {
-      color,
-      name
-    } = (0, _get2.default)([skill, 'icon'], skillsInformation);
     return /*#__PURE__*/_react.default.createElement("div", {
       key: index
     }, /*#__PURE__*/_react.default.createElement(_learnerSkillCard.default, {
       skillTitle: skillsLocales[skill],
-      cardIndex: index,
       focus: selectedSkills.includes(skill),
       metrics: {
-        score,
+        score: score.toFixed(1),
         content,
         questionsToReview
       },
-      icon: {
-        color,
-        name
-      },
+      review: skillsInformation[skill] ? skillsInformation[skill].availableForReview : false,
+      onReviewClick: handleReviewSkill,
       onExploreClick: handleExploreSkill
     }));
   }))));
@@ -440,6 +435,7 @@ MyLearning.propTypes = process.env.NODE_ENV !== "production" ? {
   learnerFeature: _propTypes.default.bool,
   isLoading: _propTypes.default.bool,
   onSkillFocusConfirm: _propTypes.default.func,
+  onReviewSkill: _propTypes.default.func,
   onExploreSkill: _propTypes.default.func,
   learningPriorities: _propTypes.default.shape(_cardsList.default.propTypes)
 } : {};