@coorpacademy/components 11.32.42 → 11.32.44

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DESCRIPTION_BREAKPOINT","CertificationDetail","props","context","certificationRef","title","description","certificationCourses","ongoingCoursesAvailable","filters","onBackClick","onContinueLearningClick","metrics","logoUrl","diplomaUrl","badgeUrl","translate","progression","mandatoryModules","stars","totalModules","showMore","setShowMore","useState","handleShowMore","useCallback","Description","classnames","style","truncate","completedModules","useMemo","backgroundContainer","container","backButton","ctaContainer","logoContainer","logo","length","showMoreWrapper","faSize","wrapperSize","contentStats","type","downloadUrl","contextTypes","skin","Provider","childContextTypes","propTypes","PropTypes","string","isRequired","shape","number","bool","CardsGrid","onChange","func","options","arrayOf","SelectOptionPropTypes"],"sources":["../../../src/template/certification-detail/index.js"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {compact, lowerCase, round, isNil} 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 DESCRIPTION_BREAKPOINT = 382;\n\nconst CertificationDetail = (props, context) => {\n  const {\n    certificationRef,\n    title,\n    description,\n    certificationCourses,\n    ongoingCoursesAvailable,\n    filters,\n    onBackClick,\n    onContinueLearningClick,\n    metrics,\n    logoUrl,\n    diplomaUrl,\n    badgeUrl\n  } = props;\n  const {translate} = context;\n  const {progression, mandatoryModules, stars, totalModules} = metrics;\n\n  const [showMore, setShowMore] = useState(false);\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        <Markdown>{description}</Markdown>\n      </div>\n    );\n  }, [showMore, description]);\n\n  const 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=\"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={translate('certification')} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {description.length >= DESCRIPTION_BREAKPOINT ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {translate(showMore ? 'Show less' : 'Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{faSize: 14, wrapperSize: 16}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n            <div className={style.contentStats}>\n              <span>{`${totalModules} ${lowerCase(translate('modules'))}`}</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            {\n              type: 'diploma',\n              downloadUrl: diplomaUrl\n            },\n            badgeUrl && {\n              type: 'badge',\n              downloadUrl: badgeUrl\n            },\n            {\n              type: 'stars',\n              stars\n            }\n          ])}\n        />\n        <AllCourses\n          content={certificationCourses}\n          filters={filters}\n          data-name=\"certification-courses\"\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  certificationRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\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  }),\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};\n\nexport default CertificationDetail;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["CertificationDetail","props","context","certificationRef","title","description","certificationCourses","ongoingCoursesAvailable","filters","onBackClick","onContinueLearningClick","metrics","logoUrl","diplomaUrl","badgeUrl","descriptionRef","useRef","translate","progression","mandatoryModules","stars","totalModules","isDescriptionTruncated","setIsDescriptionTruncated","useState","showMore","setShowMore","handleShowMore","useCallback","useEffect","current","clientHeight","scrollHeight","Description","classnames","style","truncate","completedModules","useMemo","backgroundContainer","container","backButton","ctaContainer","logoContainer","logo","showMoreWrapper","faSize","wrapperSize","contentStats","type","downloadUrl","contextTypes","skin","Provider","childContextTypes","propTypes","PropTypes","string","isRequired","shape","number","bool","CardsGrid","onChange","func","options","arrayOf","SelectOptionPropTypes"],"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, lowerCase, round, isNil} 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    description,\n    certificationCourses,\n    ongoingCoursesAvailable,\n    filters,\n    onBackClick,\n    onContinueLearningClick,\n    metrics,\n    logoUrl,\n    diplomaUrl,\n    badgeUrl\n  } = props;\n  const descriptionRef = useRef(null);\n  const {translate} = context;\n  const {progression, mandatoryModules, stars, totalModules} = 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={translate('certification')} />\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>{`${totalModules} ${lowerCase(translate('modules'))}`}</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            {\n              type: 'diploma',\n              downloadUrl: diplomaUrl\n            },\n            badgeUrl && {\n              type: 'badge',\n              downloadUrl: badgeUrl\n            },\n            {\n              type: 'stars',\n              stars\n            }\n          ])}\n        />\n        <AllCourses\n          content={certificationCourses}\n          filters={filters}\n          data-name=\"certification-courses\"\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  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  }),\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};\n\nexport default CertificationDetail;\n"],"mappings":"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"}

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

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

package/lib/template/certifications/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/certifications/index.js"],"names":[],"mappings":";AASA,uEAoEC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/certifications/index.js"],"names":[],"mappings":";AASA,uEAsEC"}

package/lib/template/certifications/index.js

@@ -45,6 +45,8 @@ const Certifications = (props, context) => {
     setShowCompleted(!showCompleted);
   }, [showCompleted, setShowCompleted]);
   return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.backgroudnContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.container,
     "data-name": "Certifications"
   }, /*#__PURE__*/_react.default.createElement(_title.default, {
@@ -85,7 +87,7 @@ const Certifications = (props, context) => {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: certification.label
     }, /*#__PURE__*/_react.default.createElement(_certificationCard.default, certification));
-  })));
+  }))));
 };
 
 Certifications.contextTypes = {

package/lib/template/certifications/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Certifications","props","context","certifications","sorting","translate","showCompleted","setShowCompleted","useState","sortView","undefined","handleShowCompletedToggle","useCallback","style","container","iconName","iconColor","borderRadius","backgroundColor","sortSectionWrapper","certificatesCount","length","sortSection","sortWrapper","certificateList","map","certification","progress","label","contextTypes","Provider","childContextTypes","propTypes","PropTypes","arrayOf","shape","string","goal","title","condition","nbDone","number","imgUrl","onClick","func","Select"],"sources":["../../../src/template/certifications/index.js"],"sourcesContent":["import React, {useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport Provider from '../../atom/provider';\nimport Title from '../../atom/title';\nimport Select from '../../atom/select';\nimport InputSwitch from '../../atom/input-switch';\nimport CertificationCard from '../../molecule/certification-card';\nimport style from './style.css';\n\nconst Certifications = (props, context) => {\n  const {certifications, sorting} = props;\n  const {translate} = context;\n\n  const [showCompleted, setShowCompleted] = useState(true);\n\n  const sortView =\n    sorting !== undefined ? (\n      <div data-name=\"choice\">\n        <Select {...sorting} aria-label=\"All courses sort\" />\n      </div>\n    ) : null;\n\n  const handleShowCompletedToggle = useCallback(() => {\n    setShowCompleted(!showCompleted);\n  }, [showCompleted, setShowCompleted]);\n\n  return (\n    <div className={style.container} data-name=\"Certifications\">\n      <Title\n        title={translate('certificates')}\n        subtitle={translate('certificates_subtitle')}\n        type=\"form-group\"\n        titleSize=\"standard-light-weight\"\n        subtitleSize=\"standard-without-margin\"\n        icon={{\n          iconName: 'wreath-laurel',\n          iconColor: '#B87A00',\n          borderRadius: '12px',\n          backgroundColor: '#FFEECC'\n        }}\n      />\n      <div className={style.sortSectionWrapper}>\n        <div className={style.certificatesCount}>\n          {`${certifications.length} ${translate('certificate(s)')}`}\n        </div>\n        <div className={style.sortSection}>\n          <InputSwitch\n            id={'show-completed-courses-switch'}\n            type=\"switch\"\n            name={translate('show_completed')}\n            title={translate('show_completed')}\n            aria-label={'Show completed courses aria label'}\n            value={showCompleted}\n            onChange={handleShowCompletedToggle}\n          />\n          {sorting ? (\n            <div className={style.sortWrapper}>\n              {translate('sort_by')}\n              {sortView}\n            </div>\n          ) : null}\n        </div>\n      </div>\n      <div className={style.certificateList}>\n        {certifications.map(certification => {\n          if (!showCompleted && certification.progress === 100) {\n            return null;\n          }\n          return (\n            <div key={certification.label}>\n              <CertificationCard {...certification} />\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nCertifications.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nCertifications.propTypes = {\n  certifications: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      goal: PropTypes.shape({\n        title: PropTypes.string,\n        condition: PropTypes.shape({\n          nbDone: PropTypes.number\n        })\n      }),\n      progress: PropTypes.number,\n      imgUrl: PropTypes.string,\n      onClick: PropTypes.func\n    })\n  ),\n  sorting: PropTypes.shape(Select.propTypes)\n};\n\nexport default Certifications;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Certifications","props","context","certifications","sorting","translate","showCompleted","setShowCompleted","useState","sortView","undefined","handleShowCompletedToggle","useCallback","style","backgroudnContainer","container","iconName","iconColor","borderRadius","backgroundColor","sortSectionWrapper","certificatesCount","length","sortSection","sortWrapper","certificateList","map","certification","progress","label","contextTypes","Provider","childContextTypes","propTypes","PropTypes","arrayOf","shape","string","goal","title","condition","nbDone","number","imgUrl","onClick","func","Select"],"sources":["../../../src/template/certifications/index.js"],"sourcesContent":["import React, {useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport Provider from '../../atom/provider';\nimport Title from '../../atom/title';\nimport Select from '../../atom/select';\nimport InputSwitch from '../../atom/input-switch';\nimport CertificationCard from '../../molecule/certification-card';\nimport style from './style.css';\n\nconst Certifications = (props, context) => {\n  const {certifications, sorting} = props;\n  const {translate} = context;\n\n  const [showCompleted, setShowCompleted] = useState(true);\n\n  const sortView =\n    sorting !== undefined ? (\n      <div data-name=\"choice\">\n        <Select {...sorting} aria-label=\"All courses sort\" />\n      </div>\n    ) : null;\n\n  const handleShowCompletedToggle = useCallback(() => {\n    setShowCompleted(!showCompleted);\n  }, [showCompleted, setShowCompleted]);\n\n  return (\n    <div className={style.backgroudnContainer}>\n      <div className={style.container} data-name=\"Certifications\">\n        <Title\n          title={translate('certificates')}\n          subtitle={translate('certificates_subtitle')}\n          type=\"form-group\"\n          titleSize=\"standard-light-weight\"\n          subtitleSize=\"standard-without-margin\"\n          icon={{\n            iconName: 'wreath-laurel',\n            iconColor: '#B87A00',\n            borderRadius: '12px',\n            backgroundColor: '#FFEECC'\n          }}\n        />\n        <div className={style.sortSectionWrapper}>\n          <div className={style.certificatesCount}>\n            {`${certifications.length} ${translate('certificate(s)')}`}\n          </div>\n          <div className={style.sortSection}>\n            <InputSwitch\n              id={'show-completed-courses-switch'}\n              type=\"switch\"\n              name={translate('show_completed')}\n              title={translate('show_completed')}\n              aria-label={'Show completed courses aria label'}\n              value={showCompleted}\n              onChange={handleShowCompletedToggle}\n            />\n            {sorting ? (\n              <div className={style.sortWrapper}>\n                {translate('sort_by')}\n                {sortView}\n              </div>\n            ) : null}\n          </div>\n        </div>\n        <div className={style.certificateList}>\n          {certifications.map(certification => {\n            if (!showCompleted && certification.progress === 100) {\n              return null;\n            }\n            return (\n              <div key={certification.label}>\n                <CertificationCard {...certification} />\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nCertifications.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nCertifications.propTypes = {\n  certifications: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      goal: PropTypes.shape({\n        title: PropTypes.string,\n        condition: PropTypes.shape({\n          nbDone: PropTypes.number\n        })\n      }),\n      progress: PropTypes.number,\n      imgUrl: PropTypes.string,\n      onClick: PropTypes.func\n    })\n  ),\n  sorting: PropTypes.shape(Select.propTypes)\n};\n\nexport default Certifications;\n"],"mappings":"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"}

package/lib/template/certifications/style.css

@@ -7,13 +7,20 @@
 @value cm_grey_200 from colors;
 @value cm_grey_400 from colors;
 @value cm_grey_500 from colors;
+@value white from colors;
+
+.backgroudnContainer {
+  background-color: white;
+  min-height: 100%;
+  width: 100%;
+}
 
 .container {
   font-family: "Gilroy";
   font-style: normal;
   max-width: 1080px;
   margin: auto;
-  margin-top: 48px;
+  padding-top: 48px;
 }
 
 .sortSection {

package/lib/template/common/dashboard/index.d.ts

@@ -141,6 +141,7 @@ declare namespace Dashboard {
                         items: PropTypes.Requireable<(PropTypes.InferProps<{
                             title: PropTypes.Validator<string>;
                             subtitle: PropTypes.Requireable<string>;
+                            provider: PropTypes.Requireable<string>;
                             selected: PropTypes.Requireable<boolean>;
                             selectedColor: PropTypes.Requireable<string>;
                             dataColumns: PropTypes.Requireable<(PropTypes.InferProps<{
@@ -193,6 +194,17 @@ declare namespace Dashboard {
                             'aria-label': PropTypes.Requireable<string>;
                             contentType: PropTypes.Requireable<string>;
                             id: PropTypes.Requireable<string>;
+                            leftIcon: PropTypes.Requireable<PropTypes.InferProps<{
+                                iconName: PropTypes.Requireable<string>;
+                                iconColor: PropTypes.Requireable<string>;
+                                backgroundColor: PropTypes.Requireable<string>;
+                                borderRadius: PropTypes.Requireable<string>;
+                                preset: PropTypes.Requireable<string>;
+                                gradientBackground: PropTypes.Requireable<boolean>;
+                                size: PropTypes.Requireable<number>;
+                                wrapperSize: PropTypes.Requireable<number>;
+                            }>>;
+                            editAsIcon: PropTypes.Requireable<boolean>;
                         }> | null | undefined)[]>;
                         type: PropTypes.Requireable<string>;
                         itemType: PropTypes.Requireable<string>;
@@ -438,6 +450,7 @@ declare namespace Dashboard {
                         items: PropTypes.Requireable<(PropTypes.InferProps<{
                             title: PropTypes.Validator<string>;
                             subtitle: PropTypes.Requireable<string>;
+                            provider: PropTypes.Requireable<string>;
                             selected: PropTypes.Requireable<boolean>;
                             selectedColor: PropTypes.Requireable<string>;
                             dataColumns: PropTypes.Requireable<(PropTypes.InferProps<{
@@ -490,6 +503,17 @@ declare namespace Dashboard {
                             'aria-label': PropTypes.Requireable<string>;
                             contentType: PropTypes.Requireable<string>;
                             id: PropTypes.Requireable<string>;
+                            leftIcon: PropTypes.Requireable<PropTypes.InferProps<{
+                                iconName: PropTypes.Requireable<string>;
+                                iconColor: PropTypes.Requireable<string>;
+                                backgroundColor: PropTypes.Requireable<string>;
+                                borderRadius: PropTypes.Requireable<string>;
+                                preset: PropTypes.Requireable<string>;
+                                gradientBackground: PropTypes.Requireable<boolean>;
+                                size: PropTypes.Requireable<number>;
+                                wrapperSize: PropTypes.Requireable<number>;
+                            }>>;
+                            editAsIcon: PropTypes.Requireable<boolean>;
                         }> | null | undefined)[]>;
                         type: PropTypes.Requireable<string>;
                         itemType: PropTypes.Requireable<string>;

package/lib/template/common/search-page/index.d.ts

@@ -322,6 +322,7 @@ declare namespace SearchPage {
                         items: PropTypes.Requireable<(PropTypes.InferProps<{
                             title: PropTypes.Validator<string>;
                             subtitle: PropTypes.Requireable<string>;
+                            provider: PropTypes.Requireable<string>;
                             selected: PropTypes.Requireable<boolean>;
                             selectedColor: PropTypes.Requireable<string>;
                             dataColumns: PropTypes.Requireable<(PropTypes.InferProps<{
@@ -374,6 +375,17 @@ declare namespace SearchPage {
                             'aria-label': PropTypes.Requireable<string>;
                             contentType: PropTypes.Requireable<string>;
                             id: PropTypes.Requireable<string>;
+                            leftIcon: PropTypes.Requireable<PropTypes.InferProps<{
+                                iconName: PropTypes.Requireable<string>;
+                                iconColor: PropTypes.Requireable<string>;
+                                backgroundColor: PropTypes.Requireable<string>;
+                                borderRadius: PropTypes.Requireable<string>;
+                                preset: PropTypes.Requireable<string>;
+                                gradientBackground: PropTypes.Requireable<boolean>;
+                                size: PropTypes.Requireable<number>;
+                                wrapperSize: PropTypes.Requireable<number>;
+                            }>>;
+                            editAsIcon: PropTypes.Requireable<boolean>;
                         }> | null | undefined)[]>;
                         type: PropTypes.Requireable<string>;
                         itemType: PropTypes.Requireable<string>;

package/lib/template/external-course/index.d.ts

@@ -159,6 +159,7 @@ declare namespace ExternalCourse {
                         items: PropTypes.Requireable<(PropTypes.InferProps<{
                             title: PropTypes.Validator<string>;
                             subtitle: PropTypes.Requireable<string>;
+                            provider: PropTypes.Requireable<string>;
                             selected: PropTypes.Requireable<boolean>;
                             selectedColor: PropTypes.Requireable<string>;
                             dataColumns: PropTypes.Requireable<(PropTypes.InferProps<{
@@ -211,6 +212,17 @@ declare namespace ExternalCourse {
                             'aria-label': PropTypes.Requireable<string>;
                             contentType: PropTypes.Requireable<string>;
                             id: PropTypes.Requireable<string>;
+                            leftIcon: PropTypes.Requireable<PropTypes.InferProps<{
+                                iconName: PropTypes.Requireable<string>;
+                                iconColor: PropTypes.Requireable<string>;
+                                backgroundColor: PropTypes.Requireable<string>;
+                                borderRadius: PropTypes.Requireable<string>;
+                                preset: PropTypes.Requireable<string>;
+                                gradientBackground: PropTypes.Requireable<boolean>;
+                                size: PropTypes.Requireable<number>;
+                                wrapperSize: PropTypes.Requireable<number>;
+                            }>>;
+                            editAsIcon: PropTypes.Requireable<boolean>;
                         }> | null | undefined)[]>;
                         type: PropTypes.Requireable<string>;
                         itemType: PropTypes.Requireable<string>;

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

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

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

@@ -39,8 +39,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const DESCRIPTION_BREAKPOINT = 382;
-
 const PlaylistDetail = (props, context) => {
   const {
     title,
@@ -54,13 +52,25 @@ const PlaylistDetail = (props, context) => {
     onBackClick,
     onContinueLearningClick
   } = props;
+  const descriptionRef = (0, _react.useRef)(null);
   const {
     translate
   } = context;
+  const [isDescriptionTruncated, setIsDescriptionTruncated] = (0, _react.useState)(false);
   const [showMore, setShowMore] = (0, _react.useState)(false);
   const handleShowMore = (0, _react.useCallback)(() => setShowMore(!showMore), [setShowMore, showMore]);
+  (0, _react.useEffect)(() => {
+    if (descriptionRef.current) {
+      const {
+        clientHeight = 0,
+        scrollHeight = 0
+      } = descriptionRef.current;
+      setIsDescriptionTruncated(scrollHeight > clientHeight);
+    }
+  }, [description]);
   const Description = (0, _react.useCallback)(() => {
     return /*#__PURE__*/_react.default.createElement("div", {
+      ref: descriptionRef,
       className: (0, _classnames.default)(_style.default.description, !showMore && _style.default.truncate)
     }, /*#__PURE__*/_react.default.createElement(_markdownToJsx.default, null, description));
   }, [showMore, description]);
@@ -72,7 +82,7 @@ const PlaylistDetail = (props, context) => {
   }, !(0, _isNil2.default)(onBackClick) ? /*#__PURE__*/_react.default.createElement(_buttonLinkIcon.default, {
     faIcon: "arrow-left",
     "data-name": "back-button",
-    "aria-label": "Back",
+    "aria-label": translate('back'),
     onClick: onBackClick,
     className: _style.default.backButton,
     tooltipPlacement: "right"
@@ -86,7 +96,7 @@ const PlaylistDetail = (props, context) => {
     label: translate('playlist')
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.title
-  }, title), description ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Description, null), description.length >= DESCRIPTION_BREAKPOINT ? /*#__PURE__*/_react.default.createElement("div", {
+  }, title), description ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Description, null), isDescriptionTruncated ? /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.showMoreWrapper,
     onClick: handleShowMore
   }, translate(showMore ? 'Show less' : 'Show more'), /*#__PURE__*/_react.default.createElement(_icon.default, {

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

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

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

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

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

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

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

@@ -98,6 +98,7 @@ const SkillDetail = (props, context) => {
     onReviewClick,
     onContinueLearningClick
   } = props;
+  const descriptionRef = (0, _react.useRef)(null);
   const {
     score = 0,
     questionsToReview
@@ -105,10 +106,21 @@ const SkillDetail = (props, context) => {
   const {
     translate
   } = context;
+  const [isDescriptionTruncated, setIsDescriptionTruncated] = (0, _react.useState)(false);
   const [showMore, setShowMore] = (0, _react.useState)(false);
   const handleShowMore = (0, _react.useCallback)(() => setShowMore(!showMore), [setShowMore, showMore]);
+  (0, _react.useEffect)(() => {
+    if (descriptionRef.current) {
+      const {
+        clientHeight = 0,
+        scrollHeight = 0
+      } = descriptionRef.current;
+      setIsDescriptionTruncated(scrollHeight > clientHeight);
+    }
+  }, [description]);
   const Description = (0, _react.useCallback)(() => {
     return /*#__PURE__*/_react.default.createElement("div", {
+      ref: descriptionRef,
       className: (0, _classnames.default)(_style.default.description, !showMore && _style.default.truncate)
     }, /*#__PURE__*/_react.default.createElement(_markdownToJsx.default, null, description));
   }, [showMore, description]);
@@ -136,7 +148,7 @@ const SkillDetail = (props, context) => {
   }, !(0, _isNil2.default)(onBackClick) ? /*#__PURE__*/_react.default.createElement(_buttonLinkIcon.default, {
     faIcon: "arrow-left",
     "data-name": "back-button",
-    "aria-label": "Back",
+    "aria-label": translate('back'),
     onClick: onBackClick,
     className: _style.default.backButton,
     tooltipPlacement: "right"
@@ -153,7 +165,7 @@ const SkillDetail = (props, context) => {
     }
   }), translate('skill_focus')) : null, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.title
-  }, title), description ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Description, null), description.length >= 226 ? /*#__PURE__*/_react.default.createElement("div", {
+  }, title), description ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Description, null), isDescriptionTruncated ? /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.showMoreWrapper,
     onClick: handleShowMore
   }, showMore ? translate('Show less') : translate('Show more'), /*#__PURE__*/_react.default.createElement(_icon.default, {

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

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

package/lib/variables/colors.d.ts

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

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

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

package/lib/variables/colors.js

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

package/lib/variables/colors.js.map

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

package/locales/bs/global.json

@@ -1,7 +1,7 @@
 {
   "all": "Sve",
   "all_courses": "Svi kursevi",
-  "all_content": "All content",
+  "all_content": "Sav sadržaj",
   "alphabetical": "Abecedno",
   "add_learning_priority": "Dodajte prioritet učenja",
   "accepted_cards": "Kreditna ili debitna kartica",
@@ -11,14 +11,15 @@
   "At the end of this level, you will be able to_": "Na kraju ovog nivoa moći ćete: ",
   "author": "autor/ica ",
   "associated_skills": "Povezane vještine",
+  "back": "Nazad",
   "Back to Dashboard Home": "Povratak na kontrolnu tablu",
   "back_to_catalog": "Povratak na kurseve",
   "badge": "Značka",
   "bonus_stars": "Bonus zvjezdice",
-  "certificates": "Certificates",
-  "certificate(s)": "certificate(s)",
-  "certificates_subtitle": "Demonstrate your knowledge and skills, helping you stand out in your career and achieve rewarding milestones along the way.",
-  "certification_module": "module to complete",
+  "certificates": "Certifikati",
+  "certificate(s)": "certifikat(i)",
+  "certificates_subtitle": "Pokažite svoje znanje i vještine, pomažući vam da se istaknete u svojoj karijeri i postignete nagrađivane prekretnice na tom putu.",
+  "certification_module": "modul za završetak",
   "cart_title": "Pretplata za Coorpacademy",
   "challenges you on": "izaziva te",
   "download": "Preuzmi",
@@ -26,7 +27,7 @@
   "items": "stavke",
   "certificate": "Certifikat",
   "certification": "Certifikacija",
-  "certification_progress_wrapper_subtitle": "To unlock your rewards and complete this certification, reach the following goal",
+  "certification_progress_wrapper_subtitle": "Da otključate svoje nagrade i završite ovu certifikaciju, dostignite sljedeći cilj",
   "chapters": "poglavlja",
   "Close": "Zatvori",
   "clue_stars_to_loose_plural": "Otključavanje traga smanjuje broj zvijezda koje možete dobiti za ovo pitanje za {{count}} (ako tačno odgovorite)",
@@ -42,6 +43,9 @@
   "continue_learning": "Nastavite sa učenjem",
   "learning_priority_modal_title": "Novi prioritet učenja",
   "learning_priority_modal_description": "Kreirajte prioritet učenja odabirom jedne vještine, liste za reprodukciju ili certifikata.",
+  "locked": "Zaključano",
+  "icon_picker_title": "Change icon",
+  "icon_picker_description": "Select a new icon for your skill",
   "skills_change_focus": "Promijenite fokus vještina",
   "skills_choose_focus": "Odaberite fokus",
   "cancel": "Otkaži",
@@ -59,7 +63,7 @@
   "empty_search_result_title": "Nema rezultata za ” {{searchValue}} ”",
   "empty_search_result_description": "Pokušajte prilagoditi pretragu kako biste pronašli ono što tražite.",
   "empty_search_result_clear_search": "Obriši pretragu",
-  "in_progress": "In progress",
+  "in_progress": "U toku",
   "keep_subscription": "Zadrži moju prijavu",
   "learning_priorities": "Prioriteti u učenju",
   "learning_priorities_description": "Vaši glavni prioriteti učenja koje definiše vaša kompanija",
@@ -68,7 +72,7 @@
   "media_stars_to_win": "Osvoji {{count}} dodatnu zvijezdu u ovom poglavlju prvi put kad vidiš lekciju!",
   "modules": "Moduli",
   "modules_completed": "moduli završeni",
-  "modules_completed_mandatory": "mandatory modules completed",
+  "modules_completed_mandatory": "obavezni moduli završeni",
   "More": "Više",
   "More details": "Više detalja",
   "New media": "Nova lekcija",