@coorpacademy/components 11.6.1 → 11.7.3-alpha.29

package/lib/organism/list-item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/list-item/index.js"],"names":[],"mappings":";AAQA,mDAuBC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/list-item/index.js"],"names":[],"mappings":";AAQA,mDAqCC"}

package/lib/organism/list-item/index.js

@@ -20,16 +20,20 @@ var _style = _interopRequireDefault(require("./style.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const ListItem = props => {
+  let isPublished = false;
   const {
     bulletPointMenuButton,
     buttonLink,
     tags,
-    title
+    title,
+    order,
+    'aria-label': ariaLabel
   } = props;
 
   const tagsView = _map2.default.convert({
     cap: false
   })((tag, index) => {
+    isPublished = tag.type === 'published';
     return /*#__PURE__*/_react.default.createElement("div", {
       key: index,
       className: _style.default.tag
@@ -38,7 +42,15 @@ const ListItem = props => {
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.wrapper
+  }, isPublished ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.orderWrapper
   }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.order,
+    "aria-label": ariaLabel
+  }, order + 1), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.title,
+    title: title
+  }, title)) : /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.title,
     title: title
   }, title), /*#__PURE__*/_react.default.createElement("div", {
@@ -75,7 +87,9 @@ ListItem.propTypes = process.env.NODE_ENV !== "production" ? {
     label: _propTypes.default.string,
     type: _propTypes.default.oneOf(['published', 'draft', 'archived', 'revised', 'default'])
   })),
-  title: _propTypes.default.string.isRequired
+  title: _propTypes.default.string.isRequired,
+  order: _propTypes.default.number,
+  'aria-label': _propTypes.default.string
 } : {};
 var _default = ListItem;
 exports.default = _default;

package/lib/organism/list-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ListItem","props","bulletPointMenuButton","buttonLink","tags","title","tagsView","convert","cap","tag","index","style","wrapper","settings","edit","propTypes","PropTypes","shape","buttonAriaLabel","string","menuAriaLabel","buttons","arrayOf","label","type","onClick","func","ariaLabel","dataName","icon","position","oneOf","isRequired"],"sources":["../../../src/organism/list-item/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {map} from 'lodash/fp';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport BulletPointMenuButton from '../../molecule/bullet-point-menu-button';\nimport style from './style.css';\n\nconst ListItem = props => {\n  const {bulletPointMenuButton, buttonLink, tags, title} = props;\n  const tagsView = map.convert({cap: false})((tag, index) => {\n    return (\n      <div key={index} className={style.tag}>\n        <Tag {...tag} />\n      </div>\n    );\n  })(tags);\n  return (\n    <div className={style.wrapper}>\n      <div className={style.title} title={title}>\n        {title}\n      </div>\n      <div className={style.settings}>\n        {tagsView}\n        <div className={style.edit}>\n          <ButtonLink {...buttonLink} />\n        </div>\n        <BulletPointMenuButton {...bulletPointMenuButton} />\n      </div>\n    </div>\n  );\n};\n\nListItem.propTypes = {\n  bulletPointMenuButton: PropTypes.shape({\n    buttonAriaLabel: PropTypes.string,\n    menuAriaLabel: PropTypes.string,\n    buttons: PropTypes.arrayOf(\n      PropTypes.shape({\n        'data-name': PropTypes.string,\n        label: PropTypes.string,\n        type: PropTypes.string,\n        onClick: PropTypes.func\n      })\n    ),\n    onClick: PropTypes.func\n  }),\n  buttonLink: PropTypes.shape({\n    type: PropTypes.string,\n    label: PropTypes.string,\n    ariaLabel: PropTypes.string,\n    dataName: PropTypes.string,\n    icon: PropTypes.shape({\n      position: PropTypes.string,\n      type: PropTypes.string\n    }),\n    onClick: PropTypes.func\n  }),\n  tags: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      type: PropTypes.oneOf(['published', 'draft', 'archived', 'revised', 'default'])\n    })\n  ),\n  title: PropTypes.string.isRequired\n};\n\nexport default ListItem;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,QAAQ,GAAGC,KAAK,IAAI;EACxB,MAAM;IAACC,qBAAD;IAAwBC,UAAxB;IAAoCC,IAApC;IAA0CC;EAA1C,IAAmDJ,KAAzD;;EACA,MAAMK,QAAQ,GAAG,cAAIC,OAAJ,CAAY;IAACC,GAAG,EAAE;EAAN,CAAZ,EAA0B,CAACC,GAAD,EAAMC,KAAN,KAAgB;IACzD,oBACE;MAAK,GAAG,EAAEA,KAAV;MAAiB,SAAS,EAAEC,cAAA,CAAMF;IAAlC,gBACE,6BAAC,YAAD,EAASA,GAAT,CADF,CADF;EAKD,CANgB,EAMdL,IANc,CAAjB;;EAOA,oBACE;IAAK,SAAS,EAAEO,cAAA,CAAMC;EAAtB,gBACE;IAAK,SAAS,EAAED,cAAA,CAAMN,KAAtB;IAA6B,KAAK,EAAEA;EAApC,GACGA,KADH,CADF,eAIE;IAAK,SAAS,EAAEM,cAAA,CAAME;EAAtB,GACGP,QADH,eAEE;IAAK,SAAS,EAAEK,cAAA,CAAMG;EAAtB,gBACE,6BAAC,mBAAD,EAAgBX,UAAhB,CADF,CAFF,eAKE,6BAAC,8BAAD,EAA2BD,qBAA3B,CALF,CAJF,CADF;AAcD,CAvBD;;AAyBAF,QAAQ,CAACe,SAAT,2CAAqB;EACnBb,qBAAqB,EAAEc,kBAAA,CAAUC,KAAV,CAAgB;IACrCC,eAAe,EAAEF,kBAAA,CAAUG,MADU;IAErCC,aAAa,EAAEJ,kBAAA,CAAUG,MAFY;IAGrCE,OAAO,EAAEL,kBAAA,CAAUM,OAAV,CACPN,kBAAA,CAAUC,KAAV,CAAgB;MACd,aAAaD,kBAAA,CAAUG,MADT;MAEdI,KAAK,EAAEP,kBAAA,CAAUG,MAFH;MAGdK,IAAI,EAAER,kBAAA,CAAUG,MAHF;MAIdM,OAAO,EAAET,kBAAA,CAAUU;IAJL,CAAhB,CADO,CAH4B;IAWrCD,OAAO,EAAET,kBAAA,CAAUU;EAXkB,CAAhB,CADJ;EAcnBvB,UAAU,EAAEa,kBAAA,CAAUC,KAAV,CAAgB;IAC1BO,IAAI,EAAER,kBAAA,CAAUG,MADU;IAE1BI,KAAK,EAAEP,kBAAA,CAAUG,MAFS;IAG1BQ,SAAS,EAAEX,kBAAA,CAAUG,MAHK;IAI1BS,QAAQ,EAAEZ,kBAAA,CAAUG,MAJM;IAK1BU,IAAI,EAAEb,kBAAA,CAAUC,KAAV,CAAgB;MACpBa,QAAQ,EAAEd,kBAAA,CAAUG,MADA;MAEpBK,IAAI,EAAER,kBAAA,CAAUG;IAFI,CAAhB,CALoB;IAS1BM,OAAO,EAAET,kBAAA,CAAUU;EATO,CAAhB,CAdO;EAyBnBtB,IAAI,EAAEY,kBAAA,CAAUM,OAAV,CACJN,kBAAA,CAAUC,KAAV,CAAgB;IACdM,KAAK,EAAEP,kBAAA,CAAUG,MADH;IAEdK,IAAI,EAAER,kBAAA,CAAUe,KAAV,CAAgB,CAAC,WAAD,EAAc,OAAd,EAAuB,UAAvB,EAAmC,SAAnC,EAA8C,SAA9C,CAAhB;EAFQ,CAAhB,CADI,CAzBa;EA+BnB1B,KAAK,EAAEW,kBAAA,CAAUG,MAAV,CAAiBa;AA/BL,CAArB;eAkCehC,Q"}
+{"version":3,"file":"index.js","names":["ListItem","props","isPublished","bulletPointMenuButton","buttonLink","tags","title","order","ariaLabel","tagsView","convert","cap","tag","index","type","style","wrapper","orderWrapper","settings","edit","propTypes","PropTypes","shape","buttonAriaLabel","string","menuAriaLabel","buttons","arrayOf","label","onClick","func","dataName","icon","position","oneOf","isRequired","number"],"sources":["../../../src/organism/list-item/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {map} from 'lodash/fp';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport BulletPointMenuButton from '../../molecule/bullet-point-menu-button';\nimport style from './style.css';\n\nconst ListItem = props => {\n  let isPublished = false;\n  const {bulletPointMenuButton, buttonLink, tags, title, order, 'aria-label': ariaLabel} = props;\n\n  const tagsView = map.convert({cap: false})((tag, index) => {\n    isPublished = tag.type === 'published';\n    return (\n      <div key={index} className={style.tag}>\n        <Tag {...tag} />\n      </div>\n    );\n  })(tags);\n  return (\n    <div className={style.wrapper}>\n      {isPublished ? (\n        <div className={style.orderWrapper}>\n          <div className={style.order} aria-label={ariaLabel}>\n            {order + 1}\n          </div>\n          <div className={style.title} title={title}>\n            {title}\n          </div>\n        </div>\n      ) : (\n        <div className={style.title} title={title}>\n          {title}\n        </div>\n      )}\n      <div className={style.settings}>\n        {tagsView}\n        <div className={style.edit}>\n          <ButtonLink {...buttonLink} />\n        </div>\n        <BulletPointMenuButton {...bulletPointMenuButton} />\n      </div>\n    </div>\n  );\n};\n\nListItem.propTypes = {\n  bulletPointMenuButton: PropTypes.shape({\n    buttonAriaLabel: PropTypes.string,\n    menuAriaLabel: PropTypes.string,\n    buttons: PropTypes.arrayOf(\n      PropTypes.shape({\n        'data-name': PropTypes.string,\n        label: PropTypes.string,\n        type: PropTypes.string,\n        onClick: PropTypes.func\n      })\n    ),\n    onClick: PropTypes.func\n  }),\n  buttonLink: PropTypes.shape({\n    type: PropTypes.string,\n    label: PropTypes.string,\n    ariaLabel: PropTypes.string,\n    dataName: PropTypes.string,\n    icon: PropTypes.shape({\n      position: PropTypes.string,\n      type: PropTypes.string\n    }),\n    onClick: PropTypes.func\n  }),\n  tags: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      type: PropTypes.oneOf(['published', 'draft', 'archived', 'revised', 'default'])\n    })\n  ),\n  title: PropTypes.string.isRequired,\n  order: PropTypes.number,\n  'aria-label': PropTypes.string\n};\n\nexport default ListItem;\n"],"mappings":"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"}

package/lib/organism/list-item/style.css

@@ -4,6 +4,7 @@
 @value xtraLightGrey from colors;
 @value cm_grey_900 from colors;
 @value primaryAdd1 from colors;
+@value cm_grey_400 from colors;
 
 .wrapper {
   align-items: center;
@@ -51,3 +52,20 @@
   margin: 0 16px 0 0;
   min-width: 93px;
 }
+
+.order {
+  width: 6px;
+  height: 20px;
+  font-family: 'Gilroy';
+  font-style: normal;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
+  color: cm_grey_400;
+  margin: 0 16px 0 0;
+}
+.orderWrapper {
+  align-items: center;
+  display: flex;
+  width: 100%;
+}

package/lib/organism/list-items/index.d.ts

@@ -56,6 +56,8 @@ declare namespace ListItems {
                 type: PropTypes.Requireable<string>;
             }> | null | undefined)[]>;
             title: PropTypes.Validator<string>;
+            order: PropTypes.Requireable<number>;
+            'aria-label': PropTypes.Requireable<string>;
         }> | null | undefined)[]>;
         title: PropTypes.Requireable<string>;
     };

package/lib/organism/list-items/index.js

@@ -17,6 +17,8 @@ var _style = _interopRequireDefault(require("./style.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 const ListItems = ({
   title,
   buttonLink,
@@ -27,7 +29,9 @@ const ListItems = ({
     key: item.id,
     className: _style.default.item,
     "data-name": `content-${index}`
-  }, /*#__PURE__*/_react.default.createElement(_listItem.default, item)));
+  }, /*#__PURE__*/_react.default.createElement(_listItem.default, _extends({}, item, {
+    order: index
+  }))));
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.header
   }, /*#__PURE__*/_react.default.createElement("div", {

package/lib/organism/list-items/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ListItems","title","buttonLink","items","ariaLabel","itemsView","map","item","index","id","style","header","buttonCreate","list","propTypes","PropTypes","string","shape","ButtonLink","arrayOf","ListItem"],"sources":["../../../src/organism/list-items/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport ListItem from '../list-item';\nimport Title from '../../atom/title';\nimport ButtonLink from '../../atom/button-link';\nimport style from './style.css';\n\nconst ListItems = ({title, buttonLink, items, 'aria-label': ariaLabel}) => {\n  const itemsView = items.map((item, index) => (\n    <li key={item.id} className={style.item} data-name={`content-${index}`}>\n      <ListItem {...item} />\n    </li>\n  ));\n\n  return (\n    <div>\n      <div className={style.header}>\n        <div className={style.title}>\n          <Title title={title} type={'form-group'} data-name={'list-title'} />\n        </div>\n        <div className={style.buttonCreate}>\n          <ButtonLink {...buttonLink} />\n        </div>\n      </div>\n      <ul className={style.list} aria-label={ariaLabel} data-name={'content-list'}>\n        {itemsView}\n      </ul>\n    </div>\n  );\n};\n\nListItems.propTypes = {\n  'aria-label': PropTypes.string,\n  buttonLink: PropTypes.shape(ButtonLink.propTypes),\n  items: PropTypes.arrayOf(PropTypes.shape(ListItem.propTypes)),\n  title: PropTypes.string\n};\n\nexport default ListItems;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,SAAS,GAAG,CAAC;EAACC,KAAD;EAAQC,UAAR;EAAoBC,KAApB;EAA2B,cAAcC;AAAzC,CAAD,KAAyD;EACzE,MAAMC,SAAS,GAAGF,KAAK,CAACG,GAAN,CAAU,CAACC,IAAD,EAAOC,KAAP,kBAC1B;IAAI,GAAG,EAAED,IAAI,CAACE,EAAd;IAAkB,SAAS,EAAEC,cAAA,CAAMH,IAAnC;IAAyC,aAAY,WAAUC,KAAM;EAArE,gBACE,6BAAC,iBAAD,EAAcD,IAAd,CADF,CADgB,CAAlB;EAMA,oBACE,uDACE;IAAK,SAAS,EAAEG,cAAA,CAAMC;EAAtB,gBACE;IAAK,SAAS,EAAED,cAAA,CAAMT;EAAtB,gBACE,6BAAC,cAAD;IAAO,KAAK,EAAEA,KAAd;IAAqB,IAAI,EAAE,YAA3B;IAAyC,aAAW;EAApD,EADF,CADF,eAIE;IAAK,SAAS,EAAES,cAAA,CAAME;EAAtB,gBACE,6BAAC,mBAAD,EAAgBV,UAAhB,CADF,CAJF,CADF,eASE;IAAI,SAAS,EAAEQ,cAAA,CAAMG,IAArB;IAA2B,cAAYT,SAAvC;IAAkD,aAAW;EAA7D,GACGC,SADH,CATF,CADF;AAeD,CAtBD;;AAwBAL,SAAS,CAACc,SAAV,2CAAsB;EACpB,cAAcC,kBAAA,CAAUC,MADJ;EAEpBd,UAAU,EAAEa,kBAAA,CAAUE,KAAV,CAAgBC,mBAAA,CAAWJ,SAA3B,CAFQ;EAGpBX,KAAK,EAAEY,kBAAA,CAAUI,OAAV,CAAkBJ,kBAAA,CAAUE,KAAV,CAAgBG,iBAAA,CAASN,SAAzB,CAAlB,CAHa;EAIpBb,KAAK,EAAEc,kBAAA,CAAUC;AAJG,CAAtB;eAOehB,S"}
+{"version":3,"file":"index.js","names":["ListItems","title","buttonLink","items","ariaLabel","itemsView","map","item","index","id","style","header","buttonCreate","list","propTypes","PropTypes","string","shape","ButtonLink","arrayOf","ListItem"],"sources":["../../../src/organism/list-items/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport ListItem from '../list-item';\nimport Title from '../../atom/title';\nimport ButtonLink from '../../atom/button-link';\nimport style from './style.css';\n\nconst ListItems = ({title, buttonLink, items, 'aria-label': ariaLabel}) => {\n  const itemsView = items.map((item, index) => (\n    <li key={item.id} className={style.item} data-name={`content-${index}`}>\n      <ListItem {...item} order={index} />\n    </li>\n  ));\n\n  return (\n    <div>\n      <div className={style.header}>\n        <div className={style.title}>\n          <Title title={title} type={'form-group'} data-name={'list-title'} />\n        </div>\n        <div className={style.buttonCreate}>\n          <ButtonLink {...buttonLink} />\n        </div>\n      </div>\n      <ul className={style.list} aria-label={ariaLabel} data-name={'content-list'}>\n        {itemsView}\n      </ul>\n    </div>\n  );\n};\n\nListItems.propTypes = {\n  'aria-label': PropTypes.string,\n  buttonLink: PropTypes.shape(ButtonLink.propTypes),\n  items: PropTypes.arrayOf(PropTypes.shape(ListItem.propTypes)),\n  title: PropTypes.string\n};\n\nexport default ListItems;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,SAAS,GAAG,CAAC;EAACC,KAAD;EAAQC,UAAR;EAAoBC,KAApB;EAA2B,cAAcC;AAAzC,CAAD,KAAyD;EACzE,MAAMC,SAAS,GAAGF,KAAK,CAACG,GAAN,CAAU,CAACC,IAAD,EAAOC,KAAP,kBAC1B;IAAI,GAAG,EAAED,IAAI,CAACE,EAAd;IAAkB,SAAS,EAAEC,cAAA,CAAMH,IAAnC;IAAyC,aAAY,WAAUC,KAAM;EAArE,gBACE,6BAAC,iBAAD,eAAcD,IAAd;IAAoB,KAAK,EAAEC;EAA3B,GADF,CADgB,CAAlB;EAMA,oBACE,uDACE;IAAK,SAAS,EAAEE,cAAA,CAAMC;EAAtB,gBACE;IAAK,SAAS,EAAED,cAAA,CAAMT;EAAtB,gBACE,6BAAC,cAAD;IAAO,KAAK,EAAEA,KAAd;IAAqB,IAAI,EAAE,YAA3B;IAAyC,aAAW;EAApD,EADF,CADF,eAIE;IAAK,SAAS,EAAES,cAAA,CAAME;EAAtB,gBACE,6BAAC,mBAAD,EAAgBV,UAAhB,CADF,CAJF,CADF,eASE;IAAI,SAAS,EAAEQ,cAAA,CAAMG,IAArB;IAA2B,cAAYT,SAAvC;IAAkD,aAAW;EAA7D,GACGC,SADH,CATF,CADF;AAeD,CAtBD;;AAwBAL,SAAS,CAACc,SAAV,2CAAsB;EACpB,cAAcC,kBAAA,CAAUC,MADJ;EAEpBd,UAAU,EAAEa,kBAAA,CAAUE,KAAV,CAAgBC,mBAAA,CAAWJ,SAA3B,CAFQ;EAGpBX,KAAK,EAAEY,kBAAA,CAAUI,OAAV,CAAkBJ,kBAAA,CAAUE,KAAV,CAAgBG,iBAAA,CAASN,SAAzB,CAAlB,CAHa;EAIpBb,KAAK,EAAEc,kBAAA,CAAUC;AAJG,CAAtB;eAOehB,S"}

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

@@ -19,6 +19,7 @@ declare namespace UserPreferences {
             requiredSelection: PropTypes.Requireable<boolean>;
         }> | null | undefined)[]>;
         const moreInfoAriaLabel: PropTypes.Requireable<string>;
+        const groupAriaLabel: PropTypes.Requireable<string>;
     }
 }
 import PropTypes from "prop-types";

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,0DAaC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/user-preferences/index.js"],"names":[],"mappings":";AAoCA,0DAeC"}

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

@@ -59,19 +59,23 @@ Settings.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, _input
 const UserPreferences = props => {
   const {
     preferences = [],
-    moreInfoAriaLabel
+    moreInfoAriaLabel,
+    groupAriaLabel
   } = props;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.preferences
+  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, {
     key: settings.label,
     moreInfoAriaLabel: moreInfoAriaLabel
-  })), preferences));
+  })), preferences)));
 };
 
 UserPreferences.propTypes = process.env.NODE_ENV !== "production" ? {
   preferences: _propTypes.default.arrayOf(_propTypes.default.shape(Settings.propTypes)),
-  moreInfoAriaLabel: _propTypes.default.string
+  moreInfoAriaLabel: _propTypes.default.string,
+  groupAriaLabel: _propTypes.default.string
 } : {};
 var _default = UserPreferences;
 exports.default = _default;

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","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} = props;\n\n  return (\n    <div className={style.preferences}>\n      {map(\n        settings => (\n          <Settings {...settings} key={settings.label} moreInfoAriaLabel={moreInfoAriaLabel} />\n        ),\n        preferences\n      )}\n    </div>\n  );\n};\n\nUserPreferences.propTypes = {\n  preferences: PropTypes.arrayOf(PropTypes.shape(Settings.propTypes)),\n  moreInfoAriaLabel: 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;EAAnB,IAAwCH,KAA9C;EAEA,oBACE;IAAK,SAAS,EAAEK,cAAA,CAAMW;EAAtB,GACG,mBACCZ,QAAQ,iBACN,6BAAC,QAAD,eAAcA,QAAd;IAAwB,GAAG,EAAEA,QAAQ,CAACH,KAAtC;IAA6C,iBAAiB,EAAEE;EAAhE,GAFH,EAICa,WAJD,CADH,CADF;AAUD,CAbD;;AAeAD,eAAe,CAACL,SAAhB,2CAA4B;EAC1BM,WAAW,EAAEJ,kBAAA,CAAUK,OAAV,CAAkBL,kBAAA,CAAUM,KAAV,CAAgBnB,QAAQ,CAACW,SAAzB,CAAlB,CADa;EAE1BP,iBAAiB,EAAES,kBAAA,CAAUC;AAFH,CAA5B;eAKeE,e"}
+{"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"}

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

@@ -143,6 +143,15 @@ declare namespace WizardContents {
                         selected: PropTypes.Requireable<boolean>;
                         validOption: PropTypes.Requireable<boolean>;
                     }> | null | undefined)[]>;
+                    optgroups: PropTypes.Requireable<(PropTypes.InferProps<{
+                        label: PropTypes.Validator<string>;
+                        options: PropTypes.Requireable<(PropTypes.InferProps<{
+                            name: PropTypes.Validator<string>;
+                            value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+                            selected: PropTypes.Requireable<boolean>;
+                            validOption: PropTypes.Requireable<boolean>;
+                        }> | null | undefined)[]>;
+                    }> | null | undefined)[]>;
                     modified: PropTypes.Requireable<boolean>;
                     error: PropTypes.Requireable<boolean>;
                     'aria-label': PropTypes.Requireable<string>;
@@ -247,6 +256,15 @@ declare namespace WizardContents {
                                 selected: PropTypes.Requireable<boolean>;
                                 validOption: PropTypes.Requireable<boolean>;
                             }> | null | undefined)[]>;
+                            optgroups: PropTypes.Requireable<(PropTypes.InferProps<{
+                                label: PropTypes.Validator<string>;
+                                options: PropTypes.Requireable<(PropTypes.InferProps<{
+                                    name: PropTypes.Validator<string>;
+                                    value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+                                    selected: PropTypes.Requireable<boolean>;
+                                    validOption: PropTypes.Requireable<boolean>;
+                                }> | null | undefined)[]>;
+                            }> | null | undefined)[]>;
                             modified: PropTypes.Requireable<boolean>;
                             error: PropTypes.Requireable<boolean>;
                             'aria-label': PropTypes.Requireable<string>;

package/lib/template/activity/index.d.ts

@@ -1,14 +1,38 @@
 export default Progression;
-declare class Progression extends React.Component<any, any, any> {
-    static propTypes: {
-        mainTitle: PropTypes.Validator<string>;
-        mainSubtitle: PropTypes.Validator<string>;
-        adaptiveAriaLabel: PropTypes.Requireable<string>;
-        total: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+declare function Progression(props: any, legacyContext: any): JSX.Element;
+declare namespace Progression {
+    namespace contextTypes {
+        const skin: PropTypes.Requireable<PropTypes.InferProps<{
+            common: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            images: PropTypes.Requireable<PropTypes.InferProps<{
+                'logo-mobile': PropTypes.Requireable<any>;
+                logo: PropTypes.Requireable<any>;
+                'logo-email': PropTypes.Requireable<any>;
+                login: PropTypes.Requireable<any>;
+            }>>;
+            icons: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            mod: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            courses: PropTypes.Requireable<any[]>;
+            texts: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+        }>>;
+    }
+    namespace propTypes {
+        const mainTitle: PropTypes.Validator<string>;
+        const mainSubtitle: PropTypes.Validator<string>;
+        const adaptiveAriaLabel: PropTypes.Requireable<string>;
+        const total: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
             label: PropTypes.Validator<string>;
             stars: PropTypes.Validator<number>;
         }>>>;
-        engines: PropTypes.Requireable<(PropTypes.InferProps<{
+        const engines: PropTypes.Requireable<(PropTypes.InferProps<{
             type: PropTypes.Validator<string>;
             stars: PropTypes.Validator<number>;
             title: PropTypes.Validator<string>;
@@ -22,8 +46,8 @@ declare class Progression extends React.Component<any, any, any> {
                 onClick: PropTypes.Requireable<(...args: any[]) => any>;
             }>>;
         }> | null | undefined)[]>;
-        loading: PropTypes.Validator<boolean>;
-        progressions: PropTypes.Requireable<(PropTypes.InferProps<{
+        const loading: PropTypes.Validator<boolean>;
+        const progressions: PropTypes.Requireable<(PropTypes.InferProps<{
             ref: PropTypes.Validator<string>;
             completion: PropTypes.Validator<number>;
             stars: PropTypes.Validator<number>;
@@ -38,7 +62,7 @@ declare class Progression extends React.Component<any, any, any> {
             adaptive: PropTypes.Validator<boolean>;
             onClick: PropTypes.Requireable<(...args: any[]) => any>;
         }> | null | undefined)[]>;
-        themeFilter: PropTypes.Requireable<PropTypes.InferProps<{
+        const themeFilter: PropTypes.Requireable<PropTypes.InferProps<{
             options: PropTypes.Validator<(PropTypes.InferProps<{
                 name: PropTypes.Validator<string>;
                 value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
@@ -47,42 +71,14 @@ declare class Progression extends React.Component<any, any, any> {
             }> | null | undefined)[]>;
             onChange: PropTypes.Requireable<(...args: any[]) => any>;
         }>>;
-        recommendation: PropTypes.Requireable<PropTypes.InferProps<{
+        const recommendation: PropTypes.Requireable<PropTypes.InferProps<{
             cta: PropTypes.Validator<string>;
             title: PropTypes.Validator<string>;
             subtitle: PropTypes.Validator<string>;
             courseTitle: PropTypes.Validator<string>;
             onClick: PropTypes.Requireable<(...args: any[]) => any>;
         }>>;
-    };
-    static contextTypes: {
-        skin: PropTypes.Requireable<PropTypes.InferProps<{
-            common: PropTypes.Requireable<{
-                [x: string]: any;
-            }>;
-            images: PropTypes.Requireable<PropTypes.InferProps<{
-                'logo-mobile': PropTypes.Requireable<any>;
-                logo: PropTypes.Requireable<any>;
-                'logo-email': PropTypes.Requireable<any>;
-                login: PropTypes.Requireable<any>;
-            }>>;
-            icons: PropTypes.Requireable<{
-                [x: string]: any;
-            }>;
-            mod: PropTypes.Requireable<{
-                [x: string]: any;
-            }>;
-            courses: PropTypes.Requireable<any[]>;
-            texts: PropTypes.Requireable<{
-                [x: string]: any;
-            }>;
-        }>>;
-    };
-    constructor(props: any, context: any);
-    handleClick: (e: any) => void;
-    handleSelectTheme: (e: any) => void;
-    render(): JSX.Element;
+    }
 }
-import React from "react";
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/lib/template/activity/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/activity/index.js"],"names":[],"mappings":";AAaA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAwBE;IAEF;;;;;;;;;;;;;;;;;;;;;;MAEE;IAEF,sCAIC;IAED,8BAME;IAEF,oCAKE;IAEF,sBAoFC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/activity/index.js"],"names":[],"mappings":";AAeA,0EAuGC"}

package/lib/template/activity/index.js

@@ -3,19 +3,19 @@
 exports.__esModule = true;
 exports.default = void 0;
 
-var _isEmpty2 = _interopRequireDefault(require("lodash/fp/isEmpty"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _omit2 = _interopRequireDefault(require("lodash/fp/omit"));
+var _get = _interopRequireDefault(require("lodash/fp/get"));
 
-var _get2 = _interopRequireDefault(require("lodash/fp/get"));
+var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
 
-var _react = _interopRequireDefault(require("react"));
+var _omit = _interopRequireDefault(require("lodash/fp/omit"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _provider = _interopRequireDefault(require("../../atom/provider"));
+var _provider = _interopRequireWildcard(require("../../atom/provider"));
 
 var _button = _interopRequireDefault(require("../../atom/button"));
 
@@ -33,114 +33,99 @@ var _style = _interopRequireDefault(require("./style.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-class Progression extends _react.default.Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this.handleClick = e => {
-      const {
-        recommendation
-      } = this.props;
-      e.stopPropagation();
-      e.preventDefault();
-      const {
-        onClick
-      } = recommendation;
-      onClick && onClick(e);
-    };
-
-    this.handleSelectTheme = e => {
-      const {
-        themeFilter: {
-          onChange
-        }
-      } = this.props;
-      onChange && onChange(e);
-    };
-
-    this.handleClick = this.handleClick.bind(this);
-    this.handleSelectTheme = this.handleSelectTheme.bind(this);
-  }
-
-  render() {
+const Progression = (props, legacyContext) => {
+  const {
+    mainTitle,
+    mainSubtitle,
+    recommendation = {},
+    progressions = [],
+    adaptiveAriaLabel,
+    total,
+    engines = [],
+    themeFilter = {},
+    loading
+  } = props;
+  const skin = (0, _provider.GetSkinFromContext)(legacyContext);
+  const {
+    onChange: themeFilterOnChange
+  } = themeFilter;
+  const handleClick = (0, _react.useCallback)(e => {
+    e.stopPropagation();
+    e.preventDefault();
     const {
-      mainTitle,
-      mainSubtitle,
-      recommendation = {},
-      progressions = [],
-      adaptiveAriaLabel,
-      total,
-      engines = [],
-      themeFilter = {},
-      loading
-    } = this.props;
-    const {
-      skin
-    } = this.context;
-    const primary = (0, _get2.default)('common.primary', skin);
-    const loader = loading ? /*#__PURE__*/_react.default.createElement("div", {
-      className: _style.default.loader
-    }, /*#__PURE__*/_react.default.createElement(_loader.default, null)) : null;
-    const allProgressions = progressions.map(progression => /*#__PURE__*/_react.default.createElement(_progressionItem.default, _extends({}, (0, _omit2.default)(['ref'], progression), {
-      key: progression.ref,
-      adaptiveAriaLabel: adaptiveAriaLabel
-    })));
-
-    const coreProgression = /*#__PURE__*/_react.default.createElement("div", {
-      "data-name": "activityCore",
-      className: _style.default.core
-    }, allProgressions);
-
-    const themeSelect = !(0, _isEmpty2.default)(themeFilter.options) ? /*#__PURE__*/_react.default.createElement(_select.default, {
-      borderClassName: _style.default.selectBorder,
-      className: _style.default.select,
-      theme: "thematiques",
-      options: themeFilter.options,
-      onChange: this.handleSelectTheme
-    }) : null;
-    const recommendationSection = !(0, _isEmpty2.default)(recommendation) ? /*#__PURE__*/_react.default.createElement("div", {
-      className: _style.default.recommendationWrapper
-    }, /*#__PURE__*/_react.default.createElement("p", {
-      className: _style.default.recommendationSection
-    }, recommendation.title, " "), /*#__PURE__*/_react.default.createElement("p", {
-      className: _style.default.recommendationSection
-    }, /*#__PURE__*/_react.default.createElement("span", null, recommendation.subtitle, " "), /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(_style.default.course, _style.default.innerHTML) // eslint-disable-next-line react/no-danger
-      ,
-      dangerouslySetInnerHTML: {
-        __html: recommendation.courseTitle
-      }
-    })), /*#__PURE__*/_react.default.createElement(_button.default, {
-      type: "link",
-      onClick: this.handleClick,
-      submitValue: recommendation.cta,
-      style: {
-        backgroundColor: primary
-      },
-      className: _style.default.cta
-    })) : null;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: _style.default.default
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      "data-name": "activity-header"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: _style.default.mainTitle
-    }, /*#__PURE__*/_react.default.createElement("span", null, mainTitle), " ", mainSubtitle), /*#__PURE__*/_react.default.createElement("div", {
-      className: _style.default.headerProgression
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: _style.default.wrapperCta
-    }, themeSelect, recommendationSection), /*#__PURE__*/_react.default.createElement(_starsSummary.default, {
-      engines: engines,
-      total: total
-    }))), /*#__PURE__*/_react.default.createElement("div", {
-      className: _style.default.wrapperProgression,
-      "data-name": "activityList"
-    }, coreProgression, loader));
-  }
-
-}
+      onClick
+    } = recommendation;
+    onClick && onClick(e);
+  }, [recommendation]);
+  const handleSelectTheme = (0, _react.useCallback)(e => {
+    themeFilterOnChange && themeFilterOnChange(e);
+  }, [themeFilterOnChange]);
+  const primary = (0, _get.default)('common.primary', skin);
+  const loader = loading ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.loader
+  }, /*#__PURE__*/_react.default.createElement(_loader.default, null)) : null;
+  const allProgressions = progressions.map(progression => /*#__PURE__*/_react.default.createElement(_progressionItem.default, _extends({}, (0, _omit.default)(['ref'], progression), {
+    key: progression.ref,
+    adaptiveAriaLabel: adaptiveAriaLabel
+  })));
+
+  const coreProgression = /*#__PURE__*/_react.default.createElement("div", {
+    "data-name": "activityCore",
+    className: _style.default.core
+  }, allProgressions);
+
+  const themeSelect = !(0, _isEmpty.default)(themeFilter.options) ? /*#__PURE__*/_react.default.createElement(_select.default, {
+    borderClassName: _style.default.selectBorder,
+    className: _style.default.select,
+    theme: "thematiques",
+    options: themeFilter.options,
+    onChange: handleSelectTheme
+  }) : null;
+  const recommendationSection = !(0, _isEmpty.default)(recommendation) ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.recommendationWrapper
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: _style.default.recommendationSection
+  }, recommendation.title, " "), /*#__PURE__*/_react.default.createElement("p", {
+    className: _style.default.recommendationSection
+  }, /*#__PURE__*/_react.default.createElement("span", null, recommendation.subtitle, " "), /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)(_style.default.course, _style.default.innerHTML) // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: recommendation.courseTitle
+    }
+  })), /*#__PURE__*/_react.default.createElement(_button.default, {
+    type: "link",
+    onClick: handleClick,
+    submitValue: recommendation.cta,
+    style: {
+      backgroundColor: primary
+    },
+    className: _style.default.cta
+  })) : null;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.default
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-name": "activity-header"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.mainTitle
+  }, /*#__PURE__*/_react.default.createElement("span", null, mainTitle), " ", mainSubtitle), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.headerProgression
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.wrapperCta
+  }, themeSelect, recommendationSection), /*#__PURE__*/_react.default.createElement(_starsSummary.default, {
+    engines: engines,
+    total: total
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.wrapperProgression,
+    "data-name": "activityList"
+  }, coreProgression, loader));
+};
 
 Progression.contextTypes = {
   skin: _provider.default.childContextTypes.skin