@instructure/outcomes-ui 4.1.3 → 4.1.4

package/lib/translated/nl/components/Gradebook/dialogs/MessageStudentsWhoDialog/messageAttachments.js

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

package/lib/translated/nl/components/Gradebook/dialogs/MessageStudentsWhoDialog/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/translated/nl/components/Gradebook/gradebook-table/ColumnHeader/__tests__/index.test.js

@@ -171,6 +171,17 @@ describe('ColumnHeader', function () {
     (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ColumnHeader, defaultProps));
     expect(_react2.screen.getByTestId('column-header')).toBeInTheDocument();
   });
+  it('renders TruncateWithTooltip by default', function () {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ColumnHeader, defaultProps));
+    // TruncateWithTooltip renders a TruncateText internally
+    expect(_react2.screen.getAllByText('Test Column').length).toBeGreaterThan(0);
+  });
+  it('renders TruncateText without tooltip when showTruncatedTooltip is false', function () {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ColumnHeader, Object.assign({}, defaultProps, {
+      showTruncatedTooltip: false
+    })));
+    expect(_react2.screen.getAllByText('Test Column').length).toBeGreaterThan(0);
+  });
   it('renders the optionsMenu prop when provided', function () {
     var customMenu = /*#__PURE__*/_react.default.createElement("button", {
       "data-testid": "custom-options-menu"

package/lib/translated/nl/components/Gradebook/gradebook-table/ColumnHeader/index.js

@@ -13,6 +13,7 @@ var _uiIcons = require("@instructure/ui-icons");
 var _uiMenu = require("@instructure/ui-menu");
 var _uiView = require("@instructure/ui-view");
 var _uiA11yContent = require("@instructure/ui-a11y-content");
+var _uiTruncateText = require("@instructure/ui-truncate-text");
 var _constants = require("../../../../util/gradebook/constants.js");
 var _index = _interopRequireDefault(require("../../shared/TruncateWithTooltip/index.js"));
 var _colors = require("../../../../util/gradebook/colors.js");
@@ -27,7 +28,9 @@ var ColumnHeader = exports.ColumnHeader = function ColumnHeader(_ref) {
     _ref$background = _ref.background,
     background = _ref$background === void 0 ? 'secondary' : _ref$background,
     _ref$columnWidth = _ref.columnWidth,
-    columnWidth = _ref$columnWidth === void 0 ? _constants.COLUMN_WIDTH : _ref$columnWidth;
+    columnWidth = _ref$columnWidth === void 0 ? _constants.COLUMN_WIDTH : _ref$columnWidth,
+    _ref$showTruncatedToo = _ref.showTruncatedTooltip,
+    showTruncatedTooltip = _ref$showTruncatedToo === void 0 ? true : _ref$showTruncatedToo;
   return /*#__PURE__*/_react.default.createElement(_uiView.View, {
     background: background,
     as: "div",
@@ -56,7 +59,7 @@ var ColumnHeader = exports.ColumnHeader = function ColumnHeader(_ref) {
     id: titleId
   }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
     weight: "bold"
-  }, /*#__PURE__*/_react.default.createElement(_index.default, null, title)))))), optionsMenuItems.length > 0 && /*#__PURE__*/_react.default.createElement(_uiMenu.Menu, {
+  }, showTruncatedTooltip ? /*#__PURE__*/_react.default.createElement(_index.default, null, title) : /*#__PURE__*/_react.default.createElement(_uiTruncateText.TruncateText, null, title)))))), optionsMenuItems.length > 0 && /*#__PURE__*/_react.default.createElement(_uiMenu.Menu, {
     placement: "bottom",
     trigger: /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
       withBorder: false,

package/lib/translated/nl/components/Gradebook/gradebook-table/ColumnHeader/index.stories.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithTitleId = exports.WithMenu = exports.WithIconAndBackground = exports.WithIcon = exports.WithBrandBackground = exports.NarrowColumn = exports.LongTitleWithMenu = exports.LongTitle = exports.Default = exports.CustomWidth = void 0;
+exports.default = exports.WithTitleId = exports.WithMenu = exports.WithIconAndBackground = exports.WithIcon = exports.WithBrandBackground = exports.TruncateWithoutTooltip = exports.TruncateWithTooltip = exports.NarrowColumn = exports.LongTitleWithMenu = exports.LongTitle = exports.Default = exports.CustomWidth = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _uiMenu = require("@instructure/ui-menu");
 var _uiIcons = require("@instructure/ui-icons");
@@ -86,4 +86,16 @@ var WithIconAndBackground = exports.WithIconAndBackground = {
     optionsMenuTriggerLabel: 'Test options',
     optionsMenuItems: menuItems
   }
+};
+var TruncateWithoutTooltip = exports.TruncateWithoutTooltip = {
+  args: {
+    title: 'This is a long title that should be truncated without showing a tooltip on hover',
+    showTruncatedTooltip: false
+  }
+};
+var TruncateWithTooltip = exports.TruncateWithTooltip = {
+  args: {
+    title: 'This is a long title that should be truncated and show a tooltip on hover',
+    showTruncatedTooltip: true
+  }
 };

package/lib/translated/nl/components/Gradebook/gradebook-table/ScoreCellContent/ScoreWithLabel.js

@@ -42,7 +42,8 @@ var ScoreWithLabel = exports.ScoreWithLabel = function ScoreWithLabel(_ref2) {
     totalScore = _ref2.totalScore,
     label = _ref2.label,
     _ref2$scoreDisplayFor = _ref2.scoreDisplayFormat,
-    scoreDisplayFormat = _ref2$scoreDisplayFor === void 0 ? _constants.ScoreDisplayFormat.ICON_ONLY : _ref2$scoreDisplayFor;
+    scoreDisplayFormat = _ref2$scoreDisplayFor === void 0 ? _constants.ScoreDisplayFormat.ICON_ONLY : _ref2$scoreDisplayFor,
+    iconColor = _ref2.iconColor;
   var isPercentFormat = [_constants.ScoreDisplayFormat.PERCENT, _constants.ScoreDisplayFormat.PERCENT_AND_RATIO].includes(scoreDisplayFormat);
   var justifyItems = scoreDisplayFormat === _constants.ScoreDisplayFormat.ICON_ONLY ? 'center' : 'start';
   return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
@@ -54,6 +55,7 @@ var ScoreWithLabel = exports.ScoreWithLabel = function ScoreWithLabel(_ref2) {
     justifyItems: justifyItems
   }, !isPercentFormat && /*#__PURE__*/_react.default.createElement(_index.MasteryLevelIcon, {
     masteryLevel: masteryLevel,
+    fill: iconColor,
     width: "1.5rem",
     height: "1.5rem",
     ariaLabel: label,

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

@@ -87,4 +87,18 @@ describe('ScoreWithLabel', 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/translated/nl/components/Gradebook/gradebook-table/ScoreCellContent/__tests__/index.test.js

@@ -106,6 +106,15 @@ describe('ScoreCellContent', function () {
       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 () {
     it('renders with ICON_ONLY format', function () {
       (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ScoreCellContent, Object.assign({}, defaultProps, {

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

@@ -18,6 +18,7 @@ var ScoreCellContent = exports.ScoreCellContent = function ScoreCellContent(_ref
     score = _ref.score,
     totalScore = _ref.totalScore,
     label = _ref.label,
+    iconColor = _ref.iconColor,
     onAction = _ref.onAction,
     actionScreenReaderLabel = _ref.actionScreenReaderLabel,
     actionIcon = _ref.actionIcon,
@@ -61,7 +62,8 @@ var ScoreCellContent = exports.ScoreCellContent = function ScoreCellContent(_ref
     score: score,
     totalScore: totalScore,
     scoreDisplayFormat: scoreDisplayFormat,
-    label: label
+    label: label,
+    iconColor: iconColor
   }))), onAction && /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": "score-cell-action-wrapper",
     style: {

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.PercentAndRatio = exports.Percent = 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");
@@ -85,6 +85,26 @@ var OnAction = exports.OnAction = {
     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 = {

package/lib/translated/nl/components/Gradebook/icons/MasteryLevelIcon/ExceedsMasteryIcon.js

@@ -4,13 +4,23 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ExceedsMasteryIcon = void 0;
+exports.exceedsMasteryIconSvgPaths = exports.ExceedsMasteryIcon = exports.DEFAULT_FILL_EXCEEDS_MASTERY = 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: 'M9 16C12.866 16 16 12.866 16 9C16 5.13401 12.866 2 9 2C5.13401 2 2 5.13401 2 9C2 12.866 5.13401 16 9 16ZM9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9706 0 9 0C4.02944 0 0 4.02944 0 9C0 13.9706 4.02944 18 9 18Z'
+}, {
+  fillRule: 'evenodd',
+  clipRule: 'evenodd',
+  d: 'M9 11.5C10.3807 11.5 11.5 10.3807 11.5 9C11.5 7.61929 10.3807 6.5 9 6.5C7.61929 6.5 6.5 7.61929 6.5 9C6.5 10.3807 7.61929 11.5 9 11.5ZM9 13.5C11.4853 13.5 13.5 11.4853 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C6.51472 4.5 4.5 6.51472 4.5 9C4.5 11.4853 6.51472 13.5 9 13.5Z'
+}];
+var DEFAULT_FILL_EXCEEDS_MASTERY = exports.DEFAULT_FILL_EXCEEDS_MASTERY = '#0374B5';
 var ExceedsMasteryIcon = exports.ExceedsMasteryIcon = function ExceedsMasteryIcon(_ref) {
   var _ref$fill = _ref.fill,
-    fill = _ref$fill === void 0 ? '#0374B5' : _ref$fill,
+    fill = _ref$fill === void 0 ? DEFAULT_FILL_EXCEEDS_MASTERY : _ref$fill,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement("svg", Object.assign({
     id: "exceeds-mastery",
@@ -21,13 +31,12 @@ var ExceedsMasteryIcon = exports.ExceedsMasteryIcon = function ExceedsMasteryIco
     xmlns: "http://www.w3.org/2000/svg",
     role: "img",
     "aria-label": "Exceeds Mastery"
-  }, props), /*#__PURE__*/_react.default.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M9 16C12.866 16 16 12.866 16 9C16 5.13401 12.866 2 9 2C5.13401 2 2 5.13401 2 9C2 12.866 5.13401 16 9 16ZM9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9706 0 9 0C4.02944 0 0 4.02944 0 9C0 13.9706 4.02944 18 9 18Z"
-  }), /*#__PURE__*/_react.default.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M9 11.5C10.3807 11.5 11.5 10.3807 11.5 9C11.5 7.61929 10.3807 6.5 9 6.5C7.61929 6.5 6.5 7.61929 6.5 9C6.5 10.3807 7.61929 11.5 9 11.5ZM9 13.5C11.4853 13.5 13.5 11.4853 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C6.51472 4.5 4.5 6.51472 4.5 9C4.5 11.4853 6.51472 13.5 9 13.5Z"
+  }, props), SVG_PATHS.map(function (pathProps, index) {
+    return /*#__PURE__*/_react.default.createElement("path", Object.assign({
+      key: index
+    }, pathProps));
   }));
-};
+};
+var exceedsMasteryIconSvgPaths = exports.exceedsMasteryIconSvgPaths = SVG_PATHS.map(function (p) {
+  return "<path fill-rule=\"".concat(p.fillRule, "\" d=\"").concat(p.d, "\"/>");
+}).join('');

package/lib/translated/nl/components/Gradebook/icons/MasteryLevelIcon/MasteryIcon.js

@@ -4,13 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MasteryIcon = void 0;
+exports.masteryIconSvgPaths = exports.MasteryIcon = exports.DEFAULT_FILL_MASTERY = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _excluded = ["fill"];
+var SVG_PATHS = [{
+  d: 'M18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z'
+}];
+var DEFAULT_FILL_MASTERY = exports.DEFAULT_FILL_MASTERY = '#0B874B';
 var MasteryIcon = exports.MasteryIcon = function MasteryIcon(_ref) {
   var _ref$fill = _ref.fill,
-    fill = _ref$fill === void 0 ? '#0B874B' : _ref$fill,
+    fill = _ref$fill === void 0 ? DEFAULT_FILL_MASTERY : _ref$fill,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement("svg", Object.assign({
     id: "mastery",
@@ -21,7 +25,12 @@ var MasteryIcon = exports.MasteryIcon = function MasteryIcon(_ref) {
     xmlns: "http://www.w3.org/2000/svg",
     role: "img",
     "aria-label": "Mastery"
-  }, props), /*#__PURE__*/_react.default.createElement("path", {
-    d: "M18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z"
+  }, props), SVG_PATHS.map(function (pathProps, index) {
+    return /*#__PURE__*/_react.default.createElement("path", Object.assign({
+      key: index
+    }, pathProps));
   }));
-};
+};
+var masteryIconSvgPaths = exports.masteryIconSvgPaths = SVG_PATHS.map(function (p) {
+  return "<path d=\"".concat(p.d, "\"/>");
+}).join('');

package/lib/translated/nl/components/Gradebook/icons/MasteryLevelIcon/MasteryIconFromSVGUrl.stories.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Unassessed = exports.Remediation = exports.NoEvidence = exports.NearMastery = exports.Mastery = exports.ExceedsMasteryColorOverride = exports.ExceedsMastery = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _masteryLevelToSvgUrl = require("../../../../util/gradebook/masteryLevelToSvgUrl.js");
+var MasteryIconFromSVGUrl = function MasteryIconFromSVGUrl(_ref) {
+  var masteryLevel = _ref.masteryLevel,
+    options = _ref.options;
+  var src = (0, _masteryLevelToSvgUrl.masteryLevelToSvgUrl)(masteryLevel, options);
+  return /*#__PURE__*/_react.default.createElement("img", {
+    src: src !== null && src !== void 0 ? src : void 0,
+    alt: masteryLevel,
+    width: 32,
+    height: 32
+  });
+};
+var meta = {
+  title: 'Gradebook/MasteryLevelIcon/MasteryIconFromSVGUrl',
+  component: MasteryIconFromSVGUrl,
+  argTypes: {
+    masteryLevel: {
+      control: 'select',
+      options: ['exceeds_mastery', 'mastery', 'near_mastery', 'remediation', 'unassessed', 'no_evidence']
+    }
+  }
+};
+var _default = exports.default = meta;
+var ExceedsMastery = exports.ExceedsMastery = {
+  args: {
+    masteryLevel: 'exceeds_mastery'
+  }
+};
+var Mastery = exports.Mastery = {
+  args: {
+    masteryLevel: 'mastery'
+  }
+};
+var NearMastery = exports.NearMastery = {
+  args: {
+    masteryLevel: 'near_mastery'
+  }
+};
+var Remediation = exports.Remediation = {
+  args: {
+    masteryLevel: 'remediation'
+  }
+};
+var Unassessed = exports.Unassessed = {
+  args: {
+    masteryLevel: 'unassessed'
+  }
+};
+var NoEvidence = exports.NoEvidence = {
+  args: {
+    masteryLevel: 'no_evidence'
+  }
+};
+var ExceedsMasteryColorOverride = exports.ExceedsMasteryColorOverride = {
+  args: {
+    masteryLevel: 'exceeds_mastery',
+    options: {
+      fill: '#FF00EE'
+    }
+  }
+};

package/lib/translated/nl/components/Gradebook/icons/MasteryLevelIcon/NearMasteryIcon.js

@@ -4,13 +4,19 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NearMasteryIcon = void 0;
+exports.nearMasteryIconSvgPaths = exports.NearMasteryIcon = exports.DEFAULT_FILL_NEAR_MASTERY = 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: 'M0 9C0 13.9706 4.02944 18 9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9706 0 9 0C4.02944 0 0 4.02944 0 9ZM2.01759 8.5H15.9824C15.7261 4.86736 12.6979 2 9.00001 2C5.30213 2 2.27396 4.86736 2.01759 8.5Z'
+}];
+var DEFAULT_FILL_NEAR_MASTERY = exports.DEFAULT_FILL_NEAR_MASTERY = '#FBB918';
 var NearMasteryIcon = exports.NearMasteryIcon = function NearMasteryIcon(_ref) {
   var _ref$fill = _ref.fill,
-    fill = _ref$fill === void 0 ? '#FBB918' : _ref$fill,
+    fill = _ref$fill === void 0 ? DEFAULT_FILL_NEAR_MASTERY : _ref$fill,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement("svg", Object.assign({
     id: "near-mastery",
@@ -21,9 +27,12 @@ var NearMasteryIcon = exports.NearMasteryIcon = function NearMasteryIcon(_ref) {
     xmlns: "http://www.w3.org/2000/svg",
     role: "img",
     "aria-label": "Near Mastery"
-  }, props), /*#__PURE__*/_react.default.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M0 9C0 13.9706 4.02944 18 9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9706 0 9 0C4.02944 0 0 4.02944 0 9ZM2.01759 8.5H15.9824C15.7261 4.86736 12.6979 2 9.00001 2C5.30213 2 2.27396 4.86736 2.01759 8.5Z"
+  }, props), SVG_PATHS.map(function (pathProps, index) {
+    return /*#__PURE__*/_react.default.createElement("path", Object.assign({
+      key: index
+    }, pathProps));
   }));
-};
+};
+var nearMasteryIconSvgPaths = exports.nearMasteryIconSvgPaths = SVG_PATHS.map(function (p) {
+  return "<path fill-rule=\"".concat(p.fillRule, "\" d=\"").concat(p.d, "\"/>");
+}).join('');