@instructure/outcomes-ui 4.1.1 → 4.1.2

package/lib/components/Gradebook/gradebook-table/StudentCell/__tests__/index.test.js

@@ -7,19 +7,7 @@ var _globals = require("@jest/globals");
 var _react2 = require("@testing-library/react");
 require("@testing-library/jest-dom");
 var _constants = require("../../../../../util/gradebook/constants.js");
-var _index = require("../../../context/GradebookConfigContext/index.js");
-var _mockData = require("../../../__mocks__/mockData.js");
-var _index2 = require("../index.js");
-jest.mock("../../../popovers/StudentPopover", function () {
-  return {
-    StudentPopover: function StudentPopover(_ref) {
-      var studentName = _ref.studentName;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        "data-testid": "student-popover"
-      }, studentName);
-    }
-  };
-});
+var _index = require("../index.js");
 var mockStudent = {
   id: '123',
   name: 'Jane Doe',
@@ -31,82 +19,54 @@ var mockStudent = {
   avatar_url: 'https://example.com/avatar.jpg',
   status: 'active'
 };
-var DEFAULT_CONFIG = {
-  components: {
-    StudentPopover: function StudentPopover(_ref2) {
-      var studentName = _ref2.studentName;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        "data-testid": "student-popover"
-      }, studentName);
-    },
-    SettingsTrayContent: function SettingsTrayContent() {
-      return /*#__PURE__*/_react.default.createElement("div", null, "Settings Content");
-    }
-  }
-};
-var renderWithConfig = function renderWithConfig(ui) {
-  var config = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : DEFAULT_CONFIG;
-  return (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.GradebookConfigProvider, {
-    config: config
-  }, ui));
-};
 describe('StudentCell', function () {
   var defaultProps = {
-    courseId: 'course-1',
     student: mockStudent,
-    masteryScores: _mockData.mockMasteryScores
+    studentPopover: /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "student-popover"
+    }, "Jane Doe")
   };
   describe('rendering', function () {
     it('renders the student cell with default props', function () {
-      renderWithConfig(/*#__PURE__*/_react.default.createElement(_index2.StudentCell, defaultProps));
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.StudentCell, defaultProps));
       (0, _globals.expect)(_react2.screen.getByTestId('student-cell')).toBeInTheDocument();
     });
     it('renders the student avatar by default', function () {
-      renderWithConfig(/*#__PURE__*/_react.default.createElement(_index2.StudentCell, defaultProps));
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.StudentCell, defaultProps));
       (0, _globals.expect)(_react2.screen.getByTestId('student-avatar')).toBeInTheDocument();
     });
     it('does not render the student avatar when showStudentAvatar is false', function () {
-      renderWithConfig(/*#__PURE__*/_react.default.createElement(_index2.StudentCell, Object.assign({}, defaultProps, {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.StudentCell, Object.assign({}, defaultProps, {
         showStudentAvatar: false
       })));
       (0, _globals.expect)(_react2.screen.queryByTestId('student-avatar')).not.toBeInTheDocument();
     });
-    it('renders the StudentPopover component', function () {
-      renderWithConfig(/*#__PURE__*/_react.default.createElement(_index2.StudentCell, defaultProps));
-      (0, _globals.expect)(_react2.screen.getByTestId('student-popover')).toBeInTheDocument();
-    });
-    it('passes masteryScores to StudentPopover', function () {
-      renderWithConfig(/*#__PURE__*/_react.default.createElement(_index2.StudentCell, Object.assign({}, defaultProps, {
-        masteryScores: _mockData.mockMasteryScores
-      })));
+    it('renders the student popover', function () {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.StudentCell, defaultProps));
       (0, _globals.expect)(_react2.screen.getByTestId('student-popover')).toBeInTheDocument();
     });
   });
-  describe('student name display', function () {
-    it('displays student display_name by default', function () {
-      renderWithConfig(/*#__PURE__*/_react.default.createElement(_index2.StudentCell, defaultProps));
+  describe('student popover content', function () {
+    it('renders the provided student popover content', function () {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.StudentCell, defaultProps));
       (0, _globals.expect)(_react2.screen.getByTestId('student-popover')).toHaveTextContent('Jane Doe');
     });
-    it('displays student display_name when nameDisplayFormat is FIRST_LAST', function () {
-      renderWithConfig(/*#__PURE__*/_react.default.createElement(_index2.StudentCell, Object.assign({}, defaultProps, {
-        nameDisplayFormat: _constants.NameDisplayFormat.FIRST_LAST
-      })));
-      (0, _globals.expect)(_react2.screen.getByTestId('student-popover')).toHaveTextContent('Jane Doe');
-    });
-    it('displays student sortable_name when nameDisplayFormat is LAST_FIRST', function () {
-      renderWithConfig(/*#__PURE__*/_react.default.createElement(_index2.StudentCell, Object.assign({}, defaultProps, {
-        nameDisplayFormat: _constants.NameDisplayFormat.LAST_FIRST
+    it('can render custom popover content', function () {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.StudentCell, Object.assign({}, defaultProps, {
+        studentPopover: /*#__PURE__*/_react.default.createElement("div", {
+          "data-testid": "custom-popover"
+        }, "Custom Content")
       })));
-      (0, _globals.expect)(_react2.screen.getByTestId('student-popover')).toHaveTextContent('Doe, Jane');
+      (0, _globals.expect)(_react2.screen.getByTestId('custom-popover')).toHaveTextContent('Custom Content');
     });
   });
   describe('secondary info display', function () {
     it('does not render secondary info when secondaryInfoDisplay is not provided', function () {
-      renderWithConfig(/*#__PURE__*/_react.default.createElement(_index2.StudentCell, defaultProps));
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.StudentCell, defaultProps));
       (0, _globals.expect)(_react2.screen.queryByTestId('student-secondary-info')).not.toBeInTheDocument();
     });
     it('renders SIS ID when secondaryInfoDisplay is SIS_ID', function () {
-      renderWithConfig(/*#__PURE__*/_react.default.createElement(_index2.StudentCell, Object.assign({}, defaultProps, {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.StudentCell, Object.assign({}, defaultProps, {
         secondaryInfoDisplay: _constants.SecondaryInfoDisplay.SIS_ID
       })));
       var secondaryInfo = _react2.screen.getByTestId('student-secondary-info');
@@ -114,7 +74,7 @@ describe('StudentCell', function () {
       (0, _globals.expect)(secondaryInfo).toHaveTextContent('SIS123');
     });
     it('renders integration ID when secondaryInfoDisplay is INTEGRATION_ID', function () {
-      renderWithConfig(/*#__PURE__*/_react.default.createElement(_index2.StudentCell, Object.assign({}, defaultProps, {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.StudentCell, Object.assign({}, defaultProps, {
         secondaryInfoDisplay: _constants.SecondaryInfoDisplay.INTEGRATION_ID
       })));
       var secondaryInfo = _react2.screen.getByTestId('student-secondary-info');
@@ -122,7 +82,7 @@ describe('StudentCell', function () {
       (0, _globals.expect)(secondaryInfo).toHaveTextContent('INT456');
     });
     it('renders login ID when secondaryInfoDisplay is LOGIN_ID', function () {
-      renderWithConfig(/*#__PURE__*/_react.default.createElement(_index2.StudentCell, Object.assign({}, defaultProps, {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.StudentCell, Object.assign({}, defaultProps, {
         secondaryInfoDisplay: _constants.SecondaryInfoDisplay.LOGIN_ID
       })));
       var secondaryInfo = _react2.screen.getByTestId('student-secondary-info');
@@ -133,7 +93,7 @@ describe('StudentCell', function () {
       var studentWithoutSIS = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, mockStudent), {}, {
         sis_id: void 0
       });
-      renderWithConfig(/*#__PURE__*/_react.default.createElement(_index2.StudentCell, Object.assign({}, defaultProps, {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.StudentCell, Object.assign({}, defaultProps, {
         student: studentWithoutSIS,
         secondaryInfoDisplay: _constants.SecondaryInfoDisplay.SIS_ID
       })));
@@ -145,7 +105,7 @@ describe('StudentCell', function () {
       var studentWithoutIntegrationId = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, mockStudent), {}, {
         integration_id: void 0
       });
-      renderWithConfig(/*#__PURE__*/_react.default.createElement(_index2.StudentCell, Object.assign({}, defaultProps, {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.StudentCell, Object.assign({}, defaultProps, {
         student: studentWithoutIntegrationId,
         secondaryInfoDisplay: _constants.SecondaryInfoDisplay.INTEGRATION_ID
       })));
@@ -157,7 +117,7 @@ describe('StudentCell', function () {
       var studentWithoutLoginId = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, mockStudent), {}, {
         login_id: void 0
       });
-      renderWithConfig(/*#__PURE__*/_react.default.createElement(_index2.StudentCell, Object.assign({}, defaultProps, {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.StudentCell, Object.assign({}, defaultProps, {
         student: studentWithoutLoginId,
         secondaryInfoDisplay: _constants.SecondaryInfoDisplay.LOGIN_ID
       })));
@@ -166,7 +126,7 @@ describe('StudentCell', function () {
       (0, _globals.expect)(secondaryInfo).toHaveTextContent('');
     });
     it('does not render secondary info when secondaryInfoDisplay is NONE', function () {
-      renderWithConfig(/*#__PURE__*/_react.default.createElement(_index2.StudentCell, Object.assign({}, defaultProps, {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.StudentCell, Object.assign({}, defaultProps, {
         secondaryInfoDisplay: _constants.SecondaryInfoDisplay.NONE
       })));
       (0, _globals.expect)(_react2.screen.queryByTestId('student-secondary-info')).not.toBeInTheDocument();
@@ -174,14 +134,14 @@ describe('StudentCell', function () {
   });
   describe('student status', function () {
     it('does not render status badge for active students', function () {
-      renderWithConfig(/*#__PURE__*/_react.default.createElement(_index2.StudentCell, defaultProps));
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.StudentCell, defaultProps));
       (0, _globals.expect)(_react2.screen.queryByTestId('student-status')).not.toBeInTheDocument();
     });
     it('renders status badge for inactive students', function () {
       var inactiveStudent = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, mockStudent), {}, {
         status: 'inactive'
       });
-      renderWithConfig(/*#__PURE__*/_react.default.createElement(_index2.StudentCell, Object.assign({}, defaultProps, {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.StudentCell, Object.assign({}, defaultProps, {
         student: inactiveStudent
       })));
       var status = _react2.screen.getByTestId('student-status');
@@ -192,7 +152,7 @@ describe('StudentCell', function () {
       var concludedStudent = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, mockStudent), {}, {
         status: 'concluded'
       });
-      renderWithConfig(/*#__PURE__*/_react.default.createElement(_index2.StudentCell, Object.assign({}, defaultProps, {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.StudentCell, Object.assign({}, defaultProps, {
         student: concludedStudent
       })));
       var status = _react2.screen.getByTestId('student-status');
@@ -202,17 +162,17 @@ describe('StudentCell', function () {
   });
   describe('avatar', function () {
     it('sets avatar name from student name', function () {
-      renderWithConfig(/*#__PURE__*/_react.default.createElement(_index2.StudentCell, defaultProps));
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.StudentCell, defaultProps));
       var avatar = _react2.screen.getByTestId('student-avatar');
       (0, _globals.expect)(avatar).toBeInTheDocument();
     });
     it('sets avatar src from student avatar_url', function () {
-      renderWithConfig(/*#__PURE__*/_react.default.createElement(_index2.StudentCell, defaultProps));
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.StudentCell, defaultProps));
       var avatar = _react2.screen.getByTestId('student-avatar');
       (0, _globals.expect)(avatar).toBeInTheDocument();
     });
     it('uses sortable_name for avatar when nameDisplayFormat is LAST_FIRST', function () {
-      renderWithConfig(/*#__PURE__*/_react.default.createElement(_index2.StudentCell, Object.assign({}, defaultProps, {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.StudentCell, Object.assign({}, defaultProps, {
         nameDisplayFormat: _constants.NameDisplayFormat.LAST_FIRST
       })));
       var avatar = _react2.screen.getByTestId('student-avatar');

package/lib/components/Gradebook/gradebook-table/StudentCell/index.d.ts

@@ -1,13 +1,12 @@
-import React from 'react';
-import { Student, StudentMasteryScores } from '../../../../types/gradebook';
+import React, { ReactNode } from 'react';
+import { Student } from '../../../../types/gradebook';
 import { SecondaryInfoDisplay, NameDisplayFormat } from '../../../../util/gradebook/constants';
 export interface StudentCellProps {
-    courseId: string;
     student: Student;
-    masteryScores?: StudentMasteryScores;
     secondaryInfoDisplay?: SecondaryInfoDisplay;
     showStudentAvatar?: boolean;
     nameDisplayFormat?: NameDisplayFormat;
+    studentPopover: ReactNode;
 }
 export declare const StudentCell: React.FC<StudentCellProps>;
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Gradebook/gradebook-table/StudentCell/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/gradebook-table/StudentCell/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,EAAE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AACjE,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAGpF,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,OAAO,CAAA;IAChB,aAAa,CAAC,EAAE,oBAAoB,CAAA;IACpC,oBAAoB,CAAC,EAAE,oBAAoB,CAAA;IAC3C,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;CACtC;AAiBD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAwDlD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/gradebook-table/StudentCell/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIxC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAEpF,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAA;IAChB,oBAAoB,CAAC,EAAE,oBAAoB,CAAA;IAC3C,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC,cAAc,EAAE,SAAS,CAAA;CAC1B;AAiBD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8ClD,CAAA"}

package/lib/components/Gradebook/gradebook-table/StudentCell/index.js

@@ -10,7 +10,6 @@ var _uiAvatar = require("@instructure/ui-avatar");
 var _uiFlex = require("@instructure/ui-flex");
 var _uiText = require("@instructure/ui-text");
 var _constants = require("../../../../util/gradebook/constants.js");
-var _index = require("../../context/GradebookConfigContext/index.js");
 var getSecondaryInfo = function getSecondaryInfo(student, secondaryInfoDisplay) {
   if (!secondaryInfoDisplay) return null;
   switch (secondaryInfoDisplay) {
@@ -25,16 +24,12 @@ var getSecondaryInfo = function getSecondaryInfo(student, secondaryInfoDisplay)
   }
 };
 var StudentCell = exports.StudentCell = function StudentCell(_ref) {
-  var courseId = _ref.courseId,
-    student = _ref.student,
-    masteryScores = _ref.masteryScores,
+  var student = _ref.student,
     secondaryInfoDisplay = _ref.secondaryInfoDisplay,
     _ref$showStudentAvata = _ref.showStudentAvatar,
     showStudentAvatar = _ref$showStudentAvata === void 0 ? true : _ref$showStudentAvata,
-    nameDisplayFormat = _ref.nameDisplayFormat;
-  var _useGradebookConfig = (0, _index.useGradebookConfig)(),
-    components = _useGradebookConfig.components;
-  var StudentPopover = components.StudentPopover;
+    nameDisplayFormat = _ref.nameDisplayFormat,
+    studentPopover = _ref.studentPopover;
   var shouldShowStudentStatus = student.status === 'inactive' || student.status === 'concluded';
   var secondaryInfo = getSecondaryInfo(student, secondaryInfoDisplay);
   var studentName = nameDisplayFormat === _constants.NameDisplayFormat.LAST_FIRST ? student.sortable_name : student.display_name;
@@ -56,13 +51,7 @@ var StudentCell = exports.StudentCell = function StudentCell(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
     direction: "column",
     textAlign: "start"
-  }, /*#__PURE__*/_react.default.createElement(StudentPopover, {
-    key: student.id,
-    student: student,
-    studentName: studentName,
-    courseId: courseId,
-    masteryScores: masteryScores
-  }), secondaryInfo !== null && /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+  }, studentPopover, secondaryInfo !== null && /*#__PURE__*/_react.default.createElement(_uiText.Text, {
     size: "legend",
     color: "secondary",
     "data-testid": "student-secondary-info"

package/lib/components/Gradebook/gradebook-table/StudentCell/index.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/gradebook-table/StudentCell/index.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAMtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,GAAG,CAAA;AAEzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAgBhC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAA;AAEvC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAK/B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAM/B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAOxB,CAAA"}
+{"version":3,"file":"index.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/gradebook-table/StudentCell/index.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAMtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,GAAG,CAAA;AAEzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAkBhC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAA;AAEvC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAK/B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAU7B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAU/B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAOxB,CAAA"}

package/lib/components/Gradebook/gradebook-table/StudentCell/index.stories.js

@@ -9,23 +9,25 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/obje
 var _react = _interopRequireDefault(require("react"));
 var _uiView = require("@instructure/ui-view");
 var _constants = require("../../../../util/gradebook/constants.js");
-var _decorators = require("../../storybook/decorators.js");
 var _mockData = require("../../__mocks__/mockData.js");
+var _decorators = require("../../storybook/decorators.js");
 var _index = require("../../../../index.js");
 var meta = {
   title: 'Gradebook/StudentCell',
   component: _index.StudentCell,
   decorators: [function (Story) {
-    return /*#__PURE__*/_react.default.createElement(_uiView.View, {
+    return /*#__PURE__*/_react.default.createElement(_decorators.StoryWrapper, null, /*#__PURE__*/_react.default.createElement(_uiView.View, {
       as: "div",
       width: "300px",
       height: "48px",
       display: "block"
-    }, /*#__PURE__*/_react.default.createElement(_decorators.StoryWrapper, null, /*#__PURE__*/_react.default.createElement(Story, null)));
+    }, /*#__PURE__*/_react.default.createElement(Story, null)));
   }],
   args: {
-    courseId: '123',
-    masteryScores: _mockData.mockMasteryScores
+    studentPopover: (0, _decorators.createStudentPopover)({
+      studentName: _mockData.mockStudent.display_name,
+      student: _mockData.mockStudent
+    })
   }
 };
 var _default = exports.default = meta;
@@ -56,7 +58,11 @@ var LastFirstFormat = exports.LastFirstFormat = {
   args: {
     student: _mockData.mockStudent,
     nameDisplayFormat: _constants.NameDisplayFormat.LAST_FIRST,
-    secondaryInfoDisplay: _constants.SecondaryInfoDisplay.SIS_ID
+    secondaryInfoDisplay: _constants.SecondaryInfoDisplay.SIS_ID,
+    studentPopover: (0, _decorators.createStudentPopover)({
+      studentName: _mockData.mockStudent.sortable_name,
+      student: _mockData.mockStudent
+    })
   }
 };
 var FirstLastFormat = exports.FirstLastFormat = {
@@ -69,14 +75,22 @@ var FirstLastFormat = exports.FirstLastFormat = {
 var LongName = exports.LongName = {
   args: {
     student: _mockData.mockStudentLongName,
-    secondaryInfoDisplay: _constants.SecondaryInfoDisplay.SIS_ID
+    secondaryInfoDisplay: _constants.SecondaryInfoDisplay.SIS_ID,
+    studentPopover: (0, _decorators.createStudentPopover)({
+      studentName: _mockData.mockStudentLongName.display_name,
+      student: _mockData.mockStudentLongName
+    })
   }
 };
 var LongNameLastFirst = exports.LongNameLastFirst = {
   args: {
     student: _mockData.mockStudentLongName,
     nameDisplayFormat: _constants.NameDisplayFormat.LAST_FIRST,
-    secondaryInfoDisplay: _constants.SecondaryInfoDisplay.SIS_ID
+    secondaryInfoDisplay: _constants.SecondaryInfoDisplay.SIS_ID,
+    studentPopover: (0, _decorators.createStudentPopover)({
+      studentName: _mockData.mockStudentLongName.sortable_name,
+      student: _mockData.mockStudentLongName
+    })
   }
 };
 var ShowStatus = exports.ShowStatus = {

package/lib/components/Gradebook/index.d.ts

@@ -1,9 +1,9 @@
 export { GradebookApp } from './GradebookApp';
-export type { GradebookAppProps, TranslationConfig, SaveSettingsResult, } from './GradebookApp';
+export type { GradebookAppProps, TranslationConfig, } from './GradebookApp';
 export { GradebookConfigProvider, useGradebookConfig, } from './context/GradebookConfigContext';
-export type { GradebookConfig, GradebookComponents, SettingsTrayContentProps, StudentPopoverWrapperProps, GradebookConfigProviderProps, } from './context/GradebookConfigContext';
+export type { GradebookConfig, MasteryLevelConfig, GradebookConfigProviderProps, } from './context/GradebookConfigContext';
 export { GradebookAppProvider, useGradebookApp, } from './context/GradebookAppContext';
-export type { GradebookAppContextValue, GradebookAppProviderProps, } from './context/GradebookAppContext';
+export type { GradebookAppContextValue, GradebookAppProviderProps, SaveSettingsResult, } from './context/GradebookAppContext';
 export { Table } from './table/Table';
 export { Row } from './table/Row';
 export { Cell } from './table/Cell';
@@ -14,6 +14,7 @@ export { StudentCell } from './gradebook-table/StudentCell';
 export { ScoreCellContent } from './gradebook-table/ScoreCellContent';
 export { ScoreWithLabel } from './gradebook-table/ScoreCellContent/ScoreWithLabel';
 export { SettingsTray } from './toolbar/SettingsTray';
+export type { SettingsTrayContentProps } from './toolbar/SettingsTray';
 export type { SettingsTrayProps } from './toolbar/SettingsTray';
 export { ExportCSVButton } from './toolbar/ExportCSVButton';
 export type { ExportCSVButtonProps } from './toolbar/ExportCSVButton';

package/lib/components/Gradebook/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Gradebook/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,YAAY,EACV,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,gBAAgB,CAAA;AAGvB,OAAO,EACL,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,kCAAkC,CAAA;AACzC,YAAY,EACV,eAAe,EACf,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,4BAA4B,GAC7B,MAAM,kCAAkC,CAAA;AAEzC,OAAO,EACL,oBAAoB,EACpB,eAAe,GAChB,MAAM,+BAA+B,CAAA;AACtC,YAAY,EACV,wBAAwB,EACxB,yBAAyB,GAC1B,MAAM,+BAA+B,CAAA;AAGtC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAG7C,OAAO,EAAE,YAAY,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAA;AACtF,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAA;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,mDAAmD,CAAA;AAGlF,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,YAAY,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAC3D,YAAY,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AAGrE,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAG1D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAA;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAA;AAChF,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAA;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAA;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAA;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAA;AAGxE,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAGvE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Gradebook/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,YAAY,EACV,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,gBAAgB,CAAA;AAGvB,OAAO,EACL,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,kCAAkC,CAAA;AACzC,YAAY,EACV,eAAe,EACf,kBAAkB,EAClB,4BAA4B,GAC7B,MAAM,kCAAkC,CAAA;AAEzC,OAAO,EACL,oBAAoB,EACpB,eAAe,GAChB,MAAM,+BAA+B,CAAA;AACtC,YAAY,EACV,wBAAwB,EACxB,yBAAyB,EACzB,kBAAkB,GACnB,MAAM,+BAA+B,CAAA;AAGtC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAG7C,OAAO,EAAE,YAAY,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAA;AACtF,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAA;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,mDAAmD,CAAA;AAGlF,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,YAAY,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAA;AACtE,YAAY,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAC3D,YAAY,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AAGrE,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAG1D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAA;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAA;AAChF,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAA;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAA;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAA;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAA;AAGxE,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAGvE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAA"}

package/lib/components/Gradebook/popovers/StudentPopover/__tests__/index.test.js

@@ -26,16 +26,7 @@ describe('StudentPopover', function () {
   var renderComponent = function renderComponent() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     return (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.GradebookConfigProvider, {
-      config: {
-        components: {
-          StudentPopover: function StudentPopover() {
-            return null;
-          },
-          SettingsTrayContent: function SettingsTrayContent() {
-            return null;
-          }
-        }
-      }
+      config: {}
     }, /*#__PURE__*/_react.default.createElement(_index2.StudentPopover, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultProps), props))));
   };
   describe('Rendering', function () {

package/lib/components/Gradebook/storybook/decorators.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import { NameDisplayFormat } from '../../../util/gradebook/constants';
-import type { GradebookComponents, MasteryLevelConfig } from '../context/GradebookConfigContext/GradebookConfigContext';
+import type { MasteryLevelConfig } from '../context/GradebookConfigContext/GradebookConfigContext';
+import type { SettingsTrayContentProps } from '../toolbar/SettingsTray';
+import type { Student, StudentMasteryScores } from '../../../types/gradebook';
 interface ExampleCustomSettings {
     showStudentNames: boolean;
     nameDisplayFormat: NameDisplayFormat;
@@ -8,8 +10,14 @@ interface ExampleCustomSettings {
 interface StoryWrapperProps {
     children: React.ReactNode;
     masteryLevelConfig?: MasteryLevelConfig;
-    components?: Partial<GradebookComponents<ExampleCustomSettings>>;
 }
+interface CreateStudentPopoverProps {
+    studentName: string;
+    student?: Student;
+    masteryScores?: StudentMasteryScores;
+}
+export declare const createStudentPopover: ({ studentName, student, masteryScores }: CreateStudentPopoverProps) => React.JSX.Element;
+export declare const ExampleSettingsTrayContent: React.FC<SettingsTrayContentProps<ExampleCustomSettings>>;
 export declare const StoryWrapper: React.FC<StoryWrapperProps>;
 export {};
 //# sourceMappingURL=decorators.d.ts.map

package/lib/components/Gradebook/storybook/decorators.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"decorators.d.ts","sourceRoot":"","sources":["../../../../src/components/Gradebook/storybook/decorators.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAG9D,OAAO,KAAK,EACV,mBAAmB,EACnB,kBAAkB,EAGnB,MAAM,0DAA0D,CAAA;AAEjE,UAAU,qBAAqB;IAC7B,gBAAgB,EAAE,OAAO,CAAA;IACzB,iBAAiB,EAAE,iBAAiB,CAAA;CACrC;AAED,UAAU,iBAAiB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,qBAAqB,CAAC,CAAC,CAAA;CACjE;AA6CD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAiCpD,CAAA"}
+{"version":3,"file":"decorators.d.ts","sourceRoot":"","sources":["../../../../src/components/Gradebook/storybook/decorators.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAI9D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0DAA0D,CAAA;AAClG,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAA;AACvE,OAAO,KAAK,EAAE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAEtE,UAAU,qBAAqB;IAC7B,gBAAgB,EAAE,OAAO,CAAA;IACzB,iBAAiB,EAAE,iBAAiB,CAAA;CACrC;AAED,UAAU,iBAAiB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;CACxC;AAED,UAAU,yBAAyB;IACjC,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,aAAa,CAAC,EAAE,oBAAoB,CAAA;CACrC;AAED,eAAO,MAAM,oBAAoB,GAAI,yCAIlC,yBAAyB,sBAU3B,CAAA;AAED,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAAC,qBAAqB,CAAC,CA6BhG,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2BpD,CAAA"}

package/lib/components/Gradebook/storybook/decorators.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StoryWrapper = void 0;
+exports.createStudentPopover = exports.StoryWrapper = exports.ExampleSettingsTrayContent = void 0;
 var _regenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
@@ -16,18 +16,23 @@ var _NameDisplaySelector = require("../toolbar/SettingsTray/NameDisplaySelector.
 var _index = require("../popovers/StudentPopover/index.js");
 var _constants = require("../../../util/gradebook/constants.js");
 var _GradebookApp = require("../GradebookApp.js");
+var _index2 = require("../context/GradebookAppContext/index.js");
 var _mockData = require("../__mocks__/mockData.js");
-var StudentPopoverWrapper = function StudentPopoverWrapper(props) {
-  return /*#__PURE__*/_react.default.createElement(_index.StudentPopover, Object.assign({}, props, {
-    student: props.student || (0, _mockData.createStudent)('1', 'John', 'Doe'),
-    studentName: props.studentName || 'John Doe',
+var createStudentPopover = exports.createStudentPopover = function createStudentPopover(_ref) {
+  var studentName = _ref.studentName,
+    student = _ref.student,
+    masteryScores = _ref.masteryScores;
+  return /*#__PURE__*/_react.default.createElement(_index.StudentPopover, {
+    student: student || (0, _mockData.createStudent)('1', 'John', 'Doe'),
+    studentName: studentName,
+    masteryScores: masteryScores,
     studentGradesUrl: "/test-url",
     userDetails: _mockData.mockUserDetailsDefault
-  }));
+  });
 };
-var ExampleSettingsTrayContent = function ExampleSettingsTrayContent(_ref) {
-  var settings = _ref.settings,
-    _onChange = _ref.onChange;
+var ExampleSettingsTrayContent = exports.ExampleSettingsTrayContent = function ExampleSettingsTrayContent(_ref2) {
+  var settings = _ref2.settings,
+    _onChange = _ref2.onChange;
   return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
     direction: "column",
     gap: "large"
@@ -50,19 +55,14 @@ var ExampleSettingsTrayContent = function ExampleSettingsTrayContent(_ref) {
     }
   }));
 };
-var StoryWrapper = exports.StoryWrapper = function StoryWrapper(_ref2) {
-  var children = _ref2.children,
-    masteryLevelConfig = _ref2.masteryLevelConfig,
-    components = _ref2.components;
-  var defaultComponents = {
-    StudentPopover: StudentPopoverWrapper,
-    SettingsTrayContent: ExampleSettingsTrayContent
-  };
+var StoryWrapper = exports.StoryWrapper = function StoryWrapper(_ref3) {
+  var children = _ref3.children,
+    masteryLevelConfig = _ref3.masteryLevelConfig;
   return /*#__PURE__*/_react.default.createElement(_GradebookApp.GradebookApp, {
     config: {
-      components: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultComponents), components),
       masteryLevelConfig: masteryLevelConfig
-    },
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index2.GradebookAppProvider, {
     settings: {
       settings: {
         showStudentNames: true,
@@ -92,5 +92,5 @@ var StoryWrapper = exports.StoryWrapper = function StoryWrapper(_ref2) {
         return onSave;
       }()
     }
-  }, children);
+  }, children));
 };