@coorpacademy/components 11.10.3 → 11.10.4-alpha.7

package/lib/molecule/answer/index.js

@@ -25,7 +25,7 @@ var _template = _interopRequireDefault(require("../questions/template"));
 
 var _audio = _interopRequireDefault(require("../audio"));
 
-var _provider = require("../../atom/provider");
+var _provider = _interopRequireWildcard(require("../../atom/provider"));
 
 var _style = _interopRequireDefault(require("./style.css"));
 
@@ -88,11 +88,11 @@ MediaView.propTypes = process.env.NODE_ENV !== "production" ? _propTypes.MediaVi
 const Switch = ({
   model,
   help
-}) => {
+}, legacyContext) => {
   const {
     type
   } = model;
-  const translate = (0, _provider.GetTranslateFromContext)();
+  const translate = (0, _provider.GetTranslateFromContext)(legacyContext);
 
   switch (type) {
     case 'qcmDrag':
@@ -135,6 +135,9 @@ Switch.propTypes = process.env.NODE_ENV !== "production" ? {
   model: _propTypes.default.model,
   help: _propTypes.default.help
 } : {};
+Switch.contextTypes = {
+  translate: _provider.default.childContextTypes.translate
+};
 
 const Answer = props => {
   const {
@@ -154,6 +157,9 @@ const Answer = props => {
 };
 
 Answer.propTypes = process.env.NODE_ENV !== "production" ? _propTypes.default : {};
+Answer.contextTypes = {
+  translate: _provider.default.childContextTypes.translate
+};
 var _default = Answer;
 exports.default = _default;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["MediaView","media","videoId","type","childProps","TYPE_IMAGE","style","backgroundImage","url","TYPE_VIDEO","video","TYPE_AUDIO","audio","propTypes","MediaViewPropTypes","Switch","model","help","translate","GetTranslateFromContext","Answer","props","wrapper"],"sources":["../../../src/molecule/answer/index.js"],"sourcesContent":["import React from 'react';\nimport {omit} from 'lodash/fp';\nimport VideoPlayer from '../video-player';\nimport DropDown from '../questions/drop-down';\nimport FreeText from '../questions/free-text';\nimport QcmDrag from '../questions/qcm-drag';\nimport Qcm from '../questions/qcm';\nimport QcmGraphic from '../questions/qcm-graphic';\nimport QuestionRange from '../questions/question-range';\nimport Template from '../questions/template';\nimport Audio from '../audio';\nimport {GetTranslateFromContext} from '../../atom/provider';\nimport style from './style.css';\nimport propTypes, {MediaViewPropTypes, TYPE_AUDIO, TYPE_IMAGE, TYPE_VIDEO} from './prop-types';\n\nconst MediaView = ({media}) => {\n  const {videoId, type, ...childProps} = media;\n  switch (type) {\n    case TYPE_IMAGE:\n      return (\n        <div\n          className={style.media}\n          style={{\n            backgroundImage: `url(${media.url})`\n          }}\n        />\n      );\n    case TYPE_VIDEO:\n      return (\n        <div className={style.video}>\n          <VideoPlayer {...omit('id', childProps)} id={videoId} height=\"100%\" width=\"100%\" />\n        </div>\n      );\n    case TYPE_AUDIO:\n      return (\n        <div className={style.audio}>\n          <Audio {...omit('id', childProps)} height=\"100%\" width=\"100%\" />\n        </div>\n      );\n    default:\n      return null;\n  }\n};\n\nMediaView.propTypes = MediaViewPropTypes;\n\nconst Switch = ({model, help}) => {\n  const {type} = model;\n  const translate = GetTranslateFromContext();\n  switch (type) {\n    case 'qcmDrag':\n      return <QcmDrag {...model} help={help} groupAriaLabel={translate('answer_the_question')} />;\n    case 'qcm':\n      return <Qcm {...model} groupAriaLabel={translate('answer_the_question')} />;\n    case 'qcmGraphic':\n      return <QcmGraphic {...model} groupAriaLabel={translate('answer_the_question')} />;\n    case 'freeText':\n      return <FreeText {...model} />;\n    case 'dropDown':\n      return <DropDown {...model} groupAriaLabel={translate('answer_the_question')} />;\n    case 'slider':\n      return <QuestionRange {...model} groupAriaLabel={translate('answer_the_question')} />;\n    case 'template':\n      return <Template {...model} groupAriaLabel={translate('answer_the_question')} />;\n  }\n};\n\nSwitch.propTypes = {\n  model: propTypes.model,\n  help: propTypes.help\n};\n\nconst Answer = props => {\n  const {model, media, help} = props;\n\n  return (\n    <div data-name=\"answer\" className={style.wrapper}>\n      {media ? <MediaView media={media} /> : null}\n      <form>\n        <Switch model={model} help={help} />\n      </form>\n    </div>\n  );\n};\n\nAnswer.propTypes = propTypes;\n\nexport default Answer;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["MediaView","media","videoId","type","childProps","TYPE_IMAGE","style","backgroundImage","url","TYPE_VIDEO","video","TYPE_AUDIO","audio","propTypes","MediaViewPropTypes","Switch","model","help","legacyContext","translate","GetTranslateFromContext","contextTypes","Provider","childContextTypes","Answer","props","wrapper"],"sources":["../../../src/molecule/answer/index.js"],"sourcesContent":["import React from 'react';\nimport {omit} from 'lodash/fp';\nimport VideoPlayer from '../video-player';\nimport DropDown from '../questions/drop-down';\nimport FreeText from '../questions/free-text';\nimport QcmDrag from '../questions/qcm-drag';\nimport Qcm from '../questions/qcm';\nimport QcmGraphic from '../questions/qcm-graphic';\nimport QuestionRange from '../questions/question-range';\nimport Template from '../questions/template';\nimport Audio from '../audio';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport style from './style.css';\nimport propTypes, {MediaViewPropTypes, TYPE_AUDIO, TYPE_IMAGE, TYPE_VIDEO} from './prop-types';\n\nconst MediaView = ({media}) => {\n  const {videoId, type, ...childProps} = media;\n  switch (type) {\n    case TYPE_IMAGE:\n      return (\n        <div\n          className={style.media}\n          style={{\n            backgroundImage: `url(${media.url})`\n          }}\n        />\n      );\n    case TYPE_VIDEO:\n      return (\n        <div className={style.video}>\n          <VideoPlayer {...omit('id', childProps)} id={videoId} height=\"100%\" width=\"100%\" />\n        </div>\n      );\n    case TYPE_AUDIO:\n      return (\n        <div className={style.audio}>\n          <Audio {...omit('id', childProps)} height=\"100%\" width=\"100%\" />\n        </div>\n      );\n    default:\n      return null;\n  }\n};\n\nMediaView.propTypes = MediaViewPropTypes;\n\nconst Switch = ({model, help}, legacyContext) => {\n  const {type} = model;\n  const translate = GetTranslateFromContext(legacyContext);\n  switch (type) {\n    case 'qcmDrag':\n      return <QcmDrag {...model} help={help} groupAriaLabel={translate('answer_the_question')} />;\n    case 'qcm':\n      return <Qcm {...model} groupAriaLabel={translate('answer_the_question')} />;\n    case 'qcmGraphic':\n      return <QcmGraphic {...model} groupAriaLabel={translate('answer_the_question')} />;\n    case 'freeText':\n      return <FreeText {...model} />;\n    case 'dropDown':\n      return <DropDown {...model} groupAriaLabel={translate('answer_the_question')} />;\n    case 'slider':\n      return <QuestionRange {...model} groupAriaLabel={translate('answer_the_question')} />;\n    case 'template':\n      return <Template {...model} groupAriaLabel={translate('answer_the_question')} />;\n  }\n};\n\nSwitch.propTypes = {\n  model: propTypes.model,\n  help: propTypes.help\n};\n\nSwitch.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nconst Answer = props => {\n  const {model, media, help} = props;\n\n  return (\n    <div data-name=\"answer\" className={style.wrapper}>\n      {media ? <MediaView media={media} /> : null}\n      <form>\n        <Switch model={model} help={help} />\n      </form>\n    </div>\n  );\n};\n\nAnswer.propTypes = propTypes;\n\nAnswer.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nexport default Answer;\n"],"mappings":"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"}

package/lib/organism/review-header/index.d.ts

@@ -2,6 +2,29 @@ export default ReviewHeader;
 declare function ReviewHeader(props: any, context: any): JSX.Element;
 declare namespace ReviewHeader {
     export { propTypes };
+    export namespace contextTypes {
+        const skin: import("prop-types").Requireable<import("prop-types").InferProps<{
+            common: import("prop-types").Requireable<{
+                [x: string]: any;
+            }>;
+            images: import("prop-types").Requireable<import("prop-types").InferProps<{
+                'logo-mobile': import("prop-types").Requireable<any>;
+                logo: import("prop-types").Requireable<any>;
+                'logo-email': import("prop-types").Requireable<any>;
+                login: import("prop-types").Requireable<any>;
+            }>>;
+            icons: import("prop-types").Requireable<{
+                [x: string]: any;
+            }>;
+            mod: import("prop-types").Requireable<{
+                [x: string]: any;
+            }>;
+            courses: import("prop-types").Requireable<any[]>;
+            texts: import("prop-types").Requireable<{
+                [x: string]: any;
+            }>;
+        }>>;
+    }
 }
 import propTypes from "./types";
 //# sourceMappingURL=index.d.ts.map

package/lib/organism/review-header/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/review-header/index.js"],"names":[],"mappings":";AAQA,qEAuDC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/review-header/index.js"],"names":[],"mappings":";AASA,qEAuDC"}

package/lib/organism/review-header/index.js

@@ -9,6 +9,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _getOr = _interopRequireDefault(require("lodash/fp/getOr"));
 
+var _provider = _interopRequireDefault(require("../../atom/provider"));
+
 var _buttonLinkIconOnly = _interopRequireDefault(require("../../atom/button-link-icon-only"));
 
 var _reviewHeaderSteps = _interopRequireDefault(require("../../molecule/review-header-steps"));
@@ -73,6 +75,9 @@ const ReviewHeader = (props, context) => {
 };
 
 ReviewHeader.propTypes = process.env.NODE_ENV !== "production" ? _types.default : {};
+ReviewHeader.contextTypes = {
+  skin: _provider.default.childContextTypes.skin
+};
 var _default = ReviewHeader;
 exports.default = _default;
 //# sourceMappingURL=index.js.map

package/lib/organism/review-header/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReviewHeader","props","context","steps","mode","skillName","ariaLabel","closeButtonAriaLabel","onQuitClick","hiddenSteps","skin","primarySkinColor","getOr","buttonProps","icon","onClick","size","className","style","review","stepsWrapper","classnames","stepsWrapperAnimation","headerWrapper","titlesWrapper","title","color","iconButtonWrapper","propTypes"],"sources":["../../../src/organism/review-header/index.js"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport getOr from 'lodash/fp/getOr';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport ReviewHeaderSteps from '../../molecule/review-header-steps';\nimport style from './style.css';\nimport propTypes from './types';\n\nconst ReviewHeader = (props, context) => {\n  const {\n    steps,\n    mode,\n    skillName,\n    'aria-label': ariaLabel,\n    closeButtonAriaLabel,\n    onQuitClick,\n    hiddenSteps\n  } = props;\n  const {skin} = context;\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const buttonProps = {\n    icon: 'close',\n    'data-name': 'review-header-close-button',\n    'aria-label': closeButtonAriaLabel,\n    onClick: onQuitClick,\n    size: 'responsive',\n    className: style.review\n  };\n\n  const stepsWrapper = classnames(\n    style.stepsWrapper,\n    hiddenSteps ? style.stepsWrapperAnimation : null\n  );\n\n  return (\n    <div className={style.headerWrapper} data-name=\"review-header\" aria-label={ariaLabel}>\n      <div className={style.titlesWrapper}>\n        <div className={style.title} title={mode} aria-label={mode} data-name=\"review-header-mode\">\n          {mode}\n        </div>\n        <div\n          className={style.skillName}\n          style={{\n            color: primarySkinColor\n          }}\n          title={skillName}\n          aria-label={skillName}\n          data-name=\"review-header-skill-name\"\n        >\n          {skillName}\n        </div>\n      </div>\n\n      <div className={stepsWrapper}>\n        <ReviewHeaderSteps steps={steps} key={'review-header-steps'} />\n      </div>\n\n      <div className={style.iconButtonWrapper} data-testid=\"review-header-close-button-wrapper\">\n        <ButtonLinkIconOnly {...buttonProps} />\n      </div>\n    </div>\n  );\n};\n\nReviewHeader.propTypes = propTypes;\n\nexport default ReviewHeader;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,YAAY,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACvC,MAAM;IACJC,KADI;IAEJC,IAFI;IAGJC,SAHI;IAIJ,cAAcC,SAJV;IAKJC,oBALI;IAMJC,WANI;IAOJC;EAPI,IAQFR,KARJ;EASA,MAAM;IAACS;EAAD,IAASR,OAAf;EACA,MAAMS,gBAAgB,GAAG,IAAAC,cAAA,EAAM,SAAN,EAAiB,gBAAjB,EAAmCF,IAAnC,CAAzB;EAEA,MAAMG,WAAW,GAAG;IAClBC,IAAI,EAAE,OADY;IAElB,aAAa,4BAFK;IAGlB,cAAcP,oBAHI;IAIlBQ,OAAO,EAAEP,WAJS;IAKlBQ,IAAI,EAAE,YALY;IAMlBC,SAAS,EAAEC,cAAA,CAAMC;EANC,CAApB;EASA,MAAMC,YAAY,GAAG,IAAAC,mBAAA,EACnBH,cAAA,CAAME,YADa,EAEnBX,WAAW,GAAGS,cAAA,CAAMI,qBAAT,GAAiC,IAFzB,CAArB;EAKA,oBACE;IAAK,SAAS,EAAEJ,cAAA,CAAMK,aAAtB;IAAqC,aAAU,eAA/C;IAA+D,cAAYjB;EAA3E,gBACE;IAAK,SAAS,EAAEY,cAAA,CAAMM;EAAtB,gBACE;IAAK,SAAS,EAAEN,cAAA,CAAMO,KAAtB;IAA6B,KAAK,EAAErB,IAApC;IAA0C,cAAYA,IAAtD;IAA4D,aAAU;EAAtE,GACGA,IADH,CADF,eAIE;IACE,SAAS,EAAEc,cAAA,CAAMb,SADnB;IAEE,KAAK,EAAE;MACLqB,KAAK,EAAEf;IADF,CAFT;IAKE,KAAK,EAAEN,SALT;IAME,cAAYA,SANd;IAOE,aAAU;EAPZ,GASGA,SATH,CAJF,CADF,eAkBE;IAAK,SAAS,EAAEe;EAAhB,gBACE,6BAAC,0BAAD;IAAmB,KAAK,EAAEjB,KAA1B;IAAiC,GAAG,EAAE;EAAtC,EADF,CAlBF,eAsBE;IAAK,SAAS,EAAEe,cAAA,CAAMS,iBAAtB;IAAyC,eAAY;EAArD,gBACE,6BAAC,2BAAD,EAAwBd,WAAxB,CADF,CAtBF,CADF;AA4BD,CAvDD;;AAyDAb,YAAY,CAAC4B,SAAb,2CAAyBA,cAAzB;eAEe5B,Y"}
+{"version":3,"file":"index.js","names":["ReviewHeader","props","context","steps","mode","skillName","ariaLabel","closeButtonAriaLabel","onQuitClick","hiddenSteps","skin","primarySkinColor","getOr","buttonProps","icon","onClick","size","className","style","review","stepsWrapper","classnames","stepsWrapperAnimation","headerWrapper","titlesWrapper","title","color","iconButtonWrapper","propTypes","contextTypes","Provider","childContextTypes"],"sources":["../../../src/organism/review-header/index.js"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport getOr from 'lodash/fp/getOr';\nimport Provider from '../../atom/provider';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport ReviewHeaderSteps from '../../molecule/review-header-steps';\nimport style from './style.css';\nimport propTypes from './types';\n\nconst ReviewHeader = (props, context) => {\n  const {\n    steps,\n    mode,\n    skillName,\n    'aria-label': ariaLabel,\n    closeButtonAriaLabel,\n    onQuitClick,\n    hiddenSteps\n  } = props;\n  const {skin} = context;\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const buttonProps = {\n    icon: 'close',\n    'data-name': 'review-header-close-button',\n    'aria-label': closeButtonAriaLabel,\n    onClick: onQuitClick,\n    size: 'responsive',\n    className: style.review\n  };\n\n  const stepsWrapper = classnames(\n    style.stepsWrapper,\n    hiddenSteps ? style.stepsWrapperAnimation : null\n  );\n\n  return (\n    <div className={style.headerWrapper} data-name=\"review-header\" aria-label={ariaLabel}>\n      <div className={style.titlesWrapper}>\n        <div className={style.title} title={mode} aria-label={mode} data-name=\"review-header-mode\">\n          {mode}\n        </div>\n        <div\n          className={style.skillName}\n          style={{\n            color: primarySkinColor\n          }}\n          title={skillName}\n          aria-label={skillName}\n          data-name=\"review-header-skill-name\"\n        >\n          {skillName}\n        </div>\n      </div>\n\n      <div className={stepsWrapper}>\n        <ReviewHeaderSteps steps={steps} key={'review-header-steps'} />\n      </div>\n\n      <div className={style.iconButtonWrapper} data-testid=\"review-header-close-button-wrapper\">\n        <ButtonLinkIconOnly {...buttonProps} />\n      </div>\n    </div>\n  );\n};\n\nReviewHeader.propTypes = propTypes;\n\nReviewHeader.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default ReviewHeader;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,YAAY,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACvC,MAAM;IACJC,KADI;IAEJC,IAFI;IAGJC,SAHI;IAIJ,cAAcC,SAJV;IAKJC,oBALI;IAMJC,WANI;IAOJC;EAPI,IAQFR,KARJ;EASA,MAAM;IAACS;EAAD,IAASR,OAAf;EACA,MAAMS,gBAAgB,GAAG,IAAAC,cAAA,EAAM,SAAN,EAAiB,gBAAjB,EAAmCF,IAAnC,CAAzB;EAEA,MAAMG,WAAW,GAAG;IAClBC,IAAI,EAAE,OADY;IAElB,aAAa,4BAFK;IAGlB,cAAcP,oBAHI;IAIlBQ,OAAO,EAAEP,WAJS;IAKlBQ,IAAI,EAAE,YALY;IAMlBC,SAAS,EAAEC,cAAA,CAAMC;EANC,CAApB;EASA,MAAMC,YAAY,GAAG,IAAAC,mBAAA,EACnBH,cAAA,CAAME,YADa,EAEnBX,WAAW,GAAGS,cAAA,CAAMI,qBAAT,GAAiC,IAFzB,CAArB;EAKA,oBACE;IAAK,SAAS,EAAEJ,cAAA,CAAMK,aAAtB;IAAqC,aAAU,eAA/C;IAA+D,cAAYjB;EAA3E,gBACE;IAAK,SAAS,EAAEY,cAAA,CAAMM;EAAtB,gBACE;IAAK,SAAS,EAAEN,cAAA,CAAMO,KAAtB;IAA6B,KAAK,EAAErB,IAApC;IAA0C,cAAYA,IAAtD;IAA4D,aAAU;EAAtE,GACGA,IADH,CADF,eAIE;IACE,SAAS,EAAEc,cAAA,CAAMb,SADnB;IAEE,KAAK,EAAE;MACLqB,KAAK,EAAEf;IADF,CAFT;IAKE,KAAK,EAAEN,SALT;IAME,cAAYA,SANd;IAOE,aAAU;EAPZ,GASGA,SATH,CAJF,CADF,eAkBE;IAAK,SAAS,EAAEe;EAAhB,gBACE,6BAAC,0BAAD;IAAmB,KAAK,EAAEjB,KAA1B;IAAiC,GAAG,EAAE;EAAtC,EADF,CAlBF,eAsBE;IAAK,SAAS,EAAEe,cAAA,CAAMS,iBAAtB;IAAyC,eAAY;EAArD,gBACE,6BAAC,2BAAD,EAAwBd,WAAxB,CADF,CAtBF,CADF;AA4BD,CAvDD;;AAyDAb,YAAY,CAAC4B,SAAb,2CAAyBA,cAAzB;AAEA5B,YAAY,CAAC6B,YAAb,GAA4B;EAC1BnB,IAAI,EAAEoB,iBAAA,CAASC,iBAAT,CAA2BrB;AADP,CAA5B;eAIeV,Y"}

package/lib/organism/user-preferences/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/user-preferences/index.js"],"names":[],"mappings":";AAoCA,0DAeC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/user-preferences/index.js"],"names":[],"mappings":";AAwCA,0DAeC"}

package/lib/organism/user-preferences/index.js

@@ -3,15 +3,17 @@
 exports.__esModule = true;
 exports.default = void 0;
 
-var _isEmpty2 = _interopRequireDefault(require("lodash/fp/isEmpty"));
-
-var _map2 = _interopRequireDefault(require("lodash/fp/map"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _novaIcons = require("@coorpacademy/nova-icons");
+var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
+
+var _map = _interopRequireDefault(require("lodash/fp/map"));
+
+var _provider = require("../../atom/provider");
+
+var _tooltip = _interopRequireDefault(require("../../atom/tooltip"));
 
 var _inputSwitch = _interopRequireDefault(require("../../atom/input-switch"));
 
@@ -26,6 +28,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 const Settings = props => {
+  const translate = (0, _provider.GetTranslateFromContext)();
+
   const {
     label,
     description,
@@ -36,19 +40,16 @@ const Settings = props => {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.settings
   }, /*#__PURE__*/_react.default.createElement(_inputSwitch.default, settings), /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.default.label
-  }, label), (0, _isEmpty2.default)(description) ? null : /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.infoIconWrapper
-  }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyInformationIcon, {
-    height: 16,
-    width: 16,
-    className: _style.default.infoIcon,
-    "aria-label": moreInfoAriaLabel
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.showToolTip
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.descriptionLabel
-  }, description))));
+    className: _style.default.label,
+    tabIndex: 0
+  }, label), (0, _isEmpty.default)(description) ? null : /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    TooltipContent: description,
+    closeToolTipInformationTextAriaLabel: translate('Press the escape key to close the information text'),
+    "data-testid": "user-preferences-tooltip",
+    "aria-label": moreInfoAriaLabel,
+    iconContainerClassName: _style.default.infoIconTooltip,
+    fontSize: 12
+  }));
 };
 
 Settings.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, _inputSwitch.default.propTypes, {
@@ -58,15 +59,16 @@ Settings.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, _input
 
 const UserPreferences = props => {
   const {
-    preferences = [],
+    preferences,
     moreInfoAriaLabel,
     groupAriaLabel
   } = props;
   return /*#__PURE__*/_react.default.createElement("form", null, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.preferences,
     role: "group",
-    "aria-label": groupAriaLabel
-  }, (0, _map2.default)(settings => /*#__PURE__*/_react.default.createElement(Settings, _extends({}, settings, {
+    "aria-label": groupAriaLabel,
+    tabIndex: 0
+  }, (0, _map.default)(settings => /*#__PURE__*/_react.default.createElement(Settings, _extends({}, settings, {
     key: settings.label,
     moreInfoAriaLabel: moreInfoAriaLabel
   })), preferences)));

package/lib/organism/user-preferences/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Settings","props","label","description","moreInfoAriaLabel","settings","style","infoIconWrapper","infoIcon","showToolTip","descriptionLabel","propTypes","InputSwitch","PropTypes","string","isRequired","UserPreferences","preferences","groupAriaLabel","arrayOf","shape"],"sources":["../../../src/organism/user-preferences/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {map, isEmpty} from 'lodash/fp';\nimport {NovaCompositionCoorpacademyInformationIcon as InfoIcon} from '@coorpacademy/nova-icons';\nimport InputSwitch from '../../atom/input-switch';\nimport style from './style.css';\n\nconst Settings = props => {\n  const {label, description, moreInfoAriaLabel, ...settings} = props;\n  return (\n    <div className={style.settings}>\n      <InputSwitch {...settings} />\n      <span className={style.label}>{label}</span>\n      {isEmpty(description) ? null : (\n        <div className={style.infoIconWrapper}>\n          <InfoIcon\n            height={16}\n            width={16}\n            className={style.infoIcon}\n            aria-label={moreInfoAriaLabel}\n          />\n          <div className={style.showToolTip}>\n            <div className={style.descriptionLabel}>{description}</div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nSettings.propTypes = {\n  ...InputSwitch.propTypes,\n  label: PropTypes.string.isRequired,\n  description: PropTypes.string\n};\n\nconst UserPreferences = props => {\n  const {preferences = [], moreInfoAriaLabel, groupAriaLabel} = props;\n\n  return (\n    <form>\n      <div className={style.preferences} role=\"group\" aria-label={groupAriaLabel}>\n        {map(\n          settings => (\n            <Settings {...settings} key={settings.label} moreInfoAriaLabel={moreInfoAriaLabel} />\n          ),\n          preferences\n        )}\n      </div>\n    </form>\n  );\n};\n\nUserPreferences.propTypes = {\n  preferences: PropTypes.arrayOf(PropTypes.shape(Settings.propTypes)),\n  moreInfoAriaLabel: PropTypes.string,\n  groupAriaLabel: PropTypes.string\n};\n\nexport default UserPreferences;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,QAAQ,GAAGC,KAAK,IAAI;EACxB,MAAM;IAACC,KAAD;IAAQC,WAAR;IAAqBC;EAArB,IAAuDH,KAA7D;EAAA,MAAiDI,QAAjD,iCAA6DJ,KAA7D;;EACA,oBACE;IAAK,SAAS,EAAEK,cAAA,CAAMD;EAAtB,gBACE,6BAAC,oBAAD,EAAiBA,QAAjB,CADF,eAEE;IAAM,SAAS,EAAEC,cAAA,CAAMJ;EAAvB,GAA+BA,KAA/B,CAFF,EAGG,uBAAQC,WAAR,IAAuB,IAAvB,gBACC;IAAK,SAAS,EAAEG,cAAA,CAAMC;EAAtB,gBACE,6BAAC,qDAAD;IACE,MAAM,EAAE,EADV;IAEE,KAAK,EAAE,EAFT;IAGE,SAAS,EAAED,cAAA,CAAME,QAHnB;IAIE,cAAYJ;EAJd,EADF,eAOE;IAAK,SAAS,EAAEE,cAAA,CAAMG;EAAtB,gBACE;IAAK,SAAS,EAAEH,cAAA,CAAMI;EAAtB,GAAyCP,WAAzC,CADF,CAPF,CAJJ,CADF;AAmBD,CArBD;;AAuBAH,QAAQ,CAACW,SAAT,wDACKC,oBAAA,CAAYD,SADjB;EAEET,KAAK,EAAEW,kBAAA,CAAUC,MAAV,CAAiBC,UAF1B;EAGEZ,WAAW,EAAEU,kBAAA,CAAUC;AAHzB;;AAMA,MAAME,eAAe,GAAGf,KAAK,IAAI;EAC/B,MAAM;IAACgB,WAAW,GAAG,EAAf;IAAmBb,iBAAnB;IAAsCc;EAAtC,IAAwDjB,KAA9D;EAEA,oBACE,wDACE;IAAK,SAAS,EAAEK,cAAA,CAAMW,WAAtB;IAAmC,IAAI,EAAC,OAAxC;IAAgD,cAAYC;EAA5D,GACG,mBACCb,QAAQ,iBACN,6BAAC,QAAD,eAAcA,QAAd;IAAwB,GAAG,EAAEA,QAAQ,CAACH,KAAtC;IAA6C,iBAAiB,EAAEE;EAAhE,GAFH,EAICa,WAJD,CADH,CADF,CADF;AAYD,CAfD;;AAiBAD,eAAe,CAACL,SAAhB,2CAA4B;EAC1BM,WAAW,EAAEJ,kBAAA,CAAUM,OAAV,CAAkBN,kBAAA,CAAUO,KAAV,CAAgBpB,QAAQ,CAACW,SAAzB,CAAlB,CADa;EAE1BP,iBAAiB,EAAES,kBAAA,CAAUC,MAFH;EAG1BI,cAAc,EAAEL,kBAAA,CAAUC;AAHA,CAA5B;eAMeE,e"}
+{"version":3,"file":"index.js","names":["Settings","props","translate","GetTranslateFromContext","label","description","moreInfoAriaLabel","settings","style","isEmpty","infoIconTooltip","propTypes","InputSwitch","PropTypes","string","isRequired","UserPreferences","preferences","groupAriaLabel","map","arrayOf","shape"],"sources":["../../../src/organism/user-preferences/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport map from 'lodash/fp/map';\nimport {GetTranslateFromContext} from '../../atom/provider';\nimport ToolTip from '../../atom/tooltip';\nimport InputSwitch from '../../atom/input-switch';\nimport style from './style.css';\n\nconst Settings = props => {\n  const translate = GetTranslateFromContext();\n  const {label, description, moreInfoAriaLabel, ...settings} = props;\n  return (\n    <div className={style.settings}>\n      <InputSwitch {...settings} />\n      <span className={style.label} tabIndex={0}>\n        {label}\n      </span>\n      {isEmpty(description) ? null : (\n        <ToolTip\n          TooltipContent={description}\n          closeToolTipInformationTextAriaLabel={translate(\n            'Press the escape key to close the information text'\n          )}\n          data-testid=\"user-preferences-tooltip\"\n          aria-label={moreInfoAriaLabel}\n          iconContainerClassName={style.infoIconTooltip}\n          fontSize={12}\n        />\n      )}\n    </div>\n  );\n};\n\nSettings.propTypes = {\n  ...InputSwitch.propTypes,\n  label: PropTypes.string.isRequired,\n  description: PropTypes.string\n};\n\nconst UserPreferences = props => {\n  const {preferences, moreInfoAriaLabel, groupAriaLabel} = props;\n\n  return (\n    <form>\n      <div className={style.preferences} role=\"group\" aria-label={groupAriaLabel} tabIndex={0}>\n        {map(\n          settings => (\n            <Settings {...settings} key={settings.label} moreInfoAriaLabel={moreInfoAriaLabel} />\n          ),\n          preferences\n        )}\n      </div>\n    </form>\n  );\n};\n\nUserPreferences.propTypes = {\n  preferences: PropTypes.arrayOf(PropTypes.shape(Settings.propTypes)),\n  moreInfoAriaLabel: PropTypes.string,\n  groupAriaLabel: PropTypes.string\n};\n\nexport default UserPreferences;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,QAAQ,GAAGC,KAAK,IAAI;EACxB,MAAMC,SAAS,GAAG,IAAAC,iCAAA,GAAlB;;EACA,MAAM;IAACC,KAAD;IAAQC,WAAR;IAAqBC;EAArB,IAAuDL,KAA7D;EAAA,MAAiDM,QAAjD,iCAA6DN,KAA7D;;EACA,oBACE;IAAK,SAAS,EAAEO,cAAA,CAAMD;EAAtB,gBACE,6BAAC,oBAAD,EAAiBA,QAAjB,CADF,eAEE;IAAM,SAAS,EAAEC,cAAA,CAAMJ,KAAvB;IAA8B,QAAQ,EAAE;EAAxC,GACGA,KADH,CAFF,EAKG,IAAAK,gBAAA,EAAQJ,WAAR,IAAuB,IAAvB,gBACC,6BAAC,gBAAD;IACE,cAAc,EAAEA,WADlB;IAEE,oCAAoC,EAAEH,SAAS,CAC7C,oDAD6C,CAFjD;IAKE,eAAY,0BALd;IAME,cAAYI,iBANd;IAOE,sBAAsB,EAAEE,cAAA,CAAME,eAPhC;IAQE,QAAQ,EAAE;EARZ,EANJ,CADF;AAoBD,CAvBD;;AAyBAV,QAAQ,CAACW,SAAT,wDACKC,oBAAA,CAAYD,SADjB;EAEEP,KAAK,EAAES,kBAAA,CAAUC,MAAV,CAAiBC,UAF1B;EAGEV,WAAW,EAAEQ,kBAAA,CAAUC;AAHzB;;AAMA,MAAME,eAAe,GAAGf,KAAK,IAAI;EAC/B,MAAM;IAACgB,WAAD;IAAcX,iBAAd;IAAiCY;EAAjC,IAAmDjB,KAAzD;EAEA,oBACE,wDACE;IAAK,SAAS,EAAEO,cAAA,CAAMS,WAAtB;IAAmC,IAAI,EAAC,OAAxC;IAAgD,cAAYC,cAA5D;IAA4E,QAAQ,EAAE;EAAtF,GACG,IAAAC,YAAA,EACCZ,QAAQ,iBACN,6BAAC,QAAD,eAAcA,QAAd;IAAwB,GAAG,EAAEA,QAAQ,CAACH,KAAtC;IAA6C,iBAAiB,EAAEE;EAAhE,GAFH,EAICW,WAJD,CADH,CADF,CADF;AAYD,CAfD;;AAiBAD,eAAe,CAACL,SAAhB,2CAA4B;EAC1BM,WAAW,EAAEJ,kBAAA,CAAUO,OAAV,CAAkBP,kBAAA,CAAUQ,KAAV,CAAgBrB,QAAQ,CAACW,SAAzB,CAAlB,CADa;EAE1BL,iBAAiB,EAAEO,kBAAA,CAAUC,MAFH;EAG1BI,cAAc,EAAEL,kBAAA,CAAUC;AAHA,CAA5B;eAMeE,e"}

package/lib/organism/user-preferences/style.css

@@ -1,6 +1,7 @@
 @value colors: "../../variables/colors.css";
 @value dark from colors;
 @value light from colors;
+@value transparent from colors;
 
 .preferences {
   display: flex;
@@ -25,64 +26,12 @@
 
 .label {
   composes: fontBase;
+  position: relative;
+  top: 1px;
   margin-left: 15px;
   min-height: 18px;
 }
 
-.infoIconWrapper {
-  display: flex;
-  align-items: center;
-  overflow: visible;
-}
-
-.showToolTip {
-  margin-top: 5px;
-  text-align: center;
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity 0.8s;
-}
-
-.infoIcon {
-  cursor: pointer;
-  padding-left: 10px;
-  padding-right: 4px;
-  color: dark;
-}
-
-.showToolTip::before {
-  content: '';
-  display: inline-block;
-  visibility: hidden;
-  opacity: 0;
-  width: 7px;
-  height: 8px;
-  margin: 7.5px -4px 7.5px 0;
-  transform: rotate(-45deg);
-  transition: opacity 0.8s;
-  background-color: light;
-}
-
-.infoIcon:hover  ~ .showToolTip {
-  visibility: visible;
-  opacity: 1;
-}
-
-.infoIcon:hover  ~ .showToolTip::before {
-  visibility: visible;
-  opacity: 1;
-}
-
-.descriptionLabel {
-  composes: fontBase;
-  display: inline-block;
-  background-color: light;
-  padding: 4px 8px;
-  border-radius: 3px;
-  word-wrap: break-word;
-  color: dark;
-  max-width: 220px;
-  overflow: hidden;
-  text-align: left;
-  position: absolute;
+.infoIconTooltip {
+  background: transparent;
 }

package/lib/organism/wizard-contents/index.d.ts

@@ -12,7 +12,7 @@ declare namespace WizardContents {
             done: PropTypes.Requireable<boolean>;
             current: PropTypes.Requireable<boolean>;
         }> | null | undefined)[]>;
-        const summary: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+        const summary: PropTypes.Requireable<PropTypes.InferProps<{
             title: PropTypes.Requireable<string>;
             side: PropTypes.Requireable<string>;
             sections: PropTypes.Requireable<(PropTypes.InferProps<{
@@ -45,7 +45,7 @@ declare namespace WizardContents {
                 onClick: PropTypes.Requireable<(...args: any[]) => any>;
                 'aria-label': PropTypes.Requireable<string>;
             }>>;
-        }>>>;
+        }>>;
         const content: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{
             type: PropTypes.Requireable<string>;
             groups: PropTypes.Validator<(PropTypes.InferProps<{

package/lib/organism/wizard-contents/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/wizard-contents/index.js"],"names":[],"mappings":";AAkGA,yDA6BC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/wizard-contents/index.js"],"names":[],"mappings":";AAmHA,yDAoCC"}

package/lib/organism/wizard-contents/index.js

@@ -126,6 +126,23 @@ const buildActionZone = (previousStep, nextStep, side) => {
   }, nextButton));
 };
 
+const THEMES = {
+  'no-summary': {
+    container: _style.default.containerWithoutSummary,
+    footer: _style.default.footerWithoutSummary,
+    actionFooter: _style.default.actionFooterWithoutSummary,
+    leftSection: _style.default.leftSectionWithoutSummary
+  },
+  summary: {
+    container: _style.default.container,
+    footer: _style.default.footer,
+    actionFooter: _style.default.actionFooter,
+    leftSection: _style.default.leftSection
+  }
+};
+
+const getTheme = summary => summary ? 'summary' : 'no-summary';
+
 const WizardContents = props => {
   const {
     isLoading,
@@ -142,14 +159,9 @@ const WizardContents = props => {
   }));
   const rightActionView = buildActionZone(previousStep, nextStep, 'right');
   const footerActionView = buildActionZone(previousStep, nextStep, 'footer');
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.container,
-    "data-name": "content-summary"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.leftSection
-  }, headerView, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.form
-  }, formView)), /*#__PURE__*/_react.default.createElement("div", {
+  const currentStyle = THEMES[getTheme(summary)];
+
+  const summaryWrapper = /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.rightSection,
     "data-name": "summary-right-section"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -159,14 +171,23 @@ const WizardContents = props => {
     "data-name": "summary-zone"
   }, /*#__PURE__*/_react.default.createElement(_wizardSummary.default, _extends({}, summary, {
     side: 'right'
-  }))), rightActionView)), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.footer,
-    "data-name": "summary-footer-section"
+  }))), rightActionView));
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: currentStyle.container,
+    "data-name": "content-summary"
   }, /*#__PURE__*/_react.default.createElement("div", {
+    className: currentStyle.leftSection
+  }, headerView, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.form
+  }, formView)), summary ? summaryWrapper : null, /*#__PURE__*/_react.default.createElement("div", {
+    className: currentStyle.footer,
+    "data-name": "footer-section"
+  }, summary ? /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.summaryFooter
   }, /*#__PURE__*/_react.default.createElement(_wizardSummary.default, _extends({}, summary, {
     side: 'footer'
-  }))), /*#__PURE__*/_react.default.createElement("div", {
+  }))) : null, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.actionFooter
   }, footerActionView)));
 };
@@ -178,7 +199,7 @@ WizardContents.propTypes = process.env.NODE_ENV !== "production" ? {
     onClick: _propTypes.default.func
   }).isRequired,
   steps: _wizardSteps.default.propTypes.steps,
-  summary: _propTypes.default.shape(_extends({}, _wizardSummary.default.propTypes)).isRequired,
+  summary: _propTypes.default.shape(_extends({}, _wizardSummary.default.propTypes)),
   content: _propTypes.default.oneOfType([_propTypes.default.shape(_extends({}, _brandForm.default.propTypes, {
     type: _propTypes.default.oneOf(['form'])
   })), _propTypes.default.shape(_extends({}, _contentTranslation.default.propTypes, {

package/lib/organism/wizard-contents/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["buildHeader","wizardHeader","steps","title","onClick","buttonCloseIcon","size","icon","style","header","headerTitle","buildForm","content","type","buildButton","step","side","ICONS","previous","position","next","publish","label","buttonProps","buildActionZone","previousStep","nextStep","previousButton","nextStepType","getOr","nextButton","actionZone","button","WizardContents","props","isLoading","summary","headerView","formView","rightActionView","footerActionView","container","leftSection","form","rightSection","stickySection","summaryZone","footer","summaryFooter","actionFooter","propTypes","PropTypes","bool","shape","string","func","isRequired","WizardSteps","WizardSummary","oneOfType","BrandForm","oneOf","ContentTranslate","OrganismSearchAndChipsResults","CourseSelection","CourseSections","RewardsForm"],"sources":["../../../src/organism/wizard-contents/index.js"],"sourcesContent":["import React from 'react';\nimport getOr from 'lodash/fp/getOr';\nimport PropTypes from 'prop-types';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport WizardSteps from '../../atom/wizard-steps';\nimport WizardSummary from '../../molecule/wizard-summary';\nimport BrandForm from '../brand-form';\nimport ContentTranslate from '../content-translation';\nimport OrganismSearchAndChipsResults from '../search-and-chips-results';\nimport CourseSelection from '../course-selection';\nimport CourseSections from '../../molecule/course-sections';\nimport RewardsForm from '../rewards-form';\nimport style from './style.css';\n\nconst buildHeader = (wizardHeader, steps) => {\n  const {title, onClick} = wizardHeader;\n\n  const buttonCloseIcon = {\n    size: 'small',\n    'data-name': 'close-button',\n    'aria-label': 'close button',\n    icon: 'close',\n    onClick\n  };\n\n  return (\n    <div>\n      <div className={style.header}>\n        <ButtonLinkIconOnly {...buttonCloseIcon} />\n        <div className={style.headerTitle} data-name={'content-title'}>\n          {title}\n        </div>\n      </div>\n      <WizardSteps steps={steps} />\n    </div>\n  );\n};\n\nconst buildForm = content => {\n  const {type} = content;\n  switch (type) {\n    case 'form':\n      return <BrandForm {...content} />;\n    case 'translate':\n      return <ContentTranslate {...content} />;\n    case 'populations':\n      return <OrganismSearchAndChipsResults {...content} />;\n    case 'courses':\n      return <CourseSelection {...content} />;\n    case 'organize-courses':\n      return <CourseSections {...content} />;\n    case 'rewards':\n      return <RewardsForm {...content} />;\n  }\n};\n\nconst buildButton = (type, step, side) => {\n  const ICONS = {\n    previous: {\n      position: 'left',\n      type: 'chevron-left'\n    },\n    next: {\n      position: 'right',\n      type: 'chevron-right'\n    },\n    publish: {\n      position: 'left',\n      type: 'publish'\n    }\n  };\n\n  const {label, onClick} = step;\n  const buttonProps = {\n    type: type === 'previous' ? 'secondary' : 'primary',\n    'aria-label': `${type} step button`,\n    'data-name': `${type}-step-button-${side}`,\n    icon: ICONS[type],\n    label,\n    onClick\n  };\n\n  return <ButtonLink {...buttonProps} />;\n};\n\nconst buildActionZone = (previousStep, nextStep, side) => {\n  const previousButton = previousStep ? buildButton('previous', previousStep, side) : null;\n  const nextStepType = getOr('next', 'type', nextStep);\n  const nextButton = nextStep ? buildButton(nextStepType, nextStep, side) : null;\n  return (\n    <div className={style.actionZone}>\n      <div className={style.button}>{previousButton}</div>\n      <div className={style.button}>{nextButton}</div>\n    </div>\n  );\n};\n\nconst WizardContents = props => {\n  const {isLoading, wizardHeader, steps, summary, content, nextStep, previousStep} = props;\n  const headerView = buildHeader(wizardHeader, steps);\n  const formView = buildForm({...content, isLoading});\n  const rightActionView = buildActionZone(previousStep, nextStep, 'right');\n  const footerActionView = buildActionZone(previousStep, nextStep, 'footer');\n\n  return (\n    <div className={style.container} data-name=\"content-summary\">\n      <div className={style.leftSection}>\n        {headerView}\n        <div className={style.form}>{formView}</div>\n      </div>\n      <div className={style.rightSection} data-name=\"summary-right-section\">\n        <div className={style.stickySection}>\n          <div className={style.summaryZone} data-name=\"summary-zone\">\n            <WizardSummary {...summary} side={'right'} />\n          </div>\n          {rightActionView}\n        </div>\n      </div>\n      <div className={style.footer} data-name=\"summary-footer-section\">\n        <div className={style.summaryFooter}>\n          <WizardSummary {...summary} side={'footer'} />\n        </div>\n        <div className={style.actionFooter}>{footerActionView}</div>\n      </div>\n    </div>\n  );\n};\n\nWizardContents.propTypes = {\n  isLoading: PropTypes.bool,\n  wizardHeader: PropTypes.shape({\n    title: PropTypes.string,\n    onClick: PropTypes.func\n  }).isRequired,\n  steps: WizardSteps.propTypes.steps,\n  summary: PropTypes.shape({\n    ...WizardSummary.propTypes\n  }).isRequired,\n  content: PropTypes.oneOfType([\n    PropTypes.shape({\n      ...BrandForm.propTypes,\n      type: PropTypes.oneOf(['form'])\n    }),\n    PropTypes.shape({\n      ...ContentTranslate.propTypes,\n      type: PropTypes.oneOf(['translate'])\n    }),\n    PropTypes.shape({\n      ...OrganismSearchAndChipsResults.propTypes,\n      type: PropTypes.oneOf(['populations'])\n    }),\n    PropTypes.shape({\n      ...CourseSelection.propTypes,\n      type: PropTypes.oneOf(['courses'])\n    }),\n    PropTypes.shape({\n      ...CourseSections.propTypes,\n      type: PropTypes.oneOf(['organize-courses'])\n    }),\n    PropTypes.shape({\n      ...RewardsForm.propTypes,\n      type: PropTypes.oneOf(['rewards'])\n    })\n  ]),\n  previousStep: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func\n  }),\n  nextStep: PropTypes.shape({\n    type: PropTypes.oneOf(['next', 'publish']),\n    label: PropTypes.string,\n    onClick: PropTypes.func\n  })\n};\n\nexport default WizardContents;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["buildHeader","wizardHeader","steps","title","onClick","buttonCloseIcon","size","icon","style","header","headerTitle","buildForm","content","type","buildButton","step","side","ICONS","previous","position","next","publish","label","buttonProps","buildActionZone","previousStep","nextStep","previousButton","nextStepType","getOr","nextButton","actionZone","button","THEMES","container","containerWithoutSummary","footer","footerWithoutSummary","actionFooter","actionFooterWithoutSummary","leftSection","leftSectionWithoutSummary","summary","getTheme","WizardContents","props","isLoading","headerView","formView","rightActionView","footerActionView","currentStyle","summaryWrapper","rightSection","stickySection","summaryZone","form","summaryFooter","propTypes","PropTypes","bool","shape","string","func","isRequired","WizardSteps","WizardSummary","oneOfType","BrandForm","oneOf","ContentTranslate","OrganismSearchAndChipsResults","CourseSelection","CourseSections","RewardsForm"],"sources":["../../../src/organism/wizard-contents/index.js"],"sourcesContent":["import React from 'react';\nimport getOr from 'lodash/fp/getOr';\nimport PropTypes from 'prop-types';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport WizardSteps from '../../atom/wizard-steps';\nimport WizardSummary from '../../molecule/wizard-summary';\nimport BrandForm from '../brand-form';\nimport ContentTranslate from '../content-translation';\nimport OrganismSearchAndChipsResults from '../search-and-chips-results';\nimport CourseSelection from '../course-selection';\nimport CourseSections from '../../molecule/course-sections';\nimport RewardsForm from '../rewards-form';\nimport style from './style.css';\n\nconst buildHeader = (wizardHeader, steps) => {\n  const {title, onClick} = wizardHeader;\n\n  const buttonCloseIcon = {\n    size: 'small',\n    'data-name': 'close-button',\n    'aria-label': 'close button',\n    icon: 'close',\n    onClick\n  };\n\n  return (\n    <div>\n      <div className={style.header}>\n        <ButtonLinkIconOnly {...buttonCloseIcon} />\n        <div className={style.headerTitle} data-name={'content-title'}>\n          {title}\n        </div>\n      </div>\n      <WizardSteps steps={steps} />\n    </div>\n  );\n};\n\nconst buildForm = content => {\n  const {type} = content;\n  switch (type) {\n    case 'form':\n      return <BrandForm {...content} />;\n    case 'translate':\n      return <ContentTranslate {...content} />;\n    case 'populations':\n      return <OrganismSearchAndChipsResults {...content} />;\n    case 'courses':\n      return <CourseSelection {...content} />;\n    case 'organize-courses':\n      return <CourseSections {...content} />;\n    case 'rewards':\n      return <RewardsForm {...content} />;\n  }\n};\n\nconst buildButton = (type, step, side) => {\n  const ICONS = {\n    previous: {\n      position: 'left',\n      type: 'chevron-left'\n    },\n    next: {\n      position: 'right',\n      type: 'chevron-right'\n    },\n    publish: {\n      position: 'left',\n      type: 'publish'\n    }\n  };\n\n  const {label, onClick} = step;\n  const buttonProps = {\n    type: type === 'previous' ? 'secondary' : 'primary',\n    'aria-label': `${type} step button`,\n    'data-name': `${type}-step-button-${side}`,\n    icon: ICONS[type],\n    label,\n    onClick\n  };\n\n  return <ButtonLink {...buttonProps} />;\n};\n\nconst buildActionZone = (previousStep, nextStep, side) => {\n  const previousButton = previousStep ? buildButton('previous', previousStep, side) : null;\n  const nextStepType = getOr('next', 'type', nextStep);\n  const nextButton = nextStep ? buildButton(nextStepType, nextStep, side) : null;\n  return (\n    <div className={style.actionZone}>\n      <div className={style.button}>{previousButton}</div>\n      <div className={style.button}>{nextButton}</div>\n    </div>\n  );\n};\n\nconst THEMES = {\n  'no-summary': {\n    container: style.containerWithoutSummary,\n    footer: style.footerWithoutSummary,\n    actionFooter: style.actionFooterWithoutSummary,\n    leftSection: style.leftSectionWithoutSummary\n  },\n  summary: {\n    container: style.container,\n    footer: style.footer,\n    actionFooter: style.actionFooter,\n    leftSection: style.leftSection\n  }\n};\n\nconst getTheme = summary => (summary ? 'summary' : 'no-summary');\n\nconst WizardContents = props => {\n  const {isLoading, wizardHeader, steps, summary, content, nextStep, previousStep} = props;\n  const headerView = buildHeader(wizardHeader, steps);\n  const formView = buildForm({...content, isLoading});\n  const rightActionView = buildActionZone(previousStep, nextStep, 'right');\n  const footerActionView = buildActionZone(previousStep, nextStep, 'footer');\n  const currentStyle = THEMES[getTheme(summary)];\n\n  const summaryWrapper = (\n    <div className={style.rightSection} data-name=\"summary-right-section\">\n      <div className={style.stickySection}>\n        <div className={style.summaryZone} data-name=\"summary-zone\">\n          <WizardSummary {...summary} side={'right'} />\n        </div>\n        {rightActionView}\n      </div>\n    </div>\n  );\n\n  return (\n    <div className={currentStyle.container} data-name=\"content-summary\">\n      <div className={currentStyle.leftSection}>\n        {headerView}\n        <div className={style.form}>{formView}</div>\n      </div>\n      {summary ? summaryWrapper : null}\n      <div className={currentStyle.footer} data-name=\"footer-section\">\n        {summary ? (\n          <div className={style.summaryFooter}>\n            <WizardSummary {...summary} side={'footer'} />\n          </div>\n        ) : null}\n        <div className={style.actionFooter}>{footerActionView}</div>\n      </div>\n    </div>\n  );\n};\n\nWizardContents.propTypes = {\n  isLoading: PropTypes.bool,\n  wizardHeader: PropTypes.shape({\n    title: PropTypes.string,\n    onClick: PropTypes.func\n  }).isRequired,\n  steps: WizardSteps.propTypes.steps,\n  summary: PropTypes.shape({\n    ...WizardSummary.propTypes\n  }),\n  content: PropTypes.oneOfType([\n    PropTypes.shape({\n      ...BrandForm.propTypes,\n      type: PropTypes.oneOf(['form'])\n    }),\n    PropTypes.shape({\n      ...ContentTranslate.propTypes,\n      type: PropTypes.oneOf(['translate'])\n    }),\n    PropTypes.shape({\n      ...OrganismSearchAndChipsResults.propTypes,\n      type: PropTypes.oneOf(['populations'])\n    }),\n    PropTypes.shape({\n      ...CourseSelection.propTypes,\n      type: PropTypes.oneOf(['courses'])\n    }),\n    PropTypes.shape({\n      ...CourseSections.propTypes,\n      type: PropTypes.oneOf(['organize-courses'])\n    }),\n    PropTypes.shape({\n      ...RewardsForm.propTypes,\n      type: PropTypes.oneOf(['rewards'])\n    })\n  ]),\n  previousStep: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func\n  }),\n  nextStep: PropTypes.shape({\n    type: PropTypes.oneOf(['next', 'publish']),\n    label: PropTypes.string,\n    onClick: PropTypes.func\n  })\n};\n\nexport default WizardContents;\n"],"mappings":"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"}

package/lib/organism/wizard-contents/style.css

@@ -7,17 +7,31 @@
   display: flex;
   align-items: stretch;
   justify-content: flex-start;
-  flex-wrap: wrap;
   overflow: auto;
   height: calc(100vh - 124px);
   width: 100%;
 }
 
+.containerWithoutSummary {
+  composes: container;
+  flex-direction: column;
+}
+
 .leftSection {
-  display: block;
+  display: flex;
+  flex-direction: column;
   overflow: auto;
   box-sizing: border-box;
   width: calc(100% - 320px);
+  position: relative;
+}
+
+.leftSectionWithoutSummary {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  box-sizing: border-box;
+  width: 100%;
   height: 100%;
   position: relative;
 }
@@ -69,12 +83,23 @@
 .actionZone {
   width: 100%;
   display: flex;
-  justify-content: space-between;
+  flex-direction: row;
+  justify-content: flex-end;
   margin: 16px 0;
 }
 
 .button {
-  width: calc(50% - 8px);
+  width: 100%;
+  max-width: 184px;
+  margin: 10px;
+}
+
+.footerWithoutSummary {
+  width: 100%;
+  bottom: 0px;
+  position: inherit;
+  display: flex;
+  justify-content: flex-end;
 }
 
 .footer {
@@ -84,23 +109,37 @@
   position: inherit;
 }
 
+.actionFooterWithoutSummary {
+  width: 100%;
+  display: flex;
+  right: 0;
+  bottom: -10px;
+  position: sticky;
+}
+
 @media desktop, tablet {
   .leftSection {
     width: 100%;
     min-height: 500px;
   }
 
+  .container {
+    display: flex;
+    flex-direction: column;
+  }
+
   .rightSection {
     display: none;
   }
 
-  .footer {
+  .footer  {
     display: flex;
     align-items: flex-end;
     bottom: 10px;
     position: sticky;
     z-index: 1;
   }
+
   .footer::before {
     content: '';
     background: linear-gradient(to top,white 64px, #ffffff00 );
@@ -118,8 +157,9 @@
   }
 
   .actionFooter {
-    width: 43%;
+    width: 100%;
   }
+  
   .actionZone {
     margin: 0;
   }

package/lib/template/activity/engine-stars.d.ts

@@ -38,6 +38,7 @@ declare namespace EngineStars {
                 [x: string]: any;
             }>;
         }>>;
+        const translate: PropTypes.Requireable<(...args: any[]) => any>;
     }
 }
 import PropTypes from "prop-types";

package/lib/template/activity/engine-stars.js

@@ -188,7 +188,8 @@ EngineStars.propTypes = process.env.NODE_ENV !== "production" ? {
   })
 } : {};
 EngineStars.contextTypes = {
-  skin: _provider.default.childContextTypes.skin
+  skin: _provider.default.childContextTypes.skin,
+  translate: _provider.default.childContextTypes.translate
 };
 var _default = EngineStars;
 exports.default = _default;