@instructure/outcomes-ui 4.1.1 → 4.1.3

package/lib/components/Gradebook/popovers/StudentPopover/__mocks__/mockData.js

@@ -0,0 +1,145 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.unassessedMasteryScores = exports.mockMasteryScores = exports.mockCaptionSingleSection = exports.mockCaptionNoSections = exports.mockCaptionManySections = exports.mockCaptionLongCourseName = exports.mockCaptionDefault = exports.lowMasteryScores = exports.highMasteryScores = void 0;
+var mockCaptionDefault = exports.mockCaptionDefault = {
+  description: 'Introduction to Computer Science',
+  metadata: 'Section A, Section B'
+};
+var mockCaptionSingleSection = exports.mockCaptionSingleSection = {
+  description: 'Advanced Mathematics',
+  metadata: 'Honors Section'
+};
+var mockCaptionManySections = exports.mockCaptionManySections = {
+  description: 'World History',
+  metadata: 'Section A - Morning, Section B - Afternoon, Section C - Evening, Section D - Online'
+};
+var mockCaptionLongCourseName = exports.mockCaptionLongCourseName = {
+  description: 'Advanced Placement European History: Renaissance to Modern Era',
+  metadata: 'AP Section'
+};
+var mockCaptionNoSections = exports.mockCaptionNoSections = {
+  description: 'Independent Study'
+};
+var mixedPerformanceAverage = {
+  averageScore: 3,
+  averageMasteryLevel: 'near_mastery'
+};
+var highPerformanceAverage = {
+  averageScore: 4.67,
+  averageMasteryLevel: 'exceeds_mastery'
+};
+var lowPerformanceAverage = {
+  averageScore: 1.67,
+  averageMasteryLevel: 'remediation'
+};
+var mockMasteryScores = exports.mockMasteryScores = {
+  grossAverage: mixedPerformanceAverage.averageScore,
+  averageIcon: mixedPerformanceAverage.averageMasteryLevel,
+  averageText: 'Mixed Performance',
+  buckets: {
+    exceeds_mastery: {
+      name: 'Exceeds Mastery',
+      icon: 'exceeds_mastery',
+      count: 2
+    },
+    mastery: {
+      name: 'Mastery',
+      icon: 'mastery',
+      count: 3
+    },
+    near_mastery: {
+      name: 'Near Mastery',
+      icon: 'near_mastery',
+      count: 1
+    },
+    remediation: {
+      name: 'Remediation',
+      icon: 'remediation',
+      count: 4
+    }
+  }
+};
+var highMasteryScores = exports.highMasteryScores = {
+  grossAverage: highPerformanceAverage.averageScore,
+  averageIcon: highPerformanceAverage.averageMasteryLevel,
+  averageText: 'Exceeds Mastery',
+  buckets: {
+    exceeds_mastery: {
+      name: 'Exceeds Mastery',
+      icon: 'exceeds_mastery',
+      count: 5
+    },
+    mastery: {
+      name: 'Mastery',
+      icon: 'mastery',
+      count: 2
+    },
+    near_mastery: {
+      name: 'Near Mastery',
+      icon: 'near_mastery',
+      count: 1
+    },
+    remediation: {
+      name: 'Remediation',
+      icon: 'remediation',
+      count: 0
+    }
+  }
+};
+var lowMasteryScores = exports.lowMasteryScores = {
+  grossAverage: lowPerformanceAverage.averageScore,
+  averageIcon: lowPerformanceAverage.averageMasteryLevel,
+  averageText: 'Remediation',
+  buckets: {
+    exceeds_mastery: {
+      name: 'Exceeds Mastery',
+      icon: 'exceeds_mastery',
+      count: 0
+    },
+    mastery: {
+      name: 'Mastery',
+      icon: 'mastery',
+      count: 1
+    },
+    near_mastery: {
+      name: 'Near Mastery',
+      icon: 'near_mastery',
+      count: 2
+    },
+    remediation: {
+      name: 'Remediation',
+      icon: 'remediation',
+      count: 5
+    }
+  }
+};
+var unassessedMasteryScores = exports.unassessedMasteryScores = {
+  grossAverage: null,
+  averageIcon: 'unassessed',
+  averageText: 'Unassessed',
+  buckets: {
+    exceeds_mastery: {
+      name: 'Exceeds Mastery',
+      icon: 'exceeds_mastery',
+      count: 0
+    },
+    mastery: {
+      name: 'Mastery',
+      icon: 'mastery',
+      count: 0
+    },
+    near_mastery: {
+      name: 'Near Mastery',
+      icon: 'near_mastery',
+      count: 0
+    },
+    remediation: {
+      name: 'Remediation',
+      icon: 'remediation',
+      count: 0
+    }
+  }
+};

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

@@ -8,7 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 require("@testing-library/jest-dom");
 var _index = require("../../../context/GradebookConfigContext/index.js");
-var _mockData = require("../../../__mocks__/mockData.js");
+var _mockData = require("../../../gradebook-table/StudentCell/__mocks__/mockData.js");
+var _mockData2 = require("../__mocks__/mockData.js");
 var _index2 = require("../index.js");
 jest.mock('format-message', function () {
   return function (msg) {
@@ -16,26 +17,16 @@ jest.mock('format-message', function () {
   };
 });
 describe('StudentPopover', function () {
-  var defaultProps = {
-    student: _mockData.mockStudent,
-    studentName: _mockData.mockStudent.display_name,
-    userDetails: _mockData.mockUserDetailsDefault,
-    masteryScores: _mockData.mockMasteryScores,
+  var defaultProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    studentName: _mockData.mockStudent.displayName
+  }, _mockData2.mockCaptionDefault), {}, {
+    masteryScores: _mockData2.mockMasteryScores,
     studentGradesUrl: '/courses/123/grades/1'
-  };
+  });
   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 () {
@@ -43,12 +34,11 @@ describe('StudentPopover', function () {
       renderComponent();
       var link = _react2.screen.getByTestId('student-cell-link');
       expect(link).toBeInTheDocument();
-      expect((0, _react2.within)(link).getByText(_mockData.mockStudent.display_name)).toBeInTheDocument();
+      expect((0, _react2.within)(link).getByText(_mockData.mockStudent.displayName)).toBeInTheDocument();
     });
     it('renders long student names with truncation', function () {
       renderComponent({
-        student: _mockData.mockStudentLongName,
-        studentName: _mockData.mockStudentLongName.display_name
+        studentName: _mockData.mockStudentLongName.displayName
       });
       var link = _react2.screen.getByTestId('student-cell-link');
       expect(link).toBeInTheDocument();
@@ -148,8 +138,8 @@ describe('StudentPopover', function () {
       }, _callee4);
     })));
   });
-  describe('User Details Display', function () {
-    it('displays user details including avatar, name, course, and sections', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee5() {
+  describe('Header Display', function () {
+    it('displays avatar, name, description, and metadata', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee5() {
       return (0, _regenerator2.default)().w(function (_context5) {
         while (1) switch (_context5.n) {
           case 0:
@@ -158,26 +148,26 @@ describe('StudentPopover', function () {
             _context5.n = 1;
             return _react2.screen.findByTestId('lmgb-student-popover-avatar');
           case 1:
-            expect(_react2.screen.getAllByText(_mockData.mockStudent.display_name).length).toBeGreaterThan(0);
-            expect(_react2.screen.getByText('Introduction to Computer Science')).toBeInTheDocument();
-            expect(_react2.screen.getByText('Section A, Section B')).toBeInTheDocument();
+            expect(_react2.screen.getAllByText(_mockData.mockStudent.displayName).length).toBeGreaterThan(0);
+            expect(_react2.screen.getByText(_mockData2.mockCaptionDefault.description)).toBeInTheDocument();
+            expect(_react2.screen.getByText(_mockData2.mockCaptionDefault.metadata)).toBeInTheDocument();
           case 2:
             return _context5.a(2);
         }
       }, _callee5);
     })));
-    it('does not display sections when none exist', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee6() {
+    it('does not display metadata when not provided', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee6() {
       return (0, _regenerator2.default)().w(function (_context6) {
         while (1) switch (_context6.n) {
           case 0:
-            renderComponent({
-              userDetails: _mockData.mockUserDetailsNoSections
-            });
+            renderComponent((0, _objectSpread2.default)((0, _objectSpread2.default)({}, _mockData2.mockCaptionNoSections), {}, {
+              metadata: void 0
+            }));
             _react2.fireEvent.click(_react2.screen.getByTestId('student-cell-link'));
             _context6.n = 1;
             return _react2.screen.findByTestId('lmgb-student-popover-avatar');
           case 1:
-            expect(_react2.screen.queryByText(/Section/)).not.toBeInTheDocument();
+            expect(_react2.screen.queryByText(_mockData2.mockCaptionDefault.metadata)).not.toBeInTheDocument();
           case 2:
             return _context6.a(2);
         }
@@ -260,7 +250,7 @@ describe('StudentPopover', function () {
             _context0.n = 1;
             return _react2.screen.findByTestId('lmgb-student-popover-avatar');
           case 1:
-            expect(_react2.screen.getAllByText(_mockData.mockStudent.display_name).length).toBeGreaterThan(0);
+            expect(_react2.screen.getAllByText(_mockData.mockStudent.displayName).length).toBeGreaterThan(0);
           case 2:
             return _context0.a(2);
         }

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

@@ -1,13 +1,15 @@
 import React, { type ReactNode } from 'react';
-import type { LmgbUserDetails, Student, StudentMasteryScores } from '../../../../types/gradebook';
+import type { StudentMasteryScores } from '../../../../types/gradebook';
 type HeaderSlot = {
     headerOverride: ReactNode;
-    student?: never;
-    userDetails?: never;
+    avatarUrl?: never;
+    description?: never;
+    metadata?: never;
 } | {
     headerOverride?: never;
-    student: Student;
-    userDetails: LmgbUserDetails;
+    avatarUrl?: string;
+    description?: string;
+    metadata?: string;
 };
 type MasteryScoresSlot = {
     masteryScoresOverride: ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/popovers/StudentPopover/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAcvD,OAAO,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAwBvF,KAAK,UAAU,GACX;IAAE,cAAc,EAAE,SAAS,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,GACnE;IAAE,cAAc,CAAC,EAAE,KAAK,CAAC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,WAAW,EAAE,eAAe,CAAA;CAAE,CAAA;AAE9E,KAAK,iBAAiB,GAClB;IAAE,qBAAqB,EAAE,SAAS,CAAC;IAAC,aAAa,CAAC,EAAE,KAAK,CAAA;CAAE,GAC3D;IAAE,qBAAqB,CAAC,EAAE,KAAK,CAAC;IAAC,aAAa,CAAC,EAAE,oBAAoB,CAAA;CAAE,CAAA;AAE3E,KAAK,UAAU,GACX;IAAE,eAAe,EAAE,SAAS,CAAC;IAAC,gBAAgB,CAAC,EAAE,KAAK,CAAA;CAAE,GACxD;IAAE,eAAe,CAAC,EAAE,KAAK,CAAC;IAAC,gBAAgB,EAAE,MAAM,CAAA;CAAE,CAAA;AAEzD,MAAM,MAAM,mBAAmB,GAAG;IAChC,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,sBAAsB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;CACtD,GAAG,UAAU,GAAG,iBAAiB,GAAG,UAAU,CAAA;AA6K/C,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA8ExD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/popovers/StudentPopover/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAcvD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAyB7D,KAAK,UAAU,GACX;IAAE,cAAc,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,KAAK,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,GACvF;IAAE,cAAc,CAAC,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAE3F,KAAK,iBAAiB,GAClB;IAAE,qBAAqB,EAAE,SAAS,CAAC;IAAC,aAAa,CAAC,EAAE,KAAK,CAAA;CAAE,GAC3D;IAAE,qBAAqB,CAAC,EAAE,KAAK,CAAC;IAAC,aAAa,CAAC,EAAE,oBAAoB,CAAA;CAAE,CAAA;AAE3E,KAAK,UAAU,GACX;IAAE,eAAe,EAAE,SAAS,CAAC;IAAC,gBAAgB,CAAC,EAAE,KAAK,CAAA;CAAE,GACxD;IAAE,eAAe,CAAC,EAAE,KAAK,CAAC;IAAC,gBAAgB,EAAE,MAAM,CAAA;CAAE,CAAA;AAEzD,MAAM,MAAM,mBAAmB,GAAG;IAChC,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,sBAAsB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;CACtD,GAAG,UAAU,GAAG,iBAAiB,GAAG,UAAU,CAAA;AA2K/C,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAwFxD,CAAA"}

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

@@ -22,9 +22,10 @@ var _uiSpinner = require("@instructure/ui-spinner");
 var _index = require("../../context/GradebookConfigContext/index.js");
 var _index2 = _interopRequireDefault(require("../../icons/MasteryLevelIcon/index.js"));
 var Header = function Header(_ref) {
-  var student = _ref.student,
+  var avatarUrl = _ref.avatarUrl,
     studentName = _ref.studentName,
-    userDetails = _ref.userDetails;
+    description = _ref.description,
+    metadata = _ref.metadata;
   return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
     gap: "small",
     alignItems: "start"
@@ -34,7 +35,7 @@ var Header = function Header(_ref) {
     as: "div",
     size: "large",
     name: studentName,
-    src: student.avatar_url,
+    src: avatarUrl,
     "data-testid": "lmgb-student-popover-avatar"
   })), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement(_uiView.View, {
     display: "block",
@@ -43,13 +44,11 @@ var Header = function Header(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_uiView.View, null, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
     size: "content",
     weight: "bold"
-  }, /*#__PURE__*/_react.default.createElement(_uiTruncateText.TruncateText, null, studentName))), userDetails.course.name && /*#__PURE__*/_react.default.createElement(_uiView.View, null, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+  }, /*#__PURE__*/_react.default.createElement(_uiTruncateText.TruncateText, null, studentName))), description && /*#__PURE__*/_react.default.createElement(_uiView.View, null, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
     size: "contentSmall"
-  }, /*#__PURE__*/_react.default.createElement(_uiTruncateText.TruncateText, null, userDetails.course.name))), userDetails.user.sections.length && /*#__PURE__*/_react.default.createElement(_uiView.View, null, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+  }, /*#__PURE__*/_react.default.createElement(_uiTruncateText.TruncateText, null, description))), metadata && /*#__PURE__*/_react.default.createElement(_uiView.View, null, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
     size: "legend"
-  }, /*#__PURE__*/_react.default.createElement(_uiTruncateText.TruncateText, null, userDetails.user.sections.map(function (section) {
-    return section.name;
-  }).join(', ')))))));
+  }, /*#__PURE__*/_react.default.createElement(_uiTruncateText.TruncateText, null, metadata))))));
 };
 var MasteryScores = function MasteryScores(_ref2) {
   var _masteryLevelConfig$m, _masteryLevelConfig$m2;
@@ -168,10 +167,11 @@ var ErrorMessage = function ErrorMessage(_ref5) {
 };
 var StudentPopover = exports.StudentPopover = function StudentPopover(_ref6) {
   var studentName = _ref6.studentName,
-    headerOverride = _ref6.headerOverride,
-    student = _ref6.student,
-    userDetails = _ref6.userDetails,
+    avatarUrl = _ref6.avatarUrl,
+    description = _ref6.description,
+    metadata = _ref6.metadata,
     masteryScores = _ref6.masteryScores,
+    headerOverride = _ref6.headerOverride,
     masteryScoresOverride = _ref6.masteryScoresOverride,
     actionsOverride = _ref6.actionsOverride,
     studentGradesUrl = _ref6.studentGradesUrl,
@@ -191,7 +191,8 @@ var StudentPopover = exports.StudentPopover = function StudentPopover(_ref6) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiPopover.Popover, {
     renderTrigger: /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
       isWithinText: false,
-      "data-testid": "student-cell-link"
+      "data-testid": "student-cell-link",
+      "aria-haspopup": "dialog"
     }, /*#__PURE__*/_react.default.createElement(_uiTruncateText.TruncateText, null, studentName)),
     isShowingContent: isShowingContent,
     onShowContent: function onShowContent() {
@@ -230,9 +231,10 @@ var StudentPopover = exports.StudentPopover = function StudentPopover(_ref6) {
     direction: "column",
     alignItems: "start"
   }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, headerOverride !== null && headerOverride !== void 0 ? headerOverride : /*#__PURE__*/_react.default.createElement(Header, {
-    student: student,
+    avatarUrl: avatarUrl,
     studentName: studentName,
-    userDetails: userDetails
+    description: description,
+    metadata: metadata
   })), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, masteryScoresOverride !== null && masteryScoresOverride !== void 0 ? masteryScoresOverride : /*#__PURE__*/_react.default.createElement(MasteryScores, {
     masteryScores: masteryScores
   }))), /*#__PURE__*/_react.default.createElement(Divider, null), actionsOverride !== null && actionsOverride !== void 0 ? actionsOverride : /*#__PURE__*/_react.default.createElement(Actions, {

package/lib/components/Gradebook/popovers/StudentPopover/index.stories.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import type { LmgbUserDetails, Student, StudentMasteryScores } from '../../../../types/gradebook';
+import type { StudentMasteryScores } from '../../../../types/gradebook';
+import type { StudentData } from '../../../../components/Gradebook/gradebook-table/StudentCell';
 type StoryArgs = {
     studentName: string;
-    student?: Student;
-    userDetails?: LmgbUserDetails;
+    student?: StudentData;
+    description?: string;
+    metadata?: string;
     masteryScores?: StudentMasteryScores;
     studentGradesUrl?: string;
     headerOverride?: React.ReactNode;
@@ -22,10 +24,9 @@ export declare const HighPerformingStudent: Story;
 export declare const LowPerformingStudent: Story;
 export declare const NoScores: Story;
 export declare const LongStudentName: Story;
-export declare const LongCourseName: Story;
-export declare const ManySections: Story;
-export declare const NoSections: Story;
-export declare const SingleSection: Story;
+export declare const WithDescriptionOnly: Story;
+export declare const WithLongDescription: Story;
+export declare const WithLongMetaData: Story;
 export declare const CustomHeader: Story;
 export declare const CustomMasteryScores: Story;
 export declare const CustomActions: Story;

package/lib/components/Gradebook/popovers/StudentPopover/index.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/popovers/StudentPopover/index.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAyBvF,KAAK,SAAS,GAAG;IACf,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,eAAe,CAAA;IAC7B,aAAa,CAAC,EAAE,oBAAoB,CAAA;IACpC,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,qBAAqB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,sBAAsB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;CACtD,CAAA;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,SAAS,CAezB,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAA;AAmBhC,eAAO,MAAM,OAAO,EAAE,KAGrB,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,KAGnC,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAGlC,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAGtB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAG7B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAkB1B,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAwBjC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAe3B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAA;AAED,eAAO,MAAM,wBAAwB,EAAE,KAiBtC,CAAA"}
+{"version":3,"file":"index.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/popovers/StudentPopover/index.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAC7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oDAAoD,CAAA;AAsBrF,KAAK,SAAS,GAAG;IACf,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,oBAAoB,CAAA;IACpC,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,qBAAqB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,sBAAsB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;CACtD,CAAA;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,SAAS,CAezB,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAA;AAmBhC,eAAO,MAAM,OAAO,EAAE,KAGrB,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,KAGnC,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAGlC,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAGtB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAG7B,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAOjC,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAOjC,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAO9B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAmB1B,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAwBjC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAe3B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAA;AAED,eAAO,MAAM,wBAAwB,EAAE,KAiBtC,CAAA"}

package/lib/components/Gradebook/popovers/StudentPopover/index.stories.js

@@ -4,10 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.SingleSection = exports.NoSections = exports.NoScores = exports.ManySections = exports.LowPerformingStudent = exports.LongStudentName = exports.LongCourseName = exports.Loading = exports.HighPerformingStudent = exports.ErrorMessage = exports.Default = exports.CustomMasteryScores = exports.CustomMasteryLevelConfig = exports.CustomHeader = exports.CustomActions = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+exports.default = exports.WithLongMetaData = exports.WithLongDescription = exports.WithDescriptionOnly = exports.NoScores = exports.LowPerformingStudent = exports.LongStudentName = exports.Loading = exports.HighPerformingStudent = exports.ErrorMessage = exports.Default = exports.CustomMasteryScores = exports.CustomMasteryLevelConfig = exports.CustomHeader = exports.CustomActions = 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"));
 var _react = _interopRequireDefault(require("react"));
 var _addonActions = require("@storybook/addon-actions");
 var _testingLibrary = require("@storybook/testing-library");
@@ -16,7 +16,8 @@ var _uiFlex = require("@instructure/ui-flex");
 var _uiText = require("@instructure/ui-text");
 var _uiButtons = require("@instructure/ui-buttons");
 var _decorators = require("../../storybook/decorators.js");
-var _mockData = require("../../__mocks__/mockData.js");
+var _mockData = require("../../gradebook-table/StudentCell/__mocks__/mockData.js");
+var _mockData2 = require("./__mocks__/mockData.js");
 var _index = require("../../../../index.js");
 // Storybook's args type (Partial<Props>) doesn't handle discriminated
 // unions in StudentPopoverProps so define a flatten version of it
@@ -33,14 +34,14 @@ var meta = {
 };
 var _default = exports.default = meta;
 var createStoryArgs = function createStoryArgs(student) {
-  var masteryScores = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : _mockData.mockMasteryScores;
-  return {
+  var masteryScores = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : _mockData2.mockMasteryScores;
+  return (0, _objectSpread2.default)((0, _objectSpread2.default)({
     student: student,
-    studentName: student.display_name,
-    userDetails: _mockData.mockUserDetailsDefault,
+    studentName: student.displayName
+  }, _mockData2.mockCaptionDefault), {}, {
     masteryScores: masteryScores,
     studentGradesUrl: "/courses/123/grades/".concat(student.id)
-  };
+  });
 };
 var openPopover = /*#__PURE__*/function () {
   var _ref2 = (0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee(_ref) {
@@ -70,42 +71,39 @@ var Default = exports.Default = {
   play: openPopover
 };
 var HighPerformingStudent = exports.HighPerformingStudent = {
-  args: createStoryArgs(_mockData.mockStudent, _mockData.highMasteryScores),
+  args: createStoryArgs(_mockData.mockStudent, _mockData2.highMasteryScores),
   play: openPopover
 };
 var LowPerformingStudent = exports.LowPerformingStudent = {
-  args: createStoryArgs(_mockData.mockStudent, _mockData.lowMasteryScores),
+  args: createStoryArgs(_mockData.mockStudent, _mockData2.lowMasteryScores),
   play: openPopover
 };
 var NoScores = exports.NoScores = {
-  args: createStoryArgs(_mockData.mockStudent, _mockData.unassessedMasteryScores),
+  args: createStoryArgs(_mockData.mockStudent, _mockData2.unassessedMasteryScores),
   play: openPopover
 };
 var LongStudentName = exports.LongStudentName = {
   args: createStoryArgs(_mockData.mockStudentLongName),
   play: openPopover
 };
-var LongCourseName = exports.LongCourseName = {
-  args: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, createStoryArgs((0, _mockData.createStudent)('4', 'Oliver', 'Brown'))), {}, {
-    userDetails: _mockData.mockUserDetailsLongCourseName
-  }),
-  play: openPopover
-};
-var ManySections = exports.ManySections = {
-  args: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, createStoryArgs((0, _mockData.createStudent)('3', 'Emma', 'Wilson'))), {}, {
-    userDetails: _mockData.mockUserDetailsManySections
+var WithDescriptionOnly = exports.WithDescriptionOnly = {
+  args: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, createStoryArgs(_mockData.mockStudent)), {}, {
+    description: 'Introduction to Computer Science',
+    metadata: void 0
   }),
   play: openPopover
 };
-var NoSections = exports.NoSections = {
-  args: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, createStoryArgs((0, _mockData.createStudent)('6', 'Liam', 'Miller'))), {}, {
-    userDetails: _mockData.mockUserDetailsNoSections
+var WithLongDescription = exports.WithLongDescription = {
+  args: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, createStoryArgs(_mockData.mockStudent)), {}, {
+    description: 'Advanced Placement European History: Renaissance to Modern Era',
+    metadata: 'AP Section'
   }),
   play: openPopover
 };
-var SingleSection = exports.SingleSection = {
-  args: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, createStoryArgs((0, _mockData.createStudent)('2', 'Jane', 'Doe'))), {}, {
-    userDetails: _mockData.mockUserDetailsSingleSection
+var WithLongMetaData = exports.WithLongMetaData = {
+  args: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, createStoryArgs(_mockData.mockStudent)), {}, {
+    description: 'World History',
+    metadata: 'Section A - Morning, Section B - Afternoon, Section C - Evening, Section D - Online'
   }),
   play: openPopover
 };
@@ -113,9 +111,10 @@ var CustomHeader = exports.CustomHeader = {
   args: createStoryArgs(_mockData.mockStudent),
   render: function render(args) {
     return /*#__PURE__*/_react.default.createElement(_index.StudentPopover, Object.assign({}, args, {
-      student: void 0,
+      avatarUrl: void 0,
       studentName: "John Doe",
-      userDetails: void 0,
+      description: void 0,
+      metadata: void 0,
       headerOverride: /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
         padding: "0 0 medium 0"
       }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement(_uiText.Text, null, "Custom Header for ", args.studentName)))
@@ -161,7 +160,7 @@ var CustomActions = exports.CustomActions = {
 };
 var Loading = exports.Loading = {
   args: {
-    studentName: _mockData.mockStudent.display_name,
+    studentName: _mockData.mockStudent.displayName,
     studentGradesUrl: "/courses/123/grades/".concat(_mockData.mockStudent.id),
     isLoading: true
   },
@@ -169,7 +168,7 @@ var Loading = exports.Loading = {
 };
 var ErrorMessage = exports.ErrorMessage = {
   args: {
-    studentName: _mockData.mockStudent.display_name,
+    studentName: _mockData.mockStudent.displayName,
     studentGradesUrl: "/courses/123/grades/".concat(_mockData.mockStudent.id),
     error: 'Failed to load student details. Please try again.'
   },

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

@@ -1,6 +1,7 @@
 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';
 interface ExampleCustomSettings {
     showStudentNames: boolean;
     nameDisplayFormat: NameDisplayFormat;
@@ -8,8 +9,8 @@ interface ExampleCustomSettings {
 interface StoryWrapperProps {
     children: React.ReactNode;
     masteryLevelConfig?: MasteryLevelConfig;
-    components?: Partial<GradebookComponents<ExampleCustomSettings>>;
 }
+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;AAKzB,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAG9D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0DAA0D,CAAA;AAClG,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAA;AAEvE,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,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.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"));
@@ -13,19 +13,10 @@ var _addonActions = require("@storybook/addon-actions");
 var _uiCheckbox = require("@instructure/ui-checkbox");
 var _uiFlex = require("@instructure/ui-flex");
 var _NameDisplaySelector = require("../toolbar/SettingsTray/NameDisplaySelector.js");
-var _index = require("../popovers/StudentPopover/index.js");
 var _constants = require("../../../util/gradebook/constants.js");
 var _GradebookApp = require("../GradebookApp.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',
-    studentGradesUrl: "/test-url",
-    userDetails: _mockData.mockUserDetailsDefault
-  }));
-};
-var ExampleSettingsTrayContent = function ExampleSettingsTrayContent(_ref) {
+var _index = require("../context/GradebookAppContext/index.js");
+var ExampleSettingsTrayContent = exports.ExampleSettingsTrayContent = function ExampleSettingsTrayContent(_ref) {
   var settings = _ref.settings,
     _onChange = _ref.onChange;
   return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
@@ -52,17 +43,12 @@ 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
-  };
+    masteryLevelConfig = _ref2.masteryLevelConfig;
   return /*#__PURE__*/_react.default.createElement(_GradebookApp.GradebookApp, {
     config: {
-      components: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultComponents), components),
       masteryLevelConfig: masteryLevelConfig
-    },
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index.GradebookAppProvider, {
     settings: {
       settings: {
         showStudentNames: true,
@@ -92,5 +78,5 @@ var StoryWrapper = exports.StoryWrapper = function StoryWrapper(_ref2) {
         return onSave;
       }()
     }
-  }, children);
+  }, children));
 };

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

@@ -8,7 +8,10 @@ export type CellProps = Omit<ViewProps, 'children'> & {
     isStacked?: boolean;
     header?: string | (() => React.ReactNode);
     children?: React.ReactNode | ((focused: boolean) => React.ReactNode);
+    'data-cell-id'?: string;
+    'data-row-index'?: number;
+    'data-col-key'?: string;
 };
-export declare const Cell: React.FC<CellProps>;
+export declare const Cell: React.NamedExoticComponent<CellProps>;
 export default Cell;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/table/Cell/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAQ,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAEtD,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IACpD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,KAAK,CAAC,SAAS,CAAC,CAAA;IACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;CACrE,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAmDpC,CAAA;AAED,eAAe,IAAI,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/table/Cell/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAA;AACrE,OAAO,EAAQ,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAEtD,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IACpD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,KAAK,CAAC,SAAS,CAAC,CAAA;IACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;IACpE,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AA4GD,eAAO,MAAM,IAAI,uCAA2C,CAAA;AAI5D,eAAe,IAAI,CAAA"}