@instructure/outcomes-ui 4.1.3 → 4.1.5

package/es/util/gradebook/masteryLevelToSvgUrl.js

@@ -0,0 +1,44 @@
+import { DEFAULT_FILL_EXCEEDS_MASTERY, exceedsMasteryIconSvgPaths } from "../../components/Gradebook/icons/MasteryLevelIcon/ExceedsMasteryIcon.js";
+import { DEFAULT_FILL_MASTERY, masteryIconSvgPaths } from "../../components/Gradebook/icons/MasteryLevelIcon/MasteryIcon.js";
+import { DEFAULT_FILL_NEAR_MASTERY, nearMasteryIconSvgPaths } from "../../components/Gradebook/icons/MasteryLevelIcon/NearMasteryIcon.js";
+import { DEFAULT_FILL_NO_EVIDENCE, noEvidenceIconSvgPaths } from "../../components/Gradebook/icons/MasteryLevelIcon/NoEvidenceIcon.js";
+import { DEFAULT_FILL_REMEDIATION, remediationIconSvgPaths } from "../../components/Gradebook/icons/MasteryLevelIcon/RemediationIcon.js";
+import { DEFAULT_FILL_UNASSESSED, unassessedIconSvgPaths } from "../../components/Gradebook/icons/MasteryLevelIcon/UnassessedIcon.js";
+var MASTERY_LEVEL_SVG_CONFIG = {
+  exceeds_mastery: {
+    svgPaths: exceedsMasteryIconSvgPaths,
+    defaultFill: DEFAULT_FILL_EXCEEDS_MASTERY
+  },
+  mastery: {
+    svgPaths: masteryIconSvgPaths,
+    defaultFill: DEFAULT_FILL_MASTERY
+  },
+  near_mastery: {
+    svgPaths: nearMasteryIconSvgPaths,
+    defaultFill: DEFAULT_FILL_NEAR_MASTERY
+  },
+  no_evidence: {
+    svgPaths: noEvidenceIconSvgPaths,
+    defaultFill: DEFAULT_FILL_NO_EVIDENCE
+  },
+  remediation: {
+    svgPaths: remediationIconSvgPaths,
+    defaultFill: DEFAULT_FILL_REMEDIATION
+  },
+  unassessed: {
+    svgPaths: unassessedIconSvgPaths,
+    defaultFill: DEFAULT_FILL_UNASSESSED
+  }
+};
+export var masteryLevelToSvgUrl = function masteryLevelToSvgUrl(masteryLevel, options) {
+  var config = MASTERY_LEVEL_SVG_CONFIG[masteryLevel];
+  if (!config) {
+    console.warn("No SVG config found for mastery level \"".concat(masteryLevel, "\""));
+    return null;
+  }
+  var svgPaths = config.svgPaths,
+    defaultFill = config.defaultFill;
+  var fill = options === null || options === void 0 ? void 0 : options.fill;
+  var svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-1 -1 20 20\" fill=\"".concat(fill || defaultFill, "\">").concat(svgPaths, "</svg>");
+  return "data:image/svg+xml;charset=utf-8,".concat(encodeURIComponent(svg));
+};

package/lib/components/Gradebook/dialogs/MessageStudentsWhoDialog/Pill.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+type PillPropsBase = {
+    studentId: string;
+    text: string;
+    selected?: boolean;
+};
+type PillPropsWithObserver = PillPropsBase & {
+    observerId: string;
+    onClick: (studentId: string, observerId: string) => void;
+};
+type PillPropsWithoutObserver = PillPropsBase & {
+    observerId?: undefined;
+    onClick: (studentId: string) => void;
+};
+export type PillProps = PillPropsWithoutObserver | PillPropsWithObserver;
+declare const Pill: ({ studentId, observerId, text, onClick, selected }: PillProps) => React.JSX.Element;
+export default Pill;
+//# sourceMappingURL=Pill.d.ts.map

package/lib/components/Gradebook/dialogs/MessageStudentsWhoDialog/Pill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/dialogs/MessageStudentsWhoDialog/Pill.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAkDzB,KAAK,aAAa,GAAG;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,KAAK,qBAAqB,GAAG,aAAa,GAAG;IAC3C,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;CACzD,CAAA;AAED,KAAK,wBAAwB,GAAG,aAAa,GAAG;IAC9C,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;CACrC,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,wBAAwB,GAAG,qBAAqB,CAAA;AAExE,QAAA,MAAM,IAAI,GAAI,oDAA0D,SAAS,sBAqChF,CAAA;AAED,eAAe,IAAI,CAAA"}

package/lib/components/Gradebook/dialogs/MessageStudentsWhoDialog/Pill.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _uiTag = require("@instructure/ui-tag");
+var _uiText = require("@instructure/ui-text");
+var _uiTooltip = require("@instructure/ui-tooltip");
+var _uiFlex = require("@instructure/ui-flex");
+var _uiIcons = require("@instructure/ui-icons");
+var _emotion = require("@instructure/emotion");
+var _uiTruncateText = require("@instructure/ui-truncate-text");
+var _formatMessage = _interopRequireDefault(require("format-message"));
+var componentOverrides = {
+  Tag: {
+    defaultBackground: 'white'
+  }
+};
+var ellipsis = function ellipsis() {
+  return (0, _formatMessage.default)('…');
+};
+var truncate = function truncate(text) {
+  return text.length > 14 ? text.slice(0, 13) + ellipsis() : text;
+};
+function renderText(text, truncatedText, textColor) {
+  var isTruncated = text.length > truncatedText.length;
+  if (isTruncated) {
+    return /*#__PURE__*/_react.default.createElement(_uiTooltip.Tooltip, {
+      renderTip: text
+    }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      as: "div",
+      color: textColor
+    }, /*#__PURE__*/_react.default.createElement(_uiTruncateText.TruncateText, null, truncatedText)));
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      as: "div",
+      color: textColor
+    }, /*#__PURE__*/_react.default.createElement(_uiTruncateText.TruncateText, null, text));
+  }
+}
+function renderIcon(selected) {
+  if (selected) {
+    return /*#__PURE__*/_react.default.createElement(_uiIcons.IconXSolid, {
+      "data-testid": "item-selected"
+    });
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_uiIcons.IconAddSolid, {
+      "data-testid": "item-unselected",
+      color: "brand"
+    });
+  }
+}
+var Pill = function Pill(_ref) {
+  var studentId = _ref.studentId,
+    observerId = _ref.observerId,
+    text = _ref.text,
+    _onClick = _ref.onClick,
+    _ref$selected = _ref.selected,
+    selected = _ref$selected === void 0 ? false : _ref$selected;
+  var textColor = selected ? 'primary' : 'secondary';
+  var truncatedText = truncate(text);
+  var testId = observerId ? 'observer-pill' : 'student-pill';
+  var ariaLabel = selected ? (0, _formatMessage.default)('Remove { text }', {
+    text: text
+  }) : (0, _formatMessage.default)('Add { text }', {
+    text: text
+  });
+  var contents = /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+    as: "div",
+    margin: "0 xxx-small 0 0",
+    justifyItems: "space-between"
+  }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+    size: "0.75rem",
+    shouldGrow: true,
+    margin: "0 xx-small 0 0",
+    overflowX: "hidden",
+    "aria-label": ariaLabel
+  }, renderText(text, truncatedText, textColor)), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+    padding: "0 0 xxx-small 0"
+  }, renderIcon(selected)));
+  return /*#__PURE__*/_react.default.createElement(_emotion.InstUISettingsProvider, {
+    theme: {
+      componentOverrides: componentOverrides
+    }
+  }, /*#__PURE__*/_react.default.createElement(_uiTag.Tag, {
+    text: contents,
+    "data-testid": testId,
+    onClick: function onClick() {
+      if (observerId !== void 0) {
+        _onClick(studentId, observerId);
+      } else {
+        _onClick(studentId);
+      }
+    }
+  }));
+};
+var _default = exports.default = Pill;

package/lib/components/Gradebook/dialogs/MessageStudentsWhoDialog/__tests__/index.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=index.test.d.ts.map

package/lib/components/Gradebook/dialogs/MessageStudentsWhoDialog/__tests__/index.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Gradebook/dialogs/MessageStudentsWhoDialog/__tests__/index.test.tsx"],"names":[],"mappings":"AAGA,OAAO,2BAA2B,CAAA"}