@coorpacademy/components 11.32.42 → 11.32.44-alpha.55

package/es/template/certifications/index.d.ts

@@ -5,6 +5,9 @@ declare namespace Certifications {
         const translate: PropTypes.Requireable<(...args: any[]) => any>;
     }
     namespace propTypes {
+        const title: PropTypes.Requireable<string>;
+        const subtitle: PropTypes.Requireable<string>;
+        const tag: PropTypes.Requireable<string>;
         const certifications: PropTypes.Requireable<(PropTypes.InferProps<{
             label: PropTypes.Requireable<string>;
             goal: PropTypes.Requireable<PropTypes.InferProps<{
@@ -16,6 +19,9 @@ declare namespace Certifications {
             progress: PropTypes.Requireable<number>;
             imgUrl: PropTypes.Requireable<string>;
             onClick: PropTypes.Requireable<(...args: any[]) => any>;
+            locales: PropTypes.Requireable<PropTypes.InferProps<{
+                conditionDescriptionProgress: PropTypes.Requireable<string>;
+            }>>;
         }> | null | undefined)[]>;
         const sorting: PropTypes.Requireable<PropTypes.InferProps<{
             title: PropTypes.Requireable<string>;

package/es/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":";AAUA,uEAoEC"}

package/es/template/certifications/index.js

@@ -1,3 +1,5 @@
+import _map from "lodash/fp/map";
+
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { useState, useCallback } from 'react';
@@ -11,6 +13,9 @@ import style from './style.css';
 
 const Certifications = (props, context) => {
   const {
+    title,
+    subtitle,
+    tag,
     certifications,
     sorting
   } = props;
@@ -27,11 +32,13 @@ const Certifications = (props, context) => {
     setShowCompleted(!showCompleted);
   }, [showCompleted, setShowCompleted]);
   return /*#__PURE__*/React.createElement("div", {
+    className: style.backgroudnContainer
+  }, /*#__PURE__*/React.createElement("div", {
     className: style.container,
     "data-name": "Certifications"
   }, /*#__PURE__*/React.createElement(Title, {
-    title: translate('certificates'),
-    subtitle: translate('certificates_subtitle'),
+    title: title,
+    subtitle: subtitle,
     type: "form-group",
     titleSize: "standard-light-weight",
     subtitleSize: "standard-without-margin",
@@ -45,7 +52,7 @@ const Certifications = (props, context) => {
     className: style.sortSectionWrapper
   }, /*#__PURE__*/React.createElement("div", {
     className: style.certificatesCount
-  }, `${certifications.length} ${translate('certificate(s)')}`), /*#__PURE__*/React.createElement("div", {
+  }, `${certifications.length} ${title}`), /*#__PURE__*/React.createElement("div", {
     className: style.sortSection
   }, /*#__PURE__*/React.createElement(InputSwitch, {
     id: 'show-completed-courses-switch',
@@ -59,21 +66,27 @@ const Certifications = (props, context) => {
     className: style.sortWrapper
   }, translate('sort_by'), sortView) : null)), /*#__PURE__*/React.createElement("div", {
     className: style.certificateList
-  }, certifications.map(certification => {
-    if (!showCompleted && certification.progress === 100) {
-      return null;
-    }
-
+  }, _map(certification => {
+    const {
+      label,
+      progress
+    } = certification;
+    if (!showCompleted && progress === 100) return null;
     return /*#__PURE__*/React.createElement("div", {
-      key: certification.label
-    }, /*#__PURE__*/React.createElement(CertificationCard, certification));
-  })));
+      key: label
+    }, /*#__PURE__*/React.createElement(CertificationCard, _extends({}, certification, {
+      tag: tag
+    })));
+  }, certifications))));
 };
 
 Certifications.contextTypes = {
   translate: Provider.childContextTypes.translate
 };
 Certifications.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: PropTypes.string,
+  subtitle: PropTypes.string,
+  tag: PropTypes.string,
   certifications: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.string,
     goal: PropTypes.shape({
@@ -84,7 +97,10 @@ Certifications.propTypes = process.env.NODE_ENV !== "production" ? {
     }),
     progress: PropTypes.number,
     imgUrl: PropTypes.string,
-    onClick: PropTypes.func
+    onClick: PropTypes.func,
+    locales: PropTypes.shape({
+      conditionDescriptionProgress: PropTypes.string
+    })
   })),
   sorting: PropTypes.shape(Select.propTypes)
 } : {};

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useState","useCallback","PropTypes","Provider","Title","Select","InputSwitch","CertificationCard","style","Certifications","props","context","certifications","sorting","translate","showCompleted","setShowCompleted","sortView","undefined","handleShowCompletedToggle","container","iconName","iconColor","borderRadius","backgroundColor","sortSectionWrapper","certificatesCount","length","sortSection","sortWrapper","certificateList","map","certification","progress","label","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","goal","title","condition","nbDone","number","imgUrl","onClick","func"],"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":["React","useState","useCallback","PropTypes","Provider","Title","Select","InputSwitch","CertificationCard","style","Certifications","props","context","title","subtitle","tag","certifications","sorting","translate","showCompleted","setShowCompleted","sortView","undefined","handleShowCompletedToggle","backgroudnContainer","container","iconName","iconColor","borderRadius","backgroundColor","sortSectionWrapper","certificatesCount","length","sortSection","sortWrapper","certificateList","certification","label","progress","contextTypes","childContextTypes","propTypes","string","arrayOf","shape","goal","condition","nbDone","number","imgUrl","onClick","func","locales","conditionDescriptionProgress"],"sources":["../../../src/template/certifications/index.js"],"sourcesContent":["import React, {useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {map} from 'lodash/fp';\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 {title, subtitle, tag, 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={title}\n          subtitle={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}>{`${certifications.length} ${title}`}</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          {map(certification => {\n            const {label, progress} = certification;\n            if (!showCompleted && progress === 100) return null;\n\n            return (\n              <div key={label}>\n                <CertificationCard {...certification} tag={tag} />\n              </div>\n            );\n          }, certifications)}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nCertifications.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nCertifications.propTypes = {\n  title: PropTypes.string,\n  subtitle: PropTypes.string,\n  tag: PropTypes.string,\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      locales: PropTypes.shape({\n        conditionDescriptionProgress: PropTypes.string\n      })\n    })\n  ),\n  sorting: PropTypes.shape(Select.propTypes)\n};\n\nexport default Certifications;\n"],"mappings":"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"}

package/es/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/es/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>;
@@ -290,11 +302,11 @@ declare namespace Dashboard {
                 'aria-label': PropTypes.Requireable<string>;
                 title: PropTypes.Requireable<string>;
                 target: PropTypes.Requireable<string>;
-                skinHover: PropTypes.Requireable<boolean>;
                 hoverColor: PropTypes.Requireable<string>;
+                hoverBackgroundColor: PropTypes.Requireable<string>;
                 download: PropTypes.Requireable<boolean>;
                 onClick: PropTypes.Requireable<(...args: any[]) => any>;
-                onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+                onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
                 onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
                 useButtonTag: PropTypes.Requireable<boolean>;
                 style: PropTypes.Requireable<PropTypes.InferProps<{}>>;
@@ -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>;
@@ -587,11 +611,11 @@ declare namespace Dashboard {
                 'aria-label': PropTypes.Requireable<string>;
                 title: PropTypes.Requireable<string>;
                 target: PropTypes.Requireable<string>;
-                skinHover: PropTypes.Requireable<boolean>;
                 hoverColor: PropTypes.Requireable<string>;
+                hoverBackgroundColor: PropTypes.Requireable<string>;
                 download: PropTypes.Requireable<boolean>;
                 onClick: PropTypes.Requireable<(...args: any[]) => any>;
-                onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+                onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
                 onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
                 useButtonTag: PropTypes.Requireable<boolean>;
                 style: PropTypes.Requireable<PropTypes.InferProps<{}>>;

package/es/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>;
@@ -471,11 +483,11 @@ declare namespace SearchPage {
                 'aria-label': PropTypes.Requireable<string>;
                 title: PropTypes.Requireable<string>;
                 target: PropTypes.Requireable<string>;
-                skinHover: PropTypes.Requireable<boolean>;
                 hoverColor: PropTypes.Requireable<string>;
+                hoverBackgroundColor: PropTypes.Requireable<string>;
                 download: PropTypes.Requireable<boolean>;
                 onClick: PropTypes.Requireable<(...args: any[]) => any>;
-                onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+                onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
                 onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
                 useButtonTag: PropTypes.Requireable<boolean>;
                 style: PropTypes.Requireable<PropTypes.InferProps<{}>>;

package/es/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>;
@@ -308,11 +320,11 @@ declare namespace ExternalCourse {
                 'aria-label': PropTypes.Requireable<string>;
                 title: PropTypes.Requireable<string>;
                 target: PropTypes.Requireable<string>;
-                skinHover: PropTypes.Requireable<boolean>;
                 hoverColor: PropTypes.Requireable<string>;
+                hoverBackgroundColor: PropTypes.Requireable<string>;
                 download: PropTypes.Requireable<boolean>;
                 onClick: PropTypes.Requireable<(...args: any[]) => any>;
-                onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+                onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
                 onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
                 useButtonTag: PropTypes.Requireable<boolean>;
                 style: PropTypes.Requireable<PropTypes.InferProps<{}>>;

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

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

@@ -1,5 +1,5 @@
 import _isNil from "lodash/fp/isNil";
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Markdown from 'markdown-to-jsx';
@@ -13,7 +13,6 @@ import AllCourses from '../skill-detail/all-courses';
 import PlaylistDetailCover from '../../molecule/playlist-detail-cover';
 import { ContinueLearningButton } from '../skill-detail';
 import style from './style.css';
-const DESCRIPTION_BREAKPOINT = 382;
 
 const PlaylistDetail = (props, context) => {
   const {
@@ -28,13 +27,25 @@ const PlaylistDetail = (props, context) => {
     onBackClick,
     onContinueLearningClick
   } = props;
+  const descriptionRef = useRef(null);
   const {
     translate
   } = context;
+  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);
   const [showMore, setShowMore] = useState(false);
   const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);
+  useEffect(() => {
+    if (descriptionRef.current) {
+      const {
+        clientHeight = 0,
+        scrollHeight = 0
+      } = descriptionRef.current;
+      setIsDescriptionTruncated(scrollHeight > clientHeight);
+    }
+  }, [description]);
   const Description = useCallback(() => {
     return /*#__PURE__*/React.createElement("div", {
+      ref: descriptionRef,
       className: classnames(style.description, !showMore && style.truncate)
     }, /*#__PURE__*/React.createElement(Markdown, null, description));
   }, [showMore, description]);
@@ -46,7 +57,7 @@ const PlaylistDetail = (props, context) => {
   }, !_isNil(onBackClick) ? /*#__PURE__*/React.createElement(ButtonLinkIcon, {
     faIcon: "arrow-left",
     "data-name": "back-button",
-    "aria-label": "Back",
+    "aria-label": translate('back'),
     onClick: onBackClick,
     className: style.backButton,
     tooltipPlacement: "right"
@@ -60,7 +71,7 @@ const PlaylistDetail = (props, context) => {
     label: translate('playlist')
   }), /*#__PURE__*/React.createElement("div", {
     className: style.title
-  }, title), description ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Description, null), description.length >= DESCRIPTION_BREAKPOINT ? /*#__PURE__*/React.createElement("div", {
+  }, title), description ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Description, null), isDescriptionTruncated ? /*#__PURE__*/React.createElement("div", {
     className: style.showMoreWrapper,
     onClick: handleShowMore
   }, translate(showMore ? 'Show less' : 'Show more'), /*#__PURE__*/React.createElement(Icon, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","classnames","Markdown","Provider","Tag","Select","SelectOptionPropTypes","ButtonLinkIcon","Icon","CardsGrid","AllCourses","PlaylistDetailCover","ContinueLearningButton","style","DESCRIPTION_BREAKPOINT","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCoursesAvailable","playlistCourses","filters","sorting","onBackClick","onContinueLearningClick","translate","showMore","setShowMore","handleShowMore","Description","truncate","backgroundContainer","container","backButton","ctaContainer","coverWrapper","length","showMoreWrapper","faSize","wrapperSize","continueLearningButton","contextTypes","skin","childContextTypes","propTypes","string","isRequired","images","bool","shape","onChange","func","options","arrayOf"],"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":["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","descriptionRef","translate","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","truncate","backgroundContainer","container","backButton","ctaContainer","coverWrapper","showMoreWrapper","faSize","wrapperSize","continueLearningButton","contextTypes","skin","childContextTypes","propTypes","string","isRequired","images","bool","shape","onChange","func","options","arrayOf"],"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/es/template/playlist-detail/style.css

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

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

@@ -67,12 +67,12 @@ declare namespace SkillDetail {
         export const metrics: PropTypes.Requireable<PropTypes.InferProps<{
             score: PropTypes.Requireable<number>;
             questionsToReview: PropTypes.Requireable<number>;
+            totalContents: PropTypes.Requireable<number>;
         }>>;
         export const focused: PropTypes.Requireable<boolean>;
         export const availableForReview: PropTypes.Requireable<boolean>;
         const ongoingCoursesAvailable_1: PropTypes.Requireable<boolean>;
         export { ongoingCoursesAvailable_1 as ongoingCoursesAvailable };
-        export const totalCourses: PropTypes.Requireable<number>;
         export const skillIncludedCourses: PropTypes.Requireable<PropTypes.InferProps<{
             list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
             customStyle: PropTypes.Requireable<{

package/es/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,oEAmJC"}

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

@@ -1,6 +1,6 @@
 import _isNil from "lodash/fp/isNil";
 import _get from "lodash/fp/get";
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { convert } from 'css-color-function';
 import classnames from 'classnames';
@@ -64,7 +64,6 @@ const SkillDetail = (props, context) => {
     focused,
     availableForReview,
     ongoingCoursesAvailable,
-    totalCourses,
     skillIncludedCourses,
     filters,
     sorting,
@@ -72,17 +71,30 @@ const SkillDetail = (props, context) => {
     onReviewClick,
     onContinueLearningClick
   } = props;
+  const descriptionRef = useRef(null);
   const {
     score = 0,
-    questionsToReview
+    questionsToReview,
+    totalContents
   } = metrics;
   const {
     translate
   } = context;
+  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);
   const [showMore, setShowMore] = useState(false);
   const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);
+  useEffect(() => {
+    if (descriptionRef.current) {
+      const {
+        clientHeight = 0,
+        scrollHeight = 0
+      } = descriptionRef.current;
+      setIsDescriptionTruncated(scrollHeight > clientHeight);
+    }
+  }, [description]);
   const Description = useCallback(() => {
     return /*#__PURE__*/React.createElement("div", {
+      ref: descriptionRef,
       className: classnames(style.description, !showMore && style.truncate)
     }, /*#__PURE__*/React.createElement(Markdown, null, description));
   }, [showMore, description]);
@@ -110,7 +122,7 @@ const SkillDetail = (props, context) => {
   }, !_isNil(onBackClick) ? /*#__PURE__*/React.createElement(ButtonLinkIcon, {
     faIcon: "arrow-left",
     "data-name": "back-button",
-    "aria-label": "Back",
+    "aria-label": translate('back'),
     onClick: onBackClick,
     className: style.backButton,
     tooltipPlacement: "right"
@@ -127,7 +139,7 @@ const SkillDetail = (props, context) => {
     }
   }), translate('skill_focus')) : null, /*#__PURE__*/React.createElement("div", {
     className: style.title
-  }, title), description ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Description, null), description.length >= 226 ? /*#__PURE__*/React.createElement("div", {
+  }, title), description ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Description, null), isDescriptionTruncated ? /*#__PURE__*/React.createElement("div", {
     className: style.showMoreWrapper,
     onClick: handleShowMore
   }, showMore ? translate('Show less') : translate('Show more'), /*#__PURE__*/React.createElement(Icon, {
@@ -163,7 +175,7 @@ const SkillDetail = (props, context) => {
     content: skillIncludedCourses,
     filters: filters,
     sorting: sorting,
-    totalContents: totalCourses
+    totalContents: totalContents
   })));
 };
 
@@ -177,12 +189,12 @@ SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   description: PropTypes.string,
   metrics: PropTypes.shape({
     score: PropTypes.number,
-    questionsToReview: PropTypes.number
+    questionsToReview: PropTypes.number,
+    totalContents: PropTypes.number
   }),
   focused: PropTypes.bool,
   availableForReview: PropTypes.bool,
   ongoingCoursesAvailable: PropTypes.bool,
-  totalCourses: PropTypes.number,
   skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),
   filters: PropTypes.shape({
     onChange: PropTypes.func,