@coorpacademy/components 11.18.7 → 11.18.8-alpha.12

package/lib/molecule/card/style.css

@@ -8,9 +8,10 @@
 @value dark from colors;
 @value xtraLightGrey from colors;
 @value white from colors;
+@value cm_negative_200 from colors;
+@value negative_100 from colors;
 
 .default[disabled] {
-  pointer-events: none;
   cursor: inherit;
 }
 
@@ -163,7 +164,7 @@
 }
 
 .default[disabled] .imageWrapper {
-  opacity: 0.4;
+  opacity: 0.8;
 }
 
 .lockWrapper {
@@ -186,12 +187,53 @@
   bottom: 0;
   content: '';
   opacity: 0.4;
-  background: black;
+  background: linear-gradient(
+    to bottom, 
+     black 50%
+  );
+  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+}
+
+.lockWrapper:hover {
+  cursor: pointer;
+}
+
+.lockWrapper:hover .lockIcon {
+  background-color: cm_negative_200;
+  color: white;
+}
+
+.lockWrapper:hover span {
+  font-weight: 600;
+  width: 150px;
+}
+
+.lockContent {
+  display: flex;
+  gap: 8px;
+  flex-direction: column;
+  z-index: 2;
+}
+
+.lockContent span {
+  width: 134px;
+  height: 40px;
+  color: white;
+  text-align: center;
+  font-family: 'Gilroy';
+  font-size: 14px;
+  line-height: 20px;
 }
 
 .lockIcon {
-  font-size: 40px;
-  z-index: 1;
+  width: 48px;
+  min-width: 48px;
+  min-height: 48px;
+  background-color: negative_100;
+  align-self: center;
+  border-radius: 16px;
+  color: cm_negative_200;
 }
 
 .imageWrapper {

package/lib/molecule/cm-popin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/cm-popin/index.js"],"names":[],"mappings":";AAeA,kDAoLC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/cm-popin/index.js"],"names":[],"mappings":";AAsBA,kDA6MC"}

package/lib/molecule/cm-popin/index.js

@@ -15,12 +15,22 @@ var _buttonLinkIconOnly = _interopRequireDefault(require("../../atom/button-link
 
 var _inputSwitch = _interopRequireDefault(require("../../atom/input-switch"));
 
+var _title = _interopRequireDefault(require("../../atom/title"));
+
+var _cardsGrid = _interopRequireDefault(require("../../organism/cards-grid"));
+
 var _style = _interopRequireDefault(require("./style.css"));
 
 var _types = _interopRequireDefault(require("./types"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const IconType = {
+  lockedContent: /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyPadlock, {
+    className: _style.default.lockIcon
+  })
+};
+
 const CMPopin = props => {
   const {
     content,
@@ -35,7 +45,8 @@ const CMPopin = props => {
     thirdButton,
     cookieTitle,
     descriptionBtnTxt,
-    listBtnSwicth
+    listBtnSwicth,
+    items
   } = props;
   const logo = {
     AlertDiamond: _novaIcons.NovaSolidInterfaceFeedbackInterfaceAlertDiamond,
@@ -50,10 +61,28 @@ const CMPopin = props => {
   } : null;
 
   const renderHeader = () => {
-    if (header) return /*#__PURE__*/_react.default.createElement("img", {
-      className: _style.default.headerBackground,
-      src: header
-    });
+    if (header) {
+      const {
+        title,
+        headerIcon,
+        backgroundImage
+      } = header;
+      const TopTitleIcon = IconType[headerIcon];
+
+      if (title) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: _style.default.headerContent
+        }, TopTitleIcon, /*#__PURE__*/_react.default.createElement("div", {
+          className: _style.default.headerTitle
+        }, /*#__PURE__*/_react.default.createElement(_title.default, title)));
+      }
+
+      return /*#__PURE__*/_react.default.createElement("img", {
+        className: _style.default.headerBackground,
+        src: backgroundImage
+      });
+    }
+
     if (mode === 'cookie') return /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.cookieHeader
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -115,6 +144,14 @@ const CMPopin = props => {
     })(listBtnSwicth);
   };
 
+  const renderItems = () => {
+    const {
+      type,
+      list
+    } = items;
+    return type === 'content' ? /*#__PURE__*/_react.default.createElement(_cardsGrid.default, list) : null;
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: mode !== 'cookie' ? _style.default.background : null,
     style: backgroundImageStyle,
@@ -129,7 +166,7 @@ const CMPopin = props => {
     "aria-label": 'close-icon',
     size: "small",
     icon: "close"
-  }) : null), /*#__PURE__*/_react.default.createElement("div", {
+  }) : null), mode !== 'items' ? /*#__PURE__*/_react.default.createElement("div", {
     className: mode === 'cookie' || mode === 'information' ? _style.default.cookieTitleContainer : _style.default.titleContainer
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.contentSection
@@ -148,9 +185,12 @@ const CMPopin = props => {
     dangerouslySetInnerHTML: {
       __html: descriptionText
     }
-  }) : null), descriptionBtnTxt ? /*#__PURE__*/_react.default.createElement("div", {
+  }) : null) : null, descriptionBtnTxt ? /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.descriptionBtn
-  }, descriptionBtnTxt) : null, renderBtnSwitch(), firstButton || secondButton || thirdButton ? /*#__PURE__*/_react.default.createElement("div", {
+  }, descriptionBtnTxt) : null, items ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.itemsContainer,
+    "data-name": 'cm-popin-cards'
+  }, renderItems()) : null, renderBtnSwitch(), firstButton || secondButton || thirdButton ? /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.buttonContainer
   }, firstButton ? /*#__PURE__*/_react.default.createElement("div", {
     className: firstButton.largeButton ? _style.default.largeButton : _style.default.button

package/lib/molecule/cm-popin/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["CMPopin","props","content","mode","firstButton","secondButton","onClose","header","icon","backgroundImageUrl","descriptionText","thirdButton","cookieTitle","descriptionBtnTxt","listBtnSwicth","logo","AlertDiamond","WindowUpload","MoonRocket","CheckCircle1","LogoComponent","backgroundImageStyle","backgroundImage","backgroundSize","renderHeader","style","headerBackground","cookieHeader","cookieIconContainer","cookieIcon","getClassBtnSwitch","index","btnList","firstBtnSwitchContainer","length","lastBtnSwitchContainer","singleSwitchContainer","renderBtnSwitch","map","convert","cap","el","type","title","value","onChange","titlePosition","theme","details","requiredSelection","disabled","id","dataName","background","popinCookie","popin","popinHeader","cookieTitleContainer","titleContainer","contentSection","message","__html","descriptionBtn","buttonContainer","largeButton","button","label","handleOnclick","customStyle","propTypes"],"sources":["../../../src/molecule/cm-popin/index.js"],"sourcesContent":["import React from 'react';\nimport {\n  NovaSolidInterfaceFeedbackInterfaceAlertDiamond as AlertDiamond,\n  NovaSolidApplicationsWindowUpload3 as WindowUpload,\n  NovaLineSettingsCookie as Cookie,\n  NovaSolidSpaceMoonRocket as MoonRocket,\n  NovaLineStatusCheckCircle1 as CheckCircle1\n} from '@coorpacademy/nova-icons';\nimport map from 'lodash/fp/map';\nimport Cta from '../../atom/button-link';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport InputSwitch from '../../atom/input-switch';\nimport style from './style.css';\nimport propTypes from './types';\n\nconst CMPopin = props => {\n  const {\n    content,\n    mode = 'alert',\n    firstButton,\n    secondButton,\n    onClose,\n    header,\n    icon,\n    backgroundImageUrl,\n    descriptionText,\n    thirdButton,\n    cookieTitle,\n    descriptionBtnTxt,\n    listBtnSwicth\n  } = props;\n\n  const logo = {\n    AlertDiamond,\n    WindowUpload,\n    MoonRocket,\n    CheckCircle1\n  };\n  const LogoComponent = logo[icon];\n\n  const backgroundImageStyle = backgroundImageUrl\n    ? {\n        backgroundImage: `url(${backgroundImageUrl})`,\n        backgroundSize: 'cover'\n      }\n    : null;\n  const renderHeader = () => {\n    if (header) return <img className={style.headerBackground} src={header} />;\n    if (mode === 'cookie')\n      return (\n        <div className={style.cookieHeader}>\n          <div className={style.cookieIconContainer}>\n            <Cookie className={style.cookieIcon} />\n          </div>\n          <div className={style.cookieTitle}>{cookieTitle}</div>\n        </div>\n      );\n    return null;\n  };\n  const getClassBtnSwitch = (index, btnList) => {\n    switch (index) {\n      case 0:\n        return style.firstBtnSwitchContainer;\n      case btnList.length - 1:\n        return style.lastBtnSwitchContainer;\n      default:\n        return style.singleSwitchContainer;\n    }\n  };\n  const renderBtnSwitch = () => {\n    return map.convert({cap: false})((el, index) => {\n      const {\n        type,\n        title,\n        value,\n        onChange,\n        titlePosition,\n        theme,\n        details,\n        requiredSelection,\n        disabled,\n        id,\n        'data-name': dataName\n      } = el;\n      return (\n        <div key={index} className={getClassBtnSwitch(index, listBtnSwicth)}>\n          <InputSwitch\n            {...{\n              type,\n              title,\n              value,\n              onChange,\n              titlePosition,\n              theme,\n              details,\n              requiredSelection,\n              disabled,\n              id,\n              'data-name': dataName\n            }}\n          />\n        </div>\n      );\n    })(listBtnSwicth);\n  };\n  return (\n    <div\n      className={mode !== 'cookie' ? style.background : null}\n      style={backgroundImageStyle}\n      data-name={'cm-popin-container'}\n    >\n      <div className={mode === 'cookie' ? style.popinCookie : style.popin}>\n        <header className={style.popinHeader}>\n          {renderHeader()}\n          {onClose ? (\n            <ButtonLinkIconOnly\n              onClick={onClose}\n              data-name={'close-icon'}\n              aria-label={'close-icon'}\n              size=\"small\"\n              icon=\"close\"\n            />\n          ) : null}\n        </header>\n        <div\n          className={\n            mode === 'cookie' || mode === 'information'\n              ? style.cookieTitleContainer\n              : style.titleContainer\n          }\n        >\n          <div className={style.contentSection}>\n            {LogoComponent ? <LogoComponent className={style.icon} /> : null}\n            {content ? (\n              <p\n                className={mode === 'alert' ? style.content : style.message}\n                data-name={'cm-popin-content'}\n                // eslint-disable-next-line react/no-danger\n                dangerouslySetInnerHTML={{__html: content}}\n              />\n            ) : null}\n          </div>\n          {descriptionText ? (\n            <p\n              className={style.descriptionText}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: descriptionText}}\n            />\n          ) : null}\n        </div>\n        {descriptionBtnTxt ? <div className={style.descriptionBtn}>{descriptionBtnTxt}</div> : null}\n        {renderBtnSwitch()}\n        {firstButton || secondButton || thirdButton ? (\n          <div className={style.buttonContainer}>\n            {firstButton ? (\n              <div className={firstButton.largeButton ? style.largeButton : style.button}>\n                <Cta\n                  label={firstButton.label}\n                  onClick={firstButton.handleOnclick}\n                  data-name={'cm-popin-cta'}\n                  aria-label={firstButton['aria-label']}\n                  type={firstButton.type}\n                  customStyle={firstButton.customStyle}\n                />\n              </div>\n            ) : null}\n            {secondButton ? (\n              <div className={secondButton.largeButton ? style.largeButton : style.button}>\n                <Cta\n                  label={secondButton.label}\n                  onClick={secondButton.handleOnclick}\n                  data-name={`cm-popin-cta-${secondButton.type}`}\n                  aria-label={secondButton['aria-label']}\n                  type={secondButton.type}\n                  customStyle={secondButton.customStyle}\n                />\n              </div>\n            ) : null}\n            {thirdButton ? (\n              <div className={thirdButton.largeButton ? style.largeButton : style.button}>\n                <Cta\n                  label={thirdButton.label}\n                  onClick={thirdButton.handleOnclick}\n                  data-name={`cm-popin-cta-${thirdButton.type}`}\n                  aria-label={thirdButton['aria-label']}\n                  type={thirdButton.type}\n                  customStyle={thirdButton.customStyle}\n                />\n              </div>\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nCMPopin.propTypes = propTypes;\n\nexport default CMPopin;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["IconType","lockedContent","style","lockIcon","CMPopin","props","content","mode","firstButton","secondButton","onClose","header","icon","backgroundImageUrl","descriptionText","thirdButton","cookieTitle","descriptionBtnTxt","listBtnSwicth","items","logo","AlertDiamond","WindowUpload","MoonRocket","CheckCircle1","LogoComponent","backgroundImageStyle","backgroundImage","backgroundSize","renderHeader","title","headerIcon","TopTitleIcon","headerContent","headerTitle","headerBackground","cookieHeader","cookieIconContainer","cookieIcon","getClassBtnSwitch","index","btnList","firstBtnSwitchContainer","length","lastBtnSwitchContainer","singleSwitchContainer","renderBtnSwitch","map","convert","cap","el","type","value","onChange","titlePosition","theme","details","requiredSelection","disabled","id","dataName","renderItems","list","background","popinCookie","popin","popinHeader","cookieTitleContainer","titleContainer","contentSection","message","__html","descriptionBtn","itemsContainer","buttonContainer","largeButton","button","label","handleOnclick","customStyle","propTypes"],"sources":["../../../src/molecule/cm-popin/index.js"],"sourcesContent":["import React from 'react';\nimport {\n  NovaSolidInterfaceFeedbackInterfaceAlertDiamond as AlertDiamond,\n  NovaSolidApplicationsWindowUpload3 as WindowUpload,\n  NovaLineSettingsCookie as Cookie,\n  NovaSolidSpaceMoonRocket as MoonRocket,\n  NovaCompositionCoorpacademyPadlock as LockIcon,\n  NovaLineStatusCheckCircle1 as CheckCircle1\n} from '@coorpacademy/nova-icons';\nimport map from 'lodash/fp/map';\nimport Cta from '../../atom/button-link';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport InputSwitch from '../../atom/input-switch';\nimport Title from '../../atom/title';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport propTypes from './types';\n\nconst IconType = {\n  lockedContent: <LockIcon className={style.lockIcon} />\n};\n\nconst CMPopin = props => {\n  const {\n    content,\n    mode = 'alert',\n    firstButton,\n    secondButton,\n    onClose,\n    header,\n    icon,\n    backgroundImageUrl,\n    descriptionText,\n    thirdButton,\n    cookieTitle,\n    descriptionBtnTxt,\n    listBtnSwicth,\n    items\n  } = props;\n  const logo = {\n    AlertDiamond,\n    WindowUpload,\n    MoonRocket,\n    CheckCircle1\n  };\n  const LogoComponent = logo[icon];\n\n  const backgroundImageStyle = backgroundImageUrl\n    ? {\n        backgroundImage: `url(${backgroundImageUrl})`,\n        backgroundSize: 'cover'\n      }\n    : null;\n  const renderHeader = () => {\n    if (header) {\n      const {title, headerIcon, backgroundImage} = header;\n      const TopTitleIcon = IconType[headerIcon];\n      if (title) {\n        return (\n          <div className={style.headerContent}>\n            {TopTitleIcon}\n            <div className={style.headerTitle}>\n              <Title {...title} />\n            </div>\n          </div>\n        );\n      }\n      return <img className={style.headerBackground} src={backgroundImage} />;\n    }\n    if (mode === 'cookie')\n      return (\n        <div className={style.cookieHeader}>\n          <div className={style.cookieIconContainer}>\n            <Cookie className={style.cookieIcon} />\n          </div>\n          <div className={style.cookieTitle}>{cookieTitle}</div>\n        </div>\n      );\n    return null;\n  };\n  const getClassBtnSwitch = (index, btnList) => {\n    switch (index) {\n      case 0:\n        return style.firstBtnSwitchContainer;\n      case btnList.length - 1:\n        return style.lastBtnSwitchContainer;\n      default:\n        return style.singleSwitchContainer;\n    }\n  };\n  const renderBtnSwitch = () => {\n    return map.convert({cap: false})((el, index) => {\n      const {\n        type,\n        title,\n        value,\n        onChange,\n        titlePosition,\n        theme,\n        details,\n        requiredSelection,\n        disabled,\n        id,\n        'data-name': dataName\n      } = el;\n      return (\n        <div key={index} className={getClassBtnSwitch(index, listBtnSwicth)}>\n          <InputSwitch\n            {...{\n              type,\n              title,\n              value,\n              onChange,\n              titlePosition,\n              theme,\n              details,\n              requiredSelection,\n              disabled,\n              id,\n              'data-name': dataName\n            }}\n          />\n        </div>\n      );\n    })(listBtnSwicth);\n  };\n  const renderItems = () => {\n    const {type, list} = items;\n    return type === 'content' ? <CardsGrid {...list} /> : null;\n  };\n  return (\n    <div\n      className={mode !== 'cookie' ? style.background : null}\n      style={backgroundImageStyle}\n      data-name={'cm-popin-container'}\n    >\n      <div className={mode === 'cookie' ? style.popinCookie : style.popin}>\n        <header className={style.popinHeader}>\n          {renderHeader()}\n          {onClose ? (\n            <ButtonLinkIconOnly\n              onClick={onClose}\n              data-name={'close-icon'}\n              aria-label={'close-icon'}\n              size=\"small\"\n              icon=\"close\"\n            />\n          ) : null}\n        </header>\n        {mode !== 'items' ? (\n          <div\n            className={\n              mode === 'cookie' || mode === 'information'\n                ? style.cookieTitleContainer\n                : style.titleContainer\n            }\n          >\n            <div className={style.contentSection}>\n              {LogoComponent ? <LogoComponent className={style.icon} /> : null}\n              {content ? (\n                <p\n                  className={mode === 'alert' ? style.content : style.message}\n                  data-name={'cm-popin-content'}\n                  // eslint-disable-next-line react/no-danger\n                  dangerouslySetInnerHTML={{__html: content}}\n                />\n              ) : null}\n            </div>\n            {descriptionText ? (\n              <p\n                className={style.descriptionText}\n                // eslint-disable-next-line react/no-danger\n                dangerouslySetInnerHTML={{__html: descriptionText}}\n              />\n            ) : null}\n          </div>\n        ) : null}\n        {descriptionBtnTxt ? <div className={style.descriptionBtn}>{descriptionBtnTxt}</div> : null}\n        {items ? (\n          <div className={style.itemsContainer} data-name={'cm-popin-cards'}>\n            {renderItems()}\n          </div>\n        ) : null}\n        {renderBtnSwitch()}\n        {firstButton || secondButton || thirdButton ? (\n          <div className={style.buttonContainer}>\n            {firstButton ? (\n              <div className={firstButton.largeButton ? style.largeButton : style.button}>\n                <Cta\n                  label={firstButton.label}\n                  onClick={firstButton.handleOnclick}\n                  data-name={'cm-popin-cta'}\n                  aria-label={firstButton['aria-label']}\n                  type={firstButton.type}\n                  customStyle={firstButton.customStyle}\n                />\n              </div>\n            ) : null}\n            {secondButton ? (\n              <div className={secondButton.largeButton ? style.largeButton : style.button}>\n                <Cta\n                  label={secondButton.label}\n                  onClick={secondButton.handleOnclick}\n                  data-name={`cm-popin-cta-${secondButton.type}`}\n                  aria-label={secondButton['aria-label']}\n                  type={secondButton.type}\n                  customStyle={secondButton.customStyle}\n                />\n              </div>\n            ) : null}\n            {thirdButton ? (\n              <div className={thirdButton.largeButton ? style.largeButton : style.button}>\n                <Cta\n                  label={thirdButton.label}\n                  onClick={thirdButton.handleOnclick}\n                  data-name={`cm-popin-cta-${thirdButton.type}`}\n                  aria-label={thirdButton['aria-label']}\n                  type={thirdButton.type}\n                  customStyle={thirdButton.customStyle}\n                />\n              </div>\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nCMPopin.propTypes = propTypes;\n\nexport default CMPopin;\n"],"mappings":"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"}

package/lib/molecule/cm-popin/style.css

@@ -22,6 +22,7 @@
 @value mobile from breakpoints;
 @value tablet from breakpoints;
 @value cm_grey_75 from colors;
+@value negative_100 from colors;
 
 .background {
   top: 0px;
@@ -137,6 +138,30 @@
 .popinHeader button {
   position: absolute;
 }
+
+.headerContent {
+  display: flex;
+  width: 100%;
+  gap: 16px;
+  padding: 8px;
+}
+
+.headerTitle {
+  width: 612px;
+  margin-bottom: 16px;
+  padding: 2px 0px 2px;
+}
+
+.lockIcon {
+  height: 48px;
+  width: 48px;
+  background-color: negative_100;
+  border-radius: 16px;
+  min-width: 48px;
+  min-height: 48px;
+  color: cm_negative_200;
+}
+
 .descriptionText {
   text-align: center;
   font-family: Gilroy;
@@ -280,6 +305,13 @@ a {
   padding: 0px 8px 0px 0px
 }
 
+.itemsContainer {
+  max-height: 369px;
+  overflow-y: auto;
+  width: 100%;
+  border-top: 1px solid cm_grey_100;
+}
+
 @media tablet {
   .popin {
     width: 80%;

package/lib/molecule/cm-popin/types.d.ts

@@ -1,8 +1,21 @@
 import PropTypes from 'prop-types';
+import { TitleProps } from '../../atom/title/types';
+import CardsGrid from '../../organism/cards-grid';
 declare const propTypes: {
     content: PropTypes.Requireable<string>;
     mode: PropTypes.Requireable<string>;
-    header: PropTypes.Requireable<string>;
+    header: PropTypes.Requireable<PropTypes.InferProps<{
+        title: PropTypes.Requireable<PropTypes.InferProps<{
+            title: PropTypes.Requireable<string>;
+            subtitle: PropTypes.Requireable<string>;
+            type: PropTypes.Requireable<string>;
+            'data-name': PropTypes.Requireable<string>;
+            titleSize: PropTypes.Requireable<string>;
+            subtitleSize: PropTypes.Requireable<string>;
+        }>>;
+        headerIcon: PropTypes.Requireable<string>;
+        backgroundImage: PropTypes.Requireable<string>;
+    }>>;
     firstButton: PropTypes.Requireable<PropTypes.InferProps<{
         label: PropTypes.Requireable<string>;
         handleOnclick: PropTypes.Requireable<(...args: any[]) => any>;
@@ -50,6 +63,18 @@ declare const propTypes: {
         'data-name': PropTypes.Requireable<string>;
         requiredSelection: PropTypes.Requireable<boolean>;
     }> | null | undefined)[]>;
+    items: PropTypes.Requireable<PropTypes.InferProps<{
+        type: PropTypes.Requireable<string>;
+        list: PropTypes.Requireable<PropTypes.InferProps<{
+            list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
+            loading: PropTypes.Requireable<boolean>;
+        }>>;
+    }>>;
+};
+declare type PopinHeaderProps = {
+    title: TitleProps;
+    backgroundImage: string;
+    headerIcon: string;
 };
 export declare type QuitPopinButton = {
     'aria-label'?: string;
@@ -65,9 +90,14 @@ export declare type CMPopinProps = {
     content: string;
     icon: string;
     mode: string;
+    popinHeader?: PopinHeaderProps;
     descriptionText: string;
     firstButton?: QuitPopinButton;
     secondButton?: QuitPopinButton;
+    items?: {
+        type: string;
+        list: PropTypes.InferProps<typeof CardsGrid.propTypes>;
+    };
 };
 export default propTypes;
 //# sourceMappingURL=types.d.ts.map

package/lib/molecule/cm-popin/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/cm-popin/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCd,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE;QACZ,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,oBAAY,YAAY,GAAG;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,YAAY,CAAC,EAAE,eAAe,CAAC;CAChC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/cm-popin/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,OAAO,EAAC,UAAU,EAAC,MAAM,wBAAwB,CAAC;AAClD,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAElD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Cd,CAAC;AAEF,aAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,UAAU,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE;QACZ,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,oBAAY,YAAY,GAAG;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,SAAS,CAAC,CAAC;KACxD,CAAC;CACH,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/molecule/cm-popin/types.js

@@ -9,12 +9,20 @@ var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
 
 var _inputSwitch = _interopRequireDefault(require("../../atom/input-switch"));
 
+var _title = _interopRequireDefault(require("../../atom/title"));
+
+var _cardsGrid = _interopRequireDefault(require("../../organism/cards-grid"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const propTypes = {
   content: _propTypes.default.string,
-  mode: _propTypes.default.oneOf(['alert', 'information', 'cookie']),
-  header: _propTypes.default.string,
+  mode: _propTypes.default.oneOf(['alert', 'information', 'cookie', 'items']),
+  header: _propTypes.default.shape({
+    title: _propTypes.default.shape(_title.default.propTypes),
+    headerIcon: _propTypes.default.string,
+    backgroundImage: _propTypes.default.string
+  }),
   firstButton: _propTypes.default.shape({
     label: _propTypes.default.string,
     handleOnclick: _propTypes.default.func,
@@ -45,7 +53,11 @@ const propTypes = {
   descriptionText: _propTypes.default.string,
   cookieTitle: _propTypes.default.string,
   descriptionBtnTxt: _propTypes.default.string,
-  listBtnSwicth: _propTypes.default.arrayOf(_propTypes.default.shape(_inputSwitch.default.propTypes))
+  listBtnSwicth: _propTypes.default.arrayOf(_propTypes.default.shape(_inputSwitch.default.propTypes)),
+  items: _propTypes.default.shape({
+    type: _propTypes.default.string,
+    list: _propTypes.default.shape(_cardsGrid.default.propTypes)
+  })
 };
 var _default = propTypes;
 exports.default = _default;

package/lib/molecule/cm-popin/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["propTypes","content","PropTypes","string","mode","oneOf","header","firstButton","shape","label","handleOnclick","func","largeButton","bool","type","customStyle","Cta","secondButton","thirdButton","onClose","icon","backgroundImageUrl","descriptionText","cookieTitle","descriptionBtnTxt","listBtnSwicth","arrayOf","InputSwitch"],"sources":["../../../src/molecule/cm-popin/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport Cta from '../../atom/button-link';\nimport InputSwitch from '../../atom/input-switch';\n\nconst propTypes = {\n  content: PropTypes.string,\n  mode: PropTypes.oneOf(['alert', 'information', 'cookie']),\n  header: PropTypes.string,\n  firstButton: PropTypes.shape({\n    label: PropTypes.string,\n    handleOnclick: PropTypes.func,\n    'aria-label': PropTypes.string,\n    largeButton: PropTypes.bool,\n    type: PropTypes.oneOf(['dangerous', 'primary', 'secondary', 'tertiary']),\n    customStyle: Cta.propTypes.customStyle\n  }),\n  secondButton: PropTypes.shape({\n    label: PropTypes.string,\n    handleOnclick: PropTypes.func,\n    type: PropTypes.oneOf(['dangerous', 'primary', 'secondary']),\n    'aria-label': PropTypes.string,\n    largeButton: PropTypes.bool,\n    customStyle: Cta.propTypes.customStyle\n  }),\n  thirdButton: PropTypes.shape({\n    label: PropTypes.string,\n    handleOnclick: PropTypes.func,\n    type: PropTypes.oneOf(['dangerous', 'primary', 'secondary']),\n    'aria-label': PropTypes.string,\n    largeButton: PropTypes.bool,\n    customStyle: Cta.propTypes.customStyle\n  }),\n  onClose: PropTypes.func,\n  icon: PropTypes.string,\n  backgroundImageUrl: PropTypes.string,\n  descriptionText: PropTypes.string,\n  cookieTitle: PropTypes.string,\n  descriptionBtnTxt: PropTypes.string,\n  listBtnSwicth: PropTypes.arrayOf(PropTypes.shape(InputSwitch.propTypes))\n};\n\nexport type QuitPopinButton = {\n  'aria-label'?: string;\n  label: string;\n  type: string;\n  customStyle?: {\n    backgroundColor?: string;\n    color?: string;\n  };\n  handleOnclick: () => void;\n};\n\nexport type CMPopinProps = {\n  content: string;\n  icon: string;\n  mode: string;\n  descriptionText: string;\n  firstButton?: QuitPopinButton;\n  secondButton?: QuitPopinButton;\n};\n\nexport default propTypes;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;;;AAEA,MAAMA,SAAS,GAAG;EAChBC,OAAO,EAAEC,kBAAA,CAAUC,MADH;EAEhBC,IAAI,EAAEF,kBAAA,CAAUG,KAAV,CAAgB,CAAC,OAAD,EAAU,aAAV,EAAyB,QAAzB,CAAhB,CAFU;EAGhBC,MAAM,EAAEJ,kBAAA,CAAUC,MAHF;EAIhBI,WAAW,EAAEL,kBAAA,CAAUM,KAAV,CAAgB;IAC3BC,KAAK,EAAEP,kBAAA,CAAUC,MADU;IAE3BO,aAAa,EAAER,kBAAA,CAAUS,IAFE;IAG3B,cAAcT,kBAAA,CAAUC,MAHG;IAI3BS,WAAW,EAAEV,kBAAA,CAAUW,IAJI;IAK3BC,IAAI,EAAEZ,kBAAA,CAAUG,KAAV,CAAgB,CAAC,WAAD,EAAc,SAAd,EAAyB,WAAzB,EAAsC,UAAtC,CAAhB,CALqB;IAM3BU,WAAW,EAAEC,mBAAA,CAAIhB,SAAJ,CAAce;EANA,CAAhB,CAJG;EAYhBE,YAAY,EAAEf,kBAAA,CAAUM,KAAV,CAAgB;IAC5BC,KAAK,EAAEP,kBAAA,CAAUC,MADW;IAE5BO,aAAa,EAAER,kBAAA,CAAUS,IAFG;IAG5BG,IAAI,EAAEZ,kBAAA,CAAUG,KAAV,CAAgB,CAAC,WAAD,EAAc,SAAd,EAAyB,WAAzB,CAAhB,CAHsB;IAI5B,cAAcH,kBAAA,CAAUC,MAJI;IAK5BS,WAAW,EAAEV,kBAAA,CAAUW,IALK;IAM5BE,WAAW,EAAEC,mBAAA,CAAIhB,SAAJ,CAAce;EANC,CAAhB,CAZE;EAoBhBG,WAAW,EAAEhB,kBAAA,CAAUM,KAAV,CAAgB;IAC3BC,KAAK,EAAEP,kBAAA,CAAUC,MADU;IAE3BO,aAAa,EAAER,kBAAA,CAAUS,IAFE;IAG3BG,IAAI,EAAEZ,kBAAA,CAAUG,KAAV,CAAgB,CAAC,WAAD,EAAc,SAAd,EAAyB,WAAzB,CAAhB,CAHqB;IAI3B,cAAcH,kBAAA,CAAUC,MAJG;IAK3BS,WAAW,EAAEV,kBAAA,CAAUW,IALI;IAM3BE,WAAW,EAAEC,mBAAA,CAAIhB,SAAJ,CAAce;EANA,CAAhB,CApBG;EA4BhBI,OAAO,EAAEjB,kBAAA,CAAUS,IA5BH;EA6BhBS,IAAI,EAAElB,kBAAA,CAAUC,MA7BA;EA8BhBkB,kBAAkB,EAAEnB,kBAAA,CAAUC,MA9Bd;EA+BhBmB,eAAe,EAAEpB,kBAAA,CAAUC,MA/BX;EAgChBoB,WAAW,EAAErB,kBAAA,CAAUC,MAhCP;EAiChBqB,iBAAiB,EAAEtB,kBAAA,CAAUC,MAjCb;EAkChBsB,aAAa,EAAEvB,kBAAA,CAAUwB,OAAV,CAAkBxB,kBAAA,CAAUM,KAAV,CAAgBmB,oBAAA,CAAY3B,SAA5B,CAAlB;AAlCC,CAAlB;eAyDeA,S"}
+{"version":3,"file":"types.js","names":["propTypes","content","PropTypes","string","mode","oneOf","header","shape","title","Title","headerIcon","backgroundImage","firstButton","label","handleOnclick","func","largeButton","bool","type","customStyle","Cta","secondButton","thirdButton","onClose","icon","backgroundImageUrl","descriptionText","cookieTitle","descriptionBtnTxt","listBtnSwicth","arrayOf","InputSwitch","items","list","CardsGrid"],"sources":["../../../src/molecule/cm-popin/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport Cta from '../../atom/button-link';\nimport InputSwitch from '../../atom/input-switch';\nimport Title from '../../atom/title';\nimport {TitleProps} from '../../atom/title/types';\nimport CardsGrid from '../../organism/cards-grid';\n\nconst propTypes = {\n  content: PropTypes.string,\n  mode: PropTypes.oneOf(['alert', 'information', 'cookie', 'items']),\n  header: PropTypes.shape({\n    title: PropTypes.shape(Title.propTypes),\n    headerIcon: PropTypes.string,\n    backgroundImage: PropTypes.string\n  }),\n  firstButton: PropTypes.shape({\n    label: PropTypes.string,\n    handleOnclick: PropTypes.func,\n    'aria-label': PropTypes.string,\n    largeButton: PropTypes.bool,\n    type: PropTypes.oneOf(['dangerous', 'primary', 'secondary', 'tertiary']),\n    customStyle: Cta.propTypes.customStyle\n  }),\n  secondButton: PropTypes.shape({\n    label: PropTypes.string,\n    handleOnclick: PropTypes.func,\n    type: PropTypes.oneOf(['dangerous', 'primary', 'secondary']),\n    'aria-label': PropTypes.string,\n    largeButton: PropTypes.bool,\n    customStyle: Cta.propTypes.customStyle\n  }),\n  thirdButton: PropTypes.shape({\n    label: PropTypes.string,\n    handleOnclick: PropTypes.func,\n    type: PropTypes.oneOf(['dangerous', 'primary', 'secondary']),\n    'aria-label': PropTypes.string,\n    largeButton: PropTypes.bool,\n    customStyle: Cta.propTypes.customStyle\n  }),\n  onClose: PropTypes.func,\n  icon: PropTypes.string,\n  backgroundImageUrl: PropTypes.string,\n  descriptionText: PropTypes.string,\n  cookieTitle: PropTypes.string,\n  descriptionBtnTxt: PropTypes.string,\n  listBtnSwicth: PropTypes.arrayOf(PropTypes.shape(InputSwitch.propTypes)),\n  items: PropTypes.shape({\n    type: PropTypes.string,\n    list: PropTypes.shape(CardsGrid.propTypes)\n  })\n};\n\ntype PopinHeaderProps = {\n  title: TitleProps;\n  backgroundImage: string;\n  headerIcon: string;\n};\n\nexport type QuitPopinButton = {\n  'aria-label'?: string;\n  label: string;\n  type: string;\n  customStyle?: {\n    backgroundColor?: string;\n    color?: string;\n  };\n  handleOnclick: () => void;\n};\n\nexport type CMPopinProps = {\n  content: string;\n  icon: string;\n  mode: string;\n  popinHeader?: PopinHeaderProps;\n  descriptionText: string;\n  firstButton?: QuitPopinButton;\n  secondButton?: QuitPopinButton;\n  items?: {\n    type: string;\n    list: PropTypes.InferProps<typeof CardsGrid.propTypes>;\n  };\n};\n\nexport default propTypes;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;;;AAEA,MAAMA,SAAS,GAAG;EAChBC,OAAO,EAAEC,kBAAA,CAAUC,MADH;EAEhBC,IAAI,EAAEF,kBAAA,CAAUG,KAAV,CAAgB,CAAC,OAAD,EAAU,aAAV,EAAyB,QAAzB,EAAmC,OAAnC,CAAhB,CAFU;EAGhBC,MAAM,EAAEJ,kBAAA,CAAUK,KAAV,CAAgB;IACtBC,KAAK,EAAEN,kBAAA,CAAUK,KAAV,CAAgBE,cAAA,CAAMT,SAAtB,CADe;IAEtBU,UAAU,EAAER,kBAAA,CAAUC,MAFA;IAGtBQ,eAAe,EAAET,kBAAA,CAAUC;EAHL,CAAhB,CAHQ;EAQhBS,WAAW,EAAEV,kBAAA,CAAUK,KAAV,CAAgB;IAC3BM,KAAK,EAAEX,kBAAA,CAAUC,MADU;IAE3BW,aAAa,EAAEZ,kBAAA,CAAUa,IAFE;IAG3B,cAAcb,kBAAA,CAAUC,MAHG;IAI3Ba,WAAW,EAAEd,kBAAA,CAAUe,IAJI;IAK3BC,IAAI,EAAEhB,kBAAA,CAAUG,KAAV,CAAgB,CAAC,WAAD,EAAc,SAAd,EAAyB,WAAzB,EAAsC,UAAtC,CAAhB,CALqB;IAM3Bc,WAAW,EAAEC,mBAAA,CAAIpB,SAAJ,CAAcmB;EANA,CAAhB,CARG;EAgBhBE,YAAY,EAAEnB,kBAAA,CAAUK,KAAV,CAAgB;IAC5BM,KAAK,EAAEX,kBAAA,CAAUC,MADW;IAE5BW,aAAa,EAAEZ,kBAAA,CAAUa,IAFG;IAG5BG,IAAI,EAAEhB,kBAAA,CAAUG,KAAV,CAAgB,CAAC,WAAD,EAAc,SAAd,EAAyB,WAAzB,CAAhB,CAHsB;IAI5B,cAAcH,kBAAA,CAAUC,MAJI;IAK5Ba,WAAW,EAAEd,kBAAA,CAAUe,IALK;IAM5BE,WAAW,EAAEC,mBAAA,CAAIpB,SAAJ,CAAcmB;EANC,CAAhB,CAhBE;EAwBhBG,WAAW,EAAEpB,kBAAA,CAAUK,KAAV,CAAgB;IAC3BM,KAAK,EAAEX,kBAAA,CAAUC,MADU;IAE3BW,aAAa,EAAEZ,kBAAA,CAAUa,IAFE;IAG3BG,IAAI,EAAEhB,kBAAA,CAAUG,KAAV,CAAgB,CAAC,WAAD,EAAc,SAAd,EAAyB,WAAzB,CAAhB,CAHqB;IAI3B,cAAcH,kBAAA,CAAUC,MAJG;IAK3Ba,WAAW,EAAEd,kBAAA,CAAUe,IALI;IAM3BE,WAAW,EAAEC,mBAAA,CAAIpB,SAAJ,CAAcmB;EANA,CAAhB,CAxBG;EAgChBI,OAAO,EAAErB,kBAAA,CAAUa,IAhCH;EAiChBS,IAAI,EAAEtB,kBAAA,CAAUC,MAjCA;EAkChBsB,kBAAkB,EAAEvB,kBAAA,CAAUC,MAlCd;EAmChBuB,eAAe,EAAExB,kBAAA,CAAUC,MAnCX;EAoChBwB,WAAW,EAAEzB,kBAAA,CAAUC,MApCP;EAqChByB,iBAAiB,EAAE1B,kBAAA,CAAUC,MArCb;EAsChB0B,aAAa,EAAE3B,kBAAA,CAAU4B,OAAV,CAAkB5B,kBAAA,CAAUK,KAAV,CAAgBwB,oBAAA,CAAY/B,SAA5B,CAAlB,CAtCC;EAuChBgC,KAAK,EAAE9B,kBAAA,CAAUK,KAAV,CAAgB;IACrBW,IAAI,EAAEhB,kBAAA,CAAUC,MADK;IAErB8B,IAAI,EAAE/B,kBAAA,CAAUK,KAAV,CAAgB2B,kBAAA,CAAUlC,SAA1B;EAFe,CAAhB;AAvCS,CAAlB;eA4EeA,S"}

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

@@ -1,17 +1,73 @@
 export default CardsList;
 declare class CardsList extends React.PureComponent<any, any, any> {
+    /**
+     * IMPORTANT: update prop-types.ts too, 1st a migration of tests
+     * is intended, then, a TS + functional refactor is planned.
+     */
     static propTypes: {
         contentType: PropTypes.Requireable<string>;
         dataName: PropTypes.Requireable<string>;
         title: PropTypes.Requireable<string>;
         showMore: PropTypes.Requireable<string>;
-        cards: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
+        cards: PropTypes.Requireable<(PropTypes.InferProps<{
+            badge: PropTypes.Requireable<string>;
+            image: PropTypes.Requireable<string>;
+            disabled: PropTypes.Requireable<boolean>;
+            adaptiv: PropTypes.Requireable<boolean>;
+            type: PropTypes.Requireable<string>;
+            title: PropTypes.Requireable<string>;
+            author: PropTypes.Requireable<string>;
+            certifiedAuthor: PropTypes.Requireable<boolean>;
+            customer: PropTypes.Requireable<PropTypes.InferProps<{
+                theme: PropTypes.Requireable<string>;
+                type: PropTypes.Requireable<string>;
+                name: PropTypes.Requireable<string>;
+                coorpOriginal: PropTypes.Validator<boolean>;
+                disabled: PropTypes.Requireable<boolean>;
+                'aria-label': PropTypes.Requireable<string>;
+            }>>;
+            progress: PropTypes.Requireable<number>;
+            favorite: PropTypes.Requireable<boolean>;
+            addFavoriteToolTip: PropTypes.Requireable<string>;
+            removeFavoriteToolTip: PropTypes.Requireable<string>;
+            onClick: PropTypes.Requireable<(...args: any[]) => any>;
+            onFavoriteClick: PropTypes.Requireable<(...args: any[]) => any>;
+            isSelected: PropTypes.Requireable<boolean>;
+            notification: PropTypes.Requireable<PropTypes.InferProps<{
+                message: PropTypes.Validator<string>;
+                icon: PropTypes.Validator<string>;
+            }>>;
+            badgeCategory: PropTypes.Requireable<string>;
+            badgeLabel: PropTypes.Requireable<string>;
+            theme: PropTypes.Requireable<string>;
+            disabledContent: PropTypes.Requireable<string>;
+            'aria-label': PropTypes.Requireable<string>;
+            'background-aria-label': PropTypes.Requireable<string>;
+            'favorite-aria-label': PropTypes.Requireable<PropTypes.InferProps<{
+                favorite: PropTypes.Requireable<string>;
+                addToFavorite: PropTypes.Requireable<string>;
+                removeFromFavorite: PropTypes.Requireable<string>;
+            }>>;
+            'selectable-aria-label': PropTypes.Requireable<PropTypes.InferProps<{
+                select: PropTypes.Requireable<string>;
+                unSelect: PropTypes.Requireable<string>;
+            }>>;
+            'customer-aria-label': PropTypes.Requireable<string>;
+            'badge-aria-label': PropTypes.Requireable<string>;
+            'disabled-aria-label': PropTypes.Requireable<string>;
+            'card-content-aria-label': PropTypes.Requireable<PropTypes.InferProps<{
+                author: PropTypes.Requireable<string>;
+                progression: PropTypes.Requireable<string>;
+                adaptive: PropTypes.Requireable<string>;
+            }>>;
+        }> | null | undefined)[]>;
         onScroll: PropTypes.Requireable<(...args: any[]) => any>;
         onShowMore: PropTypes.Requireable<(...args: any[]) => any>;
         'arrows-aria-label': PropTypes.Requireable<PropTypes.InferProps<{
             showMoreOnLeftAriaLabel: PropTypes.Requireable<string>;
             showMoreOnRightAriaLabel: PropTypes.Requireable<string>;
         }>>;
+        testingSizes: PropTypes.Requireable<any>;
     };
     static contextTypes: {
         skin: PropTypes.Requireable<PropTypes.InferProps<{

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/dashboard/cards-list/index.js"],"names":[],"mappings":";AAuFA;IACE;;;;;;;;;;;;MAYE;IAEF;;;;;;;;;;;;;;;;;;;;;;;MAGE;IAEF,wBAuBC;IApBC;;;;;;;;MAQC;IAED,0DAAgE;IAuGlE,qBAiBC;IAED,qBAGC;IAED,sBAGC;IAED,0BASC;IAxIC,uEAA6D;IA0I/D,mCAIC;IA1DD,oCAMC;IAED,sCAIC;IA1DD,qBAGC;IAlCD,0BAMC;IAED,2BAYC;IAED,6BAOC;IAOD,wCAuCC;IAGC,kBAA2B;IA2D7B,sBAsFC;CACF"}
+{"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"}

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

@@ -37,10 +37,14 @@ var _novaIcons = require("@coorpacademy/nova-icons");
 
 var _provider = _interopRequireDefault(require("../../../atom/provider"));
 
-var _card = _interopRequireDefault(require("../../card"));
+var _card = _interopRequireWildcard(require("../../card"));
 
 var _style = _interopRequireDefault(require("./style.css"));
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -114,6 +118,10 @@ IconView.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 
 class CardsList extends _react.default.PureComponent {
+  /**
+   * IMPORTANT: update prop-types.ts too, 1st a migration of tests
+   * is intended, then, a TS + functional refactor is planned.
+   */
   constructor(props) {
     super(props);
     this.state = {
@@ -134,7 +142,22 @@ class CardsList extends _react.default.PureComponent {
     this.updatePages = this.updatePages.bind(this);
     this.setCardsWrapper = this.setCardsWrapper.bind(this);
     this.getScrollWidth = this.getScrollWidth.bind(this);
-    this.handleResize = this.handleResize.bind(this);
+    this.handleResize = this.handleResize.bind(this); // for testing purposes only - no other way to test this polluted component
+
+    if (props.testingSizes) {
+      const {
+        offsetWidth,
+        scrollLeft,
+        maxPages,
+        possiblePages,
+        possiblePositions
+      } = props.testingSizes;
+      this.state.offsetWidth = offsetWidth;
+      this.state.scrollLeft = scrollLeft;
+      this.state.maxPages = maxPages;
+      this.state.possiblePages = possiblePages;
+      this.state.possiblePositions = possiblePositions;
+    }
   }
 
   componentDidMount() {
@@ -173,6 +196,8 @@ class CardsList extends _react.default.PureComponent {
 
     this.updateState.cancel();
   }
+  /* istanbul ignore next */
+
 
   handleResize() {
     const {
@@ -180,6 +205,8 @@ class CardsList extends _react.default.PureComponent {
     } = this.props;
     this.updatePaginationState(cards);
   }
+  /* istanbul ignore next */
+
 
   updatePaginationState(cards) {
     const {
@@ -214,6 +241,8 @@ class CardsList extends _react.default.PureComponent {
       offsetWidth: this.cardsWrapper?.offsetWidth
     });
   }
+  /* istanbul ignore next */
+
 
   getScrollWidth(index) {
     const {
@@ -222,6 +251,8 @@ class CardsList extends _react.default.PureComponent {
     const card = cards[index];
     return computeWidth(card);
   }
+  /* istanbul ignore next */
+
 
   handleScroll() {
     const scrollLeft = this.cardsWrapper?.scrollLeft;
@@ -357,7 +388,11 @@ class CardsList extends _react.default.PureComponent {
     }, showMoreView, leftArrowView, rightArrowView) : null;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.wrapper,
-      "data-name": "cardsList"
+      "data-name": "cardsList",
+      "data-max-pages": `${maxPages}` // eslint-disable-next-line react/destructuring-assignment
+      ,
+      "data-actual-page": `${this.state.actualPage}`,
+      "data-scroll-left": this.cardsWrapper?.scrollLeft
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.list
     }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
@@ -365,6 +400,7 @@ class CardsList extends _react.default.PureComponent {
       className: _style.default.header
     }, titleView, switchPagesView), /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.cards,
+      "data-testid": "cards-view-wrapper",
       ref: this.setCardsWrapper
     }, cardsView))));
   }
@@ -380,13 +416,15 @@ CardsList.propTypes = process.env.NODE_ENV !== "production" ? {
   dataName: _propTypes.default.string,
   title: _propTypes.default.string,
   showMore: _propTypes.default.string,
-  cards: _propTypes.default.arrayOf(_propTypes.default.shape(_card.default.protoTypes)),
+  cards: _propTypes.default.arrayOf(_propTypes.default.shape(_card.cardPropTypes)),
   onScroll: _propTypes.default.func,
   onShowMore: _propTypes.default.func,
   'arrows-aria-label': _propTypes.default.shape({
     showMoreOnLeftAriaLabel: _propTypes.default.string,
     showMoreOnRightAriaLabel: _propTypes.default.string
-  })
+  }),
+  // eslint-disable-next-line react/forbid-prop-types
+  testingSizes: _propTypes.default.any
 } : {};
 var _default = CardsList;
 exports.default = _default;