@coorpacademy/components 11.35.1 → 11.35.2-alpha.10

package/lib/atom/title/index.d.ts

@@ -8,7 +8,7 @@ declare namespace Title {
         'data-name': PropTypes.Requireable<string>;
         titleSize: PropTypes.Requireable<string>;
         subtitleSize: PropTypes.Requireable<string>;
-        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+        icon: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
         tag: PropTypes.Requireable<PropTypes.InferProps<{
             label: PropTypes.Requireable<string>;
             type: PropTypes.Requireable<string>;
@@ -16,7 +16,17 @@ declare namespace Title {
             customStyle: PropTypes.Requireable<{
                 [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
             }>;
-            icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+            icon: PropTypes.Requireable<PropTypes.InferProps<{
+                position: PropTypes.Requireable<string>;
+                iconName?: React.Validator<string> | undefined;
+                iconColor?: React.Validator<string | null | undefined> | undefined;
+                backgroundColor?: React.Validator<string | null | undefined> | undefined;
+                gradientBackground?: React.Validator<boolean | null | undefined> | undefined;
+                borderRadius?: React.Validator<string | null | undefined> | undefined;
+                preset?: React.Validator<string | null | undefined> | undefined;
+                size?: React.Validator<import("../icon").IconSize | null | undefined> | undefined;
+                customStyle?: React.Validator<React.CSSProperties | null | undefined> | undefined;
+            }>>;
         }>>;
         button: PropTypes.Requireable<PropTypes.InferProps<{
             type: PropTypes.Requireable<string>;
@@ -59,4 +69,5 @@ declare namespace Title {
     };
 }
 import PropTypes from "prop-types";
+import React from "react";
 //# sourceMappingURL=index.d.ts.map

package/lib/molecule/banner/style.css

@@ -116,6 +116,7 @@
 }
 
 .buttonsBar {
+    margin-right: 4px;
     width: 2px;
     align-self: stretch;
     flex-grow: 0;

package/lib/molecule/base-modal/style.css

@@ -105,7 +105,6 @@
 
 .button {
   border-radius: 12px;
-  padding: 8px;
   font-weight: 600;
 }
 

package/lib/molecule/bulk-progress-bar/index.js

@@ -12,7 +12,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const {
   negative: cm_negative_100,
   cm_primary_blue,
-  positive: cm_positive_100
+  cm_positive_500
 } = _colors.COLORS;
 const STATUS = {
   inProgress: 'inProgress',
@@ -36,7 +36,7 @@ const resolveProgressBarColor = status => {
     case STATUS.inProgress:
       return cm_primary_blue;
     default:
-      return cm_positive_100;
+      return cm_positive_500;
   }
 };
 const BulkProgressBar = props => {

package/lib/molecule/bulk-progress-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_progressBar","_statusItem","_colors","_style","_types","e","__esModule","default","negative","cm_negative_100","cm_primary_blue","positive","cm_positive_100","COLORS","STATUS","inProgress","fail","renderStatusIcon","status","progress","createElement","role","className","style","progressText","statusItemWrapper","icon","resolveProgressBarColor","BulkProgressBar","props","dataName","container","progressBar","value","max","steps","backgroundColor","borderRadius","displayInfo","propTypes","process","env","NODE_ENV","_default","exports"],"sources":["../../../src/molecule/bulk-progress-bar/index.tsx"],"sourcesContent":["import React from 'react';\nimport ProgressBar from '../progress-bar';\nimport StatusItem from '../../atom/status-item';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\nimport {Props, propTypes, Status} from './types';\n\nconst {negative: cm_negative_100, cm_primary_blue, positive: cm_positive_100} = COLORS;\n\nconst STATUS = {\n  inProgress: 'inProgress',\n  fail: 'fail'\n};\n\nconst renderStatusIcon = (status: Status, progress: number) => {\n  if (status === STATUS.inProgress)\n    return <div role=\"status\" className={style.progressText}>{`${progress} %`}</div>;\n  return (\n    <div className={style.statusItemWrapper}>\n      <StatusItem icon={status === STATUS.fail ? 'invalid' : 'valid'} />\n    </div>\n  );\n};\n\nconst resolveProgressBarColor = (status: Status) => {\n  switch (status) {\n    case STATUS.fail:\n      return cm_negative_100;\n    case STATUS.inProgress:\n      return cm_primary_blue;\n    default:\n      return cm_positive_100;\n  }\n};\n\nconst BulkProgressBar = (props: Props) => {\n  const {'data-name': dataName, status, progress} = props;\n\n  return (\n    <div className={style.container} data-name={dataName}>\n      <ProgressBar\n        className={style.progressBar}\n        value={progress}\n        max={100}\n        steps={0}\n        style={{backgroundColor: resolveProgressBarColor(status), borderRadius: '10px'}}\n        displayInfo={false}\n      />\n      {renderStatusIcon(status, progress)}\n    </div>\n  );\n};\n\nBulkProgressBar.propTypes = propTypes;\n\nexport default BulkProgressBar;\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,WAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AAAiD,SAAAD,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEjD,MAAM;EAACG,QAAQ,EAAEC,eAAe;EAAEC,eAAe;EAAEC,QAAQ,EAAEC;AAAe,CAAC,GAAGC,cAAM;AAEtF,MAAMC,MAAM,GAAG;EACbC,UAAU,EAAE,YAAY;EACxBC,IAAI,EAAE;AACR,CAAC;AAED,MAAMC,gBAAgB,GAAGA,CAACC,MAAc,EAAEC,QAAgB,KAAK;EAC7D,IAAID,MAAM,KAAKJ,MAAM,CAACC,UAAU,EAC9B,oBAAOlB,MAAA,CAAAU,OAAA,CAAAa,aAAA;IAAKC,IAAI,EAAC,QAAQ;IAACC,SAAS,EAAEC,cAAK,CAACC;EAAa,GAAE,GAAGL,QAAQ,IAAU,CAAC;EAClF,oBACEtB,MAAA,CAAAU,OAAA,CAAAa,aAAA;IAAKE,SAAS,EAAEC,cAAK,CAACE;EAAkB,gBACtC5B,MAAA,CAAAU,OAAA,CAAAa,aAAA,CAACnB,WAAA,CAAAM,OAAU;IAACmB,IAAI,EAAER,MAAM,KAAKJ,MAAM,CAACE,IAAI,GAAG,SAAS,GAAG;EAAQ,CAAE,CAC9D,CAAC;AAEV,CAAC;AAED,MAAMW,uBAAuB,GAAIT,MAAc,IAAK;EAClD,QAAQA,MAAM;IACZ,KAAKJ,MAAM,CAACE,IAAI;MACd,OAAOP,eAAe;IACxB,KAAKK,MAAM,CAACC,UAAU;MACpB,OAAOL,eAAe;IACxB;MACE,OAAOE,eAAe;EAC1B;AACF,CAAC;AAED,MAAMgB,eAAe,GAAIC,KAAY,IAAK;EACxC,MAAM;IAAC,WAAW,EAAEC,QAAQ;IAAEZ,MAAM;IAAEC;EAAQ,CAAC,GAAGU,KAAK;EAEvD,oBACEhC,MAAA,CAAAU,OAAA,CAAAa,aAAA;IAAKE,SAAS,EAAEC,cAAK,CAACQ,SAAU;IAAC,aAAWD;EAAS,gBACnDjC,MAAA,CAAAU,OAAA,CAAAa,aAAA,CAACpB,YAAA,CAAAO,OAAW;IACVe,SAAS,EAAEC,cAAK,CAACS,WAAY;IAC7BC,KAAK,EAAEd,QAAS;IAChBe,GAAG,EAAE,GAAI;IACTC,KAAK,EAAE,CAAE;IACTZ,KAAK,EAAE;MAACa,eAAe,EAAET,uBAAuB,CAACT,MAAM,CAAC;MAAEmB,YAAY,EAAE;IAAM,CAAE;IAChFC,WAAW,EAAE;EAAM,CACpB,CAAC,EACDrB,gBAAgB,CAACC,MAAM,EAAEC,QAAQ,CAC/B,CAAC;AAEV,CAAC;AAEDS,eAAe,CAACW,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAGH,gBAAS;AAAC,IAAAI,QAAA,GAAAC,OAAA,CAAArC,OAAA,GAEvBqB,eAAe","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_progressBar","_statusItem","_colors","_style","_types","e","__esModule","default","negative","cm_negative_100","cm_primary_blue","cm_positive_500","COLORS","STATUS","inProgress","fail","renderStatusIcon","status","progress","createElement","role","className","style","progressText","statusItemWrapper","icon","resolveProgressBarColor","BulkProgressBar","props","dataName","container","progressBar","value","max","steps","backgroundColor","borderRadius","displayInfo","propTypes","process","env","NODE_ENV","_default","exports"],"sources":["../../../src/molecule/bulk-progress-bar/index.tsx"],"sourcesContent":["import React from 'react';\nimport ProgressBar from '../progress-bar';\nimport StatusItem from '../../atom/status-item';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\nimport {Props, propTypes, Status} from './types';\n\nconst {negative: cm_negative_100, cm_primary_blue, cm_positive_500} = COLORS;\n\nconst STATUS = {\n  inProgress: 'inProgress',\n  fail: 'fail'\n};\n\nconst renderStatusIcon = (status: Status, progress: number) => {\n  if (status === STATUS.inProgress)\n    return <div role=\"status\" className={style.progressText}>{`${progress} %`}</div>;\n  return (\n    <div className={style.statusItemWrapper}>\n      <StatusItem icon={status === STATUS.fail ? 'invalid' : 'valid'} />\n    </div>\n  );\n};\n\nconst resolveProgressBarColor = (status: Status) => {\n  switch (status) {\n    case STATUS.fail:\n      return cm_negative_100;\n    case STATUS.inProgress:\n      return cm_primary_blue;\n    default:\n      return cm_positive_500;\n  }\n};\n\nconst BulkProgressBar = (props: Props) => {\n  const {'data-name': dataName, status, progress} = props;\n\n  return (\n    <div className={style.container} data-name={dataName}>\n      <ProgressBar\n        className={style.progressBar}\n        value={progress}\n        max={100}\n        steps={0}\n        style={{backgroundColor: resolveProgressBarColor(status), borderRadius: '10px'}}\n        displayInfo={false}\n      />\n      {renderStatusIcon(status, progress)}\n    </div>\n  );\n};\n\nBulkProgressBar.propTypes = propTypes;\n\nexport default BulkProgressBar;\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,WAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AAAiD,SAAAD,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEjD,MAAM;EAACG,QAAQ,EAAEC,eAAe;EAAEC,eAAe;EAAEC;AAAe,CAAC,GAAGC,cAAM;AAE5E,MAAMC,MAAM,GAAG;EACbC,UAAU,EAAE,YAAY;EACxBC,IAAI,EAAE;AACR,CAAC;AAED,MAAMC,gBAAgB,GAAGA,CAACC,MAAc,EAAEC,QAAgB,KAAK;EAC7D,IAAID,MAAM,KAAKJ,MAAM,CAACC,UAAU,EAC9B,oBAAOjB,MAAA,CAAAU,OAAA,CAAAY,aAAA;IAAKC,IAAI,EAAC,QAAQ;IAACC,SAAS,EAAEC,cAAK,CAACC;EAAa,GAAE,GAAGL,QAAQ,IAAU,CAAC;EAClF,oBACErB,MAAA,CAAAU,OAAA,CAAAY,aAAA;IAAKE,SAAS,EAAEC,cAAK,CAACE;EAAkB,gBACtC3B,MAAA,CAAAU,OAAA,CAAAY,aAAA,CAAClB,WAAA,CAAAM,OAAU;IAACkB,IAAI,EAAER,MAAM,KAAKJ,MAAM,CAACE,IAAI,GAAG,SAAS,GAAG;EAAQ,CAAE,CAC9D,CAAC;AAEV,CAAC;AAED,MAAMW,uBAAuB,GAAIT,MAAc,IAAK;EAClD,QAAQA,MAAM;IACZ,KAAKJ,MAAM,CAACE,IAAI;MACd,OAAON,eAAe;IACxB,KAAKI,MAAM,CAACC,UAAU;MACpB,OAAOJ,eAAe;IACxB;MACE,OAAOC,eAAe;EAC1B;AACF,CAAC;AAED,MAAMgB,eAAe,GAAIC,KAAY,IAAK;EACxC,MAAM;IAAC,WAAW,EAAEC,QAAQ;IAAEZ,MAAM;IAAEC;EAAQ,CAAC,GAAGU,KAAK;EAEvD,oBACE/B,MAAA,CAAAU,OAAA,CAAAY,aAAA;IAAKE,SAAS,EAAEC,cAAK,CAACQ,SAAU;IAAC,aAAWD;EAAS,gBACnDhC,MAAA,CAAAU,OAAA,CAAAY,aAAA,CAACnB,YAAA,CAAAO,OAAW;IACVc,SAAS,EAAEC,cAAK,CAACS,WAAY;IAC7BC,KAAK,EAAEd,QAAS;IAChBe,GAAG,EAAE,GAAI;IACTC,KAAK,EAAE,CAAE;IACTZ,KAAK,EAAE;MAACa,eAAe,EAAET,uBAAuB,CAACT,MAAM,CAAC;MAAEmB,YAAY,EAAE;IAAM,CAAE;IAChFC,WAAW,EAAE;EAAM,CACpB,CAAC,EACDrB,gBAAgB,CAACC,MAAM,EAAEC,QAAQ,CAC/B,CAAC;AAEV,CAAC;AAEDS,eAAe,CAACW,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAGH,gBAAS;AAAC,IAAAI,QAAA,GAAAC,OAAA,CAAApC,OAAA,GAEvBoB,eAAe","ignoreList":[]}

package/lib/molecule/certification-card/index.js

@@ -77,7 +77,7 @@ const CertificationCard = (props, context) => {
   }, conditionDescriptionProgress)), /*#__PURE__*/_react.default.createElement(_progressBar.default, {
     className: _style.default.customProgressBar,
     style: {
-      backgroundColor: _colors.COLORS.positive
+      backgroundColor: _colors.COLORS.cm_positive_500
     },
     displayInfo: false,
     value: progress,

package/lib/molecule/certification-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_colors","_provider","_tag","_progressBar","_style","e","__esModule","default","CertificationCard","props","context","label","locales","conditionDescriptionProgress","tag","goal","title","progress","imgUrl","onClick","translate","isInprogress","progressLabel","progressTagType","progressIconProps","position","iconName","iconColor","backgroundColor","size","faSize","wrapperSize","customStyle","padding","createElement","className","style","container","type","top","right","icon","imageSection","imageContainer","src","detailWrapper","titleWrapper","moduleCount","customProgressBar","COLORS","positive","displayInfo","value","max","contextTypes","Provider","childContextTypes","propTypes","process","env","NODE_ENV","PropTypes","string","shape","condition","nbDone","number","func","_default","exports"],"sources":["../../../src/molecule/certification-card/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {COLORS} from '../../variables/colors';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport ProgressBar from '../progress-bar';\nimport style from './style.css';\n\nconst CertificationCard = (props, context) => {\n  const {\n    label,\n    locales: {conditionDescriptionProgress, tag},\n    goal: {title},\n    progress,\n    imgUrl,\n    onClick\n  } = props;\n  const {translate} = context;\n  const isInprogress = progress < 100;\n  const progressLabel = isInprogress ? translate('in_progress') : translate('completed');\n  const progressTagType = isInprogress ? 'progress' : 'success';\n\n  const progressIconProps = {\n    position: 'left',\n    iconName: isInprogress ? 'clock' : 'circle-check',\n    iconColor: isInprogress ? '#B87A00' : '#05944F',\n    backgroundColor: isInprogress ? '#FFEECC' : '#D6F5E5',\n    size: {\n      faSize: 10,\n      wrapperSize: 10\n    },\n    customStyle: {padding: 0}\n  };\n\n  return (\n    <div className={style.container} data-name={`certification-card-${label}`} onClick={onClick}>\n      {progress > 0 ? (\n        <Tag\n          label={progressLabel}\n          type={progressTagType}\n          customStyle={{position: 'absolute', top: '12px', right: '12px'}}\n          icon={progressIconProps}\n        />\n      ) : null}\n      <div className={style.imageSection}>\n        <div className={style.imageContainer}>\n          <img src={imgUrl} />\n        </div>\n      </div>\n      <div className={style.detailWrapper}>\n        <div className={style.titleWrapper}>\n          <Tag label={tag} size=\"S\" />\n          <div className={style.title} data-name=\"certification-title\">\n            {title}\n          </div>\n          <div className={style.moduleCount}>{conditionDescriptionProgress}</div>\n        </div>\n        <ProgressBar\n          className={style.customProgressBar}\n          style={{backgroundColor: COLORS.positive}}\n          displayInfo={false}\n          value={progress}\n          max={100}\n        />\n      </div>\n    </div>\n  );\n};\n\nCertificationCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nCertificationCard.propTypes = {\n  label: PropTypes.string,\n  goal: PropTypes.shape({\n    title: PropTypes.string,\n    condition: PropTypes.shape({\n      nbDone: PropTypes.number\n    })\n  }),\n  progress: PropTypes.number,\n  imgUrl: PropTypes.string,\n  onClick: PropTypes.func,\n  locales: PropTypes.shape({\n    conditionDescriptionProgress: PropTypes.string,\n    tag: PropTypes.string\n  })\n};\n\nexport default CertificationCard;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_colors","_provider","_tag","_progressBar","_style","e","__esModule","default","CertificationCard","props","context","label","locales","conditionDescriptionProgress","tag","goal","title","progress","imgUrl","onClick","translate","isInprogress","progressLabel","progressTagType","progressIconProps","position","iconName","iconColor","backgroundColor","size","faSize","wrapperSize","customStyle","padding","createElement","className","style","container","type","top","right","icon","imageSection","imageContainer","src","detailWrapper","titleWrapper","moduleCount","customProgressBar","COLORS","cm_positive_500","displayInfo","value","max","contextTypes","Provider","childContextTypes","propTypes","process","env","NODE_ENV","PropTypes","string","shape","condition","nbDone","number","func","_default","exports"],"sources":["../../../src/molecule/certification-card/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {COLORS} from '../../variables/colors';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport ProgressBar from '../progress-bar';\nimport style from './style.css';\n\nconst CertificationCard = (props, context) => {\n  const {\n    label,\n    locales: {conditionDescriptionProgress, tag},\n    goal: {title},\n    progress,\n    imgUrl,\n    onClick\n  } = props;\n  const {translate} = context;\n  const isInprogress = progress < 100;\n  const progressLabel = isInprogress ? translate('in_progress') : translate('completed');\n  const progressTagType = isInprogress ? 'progress' : 'success';\n\n  const progressIconProps = {\n    position: 'left',\n    iconName: isInprogress ? 'clock' : 'circle-check',\n    iconColor: isInprogress ? '#B87A00' : '#05944F',\n    backgroundColor: isInprogress ? '#FFEECC' : '#D6F5E5',\n    size: {\n      faSize: 10,\n      wrapperSize: 10\n    },\n    customStyle: {padding: 0}\n  };\n\n  return (\n    <div className={style.container} data-name={`certification-card-${label}`} onClick={onClick}>\n      {progress > 0 ? (\n        <Tag\n          label={progressLabel}\n          type={progressTagType}\n          customStyle={{position: 'absolute', top: '12px', right: '12px'}}\n          icon={progressIconProps}\n        />\n      ) : null}\n      <div className={style.imageSection}>\n        <div className={style.imageContainer}>\n          <img src={imgUrl} />\n        </div>\n      </div>\n      <div className={style.detailWrapper}>\n        <div className={style.titleWrapper}>\n          <Tag label={tag} size=\"S\" />\n          <div className={style.title} data-name=\"certification-title\">\n            {title}\n          </div>\n          <div className={style.moduleCount}>{conditionDescriptionProgress}</div>\n        </div>\n        <ProgressBar\n          className={style.customProgressBar}\n          style={{backgroundColor: COLORS.cm_positive_500}}\n          displayInfo={false}\n          value={progress}\n          max={100}\n        />\n      </div>\n    </div>\n  );\n};\n\nCertificationCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nCertificationCard.propTypes = {\n  label: PropTypes.string,\n  goal: PropTypes.shape({\n    title: PropTypes.string,\n    condition: PropTypes.shape({\n      nbDone: PropTypes.number\n    })\n  }),\n  progress: PropTypes.number,\n  imgUrl: PropTypes.string,\n  onClick: PropTypes.func,\n  locales: PropTypes.shape({\n    conditionDescriptionProgress: PropTypes.string,\n    tag: PropTypes.string\n  })\n};\n\nexport default CertificationCard;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,9 +1,10 @@
+/// <reference types="react" />
 import PropTypes from 'prop-types';
 import Link from '../../atom/link';
 import { TitleProps } from '../../atom/title/types';
 import CardsGrid from '../../organism/cards-grid';
 import ListItems from '../../organism/list-items';
-import { iconPropTypes } from '../../atom/icon';
+import { propTypes as iconPropTypes } from '../../atom/icon';
 declare const propTypes: {
     content: PropTypes.Requireable<string>;
     mode: PropTypes.Requireable<string>;
@@ -15,7 +16,7 @@ declare const propTypes: {
             'data-name': PropTypes.Requireable<string>;
             titleSize: PropTypes.Requireable<string>;
             subtitleSize: PropTypes.Requireable<string>;
-            icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+            icon: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
             tag: PropTypes.Requireable<PropTypes.InferProps<{
                 label: PropTypes.Requireable<string>;
                 type: PropTypes.Requireable<string>;
@@ -23,7 +24,17 @@ declare const propTypes: {
                 customStyle: PropTypes.Requireable<{
                     [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                 }>;
-                icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                icon: PropTypes.Requireable<PropTypes.InferProps<{
+                    position: PropTypes.Requireable<string>;
+                    iconName?: import("react").Validator<string> | undefined;
+                    iconColor?: import("react").Validator<string | null | undefined> | undefined;
+                    backgroundColor?: import("react").Validator<string | null | undefined> | undefined;
+                    gradientBackground?: import("react").Validator<boolean | null | undefined> | undefined;
+                    borderRadius?: import("react").Validator<string | null | undefined> | undefined;
+                    preset?: import("react").Validator<string | null | undefined> | undefined;
+                    size?: import("react").Validator<import("../../atom/icon").IconSize | null | undefined> | undefined;
+                    customStyle?: import("react").Validator<import("react").CSSProperties | null | undefined> | undefined;
+                }>>;
             }>>;
             button: PropTypes.Requireable<PropTypes.InferProps<{
                 type: PropTypes.Requireable<string>;
@@ -110,8 +121,8 @@ declare const propTypes: {
         borderRadius: PropTypes.Requireable<string>;
         preset: PropTypes.Requireable<string>;
         size: PropTypes.Requireable<PropTypes.InferProps<{
-            faSize: PropTypes.Requireable<number>;
-            wrapperSize: PropTypes.Requireable<number>;
+            faSize: PropTypes.Validator<number>;
+            wrapperSize: PropTypes.Validator<number>;
         }>>;
         customStyle: PropTypes.Requireable<{
             [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
@@ -549,7 +560,7 @@ declare const propTypes: {
                 'data-name': PropTypes.Requireable<string>;
                 titleSize: PropTypes.Requireable<string>;
                 subtitleSize: PropTypes.Requireable<string>;
-                icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                icon: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
                 tag: PropTypes.Requireable<PropTypes.InferProps<{
                     label: PropTypes.Requireable<string>;
                     type: PropTypes.Requireable<string>;
@@ -557,7 +568,17 @@ declare const propTypes: {
                     customStyle: PropTypes.Requireable<{
                         [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                     }>;
-                    icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                    icon: PropTypes.Requireable<PropTypes.InferProps<{
+                        position: PropTypes.Requireable<string>;
+                        iconName?: import("react").Validator<string> | undefined;
+                        iconColor?: import("react").Validator<string | null | undefined> | undefined;
+                        backgroundColor?: import("react").Validator<string | null | undefined> | undefined;
+                        gradientBackground?: import("react").Validator<boolean | null | undefined> | undefined;
+                        borderRadius?: import("react").Validator<string | null | undefined> | undefined;
+                        preset?: import("react").Validator<string | null | undefined> | undefined;
+                        size?: import("react").Validator<import("../../atom/icon").IconSize | null | undefined> | undefined;
+                        customStyle?: import("react").Validator<import("react").CSSProperties | null | undefined> | undefined;
+                    }>>;
                 }>>;
                 button: PropTypes.Requireable<PropTypes.InferProps<{
                     type: PropTypes.Requireable<string>;

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;AAKnC,OAAO,IAAI,MAAM,iBAAiB,CAAC;AACnC,OAAO,EAAC,UAAU,EAAC,MAAM,wBAAwB,CAAC;AAClD,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAClD,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAElD,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAE9C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDd,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,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;IAC1D,IAAI,EAAE,OAAO,GAAG,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAC5D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,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,SAAS,GAAG,MAAM,CAAC;QACzB,IAAI,EACA,SAAS,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,SAAS,CAAC,GAChD,SAAS,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,SAAS,CAAC,CAAC;KACtD,CAAC;IACF,IAAI,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC;CACpD,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;AAKnC,OAAO,IAAI,MAAM,iBAAiB,CAAC;AACnC,OAAO,EAAC,UAAU,EAAC,MAAM,wBAAwB,CAAC;AAClD,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAClD,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAElD,OAAO,EAAC,SAAS,IAAI,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAE3D,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDd,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,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;IAC1D,IAAI,EAAE,OAAO,GAAG,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAC5D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,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,SAAS,GAAG,MAAM,CAAC;QACzB,IAAI,EACA,SAAS,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,SAAS,CAAC,GAChD,SAAS,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,SAAS,CAAC,CAAC;KACtD,CAAC;IACF,IAAI,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC;CACpD,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -50,7 +50,7 @@ const propTypes = {
     customStyle: _buttonLink.default.propTypes.customStyle
   }),
   onClose: _propTypes.default.func,
-  icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape(_icon.iconPropTypes)]),
+  icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape(_icon.propTypes)]),
   backgroundImageUrl: _propTypes.default.string,
   descriptionText: _propTypes.default.string,
   cookieTitle: _propTypes.default.string,

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["_propTypes","_interopRequireDefault","require","_buttonLink","_inputSwitch","_title","_link","_cardsGrid","_listItems","_buttonIcons","_icon","e","__esModule","default","propTypes","content","PropTypes","string","mode","oneOf","header","shape","title","Title","headerIcon","backgroundImage","firstButton","label","handleOnclick","func","largeButton","bool","type","customStyle","ButtonLink","secondButton","icon","position","_keys2","ICONS","thirdButton","onClose","oneOfType","iconPropTypes","backgroundImageUrl","descriptionText","cookieTitle","headerSubtitle","descriptionBtnTxt","listBtnSwicth","arrayOf","InputSwitch","items","list","CardsGrid","ListItems","link","Link","_default","exports"],"sources":["../../../src/molecule/cm-popin/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport {keys} from 'lodash/fp';\nimport ButtonLink from '../../atom/button-link';\nimport InputSwitch from '../../atom/input-switch';\nimport Title from '../../atom/title';\nimport Link from '../../atom/link';\nimport {TitleProps} from '../../atom/title/types';\nimport CardsGrid from '../../organism/cards-grid';\nimport ListItems from '../../organism/list-items';\nimport {ICONS} from '../../util/button-icons';\nimport {iconPropTypes} from '../../atom/icon';\n\nconst propTypes = {\n  content: PropTypes.string,\n  mode: PropTypes.oneOf(['alert', 'information', 'cookie', 'items', 'list']),\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: ButtonLink.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: ButtonLink.propTypes.customStyle,\n    icon: PropTypes.shape({\n      position: PropTypes.oneOf(['right', 'left']),\n      type: PropTypes.oneOf(keys(ICONS))\n    })\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: ButtonLink.propTypes.customStyle\n  }),\n  onClose: PropTypes.func,\n  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.shape(iconPropTypes)]),\n  backgroundImageUrl: PropTypes.string,\n  descriptionText: PropTypes.string,\n  cookieTitle: PropTypes.string,\n  headerSubtitle: PropTypes.string,\n  descriptionBtnTxt: PropTypes.string,\n  listBtnSwicth: PropTypes.arrayOf(PropTypes.shape(InputSwitch.propTypes)),\n  items: PropTypes.shape({\n    type: PropTypes.oneOf(['content', 'list']),\n    list: PropTypes.oneOfType([\n      PropTypes.shape(CardsGrid.propTypes),\n      PropTypes.shape(ListItems.propTypes)\n    ])\n  }),\n  link: PropTypes.shape(Link.propTypes)\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 | PropTypes.InferProps<typeof iconPropTypes>;\n  mode: 'alert' | 'information' | 'cookie' | 'items' | 'list';\n  onClose?: () => void;\n  popinHeader?: PopinHeaderProps;\n  descriptionText: string;\n  firstButton?: QuitPopinButton;\n  secondButton?: QuitPopinButton;\n  items?: {\n    type: 'content' | 'list';\n    list:\n      | PropTypes.InferProps<typeof CardsGrid.propTypes>\n      | PropTypes.InferProps<typeof ListItems.propTypes>;\n  };\n  link?: PropTypes.InferProps<typeof Link.propTypes>;\n};\n\nexport default propTypes;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"types.js","names":["_propTypes","_interopRequireDefault","require","_buttonLink","_inputSwitch","_title","_link","_cardsGrid","_listItems","_buttonIcons","_icon","e","__esModule","default","propTypes","content","PropTypes","string","mode","oneOf","header","shape","title","Title","headerIcon","backgroundImage","firstButton","label","handleOnclick","func","largeButton","bool","type","customStyle","ButtonLink","secondButton","icon","position","_keys2","ICONS","thirdButton","onClose","oneOfType","iconPropTypes","backgroundImageUrl","descriptionText","cookieTitle","headerSubtitle","descriptionBtnTxt","listBtnSwicth","arrayOf","InputSwitch","items","list","CardsGrid","ListItems","link","Link","_default","exports"],"sources":["../../../src/molecule/cm-popin/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport {keys} from 'lodash/fp';\nimport ButtonLink from '../../atom/button-link';\nimport InputSwitch from '../../atom/input-switch';\nimport Title from '../../atom/title';\nimport Link from '../../atom/link';\nimport {TitleProps} from '../../atom/title/types';\nimport CardsGrid from '../../organism/cards-grid';\nimport ListItems from '../../organism/list-items';\nimport {ICONS} from '../../util/button-icons';\nimport {propTypes as iconPropTypes} from '../../atom/icon';\n\nconst propTypes = {\n  content: PropTypes.string,\n  mode: PropTypes.oneOf(['alert', 'information', 'cookie', 'items', 'list']),\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: ButtonLink.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: ButtonLink.propTypes.customStyle,\n    icon: PropTypes.shape({\n      position: PropTypes.oneOf(['right', 'left']),\n      type: PropTypes.oneOf(keys(ICONS))\n    })\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: ButtonLink.propTypes.customStyle\n  }),\n  onClose: PropTypes.func,\n  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.shape(iconPropTypes)]),\n  backgroundImageUrl: PropTypes.string,\n  descriptionText: PropTypes.string,\n  cookieTitle: PropTypes.string,\n  headerSubtitle: PropTypes.string,\n  descriptionBtnTxt: PropTypes.string,\n  listBtnSwicth: PropTypes.arrayOf(PropTypes.shape(InputSwitch.propTypes)),\n  items: PropTypes.shape({\n    type: PropTypes.oneOf(['content', 'list']),\n    list: PropTypes.oneOfType([\n      PropTypes.shape(CardsGrid.propTypes),\n      PropTypes.shape(ListItems.propTypes)\n    ])\n  }),\n  link: PropTypes.shape(Link.propTypes)\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 | PropTypes.InferProps<typeof iconPropTypes>;\n  mode: 'alert' | 'information' | 'cookie' | 'items' | 'list';\n  onClose?: () => void;\n  popinHeader?: PopinHeaderProps;\n  descriptionText: string;\n  firstButton?: QuitPopinButton;\n  secondButton?: QuitPopinButton;\n  items?: {\n    type: 'content' | 'list';\n    list:\n      | PropTypes.InferProps<typeof CardsGrid.propTypes>\n      | PropTypes.InferProps<typeof ListItems.propTypes>;\n  };\n  link?: PropTypes.InferProps<typeof Link.propTypes>;\n};\n\nexport default propTypes;\n"],"mappings":"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","ignoreList":[]}

package/lib/molecule/learner-skill-card/index.d.ts

@@ -1,44 +1,29 @@
-export default LearnerSkillCard;
-declare function LearnerSkillCard(props: any, context: any): JSX.Element;
-declare namespace LearnerSkillCard {
-    namespace contextTypes {
-        const skin: PropTypes.Requireable<PropTypes.InferProps<{
-            common: PropTypes.Requireable<{
-                [x: string]: any;
-            }>;
-            images: PropTypes.Requireable<PropTypes.InferProps<{
-                'logo-mobile': PropTypes.Requireable<any>;
-                logo: PropTypes.Requireable<any>;
-                'logo-email': PropTypes.Requireable<any>;
-                login: PropTypes.Requireable<any>;
-            }>>;
-            icons: PropTypes.Requireable<{
-                [x: string]: any;
-            }>;
-            mod: PropTypes.Requireable<{
-                [x: string]: any;
-            }>;
-            courses: PropTypes.Requireable<any[]>;
-            texts: PropTypes.Requireable<{
-                [x: string]: any;
-            }>;
+import React from 'react';
+import { WebContextValues } from '../../atom/provider/web-context';
+import { LearnerSkillCardProps } from './prop-types';
+export declare const updateBackgroundImage: (ref: React.RefObject<HTMLDivElement>, background: string) => void;
+declare const LearnerSkillCard: {
+    (props: LearnerSkillCardProps, context: WebContextValues): JSX.Element;
+    contextTypes: {
+        translate: import("prop-types").Requireable<(...args: any[]) => any>;
+    };
+    propTypes: {
+        'aria-label': import("prop-types").Requireable<string>;
+        cardIndex: import("prop-types").Requireable<number>;
+        skillTitle: import("prop-types").Requireable<string>;
+        skillAriaLabel: import("prop-types").Requireable<string>;
+        focus: import("prop-types").Requireable<boolean>;
+        metrics: import("prop-types").Requireable<import("prop-types").InferProps<{
+            content: import("prop-types").Requireable<number>;
+            score: import("prop-types").Requireable<number>;
+            questionsToReview: import("prop-types").Requireable<number>;
         }>>;
-        const translate: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-    const propTypes: {
-        'aria-label': PropTypes.Requireable<string>;
-        skillTitle: PropTypes.Requireable<string>;
-        skillAriaLabel: PropTypes.Requireable<string>;
-        focus: PropTypes.Requireable<boolean>;
-        metrics: PropTypes.Requireable<PropTypes.InferProps<{
-            score: PropTypes.Requireable<number>;
-            content: PropTypes.Requireable<number>;
-            questionsToReview: PropTypes.Requireable<number>;
+        icon: import("prop-types").Requireable<import("prop-types").InferProps<{
+            color: import("prop-types").Requireable<string>;
+            name: import("prop-types").Requireable<string>;
         }>>;
-        review: PropTypes.Requireable<boolean>;
-        onReviewClick: PropTypes.Requireable<(...args: any[]) => any>;
-        onExploreClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onExploreClick: import("prop-types").Requireable<(...args: any[]) => any>;
     };
-}
-import PropTypes from "prop-types";
+};
+export default LearnerSkillCard;
 //# sourceMappingURL=index.d.ts.map

package/lib/molecule/learner-skill-card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learner-skill-card/index.js"],"names":[],"mappings":";AAaA,yEAiHC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learner-skill-card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AAKjE,OAAkB,EAAC,qBAAqB,EAAC,MAAM,cAAc,CAAC;AAK9D,eAAO,MAAM,qBAAqB,QAAS,MAAM,SAAS,CAAC,cAAc,CAAC,cAAc,MAAM,SAI7F,CAAC;AAEF,QAAA,MAAM,gBAAgB;YAAW,qBAAqB,WAAW,gBAAgB;;;;;;;;;;;;;;;;;;;;;CA6HhF,CAAC;AAQF,eAAe,gBAAgB,CAAC"}

package/lib/molecule/learner-skill-card/index.js

@@ -1,28 +1,34 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
-var _get2 = _interopRequireDefault(require("lodash/fp/get"));
-var _react = _interopRequireDefault(require("react"));
-var _cssColorFunction = require("css-color-function");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _icon = _interopRequireDefault(require("../../atom/icon"));
-var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
-var _provider = _interopRequireDefault(require("../../atom/provider"));
+exports.updateBackgroundImage = exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _provider = _interopRequireWildcard(require("../../atom/provider"));
 var _progressBar = _interopRequireDefault(require("../progress-bar"));
 var _colors = require("../../variables/colors");
+var _getBackgroundGradientColor = require("../../util/get-background-gradient-color");
+var _icon = _interopRequireDefault(require("../../atom/icon"));
+var _propTypes = _interopRequireDefault(require("./prop-types"));
 var _style = _interopRequireDefault(require("./style.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const MAX_SCORE = 100;
+const updateBackgroundImage = (ref, background) => {
+  if (ref.current) {
+    ref.current.style.backgroundImage = background;
+  }
+};
+exports.updateBackgroundImage = updateBackgroundImage;
 const LearnerSkillCard = (props, context) => {
   const {
     'aria-label': ariaLabel,
+    cardIndex,
     skillTitle,
     skillAriaLabel,
-    focus = false,
+    focus,
     metrics,
-    review = false,
-    onReviewClick,
+    icon,
     onExploreClick
   } = props;
   const {
@@ -30,76 +36,92 @@ const LearnerSkillCard = (props, context) => {
     content,
     questionsToReview = 0
   } = metrics;
+  const translate = (0, _provider.GetTranslateFromContext)(context);
   const {
-    skin,
-    translate
-  } = context;
-  const primarySkinColor = (0, _get2.default)('common.primary', skin);
-  const reviewLocale = translate('Review');
-  const exploreLocale = translate('Explore');
+    color,
+    name
+  } = icon;
   const questionsLocale = translate('skill_chart_side_panel_questions_to_review');
-  const skillFocusLocale = translate('skill_focus');
-  const buttonReviewProps = {
-    customStyle: {
-      backgroundColor: '#FFF',
-      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',
-      padding: '0px'
+  const [badgeIconName, badgeLocale, tagTextColor, tagBackgroundColor] = focus ? ['bullseye-arrow', translate('skill_focus'), _colors.COLORS.purple_700, _colors.COLORS.purple_100] : ['shapes', translate('skill'), _colors.COLORS.cm_grey_500, _colors.COLORS.gray];
+  const headerBackgroundRef = (0, _react.useRef)(null);
+  const defaultBackground = (0, _react.useMemo)(() => (0, _getBackgroundGradientColor.createGradientBackground)(color, '93%', '100%'), [color]);
+  const focusBackground = (0, _react.useMemo)(() => (0, _getBackgroundGradientColor.createGradientBackground)(color, '83%', '100%'), [color]);
+  const handleMouseEnter = (0, _react.useCallback)(() => {
+    updateBackgroundImage(headerBackgroundRef, focusBackground);
+  }, [focusBackground]);
+  const handleMouseLeave = (0, _react.useCallback)(() => {
+    updateBackgroundImage(headerBackgroundRef, defaultBackground);
+  }, [defaultBackground]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": `learner-skill-card-wrapper-${cardIndex}`,
+    onClick: onExploreClick,
+    className: _style.default.learnerSkillCardContainer,
+    "aria-label": ariaLabel,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "learner-skill-card-icon-header-wrapper",
+    ref: headerBackgroundRef,
+    className: _style.default.iconHeaderWrapper,
+    style: {
+      backgroundImage: defaultBackground,
+      color: tagTextColor
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.iconWrapper,
+    "data-testid": "learner-skill-card-icon-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    iconName: name,
+    iconColor: color,
+    size: {
+      faSize: 20,
+      wrapperSize: 44
     },
-    disabled: !review,
-    onClick: onReviewClick,
-    'aria-label': `${skillTitle}, ${reviewLocale}`,
-    label: reviewLocale,
-    'data-name': 'learner-skill-card-review-button'
-  };
-  const buttonExploreProps = {
+    borderRadius: '12px',
+    gradientBackground: true,
     customStyle: {
-      backgroundColor: (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.07))`),
-      color: primarySkinColor,
-      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'
-    },
-    hoverColor: '#FFFFFF',
-    hoverBackgroundColor: primarySkinColor,
-    onClick: onExploreClick,
-    'aria-label': `${skillTitle}, ${exploreLocale}`,
-    label: exploreLocale,
-    'data-name': 'learner-skill-card-explore-button',
-    icon: {
-      position: 'left',
-      faIcon: {
-        name: 'compass',
-        backgroundColor: (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.07))`),
-        color: primarySkinColor,
-        size: 16
-      }
+      border: '4px solid white'
     }
-  };
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.learnerSkillCardWrapper,
-    "data-name": "learner-skill-card-wrapper",
-    "aria-label": ariaLabel
-  }, questionsToReview ? /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.skillQuestionsWrapper
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.learnerSkillCardContent
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.skillInformation,
-    "data-name": "skill-questions"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.default.skillInformationNumber
-  }, questionsToReview), "\xA0", questionsLocale)) : null, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.skillTitleWrapper
   }, /*#__PURE__*/_react.default.createElement("div", {
-    "data-name": "skill-title",
-    className: _style.default.skillTitle,
-    "aria-label": skillAriaLabel || skillTitle
-  }, skillTitle), focus ? /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.skillFocusBadge
+    className: _style.default.skillFocusBadge,
+    style: {
+      backgroundColor: tagBackgroundColor,
+      color: tagTextColor
+    }
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-    iconName: "bullseye-arrow",
-    backgroundColor: "#DDD1FF",
+    iconName: badgeIconName,
+    backgroundColor: tagBackgroundColor,
     size: {
       faSize: 10,
       wrapperSize: 16
     }
-  }), skillFocusLocale) : null), content ? /*#__PURE__*/_react.default.createElement("div", {
+  }), badgeLocale), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.questionWrapper
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-name": "skill-card-title",
+    className: _style.default.skillTitle,
+    "aria-label": skillAriaLabel || skillTitle
+  }, skillTitle), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.contentAndQuestionsWrapper
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-name": "learner-skill-card-skill-content-number"
+  }, content, " ", translate('content')), questionsToReview ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.skillInformation,
+    "data-name": "learner-skill-card-skill-questions-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    iconName: 'circle',
+    iconColor: _colors.COLORS.cm_grey_400,
+    size: {
+      faSize: 4,
+      wrapperSize: 0
+    }
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    "data-name": "learner-skill-card-questions-to-review"
+  }, questionsToReview), "\xA0", questionsLocale) : null)))), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.progressInformations
   }, /*#__PURE__*/_react.default.createElement(_progressBar.default, {
     value: score,
@@ -107,38 +129,13 @@ const LearnerSkillCard = (props, context) => {
     max: MAX_SCORE,
     className: _style.default.progressWrapper,
     style: {
-      backgroundColor: _colors.COLORS.positive
+      backgroundColor: _colors.COLORS.cm_positive_500
     }
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.progressInformation,
-    "data-name": "completed-percentage"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.default.progressInformationNumber
-  }, score, "%"))) : null, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.ctaWrapper,
-    "data-name": "cta-wrapper"
-  }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, buttonReviewProps), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.buttonWrapper,
-    "data-name": "button-explore-wrapper"
-  }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, buttonExploreProps))));
+  })));
 };
 LearnerSkillCard.contextTypes = {
-  skin: _provider.default.childContextTypes.skin,
   translate: _provider.default.childContextTypes.translate
 };
-LearnerSkillCard.propTypes = process.env.NODE_ENV !== "production" ? {
-  'aria-label': _propTypes.default.string,
-  skillTitle: _propTypes.default.string,
-  skillAriaLabel: _propTypes.default.string,
-  focus: _propTypes.default.bool,
-  metrics: _propTypes.default.shape({
-    score: _propTypes.default.number,
-    content: _propTypes.default.number,
-    questionsToReview: _propTypes.default.number
-  }),
-  review: _propTypes.default.bool,
-  onReviewClick: _propTypes.default.func,
-  onExploreClick: _propTypes.default.func
-} : {};
+LearnerSkillCard.propTypes = process.env.NODE_ENV !== "production" ? _propTypes.default : {};
 var _default = exports.default = LearnerSkillCard;
 //# sourceMappingURL=index.js.map