@coorpacademy/components 11.32.7 → 11.32.8

package/es/hoc/transition/test/fixtures/style.css

@@ -0,0 +1,45 @@
+.container {
+  width: 300px;
+  height: 300px;
+  position: relative;
+  perspective: 800px;
+}
+
+.square {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: transform 1s;
+  border: 1px solid black;
+  top: 100px;
+  left: 100px;
+}
+
+.flipped > .square {
+  transform: rotateY(180deg);
+}
+
+.front,
+.back {
+  margin: 0;
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+}
+
+.front {
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-flow: column;
+}
+
+.back {
+  background-image: url(http://img.voi.pmdstatic.net/fit/http.3A.2F.2Fprd2-bone-image.2Es3-website-eu-west-1.2Eamazonaws.2Ecom.2Fprismamedia_people.2F2017.2F06.2F30.2Fa9a1132c-920d-4d0d-af0c-7c686d72dfe5.2Ejpeg/380x285/quality/80/jacques-chirac.jpg);
+  background-size: cover;
+  transform: rotateY(180deg);
+}

package/es/molecule/discipline-associated-skills/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/discipline-associated-skills/index.js"],"names":[],"mappings":";AAUA,0FA2DC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/discipline-associated-skills/index.js"],"names":[],"mappings":";AAUA,0FA0EC"}

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

@@ -26,7 +26,12 @@ const DisciplineAssociatedSkills = (props, context) => {
       faSize: 12,
       wrapperSize: 12
     }
-  }), skill), []);
+  }), /*#__PURE__*/React.createElement("div", {
+    className: style.chipFocusedContentText
+  }, skill)), []);
+  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)), []);
   return !_isEmpty(skills) ? /*#__PURE__*/React.createElement("div", {
     "data-name": "discipline-associated-skills",
     className: style.associatedSkillsWrapper
@@ -43,6 +48,10 @@ const DisciplineAssociatedSkills = (props, context) => {
       return AnchorElement(skill.locale);
     }
 
+    function handleTooltipContentElement() {
+      return TooltipContentElement(skill.locale);
+    }
+
     return /*#__PURE__*/React.createElement("div", {
       key: _uniqueId(),
       className: classnames(style.chipWrapper, skill.focused && style.chipWrapperFocused),
@@ -53,7 +62,7 @@ const DisciplineAssociatedSkills = (props, context) => {
       delayHide: 0,
       iconContainerClassName: style.infoIconTooltip,
       tooltipClassName: style.tooltip,
-      TooltipContent: translate('skill_focused_chip_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","associatedSkillsWrapper","chipsWrapper","map","handleSkillClick","ref","handleAnchorElement","locale","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        {skill}\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            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={translate('skill_focused_chip_tooltip')}\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,OAAOA,KAAP,IAAeC,WAAf,QAAiC,OAAjC;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,OAAOC,IAAP,MAAiB,iBAAjB;AACA,OAAOC,OAAP,MAAoB,oBAApB;AACA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,cAAP,MAA2B,4BAA3B;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,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,GAAGd,WAAW,CAC/Be,KAAK,iBACH;IAAK,SAAS,EAAER,KAAK,CAACS;EAAtB,gBACE,oBAAC,IAAD;IACE,QAAQ,EAAC,gBADX;IAEE,eAAe,EAAC,SAFlB;IAGE,IAAI,EAAE;MACJC,MAAM,EAAE,EADJ;MAEJC,WAAW,EAAE;IAFT;EAHR,EADF,EASGH,KATH,CAF6B,EAc/B,EAd+B,CAAjC;EAiBA,OAAO,CAAC,SAAQH,MAAR,CAAD,gBACL;IAAK,aAAU,8BAAf;IAA8C,SAAS,EAAEL,KAAK,CAACY;EAA/D,gBACE,oBAAC,cAAD;IAAgB,KAAK,EAAER,SAAS,CAAC,mBAAD;EAAhC,gBACE;IAAK,SAAS,EAAEJ,KAAK,CAACa;EAAtB,GACGR,MAAM,CAACS,GAAP,CAAWN,KAAK,IAAI;IACnB,SAASO,gBAAT,GAA4B;MAC1B,OAAOT,YAAY,CAACE,KAAK,CAACQ,GAAP,CAAnB;IACD;;IACD,SAASC,mBAAT,GAA+B;MAC7B,OAAOV,aAAa,CAACC,KAAK,CAACU,MAAP,CAApB;IACD;;IACD,oBACE;MACE,GAAG,EAAE,WADP;MAEE,SAAS,EAAEvB,UAAU,CAACK,KAAK,CAACmB,WAAP,EAAoBX,KAAK,CAACY,OAAN,IAAiBpB,KAAK,CAACqB,kBAA3C,CAFvB;MAGE,OAAO,EAAEN;IAHX,GAKGP,KAAK,CAACY,OAAN,gBACC,oBAAC,OAAD;MACE,aAAa,EAAEH,mBADjB;MAEE,QAAQ,EAAE,EAFZ;MAGE,SAAS,EAAE,CAHb;MAIE,sBAAsB,EAAEjB,KAAK,CAACsB,eAJhC;MAKE,gBAAgB,EAAEtB,KAAK,CAACuB,OAL1B;MAME,cAAc,EAAEnB,SAAS,CAAC,4BAAD,CAN3B;MAOE,oCAAoC,EAAEA,SAAS,CAAC,2BAAD;IAPjD,EADD,GAWCI,KAAK,CAACU,MAhBV,CADF;EAqBD,CA5BA,CADH,CADF,CADF,CADK,GAoCH,IApCJ;AAqCD,CA3DD;;AA6DAjB,0BAA0B,CAACuB,YAA3B,GAA0C;EACxCpB,SAAS,EAAEN,QAAQ,CAAC2B,iBAAT,CAA2BrB;AADE,CAA1C;AAIAH,0BAA0B,CAACyB,SAA3B,2CAAuC;EACrCrB,MAAM,EAAEX,SAAS,CAACiC,OAAV,CACNjC,SAAS,CAACkC,KAAV,CAAgB;IACdZ,GAAG,EAAEtB,SAAS,CAACmC,MADD;IAEdX,MAAM,EAAExB,SAAS,CAACmC,MAFJ;IAGdT,OAAO,EAAE1B,SAAS,CAACoC;EAHL,CAAhB,CADM,CAD6B;EAQrCxB,YAAY,EAAEZ,SAAS,CAACqC;AARa,CAAvC;AAWA,eAAe9B,0BAAf"}
+{"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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"}

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

@@ -1,6 +1,7 @@
 @value colors: "../../variables/colors.css";
 @value breakpoints: "../../variables/breakpoints.css";
 @value desktop from breakpoints;
+@value mobile from breakpoints;
 @value cm_grey_100 from colors;
 @value cm_grey_200 from colors;
 @value cm_grey_700 from colors;
@@ -26,8 +27,6 @@
   font-weight: 600;
   line-height: 20px;
   font-size: 14px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .chipWrapperFocused {
@@ -38,6 +37,7 @@
 .chipFocusedContent {
   display: flex;
   align-items: center;
+  max-width: 224px;
   gap: 4px;
 
   div {
@@ -45,6 +45,12 @@
   }
 }
 
+.chipFocusedContentText {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
 .infoIconTooltip {
   background-color: transparent;
 }
@@ -55,7 +61,7 @@
   font-size: 12px;
   font-style: normal;
   line-height: 16px;
-  top: -48px;
+  top: -64px;
 
   p {
     padding: 8px 8px;
@@ -63,8 +69,34 @@
   }
 }
 
+.tooltipContentWrapper {
+  padding: 8px 12px;
+  text-align: left;
+  width: max-content;
+  font-weight: 400;
+  line-height: 16px;
+}
+
 @media desktop {
   .associatedSkillsWrapper {
     margin-top: 24px;
   }
+  
+  .chipFocusedContent {
+    max-width: max-content;
+  }
+}
+
+@media mobile {
+  .associatedSkillsWrapper {
+    margin-top: 24px;
+  }
+
+  .chipFocusedContent {
+    max-width: 100%;
+  }
+
+  .chipWrapperFocused {
+    max-width: 69vw;
+  }
 }

package/es/molecule/learner-skill-card/index.d.ts

@@ -32,9 +32,9 @@ declare namespace LearnerSkillCard {
         focus: PropTypes.Requireable<boolean>;
         metrics: PropTypes.Requireable<PropTypes.InferProps<{
             score: PropTypes.Requireable<number>;
-            skillCourses: PropTypes.Requireable<number>;
-            skillQuestions: PropTypes.Requireable<number>;
-            completedCourses: PropTypes.Requireable<number>;
+            content: PropTypes.Requireable<number>;
+            questionsToReview: PropTypes.Requireable<number>;
+            contentCompleted: PropTypes.Requireable<number>;
         }>>;
         review: PropTypes.Requireable<boolean>;
         onReviewClick: PropTypes.Requireable<(...args: any[]) => any>;

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

@@ -20,9 +20,9 @@ const LearnerSkillCard = (props, context) => {
   } = props;
   const {
     score,
-    skillCourses,
-    skillQuestions,
-    completedCourses = 0
+    content,
+    questionsToReview,
+    contentCompleted = 0
   } = metrics;
   const {
     skin,
@@ -37,7 +37,7 @@ const LearnerSkillCard = (props, context) => {
   const coursesLocale = translate('courses');
   const questionsLocale = translate('questions');
   const skillFocusLocale = translate('skill_focus');
-  const coursesCompletedLocale = translate('courses_completed');
+  const contentCompletedLocale = translate('courses_completed');
   const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);
   const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);
   const buttonReviewProps = {
@@ -72,7 +72,7 @@ const LearnerSkillCard = (props, context) => {
     }
   };
   const ProgressBar = useCallback(() => {
-    if (!skillCourses) return null;
+    if (!content) return null;
     const progressBarColor = '#3EC483';
     const inlineProgressValueStyle = {
       backgroundColor: progressBarColor,
@@ -87,24 +87,24 @@ const LearnerSkillCard = (props, context) => {
       role: "progressbar",
       "aria-label": _get('progression', ariaLabel)
     }));
-  }, [score, ariaLabel, skillCourses]);
+  }, [score, ariaLabel, content]);
   return /*#__PURE__*/React.createElement("div", {
     className: style.learnerSkillCardWrapper,
     "data-name": "learner-skill-card-wrapper",
     "aria-label": ariaLabel
-  }, skillCourses || skillQuestions ? /*#__PURE__*/React.createElement("div", {
+  }, content || questionsToReview ? /*#__PURE__*/React.createElement("div", {
     className: style.skillCoursesAndQuestionsWrapper
-  }, skillCourses ? /*#__PURE__*/React.createElement("div", {
+  }, content ? /*#__PURE__*/React.createElement("div", {
     className: style.skillInformation,
     "data-name": "skill-courses"
   }, /*#__PURE__*/React.createElement("span", {
     className: style.skillInformationNumber
-  }, skillCourses), " ", coursesLocale) : null, skillQuestions ? /*#__PURE__*/React.createElement("div", {
+  }, content), " ", coursesLocale) : null, questionsToReview ? /*#__PURE__*/React.createElement("div", {
     className: style.skillInformation,
     "data-name": "skill-questions"
   }, /*#__PURE__*/React.createElement("span", {
     className: style.skillInformationNumber
-  }, skillQuestions), "\xA0", questionsLocale) : null) : null, /*#__PURE__*/React.createElement("div", {
+  }, questionsToReview), "\xA0", questionsLocale) : null) : null, /*#__PURE__*/React.createElement("div", {
     className: style.skillTitleWrapper
   }, /*#__PURE__*/React.createElement("div", {
     "data-name": "skill-title",
@@ -121,12 +121,12 @@ const LearnerSkillCard = (props, context) => {
     }
   }), skillFocusLocale) : null), /*#__PURE__*/React.createElement(ProgressBar, null), /*#__PURE__*/React.createElement("div", {
     className: style.progressInformations
-  }, skillCourses && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }, 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
-  }, completedCourses), ` ${coursesCompletedLocale}`), /*#__PURE__*/React.createElement("div", {
+  }, contentCompleted), ` ${contentCompletedLocale}`), /*#__PURE__*/React.createElement("div", {
     className: style.progressInformation,
     "data-name": "completed-percentage"
   }, /*#__PURE__*/React.createElement("span", {
@@ -153,9 +153,9 @@ LearnerSkillCard.propTypes = process.env.NODE_ENV !== "production" ? {
   focus: PropTypes.bool,
   metrics: PropTypes.shape({
     score: PropTypes.number,
-    skillCourses: PropTypes.number,
-    skillQuestions: PropTypes.number,
-    completedCourses: PropTypes.number
+    content: PropTypes.number,
+    questionsToReview: PropTypes.number,
+    contentCompleted: PropTypes.number
   }),
   review: PropTypes.bool,
   onReviewClick: PropTypes.func,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","convert","PropTypes","Icon","ButtonLink","Provider","style","LearnerSkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","focus","metrics","review","onReviewClick","onExploreClick","score","skillCourses","skillQuestions","completedCourses","skin","translate","hovered","setHovered","primarySkinColor","reviewLocale","exploreLocale","coursesLocale","questionsLocale","skillFocusLocale","coursesCompletedLocale","handleMouseOver","handleMouseLeave","buttonReviewProps","customStyle","backgroundColor","transition","disabled","onClick","label","buttonExploreProps","color","icon","position","faIcon","name","size","ProgressBar","progressBarColor","inlineProgressValueStyle","width","progressWrapper","progress","learnerSkillCardWrapper","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","skillTitleWrapper","skillFocusBadge","faSize","wrapperSize","progressInformations","progressInformation","progressInformationNumber","ctaWrapper","buttonWrapper","contextTypes","childContextTypes","propTypes","string","bool","shape","number","func"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport {convert} from 'css-color-function';\nimport {get} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\n\nconst LearnerSkillCard = (props, context) => {\n  const {\n    'aria-label': ariaLabel,\n    skillTitle,\n    skillAriaLabel,\n    focus = false,\n    metrics,\n    review = false,\n    onReviewClick,\n    onExploreClick\n  } = props;\n  const {score, skillCourses, skillQuestions, completedCourses = 0} = metrics;\n  const {skin, translate} = context;\n  const [hovered, setHovered] = useState(false);\n  const primarySkinColor = get('common.primary', skin);\n\n  const reviewLocale = translate('Review');\n  const exploreLocale = translate('Explore');\n  const coursesLocale = translate('courses');\n  const questionsLocale = translate('questions');\n  const skillFocusLocale = translate('skill_focus');\n  const coursesCompletedLocale = translate('courses_completed');\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\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    },\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: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n      color: hovered ? '#FFFFFF' : primarySkinColor,\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\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: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n        color: hovered ? '#FFFFFF' : primarySkinColor,\n        size: 16\n      }\n    }\n  };\n\n  const ProgressBar = useCallback(() => {\n    if (!skillCourses) return null;\n\n    const progressBarColor = '#3EC483';\n    const inlineProgressValueStyle = {\n      backgroundColor: progressBarColor,\n      width: `${score}%`\n    };\n\n    return (\n      <div className={style.progressWrapper}>\n        <div\n          data-name=\"progress\"\n          className={style.progress}\n          style={inlineProgressValueStyle}\n          role=\"progressbar\"\n          aria-label={get('progression', ariaLabel)}\n        />\n      </div>\n    );\n  }, [score, ariaLabel, skillCourses]);\n\n  return (\n    <div\n      className={style.learnerSkillCardWrapper}\n      data-name=\"learner-skill-card-wrapper\"\n      aria-label={ariaLabel}\n    >\n      {skillCourses || skillQuestions ? (\n        <div className={style.skillCoursesAndQuestionsWrapper}>\n          {skillCourses ? (\n            <div className={style.skillInformation} data-name=\"skill-courses\">\n              <span className={style.skillInformationNumber}>{skillCourses}</span> {coursesLocale}\n            </div>\n          ) : null}\n          {skillQuestions ? (\n            <div className={style.skillInformation} data-name=\"skill-questions\">\n              <span className={style.skillInformationNumber}>{skillQuestions}</span>\n              &nbsp;{questionsLocale}\n            </div>\n          ) : null}\n        </div>\n      ) : null}\n      <div className={style.skillTitleWrapper}>\n        <div\n          data-name=\"skill-title\"\n          className={style.skillTitle}\n          aria-label={skillAriaLabel || skillTitle}\n        >\n          {skillTitle}\n        </div>\n        {focus ? (\n          <div className={style.skillFocusBadge}>\n            <Icon\n              iconName=\"bullseye-arrow\"\n              backgroundColor=\"#DDD1FF\"\n              size={{\n                faSize: 10,\n                wrapperSize: 16\n              }}\n            />\n            {skillFocusLocale}\n          </div>\n        ) : null}\n      </div>\n      <ProgressBar />\n      <div className={style.progressInformations}>\n        {skillCourses && (\n          <>\n            <div className={style.progressInformation} data-name=\"skill-completed-courses\">\n              <span className={style.progressInformationNumber}>{completedCourses}</span>\n              {` ${coursesCompletedLocale}`}\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 className={style.ctaWrapper} data-name=\"cta-wrapper\">\n        <ButtonLink {...buttonReviewProps} />\n        <div\n          className={style.buttonWrapper}\n          onMouseOver={handleMouseOver}\n          onMouseLeave={handleMouseLeave}\n          data-name=\"button-explore-wrapper\"\n        >\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    skillCourses: PropTypes.number,\n    skillQuestions: PropTypes.number,\n    completedCourses: 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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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","convert","PropTypes","Icon","ButtonLink","Provider","style","LearnerSkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","focus","metrics","review","onReviewClick","onExploreClick","score","content","questionsToReview","contentCompleted","skin","translate","hovered","setHovered","primarySkinColor","reviewLocale","exploreLocale","coursesLocale","questionsLocale","skillFocusLocale","contentCompletedLocale","handleMouseOver","handleMouseLeave","buttonReviewProps","customStyle","backgroundColor","transition","disabled","onClick","label","buttonExploreProps","color","icon","position","faIcon","name","size","ProgressBar","progressBarColor","inlineProgressValueStyle","width","progressWrapper","progress","learnerSkillCardWrapper","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","skillTitleWrapper","skillFocusBadge","faSize","wrapperSize","progressInformations","progressInformation","progressInformationNumber","ctaWrapper","buttonWrapper","contextTypes","childContextTypes","propTypes","string","bool","shape","number","func"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport {convert} from 'css-color-function';\nimport {get} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\n\nconst LearnerSkillCard = (props, context) => {\n  const {\n    'aria-label': ariaLabel,\n    skillTitle,\n    skillAriaLabel,\n    focus = false,\n    metrics,\n    review = false,\n    onReviewClick,\n    onExploreClick\n  } = props;\n  const {score, content, questionsToReview, contentCompleted = 0} = metrics;\n  const {skin, translate} = context;\n  const [hovered, setHovered] = useState(false);\n  const primarySkinColor = get('common.primary', skin);\n\n  const reviewLocale = translate('Review');\n  const exploreLocale = translate('Explore');\n  const coursesLocale = translate('courses');\n  const questionsLocale = translate('questions');\n  const skillFocusLocale = translate('skill_focus');\n  const contentCompletedLocale = translate('courses_completed');\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\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    },\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: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n      color: hovered ? '#FFFFFF' : primarySkinColor,\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\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: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n        color: hovered ? '#FFFFFF' : primarySkinColor,\n        size: 16\n      }\n    }\n  };\n\n  const ProgressBar = useCallback(() => {\n    if (!content) return null;\n\n    const progressBarColor = '#3EC483';\n    const inlineProgressValueStyle = {\n      backgroundColor: progressBarColor,\n      width: `${score}%`\n    };\n\n    return (\n      <div className={style.progressWrapper}>\n        <div\n          data-name=\"progress\"\n          className={style.progress}\n          style={inlineProgressValueStyle}\n          role=\"progressbar\"\n          aria-label={get('progression', ariaLabel)}\n        />\n      </div>\n    );\n  }, [score, ariaLabel, content]);\n\n  return (\n    <div\n      className={style.learnerSkillCardWrapper}\n      data-name=\"learner-skill-card-wrapper\"\n      aria-label={ariaLabel}\n    >\n      {content || questionsToReview ? (\n        <div className={style.skillCoursesAndQuestionsWrapper}>\n          {content ? (\n            <div className={style.skillInformation} data-name=\"skill-courses\">\n              <span className={style.skillInformationNumber}>{content}</span> {coursesLocale}\n            </div>\n          ) : null}\n          {questionsToReview ? (\n            <div className={style.skillInformation} data-name=\"skill-questions\">\n              <span className={style.skillInformationNumber}>{questionsToReview}</span>\n              &nbsp;{questionsLocale}\n            </div>\n          ) : null}\n        </div>\n      ) : null}\n      <div className={style.skillTitleWrapper}>\n        <div\n          data-name=\"skill-title\"\n          className={style.skillTitle}\n          aria-label={skillAriaLabel || skillTitle}\n        >\n          {skillTitle}\n        </div>\n        {focus ? (\n          <div className={style.skillFocusBadge}>\n            <Icon\n              iconName=\"bullseye-arrow\"\n              backgroundColor=\"#DDD1FF\"\n              size={{\n                faSize: 10,\n                wrapperSize: 16\n              }}\n            />\n            {skillFocusLocale}\n          </div>\n        ) : null}\n      </div>\n      <ProgressBar />\n      <div className={style.progressInformations}>\n        {content && (\n          <>\n            <div className={style.progressInformation} data-name=\"skill-completed-courses\">\n              <span className={style.progressInformationNumber}>{contentCompleted}</span>\n              {` ${contentCompletedLocale}`}\n            </div>\n            <div className={style.progressInformation} data-name=\"completed-percentage\">\n              <span className={style.progressInformationNumber}>{score}%</span>\n            </div>\n          </>\n        )}\n      </div>\n      <div className={style.ctaWrapper} data-name=\"cta-wrapper\">\n        <ButtonLink {...buttonReviewProps} />\n        <div\n          className={style.buttonWrapper}\n          onMouseOver={handleMouseOver}\n          onMouseLeave={handleMouseLeave}\n          data-name=\"button-explore-wrapper\"\n        >\n          <ButtonLink {...buttonExploreProps} />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nLearnerSkillCard.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nLearnerSkillCard.propTypes = {\n  'aria-label': PropTypes.string,\n  skillTitle: PropTypes.string,\n  skillAriaLabel: PropTypes.string,\n  focus: PropTypes.bool,\n  metrics: PropTypes.shape({\n    score: PropTypes.number,\n    content: PropTypes.number,\n    questionsToReview: PropTypes.number,\n    contentCompleted: PropTypes.number\n  }),\n  review: PropTypes.bool,\n  onReviewClick: PropTypes.func,\n  onExploreClick: PropTypes.func\n};\n\nexport default LearnerSkillCard;\n"],"mappings":"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"}

package/es/molecule/select-multiple/test/snapshots/index.js.md

@@ -0,0 +1,211 @@
+# Snapshot report for `src/molecule/select-multiple/test/index.js`
+
+The actual snapshot is saved in `index.js.snap`.
+
+Generated by [AVA](https://ava.li).
+
+## should shallow render when select is opened
+
+> Snapshot 1
+
+    ShallowWrapper {
+      <div
+        className="select-multiple__default variables__defaultText"
+      >
+        <span
+          className="select-multiple__title"
+        >
+          Learning Path:
+        </span>
+        <div
+          className="select-multiple__select"
+          onClick={Function {}}
+          title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          <SvgComponent⍟
+            className="select-multiple__arrow select-multiple__down"
+            color={undefined}
+          />
+        </div>
+        <div
+          className="select-multiple__activeChoices"
+        >
+          <ul
+            className="select-multiple__list"
+          >
+            <li
+              className="select-multiple__choice"
+              key="0"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 0,
+                    name: 'Digital',
+                    selected: false,
+                    value: 'digital',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+            <li
+              className="select-multiple__choice"
+              key="1"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 1,
+                    name: 'Esprit du temps',
+                    selected: false,
+                    value: 'espritDuTemps',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+            <li
+              className="select-multiple__choice"
+              key="2"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 2,
+                    name: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut',
+                    selected: true,
+                    value: 'loremIpsum',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+            <li
+              className="select-multiple__choice"
+              key="3"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 3,
+                    name: 'Le monde du projet',
+                    selected: false,
+                    value: 'project',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+          </ul>
+        </div>
+      </div>,
+    }
+
+## should shallow render with default props
+
+> Snapshot 1
+
+    ShallowWrapper {
+      <div
+        className="select-multiple__default variables__defaultText"
+      >
+        <span
+          className="select-multiple__title"
+        >
+          Learning Path:
+        </span>
+        <div
+          className="select-multiple__select"
+          onClick={Function {}}
+          title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          <SvgComponent⍟
+            className="select-multiple__arrow"
+            color={undefined}
+          />
+        </div>
+        <div
+          className="select-multiple__choices"
+        >
+          <ul
+            className="select-multiple__list"
+          >
+            <li
+              className="select-multiple__choice"
+              key="0"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 0,
+                    name: 'Digital',
+                    selected: false,
+                    value: 'digital',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+            <li
+              className="select-multiple__choice"
+              key="1"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 1,
+                    name: 'Esprit du temps',
+                    selected: false,
+                    value: 'espritDuTemps',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+            <li
+              className="select-multiple__choice"
+              key="2"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 2,
+                    name: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut',
+                    selected: true,
+                    value: 'loremIpsum',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+            <li
+              className="select-multiple__choice"
+              key="3"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 3,
+                    name: 'Le monde du projet',
+                    selected: false,
+                    value: 'project',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+          </ul>
+        </div>
+      </div>,
+    }

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

@@ -33,10 +33,10 @@ declare namespace MyLearning {
                 availableForReview: PropTypes.Requireable<boolean>;
                 stats: PropTypes.Requireable<PropTypes.InferProps<{
                     score: PropTypes.Requireable<number>;
-                    courses: PropTypes.Requireable<number>;
-                    coursesCompleted: PropTypes.Requireable<number>;
-                    questionsAnswered: PropTypes.Requireable<number>;
-                    learningHours: PropTypes.Requireable<number>;
+                    content: PropTypes.Requireable<number>;
+                    contentCompleted: PropTypes.Requireable<number>;
+                    questionsToReview: PropTypes.Requireable<number>;
+                    learningTime: PropTypes.Requireable<number>;
                 }>>;
             }> | null | undefined;
         }>;

package/es/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":";AAwHA,mEA2WC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/my-learning/index.js"],"names":[],"mappings":";AAyHA,mEAuWC"}