@coorpacademy/components 11.40.19 → 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":"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","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 {
 

package/lib/molecule/cm-popin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/cm-popin/index.js"],"names":[],"mappings":";AA4CA,kDAqRC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/cm-popin/index.js"],"names":[],"mappings":";AA4CA,kDA2RC"}

package/lib/molecule/cm-popin/index.js

@@ -226,7 +226,12 @@ const CMPopin = props => {
       className: _style.default.contentSection
     }, renderContentTitle(), descriptionText ? /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.descriptionText
-    }, descriptionText) : null), link ? /*#__PURE__*/_react.default.createElement(_link.default, link) : null);
+      // eslint-disable-next-line react/no-danger
+      ,
+      dangerouslySetInnerHTML: {
+        __html: descriptionText
+      }
+    }) : null), link ? /*#__PURE__*/_react.default.createElement(_link.default, link) : null);
   };
   const renderButtons = () => {
     if (!firstButton && !secondButton && !thirdButton) return null;

package/lib/molecule/cm-popin/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_novaIcons","_map","_interopRequireDefault","_isEmpty","_classnames","_provider","_buttonLink","_buttonLinkIcon","_inputSwitch","_title","_cardsGrid","_listItems","_link","_icon","_style","_types","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","LOGO","AlertDiamond","WindowUpload","MoonRocket","CheckCircle1","AlertIcon","IconType","lockedContent","createElement","NovaCompositionCoorpacademyPadlock","className","style","lockIcon","fileZipped","filesListIconContainer","NovaSolidFilesBasicFileLines","filesListIcon","CMPopin","props","content","mode","firstButton","secondButton","onClose","header","icon","backgroundImageUrl","descriptionText","thirdButton","cookieTitle","descriptionBtnTxt","listBtnSwicth","items","link","backgroundImageStyle","backgroundImage","backgroundSize","handleCloseButton","useMemo","nodeRef","useRef","useEffect","closePopin","current","contains","target","handleKeyDown","key","document","addEventListener","removeEventListener","wrapperPopinStyle","classNames","popin","popinCookie","popinFilesList","popinItems","buildIcon","LogoComponent","isEmpty","buildHeader","title","headerIcon","TopTitleIcon","Fragment","headerContent","headerBackground","src","cookieHeader","cookieIconContainer","NovaLineSettingsCookie","cookieIcon","renderHeader","close","onCloseButton","onClick","size","popinHeader","getClassBtnSwitch","index","btnList","firstBtnSwitchContainer","lastBtnSwitchContainer","singleSwitchContainer","renderBtnSwitch","map","convert","cap","el","type","value","onChange","titlePosition","theme","details","requiredSelection","disabled","id","dataName","renderItems","list","itemsContainer","filesListContainer","renderContent","isCookieOrInformations","renderContentTitle","message","dangerouslySetInnerHTML","__html","cookieTitleContainer","titleContainer","contentSection","renderButtons","buttonContainer","largeButton","button","handleOnclick","background","ref","descriptionBtn","propTypes","process","env","NODE_ENV","contextTypes","translate","Provider","childContextTypes","_default","exports"],"sources":["../../../src/molecule/cm-popin/index.js"],"sourcesContent":["import React, {useRef, useEffect, useMemo} from 'react';\nimport {\n  NovaSolidInterfaceFeedbackInterfaceAlertDiamond as AlertDiamond,\n  NovaSolidApplicationsWindowUpload3 as WindowUpload,\n  NovaLineSettingsCookie as Cookie,\n  NovaSolidSpaceMoonRocket as MoonRocket,\n  NovaCompositionCoorpacademyPadlock as LockIcon,\n  NovaLineStatusCheckCircle1 as CheckCircle1,\n  NovaSolidFilesBasicFileLines as FileLinesIcon,\n  NovaSolidInterfaceFeedbackInterfaceAlertRounded as AlertIcon\n} from '@coorpacademy/nova-icons';\nimport map from 'lodash/fp/map';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport classNames from 'classnames';\nimport Provider from '../../atom/provider';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport InputSwitch from '../../atom/input-switch';\nimport Title from '../../atom/title';\nimport CardsGrid from '../../organism/cards-grid';\nimport ListItems from '../../organism/list-items';\nimport Link from '../../atom/link';\nimport Icon from '../../atom/icon';\nimport style from './style.css';\nimport propTypes from './types';\n\n// DEPRECATED\nconst LOGO = {\n  AlertDiamond,\n  WindowUpload,\n  MoonRocket,\n  CheckCircle1,\n  AlertIcon\n};\n\nconst IconType = {\n  lockedContent: <LockIcon className={style.lockIcon} />,\n  fileZipped: (\n    <div className={style.filesListIconContainer}>\n      <FileLinesIcon className={style.filesListIcon} />\n    </div>\n  )\n};\n\nconst CMPopin = props => {\n  const {\n    content,\n    mode = 'alert',\n    firstButton,\n    secondButton,\n    onClose,\n    header,\n    icon,\n    backgroundImageUrl,\n    descriptionText,\n    thirdButton,\n    cookieTitle,\n    descriptionBtnTxt,\n    listBtnSwicth,\n    items,\n    link\n  } = props;\n\n  const backgroundImageStyle = backgroundImageUrl\n    ? {\n        backgroundImage: `url(${backgroundImageUrl})`,\n        backgroundSize: 'cover'\n      }\n    : null;\n  const handleCloseButton = useMemo(() => () => onClose(), [onClose]);\n  const nodeRef = useRef(null);\n  useEffect(() => {\n    if (mode === 'items') {\n      const closePopin = e => {\n        if (nodeRef && nodeRef.current && !nodeRef.current.contains(e.target)) {\n          handleCloseButton();\n        }\n      };\n      const handleKeyDown = e => {\n        if (e?.key === 'Escape') {\n          handleCloseButton();\n        }\n      };\n      document.addEventListener('click', closePopin);\n      document.addEventListener('touchstart', closePopin);\n      document.addEventListener('keydown', handleKeyDown);\n      return () => {\n        document.removeEventListener('click', closePopin);\n        document.removeEventListener('touchstart', closePopin);\n        document.removeEventListener('keydown', handleKeyDown);\n      };\n    }\n  }, [handleCloseButton, mode, onClose]);\n\n  const wrapperPopinStyle = classNames(\n    style.popin,\n    mode === 'cookie' && style.popinCookie,\n    mode === 'list' && style.popinFilesList,\n    mode === 'items' && style.popinItems\n  );\n\n  const buildIcon = () => {\n    if (typeof icon === 'string') {\n      const LogoComponent = LOGO[icon];\n      return LogoComponent ? <LogoComponent className={style.icon} /> : null;\n    }\n\n    return !isEmpty(icon) ? <Icon {...icon} className={style.icon} /> : null;\n  };\n\n  const buildHeader = () => {\n    if (header) {\n      const {title, headerIcon, backgroundImage} = header;\n      const TopTitleIcon = IconType[headerIcon];\n\n      return (\n        <>\n          {title ? (\n            <div className={style.headerContent}>\n              {TopTitleIcon}\n              <Title {...title} />\n            </div>\n          ) : null}\n          {backgroundImage ? (\n            <img className={style.headerBackground} src={backgroundImage} />\n          ) : null}\n        </>\n      );\n    }\n\n    if (mode === 'cookie')\n      return (\n        <div className={style.cookieHeader}>\n          <div className={style.cookieIconContainer}>\n            <Cookie className={style.cookieIcon} />\n          </div>\n          <div className={style.cookieTitle}>{cookieTitle}</div>\n        </div>\n      );\n  };\n\n  const renderHeader = () => {\n    const headerContent = buildHeader();\n    const close = onClose ? (\n      <div className={style.onCloseButton}>\n        <ButtonLinkIcon\n          onClick={handleCloseButton}\n          data-name={'close-icon'}\n          aria-label={'close-icon'}\n          size=\"small\"\n          icon=\"close\"\n        />\n      </div>\n    ) : null;\n\n    if (isEmpty(headerContent) && isEmpty(close)) return null;\n\n    return (\n      <header className={style.popinHeader}>\n        {headerContent}\n        {close}\n      </header>\n    );\n  };\n\n  const getClassBtnSwitch = (index, btnList) => {\n    switch (index) {\n      case 0:\n        return style.firstBtnSwitchContainer;\n      case btnList.length - 1:\n        return style.lastBtnSwitchContainer;\n      default:\n        return style.singleSwitchContainer;\n    }\n  };\n\n  const renderBtnSwitch = () => {\n    return map.convert({cap: false})((el, index) => {\n      const {\n        type,\n        title,\n        value,\n        onChange,\n        titlePosition,\n        theme,\n        details,\n        requiredSelection,\n        disabled,\n        id,\n        'data-name': dataName\n      } = el;\n      return (\n        <div key={index} className={getClassBtnSwitch(index, listBtnSwicth)}>\n          <InputSwitch\n            {...{\n              type,\n              title,\n              value,\n              onChange,\n              titlePosition,\n              theme,\n              details,\n              requiredSelection,\n              disabled,\n              id,\n              'data-name': dataName\n            }}\n          />\n        </div>\n      );\n    })(listBtnSwicth);\n  };\n\n  const renderItems = () => {\n    if (isEmpty(items)) return null;\n    const {type, list} = items;\n\n    if (type === 'content')\n      return (\n        <div className={style.itemsContainer} data-name={'cm-popin-cards'}>\n          <CardsGrid {...list} />\n        </div>\n      );\n    if (type === 'list')\n      return (\n        <div className={style.filesListContainer}>\n          <ListItems {...list} />\n        </div>\n      );\n\n    return null;\n  };\n\n  const renderContent = () => {\n    if (mode === 'items' || mode === 'list') return;\n\n    const isCookieOrInformations = mode === 'cookie' || mode === 'information';\n    const renderContentTitle = () => {\n      if (!content) return null;\n\n      if (isCookieOrInformations)\n        return (\n          <p\n            className={mode === 'alert' ? style.content : style.message}\n            data-name={'cm-popin-content'}\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: content}}\n          />\n        );\n\n      return (\n        <div className={mode === 'alert' ? style.content : style.message}>\n          <Title title={content} data-name={'cm-popin-content'} />\n        </div>\n      );\n    };\n\n    return (\n      <div className={isCookieOrInformations ? style.cookieTitleContainer : style.titleContainer}>\n        {buildIcon()}\n        <div className={style.contentSection}>\n          {renderContentTitle()}\n          {descriptionText ? <div className={style.descriptionText}>{descriptionText}</div> : null}\n        </div>\n        {link ? <Link {...link} /> : null}\n      </div>\n    );\n  };\n\n  const renderButtons = () => {\n    if (!firstButton && !secondButton && !thirdButton) return null;\n\n    return (\n      <div className={style.buttonContainer}>\n        {firstButton ? (\n          <div className={firstButton.largeButton ? style.largeButton : style.button}>\n            <ButtonLink\n              {...firstButton}\n              onClick={firstButton.handleOnclick}\n              data-name={'cm-popin-cta'}\n            />\n          </div>\n        ) : null}\n        {secondButton ? (\n          <div className={secondButton.largeButton ? style.largeButton : style.button}>\n            <ButtonLink\n              {...secondButton}\n              onClick={secondButton.handleOnclick}\n              data-name={`cm-popin-cta-${secondButton.type}`}\n            />\n          </div>\n        ) : null}\n        {thirdButton ? (\n          <div className={thirdButton.largeButton ? style.largeButton : style.button}>\n            <ButtonLink\n              {...thirdButton}\n              onClick={thirdButton.handleOnclick}\n              data-name={`cm-popin-cta-${thirdButton.type}`}\n            />\n          </div>\n        ) : null}\n      </div>\n    );\n  };\n\n  return (\n    <div\n      className={mode !== 'cookie' ? style.background : null}\n      style={backgroundImageStyle}\n      data-name={'cm-popin-container'}\n    >\n      <div className={wrapperPopinStyle} ref={nodeRef}>\n        {renderHeader()}\n        {renderContent()}\n        {descriptionBtnTxt ? <div className={style.descriptionBtn}>{descriptionBtnTxt}</div> : null}\n        {renderItems()}\n        {renderBtnSwitch()}\n        {renderButtons()}\n      </div>\n    </div>\n  );\n};\n\nCMPopin.propTypes = propTypes;\nCMPopin.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nexport default CMPopin;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_novaIcons","_map","_interopRequireDefault","_isEmpty","_classnames","_provider","_buttonLink","_buttonLinkIcon","_inputSwitch","_title","_cardsGrid","_listItems","_link","_icon","_style","_types","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","LOGO","AlertDiamond","WindowUpload","MoonRocket","CheckCircle1","AlertIcon","IconType","lockedContent","createElement","NovaCompositionCoorpacademyPadlock","className","style","lockIcon","fileZipped","filesListIconContainer","NovaSolidFilesBasicFileLines","filesListIcon","CMPopin","props","content","mode","firstButton","secondButton","onClose","header","icon","backgroundImageUrl","descriptionText","thirdButton","cookieTitle","descriptionBtnTxt","listBtnSwicth","items","link","backgroundImageStyle","backgroundImage","backgroundSize","handleCloseButton","useMemo","nodeRef","useRef","useEffect","closePopin","current","contains","target","handleKeyDown","key","document","addEventListener","removeEventListener","wrapperPopinStyle","classNames","popin","popinCookie","popinFilesList","popinItems","buildIcon","LogoComponent","isEmpty","buildHeader","title","headerIcon","TopTitleIcon","Fragment","headerContent","headerBackground","src","cookieHeader","cookieIconContainer","NovaLineSettingsCookie","cookieIcon","renderHeader","close","onCloseButton","onClick","size","popinHeader","getClassBtnSwitch","index","btnList","firstBtnSwitchContainer","lastBtnSwitchContainer","singleSwitchContainer","renderBtnSwitch","map","convert","cap","el","type","value","onChange","titlePosition","theme","details","requiredSelection","disabled","id","dataName","renderItems","list","itemsContainer","filesListContainer","renderContent","isCookieOrInformations","renderContentTitle","message","dangerouslySetInnerHTML","__html","cookieTitleContainer","titleContainer","contentSection","renderButtons","buttonContainer","largeButton","button","handleOnclick","background","ref","descriptionBtn","propTypes","process","env","NODE_ENV","contextTypes","translate","Provider","childContextTypes","_default","exports"],"sources":["../../../src/molecule/cm-popin/index.js"],"sourcesContent":["import React, {useRef, useEffect, useMemo} from 'react';\nimport {\n  NovaSolidInterfaceFeedbackInterfaceAlertDiamond as AlertDiamond,\n  NovaSolidApplicationsWindowUpload3 as WindowUpload,\n  NovaLineSettingsCookie as Cookie,\n  NovaSolidSpaceMoonRocket as MoonRocket,\n  NovaCompositionCoorpacademyPadlock as LockIcon,\n  NovaLineStatusCheckCircle1 as CheckCircle1,\n  NovaSolidFilesBasicFileLines as FileLinesIcon,\n  NovaSolidInterfaceFeedbackInterfaceAlertRounded as AlertIcon\n} from '@coorpacademy/nova-icons';\nimport map from 'lodash/fp/map';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport classNames from 'classnames';\nimport Provider from '../../atom/provider';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport InputSwitch from '../../atom/input-switch';\nimport Title from '../../atom/title';\nimport CardsGrid from '../../organism/cards-grid';\nimport ListItems from '../../organism/list-items';\nimport Link from '../../atom/link';\nimport Icon from '../../atom/icon';\nimport style from './style.css';\nimport propTypes from './types';\n\n// DEPRECATED\nconst LOGO = {\n  AlertDiamond,\n  WindowUpload,\n  MoonRocket,\n  CheckCircle1,\n  AlertIcon\n};\n\nconst IconType = {\n  lockedContent: <LockIcon className={style.lockIcon} />,\n  fileZipped: (\n    <div className={style.filesListIconContainer}>\n      <FileLinesIcon className={style.filesListIcon} />\n    </div>\n  )\n};\n\nconst CMPopin = props => {\n  const {\n    content,\n    mode = 'alert',\n    firstButton,\n    secondButton,\n    onClose,\n    header,\n    icon,\n    backgroundImageUrl,\n    descriptionText,\n    thirdButton,\n    cookieTitle,\n    descriptionBtnTxt,\n    listBtnSwicth,\n    items,\n    link\n  } = props;\n\n  const backgroundImageStyle = backgroundImageUrl\n    ? {\n        backgroundImage: `url(${backgroundImageUrl})`,\n        backgroundSize: 'cover'\n      }\n    : null;\n  const handleCloseButton = useMemo(() => () => onClose(), [onClose]);\n  const nodeRef = useRef(null);\n  useEffect(() => {\n    if (mode === 'items') {\n      const closePopin = e => {\n        if (nodeRef && nodeRef.current && !nodeRef.current.contains(e.target)) {\n          handleCloseButton();\n        }\n      };\n      const handleKeyDown = e => {\n        if (e?.key === 'Escape') {\n          handleCloseButton();\n        }\n      };\n      document.addEventListener('click', closePopin);\n      document.addEventListener('touchstart', closePopin);\n      document.addEventListener('keydown', handleKeyDown);\n      return () => {\n        document.removeEventListener('click', closePopin);\n        document.removeEventListener('touchstart', closePopin);\n        document.removeEventListener('keydown', handleKeyDown);\n      };\n    }\n  }, [handleCloseButton, mode, onClose]);\n\n  const wrapperPopinStyle = classNames(\n    style.popin,\n    mode === 'cookie' && style.popinCookie,\n    mode === 'list' && style.popinFilesList,\n    mode === 'items' && style.popinItems\n  );\n\n  const buildIcon = () => {\n    if (typeof icon === 'string') {\n      const LogoComponent = LOGO[icon];\n      return LogoComponent ? <LogoComponent className={style.icon} /> : null;\n    }\n\n    return !isEmpty(icon) ? <Icon {...icon} className={style.icon} /> : null;\n  };\n\n  const buildHeader = () => {\n    if (header) {\n      const {title, headerIcon, backgroundImage} = header;\n      const TopTitleIcon = IconType[headerIcon];\n\n      return (\n        <>\n          {title ? (\n            <div className={style.headerContent}>\n              {TopTitleIcon}\n              <Title {...title} />\n            </div>\n          ) : null}\n          {backgroundImage ? (\n            <img className={style.headerBackground} src={backgroundImage} />\n          ) : null}\n        </>\n      );\n    }\n\n    if (mode === 'cookie')\n      return (\n        <div className={style.cookieHeader}>\n          <div className={style.cookieIconContainer}>\n            <Cookie className={style.cookieIcon} />\n          </div>\n          <div className={style.cookieTitle}>{cookieTitle}</div>\n        </div>\n      );\n  };\n\n  const renderHeader = () => {\n    const headerContent = buildHeader();\n    const close = onClose ? (\n      <div className={style.onCloseButton}>\n        <ButtonLinkIcon\n          onClick={handleCloseButton}\n          data-name={'close-icon'}\n          aria-label={'close-icon'}\n          size=\"small\"\n          icon=\"close\"\n        />\n      </div>\n    ) : null;\n\n    if (isEmpty(headerContent) && isEmpty(close)) return null;\n\n    return (\n      <header className={style.popinHeader}>\n        {headerContent}\n        {close}\n      </header>\n    );\n  };\n\n  const getClassBtnSwitch = (index, btnList) => {\n    switch (index) {\n      case 0:\n        return style.firstBtnSwitchContainer;\n      case btnList.length - 1:\n        return style.lastBtnSwitchContainer;\n      default:\n        return style.singleSwitchContainer;\n    }\n  };\n\n  const renderBtnSwitch = () => {\n    return map.convert({cap: false})((el, index) => {\n      const {\n        type,\n        title,\n        value,\n        onChange,\n        titlePosition,\n        theme,\n        details,\n        requiredSelection,\n        disabled,\n        id,\n        'data-name': dataName\n      } = el;\n      return (\n        <div key={index} className={getClassBtnSwitch(index, listBtnSwicth)}>\n          <InputSwitch\n            {...{\n              type,\n              title,\n              value,\n              onChange,\n              titlePosition,\n              theme,\n              details,\n              requiredSelection,\n              disabled,\n              id,\n              'data-name': dataName\n            }}\n          />\n        </div>\n      );\n    })(listBtnSwicth);\n  };\n\n  const renderItems = () => {\n    if (isEmpty(items)) return null;\n    const {type, list} = items;\n\n    if (type === 'content')\n      return (\n        <div className={style.itemsContainer} data-name={'cm-popin-cards'}>\n          <CardsGrid {...list} />\n        </div>\n      );\n    if (type === 'list')\n      return (\n        <div className={style.filesListContainer}>\n          <ListItems {...list} />\n        </div>\n      );\n\n    return null;\n  };\n\n  const renderContent = () => {\n    if (mode === 'items' || mode === 'list') return;\n\n    const isCookieOrInformations = mode === 'cookie' || mode === 'information';\n    const renderContentTitle = () => {\n      if (!content) return null;\n\n      if (isCookieOrInformations)\n        return (\n          <p\n            className={mode === 'alert' ? style.content : style.message}\n            data-name={'cm-popin-content'}\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: content}}\n          />\n        );\n\n      return (\n        <div className={mode === 'alert' ? style.content : style.message}>\n          <Title title={content} data-name={'cm-popin-content'} />\n        </div>\n      );\n    };\n\n    return (\n      <div className={isCookieOrInformations ? style.cookieTitleContainer : style.titleContainer}>\n        {buildIcon()}\n        <div className={style.contentSection}>\n          {renderContentTitle()}\n          {descriptionText ? (\n            <div\n              className={style.descriptionText}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: descriptionText}}\n            />\n          ) : null}\n        </div>\n        {link ? <Link {...link} /> : null}\n      </div>\n    );\n  };\n\n  const renderButtons = () => {\n    if (!firstButton && !secondButton && !thirdButton) return null;\n\n    return (\n      <div className={style.buttonContainer}>\n        {firstButton ? (\n          <div className={firstButton.largeButton ? style.largeButton : style.button}>\n            <ButtonLink\n              {...firstButton}\n              onClick={firstButton.handleOnclick}\n              data-name={'cm-popin-cta'}\n            />\n          </div>\n        ) : null}\n        {secondButton ? (\n          <div className={secondButton.largeButton ? style.largeButton : style.button}>\n            <ButtonLink\n              {...secondButton}\n              onClick={secondButton.handleOnclick}\n              data-name={`cm-popin-cta-${secondButton.type}`}\n            />\n          </div>\n        ) : null}\n        {thirdButton ? (\n          <div className={thirdButton.largeButton ? style.largeButton : style.button}>\n            <ButtonLink\n              {...thirdButton}\n              onClick={thirdButton.handleOnclick}\n              data-name={`cm-popin-cta-${thirdButton.type}`}\n            />\n          </div>\n        ) : null}\n      </div>\n    );\n  };\n\n  return (\n    <div\n      className={mode !== 'cookie' ? style.background : null}\n      style={backgroundImageStyle}\n      data-name={'cm-popin-container'}\n    >\n      <div className={wrapperPopinStyle} ref={nodeRef}>\n        {renderHeader()}\n        {renderContent()}\n        {descriptionBtnTxt ? <div className={style.descriptionBtn}>{descriptionBtnTxt}</div> : null}\n        {renderItems()}\n        {renderBtnSwitch()}\n        {renderButtons()}\n      </div>\n    </div>\n  );\n};\n\nCMPopin.propTypes = propTypes;\nCMPopin.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nexport default CMPopin;\n"],"mappings":"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","ignoreList":[]}

package/lib/template/app-player/player/slides/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/template/app-player/player/slides/index.js"],"names":[],"mappings":";AA+aA,qEAkBC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA1ID;;uBAyBC;;;;;;;;;;;;;;;;;;;;;;;;;AArPD;;;gBAaC;;;;;;;;;;;;;;AAyDD;;;;gBAEC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAlHD,oEAQC;;;;;;;;;AAgND;;gBAiBC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/GD,qEAaC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/template/app-player/player/slides/index.js"],"names":[],"mappings":";AAibA,qEAkBC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA5ID;;uBAyBC;;;;;;;;;;;;;;;;;;;;;;;;;AArPD;;;gBAaC;;;;;;;;;;;;;;AAyDD;;;;gBAEC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAlHD,oEAQC;;;;;;;;;AAgND;;gBAiBC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/GD,qEAaC"}

package/lib/template/app-player/player/slides/index.js

@@ -360,6 +360,8 @@ const ContentLayout = (props, context) => {
   const ContentType = CONTENT_TYPE[selectedTab];
   const noPaddingRessources = ContentType === MediaContent ? `${_style.default.contentWrapperNoPadding}` : `${_style.default.contentWrapper}`;
   return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.slideWrapper
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: noPaddingRessources,
     "data-name": "slide",
     style: {
@@ -375,7 +377,7 @@ const ContentLayout = (props, context) => {
     }
   }), help && selectedTab === 'answer' && type !== 'qcmDrag' ? /*#__PURE__*/_react.default.createElement(Help, {
     help: help
-  }) : null, /*#__PURE__*/_react.default.createElement(ContentType, props), /*#__PURE__*/_react.default.createElement(ValidateButton, props));
+  }) : null, /*#__PURE__*/_react.default.createElement(ContentType, props), /*#__PURE__*/_react.default.createElement(ValidateButton, props)));
 };
 ContentLayout.contextTypes = {
   translate: _provider.default.childContextTypes.translate,