@instructure/quiz-core 20.11.3-rc.8 → 20.11.3

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

@@ -0,0 +1,141 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    iconWrapper: {
+      display: 'flex',
+      height: '100%',
+      minHeight: '47px',
+      width: '46px',
+      justifyContent: 'center',
+      alignItems: 'center',
+      'svg': {
+        fill: 'white'
+      }
+    },
+    collapsingTable: {
+      minWidth: '500px',
+      'table': {
+        borderCollapse: 'separate',
+        borderSpacing: '0 12px'
+      },
+      'thead th': {
+        borderWidth: '0 0 1px 0',
+        borderStyle: 'solid',
+        borderColor: componentTheme.colorHeaderBottomBorder
+      },
+      'table tbody tr td': {
+        width: '33.33%',
+        borderStyle: 'solid',
+        borderWidth: '2px 0 2px 0'
+      },
+      'table tbody tr th:first-of-type': {
+        borderStyle: 'solid',
+        borderRadius: '4px 0 0 4px',
+        borderWidth: '2px 0 2px 2px',
+        fontWeight: '400'
+      },
+      'table tbody tr td:last-child': {
+        borderStyle: 'solid',
+        borderWidth: '2px 2px 2px 0',
+        borderRadius: '0 4px 4px 0'
+      }
+    },
+    onlyNoanswer: {
+      'tbody tr:nth-of-type(1) td': {
+        borderColor: componentTheme.colorGrey
+      },
+      'table tbody tr:nth-of-type(1) th': {
+        borderColor: componentTheme.colorGrey
+      }
+    },
+    correctIncorrect: {
+      'table tbody tr:nth-of-type(1) td': {
+        borderColor: componentTheme.colorGreen
+      },
+      'table tbody tr:nth-of-type(1) th': {
+        borderColor: componentTheme.colorGreen
+      },
+      'table tbody tr:nth-of-type(2) td': {
+        borderColor: componentTheme.colorRed
+      },
+      'table tbody tr:nth-of-type(2) th': {
+        borderColor: componentTheme.colorRed
+      }
+    },
+    correctIncorrectNoanswer: {
+      'table tbody tr:nth-of-type(1) td': {
+        borderColor: componentTheme.colorGreen
+      },
+      'table tbody tr:nth-of-type(1) th': {
+        borderColor: componentTheme.colorGreen
+      },
+      'table tbody tr:nth-of-type(2) td': {
+        borderColor: componentTheme.colorRed
+      },
+      'table tbody tr:nth-of-type(2) th': {
+        borderColor: componentTheme.colorRed
+      },
+      'table tbody tr:nth-of-type(3) td': {
+        borderColor: componentTheme.colorGrey
+      },
+      'table tbody tr:nth-of-type(3) th': {
+        borderColor: componentTheme.colorGrey
+      }
+    },
+    correctIncorrectNoanswerGraded: {
+      'table tbody tr:nth-of-type(1) td': {
+        borderColor: componentTheme.colorGreen
+      },
+      'table tbody tr:nth-of-type(1) th': {
+        borderColor: componentTheme.colorGreen
+      },
+      'table tbody tr:nth-of-type(2) td': {
+        borderColor: componentTheme.colorBlue
+      },
+      'table tbody tr:nth-of-type(2) th': {
+        borderColor: componentTheme.colorBlue
+      },
+      'table tbody tr:nth-of-type(3) td': {
+        borderColor: componentTheme.colorRed
+      },
+      'table tbody tr:nth-of-type(3) th': {
+        borderColor: componentTheme.colorRed
+      },
+      'table tbody tr:nth-of-type(4) td': {
+        borderColor: componentTheme.colorGrey
+      },
+      'table tbody tr:nth-of-type(4) th': {
+        borderColor: componentTheme.colorGrey
+      }
+    },
+    correctBackground: {
+      backgroundColor: componentTheme.colorGreen
+    },
+    incorrectBackground: {
+      backgroundColor: componentTheme.colorRed
+    },
+    gradedBackground: {
+      backgroundColor: componentTheme.colorBlue
+    },
+    noAnswerBackground: {
+      backgroundColor: componentTheme.colorGrey
+    },
+    labelWrapper: {
+      padding: '12px 0 12px 10px'
+    },
+    firstHeaderCell: {
+      paddingLeft: '45px'
+    },
+    iconWhite: {
+      'svg': {
+        fill: 'white'
+      }
+    },
+    headerCell: {
+      borderWidth: '0 0 1px 0',
+      borderStyle: 'solid',
+      borderColor: componentTheme.colorHeaderBottomBorder
+    }
+  };
+};
+
+export default generateStyle;

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

@@ -1,10 +1,13 @@
-export default function generator() {
+var generateComponentTheme = function generateComponentTheme(_ref) {
+  var colors = _ref.colors;
   return {
-    colorGreen: '#0b874b',
-    colorBlue: '#0574b5',
-    colorRed: '#e0061f',
-    colorGrey: '#6b7780',
-    colorHeaderBottomBorder: '#c7cdd1',
+    colorGreen: colors.shamrock,
+    colorBlue: colors.brand,
+    colorRed: colors.crimson,
+    colorGrey: colors.ash,
+    colorHeaderBottomBorder: colors.tiara,
     cellPadding: '13.5px 13.5px;'
   };
-}
+};
+
+export default generateComponentTheme;

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

@@ -1,54 +1,40 @@
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
-var _rowStyleMap, _dec, _class, _class2, _temp;
+var _dec, _class, _class2, _temp;
 
-import React, { Component } from 'react';
+/** @jsx jsx */
+import { Component } from 'react';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { Table } from '@instructure/ui-table';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx, css } from '@instructure/emotion';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import PropTypes from 'prop-types';
 import { choiceTypeObject } from "../../../propTypes.js";
-var styles = {
-  componentId: 'cYrxJ',
-  template: function template(theme) {
-    return "\n\n.cYrxJ_rMrG{display:flex;flex-basis:100%;flex-direction:column;padding-bottom:".concat(theme.tableBottomPadding || 'inherit', "}\n\n.cYrxJ_fgIl{max-width:100%;width:calc(25% + 350px)}\n\n.cYrxJ_SVtU table{border-collapse:separate;border-spacing:0 1px}\n\n.cYrxJ_eviJ table thead tr td,.cYrxJ_eviJ table thead tr th{border-bottom:solid 0.0625rem ").concat(theme.colorGray || 'inherit', "}\n\n.cYrxJ_SVtU table tbody tr th{font-weight:400;width:33.33%}\n\n.cYrxJ_SVtU table tbody tr td{width:33.33%}\n\n.cYrxJ_cvRx{align-items:center;display:flex;height:100%;justify-content:center;min-height:47px;width:46px}\n\n.cYrxJ_EKAb{background-color:").concat(theme.colorGreen || 'inherit', "}\n\n.cYrxJ_EKAb svg{fill:#fff}\n\n.cYrxJ_cCmC{align-items:center;display:flex;height:calc(100% - 4px);justify-content:center}\n\n.cYrxJ_dJVn{padding:").concat(theme.cellPadding || 'inherit', "}\n\n.cYrxJ_eEOp td,.cYrxJ_eEOp th{border-bottom:solid 0.0625rem ").concat(theme.colorGray || 'inherit', "}\n\n.cYrxJ_UAZE td{border-width:2px 0 2px 0}\n\n.cYrxJ_UAZE td,.cYrxJ_UAZE th:first-child{border-color:").concat(theme.colorGreen || 'inherit', ";border-style:solid}\n\n.cYrxJ_UAZE th:first-child{border-radius:4px 0 0 4px;border-width:2px 0 2px 2px}\n\n.cYrxJ_UAZE td:last-child{border-color:").concat(theme.colorGreen || 'inherit', ";border-radius:0 4px 4px 0;border-style:solid;border-width:2px 2px 2px 0}");
-  },
-  'tableWrapper': 'cYrxJ_rMrG',
-  'tableWidthMax': 'cYrxJ_fgIl',
-  'tableContainer': 'cYrxJ_SVtU',
-  'headerGrayBottomBorder': 'cYrxJ_eviJ',
-  'iconWrapper': 'cYrxJ_cvRx',
-  'iconCorrect': 'cYrxJ_EKAb',
-  'textContainer': 'cYrxJ_cCmC',
-  'firstTextContainer': 'cYrxJ_dJVn',
-  'incorrectRow': 'cYrxJ_eEOp',
-  'correctRow': 'cYrxJ_UAZE'
-};
-import theme from "./theme.js";
-import classNames from 'classnames';
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 import { IconCheckSolid, IconXSolid } from '@instructure/ui-icons';
 import { extractTextFromHtml } from '@instructure/quiz-interactions';
 import { Flex } from '@instructure/ui-flex';
 import { Text } from '@instructure/ui-text';
 var correctAttribute = 'correct';
 var incorrectAttribute = 'incorrect';
-var rowStyleMap = (_rowStyleMap = {}, _defineProperty(_rowStyleMap, correctAttribute, styles.correctRow), _defineProperty(_rowStyleMap, incorrectAttribute, styles.incorrectRow), _rowStyleMap);
 
-var _ref = /*#__PURE__*/React.createElement(IconCheckSolid, null);
+var _ref = jsx(IconCheckSolid, null);
 
-var _ref2 = /*#__PURE__*/React.createElement(IconXSolid, null);
+var _ref2 = jsx(IconXSolid, null);
 
-export var ChoiceTypeTable = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var ChoiceTypeTable = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(ChoiceTypeTable, _Component);
 
   var _super = _createSuper(ChoiceTypeTable);
 
   function ChoiceTypeTable() {
+    var _this$rowStyleMap;
+
     var _this;
 
     _classCallCheck(this, ChoiceTypeTable);
@@ -58,25 +44,24 @@ export var ChoiceTypeTable = (_dec = themeable(theme, styles), _dec(_class = (_t
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
+    _this.rowStyleMap = (_this$rowStyleMap = {}, _defineProperty(_this$rowStyleMap, correctAttribute, _this.props.styles.correctRow), _defineProperty(_this$rowStyleMap, incorrectAttribute, _this.props.styles.incorrectRow), _this$rowStyleMap);
 
     _this.renderIcon = function (correct) {
-      var className = classNames(styles.iconWrapper, _defineProperty({}, styles.iconCorrect, correct));
-      return /*#__PURE__*/React.createElement("div", {
-        className: className
+      var iconStyles = [_this.props.styles.iconWrapper, correct ? _this.props.styles.iconCorrect : {}];
+      return jsx("div", {
+        css: iconStyles
       }, correct ? _ref : _ref2);
     };
 
     _this.renderFirstCell = function (content) {
-      var className = classNames(styles.firstTextContainer);
-      return /*#__PURE__*/React.createElement("div", {
-        className: className
+      return jsx("div", {
+        css: _this.props.styles.firstTextContainer
       }, content);
     };
 
     _this.renderCell = function (content) {
-      var className = classNames(styles.textContainer);
-      return /*#__PURE__*/React.createElement("div", {
-        className: className
+      return jsx("div", {
+        css: _this.props.styles.textContainer
       }, content);
     };
 
@@ -113,30 +98,30 @@ export var ChoiceTypeTable = (_dec = themeable(theme, styles), _dec(_class = (_t
       var extractedBody = _this.extractChoiceText(body, correct);
 
       var screenReaderContent = "".concat(_this.answerLabel(correct), ": ").concat(extractedBody);
-      return /*#__PURE__*/React.createElement(Table.Row, {
+      return jsx(Table.Row, {
         key: choiceIndex
-      }, /*#__PURE__*/React.createElement(Table.RowHeader, {
+      }, jsx(Table.RowHeader, {
         themeOverride: {
           padding: '0'
         }
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, screenReaderContent), /*#__PURE__*/React.createElement(Flex, {
+      }, jsx(ScreenReaderContent, null, screenReaderContent), jsx(Flex, {
         direction: "row",
         alignItems: "center"
-      }, /*#__PURE__*/React.createElement(Flex.Item, {
+      }, jsx(Flex.Item, {
         width: "46px",
         textAlign: "center",
         align: "stretch"
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         "data-icon": _this.getDataIconAttribute(correct, choiceIndex),
-        className: classNames(styles.iconWrapper)
-      }, _this.renderIcon(correct))), /*#__PURE__*/React.createElement(Flex.Item, {
+        css: _this.props.styles.iconWrapper
+      }, _this.renderIcon(correct))), jsx(Flex.Item, {
         shouldShrink: true,
         shouldGrow: true
-      }, /*#__PURE__*/React.createElement(Text, null, _this.renderFirstCell(extractedBody))))), /*#__PURE__*/React.createElement(Table.Cell, {
+      }, jsx(Text, null, _this.renderFirstCell(extractedBody))))), jsx(Table.Cell, {
         themeOverride: {
           padding: '0'
         }
-      }, _this.renderCell(choice.count)), /*#__PURE__*/React.createElement(Table.Cell, {
+      }, _this.renderCell(choice.count)), jsx(Table.Cell, {
         themeOverride: {
           padding: '0'
         },
@@ -145,17 +130,48 @@ export var ChoiceTypeTable = (_dec = themeable(theme, styles), _dec(_class = (_t
     };
 
     _this.componentDidMount = function () {
+      _this.applyStylesToTable();
+
+      _this.props.makeStyles();
+    };
+
+    _this.componentDidUpdate = function () {
+      _this.props.makeStyles();
+    };
+
+    _this.applyStylesToTable = function () {
       if (_this.tableRef) {
         var _iterator = _createForOfIteratorHelper(_this.tableRef.rows),
             _step;
 
         try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var _loop = function _loop() {
             var _row$querySelector, _row$querySelector$da;
 
             var row = _step.value;
             var icon = (_row$querySelector = row.querySelector('tr th:first-child [data-icon]')) === null || _row$querySelector === void 0 ? void 0 : (_row$querySelector$da = _row$querySelector.dataset) === null || _row$querySelector$da === void 0 ? void 0 : _row$querySelector$da.icon;
-            row.classList.add(rowStyleMap[icon]);
+            var td = row.querySelectorAll('td');
+            var th = row.querySelectorAll('th');
+
+            if (icon) {
+              td.forEach(function (cell) {
+                cell.setAttribute('style', css(_this.rowStyleMap[icon].td).styles);
+              });
+              th.forEach(function (cell) {
+                cell.setAttribute('style', css(_this.rowStyleMap[icon].th).styles);
+              });
+
+              if (icon === correctAttribute) {
+                row.querySelector('th:first-child').setAttribute('style', css(_this.props.styles.correctRow.thFirstChild).styles);
+                row.querySelector('td:last-child').setAttribute('style', css(_this.props.styles.correctRow.tdLastChild).styles);
+              }
+            }
+
+            row.setAttribute('style', css(_this.rowStyleMap[icon]).styles);
+          };
+
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            _loop();
           }
         } catch (err) {
           _iterator.e(err);
@@ -172,32 +188,31 @@ export var ChoiceTypeTable = (_dec = themeable(theme, styles), _dec(_class = (_t
     _this.render = function () {
       var _this$props = _this.props,
           choices = _this$props.choices,
-          itemId = _this$props.itemId,
-          tableContainerSizeClass = _this$props.tableContainerSizeClass;
+          itemId = _this$props.itemId;
       var answerHeaderId = "answer-frequency-summary-answer-".concat(itemId);
       var respondentsHeaderId = "answer-frequency-summary-respondents-".concat(itemId);
       var percentageHeaderId = "answer-frequency-summary-percentage-".concat(itemId);
-      var containerClasses = classNames(tableContainerSizeClass, styles.tableContainer, _defineProperty({}, styles.headerGrayBottomBorder, !_this.nextChoiceIsCorrect(choices, 0)));
-      return /*#__PURE__*/React.createElement("div", {
-        className: containerClasses
-      }, /*#__PURE__*/React.createElement(Table, {
+      var containerStyles = [_this.props.styles.tableContainer, !_this.nextChoiceIsCorrect(choices, 0) ? _this.props.styles.headerGrayBottomBorder : {}];
+      return jsx("div", {
+        css: containerStyles
+      }, jsx(Table, {
         caption: t('Answer Frequency Summary'),
         elementRef: _this.setTableRef
-      }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.ColHeader, {
+      }, jsx(Table.Head, null, jsx(Table.Row, null, jsx(Table.ColHeader, {
         id: answerHeaderId,
         height: "47px",
         themeOverride: {
           padding: '0 0 0 57px'
         }
-      }, t('Answer')), /*#__PURE__*/React.createElement(Table.ColHeader, {
+      }, t('Answer')), jsx(Table.ColHeader, {
         id: respondentsHeaderId,
         height: "47px",
         textAlign: "center"
-      }, t('Respondents')), /*#__PURE__*/React.createElement(Table.ColHeader, {
+      }, t('Respondents')), jsx(Table.ColHeader, {
         id: percentageHeaderId,
         height: "47px",
         textAlign: "center"
-      }, t('Percentage')))), /*#__PURE__*/React.createElement(Table.Body, null, choices.map(_this.renderRow))));
+      }, t('Percentage')))), jsx(Table.Body, null, choices.map(_this.renderRow))));
     };
 
     return _this;
@@ -205,9 +220,13 @@ export var ChoiceTypeTable = (_dec = themeable(theme, styles), _dec(_class = (_t
 
   return ChoiceTypeTable;
 }(Component), _class2.propTypes = {
-  itemId: PropTypes.number,
-  choices: PropTypes.arrayOf(choiceTypeObject),
-  tableContainerClass: PropTypes.string
-}.isRequired, _class2.defaultProps = {
-  tableContainerSizeClass: styles.tableWidthMax
+  itemId: PropTypes.number.isRequired,
+  choices: PropTypes.arrayOf(choiceTypeObject).isRequired,
+
+  /* eslint-disable-next-line react/no-unused-prop-types */
+  tableContainerStyles: PropTypes.object,
+  styles: PropTypes.object,
+  makeStyles: PropTypes.func
+}, _class2.defaultProps = {
+  tableContainerStyles: void 0
 }, _temp)) || _class);

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

@@ -0,0 +1,93 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  var tableContainerStyles = props.tableContainerStyles || {
+    width: 'calc(25% + 350px)',
+    maxWidth: '100%'
+  };
+  return {
+    tableWrapper: {
+      display: 'flex',
+      flexBasis: '100%',
+      flexDirection: 'column',
+      paddingBottom: componentTheme.tableBottomPadding
+    },
+    tableWidthMax: {},
+    tableContainer: _objectSpread(_objectSpread({}, tableContainerStyles), {}, {
+      'table': {
+        borderCollapse: 'separate',
+        borderSpacing: '0 1px'
+      },
+      'table tbody tr td:': {
+        width: '33.33%'
+      },
+      'table tbody tr th': {
+        fontWeight: '400',
+        width: '33.33%'
+      }
+    }),
+    headerGrayBottomBorder: {
+      'table thead tr th': {
+        borderBottom: "solid 0.0625rem ".concat(componentTheme.colorGray)
+      },
+      'table thead tr td': {
+        borderBottom: "solid 0.0625rem ".concat(componentTheme.colorGray)
+      }
+    },
+    iconWrapper: {
+      display: 'flex',
+      height: '100%',
+      minHeight: '47px',
+      width: '46px',
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    iconCorrect: {
+      backgroundColor: componentTheme.colorGreen,
+      'svg': {
+        fill: 'white'
+      }
+    },
+    textContainer: {
+      height: 'calc(100% - 4px)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    firstTextContainer: {
+      padding: componentTheme.cellPadding
+    },
+    incorrectRow: {
+      td: {
+        borderBottom: "solid 0.0625rem ".concat(componentTheme.colorGray)
+      },
+      th: {
+        borderBottom: "solid 0.0625rem ".concat(componentTheme.colorGray)
+      }
+    },
+    correctRow: {
+      td: {
+        borderStyle: 'solid',
+        borderWidth: '2px 0 2px 0',
+        borderColor: componentTheme.colorGreen
+      },
+      th: {
+        border: 0
+      },
+      thFirstChild: {
+        borderStyle: 'solid',
+        borderRadius: '4px 0 0 4px',
+        borderWidth: '2px 0 2px 2px',
+        borderColor: componentTheme.colorGreen
+      },
+      tdLastChild: {
+        borderStyle: 'solid',
+        borderWidth: '2px 2px 2px 0',
+        borderRadius: '0 4px 4px 0',
+        borderColor: componentTheme.colorGreen
+      }
+    }
+  };
+};
+
+export default generateStyle;

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

@@ -1,9 +1,12 @@
-export default function generator(_ref) {
-  var spacing = _ref.spacing;
+var generateComponentTheme = function generateComponentTheme(_ref) {
+  var spacing = _ref.spacing,
+      colors = _ref.colors;
   return {
     tableBottomPadding: spacing.medium,
-    colorGreen: '#0b874b',
-    colorGray: '#C7CDD1',
+    colorGreen: colors.shamrock,
+    colorGray: colors.tiara,
     cellPadding: '0.75rem 0.75rem'
   };
-}
+};
+
+export default generateComponentTheme;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/MetricPopover/presenter.js

@@ -5,7 +5,8 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
-import React, { Component } from 'react';
+/** @jsx jsx */
+import { Component } from 'react';
 import { View } from '@instructure/ui-view';
 import { CloseButton, IconButton } from '@instructure/ui-buttons';
 import t from '@instructure/quiz-i18n/es/format-message';
@@ -13,23 +14,16 @@ import { IconInfoLine } from '@instructure/ui-icons';
 import { Text } from '@instructure/ui-text';
 import { Popover } from '@instructure/ui-popover';
 import { Heading } from '@instructure/ui-heading';
-import { themeable } from '@instructure/ui-themeable';
-import theme from "./theme.js";
-var styles = {
-  componentId: 'fSfiS',
-  template: function template(theme) {
-    return "\n\n.fSfiS_CkEK{padding-bottom:".concat(theme.headerPaddingBottom || 'inherit', "}\n\n.fSfiS_fSpJ{display:flex;justify-content:flex-end;margin-right:-10px;margin-top:-10px}");
-  },
-  'headerContainer': 'fSfiS_CkEK',
-  'closeIconContainer': 'fSfiS_fSpJ'
-};
+import { withStyle, jsx } from '@instructure/emotion';
+import generateComponentTheme from "./theme.js";
+import generateStyle from "./styles.js";
 import PropTypes from 'prop-types';
 
-var _ref = /*#__PURE__*/React.createElement(IconInfoLine, {
+var _ref = jsx(IconInfoLine, {
   size: "x-small"
 });
 
-export var MetricPopover = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var MetricPopover = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(MetricPopover, _Component);
 
   var _super = _createSuper(MetricPopover);
@@ -61,7 +55,7 @@ export var MetricPopover = (_dec = themeable(theme, styles), _dec(_class = (_tem
     };
 
     _this.render = function () {
-      return /*#__PURE__*/React.createElement(Popover, {
+      return jsx(Popover, {
         renderTrigger: _this.renderPopoverTrigger(),
         on: "click",
         screenReaderLabel: _this.props.screenReaderLabel,
@@ -70,27 +64,26 @@ export var MetricPopover = (_dec = themeable(theme, styles), _dec(_class = (_tem
         onShowContent: _this.showPopover,
         onHideContent: _this.hidePopover,
         isShowingContent: _this.state.isContentVisible
-      }, /*#__PURE__*/React.createElement(View, {
+      }, jsx(View, {
         padding: "medium",
         as: "div",
         display: "block",
         width: "248px"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.closeIconContainer
-      }, /*#__PURE__*/React.createElement(CloseButton, {
+      }, jsx("div", {
+        css: _this.props.styles.closeIconContainer
+      }, jsx(CloseButton, {
         onClick: _this.hidePopover,
         screenReaderLabel: t('Close popover')
-      })), /*#__PURE__*/React.createElement("div", {
-        className: styles.headerContainer
-      }, /*#__PURE__*/React.createElement(Heading, {
-        className: styles.popoverTitle,
+      })), jsx("div", {
+        css: _this.props.styles.headerContainer
+      }, jsx(Heading, {
         level: "h3"
-      }, _this.props.title)), /*#__PURE__*/React.createElement("div", null, _this.props.subtitle && /*#__PURE__*/React.createElement(Heading, {
+      }, _this.props.title)), jsx("div", null, _this.props.subtitle && jsx(Heading, {
         themeOverride: {
           h5FontWeight: 700
         },
         level: "h5"
-      }, _this.props.subtitle), /*#__PURE__*/React.createElement(Text, {
+      }, _this.props.subtitle), jsx(Text, {
         size: "small"
       }, _this.props.body))));
     };
@@ -99,9 +92,19 @@ export var MetricPopover = (_dec = themeable(theme, styles), _dec(_class = (_tem
   }
 
   _createClass(MetricPopover, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    }
+  }, {
     key: "renderPopoverTrigger",
     value: function renderPopoverTrigger() {
-      return /*#__PURE__*/React.createElement(IconButton, {
+      return jsx(IconButton, {
         size: "small",
         themeOverride: {
           smallHeight: '18px',
@@ -120,7 +123,9 @@ export var MetricPopover = (_dec = themeable(theme, styles), _dec(_class = (_tem
   screenReaderLabel: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
   subtitle: PropTypes.string,
-  body: PropTypes.string.isRequired
+  body: PropTypes.string.isRequired,
+  styles: PropTypes.object,
+  makeStyles: PropTypes.func
 }, _class2.defaultProps = {
   subtitle: ''
 }, _temp)) || _class);

package/es/reporting/components/resources/NewQuizAndItemAnalysis/MetricPopover/styles.js

@@ -0,0 +1,15 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    headerContainer: {
+      paddingBottom: componentTheme.headerPaddingBottom
+    },
+    closeIconContainer: {
+      display: 'flex',
+      justifyContent: 'flex-end',
+      marginRight: '-10px',
+      marginTop: '-10px'
+    }
+  };
+};
+
+export default generateStyle;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/MetricPopover/theme.js

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