@instructure/quiz-core 17.63.1-rc.4 → 17.63.1-rc.5

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 (9) hide show
  1. package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/presenter.js +127 -143
  2. package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/theme.js +2 -1
  3. package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewQuizAnalysis/presenter.js +9 -8
  4. package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewQuizAnalysis/theme.js +2 -1
  5. package/lib/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/presenter.js +130 -144
  6. package/lib/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/theme.js +2 -1
  7. package/lib/reporting/components/resources/NewQuizAndItemAnalysis/NewQuizAnalysis/presenter.js +9 -8
  8. package/lib/reporting/components/resources/NewQuizAndItemAnalysis/NewQuizAnalysis/theme.js +2 -1
  9. package/package.json +9 -9
package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/presenter.js CHANGED
@@ -9,27 +9,18 @@ var _dec, _class, _class2, _temp;
9
9
  import { Heading } from '@instructure/ui-heading';
10
10
  import React, { Component } from 'react';
11
11
  var styles = {
12
- componentId: 'bCOJX',
12
+ componentId: 'bnyej',
13
13
  template: function template(theme) {
14
- return "\n\n.bCOJX_eDnN{display:flex;flex-basis:45%;flex-direction:column;overflow:hidden}\n\n.bCOJX_eKXQ{padding:".concat(theme.cardWrapperPadding || 'inherit', ";position:relative}\n\n.bCOJX_eoBe{font-size:").concat(theme.metricNumberContextFontSize || 'inherit', ";font-weight:").concat(theme.metricNumberContextFontWeight || 'inherit', "}\n\n.bCOJX_eIAv{display:flex;position:relative}\n\n.bCOJX_ePHw{flex-basis:91%;overflow:hidden;padding-bottom:10px;text-overflow:ellipsis;white-space:nowrap}\n\n.bCOJX_dzsH{overflow:visible;text-overflow:unset;white-space:normal}\n\n.bCOJX_byoJ{position:absolute;right:7px;top:-8px}\n\n.bCOJX_evBt{flex-wrap:wrap;justify-content:space-between}\n\n.bCOJX_pAQb,.bCOJX_evBt{display:flex;flex-direction:row}\n\n.bCOJX_zefc{display:flex;flex-basis:55%;justify-content:flex-end}\n\n.bCOJX_dPzc{flex-direction:column}\n\n.bCOJX_dPzc,.bCOJX_dzph{display:flex;flex-basis:100%}\n\n.bCOJX_dzph{align-items:flex-start;box-sizing:border-box;column-gap:5px;justify-content:space-between;padding:0 30px 0 25px}\n\n.bCOJX_eobd{padding-top:1rem}\n\n.bCOJX_NpIG{position:absolute;right:").concat(theme.viewPadding || 'inherit', ";top:").concat(theme.viewPadding || 'inherit', "}\n\n.bCOJX_csiQ{display:flex;flex-basis:100%}\n\n.bCOJX_fjVl{display:flex;flex-basis:50%}\n\n.bCOJX_eZLI{display:flex;flex-basis:40%}\n\n@media screen and (--tabletBreakPoint){.bCOJX_zefc{flex-basis:100%;justify-content:flex-start}.bCOJX_ePHw{flex-basis:94%}.bCOJX_eDnN{flex-basis:100%}.bCOJX_dzph{padding:0}.bCOJX_eDnN h3{padding-right:30px}.bCOJX_NpIG{right:17px}.bCOJX_eIAv{margin-bottom:20px}.bCOJX_byoJ{right:-7px}.bCOJX_dzph{flex-wrap:wrap}}");
14
+ return "\n\n.bnyej_eKXQ{padding:".concat(theme.cardWrapperPadding || 'inherit', ";position:relative}\n\n.bnyej_bwlc{align-items:flex-start;gap:24px;justify-content:space-between;row-gap:32px}\n\n.bnyej_bwlc,.bnyej_bqdH{display:flex;flex-direction:row;flex-wrap:wrap}\n\n.bnyej_bqdH{align-items:center;row-gap:24px}\n\n.bnyej_NpIG{position:absolute;right:").concat(theme.viewPaddingRight || 'inherit', ";top:").concat(theme.viewPaddingTop || 'inherit', "}\n\n.bnyej_eoBe{font-size:").concat(theme.metricNumberContextFontSize || 'inherit', ";font-weight:").concat(theme.metricNumberContextFontWeight || 'inherit', "}\n\n.bnyej_fFDJ{display:none}\n\n.bnyej_esVF{min-height:48px}\n\n.bnyej_eTZq{position:relative}\n\n.bnyej_eTZq:after{background:linear-gradient(180deg,hsla(0,0%,100%,0),#fff);content:\"\";height:48px;left:0;position:absolute;top:0;width:100%}");
15
15
  },
16
- 'heading': 'bCOJX_eDnN',
17
- 'cardWrapper': 'bCOJX_eKXQ',
18
- 'metricNumberContext': 'bCOJX_eoBe',
19
- 'bodyPresentation': 'bCOJX_eIAv',
20
- 'bodyExcerpt': 'bCOJX_ePHw',
21
- 'bodyExcerptExpanded': 'bCOJX_dzsH',
22
- 'bodyExpandButtonWrapper': 'bCOJX_byoJ',
23
- 'innerWrapper': 'bCOJX_evBt',
24
- 'expandableInnerWrapper': 'bCOJX_pAQb',
25
- 'metricsWithControls': 'bCOJX_zefc',
26
- 'metricGroup': 'bCOJX_dPzc',
27
- 'metricsRow': 'bCOJX_dzph',
28
- 'metricsRowPaginated': 'bCOJX_eobd',
29
- 'itemCardToggleButtonWrapper': 'bCOJX_NpIG',
30
- 'expandableContent': 'bCOJX_csiQ',
31
- 'tableColumn': 'bCOJX_fjVl',
32
- 'performanceColumn': 'bCOJX_eZLI'
16
+ 'cardWrapper': 'bnyej_eKXQ',
17
+ 'itemCardInnerContainer': 'bnyej_bwlc',
18
+ 'metricsContainer': 'bnyej_bqdH',
19
+ 'itemCardToggleButtonWrapper': 'bnyej_NpIG',
20
+ 'metricNumberContext': 'bnyej_eoBe',
21
+ 'hiddenMetrics': 'bnyej_fFDJ',
22
+ 'itemBody': 'bnyej_esVF',
23
+ 'hiddenItemBody': 'bnyej_eTZq'
33
24
  };
34
25
  import t from '@instructure/quiz-i18n/es/format-message';
35
26
  import ExpandButton from "../../../../../common/components/shared/ExpandButton/index.js";
@@ -44,6 +35,8 @@ import classnames from 'classnames';
44
35
  import { interactionTypesNameDictionary } from "../../../../../common/util/interactionTypeMetadata.js";
45
36
  import AnswerSummaryTable from "../AnswerSummaryTable/index.js";
46
37
  import { itemAnalysisPropType } from "../propTypes.js";
38
+ import { RichContentRenderer } from '@instructure/quiz-rce';
39
+ import { Flex } from '@instructure/ui-flex';
47
40
  var supportedTables = ['choice', 'true-false', 'multi-answer'];
48
41
  export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
49
42
  _inherits(NewItemAnalysis, _Component);
@@ -61,9 +54,7 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
61
54
 
62
55
  _this = _super.call.apply(_super, [this].concat(args));
63
56
  _this.state = {
64
- bodyToggable: false,
65
57
  bodyExpanded: false,
66
- itemExpanded: false,
67
58
  metricsExpanded: false
68
59
  };
69
60
 
@@ -74,39 +65,10 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
74
65
  });
75
66
  };
76
67
 
77
- _this.buildItemCardHeadingId = function () {
78
- return "itemCardHeading-".concat(_this.props.itemAnalysis.metadata.item_id);
79
- };
80
-
81
- _this.buildItemCardBodyId = function () {
82
- return "itemCardBody-".concat(_this.props.itemAnalysis.metadata.item_id);
83
- };
84
-
85
- _this.bodyExceedsLimit = function (bodyElement, headingElement) {
86
- if (!bodyElement || !headingElement) {
87
- return;
88
- }
89
-
90
- return bodyElement.scrollWidth > headingElement.clientWidth || _this.state.bodyExpanded;
91
- };
92
-
93
- _this.handleBodyWidth = function () {
94
- var bodyElement = document.getElementById(_this.buildItemCardBodyId());
95
- var headingElement = document.getElementById(_this.buildItemCardHeadingId());
96
-
97
- _this.setState({
98
- bodyToggable: _this.bodyExceedsLimit(bodyElement, headingElement)
99
- });
100
- };
101
-
102
- _this.handleToggle = function () {
68
+ _this.handleMetricToggle = function () {
103
69
  _this.setState({
104
70
  metricsExpanded: !_this.state.metricsExpanded
105
71
  });
106
-
107
- _this.setState({
108
- itemExpanded: !_this.state.itemExpanded
109
- });
110
72
  };
111
73
 
112
74
  _this.handleBodyToggle = function () {
@@ -115,26 +77,6 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
115
77
  });
116
78
  };
117
79
 
118
- _this.renderExpandItemCardButton = function () {
119
- return /*#__PURE__*/React.createElement("div", {
120
- className: styles.itemCardToggleButtonWrapper
121
- }, /*#__PURE__*/React.createElement(ExpandButton, {
122
- onClick: _this.handleToggle,
123
- title: _this.state.metricsExpanded ? t('collapse item card') : t('expand item card'),
124
- isExpanded: _this.state.metricsExpanded
125
- }));
126
- };
127
-
128
- _this.renderBodyToggleButton = function () {
129
- return /*#__PURE__*/React.createElement("div", {
130
- className: styles.bodyExpandButtonWrapper
131
- }, /*#__PURE__*/React.createElement(ExpandButton, {
132
- onClick: _this.handleBodyToggle,
133
- title: _this.state.bodyExpanded ? t('collapse question stem') : t('expand question stem'),
134
- isExpanded: _this.state.bodyExpanded
135
- }));
136
- };
137
-
138
80
  _this.calculateValueWithPointsPossible = function (metricKey, metricValue) {
139
81
  var pointsPossible = _this.props.itemAnalysis.scores.points_possible;
140
82
  return t.rich('{score, number}<s>/{possible, number} PTS</s>', {
@@ -150,103 +92,145 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
150
92
  });
151
93
  };
152
94
 
153
- _this.renderExpanded = function () {
154
- var scores = _this.props.itemAnalysis.scores;
155
- var classes = classnames(styles.metricsRow, styles.metricsRowPaginated);
156
- return /*#__PURE__*/React.createElement("div", {
157
- className: classes
158
- }, /*#__PURE__*/React.createElement(AnalysisPopoverMetric, {
159
- metricKey: "pearson_correlation",
160
- label: t('Pearson Correlation Coefficient'),
161
- value: t.number(scores.pearson_correlation),
162
- popoverDescription: pearsonCorrelation
163
- }));
164
- };
165
-
166
- return _this;
167
- }
168
-
169
- _createClass(NewItemAnalysis, [{
170
- key: "componentDidMount",
171
- value: function componentDidMount() {
172
- this.handleBodyWidth();
173
- window.addEventListener('resize', this.handleBodyWidth);
174
- }
175
- }, {
176
- key: "componentWillUnmount",
177
- value: function componentWillUnmount() {
178
- window.removeEventListener('resize', this.handleBodyWidth);
179
- }
180
- }, {
181
- key: "render",
182
- value: function render() {
183
- var _this$props$itemAnaly = this.props.itemAnalysis,
184
- answer_summary = _this$props$itemAnaly.answer_summary,
185
- metadata = _this$props$itemAnaly.metadata,
186
- scores = _this$props$itemAnaly.scores;
187
- var bodyClass = classnames(styles.bodyExcerpt, _defineProperty({}, styles.bodyExcerptExpanded, this.state.bodyExpanded));
188
- var headingId = this.buildItemCardHeadingId();
189
- var bodyId = this.buildItemCardBodyId();
190
- var isSupportedTable = supportedTables.includes(metadata.interaction_type);
191
- return /*#__PURE__*/React.createElement(Card, {
192
- className: styles.cardWrapper
193
- }, /*#__PURE__*/React.createElement("div", {
194
- className: styles.innerWrapper
195
- }, /*#__PURE__*/React.createElement("div", {
196
- id: headingId,
197
- className: styles.heading
198
- }, /*#__PURE__*/React.createElement(Heading, {
199
- margin: "0 0 small 0",
95
+ _this.renderTitle = function (title) {
96
+ return /*#__PURE__*/React.createElement(Heading, {
97
+ margin: "0 x-large small 0",
200
98
  level: "h3",
201
99
  weight: "bold",
202
100
  color: "primary"
203
- }, metadata.item_title), /*#__PURE__*/React.createElement(Text, {
101
+ }, title);
102
+ };
103
+
104
+ _this.renderInteractionType = function (interactionType) {
105
+ return /*#__PURE__*/React.createElement(Text, {
204
106
  size: "small",
205
107
  weight: "bold",
206
108
  transform: "capitalize"
207
- }, this.mapInteractionTypeToTranslation(metadata.interaction_type)), /*#__PURE__*/React.createElement("div", {
208
- id: "itemBody",
209
- className: styles.bodyPresentation
210
- }, /*#__PURE__*/React.createElement("div", {
211
- id: bodyId,
212
- className: bodyClass
213
- }, /*#__PURE__*/React.createElement(Text, {
214
- size: "small"
215
- }, metadata.item_body)), this.state.bodyToggable && this.renderBodyToggleButton())), /*#__PURE__*/React.createElement("div", {
216
- className: styles.metricsWithControls
109
+ }, _this.mapInteractionTypeToTranslation(interactionType));
110
+ };
111
+
112
+ _this.renderRichContent = function (itemBody, itemBodyClass) {
113
+ return /*#__PURE__*/React.createElement(Flex, {
114
+ direction: "row",
115
+ alignItems: "start"
116
+ }, /*#__PURE__*/React.createElement(Flex.Item, {
117
+ shouldShrink: true,
118
+ shouldGrow: true
217
119
  }, /*#__PURE__*/React.createElement("div", {
218
- className: styles.metricGroup
120
+ className: itemBodyClass
121
+ }, /*#__PURE__*/React.createElement(RichContentRenderer, {
122
+ content: itemBody
123
+ }))), /*#__PURE__*/React.createElement(Flex.Item, {
124
+ margin: "xx-small small none x-small",
125
+ size: "38px"
126
+ }, /*#__PURE__*/React.createElement(ExpandButton, {
127
+ onClick: _this.handleBodyToggle,
128
+ title: _this.state.bodyExpanded ? t('collapse question stem') : t('expand question stem'),
129
+ isExpanded: _this.state.bodyExpanded
130
+ })));
131
+ };
132
+
133
+ _this.renderMetrics = function (scores, metricsClass) {
134
+ return /*#__PURE__*/React.createElement(Flex, {
135
+ direction: "column"
136
+ }, /*#__PURE__*/React.createElement(Flex.Item, {
137
+ overflowY: "visible"
219
138
  }, /*#__PURE__*/React.createElement("div", {
220
- className: styles.metricsRow
139
+ className: styles.metricsContainer
140
+ }, /*#__PURE__*/React.createElement(Flex.Item, {
141
+ margin: "none medium none none"
221
142
  }, /*#__PURE__*/React.createElement(AnalysisPopoverMetric, {
222
143
  metricKey: "difficulty_index",
223
144
  label: t('Item Difficulty'),
224
145
  value: t.number(scores.difficulty_index),
225
146
  popoverDescription: difficultyIndex
226
- }), /*#__PURE__*/React.createElement(AnalysisMetric, {
147
+ })), /*#__PURE__*/React.createElement(Flex.Item, {
148
+ margin: "none medium none none"
149
+ }, /*#__PURE__*/React.createElement(AnalysisMetric, {
227
150
  metricKey: "mean",
228
151
  label: t('Mean Earned Points'),
229
- value: this.calculateValueWithPointsPossible('mean', scores.mean)
230
- }), /*#__PURE__*/React.createElement(AnalysisMetric, {
152
+ value: _this.calculateValueWithPointsPossible('mean', scores.mean)
153
+ })), /*#__PURE__*/React.createElement(Flex.Item, {
154
+ margin: "none medium none none"
155
+ }, /*#__PURE__*/React.createElement(AnalysisMetric, {
231
156
  metricKey: "median",
232
157
  label: t('Median Earned Points'),
233
- value: this.calculateValueWithPointsPossible('median', scores.median)
234
- }), /*#__PURE__*/React.createElement(AnalysisPopoverMetric, {
158
+ value: _this.calculateValueWithPointsPossible('median', scores.median)
159
+ })), /*#__PURE__*/React.createElement(Flex.Item, {
160
+ margin: "none large none none"
161
+ }, /*#__PURE__*/React.createElement(AnalysisPopoverMetric, {
235
162
  metricKey: "discrimination_index",
236
163
  label: t('Discrimination Index'),
237
164
  value: t.number(scores.discrimination_index),
238
165
  popoverDescription: discriminationIndex
239
- }), this.renderExpandItemCardButton()), this.state.metricsExpanded && this.renderExpanded()))), this.state.itemExpanded && /*#__PURE__*/React.createElement("div", {
240
- className: styles.expandableInnerWrapper
166
+ })))), /*#__PURE__*/React.createElement(Flex.Item, {
167
+ overflowY: "visible",
168
+ margin: "medium none none none"
241
169
  }, /*#__PURE__*/React.createElement("div", {
242
- className: styles.expandableContent
170
+ className: metricsClass
243
171
  }, /*#__PURE__*/React.createElement("div", {
244
- className: styles.tableColumn
245
- }, isSupportedTable && /*#__PURE__*/React.createElement(AnswerSummaryTable, {
172
+ className: styles.metricsContainer
173
+ }, /*#__PURE__*/React.createElement(Flex.Item, {
174
+ margin: "none medium none none"
175
+ }, /*#__PURE__*/React.createElement(AnalysisPopoverMetric, {
176
+ metricKey: "pearson_correlation",
177
+ label: t('Pearson Correlation Coefficient'),
178
+ value: t.number(scores.pearson_correlation),
179
+ popoverDescription: pearsonCorrelation
180
+ }))))));
181
+ };
182
+
183
+ _this.renderAnswerSummaryTable = function (answer_summary, isSupportedTable, metricsClass) {
184
+ return /*#__PURE__*/React.createElement("div", {
185
+ className: metricsClass
186
+ }, isSupportedTable && /*#__PURE__*/React.createElement(Flex, {
187
+ direction: "row"
188
+ }, /*#__PURE__*/React.createElement(Flex.Item, {
189
+ size: "55%"
190
+ }, /*#__PURE__*/React.createElement(AnswerSummaryTable, {
246
191
  answerSummary: answer_summary
247
- })), /*#__PURE__*/React.createElement("div", {
248
- className: styles.performanceColumn
249
192
  }))));
193
+ };
194
+
195
+ return _this;
196
+ }
197
+
198
+ _createClass(NewItemAnalysis, [{
199
+ key: "render",
200
+ value: function render() {
201
+ var _this$props$itemAnaly = this.props.itemAnalysis,
202
+ answer_summary = _this$props$itemAnaly.answer_summary,
203
+ metadata = _this$props$itemAnaly.metadata,
204
+ scores = _this$props$itemAnaly.scores;
205
+ var isSupportedTable = supportedTables.includes(metadata.interaction_type);
206
+ var metricsClass = classnames(_defineProperty({}, styles.hiddenMetrics, !this.state.metricsExpanded));
207
+ var itemBodyClass = classnames(styles.itemBody, _defineProperty({}, styles.hiddenItemBody, !this.state.bodyExpanded));
208
+ return /*#__PURE__*/React.createElement(Card, {
209
+ className: styles.cardWrapper
210
+ }, /*#__PURE__*/React.createElement("div", {
211
+ className: styles.itemCardToggleButtonWrapper
212
+ }, /*#__PURE__*/React.createElement(ExpandButton, {
213
+ onClick: this.handleMetricToggle,
214
+ title: this.state.metricsExpanded ? t('collapse item card') : t('expand item card'),
215
+ isExpanded: this.state.metricsExpanded
216
+ })), /*#__PURE__*/React.createElement(Flex, {
217
+ direction: "column"
218
+ }, /*#__PURE__*/React.createElement(Flex.Item, {
219
+ overflowY: "visible"
220
+ }, /*#__PURE__*/React.createElement("div", {
221
+ className: styles.itemCardInnerContainer
222
+ }, /*#__PURE__*/React.createElement(Flex.Item, {
223
+ shouldGrow: true,
224
+ shouldShrink: true,
225
+ size: "45%"
226
+ }, /*#__PURE__*/React.createElement(Flex, {
227
+ direction: "column",
228
+ justifyItems: "start"
229
+ }, /*#__PURE__*/React.createElement(Flex.Item, null, this.renderTitle(metadata.item_title)), /*#__PURE__*/React.createElement(Flex.Item, null, this.renderInteractionType(metadata.interaction_type)), /*#__PURE__*/React.createElement(Flex.Item, {
230
+ shouldShrink: true,
231
+ overflowY: "hidden",
232
+ size: !this.state.bodyExpanded ? '48px' : void 0
233
+ }, this.renderRichContent(metadata.item_body, itemBodyClass)))), /*#__PURE__*/React.createElement(Flex.Item, null, this.renderMetrics(scores, metricsClass)))), /*#__PURE__*/React.createElement(Flex.Item, null, this.renderAnswerSummaryTable(answer_summary, isSupportedTable, metricsClass))));
250
234
  }
251
235
  }]);
252
236
 
package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/theme.js CHANGED
@@ -5,7 +5,8 @@ export default function generator(_ref) {
5
5
  return {
6
6
  tabletBreakPoint: "max-width: ".concat(breakpoints.large),
7
7
  cardWrapperPadding: spacing.medium,
8
- viewPadding: spacing.small,
8
+ viewPaddingRight: spacing.large,
9
+ viewPaddingTop: spacing.medium,
9
10
  metricNumberContextFontSize: typography.fontSizeMedium,
10
11
  metricNumberContextFontWeight: typography.fontWeightNormal
11
12
  };
package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewQuizAnalysis/presenter.js CHANGED
@@ -8,16 +8,16 @@ var _dec, _class, _class2, _temp;
8
8
  import { Heading } from '@instructure/ui-heading';
9
9
  import React, { Component } from 'react';
10
10
  var styles = {
11
- componentId: 'bnEXV',
11
+ componentId: 'fQZVs',
12
12
  template: function template(theme) {
13
- return "\n\n.bnEXV_eDnN{display:flex;justify-content:space-between;padding-bottom:".concat(theme.headingPadding || 'inherit', "}\n\n.bnEXV_eKXQ{padding:").concat(theme.cardWrapperPadding || 'inherit', ";position:relative}\n\n.bnEXV_crZr{padding-top:").concat(theme.metricGroupPaddingTop || 'inherit', "}\n\n.bnEXV_bTHH{position:absolute;right:").concat(theme.viewPadding || 'inherit', ";top:").concat(theme.viewPadding || 'inherit', "}\n\n.bnEXV_dPzc,.bnEXV_cpZE{column-gap:").concat(theme.metricsColumnGap || 'inherit', ";display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:1.5rem}");
13
+ return "\n\n.fQZVs_eDnN{display:flex;justify-content:space-between;padding-bottom:".concat(theme.headingPadding || 'inherit', "}\n\n.fQZVs_eKXQ{padding:").concat(theme.cardWrapperPadding || 'inherit', ";position:relative}\n\n.fQZVs_crZr{padding-top:").concat(theme.metricGroupPaddingTop || 'inherit', "}\n\n.fQZVs_bTHH{position:absolute;right:").concat(theme.viewPaddingRight || 'inherit', ";top:").concat(theme.viewPaddingTop || 'inherit', "}\n\n.fQZVs_dPzc,.fQZVs_cpZE{column-gap:").concat(theme.metricsColumnGap || 'inherit', ";display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:1.5rem}");
14
14
  },
15
- 'heading': 'bnEXV_eDnN',
16
- 'cardWrapper': 'bnEXV_eKXQ',
17
- 'container': 'bnEXV_crZr',
18
- 'expandButtonContainer': 'bnEXV_bTHH',
19
- 'metricGroup': 'bnEXV_dPzc',
20
- 'metricsWrapper': 'bnEXV_cpZE'
15
+ 'heading': 'fQZVs_eDnN',
16
+ 'cardWrapper': 'fQZVs_eKXQ',
17
+ 'container': 'fQZVs_crZr',
18
+ 'expandButtonContainer': 'fQZVs_bTHH',
19
+ 'metricGroup': 'fQZVs_dPzc',
20
+ 'metricsWrapper': 'fQZVs_cpZE'
21
21
  };
22
22
  import t from '@instructure/quiz-i18n/es/format-message';
23
23
  import ExpandButton from "../../../../../common/components/shared/ExpandButton/index.js";
@@ -102,6 +102,7 @@ export var NewQuizAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
102
102
  className: styles.heading
103
103
  }, /*#__PURE__*/React.createElement(Heading, {
104
104
  level: "h4",
105
+ margin: "0 x-large 0 0",
105
106
  color: "primary"
106
107
  }, t('Quiz summary:'), " ", metadata === null || metadata === void 0 ? void 0 : metadata.quiz_title)), /*#__PURE__*/React.createElement("div", {
107
108
  className: styles.metricGroup
package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewQuizAnalysis/theme.js CHANGED
@@ -2,7 +2,8 @@ export default function generator(_ref) {
2
2
  var spacing = _ref.spacing;
3
3
  return {
4
4
  metricGroupPaddingTop: spacing.medium,
5
- viewPadding: spacing.small,
5
+ viewPaddingRight: spacing.large,
6
+ viewPaddingTop: spacing.medium,
6
7
  headingPadding: spacing.medium,
7
8
  cardWrapperPadding: spacing.medium,
8
9
  metricsColumnGap: '82px'
package/lib/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/presenter.js CHANGED
@@ -41,7 +41,7 @@ var _index3 = _interopRequireDefault(require("../AnalysisMetric/index.js"));
41
41
 
42
42
  var _index4 = _interopRequireDefault(require("../AnalysisPopoverMetric/index.js"));
43
43
 
44
- var _classnames2 = _interopRequireDefault(require("classnames"));
44
+ var _classnames3 = _interopRequireDefault(require("classnames"));
45
45
 
46
46
  var _interactionTypeMetadata = require("../../../../../common/util/interactionTypeMetadata.js");
47
47
 
@@ -49,30 +49,25 @@ var _index5 = _interopRequireDefault(require("../AnswerSummaryTable/index.js"));
49
49
 
50
50
  var _propTypes = require("../propTypes.js");
51
51
 
52
+ var _quizRce = require("@instructure/quiz-rce");
53
+
54
+ var _uiFlex = require("@instructure/ui-flex");
55
+
52
56
  var _dec, _class, _class2, _temp;
53
57
 
54
58
  var styles = {
55
- componentId: 'bCOJX',
59
+ componentId: 'bnyej',
56
60
  template: function template(theme) {
57
- return "\n\n.bCOJX_eDnN{display:flex;flex-basis:45%;flex-direction:column;overflow:hidden}\n\n.bCOJX_eKXQ{padding:".concat(theme.cardWrapperPadding || 'inherit', ";position:relative}\n\n.bCOJX_eoBe{font-size:").concat(theme.metricNumberContextFontSize || 'inherit', ";font-weight:").concat(theme.metricNumberContextFontWeight || 'inherit', "}\n\n.bCOJX_eIAv{display:flex;position:relative}\n\n.bCOJX_ePHw{flex-basis:91%;overflow:hidden;padding-bottom:10px;text-overflow:ellipsis;white-space:nowrap}\n\n.bCOJX_dzsH{overflow:visible;text-overflow:unset;white-space:normal}\n\n.bCOJX_byoJ{position:absolute;right:7px;top:-8px}\n\n.bCOJX_evBt{flex-wrap:wrap;justify-content:space-between}\n\n.bCOJX_pAQb,.bCOJX_evBt{display:flex;flex-direction:row}\n\n.bCOJX_zefc{display:flex;flex-basis:55%;justify-content:flex-end}\n\n.bCOJX_dPzc{flex-direction:column}\n\n.bCOJX_dPzc,.bCOJX_dzph{display:flex;flex-basis:100%}\n\n.bCOJX_dzph{align-items:flex-start;box-sizing:border-box;column-gap:5px;justify-content:space-between;padding:0 30px 0 25px}\n\n.bCOJX_eobd{padding-top:1rem}\n\n.bCOJX_NpIG{position:absolute;right:").concat(theme.viewPadding || 'inherit', ";top:").concat(theme.viewPadding || 'inherit', "}\n\n.bCOJX_csiQ{display:flex;flex-basis:100%}\n\n.bCOJX_fjVl{display:flex;flex-basis:50%}\n\n.bCOJX_eZLI{display:flex;flex-basis:40%}\n\n@media screen and (--tabletBreakPoint){.bCOJX_zefc{flex-basis:100%;justify-content:flex-start}.bCOJX_ePHw{flex-basis:94%}.bCOJX_eDnN{flex-basis:100%}.bCOJX_dzph{padding:0}.bCOJX_eDnN h3{padding-right:30px}.bCOJX_NpIG{right:17px}.bCOJX_eIAv{margin-bottom:20px}.bCOJX_byoJ{right:-7px}.bCOJX_dzph{flex-wrap:wrap}}");
61
+ return "\n\n.bnyej_eKXQ{padding:".concat(theme.cardWrapperPadding || 'inherit', ";position:relative}\n\n.bnyej_bwlc{align-items:flex-start;gap:24px;justify-content:space-between;row-gap:32px}\n\n.bnyej_bwlc,.bnyej_bqdH{display:flex;flex-direction:row;flex-wrap:wrap}\n\n.bnyej_bqdH{align-items:center;row-gap:24px}\n\n.bnyej_NpIG{position:absolute;right:").concat(theme.viewPaddingRight || 'inherit', ";top:").concat(theme.viewPaddingTop || 'inherit', "}\n\n.bnyej_eoBe{font-size:").concat(theme.metricNumberContextFontSize || 'inherit', ";font-weight:").concat(theme.metricNumberContextFontWeight || 'inherit', "}\n\n.bnyej_fFDJ{display:none}\n\n.bnyej_esVF{min-height:48px}\n\n.bnyej_eTZq{position:relative}\n\n.bnyej_eTZq:after{background:linear-gradient(180deg,hsla(0,0%,100%,0),#fff);content:\"\";height:48px;left:0;position:absolute;top:0;width:100%}");
58
62
  },
59
- 'heading': 'bCOJX_eDnN',
60
- 'cardWrapper': 'bCOJX_eKXQ',
61
- 'metricNumberContext': 'bCOJX_eoBe',
62
- 'bodyPresentation': 'bCOJX_eIAv',
63
- 'bodyExcerpt': 'bCOJX_ePHw',
64
- 'bodyExcerptExpanded': 'bCOJX_dzsH',
65
- 'bodyExpandButtonWrapper': 'bCOJX_byoJ',
66
- 'innerWrapper': 'bCOJX_evBt',
67
- 'expandableInnerWrapper': 'bCOJX_pAQb',
68
- 'metricsWithControls': 'bCOJX_zefc',
69
- 'metricGroup': 'bCOJX_dPzc',
70
- 'metricsRow': 'bCOJX_dzph',
71
- 'metricsRowPaginated': 'bCOJX_eobd',
72
- 'itemCardToggleButtonWrapper': 'bCOJX_NpIG',
73
- 'expandableContent': 'bCOJX_csiQ',
74
- 'tableColumn': 'bCOJX_fjVl',
75
- 'performanceColumn': 'bCOJX_eZLI'
63
+ 'cardWrapper': 'bnyej_eKXQ',
64
+ 'itemCardInnerContainer': 'bnyej_bwlc',
65
+ 'metricsContainer': 'bnyej_bqdH',
66
+ 'itemCardToggleButtonWrapper': 'bnyej_NpIG',
67
+ 'metricNumberContext': 'bnyej_eoBe',
68
+ 'hiddenMetrics': 'bnyej_fFDJ',
69
+ 'itemBody': 'bnyej_esVF',
70
+ 'hiddenItemBody': 'bnyej_eTZq'
76
71
  };
77
72
  var supportedTables = ['choice', 'true-false', 'multi-answer'];
78
73
  var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
@@ -91,9 +86,7 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
91
86
 
92
87
  _this = _super.call.apply(_super, [this].concat(args));
93
88
  _this.state = {
94
- bodyToggable: false,
95
89
  bodyExpanded: false,
96
- itemExpanded: false,
97
90
  metricsExpanded: false
98
91
  };
99
92
 
@@ -104,39 +97,10 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
104
97
  });
105
98
  };
106
99
 
107
- _this.buildItemCardHeadingId = function () {
108
- return "itemCardHeading-".concat(_this.props.itemAnalysis.metadata.item_id);
109
- };
110
-
111
- _this.buildItemCardBodyId = function () {
112
- return "itemCardBody-".concat(_this.props.itemAnalysis.metadata.item_id);
113
- };
114
-
115
- _this.bodyExceedsLimit = function (bodyElement, headingElement) {
116
- if (!bodyElement || !headingElement) {
117
- return;
118
- }
119
-
120
- return bodyElement.scrollWidth > headingElement.clientWidth || _this.state.bodyExpanded;
121
- };
122
-
123
- _this.handleBodyWidth = function () {
124
- var bodyElement = document.getElementById(_this.buildItemCardBodyId());
125
- var headingElement = document.getElementById(_this.buildItemCardHeadingId());
126
-
127
- _this.setState({
128
- bodyToggable: _this.bodyExceedsLimit(bodyElement, headingElement)
129
- });
130
- };
131
-
132
- _this.handleToggle = function () {
100
+ _this.handleMetricToggle = function () {
133
101
  _this.setState({
134
102
  metricsExpanded: !_this.state.metricsExpanded
135
103
  });
136
-
137
- _this.setState({
138
- itemExpanded: !_this.state.itemExpanded
139
- });
140
104
  };
141
105
 
142
106
  _this.handleBodyToggle = function () {
@@ -145,26 +109,6 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
145
109
  });
146
110
  };
147
111
 
148
- _this.renderExpandItemCardButton = function () {
149
- return /*#__PURE__*/_react.default.createElement("div", {
150
- className: styles.itemCardToggleButtonWrapper
151
- }, /*#__PURE__*/_react.default.createElement(_index.default, {
152
- onClick: _this.handleToggle,
153
- title: _this.state.metricsExpanded ? (0, _formatMessage.default)('collapse item card') : (0, _formatMessage.default)('expand item card'),
154
- isExpanded: _this.state.metricsExpanded
155
- }));
156
- };
157
-
158
- _this.renderBodyToggleButton = function () {
159
- return /*#__PURE__*/_react.default.createElement("div", {
160
- className: styles.bodyExpandButtonWrapper
161
- }, /*#__PURE__*/_react.default.createElement(_index.default, {
162
- onClick: _this.handleBodyToggle,
163
- title: _this.state.bodyExpanded ? (0, _formatMessage.default)('collapse question stem') : (0, _formatMessage.default)('expand question stem'),
164
- isExpanded: _this.state.bodyExpanded
165
- }));
166
- };
167
-
168
112
  _this.calculateValueWithPointsPossible = function (metricKey, metricValue) {
169
113
  var pointsPossible = _this.props.itemAnalysis.scores.points_possible;
170
114
  return _formatMessage.default.rich('{score, number}<s>/{possible, number} PTS</s>', {
@@ -180,103 +124,145 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
180
124
  });
181
125
  };
182
126
 
183
- _this.renderExpanded = function () {
184
- var scores = _this.props.itemAnalysis.scores;
185
- var classes = (0, _classnames2.default)(styles.metricsRow, styles.metricsRowPaginated);
186
- return /*#__PURE__*/_react.default.createElement("div", {
187
- className: classes
188
- }, /*#__PURE__*/_react.default.createElement(_index4.default, {
189
- metricKey: "pearson_correlation",
190
- label: (0, _formatMessage.default)('Pearson Correlation Coefficient'),
191
- value: _formatMessage.default.number(scores.pearson_correlation),
192
- popoverDescription: _popoverContent.pearsonCorrelation
193
- }));
194
- };
195
-
196
- return _this;
197
- }
198
-
199
- (0, _createClass2.default)(NewItemAnalysis, [{
200
- key: "componentDidMount",
201
- value: function componentDidMount() {
202
- this.handleBodyWidth();
203
- window.addEventListener('resize', this.handleBodyWidth);
204
- }
205
- }, {
206
- key: "componentWillUnmount",
207
- value: function componentWillUnmount() {
208
- window.removeEventListener('resize', this.handleBodyWidth);
209
- }
210
- }, {
211
- key: "render",
212
- value: function render() {
213
- var _this$props$itemAnaly = this.props.itemAnalysis,
214
- answer_summary = _this$props$itemAnaly.answer_summary,
215
- metadata = _this$props$itemAnaly.metadata,
216
- scores = _this$props$itemAnaly.scores;
217
- var bodyClass = (0, _classnames2.default)(styles.bodyExcerpt, (0, _defineProperty2.default)({}, styles.bodyExcerptExpanded, this.state.bodyExpanded));
218
- var headingId = this.buildItemCardHeadingId();
219
- var bodyId = this.buildItemCardBodyId();
220
- var isSupportedTable = supportedTables.includes(metadata.interaction_type);
221
- return /*#__PURE__*/_react.default.createElement(_index2.default, {
222
- className: styles.cardWrapper
223
- }, /*#__PURE__*/_react.default.createElement("div", {
224
- className: styles.innerWrapper
225
- }, /*#__PURE__*/_react.default.createElement("div", {
226
- id: headingId,
227
- className: styles.heading
228
- }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
229
- margin: "0 0 small 0",
127
+ _this.renderTitle = function (title) {
128
+ return /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
129
+ margin: "0 x-large small 0",
230
130
  level: "h3",
231
131
  weight: "bold",
232
132
  color: "primary"
233
- }, metadata.item_title), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
133
+ }, title);
134
+ };
135
+
136
+ _this.renderInteractionType = function (interactionType) {
137
+ return /*#__PURE__*/_react.default.createElement(_uiText.Text, {
234
138
  size: "small",
235
139
  weight: "bold",
236
140
  transform: "capitalize"
237
- }, this.mapInteractionTypeToTranslation(metadata.interaction_type)), /*#__PURE__*/_react.default.createElement("div", {
238
- id: "itemBody",
239
- className: styles.bodyPresentation
240
- }, /*#__PURE__*/_react.default.createElement("div", {
241
- id: bodyId,
242
- className: bodyClass
243
- }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
244
- size: "small"
245
- }, metadata.item_body)), this.state.bodyToggable && this.renderBodyToggleButton())), /*#__PURE__*/_react.default.createElement("div", {
246
- className: styles.metricsWithControls
141
+ }, _this.mapInteractionTypeToTranslation(interactionType));
142
+ };
143
+
144
+ _this.renderRichContent = function (itemBody, itemBodyClass) {
145
+ return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
146
+ direction: "row",
147
+ alignItems: "start"
148
+ }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
149
+ shouldShrink: true,
150
+ shouldGrow: true
247
151
  }, /*#__PURE__*/_react.default.createElement("div", {
248
- className: styles.metricGroup
152
+ className: itemBodyClass
153
+ }, /*#__PURE__*/_react.default.createElement(_quizRce.RichContentRenderer, {
154
+ content: itemBody
155
+ }))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
156
+ margin: "xx-small small none x-small",
157
+ size: "38px"
158
+ }, /*#__PURE__*/_react.default.createElement(_index.default, {
159
+ onClick: _this.handleBodyToggle,
160
+ title: _this.state.bodyExpanded ? (0, _formatMessage.default)('collapse question stem') : (0, _formatMessage.default)('expand question stem'),
161
+ isExpanded: _this.state.bodyExpanded
162
+ })));
163
+ };
164
+
165
+ _this.renderMetrics = function (scores, metricsClass) {
166
+ return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
167
+ direction: "column"
168
+ }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
169
+ overflowY: "visible"
249
170
  }, /*#__PURE__*/_react.default.createElement("div", {
250
- className: styles.metricsRow
171
+ className: styles.metricsContainer
172
+ }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
173
+ margin: "none medium none none"
251
174
  }, /*#__PURE__*/_react.default.createElement(_index4.default, {
252
175
  metricKey: "difficulty_index",
253
176
  label: (0, _formatMessage.default)('Item Difficulty'),
254
177
  value: _formatMessage.default.number(scores.difficulty_index),
255
178
  popoverDescription: _popoverContent.difficultyIndex
256
- }), /*#__PURE__*/_react.default.createElement(_index3.default, {
179
+ })), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
180
+ margin: "none medium none none"
181
+ }, /*#__PURE__*/_react.default.createElement(_index3.default, {
257
182
  metricKey: "mean",
258
183
  label: (0, _formatMessage.default)('Mean Earned Points'),
259
- value: this.calculateValueWithPointsPossible('mean', scores.mean)
260
- }), /*#__PURE__*/_react.default.createElement(_index3.default, {
184
+ value: _this.calculateValueWithPointsPossible('mean', scores.mean)
185
+ })), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
186
+ margin: "none medium none none"
187
+ }, /*#__PURE__*/_react.default.createElement(_index3.default, {
261
188
  metricKey: "median",
262
189
  label: (0, _formatMessage.default)('Median Earned Points'),
263
- value: this.calculateValueWithPointsPossible('median', scores.median)
264
- }), /*#__PURE__*/_react.default.createElement(_index4.default, {
190
+ value: _this.calculateValueWithPointsPossible('median', scores.median)
191
+ })), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
192
+ margin: "none large none none"
193
+ }, /*#__PURE__*/_react.default.createElement(_index4.default, {
265
194
  metricKey: "discrimination_index",
266
195
  label: (0, _formatMessage.default)('Discrimination Index'),
267
196
  value: _formatMessage.default.number(scores.discrimination_index),
268
197
  popoverDescription: _popoverContent.discriminationIndex
269
- }), this.renderExpandItemCardButton()), this.state.metricsExpanded && this.renderExpanded()))), this.state.itemExpanded && /*#__PURE__*/_react.default.createElement("div", {
270
- className: styles.expandableInnerWrapper
198
+ })))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
199
+ overflowY: "visible",
200
+ margin: "medium none none none"
271
201
  }, /*#__PURE__*/_react.default.createElement("div", {
272
- className: styles.expandableContent
202
+ className: metricsClass
273
203
  }, /*#__PURE__*/_react.default.createElement("div", {
274
- className: styles.tableColumn
275
- }, isSupportedTable && /*#__PURE__*/_react.default.createElement(_index5.default, {
204
+ className: styles.metricsContainer
205
+ }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
206
+ margin: "none medium none none"
207
+ }, /*#__PURE__*/_react.default.createElement(_index4.default, {
208
+ metricKey: "pearson_correlation",
209
+ label: (0, _formatMessage.default)('Pearson Correlation Coefficient'),
210
+ value: _formatMessage.default.number(scores.pearson_correlation),
211
+ popoverDescription: _popoverContent.pearsonCorrelation
212
+ }))))));
213
+ };
214
+
215
+ _this.renderAnswerSummaryTable = function (answer_summary, isSupportedTable, metricsClass) {
216
+ return /*#__PURE__*/_react.default.createElement("div", {
217
+ className: metricsClass
218
+ }, isSupportedTable && /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
219
+ direction: "row"
220
+ }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
221
+ size: "55%"
222
+ }, /*#__PURE__*/_react.default.createElement(_index5.default, {
276
223
  answerSummary: answer_summary
277
- })), /*#__PURE__*/_react.default.createElement("div", {
278
- className: styles.performanceColumn
279
224
  }))));
225
+ };
226
+
227
+ return _this;
228
+ }
229
+
230
+ (0, _createClass2.default)(NewItemAnalysis, [{
231
+ key: "render",
232
+ value: function render() {
233
+ var _this$props$itemAnaly = this.props.itemAnalysis,
234
+ answer_summary = _this$props$itemAnaly.answer_summary,
235
+ metadata = _this$props$itemAnaly.metadata,
236
+ scores = _this$props$itemAnaly.scores;
237
+ var isSupportedTable = supportedTables.includes(metadata.interaction_type);
238
+ var metricsClass = (0, _classnames3.default)((0, _defineProperty2.default)({}, styles.hiddenMetrics, !this.state.metricsExpanded));
239
+ var itemBodyClass = (0, _classnames3.default)(styles.itemBody, (0, _defineProperty2.default)({}, styles.hiddenItemBody, !this.state.bodyExpanded));
240
+ return /*#__PURE__*/_react.default.createElement(_index2.default, {
241
+ className: styles.cardWrapper
242
+ }, /*#__PURE__*/_react.default.createElement("div", {
243
+ className: styles.itemCardToggleButtonWrapper
244
+ }, /*#__PURE__*/_react.default.createElement(_index.default, {
245
+ onClick: this.handleMetricToggle,
246
+ title: this.state.metricsExpanded ? (0, _formatMessage.default)('collapse item card') : (0, _formatMessage.default)('expand item card'),
247
+ isExpanded: this.state.metricsExpanded
248
+ })), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
249
+ direction: "column"
250
+ }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
251
+ overflowY: "visible"
252
+ }, /*#__PURE__*/_react.default.createElement("div", {
253
+ className: styles.itemCardInnerContainer
254
+ }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
255
+ shouldGrow: true,
256
+ shouldShrink: true,
257
+ size: "45%"
258
+ }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
259
+ direction: "column",
260
+ justifyItems: "start"
261
+ }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, this.renderTitle(metadata.item_title)), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, this.renderInteractionType(metadata.interaction_type)), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
262
+ shouldShrink: true,
263
+ overflowY: "hidden",
264
+ size: !this.state.bodyExpanded ? '48px' : void 0
265
+ }, this.renderRichContent(metadata.item_body, itemBodyClass)))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, this.renderMetrics(scores, metricsClass)))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, this.renderAnswerSummaryTable(answer_summary, isSupportedTable, metricsClass))));
280
266
  }
281
267
  }]);
282
268
  NewItemAnalysis.displayName = "NewItemAnalysis";
package/lib/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/theme.js CHANGED
@@ -12,7 +12,8 @@ function generator(_ref) {
12
12
  return {
13
13
  tabletBreakPoint: "max-width: ".concat(breakpoints.large),
14
14
  cardWrapperPadding: spacing.medium,
15
- viewPadding: spacing.small,
15
+ viewPaddingRight: spacing.large,
16
+ viewPaddingTop: spacing.medium,
16
17
  metricNumberContextFontSize: typography.fontSizeMedium,
17
18
  metricNumberContextFontWeight: typography.fontWeightNormal
18
19
  };
package/lib/reporting/components/resources/NewQuizAndItemAnalysis/NewQuizAnalysis/presenter.js CHANGED
@@ -44,16 +44,16 @@ var _propTypes = require("../propTypes.js");
44
44
  var _dec, _class, _class2, _temp;
45
45
 
46
46
  var styles = {
47
- componentId: 'bnEXV',
47
+ componentId: 'fQZVs',
48
48
  template: function template(theme) {
49
- return "\n\n.bnEXV_eDnN{display:flex;justify-content:space-between;padding-bottom:".concat(theme.headingPadding || 'inherit', "}\n\n.bnEXV_eKXQ{padding:").concat(theme.cardWrapperPadding || 'inherit', ";position:relative}\n\n.bnEXV_crZr{padding-top:").concat(theme.metricGroupPaddingTop || 'inherit', "}\n\n.bnEXV_bTHH{position:absolute;right:").concat(theme.viewPadding || 'inherit', ";top:").concat(theme.viewPadding || 'inherit', "}\n\n.bnEXV_dPzc,.bnEXV_cpZE{column-gap:").concat(theme.metricsColumnGap || 'inherit', ";display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:1.5rem}");
49
+ return "\n\n.fQZVs_eDnN{display:flex;justify-content:space-between;padding-bottom:".concat(theme.headingPadding || 'inherit', "}\n\n.fQZVs_eKXQ{padding:").concat(theme.cardWrapperPadding || 'inherit', ";position:relative}\n\n.fQZVs_crZr{padding-top:").concat(theme.metricGroupPaddingTop || 'inherit', "}\n\n.fQZVs_bTHH{position:absolute;right:").concat(theme.viewPaddingRight || 'inherit', ";top:").concat(theme.viewPaddingTop || 'inherit', "}\n\n.fQZVs_dPzc,.fQZVs_cpZE{column-gap:").concat(theme.metricsColumnGap || 'inherit', ";display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:1.5rem}");
50
50
  },
51
- 'heading': 'bnEXV_eDnN',
52
- 'cardWrapper': 'bnEXV_eKXQ',
53
- 'container': 'bnEXV_crZr',
54
- 'expandButtonContainer': 'bnEXV_bTHH',
55
- 'metricGroup': 'bnEXV_dPzc',
56
- 'metricsWrapper': 'bnEXV_cpZE'
51
+ 'heading': 'fQZVs_eDnN',
52
+ 'cardWrapper': 'fQZVs_eKXQ',
53
+ 'container': 'fQZVs_crZr',
54
+ 'expandButtonContainer': 'fQZVs_bTHH',
55
+ 'metricGroup': 'fQZVs_dPzc',
56
+ 'metricsWrapper': 'fQZVs_cpZE'
57
57
  };
58
58
  var stdDevPopoverTexts = {
59
59
  title: 'Lorem ipsum ',
@@ -128,6 +128,7 @@ var NewQuizAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
128
128
  className: styles.heading
129
129
  }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
130
130
  level: "h4",
131
+ margin: "0 x-large 0 0",
131
132
  color: "primary"
132
133
  }, (0, _formatMessage.default)('Quiz summary:'), " ", metadata === null || metadata === void 0 ? void 0 : metadata.quiz_title)), /*#__PURE__*/_react.default.createElement("div", {
133
134
  className: styles.metricGroup
package/lib/reporting/components/resources/NewQuizAndItemAnalysis/NewQuizAnalysis/theme.js CHANGED
@@ -9,7 +9,8 @@ function generator(_ref) {
9
9
  var spacing = _ref.spacing;
10
10
  return {
11
11
  metricGroupPaddingTop: spacing.medium,
12
- viewPadding: spacing.small,
12
+ viewPaddingRight: spacing.large,
13
+ viewPaddingTop: spacing.medium,
13
14
  headingPadding: spacing.medium,
14
15
  cardWrapperPadding: spacing.medium,
15
16
  metricsColumnGap: '82px'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/quiz-core",
3
- "version": "17.63.1-rc.4+d5b17d3d0",
3
+ "version": "17.63.1-rc.5+3b1ed689c",
4
4
  "license": "MIT",
5
5
  "description": "The Quiz React SDK by Instructure Inc.",
6
6
  "author": "Instructure, Inc. Engineering and Product Design",
@@ -41,11 +41,11 @@
41
41
  ],
42
42
  "dependencies": {
43
43
  "@instructure/outcomes-ui": "^2.1.9",
44
- "@instructure/quiz-common": "17.63.1-rc.4+d5b17d3d0",
45
- "@instructure/quiz-i18n": "17.63.1-rc.4+d5b17d3d0",
46
- "@instructure/quiz-interactions": "17.63.1-rc.4+d5b17d3d0",
47
- "@instructure/quiz-number-input": "17.63.1-rc.4+d5b17d3d0",
48
- "@instructure/quiz-rce": "17.63.1-rc.4+d5b17d3d0",
44
+ "@instructure/quiz-common": "17.63.1-rc.5+3b1ed689c",
45
+ "@instructure/quiz-i18n": "17.63.1-rc.5+3b1ed689c",
46
+ "@instructure/quiz-interactions": "17.63.1-rc.5+3b1ed689c",
47
+ "@instructure/quiz-number-input": "17.63.1-rc.5+3b1ed689c",
48
+ "@instructure/quiz-rce": "17.63.1-rc.5+3b1ed689c",
49
49
  "@instructure/ui-a11y-content": "^7.20.0",
50
50
  "@instructure/ui-alerts": "^7.20.0",
51
51
  "@instructure/ui-avatar": "^7.20.0",
@@ -106,7 +106,7 @@
106
106
  "eventemitter3": "^3.1.0",
107
107
  "humps": "^2.0.0",
108
108
  "immutable": "^3.8.1",
109
- "instructure-validations": "17.63.1-rc.4+d5b17d3d0",
109
+ "instructure-validations": "17.63.1-rc.5+3b1ed689c",
110
110
  "ipaddr.js": "^1.5.4",
111
111
  "isomorphic-fetch": "^2.2.0",
112
112
  "isuuid": "^0.1.0",
@@ -157,7 +157,7 @@
157
157
  "intl": "^1.2.4",
158
158
  "jquery": "^2.2.3",
159
159
  "most-subject": "^5.3.0",
160
- "quiz-presets": "17.63.1-rc.4+d5b17d3d0",
160
+ "quiz-presets": "17.63.1-rc.5+3b1ed689c",
161
161
  "react": "^16.8.6",
162
162
  "react-addons-test-utils": "^15.6.2",
163
163
  "react-dom": "^16.8.6",
@@ -173,5 +173,5 @@
173
173
  "publishConfig": {
174
174
  "access": "public"
175
175
  },
176
- "gitHead": "d5b17d3d081eaf1eedc84b1bf597eb972ecccb20"
176
+ "gitHead": "3b1ed689cbb9d38d69287f541dfa2396cc315f28"
177
177
  }