@instructure/quiz-core 20.4.2-rc.0 → 20.4.2-rc.2

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/NewQuizAnalysis/presenter.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -19,13 +17,15 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
+
+var _styles = _interopRequireDefault(require("./styles.js"));
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
 var _index = _interopRequireDefault(require("../../../../../common/components/shared/ExpandButton/index.js"));
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
@@ -49,20 +49,7 @@ var _popoverContent = require("./popoverContent.js");
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'eHqQt',
-  template: function template(theme) {
-    return "\n\n.eHqQt_eDnN{display:flex;justify-content:space-between;padding-bottom:".concat(theme.headingPadding || 'inherit', "}\n\n.eHqQt_eKXQ{margin:").concat(theme.cardTopMargin || 'inherit', " auto ").concat(theme.cardBottomMargin || 'inherit', " auto;padding:").concat(theme.cardWrapperPadding || 'inherit', ";position:relative}\n\n.eHqQt_dYbQ{align-items:center;display:flex;height:502px;justify-content:center;padding:").concat(theme.cardWrapperPadding || 'inherit', "}\n\n.eHqQt_crZr{padding-top:").concat(theme.metricGroupPaddingTop || 'inherit', "}\n\n.eHqQt_bTHH{position:absolute;right:calc(").concat(theme.viewPaddingRight || 'inherit', " + ").concat(theme.viewPaddingRightAdjust || 'inherit', ");top:").concat(theme.viewPaddingTop || 'inherit', "}\n\n.eHqQt_dPzc,.eHqQt_cpZE{column-gap:").concat(theme.metricsColumnGap || 'inherit', ";display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:1.5rem}");
-  },
-  'heading': 'eHqQt_eDnN',
-  'cardWrapper': 'eHqQt_eKXQ',
-  'skeletonCardWrapper': 'eHqQt_dYbQ',
-  'container': 'eHqQt_crZr',
-  'expandButtonContainer': 'eHqQt_bTHH',
-  'metricGroup': 'eHqQt_dPzc',
-  'metricsWrapper': 'eHqQt_cpZE'
-};
-var NewQuizAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var NewQuizAnalysis = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(NewQuizAnalysis, _Component);
 
   var _super = (0, _createSuper2.default)(NewQuizAnalysis);
@@ -89,16 +76,16 @@ var NewQuizAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
 
     _this.renderExpanded = function () {
       var scores = _this.props.quizAnalysis.scores;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.container
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.metricGroup
-      }, /*#__PURE__*/_react.default.createElement(_index3.default, {
+      return (0, _emotion.jsx)("div", {
+        css: _this.props.styles.container
+      }, (0, _emotion.jsx)("div", {
+        css: _this.props.styles.metricGroup
+      }, (0, _emotion.jsx)(_index3.default, {
         metricKey: "stddev",
         value: scores === null || scores === void 0 ? void 0 : scores.stddev,
         label: (0, _formatMessage.default)('Standard Deviation'),
         popoverDescription: _popoverContent.standardDeviation
-      }), /*#__PURE__*/_react.default.createElement(_index3.default, {
+      }), (0, _emotion.jsx)(_index3.default, {
         metricKey: "cronbachs_alpha",
         value: scores === null || scores === void 0 ? void 0 : scores.cronbachs_alpha,
         label: (0, _formatMessage.default)('Cronbach\'s Alpha'),
@@ -111,45 +98,45 @@ var NewQuizAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       var scores = quizAnalysis.scores,
           attempts = quizAnalysis.attempts;
       var expanded = _this.state.expanded;
-      return /*#__PURE__*/_react.default.createElement(_index2.default, {
-        className: styles.cardWrapper
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.metricGroup
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.metricsWrapper
-      }, /*#__PURE__*/_react.default.createElement(_index4.default, {
+      return (0, _emotion.jsx)(_index2.default, {
+        css: _this.props.styles.cardWrapper
+      }, (0, _emotion.jsx)("div", {
+        css: _this.props.styles.metricGroup
+      }, (0, _emotion.jsx)("div", {
+        css: _this.props.styles.metricsWrapper
+      }, (0, _emotion.jsx)(_index4.default, {
         metricKey: "highscore",
         label: (0, _formatMessage.default)('High Score'),
         value: scores === null || scores === void 0 ? void 0 : scores.max_percentage,
         suffix: "%"
-      }), /*#__PURE__*/_react.default.createElement(_index4.default, {
+      }), (0, _emotion.jsx)(_index4.default, {
         metricKey: "lowscore",
         label: (0, _formatMessage.default)('Low Score'),
         value: scores === null || scores === void 0 ? void 0 : scores.min_percentage,
         suffix: "%"
-      }), /*#__PURE__*/_react.default.createElement(_index4.default, {
+      }), (0, _emotion.jsx)(_index4.default, {
         metricKey: "meanscore",
         label: (0, _formatMessage.default)('Mean Score'),
         value: scores === null || scores === void 0 ? void 0 : scores.mean_percentage,
         suffix: "%"
-      })), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.metricsWrapper
-      }, /*#__PURE__*/_react.default.createElement(_index4.default, {
+      })), (0, _emotion.jsx)("div", {
+        css: _this.props.styles.metricsWrapper
+      }, (0, _emotion.jsx)(_index4.default, {
         metricKey: "median_percentage",
         label: (0, _formatMessage.default)('Median Score'),
         value: scores === null || scores === void 0 ? void 0 : scores.median_percentage,
         suffix: "%"
-      }), /*#__PURE__*/_react.default.createElement(_index4.default, {
+      }), (0, _emotion.jsx)(_index4.default, {
         metricKey: "mean_elapsed_sec",
         label: (0, _formatMessage.default)('Mean Elapsed Time'),
         value: (0, _formatTimespan.formatTimeToFullNumeric)(attempts === null || attempts === void 0 ? void 0 : attempts.mean_elapsed_sec)
-      })), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.expandButtonContainer
-      }, /*#__PURE__*/_react.default.createElement(_index.default, {
+      })), (0, _emotion.jsx)("div", {
+        css: _this.props.styles.expandButtonContainer
+      }, (0, _emotion.jsx)(_index.default, {
         onClick: _this.handleToggle,
         title: expanded ? (0, _formatMessage.default)('collapse quiz analysis') : (0, _formatMessage.default)('expand quiz analysis'),
         isExpanded: expanded
-      }))), expanded && _this.renderExpanded(), /*#__PURE__*/_react.default.createElement(_presenter.ScoreDistribution, {
+      }))), expanded && _this.renderExpanded(), (0, _emotion.jsx)(_presenter.ScoreDistribution, {
         decileDistribution: _this.getPreparedDecileDistribution()
       }));
     };
@@ -180,9 +167,9 @@ var NewQuizAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       var fetchInProgress = this.props.fetchInProgress;
 
       if (fetchInProgress) {
-        return /*#__PURE__*/_react.default.createElement(_index2.default, {
-          className: styles.skeletonCardWrapper
-        }, /*#__PURE__*/_react.default.createElement(_uiSpinner.Spinner, {
+        return (0, _emotion.jsx)(_index2.default, {
+          css: this.props.styles.skeletonCardWrapper
+        }, (0, _emotion.jsx)(_uiSpinner.Spinner, {
           renderTitle: (0, _formatMessage.default)('Loading quiz analysis data')
         }));
       } else {
@@ -194,7 +181,8 @@ var NewQuizAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   return NewQuizAnalysis;
 }(_react.Component), _class2.propTypes = {
   quizAnalysis: _propTypes.quizAnalysisPropType,
-  fetchInProgress: _propTypes2.default.bool
+  fetchInProgress: _propTypes2.default.bool,
+  styles: _propTypes2.default.object
 }.isRequired, _class2.defaultProps = {
   quizAnalysis: {}
 }, _temp)) || _class);

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/NewQuizAnalysis/styles.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  var metric = {
+    flexWrap: 'wrap',
+    display: 'flex',
+    justifyContent: 'flex-start',
+    columnGap: componentTheme.metricsColumnGap,
+    rowGap: '1.5rem'
+  };
+  return {
+    heading: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      paddingBottom: componentTheme.headingPadding
+    },
+    cardWrapper: {
+      padding: componentTheme.cardWrapperPadding,
+      position: 'relative',
+      margin: "".concat(componentTheme.cardTopMargin, " auto ").concat(componentTheme.cardBottomMargin, " auto")
+    },
+    skeletonCardWrapper: {
+      padding: componentTheme.cardWrapperPadding,
+      height: '502px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    container: {
+      paddingTop: componentTheme.metricGroupPaddingTop
+    },
+    expandButtonContainer: {
+      position: 'absolute',
+      right: "calc(".concat(componentTheme.viewPaddingRight, " + ").concat(componentTheme.viewPaddingRightAdjust, ")"),
+      top: componentTheme.viewPaddingTop
+    },
+    metricsWrapper: metric,
+    metricGroup: metric
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/NewQuizAnalysis/theme.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing;
   return {
     metricGroupPaddingTop: spacing.medium,
@@ -18,4 +18,7 @@ function generator(_ref) {
     cardWrapperPadding: spacing.medium,
     metricsColumnGap: '82px'
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/charts/ScoreDistribution/presenter.js

@@ -19,12 +19,16 @@ var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _index = _interopRequireDefault(require("../../../../charts/QuintileDistribution/index.js"));
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
 var _uiText = require("@instructure/ui-text");
@@ -33,19 +37,11 @@ var _uiHeading = require("@instructure/ui-heading");
 
 var _index2 = _interopRequireDefault(require("../../../../charts/Legend/index.js"));
 
-var _dec, _class, _temp;
-
-var styles = {
-  componentId: 'eRgoL',
-  template: function template(theme) {
-    return "\n\n.eRgoL_YBfL{background-color:".concat(theme.legendRectFillColor || 'inherit', "}\n\n.eRgoL_eDZF{column-gap:10px;display:inline-flex;padding:").concat(theme.legendPadding || 'inherit', " 0}\n\n.eRgoL_dVXF{margin:").concat(theme.legendMargin || 'inherit', " 0}\n\n.eRgoL_dxZa,[dir=ltr] .eRgoL_dxZa,[dir=rtl] .eRgoL_dxZa{text-align:center}");
-  },
-  'legendRect': 'eRgoL_YBfL',
-  'legendContainer': 'eRgoL_eDZF',
-  'headingContainer': 'eRgoL_dVXF',
-  'chartLabel': 'eRgoL_dxZa'
-};
-var ScoreDistribution = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = /*#__PURE__*/function (_Component) {
+var _match = require("sinon/lib/sinon/match");
+
+var _dec, _class, _class2, _temp;
+
+var ScoreDistribution = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ScoreDistribution, _Component);
 
   var _super = (0, _createSuper2.default)(ScoreDistribution);
@@ -87,28 +83,28 @@ var ScoreDistribution = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
     key: "render",
     value: function render() {
       var decileDistribution = this.props.decileDistribution;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.headingContainer
-      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      return (0, _emotion.jsx)(_react.default.Fragment, null, (0, _emotion.jsx)("div", {
+        css: this.props.styles.headingContainer
+      }, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: "h3",
         themeOverride: {
           h3FontWeight: 700
         }
-      }, (0, _formatMessage.default)('Score Distribution'))), /*#__PURE__*/_react.default.createElement(_index.default, {
+      }, (0, _formatMessage.default)('Score Distribution'))), (0, _emotion.jsx)(_index.default, {
         animateDelay: 1000,
         animateDuration: 1000,
         visualDistribution: decileDistribution || [],
         calculateLabelForColumn: decileDistribution.length > 10 ? this.calculateLabelForColumnsWithExtremeValues : this.calculateLabelForColumns
-      }), /*#__PURE__*/_react.default.createElement("div", {
+      }), (0, _emotion.jsx)("div", {
         "aria-hidden": "true",
-        className: styles.chartLabel
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        css: this.props.styles.chartLabel
+      }, (0, _emotion.jsx)(_uiText.Text, {
         size: "small"
-      }, (0, _formatMessage.default)('Score'))), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.legendContainer
-      }, /*#__PURE__*/_react.default.createElement(_index2.default, {
+      }, (0, _formatMessage.default)('Score'))), (0, _emotion.jsx)("div", {
+        css: this.props.styles.legendContainer
+      }, (0, _emotion.jsx)(_index2.default, {
         series: [{
-          className: styles.legendRect,
+          customStyles: this.props.styles.legendRect,
           label: (0, _formatMessage.default)('Number of Students')
         }]
       })));
@@ -116,5 +112,10 @@ var ScoreDistribution = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
   }]);
   ScoreDistribution.displayName = "ScoreDistribution";
   return ScoreDistribution;
-}(_react.Component), _temp)) || _class);
+}(_react.Component), _class2.propTypes = {
+  decileDistribution: _propTypes.default.arrayOf(_propTypes.default.number),
+  styles: _propTypes.default.object
+}, _class2.defaultProps = {
+  decileDistribution: []
+}, _temp)) || _class);
 exports.ScoreDistribution = ScoreDistribution;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/charts/ScoreDistribution/styles.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    legendRect: {
+      backgroundColor: componentTheme.legendRectFillColor
+    },
+    legendContainer: {
+      display: 'inline-flex',
+      columnGap: '10px',
+      padding: "".concat(componentTheme.legendPadding, " 0")
+    },
+    headingContainer: {
+      margin: "".concat(componentTheme.legendMargin, " 0")
+    },
+    chartLabel: {
+      textAlign: 'center'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/charts/ScoreDistribution/theme.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
       spacing = _ref.spacing,
       typography = _ref.typography;
@@ -16,4 +16,7 @@ function generator(_ref) {
     legendFontSize: typography.fontSizeXSmall,
     legendMargin: spacing.medium
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "20.4.2-rc.0+955d9bdff",
+  "version": "20.4.2-rc.2+c00fb83ef",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -44,11 +44,11 @@
     "@instructure/emotion": "^8.51.0",
     "@instructure/grading-utils": "^1.0.0",
     "@instructure/outcomes-ui": "^3.0.0",
-    "@instructure/quiz-common": "20.4.2-rc.0+955d9bdff",
-    "@instructure/quiz-i18n": "20.4.2-rc.0+955d9bdff",
-    "@instructure/quiz-interactions": "20.4.2-rc.0+955d9bdff",
-    "@instructure/quiz-number-input": "20.4.2-rc.0+955d9bdff",
-    "@instructure/quiz-rce": "20.4.2-rc.0+955d9bdff",
+    "@instructure/quiz-common": "20.4.2-rc.2+c00fb83ef",
+    "@instructure/quiz-i18n": "20.4.2-rc.2+c00fb83ef",
+    "@instructure/quiz-interactions": "20.4.2-rc.2+c00fb83ef",
+    "@instructure/quiz-number-input": "20.4.2-rc.2+c00fb83ef",
+    "@instructure/quiz-rce": "20.4.2-rc.2+c00fb83ef",
     "@instructure/ui-a11y-content": "^8.51.0",
     "@instructure/ui-alerts": "^8.51.0",
     "@instructure/ui-avatar": "^8.51.0",
@@ -112,7 +112,7 @@
     "file-saver": "~2.0.5",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "20.4.2-rc.0+955d9bdff",
+    "instructure-validations": "20.4.2-rc.2+c00fb83ef",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -163,7 +163,7 @@
     "intl": "^1.2.4",
     "jquery": "^2.2.3",
     "most-subject": "^5.3.0",
-    "quiz-presets": "20.4.2-rc.0+955d9bdff",
+    "quiz-presets": "20.4.2-rc.2+c00fb83ef",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -179,5 +179,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "955d9bdffbb4a58c050f6079406cf9eec6371436"
+  "gitHead": "c00fb83eff9b7f6ad944293fa4f3ede03786cbb3"
 }