@coorpacademy/components 11.32.11 → 11.32.12

package/es/molecule/discipline-associated-skills/index.js

@@ -19,19 +19,19 @@ const DisciplineAssociatedSkills = (props, context) => {
   } = props;
   const AnchorElement = useCallback(skill => /*#__PURE__*/React.createElement("div", {
     className: style.chipFocusedContent
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, skill.focused ? /*#__PURE__*/React.createElement(Icon, {
     iconName: "bullseye-arrow",
     backgroundColor: "#DDD1FF",
     size: {
       faSize: 12,
       wrapperSize: 12
     }
-  }), /*#__PURE__*/React.createElement("div", {
+  }) : null, /*#__PURE__*/React.createElement("div", {
     className: style.chipFocusedContentText
-  }, skill)), []);
+  }, skill.locale)), []);
   const TooltipContentElement = useCallback(skill => /*#__PURE__*/React.createElement("div", {
     className: style.tooltipContentWrapper
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, translate('skill_focused_chip_tooltip'))), /*#__PURE__*/React.createElement("div", null, skill)), []);
+  }, skill.focused ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, translate('skill_focused_chip_tooltip'))) : null, /*#__PURE__*/React.createElement("div", null, skill.locale)), []);
   return !_isEmpty(skills) ? /*#__PURE__*/React.createElement("div", {
     "data-name": "discipline-associated-skills",
     className: style.associatedSkillsWrapper
@@ -45,26 +45,26 @@ const DisciplineAssociatedSkills = (props, context) => {
     }
 
     function handleAnchorElement() {
-      return AnchorElement(skill.locale);
+      return AnchorElement(skill);
     }
 
     function handleTooltipContentElement() {
-      return TooltipContentElement(skill.locale);
+      return TooltipContentElement(skill);
     }
 
     return /*#__PURE__*/React.createElement("div", {
       key: _uniqueId(),
       className: classnames(style.chipWrapper, skill.focused && style.chipWrapperFocused),
       onClick: handleSkillClick
-    }, skill.focused ? /*#__PURE__*/React.createElement(ToolTip, {
+    }, /*#__PURE__*/React.createElement(ToolTip, {
       AnchorElement: handleAnchorElement,
       fontSize: 12,
       delayHide: 0,
       iconContainerClassName: style.infoIconTooltip,
-      tooltipClassName: style.tooltip,
+      tooltipClassName: skill.focused ? style.tooltipSkillFocused : style.tooltip,
       TooltipContent: handleTooltipContentElement,
       closeToolTipInformationTextAriaLabel: translate('close_tooltip_information')
-    }) : skill.locale);
+    }));
   })))) : null;
 };
 

package/es/molecule/discipline-associated-skills/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","classnames","Icon","ToolTip","Provider","CatalogSection","style","DisciplineAssociatedSkills","props","context","translate","skills","onSkillClick","AnchorElement","skill","chipFocusedContent","faSize","wrapperSize","chipFocusedContentText","TooltipContentElement","tooltipContentWrapper","associatedSkillsWrapper","chipsWrapper","map","handleSkillClick","ref","handleAnchorElement","locale","handleTooltipContentElement","chipWrapper","focused","chipWrapperFocused","infoIconTooltip","tooltip","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","bool","func"],"sources":["../../../src/molecule/discipline-associated-skills/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isEmpty, uniqueId} from 'lodash/fp';\nimport Icon from '../../atom/icon';\nimport ToolTip from '../../atom/tooltip';\nimport Provider from '../../atom/provider';\nimport CatalogSection from '../../atom/catalog-section';\nimport style from './style.css';\n\nconst DisciplineAssociatedSkills = (props, context) => {\n  const {translate} = context;\n\n  const {skills = [], onSkillClick} = props;\n\n  const AnchorElement = useCallback(\n    skill => (\n      <div className={style.chipFocusedContent}>\n        <Icon\n          iconName=\"bullseye-arrow\"\n          backgroundColor=\"#DDD1FF\"\n          size={{\n            faSize: 12,\n            wrapperSize: 12\n          }}\n        />\n        <div className={style.chipFocusedContentText}>{skill}</div>\n      </div>\n    ),\n    []\n  );\n\n  const TooltipContentElement = useCallback(\n    skill => (\n      <div className={style.tooltipContentWrapper}>\n        <div>\n          <b>{translate('skill_focused_chip_tooltip')}</b>\n        </div>\n        <div>{skill}</div>\n      </div>\n    ),\n    []\n  );\n\n  return !isEmpty(skills) ? (\n    <div data-name=\"discipline-associated-skills\" className={style.associatedSkillsWrapper}>\n      <CatalogSection title={translate('associated_skills')}>\n        <div className={style.chipsWrapper}>\n          {skills.map(skill => {\n            function handleSkillClick() {\n              return onSkillClick(skill.ref);\n            }\n            function handleAnchorElement() {\n              return AnchorElement(skill.locale);\n            }\n            function handleTooltipContentElement() {\n              return TooltipContentElement(skill.locale);\n            }\n            return (\n              <div\n                key={uniqueId()}\n                className={classnames(style.chipWrapper, skill.focused && style.chipWrapperFocused)}\n                onClick={handleSkillClick}\n              >\n                {skill.focused ? (\n                  <ToolTip\n                    AnchorElement={handleAnchorElement}\n                    fontSize={12}\n                    delayHide={0}\n                    iconContainerClassName={style.infoIconTooltip}\n                    tooltipClassName={style.tooltip}\n                    TooltipContent={handleTooltipContentElement}\n                    closeToolTipInformationTextAriaLabel={translate('close_tooltip_information')}\n                  />\n                ) : (\n                  skill.locale\n                )}\n              </div>\n            );\n          })}\n        </div>\n      </CatalogSection>\n    </div>\n  ) : null;\n};\n\nDisciplineAssociatedSkills.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nDisciplineAssociatedSkills.propTypes = {\n  skills: PropTypes.arrayOf(\n    PropTypes.shape({\n      ref: PropTypes.string,\n      locale: PropTypes.string,\n      focused: PropTypes.bool\n    })\n  ),\n  onSkillClick: PropTypes.func\n};\n\nexport default DisciplineAssociatedSkills;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","classnames","Icon","ToolTip","Provider","CatalogSection","style","DisciplineAssociatedSkills","props","context","translate","skills","onSkillClick","AnchorElement","skill","chipFocusedContent","focused","faSize","wrapperSize","chipFocusedContentText","locale","TooltipContentElement","tooltipContentWrapper","associatedSkillsWrapper","chipsWrapper","map","handleSkillClick","ref","handleAnchorElement","handleTooltipContentElement","chipWrapper","chipWrapperFocused","infoIconTooltip","tooltipSkillFocused","tooltip","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","bool","func"],"sources":["../../../src/molecule/discipline-associated-skills/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isEmpty, uniqueId} from 'lodash/fp';\nimport Icon from '../../atom/icon';\nimport ToolTip from '../../atom/tooltip';\nimport Provider from '../../atom/provider';\nimport CatalogSection from '../../atom/catalog-section';\nimport style from './style.css';\n\nconst DisciplineAssociatedSkills = (props, context) => {\n  const {translate} = context;\n\n  const {skills = [], onSkillClick} = props;\n\n  const AnchorElement = useCallback(\n    skill => (\n      <div className={style.chipFocusedContent}>\n        {skill.focused ? (\n          <Icon\n            iconName=\"bullseye-arrow\"\n            backgroundColor=\"#DDD1FF\"\n            size={{\n              faSize: 12,\n              wrapperSize: 12\n            }}\n          />\n        ) : null}\n        <div className={style.chipFocusedContentText}>{skill.locale}</div>\n      </div>\n    ),\n    []\n  );\n\n  const TooltipContentElement = useCallback(\n    skill => (\n      <div className={style.tooltipContentWrapper}>\n        {skill.focused ? (\n          <div>\n            <b>{translate('skill_focused_chip_tooltip')}</b>\n          </div>\n        ) : null}\n        <div>{skill.locale}</div>\n      </div>\n    ),\n    []\n  );\n\n  return !isEmpty(skills) ? (\n    <div data-name=\"discipline-associated-skills\" className={style.associatedSkillsWrapper}>\n      <CatalogSection title={translate('associated_skills')}>\n        <div className={style.chipsWrapper}>\n          {skills.map(skill => {\n            function handleSkillClick() {\n              return onSkillClick(skill.ref);\n            }\n            function handleAnchorElement() {\n              return AnchorElement(skill);\n            }\n            function handleTooltipContentElement() {\n              return TooltipContentElement(skill);\n            }\n            return (\n              <div\n                key={uniqueId()}\n                className={classnames(style.chipWrapper, skill.focused && style.chipWrapperFocused)}\n                onClick={handleSkillClick}\n              >\n                <ToolTip\n                  AnchorElement={handleAnchorElement}\n                  fontSize={12}\n                  delayHide={0}\n                  iconContainerClassName={style.infoIconTooltip}\n                  tooltipClassName={skill.focused ? style.tooltipSkillFocused : style.tooltip}\n                  TooltipContent={handleTooltipContentElement}\n                  closeToolTipInformationTextAriaLabel={translate('close_tooltip_information')}\n                />\n              </div>\n            );\n          })}\n        </div>\n      </CatalogSection>\n    </div>\n  ) : null;\n};\n\nDisciplineAssociatedSkills.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nDisciplineAssociatedSkills.propTypes = {\n  skills: PropTypes.arrayOf(\n    PropTypes.shape({\n      ref: PropTypes.string,\n      locale: PropTypes.string,\n      focused: PropTypes.bool\n    })\n  ),\n  onSkillClick: PropTypes.func\n};\n\nexport default DisciplineAssociatedSkills;\n"],"mappings":"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"}

package/es/molecule/discipline-associated-skills/style.css

@@ -55,13 +55,14 @@
   background-color: transparent;
 }
 
-.tooltip {
+.tooltip,
+.tooltipSkillFocused {
   width: fit-content;
   color: #FFF;
   font-size: 12px;
   font-style: normal;
   line-height: 16px;
-  top: -64px;
+  top: -48px;
 
   p {
     padding: 8px 8px;
@@ -69,6 +70,10 @@
   }
 }
 
+.tooltipSkillFocused {
+  top: -64px;
+}
+
 .tooltipContentWrapper {
   padding: 8px 12px;
   text-align: left;

package/es/template/skill-detail/index.d.ts

@@ -0,0 +1,57 @@
+export default SkillDetail;
+declare function SkillDetail(props: any, context: any): JSX.Element;
+declare namespace SkillDetail {
+    namespace contextTypes {
+        const skin: PropTypes.Requireable<PropTypes.InferProps<{
+            common: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            images: PropTypes.Requireable<PropTypes.InferProps<{
+                'logo-mobile': PropTypes.Requireable<any>;
+                logo: PropTypes.Requireable<any>;
+                'logo-email': PropTypes.Requireable<any>;
+                login: PropTypes.Requireable<any>;
+            }>>;
+            icons: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            mod: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            courses: PropTypes.Requireable<any[]>;
+            texts: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+        }>>;
+        const translate: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+    namespace propTypes {
+        const title: PropTypes.Validator<string>;
+        const description: PropTypes.Requireable<string>;
+        const metrics: PropTypes.Requireable<PropTypes.InferProps<{
+            score: PropTypes.Requireable<number>;
+            content: PropTypes.Requireable<number>;
+            questionsToReview: PropTypes.Requireable<number>;
+            contentCompleted: PropTypes.Requireable<number>;
+        }>>;
+        const focused: PropTypes.Requireable<boolean>;
+        const availableForReview: PropTypes.Requireable<boolean>;
+        const ongoingCourses: PropTypes.Requireable<(PropTypes.InferProps<{
+            title: PropTypes.Requireable<string>;
+            provider: PropTypes.Requireable<string>;
+            progress: PropTypes.Requireable<number>;
+        }> | null | undefined)[]>;
+        const skillIncludedCourses: PropTypes.Requireable<(PropTypes.InferProps<{
+            title: PropTypes.Requireable<string>;
+            type: PropTypes.Requireable<string>;
+            provider: PropTypes.Requireable<string>;
+            progress: PropTypes.Requireable<number>;
+        }> | null | undefined)[]>;
+        const onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
+        const onReviewClick: PropTypes.Requireable<(...args: any[]) => any>;
+        const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
+        const onCourseClick: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=index.d.ts.map

package/es/template/skill-detail/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":";AAuDA,oEA6IC"}

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

@@ -0,0 +1,248 @@
+import _get from "lodash/fp/get";
+import React, { useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+import { convert } from 'css-color-function';
+import classnames from 'classnames';
+import Provider from '../../atom/provider';
+import ButtonLink from '../../atom/button-link';
+import Icon from '../../atom/icon';
+import style from './style.css';
+
+const ContinueLearningButton = (props, context) => {
+  const [hovered, setHovered] = useState(false);
+  const {
+    onClick
+  } = props;
+  const {
+    skin,
+    translate
+  } = context;
+
+  const primarySkinColor = _get('common.primary', skin);
+
+  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);
+  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);
+  return /*#__PURE__*/React.createElement("div", {
+    onMouseOver: handleMouseOver,
+    onMouseLeave: handleMouseLeave
+  }, /*#__PURE__*/React.createElement(ButtonLink, {
+    label: translate('continue_learning'),
+    type: "primary",
+    customStyle: {
+      width: 'fit-content',
+      borderRadius: '12px',
+      backgroundColor: hovered ? 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.childContextTypes.skin,
+  translate: Provider.childContextTypes.translate
+};
+ContinueLearningButton.propTypes = process.env.NODE_ENV !== "production" ? {
+  onClick: PropTypes.func
+} : {};
+
+const SkillDetail = (props, context) => {
+  const {
+    title,
+    description,
+    metrics,
+    focused,
+    availableForReview,
+    ongoingCourses,
+    skillIncludedCourses,
+    onBackClick,
+    onReviewClick,
+    onContinueLearningClick,
+    onCourseClick
+  } = props;
+  const {
+    score,
+    content,
+    questionsToReview,
+    contentCompleted = 0
+  } = metrics;
+  const {
+    skin,
+    translate
+  } = context;
+  const [showMore, setShowMore] = useState(false);
+  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);
+  const Description = useCallback(() => {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames(style.description, !showMore && style.truncate)
+    }, description);
+  });
+  const ProgressBar = useCallback(() => {
+    if (score === undefined) return null;
+    const progressBarColor = '#3EC483';
+    const inlineProgressValueStyle = {
+      backgroundColor: progressBarColor,
+      width: `${score}%`
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.progressBarWrapper
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-name": "progress",
+      className: style.progress,
+      style: inlineProgressValueStyle,
+      role: "progressbar"
+    }));
+  }, [score]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.backgroundContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.container
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.backButtonWrapper,
+    onClick: onBackClick
+  }, /*#__PURE__*/React.createElement(Icon, {
+    iconName: "arrow-left",
+    size: {
+      faSize: 14,
+      wrapperSize: 14
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: style.ctaContainer
+  }, focused ? /*#__PURE__*/React.createElement("div", {
+    className: style.skillFocusBadge
+  }, /*#__PURE__*/React.createElement(Icon, {
+    iconName: "bullseye-arrow",
+    backgroundColor: "#DDD1FF",
+    size: {
+      faSize: 10,
+      wrapperSize: 16
+    }
+  }), translate('skill_focus')) : null, /*#__PURE__*/React.createElement("div", {
+    className: style.ctaWrapper
+  }, /*#__PURE__*/React.createElement(ButtonLink, {
+    type: "secondary",
+    onClick: onReviewClick,
+    label: translate('review_this_skill'),
+    disabled: !availableForReview,
+    customStyle: {
+      width: 'fit-content',
+      borderRadius: '12px'
+    }
+  }), /*#__PURE__*/React.createElement(ContinueLearningButton, {
+    onClick: onContinueLearningClick
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: style.title
+  }, title), description ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Description, null), description.length >= 226 ? /*#__PURE__*/React.createElement("div", {
+    className: style.showMoreWrapper,
+    onClick: handleShowMore
+  }, showMore ? translate('Show less') : translate('Show more'), /*#__PURE__*/React.createElement(Icon, {
+    iconName: showMore ? "chevron-up" : "chevron-down",
+    size: {
+      faSize: 14,
+      wrapperSize: 16
+    }
+  })) : null) : null, /*#__PURE__*/React.createElement("div", {
+    className: style.progressInformationsWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.progressTitle
+  }, translate('your_progress')), /*#__PURE__*/React.createElement("div", {
+    className: style.skillCoursesAndQuestionsWrapper
+  }, content ? /*#__PURE__*/React.createElement("div", {
+    className: style.skillInformation,
+    "data-name": "skill-courses"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.skillInformationNumber
+  }, content), " ", translate('courses')) : null, questionsToReview ? /*#__PURE__*/React.createElement("div", {
+    className: style.skillInformation,
+    "data-name": "skill-questions"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.skillInformationNumber
+  }, questionsToReview), "\xA0", translate('questions')) : null), /*#__PURE__*/React.createElement(ProgressBar, null), /*#__PURE__*/React.createElement("div", {
+    className: style.progressInformations
+  }, content && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: style.progressInformation,
+    "data-name": "skill-completed-courses"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.progressInformationNumber
+  }, contentCompleted), ` ${translate('courses_completed')}`), /*#__PURE__*/React.createElement("div", {
+    className: style.progressInformation,
+    "data-name": "completed-percentage"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.progressInformationNumber
+  }, score, "%"))))), /*#__PURE__*/React.createElement(ContinueLearning, {
+    ongoingCourses: ongoingCourses,
+    onCourseClick: onCourseClick
+  })));
+};
+
+SkillDetail.contextTypes = {
+  skin: Provider.childContextTypes.skin,
+  translate: Provider.childContextTypes.translate
+};
+SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  metrics: PropTypes.shape({
+    score: PropTypes.number,
+    content: PropTypes.number,
+    questionsToReview: PropTypes.number,
+    contentCompleted: PropTypes.number
+  }),
+  focused: PropTypes.bool,
+  availableForReview: PropTypes.bool,
+  ongoingCourses: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+    provider: PropTypes.string,
+    progress: PropTypes.number
+  })),
+  skillIncludedCourses: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+    type: PropTypes.string,
+    provider: PropTypes.string,
+    progress: PropTypes.number
+  })),
+  onBackClick: PropTypes.func,
+  onReviewClick: PropTypes.func,
+  onContinueLearningClick: PropTypes.func,
+  onCourseClick: PropTypes.func
+} : {};
+export default SkillDetail;
+
+const ContinueLearning = (props, context) => {
+  const {
+    ongoingCourses,
+    onCourseClick
+  } = props;
+  const {
+    skin,
+    translate
+  } = context;
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.continueLearningWrapper
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.continueLearningTitle
+  }, translate('continue_learning')), /*#__PURE__*/React.createElement("span", {
+    className: style.continueLearningNumber
+  }, ongoingCourses.length));
+};
+
+ContinueLearning.contextTypes = {
+  skin: Provider.childContextTypes.skin,
+  translate: Provider.childContextTypes.translate
+};
+ContinueLearning.propTypes = process.env.NODE_ENV !== "production" ? {
+  ongoingCourses: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+    provider: PropTypes.string,
+    progress: PropTypes.number
+  })),
+  onCourseClick: PropTypes.func
+} : {};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","convert","classnames","Provider","ButtonLink","Icon","style","ContinueLearningButton","props","context","hovered","setHovered","onClick","skin","translate","primarySkinColor","handleMouseOver","handleMouseLeave","width","borderRadius","backgroundColor","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","func","SkillDetail","title","description","metrics","focused","availableForReview","ongoingCourses","skillIncludedCourses","onBackClick","onReviewClick","onContinueLearningClick","onCourseClick","score","content","questionsToReview","contentCompleted","showMore","setShowMore","handleShowMore","Description","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButtonWrapper","faSize","wrapperSize","ctaContainer","skillFocusBadge","ctaWrapper","length","showMoreWrapper","progressInformationsWrapper","progressTitle","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","progressInformations","progressInformation","progressInformationNumber","string","isRequired","shape","number","bool","arrayOf","provider","type","ContinueLearning","continueLearningWrapper","continueLearningTitle","continueLearningNumber"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState, useMemo} 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 ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport style from './style.css';\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    onBackClick,\n    onReviewClick,\n    onContinueLearningClick,\n    onCourseClick\n  } = props;\n  const {score, content, questionsToReview, contentCompleted = 0} = metrics;\n  const {skin, 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          {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\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.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> : null}\n          </> \n        : null}\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> {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} onCourseClick={onCourseClick} />\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.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      provider: PropTypes.string,\n      progress: PropTypes.number\n    })\n  ),\n  skillIncludedCourses: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      type: PropTypes.string,\n      provider: PropTypes.string,\n      progress: PropTypes.number\n    })\n  ),\n  onBackClick: PropTypes.func,\n  onReviewClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func,\n  onCourseClick: PropTypes.func\n};\n\nexport default SkillDetail;\n\nconst ContinueLearning = (props, context) => {\n  const {\n    ongoingCourses,\n    onCourseClick\n  } = props;\n  const {skin, translate} = context;\n\n  return (\n    <div className={style.continueLearningWrapper}>\n      <span className={style.continueLearningTitle}>{translate('continue_learning')}</span>\n      <span className={style.continueLearningNumber}>\n        {ongoingCourses.length}\n      </span>\n    </div>\n  )\n}\n\nContinueLearning.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nContinueLearning.propTypes = {\n  ongoingCourses: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      provider: PropTypes.string,\n      progress: PropTypes.number\n    })\n  ),\n  onCourseClick: PropTypes.func\n};\n"],"mappings":"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"}

package/es/template/skill-detail/style.css

@@ -0,0 +1,172 @@
+@value colors: "../../variables/colors.css";
+@value xtraLightGrey from colors;
+@value cm_grey_100 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 + 32px);
+}
+
+.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-right: 8px;
+}
+
+.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;
+}
+
+/* Continue Learning */
+.continueLearningWrapper {
+  margin-top: 40px;
+}
+
+.continueLearningTitle {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 22px;
+}
+
+.continueLearningNumber {
+  border-radius: 50%;
+  background-color: #EAEAEB;
+  color: #515161;
+  padding: 2px 4px;
+  margin-left: 8px;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 12px;
+}

package/lib/molecule/discipline-associated-skills/index.js

@@ -39,19 +39,19 @@ const DisciplineAssociatedSkills = (props, context) => {
   } = props;
   const AnchorElement = (0, _react.useCallback)(skill => /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.chipFocusedContent
-  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+  }, skill.focused ? /*#__PURE__*/_react.default.createElement(_icon.default, {
     iconName: "bullseye-arrow",
     backgroundColor: "#DDD1FF",
     size: {
       faSize: 12,
       wrapperSize: 12
     }
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  }) : null, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.chipFocusedContentText
-  }, skill)), []);
+  }, skill.locale)), []);
   const TooltipContentElement = (0, _react.useCallback)(skill => /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.tooltipContentWrapper
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("b", null, translate('skill_focused_chip_tooltip'))), /*#__PURE__*/_react.default.createElement("div", null, skill)), []);
+  }, skill.focused ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("b", null, translate('skill_focused_chip_tooltip'))) : null, /*#__PURE__*/_react.default.createElement("div", null, skill.locale)), []);
   return !(0, _isEmpty2.default)(skills) ? /*#__PURE__*/_react.default.createElement("div", {
     "data-name": "discipline-associated-skills",
     className: _style.default.associatedSkillsWrapper
@@ -65,26 +65,26 @@ const DisciplineAssociatedSkills = (props, context) => {
     }
 
     function handleAnchorElement() {
-      return AnchorElement(skill.locale);
+      return AnchorElement(skill);
     }
 
     function handleTooltipContentElement() {
-      return TooltipContentElement(skill.locale);
+      return TooltipContentElement(skill);
     }
 
     return /*#__PURE__*/_react.default.createElement("div", {
       key: (0, _uniqueId2.default)(),
       className: (0, _classnames.default)(_style.default.chipWrapper, skill.focused && _style.default.chipWrapperFocused),
       onClick: handleSkillClick
-    }, skill.focused ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
       AnchorElement: handleAnchorElement,
       fontSize: 12,
       delayHide: 0,
       iconContainerClassName: _style.default.infoIconTooltip,
-      tooltipClassName: _style.default.tooltip,
+      tooltipClassName: skill.focused ? _style.default.tooltipSkillFocused : _style.default.tooltip,
       TooltipContent: handleTooltipContentElement,
       closeToolTipInformationTextAriaLabel: translate('close_tooltip_information')
-    }) : skill.locale);
+    }));
   })))) : null;
 };
 

package/lib/molecule/discipline-associated-skills/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DisciplineAssociatedSkills","props","context","translate","skills","onSkillClick","AnchorElement","useCallback","skill","style","chipFocusedContent","faSize","wrapperSize","chipFocusedContentText","TooltipContentElement","tooltipContentWrapper","associatedSkillsWrapper","chipsWrapper","map","handleSkillClick","ref","handleAnchorElement","locale","handleTooltipContentElement","classnames","chipWrapper","focused","chipWrapperFocused","infoIconTooltip","tooltip","contextTypes","Provider","childContextTypes","propTypes","PropTypes","arrayOf","shape","string","bool","func"],"sources":["../../../src/molecule/discipline-associated-skills/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isEmpty, uniqueId} from 'lodash/fp';\nimport Icon from '../../atom/icon';\nimport ToolTip from '../../atom/tooltip';\nimport Provider from '../../atom/provider';\nimport CatalogSection from '../../atom/catalog-section';\nimport style from './style.css';\n\nconst DisciplineAssociatedSkills = (props, context) => {\n  const {translate} = context;\n\n  const {skills = [], onSkillClick} = props;\n\n  const AnchorElement = useCallback(\n    skill => (\n      <div className={style.chipFocusedContent}>\n        <Icon\n          iconName=\"bullseye-arrow\"\n          backgroundColor=\"#DDD1FF\"\n          size={{\n            faSize: 12,\n            wrapperSize: 12\n          }}\n        />\n        <div className={style.chipFocusedContentText}>{skill}</div>\n      </div>\n    ),\n    []\n  );\n\n  const TooltipContentElement = useCallback(\n    skill => (\n      <div className={style.tooltipContentWrapper}>\n        <div>\n          <b>{translate('skill_focused_chip_tooltip')}</b>\n        </div>\n        <div>{skill}</div>\n      </div>\n    ),\n    []\n  );\n\n  return !isEmpty(skills) ? (\n    <div data-name=\"discipline-associated-skills\" className={style.associatedSkillsWrapper}>\n      <CatalogSection title={translate('associated_skills')}>\n        <div className={style.chipsWrapper}>\n          {skills.map(skill => {\n            function handleSkillClick() {\n              return onSkillClick(skill.ref);\n            }\n            function handleAnchorElement() {\n              return AnchorElement(skill.locale);\n            }\n            function handleTooltipContentElement() {\n              return TooltipContentElement(skill.locale);\n            }\n            return (\n              <div\n                key={uniqueId()}\n                className={classnames(style.chipWrapper, skill.focused && style.chipWrapperFocused)}\n                onClick={handleSkillClick}\n              >\n                {skill.focused ? (\n                  <ToolTip\n                    AnchorElement={handleAnchorElement}\n                    fontSize={12}\n                    delayHide={0}\n                    iconContainerClassName={style.infoIconTooltip}\n                    tooltipClassName={style.tooltip}\n                    TooltipContent={handleTooltipContentElement}\n                    closeToolTipInformationTextAriaLabel={translate('close_tooltip_information')}\n                  />\n                ) : (\n                  skill.locale\n                )}\n              </div>\n            );\n          })}\n        </div>\n      </CatalogSection>\n    </div>\n  ) : null;\n};\n\nDisciplineAssociatedSkills.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nDisciplineAssociatedSkills.propTypes = {\n  skills: PropTypes.arrayOf(\n    PropTypes.shape({\n      ref: PropTypes.string,\n      locale: PropTypes.string,\n      focused: PropTypes.bool\n    })\n  ),\n  onSkillClick: PropTypes.func\n};\n\nexport default DisciplineAssociatedSkills;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,0BAA0B,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACrD,MAAM;IAACC;EAAD,IAAcD,OAApB;EAEA,MAAM;IAACE,MAAM,GAAG,EAAV;IAAcC;EAAd,IAA8BJ,KAApC;EAEA,MAAMK,aAAa,GAAG,IAAAC,kBAAA,EACpBC,KAAK,iBACH;IAAK,SAAS,EAAEC,cAAA,CAAMC;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,eASE;IAAK,SAAS,EAAEH,cAAA,CAAMI;EAAtB,GAA+CL,KAA/C,CATF,CAFkB,EAcpB,EAdoB,CAAtB;EAiBA,MAAMM,qBAAqB,GAAG,IAAAP,kBAAA,EAC5BC,KAAK,iBACH;IAAK,SAAS,EAAEC,cAAA,CAAMM;EAAtB,gBACE,uDACE,wCAAIZ,SAAS,CAAC,4BAAD,CAAb,CADF,CADF,eAIE,0CAAMK,KAAN,CAJF,CAF0B,EAS5B,EAT4B,CAA9B;EAYA,OAAO,CAAC,uBAAQJ,MAAR,CAAD,gBACL;IAAK,aAAU,8BAAf;IAA8C,SAAS,EAAEK,cAAA,CAAMO;EAA/D,gBACE,6BAAC,uBAAD;IAAgB,KAAK,EAAEb,SAAS,CAAC,mBAAD;EAAhC,gBACE;IAAK,SAAS,EAAEM,cAAA,CAAMQ;EAAtB,GACGb,MAAM,CAACc,GAAP,CAAWV,KAAK,IAAI;IACnB,SAASW,gBAAT,GAA4B;MAC1B,OAAOd,YAAY,CAACG,KAAK,CAACY,GAAP,CAAnB;IACD;;IACD,SAASC,mBAAT,GAA+B;MAC7B,OAAOf,aAAa,CAACE,KAAK,CAACc,MAAP,CAApB;IACD;;IACD,SAASC,2BAAT,GAAuC;MACrC,OAAOT,qBAAqB,CAACN,KAAK,CAACc,MAAP,CAA5B;IACD;;IACD,oBACE;MACE,GAAG,EAAE,yBADP;MAEE,SAAS,EAAE,IAAAE,mBAAA,EAAWf,cAAA,CAAMgB,WAAjB,EAA8BjB,KAAK,CAACkB,OAAN,IAAiBjB,cAAA,CAAMkB,kBAArD,CAFb;MAGE,OAAO,EAAER;IAHX,GAKGX,KAAK,CAACkB,OAAN,gBACC,6BAAC,gBAAD;MACE,aAAa,EAAEL,mBADjB;MAEE,QAAQ,EAAE,EAFZ;MAGE,SAAS,EAAE,CAHb;MAIE,sBAAsB,EAAEZ,cAAA,CAAMmB,eAJhC;MAKE,gBAAgB,EAAEnB,cAAA,CAAMoB,OAL1B;MAME,cAAc,EAAEN,2BANlB;MAOE,oCAAoC,EAAEpB,SAAS,CAAC,2BAAD;IAPjD,EADD,GAWCK,KAAK,CAACc,MAhBV,CADF;EAqBD,CA/BA,CADH,CADF,CADF,CADK,GAuCH,IAvCJ;AAwCD,CA1ED;;AA4EAtB,0BAA0B,CAAC8B,YAA3B,GAA0C;EACxC3B,SAAS,EAAE4B,iBAAA,CAASC,iBAAT,CAA2B7B;AADE,CAA1C;AAIAH,0BAA0B,CAACiC,SAA3B,2CAAuC;EACrC7B,MAAM,EAAE8B,kBAAA,CAAUC,OAAV,CACND,kBAAA,CAAUE,KAAV,CAAgB;IACdhB,GAAG,EAAEc,kBAAA,CAAUG,MADD;IAEdf,MAAM,EAAEY,kBAAA,CAAUG,MAFJ;IAGdX,OAAO,EAAEQ,kBAAA,CAAUI;EAHL,CAAhB,CADM,CAD6B;EAQrCjC,YAAY,EAAE6B,kBAAA,CAAUK;AARa,CAAvC;eAWevC,0B"}
+{"version":3,"file":"index.js","names":["DisciplineAssociatedSkills","props","context","translate","skills","onSkillClick","AnchorElement","useCallback","skill","style","chipFocusedContent","focused","faSize","wrapperSize","chipFocusedContentText","locale","TooltipContentElement","tooltipContentWrapper","associatedSkillsWrapper","chipsWrapper","map","handleSkillClick","ref","handleAnchorElement","handleTooltipContentElement","classnames","chipWrapper","chipWrapperFocused","infoIconTooltip","tooltipSkillFocused","tooltip","contextTypes","Provider","childContextTypes","propTypes","PropTypes","arrayOf","shape","string","bool","func"],"sources":["../../../src/molecule/discipline-associated-skills/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isEmpty, uniqueId} from 'lodash/fp';\nimport Icon from '../../atom/icon';\nimport ToolTip from '../../atom/tooltip';\nimport Provider from '../../atom/provider';\nimport CatalogSection from '../../atom/catalog-section';\nimport style from './style.css';\n\nconst DisciplineAssociatedSkills = (props, context) => {\n  const {translate} = context;\n\n  const {skills = [], onSkillClick} = props;\n\n  const AnchorElement = useCallback(\n    skill => (\n      <div className={style.chipFocusedContent}>\n        {skill.focused ? (\n          <Icon\n            iconName=\"bullseye-arrow\"\n            backgroundColor=\"#DDD1FF\"\n            size={{\n              faSize: 12,\n              wrapperSize: 12\n            }}\n          />\n        ) : null}\n        <div className={style.chipFocusedContentText}>{skill.locale}</div>\n      </div>\n    ),\n    []\n  );\n\n  const TooltipContentElement = useCallback(\n    skill => (\n      <div className={style.tooltipContentWrapper}>\n        {skill.focused ? (\n          <div>\n            <b>{translate('skill_focused_chip_tooltip')}</b>\n          </div>\n        ) : null}\n        <div>{skill.locale}</div>\n      </div>\n    ),\n    []\n  );\n\n  return !isEmpty(skills) ? (\n    <div data-name=\"discipline-associated-skills\" className={style.associatedSkillsWrapper}>\n      <CatalogSection title={translate('associated_skills')}>\n        <div className={style.chipsWrapper}>\n          {skills.map(skill => {\n            function handleSkillClick() {\n              return onSkillClick(skill.ref);\n            }\n            function handleAnchorElement() {\n              return AnchorElement(skill);\n            }\n            function handleTooltipContentElement() {\n              return TooltipContentElement(skill);\n            }\n            return (\n              <div\n                key={uniqueId()}\n                className={classnames(style.chipWrapper, skill.focused && style.chipWrapperFocused)}\n                onClick={handleSkillClick}\n              >\n                <ToolTip\n                  AnchorElement={handleAnchorElement}\n                  fontSize={12}\n                  delayHide={0}\n                  iconContainerClassName={style.infoIconTooltip}\n                  tooltipClassName={skill.focused ? style.tooltipSkillFocused : style.tooltip}\n                  TooltipContent={handleTooltipContentElement}\n                  closeToolTipInformationTextAriaLabel={translate('close_tooltip_information')}\n                />\n              </div>\n            );\n          })}\n        </div>\n      </CatalogSection>\n    </div>\n  ) : null;\n};\n\nDisciplineAssociatedSkills.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nDisciplineAssociatedSkills.propTypes = {\n  skills: PropTypes.arrayOf(\n    PropTypes.shape({\n      ref: PropTypes.string,\n      locale: PropTypes.string,\n      focused: PropTypes.bool\n    })\n  ),\n  onSkillClick: PropTypes.func\n};\n\nexport default DisciplineAssociatedSkills;\n"],"mappings":"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"}

package/lib/molecule/discipline-associated-skills/style.css

@@ -55,13 +55,14 @@
   background-color: transparent;
 }
 
-.tooltip {
+.tooltip,
+.tooltipSkillFocused {
   width: fit-content;
   color: #FFF;
   font-size: 12px;
   font-style: normal;
   line-height: 16px;
-  top: -64px;
+  top: -48px;
 
   p {
     padding: 8px 8px;
@@ -69,6 +70,10 @@
   }
 }
 
+.tooltipSkillFocused {
+  top: -64px;
+}
+
 .tooltipContentWrapper {
   padding: 8px 12px;
   text-align: left;

package/lib/template/skill-detail/index.d.ts

@@ -0,0 +1,57 @@
+export default SkillDetail;
+declare function SkillDetail(props: any, context: any): JSX.Element;
+declare namespace SkillDetail {
+    namespace contextTypes {
+        const skin: PropTypes.Requireable<PropTypes.InferProps<{
+            common: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            images: PropTypes.Requireable<PropTypes.InferProps<{
+                'logo-mobile': PropTypes.Requireable<any>;
+                logo: PropTypes.Requireable<any>;
+                'logo-email': PropTypes.Requireable<any>;
+                login: PropTypes.Requireable<any>;
+            }>>;
+            icons: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            mod: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            courses: PropTypes.Requireable<any[]>;
+            texts: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+        }>>;
+        const translate: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+    namespace propTypes {
+        const title: PropTypes.Validator<string>;
+        const description: PropTypes.Requireable<string>;
+        const metrics: PropTypes.Requireable<PropTypes.InferProps<{
+            score: PropTypes.Requireable<number>;
+            content: PropTypes.Requireable<number>;
+            questionsToReview: PropTypes.Requireable<number>;
+            contentCompleted: PropTypes.Requireable<number>;
+        }>>;
+        const focused: PropTypes.Requireable<boolean>;
+        const availableForReview: PropTypes.Requireable<boolean>;
+        const ongoingCourses: PropTypes.Requireable<(PropTypes.InferProps<{
+            title: PropTypes.Requireable<string>;
+            provider: PropTypes.Requireable<string>;
+            progress: PropTypes.Requireable<number>;
+        }> | null | undefined)[]>;
+        const skillIncludedCourses: PropTypes.Requireable<(PropTypes.InferProps<{
+            title: PropTypes.Requireable<string>;
+            type: PropTypes.Requireable<string>;
+            provider: PropTypes.Requireable<string>;
+            progress: PropTypes.Requireable<number>;
+        }> | null | undefined)[]>;
+        const onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
+        const onReviewClick: PropTypes.Requireable<(...args: any[]) => any>;
+        const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
+        const onCourseClick: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=index.d.ts.map

package/lib/template/skill-detail/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":";AAuDA,oEA6IC"}

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

@@ -0,0 +1,266 @@
+"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 _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
+
+var _icon = _interopRequireDefault(require("../../atom/icon"));
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+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,
+    onBackClick,
+    onReviewClick,
+    onContinueLearningClick,
+    onCourseClick
+  } = props;
+  const {
+    score,
+    content,
+    questionsToReview,
+    contentCompleted = 0
+  } = metrics;
+  const {
+    skin,
+    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
+  }, 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.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.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.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, {
+    ongoingCourses: ongoingCourses,
+    onCourseClick: onCourseClick
+  })));
+};
+
+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.arrayOf(_propTypes.default.shape({
+    title: _propTypes.default.string,
+    provider: _propTypes.default.string,
+    progress: _propTypes.default.number
+  })),
+  skillIncludedCourses: _propTypes.default.arrayOf(_propTypes.default.shape({
+    title: _propTypes.default.string,
+    type: _propTypes.default.string,
+    provider: _propTypes.default.string,
+    progress: _propTypes.default.number
+  })),
+  onBackClick: _propTypes.default.func,
+  onReviewClick: _propTypes.default.func,
+  onContinueLearningClick: _propTypes.default.func,
+  onCourseClick: _propTypes.default.func
+} : {};
+var _default = SkillDetail;
+exports.default = _default;
+
+const ContinueLearning = (props, context) => {
+  const {
+    ongoingCourses,
+    onCourseClick
+  } = props;
+  const {
+    skin,
+    translate
+  } = context;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.continueLearningWrapper
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.continueLearningTitle
+  }, translate('continue_learning')), /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.continueLearningNumber
+  }, ongoingCourses.length));
+};
+
+ContinueLearning.contextTypes = {
+  skin: _provider.default.childContextTypes.skin,
+  translate: _provider.default.childContextTypes.translate
+};
+ContinueLearning.propTypes = process.env.NODE_ENV !== "production" ? {
+  ongoingCourses: _propTypes.default.arrayOf(_propTypes.default.shape({
+    title: _propTypes.default.string,
+    provider: _propTypes.default.string,
+    progress: _propTypes.default.number
+  })),
+  onCourseClick: _propTypes.default.func
+} : {};
+//# 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","onBackClick","onReviewClick","onContinueLearningClick","onCourseClick","score","content","questionsToReview","contentCompleted","showMore","setShowMore","handleShowMore","Description","classnames","style","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButtonWrapper","faSize","wrapperSize","ctaContainer","skillFocusBadge","ctaWrapper","length","showMoreWrapper","progressInformationsWrapper","progressTitle","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","progressInformations","progressInformation","progressInformationNumber","string","isRequired","shape","number","bool","arrayOf","provider","type","ContinueLearning","continueLearningWrapper","continueLearningTitle","continueLearningNumber"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState, useMemo} 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 ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport style from './style.css';\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    onBackClick,\n    onReviewClick,\n    onContinueLearningClick,\n    onCourseClick\n  } = props;\n  const {score, content, questionsToReview, contentCompleted = 0} = metrics;\n  const {skin, 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          {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\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.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> : null}\n          </> \n        : null}\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> {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} onCourseClick={onCourseClick} />\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.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      provider: PropTypes.string,\n      progress: PropTypes.number\n    })\n  ),\n  skillIncludedCourses: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      type: PropTypes.string,\n      provider: PropTypes.string,\n      progress: PropTypes.number\n    })\n  ),\n  onBackClick: PropTypes.func,\n  onReviewClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func,\n  onCourseClick: PropTypes.func\n};\n\nexport default SkillDetail;\n\nconst ContinueLearning = (props, context) => {\n  const {\n    ongoingCourses,\n    onCourseClick\n  } = props;\n  const {skin, translate} = context;\n\n  return (\n    <div className={style.continueLearningWrapper}>\n      <span className={style.continueLearningTitle}>{translate('continue_learning')}</span>\n      <span className={style.continueLearningNumber}>\n        {ongoingCourses.length}\n      </span>\n    </div>\n  )\n}\n\nContinueLearning.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nContinueLearning.propTypes = {\n  ongoingCourses: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      provider: PropTypes.string,\n      progress: PropTypes.number\n    })\n  ),\n  onCourseClick: PropTypes.func\n};\n"],"mappings":"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"}

package/lib/template/skill-detail/style.css

@@ -0,0 +1,172 @@
+@value colors: "../../variables/colors.css";
+@value xtraLightGrey from colors;
+@value cm_grey_100 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 + 32px);
+}
+
+.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-right: 8px;
+}
+
+.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;
+}
+
+/* Continue Learning */
+.continueLearningWrapper {
+  margin-top: 40px;
+}
+
+.continueLearningTitle {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 22px;
+}
+
+.continueLearningNumber {
+  border-radius: 50%;
+  background-color: #EAEAEB;
+  color: #515161;
+  padding: 2px 4px;
+  margin-left: 8px;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 12px;
+}

package/package.json

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