@coorpacademy/components 11.40.20 → 11.40.21

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

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

@@ -12,6 +12,7 @@ import Select, { SelectOptionPropTypes } from '../../atom/select';
 import ButtonLinkIcon from '../../atom/button-link-icon';
 import Icon from '../../atom/icon';
 import CardsGrid from '../../organism/cards-grid';
+import CMPopin from '../../molecule/cm-popin';
 import AllCourses from '../skill-detail/all-courses';
 import PlaylistDetailCover from '../../molecule/playlist-detail-cover';
 import { ContinueLearningButton } from '../skill-detail';
@@ -30,7 +31,8 @@ const PlaylistDetail = (props, context) => {
     onContinueLearningClick,
     search,
     metrics = {},
-    bannerMicrolearning = {}
+    bannerMicrolearning = {},
+    popinWithCards
   } = props;
   const {
     totalContents = _pipe(_getOr([], 'list'), _size)(playlistCourses)
@@ -108,7 +110,9 @@ const PlaylistDetail = (props, context) => {
       oldSwitchValue
     } : {},
     search: search
-  })));
+  })), popinWithCards ? /*#__PURE__*/React.createElement("div", {
+    className: style.popinWithCards
+  }, /*#__PURE__*/React.createElement(CMPopin, popinWithCards)) : null);
 };
 PlaylistDetail.contextTypes = {
   skin: Provider.childContextTypes.skin,
@@ -138,7 +142,8 @@ PlaylistDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   bannerMicrolearning: PropTypes.shape({
     action: PropTypes.func,
     oldSwitchValue: PropTypes.bool
-  })
+  }),
+  popinWithCards: PropTypes.shape(CMPopin.propTypes)
 } : {};
 export default PlaylistDetail;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"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","search","metrics","bannerMicrolearning","totalContents","_pipe","_getOr","_size","descriptionRef","translate","action","bannerMicrolearningAction","oldSwitchValue","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","createElement","ref","className","truncate","backgroundContainer","container","_isNil","faIcon","onClick","backButton","tooltipPlacement","ctaContainer","coverWrapper","images","label","Fragment","showMoreWrapper","iconName","size","faSize","wrapperSize","continueLearningButton","content","type","contextTypes","skin","childContextTypes","propTypes","process","env","NODE_ENV","string","isRequired","bool","shape","onChange","func","options","arrayOf","number","oldValue"],"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":";;;;AAAA,OAAOA,KAAK,IAAGC,WAAW,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,MAAM,QAAO,OAAO;AACrE,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAOC,QAAQ,MAAM,iBAAiB;AACtC,OAAOC,QAAQ,MAAM,qBAAqB;AAC1C,OAAOC,GAAG,MAAM,gBAAgB;AAChC,OAAOC,MAAM,IAAGC,qBAAqB,QAAO,mBAAmB;AAC/D,OAAOC,cAAc,MAAM,6BAA6B;AACxD,OAAOC,IAAI,MAAM,iBAAiB;AAClC,OAAOC,SAAS,MAAM,2BAA2B;AACjD,OAAOC,UAAU,MAAM,6BAA6B;AACpD,OAAOC,mBAAmB,MAAM,sCAAsC;AACtE,SAAQC,sBAAsB,QAAO,iBAAiB;AACtD,OAAOC,KAAK,MAAM,aAAa;AAE/B,MAAMC,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;EACzB,CAAC,GAAGd,KAAK;EACT,MAAM;IAACe,aAAa,GAAGC,KAAA,CAAKC,MAAA,CAAM,EAAE,EAAE,MAAM,CAAC,EAAAC,KAAM,CAAC,CAACX,eAAe;EAAC,CAAC,GAAGM,OAAO;EAChF,MAAMM,cAAc,GAAGnC,MAAM,CAAC,IAAI,CAAC;EACnC,MAAM;IAACoC;EAAS,CAAC,GAAGnB,OAAO;EAC3B,MAAM;IAACoB,MAAM,EAAEC,yBAAyB;IAAEC;EAAc,CAAC,GAAGT,mBAAmB;EAE/E,MAAM,CAACU,sBAAsB,EAAEC,yBAAyB,CAAC,GAAG3C,QAAQ,CAAC,KAAK,CAAC;EAC3E,MAAM,CAAC4C,QAAQ,EAAEC,WAAW,CAAC,GAAG7C,QAAQ,CAAC,KAAK,CAAC;EAE/C,MAAM8C,cAAc,GAAG/C,WAAW,CAAC,MAAM8C,WAAW,CAAC,CAACD,QAAQ,CAAC,EAAE,CAACC,WAAW,EAAED,QAAQ,CAAC,CAAC;EAEzF3C,SAAS,CAAC,MAAM;IACd,IAAIoC,cAAc,CAACU,OAAO,EAAE;MAC1B,MAAM;QAACC,YAAY,GAAG,CAAC;QAAEC,YAAY,GAAG;MAAC,CAAC,GAAGZ,cAAc,CAACU,OAAO;MACnEJ,yBAAyB,CAACM,YAAY,GAAGD,YAAY,CAAC;IACxD;EACF,CAAC,EAAE,CAACzB,WAAW,CAAC,CAAC;EAEjB,MAAM2B,WAAW,GAAGnD,WAAW,CAAC,MAAM;IACpC,oBACED,KAAA,CAAAqD,aAAA;MACEC,GAAG,EAAEf,cAAe;MACpBgB,SAAS,EAAEjD,UAAU,CAACY,KAAK,CAACO,WAAW,EAAE,CAACqB,QAAQ,IAAI5B,KAAK,CAACsC,QAAQ;IAAE,gBAEtExD,KAAA,CAAAqD,aAAA,CAAC9C,QAAQ,QAAEkB,WAAsB,CAC9B,CAAC;EAEV,CAAC,EAAE,CAACqB,QAAQ,EAAErB,WAAW,CAAC,CAAC;EAE3B,oBACEzB,KAAA,CAAAqD,aAAA;IAAKE,SAAS,EAAErC,KAAK,CAACuC;EAAoB,gBACxCzD,KAAA,CAAAqD,aAAA;IAAKE,SAAS,EAAErC,KAAK,CAACwC,SAAU;IAAC,aAAWlC;EAAY,GACrD,CAACmC,MAAA,CAAM7B,WAAW,CAAC,gBAClB9B,KAAA,CAAAqD,aAAA,CAACzC,cAAc;IACbgD,MAAM,EAAC,YAAY;IACnB,aAAU,aAAa;IACvB,cAAYpB,SAAS,CAAC,MAAM,CAAE;IAC9BqB,OAAO,EAAE/B,WAAY;IACrByB,SAAS,EAAErC,KAAK,CAAC4C,UAAW;IAC5BC,gBAAgB,EAAC;EAAO,CACzB,CAAC,GACA,IAAI,eACR/D,KAAA,CAAAqD,aAAA;IAAKE,SAAS,EAAErC,KAAK,CAAC8C;EAAa,gBACjChE,KAAA,CAAAqD,aAAA;IAAKE,SAAS,EAAErC,KAAK,CAAC+C;EAAa,gBACjCjE,KAAA,CAAAqD,aAAA,CAACrC,mBAAmB;IAACkD,MAAM,EAAE3C;EAAY,CAAE,CACxC,CAAC,eACNvB,KAAA,CAAAqD,aAAA,2BACErD,KAAA,CAAAqD,aAAA,CAAC5C,GAAG;IAAC0D,KAAK,EAAE3B,SAAS,CAAC,UAAU;EAAE,CAAE,CAAC,eACrCxC,KAAA,CAAAqD,aAAA;IAAKE,SAAS,EAAErC,KAAK,CAACI;EAAM,GAAEA,KAAW,CAAC,EACzCG,WAAW,gBACVzB,KAAA,CAAAqD,aAAA,CAAArD,KAAA,CAAAoE,QAAA,qBACEpE,KAAA,CAAAqD,aAAA,CAACD,WAAW,MAAE,CAAC,EACdR,sBAAsB,gBACrB5C,KAAA,CAAAqD,aAAA;IAAKE,SAAS,EAAErC,KAAK,CAACmD,eAAgB;IAACR,OAAO,EAAEb;EAAe,GAC5DR,SAAS,CAACM,QAAQ,GAAG,WAAW,GAAG,WAAW,CAAC,eAChD9C,KAAA,CAAAqD,aAAA,CAACxC,IAAI;IACHyD,QAAQ,EAAExB,QAAQ,GAAG,YAAY,GAAG,cAAe;IACnDyB,IAAI,EAAE;MAACC,MAAM,EAAE,EAAE;MAAEC,WAAW,EAAE;IAAE;EAAE,CACrC,CACE,CAAC,GACJ,IACJ,CAAC,GACD,IAAI,eACRzE,KAAA,CAAAqD,aAAA;IAAKE,SAAS,EAAErC,KAAK,CAACwD;EAAuB,gBAC3C1E,KAAA,CAAAqD,aAAA,CAACpC,sBAAsB;IACrBS,uBAAuB,EAAEA,uBAAwB;IACjDmC,OAAO,EAAE9B;EAAwB,CAClC,CACE,CACF,CACF,CAAC,eACN/B,KAAA,CAAAqD,aAAA,CAACtC,UAAU;IACT4D,OAAO,EAAEhD,eAAgB;IACzBQ,aAAa,EAAEA,aAAc;IAC7BP,OAAO,EAAEA,OAAQ;IACjBC,OAAO,EAAEA,OAAQ;IACjBK,mBAAmB,EACjBQ,yBAAyB,GACrB;MACEkC,IAAI,EAAE,UAAU;MAChBnC,MAAM,EAAEC,yBAAyB;MACjCC;IACF,CAAC,GACD,CAAC,CACN;IACDX,MAAM,EAAEA;EAAO,CAChB,CACE,CACF,CAAC;AAEV,CAAC;AAEDb,cAAc,CAAC0D,YAAY,GAAG;EAC5BC,IAAI,EAAEtE,QAAQ,CAACuE,iBAAiB,CAACD,IAAI;EACrCtC,SAAS,EAAEhC,QAAQ,CAACuE,iBAAiB,CAACvC;AACxC,CAAC;AAEDrB,cAAc,CAAC6D,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EACzB7D,KAAK,EAAEjB,SAAS,CAAC+E,MAAM,CAACC,UAAU;EAClC9D,WAAW,EAAEP,mBAAmB,CAACgE,SAAS,CAACd,MAAM;EACjD1C,WAAW,EAAEnB,SAAS,CAAC+E,MAAM,CAACC,UAAU;EACxC5D,WAAW,EAAEpB,SAAS,CAAC+E,MAAM;EAC7B1D,uBAAuB,EAAErB,SAAS,CAACiF,IAAI;EACvC3D,eAAe,EAAEtB,SAAS,CAACkF,KAAK,CAACzE,SAAS,CAACkE,SAAS,CAAC;EACrDpD,OAAO,EAAEvB,SAAS,CAACkF,KAAK,CAAC;IACvBC,QAAQ,EAAEnF,SAAS,CAACoF,IAAI;IACxBC,OAAO,EAAErF,SAAS,CAACsF,OAAO,CAACtF,SAAS,CAACkF,KAAK,CAAC5E,qBAAqB,CAAC;EACnE,CAAC,CAAC;EACFsB,OAAO,EAAE5B,SAAS,CAACkF,KAAK,CAAC;IACvBpD,aAAa,EAAE9B,SAAS,CAACuF;EAC3B,CAAC,CAAC;EACF/D,OAAO,EAAExB,SAAS,CAACkF,KAAK,CAAC7E,MAAM,CAACsE,SAAS,CAAC;EAC1ChD,MAAM,EAAE3B,SAAS,CAACkF,KAAK,CAAC;IACtBM,QAAQ,EAAExF,SAAS,CAAC+E,MAAM;IAC1BI,QAAQ,EAAEnF,SAAS,CAACoF;EACtB,CAAC,CAAC;EACF3D,WAAW,EAAEzB,SAAS,CAACoF,IAAI;EAC3B1D,uBAAuB,EAAE1B,SAAS,CAACoF,IAAI;EACvCvD,mBAAmB,EAAE7B,SAAS,CAACkF,KAAK,CAAC;IACnC9C,MAAM,EAAEpC,SAAS,CAACoF,IAAI;IACtB9C,cAAc,EAAEtC,SAAS,CAACiF;EAC5B,CAAC;AACH,CAAC;AAED,eAAenE,cAAc","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","useEffect","useRef","PropTypes","classnames","Markdown","Provider","Tag","Select","SelectOptionPropTypes","ButtonLinkIcon","Icon","CardsGrid","CMPopin","AllCourses","PlaylistDetailCover","ContinueLearningButton","style","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCoursesAvailable","playlistCourses","filters","sorting","onBackClick","onContinueLearningClick","search","metrics","bannerMicrolearning","popinWithCards","totalContents","_pipe","_getOr","_size","descriptionRef","translate","action","bannerMicrolearningAction","oldSwitchValue","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","createElement","ref","className","truncate","backgroundContainer","container","_isNil","faIcon","onClick","backButton","tooltipPlacement","ctaContainer","coverWrapper","images","label","Fragment","showMoreWrapper","iconName","size","faSize","wrapperSize","continueLearningButton","content","type","contextTypes","skin","childContextTypes","propTypes","process","env","NODE_ENV","string","isRequired","bool","shape","onChange","func","options","arrayOf","number","oldValue"],"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":"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","ignoreList":[]}

package/es/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/es/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/es/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/es/template/skill-detail/index.js

@@ -13,6 +13,7 @@ import ButtonLink from '../../atom/button-link';
 import CardsGrid from '../../organism/cards-grid';
 import { COLORS } from '../../variables/colors';
 import { SelectOptionPropTypes } from '../../atom/select';
+import CMPopin from '../../molecule/cm-popin';
 import AllCourses from './all-courses';
 import style from './style.css';
 export const ContinueLearningButton = (props, context) => {
@@ -73,7 +74,8 @@ const SkillDetail = (props, context) => {
     onReviewClick,
     onContinueLearningClick,
     search,
-    bannerMicrolearning
+    bannerMicrolearning,
+    popinWithCards
   } = props;
   const {
     score = 0,
@@ -235,7 +237,9 @@ const SkillDetail = (props, context) => {
       oldSwitchValue: bannerMicrolearning.oldSwitchValue
     } : undefined,
     search: search
-  })));
+  })), popinWithCards ? /*#__PURE__*/React.createElement("div", {
+    className: style.popinWithCards
+  }, /*#__PURE__*/React.createElement(CMPopin, popinWithCards)) : null);
 };
 SkillDetail.contextTypes = {
   translate: Provider.childContextTypes.translate,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","useRef","useEffect","PropTypes","classnames","Markdown","convert","Provider","ButtonLinkIcon","Icon","IconPreview","ButtonLink","CardsGrid","COLORS","SelectOptionPropTypes","AllCourses","style","ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","_get","createElement","label","type","customStyle","width","borderRadius","backgroundColor","hoverBackgroundColor","hoverColor","white","icon","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","bool","func","SkillDetail","title","iconColor","iconName","skillRef","description","metrics","focused","availableForReview","skillIncludedCourses","filters","onBackClick","onReviewClick","onContinueLearningClick","search","bannerMicrolearning","score","questionsToReview","totalContents","bannerMicrolearningAction","action","descriptionRef","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","ref","className","truncate","ProgressBar","progressBarColor","cm_positive_500","inlineProgressStyle","progressBarRow","progressBarWrapper","progress","role","progressInformationNumber","toFixed","hasDescription","Boolean","trim","length","backgroundContainer","container","topSection","_isNil","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","onChange","options","arrayOf","oldValue"],"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","useCallback","useState","useRef","useEffect","PropTypes","classnames","Markdown","convert","Provider","ButtonLinkIcon","Icon","IconPreview","ButtonLink","CardsGrid","COLORS","SelectOptionPropTypes","CMPopin","AllCourses","style","ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","_get","createElement","label","type","customStyle","width","borderRadius","backgroundColor","hoverBackgroundColor","hoverColor","white","icon","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","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","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","ref","className","truncate","ProgressBar","progressBarColor","cm_positive_500","inlineProgressStyle","progressBarRow","progressBarWrapper","progress","role","progressInformationNumber","toFixed","hasDescription","Boolean","trim","length","backgroundContainer","container","topSection","_isNil","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","onChange","options","arrayOf","oldValue"],"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/es/template/skill-detail/style.css

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