@instructure/outcomes-ui 2.1.9 → 3.0.0

package/lib/translated/zh-Hant/demo.js

@@ -376,10 +376,6 @@ var _reactDom = require("react-dom");
 
 var _lodash = require("lodash");
 
-require("@instructure/canvas-theme");
-
-require("@instructure/canvas-high-contrast-theme");
-
 var _uiAlerts = require("@instructure/ui-alerts");
 
 var _uiHeading = require("@instructure/ui-heading");
@@ -390,27 +386,20 @@ var _uiSimpleSelect = require("@instructure/ui-simple-select");
 
 var _uiTabs = require("@instructure/ui-tabs");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _uiThemes = require("@instructure/ui-themes");
+
+var _emotion = require("@instructure/emotion");
 
 var _index = require("./index.js");
 
 var _process, _process$env;
 
-var styles = {
-  componentId: 'dCZbw',
-  template: function template(theme) {
-    return "\n\n* {\n  box-sizing: border-box;\n}\n\nhtml {\n  font-size: 1rem;\n}\n\nhtml, body {\n  margin: 0;\n  height: 100%;\n  font-family: sans-serif;\n}\n\n.outcomes-ui__src--root {\n  background: white;\n  color: black;\n  padding: 2rem;\n  margin: 2rem;\n}\n\n.outcomes-ui__src--item {\n  padding-bottom: 1rem;\n}\n\n.outcomes-ui__src--item > div {\n    padding-top: 0.25rem;\n    padding-bottom: 0.25rem;\n  }\n\n.outcomes-ui__src--report {\n  max-width: calc(85vw - 128px);\n}\n\n.outcomes-ui__src--mastery {\n  padding-bottom: 2rem;\n}\n\n#outcomes-ui__src--screenreaderNotifications {\n  height: 1px;\n  width: 1px;\n  clip: rect(0, 0, 0, 0);\n  overflow: hidden;\n}\n";
-  },
-  'root': 'outcomes-ui__src--root',
-  'item': 'outcomes-ui__src--item',
-  'report': 'outcomes-ui__src--report',
-  'mastery': 'outcomes-ui__src--mastery',
-  'screenreaderNotifications': 'outcomes-ui__src--screenreaderNotifications'
+var themes = {
+  'canvas': _uiThemes.canvas,
+  'canvas-high-contrast': _uiThemes.canvasHighContrast
 };
-var themes = ['canvas', 'canvas-high-contrast'];
 var root = document.createElement('div');
 root.setAttribute('id', 'app');
-root.classList.add(styles.root);
 document.body.appendChild(root);
 var alert = document.createElement('div');
 alert.setAttribute('id', 'alert');
@@ -457,7 +446,6 @@ var DemoAlignment = function DemoAlignment(props) {
       jwt = props.jwt,
       useAlignmentWidget = props.useAlignmentWidget;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: styles.item,
     "data-automation": "artifact"
   }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
     level: "h3"
@@ -486,7 +474,7 @@ var DemoAlignment = function DemoAlignment(props) {
     jwt: jwt,
     liveRegion: getLive,
     screenreaderNotification: screenreaderNotification,
-    readOnly: readOnly === 'true'
+    canManageOutcomes: readOnly === 'false'
   })) : /*#__PURE__*/_react.default.createElement(_index.OutcomeAlignments, {
     alignmentSetId: alignmentSetId,
     pickerType: currentPicker,
@@ -548,14 +536,14 @@ var handleTabChange = function handleTabChange(_, _ref4) {
 };
 
 function rerender() {
-  (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_uiThemeable.ApplyTheme, {
-    theme: _uiThemeable.ApplyTheme.generateTheme(currentTheme)
+  (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_emotion.InstUISettingsProvider, {
+    theme: themes[currentTheme]
   }, /*#__PURE__*/_react.default.createElement(_uiTabs.Tabs, {
     onRequestTabChange: handleTabChange
   }, /*#__PURE__*/_react.default.createElement(_uiTabs.Tabs.Panel, {
     id: "alignments",
     renderTitle: "Alignments",
-    selected: currentTab === 'alignments'
+    isSelected: currentTab === 'alignments'
   }, /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect, {
     renderLabel: "Picker",
     onChange: handlePickerChange,
@@ -625,21 +613,15 @@ function rerender() {
     jwt: createJwt,
     alignmentWidget: _index.AlignmentWidget
   })), /*#__PURE__*/_react.default.createElement(_uiTabs.Tabs.Panel, {
-    selected: currentTab === 'report',
+    isSelected: currentTab === 'report',
     renderTitle: "Report",
     textAlign: "center",
     id: "report"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      backgroundColor: 'lightgrey'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_uiCheckbox.Checkbox, {
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiCheckbox.Checkbox, {
     label: "Show Rollups",
     checked: showRollups,
     onChange: handleShowRollupsChange
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: styles.report
-  }, /*#__PURE__*/_react.default.createElement(_index.OutcomesPerStudentReport, {
+  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_index.OutcomesPerStudentReport, {
     artifactType: artifactType,
     artifactId: artifactId,
     host: outcomesHost,
@@ -648,15 +630,15 @@ function rerender() {
     contextUuid: "dummy_uuid",
     showRollups: showRollups
   })))), /*#__PURE__*/_react.default.createElement(_uiTabs.Tabs.Panel, {
-    title: "Theme",
+    renderTitle: "Theme",
     textAlign: "center",
     id: "theme",
-    selected: currentTab === 'theme'
+    isSelected: currentTab === 'theme'
   }, /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect, {
     renderLabel: "Theme",
     onChange: handleThemeChange,
     value: currentTheme
-  }, themes.map(function (themeKey) {
+  }, Object.keys(themes).map(function (themeKey) {
     return /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect.Option, {
       id: themeKey,
       key: themeKey,

package/lib/translated/zh-Hant/index.css

@@ -1,44 +1,36 @@
 * {
-  box-sizing: border-box;
-}
-
-html {
-  font-size: 1rem;
-}
-
-html, body {
-  margin: 0;
-  height: 100%;
-  font-family: sans-serif;
-}
-
-.root {
-  background: white;
-  color: black;
-  padding: 2rem;
-  margin: 2rem;
-}
-
-.item {
-  padding-bottom: 1rem;
-
-  & > div {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
+    box-sizing: border-box;
   }
-}
-
-.report {
-  max-width: calc(85vw - 128px);
-}
-
-.mastery {
-  padding-bottom: 2rem;
-}
-
-#screenreaderNotifications {
-  height: 1px;
-  width: 1px;
-  clip: rect(0, 0, 0, 0);
-  overflow: hidden;
-}
+  html {
+    font-size: 1rem;
+  }
+  html, body {
+    margin: 0;
+    height: 100%;
+    font-family: sans-serif;
+  }
+  .root {
+    background: white;
+    color: black;
+    padding: 2rem;
+    margin: 2rem;
+  }
+  .item {
+    padding-bottom: 1rem;
+    & > div {
+      padding-top: 0.25rem;
+      padding-bottom: 0.25rem;
+    }
+  }
+  .report {
+    max-width: calc(85vw - 128px);
+  }
+  .mastery {
+    padding-bottom: 2rem;
+  }
+  #screenreaderNotifications {
+    height: 1px;
+    width: 1px;
+    clip: rect(0, 0, 0, 0);
+    overflow: hidden;
+  

package/lib/translated/zh-Hant/store/shapes.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.algorithmDataShape = exports.decayingAverageDataShape = exports.nMasteryDataShape = exports.contextShape = exports.outcomeProficiencyShape = exports.outcomeProficiencyRatingShape = exports.outcomeCalculationMethodShape = exports.individualResultShape = exports.scoringTierShape = exports.outcomeResultShape = exports.outcomeShape = exports.scoringMethodShape = void 0;
+exports.stylesShape = exports.algorithmDataShape = exports.decayingAverageDataShape = exports.nMasteryDataShape = exports.contextShape = exports.outcomeProficiencyShape = exports.outcomeProficiencyRatingShape = exports.outcomeCalculationMethodShape = exports.individualResultShape = exports.scoringTierShape = exports.outcomeResultShape = exports.outcomeShape = exports.scoringMethodShape = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -105,4 +105,6 @@ exports.decayingAverageDataShape = decayingAverageDataShape;
 
 var algorithmDataShape = _propTypes.default.oneOf([nMasteryDataShape, decayingAverageDataShape]);
 
-exports.algorithmDataShape = algorithmDataShape;
+exports.algorithmDataShape = algorithmDataShape;
+var stylesShape = _propTypes.default.object;
+exports.stylesShape = stylesShape;

package/lib/translated/zh-Hant/util/__tests__/findElementsWithStyle.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findElementsWithStyle = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var findElementsWithStyle = function findElementsWithStyle(wrapper, targetStyles) {
+  return wrapper.findWhere(function (node) {
+    var style = node.prop('css');
+    return style && Object.entries(targetStyles).every(function (_ref) {
+      var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+          key = _ref2[0],
+          value = _ref2[1];
+
+      return style[key] === value;
+    });
+  });
+};
+
+exports.findElementsWithStyle = findElementsWithStyle;

package/lib/util/__tests__/findElementsWithStyle.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findElementsWithStyle = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var findElementsWithStyle = function findElementsWithStyle(wrapper, targetStyles) {
+  return wrapper.findWhere(function (node) {
+    var style = node.prop('css');
+    return style && Object.entries(targetStyles).every(function (_ref) {
+      var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+          key = _ref2[0],
+          value = _ref2[1];
+
+      return style[key] === value;
+    });
+  });
+};
+
+exports.findElementsWithStyle = findElementsWithStyle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/outcomes-ui",
-  "version": "2.1.9",
+  "version": "3.0.0",
   "description": "Outcomes Application for general alignment and assessment",
   "author": "Instructure, Inc. Engineering and Product Design",
   "license": "MIT",
@@ -17,6 +17,7 @@
     "extract": "format-message extract -g underscored_crc32 --out-file translations/en.json 'src/**/*.js'",
     "lint": "eslint .",
     "start": "webpack-dev-server",
+    "pretest": "rm -rf coverage && mkdir coverage",
     "test": "karma start",
     "test:headless": "karma start --headless --no-sandbox",
     "mocha": "find src -name '*.js' | grep '__tests__' | xargs mocha --compilers js:@babel/register --require src/test/mocha-bootstrap",
@@ -28,39 +29,38 @@
   },
   "dependencies": {
     "@instructure/redux-service-middleware": "^1.0.0",
-    "@instructure/ui-a11y-content": "^7",
-    "@instructure/ui-a11y-utils": "^7",
-    "@instructure/ui-avatar": "^7",
-    "@instructure/ui-billboard": "^7",
-    "@instructure/ui-buttons": "^7",
-    "@instructure/ui-checkbox": "^7",
-    "@instructure/ui-color-utils": "^7",
-    "@instructure/ui-flex": "^7",
-    "@instructure/ui-focusable": "^7",
-    "@instructure/ui-form-field": "^7",
-    "@instructure/ui-heading": "^7",
-    "@instructure/ui-icons": "^7",
-    "@instructure/ui-link": "^7",
-    "@instructure/ui-list": "^7",
-    "@instructure/ui-modal": "^7",
-    "@instructure/ui-motion": "^7",
-    "@instructure/ui-overlays": "^7",
-    "@instructure/ui-pagination": "^7",
-    "@instructure/ui-pill": "^7",
-    "@instructure/ui-popover": "^7",
-    "@instructure/ui-progress": "^7",
-    "@instructure/ui-spinner": "^7",
-    "@instructure/ui-table": "^7",
-    "@instructure/ui-tag": "^7",
-    "@instructure/ui-text": "^7",
-    "@instructure/ui-text-input": "^7",
-    "@instructure/ui-themeable": "^7",
-    "@instructure/ui-themes": "^7",
-    "@instructure/ui-tooltip": "^7",
-    "@instructure/ui-tray": "^7",
-    "@instructure/ui-tree-browser": "^7",
-    "@instructure/ui-truncate-text": "^7",
-    "@instructure/ui-view": "^7",
+    "@instructure/ui-a11y-content": "^8",
+    "@instructure/ui-a11y-utils": "^8",
+    "@instructure/ui-avatar": "^8",
+    "@instructure/ui-billboard": "^8",
+    "@instructure/ui-buttons": "^8",
+    "@instructure/ui-checkbox": "^8",
+    "@instructure/ui-color-utils": "^8",
+    "@instructure/ui-flex": "^8",
+    "@instructure/ui-focusable": "^8",
+    "@instructure/ui-form-field": "^8",
+    "@instructure/ui-heading": "^8",
+    "@instructure/ui-icons": "^8",
+    "@instructure/ui-link": "^8",
+    "@instructure/ui-list": "^8",
+    "@instructure/ui-modal": "^8",
+    "@instructure/ui-motion": "^8",
+    "@instructure/ui-overlays": "^8",
+    "@instructure/ui-pagination": "^8",
+    "@instructure/ui-pill": "^8",
+    "@instructure/ui-popover": "^8",
+    "@instructure/ui-progress": "^8",
+    "@instructure/ui-spinner": "^8",
+    "@instructure/ui-table": "^8",
+    "@instructure/ui-tag": "^8",
+    "@instructure/ui-text": "^8",
+    "@instructure/ui-text-input": "^8",
+    "@instructure/ui-themes": "^8",
+    "@instructure/ui-tooltip": "^8",
+    "@instructure/ui-tray": "^8",
+    "@instructure/ui-tree-browser": "^8",
+    "@instructure/ui-truncate-text": "^8",
+    "@instructure/ui-view": "^8",
     "classnames": "^2.2.5",
     "core-js": "^3.2.1",
     "format-message": "^6.2.1",
@@ -71,10 +71,10 @@
     "lodash.frompairs": "^4.0.1",
     "multireducer": "^3.1.0",
     "prop-types": "^15.5.8",
-    "query-string": "^4.3.4",
+    "query-string": "^6.7.0",
     "re-reselect": "^3.4.0",
-    "react-redux": "^5",
     "react-csv": "^2.2.2",
+    "react-redux": "^5",
     "redux": "^3.6.0",
     "redux-actions": "^1.2.0",
     "redux-immutable": "^3.0.9",
@@ -82,26 +82,30 @@
     "redux-thunk": "^2.1.0",
     "regenerator-runtime": "^0.13.3",
     "reselect": "^4.0.0",
-    "sanitize-html": "^1.16.1",
+    "sanitize-html": "2.7.3",
     "shortid": "^2.2.8"
   },
   "devDependencies": {
     "@babel/cli": "^7.0.0",
-    "@babel/core": "^7.0.0",
-    "@instructure/canvas-high-contrast-theme": "^7",
-    "@instructure/canvas-theme": "^7",
-    "@instructure/ui-alerts": "^7",
+    "@babel/core": "^7.18.9",
+    "@babel/runtime": "^7.18.9",
+    "@instructure/canvas-high-contrast-theme": "^8",
+    "@instructure/canvas-theme": "^8",
+    "@instructure/emotion": "^8",
+    "@instructure/ui-alerts": "^8",
     "@instructure/ui-babel-preset": "^7",
     "@instructure/ui-eslint-config": "^7",
-    "@instructure/ui-simple-select": "^7",
-    "@instructure/ui-tabs": "^7",
-    "@instructure/ui-webpack-config": "^7",
+    "@instructure/ui-simple-select": "^8",
+    "@instructure/ui-tabs": "^8",
+    "@instructure/ui-webpack-config": "^8",
     "@storybook/addon-actions": "^5.3.10",
     "@storybook/addon-knobs": "^5.3.11",
     "@storybook/addon-links": "^5.3.10",
     "@storybook/addon-storyshots": "^5.3.13",
     "@storybook/addons": "^5.3.10",
     "@storybook/react": "^5.3.10",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.0",
     "axe-core": "^2.1.7",
     "babel-eslint": "^8.2.3",
@@ -128,23 +132,23 @@
     "eslint-plugin-react": "^7.7.0",
     "eslint-plugin-react-redux": "^4.0.0",
     "eslint-plugin-security": "^1.4.0",
-    "fetch-mock": "^7.3.3",
+    "fetch-mock": "^9",
     "file-loader": "^3.0.1",
     "format-message-cli": "^6.2.1",
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^4",
     "jest": "^25.1.0",
     "jsdom": "^11.5.1",
     "json-loader": "^0.5.4",
-    "karma": "^1.3.0",
-    "karma-chrome-launcher": "^2.0.0",
-    "karma-coverage": "^1.1.1",
+    "karma": "^6.4.0",
+    "karma-chrome-launcher": "^3.1.1",
+    "karma-coverage": "^2.2.1",
     "karma-junit-reporter": "^2.0.1",
-    "karma-mocha": "^1.2.0",
+    "karma-mocha": "^2.0.1",
     "karma-mocha-reporter": "^2.2.0",
     "karma-sinon-chai": "^1.2.4",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "^0.0.32",
-    "karma-webpack": "3.0.0",
+    "karma-webpack": "^5",
     "mocha": "^3.1.2",
     "postcss": "^6.0.0",
     "postcss-import": "^11.0.0",
@@ -161,9 +165,9 @@
     "storybook-readme": "^5.0.8",
     "style-loader": "^0.23.1",
     "url-loader": "^1.1.2",
-    "webpack": "^4.17.1",
-    "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.1.6",
+    "webpack": "^5",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.9.3",
     "webpack-merge": "^4.2.2"
   },
   "peerDependencies": {

package/es/components/Alignment/styles.css

@@ -1,32 +0,0 @@
-.item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.outcome {
-  flex: 0 0 0;
-  padding: 0 0.3rem 0 0;
-}
-
-.link {
-  flex-grow: 1;
-  width: 100%;
-}
-
-.linkText {
-  display: table;
-  table-layout: fixed;
-  white-space: nowrap;
-  width: 100%;
-}
-
-.innerLinkText {
-  display: table-cell;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.delete {
-  flex: 0 0 1rem;
-}

package/es/components/AlignmentList/styles.css

@@ -1,29 +0,0 @@
-.header {
-  background-color: #BBBBBB;
-  border: solid 1px #999999;
-  border-radius: 5px;
-  padding: 10px 20px;
-}
-
-.list {
-  list-style: none;
-  padding-left: 0;
-  border: solid 1px #BBBBBB;
-  border-radius: 5px;
-}
-
-.list > li {
-  padding: 10px 20px;
-}
-
-.list > li + li {
-  border-top: dashed 1px #BBBBBB;
-}
-
-.addOutcome {
-  text-align: center;
-}
-
-.addOutcome button {
-  padding: 0;
-}

package/es/components/AlignmentWidget/styles.css

@@ -1,11 +0,0 @@
-.spacing {
-  padding-right: var(--outcomeLabelsSpacing);
-}
-
-.line {
-  display: flex;
-}
-
-.button {
-  margin-top: 1rem;
-}

package/es/components/OutcomeCheckbox/styles.css

@@ -1,30 +0,0 @@
-.checkbox {
-  padding: var(--outcomePickerItemPadding);
-}
-
-.checkboxLabel {
-  padding-left: var(--checkboxLabelLeftPadding);
-  display: flex;
-}
-
-.checkboxDescription {
-  padding-left: var(--checkboxDescriptionLeftPadding);
-}
-
-.checkboxFriendlyDescription {
-  margin-left: var(--checkboxDescriptionLeftPadding);
-  margin-bottom: 10px;
-}
-
-.linkText {
-  display: table;
-  table-layout: fixed;
-  white-space: nowrap;
-  width: 100%;
-}
-
-.innerLinkText {
-  display: table-cell;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}

package/es/components/OutcomeFolder/styles.css

@@ -1,16 +0,0 @@
-.folder {
-  display: flex;
-  align-content: flex-start;
-  padding: var(--outcomePickerItemPadding);
-}
-
-.folderIcon {
-  font-size: 1.5em;
-  height: 1.25rem;
-  width: 1.25rem;
-  margin-right: 0.5rem;
-}
-
-.folderDetails {
-  padding-left: 0.5rem;
-}

package/es/components/OutcomeFolderList/styles.css

@@ -1,3 +0,0 @@
-.picker {
-  padding-left: 1rem;
-}

package/es/components/OutcomeLabels/styles.css

@@ -1,21 +0,0 @@
-.line {
-  display: flex;
-}
-
-.text {
-  padding-left: var(--outcomeLabelsSpacing);
-}
-
-.pill {
-  display: inline-block;
-  float: left;
-  max-width: 12rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.comma {
-  float: left;
-  width: 0.5rem;
-}

package/es/components/OutcomeSelectionList/styles.css

@@ -1,11 +0,0 @@
-.picker {
-  padding-left: 1rem;
-}
-
-.checkbox {
-  padding: var(--outcomePickerItemPadding);
-}
-
-.checkboxLabel {
-  padding-left: 0.5rem;
-}

package/es/components/OutcomeTags/styles.css

@@ -1,13 +0,0 @@
-.line {
-  display: inline-flex;
-}
-
-.tags {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.text {
-  padding-left: var(--outcomeTagsSpacing);
-  margin-bottom: var(--outcomeTagsSpacing);
-}

package/es/components/OutcomeTray/styles.css

@@ -1,23 +0,0 @@
-.outcomeTray {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  min-height: 0;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
-.trayContainer {
-  padding: 1rem;
-  flex-grow: 1;
-  overflow: auto;
-  min-height: 0;
-}
-
-.footerContainer {
-  bottom: 0;
-  position: sticky;
-}