@instructure/outcomes-ui 4.1.2 → 4.1.4

package/lib/translated/th/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/translated/th/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/translated/th/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/translated/th/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/translated/th/components/Gradebook/gradebook-table/StudentCell/index.stories.js

@@ -4,14 +4,28 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithSISID = exports.WithLoginID = exports.WithIntegrationID = exports.ShowStatus = exports.LongNameLastFirst = exports.LongName = exports.LastFirstFormat = exports.FirstLastFormat = exports.Default = void 0;
+exports.default = exports.WithSecondaryInfo = exports.ShowStatus = exports.LongNameLastFirst = exports.LongName = exports.LastFirstFormat = exports.FirstLastFormat = exports.Default = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _react = _interopRequireDefault(require("react"));
 var _uiView = require("@instructure/ui-view");
 var _constants = require("../../../../util/gradebook/constants.js");
-var _mockData = require("../../__mocks__/mockData.js");
+var _mockData = require("./__mocks__/mockData.js");
 var _decorators = require("../../storybook/decorators.js");
 var _index = require("../../../../index.js");
+var _index2 = require("../../popovers/StudentPopover/index.js");
+var createStudentPopover = function createStudentPopover(_ref) {
+  var studentName = _ref.studentName,
+    avatarUrl = _ref.avatarUrl,
+    masteryScores = _ref.masteryScores;
+  return /*#__PURE__*/_react.default.createElement(_index2.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: _index.StudentCell,
@@ -24,9 +38,8 @@ var meta = {
     }, /*#__PURE__*/_react.default.createElement(Story, null)));
   }],
   args: {
-    studentPopover: (0, _decorators.createStudentPopover)({
-      studentName: _mockData.mockStudent.display_name,
-      student: _mockData.mockStudent
+    studentPopover: createStudentPopover({
+      studentName: _mockData.mockStudent.displayName
     })
   }
 };
@@ -36,49 +49,34 @@ var Default = exports.Default = {
     student: _mockData.mockStudent
   }
 };
-var WithSISID = exports.WithSISID = {
-  args: {
-    student: _mockData.mockStudent,
-    secondaryInfoDisplay: _constants.SecondaryInfoDisplay.SIS_ID
-  }
-};
-var WithLoginID = exports.WithLoginID = {
-  args: {
-    student: _mockData.mockStudent,
-    secondaryInfoDisplay: _constants.SecondaryInfoDisplay.LOGIN_ID
-  }
-};
-var WithIntegrationID = exports.WithIntegrationID = {
+var WithSecondaryInfo = exports.WithSecondaryInfo = {
   args: {
     student: _mockData.mockStudent,
-    secondaryInfoDisplay: _constants.SecondaryInfoDisplay.INTEGRATION_ID
+    secondaryInfo: '12345678'
   }
 };
 var LastFirstFormat = exports.LastFirstFormat = {
   args: {
     student: _mockData.mockStudent,
     nameDisplayFormat: _constants.NameDisplayFormat.LAST_FIRST,
-    secondaryInfoDisplay: _constants.SecondaryInfoDisplay.SIS_ID,
-    studentPopover: (0, _decorators.createStudentPopover)({
-      studentName: _mockData.mockStudent.sortable_name,
-      student: _mockData.mockStudent
+    studentPopover: createStudentPopover({
+      studentName: _mockData.mockStudent.sortableName,
+      avatarUrl: void 0
     })
   }
 };
 var FirstLastFormat = exports.FirstLastFormat = {
   args: {
     student: _mockData.mockStudent,
-    nameDisplayFormat: _constants.NameDisplayFormat.FIRST_LAST,
-    secondaryInfoDisplay: _constants.SecondaryInfoDisplay.LOGIN_ID
+    nameDisplayFormat: _constants.NameDisplayFormat.FIRST_LAST
   }
 };
 var LongName = exports.LongName = {
   args: {
     student: _mockData.mockStudentLongName,
-    secondaryInfoDisplay: _constants.SecondaryInfoDisplay.SIS_ID,
-    studentPopover: (0, _decorators.createStudentPopover)({
-      studentName: _mockData.mockStudentLongName.display_name,
-      student: _mockData.mockStudentLongName
+    studentPopover: createStudentPopover({
+      studentName: _mockData.mockStudentLongName.displayName,
+      avatarUrl: void 0
     })
   }
 };
@@ -86,10 +84,9 @@ var LongNameLastFirst = exports.LongNameLastFirst = {
   args: {
     student: _mockData.mockStudentLongName,
     nameDisplayFormat: _constants.NameDisplayFormat.LAST_FIRST,
-    secondaryInfoDisplay: _constants.SecondaryInfoDisplay.SIS_ID,
-    studentPopover: (0, _decorators.createStudentPopover)({
-      studentName: _mockData.mockStudentLongName.sortable_name,
-      student: _mockData.mockStudentLongName
+    studentPopover: createStudentPopover({
+      studentName: _mockData.mockStudentLongName.sortableName,
+      avatarUrl: void 0
     })
   }
 };

package/lib/translated/th/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/th/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/th/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/th/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('');

package/lib/translated/th/components/Gradebook/icons/MasteryLevelIcon/NoEvidenceIcon.js

@@ -4,13 +4,19 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NoEvidenceIcon = void 0;
+exports.noEvidenceIconSvgPaths = exports.NoEvidenceIcon = exports.DEFAULT_FILL_NO_EVIDENCE = 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: '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 9ZM12.9842 14.6342C11.8588 15.4314 10.4841 15.9 9 15.9C5.18924 15.9 2.1 12.8108 2.1 9C2.1 7.51587 2.56857 6.14118 3.36584 5.01579L12.9842 14.6342ZM14.4944 13.1745L4.82549 3.50559C5.98455 2.6236 7.43113 2.1 9 2.1C12.8108 2.1 15.9 5.18924 15.9 9C15.9 10.5689 15.3764 12.0155 14.4944 13.1745Z'
+}];
+var DEFAULT_FILL_NO_EVIDENCE = exports.DEFAULT_FILL_NO_EVIDENCE = '#6A7883';
 var NoEvidenceIcon = exports.NoEvidenceIcon = function NoEvidenceIcon(_ref) {
   var _ref$fill = _ref.fill,
-    fill = _ref$fill === void 0 ? '#6A7883' : _ref$fill,
+    fill = _ref$fill === void 0 ? DEFAULT_FILL_NO_EVIDENCE : _ref$fill,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement("svg", Object.assign({
     id: "no_evidence",
@@ -21,9 +27,12 @@ var NoEvidenceIcon = exports.NoEvidenceIcon = function NoEvidenceIcon(_ref) {
     xmlns: "http://www.w3.org/2000/svg",
     role: "img",
     "aria-label": "No Evidence"
-  }, props), /*#__PURE__*/_react.default.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    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 9ZM12.9842 14.6342C11.8588 15.4314 10.4841 15.9 9 15.9C5.18924 15.9 2.1 12.8108 2.1 9C2.1 7.51587 2.56857 6.14118 3.36584 5.01579L12.9842 14.6342ZM14.4944 13.1745L4.82549 3.50559C5.98455 2.6236 7.43113 2.1 9 2.1C12.8108 2.1 15.9 5.18924 15.9 9C15.9 10.5689 15.3764 12.0155 14.4944 13.1745Z"
+  }, props), SVG_PATHS.map(function (pathProps, index) {
+    return /*#__PURE__*/_react.default.createElement("path", Object.assign({
+      key: index
+    }, pathProps));
   }));
-};
+};
+var noEvidenceIconSvgPaths = exports.noEvidenceIconSvgPaths = SVG_PATHS.map(function (p) {
+  return "<path fill-rule=\"".concat(p.fillRule, "\" d=\"").concat(p.d, "\"/>");
+}).join('');

package/lib/translated/th/components/Gradebook/icons/MasteryLevelIcon/RemediationIcon.js

@@ -4,13 +4,19 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RemediationIcon = void 0;
+exports.remediationIconSvgPaths = exports.RemediationIcon = exports.DEFAULT_FILL_REMEDIATION = 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'
+}];
+var DEFAULT_FILL_REMEDIATION = exports.DEFAULT_FILL_REMEDIATION = '#E0061F';
 var RemediationIcon = exports.RemediationIcon = function RemediationIcon(_ref) {
   var _ref$fill = _ref.fill,
-    fill = _ref$fill === void 0 ? '#E0061F' : _ref$fill,
+    fill = _ref$fill === void 0 ? DEFAULT_FILL_REMEDIATION : _ref$fill,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement("svg", Object.assign({
     id: "remediation",
@@ -21,9 +27,12 @@ var RemediationIcon = exports.RemediationIcon = function RemediationIcon(_ref) {
     xmlns: "http://www.w3.org/2000/svg",
     role: "img",
     "aria-label": "Remediation"
-  }, 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"
+  }, props), SVG_PATHS.map(function (pathProps, index) {
+    return /*#__PURE__*/_react.default.createElement("path", Object.assign({
+      key: index
+    }, pathProps));
   }));
-};
+};
+var remediationIconSvgPaths = exports.remediationIconSvgPaths = SVG_PATHS.map(function (p) {
+  return "<path fill-rule=\"".concat(p.fillRule, "\" d=\"").concat(p.d, "\"/>");
+}).join('');