@instructure/outcomes-ui 4.1.2 → 4.1.3

package/es/components/Gradebook/context/GradebookAppContext/GradebookAppProvider.js

@@ -11,6 +11,7 @@ export var GradebookAppProvider = function GradebookAppProvider(_ref) {
     settings = _useState2[0],
     setSettings = _useState2[1];
   var value = {
+    // If the settings will be implemented on the app level, we can remove this (MC won't use it)
     settings: {
       settings: settings,
       setSettings: setSettings,

package/es/components/Gradebook/gradebook-table/ColumnHeader/__tests__/index.test.js

@@ -168,4 +168,14 @@ describe('ColumnHeader', function () {
     render(/*#__PURE__*/React.createElement(ColumnHeader, defaultProps));
     expect(screen.getByTestId('column-header')).toBeInTheDocument();
   });
+  it('renders the optionsMenu prop when provided', function () {
+    var customMenu = /*#__PURE__*/React.createElement("button", {
+      "data-testid": "custom-options-menu"
+    }, "Custom Menu");
+    render(/*#__PURE__*/React.createElement(ColumnHeader, Object.assign({}, defaultProps, {
+      optionsMenu: customMenu
+    })));
+    expect(screen.getByTestId('custom-options-menu')).toBeInTheDocument();
+    expect(screen.getByText('Custom Menu')).toBeInTheDocument();
+  });
 });

package/es/components/Gradebook/gradebook-table/ColumnHeader/index.js

@@ -11,7 +11,9 @@ import TruncateWithTooltip from "../../shared/TruncateWithTooltip/index.js";
 import { getInverseColor } from "../../../../util/gradebook/colors.js";
 export var ColumnHeader = function ColumnHeader(_ref) {
   var title = _ref.title,
+    titleId = _ref.titleId,
     optionsMenuTriggerLabel = _ref.optionsMenuTriggerLabel,
+    optionsMenu = _ref.optionsMenu,
     _ref$optionsMenuItems = _ref.optionsMenuItems,
     optionsMenuItems = _ref$optionsMenuItems === void 0 ? [] : _ref$optionsMenuItems,
     icon = _ref.icon,
@@ -28,7 +30,7 @@ export var ColumnHeader = function ColumnHeader(_ref) {
     alignItems: "center",
     justifyItems: "space-between",
     height: CELL_HEIGHT,
-    padding: "none none none x-small"
+    padding: "none x-small none x-small"
   }, /*#__PURE__*/React.createElement(Flex.Item, {
     shouldGrow: true,
     shouldShrink: true,
@@ -43,7 +45,8 @@ export var ColumnHeader = function ColumnHeader(_ref) {
     overflowX: "hidden",
     padding: "0 xx-small 0 0"
   }, /*#__PURE__*/React.createElement(AccessibleContent, {
-    alt: title
+    alt: title,
+    id: titleId
   }, /*#__PURE__*/React.createElement(Text, {
     weight: "bold"
   }, /*#__PURE__*/React.createElement(TruncateWithTooltip, null, title)))))), optionsMenuItems.length > 0 && /*#__PURE__*/React.createElement(Menu, {
@@ -55,5 +58,5 @@ export var ColumnHeader = function ColumnHeader(_ref) {
       screenReaderLabel: optionsMenuTriggerLabel,
       color: getInverseColor(background)
     }, /*#__PURE__*/React.createElement(IconMoreLine, null))
-  }, optionsMenuItems)));
+  }, optionsMenuItems), optionsMenu));
 };

package/es/components/Gradebook/gradebook-table/ColumnHeader/index.stories.js

@@ -25,6 +25,12 @@ export var LongTitle = {
     title: 'This is a long title that should be truncated with an ellipsis when it exceeds the available space'
   }
 };
+export var WithTitleId = {
+  args: {
+    title: 'Test Title',
+    titleId: 'test-title-id'
+  }
+};
 export var WithMenu = {
   args: {
     title: 'Test Title',

package/es/components/Gradebook/gradebook-table/ScoreCellContent/ScoreWithLabel.js

@@ -6,6 +6,7 @@ import { MasteryLevelIcon } from "../../icons/MasteryLevelIcon/index.js";
 var Label = function Label(_ref) {
   var scoreDisplayFormat = _ref.scoreDisplayFormat,
     score = _ref.score,
+    totalScore = _ref.totalScore,
     text = _ref.text;
   if (scoreDisplayFormat === ScoreDisplayFormat.ICON_AND_LABEL) {
     return /*#__PURE__*/React.createElement(Text, {
@@ -17,22 +18,34 @@ var Label = function Label(_ref) {
       size: "legend"
     }, score);
   }
+  var isPercentFormat = scoreDisplayFormat === ScoreDisplayFormat.PERCENT;
+  var isPercentAndRatioFormat = scoreDisplayFormat === ScoreDisplayFormat.PERCENT_AND_RATIO;
+  if (isPercentFormat || isPercentAndRatioFormat) {
+    var percent = score != null && totalScore != null && totalScore !== 0 ? "".concat(Math.round(score / totalScore * 100), "%") : null;
+    return percent != null ? /*#__PURE__*/React.createElement(Flex, {
+      gap: "x-small"
+    }, /*#__PURE__*/React.createElement(Text, {
+      weight: "bold"
+    }, percent), isPercentAndRatioFormat && /*#__PURE__*/React.createElement(Text, null, "(".concat(score, "/").concat(totalScore, ")"))) : null;
+  }
 };
 export var ScoreWithLabel = function ScoreWithLabel(_ref2) {
   var masteryLevel = _ref2.masteryLevel,
     score = _ref2.score,
+    totalScore = _ref2.totalScore,
     label = _ref2.label,
     _ref2$scoreDisplayFor = _ref2.scoreDisplayFormat,
     scoreDisplayFormat = _ref2$scoreDisplayFor === void 0 ? ScoreDisplayFormat.ICON_ONLY : _ref2$scoreDisplayFor;
+  var isPercentFormat = [ScoreDisplayFormat.PERCENT, ScoreDisplayFormat.PERCENT_AND_RATIO].includes(scoreDisplayFormat);
   var justifyItems = scoreDisplayFormat === ScoreDisplayFormat.ICON_ONLY ? 'center' : 'start';
   return /*#__PURE__*/React.createElement(Flex, {
     width: "100%",
     height: "100%",
     alignItems: "center",
     gap: "small",
-    padding: "none medium-small",
+    padding: "none small",
     justifyItems: justifyItems
-  }, /*#__PURE__*/React.createElement(MasteryLevelIcon, {
+  }, !isPercentFormat && /*#__PURE__*/React.createElement(MasteryLevelIcon, {
     masteryLevel: masteryLevel,
     width: "1.5rem",
     height: "1.5rem",
@@ -41,6 +54,7 @@ export var ScoreWithLabel = function ScoreWithLabel(_ref2) {
   }), /*#__PURE__*/React.createElement(Label, {
     scoreDisplayFormat: scoreDisplayFormat,
     score: score,
+    totalScore: totalScore,
     text: label
   }));
 };

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

@@ -38,6 +38,47 @@ describe('ScoreWithLabel', function () {
       expect(pointsText).toBeInTheDocument();
       expect(pointsText.closest('[class*="screenReaderContent"]')).not.toBeInTheDocument();
     });
+    it('shows percent with PERCENT format', function () {
+      render(/*#__PURE__*/React.createElement(ScoreWithLabel, Object.assign({}, defaultProps, {
+        score: 3,
+        totalScore: 4,
+        scoreDisplayFormat: ScoreDisplayFormat.PERCENT
+      })));
+      expect(screen.getByText('75%')).toBeInTheDocument();
+    });
+    it('does not show mastery icon with PERCENT format', function () {
+      var _render = render(/*#__PURE__*/React.createElement(ScoreWithLabel, Object.assign({}, defaultProps, {
+          score: 3,
+          totalScore: 4,
+          scoreDisplayFormat: ScoreDisplayFormat.PERCENT
+        }))),
+        container = _render.container;
+      expect(container.querySelector('svg')).not.toBeInTheDocument();
+    });
+    it('shows percent and ratio with PERCENT_AND_RATIO format', function () {
+      render(/*#__PURE__*/React.createElement(ScoreWithLabel, Object.assign({}, defaultProps, {
+        score: 3,
+        totalScore: 4,
+        scoreDisplayFormat: ScoreDisplayFormat.PERCENT_AND_RATIO
+      })));
+      expect(screen.getByText('75%')).toBeInTheDocument();
+      expect(screen.getByText('(3/4)')).toBeInTheDocument();
+    });
+    it('does not show mastery icon with PERCENT_AND_RATIO format', function () {
+      var _render2 = render(/*#__PURE__*/React.createElement(ScoreWithLabel, Object.assign({}, defaultProps, {
+          score: 3,
+          totalScore: 4,
+          scoreDisplayFormat: ScoreDisplayFormat.PERCENT_AND_RATIO
+        }))),
+        container = _render2.container;
+      expect(container.querySelector('svg')).not.toBeInTheDocument();
+    });
+    it('shows null when totalScore is missing with PERCENT format', function () {
+      render(/*#__PURE__*/React.createElement(ScoreWithLabel, Object.assign({}, defaultProps, {
+        scoreDisplayFormat: ScoreDisplayFormat.PERCENT
+      })));
+      expect(screen.queryByText(/%/)).not.toBeInTheDocument();
+    });
   });
   it('uses default ICON_ONLY format when not specified', function () {
     render(/*#__PURE__*/React.createElement(ScoreWithLabel, defaultProps));

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

@@ -21,23 +21,31 @@ describe('ScoreCellContent', function () {
       render(/*#__PURE__*/React.createElement(ScoreCellContent, Object.assign({}, defaultProps, {
         onAction: jest.fn()
       })));
-      expect(screen.queryByTestId('score-cell-action-button')).not.toBeInTheDocument();
+      expect(screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '0'
+      });
     });
     it('shows action button when focus is true', function () {
       render(/*#__PURE__*/React.createElement(ScoreCellContent, Object.assign({}, defaultProps, {
         onAction: jest.fn(),
         focus: true
       })));
-      expect(screen.getByTestId('score-cell-action-button')).toBeInTheDocument();
+      expect(screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '1'
+      });
     });
     it('shows action button on hover (internal state)', function () {
       render(/*#__PURE__*/React.createElement(ScoreCellContent, Object.assign({}, defaultProps, {
         onAction: jest.fn()
       })));
-      expect(screen.queryByTestId('score-cell-action-button')).not.toBeInTheDocument();
+      expect(screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '0'
+      });
       var viewElement = screen.getByTestId('score-cell-content');
       fireEvent.mouseEnter(viewElement);
-      expect(screen.getByTestId('score-cell-action-button')).toBeInTheDocument();
+      expect(screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '1'
+      });
     });
     it('hides action button on mouse leave (internal state)', function () {
       render(/*#__PURE__*/React.createElement(ScoreCellContent, Object.assign({}, defaultProps, {
@@ -45,16 +53,22 @@ describe('ScoreCellContent', function () {
       })));
       var viewElement = screen.getByTestId('score-cell-content');
       fireEvent.mouseEnter(viewElement);
-      expect(screen.getByTestId('score-cell-action-button')).toBeInTheDocument();
+      expect(screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '1'
+      });
       fireEvent.mouseLeave(viewElement);
-      expect(screen.queryByTestId('score-cell-action-button')).not.toBeInTheDocument();
+      expect(screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '0'
+      });
     });
     it('shows action button when hover prop is true (controlled)', function () {
       render(/*#__PURE__*/React.createElement(ScoreCellContent, Object.assign({}, defaultProps, {
         onAction: jest.fn(),
         hover: true
       })));
-      expect(screen.getByTestId('score-cell-action-button')).toBeInTheDocument();
+      expect(screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '1'
+      });
     });
     it('does not update internal hover state when hover prop is controlled', function () {
       render(/*#__PURE__*/React.createElement(ScoreCellContent, Object.assign({}, defaultProps, {
@@ -65,7 +79,9 @@ describe('ScoreCellContent', function () {
       fireEvent.mouseEnter(viewElement);
 
       // Button should not appear because hover prop is controlled and set to false
-      expect(screen.queryByTestId('score-cell-action-button')).not.toBeInTheDocument();
+      expect(screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '0'
+      });
     });
   });
   describe('action button interaction', function () {
@@ -84,7 +100,7 @@ describe('ScoreCellContent', function () {
         onAction: void 0,
         focus: true
       })));
-      expect(screen.queryByTestId('score-cell-action-button')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('score-cell-action-wrapper')).not.toBeInTheDocument();
     });
   });
   describe('scoreDisplayFormat', function () {
@@ -107,5 +123,22 @@ describe('ScoreCellContent', function () {
       })));
       expect(screen.getByText('3')).toBeInTheDocument();
     });
+    it('renders percent with PERCENT format', function () {
+      render(/*#__PURE__*/React.createElement(ScoreCellContent, Object.assign({}, defaultProps, {
+        score: 3,
+        totalScore: 4,
+        scoreDisplayFormat: ScoreDisplayFormat.PERCENT
+      })));
+      expect(screen.getByText('75%')).toBeInTheDocument();
+    });
+    it('renders percent and ratio with PERCENT_AND_RATIO format', function () {
+      render(/*#__PURE__*/React.createElement(ScoreCellContent, Object.assign({}, defaultProps, {
+        score: 3,
+        totalScore: 4,
+        scoreDisplayFormat: ScoreDisplayFormat.PERCENT_AND_RATIO
+      })));
+      expect(screen.getByText('75%')).toBeInTheDocument();
+      expect(screen.getByText('(3/4)')).toBeInTheDocument();
+    });
   });
 });

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

@@ -4,14 +4,16 @@ import t from 'format-message';
 import { View } from '@instructure/ui-view';
 import { Flex } from '@instructure/ui-flex';
 import { IconButton } from '@instructure/ui-buttons';
-import { IconExpandStartLine } from '@instructure/ui-icons';
 import { ScoreWithLabel } from "./ScoreWithLabel.js";
 export var ScoreCellContent = function ScoreCellContent(_ref) {
   var masteryLevel = _ref.masteryLevel,
     scoreDisplayFormat = _ref.scoreDisplayFormat,
     score = _ref.score,
+    totalScore = _ref.totalScore,
     label = _ref.label,
     onAction = _ref.onAction,
+    actionScreenReaderLabel = _ref.actionScreenReaderLabel,
+    actionIcon = _ref.actionIcon,
     focus = _ref.focus,
     hoverControlled = _ref.hover,
     _ref$background = _ref.background,
@@ -50,9 +52,16 @@ export var ScoreCellContent = function ScoreCellContent(_ref) {
   }, /*#__PURE__*/React.createElement(ScoreWithLabel, {
     masteryLevel: masteryLevel,
     score: score,
+    totalScore: totalScore,
     scoreDisplayFormat: scoreDisplayFormat,
     label: label
-  }))), showAction && /*#__PURE__*/React.createElement(View, {
+  }))), onAction && /*#__PURE__*/React.createElement("div", {
+    "data-testid": "score-cell-action-wrapper",
+    style: {
+      opacity: showAction ? 1 : 0,
+      pointerEvents: showAction ? 'auto' : 'none'
+    }
+  }, /*#__PURE__*/React.createElement(View, {
     position: "absolute",
     insetInlineEnd: "0",
     insetBlockStart: "50%",
@@ -60,13 +69,14 @@ export var ScoreCellContent = function ScoreCellContent(_ref) {
       transform: 'translateY(-50%)'
     }
   }, /*#__PURE__*/React.createElement(IconButton, {
+    "aria-haspopup": "dialog",
     withBackground: false,
     withBorder: false,
     size: "small",
     margin: "0 xxx-small 0 0",
-    renderIcon: /*#__PURE__*/React.createElement(IconExpandStartLine, null),
-    screenReaderLabel: t('View Contributing Score Details'),
+    renderIcon: actionIcon,
+    screenReaderLabel: actionScreenReaderLabel || t('View Contributing Score Details'),
     onClick: onAction,
     "data-testid": "score-cell-action-button"
-  })));
+  }))));
 };

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View } from '@instructure/ui-view';
 import { action } from '@storybook/addon-actions';
+import { IconExpandStartLine } from '@instructure/ui-icons';
 import { ScoreDisplayFormat } from "../../../../util/gradebook/constants.js";
 import { ScoreCellContent } from "./index.js";
 var meta = {
@@ -46,6 +47,26 @@ export var IconAndLabel = {
     background: 'secondary'
   }
 };
+export var Percent = {
+  args: {
+    scoreDisplayFormat: ScoreDisplayFormat.PERCENT,
+    masteryLevel: 'mastery',
+    label: 'Mastery',
+    score: 3,
+    totalScore: 4,
+    background: 'secondary'
+  }
+};
+export var PercentAndRatio = {
+  args: {
+    scoreDisplayFormat: ScoreDisplayFormat.PERCENT_AND_RATIO,
+    masteryLevel: 'mastery',
+    label: 'Mastery',
+    score: 3,
+    totalScore: 4,
+    background: 'secondary'
+  }
+};
 export var OnAction = {
   args: {
     scoreDisplayFormat: ScoreDisplayFormat.ICON_AND_POINTS,
@@ -53,6 +74,7 @@ export var OnAction = {
     label: 'Remediation',
     score: 1,
     onAction: action('onAction'),
+    actionIcon: /*#__PURE__*/React.createElement(IconExpandStartLine, null),
     background: 'secondary'
   }
 };
@@ -65,6 +87,7 @@ export var FocusControlled = {
     label: 'No Evidence',
     score: 0,
     onAction: action('onAction'),
+    actionIcon: /*#__PURE__*/React.createElement(IconExpandStartLine, null),
     focus: true,
     background: 'secondary'
   }

package/es/components/Gradebook/gradebook-table/StudentCell/__mocks__/mockData.js

@@ -0,0 +1,12 @@
+export var mockStudent = {
+  id: '1',
+  displayName: 'John Smith',
+  sortableName: 'Smith, John',
+  status: 'active'
+};
+export var mockStudentLongName = {
+  id: '2',
+  displayName: 'Alexander Montgomery Wellington Junior III',
+  sortableName: 'III, Alexander Montgomery Wellington Junior',
+  status: 'active'
+};

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

@@ -3,17 +3,13 @@ import React from 'react';
 import { expect } from '@jest/globals';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { SecondaryInfoDisplay, NameDisplayFormat } from "../../../../../util/gradebook/constants.js";
+import { NameDisplayFormat } from "../../../../../util/gradebook/constants.js";
 import { StudentCell } from "../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 () {
@@ -58,76 +54,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 () {
       render(/*#__PURE__*/React.createElement(StudentCell, defaultProps));
       expect(screen.queryByTestId('student-secondary-info')).not.toBeInTheDocument();
     });
-    it('renders SIS ID when secondaryInfoDisplay is SIS_ID', function () {
+    it('renders secondary info when provided', function () {
       render(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
-        secondaryInfoDisplay: SecondaryInfoDisplay.SIS_ID
+        secondaryInfo: "SIS123"
       })));
       var secondaryInfo = screen.getByTestId('student-secondary-info');
       expect(secondaryInfo).toBeInTheDocument();
       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 () {
       render(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
-        secondaryInfoDisplay: SecondaryInfoDisplay.INTEGRATION_ID
-      })));
-      var secondaryInfo = screen.getByTestId('student-secondary-info');
-      expect(secondaryInfo).toBeInTheDocument();
-      expect(secondaryInfo).toHaveTextContent('INT456');
-    });
-    it('renders login ID when secondaryInfoDisplay is LOGIN_ID', function () {
-      render(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
-        secondaryInfoDisplay: SecondaryInfoDisplay.LOGIN_ID
-      })));
-      var secondaryInfo = screen.getByTestId('student-secondary-info');
-      expect(secondaryInfo).toBeInTheDocument();
-      expect(secondaryInfo).toHaveTextContent('jane.doe@example.com');
-    });
-    it('renders empty string when SIS ID is not available', function () {
-      var studentWithoutSIS = _objectSpread(_objectSpread({}, mockStudent), {}, {
-        sis_id: void 0
-      });
-      render(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
-        student: studentWithoutSIS,
-        secondaryInfoDisplay: SecondaryInfoDisplay.SIS_ID
+        secondaryInfo: ""
       })));
       var secondaryInfo = screen.getByTestId('student-secondary-info');
       expect(secondaryInfo).toBeInTheDocument();
       expect(secondaryInfo).toHaveTextContent('');
     });
-    it('renders empty string when integration ID is not available', function () {
-      var studentWithoutIntegrationId = _objectSpread(_objectSpread({}, mockStudent), {}, {
-        integration_id: void 0
-      });
-      render(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
-        student: studentWithoutIntegrationId,
-        secondaryInfoDisplay: SecondaryInfoDisplay.INTEGRATION_ID
-      })));
-      var secondaryInfo = screen.getByTestId('student-secondary-info');
-      expect(secondaryInfo).toBeInTheDocument();
-      expect(secondaryInfo).toHaveTextContent('');
-    });
-    it('renders empty string when login ID is not available', function () {
-      var studentWithoutLoginId = _objectSpread(_objectSpread({}, mockStudent), {}, {
-        login_id: void 0
-      });
-      render(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
-        student: studentWithoutLoginId,
-        secondaryInfoDisplay: SecondaryInfoDisplay.LOGIN_ID
-      })));
-      var secondaryInfo = screen.getByTestId('student-secondary-info');
-      expect(secondaryInfo).toBeInTheDocument();
-      expect(secondaryInfo).toHaveTextContent('');
-    });
-    it('does not render secondary info when secondaryInfoDisplay is NONE', function () {
-      render(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
-        secondaryInfoDisplay: SecondaryInfoDisplay.NONE
-      })));
-      expect(screen.queryByTestId('student-secondary-info')).not.toBeInTheDocument();
-    });
   });
   describe('student status', function () {
     it('does not render status badge for active students', function () {

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

@@ -2,30 +2,16 @@ import React from 'react';
 import { Avatar } from '@instructure/ui-avatar';
 import { Flex } from '@instructure/ui-flex';
 import { Text } from '@instructure/ui-text';
-import { SecondaryInfoDisplay, NameDisplayFormat } from "../../../../util/gradebook/constants.js";
-var getSecondaryInfo = function getSecondaryInfo(student, secondaryInfoDisplay) {
-  if (!secondaryInfoDisplay) return null;
-  switch (secondaryInfoDisplay) {
-    case SecondaryInfoDisplay.SIS_ID:
-      return student.sis_id || '';
-    case SecondaryInfoDisplay.INTEGRATION_ID:
-      return student.integration_id || '';
-    case SecondaryInfoDisplay.LOGIN_ID:
-      return student.login_id || '';
-    default:
-      return null;
-  }
-};
+import { NameDisplayFormat } from "../../../../util/gradebook/constants.js";
 export var 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 === NameDisplayFormat.LAST_FIRST ? student.sortable_name : student.display_name;
+  var studentName = nameDisplayFormat === NameDisplayFormat.LAST_FIRST ? student.sortableName : student.displayName;
   return /*#__PURE__*/React.createElement(Flex, {
     height: "100%",
     "data-testid": "student-cell",
@@ -36,7 +22,7 @@ export var StudentCell = function StudentCell(_ref) {
     as: "div",
     size: "x-small",
     name: studentName,
-    src: student.avatar_url,
+    src: student.avatarUrl,
     "data-testid": "student-avatar"
   })), /*#__PURE__*/React.createElement(Flex.Item, {
     as: "div",
@@ -44,7 +30,7 @@ export var StudentCell = function StudentCell(_ref) {
   }, /*#__PURE__*/React.createElement(Flex, {
     direction: "column",
     textAlign: "start"
-  }, studentPopover, secondaryInfo !== null && /*#__PURE__*/React.createElement(Text, {
+  }, studentPopover, secondaryInfo !== void 0 && /*#__PURE__*/React.createElement(Text, {
     size: "legend",
     color: "secondary",
     "data-testid": "student-secondary-info"

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

@@ -1,10 +1,24 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React from 'react';
 import { View } from '@instructure/ui-view';
-import { SecondaryInfoDisplay, NameDisplayFormat } from "../../../../util/gradebook/constants.js";
-import { mockStudent, mockStudentLongName } from "../../__mocks__/mockData.js";
-import { createStudentPopover, StoryWrapper } from "../../storybook/decorators.js";
+import { NameDisplayFormat } from "../../../../util/gradebook/constants.js";
+import { mockStudent, mockStudentLongName } from "./__mocks__/mockData.js";
+import { StoryWrapper } from "../../storybook/decorators.js";
 import { StudentCell } from "../../../../index.js";
+import { StudentPopover } from "../../popovers/StudentPopover/index.js";
+var createStudentPopover = function createStudentPopover(_ref) {
+  var studentName = _ref.studentName,
+    avatarUrl = _ref.avatarUrl,
+    masteryScores = _ref.masteryScores;
+  return /*#__PURE__*/React.createElement(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: StudentCell,
@@ -18,8 +32,7 @@ var meta = {
   }],
   args: {
     studentPopover: createStudentPopover({
-      studentName: mockStudent.display_name,
-      student: mockStudent
+      studentName: mockStudent.displayName
     })
   }
 };
@@ -29,49 +42,34 @@ export var Default = {
     student: mockStudent
   }
 };
-export var WithSISID = {
-  args: {
-    student: mockStudent,
-    secondaryInfoDisplay: SecondaryInfoDisplay.SIS_ID
-  }
-};
-export var WithLoginID = {
-  args: {
-    student: mockStudent,
-    secondaryInfoDisplay: SecondaryInfoDisplay.LOGIN_ID
-  }
-};
-export var WithIntegrationID = {
+export var WithSecondaryInfo = {
   args: {
     student: mockStudent,
-    secondaryInfoDisplay: SecondaryInfoDisplay.INTEGRATION_ID
+    secondaryInfo: '12345678'
   }
 };
 export var LastFirstFormat = {
   args: {
     student: mockStudent,
     nameDisplayFormat: NameDisplayFormat.LAST_FIRST,
-    secondaryInfoDisplay: SecondaryInfoDisplay.SIS_ID,
     studentPopover: createStudentPopover({
-      studentName: mockStudent.sortable_name,
-      student: mockStudent
+      studentName: mockStudent.sortableName,
+      avatarUrl: void 0
     })
   }
 };
 export var FirstLastFormat = {
   args: {
     student: mockStudent,
-    nameDisplayFormat: NameDisplayFormat.FIRST_LAST,
-    secondaryInfoDisplay: SecondaryInfoDisplay.LOGIN_ID
+    nameDisplayFormat: NameDisplayFormat.FIRST_LAST
   }
 };
 export var LongName = {
   args: {
     student: mockStudentLongName,
-    secondaryInfoDisplay: SecondaryInfoDisplay.SIS_ID,
     studentPopover: createStudentPopover({
-      studentName: mockStudentLongName.display_name,
-      student: mockStudentLongName
+      studentName: mockStudentLongName.displayName,
+      avatarUrl: void 0
     })
   }
 };
@@ -79,10 +77,9 @@ export var LongNameLastFirst = {
   args: {
     student: mockStudentLongName,
     nameDisplayFormat: NameDisplayFormat.LAST_FIRST,
-    secondaryInfoDisplay: SecondaryInfoDisplay.SIS_ID,
     studentPopover: createStudentPopover({
-      studentName: mockStudentLongName.sortable_name,
-      student: mockStudentLongName
+      studentName: mockStudentLongName.sortableName,
+      avatarUrl: void 0
     })
   }
 };