@coorpacademy/components 10.5.3 → 10.5.7-alpha.3

package/es/molecule/questions/qcm-graphic/style.css

@@ -2,9 +2,9 @@
 @value mobile from breakpoints;
 @value colors: "../../../variables/colors.css";
 @value white from colors;
-@value xtraLightGrey from colors;
-@value light from colors;
-@value black from colors;
+@value cm_grey_75 from colors;
+@value cm_primary_blue from colors;
+@value cm_blue_900 from colors;
 
 .wrapper {
   display: flex;
@@ -15,16 +15,33 @@
 }
 
 .answer {
-  color: black;
+  position: relative;
+  color: cm_blue_900;
   background-color: white;
-  border: 1px solid color(black lightness(85%));
-  border-radius: 3px;
   box-sizing: border-box;
   cursor: pointer;
   padding: 8px;
   width: 200px;
   min-height: 245px;
   margin: 0 4px 8px;
+  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12);
+  border-radius: 16px;
+}
+
+.background {
+  top: 0;
+  left: 0;
+  position: absolute;
+  border-radius: 16px;
+  height: 100%;
+  width: 100%;
+  transition: opacity 0.25s linear, background-color 0.25s linear;
+}
+
+.content {
+  height: 100%;
+  width: 100%;
+  position: relative;
 }
 
 .imageWrapper {
@@ -33,12 +50,21 @@
   align-items: center;
   height: 110px;
   margin-bottom: 16px;
-  background-size: contain;
+  background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
+  border-radius: 12px;
 }
 
 .titleWrapper {
+  display: flex;
+  height: calc(100% - 126px);
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.title {
   font-family: 'Gilroy';
   font-size: 17px;
   line-height: 20px;
@@ -49,18 +75,36 @@
 }
 
 .answer:hover {
-  background-color: xtraLightGrey;
+  background: cm_grey_75;
+  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12);
+}
+
+.answer .background{
+  opacity: 0;
+}
+
+.answer:hover .background{
+  opacity: 1;
 }
 
 .selected {
   composes: answer;
-  color: white;
+  color: cm_primary_blue;
+}
+
+.selected .background{
+  opacity: 0.05;
+}
+
+.selected:hover .background{
+  opacity: 0.1;
 }
 
 @media mobile {
   .wrapper {
     flex-direction: column;
-    align-items: stretch;
+    display: flex;
+    align-items: center;
     width: 100%;
     padding-bottom: 0;
   }
@@ -69,17 +113,18 @@
     display: flex;
     align-items: center;
     flex-flow: row nowrap;
-    width: 100%;
+    width: calc(100% - 45px);
     min-height: 82px;
     height: inherit;
     margin: 0 0 8px;
     overflow: hidden;
   }
 
-  .answer:hover {
-    background-color: white;
+  .content {
+    display: flex;
+    align-items: center;
   }
-
+  
   .answer:last-child {
     margin-bottom: 0;
   }
@@ -96,7 +141,7 @@
     white-space: wrap;
     overflow: hidden;
     padding: 0;
-    text-align: left;
+    justify-content: left;
     font-size: 15px;
   }
 }

package/es/molecule/questions/qcm-graphic/test/qcm-graphic.js

@@ -0,0 +1,65 @@
+import _identity from "lodash/fp/identity";
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import browserEnv from 'browser-env';
+import test from 'ava';
+import React from 'react';
+import { shallow, configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import QCMImage from '..';
+import defaultFixture from './fixtures/default';
+browserEnv();
+configure({
+  adapter: new Adapter()
+});
+const translate = _identity;
+test('onClick should be reachable, should match given aria-label', t => {
+  let answerWasClicked = false;
+  defaultFixture.props.answers[1] = _extends(_extends({}, defaultFixture.props.answers[1]), {}, {
+    onClick: () => {
+      answerWasClicked = true;
+    }
+  });
+  const wrapper = shallow( /*#__PURE__*/React.createElement(QCMImage, defaultFixture.props), {
+    context: {
+      translate
+    }
+  });
+  const answersImages = wrapper.find('[data-name="answerImage"]');
+  t.true(answersImages.at(1).exists());
+  t.is(answersImages.at(1).props()['aria-label'], 'Lorem ipsum');
+  const answers = wrapper.find('[data-name="answerGraphic"]');
+  answers.at(1).simulate('click');
+  t.true(answerWasClicked);
+  t.pass();
+});
+test("should set: selected's background to Primary w/ alpha 5% && color to primary, unselected's no background && color to a nuance of primary", t => {
+  const wrapper = shallow( /*#__PURE__*/React.createElement(QCMImage, defaultFixture.props), {
+    context: {
+      translate
+    }
+  });
+  const answers = wrapper.find('[data-name="answerGraphic"]');
+  const firstAnswer = answers.at(0);
+  t.true(firstAnswer.exists());
+  t.deepEqual(firstAnswer.props().style, {});
+  const unselectedBackgroundAnswer = firstAnswer.children().at(0);
+  t.true(unselectedBackgroundAnswer.exists());
+  t.deepEqual(unselectedBackgroundAnswer.props().style, {
+    backgroundColor: '#F4F4F5'
+  });
+  const firstAnswerText = firstAnswer.children().at(1).children().at(1).children().at(0);
+  t.true(firstAnswerText.exists());
+  const thirdAnswer = answers.at(2);
+  t.true(thirdAnswer.exists());
+  t.deepEqual(thirdAnswer.props().style, {
+    boxShadow: '0 4px 16px rgba(0, 122, 179, 0.25)'
+  });
+  const selectedBackgroundAnswer = thirdAnswer.children().at(0);
+  t.true(selectedBackgroundAnswer.exists());
+  t.deepEqual(selectedBackgroundAnswer.props().style, {
+    backgroundColor: '#00B0FF'
+  });
+});
+//# sourceMappingURL=qcm-graphic.js.map

package/es/molecule/questions/qcm-graphic/test/qcm-graphic.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/questions/qcm-graphic/test/qcm-graphic.js"],"names":["browserEnv","test","React","shallow","configure","Adapter","QCMImage","defaultFixture","adapter","translate","t","answerWasClicked","props","answers","onClick","wrapper","context","answersImages","find","true","at","exists","is","simulate","pass","firstAnswer","deepEqual","style","unselectedBackgroundAnswer","children","backgroundColor","firstAnswerText","thirdAnswer","boxShadow","selectedBackgroundAnswer"],"mappings":"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","sourcesContent":["import browserEnv from 'browser-env';\nimport test from 'ava';\nimport React from 'react';\nimport {shallow, configure} from 'enzyme';\nimport {identity} from 'lodash/fp';\nimport Adapter from 'enzyme-adapter-react-16';\nimport QCMImage from '..';\nimport defaultFixture from './fixtures/default';\n\nbrowserEnv();\nconfigure({adapter: new Adapter()});\nconst translate = identity;\n\ntest('onClick should be reachable, should match given aria-label', t => {\n  let answerWasClicked = false;\n  defaultFixture.props.answers[1] = {\n    ...defaultFixture.props.answers[1],\n    onClick: () => {\n      answerWasClicked = true;\n    }\n  };\n\n  const wrapper = shallow(<QCMImage {...defaultFixture.props} />, {\n    context: {translate}\n  });\n\n  const answersImages = wrapper.find('[data-name=\"answerImage\"]');\n  t.true(answersImages.at(1).exists());\n  t.is(answersImages.at(1).props()['aria-label'], 'Lorem ipsum');\n\n  const answers = wrapper.find('[data-name=\"answerGraphic\"]');\n  answers.at(1).simulate('click');\n  t.true(answerWasClicked);\n  t.pass();\n});\n\ntest(\"should set: selected's background to Primary w/ alpha 5% && color to primary, unselected's no background && color to a nuance of primary\", t => {\n  const wrapper = shallow(<QCMImage {...defaultFixture.props} />, {\n    context: {translate}\n  });\n  const answers = wrapper.find('[data-name=\"answerGraphic\"]');\n\n  const firstAnswer = answers.at(0);\n  t.true(firstAnswer.exists());\n  t.deepEqual(firstAnswer.props().style, {});\n  const unselectedBackgroundAnswer = firstAnswer.children().at(0);\n  t.true(unselectedBackgroundAnswer.exists());\n  t.deepEqual(unselectedBackgroundAnswer.props().style, {backgroundColor: '#F4F4F5'});\n  const firstAnswerText = firstAnswer.children().at(1).children().at(1).children().at(0);\n  t.true(firstAnswerText.exists());\n\n  const thirdAnswer = answers.at(2);\n  t.true(thirdAnswer.exists());\n  t.deepEqual(thirdAnswer.props().style, {boxShadow: '0 4px 16px rgba(0, 122, 179, 0.25)'});\n  const selectedBackgroundAnswer = thirdAnswer.children().at(0);\n  t.true(selectedBackgroundAnswer.exists());\n  t.deepEqual(selectedBackgroundAnswer.props().style, {backgroundColor: '#00B0FF'});\n});\n"],"file":"qcm-graphic.js"}

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

@@ -352,6 +352,7 @@
 
 .coorpmanager .descriptionLabel {
   margin: 0 1px 18px 0;
+  padding: 8px 16px;
   border-radius: 7px;
   background-color: cm_grey_700;
   flex-grow: 0;
@@ -365,14 +366,16 @@
   text-align: center;
   color: white;
   padding: 8px 16px;
-  max-width: 200px;
-  position: absolute;
-  left: -20px;
-  z-index: 999;
-  bottom: 18px;
+  max-width: 348px;
   width: max-content;
+  position: absolute;
+  left: -24px;
+  z-index: 3;
+  bottom: 5px;
   visibility: hidden;
   opacity: 0;
+  overflow-wrap: break-word;
+  white-space: break-spaces;
 }
 
 .coorpmanager .title.titleWithSelection .descriptionLabel,

package/es/molecule/setup-section/style.css

@@ -14,6 +14,7 @@
   justify-content: space-between;
   padding: 0 24px 0 48px;
   box-sizing: border-box;
+  border-radius: 7px;
 }
 
 .title {

package/es/molecule/setup-sections/index.js

@@ -1,8 +1,6 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-import React, { useState, useCallback } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import Draggable from '../draggable';
+import DraggableList from '../draggable-list';
 import SetupSection from '../setup-section';
 import Loader from '../../atom/loader';
 import style from './style.css';
@@ -16,36 +14,12 @@ const SetupSections = ({
   loading,
   onDrop
 }) => {
-  const [dragTo, setDragTo] = useState(null);
-  const [dragFrom, setDragFrom] = useState(null);
-  const dragStartHandler = useCallback(id => {
-    setDragFrom(id);
-  }, [setDragFrom]);
-  const dragOverHandler = useCallback(id => {
-    if (dragTo === id) return;
-    setDragTo(id);
-  }, [dragTo, setDragTo]);
-  const dragLeaveHandler = useCallback(id => {
-    setDragTo(null);
-  }, [setDragTo]);
-  const dropHandler = useCallback(id => {
-    if (onDrop && dragFrom) onDrop(dragFrom, id);
-    setDragTo(null);
-    setDragFrom(null);
-  }, [onDrop, setDragTo, setDragFrom, dragFrom]);
   if (loading) return /*#__PURE__*/React.createElement(Loading, null);
-  const sectionsView = sections.map(section => /*#__PURE__*/React.createElement(Draggable, {
-    key: section.id,
-    id: section.id,
-    dragging: dragTo === section.id,
-    onDragStart: dragStartHandler,
-    onDragOver: dragOverHandler,
-    onDragLeave: dragLeaveHandler,
-    onDrop: dropHandler
-  }, /*#__PURE__*/React.createElement(SetupSection, _extends({}, section, {
-    key: section.id
-  }))));
-  return /*#__PURE__*/React.createElement("div", null, sectionsView);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DraggableList, {
+    itemType: "setup-section",
+    items: sections,
+    onDrop: onDrop
+  }));
 };
 
 SetupSections.propTypes = process.env.NODE_ENV !== "production" ? {

package/es/molecule/setup-sections/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/molecule/setup-sections/index.js"],"names":["React","useState","useCallback","PropTypes","Draggable","SetupSection","Loader","style","Loading","loading","SetupSections","sections","onDrop","dragTo","setDragTo","dragFrom","setDragFrom","dragStartHandler","id","dragOverHandler","dragLeaveHandler","dropHandler","sectionsView","map","section","propTypes","arrayOf","shape","bool","func"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,QAAf,EAAyBC,WAAzB,QAA2C,OAA3C;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,SAAP,MAAsB,cAAtB;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,OAAO,GAAG,mBACd;AAAK,EAAA,SAAS,EAAED,KAAK,CAACE;AAAtB,gBACE,oBAAC,MAAD,OADF,CADF;;AAMA,MAAMC,aAAa,GAAG,CAAC;AAACC,EAAAA,QAAD;AAAWF,EAAAA,OAAX;AAAoBG,EAAAA;AAApB,CAAD,KAAiC;AACrD,QAAM,CAACC,MAAD,EAASC,SAAT,IAAsBb,QAAQ,CAAC,IAAD,CAApC;AACA,QAAM,CAACc,QAAD,EAAWC,WAAX,IAA0Bf,QAAQ,CAAC,IAAD,CAAxC;AAEA,QAAMgB,gBAAgB,GAAGf,WAAW,CAClCgB,EAAE,IAAI;AACJF,IAAAA,WAAW,CAACE,EAAD,CAAX;AACD,GAHiC,EAIlC,CAACF,WAAD,CAJkC,CAApC;AAOA,QAAMG,eAAe,GAAGjB,WAAW,CACjCgB,EAAE,IAAI;AACJ,QAAIL,MAAM,KAAKK,EAAf,EAAmB;AACnBJ,IAAAA,SAAS,CAACI,EAAD,CAAT;AACD,GAJgC,EAKjC,CAACL,MAAD,EAASC,SAAT,CALiC,CAAnC;AAQA,QAAMM,gBAAgB,GAAGlB,WAAW,CAClCgB,EAAE,IAAI;AACJJ,IAAAA,SAAS,CAAC,IAAD,CAAT;AACD,GAHiC,EAIlC,CAACA,SAAD,CAJkC,CAApC;AAOA,QAAMO,WAAW,GAAGnB,WAAW,CAC7BgB,EAAE,IAAI;AACJ,QAAIN,MAAM,IAAIG,QAAd,EAAwBH,MAAM,CAACG,QAAD,EAAWG,EAAX,CAAN;AAExBJ,IAAAA,SAAS,CAAC,IAAD,CAAT;AACAE,IAAAA,WAAW,CAAC,IAAD,CAAX;AACD,GAN4B,EAO7B,CAACJ,MAAD,EAASE,SAAT,EAAoBE,WAApB,EAAiCD,QAAjC,CAP6B,CAA/B;AAUA,MAAIN,OAAJ,EAAa,oBAAO,oBAAC,OAAD,OAAP;AAEb,QAAMa,YAAY,GAAGX,QAAQ,CAACY,GAAT,CAAaC,OAAO,iBACvC,oBAAC,SAAD;AACE,IAAA,GAAG,EAAEA,OAAO,CAACN,EADf;AAEE,IAAA,EAAE,EAAEM,OAAO,CAACN,EAFd;AAGE,IAAA,QAAQ,EAAEL,MAAM,KAAKW,OAAO,CAACN,EAH/B;AAIE,IAAA,WAAW,EAAED,gBAJf;AAKE,IAAA,UAAU,EAAEE,eALd;AAME,IAAA,WAAW,EAAEC,gBANf;AAOE,IAAA,MAAM,EAAEC;AAPV,kBASE,oBAAC,YAAD,eAAkBG,OAAlB;AAA2B,IAAA,GAAG,EAAEA,OAAO,CAACN;AAAxC,KATF,CADmB,CAArB;AAaA,sBAAO,iCAAMI,YAAN,CAAP;AACD,CApDD;;AAsDAZ,aAAa,CAACe,SAAd,2CAA0B;AACxBd,EAAAA,QAAQ,EAAER,SAAS,CAACuB,OAAV,CAAkBvB,SAAS,CAACwB,KAAV,CAAgBtB,YAAY,CAACoB,SAA7B,CAAlB,CADc;AAExBhB,EAAAA,OAAO,EAAEN,SAAS,CAACyB,IAFK;AAGxBhB,EAAAA,MAAM,EAAET,SAAS,CAAC0B;AAHM,CAA1B;AAMA,eAAenB,aAAf","sourcesContent":["import React, {useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport Draggable from '../draggable';\nimport SetupSection from '../setup-section';\nimport Loader from '../../atom/loader';\nimport style from './style.css';\n\nconst Loading = () => (\n  <div className={style.loading}>\n    <Loader />\n  </div>\n);\n\nconst SetupSections = ({sections, loading, onDrop}) => {\n  const [dragTo, setDragTo] = useState(null);\n  const [dragFrom, setDragFrom] = useState(null);\n\n  const dragStartHandler = useCallback(\n    id => {\n      setDragFrom(id);\n    },\n    [setDragFrom]\n  );\n\n  const dragOverHandler = useCallback(\n    id => {\n      if (dragTo === id) return;\n      setDragTo(id);\n    },\n    [dragTo, setDragTo]\n  );\n\n  const dragLeaveHandler = useCallback(\n    id => {\n      setDragTo(null);\n    },\n    [setDragTo]\n  );\n\n  const dropHandler = useCallback(\n    id => {\n      if (onDrop && dragFrom) onDrop(dragFrom, id);\n\n      setDragTo(null);\n      setDragFrom(null);\n    },\n    [onDrop, setDragTo, setDragFrom, dragFrom]\n  );\n\n  if (loading) return <Loading />;\n\n  const sectionsView = sections.map(section => (\n    <Draggable\n      key={section.id}\n      id={section.id}\n      dragging={dragTo === section.id}\n      onDragStart={dragStartHandler}\n      onDragOver={dragOverHandler}\n      onDragLeave={dragLeaveHandler}\n      onDrop={dropHandler}\n    >\n      <SetupSection {...section} key={section.id} />\n    </Draggable>\n  ));\n  return <div>{sectionsView}</div>;\n};\n\nSetupSections.propTypes = {\n  sections: PropTypes.arrayOf(PropTypes.shape(SetupSection.propTypes)),\n  loading: PropTypes.bool,\n  onDrop: PropTypes.func\n};\n\nexport default SetupSections;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/molecule/setup-sections/index.js"],"names":["React","PropTypes","DraggableList","SetupSection","Loader","style","Loading","loading","SetupSections","sections","onDrop","propTypes","arrayOf","shape","bool","func"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,aAAP,MAA0B,mBAA1B;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,OAAO,GAAG,mBACd;AAAK,EAAA,SAAS,EAAED,KAAK,CAACE;AAAtB,gBACE,oBAAC,MAAD,OADF,CADF;;AAMA,MAAMC,aAAa,GAAG,CAAC;AAACC,EAAAA,QAAD;AAAWF,EAAAA,OAAX;AAAoBG,EAAAA;AAApB,CAAD,KAAiC;AACrD,MAAIH,OAAJ,EAAa,oBAAO,oBAAC,OAAD,OAAP;AAEb,sBACE,8CACE,oBAAC,aAAD;AAAe,IAAA,QAAQ,EAAC,eAAxB;AAAwC,IAAA,KAAK,EAAEE,QAA/C;AAAyD,IAAA,MAAM,EAAEC;AAAjE,IADF,CADF;AAKD,CARD;;AAUAF,aAAa,CAACG,SAAd,2CAA0B;AACxBF,EAAAA,QAAQ,EAAER,SAAS,CAACW,OAAV,CAAkBX,SAAS,CAACY,KAAV,CAAgBV,YAAY,CAACQ,SAA7B,CAAlB,CADc;AAExBJ,EAAAA,OAAO,EAAEN,SAAS,CAACa,IAFK;AAGxBJ,EAAAA,MAAM,EAAET,SAAS,CAACc;AAHM,CAA1B;AAMA,eAAeP,aAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport DraggableList from '../draggable-list';\nimport SetupSection from '../setup-section';\nimport Loader from '../../atom/loader';\nimport style from './style.css';\n\nconst Loading = () => (\n  <div className={style.loading}>\n    <Loader />\n  </div>\n);\n\nconst SetupSections = ({sections, loading, onDrop}) => {\n  if (loading) return <Loading />;\n\n  return (\n    <div>\n      <DraggableList itemType=\"setup-section\" items={sections} onDrop={onDrop} />\n    </div>\n  );\n};\n\nSetupSections.propTypes = {\n  sections: PropTypes.arrayOf(PropTypes.shape(SetupSection.propTypes)),\n  loading: PropTypes.bool,\n  onDrop: PropTypes.func\n};\n\nexport default SetupSections;\n"],"file":"index.js"}

package/es/molecule/wizard-summary/test/fixtures/organize-courses.js

@@ -0,0 +1,106 @@
+export default {
+  props: {
+    title: 'Certification summary',
+    sections: [{
+      items: [{
+        type: 'mainElement',
+        title: 'Language',
+        value: '🇬🇧 English'
+      }, {
+        type: 'mainElement',
+        title: 'Name',
+        value: 'Marketing expert'
+      }]
+    }, {
+      title: 'Translation',
+      items: [{
+        type: 'text',
+        text: '🇫🇷 French'
+      }, {
+        type: 'text',
+        text: '🇪🇸 Spanish'
+      }, {
+        type: 'text',
+        text: '🇮🇹 Italian'
+      }]
+    }, {
+      title: 'Populations',
+      items: [{
+        type: 'text',
+        text: 'Population 2'
+      }],
+      counterText: '1 population'
+    }, {
+      title: 'Courses',
+      items: [{
+        type: 'content',
+        title: 'Marketing and online advertising Marketing and online advertising Marketing and online advertising Marketing and online advertising',
+        author: 'Author',
+        category: 'course',
+        label: 'Course'
+      }, {
+        type: 'content',
+        title: 'Social networks',
+        author: 'Author',
+        category: 'chapter',
+        label: "5' learning"
+      }, {
+        type: 'content',
+        title: 'Other title',
+        author: 'Author 2',
+        category: 'course',
+        label: 'Course'
+      }, {
+        type: 'content',
+        title: 'Social others',
+        author: 'Author XXX',
+        category: 'chapter',
+        label: "5' learning"
+      }, {
+        type: 'content',
+        title: 'Social others others',
+        author: 'Author XXX',
+        label: "5' learning",
+        category: 'chapter'
+      }, {
+        type: 'content',
+        title: 'Something about empowerment',
+        author: 'Author XXX',
+        label: 'course',
+        category: 'course'
+      }, {
+        type: 'content',
+        title: 'Be a better human being',
+        author: 'Author XXX',
+        label: "5' learning",
+        category: 'chapter'
+      }, {
+        type: 'content',
+        title: 'Stronger faster better',
+        author: 'Author XXX',
+        label: 'course',
+        category: 'course'
+      }, {
+        type: 'content',
+        title: 'Relativity beyond time',
+        author: 'Author XXX',
+        label: 'course',
+        category: 'course'
+      }, {
+        type: 'content',
+        title: 'Are you awake?',
+        author: 'Author XXX',
+        label: "5' learning",
+        category: 'chapter'
+      }],
+      counterText: '12 courses'
+    }],
+    action: {
+      icon: 'save',
+      text: 'Save in drafts',
+      'aria-label': 'Save in drafts',
+      onClick: () => console.log('save')
+    }
+  }
+};
+//# sourceMappingURL=organize-courses.js.map

package/es/molecule/wizard-summary/test/fixtures/organize-courses.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/wizard-summary/test/fixtures/organize-courses.js"],"names":["props","title","sections","items","type","value","text","counterText","author","category","label","action","icon","onClick","console","log"],"mappings":"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","sourcesContent":["export default {\n  props: {\n    title: 'Certification summary',\n    sections: [\n      {\n        items: [\n          {\n            type: 'mainElement',\n            title: 'Language',\n            value: '🇬🇧 English'\n          },\n          {\n            type: 'mainElement',\n            title: 'Name',\n            value: 'Marketing expert'\n          }\n        ]\n      },\n      {\n        title: 'Translation',\n        items: [\n          {\n            type: 'text',\n            text: '🇫🇷 French'\n          },\n          {\n            type: 'text',\n            text: '🇪🇸 Spanish'\n          },\n          {\n            type: 'text',\n            text: '🇮🇹 Italian'\n          }\n        ]\n      },\n      {\n        title: 'Populations',\n        items: [\n          {\n            type: 'text',\n            text: 'Population 2'\n          }\n        ],\n        counterText: '1 population'\n      },\n      {\n        title: 'Courses',\n        items: [\n          {\n            type: 'content',\n            title:\n              'Marketing and online advertising Marketing and online advertising Marketing and online advertising Marketing and online advertising',\n            author: 'Author',\n            category: 'course',\n            label: 'Course'\n          },\n          {\n            type: 'content',\n            title: 'Social networks',\n            author: 'Author',\n            category: 'chapter',\n            label: \"5' learning\"\n          },\n          {\n            type: 'content',\n            title: 'Other title',\n            author: 'Author 2',\n            category: 'course',\n            label: 'Course'\n          },\n          {\n            type: 'content',\n            title: 'Social others',\n            author: 'Author XXX',\n            category: 'chapter',\n            label: \"5' learning\"\n          },\n          {\n            type: 'content',\n            title: 'Social others others',\n            author: 'Author XXX',\n            label: \"5' learning\",\n            category: 'chapter'\n          },\n          {\n            type: 'content',\n            title: 'Something about empowerment',\n            author: 'Author XXX',\n            label: 'course',\n            category: 'course'\n          },\n          {\n            type: 'content',\n            title: 'Be a better human being',\n            author: 'Author XXX',\n            label: \"5' learning\",\n            category: 'chapter'\n          },\n          {\n            type: 'content',\n            title: 'Stronger faster better',\n            author: 'Author XXX',\n            label: 'course',\n            category: 'course'\n          },\n          {\n            type: 'content',\n            title: 'Relativity beyond time',\n            author: 'Author XXX',\n            label: 'course',\n            category: 'course'\n          },\n          {\n            type: 'content',\n            title: 'Are you awake?',\n            author: 'Author XXX',\n            label: \"5' learning\",\n            category: 'chapter'\n          }\n        ],\n        counterText: '12 courses'\n      }\n    ],\n    action: {\n      icon: 'save',\n      text: 'Save in drafts',\n      'aria-label': 'Save in drafts',\n      onClick: () => console.log('save')\n    }\n  }\n};\n"],"file":"organize-courses.js"}

package/es/organism/brand-form/test/fixtures/wizard-playlists.js

@@ -5,7 +5,7 @@ export default {
         type: 'selectMultiple',
         title: 'Languages',
         placeholder: 'Language selection',
-        description: 'This is the tooltip text',
+        description: 'The name and description of your custom playlist will be displayed in the selected language. Only the selected language will be saved. You can translate during step 2 "Translations".',
         theme: 'coorpmanager',
         hint: '15 / 30 characters',
         size: 'default',

package/es/organism/brand-form/test/fixtures/wizard-playlists.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/organism/brand-form/test/fixtures/wizard-playlists.js"],"names":["props","groups","fields","type","title","placeholder","description","theme","hint","size","options","name","value","selected","multiple"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAE,CACN;AACEC,MAAAA,MAAM,EAAE,CACN;AACEC,QAAAA,IAAI,EAAE,gBADR;AAEEC,QAAAA,KAAK,EAAE,WAFT;AAGEC,QAAAA,WAAW,EAAE,oBAHf;AAIEC,QAAAA,WAAW,EAAE,0BAJf;AAKEC,QAAAA,KAAK,EAAE,cALT;AAMEC,QAAAA,IAAI,EAAE,oBANR;AAOEC,QAAAA,IAAI,EAAE,SAPR;AAQEC,QAAAA,OAAO,EAAE,CACP;AACEC,UAAAA,IAAI,EAAE,cADR;AAEEC,UAAAA,KAAK,EAAE,IAFT;AAGEC,UAAAA,QAAQ,EAAE;AAHZ,SADO,EAMP;AACEF,UAAAA,IAAI,EAAE,aADR;AAEEC,UAAAA,KAAK,EAAE,IAFT;AAGEC,UAAAA,QAAQ,EAAE;AAHZ,SANO,EAWP;AACEF,UAAAA,IAAI,EAAE,WADR;AAEEC,UAAAA,KAAK,EAAE,IAFT;AAGEC,UAAAA,QAAQ,EAAE;AAHZ,SAXO,EAgBP;AACEF,UAAAA,IAAI,EAAE,cADR;AAEEC,UAAAA,KAAK,EAAE,IAFT;AAGEC,UAAAA,QAAQ,EAAE;AAHZ,SAhBO,CARX;AA8BEC,QAAAA,QAAQ,EAAE;AA9BZ,OADM,EAiCN;AACEX,QAAAA,IAAI,EAAE,MADR;AAEEC,QAAAA,KAAK,EAAE,eAFT;AAGEC,QAAAA,WAAW,EAAE,eAHf;AAIEC,QAAAA,WAAW,EAAE,0BAJf;AAKEC,QAAAA,KAAK,EAAE,cALT;AAMEC,QAAAA,IAAI,EAAE,oBANR;AAOEI,QAAAA,KAAK,EAAE,kBAPT;AAQEH,QAAAA,IAAI,EAAE;AARR,OAjCM,EA2CN;AACEN,QAAAA,IAAI,EAAE,UADR;AAEEC,QAAAA,KAAK,EAAE,aAFT;AAGEC,QAAAA,WAAW,EAAE,aAHf;AAIEC,QAAAA,WAAW,EAAE,0BAJf;AAKEC,QAAAA,KAAK,EAAE,cALT;AAMEC,QAAAA,IAAI,EAAE,qBANR;AAOEC,QAAAA,IAAI,EAAE,QAPR;AAQEG,QAAAA,KAAK,EACH;AATJ,OA3CM;AADV,KADM;AADH;AADM,CAAf","sourcesContent":["export default {\n  props: {\n    groups: [\n      {\n        fields: [\n          {\n            type: 'selectMultiple',\n            title: 'Languages',\n            placeholder: 'Language selection',\n            description: 'This is the tooltip text',\n            theme: 'coorpmanager',\n            hint: '15 / 30 characters',\n            size: 'default',\n            options: [\n              {\n                name: '🇬🇧 English',\n                value: 'en',\n                selected: true\n              },\n              {\n                name: '🇩🇪 German',\n                value: 'de',\n                selected: false\n              },\n              {\n                name: '🇹🇭 Thai',\n                value: 'th',\n                selected: false\n              },\n              {\n                name: '🇪🇸 Spanish',\n                value: 'es',\n                selected: false\n              }\n            ],\n            multiple: false\n          },\n          {\n            type: 'text',\n            title: 'Playlist name',\n            placeholder: 'Playlist name',\n            description: 'This is the tooltip text',\n            theme: 'coorpmanager',\n            hint: '15 / 30 characters',\n            value: 'Marketing expert',\n            size: 'default'\n          },\n          {\n            type: 'textarea',\n            title: 'Description',\n            placeholder: 'Description',\n            description: 'This is the tooltip text',\n            theme: 'coorpmanager',\n            hint: '80 / 200 characters',\n            size: 'medium',\n            value:\n              'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum sem ac fermentum luctus. Integer eu dui magna. Donec ut tristique dui. Vestibulum non accumsan tellus. Donec luctus erat vitae aliquet viverra. Mauris malesuada tortor quis viverra vestibulum. Nullam laoreet porta massa vitae porta.'\n          }\n        ]\n      }\n    ]\n  }\n};\n"],"file":"wizard-playlists.js"}
+{"version":3,"sources":["../../../../../src/organism/brand-form/test/fixtures/wizard-playlists.js"],"names":["props","groups","fields","type","title","placeholder","description","theme","hint","size","options","name","value","selected","multiple"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAE,CACN;AACEC,MAAAA,MAAM,EAAE,CACN;AACEC,QAAAA,IAAI,EAAE,gBADR;AAEEC,QAAAA,KAAK,EAAE,WAFT;AAGEC,QAAAA,WAAW,EAAE,oBAHf;AAIEC,QAAAA,WAAW,EACT,wLALJ;AAMEC,QAAAA,KAAK,EAAE,cANT;AAOEC,QAAAA,IAAI,EAAE,oBAPR;AAQEC,QAAAA,IAAI,EAAE,SARR;AASEC,QAAAA,OAAO,EAAE,CACP;AACEC,UAAAA,IAAI,EAAE,cADR;AAEEC,UAAAA,KAAK,EAAE,IAFT;AAGEC,UAAAA,QAAQ,EAAE;AAHZ,SADO,EAMP;AACEF,UAAAA,IAAI,EAAE,aADR;AAEEC,UAAAA,KAAK,EAAE,IAFT;AAGEC,UAAAA,QAAQ,EAAE;AAHZ,SANO,EAWP;AACEF,UAAAA,IAAI,EAAE,WADR;AAEEC,UAAAA,KAAK,EAAE,IAFT;AAGEC,UAAAA,QAAQ,EAAE;AAHZ,SAXO,EAgBP;AACEF,UAAAA,IAAI,EAAE,cADR;AAEEC,UAAAA,KAAK,EAAE,IAFT;AAGEC,UAAAA,QAAQ,EAAE;AAHZ,SAhBO,CATX;AA+BEC,QAAAA,QAAQ,EAAE;AA/BZ,OADM,EAkCN;AACEX,QAAAA,IAAI,EAAE,MADR;AAEEC,QAAAA,KAAK,EAAE,eAFT;AAGEC,QAAAA,WAAW,EAAE,eAHf;AAIEC,QAAAA,WAAW,EAAE,0BAJf;AAKEC,QAAAA,KAAK,EAAE,cALT;AAMEC,QAAAA,IAAI,EAAE,oBANR;AAOEI,QAAAA,KAAK,EAAE,kBAPT;AAQEH,QAAAA,IAAI,EAAE;AARR,OAlCM,EA4CN;AACEN,QAAAA,IAAI,EAAE,UADR;AAEEC,QAAAA,KAAK,EAAE,aAFT;AAGEC,QAAAA,WAAW,EAAE,aAHf;AAIEC,QAAAA,WAAW,EAAE,0BAJf;AAKEC,QAAAA,KAAK,EAAE,cALT;AAMEC,QAAAA,IAAI,EAAE,qBANR;AAOEC,QAAAA,IAAI,EAAE,QAPR;AAQEG,QAAAA,KAAK,EACH;AATJ,OA5CM;AADV,KADM;AADH;AADM,CAAf","sourcesContent":["export default {\n  props: {\n    groups: [\n      {\n        fields: [\n          {\n            type: 'selectMultiple',\n            title: 'Languages',\n            placeholder: 'Language selection',\n            description:\n              'The name and description of your custom playlist will be displayed in the selected language. Only the selected language will be saved. You can translate during step 2 \"Translations\".',\n            theme: 'coorpmanager',\n            hint: '15 / 30 characters',\n            size: 'default',\n            options: [\n              {\n                name: '🇬🇧 English',\n                value: 'en',\n                selected: true\n              },\n              {\n                name: '🇩🇪 German',\n                value: 'de',\n                selected: false\n              },\n              {\n                name: '🇹🇭 Thai',\n                value: 'th',\n                selected: false\n              },\n              {\n                name: '🇪🇸 Spanish',\n                value: 'es',\n                selected: false\n              }\n            ],\n            multiple: false\n          },\n          {\n            type: 'text',\n            title: 'Playlist name',\n            placeholder: 'Playlist name',\n            description: 'This is the tooltip text',\n            theme: 'coorpmanager',\n            hint: '15 / 30 characters',\n            value: 'Marketing expert',\n            size: 'default'\n          },\n          {\n            type: 'textarea',\n            title: 'Description',\n            placeholder: 'Description',\n            description: 'This is the tooltip text',\n            theme: 'coorpmanager',\n            hint: '80 / 200 characters',\n            size: 'medium',\n            value:\n              'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum sem ac fermentum luctus. Integer eu dui magna. Donec ut tristique dui. Vestibulum non accumsan tellus. Donec luctus erat vitae aliquet viverra. Mauris malesuada tortor quis viverra vestibulum. Nullam laoreet porta massa vitae porta.'\n          }\n        ]\n      }\n    ]\n  }\n};\n"],"file":"wizard-playlists.js"}

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

@@ -11,6 +11,7 @@ import BrandForm from '../brand-form';
 import ContentTranslate from '../content-translation';
 import OrganismSearchAndChipsResults from '../search-and-chips-results';
 import CourseSelection from '../course-selection';
+import CourseSections from '../../molecule/course-sections';
 import style from './style.css';
 
 const buildHeader = (wizardHeader, steps) => {
@@ -52,6 +53,9 @@ const buildForm = content => {
 
     case 'courses':
       return /*#__PURE__*/React.createElement(CourseSelection, content);
+
+    case 'organize-courses':
+      return /*#__PURE__*/React.createElement(CourseSections, content);
   }
 };
 
@@ -159,6 +163,8 @@ WizardContents.propTypes = process.env.NODE_ENV !== "production" ? {
     type: PropTypes.oneOf(['populations'])
   })), PropTypes.shape(_extends(_extends({}, CourseSelection.propTypes), {}, {
     type: PropTypes.oneOf(['courses'])
+  })), PropTypes.shape(_extends(_extends({}, CourseSections.propTypes), {}, {
+    type: PropTypes.oneOf(['organize-courses'])
   }))]),
   previousStep: PropTypes.shape({
     label: PropTypes.string,

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","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 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}>{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","CourseSections","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 CourseSections from '../../molecule/course-sections';\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    case 'organize-courses':\n      return <CourseSections {...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}>{formView}</div>\n      </div>\n      <div className={style.rightSection} data-name=\"summary-right-section\">\n        <div className={style.stickySection}>\n          <div className={style.summaryZone} data-name=\"summary-zone\">\n            <WizardSummary {...summary} side={'right'} />\n          </div>\n          {rightActionView}\n        </div>\n      </div>\n      <div className={style.footer} data-name=\"summary-footer-section\">\n        <div className={style.summaryFooter}>\n          <WizardSummary {...summary} side={'footer'} />\n        </div>\n        <div className={style.actionFooter}>{footerActionView}</div>\n      </div>\n    </div>\n  );\n};\n\nWizardContents.propTypes = {\n  isLoading: PropTypes.bool,\n  wizardHeader: PropTypes.shape({\n    title: PropTypes.string,\n    onClick: PropTypes.func\n  }).isRequired,\n  steps: WizardSteps.propTypes.steps,\n  summary: PropTypes.shape({\n    ...WizardSummary.propTypes\n  }).isRequired,\n  content: PropTypes.oneOfType([\n    PropTypes.shape({\n      ...BrandForm.propTypes,\n      type: PropTypes.oneOf(['form'])\n    }),\n    PropTypes.shape({\n      ...ContentTranslate.propTypes,\n      type: PropTypes.oneOf(['translate'])\n    }),\n    PropTypes.shape({\n      ...OrganismSearchAndChipsResults.propTypes,\n      type: PropTypes.oneOf(['populations'])\n    }),\n    PropTypes.shape({\n      ...CourseSelection.propTypes,\n      type: PropTypes.oneOf(['courses'])\n    }),\n    PropTypes.shape({\n      ...CourseSections.propTypes,\n      type: PropTypes.oneOf(['organize-courses'])\n    })\n  ]),\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/test/fixtures/playlist-organize-courses.js

@@ -0,0 +1,45 @@
+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); }
+
+/* eslint-disable no-console */
+import wizardSummaryOrganizeCourses from '../../../../molecule/wizard-summary/test/fixtures/organize-courses';
+import organizeCoursesForm from '../../../../molecule/course-sections/test/fixtures/default';
+export default {
+  props: {
+    isLoading: false,
+    wizardHeader: {
+      title: 'Create a new custom playlist',
+      onClick: () => console.log('Close')
+    },
+    steps: [{
+      title: 'General Informations',
+      done: true
+    }, {
+      title: 'Translations',
+      done: true
+    }, {
+      title: 'Assign populations',
+      done: true
+    }, {
+      title: 'Add courses',
+      done: true
+    }, {
+      title: 'Organize courses',
+      done: false,
+      current: true
+    }],
+    summary: wizardSummaryOrganizeCourses.props,
+    content: _extends(_extends({}, organizeCoursesForm.props), {}, {
+      type: 'organize-courses'
+    }),
+    previousStep: {
+      label: 'Previous Step',
+      onClick: () => console.log('Previous Step')
+    },
+    nextStep: {
+      type: 'publish',
+      label: 'Publish',
+      onClick: () => console.log('Next Step')
+    }
+  }
+};
+//# sourceMappingURL=playlist-organize-courses.js.map

package/es/organism/wizard-contents/test/fixtures/playlist-organize-courses.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/organism/wizard-contents/test/fixtures/playlist-organize-courses.js"],"names":["wizardSummaryOrganizeCourses","organizeCoursesForm","props","isLoading","wizardHeader","title","onClick","console","log","steps","done","current","summary","content","type","previousStep","label","nextStep"],"mappings":";;AAAA;AACA,OAAOA,4BAAP,MAAyC,oEAAzC;AACA,OAAOC,mBAAP,MAAgC,4DAAhC;AAEA,eAAe;AACbC,EAAAA,KAAK,EAAE;AACLC,IAAAA,SAAS,EAAE,KADN;AAELC,IAAAA,YAAY,EAAE;AACZC,MAAAA,KAAK,EAAE,8BADK;AAEZC,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,OAAZ;AAFH,KAFT;AAMLC,IAAAA,KAAK,EAAE,CACL;AACEJ,MAAAA,KAAK,EAAE,sBADT;AAEEK,MAAAA,IAAI,EAAE;AAFR,KADK,EAKL;AACEL,MAAAA,KAAK,EAAE,cADT;AAEEK,MAAAA,IAAI,EAAE;AAFR,KALK,EASL;AACEL,MAAAA,KAAK,EAAE,oBADT;AAEEK,MAAAA,IAAI,EAAE;AAFR,KATK,EAaL;AACEL,MAAAA,KAAK,EAAE,aADT;AAEEK,MAAAA,IAAI,EAAE;AAFR,KAbK,EAiBL;AACEL,MAAAA,KAAK,EAAE,kBADT;AAEEK,MAAAA,IAAI,EAAE,KAFR;AAGEC,MAAAA,OAAO,EAAE;AAHX,KAjBK,CANF;AA6BLC,IAAAA,OAAO,EAAEZ,4BAA4B,CAACE,KA7BjC;AA8BLW,IAAAA,OAAO,wBACFZ,mBAAmB,CAACC,KADlB;AAELY,MAAAA,IAAI,EAAE;AAFD,MA9BF;AAkCLC,IAAAA,YAAY,EAAE;AACZC,MAAAA,KAAK,EAAE,eADK;AAEZV,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,eAAZ;AAFH,KAlCT;AAsCLS,IAAAA,QAAQ,EAAE;AACRH,MAAAA,IAAI,EAAE,SADE;AAERE,MAAAA,KAAK,EAAE,SAFC;AAGRV,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,WAAZ;AAHP;AAtCL;AADM,CAAf","sourcesContent":["/* eslint-disable no-console */\nimport wizardSummaryOrganizeCourses from '../../../../molecule/wizard-summary/test/fixtures/organize-courses';\nimport organizeCoursesForm from '../../../../molecule/course-sections/test/fixtures/default';\n\nexport default {\n  props: {\n    isLoading: false,\n    wizardHeader: {\n      title: 'Create a new custom playlist',\n      onClick: () => console.log('Close')\n    },\n    steps: [\n      {\n        title: 'General Informations',\n        done: true\n      },\n      {\n        title: 'Translations',\n        done: true\n      },\n      {\n        title: 'Assign populations',\n        done: true\n      },\n      {\n        title: 'Add courses',\n        done: true\n      },\n      {\n        title: 'Organize courses',\n        done: false,\n        current: true\n      }\n    ],\n    summary: wizardSummaryOrganizeCourses.props,\n    content: {\n      ...organizeCoursesForm.props,\n      type: 'organize-courses'\n    },\n    previousStep: {\n      label: 'Previous Step',\n      onClick: () => console.log('Previous Step')\n    },\n    nextStep: {\n      type: 'publish',\n      label: 'Publish',\n      onClick: () => console.log('Next Step')\n    }\n  }\n};\n"],"file":"playlist-organize-courses.js"}