@coorpacademy/components 11.40.19 → 11.40.21

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/certification-detail/index.js"],"names":[],"mappings":";AAgBA,4EAkIC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/certification-detail/index.js"],"names":[],"mappings":";AAiBA,4EAwIC"}

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

@@ -14,6 +14,7 @@ import { 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 { ContinueLearningButton } from '../skill-detail';
 import ProgressWrapper from '../../molecule/progress-wrapper';
@@ -33,7 +34,8 @@ const CertificationDetail = (props, context) => {
     diplomaUrl,
     badgeUrl,
     search,
-    metrics = {}
+    metrics = {},
+    popinWithCards
   } = props;
   const descriptionRef = useRef(null);
   const {
@@ -126,7 +128,9 @@ const CertificationDetail = (props, context) => {
     filters: filters,
     "data-name": "certification-courses",
     search: search
-  })));
+  })), popinWithCards ? /*#__PURE__*/React.createElement("div", {
+    className: style.popinWithCards
+  }, /*#__PURE__*/React.createElement(CMPopin, popinWithCards)) : null);
 };
 CertificationDetail.contextTypes = {
   skin: Provider.childContextTypes.skin,
@@ -158,7 +162,8 @@ CertificationDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   search: PropTypes.shape({
     oldValue: PropTypes.string,
     onChange: PropTypes.func
-  })
+  }),
+  popinWithCards: PropTypes.shape(CMPopin.propTypes)
 } : {};
 export default CertificationDetail;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useRef","useState","useMemo","PropTypes","classnames","Markdown","Provider","Tag","SelectOptionPropTypes","ButtonLinkIcon","Icon","CardsGrid","AllCourses","ContinueLearningButton","ProgressWrapper","style","CertificationDetail","props","context","certificationRef","title","tag","description","certificationCourses","ongoingCoursesAvailable","filters","onBackClick","onContinueLearningClick","logoUrl","diplomaUrl","badgeUrl","search","metrics","descriptionRef","translate","progression","mandatoryModules","stars","totalModules","totalContents","_pipe","_getOr","_size","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","createElement","ref","className","truncate","completedModules","_round","backgroundContainer","container","_isNil","faIcon","onClick","backButton","tooltipPlacement","ctaContainer","logoContainer","logo","src","label","Fragment","showMoreWrapper","iconName","size","faSize","wrapperSize","contentStats","count","subtitle","sections","_compact","type","downloadUrl","content","contextTypes","skin","childContextTypes","propTypes","process","env","NODE_ENV","string","isRequired","shape","number","bool","onChange","func","options","arrayOf","oldValue"],"sources":["../../../src/template/certification-detail/index.js"],"sourcesContent":["import React, {useCallback, useEffect, useRef, useState, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {compact, round, isNil, size, pipe, getOr} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport {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 {ContinueLearningButton} from '../skill-detail';\nimport ProgressWrapper from '../../molecule/progress-wrapper';\nimport style from './style.css';\n\nconst CertificationDetail = (props, context) => {\n  const {\n    certificationRef,\n    title,\n    tag,\n    description,\n    certificationCourses,\n    ongoingCoursesAvailable,\n    filters,\n    onBackClick,\n    onContinueLearningClick,\n    logoUrl,\n    diplomaUrl,\n    badgeUrl,\n    search,\n    metrics = {}\n  } = props;\n  const descriptionRef = useRef(null);\n  const {translate} = context;\n\n  const {\n    progression,\n    mandatoryModules,\n    stars,\n    totalModules,\n    totalContents = pipe(getOr([], 'list'), size)(certificationCourses)\n  } = metrics;\n\n  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  useEffect(() => {\n    if (descriptionRef.current) {\n      const {clientHeight = 0, scrollHeight = 0} = descriptionRef.current;\n      setIsDescriptionTruncated(scrollHeight > clientHeight);\n    }\n  }, [description]);\n\n  const Description = useCallback(() => {\n    return (\n      <div\n        ref={descriptionRef}\n        className={classnames(style.description, !showMore && style.truncate)}\n      >\n        <Markdown>{description}</Markdown>\n      </div>\n    );\n  }, [showMore, description]);\n\n  const completedModules = useMemo(\n    () => round((mandatoryModules * progression) / 100),\n    [mandatoryModules, progression]\n  );\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={certificationRef}>\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.logoContainer}>\n            <img className={style.logo} src={logoUrl} />\n          </div>\n          <div>\n            <Tag label={tag} />\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.contentStats}>\n              <span>{`${translate('modules', {count: totalModules})}`}</span>\n            </div>\n            <ContinueLearningButton\n              ongoingCoursesAvailable={ongoingCoursesAvailable}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        <ProgressWrapper\n          title={translate('your_progress')}\n          subtitle={translate('certification_progress_wrapper_subtitle')}\n          progression={progression}\n          completedModules={completedModules}\n          mandatoryModules={mandatoryModules}\n          sections={compact([\n            diplomaUrl && {\n              type: 'diploma',\n              downloadUrl: diplomaUrl\n            },\n            badgeUrl && {\n              type: 'badge',\n              downloadUrl: badgeUrl\n            },\n            stars && {\n              type: 'stars',\n              stars\n            }\n          ])}\n        />\n        <AllCourses\n          content={certificationCourses}\n          totalContents={totalContents}\n          filters={filters}\n          data-name=\"certification-courses\"\n          search={search}\n        />\n      </div>\n    </div>\n  );\n};\n\nCertificationDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nCertificationDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  tag: PropTypes.string,\n  certificationRef: PropTypes.string.isRequired,\n  description: PropTypes.string.isRequired,\n  logoUrl: PropTypes.string,\n  metrics: PropTypes.shape({\n    progression: PropTypes.number,\n    stars: PropTypes.number,\n    mandatoryModules: PropTypes.number,\n    totalModules: PropTypes.number,\n    totalContents: PropTypes.number\n  }),\n  diplomaUrl: PropTypes.string,\n  badgeUrl: PropTypes.string,\n  ongoingCoursesAvailable: PropTypes.bool,\n  certificationCourses: 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  onContinueLearningClick: PropTypes.func,\n  search: PropTypes.shape({\n    oldValue: PropTypes.string,\n    onChange: PropTypes.func\n  })\n};\n\nexport default CertificationDetail;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useRef","useState","useMemo","PropTypes","classnames","Markdown","Provider","Tag","SelectOptionPropTypes","ButtonLinkIcon","Icon","CardsGrid","CMPopin","AllCourses","ContinueLearningButton","ProgressWrapper","style","CertificationDetail","props","context","certificationRef","title","tag","description","certificationCourses","ongoingCoursesAvailable","filters","onBackClick","onContinueLearningClick","logoUrl","diplomaUrl","badgeUrl","search","metrics","popinWithCards","descriptionRef","translate","progression","mandatoryModules","stars","totalModules","totalContents","_pipe","_getOr","_size","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","createElement","ref","className","truncate","completedModules","_round","backgroundContainer","container","_isNil","faIcon","onClick","backButton","tooltipPlacement","ctaContainer","logoContainer","logo","src","label","Fragment","showMoreWrapper","iconName","size","faSize","wrapperSize","contentStats","count","subtitle","sections","_compact","type","downloadUrl","content","contextTypes","skin","childContextTypes","propTypes","process","env","NODE_ENV","string","isRequired","shape","number","bool","onChange","func","options","arrayOf","oldValue"],"sources":["../../../src/template/certification-detail/index.js"],"sourcesContent":["import React, {useCallback, useEffect, useRef, useState, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {compact, round, isNil, size, pipe, getOr} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport {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 {ContinueLearningButton} from '../skill-detail';\nimport ProgressWrapper from '../../molecule/progress-wrapper';\nimport style from './style.css';\n\nconst CertificationDetail = (props, context) => {\n  const {\n    certificationRef,\n    title,\n    tag,\n    description,\n    certificationCourses,\n    ongoingCoursesAvailable,\n    filters,\n    onBackClick,\n    onContinueLearningClick,\n    logoUrl,\n    diplomaUrl,\n    badgeUrl,\n    search,\n    metrics = {},\n    popinWithCards\n  } = props;\n  const descriptionRef = useRef(null);\n  const {translate} = context;\n\n  const {\n    progression,\n    mandatoryModules,\n    stars,\n    totalModules,\n    totalContents = pipe(getOr([], 'list'), size)(certificationCourses)\n  } = metrics;\n\n  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  useEffect(() => {\n    if (descriptionRef.current) {\n      const {clientHeight = 0, scrollHeight = 0} = descriptionRef.current;\n      setIsDescriptionTruncated(scrollHeight > clientHeight);\n    }\n  }, [description]);\n\n  const Description = useCallback(() => {\n    return (\n      <div\n        ref={descriptionRef}\n        className={classnames(style.description, !showMore && style.truncate)}\n      >\n        <Markdown>{description}</Markdown>\n      </div>\n    );\n  }, [showMore, description]);\n\n  const completedModules = useMemo(\n    () => round((mandatoryModules * progression) / 100),\n    [mandatoryModules, progression]\n  );\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={certificationRef}>\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.logoContainer}>\n            <img className={style.logo} src={logoUrl} />\n          </div>\n          <div>\n            <Tag label={tag} />\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.contentStats}>\n              <span>{`${translate('modules', {count: totalModules})}`}</span>\n            </div>\n            <ContinueLearningButton\n              ongoingCoursesAvailable={ongoingCoursesAvailable}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        <ProgressWrapper\n          title={translate('your_progress')}\n          subtitle={translate('certification_progress_wrapper_subtitle')}\n          progression={progression}\n          completedModules={completedModules}\n          mandatoryModules={mandatoryModules}\n          sections={compact([\n            diplomaUrl && {\n              type: 'diploma',\n              downloadUrl: diplomaUrl\n            },\n            badgeUrl && {\n              type: 'badge',\n              downloadUrl: badgeUrl\n            },\n            stars && {\n              type: 'stars',\n              stars\n            }\n          ])}\n        />\n        <AllCourses\n          content={certificationCourses}\n          totalContents={totalContents}\n          filters={filters}\n          data-name=\"certification-courses\"\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\nCertificationDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nCertificationDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  tag: PropTypes.string,\n  certificationRef: PropTypes.string.isRequired,\n  description: PropTypes.string.isRequired,\n  logoUrl: PropTypes.string,\n  metrics: PropTypes.shape({\n    progression: PropTypes.number,\n    stars: PropTypes.number,\n    mandatoryModules: PropTypes.number,\n    totalModules: PropTypes.number,\n    totalContents: PropTypes.number\n  }),\n  diplomaUrl: PropTypes.string,\n  badgeUrl: PropTypes.string,\n  ongoingCoursesAvailable: PropTypes.bool,\n  certificationCourses: 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  onContinueLearningClick: PropTypes.func,\n  search: PropTypes.shape({\n    oldValue: PropTypes.string,\n    onChange: PropTypes.func\n  }),\n  popinWithCards: PropTypes.shape(CMPopin.propTypes)\n};\n\nexport default CertificationDetail;\n"],"mappings":"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","ignoreList":[]}

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

@@ -107,6 +107,11 @@
   color: cm_grey_400;
 }
 
+.popinWithCards {
+  position: relative;
+  z-index: 7;
+}
+
 @media tablet {
   .ctaContainer {
     flex-direction: column;