@coorpacademy/components 11.32.48 → 11.32.50

package/es/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/es/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/es/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/es/molecule/banner/index.js

@@ -1,34 +1,101 @@
+import _size from "lodash/fp/size";
+import _map from "lodash/fp/map";
+import _isEmpty from "lodash/fp/isEmpty";
+import _noop from "lodash/fp/noop";
 import _keys from "lodash/fp/keys";
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { NovaSolidInterfaceFeedbackInterfaceAlertDiamond as QuestionIcon, NovaCompositionCoorpacademyValidate as ValidateIcon } from '@coorpacademy/nova-icons';
+import { COLORS } from '../../variables/colors';
 import ButtonLink from '../../atom/button-link';
+import Icon from '../../atom/icon';
+import InputSwitch from '../../atom/input-switch';
 import style from './style.css';
-const ICONS = {
-  success: ValidateIcon,
-  error: QuestionIcon,
-  warning: QuestionIcon
+
+const uncappedMap = _map.convert({
+  cap: false
+});
+
+const TYPES = {
+  success: ['circle-check', COLORS.cm_positive_200],
+  error: ['triangle-exclamation', COLORS.cm_negative_200],
+  warning: ['circle-exclamation', COLORS.cm_yellow_400],
+  info: ['circle-info', COLORS.cm_grey_500]
 };
 const STYLES = {
   success: style.success,
   error: style.error,
-  warning: style.warning
+  warning: style.warning,
+  info: style.info
 };
 
 const Banner = props => {
   const {
     type,
     message,
-    firstCTA,
-    firstCTALabel,
-    secondCTALabel,
-    secondCTA,
+    cta = [],
     temporary,
     bannerKey,
     onEnd
   } = props;
-  const Icon = ICONS[type];
+  const [switchValue, setSwitchValue] = useState(false);
+  const ButtonSeparator = /*#__PURE__*/React.createElement("div", {
+    className: classnames(style.buttonsBar, STYLES[type])
+  });
+  const handleSwitchToggle = useCallback(action => e => {
+    const newSwitchValue = !switchValue;
+    setSwitchValue(newSwitchValue);
+    action(newSwitchValue);
+  }, [switchValue]);
+
+  const buildButton = ({
+    type: buttonType = 'button',
+    label,
+    action = _noop
+  }) => {
+    const commonStyle = classnames(style.button, STYLES[type]);
+
+    switch (buttonType) {
+      case 'switch':
+        return /*#__PURE__*/React.createElement("div", {
+          className: commonStyle
+        }, /*#__PURE__*/React.createElement(InputSwitch, {
+          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.createElement("div", {
+          className: commonStyle
+        }, /*#__PURE__*/React.createElement(ButtonLink, {
+          "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 (_isEmpty(options)) return null;
+      return /*#__PURE__*/React.createElement("div", {
+        className: style.ctaWrapper,
+        key: i
+      }, i > 0 && i <= _size(options) ? ButtonSeparator : null, buildButton(options));
+    }, ctaOptions);
+  };
+
+  const [iconName, iconColor] = TYPES[type];
   return /*#__PURE__*/React.createElement("div", {
     key: bannerKey,
     className: classnames(style.banner, STYLES[type], temporary && style.temporaryBanner),
@@ -38,36 +105,25 @@ const Banner = props => {
     "data-name": `${type}-banner-message`,
     className: style.message
   }, /*#__PURE__*/React.createElement(Icon, {
-    className: classnames(style.icon, temporary && style.temporaryIcon)
-  }), message), firstCTALabel ? /*#__PURE__*/React.createElement("div", {
-    className: classnames(style.button, STYLES[type])
-  }, /*#__PURE__*/React.createElement(ButtonLink, {
-    "data-name": "first-banner-cta",
-    "aria-label": firstCTALabel,
-    label: firstCTALabel,
-    onClick: firstCTA,
-    type: "text"
-  })) : null, firstCTALabel && secondCTALabel ? /*#__PURE__*/React.createElement("div", {
-    className: classnames(style.buttonsBar, STYLES[type])
-  }) : null, secondCTALabel ? /*#__PURE__*/React.createElement("div", {
-    className: classnames(style.button, STYLES[type])
-  }, /*#__PURE__*/React.createElement(ButtonLink, {
-    "data-name": "second-banner-cta",
-    onClick: secondCTA,
-    "aria-label": secondCTALabel,
-    label: secondCTALabel,
-    type: "text"
-  })) : null);
+    iconName: iconName,
+    iconColor: iconColor,
+    className: classnames(style.icon, temporary && style.temporaryIcon),
+    customStyle: {
+      padding: 0
+    }
+  }), message), buildCta(cta));
 };
 
+const ctaPropTypes = process.env.NODE_ENV !== "production" ? PropTypes.shape({
+  label: PropTypes.string,
+  type: PropTypes.oneOf(['button', 'switch']),
+  action: PropTypes.func
+}) : {};
 Banner.propTypes = process.env.NODE_ENV !== "production" ? {
   bannerKey: PropTypes.string,
-  type: PropTypes.oneOf(_keys(ICONS)),
+  type: PropTypes.oneOf(_keys(TYPES)),
   message: PropTypes.string.isRequired,
-  firstCTA: PropTypes.func,
-  firstCTALabel: PropTypes.string,
-  secondCTALabel: PropTypes.string,
-  secondCTA: PropTypes.func,
+  cta: PropTypes.arrayOf(ctaPropTypes),
   temporary: PropTypes.bool,
   onEnd: PropTypes.func
 } : {};

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classnames","NovaSolidInterfaceFeedbackInterfaceAlertDiamond","QuestionIcon","NovaCompositionCoorpacademyValidate","ValidateIcon","ButtonLink","style","ICONS","success","error","warning","STYLES","Banner","props","type","message","firstCTA","firstCTALabel","secondCTALabel","secondCTA","temporary","bannerKey","onEnd","Icon","banner","temporaryBanner","icon","temporaryIcon","button","buttonsBar","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":"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"}
+{"version":3,"file":"index.js","names":["React","useState","useCallback","PropTypes","classnames","COLORS","ButtonLink","Icon","InputSwitch","style","uncappedMap","convert","cap","TYPES","success","cm_positive_200","error","cm_negative_200","warning","cm_yellow_400","info","cm_grey_500","STYLES","Banner","props","type","message","cta","temporary","bannerKey","onEnd","switchValue","setSwitchValue","ButtonSeparator","buttonsBar","handleSwitchToggle","action","e","newSwitchValue","buildButton","buttonType","label","commonStyle","button","padding","buildCta","ctaOptions","options","i","ctaWrapper","iconName","iconColor","banner","temporaryBanner","icon","temporaryIcon","ctaPropTypes","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/es/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/es/molecule/progress-wrapper/style.css

@@ -68,20 +68,12 @@
   padding: 16px;
   background-color: white;
   height: 114px;
-}
-
-.detailsSection0 {
-  composes: detailsSectionCommon;
   flex: 1;
 }
 
-.detailsSection1 {
-  composes: detailsSection0;
-}
-
-.detailsSection2 {
+.detailsSection0 , .detailsSection1, .detailsSection2 {
   composes: detailsSectionCommon;
-  width: 245px;
+  flex: 1;
 }
 
 .detailsInfo {

package/es/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/es/template/certification-detail/index.js

@@ -105,13 +105,13 @@ const CertificationDetail = (props, context) => {
     progression: progression,
     completedModules: completedModules,
     mandatoryModules: mandatoryModules,
-    sections: _compact([{
+    sections: _compact([diplomaUrl && {
       type: 'diploma',
       downloadUrl: diplomaUrl
     }, badgeUrl && {
       type: 'badge',
       downloadUrl: badgeUrl
-    }, {
+    }, stars && {
       type: 'stars',
       stars
     }])

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useRef","useState","useMemo","PropTypes","classnames","Markdown","Provider","Tag","SelectOptionPropTypes","ButtonLinkIcon","Icon","CardsGrid","AllCourses","ContinueLearningButton","ProgressWrapper","style","CertificationDetail","props","context","certificationRef","title","tag","description","certificationCourses","ongoingCoursesAvailable","filters","onBackClick","onContinueLearningClick","metrics","logoUrl","diplomaUrl","badgeUrl","descriptionRef","translate","progression","mandatoryModules","stars","totalModules","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","truncate","completedModules","backgroundContainer","container","backButton","ctaContainer","logoContainer","logo","showMoreWrapper","faSize","wrapperSize","contentStats","type","downloadUrl","contextTypes","skin","childContextTypes","propTypes","string","isRequired","shape","number","bool","onChange","func","options","arrayOf"],"sources":["../../../src/template/certification-detail/index.js"],"sourcesContent":["import React, {useCallback, useEffect, useRef, useState, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {compact, lowerCase, round, isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport AllCourses from '../skill-detail/all-courses';\nimport {ContinueLearningButton} from '../skill-detail';\nimport ProgressWrapper from '../../molecule/progress-wrapper';\nimport style from './style.css';\n\nconst CertificationDetail = (props, context) => {\n  const {\n    certificationRef,\n    title,\n    tag,\n    description,\n    certificationCourses,\n    ongoingCoursesAvailable,\n    filters,\n    onBackClick,\n    onContinueLearningClick,\n    metrics,\n    logoUrl,\n    diplomaUrl,\n    badgeUrl\n  } = props;\n  const descriptionRef = useRef(null);\n  const {translate} = context;\n\n  const {progression, mandatoryModules, stars, totalModules} = metrics;\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 completedModules = useMemo(\n    () => round((mandatoryModules * progression) / 100),\n    [mandatoryModules, progression]\n  );\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={certificationRef}>\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 className={style.logoContainer}>\n            <img className={style.logo} src={logoUrl} />\n          </div>\n          <div>\n            <Tag label={tag} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {isDescriptionTruncated ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {translate(showMore ? 'Show less' : 'Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{faSize: 14, wrapperSize: 16}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n            <div className={style.contentStats}>\n              <span>{`${totalModules} ${lowerCase(translate('modules'))}`}</span>\n            </div>\n            <ContinueLearningButton\n              ongoingCoursesAvailable={ongoingCoursesAvailable}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        <ProgressWrapper\n          title={translate('your_progress')}\n          subtitle={translate('certification_progress_wrapper_subtitle')}\n          progression={progression}\n          completedModules={completedModules}\n          mandatoryModules={mandatoryModules}\n          sections={compact([\n            {\n              type: 'diploma',\n              downloadUrl: diplomaUrl\n            },\n            badgeUrl && {\n              type: 'badge',\n              downloadUrl: badgeUrl\n            },\n            {\n              type: 'stars',\n              stars\n            }\n          ])}\n        />\n        <AllCourses\n          content={certificationCourses}\n          filters={filters}\n          data-name=\"certification-courses\"\n        />\n      </div>\n    </div>\n  );\n};\n\nCertificationDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nCertificationDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  tag: PropTypes.string,\n  certificationRef: PropTypes.string.isRequired,\n  description: PropTypes.string.isRequired,\n  logoUrl: PropTypes.string,\n  metrics: PropTypes.shape({\n    progression: PropTypes.number,\n    stars: PropTypes.number,\n    mandatoryModules: PropTypes.number,\n    totalModules: PropTypes.number\n  }),\n  diplomaUrl: PropTypes.string,\n  badgeUrl: PropTypes.string,\n  ongoingCoursesAvailable: PropTypes.bool,\n  certificationCourses: PropTypes.shape(CardsGrid.propTypes),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default CertificationDetail;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useRef","useState","useMemo","PropTypes","classnames","Markdown","Provider","Tag","SelectOptionPropTypes","ButtonLinkIcon","Icon","CardsGrid","AllCourses","ContinueLearningButton","ProgressWrapper","style","CertificationDetail","props","context","certificationRef","title","tag","description","certificationCourses","ongoingCoursesAvailable","filters","onBackClick","onContinueLearningClick","metrics","logoUrl","diplomaUrl","badgeUrl","descriptionRef","translate","progression","mandatoryModules","stars","totalModules","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","truncate","completedModules","backgroundContainer","container","backButton","ctaContainer","logoContainer","logo","showMoreWrapper","faSize","wrapperSize","contentStats","type","downloadUrl","contextTypes","skin","childContextTypes","propTypes","string","isRequired","shape","number","bool","onChange","func","options","arrayOf"],"sources":["../../../src/template/certification-detail/index.js"],"sourcesContent":["import React, {useCallback, useEffect, useRef, useState, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {compact, lowerCase, round, isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport AllCourses from '../skill-detail/all-courses';\nimport {ContinueLearningButton} from '../skill-detail';\nimport ProgressWrapper from '../../molecule/progress-wrapper';\nimport style from './style.css';\n\nconst CertificationDetail = (props, context) => {\n  const {\n    certificationRef,\n    title,\n    tag,\n    description,\n    certificationCourses,\n    ongoingCoursesAvailable,\n    filters,\n    onBackClick,\n    onContinueLearningClick,\n    metrics,\n    logoUrl,\n    diplomaUrl,\n    badgeUrl\n  } = props;\n  const descriptionRef = useRef(null);\n  const {translate} = context;\n\n  const {progression, mandatoryModules, stars, totalModules} = metrics;\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 completedModules = useMemo(\n    () => round((mandatoryModules * progression) / 100),\n    [mandatoryModules, progression]\n  );\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={certificationRef}>\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 className={style.logoContainer}>\n            <img className={style.logo} src={logoUrl} />\n          </div>\n          <div>\n            <Tag label={tag} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {isDescriptionTruncated ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {translate(showMore ? 'Show less' : 'Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{faSize: 14, wrapperSize: 16}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n            <div className={style.contentStats}>\n              <span>{`${totalModules} ${lowerCase(translate('modules'))}`}</span>\n            </div>\n            <ContinueLearningButton\n              ongoingCoursesAvailable={ongoingCoursesAvailable}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        <ProgressWrapper\n          title={translate('your_progress')}\n          subtitle={translate('certification_progress_wrapper_subtitle')}\n          progression={progression}\n          completedModules={completedModules}\n          mandatoryModules={mandatoryModules}\n          sections={compact([\n            diplomaUrl && {\n              type: 'diploma',\n              downloadUrl: diplomaUrl\n            },\n            badgeUrl && {\n              type: 'badge',\n              downloadUrl: badgeUrl\n            },\n            stars && {\n              type: 'stars',\n              stars\n            }\n          ])}\n        />\n        <AllCourses\n          content={certificationCourses}\n          filters={filters}\n          data-name=\"certification-courses\"\n        />\n      </div>\n    </div>\n  );\n};\n\nCertificationDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nCertificationDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  tag: PropTypes.string,\n  certificationRef: PropTypes.string.isRequired,\n  description: PropTypes.string.isRequired,\n  logoUrl: PropTypes.string,\n  metrics: PropTypes.shape({\n    progression: PropTypes.number,\n    stars: PropTypes.number,\n    mandatoryModules: PropTypes.number,\n    totalModules: PropTypes.number\n  }),\n  diplomaUrl: PropTypes.string,\n  badgeUrl: PropTypes.string,\n  ongoingCoursesAvailable: PropTypes.bool,\n  certificationCourses: PropTypes.shape(CardsGrid.propTypes),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default CertificationDetail;\n"],"mappings":"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"}

package/es/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/es/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/es/template/playlist-detail/index.js

@@ -25,7 +25,8 @@ const PlaylistDetail = (props, context) => {
     filters,
     sorting,
     onBackClick,
-    onContinueLearningClick
+    onContinueLearningClick,
+    bannerMicrolearningRuleAction = null
   } = props;
   const descriptionRef = useRef(null);
   const {
@@ -88,7 +89,8 @@ const PlaylistDetail = (props, context) => {
   })))), /*#__PURE__*/React.createElement(AllCourses, {
     content: playlistCourses,
     filters: filters,
-    sorting: sorting
+    sorting: sorting,
+    bannerMicrolearningRuleAction: bannerMicrolearningRuleAction
   })));
 };
 
@@ -109,7 +111,8 @@ PlaylistDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   }),
   sorting: PropTypes.shape(Select.propTypes),
   onBackClick: PropTypes.func,
-  onContinueLearningClick: PropTypes.func
+  onContinueLearningClick: PropTypes.func,
+  bannerMicrolearningRuleAction: PropTypes.func
 } : {};
 export default PlaylistDetail;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","useEffect","useRef","PropTypes","classnames","Markdown","Provider","Tag","Select","SelectOptionPropTypes","ButtonLinkIcon","Icon","CardsGrid","AllCourses","PlaylistDetailCover","ContinueLearningButton","style","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCoursesAvailable","playlistCourses","filters","sorting","onBackClick","onContinueLearningClick","descriptionRef","translate","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","truncate","backgroundContainer","container","backButton","ctaContainer","coverWrapper","showMoreWrapper","faSize","wrapperSize","continueLearningButton","contextTypes","skin","childContextTypes","propTypes","string","isRequired","images","bool","shape","onChange","func","options","arrayOf"],"sources":["../../../src/template/playlist-detail/index.js"],"sourcesContent":["import React, {useCallback, useState, useEffect, useRef} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport AllCourses from '../skill-detail/all-courses';\nimport PlaylistDetailCover from '../../molecule/playlist-detail-cover';\nimport {ContinueLearningButton} from '../skill-detail';\nimport style from './style.css';\n\nconst PlaylistDetail = (props, context) => {\n  const {\n    title,\n    coverImages,\n    playlistRef,\n    description,\n    ongoingCoursesAvailable,\n    playlistCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onContinueLearningClick\n  } = props;\n  const descriptionRef = useRef(null);\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  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={playlistRef}>\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 className={style.coverWrapper}>\n            <PlaylistDetailCover images={coverImages} />\n          </div>\n          <div>\n            <Tag label={translate('playlist')} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {isDescriptionTruncated ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {translate(showMore ? 'Show less' : 'Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{faSize: 14, wrapperSize: 16}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n            <div className={style.continueLearningButton}>\n              <ContinueLearningButton\n                ongoingCoursesAvailable={ongoingCoursesAvailable}\n                onClick={onContinueLearningClick}\n              />\n            </div>\n          </div>\n        </div>\n        <AllCourses content={playlistCourses} filters={filters} sorting={sorting} />\n      </div>\n    </div>\n  );\n};\n\nPlaylistDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nPlaylistDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  coverImages: PlaylistDetailCover.propTypes.images,\n  playlistRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  ongoingCoursesAvailable: PropTypes.bool,\n  playlistCourses: 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  onContinueLearningClick: PropTypes.func\n};\n\nexport default PlaylistDetail;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","useEffect","useRef","PropTypes","classnames","Markdown","Provider","Tag","Select","SelectOptionPropTypes","ButtonLinkIcon","Icon","CardsGrid","AllCourses","PlaylistDetailCover","ContinueLearningButton","style","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCoursesAvailable","playlistCourses","filters","sorting","onBackClick","onContinueLearningClick","bannerMicrolearningRuleAction","descriptionRef","translate","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","truncate","backgroundContainer","container","backButton","ctaContainer","coverWrapper","showMoreWrapper","faSize","wrapperSize","continueLearningButton","contextTypes","skin","childContextTypes","propTypes","string","isRequired","images","bool","shape","onChange","func","options","arrayOf"],"sources":["../../../src/template/playlist-detail/index.js"],"sourcesContent":["import React, {useCallback, useState, useEffect, useRef} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport AllCourses from '../skill-detail/all-courses';\nimport PlaylistDetailCover from '../../molecule/playlist-detail-cover';\nimport {ContinueLearningButton} from '../skill-detail';\nimport style from './style.css';\n\nconst PlaylistDetail = (props, context) => {\n  const {\n    title,\n    coverImages,\n    playlistRef,\n    description,\n    ongoingCoursesAvailable,\n    playlistCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onContinueLearningClick,\n    bannerMicrolearningRuleAction = null\n  } = props;\n  const descriptionRef = useRef(null);\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  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={playlistRef}>\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 className={style.coverWrapper}>\n            <PlaylistDetailCover images={coverImages} />\n          </div>\n          <div>\n            <Tag label={translate('playlist')} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {isDescriptionTruncated ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {translate(showMore ? 'Show less' : 'Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{faSize: 14, wrapperSize: 16}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n            <div className={style.continueLearningButton}>\n              <ContinueLearningButton\n                ongoingCoursesAvailable={ongoingCoursesAvailable}\n                onClick={onContinueLearningClick}\n              />\n            </div>\n          </div>\n        </div>\n        <AllCourses\n          content={playlistCourses}\n          filters={filters}\n          sorting={sorting}\n          bannerMicrolearningRuleAction={bannerMicrolearningRuleAction}\n        />\n      </div>\n    </div>\n  );\n};\n\nPlaylistDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nPlaylistDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  coverImages: PlaylistDetailCover.propTypes.images,\n  playlistRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  ongoingCoursesAvailable: PropTypes.bool,\n  playlistCourses: 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  onContinueLearningClick: PropTypes.func,\n  bannerMicrolearningRuleAction: PropTypes.func\n};\n\nexport default PlaylistDetail;\n"],"mappings":"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"}

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

@@ -109,6 +109,10 @@
   text-decoration: underline;
 }
 
+.bannerWrapper {
+  margin-bottom: 16px;
+}
+
 @media tablet {
   .searchAndSortSection {
     flex-direction: column;

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

@@ -74,6 +74,7 @@ declare namespace AllCourses {
             'aria-label': PropTypes.Requireable<string>;
             'aria-labelledby': PropTypes.Requireable<string>;
         }>>;
+        const bannerMicrolearningRuleAction: PropTypes.Requireable<(...args: any[]) => any>;
     }
 }
 import PropTypes from "prop-types";

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

@@ -1 +1 @@
-{"version":3,"file":"all-courses.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/all-courses.js"],"names":[],"mappings":";AAgDA,mEA2HC"}
+{"version":3,"file":"all-courses.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/all-courses.js"],"names":[],"mappings":";AAiDA,mEA0IC"}

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

@@ -15,6 +15,7 @@ import SearchForm from '../../molecule/search-form';
 import CardsGrid from '../../organism/cards-grid';
 import searchValueIncluded from '../../util/search-value-included';
 import InputSwitch from '../../atom/input-switch';
+import Banner from '../../molecule/banner';
 import style from './all-courses.css';
 
 const uncappedMap = _map.convert({
@@ -67,7 +68,8 @@ const AllCourses = (props, context) => {
     content,
     filters,
     sorting,
-    totalContents
+    totalContents,
+    bannerMicrolearningRuleAction
   } = props;
   const {
     options,
@@ -132,7 +134,17 @@ const AllCourses = (props, context) => {
     onChange: handleShowCompletedToggle
   }), sortView ? /*#__PURE__*/React.createElement("div", {
     className: style.sortWrapper
-  }, translate('sort_by'), sortView) : null)), /*#__PURE__*/React.createElement("div", {
+  }, translate('sort_by'), sortView) : null)), bannerMicrolearningRuleAction ? /*#__PURE__*/React.createElement("div", {
+    className: style.bannerWrapper
+  }, /*#__PURE__*/React.createElement(Banner, {
+    type: "info",
+    message: translate('banner_microlearning_rule_message'),
+    cta: [{
+      type: 'switch',
+      label: translate('banner_microlearning_rule_label'),
+      action: bannerMicrolearningRuleAction
+    }]
+  })) : null, /*#__PURE__*/React.createElement("div", {
     className: style.filterWrapper
   }, _size(options) > 2 ? uncappedMap((filterProps, index) => {
     const {
@@ -188,7 +200,8 @@ AllCourses.propTypes = process.env.NODE_ENV !== "production" ? {
     onChange: PropTypes.func,
     options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))
   }),
-  sorting: PropTypes.shape(Select.propTypes)
+  sorting: PropTypes.shape(Select.propTypes),
+  bannerMicrolearningRuleAction: PropTypes.func
 } : {};
 export default AllCourses;
 //# sourceMappingURL=all-courses.js.map