npm - @coorpacademy/components - Versions diffs - 11.32.12-alpha.0 → 11.32.12-alpha.4 - Mend

@coorpacademy/components 11.32.12-alpha.0 → 11.32.12-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (43) hide show

package/es/atom/button-link/style.css CHANGED Viewed

@@ -50,6 +50,7 @@
 .label {
   margin: 0 8px 0 8px;
+  text-wrap: nowrap;
   display: block;
 }

package/es/molecule/dashboard/cards-list/index.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@ declare class CardsList extends React.PureComponent<any, any, any> {
     static propTypes: {
         contentType: PropTypes.Requireable<string>;
         dataName: PropTypes.Requireable<string>;
-        title: PropTypes.Requireable<string>;
+        title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         showMore: PropTypes.Requireable<string>;
         cards: PropTypes.Requireable<(PropTypes.InferProps<{
             badge: PropTypes.Requireable<string>;
@@ -61,6 +61,7 @@ declare class CardsList extends React.PureComponent<any, any, any> {
                 adaptive: PropTypes.Requireable<string>;
             }>>;
         }> | null | undefined)[]>;
+        customStyle: PropTypes.Requireable<object>;
         onScroll: PropTypes.Requireable<(...args: any[]) => any>;
         onShowMore: PropTypes.Requireable<(...args: any[]) => any>;
         'arrows-aria-label': PropTypes.Requireable<PropTypes.InferProps<{

package/es/molecule/dashboard/cards-list/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/dashboard/cards-list/index.js"],"names":[],"mappings":";AAuFA;IACE;;;OAGG;IACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAcE~~;IAEF;;;;;;;;;;;;;;;;;;;;;;;MAGE;IAEF,wBAkCC;IA/BC;;;;;;;;MAQC;IAED,0DAAgE;IAsHlE,qBAiBC;IAED,qBAGC;IAED,sBAGC;IAED,0BASC;IAvJC,uEAA6D;IAyJ/D,mCAIC;IA5DD,oCAMC;IAGD,sCAIC;IA5DD,qBAGC;IAnCD,0BAMC;IAED,2BAYC;IAED,6BAOC;IASD,wCAuCC;IAGC,kBAA2B;IA6D7B,~~sBAkGC~~;CACF"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/dashboard/cards-list/index.js"],"names":[],"mappings":";AAuFA;IACE;;;OAGG;IACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAeE;IAEF;;;;;;;;;;;;;;;;;;;;;;;MAGE;IAEF,wBAkCC;IA/BC;;;;;;;;MAQC;IAED,0DAAgE;IAsHlE,qBAiBC;IAED,qBAGC;IAED,sBAGC;IAED,0BASC;IAvJC,uEAA6D;IAyJ/D,mCAIC;IA5DD,oCAMC;IAGD,sCAIC;IA5DD,qBAGC;IAnCD,0BAMC;IAED,2BAYC;IAED,6BAOC;IASD,wCAuCC;IAGC,kBAA2B;IA6D7B,sBAoGC;CACF"}

package/es/molecule/dashboard/cards-list/index.js CHANGED Viewed

@@ -300,6 +300,7 @@ class CardsList extends React.PureComponent {
       title,
       showMore,
       cards,
+      customStyle = {},
       onShowMore,
       dataName,
       contentType,
@@ -351,13 +352,15 @@ class CardsList extends React.PureComponent {
       height: 10,
       "aria-label": ariaLabel.showMoreOnRightAriaLabel
     }));
-    const titleView = /*#__PURE__*/React.createElement("span", {
+    const titleView = typeof title === 'string' ? /*#__PURE__*/React.createElement("span", {
       "data-name": "title",
       className: titleStyle,
       onClick: onShowMore
     }, /*#__PURE__*/React.createElement(IconView, {
       contentType: contentType
-    }), /*#__PURE__*/React.createElement("span", null, title));
+    }), /*#__PURE__*/React.createElement("span", null, title)) : /*#__PURE__*/React.createElement("span", {
+      className: style.titleNode
+    }, title);
     const hasPages = maxPages > 0;
     const showMoreView = hasPages && showMore && onShowMore ? /*#__PURE__*/React.createElement(ShowMoreLink, {
       className: hasPages ? style.showMoreBar : style.showMore,
@@ -369,6 +372,7 @@ class CardsList extends React.PureComponent {
     }, showMoreView, leftArrowView, rightArrowView) : null;
     return /*#__PURE__*/React.createElement("div", {
       className: style.wrapper,
+      style: customStyle,
       "data-name": "cardsList",
       "data-max-pages": `${maxPages}` // eslint-disable-next-line react/destructuring-assignment
       ,
@@ -395,9 +399,10 @@ CardsList.contextTypes = {
 CardsList.propTypes = process.env.NODE_ENV !== "production" ? {
   contentType: PropTypes.string,
   dataName: PropTypes.string,
-  title: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
   showMore: PropTypes.string,
   cards: PropTypes.arrayOf(PropTypes.shape(cardPropTypes)),
+  customStyle: PropTypes.object,
   onScroll: PropTypes.func,
   onShowMore: PropTypes.func,
   'arrows-aria-label': PropTypes.shape({

package/es/molecule/dashboard/cards-list/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["React","PropTypes","NovaCompositionNavigationArrowLeft","ArrowLeft","NovaCompositionNavigationArrowRight","ArrowRight","NovaSolidContentContentBook1","LearnerIcon","NovaCompositionCoorpacademyTimer","TimerIcon","Provider","Card","cardPropTypes","style","ShowMoreLink","props","onShowMore","showMore","className","contextTypes","skin","childContextTypes","propTypes","func","string","IconView","context","contentType","ICONS","chapter","course","dark","IconType","color","icon","computeWidth","card","type","nextPage","page","maxPages","CardsList","PureComponent","constructor","state","actualPage","scrollLeft","offsetWidth","possiblePositions","possiblePages","cardsWidth","handleScroll_","handleScroll","bind","handleOnLeft","handleOnRight","scrollTo","updateState","updatePages","setCardsWrapper","getScrollWidth","handleResize","testingSizes","componentDidMount","cardsWrapper","addEventListener","window","componentDidUpdate","cards","newCardsWidth","updatePaginationState","setState","componentWillUnmount","removeEventListener","cancel","wrapperWidth","wrapperScrollLeft","cardWidths","cardPositions","accWidth","cardWidth","acc","pageIndex","accPageWidth","pageWidth","skip","position","element","index","onScroll","leftBound","rightBound","leftIndex","rightIndex","limit","indexOfNextFirstCard","indexOf","nextPosition","render","title","dataName","ariaLabel","titleStyle","titleLink","cardsView","key","leftArrowView","circle","left","showMoreOnLeftAriaLabel","rightArrowView","right","showMoreOnRightAriaLabel","titleView","hasPages","showMoreView","showMoreBar","switchPagesView","pagingWrapper","wrapper","list","header","translate","arrayOf","shape","any"],"sources":["../../../../src/molecule/dashboard/cards-list/index.js"],"sourcesContent":["import React from 'react';\nimport {\n debounce,\n throttle,\n get,\n getOr,\n map,\n sum,\n last,\n pipe,\n toPairs,\n reduce,\n head,\n findIndex,\n findLastIndex\n} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport {\n NovaCompositionNavigationArrowLeft as ArrowLeft,\n NovaCompositionNavigationArrowRight as ArrowRight,\n NovaSolidContentContentBook1 as LearnerIcon,\n NovaCompositionCoorpacademyTimer as TimerIcon\n} from '@coorpacademy/nova-icons';\nimport Provider from '../../../atom/provider';\nimport Card, {cardPropTypes} from '../../card';\nimport style from './style.css';\n\nconst ShowMoreLink = props => {\n const {onShowMore, showMore, className} = props;\n return (\n <div className={className} onClick={onShowMore}>\n {showMore}\n </div>\n );\n};\n\nShowMoreLink.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nShowMoreLink.propTypes = {\n onShowMore: PropTypes.func,\n showMore: PropTypes.string,\n className: PropTypes.string\n};\n\nconst IconView = (props, context) => {\n const {skin} = context;\n const {contentType} = props;\n const ICONS = {\n chapter: TimerIcon,\n course: LearnerIcon\n };\n\n if (!contentType) {\n return null;\n }\n\n const dark = get('common.dark', skin);\n const IconType = ICONS[contentType];\n\n return (\n <div>\n <IconType style={{color: dark}} className={style.icon} data-contenttype={contentType} />\n </div>\n );\n};\n\nconst computeWidth = card => {\n switch (card && card.type) {\n case 'chapter':\n return 219;\n default:\n return 272;\n }\n};\n\nconst nextPage = (page, maxPages) => {\n if (page < 0) return maxPages;\n if (page > maxPages) return 0;\n return page;\n};\n\nIconView.propTypes = {\n contentType: PropTypes.string\n};\n\nclass CardsList extends React.PureComponent {\n /*\n IMPORTANT: update prop-types.ts too, 1st a migration of tests\n * is intended, then, a TS + functional refactor is planned.\n /\n static propTypes = {\n contentType: PropTypes.string,\n dataName: PropTypes.string,\n title: PropTypes.string,\n showMore: PropTypes.string,\n cards: PropTypes.arrayOf(PropTypes.shape(cardPropTypes)),\n onScroll: PropTypes.func,\n onShowMore: PropTypes.func,\n 'arrows-aria-label': PropTypes.shape({\n showMoreOnLeftAriaLabel: PropTypes.string,\n showMoreOnRightAriaLabel: PropTypes.string\n }),\n // eslint-disable-next-line react/forbid-prop-types\n testingSizes: PropTypes.any\n };\n\n static contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n actualPage: 0,\n maxPages: 0,\n scrollLeft: 0,\n offsetWidth: 0,\n possiblePositions: [],\n possiblePages: [],\n cardsWidth: 0\n };\n\n this.handleScroll_ = throttle(200, this.handleScroll.bind(this));\n this.handleScroll = this.handleScroll.bind(this);\n this.handleOnLeft = this.handleOnLeft.bind(this);\n this.handleOnRight = this.handleOnRight.bind(this);\n this.scrollTo = this.scrollTo.bind(this);\n this.updateState = debounce(200, this.updatePages.bind(this));\n this.updatePages = this.updatePages.bind(this);\n this.setCardsWrapper = this.setCardsWrapper.bind(this);\n this.getScrollWidth = this.getScrollWidth.bind(this);\n this.handleResize = this.handleResize.bind(this);\n\n // for testing purposes only - no other way to test this polluted component\n if (props.testingSizes) {\n const {offsetWidth, scrollLeft, maxPages, possiblePages, possiblePositions} =\n props.testingSizes;\n this.state.offsetWidth = offsetWidth;\n this.state.scrollLeft = scrollLeft;\n this.state.maxPages = maxPages;\n this.state.possiblePages = possiblePages;\n this.state.possiblePositions = possiblePositions;\n }\n }\n\n componentDidMount() {\n this.cardsWrapper.addEventListener('scroll', this.handleScroll_);\n\n if (window) {\n window.addEventListener('resize', this.handleResize);\n }\n }\n\n componentDidUpdate() {\n const {cards = []} = this.props;\n const {offsetWidth, cardsWidth} = this.state;\n const newCardsWidth = pipe(map(computeWidth), sum)(cards);\n\n if (newCardsWidth !== cardsWidth && offsetWidth !== 0) {\n this.updatePaginationState(cards);\n // eslint-disable-next-line react/no-did-update-set-state\n this.setState({\n cardsWidth: newCardsWidth\n });\n }\n }\n\n componentWillUnmount() {\n this.cardsWrapper.removeEventListener('scroll', this.handleScroll_);\n\n if (window) {\n window.removeEventListener('resize', this.handleResize);\n }\n this.updateState.cancel();\n }\n\n / istanbul ignore next /\n handleResize() {\n const {cards = []} = this.props;\n this.updatePaginationState(cards);\n }\n\n / istanbul ignore next /\n updatePaginationState(cards) {\n const {offsetWidth: wrapperWidth, scrollLeft: wrapperScrollLeft} = this.state;\n\n const cardWidths = map(computeWidth)(cards);\n\n const possiblePositions = pipe(\n reduce(\n ([cardPositions, accWidth], cardWidth) => [\n [...cardPositions, accWidth],\n cardWidth + accWidth\n ],\n [[], 0]\n ),\n head\n )(cardWidths);\n\n const possiblePages = pipe(\n reduce(\n ([acc, pageIndex, accPageWidth], cardWidth) => {\n const pageWidth = accPageWidth + cardWidth;\n if (pageWidth > wrapperWidth) {\n return [[...acc, pageIndex + 1], pageIndex + 1, cardWidth];\n }\n return [[...acc, pageIndex], pageIndex, pageWidth];\n },\n [[], 0, 0]\n ),\n head\n )(cardWidths);\n\n const skip = findIndex(position => position >= wrapperScrollLeft, possiblePositions);\n const actualPage = possiblePages[skip + 1];\n\n this.setState({\n possiblePositions,\n possiblePages,\n maxPages: last(possiblePages),\n actualPage\n });\n }\n\n setCardsWrapper(element) {\n this.cardsWrapper = element;\n this.setState({\n scrollLeft: this.cardsWrapper?.scrollLeft,\n offsetWidth: this.cardsWrapper?.offsetWidth\n });\n }\n\n / istanbul ignore next /\n getScrollWidth(index) {\n const {cards = []} = this.props;\n const card = cards[index];\n return computeWidth(card);\n }\n\n / istanbul ignore next */\n handleScroll() {\n const scrollLeft = this.cardsWrapper?.scrollLeft;\n this.setState({scrollLeft});\n\n const {possiblePositions, offsetWidth} = this.state;\n const {onScroll} = this.props;\n if (onScroll) {\n const leftBound = scrollLeft;\n const rightBound = scrollLeft + offsetWidth;\n\n const leftIndex = findIndex(position => position > leftBound, possiblePositions) - 1;\n const rightIndex = findLastIndex(position => position < rightBound, possiblePositions);\n const skip = leftIndex;\n const limit = rightIndex - skip + 1;\n\n onScroll(skip, limit);\n }\n }\n\n handleOnLeft() {\n const {actualPage, maxPages} = this.state;\n this.scrollTo(nextPage(actualPage - 1, maxPages));\n }\n\n handleOnRight() {\n const {actualPage, maxPages} = this.state;\n this.scrollTo(nextPage(actualPage + 1, maxPages));\n }\n\n scrollTo(page) {\n const {possiblePages, possiblePositions} = this.state;\n const indexOfNextFirstCard = possiblePages.indexOf(page);\n const nextPosition = possiblePositions[indexOfNextFirstCard];\n this.cardsWrapper.scrollLeft = nextPosition;\n this.updatePages(page);\n this.setState({\n scrollLeft: nextPosition\n });\n }\n\n updatePages(actualPage) {\n this.setState({\n actualPage\n });\n }\n\n render() {\n const {\n title,\n showMore,\n cards,\n onShowMore,\n dataName,\n contentType,\n 'arrows-aria-label': ariaLabel = {}\n } = this.props;\n const {skin} = this.context;\n const {maxPages} = this.state;\n const dark = getOr('#90A4AE', 'common.dark', skin);\n const titleStyle = onShowMore ? style.titleLink : style.title;\n const cardsView = pipe(\n toPairs,\n map(([key, card]) => {\n return (\n <div className={style.card} key={key}>\n <Card {...card} dataName={`${dataName}-${key}`} />\n </div>\n );\n })\n )(cards);\n const leftArrowView = (\n <div className={style.circle} onClick={this.handleOnLeft} data-name=\"card-list-left-arrow\">\n <ArrowLeft\n style={{color: dark}}\n className={style.left}\n width={10}\n height={10}\n aria-label={ariaLabel.showMoreOnLeftAriaLabel}\n />\n </div>\n );\n const rightArrowView = (\n <div className={style.circle} onClick={this.handleOnRight} data-name=\"card-list-right-arrow\">\n <ArrowRight\n style={{color: dark}}\n className={style.right}\n width={10}\n height={10}\n aria-label={ariaLabel.showMoreOnRightAriaLabel}\n />\n </div>\n );\n\n const titleView = (\n <span data-name=\"title\" className={titleStyle} onClick={onShowMore}>\n <IconView contentType={contentType} />\n <span>{title}</span>\n </span>\n );\n\n const hasPages = maxPages > 0;\n const showMoreView =\n hasPages && showMore && onShowMore ? (\n <ShowMoreLink\n className={hasPages ? style.showMoreBar : style.showMore}\n onShowMore={onShowMore}\n showMore={showMore}\n />\n ) : null;\n\n const switchPagesView = hasPages ? (\n <div className={style.pagingWrapper}>\n {showMoreView}\n {leftArrowView}\n {rightArrowView}\n </div>\n ) : null;\n\n return (\n <div\n className={style.wrapper}\n data-name=\"cardsList\"\n data-max-pages={`${maxPages}`}\n // eslint-disable-next-line react/destructuring-assignment\n data-actual-page={`${this.state.actualPage}`}\n data-scroll-left={this.cardsWrapper?.scrollLeft}\n >\n <div className={style.list}>\n <div>\n <div data-name=\"header\" className={style.header}>\n {titleView}\n {switchPagesView}\n </div>\n <div\n className={style.cards}\n data-testid=\"cards-view-wrapper\"\n ref={this.setCardsWrapper}\n >\n {cardsView}\n </div>\n </div>\n </div>\n </div>\n );\n }\n}\n\nexport default CardsList;\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAgBA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SACEC,kCAAkC,IAAIC,SADxC,EAEEC,mCAAmC,IAAIC,UAFzC,EAGEC,4BAA4B,IAAIC,WAHlC,EAIEC,gCAAgC,IAAIC,SAJtC,QAKO,0BALP;AAMA,OAAOC,QAAP,MAAqB,wBAArB;AACA,OAAOC,IAAP,IAAcC,aAAd,QAAkC,YAAlC;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,YAAY,GAAGC,KAAK,IAAI;EAC5B,MAAM;IAACC,UAAD;IAAaC,QAAb;IAAuBC;EAAvB,IAAoCH,KAA1C;EACA,oBACE;IAAK,SAAS,EAAEG,SAAhB;IAA2B,OAAO,EAAEF;EAApC,GACGC,QADH,CADF;AAKD,CAPD;;AASAH,YAAY,CAACK,YAAb,GAA4B;EAC1BC,IAAI,EAAEV,QAAQ,CAACW,iBAAT,CAA2BD;AADP,CAA5B;AAIAN,YAAY,CAACQ,SAAb,2CAAyB;EACvBN,UAAU,EAAEf,SAAS,CAACsB,IADC;EAEvBN,QAAQ,EAAEhB,SAAS,CAACuB,MAFG;EAGvBN,SAAS,EAAEjB,SAAS,CAACuB;AAHE,CAAzB;;AAMA,MAAMC,QAAQ,GAAG,CAACV,KAAD,EAAQW,OAAR,KAAoB;EACnC,MAAM;IAACN;EAAD,IAASM,OAAf;EACA,MAAM;IAACC;EAAD,IAAgBZ,KAAtB;EACA,MAAMa,KAAK,GAAG;IACZC,OAAO,EAAEpB,SADG;IAEZqB,MAAM,EAAEvB;EAFI,CAAd;;EAKA,IAAI,CAACoB,WAAL,EAAkB;IAChB,OAAO,IAAP;EACD;;EAED,MAAMI,IAAI,GAAG,KAAI,aAAJ,EAAmBX,IAAnB,CAAb;;EACA,MAAMY,QAAQ,GAAGJ,KAAK,CAACD,WAAD,CAAtB;EAEA,oBACE,8CACE,oBAAC,QAAD;IAAU,KAAK,EAAE;MAACM,KAAK,EAAEF;IAAR,CAAjB;IAAgC,SAAS,EAAElB,KAAK,CAACqB,IAAjD;IAAuD,oBAAkBP;EAAzE,EADF,CADF;AAKD,CApBD;;AAsBA,MAAMQ,YAAY,GAAGC,IAAI,IAAI;EAC3B,QAAQA,IAAI,IAAIA,IAAI,CAACC,IAArB;IACE,KAAK,SAAL;MACE,OAAO,GAAP;;IACF;MACE,OAAO,GAAP;EAJJ;AAMD,CAPD;;AASA,MAAMC,QAAQ,GAAG,CAACC,IAAD,EAAOC,QAAP,KAAoB;EACnC,IAAID,IAAI,GAAG,CAAX,EAAc,OAAOC,QAAP;EACd,IAAID,IAAI,GAAGC,QAAX,EAAqB,OAAO,CAAP;EACrB,OAAOD,IAAP;AACD,CAJD;;AAMAd,QAAQ,CAACH,SAAT,2CAAqB;EACnBK,WAAW,EAAE1B,SAAS,CAACuB;AADJ,CAArB;;AAIA,MAAMiB,SAAN,SAAwBzC,KAAK,CAAC0C,aAA9B,CAA4C;EAC1C;AACF;AACA;AACA;EAsBEC,WAAW,CAAC5B,KAAD,EAAQ;IACjB,MAAMA,KAAN;IAEA,KAAK6B,KAAL,GAAa;MACXC,UAAU,EAAE,CADD;MAEXL,QAAQ,EAAE,CAFC;MAGXM,UAAU,EAAE,CAHD;MAIXC,WAAW,EAAE,CAJF;MAKXC,iBAAiB,EAAE,EALR;MAMXC,aAAa,EAAE,EANJ;MAOXC,UAAU,EAAE;IAPD,CAAb;IAUA,KAAKC,aAAL,GAAqB,UAAS,GAAT,EAAc,KAAKC,YAAL,CAAkBC,IAAlB,CAAuB,IAAvB,CAAd,CAArB;IACA,KAAKD,YAAL,GAAoB,KAAKA,YAAL,CAAkBC,IAAlB,CAAuB,IAAvB,CAApB;IACA,KAAKC,YAAL,GAAoB,KAAKA,YAAL,CAAkBD,IAAlB,CAAuB,IAAvB,CAApB;IACA,KAAKE,aAAL,GAAqB,KAAKA,aAAL,CAAmBF,IAAnB,CAAwB,IAAxB,CAArB;IACA,KAAKG,QAAL,GAAgB,KAAKA,QAAL,CAAcH,IAAd,CAAmB,IAAnB,CAAhB;IACA,KAAKI,WAAL,GAAmB,UAAS,GAAT,EAAc,KAAKC,WAAL,CAAiBL,IAAjB,CAAsB,IAAtB,CAAd,CAAnB;IACA,KAAKK,WAAL,GAAmB,KAAKA,WAAL,CAAiBL,IAAjB,CAAsB,IAAtB,CAAnB;IACA,KAAKM,eAAL,GAAuB,KAAKA,eAAL,CAAqBN,IAArB,CAA0B,IAA1B,CAAvB;IACA,KAAKO,cAAL,GAAsB,KAAKA,cAAL,CAAoBP,IAApB,CAAyB,IAAzB,CAAtB;IACA,KAAKQ,YAAL,GAAoB,KAAKA,YAAL,CAAkBR,IAAlB,CAAuB,IAAvB,CAApB,CAtBiB,CAwBjB;;IACA,IAAItC,KAAK,CAAC+C,YAAV,EAAwB;MACtB,MAAM;QAACf,WAAD;QAAcD,UAAd;QAA0BN,QAA1B;QAAoCS,aAApC;QAAmDD;MAAnD,IACJjC,KAAK,CAAC+C,YADR;MAEA,KAAKlB,KAAL,CAAWG,WAAX,GAAyBA,WAAzB;MACA,KAAKH,KAAL,CAAWE,UAAX,GAAwBA,UAAxB;MACA,KAAKF,KAAL,CAAWJ,QAAX,GAAsBA,QAAtB;MACA,KAAKI,KAAL,CAAWK,aAAX,GAA2BA,aAA3B;MACA,KAAKL,KAAL,CAAWI,iBAAX,GAA+BA,iBAA/B;IACD;EACF;;EAEDe,iBAAiB,GAAG;IAClB,KAAKC,YAAL,CAAkBC,gBAAlB,CAAmC,QAAnC,EAA6C,KAAKd,aAAlD;;IAEA,IAAIe,MAAJ,EAAY;MACVA,MAAM,CAACD,gBAAP,CAAwB,QAAxB,EAAkC,KAAKJ,YAAvC;IACD;EACF;;EAEDM,kBAAkB,GAAG;IACnB,MAAM;MAACC,KAAK,GAAG;IAAT,IAAe,KAAKrD,KAA1B;IACA,MAAM;MAACgC,WAAD;MAAcG;IAAd,IAA4B,KAAKN,KAAvC;;IACA,MAAMyB,aAAa,GAAG,MAAK,KAAIlC,YAAJ,CAAL,QAA6BiC,KAA7B,CAAtB;;IAEA,IAAIC,aAAa,KAAKnB,UAAlB,IAAgCH,WAAW,KAAK,CAApD,EAAuD;MACrD,KAAKuB,qBAAL,CAA2BF,KAA3B,EADqD,CAErD;;MACA,KAAKG,QAAL,CAAc;QACZrB,UAAU,EAAEmB;MADA,CAAd;IAGD;EACF;;EAEDG,oBAAoB,GAAG;IACrB,KAAKR,YAAL,CAAkBS,mBAAlB,CAAsC,QAAtC,EAAgD,KAAKtB,aAArD;;IAEA,IAAIe,MAAJ,EAAY;MACVA,MAAM,CAACO,mBAAP,CAA2B,QAA3B,EAAqC,KAAKZ,YAA1C;IACD;;IACD,KAAKJ,WAAL,CAAiBiB,MAAjB;EACD;EAED;;;EACAb,YAAY,GAAG;IACb,MAAM;MAACO,KAAK,GAAG;IAAT,IAAe,KAAKrD,KAA1B;IACA,KAAKuD,qBAAL,CAA2BF,KAA3B;EACD;EAED;;;EACAE,qBAAqB,CAACF,KAAD,EAAQ;IAC3B,MAAM;MAACrB,WAAW,EAAE4B,YAAd;MAA4B7B,UAAU,EAAE8B;IAAxC,IAA6D,KAAKhC,KAAxE;;IAEA,MAAMiC,UAAU,GAAG,KAAI1C,YAAJ,EAAkBiC,KAAlB,CAAnB;;IAEA,MAAMpB,iBAAiB,GAAG,MACxB,QACE,CAAC,CAAC8B,aAAD,EAAgBC,QAAhB,CAAD,EAA4BC,SAA5B,KAA0C,CACxC,CAAC,GAAGF,aAAJ,EAAmBC,QAAnB,CADwC,EAExCC,SAAS,GAAGD,QAF4B,CAD5C,EAKE,CAAC,EAAD,EAAK,CAAL,CALF,CADwB,SASxBF,UATwB,CAA1B;;IAWA,MAAM5B,aAAa,GAAG,MACpB,QACE,CAAC,CAACgC,GAAD,EAAMC,SAAN,EAAiBC,YAAjB,CAAD,EAAiCH,SAAjC,KAA+C;MAC7C,MAAMI,SAAS,GAAGD,YAAY,GAAGH,SAAjC;;MACA,IAAII,SAAS,GAAGT,YAAhB,EAA8B;QAC5B,OAAO,CAAC,CAAC,GAAGM,GAAJ,EAASC,SAAS,GAAG,CAArB,CAAD,EAA0BA,SAAS,GAAG,CAAtC,EAAyCF,SAAzC,CAAP;MACD;;MACD,OAAO,CAAC,CAAC,GAAGC,GAAJ,EAASC,SAAT,CAAD,EAAsBA,SAAtB,EAAiCE,SAAjC,CAAP;IACD,CAPH,EAQE,CAAC,EAAD,EAAK,CAAL,EAAQ,CAAR,CARF,CADoB,SAYpBP,UAZoB,CAAtB;;IAcA,MAAMQ,IAAI,GAAG,WAAUC,QAAQ,IAAIA,QAAQ,IAAIV,iBAAlC,EAAqD5B,iBAArD,CAAb;;IACA,MAAMH,UAAU,GAAGI,aAAa,CAACoC,IAAI,GAAG,CAAR,CAAhC;IAEA,KAAKd,QAAL,CAAc;MACZvB,iBADY;MAEZC,aAFY;MAGZT,QAAQ,EAAE,MAAKS,aAAL,CAHE;MAIZJ;IAJY,CAAd;EAMD;;EAEDc,eAAe,CAAC4B,OAAD,EAAU;IACvB,KAAKvB,YAAL,GAAoBuB,OAApB;IACA,KAAKhB,QAAL,CAAc;MACZzB,UAAU,EAAE,KAAKkB,YAAL,EAAmBlB,UADnB;MAEZC,WAAW,EAAE,KAAKiB,YAAL,EAAmBjB;IAFpB,CAAd;EAID;EAED;;;EACAa,cAAc,CAAC4B,KAAD,EAAQ;IACpB,MAAM;MAACpB,KAAK,GAAG;IAAT,IAAe,KAAKrD,KAA1B;IACA,MAAMqB,IAAI,GAAGgC,KAAK,CAACoB,KAAD,CAAlB;IACA,OAAOrD,YAAY,CAACC,IAAD,CAAnB;EACD;EAED;;;EACAgB,YAAY,GAAG;IACb,MAAMN,UAAU,GAAG,KAAKkB,YAAL,EAAmBlB,UAAtC;IACA,KAAKyB,QAAL,CAAc;MAACzB;IAAD,CAAd;IAEA,MAAM;MAACE,iBAAD;MAAoBD;IAApB,IAAmC,KAAKH,KAA9C;IACA,MAAM;MAAC6C;IAAD,IAAa,KAAK1E,KAAxB;;IACA,IAAI0E,QAAJ,EAAc;MACZ,MAAMC,SAAS,GAAG5C,UAAlB;MACA,MAAM6C,UAAU,GAAG7C,UAAU,GAAGC,WAAhC;MAEA,MAAM6C,SAAS,GAAG,WAAUN,QAAQ,IAAIA,QAAQ,GAAGI,SAAjC,EAA4C1C,iBAA5C,IAAiE,CAAnF;;MACA,MAAM6C,UAAU,GAAG,eAAcP,QAAQ,IAAIA,QAAQ,GAAGK,UAArC,EAAiD3C,iBAAjD,CAAnB;;MACA,MAAMqC,IAAI,GAAGO,SAAb;MACA,MAAME,KAAK,GAAGD,UAAU,GAAGR,IAAb,GAAoB,CAAlC;MAEAI,QAAQ,CAACJ,IAAD,EAAOS,KAAP,CAAR;IACD;EACF;;EAEDxC,YAAY,GAAG;IACb,MAAM;MAACT,UAAD;MAAaL;IAAb,IAAyB,KAAKI,KAApC;IACA,KAAKY,QAAL,CAAclB,QAAQ,CAACO,UAAU,GAAG,CAAd,EAAiBL,QAAjB,CAAtB;EACD;;EAEDe,aAAa,GAAG;IACd,MAAM;MAACV,UAAD;MAAaL;IAAb,IAAyB,KAAKI,KAApC;IACA,KAAKY,QAAL,CAAclB,QAAQ,CAACO,UAAU,GAAG,CAAd,EAAiBL,QAAjB,CAAtB;EACD;;EAEDgB,QAAQ,CAACjB,IAAD,EAAO;IACb,MAAM;MAACU,aAAD;MAAgBD;IAAhB,IAAqC,KAAKJ,KAAhD;IACA,MAAMmD,oBAAoB,GAAG9C,aAAa,CAAC+C,OAAd,CAAsBzD,IAAtB,CAA7B;IACA,MAAM0D,YAAY,GAAGjD,iBAAiB,CAAC+C,oBAAD,CAAtC;IACA,KAAK/B,YAAL,CAAkBlB,UAAlB,GAA+BmD,YAA/B;IACA,KAAKvC,WAAL,CAAiBnB,IAAjB;IACA,KAAKgC,QAAL,CAAc;MACZzB,UAAU,EAAEmD;IADA,CAAd;EAGD;;EAEDvC,WAAW,CAACb,UAAD,EAAa;IACtB,KAAK0B,QAAL,CAAc;MACZ1B;IADY,CAAd;EAGD;;EAEDqD,MAAM,GAAG;IACP,MAAM;MACJC,KADI;MAEJlF,QAFI;MAGJmD,KAHI;MAIJpD,UAJI;MAKJoF,QALI;MAMJzE,WANI;MAOJ,qBAAqB0E,SAAS,GAAG;IAP7B,IAQF,KAAKtF,KART;IASA,MAAM;MAACK;IAAD,IAAS,KAAKM,OAApB;IACA,MAAM;MAACc;IAAD,IAAa,KAAKI,KAAxB;;IACA,MAAMb,IAAI,GAAG,OAAM,SAAN,EAAiB,aAAjB,EAAgCX,IAAhC,CAAb;;IACA,MAAMkF,UAAU,GAAGtF,UAAU,GAAGH,KAAK,CAAC0F,SAAT,GAAqB1F,KAAK,CAACsF,KAAxD;;IACA,MAAMK,SAAS,GAAG,gBAEhB,KAAI,CAAC,CAACC,GAAD,EAAMrE,IAAN,CAAD,KAAiB;MACnB,oBACE;QAAK,SAAS,EAAEvB,KAAK,CAACuB,IAAtB;QAA4B,GAAG,EAAEqE;MAAjC,gBACE,oBAAC,IAAD,eAAUrE,IAAV;QAAgB,QAAQ,EAAG,GAAEgE,QAAS,IAAGK,GAAI;MAA7C,GADF,CADF;IAKD,CAND,CAFgB,EAShBrC,KATgB,CAAlB;;IAUA,MAAMsC,aAAa,gBACjB;MAAK,SAAS,EAAE7F,KAAK,CAAC8F,MAAtB;MAA8B,OAAO,EAAE,KAAKrD,YAA5C;MAA0D,aAAU;IAApE,gBACE,oBAAC,SAAD;MACE,KAAK,EAAE;QAACrB,KAAK,EAAEF;MAAR,CADT;MAEE,SAAS,EAAElB,KAAK,CAAC+F,IAFnB;MAGE,KAAK,EAAE,EAHT;MAIE,MAAM,EAAE,EAJV;MAKE,cAAYP,SAAS,CAACQ;IALxB,EADF,CADF;IAWA,MAAMC,cAAc,gBAClB;MAAK,SAAS,EAAEjG,KAAK,CAAC8F,MAAtB;MAA8B,OAAO,EAAE,KAAKpD,aAA5C;MAA2D,aAAU;IAArE,gBACE,oBAAC,UAAD;MACE,KAAK,EAAE;QAACtB,KAAK,EAAEF;MAAR,CADT;MAEE,SAAS,EAAElB,KAAK,CAACkG,KAFnB;MAGE,KAAK,EAAE,EAHT;MAIE,MAAM,EAAE,EAJV;MAKE,cAAYV,SAAS,CAACW;IALxB,EADF,CADF;IAYA,MAAMC,SAAS,gBACb;MAAM,aAAU,OAAhB;MAAwB,SAAS,EAAEX,UAAnC;MAA+C,OAAO,EAAEtF;IAAxD,gBACE,oBAAC,QAAD;MAAU,WAAW,EAAEW;IAAvB,EADF,eAEE,kCAAOwE,KAAP,CAFF,CADF;IAOA,MAAMe,QAAQ,GAAG1E,QAAQ,GAAG,CAA5B;IACA,MAAM2E,YAAY,GAChBD,QAAQ,IAAIjG,QAAZ,IAAwBD,UAAxB,gBACE,oBAAC,YAAD;MACE,SAAS,EAAEkG,QAAQ,GAAGrG,KAAK,CAACuG,WAAT,GAAuBvG,KAAK,CAACI,QADlD;MAEE,UAAU,EAAED,UAFd;MAGE,QAAQ,EAAEC;IAHZ,EADF,GAMI,IAPN;IASA,MAAMoG,eAAe,GAAGH,QAAQ,gBAC9B;MAAK,SAAS,EAAErG,KAAK,CAACyG;IAAtB,GACGH,YADH,EAEGT,aAFH,EAGGI,cAHH,CAD8B,GAM5B,IANJ;IAQA,oBACE;MACE,SAAS,EAAEjG,KAAK,CAAC0G,OADnB;MAEE,aAAU,WAFZ;MAGE,kBAAiB,GAAE/E,QAAS,EAH9B,CAIE;MAJF;MAKE,oBAAmB,GAAE,KAAKI,KAAL,CAAWC,UAAW,EAL7C;MAME,oBAAkB,KAAKmB,YAAL,EAAmBlB;IANvC,gBAQE;MAAK,SAAS,EAAEjC,KAAK,CAAC2G;IAAtB,gBACE,8CACE;MAAK,aAAU,QAAf;MAAwB,SAAS,EAAE3G,KAAK,CAAC4G;IAAzC,GACGR,SADH,EAEGI,eAFH,CADF,eAKE;MACE,SAAS,EAAExG,KAAK,CAACuD,KADnB;MAEE,eAAY,oBAFd;MAGE,GAAG,EAAE,KAAKT;IAHZ,GAKG6C,SALH,CALF,CADF,CARF,CADF;EA0BD;;AA7SyC;;AAAtC/D,S,CAqBGtB,Y,GAAe;EACpBC,IAAI,EAAEV,QAAQ,CAACW,iBAAT,CAA2BD,IADb;EAEpBsG,SAAS,EAAEhH,QAAQ,CAACW,iBAAT,CAA2BqG;AAFlB,C;AArBlBjF,S,CAKGnB,S,2CAAY;EACjBK,WAAW,EAAE1B,SAAS,CAACuB,MADN;EAEjB4E,QAAQ,EAAEnG,SAAS,CAACuB,MAFH;EAGjB2E,KAAK,EAAElG,SAAS,CAACuB,MAHA;EAIjBP,QAAQ,EAAEhB,SAAS,CAACuB,MAJH;EAKjB4C,KAAK,EAAEnE,SAAS,CAAC0H,OAAV,CAAkB1H,SAAS,CAAC2H,KAAV,CAAgBhH,aAAhB,CAAlB,CALU;EAMjB6E,QAAQ,EAAExF,SAAS,CAACsB,IANH;EAOjBP,UAAU,EAAEf,SAAS,CAACsB,IAPL;EAQjB,qBAAqBtB,SAAS,CAAC2H,KAAV,CAAgB;IACnCf,uBAAuB,EAAE5G,SAAS,CAACuB,MADA;IAEnCwF,wBAAwB,EAAE/G,SAAS,CAACuB;EAFD,CAAhB,CARJ;EAYjB;EACAsC,YAAY,EAAE7D,SAAS,CAAC4H;AAbP,C;AA2SrB,eAAepF,SAAf"}
1	+ {"version":3,"file":"index.js","names":["React","PropTypes","NovaCompositionNavigationArrowLeft","ArrowLeft","NovaCompositionNavigationArrowRight","ArrowRight","NovaSolidContentContentBook1","LearnerIcon","NovaCompositionCoorpacademyTimer","TimerIcon","Provider","Card","cardPropTypes","style","ShowMoreLink","props","onShowMore","showMore","className","contextTypes","skin","childContextTypes","propTypes","func","string","IconView","context","contentType","ICONS","chapter","course","dark","IconType","color","icon","computeWidth","card","type","nextPage","page","maxPages","CardsList","PureComponent","constructor","state","actualPage","scrollLeft","offsetWidth","possiblePositions","possiblePages","cardsWidth","handleScroll_","handleScroll","bind","handleOnLeft","handleOnRight","scrollTo","updateState","updatePages","setCardsWrapper","getScrollWidth","handleResize","testingSizes","componentDidMount","cardsWrapper","addEventListener","window","componentDidUpdate","cards","newCardsWidth","updatePaginationState","setState","componentWillUnmount","removeEventListener","cancel","wrapperWidth","wrapperScrollLeft","cardWidths","cardPositions","accWidth","cardWidth","acc","pageIndex","accPageWidth","pageWidth","skip","position","element","index","onScroll","leftBound","rightBound","leftIndex","rightIndex","limit","indexOfNextFirstCard","indexOf","nextPosition","render","title","customStyle","dataName","ariaLabel","titleStyle","titleLink","cardsView","key","leftArrowView","circle","left","showMoreOnLeftAriaLabel","rightArrowView","right","showMoreOnRightAriaLabel","titleView","titleNode","hasPages","showMoreView","showMoreBar","switchPagesView","pagingWrapper","wrapper","list","header","translate","oneOfType","node","arrayOf","shape","object","any"],"sources":["../../../../src/molecule/dashboard/cards-list/index.js"],"sourcesContent":["import React from 'react';\nimport {\n debounce,\n throttle,\n get,\n getOr,\n map,\n sum,\n last,\n pipe,\n toPairs,\n reduce,\n head,\n findIndex,\n findLastIndex\n} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport {\n NovaCompositionNavigationArrowLeft as ArrowLeft,\n NovaCompositionNavigationArrowRight as ArrowRight,\n NovaSolidContentContentBook1 as LearnerIcon,\n NovaCompositionCoorpacademyTimer as TimerIcon\n} from '@coorpacademy/nova-icons';\nimport Provider from '../../../atom/provider';\nimport Card, {cardPropTypes} from '../../card';\nimport style from './style.css';\n\nconst ShowMoreLink = props => {\n const {onShowMore, showMore, className} = props;\n return (\n <div className={className} onClick={onShowMore}>\n {showMore}\n </div>\n );\n};\n\nShowMoreLink.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nShowMoreLink.propTypes = {\n onShowMore: PropTypes.func,\n showMore: PropTypes.string,\n className: PropTypes.string\n};\n\nconst IconView = (props, context) => {\n const {skin} = context;\n const {contentType} = props;\n const ICONS = {\n chapter: TimerIcon,\n course: LearnerIcon\n };\n\n if (!contentType) {\n return null;\n }\n\n const dark = get('common.dark', skin);\n const IconType = ICONS[contentType];\n\n return (\n <div>\n <IconType style={{color: dark}} className={style.icon} data-contenttype={contentType} />\n </div>\n );\n};\n\nconst computeWidth = card => {\n switch (card && card.type) {\n case 'chapter':\n return 219;\n default:\n return 272;\n }\n};\n\nconst nextPage = (page, maxPages) => {\n if (page < 0) return maxPages;\n if (page > maxPages) return 0;\n return page;\n};\n\nIconView.propTypes = {\n contentType: PropTypes.string\n};\n\nclass CardsList extends React.PureComponent {\n /*\n IMPORTANT: update prop-types.ts too, 1st a migration of tests\n * is intended, then, a TS + functional refactor is planned.\n /\n static propTypes = {\n contentType: PropTypes.string,\n dataName: PropTypes.string,\n title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),\n showMore: PropTypes.string,\n cards: PropTypes.arrayOf(PropTypes.shape(cardPropTypes)),\n customStyle: PropTypes.object,\n onScroll: PropTypes.func,\n onShowMore: PropTypes.func,\n 'arrows-aria-label': PropTypes.shape({\n showMoreOnLeftAriaLabel: PropTypes.string,\n showMoreOnRightAriaLabel: PropTypes.string\n }),\n // eslint-disable-next-line react/forbid-prop-types\n testingSizes: PropTypes.any\n };\n\n static contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n actualPage: 0,\n maxPages: 0,\n scrollLeft: 0,\n offsetWidth: 0,\n possiblePositions: [],\n possiblePages: [],\n cardsWidth: 0\n };\n\n this.handleScroll_ = throttle(200, this.handleScroll.bind(this));\n this.handleScroll = this.handleScroll.bind(this);\n this.handleOnLeft = this.handleOnLeft.bind(this);\n this.handleOnRight = this.handleOnRight.bind(this);\n this.scrollTo = this.scrollTo.bind(this);\n this.updateState = debounce(200, this.updatePages.bind(this));\n this.updatePages = this.updatePages.bind(this);\n this.setCardsWrapper = this.setCardsWrapper.bind(this);\n this.getScrollWidth = this.getScrollWidth.bind(this);\n this.handleResize = this.handleResize.bind(this);\n\n // for testing purposes only - no other way to test this polluted component\n if (props.testingSizes) {\n const {offsetWidth, scrollLeft, maxPages, possiblePages, possiblePositions} =\n props.testingSizes;\n this.state.offsetWidth = offsetWidth;\n this.state.scrollLeft = scrollLeft;\n this.state.maxPages = maxPages;\n this.state.possiblePages = possiblePages;\n this.state.possiblePositions = possiblePositions;\n }\n }\n\n componentDidMount() {\n this.cardsWrapper.addEventListener('scroll', this.handleScroll_);\n\n if (window) {\n window.addEventListener('resize', this.handleResize);\n }\n }\n\n componentDidUpdate() {\n const {cards = []} = this.props;\n const {offsetWidth, cardsWidth} = this.state;\n const newCardsWidth = pipe(map(computeWidth), sum)(cards);\n\n if (newCardsWidth !== cardsWidth && offsetWidth !== 0) {\n this.updatePaginationState(cards);\n // eslint-disable-next-line react/no-did-update-set-state\n this.setState({\n cardsWidth: newCardsWidth\n });\n }\n }\n\n componentWillUnmount() {\n this.cardsWrapper.removeEventListener('scroll', this.handleScroll_);\n\n if (window) {\n window.removeEventListener('resize', this.handleResize);\n }\n this.updateState.cancel();\n }\n\n / istanbul ignore next /\n handleResize() {\n const {cards = []} = this.props;\n this.updatePaginationState(cards);\n }\n\n / istanbul ignore next /\n updatePaginationState(cards) {\n const {offsetWidth: wrapperWidth, scrollLeft: wrapperScrollLeft} = this.state;\n\n const cardWidths = map(computeWidth)(cards);\n\n const possiblePositions = pipe(\n reduce(\n ([cardPositions, accWidth], cardWidth) => [\n [...cardPositions, accWidth],\n cardWidth + accWidth\n ],\n [[], 0]\n ),\n head\n )(cardWidths);\n\n const possiblePages = pipe(\n reduce(\n ([acc, pageIndex, accPageWidth], cardWidth) => {\n const pageWidth = accPageWidth + cardWidth;\n if (pageWidth > wrapperWidth) {\n return [[...acc, pageIndex + 1], pageIndex + 1, cardWidth];\n }\n return [[...acc, pageIndex], pageIndex, pageWidth];\n },\n [[], 0, 0]\n ),\n head\n )(cardWidths);\n\n const skip = findIndex(position => position >= wrapperScrollLeft, possiblePositions);\n const actualPage = possiblePages[skip + 1];\n\n this.setState({\n possiblePositions,\n possiblePages,\n maxPages: last(possiblePages),\n actualPage\n });\n }\n\n setCardsWrapper(element) {\n this.cardsWrapper = element;\n this.setState({\n scrollLeft: this.cardsWrapper?.scrollLeft,\n offsetWidth: this.cardsWrapper?.offsetWidth\n });\n }\n\n / istanbul ignore next /\n getScrollWidth(index) {\n const {cards = []} = this.props;\n const card = cards[index];\n return computeWidth(card);\n }\n\n / istanbul ignore next */\n handleScroll() {\n const scrollLeft = this.cardsWrapper?.scrollLeft;\n this.setState({scrollLeft});\n\n const {possiblePositions, offsetWidth} = this.state;\n const {onScroll} = this.props;\n if (onScroll) {\n const leftBound = scrollLeft;\n const rightBound = scrollLeft + offsetWidth;\n\n const leftIndex = findIndex(position => position > leftBound, possiblePositions) - 1;\n const rightIndex = findLastIndex(position => position < rightBound, possiblePositions);\n const skip = leftIndex;\n const limit = rightIndex - skip + 1;\n\n onScroll(skip, limit);\n }\n }\n\n handleOnLeft() {\n const {actualPage, maxPages} = this.state;\n this.scrollTo(nextPage(actualPage - 1, maxPages));\n }\n\n handleOnRight() {\n const {actualPage, maxPages} = this.state;\n this.scrollTo(nextPage(actualPage + 1, maxPages));\n }\n\n scrollTo(page) {\n const {possiblePages, possiblePositions} = this.state;\n const indexOfNextFirstCard = possiblePages.indexOf(page);\n const nextPosition = possiblePositions[indexOfNextFirstCard];\n this.cardsWrapper.scrollLeft = nextPosition;\n this.updatePages(page);\n this.setState({\n scrollLeft: nextPosition\n });\n }\n\n updatePages(actualPage) {\n this.setState({\n actualPage\n });\n }\n\n render() {\n const {\n title,\n showMore,\n cards,\n customStyle = {},\n onShowMore,\n dataName,\n contentType,\n 'arrows-aria-label': ariaLabel = {}\n } = this.props;\n const {skin} = this.context;\n const {maxPages} = this.state;\n const dark = getOr('#90A4AE', 'common.dark', skin);\n const titleStyle = onShowMore ? style.titleLink : style.title;\n const cardsView = pipe(\n toPairs,\n map(([key, card]) => {\n return (\n <div className={style.card} key={key}>\n <Card {...card} dataName={`${dataName}-${key}`} />\n </div>\n );\n })\n )(cards);\n const leftArrowView = (\n <div className={style.circle} onClick={this.handleOnLeft} data-name=\"card-list-left-arrow\">\n <ArrowLeft\n style={{color: dark}}\n className={style.left}\n width={10}\n height={10}\n aria-label={ariaLabel.showMoreOnLeftAriaLabel}\n />\n </div>\n );\n const rightArrowView = (\n <div className={style.circle} onClick={this.handleOnRight} data-name=\"card-list-right-arrow\">\n <ArrowRight\n style={{color: dark}}\n className={style.right}\n width={10}\n height={10}\n aria-label={ariaLabel.showMoreOnRightAriaLabel}\n />\n </div>\n );\n\n const titleView = typeof title === 'string' ? (\n <span data-name=\"title\" className={titleStyle} onClick={onShowMore}>\n <IconView contentType={contentType} />\n <span>{title}</span>\n </span>\n ) : <span className={style.titleNode}>{title}</span>;\n\n const hasPages = maxPages > 0;\n const showMoreView =\n hasPages && showMore && onShowMore ? (\n <ShowMoreLink\n className={hasPages ? style.showMoreBar : style.showMore}\n onShowMore={onShowMore}\n showMore={showMore}\n />\n ) : null;\n\n const switchPagesView = hasPages ? (\n <div className={style.pagingWrapper}>\n {showMoreView}\n {leftArrowView}\n {rightArrowView}\n </div>\n ) : null;\n\n return (\n <div\n className={style.wrapper}\n style={customStyle}\n data-name=\"cardsList\"\n data-max-pages={`${maxPages}`}\n // eslint-disable-next-line react/destructuring-assignment\n data-actual-page={`${this.state.actualPage}`}\n data-scroll-left={this.cardsWrapper?.scrollLeft}\n >\n <div className={style.list}>\n <div>\n <div data-name=\"header\" className={style.header}>\n {titleView}\n {switchPagesView}\n </div>\n <div\n className={style.cards}\n data-testid=\"cards-view-wrapper\"\n ref={this.setCardsWrapper}\n >\n {cardsView}\n </div>\n </div>\n </div>\n </div>\n );\n }\n}\n\nexport default CardsList;\n"],"mappings":"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"}

package/es/molecule/dashboard/cards-list/prop-types.d.ts CHANGED Viewed

@@ -1,9 +1,11 @@
+/// <reference types="react" />
 export declare type CardsListProps = {
     contentType: string;
     dataName: string;
-    title: string;
+    title: string | React.ReactNode;
     showMore: string;
     cards: Record<string, unknown>[];
+    customStyle: Record<string, unknown>;
     onScroll: (skip: number, limit: number) => void;
     onShowMore: () => void;
     'arrows-aria-label': {

package/es/molecule/dashboard/cards-list/prop-types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../../src/molecule/dashboard/cards-list/prop-types.ts"],"names":[],"mappings":"AAAA,oBAAY,cAAc,GAAG;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;~~IACd~~,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IACjC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,mBAAmB,EAAE;QACnB,uBAAuB,EAAE,MAAM,CAAC;QAChC,wBAAwB,EAAE,MAAM,CAAC;KAClC,CAAC;CACH,CAAC"}
1	+ {"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../../src/molecule/dashboard/cards-list/prop-types.ts"],"names":[],"mappings":";AAAA,oBAAY,cAAc,GAAG;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IACjC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,mBAAmB,EAAE;QACnB,uBAAuB,EAAE,MAAM,CAAC;QAChC,wBAAwB,EAAE,MAAM,CAAC;KAClC,CAAC;CACH,CAAC"}

package/es/molecule/dashboard/cards-list/prop-types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"prop-types.js","names":[],"sources":["../../../../src/molecule/dashboard/cards-list/prop-types.ts"],"sourcesContent":["export type CardsListProps = {\n contentType: string;\n dataName: string;\n title: string;\n showMore: string;\n cards: Record<string, unknown>[];\n onScroll: (skip: number, limit: number) => void;\n onShowMore: () => void;\n 'arrows-aria-label': {\n showMoreOnLeftAriaLabel: string;\n showMoreOnRightAriaLabel: string;\n };\n};\n"],"mappings":""}
1	+ {"version":3,"file":"prop-types.js","names":[],"sources":["../../../../src/molecule/dashboard/cards-list/prop-types.ts"],"sourcesContent":["export type CardsListProps = {\n contentType: string;\n dataName: string;\n title: string \| React.ReactNode;\n showMore: string;\n cards: Record<string, unknown>[];\n customStyle: Record<string, unknown>;\n onScroll: (skip: number, limit: number) => void;\n onShowMore: () => void;\n 'arrows-aria-label': {\n showMoreOnLeftAriaLabel: string;\n showMoreOnRightAriaLabel: string;\n };\n};\n"],"mappings":""}

package/es/molecule/dashboard/cards-list/style.css CHANGED Viewed

@@ -48,6 +48,10 @@
   color: dark;
 }
+.titleNode {
+  flex-grow: 1;
+}
 .titleLink {
   composes: title;
   cursor: pointer;

package/es/template/app-player/popin-end/index.d.ts CHANGED Viewed

@@ -107,7 +107,7 @@ declare namespace PopinEnd {
             recommendation: PropTypes.Requireable<PropTypes.InferProps<{
                 contentType: PropTypes.Requireable<string>;
                 dataName: PropTypes.Requireable<string>;
-                title: PropTypes.Requireable<string>;
+                title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
                 showMore: PropTypes.Requireable<string>;
                 cards: PropTypes.Requireable<(PropTypes.InferProps<{
                     badge: PropTypes.Requireable<string>;
@@ -161,6 +161,7 @@ declare namespace PopinEnd {
                         adaptive: PropTypes.Requireable<string>;
                     }>>;
                 }> | null | undefined)[]>;
+                customStyle: PropTypes.Requireable<object>;
                 onScroll: PropTypes.Requireable<(...args: any[]) => any>;
                 onShowMore: PropTypes.Requireable<(...args: any[]) => any>;
                 'arrows-aria-label': PropTypes.Requireable<PropTypes.InferProps<{

package/es/template/app-player/popin-end/summary.d.ts CHANGED Viewed

@@ -113,7 +113,7 @@ declare namespace Summary {
         const recommendation: PropTypes.Requireable<PropTypes.InferProps<{
             contentType: PropTypes.Requireable<string>;
             dataName: PropTypes.Requireable<string>;
-            title: PropTypes.Requireable<string>;
+            title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
             showMore: PropTypes.Requireable<string>;
             cards: PropTypes.Requireable<(PropTypes.InferProps<{
                 badge: PropTypes.Requireable<string>;
@@ -167,6 +167,7 @@ declare namespace Summary {
                     adaptive: PropTypes.Requireable<string>;
                 }>>;
             }> | null | undefined)[]>;
+            customStyle: PropTypes.Requireable<object>;
             onScroll: PropTypes.Requireable<(...args: any[]) => any>;
             onShowMore: PropTypes.Requireable<(...args: any[]) => any>;
             'arrows-aria-label': PropTypes.Requireable<PropTypes.InferProps<{

package/es/template/common/search-page/index.d.ts CHANGED Viewed

@@ -112,7 +112,7 @@ declare namespace SearchPage {
         const recommendations: PropTypes.Requireable<PropTypes.InferProps<{
             contentType: PropTypes.Requireable<string>;
             dataName: PropTypes.Requireable<string>;
-            title: PropTypes.Requireable<string>;
+            title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
             showMore: PropTypes.Requireable<string>;
             cards: PropTypes.Requireable<(PropTypes.InferProps<{
                 badge: PropTypes.Requireable<string>;
@@ -166,6 +166,7 @@ declare namespace SearchPage {
                     adaptive: PropTypes.Requireable<string>;
                 }>>;
             }> | null | undefined)[]>;
+            customStyle: PropTypes.Requireable<object>;
             onScroll: PropTypes.Requireable<(...args: any[]) => any>;
             onShowMore: PropTypes.Requireable<(...args: any[]) => any>;
             'arrows-aria-label': PropTypes.Requireable<PropTypes.InferProps<{

package/es/template/skill-detail/all-courses.css CHANGED Viewed

@@ -71,11 +71,50 @@
   margin-left: 12px;
 }
-@media mobile {
+.emptySearchResultContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.emptySearchResultTitle {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 28px;
+  margin-bottom: 8px;
+}
+.emptySearchResultDescription {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 22px;
+  margin-bottom: 16px;
+}
+.emptySearchResultClearSearch {
+  color: #0061FF;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+  cursor: pointer;
+}
+.emptySearchResultClearSearch:hover {
+  text-decoration: underline;
+}
+@media (max-width: 799px) {
   .searchAndSortSection {
     flex-direction: column;
   }
+  .sortSection {
+    margin-top: 16px;
+  }
+}
+@media mobile {
   .sortSection {
     flex-direction: column;
     gap: 16px;

package/es/template/skill-detail/all-courses.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"all-courses.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/all-courses.js"],"names":[],"mappings":";AA2CA,~~mEAmGC~~"}
1	+ {"version":3,"file":"all-courses.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/all-courses.js"],"names":[],"mappings":";AA2CA,mEAmHC"}

package/es/template/skill-detail/all-courses.js CHANGED Viewed

@@ -117,14 +117,16 @@ const AllCourses = (props, context) => {
     className: style.sortSection
   }, /*#__PURE__*/React.createElement(InputSwitch, {
     type: "switch",
+    name: translate('show_completed'),
     title: translate('show_completed'),
+    "aria-label": 'Show completed courses aria label',
     value: showCompleted,
     onChange: handleShowCompletedToggle
   }), /*#__PURE__*/React.createElement("div", {
     className: style.sortWrapper
   }, translate('sort_by'), sortView))), /*#__PURE__*/React.createElement("div", {
     className: style.filterWrapper
-  }, options.length > 2 ? options.map((filter, index) => {
+  }, options.length > 2 && searchResults.length > 0 ? options.map((filter, index) => {
     const {
       name,
       value,
@@ -146,10 +148,21 @@ const AllCourses = (props, context) => {
     }), value === 'ALL' ? /*#__PURE__*/React.createElement("div", {
       className: style.divider
     }) : null);
-  }) : null), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardsGrid, {
+  }) : null), /*#__PURE__*/React.createElement("div", null, searchResults.length > 0 ? /*#__PURE__*/React.createElement(CardsGrid, {
     list: searchResults,
     justifyContent: "left"
-  })));
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: style.emptySearchResultContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.emptySearchResultTitle
+  }, translate('empty_search_result_title', {
+    searchValue
+  })), /*#__PURE__*/React.createElement("div", {
+    className: style.emptySearchResultDescription
+  }, translate('empty_search_result_description')), /*#__PURE__*/React.createElement("div", {
+    className: style.emptySearchResultClearSearch,
+    onClick: handleSearchReset
+  }, translate('empty_search_result_clear_search')))));
 };
 AllCourses.contextTypes = {

package/es/template/skill-detail/all-courses.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"all-courses.js","names":["React","useState","useCallback","PropTypes","Provider","Select","SelectOptionPropTypes","ButtonLink","SearchForm","CardsGrid","searchValueIncluded","InputSwitch","style","FilterButton","props","context","selected","filter","onClick","skin","primarySkinColor","buttonProps","customStyle","backgroundColor","color","transition","width","label","contextTypes","childContextTypes","translate","propTypes","bool","string","func","AllCourses","skillIncludedCourses","filters","sorting","options","onChange","list","showCompleted","setShowCompleted","searchValue","setSearchValue","searchResults","setSearchResults","sort","a","b","progressA","progress","progressB","sortView","undefined","handleSearch","value","skill","title","handleSearchReset","handleShowCompletedToggle","tempShowCompleted","continueLearningWrapper","continueLearningTitle","continueLearningNumber","length","searchAndSortSection","searchWrapper","placeholder","sortSection","sortWrapper","filterWrapper","map","index","name","handleChange","filterButtonWrapper","divider","shape","arrayOf"],"sources":["../../../src/template/skill-detail/all-courses.js"],"sourcesContent":["import React, {useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {get} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport SearchForm from '../../molecule/search-form';\nimport CardsGrid from '../../organism/cards-grid';\nimport searchValueIncluded from '../../util/search-value-included';\nimport InputSwitch from '../../atom/input-switch';\nimport style from './all-courses.css';\n\nconst FilterButton = (props, context) => {\n const {selected, filter, onClick} = props;\n const {skin} = context;\n const primarySkinColor = get('common.primary', skin);\n\n const buttonProps = {\n customStyle: {\n backgroundColor: selected ? primarySkinColor : '#E1E1E3',\n color: selected ? '#FFFFFF' : '#515161',\n transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n width: 'fit-content'\n },\n label: filter,\n onClick,\n 'data-name': 'filter-type-course-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 selected: PropTypes.bool,\n filter: PropTypes.string,\n onClick: PropTypes.func\n};\n\nconst AllCourses = (props, context) => {\n const {skillIncludedCourses, filters, sorting} = props;\n const {options, onChange} = filters;\n const {list} = skillIncludedCourses;\n const {translate} = context;\n const [showCompleted, setShowCompleted] = useState(true);\n const [searchValue, setSearchValue] = useState('');\n const [searchResults, setSearchResults] = useState(\n list.sort((a, b) => {\n const progressA = a.progress ?? 0;\n const progressB = b.progress ?? 0;\n return progressB - progressA;\n })\n );\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 handleSearch = useCallback(\n value => {\n setSearchValue(value);\n setSearchResults(list.filter(skill => searchValueIncluded(skill.title, value)));\n },\n [list, setSearchValue, setSearchResults]\n );\n\n const handleSearchReset = useCallback(() => {\n setSearchValue('');\n setSearchResults(list);\n }, [list, setSearchValue, setSearchResults]);\n\n const handleShowCompletedToggle = useCallback(() => {\n const tempShowCompleted = !showCompleted;\n setShowCompleted(tempShowCompleted);\n if (tempShowCompleted) {\n setSearchResults(list);\n handleSearchReset();\n } else {\n setSearchResults(searchResults.filter(skill => skill.progress === 0));\n }\n }, [searchResults, showCompleted, setShowCompleted]);\n\n return (\n <>\n <div className={style.continueLearningWrapper}>\n <span className={style.continueLearningTitle}>{translate('all_courses')}</span>\n <span className={style.continueLearningNumber}>{skillIncludedCourses.list.length}</span>\n </div>\n <div className={style.searchAndSortSection}>\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 className={style.sortSection}>\n <InputSwitch\n type=\"switch\"\n title={translate('show_completed')}\n value={showCompleted}\n onChange={handleShowCompletedToggle}\n />\n <div className={style.sortWrapper}>\n {translate('sort_by')}\n {sortView}\n </div>\n </div>\n </div>\n <div className={style.filterWrapper}>\n {options.length > 2\n ? options.map((filter, index) => {\n const {name, value, selected} = filter;\n\n function handleChange() {\n onChange(value);\n handleSearchReset();\n }\n return (\n <div key={index} className={style.filterButtonWrapper}>\n <FilterButton selected={selected} filter={name} onClick={handleChange} />\n {value === 'ALL' ? <div className={style.divider} /> : null}\n </div>\n );\n })\n : null}\n </div>\n <div>\n <CardsGrid list={searchResults} justifyContent=\"left\" />\n </div>\n </>\n );\n};\n\nAllCourses.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nAllCourses.propTypes = {\n skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n filters: PropTypes.shape({\n onChange: PropTypes.func,\n options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n }),\n sorting: PropTypes.shape(Select.propTypes)\n};\n\nexport default AllCourses;\n"],"mappings":"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"}
1	+ {"version":3,"file":"all-courses.js","names":["React","useState","useCallback","PropTypes","Provider","Select","SelectOptionPropTypes","ButtonLink","SearchForm","CardsGrid","searchValueIncluded","InputSwitch","style","FilterButton","props","context","selected","filter","onClick","skin","primarySkinColor","buttonProps","customStyle","backgroundColor","color","transition","width","label","contextTypes","childContextTypes","translate","propTypes","bool","string","func","AllCourses","skillIncludedCourses","filters","sorting","options","onChange","list","showCompleted","setShowCompleted","searchValue","setSearchValue","searchResults","setSearchResults","sort","a","b","progressA","progress","progressB","sortView","undefined","handleSearch","value","skill","title","handleSearchReset","handleShowCompletedToggle","tempShowCompleted","continueLearningWrapper","continueLearningTitle","continueLearningNumber","length","searchAndSortSection","searchWrapper","placeholder","sortSection","sortWrapper","filterWrapper","map","index","name","handleChange","filterButtonWrapper","divider","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","shape","arrayOf"],"sources":["../../../src/template/skill-detail/all-courses.js"],"sourcesContent":["import React, {useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {get} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport SearchForm from '../../molecule/search-form';\nimport CardsGrid from '../../organism/cards-grid';\nimport searchValueIncluded from '../../util/search-value-included';\nimport InputSwitch from '../../atom/input-switch';\nimport style from './all-courses.css';\n\nconst FilterButton = (props, context) => {\n const {selected, filter, onClick} = props;\n const {skin} = context;\n const primarySkinColor = get('common.primary', skin);\n\n const buttonProps = {\n customStyle: {\n backgroundColor: selected ? primarySkinColor : '#E1E1E3',\n color: selected ? '#FFFFFF' : '#515161',\n transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n width: 'fit-content'\n },\n label: filter,\n onClick,\n 'data-name': 'filter-type-course-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 selected: PropTypes.bool,\n filter: PropTypes.string,\n onClick: PropTypes.func\n};\n\nconst AllCourses = (props, context) => {\n const {skillIncludedCourses, filters, sorting} = props;\n const {options, onChange} = filters;\n const {list} = skillIncludedCourses;\n const {translate} = context;\n const [showCompleted, setShowCompleted] = useState(true);\n const [searchValue, setSearchValue] = useState('');\n const [searchResults, setSearchResults] = useState(\n list.sort((a, b) => {\n const progressA = a.progress ?? 0;\n const progressB = b.progress ?? 0;\n return progressB - progressA;\n })\n );\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 handleSearch = useCallback(\n value => {\n setSearchValue(value);\n setSearchResults(list.filter(skill => searchValueIncluded(skill.title, value)));\n },\n [list, setSearchValue, setSearchResults]\n );\n\n const handleSearchReset = useCallback(() => {\n setSearchValue('');\n setSearchResults(list);\n }, [list, setSearchValue, setSearchResults]);\n\n const handleShowCompletedToggle = useCallback(() => {\n const tempShowCompleted = !showCompleted;\n setShowCompleted(tempShowCompleted);\n if (tempShowCompleted) {\n setSearchResults(list);\n handleSearchReset();\n } else {\n setSearchResults(searchResults.filter(skill => skill.progress === 0));\n }\n }, [searchResults, showCompleted, setShowCompleted]);\n\n return (\n <>\n <div className={style.continueLearningWrapper}>\n <span className={style.continueLearningTitle}>{translate('all_courses')}</span>\n <span className={style.continueLearningNumber}>{skillIncludedCourses.list.length}</span>\n </div>\n <div className={style.searchAndSortSection}>\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 className={style.sortSection}>\n <InputSwitch\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 <div className={style.sortWrapper}>\n {translate('sort_by')}\n {sortView}\n </div>\n </div>\n </div>\n <div className={style.filterWrapper}>\n {options.length > 2 && searchResults.length > 0\n ? options.map((filter, index) => {\n const {name, value, selected} = filter;\n\n function handleChange() {\n onChange(value);\n handleSearchReset();\n }\n return (\n <div key={index} className={style.filterButtonWrapper}>\n <FilterButton selected={selected} filter={name} onClick={handleChange} />\n {value === 'ALL' ? <div className={style.divider} /> : null}\n </div>\n );\n })\n : null}\n </div>\n <div>\n {searchResults.length > 0 ? (\n <CardsGrid list={searchResults} justifyContent=\"left\" />\n ) : (\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>\n </>\n );\n};\n\nAllCourses.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nAllCourses.propTypes = {\n skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n filters: PropTypes.shape({\n onChange: PropTypes.func,\n options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n }),\n sorting: PropTypes.shape(Select.propTypes)\n};\n\nexport default AllCourses;\n"],"mappings":"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"}

package/es/template/skill-detail/continue-learning.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"continue-learning.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/continue-learning.js"],"names":[],"mappings":";~~AAMA~~,~~gFAmBC~~"}
1	+ {"version":3,"file":"continue-learning.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/continue-learning.js"],"names":[],"mappings":";AAOA,gFAkBC"}

package/es/template/skill-detail/continue-learning.js CHANGED Viewed

@@ -1,9 +1,8 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from 'react';
 import PropTypes from 'prop-types';
 import Provider from '../../atom/provider';
 import CardsGrid from '../../organism/cards-grid';
+import CardsList from '../../molecule/dashboard/cards-list';
 import style from './continue-learning.css';
 const ContinueLearning = (props, context) => {
@@ -18,15 +17,19 @@ const ContinueLearning = (props, context) => {
     return null;
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: style.continueLearningWrapper
-  }, /*#__PURE__*/React.createElement("span", {
+  const Title = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     className: style.continueLearningTitle
   }, translate('continue_learning')), /*#__PURE__*/React.createElement("span", {
     className: style.continueLearningNumber
-  }, ongoingCourses.list.length)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardsGrid, _extends({}, ongoingCourses, {
-    justifyContent: "left"
-  }))));
+  }, ongoingCourses.list.length));
+  return /*#__PURE__*/React.createElement(CardsList, {
+    cards: ongoingCourses.list,
+    title: /*#__PURE__*/React.createElement(Title, null),
+    customStyle: {
+      padding: '16px 0px 8px'
+    }
+  });
 };
 ContinueLearning.contextTypes = {

package/es/template/skill-detail/continue-learning.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"continue-learning.js","names":["React","PropTypes","Provider","CardsGrid","style","ContinueLearning","props","context","ongoingCourses","translate","list","length","~~continueLearningWrapper~~","continueLearningTitle","continueLearningNumber","contextTypes","skin","childContextTypes","propTypes","shape"],"sources":["../../../src/template/skill-detail/continue-learning.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Provider from '../../atom/provider';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './continue-learning.css';\n\nconst ContinueLearning = (props, context) => {\n const {ongoingCourses} = props;\n const {translate} = context;\n\n if (ongoingCourses.list.length === 0) {\n return null;\n }\n\n ~~return~~ (\n <>\n <~~div className={style.continueLearningWrapper}>\n <~~span className={style.continueLearningTitle}>{translate('continue_learning')}</span>\n <span className={style.continueLearningNumber}>{ongoingCourses.list.length}</span>\n ~~</div>\~~n ~~<div>\~~n <~~CardsGrid~~ {~~...~~ongoingCourses} ~~justifyContent=\"left\"~~ />\n ~~</div>\n </>\n~~ );\n};\n\nContinueLearning.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nContinueLearning.propTypes = {\n ongoingCourses: PropTypes.shape(CardsGrid.propTypes)\n};\n\nexport default ContinueLearning;\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,SAAP,MAAsB,2BAAtB;AACA,OAAOC,KAAP,MAAkB,yBAAlB;;AAEA,MAAMC,gBAAgB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EAC3C,MAAM;IAACC;EAAD,IAAmBF,KAAzB;EACA,MAAM;IAACG;EAAD,IAAcF,OAApB;;EAEA,IAAIC,cAAc,CAACE,IAAf,CAAoBC,MAApB,KAA+B,CAAnC,EAAsC;IACpC,OAAO,IAAP;EACD;;EAED,~~oBACE~~,~~uDACE;IAAK~~,~~SAAS~~,~~EAAEP~~,~~KAAK,CAACQ~~;~~EAAtB,gBACE;~~IAAM,SAAS,EAAER,KAAK,CAACS;EAAvB,GAA+CJ,SAAS,CAAC,mBAAD,CAAxD,CADF,eAEE;IAAM,SAAS,EAAEL,KAAK,CAACU;EAAvB,GAAgDN,cAAc,CAACE,IAAf,CAAoBC,MAApE,CAFF,CADF,~~eAKE~~,~~8CACE,~~oBAAC,SAAD,~~eAAeH~~,~~cAAf;IAA+B~~,cAAc,~~EAAC~~;~~EAA9C~~,~~GADF~~,~~CALF~~,~~CADF~~;~~AAWD~~,~~CAnBD~~;;~~AAqBAH~~,gBAAgB,~~CAACU~~,YAAjB,GAAgC;EAC9BC,IAAI,~~EAAEd~~,QAAQ,~~CAACe~~,iBAAT,CAA2BD,IADH;~~EAE9BP~~,SAAS,~~EAAEP~~,QAAQ,~~CAACe~~,iBAAT,~~CAA2BR~~;AAFR,CAAhC;AAKAJ,gBAAgB,~~CAACa~~,SAAjB,2CAA6B;~~EAC3BV~~,cAAc,~~EAAEP~~,SAAS,~~CAACkB~~,KAAV,~~CAAgBhB~~,SAAS,~~CAACe~~,SAA1B;AADW,CAA7B;AAIA,~~eAAeb~~,gBAAf"}
1	+ {"version":3,"file":"continue-learning.js","names":["React","PropTypes","Provider","CardsGrid","CardsList","style","ContinueLearning","props","context","ongoingCourses","translate","list","length","Title","continueLearningTitle","continueLearningNumber","padding","contextTypes","skin","childContextTypes","propTypes","shape"],"sources":["../../../src/template/skill-detail/continue-learning.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Provider from '../../atom/provider';\nimport CardsGrid from '../../organism/cards-grid';\nimport CardsList from '../../molecule/dashboard/cards-list';\nimport style from './continue-learning.css';\n\nconst ContinueLearning = (props, context) => {\n const {ongoingCourses} = props;\n const {translate} = context;\n\n if (ongoingCourses.list.length === 0) {\n return null;\n }\n\n const Title = () => (\n <>\n <span className={style.continueLearningTitle}>{translate('continue_learning')}</span>\n <span className={style.continueLearningNumber}>{ongoingCourses.list.length}</span>\n </>\n );\n\n return (\n <CardsList cards={ongoingCourses.list} title={<Title />} customStyle={{padding: '16px 0px 8px'}}/>\n );\n};\n\nContinueLearning.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nContinueLearning.propTypes = {\n ongoingCourses: PropTypes.shape(CardsGrid.propTypes)\n};\n\nexport default ContinueLearning;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,SAAP,MAAsB,2BAAtB;AACA,OAAOC,SAAP,MAAsB,qCAAtB;AACA,OAAOC,KAAP,MAAkB,yBAAlB;;AAEA,MAAMC,gBAAgB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EAC3C,MAAM;IAACC;EAAD,IAAmBF,KAAzB;EACA,MAAM;IAACG;EAAD,IAAcF,OAApB;;EAEA,IAAIC,cAAc,CAACE,IAAf,CAAoBC,MAApB,KAA+B,CAAnC,EAAsC;IACpC,OAAO,IAAP;EACD;;EAED,MAAMC,KAAK,GAAG,mBACZ,uDACE;IAAM,SAAS,EAAER,KAAK,CAACS;EAAvB,GAA+CJ,SAAS,CAAC,mBAAD,CAAxD,CADF,eAEE;IAAM,SAAS,EAAEL,KAAK,CAACU;EAAvB,GAAgDN,cAAc,CAACE,IAAf,CAAoBC,MAApE,CAFF,CADF;;EAOA,oBACE,oBAAC,SAAD;IAAW,KAAK,EAAEH,cAAc,CAACE,IAAjC;IAAuC,KAAK,eAAE,oBAAC,KAAD,OAA9C;IAAyD,WAAW,EAAE;MAACK,OAAO,EAAE;IAAV;EAAtE,EADF;AAGD,CAlBD;;AAoBAV,gBAAgB,CAACW,YAAjB,GAAgC;EAC9BC,IAAI,EAAEhB,QAAQ,CAACiB,iBAAT,CAA2BD,IADH;EAE9BR,SAAS,EAAER,QAAQ,CAACiB,iBAAT,CAA2BT;AAFR,CAAhC;AAKAJ,gBAAgB,CAACc,SAAjB,2CAA6B;EAC3BX,cAAc,EAAER,SAAS,CAACoB,KAAV,CAAgBlB,SAAS,CAACiB,SAA1B;AADW,CAA7B;AAIA,eAAed,gBAAf"}

package/es/template/skill-detail/style.css CHANGED Viewed

@@ -1,6 +1,7 @@
 @value colors: "../../variables/colors.css";
 @value breakpoints: "../../variables/breakpoints.css";
 @value tablet from breakpoints;
+@value mobile from breakpoints;
 @value xtraLightGrey from colors;
 @value cm_grey_100 from colors;
 @value cm_grey_200 from colors;
@@ -161,3 +162,13 @@
     margin-top: 32px;
   }
 }
+@media mobile {
+  .ctaWrapper {
+    flex-direction: column;
+    button {
+      width: 100% !important;
+    }
+  }
+}

package/es/template/teams-dashboard/index.d.ts CHANGED Viewed

@@ -37,7 +37,7 @@ declare namespace TeamsDashboard {
         const sections: PropTypes.Requireable<(PropTypes.InferProps<{
             contentType: PropTypes.Requireable<string>;
             dataName: PropTypes.Requireable<string>;
-            title: PropTypes.Requireable<string>;
+            title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
             showMore: PropTypes.Requireable<string>;
             cards: PropTypes.Requireable<(PropTypes.InferProps<{
                 badge: PropTypes.Requireable<string>;
@@ -91,6 +91,7 @@ declare namespace TeamsDashboard {
                     adaptive: PropTypes.Requireable<string>;
                 }>>;
             }> | null | undefined)[]>;
+            customStyle: PropTypes.Requireable<object>;
             onScroll: PropTypes.Requireable<(...args: any[]) => any>;
             onShowMore: PropTypes.Requireable<(...args: any[]) => any>;
             'arrows-aria-label': PropTypes.Requireable<PropTypes.InferProps<{

package/lib/atom/button-link/style.css CHANGED Viewed

@@ -50,6 +50,7 @@
 .label {
   margin: 0 8px 0 8px;
+  text-wrap: nowrap;
   display: block;
 }

package/lib/molecule/dashboard/cards-list/index.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@ declare class CardsList extends React.PureComponent<any, any, any> {
     static propTypes: {
         contentType: PropTypes.Requireable<string>;
         dataName: PropTypes.Requireable<string>;
-        title: PropTypes.Requireable<string>;
+        title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         showMore: PropTypes.Requireable<string>;
         cards: PropTypes.Requireable<(PropTypes.InferProps<{
             badge: PropTypes.Requireable<string>;
@@ -61,6 +61,7 @@ declare class CardsList extends React.PureComponent<any, any, any> {
                 adaptive: PropTypes.Requireable<string>;
             }>>;
         }> | null | undefined)[]>;
+        customStyle: PropTypes.Requireable<object>;
         onScroll: PropTypes.Requireable<(...args: any[]) => any>;
         onShowMore: PropTypes.Requireable<(...args: any[]) => any>;
         'arrows-aria-label': PropTypes.Requireable<PropTypes.InferProps<{

package/lib/molecule/dashboard/cards-list/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/dashboard/cards-list/index.js"],"names":[],"mappings":";AAuFA;IACE;;;OAGG;IACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAcE~~;IAEF;;;;;;;;;;;;;;;;;;;;;;;MAGE;IAEF,wBAkCC;IA/BC;;;;;;;;MAQC;IAED,0DAAgE;IAsHlE,qBAiBC;IAED,qBAGC;IAED,sBAGC;IAED,0BASC;IAvJC,uEAA6D;IAyJ/D,mCAIC;IA5DD,oCAMC;IAGD,sCAIC;IA5DD,qBAGC;IAnCD,0BAMC;IAED,2BAYC;IAED,6BAOC;IASD,wCAuCC;IAGC,kBAA2B;IA6D7B,~~sBAkGC~~;CACF"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/dashboard/cards-list/index.js"],"names":[],"mappings":";AAuFA;IACE;;;OAGG;IACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAeE;IAEF;;;;;;;;;;;;;;;;;;;;;;;MAGE;IAEF,wBAkCC;IA/BC;;;;;;;;MAQC;IAED,0DAAgE;IAsHlE,qBAiBC;IAED,qBAGC;IAED,sBAGC;IAED,0BASC;IAvJC,uEAA6D;IAyJ/D,mCAIC;IA5DD,oCAMC;IAGD,sCAIC;IA5DD,qBAGC;IAnCD,0BAMC;IAED,2BAYC;IAED,6BAOC;IASD,wCAuCC;IAGC,kBAA2B;IA6D7B,sBAoGC;CACF"}

package/lib/molecule/dashboard/cards-list/index.js CHANGED Viewed

@@ -319,6 +319,7 @@ class CardsList extends _react.default.PureComponent {
       title,
       showMore,
       cards,
+      customStyle = {},
       onShowMore,
       dataName,
       contentType,
@@ -369,14 +370,15 @@ class CardsList extends _react.default.PureComponent {
       "aria-label": ariaLabel.showMoreOnRightAriaLabel
     }));
-    const titleView = /*#__PURE__*/_react.default.createElement("span", {
+    const titleView = typeof title === 'string' ? /*#__PURE__*/_react.default.createElement("span", {
       "data-name": "title",
       className: titleStyle,
       onClick: onShowMore
     }, /*#__PURE__*/_react.default.createElement(IconView, {
       contentType: contentType
-    }), /*#__PURE__*/_react.default.createElement("span", null, title));
+    }), /*#__PURE__*/_react.default.createElement("span", null, title)) : /*#__PURE__*/_react.default.createElement("span", {
+      className: _style.default.titleNode
+    }, title);
     const hasPages = maxPages > 0;
     const showMoreView = hasPages && showMore && onShowMore ? /*#__PURE__*/_react.default.createElement(ShowMoreLink, {
       className: hasPages ? _style.default.showMoreBar : _style.default.showMore,
@@ -388,6 +390,7 @@ class CardsList extends _react.default.PureComponent {
     }, showMoreView, leftArrowView, rightArrowView) : null;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.wrapper,
+      style: customStyle,
       "data-name": "cardsList",
       "data-max-pages": `${maxPages}` // eslint-disable-next-line react/destructuring-assignment
       ,
@@ -414,9 +417,10 @@ CardsList.contextTypes = {
 CardsList.propTypes = process.env.NODE_ENV !== "production" ? {
   contentType: _propTypes.default.string,
   dataName: _propTypes.default.string,
-  title: _propTypes.default.string,
+  title: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string]),
   showMore: _propTypes.default.string,
   cards: _propTypes.default.arrayOf(_propTypes.default.shape(_card.cardPropTypes)),
+  customStyle: _propTypes.default.object,
   onScroll: _propTypes.default.func,
   onShowMore: _propTypes.default.func,
   'arrows-aria-label': _propTypes.default.shape({

package/lib/molecule/dashboard/cards-list/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["ShowMoreLink","props","onShowMore","showMore","className","contextTypes","skin","Provider","childContextTypes","propTypes","PropTypes","func","string","IconView","context","contentType","ICONS","chapter","TimerIcon","course","LearnerIcon","dark","IconType","color","style","icon","computeWidth","card","type","nextPage","page","maxPages","CardsList","React","PureComponent","constructor","state","actualPage","scrollLeft","offsetWidth","possiblePositions","possiblePages","cardsWidth","handleScroll_","handleScroll","bind","handleOnLeft","handleOnRight","scrollTo","updateState","updatePages","setCardsWrapper","getScrollWidth","handleResize","testingSizes","componentDidMount","cardsWrapper","addEventListener","window","componentDidUpdate","cards","newCardsWidth","updatePaginationState","setState","componentWillUnmount","removeEventListener","cancel","wrapperWidth","wrapperScrollLeft","cardWidths","cardPositions","accWidth","cardWidth","acc","pageIndex","accPageWidth","pageWidth","skip","position","element","index","onScroll","leftBound","rightBound","leftIndex","rightIndex","limit","indexOfNextFirstCard","indexOf","nextPosition","render","title","dataName","ariaLabel","titleStyle","titleLink","cardsView","key","leftArrowView","circle","left","showMoreOnLeftAriaLabel","rightArrowView","right","showMoreOnRightAriaLabel","titleView","hasPages","showMoreView","showMoreBar","switchPagesView","pagingWrapper","wrapper","list","header","translate","arrayOf","shape","cardPropTypes","any"],"sources":["../../../../src/molecule/dashboard/cards-list/index.js"],"sourcesContent":["import React from 'react';\nimport {\n debounce,\n throttle,\n get,\n getOr,\n map,\n sum,\n last,\n pipe,\n toPairs,\n reduce,\n head,\n findIndex,\n findLastIndex\n} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport {\n NovaCompositionNavigationArrowLeft as ArrowLeft,\n NovaCompositionNavigationArrowRight as ArrowRight,\n NovaSolidContentContentBook1 as LearnerIcon,\n NovaCompositionCoorpacademyTimer as TimerIcon\n} from '@coorpacademy/nova-icons';\nimport Provider from '../../../atom/provider';\nimport Card, {cardPropTypes} from '../../card';\nimport style from './style.css';\n\nconst ShowMoreLink = props => {\n const {onShowMore, showMore, className} = props;\n return (\n <div className={className} onClick={onShowMore}>\n {showMore}\n </div>\n );\n};\n\nShowMoreLink.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nShowMoreLink.propTypes = {\n onShowMore: PropTypes.func,\n showMore: PropTypes.string,\n className: PropTypes.string\n};\n\nconst IconView = (props, context) => {\n const {skin} = context;\n const {contentType} = props;\n const ICONS = {\n chapter: TimerIcon,\n course: LearnerIcon\n };\n\n if (!contentType) {\n return null;\n }\n\n const dark = get('common.dark', skin);\n const IconType = ICONS[contentType];\n\n return (\n <div>\n <IconType style={{color: dark}} className={style.icon} data-contenttype={contentType} />\n </div>\n );\n};\n\nconst computeWidth = card => {\n switch (card && card.type) {\n case 'chapter':\n return 219;\n default:\n return 272;\n }\n};\n\nconst nextPage = (page, maxPages) => {\n if (page < 0) return maxPages;\n if (page > maxPages) return 0;\n return page;\n};\n\nIconView.propTypes = {\n contentType: PropTypes.string\n};\n\nclass CardsList extends React.PureComponent {\n /*\n IMPORTANT: update prop-types.ts too, 1st a migration of tests\n * is intended, then, a TS + functional refactor is planned.\n /\n static propTypes = {\n contentType: PropTypes.string,\n dataName: PropTypes.string,\n title: PropTypes.string,\n showMore: PropTypes.string,\n cards: PropTypes.arrayOf(PropTypes.shape(cardPropTypes)),\n onScroll: PropTypes.func,\n onShowMore: PropTypes.func,\n 'arrows-aria-label': PropTypes.shape({\n showMoreOnLeftAriaLabel: PropTypes.string,\n showMoreOnRightAriaLabel: PropTypes.string\n }),\n // eslint-disable-next-line react/forbid-prop-types\n testingSizes: PropTypes.any\n };\n\n static contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n actualPage: 0,\n maxPages: 0,\n scrollLeft: 0,\n offsetWidth: 0,\n possiblePositions: [],\n possiblePages: [],\n cardsWidth: 0\n };\n\n this.handleScroll_ = throttle(200, this.handleScroll.bind(this));\n this.handleScroll = this.handleScroll.bind(this);\n this.handleOnLeft = this.handleOnLeft.bind(this);\n this.handleOnRight = this.handleOnRight.bind(this);\n this.scrollTo = this.scrollTo.bind(this);\n this.updateState = debounce(200, this.updatePages.bind(this));\n this.updatePages = this.updatePages.bind(this);\n this.setCardsWrapper = this.setCardsWrapper.bind(this);\n this.getScrollWidth = this.getScrollWidth.bind(this);\n this.handleResize = this.handleResize.bind(this);\n\n // for testing purposes only - no other way to test this polluted component\n if (props.testingSizes) {\n const {offsetWidth, scrollLeft, maxPages, possiblePages, possiblePositions} =\n props.testingSizes;\n this.state.offsetWidth = offsetWidth;\n this.state.scrollLeft = scrollLeft;\n this.state.maxPages = maxPages;\n this.state.possiblePages = possiblePages;\n this.state.possiblePositions = possiblePositions;\n }\n }\n\n componentDidMount() {\n this.cardsWrapper.addEventListener('scroll', this.handleScroll_);\n\n if (window) {\n window.addEventListener('resize', this.handleResize);\n }\n }\n\n componentDidUpdate() {\n const {cards = []} = this.props;\n const {offsetWidth, cardsWidth} = this.state;\n const newCardsWidth = pipe(map(computeWidth), sum)(cards);\n\n if (newCardsWidth !== cardsWidth && offsetWidth !== 0) {\n this.updatePaginationState(cards);\n // eslint-disable-next-line react/no-did-update-set-state\n this.setState({\n cardsWidth: newCardsWidth\n });\n }\n }\n\n componentWillUnmount() {\n this.cardsWrapper.removeEventListener('scroll', this.handleScroll_);\n\n if (window) {\n window.removeEventListener('resize', this.handleResize);\n }\n this.updateState.cancel();\n }\n\n / istanbul ignore next /\n handleResize() {\n const {cards = []} = this.props;\n this.updatePaginationState(cards);\n }\n\n / istanbul ignore next /\n updatePaginationState(cards) {\n const {offsetWidth: wrapperWidth, scrollLeft: wrapperScrollLeft} = this.state;\n\n const cardWidths = map(computeWidth)(cards);\n\n const possiblePositions = pipe(\n reduce(\n ([cardPositions, accWidth], cardWidth) => [\n [...cardPositions, accWidth],\n cardWidth + accWidth\n ],\n [[], 0]\n ),\n head\n )(cardWidths);\n\n const possiblePages = pipe(\n reduce(\n ([acc, pageIndex, accPageWidth], cardWidth) => {\n const pageWidth = accPageWidth + cardWidth;\n if (pageWidth > wrapperWidth) {\n return [[...acc, pageIndex + 1], pageIndex + 1, cardWidth];\n }\n return [[...acc, pageIndex], pageIndex, pageWidth];\n },\n [[], 0, 0]\n ),\n head\n )(cardWidths);\n\n const skip = findIndex(position => position >= wrapperScrollLeft, possiblePositions);\n const actualPage = possiblePages[skip + 1];\n\n this.setState({\n possiblePositions,\n possiblePages,\n maxPages: last(possiblePages),\n actualPage\n });\n }\n\n setCardsWrapper(element) {\n this.cardsWrapper = element;\n this.setState({\n scrollLeft: this.cardsWrapper?.scrollLeft,\n offsetWidth: this.cardsWrapper?.offsetWidth\n });\n }\n\n / istanbul ignore next /\n getScrollWidth(index) {\n const {cards = []} = this.props;\n const card = cards[index];\n return computeWidth(card);\n }\n\n / istanbul ignore next */\n handleScroll() {\n const scrollLeft = this.cardsWrapper?.scrollLeft;\n this.setState({scrollLeft});\n\n const {possiblePositions, offsetWidth} = this.state;\n const {onScroll} = this.props;\n if (onScroll) {\n const leftBound = scrollLeft;\n const rightBound = scrollLeft + offsetWidth;\n\n const leftIndex = findIndex(position => position > leftBound, possiblePositions) - 1;\n const rightIndex = findLastIndex(position => position < rightBound, possiblePositions);\n const skip = leftIndex;\n const limit = rightIndex - skip + 1;\n\n onScroll(skip, limit);\n }\n }\n\n handleOnLeft() {\n const {actualPage, maxPages} = this.state;\n this.scrollTo(nextPage(actualPage - 1, maxPages));\n }\n\n handleOnRight() {\n const {actualPage, maxPages} = this.state;\n this.scrollTo(nextPage(actualPage + 1, maxPages));\n }\n\n scrollTo(page) {\n const {possiblePages, possiblePositions} = this.state;\n const indexOfNextFirstCard = possiblePages.indexOf(page);\n const nextPosition = possiblePositions[indexOfNextFirstCard];\n this.cardsWrapper.scrollLeft = nextPosition;\n this.updatePages(page);\n this.setState({\n scrollLeft: nextPosition\n });\n }\n\n updatePages(actualPage) {\n this.setState({\n actualPage\n });\n }\n\n render() {\n const {\n title,\n showMore,\n cards,\n onShowMore,\n dataName,\n contentType,\n 'arrows-aria-label': ariaLabel = {}\n } = this.props;\n const {skin} = this.context;\n const {maxPages} = this.state;\n const dark = getOr('#90A4AE', 'common.dark', skin);\n const titleStyle = onShowMore ? style.titleLink : style.title;\n const cardsView = pipe(\n toPairs,\n map(([key, card]) => {\n return (\n <div className={style.card} key={key}>\n <Card {...card} dataName={`${dataName}-${key}`} />\n </div>\n );\n })\n )(cards);\n const leftArrowView = (\n <div className={style.circle} onClick={this.handleOnLeft} data-name=\"card-list-left-arrow\">\n <ArrowLeft\n style={{color: dark}}\n className={style.left}\n width={10}\n height={10}\n aria-label={ariaLabel.showMoreOnLeftAriaLabel}\n />\n </div>\n );\n const rightArrowView = (\n <div className={style.circle} onClick={this.handleOnRight} data-name=\"card-list-right-arrow\">\n <ArrowRight\n style={{color: dark}}\n className={style.right}\n width={10}\n height={10}\n aria-label={ariaLabel.showMoreOnRightAriaLabel}\n />\n </div>\n );\n\n const titleView = (\n <span data-name=\"title\" className={titleStyle} onClick={onShowMore}>\n <IconView contentType={contentType} />\n <span>{title}</span>\n </span>\n );\n\n const hasPages = maxPages > 0;\n const showMoreView =\n hasPages && showMore && onShowMore ? (\n <ShowMoreLink\n className={hasPages ? style.showMoreBar : style.showMore}\n onShowMore={onShowMore}\n showMore={showMore}\n />\n ) : null;\n\n const switchPagesView = hasPages ? (\n <div className={style.pagingWrapper}>\n {showMoreView}\n {leftArrowView}\n {rightArrowView}\n </div>\n ) : null;\n\n return (\n <div\n className={style.wrapper}\n data-name=\"cardsList\"\n data-max-pages={`${maxPages}`}\n // eslint-disable-next-line react/destructuring-assignment\n data-actual-page={`${this.state.actualPage}`}\n data-scroll-left={this.cardsWrapper?.scrollLeft}\n >\n <div className={style.list}>\n <div>\n <div data-name=\"header\" className={style.header}>\n {titleView}\n {switchPagesView}\n </div>\n <div\n className={style.cards}\n data-testid=\"cards-view-wrapper\"\n ref={this.setCardsWrapper}\n >\n {cardsView}\n </div>\n </div>\n </div>\n </div>\n );\n }\n}\n\nexport default CardsList;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAgBA;;AACA;;AAMA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,YAAY,GAAGC,KAAK,IAAI;EAC5B,MAAM;IAACC,UAAD;IAAaC,QAAb;IAAuBC;EAAvB,IAAoCH,KAA1C;EACA,oBACE;IAAK,SAAS,EAAEG,SAAhB;IAA2B,OAAO,EAAEF;EAApC,GACGC,QADH,CADF;AAKD,CAPD;;AASAH,YAAY,CAACK,YAAb,GAA4B;EAC1BC,IAAI,EAAEC,iBAAA,CAASC,iBAAT,CAA2BF;AADP,CAA5B;AAIAN,YAAY,CAACS,SAAb,2CAAyB;EACvBP,UAAU,EAAEQ,kBAAA,CAAUC,IADC;EAEvBR,QAAQ,EAAEO,kBAAA,CAAUE,MAFG;EAGvBR,SAAS,EAAEM,kBAAA,CAAUE;AAHE,CAAzB;;AAMA,MAAMC,QAAQ,GAAG,CAACZ,KAAD,EAAQa,OAAR,KAAoB;EACnC,MAAM;IAACR;EAAD,IAASQ,OAAf;EACA,MAAM;IAACC;EAAD,IAAgBd,KAAtB;EACA,MAAMe,KAAK,GAAG;IACZC,OAAO,EAAEC,2CADG;IAEZC,MAAM,EAAEC;EAFI,CAAd;;EAKA,IAAI,CAACL,WAAL,EAAkB;IAChB,OAAO,IAAP;EACD;;EAED,MAAMM,IAAI,GAAG,mBAAI,aAAJ,EAAmBf,IAAnB,CAAb;EACA,MAAMgB,QAAQ,GAAGN,KAAK,CAACD,WAAD,CAAtB;EAEA,oBACE,uDACE,6BAAC,QAAD;IAAU,KAAK,EAAE;MAACQ,KAAK,EAAEF;IAAR,CAAjB;IAAgC,SAAS,EAAEG,cAAA,CAAMC,IAAjD;IAAuD,oBAAkBV;EAAzE,EADF,CADF;AAKD,CApBD;;AAsBA,MAAMW,YAAY,GAAGC,IAAI,IAAI;EAC3B,QAAQA,IAAI,IAAIA,IAAI,CAACC,IAArB;IACE,KAAK,SAAL;MACE,OAAO,GAAP;;IACF;MACE,OAAO,GAAP;EAJJ;AAMD,CAPD;;AASA,MAAMC,QAAQ,GAAG,CAACC,IAAD,EAAOC,QAAP,KAAoB;EACnC,IAAID,IAAI,GAAG,CAAX,EAAc,OAAOC,QAAP;EACd,IAAID,IAAI,GAAGC,QAAX,EAAqB,OAAO,CAAP;EACrB,OAAOD,IAAP;AACD,CAJD;;AAMAjB,QAAQ,CAACJ,SAAT,2CAAqB;EACnBM,WAAW,EAAEL,kBAAA,CAAUE;AADJ,CAArB;;AAIA,MAAMoB,SAAN,SAAwBC,cAAA,CAAMC,aAA9B,CAA4C;EAC1C;AACF;AACA;AACA;EAsBEC,WAAW,CAAClC,KAAD,EAAQ;IACjB,MAAMA,KAAN;IAEA,KAAKmC,KAAL,GAAa;MACXC,UAAU,EAAE,CADD;MAEXN,QAAQ,EAAE,CAFC;MAGXO,UAAU,EAAE,CAHD;MAIXC,WAAW,EAAE,CAJF;MAKXC,iBAAiB,EAAE,EALR;MAMXC,aAAa,EAAE,EANJ;MAOXC,UAAU,EAAE;IAPD,CAAb;IAUA,KAAKC,aAAL,GAAqB,wBAAS,GAAT,EAAc,KAAKC,YAAL,CAAkBC,IAAlB,CAAuB,IAAvB,CAAd,CAArB;IACA,KAAKD,YAAL,GAAoB,KAAKA,YAAL,CAAkBC,IAAlB,CAAuB,IAAvB,CAApB;IACA,KAAKC,YAAL,GAAoB,KAAKA,YAAL,CAAkBD,IAAlB,CAAuB,IAAvB,CAApB;IACA,KAAKE,aAAL,GAAqB,KAAKA,aAAL,CAAmBF,IAAnB,CAAwB,IAAxB,CAArB;IACA,KAAKG,QAAL,GAAgB,KAAKA,QAAL,CAAcH,IAAd,CAAmB,IAAnB,CAAhB;IACA,KAAKI,WAAL,GAAmB,wBAAS,GAAT,EAAc,KAAKC,WAAL,CAAiBL,IAAjB,CAAsB,IAAtB,CAAd,CAAnB;IACA,KAAKK,WAAL,GAAmB,KAAKA,WAAL,CAAiBL,IAAjB,CAAsB,IAAtB,CAAnB;IACA,KAAKM,eAAL,GAAuB,KAAKA,eAAL,CAAqBN,IAArB,CAA0B,IAA1B,CAAvB;IACA,KAAKO,cAAL,GAAsB,KAAKA,cAAL,CAAoBP,IAApB,CAAyB,IAAzB,CAAtB;IACA,KAAKQ,YAAL,GAAoB,KAAKA,YAAL,CAAkBR,IAAlB,CAAuB,IAAvB,CAApB,CAtBiB,CAwBjB;;IACA,IAAI5C,KAAK,CAACqD,YAAV,EAAwB;MACtB,MAAM;QAACf,WAAD;QAAcD,UAAd;QAA0BP,QAA1B;QAAoCU,aAApC;QAAmDD;MAAnD,IACJvC,KAAK,CAACqD,YADR;MAEA,KAAKlB,KAAL,CAAWG,WAAX,GAAyBA,WAAzB;MACA,KAAKH,KAAL,CAAWE,UAAX,GAAwBA,UAAxB;MACA,KAAKF,KAAL,CAAWL,QAAX,GAAsBA,QAAtB;MACA,KAAKK,KAAL,CAAWK,aAAX,GAA2BA,aAA3B;MACA,KAAKL,KAAL,CAAWI,iBAAX,GAA+BA,iBAA/B;IACD;EACF;;EAEDe,iBAAiB,GAAG;IAClB,KAAKC,YAAL,CAAkBC,gBAAlB,CAAmC,QAAnC,EAA6C,KAAKd,aAAlD;;IAEA,IAAIe,MAAJ,EAAY;MACVA,MAAM,CAACD,gBAAP,CAAwB,QAAxB,EAAkC,KAAKJ,YAAvC;IACD;EACF;;EAEDM,kBAAkB,GAAG;IACnB,MAAM;MAACC,KAAK,GAAG;IAAT,IAAe,KAAK3D,KAA1B;IACA,MAAM;MAACsC,WAAD;MAAcG;IAAd,IAA4B,KAAKN,KAAvC;IACA,MAAMyB,aAAa,GAAG,oBAAK,mBAAInC,YAAJ,CAAL,iBAA6BkC,KAA7B,CAAtB;;IAEA,IAAIC,aAAa,KAAKnB,UAAlB,IAAgCH,WAAW,KAAK,CAApD,EAAuD;MACrD,KAAKuB,qBAAL,CAA2BF,KAA3B,EADqD,CAErD;;MACA,KAAKG,QAAL,CAAc;QACZrB,UAAU,EAAEmB;MADA,CAAd;IAGD;EACF;;EAEDG,oBAAoB,GAAG;IACrB,KAAKR,YAAL,CAAkBS,mBAAlB,CAAsC,QAAtC,EAAgD,KAAKtB,aAArD;;IAEA,IAAIe,MAAJ,EAAY;MACVA,MAAM,CAACO,mBAAP,CAA2B,QAA3B,EAAqC,KAAKZ,YAA1C;IACD;;IACD,KAAKJ,WAAL,CAAiBiB,MAAjB;EACD;EAED;;;EACAb,YAAY,GAAG;IACb,MAAM;MAACO,KAAK,GAAG;IAAT,IAAe,KAAK3D,KAA1B;IACA,KAAK6D,qBAAL,CAA2BF,KAA3B;EACD;EAED;;;EACAE,qBAAqB,CAACF,KAAD,EAAQ;IAC3B,MAAM;MAACrB,WAAW,EAAE4B,YAAd;MAA4B7B,UAAU,EAAE8B;IAAxC,IAA6D,KAAKhC,KAAxE;IAEA,MAAMiC,UAAU,GAAG,mBAAI3C,YAAJ,EAAkBkC,KAAlB,CAAnB;IAEA,MAAMpB,iBAAiB,GAAG,oBACxB,sBACE,CAAC,CAAC8B,aAAD,EAAgBC,QAAhB,CAAD,EAA4BC,SAA5B,KAA0C,CACxC,CAAC,GAAGF,aAAJ,EAAmBC,QAAnB,CADwC,EAExCC,SAAS,GAAGD,QAF4B,CAD5C,EAKE,CAAC,EAAD,EAAK,CAAL,CALF,CADwB,kBASxBF,UATwB,CAA1B;IAWA,MAAM5B,aAAa,GAAG,oBACpB,sBACE,CAAC,CAACgC,GAAD,EAAMC,SAAN,EAAiBC,YAAjB,CAAD,EAAiCH,SAAjC,KAA+C;MAC7C,MAAMI,SAAS,GAAGD,YAAY,GAAGH,SAAjC;;MACA,IAAII,SAAS,GAAGT,YAAhB,EAA8B;QAC5B,OAAO,CAAC,CAAC,GAAGM,GAAJ,EAASC,SAAS,GAAG,CAArB,CAAD,EAA0BA,SAAS,GAAG,CAAtC,EAAyCF,SAAzC,CAAP;MACD;;MACD,OAAO,CAAC,CAAC,GAAGC,GAAJ,EAASC,SAAT,CAAD,EAAsBA,SAAtB,EAAiCE,SAAjC,CAAP;IACD,CAPH,EAQE,CAAC,EAAD,EAAK,CAAL,EAAQ,CAAR,CARF,CADoB,kBAYpBP,UAZoB,CAAtB;IAcA,MAAMQ,IAAI,GAAG,yBAAUC,QAAQ,IAAIA,QAAQ,IAAIV,iBAAlC,EAAqD5B,iBAArD,CAAb;IACA,MAAMH,UAAU,GAAGI,aAAa,CAACoC,IAAI,GAAG,CAAR,CAAhC;IAEA,KAAKd,QAAL,CAAc;MACZvB,iBADY;MAEZC,aAFY;MAGZV,QAAQ,EAAE,oBAAKU,aAAL,CAHE;MAIZJ;IAJY,CAAd;EAMD;;EAEDc,eAAe,CAAC4B,OAAD,EAAU;IACvB,KAAKvB,YAAL,GAAoBuB,OAApB;IACA,KAAKhB,QAAL,CAAc;MACZzB,UAAU,EAAE,KAAKkB,YAAL,EAAmBlB,UADnB;MAEZC,WAAW,EAAE,KAAKiB,YAAL,EAAmBjB;IAFpB,CAAd;EAID;EAED;;;EACAa,cAAc,CAAC4B,KAAD,EAAQ;IACpB,MAAM;MAACpB,KAAK,GAAG;IAAT,IAAe,KAAK3D,KAA1B;IACA,MAAM0B,IAAI,GAAGiC,KAAK,CAACoB,KAAD,CAAlB;IACA,OAAOtD,YAAY,CAACC,IAAD,CAAnB;EACD;EAED;;;EACAiB,YAAY,GAAG;IACb,MAAMN,UAAU,GAAG,KAAKkB,YAAL,EAAmBlB,UAAtC;IACA,KAAKyB,QAAL,CAAc;MAACzB;IAAD,CAAd;IAEA,MAAM;MAACE,iBAAD;MAAoBD;IAApB,IAAmC,KAAKH,KAA9C;IACA,MAAM;MAAC6C;IAAD,IAAa,KAAKhF,KAAxB;;IACA,IAAIgF,QAAJ,EAAc;MACZ,MAAMC,SAAS,GAAG5C,UAAlB;MACA,MAAM6C,UAAU,GAAG7C,UAAU,GAAGC,WAAhC;MAEA,MAAM6C,SAAS,GAAG,yBAAUN,QAAQ,IAAIA,QAAQ,GAAGI,SAAjC,EAA4C1C,iBAA5C,IAAiE,CAAnF;MACA,MAAM6C,UAAU,GAAG,6BAAcP,QAAQ,IAAIA,QAAQ,GAAGK,UAArC,EAAiD3C,iBAAjD,CAAnB;MACA,MAAMqC,IAAI,GAAGO,SAAb;MACA,MAAME,KAAK,GAAGD,UAAU,GAAGR,IAAb,GAAoB,CAAlC;MAEAI,QAAQ,CAACJ,IAAD,EAAOS,KAAP,CAAR;IACD;EACF;;EAEDxC,YAAY,GAAG;IACb,MAAM;MAACT,UAAD;MAAaN;IAAb,IAAyB,KAAKK,KAApC;IACA,KAAKY,QAAL,CAAcnB,QAAQ,CAACQ,UAAU,GAAG,CAAd,EAAiBN,QAAjB,CAAtB;EACD;;EAEDgB,aAAa,GAAG;IACd,MAAM;MAACV,UAAD;MAAaN;IAAb,IAAyB,KAAKK,KAApC;IACA,KAAKY,QAAL,CAAcnB,QAAQ,CAACQ,UAAU,GAAG,CAAd,EAAiBN,QAAjB,CAAtB;EACD;;EAEDiB,QAAQ,CAAClB,IAAD,EAAO;IACb,MAAM;MAACW,aAAD;MAAgBD;IAAhB,IAAqC,KAAKJ,KAAhD;IACA,MAAMmD,oBAAoB,GAAG9C,aAAa,CAAC+C,OAAd,CAAsB1D,IAAtB,CAA7B;IACA,MAAM2D,YAAY,GAAGjD,iBAAiB,CAAC+C,oBAAD,CAAtC;IACA,KAAK/B,YAAL,CAAkBlB,UAAlB,GAA+BmD,YAA/B;IACA,KAAKvC,WAAL,CAAiBpB,IAAjB;IACA,KAAKiC,QAAL,CAAc;MACZzB,UAAU,EAAEmD;IADA,CAAd;EAGD;;EAEDvC,WAAW,CAACb,UAAD,EAAa;IACtB,KAAK0B,QAAL,CAAc;MACZ1B;IADY,CAAd;EAGD;;EAEDqD,MAAM,GAAG;IACP,MAAM;MACJC,KADI;MAEJxF,QAFI;MAGJyD,KAHI;MAIJ1D,UAJI;MAKJ0F,QALI;MAMJ7E,WANI;MAOJ,qBAAqB8E,SAAS,GAAG;IAP7B,IAQF,KAAK5F,KART;IASA,MAAM;MAACK;IAAD,IAAS,KAAKQ,OAApB;IACA,MAAM;MAACiB;IAAD,IAAa,KAAKK,KAAxB;IACA,MAAMf,IAAI,GAAG,qBAAM,SAAN,EAAiB,aAAjB,EAAgCf,IAAhC,CAAb;IACA,MAAMwF,UAAU,GAAG5F,UAAU,GAAGsB,cAAA,CAAMuE,SAAT,GAAqBvE,cAAA,CAAMmE,KAAxD;IACA,MAAMK,SAAS,GAAG,uCAEhB,mBAAI,CAAC,CAACC,GAAD,EAAMtE,IAAN,CAAD,KAAiB;MACnB,oBACE;QAAK,SAAS,EAAEH,cAAA,CAAMG,IAAtB;QAA4B,GAAG,EAAEsE;MAAjC,gBACE,6BAAC,aAAD,eAAUtE,IAAV;QAAgB,QAAQ,EAAG,GAAEiE,QAAS,IAAGK,GAAI;MAA7C,GADF,CADF;IAKD,CAND,CAFgB,EAShBrC,KATgB,CAAlB;;IAUA,MAAMsC,aAAa,gBACjB;MAAK,SAAS,EAAE1E,cAAA,CAAM2E,MAAtB;MAA8B,OAAO,EAAE,KAAKrD,YAA5C;MAA0D,aAAU;IAApE,gBACE,6BAAC,6CAAD;MACE,KAAK,EAAE;QAACvB,KAAK,EAAEF;MAAR,CADT;MAEE,SAAS,EAAEG,cAAA,CAAM4E,IAFnB;MAGE,KAAK,EAAE,EAHT;MAIE,MAAM,EAAE,EAJV;MAKE,cAAYP,SAAS,CAACQ;IALxB,EADF,CADF;;IAWA,MAAMC,cAAc,gBAClB;MAAK,SAAS,EAAE9E,cAAA,CAAM2E,MAAtB;MAA8B,OAAO,EAAE,KAAKpD,aAA5C;MAA2D,aAAU;IAArE,gBACE,6BAAC,8CAAD;MACE,KAAK,EAAE;QAACxB,KAAK,EAAEF;MAAR,CADT;MAEE,SAAS,EAAEG,cAAA,CAAM+E,KAFnB;MAGE,KAAK,EAAE,EAHT;MAIE,MAAM,EAAE,EAJV;MAKE,cAAYV,SAAS,CAACW;IALxB,EADF,CADF;;IAYA,MAAMC,SAAS,gBACb;MAAM,aAAU,OAAhB;MAAwB,SAAS,EAAEX,UAAnC;MAA+C,OAAO,EAAE5F;IAAxD,gBACE,6BAAC,QAAD;MAAU,WAAW,EAAEa;IAAvB,EADF,eAEE,2CAAO4E,KAAP,CAFF,CADF;;IAOA,MAAMe,QAAQ,GAAG3E,QAAQ,GAAG,CAA5B;IACA,MAAM4E,YAAY,GAChBD,QAAQ,IAAIvG,QAAZ,IAAwBD,UAAxB,gBACE,6BAAC,YAAD;MACE,SAAS,EAAEwG,QAAQ,GAAGlF,cAAA,CAAMoF,WAAT,GAAuBpF,cAAA,CAAMrB,QADlD;MAEE,UAAU,EAAED,UAFd;MAGE,QAAQ,EAAEC;IAHZ,EADF,GAMI,IAPN;IASA,MAAM0G,eAAe,GAAGH,QAAQ,gBAC9B;MAAK,SAAS,EAAElF,cAAA,CAAMsF;IAAtB,GACGH,YADH,EAEGT,aAFH,EAGGI,cAHH,CAD8B,GAM5B,IANJ;IAQA,oBACE;MACE,SAAS,EAAE9E,cAAA,CAAMuF,OADnB;MAEE,aAAU,WAFZ;MAGE,kBAAiB,GAAEhF,QAAS,EAH9B,CAIE;MAJF;MAKE,oBAAmB,GAAE,KAAKK,KAAL,CAAWC,UAAW,EAL7C;MAME,oBAAkB,KAAKmB,YAAL,EAAmBlB;IANvC,gBAQE;MAAK,SAAS,EAAEd,cAAA,CAAMwF;IAAtB,gBACE,uDACE;MAAK,aAAU,QAAf;MAAwB,SAAS,EAAExF,cAAA,CAAMyF;IAAzC,GACGR,SADH,EAEGI,eAFH,CADF,eAKE;MACE,SAAS,EAAErF,cAAA,CAAMoC,KADnB;MAEE,eAAY,oBAFd;MAGE,GAAG,EAAE,KAAKT;IAHZ,GAKG6C,SALH,CALF,CADF,CARF,CADF;EA0BD;;AA7SyC;;AAAtChE,S,CAqBG3B,Y,GAAe;EACpBC,IAAI,EAAEC,iBAAA,CAASC,iBAAT,CAA2BF,IADb;EAEpB4G,SAAS,EAAE3G,iBAAA,CAASC,iBAAT,CAA2B0G;AAFlB,C;AArBlBlF,S,CAKGvB,S,2CAAY;EACjBM,WAAW,EAAEL,kBAAA,CAAUE,MADN;EAEjBgF,QAAQ,EAAElF,kBAAA,CAAUE,MAFH;EAGjB+E,KAAK,EAAEjF,kBAAA,CAAUE,MAHA;EAIjBT,QAAQ,EAAEO,kBAAA,CAAUE,MAJH;EAKjBgD,KAAK,EAAElD,kBAAA,CAAUyG,OAAV,CAAkBzG,kBAAA,CAAU0G,KAAV,CAAgBC,mBAAhB,CAAlB,CALU;EAMjBpC,QAAQ,EAAEvE,kBAAA,CAAUC,IANH;EAOjBT,UAAU,EAAEQ,kBAAA,CAAUC,IAPL;EAQjB,qBAAqBD,kBAAA,CAAU0G,KAAV,CAAgB;IACnCf,uBAAuB,EAAE3F,kBAAA,CAAUE,MADA;IAEnC4F,wBAAwB,EAAE9F,kBAAA,CAAUE;EAFD,CAAhB,CARJ;EAYjB;EACA0C,YAAY,EAAE5C,kBAAA,CAAU4G;AAbP,C;eA2SNtF,S"}
1	+ {"version":3,"file":"index.js","names":["ShowMoreLink","props","onShowMore","showMore","className","contextTypes","skin","Provider","childContextTypes","propTypes","PropTypes","func","string","IconView","context","contentType","ICONS","chapter","TimerIcon","course","LearnerIcon","dark","IconType","color","style","icon","computeWidth","card","type","nextPage","page","maxPages","CardsList","React","PureComponent","constructor","state","actualPage","scrollLeft","offsetWidth","possiblePositions","possiblePages","cardsWidth","handleScroll_","handleScroll","bind","handleOnLeft","handleOnRight","scrollTo","updateState","updatePages","setCardsWrapper","getScrollWidth","handleResize","testingSizes","componentDidMount","cardsWrapper","addEventListener","window","componentDidUpdate","cards","newCardsWidth","updatePaginationState","setState","componentWillUnmount","removeEventListener","cancel","wrapperWidth","wrapperScrollLeft","cardWidths","cardPositions","accWidth","cardWidth","acc","pageIndex","accPageWidth","pageWidth","skip","position","element","index","onScroll","leftBound","rightBound","leftIndex","rightIndex","limit","indexOfNextFirstCard","indexOf","nextPosition","render","title","customStyle","dataName","ariaLabel","titleStyle","titleLink","cardsView","key","leftArrowView","circle","left","showMoreOnLeftAriaLabel","rightArrowView","right","showMoreOnRightAriaLabel","titleView","titleNode","hasPages","showMoreView","showMoreBar","switchPagesView","pagingWrapper","wrapper","list","header","translate","oneOfType","node","arrayOf","shape","cardPropTypes","object","any"],"sources":["../../../../src/molecule/dashboard/cards-list/index.js"],"sourcesContent":["import React from 'react';\nimport {\n debounce,\n throttle,\n get,\n getOr,\n map,\n sum,\n last,\n pipe,\n toPairs,\n reduce,\n head,\n findIndex,\n findLastIndex\n} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport {\n NovaCompositionNavigationArrowLeft as ArrowLeft,\n NovaCompositionNavigationArrowRight as ArrowRight,\n NovaSolidContentContentBook1 as LearnerIcon,\n NovaCompositionCoorpacademyTimer as TimerIcon\n} from '@coorpacademy/nova-icons';\nimport Provider from '../../../atom/provider';\nimport Card, {cardPropTypes} from '../../card';\nimport style from './style.css';\n\nconst ShowMoreLink = props => {\n const {onShowMore, showMore, className} = props;\n return (\n <div className={className} onClick={onShowMore}>\n {showMore}\n </div>\n );\n};\n\nShowMoreLink.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nShowMoreLink.propTypes = {\n onShowMore: PropTypes.func,\n showMore: PropTypes.string,\n className: PropTypes.string\n};\n\nconst IconView = (props, context) => {\n const {skin} = context;\n const {contentType} = props;\n const ICONS = {\n chapter: TimerIcon,\n course: LearnerIcon\n };\n\n if (!contentType) {\n return null;\n }\n\n const dark = get('common.dark', skin);\n const IconType = ICONS[contentType];\n\n return (\n <div>\n <IconType style={{color: dark}} className={style.icon} data-contenttype={contentType} />\n </div>\n );\n};\n\nconst computeWidth = card => {\n switch (card && card.type) {\n case 'chapter':\n return 219;\n default:\n return 272;\n }\n};\n\nconst nextPage = (page, maxPages) => {\n if (page < 0) return maxPages;\n if (page > maxPages) return 0;\n return page;\n};\n\nIconView.propTypes = {\n contentType: PropTypes.string\n};\n\nclass CardsList extends React.PureComponent {\n /*\n IMPORTANT: update prop-types.ts too, 1st a migration of tests\n * is intended, then, a TS + functional refactor is planned.\n /\n static propTypes = {\n contentType: PropTypes.string,\n dataName: PropTypes.string,\n title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),\n showMore: PropTypes.string,\n cards: PropTypes.arrayOf(PropTypes.shape(cardPropTypes)),\n customStyle: PropTypes.object,\n onScroll: PropTypes.func,\n onShowMore: PropTypes.func,\n 'arrows-aria-label': PropTypes.shape({\n showMoreOnLeftAriaLabel: PropTypes.string,\n showMoreOnRightAriaLabel: PropTypes.string\n }),\n // eslint-disable-next-line react/forbid-prop-types\n testingSizes: PropTypes.any\n };\n\n static contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n actualPage: 0,\n maxPages: 0,\n scrollLeft: 0,\n offsetWidth: 0,\n possiblePositions: [],\n possiblePages: [],\n cardsWidth: 0\n };\n\n this.handleScroll_ = throttle(200, this.handleScroll.bind(this));\n this.handleScroll = this.handleScroll.bind(this);\n this.handleOnLeft = this.handleOnLeft.bind(this);\n this.handleOnRight = this.handleOnRight.bind(this);\n this.scrollTo = this.scrollTo.bind(this);\n this.updateState = debounce(200, this.updatePages.bind(this));\n this.updatePages = this.updatePages.bind(this);\n this.setCardsWrapper = this.setCardsWrapper.bind(this);\n this.getScrollWidth = this.getScrollWidth.bind(this);\n this.handleResize = this.handleResize.bind(this);\n\n // for testing purposes only - no other way to test this polluted component\n if (props.testingSizes) {\n const {offsetWidth, scrollLeft, maxPages, possiblePages, possiblePositions} =\n props.testingSizes;\n this.state.offsetWidth = offsetWidth;\n this.state.scrollLeft = scrollLeft;\n this.state.maxPages = maxPages;\n this.state.possiblePages = possiblePages;\n this.state.possiblePositions = possiblePositions;\n }\n }\n\n componentDidMount() {\n this.cardsWrapper.addEventListener('scroll', this.handleScroll_);\n\n if (window) {\n window.addEventListener('resize', this.handleResize);\n }\n }\n\n componentDidUpdate() {\n const {cards = []} = this.props;\n const {offsetWidth, cardsWidth} = this.state;\n const newCardsWidth = pipe(map(computeWidth), sum)(cards);\n\n if (newCardsWidth !== cardsWidth && offsetWidth !== 0) {\n this.updatePaginationState(cards);\n // eslint-disable-next-line react/no-did-update-set-state\n this.setState({\n cardsWidth: newCardsWidth\n });\n }\n }\n\n componentWillUnmount() {\n this.cardsWrapper.removeEventListener('scroll', this.handleScroll_);\n\n if (window) {\n window.removeEventListener('resize', this.handleResize);\n }\n this.updateState.cancel();\n }\n\n / istanbul ignore next /\n handleResize() {\n const {cards = []} = this.props;\n this.updatePaginationState(cards);\n }\n\n / istanbul ignore next /\n updatePaginationState(cards) {\n const {offsetWidth: wrapperWidth, scrollLeft: wrapperScrollLeft} = this.state;\n\n const cardWidths = map(computeWidth)(cards);\n\n const possiblePositions = pipe(\n reduce(\n ([cardPositions, accWidth], cardWidth) => [\n [...cardPositions, accWidth],\n cardWidth + accWidth\n ],\n [[], 0]\n ),\n head\n )(cardWidths);\n\n const possiblePages = pipe(\n reduce(\n ([acc, pageIndex, accPageWidth], cardWidth) => {\n const pageWidth = accPageWidth + cardWidth;\n if (pageWidth > wrapperWidth) {\n return [[...acc, pageIndex + 1], pageIndex + 1, cardWidth];\n }\n return [[...acc, pageIndex], pageIndex, pageWidth];\n },\n [[], 0, 0]\n ),\n head\n )(cardWidths);\n\n const skip = findIndex(position => position >= wrapperScrollLeft, possiblePositions);\n const actualPage = possiblePages[skip + 1];\n\n this.setState({\n possiblePositions,\n possiblePages,\n maxPages: last(possiblePages),\n actualPage\n });\n }\n\n setCardsWrapper(element) {\n this.cardsWrapper = element;\n this.setState({\n scrollLeft: this.cardsWrapper?.scrollLeft,\n offsetWidth: this.cardsWrapper?.offsetWidth\n });\n }\n\n / istanbul ignore next /\n getScrollWidth(index) {\n const {cards = []} = this.props;\n const card = cards[index];\n return computeWidth(card);\n }\n\n / istanbul ignore next */\n handleScroll() {\n const scrollLeft = this.cardsWrapper?.scrollLeft;\n this.setState({scrollLeft});\n\n const {possiblePositions, offsetWidth} = this.state;\n const {onScroll} = this.props;\n if (onScroll) {\n const leftBound = scrollLeft;\n const rightBound = scrollLeft + offsetWidth;\n\n const leftIndex = findIndex(position => position > leftBound, possiblePositions) - 1;\n const rightIndex = findLastIndex(position => position < rightBound, possiblePositions);\n const skip = leftIndex;\n const limit = rightIndex - skip + 1;\n\n onScroll(skip, limit);\n }\n }\n\n handleOnLeft() {\n const {actualPage, maxPages} = this.state;\n this.scrollTo(nextPage(actualPage - 1, maxPages));\n }\n\n handleOnRight() {\n const {actualPage, maxPages} = this.state;\n this.scrollTo(nextPage(actualPage + 1, maxPages));\n }\n\n scrollTo(page) {\n const {possiblePages, possiblePositions} = this.state;\n const indexOfNextFirstCard = possiblePages.indexOf(page);\n const nextPosition = possiblePositions[indexOfNextFirstCard];\n this.cardsWrapper.scrollLeft = nextPosition;\n this.updatePages(page);\n this.setState({\n scrollLeft: nextPosition\n });\n }\n\n updatePages(actualPage) {\n this.setState({\n actualPage\n });\n }\n\n render() {\n const {\n title,\n showMore,\n cards,\n customStyle = {},\n onShowMore,\n dataName,\n contentType,\n 'arrows-aria-label': ariaLabel = {}\n } = this.props;\n const {skin} = this.context;\n const {maxPages} = this.state;\n const dark = getOr('#90A4AE', 'common.dark', skin);\n const titleStyle = onShowMore ? style.titleLink : style.title;\n const cardsView = pipe(\n toPairs,\n map(([key, card]) => {\n return (\n <div className={style.card} key={key}>\n <Card {...card} dataName={`${dataName}-${key}`} />\n </div>\n );\n })\n )(cards);\n const leftArrowView = (\n <div className={style.circle} onClick={this.handleOnLeft} data-name=\"card-list-left-arrow\">\n <ArrowLeft\n style={{color: dark}}\n className={style.left}\n width={10}\n height={10}\n aria-label={ariaLabel.showMoreOnLeftAriaLabel}\n />\n </div>\n );\n const rightArrowView = (\n <div className={style.circle} onClick={this.handleOnRight} data-name=\"card-list-right-arrow\">\n <ArrowRight\n style={{color: dark}}\n className={style.right}\n width={10}\n height={10}\n aria-label={ariaLabel.showMoreOnRightAriaLabel}\n />\n </div>\n );\n\n const titleView = typeof title === 'string' ? (\n <span data-name=\"title\" className={titleStyle} onClick={onShowMore}>\n <IconView contentType={contentType} />\n <span>{title}</span>\n </span>\n ) : <span className={style.titleNode}>{title}</span>;\n\n const hasPages = maxPages > 0;\n const showMoreView =\n hasPages && showMore && onShowMore ? (\n <ShowMoreLink\n className={hasPages ? style.showMoreBar : style.showMore}\n onShowMore={onShowMore}\n showMore={showMore}\n />\n ) : null;\n\n const switchPagesView = hasPages ? (\n <div className={style.pagingWrapper}>\n {showMoreView}\n {leftArrowView}\n {rightArrowView}\n </div>\n ) : null;\n\n return (\n <div\n className={style.wrapper}\n style={customStyle}\n data-name=\"cardsList\"\n data-max-pages={`${maxPages}`}\n // eslint-disable-next-line react/destructuring-assignment\n data-actual-page={`${this.state.actualPage}`}\n data-scroll-left={this.cardsWrapper?.scrollLeft}\n >\n <div className={style.list}>\n <div>\n <div data-name=\"header\" className={style.header}>\n {titleView}\n {switchPagesView}\n </div>\n <div\n className={style.cards}\n data-testid=\"cards-view-wrapper\"\n ref={this.setCardsWrapper}\n >\n {cardsView}\n </div>\n </div>\n </div>\n </div>\n );\n }\n}\n\nexport default CardsList;\n"],"mappings":"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"}

package/lib/molecule/dashboard/cards-list/prop-types.d.ts CHANGED Viewed

@@ -1,9 +1,11 @@
+/// <reference types="react" />
 export declare type CardsListProps = {
     contentType: string;
     dataName: string;
-    title: string;
+    title: string | React.ReactNode;
     showMore: string;
     cards: Record<string, unknown>[];
+    customStyle: Record<string, unknown>;
     onScroll: (skip: number, limit: number) => void;
     onShowMore: () => void;
     'arrows-aria-label': {

package/lib/molecule/dashboard/cards-list/prop-types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../../src/molecule/dashboard/cards-list/prop-types.ts"],"names":[],"mappings":"AAAA,oBAAY,cAAc,GAAG;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;~~IACd~~,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IACjC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,mBAAmB,EAAE;QACnB,uBAAuB,EAAE,MAAM,CAAC;QAChC,wBAAwB,EAAE,MAAM,CAAC;KAClC,CAAC;CACH,CAAC"}
1	+ {"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../../src/molecule/dashboard/cards-list/prop-types.ts"],"names":[],"mappings":";AAAA,oBAAY,cAAc,GAAG;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IACjC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,mBAAmB,EAAE;QACnB,uBAAuB,EAAE,MAAM,CAAC;QAChC,wBAAwB,EAAE,MAAM,CAAC;KAClC,CAAC;CACH,CAAC"}

package/lib/molecule/dashboard/cards-list/prop-types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"prop-types.js","names":[],"sources":["../../../../src/molecule/dashboard/cards-list/prop-types.ts"],"sourcesContent":["export type CardsListProps = {\n contentType: string;\n dataName: string;\n title: string;\n showMore: string;\n cards: Record<string, unknown>[];\n onScroll: (skip: number, limit: number) => void;\n onShowMore: () => void;\n 'arrows-aria-label': {\n showMoreOnLeftAriaLabel: string;\n showMoreOnRightAriaLabel: string;\n };\n};\n"],"mappings":""}
1	+ {"version":3,"file":"prop-types.js","names":[],"sources":["../../../../src/molecule/dashboard/cards-list/prop-types.ts"],"sourcesContent":["export type CardsListProps = {\n contentType: string;\n dataName: string;\n title: string \| React.ReactNode;\n showMore: string;\n cards: Record<string, unknown>[];\n customStyle: Record<string, unknown>;\n onScroll: (skip: number, limit: number) => void;\n onShowMore: () => void;\n 'arrows-aria-label': {\n showMoreOnLeftAriaLabel: string;\n showMoreOnRightAriaLabel: string;\n };\n};\n"],"mappings":""}

package/lib/molecule/dashboard/cards-list/style.css CHANGED Viewed

@@ -48,6 +48,10 @@
   color: dark;
 }
+.titleNode {
+  flex-grow: 1;
+}
 .titleLink {
   composes: title;
   cursor: pointer;

package/lib/template/app-player/popin-end/index.d.ts CHANGED Viewed

@@ -107,7 +107,7 @@ declare namespace PopinEnd {
             recommendation: PropTypes.Requireable<PropTypes.InferProps<{
                 contentType: PropTypes.Requireable<string>;
                 dataName: PropTypes.Requireable<string>;
-                title: PropTypes.Requireable<string>;
+                title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
                 showMore: PropTypes.Requireable<string>;
                 cards: PropTypes.Requireable<(PropTypes.InferProps<{
                     badge: PropTypes.Requireable<string>;
@@ -161,6 +161,7 @@ declare namespace PopinEnd {
                         adaptive: PropTypes.Requireable<string>;
                     }>>;
                 }> | null | undefined)[]>;
+                customStyle: PropTypes.Requireable<object>;
                 onScroll: PropTypes.Requireable<(...args: any[]) => any>;
                 onShowMore: PropTypes.Requireable<(...args: any[]) => any>;
                 'arrows-aria-label': PropTypes.Requireable<PropTypes.InferProps<{

package/lib/template/app-player/popin-end/summary.d.ts CHANGED Viewed

@@ -113,7 +113,7 @@ declare namespace Summary {
         const recommendation: PropTypes.Requireable<PropTypes.InferProps<{
             contentType: PropTypes.Requireable<string>;
             dataName: PropTypes.Requireable<string>;
-            title: PropTypes.Requireable<string>;
+            title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
             showMore: PropTypes.Requireable<string>;
             cards: PropTypes.Requireable<(PropTypes.InferProps<{
                 badge: PropTypes.Requireable<string>;
@@ -167,6 +167,7 @@ declare namespace Summary {
                     adaptive: PropTypes.Requireable<string>;
                 }>>;
             }> | null | undefined)[]>;
+            customStyle: PropTypes.Requireable<object>;
             onScroll: PropTypes.Requireable<(...args: any[]) => any>;
             onShowMore: PropTypes.Requireable<(...args: any[]) => any>;
             'arrows-aria-label': PropTypes.Requireable<PropTypes.InferProps<{

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

@@ -112,7 +112,7 @@ declare namespace SearchPage {
         const recommendations: PropTypes.Requireable<PropTypes.InferProps<{
             contentType: PropTypes.Requireable<string>;
             dataName: PropTypes.Requireable<string>;
-            title: PropTypes.Requireable<string>;
+            title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
             showMore: PropTypes.Requireable<string>;
             cards: PropTypes.Requireable<(PropTypes.InferProps<{
                 badge: PropTypes.Requireable<string>;
@@ -166,6 +166,7 @@ declare namespace SearchPage {
                     adaptive: PropTypes.Requireable<string>;
                 }>>;
             }> | null | undefined)[]>;
+            customStyle: PropTypes.Requireable<object>;
             onScroll: PropTypes.Requireable<(...args: any[]) => any>;
             onShowMore: PropTypes.Requireable<(...args: any[]) => any>;
             'arrows-aria-label': PropTypes.Requireable<PropTypes.InferProps<{

package/lib/template/skill-detail/all-courses.css CHANGED Viewed

@@ -71,11 +71,50 @@
   margin-left: 12px;
 }
-@media mobile {
+.emptySearchResultContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.emptySearchResultTitle {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 28px;
+  margin-bottom: 8px;
+}
+.emptySearchResultDescription {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 22px;
+  margin-bottom: 16px;
+}
+.emptySearchResultClearSearch {
+  color: #0061FF;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+  cursor: pointer;
+}
+.emptySearchResultClearSearch:hover {
+  text-decoration: underline;
+}
+@media (max-width: 799px) {
   .searchAndSortSection {
     flex-direction: column;
   }
+  .sortSection {
+    margin-top: 16px;
+  }
+}
+@media mobile {
   .sortSection {
     flex-direction: column;
     gap: 16px;

package/lib/template/skill-detail/all-courses.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"all-courses.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/all-courses.js"],"names":[],"mappings":";AA2CA,~~mEAmGC~~"}
1	+ {"version":3,"file":"all-courses.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/all-courses.js"],"names":[],"mappings":";AA2CA,mEAmHC"}

package/lib/template/skill-detail/all-courses.js CHANGED Viewed

@@ -135,14 +135,16 @@ const AllCourses = (props, context) => {
     className: _allCourses.default.sortSection
   }, /*#__PURE__*/_react.default.createElement(_inputSwitch.default, {
     type: "switch",
+    name: translate('show_completed'),
     title: translate('show_completed'),
+    "aria-label": 'Show completed courses aria label',
     value: showCompleted,
     onChange: handleShowCompletedToggle
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: _allCourses.default.sortWrapper
   }, translate('sort_by'), sortView))), /*#__PURE__*/_react.default.createElement("div", {
     className: _allCourses.default.filterWrapper
-  }, options.length > 2 ? options.map((filter, index) => {
+  }, options.length > 2 && searchResults.length > 0 ? options.map((filter, index) => {
     const {
       name,
       value,
@@ -164,10 +166,21 @@ const AllCourses = (props, context) => {
     }), value === 'ALL' ? /*#__PURE__*/_react.default.createElement("div", {
       className: _allCourses.default.divider
     }) : null);
-  }) : null), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_cardsGrid.default, {
+  }) : null), /*#__PURE__*/_react.default.createElement("div", null, searchResults.length > 0 ? /*#__PURE__*/_react.default.createElement(_cardsGrid.default, {
     list: searchResults,
     justifyContent: "left"
-  })));
+  }) : /*#__PURE__*/_react.default.createElement("div", {
+    className: _allCourses.default.emptySearchResultContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _allCourses.default.emptySearchResultTitle
+  }, translate('empty_search_result_title', {
+    searchValue
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _allCourses.default.emptySearchResultDescription
+  }, translate('empty_search_result_description')), /*#__PURE__*/_react.default.createElement("div", {
+    className: _allCourses.default.emptySearchResultClearSearch,
+    onClick: handleSearchReset
+  }, translate('empty_search_result_clear_search')))));
 };
 AllCourses.contextTypes = {

package/lib/template/skill-detail/all-courses.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"all-courses.js","names":["FilterButton","props","context","selected","filter","onClick","skin","primarySkinColor","buttonProps","customStyle","backgroundColor","color","transition","width","label","contextTypes","Provider","childContextTypes","translate","propTypes","PropTypes","bool","string","func","AllCourses","skillIncludedCourses","filters","sorting","options","onChange","list","showCompleted","setShowCompleted","useState","searchValue","setSearchValue","searchResults","setSearchResults","sort","a","b","progressA","progress","progressB","sortView","undefined","handleSearch","useCallback","value","skill","searchValueIncluded","title","handleSearchReset","handleShowCompletedToggle","tempShowCompleted","style","continueLearningWrapper","continueLearningTitle","continueLearningNumber","length","searchAndSortSection","searchWrapper","placeholder","sortSection","sortWrapper","filterWrapper","map","index","name","handleChange","filterButtonWrapper","divider","shape","CardsGrid","arrayOf","SelectOptionPropTypes","Select"],"sources":["../../../src/template/skill-detail/all-courses.js"],"sourcesContent":["import React, {useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {get} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport SearchForm from '../../molecule/search-form';\nimport CardsGrid from '../../organism/cards-grid';\nimport searchValueIncluded from '../../util/search-value-included';\nimport InputSwitch from '../../atom/input-switch';\nimport style from './all-courses.css';\n\nconst FilterButton = (props, context) => {\n const {selected, filter, onClick} = props;\n const {skin} = context;\n const primarySkinColor = get('common.primary', skin);\n\n const buttonProps = {\n customStyle: {\n backgroundColor: selected ? primarySkinColor : '#E1E1E3',\n color: selected ? '#FFFFFF' : '#515161',\n transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n width: 'fit-content'\n },\n label: filter,\n onClick,\n 'data-name': 'filter-type-course-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 selected: PropTypes.bool,\n filter: PropTypes.string,\n onClick: PropTypes.func\n};\n\nconst AllCourses = (props, context) => {\n const {skillIncludedCourses, filters, sorting} = props;\n const {options, onChange} = filters;\n const {list} = skillIncludedCourses;\n const {translate} = context;\n const [showCompleted, setShowCompleted] = useState(true);\n const [searchValue, setSearchValue] = useState('');\n const [searchResults, setSearchResults] = useState(\n list.sort((a, b) => {\n const progressA = a.progress ?? 0;\n const progressB = b.progress ?? 0;\n return progressB - progressA;\n })\n );\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 handleSearch = useCallback(\n value => {\n setSearchValue(value);\n setSearchResults(list.filter(skill => searchValueIncluded(skill.title, value)));\n },\n [list, setSearchValue, setSearchResults]\n );\n\n const handleSearchReset = useCallback(() => {\n setSearchValue('');\n setSearchResults(list);\n }, [list, setSearchValue, setSearchResults]);\n\n const handleShowCompletedToggle = useCallback(() => {\n const tempShowCompleted = !showCompleted;\n setShowCompleted(tempShowCompleted);\n if (tempShowCompleted) {\n setSearchResults(list);\n handleSearchReset();\n } else {\n setSearchResults(searchResults.filter(skill => skill.progress === 0));\n }\n }, [searchResults, showCompleted, setShowCompleted]);\n\n return (\n <>\n <div className={style.continueLearningWrapper}>\n <span className={style.continueLearningTitle}>{translate('all_courses')}</span>\n <span className={style.continueLearningNumber}>{skillIncludedCourses.list.length}</span>\n </div>\n <div className={style.searchAndSortSection}>\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 className={style.sortSection}>\n <InputSwitch\n type=\"switch\"\n title={translate('show_completed')}\n value={showCompleted}\n onChange={handleShowCompletedToggle}\n />\n <div className={style.sortWrapper}>\n {translate('sort_by')}\n {sortView}\n </div>\n </div>\n </div>\n <div className={style.filterWrapper}>\n {options.length > 2\n ? options.map((filter, index) => {\n const {name, value, selected} = filter;\n\n function handleChange() {\n onChange(value);\n handleSearchReset();\n }\n return (\n <div key={index} className={style.filterButtonWrapper}>\n <FilterButton selected={selected} filter={name} onClick={handleChange} />\n {value === 'ALL' ? <div className={style.divider} /> : null}\n </div>\n );\n })\n : null}\n </div>\n <div>\n <CardsGrid list={searchResults} justifyContent=\"left\" />\n </div>\n </>\n );\n};\n\nAllCourses.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nAllCourses.propTypes = {\n skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n filters: PropTypes.shape({\n onChange: PropTypes.func,\n options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n }),\n sorting: PropTypes.shape(Select.propTypes)\n};\n\nexport default AllCourses;\n"],"mappings":"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"}
1	+ {"version":3,"file":"all-courses.js","names":["FilterButton","props","context","selected","filter","onClick","skin","primarySkinColor","buttonProps","customStyle","backgroundColor","color","transition","width","label","contextTypes","Provider","childContextTypes","translate","propTypes","PropTypes","bool","string","func","AllCourses","skillIncludedCourses","filters","sorting","options","onChange","list","showCompleted","setShowCompleted","useState","searchValue","setSearchValue","searchResults","setSearchResults","sort","a","b","progressA","progress","progressB","sortView","undefined","handleSearch","useCallback","value","skill","searchValueIncluded","title","handleSearchReset","handleShowCompletedToggle","tempShowCompleted","style","continueLearningWrapper","continueLearningTitle","continueLearningNumber","length","searchAndSortSection","searchWrapper","placeholder","sortSection","sortWrapper","filterWrapper","map","index","name","handleChange","filterButtonWrapper","divider","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","shape","CardsGrid","arrayOf","SelectOptionPropTypes","Select"],"sources":["../../../src/template/skill-detail/all-courses.js"],"sourcesContent":["import React, {useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {get} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport SearchForm from '../../molecule/search-form';\nimport CardsGrid from '../../organism/cards-grid';\nimport searchValueIncluded from '../../util/search-value-included';\nimport InputSwitch from '../../atom/input-switch';\nimport style from './all-courses.css';\n\nconst FilterButton = (props, context) => {\n const {selected, filter, onClick} = props;\n const {skin} = context;\n const primarySkinColor = get('common.primary', skin);\n\n const buttonProps = {\n customStyle: {\n backgroundColor: selected ? primarySkinColor : '#E1E1E3',\n color: selected ? '#FFFFFF' : '#515161',\n transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n width: 'fit-content'\n },\n label: filter,\n onClick,\n 'data-name': 'filter-type-course-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 selected: PropTypes.bool,\n filter: PropTypes.string,\n onClick: PropTypes.func\n};\n\nconst AllCourses = (props, context) => {\n const {skillIncludedCourses, filters, sorting} = props;\n const {options, onChange} = filters;\n const {list} = skillIncludedCourses;\n const {translate} = context;\n const [showCompleted, setShowCompleted] = useState(true);\n const [searchValue, setSearchValue] = useState('');\n const [searchResults, setSearchResults] = useState(\n list.sort((a, b) => {\n const progressA = a.progress ?? 0;\n const progressB = b.progress ?? 0;\n return progressB - progressA;\n })\n );\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 handleSearch = useCallback(\n value => {\n setSearchValue(value);\n setSearchResults(list.filter(skill => searchValueIncluded(skill.title, value)));\n },\n [list, setSearchValue, setSearchResults]\n );\n\n const handleSearchReset = useCallback(() => {\n setSearchValue('');\n setSearchResults(list);\n }, [list, setSearchValue, setSearchResults]);\n\n const handleShowCompletedToggle = useCallback(() => {\n const tempShowCompleted = !showCompleted;\n setShowCompleted(tempShowCompleted);\n if (tempShowCompleted) {\n setSearchResults(list);\n handleSearchReset();\n } else {\n setSearchResults(searchResults.filter(skill => skill.progress === 0));\n }\n }, [searchResults, showCompleted, setShowCompleted]);\n\n return (\n <>\n <div className={style.continueLearningWrapper}>\n <span className={style.continueLearningTitle}>{translate('all_courses')}</span>\n <span className={style.continueLearningNumber}>{skillIncludedCourses.list.length}</span>\n </div>\n <div className={style.searchAndSortSection}>\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 className={style.sortSection}>\n <InputSwitch\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 <div className={style.sortWrapper}>\n {translate('sort_by')}\n {sortView}\n </div>\n </div>\n </div>\n <div className={style.filterWrapper}>\n {options.length > 2 && searchResults.length > 0\n ? options.map((filter, index) => {\n const {name, value, selected} = filter;\n\n function handleChange() {\n onChange(value);\n handleSearchReset();\n }\n return (\n <div key={index} className={style.filterButtonWrapper}>\n <FilterButton selected={selected} filter={name} onClick={handleChange} />\n {value === 'ALL' ? <div className={style.divider} /> : null}\n </div>\n );\n })\n : null}\n </div>\n <div>\n {searchResults.length > 0 ? (\n <CardsGrid list={searchResults} justifyContent=\"left\" />\n ) : (\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>\n </>\n );\n};\n\nAllCourses.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nAllCourses.propTypes = {\n skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n filters: PropTypes.shape({\n onChange: PropTypes.func,\n options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n }),\n sorting: PropTypes.shape(Select.propTypes)\n};\n\nexport default AllCourses;\n"],"mappings":"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"}

package/lib/template/skill-detail/continue-learning.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"continue-learning.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/continue-learning.js"],"names":[],"mappings":";~~AAMA~~,~~gFAmBC~~"}
1	+ {"version":3,"file":"continue-learning.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/continue-learning.js"],"names":[],"mappings":";AAOA,gFAkBC"}

package/lib/template/skill-detail/continue-learning.js CHANGED Viewed

@@ -11,12 +11,12 @@ var _provider = _interopRequireDefault(require("../../atom/provider"));
 var _cardsGrid = _interopRequireDefault(require("../../organism/cards-grid"));
+var _cardsList = _interopRequireDefault(require("../../molecule/dashboard/cards-list"));
 var _continueLearning = _interopRequireDefault(require("./continue-learning.css"));
 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 ContinueLearning = (props, context) => {
   const {
     ongoingCourses
@@ -29,15 +29,19 @@ const ContinueLearning = (props, context) => {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: _continueLearning.default.continueLearningWrapper
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  const Title = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
     className: _continueLearning.default.continueLearningTitle
   }, translate('continue_learning')), /*#__PURE__*/_react.default.createElement("span", {
     className: _continueLearning.default.continueLearningNumber
-  }, ongoingCourses.list.length)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_cardsGrid.default, _extends({}, ongoingCourses, {
-    justifyContent: "left"
-  }))));
+  }, ongoingCourses.list.length));
+  return /*#__PURE__*/_react.default.createElement(_cardsList.default, {
+    cards: ongoingCourses.list,
+    title: /*#__PURE__*/_react.default.createElement(Title, null),
+    customStyle: {
+      padding: '16px 0px 8px'
+    }
+  });
 };
 ContinueLearning.contextTypes = {

package/lib/template/skill-detail/continue-learning.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"continue-learning.js","names":["ContinueLearning","props","context","ongoingCourses","translate","list","length","~~style~~","~~continueLearningWrapper~~","continueLearningTitle","continueLearningNumber","contextTypes","skin","Provider","childContextTypes","propTypes","PropTypes","shape","CardsGrid"],"sources":["../../../src/template/skill-detail/continue-learning.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Provider from '../../atom/provider';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './continue-learning.css';\n\nconst ContinueLearning = (props, context) => {\n const {ongoingCourses} = props;\n const {translate} = context;\n\n if (ongoingCourses.list.length === 0) {\n return null;\n }\n\n ~~return~~ (\n <>\n <~~div className={style.continueLearningWrapper}>\n <~~span className={style.continueLearningTitle}>{translate('continue_learning')}</span>\n <span className={style.continueLearningNumber}>{ongoingCourses.list.length}</span>\n ~~</div>\~~n ~~<div>\~~n <~~CardsGrid~~ {~~...~~ongoingCourses} ~~justifyContent=\"left\"~~ />\n ~~</div>\n </>\n~~ );\n};\n\nContinueLearning.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nContinueLearning.propTypes = {\n ongoingCourses: PropTypes.shape(CardsGrid.propTypes)\n};\n\nexport default ContinueLearning;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA~~;;;;;;~~AAEA,MAAMA,gBAAgB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EAC3C,MAAM;IAACC;EAAD,IAAmBF,KAAzB;EACA,MAAM;IAACG;EAAD,IAAcF,OAApB;;EAEA,IAAIC,cAAc,CAACE,IAAf,CAAoBC,MAApB,KAA+B,CAAnC,EAAsC;IACpC,OAAO,IAAP;EACD;;EAED,~~oBACE~~,~~yEACE;IAAK~~,~~SAAS~~,~~EAAEC~~,~~yBAAA,CAAMC~~;~~EAAtB,gBACE;~~IAAM,SAAS,~~EAAED~~,yBAAA,~~CAAME~~;EAAvB,GAA+CL,SAAS,CAAC,mBAAD,CAAxD,CADF,eAEE;IAAM,SAAS,~~EAAEG~~,yBAAA,~~CAAMG~~;EAAvB,GAAgDP,cAAc,CAACE,IAAf,CAAoBC,MAApE,CAFF,CADF,~~eAKE~~,~~uDACE,~~6BAAC,kBAAD,~~eAAeH~~,~~cAAf;IAA+B~~,cAAc,~~EAAC~~;~~EAA9C~~,~~GADF~~,~~CALF~~,~~CADF~~;~~AAWD~~,~~CAnBD~~;;~~AAqBAH~~,gBAAgB,~~CAACW~~,YAAjB,GAAgC;EAC9BC,IAAI,EAAEC,iBAAA,CAASC,iBAAT,CAA2BF,IADH;~~EAE9BR~~,SAAS,~~EAAES~~,iBAAA,CAASC,iBAAT,~~CAA2BV~~;AAFR,CAAhC;AAKAJ,gBAAgB,~~CAACe~~,SAAjB,2CAA6B;~~EAC3BZ~~,cAAc,~~EAAEa~~,kBAAA,CAAUC,KAAV,CAAgBC,kBAAA,CAAUH,SAA1B;AADW,CAA7B;~~eAIef~~,gB"}
1	+ {"version":3,"file":"continue-learning.js","names":["ContinueLearning","props","context","ongoingCourses","translate","list","length","Title","style","continueLearningTitle","continueLearningNumber","padding","contextTypes","skin","Provider","childContextTypes","propTypes","PropTypes","shape","CardsGrid"],"sources":["../../../src/template/skill-detail/continue-learning.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Provider from '../../atom/provider';\nimport CardsGrid from '../../organism/cards-grid';\nimport CardsList from '../../molecule/dashboard/cards-list';\nimport style from './continue-learning.css';\n\nconst ContinueLearning = (props, context) => {\n const {ongoingCourses} = props;\n const {translate} = context;\n\n if (ongoingCourses.list.length === 0) {\n return null;\n }\n\n const Title = () => (\n <>\n <span className={style.continueLearningTitle}>{translate('continue_learning')}</span>\n <span className={style.continueLearningNumber}>{ongoingCourses.list.length}</span>\n </>\n );\n\n return (\n <CardsList cards={ongoingCourses.list} title={<Title />} customStyle={{padding: '16px 0px 8px'}}/>\n );\n};\n\nContinueLearning.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nContinueLearning.propTypes = {\n ongoingCourses: PropTypes.shape(CardsGrid.propTypes)\n};\n\nexport default ContinueLearning;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,gBAAgB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EAC3C,MAAM;IAACC;EAAD,IAAmBF,KAAzB;EACA,MAAM;IAACG;EAAD,IAAcF,OAApB;;EAEA,IAAIC,cAAc,CAACE,IAAf,CAAoBC,MAApB,KAA+B,CAAnC,EAAsC;IACpC,OAAO,IAAP;EACD;;EAED,MAAMC,KAAK,GAAG,mBACZ,yEACE;IAAM,SAAS,EAAEC,yBAAA,CAAMC;EAAvB,GAA+CL,SAAS,CAAC,mBAAD,CAAxD,CADF,eAEE;IAAM,SAAS,EAAEI,yBAAA,CAAME;EAAvB,GAAgDP,cAAc,CAACE,IAAf,CAAoBC,MAApE,CAFF,CADF;;EAOA,oBACE,6BAAC,kBAAD;IAAW,KAAK,EAAEH,cAAc,CAACE,IAAjC;IAAuC,KAAK,eAAE,6BAAC,KAAD,OAA9C;IAAyD,WAAW,EAAE;MAACM,OAAO,EAAE;IAAV;EAAtE,EADF;AAGD,CAlBD;;AAoBAX,gBAAgB,CAACY,YAAjB,GAAgC;EAC9BC,IAAI,EAAEC,iBAAA,CAASC,iBAAT,CAA2BF,IADH;EAE9BT,SAAS,EAAEU,iBAAA,CAASC,iBAAT,CAA2BX;AAFR,CAAhC;AAKAJ,gBAAgB,CAACgB,SAAjB,2CAA6B;EAC3Bb,cAAc,EAAEc,kBAAA,CAAUC,KAAV,CAAgBC,kBAAA,CAAUH,SAA1B;AADW,CAA7B;eAIehB,gB"}

package/lib/template/skill-detail/style.css CHANGED Viewed

@@ -1,6 +1,7 @@
 @value colors: "../../variables/colors.css";
 @value breakpoints: "../../variables/breakpoints.css";
 @value tablet from breakpoints;
+@value mobile from breakpoints;
 @value xtraLightGrey from colors;
 @value cm_grey_100 from colors;
 @value cm_grey_200 from colors;
@@ -161,3 +162,13 @@
     margin-top: 32px;
   }
 }
+@media mobile {
+  .ctaWrapper {
+    flex-direction: column;
+    button {
+      width: 100% !important;
+    }
+  }
+}

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

@@ -37,7 +37,7 @@ declare namespace TeamsDashboard {
         const sections: PropTypes.Requireable<(PropTypes.InferProps<{
             contentType: PropTypes.Requireable<string>;
             dataName: PropTypes.Requireable<string>;
-            title: PropTypes.Requireable<string>;
+            title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
             showMore: PropTypes.Requireable<string>;
             cards: PropTypes.Requireable<(PropTypes.InferProps<{
                 badge: PropTypes.Requireable<string>;
@@ -91,6 +91,7 @@ declare namespace TeamsDashboard {
                     adaptive: PropTypes.Requireable<string>;
                 }>>;
             }> | null | undefined)[]>;
+            customStyle: PropTypes.Requireable<object>;
             onScroll: PropTypes.Requireable<(...args: any[]) => any>;
             onShowMore: PropTypes.Requireable<(...args: any[]) => any>;
             'arrows-aria-label': PropTypes.Requireable<PropTypes.InferProps<{

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "11.32.12-alpha.0+6ec0d1859",
+  "version": "11.32.12-alpha.4+de06f398e",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -177,5 +177,5 @@
     "last 2 versions",
     "IE 11"
   ],
-  "gitHead": "6ec0d1859050f4f1d689b94e86ea25e06aa26064"
+  "gitHead": "de06f398e3e7030b222cd757cd14e2d54c1c9640"
 }