@coorpacademy/components 10.5.7-alpha.6.5 → 10.5.7-alpha.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (109) hide show
  1. package/es/atom/select/index.js +38 -20
  2. package/es/atom/select/index.js.map +1 -1
  3. package/es/atom/select/style.css +154 -42
  4. package/es/atom/select/test/fixtures/player.js +11 -0
  5. package/es/atom/select/test/fixtures/player.js.map +1 -0
  6. package/es/atom/select/test/fixtures.js +2 -0
  7. package/es/atom/select/test/fixtures.js.map +1 -1
  8. package/es/atom/select/test/select.js +49 -0
  9. package/es/atom/select/test/select.js.map +1 -0
  10. package/es/molecule/course-sections/test/fixtures.js +15 -0
  11. package/es/molecule/course-sections/test/fixtures.js.map +1 -0
  12. package/es/molecule/draggable-list/test/fixtures.js +15 -0
  13. package/es/molecule/draggable-list/test/fixtures.js.map +1 -0
  14. package/es/molecule/questions/drop-down/index.js +1 -6
  15. package/es/molecule/questions/drop-down/index.js.map +1 -1
  16. package/es/molecule/questions/free-text/index.js +35 -15
  17. package/es/molecule/questions/free-text/index.js.map +1 -1
  18. package/es/molecule/questions/free-text/style.css +39 -15
  19. package/es/molecule/questions/free-text/test/fixtures/default.js +1 -1
  20. package/es/molecule/questions/free-text/test/fixtures/default.js.map +1 -1
  21. package/es/molecule/questions/free-text/test/fixtures/with-value-on-change.js +9 -0
  22. package/es/molecule/questions/free-text/test/fixtures/with-value-on-change.js.map +1 -0
  23. package/es/molecule/questions/free-text/test/fixtures/{with-default-value.js → with-value.js} +2 -2
  24. package/es/molecule/questions/free-text/test/fixtures/with-value.js.map +1 -0
  25. package/es/molecule/questions/free-text/test/fixtures.js +4 -2
  26. package/es/molecule/questions/free-text/test/fixtures.js.map +1 -1
  27. package/es/molecule/questions/free-text/test/free-text.js +106 -0
  28. package/es/molecule/questions/free-text/test/free-text.js.map +1 -0
  29. package/es/molecule/questions/qcm/style.css +4 -0
  30. package/es/molecule/questions/qcm-drag/index.js +53 -21
  31. package/es/molecule/questions/qcm-drag/index.js.map +1 -1
  32. package/es/molecule/questions/qcm-drag/style.css +73 -22
  33. package/es/molecule/questions/qcm-graphic/index.js +1 -0
  34. package/es/molecule/questions/qcm-graphic/index.js.map +1 -1
  35. package/es/molecule/questions/qcm-graphic/style.css +12 -0
  36. package/es/molecule/questions/qcm-graphic/test/fixtures/default.js +1 -1
  37. package/es/molecule/questions/qcm-graphic/test/fixtures/default.js.map +1 -1
  38. package/es/molecule/questions/qcm-graphic/test/fixtures/no-selected.js +1 -1
  39. package/es/molecule/questions/qcm-graphic/test/fixtures/no-selected.js.map +1 -1
  40. package/es/molecule/questions/qcm-graphic/test/qcm-graphic.js +1 -1
  41. package/es/molecule/questions/qcm-graphic/test/qcm-graphic.js.map +1 -1
  42. package/es/molecule/questions/template/index.js +13 -10
  43. package/es/molecule/questions/template/index.js.map +1 -1
  44. package/es/molecule/wizard-summary/test/fixtures.js +2 -0
  45. package/es/molecule/wizard-summary/test/fixtures.js.map +1 -1
  46. package/es/organism/wizard-contents/test/fixtures.js +2 -0
  47. package/es/organism/wizard-contents/test/fixtures.js.map +1 -1
  48. package/es/template/back-office/brand-update/test/fixtures.js +2 -0
  49. package/es/template/back-office/brand-update/test/fixtures.js.map +1 -1
  50. package/lib/atom/select/index.js +40 -17
  51. package/lib/atom/select/index.js.map +1 -1
  52. package/lib/atom/select/style.css +154 -42
  53. package/lib/atom/select/test/fixtures/player.js +21 -0
  54. package/lib/atom/select/test/fixtures/player.js.map +1 -0
  55. package/lib/atom/select/test/fixtures.js +3 -0
  56. package/lib/atom/select/test/fixtures.js.map +1 -1
  57. package/lib/atom/select/test/select.js +62 -0
  58. package/lib/atom/select/test/select.js.map +1 -0
  59. package/lib/molecule/course-sections/test/fixtures.js +25 -0
  60. package/lib/molecule/course-sections/test/fixtures.js.map +1 -0
  61. package/lib/molecule/draggable-list/test/fixtures.js +25 -0
  62. package/lib/molecule/draggable-list/test/fixtures.js.map +1 -0
  63. package/lib/molecule/questions/drop-down/index.js +1 -5
  64. package/lib/molecule/questions/drop-down/index.js.map +1 -1
  65. package/lib/molecule/questions/free-text/index.js +32 -14
  66. package/lib/molecule/questions/free-text/index.js.map +1 -1
  67. package/lib/molecule/questions/free-text/style.css +39 -15
  68. package/lib/molecule/questions/free-text/test/fixtures/default.js +1 -1
  69. package/lib/molecule/questions/free-text/test/fixtures/default.js.map +1 -1
  70. package/lib/molecule/questions/free-text/test/fixtures/with-value-on-change.js +14 -0
  71. package/lib/molecule/questions/free-text/test/fixtures/with-value-on-change.js.map +1 -0
  72. package/lib/molecule/questions/free-text/test/fixtures/{with-default-value.js → with-value.js} +2 -2
  73. package/lib/molecule/questions/free-text/test/fixtures/with-value.js.map +1 -0
  74. package/lib/molecule/questions/free-text/test/fixtures.js +5 -2
  75. package/lib/molecule/questions/free-text/test/fixtures.js.map +1 -1
  76. package/lib/molecule/questions/free-text/test/free-text.js +119 -0
  77. package/lib/molecule/questions/free-text/test/free-text.js.map +1 -0
  78. package/lib/molecule/questions/qcm/style.css +4 -0
  79. package/lib/molecule/questions/qcm-drag/index.js +53 -21
  80. package/lib/molecule/questions/qcm-drag/index.js.map +1 -1
  81. package/lib/molecule/questions/qcm-drag/style.css +73 -22
  82. package/lib/molecule/questions/qcm-graphic/index.js +1 -0
  83. package/lib/molecule/questions/qcm-graphic/index.js.map +1 -1
  84. package/lib/molecule/questions/qcm-graphic/style.css +12 -0
  85. package/lib/molecule/questions/qcm-graphic/test/fixtures/default.js +1 -1
  86. package/lib/molecule/questions/qcm-graphic/test/fixtures/default.js.map +1 -1
  87. package/lib/molecule/questions/qcm-graphic/test/fixtures/no-selected.js +1 -1
  88. package/lib/molecule/questions/qcm-graphic/test/fixtures/no-selected.js.map +1 -1
  89. package/lib/molecule/questions/qcm-graphic/test/qcm-graphic.js +1 -1
  90. package/lib/molecule/questions/qcm-graphic/test/qcm-graphic.js.map +1 -1
  91. package/lib/molecule/questions/template/index.js +13 -10
  92. package/lib/molecule/questions/template/index.js.map +1 -1
  93. package/lib/molecule/wizard-summary/test/fixtures.js +3 -0
  94. package/lib/molecule/wizard-summary/test/fixtures.js.map +1 -1
  95. package/lib/organism/wizard-contents/test/fixtures.js +3 -0
  96. package/lib/organism/wizard-contents/test/fixtures.js.map +1 -1
  97. package/lib/template/back-office/brand-update/test/fixtures.js +3 -0
  98. package/lib/template/back-office/brand-update/test/fixtures.js.map +1 -1
  99. package/package.json +2 -2
  100. package/es/molecule/cockpit-popin/test/fixtures.js +0 -17
  101. package/es/molecule/cockpit-popin/test/fixtures.js.map +0 -1
  102. package/es/molecule/questions/free-text/test/fixtures/with-default-value.js.map +0 -1
  103. package/es/molecule/search/test/fixtures.js +0 -15
  104. package/es/molecule/search/test/fixtures.js.map +0 -1
  105. package/lib/molecule/cockpit-popin/test/fixtures.js +0 -28
  106. package/lib/molecule/cockpit-popin/test/fixtures.js.map +0 -1
  107. package/lib/molecule/questions/free-text/test/fixtures/with-default-value.js.map +0 -1
  108. package/lib/molecule/search/test/fixtures.js +0 -25
  109. package/lib/molecule/search/test/fixtures.js.map +0 -1
@@ -3,6 +3,8 @@
3
3
  exports.__esModule = true;
4
4
  exports.default = void 0;
5
5
 
6
+ var _getOr2 = _interopRequireDefault(require("lodash/fp/getOr"));
7
+
6
8
  var _orderBy2 = _interopRequireDefault(require("lodash/fp/orderBy"));
7
9
 
8
10
  var _filter2 = _interopRequireDefault(require("lodash/fp/filter"));
@@ -19,6 +21,8 @@ var _provider = _interopRequireDefault(require("../../../atom/provider"));
19
21
 
20
22
  var _style = require("../../../atom/label/style.css");
21
23
 
24
+ var _getShadowBoxColorFromPrimary = require("../../../util/get-shadow-box-color-from-primary");
25
+
22
26
  var _style2 = _interopRequireDefault(require("./style.css"));
23
27
 
24
28
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -54,7 +58,7 @@ const Choices = ({
54
58
  selected
55
59
  } = answer;
56
60
  return /*#__PURE__*/_react.default.createElement("div", {
57
- className: (0, _classnames.default)(selected ? _style2.default.invisibleAnswer : _style2.default.answer, _style.innerHTML),
61
+ className: (0, _classnames.default)(selected ? _style2.default.invisibleAnswer : _style2.default.unselected, _style.innerHTML),
58
62
  "data-name": "answer",
59
63
  onClick: onClick,
60
64
  key: key // eslint-disable-next-line react/no-danger
@@ -65,7 +69,7 @@ const Choices = ({
65
69
  });
66
70
  });
67
71
  return /*#__PURE__*/_react.default.createElement("div", {
68
- className: _style2.default.qcmDrag
72
+ className: _style2.default.choices
69
73
  }, answersViews);
70
74
  };
71
75
 
@@ -73,9 +77,10 @@ Choices.propTypes = process.env.NODE_ENV !== "production" ? {
73
77
  answers: AnswersPropTypes
74
78
  } : {};
75
79
 
76
- const SelectionBox = ({
80
+ const SelectedAnswerSections = ({
77
81
  answers,
78
- help
82
+ help,
83
+ backgroundColor
79
84
  }) => {
80
85
  const selectedAnswers = (0, _pipe2.default)((0, _filter2.default)('selected'), (0, _orderBy2.default)('order', 'asc'))(answers);
81
86
  const selectedAnswersViews = selectedAnswers.map((answer, key) => {
@@ -84,15 +89,31 @@ const SelectionBox = ({
84
89
  title
85
90
  } = answer;
86
91
  return /*#__PURE__*/_react.default.createElement("div", {
87
- className: (0, _classnames.default)(_style2.default.selectedAnswer, _style.innerHTML),
88
92
  "data-selected": "true",
89
93
  onClick: onClick,
90
- key: key // eslint-disable-next-line react/no-danger
94
+ key: key,
95
+ "data-name": "selectedAnswer",
96
+ className: _style2.default.selected,
97
+ style: {
98
+ boxShadow: `0px 4px 16px ${(0, _getShadowBoxColorFromPrimary.getShadowBoxColorFromPrimary)(backgroundColor)}`
99
+ }
100
+ }, /*#__PURE__*/_react.default.createElement("div", {
101
+ "data-name": "answerBackground",
102
+ style: {
103
+ backgroundColor
104
+ },
105
+ className: _style2.default.background
106
+ }), /*#__PURE__*/_react.default.createElement("div", {
107
+ className: _style2.default.content
108
+ }, /*#__PURE__*/_react.default.createElement("span", {
109
+ "data-name": "answerContent",
110
+ className: (0, _classnames.default)(_style2.default.selectedAnswerText, _style.innerHTML),
111
+ title: title // eslint-disable-next-line react/no-danger
91
112
  ,
92
113
  dangerouslySetInnerHTML: {
93
114
  __html: title
94
115
  }
95
- });
116
+ })));
96
117
  });
97
118
 
98
119
  if (selectedAnswersViews.length > 0) {
@@ -108,30 +129,41 @@ const SelectionBox = ({
108
129
  }
109
130
  };
110
131
 
111
- SelectionBox.propTypes = process.env.NODE_ENV !== "production" ? {
132
+ SelectedAnswerSections.propTypes = process.env.NODE_ENV !== "production" ? {
112
133
  answers: AnswersPropTypes,
113
- help: EmptyView.propTypes.help
134
+ help: EmptyView.propTypes.help,
135
+ backgroundColor: _propTypes.default.string
114
136
  } : {};
115
137
 
116
138
  const QcmDrag = ({
117
139
  answers,
118
140
  help
119
- }, context) => /*#__PURE__*/_react.default.createElement("div", {
120
- className: _style2.default.qcmDrag
121
- }, /*#__PURE__*/_react.default.createElement(SelectionBox, {
122
- answers: answers,
123
- help: help
124
- }), /*#__PURE__*/_react.default.createElement("div", {
125
- "data-name": "qcm-drag-answers",
126
- className: _style2.default.answers
127
- }, /*#__PURE__*/_react.default.createElement(Choices, {
128
- answers: answers
129
- })));
141
+ }, context) => {
142
+ const {
143
+ skin
144
+ } = context;
145
+ const primarySkinColor = (0, _getOr2.default)('#00B0FF', 'common.primary', skin);
146
+ return /*#__PURE__*/_react.default.createElement("div", {
147
+ className: _style2.default.wrapper
148
+ }, /*#__PURE__*/_react.default.createElement(SelectedAnswerSections, {
149
+ answers: answers,
150
+ help: help,
151
+ backgroundColor: primarySkinColor
152
+ }), /*#__PURE__*/_react.default.createElement("div", {
153
+ "data-name": "qcm-drag-answers",
154
+ className: _style2.default.answers
155
+ }, /*#__PURE__*/_react.default.createElement(Choices, {
156
+ answers: answers
157
+ })));
158
+ };
130
159
 
131
160
  QcmDrag.propTypes = process.env.NODE_ENV !== "production" ? {
132
161
  answers: AnswersPropTypes,
133
- help: SelectionBox.propTypes.help
162
+ help: SelectedAnswerSections.propTypes.help
134
163
  } : {};
164
+ QcmDrag.contextTypes = {
165
+ skin: _provider.default.childContextTypes.skin
166
+ };
135
167
  var _default = QcmDrag;
136
168
  exports.default = _default;
137
169
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/molecule/questions/qcm-drag/index.js"],"names":["AnswersPropTypes","PropTypes","arrayOf","shape","onClick","func","order","number","selected","bool","title","string","help","EmptyView","style","emptySpan","contextTypes","translate","Provider","childContextTypes","propTypes","Choices","answers","answersViews","map","answer","key","invisibleAnswer","innerHTML","__html","qcmDrag","SelectionBox","selectedAnswers","selectedAnswersViews","selectedAnswer","length","emptyAnswers","QcmDrag","context"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {pipe, filter, orderBy} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider from '../../../atom/provider';\nimport {innerHTML} from '../../../atom/label/style.css';\nimport style from './style.css';\n\nconst AnswersPropTypes = PropTypes.arrayOf(\n PropTypes.shape({\n onClick: PropTypes.func,\n order: PropTypes.number,\n selected: PropTypes.bool,\n title: PropTypes.string,\n help: PropTypes.string\n })\n);\n\nconst EmptyView = ({help}) => <span className={style.emptySpan}>{help}</span>;\n\nEmptyView.contextTypes = {\n translate: Provider.childContextTypes.translate\n};\n\nEmptyView.propTypes = {\n help: PropTypes.string\n};\n\nconst Choices = ({answers}) => {\n const answersViews = answers.map((answer, key) => {\n const {onClick, title, selected} = answer;\n return (\n <div\n className={classnames(selected ? style.invisibleAnswer : style.answer, innerHTML)}\n data-name=\"answer\"\n onClick={onClick}\n key={key}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: title}}\n />\n );\n });\n\n return <div className={style.qcmDrag}>{answersViews}</div>;\n};\n\nChoices.propTypes = {\n answers: AnswersPropTypes\n};\n\nconst SelectionBox = ({answers, help}) => {\n const selectedAnswers = pipe(filter('selected'), orderBy('order', 'asc'))(answers);\n const selectedAnswersViews = selectedAnswers.map((answer, key) => {\n const {onClick, title} = answer;\n return (\n <div\n className={classnames(style.selectedAnswer, innerHTML)}\n data-selected=\"true\"\n onClick={onClick}\n key={key}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: title}}\n />\n );\n });\n\n if (selectedAnswersViews.length > 0) {\n return <div className={style.selectedAnswers}>{selectedAnswersViews}</div>;\n } else {\n return (\n <div className={style.emptyAnswers}>\n <EmptyView help={help} />\n </div>\n );\n }\n};\n\nSelectionBox.propTypes = {\n answers: AnswersPropTypes,\n help: EmptyView.propTypes.help\n};\n\nconst QcmDrag = ({answers, help}, context) => (\n <div className={style.qcmDrag}>\n <SelectionBox answers={answers} help={help} />\n <div data-name=\"qcm-drag-answers\" className={style.answers}>\n <Choices answers={answers} />\n </div>\n </div>\n);\n\nQcmDrag.propTypes = {\n answers: AnswersPropTypes,\n help: SelectionBox.propTypes.help\n};\n\nexport default QcmDrag;\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../../../../src/molecule/questions/qcm-drag/index.js"],"names":["AnswersPropTypes","PropTypes","arrayOf","shape","onClick","func","order","number","selected","bool","title","string","help","EmptyView","style","emptySpan","contextTypes","translate","Provider","childContextTypes","propTypes","Choices","answers","answersViews","map","answer","key","invisibleAnswer","unselected","innerHTML","__html","choices","SelectedAnswerSections","backgroundColor","selectedAnswers","selectedAnswersViews","boxShadow","background","content","selectedAnswerText","length","emptyAnswers","QcmDrag","context","skin","primarySkinColor","wrapper"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {pipe, filter, orderBy, getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider from '../../../atom/provider';\nimport {innerHTML} from '../../../atom/label/style.css';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst AnswersPropTypes = PropTypes.arrayOf(\n PropTypes.shape({\n onClick: PropTypes.func,\n order: PropTypes.number,\n selected: PropTypes.bool,\n title: PropTypes.string,\n help: PropTypes.string\n })\n);\n\nconst EmptyView = ({help}) => <span className={style.emptySpan}>{help}</span>;\n\nEmptyView.contextTypes = {\n translate: Provider.childContextTypes.translate\n};\n\nEmptyView.propTypes = {\n help: PropTypes.string\n};\n\nconst Choices = ({answers}) => {\n const answersViews = answers.map((answer, key) => {\n const {onClick, title, selected} = answer;\n return (\n <div\n className={classnames(selected ? style.invisibleAnswer : style.unselected, innerHTML)}\n data-name=\"answer\"\n onClick={onClick}\n key={key}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: title}}\n />\n );\n });\n\n return <div className={style.choices}>{answersViews}</div>;\n};\n\nChoices.propTypes = {\n answers: AnswersPropTypes\n};\n\nconst SelectedAnswerSections = ({answers, help, backgroundColor}) => {\n const selectedAnswers = pipe(filter('selected'), orderBy('order', 'asc'))(answers);\n const selectedAnswersViews = selectedAnswers.map((answer, key) => {\n const {onClick, title} = answer;\n return (\n <div\n data-selected=\"true\"\n onClick={onClick}\n key={key}\n data-name=\"selectedAnswer\"\n className={style.selected}\n style={{\n boxShadow: `0px 4px 16px ${getShadowBoxColorFromPrimary(backgroundColor)}`\n }}\n >\n <div\n data-name=\"answerBackground\"\n style={{\n backgroundColor\n }}\n className={style.background}\n />\n <div className={style.content}>\n <span\n data-name=\"answerContent\"\n className={classnames(style.selectedAnswerText, innerHTML)}\n title={title}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: title}}\n />\n </div>\n </div>\n );\n });\n\n if (selectedAnswersViews.length > 0) {\n return <div className={style.selectedAnswers}>{selectedAnswersViews}</div>;\n } else {\n return (\n <div className={style.emptyAnswers}>\n <EmptyView help={help} />\n </div>\n );\n }\n};\n\nSelectedAnswerSections.propTypes = {\n answers: AnswersPropTypes,\n help: EmptyView.propTypes.help,\n backgroundColor: PropTypes.string\n};\n\nconst QcmDrag = ({answers, help}, context) => {\n const {skin} = context;\n const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n return (\n <div className={style.wrapper}>\n <SelectedAnswerSections answers={answers} help={help} backgroundColor={primarySkinColor} />\n <div data-name=\"qcm-drag-answers\" className={style.answers}>\n <Choices answers={answers} />\n </div>\n </div>\n );\n};\n\nQcmDrag.propTypes = {\n answers: AnswersPropTypes,\n help: SelectedAnswerSections.propTypes.help\n};\n\nQcmDrag.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nexport default QcmDrag;\n"],"file":"index.js"}
@@ -7,6 +7,16 @@
7
7
  @value black from colors;
8
8
  @value medium from colors;
9
9
  @value dark from colors;
10
+ @value cm_grey_75 from colors;
11
+ @value cm_grey_150 from colors;
12
+ @value cm_blue_900 from colors;
13
+
14
+ .wrapper {
15
+ width: 100%;
16
+ display: flex;
17
+ flex-wrap: wrap;
18
+ flex-basis: auto;
19
+ }
10
20
 
11
21
  .answers {
12
22
  width: 100%;
@@ -19,17 +29,17 @@
19
29
  padding: 0 24px 0 0;
20
30
  }
21
31
 
22
- .qcmDrag {
32
+ .choices {
23
33
  width: 100%;
24
34
  display: flex;
35
+ justify-content: center;
25
36
  flex-wrap: wrap;
26
37
  flex-basis: auto;
27
38
  }
28
39
 
29
40
  .selectedAnswers {
30
41
  composes: answers;
31
- border: 2px dashed color(dark lightness(85%));
32
- background-color: xtraLightGrey;
42
+ border-bottom: 2px solid cm_grey_150;
33
43
  padding: 16px 8px 8px 16px;
34
44
  margin: 0 0 24px;
35
45
  }
@@ -49,32 +59,77 @@
49
59
  color: medium;
50
60
  }
51
61
 
52
- .answer {
62
+ .choice {
53
63
  font-family: 'Gilroy';
54
- font-size: 13px;
55
- font-weight: 600;
56
- color: black;
57
- line-height: 22px;
58
- background-color: white;
59
- border: 1px solid color(dark lightness(85%));
64
+ font-size: 14px;
65
+ font-weight: 700;
66
+ line-height: 20px;
60
67
  box-sizing: border-box;
61
- margin-right: 8px;
62
- margin-bottom: 8px;
63
- border-radius: 3px;
68
+ border-radius: 8px;
64
69
  padding: 13px 16px;
65
70
  cursor: pointer;
71
+ margin-bottom: 8px;
72
+ margin-right: 8px;
73
+ overflow: hidden;
74
+ hyphens: auto;
75
+ -ms-word-break: break-all;
76
+ word-break: break-all;
77
+ word-break: break-word;
78
+ }
79
+
80
+ .unselected {
81
+ composes: choice;
82
+ color: cm_blue_900;
83
+ line-height: 20px;
84
+ background-color: white;
85
+ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12);
66
86
  }
67
87
 
68
- .answer:hover {
69
- background-color: light;
88
+ .selected {
89
+ composes: choice;
90
+ position: relative;
91
+ border-radius: 8px;
70
92
  }
71
93
 
72
- .selectedAnswer {
73
- composes: answer;
94
+ .background {
95
+ top: 0;
96
+ left: 0;
97
+ position: absolute;
98
+ border-radius: 8px;
99
+ height: 100%;
100
+ width: 100%;
101
+ transition: opacity 0.25s linear, background-color 0.25s linear;
102
+ }
103
+
104
+ .selected .background{
105
+ opacity: 1;
106
+ }
107
+
108
+ .selected:hover {
109
+ background: black;
110
+ }
111
+
112
+ .selected:hover .background{
113
+ opacity: 0.8;
114
+ }
115
+
116
+ .content {
117
+ height: 100%;
118
+ width: 100%;
119
+ border-radius: 8px;
120
+ position: relative;
121
+ }
122
+
123
+ .unselected:hover {
124
+ background-color: cm_grey_75;
125
+ }
126
+
127
+ .selectedAnswerText {
128
+ color: white;
74
129
  }
75
130
 
76
131
  .invisibleAnswer {
77
- composes: answer;
132
+ composes: choice;
78
133
  display: none;
79
134
  }
80
135
 
@@ -82,8 +137,4 @@
82
137
  .selectedAnswers {
83
138
  min-height: auto;
84
139
  }
85
-
86
- .answer:hover {
87
- background-color: white;
88
- }
89
140
  }
@@ -68,6 +68,7 @@ const QCMImage = (props, context) => {
68
68
  "data-name": "answerText",
69
69
  className: _style2.default.titleWrapper
70
70
  }, /*#__PURE__*/_react.default.createElement("div", {
71
+ title: title,
71
72
  className: (0, _classnames.default)(_style2.default.title, _style.innerHTML) // eslint-disable-next-line react/no-danger
72
73
  ,
73
74
  dangerouslySetInnerHTML: {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/molecule/questions/qcm-graphic/index.js"],"names":["QCMImage","props","context","answers","skin","primarySkinColor","answersViews","map","answer","key","onClick","title","selected","image","ariaLabel","boxShadow","style","backgroundColor","background","content","imageWrapper","backgroundImage","titleWrapper","innerHTML","__html","wrapper","contextTypes","Provider","childContextTypes","propTypes","PropTypes","arrayOf","shape","string","bool","func"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,QAAQ,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AACnC,QAAM;AAACC,IAAAA;AAAD,MAAYF,KAAlB;AACA,QAAM;AAACG,IAAAA;AAAD,MAASF,OAAf;AACA,QAAMG,gBAAgB,GAAG,qBAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAAzB;AAEA,QAAME,YAAY,GAAGH,OAAO,CAACI,GAAR,CAAY,CAACC,MAAD,EAASC,GAAT,KAAiB;AAChD,UAAM;AAACC,MAAAA,OAAD;AAAUC,MAAAA,KAAV;AAAiBC,MAAAA,QAAjB;AAA2BC,MAAAA,KAA3B;AAAkCC,MAAAA;AAAlC,QAA+CN,MAArD;AAEA,wBACE;AACE,MAAA,OAAO,EAAEE,OADX;AAEE,uBAAeE,QAFjB;AAGE,mBAAU,eAHZ;AAIE,MAAA,KAAK,eACCA,QAAQ,IAAI;AACdG,QAAAA,SAAS,EAAG,cAAa,gEAA6BV,gBAA7B,CAA+C;AAD1D,OADb,CAJP;AASE,MAAA,SAAS,EAAEO,QAAQ,GAAGI,gBAAMJ,QAAT,GAAoBI,gBAAMR,MAT/C;AAUE,MAAA,GAAG,EAAEC;AAVP,oBAYE;AACE,mBAAU,kBADZ;AAEE,MAAA,KAAK,EAAE;AACLQ,QAAAA,eAAe,EAAEL,QAAQ,GAAGP,gBAAH,GAAsB;AAD1C,OAFT;AAKE,MAAA,SAAS,EAAEW,gBAAME;AALnB,MAZF,eAmBE;AAAK,mBAAU,eAAf;AAA+B,MAAA,SAAS,EAAEF,gBAAMG;AAAhD,oBACE;AACE,MAAA,SAAS,EAAEH,gBAAMI,YADnB;AAEE,mBAAU,aAFZ;AAGE,oBAAYN,SAAS,IAAIH,KAH3B;AAIE,MAAA,KAAK,EAAE;AACLU,QAAAA,eAAe,EAAG,OAAMR,KAAM;AADzB;AAJT,MADF,eASE;AAAK,mBAAU,YAAf;AAA4B,MAAA,SAAS,EAAEG,gBAAMM;AAA7C,oBACE;AACE,MAAA,SAAS,EAAE,yBAAWN,gBAAML,KAAjB,EAAwBY,gBAAxB,CADb,CAEE;AAFF;AAGE,MAAA,uBAAuB,EAAE;AAACC,QAAAA,MAAM,EAAEb;AAAT;AAH3B,MADF,CATF,CAnBF,CADF;AAuCD,GA1CoB,CAArB;AA4CA,sBACE;AAAK,iBAAU,qBAAf;AAAqC,IAAA,SAAS,EAAEK,gBAAMS;AAAtD,KACGnB,YADH,CADF;AAKD,CAtDD;;AAwDAN,QAAQ,CAAC0B,YAAT,GAAwB;AACtBtB,EAAAA,IAAI,EAAEuB,kBAASC,iBAAT,CAA2BxB;AADX,CAAxB;AAIAJ,QAAQ,CAAC6B,SAAT,2CAAqB;AACnB1B,EAAAA,OAAO,EAAE2B,mBAAUC,OAAV,CACPD,mBAAUE,KAAV,CAAgB;AACdrB,IAAAA,KAAK,EAAEmB,mBAAUG,MADH;AAEdrB,IAAAA,QAAQ,EAAEkB,mBAAUI,IAFN;AAGdxB,IAAAA,OAAO,EAAEoB,mBAAUK,IAHL;AAIdtB,IAAAA,KAAK,EAAEiB,mBAAUG,MAJH;AAKdnB,IAAAA,SAAS,EAAEgB,mBAAUG;AALP,GAAhB,CADO;AADU,CAArB;eAYejC,Q","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider from '../../../atom/provider';\nimport {innerHTML} from '../../../atom/label/style.css';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst QCMImage = (props, context) => {\n const {answers} = props;\n const {skin} = context;\n const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n const answersViews = answers.map((answer, key) => {\n const {onClick, title, selected, image, ariaLabel} = answer;\n\n return (\n <div\n onClick={onClick}\n data-selected={selected}\n data-name=\"answerGraphic\"\n style={{\n ...(selected && {\n boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n })\n }}\n className={selected ? style.selected : style.answer}\n key={key}\n >\n <div\n data-name=\"answerBackground\"\n style={{\n backgroundColor: selected ? primarySkinColor : '#F4F4F5'\n }}\n className={style.background}\n />\n <div data-name=\"answerContent\" className={style.content}>\n <div\n className={style.imageWrapper}\n data-name=\"answerImage\"\n aria-label={ariaLabel || title}\n style={{\n backgroundImage: `url(${image})`\n }}\n />\n <div data-name=\"answerText\" className={style.titleWrapper}>\n <div\n className={classnames(style.title, innerHTML)}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: title}}\n />\n </div>\n </div>\n </div>\n );\n });\n\n return (\n <div data-name=\"qcm-graphic-wrapper\" className={style.wrapper}>\n {answersViews}\n </div>\n );\n};\n\nQCMImage.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nQCMImage.propTypes = {\n answers: PropTypes.arrayOf(\n PropTypes.shape({\n title: PropTypes.string,\n selected: PropTypes.bool,\n onClick: PropTypes.func,\n image: PropTypes.string,\n ariaLabel: PropTypes.string\n })\n )\n};\n\nexport default QCMImage;\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../../../../src/molecule/questions/qcm-graphic/index.js"],"names":["QCMImage","props","context","answers","skin","primarySkinColor","answersViews","map","answer","key","onClick","title","selected","image","ariaLabel","boxShadow","style","backgroundColor","background","content","imageWrapper","backgroundImage","titleWrapper","innerHTML","__html","wrapper","contextTypes","Provider","childContextTypes","propTypes","PropTypes","arrayOf","shape","string","bool","func"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,QAAQ,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AACnC,QAAM;AAACC,IAAAA;AAAD,MAAYF,KAAlB;AACA,QAAM;AAACG,IAAAA;AAAD,MAASF,OAAf;AACA,QAAMG,gBAAgB,GAAG,qBAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAAzB;AAEA,QAAME,YAAY,GAAGH,OAAO,CAACI,GAAR,CAAY,CAACC,MAAD,EAASC,GAAT,KAAiB;AAChD,UAAM;AAACC,MAAAA,OAAD;AAAUC,MAAAA,KAAV;AAAiBC,MAAAA,QAAjB;AAA2BC,MAAAA,KAA3B;AAAkCC,MAAAA;AAAlC,QAA+CN,MAArD;AAEA,wBACE;AACE,MAAA,OAAO,EAAEE,OADX;AAEE,uBAAeE,QAFjB;AAGE,mBAAU,eAHZ;AAIE,MAAA,KAAK,eACCA,QAAQ,IAAI;AACdG,QAAAA,SAAS,EAAG,cAAa,gEAA6BV,gBAA7B,CAA+C;AAD1D,OADb,CAJP;AASE,MAAA,SAAS,EAAEO,QAAQ,GAAGI,gBAAMJ,QAAT,GAAoBI,gBAAMR,MAT/C;AAUE,MAAA,GAAG,EAAEC;AAVP,oBAYE;AACE,mBAAU,kBADZ;AAEE,MAAA,KAAK,EAAE;AACLQ,QAAAA,eAAe,EAAEL,QAAQ,GAAGP,gBAAH,GAAsB;AAD1C,OAFT;AAKE,MAAA,SAAS,EAAEW,gBAAME;AALnB,MAZF,eAmBE;AAAK,mBAAU,eAAf;AAA+B,MAAA,SAAS,EAAEF,gBAAMG;AAAhD,oBACE;AACE,MAAA,SAAS,EAAEH,gBAAMI,YADnB;AAEE,mBAAU,aAFZ;AAGE,oBAAYN,SAAS,IAAIH,KAH3B;AAIE,MAAA,KAAK,EAAE;AACLU,QAAAA,eAAe,EAAG,OAAMR,KAAM;AADzB;AAJT,MADF,eASE;AAAK,mBAAU,YAAf;AAA4B,MAAA,SAAS,EAAEG,gBAAMM;AAA7C,oBACE;AACE,MAAA,KAAK,EAAEX,KADT;AAEE,MAAA,SAAS,EAAE,yBAAWK,gBAAML,KAAjB,EAAwBY,gBAAxB,CAFb,CAGE;AAHF;AAIE,MAAA,uBAAuB,EAAE;AAACC,QAAAA,MAAM,EAAEb;AAAT;AAJ3B,MADF,CATF,CAnBF,CADF;AAwCD,GA3CoB,CAArB;AA6CA,sBACE;AAAK,iBAAU,qBAAf;AAAqC,IAAA,SAAS,EAAEK,gBAAMS;AAAtD,KACGnB,YADH,CADF;AAKD,CAvDD;;AAyDAN,QAAQ,CAAC0B,YAAT,GAAwB;AACtBtB,EAAAA,IAAI,EAAEuB,kBAASC,iBAAT,CAA2BxB;AADX,CAAxB;AAIAJ,QAAQ,CAAC6B,SAAT,2CAAqB;AACnB1B,EAAAA,OAAO,EAAE2B,mBAAUC,OAAV,CACPD,mBAAUE,KAAV,CAAgB;AACdrB,IAAAA,KAAK,EAAEmB,mBAAUG,MADH;AAEdrB,IAAAA,QAAQ,EAAEkB,mBAAUI,IAFN;AAGdxB,IAAAA,OAAO,EAAEoB,mBAAUK,IAHL;AAIdtB,IAAAA,KAAK,EAAEiB,mBAAUG,MAJH;AAKdnB,IAAAA,SAAS,EAAEgB,mBAAUG;AALP,GAAhB,CADO;AADU,CAArB;eAYejC,Q","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider from '../../../atom/provider';\nimport {innerHTML} from '../../../atom/label/style.css';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst QCMImage = (props, context) => {\n const {answers} = props;\n const {skin} = context;\n const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n const answersViews = answers.map((answer, key) => {\n const {onClick, title, selected, image, ariaLabel} = answer;\n\n return (\n <div\n onClick={onClick}\n data-selected={selected}\n data-name=\"answerGraphic\"\n style={{\n ...(selected && {\n boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n })\n }}\n className={selected ? style.selected : style.answer}\n key={key}\n >\n <div\n data-name=\"answerBackground\"\n style={{\n backgroundColor: selected ? primarySkinColor : '#F4F4F5'\n }}\n className={style.background}\n />\n <div data-name=\"answerContent\" className={style.content}>\n <div\n className={style.imageWrapper}\n data-name=\"answerImage\"\n aria-label={ariaLabel || title}\n style={{\n backgroundImage: `url(${image})`\n }}\n />\n <div data-name=\"answerText\" className={style.titleWrapper}>\n <div\n title={title}\n className={classnames(style.title, innerHTML)}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: title}}\n />\n </div>\n </div>\n </div>\n );\n });\n\n return (\n <div data-name=\"qcm-graphic-wrapper\" className={style.wrapper}>\n {answersViews}\n </div>\n );\n};\n\nQCMImage.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nQCMImage.propTypes = {\n answers: PropTypes.arrayOf(\n PropTypes.shape({\n title: PropTypes.string,\n selected: PropTypes.bool,\n onClick: PropTypes.func,\n image: PropTypes.string,\n ariaLabel: PropTypes.string\n })\n )\n};\n\nexport default QCMImage;\n"],"file":"index.js"}
@@ -64,6 +64,11 @@
64
64
  width: 100%;
65
65
  align-items: center;
66
66
  justify-content: center;
67
+ overflow: hidden;
68
+ hyphens: auto;
69
+ -ms-word-break: break-all;
70
+ word-break: break-all;
71
+ word-break: break-word;
67
72
  }
68
73
 
69
74
  .title {
@@ -144,10 +149,17 @@
144
149
  }
145
150
 
146
151
  .titleWrapper {
152
+ height: 100%;
153
+ width: 100%;
154
+ display: flex;
147
155
  white-space: wrap;
148
156
  overflow: hidden;
149
157
  padding: 0;
150
158
  justify-content: left;
151
159
  font-size: 15px;
152
160
  }
161
+
162
+ .title {
163
+ text-align: left;
164
+ }
153
165
  }
@@ -10,7 +10,7 @@ var _default = {
10
10
  selected: false,
11
11
  image: 'https://images.unsplash.com/photo-1467890947394-8171244e5410?dpr=2&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg='
12
12
  }, {
13
- title: 'Lorem ipsum',
13
+ title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sut labore et dolore magna aliqua.',
14
14
  onClick: () => {},
15
15
  selected: false,
16
16
  image: 'https://images.unsplash.com/photo-1494477920939-88c59ba76428?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../../src/molecule/questions/qcm-graphic/test/fixtures/default.js"],"names":["props","answers","title","onClick","selected","image"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE,CACP;AACEC,MAAAA,KAAK,EAAE,iCADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KADO,EAQP;AACEH,MAAAA,KAAK,EAAE,aADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KARO,EAeP;AACEH,MAAAA,KAAK,EAAE,OADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,IAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAfO,EAsBP;AACEH,MAAAA,KAAK,EAAE,6BADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAtBO,EA6BP;AACEH,MAAAA,KAAK,EAAE,iCADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KA7BO,EAoCP;AACEH,MAAAA,KAAK,EAAE,aADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KApCO,EA2CP;AACEH,MAAAA,KAAK,EAAE,OADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,IAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KA3CO,EAkDP;AACEH,MAAAA,KAAK,EAAE,6BADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAlDO;AADJ;AADM,C","sourcesContent":["export default {\n props: {\n answers: [\n {\n title: 'There is no need for a password',\n onClick: () => {},\n selected: false,\n image:\n 'https://images.unsplash.com/photo-1467890947394-8171244e5410?dpr=2&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg='\n },\n {\n title: 'Lorem ipsum',\n onClick: () => {},\n selected: false,\n image:\n 'https://images.unsplash.com/photo-1494477920939-88c59ba76428?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n },\n {\n title: 'Lorem',\n onClick: () => {},\n selected: true,\n image:\n 'https://images.unsplash.com/photo-1494416952682-200c9e760aac?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n },\n {\n title: 'You need to have a password',\n onClick: () => {},\n selected: false,\n image:\n 'https://images.unsplash.com/photo-1493442043090-087540b34c1a?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n },\n {\n title: 'There is no need for a password',\n onClick: () => {},\n selected: false,\n image:\n 'https://images.unsplash.com/photo-1467890947394-8171244e5410?dpr=2&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg='\n },\n {\n title: 'Lorem ipsum',\n onClick: () => {},\n selected: false,\n image:\n 'https://images.unsplash.com/photo-1494477920939-88c59ba76428?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n },\n {\n title: 'Lorem',\n onClick: () => {},\n selected: true,\n image:\n 'https://images.unsplash.com/photo-1494416952682-200c9e760aac?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n },\n {\n title: 'You need to have a password',\n onClick: () => {},\n selected: false,\n image:\n 'https://images.unsplash.com/photo-1493442043090-087540b34c1a?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n }\n ]\n }\n};\n"],"file":"default.js"}
1
+ {"version":3,"sources":["../../../../../../src/molecule/questions/qcm-graphic/test/fixtures/default.js"],"names":["props","answers","title","onClick","selected","image"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE,CACP;AACEC,MAAAA,KAAK,EAAE,iCADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KADO,EAQP;AACEH,MAAAA,KAAK,EACH,6FAFJ;AAGEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAHnB;AAIEC,MAAAA,QAAQ,EAAE,KAJZ;AAKEC,MAAAA,KAAK,EACH;AANJ,KARO,EAgBP;AACEH,MAAAA,KAAK,EAAE,OADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,IAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAhBO,EAuBP;AACEH,MAAAA,KAAK,EAAE,6BADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAvBO,EA8BP;AACEH,MAAAA,KAAK,EAAE,iCADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KA9BO,EAqCP;AACEH,MAAAA,KAAK,EAAE,aADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KArCO,EA4CP;AACEH,MAAAA,KAAK,EAAE,OADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,IAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KA5CO,EAmDP;AACEH,MAAAA,KAAK,EAAE,6BADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAnDO;AADJ;AADM,C","sourcesContent":["export default {\n props: {\n answers: [\n {\n title: 'There is no need for a password',\n onClick: () => {},\n selected: false,\n image:\n 'https://images.unsplash.com/photo-1467890947394-8171244e5410?dpr=2&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg='\n },\n {\n title:\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sut labore et dolore magna aliqua.',\n onClick: () => {},\n selected: false,\n image:\n 'https://images.unsplash.com/photo-1494477920939-88c59ba76428?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n },\n {\n title: 'Lorem',\n onClick: () => {},\n selected: true,\n image:\n 'https://images.unsplash.com/photo-1494416952682-200c9e760aac?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n },\n {\n title: 'You need to have a password',\n onClick: () => {},\n selected: false,\n image:\n 'https://images.unsplash.com/photo-1493442043090-087540b34c1a?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n },\n {\n title: 'There is no need for a password',\n onClick: () => {},\n selected: false,\n image:\n 'https://images.unsplash.com/photo-1467890947394-8171244e5410?dpr=2&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg='\n },\n {\n title: 'Lorem ipsum',\n onClick: () => {},\n selected: false,\n image:\n 'https://images.unsplash.com/photo-1494477920939-88c59ba76428?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n },\n {\n title: 'Lorem',\n onClick: () => {},\n selected: true,\n image:\n 'https://images.unsplash.com/photo-1494416952682-200c9e760aac?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n },\n {\n title: 'You need to have a password',\n onClick: () => {},\n selected: false,\n image:\n 'https://images.unsplash.com/photo-1493442043090-087540b34c1a?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n }\n ]\n }\n};\n"],"file":"default.js"}
@@ -10,7 +10,7 @@ var _default = {
10
10
  selected: false,
11
11
  image: 'https://images.unsplash.com/photo-1467890947394-8171244e5410?dpr=2&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg='
12
12
  }, {
13
- title: 'Lorem ipsum',
13
+ title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua tempor incididunt ut labore et dolore tempor incididunt ut labore et dolore magna aliqua tempor incididunt ut labore et dolore.',
14
14
  onClick: () => {},
15
15
  selected: false,
16
16
  image: 'https://images.unsplash.com/photo-1494477920939-88c59ba76428?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../../src/molecule/questions/qcm-graphic/test/fixtures/no-selected.js"],"names":["props","answers","title","onClick","selected","image"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE,CACP;AACEC,MAAAA,KAAK,EAAE,iCADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KADO,EAQP;AACEH,MAAAA,KAAK,EAAE,aADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KARO,EAeP;AACEH,MAAAA,KAAK,EAAE,OADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAfO,EAsBP;AACEH,MAAAA,KAAK,EAAE,6BADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAtBO;AADJ;AADM,C","sourcesContent":["export default {\n props: {\n answers: [\n {\n title: 'There is no need for a password',\n onClick: () => {},\n selected: false,\n image:\n 'https://images.unsplash.com/photo-1467890947394-8171244e5410?dpr=2&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg='\n },\n {\n title: 'Lorem ipsum',\n onClick: () => {},\n selected: false,\n image:\n 'https://images.unsplash.com/photo-1494477920939-88c59ba76428?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n },\n {\n title: 'Lorem',\n onClick: () => {},\n selected: false,\n image:\n 'https://images.unsplash.com/photo-1494416952682-200c9e760aac?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n },\n {\n title: 'You need to have a password',\n onClick: () => {},\n selected: false,\n image:\n 'https://images.unsplash.com/photo-1493442043090-087540b34c1a?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n }\n ]\n }\n};\n"],"file":"no-selected.js"}
1
+ {"version":3,"sources":["../../../../../../src/molecule/questions/qcm-graphic/test/fixtures/no-selected.js"],"names":["props","answers","title","onClick","selected","image"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE,CACP;AACEC,MAAAA,KAAK,EAAE,iCADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KADO,EAQP;AACEH,MAAAA,KAAK,EACH,6PAFJ;AAGEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAHnB;AAIEC,MAAAA,QAAQ,EAAE,KAJZ;AAKEC,MAAAA,KAAK,EACH;AANJ,KARO,EAgBP;AACEH,MAAAA,KAAK,EAAE,OADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAhBO,EAuBP;AACEH,MAAAA,KAAK,EAAE,6BADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAvBO;AADJ;AADM,C","sourcesContent":["export default {\n props: {\n answers: [\n {\n title: 'There is no need for a password',\n onClick: () => {},\n selected: false,\n image:\n 'https://images.unsplash.com/photo-1467890947394-8171244e5410?dpr=2&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg='\n },\n {\n title:\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua tempor incididunt ut labore et dolore tempor incididunt ut labore et dolore magna aliqua tempor incididunt ut labore et dolore.',\n onClick: () => {},\n selected: false,\n image:\n 'https://images.unsplash.com/photo-1494477920939-88c59ba76428?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n },\n {\n title: 'Lorem',\n onClick: () => {},\n selected: false,\n image:\n 'https://images.unsplash.com/photo-1494416952682-200c9e760aac?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n },\n {\n title: 'You need to have a password',\n onClick: () => {},\n selected: false,\n image:\n 'https://images.unsplash.com/photo-1493442043090-087540b34c1a?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n }\n ]\n }\n};\n"],"file":"no-selected.js"}
@@ -39,7 +39,7 @@ const translate = _identity2.default;
39
39
  });
40
40
  const answersImages = wrapper.find('[data-name="answerImage"]');
41
41
  t.true(answersImages.at(1).exists());
42
- t.is(answersImages.at(1).props()['aria-label'], 'Lorem ipsum');
42
+ t.is(answersImages.at(1).props()['aria-label'], 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sut labore et dolore magna aliqua.');
43
43
  const answers = wrapper.find('[data-name="answerGraphic"]');
44
44
  answers.at(1).simulate('click');
45
45
  t.true(answerWasClicked);
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../src/molecule/questions/qcm-graphic/test/qcm-graphic.js"],"names":["adapter","Adapter","translate","t","answerWasClicked","defaultFixture","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, unselected's no background\", 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"}
1
+ {"version":3,"sources":["../../../../../src/molecule/questions/qcm-graphic/test/qcm-graphic.js"],"names":["adapter","Adapter","translate","t","answerWasClicked","defaultFixture","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(\n answersImages.at(1).props()['aria-label'],\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sut labore et dolore magna aliqua.'\n );\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, unselected's no background\", 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"}
@@ -23,6 +23,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
23
23
 
24
24
  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); }
25
25
 
26
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
27
+
26
28
  const Template = ({
27
29
  template,
28
30
  answers
@@ -49,10 +51,16 @@ const Template = ({
49
51
  name: part.value
50
52
  }, answers);
51
53
  if (!field) return null;
52
- const fieldView = field.type === 'text' ? /*#__PURE__*/_react.default.createElement(_freeText.default, _extends({}, field, {
54
+
55
+ const {
56
+ type: fieldType
57
+ } = field,
58
+ fieldProps = _objectWithoutPropertiesLoose(field, ["type"]);
59
+
60
+ const fieldView = fieldType === 'text' ? /*#__PURE__*/_react.default.createElement(_freeText.default, _extends({}, fieldProps, {
53
61
  className: _style.default.text
54
- })) : /*#__PURE__*/_react.default.createElement(_dropDown.default, _extends({}, field, {
55
- theme: "template"
62
+ })) : /*#__PURE__*/_react.default.createElement(_dropDown.default, _extends({}, fieldProps, {
63
+ theme: "player"
56
64
  }));
57
65
  return /*#__PURE__*/_react.default.createElement("div", {
58
66
  className: _style.default.answerType,
@@ -68,16 +76,11 @@ const Template = ({
68
76
  };
69
77
 
70
78
  const TextPropTypes = process.env.NODE_ENV !== "production" ? _extends(_extends({}, _dropDown.default.propTypes), {}, {
71
- type: _propTypes.default.string,
72
- name: _propTypes.default.string
73
- }) : {};
74
- const DropDownPropTypes = process.env.NODE_ENV !== "production" ? _extends(_extends({}, _dropDown.default.propTypes), {}, {
75
- type: _propTypes.default.string,
76
- name: _propTypes.default.string
79
+ type: _propTypes.default.string
77
80
  }) : {};
78
81
  Template.propTypes = process.env.NODE_ENV !== "production" ? {
79
82
  template: _propTypes.default.string,
80
- answers: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape(DropDownPropTypes), _propTypes.default.shape(TextPropTypes)]))
83
+ answers: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape(_dropDown.default.propTypes), _propTypes.default.shape(TextPropTypes)]))
81
84
  } : {};
82
85
  var _default = Template;
83
86
  exports.default = _default;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/molecule/questions/template/index.js"],"names":["Template","template","answers","totalTemplate","templateCompose","convert","cap","part","key","type","__html","value","field","name","fieldView","style","text","answerType","wrapper","TextPropTypes","DropDown","propTypes","PropTypes","string","DropDownPropTypes","arrayOf","oneOfType","shape"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,QAAQ,GAAG,CAAC;AAACC,EAAAA,QAAD;AAAWC,EAAAA;AAAX,CAAD,KAAyB;AACxC,QAAMC,aAAa,GAAG,kCAAoBF,QAApB,CAAtB;;AACA,QAAMG,eAAe,GAAG,cAAIC,OAAJ,CAAY;AAACC,IAAAA,GAAG,EAAE;AAAN,GAAZ,EAA0B,CAACC,IAAD,EAAOC,GAAP,KAAe;AAC/D,UAAMC,IAAI,GAAGF,IAAI,CAACE,IAAlB;;AACA,QAAIA,IAAI,KAAK,QAAb,EAAuB;AACrB,0BACE;AACE,QAAA,GAAG,EAAED,GADP,CAEE;AAFF;AAGE,QAAA,uBAAuB,EAAE;AAACE,UAAAA,MAAM,EAAEH,IAAI,CAACI;AAAd;AAH3B,QADF;AAOD;;AACD,QAAIF,IAAI,KAAK,aAAb,EAA4B;AAC1B,YAAMG,KAAK,GAAG,oBAAK;AAACC,QAAAA,IAAI,EAAEN,IAAI,CAACI;AAAZ,OAAL,EAAyBT,OAAzB,CAAd;AACA,UAAI,CAACU,KAAL,EAAY,OAAO,IAAP;AACZ,YAAME,SAAS,GACbF,KAAK,CAACH,IAAN,KAAe,MAAf,gBACE,6BAAC,iBAAD,eAAcG,KAAd;AAAqB,QAAA,SAAS,EAAEG,eAAMC;AAAtC,SADF,gBAGE,6BAAC,iBAAD,eAAcJ,KAAd;AAAqB,QAAA,KAAK,EAAC;AAA3B,SAJJ;AAOA,0BACE;AAAK,QAAA,SAAS,EAAEG,eAAME,UAAtB;AAAkC,QAAA,GAAG,EAAEV,IAAI,CAACI;AAA5C,SACGG,SADH,CADF;AAKD;AACF,GA3BuB,EA2BrBX,aA3BqB,CAAxB;;AA6BA,sBACE;AAAK,iBAAU,kBAAf;AAAkC,IAAA,SAAS,EAAEY,eAAMG;AAAnD,KACGd,eADH,CADF;AAKD,CApCD;;AAsCA,MAAMe,aAAN,iEACKC,kBAASC,SADd;AAEEZ,EAAAA,IAAI,EAAEa,mBAAUC,MAFlB;AAGEV,EAAAA,IAAI,EAAES,mBAAUC;AAHlB;AAMA,MAAMC,iBAAN,iEACKJ,kBAASC,SADd;AAEEZ,EAAAA,IAAI,EAAEa,mBAAUC,MAFlB;AAGEV,EAAAA,IAAI,EAAES,mBAAUC;AAHlB;AAMAvB,QAAQ,CAACqB,SAAT,2CAAqB;AACnBpB,EAAAA,QAAQ,EAAEqB,mBAAUC,MADD;AAEnBrB,EAAAA,OAAO,EAAEoB,mBAAUG,OAAV,CACPH,mBAAUI,SAAV,CAAoB,CAACJ,mBAAUK,KAAV,CAAgBH,iBAAhB,CAAD,EAAqCF,mBAAUK,KAAV,CAAgBR,aAAhB,CAArC,CAApB,CADO;AAFU,CAArB;eAOenB,Q","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {map, find} from 'lodash/fp';\nimport parseTemplateString from '../../../util/parse-template-string';\nimport DropDown from '../drop-down';\nimport FreeText from '../free-text';\nimport style from './style.css';\n\nconst Template = ({template, answers}) => {\n const totalTemplate = parseTemplateString(template);\n const templateCompose = map.convert({cap: false})((part, key) => {\n const type = part.type;\n if (type === 'string') {\n return (\n <span\n key={key}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: part.value}}\n />\n );\n }\n if (type === 'answerField') {\n const field = find({name: part.value}, answers);\n if (!field) return null;\n const fieldView =\n field.type === 'text' ? (\n <FreeText {...field} className={style.text} />\n ) : (\n <DropDown {...field} theme=\"template\" />\n );\n\n return (\n <div className={style.answerType} key={part.value}>\n {fieldView}\n </div>\n );\n }\n }, totalTemplate);\n\n return (\n <div data-name=\"template-wrapper\" className={style.wrapper}>\n {templateCompose}\n </div>\n );\n};\n\nconst TextPropTypes = {\n ...DropDown.propTypes,\n type: PropTypes.string,\n name: PropTypes.string\n};\n\nconst DropDownPropTypes = {\n ...DropDown.propTypes,\n type: PropTypes.string,\n name: PropTypes.string\n};\n\nTemplate.propTypes = {\n template: PropTypes.string,\n answers: PropTypes.arrayOf(\n PropTypes.oneOfType([PropTypes.shape(DropDownPropTypes), PropTypes.shape(TextPropTypes)])\n )\n};\n\nexport default Template;\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../../../../src/molecule/questions/template/index.js"],"names":["Template","template","answers","totalTemplate","templateCompose","convert","cap","part","key","type","__html","value","field","name","fieldType","fieldProps","fieldView","style","text","answerType","wrapper","TextPropTypes","DropDown","propTypes","PropTypes","string","arrayOf","oneOfType","shape"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,QAAQ,GAAG,CAAC;AAACC,EAAAA,QAAD;AAAWC,EAAAA;AAAX,CAAD,KAAyB;AACxC,QAAMC,aAAa,GAAG,kCAAoBF,QAApB,CAAtB;;AACA,QAAMG,eAAe,GAAG,cAAIC,OAAJ,CAAY;AAACC,IAAAA,GAAG,EAAE;AAAN,GAAZ,EAA0B,CAACC,IAAD,EAAOC,GAAP,KAAe;AAC/D,UAAMC,IAAI,GAAGF,IAAI,CAACE,IAAlB;;AACA,QAAIA,IAAI,KAAK,QAAb,EAAuB;AACrB,0BACE;AACE,QAAA,GAAG,EAAED,GADP,CAEE;AAFF;AAGE,QAAA,uBAAuB,EAAE;AAACE,UAAAA,MAAM,EAAEH,IAAI,CAACI;AAAd;AAH3B,QADF;AAOD;;AACD,QAAIF,IAAI,KAAK,aAAb,EAA4B;AAC1B,YAAMG,KAAK,GAAG,oBAAK;AAACC,QAAAA,IAAI,EAAEN,IAAI,CAACI;AAAZ,OAAL,EAAyBT,OAAzB,CAAd;AACA,UAAI,CAACU,KAAL,EAAY,OAAO,IAAP;;AACZ,YAAM;AAACH,QAAAA,IAAI,EAAEK;AAAP,UAAmCF,KAAzC;AAAA,YAA2BG,UAA3B,iCAAyCH,KAAzC;;AACA,YAAMI,SAAS,GACbF,SAAS,KAAK,MAAd,gBACE,6BAAC,iBAAD,eAAcC,UAAd;AAA0B,QAAA,SAAS,EAAEE,eAAMC;AAA3C,SADF,gBAGE,6BAAC,iBAAD,eAAcH,UAAd;AAA0B,QAAA,KAAK,EAAC;AAAhC,SAJJ;AAOA,0BACE;AAAK,QAAA,SAAS,EAAEE,eAAME,UAAtB;AAAkC,QAAA,GAAG,EAAEZ,IAAI,CAACI;AAA5C,SACGK,SADH,CADF;AAKD;AACF,GA5BuB,EA4BrBb,aA5BqB,CAAxB;;AA8BA,sBACE;AAAK,iBAAU,kBAAf;AAAkC,IAAA,SAAS,EAAEc,eAAMG;AAAnD,KACGhB,eADH,CADF;AAKD,CArCD;;AAuCA,MAAMiB,aAAN,iEACKC,kBAASC,SADd;AAEEd,EAAAA,IAAI,EAAEe,mBAAUC;AAFlB;AAKAzB,QAAQ,CAACuB,SAAT,2CAAqB;AACnBtB,EAAAA,QAAQ,EAAEuB,mBAAUC,MADD;AAEnBvB,EAAAA,OAAO,EAAEsB,mBAAUE,OAAV,CACPF,mBAAUG,SAAV,CAAoB,CAACH,mBAAUI,KAAV,CAAgBN,kBAASC,SAAzB,CAAD,EAAsCC,mBAAUI,KAAV,CAAgBP,aAAhB,CAAtC,CAApB,CADO;AAFU,CAArB;eAOerB,Q","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {map, find} from 'lodash/fp';\nimport parseTemplateString from '../../../util/parse-template-string';\nimport DropDown from '../drop-down';\nimport FreeText from '../free-text';\nimport style from './style.css';\n\nconst Template = ({template, answers}) => {\n const totalTemplate = parseTemplateString(template);\n const templateCompose = map.convert({cap: false})((part, key) => {\n const type = part.type;\n if (type === 'string') {\n return (\n <span\n key={key}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: part.value}}\n />\n );\n }\n if (type === 'answerField') {\n const field = find({name: part.value}, answers);\n if (!field) return null;\n const {type: fieldType, ...fieldProps} = field;\n const fieldView =\n fieldType === 'text' ? (\n <FreeText {...fieldProps} className={style.text} />\n ) : (\n <DropDown {...fieldProps} theme=\"player\" />\n );\n\n return (\n <div className={style.answerType} key={part.value}>\n {fieldView}\n </div>\n );\n }\n }, totalTemplate);\n\n return (\n <div data-name=\"template-wrapper\" className={style.wrapper}>\n {templateCompose}\n </div>\n );\n};\n\nconst TextPropTypes = {\n ...DropDown.propTypes,\n type: PropTypes.string\n};\n\nTemplate.propTypes = {\n template: PropTypes.string,\n answers: PropTypes.arrayOf(\n PropTypes.oneOfType([PropTypes.shape(DropDown.propTypes), PropTypes.shape(TextPropTypes)])\n )\n};\n\nexport default Template;\n"],"file":"index.js"}
@@ -12,6 +12,8 @@ var _default = _interopRequireDefault(require("./fixtures/default"));
12
12
 
13
13
  var _oneSection = _interopRequireDefault(require("./fixtures/one-section"));
14
14
 
15
+ var _organizeCourses = _interopRequireDefault(require("./fixtures/organize-courses"));
16
+
15
17
  var _tabletClosed = _interopRequireDefault(require("./fixtures/tablet-closed"));
16
18
 
17
19
  var _threeSections = _interopRequireDefault(require("./fixtures/three-sections"));
@@ -28,6 +30,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
28
30
  });
29
31
  (0, _ava.default)('Molecule › MoleculeWizardSummary › Default › should be rendered', _renderComponent.default, _.default, _default.default);
30
32
  (0, _ava.default)('Molecule › MoleculeWizardSummary › OneSection › should be rendered', _renderComponent.default, _.default, _oneSection.default);
33
+ (0, _ava.default)('Molecule › MoleculeWizardSummary › OrganizeCourses › should be rendered', _renderComponent.default, _.default, _organizeCourses.default);
31
34
  (0, _ava.default)('Molecule › MoleculeWizardSummary › TabletClosed › should be rendered', _renderComponent.default, _.default, _tabletClosed.default);
32
35
  (0, _ava.default)('Molecule › MoleculeWizardSummary › ThreeSections › should be rendered', _renderComponent.default, _.default, _threeSections.default);
33
36
  (0, _ava.default)('Molecule › MoleculeWizardSummary › TwoSections › should be rendered', _renderComponent.default, _.default, _twoSections.default);
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/molecule/wizard-summary/test/fixtures.js"],"names":["t","pass","MoleculeWizardSummary","propTypes","value","key","not","undefined","renderComponentMacro","fixtureDefault","fixtureOneSection","fixtureTabletClosed","fixtureThreeSections","fixtureTwoSections"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,gEAAL,EAAuEA,CAAC,IAAI;AAC1EA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAAsBC,SAA9B,EAAyC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACvDL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,0DAAyDF,GAAI,mEAAtF;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,iEAAL,EAAwEG,wBAAxE,EAA8FN,SAA9F,EAAqHO,gBAArH;AACA,kBAAK,oEAAL,EAA2ED,wBAA3E,EAAiGN,SAAjG,EAAwHQ,mBAAxH;AACA,kBAAK,sEAAL,EAA6EF,wBAA7E,EAAmGN,SAAnG,EAA0HS,qBAA1H;AACA,kBAAK,uEAAL,EAA8EH,wBAA9E,EAAoGN,SAApG,EAA2HU,sBAA3H;AACA,kBAAK,qEAAL,EAA4EJ,wBAA5E,EAAkGN,SAAlG,EAAyHW,oBAAzH","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport MoleculeWizardSummary from '..';\nimport fixtureDefault from './fixtures/default';\nimport fixtureOneSection from './fixtures/one-section';\nimport fixtureTabletClosed from './fixtures/tablet-closed';\nimport fixtureThreeSections from './fixtures/three-sections';\nimport fixtureTwoSections from './fixtures/two-sections';\n\ntest('Molecule › MoleculeWizardSummary > should have valid propTypes', t => {\n t.pass();\n forEach(MoleculeWizardSummary.propTypes, (value, key) => {\n t.not(value, undefined, `PropType for \"Molecule.MoleculeWizardSummary.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n });\n});\n\ntest('Molecule › MoleculeWizardSummary › Default › should be rendered', renderComponentMacro, MoleculeWizardSummary, fixtureDefault);\ntest('Molecule › MoleculeWizardSummary › OneSection › should be rendered', renderComponentMacro, MoleculeWizardSummary, fixtureOneSection);\ntest('Molecule › MoleculeWizardSummary › TabletClosed › should be rendered', renderComponentMacro, MoleculeWizardSummary, fixtureTabletClosed);\ntest('Molecule › MoleculeWizardSummary › ThreeSections › should be rendered', renderComponentMacro, MoleculeWizardSummary, fixtureThreeSections);\ntest('Molecule › MoleculeWizardSummary › TwoSections › should be rendered', renderComponentMacro, MoleculeWizardSummary, fixtureTwoSections);\n"],"file":"fixtures.js"}
1
+ {"version":3,"sources":["../../../../src/molecule/wizard-summary/test/fixtures.js"],"names":["t","pass","MoleculeWizardSummary","propTypes","value","key","not","undefined","renderComponentMacro","fixtureDefault","fixtureOneSection","fixtureOrganizeCourses","fixtureTabletClosed","fixtureThreeSections","fixtureTwoSections"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,gEAAL,EAAuEA,CAAC,IAAI;AAC1EA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAAsBC,SAA9B,EAAyC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACvDL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,0DAAyDF,GAAI,mEAAtF;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,iEAAL,EAAwEG,wBAAxE,EAA8FN,SAA9F,EAAqHO,gBAArH;AACA,kBAAK,oEAAL,EAA2ED,wBAA3E,EAAiGN,SAAjG,EAAwHQ,mBAAxH;AACA,kBAAK,yEAAL,EAAgFF,wBAAhF,EAAsGN,SAAtG,EAA6HS,wBAA7H;AACA,kBAAK,sEAAL,EAA6EH,wBAA7E,EAAmGN,SAAnG,EAA0HU,qBAA1H;AACA,kBAAK,uEAAL,EAA8EJ,wBAA9E,EAAoGN,SAApG,EAA2HW,sBAA3H;AACA,kBAAK,qEAAL,EAA4EL,wBAA5E,EAAkGN,SAAlG,EAAyHY,oBAAzH","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport MoleculeWizardSummary from '..';\nimport fixtureDefault from './fixtures/default';\nimport fixtureOneSection from './fixtures/one-section';\nimport fixtureOrganizeCourses from './fixtures/organize-courses';\nimport fixtureTabletClosed from './fixtures/tablet-closed';\nimport fixtureThreeSections from './fixtures/three-sections';\nimport fixtureTwoSections from './fixtures/two-sections';\n\ntest('Molecule › MoleculeWizardSummary > should have valid propTypes', t => {\n t.pass();\n forEach(MoleculeWizardSummary.propTypes, (value, key) => {\n t.not(value, undefined, `PropType for \"Molecule.MoleculeWizardSummary.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n });\n});\n\ntest('Molecule › MoleculeWizardSummary › Default › should be rendered', renderComponentMacro, MoleculeWizardSummary, fixtureDefault);\ntest('Molecule › MoleculeWizardSummary › OneSection › should be rendered', renderComponentMacro, MoleculeWizardSummary, fixtureOneSection);\ntest('Molecule › MoleculeWizardSummary › OrganizeCourses › should be rendered', renderComponentMacro, MoleculeWizardSummary, fixtureOrganizeCourses);\ntest('Molecule › MoleculeWizardSummary › TabletClosed › should be rendered', renderComponentMacro, MoleculeWizardSummary, fixtureTabletClosed);\ntest('Molecule › MoleculeWizardSummary › ThreeSections › should be rendered', renderComponentMacro, MoleculeWizardSummary, fixtureThreeSections);\ntest('Molecule › MoleculeWizardSummary › TwoSections › should be rendered', renderComponentMacro, MoleculeWizardSummary, fixtureTwoSections);\n"],"file":"fixtures.js"}
@@ -14,6 +14,8 @@ var _playlistGeneralSettingsCreate = _interopRequireDefault(require("./fixtures/
14
14
 
15
15
  var _playlistGeneralSettingsEdit = _interopRequireDefault(require("./fixtures/playlist-general-settings-edit"));
16
16
 
17
+ var _playlistOrganizeCourses = _interopRequireDefault(require("./fixtures/playlist-organize-courses"));
18
+
17
19
  var _playlistPopulationsCreate = _interopRequireDefault(require("./fixtures/playlist-populations-create"));
18
20
 
19
21
  var _playlistTranslateEdit = _interopRequireDefault(require("./fixtures/playlist-translate-edit"));
@@ -29,6 +31,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
29
31
  (0, _ava.default)('Organism › OrganismWizardContents › PlaylistAddCoursesCreate › should be rendered', _renderComponent.default, _.default, _playlistAddCoursesCreate.default);
30
32
  (0, _ava.default)('Organism › OrganismWizardContents › PlaylistGeneralSettingsCreate › should be rendered', _renderComponent.default, _.default, _playlistGeneralSettingsCreate.default);
31
33
  (0, _ava.default)('Organism › OrganismWizardContents › PlaylistGeneralSettingsEdit › should be rendered', _renderComponent.default, _.default, _playlistGeneralSettingsEdit.default);
34
+ (0, _ava.default)('Organism › OrganismWizardContents › PlaylistOrganizeCourses › should be rendered', _renderComponent.default, _.default, _playlistOrganizeCourses.default);
32
35
  (0, _ava.default)('Organism › OrganismWizardContents › PlaylistPopulationsCreate › should be rendered', _renderComponent.default, _.default, _playlistPopulationsCreate.default);
33
36
  (0, _ava.default)('Organism › OrganismWizardContents › PlaylistTranslateEdit › should be rendered', _renderComponent.default, _.default, _playlistTranslateEdit.default);
34
37
  //# sourceMappingURL=fixtures.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/organism/wizard-contents/test/fixtures.js"],"names":["t","pass","OrganismWizardContents","propTypes","value","key","not","undefined","renderComponentMacro","fixturePlaylistAddCoursesCreate","fixturePlaylistGeneralSettingsCreate","fixturePlaylistGeneralSettingsEdit","fixturePlaylistPopulationsCreate","fixturePlaylistTranslateEdit"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,iEAAL,EAAwEA,CAAC,IAAI;AAC3EA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAAuBC,SAA/B,EAA0C,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACxDL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,2DAA0DF,GAAI,mEAAvF;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,mFAAL,EAA0FG,wBAA1F,EAAgHN,SAAhH,EAAwIO,iCAAxI;AACA,kBAAK,wFAAL,EAA+FD,wBAA/F,EAAqHN,SAArH,EAA6IQ,sCAA7I;AACA,kBAAK,sFAAL,EAA6FF,wBAA7F,EAAmHN,SAAnH,EAA2IS,oCAA3I;AACA,kBAAK,oFAAL,EAA2FH,wBAA3F,EAAiHN,SAAjH,EAAyIU,kCAAzI;AACA,kBAAK,gFAAL,EAAuFJ,wBAAvF,EAA6GN,SAA7G,EAAqIW,8BAArI","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport OrganismWizardContents from '..';\nimport fixturePlaylistAddCoursesCreate from './fixtures/playlist-add-courses-create';\nimport fixturePlaylistGeneralSettingsCreate from './fixtures/playlist-general-settings-create';\nimport fixturePlaylistGeneralSettingsEdit from './fixtures/playlist-general-settings-edit';\nimport fixturePlaylistPopulationsCreate from './fixtures/playlist-populations-create';\nimport fixturePlaylistTranslateEdit from './fixtures/playlist-translate-edit';\n\ntest('Organism › OrganismWizardContents > should have valid propTypes', t => {\n t.pass();\n forEach(OrganismWizardContents.propTypes, (value, key) => {\n t.not(value, undefined, `PropType for \"Organism.OrganismWizardContents.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n });\n});\n\ntest('Organism › OrganismWizardContents › PlaylistAddCoursesCreate › should be rendered', renderComponentMacro, OrganismWizardContents, fixturePlaylistAddCoursesCreate);\ntest('Organism › OrganismWizardContents › PlaylistGeneralSettingsCreate › should be rendered', renderComponentMacro, OrganismWizardContents, fixturePlaylistGeneralSettingsCreate);\ntest('Organism › OrganismWizardContents › PlaylistGeneralSettingsEdit › should be rendered', renderComponentMacro, OrganismWizardContents, fixturePlaylistGeneralSettingsEdit);\ntest('Organism › OrganismWizardContents › PlaylistPopulationsCreate › should be rendered', renderComponentMacro, OrganismWizardContents, fixturePlaylistPopulationsCreate);\ntest('Organism › OrganismWizardContents › PlaylistTranslateEdit › should be rendered', renderComponentMacro, OrganismWizardContents, fixturePlaylistTranslateEdit);\n"],"file":"fixtures.js"}
1
+ {"version":3,"sources":["../../../../src/organism/wizard-contents/test/fixtures.js"],"names":["t","pass","OrganismWizardContents","propTypes","value","key","not","undefined","renderComponentMacro","fixturePlaylistAddCoursesCreate","fixturePlaylistGeneralSettingsCreate","fixturePlaylistGeneralSettingsEdit","fixturePlaylistOrganizeCourses","fixturePlaylistPopulationsCreate","fixturePlaylistTranslateEdit"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,iEAAL,EAAwEA,CAAC,IAAI;AAC3EA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAAuBC,SAA/B,EAA0C,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACxDL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,2DAA0DF,GAAI,mEAAvF;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,mFAAL,EAA0FG,wBAA1F,EAAgHN,SAAhH,EAAwIO,iCAAxI;AACA,kBAAK,wFAAL,EAA+FD,wBAA/F,EAAqHN,SAArH,EAA6IQ,sCAA7I;AACA,kBAAK,sFAAL,EAA6FF,wBAA7F,EAAmHN,SAAnH,EAA2IS,oCAA3I;AACA,kBAAK,kFAAL,EAAyFH,wBAAzF,EAA+GN,SAA/G,EAAuIU,gCAAvI;AACA,kBAAK,oFAAL,EAA2FJ,wBAA3F,EAAiHN,SAAjH,EAAyIW,kCAAzI;AACA,kBAAK,gFAAL,EAAuFL,wBAAvF,EAA6GN,SAA7G,EAAqIY,8BAArI","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport OrganismWizardContents from '..';\nimport fixturePlaylistAddCoursesCreate from './fixtures/playlist-add-courses-create';\nimport fixturePlaylistGeneralSettingsCreate from './fixtures/playlist-general-settings-create';\nimport fixturePlaylistGeneralSettingsEdit from './fixtures/playlist-general-settings-edit';\nimport fixturePlaylistOrganizeCourses from './fixtures/playlist-organize-courses';\nimport fixturePlaylistPopulationsCreate from './fixtures/playlist-populations-create';\nimport fixturePlaylistTranslateEdit from './fixtures/playlist-translate-edit';\n\ntest('Organism › OrganismWizardContents > should have valid propTypes', t => {\n t.pass();\n forEach(OrganismWizardContents.propTypes, (value, key) => {\n t.not(value, undefined, `PropType for \"Organism.OrganismWizardContents.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n });\n});\n\ntest('Organism › OrganismWizardContents › PlaylistAddCoursesCreate › should be rendered', renderComponentMacro, OrganismWizardContents, fixturePlaylistAddCoursesCreate);\ntest('Organism › OrganismWizardContents › PlaylistGeneralSettingsCreate › should be rendered', renderComponentMacro, OrganismWizardContents, fixturePlaylistGeneralSettingsCreate);\ntest('Organism › OrganismWizardContents › PlaylistGeneralSettingsEdit › should be rendered', renderComponentMacro, OrganismWizardContents, fixturePlaylistGeneralSettingsEdit);\ntest('Organism › OrganismWizardContents › PlaylistOrganizeCourses › should be rendered', renderComponentMacro, OrganismWizardContents, fixturePlaylistOrganizeCourses);\ntest('Organism › OrganismWizardContents › PlaylistPopulationsCreate › should be rendered', renderComponentMacro, OrganismWizardContents, fixturePlaylistPopulationsCreate);\ntest('Organism › OrganismWizardContents › PlaylistTranslateEdit › should be rendered', renderComponentMacro, OrganismWizardContents, fixturePlaylistTranslateEdit);\n"],"file":"fixtures.js"}