@instructure/quiz-core 20.11.3-rc.2 → 20.11.3-rc.21

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/ChoiceTypeTable/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
 });
@@ -11,21 +9,21 @@ exports.ChoiceTypeTable = void 0;
 
 var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
 var _uiTable = require("@instructure/ui-table");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 
@@ -33,9 +31,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _propTypes2 = require("../../../propTypes.js");
 
-var _theme = _interopRequireDefault(require("./theme.js"));
+var _styles = _interopRequireDefault(require("./styles.js"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _uiIcons = require("@instructure/ui-icons");
 
@@ -45,38 +43,23 @@ var _uiFlex = require("@instructure/ui-flex");
 
 var _uiText = require("@instructure/ui-text");
 
-var _rowStyleMap, _dec, _class, _class2, _temp;
-
-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'
-};
+var _dec, _class, _class2, _temp;
+
 var correctAttribute = 'correct';
 var incorrectAttribute = 'incorrect';
-var rowStyleMap = (_rowStyleMap = {}, (0, _defineProperty2.default)(_rowStyleMap, correctAttribute, styles.correctRow), (0, _defineProperty2.default)(_rowStyleMap, incorrectAttribute, styles.incorrectRow), _rowStyleMap);
 
-var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconCheckSolid, null);
+var _ref = (0, _emotion.jsx)(_uiIcons.IconCheckSolid, null);
 
-var _ref2 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconXSolid, null);
+var _ref2 = (0, _emotion.jsx)(_uiIcons.IconXSolid, null);
 
-var ChoiceTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var ChoiceTypeTable = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ChoiceTypeTable, _Component);
 
   var _super = (0, _createSuper2.default)(ChoiceTypeTable);
 
   function ChoiceTypeTable() {
+    var _this$rowStyleMap;
+
     var _this;
 
     (0, _classCallCheck2.default)(this, ChoiceTypeTable);
@@ -86,25 +69,24 @@ var ChoiceTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
+    _this.rowStyleMap = (_this$rowStyleMap = {}, (0, _defineProperty2.default)(_this$rowStyleMap, correctAttribute, _this.props.styles.correctRow), (0, _defineProperty2.default)(_this$rowStyleMap, incorrectAttribute, _this.props.styles.incorrectRow), _this$rowStyleMap);
 
     _this.renderIcon = function (correct) {
-      var className = (0, _classnames.default)(styles.iconWrapper, (0, _defineProperty2.default)({}, styles.iconCorrect, correct));
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: className
+      var iconStyles = [_this.props.styles.iconWrapper, correct ? _this.props.styles.iconCorrect : {}];
+      return (0, _emotion.jsx)("div", {
+        css: iconStyles
       }, correct ? _ref : _ref2);
     };
 
     _this.renderFirstCell = function (content) {
-      var className = (0, _classnames.default)(styles.firstTextContainer);
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: className
+      return (0, _emotion.jsx)("div", {
+        css: _this.props.styles.firstTextContainer
       }, content);
     };
 
     _this.renderCell = function (content) {
-      var className = (0, _classnames.default)(styles.textContainer);
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: className
+      return (0, _emotion.jsx)("div", {
+        css: _this.props.styles.textContainer
       }, content);
     };
 
@@ -141,30 +123,30 @@ var ChoiceTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       var extractedBody = _this.extractChoiceText(body, correct);
 
       var screenReaderContent = "".concat(_this.answerLabel(correct), ": ").concat(extractedBody);
-      return /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, {
+      return (0, _emotion.jsx)(_uiTable.Table.Row, {
         key: choiceIndex
-      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.RowHeader, {
+      }, (0, _emotion.jsx)(_uiTable.Table.RowHeader, {
         themeOverride: {
           padding: '0'
         }
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, screenReaderContent), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+      }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, screenReaderContent), (0, _emotion.jsx)(_uiFlex.Flex, {
         direction: "row",
         alignItems: "center"
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         width: "46px",
         textAlign: "center",
         align: "stretch"
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _emotion.jsx)("div", {
         "data-icon": _this.getDataIconAttribute(correct, choiceIndex),
-        className: (0, _classnames.default)(styles.iconWrapper)
-      }, _this.renderIcon(correct))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        css: _this.props.styles.iconWrapper
+      }, _this.renderIcon(correct))), (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         shouldShrink: true,
         shouldGrow: true
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, null, _this.renderFirstCell(extractedBody))))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
+      }, (0, _emotion.jsx)(_uiText.Text, null, _this.renderFirstCell(extractedBody))))), (0, _emotion.jsx)(_uiTable.Table.Cell, {
         themeOverride: {
           padding: '0'
         }
-      }, _this.renderCell(choice.count)), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
+      }, _this.renderCell(choice.count)), (0, _emotion.jsx)(_uiTable.Table.Cell, {
         themeOverride: {
           padding: '0'
         },
@@ -173,17 +155,48 @@ var ChoiceTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
     };
 
     _this.componentDidMount = function () {
+      _this.applyStylesToTable();
+
+      _this.props.makeStyles();
+    };
+
+    _this.componentDidUpdate = function () {
+      _this.props.makeStyles();
+    };
+
+    _this.applyStylesToTable = function () {
       if (_this.tableRef) {
         var _iterator = (0, _createForOfIteratorHelper2.default)(_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', (0, _emotion.css)(_this.rowStyleMap[icon].td).styles);
+              });
+              th.forEach(function (cell) {
+                cell.setAttribute('style', (0, _emotion.css)(_this.rowStyleMap[icon].th).styles);
+              });
+
+              if (icon === correctAttribute) {
+                row.querySelector('th:first-child').setAttribute('style', (0, _emotion.css)(_this.props.styles.correctRow.thFirstChild).styles);
+                row.querySelector('td:last-child').setAttribute('style', (0, _emotion.css)(_this.props.styles.correctRow.tdLastChild).styles);
+              }
+            }
+
+            row.setAttribute('style', (0, _emotion.css)(_this.rowStyleMap[icon]).styles);
+          };
+
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            _loop();
           }
         } catch (err) {
           _iterator.e(err);
@@ -200,32 +213,31 @@ var ChoiceTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
     _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 = (0, _classnames.default)(tableContainerSizeClass, styles.tableContainer, (0, _defineProperty2.default)({}, styles.headerGrayBottomBorder, !_this.nextChoiceIsCorrect(choices, 0)));
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: containerClasses
-      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table, {
+      var containerStyles = [_this.props.styles.tableContainer, !_this.nextChoiceIsCorrect(choices, 0) ? _this.props.styles.headerGrayBottomBorder : {}];
+      return (0, _emotion.jsx)("div", {
+        css: containerStyles
+      }, (0, _emotion.jsx)(_uiTable.Table, {
         caption: (0, _formatMessage.default)('Answer Frequency Summary'),
         elementRef: _this.setTableRef
-      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Head, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+      }, (0, _emotion.jsx)(_uiTable.Table.Head, null, (0, _emotion.jsx)(_uiTable.Table.Row, null, (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
         id: answerHeaderId,
         height: "47px",
         themeOverride: {
           padding: '0 0 0 57px'
         }
-      }, (0, _formatMessage.default)('Answer')), /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+      }, (0, _formatMessage.default)('Answer')), (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
         id: respondentsHeaderId,
         height: "47px",
         textAlign: "center"
-      }, (0, _formatMessage.default)('Respondents')), /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+      }, (0, _formatMessage.default)('Respondents')), (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
         id: percentageHeaderId,
         height: "47px",
         textAlign: "center"
-      }, (0, _formatMessage.default)('Percentage')))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, null, choices.map(_this.renderRow))));
+      }, (0, _formatMessage.default)('Percentage')))), (0, _emotion.jsx)(_uiTable.Table.Body, null, choices.map(_this.renderRow))));
     };
 
     return _this;
@@ -233,10 +245,14 @@ var ChoiceTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
 
   return ChoiceTypeTable;
 }(_react.Component), _class2.propTypes = {
-  itemId: _propTypes.default.number,
-  choices: _propTypes.default.arrayOf(_propTypes2.choiceTypeObject),
-  tableContainerClass: _propTypes.default.string
-}.isRequired, _class2.defaultProps = {
-  tableContainerSizeClass: styles.tableWidthMax
+  itemId: _propTypes.default.number.isRequired,
+  choices: _propTypes.default.arrayOf(_propTypes2.choiceTypeObject).isRequired,
+
+  /* eslint-disable-next-line react/no-unused-prop-types */
+  tableContainerStyles: _propTypes.default.object,
+  styles: _propTypes.default.object,
+  makeStyles: _propTypes.default.func
+}, _class2.defaultProps = {
+  tableContainerStyles: void 0
 }, _temp)) || _class);
 exports.ChoiceTypeTable = ChoiceTypeTable;

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

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/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: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, 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
+      }
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

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

@@ -3,14 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-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'
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/MetricPopover/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
 });
@@ -17,7 +15,7 @@ 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 _uiView = require("@instructure/ui-view");
 
@@ -33,28 +31,21 @@ var _uiPopover = require("@instructure/ui-popover");
 
 var _uiHeading = require("@instructure/ui-heading");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _dec, _class, _class2, _temp;
 
-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'
-};
-
-var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconInfoLine, {
+var _ref = (0, _emotion.jsx)(_uiIcons.IconInfoLine, {
   size: "x-small"
 });
 
-var MetricPopover = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var MetricPopover = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(MetricPopover, _Component);
 
   var _super = (0, _createSuper2.default)(MetricPopover);
@@ -86,7 +77,7 @@ var MetricPopover = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
     };
 
     _this.render = function () {
-      return /*#__PURE__*/_react.default.createElement(_uiPopover.Popover, {
+      return (0, _emotion.jsx)(_uiPopover.Popover, {
         renderTrigger: _this.renderPopoverTrigger(),
         on: "click",
         screenReaderLabel: _this.props.screenReaderLabel,
@@ -95,27 +86,26 @@ var MetricPopover = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
         onShowContent: _this.showPopover,
         onHideContent: _this.hidePopover,
         isShowingContent: _this.state.isContentVisible
-      }, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+      }, (0, _emotion.jsx)(_uiView.View, {
         padding: "medium",
         as: "div",
         display: "block",
         width: "248px"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.closeIconContainer
-      }, /*#__PURE__*/_react.default.createElement(_uiButtons.CloseButton, {
+      }, (0, _emotion.jsx)("div", {
+        css: _this.props.styles.closeIconContainer
+      }, (0, _emotion.jsx)(_uiButtons.CloseButton, {
         onClick: _this.hidePopover,
         screenReaderLabel: (0, _formatMessage.default)('Close popover')
-      })), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.headerContainer
-      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
-        className: styles.popoverTitle,
+      })), (0, _emotion.jsx)("div", {
+        css: _this.props.styles.headerContainer
+      }, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: "h3"
-      }, _this.props.title)), /*#__PURE__*/_react.default.createElement("div", null, _this.props.subtitle && /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      }, _this.props.title)), (0, _emotion.jsx)("div", null, _this.props.subtitle && (0, _emotion.jsx)(_uiHeading.Heading, {
         themeOverride: {
           h5FontWeight: 700
         },
         level: "h5"
-      }, _this.props.subtitle), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, _this.props.subtitle), (0, _emotion.jsx)(_uiText.Text, {
         size: "small"
       }, _this.props.body))));
     };
@@ -124,9 +114,19 @@ var MetricPopover = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   }
 
   (0, _createClass2.default)(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.default.createElement(_uiButtons.IconButton, {
+      return (0, _emotion.jsx)(_uiButtons.IconButton, {
         size: "small",
         themeOverride: {
           smallHeight: '18px',
@@ -144,7 +144,9 @@ var MetricPopover = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   screenReaderLabel: _propTypes.default.string.isRequired,
   title: _propTypes.default.string.isRequired,
   subtitle: _propTypes.default.string,
-  body: _propTypes.default.string.isRequired
+  body: _propTypes.default.string.isRequired,
+  styles: _propTypes.default.object,
+  makeStyles: _propTypes.default.func
 }, _class2.defaultProps = {
   subtitle: ''
 }, _temp)) || _class);

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    headerContainer: {
+      paddingBottom: componentTheme.headerPaddingBottom
+    },
+    closeIconContainer: {
+      display: 'flex',
+      justifyContent: 'flex-end',
+      marginRight: '-10px',
+      marginTop: '-10px'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

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

@@ -3,11 +3,14 @@
 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 {
     headerPaddingBottom: spacing.medium
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;