@instructure/quiz-core 20.11.2 → 20.11.3-rc.10

package/es/moderating/components/resources/ModerateTableRow/styles.js

@@ -0,0 +1,25 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    moderateButton: {
+      float: 'right'
+    },
+    avatarRow: {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    avatarName: {
+      marginLeft: componentTheme.avatarNameMargin,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      fontWeight: 'initial'
+    },
+    tableDataItem: {
+      ':not(:first-child)': {
+        paddingTop: componentTheme.tableDataItemPadding
+      }
+    }
+  };
+};
+
+export default generateStyle;

package/es/moderating/components/resources/ModerateTableRow/theme.js

@@ -1,7 +1,9 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing;
   return {
     avatarNameMargin: spacing.xSmall,
     tableDataItemPadding: spacing.xxSmall
   };
-}
+};
+
+export default generateComponentTheme;

package/es/reporting/components/itemAnalysis/AnswerFrequencySummary/index.js

@@ -149,7 +149,7 @@ export var AnswerFrequencySummary = (_dec = themeable(theme, styles), _dec(_clas
       }, t('Respondents')), /*#__PURE__*/React.createElement(Table.ColHeader, {
         id: "answer-frequency-summary-answer-ratio",
         className: styles.answerRatio
-      }, t('%')))), /*#__PURE__*/React.createElement(Table.Body, null, choiceInfo.toArray().map(this.renderAnswerTableRow), this.renderAnswerTableRow(this.unansweredChoiceInfo, choiceInfo.size))));
+      }, t('Percentage')))), /*#__PURE__*/React.createElement(Table.Body, null, choiceInfo.toArray().map(this.renderAnswerTableRow), this.renderAnswerTableRow(this.unansweredChoiceInfo, choiceInfo.size))));
     }
   }]);
 

package/es/reporting/components/quizAnalysis/QuizAnalysisOverview.js

@@ -5,36 +5,28 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Heading } from '@instructure/ui-heading';
 import { MetricGroup } from '@instructure/ui-metric';
 import { Text } from '@instructure/ui-text';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import FormattedDuration from "../../../common/components/shared/FormattedDuration/index.js";
 import t from '@instructure/quiz-i18n/es/format-message';
 import Card from "../../../common/components/shared/Card/index.js";
 import Spinner from "../../../common/components/shared/spinner/Spinner.js";
 import CentileDistribution from "../charts/CentileDistribution/index.js";
 import MetricsListItem from "../MetricsListItem/index.js";
-var styles = {
-  componentId: 'fOAfX',
-  template: function template(theme) {
-    return "\n\n.fOAfX_bGBk{padding:".concat(theme.rootPadding || 'inherit', "}\n\n.fOAfX_CIyo{padding-bottom:").concat(theme.metricWrapperPadding || 'inherit', "}\n\n.fOAfX_CIyo,.fOAfX_gasz{margin-top:").concat(theme.wrapperMargin || 'inherit', "}\n\n@media screen and (--tabletBreakPoint){.fOAfX_eiMu{flex-basis:33.3%}}\n\n@media screen and (--phoneBreakPoint){.fOAfX_eiMu{flex-basis:50%}}");
-  },
-  'root': 'fOAfX_bGBk',
-  'metricWrapper': 'fOAfX_CIyo',
-  'wrapper': 'fOAfX_gasz',
-  'metric': 'fOAfX_eiMu'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 
-var _ref = /*#__PURE__*/React.createElement("br", null);
+var _ref = jsx("br", null);
 
-var _ref2 = /*#__PURE__*/React.createElement(Spinner, null);
+var _ref2 = jsx(Spinner, null);
 
-export var QuizAnalysisOverview = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var QuizAnalysisOverview = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(QuizAnalysisOverview, _Component);
 
   var _super = _createSuper(QuizAnalysisOverview);
@@ -53,10 +45,10 @@ export var QuizAnalysisOverview = (_dec = themeable(theme, styles), _dec(_class
     _this.renderBatchTimestamp = function () {
       if (_this.props.quizAnalysis.batchTimestamp) {
         var timestamp = Date.parse(_this.props.quizAnalysis.batchTimestamp);
-        return /*#__PURE__*/React.createElement(Text, {
+        return jsx(Text, {
           color: "secondary",
           size: "x-small"
-        }, _ref, /*#__PURE__*/React.createElement("b", null, t('Data Last Updated:')), "\xA0", t.date(timestamp, 'medium'));
+        }, _ref, jsx("b", null, t('Data Last Updated:')), "\xA0", t.date(timestamp, 'medium'));
       }
     };
 
@@ -67,47 +59,47 @@ export var QuizAnalysisOverview = (_dec = themeable(theme, styles), _dec(_class
     key: "defaulMetrics",
     value: function defaulMetrics() {
       var quizAnalysis = this.props.quizAnalysis;
-      var formattedElapsedTime = /*#__PURE__*/React.createElement(FormattedDuration, {
+      var formattedElapsedTime = jsx(FormattedDuration, {
         fontSize: "x-large",
         seconds: quizAnalysis.meanElapsedTime()
       });
-      return /*#__PURE__*/React.createElement(MetricGroup, null, /*#__PURE__*/React.createElement(MetricsListItem, {
+      return jsx(MetricGroup, null, jsx(MetricsListItem, {
         key: "highScore",
         renderLabel: t('High Score'),
         renderValue: quizAnalysis.highScore(),
-        className: styles.metric,
+        css: this.props.styles.metric,
         isGroupChild: true
-      }), /*#__PURE__*/React.createElement(MetricsListItem, {
+      }), jsx(MetricsListItem, {
         key: "lowScore",
         renderLabel: t('Low Score'),
         renderValue: quizAnalysis.lowScore(),
-        className: styles.metric,
+        css: this.props.styles.metric,
         isGroupChild: true
-      }), /*#__PURE__*/React.createElement(MetricsListItem, {
+      }), jsx(MetricsListItem, {
         key: "meanScore",
         renderLabel: t('Mean Score'),
         renderValue: quizAnalysis.meanScore(),
-        className: styles.metric,
+        css: this.props.styles.metric,
         isGroupChild: true
-      }), /*#__PURE__*/React.createElement(MetricsListItem, {
+      }), jsx(MetricsListItem, {
         key: "standardDeviation",
         renderLabel: t('Standard Deviation'),
         renderValue: quizAnalysis.standardDeviation(),
-        className: styles.metric,
+        css: this.props.styles.metric,
         isGroupChild: true
-      }), /*#__PURE__*/React.createElement(MetricsListItem, {
+      }), jsx(MetricsListItem, {
         key: "meanElapsedTime",
         renderLabel: t('Mean Elapsed Time'),
-        renderValue: /*#__PURE__*/React.createElement(Text, {
+        renderValue: jsx(Text, {
           size: "x-large"
         }, formattedElapsedTime),
-        className: styles.metric,
+        css: this.props.styles.metric,
         isGroupChild: true
-      }), /*#__PURE__*/React.createElement(MetricsListItem, {
+      }), jsx(MetricsListItem, {
         key: "cronbachsAlpha",
         renderLabel: t('Cronbach\'s Alpha'),
         renderValue: quizAnalysis.cronbachsAlpha(),
-        className: styles.metric,
+        css: this.props.styles.metric,
         isGroupChild: true
       }));
     }
@@ -120,18 +112,18 @@ export var QuizAnalysisOverview = (_dec = themeable(theme, styles), _dec(_class
           quizAnalysis = _this$props.quizAnalysis,
           quizTitle = _this$props.quizTitle;
       if (!quizAnalysis.isLoaded()) return _ref2;
-      var list = React.Children.count(this.props.children) === 0 ? this.defaulMetrics() : /*#__PURE__*/React.createElement(MetricGroup, null, this.props.children);
-      return /*#__PURE__*/React.createElement(Card, {
-        className: styles.root
-      }, /*#__PURE__*/React.createElement(Heading, {
+      var list = React.Children.count(this.props.children) === 0 ? this.defaulMetrics() : jsx(MetricGroup, null, this.props.children);
+      return jsx(Card, {
+        css: this.props.styles.root
+      }, jsx(Heading, {
         level: "h4",
         as: "h2",
         color: "primary"
-      }, quizTitle), /*#__PURE__*/React.createElement("div", {
-        className: styles.metricWrapper
-      }, list), /*#__PURE__*/React.createElement("div", {
-        className: styles.wrapper
-      }, /*#__PURE__*/React.createElement(CentileDistribution, {
+      }, quizTitle), jsx("div", {
+        css: this.props.styles.metricWrapper
+      }, list), jsx("div", {
+        css: this.props.styles.wrapper
+      }, jsx(CentileDistribution, {
         animateDelay: animateDelay,
         animateDuration: animateDuration,
         summaryDistribution: quizAnalysis.decileDistribution(),
@@ -147,7 +139,8 @@ export var QuizAnalysisOverview = (_dec = themeable(theme, styles), _dec(_class
   animateDuration: PropTypes.number,
   quizAnalysis: ImmutablePropTypes.record.isRequired,
   quizTitle: PropTypes.string.isRequired,
-  children: PropTypes.arrayOf(PropTypes.node)
+  children: PropTypes.arrayOf(PropTypes.node),
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   animateDelay: void 0,
   animateDuration: void 0,

package/es/reporting/components/quizAnalysis/styles.js

@@ -0,0 +1,27 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+var generateStyle = function generateStyle(componentTheme) {
+  var _metric;
+
+  var tabletBreakPoint = "@media screen and (".concat(componentTheme.tabletBreakPoint, ")");
+  var phoneBreakPoint = "@media screen and (".concat(componentTheme.phoneBreakPoint, ")");
+  return {
+    root: {
+      padding: componentTheme.rootPadding
+    },
+    metricWrapper: {
+      marginTop: componentTheme.wrapperMargin,
+      paddingBottom: componentTheme.metricWrapperPadding
+    },
+    wrapper: {
+      marginTop: componentTheme.wrapperMargin
+    },
+    metric: (_metric = {}, _defineProperty(_metric, tabletBreakPoint, {
+      flexBasis: '33.3%'
+    }), _defineProperty(_metric, phoneBreakPoint, {
+      flexBasis: '50%'
+    }), _metric)
+  };
+};
+
+export default generateStyle;

package/es/reporting/components/quizAnalysis/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       typography = _ref.typography,
       colors = _ref.colors,
@@ -10,4 +10,6 @@ export default function generator(_ref) {
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
     tabletBreakPoint: "max-width: ".concat(breakpoints.large)
   };
-}
+};
+
+export default generateComponentTheme;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/LegacyChoiceType/presenter.js

@@ -95,7 +95,7 @@ export var LegacyChoiceType = (_dec = themeable(theme, styles), _dec(_class = (_
         id: percentageHeaderId,
         height: "47px",
         textAlign: "center"
-      }, t('%')))), /*#__PURE__*/React.createElement(Table.Body, null, choices.map(this.renderRow), this.renderNoAnswer(noAnswer, numberOfChoices)))));
+      }, t('Percentage')))), /*#__PURE__*/React.createElement(Table.Body, null, choices.map(this.renderRow), this.renderNoAnswer(noAnswer, numberOfChoices)))));
     }
   }]);
 

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/ScoreDistributionType/Table/index.js

@@ -103,7 +103,7 @@ export var ScoreDistributionTypeTable = (_dec = withStyle(generateStyle, generat
         id: percentageHeaderId,
         height: "47px",
         textAlign: "center"
-      }, t('%')))), jsx(Table.Body, null, scores.map(this.renderRow))));
+      }, t('Percentage')))), jsx(Table.Body, null, scores.map(this.renderRow))));
     }
   }]);
 

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/AfsPartsContainer/presenter.js

@@ -1,24 +1,19 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
+
+/* eslint-disable-next-line no-unused-vars */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { themeable } from '@instructure/ui-themeable';
-var styles = {
-  componentId: 'DjkQc',
-  template: function template(theme) {
-    return "\n\n.DjkQc_SVtU{max-width:100%;width:calc(25% + 350px)}\n\n.DjkQc_ellB{margin-top:".concat(theme.marginOfTables || 'inherit', "}");
-  },
-  'tableContainer': 'DjkQc_SVtU',
-  'aggregateContainer': 'DjkQc_ellB'
-};
-import classNames from 'classnames';
-import theme from "./theme.js";
-export var AfsPartsContainer = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import { withStyle, jsx } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var AfsPartsContainer = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(AfsPartsContainer, _Component);
 
   var _super = _createSuper(AfsPartsContainer);
@@ -35,34 +30,45 @@ export var AfsPartsContainer = (_dec = themeable(theme, styles), _dec(_class = (
     _this = _super.call.apply(_super, [this].concat(args));
 
     _this.renderAggregationTable = function () {
-      var _this$props = _this.props,
-          afsTable = _this$props.afsTable,
-          aggregationTable = _this$props.aggregationTable;
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames(styles.tableContainer, _defineProperty({}, styles.aggregateContainer, afsTable))
-      }, aggregationTable);
+      return jsx("div", {
+        css: _this.props.styles.tableContainer
+      }, _this.props.aggregationTable);
     };
 
     _this.renderAfsTable = function () {
       var afsTable = _this.props.afsTable;
-      return /*#__PURE__*/React.createElement("div", null, afsTable);
+      return jsx("div", null, afsTable);
     };
 
     _this.render = function () {
-      var _this$props2 = _this.props,
-          afsTable = _this$props2.afsTable,
-          aggregationTable = _this$props2.aggregationTable;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, afsTable && _this.renderAfsTable(), aggregationTable && _this.renderAggregationTable());
+      var _this$props = _this.props,
+          afsTable = _this$props.afsTable,
+          aggregationTable = _this$props.aggregationTable;
+      return jsx(React.Fragment, null, afsTable && _this.renderAfsTable(), aggregationTable && _this.renderAggregationTable());
     };
 
     return _this;
   }
 
+  _createClass(AfsPartsContainer, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    }
+  }]);
+
   return AfsPartsContainer;
 }(Component), _class2.propTypes = {
-  afsTable: PropTypes.node,
-  aggregationTable: PropTypes.node
-}.isRequired, _class2.defaultProps = {
+  afsTable: PropTypes.node.isRequired,
+  aggregationTable: PropTypes.node.isRequired,
+  styles: PropTypes.object,
+  makeStyles: PropTypes.func
+}, _class2.defaultProps = {
   afsTable: null,
   aggregationTable: null
 }, _temp)) || _class);

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/AfsPartsContainer/styles.js

@@ -0,0 +1,14 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  return {
+    tableContainer: _objectSpread({
+      width: 'calc(25% + 350px)',
+      maxWidth: '100%'
+    }, props.afsTable && {
+      marginTop: componentTheme.marginOfTables
+    })
+  };
+};
+
+export default generateStyle;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/AfsPartsContainer/theme.js

@@ -1,6 +1,8 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing;
   return {
     marginOfTables: spacing.medium
   };
-}
+};
+
+export default generateComponentTheme;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/AggregationTable/presenter.js

@@ -80,7 +80,7 @@ export var AggregationTable = (_dec = themeable(theme, styles), _dec(_class = (_
       }, t('Respondents')), /*#__PURE__*/React.createElement(Table.ColHeader, {
         id: percentageHeaderId,
         textAlign: "center"
-      }, t('%'))));
+      }, t('Percentage'))));
     };
 
     _this.renderRow = function (key, icon, label, count, percentage) {

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/ChoiceTypeTable/presenter.js

@@ -197,7 +197,7 @@ export var ChoiceTypeTable = (_dec = themeable(theme, styles), _dec(_class = (_t
         id: percentageHeaderId,
         height: "47px",
         textAlign: "center"
-      }, t('%')))), /*#__PURE__*/React.createElement(Table.Body, null, choices.map(_this.renderRow))));
+      }, t('Percentage')))), /*#__PURE__*/React.createElement(Table.Body, null, choices.map(_this.renderRow))));
     };
 
     return _this;