@instructure/outcomes-ui 4.1.1 → 4.1.3

package/lib/translated/mi/components/Gradebook/__tests__/index.test.js

@@ -49,24 +49,7 @@ _globals.jest.mock("../context/GradebookAppContext", function () {
 });
 var mockSetupI18n = i18nModule.setupI18n;
 describe('GradebookApp', function () {
-  var mockConfig = {
-    components: {
-      StudentPopover: function StudentPopover() {
-        return /*#__PURE__*/_react.default.createElement("div", null, "Student Popover");
-      },
-      SettingsTrayContent: function SettingsTrayContent() {
-        return /*#__PURE__*/_react.default.createElement("div", null, "Settings");
-      }
-    }
-  };
-  var mockSettingsData = {};
-  var mockOnSave = _globals.jest.fn().mockResolvedValue({
-    success: true
-  });
-  var mockSettings = {
-    settings: mockSettingsData,
-    onSave: mockOnSave
-  };
+  var mockConfig = {};
   beforeEach(function () {
     _globals.jest.clearAllMocks();
   });
@@ -76,8 +59,7 @@ describe('GradebookApp', function () {
         while (1) switch (_context.n) {
           case 0:
             (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_GradebookApp.GradebookApp, {
-              config: mockConfig,
-              settings: mockSettings
+              config: mockConfig
             }));
 
             // Should call setupI18n with default language
@@ -96,7 +78,6 @@ describe('GradebookApp', function () {
     it('renders with i18n disabled', function () {
       (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_GradebookApp.GradebookApp, {
         config: mockConfig,
-        settings: mockSettings,
         translations: {
           i18nEnabled: false
         }
@@ -114,7 +95,6 @@ describe('GradebookApp', function () {
           case 0:
             (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_GradebookApp.GradebookApp, {
               config: mockConfig,
-              settings: mockSettings,
               translations: {
                 language: 'es',
                 i18nEnabled: true
@@ -142,7 +122,6 @@ describe('GradebookApp', function () {
             };
             (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_GradebookApp.GradebookApp, {
               config: mockConfig,
-              settings: mockSettings,
               translations: {
                 language: 'fr',
                 i18nEnabled: true,
@@ -167,7 +146,6 @@ describe('GradebookApp', function () {
           case 0:
             (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_GradebookApp.GradebookApp, {
               config: mockConfig,
-              settings: mockSettings,
               translations: {
                 i18nEnabled: false
               }
@@ -184,7 +162,6 @@ describe('GradebookApp', function () {
     it('renders fallback content when no children provided', function () {
       (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_GradebookApp.GradebookApp, {
         config: mockConfig,
-        settings: mockSettings,
         translations: {
           i18nEnabled: false
         }
@@ -196,7 +173,6 @@ describe('GradebookApp', function () {
     it('passes gradebookConfig to GradebookConfigProvider', function () {
       (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_GradebookApp.GradebookApp, {
         config: mockConfig,
-        settings: mockSettings,
         translations: {
           i18nEnabled: false
         }
@@ -205,15 +181,10 @@ describe('GradebookApp', function () {
       (0, _globals.expect)(provider).toBeInTheDocument();
       var configData = provider.getAttribute('data-config');
       (0, _globals.expect)(configData).toBeTruthy();
-      var parsedConfig = JSON.parse(configData);
-      (0, _globals.expect)(parsedConfig).toMatchObject({
-        components: _globals.expect.any(Object)
-      });
     });
     it('wraps children with GradebookConfigProvider', function () {
       (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_GradebookApp.GradebookApp, {
         config: mockConfig,
-        settings: mockSettings,
         translations: {
           i18nEnabled: false
         }
@@ -232,7 +203,6 @@ describe('GradebookApp', function () {
           case 0:
             (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_GradebookApp.GradebookApp, {
               config: mockConfig,
-              settings: mockSettings,
               translations: {
                 language: 'en',
                 i18nEnabled: true
@@ -260,7 +230,6 @@ describe('GradebookApp', function () {
           case 0:
             _render = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_GradebookApp.GradebookApp, {
               config: mockConfig,
-              settings: mockSettings,
               translations: {
                 language: 'en',
                 i18nEnabled: true
@@ -270,7 +239,6 @@ describe('GradebookApp', function () {
             (0, _globals.expect)(mockSetupI18n).toHaveBeenCalledTimes(1);
             rerender(/*#__PURE__*/_react.default.createElement(_GradebookApp.GradebookApp, {
               config: mockConfig,
-              settings: mockSettings,
               translations: {
                 language: 'es',
                 i18nEnabled: true
@@ -303,7 +271,6 @@ describe('GradebookApp', function () {
             };
             _render2 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_GradebookApp.GradebookApp, {
               config: mockConfig,
-              settings: mockSettings,
               translations: {
                 language: 'en',
                 i18nEnabled: true,
@@ -313,7 +280,6 @@ describe('GradebookApp', function () {
             (0, _globals.expect)(mockSetupI18n).toHaveBeenCalledWith('en', overrides1);
             rerender(/*#__PURE__*/_react.default.createElement(_GradebookApp.GradebookApp, {
               config: mockConfig,
-              settings: mockSettings,
               translations: {
                 language: 'en',
                 i18nEnabled: true,
@@ -333,7 +299,6 @@ describe('GradebookApp', function () {
     it('does not re-run setupI18n when i18nEnabled changes to false', function () {
       var _render3 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_GradebookApp.GradebookApp, {
           config: mockConfig,
-          settings: mockSettings,
           translations: {
             language: 'en',
             i18nEnabled: true
@@ -343,7 +308,6 @@ describe('GradebookApp', function () {
       (0, _globals.expect)(mockSetupI18n).toHaveBeenCalledTimes(1);
       rerender(/*#__PURE__*/_react.default.createElement(_GradebookApp.GradebookApp, {
         config: mockConfig,
-        settings: mockSettings,
         translations: {
           i18nEnabled: false
         }
@@ -354,29 +318,10 @@ describe('GradebookApp', function () {
     });
   });
   describe('Type Safety', function () {
-    it('accepts gradebookConfig with custom settings type', function () {
-      var customConfig = {
-        components: {
-          StudentPopover: function StudentPopover() {
-            return /*#__PURE__*/_react.default.createElement("div", null, "Popover");
-          },
-          SettingsTrayContent: function SettingsTrayContent() {
-            return /*#__PURE__*/_react.default.createElement("div", null, "Settings");
-          }
-        }
-      };
-      var customSettingsData = {
-        customOption: true
-      };
-      var customOnSave = _globals.jest.fn().mockResolvedValue({
-        success: true
-      });
+    it('accepts gradebookConfig', function () {
+      var customConfig = {};
       (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_GradebookApp.GradebookApp, {
         config: customConfig,
-        settings: {
-          settings: customSettingsData,
-          onSave: customOnSave
-        },
         translations: {
           i18nEnabled: false
         }

package/lib/translated/mi/components/Gradebook/context/GradebookAppContext/GradebookAppProvider.js

@@ -19,6 +19,7 @@ var GradebookAppProvider = exports.GradebookAppProvider = function GradebookAppP
     settings = _useState2[0],
     setSettings = _useState2[1];
   var value = {
+    // If the settings will be implemented on the app level, we can remove this (MC won't use it)
     settings: {
       settings: settings,
       setSettings: setSettings,

package/lib/translated/mi/components/Gradebook/context/GradebookConfigContext/GradebookConfigContext.js

@@ -5,5 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GradebookConfigContext = void 0;
 var _react = require("react");
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 var GradebookConfigContext = exports.GradebookConfigContext = /*#__PURE__*/(0, _react.createContext)(null);

package/lib/translated/mi/components/Gradebook/context/GradebookConfigContext/__tests__/GradebookConfigContext.test.js

@@ -11,48 +11,44 @@ var TestConfigConsumer = function TestConfigConsumer() {
   var config = (0, _index.useGradebookConfig)();
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": "config-consumer"
-  }, config.components.StudentPopover ? 'has-student-popover' : 'no-student-popover');
+  }, config.masteryLevelConfig ? 'has-mastery-config' : 'no-mastery-config');
 };
 
-// Test component that uses the components
-var TestComponentsConsumer = function TestComponentsConsumer() {
+// Test component that uses the mastery level config
+var TestMasteryLevelConsumer = function TestMasteryLevelConsumer() {
+  var _config$masteryLevelC, _config$masteryLevelC2;
   var config = (0, _index.useGradebookConfig)();
-  var components = config.components;
-  var componentCount = Object.keys(components).length;
+  var availableLevels = ((_config$masteryLevelC = config.masteryLevelConfig) === null || _config$masteryLevelC === void 0 ? void 0 : (_config$masteryLevelC2 = _config$masteryLevelC.availableLevels) === null || _config$masteryLevelC2 === void 0 ? void 0 : _config$masteryLevelC2.length) || 0;
   return /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": "component-count"
-  }, componentCount);
+    "data-testid": "mastery-level-count"
+  }, availableLevels);
 };
-var DEFAULT_CONFIG = {
-  components: {
-    StudentPopover: function StudentPopover() {
-      return /*#__PURE__*/_react.default.createElement("div", null, "Mock StudentPopover");
-    },
-    SettingsTrayContent: function SettingsTrayContent() {
-      return /*#__PURE__*/_react.default.createElement("div", null, "Settings Content");
-    }
+var DEFAULT_CONFIG = {};
+var CONFIG_WITH_MASTERY = {
+  masteryLevelConfig: {
+    availableLevels: ['exceeds_mastery', 'mastery', 'near_mastery']
   }
 };
 describe('GradebookConfigContext', function () {
   describe('GradebookConfigProvider', function () {
     it('provides config to children', function () {
       (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.GradebookConfigProvider, {
-        config: DEFAULT_CONFIG
+        config: CONFIG_WITH_MASTERY
       }, /*#__PURE__*/_react.default.createElement(TestConfigConsumer, null)));
-      (0, _globals.expect)(_react2.screen.getByTestId('config-consumer')).toHaveTextContent('has-student-popover');
+      (0, _globals.expect)(_react2.screen.getByTestId('config-consumer')).toHaveTextContent('has-mastery-config');
     });
-    it('requires components field', function () {
+    it('allows empty config', function () {
       (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.GradebookConfigProvider, {
         config: DEFAULT_CONFIG
       }, /*#__PURE__*/_react.default.createElement(TestConfigConsumer, null)));
       (0, _globals.expect)(_react2.screen.getByTestId('config-consumer')).toBeInTheDocument();
-      (0, _globals.expect)(_react2.screen.getByTestId('config-consumer')).toHaveTextContent('has-student-popover');
+      (0, _globals.expect)(_react2.screen.getByTestId('config-consumer')).toHaveTextContent('no-mastery-config');
     });
-    it('requires StudentPopover in components', function () {
+    it('provides mastery level config when specified', function () {
       (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.GradebookConfigProvider, {
-        config: DEFAULT_CONFIG
-      }, /*#__PURE__*/_react.default.createElement(TestComponentsConsumer, null)));
-      (0, _globals.expect)(_react2.screen.getByTestId('component-count')).toHaveTextContent('2');
+        config: CONFIG_WITH_MASTERY
+      }, /*#__PURE__*/_react.default.createElement(TestMasteryLevelConsumer, null)));
+      (0, _globals.expect)(_react2.screen.getByTestId('mastery-level-count')).toHaveTextContent('3');
     });
   });
   describe('useGradebookConfig', function () {
@@ -66,24 +62,24 @@ describe('GradebookConfigContext', function () {
     });
     it('returns config when used inside provider', function () {
       (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.GradebookConfigProvider, {
-        config: DEFAULT_CONFIG
+        config: CONFIG_WITH_MASTERY
       }, /*#__PURE__*/_react.default.createElement(TestConfigConsumer, null)));
-      (0, _globals.expect)(_react2.screen.getByTestId('config-consumer')).toHaveTextContent('has-student-popover');
+      (0, _globals.expect)(_react2.screen.getByTestId('config-consumer')).toHaveTextContent('has-mastery-config');
     });
   });
-  describe('components', function () {
+  describe('masteryLevelConfig', function () {
     it('throws error when used outside provider', function () {
       var consoleSpy = jest.spyOn(console, 'error').mockImplementation(function () {});
       (0, _globals.expect)(function () {
-        (0, _react2.render)(/*#__PURE__*/_react.default.createElement(TestComponentsConsumer, null));
+        (0, _react2.render)(/*#__PURE__*/_react.default.createElement(TestMasteryLevelConsumer, null));
       }).toThrow('useGradebookConfig must be used within GradebookConfigProvider');
       consoleSpy.mockRestore();
     });
-    it('returns components when provided', function () {
+    it('returns mastery level config when provided', function () {
       (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.GradebookConfigProvider, {
-        config: DEFAULT_CONFIG
-      }, /*#__PURE__*/_react.default.createElement(TestComponentsConsumer, null)));
-      (0, _globals.expect)(_react2.screen.getByTestId('component-count')).toHaveTextContent('2');
+        config: CONFIG_WITH_MASTERY
+      }, /*#__PURE__*/_react.default.createElement(TestMasteryLevelConsumer, null)));
+      (0, _globals.expect)(_react2.screen.getByTestId('mastery-level-count')).toHaveTextContent('3');
     });
   });
 });

package/lib/translated/mi/components/Gradebook/gradebook-table/ColumnHeader/__tests__/index.test.js

@@ -171,4 +171,14 @@ describe('ColumnHeader', function () {
     (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ColumnHeader, defaultProps));
     expect(_react2.screen.getByTestId('column-header')).toBeInTheDocument();
   });
+  it('renders the optionsMenu prop when provided', function () {
+    var customMenu = /*#__PURE__*/_react.default.createElement("button", {
+      "data-testid": "custom-options-menu"
+    }, "Custom Menu");
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ColumnHeader, Object.assign({}, defaultProps, {
+      optionsMenu: customMenu
+    })));
+    expect(_react2.screen.getByTestId('custom-options-menu')).toBeInTheDocument();
+    expect(_react2.screen.getByText('Custom Menu')).toBeInTheDocument();
+  });
 });

package/lib/translated/mi/components/Gradebook/gradebook-table/ColumnHeader/index.js

@@ -18,7 +18,9 @@ var _index = _interopRequireDefault(require("../../shared/TruncateWithTooltip/in
 var _colors = require("../../../../util/gradebook/colors.js");
 var ColumnHeader = exports.ColumnHeader = function ColumnHeader(_ref) {
   var title = _ref.title,
+    titleId = _ref.titleId,
     optionsMenuTriggerLabel = _ref.optionsMenuTriggerLabel,
+    optionsMenu = _ref.optionsMenu,
     _ref$optionsMenuItems = _ref.optionsMenuItems,
     optionsMenuItems = _ref$optionsMenuItems === void 0 ? [] : _ref$optionsMenuItems,
     icon = _ref.icon,
@@ -35,7 +37,7 @@ var ColumnHeader = exports.ColumnHeader = function ColumnHeader(_ref) {
     alignItems: "center",
     justifyItems: "space-between",
     height: _constants.CELL_HEIGHT,
-    padding: "none none none x-small"
+    padding: "none x-small none x-small"
   }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
     shouldGrow: true,
     shouldShrink: true,
@@ -50,7 +52,8 @@ var ColumnHeader = exports.ColumnHeader = function ColumnHeader(_ref) {
     overflowX: "hidden",
     padding: "0 xx-small 0 0"
   }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
-    alt: title
+    alt: title,
+    id: titleId
   }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
     weight: "bold"
   }, /*#__PURE__*/_react.default.createElement(_index.default, null, title)))))), optionsMenuItems.length > 0 && /*#__PURE__*/_react.default.createElement(_uiMenu.Menu, {
@@ -62,5 +65,5 @@ var ColumnHeader = exports.ColumnHeader = function ColumnHeader(_ref) {
       screenReaderLabel: optionsMenuTriggerLabel,
       color: (0, _colors.getInverseColor)(background)
     }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconMoreLine, null))
-  }, optionsMenuItems)));
+  }, optionsMenuItems), optionsMenu));
 };

package/lib/translated/mi/components/Gradebook/gradebook-table/ColumnHeader/index.stories.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithMenu = exports.WithIconAndBackground = exports.WithIcon = exports.WithBrandBackground = exports.NarrowColumn = exports.LongTitleWithMenu = exports.LongTitle = exports.Default = exports.CustomWidth = void 0;
+exports.default = exports.WithTitleId = exports.WithMenu = exports.WithIconAndBackground = exports.WithIcon = exports.WithBrandBackground = exports.NarrowColumn = exports.LongTitleWithMenu = exports.LongTitle = exports.Default = exports.CustomWidth = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _uiMenu = require("@instructure/ui-menu");
 var _uiIcons = require("@instructure/ui-icons");
@@ -32,6 +32,12 @@ var LongTitle = exports.LongTitle = {
     title: 'This is a long title that should be truncated with an ellipsis when it exceeds the available space'
   }
 };
+var WithTitleId = exports.WithTitleId = {
+  args: {
+    title: 'Test Title',
+    titleId: 'test-title-id'
+  }
+};
 var WithMenu = exports.WithMenu = {
   args: {
     title: 'Test Title',

package/lib/translated/mi/components/Gradebook/gradebook-table/ScoreCellContent/ScoreWithLabel.js

@@ -13,6 +13,7 @@ var _index = require("../../icons/MasteryLevelIcon/index.js");
 var Label = function Label(_ref) {
   var scoreDisplayFormat = _ref.scoreDisplayFormat,
     score = _ref.score,
+    totalScore = _ref.totalScore,
     text = _ref.text;
   if (scoreDisplayFormat === _constants.ScoreDisplayFormat.ICON_AND_LABEL) {
     return /*#__PURE__*/_react.default.createElement(_uiText.Text, {
@@ -24,22 +25,34 @@ var Label = function Label(_ref) {
       size: "legend"
     }, score);
   }
+  var isPercentFormat = scoreDisplayFormat === _constants.ScoreDisplayFormat.PERCENT;
+  var isPercentAndRatioFormat = scoreDisplayFormat === _constants.ScoreDisplayFormat.PERCENT_AND_RATIO;
+  if (isPercentFormat || isPercentAndRatioFormat) {
+    var percent = score != null && totalScore != null && totalScore !== 0 ? "".concat(Math.round(score / totalScore * 100), "%") : null;
+    return percent != null ? /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+      gap: "x-small"
+    }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      weight: "bold"
+    }, percent), isPercentAndRatioFormat && /*#__PURE__*/_react.default.createElement(_uiText.Text, null, "(".concat(score, "/").concat(totalScore, ")"))) : null;
+  }
 };
 var ScoreWithLabel = exports.ScoreWithLabel = function ScoreWithLabel(_ref2) {
   var masteryLevel = _ref2.masteryLevel,
     score = _ref2.score,
+    totalScore = _ref2.totalScore,
     label = _ref2.label,
     _ref2$scoreDisplayFor = _ref2.scoreDisplayFormat,
     scoreDisplayFormat = _ref2$scoreDisplayFor === void 0 ? _constants.ScoreDisplayFormat.ICON_ONLY : _ref2$scoreDisplayFor;
+  var isPercentFormat = [_constants.ScoreDisplayFormat.PERCENT, _constants.ScoreDisplayFormat.PERCENT_AND_RATIO].includes(scoreDisplayFormat);
   var justifyItems = scoreDisplayFormat === _constants.ScoreDisplayFormat.ICON_ONLY ? 'center' : 'start';
   return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
     width: "100%",
     height: "100%",
     alignItems: "center",
     gap: "small",
-    padding: "none medium-small",
+    padding: "none small",
     justifyItems: justifyItems
-  }, /*#__PURE__*/_react.default.createElement(_index.MasteryLevelIcon, {
+  }, !isPercentFormat && /*#__PURE__*/_react.default.createElement(_index.MasteryLevelIcon, {
     masteryLevel: masteryLevel,
     width: "1.5rem",
     height: "1.5rem",
@@ -48,6 +61,7 @@ var ScoreWithLabel = exports.ScoreWithLabel = function ScoreWithLabel(_ref2) {
   }), /*#__PURE__*/_react.default.createElement(Label, {
     scoreDisplayFormat: scoreDisplayFormat,
     score: score,
+    totalScore: totalScore,
     text: label
   }));
 };

package/lib/translated/mi/components/Gradebook/gradebook-table/ScoreCellContent/__tests__/ScoreWithLabel.test.js

@@ -41,6 +41,47 @@ describe('ScoreWithLabel', function () {
       expect(pointsText).toBeInTheDocument();
       expect(pointsText.closest('[class*="screenReaderContent"]')).not.toBeInTheDocument();
     });
+    it('shows percent with PERCENT format', function () {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_ScoreWithLabel.ScoreWithLabel, Object.assign({}, defaultProps, {
+        score: 3,
+        totalScore: 4,
+        scoreDisplayFormat: _constants.ScoreDisplayFormat.PERCENT
+      })));
+      expect(_react2.screen.getByText('75%')).toBeInTheDocument();
+    });
+    it('does not show mastery icon with PERCENT format', function () {
+      var _render = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_ScoreWithLabel.ScoreWithLabel, Object.assign({}, defaultProps, {
+          score: 3,
+          totalScore: 4,
+          scoreDisplayFormat: _constants.ScoreDisplayFormat.PERCENT
+        }))),
+        container = _render.container;
+      expect(container.querySelector('svg')).not.toBeInTheDocument();
+    });
+    it('shows percent and ratio with PERCENT_AND_RATIO format', function () {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_ScoreWithLabel.ScoreWithLabel, Object.assign({}, defaultProps, {
+        score: 3,
+        totalScore: 4,
+        scoreDisplayFormat: _constants.ScoreDisplayFormat.PERCENT_AND_RATIO
+      })));
+      expect(_react2.screen.getByText('75%')).toBeInTheDocument();
+      expect(_react2.screen.getByText('(3/4)')).toBeInTheDocument();
+    });
+    it('does not show mastery icon with PERCENT_AND_RATIO format', function () {
+      var _render2 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_ScoreWithLabel.ScoreWithLabel, Object.assign({}, defaultProps, {
+          score: 3,
+          totalScore: 4,
+          scoreDisplayFormat: _constants.ScoreDisplayFormat.PERCENT_AND_RATIO
+        }))),
+        container = _render2.container;
+      expect(container.querySelector('svg')).not.toBeInTheDocument();
+    });
+    it('shows null when totalScore is missing with PERCENT format', function () {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_ScoreWithLabel.ScoreWithLabel, Object.assign({}, defaultProps, {
+        scoreDisplayFormat: _constants.ScoreDisplayFormat.PERCENT
+      })));
+      expect(_react2.screen.queryByText(/%/)).not.toBeInTheDocument();
+    });
   });
   it('uses default ICON_ONLY format when not specified', function () {
     (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_ScoreWithLabel.ScoreWithLabel, defaultProps));

package/lib/translated/mi/components/Gradebook/gradebook-table/ScoreCellContent/__tests__/index.test.js

@@ -24,23 +24,31 @@ describe('ScoreCellContent', function () {
       (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ScoreCellContent, Object.assign({}, defaultProps, {
         onAction: jest.fn()
       })));
-      expect(_react2.screen.queryByTestId('score-cell-action-button')).not.toBeInTheDocument();
+      expect(_react2.screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '0'
+      });
     });
     it('shows action button when focus is true', function () {
       (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ScoreCellContent, Object.assign({}, defaultProps, {
         onAction: jest.fn(),
         focus: true
       })));
-      expect(_react2.screen.getByTestId('score-cell-action-button')).toBeInTheDocument();
+      expect(_react2.screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '1'
+      });
     });
     it('shows action button on hover (internal state)', function () {
       (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ScoreCellContent, Object.assign({}, defaultProps, {
         onAction: jest.fn()
       })));
-      expect(_react2.screen.queryByTestId('score-cell-action-button')).not.toBeInTheDocument();
+      expect(_react2.screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '0'
+      });
       var viewElement = _react2.screen.getByTestId('score-cell-content');
       _react2.fireEvent.mouseEnter(viewElement);
-      expect(_react2.screen.getByTestId('score-cell-action-button')).toBeInTheDocument();
+      expect(_react2.screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '1'
+      });
     });
     it('hides action button on mouse leave (internal state)', function () {
       (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ScoreCellContent, Object.assign({}, defaultProps, {
@@ -48,16 +56,22 @@ describe('ScoreCellContent', function () {
       })));
       var viewElement = _react2.screen.getByTestId('score-cell-content');
       _react2.fireEvent.mouseEnter(viewElement);
-      expect(_react2.screen.getByTestId('score-cell-action-button')).toBeInTheDocument();
+      expect(_react2.screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '1'
+      });
       _react2.fireEvent.mouseLeave(viewElement);
-      expect(_react2.screen.queryByTestId('score-cell-action-button')).not.toBeInTheDocument();
+      expect(_react2.screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '0'
+      });
     });
     it('shows action button when hover prop is true (controlled)', function () {
       (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ScoreCellContent, Object.assign({}, defaultProps, {
         onAction: jest.fn(),
         hover: true
       })));
-      expect(_react2.screen.getByTestId('score-cell-action-button')).toBeInTheDocument();
+      expect(_react2.screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '1'
+      });
     });
     it('does not update internal hover state when hover prop is controlled', function () {
       (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ScoreCellContent, Object.assign({}, defaultProps, {
@@ -68,7 +82,9 @@ describe('ScoreCellContent', function () {
       _react2.fireEvent.mouseEnter(viewElement);
 
       // Button should not appear because hover prop is controlled and set to false
-      expect(_react2.screen.queryByTestId('score-cell-action-button')).not.toBeInTheDocument();
+      expect(_react2.screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '0'
+      });
     });
   });
   describe('action button interaction', function () {
@@ -82,12 +98,12 @@ describe('ScoreCellContent', function () {
       _react2.fireEvent.click(button);
       expect(onAction).toHaveBeenCalledTimes(1);
     });
-    it('disables action button when onAction is undefined', function () {
+    it('does not show action button when onAction is undefined', function () {
       (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ScoreCellContent, Object.assign({}, defaultProps, {
         onAction: void 0,
         focus: true
       })));
-      expect(_react2.screen.queryByTestId('score-cell-action-button')).toHaveAttribute('disabled');
+      expect(_react2.screen.queryByTestId('score-cell-action-wrapper')).not.toBeInTheDocument();
     });
   });
   describe('scoreDisplayFormat', function () {
@@ -110,5 +126,22 @@ describe('ScoreCellContent', function () {
       })));
       expect(_react2.screen.getByText('3')).toBeInTheDocument();
     });
+    it('renders percent with PERCENT format', function () {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ScoreCellContent, Object.assign({}, defaultProps, {
+        score: 3,
+        totalScore: 4,
+        scoreDisplayFormat: _constants.ScoreDisplayFormat.PERCENT
+      })));
+      expect(_react2.screen.getByText('75%')).toBeInTheDocument();
+    });
+    it('renders percent and ratio with PERCENT_AND_RATIO format', function () {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ScoreCellContent, Object.assign({}, defaultProps, {
+        score: 3,
+        totalScore: 4,
+        scoreDisplayFormat: _constants.ScoreDisplayFormat.PERCENT_AND_RATIO
+      })));
+      expect(_react2.screen.getByText('75%')).toBeInTheDocument();
+      expect(_react2.screen.getByText('(3/4)')).toBeInTheDocument();
+    });
   });
 });

package/lib/translated/mi/components/Gradebook/gradebook-table/ScoreCellContent/index.js

@@ -11,14 +11,16 @@ var _react = _interopRequireWildcard(require("react"));
 var _uiView = require("@instructure/ui-view");
 var _uiFlex = require("@instructure/ui-flex");
 var _uiButtons = require("@instructure/ui-buttons");
-var _uiIcons = require("@instructure/ui-icons");
 var _ScoreWithLabel = require("./ScoreWithLabel.js");
 var ScoreCellContent = exports.ScoreCellContent = function ScoreCellContent(_ref) {
   var masteryLevel = _ref.masteryLevel,
     scoreDisplayFormat = _ref.scoreDisplayFormat,
     score = _ref.score,
+    totalScore = _ref.totalScore,
     label = _ref.label,
     onAction = _ref.onAction,
+    actionScreenReaderLabel = _ref.actionScreenReaderLabel,
+    actionIcon = _ref.actionIcon,
     focus = _ref.focus,
     hoverControlled = _ref.hover,
     _ref$background = _ref.background,
@@ -28,7 +30,7 @@ var ScoreCellContent = exports.ScoreCellContent = function ScoreCellContent(_ref
     hoverInternal = _useState2[0],
     setHoverInternal = _useState2[1];
   var hover = hoverControlled !== null && hoverControlled !== void 0 ? hoverControlled : hoverInternal;
-  var showAction = focus || hover;
+  var showAction = onAction && (focus || hover);
   var handleMouseEnter = function handleMouseEnter() {
     if (hoverControlled === void 0) {
       setHoverInternal(true);
@@ -57,9 +59,16 @@ var ScoreCellContent = exports.ScoreCellContent = function ScoreCellContent(_ref
   }, /*#__PURE__*/_react.default.createElement(_ScoreWithLabel.ScoreWithLabel, {
     masteryLevel: masteryLevel,
     score: score,
+    totalScore: totalScore,
     scoreDisplayFormat: scoreDisplayFormat,
     label: label
-  }))), showAction && /*#__PURE__*/_react.default.createElement(_uiView.View, {
+  }))), onAction && /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "score-cell-action-wrapper",
+    style: {
+      opacity: showAction ? 1 : 0,
+      pointerEvents: showAction ? 'auto' : 'none'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_uiView.View, {
     position: "absolute",
     insetInlineEnd: "0",
     insetBlockStart: "50%",
@@ -67,14 +76,14 @@ var ScoreCellContent = exports.ScoreCellContent = function ScoreCellContent(_ref
       transform: 'translateY(-50%)'
     }
   }, /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+    "aria-haspopup": "dialog",
     withBackground: false,
     withBorder: false,
     size: "small",
     margin: "0 xxx-small 0 0",
-    renderIcon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconExpandStartLine, null),
-    screenReaderLabel: "View Contributing Score Details",
+    renderIcon: actionIcon,
+    screenReaderLabel: actionScreenReaderLabel || "View Contributing Score Details",
     onClick: onAction,
-    disabled: !onAction,
     "data-testid": "score-cell-action-button"
-  })));
+  }))));
 };