@coorpacademy/components 11.32.42 → 11.32.44-alpha.55

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

package/lib/template/certifications/index.js

@@ -3,6 +3,8 @@
 exports.__esModule = true;
 exports.default = void 0;
 
+var _map2 = _interopRequireDefault(require("lodash/fp/map"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -19,16 +21,19 @@ var _certificationCard = _interopRequireDefault(require("../../molecule/certific
 
 var _style = _interopRequireDefault(require("./style.css"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 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); }
 
 const Certifications = (props, context) => {
   const {
+    title,
+    subtitle,
+    tag,
     certifications,
     sorting
   } = props;
@@ -45,11 +50,13 @@ 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, {
-    title: translate('certificates'),
-    subtitle: translate('certificates_subtitle'),
+    title: title,
+    subtitle: subtitle,
     type: "form-group",
     titleSize: "standard-light-weight",
     subtitleSize: "standard-without-margin",
@@ -63,7 +70,7 @@ const Certifications = (props, context) => {
     className: _style.default.sortSectionWrapper
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.certificatesCount
-  }, `${certifications.length} ${translate('certificate(s)')}`), /*#__PURE__*/_react.default.createElement("div", {
+  }, `${certifications.length} ${title}`), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.sortSection
   }, /*#__PURE__*/_react.default.createElement(_inputSwitch.default, {
     id: 'show-completed-courses-switch',
@@ -77,21 +84,27 @@ const Certifications = (props, context) => {
     className: _style.default.sortWrapper
   }, translate('sort_by'), sortView) : null)), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.certificateList
-  }, certifications.map(certification => {
-    if (!showCompleted && certification.progress === 100) {
-      return null;
-    }
-
+  }, (0, _map2.default)(certification => {
+    const {
+      label,
+      progress
+    } = certification;
+    if (!showCompleted && progress === 100) return null;
     return /*#__PURE__*/_react.default.createElement("div", {
-      key: certification.label
-    }, /*#__PURE__*/_react.default.createElement(_certificationCard.default, certification));
-  })));
+      key: label
+    }, /*#__PURE__*/_react.default.createElement(_certificationCard.default, _extends({}, certification, {
+      tag: tag
+    })));
+  }, certifications))));
 };
 
 Certifications.contextTypes = {
   translate: _provider.default.childContextTypes.translate
 };
 Certifications.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: _propTypes.default.string,
+  subtitle: _propTypes.default.string,
+  tag: _propTypes.default.string,
   certifications: _propTypes.default.arrayOf(_propTypes.default.shape({
     label: _propTypes.default.string,
     goal: _propTypes.default.shape({
@@ -102,7 +115,10 @@ Certifications.propTypes = process.env.NODE_ENV !== "production" ? {
     }),
     progress: _propTypes.default.number,
     imgUrl: _propTypes.default.string,
-    onClick: _propTypes.default.func
+    onClick: _propTypes.default.func,
+    locales: _propTypes.default.shape({
+      conditionDescriptionProgress: _propTypes.default.string
+    })
   })),
   sorting: _propTypes.default.shape(_select.default.propTypes)
 } : {};

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","title","subtitle","tag","certifications","sorting","translate","showCompleted","setShowCompleted","useState","sortView","undefined","handleShowCompletedToggle","useCallback","style","backgroudnContainer","container","iconName","iconColor","borderRadius","backgroundColor","sortSectionWrapper","certificatesCount","length","sortSection","sortWrapper","certificateList","certification","label","progress","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","arrayOf","shape","goal","condition","nbDone","number","imgUrl","onClick","func","locales","conditionDescriptionProgress","Select"],"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/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>;
@@ -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/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>;
@@ -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/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>;
@@ -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/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

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

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

@@ -90,7 +90,6 @@ const SkillDetail = (props, context) => {
     focused,
     availableForReview,
     ongoingCoursesAvailable,
-    totalCourses,
     skillIncludedCourses,
     filters,
     sorting,
@@ -98,17 +97,30 @@ const SkillDetail = (props, context) => {
     onReviewClick,
     onContinueLearningClick
   } = props;
+  const descriptionRef = (0, _react.useRef)(null);
   const {
     score = 0,
-    questionsToReview
+    questionsToReview,
+    totalContents
   } = metrics;
   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, {
@@ -189,7 +201,7 @@ const SkillDetail = (props, context) => {
     content: skillIncludedCourses,
     filters: filters,
     sorting: sorting,
-    totalContents: totalCourses
+    totalContents: totalContents
   })));
 };
 
@@ -203,12 +215,12 @@ SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   description: _propTypes.default.string,
   metrics: _propTypes.default.shape({
     score: _propTypes.default.number,
-    questionsToReview: _propTypes.default.number
+    questionsToReview: _propTypes.default.number,
+    totalContents: _propTypes.default.number
   }),
   focused: _propTypes.default.bool,
   availableForReview: _propTypes.default.bool,
   ongoingCoursesAvailable: _propTypes.default.bool,
-  totalCourses: _propTypes.default.number,
   skillIncludedCourses: _propTypes.default.shape(_cardsGrid.default.propTypes),
   filters: _propTypes.default.shape({
     onChange: _propTypes.default.func,