@coorpacademy/components 11.32.49 → 11.32.50

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

@@ -69,7 +69,8 @@ const SkillDetail = (props, context) => {
     sorting,
     onBackClick,
     onReviewClick,
-    onContinueLearningClick
+    onContinueLearningClick,
+    bannerMicrolearningRuleAction = null
   } = props;
   const descriptionRef = useRef(null);
   const {
@@ -175,7 +176,8 @@ const SkillDetail = (props, context) => {
     content: skillIncludedCourses,
     filters: filters,
     sorting: sorting,
-    totalContents: totalContents
+    totalContents: totalContents,
+    bannerMicrolearningRuleAction: bannerMicrolearningRuleAction
   })));
 };
 
@@ -203,7 +205,8 @@ SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   sorting: PropTypes.shape(Select.propTypes),
   onBackClick: PropTypes.func,
   onReviewClick: PropTypes.func,
-  onContinueLearningClick: PropTypes.func
+  onContinueLearningClick: PropTypes.func,
+  bannerMicrolearningRuleAction: PropTypes.func
 } : {};
 export default SkillDetail;
 //# sourceMappingURL=index.js.map

package/es/template/skill-detail/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","useRef","useEffect","PropTypes","convert","classnames","Markdown","Provider","Select","SelectOptionPropTypes","ButtonLink","ButtonLinkIcon","Icon","CardsGrid","style","AllCourses","ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","width","borderRadius","backgroundColor","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","bool","func","SkillDetail","title","skillRef","description","metrics","focused","availableForReview","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","descriptionRef","score","questionsToReview","totalContents","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButton","ctaContainer","skillFocusBadge","faSize","wrapperSize","showMoreWrapper","ctaWrapper","skillInformation","skillInformationNumber","progressContainer","progressInformationNumber","toFixed","string","isRequired","shape","number","onChange","options","arrayOf"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState, useRef, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\n\nexport const ContinueLearningButton = (props, context) => {\n  const {ongoingCoursesAvailable, onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <div>\n      <ButtonLink\n        label={\n          ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')\n        }\n        type=\"primary\"\n        customStyle={{\n          width: 'fit-content',\n          borderRadius: '12px',\n          backgroundColor: primarySkinColor\n        }}\n        hoverBackgroundColor={convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)}\n        hoverColor=\"#FFFFFF\"\n        icon={{\n          position: 'left',\n          faIcon: {\n            name: 'play',\n            color: '#FFFFFF',\n            size: 16\n          }\n        }}\n        onClick={onClick}\n      />\n    </div>\n  );\n};\n\nContinueLearningButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nContinueLearningButton.propTypes = {\n  ongoingCoursesAvailable: PropTypes.bool,\n  onClick: PropTypes.func\n};\n\nconst SkillDetail = (props, context) => {\n  const {\n    title,\n    skillRef,\n    description,\n    metrics = {},\n    focused,\n    availableForReview,\n    ongoingCoursesAvailable,\n    skillIncludedCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick\n  } = props;\n  const descriptionRef = useRef(null);\n  const {score = 0, questionsToReview, totalContents} = metrics;\n  const {translate} = context;\n\n  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  useEffect(() => {\n    if (descriptionRef.current) {\n      const {clientHeight = 0, scrollHeight = 0} = descriptionRef.current;\n      setIsDescriptionTruncated(scrollHeight > clientHeight);\n    }\n  }, [description]);\n\n  const Description = useCallback(() => {\n    return (\n      <div\n        ref={descriptionRef}\n        className={classnames(style.description, !showMore && style.truncate)}\n      >\n        <Markdown>{description}</Markdown>\n      </div>\n    );\n  }, [showMore, description]);\n\n  const ProgressBar = useCallback(() => {\n    if (score === undefined) return null;\n    const progressBarColor = '#3EC483';\n    const inlineProgressValueStyle = {\n      backgroundColor: progressBarColor,\n      width: `${score}%`\n    };\n\n    return (\n      <div className={style.progressBarWrapper}>\n        <div\n          data-name=\"progress\"\n          className={style.progress}\n          style={inlineProgressValueStyle}\n          role=\"progressbar\"\n        />\n      </div>\n    );\n  }, [score]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={skillRef}>\n        {!isNil(onBackClick) ? (\n          <ButtonLinkIcon\n            faIcon=\"arrow-left\"\n            data-name=\"back-button\"\n            aria-label={translate('back')}\n            onClick={onBackClick}\n            className={style.backButton}\n            tooltipPlacement=\"right\"\n          />\n        ) : null}\n        <div className={style.ctaContainer}>\n          <div>\n            {focused ? (\n              <div className={style.skillFocusBadge}>\n                <Icon\n                  iconName=\"bullseye-arrow\"\n                  backgroundColor=\"#DDD1FF\"\n                  size={{\n                    faSize: 10,\n                    wrapperSize: 16\n                  }}\n                />\n                {translate('skill_focus')}\n              </div>\n            ) : null}\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {isDescriptionTruncated ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {showMore ? translate('Show less') : translate('Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{\n                        faSize: 14,\n                        wrapperSize: 16\n                      }}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n          </div>\n\n          <div className={style.ctaWrapper}>\n            <ButtonLink\n              type=\"secondary\"\n              onClick={onReviewClick}\n              label={translate('review_this_skill')}\n              disabled={!availableForReview}\n              customStyle={{\n                width: 'fit-content',\n                borderRadius: '12px'\n              }}\n            />\n            <ContinueLearningButton\n              ongoingCoursesAvailable={ongoingCoursesAvailable}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        {questionsToReview > 0 ? (\n          <div className={style.skillInformation} data-name=\"skill-questions\">\n            <span className={style.skillInformationNumber}>{questionsToReview}</span>\n            &nbsp;{translate('skill_chart_side_panel_questions_to_review')}\n          </div>\n        ) : null}\n        <div className={style.progressContainer}>\n          <ProgressBar />\n          <span className={style.progressInformationNumber}>{score.toFixed(1)}%</span>\n        </div>\n        <AllCourses\n          content={skillIncludedCourses}\n          filters={filters}\n          sorting={sorting}\n          totalContents={totalContents}\n        />\n      </div>\n    </div>\n  );\n};\n\nSkillDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nSkillDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  skillRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  metrics: PropTypes.shape({\n    score: PropTypes.number,\n    questionsToReview: PropTypes.number,\n    totalContents: PropTypes.number\n  }),\n  focused: PropTypes.bool,\n  availableForReview: PropTypes.bool,\n  ongoingCoursesAvailable: PropTypes.bool,\n  skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onReviewClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default SkillDetail;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","useRef","useEffect","PropTypes","convert","classnames","Markdown","Provider","Select","SelectOptionPropTypes","ButtonLink","ButtonLinkIcon","Icon","CardsGrid","style","AllCourses","ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","width","borderRadius","backgroundColor","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","bool","func","SkillDetail","title","skillRef","description","metrics","focused","availableForReview","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","bannerMicrolearningRuleAction","descriptionRef","score","questionsToReview","totalContents","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButton","ctaContainer","skillFocusBadge","faSize","wrapperSize","showMoreWrapper","ctaWrapper","skillInformation","skillInformationNumber","progressContainer","progressInformationNumber","toFixed","string","isRequired","shape","number","onChange","options","arrayOf"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState, useRef, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\n\nexport const ContinueLearningButton = (props, context) => {\n  const {ongoingCoursesAvailable, onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <div>\n      <ButtonLink\n        label={\n          ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')\n        }\n        type=\"primary\"\n        customStyle={{\n          width: 'fit-content',\n          borderRadius: '12px',\n          backgroundColor: primarySkinColor\n        }}\n        hoverBackgroundColor={convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)}\n        hoverColor=\"#FFFFFF\"\n        icon={{\n          position: 'left',\n          faIcon: {\n            name: 'play',\n            color: '#FFFFFF',\n            size: 16\n          }\n        }}\n        onClick={onClick}\n      />\n    </div>\n  );\n};\n\nContinueLearningButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nContinueLearningButton.propTypes = {\n  ongoingCoursesAvailable: PropTypes.bool,\n  onClick: PropTypes.func\n};\n\nconst SkillDetail = (props, context) => {\n  const {\n    title,\n    skillRef,\n    description,\n    metrics = {},\n    focused,\n    availableForReview,\n    ongoingCoursesAvailable,\n    skillIncludedCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick,\n    bannerMicrolearningRuleAction = null\n  } = props;\n  const descriptionRef = useRef(null);\n  const {score = 0, questionsToReview, totalContents} = metrics;\n  const {translate} = context;\n\n  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  useEffect(() => {\n    if (descriptionRef.current) {\n      const {clientHeight = 0, scrollHeight = 0} = descriptionRef.current;\n      setIsDescriptionTruncated(scrollHeight > clientHeight);\n    }\n  }, [description]);\n\n  const Description = useCallback(() => {\n    return (\n      <div\n        ref={descriptionRef}\n        className={classnames(style.description, !showMore && style.truncate)}\n      >\n        <Markdown>{description}</Markdown>\n      </div>\n    );\n  }, [showMore, description]);\n\n  const ProgressBar = useCallback(() => {\n    if (score === undefined) return null;\n    const progressBarColor = '#3EC483';\n    const inlineProgressValueStyle = {\n      backgroundColor: progressBarColor,\n      width: `${score}%`\n    };\n\n    return (\n      <div className={style.progressBarWrapper}>\n        <div\n          data-name=\"progress\"\n          className={style.progress}\n          style={inlineProgressValueStyle}\n          role=\"progressbar\"\n        />\n      </div>\n    );\n  }, [score]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={skillRef}>\n        {!isNil(onBackClick) ? (\n          <ButtonLinkIcon\n            faIcon=\"arrow-left\"\n            data-name=\"back-button\"\n            aria-label={translate('back')}\n            onClick={onBackClick}\n            className={style.backButton}\n            tooltipPlacement=\"right\"\n          />\n        ) : null}\n        <div className={style.ctaContainer}>\n          <div>\n            {focused ? (\n              <div className={style.skillFocusBadge}>\n                <Icon\n                  iconName=\"bullseye-arrow\"\n                  backgroundColor=\"#DDD1FF\"\n                  size={{\n                    faSize: 10,\n                    wrapperSize: 16\n                  }}\n                />\n                {translate('skill_focus')}\n              </div>\n            ) : null}\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {isDescriptionTruncated ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {showMore ? translate('Show less') : translate('Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{\n                        faSize: 14,\n                        wrapperSize: 16\n                      }}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n          </div>\n\n          <div className={style.ctaWrapper}>\n            <ButtonLink\n              type=\"secondary\"\n              onClick={onReviewClick}\n              label={translate('review_this_skill')}\n              disabled={!availableForReview}\n              customStyle={{\n                width: 'fit-content',\n                borderRadius: '12px'\n              }}\n            />\n            <ContinueLearningButton\n              ongoingCoursesAvailable={ongoingCoursesAvailable}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        {questionsToReview > 0 ? (\n          <div className={style.skillInformation} data-name=\"skill-questions\">\n            <span className={style.skillInformationNumber}>{questionsToReview}</span>\n            &nbsp;{translate('skill_chart_side_panel_questions_to_review')}\n          </div>\n        ) : null}\n        <div className={style.progressContainer}>\n          <ProgressBar />\n          <span className={style.progressInformationNumber}>{score.toFixed(1)}%</span>\n        </div>\n        <AllCourses\n          content={skillIncludedCourses}\n          filters={filters}\n          sorting={sorting}\n          totalContents={totalContents}\n          bannerMicrolearningRuleAction={bannerMicrolearningRuleAction}\n        />\n      </div>\n    </div>\n  );\n};\n\nSkillDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nSkillDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  skillRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  metrics: PropTypes.shape({\n    score: PropTypes.number,\n    questionsToReview: PropTypes.number,\n    totalContents: PropTypes.number\n  }),\n  focused: PropTypes.bool,\n  availableForReview: PropTypes.bool,\n  ongoingCoursesAvailable: PropTypes.bool,\n  skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onReviewClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func,\n  bannerMicrolearningRuleAction: PropTypes.func\n};\n\nexport default SkillDetail;\n"],"mappings":"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"}

package/es/variables/colors.d.ts

@@ -1,11 +1,14 @@
 export declare const COLORS: {
     readonly gray: "#EAEAEB";
     readonly negative: "#ed3436";
+    readonly cm_negative_200: "#B81400";
     readonly positive: "#35CC7F";
+    readonly cm_positive_200: "#05944F";
     readonly white: "#ffffff";
     readonly cm_grey_800: "#171721";
     readonly cm_primary_blue: "#0061FF";
     readonly cm_grey_500: "#515161";
+    readonly cm_yellow_400: "#bd7e00";
     readonly brand: "#00B0FF";
 };
 export declare type Colors = typeof COLORS;

package/es/variables/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/variables/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;CAST,CAAC;AAEX,oBAAY,MAAM,GAAG,OAAO,MAAM,CAAC"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/variables/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYT,CAAC;AAEX,oBAAY,MAAM,GAAG,OAAO,MAAM,CAAC"}

package/es/variables/colors.js

@@ -1,11 +1,14 @@
 export const COLORS = {
   gray: '#EAEAEB',
   negative: '#ed3436',
+  cm_negative_200: '#B81400',
   positive: '#35CC7F',
+  cm_positive_200: '#05944F',
   white: '#ffffff',
   cm_grey_800: '#171721',
   cm_primary_blue: '#0061FF',
   cm_grey_500: '#515161',
+  cm_yellow_400: '#bd7e00',
   brand: '#00B0FF'
 };
 //# sourceMappingURL=colors.js.map

package/es/variables/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","names":["COLORS","gray","negative","positive","white","cm_grey_800","cm_primary_blue","cm_grey_500","brand"],"sources":["../../src/variables/colors.ts"],"sourcesContent":["export const COLORS = {\n  gray: '#EAEAEB',\n  negative: '#ed3436',\n  positive: '#35CC7F',\n  white: '#ffffff',\n  cm_grey_800: '#171721',\n  cm_primary_blue: '#0061FF',\n  cm_grey_500: '#515161',\n  brand: '#00B0FF'\n} as const;\n\nexport type Colors = typeof COLORS;\n"],"mappings":"AAAA,OAAO,MAAMA,MAAM,GAAG;EACpBC,IAAI,EAAE,SADc;EAEpBC,QAAQ,EAAE,SAFU;EAGpBC,QAAQ,EAAE,SAHU;EAIpBC,KAAK,EAAE,SAJa;EAKpBC,WAAW,EAAE,SALO;EAMpBC,eAAe,EAAE,SANG;EAOpBC,WAAW,EAAE,SAPO;EAQpBC,KAAK,EAAE;AARa,CAAf"}
+{"version":3,"file":"colors.js","names":["COLORS","gray","negative","cm_negative_200","positive","cm_positive_200","white","cm_grey_800","cm_primary_blue","cm_grey_500","cm_yellow_400","brand"],"sources":["../../src/variables/colors.ts"],"sourcesContent":["export const COLORS = {\n  gray: '#EAEAEB',\n  negative: '#ed3436',\n  cm_negative_200: '#B81400',\n  positive: '#35CC7F',\n  cm_positive_200: '#05944F',\n  white: '#ffffff',\n  cm_grey_800: '#171721',\n  cm_primary_blue: '#0061FF',\n  cm_grey_500: '#515161',\n  cm_yellow_400: '#bd7e00',\n  brand: '#00B0FF'\n} as const;\n\nexport type Colors = typeof COLORS;\n"],"mappings":"AAAA,OAAO,MAAMA,MAAM,GAAG;EACpBC,IAAI,EAAE,SADc;EAEpBC,QAAQ,EAAE,SAFU;EAGpBC,eAAe,EAAE,SAHG;EAIpBC,QAAQ,EAAE,SAJU;EAKpBC,eAAe,EAAE,SALG;EAMpBC,KAAK,EAAE,SANa;EAOpBC,WAAW,EAAE,SAPO;EAQpBC,eAAe,EAAE,SARG;EASpBC,WAAW,EAAE,SATO;EAUpBC,aAAa,EAAE,SAVK;EAWpBC,KAAK,EAAE;AAXa,CAAf"}

package/lib/atom/input-switch/style.css

@@ -86,6 +86,10 @@
   left: 30px;
 }
 
+.coorpmanager input:checked ~ label::after {
+  left: 23px;
+}
+
 .checkbox:disabled ~ label {
   background: light;
   pointer-events: none;
@@ -108,6 +112,10 @@
   min-height: 24px;
 }
 
+.coorpmanager .title {
+  width: fit-content;
+}
+
 .description {
   font-family: 'Gilroy';
   font-weight: 500;
@@ -126,6 +134,7 @@
 }
 
 .coorpmanager label::after, .coorpmanagerModified label::after {
+  top: 1px;
   width: 22px;
   height: 22px;
 }
@@ -134,7 +143,6 @@
   font-family: Gilroy;
   font-weight: bold;
   color: black;
-  min-width: 190px;
 }
 
 .coorpmanager .checkbox:checked ~ label {

package/lib/molecule/banner/index.d.ts

@@ -5,10 +5,11 @@ declare namespace Banner {
         const bannerKey: PropTypes.Requireable<string>;
         const type: PropTypes.Requireable<string>;
         const message: PropTypes.Validator<string>;
-        const firstCTA: PropTypes.Requireable<(...args: any[]) => any>;
-        const firstCTALabel: PropTypes.Requireable<string>;
-        const secondCTALabel: PropTypes.Requireable<string>;
-        const secondCTA: PropTypes.Requireable<(...args: any[]) => any>;
+        const cta: PropTypes.Requireable<(PropTypes.InferProps<{
+            label: PropTypes.Requireable<string>;
+            type: PropTypes.Requireable<string>;
+            action: PropTypes.Requireable<(...args: any[]) => any>;
+        }> | null | undefined)[]>;
         const temporary: PropTypes.Requireable<boolean>;
         const onEnd: PropTypes.Requireable<(...args: any[]) => any>;
     }

package/lib/molecule/banner/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/banner/index.js"],"names":[],"mappings":";AAuBA,iDAmDC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/banner/index.js"],"names":[],"mappings":";AA0BA,iDAmFC"}

package/lib/molecule/banner/index.js

@@ -3,46 +3,124 @@
 exports.__esModule = true;
 exports.default = void 0;
 
+var _size2 = _interopRequireDefault(require("lodash/fp/size"));
+
+var _map2 = _interopRequireDefault(require("lodash/fp/map"));
+
+var _isEmpty2 = _interopRequireDefault(require("lodash/fp/isEmpty"));
+
+var _noop2 = _interopRequireDefault(require("lodash/fp/noop"));
+
 var _keys2 = _interopRequireDefault(require("lodash/fp/keys"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _novaIcons = require("@coorpacademy/nova-icons");
+var _colors = require("../../variables/colors");
 
 var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
 
+var _icon = _interopRequireDefault(require("../../atom/icon"));
+
+var _inputSwitch = _interopRequireDefault(require("../../atom/input-switch"));
+
 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 }; }
 
-const ICONS = {
-  success: _novaIcons.NovaCompositionCoorpacademyValidate,
-  error: _novaIcons.NovaSolidInterfaceFeedbackInterfaceAlertDiamond,
-  warning: _novaIcons.NovaSolidInterfaceFeedbackInterfaceAlertDiamond
+const uncappedMap = _map2.default.convert({
+  cap: false
+});
+
+const TYPES = {
+  success: ['circle-check', _colors.COLORS.cm_positive_200],
+  error: ['triangle-exclamation', _colors.COLORS.cm_negative_200],
+  warning: ['circle-exclamation', _colors.COLORS.cm_yellow_400],
+  info: ['circle-info', _colors.COLORS.cm_grey_500]
 };
 const STYLES = {
   success: _style.default.success,
   error: _style.default.error,
-  warning: _style.default.warning
+  warning: _style.default.warning,
+  info: _style.default.info
 };
 
 const Banner = props => {
   const {
     type,
     message,
-    firstCTA,
-    firstCTALabel,
-    secondCTALabel,
-    secondCTA,
+    cta = [],
     temporary,
     bannerKey,
     onEnd
   } = props;
-  const Icon = ICONS[type];
+  const [switchValue, setSwitchValue] = (0, _react.useState)(false);
+
+  const ButtonSeparator = /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(_style.default.buttonsBar, STYLES[type])
+  });
+
+  const handleSwitchToggle = (0, _react.useCallback)(action => e => {
+    const newSwitchValue = !switchValue;
+    setSwitchValue(newSwitchValue);
+    action(newSwitchValue);
+  }, [switchValue]);
+
+  const buildButton = ({
+    type: buttonType = 'button',
+    label,
+    action = _noop2.default
+  }) => {
+    const commonStyle = (0, _classnames.default)(_style.default.button, STYLES[type]);
+
+    switch (buttonType) {
+      case 'switch':
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: commonStyle
+        }, /*#__PURE__*/_react.default.createElement(_inputSwitch.default, {
+          id: "show-microlearning-switch",
+          theme: "coorpmanager",
+          title: label,
+          value: switchValue,
+          onChange: handleSwitchToggle(action),
+          "data-name": `banner-switch-cta`,
+          "aria-label": label
+        }));
+
+      default:
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: commonStyle
+        }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
+          "data-name": "banner-button-cta",
+          "aria-label": label,
+          label: label,
+          onClick: action,
+          type: "text",
+          customStyle: {
+            padding: 0
+          }
+        }));
+    }
+  };
+
+  const buildCta = ctaOptions => {
+    return uncappedMap((options, i) => {
+      if ((0, _isEmpty2.default)(options)) return null;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: _style.default.ctaWrapper,
+        key: i
+      }, i > 0 && i <= (0, _size2.default)(options) ? ButtonSeparator : null, buildButton(options));
+    }, ctaOptions);
+  };
+
+  const [iconName, iconColor] = TYPES[type];
   return /*#__PURE__*/_react.default.createElement("div", {
     key: bannerKey,
     className: (0, _classnames.default)(_style.default.banner, STYLES[type], temporary && _style.default.temporaryBanner),
@@ -51,37 +129,26 @@ const Banner = props => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     "data-name": `${type}-banner-message`,
     className: _style.default.message
-  }, /*#__PURE__*/_react.default.createElement(Icon, {
-    className: (0, _classnames.default)(_style.default.icon, temporary && _style.default.temporaryIcon)
-  }), message), firstCTALabel ? /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(_style.default.button, STYLES[type])
-  }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
-    "data-name": "first-banner-cta",
-    "aria-label": firstCTALabel,
-    label: firstCTALabel,
-    onClick: firstCTA,
-    type: "text"
-  })) : null, firstCTALabel && secondCTALabel ? /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(_style.default.buttonsBar, STYLES[type])
-  }) : null, secondCTALabel ? /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(_style.default.button, STYLES[type])
-  }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
-    "data-name": "second-banner-cta",
-    onClick: secondCTA,
-    "aria-label": secondCTALabel,
-    label: secondCTALabel,
-    type: "text"
-  })) : null);
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    iconName: iconName,
+    iconColor: iconColor,
+    className: (0, _classnames.default)(_style.default.icon, temporary && _style.default.temporaryIcon),
+    customStyle: {
+      padding: 0
+    }
+  }), message), buildCta(cta));
 };
 
+const ctaPropTypes = process.env.NODE_ENV !== "production" ? _propTypes.default.shape({
+  label: _propTypes.default.string,
+  type: _propTypes.default.oneOf(['button', 'switch']),
+  action: _propTypes.default.func
+}) : {};
 Banner.propTypes = process.env.NODE_ENV !== "production" ? {
   bannerKey: _propTypes.default.string,
-  type: _propTypes.default.oneOf((0, _keys2.default)(ICONS)),
+  type: _propTypes.default.oneOf((0, _keys2.default)(TYPES)),
   message: _propTypes.default.string.isRequired,
-  firstCTA: _propTypes.default.func,
-  firstCTALabel: _propTypes.default.string,
-  secondCTALabel: _propTypes.default.string,
-  secondCTA: _propTypes.default.func,
+  cta: _propTypes.default.arrayOf(ctaPropTypes),
   temporary: _propTypes.default.bool,
   onEnd: _propTypes.default.func
 } : {};

package/lib/molecule/banner/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ICONS","success","ValidateIcon","error","QuestionIcon","warning","STYLES","style","Banner","props","type","message","firstCTA","firstCTALabel","secondCTALabel","secondCTA","temporary","bannerKey","onEnd","Icon","classnames","banner","temporaryBanner","icon","temporaryIcon","button","buttonsBar","propTypes","PropTypes","string","oneOf","isRequired","func","bool"],"sources":["../../../src/molecule/banner/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {keys} from 'lodash/fp';\nimport {\n  NovaSolidInterfaceFeedbackInterfaceAlertDiamond as QuestionIcon,\n  NovaCompositionCoorpacademyValidate as ValidateIcon\n} from '@coorpacademy/nova-icons';\nimport ButtonLink from '../../atom/button-link';\nimport style from './style.css';\n\nconst ICONS = {\n  success: ValidateIcon,\n  error: QuestionIcon,\n  warning: QuestionIcon\n};\n\nconst STYLES = {\n  success: style.success,\n  error: style.error,\n  warning: style.warning\n};\n\nconst Banner = props => {\n  const {\n    type,\n    message,\n    firstCTA,\n    firstCTALabel,\n    secondCTALabel,\n    secondCTA,\n    temporary,\n    bannerKey,\n    onEnd\n  } = props;\n  const Icon = ICONS[type];\n  return (\n    <div\n      key={bannerKey}\n      className={classnames(style.banner, STYLES[type], temporary && style.temporaryBanner)}\n      onAnimationEnd={onEnd}\n      title={message}\n    >\n      <div data-name={`${type}-banner-message`} className={style.message}>\n        <Icon className={classnames(style.icon, temporary && style.temporaryIcon)} />\n        {message}\n      </div>\n      {firstCTALabel ? (\n        <div className={classnames(style.button, STYLES[type])}>\n          <ButtonLink\n            data-name=\"first-banner-cta\"\n            aria-label={firstCTALabel}\n            label={firstCTALabel}\n            onClick={firstCTA}\n            type=\"text\"\n          />\n        </div>\n      ) : null}\n      {firstCTALabel && secondCTALabel ? (\n        <div className={classnames(style.buttonsBar, STYLES[type])} />\n      ) : null}\n      {secondCTALabel ? (\n        <div className={classnames(style.button, STYLES[type])}>\n          <ButtonLink\n            data-name=\"second-banner-cta\"\n            onClick={secondCTA}\n            aria-label={secondCTALabel}\n            label={secondCTALabel}\n            type=\"text\"\n          />\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nBanner.propTypes = {\n  bannerKey: PropTypes.string,\n  type: PropTypes.oneOf(keys(ICONS)),\n  message: PropTypes.string.isRequired,\n  firstCTA: PropTypes.func,\n  firstCTALabel: PropTypes.string,\n  secondCTALabel: PropTypes.string,\n  secondCTA: PropTypes.func,\n  temporary: PropTypes.bool,\n  onEnd: PropTypes.func\n};\n\nexport default Banner;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AAIA;;AACA;;;;AAEA,MAAMA,KAAK,GAAG;EACZC,OAAO,EAAEC,8CADG;EAEZC,KAAK,EAAEC,0DAFK;EAGZC,OAAO,EAAED;AAHG,CAAd;AAMA,MAAME,MAAM,GAAG;EACbL,OAAO,EAAEM,cAAA,CAAMN,OADF;EAEbE,KAAK,EAAEI,cAAA,CAAMJ,KAFA;EAGbE,OAAO,EAAEE,cAAA,CAAMF;AAHF,CAAf;;AAMA,MAAMG,MAAM,GAAGC,KAAK,IAAI;EACtB,MAAM;IACJC,IADI;IAEJC,OAFI;IAGJC,QAHI;IAIJC,aAJI;IAKJC,cALI;IAMJC,SANI;IAOJC,SAPI;IAQJC,SARI;IASJC;EATI,IAUFT,KAVJ;EAWA,MAAMU,IAAI,GAAGnB,KAAK,CAACU,IAAD,CAAlB;EACA,oBACE;IACE,GAAG,EAAEO,SADP;IAEE,SAAS,EAAE,IAAAG,mBAAA,EAAWb,cAAA,CAAMc,MAAjB,EAAyBf,MAAM,CAACI,IAAD,CAA/B,EAAuCM,SAAS,IAAIT,cAAA,CAAMe,eAA1D,CAFb;IAGE,cAAc,EAAEJ,KAHlB;IAIE,KAAK,EAAEP;EAJT,gBAME;IAAK,aAAY,GAAED,IAAK,iBAAxB;IAA0C,SAAS,EAAEH,cAAA,CAAMI;EAA3D,gBACE,6BAAC,IAAD;IAAM,SAAS,EAAE,IAAAS,mBAAA,EAAWb,cAAA,CAAMgB,IAAjB,EAAuBP,SAAS,IAAIT,cAAA,CAAMiB,aAA1C;EAAjB,EADF,EAEGb,OAFH,CANF,EAUGE,aAAa,gBACZ;IAAK,SAAS,EAAE,IAAAO,mBAAA,EAAWb,cAAA,CAAMkB,MAAjB,EAAyBnB,MAAM,CAACI,IAAD,CAA/B;EAAhB,gBACE,6BAAC,mBAAD;IACE,aAAU,kBADZ;IAEE,cAAYG,aAFd;IAGE,KAAK,EAAEA,aAHT;IAIE,OAAO,EAAED,QAJX;IAKE,IAAI,EAAC;EALP,EADF,CADY,GAUV,IApBN,EAqBGC,aAAa,IAAIC,cAAjB,gBACC;IAAK,SAAS,EAAE,IAAAM,mBAAA,EAAWb,cAAA,CAAMmB,UAAjB,EAA6BpB,MAAM,CAACI,IAAD,CAAnC;EAAhB,EADD,GAEG,IAvBN,EAwBGI,cAAc,gBACb;IAAK,SAAS,EAAE,IAAAM,mBAAA,EAAWb,cAAA,CAAMkB,MAAjB,EAAyBnB,MAAM,CAACI,IAAD,CAA/B;EAAhB,gBACE,6BAAC,mBAAD;IACE,aAAU,mBADZ;IAEE,OAAO,EAAEK,SAFX;IAGE,cAAYD,cAHd;IAIE,KAAK,EAAEA,cAJT;IAKE,IAAI,EAAC;EALP,EADF,CADa,GAUX,IAlCN,CADF;AAsCD,CAnDD;;AAqDAN,MAAM,CAACmB,SAAP,2CAAmB;EACjBV,SAAS,EAAEW,kBAAA,CAAUC,MADJ;EAEjBnB,IAAI,EAAEkB,kBAAA,CAAUE,KAAV,CAAgB,oBAAK9B,KAAL,CAAhB,CAFW;EAGjBW,OAAO,EAAEiB,kBAAA,CAAUC,MAAV,CAAiBE,UAHT;EAIjBnB,QAAQ,EAAEgB,kBAAA,CAAUI,IAJH;EAKjBnB,aAAa,EAAEe,kBAAA,CAAUC,MALR;EAMjBf,cAAc,EAAEc,kBAAA,CAAUC,MANT;EAOjBd,SAAS,EAAEa,kBAAA,CAAUI,IAPJ;EAQjBhB,SAAS,EAAEY,kBAAA,CAAUK,IARJ;EASjBf,KAAK,EAAEU,kBAAA,CAAUI;AATA,CAAnB;eAYexB,M"}
+{"version":3,"file":"index.js","names":["uncappedMap","convert","cap","TYPES","success","COLORS","cm_positive_200","error","cm_negative_200","warning","cm_yellow_400","info","cm_grey_500","STYLES","style","Banner","props","type","message","cta","temporary","bannerKey","onEnd","switchValue","setSwitchValue","useState","ButtonSeparator","classnames","buttonsBar","handleSwitchToggle","useCallback","action","e","newSwitchValue","buildButton","buttonType","label","commonStyle","button","padding","buildCta","ctaOptions","options","i","ctaWrapper","iconName","iconColor","banner","temporaryBanner","icon","temporaryIcon","ctaPropTypes","PropTypes","shape","string","oneOf","func","propTypes","isRequired","arrayOf","bool"],"sources":["../../../src/molecule/banner/index.js"],"sourcesContent":["import React, {useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {keys, noop, isEmpty, map, size} from 'lodash/fp';\nimport {COLORS} from '../../variables/colors';\nimport ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport InputSwitch from '../../atom/input-switch';\nimport style from './style.css';\n\nconst uncappedMap = map.convert({cap: false});\n\nconst TYPES = {\n  success: ['circle-check', COLORS.cm_positive_200],\n  error: ['triangle-exclamation', COLORS.cm_negative_200],\n  warning: ['circle-exclamation', COLORS.cm_yellow_400],\n  info: ['circle-info', COLORS.cm_grey_500]\n};\n\nconst STYLES = {\n  success: style.success,\n  error: style.error,\n  warning: style.warning,\n  info: style.info\n};\n\nconst Banner = props => {\n  const {type, message, cta = [], temporary, bannerKey, onEnd} = props;\n  const [switchValue, setSwitchValue] = useState(false);\n\n  const ButtonSeparator = <div className={classnames(style.buttonsBar, STYLES[type])} />;\n\n  const handleSwitchToggle = useCallback(\n    action => e => {\n      const newSwitchValue = !switchValue;\n      setSwitchValue(newSwitchValue);\n      action(newSwitchValue);\n    },\n    [switchValue]\n  );\n\n  const buildButton = ({type: buttonType = 'button', label, action = noop}) => {\n    const commonStyle = classnames(style.button, STYLES[type]);\n\n    switch (buttonType) {\n      case 'switch':\n        return (\n          <div className={commonStyle}>\n            <InputSwitch\n              id=\"show-microlearning-switch\"\n              theme=\"coorpmanager\"\n              title={label}\n              value={switchValue}\n              onChange={handleSwitchToggle(action)}\n              data-name={`banner-switch-cta`}\n              aria-label={label}\n            />\n          </div>\n        );\n      default:\n        return (\n          <div className={commonStyle}>\n            <ButtonLink\n              data-name=\"banner-button-cta\"\n              aria-label={label}\n              label={label}\n              onClick={action}\n              type=\"text\"\n              customStyle={{padding: 0}}\n            />\n          </div>\n        );\n    }\n  };\n\n  const buildCta = ctaOptions => {\n    return uncappedMap((options, i) => {\n      if (isEmpty(options)) return null;\n\n      return (\n        <div className={style.ctaWrapper} key={i}>\n          {i > 0 && i <= size(options) ? ButtonSeparator : null}\n          {buildButton(options)}\n        </div>\n      );\n    }, ctaOptions);\n  };\n\n  const [iconName, iconColor] = TYPES[type];\n\n  return (\n    <div\n      key={bannerKey}\n      className={classnames(style.banner, STYLES[type], temporary && style.temporaryBanner)}\n      onAnimationEnd={onEnd}\n      title={message}\n    >\n      <div data-name={`${type}-banner-message`} className={style.message}>\n        <Icon\n          iconName={iconName}\n          iconColor={iconColor}\n          className={classnames(style.icon, temporary && style.temporaryIcon)}\n          customStyle={{padding: 0}}\n        />\n        {message}\n      </div>\n      {buildCta(cta)}\n    </div>\n  );\n};\n\nconst ctaPropTypes = PropTypes.shape({\n  label: PropTypes.string,\n  type: PropTypes.oneOf(['button', 'switch']),\n  action: PropTypes.func\n});\n\nBanner.propTypes = {\n  bannerKey: PropTypes.string,\n  type: PropTypes.oneOf(keys(TYPES)),\n  message: PropTypes.string.isRequired,\n  cta: PropTypes.arrayOf(ctaPropTypes),\n  temporary: PropTypes.bool,\n  onEnd: PropTypes.func\n};\n\nexport default Banner;\n"],"mappings":"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"}

package/lib/molecule/banner/style.css

@@ -12,6 +12,8 @@
 @value cm_yellow_100 from colors;
 @value cm_yellow_200 from colors;
 @value cm_yellow_400 from colors;
+@value cm_grey_100 from colors;
+@value cm_grey_700 from colors;
 
 @keyframes fadeIn {
     0% {
@@ -33,11 +35,11 @@
 .banner {
     display: flex;
     flex-direction: row;
-    justify-content: flex-start;  
-    align-items: center; 
+    justify-content: flex-start;
+    align-items: center;
     gap: 8px; 
-    padding: 16px 24px; 
-    border-radius: 5px;
+    padding: 16px;
+    border-radius: 12px;
 }
 
 .banner.warning {
@@ -55,6 +57,11 @@
     color: cm_positive_200;
 }
 
+.banner.info {
+    background-color: cm_grey_100;
+    color: cm_grey_700;
+}
+
 .temporaryBanner {
     display: inline-flex;
     align-items: center;  
@@ -74,6 +81,11 @@
     transform: translateX(-50%);
 }
 
+.ctaWrapper {
+    display: flex;
+    gap: 4px;
+}
+
 .button{
     background-color: transparent;
     white-space: nowrap;
@@ -103,7 +115,6 @@
     color: color(cm_positive_100 blackness(+12%));
 }
 
-
 .buttonsBar {
     width: 2px;
     align-self: stretch;
@@ -123,6 +134,9 @@
     background-color: cm_positive_100;
 }
 
+.buttonsBar.info {
+    background-color: cm_grey_700;
+}
 
 .icon {
     height: 22px;
@@ -147,4 +161,12 @@
     display: flex;
     align-content: center;
     align-items: center;
+    gap: 16px;
 }
+
+@media mobile {
+    .banner {
+        flex-wrap: wrap;
+        gap: 24px;
+    }
+}

package/lib/template/back-office/brand-update/index.d.ts

@@ -9,10 +9,11 @@ declare namespace BrandUpdate {
             bannerKey: PropTypes.Requireable<string>;
             type: PropTypes.Requireable<string>;
             message: PropTypes.Validator<string>;
-            firstCTA: PropTypes.Requireable<(...args: any[]) => any>;
-            firstCTALabel: PropTypes.Requireable<string>;
-            secondCTALabel: PropTypes.Requireable<string>;
-            secondCTA: PropTypes.Requireable<(...args: any[]) => any>;
+            cta: PropTypes.Requireable<(PropTypes.InferProps<{
+                label: PropTypes.Requireable<string>;
+                type: PropTypes.Requireable<string>;
+                action: PropTypes.Requireable<(...args: any[]) => any>;
+            }> | null | undefined)[]>;
             temporary: PropTypes.Requireable<boolean>;
             onEnd: PropTypes.Requireable<(...args: any[]) => any>;
         }> | null | undefined)[]>;

package/lib/template/playlist-detail/index.d.ts

@@ -83,6 +83,7 @@ declare namespace PlaylistDetail {
         }>>;
         const onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
         const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
+        const bannerMicrolearningRuleAction: PropTypes.Requireable<(...args: any[]) => any>;
     }
 }
 import PropTypes from "prop-types";

package/lib/template/playlist-detail/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/playlist-detail/index.js"],"names":[],"mappings":";AAgBA,uEAqFC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/playlist-detail/index.js"],"names":[],"mappings":";AAgBA,uEA2FC"}

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

@@ -50,7 +50,8 @@ const PlaylistDetail = (props, context) => {
     filters,
     sorting,
     onBackClick,
-    onContinueLearningClick
+    onContinueLearningClick,
+    bannerMicrolearningRuleAction = null
   } = props;
   const descriptionRef = (0, _react.useRef)(null);
   const {
@@ -113,7 +114,8 @@ const PlaylistDetail = (props, context) => {
   })))), /*#__PURE__*/_react.default.createElement(_allCourses.default, {
     content: playlistCourses,
     filters: filters,
-    sorting: sorting
+    sorting: sorting,
+    bannerMicrolearningRuleAction: bannerMicrolearningRuleAction
   })));
 };
 
@@ -134,7 +136,8 @@ PlaylistDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   }),
   sorting: _propTypes.default.shape(_select.default.propTypes),
   onBackClick: _propTypes.default.func,
-  onContinueLearningClick: _propTypes.default.func
+  onContinueLearningClick: _propTypes.default.func,
+  bannerMicrolearningRuleAction: _propTypes.default.func
 } : {};
 var _default = PlaylistDetail;
 exports.default = _default;