@coorpacademy/components 11.32.42 → 11.32.43

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/playlist-detail/index.js"],"names":[],"mappings":";AAkBA,uEAyEC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/playlist-detail/index.js"],"names":[],"mappings":";AAgBA,uEAqFC"}

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

@@ -1,5 +1,5 @@
 import _isNil from "lodash/fp/isNil";
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Markdown from 'markdown-to-jsx';
@@ -13,7 +13,6 @@ import AllCourses from '../skill-detail/all-courses';
 import PlaylistDetailCover from '../../molecule/playlist-detail-cover';
 import { ContinueLearningButton } from '../skill-detail';
 import style from './style.css';
-const DESCRIPTION_BREAKPOINT = 382;
 
 const PlaylistDetail = (props, context) => {
   const {
@@ -28,13 +27,25 @@ const PlaylistDetail = (props, context) => {
     onBackClick,
     onContinueLearningClick
   } = props;
+  const descriptionRef = useRef(null);
   const {
     translate
   } = context;
+  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);
   const [showMore, setShowMore] = useState(false);
   const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);
+  useEffect(() => {
+    if (descriptionRef.current) {
+      const {
+        clientHeight = 0,
+        scrollHeight = 0
+      } = descriptionRef.current;
+      setIsDescriptionTruncated(scrollHeight > clientHeight);
+    }
+  }, [description]);
   const Description = useCallback(() => {
     return /*#__PURE__*/React.createElement("div", {
+      ref: descriptionRef,
       className: classnames(style.description, !showMore && style.truncate)
     }, /*#__PURE__*/React.createElement(Markdown, null, description));
   }, [showMore, description]);
@@ -46,7 +57,7 @@ const PlaylistDetail = (props, context) => {
   }, !_isNil(onBackClick) ? /*#__PURE__*/React.createElement(ButtonLinkIcon, {
     faIcon: "arrow-left",
     "data-name": "back-button",
-    "aria-label": "Back",
+    "aria-label": translate('back'),
     onClick: onBackClick,
     className: style.backButton,
     tooltipPlacement: "right"
@@ -60,7 +71,7 @@ const PlaylistDetail = (props, context) => {
     label: translate('playlist')
   }), /*#__PURE__*/React.createElement("div", {
     className: style.title
-  }, title), description ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Description, null), description.length >= DESCRIPTION_BREAKPOINT ? /*#__PURE__*/React.createElement("div", {
+  }, title), description ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Description, null), isDescriptionTruncated ? /*#__PURE__*/React.createElement("div", {
     className: style.showMoreWrapper,
     onClick: handleShowMore
   }, translate(showMore ? 'Show less' : 'Show more'), /*#__PURE__*/React.createElement(Icon, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","classnames","Markdown","Provider","Tag","Select","SelectOptionPropTypes","ButtonLinkIcon","Icon","CardsGrid","AllCourses","PlaylistDetailCover","ContinueLearningButton","style","DESCRIPTION_BREAKPOINT","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCoursesAvailable","playlistCourses","filters","sorting","onBackClick","onContinueLearningClick","translate","showMore","setShowMore","handleShowMore","Description","truncate","backgroundContainer","container","backButton","ctaContainer","coverWrapper","length","showMoreWrapper","faSize","wrapperSize","continueLearningButton","contextTypes","skin","childContextTypes","propTypes","string","isRequired","images","bool","shape","onChange","func","options","arrayOf"],"sources":["../../../src/template/playlist-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport AllCourses from '../skill-detail/all-courses';\nimport PlaylistDetailCover from '../../molecule/playlist-detail-cover';\nimport {ContinueLearningButton} from '../skill-detail';\nimport style from './style.css';\n\nconst DESCRIPTION_BREAKPOINT = 382;\n\nconst PlaylistDetail = (props, context) => {\n  const {\n    title,\n    coverImages,\n    playlistRef,\n    description,\n    ongoingCoursesAvailable,\n    playlistCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onContinueLearningClick\n  } = props;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        <Markdown>{description}</Markdown>\n      </div>\n    );\n  }, [showMore, description]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={playlistRef}>\n        {!isNil(onBackClick) ? (\n          <ButtonLinkIcon\n            faIcon=\"arrow-left\"\n            data-name=\"back-button\"\n            aria-label=\"Back\"\n            onClick={onBackClick}\n            className={style.backButton}\n            tooltipPlacement=\"right\"\n          />\n        ) : null}\n        <div className={style.ctaContainer}>\n          <div className={style.coverWrapper}>\n            <PlaylistDetailCover images={coverImages} />\n          </div>\n          <div>\n            <Tag label={translate('playlist')} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {description.length >= DESCRIPTION_BREAKPOINT ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {translate(showMore ? 'Show less' : 'Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{faSize: 14, wrapperSize: 16}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n            <div className={style.continueLearningButton}>\n              <ContinueLearningButton\n                ongoingCoursesAvailable={ongoingCoursesAvailable}\n                onClick={onContinueLearningClick}\n              />\n            </div>\n          </div>\n        </div>\n        <AllCourses content={playlistCourses} filters={filters} sorting={sorting} />\n      </div>\n    </div>\n  );\n};\n\nPlaylistDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nPlaylistDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  coverImages: PlaylistDetailCover.propTypes.images,\n  playlistRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  ongoingCoursesAvailable: PropTypes.bool,\n  playlistCourses: PropTypes.shape(CardsGrid.propTypes),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default PlaylistDetail;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","useEffect","useRef","PropTypes","classnames","Markdown","Provider","Tag","Select","SelectOptionPropTypes","ButtonLinkIcon","Icon","CardsGrid","AllCourses","PlaylistDetailCover","ContinueLearningButton","style","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCoursesAvailable","playlistCourses","filters","sorting","onBackClick","onContinueLearningClick","descriptionRef","translate","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","truncate","backgroundContainer","container","backButton","ctaContainer","coverWrapper","showMoreWrapper","faSize","wrapperSize","continueLearningButton","contextTypes","skin","childContextTypes","propTypes","string","isRequired","images","bool","shape","onChange","func","options","arrayOf"],"sources":["../../../src/template/playlist-detail/index.js"],"sourcesContent":["import React, {useCallback, useState, useEffect, useRef} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport AllCourses from '../skill-detail/all-courses';\nimport PlaylistDetailCover from '../../molecule/playlist-detail-cover';\nimport {ContinueLearningButton} from '../skill-detail';\nimport style from './style.css';\n\nconst PlaylistDetail = (props, context) => {\n  const {\n    title,\n    coverImages,\n    playlistRef,\n    description,\n    ongoingCoursesAvailable,\n    playlistCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onContinueLearningClick\n  } = props;\n  const descriptionRef = useRef(null);\n  const {translate} = context;\n\n  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  useEffect(() => {\n    if (descriptionRef.current) {\n      const {clientHeight = 0, scrollHeight = 0} = descriptionRef.current;\n      setIsDescriptionTruncated(scrollHeight > clientHeight);\n    }\n  }, [description]);\n\n  const Description = useCallback(() => {\n    return (\n      <div\n        ref={descriptionRef}\n        className={classnames(style.description, !showMore && style.truncate)}\n      >\n        <Markdown>{description}</Markdown>\n      </div>\n    );\n  }, [showMore, description]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={playlistRef}>\n        {!isNil(onBackClick) ? (\n          <ButtonLinkIcon\n            faIcon=\"arrow-left\"\n            data-name=\"back-button\"\n            aria-label={translate('back')}\n            onClick={onBackClick}\n            className={style.backButton}\n            tooltipPlacement=\"right\"\n          />\n        ) : null}\n        <div className={style.ctaContainer}>\n          <div className={style.coverWrapper}>\n            <PlaylistDetailCover images={coverImages} />\n          </div>\n          <div>\n            <Tag label={translate('playlist')} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {isDescriptionTruncated ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {translate(showMore ? 'Show less' : 'Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{faSize: 14, wrapperSize: 16}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n            <div className={style.continueLearningButton}>\n              <ContinueLearningButton\n                ongoingCoursesAvailable={ongoingCoursesAvailable}\n                onClick={onContinueLearningClick}\n              />\n            </div>\n          </div>\n        </div>\n        <AllCourses content={playlistCourses} filters={filters} sorting={sorting} />\n      </div>\n    </div>\n  );\n};\n\nPlaylistDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nPlaylistDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  coverImages: PlaylistDetailCover.propTypes.images,\n  playlistRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  ongoingCoursesAvailable: PropTypes.bool,\n  playlistCourses: PropTypes.shape(CardsGrid.propTypes),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default PlaylistDetail;\n"],"mappings":"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"}

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

@@ -41,7 +41,6 @@
 
 .ctaContainer {
   display: flex;
-  align-items: center;
   width: 100%;
   gap: 40px;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":"AAeO,8EA+BN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD,oEAwIC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":"AAeO,8EA+BN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD,oEAoJC"}

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

@@ -1,6 +1,6 @@
 import _isNil from "lodash/fp/isNil";
 import _get from "lodash/fp/get";
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { convert } from 'css-color-function';
 import classnames from 'classnames';
@@ -72,6 +72,7 @@ const SkillDetail = (props, context) => {
     onReviewClick,
     onContinueLearningClick
   } = props;
+  const descriptionRef = useRef(null);
   const {
     score = 0,
     questionsToReview
@@ -79,10 +80,21 @@ const SkillDetail = (props, context) => {
   const {
     translate
   } = context;
+  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);
   const [showMore, setShowMore] = useState(false);
   const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);
+  useEffect(() => {
+    if (descriptionRef.current) {
+      const {
+        clientHeight = 0,
+        scrollHeight = 0
+      } = descriptionRef.current;
+      setIsDescriptionTruncated(scrollHeight > clientHeight);
+    }
+  }, [description]);
   const Description = useCallback(() => {
     return /*#__PURE__*/React.createElement("div", {
+      ref: descriptionRef,
       className: classnames(style.description, !showMore && style.truncate)
     }, /*#__PURE__*/React.createElement(Markdown, null, description));
   }, [showMore, description]);
@@ -110,7 +122,7 @@ const SkillDetail = (props, context) => {
   }, !_isNil(onBackClick) ? /*#__PURE__*/React.createElement(ButtonLinkIcon, {
     faIcon: "arrow-left",
     "data-name": "back-button",
-    "aria-label": "Back",
+    "aria-label": translate('back'),
     onClick: onBackClick,
     className: style.backButton,
     tooltipPlacement: "right"
@@ -127,7 +139,7 @@ const SkillDetail = (props, context) => {
     }
   }), translate('skill_focus')) : null, /*#__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", {
+  }, title), description ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Description, null), isDescriptionTruncated ? /*#__PURE__*/React.createElement("div", {
     className: style.showMoreWrapper,
     onClick: handleShowMore
   }, showMore ? translate('Show less') : translate('Show more'), /*#__PURE__*/React.createElement(Icon, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","convert","classnames","Markdown","Provider","Select","SelectOptionPropTypes","ButtonLink","ButtonLinkIcon","Icon","CardsGrid","style","AllCourses","ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","width","borderRadius","backgroundColor","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","bool","func","SkillDetail","title","skillRef","description","metrics","focused","availableForReview","totalCourses","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","score","questionsToReview","showMore","setShowMore","handleShowMore","Description","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButton","ctaContainer","skillFocusBadge","faSize","wrapperSize","length","showMoreWrapper","ctaWrapper","skillInformation","skillInformationNumber","progressContainer","progressInformationNumber","toFixed","string","isRequired","shape","number","onChange","options","arrayOf"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\n\nexport const ContinueLearningButton = (props, context) => {\n  const {ongoingCoursesAvailable, onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <div>\n      <ButtonLink\n        label={\n          ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')\n        }\n        type=\"primary\"\n        customStyle={{\n          width: 'fit-content',\n          borderRadius: '12px',\n          backgroundColor: primarySkinColor\n        }}\n        hoverBackgroundColor={convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)}\n        hoverColor=\"#FFFFFF\"\n        icon={{\n          position: 'left',\n          faIcon: {\n            name: 'play',\n            color: '#FFFFFF',\n            size: 16\n          }\n        }}\n        onClick={onClick}\n      />\n    </div>\n  );\n};\n\nContinueLearningButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nContinueLearningButton.propTypes = {\n  ongoingCoursesAvailable: PropTypes.bool,\n  onClick: PropTypes.func\n};\n\nconst SkillDetail = (props, context) => {\n  const {\n    title,\n    skillRef,\n    description,\n    metrics = {},\n    focused,\n    availableForReview,\n    ongoingCoursesAvailable,\n    totalCourses,\n    skillIncludedCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick\n  } = props;\n  const {score = 0, questionsToReview} = metrics;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        <Markdown>{description}</Markdown>\n      </div>\n    );\n  }, [showMore, description]);\n\n  const ProgressBar = useCallback(() => {\n    if (score === undefined) return null;\n    const progressBarColor = '#3EC483';\n    const inlineProgressValueStyle = {\n      backgroundColor: progressBarColor,\n      width: `${score}%`\n    };\n\n    return (\n      <div className={style.progressBarWrapper}>\n        <div\n          data-name=\"progress\"\n          className={style.progress}\n          style={inlineProgressValueStyle}\n          role=\"progressbar\"\n        />\n      </div>\n    );\n  }, [score]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={skillRef}>\n        {!isNil(onBackClick) ? (\n          <ButtonLinkIcon\n            faIcon=\"arrow-left\"\n            data-name=\"back-button\"\n            aria-label=\"Back\"\n            onClick={onBackClick}\n            className={style.backButton}\n            tooltipPlacement=\"right\"\n          />\n        ) : null}\n        <div className={style.ctaContainer}>\n          <div>\n            {focused ? (\n              <div className={style.skillFocusBadge}>\n                <Icon\n                  iconName=\"bullseye-arrow\"\n                  backgroundColor=\"#DDD1FF\"\n                  size={{\n                    faSize: 10,\n                    wrapperSize: 16\n                  }}\n                />\n                {translate('skill_focus')}\n              </div>\n            ) : null}\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {description.length >= 226 ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {showMore ? translate('Show less') : translate('Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{\n                        faSize: 14,\n                        wrapperSize: 16\n                      }}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n          </div>\n\n          <div className={style.ctaWrapper}>\n            <ButtonLink\n              type=\"secondary\"\n              onClick={onReviewClick}\n              label={translate('review_this_skill')}\n              disabled={!availableForReview}\n              customStyle={{\n                width: 'fit-content',\n                borderRadius: '12px'\n              }}\n            />\n            <ContinueLearningButton\n              ongoingCoursesAvailable={ongoingCoursesAvailable}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        {questionsToReview > 0 ? (\n          <div className={style.skillInformation} data-name=\"skill-questions\">\n            <span className={style.skillInformationNumber}>{questionsToReview}</span>\n            &nbsp;{translate('skill_chart_side_panel_questions_to_review')}\n          </div>\n        ) : null}\n        <div className={style.progressContainer}>\n          <ProgressBar />\n          <span className={style.progressInformationNumber}>{score.toFixed(1)}%</span>\n        </div>\n        <AllCourses\n          content={skillIncludedCourses}\n          filters={filters}\n          sorting={sorting}\n          totalContents={totalCourses}\n        />\n      </div>\n    </div>\n  );\n};\n\nSkillDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nSkillDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  skillRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  metrics: PropTypes.shape({\n    score: PropTypes.number,\n    questionsToReview: PropTypes.number\n  }),\n  focused: PropTypes.bool,\n  availableForReview: PropTypes.bool,\n  ongoingCoursesAvailable: PropTypes.bool,\n  totalCourses: PropTypes.number,\n  skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onReviewClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default SkillDetail;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","useRef","useEffect","PropTypes","convert","classnames","Markdown","Provider","Select","SelectOptionPropTypes","ButtonLink","ButtonLinkIcon","Icon","CardsGrid","style","AllCourses","ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","width","borderRadius","backgroundColor","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","bool","func","SkillDetail","title","skillRef","description","metrics","focused","availableForReview","totalCourses","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","descriptionRef","score","questionsToReview","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButton","ctaContainer","skillFocusBadge","faSize","wrapperSize","showMoreWrapper","ctaWrapper","skillInformation","skillInformationNumber","progressContainer","progressInformationNumber","toFixed","string","isRequired","shape","number","onChange","options","arrayOf"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState, useRef, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\n\nexport const ContinueLearningButton = (props, context) => {\n  const {ongoingCoursesAvailable, onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <div>\n      <ButtonLink\n        label={\n          ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')\n        }\n        type=\"primary\"\n        customStyle={{\n          width: 'fit-content',\n          borderRadius: '12px',\n          backgroundColor: primarySkinColor\n        }}\n        hoverBackgroundColor={convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)}\n        hoverColor=\"#FFFFFF\"\n        icon={{\n          position: 'left',\n          faIcon: {\n            name: 'play',\n            color: '#FFFFFF',\n            size: 16\n          }\n        }}\n        onClick={onClick}\n      />\n    </div>\n  );\n};\n\nContinueLearningButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nContinueLearningButton.propTypes = {\n  ongoingCoursesAvailable: PropTypes.bool,\n  onClick: PropTypes.func\n};\n\nconst SkillDetail = (props, context) => {\n  const {\n    title,\n    skillRef,\n    description,\n    metrics = {},\n    focused,\n    availableForReview,\n    ongoingCoursesAvailable,\n    totalCourses,\n    skillIncludedCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick\n  } = props;\n  const descriptionRef = useRef(null);\n  const {score = 0, questionsToReview} = metrics;\n  const {translate} = context;\n\n  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  useEffect(() => {\n    if (descriptionRef.current) {\n      const {clientHeight = 0, scrollHeight = 0} = descriptionRef.current;\n      setIsDescriptionTruncated(scrollHeight > clientHeight);\n    }\n  }, [description]);\n\n  const Description = useCallback(() => {\n    return (\n      <div\n        ref={descriptionRef}\n        className={classnames(style.description, !showMore && style.truncate)}\n      >\n        <Markdown>{description}</Markdown>\n      </div>\n    );\n  }, [showMore, description]);\n\n  const ProgressBar = useCallback(() => {\n    if (score === undefined) return null;\n    const progressBarColor = '#3EC483';\n    const inlineProgressValueStyle = {\n      backgroundColor: progressBarColor,\n      width: `${score}%`\n    };\n\n    return (\n      <div className={style.progressBarWrapper}>\n        <div\n          data-name=\"progress\"\n          className={style.progress}\n          style={inlineProgressValueStyle}\n          role=\"progressbar\"\n        />\n      </div>\n    );\n  }, [score]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={skillRef}>\n        {!isNil(onBackClick) ? (\n          <ButtonLinkIcon\n            faIcon=\"arrow-left\"\n            data-name=\"back-button\"\n            aria-label={translate('back')}\n            onClick={onBackClick}\n            className={style.backButton}\n            tooltipPlacement=\"right\"\n          />\n        ) : null}\n        <div className={style.ctaContainer}>\n          <div>\n            {focused ? (\n              <div className={style.skillFocusBadge}>\n                <Icon\n                  iconName=\"bullseye-arrow\"\n                  backgroundColor=\"#DDD1FF\"\n                  size={{\n                    faSize: 10,\n                    wrapperSize: 16\n                  }}\n                />\n                {translate('skill_focus')}\n              </div>\n            ) : null}\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {isDescriptionTruncated ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {showMore ? translate('Show less') : translate('Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{\n                        faSize: 14,\n                        wrapperSize: 16\n                      }}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n          </div>\n\n          <div className={style.ctaWrapper}>\n            <ButtonLink\n              type=\"secondary\"\n              onClick={onReviewClick}\n              label={translate('review_this_skill')}\n              disabled={!availableForReview}\n              customStyle={{\n                width: 'fit-content',\n                borderRadius: '12px'\n              }}\n            />\n            <ContinueLearningButton\n              ongoingCoursesAvailable={ongoingCoursesAvailable}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        {questionsToReview > 0 ? (\n          <div className={style.skillInformation} data-name=\"skill-questions\">\n            <span className={style.skillInformationNumber}>{questionsToReview}</span>\n            &nbsp;{translate('skill_chart_side_panel_questions_to_review')}\n          </div>\n        ) : null}\n        <div className={style.progressContainer}>\n          <ProgressBar />\n          <span className={style.progressInformationNumber}>{score.toFixed(1)}%</span>\n        </div>\n        <AllCourses\n          content={skillIncludedCourses}\n          filters={filters}\n          sorting={sorting}\n          totalContents={totalCourses}\n        />\n      </div>\n    </div>\n  );\n};\n\nSkillDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nSkillDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  skillRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  metrics: PropTypes.shape({\n    score: PropTypes.number,\n    questionsToReview: PropTypes.number\n  }),\n  focused: PropTypes.bool,\n  availableForReview: PropTypes.bool,\n  ongoingCoursesAvailable: PropTypes.bool,\n  totalCourses: PropTypes.number,\n  skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onReviewClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default SkillDetail;\n"],"mappings":"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"}

package/es/variables/colors.d.ts

@@ -2,6 +2,7 @@ export declare const COLORS: {
     readonly gray: "#EAEAEB";
     readonly negative: "#ed3436";
     readonly positive: "#35CC7F";
+    readonly white: "#ffffff";
     readonly cm_grey_800: "#171721";
     readonly cm_primary_blue: "#0061FF";
 };

package/es/variables/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/variables/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;CAMT,CAAC;AAEX,oBAAY,MAAM,GAAG,OAAO,MAAM,CAAC"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/variables/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;CAOT,CAAC;AAEX,oBAAY,MAAM,GAAG,OAAO,MAAM,CAAC"}

package/es/variables/colors.js

@@ -2,6 +2,7 @@ export const COLORS = {
   gray: '#EAEAEB',
   negative: '#ed3436',
   positive: '#35CC7F',
+  white: '#ffffff',
   cm_grey_800: '#171721',
   cm_primary_blue: '#0061FF'
 };

package/es/variables/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","names":["COLORS","gray","negative","positive","cm_grey_800","cm_primary_blue"],"sources":["../../src/variables/colors.ts"],"sourcesContent":["export const COLORS = {\n  gray: '#EAEAEB',\n  negative: '#ed3436',\n  positive: '#35CC7F',\n  cm_grey_800: '#171721',\n  cm_primary_blue: '#0061FF'\n} as const;\n\nexport type Colors = typeof COLORS;\n"],"mappings":"AAAA,OAAO,MAAMA,MAAM,GAAG;EACpBC,IAAI,EAAE,SADc;EAEpBC,QAAQ,EAAE,SAFU;EAGpBC,QAAQ,EAAE,SAHU;EAIpBC,WAAW,EAAE,SAJO;EAKpBC,eAAe,EAAE;AALG,CAAf"}
+{"version":3,"file":"colors.js","names":["COLORS","gray","negative","positive","white","cm_grey_800","cm_primary_blue"],"sources":["../../src/variables/colors.ts"],"sourcesContent":["export const COLORS = {\n  gray: '#EAEAEB',\n  negative: '#ed3436',\n  positive: '#35CC7F',\n  white: '#ffffff',\n  cm_grey_800: '#171721',\n  cm_primary_blue: '#0061FF'\n} as const;\n\nexport type Colors = typeof COLORS;\n"],"mappings":"AAAA,OAAO,MAAMA,MAAM,GAAG;EACpBC,IAAI,EAAE,SADc;EAEpBC,QAAQ,EAAE,SAFU;EAGpBC,QAAQ,EAAE,SAHU;EAIpBC,KAAK,EAAE,SAJa;EAKpBC,WAAW,EAAE,SALO;EAMpBC,eAAe,EAAE;AANG,CAAf"}

package/lib/atom/select-icon/index.d.ts

@@ -0,0 +1,17 @@
+export default SelectIcon;
+declare function SelectIcon(props: any): JSX.Element;
+declare namespace SelectIcon {
+    const propTypes: {
+        'aria-label': PropTypes.Requireable<string>;
+        'data-name': PropTypes.Requireable<string>;
+        faIcon: PropTypes.Requireable<string>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        options: PropTypes.Requireable<PropTypes.InferProps<{
+            selectionMode: PropTypes.Requireable<string>;
+            isSelected: PropTypes.Requireable<boolean>;
+            iconColor: PropTypes.Requireable<string>;
+        }>>;
+    };
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=index.d.ts.map

package/lib/atom/select-icon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/select-icon/index.js"],"names":[],"mappings":";AAgDA,qDA0BC"}

package/lib/atom/select-icon/index.js

@@ -0,0 +1,111 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+var _colors = require("../../variables/colors");
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+const ICON_COLOR = _colors.COLORS.cm_primary_blue;
+const BACKGROUND_COLOR = _colors.COLORS.white;
+const CHECK_ICON_NAME_MAP = {
+  single: 'circle-check',
+  multi: 'square-check'
+};
+
+const getButtonContent = (faIcon, options = {}) => {
+  const {
+    selectionMode = 'single',
+    isSelected = false,
+    iconColor = ICON_COLOR
+  } = options;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.contentWrapper
+  }, isSelected ?
+  /*#__PURE__*/
+
+  /* checkbox icon */
+  _react.default.createElement("div", {
+    className: _style.default.checkIcon
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    iconName: CHECK_ICON_NAME_MAP[selectionMode],
+    iconColor: iconColor,
+    backgroundColor: BACKGROUND_COLOR,
+    size: {
+      faSize: 16,
+      wrapperSize: 16
+    }
+  })) : null,
+  /*#__PURE__*/
+
+  /* selection tick (L18) / icon */
+  _react.default.createElement("div", {
+    className: _style.default.iconWrapper
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.icon
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    iconName: faIcon,
+    iconColor: isSelected ? iconColor : '',
+    size: {
+      faSize: 32,
+      wrapperSize: 32
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.iconText
+  }, faIcon)));
+};
+
+const SelectIcon = props => {
+  const {
+    faIcon,
+    'data-name': dataName,
+    'aria-label': ariaLabel,
+    onClick,
+    options = {}
+  } = props;
+  const {
+    isSelected = false
+  } = options;
+  const contentView = getButtonContent(faIcon, options);
+  const styleButton = (0, _classnames.default)(_style.default.default, isSelected && _style.default.selected);
+  const handleOnClick = (0, _react.useCallback)(() => onClick(), [onClick]);
+  const IconButton = (0, _react.useCallback)(() => /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    "aria-label": ariaLabel,
+    "data-name": dataName,
+    "data-testid": `button-${dataName}`,
+    className: styleButton,
+    onClick: handleOnClick
+  }, contentView), [ariaLabel, contentView, dataName, handleOnClick, styleButton]);
+  return /*#__PURE__*/_react.default.createElement(IconButton, null);
+};
+
+SelectIcon.propTypes = process.env.NODE_ENV !== "production" ? {
+  'aria-label': _propTypes.default.string,
+  'data-name': _propTypes.default.string,
+  faIcon: _propTypes.default.string,
+  onClick: _propTypes.default.func,
+  options: _propTypes.default.shape({
+    selectionMode: _propTypes.default.oneOf(['single', 'multi']),
+    isSelected: _propTypes.default.bool,
+    iconColor: _propTypes.default.string
+  })
+} : {};
+var _default = SelectIcon;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/atom/select-icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ICON_COLOR","COLORS","cm_primary_blue","BACKGROUND_COLOR","white","CHECK_ICON_NAME_MAP","single","multi","getButtonContent","faIcon","options","selectionMode","isSelected","iconColor","style","contentWrapper","checkIcon","faSize","wrapperSize","iconWrapper","icon","iconText","SelectIcon","props","dataName","ariaLabel","onClick","contentView","styleButton","classnames","default","selected","handleOnClick","useCallback","IconButton","propTypes","PropTypes","string","func","shape","oneOf","bool"],"sources":["../../../src/atom/select-icon/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport FaIcon from '../icon';\n\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nconst ICON_COLOR = COLORS.cm_primary_blue;\nconst BACKGROUND_COLOR = COLORS.white;\nconst CHECK_ICON_NAME_MAP = {\n  single: 'circle-check',\n  multi: 'square-check'\n};\n\nconst getButtonContent = (faIcon, options = {}) => {\n  const {selectionMode = 'single', isSelected = false, iconColor = ICON_COLOR} = options;\n\n  return (\n    <div className={style.contentWrapper}>\n      {isSelected ? (\n        /* checkbox icon */\n        <div className={style.checkIcon}>\n          <FaIcon\n            iconName={CHECK_ICON_NAME_MAP[selectionMode]}\n            iconColor={iconColor}\n            backgroundColor={BACKGROUND_COLOR}\n            size={{faSize: 16, wrapperSize: 16}}\n          />\n        </div>\n      ) : null}\n      {\n        /* selection tick (L18) / icon */\n        <div className={style.iconWrapper}>\n          <div className={style.icon}>\n            <FaIcon\n              iconName={faIcon}\n              iconColor={isSelected ? iconColor : ''}\n              size={{faSize: 32, wrapperSize: 32}}\n            />\n          </div>\n          <div className={style.iconText}>{faIcon}</div>\n        </div>\n      }\n    </div>\n  );\n};\n\nconst SelectIcon = props => {\n  const {faIcon, 'data-name': dataName, 'aria-label': ariaLabel, onClick, options = {}} = props;\n\n  const {isSelected = false} = options;\n\n  const contentView = getButtonContent(faIcon, options);\n  const styleButton = classnames(style.default, isSelected && style.selected);\n  const handleOnClick = useCallback(() => onClick(), [onClick]);\n\n  const IconButton = useCallback(\n    () => (\n      <button\n        type=\"button\"\n        aria-label={ariaLabel}\n        data-name={dataName}\n        data-testid={`button-${dataName}`}\n        className={styleButton}\n        onClick={handleOnClick}\n      >\n        {contentView}\n      </button>\n    ),\n    [ariaLabel, contentView, dataName, handleOnClick, styleButton]\n  );\n\n  return <IconButton />;\n};\n\nSelectIcon.propTypes = {\n  'aria-label': PropTypes.string,\n  'data-name': PropTypes.string,\n  faIcon: PropTypes.string,\n  onClick: PropTypes.func,\n  options: PropTypes.shape({\n    selectionMode: PropTypes.oneOf(['single', 'multi']),\n    isSelected: PropTypes.bool,\n    iconColor: PropTypes.string\n  })\n};\n\nexport default SelectIcon;\n"],"mappings":"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"}

package/lib/atom/select-icon/style.css

@@ -0,0 +1,73 @@
+@value colors: "../../variables/colors.css";
+@value cm_grey_100 from colors;
+@value cm_grey_400 from colors;
+@value cm_grey_500 from colors;
+@value cm_grey_75 from colors;
+@value cm_grey_50 from colors;
+@value cm_primary_blue from colors;
+@value white from colors;
+
+.button {
+  font-family: Gilroy;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 16px;
+  color: cm_grey_400;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  border: none;
+  background-color: white;
+}
+
+.button:hover {
+  background-color: cm_grey_100;
+}
+
+.selected {
+  background-color: cm_grey_50;
+  border: 2px solid cm_primary_blue;
+}
+
+.selected:hover {
+  background-color: cm_grey_75;
+  color: cm_grey_500;
+}
+
+.default {
+  composes: button;
+  width: 144px;
+  height: 120px;
+  border-radius: 12px;
+  position: relative;
+}
+
+.contentWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.checkIcon {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+}
+
+.iconWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.icon {
+  margin-bottom: 8px;
+}
+
+.iconText {
+  font-size: 12px;
+}

package/lib/molecule/certification-card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/certification-card/index.js"],"names":[],"mappings":";AAQA,0EAwDC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/certification-card/index.js"],"names":[],"mappings":";AAQA,0EA0DC"}

package/lib/molecule/certification-card/index.js

@@ -66,10 +66,12 @@ const CertificationCard = (props, context) => {
     },
     icon: progressIconProps
   }) : null, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.imageWrapper
+    className: _style.default.imageSection
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.imageContainer
   }, /*#__PURE__*/_react.default.createElement("img", {
     src: imgUrl
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  }))), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.detailWrapper
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.titleWrapper

package/lib/molecule/certification-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["CertificationCard","props","context","label","goal","progress","imgUrl","onClick","title","condition","nbDone","translate","isInprogress","progressLabel","progressTagType","progressIconProps","position","iconName","iconColor","backgroundColor","size","faSize","wrapperSize","customStyle","padding","style","container","top","right","imageWrapper","detailWrapper","titleWrapper","moduleCount","customProgressBar","COLORS","positive","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","shape","number","func"],"sources":["../../../src/molecule/certification-card/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {COLORS} from '../../variables/colors';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport ProgressBar from '../progress-bar';\nimport style from './style.css';\n\nconst CertificationCard = (props, context) => {\n  const {label, goal, progress, imgUrl, onClick} = props;\n  const {\n    title,\n    condition: {nbDone}\n  } = goal;\n  const {translate} = context;\n\n  const isInprogress = progress < 100;\n  const progressLabel = isInprogress ? translate('in_progress') : translate('completed');\n  const progressTagType = isInprogress ? 'progress' : 'success';\n  const progressIconProps = {\n    position: 'left',\n    iconName: isInprogress ? 'clock' : 'circle-check',\n    iconColor: isInprogress ? '#B87A00' : '#05944F',\n    backgroundColor: isInprogress ? '#FFEECC' : '#D6F5E5',\n    size: {\n      faSize: 10,\n      wrapperSize: 10\n    },\n    customStyle: {padding: 0}\n  };\n  return (\n    <div className={style.container} data-name={`certification-card-${label}`} onClick={onClick}>\n      {progress > 0 ? (\n        <Tag\n          label={progressLabel}\n          type={progressTagType}\n          customStyle={{position: 'absolute', top: '12px', right: '12px'}}\n          icon={progressIconProps}\n        />\n      ) : null}\n      <div className={style.imageWrapper}>\n        <img src={imgUrl} />\n      </div>\n      <div className={style.detailWrapper}>\n        <div className={style.titleWrapper}>\n          <Tag label={translate('certification')} size=\"S\" />\n          <div className={style.title} data-name=\"certification-title\">\n            {title}\n          </div>\n          <div className={style.moduleCount}>\n            <span>{nbDone}</span>\n            {` ${translate('certification_module')}`}\n          </div>\n        </div>\n        <ProgressBar\n          className={style.customProgressBar}\n          style={{backgroundColor: COLORS.positive}}\n          displayInfo={false}\n          value={progress}\n          max={100}\n        />\n      </div>\n    </div>\n  );\n};\n\nCertificationCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nCertificationCard.propTypes = {\n  label: PropTypes.string,\n  goal: PropTypes.shape({\n    title: PropTypes.string,\n    condition: PropTypes.shape({\n      nbDone: PropTypes.number\n    })\n  }),\n  progress: PropTypes.number,\n  imgUrl: PropTypes.string,\n  onClick: PropTypes.func\n};\n\nexport default CertificationCard;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,iBAAiB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EAC5C,MAAM;IAACC,KAAD;IAAQC,IAAR;IAAcC,QAAd;IAAwBC,MAAxB;IAAgCC;EAAhC,IAA2CN,KAAjD;EACA,MAAM;IACJO,KADI;IAEJC,SAAS,EAAE;MAACC;IAAD;EAFP,IAGFN,IAHJ;EAIA,MAAM;IAACO;EAAD,IAAcT,OAApB;EAEA,MAAMU,YAAY,GAAGP,QAAQ,GAAG,GAAhC;EACA,MAAMQ,aAAa,GAAGD,YAAY,GAAGD,SAAS,CAAC,aAAD,CAAZ,GAA8BA,SAAS,CAAC,WAAD,CAAzE;EACA,MAAMG,eAAe,GAAGF,YAAY,GAAG,UAAH,GAAgB,SAApD;EACA,MAAMG,iBAAiB,GAAG;IACxBC,QAAQ,EAAE,MADc;IAExBC,QAAQ,EAAEL,YAAY,GAAG,OAAH,GAAa,cAFX;IAGxBM,SAAS,EAAEN,YAAY,GAAG,SAAH,GAAe,SAHd;IAIxBO,eAAe,EAAEP,YAAY,GAAG,SAAH,GAAe,SAJpB;IAKxBQ,IAAI,EAAE;MACJC,MAAM,EAAE,EADJ;MAEJC,WAAW,EAAE;IAFT,CALkB;IASxBC,WAAW,EAAE;MAACC,OAAO,EAAE;IAAV;EATW,CAA1B;EAWA,oBACE;IAAK,SAAS,EAAEC,cAAA,CAAMC,SAAtB;IAAiC,aAAY,sBAAqBvB,KAAM,EAAxE;IAA2E,OAAO,EAAEI;EAApF,GACGF,QAAQ,GAAG,CAAX,gBACC,6BAAC,YAAD;IACE,KAAK,EAAEQ,aADT;IAEE,IAAI,EAAEC,eAFR;IAGE,WAAW,EAAE;MAACE,QAAQ,EAAE,UAAX;MAAuBW,GAAG,EAAE,MAA5B;MAAoCC,KAAK,EAAE;IAA3C,CAHf;IAIE,IAAI,EAAEb;EAJR,EADD,GAOG,IARN,eASE;IAAK,SAAS,EAAEU,cAAA,CAAMI;EAAtB,gBACE;IAAK,GAAG,EAAEvB;EAAV,EADF,CATF,eAYE;IAAK,SAAS,EAAEmB,cAAA,CAAMK;EAAtB,gBACE;IAAK,SAAS,EAAEL,cAAA,CAAMM;EAAtB,gBACE,6BAAC,YAAD;IAAK,KAAK,EAAEpB,SAAS,CAAC,eAAD,CAArB;IAAwC,IAAI,EAAC;EAA7C,EADF,eAEE;IAAK,SAAS,EAAEc,cAAA,CAAMjB,KAAtB;IAA6B,aAAU;EAAvC,GACGA,KADH,CAFF,eAKE;IAAK,SAAS,EAAEiB,cAAA,CAAMO;EAAtB,gBACE,2CAAOtB,MAAP,CADF,EAEI,IAAGC,SAAS,CAAC,sBAAD,CAAyB,EAFzC,CALF,CADF,eAWE,6BAAC,oBAAD;IACE,SAAS,EAAEc,cAAA,CAAMQ,iBADnB;IAEE,KAAK,EAAE;MAACd,eAAe,EAAEe,cAAA,CAAOC;IAAzB,CAFT;IAGE,WAAW,EAAE,KAHf;IAIE,KAAK,EAAE9B,QAJT;IAKE,GAAG,EAAE;EALP,EAXF,CAZF,CADF;AAkCD,CAxDD;;AA0DAL,iBAAiB,CAACoC,YAAlB,GAAiC;EAC/BzB,SAAS,EAAE0B,iBAAA,CAASC,iBAAT,CAA2B3B;AADP,CAAjC;AAIAX,iBAAiB,CAACuC,SAAlB,2CAA8B;EAC5BpC,KAAK,EAAEqC,kBAAA,CAAUC,MADW;EAE5BrC,IAAI,EAAEoC,kBAAA,CAAUE,KAAV,CAAgB;IACpBlC,KAAK,EAAEgC,kBAAA,CAAUC,MADG;IAEpBhC,SAAS,EAAE+B,kBAAA,CAAUE,KAAV,CAAgB;MACzBhC,MAAM,EAAE8B,kBAAA,CAAUG;IADO,CAAhB;EAFS,CAAhB,CAFsB;EAQ5BtC,QAAQ,EAAEmC,kBAAA,CAAUG,MARQ;EAS5BrC,MAAM,EAAEkC,kBAAA,CAAUC,MATU;EAU5BlC,OAAO,EAAEiC,kBAAA,CAAUI;AAVS,CAA9B;eAae5C,iB"}
+{"version":3,"file":"index.js","names":["CertificationCard","props","context","label","goal","progress","imgUrl","onClick","title","condition","nbDone","translate","isInprogress","progressLabel","progressTagType","progressIconProps","position","iconName","iconColor","backgroundColor","size","faSize","wrapperSize","customStyle","padding","style","container","top","right","imageSection","imageContainer","detailWrapper","titleWrapper","moduleCount","customProgressBar","COLORS","positive","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","shape","number","func"],"sources":["../../../src/molecule/certification-card/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {COLORS} from '../../variables/colors';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport ProgressBar from '../progress-bar';\nimport style from './style.css';\n\nconst CertificationCard = (props, context) => {\n  const {label, goal, progress, imgUrl, onClick} = props;\n  const {\n    title,\n    condition: {nbDone}\n  } = goal;\n  const {translate} = context;\n\n  const isInprogress = progress < 100;\n  const progressLabel = isInprogress ? translate('in_progress') : translate('completed');\n  const progressTagType = isInprogress ? 'progress' : 'success';\n  const progressIconProps = {\n    position: 'left',\n    iconName: isInprogress ? 'clock' : 'circle-check',\n    iconColor: isInprogress ? '#B87A00' : '#05944F',\n    backgroundColor: isInprogress ? '#FFEECC' : '#D6F5E5',\n    size: {\n      faSize: 10,\n      wrapperSize: 10\n    },\n    customStyle: {padding: 0}\n  };\n  return (\n    <div className={style.container} data-name={`certification-card-${label}`} onClick={onClick}>\n      {progress > 0 ? (\n        <Tag\n          label={progressLabel}\n          type={progressTagType}\n          customStyle={{position: 'absolute', top: '12px', right: '12px'}}\n          icon={progressIconProps}\n        />\n      ) : null}\n      <div className={style.imageSection}>\n        <div className={style.imageContainer}>\n          <img src={imgUrl} />\n        </div>\n      </div>\n      <div className={style.detailWrapper}>\n        <div className={style.titleWrapper}>\n          <Tag label={translate('certification')} size=\"S\" />\n          <div className={style.title} data-name=\"certification-title\">\n            {title}\n          </div>\n          <div className={style.moduleCount}>\n            <span>{nbDone}</span>\n            {` ${translate('certification_module')}`}\n          </div>\n        </div>\n        <ProgressBar\n          className={style.customProgressBar}\n          style={{backgroundColor: COLORS.positive}}\n          displayInfo={false}\n          value={progress}\n          max={100}\n        />\n      </div>\n    </div>\n  );\n};\n\nCertificationCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nCertificationCard.propTypes = {\n  label: PropTypes.string,\n  goal: PropTypes.shape({\n    title: PropTypes.string,\n    condition: PropTypes.shape({\n      nbDone: PropTypes.number\n    })\n  }),\n  progress: PropTypes.number,\n  imgUrl: PropTypes.string,\n  onClick: PropTypes.func\n};\n\nexport default CertificationCard;\n"],"mappings":"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"}

package/lib/molecule/certification-card/style.css

@@ -22,7 +22,7 @@
   transition: all 0.5s ease-out;
 }
 
-.imageWrapper {
+.imageSection {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -30,22 +30,38 @@
   height: 160px;
   width: auto;
   transition: all 0.5s ease-out;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
   
-  img {
-    width: 100px;
+  .imageContainer {
     transition: all 0.5s ease-out;
   }
 }
 
+.imageContainer {
+  width: 202px;
+  height: 112px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+
 .container:hover {
   box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.14);
 
+  .imageContainer {
+    width: 244px;
+    height: 136px;
+  }
+
   .imageWrapper {
     background-color: cm_grey_75;
-
-    img {
-      width: 115px;
-    }
   }
 }
 .detailWrapper {

package/lib/molecule/progress-wrapper/index.js

@@ -75,7 +75,7 @@ const DetailSection = ({
   });
 
   const LockedTag = /*#__PURE__*/_react.default.createElement(_tag.default, {
-    label: "Locked",
+    label: translate('locked'),
     size: "S",
     icon: {
       position: 'left',