@coorpacademy/components 10.5.3 → 10.5.7-alpha.3

package/es/template/back-office/brand-update/test/fixtures/wizard-organize-courses-playlist.js

@@ -0,0 +1,22 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import WizardForm from '../../../../../organism/wizard-contents/test/fixtures/playlist-organize-courses';
+import headerAndMenu from './default';
+const {
+  header,
+  items
+} = headerAndMenu.props;
+const form = WizardForm.props;
+export default {
+  props: {
+    header,
+    items,
+    notifications: [],
+    content: _extends(_extends({}, form), {}, {
+      isLoading: false,
+      key: 'add-courses',
+      type: 'wizard'
+    })
+  }
+};
+//# sourceMappingURL=wizard-organize-courses-playlist.js.map

package/es/template/back-office/brand-update/test/fixtures/wizard-organize-courses-playlist.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/template/back-office/brand-update/test/fixtures/wizard-organize-courses-playlist.js"],"names":["WizardForm","headerAndMenu","header","items","props","form","notifications","content","isLoading","key","type"],"mappings":";;AAAA,OAAOA,UAAP,MAAuB,iFAAvB;AACA,OAAOC,aAAP,MAA0B,WAA1B;AAEA,MAAM;AAACC,EAAAA,MAAD;AAASC,EAAAA;AAAT,IAAkBF,aAAa,CAACG,KAAtC;AACA,MAAMC,IAAI,GAAGL,UAAU,CAACI,KAAxB;AAEA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLF,IAAAA,MADK;AAELC,IAAAA,KAFK;AAGLG,IAAAA,aAAa,EAAE,EAHV;AAILC,IAAAA,OAAO,wBACFF,IADE;AAELG,MAAAA,SAAS,EAAE,KAFN;AAGLC,MAAAA,GAAG,EAAE,aAHA;AAILC,MAAAA,IAAI,EAAE;AAJD;AAJF;AADM,CAAf","sourcesContent":["import WizardForm from '../../../../../organism/wizard-contents/test/fixtures/playlist-organize-courses';\nimport headerAndMenu from './default';\n\nconst {header, items} = headerAndMenu.props;\nconst form = WizardForm.props;\n\nexport default {\n  props: {\n    header,\n    items,\n    notifications: [],\n    content: {\n      ...form,\n      isLoading: false,\n      key: 'add-courses',\n      type: 'wizard'\n    }\n  }\n};\n"],"file":"wizard-organize-courses-playlist.js"}

package/es/util/get-shadow-box-color-from-primary.js

@@ -0,0 +1,4 @@
+import { convert } from 'css-color-function'; // darken the color down to 35% && apply alpha of 25%
+
+export const getShadowBoxColorFromPrimary = primaryColor => convert(`color(${primaryColor} lightness(35%) a(25%))`);
+//# sourceMappingURL=get-shadow-box-color-from-primary.js.map

package/es/util/get-shadow-box-color-from-primary.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/util/get-shadow-box-color-from-primary.js"],"names":["convert","getShadowBoxColorFromPrimary","primaryColor"],"mappings":"AAAA,SAAQA,OAAR,QAAsB,oBAAtB,C,CAEA;;AACA,OAAO,MAAMC,4BAA4B,GAAGC,YAAY,IACtDF,OAAO,CAAE,SAAQE,YAAa,yBAAvB,CADF","sourcesContent":["import {convert} from 'css-color-function';\n\n// darken the color down to 35% && apply alpha of 25%\nexport const getShadowBoxColorFromPrimary = primaryColor =>\n  convert(`color(${primaryColor} lightness(35%) a(25%))`);\n"],"file":"get-shadow-box-color-from-primary.js"}

package/es/util/test/get-shadow-box-color-from-primary.js

@@ -0,0 +1,33 @@
+import test from 'ava';
+import forEach from 'lodash/fp/forEach';
+import { getShadowBoxColorFromPrimary } from '../get-shadow-box-color-from-primary';
+test('should return transformed colors', t => {
+  t.plan(13);
+  const expectedOrange = 'rgba(179, 42, 0, 0.25)';
+  const expectedRed = 'rgba(179, 0, 0, 0.25)';
+  const expectedYellow = 'rgba(179, 140, 0, 0.25)';
+  const expectedBlue = 'rgba(0, 68, 179, 0.25)'; // a set of possible primary/brand colors
+
+  const primaryColors = {
+    orange: ['#ff6f43', expectedOrange],
+    // original, expected
+    orangeRGB: ['rgb(255, 111, 67)', expectedOrange],
+    orangeRGBA: ['rgba(255, 111, 67, 0)', expectedOrange],
+    red: ['#FF0A0A', expectedRed],
+    redRGB: ['rgb(255, 10, 10)', expectedRed],
+    redRGBA: ['rgba(255, 10, 10, 0)', expectedRed],
+    yellow: ['#ffca0a', expectedYellow],
+    yellowRGB: ['rgb(255, 202, 10)', expectedYellow],
+    yellowRGBA: ['rgba(255, 202, 10, 0)', expectedYellow],
+    blue: ['#0061FF', expectedBlue],
+    blueRGB: ['rgb(0, 97, 255)', expectedBlue],
+    blueRGBA: ['rgba(0, 97, 255, 1)', expectedBlue]
+  };
+  forEach(color => {
+    const [original, expected] = color;
+    const boxShadowColor = getShadowBoxColorFromPrimary(original);
+    t.is(boxShadowColor, expected);
+  }, primaryColors);
+  t.pass();
+});
+//# sourceMappingURL=get-shadow-box-color-from-primary.js.map

package/es/util/test/get-shadow-box-color-from-primary.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/util/test/get-shadow-box-color-from-primary.js"],"names":["test","forEach","getShadowBoxColorFromPrimary","t","plan","expectedOrange","expectedRed","expectedYellow","expectedBlue","primaryColors","orange","orangeRGB","orangeRGBA","red","redRGB","redRGBA","yellow","yellowRGB","yellowRGBA","blue","blueRGB","blueRGBA","color","original","expected","boxShadowColor","is","pass"],"mappings":"AAAA,OAAOA,IAAP,MAAiB,KAAjB;AACA,OAAOC,OAAP,MAAoB,mBAApB;AAEA,SAAQC,4BAAR,QAA2C,sCAA3C;AAEAF,IAAI,CAAC,kCAAD,EAAqCG,CAAC,IAAI;AAC5CA,EAAAA,CAAC,CAACC,IAAF,CAAO,EAAP;AACA,QAAMC,cAAc,GAAG,wBAAvB;AACA,QAAMC,WAAW,GAAG,uBAApB;AACA,QAAMC,cAAc,GAAG,yBAAvB;AACA,QAAMC,YAAY,GAAG,wBAArB,CAL4C,CAM5C;;AACA,QAAMC,aAAa,GAAG;AACpBC,IAAAA,MAAM,EAAE,CAAC,SAAD,EAAYL,cAAZ,CADY;AACiB;AACrCM,IAAAA,SAAS,EAAE,CAAC,mBAAD,EAAsBN,cAAtB,CAFS;AAGpBO,IAAAA,UAAU,EAAE,CAAC,uBAAD,EAA0BP,cAA1B,CAHQ;AAIpBQ,IAAAA,GAAG,EAAE,CAAC,SAAD,EAAYP,WAAZ,CAJe;AAKpBQ,IAAAA,MAAM,EAAE,CAAC,kBAAD,EAAqBR,WAArB,CALY;AAMpBS,IAAAA,OAAO,EAAE,CAAC,sBAAD,EAAyBT,WAAzB,CANW;AAOpBU,IAAAA,MAAM,EAAE,CAAC,SAAD,EAAYT,cAAZ,CAPY;AAQpBU,IAAAA,SAAS,EAAE,CAAC,mBAAD,EAAsBV,cAAtB,CARS;AASpBW,IAAAA,UAAU,EAAE,CAAC,uBAAD,EAA0BX,cAA1B,CATQ;AAUpBY,IAAAA,IAAI,EAAE,CAAC,SAAD,EAAYX,YAAZ,CAVc;AAWpBY,IAAAA,OAAO,EAAE,CAAC,iBAAD,EAAoBZ,YAApB,CAXW;AAYpBa,IAAAA,QAAQ,EAAE,CAAC,qBAAD,EAAwBb,YAAxB;AAZU,GAAtB;AAeAP,EAAAA,OAAO,CAACqB,KAAK,IAAI;AACf,UAAM,CAACC,QAAD,EAAWC,QAAX,IAAuBF,KAA7B;AACA,UAAMG,cAAc,GAAGvB,4BAA4B,CAACqB,QAAD,CAAnD;AACApB,IAAAA,CAAC,CAACuB,EAAF,CAAKD,cAAL,EAAqBD,QAArB;AACD,GAJM,EAIJf,aAJI,CAAP;AAMAN,EAAAA,CAAC,CAACwB,IAAF;AACD,CA7BG,CAAJ","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/fp/forEach';\n\nimport {getShadowBoxColorFromPrimary} from '../get-shadow-box-color-from-primary';\n\ntest('should return transformed colors', t => {\n  t.plan(13);\n  const expectedOrange = 'rgba(179, 42, 0, 0.25)';\n  const expectedRed = 'rgba(179, 0, 0, 0.25)';\n  const expectedYellow = 'rgba(179, 140, 0, 0.25)';\n  const expectedBlue = 'rgba(0, 68, 179, 0.25)';\n  // a set of possible primary/brand colors\n  const primaryColors = {\n    orange: ['#ff6f43', expectedOrange], // original, expected\n    orangeRGB: ['rgb(255, 111, 67)', expectedOrange],\n    orangeRGBA: ['rgba(255, 111, 67, 0)', expectedOrange],\n    red: ['#FF0A0A', expectedRed],\n    redRGB: ['rgb(255, 10, 10)', expectedRed],\n    redRGBA: ['rgba(255, 10, 10, 0)', expectedRed],\n    yellow: ['#ffca0a', expectedYellow],\n    yellowRGB: ['rgb(255, 202, 10)', expectedYellow],\n    yellowRGBA: ['rgba(255, 202, 10, 0)', expectedYellow],\n    blue: ['#0061FF', expectedBlue],\n    blueRGB: ['rgb(0, 97, 255)', expectedBlue],\n    blueRGBA: ['rgba(0, 97, 255, 1)', expectedBlue]\n  };\n\n  forEach(color => {\n    const [original, expected] = color;\n    const boxShadowColor = getShadowBoxColorFromPrimary(original);\n    t.is(boxShadowColor, expected);\n  }, primaryColors);\n\n  t.pass();\n});\n"],"file":"get-shadow-box-color-from-primary.js"}

package/es/variables/colors.css

@@ -30,8 +30,10 @@
 @value cm_blue_50: #f1f6fe;
 @value cm_blue_200: #74A5F6;
 @value cm_blue_600: #0051d6;
+@value cm_blue_900: #06265B;
 @value cm_bleu_article: #365FCD;
 @value cm_grey_50: #FAFAFA;
+@value cm_grey_75: #F4F4F5;
 @value cm_grey_100: #EAEAEB;
 @value cm_grey_150: #E1E1E3;
 @value cm_grey_200: #d7d7da;
@@ -59,3 +61,4 @@
 @value cm_red_video: #E8335E;
 @value cm_violet_podcast: #432ba7;
 @value cm_warning_50: rgba(255, 192, 67, 0.13);
+@value box_shadow_light_dark: rgba(0, 0, 0, 0.12);

package/lib/molecule/course-section/index.js

@@ -28,12 +28,13 @@ const CourseSection = props => {
     'aria-label': {
       title: ariaLabelTitle,
       author: ariaLabelAuthor
-    }
+    },
+    id
   } = props;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.container,
     "aria-label": ariaLabelTitle,
-    "data-name": `course-section-${position}`
+    "data-name": `course-section-${id}`
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: _style.default.position
   }, position), /*#__PURE__*/_react.default.createElement("div", {
@@ -65,7 +66,8 @@ CourseSection.propTypes = process.env.NODE_ENV !== "production" ? {
   contentBadge: _propTypes.default.shape(_contentBadge.default.propTypes),
   title: _propTypes.default.string,
   author: _propTypes.default.string,
-  position: _propTypes.default.number
+  position: _propTypes.default.number,
+  id: _propTypes.default.string
 } : {};
 var _default = CourseSection;
 exports.default = _default;

package/lib/molecule/course-section/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/molecule/course-section/index.js"],"names":["CourseSection","props","image","contentBadge","category","label","title","author","position","ariaLabelTitle","ariaLabelAuthor","style","container","containerImage","containerInfos","containerMainInfos","propTypes","PropTypes","shape","string","ContentBadge","number"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,aAAa,GAAGC,KAAK,IAAI;AAC7B,QAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,YAAY,EAAE;AAACC,MAAAA,QAAD;AAAWC,MAAAA;AAAX,KAFV;AAGJC,IAAAA,KAHI;AAIJC,IAAAA,MAJI;AAKJC,IAAAA,QALI;AAMJ,kBAAc;AAACF,MAAAA,KAAK,EAAEG,cAAR;AAAwBF,MAAAA,MAAM,EAAEG;AAAhC;AANV,MAOFT,KAPJ;AAQA,sBACE;AACE,IAAA,SAAS,EAAEU,eAAMC,SADnB;AAEE,kBAAYH,cAFd;AAGE,iBAAY,kBAAiBD,QAAS;AAHxC,kBAKE;AAAM,IAAA,SAAS,EAAEG,eAAMH;AAAvB,KAAkCA,QAAlC,CALF,eAME;AAAK,IAAA,SAAS,EAAEG,eAAME;AAAtB,kBACE,6BAAC,yBAAD;AAAkB,IAAA,KAAK,EAAEX;AAAzB,IADF,CANF,eASE;AAAK,IAAA,SAAS,EAAES,eAAMG;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEH,eAAMI;AAAtB,kBACE,6BAAC,qBAAD;AAAc,IAAA,SAAS,EAAEJ,eAAMR,YAA/B;AAA6C,IAAA,QAAQ,EAAEC,QAAvD;AAAiE,IAAA,KAAK,EAAEC;AAAxE,IADF,eAEE;AAAK,IAAA,SAAS,EAAEM,eAAML;AAAtB,KAA8BA,KAA9B,CAFF,CADF,eAKE;AAAM,IAAA,SAAS,EAAEK,eAAMJ,MAAvB;AAA+B,kBAAYG;AAA3C,KACGH,MADH,CALF,CATF,CADF;AAqBD,CA9BD;;AAgCAP,aAAa,CAACgB,SAAd,2CAA0B;AACxB,gBAAcC,mBAAUC,KAAV,CAAgB;AAC5BZ,IAAAA,KAAK,EAAEW,mBAAUE,MADW;AAE5BZ,IAAAA,MAAM,EAAEU,mBAAUE;AAFU,GAAhB,CADU;AAKxBjB,EAAAA,KAAK,EAAEe,mBAAUE,MALO;AAMxBhB,EAAAA,YAAY,EAAEc,mBAAUC,KAAV,CAAgBE,sBAAaJ,SAA7B,CANU;AAOxBV,EAAAA,KAAK,EAAEW,mBAAUE,MAPO;AAQxBZ,EAAAA,MAAM,EAAEU,mBAAUE,MARM;AASxBX,EAAAA,QAAQ,EAAES,mBAAUI;AATI,CAA1B;eAYerB,a","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CardImagePreview from '../../atom/card-image-preview';\nimport ContentBadge from '../../atom/content-badge';\nimport style from './style.css';\n\nconst CourseSection = props => {\n  const {\n    image,\n    contentBadge: {category, label},\n    title,\n    author,\n    position,\n    'aria-label': {title: ariaLabelTitle, author: ariaLabelAuthor}\n  } = props;\n  return (\n    <div\n      className={style.container}\n      aria-label={ariaLabelTitle}\n      data-name={`course-section-${position}`}\n    >\n      <span className={style.position}>{position}</span>\n      <div className={style.containerImage}>\n        <CardImagePreview image={image} />\n      </div>\n      <div className={style.containerInfos}>\n        <div className={style.containerMainInfos}>\n          <ContentBadge className={style.contentBadge} category={category} label={label} />\n          <div className={style.title}>{title}</div>\n        </div>\n        <span className={style.author} aria-label={ariaLabelAuthor}>\n          {author}\n        </span>\n      </div>\n    </div>\n  );\n};\n\nCourseSection.propTypes = {\n  'aria-label': PropTypes.shape({\n    title: PropTypes.string,\n    author: PropTypes.string\n  }),\n  image: PropTypes.string,\n  contentBadge: PropTypes.shape(ContentBadge.propTypes),\n  title: PropTypes.string,\n  author: PropTypes.string,\n  position: PropTypes.number\n};\n\nexport default CourseSection;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/molecule/course-section/index.js"],"names":["CourseSection","props","image","contentBadge","category","label","title","author","position","ariaLabelTitle","ariaLabelAuthor","id","style","container","containerImage","containerInfos","containerMainInfos","propTypes","PropTypes","shape","string","ContentBadge","number"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,aAAa,GAAGC,KAAK,IAAI;AAC7B,QAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,YAAY,EAAE;AAACC,MAAAA,QAAD;AAAWC,MAAAA;AAAX,KAFV;AAGJC,IAAAA,KAHI;AAIJC,IAAAA,MAJI;AAKJC,IAAAA,QALI;AAMJ,kBAAc;AAACF,MAAAA,KAAK,EAAEG,cAAR;AAAwBF,MAAAA,MAAM,EAAEG;AAAhC,KANV;AAOJC,IAAAA;AAPI,MAQFV,KARJ;AASA,sBACE;AAAK,IAAA,SAAS,EAAEW,eAAMC,SAAtB;AAAiC,kBAAYJ,cAA7C;AAA6D,iBAAY,kBAAiBE,EAAG;AAA7F,kBACE;AAAM,IAAA,SAAS,EAAEC,eAAMJ;AAAvB,KAAkCA,QAAlC,CADF,eAEE;AAAK,IAAA,SAAS,EAAEI,eAAME;AAAtB,kBACE,6BAAC,yBAAD;AAAkB,IAAA,KAAK,EAAEZ;AAAzB,IADF,CAFF,eAKE;AAAK,IAAA,SAAS,EAAEU,eAAMG;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEH,eAAMI;AAAtB,kBACE,6BAAC,qBAAD;AAAc,IAAA,SAAS,EAAEJ,eAAMT,YAA/B;AAA6C,IAAA,QAAQ,EAAEC,QAAvD;AAAiE,IAAA,KAAK,EAAEC;AAAxE,IADF,eAEE;AAAK,IAAA,SAAS,EAAEO,eAAMN;AAAtB,KAA8BA,KAA9B,CAFF,CADF,eAKE;AAAM,IAAA,SAAS,EAAEM,eAAML,MAAvB;AAA+B,kBAAYG;AAA3C,KACGH,MADH,CALF,CALF,CADF;AAiBD,CA3BD;;AA6BAP,aAAa,CAACiB,SAAd,2CAA0B;AACxB,gBAAcC,mBAAUC,KAAV,CAAgB;AAC5Bb,IAAAA,KAAK,EAAEY,mBAAUE,MADW;AAE5Bb,IAAAA,MAAM,EAAEW,mBAAUE;AAFU,GAAhB,CADU;AAKxBlB,EAAAA,KAAK,EAAEgB,mBAAUE,MALO;AAMxBjB,EAAAA,YAAY,EAAEe,mBAAUC,KAAV,CAAgBE,sBAAaJ,SAA7B,CANU;AAOxBX,EAAAA,KAAK,EAAEY,mBAAUE,MAPO;AAQxBb,EAAAA,MAAM,EAAEW,mBAAUE,MARM;AASxBZ,EAAAA,QAAQ,EAAEU,mBAAUI,MATI;AAUxBX,EAAAA,EAAE,EAAEO,mBAAUE;AAVU,CAA1B;eAaepB,a","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CardImagePreview from '../../atom/card-image-preview';\nimport ContentBadge from '../../atom/content-badge';\nimport style from './style.css';\n\nconst CourseSection = props => {\n  const {\n    image,\n    contentBadge: {category, label},\n    title,\n    author,\n    position,\n    'aria-label': {title: ariaLabelTitle, author: ariaLabelAuthor},\n    id\n  } = props;\n  return (\n    <div className={style.container} aria-label={ariaLabelTitle} data-name={`course-section-${id}`}>\n      <span className={style.position}>{position}</span>\n      <div className={style.containerImage}>\n        <CardImagePreview image={image} />\n      </div>\n      <div className={style.containerInfos}>\n        <div className={style.containerMainInfos}>\n          <ContentBadge className={style.contentBadge} category={category} label={label} />\n          <div className={style.title}>{title}</div>\n        </div>\n        <span className={style.author} aria-label={ariaLabelAuthor}>\n          {author}\n        </span>\n      </div>\n    </div>\n  );\n};\n\nCourseSection.propTypes = {\n  'aria-label': PropTypes.shape({\n    title: PropTypes.string,\n    author: PropTypes.string\n  }),\n  image: PropTypes.string,\n  contentBadge: PropTypes.shape(ContentBadge.propTypes),\n  title: PropTypes.string,\n  author: PropTypes.string,\n  position: PropTypes.number,\n  id: PropTypes.string\n};\n\nexport default CourseSection;\n"],"file":"index.js"}

package/lib/molecule/course-section/style.css

@@ -13,6 +13,7 @@
     justify-content: start;
     margin-top: 8px;
     padding: 8px 16px;
+    border-radius: 7px;
 }
 
 .containerInfos {
@@ -50,7 +51,7 @@
     font-family: Gilroy;
     font-weight: 600;
     line-height: 20px;
-    margin: 0 12px 0 14px;
+    margin: 0 12px 0 32px;
 }
 
 .contentBadge {

package/lib/molecule/course-section/test/fixtures/chapter.js

@@ -15,7 +15,8 @@ var _default = {
       label: 'chapter',
       category: 'chapter'
     },
-    position: 2
+    position: 2,
+    id: 'chap_1'
   }
 };
 exports.default = _default;

package/lib/molecule/course-section/test/fixtures/chapter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/molecule/course-section/test/fixtures/chapter.js"],"names":["props","title","author","image","contentBadge","label","category","position"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACL,kBAAc;AACZC,MAAAA,KAAK,EAAE,kBADK;AAEZC,MAAAA,MAAM,EAAE;AAFI,KADT;AAKLD,IAAAA,KAAK,EAAE,iBALF;AAMLC,IAAAA,MAAM,EAAE,QANH;AAOLC,IAAAA,KAAK,EACH,4LARG;AASLC,IAAAA,YAAY,EAAE;AACZC,MAAAA,KAAK,EAAE,SADK;AAEZC,MAAAA,QAAQ,EAAE;AAFE,KATT;AAaLC,IAAAA,QAAQ,EAAE;AAbL;AADM,C","sourcesContent":["export default {\n  props: {\n    'aria-label': {\n      title: 'aria label title',\n      author: 'aria label author'\n    },\n    title: 'Social networks',\n    author: 'Author',\n    image:\n      'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',\n    contentBadge: {\n      label: 'chapter',\n      category: 'chapter'\n    },\n    position: 2\n  }\n};\n"],"file":"chapter.js"}
+{"version":3,"sources":["../../../../../src/molecule/course-section/test/fixtures/chapter.js"],"names":["props","title","author","image","contentBadge","label","category","position","id"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACL,kBAAc;AACZC,MAAAA,KAAK,EAAE,kBADK;AAEZC,MAAAA,MAAM,EAAE;AAFI,KADT;AAKLD,IAAAA,KAAK,EAAE,iBALF;AAMLC,IAAAA,MAAM,EAAE,QANH;AAOLC,IAAAA,KAAK,EACH,4LARG;AASLC,IAAAA,YAAY,EAAE;AACZC,MAAAA,KAAK,EAAE,SADK;AAEZC,MAAAA,QAAQ,EAAE;AAFE,KATT;AAaLC,IAAAA,QAAQ,EAAE,CAbL;AAcLC,IAAAA,EAAE,EAAE;AAdC;AADM,C","sourcesContent":["export default {\n  props: {\n    'aria-label': {\n      title: 'aria label title',\n      author: 'aria label author'\n    },\n    title: 'Social networks',\n    author: 'Author',\n    image:\n      'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',\n    contentBadge: {\n      label: 'chapter',\n      category: 'chapter'\n    },\n    position: 2,\n    id: 'chap_1'\n  }\n};\n"],"file":"chapter.js"}

package/lib/molecule/course-section/test/fixtures/course.js

@@ -15,7 +15,8 @@ var _default = {
       label: 'course',
       category: 'course'
     },
-    position: 1
+    position: 1,
+    id: 'disc_1'
   }
 };
 exports.default = _default;

package/lib/molecule/course-section/test/fixtures/course.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/molecule/course-section/test/fixtures/course.js"],"names":["props","title","author","image","contentBadge","label","category","position"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACL,kBAAc;AACZC,MAAAA,KAAK,EAAE,kBADK;AAEZC,MAAAA,MAAM,EAAE;AAFI,KADT;AAKLD,IAAAA,KAAK,EACH,qIANG;AAOLC,IAAAA,MAAM,EAAE,QAPH;AAQLC,IAAAA,KAAK,EACH,4LATG;AAULC,IAAAA,YAAY,EAAE;AACZC,MAAAA,KAAK,EAAE,QADK;AAEZC,MAAAA,QAAQ,EAAE;AAFE,KAVT;AAcLC,IAAAA,QAAQ,EAAE;AAdL;AADM,C","sourcesContent":["export default {\n  props: {\n    'aria-label': {\n      title: 'aria label title',\n      author: 'aria label author'\n    },\n    title:\n      'Marketing and online advertising Marketing and online advertising Marketing and online advertising Marketing and online advertising',\n    author: 'Author',\n    image:\n      'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',\n    contentBadge: {\n      label: 'course',\n      category: 'course'\n    },\n    position: 1\n  }\n};\n"],"file":"course.js"}
+{"version":3,"sources":["../../../../../src/molecule/course-section/test/fixtures/course.js"],"names":["props","title","author","image","contentBadge","label","category","position","id"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACL,kBAAc;AACZC,MAAAA,KAAK,EAAE,kBADK;AAEZC,MAAAA,MAAM,EAAE;AAFI,KADT;AAKLD,IAAAA,KAAK,EACH,qIANG;AAOLC,IAAAA,MAAM,EAAE,QAPH;AAQLC,IAAAA,KAAK,EACH,4LATG;AAULC,IAAAA,YAAY,EAAE;AACZC,MAAAA,KAAK,EAAE,QADK;AAEZC,MAAAA,QAAQ,EAAE;AAFE,KAVT;AAcLC,IAAAA,QAAQ,EAAE,CAdL;AAeLC,IAAAA,EAAE,EAAE;AAfC;AADM,C","sourcesContent":["export default {\n  props: {\n    'aria-label': {\n      title: 'aria label title',\n      author: 'aria label author'\n    },\n    title:\n      'Marketing and online advertising Marketing and online advertising Marketing and online advertising Marketing and online advertising',\n    author: 'Author',\n    image:\n      'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',\n    contentBadge: {\n      label: 'course',\n      category: 'course'\n    },\n    position: 1,\n    id: 'disc_1'\n  }\n};\n"],"file":"course.js"}

package/lib/molecule/course-section/test/fixtures.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _ava = _interopRequireDefault(require("ava"));
+
+var _forEach = _interopRequireDefault(require("lodash/forEach"));
+
+var _renderComponent = _interopRequireDefault(require("../../../test/helpers/render-component"));
+
+var _ = _interopRequireDefault(require(".."));
+
+var _chapter = _interopRequireDefault(require("./fixtures/chapter"));
+
+var _course = _interopRequireDefault(require("./fixtures/course"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+(0, _ava.default)('Molecule › MoleculeCourseSection > should have valid propTypes', t => {
+  t.pass();
+  (0, _forEach.default)(_.default.propTypes, (value, key) => {
+    t.not(value, undefined, `PropType for "Molecule.MoleculeCourseSection.propTypes.${key}" may not be undefined. Did you mistype the propTypes definition?`);
+  });
+});
+(0, _ava.default)('Molecule › MoleculeCourseSection › Chapter › should be rendered', _renderComponent.default, _.default, _chapter.default);
+(0, _ava.default)('Molecule › MoleculeCourseSection › Course › should be rendered', _renderComponent.default, _.default, _course.default);
+//# sourceMappingURL=fixtures.js.map

package/lib/molecule/course-section/test/fixtures.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/molecule/course-section/test/fixtures.js"],"names":["t","pass","MoleculeCourseSection","propTypes","value","key","not","undefined","renderComponentMacro","fixtureChapter","fixtureCourse"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,gEAAL,EAAuEA,CAAC,IAAI;AAC1EA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAAsBC,SAA9B,EAAyC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACvDL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,0DAAyDF,GAAI,mEAAtF;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,iEAAL,EAAwEG,wBAAxE,EAA8FN,SAA9F,EAAqHO,gBAArH;AACA,kBAAK,gEAAL,EAAuED,wBAAvE,EAA6FN,SAA7F,EAAoHQ,eAApH","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport MoleculeCourseSection from '..';\nimport fixtureChapter from './fixtures/chapter';\nimport fixtureCourse from './fixtures/course';\n\ntest('Molecule › MoleculeCourseSection > should have valid propTypes', t => {\n  t.pass();\n  forEach(MoleculeCourseSection.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"Molecule.MoleculeCourseSection.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('Molecule › MoleculeCourseSection › Chapter › should be rendered', renderComponentMacro, MoleculeCourseSection, fixtureChapter);\ntest('Molecule › MoleculeCourseSection › Course › should be rendered', renderComponentMacro, MoleculeCourseSection, fixtureCourse);\n"],"file":"fixtures.js"}

package/lib/molecule/course-sections/index.js

@@ -0,0 +1,54 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _courseSection = _interopRequireDefault(require("../course-section"));
+
+var _draggableList = _interopRequireDefault(require("../draggable-list"));
+
+var _loader = _interopRequireDefault(require("../../atom/loader"));
+
+var _title = _interopRequireDefault(require("../../atom/title"));
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Loading = () => /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_loader.default, {
+  theme: "coorpmanager"
+}));
+
+const CourseSections = ({
+  sections,
+  onDrop,
+  isLoading,
+  title
+}) => {
+  if (isLoading) return /*#__PURE__*/_react.default.createElement(Loading, null);
+  return /*#__PURE__*/_react.default.createElement("div", null, title ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.title
+  }, /*#__PURE__*/_react.default.createElement(_title.default, {
+    title: title,
+    type: 'form-group',
+    "data-name": 'course-sections-title'
+  })) : null, /*#__PURE__*/_react.default.createElement(_draggableList.default, {
+    itemType: "course-section",
+    items: sections,
+    onDrop: onDrop
+  }));
+};
+
+CourseSections.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: _propTypes.default.string,
+  sections: _propTypes.default.arrayOf(_propTypes.default.shape(_courseSection.default.propTypes)),
+  onDrop: _propTypes.default.func,
+  isLoading: _propTypes.default.bool
+} : {};
+var _default = CourseSections;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/molecule/course-sections/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/molecule/course-sections/index.js"],"names":["Loading","CourseSections","sections","onDrop","isLoading","title","style","propTypes","PropTypes","string","arrayOf","shape","CourseSection","func","bool"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,OAAO,GAAG,mBACd,uDACE,6BAAC,eAAD;AAAQ,EAAA,KAAK,EAAC;AAAd,EADF,CADF;;AAMA,MAAMC,cAAc,GAAG,CAAC;AAACC,EAAAA,QAAD;AAAWC,EAAAA,MAAX;AAAmBC,EAAAA,SAAnB;AAA8BC,EAAAA;AAA9B,CAAD,KAA0C;AAC/D,MAAID,SAAJ,EAAe,oBAAO,6BAAC,OAAD,OAAP;AAEf,sBACE,0CACGC,KAAK,gBACJ;AAAK,IAAA,SAAS,EAAEC,eAAMD;AAAtB,kBACE,6BAAC,cAAD;AAAO,IAAA,KAAK,EAAEA,KAAd;AAAqB,IAAA,IAAI,EAAE,YAA3B;AAAyC,iBAAW;AAApD,IADF,CADI,GAIF,IALN,eAME,6BAAC,sBAAD;AAAe,IAAA,QAAQ,EAAC,gBAAxB;AAAyC,IAAA,KAAK,EAAEH,QAAhD;AAA0D,IAAA,MAAM,EAAEC;AAAlE,IANF,CADF;AAUD,CAbD;;AAeAF,cAAc,CAACM,SAAf,2CAA2B;AACzBF,EAAAA,KAAK,EAAEG,mBAAUC,MADQ;AAEzBP,EAAAA,QAAQ,EAAEM,mBAAUE,OAAV,CAAkBF,mBAAUG,KAAV,CAAgBC,uBAAcL,SAA9B,CAAlB,CAFe;AAGzBJ,EAAAA,MAAM,EAAEK,mBAAUK,IAHO;AAIzBT,EAAAA,SAAS,EAAEI,mBAAUM;AAJI,CAA3B;eAOeb,c","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CourseSection from '../course-section';\nimport DraggableList from '../draggable-list';\nimport Loader from '../../atom/loader';\nimport Title from '../../atom/title';\nimport style from './style.css';\n\nconst Loading = () => (\n  <div>\n    <Loader theme=\"coorpmanager\" />\n  </div>\n);\n\nconst CourseSections = ({sections, onDrop, isLoading, title}) => {\n  if (isLoading) return <Loading />;\n\n  return (\n    <div>\n      {title ? (\n        <div className={style.title}>\n          <Title title={title} type={'form-group'} data-name={'course-sections-title'} />\n        </div>\n      ) : null}\n      <DraggableList itemType=\"course-section\" items={sections} onDrop={onDrop} />\n    </div>\n  );\n};\n\nCourseSections.propTypes = {\n  title: PropTypes.string,\n  sections: PropTypes.arrayOf(PropTypes.shape(CourseSection.propTypes)),\n  onDrop: PropTypes.func,\n  isLoading: PropTypes.bool\n};\n\nexport default CourseSections;\n"],"file":"index.js"}

package/lib/molecule/course-sections/style.css

@@ -0,0 +1,3 @@
+.title {
+    margin-bottom: 16px;
+}

package/lib/molecule/course-sections/test/fixtures/default.js

@@ -0,0 +1,154 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  props: {
+    sections: [{
+      'aria-label': {
+        title: 'aria label title',
+        author: 'aria label author'
+      },
+      title: 'Marketing and online advertising Marketing and online advertising Marketing and online advertising Marketing and online advertising',
+      author: 'Author',
+      image: 'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',
+      contentBadge: {
+        label: 'course',
+        category: 'course'
+      },
+      position: 1,
+      id: 'disc_1'
+    }, {
+      'aria-label': {
+        title: 'aria label title',
+        author: 'aria label author'
+      },
+      title: 'Social networks',
+      author: 'Author',
+      image: 'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',
+      contentBadge: {
+        label: "5' learning",
+        category: 'chapter'
+      },
+      position: 2,
+      id: 'chap_1'
+    }, {
+      'aria-label': {
+        title: 'aria label title',
+        author: 'aria label author'
+      },
+      title: 'Other title',
+      author: 'Author 2',
+      image: 'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',
+      contentBadge: {
+        label: 'course',
+        category: 'course'
+      },
+      position: 3,
+      id: 'disc_2'
+    }, {
+      'aria-label': {
+        title: 'aria label title',
+        author: 'aria label author'
+      },
+      title: 'Social others',
+      author: 'Author XXX',
+      image: 'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',
+      contentBadge: {
+        label: "5' learning",
+        category: 'chapter'
+      },
+      position: 4,
+      id: 'chap_2'
+    }, {
+      'aria-label': {
+        title: 'aria label title',
+        author: 'aria label author'
+      },
+      title: 'Social others others',
+      author: 'Author XXX',
+      image: 'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',
+      contentBadge: {
+        label: "5' learning",
+        category: 'chapter'
+      },
+      position: 5,
+      id: 'chap_3'
+    }, {
+      'aria-label': {
+        title: 'aria label title',
+        author: 'aria label author'
+      },
+      title: 'Something about empowerment',
+      author: 'Author XXX',
+      image: 'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',
+      contentBadge: {
+        label: 'course',
+        category: 'course'
+      },
+      position: 6,
+      id: 'disc_3'
+    }, {
+      'aria-label': {
+        title: 'aria label title',
+        author: 'aria label author'
+      },
+      title: 'Be a better human being',
+      author: 'Author XXX',
+      image: 'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',
+      contentBadge: {
+        label: "5' learning",
+        category: 'chapter'
+      },
+      position: 7,
+      id: 'chap_4'
+    }, {
+      'aria-label': {
+        title: 'aria label title',
+        author: 'aria label author'
+      },
+      title: 'Stronger faster better',
+      author: 'Author XXX',
+      image: 'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',
+      contentBadge: {
+        label: 'course',
+        category: 'course'
+      },
+      position: 8,
+      id: 'disc_4'
+    }, {
+      'aria-label': {
+        title: 'aria label title',
+        author: 'aria label author'
+      },
+      title: 'Relativity beyond time',
+      author: 'Author XXX',
+      image: 'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',
+      contentBadge: {
+        label: 'course',
+        category: 'course'
+      },
+      position: 9,
+      id: 'disc_5'
+    }, {
+      'aria-label': {
+        title: 'aria label title',
+        author: 'aria label author'
+      },
+      title: 'Are you awake?',
+      author: 'Author XXX',
+      image: 'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',
+      contentBadge: {
+        label: "5' learning",
+        category: 'chapter'
+      },
+      position: 10,
+      id: 'chap_5'
+    }],
+    isLoading: false,
+    onDrop: () => console.log('on drop'),
+    title: 'Organize courses'
+  }
+};
+exports.default = _default;
+//# sourceMappingURL=default.js.map

package/lib/molecule/course-sections/test/fixtures/default.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/course-sections/test/fixtures/default.js"],"names":["props","sections","title","author","image","contentBadge","label","category","position","id","isLoading","onDrop","console","log"],"mappings":"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","sourcesContent":["export default {\n  props: {\n    sections: [\n      {\n        'aria-label': {\n          title: 'aria label title',\n          author: 'aria label author'\n        },\n        title:\n          'Marketing and online advertising Marketing and online advertising Marketing and online advertising Marketing and online advertising',\n        author: 'Author',\n        image:\n          'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',\n        contentBadge: {\n          label: 'course',\n          category: 'course'\n        },\n        position: 1,\n        id: 'disc_1'\n      },\n      {\n        'aria-label': {\n          title: 'aria label title',\n          author: 'aria label author'\n        },\n        title: 'Social networks',\n        author: 'Author',\n        image:\n          'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',\n        contentBadge: {\n          label: \"5' learning\",\n          category: 'chapter'\n        },\n        position: 2,\n        id: 'chap_1'\n      },\n      {\n        'aria-label': {\n          title: 'aria label title',\n          author: 'aria label author'\n        },\n        title: 'Other title',\n        author: 'Author 2',\n        image:\n          'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',\n        contentBadge: {\n          label: 'course',\n          category: 'course'\n        },\n        position: 3,\n        id: 'disc_2'\n      },\n      {\n        'aria-label': {\n          title: 'aria label title',\n          author: 'aria label author'\n        },\n        title: 'Social others',\n        author: 'Author XXX',\n        image:\n          'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',\n        contentBadge: {\n          label: \"5' learning\",\n          category: 'chapter'\n        },\n        position: 4,\n        id: 'chap_2'\n      },\n      {\n        'aria-label': {\n          title: 'aria label title',\n          author: 'aria label author'\n        },\n        title: 'Social others others',\n        author: 'Author XXX',\n        image:\n          'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',\n        contentBadge: {\n          label: \"5' learning\",\n          category: 'chapter'\n        },\n        position: 5,\n        id: 'chap_3'\n      },\n      {\n        'aria-label': {\n          title: 'aria label title',\n          author: 'aria label author'\n        },\n        title: 'Something about empowerment',\n        author: 'Author XXX',\n        image:\n          'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',\n        contentBadge: {\n          label: 'course',\n          category: 'course'\n        },\n        position: 6,\n        id: 'disc_3'\n      },\n      {\n        'aria-label': {\n          title: 'aria label title',\n          author: 'aria label author'\n        },\n        title: 'Be a better human being',\n        author: 'Author XXX',\n        image:\n          'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',\n        contentBadge: {\n          label: \"5' learning\",\n          category: 'chapter'\n        },\n        position: 7,\n        id: 'chap_4'\n      },\n      {\n        'aria-label': {\n          title: 'aria label title',\n          author: 'aria label author'\n        },\n        title: 'Stronger faster better',\n        author: 'Author XXX',\n        image:\n          'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',\n        contentBadge: {\n          label: 'course',\n          category: 'course'\n        },\n        position: 8,\n        id: 'disc_4'\n      },\n      {\n        'aria-label': {\n          title: 'aria label title',\n          author: 'aria label author'\n        },\n        title: 'Relativity beyond time',\n        author: 'Author XXX',\n        image:\n          'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',\n        contentBadge: {\n          label: 'course',\n          category: 'course'\n        },\n        position: 9,\n        id: 'disc_5'\n      },\n      {\n        'aria-label': {\n          title: 'aria label title',\n          author: 'aria label author'\n        },\n        title: 'Are you awake?',\n        author: 'Author XXX',\n        image:\n          'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',\n        contentBadge: {\n          label: \"5' learning\",\n          category: 'chapter'\n        },\n        position: 10,\n        id: 'chap_5'\n      }\n    ],\n    isLoading: false,\n    onDrop: () => console.log('on drop'),\n    title: 'Organize courses'\n  }\n};\n"],"file":"default.js"}

package/lib/molecule/course-sections/test/fixtures/loading.js

@@ -0,0 +1,14 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  props: {
+    sections: [],
+    isLoading: true,
+    onDrop: () => console.log('on drop'),
+    title: ''
+  }
+};
+exports.default = _default;
+//# sourceMappingURL=loading.js.map

package/lib/molecule/course-sections/test/fixtures/loading.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/course-sections/test/fixtures/loading.js"],"names":["props","sections","isLoading","onDrop","console","log","title"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,QAAQ,EAAE,EADL;AAELC,IAAAA,SAAS,EAAE,IAFN;AAGLC,IAAAA,MAAM,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,SAAZ,CAHT;AAILC,IAAAA,KAAK,EAAE;AAJF;AADM,C","sourcesContent":["export default {\n  props: {\n    sections: [],\n    isLoading: true,\n    onDrop: () => console.log('on drop'),\n    title: ''\n  }\n};\n"],"file":"loading.js"}

package/lib/molecule/draggable/index.js

@@ -48,7 +48,7 @@ const Draggable = props => {
     onDrop(id);
   }, [id, onDrop]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(dragging ? _style.default.dragging : null, _style.default.section, _style.default.draggable),
+    className: (0, _classnames.default)(dragging ? _style.default.dragging : null, _style.default.draggable),
     onDragStart: dragStartHandler,
     onDragOver: dragOverHandler,
     onDragLeave: dragLeaveHandler,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/molecule/draggable/index.js"],"names":["preventDefault","e","stopPropagation","Draggable","props","id","dragging","onDragStart","onDragOver","onDragLeave","onDrop","children","dragStartHandler","dragOverHandler","dragLeaveHandler","dropHandler","style","section","draggable","propTypes","PropTypes","string","bool","func","element"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,cAAc,GAAGC,CAAC,IAAIA,CAAC,CAACD,cAAF,EAA5B;;AACA,MAAME,eAAe,GAAGD,CAAC,IAAIA,CAAC,CAACC,eAAF,EAA7B;;AAEA,MAAMC,SAAS,GAAGC,KAAK,IAAI;AACzB,QAAM;AAACC,IAAAA,EAAD;AAAKC,IAAAA,QAAQ,GAAG,KAAhB;AAAuBC,IAAAA,WAAvB;AAAoCC,IAAAA,UAApC;AAAgDC,IAAAA,WAAhD;AAA6DC,IAAAA,MAA7D;AAAqEC,IAAAA;AAArE,MAAiFP,KAAvF;AAEA,QAAMQ,gBAAgB,GAAG,wBACvBX,CAAC,IAAI;AACHC,IAAAA,eAAe,CAACD,CAAD,CAAf;AACAM,IAAAA,WAAW,CAACF,EAAD,CAAX;AACD,GAJsB,EAKvB,CAACA,EAAD,EAAKE,WAAL,CALuB,CAAzB;AAOA,QAAMM,eAAe,GAAG,wBACtBZ,CAAC,IAAI;AACHD,IAAAA,cAAc,CAACC,CAAD,CAAd;AACAO,IAAAA,UAAU,CAACH,EAAD,CAAV;AACD,GAJqB,EAKtB,CAACA,EAAD,EAAKG,UAAL,CALsB,CAAxB;AAOA,QAAMM,gBAAgB,GAAG,wBACvBb,CAAC,IAAI;AACHD,IAAAA,cAAc,CAACC,CAAD,CAAd;AACAQ,IAAAA,WAAW,CAACJ,EAAD,CAAX;AACD,GAJsB,EAKvB,CAACA,EAAD,EAAKI,WAAL,CALuB,CAAzB;AAOA,QAAMM,WAAW,GAAG,wBAClBd,CAAC,IAAI;AACHD,IAAAA,cAAc,CAACC,CAAD,CAAd;AACAS,IAAAA,MAAM,CAACL,EAAD,CAAN;AACD,GAJiB,EAKlB,CAACA,EAAD,EAAKK,MAAL,CALkB,CAApB;AAQA,sBACE;AACE,IAAA,SAAS,EAAE,yBAAWJ,QAAQ,GAAGU,eAAMV,QAAT,GAAoB,IAAvC,EAA6CU,eAAMC,OAAnD,EAA4DD,eAAME,SAAlE,CADb;AAEE,IAAA,WAAW,EAAEN,gBAFf;AAGE,IAAA,UAAU,EAAEC,eAHd;AAIE,IAAA,WAAW,EAAEC,gBAJf;AAKE,IAAA,MAAM,EAAEC,WALV;AAME,IAAA,SAAS;AANX,KAQGJ,QARH,CADF;AAYD,CA5CD;;AA6CAR,SAAS,CAACgB,SAAV,2CAAsB;AACpBd,EAAAA,EAAE,EAAEe,mBAAUC,MADM;AAEpBf,EAAAA,QAAQ,EAAEc,mBAAUE,IAFA;AAGpBf,EAAAA,WAAW,EAAEa,mBAAUG,IAHH;AAIpBf,EAAAA,UAAU,EAAEY,mBAAUG,IAJF;AAKpBd,EAAAA,WAAW,EAAEW,mBAAUG,IALH;AAMpBb,EAAAA,MAAM,EAAEU,mBAAUG,IANE;AAOpBZ,EAAAA,QAAQ,EAAES,mBAAUI;AAPA,CAAtB;eAUerB,S","sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport style from './style.css';\n\nconst preventDefault = e => e.preventDefault();\nconst stopPropagation = e => e.stopPropagation();\n\nconst Draggable = props => {\n  const {id, dragging = false, onDragStart, onDragOver, onDragLeave, onDrop, children} = props;\n\n  const dragStartHandler = useCallback(\n    e => {\n      stopPropagation(e);\n      onDragStart(id);\n    },\n    [id, onDragStart]\n  );\n  const dragOverHandler = useCallback(\n    e => {\n      preventDefault(e);\n      onDragOver(id);\n    },\n    [id, onDragOver]\n  );\n  const dragLeaveHandler = useCallback(\n    e => {\n      preventDefault(e);\n      onDragLeave(id);\n    },\n    [id, onDragLeave]\n  );\n  const dropHandler = useCallback(\n    e => {\n      preventDefault(e);\n      onDrop(id);\n    },\n    [id, onDrop]\n  );\n\n  return (\n    <div\n      className={classnames(dragging ? style.dragging : null, style.section, style.draggable)}\n      onDragStart={dragStartHandler}\n      onDragOver={dragOverHandler}\n      onDragLeave={dragLeaveHandler}\n      onDrop={dropHandler}\n      draggable\n    >\n      {children}\n    </div>\n  );\n};\nDraggable.propTypes = {\n  id: PropTypes.string,\n  dragging: PropTypes.bool,\n  onDragStart: PropTypes.func,\n  onDragOver: PropTypes.func,\n  onDragLeave: PropTypes.func,\n  onDrop: PropTypes.func,\n  children: PropTypes.element\n};\n\nexport default Draggable;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/molecule/draggable/index.js"],"names":["preventDefault","e","stopPropagation","Draggable","props","id","dragging","onDragStart","onDragOver","onDragLeave","onDrop","children","dragStartHandler","dragOverHandler","dragLeaveHandler","dropHandler","style","draggable","propTypes","PropTypes","string","bool","func","element"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,cAAc,GAAGC,CAAC,IAAIA,CAAC,CAACD,cAAF,EAA5B;;AACA,MAAME,eAAe,GAAGD,CAAC,IAAIA,CAAC,CAACC,eAAF,EAA7B;;AAEA,MAAMC,SAAS,GAAGC,KAAK,IAAI;AACzB,QAAM;AAACC,IAAAA,EAAD;AAAKC,IAAAA,QAAQ,GAAG,KAAhB;AAAuBC,IAAAA,WAAvB;AAAoCC,IAAAA,UAApC;AAAgDC,IAAAA,WAAhD;AAA6DC,IAAAA,MAA7D;AAAqEC,IAAAA;AAArE,MAAiFP,KAAvF;AAEA,QAAMQ,gBAAgB,GAAG,wBACvBX,CAAC,IAAI;AACHC,IAAAA,eAAe,CAACD,CAAD,CAAf;AACAM,IAAAA,WAAW,CAACF,EAAD,CAAX;AACD,GAJsB,EAKvB,CAACA,EAAD,EAAKE,WAAL,CALuB,CAAzB;AAOA,QAAMM,eAAe,GAAG,wBACtBZ,CAAC,IAAI;AACHD,IAAAA,cAAc,CAACC,CAAD,CAAd;AACAO,IAAAA,UAAU,CAACH,EAAD,CAAV;AACD,GAJqB,EAKtB,CAACA,EAAD,EAAKG,UAAL,CALsB,CAAxB;AAOA,QAAMM,gBAAgB,GAAG,wBACvBb,CAAC,IAAI;AACHD,IAAAA,cAAc,CAACC,CAAD,CAAd;AACAQ,IAAAA,WAAW,CAACJ,EAAD,CAAX;AACD,GAJsB,EAKvB,CAACA,EAAD,EAAKI,WAAL,CALuB,CAAzB;AAOA,QAAMM,WAAW,GAAG,wBAClBd,CAAC,IAAI;AACHD,IAAAA,cAAc,CAACC,CAAD,CAAd;AACAS,IAAAA,MAAM,CAACL,EAAD,CAAN;AACD,GAJiB,EAKlB,CAACA,EAAD,EAAKK,MAAL,CALkB,CAApB;AAQA,sBACE;AACE,IAAA,SAAS,EAAE,yBAAWJ,QAAQ,GAAGU,eAAMV,QAAT,GAAoB,IAAvC,EAA6CU,eAAMC,SAAnD,CADb;AAEE,IAAA,WAAW,EAAEL,gBAFf;AAGE,IAAA,UAAU,EAAEC,eAHd;AAIE,IAAA,WAAW,EAAEC,gBAJf;AAKE,IAAA,MAAM,EAAEC,WALV;AAME,IAAA,SAAS;AANX,KAQGJ,QARH,CADF;AAYD,CA5CD;;AA6CAR,SAAS,CAACe,SAAV,2CAAsB;AACpBb,EAAAA,EAAE,EAAEc,mBAAUC,MADM;AAEpBd,EAAAA,QAAQ,EAAEa,mBAAUE,IAFA;AAGpBd,EAAAA,WAAW,EAAEY,mBAAUG,IAHH;AAIpBd,EAAAA,UAAU,EAAEW,mBAAUG,IAJF;AAKpBb,EAAAA,WAAW,EAAEU,mBAAUG,IALH;AAMpBZ,EAAAA,MAAM,EAAES,mBAAUG,IANE;AAOpBX,EAAAA,QAAQ,EAAEQ,mBAAUI;AAPA,CAAtB;eAUepB,S","sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport style from './style.css';\n\nconst preventDefault = e => e.preventDefault();\nconst stopPropagation = e => e.stopPropagation();\n\nconst Draggable = props => {\n  const {id, dragging = false, onDragStart, onDragOver, onDragLeave, onDrop, children} = props;\n\n  const dragStartHandler = useCallback(\n    e => {\n      stopPropagation(e);\n      onDragStart(id);\n    },\n    [id, onDragStart]\n  );\n  const dragOverHandler = useCallback(\n    e => {\n      preventDefault(e);\n      onDragOver(id);\n    },\n    [id, onDragOver]\n  );\n  const dragLeaveHandler = useCallback(\n    e => {\n      preventDefault(e);\n      onDragLeave(id);\n    },\n    [id, onDragLeave]\n  );\n  const dropHandler = useCallback(\n    e => {\n      preventDefault(e);\n      onDrop(id);\n    },\n    [id, onDrop]\n  );\n\n  return (\n    <div\n      className={classnames(dragging ? style.dragging : null, style.draggable)}\n      onDragStart={dragStartHandler}\n      onDragOver={dragOverHandler}\n      onDragLeave={dragLeaveHandler}\n      onDrop={dropHandler}\n      draggable\n    >\n      {children}\n    </div>\n  );\n};\nDraggable.propTypes = {\n  id: PropTypes.string,\n  dragging: PropTypes.bool,\n  onDragStart: PropTypes.func,\n  onDragOver: PropTypes.func,\n  onDragLeave: PropTypes.func,\n  onDrop: PropTypes.func,\n  children: PropTypes.element\n};\n\nexport default Draggable;\n"],"file":"index.js"}

package/lib/molecule/draggable/style.css

@@ -4,24 +4,9 @@
 @value medium from colors;
 @value xtraLightGrey from colors;
 @value dark from colors;
-@value cm_grey_100 from colors
+@value cm_grey_100 from colors;
 
 
-.section {
-  border-top: 1px;
-  border-left: 1px;
-  border-right: 1px;
-  border-style: solid;
-  border-color: medium;
-  border-bottom: 0;
-  display: flex;
-  justify-content: center;
-}
-
-.section:last-child {
-  border-bottom: 1px solid medium;
-}
-
 .draggable {
   cursor: grab;
   position: relative;
@@ -68,6 +53,7 @@
   font-family: 'Open Sans';
   font-weight: 600;
   font-size: 14px;
+  border-radius: 7px;
 }
 
 @media mobile {