@instructure/outcomes-ui 4.1.1 → 4.1.3

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

@@ -4,15 +4,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.OnAction = exports.IconOnly = exports.IconAndScore = exports.IconAndLabel = exports.FocusControlled = void 0;
+exports.default = exports.PercentAndRatio = exports.Percent = exports.OnAction = exports.IconOnly = exports.IconAndScore = exports.IconAndLabel = exports.FocusControlled = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _uiView = require("@instructure/ui-view");
 var _addonActions = require("@storybook/addon-actions");
+var _uiIcons = require("@instructure/ui-icons");
 var _constants = require("../../../../util/gradebook/constants.js");
 var _index = require("./index.js");
 var meta = {
   title: 'Gradebook/ScoreCellContent',
   component: _index.ScoreCellContent,
+  parameters: {
+    actions: {
+      argTypesRegex: ''
+    } // Disable auto-actions
+  },
   decorators: [function (Story) {
     return /*#__PURE__*/_react.default.createElement(_uiView.View, {
       width: "200px",
@@ -48,6 +54,26 @@ var IconAndLabel = exports.IconAndLabel = {
     background: 'secondary'
   }
 };
+var Percent = exports.Percent = {
+  args: {
+    scoreDisplayFormat: _constants.ScoreDisplayFormat.PERCENT,
+    masteryLevel: 'mastery',
+    label: 'Mastery',
+    score: 3,
+    totalScore: 4,
+    background: 'secondary'
+  }
+};
+var PercentAndRatio = exports.PercentAndRatio = {
+  args: {
+    scoreDisplayFormat: _constants.ScoreDisplayFormat.PERCENT_AND_RATIO,
+    masteryLevel: 'mastery',
+    label: 'Mastery',
+    score: 3,
+    totalScore: 4,
+    background: 'secondary'
+  }
+};
 var OnAction = exports.OnAction = {
   args: {
     scoreDisplayFormat: _constants.ScoreDisplayFormat.ICON_AND_POINTS,
@@ -55,6 +81,7 @@ var OnAction = exports.OnAction = {
     label: 'Remediation',
     score: 1,
     onAction: (0, _addonActions.action)('onAction'),
+    actionIcon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconExpandStartLine, null),
     background: 'secondary'
   }
 };
@@ -67,6 +94,7 @@ var FocusControlled = exports.FocusControlled = {
     label: 'No Evidence',
     score: 0,
     onAction: (0, _addonActions.action)('onAction'),
+    actionIcon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconExpandStartLine, null),
     focus: true,
     background: 'secondary'
   }

package/lib/translated/ca/components/Gradebook/gradebook-table/StudentCell/__mocks__/mockData.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mockStudentLongName = exports.mockStudent = void 0;
+var mockStudent = exports.mockStudent = {
+  id: '1',
+  displayName: 'John Smith',
+  sortableName: 'Smith, John',
+  status: 'active'
+};
+var mockStudentLongName = exports.mockStudentLongName = {
+  id: '2',
+  displayName: 'Alexander Montgomery Wellington Junior III',
+  sortableName: 'III, Alexander Montgomery Wellington Junior',
+  status: 'active'
+};

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

@@ -7,181 +7,87 @@ 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',
-  display_name: 'Jane Doe',
-  sortable_name: 'Doe, Jane',
-  sis_id: 'SIS123',
-  integration_id: 'INT456',
-  login_id: 'jane.doe@example.com',
-  avatar_url: 'https://example.com/avatar.jpg',
+  displayName: 'Jane Doe',
+  sortableName: 'Doe, Jane',
+  avatarUrl: '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
+    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('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
-      })));
-      (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));
+    it('does not render secondary info when secondaryInfo is not provided', function () {
+      (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, {
-        secondaryInfoDisplay: _constants.SecondaryInfoDisplay.SIS_ID
+    it('renders secondary info when provided', function () {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.StudentCell, Object.assign({}, defaultProps, {
+        secondaryInfo: "SIS123"
       })));
       var secondaryInfo = _react2.screen.getByTestId('student-secondary-info');
       (0, _globals.expect)(secondaryInfo).toBeInTheDocument();
       (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, {
-        secondaryInfoDisplay: _constants.SecondaryInfoDisplay.INTEGRATION_ID
-      })));
-      var secondaryInfo = _react2.screen.getByTestId('student-secondary-info');
-      (0, _globals.expect)(secondaryInfo).toBeInTheDocument();
-      (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, {
-        secondaryInfoDisplay: _constants.SecondaryInfoDisplay.LOGIN_ID
-      })));
-      var secondaryInfo = _react2.screen.getByTestId('student-secondary-info');
-      (0, _globals.expect)(secondaryInfo).toBeInTheDocument();
-      (0, _globals.expect)(secondaryInfo).toHaveTextContent('jane.doe@example.com');
-    });
-    it('renders empty string when SIS ID is not available', function () {
-      var studentWithoutSIS = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, mockStudent), {}, {
-        sis_id: void 0
-      });
-      renderWithConfig(/*#__PURE__*/_react.default.createElement(_index2.StudentCell, Object.assign({}, defaultProps, {
-        student: studentWithoutSIS,
-        secondaryInfoDisplay: _constants.SecondaryInfoDisplay.SIS_ID
+    it('renders empty string when secondaryInfo is an empty string', function () {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.StudentCell, Object.assign({}, defaultProps, {
+        secondaryInfo: ""
       })));
       var secondaryInfo = _react2.screen.getByTestId('student-secondary-info');
       (0, _globals.expect)(secondaryInfo).toBeInTheDocument();
       (0, _globals.expect)(secondaryInfo).toHaveTextContent('');
     });
-    it('renders empty string when integration ID is not available', function () {
-      var studentWithoutIntegrationId = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, mockStudent), {}, {
-        integration_id: void 0
-      });
-      renderWithConfig(/*#__PURE__*/_react.default.createElement(_index2.StudentCell, Object.assign({}, defaultProps, {
-        student: studentWithoutIntegrationId,
-        secondaryInfoDisplay: _constants.SecondaryInfoDisplay.INTEGRATION_ID
-      })));
-      var secondaryInfo = _react2.screen.getByTestId('student-secondary-info');
-      (0, _globals.expect)(secondaryInfo).toBeInTheDocument();
-      (0, _globals.expect)(secondaryInfo).toHaveTextContent('');
-    });
-    it('renders empty string when login ID is not available', function () {
-      var studentWithoutLoginId = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, mockStudent), {}, {
-        login_id: void 0
-      });
-      renderWithConfig(/*#__PURE__*/_react.default.createElement(_index2.StudentCell, Object.assign({}, defaultProps, {
-        student: studentWithoutLoginId,
-        secondaryInfoDisplay: _constants.SecondaryInfoDisplay.LOGIN_ID
-      })));
-      var secondaryInfo = _react2.screen.getByTestId('student-secondary-info');
-      (0, _globals.expect)(secondaryInfo).toBeInTheDocument();
-      (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, {
-        secondaryInfoDisplay: _constants.SecondaryInfoDisplay.NONE
-      })));
-      (0, _globals.expect)(_react2.screen.queryByTestId('student-secondary-info')).not.toBeInTheDocument();
-    });
   });
   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 +98,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 +108,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/translated/ca/components/Gradebook/gradebook-table/StudentCell/index.js

@@ -10,34 +10,15 @@ 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) {
-    case _constants.SecondaryInfoDisplay.SIS_ID:
-      return student.sis_id || '';
-    case _constants.SecondaryInfoDisplay.INTEGRATION_ID:
-      return student.integration_id || '';
-    case _constants.SecondaryInfoDisplay.LOGIN_ID:
-      return student.login_id || '';
-    default:
-      return null;
-  }
-};
 var StudentCell = exports.StudentCell = function StudentCell(_ref) {
-  var courseId = _ref.courseId,
-    student = _ref.student,
-    masteryScores = _ref.masteryScores,
-    secondaryInfoDisplay = _ref.secondaryInfoDisplay,
+  var student = _ref.student,
+    secondaryInfo = _ref.secondaryInfo,
     _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;
+  var studentName = nameDisplayFormat === _constants.NameDisplayFormat.LAST_FIRST ? student.sortableName : student.displayName;
   return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
     height: "100%",
     "data-testid": "student-cell",
@@ -48,7 +29,7 @@ var StudentCell = exports.StudentCell = function StudentCell(_ref) {
     as: "div",
     size: "x-small",
     name: studentName,
-    src: student.avatar_url,
+    src: student.avatarUrl,
     "data-testid": "student-avatar"
   })), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
     as: "div",
@@ -56,13 +37,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 !== void 0 && /*#__PURE__*/_react.default.createElement(_uiText.Text, {
     size: "legend",
     color: "secondary",
     "data-testid": "student-secondary-info"

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

@@ -4,28 +4,43 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithSISID = exports.WithLoginID = exports.WithIntegrationID = exports.ShowStatus = exports.LongNameLastFirst = exports.LongName = exports.LastFirstFormat = exports.FirstLastFormat = exports.Default = void 0;
+exports.default = exports.WithSecondaryInfo = exports.ShowStatus = exports.LongNameLastFirst = exports.LongName = exports.LastFirstFormat = exports.FirstLastFormat = exports.Default = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _react = _interopRequireDefault(require("react"));
 var _uiView = require("@instructure/ui-view");
 var _constants = require("../../../../util/gradebook/constants.js");
+var _mockData = require("./__mocks__/mockData.js");
 var _decorators = require("../../storybook/decorators.js");
-var _mockData = require("../../__mocks__/mockData.js");
 var _index = require("../../../../index.js");
+var _index2 = require("../../popovers/StudentPopover/index.js");
+var createStudentPopover = function createStudentPopover(_ref) {
+  var studentName = _ref.studentName,
+    avatarUrl = _ref.avatarUrl,
+    masteryScores = _ref.masteryScores;
+  return /*#__PURE__*/_react.default.createElement(_index2.StudentPopover, {
+    studentName: studentName,
+    avatarUrl: avatarUrl,
+    masteryScores: masteryScores,
+    studentGradesUrl: "/test-url",
+    description: "Introduction to Computer Science",
+    metadata: "Section A, Section B"
+  });
+};
 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: createStudentPopover({
+      studentName: _mockData.mockStudent.displayName
+    })
   }
 };
 var _default = exports.default = meta;
@@ -34,49 +49,45 @@ var Default = exports.Default = {
     student: _mockData.mockStudent
   }
 };
-var WithSISID = exports.WithSISID = {
+var WithSecondaryInfo = exports.WithSecondaryInfo = {
   args: {
     student: _mockData.mockStudent,
-    secondaryInfoDisplay: _constants.SecondaryInfoDisplay.SIS_ID
-  }
-};
-var WithLoginID = exports.WithLoginID = {
-  args: {
-    student: _mockData.mockStudent,
-    secondaryInfoDisplay: _constants.SecondaryInfoDisplay.LOGIN_ID
-  }
-};
-var WithIntegrationID = exports.WithIntegrationID = {
-  args: {
-    student: _mockData.mockStudent,
-    secondaryInfoDisplay: _constants.SecondaryInfoDisplay.INTEGRATION_ID
+    secondaryInfo: '12345678'
   }
 };
 var LastFirstFormat = exports.LastFirstFormat = {
   args: {
     student: _mockData.mockStudent,
     nameDisplayFormat: _constants.NameDisplayFormat.LAST_FIRST,
-    secondaryInfoDisplay: _constants.SecondaryInfoDisplay.SIS_ID
+    studentPopover: createStudentPopover({
+      studentName: _mockData.mockStudent.sortableName,
+      avatarUrl: void 0
+    })
   }
 };
 var FirstLastFormat = exports.FirstLastFormat = {
   args: {
     student: _mockData.mockStudent,
-    nameDisplayFormat: _constants.NameDisplayFormat.FIRST_LAST,
-    secondaryInfoDisplay: _constants.SecondaryInfoDisplay.LOGIN_ID
+    nameDisplayFormat: _constants.NameDisplayFormat.FIRST_LAST
   }
 };
 var LongName = exports.LongName = {
   args: {
     student: _mockData.mockStudentLongName,
-    secondaryInfoDisplay: _constants.SecondaryInfoDisplay.SIS_ID
+    studentPopover: createStudentPopover({
+      studentName: _mockData.mockStudentLongName.displayName,
+      avatarUrl: void 0
+    })
   }
 };
 var LongNameLastFirst = exports.LongNameLastFirst = {
   args: {
     student: _mockData.mockStudentLongName,
     nameDisplayFormat: _constants.NameDisplayFormat.LAST_FIRST,
-    secondaryInfoDisplay: _constants.SecondaryInfoDisplay.SIS_ID
+    studentPopover: createStudentPopover({
+      studentName: _mockData.mockStudentLongName.sortableName,
+      avatarUrl: void 0
+    })
   }
 };
 var ShowStatus = exports.ShowStatus = {

package/lib/translated/ca/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
+    }
+  }
+};