@coorpacademy/components 10.1.1 → 10.1.2

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/molecule/card-content/index.js"],"names":["MODES","HERO","CARD","ContentTypeInfo","mode","type","externalContent","context","translate","style","microLearningIcon","microLearninglabel","EXTERNAL_CONTENT_ICONS","textColor","color","contentTypeInfo","contextTypes","skin","Provider","childContextTypes","propTypes","PropTypes","bool","string","CardTitle","title","empty","courseContent","innerHTML","lightTitle","darkTitle","__html","AuthorName","author","certifiedAuthor","checkIcon","authorIcon","iconShadow","darkAuthorTitle","ContentInfo","adaptiv","disabled","progress","progressBarColor","inlineProgressValueStyle","backgroundColor","width","chapterContent","progressBar","progressWrapper","hideProgressBar","adaptiveIcon","infoWrapper","hero","card","progressBarDisabled","cardInfo","microLearningCardInfo","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isNil} from 'lodash/fp';\nimport {\n  NovaCompositionCoorpacademyAdaptive as AdaptivIcon,\n  NovaSolidStatusCheckCircle2 as CheckIcon,\n  NovaCompositionCoorpacademyTimer as TimerIcon\n} from '@coorpacademy/nova-icons';\nimport {isExternalContent, EXTERNAL_CONTENT_ICONS} from '../../util/external-content';\nimport Provider from '../../atom/provider';\nimport {innerHTML} from '../../atom/label/style.css';\nimport style from './style.css';\n\nexport const MODES = {\n  HERO: 'hero',\n  CARD: 'card'\n};\n\nconst ContentTypeInfo = ({mode, type, externalContent}, context) => {\n  const {translate} = context;\n  if (mode !== MODES.CARD) {\n    return null;\n  }\n\n  if (type === 'chapter') {\n    return (\n      <div className={style.microLearningIcon}>\n        <TimerIcon height={40} width={40} />\n        <span className={style.microLearninglabel}>{\"5' learning\"}</span>\n      </div>\n    );\n  }\n  if (externalContent && EXTERNAL_CONTENT_ICONS[type]) {\n    const textColor = EXTERNAL_CONTENT_ICONS[type].color;\n\n    return (\n      <div className={style.contentTypeInfo} style={{color: textColor}}>\n        {type === 'scorm' ? translate('external_content_scorm') : ''}\n        {type === 'video' ? translate('external_content_video') : ''}\n        {type === 'article' ? translate('external_content_article') : ''}\n        {type === 'podcast' ? translate('external_content_podcast') : ''}\n      </div>\n    );\n  }\n\n  return null;\n};\n\nContentTypeInfo.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nContentTypeInfo.propTypes = {\n  externalContent: PropTypes.bool,\n  type: PropTypes.string,\n  mode: PropTypes.string\n};\n\nconst CardTitle = ({title, empty, courseContent}) => {\n  return (\n    <div\n      className={classnames(\n        style.title,\n        innerHTML,\n        courseContent ? style.lightTitle : style.darkTitle,\n        empty ? style.empty : null\n      )}\n      data-name=\"title\"\n      title={title}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{__html: title}}\n    />\n  );\n};\n\nCardTitle.propTypes = {\n  title: PropTypes.string,\n  empty: PropTypes.bool,\n  courseContent: PropTypes.bool\n};\n\nconst AuthorName = ({author, empty, courseContent, certifiedAuthor}) => {\n  const checkIcon = certifiedAuthor ? (\n    <CheckIcon\n      className={classnames(style.authorIcon, courseContent ? style.iconShadow : null)}\n      color=\"inherit\"\n    />\n  ) : null;\n\n  return (\n    <div\n      data-name=\"author\"\n      title={author}\n      className={classnames(\n        style.author,\n        courseContent ? style.lightTitle : style.darkAuthorTitle,\n        empty ? style.empty : null\n      )}\n    >\n      <span>{author}</span>\n      {checkIcon}\n    </div>\n  );\n};\n\nAuthorName.propTypes = {\n  author: PropTypes.string,\n  empty: PropTypes.bool,\n  courseContent: PropTypes.bool,\n  certifiedAuthor: PropTypes.bool\n};\n\nconst ContentInfo = ({\n  adaptiv,\n  author,\n  certifiedAuthor = false,\n  disabled = false,\n  empty = false,\n  mode = MODES.CARD,\n  progress,\n  title,\n  type\n}) => {\n  const progressBarColor = '#3EC483';\n  const inlineProgressValueStyle = {\n    backgroundColor: progressBarColor,\n    width: `${progress * 100}%`\n  };\n  const externalContent = isExternalContent(type);\n  const courseContent = type === 'course';\n  const chapterContent = type === 'chapter';\n\n  const progressBar =\n    mode === MODES.HERO || (!empty && !disabled) ? (\n      <div className={!isNil(progress) ? style.progressWrapper : style.hideProgressBar}>\n        {!disabled ? (\n          <div data-name=\"progress\" className={style.progress} style={inlineProgressValueStyle} />\n        ) : null}\n      </div>\n    ) : null;\n\n  const adaptiveIcon = adaptiv ? (\n    <div className={classnames(style.adaptiveIcon, courseContent ? style.iconShadow : null)}>\n      <AdaptivIcon height={25} />\n    </div>\n  ) : null;\n\n  return (\n    <div\n      data-name=\"info\"\n      className={classnames(\n        style.infoWrapper,\n        mode === MODES.HERO ? style.hero : style.card,\n        disabled ? style.progressBarDisabled : null,\n        externalContent ? style.externalContent : null\n      )}\n    >\n      <ContentTypeInfo mode={mode} type={type} externalContent={externalContent} />\n      <div\n        className={classnames(style.cardInfo, chapterContent ? style.microLearningCardInfo : null)}\n      >\n        {adaptiveIcon}\n        <CardTitle title={title} empty={empty} courseContent={courseContent} />\n        <AuthorName\n          author={author}\n          empty={empty}\n          courseContent={courseContent}\n          certifiedAuthor={certifiedAuthor}\n        />\n      </div>\n      {progressBar}\n    </div>\n  );\n};\n\nContentInfo.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nContentInfo.propTypes = {\n  adaptiv: PropTypes.bool,\n  author: PropTypes.string,\n  certifiedAuthor: PropTypes.bool,\n  disabled: PropTypes.bool,\n  empty: PropTypes.bool,\n  progress: PropTypes.number,\n  title: PropTypes.string,\n  type: PropTypes.string,\n  mode: PropTypes.string\n};\n\nexport default ContentInfo;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/molecule/card-content/index.js"],"names":["MODES","HERO","CARD","ContentTypeInfo","mode","type","externalContent","context","translate","style","microLearningIcon","microLearninglabel","EXTERNAL_CONTENT_ICONS","textColor","color","contentTypeInfo","contextTypes","skin","Provider","childContextTypes","propTypes","PropTypes","bool","string","CardTitle","title","empty","courseContent","innerHTML","lightTitle","darkTitle","__html","AuthorName","author","certifiedAuthor","checkIcon","authorIcon","iconShadow","darkAuthorTitle","ContentInfo","adaptiv","disabled","progress","badgeCategory","badgeLabel","progressBarColor","inlineProgressValueStyle","backgroundColor","width","chapterContent","progressBar","progressWrapper","hideProgressBar","adaptiveIcon","infoWrapper","hero","card","progressBarDisabled","cardInfo","microLearningCardInfo","iconWrapper","number","ContentBadge","category","label"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isNil} from 'lodash/fp';\nimport {\n  NovaCompositionCoorpacademyAdaptive as AdaptivIcon,\n  NovaSolidStatusCheckCircle2 as CheckIcon,\n  NovaCompositionCoorpacademyTimer as TimerIcon\n} from '@coorpacademy/nova-icons';\nimport {isExternalContent, EXTERNAL_CONTENT_ICONS} from '../../util/external-content';\nimport Provider from '../../atom/provider';\nimport ContentBadge from '../../atom/content-badge';\nimport {innerHTML} from '../../atom/label/style.css';\nimport style from './style.css';\n\nexport const MODES = {\n  HERO: 'hero',\n  CARD: 'card'\n};\n\nconst ContentTypeInfo = ({mode, type, externalContent}, context) => {\n  const {translate} = context;\n  if (mode !== MODES.CARD) {\n    return null;\n  }\n\n  if (type === 'chapter') {\n    return (\n      <div className={style.microLearningIcon}>\n        <TimerIcon height={40} width={40} />\n        <span className={style.microLearninglabel}>{\"5' learning\"}</span>\n      </div>\n    );\n  }\n  if (externalContent && EXTERNAL_CONTENT_ICONS[type]) {\n    const textColor = EXTERNAL_CONTENT_ICONS[type].color;\n\n    return (\n      <div className={style.contentTypeInfo} style={{color: textColor}}>\n        {type === 'scorm' ? translate('external_content_scorm') : ''}\n        {type === 'video' ? translate('external_content_video') : ''}\n        {type === 'article' ? translate('external_content_article') : ''}\n        {type === 'podcast' ? translate('external_content_podcast') : ''}\n      </div>\n    );\n  }\n\n  return null;\n};\n\nContentTypeInfo.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nContentTypeInfo.propTypes = {\n  externalContent: PropTypes.bool,\n  type: PropTypes.string,\n  mode: PropTypes.string\n};\n\nconst CardTitle = ({title, empty, courseContent}) => {\n  return (\n    <div\n      className={classnames(\n        style.title,\n        innerHTML,\n        courseContent ? style.lightTitle : style.darkTitle,\n        empty ? style.empty : null\n      )}\n      data-name=\"title\"\n      title={title}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{__html: title}}\n    />\n  );\n};\n\nCardTitle.propTypes = {\n  title: PropTypes.string,\n  empty: PropTypes.bool,\n  courseContent: PropTypes.bool\n};\n\nconst AuthorName = ({author, empty, courseContent, certifiedAuthor}) => {\n  const checkIcon = certifiedAuthor ? (\n    <CheckIcon\n      className={classnames(style.authorIcon, courseContent ? style.iconShadow : null)}\n      color=\"inherit\"\n    />\n  ) : null;\n\n  return (\n    <div\n      data-name=\"author\"\n      title={author}\n      className={classnames(\n        style.author,\n        courseContent ? style.lightTitle : style.darkAuthorTitle,\n        empty ? style.empty : null\n      )}\n    >\n      <span>{author}</span>\n      {checkIcon}\n    </div>\n  );\n};\n\nAuthorName.propTypes = {\n  author: PropTypes.string,\n  empty: PropTypes.bool,\n  courseContent: PropTypes.bool,\n  certifiedAuthor: PropTypes.bool\n};\n\nconst ContentInfo = ({\n  adaptiv,\n  author,\n  certifiedAuthor = false,\n  disabled = false,\n  empty = false,\n  mode = MODES.CARD,\n  progress,\n  title,\n  type,\n  badgeCategory,\n  badgeLabel\n}) => {\n  const progressBarColor = '#3EC483';\n  const inlineProgressValueStyle = {\n    backgroundColor: progressBarColor,\n    width: `${progress * 100}%`\n  };\n  const externalContent = isExternalContent(type);\n  const courseContent = type === 'course';\n  const chapterContent = type === 'chapter';\n\n  const progressBar =\n    mode === MODES.HERO || (!empty && !disabled) ? (\n      <div className={!isNil(progress) ? style.progressWrapper : style.hideProgressBar}>\n        {!disabled ? (\n          <div data-name=\"progress\" className={style.progress} style={inlineProgressValueStyle} />\n        ) : null}\n      </div>\n    ) : null;\n\n  const adaptiveIcon = adaptiv ? (\n    <div className={classnames(style.adaptiveIcon, courseContent ? style.iconShadow : null)}>\n      <AdaptivIcon height={25} />\n    </div>\n  ) : null;\n\n  return (\n    <div\n      data-name=\"info\"\n      className={classnames(\n        style.infoWrapper,\n        mode === MODES.HERO ? style.hero : style.card,\n        disabled ? style.progressBarDisabled : null,\n        externalContent ? style.externalContent : null\n      )}\n    >\n      <ContentTypeInfo mode={mode} type={type} externalContent={externalContent} />\n      <div\n        className={classnames(style.cardInfo, chapterContent ? style.microLearningCardInfo : null)}\n      >\n        <div className={style.iconWrapper}>\n          {adaptiveIcon}\n          {!empty && badgeLabel && badgeCategory && courseContent ? (\n            <ContentBadge category={badgeCategory} label={badgeLabel} />\n          ) : null}\n        </div>\n        <CardTitle title={title} empty={empty} courseContent={courseContent} />\n        <AuthorName\n          author={author}\n          empty={empty}\n          courseContent={courseContent}\n          certifiedAuthor={certifiedAuthor}\n        />\n      </div>\n      {progressBar}\n    </div>\n  );\n};\n\nContentInfo.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nContentInfo.propTypes = {\n  adaptiv: PropTypes.bool,\n  author: PropTypes.string,\n  certifiedAuthor: PropTypes.bool,\n  disabled: PropTypes.bool,\n  empty: PropTypes.bool,\n  progress: PropTypes.number,\n  title: PropTypes.string,\n  type: PropTypes.string,\n  mode: PropTypes.string,\n  badgeCategory: ContentBadge.propTypes.category,\n  badgeLabel: ContentBadge.propTypes.label\n};\n\nexport default ContentInfo;\n"],"file":"index.js"}

package/lib/molecule/card-content/style.css

@@ -13,20 +13,23 @@
 .microLearningCardInfo {
   flex: 1 0 auto;
 }
+
 .microLearningIcon {
   display: flex;
   flex-direction: column;
   align-self: center;
   margin-top: 53px;
 }
+
 .microLearningIcon svg {
   background:white;
   border-radius: 50%;
-  margin: 0px auto;
+  margin: 0 auto;
   padding: 3px;
   box-sizing: content-box; 
   color: lightBlack;
 }
+
 .microLearninglabel {
   font-family: 'Open Sans';
   font-size: 10px;
@@ -34,6 +37,7 @@
   color: lightBlack;
   text-transform: uppercase;
 }
+
 .infoWrapper {
   display: flex;
   flex-direction: column;
@@ -60,7 +64,7 @@
 }
 
 .darkTitle {
-  color: lightBlack
+  color: lightBlack;
 }
 
 .darkAuthorTitle {
@@ -138,8 +142,13 @@
   font-size: 5px;
   width: 25px;
   height: 25px;
-  margin-top: -25px;
   color: lightBlack;
+  margin-right: 5px;
+}
+
+.iconWrapper {
+  display: flex;
+  align-items: center;
 }
 
 .authorIcon {
@@ -183,6 +192,7 @@
   font-size: 10px;
   font-weight: 700;
 }
+
 .externalContent .cardInfo {
   flex-grow: 2;
   max-height: 115px;

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

@@ -0,0 +1,89 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _novaIcons = require("@coorpacademy/nova-icons");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _button = _interopRequireDefault(require("../../atom/button"));
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const CMPopin = props => {
+  const {
+    content,
+    firstButton,
+    secondButton,
+    onClose,
+    icon
+  } = props;
+  const logo = {
+    AlertDiamond: _novaIcons.NovaSolidInterfaceFeedbackInterfaceAlertDiamond,
+    WindowUpload: _novaIcons.NovaSolidApplicationsWindowUpload3
+  };
+  const LogoComponent = logo[icon];
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.background
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.popin
+  }, /*#__PURE__*/_react.default.createElement("header", {
+    className: _style.default.popinHeader
+  }, onClose ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.headerCloseIconContainer,
+    onClick: onClose,
+    "data-name": 'close-icon'
+  }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaSolidStatusClose, {
+    className: _style.default.headerCloseIcon
+  })) : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.contentSection
+  }, LogoComponent ? /*#__PURE__*/_react.default.createElement(LogoComponent, {
+    className: _style.default.icon
+  }) : null, /*#__PURE__*/_react.default.createElement("p", {
+    className: _style.default.content,
+    "data-name": `cm-popin-content` // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: content
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.buttonContainer
+  }, firstButton ? /*#__PURE__*/_react.default.createElement(_button.default, {
+    submitValue: firstButton.label,
+    onClick: firstButton.handleOnclick,
+    name: `cm-popin-cta`,
+    className: _style.default.button,
+    buttonContentClassName: _style.default.buttonContent
+  }) : null, secondButton ? /*#__PURE__*/_react.default.createElement(_button.default, {
+    submitValue: secondButton.label,
+    onClick: secondButton.handleOnclick,
+    name: `cm-popin-cta-${secondButton.type}`,
+    className: _style.default.button,
+    buttonContentClassName: (0, _classnames.default)([_style.default.buttonContent, secondButton.type === 'dangerous' ? _style.default.dangerousButton : _style.default.coloredButton])
+  }) : null)), ")");
+};
+
+CMPopin.propTypes = process.env.NODE_ENV !== "production" ? {
+  content: _propTypes.default.string,
+  firstButton: _propTypes.default.shape({
+    label: _propTypes.default.string,
+    handleOnclick: _propTypes.default.func
+  }),
+  secondButton: _propTypes.default.shape({
+    label: _propTypes.default.string,
+    handleOnclick: _propTypes.default.func,
+    type: _propTypes.default.oneOf(['warning', 'warningWithClose', 'dangerous', 'default'])
+  }),
+  onClose: _propTypes.default.func,
+  icon: _propTypes.default.string
+} : {};
+var _default = CMPopin;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/molecule/cm-popin/index.js"],"names":["CMPopin","props","content","firstButton","secondButton","onClose","icon","logo","AlertDiamond","WindowUpload","LogoComponent","style","background","popin","popinHeader","headerCloseIconContainer","headerCloseIcon","contentSection","__html","buttonContainer","label","handleOnclick","button","buttonContent","type","dangerousButton","coloredButton","propTypes","PropTypes","string","shape","func","oneOf"],"mappings":";;;;;AAAA;;AACA;;AACA;;AAKA;;AACA;;AACA;;;;AAEA,MAAMA,OAAO,GAAGC,KAAK,IAAI;AACvB,QAAM;AAACC,IAAAA,OAAD;AAAUC,IAAAA,WAAV;AAAuBC,IAAAA,YAAvB;AAAqCC,IAAAA,OAArC;AAA8CC,IAAAA;AAA9C,MAAsDL,KAA5D;AAEA,QAAMM,IAAI,GAAG;AACXC,IAAAA,YAAY,EAAZA,0DADW;AAEXC,IAAAA,YAAY,EAAZA;AAFW,GAAb;AAIA,QAAMC,aAAa,GAAGH,IAAI,CAACD,IAAD,CAA1B;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEK,eAAMC;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAED,eAAME;AAAtB,kBACE;AAAQ,IAAA,SAAS,EAAEF,eAAMG;AAAzB,KACGT,OAAO,gBACN;AACE,IAAA,SAAS,EAAEM,eAAMI,wBADnB;AAEE,IAAA,OAAO,EAAEV,OAFX;AAGE,iBAAW;AAHb,kBAKE,6BAAC,+BAAD;AAAO,IAAA,SAAS,EAAEM,eAAMK;AAAxB,IALF,CADM,GAQJ,IATN,CADF,eAYE;AAAK,IAAA,SAAS,EAAEL,eAAMM;AAAtB,KACGP,aAAa,gBAAG,6BAAC,aAAD;AAAe,IAAA,SAAS,EAAEC,eAAML;AAAhC,IAAH,GAA8C,IAD9D,eAEE;AACE,IAAA,SAAS,EAAEK,eAAMT,OADnB;AAEE,iBAAY,kBAFd,CAGE;AAHF;AAIE,IAAA,uBAAuB,EAAE;AAACgB,MAAAA,MAAM,EAAEhB;AAAT;AAJ3B,IAFF,CAZF,eAsBE;AAAK,IAAA,SAAS,EAAES,eAAMQ;AAAtB,KACGhB,WAAW,gBACV,6BAAC,eAAD;AACE,IAAA,WAAW,EAAEA,WAAW,CAACiB,KAD3B;AAEE,IAAA,OAAO,EAAEjB,WAAW,CAACkB,aAFvB;AAGE,IAAA,IAAI,EAAG,cAHT;AAIE,IAAA,SAAS,EAAEV,eAAMW,MAJnB;AAKE,IAAA,sBAAsB,EAAEX,eAAMY;AALhC,IADU,GAQR,IATN,EAUGnB,YAAY,gBACX,6BAAC,eAAD;AACE,IAAA,WAAW,EAAEA,YAAY,CAACgB,KAD5B;AAEE,IAAA,OAAO,EAAEhB,YAAY,CAACiB,aAFxB;AAGE,IAAA,IAAI,EAAG,gBAAejB,YAAY,CAACoB,IAAK,EAH1C;AAIE,IAAA,SAAS,EAAEb,eAAMW,MAJnB;AAKE,IAAA,sBAAsB,EAAE,yBAAW,CACjCX,eAAMY,aAD2B,EAEjCnB,YAAY,CAACoB,IAAb,KAAsB,WAAtB,GAAoCb,eAAMc,eAA1C,GAA4Dd,eAAMe,aAFjC,CAAX;AAL1B,IADW,GAWT,IArBN,CAtBF,CADF,MADF;AAmDD,CA5DD;;AA8DA1B,OAAO,CAAC2B,SAAR,2CAAoB;AAClBzB,EAAAA,OAAO,EAAE0B,mBAAUC,MADD;AAElB1B,EAAAA,WAAW,EAAEyB,mBAAUE,KAAV,CAAgB;AAC3BV,IAAAA,KAAK,EAAEQ,mBAAUC,MADU;AAE3BR,IAAAA,aAAa,EAAEO,mBAAUG;AAFE,GAAhB,CAFK;AAMlB3B,EAAAA,YAAY,EAAEwB,mBAAUE,KAAV,CAAgB;AAC5BV,IAAAA,KAAK,EAAEQ,mBAAUC,MADW;AAE5BR,IAAAA,aAAa,EAAEO,mBAAUG,IAFG;AAG5BP,IAAAA,IAAI,EAAEI,mBAAUI,KAAV,CAAgB,CAAC,SAAD,EAAY,kBAAZ,EAAgC,WAAhC,EAA6C,SAA7C,CAAhB;AAHsB,GAAhB,CANI;AAWlB3B,EAAAA,OAAO,EAAEuB,mBAAUG,IAXD;AAYlBzB,EAAAA,IAAI,EAAEsB,mBAAUC;AAZE,CAApB;eAee7B,O","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  NovaSolidInterfaceFeedbackInterfaceAlertDiamond as AlertDiamond,\n  NovaSolidApplicationsWindowUpload3 as WindowUpload,\n  NovaSolidStatusClose as Close\n} from '@coorpacademy/nova-icons';\nimport classNames from 'classnames';\nimport Cta from '../../atom/button';\nimport style from './style.css';\n\nconst CMPopin = props => {\n  const {content, firstButton, secondButton, onClose, icon} = props;\n\n  const logo = {\n    AlertDiamond,\n    WindowUpload\n  };\n  const LogoComponent = logo[icon];\n\n  return (\n    <div className={style.background}>\n      <div className={style.popin}>\n        <header className={style.popinHeader}>\n          {onClose ? (\n            <div\n              className={style.headerCloseIconContainer}\n              onClick={onClose}\n              data-name={'close-icon'}\n            >\n              <Close className={style.headerCloseIcon} />\n            </div>\n          ) : null}\n        </header>\n        <div className={style.contentSection}>\n          {LogoComponent ? <LogoComponent className={style.icon} /> : null}\n          <p\n            className={style.content}\n            data-name={`cm-popin-content`}\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: content}}\n          />\n        </div>\n\n        <div className={style.buttonContainer}>\n          {firstButton ? (\n            <Cta\n              submitValue={firstButton.label}\n              onClick={firstButton.handleOnclick}\n              name={`cm-popin-cta`}\n              className={style.button}\n              buttonContentClassName={style.buttonContent}\n            />\n          ) : null}\n          {secondButton ? (\n            <Cta\n              submitValue={secondButton.label}\n              onClick={secondButton.handleOnclick}\n              name={`cm-popin-cta-${secondButton.type}`}\n              className={style.button}\n              buttonContentClassName={classNames([\n                style.buttonContent,\n                secondButton.type === 'dangerous' ? style.dangerousButton : style.coloredButton\n              ])}\n            />\n          ) : null}\n        </div>\n      </div>\n      )\n    </div>\n  );\n};\n\nCMPopin.propTypes = {\n  content: PropTypes.string,\n  firstButton: PropTypes.shape({\n    label: PropTypes.string,\n    handleOnclick: PropTypes.func\n  }),\n  secondButton: PropTypes.shape({\n    label: PropTypes.string,\n    handleOnclick: PropTypes.func,\n    type: PropTypes.oneOf(['warning', 'warningWithClose', 'dangerous', 'default'])\n  }),\n  onClose: PropTypes.func,\n  icon: PropTypes.string\n};\n\nexport default CMPopin;\n"],"file":"index.js"}

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

@@ -0,0 +1,157 @@
+@value colors: "../../variables/colors.css";
+@value dark from colors;
+@value brand from colors;
+@value light from colors;
+@value black from colors;
+@value cm_grey_800 from colors;
+@value negative from colors;
+@value lightGreen from colors;
+@value cm_grey_50 from colors;
+@value cm_negative_100 from colors;
+@value cm_negative_200 from colors;
+@value cm_primary_blue from colors;
+@value cm_grey_100 from colors;
+@value cm_grey_200 from colors;
+@value cm_blue_600 from colors;
+
+
+.background {
+  top: 0px;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 15% 25%;
+  background-color: rgba(0, 0, 0, 0.2);
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  overflow: hidden;
+  display: flex;
+}
+
+.popin {
+  position: absolute;
+  overflow: auto;
+  width: 500px;
+  height: 414px;
+  flex-grow: 0;
+  margin: 16px;
+  padding: 16px 16px 20px 16px;
+  border-radius: 20px;
+  background-color: cm_grey_50;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.contentSection {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 65%;
+}
+
+.content {
+  font-family: Gilroy;
+  font-size: 20px;
+  font-weight: bold;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.4;
+  letter-spacing: normal;
+  text-align: center;
+  color: cm_grey_800;
+}
+
+.buttonContainer {
+  width: 100%;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.button {
+  min-width: auto;
+  margin: 0px 8px;
+  border-radius: 7px;
+  transform: none;
+}
+
+.dangerousButton {
+  background-color: cm_negative_100;
+  color: white;
+}
+
+.coloredButton {
+  background-color: cm_primary_blue;
+  color: white;
+}
+
+.dangerousButton:hover {
+  background-color: cm_negative_200;
+}
+
+.coloredButton:hover {
+  background-color: cm_blue_600;
+}
+
+.button::after,
+.button:hover::after,
+.button:focus::after,
+.button:active::after {
+  transform: none;
+}
+
+
+.buttonContent {
+  width: 180px;
+  padding: 12px 24px;
+  line-height: 1.43;
+  font-size: 14px;
+  font-weight: bold;
+  display: block;
+  text-transform: inherit;
+  font-family: Gilroy;
+  text-align: center;
+  box-sizing: border-box;
+  border: none;
+  cursor: pointer;
+}
+.icon {
+  width: 60px;
+  height: 60px;
+  color: cm_grey_800;
+}
+
+.headerCloseIconContainer {
+  width: 44px;
+  height: 44px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-top: 16px;
+  margin-right: 16px;
+  border-radius: 7px;
+  cursor: pointer;
+  background-color: cm_grey_100;
+}
+
+.headerCloseIconContainer:hover {
+  background-color: cm_grey_200;
+}
+
+.headerCloseIcon {
+  width: 18px;
+  height: 18px;
+  color: cm_grey_800;
+}
+
+.popinHeader {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}

package/lib/molecule/cm-popin/test/fixtures/dangerous.js

@@ -0,0 +1,21 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  props: {
+    content: 'Are you sure to undo this changes? This will be permanent',
+    icon: 'AlertDiamond',
+    firstButton: {
+      label: 'Cancel',
+      handleOnClick: () => {}
+    },
+    secondButton: {
+      label: 'Undo',
+      type: 'dangerous',
+      handleOnClick: () => {}
+    }
+  }
+};
+exports.default = _default;
+//# sourceMappingURL=dangerous.js.map

package/lib/molecule/cm-popin/test/fixtures/dangerous.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/cm-popin/test/fixtures/dangerous.js"],"names":["props","content","icon","firstButton","label","handleOnClick","secondButton","type"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE,2DADJ;AAELC,IAAAA,IAAI,EAAE,cAFD;AAGLC,IAAAA,WAAW,EAAE;AACXC,MAAAA,KAAK,EAAE,QADI;AAEXC,MAAAA,aAAa,EAAE,MAAM,CAAE;AAFZ,KAHR;AAOLC,IAAAA,YAAY,EAAE;AACZF,MAAAA,KAAK,EAAE,MADK;AAEZG,MAAAA,IAAI,EAAE,WAFM;AAGZF,MAAAA,aAAa,EAAE,MAAM,CAAE;AAHX;AAPT;AADM,C","sourcesContent":["export default {\n  props: {\n    content: 'Are you sure to undo this changes? This will be permanent',\n    icon: 'AlertDiamond',\n    firstButton: {\n      label: 'Cancel',\n      handleOnClick: () => {}\n    },\n    secondButton: {\n      label: 'Undo',\n      type: 'dangerous',\n      handleOnClick: () => {}\n    }\n  }\n};\n"],"file":"dangerous.js"}

package/lib/molecule/cm-popin/test/fixtures/default.js

@@ -0,0 +1,21 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  props: {
+    content: 'Do you want to publish the custom playlist?',
+    icon: 'WindowUpload',
+    firstButton: {
+      label: 'Cancel',
+      handleOnClick: () => {}
+    },
+    secondButton: {
+      label: 'Undo',
+      type: 'warning',
+      handleOnClick: () => {}
+    }
+  }
+};
+exports.default = _default;
+//# sourceMappingURL=default.js.map

package/lib/molecule/cm-popin/test/fixtures/default.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/cm-popin/test/fixtures/default.js"],"names":["props","content","icon","firstButton","label","handleOnClick","secondButton","type"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE,6CADJ;AAELC,IAAAA,IAAI,EAAE,cAFD;AAGLC,IAAAA,WAAW,EAAE;AACXC,MAAAA,KAAK,EAAE,QADI;AAEXC,MAAAA,aAAa,EAAE,MAAM,CAAE;AAFZ,KAHR;AAOLC,IAAAA,YAAY,EAAE;AACZF,MAAAA,KAAK,EAAE,MADK;AAEZG,MAAAA,IAAI,EAAE,SAFM;AAGZF,MAAAA,aAAa,EAAE,MAAM,CAAE;AAHX;AAPT;AADM,C","sourcesContent":["export default {\n  props: {\n    content: 'Do you want to publish the custom playlist?',\n    icon: 'WindowUpload',\n    firstButton: {\n      label: 'Cancel',\n      handleOnClick: () => {}\n    },\n    secondButton: {\n      label: 'Undo',\n      type: 'warning',\n      handleOnClick: () => {}\n    }\n  }\n};\n"],"file":"default.js"}

package/lib/molecule/cm-popin/test/fixtures/warning-with-close.js

@@ -0,0 +1,22 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  props: {
+    content: 'Do you want to save changes before quiting?',
+    icon: 'AlertDiamond',
+    firstButton: {
+      label: 'Quit without saving',
+      handleOnClick: () => {}
+    },
+    secondButton: {
+      label: 'Save & Quit',
+      type: 'warningWithClose',
+      handleOnClick: () => {}
+    },
+    onClose: () => console.log('onClose')
+  }
+};
+exports.default = _default;
+//# sourceMappingURL=warning-with-close.js.map

package/lib/molecule/cm-popin/test/fixtures/warning-with-close.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/cm-popin/test/fixtures/warning-with-close.js"],"names":["props","content","icon","firstButton","label","handleOnClick","secondButton","type","onClose","console","log"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE,6CADJ;AAELC,IAAAA,IAAI,EAAE,cAFD;AAGLC,IAAAA,WAAW,EAAE;AACXC,MAAAA,KAAK,EAAE,qBADI;AAEXC,MAAAA,aAAa,EAAE,MAAM,CAAE;AAFZ,KAHR;AAOLC,IAAAA,YAAY,EAAE;AACZF,MAAAA,KAAK,EAAE,aADK;AAEZG,MAAAA,IAAI,EAAE,kBAFM;AAGZF,MAAAA,aAAa,EAAE,MAAM,CAAE;AAHX,KAPT;AAYLG,IAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,SAAZ;AAZV;AADM,C","sourcesContent":["export default {\n  props: {\n    content: 'Do you want to save changes before quiting?',\n    icon: 'AlertDiamond',\n    firstButton: {\n      label: 'Quit without saving',\n      handleOnClick: () => {}\n    },\n    secondButton: {\n      label: 'Save & Quit',\n      type: 'warningWithClose',\n      handleOnClick: () => {}\n    },\n    onClose: () => console.log('onClose')\n  }\n};\n"],"file":"warning-with-close.js"}

package/lib/molecule/cockpit-popin/test/fixtures.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _ava = _interopRequireDefault(require("ava"));
+
+var _forEach = _interopRequireDefault(require("lodash/forEach"));
+
+var _renderComponent = _interopRequireDefault(require("../../../test/helpers/render-component"));
+
+var _ = _interopRequireDefault(require(".."));
+
+var _default = _interopRequireDefault(require("./fixtures/default"));
+
+var _loading = _interopRequireDefault(require("./fixtures/loading"));
+
+var _videoTranslate = _interopRequireDefault(require("./fixtures/video-translate"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+(0, _ava.default)('Molecule › MoleculeCockpitPopin > should have valid propTypes', t => {
+  t.pass();
+  (0, _forEach.default)(_.default.propTypes, (value, key) => {
+    t.not(value, undefined, `PropType for "Molecule.MoleculeCockpitPopin.propTypes.${key}" may not be undefined. Did you mistype the propTypes definition?`);
+  });
+});
+(0, _ava.default)('Molecule › MoleculeCockpitPopin › Default › should be rendered', _renderComponent.default, _.default, _default.default);
+(0, _ava.default)('Molecule › MoleculeCockpitPopin › Loading › should be rendered', _renderComponent.default, _.default, _loading.default);
+(0, _ava.default)('Molecule › MoleculeCockpitPopin › VideoTranslate › should be rendered', _renderComponent.default, _.default, _videoTranslate.default);
+//# sourceMappingURL=fixtures.js.map

package/lib/molecule/cockpit-popin/test/fixtures.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/molecule/cockpit-popin/test/fixtures.js"],"names":["t","pass","MoleculeCockpitPopin","propTypes","value","key","not","undefined","renderComponentMacro","fixtureDefault","fixtureLoading","fixtureVideoTranslate"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,+DAAL,EAAsEA,CAAC,IAAI;AACzEA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAAqBC,SAA7B,EAAwC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACtDL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,yDAAwDF,GAAI,mEAArF;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,gEAAL,EAAuEG,wBAAvE,EAA6FN,SAA7F,EAAmHO,gBAAnH;AACA,kBAAK,gEAAL,EAAuED,wBAAvE,EAA6FN,SAA7F,EAAmHQ,gBAAnH;AACA,kBAAK,uEAAL,EAA8EF,wBAA9E,EAAoGN,SAApG,EAA0HS,uBAA1H","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport MoleculeCockpitPopin from '..';\nimport fixtureDefault from './fixtures/default';\nimport fixtureLoading from './fixtures/loading';\nimport fixtureVideoTranslate from './fixtures/video-translate';\n\ntest('Molecule › MoleculeCockpitPopin > should have valid propTypes', t => {\n  t.pass();\n  forEach(MoleculeCockpitPopin.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"Molecule.MoleculeCockpitPopin.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('Molecule › MoleculeCockpitPopin › Default › should be rendered', renderComponentMacro, MoleculeCockpitPopin, fixtureDefault);\ntest('Molecule › MoleculeCockpitPopin › Loading › should be rendered', renderComponentMacro, MoleculeCockpitPopin, fixtureLoading);\ntest('Molecule › MoleculeCockpitPopin › VideoTranslate › should be rendered', renderComponentMacro, MoleculeCockpitPopin, fixtureVideoTranslate);\n"],"file":"fixtures.js"}

package/lib/molecule/wizard-summary/index.js

@@ -7,6 +7,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _novaIcons = require("@coorpacademy/nova-icons");
 
 var _link = _interopRequireDefault(require("../../atom/link"));
@@ -43,7 +45,8 @@ const buildItemsOfSection = items => {
             category,
             label,
             title,
-            author
+            author,
+            unsaved = false
           } = item;
           return /*#__PURE__*/_react.default.createElement("li", {
             className: _style.default.contentWrapper,
@@ -58,7 +61,7 @@ const buildItemsOfSection = items => {
             category: category,
             label: label
           }), /*#__PURE__*/_react.default.createElement("span", {
-            className: _style.default.contentTitle,
+            className: (0, _classnames.default)(_style.default.contentTitle, unsaved && _style.default.unsaved),
             title: title // eslint-disable-next-line react/no-danger
             ,
             dangerouslySetInnerHTML: {
@@ -71,11 +74,17 @@ const buildItemsOfSection = items => {
 
       case 'text':
       default:
-        return /*#__PURE__*/_react.default.createElement("li", {
-          key: `${item.text}-${index}`
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: _style.default.valueSimpleText
-        }, item.text));
+        {
+          const {
+            text,
+            unsaved = false
+          } = item;
+          return /*#__PURE__*/_react.default.createElement("li", {
+            key: `${item.text}-${index}`
+          }, /*#__PURE__*/_react.default.createElement("span", {
+            className: (0, _classnames.default)(_style.default.valueSimpleText, unsaved && _style.default.unsaved)
+          }, text));
+        }
     }
   });
 };
@@ -133,15 +142,32 @@ const WizardSummary = props => {
     sections,
     action
   } = props;
-  const sectionView = buildSections(sections);
+  const sectionsView = buildSections(sections);
   const actionView = buildAction(action);
+  const idSwitch = 'open-summary-wizard';
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.container
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.default.summaryTitle
-  }, title), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.desktopSummaryTitle
+  }, title), /*#__PURE__*/_react.default.createElement("input", {
+    type: "checkbox",
+    id: idSwitch,
+    name: "toogle",
+    title: idSwitch,
+    className: _style.default.checkbox
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.summary
-  }, sectionView), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.tabletSummaryHeader
+  }, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: idSwitch
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.tabletSummaryTitle
+  }, title), /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationArrowDown, {
+    className: _style.default.tabletSummaryIcon
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.summarySections
+  }, sectionsView)), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.actionZone
   }, actionView));
 };
@@ -156,13 +182,15 @@ WizardSummary.propTypes = process.env.NODE_ENV !== "production" ? {
       value: _propTypes.default.string
     }), _propTypes.default.shape({
       type: _propTypes.default.string,
-      text: _propTypes.default.string
+      text: _propTypes.default.string,
+      unsaved: _propTypes.default.bool
     }), _propTypes.default.shape({
       type: _propTypes.default.string,
       category: _propTypes.default.oneOf(['base', 'advanced', 'coach', 'chapter', 'scorm', 'video', 'article', 'podcast']),
       title: _propTypes.default.string,
       label: _propTypes.default.string,
-      author: _propTypes.default.string
+      author: _propTypes.default.string,
+      unsaved: _propTypes.default.bool
     })])),
     counterText: _propTypes.default.string
   })),