@coorpacademy/components 11.40.20 → 11.40.21

package/lib/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":";AAgBA,uEAyGC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/playlist-detail/index.js"],"names":[],"mappings":";AAiBA,uEA+GC"}

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

@@ -16,6 +16,7 @@ var _select = _interopRequireWildcard(require("../../atom/select"));
 var _buttonLinkIcon = _interopRequireDefault(require("../../atom/button-link-icon"));
 var _icon = _interopRequireDefault(require("../../atom/icon"));
 var _cardsGrid = _interopRequireDefault(require("../../organism/cards-grid"));
+var _cmPopin = _interopRequireDefault(require("../../molecule/cm-popin"));
 var _allCourses = _interopRequireDefault(require("../skill-detail/all-courses"));
 var _playlistDetailCover = _interopRequireDefault(require("../../molecule/playlist-detail-cover"));
 var _skillDetail = require("../skill-detail");
@@ -37,7 +38,8 @@ const PlaylistDetail = (props, context) => {
     onContinueLearningClick,
     search,
     metrics = {},
-    bannerMicrolearning = {}
+    bannerMicrolearning = {},
+    popinWithCards
   } = props;
   const {
     totalContents = (0, _pipe2.default)((0, _getOr2.default)([], 'list'), _size2.default)(playlistCourses)
@@ -115,7 +117,9 @@ const PlaylistDetail = (props, context) => {
       oldSwitchValue
     } : {},
     search: search
-  })));
+  })), popinWithCards ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.popinWithCards
+  }, /*#__PURE__*/_react.default.createElement(_cmPopin.default, popinWithCards)) : null);
 };
 PlaylistDetail.contextTypes = {
   skin: _provider.default.childContextTypes.skin,
@@ -145,7 +149,8 @@ PlaylistDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   bannerMicrolearning: _propTypes.default.shape({
     action: _propTypes.default.func,
     oldSwitchValue: _propTypes.default.bool
-  })
+  }),
+  popinWithCards: _propTypes.default.shape(_cmPopin.default.propTypes)
 } : {};
 var _default = exports.default = PlaylistDetail;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_classnames","_markdownToJsx","_provider","_tag","_select","_buttonLinkIcon","_icon","_cardsGrid","_allCourses","_playlistDetailCover","_skillDetail","_style","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCoursesAvailable","playlistCourses","filters","sorting","onBackClick","onContinueLearningClick","search","metrics","bannerMicrolearning","totalContents","_pipe2","_getOr2","_size2","descriptionRef","useRef","translate","action","bannerMicrolearningAction","oldSwitchValue","isDescriptionTruncated","setIsDescriptionTruncated","useState","showMore","setShowMore","handleShowMore","useCallback","useEffect","current","clientHeight","scrollHeight","Description","createElement","ref","className","classnames","style","truncate","backgroundContainer","container","_isNil2","faIcon","onClick","backButton","tooltipPlacement","ctaContainer","coverWrapper","images","label","Fragment","showMoreWrapper","iconName","size","faSize","wrapperSize","continueLearningButton","ContinueLearningButton","content","type","contextTypes","skin","Provider","childContextTypes","propTypes","process","env","NODE_ENV","PropTypes","string","isRequired","PlaylistDetailCover","bool","shape","CardsGrid","onChange","func","options","arrayOf","SelectOptionPropTypes","number","Select","oldValue","_default","exports"],"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 {getOr, isNil, pipe, size} 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    search,\n    metrics = {},\n    bannerMicrolearning = {}\n  } = props;\n  const {totalContents = pipe(getOr([], 'list'), size)(playlistCourses)} = metrics;\n  const descriptionRef = useRef(null);\n  const {translate} = context;\n  const {action: bannerMicrolearningAction, oldSwitchValue} = bannerMicrolearning;\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\n          content={playlistCourses}\n          totalContents={totalContents}\n          filters={filters}\n          sorting={sorting}\n          bannerMicrolearning={\n            bannerMicrolearningAction\n              ? {\n                  type: 'playlist',\n                  action: bannerMicrolearningAction,\n                  oldSwitchValue\n                }\n              : {}\n          }\n          search={search}\n        />\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  metrics: PropTypes.shape({\n    totalContents: PropTypes.number\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  search: PropTypes.shape({\n    oldValue: PropTypes.string,\n    onChange: PropTypes.func\n  }),\n  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func,\n  bannerMicrolearning: PropTypes.shape({\n    action: PropTypes.func,\n    oldSwitchValue: PropTypes.bool\n  })\n};\n\nexport default PlaylistDetail;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_classnames","_markdownToJsx","_provider","_tag","_select","_buttonLinkIcon","_icon","_cardsGrid","_cmPopin","_allCourses","_playlistDetailCover","_skillDetail","_style","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCoursesAvailable","playlistCourses","filters","sorting","onBackClick","onContinueLearningClick","search","metrics","bannerMicrolearning","popinWithCards","totalContents","_pipe2","_getOr2","_size2","descriptionRef","useRef","translate","action","bannerMicrolearningAction","oldSwitchValue","isDescriptionTruncated","setIsDescriptionTruncated","useState","showMore","setShowMore","handleShowMore","useCallback","useEffect","current","clientHeight","scrollHeight","Description","createElement","ref","className","classnames","style","truncate","backgroundContainer","container","_isNil2","faIcon","onClick","backButton","tooltipPlacement","ctaContainer","coverWrapper","images","label","Fragment","showMoreWrapper","iconName","size","faSize","wrapperSize","continueLearningButton","ContinueLearningButton","content","type","contextTypes","skin","Provider","childContextTypes","propTypes","process","env","NODE_ENV","PropTypes","string","isRequired","PlaylistDetailCover","bool","shape","CardsGrid","onChange","func","options","arrayOf","SelectOptionPropTypes","number","Select","oldValue","CMPopin","_default","exports"],"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 {getOr, isNil, pipe, size} 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 CMPopin from '../../molecule/cm-popin';\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    search,\n    metrics = {},\n    bannerMicrolearning = {},\n    popinWithCards\n  } = props;\n  const {totalContents = pipe(getOr([], 'list'), size)(playlistCourses)} = metrics;\n  const descriptionRef = useRef(null);\n  const {translate} = context;\n  const {action: bannerMicrolearningAction, oldSwitchValue} = bannerMicrolearning;\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\n          content={playlistCourses}\n          totalContents={totalContents}\n          filters={filters}\n          sorting={sorting}\n          bannerMicrolearning={\n            bannerMicrolearningAction\n              ? {\n                  type: 'playlist',\n                  action: bannerMicrolearningAction,\n                  oldSwitchValue\n                }\n              : {}\n          }\n          search={search}\n        />\n      </div>\n      {popinWithCards ? (\n        <div className={style.popinWithCards}>\n          <CMPopin {...popinWithCards} />\n        </div>\n      ) : null}\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  metrics: PropTypes.shape({\n    totalContents: PropTypes.number\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  search: PropTypes.shape({\n    oldValue: PropTypes.string,\n    onChange: PropTypes.func\n  }),\n  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func,\n  bannerMicrolearning: PropTypes.shape({\n    action: PropTypes.func,\n    oldSwitchValue: PropTypes.bool\n  }),\n  popinWithCards: PropTypes.shape(CMPopin.propTypes)\n};\n\nexport default PlaylistDetail;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,WAAA,GAAAD,sBAAA,CAAAF,OAAA;AAEA,IAAAI,cAAA,GAAAF,sBAAA,CAAAF,OAAA;AACA,IAAAK,SAAA,GAAAH,sBAAA,CAAAF,OAAA;AACA,IAAAM,IAAA,GAAAJ,sBAAA,CAAAF,OAAA;AACA,IAAAO,OAAA,GAAAR,uBAAA,CAAAC,OAAA;AACA,IAAAQ,eAAA,GAAAN,sBAAA,CAAAF,OAAA;AACA,IAAAS,KAAA,GAAAP,sBAAA,CAAAF,OAAA;AACA,IAAAU,UAAA,GAAAR,sBAAA,CAAAF,OAAA;AACA,IAAAW,QAAA,GAAAT,sBAAA,CAAAF,OAAA;AACA,IAAAY,WAAA,GAAAV,sBAAA,CAAAF,OAAA;AACA,IAAAa,oBAAA,GAAAX,sBAAA,CAAAF,OAAA;AACA,IAAAc,YAAA,GAAAd,OAAA;AACA,IAAAe,MAAA,GAAAb,sBAAA,CAAAF,OAAA;AAAgC,SAAAgB,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAlB,wBAAAkB,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAvB,uBAAAe,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAI,UAAA,GAAAJ,CAAA,KAAAK,OAAA,EAAAL,CAAA;AAEhC,MAAMmB,cAAc,GAAGA,CAACC,KAAK,EAAEC,OAAO,KAAK;EACzC,MAAM;IACJC,KAAK;IACLC,WAAW;IACXC,WAAW;IACXC,WAAW;IACXC,uBAAuB;IACvBC,eAAe;IACfC,OAAO;IACPC,OAAO;IACPC,WAAW;IACXC,uBAAuB;IACvBC,MAAM;IACNC,OAAO,GAAG,CAAC,CAAC;IACZC,mBAAmB,GAAG,CAAC,CAAC;IACxBC;EACF,CAAC,GAAGf,KAAK;EACT,MAAM;IAACgB,aAAa,GAAG,IAAAC,MAAA,CAAAhC,OAAA,EAAK,IAAAiC,OAAA,CAAAjC,OAAA,EAAM,EAAE,EAAE,MAAM,CAAC,EAAAkC,MAAA,CAAAlC,OAAM,CAAC,CAACsB,eAAe;EAAC,CAAC,GAAGM,OAAO;EAChF,MAAMO,cAAc,GAAG,IAAAC,aAAM,EAAC,IAAI,CAAC;EACnC,MAAM;IAACC;EAAS,CAAC,GAAGrB,OAAO;EAC3B,MAAM;IAACsB,MAAM,EAAEC,yBAAyB;IAAEC;EAAc,CAAC,GAAGX,mBAAmB;EAE/E,MAAM,CAACY,sBAAsB,EAAEC,yBAAyB,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EAC3E,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAG,IAAAF,eAAQ,EAAC,KAAK,CAAC;EAE/C,MAAMG,cAAc,GAAG,IAAAC,kBAAW,EAAC,MAAMF,WAAW,CAAC,CAACD,QAAQ,CAAC,EAAE,CAACC,WAAW,EAAED,QAAQ,CAAC,CAAC;EAEzF,IAAAI,gBAAS,EAAC,MAAM;IACd,IAAIb,cAAc,CAACc,OAAO,EAAE;MAC1B,MAAM;QAACC,YAAY,GAAG,CAAC;QAAEC,YAAY,GAAG;MAAC,CAAC,GAAGhB,cAAc,CAACc,OAAO;MACnEP,yBAAyB,CAACS,YAAY,GAAGD,YAAY,CAAC;IACxD;EACF,CAAC,EAAE,CAAC9B,WAAW,CAAC,CAAC;EAEjB,MAAMgC,WAAW,GAAG,IAAAL,kBAAW,EAAC,MAAM;IACpC,oBACEvE,MAAA,CAAAwB,OAAA,CAAAqD,aAAA;MACEC,GAAG,EAAEnB,cAAe;MACpBoB,SAAS,EAAE,IAAAC,mBAAU,EAACC,cAAK,CAACrC,WAAW,EAAE,CAACwB,QAAQ,IAAIa,cAAK,CAACC,QAAQ;IAAE,gBAEtElF,MAAA,CAAAwB,OAAA,CAAAqD,aAAA,CAACvE,cAAA,CAAAkB,OAAQ,QAAEoB,WAAsB,CAC9B,CAAC;EAEV,CAAC,EAAE,CAACwB,QAAQ,EAAExB,WAAW,CAAC,CAAC;EAE3B,oBACE5C,MAAA,CAAAwB,OAAA,CAAAqD,aAAA;IAAKE,SAAS,EAAEE,cAAK,CAACE;EAAoB,gBACxCnF,MAAA,CAAAwB,OAAA,CAAAqD,aAAA;IAAKE,SAAS,EAAEE,cAAK,CAACG,SAAU;IAAC,aAAWzC;EAAY,GACrD,CAAC,IAAA0C,OAAA,CAAA7D,OAAA,EAAMyB,WAAW,CAAC,gBAClBjD,MAAA,CAAAwB,OAAA,CAAAqD,aAAA,CAACnE,eAAA,CAAAc,OAAc;IACb8D,MAAM,EAAC,YAAY;IACnB,aAAU,aAAa;IACvB,cAAYzB,SAAS,CAAC,MAAM,CAAE;IAC9B0B,OAAO,EAAEtC,WAAY;IACrB8B,SAAS,EAAEE,cAAK,CAACO,UAAW;IAC5BC,gBAAgB,EAAC;EAAO,CACzB,CAAC,GACA,IAAI,eACRzF,MAAA,CAAAwB,OAAA,CAAAqD,aAAA;IAAKE,SAAS,EAAEE,cAAK,CAACS;EAAa,gBACjC1F,MAAA,CAAAwB,OAAA,CAAAqD,aAAA;IAAKE,SAAS,EAAEE,cAAK,CAACU;EAAa,gBACjC3F,MAAA,CAAAwB,OAAA,CAAAqD,aAAA,CAAC9D,oBAAA,CAAAS,OAAmB;IAACoE,MAAM,EAAElD;EAAY,CAAE,CACxC,CAAC,eACN1C,MAAA,CAAAwB,OAAA,CAAAqD,aAAA,2BACE7E,MAAA,CAAAwB,OAAA,CAAAqD,aAAA,CAACrE,IAAA,CAAAgB,OAAG;IAACqE,KAAK,EAAEhC,SAAS,CAAC,UAAU;EAAE,CAAE,CAAC,eACrC7D,MAAA,CAAAwB,OAAA,CAAAqD,aAAA;IAAKE,SAAS,EAAEE,cAAK,CAACxC;EAAM,GAAEA,KAAW,CAAC,EACzCG,WAAW,gBACV5C,MAAA,CAAAwB,OAAA,CAAAqD,aAAA,CAAA7E,MAAA,CAAAwB,OAAA,CAAAsE,QAAA,qBACE9F,MAAA,CAAAwB,OAAA,CAAAqD,aAAA,CAACD,WAAW,MAAE,CAAC,EACdX,sBAAsB,gBACrBjE,MAAA,CAAAwB,OAAA,CAAAqD,aAAA;IAAKE,SAAS,EAAEE,cAAK,CAACc,eAAgB;IAACR,OAAO,EAAEjB;EAAe,GAC5DT,SAAS,CAACO,QAAQ,GAAG,WAAW,GAAG,WAAW,CAAC,eAChDpE,MAAA,CAAAwB,OAAA,CAAAqD,aAAA,CAAClE,KAAA,CAAAa,OAAI;IACHwE,QAAQ,EAAE5B,QAAQ,GAAG,YAAY,GAAG,cAAe;IACnD6B,IAAI,EAAE;MAACC,MAAM,EAAE,EAAE;MAAEC,WAAW,EAAE;IAAE;EAAE,CACrC,CACE,CAAC,GACJ,IACJ,CAAC,GACD,IAAI,eACRnG,MAAA,CAAAwB,OAAA,CAAAqD,aAAA;IAAKE,SAAS,EAAEE,cAAK,CAACmB;EAAuB,gBAC3CpG,MAAA,CAAAwB,OAAA,CAAAqD,aAAA,CAAC7D,YAAA,CAAAqF,sBAAsB;IACrBxD,uBAAuB,EAAEA,uBAAwB;IACjD0C,OAAO,EAAErC;EAAwB,CAClC,CACE,CACF,CACF,CAAC,eACNlD,MAAA,CAAAwB,OAAA,CAAAqD,aAAA,CAAC/D,WAAA,CAAAU,OAAU;IACT8E,OAAO,EAAExD,eAAgB;IACzBS,aAAa,EAAEA,aAAc;IAC7BR,OAAO,EAAEA,OAAQ;IACjBC,OAAO,EAAEA,OAAQ;IACjBK,mBAAmB,EACjBU,yBAAyB,GACrB;MACEwC,IAAI,EAAE,UAAU;MAChBzC,MAAM,EAAEC,yBAAyB;MACjCC;IACF,CAAC,GACD,CAAC,CACN;IACDb,MAAM,EAAEA;EAAO,CAChB,CACE,CAAC,EACLG,cAAc,gBACbtD,MAAA,CAAAwB,OAAA,CAAAqD,aAAA;IAAKE,SAAS,EAAEE,cAAK,CAAC3B;EAAe,gBACnCtD,MAAA,CAAAwB,OAAA,CAAAqD,aAAA,CAAChE,QAAA,CAAAW,OAAO,EAAK8B,cAAiB,CAC3B,CAAC,GACJ,IACD,CAAC;AAEV,CAAC;AAEDhB,cAAc,CAACkE,YAAY,GAAG;EAC5BC,IAAI,EAAEC,iBAAQ,CAACC,iBAAiB,CAACF,IAAI;EACrC5C,SAAS,EAAE6C,iBAAQ,CAACC,iBAAiB,CAAC9C;AACxC,CAAC;AAEDvB,cAAc,CAACsE,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EACzBtE,KAAK,EAAEuE,kBAAS,CAACC,MAAM,CAACC,UAAU;EAClCxE,WAAW,EAAEyE,4BAAmB,CAACP,SAAS,CAAChB,MAAM;EACjDjD,WAAW,EAAEqE,kBAAS,CAACC,MAAM,CAACC,UAAU;EACxCtE,WAAW,EAAEoE,kBAAS,CAACC,MAAM;EAC7BpE,uBAAuB,EAAEmE,kBAAS,CAACI,IAAI;EACvCtE,eAAe,EAAEkE,kBAAS,CAACK,KAAK,CAACC,kBAAS,CAACV,SAAS,CAAC;EACrD7D,OAAO,EAAEiE,kBAAS,CAACK,KAAK,CAAC;IACvBE,QAAQ,EAAEP,kBAAS,CAACQ,IAAI;IACxBC,OAAO,EAAET,kBAAS,CAACU,OAAO,CAACV,kBAAS,CAACK,KAAK,CAACM,6BAAqB,CAAC;EACnE,CAAC,CAAC;EACFvE,OAAO,EAAE4D,kBAAS,CAACK,KAAK,CAAC;IACvB9D,aAAa,EAAEyD,kBAAS,CAACY;EAC3B,CAAC,CAAC;EACF5E,OAAO,EAAEgE,kBAAS,CAACK,KAAK,CAACQ,eAAM,CAACjB,SAAS,CAAC;EAC1CzD,MAAM,EAAE6D,kBAAS,CAACK,KAAK,CAAC;IACtBS,QAAQ,EAAEd,kBAAS,CAACC,MAAM;IAC1BM,QAAQ,EAAEP,kBAAS,CAACQ;EACtB,CAAC,CAAC;EACFvE,WAAW,EAAE+D,kBAAS,CAACQ,IAAI;EAC3BtE,uBAAuB,EAAE8D,kBAAS,CAACQ,IAAI;EACvCnE,mBAAmB,EAAE2D,kBAAS,CAACK,KAAK,CAAC;IACnCvD,MAAM,EAAEkD,kBAAS,CAACQ,IAAI;IACtBxD,cAAc,EAAEgD,kBAAS,CAACI;EAC5B,CAAC,CAAC;EACF9D,cAAc,EAAE0D,kBAAS,CAACK,KAAK,CAACU,gBAAO,CAACnB,SAAS;AACnD,CAAC;AAAC,IAAAoB,QAAA,GAAAC,OAAA,CAAAzG,OAAA,GAEac,cAAc","ignoreList":[]}

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

@@ -90,6 +90,11 @@
   margin-top: 24px;
 }
 
+.popinWithCards {
+  position: relative;
+  z-index: 7;
+}
+
 @media tablet {
   .ctaContainer {
     flex-direction: column;

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import PropTypes from 'prop-types';
 import { CardsGridProps } from '../../organism/cards-grid';
+import { CMPopinProps } from '../../molecule/cm-popin/types';
 interface ContinueLearningButtonProps {
     ongoingCoursesAvailable?: boolean;
     onClick?: () => void;
@@ -79,6 +80,7 @@ interface SkillDetailProps {
         onChange: () => void;
     };
     bannerMicrolearning?: BannerMicrolearning;
+    popinWithCards: CMPopinProps;
 }
 declare const SkillDetail: {
     (props: SkillDetailProps, context: ProviderContext): JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAUnC,OAAkB,EAAC,cAAc,EAAC,MAAM,2BAA2B,CAAC;AAMpE,UAAU,2BAA2B;IACnC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AACD,UAAU,eAAe;IACvB,IAAI,EAAE;QACJ,MAAM,EAAE;YACN,OAAO,EAAE,MAAM,CAAC;YAChB,SAAS,EAAE,MAAM,CAAC;SACnB,CAAC;KACH,CAAC;IACF,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,KAAK,MAAM,CAAC;CACnD;AAED,eAAO,MAAM,sBAAsB;YAC1B,2BAA2B,WACzB,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BzB,CAAC;AAYF,UAAU,OAAO;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,aAAK,mBAAmB,GACpB,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACrB;IACE,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;CACzB,CAAC;AACN,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC;IACpC,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,oBAAoB,EAAE,cAAc,CAAC;IACrC,OAAO,EAAE;QACP,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;QACtB,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;KACrB,CAAC;IACF,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAC;IACrC,MAAM,EAAE;QACN,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC;IACF,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;CAC3C;AACD,QAAA,MAAM,WAAW;YAAW,gBAAgB,WAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkNrE,CAAC;AAyCF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAUnC,OAAkB,EAAC,cAAc,EAAC,MAAM,2BAA2B,CAAC;AAGpE,OAAO,EAAC,YAAY,EAAC,MAAM,+BAA+B,CAAC;AAK3D,UAAU,2BAA2B;IACnC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AACD,UAAU,eAAe;IACvB,IAAI,EAAE;QACJ,MAAM,EAAE;YACN,OAAO,EAAE,MAAM,CAAC;YAChB,SAAS,EAAE,MAAM,CAAC;SACnB,CAAC;KACH,CAAC;IACF,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,KAAK,MAAM,CAAC;CACnD;AAED,eAAO,MAAM,sBAAsB;YAC1B,2BAA2B,WACzB,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BzB,CAAC;AAYF,UAAU,OAAO;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,aAAK,mBAAmB,GACpB,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACrB;IACE,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;CACzB,CAAC;AACN,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC;IACpC,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,oBAAoB,EAAE,cAAc,CAAC;IACrC,OAAO,EAAE;QACP,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;QACtB,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;KACrB,CAAC;IACF,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAC;IACrC,MAAM,EAAE;QACN,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC;IACF,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,cAAc,EAAE,YAAY,CAAC;CAC9B;AACD,QAAA,MAAM,WAAW;YAAW,gBAAgB,WAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwNrE,CAAC;AAyCF,eAAe,WAAW,CAAC"}

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

@@ -17,6 +17,7 @@ var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
 var _cardsGrid = _interopRequireDefault(require("../../organism/cards-grid"));
 var _colors = require("../../variables/colors");
 var _select = require("../../atom/select");
+var _cmPopin = _interopRequireDefault(require("../../molecule/cm-popin"));
 var _allCourses = _interopRequireDefault(require("./all-courses"));
 var _style = _interopRequireDefault(require("./style.css"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -81,7 +82,8 @@ const SkillDetail = (props, context) => {
     onReviewClick,
     onContinueLearningClick,
     search,
-    bannerMicrolearning
+    bannerMicrolearning,
+    popinWithCards
   } = props;
   const {
     score = 0,
@@ -243,7 +245,9 @@ const SkillDetail = (props, context) => {
       oldSwitchValue: bannerMicrolearning.oldSwitchValue
     } : undefined,
     search: search
-  })));
+  })), popinWithCards ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.popinWithCards
+  }, /*#__PURE__*/_react.default.createElement(_cmPopin.default, popinWithCards)) : null);
 };
 SkillDetail.contextTypes = {
   translate: _provider.default.childContextTypes.translate,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_classnames","_markdownToJsx","_cssColorFunction","_provider","_buttonLinkIcon","_icon","_iconPreview","_buttonLink","_cardsGrid","_colors","_select","_allCourses","_style","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","_get2","createElement","label","type","customStyle","width","borderRadius","backgroundColor","hoverBackgroundColor","convert","hoverColor","COLORS","white","icon","position","faIcon","name","color","size","exports","contextTypes","Provider","childContextTypes","propTypes","process","env","NODE_ENV","PropTypes","bool","func","SkillDetail","title","iconColor","iconName","skillRef","description","metrics","focused","availableForReview","skillIncludedCourses","filters","onBackClick","onReviewClick","onContinueLearningClick","search","bannerMicrolearning","score","questionsToReview","totalContents","bannerMicrolearningAction","action","descriptionRef","useRef","isDescriptionTruncated","setIsDescriptionTruncated","useState","showMore","setShowMore","handleShowMore","useCallback","useEffect","current","clientHeight","scrollHeight","Description","ref","className","classnames","style","truncate","ProgressBar","progressBarColor","cm_positive_500","inlineProgressStyle","progressBarRow","progressBarWrapper","progress","role","progressInformationNumber","toFixed","hasDescription","Boolean","trim","length","backgroundContainer","container","topSection","_isNil2","backButton","tooltipPlacement","mainSection","leftSide","gap","padding","rightSide","skillFocusBadge","purple_100","faSize","wrapperSize","skillBadge","cm_grey_100","Fragment","showMoreWrapper","skillInformation","dangerouslySetInnerHTML","__html","count","progressContainer","noDescriptionSpacing","ctaWrapper","disabled","cm_grey_700","content","oldSwitchValue","undefined","string","isRequired","shape","number","CardsGrid","onChange","options","arrayOf","SelectOptionPropTypes","oldValue","_default"],"sources":["../../../src/template/skill-detail/index.tsx"],"sourcesContent":["import React, {useCallback, useState, useRef, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {get, isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport {convert} from 'css-color-function';\nimport Provider from '../../atom/provider';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport IconPreview from '../../molecule/icon-preview';\nimport ButtonLink from '../../atom/button-link';\nimport CardsGrid, {CardsGridProps} from '../../organism/cards-grid';\nimport {COLORS} from '../../variables/colors';\nimport {SelectOptionPropTypes} from '../../atom/select';\nimport AllCourses from './all-courses';\nimport style from './style.css';\n\ninterface ContinueLearningButtonProps {\n  ongoingCoursesAvailable?: boolean;\n  onClick?: () => void;\n}\ninterface ProviderContext {\n  skin: {\n    common: {\n      primary: string;\n      secondary: string;\n    };\n  };\n  translate: (key: string, options?: any) => string;\n}\n\nexport const ContinueLearningButton = (\n  props: ContinueLearningButtonProps,\n  context: ProviderContext\n) => {\n  const {ongoingCoursesAvailable, onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <ButtonLink\n      label={ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')}\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={COLORS.white}\n      icon={{\n        position: 'left',\n        faIcon: {\n          name: 'play',\n          color: COLORS.white,\n          size: 14\n        }\n      }}\n      onClick={onClick}\n    />\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\ninterface Metrics {\n  score?: number;\n  questionsToReview?: number;\n  totalContents?: number;\n}\n\ntype BannerMicrolearning =\n  | Record<string, never>\n  | {\n      action: () => void;\n      oldSwitchValue: boolean;\n    };\ninterface SkillDetailProps {\n  title: string;\n  icon: {name: string; color: string};\n  skillRef: string;\n  description?: string;\n  metrics?: Metrics;\n  focused?: boolean;\n  availableForReview?: boolean;\n  ongoingCoursesAvailable?: boolean;\n  skillIncludedCourses: CardsGridProps;\n  filters: {\n    onChange?: () => void;\n    options?: unknown[];\n  };\n  onBackClick?: () => void;\n  onReviewClick?: () => void;\n  onContinueLearningClick?: () => void;\n  search: {\n    oldValue: string;\n    onChange: () => void;\n  };\n  bannerMicrolearning?: BannerMicrolearning;\n}\nconst SkillDetail = (props: SkillDetailProps, context: ProviderContext) => {\n  const {\n    title,\n    icon: {color: iconColor, name: iconName},\n    skillRef,\n    description,\n    metrics = {},\n    focused,\n    availableForReview,\n    ongoingCoursesAvailable,\n    skillIncludedCourses,\n    filters,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick,\n    search,\n    bannerMicrolearning\n  } = props;\n\n  const {score = 0, questionsToReview = 0, totalContents = 0} = metrics;\n  const {translate} = context;\n  const bannerMicrolearningAction = bannerMicrolearning?.action;\n  const descriptionRef = useRef(null);\n  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => {\n    setShowMore(!showMore);\n  }, [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        data-testid=\"skill-description\"\n        className={classnames(style.description, !showMore && style.truncate)}\n      >\n        {description ? <Markdown>{description}</Markdown> : null}\n      </div>\n    );\n  }, [showMore, description]);\n\n  const ProgressBar = useCallback(() => {\n    if (typeof score !== 'number') return null;\n\n    const progressBarColor = COLORS.cm_positive_500;\n    const inlineProgressStyle = {\n      backgroundColor: progressBarColor,\n      width: `${score}%`\n    };\n\n    return (\n      <div className={style.progressBarRow}>\n        <div className={style.progressBarWrapper}>\n          <div\n            data-name=\"progress\"\n            className={style.progress}\n            style={inlineProgressStyle}\n            role=\"progressbar\"\n            aria-valuenow={score}\n            aria-valuemin={0}\n            aria-valuemax={100}\n          />\n        </div>\n        <span className={style.progressInformationNumber}>{score.toFixed(1)}%</span>\n      </div>\n    );\n  }, [score]);\n  const hasDescription = Boolean(description && description.trim().length > 0);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={skillRef}>\n        {/* Top section for the back arrow (optional) */}\n        <div className={style.topSection}>\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>\n\n        {/* Main section: icon on the left, skill info on the right */}\n        <div className={style.mainSection}>\n          <div className={style.leftSide}>\n            <IconPreview\n              icon={{\n                name: iconName,\n                color: iconColor\n              }}\n              title={title}\n              customStyle={{gap: 24, padding: '50px 49px 50px 50px'}}\n            />\n          </div>\n          <div className={style.rightSide}>\n            {focused ? (\n              <div className={style.skillFocusBadge}>\n                <Icon\n                  iconName=\"bullseye-arrow\"\n                  backgroundColor={COLORS.purple_100}\n                  size={{faSize: 10, wrapperSize: 16}}\n                />\n                {translate('skill_focus')}\n              </div>\n            ) : (\n              <div className={style.skillBadge}>\n                <Icon\n                  iconName=\"shapes\"\n                  backgroundColor={COLORS.cm_grey_100}\n                  size={{faSize: 10, wrapperSize: 16}}\n                />\n                {translate('skill')}\n              </div>\n            )}\n\n            <h2 className={style.title}>{title}</h2>\n\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={{faSize: 14, wrapperSize: 14}}\n                      customStyle={{padding: '8px'}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            )}\n\n            {questionsToReview > 0 ? (\n              <div className={style.skillInformation}>\n                <span\n                  // eslint-disable-next-line react/no-danger\n                  dangerouslySetInnerHTML={{\n                    __html: translate('skill_chart_side_panel_questions_to_review', {\n                      count: questionsToReview\n                    })\n                  }}\n                />\n              </div>\n            ) : null}\n\n            <div\n              className={classnames(\n                style.progressContainer,\n                !hasDescription && style.noDescriptionSpacing\n              )}\n            >\n              <ProgressBar />\n            </div>\n\n            <div className={style.ctaWrapper}>\n              <ContinueLearningButton\n                ongoingCoursesAvailable={ongoingCoursesAvailable}\n                onClick={onContinueLearningClick}\n              />\n              <ButtonLink\n                type=\"secondary\"\n                label={translate('review_this_skill')}\n                disabled={!availableForReview}\n                onClick={onReviewClick}\n                icon={{\n                  position: 'left',\n                  faIcon: {\n                    name: 'rotate-right',\n                    color: COLORS.cm_grey_700,\n                    size: 14\n                  }\n                }}\n                customStyle={{borderRadius: '12px', width: 'fit-content'}}\n              />\n            </div>\n          </div>\n        </div>\n\n        {/* Courses section below */}\n        <AllCourses\n          content={skillIncludedCourses}\n          filters={filters}\n          totalContents={totalContents}\n          bannerMicrolearning={\n            bannerMicrolearning && bannerMicrolearningAction\n              ? {\n                  type: 'skill',\n                  action: bannerMicrolearningAction,\n                  oldSwitchValue: bannerMicrolearning.oldSwitchValue\n                }\n              : undefined\n          }\n          search={search}\n        />\n      </div>\n    </div>\n  );\n};\n\nSkillDetail.contextTypes = {\n  translate: Provider.childContextTypes.translate,\n  skin: Provider.childContextTypes.skin\n};\n\nSkillDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  icon: PropTypes.shape({\n    name: PropTypes.string,\n    color: PropTypes.string\n  }).isRequired,\n  skillRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  metrics: PropTypes.shape({\n    score: PropTypes.number,\n    questionsToReview: PropTypes.number,\n    totalContents: PropTypes.number\n  }),\n  focused: PropTypes.bool,\n  availableForReview: PropTypes.bool,\n  ongoingCoursesAvailable: PropTypes.bool,\n  skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  onBackClick: PropTypes.func,\n  onReviewClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func,\n  search: PropTypes.shape({\n    oldValue: PropTypes.string,\n    onChange: PropTypes.func\n  }),\n  bannerMicrolearning: PropTypes.shape({\n    action: PropTypes.func,\n    oldSwitchValue: PropTypes.bool\n  })\n};\n\nexport default SkillDetail;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_classnames","_markdownToJsx","_cssColorFunction","_provider","_buttonLinkIcon","_icon","_iconPreview","_buttonLink","_cardsGrid","_colors","_select","_cmPopin","_allCourses","_style","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","_get2","createElement","label","type","customStyle","width","borderRadius","backgroundColor","hoverBackgroundColor","convert","hoverColor","COLORS","white","icon","position","faIcon","name","color","size","exports","contextTypes","Provider","childContextTypes","propTypes","process","env","NODE_ENV","PropTypes","bool","func","SkillDetail","title","iconColor","iconName","skillRef","description","metrics","focused","availableForReview","skillIncludedCourses","filters","onBackClick","onReviewClick","onContinueLearningClick","search","bannerMicrolearning","popinWithCards","score","questionsToReview","totalContents","bannerMicrolearningAction","action","descriptionRef","useRef","isDescriptionTruncated","setIsDescriptionTruncated","useState","showMore","setShowMore","handleShowMore","useCallback","useEffect","current","clientHeight","scrollHeight","Description","ref","className","classnames","style","truncate","ProgressBar","progressBarColor","cm_positive_500","inlineProgressStyle","progressBarRow","progressBarWrapper","progress","role","progressInformationNumber","toFixed","hasDescription","Boolean","trim","length","backgroundContainer","container","topSection","_isNil2","backButton","tooltipPlacement","mainSection","leftSide","gap","padding","rightSide","skillFocusBadge","purple_100","faSize","wrapperSize","skillBadge","cm_grey_100","Fragment","showMoreWrapper","skillInformation","dangerouslySetInnerHTML","__html","count","progressContainer","noDescriptionSpacing","ctaWrapper","disabled","cm_grey_700","content","oldSwitchValue","undefined","string","isRequired","shape","number","CardsGrid","onChange","options","arrayOf","SelectOptionPropTypes","oldValue","_default"],"sources":["../../../src/template/skill-detail/index.tsx"],"sourcesContent":["import React, {useCallback, useState, useRef, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {get, isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport {convert} from 'css-color-function';\nimport Provider from '../../atom/provider';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport IconPreview from '../../molecule/icon-preview';\nimport ButtonLink from '../../atom/button-link';\nimport CardsGrid, {CardsGridProps} from '../../organism/cards-grid';\nimport {COLORS} from '../../variables/colors';\nimport {SelectOptionPropTypes} from '../../atom/select';\nimport {CMPopinProps} from '../../molecule/cm-popin/types';\nimport CMPopin from '../../molecule/cm-popin';\nimport AllCourses from './all-courses';\nimport style from './style.css';\n\ninterface ContinueLearningButtonProps {\n  ongoingCoursesAvailable?: boolean;\n  onClick?: () => void;\n}\ninterface ProviderContext {\n  skin: {\n    common: {\n      primary: string;\n      secondary: string;\n    };\n  };\n  translate: (key: string, options?: any) => string;\n}\n\nexport const ContinueLearningButton = (\n  props: ContinueLearningButtonProps,\n  context: ProviderContext\n) => {\n  const {ongoingCoursesAvailable, onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <ButtonLink\n      label={ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')}\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={COLORS.white}\n      icon={{\n        position: 'left',\n        faIcon: {\n          name: 'play',\n          color: COLORS.white,\n          size: 14\n        }\n      }}\n      onClick={onClick}\n    />\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\ninterface Metrics {\n  score?: number;\n  questionsToReview?: number;\n  totalContents?: number;\n}\n\ntype BannerMicrolearning =\n  | Record<string, never>\n  | {\n      action: () => void;\n      oldSwitchValue: boolean;\n    };\ninterface SkillDetailProps {\n  title: string;\n  icon: {name: string; color: string};\n  skillRef: string;\n  description?: string;\n  metrics?: Metrics;\n  focused?: boolean;\n  availableForReview?: boolean;\n  ongoingCoursesAvailable?: boolean;\n  skillIncludedCourses: CardsGridProps;\n  filters: {\n    onChange?: () => void;\n    options?: unknown[];\n  };\n  onBackClick?: () => void;\n  onReviewClick?: () => void;\n  onContinueLearningClick?: () => void;\n  search: {\n    oldValue: string;\n    onChange: () => void;\n  };\n  bannerMicrolearning?: BannerMicrolearning;\n  popinWithCards: CMPopinProps;\n}\nconst SkillDetail = (props: SkillDetailProps, context: ProviderContext) => {\n  const {\n    title,\n    icon: {color: iconColor, name: iconName},\n    skillRef,\n    description,\n    metrics = {},\n    focused,\n    availableForReview,\n    ongoingCoursesAvailable,\n    skillIncludedCourses,\n    filters,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick,\n    search,\n    bannerMicrolearning,\n    popinWithCards\n  } = props;\n\n  const {score = 0, questionsToReview = 0, totalContents = 0} = metrics;\n  const {translate} = context;\n  const bannerMicrolearningAction = bannerMicrolearning?.action;\n  const descriptionRef = useRef(null);\n  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => {\n    setShowMore(!showMore);\n  }, [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        data-testid=\"skill-description\"\n        className={classnames(style.description, !showMore && style.truncate)}\n      >\n        {description ? <Markdown>{description}</Markdown> : null}\n      </div>\n    );\n  }, [showMore, description]);\n\n  const ProgressBar = useCallback(() => {\n    if (typeof score !== 'number') return null;\n\n    const progressBarColor = COLORS.cm_positive_500;\n    const inlineProgressStyle = {\n      backgroundColor: progressBarColor,\n      width: `${score}%`\n    };\n\n    return (\n      <div className={style.progressBarRow}>\n        <div className={style.progressBarWrapper}>\n          <div\n            data-name=\"progress\"\n            className={style.progress}\n            style={inlineProgressStyle}\n            role=\"progressbar\"\n            aria-valuenow={score}\n            aria-valuemin={0}\n            aria-valuemax={100}\n          />\n        </div>\n        <span className={style.progressInformationNumber}>{score.toFixed(1)}%</span>\n      </div>\n    );\n  }, [score]);\n  const hasDescription = Boolean(description && description.trim().length > 0);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={skillRef}>\n        {/* Top section for the back arrow (optional) */}\n        <div className={style.topSection}>\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>\n\n        {/* Main section: icon on the left, skill info on the right */}\n        <div className={style.mainSection}>\n          <div className={style.leftSide}>\n            <IconPreview\n              icon={{\n                name: iconName,\n                color: iconColor\n              }}\n              title={title}\n              customStyle={{gap: 24, padding: '50px 49px 50px 50px'}}\n            />\n          </div>\n          <div className={style.rightSide}>\n            {focused ? (\n              <div className={style.skillFocusBadge}>\n                <Icon\n                  iconName=\"bullseye-arrow\"\n                  backgroundColor={COLORS.purple_100}\n                  size={{faSize: 10, wrapperSize: 16}}\n                />\n                {translate('skill_focus')}\n              </div>\n            ) : (\n              <div className={style.skillBadge}>\n                <Icon\n                  iconName=\"shapes\"\n                  backgroundColor={COLORS.cm_grey_100}\n                  size={{faSize: 10, wrapperSize: 16}}\n                />\n                {translate('skill')}\n              </div>\n            )}\n\n            <h2 className={style.title}>{title}</h2>\n\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={{faSize: 14, wrapperSize: 14}}\n                      customStyle={{padding: '8px'}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            )}\n\n            {questionsToReview > 0 ? (\n              <div className={style.skillInformation}>\n                <span\n                  // eslint-disable-next-line react/no-danger\n                  dangerouslySetInnerHTML={{\n                    __html: translate('skill_chart_side_panel_questions_to_review', {\n                      count: questionsToReview\n                    })\n                  }}\n                />\n              </div>\n            ) : null}\n\n            <div\n              className={classnames(\n                style.progressContainer,\n                !hasDescription && style.noDescriptionSpacing\n              )}\n            >\n              <ProgressBar />\n            </div>\n\n            <div className={style.ctaWrapper}>\n              <ContinueLearningButton\n                ongoingCoursesAvailable={ongoingCoursesAvailable}\n                onClick={onContinueLearningClick}\n              />\n              <ButtonLink\n                type=\"secondary\"\n                label={translate('review_this_skill')}\n                disabled={!availableForReview}\n                onClick={onReviewClick}\n                icon={{\n                  position: 'left',\n                  faIcon: {\n                    name: 'rotate-right',\n                    color: COLORS.cm_grey_700,\n                    size: 14\n                  }\n                }}\n                customStyle={{borderRadius: '12px', width: 'fit-content'}}\n              />\n            </div>\n          </div>\n        </div>\n\n        {/* Courses section below */}\n        <AllCourses\n          content={skillIncludedCourses}\n          filters={filters}\n          totalContents={totalContents}\n          bannerMicrolearning={\n            bannerMicrolearning && bannerMicrolearningAction\n              ? {\n                  type: 'skill',\n                  action: bannerMicrolearningAction,\n                  oldSwitchValue: bannerMicrolearning.oldSwitchValue\n                }\n              : undefined\n          }\n          search={search}\n        />\n      </div>\n      {popinWithCards ? (\n        <div className={style.popinWithCards}>\n          <CMPopin {...popinWithCards} />\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nSkillDetail.contextTypes = {\n  translate: Provider.childContextTypes.translate,\n  skin: Provider.childContextTypes.skin\n};\n\nSkillDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  icon: PropTypes.shape({\n    name: PropTypes.string,\n    color: PropTypes.string\n  }).isRequired,\n  skillRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  metrics: PropTypes.shape({\n    score: PropTypes.number,\n    questionsToReview: PropTypes.number,\n    totalContents: PropTypes.number\n  }),\n  focused: PropTypes.bool,\n  availableForReview: PropTypes.bool,\n  ongoingCoursesAvailable: PropTypes.bool,\n  skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  onBackClick: PropTypes.func,\n  onReviewClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func,\n  search: PropTypes.shape({\n    oldValue: PropTypes.string,\n    onChange: PropTypes.func\n  }),\n  bannerMicrolearning: PropTypes.shape({\n    action: PropTypes.func,\n    oldSwitchValue: PropTypes.bool\n  })\n};\n\nexport default SkillDetail;\n"],"mappings":"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","ignoreList":[]}

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

@@ -286,7 +286,10 @@
     width: 100%;
   }
 }
-
+.popinWithCards {
+  position: relative;
+  z-index: 7;
+}
 
 @media mobile {
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "11.40.20",
+  "version": "11.40.21",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -169,5 +169,5 @@
     "last 2 versions",
     "IE 11"
   ],
-  "gitHead": "729eea9093b042bdac3ffe5f920070e01657aed5"
+  "gitHead": "11c136ff56c136fb7f9396ef763c24c2edc5ed23"
 }