@instructure/outcomes-ui 4.1.2 → 4.1.4

package/lib/translated/zh-Hant/components/Gradebook/icons/MasteryLevelIcon/UnassessedIcon.js

@@ -4,13 +4,19 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UnassessedIcon = void 0;
+exports.unassessedIconSvgPaths = exports.UnassessedIcon = exports.DEFAULT_FILL_UNASSESSED = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _excluded = ["fill"];
+var SVG_PATHS = [{
+  fillRule: 'evenodd',
+  clipRule: 'evenodd',
+  d: 'M17.8287 10.7565L15.8667 10.3683C15.9539 9.92738 16 9.47006 16 9C16 8.52994 15.9539 8.07262 15.8667 7.63168L17.8287 7.24354C17.9411 7.81162 18 8.39893 18 9C18 9.60107 17.9411 10.1884 17.8287 10.7565ZM16.4841 3.99946L14.8222 5.1121C14.3105 4.34788 13.6521 3.68948 12.8879 3.17785L14.0005 1.51591C14.982 2.17298 15.827 3.018 16.4841 3.99946ZM10.7565 0.171306L10.3683 2.13328C9.92738 2.04605 9.47006 2 9 2C8.52994 2 8.07262 2.04605 7.63168 2.13328L7.24354 0.171307C7.81163 0.0589225 8.39893 0 9 0C9.60107 0 10.1884 0.0589224 10.7565 0.171306ZM3.99946 1.51591L5.1121 3.17785C4.34788 3.68948 3.68948 4.34788 3.17785 5.1121L1.51591 3.99946C2.17298 3.018 3.018 2.17298 3.99946 1.51591ZM0.171306 7.24354C0.0589224 7.81163 0 8.39893 0 9C0 9.60107 0.0589225 10.1884 0.171306 10.7565L2.13328 10.3683C2.04605 9.92738 2 9.47006 2 9C2 8.52994 2.04605 8.07262 2.13328 7.63168L0.171306 7.24354ZM1.51591 14.0005L3.17785 12.8879C3.68948 13.6521 4.34788 14.3105 5.1121 14.8222L3.99946 16.4841C3.018 15.827 2.17298 14.982 1.51591 14.0005ZM7.24354 17.8287L7.63168 15.8667C8.07262 15.9539 8.52994 16 9 16C9.47006 16 9.92738 15.9539 10.3683 15.8667L10.7565 17.8287C10.1884 17.9411 9.60107 18 9 18C8.39893 18 7.81163 17.9411 7.24354 17.8287ZM14.0005 16.4841C14.982 15.827 15.827 14.982 16.4841 14.0005L14.8222 12.8879C14.3105 13.6521 13.6521 14.3105 12.8879 14.8222L14.0005 16.4841Z'
+}];
+var DEFAULT_FILL_UNASSESSED = exports.DEFAULT_FILL_UNASSESSED = '#C7CDD1';
 var UnassessedIcon = exports.UnassessedIcon = function UnassessedIcon(_ref) {
   var _ref$fill = _ref.fill,
-    fill = _ref$fill === void 0 ? '#C7CDD1' : _ref$fill,
+    fill = _ref$fill === void 0 ? DEFAULT_FILL_UNASSESSED : _ref$fill,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement("svg", Object.assign({
     id: "unassessed",
@@ -21,9 +27,12 @@ var UnassessedIcon = exports.UnassessedIcon = function UnassessedIcon(_ref) {
     xmlns: "http://www.w3.org/2000/svg",
     role: "img",
     "aria-label": "Unassessed"
-  }, props), /*#__PURE__*/_react.default.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M17.8287 10.7565L15.8667 10.3683C15.9539 9.92738 16 9.47006 16 9C16 8.52994 15.9539 8.07262 15.8667 7.63168L17.8287 7.24354C17.9411 7.81162 18 8.39893 18 9C18 9.60107 17.9411 10.1884 17.8287 10.7565ZM16.4841 3.99946L14.8222 5.1121C14.3105 4.34788 13.6521 3.68948 12.8879 3.17785L14.0005 1.51591C14.982 2.17298 15.827 3.018 16.4841 3.99946ZM10.7565 0.171306L10.3683 2.13328C9.92738 2.04605 9.47006 2 9 2C8.52994 2 8.07262 2.04605 7.63168 2.13328L7.24354 0.171307C7.81163 0.0589225 8.39893 0 9 0C9.60107 0 10.1884 0.0589224 10.7565 0.171306ZM3.99946 1.51591L5.1121 3.17785C4.34788 3.68948 3.68948 4.34788 3.17785 5.1121L1.51591 3.99946C2.17298 3.018 3.018 2.17298 3.99946 1.51591ZM0.171306 7.24354C0.0589224 7.81163 0 8.39893 0 9C0 9.60107 0.0589225 10.1884 0.171306 10.7565L2.13328 10.3683C2.04605 9.92738 2 9.47006 2 9C2 8.52994 2.04605 8.07262 2.13328 7.63168L0.171306 7.24354ZM1.51591 14.0005L3.17785 12.8879C3.68948 13.6521 4.34788 14.3105 5.1121 14.8222L3.99946 16.4841C3.018 15.827 2.17298 14.982 1.51591 14.0005ZM7.24354 17.8287L7.63168 15.8667C8.07262 15.9539 8.52994 16 9 16C9.47006 16 9.92738 15.9539 10.3683 15.8667L10.7565 17.8287C10.1884 17.9411 9.60107 18 9 18C8.39893 18 7.81163 17.9411 7.24354 17.8287ZM14.0005 16.4841C14.982 15.827 15.827 14.982 16.4841 14.0005L14.8222 12.8879C14.3105 13.6521 13.6521 14.3105 12.8879 14.8222L14.0005 16.4841Z"
+  }, props), SVG_PATHS.map(function (pathProps, index) {
+    return /*#__PURE__*/_react.default.createElement("path", Object.assign({
+      key: index
+    }, pathProps));
   }));
-};
+};
+var unassessedIconSvgPaths = exports.unassessedIconSvgPaths = SVG_PATHS.map(function (p) {
+  return "<path fill-rule=\"".concat(p.fillRule, "\" d=\"").concat(p.d, "\"/>");
+}).join('');

package/lib/translated/zh-Hant/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/translated/zh-Hant/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("../../../../../../lib/index.js");
 jest.mock('format-message', function () {
   return function (msg) {
@@ -16,13 +17,12 @@ 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, {
@@ -34,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();
@@ -139,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:
@@ -149,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);
         }
@@ -251,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/translated/zh-Hant/components/Gradebook/popovers/StudentPopover/index.js

@@ -21,9 +21,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"
@@ -33,7 +34,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",
@@ -42,13 +43,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;
@@ -167,10 +166,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,
@@ -190,7 +190,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() {
@@ -229,9 +230,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/translated/zh-Hant/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/translated/zh-Hant/components/Gradebook/storybook/decorators.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createStudentPopover = exports.StoryWrapper = exports.ExampleSettingsTrayContent = 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,26 +13,12 @@ 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 _index2 = require("../context/GradebookAppContext/index.js");
-var _mockData = require("../__mocks__/mockData.js");
-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 = exports.ExampleSettingsTrayContent = function ExampleSettingsTrayContent(_ref2) {
-  var settings = _ref2.settings,
-    _onChange = _ref2.onChange;
+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, {
     direction: "column",
     gap: "large"
@@ -55,14 +41,14 @@ var ExampleSettingsTrayContent = exports.ExampleSettingsTrayContent = function E
     }
   }));
 };
-var StoryWrapper = exports.StoryWrapper = function StoryWrapper(_ref3) {
-  var children = _ref3.children,
-    masteryLevelConfig = _ref3.masteryLevelConfig;
+var StoryWrapper = exports.StoryWrapper = function StoryWrapper(_ref2) {
+  var children = _ref2.children,
+    masteryLevelConfig = _ref2.masteryLevelConfig;
   return /*#__PURE__*/_react.default.createElement(_GradebookApp.GradebookApp, {
     config: {
       masteryLevelConfig: masteryLevelConfig
     }
-  }, /*#__PURE__*/_react.default.createElement(_index2.GradebookAppProvider, {
+  }, /*#__PURE__*/_react.default.createElement(_index.GradebookAppProvider, {
     settings: {
       settings: {
         showStudentNames: true,