@instructure/outcomes-ui 4.1.2 → 4.1.4

package/es/translated/ht/components/Gradebook/dialogs/MessageStudentsWhoDialog/messageAttachments.js

@@ -0,0 +1,226 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useRef } from 'react';
+import { IconButton } from '@instructure/ui-buttons';
+import { Flex } from '@instructure/ui-flex';
+import { IconAttachMediaLine, IconCodeLine, IconDocumentLine, IconFolderLine, IconFolderLockedLine, IconImageLine, IconMsExcelLine, IconMsPptLine, IconPaperclipLine, IconPdfLine, IconXSolid, IconZippedLine } from '@instructure/ui-icons';
+import { Modal } from '@instructure/ui-modal';
+import { Spinner } from '@instructure/ui-spinner';
+import { Text } from '@instructure/ui-text';
+import { Tooltip } from '@instructure/ui-tooltip';
+import { TruncateText } from '@instructure/ui-truncate-text';
+import { View } from '@instructure/ui-view';
+var MIME_ICONS = {
+  audio: /*#__PURE__*/React.createElement(IconAttachMediaLine, {
+    title: "Audio File"
+  }),
+  code: /*#__PURE__*/React.createElement(IconCodeLine, {
+    title: "Code File"
+  }),
+  doc: /*#__PURE__*/React.createElement(IconDocumentLine, {
+    title: "Doc File"
+  }),
+  'folder-locked': /*#__PURE__*/React.createElement(IconFolderLockedLine, {
+    title: "Folder Locked"
+  }),
+  folder: /*#__PURE__*/React.createElement(IconFolderLine, {
+    title: "Folder"
+  }),
+  html: /*#__PURE__*/React.createElement(IconCodeLine, {
+    title: "HTML File"
+  }),
+  image: /*#__PURE__*/React.createElement(IconImageLine, {
+    title: "Image File"
+  }),
+  pdf: /*#__PURE__*/React.createElement(IconPdfLine, {
+    title: "PDF File"
+  }),
+  ppt: /*#__PURE__*/React.createElement(IconMsPptLine, {
+    title: "PowerPoint File"
+  }),
+  text: /*#__PURE__*/React.createElement(IconDocumentLine, {
+    title: "Text File"
+  }),
+  video: /*#__PURE__*/React.createElement(IconAttachMediaLine, {
+    title: "Video File"
+  }),
+  xls: /*#__PURE__*/React.createElement(IconMsExcelLine, {
+    title: "Excel File"
+  }),
+  zip: /*#__PURE__*/React.createElement(IconZippedLine, {
+    title: "Zip File"
+  })
+};
+var DEFAULT_FILE_ICON = /*#__PURE__*/React.createElement(IconPaperclipLine, {
+  title: "File"
+});
+function getFileIcon(attachment) {
+  var _MIME_ICONS$attachmen;
+  if (attachment.mime_class === 'image' && attachment.thumbnail_url) {
+    return /*#__PURE__*/React.createElement("img", {
+      alt: attachment.display_name + " preview",
+      src: attachment.thumbnail_url,
+      style: {
+        height: '3rem',
+        width: '3rem'
+      }
+    });
+  }
+  return attachment.mime_class ? (_MIME_ICONS$attachmen = MIME_ICONS[attachment.mime_class]) !== null && _MIME_ICONS$attachmen !== void 0 ? _MIME_ICONS$attachmen : DEFAULT_FILE_ICON : DEFAULT_FILE_ICON;
+}
+export var RemovableItem = function RemovableItem(_ref) {
+  var onRemove = _ref.onRemove,
+    screenReaderLabel = _ref.screenReaderLabel,
+    childrenAriaLabel = _ref.childrenAriaLabel,
+    children = _ref.children;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showRemove = _useState2[0],
+    setShowRemove = _useState2[1];
+  var blurTimeout = useRef(null);
+  var handleInteraction = function handleInteraction() {
+    if (blurTimeout.current) clearTimeout(blurTimeout.current);
+    setShowRemove(true);
+  };
+  var handleExit = function handleExit() {
+    blurTimeout.current = setTimeout(function () {
+      return setShowRemove(false);
+    });
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    position: "relative",
+    display: "inline-block"
+  }, /*#__PURE__*/React.createElement(View, {
+    onMouseEnter: handleInteraction,
+    onMouseLeave: handleExit,
+    onFocus: handleInteraction,
+    onBlur: handleExit,
+    tabIndex: 0,
+    role: "button",
+    "aria-label": childrenAriaLabel,
+    "data-testid": "removable-item"
+  }, children), showRemove && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      right: 0,
+      top: 0
+    }
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    size: "small",
+    shape: "circle",
+    screenReaderLabel: screenReaderLabel,
+    onClick: onRemove,
+    onMouseEnter: handleInteraction,
+    onMouseLeave: handleExit,
+    onFocus: handleInteraction,
+    onBlur: handleExit,
+    "data-testid": "remove-button"
+  }, /*#__PURE__*/React.createElement(IconXSolid, null))));
+};
+export var AttachmentItem = function AttachmentItem(_ref2) {
+  var _attachment$display_n;
+  var attachment = _ref2.attachment,
+    onReplace = _ref2.onReplace,
+    onDelete = _ref2.onDelete;
+  var inputRef = useRef(null);
+  if (attachment.isLoading) {
+    return /*#__PURE__*/React.createElement(Spinner, {
+      renderTitle: "Chajman",
+      size: "medium"
+    });
+  }
+  var displayName = (_attachment$display_n = attachment.display_name) !== null && _attachment$display_n !== void 0 ? _attachment$display_n : attachment.id;
+  return /*#__PURE__*/React.createElement(RemovableItem, {
+    onRemove: onDelete,
+    screenReaderLabel: "Remove Attachment",
+    childrenAriaLabel: "Replace " + displayName + " button"
+  }, /*#__PURE__*/React.createElement(Flex, {
+    direction: "column",
+    padding: "xx-small small",
+    width: "80px"
+  }, /*#__PURE__*/React.createElement(Flex.Item, {
+    margin: "none xx-small xxx-small xx-small",
+    align: "center"
+  }, getFileIcon(attachment)), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Text, {
+    size: "small"
+  }, /*#__PURE__*/React.createElement(TruncateText, {
+    position: "middle",
+    maxLines: 3
+  }, displayName)))), /*#__PURE__*/React.createElement("input", {
+    "data-testid": "replacement-input",
+    ref: inputRef,
+    type: "file",
+    style: {
+      display: 'none'
+    },
+    "aria-hidden": true,
+    onChange: onReplace
+  }));
+};
+export var AttachmentDisplay = function AttachmentDisplay(_ref3) {
+  var attachments = _ref3.attachments,
+    onDeleteItem = _ref3.onDeleteItem,
+    onReplaceItem = _ref3.onReplaceItem;
+  return /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "start",
+    wrap: "wrap"
+  }, attachments.map(function (a) {
+    return /*#__PURE__*/React.createElement(Flex.Item, {
+      key: a.id
+    }, /*#__PURE__*/React.createElement(AttachmentItem, {
+      attachment: a,
+      onDelete: function onDelete() {
+        return onDeleteItem(a.id);
+      },
+      onReplace: function onReplace(e) {
+        return onReplaceItem(a.id, e);
+      }
+    }));
+  }));
+};
+export var FileAttachmentUpload = function FileAttachmentUpload(_ref4) {
+  var onAddItem = _ref4.onAddItem;
+  var inputRef = useRef(null);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+    renderTip: "Add an attachment",
+    placement: "top"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    screenReaderLabel: "Add an attachment",
+    onClick: function onClick() {
+      var _inputRef$current;
+      return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.click();
+    },
+    margin: "xx-small",
+    "data-testid": "attachment-upload"
+  }, /*#__PURE__*/React.createElement(IconPaperclipLine, null))), /*#__PURE__*/React.createElement("input", {
+    "data-testid": "attachment-input",
+    ref: inputRef,
+    type: "file",
+    style: {
+      display: 'none'
+    },
+    "aria-hidden": true,
+    onChange: onAddItem,
+    multiple: true
+  }));
+};
+export var AttachmentUploadSpinner = function AttachmentUploadSpinner(_ref5) {
+  var sendMessage = _ref5.sendMessage,
+    isMessageSending = _ref5.isMessageSending,
+    pendingUploads = _ref5.pendingUploads,
+    sendArgs = _ref5.sendArgs;
+  var label = "Uploading Files";
+  return /*#__PURE__*/React.createElement(Modal, {
+    open: isMessageSending && pendingUploads.length > 0,
+    label: label,
+    shouldCloseOnDocumentClick: false,
+    onExited: function onExited() {
+      if (sendArgs) sendMessage(sendArgs);
+    }
+  }, /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement(Flex, {
+    direction: "column",
+    textAlign: "center"
+  }, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Spinner, {
+    renderTitle: label,
+    size: "large"
+  })), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Text, null, "Please wait while we upload attachments.")))));
+};

package/es/translated/ht/components/Gradebook/dialogs/MessageStudentsWhoDialog/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -168,4 +168,25 @@ describe('ColumnHeader', function () {
     render(/*#__PURE__*/React.createElement(ColumnHeader, defaultProps));
     expect(screen.getByTestId('column-header')).toBeInTheDocument();
   });
+  it('renders TruncateWithTooltip by default', function () {
+    render(/*#__PURE__*/React.createElement(ColumnHeader, defaultProps));
+    // TruncateWithTooltip renders a TruncateText internally
+    expect(screen.getAllByText('Test Column').length).toBeGreaterThan(0);
+  });
+  it('renders TruncateText without tooltip when showTruncatedTooltip is false', function () {
+    render(/*#__PURE__*/React.createElement(ColumnHeader, Object.assign({}, defaultProps, {
+      showTruncatedTooltip: false
+    })));
+    expect(screen.getAllByText('Test Column').length).toBeGreaterThan(0);
+  });
+  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/translated/ht/components/Gradebook/gradebook-table/ColumnHeader/index.js

@@ -6,19 +6,24 @@ import { IconMoreLine } from '@instructure/ui-icons';
 import { Menu } from '@instructure/ui-menu';
 import { View } from '@instructure/ui-view';
 import { AccessibleContent } from '@instructure/ui-a11y-content';
+import { TruncateText } from '@instructure/ui-truncate-text';
 import { CELL_HEIGHT, COLUMN_WIDTH } from "../../../../util/gradebook/constants.js";
 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,
     _ref$background = _ref.background,
     background = _ref$background === void 0 ? 'secondary' : _ref$background,
     _ref$columnWidth = _ref.columnWidth,
-    columnWidth = _ref$columnWidth === void 0 ? COLUMN_WIDTH : _ref$columnWidth;
+    columnWidth = _ref$columnWidth === void 0 ? COLUMN_WIDTH : _ref$columnWidth,
+    _ref$showTruncatedToo = _ref.showTruncatedTooltip,
+    showTruncatedTooltip = _ref$showTruncatedToo === void 0 ? true : _ref$showTruncatedToo;
   return /*#__PURE__*/React.createElement(View, {
     background: background,
     as: "div",
@@ -28,7 +33,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,10 +48,11 @@ 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, {
+  }, showTruncatedTooltip ? /*#__PURE__*/React.createElement(TruncateWithTooltip, null, title) : /*#__PURE__*/React.createElement(TruncateText, null, title)))))), optionsMenuItems.length > 0 && /*#__PURE__*/React.createElement(Menu, {
     placement: "bottom",
     trigger: /*#__PURE__*/React.createElement(IconButton, {
       withBorder: false,
@@ -55,5 +61,5 @@ export var ColumnHeader = function ColumnHeader(_ref) {
       screenReaderLabel: optionsMenuTriggerLabel,
       color: getInverseColor(background)
     }, /*#__PURE__*/React.createElement(IconMoreLine, null))
-  }, optionsMenuItems)));
+  }, optionsMenuItems), optionsMenu));
 };

package/es/translated/ht/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',
@@ -73,4 +79,16 @@ export var WithIconAndBackground = {
     optionsMenuTriggerLabel: 'Test options',
     optionsMenuItems: menuItems
   }
+};
+export var TruncateWithoutTooltip = {
+  args: {
+    title: 'This is a long title that should be truncated without showing a tooltip on hover',
+    showTruncatedTooltip: false
+  }
+};
+export var TruncateWithTooltip = {
+  args: {
+    title: 'This is a long title that should be truncated and show a tooltip on hover',
+    showTruncatedTooltip: true
+  }
 };

package/es/translated/ht/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,23 +18,37 @@ 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;
+    scoreDisplayFormat = _ref2$scoreDisplayFor === void 0 ? ScoreDisplayFormat.ICON_ONLY : _ref2$scoreDisplayFor,
+    iconColor = _ref2.iconColor;
+  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,
+    fill: iconColor,
     width: "1.5rem",
     height: "1.5rem",
     ariaLabel: label,
@@ -41,6 +56,7 @@ export var ScoreWithLabel = function ScoreWithLabel(_ref2) {
   }), /*#__PURE__*/React.createElement(Label, {
     scoreDisplayFormat: scoreDisplayFormat,
     score: score,
+    totalScore: totalScore,
     text: label
   }));
 };

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

@@ -38,9 +38,64 @@ 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));
     expect(screen.queryByText('Mastery')).not.toBeInTheDocument();
   });
+  describe('iconColor prop', function () {
+    it('applies iconColor as fill on the mastery icon svg', function () {
+      var _render3 = render(/*#__PURE__*/React.createElement(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 = render(/*#__PURE__*/React.createElement(ScoreWithLabel, defaultProps)),
+        container = _render4.container;
+      expect(container.querySelector('svg')).not.toHaveAttribute('fill', '#FF6B35');
+    });
+  });
 });

package/es/translated/ht/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,16 @@ 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('iconColor prop', function () {
+    it('passes color to ScoreWithLabel as fill on the mastery icon svg', function () {
+      var _render = render(/*#__PURE__*/React.createElement(ScoreCellContent, Object.assign({}, defaultProps, {
+          iconColor: "#4CAF50"
+        }))),
+        container = _render.container;
+      expect(container.querySelector('svg')).toHaveAttribute('fill', '#4CAF50');
     });
   });
   describe('scoreDisplayFormat', function () {
@@ -107,5 +132,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/translated/ht/components/Gradebook/gradebook-table/ScoreCellContent/index.js

@@ -3,14 +3,17 @@ import React, { useState } from 'react';
 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,
+    iconColor = _ref.iconColor,
     onAction = _ref.onAction,
+    actionScreenReaderLabel = _ref.actionScreenReaderLabel,
+    actionIcon = _ref.actionIcon,
     focus = _ref.focus,
     hoverControlled = _ref.hover,
     _ref$background = _ref.background,
@@ -49,9 +52,17 @@ 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, {
+    label: label,
+    iconColor: iconColor
+  }))), 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%",
@@ -59,13 +70,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: "View Contributing Score Details",
+    renderIcon: actionIcon,
+    screenReaderLabel: actionScreenReaderLabel || "View Contributing Score Details",
     onClick: onAction,
     "data-testid": "score-cell-action-button"
-  })));
+  }))));
 };