@coorpacademy/components 11.13.6 → 11.13.7-alpha.14

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { NovaSolidInterfaceFeedbackInterfaceAlertDiamond as AlertDiamond, NovaSolidApplicationsWindowUpload3 as WindowUpload, NovaLineSettingsCookie as Cookie, NovaSolidSpaceMoonRocket as MoonRocket } from '@coorpacademy/nova-icons';
+import { NovaSolidInterfaceFeedbackInterfaceAlertDiamond as AlertDiamond, NovaSolidApplicationsWindowUpload3 as WindowUpload, NovaLineSettingsCookie as Cookie, NovaSolidSpaceMoonRocket as MoonRocket, NovaLineStatusCheckCircle1 as CheckCircle1 } from '@coorpacademy/nova-icons';
 import map from 'lodash/fp/map';
 import Cta from '../../atom/button-link';
 import ButtonLinkIconOnly from '../../atom/button-link-icon-only';
@@ -26,7 +26,8 @@ const CMPopin = props => {
   const logo = {
     AlertDiamond,
     WindowUpload,
-    MoonRocket
+    MoonRocket,
+    CheckCircle1
   };
   const LogoComponent = logo[icon];
   const backgroundImageStyle = backgroundImageUrl ? {

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

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

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

@@ -47,7 +47,7 @@
 
 .popin {
   overflow: auto;
-  width: 500px;
+  width: 434px;
   flex-grow: 0;
   margin: 16px;
   padding: 16px 16px 20px 16px;
@@ -114,12 +114,12 @@
 
 .button {
   min-width: max-content;
-  width: 160px;
+  width: 161px;
   padding: 8px;
 }
 
 .largeButton {
-  width: 100%;
+  width: 75%;
   padding: 8px;
 }
 
@@ -150,6 +150,11 @@
   margin-top: 0px;
 }
 
+.descriptionText, .content, .message {
+  margin-left: 32px;
+  margin-right: 32px;
+}
+
 .cookieTitleContainer {
   align-items: center;
   display: flex;
@@ -278,29 +283,21 @@ a {
 }
 
 @media tablet {
-  .popin {
-    position: fixed;
-  }
-
   .popin {
     width: 80%;
+    overflow: hidden;
   }
 
   .buttonContainer {
     display: flex;
     flex-wrap: wrap-reverse;
-    margin: 48px 24px 32px 24px;
-    width: 85%;
+    margin: 12px 24px 32px 24px;
   }
   
-  .button {
+  .largeButton, .button , .titleContainer {
     width: 100%;
   }
 
-  .titleContainer {
-    width: 85%;
-  }
-
   .popinCookie {
     position: fixed;
     bottom: 10px;
@@ -316,34 +313,50 @@ a {
   }
 
   .popinCookie .largeButton {
-    padding: 8px 0px 0px 0px
+    padding: 8px 0px 0px 0px;
   }
   .popinCookie .message {
     padding: 24px 24px 0px 24px
   }
 
-  @media mobile {
-    .popin {
-      position: fixed;
-    }
-
-    .popin {
-      width: 80%;
-    }
-
-    .buttonContainer {
-      display: flex;
-      margin: 48px 24px 32px 24px;
-      width: 85%;
-    }
-    
-    .button {
-      width: 100%;
-    }
-
-    .titleContainer {
-      width: 85%;
-    }
+  .descriptionText, .content, .message {
+    margin-left: 16px;
+    margin-right: 16px;
+  }
+}
+
+@media mobile {
+  .background {
+    padding: 0;
+  }
+
+  .popin {
+    width: 80%;
+    overflow: hidden;
+  }
+
+  .buttonContainer {
+    display: flex;
+    margin: 12px 16px 32px 16px;
+  }
+  
+  .button {
+    width: 100%;
+  }
+
+  .titleContainer {
+    width: 100%;
+    margin-left: 16px;
+    margin-right: 16px;
+  }
+
+  .content, .message, .descriptionText {
+    margin-left: 16px;
+    margin-right: 16px;
+  }
+  .largeButton { 
+    margin-left: 32px;
+    margin-right: 32px;
   }
 }
 
@@ -355,7 +368,6 @@ button {
 }
 
 _:-ms-fullscreen,
-.descriptionText,
 .buttonContainer {
   width: 85%;
 }

package/es/template/external-course/index.d.ts

@@ -1,29 +1,82 @@
 export default ExternalCourse;
-declare class ExternalCourse extends React.Component<any, any, any> {
-    static propTypes: {
-        name: PropTypes.Requireable<string>;
-        type: PropTypes.Requireable<string>;
-        url: PropTypes.Validator<string>;
-        quit: PropTypes.Requireable<PropTypes.InferProps<{
+declare function ExternalCourse(props: any, context: any): JSX.Element;
+declare namespace ExternalCourse {
+    namespace propTypes {
+        const name: PropTypes.Requireable<string>;
+        const type: PropTypes.Requireable<string>;
+        const url: PropTypes.Validator<string>;
+        const quit: PropTypes.Requireable<PropTypes.InferProps<{
             label: PropTypes.Validator<string>;
             onClick: PropTypes.Requireable<(...args: any[]) => any>;
         }>>;
-        complete: PropTypes.Requireable<PropTypes.InferProps<{
+        const complete: PropTypes.Requireable<PropTypes.InferProps<{
             label: PropTypes.Validator<string>;
             disabled: PropTypes.Requireable<boolean>;
             onClick: PropTypes.Requireable<(...args: any[]) => any>;
         }>>;
-        warning: PropTypes.Requireable<PropTypes.InferProps<{
+        const warning: PropTypes.Requireable<PropTypes.InferProps<{
             label: PropTypes.Validator<string>;
             onClick: PropTypes.Requireable<(...args: any[]) => any>;
         }>>;
-        loading: PropTypes.Requireable<boolean>;
-        backgroundImageUrl: PropTypes.Requireable<string>;
-        contentType: PropTypes.Requireable<string>;
-        mode: PropTypes.Requireable<string>;
-    };
-    static contextTypes: {
-        skin: PropTypes.Requireable<PropTypes.InferProps<{
+        const loading: PropTypes.Requireable<boolean>;
+        const backgroundImageUrl: PropTypes.Requireable<string>;
+        const contentType: PropTypes.Requireable<string>;
+        const mode: PropTypes.Requireable<string>;
+        const closePopin: PropTypes.Requireable<PropTypes.InferProps<{
+            content: PropTypes.Requireable<string>;
+            mode: PropTypes.Requireable<string>;
+            header: PropTypes.Requireable<string>;
+            firstButton: PropTypes.Requireable<PropTypes.InferProps<{
+                label: PropTypes.Requireable<string>;
+                handleOnclick: PropTypes.Requireable<(...args: any[]) => any>;
+                'aria-label': PropTypes.Requireable<string>;
+                largeButton: PropTypes.Requireable<boolean>;
+                type: PropTypes.Requireable<string>;
+                customStyle: PropTypes.Requireable<PropTypes.InferProps<{}>>;
+            }>>;
+            secondButton: PropTypes.Requireable<PropTypes.InferProps<{
+                label: PropTypes.Requireable<string>;
+                handleOnclick: PropTypes.Requireable<(...args: any[]) => any>;
+                type: PropTypes.Requireable<string>;
+                'aria-label': PropTypes.Requireable<string>;
+                largeButton: PropTypes.Requireable<boolean>;
+                customStyle: PropTypes.Requireable<PropTypes.InferProps<{}>>;
+            }>>;
+            thirdButton: PropTypes.Requireable<PropTypes.InferProps<{
+                label: PropTypes.Requireable<string>;
+                handleOnclick: PropTypes.Requireable<(...args: any[]) => any>;
+                type: PropTypes.Requireable<string>;
+                'aria-label': PropTypes.Requireable<string>;
+                largeButton: PropTypes.Requireable<boolean>;
+                customStyle: PropTypes.Requireable<PropTypes.InferProps<{}>>;
+            }>>;
+            onClose: PropTypes.Requireable<(...args: any[]) => any>;
+            icon: PropTypes.Requireable<string>;
+            backgroundImageUrl: PropTypes.Requireable<string>;
+            descriptionText: PropTypes.Requireable<string>;
+            cookieTitle: PropTypes.Requireable<string>;
+            descriptionBtnTxt: PropTypes.Requireable<string>;
+            listBtnSwicth: PropTypes.Requireable<(PropTypes.InferProps<{
+                title: PropTypes.Requireable<string>;
+                name: PropTypes.Requireable<string>;
+                id: PropTypes.Requireable<string>;
+                value: PropTypes.Requireable<boolean>;
+                disabled: PropTypes.Requireable<boolean>;
+                onChange: PropTypes.Requireable<(...args: any[]) => any>;
+                description: PropTypes.Requireable<string>;
+                'aria-labelledby': PropTypes.Requireable<string>;
+                'aria-label': PropTypes.Requireable<string>;
+                modified: PropTypes.Requireable<boolean>;
+                titlePosition: PropTypes.Requireable<string>;
+                theme: PropTypes.Requireable<string>;
+                details: PropTypes.Requireable<string>;
+                'data-name': PropTypes.Requireable<string>;
+                requiredSelection: PropTypes.Requireable<boolean>;
+            }> | null | undefined)[]>;
+        }>>;
+    }
+    namespace contextTypes {
+        const skin: PropTypes.Requireable<PropTypes.InferProps<{
             common: PropTypes.Requireable<{
                 [x: string]: any;
             }>;
@@ -44,12 +97,7 @@ declare class ExternalCourse extends React.Component<any, any, any> {
                 [x: string]: any;
             }>;
         }>>;
-    };
-    constructor(props: any);
-    constructor(props: any, context: any);
-    handleOnClick: (field: any) => (e: any) => any;
-    render(): JSX.Element;
+    }
 }
-import React from "react";
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/es/template/external-course/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/external-course/index.js"],"names":[],"mappings":";AAmBA;IACE;;;;;;;;;;;;;;;;;;;;;MAqBE;IAEF;;;;;;;;;;;;;;;;;;;;;;MAEE;IA4Hqsd,wBAA8C;IAAA,sCAAyJ;IA1H94d,+CAKE;IAEF,sBA+GC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/external-course/index.js"],"names":[],"mappings":";AAoBA,uEAuIC"}

package/es/template/external-course/index.js

@@ -3,8 +3,11 @@ import _isNil from "lodash/fp/isNil";
 import _identity from "lodash/fp/identity";
 import _keys from "lodash/fp/keys";
 import _getOr from "lodash/fp/getOr";
-import _get from "lodash/fp/get";
-import React from 'react';
+import _noop from "lodash/fp/noop";
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useCallback, useMemo } from 'react';
 import { NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionIcon } from '@coorpacademy/nova-icons';
 import { convert } from 'css-color-function';
 import classnames from 'classnames';
@@ -14,6 +17,7 @@ import Provider from '../../atom/provider';
 import Loader from '../../atom/loader';
 import Button from '../../atom/button';
 import ExternalContentViewer from '../../molecule/external-content-viewer';
+import CmPopin from '../../molecule/cm-popin';
 import style from './style.css';
 const defaultWrapperStyle = {
   default: style.default,
@@ -21,42 +25,40 @@ const defaultWrapperStyle = {
   mobile: style.default
 };
 
-class ExternalCourse extends React.Component {
-  constructor(...args) {
-    super(...args);
+const ExternalCourse = (props, context) => {
+  const {
+    name,
+    type,
+    url,
+    quit,
+    complete,
+    warning,
+    loading,
+    backgroundImageUrl,
+    contentType,
+    mode = 'default',
+    closePopin
+  } = props;
+  const {
+    skin
+  } = context;
+
+  const primary = _getOr('#00B0FF', 'common.primary', skin);
 
-    this.handleOnClick = field => e => {
+  const IconType = EXTERNAL_CONTENT_ICONS[type].icon;
+  const IconColor = EXTERNAL_CONTENT_ICONS[type].color;
+  const handleOnClick = useCallback(field => {
+    const {
+      onClick = _noop
+    } = field;
+    return e => {
       e.stopPropagation();
       e.preventDefault();
-
-      const onClick = _get('onClick', field);
-
-      return onClick && onClick(e);
+      return onClick(e);
     };
-  }
-
-  render() {
-    const {
-      name,
-      type,
-      url,
-      warning,
-      complete,
-      quit,
-      loading,
-      backgroundImageUrl,
-      contentType,
-      mode = 'default'
-    } = this.props;
-    const {
-      skin
-    } = this.context;
-
-    const primary = _getOr('#00B0FF', 'common.primary', skin);
-
-    const IconType = EXTERNAL_CONTENT_ICONS[type].icon;
-    const IconColor = EXTERNAL_CONTENT_ICONS[type].color;
-    const mainContentSlot = loading ? /*#__PURE__*/React.createElement("div", {
+  }, []);
+  const mainContentSlot = useMemo(() => {
+    return loading ? /*#__PURE__*/React.createElement("div", {
       className: style.loader
     }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(ExternalContentViewer, {
       url: url,
@@ -64,10 +66,12 @@ class ExternalCourse extends React.Component {
       backgroundImageUrl: backgroundImageUrl,
       contentType: contentType
     });
-    const completeButton = !_isNil(complete) ? /*#__PURE__*/React.createElement(Button, {
+  }, [loading, url, mode, contentType, backgroundImageUrl]);
+  const completeButton = useMemo(() => {
+    return !_isNil(complete) ? /*#__PURE__*/React.createElement(Button, {
       type: "button",
       disabled: loading ? true : complete.disabled,
-      onClick: loading ? _identity : this.handleOnClick(complete),
+      onClick: loading ? _identity : handleOnClick(complete),
       submitValue: complete.label,
       style: {
         backgroundColor: complete.disabled || loading ? convert(`color(${primary} a(-50%))`) : primary,
@@ -75,23 +79,29 @@ class ExternalCourse extends React.Component {
       },
       className: classnames(style.completeCta, complete.disabled || loading ? style.disabled : null, loading ? style.loading : null)
     }) : null;
-    const warningButton = !_isNil(warning) ? /*#__PURE__*/React.createElement("div", {
+  }, [complete, loading, primary, handleOnClick]);
+  const warningButton = useMemo(() => {
+    return !_isNil(warning) ? /*#__PURE__*/React.createElement("div", {
       className: style.leftSection
     }, /*#__PURE__*/React.createElement("div", {
-      onClick: this.handleOnClick(warning),
+      onClick: handleOnClick(warning),
       className: classnames(style.iconLabel, style.link)
     }, /*#__PURE__*/React.createElement(QuestionIcon, {
       className: style.iconQuestion,
       width: 24,
       height: 24
     }), /*#__PURE__*/React.createElement("span", null, warning.label))) : null;
-    const quitButton = !_isNil(quit) ? /*#__PURE__*/React.createElement("div", {
+  }, [warning, handleOnClick]);
+  const quitButton = useMemo(() => {
+    return !_isNil(quit) ? /*#__PURE__*/React.createElement("div", {
       className: style.leftSection
     }, /*#__PURE__*/React.createElement("span", {
       className: classnames(style.quitCta, loading ? style.loading : null),
-      onClick: loading ? _identity : this.handleOnClick(quit)
+      onClick: loading ? _identity : handleOnClick(quit)
     }, quit.label)) : null;
-    const titleSection = !_isNil(name) ? /*#__PURE__*/React.createElement("div", {
+  }, [quit, loading, handleOnClick]);
+  const titleSection = useMemo(() => {
+    return !_isNil(name) ? /*#__PURE__*/React.createElement("div", {
       className: classnames(style.iconLabel, style.title)
     }, /*#__PURE__*/React.createElement("div", {
       className: style.oval,
@@ -107,26 +117,29 @@ class ExternalCourse extends React.Component {
         __html: name
       }
     })) : null;
-    const header = !_isNil(quit) || !_isEmpty(name) ? /*#__PURE__*/React.createElement("div", {
+  }, [name, IconColor]);
+  const header = useMemo(() => {
+    !_isNil(quit) || !_isEmpty(name) ? /*#__PURE__*/React.createElement("div", {
       className: style.header
     }, quitButton, titleSection, _isNil(quit) ? null : /*#__PURE__*/React.createElement("div", {
       className: style.rightSection
     })) : null;
-    const footer = !_isNil(warning) || !_isNil(complete) ? /*#__PURE__*/React.createElement("div", {
+  }, [name, titleSection, quit, quitButton]);
+  const footer = useMemo(() => {
+    !_isNil(warning) || !_isNil(complete) ? /*#__PURE__*/React.createElement("div", {
       className: style.footer
     }, warningButton, completeButton, _isNil(warning) ? null : /*#__PURE__*/React.createElement("div", {
       className: style.rightSection
     })) : null;
-    return /*#__PURE__*/React.createElement("div", {
-      className: defaultWrapperStyle[mode]
-    }, header, mainContentSlot, footer);
-  }
-
-}
-
-ExternalCourse.contextTypes = {
-  skin: Provider.childContextTypes.skin
+  }, [warning, warningButton, complete, completeButton]);
+  const popin = useMemo(() => {
+    return !_isNil(closePopin) ? /*#__PURE__*/React.createElement(CmPopin, closePopin) : null;
+  }, [closePopin]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: defaultWrapperStyle[mode]
+  }, header, popin, mainContentSlot, footer);
 };
+
 ExternalCourse.propTypes = process.env.NODE_ENV !== "production" ? {
   name: PropTypes.string,
   type: PropTypes.oneOf(_keys(EXTERNAL_CONTENT_ICONS)),
@@ -147,7 +160,11 @@ ExternalCourse.propTypes = process.env.NODE_ENV !== "production" ? {
   loading: PropTypes.bool,
   backgroundImageUrl: PropTypes.string,
   contentType: PropTypes.string,
-  mode: PropTypes.string
+  mode: PropTypes.string,
+  closePopin: PropTypes.shape(_extends({}, CmPopin.propTypes))
 } : {};
+ExternalCourse.contextTypes = {
+  skin: Provider.childContextTypes.skin
+};
 export default ExternalCourse;
 //# sourceMappingURL=index.js.map

package/es/template/external-course/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","NovaSolidInterfaceFeedbackInterfaceQuestionMark","QuestionIcon","convert","classnames","PropTypes","EXTERNAL_CONTENT_ICONS","Provider","Loader","Button","ExternalContentViewer","style","defaultWrapperStyle","default","cockpit","defaultCockpit","mobile","ExternalCourse","Component","handleOnClick","field","e","stopPropagation","preventDefault","onClick","render","name","type","url","warning","complete","quit","loading","backgroundImageUrl","contentType","mode","props","skin","context","primary","IconType","icon","IconColor","color","mainContentSlot","loader","completeButton","disabled","label","backgroundColor","cursor","completeCta","warningButton","leftSection","iconLabel","link","iconQuestion","quitButton","quitCta","titleSection","title","oval","iconHeader","innerHTML","__html","header","rightSection","footer","contextTypes","childContextTypes","propTypes","string","oneOf","isRequired","shape","func","bool"],"sources":["../../../src/template/external-course/index.js"],"sourcesContent":["import React from 'react';\nimport {NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionIcon} from '@coorpacademy/nova-icons';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, getOr, keys, identity, isNil, isEmpty} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport {EXTERNAL_CONTENT_ICONS} from '../../util/external-content';\nimport Provider from '../../atom/provider';\nimport Loader from '../../atom/loader';\nimport Button from '../../atom/button';\nimport ExternalContentViewer from '../../molecule/external-content-viewer';\nimport style from './style.css';\n\nconst defaultWrapperStyle = {\n  default: style.default,\n  cockpit: style.defaultCockpit,\n  mobile: style.default\n};\n\nclass ExternalCourse extends React.Component {\n  static propTypes = {\n    name: PropTypes.string,\n    type: PropTypes.oneOf(keys(EXTERNAL_CONTENT_ICONS)),\n    url: PropTypes.string.isRequired,\n    quit: PropTypes.shape({\n      label: PropTypes.string.isRequired,\n      onClick: PropTypes.func\n    }),\n    complete: PropTypes.shape({\n      label: PropTypes.string.isRequired,\n      disabled: PropTypes.bool,\n      onClick: PropTypes.func\n    }),\n    warning: PropTypes.shape({\n      label: PropTypes.string.isRequired,\n      onClick: PropTypes.func\n    }),\n    loading: PropTypes.bool,\n    backgroundImageUrl: PropTypes.string,\n    contentType: PropTypes.string,\n    mode: PropTypes.string\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  handleOnClick = field => e => {\n    e.stopPropagation();\n    e.preventDefault();\n    const onClick = get('onClick', field);\n    return onClick && onClick(e);\n  };\n\n  render() {\n    const {\n      name,\n      type,\n      url,\n      warning,\n      complete,\n      quit,\n      loading,\n      backgroundImageUrl,\n      contentType,\n      mode = 'default'\n    } = this.props;\n    const {skin} = this.context;\n    const primary = getOr('#00B0FF', 'common.primary', skin);\n    const IconType = EXTERNAL_CONTENT_ICONS[type].icon;\n    const IconColor = EXTERNAL_CONTENT_ICONS[type].color;\n\n    const mainContentSlot = loading ? (\n      <div className={style.loader}>\n        <Loader />\n      </div>\n    ) : (\n      <ExternalContentViewer\n        url={url}\n        mode={mode}\n        backgroundImageUrl={backgroundImageUrl}\n        contentType={contentType}\n      />\n    );\n\n    const completeButton = !isNil(complete) ? (\n      <Button\n        type=\"button\"\n        disabled={loading ? true : complete.disabled}\n        onClick={loading ? identity : this.handleOnClick(complete)}\n        submitValue={complete.label}\n        style={{\n          backgroundColor:\n            complete.disabled || loading ? convert(`color(${primary} a(-50%))`) : primary,\n          cursor: loading ? 'progress' : 'pointer'\n        }}\n        className={classnames(\n          style.completeCta,\n          complete.disabled || loading ? style.disabled : null,\n          loading ? style.loading : null\n        )}\n      />\n    ) : null;\n\n    const warningButton = !isNil(warning) ? (\n      <div className={style.leftSection}>\n        <div\n          onClick={this.handleOnClick(warning)}\n          className={classnames(style.iconLabel, style.link)}\n        >\n          <QuestionIcon className={style.iconQuestion} width={24} height={24} />\n          <span>{warning.label}</span>\n        </div>\n      </div>\n    ) : null;\n\n    const quitButton = !isNil(quit) ? (\n      <div className={style.leftSection}>\n        <span\n          className={classnames(style.quitCta, loading ? style.loading : null)}\n          onClick={loading ? identity : this.handleOnClick(quit)}\n        >\n          {quit.label}\n        </span>\n      </div>\n    ) : null;\n\n    const titleSection = !isNil(name) ? (\n      <div className={classnames(style.iconLabel, style.title)}>\n        <div className={style.oval} style={{backgroundColor: IconColor}}>\n          <IconType className={style.iconHeader} />\n        </div>\n        <span\n          className={style.innerHTML}\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{__html: name}}\n        />\n      </div>\n    ) : null;\n\n    const header =\n      !isNil(quit) || !isEmpty(name) ? (\n        <div className={style.header}>\n          {quitButton}\n          {titleSection}\n          {isNil(quit) ? null : <div className={style.rightSection} />}\n        </div>\n      ) : null;\n\n    const footer =\n      !isNil(warning) || !isNil(complete) ? (\n        <div className={style.footer}>\n          {warningButton}\n          {completeButton}\n          {isNil(warning) ? null : <div className={style.rightSection} />}\n        </div>\n      ) : null;\n\n    return (\n      <div className={defaultWrapperStyle[mode]}>\n        {header}\n        {mainContentSlot}\n        {footer}\n      </div>\n    );\n  }\n}\n\nexport default ExternalCourse;\n"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,+CAA+C,IAAIC,YAA3D,QAA8E,0BAA9E;AACA,SAAQC,OAAR,QAAsB,oBAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAAQC,sBAAR,QAAqC,6BAArC;AACA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,qBAAP,MAAkC,wCAAlC;AACA,OAAOC,KAAP,MAAkB,aAAlB;AAEA,MAAMC,mBAAmB,GAAG;EAC1BC,OAAO,EAAEF,KAAK,CAACE,OADW;EAE1BC,OAAO,EAAEH,KAAK,CAACI,cAFW;EAG1BC,MAAM,EAAEL,KAAK,CAACE;AAHY,CAA5B;;AAMA,MAAMI,cAAN,SAA6BjB,KAAK,CAACkB,SAAnC,CAA6C;EAAA;IAAA;;IAAA,KA4B3CC,aA5B2C,GA4B3BC,KAAK,IAAIC,CAAC,IAAI;MAC5BA,CAAC,CAACC,eAAF;MACAD,CAAC,CAACE,cAAF;;MACA,MAAMC,OAAO,GAAG,KAAI,SAAJ,EAAeJ,KAAf,CAAhB;;MACA,OAAOI,OAAO,IAAIA,OAAO,CAACH,CAAD,CAAzB;IACD,CAjC0C;EAAA;;EAmC3CI,MAAM,GAAG;IACP,MAAM;MACJC,IADI;MAEJC,IAFI;MAGJC,GAHI;MAIJC,OAJI;MAKJC,QALI;MAMJC,IANI;MAOJC,OAPI;MAQJC,kBARI;MASJC,WATI;MAUJC,IAAI,GAAG;IAVH,IAWF,KAAKC,KAXT;IAYA,MAAM;MAACC;IAAD,IAAS,KAAKC,OAApB;;IACA,MAAMC,OAAO,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCF,IAAnC,CAAhB;;IACA,MAAMG,QAAQ,GAAGlC,sBAAsB,CAACqB,IAAD,CAAtB,CAA6Bc,IAA9C;IACA,MAAMC,SAAS,GAAGpC,sBAAsB,CAACqB,IAAD,CAAtB,CAA6BgB,KAA/C;IAEA,MAAMC,eAAe,GAAGZ,OAAO,gBAC7B;MAAK,SAAS,EAAErB,KAAK,CAACkC;IAAtB,gBACE,oBAAC,MAAD,OADF,CAD6B,gBAK7B,oBAAC,qBAAD;MACE,GAAG,EAAEjB,GADP;MAEE,IAAI,EAAEO,IAFR;MAGE,kBAAkB,EAAEF,kBAHtB;MAIE,WAAW,EAAEC;IAJf,EALF;IAaA,MAAMY,cAAc,GAAG,CAAC,OAAMhB,QAAN,CAAD,gBACrB,oBAAC,MAAD;MACE,IAAI,EAAC,QADP;MAEE,QAAQ,EAAEE,OAAO,GAAG,IAAH,GAAUF,QAAQ,CAACiB,QAFtC;MAGE,OAAO,EAAEf,OAAO,eAAc,KAAKb,aAAL,CAAmBW,QAAnB,CAHhC;MAIE,WAAW,EAAEA,QAAQ,CAACkB,KAJxB;MAKE,KAAK,EAAE;QACLC,eAAe,EACbnB,QAAQ,CAACiB,QAAT,IAAqBf,OAArB,GAA+B7B,OAAO,CAAE,SAAQoC,OAAQ,WAAlB,CAAtC,GAAsEA,OAFnE;QAGLW,MAAM,EAAElB,OAAO,GAAG,UAAH,GAAgB;MAH1B,CALT;MAUE,SAAS,EAAE5B,UAAU,CACnBO,KAAK,CAACwC,WADa,EAEnBrB,QAAQ,CAACiB,QAAT,IAAqBf,OAArB,GAA+BrB,KAAK,CAACoC,QAArC,GAAgD,IAF7B,EAGnBf,OAAO,GAAGrB,KAAK,CAACqB,OAAT,GAAmB,IAHP;IAVvB,EADqB,GAiBnB,IAjBJ;IAmBA,MAAMoB,aAAa,GAAG,CAAC,OAAMvB,OAAN,CAAD,gBACpB;MAAK,SAAS,EAAElB,KAAK,CAAC0C;IAAtB,gBACE;MACE,OAAO,EAAE,KAAKlC,aAAL,CAAmBU,OAAnB,CADX;MAEE,SAAS,EAAEzB,UAAU,CAACO,KAAK,CAAC2C,SAAP,EAAkB3C,KAAK,CAAC4C,IAAxB;IAFvB,gBAIE,oBAAC,YAAD;MAAc,SAAS,EAAE5C,KAAK,CAAC6C,YAA/B;MAA6C,KAAK,EAAE,EAApD;MAAwD,MAAM,EAAE;IAAhE,EAJF,eAKE,kCAAO3B,OAAO,CAACmB,KAAf,CALF,CADF,CADoB,GAUlB,IAVJ;IAYA,MAAMS,UAAU,GAAG,CAAC,OAAM1B,IAAN,CAAD,gBACjB;MAAK,SAAS,EAAEpB,KAAK,CAAC0C;IAAtB,gBACE;MACE,SAAS,EAAEjD,UAAU,CAACO,KAAK,CAAC+C,OAAP,EAAgB1B,OAAO,GAAGrB,KAAK,CAACqB,OAAT,GAAmB,IAA1C,CADvB;MAEE,OAAO,EAAEA,OAAO,eAAc,KAAKb,aAAL,CAAmBY,IAAnB;IAFhC,GAIGA,IAAI,CAACiB,KAJR,CADF,CADiB,GASf,IATJ;IAWA,MAAMW,YAAY,GAAG,CAAC,OAAMjC,IAAN,CAAD,gBACnB;MAAK,SAAS,EAAEtB,UAAU,CAACO,KAAK,CAAC2C,SAAP,EAAkB3C,KAAK,CAACiD,KAAxB;IAA1B,gBACE;MAAK,SAAS,EAAEjD,KAAK,CAACkD,IAAtB;MAA4B,KAAK,EAAE;QAACZ,eAAe,EAAEP;MAAlB;IAAnC,gBACE,oBAAC,QAAD;MAAU,SAAS,EAAE/B,KAAK,CAACmD;IAA3B,EADF,CADF,eAIE;MACE,SAAS,EAAEnD,KAAK,CAACoD,SADnB,CAEE;MAFF;MAGE,uBAAuB,EAAE;QAACC,MAAM,EAAEtC;MAAT;IAH3B,EAJF,CADmB,GAWjB,IAXJ;IAaA,MAAMuC,MAAM,GACV,CAAC,OAAMlC,IAAN,CAAD,IAAgB,CAAC,SAAQL,IAAR,CAAjB,gBACE;MAAK,SAAS,EAAEf,KAAK,CAACsD;IAAtB,GACGR,UADH,EAEGE,YAFH,EAGG,OAAM5B,IAAN,IAAc,IAAd,gBAAqB;MAAK,SAAS,EAAEpB,KAAK,CAACuD;IAAtB,EAHxB,CADF,GAMI,IAPN;IASA,MAAMC,MAAM,GACV,CAAC,OAAMtC,OAAN,CAAD,IAAmB,CAAC,OAAMC,QAAN,CAApB,gBACE;MAAK,SAAS,EAAEnB,KAAK,CAACwD;IAAtB,GACGf,aADH,EAEGN,cAFH,EAGG,OAAMjB,OAAN,IAAiB,IAAjB,gBAAwB;MAAK,SAAS,EAAElB,KAAK,CAACuD;IAAtB,EAH3B,CADF,GAMI,IAPN;IASA,oBACE;MAAK,SAAS,EAAEtD,mBAAmB,CAACuB,IAAD;IAAnC,GACG8B,MADH,EAEGrB,eAFH,EAGGuB,MAHH,CADF;EAOD;;AAlJ0C;;AAAvClD,c,CAwBGmD,Y,GAAe;EACpB/B,IAAI,EAAE9B,QAAQ,CAAC8D,iBAAT,CAA2BhC;AADb,C;AAxBlBpB,c,CACGqD,S,2CAAY;EACjB5C,IAAI,EAAErB,SAAS,CAACkE,MADC;EAEjB5C,IAAI,EAAEtB,SAAS,CAACmE,KAAV,CAAgB,MAAKlE,sBAAL,CAAhB,CAFW;EAGjBsB,GAAG,EAAEvB,SAAS,CAACkE,MAAV,CAAiBE,UAHL;EAIjB1C,IAAI,EAAE1B,SAAS,CAACqE,KAAV,CAAgB;IACpB1B,KAAK,EAAE3C,SAAS,CAACkE,MAAV,CAAiBE,UADJ;IAEpBjD,OAAO,EAAEnB,SAAS,CAACsE;EAFC,CAAhB,CAJW;EAQjB7C,QAAQ,EAAEzB,SAAS,CAACqE,KAAV,CAAgB;IACxB1B,KAAK,EAAE3C,SAAS,CAACkE,MAAV,CAAiBE,UADA;IAExB1B,QAAQ,EAAE1C,SAAS,CAACuE,IAFI;IAGxBpD,OAAO,EAAEnB,SAAS,CAACsE;EAHK,CAAhB,CARO;EAajB9C,OAAO,EAAExB,SAAS,CAACqE,KAAV,CAAgB;IACvB1B,KAAK,EAAE3C,SAAS,CAACkE,MAAV,CAAiBE,UADD;IAEvBjD,OAAO,EAAEnB,SAAS,CAACsE;EAFI,CAAhB,CAbQ;EAiBjB3C,OAAO,EAAE3B,SAAS,CAACuE,IAjBF;EAkBjB3C,kBAAkB,EAAE5B,SAAS,CAACkE,MAlBb;EAmBjBrC,WAAW,EAAE7B,SAAS,CAACkE,MAnBN;EAoBjBpC,IAAI,EAAE9B,SAAS,CAACkE;AApBC,C;AAoJrB,eAAetD,cAAf"}
+{"version":3,"file":"index.js","names":["React","useCallback","useMemo","NovaSolidInterfaceFeedbackInterfaceQuestionMark","QuestionIcon","convert","classnames","PropTypes","EXTERNAL_CONTENT_ICONS","Provider","Loader","Button","ExternalContentViewer","CmPopin","style","defaultWrapperStyle","default","cockpit","defaultCockpit","mobile","ExternalCourse","props","context","name","type","url","quit","complete","warning","loading","backgroundImageUrl","contentType","mode","closePopin","skin","primary","IconType","icon","IconColor","color","handleOnClick","field","onClick","e","stopPropagation","preventDefault","mainContentSlot","loader","completeButton","disabled","label","backgroundColor","cursor","completeCta","warningButton","leftSection","iconLabel","link","iconQuestion","quitButton","quitCta","titleSection","title","oval","iconHeader","innerHTML","__html","header","rightSection","footer","popin","propTypes","string","oneOf","isRequired","shape","func","bool","contextTypes","childContextTypes"],"sources":["../../../src/template/external-course/index.js"],"sourcesContent":["import React, {useCallback, useMemo} from 'react';\nimport {NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionIcon} from '@coorpacademy/nova-icons';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {noop, getOr, keys, identity, isNil, isEmpty} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport {EXTERNAL_CONTENT_ICONS} from '../../util/external-content';\nimport Provider from '../../atom/provider';\nimport Loader from '../../atom/loader';\nimport Button from '../../atom/button';\nimport ExternalContentViewer from '../../molecule/external-content-viewer';\nimport CmPopin from '../../molecule/cm-popin';\nimport style from './style.css';\n\nconst defaultWrapperStyle = {\n  default: style.default,\n  cockpit: style.defaultCockpit,\n  mobile: style.default\n};\n\nconst ExternalCourse = (props, context) => {\n  const {\n    name,\n    type,\n    url,\n    quit,\n    complete,\n    warning,\n    loading,\n    backgroundImageUrl,\n    contentType,\n    mode = 'default',\n    closePopin\n  } = props;\n  const {skin} = context;\n  const primary = getOr('#00B0FF', 'common.primary', skin);\n  const IconType = EXTERNAL_CONTENT_ICONS[type].icon;\n  const IconColor = EXTERNAL_CONTENT_ICONS[type].color;\n\n  const handleOnClick = useCallback(field => {\n    const {onClick = noop} = field;\n    return e => {\n      e.stopPropagation();\n      e.preventDefault();\n      return onClick(e);\n    };\n  }, []);\n\n  const mainContentSlot = useMemo(() => {\n    return loading ? (\n      <div className={style.loader}>\n        <Loader />\n      </div>\n    ) : (\n      <ExternalContentViewer\n        url={url}\n        mode={mode}\n        backgroundImageUrl={backgroundImageUrl}\n        contentType={contentType}\n      />\n    );\n  }, [loading, url, mode, contentType, backgroundImageUrl]);\n\n  const completeButton = useMemo(() => {\n    return !isNil(complete) ? (\n      <Button\n        type=\"button\"\n        disabled={loading ? true : complete.disabled}\n        onClick={loading ? identity : handleOnClick(complete)}\n        submitValue={complete.label}\n        style={{\n          backgroundColor:\n            complete.disabled || loading ? convert(`color(${primary} a(-50%))`) : primary,\n          cursor: loading ? 'progress' : 'pointer'\n        }}\n        className={classnames(\n          style.completeCta,\n          complete.disabled || loading ? style.disabled : null,\n          loading ? style.loading : null\n        )}\n      />\n    ) : null;\n  }, [complete, loading, primary, handleOnClick]);\n\n  const warningButton = useMemo(() => {\n    return !isNil(warning) ? (\n      <div className={style.leftSection}>\n        <div onClick={handleOnClick(warning)} className={classnames(style.iconLabel, style.link)}>\n          <QuestionIcon className={style.iconQuestion} width={24} height={24} />\n          <span>{warning.label}</span>\n        </div>\n      </div>\n    ) : null;\n  }, [warning, handleOnClick]);\n\n  const quitButton = useMemo(() => {\n    return !isNil(quit) ? (\n      <div className={style.leftSection}>\n        <span\n          className={classnames(style.quitCta, loading ? style.loading : null)}\n          onClick={loading ? identity : handleOnClick(quit)}\n        >\n          {quit.label}\n        </span>\n      </div>\n    ) : null;\n  }, [quit, loading, handleOnClick]);\n\n  const titleSection = useMemo(() => {\n    return !isNil(name) ? (\n      <div className={classnames(style.iconLabel, style.title)}>\n        <div className={style.oval} style={{backgroundColor: IconColor}}>\n          <IconType className={style.iconHeader} />\n        </div>\n        <span\n          className={style.innerHTML}\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{__html: name}}\n        />\n      </div>\n    ) : null;\n  }, [name, IconColor]);\n\n  const header = useMemo(() => {\n    !isNil(quit) || !isEmpty(name) ? (\n      <div className={style.header}>\n        {quitButton}\n        {titleSection}\n        {isNil(quit) ? null : <div className={style.rightSection} />}\n      </div>\n    ) : null;\n  }, [name, titleSection, quit, quitButton]);\n\n  const footer = useMemo(() => {\n    !isNil(warning) || !isNil(complete) ? (\n      <div className={style.footer}>\n        {warningButton}\n        {completeButton}\n        {isNil(warning) ? null : <div className={style.rightSection} />}\n      </div>\n    ) : null;\n  }, [warning, warningButton, complete, completeButton]);\n\n  const popin = useMemo(() => {\n    return !isNil(closePopin) ? <CmPopin {...closePopin} /> : null;\n  }, [closePopin]);\n\n  return (\n    <div className={defaultWrapperStyle[mode]}>\n      {header}\n      {popin}\n      {mainContentSlot}\n      {footer}\n    </div>\n  );\n};\n\nExternalCourse.propTypes = {\n  name: PropTypes.string,\n  type: PropTypes.oneOf(keys(EXTERNAL_CONTENT_ICONS)),\n  url: PropTypes.string.isRequired,\n  quit: PropTypes.shape({\n    label: PropTypes.string.isRequired,\n    onClick: PropTypes.func\n  }),\n  complete: PropTypes.shape({\n    label: PropTypes.string.isRequired,\n    disabled: PropTypes.bool,\n    onClick: PropTypes.func\n  }),\n  warning: PropTypes.shape({\n    label: PropTypes.string.isRequired,\n    onClick: PropTypes.func\n  }),\n  loading: PropTypes.bool,\n  backgroundImageUrl: PropTypes.string,\n  contentType: PropTypes.string,\n  mode: PropTypes.string,\n  closePopin: PropTypes.shape({...CmPopin.propTypes})\n};\n\nExternalCourse.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default ExternalCourse;\n"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAP,IAAeC,WAAf,EAA4BC,OAA5B,QAA0C,OAA1C;AACA,SAAQC,+CAA+C,IAAIC,YAA3D,QAA8E,0BAA9E;AACA,SAAQC,OAAR,QAAsB,oBAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAAQC,sBAAR,QAAqC,6BAArC;AACA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,qBAAP,MAAkC,wCAAlC;AACA,OAAOC,OAAP,MAAoB,yBAApB;AACA,OAAOC,KAAP,MAAkB,aAAlB;AAEA,MAAMC,mBAAmB,GAAG;EAC1BC,OAAO,EAAEF,KAAK,CAACE,OADW;EAE1BC,OAAO,EAAEH,KAAK,CAACI,cAFW;EAG1BC,MAAM,EAAEL,KAAK,CAACE;AAHY,CAA5B;;AAMA,MAAMI,cAAc,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACzC,MAAM;IACJC,IADI;IAEJC,IAFI;IAGJC,GAHI;IAIJC,IAJI;IAKJC,QALI;IAMJC,OANI;IAOJC,OAPI;IAQJC,kBARI;IASJC,WATI;IAUJC,IAAI,GAAG,SAVH;IAWJC;EAXI,IAYFZ,KAZJ;EAaA,MAAM;IAACa;EAAD,IAASZ,OAAf;;EACA,MAAMa,OAAO,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAAhB;;EACA,MAAME,QAAQ,GAAG5B,sBAAsB,CAACgB,IAAD,CAAtB,CAA6Ba,IAA9C;EACA,MAAMC,SAAS,GAAG9B,sBAAsB,CAACgB,IAAD,CAAtB,CAA6Be,KAA/C;EAEA,MAAMC,aAAa,GAAGvC,WAAW,CAACwC,KAAK,IAAI;IACzC,MAAM;MAACC,OAAO;IAAR,IAAmBD,KAAzB;IACA,OAAOE,CAAC,IAAI;MACVA,CAAC,CAACC,eAAF;MACAD,CAAC,CAACE,cAAF;MACA,OAAOH,OAAO,CAACC,CAAD,CAAd;IACD,CAJD;EAKD,CAPgC,EAO9B,EAP8B,CAAjC;EASA,MAAMG,eAAe,GAAG5C,OAAO,CAAC,MAAM;IACpC,OAAO2B,OAAO,gBACZ;MAAK,SAAS,EAAEf,KAAK,CAACiC;IAAtB,gBACE,oBAAC,MAAD,OADF,CADY,gBAKZ,oBAAC,qBAAD;MACE,GAAG,EAAEtB,GADP;MAEE,IAAI,EAAEO,IAFR;MAGE,kBAAkB,EAAEF,kBAHtB;MAIE,WAAW,EAAEC;IAJf,EALF;EAYD,CAb8B,EAa5B,CAACF,OAAD,EAAUJ,GAAV,EAAeO,IAAf,EAAqBD,WAArB,EAAkCD,kBAAlC,CAb4B,CAA/B;EAeA,MAAMkB,cAAc,GAAG9C,OAAO,CAAC,MAAM;IACnC,OAAO,CAAC,OAAMyB,QAAN,CAAD,gBACL,oBAAC,MAAD;MACE,IAAI,EAAC,QADP;MAEE,QAAQ,EAAEE,OAAO,GAAG,IAAH,GAAUF,QAAQ,CAACsB,QAFtC;MAGE,OAAO,EAAEpB,OAAO,eAAcW,aAAa,CAACb,QAAD,CAH7C;MAIE,WAAW,EAAEA,QAAQ,CAACuB,KAJxB;MAKE,KAAK,EAAE;QACLC,eAAe,EACbxB,QAAQ,CAACsB,QAAT,IAAqBpB,OAArB,GAA+BxB,OAAO,CAAE,SAAQ8B,OAAQ,WAAlB,CAAtC,GAAsEA,OAFnE;QAGLiB,MAAM,EAAEvB,OAAO,GAAG,UAAH,GAAgB;MAH1B,CALT;MAUE,SAAS,EAAEvB,UAAU,CACnBQ,KAAK,CAACuC,WADa,EAEnB1B,QAAQ,CAACsB,QAAT,IAAqBpB,OAArB,GAA+Bf,KAAK,CAACmC,QAArC,GAAgD,IAF7B,EAGnBpB,OAAO,GAAGf,KAAK,CAACe,OAAT,GAAmB,IAHP;IAVvB,EADK,GAiBH,IAjBJ;EAkBD,CAnB6B,EAmB3B,CAACF,QAAD,EAAWE,OAAX,EAAoBM,OAApB,EAA6BK,aAA7B,CAnB2B,CAA9B;EAqBA,MAAMc,aAAa,GAAGpD,OAAO,CAAC,MAAM;IAClC,OAAO,CAAC,OAAM0B,OAAN,CAAD,gBACL;MAAK,SAAS,EAAEd,KAAK,CAACyC;IAAtB,gBACE;MAAK,OAAO,EAAEf,aAAa,CAACZ,OAAD,CAA3B;MAAsC,SAAS,EAAEtB,UAAU,CAACQ,KAAK,CAAC0C,SAAP,EAAkB1C,KAAK,CAAC2C,IAAxB;IAA3D,gBACE,oBAAC,YAAD;MAAc,SAAS,EAAE3C,KAAK,CAAC4C,YAA/B;MAA6C,KAAK,EAAE,EAApD;MAAwD,MAAM,EAAE;IAAhE,EADF,eAEE,kCAAO9B,OAAO,CAACsB,KAAf,CAFF,CADF,CADK,GAOH,IAPJ;EAQD,CAT4B,EAS1B,CAACtB,OAAD,EAAUY,aAAV,CAT0B,CAA7B;EAWA,MAAMmB,UAAU,GAAGzD,OAAO,CAAC,MAAM;IAC/B,OAAO,CAAC,OAAMwB,IAAN,CAAD,gBACL;MAAK,SAAS,EAAEZ,KAAK,CAACyC;IAAtB,gBACE;MACE,SAAS,EAAEjD,UAAU,CAACQ,KAAK,CAAC8C,OAAP,EAAgB/B,OAAO,GAAGf,KAAK,CAACe,OAAT,GAAmB,IAA1C,CADvB;MAEE,OAAO,EAAEA,OAAO,eAAcW,aAAa,CAACd,IAAD;IAF7C,GAIGA,IAAI,CAACwB,KAJR,CADF,CADK,GASH,IATJ;EAUD,CAXyB,EAWvB,CAACxB,IAAD,EAAOG,OAAP,EAAgBW,aAAhB,CAXuB,CAA1B;EAaA,MAAMqB,YAAY,GAAG3D,OAAO,CAAC,MAAM;IACjC,OAAO,CAAC,OAAMqB,IAAN,CAAD,gBACL;MAAK,SAAS,EAAEjB,UAAU,CAACQ,KAAK,CAAC0C,SAAP,EAAkB1C,KAAK,CAACgD,KAAxB;IAA1B,gBACE;MAAK,SAAS,EAAEhD,KAAK,CAACiD,IAAtB;MAA4B,KAAK,EAAE;QAACZ,eAAe,EAAEb;MAAlB;IAAnC,gBACE,oBAAC,QAAD;MAAU,SAAS,EAAExB,KAAK,CAACkD;IAA3B,EADF,CADF,eAIE;MACE,SAAS,EAAElD,KAAK,CAACmD,SADnB,CAEE;MAFF;MAGE,uBAAuB,EAAE;QAACC,MAAM,EAAE3C;MAAT;IAH3B,EAJF,CADK,GAWH,IAXJ;EAYD,CAb2B,EAazB,CAACA,IAAD,EAAOe,SAAP,CAbyB,CAA5B;EAeA,MAAM6B,MAAM,GAAGjE,OAAO,CAAC,MAAM;IAC3B,CAAC,OAAMwB,IAAN,CAAD,IAAgB,CAAC,SAAQH,IAAR,CAAjB,gBACE;MAAK,SAAS,EAAET,KAAK,CAACqD;IAAtB,GACGR,UADH,EAEGE,YAFH,EAGG,OAAMnC,IAAN,IAAc,IAAd,gBAAqB;MAAK,SAAS,EAAEZ,KAAK,CAACsD;IAAtB,EAHxB,CADF,GAMI,IANJ;EAOD,CARqB,EAQnB,CAAC7C,IAAD,EAAOsC,YAAP,EAAqBnC,IAArB,EAA2BiC,UAA3B,CARmB,CAAtB;EAUA,MAAMU,MAAM,GAAGnE,OAAO,CAAC,MAAM;IAC3B,CAAC,OAAM0B,OAAN,CAAD,IAAmB,CAAC,OAAMD,QAAN,CAApB,gBACE;MAAK,SAAS,EAAEb,KAAK,CAACuD;IAAtB,GACGf,aADH,EAEGN,cAFH,EAGG,OAAMpB,OAAN,IAAiB,IAAjB,gBAAwB;MAAK,SAAS,EAAEd,KAAK,CAACsD;IAAtB,EAH3B,CADF,GAMI,IANJ;EAOD,CARqB,EAQnB,CAACxC,OAAD,EAAU0B,aAAV,EAAyB3B,QAAzB,EAAmCqB,cAAnC,CARmB,CAAtB;EAUA,MAAMsB,KAAK,GAAGpE,OAAO,CAAC,MAAM;IAC1B,OAAO,CAAC,OAAM+B,UAAN,CAAD,gBAAqB,oBAAC,OAAD,EAAaA,UAAb,CAArB,GAAmD,IAA1D;EACD,CAFoB,EAElB,CAACA,UAAD,CAFkB,CAArB;EAIA,oBACE;IAAK,SAAS,EAAElB,mBAAmB,CAACiB,IAAD;EAAnC,GACGmC,MADH,EAEGG,KAFH,EAGGxB,eAHH,EAIGuB,MAJH,CADF;AAQD,CAvID;;AAyIAjD,cAAc,CAACmD,SAAf,2CAA2B;EACzBhD,IAAI,EAAEhB,SAAS,CAACiE,MADS;EAEzBhD,IAAI,EAAEjB,SAAS,CAACkE,KAAV,CAAgB,MAAKjE,sBAAL,CAAhB,CAFmB;EAGzBiB,GAAG,EAAElB,SAAS,CAACiE,MAAV,CAAiBE,UAHG;EAIzBhD,IAAI,EAAEnB,SAAS,CAACoE,KAAV,CAAgB;IACpBzB,KAAK,EAAE3C,SAAS,CAACiE,MAAV,CAAiBE,UADJ;IAEpBhC,OAAO,EAAEnC,SAAS,CAACqE;EAFC,CAAhB,CAJmB;EAQzBjD,QAAQ,EAAEpB,SAAS,CAACoE,KAAV,CAAgB;IACxBzB,KAAK,EAAE3C,SAAS,CAACiE,MAAV,CAAiBE,UADA;IAExBzB,QAAQ,EAAE1C,SAAS,CAACsE,IAFI;IAGxBnC,OAAO,EAAEnC,SAAS,CAACqE;EAHK,CAAhB,CARe;EAazBhD,OAAO,EAAErB,SAAS,CAACoE,KAAV,CAAgB;IACvBzB,KAAK,EAAE3C,SAAS,CAACiE,MAAV,CAAiBE,UADD;IAEvBhC,OAAO,EAAEnC,SAAS,CAACqE;EAFI,CAAhB,CAbgB;EAiBzB/C,OAAO,EAAEtB,SAAS,CAACsE,IAjBM;EAkBzB/C,kBAAkB,EAAEvB,SAAS,CAACiE,MAlBL;EAmBzBzC,WAAW,EAAExB,SAAS,CAACiE,MAnBE;EAoBzBxC,IAAI,EAAEzB,SAAS,CAACiE,MApBS;EAqBzBvC,UAAU,EAAE1B,SAAS,CAACoE,KAAV,cAAoB9D,OAAO,CAAC0D,SAA5B;AArBa,CAA3B;AAwBAnD,cAAc,CAAC0D,YAAf,GAA8B;EAC5B5C,IAAI,EAAEzB,QAAQ,CAACsE,iBAAT,CAA2B7C;AADL,CAA9B;AAIA,eAAed,cAAf"}

package/es/template/external-course/style.css

@@ -24,7 +24,7 @@
 }
 
 .defaultCockpit{
-  composes:default;
+  composes: default;
   height: 100%;
 }
 

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

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

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

@@ -40,7 +40,8 @@ const CMPopin = props => {
   const logo = {
     AlertDiamond: _novaIcons.NovaSolidInterfaceFeedbackInterfaceAlertDiamond,
     WindowUpload: _novaIcons.NovaSolidApplicationsWindowUpload3,
-    MoonRocket: _novaIcons.NovaSolidSpaceMoonRocket
+    MoonRocket: _novaIcons.NovaSolidSpaceMoonRocket,
+    CheckCircle1: _novaIcons.NovaLineStatusCheckCircle1
   };
   const LogoComponent = logo[icon];
   const backgroundImageStyle = backgroundImageUrl ? {

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

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

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

@@ -47,7 +47,7 @@
 
 .popin {
   overflow: auto;
-  width: 500px;
+  width: 434px;
   flex-grow: 0;
   margin: 16px;
   padding: 16px 16px 20px 16px;
@@ -114,12 +114,12 @@
 
 .button {
   min-width: max-content;
-  width: 160px;
+  width: 161px;
   padding: 8px;
 }
 
 .largeButton {
-  width: 100%;
+  width: 75%;
   padding: 8px;
 }
 
@@ -150,6 +150,11 @@
   margin-top: 0px;
 }
 
+.descriptionText, .content, .message {
+  margin-left: 32px;
+  margin-right: 32px;
+}
+
 .cookieTitleContainer {
   align-items: center;
   display: flex;
@@ -278,29 +283,21 @@ a {
 }
 
 @media tablet {
-  .popin {
-    position: fixed;
-  }
-
   .popin {
     width: 80%;
+    overflow: hidden;
   }
 
   .buttonContainer {
     display: flex;
     flex-wrap: wrap-reverse;
-    margin: 48px 24px 32px 24px;
-    width: 85%;
+    margin: 12px 24px 32px 24px;
   }
   
-  .button {
+  .largeButton, .button , .titleContainer {
     width: 100%;
   }
 
-  .titleContainer {
-    width: 85%;
-  }
-
   .popinCookie {
     position: fixed;
     bottom: 10px;
@@ -316,34 +313,50 @@ a {
   }
 
   .popinCookie .largeButton {
-    padding: 8px 0px 0px 0px
+    padding: 8px 0px 0px 0px;
   }
   .popinCookie .message {
     padding: 24px 24px 0px 24px
   }
 
-  @media mobile {
-    .popin {
-      position: fixed;
-    }
-
-    .popin {
-      width: 80%;
-    }
-
-    .buttonContainer {
-      display: flex;
-      margin: 48px 24px 32px 24px;
-      width: 85%;
-    }
-    
-    .button {
-      width: 100%;
-    }
-
-    .titleContainer {
-      width: 85%;
-    }
+  .descriptionText, .content, .message {
+    margin-left: 16px;
+    margin-right: 16px;
+  }
+}
+
+@media mobile {
+  .background {
+    padding: 0;
+  }
+
+  .popin {
+    width: 80%;
+    overflow: hidden;
+  }
+
+  .buttonContainer {
+    display: flex;
+    margin: 12px 16px 32px 16px;
+  }
+  
+  .button {
+    width: 100%;
+  }
+
+  .titleContainer {
+    width: 100%;
+    margin-left: 16px;
+    margin-right: 16px;
+  }
+
+  .content, .message, .descriptionText {
+    margin-left: 16px;
+    margin-right: 16px;
+  }
+  .largeButton { 
+    margin-left: 32px;
+    margin-right: 32px;
   }
 }
 
@@ -355,7 +368,6 @@ button {
 }
 
 _:-ms-fullscreen,
-.descriptionText,
 .buttonContainer {
   width: 85%;
 }

package/lib/template/external-course/index.d.ts

@@ -1,29 +1,82 @@
 export default ExternalCourse;
-declare class ExternalCourse extends React.Component<any, any, any> {
-    static propTypes: {
-        name: PropTypes.Requireable<string>;
-        type: PropTypes.Requireable<string>;
-        url: PropTypes.Validator<string>;
-        quit: PropTypes.Requireable<PropTypes.InferProps<{
+declare function ExternalCourse(props: any, context: any): JSX.Element;
+declare namespace ExternalCourse {
+    namespace propTypes {
+        const name: PropTypes.Requireable<string>;
+        const type: PropTypes.Requireable<string>;
+        const url: PropTypes.Validator<string>;
+        const quit: PropTypes.Requireable<PropTypes.InferProps<{
             label: PropTypes.Validator<string>;
             onClick: PropTypes.Requireable<(...args: any[]) => any>;
         }>>;
-        complete: PropTypes.Requireable<PropTypes.InferProps<{
+        const complete: PropTypes.Requireable<PropTypes.InferProps<{
             label: PropTypes.Validator<string>;
             disabled: PropTypes.Requireable<boolean>;
             onClick: PropTypes.Requireable<(...args: any[]) => any>;
         }>>;
-        warning: PropTypes.Requireable<PropTypes.InferProps<{
+        const warning: PropTypes.Requireable<PropTypes.InferProps<{
             label: PropTypes.Validator<string>;
             onClick: PropTypes.Requireable<(...args: any[]) => any>;
         }>>;
-        loading: PropTypes.Requireable<boolean>;
-        backgroundImageUrl: PropTypes.Requireable<string>;
-        contentType: PropTypes.Requireable<string>;
-        mode: PropTypes.Requireable<string>;
-    };
-    static contextTypes: {
-        skin: PropTypes.Requireable<PropTypes.InferProps<{
+        const loading: PropTypes.Requireable<boolean>;
+        const backgroundImageUrl: PropTypes.Requireable<string>;
+        const contentType: PropTypes.Requireable<string>;
+        const mode: PropTypes.Requireable<string>;
+        const closePopin: PropTypes.Requireable<PropTypes.InferProps<{
+            content: PropTypes.Requireable<string>;
+            mode: PropTypes.Requireable<string>;
+            header: PropTypes.Requireable<string>;
+            firstButton: PropTypes.Requireable<PropTypes.InferProps<{
+                label: PropTypes.Requireable<string>;
+                handleOnclick: PropTypes.Requireable<(...args: any[]) => any>;
+                'aria-label': PropTypes.Requireable<string>;
+                largeButton: PropTypes.Requireable<boolean>;
+                type: PropTypes.Requireable<string>;
+                customStyle: PropTypes.Requireable<PropTypes.InferProps<{}>>;
+            }>>;
+            secondButton: PropTypes.Requireable<PropTypes.InferProps<{
+                label: PropTypes.Requireable<string>;
+                handleOnclick: PropTypes.Requireable<(...args: any[]) => any>;
+                type: PropTypes.Requireable<string>;
+                'aria-label': PropTypes.Requireable<string>;
+                largeButton: PropTypes.Requireable<boolean>;
+                customStyle: PropTypes.Requireable<PropTypes.InferProps<{}>>;
+            }>>;
+            thirdButton: PropTypes.Requireable<PropTypes.InferProps<{
+                label: PropTypes.Requireable<string>;
+                handleOnclick: PropTypes.Requireable<(...args: any[]) => any>;
+                type: PropTypes.Requireable<string>;
+                'aria-label': PropTypes.Requireable<string>;
+                largeButton: PropTypes.Requireable<boolean>;
+                customStyle: PropTypes.Requireable<PropTypes.InferProps<{}>>;
+            }>>;
+            onClose: PropTypes.Requireable<(...args: any[]) => any>;
+            icon: PropTypes.Requireable<string>;
+            backgroundImageUrl: PropTypes.Requireable<string>;
+            descriptionText: PropTypes.Requireable<string>;
+            cookieTitle: PropTypes.Requireable<string>;
+            descriptionBtnTxt: PropTypes.Requireable<string>;
+            listBtnSwicth: PropTypes.Requireable<(PropTypes.InferProps<{
+                title: PropTypes.Requireable<string>;
+                name: PropTypes.Requireable<string>;
+                id: PropTypes.Requireable<string>;
+                value: PropTypes.Requireable<boolean>;
+                disabled: PropTypes.Requireable<boolean>;
+                onChange: PropTypes.Requireable<(...args: any[]) => any>;
+                description: PropTypes.Requireable<string>;
+                'aria-labelledby': PropTypes.Requireable<string>;
+                'aria-label': PropTypes.Requireable<string>;
+                modified: PropTypes.Requireable<boolean>;
+                titlePosition: PropTypes.Requireable<string>;
+                theme: PropTypes.Requireable<string>;
+                details: PropTypes.Requireable<string>;
+                'data-name': PropTypes.Requireable<string>;
+                requiredSelection: PropTypes.Requireable<boolean>;
+            }> | null | undefined)[]>;
+        }>>;
+    }
+    namespace contextTypes {
+        const skin: PropTypes.Requireable<PropTypes.InferProps<{
             common: PropTypes.Requireable<{
                 [x: string]: any;
             }>;
@@ -44,12 +97,7 @@ declare class ExternalCourse extends React.Component<any, any, any> {
                 [x: string]: any;
             }>;
         }>>;
-    };
-    constructor(props: any);
-    constructor(props: any, context: any);
-    handleOnClick: (field: any) => (e: any) => any;
-    render(): JSX.Element;
+    }
 }
-import React from "react";
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/lib/template/external-course/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/external-course/index.js"],"names":[],"mappings":";AAmBA;IACE;;;;;;;;;;;;;;;;;;;;;MAqBE;IAEF;;;;;;;;;;;;;;;;;;;;;;MAEE;IA4Hqsd,wBAA8C;IAAA,sCAAyJ;IA1H94d,+CAKE;IAEF,sBA+GC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/external-course/index.js"],"names":[],"mappings":";AAoBA,uEAuIC"}

package/lib/template/external-course/index.js

@@ -13,9 +13,9 @@ var _keys2 = _interopRequireDefault(require("lodash/fp/keys"));
 
 var _getOr2 = _interopRequireDefault(require("lodash/fp/getOr"));
 
-var _get2 = _interopRequireDefault(require("lodash/fp/get"));
+var _noop2 = _interopRequireDefault(require("lodash/fp/noop"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _novaIcons = require("@coorpacademy/nova-icons");
 
@@ -35,48 +35,56 @@ var _button = _interopRequireDefault(require("../../atom/button"));
 
 var _externalContentViewer = _interopRequireDefault(require("../../molecule/external-content-viewer"));
 
+var _cmPopin = _interopRequireDefault(require("../../molecule/cm-popin"));
+
 var _style = _interopRequireDefault(require("./style.css"));
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 const defaultWrapperStyle = {
   default: _style.default.default,
   cockpit: _style.default.defaultCockpit,
   mobile: _style.default.default
 };
 
-class ExternalCourse extends _react.default.Component {
-  constructor(...args) {
-    super(...args);
-
-    this.handleOnClick = field => e => {
+const ExternalCourse = (props, context) => {
+  const {
+    name,
+    type,
+    url,
+    quit,
+    complete,
+    warning,
+    loading,
+    backgroundImageUrl,
+    contentType,
+    mode = 'default',
+    closePopin
+  } = props;
+  const {
+    skin
+  } = context;
+  const primary = (0, _getOr2.default)('#00B0FF', 'common.primary', skin);
+  const IconType = _externalContent.EXTERNAL_CONTENT_ICONS[type].icon;
+  const IconColor = _externalContent.EXTERNAL_CONTENT_ICONS[type].color;
+  const handleOnClick = (0, _react.useCallback)(field => {
+    const {
+      onClick = _noop2.default
+    } = field;
+    return e => {
       e.stopPropagation();
       e.preventDefault();
-      const onClick = (0, _get2.default)('onClick', field);
-      return onClick && onClick(e);
+      return onClick(e);
     };
-  }
-
-  render() {
-    const {
-      name,
-      type,
-      url,
-      warning,
-      complete,
-      quit,
-      loading,
-      backgroundImageUrl,
-      contentType,
-      mode = 'default'
-    } = this.props;
-    const {
-      skin
-    } = this.context;
-    const primary = (0, _getOr2.default)('#00B0FF', 'common.primary', skin);
-    const IconType = _externalContent.EXTERNAL_CONTENT_ICONS[type].icon;
-    const IconColor = _externalContent.EXTERNAL_CONTENT_ICONS[type].color;
-    const mainContentSlot = loading ? /*#__PURE__*/_react.default.createElement("div", {
+  }, []);
+  const mainContentSlot = (0, _react.useMemo)(() => {
+    return loading ? /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.loader
     }, /*#__PURE__*/_react.default.createElement(_loader.default, null)) : /*#__PURE__*/_react.default.createElement(_externalContentViewer.default, {
       url: url,
@@ -84,10 +92,12 @@ class ExternalCourse extends _react.default.Component {
       backgroundImageUrl: backgroundImageUrl,
       contentType: contentType
     });
-    const completeButton = !(0, _isNil2.default)(complete) ? /*#__PURE__*/_react.default.createElement(_button.default, {
+  }, [loading, url, mode, contentType, backgroundImageUrl]);
+  const completeButton = (0, _react.useMemo)(() => {
+    return !(0, _isNil2.default)(complete) ? /*#__PURE__*/_react.default.createElement(_button.default, {
       type: "button",
       disabled: loading ? true : complete.disabled,
-      onClick: loading ? _identity2.default : this.handleOnClick(complete),
+      onClick: loading ? _identity2.default : handleOnClick(complete),
       submitValue: complete.label,
       style: {
         backgroundColor: complete.disabled || loading ? (0, _cssColorFunction.convert)(`color(${primary} a(-50%))`) : primary,
@@ -95,23 +105,29 @@ class ExternalCourse extends _react.default.Component {
       },
       className: (0, _classnames.default)(_style.default.completeCta, complete.disabled || loading ? _style.default.disabled : null, loading ? _style.default.loading : null)
     }) : null;
-    const warningButton = !(0, _isNil2.default)(warning) ? /*#__PURE__*/_react.default.createElement("div", {
+  }, [complete, loading, primary, handleOnClick]);
+  const warningButton = (0, _react.useMemo)(() => {
+    return !(0, _isNil2.default)(warning) ? /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.leftSection
     }, /*#__PURE__*/_react.default.createElement("div", {
-      onClick: this.handleOnClick(warning),
+      onClick: handleOnClick(warning),
       className: (0, _classnames.default)(_style.default.iconLabel, _style.default.link)
     }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaSolidInterfaceFeedbackInterfaceQuestionMark, {
       className: _style.default.iconQuestion,
       width: 24,
       height: 24
     }), /*#__PURE__*/_react.default.createElement("span", null, warning.label))) : null;
-    const quitButton = !(0, _isNil2.default)(quit) ? /*#__PURE__*/_react.default.createElement("div", {
+  }, [warning, handleOnClick]);
+  const quitButton = (0, _react.useMemo)(() => {
+    return !(0, _isNil2.default)(quit) ? /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.leftSection
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: (0, _classnames.default)(_style.default.quitCta, loading ? _style.default.loading : null),
-      onClick: loading ? _identity2.default : this.handleOnClick(quit)
+      onClick: loading ? _identity2.default : handleOnClick(quit)
     }, quit.label)) : null;
-    const titleSection = !(0, _isNil2.default)(name) ? /*#__PURE__*/_react.default.createElement("div", {
+  }, [quit, loading, handleOnClick]);
+  const titleSection = (0, _react.useMemo)(() => {
+    return !(0, _isNil2.default)(name) ? /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)(_style.default.iconLabel, _style.default.title)
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.oval,
@@ -127,26 +143,29 @@ class ExternalCourse extends _react.default.Component {
         __html: name
       }
     })) : null;
-    const header = !(0, _isNil2.default)(quit) || !(0, _isEmpty2.default)(name) ? /*#__PURE__*/_react.default.createElement("div", {
+  }, [name, IconColor]);
+  const header = (0, _react.useMemo)(() => {
+    !(0, _isNil2.default)(quit) || !(0, _isEmpty2.default)(name) ? /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.header
     }, quitButton, titleSection, (0, _isNil2.default)(quit) ? null : /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.rightSection
     })) : null;
-    const footer = !(0, _isNil2.default)(warning) || !(0, _isNil2.default)(complete) ? /*#__PURE__*/_react.default.createElement("div", {
+  }, [name, titleSection, quit, quitButton]);
+  const footer = (0, _react.useMemo)(() => {
+    !(0, _isNil2.default)(warning) || !(0, _isNil2.default)(complete) ? /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.footer
     }, warningButton, completeButton, (0, _isNil2.default)(warning) ? null : /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.rightSection
     })) : null;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: defaultWrapperStyle[mode]
-    }, header, mainContentSlot, footer);
-  }
-
-}
-
-ExternalCourse.contextTypes = {
-  skin: _provider.default.childContextTypes.skin
+  }, [warning, warningButton, complete, completeButton]);
+  const popin = (0, _react.useMemo)(() => {
+    return !(0, _isNil2.default)(closePopin) ? /*#__PURE__*/_react.default.createElement(_cmPopin.default, closePopin) : null;
+  }, [closePopin]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: defaultWrapperStyle[mode]
+  }, header, popin, mainContentSlot, footer);
 };
+
 ExternalCourse.propTypes = process.env.NODE_ENV !== "production" ? {
   name: _propTypes.default.string,
   type: _propTypes.default.oneOf((0, _keys2.default)(_externalContent.EXTERNAL_CONTENT_ICONS)),
@@ -167,8 +186,12 @@ ExternalCourse.propTypes = process.env.NODE_ENV !== "production" ? {
   loading: _propTypes.default.bool,
   backgroundImageUrl: _propTypes.default.string,
   contentType: _propTypes.default.string,
-  mode: _propTypes.default.string
+  mode: _propTypes.default.string,
+  closePopin: _propTypes.default.shape(_extends({}, _cmPopin.default.propTypes))
 } : {};
+ExternalCourse.contextTypes = {
+  skin: _provider.default.childContextTypes.skin
+};
 var _default = ExternalCourse;
 exports.default = _default;
 //# sourceMappingURL=index.js.map

package/lib/template/external-course/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["defaultWrapperStyle","default","style","cockpit","defaultCockpit","mobile","ExternalCourse","React","Component","handleOnClick","field","e","stopPropagation","preventDefault","onClick","render","name","type","url","warning","complete","quit","loading","backgroundImageUrl","contentType","mode","props","skin","context","primary","IconType","EXTERNAL_CONTENT_ICONS","icon","IconColor","color","mainContentSlot","loader","completeButton","disabled","label","backgroundColor","convert","cursor","classnames","completeCta","warningButton","leftSection","iconLabel","link","iconQuestion","quitButton","quitCta","titleSection","title","oval","iconHeader","innerHTML","__html","header","rightSection","footer","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","oneOf","isRequired","shape","func","bool"],"sources":["../../../src/template/external-course/index.js"],"sourcesContent":["import React from 'react';\nimport {NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionIcon} from '@coorpacademy/nova-icons';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, getOr, keys, identity, isNil, isEmpty} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport {EXTERNAL_CONTENT_ICONS} from '../../util/external-content';\nimport Provider from '../../atom/provider';\nimport Loader from '../../atom/loader';\nimport Button from '../../atom/button';\nimport ExternalContentViewer from '../../molecule/external-content-viewer';\nimport style from './style.css';\n\nconst defaultWrapperStyle = {\n  default: style.default,\n  cockpit: style.defaultCockpit,\n  mobile: style.default\n};\n\nclass ExternalCourse extends React.Component {\n  static propTypes = {\n    name: PropTypes.string,\n    type: PropTypes.oneOf(keys(EXTERNAL_CONTENT_ICONS)),\n    url: PropTypes.string.isRequired,\n    quit: PropTypes.shape({\n      label: PropTypes.string.isRequired,\n      onClick: PropTypes.func\n    }),\n    complete: PropTypes.shape({\n      label: PropTypes.string.isRequired,\n      disabled: PropTypes.bool,\n      onClick: PropTypes.func\n    }),\n    warning: PropTypes.shape({\n      label: PropTypes.string.isRequired,\n      onClick: PropTypes.func\n    }),\n    loading: PropTypes.bool,\n    backgroundImageUrl: PropTypes.string,\n    contentType: PropTypes.string,\n    mode: PropTypes.string\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  handleOnClick = field => e => {\n    e.stopPropagation();\n    e.preventDefault();\n    const onClick = get('onClick', field);\n    return onClick && onClick(e);\n  };\n\n  render() {\n    const {\n      name,\n      type,\n      url,\n      warning,\n      complete,\n      quit,\n      loading,\n      backgroundImageUrl,\n      contentType,\n      mode = 'default'\n    } = this.props;\n    const {skin} = this.context;\n    const primary = getOr('#00B0FF', 'common.primary', skin);\n    const IconType = EXTERNAL_CONTENT_ICONS[type].icon;\n    const IconColor = EXTERNAL_CONTENT_ICONS[type].color;\n\n    const mainContentSlot = loading ? (\n      <div className={style.loader}>\n        <Loader />\n      </div>\n    ) : (\n      <ExternalContentViewer\n        url={url}\n        mode={mode}\n        backgroundImageUrl={backgroundImageUrl}\n        contentType={contentType}\n      />\n    );\n\n    const completeButton = !isNil(complete) ? (\n      <Button\n        type=\"button\"\n        disabled={loading ? true : complete.disabled}\n        onClick={loading ? identity : this.handleOnClick(complete)}\n        submitValue={complete.label}\n        style={{\n          backgroundColor:\n            complete.disabled || loading ? convert(`color(${primary} a(-50%))`) : primary,\n          cursor: loading ? 'progress' : 'pointer'\n        }}\n        className={classnames(\n          style.completeCta,\n          complete.disabled || loading ? style.disabled : null,\n          loading ? style.loading : null\n        )}\n      />\n    ) : null;\n\n    const warningButton = !isNil(warning) ? (\n      <div className={style.leftSection}>\n        <div\n          onClick={this.handleOnClick(warning)}\n          className={classnames(style.iconLabel, style.link)}\n        >\n          <QuestionIcon className={style.iconQuestion} width={24} height={24} />\n          <span>{warning.label}</span>\n        </div>\n      </div>\n    ) : null;\n\n    const quitButton = !isNil(quit) ? (\n      <div className={style.leftSection}>\n        <span\n          className={classnames(style.quitCta, loading ? style.loading : null)}\n          onClick={loading ? identity : this.handleOnClick(quit)}\n        >\n          {quit.label}\n        </span>\n      </div>\n    ) : null;\n\n    const titleSection = !isNil(name) ? (\n      <div className={classnames(style.iconLabel, style.title)}>\n        <div className={style.oval} style={{backgroundColor: IconColor}}>\n          <IconType className={style.iconHeader} />\n        </div>\n        <span\n          className={style.innerHTML}\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{__html: name}}\n        />\n      </div>\n    ) : null;\n\n    const header =\n      !isNil(quit) || !isEmpty(name) ? (\n        <div className={style.header}>\n          {quitButton}\n          {titleSection}\n          {isNil(quit) ? null : <div className={style.rightSection} />}\n        </div>\n      ) : null;\n\n    const footer =\n      !isNil(warning) || !isNil(complete) ? (\n        <div className={style.footer}>\n          {warningButton}\n          {completeButton}\n          {isNil(warning) ? null : <div className={style.rightSection} />}\n        </div>\n      ) : null;\n\n    return (\n      <div className={defaultWrapperStyle[mode]}>\n        {header}\n        {mainContentSlot}\n        {footer}\n      </div>\n    );\n  }\n}\n\nexport default ExternalCourse;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["defaultWrapperStyle","default","style","cockpit","defaultCockpit","mobile","ExternalCourse","props","context","name","type","url","quit","complete","warning","loading","backgroundImageUrl","contentType","mode","closePopin","skin","primary","IconType","EXTERNAL_CONTENT_ICONS","icon","IconColor","color","handleOnClick","useCallback","field","onClick","e","stopPropagation","preventDefault","mainContentSlot","useMemo","loader","completeButton","disabled","label","backgroundColor","convert","cursor","classnames","completeCta","warningButton","leftSection","iconLabel","link","iconQuestion","quitButton","quitCta","titleSection","title","oval","iconHeader","innerHTML","__html","header","rightSection","footer","popin","propTypes","PropTypes","string","oneOf","isRequired","shape","func","bool","CmPopin","contextTypes","Provider","childContextTypes"],"sources":["../../../src/template/external-course/index.js"],"sourcesContent":["import React, {useCallback, useMemo} from 'react';\nimport {NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionIcon} from '@coorpacademy/nova-icons';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {noop, getOr, keys, identity, isNil, isEmpty} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport {EXTERNAL_CONTENT_ICONS} from '../../util/external-content';\nimport Provider from '../../atom/provider';\nimport Loader from '../../atom/loader';\nimport Button from '../../atom/button';\nimport ExternalContentViewer from '../../molecule/external-content-viewer';\nimport CmPopin from '../../molecule/cm-popin';\nimport style from './style.css';\n\nconst defaultWrapperStyle = {\n  default: style.default,\n  cockpit: style.defaultCockpit,\n  mobile: style.default\n};\n\nconst ExternalCourse = (props, context) => {\n  const {\n    name,\n    type,\n    url,\n    quit,\n    complete,\n    warning,\n    loading,\n    backgroundImageUrl,\n    contentType,\n    mode = 'default',\n    closePopin\n  } = props;\n  const {skin} = context;\n  const primary = getOr('#00B0FF', 'common.primary', skin);\n  const IconType = EXTERNAL_CONTENT_ICONS[type].icon;\n  const IconColor = EXTERNAL_CONTENT_ICONS[type].color;\n\n  const handleOnClick = useCallback(field => {\n    const {onClick = noop} = field;\n    return e => {\n      e.stopPropagation();\n      e.preventDefault();\n      return onClick(e);\n    };\n  }, []);\n\n  const mainContentSlot = useMemo(() => {\n    return loading ? (\n      <div className={style.loader}>\n        <Loader />\n      </div>\n    ) : (\n      <ExternalContentViewer\n        url={url}\n        mode={mode}\n        backgroundImageUrl={backgroundImageUrl}\n        contentType={contentType}\n      />\n    );\n  }, [loading, url, mode, contentType, backgroundImageUrl]);\n\n  const completeButton = useMemo(() => {\n    return !isNil(complete) ? (\n      <Button\n        type=\"button\"\n        disabled={loading ? true : complete.disabled}\n        onClick={loading ? identity : handleOnClick(complete)}\n        submitValue={complete.label}\n        style={{\n          backgroundColor:\n            complete.disabled || loading ? convert(`color(${primary} a(-50%))`) : primary,\n          cursor: loading ? 'progress' : 'pointer'\n        }}\n        className={classnames(\n          style.completeCta,\n          complete.disabled || loading ? style.disabled : null,\n          loading ? style.loading : null\n        )}\n      />\n    ) : null;\n  }, [complete, loading, primary, handleOnClick]);\n\n  const warningButton = useMemo(() => {\n    return !isNil(warning) ? (\n      <div className={style.leftSection}>\n        <div onClick={handleOnClick(warning)} className={classnames(style.iconLabel, style.link)}>\n          <QuestionIcon className={style.iconQuestion} width={24} height={24} />\n          <span>{warning.label}</span>\n        </div>\n      </div>\n    ) : null;\n  }, [warning, handleOnClick]);\n\n  const quitButton = useMemo(() => {\n    return !isNil(quit) ? (\n      <div className={style.leftSection}>\n        <span\n          className={classnames(style.quitCta, loading ? style.loading : null)}\n          onClick={loading ? identity : handleOnClick(quit)}\n        >\n          {quit.label}\n        </span>\n      </div>\n    ) : null;\n  }, [quit, loading, handleOnClick]);\n\n  const titleSection = useMemo(() => {\n    return !isNil(name) ? (\n      <div className={classnames(style.iconLabel, style.title)}>\n        <div className={style.oval} style={{backgroundColor: IconColor}}>\n          <IconType className={style.iconHeader} />\n        </div>\n        <span\n          className={style.innerHTML}\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{__html: name}}\n        />\n      </div>\n    ) : null;\n  }, [name, IconColor]);\n\n  const header = useMemo(() => {\n    !isNil(quit) || !isEmpty(name) ? (\n      <div className={style.header}>\n        {quitButton}\n        {titleSection}\n        {isNil(quit) ? null : <div className={style.rightSection} />}\n      </div>\n    ) : null;\n  }, [name, titleSection, quit, quitButton]);\n\n  const footer = useMemo(() => {\n    !isNil(warning) || !isNil(complete) ? (\n      <div className={style.footer}>\n        {warningButton}\n        {completeButton}\n        {isNil(warning) ? null : <div className={style.rightSection} />}\n      </div>\n    ) : null;\n  }, [warning, warningButton, complete, completeButton]);\n\n  const popin = useMemo(() => {\n    return !isNil(closePopin) ? <CmPopin {...closePopin} /> : null;\n  }, [closePopin]);\n\n  return (\n    <div className={defaultWrapperStyle[mode]}>\n      {header}\n      {popin}\n      {mainContentSlot}\n      {footer}\n    </div>\n  );\n};\n\nExternalCourse.propTypes = {\n  name: PropTypes.string,\n  type: PropTypes.oneOf(keys(EXTERNAL_CONTENT_ICONS)),\n  url: PropTypes.string.isRequired,\n  quit: PropTypes.shape({\n    label: PropTypes.string.isRequired,\n    onClick: PropTypes.func\n  }),\n  complete: PropTypes.shape({\n    label: PropTypes.string.isRequired,\n    disabled: PropTypes.bool,\n    onClick: PropTypes.func\n  }),\n  warning: PropTypes.shape({\n    label: PropTypes.string.isRequired,\n    onClick: PropTypes.func\n  }),\n  loading: PropTypes.bool,\n  backgroundImageUrl: PropTypes.string,\n  contentType: PropTypes.string,\n  mode: PropTypes.string,\n  closePopin: PropTypes.shape({...CmPopin.propTypes})\n};\n\nExternalCourse.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default ExternalCourse;\n"],"mappings":"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"}

package/lib/template/external-course/style.css

@@ -24,7 +24,7 @@
 }
 
 .defaultCockpit{
-  composes:default;
+  composes: default;
   height: 100%;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "11.13.6",
+  "version": "11.13.7-alpha.14+ec6c0cf629",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -166,5 +166,5 @@
     "last 2 versions",
     "IE 11"
   ],
-  "gitHead": "476d89a1f34bb385367e7896ea204a482950ad70"
+  "gitHead": "ec6c0cf6297d0b00522d5e10df21fb80a0986fd5"
 }

package/locales/.mtslconfig.json

@@ -1 +0,0 @@
-{"ignore_dirs":[]}