@coorpacademy/components 11.32.20 → 11.32.21

package/lib/template/common/dashboard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Hero","React","memo","hero","welcome","style","propTypes","PropTypes","shape","HeroCard","Slide","Dashboard","props","sections","cookie","popinWithCards","showMoreOnLeftOrRightAriaLabel","buildSectionComponent","section","type","buildSection","index","sectionView","sectionsList","key","map","wrapper","arrayOf","oneOfType","BattleRequestList","CardsList","NewsList","StartBattle","ReviewBanner","LearningProfileBanner","CMPopin"],"sources":["../../../../src/template/common/dashboard/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Slide from '../../../atom/slide';\nimport HeroCard from '../../../molecule/hero';\nimport BattleRequestList from '../../../molecule/dashboard/battle-request-list';\nimport CardsList from '../../../molecule/dashboard/cards-list';\nimport NewsList from '../../../molecule/dashboard/news-list';\nimport StartBattle from '../../../molecule/dashboard/start-battle';\nimport CMPopin from '../../../molecule/cm-popin';\nimport ReviewBanner from '../../../molecule/dashboard/review-banner';\nimport LearningProfileBanner from '../../../molecule/dashboard/learning-profile-banner';\nimport style from './style.css';\n\nconst Hero = React.memo(function Hero({hero, welcome}) {\n  return <div className={style.hero}>{hero ? <HeroCard {...hero} /> : <Slide {...welcome} />}</div>;\n});\n\nHero.propTypes = {\n  hero: PropTypes.shape(HeroCard.propTypes),\n  welcome: PropTypes.shape(Slide.propTypes)\n};\n\nconst Dashboard = props => {\n  const {\n    sections = [],\n    hero,\n    welcome,\n    cookie,\n    popinWithCards,\n    'arrows-aria-label': showMoreOnLeftOrRightAriaLabel\n  } = props;\n  const buildSectionComponent = section => {\n    const {type} = section;\n    switch (type) {\n      case 'hero':\n        return <Hero hero={hero} welcome={welcome} />;\n      case 'battleRequests':\n        return <BattleRequestList {...section} />;\n      case 'cards':\n        return <CardsList {...section} arrows-aria-label={showMoreOnLeftOrRightAriaLabel} />;\n      case 'news':\n        return <NewsList {...section} />;\n      case 'battle':\n        return <StartBattle {...section} />;\n      case 'review':\n        return <ReviewBanner {...section} />;\n      case 'learningProfile':\n        return <LearningProfileBanner {...section} />;\n      default:\n        return null;\n    }\n  };\n\n  const buildSection = (section, index) => {\n    const sectionView = buildSectionComponent(section);\n\n    return <div key={index}>{sectionView}</div>;\n  };\n\n  const sectionsList = [{type: 'hero', key: 'hero'}, ...sections].map(section => (\n    <div key={section.key}>{buildSection(section)}</div>\n  ));\n  return (\n    <div className={style.wrapper} data-name=\"dashboard\">\n      {sectionsList}\n      {cookie ? <CMPopin {...cookie} /> : null}\n      {popinWithCards ? (\n        <div className={style.popinWithCards}>\n          <CMPopin {...popinWithCards} />\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nDashboard.propTypes = {\n  hero: Hero.propTypes.hero,\n  welcome: Hero.propTypes.welcome,\n  sections: PropTypes.arrayOf(\n    PropTypes.oneOfType([\n      PropTypes.shape(BattleRequestList.propTypes),\n      PropTypes.shape(CardsList.propTypes),\n      PropTypes.shape(NewsList.propTypes),\n      PropTypes.shape(StartBattle.propTypes),\n      PropTypes.shape(ReviewBanner.propTypes),\n      PropTypes.shape(LearningProfileBanner.propTypes)\n    ])\n  ),\n  cookie: PropTypes.shape(CMPopin.propTypes),\n  'arrows-aria-label': CardsList.propTypes['arrows-aria-label'],\n  popinWithCards: PropTypes.shape(CMPopin.propTypes)\n};\nexport default Dashboard;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Hero","React","memo","hero","welcome","style","propTypes","PropTypes","shape","HeroCard","Slide","Dashboard","props","sections","cookie","popinWithCards","showMoreOnLeftOrRightAriaLabel","buildSectionComponent","section","type","title","subtitle","icon","iconName","iconColor","borderRadius","backgroundColor","tag","label","cards","size","buildSection","index","sectionView","sectionsList","key","map","wrapper","arrayOf","oneOfType","BattleRequestList","CardsList","learningPrioritiesPropTypes","NewsList","StartBattle","ReviewBanner","LearningProfileBanner","CMPopin"],"sources":["../../../../src/template/common/dashboard/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {size} from 'lodash/fp';\nimport Slide from '../../../atom/slide';\nimport HeroCard from '../../../molecule/hero';\nimport BattleRequestList from '../../../molecule/dashboard/battle-request-list';\nimport CardsList from '../../../molecule/dashboard/cards-list';\nimport NewsList from '../../../molecule/dashboard/news-list';\nimport StartBattle from '../../../molecule/dashboard/start-battle';\nimport CMPopin from '../../../molecule/cm-popin';\nimport ReviewBanner from '../../../molecule/dashboard/review-banner';\nimport LearningProfileBanner from '../../../molecule/dashboard/learning-profile-banner';\nimport Title from '../../../atom/title';\nimport {learningPrioritiesPropTypes} from '../../my-learning';\nimport style from './style.css';\n\nconst Hero = React.memo(function Hero({hero, welcome}) {\n  return <div className={style.hero}>{hero ? <HeroCard {...hero} /> : <Slide {...welcome} />}</div>;\n});\n\nHero.propTypes = {\n  hero: PropTypes.shape(HeroCard.propTypes),\n  welcome: PropTypes.shape(Slide.propTypes)\n};\n\nconst Dashboard = props => {\n  const {\n    sections = [],\n    hero,\n    welcome,\n    cookie,\n    popinWithCards,\n    'arrows-aria-label': showMoreOnLeftOrRightAriaLabel\n  } = props;\n  const buildSectionComponent = section => {\n    const {type} = section;\n    switch (type) {\n      case 'hero':\n        return <Hero hero={hero} welcome={welcome} />;\n      case 'battleRequests':\n        return <BattleRequestList {...section} />;\n      case 'learningPrioritiesCards': {\n        return (\n          <CardsList\n            {...section}\n            title={\n              <Title\n                {...{\n                  type: 'form-group',\n                  title: section.title,\n                  subtitle: section.subtitle,\n                  icon: {\n                    iconName: 'sign-post',\n                    iconColor: '#A32700',\n                    borderRadius: '12px',\n                    backgroundColor: '#FFDCD1'\n                  },\n                  tag: {\n                    label: `${size(section.cards)}`,\n                    size: 'S'\n                  }\n                }}\n              />\n            }\n            arrows-aria-label={showMoreOnLeftOrRightAriaLabel}\n          />\n        );\n      }\n      case 'cards':\n        return <CardsList {...section} arrows-aria-label={showMoreOnLeftOrRightAriaLabel} />;\n      case 'news':\n        return <NewsList {...section} />;\n      case 'battle':\n        return <StartBattle {...section} />;\n      case 'review':\n        return <ReviewBanner {...section} />;\n      case 'learningProfile':\n        return <LearningProfileBanner {...section} />;\n      default:\n        return null;\n    }\n  };\n\n  const buildSection = (section, index) => {\n    const sectionView = buildSectionComponent(section);\n\n    return <div key={index}>{sectionView}</div>;\n  };\n\n  const sectionsList = [{type: 'hero', key: 'hero'}, ...sections].map(section => (\n    <div key={section.key}>{buildSection(section)}</div>\n  ));\n  return (\n    <div className={style.wrapper} data-name=\"dashboard\">\n      {sectionsList}\n      {cookie ? <CMPopin {...cookie} /> : null}\n      {popinWithCards ? (\n        <div className={style.popinWithCards}>\n          <CMPopin {...popinWithCards} />\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nDashboard.propTypes = {\n  hero: Hero.propTypes.hero,\n  welcome: Hero.propTypes.welcome,\n  sections: PropTypes.arrayOf(\n    PropTypes.oneOfType([\n      PropTypes.shape(BattleRequestList.propTypes),\n      PropTypes.shape(CardsList.propTypes),\n      PropTypes.shape(learningPrioritiesPropTypes),\n      PropTypes.shape(NewsList.propTypes),\n      PropTypes.shape(StartBattle.propTypes),\n      PropTypes.shape(ReviewBanner.propTypes),\n      PropTypes.shape(LearningProfileBanner.propTypes)\n    ])\n  ),\n  cookie: PropTypes.shape(CMPopin.propTypes),\n  'arrows-aria-label': CardsList.propTypes['arrows-aria-label'],\n  popinWithCards: PropTypes.shape(CMPopin.propTypes)\n};\nexport default Dashboard;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,IAAI,gBAAGC,cAAA,CAAMC,IAAN,CAAW,SAASF,IAAT,CAAc;EAACG,IAAD;EAAOC;AAAP,CAAd,EAA+B;EACrD,oBAAO;IAAK,SAAS,EAAEC,cAAA,CAAMF;EAAtB,GAA6BA,IAAI,gBAAG,6BAAC,aAAD,EAAcA,IAAd,CAAH,gBAA4B,6BAAC,cAAD,EAAWC,OAAX,CAA7D,CAAP;AACD,CAFY,CAAb;;AAIAJ,IAAI,CAACM,SAAL,2CAAiB;EACfH,IAAI,EAAEI,kBAAA,CAAUC,KAAV,CAAgBC,aAAA,CAASH,SAAzB,CADS;EAEfF,OAAO,EAAEG,kBAAA,CAAUC,KAAV,CAAgBE,cAAA,CAAMJ,SAAtB;AAFM,CAAjB;;AAKA,MAAMK,SAAS,GAAGC,KAAK,IAAI;EACzB,MAAM;IACJC,QAAQ,GAAG,EADP;IAEJV,IAFI;IAGJC,OAHI;IAIJU,MAJI;IAKJC,cALI;IAMJ,qBAAqBC;EANjB,IAOFJ,KAPJ;;EAQA,MAAMK,qBAAqB,GAAGC,OAAO,IAAI;IACvC,MAAM;MAACC;IAAD,IAASD,OAAf;;IACA,QAAQC,IAAR;MACE,KAAK,MAAL;QACE,oBAAO,6BAAC,IAAD;UAAM,IAAI,EAAEhB,IAAZ;UAAkB,OAAO,EAAEC;QAA3B,EAAP;;MACF,KAAK,gBAAL;QACE,oBAAO,6BAAC,0BAAD,EAAuBc,OAAvB,CAAP;;MACF,KAAK,yBAAL;QAAgC;UAC9B,oBACE,6BAAC,kBAAD,eACMA,OADN;YAEE,KAAK,eACH,6BAAC,cAAD;cAEIC,IAAI,EAAE,YAFV;cAGIC,KAAK,EAAEF,OAAO,CAACE,KAHnB;cAIIC,QAAQ,EAAEH,OAAO,CAACG,QAJtB;cAKIC,IAAI,EAAE;gBACJC,QAAQ,EAAE,WADN;gBAEJC,SAAS,EAAE,SAFP;gBAGJC,YAAY,EAAE,MAHV;gBAIJC,eAAe,EAAE;cAJb,CALV;cAWIC,GAAG,EAAE;gBACHC,KAAK,EAAG,GAAE,oBAAKV,OAAO,CAACW,KAAb,CAAoB,EAD3B;gBAEHC,IAAI,EAAE;cAFH;YAXT,EAHJ;YAqBE,qBAAmBd;UArBrB,GADF;QAyBD;;MACD,KAAK,OAAL;QACE,oBAAO,6BAAC,kBAAD,eAAeE,OAAf;UAAwB,qBAAmBF;QAA3C,GAAP;;MACF,KAAK,MAAL;QACE,oBAAO,6BAAC,iBAAD,EAAcE,OAAd,CAAP;;MACF,KAAK,QAAL;QACE,oBAAO,6BAAC,oBAAD,EAAiBA,OAAjB,CAAP;;MACF,KAAK,QAAL;QACE,oBAAO,6BAAC,qBAAD,EAAkBA,OAAlB,CAAP;;MACF,KAAK,iBAAL;QACE,oBAAO,6BAAC,8BAAD,EAA2BA,OAA3B,CAAP;;MACF;QACE,OAAO,IAAP;IA3CJ;EA6CD,CA/CD;;EAiDA,MAAMa,YAAY,GAAG,CAACb,OAAD,EAAUc,KAAV,KAAoB;IACvC,MAAMC,WAAW,GAAGhB,qBAAqB,CAACC,OAAD,CAAzC;IAEA,oBAAO;MAAK,GAAG,EAAEc;IAAV,GAAkBC,WAAlB,CAAP;EACD,CAJD;;EAMA,MAAMC,YAAY,GAAG,CAAC;IAACf,IAAI,EAAE,MAAP;IAAegB,GAAG,EAAE;EAApB,CAAD,EAA8B,GAAGtB,QAAjC,EAA2CuB,GAA3C,CAA+ClB,OAAO,iBACzE;IAAK,GAAG,EAAEA,OAAO,CAACiB;EAAlB,GAAwBJ,YAAY,CAACb,OAAD,CAApC,CADmB,CAArB;EAGA,oBACE;IAAK,SAAS,EAAEb,cAAA,CAAMgC,OAAtB;IAA+B,aAAU;EAAzC,GACGH,YADH,EAEGpB,MAAM,gBAAG,6BAAC,gBAAD,EAAaA,MAAb,CAAH,GAA6B,IAFtC,EAGGC,cAAc,gBACb;IAAK,SAAS,EAAEV,cAAA,CAAMU;EAAtB,gBACE,6BAAC,gBAAD,EAAaA,cAAb,CADF,CADa,GAIX,IAPN,CADF;AAWD,CA9ED;;AAgFAJ,SAAS,CAACL,SAAV,2CAAsB;EACpBH,IAAI,EAAEH,IAAI,CAACM,SAAL,CAAeH,IADD;EAEpBC,OAAO,EAAEJ,IAAI,CAACM,SAAL,CAAeF,OAFJ;EAGpBS,QAAQ,EAAEN,kBAAA,CAAU+B,OAAV,CACR/B,kBAAA,CAAUgC,SAAV,CAAoB,CAClBhC,kBAAA,CAAUC,KAAV,CAAgBgC,0BAAA,CAAkBlC,SAAlC,CADkB,EAElBC,kBAAA,CAAUC,KAAV,CAAgBiC,kBAAA,CAAUnC,SAA1B,CAFkB,EAGlBC,kBAAA,CAAUC,KAAV,CAAgBkC,uCAAhB,CAHkB,EAIlBnC,kBAAA,CAAUC,KAAV,CAAgBmC,iBAAA,CAASrC,SAAzB,CAJkB,EAKlBC,kBAAA,CAAUC,KAAV,CAAgBoC,oBAAA,CAAYtC,SAA5B,CALkB,EAMlBC,kBAAA,CAAUC,KAAV,CAAgBqC,qBAAA,CAAavC,SAA7B,CANkB,EAOlBC,kBAAA,CAAUC,KAAV,CAAgBsC,8BAAA,CAAsBxC,SAAtC,CAPkB,CAApB,CADQ,CAHU;EAcpBQ,MAAM,EAAEP,kBAAA,CAAUC,KAAV,CAAgBuC,gBAAA,CAAQzC,SAAxB,CAdY;EAepB,qBAAqBmC,kBAAA,CAAUnC,SAAV,CAAoB,mBAApB,CAfD;EAgBpBS,cAAc,EAAER,kBAAA,CAAUC,KAAV,CAAgBuC,gBAAA,CAAQzC,SAAxB;AAhBI,CAAtB;eAkBeK,S"}

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

@@ -116,7 +116,7 @@ declare namespace SearchPage {
             dataName: PropTypes.Requireable<string>;
             title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
             showMore: PropTypes.Requireable<string>;
-            cards: PropTypes.Requireable<(PropTypes.InferProps<{
+            cards: PropTypes.Requireable<(NonNullable<PropTypes.InferProps<{
                 badge: PropTypes.Requireable<string>;
                 image: PropTypes.Requireable<string>;
                 disabled: PropTypes.Requireable<boolean>;
@@ -167,7 +167,12 @@ declare namespace SearchPage {
                     progression: PropTypes.Requireable<string>;
                     adaptive: PropTypes.Requireable<string>;
                 }>>;
-            }> | null | undefined)[]>;
+            }> | PropTypes.InferProps<{
+                title: PropTypes.Requireable<string>;
+                tagLabel: PropTypes.Requireable<string>;
+                progression: PropTypes.Requireable<number>;
+                onClick: PropTypes.Requireable<(...args: any[]) => any>;
+            }> | null | undefined> | null | undefined)[]>;
             customStyle: PropTypes.Requireable<{
                 [x: string]: string | null | undefined;
             }>;
@@ -177,6 +182,7 @@ declare namespace SearchPage {
                 showMoreOnLeftAriaLabel: PropTypes.Requireable<string>;
                 showMoreOnRightAriaLabel: PropTypes.Requireable<string>;
             }>>;
+            type: PropTypes.Requireable<string>;
             testingSizes: PropTypes.Requireable<any>;
         }>>;
         const moreSortAriaLabel: PropTypes.Requireable<string>;
@@ -194,6 +200,12 @@ declare namespace SearchPage {
                     'data-name': PropTypes.Requireable<string>;
                     titleSize: PropTypes.Requireable<string>;
                     subtitleSize: PropTypes.Requireable<string>;
+                    icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                    tag: PropTypes.Requireable<PropTypes.InferProps<{
+                        label: PropTypes.Requireable<string>;
+                        type: PropTypes.Requireable<string>;
+                        size: PropTypes.Requireable<string>;
+                    }>>;
                 }>>;
                 headerIcon: PropTypes.Requireable<string>;
                 backgroundImage: PropTypes.Requireable<string>;

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

@@ -33,6 +33,12 @@ declare namespace ExternalCourse {
                     'data-name': PropTypes.Requireable<string>;
                     titleSize: PropTypes.Requireable<string>;
                     subtitleSize: PropTypes.Requireable<string>;
+                    icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                    tag: PropTypes.Requireable<PropTypes.InferProps<{
+                        label: PropTypes.Requireable<string>;
+                        type: PropTypes.Requireable<string>;
+                        size: PropTypes.Requireable<string>;
+                    }>>;
                 }>>;
                 headerIcon: PropTypes.Requireable<string>;
                 backgroundImage: PropTypes.Requireable<string>;

package/lib/template/my-learning/index.d.ts

@@ -1,4 +1,80 @@
+export const learningPrioritiesPropTypes: {
+    title: PropTypes.Requireable<string>;
+    subtitle: PropTypes.Requireable<string>;
+    contentType: PropTypes.Requireable<string>;
+    dataName: PropTypes.Requireable<string>;
+    showMore: PropTypes.Requireable<string>;
+    cards: PropTypes.Requireable<(NonNullable<PropTypes.InferProps<{
+        badge: PropTypes.Requireable<string>;
+        image: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        adaptiv: PropTypes.Requireable<boolean>;
+        type: PropTypes.Requireable<string>;
+        title: PropTypes.Requireable<string>;
+        author: PropTypes.Requireable<string>;
+        certifiedAuthor: PropTypes.Requireable<boolean>;
+        customer: PropTypes.Requireable<PropTypes.InferProps<{
+            theme: PropTypes.Requireable<string>;
+            type: PropTypes.Requireable<string>;
+            name: PropTypes.Requireable<string>;
+            coorpOriginal: PropTypes.Validator<boolean>;
+            disabled: PropTypes.Requireable<boolean>;
+            'aria-label': PropTypes.Requireable<string>;
+        }>>;
+        progress: PropTypes.Requireable<number>;
+        favorite: PropTypes.Requireable<boolean>;
+        addFavoriteToolTip: PropTypes.Requireable<string>;
+        removeFavoriteToolTip: PropTypes.Requireable<string>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onFavoriteClick: PropTypes.Requireable<(...args: any[]) => any>;
+        isSelected: PropTypes.Requireable<boolean>;
+        notification: PropTypes.Requireable<PropTypes.InferProps<{
+            message: PropTypes.Validator<string>;
+            icon: PropTypes.Validator<string>;
+        }>>;
+        badgeCategory: PropTypes.Requireable<string>;
+        badgeLabel: PropTypes.Requireable<string>;
+        theme: PropTypes.Requireable<string>;
+        disabledContent: PropTypes.Requireable<string>;
+        'aria-label': PropTypes.Requireable<string>;
+        'background-aria-label': PropTypes.Requireable<string>;
+        'favorite-aria-label': PropTypes.Requireable<PropTypes.InferProps<{
+            favorite: PropTypes.Requireable<string>;
+            addToFavorite: PropTypes.Requireable<string>;
+            removeFromFavorite: PropTypes.Requireable<string>;
+        }>>;
+        'selectable-aria-label': PropTypes.Requireable<PropTypes.InferProps<{
+            select: PropTypes.Requireable<string>;
+            unSelect: PropTypes.Requireable<string>;
+        }>>;
+        'customer-aria-label': PropTypes.Requireable<string>;
+        'badge-aria-label': PropTypes.Requireable<string>;
+        'disabled-aria-label': PropTypes.Requireable<string>;
+        'card-content-aria-label': PropTypes.Requireable<PropTypes.InferProps<{
+            author: PropTypes.Requireable<string>;
+            progression: PropTypes.Requireable<string>;
+            adaptive: PropTypes.Requireable<string>;
+        }>>;
+    }> | PropTypes.InferProps<{
+        title: PropTypes.Requireable<string>;
+        tagLabel: PropTypes.Requireable<string>;
+        progression: PropTypes.Requireable<number>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    }> | null | undefined> | null | undefined)[]>;
+    customStyle: PropTypes.Requireable<{
+        [x: string]: string | null | undefined;
+    }>;
+    onScroll: PropTypes.Requireable<(...args: any[]) => any>;
+    onShowMore: PropTypes.Requireable<(...args: any[]) => any>;
+    'arrows-aria-label': PropTypes.Requireable<PropTypes.InferProps<{
+        showMoreOnLeftAriaLabel: PropTypes.Requireable<string>;
+        showMoreOnRightAriaLabel: PropTypes.Requireable<string>;
+    }>>;
+    type: PropTypes.Requireable<string>;
+    testingSizes: PropTypes.Requireable<any>;
+};
 export default MyLearning;
+import PropTypes from "prop-types";
 declare function MyLearning(props: any, context: any): JSX.Element;
 declare namespace MyLearning {
     namespace contextTypes {
@@ -48,7 +124,81 @@ declare namespace MyLearning {
         const onSkillFocusConfirm: PropTypes.Requireable<(...args: any[]) => any>;
         const onReviewSkill: PropTypes.Requireable<(...args: any[]) => any>;
         const onExploreSkill: PropTypes.Requireable<(...args: any[]) => any>;
+        const learningPriorities: PropTypes.Requireable<PropTypes.InferProps<{
+            title: PropTypes.Requireable<string>;
+            subtitle: PropTypes.Requireable<string>;
+            contentType: PropTypes.Requireable<string>;
+            dataName: PropTypes.Requireable<string>;
+            showMore: PropTypes.Requireable<string>;
+            cards: PropTypes.Requireable<(NonNullable<PropTypes.InferProps<{
+                badge: PropTypes.Requireable<string>;
+                image: PropTypes.Requireable<string>;
+                disabled: PropTypes.Requireable<boolean>;
+                adaptiv: PropTypes.Requireable<boolean>;
+                type: PropTypes.Requireable<string>;
+                title: PropTypes.Requireable<string>;
+                author: PropTypes.Requireable<string>;
+                certifiedAuthor: PropTypes.Requireable<boolean>;
+                customer: PropTypes.Requireable<PropTypes.InferProps<{
+                    theme: PropTypes.Requireable<string>;
+                    type: PropTypes.Requireable<string>;
+                    name: PropTypes.Requireable<string>;
+                    coorpOriginal: PropTypes.Validator<boolean>;
+                    disabled: PropTypes.Requireable<boolean>;
+                    'aria-label': PropTypes.Requireable<string>;
+                }>>;
+                progress: PropTypes.Requireable<number>;
+                favorite: PropTypes.Requireable<boolean>;
+                addFavoriteToolTip: PropTypes.Requireable<string>;
+                removeFavoriteToolTip: PropTypes.Requireable<string>;
+                onClick: PropTypes.Requireable<(...args: any[]) => any>;
+                onFavoriteClick: PropTypes.Requireable<(...args: any[]) => any>;
+                isSelected: PropTypes.Requireable<boolean>;
+                notification: PropTypes.Requireable<PropTypes.InferProps<{
+                    message: PropTypes.Validator<string>;
+                    icon: PropTypes.Validator<string>;
+                }>>;
+                badgeCategory: PropTypes.Requireable<string>;
+                badgeLabel: PropTypes.Requireable<string>;
+                theme: PropTypes.Requireable<string>;
+                disabledContent: PropTypes.Requireable<string>;
+                'aria-label': PropTypes.Requireable<string>;
+                'background-aria-label': PropTypes.Requireable<string>;
+                'favorite-aria-label': PropTypes.Requireable<PropTypes.InferProps<{
+                    favorite: PropTypes.Requireable<string>;
+                    addToFavorite: PropTypes.Requireable<string>;
+                    removeFromFavorite: PropTypes.Requireable<string>;
+                }>>;
+                'selectable-aria-label': PropTypes.Requireable<PropTypes.InferProps<{
+                    select: PropTypes.Requireable<string>;
+                    unSelect: PropTypes.Requireable<string>;
+                }>>;
+                'customer-aria-label': PropTypes.Requireable<string>;
+                'badge-aria-label': PropTypes.Requireable<string>;
+                'disabled-aria-label': PropTypes.Requireable<string>;
+                'card-content-aria-label': PropTypes.Requireable<PropTypes.InferProps<{
+                    author: PropTypes.Requireable<string>;
+                    progression: PropTypes.Requireable<string>;
+                    adaptive: PropTypes.Requireable<string>;
+                }>>;
+            }> | PropTypes.InferProps<{
+                title: PropTypes.Requireable<string>;
+                tagLabel: PropTypes.Requireable<string>;
+                progression: PropTypes.Requireable<number>;
+                onClick: PropTypes.Requireable<(...args: any[]) => any>;
+            }> | null | undefined> | null | undefined)[]>;
+            customStyle: PropTypes.Requireable<{
+                [x: string]: string | null | undefined;
+            }>;
+            onScroll: PropTypes.Requireable<(...args: any[]) => any>;
+            onShowMore: PropTypes.Requireable<(...args: any[]) => any>;
+            'arrows-aria-label': PropTypes.Requireable<PropTypes.InferProps<{
+                showMoreOnLeftAriaLabel: PropTypes.Requireable<string>;
+                showMoreOnRightAriaLabel: PropTypes.Requireable<string>;
+            }>>;
+            type: PropTypes.Requireable<string>;
+            testingSizes: PropTypes.Requireable<any>;
+        }>>;
     }
 }
-import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/lib/template/my-learning/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/my-learning/index.js"],"names":[],"mappings":";AA8GA,mEA4XC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/my-learning/index.js"],"names":[],"mappings":"AA+gBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAIE;;;AAnaF,mEAwZC"}

package/lib/template/my-learning/index.js

@@ -1,7 +1,11 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
+exports.learningPrioritiesPropTypes = exports.default = void 0;
+
+var _isEmpty2 = _interopRequireDefault(require("lodash/fp/isEmpty"));
+
+var _size2 = _interopRequireDefault(require("lodash/fp/size"));
 
 var _sortBy2 = _interopRequireDefault(require("lodash/fp/sortBy"));
 
@@ -51,6 +55,10 @@ var _searchValueIncluded = _interopRequireDefault(require("../../util/search-val
 
 var _timeFormat = require("../../util/time-format");
 
+var _cardsList = _interopRequireDefault(require("../../molecule/dashboard/cards-list"));
+
+var _title = _interopRequireDefault(require("../../atom/title"));
+
 var _style = _interopRequireDefault(require("./style.css"));
 
 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); }
@@ -59,6 +67,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 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 ChangeSkillFocusButton = (props, context) => {
   const {
     onClick
@@ -154,7 +164,8 @@ const MyLearning = (props, context) => {
     isLoading,
     onSkillFocusConfirm,
     onReviewSkill,
-    onExploreSkill
+    onExploreSkill,
+    learningPriorities
   } = props;
   const {
     skin,
@@ -234,7 +245,26 @@ const MyLearning = (props, context) => {
   const ReviewTooltipContent = (0, _react.useCallback)(() => /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("b", null, translate('review_mode_tooltip_header'))), /*#__PURE__*/_react.default.createElement("p", null, translate('review_mode_tooltip_content')), /*#__PURE__*/_react.default.createElement("ol", null, /*#__PURE__*/_react.default.createElement("li", null, translate('review_mode_tooltip_content_part1')), /*#__PURE__*/_react.default.createElement("li", null, translate('review_mode_tooltip_content_part2')), /*#__PURE__*/_react.default.createElement("li", null, translate('review_mode_tooltip_content_part3')), /*#__PURE__*/_react.default.createElement("li", null, translate('review_mode_tooltip_content_part4')))), [translate]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.backgroundContainer
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, (0, _isEmpty2.default)(learningPriorities?.cards) ? null : /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.cardsListContainer
+  }, /*#__PURE__*/_react.default.createElement(_cardsList.default, _extends({}, learningPriorities, {
+    title: /*#__PURE__*/_react.default.createElement(_title.default, {
+      type: 'form-group',
+      title: learningPriorities.title,
+      subtitle: learningPriorities.subtitle,
+      icon: {
+        iconName: 'sign-post',
+        iconColor: '#A32700',
+        borderRadius: '12px',
+        backgroundColor: '#FFDCD1'
+      },
+      tag: {
+        label: `${(0, _size2.default)(learningPriorities.cards)}`,
+        type: 'default',
+        size: 'S'
+      }
+    })
+  }))), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.container
   }, /*#__PURE__*/_react.default.createElement(_skillPickerModal.default, {
     skills: skills,
@@ -431,6 +461,13 @@ MyLearning.contextTypes = {
   skin: _provider.default.childContextTypes.skin,
   translate: _provider.default.childContextTypes.translate
 };
+
+const learningPrioritiesPropTypes = _extends({}, _cardsList.default.propTypes, {
+  title: _propTypes.default.string,
+  subtitle: _propTypes.default.string
+});
+
+exports.learningPrioritiesPropTypes = learningPrioritiesPropTypes;
 MyLearning.propTypes = process.env.NODE_ENV !== "production" ? {
   skills: _propTypes.default.arrayOf(_propTypes.default.string),
   selectedSkills: _propTypes.default.arrayOf(_propTypes.default.string),
@@ -449,7 +486,8 @@ MyLearning.propTypes = process.env.NODE_ENV !== "production" ? {
   isLoading: _propTypes.default.bool,
   onSkillFocusConfirm: _propTypes.default.func,
   onReviewSkill: _propTypes.default.func,
-  onExploreSkill: _propTypes.default.func
+  onExploreSkill: _propTypes.default.func,
+  learningPriorities: _propTypes.default.shape(learningPrioritiesPropTypes)
 } : {};
 var _default = MyLearning;
 exports.default = _default;

package/lib/template/my-learning/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ChangeSkillFocusButton","props","context","onClick","skin","translate","primarySkinColor","backgroundColor","convert","color","transition","position","faIcon","name","size","contextTypes","Provider","childContextTypes","propTypes","PropTypes","func","FilterButton","active","filter","skillTotal","Content","useCallback","style","skillFilterNumber","skillFilterNumberInActive","buttonProps","customStyle","width","content","bool","string","number","MyLearning","skills","selectedSkills","skillsInformation","skillsLocales","learnerFeature","isLoading","onSkillFocusConfirm","onReviewSkill","onExploreSkill","open","setOpen","useState","selectedSkillsList","setSelectedSkillsList","skillFocusSelectedOnChart","setSkillFocusSelectedOnChart","undefined","searchValue","setSearchValue","searchResults","setSearchResults","skillRef","activeFilter","setActiveFilter","skillsReviewReady","useMemo","skill","availableForReview","graphDatas","toFixed","graphLegends","filters","all","review","sumKpi","kpi","skillFocusSelectedOnChartScore","stats","coursedCompletedData","questionsToReviewData","learningTimeData","skillChartPaneLegends","focusedSkill","skillChartPanelProps","title","value","legend","icon","iconName","formatMinutes","handleOnDotClick","handleOpenSkillPicker","handleCloseSkillPicker","handleConfirmSkillPicker","focusSkillList","handleSearch","searchValueIncluded","handleSearchReset","ReviewTooltipContent","backgroundContainer","container","skillFocusContainer","skillFocusHeader","skillFocusHeaderWrapper","skillFocusHeaderIcon","faSize","wrapperSize","skillFocusHeaderContent","skillFocusHeaderTitle","skillFocusHeaderDescription","length","skillFocusContent","radarContainer","gradient","fill","stroke","percentage","background","label","skillFocusEmpty","img","skillFocusEmptyTitle","skillFocusEmptyDescription","skillListHeader","skillListHeaderIcon","skillListHeaderContent","skillListHeaderTitle","skillListHeaderDescription","infoIconTooltip","tooltip","toolBarContainer","skillFilterContainer","map","index","handleFilterClick","searchWrapper","placeholder","onChange","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","skillListContainer","skillListEmptyContainer","defaultStats","score","contentCompleted","questionsToReview","handleReviewSkill","handleExploreSkill","includes","arrayOf","objectOf","shape","learningTime"],"sources":["../../../src/template/my-learning/index.js"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport {get, keys, map, fromPairs, pipe, sumBy, getOr, sortBy} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Icon from '../../atom/icon';\nimport Picture from '../../atom/picture';\nimport ButtonLink from '../../atom/button-link';\nimport ToolTip from '../../atom/tooltip';\nimport ReviewNoSkills from '../../organism/review-no-skills';\nimport SearchForm from '../../molecule/search-form';\nimport SkillPickerModal from '../../molecule/skill-picker-modal';\nimport ResponsiveLearningProfileRadarChart from '../../molecule/learning-profile-radar-chart';\nimport SkillsChartSideInformationPanel from '../../molecule/skills-chart-side-information-panel';\nimport LearnerSkillCard from '../../molecule/learner-skill-card';\nimport searchValueIncluded from '../../util/search-value-included';\nimport {formatMinutes} from '../../util/time-format';\nimport style from './style.css';\n\nconst ChangeSkillFocusButton = (props, context) => {\n  const {onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <div data-name=\"button-explore-wrapper\">\n      <ButtonLink\n        customStyle={{\n          backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n          color: primarySkinColor,\n          transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n        }}\n        hoverBackgroundColor={primarySkinColor}\n        hoverColor=\"#FFFFFF\"\n        onClick={onClick}\n        label={translate('skills_change_focus')}\n        data-name=\"change-skill-focus-button\"\n        icon={{\n          position: 'left',\n          faIcon: {\n            name: 'arrows-rotate',\n            backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n            color: primarySkinColor,\n            size: 16\n          }\n        }}\n      />\n    </div>\n  );\n};\n\nChangeSkillFocusButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nChangeSkillFocusButton.propTypes = {\n  onClick: PropTypes.func\n};\n\nconst FilterButton = (props, context) => {\n  const {active, filter, skillTotal, onClick} = props;\n  const {skin} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const Content = useCallback(\n    () => (\n      <div>\n        {filter}\n        <span\n          className={active ? style.skillFilterNumber : style.skillFilterNumberInActive}\n          style={{\n            backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : '#EAEAEB',\n            color: active ? primarySkinColor : '#515161'\n          }}\n        >\n          {skillTotal}\n        </span>\n      </div>\n    ),\n    [filter, skillTotal, active, primarySkinColor]\n  );\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : '#FFFFFF',\n      color: active ? primarySkinColor : '#9999A8',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n      width: 'fit-content'\n    },\n    onClick,\n    content: <Content />,\n    'data-name': 'change-skill-focus-button'\n  };\n\n  return <ButtonLink {...buttonProps} />;\n};\n\nFilterButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nFilterButton.propTypes = {\n  active: PropTypes.bool,\n  filter: PropTypes.string,\n  skillTotal: PropTypes.number,\n  onClick: PropTypes.func\n};\n\nconst MyLearning = (props, context) => {\n  const {\n    skills,\n    selectedSkills = [],\n    skillsInformation,\n    skillsLocales,\n    learnerFeature = true,\n    isLoading,\n    onSkillFocusConfirm,\n    onReviewSkill,\n    onExploreSkill\n  } = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n  const [open, setOpen] = useState(false);\n  const [selectedSkillsList, setSelectedSkillsList] = useState(selectedSkills);\n  const [skillFocusSelectedOnChart, setSkillFocusSelectedOnChart] = useState(undefined);\n  const [searchValue, setSearchValue] = useState('');\n  const [searchResults, setSearchResults] = useState(\n    sortBy(skillRef => -getOr(0, [skillRef, 'stats', 'score'], skillsInformation), skills)\n  );\n  const [activeFilter, setActiveFilter] = useState('all');\n\n  const skillsReviewReady = useMemo(() => {\n    return searchResults.filter(skill =>\n      skillsInformation[skill] ? skillsInformation[skill].availableForReview : false\n    );\n  }, [searchResults, skillsInformation]);\n\n  const graphDatas = useMemo(\n    () =>\n      pipe(\n        map(skill => [skill, getOr(0, [skill, 'stats', 'score'], skillsInformation).toFixed(1)]),\n        fromPairs\n      )(selectedSkillsList),\n    [selectedSkillsList, skillsInformation]\n  );\n\n  const graphLegends = useMemo(\n    () =>\n      pipe(\n        map(skill => [skill, skillsLocales[skill]]),\n        fromPairs\n      )(selectedSkillsList),\n    [selectedSkillsList, skillsLocales]\n  );\n\n  const filters = useMemo(() => {\n    return {\n      all: searchResults,\n      review: skillsReviewReady\n    };\n  }, [searchResults, skillsReviewReady]);\n\n  const sumKpi = useCallback(\n    kpi => {\n      const skillFocusSelectedOnChartScore = getOr(\n        0,\n        [skillFocusSelectedOnChart, 'stats', `${kpi}`],\n        skillsInformation\n      );\n      return skillFocusSelectedOnChart\n        ? skillFocusSelectedOnChartScore\n        : sumBy(\n            skill => (skillsInformation[skill] ? skillsInformation[skill].stats[kpi] : 0),\n            selectedSkillsList\n          );\n    },\n    [skillFocusSelectedOnChart, skillsInformation, selectedSkillsList]\n  );\n\n  const coursedCompletedData = useMemo(() => sumKpi('contentCompleted'), [sumKpi]);\n\n  const questionsToReviewData = useMemo(() => sumKpi('questionsToReview'), [sumKpi]);\n\n  const learningTimeData = useMemo(() => sumKpi('learningTime'), [sumKpi]);\n\n  const skillChartPaneLegends = useMemo(\n    () =>\n      translate('skill_scope_specifier', {\n        focusedSkill: skillFocusSelectedOnChart\n          ? skillsLocales[skillFocusSelectedOnChart]\n          : translate('focused_skills')\n      }),\n    [translate, skillsLocales, skillFocusSelectedOnChart]\n  );\n  const skillChartPanelProps = [\n    {\n      title: translate('skill_chart_side_panel_content_completed'),\n      value: `${coursedCompletedData}`,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'book-open-cover', backgroundColor: '#D9F4F7'}\n    },\n    {\n      title: translate('skill_chart_side_panel_learning_hours'),\n      value: formatMinutes(learningTimeData),\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'clock', backgroundColor: '#FAD6DE'}\n    },\n    {\n      title: translate('skill_chart_side_panel_questions_to_review'),\n      value: `${questionsToReviewData}`,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'circle-question', backgroundColor: '#FFDCD1'}\n    }\n  ];\n\n  const handleOnDotClick = useCallback(\n    skillRef => {\n      setSkillFocusSelectedOnChart(skillRef);\n    },\n    [setSkillFocusSelectedOnChart]\n  );\n  const handleOpenSkillPicker = useCallback(() => setOpen(true), [setOpen]);\n  const handleCloseSkillPicker = useCallback(() => setOpen(false), [setOpen]);\n  const handleConfirmSkillPicker = useCallback(\n    focusSkillList => {\n      setSelectedSkillsList(focusSkillList);\n      onSkillFocusConfirm(focusSkillList);\n      setOpen(false);\n    },\n    [onSkillFocusConfirm, setSelectedSkillsList, setOpen]\n  );\n  const handleSearch = useCallback(\n    value => {\n      setSearchValue(value);\n      setSearchResults(skills.filter(skill => searchValueIncluded(skillsLocales[skill], value)));\n    },\n    [skills, skillsLocales, setSearchValue, setSearchResults]\n  );\n  const handleSearchReset = useCallback(() => {\n    setSearchValue('');\n    setSearchResults(skills);\n  }, [skills, setSearchValue, setSearchResults]);\n\n  const ReviewTooltipContent = useCallback(\n    () => (\n      <div>\n        <div>\n          <b>{translate('review_mode_tooltip_header')}</b>\n        </div>\n        <p>{translate('review_mode_tooltip_content')}</p>\n        <ol>\n          <li>{translate('review_mode_tooltip_content_part1')}</li>\n          <li>{translate('review_mode_tooltip_content_part2')}</li>\n          <li>{translate('review_mode_tooltip_content_part3')}</li>\n          <li>{translate('review_mode_tooltip_content_part4')}</li>\n        </ol>\n      </div>\n    ),\n    [translate]\n  );\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container}>\n        <SkillPickerModal\n          skills={skills}\n          selectedSkills={selectedSkillsList}\n          skillsLocales={skillsLocales}\n          isOpen={open}\n          isLoading={isLoading}\n          onCancel={handleCloseSkillPicker}\n          onConfirm={handleConfirmSkillPicker}\n          onClose={handleCloseSkillPicker}\n        />\n        {learnerFeature ? (\n          <div data-name=\"skill-focus-container\" className={style.skillFocusContainer}>\n            <header className={style.skillFocusHeader}>\n              <div className={style.skillFocusHeaderWrapper}>\n                <div className={style.skillFocusHeaderIcon}>\n                  <Icon\n                    iconName=\"bullseye-arrow\"\n                    backgroundColor=\"#DDD1FF\"\n                    borderRadius=\"12px\"\n                    size={{faSize: 20, wrapperSize: 48}}\n                  />\n                </div>\n                <div className={style.skillFocusHeaderContent}>\n                  <div data-name=\"skill-focus-title\" className={style.skillFocusHeaderTitle}>\n                    {translate('skills_focus')}\n                  </div>\n                  <div\n                    data-name=\"skill-focus-description\"\n                    className={style.skillFocusHeaderDescription}\n                  >\n                    {translate('skills_focus_description')}\n                  </div>\n                </div>\n              </div>\n              {selectedSkillsList.length >= 3 ? (\n                <ChangeSkillFocusButton onClick={handleOpenSkillPicker} />\n              ) : null}\n            </header>\n            {selectedSkillsList.length >= 3 ? (\n              <div className={style.skillFocusContent}>\n                <div className={style.radarContainer}>\n                  <ResponsiveLearningProfileRadarChart\n                    totalDataset={1}\n                    height={424}\n                    width={680}\n                    data={graphDatas}\n                    legend={graphLegends}\n                    onClick={handleOnDotClick}\n                    onExploreClick={onExploreSkill}\n                    colors={[\n                      {\n                        gradient: {\n                          fill: ['#0062ffff', '#8000ff85'],\n                          stroke: ['#0062ffff', '#8000FF']\n                        },\n                        percentage: {\n                          color: primarySkinColor,\n                          background: convert(`color(${primarySkinColor} a(0.07))`)\n                        },\n                        label: {\n                          color: '#020202ff'\n                        }\n                      }\n                    ]}\n                  />\n                </div>\n                <SkillsChartSideInformationPanel sidePanelItems={skillChartPanelProps} />\n              </div>\n            ) : (\n              <div className={style.skillFocusEmpty}>\n                <Picture\n                  className={style.img}\n                  src=\"https://static.coorpacademy.com/assets/images/mylearning-no-skill-selected-placeholder.svg\"\n                  alt=\"demo\"\n                />\n                <div className={style.skillFocusEmptyTitle}>\n                  {translate('skills_focus_empty_title')}\n                </div>\n                <div className={style.skillFocusEmptyDescription}>\n                  {translate('skills_focus_empty_description')}\n                </div>\n                <div>\n                  <ButtonLink\n                    label={translate('skills_choose_focus')}\n                    type=\"primary\"\n                    customStyle={{\n                      width: 'fit-contain',\n                      backgroundColor: primarySkinColor\n                    }}\n                    hoverBackgroundColor={convert(\n                      `hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`\n                    )}\n                    onClick={handleOpenSkillPicker}\n                  />\n                </div>\n              </div>\n            )}\n          </div>\n        ) : null}\n        <header className={style.skillListHeader}>\n          <div className={style.skillListHeaderIcon}>\n            <Icon\n              iconName=\"dumbbell\"\n              backgroundColor=\"#FFF9D1\"\n              size={{faSize: 20, wrapperSize: 48}}\n            />\n          </div>\n          <div className={style.skillListHeaderContent}>\n            <div className={style.skillListHeaderTitle}>{translate('skills_section_title')}</div>\n            <div className={style.skillListHeaderDescription}>\n              {translate('skills_section_description')}\n              <ToolTip\n                fontSize={12}\n                iconContainerClassName={style.infoIconTooltip}\n                tooltipClassName={style.tooltip}\n                TooltipContent={ReviewTooltipContent}\n                closeToolTipInformationTextAriaLabel={translate('close_tooltip_information')}\n              />\n            </div>\n          </div>\n        </header>\n        <div className={style.toolBarContainer}>\n          <div className={style.skillFilterContainer}>\n            {keys(filters).map((filter, index) => {\n              function handleFilterClick() {\n                setActiveFilter(filter);\n              }\n\n              return (\n                <div key={index}>\n                  <FilterButton\n                    active={activeFilter === filter}\n                    filter={\n                      filter === 'all' ? translate('all') : translate('review_mode_available')\n                    }\n                    skillTotal={filters[filter].length}\n                    onClick={handleFilterClick}\n                  />\n                </div>\n              );\n            })}\n          </div>\n          <div className={style.searchWrapper}>\n            <SearchForm\n              search={{\n                placeholder: translate('search_place_holder'),\n                value: searchValue,\n                onChange: handleSearch\n              }}\n              onReset={handleSearchReset}\n            />\n          </div>\n        </div>\n        {searchValue && searchResults.length === 0 ? (\n          <div className={style.emptySearchResultContainer}>\n            <div className={style.emptySearchResultTitle}>\n              {translate('empty_search_result_title', {searchValue})}\n            </div>\n            <div className={style.emptySearchResultDescription}>\n              {translate('empty_search_result_description')}\n            </div>\n            <div className={style.emptySearchResultClearSearch} onClick={handleSearchReset}>\n              {translate('empty_search_result_clear_search')}\n            </div>\n          </div>\n        ) : (\n          <div className={style.skillListContainer}>\n            {activeFilter === 'review_mode_available' && filters[activeFilter].length === 0 ? (\n              <div className={style.skillListEmptyContainer}>\n                <ReviewNoSkills\n                  titleNoSkills={translate('review_skill_empty')}\n                  textNoSkills={translate('review_skill_empty_description')}\n                  iconSkillAriaLabel={translate('review_skill_empty')}\n                  imagePosition=\"top\"\n                />\n              </div>\n            ) : (\n              filters[activeFilter].map((skill, index) => {\n                const defaultStats = {\n                  score: 0,\n                  content: 0,\n                  contentCompleted: 0,\n                  questionsToReview: 0\n                };\n\n                function handleReviewSkill() {\n                  onReviewSkill(skill);\n                }\n                function handleExploreSkill() {\n                  onExploreSkill(skill);\n                }\n                const {score, content, questionsToReview, contentCompleted} = skillsInformation[\n                  skill\n                ]\n                  ? skillsInformation[skill].stats\n                  : defaultStats;\n                return (\n                  <div key={index}>\n                    <LearnerSkillCard\n                      skillTitle={skillsLocales[skill]}\n                      focus={selectedSkills.includes(skill)}\n                      metrics={{\n                        score: score.toFixed(1),\n                        content,\n                        questionsToReview,\n                        contentCompleted\n                      }}\n                      review={\n                        skillsInformation[skill]\n                          ? skillsInformation[skill].availableForReview\n                          : false\n                      }\n                      onReviewClick={handleReviewSkill}\n                      onExploreClick={handleExploreSkill}\n                    />\n                  </div>\n                );\n              })\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nMyLearning.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nMyLearning.propTypes = {\n  skills: PropTypes.arrayOf(PropTypes.string),\n  selectedSkills: PropTypes.arrayOf(PropTypes.string),\n  skillsInformation: PropTypes.objectOf(\n    PropTypes.shape({\n      availableForReview: PropTypes.bool,\n      stats: PropTypes.shape({\n        score: PropTypes.number,\n        content: PropTypes.number,\n        contentCompleted: PropTypes.number,\n        questionsToReview: PropTypes.number,\n        learningTime: PropTypes.number\n      })\n    })\n  ),\n  skillsLocales: PropTypes.objectOf(PropTypes.string),\n  learnerFeature: PropTypes.bool,\n  isLoading: PropTypes.bool,\n  onSkillFocusConfirm: PropTypes.func,\n  onReviewSkill: PropTypes.func,\n  onExploreSkill: PropTypes.func\n};\n\nexport default MyLearning;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ChangeSkillFocusButton","props","context","onClick","skin","translate","primarySkinColor","backgroundColor","convert","color","transition","position","faIcon","name","size","contextTypes","Provider","childContextTypes","propTypes","PropTypes","func","FilterButton","active","filter","skillTotal","Content","useCallback","style","skillFilterNumber","skillFilterNumberInActive","buttonProps","customStyle","width","content","bool","string","number","MyLearning","skills","selectedSkills","skillsInformation","skillsLocales","learnerFeature","isLoading","onSkillFocusConfirm","onReviewSkill","onExploreSkill","learningPriorities","open","setOpen","useState","selectedSkillsList","setSelectedSkillsList","skillFocusSelectedOnChart","setSkillFocusSelectedOnChart","undefined","searchValue","setSearchValue","searchResults","setSearchResults","skillRef","activeFilter","setActiveFilter","skillsReviewReady","useMemo","skill","availableForReview","graphDatas","toFixed","graphLegends","filters","all","review","sumKpi","kpi","skillFocusSelectedOnChartScore","stats","coursedCompletedData","questionsToReviewData","learningTimeData","skillChartPaneLegends","focusedSkill","skillChartPanelProps","title","value","legend","icon","iconName","formatMinutes","handleOnDotClick","handleOpenSkillPicker","handleCloseSkillPicker","handleConfirmSkillPicker","focusSkillList","handleSearch","searchValueIncluded","handleSearchReset","ReviewTooltipContent","backgroundContainer","cards","cardsListContainer","type","subtitle","iconColor","borderRadius","tag","label","container","skillFocusContainer","skillFocusHeader","skillFocusHeaderWrapper","skillFocusHeaderIcon","faSize","wrapperSize","skillFocusHeaderContent","skillFocusHeaderTitle","skillFocusHeaderDescription","length","skillFocusContent","radarContainer","gradient","fill","stroke","percentage","background","skillFocusEmpty","img","skillFocusEmptyTitle","skillFocusEmptyDescription","skillListHeader","skillListHeaderIcon","skillListHeaderContent","skillListHeaderTitle","skillListHeaderDescription","infoIconTooltip","tooltip","toolBarContainer","skillFilterContainer","map","index","handleFilterClick","searchWrapper","placeholder","onChange","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","skillListContainer","skillListEmptyContainer","defaultStats","score","contentCompleted","questionsToReview","handleReviewSkill","handleExploreSkill","includes","learningPrioritiesPropTypes","CardsList","arrayOf","objectOf","shape","learningTime"],"sources":["../../../src/template/my-learning/index.js"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport {get, keys, map, fromPairs, pipe, sumBy, getOr, sortBy, size, isEmpty} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Icon from '../../atom/icon';\nimport Picture from '../../atom/picture';\nimport ButtonLink from '../../atom/button-link';\nimport ToolTip from '../../atom/tooltip';\nimport ReviewNoSkills from '../../organism/review-no-skills';\nimport SearchForm from '../../molecule/search-form';\nimport SkillPickerModal from '../../molecule/skill-picker-modal';\nimport ResponsiveLearningProfileRadarChart from '../../molecule/learning-profile-radar-chart';\nimport SkillsChartSideInformationPanel from '../../molecule/skills-chart-side-information-panel';\nimport LearnerSkillCard from '../../molecule/learner-skill-card';\nimport searchValueIncluded from '../../util/search-value-included';\nimport {formatMinutes} from '../../util/time-format';\nimport CardsList from '../../molecule/dashboard/cards-list';\nimport Title from '../../atom/title';\nimport style from './style.css';\n\nconst ChangeSkillFocusButton = (props, context) => {\n  const {onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <div data-name=\"button-explore-wrapper\">\n      <ButtonLink\n        customStyle={{\n          backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n          color: primarySkinColor,\n          transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n        }}\n        hoverBackgroundColor={primarySkinColor}\n        hoverColor=\"#FFFFFF\"\n        onClick={onClick}\n        label={translate('skills_change_focus')}\n        data-name=\"change-skill-focus-button\"\n        icon={{\n          position: 'left',\n          faIcon: {\n            name: 'arrows-rotate',\n            backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n            color: primarySkinColor,\n            size: 16\n          }\n        }}\n      />\n    </div>\n  );\n};\n\nChangeSkillFocusButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nChangeSkillFocusButton.propTypes = {\n  onClick: PropTypes.func\n};\n\nconst FilterButton = (props, context) => {\n  const {active, filter, skillTotal, onClick} = props;\n  const {skin} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const Content = useCallback(\n    () => (\n      <div>\n        {filter}\n        <span\n          className={active ? style.skillFilterNumber : style.skillFilterNumberInActive}\n          style={{\n            backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : '#EAEAEB',\n            color: active ? primarySkinColor : '#515161'\n          }}\n        >\n          {skillTotal}\n        </span>\n      </div>\n    ),\n    [filter, skillTotal, active, primarySkinColor]\n  );\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : '#FFFFFF',\n      color: active ? primarySkinColor : '#9999A8',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n      width: 'fit-content'\n    },\n    onClick,\n    content: <Content />,\n    'data-name': 'change-skill-focus-button'\n  };\n\n  return <ButtonLink {...buttonProps} />;\n};\n\nFilterButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nFilterButton.propTypes = {\n  active: PropTypes.bool,\n  filter: PropTypes.string,\n  skillTotal: PropTypes.number,\n  onClick: PropTypes.func\n};\n\nconst MyLearning = (props, context) => {\n  const {\n    skills,\n    selectedSkills = [],\n    skillsInformation,\n    skillsLocales,\n    learnerFeature = true,\n    isLoading,\n    onSkillFocusConfirm,\n    onReviewSkill,\n    onExploreSkill,\n    learningPriorities\n  } = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n  const [open, setOpen] = useState(false);\n  const [selectedSkillsList, setSelectedSkillsList] = useState(selectedSkills);\n  const [skillFocusSelectedOnChart, setSkillFocusSelectedOnChart] = useState(undefined);\n  const [searchValue, setSearchValue] = useState('');\n  const [searchResults, setSearchResults] = useState(\n    sortBy(skillRef => -getOr(0, [skillRef, 'stats', 'score'], skillsInformation), skills)\n  );\n  const [activeFilter, setActiveFilter] = useState('all');\n\n  const skillsReviewReady = useMemo(() => {\n    return searchResults.filter(skill =>\n      skillsInformation[skill] ? skillsInformation[skill].availableForReview : false\n    );\n  }, [searchResults, skillsInformation]);\n\n  const graphDatas = useMemo(\n    () =>\n      pipe(\n        map(skill => [skill, getOr(0, [skill, 'stats', 'score'], skillsInformation).toFixed(1)]),\n        fromPairs\n      )(selectedSkillsList),\n    [selectedSkillsList, skillsInformation]\n  );\n\n  const graphLegends = useMemo(\n    () =>\n      pipe(\n        map(skill => [skill, skillsLocales[skill]]),\n        fromPairs\n      )(selectedSkillsList),\n    [selectedSkillsList, skillsLocales]\n  );\n\n  const filters = useMemo(() => {\n    return {\n      all: searchResults,\n      review: skillsReviewReady\n    };\n  }, [searchResults, skillsReviewReady]);\n\n  const sumKpi = useCallback(\n    kpi => {\n      const skillFocusSelectedOnChartScore = getOr(\n        0,\n        [skillFocusSelectedOnChart, 'stats', `${kpi}`],\n        skillsInformation\n      );\n      return skillFocusSelectedOnChart\n        ? skillFocusSelectedOnChartScore\n        : sumBy(\n            skill => (skillsInformation[skill] ? skillsInformation[skill].stats[kpi] : 0),\n            selectedSkillsList\n          );\n    },\n    [skillFocusSelectedOnChart, skillsInformation, selectedSkillsList]\n  );\n\n  const coursedCompletedData = useMemo(() => sumKpi('contentCompleted'), [sumKpi]);\n\n  const questionsToReviewData = useMemo(() => sumKpi('questionsToReview'), [sumKpi]);\n\n  const learningTimeData = useMemo(() => sumKpi('learningTime'), [sumKpi]);\n\n  const skillChartPaneLegends = useMemo(\n    () =>\n      translate('skill_scope_specifier', {\n        focusedSkill: skillFocusSelectedOnChart\n          ? skillsLocales[skillFocusSelectedOnChart]\n          : translate('focused_skills')\n      }),\n    [translate, skillsLocales, skillFocusSelectedOnChart]\n  );\n  const skillChartPanelProps = [\n    {\n      title: translate('skill_chart_side_panel_content_completed'),\n      value: `${coursedCompletedData}`,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'book-open-cover', backgroundColor: '#D9F4F7'}\n    },\n    {\n      title: translate('skill_chart_side_panel_learning_hours'),\n      value: formatMinutes(learningTimeData),\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'clock', backgroundColor: '#FAD6DE'}\n    },\n    {\n      title: translate('skill_chart_side_panel_questions_to_review'),\n      value: `${questionsToReviewData}`,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'circle-question', backgroundColor: '#FFDCD1'}\n    }\n  ];\n\n  const handleOnDotClick = useCallback(\n    skillRef => {\n      setSkillFocusSelectedOnChart(skillRef);\n    },\n    [setSkillFocusSelectedOnChart]\n  );\n  const handleOpenSkillPicker = useCallback(() => setOpen(true), [setOpen]);\n  const handleCloseSkillPicker = useCallback(() => setOpen(false), [setOpen]);\n  const handleConfirmSkillPicker = useCallback(\n    focusSkillList => {\n      setSelectedSkillsList(focusSkillList);\n      onSkillFocusConfirm(focusSkillList);\n      setOpen(false);\n    },\n    [onSkillFocusConfirm, setSelectedSkillsList, setOpen]\n  );\n  const handleSearch = useCallback(\n    value => {\n      setSearchValue(value);\n      setSearchResults(skills.filter(skill => searchValueIncluded(skillsLocales[skill], value)));\n    },\n    [skills, skillsLocales, setSearchValue, setSearchResults]\n  );\n  const handleSearchReset = useCallback(() => {\n    setSearchValue('');\n    setSearchResults(skills);\n  }, [skills, setSearchValue, setSearchResults]);\n\n  const ReviewTooltipContent = useCallback(\n    () => (\n      <div>\n        <div>\n          <b>{translate('review_mode_tooltip_header')}</b>\n        </div>\n        <p>{translate('review_mode_tooltip_content')}</p>\n        <ol>\n          <li>{translate('review_mode_tooltip_content_part1')}</li>\n          <li>{translate('review_mode_tooltip_content_part2')}</li>\n          <li>{translate('review_mode_tooltip_content_part3')}</li>\n          <li>{translate('review_mode_tooltip_content_part4')}</li>\n        </ol>\n      </div>\n    ),\n    [translate]\n  );\n\n  return (\n    <div className={style.backgroundContainer}>\n      {isEmpty(learningPriorities?.cards) ? null : (\n        <div className={style.cardsListContainer}>\n          <CardsList\n            {...learningPriorities}\n            title={\n              <Title\n                {...{\n                  type: 'form-group',\n                  title: learningPriorities.title,\n                  subtitle: learningPriorities.subtitle,\n                  icon: {\n                    iconName: 'sign-post',\n                    iconColor: '#A32700',\n                    borderRadius: '12px',\n                    backgroundColor: '#FFDCD1'\n                  },\n                  tag: {\n                    label: `${size(learningPriorities.cards)}`,\n                    type: 'default',\n                    size: 'S'\n                  }\n                }}\n              />\n            }\n          />\n        </div>\n      )}\n      <div className={style.container}>\n        <SkillPickerModal\n          skills={skills}\n          selectedSkills={selectedSkillsList}\n          skillsLocales={skillsLocales}\n          isOpen={open}\n          isLoading={isLoading}\n          onCancel={handleCloseSkillPicker}\n          onConfirm={handleConfirmSkillPicker}\n          onClose={handleCloseSkillPicker}\n        />\n        {learnerFeature ? (\n          <div data-name=\"skill-focus-container\" className={style.skillFocusContainer}>\n            <header className={style.skillFocusHeader}>\n              <div className={style.skillFocusHeaderWrapper}>\n                <div className={style.skillFocusHeaderIcon}>\n                  <Icon\n                    iconName=\"bullseye-arrow\"\n                    backgroundColor=\"#DDD1FF\"\n                    borderRadius=\"12px\"\n                    size={{faSize: 20, wrapperSize: 48}}\n                  />\n                </div>\n                <div className={style.skillFocusHeaderContent}>\n                  <div data-name=\"skill-focus-title\" className={style.skillFocusHeaderTitle}>\n                    {translate('skills_focus')}\n                  </div>\n                  <div\n                    data-name=\"skill-focus-description\"\n                    className={style.skillFocusHeaderDescription}\n                  >\n                    {translate('skills_focus_description')}\n                  </div>\n                </div>\n              </div>\n              {selectedSkillsList.length >= 3 ? (\n                <ChangeSkillFocusButton onClick={handleOpenSkillPicker} />\n              ) : null}\n            </header>\n            {selectedSkillsList.length >= 3 ? (\n              <div className={style.skillFocusContent}>\n                <div className={style.radarContainer}>\n                  <ResponsiveLearningProfileRadarChart\n                    totalDataset={1}\n                    height={424}\n                    width={680}\n                    data={graphDatas}\n                    legend={graphLegends}\n                    onClick={handleOnDotClick}\n                    onExploreClick={onExploreSkill}\n                    colors={[\n                      {\n                        gradient: {\n                          fill: ['#0062ffff', '#8000ff85'],\n                          stroke: ['#0062ffff', '#8000FF']\n                        },\n                        percentage: {\n                          color: primarySkinColor,\n                          background: convert(`color(${primarySkinColor} a(0.07))`)\n                        },\n                        label: {\n                          color: '#020202ff'\n                        }\n                      }\n                    ]}\n                  />\n                </div>\n                <SkillsChartSideInformationPanel sidePanelItems={skillChartPanelProps} />\n              </div>\n            ) : (\n              <div className={style.skillFocusEmpty}>\n                <Picture\n                  className={style.img}\n                  src=\"https://static.coorpacademy.com/assets/images/mylearning-no-skill-selected-placeholder.svg\"\n                  alt=\"demo\"\n                />\n                <div className={style.skillFocusEmptyTitle}>\n                  {translate('skills_focus_empty_title')}\n                </div>\n                <div className={style.skillFocusEmptyDescription}>\n                  {translate('skills_focus_empty_description')}\n                </div>\n                <div>\n                  <ButtonLink\n                    label={translate('skills_choose_focus')}\n                    type=\"primary\"\n                    customStyle={{\n                      width: 'fit-contain',\n                      backgroundColor: primarySkinColor\n                    }}\n                    hoverBackgroundColor={convert(\n                      `hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`\n                    )}\n                    onClick={handleOpenSkillPicker}\n                  />\n                </div>\n              </div>\n            )}\n          </div>\n        ) : null}\n        <header className={style.skillListHeader}>\n          <div className={style.skillListHeaderIcon}>\n            <Icon\n              iconName=\"dumbbell\"\n              backgroundColor=\"#FFF9D1\"\n              size={{faSize: 20, wrapperSize: 48}}\n            />\n          </div>\n          <div className={style.skillListHeaderContent}>\n            <div className={style.skillListHeaderTitle}>{translate('skills_section_title')}</div>\n            <div className={style.skillListHeaderDescription}>\n              {translate('skills_section_description')}\n              <ToolTip\n                fontSize={12}\n                iconContainerClassName={style.infoIconTooltip}\n                tooltipClassName={style.tooltip}\n                TooltipContent={ReviewTooltipContent}\n                closeToolTipInformationTextAriaLabel={translate('close_tooltip_information')}\n              />\n            </div>\n          </div>\n        </header>\n        <div className={style.toolBarContainer}>\n          <div className={style.skillFilterContainer}>\n            {keys(filters).map((filter, index) => {\n              function handleFilterClick() {\n                setActiveFilter(filter);\n              }\n\n              return (\n                <div key={index}>\n                  <FilterButton\n                    active={activeFilter === filter}\n                    filter={\n                      filter === 'all' ? translate('all') : translate('review_mode_available')\n                    }\n                    skillTotal={filters[filter].length}\n                    onClick={handleFilterClick}\n                  />\n                </div>\n              );\n            })}\n          </div>\n          <div className={style.searchWrapper}>\n            <SearchForm\n              search={{\n                placeholder: translate('search_place_holder'),\n                value: searchValue,\n                onChange: handleSearch\n              }}\n              onReset={handleSearchReset}\n            />\n          </div>\n        </div>\n        {searchValue && searchResults.length === 0 ? (\n          <div className={style.emptySearchResultContainer}>\n            <div className={style.emptySearchResultTitle}>\n              {translate('empty_search_result_title', {searchValue})}\n            </div>\n            <div className={style.emptySearchResultDescription}>\n              {translate('empty_search_result_description')}\n            </div>\n            <div className={style.emptySearchResultClearSearch} onClick={handleSearchReset}>\n              {translate('empty_search_result_clear_search')}\n            </div>\n          </div>\n        ) : (\n          <div className={style.skillListContainer}>\n            {activeFilter === 'review_mode_available' && filters[activeFilter].length === 0 ? (\n              <div className={style.skillListEmptyContainer}>\n                <ReviewNoSkills\n                  titleNoSkills={translate('review_skill_empty')}\n                  textNoSkills={translate('review_skill_empty_description')}\n                  iconSkillAriaLabel={translate('review_skill_empty')}\n                  imagePosition=\"top\"\n                />\n              </div>\n            ) : (\n              filters[activeFilter].map((skill, index) => {\n                const defaultStats = {\n                  score: 0,\n                  content: 0,\n                  contentCompleted: 0,\n                  questionsToReview: 0\n                };\n\n                function handleReviewSkill() {\n                  onReviewSkill(skill);\n                }\n                function handleExploreSkill() {\n                  onExploreSkill(skill);\n                }\n                const {score, content, questionsToReview, contentCompleted} = skillsInformation[\n                  skill\n                ]\n                  ? skillsInformation[skill].stats\n                  : defaultStats;\n                return (\n                  <div key={index}>\n                    <LearnerSkillCard\n                      skillTitle={skillsLocales[skill]}\n                      focus={selectedSkills.includes(skill)}\n                      metrics={{\n                        score: score.toFixed(1),\n                        content,\n                        questionsToReview,\n                        contentCompleted\n                      }}\n                      review={\n                        skillsInformation[skill]\n                          ? skillsInformation[skill].availableForReview\n                          : false\n                      }\n                      onReviewClick={handleReviewSkill}\n                      onExploreClick={handleExploreSkill}\n                    />\n                  </div>\n                );\n              })\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nMyLearning.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nexport const learningPrioritiesPropTypes = {\n  ...CardsList.propTypes,\n  title: PropTypes.string,\n  subtitle: PropTypes.string\n};\n\nMyLearning.propTypes = {\n  skills: PropTypes.arrayOf(PropTypes.string),\n  selectedSkills: PropTypes.arrayOf(PropTypes.string),\n  skillsInformation: PropTypes.objectOf(\n    PropTypes.shape({\n      availableForReview: PropTypes.bool,\n      stats: PropTypes.shape({\n        score: PropTypes.number,\n        content: PropTypes.number,\n        contentCompleted: PropTypes.number,\n        questionsToReview: PropTypes.number,\n        learningTime: PropTypes.number\n      })\n    })\n  ),\n  skillsLocales: PropTypes.objectOf(PropTypes.string),\n  learnerFeature: PropTypes.bool,\n  isLoading: PropTypes.bool,\n  onSkillFocusConfirm: PropTypes.func,\n  onReviewSkill: PropTypes.func,\n  onExploreSkill: PropTypes.func,\n  learningPriorities: PropTypes.shape(learningPrioritiesPropTypes)\n};\n\nexport default MyLearning;\n"],"mappings":"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"}

package/lib/template/my-learning/style.css

@@ -3,6 +3,7 @@
 @value tablet from breakpoints;
 @value mobile from breakpoints;
 @value white from colors;
+@value cm_grey_50 from colors;
 @value cm_grey_100 from colors;
 @value cm_grey_500 from colors;
 
@@ -10,12 +11,11 @@
   background-color: white;
   min-height: 100%;
   width: 100%;
+  font-family: "Gilroy";
+  font-style: normal;
 }
 
 .container {
-  background-color: white;
-  font-family: "Gilroy";
-  font-style: normal;
   margin-top: 48px;
   margin-bottom: 48px;
   margin-left: auto;
@@ -28,10 +28,21 @@
   max-width: calc(1080px + 32px);
 }
 
+.cardsListContainer {
+  background-color: cm_grey_50;
+  padding: 48px 0;
+}
+
+/* to override wrapper's style from CardsList component */
+.cardsListContainer > :first-child {
+  padding: 0;
+}
+
 .skillFocusContainer {
   border-radius: 16px;
   border: 1px solid cm_grey_100;
   overflow: hidden;
+  margin-top: 48px;
   margin-bottom: 40px;
 }
 
@@ -272,4 +283,8 @@
   .skillFocusContent {
     flex-direction: column;
   }
+
+  .cardsListContainer {
+    padding: 24px 16px;
+  }
 }

package/lib/template/teams-dashboard/index.d.ts

@@ -39,7 +39,7 @@ declare namespace TeamsDashboard {
             dataName: PropTypes.Requireable<string>;
             title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
             showMore: PropTypes.Requireable<string>;
-            cards: PropTypes.Requireable<(PropTypes.InferProps<{
+            cards: PropTypes.Requireable<(NonNullable<PropTypes.InferProps<{
                 badge: PropTypes.Requireable<string>;
                 image: PropTypes.Requireable<string>;
                 disabled: PropTypes.Requireable<boolean>;
@@ -90,7 +90,12 @@ declare namespace TeamsDashboard {
                     progression: PropTypes.Requireable<string>;
                     adaptive: PropTypes.Requireable<string>;
                 }>>;
-            }> | null | undefined)[]>;
+            }> | PropTypes.InferProps<{
+                title: PropTypes.Requireable<string>;
+                tagLabel: PropTypes.Requireable<string>;
+                progression: PropTypes.Requireable<number>;
+                onClick: PropTypes.Requireable<(...args: any[]) => any>;
+            }> | null | undefined> | null | undefined)[]>;
             customStyle: PropTypes.Requireable<{
                 [x: string]: string | null | undefined;
             }>;
@@ -100,6 +105,7 @@ declare namespace TeamsDashboard {
                 showMoreOnLeftAriaLabel: PropTypes.Requireable<string>;
                 showMoreOnRightAriaLabel: PropTypes.Requireable<string>;
             }>>;
+            type: PropTypes.Requireable<string>;
             testingSizes: PropTypes.Requireable<any>;
         }> | null | undefined)[]>;
         const isLoading: PropTypes.Requireable<boolean>;