@coorpacademy/components 11.34.3-alpha.1 → 11.34.3

package/es/molecule/progress-wrapper/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/progress-wrapper/index.js"],"names":[],"mappings":";AA+GA;;;;;;;8BA6DC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/progress-wrapper/index.js"],"names":[],"mappings":";AAgGA;;;;;;;8BAsGC"}

package/es/molecule/progress-wrapper/index.js

@@ -2,7 +2,8 @@ import _get from "lodash/fp/get";
 import _map from "lodash/fp/map";
 import _isEmpty from "lodash/fp/isEmpty";
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React from 'react';
+import React, { useCallback, useState } from 'react';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { convert } from 'css-color-function';
 import Title from '../../atom/title';
@@ -59,19 +60,6 @@ const DetailSection = ({
     },
     disabled: isLocked
   };
-  const LockedTag = /*#__PURE__*/React.createElement(Tag, {
-    label: translate('locked'),
-    size: "S",
-    icon: {
-      position: 'left',
-      iconName: 'lock',
-      iconColor: COLORS.cm_grey_500,
-      preset: 's',
-      customStyle: {
-        padding: 0
-      }
-    }
-  });
   return isTypeStars ? /*#__PURE__*/React.createElement("div", {
     className: style[`detailsSection${index}`],
     "data-name": type,
@@ -82,7 +70,7 @@ const DetailSection = ({
     className: style.detailsInfoText
   }, /*#__PURE__*/React.createElement("span", {
     className: style.detailsTitle
-  }, translate('bonus_stars')), isLocked ? LockedTag : null), /*#__PURE__*/React.createElement("div", {
+  }, translate('bonus_stars'))), /*#__PURE__*/React.createElement("div", {
     className: style.stars
   }, /*#__PURE__*/React.createElement(Icon, {
     iconName: "star",
@@ -102,7 +90,7 @@ const DetailSection = ({
     className: style.detailsInfoText
   }, /*#__PURE__*/React.createElement("span", {
     className: style.detailsTitle
-  }, type === 'diploma' ? translate('diploma') : translate('badge')), isLocked ? LockedTag : null), /*#__PURE__*/React.createElement("div", {
+  }, type === 'diploma' ? translate('diploma') : translate('badge'))), /*#__PURE__*/React.createElement("div", {
     className: style.buttonContainer
   }, /*#__PURE__*/React.createElement(ButtonLink, downloadButtonProps))));
 };
@@ -122,6 +110,10 @@ const ProgressWrapper = ({
     count: completedModules > mandatoryModules ? mandatoryModules : completedModules
   });
   const isLocked = progression !== 100;
+  const [showDetails, setShowDetails] = useState(false);
+  const handleToggleDetails = useCallback(() => {
+    setShowDetails(!showDetails);
+  }, [showDetails]);
   return /*#__PURE__*/React.createElement("div", {
     className: style.container,
     "data-name": "prgress-wrapper",
@@ -159,13 +151,41 @@ const ProgressWrapper = ({
     className: style.statsProgressionMobile
   }, /*#__PURE__*/React.createElement("span", {
     className: style.statsNumber
-  }, progression, "%")), _isEmpty(sections) ? null : /*#__PURE__*/React.createElement("div", {
-    className: style.details
+  }, progression, "%")), !_isEmpty(sections) ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: style.toggleDetailsButton,
+    onClick: handleToggleDetails,
+    "data-testid": "progress-wrapper-toggle-details-button"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.toggleDetailsLabel
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.toggleDetailsTitle
+  }, translate('rewards')), isLocked ? /*#__PURE__*/React.createElement(Tag, {
+    label: translate('locked'),
+    size: "S",
+    icon: {
+      position: 'left',
+      iconName: 'lock',
+      iconColor: COLORS.cm_grey_500,
+      preset: 's',
+      customStyle: {
+        padding: 0
+      }
+    }
+  }) : null), /*#__PURE__*/React.createElement(Icon, {
+    iconColor: COLORS.cm_grey_700,
+    iconName: showDetails ? 'chevron-up' : 'chevron-down',
+    size: {
+      faSize: 20,
+      wrapperSize: 24
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classNames(style.details, showDetails ? style.visibleDetails : style.hiddenDetails),
+    "data-testid": "progress-wrapper-details"
   }, uncappedMap((section, index) => /*#__PURE__*/React.createElement(DetailSection, _extends({}, section, {
     isLocked: isLocked,
     key: `${section.type}-${index}`,
     index: index
-  })), sections)));
+  })), sections))) : null);
 };
 const commonDetailSectionPropTypes = process.env.NODE_ENV !== "production" ? {
   type: PropTypes.oneOf(['diploma', 'badge', 'stars']),

package/es/molecule/progress-wrapper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","convert","Title","ProgressBar","COLORS","Tag","ButtonLink","Icon","Provider","GetSkinFromContext","style","uncappedMap","_map","cap","DetailSection","index","type","isLocked","downloadUrl","stars","context","translate","skin","primarySkinColor","_get","isTypeStars","downloadButtonProps","label","link","target","href","customStyle","backgroundColor","color","width","transition","hoverBackgroundColor","hoverColor","white","icon","position","faIcon","name","size","padding","disabled","LockedTag","createElement","iconName","iconColor","cm_grey_500","preset","className","detailsInfo","detailsInfoText","detailsTitle","img","src","buttonContainer","ProgressWrapper","completedModules","mandatoryModules","title","subtitle","progression","sections","mandatoryCompletedModulesLocale","total","count","container","titleContainer","titleSize","statscontainer","stats","dangerouslySetInnerHTML","__html","statsNumber","customProgressBar","positive","displayInfo","value","max","statsProgressionMobile","_isEmpty","details","section","_extends","key","commonDetailSectionPropTypes","process","env","NODE_ENV","oneOf","string","number","contextTypes","childContextTypes","propTypes","bool","arrayOf","shape"],"sources":["../../../src/molecule/progress-wrapper/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport {isEmpty, map, get} from 'lodash/fp';\nimport Title from '../../atom/title';\nimport ProgressBar from '../progress-bar';\nimport {COLORS} from '../../variables/colors';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport Provider, {GetSkinFromContext} from '../../atom/provider';\n// eslint-disable-next-line css-modules/no-unused-class\nimport style from './style.css';\n\nconst uncappedMap = map.convert({cap: false});\n\nconst DetailSection = ({index, type, isLocked, downloadUrl, stars}, context) => {\n  const {translate} = context;\n  const skin = GetSkinFromContext(context);\n  const primarySkinColor = get('common.primary', skin);\n  const isTypeStars = type === 'stars';\n\n  const downloadButtonProps = {\n    label: translate('download'),\n    link: {\n      target: '_blank',\n      href: downloadUrl\n    },\n    'data-name': `download-${type}-button`,\n    'aria-label': `download ${type} button`,\n    customStyle: {\n      backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n      color: primarySkinColor,\n      width: 'auto',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    hoverBackgroundColor: primarySkinColor,\n    hoverColor: COLORS.white,\n    icon: {\n      position: 'left',\n      faIcon: {\n        name: 'download',\n        color: primarySkinColor,\n        size: 14,\n        customStyle: {padding: 0}\n      }\n    },\n    disabled: isLocked\n  };\n\n  const LockedTag = (\n    <Tag\n      label={translate('locked')}\n      size=\"S\"\n      icon={{\n        position: 'left',\n        iconName: 'lock',\n        iconColor: COLORS.cm_grey_500,\n        preset: 's',\n        customStyle: {padding: 0}\n      }}\n    />\n  );\n\n  return isTypeStars ? (\n    <div\n      className={style[`detailsSection${index}`]}\n      data-name={type}\n      aria-label={`${type} informations`}\n    >\n      <div className={style.detailsInfo}>\n        <div className={style.detailsInfoText}>\n          <span className={style.detailsTitle}>{translate('bonus_stars')}</span>\n          {isLocked ? LockedTag : null}\n        </div>\n        <div className={style.stars}>\n          <Icon iconName=\"star\" iconColor=\"#FFCE0A\" backgroundColor=\"#FFF9D1\" preset=\"xl\" />\n          <span>{stars}</span>\n        </div>\n      </div>\n    </div>\n  ) : (\n    <div\n      className={style[`detailsSection${index}`]}\n      data-name={type}\n      aria-label={`${type} informations`}\n    >\n      <img\n        className={style.img}\n        src={\n          type === 'badge'\n            ? downloadUrl\n            : 'https://s3.eu-west-1.amazonaws.com/static.coorpacademy.com/assets/images/diploma.svg'\n        }\n      />\n      <div className={style.detailsInfo}>\n        <div className={style.detailsInfoText}>\n          <span className={style.detailsTitle}>\n            {type === 'diploma' ? translate('diploma') : translate('badge')}\n          </span>\n          {isLocked ? LockedTag : null}\n        </div>\n\n        <div className={style.buttonContainer}>\n          <ButtonLink {...downloadButtonProps} />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nconst ProgressWrapper = (\n  {completedModules, mandatoryModules, title, subtitle, progression, sections},\n  context\n) => {\n  const {translate} = context;\n  const mandatoryCompletedModulesLocale = translate('modules_completed_mandatory', {\n    total: mandatoryModules,\n    count: completedModules > mandatoryModules ? mandatoryModules : completedModules\n  });\n  const isLocked = progression !== 100;\n\n  return (\n    <div\n      className={style.container}\n      data-name=\"prgress-wrapper\"\n      aria-label=\"progress wrapper section\"\n    >\n      <div className={style.titleContainer}>\n        <Title type=\"form-group\" titleSize=\"medium\" title={title} subtitle={subtitle} />\n      </div>\n      <div className={style.statscontainer}>\n        <div className={style.stats}>\n          <div\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: mandatoryCompletedModulesLocale}}\n          />\n        </div>\n        <div className={style.progression}>\n          <span className={style.statsNumber} data-name=\"progress-value\">\n            {progression}%\n          </span>\n        </div>\n      </div>\n      <ProgressBar\n        className={style.customProgressBar}\n        style={{backgroundColor: COLORS.positive}}\n        displayInfo={false}\n        value={progression}\n        max={100}\n      />\n      <div className={style.statsProgressionMobile}>\n        <span className={style.statsNumber}>{progression}%</span>\n      </div>\n\n      {isEmpty(sections) ? null : (\n        <div className={style.details}>\n          {uncappedMap(\n            (section, index) => (\n              <DetailSection\n                {...section}\n                isLocked={isLocked}\n                key={`${section.type}-${index}`}\n                index={index}\n              />\n            ),\n            sections\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst commonDetailSectionPropTypes = {\n  type: PropTypes.oneOf(['diploma', 'badge', 'stars']),\n  downloadUrl: PropTypes.string,\n  stars: PropTypes.number\n};\n\nDetailSection.contextTypes = {\n  translate: Provider.childContextTypes.translate,\n  skin: Provider.childContextTypes.skin\n};\n\nDetailSection.propTypes = {\n  index: PropTypes.number,\n  isLocked: PropTypes.bool,\n  ...commonDetailSectionPropTypes\n};\n\nProgressWrapper.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nProgressWrapper.propTypes = {\n  title: PropTypes.string,\n  subtitle: PropTypes.string,\n  completedModules: PropTypes.number,\n  mandatoryModules: PropTypes.number,\n  progression: PropTypes.number,\n  sections: PropTypes.arrayOf(PropTypes.shape(commonDetailSectionPropTypes))\n};\n\nexport default ProgressWrapper;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","classNames","PropTypes","convert","Title","ProgressBar","COLORS","Tag","ButtonLink","Icon","Provider","GetSkinFromContext","style","uncappedMap","_map","cap","DetailSection","index","type","isLocked","downloadUrl","stars","context","translate","skin","primarySkinColor","_get","isTypeStars","downloadButtonProps","label","link","target","href","customStyle","backgroundColor","color","width","transition","hoverBackgroundColor","hoverColor","white","icon","position","faIcon","name","size","padding","disabled","createElement","className","detailsInfo","detailsInfoText","detailsTitle","iconName","iconColor","preset","img","src","buttonContainer","ProgressWrapper","completedModules","mandatoryModules","title","subtitle","progression","sections","mandatoryCompletedModulesLocale","total","count","showDetails","setShowDetails","handleToggleDetails","container","titleContainer","titleSize","statscontainer","stats","dangerouslySetInnerHTML","__html","statsNumber","customProgressBar","positive","displayInfo","value","max","statsProgressionMobile","_isEmpty","Fragment","toggleDetailsButton","onClick","toggleDetailsLabel","toggleDetailsTitle","cm_grey_500","cm_grey_700","faSize","wrapperSize","details","visibleDetails","hiddenDetails","section","_extends","key","commonDetailSectionPropTypes","process","env","NODE_ENV","oneOf","string","number","contextTypes","childContextTypes","propTypes","bool","arrayOf","shape"],"sources":["../../../src/molecule/progress-wrapper/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport {isEmpty, map, get} from 'lodash/fp';\nimport Title from '../../atom/title';\nimport ProgressBar from '../progress-bar';\nimport {COLORS} from '../../variables/colors';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport Provider, {GetSkinFromContext} from '../../atom/provider';\n// eslint-disable-next-line css-modules/no-unused-class\nimport style from './style.css';\n\nconst uncappedMap = map.convert({cap: false});\n\nconst DetailSection = ({index, type, isLocked, downloadUrl, stars}, context) => {\n  const {translate} = context;\n  const skin = GetSkinFromContext(context);\n  const primarySkinColor = get('common.primary', skin);\n  const isTypeStars = type === 'stars';\n\n  const downloadButtonProps = {\n    label: translate('download'),\n    link: {\n      target: '_blank',\n      href: downloadUrl\n    },\n    'data-name': `download-${type}-button`,\n    'aria-label': `download ${type} button`,\n    customStyle: {\n      backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n      color: primarySkinColor,\n      width: 'auto',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    hoverBackgroundColor: primarySkinColor,\n    hoverColor: COLORS.white,\n    icon: {\n      position: 'left',\n      faIcon: {\n        name: 'download',\n        color: primarySkinColor,\n        size: 14,\n        customStyle: {padding: 0}\n      }\n    },\n    disabled: isLocked\n  };\n\n  return isTypeStars ? (\n    <div\n      className={style[`detailsSection${index}`]}\n      data-name={type}\n      aria-label={`${type} informations`}\n    >\n      <div className={style.detailsInfo}>\n        <div className={style.detailsInfoText}>\n          <span className={style.detailsTitle}>{translate('bonus_stars')}</span>\n        </div>\n        <div className={style.stars}>\n          <Icon iconName=\"star\" iconColor=\"#FFCE0A\" backgroundColor=\"#FFF9D1\" preset=\"xl\" />\n          <span>{stars}</span>\n        </div>\n      </div>\n    </div>\n  ) : (\n    <div\n      className={style[`detailsSection${index}`]}\n      data-name={type}\n      aria-label={`${type} informations`}\n    >\n      <img\n        className={style.img}\n        src={\n          type === 'badge'\n            ? downloadUrl\n            : 'https://s3.eu-west-1.amazonaws.com/static.coorpacademy.com/assets/images/diploma.svg'\n        }\n      />\n      <div className={style.detailsInfo}>\n        <div className={style.detailsInfoText}>\n          <span className={style.detailsTitle}>\n            {type === 'diploma' ? translate('diploma') : translate('badge')}\n          </span>\n        </div>\n\n        <div className={style.buttonContainer}>\n          <ButtonLink {...downloadButtonProps} />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nconst ProgressWrapper = (\n  {completedModules, mandatoryModules, title, subtitle, progression, sections},\n  context\n) => {\n  const {translate} = context;\n  const mandatoryCompletedModulesLocale = translate('modules_completed_mandatory', {\n    total: mandatoryModules,\n    count: completedModules > mandatoryModules ? mandatoryModules : completedModules\n  });\n  const isLocked = progression !== 100;\n\n  const [showDetails, setShowDetails] = useState(false);\n\n  const handleToggleDetails = useCallback(() => {\n    setShowDetails(!showDetails);\n  }, [showDetails]);\n  return (\n    <div\n      className={style.container}\n      data-name=\"prgress-wrapper\"\n      aria-label=\"progress wrapper section\"\n    >\n      <div className={style.titleContainer}>\n        <Title type=\"form-group\" titleSize=\"medium\" title={title} subtitle={subtitle} />\n      </div>\n      <div className={style.statscontainer}>\n        <div className={style.stats}>\n          <div\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: mandatoryCompletedModulesLocale}}\n          />\n        </div>\n        <div className={style.progression}>\n          <span className={style.statsNumber} data-name=\"progress-value\">\n            {progression}%\n          </span>\n        </div>\n      </div>\n      <ProgressBar\n        className={style.customProgressBar}\n        style={{backgroundColor: COLORS.positive}}\n        displayInfo={false}\n        value={progression}\n        max={100}\n      />\n      <div className={style.statsProgressionMobile}>\n        <span className={style.statsNumber}>{progression}%</span>\n      </div>\n\n      {!isEmpty(sections) ? (\n        <>\n          <div\n            className={style.toggleDetailsButton}\n            onClick={handleToggleDetails}\n            data-testid=\"progress-wrapper-toggle-details-button\"\n          >\n            <div className={style.toggleDetailsLabel}>\n              <span className={style.toggleDetailsTitle}>{translate('rewards')}</span>\n              {isLocked ? (\n                <Tag\n                  label={translate('locked')}\n                  size=\"S\"\n                  icon={{\n                    position: 'left',\n                    iconName: 'lock',\n                    iconColor: COLORS.cm_grey_500,\n                    preset: 's',\n                    customStyle: {padding: 0}\n                  }}\n                />\n              ) : null}\n            </div>\n            <Icon\n              iconColor={COLORS.cm_grey_700}\n              iconName={showDetails ? 'chevron-up' : 'chevron-down'}\n              size={{faSize: 20, wrapperSize: 24}}\n            />\n          </div>\n\n          <div\n            className={classNames(\n              style.details,\n              showDetails ? style.visibleDetails : style.hiddenDetails\n            )}\n            data-testid=\"progress-wrapper-details\"\n          >\n            {uncappedMap(\n              (section, index) => (\n                <DetailSection\n                  {...section}\n                  isLocked={isLocked}\n                  key={`${section.type}-${index}`}\n                  index={index}\n                />\n              ),\n              sections\n            )}\n          </div>\n        </>\n      ) : null}\n    </div>\n  );\n};\n\nconst commonDetailSectionPropTypes = {\n  type: PropTypes.oneOf(['diploma', 'badge', 'stars']),\n  downloadUrl: PropTypes.string,\n  stars: PropTypes.number\n};\n\nDetailSection.contextTypes = {\n  translate: Provider.childContextTypes.translate,\n  skin: Provider.childContextTypes.skin\n};\n\nDetailSection.propTypes = {\n  index: PropTypes.number,\n  isLocked: PropTypes.bool,\n  ...commonDetailSectionPropTypes\n};\n\nProgressWrapper.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nProgressWrapper.propTypes = {\n  title: PropTypes.string,\n  subtitle: PropTypes.string,\n  completedModules: PropTypes.number,\n  mandatoryModules: PropTypes.number,\n  progression: PropTypes.number,\n  sections: PropTypes.arrayOf(PropTypes.shape(commonDetailSectionPropTypes))\n};\n\nexport default ProgressWrapper;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/progress-wrapper/style.css

@@ -7,6 +7,7 @@
 @value cm_grey_100 from colors;
 @value cm_grey_400 from colors;
 @value cm_grey_500 from colors;
+@value cm_grey_700 from colors;
 
 .container {
   border-radius: 16px;
@@ -52,14 +53,24 @@
 }
 
 .details {
+  overflow: hidden;
+  transition: max-height 0.3s ease, padding-top 0.3s ease;
   display: flex;
   justify-content: space-between;
-  align-items: "center";
+  align-items: center;
   flex-direction: row;
-  padding-top: 24px;
   gap: 16px;
 }
 
+.hiddenDetails {
+  height: 0;
+}
+
+.visibleDetails {
+  height: auto;
+  padding-top: 24px;
+}
+
 .detailsSectionCommon {
   display: flex;
   align-items: center;
@@ -127,6 +138,30 @@
   padding-top: 16px;
 }
 
+.toggleDetailsButton {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  padding-top: 16px;
+  width: 100%;
+}
+
+.toggleDetailsTitle {
+  color: cm_grey_700;
+  font-family: Gilroy;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 22px;
+}
+
+.toggleDetailsLabel {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 @media mobile, tablet {
   .details {
     flex-wrap: wrap;

package/es/molecule/scope-content/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/scope-content/index.js"],"names":[],"mappings":";AASA,qEA0FC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/scope-content/index.js"],"names":[],"mappings":";AASA,qEAgGC"}

package/es/molecule/scope-content/index.js

@@ -1,3 +1,4 @@
+import _isEmpty from "lodash/fp/isEmpty";
 import _getOr from "lodash/fp/getOr";
 import _get from "lodash/fp/get";
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -55,7 +56,8 @@ const ScopeContent = (props, context) => {
     }
   }) : null;
   return content && title ? /*#__PURE__*/React.createElement("div", {
-    "data-name": "scopeContent"
+    "data-name": "scopeContent",
+    className: style.scopeContent
   }, /*#__PURE__*/React.createElement("div", {
     "data-name": "description",
     className: style.desc
@@ -74,18 +76,20 @@ const ScopeContent = (props, context) => {
     "data-name": "duration",
     className: style.time
   }, time))), ctaView), /*#__PURE__*/React.createElement("div", {
+    className: style.columnLayout
+  }, _isEmpty(skills) ? null : /*#__PURE__*/React.createElement("div", {
     className: style.skills
   }, /*#__PURE__*/React.createElement("div", {
     className: style.coltitle
   }, skillsTitle), /*#__PURE__*/React.createElement("ul", {
     className: style.dottedlist
-  }, skills)), /*#__PURE__*/React.createElement("div", {
+  }, skills)), _isEmpty(chapters) ? null : /*#__PURE__*/React.createElement("div", {
     className: style.column
   }, /*#__PURE__*/React.createElement("div", {
     className: style.coltitle
   }, chaptersTitle), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("ul", {
     className: style.roundedlist
-  }, chapters)))), _resources ? /*#__PURE__*/React.createElement("div", {
+  }, chapters))))), !_isEmpty(_resources) ? /*#__PURE__*/React.createElement("div", {
     "data-name": "description",
     className: style.bordered
   }, /*#__PURE__*/React.createElement(ResourceBrowser, {

package/es/molecule/scope-content/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","Button","Provider","Discussion","ResourceBrowser","style","ScopeContent","props","context","translate","skin","content","lstitle","_chaptersTitle","time","_getOr","title","_skills","_chapters","_resources","skillsTitle","chaptersTitle","onClick","_get","buttonLabel","discussion","skills","map","skill","index","createElement","key","dangerouslySetInnerHTML","__html","chapters","chapter","name","ctaView","type","className","cta","submitValue","backgroundColor","desc","infos","innerHTML","coltitle","dottedlist","column","roundedlist","bordered","resources","_extends","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","shape","string","func","arrayOf","object","course_scope"],"sources":["../../../src/molecule/scope-content/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {get, getOr} from 'lodash/fp';\nimport Button from '../../atom/button';\nimport Provider from '../../atom/provider';\nimport Discussion from '../../organism/discussion';\nimport ResourceBrowser from '../../organism/resource-browser';\nimport style from './style.css';\n\nconst ScopeContent = (props, context) => {\n  const {translate, skin} = context;\n  const {content} = props;\n\n  const lstitle = translate('At the end of this level, you will be able to_');\n  const _chaptersTitle = translate('chapters');\n\n  const time = getOr('', 'time', content);\n  const title = getOr('', 'title', content);\n  const _skills = getOr([], 'skills', content);\n  const _chapters = getOr([], 'chapters', content);\n  const _resources = getOr([], 'resources', content);\n\n  const skillsTitle = getOr(lstitle, 'skillsTitle', content);\n  const chaptersTitle = getOr(_chaptersTitle, 'chaptersTitle', content);\n\n  const onClick = get('onClick', content);\n  const buttonLabel = get('buttonLabel', content);\n  const discussion = get('discussion', content);\n  const skills = _skills.map((skill, index) => (\n    <li\n      key={index}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{__html: skill}}\n    />\n  ));\n\n  const chapters = _chapters.map((chapter, index) => (\n    <li\n      key={index}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{__html: chapter.name}}\n    />\n  ));\n\n  const ctaView = onClick ? (\n    <Button\n      data-name=\"cta\"\n      type=\"link\"\n      className={style.cta}\n      onClick={onClick}\n      submitValue={buttonLabel}\n      style={{\n        backgroundColor: get('common.primary', skin)\n      }}\n    />\n  ) : null;\n\n  return content && title ? (\n    <div data-name=\"scopeContent\">\n      <div data-name=\"description\" className={style.desc}>\n        <div className={style.infos}>\n          <div className={style.title}>\n            <div\n              className={style.innerHTML}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n            <div>\n              <span data-name=\"duration\" className={style.time}>\n                {time}\n              </span>\n            </div>\n          </div>\n          {ctaView}\n        </div>\n        <div className={style.skills}>\n          <div className={style.coltitle}>{skillsTitle}</div>\n          <ul className={style.dottedlist}>{skills}</ul>\n        </div>\n        <div className={style.column}>\n          <div className={style.coltitle}>{chaptersTitle}</div>\n          <div>\n            <ul className={style.roundedlist}>{chapters}</ul>\n          </div>\n        </div>\n      </div>\n\n      {_resources ? (\n        <div data-name=\"description\" className={style.bordered}>\n          <ResourceBrowser resources={_resources} />\n        </div>\n      ) : null}\n      {discussion ? <Discussion {...discussion} className={style.discussion} /> : null}\n    </div>\n  ) : (\n    <div data-name=\"discussion\">\n      {discussion ? <Discussion {...discussion} className={style.discussion} /> : null}\n    </div>\n  );\n};\n\nScopeContent.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nScopeContent.propTypes = {\n  content: PropTypes.shape({\n    title: PropTypes.string,\n    skillsTitle: PropTypes.string,\n    chaptersTitle: PropTypes.string,\n    time: PropTypes.string,\n    onClick: PropTypes.func,\n    buttonLabel: PropTypes.string,\n    skills: PropTypes.arrayOf(PropTypes.string),\n    chapters: PropTypes.arrayOf(PropTypes.object),\n    course_scope: PropTypes.arrayOf(PropTypes.string),\n    resources: ResourceBrowser.propTypes.resources,\n    discussion: PropTypes.shape(Discussion.propTypes)\n  })\n};\n\nexport default ScopeContent;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","PropTypes","Button","Provider","Discussion","ResourceBrowser","style","ScopeContent","props","context","translate","skin","content","lstitle","_chaptersTitle","time","_getOr","title","_skills","_chapters","_resources","skillsTitle","chaptersTitle","onClick","_get","buttonLabel","discussion","skills","map","skill","index","createElement","key","dangerouslySetInnerHTML","__html","chapters","chapter","name","ctaView","type","className","cta","submitValue","backgroundColor","scopeContent","desc","infos","innerHTML","columnLayout","_isEmpty","coltitle","dottedlist","column","roundedlist","bordered","resources","_extends","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","shape","string","func","arrayOf","object","course_scope"],"sources":["../../../src/molecule/scope-content/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {get, getOr, isEmpty} from 'lodash/fp';\nimport Button from '../../atom/button';\nimport Provider from '../../atom/provider';\nimport Discussion from '../../organism/discussion';\nimport ResourceBrowser from '../../organism/resource-browser';\nimport style from './style.css';\n\nconst ScopeContent = (props, context) => {\n  const {translate, skin} = context;\n  const {content} = props;\n\n  const lstitle = translate('At the end of this level, you will be able to_');\n  const _chaptersTitle = translate('chapters');\n\n  const time = getOr('', 'time', content);\n  const title = getOr('', 'title', content);\n  const _skills = getOr([], 'skills', content);\n  const _chapters = getOr([], 'chapters', content);\n  const _resources = getOr([], 'resources', content);\n\n  const skillsTitle = getOr(lstitle, 'skillsTitle', content);\n  const chaptersTitle = getOr(_chaptersTitle, 'chaptersTitle', content);\n\n  const onClick = get('onClick', content);\n  const buttonLabel = get('buttonLabel', content);\n  const discussion = get('discussion', content);\n  const skills = _skills.map((skill, index) => (\n    <li\n      key={index}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{__html: skill}}\n    />\n  ));\n\n  const chapters = _chapters.map((chapter, index) => (\n    <li\n      key={index}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{__html: chapter.name}}\n    />\n  ));\n\n  const ctaView = onClick ? (\n    <Button\n      data-name=\"cta\"\n      type=\"link\"\n      className={style.cta}\n      onClick={onClick}\n      submitValue={buttonLabel}\n      style={{\n        backgroundColor: get('common.primary', skin)\n      }}\n    />\n  ) : null;\n\n  return content && title ? (\n    <div data-name=\"scopeContent\" className={style.scopeContent}>\n      <div data-name=\"description\" className={style.desc}>\n        <div className={style.infos}>\n          <div className={style.title}>\n            <div\n              className={style.innerHTML}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n            <div>\n              <span data-name=\"duration\" className={style.time}>\n                {time}\n              </span>\n            </div>\n          </div>\n          {ctaView}\n        </div>\n        <div className={style.columnLayout}>\n          {isEmpty(skills) ? null : (\n            <div className={style.skills}>\n              <div className={style.coltitle}>{skillsTitle}</div>\n              <ul className={style.dottedlist}>{skills}</ul>\n            </div>\n          )}\n          {isEmpty(chapters) ? null : (\n            <div className={style.column}>\n              <div className={style.coltitle}>{chaptersTitle}</div>\n              <div>\n                <ul className={style.roundedlist}>{chapters}</ul>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n\n      {!isEmpty(_resources) ? (\n        <div data-name=\"description\" className={style.bordered}>\n          <ResourceBrowser resources={_resources} />\n        </div>\n      ) : null}\n      {discussion ? <Discussion {...discussion} className={style.discussion} /> : null}\n    </div>\n  ) : (\n    <div data-name=\"discussion\">\n      {discussion ? <Discussion {...discussion} className={style.discussion} /> : null}\n    </div>\n  );\n};\n\nScopeContent.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nScopeContent.propTypes = {\n  content: PropTypes.shape({\n    title: PropTypes.string,\n    skillsTitle: PropTypes.string,\n    chaptersTitle: PropTypes.string,\n    time: PropTypes.string,\n    onClick: PropTypes.func,\n    buttonLabel: PropTypes.string,\n    skills: PropTypes.arrayOf(PropTypes.string),\n    chapters: PropTypes.arrayOf(PropTypes.object),\n    course_scope: PropTypes.arrayOf(PropTypes.string),\n    resources: ResourceBrowser.propTypes.resources,\n    discussion: PropTypes.shape(Discussion.propTypes)\n  })\n};\n\nexport default ScopeContent;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/scope-content/style.css

@@ -17,7 +17,16 @@
   border-right: solid 1px light;
   border-bottom: 1px solid light;
 }
+.scopeContent {
+  width: 100%;
+}
 
+.columnLayout {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+}
 .infos {
   width: 100%;
   display: flex;
@@ -57,7 +66,7 @@
   box-sizing: border-box;
   display: inline-block;
   vertical-align: top;
-  width: 50%;
+  flex: 1 0 50%;
   font-family: "Gilroy";
   font-size: 12px;
   padding-right: 40px;

package/es/molecule/scope-tabs/style.css

@@ -25,7 +25,9 @@
   height: 50px;
   color: dark;
   background: xtraLightGrey;
-  border: 1px solid light;
+  border-bottom: 1px solid light;
+  border-right: 1px solid light;
+  border-left: 1px solid light;
   cursor: pointer;
   flex-direction: row;
   justify-content: center;