@instructure/outcomes-ui 4.1.2 → 4.1.4

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

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

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

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

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

@@ -3,6 +3,8 @@ import { type ViewProps } from '@instructure/ui-view';
 import { type ScoreWithLabelProps } from './ScoreWithLabel';
 export type ScoreCellContentProps = ScoreWithLabelProps & {
     onAction?: () => void;
+    actionScreenReaderLabel?: string;
+    actionIcon?: React.ReactNode;
     focus?: boolean;
     hover?: boolean;
     background?: ViewProps['background'];

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/gradebook-table/ScoreCellContent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAI3D,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAE3E,MAAM,MAAM,qBAAqB,GAAI,mBAAmB,GAAG;IACzD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,UAAU,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAA;CACrC,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAoE5D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/gradebook-table/ScoreCellContent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAG3D,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAE3E,MAAM,MAAM,qBAAqB,GAAG,mBAAmB,GAAG;IACxD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,UAAU,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAA;CACrC,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAmF5D,CAAA"}

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

@@ -12,14 +12,17 @@ var _formatMessage = _interopRequireDefault(require("format-message"));
 var _uiView = require("@instructure/ui-view");
 var _uiFlex = require("@instructure/ui-flex");
 var _uiButtons = require("@instructure/ui-buttons");
-var _uiIcons = require("@instructure/ui-icons");
 var _ScoreWithLabel = require("./ScoreWithLabel.js");
 var ScoreCellContent = exports.ScoreCellContent = function ScoreCellContent(_ref) {
   var masteryLevel = _ref.masteryLevel,
     scoreDisplayFormat = _ref.scoreDisplayFormat,
     score = _ref.score,
+    totalScore = _ref.totalScore,
     label = _ref.label,
+    iconColor = _ref.iconColor,
     onAction = _ref.onAction,
+    actionScreenReaderLabel = _ref.actionScreenReaderLabel,
+    actionIcon = _ref.actionIcon,
     focus = _ref.focus,
     hoverControlled = _ref.hover,
     _ref$background = _ref.background,
@@ -58,9 +61,17 @@ var ScoreCellContent = exports.ScoreCellContent = function ScoreCellContent(_ref
   }, /*#__PURE__*/_react.default.createElement(_ScoreWithLabel.ScoreWithLabel, {
     masteryLevel: masteryLevel,
     score: score,
+    totalScore: totalScore,
     scoreDisplayFormat: scoreDisplayFormat,
-    label: label
-  }))), showAction && /*#__PURE__*/_react.default.createElement(_uiView.View, {
+    label: label,
+    iconColor: iconColor
+  }))), onAction && /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "score-cell-action-wrapper",
+    style: {
+      opacity: showAction ? 1 : 0,
+      pointerEvents: showAction ? 'auto' : 'none'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_uiView.View, {
     position: "absolute",
     insetInlineEnd: "0",
     insetBlockStart: "50%",
@@ -68,13 +79,14 @@ var ScoreCellContent = exports.ScoreCellContent = function ScoreCellContent(_ref
       transform: 'translateY(-50%)'
     }
   }, /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+    "aria-haspopup": "dialog",
     withBackground: false,
     withBorder: false,
     size: "small",
     margin: "0 xxx-small 0 0",
-    renderIcon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconExpandStartLine, null),
-    screenReaderLabel: (0, _formatMessage.default)('View Contributing Score Details'),
+    renderIcon: actionIcon,
+    screenReaderLabel: actionScreenReaderLabel || (0, _formatMessage.default)('View Contributing Score Details'),
     onClick: onAction,
     "data-testid": "score-cell-action-button"
-  })));
+  }))));
 };

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

@@ -6,6 +6,10 @@ type Story = StoryObj<typeof ScoreCellContent>;
 export declare const IconOnly: Story;
 export declare const IconAndScore: Story;
 export declare const IconAndLabel: Story;
+export declare const Percent: Story;
+export declare const PercentAndRatio: Story;
 export declare const OnAction: Story;
+export declare const CustomColor: Story;
+export declare const CustomColorWithLabel: Story;
 export declare const FocusControlled: Story;
 //# sourceMappingURL=index.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/gradebook-table/ScoreCellContent/index.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAItD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAavC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAE9C,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAA;AAGD,eAAO,MAAM,eAAe,EAAE,KAU7B,CAAA"}
+{"version":3,"file":"index.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/gradebook-table/ScoreCellContent/index.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAKtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAavC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAE9C,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KASrB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAS7B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KASzB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KASlC,CAAA;AAGD,eAAO,MAAM,eAAe,EAAE,KAW7B,CAAA"}

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

@@ -4,10 +4,11 @@ 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 = exports.CustomColorWithLabel = exports.CustomColor = 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 = {
@@ -53,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,
@@ -60,9 +81,30 @@ var OnAction = exports.OnAction = {
     label: 'Remediation',
     score: 1,
     onAction: (0, _addonActions.action)('onAction'),
+    actionIcon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconExpandStartLine, null),
     background: 'secondary'
   }
 };
+var CustomColor = exports.CustomColor = {
+  args: {
+    scoreDisplayFormat: _constants.ScoreDisplayFormat.ICON_ONLY,
+    masteryLevel: 'mastery',
+    label: 'Mastery',
+    score: 3,
+    background: 'secondary',
+    iconColor: '#FF6B35'
+  }
+};
+var CustomColorWithLabel = exports.CustomColorWithLabel = {
+  args: {
+    scoreDisplayFormat: _constants.ScoreDisplayFormat.ICON_AND_LABEL,
+    masteryLevel: 'exceeds_mastery',
+    label: 'Exceeds Mastery',
+    score: 4,
+    background: 'secondary',
+    iconColor: '#4CAF50'
+  }
+};
 
 // Actual focus will be on table cell element, no focus ring shows here, only action button is displayed
 var FocusControlled = exports.FocusControlled = {
@@ -72,6 +114,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/components/Gradebook/gradebook-table/StudentCell/__mocks__/mockData.d.ts

@@ -0,0 +1,13 @@
+export declare const mockStudent: {
+    id: string;
+    displayName: string;
+    sortableName: string;
+    status: string;
+};
+export declare const mockStudentLongName: {
+    id: string;
+    displayName: string;
+    sortableName: string;
+    status: string;
+};
+//# sourceMappingURL=mockData.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mockData.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Gradebook/gradebook-table/StudentCell/__mocks__/mockData.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;;;;CAKvB,CAAA;AAED,eAAO,MAAM,mBAAmB;;;;;CAK/B,CAAA"}

package/lib/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/components/Gradebook/gradebook-table/StudentCell/__tests__/index.test.js

@@ -10,13 +10,9 @@ var _constants = require("../../../../../util/gradebook/constants.js");
 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'
 };
 describe('StudentCell', function () {
@@ -61,76 +57,26 @@ describe('StudentCell', function () {
     });
   });
   describe('secondary info display', function () {
-    it('does not render secondary info when secondaryInfoDisplay is not provided', function () {
+    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 () {
+    it('renders secondary info when provided', function () {
       (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.StudentCell, Object.assign({}, defaultProps, {
-        secondaryInfoDisplay: _constants.SecondaryInfoDisplay.SIS_ID
+        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 () {
+    it('renders empty string when secondaryInfo is an empty string', function () {
       (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.StudentCell, Object.assign({}, defaultProps, {
-        secondaryInfoDisplay: _constants.SecondaryInfoDisplay.INTEGRATION_ID
-      })));
-      var secondaryInfo = _react2.screen.getByTestId('student-secondary-info');
-      (0, _globals.expect)(secondaryInfo).toBeInTheDocument();
-      (0, _globals.expect)(secondaryInfo).toHaveTextContent('INT456');
-    });
-    it('renders login ID when secondaryInfoDisplay is LOGIN_ID', function () {
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.StudentCell, Object.assign({}, defaultProps, {
-        secondaryInfoDisplay: _constants.SecondaryInfoDisplay.LOGIN_ID
-      })));
-      var secondaryInfo = _react2.screen.getByTestId('student-secondary-info');
-      (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
-      });
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.StudentCell, Object.assign({}, defaultProps, {
-        student: studentWithoutSIS,
-        secondaryInfoDisplay: _constants.SecondaryInfoDisplay.SIS_ID
+        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
-      });
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.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
-      });
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.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 () {
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.StudentCell, Object.assign({}, defaultProps, {
-        secondaryInfoDisplay: _constants.SecondaryInfoDisplay.NONE
-      })));
-      (0, _globals.expect)(_react2.screen.queryByTestId('student-secondary-info')).not.toBeInTheDocument();
-    });
   });
   describe('student status', function () {
     it('does not render status badge for active students', function () {

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/gradebook-table/StudentCell/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIxC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAEpF,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAA;IAChB,oBAAoB,CAAC,EAAE,oBAAoB,CAAA;IAC3C,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC,cAAc,EAAE,SAAS,CAAA;CAC1B;AAiBD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8ClD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/gradebook-table/StudentCell/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAE9D,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,WAAW,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,WAAW,CAAA;IACpB,cAAc,EAAE,SAAS,CAAA;IACzB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;CACtC;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA6ClD,CAAA"}

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

@@ -10,29 +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 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 student = _ref.student,
-    secondaryInfoDisplay = _ref.secondaryInfoDisplay,
+    secondaryInfo = _ref.secondaryInfo,
     _ref$showStudentAvata = _ref.showStudentAvatar,
     showStudentAvatar = _ref$showStudentAvata === void 0 ? true : _ref$showStudentAvata,
     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",
@@ -43,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",
@@ -51,7 +37,7 @@ var StudentCell = exports.StudentCell = function StudentCell(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
     direction: "column",
     textAlign: "start"
-  }, studentPopover, 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/components/Gradebook/gradebook-table/StudentCell/index.stories.d.ts

@@ -4,9 +4,7 @@ declare const meta: Meta<StudentCellProps>;
 export default meta;
 type Story = StoryObj<StudentCellProps>;
 export declare const Default: Story;
-export declare const WithSISID: Story;
-export declare const WithLoginID: Story;
-export declare const WithIntegrationID: Story;
+export declare const WithSecondaryInfo: Story;
 export declare const LastFirstFormat: Story;
 export declare const FirstLastFormat: Story;
 export declare const LongName: Story;

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

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