@coorpacademy/components 10.3.21-alpha.3 → 10.3.24-alpha.0

package/es/molecule/select-multiple/style.css

@@ -67,7 +67,7 @@
   display: block;
   visibility: hidden;
   width: 100%;
-  padding: 0 15px;
+  padding: 0;
   box-sizing: border-box;
   background: white;
   position: absolute;
@@ -91,8 +91,7 @@
 
 .choice {
   list-style: none;
-  margin: 15px 0;
-  padding: 0;
+  padding: 12px 15px;
 }
 
 .choice .item {
@@ -104,6 +103,10 @@
   width: 100%;
   display: block;
 }
+ 
+.coorpmanager .choice:hover {
+  background-color: cm_grey_150;
+}
 
 .arrow {
   position: absolute;

package/es/molecule/wizard-summary/style.css

@@ -233,7 +233,7 @@ ul {
   }
 
   .checkbox:checked + .summary  {
-    height: 65%;
+    height: 70%;
     max-height: 1000px;
     padding: 12px 24px 12px 24px;
     box-shadow: 0 -6px 42px -14px rgba(0, 0, 0, 0.25);
@@ -243,6 +243,6 @@ ul {
     transform: rotateZ(180deg);
   }
   .summarySections {
-    max-height: 250px;
+    max-height: 500px;
   }
 }

package/es/organism/course-selection/index.js

@@ -10,8 +10,8 @@ import SelectMultiple from '../../molecule/select-multiple';
 import Card from '../../molecule/card';
 import style from './style.css';
 
-const buildResultView = (courses, coursesSelectionAriaLabel, emptyMessages) => {
-  if (_isEmpty(courses)) {
+const buildResultView = (courses, coursesSelectionAriaLabel, emptyMessages, isLoading) => {
+  if (!isLoading && _isEmpty(courses)) {
     return /*#__PURE__*/React.createElement(EmptySearchResult, emptyMessages);
   }
 
@@ -33,9 +33,10 @@ const CourseSelection = props => {
     contentTypeFilter,
     courses,
     emptyMessages,
+    isLoading = false,
     'courses-selection-aria-label': coursesSelectionAriaLabel
   } = props;
-  const resultView = buildResultView(courses, coursesSelectionAriaLabel, emptyMessages);
+  const resultView = buildResultView(courses, coursesSelectionAriaLabel, emptyMessages, isLoading);
   return /*#__PURE__*/React.createElement("div", {
     className: style.container
   }, /*#__PURE__*/React.createElement("div", {
@@ -53,6 +54,7 @@ const CourseSelection = props => {
 
 CourseSelection.propTypes = process.env.NODE_ENV !== "production" ? {
   search: PropTypes.shape(Search.PropTypes),
+  isLoading: PropTypes.bool,
   contentTypeFilter: PropTypes.shape(SelectMultiple.PropTypes),
   courses: PropTypes.arrayOf(PropTypes.shape(Card.propTypes)),
   'courses-selection-aria-label': PropTypes.string,

package/es/organism/course-selection/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/organism/course-selection/index.js"],"names":["React","PropTypes","EmptySearchResult","Search","SelectMultiple","Card","style","buildResultView","courses","coursesSelectionAriaLabel","emptyMessages","items","map","card","index","cards","CourseSelection","props","search","contentTypeFilter","resultView","container","filters","contentFilter","cardsContainer","propTypes","shape","arrayOf","string","firstMessage","secondMessage"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,iBAAP,MAA8B,gCAA9B;AACA,OAAOC,MAAP,MAAmB,yBAAnB;AACA,OAAOC,cAAP,MAA2B,gCAA3B;AACA,OAAOC,IAAP,MAAiB,qBAAjB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,eAAe,GAAG,CAACC,OAAD,EAAUC,yBAAV,EAAqCC,aAArC,KAAuD;AAC7E,MAAI,SAAQF,OAAR,CAAJ,EAAsB;AACpB,wBAAO,oBAAC,iBAAD,EAAuBE,aAAvB,CAAP;AACD;;AAED,QAAMC,KAAK,GAAGH,OAAO,CAACI,GAAR,CAAY,CAACC,IAAD,EAAOC,KAAP,KAAiB;AACzC,wBACE;AAAI,MAAA,SAAS,EAAER,KAAK,CAACS,KAArB;AAA4B,MAAA,GAAG,EAAG,QAAOD,KAAM,EAA/C;AAAkD,mBAAY,UAASA,KAAM;AAA7E,oBACE,oBAAC,IAAD,EAAUD,IAAV,CADF,CADF;AAKD,GANa,CAAd;AAQA,sBAAO;AAAI,kBAAYJ;AAAhB,KAA4CE,KAA5C,CAAP;AACD,CAdD;;AAgBA,MAAMK,eAAe,GAAGC,KAAK,IAAI;AAC/B,QAAM;AACJC,IAAAA,MADI;AAEJC,IAAAA,iBAFI;AAGJX,IAAAA,OAHI;AAIJE,IAAAA,aAJI;AAKJ,oCAAgCD;AAL5B,MAMFQ,KANJ;AAQA,QAAMG,UAAU,GAAGb,eAAe,CAACC,OAAD,EAAUC,yBAAV,EAAqCC,aAArC,CAAlC;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEJ,KAAK,CAACe;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEf,KAAK,CAACgB;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEhB,KAAK,CAACY;AAAtB,kBACE,oBAAC,MAAD,eAAYA,MAAZ;AAAoB,IAAA,KAAK,EAAC;AAA1B,KADF,CADF,eAIE;AAAK,IAAA,SAAS,EAAEZ,KAAK,CAACiB;AAAtB,kBACE,oBAAC,cAAD,EAAoBJ,iBAApB,CADF,CAJF,CADF,eASE;AAAK,IAAA,SAAS,EAAEb,KAAK,CAACkB;AAAtB,KAAuCJ,UAAvC,CATF,CADF;AAaD,CAxBD;;AA0BAJ,eAAe,CAACS,SAAhB,2CAA4B;AAC1BP,EAAAA,MAAM,EAAEjB,SAAS,CAACyB,KAAV,CAAgBvB,MAAM,CAACF,SAAvB,CADkB;AAE1BkB,EAAAA,iBAAiB,EAAElB,SAAS,CAACyB,KAAV,CAAgBtB,cAAc,CAACH,SAA/B,CAFO;AAG1BO,EAAAA,OAAO,EAAEP,SAAS,CAAC0B,OAAV,CAAkB1B,SAAS,CAACyB,KAAV,CAAgBrB,IAAI,CAACoB,SAArB,CAAlB,CAHiB;AAI1B,kCAAgCxB,SAAS,CAAC2B,MAJhB;AAK1BlB,EAAAA,aAAa,EAAET,SAAS,CAACyB,KAAV,CAAgB;AAC7BG,IAAAA,YAAY,EAAE5B,SAAS,CAAC2B,MADK;AAE7BE,IAAAA,aAAa,EAAE7B,SAAS,CAAC2B;AAFI,GAAhB;AALW,CAA5B;AAWA,eAAeZ,eAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty} from 'lodash/fp';\nimport EmptySearchResult from '../../atom/empty-search-result';\nimport Search from '../../atom/input-search';\nimport SelectMultiple from '../../molecule/select-multiple';\nimport Card from '../../molecule/card';\nimport style from './style.css';\n\nconst buildResultView = (courses, coursesSelectionAriaLabel, emptyMessages) => {\n  if (isEmpty(courses)) {\n    return <EmptySearchResult {...emptyMessages} />;\n  }\n\n  const items = courses.map((card, index) => {\n    return (\n      <li className={style.cards} key={`card-${index}`} data-name={`course-${index}`}>\n        <Card {...card} />\n      </li>\n    );\n  });\n\n  return <ul aria-label={coursesSelectionAriaLabel}>{items}</ul>;\n};\n\nconst CourseSelection = props => {\n  const {\n    search,\n    contentTypeFilter,\n    courses,\n    emptyMessages,\n    'courses-selection-aria-label': coursesSelectionAriaLabel\n  } = props;\n\n  const resultView = buildResultView(courses, coursesSelectionAriaLabel, emptyMessages);\n\n  return (\n    <div className={style.container}>\n      <div className={style.filters}>\n        <div className={style.search}>\n          <Search {...search} theme=\"coorpmanager\" />\n        </div>\n        <div className={style.contentFilter}>\n          <SelectMultiple {...contentTypeFilter} />\n        </div>\n      </div>\n      <div className={style.cardsContainer}>{resultView}</div>\n    </div>\n  );\n};\n\nCourseSelection.propTypes = {\n  search: PropTypes.shape(Search.PropTypes),\n  contentTypeFilter: PropTypes.shape(SelectMultiple.PropTypes),\n  courses: PropTypes.arrayOf(PropTypes.shape(Card.propTypes)),\n  'courses-selection-aria-label': PropTypes.string,\n  emptyMessages: PropTypes.shape({\n    firstMessage: PropTypes.string,\n    secondMessage: PropTypes.string\n  })\n};\n\nexport default CourseSelection;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/organism/course-selection/index.js"],"names":["React","PropTypes","EmptySearchResult","Search","SelectMultiple","Card","style","buildResultView","courses","coursesSelectionAriaLabel","emptyMessages","isLoading","items","map","card","index","cards","CourseSelection","props","search","contentTypeFilter","resultView","container","filters","contentFilter","cardsContainer","propTypes","shape","bool","arrayOf","string","firstMessage","secondMessage"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,iBAAP,MAA8B,gCAA9B;AACA,OAAOC,MAAP,MAAmB,yBAAnB;AACA,OAAOC,cAAP,MAA2B,gCAA3B;AACA,OAAOC,IAAP,MAAiB,qBAAjB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,eAAe,GAAG,CAACC,OAAD,EAAUC,yBAAV,EAAqCC,aAArC,EAAoDC,SAApD,KAAkE;AACxF,MAAI,CAACA,SAAD,IAAc,SAAQH,OAAR,CAAlB,EAAoC;AAClC,wBAAO,oBAAC,iBAAD,EAAuBE,aAAvB,CAAP;AACD;;AAED,QAAME,KAAK,GAAGJ,OAAO,CAACK,GAAR,CAAY,CAACC,IAAD,EAAOC,KAAP,KAAiB;AACzC,wBACE;AAAI,MAAA,SAAS,EAAET,KAAK,CAACU,KAArB;AAA4B,MAAA,GAAG,EAAG,QAAOD,KAAM,EAA/C;AAAkD,mBAAY,UAASA,KAAM;AAA7E,oBACE,oBAAC,IAAD,EAAUD,IAAV,CADF,CADF;AAKD,GANa,CAAd;AAQA,sBAAO;AAAI,kBAAYL;AAAhB,KAA4CG,KAA5C,CAAP;AACD,CAdD;;AAgBA,MAAMK,eAAe,GAAGC,KAAK,IAAI;AAC/B,QAAM;AACJC,IAAAA,MADI;AAEJC,IAAAA,iBAFI;AAGJZ,IAAAA,OAHI;AAIJE,IAAAA,aAJI;AAKJC,IAAAA,SAAS,GAAG,KALR;AAMJ,oCAAgCF;AAN5B,MAOFS,KAPJ;AASA,QAAMG,UAAU,GAAGd,eAAe,CAACC,OAAD,EAAUC,yBAAV,EAAqCC,aAArC,EAAoDC,SAApD,CAAlC;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEL,KAAK,CAACgB;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEhB,KAAK,CAACiB;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEjB,KAAK,CAACa;AAAtB,kBACE,oBAAC,MAAD,eAAYA,MAAZ;AAAoB,IAAA,KAAK,EAAC;AAA1B,KADF,CADF,eAIE;AAAK,IAAA,SAAS,EAAEb,KAAK,CAACkB;AAAtB,kBACE,oBAAC,cAAD,EAAoBJ,iBAApB,CADF,CAJF,CADF,eASE;AAAK,IAAA,SAAS,EAAEd,KAAK,CAACmB;AAAtB,KAAuCJ,UAAvC,CATF,CADF;AAaD,CAzBD;;AA2BAJ,eAAe,CAACS,SAAhB,2CAA4B;AAC1BP,EAAAA,MAAM,EAAElB,SAAS,CAAC0B,KAAV,CAAgBxB,MAAM,CAACF,SAAvB,CADkB;AAE1BU,EAAAA,SAAS,EAAEV,SAAS,CAAC2B,IAFK;AAG1BR,EAAAA,iBAAiB,EAAEnB,SAAS,CAAC0B,KAAV,CAAgBvB,cAAc,CAACH,SAA/B,CAHO;AAI1BO,EAAAA,OAAO,EAAEP,SAAS,CAAC4B,OAAV,CAAkB5B,SAAS,CAAC0B,KAAV,CAAgBtB,IAAI,CAACqB,SAArB,CAAlB,CAJiB;AAK1B,kCAAgCzB,SAAS,CAAC6B,MALhB;AAM1BpB,EAAAA,aAAa,EAAET,SAAS,CAAC0B,KAAV,CAAgB;AAC7BI,IAAAA,YAAY,EAAE9B,SAAS,CAAC6B,MADK;AAE7BE,IAAAA,aAAa,EAAE/B,SAAS,CAAC6B;AAFI,GAAhB;AANW,CAA5B;AAYA,eAAeb,eAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty} from 'lodash/fp';\nimport EmptySearchResult from '../../atom/empty-search-result';\nimport Search from '../../atom/input-search';\nimport SelectMultiple from '../../molecule/select-multiple';\nimport Card from '../../molecule/card';\nimport style from './style.css';\n\nconst buildResultView = (courses, coursesSelectionAriaLabel, emptyMessages, isLoading) => {\n  if (!isLoading && isEmpty(courses)) {\n    return <EmptySearchResult {...emptyMessages} />;\n  }\n\n  const items = courses.map((card, index) => {\n    return (\n      <li className={style.cards} key={`card-${index}`} data-name={`course-${index}`}>\n        <Card {...card} />\n      </li>\n    );\n  });\n\n  return <ul aria-label={coursesSelectionAriaLabel}>{items}</ul>;\n};\n\nconst CourseSelection = props => {\n  const {\n    search,\n    contentTypeFilter,\n    courses,\n    emptyMessages,\n    isLoading = false,\n    'courses-selection-aria-label': coursesSelectionAriaLabel\n  } = props;\n\n  const resultView = buildResultView(courses, coursesSelectionAriaLabel, emptyMessages, isLoading);\n\n  return (\n    <div className={style.container}>\n      <div className={style.filters}>\n        <div className={style.search}>\n          <Search {...search} theme=\"coorpmanager\" />\n        </div>\n        <div className={style.contentFilter}>\n          <SelectMultiple {...contentTypeFilter} />\n        </div>\n      </div>\n      <div className={style.cardsContainer}>{resultView}</div>\n    </div>\n  );\n};\n\nCourseSelection.propTypes = {\n  search: PropTypes.shape(Search.PropTypes),\n  isLoading: PropTypes.bool,\n  contentTypeFilter: PropTypes.shape(SelectMultiple.PropTypes),\n  courses: PropTypes.arrayOf(PropTypes.shape(Card.propTypes)),\n  'courses-selection-aria-label': PropTypes.string,\n  emptyMessages: PropTypes.shape({\n    firstMessage: PropTypes.string,\n    secondMessage: PropTypes.string\n  })\n};\n\nexport default CourseSelection;\n"],"file":"index.js"}

package/es/organism/course-selection/test/fixtures/default.js

@@ -14,6 +14,7 @@ export default {
       description: 'Type to filter the courses',
       onChange: value => console.log(value)
     },
+    isLoading: false,
     contentTypeFilter: {
       type: 'selectMultiple',
       title: 'Content type',

package/es/organism/course-selection/test/fixtures/default.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/organism/course-selection/test/fixtures/default.js"],"names":["UnSelectedCard","SelectedCard","Article","Scorm","ExternalContent","props","search","title","placeholder","value","description","onChange","console","log","contentTypeFilter","type","theme","size","options","name","selected","multiple","courses","isSelected"],"mappings":";;AAAA,OAAOA,cAAP,MAA2B,0DAA3B;AACA,OAAOC,YAAP,MAAyB,yDAAzB;AACA,OAAOC,OAAP,MAAoB,iDAApB;AACA,OAAOC,KAAP,MAAkB,+CAAlB;AACA,OAAOC,eAAP,MAA4B,0DAA5B;AAEA,eAAe;AACbC,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAE;AACNC,MAAAA,KAAK,EAAE,WADD;AAENC,MAAAA,WAAW,EAAE,WAFP;AAGNC,MAAAA,KAAK,EAAE,EAHD;AAINC,MAAAA,WAAW,EAAE,4BAJP;AAKNC,MAAAA,QAAQ,EAAEF,KAAK,IAAIG,OAAO,CAACC,GAAR,CAAYJ,KAAZ;AALb,KADH;AAQLK,IAAAA,iBAAiB,EAAE;AACjBC,MAAAA,IAAI,EAAE,gBADW;AAEjBR,MAAAA,KAAK,EAAE,cAFU;AAGjBC,MAAAA,WAAW,EAAE,cAHI;AAIjBE,MAAAA,WAAW,EAAE,0BAJI;AAKjBM,MAAAA,KAAK,EAAE,cALU;AAMjBC,MAAAA,IAAI,EAAE,SANW;AAOjBC,MAAAA,OAAO,EAAE,CACP;AACEC,QAAAA,IAAI,EAAE,QADR;AAEEV,QAAAA,KAAK,EAAE,QAFT;AAGEW,QAAAA,QAAQ,EAAE;AAHZ,OADO,EAMP;AACED,QAAAA,IAAI,EAAE,aADR;AAEEV,QAAAA,KAAK,EAAE,SAFT;AAGEW,QAAAA,QAAQ,EAAE;AAHZ,OANO,EAWP;AACED,QAAAA,IAAI,EAAE,oBADR;AAEEV,QAAAA,KAAK,EAAE,OAFT;AAGEW,QAAAA,QAAQ,EAAE;AAHZ,OAXO,EAgBP;AACED,QAAAA,IAAI,EAAE,OADR;AAEEV,QAAAA,KAAK,EAAE,OAFT;AAGEW,QAAAA,QAAQ,EAAE;AAHZ,OAhBO,CAPQ;AA6BjBC,MAAAA,QAAQ,EAAE;AA7BO,KARd;AAuCL,oCAAgC,iBAvC3B;AAwCLC,IAAAA,OAAO,EAAE,CACPrB,YAAY,CAACI,KADN,EAEPL,cAAc,CAACK,KAFR,wBAGHH,OAAO,CAACG,KAHL;AAGYkB,MAAAA,UAAU,EAAE;AAHxB,QAIPtB,YAAY,CAACI,KAJN,wBAKHF,KAAK,CAACE,KALH;AAKUkB,MAAAA,UAAU,EAAE;AALtB,8BAMHvB,cAAc,CAACK,KANZ;AAMmBkB,MAAAA,UAAU,EAAE,KAN/B;AAMsChB,MAAAA,KAAK,EAAE;AAN7C,8BAOHH,eAAe,CAACC,KAPb;AAOoBkB,MAAAA,UAAU,EAAE,KAPhC;AAOuChB,MAAAA,KAAK,EAAE;AAP9C,8BAQHJ,KAAK,CAACE,KARH;AAQUkB,MAAAA,UAAU,EAAE,KARtB;AAQ6BhB,MAAAA,KAAK,EAAE;AARpC;AAxCJ;AADM,CAAf","sourcesContent":["import UnSelectedCard from '../../../../molecule/card/test/fixtures/selectable-false';\nimport SelectedCard from '../../../../molecule/card/test/fixtures/selectable-true';\nimport Article from '../../../../molecule/card/test/fixtures/article';\nimport Scorm from '../../../../molecule/card/test/fixtures/scorm';\nimport ExternalContent from '../../../../molecule/card/test/fixtures/external-content';\n\nexport default {\n  props: {\n    search: {\n      title: 'Search...',\n      placeholder: 'Search...',\n      value: '',\n      description: 'Type to filter the courses',\n      onChange: value => console.log(value)\n    },\n    contentTypeFilter: {\n      type: 'selectMultiple',\n      title: 'Content type',\n      placeholder: 'Content type',\n      description: 'This filters the courses',\n      theme: 'coorpmanager',\n      size: 'default',\n      options: [\n        {\n          name: 'Course',\n          value: 'course',\n          selected: true\n        },\n        {\n          name: \"5' learning\",\n          value: 'chapter',\n          selected: false\n        },\n        {\n          name: 'Interactive slides',\n          value: 'scorm',\n          selected: false\n        },\n        {\n          name: 'Video',\n          value: 'video',\n          selected: false\n        }\n      ],\n      multiple: false\n    },\n    'courses-selection-aria-label': 'Courses results',\n    courses: [\n      SelectedCard.props,\n      UnSelectedCard.props,\n      {...Article.props, isSelected: false},\n      SelectedCard.props,\n      {...Scorm.props, isSelected: true},\n      {...UnSelectedCard.props, isSelected: false, title: 'Standard course'},\n      {...ExternalContent.props, isSelected: false, title: 'External course'},\n      {...Scorm.props, isSelected: false, title: 'Scorm course'}\n    ]\n  }\n};\n"],"file":"default.js"}
+{"version":3,"sources":["../../../../../src/organism/course-selection/test/fixtures/default.js"],"names":["UnSelectedCard","SelectedCard","Article","Scorm","ExternalContent","props","search","title","placeholder","value","description","onChange","console","log","isLoading","contentTypeFilter","type","theme","size","options","name","selected","multiple","courses","isSelected"],"mappings":";;AAAA,OAAOA,cAAP,MAA2B,0DAA3B;AACA,OAAOC,YAAP,MAAyB,yDAAzB;AACA,OAAOC,OAAP,MAAoB,iDAApB;AACA,OAAOC,KAAP,MAAkB,+CAAlB;AACA,OAAOC,eAAP,MAA4B,0DAA5B;AAEA,eAAe;AACbC,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAE;AACNC,MAAAA,KAAK,EAAE,WADD;AAENC,MAAAA,WAAW,EAAE,WAFP;AAGNC,MAAAA,KAAK,EAAE,EAHD;AAINC,MAAAA,WAAW,EAAE,4BAJP;AAKNC,MAAAA,QAAQ,EAAEF,KAAK,IAAIG,OAAO,CAACC,GAAR,CAAYJ,KAAZ;AALb,KADH;AAQLK,IAAAA,SAAS,EAAE,KARN;AASLC,IAAAA,iBAAiB,EAAE;AACjBC,MAAAA,IAAI,EAAE,gBADW;AAEjBT,MAAAA,KAAK,EAAE,cAFU;AAGjBC,MAAAA,WAAW,EAAE,cAHI;AAIjBE,MAAAA,WAAW,EAAE,0BAJI;AAKjBO,MAAAA,KAAK,EAAE,cALU;AAMjBC,MAAAA,IAAI,EAAE,SANW;AAOjBC,MAAAA,OAAO,EAAE,CACP;AACEC,QAAAA,IAAI,EAAE,QADR;AAEEX,QAAAA,KAAK,EAAE,QAFT;AAGEY,QAAAA,QAAQ,EAAE;AAHZ,OADO,EAMP;AACED,QAAAA,IAAI,EAAE,aADR;AAEEX,QAAAA,KAAK,EAAE,SAFT;AAGEY,QAAAA,QAAQ,EAAE;AAHZ,OANO,EAWP;AACED,QAAAA,IAAI,EAAE,oBADR;AAEEX,QAAAA,KAAK,EAAE,OAFT;AAGEY,QAAAA,QAAQ,EAAE;AAHZ,OAXO,EAgBP;AACED,QAAAA,IAAI,EAAE,OADR;AAEEX,QAAAA,KAAK,EAAE,OAFT;AAGEY,QAAAA,QAAQ,EAAE;AAHZ,OAhBO,CAPQ;AA6BjBC,MAAAA,QAAQ,EAAE;AA7BO,KATd;AAwCL,oCAAgC,iBAxC3B;AAyCLC,IAAAA,OAAO,EAAE,CACPtB,YAAY,CAACI,KADN,EAEPL,cAAc,CAACK,KAFR,wBAGHH,OAAO,CAACG,KAHL;AAGYmB,MAAAA,UAAU,EAAE;AAHxB,QAIPvB,YAAY,CAACI,KAJN,wBAKHF,KAAK,CAACE,KALH;AAKUmB,MAAAA,UAAU,EAAE;AALtB,8BAMHxB,cAAc,CAACK,KANZ;AAMmBmB,MAAAA,UAAU,EAAE,KAN/B;AAMsCjB,MAAAA,KAAK,EAAE;AAN7C,8BAOHH,eAAe,CAACC,KAPb;AAOoBmB,MAAAA,UAAU,EAAE,KAPhC;AAOuCjB,MAAAA,KAAK,EAAE;AAP9C,8BAQHJ,KAAK,CAACE,KARH;AAQUmB,MAAAA,UAAU,EAAE,KARtB;AAQ6BjB,MAAAA,KAAK,EAAE;AARpC;AAzCJ;AADM,CAAf","sourcesContent":["import UnSelectedCard from '../../../../molecule/card/test/fixtures/selectable-false';\nimport SelectedCard from '../../../../molecule/card/test/fixtures/selectable-true';\nimport Article from '../../../../molecule/card/test/fixtures/article';\nimport Scorm from '../../../../molecule/card/test/fixtures/scorm';\nimport ExternalContent from '../../../../molecule/card/test/fixtures/external-content';\n\nexport default {\n  props: {\n    search: {\n      title: 'Search...',\n      placeholder: 'Search...',\n      value: '',\n      description: 'Type to filter the courses',\n      onChange: value => console.log(value)\n    },\n    isLoading: false,\n    contentTypeFilter: {\n      type: 'selectMultiple',\n      title: 'Content type',\n      placeholder: 'Content type',\n      description: 'This filters the courses',\n      theme: 'coorpmanager',\n      size: 'default',\n      options: [\n        {\n          name: 'Course',\n          value: 'course',\n          selected: true\n        },\n        {\n          name: \"5' learning\",\n          value: 'chapter',\n          selected: false\n        },\n        {\n          name: 'Interactive slides',\n          value: 'scorm',\n          selected: false\n        },\n        {\n          name: 'Video',\n          value: 'video',\n          selected: false\n        }\n      ],\n      multiple: false\n    },\n    'courses-selection-aria-label': 'Courses results',\n    courses: [\n      SelectedCard.props,\n      UnSelectedCard.props,\n      {...Article.props, isSelected: false},\n      SelectedCard.props,\n      {...Scorm.props, isSelected: true},\n      {...UnSelectedCard.props, isSelected: false, title: 'Standard course'},\n      {...ExternalContent.props, isSelected: false, title: 'External course'},\n      {...Scorm.props, isSelected: false, title: 'Scorm course'}\n    ]\n  }\n};\n"],"file":"default.js"}

package/es/organism/search-and-chips-results/index.js

@@ -10,8 +10,8 @@ import ButtonLink from '../../atom/button-link';
 import Chips from '../../atom/chips';
 import style from './style.css';
 
-const buildResultView = (results, resultsAriaLabel, emptyMessages) => {
-  if (_isEmpty(results)) {
+const buildResultView = (results, resultsAriaLabel, emptyMessages, isLoading) => {
+  if (!isLoading && _isEmpty(results)) {
     return /*#__PURE__*/React.createElement(EmptySearchResult, emptyMessages);
   }
 
@@ -33,6 +33,7 @@ const SearchAndChipsResults = props => {
     selectAllButton,
     results,
     emptyMessages,
+    isLoading = false,
     'results-aria-label': resultsAriaLabel
   } = props;
   const {
@@ -41,7 +42,7 @@ const SearchAndChipsResults = props => {
     disabled = false,
     'aria-label': ariaLabel
   } = selectAllButton;
-  const resultView = buildResultView(results, resultsAriaLabel, emptyMessages);
+  const resultView = buildResultView(results, resultsAriaLabel, emptyMessages, isLoading);
   const buttonProps = {
     type: 'secondary',
     label,
@@ -76,6 +77,7 @@ SearchAndChipsResults.propTypes = process.env.NODE_ENV !== "production" ? {
     disabled: PropTypes.bool,
     'aria-label': PropTypes.string
   }),
+  isLoading: PropTypes.bool,
   search: PropTypes.shape(Search.PropTypes),
   results: PropTypes.arrayOf(PropTypes.shape(Chips.propTypes)),
   'results-aria-label': PropTypes.string,

package/es/organism/search-and-chips-results/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/organism/search-and-chips-results/index.js"],"names":["React","PropTypes","EmptySearchResult","Search","ButtonLink","Chips","style","buildResultView","results","resultsAriaLabel","emptyMessages","items","map","result","index","SearchAndChipsResults","props","search","selectAllButton","onClick","label","disabled","ariaLabel","resultView","buttonProps","type","icon","position","container","header","button","resultContainer","propTypes","shape","string","func","bool","arrayOf","firstMessage","secondMessage"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty} from 'lodash/fp';\nimport EmptySearchResult from '../../atom/empty-search-result';\nimport Search from '../../atom/input-search';\nimport ButtonLink from '../../atom/button-link';\nimport Chips from '../../atom/chips';\nimport style from './style.css';\n\nconst buildResultView = (results, resultsAriaLabel, emptyMessages) => {\n  if (isEmpty(results)) {\n    return <EmptySearchResult {...emptyMessages} />;\n  }\n\n  const items = results.map((result, index) => {\n    return (\n      <li className={style.result} key={`result-${index}`} data-name={`result-${index}`}>\n        <Chips {...result} />\n      </li>\n    );\n  });\n\n  return <ul aria-label={resultsAriaLabel}>{items}</ul>;\n};\n\nconst SearchAndChipsResults = props => {\n  const {\n    search,\n    selectAllButton,\n    results,\n    emptyMessages,\n    'results-aria-label': resultsAriaLabel\n  } = props;\n\n  const {onClick, label, disabled = false, 'aria-label': ariaLabel} = selectAllButton;\n  const resultView = buildResultView(results, resultsAriaLabel, emptyMessages);\n  const buttonProps = {\n    type: 'secondary',\n    label,\n    'aria-label': ariaLabel,\n    'data-name': `select-all-button`,\n    icon: {\n      position: 'right',\n      type: 'add'\n    },\n    onClick,\n    disabled\n  };\n\n  return (\n    <div className={style.container}>\n      <div className={style.header}>\n        <div className={style.button}>\n          <ButtonLink {...buttonProps} />\n        </div>\n        <div className={style.search}>\n          <Search {...search} theme=\"coorpmanager\" />\n        </div>\n      </div>\n      <div className={style.resultContainer}>{resultView}</div>\n    </div>\n  );\n};\n\nSearchAndChipsResults.propTypes = {\n  selectAllButton: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func,\n    disabled: PropTypes.bool,\n    'aria-label': PropTypes.string\n  }),\n  search: PropTypes.shape(Search.PropTypes),\n  results: PropTypes.arrayOf(PropTypes.shape(Chips.propTypes)),\n  'results-aria-label': PropTypes.string,\n  emptyMessages: PropTypes.shape({\n    firstMessage: PropTypes.string,\n    secondMessage: PropTypes.string\n  })\n};\n\nexport default SearchAndChipsResults;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/organism/search-and-chips-results/index.js"],"names":["React","PropTypes","EmptySearchResult","Search","ButtonLink","Chips","style","buildResultView","results","resultsAriaLabel","emptyMessages","isLoading","items","map","result","index","SearchAndChipsResults","props","search","selectAllButton","onClick","label","disabled","ariaLabel","resultView","buttonProps","type","icon","position","container","header","button","resultContainer","propTypes","shape","string","func","bool","arrayOf","firstMessage","secondMessage"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty} from 'lodash/fp';\nimport EmptySearchResult from '../../atom/empty-search-result';\nimport Search from '../../atom/input-search';\nimport ButtonLink from '../../atom/button-link';\nimport Chips from '../../atom/chips';\nimport style from './style.css';\n\nconst buildResultView = (results, resultsAriaLabel, emptyMessages, isLoading) => {\n  if (!isLoading && isEmpty(results)) {\n    return <EmptySearchResult {...emptyMessages} />;\n  }\n\n  const items = results.map((result, index) => {\n    return (\n      <li className={style.result} key={`result-${index}`} data-name={`result-${index}`}>\n        <Chips {...result} />\n      </li>\n    );\n  });\n\n  return <ul aria-label={resultsAriaLabel}>{items}</ul>;\n};\n\nconst SearchAndChipsResults = props => {\n  const {\n    search,\n    selectAllButton,\n    results,\n    emptyMessages,\n    isLoading = false,\n    'results-aria-label': resultsAriaLabel\n  } = props;\n\n  const {onClick, label, disabled = false, 'aria-label': ariaLabel} = selectAllButton;\n  const resultView = buildResultView(results, resultsAriaLabel, emptyMessages, isLoading);\n  const buttonProps = {\n    type: 'secondary',\n    label,\n    'aria-label': ariaLabel,\n    'data-name': `select-all-button`,\n    icon: {\n      position: 'right',\n      type: 'add'\n    },\n    onClick,\n    disabled\n  };\n\n  return (\n    <div className={style.container}>\n      <div className={style.header}>\n        <div className={style.button}>\n          <ButtonLink {...buttonProps} />\n        </div>\n        <div className={style.search}>\n          <Search {...search} theme=\"coorpmanager\" />\n        </div>\n      </div>\n      <div className={style.resultContainer}>{resultView}</div>\n    </div>\n  );\n};\n\nSearchAndChipsResults.propTypes = {\n  selectAllButton: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func,\n    disabled: PropTypes.bool,\n    'aria-label': PropTypes.string\n  }),\n  isLoading: PropTypes.bool,\n  search: PropTypes.shape(Search.PropTypes),\n  results: PropTypes.arrayOf(PropTypes.shape(Chips.propTypes)),\n  'results-aria-label': PropTypes.string,\n  emptyMessages: PropTypes.shape({\n    firstMessage: PropTypes.string,\n    secondMessage: PropTypes.string\n  })\n};\n\nexport default SearchAndChipsResults;\n"],"file":"index.js"}

package/es/organism/search-and-chips-results/test/fixtures/default.js

@@ -4,6 +4,7 @@ export default {
       label: 'Select All',
       onClick: () => console.log('Select All')
     },
+    isLoading: false,
     search: {
       title: 'Search...',
       placeholder: 'Search...',

package/es/organism/search-and-chips-results/test/fixtures/default.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/organism/search-and-chips-results/test/fixtures/default.js"],"names":["props","selectAllButton","label","onClick","console","log","search","title","placeholder","value","description","onChange","results","text","information"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,eAAe,EAAE;AACfC,MAAAA,KAAK,EAAE,YADQ;AAEfC,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,YAAZ;AAFA,KADZ;AAKLC,IAAAA,MAAM,EAAE;AACNC,MAAAA,KAAK,EAAE,WADD;AAENC,MAAAA,WAAW,EAAE,WAFP;AAGNC,MAAAA,KAAK,EAAE,EAHD;AAINC,MAAAA,WAAW,EAAE,gCAJP;AAKNC,MAAAA,QAAQ,EAAEF,KAAK,IAAIL,OAAO,CAACC,GAAR,CAAYI,KAAZ;AALb,KALH;AAYL,0BAAsB,oBAZjB;AAaLG,IAAAA,OAAO,EAAE,CACP;AACEC,MAAAA,IAAI,EAAE,8CADR;AAEEC,MAAAA,WAAW,EAAE,aAFf;AAGEX,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,oDAAZ;AAHjB,KADO,EAMP;AACEQ,MAAAA,IAAI,EAAE,cADR;AAEEC,MAAAA,WAAW,EAAE,WAFf;AAGEX,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,oBAAZ;AAHjB,KANO,EAWP;AACEQ,MAAAA,IAAI,EAAE,GADR;AAEEC,MAAAA,WAAW,EAAE,KAFf;AAGEX,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,SAAZ;AAHjB,KAXO,EAgBP;AACEQ,MAAAA,IAAI,EAAE,gDADR;AAEEC,MAAAA,WAAW,EAAE,UAFf;AAGEX,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,sDAAZ;AAHjB,KAhBO,EAqBP;AACEQ,MAAAA,IAAI,EAAE,cADR;AAEEC,MAAAA,WAAW,EAAE,cAFf;AAGEX,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,oBAAZ;AAHjB,KArBO,EA0BP;AACEQ,MAAAA,IAAI,EAAE,oCADR;AAEEC,MAAAA,WAAW,EAAE,WAFf;AAGEX,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,0CAAZ;AAHjB,KA1BO,EA+BP;AACEQ,MAAAA,IAAI,EAAE,sBADR;AAEEC,MAAAA,WAAW,EAAE,YAFf;AAGEX,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,4BAAZ;AAHjB,KA/BO;AAbJ;AADM,CAAf","sourcesContent":["export default {\n  props: {\n    selectAllButton: {\n      label: 'Select All',\n      onClick: () => console.log('Select All')\n    },\n    search: {\n      title: 'Search...',\n      placeholder: 'Search...',\n      value: '',\n      description: 'Type to filter the populations',\n      onChange: value => console.log(value)\n    },\n    'results-aria-label': 'Population results',\n    results: [\n      {\n        text: 'Population Human resourses filiale Singapour',\n        information: '15739 users',\n        onClick: () => console.log('click Population Human resourses filiale Singapour')\n      },\n      {\n        text: 'Population 1',\n        information: '345 users',\n        onClick: () => console.log('click Population 1')\n      },\n      {\n        text: 'P',\n        information: '1 p',\n        onClick: () => console.log('click P')\n      },\n      {\n        text: 'Population managed by othes RH in some country',\n        information: '10 users',\n        onClick: () => console.log('click Population managed by othes RH in some country')\n      },\n      {\n        text: 'Population 4',\n        information: '106728 users',\n        onClick: () => console.log('click Population 4')\n      },\n      {\n        text: 'Population a long with a long name',\n        information: '105 users',\n        onClick: () => console.log('click Population a long with a long name')\n      },\n      {\n        text: 'Result bit that long',\n        information: '1067 users',\n        onClick: () => console.log('click Result bit that long')\n      }\n    ]\n  }\n};\n"],"file":"default.js"}
+{"version":3,"sources":["../../../../../src/organism/search-and-chips-results/test/fixtures/default.js"],"names":["props","selectAllButton","label","onClick","console","log","isLoading","search","title","placeholder","value","description","onChange","results","text","information"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,eAAe,EAAE;AACfC,MAAAA,KAAK,EAAE,YADQ;AAEfC,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,YAAZ;AAFA,KADZ;AAKLC,IAAAA,SAAS,EAAE,KALN;AAMLC,IAAAA,MAAM,EAAE;AACNC,MAAAA,KAAK,EAAE,WADD;AAENC,MAAAA,WAAW,EAAE,WAFP;AAGNC,MAAAA,KAAK,EAAE,EAHD;AAINC,MAAAA,WAAW,EAAE,gCAJP;AAKNC,MAAAA,QAAQ,EAAEF,KAAK,IAAIN,OAAO,CAACC,GAAR,CAAYK,KAAZ;AALb,KANH;AAaL,0BAAsB,oBAbjB;AAcLG,IAAAA,OAAO,EAAE,CACP;AACEC,MAAAA,IAAI,EAAE,8CADR;AAEEC,MAAAA,WAAW,EAAE,aAFf;AAGEZ,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,oDAAZ;AAHjB,KADO,EAMP;AACES,MAAAA,IAAI,EAAE,cADR;AAEEC,MAAAA,WAAW,EAAE,WAFf;AAGEZ,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,oBAAZ;AAHjB,KANO,EAWP;AACES,MAAAA,IAAI,EAAE,GADR;AAEEC,MAAAA,WAAW,EAAE,KAFf;AAGEZ,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,SAAZ;AAHjB,KAXO,EAgBP;AACES,MAAAA,IAAI,EAAE,gDADR;AAEEC,MAAAA,WAAW,EAAE,UAFf;AAGEZ,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,sDAAZ;AAHjB,KAhBO,EAqBP;AACES,MAAAA,IAAI,EAAE,cADR;AAEEC,MAAAA,WAAW,EAAE,cAFf;AAGEZ,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,oBAAZ;AAHjB,KArBO,EA0BP;AACES,MAAAA,IAAI,EAAE,oCADR;AAEEC,MAAAA,WAAW,EAAE,WAFf;AAGEZ,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,0CAAZ;AAHjB,KA1BO,EA+BP;AACES,MAAAA,IAAI,EAAE,sBADR;AAEEC,MAAAA,WAAW,EAAE,YAFf;AAGEZ,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,4BAAZ;AAHjB,KA/BO;AAdJ;AADM,CAAf","sourcesContent":["export default {\n  props: {\n    selectAllButton: {\n      label: 'Select All',\n      onClick: () => console.log('Select All')\n    },\n    isLoading: false,\n    search: {\n      title: 'Search...',\n      placeholder: 'Search...',\n      value: '',\n      description: 'Type to filter the populations',\n      onChange: value => console.log(value)\n    },\n    'results-aria-label': 'Population results',\n    results: [\n      {\n        text: 'Population Human resourses filiale Singapour',\n        information: '15739 users',\n        onClick: () => console.log('click Population Human resourses filiale Singapour')\n      },\n      {\n        text: 'Population 1',\n        information: '345 users',\n        onClick: () => console.log('click Population 1')\n      },\n      {\n        text: 'P',\n        information: '1 p',\n        onClick: () => console.log('click P')\n      },\n      {\n        text: 'Population managed by othes RH in some country',\n        information: '10 users',\n        onClick: () => console.log('click Population managed by othes RH in some country')\n      },\n      {\n        text: 'Population 4',\n        information: '106728 users',\n        onClick: () => console.log('click Population 4')\n      },\n      {\n        text: 'Population a long with a long name',\n        information: '105 users',\n        onClick: () => console.log('click Population a long with a long name')\n      },\n      {\n        text: 'Result bit that long',\n        information: '1067 users',\n        onClick: () => console.log('click Result bit that long')\n      }\n    ]\n  }\n};\n"],"file":"default.js"}

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

@@ -110,7 +110,9 @@ const WizardContents = props => {
     previousStep
   } = props;
   const headerView = buildHeader(wizardHeader, steps);
-  const formView = buildForm(content);
+  const formView = buildForm(_extends(_extends({}, content), {}, {
+    isLoading
+  }));
   const rightActionView = buildActionZone(previousStep, nextStep, 'right');
   const footerActionView = buildActionZone(previousStep, nextStep, 'footer');
   return /*#__PURE__*/React.createElement("div", {
@@ -120,9 +122,11 @@ const WizardContents = props => {
     className: style.leftSection
   }, headerView, /*#__PURE__*/React.createElement("div", {
     className: style.form
-  }, isLoading ? /*#__PURE__*/React.createElement(Loader, {
+  }, isLoading ? /*#__PURE__*/React.createElement("div", {
+    className: style.loader
+  }, /*#__PURE__*/React.createElement(Loader, {
     theme: "coorpmanager"
-  }) : formView)), /*#__PURE__*/React.createElement("div", {
+  })) : formView)), /*#__PURE__*/React.createElement("div", {
     className: style.rightSection,
     "data-name": "summary-right-section"
   }, /*#__PURE__*/React.createElement("div", {

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

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

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

@@ -8,6 +8,7 @@
   align-items: stretch;
   justify-content: flex-start;
   flex-wrap: wrap;
+  height: 100%;
 }
 
 .leftSection {
@@ -24,6 +25,7 @@
   display: flex;
   flex-direction: column;
   flex: 0 1 320px;
+  height: 100%;
 }
 
 .stickySection {
@@ -32,7 +34,18 @@
   z-index: 1;
   bottom: 0;
   right: 64px;
-  width: 300px;
+  width: 320px;
+  height: 82%;
+  border-radius: 7px;
+  height: 86%;
+  display: flex;
+  flex-direction: column;
+}
+
+.loader {
+  position: relative;
+  min-height: 50vh;
+  width: 100%;
 }
 
 .header {
@@ -56,6 +69,9 @@
   width: 100%;
   position: relative;
   min-height: 500px;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
   justify-content: space-between;
 }
 
@@ -72,6 +88,7 @@
 
 .footer {
   width: 100%;
+  height: 100%;
   bottom: 0px;
   display: none;
   position: inherit;
@@ -93,6 +110,7 @@
     bottom: 10px;
     position: sticky;
     z-index: 1;
+    min-height: 600px;
   }
   .footer::before {
     content: '';
@@ -107,6 +125,7 @@
 
   .summaryFooter {
     width: 57%;
+    height: 100%;
   }
 
   .actionFooter {

package/lib/molecule/select-multiple/style.css

@@ -67,7 +67,7 @@
   display: block;
   visibility: hidden;
   width: 100%;
-  padding: 0 15px;
+  padding: 0;
   box-sizing: border-box;
   background: white;
   position: absolute;
@@ -91,8 +91,7 @@
 
 .choice {
   list-style: none;
-  margin: 15px 0;
-  padding: 0;
+  padding: 12px 15px;
 }
 
 .choice .item {
@@ -104,6 +103,10 @@
   width: 100%;
   display: block;
 }
+ 
+.coorpmanager .choice:hover {
+  background-color: cm_grey_150;
+}
 
 .arrow {
   position: absolute;

package/lib/molecule/wizard-summary/style.css

@@ -233,7 +233,7 @@ ul {
   }
 
   .checkbox:checked + .summary  {
-    height: 65%;
+    height: 70%;
     max-height: 1000px;
     padding: 12px 24px 12px 24px;
     box-shadow: 0 -6px 42px -14px rgba(0, 0, 0, 0.25);
@@ -243,6 +243,6 @@ ul {
     transform: rotateZ(180deg);
   }
   .summarySections {
-    max-height: 250px;
+    max-height: 500px;
   }
 }

package/lib/organism/course-selection/index.js

@@ -23,8 +23,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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); }
 
-const buildResultView = (courses, coursesSelectionAriaLabel, emptyMessages) => {
-  if ((0, _isEmpty2.default)(courses)) {
+const buildResultView = (courses, coursesSelectionAriaLabel, emptyMessages, isLoading) => {
+  if (!isLoading && (0, _isEmpty2.default)(courses)) {
     return /*#__PURE__*/_react.default.createElement(_emptySearchResult.default, emptyMessages);
   }
 
@@ -46,9 +46,10 @@ const CourseSelection = props => {
     contentTypeFilter,
     courses,
     emptyMessages,
+    isLoading = false,
     'courses-selection-aria-label': coursesSelectionAriaLabel
   } = props;
-  const resultView = buildResultView(courses, coursesSelectionAriaLabel, emptyMessages);
+  const resultView = buildResultView(courses, coursesSelectionAriaLabel, emptyMessages, isLoading);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.container
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -66,6 +67,7 @@ const CourseSelection = props => {
 
 CourseSelection.propTypes = process.env.NODE_ENV !== "production" ? {
   search: _propTypes.default.shape(_inputSearch.default.PropTypes),
+  isLoading: _propTypes.default.bool,
   contentTypeFilter: _propTypes.default.shape(_selectMultiple.default.PropTypes),
   courses: _propTypes.default.arrayOf(_propTypes.default.shape(_card.default.propTypes)),
   'courses-selection-aria-label': _propTypes.default.string,

package/lib/organism/course-selection/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/organism/course-selection/index.js"],"names":["buildResultView","courses","coursesSelectionAriaLabel","emptyMessages","items","map","card","index","style","cards","CourseSelection","props","search","contentTypeFilter","resultView","container","filters","contentFilter","cardsContainer","propTypes","PropTypes","shape","Search","SelectMultiple","arrayOf","Card","string","firstMessage","secondMessage"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,eAAe,GAAG,CAACC,OAAD,EAAUC,yBAAV,EAAqCC,aAArC,KAAuD;AAC7E,MAAI,uBAAQF,OAAR,CAAJ,EAAsB;AACpB,wBAAO,6BAAC,0BAAD,EAAuBE,aAAvB,CAAP;AACD;;AAED,QAAMC,KAAK,GAAGH,OAAO,CAACI,GAAR,CAAY,CAACC,IAAD,EAAOC,KAAP,KAAiB;AACzC,wBACE;AAAI,MAAA,SAAS,EAAEC,eAAMC,KAArB;AAA4B,MAAA,GAAG,EAAG,QAAOF,KAAM,EAA/C;AAAkD,mBAAY,UAASA,KAAM;AAA7E,oBACE,6BAAC,aAAD,EAAUD,IAAV,CADF,CADF;AAKD,GANa,CAAd;AAQA,sBAAO;AAAI,kBAAYJ;AAAhB,KAA4CE,KAA5C,CAAP;AACD,CAdD;;AAgBA,MAAMM,eAAe,GAAGC,KAAK,IAAI;AAC/B,QAAM;AACJC,IAAAA,MADI;AAEJC,IAAAA,iBAFI;AAGJZ,IAAAA,OAHI;AAIJE,IAAAA,aAJI;AAKJ,oCAAgCD;AAL5B,MAMFS,KANJ;AAQA,QAAMG,UAAU,GAAGd,eAAe,CAACC,OAAD,EAAUC,yBAAV,EAAqCC,aAArC,CAAlC;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEK,eAAMO;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEP,eAAMQ;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAER,eAAMI;AAAtB,kBACE,6BAAC,oBAAD,eAAYA,MAAZ;AAAoB,IAAA,KAAK,EAAC;AAA1B,KADF,CADF,eAIE;AAAK,IAAA,SAAS,EAAEJ,eAAMS;AAAtB,kBACE,6BAAC,uBAAD,EAAoBJ,iBAApB,CADF,CAJF,CADF,eASE;AAAK,IAAA,SAAS,EAAEL,eAAMU;AAAtB,KAAuCJ,UAAvC,CATF,CADF;AAaD,CAxBD;;AA0BAJ,eAAe,CAACS,SAAhB,2CAA4B;AAC1BP,EAAAA,MAAM,EAAEQ,mBAAUC,KAAV,CAAgBC,qBAAOF,SAAvB,CADkB;AAE1BP,EAAAA,iBAAiB,EAAEO,mBAAUC,KAAV,CAAgBE,wBAAeH,SAA/B,CAFO;AAG1BnB,EAAAA,OAAO,EAAEmB,mBAAUI,OAAV,CAAkBJ,mBAAUC,KAAV,CAAgBI,cAAKN,SAArB,CAAlB,CAHiB;AAI1B,kCAAgCC,mBAAUM,MAJhB;AAK1BvB,EAAAA,aAAa,EAAEiB,mBAAUC,KAAV,CAAgB;AAC7BM,IAAAA,YAAY,EAAEP,mBAAUM,MADK;AAE7BE,IAAAA,aAAa,EAAER,mBAAUM;AAFI,GAAhB;AALW,CAA5B;eAWehB,e","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty} from 'lodash/fp';\nimport EmptySearchResult from '../../atom/empty-search-result';\nimport Search from '../../atom/input-search';\nimport SelectMultiple from '../../molecule/select-multiple';\nimport Card from '../../molecule/card';\nimport style from './style.css';\n\nconst buildResultView = (courses, coursesSelectionAriaLabel, emptyMessages) => {\n  if (isEmpty(courses)) {\n    return <EmptySearchResult {...emptyMessages} />;\n  }\n\n  const items = courses.map((card, index) => {\n    return (\n      <li className={style.cards} key={`card-${index}`} data-name={`course-${index}`}>\n        <Card {...card} />\n      </li>\n    );\n  });\n\n  return <ul aria-label={coursesSelectionAriaLabel}>{items}</ul>;\n};\n\nconst CourseSelection = props => {\n  const {\n    search,\n    contentTypeFilter,\n    courses,\n    emptyMessages,\n    'courses-selection-aria-label': coursesSelectionAriaLabel\n  } = props;\n\n  const resultView = buildResultView(courses, coursesSelectionAriaLabel, emptyMessages);\n\n  return (\n    <div className={style.container}>\n      <div className={style.filters}>\n        <div className={style.search}>\n          <Search {...search} theme=\"coorpmanager\" />\n        </div>\n        <div className={style.contentFilter}>\n          <SelectMultiple {...contentTypeFilter} />\n        </div>\n      </div>\n      <div className={style.cardsContainer}>{resultView}</div>\n    </div>\n  );\n};\n\nCourseSelection.propTypes = {\n  search: PropTypes.shape(Search.PropTypes),\n  contentTypeFilter: PropTypes.shape(SelectMultiple.PropTypes),\n  courses: PropTypes.arrayOf(PropTypes.shape(Card.propTypes)),\n  'courses-selection-aria-label': PropTypes.string,\n  emptyMessages: PropTypes.shape({\n    firstMessage: PropTypes.string,\n    secondMessage: PropTypes.string\n  })\n};\n\nexport default CourseSelection;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/organism/course-selection/index.js"],"names":["buildResultView","courses","coursesSelectionAriaLabel","emptyMessages","isLoading","items","map","card","index","style","cards","CourseSelection","props","search","contentTypeFilter","resultView","container","filters","contentFilter","cardsContainer","propTypes","PropTypes","shape","Search","bool","SelectMultiple","arrayOf","Card","string","firstMessage","secondMessage"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,eAAe,GAAG,CAACC,OAAD,EAAUC,yBAAV,EAAqCC,aAArC,EAAoDC,SAApD,KAAkE;AACxF,MAAI,CAACA,SAAD,IAAc,uBAAQH,OAAR,CAAlB,EAAoC;AAClC,wBAAO,6BAAC,0BAAD,EAAuBE,aAAvB,CAAP;AACD;;AAED,QAAME,KAAK,GAAGJ,OAAO,CAACK,GAAR,CAAY,CAACC,IAAD,EAAOC,KAAP,KAAiB;AACzC,wBACE;AAAI,MAAA,SAAS,EAAEC,eAAMC,KAArB;AAA4B,MAAA,GAAG,EAAG,QAAOF,KAAM,EAA/C;AAAkD,mBAAY,UAASA,KAAM;AAA7E,oBACE,6BAAC,aAAD,EAAUD,IAAV,CADF,CADF;AAKD,GANa,CAAd;AAQA,sBAAO;AAAI,kBAAYL;AAAhB,KAA4CG,KAA5C,CAAP;AACD,CAdD;;AAgBA,MAAMM,eAAe,GAAGC,KAAK,IAAI;AAC/B,QAAM;AACJC,IAAAA,MADI;AAEJC,IAAAA,iBAFI;AAGJb,IAAAA,OAHI;AAIJE,IAAAA,aAJI;AAKJC,IAAAA,SAAS,GAAG,KALR;AAMJ,oCAAgCF;AAN5B,MAOFU,KAPJ;AASA,QAAMG,UAAU,GAAGf,eAAe,CAACC,OAAD,EAAUC,yBAAV,EAAqCC,aAArC,EAAoDC,SAApD,CAAlC;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEK,eAAMO;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEP,eAAMQ;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAER,eAAMI;AAAtB,kBACE,6BAAC,oBAAD,eAAYA,MAAZ;AAAoB,IAAA,KAAK,EAAC;AAA1B,KADF,CADF,eAIE;AAAK,IAAA,SAAS,EAAEJ,eAAMS;AAAtB,kBACE,6BAAC,uBAAD,EAAoBJ,iBAApB,CADF,CAJF,CADF,eASE;AAAK,IAAA,SAAS,EAAEL,eAAMU;AAAtB,KAAuCJ,UAAvC,CATF,CADF;AAaD,CAzBD;;AA2BAJ,eAAe,CAACS,SAAhB,2CAA4B;AAC1BP,EAAAA,MAAM,EAAEQ,mBAAUC,KAAV,CAAgBC,qBAAOF,SAAvB,CADkB;AAE1BjB,EAAAA,SAAS,EAAEiB,mBAAUG,IAFK;AAG1BV,EAAAA,iBAAiB,EAAEO,mBAAUC,KAAV,CAAgBG,wBAAeJ,SAA/B,CAHO;AAI1BpB,EAAAA,OAAO,EAAEoB,mBAAUK,OAAV,CAAkBL,mBAAUC,KAAV,CAAgBK,cAAKP,SAArB,CAAlB,CAJiB;AAK1B,kCAAgCC,mBAAUO,MALhB;AAM1BzB,EAAAA,aAAa,EAAEkB,mBAAUC,KAAV,CAAgB;AAC7BO,IAAAA,YAAY,EAAER,mBAAUO,MADK;AAE7BE,IAAAA,aAAa,EAAET,mBAAUO;AAFI,GAAhB;AANW,CAA5B;eAYejB,e","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty} from 'lodash/fp';\nimport EmptySearchResult from '../../atom/empty-search-result';\nimport Search from '../../atom/input-search';\nimport SelectMultiple from '../../molecule/select-multiple';\nimport Card from '../../molecule/card';\nimport style from './style.css';\n\nconst buildResultView = (courses, coursesSelectionAriaLabel, emptyMessages, isLoading) => {\n  if (!isLoading && isEmpty(courses)) {\n    return <EmptySearchResult {...emptyMessages} />;\n  }\n\n  const items = courses.map((card, index) => {\n    return (\n      <li className={style.cards} key={`card-${index}`} data-name={`course-${index}`}>\n        <Card {...card} />\n      </li>\n    );\n  });\n\n  return <ul aria-label={coursesSelectionAriaLabel}>{items}</ul>;\n};\n\nconst CourseSelection = props => {\n  const {\n    search,\n    contentTypeFilter,\n    courses,\n    emptyMessages,\n    isLoading = false,\n    'courses-selection-aria-label': coursesSelectionAriaLabel\n  } = props;\n\n  const resultView = buildResultView(courses, coursesSelectionAriaLabel, emptyMessages, isLoading);\n\n  return (\n    <div className={style.container}>\n      <div className={style.filters}>\n        <div className={style.search}>\n          <Search {...search} theme=\"coorpmanager\" />\n        </div>\n        <div className={style.contentFilter}>\n          <SelectMultiple {...contentTypeFilter} />\n        </div>\n      </div>\n      <div className={style.cardsContainer}>{resultView}</div>\n    </div>\n  );\n};\n\nCourseSelection.propTypes = {\n  search: PropTypes.shape(Search.PropTypes),\n  isLoading: PropTypes.bool,\n  contentTypeFilter: PropTypes.shape(SelectMultiple.PropTypes),\n  courses: PropTypes.arrayOf(PropTypes.shape(Card.propTypes)),\n  'courses-selection-aria-label': PropTypes.string,\n  emptyMessages: PropTypes.shape({\n    firstMessage: PropTypes.string,\n    secondMessage: PropTypes.string\n  })\n};\n\nexport default CourseSelection;\n"],"file":"index.js"}

package/lib/organism/course-selection/test/fixtures/default.js

@@ -26,6 +26,7 @@ var _default = {
       description: 'Type to filter the courses',
       onChange: value => console.log(value)
     },
+    isLoading: false,
     contentTypeFilter: {
       type: 'selectMultiple',
       title: 'Content type',

package/lib/organism/course-selection/test/fixtures/default.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/organism/course-selection/test/fixtures/default.js"],"names":["props","search","title","placeholder","value","description","onChange","console","log","contentTypeFilter","type","theme","size","options","name","selected","multiple","courses","SelectedCard","UnSelectedCard","Article","isSelected","Scorm","ExternalContent"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAE;AACNC,MAAAA,KAAK,EAAE,WADD;AAENC,MAAAA,WAAW,EAAE,WAFP;AAGNC,MAAAA,KAAK,EAAE,EAHD;AAINC,MAAAA,WAAW,EAAE,4BAJP;AAKNC,MAAAA,QAAQ,EAAEF,KAAK,IAAIG,OAAO,CAACC,GAAR,CAAYJ,KAAZ;AALb,KADH;AAQLK,IAAAA,iBAAiB,EAAE;AACjBC,MAAAA,IAAI,EAAE,gBADW;AAEjBR,MAAAA,KAAK,EAAE,cAFU;AAGjBC,MAAAA,WAAW,EAAE,cAHI;AAIjBE,MAAAA,WAAW,EAAE,0BAJI;AAKjBM,MAAAA,KAAK,EAAE,cALU;AAMjBC,MAAAA,IAAI,EAAE,SANW;AAOjBC,MAAAA,OAAO,EAAE,CACP;AACEC,QAAAA,IAAI,EAAE,QADR;AAEEV,QAAAA,KAAK,EAAE,QAFT;AAGEW,QAAAA,QAAQ,EAAE;AAHZ,OADO,EAMP;AACED,QAAAA,IAAI,EAAE,aADR;AAEEV,QAAAA,KAAK,EAAE,SAFT;AAGEW,QAAAA,QAAQ,EAAE;AAHZ,OANO,EAWP;AACED,QAAAA,IAAI,EAAE,oBADR;AAEEV,QAAAA,KAAK,EAAE,OAFT;AAGEW,QAAAA,QAAQ,EAAE;AAHZ,OAXO,EAgBP;AACED,QAAAA,IAAI,EAAE,OADR;AAEEV,QAAAA,KAAK,EAAE,OAFT;AAGEW,QAAAA,QAAQ,EAAE;AAHZ,OAhBO,CAPQ;AA6BjBC,MAAAA,QAAQ,EAAE;AA7BO,KARd;AAuCL,oCAAgC,iBAvC3B;AAwCLC,IAAAA,OAAO,EAAE,CACPC,wBAAalB,KADN,EAEPmB,yBAAenB,KAFR,wBAGHoB,iBAAQpB,KAHL;AAGYqB,MAAAA,UAAU,EAAE;AAHxB,QAIPH,wBAAalB,KAJN,wBAKHsB,eAAMtB,KALH;AAKUqB,MAAAA,UAAU,EAAE;AALtB,8BAMHF,yBAAenB,KANZ;AAMmBqB,MAAAA,UAAU,EAAE,KAN/B;AAMsCnB,MAAAA,KAAK,EAAE;AAN7C,8BAOHqB,yBAAgBvB,KAPb;AAOoBqB,MAAAA,UAAU,EAAE,KAPhC;AAOuCnB,MAAAA,KAAK,EAAE;AAP9C,8BAQHoB,eAAMtB,KARH;AAQUqB,MAAAA,UAAU,EAAE,KARtB;AAQ6BnB,MAAAA,KAAK,EAAE;AARpC;AAxCJ;AADM,C","sourcesContent":["import UnSelectedCard from '../../../../molecule/card/test/fixtures/selectable-false';\nimport SelectedCard from '../../../../molecule/card/test/fixtures/selectable-true';\nimport Article from '../../../../molecule/card/test/fixtures/article';\nimport Scorm from '../../../../molecule/card/test/fixtures/scorm';\nimport ExternalContent from '../../../../molecule/card/test/fixtures/external-content';\n\nexport default {\n  props: {\n    search: {\n      title: 'Search...',\n      placeholder: 'Search...',\n      value: '',\n      description: 'Type to filter the courses',\n      onChange: value => console.log(value)\n    },\n    contentTypeFilter: {\n      type: 'selectMultiple',\n      title: 'Content type',\n      placeholder: 'Content type',\n      description: 'This filters the courses',\n      theme: 'coorpmanager',\n      size: 'default',\n      options: [\n        {\n          name: 'Course',\n          value: 'course',\n          selected: true\n        },\n        {\n          name: \"5' learning\",\n          value: 'chapter',\n          selected: false\n        },\n        {\n          name: 'Interactive slides',\n          value: 'scorm',\n          selected: false\n        },\n        {\n          name: 'Video',\n          value: 'video',\n          selected: false\n        }\n      ],\n      multiple: false\n    },\n    'courses-selection-aria-label': 'Courses results',\n    courses: [\n      SelectedCard.props,\n      UnSelectedCard.props,\n      {...Article.props, isSelected: false},\n      SelectedCard.props,\n      {...Scorm.props, isSelected: true},\n      {...UnSelectedCard.props, isSelected: false, title: 'Standard course'},\n      {...ExternalContent.props, isSelected: false, title: 'External course'},\n      {...Scorm.props, isSelected: false, title: 'Scorm course'}\n    ]\n  }\n};\n"],"file":"default.js"}
+{"version":3,"sources":["../../../../../src/organism/course-selection/test/fixtures/default.js"],"names":["props","search","title","placeholder","value","description","onChange","console","log","isLoading","contentTypeFilter","type","theme","size","options","name","selected","multiple","courses","SelectedCard","UnSelectedCard","Article","isSelected","Scorm","ExternalContent"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAE;AACNC,MAAAA,KAAK,EAAE,WADD;AAENC,MAAAA,WAAW,EAAE,WAFP;AAGNC,MAAAA,KAAK,EAAE,EAHD;AAINC,MAAAA,WAAW,EAAE,4BAJP;AAKNC,MAAAA,QAAQ,EAAEF,KAAK,IAAIG,OAAO,CAACC,GAAR,CAAYJ,KAAZ;AALb,KADH;AAQLK,IAAAA,SAAS,EAAE,KARN;AASLC,IAAAA,iBAAiB,EAAE;AACjBC,MAAAA,IAAI,EAAE,gBADW;AAEjBT,MAAAA,KAAK,EAAE,cAFU;AAGjBC,MAAAA,WAAW,EAAE,cAHI;AAIjBE,MAAAA,WAAW,EAAE,0BAJI;AAKjBO,MAAAA,KAAK,EAAE,cALU;AAMjBC,MAAAA,IAAI,EAAE,SANW;AAOjBC,MAAAA,OAAO,EAAE,CACP;AACEC,QAAAA,IAAI,EAAE,QADR;AAEEX,QAAAA,KAAK,EAAE,QAFT;AAGEY,QAAAA,QAAQ,EAAE;AAHZ,OADO,EAMP;AACED,QAAAA,IAAI,EAAE,aADR;AAEEX,QAAAA,KAAK,EAAE,SAFT;AAGEY,QAAAA,QAAQ,EAAE;AAHZ,OANO,EAWP;AACED,QAAAA,IAAI,EAAE,oBADR;AAEEX,QAAAA,KAAK,EAAE,OAFT;AAGEY,QAAAA,QAAQ,EAAE;AAHZ,OAXO,EAgBP;AACED,QAAAA,IAAI,EAAE,OADR;AAEEX,QAAAA,KAAK,EAAE,OAFT;AAGEY,QAAAA,QAAQ,EAAE;AAHZ,OAhBO,CAPQ;AA6BjBC,MAAAA,QAAQ,EAAE;AA7BO,KATd;AAwCL,oCAAgC,iBAxC3B;AAyCLC,IAAAA,OAAO,EAAE,CACPC,wBAAanB,KADN,EAEPoB,yBAAepB,KAFR,wBAGHqB,iBAAQrB,KAHL;AAGYsB,MAAAA,UAAU,EAAE;AAHxB,QAIPH,wBAAanB,KAJN,wBAKHuB,eAAMvB,KALH;AAKUsB,MAAAA,UAAU,EAAE;AALtB,8BAMHF,yBAAepB,KANZ;AAMmBsB,MAAAA,UAAU,EAAE,KAN/B;AAMsCpB,MAAAA,KAAK,EAAE;AAN7C,8BAOHsB,yBAAgBxB,KAPb;AAOoBsB,MAAAA,UAAU,EAAE,KAPhC;AAOuCpB,MAAAA,KAAK,EAAE;AAP9C,8BAQHqB,eAAMvB,KARH;AAQUsB,MAAAA,UAAU,EAAE,KARtB;AAQ6BpB,MAAAA,KAAK,EAAE;AARpC;AAzCJ;AADM,C","sourcesContent":["import UnSelectedCard from '../../../../molecule/card/test/fixtures/selectable-false';\nimport SelectedCard from '../../../../molecule/card/test/fixtures/selectable-true';\nimport Article from '../../../../molecule/card/test/fixtures/article';\nimport Scorm from '../../../../molecule/card/test/fixtures/scorm';\nimport ExternalContent from '../../../../molecule/card/test/fixtures/external-content';\n\nexport default {\n  props: {\n    search: {\n      title: 'Search...',\n      placeholder: 'Search...',\n      value: '',\n      description: 'Type to filter the courses',\n      onChange: value => console.log(value)\n    },\n    isLoading: false,\n    contentTypeFilter: {\n      type: 'selectMultiple',\n      title: 'Content type',\n      placeholder: 'Content type',\n      description: 'This filters the courses',\n      theme: 'coorpmanager',\n      size: 'default',\n      options: [\n        {\n          name: 'Course',\n          value: 'course',\n          selected: true\n        },\n        {\n          name: \"5' learning\",\n          value: 'chapter',\n          selected: false\n        },\n        {\n          name: 'Interactive slides',\n          value: 'scorm',\n          selected: false\n        },\n        {\n          name: 'Video',\n          value: 'video',\n          selected: false\n        }\n      ],\n      multiple: false\n    },\n    'courses-selection-aria-label': 'Courses results',\n    courses: [\n      SelectedCard.props,\n      UnSelectedCard.props,\n      {...Article.props, isSelected: false},\n      SelectedCard.props,\n      {...Scorm.props, isSelected: true},\n      {...UnSelectedCard.props, isSelected: false, title: 'Standard course'},\n      {...ExternalContent.props, isSelected: false, title: 'External course'},\n      {...Scorm.props, isSelected: false, title: 'Scorm course'}\n    ]\n  }\n};\n"],"file":"default.js"}

package/lib/organism/search-and-chips-results/index.js

@@ -23,8 +23,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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); }
 
-const buildResultView = (results, resultsAriaLabel, emptyMessages) => {
-  if ((0, _isEmpty2.default)(results)) {
+const buildResultView = (results, resultsAriaLabel, emptyMessages, isLoading) => {
+  if (!isLoading && (0, _isEmpty2.default)(results)) {
     return /*#__PURE__*/_react.default.createElement(_emptySearchResult.default, emptyMessages);
   }
 
@@ -46,6 +46,7 @@ const SearchAndChipsResults = props => {
     selectAllButton,
     results,
     emptyMessages,
+    isLoading = false,
     'results-aria-label': resultsAriaLabel
   } = props;
   const {
@@ -54,7 +55,7 @@ const SearchAndChipsResults = props => {
     disabled = false,
     'aria-label': ariaLabel
   } = selectAllButton;
-  const resultView = buildResultView(results, resultsAriaLabel, emptyMessages);
+  const resultView = buildResultView(results, resultsAriaLabel, emptyMessages, isLoading);
   const buttonProps = {
     type: 'secondary',
     label,
@@ -89,6 +90,7 @@ SearchAndChipsResults.propTypes = process.env.NODE_ENV !== "production" ? {
     disabled: _propTypes.default.bool,
     'aria-label': _propTypes.default.string
   }),
+  isLoading: _propTypes.default.bool,
   search: _propTypes.default.shape(_inputSearch.default.PropTypes),
   results: _propTypes.default.arrayOf(_propTypes.default.shape(_chips.default.propTypes)),
   'results-aria-label': _propTypes.default.string,

package/lib/organism/search-and-chips-results/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/organism/search-and-chips-results/index.js"],"names":["buildResultView","results","resultsAriaLabel","emptyMessages","items","map","result","index","style","SearchAndChipsResults","props","search","selectAllButton","onClick","label","disabled","ariaLabel","resultView","buttonProps","type","icon","position","container","header","button","resultContainer","propTypes","PropTypes","shape","string","func","bool","Search","arrayOf","Chips","firstMessage","secondMessage"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,eAAe,GAAG,CAACC,OAAD,EAAUC,gBAAV,EAA4BC,aAA5B,KAA8C;AACpE,MAAI,uBAAQF,OAAR,CAAJ,EAAsB;AACpB,wBAAO,6BAAC,0BAAD,EAAuBE,aAAvB,CAAP;AACD;;AAED,QAAMC,KAAK,GAAGH,OAAO,CAACI,GAAR,CAAY,CAACC,MAAD,EAASC,KAAT,KAAmB;AAC3C,wBACE;AAAI,MAAA,SAAS,EAAEC,eAAMF,MAArB;AAA6B,MAAA,GAAG,EAAG,UAASC,KAAM,EAAlD;AAAqD,mBAAY,UAASA,KAAM;AAAhF,oBACE,6BAAC,cAAD,EAAWD,MAAX,CADF,CADF;AAKD,GANa,CAAd;AAQA,sBAAO;AAAI,kBAAYJ;AAAhB,KAAmCE,KAAnC,CAAP;AACD,CAdD;;AAgBA,MAAMK,qBAAqB,GAAGC,KAAK,IAAI;AACrC,QAAM;AACJC,IAAAA,MADI;AAEJC,IAAAA,eAFI;AAGJX,IAAAA,OAHI;AAIJE,IAAAA,aAJI;AAKJ,0BAAsBD;AALlB,MAMFQ,KANJ;AAQA,QAAM;AAACG,IAAAA,OAAD;AAAUC,IAAAA,KAAV;AAAiBC,IAAAA,QAAQ,GAAG,KAA5B;AAAmC,kBAAcC;AAAjD,MAA8DJ,eAApE;AACA,QAAMK,UAAU,GAAGjB,eAAe,CAACC,OAAD,EAAUC,gBAAV,EAA4BC,aAA5B,CAAlC;AACA,QAAMe,WAAW,GAAG;AAClBC,IAAAA,IAAI,EAAE,WADY;AAElBL,IAAAA,KAFkB;AAGlB,kBAAcE,SAHI;AAIlB,iBAAc,mBAJI;AAKlBI,IAAAA,IAAI,EAAE;AACJC,MAAAA,QAAQ,EAAE,OADN;AAEJF,MAAAA,IAAI,EAAE;AAFF,KALY;AASlBN,IAAAA,OATkB;AAUlBE,IAAAA;AAVkB,GAApB;AAaA,sBACE;AAAK,IAAA,SAAS,EAAEP,eAAMc;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEd,eAAMe;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEf,eAAMgB;AAAtB,kBACE,6BAAC,mBAAD,EAAgBN,WAAhB,CADF,CADF,eAIE;AAAK,IAAA,SAAS,EAAEV,eAAMG;AAAtB,kBACE,6BAAC,oBAAD,eAAYA,MAAZ;AAAoB,IAAA,KAAK,EAAC;AAA1B,KADF,CAJF,CADF,eASE;AAAK,IAAA,SAAS,EAAEH,eAAMiB;AAAtB,KAAwCR,UAAxC,CATF,CADF;AAaD,CArCD;;AAuCAR,qBAAqB,CAACiB,SAAtB,2CAAkC;AAChCd,EAAAA,eAAe,EAAEe,mBAAUC,KAAV,CAAgB;AAC/Bd,IAAAA,KAAK,EAAEa,mBAAUE,MADc;AAE/BhB,IAAAA,OAAO,EAAEc,mBAAUG,IAFY;AAG/Bf,IAAAA,QAAQ,EAAEY,mBAAUI,IAHW;AAI/B,kBAAcJ,mBAAUE;AAJO,GAAhB,CADe;AAOhClB,EAAAA,MAAM,EAAEgB,mBAAUC,KAAV,CAAgBI,qBAAOL,SAAvB,CAPwB;AAQhC1B,EAAAA,OAAO,EAAE0B,mBAAUM,OAAV,CAAkBN,mBAAUC,KAAV,CAAgBM,eAAMR,SAAtB,CAAlB,CARuB;AAShC,wBAAsBC,mBAAUE,MATA;AAUhC1B,EAAAA,aAAa,EAAEwB,mBAAUC,KAAV,CAAgB;AAC7BO,IAAAA,YAAY,EAAER,mBAAUE,MADK;AAE7BO,IAAAA,aAAa,EAAET,mBAAUE;AAFI,GAAhB;AAViB,CAAlC;eAgBepB,qB","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty} from 'lodash/fp';\nimport EmptySearchResult from '../../atom/empty-search-result';\nimport Search from '../../atom/input-search';\nimport ButtonLink from '../../atom/button-link';\nimport Chips from '../../atom/chips';\nimport style from './style.css';\n\nconst buildResultView = (results, resultsAriaLabel, emptyMessages) => {\n  if (isEmpty(results)) {\n    return <EmptySearchResult {...emptyMessages} />;\n  }\n\n  const items = results.map((result, index) => {\n    return (\n      <li className={style.result} key={`result-${index}`} data-name={`result-${index}`}>\n        <Chips {...result} />\n      </li>\n    );\n  });\n\n  return <ul aria-label={resultsAriaLabel}>{items}</ul>;\n};\n\nconst SearchAndChipsResults = props => {\n  const {\n    search,\n    selectAllButton,\n    results,\n    emptyMessages,\n    'results-aria-label': resultsAriaLabel\n  } = props;\n\n  const {onClick, label, disabled = false, 'aria-label': ariaLabel} = selectAllButton;\n  const resultView = buildResultView(results, resultsAriaLabel, emptyMessages);\n  const buttonProps = {\n    type: 'secondary',\n    label,\n    'aria-label': ariaLabel,\n    'data-name': `select-all-button`,\n    icon: {\n      position: 'right',\n      type: 'add'\n    },\n    onClick,\n    disabled\n  };\n\n  return (\n    <div className={style.container}>\n      <div className={style.header}>\n        <div className={style.button}>\n          <ButtonLink {...buttonProps} />\n        </div>\n        <div className={style.search}>\n          <Search {...search} theme=\"coorpmanager\" />\n        </div>\n      </div>\n      <div className={style.resultContainer}>{resultView}</div>\n    </div>\n  );\n};\n\nSearchAndChipsResults.propTypes = {\n  selectAllButton: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func,\n    disabled: PropTypes.bool,\n    'aria-label': PropTypes.string\n  }),\n  search: PropTypes.shape(Search.PropTypes),\n  results: PropTypes.arrayOf(PropTypes.shape(Chips.propTypes)),\n  'results-aria-label': PropTypes.string,\n  emptyMessages: PropTypes.shape({\n    firstMessage: PropTypes.string,\n    secondMessage: PropTypes.string\n  })\n};\n\nexport default SearchAndChipsResults;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/organism/search-and-chips-results/index.js"],"names":["buildResultView","results","resultsAriaLabel","emptyMessages","isLoading","items","map","result","index","style","SearchAndChipsResults","props","search","selectAllButton","onClick","label","disabled","ariaLabel","resultView","buttonProps","type","icon","position","container","header","button","resultContainer","propTypes","PropTypes","shape","string","func","bool","Search","arrayOf","Chips","firstMessage","secondMessage"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty} from 'lodash/fp';\nimport EmptySearchResult from '../../atom/empty-search-result';\nimport Search from '../../atom/input-search';\nimport ButtonLink from '../../atom/button-link';\nimport Chips from '../../atom/chips';\nimport style from './style.css';\n\nconst buildResultView = (results, resultsAriaLabel, emptyMessages, isLoading) => {\n  if (!isLoading && isEmpty(results)) {\n    return <EmptySearchResult {...emptyMessages} />;\n  }\n\n  const items = results.map((result, index) => {\n    return (\n      <li className={style.result} key={`result-${index}`} data-name={`result-${index}`}>\n        <Chips {...result} />\n      </li>\n    );\n  });\n\n  return <ul aria-label={resultsAriaLabel}>{items}</ul>;\n};\n\nconst SearchAndChipsResults = props => {\n  const {\n    search,\n    selectAllButton,\n    results,\n    emptyMessages,\n    isLoading = false,\n    'results-aria-label': resultsAriaLabel\n  } = props;\n\n  const {onClick, label, disabled = false, 'aria-label': ariaLabel} = selectAllButton;\n  const resultView = buildResultView(results, resultsAriaLabel, emptyMessages, isLoading);\n  const buttonProps = {\n    type: 'secondary',\n    label,\n    'aria-label': ariaLabel,\n    'data-name': `select-all-button`,\n    icon: {\n      position: 'right',\n      type: 'add'\n    },\n    onClick,\n    disabled\n  };\n\n  return (\n    <div className={style.container}>\n      <div className={style.header}>\n        <div className={style.button}>\n          <ButtonLink {...buttonProps} />\n        </div>\n        <div className={style.search}>\n          <Search {...search} theme=\"coorpmanager\" />\n        </div>\n      </div>\n      <div className={style.resultContainer}>{resultView}</div>\n    </div>\n  );\n};\n\nSearchAndChipsResults.propTypes = {\n  selectAllButton: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func,\n    disabled: PropTypes.bool,\n    'aria-label': PropTypes.string\n  }),\n  isLoading: PropTypes.bool,\n  search: PropTypes.shape(Search.PropTypes),\n  results: PropTypes.arrayOf(PropTypes.shape(Chips.propTypes)),\n  'results-aria-label': PropTypes.string,\n  emptyMessages: PropTypes.shape({\n    firstMessage: PropTypes.string,\n    secondMessage: PropTypes.string\n  })\n};\n\nexport default SearchAndChipsResults;\n"],"file":"index.js"}

package/lib/organism/search-and-chips-results/test/fixtures/default.js

@@ -8,6 +8,7 @@ var _default = {
       label: 'Select All',
       onClick: () => console.log('Select All')
     },
+    isLoading: false,
     search: {
       title: 'Search...',
       placeholder: 'Search...',

package/lib/organism/search-and-chips-results/test/fixtures/default.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/organism/search-and-chips-results/test/fixtures/default.js"],"names":["props","selectAllButton","label","onClick","console","log","search","title","placeholder","value","description","onChange","results","text","information"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,eAAe,EAAE;AACfC,MAAAA,KAAK,EAAE,YADQ;AAEfC,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,YAAZ;AAFA,KADZ;AAKLC,IAAAA,MAAM,EAAE;AACNC,MAAAA,KAAK,EAAE,WADD;AAENC,MAAAA,WAAW,EAAE,WAFP;AAGNC,MAAAA,KAAK,EAAE,EAHD;AAINC,MAAAA,WAAW,EAAE,gCAJP;AAKNC,MAAAA,QAAQ,EAAEF,KAAK,IAAIL,OAAO,CAACC,GAAR,CAAYI,KAAZ;AALb,KALH;AAYL,0BAAsB,oBAZjB;AAaLG,IAAAA,OAAO,EAAE,CACP;AACEC,MAAAA,IAAI,EAAE,8CADR;AAEEC,MAAAA,WAAW,EAAE,aAFf;AAGEX,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,oDAAZ;AAHjB,KADO,EAMP;AACEQ,MAAAA,IAAI,EAAE,cADR;AAEEC,MAAAA,WAAW,EAAE,WAFf;AAGEX,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,oBAAZ;AAHjB,KANO,EAWP;AACEQ,MAAAA,IAAI,EAAE,GADR;AAEEC,MAAAA,WAAW,EAAE,KAFf;AAGEX,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,SAAZ;AAHjB,KAXO,EAgBP;AACEQ,MAAAA,IAAI,EAAE,gDADR;AAEEC,MAAAA,WAAW,EAAE,UAFf;AAGEX,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,sDAAZ;AAHjB,KAhBO,EAqBP;AACEQ,MAAAA,IAAI,EAAE,cADR;AAEEC,MAAAA,WAAW,EAAE,cAFf;AAGEX,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,oBAAZ;AAHjB,KArBO,EA0BP;AACEQ,MAAAA,IAAI,EAAE,oCADR;AAEEC,MAAAA,WAAW,EAAE,WAFf;AAGEX,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,0CAAZ;AAHjB,KA1BO,EA+BP;AACEQ,MAAAA,IAAI,EAAE,sBADR;AAEEC,MAAAA,WAAW,EAAE,YAFf;AAGEX,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,4BAAZ;AAHjB,KA/BO;AAbJ;AADM,C","sourcesContent":["export default {\n  props: {\n    selectAllButton: {\n      label: 'Select All',\n      onClick: () => console.log('Select All')\n    },\n    search: {\n      title: 'Search...',\n      placeholder: 'Search...',\n      value: '',\n      description: 'Type to filter the populations',\n      onChange: value => console.log(value)\n    },\n    'results-aria-label': 'Population results',\n    results: [\n      {\n        text: 'Population Human resourses filiale Singapour',\n        information: '15739 users',\n        onClick: () => console.log('click Population Human resourses filiale Singapour')\n      },\n      {\n        text: 'Population 1',\n        information: '345 users',\n        onClick: () => console.log('click Population 1')\n      },\n      {\n        text: 'P',\n        information: '1 p',\n        onClick: () => console.log('click P')\n      },\n      {\n        text: 'Population managed by othes RH in some country',\n        information: '10 users',\n        onClick: () => console.log('click Population managed by othes RH in some country')\n      },\n      {\n        text: 'Population 4',\n        information: '106728 users',\n        onClick: () => console.log('click Population 4')\n      },\n      {\n        text: 'Population a long with a long name',\n        information: '105 users',\n        onClick: () => console.log('click Population a long with a long name')\n      },\n      {\n        text: 'Result bit that long',\n        information: '1067 users',\n        onClick: () => console.log('click Result bit that long')\n      }\n    ]\n  }\n};\n"],"file":"default.js"}
+{"version":3,"sources":["../../../../../src/organism/search-and-chips-results/test/fixtures/default.js"],"names":["props","selectAllButton","label","onClick","console","log","isLoading","search","title","placeholder","value","description","onChange","results","text","information"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,eAAe,EAAE;AACfC,MAAAA,KAAK,EAAE,YADQ;AAEfC,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,YAAZ;AAFA,KADZ;AAKLC,IAAAA,SAAS,EAAE,KALN;AAMLC,IAAAA,MAAM,EAAE;AACNC,MAAAA,KAAK,EAAE,WADD;AAENC,MAAAA,WAAW,EAAE,WAFP;AAGNC,MAAAA,KAAK,EAAE,EAHD;AAINC,MAAAA,WAAW,EAAE,gCAJP;AAKNC,MAAAA,QAAQ,EAAEF,KAAK,IAAIN,OAAO,CAACC,GAAR,CAAYK,KAAZ;AALb,KANH;AAaL,0BAAsB,oBAbjB;AAcLG,IAAAA,OAAO,EAAE,CACP;AACEC,MAAAA,IAAI,EAAE,8CADR;AAEEC,MAAAA,WAAW,EAAE,aAFf;AAGEZ,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,oDAAZ;AAHjB,KADO,EAMP;AACES,MAAAA,IAAI,EAAE,cADR;AAEEC,MAAAA,WAAW,EAAE,WAFf;AAGEZ,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,oBAAZ;AAHjB,KANO,EAWP;AACES,MAAAA,IAAI,EAAE,GADR;AAEEC,MAAAA,WAAW,EAAE,KAFf;AAGEZ,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,SAAZ;AAHjB,KAXO,EAgBP;AACES,MAAAA,IAAI,EAAE,gDADR;AAEEC,MAAAA,WAAW,EAAE,UAFf;AAGEZ,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,sDAAZ;AAHjB,KAhBO,EAqBP;AACES,MAAAA,IAAI,EAAE,cADR;AAEEC,MAAAA,WAAW,EAAE,cAFf;AAGEZ,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,oBAAZ;AAHjB,KArBO,EA0BP;AACES,MAAAA,IAAI,EAAE,oCADR;AAEEC,MAAAA,WAAW,EAAE,WAFf;AAGEZ,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,0CAAZ;AAHjB,KA1BO,EA+BP;AACES,MAAAA,IAAI,EAAE,sBADR;AAEEC,MAAAA,WAAW,EAAE,YAFf;AAGEZ,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,4BAAZ;AAHjB,KA/BO;AAdJ;AADM,C","sourcesContent":["export default {\n  props: {\n    selectAllButton: {\n      label: 'Select All',\n      onClick: () => console.log('Select All')\n    },\n    isLoading: false,\n    search: {\n      title: 'Search...',\n      placeholder: 'Search...',\n      value: '',\n      description: 'Type to filter the populations',\n      onChange: value => console.log(value)\n    },\n    'results-aria-label': 'Population results',\n    results: [\n      {\n        text: 'Population Human resourses filiale Singapour',\n        information: '15739 users',\n        onClick: () => console.log('click Population Human resourses filiale Singapour')\n      },\n      {\n        text: 'Population 1',\n        information: '345 users',\n        onClick: () => console.log('click Population 1')\n      },\n      {\n        text: 'P',\n        information: '1 p',\n        onClick: () => console.log('click P')\n      },\n      {\n        text: 'Population managed by othes RH in some country',\n        information: '10 users',\n        onClick: () => console.log('click Population managed by othes RH in some country')\n      },\n      {\n        text: 'Population 4',\n        information: '106728 users',\n        onClick: () => console.log('click Population 4')\n      },\n      {\n        text: 'Population a long with a long name',\n        information: '105 users',\n        onClick: () => console.log('click Population a long with a long name')\n      },\n      {\n        text: 'Result bit that long',\n        information: '1067 users',\n        onClick: () => console.log('click Result bit that long')\n      }\n    ]\n  }\n};\n"],"file":"default.js"}

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

@@ -129,7 +129,9 @@ const WizardContents = props => {
     previousStep
   } = props;
   const headerView = buildHeader(wizardHeader, steps);
-  const formView = buildForm(content);
+  const formView = buildForm(_extends(_extends({}, content), {}, {
+    isLoading
+  }));
   const rightActionView = buildActionZone(previousStep, nextStep, 'right');
   const footerActionView = buildActionZone(previousStep, nextStep, 'footer');
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -139,9 +141,11 @@ const WizardContents = props => {
     className: _style.default.leftSection
   }, headerView, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.form
-  }, isLoading ? /*#__PURE__*/_react.default.createElement(_loader.default, {
+  }, isLoading ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.loader
+  }, /*#__PURE__*/_react.default.createElement(_loader.default, {
     theme: "coorpmanager"
-  }) : formView)), /*#__PURE__*/_react.default.createElement("div", {
+  })) : formView)), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.rightSection,
     "data-name": "summary-right-section"
   }, /*#__PURE__*/_react.default.createElement("div", {

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

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

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

@@ -8,6 +8,7 @@
   align-items: stretch;
   justify-content: flex-start;
   flex-wrap: wrap;
+  height: 100%;
 }
 
 .leftSection {
@@ -24,6 +25,7 @@
   display: flex;
   flex-direction: column;
   flex: 0 1 320px;
+  height: 100%;
 }
 
 .stickySection {
@@ -32,7 +34,18 @@
   z-index: 1;
   bottom: 0;
   right: 64px;
-  width: 300px;
+  width: 320px;
+  height: 82%;
+  border-radius: 7px;
+  height: 86%;
+  display: flex;
+  flex-direction: column;
+}
+
+.loader {
+  position: relative;
+  min-height: 50vh;
+  width: 100%;
 }
 
 .header {
@@ -56,6 +69,9 @@
   width: 100%;
   position: relative;
   min-height: 500px;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
   justify-content: space-between;
 }
 
@@ -72,6 +88,7 @@
 
 .footer {
   width: 100%;
+  height: 100%;
   bottom: 0px;
   display: none;
   position: inherit;
@@ -93,6 +110,7 @@
     bottom: 10px;
     position: sticky;
     z-index: 1;
+    min-height: 600px;
   }
   .footer::before {
     content: '';
@@ -107,6 +125,7 @@
 
   .summaryFooter {
     width: 57%;
+    height: 100%;
   }
 
   .actionFooter {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "10.3.21-alpha.3+c760dfd31",
+  "version": "10.3.24-alpha.0+dcbeb9427",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -50,7 +50,7 @@
     "Soualmi Djamel <djamel.soualmi@coorpacademy.com>"
   ],
   "dependencies": {
-    "@coorpacademy/nova-icons": "3.9.34",
+    "@coorpacademy/nova-icons": "3.9.35",
     "autoprefixer": "^9.8.0",
     "classnames": "^2.2.6",
     "css-color-function": "^1.3.3",
@@ -119,5 +119,5 @@
     "webpack-hot-middleware": "^2.25.0"
   },
   "author": "CoorpAcademy",
-  "gitHead": "c760dfd31019596df3951969dc59a2819a1d42e3"
+  "gitHead": "dcbeb9427c17e693fddca6679aa555c18bbbd4d2"
 }