@instructure/outcomes-ui 2.1.0 → 2.1.3

package/lib/translated/vi/demo.js

@@ -0,0 +1,668 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.async-iterator.js");
+
+require("core-js/modules/es.symbol.has-instance.js");
+
+require("core-js/modules/es.symbol.is-concat-spreadable.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+require("core-js/modules/es.symbol.match.js");
+
+require("core-js/modules/es.symbol.replace.js");
+
+require("core-js/modules/es.symbol.search.js");
+
+require("core-js/modules/es.symbol.species.js");
+
+require("core-js/modules/es.symbol.split.js");
+
+require("core-js/modules/es.symbol.to-primitive.js");
+
+require("core-js/modules/es.symbol.to-string-tag.js");
+
+require("core-js/modules/es.symbol.unscopables.js");
+
+require("core-js/modules/es.array.concat.js");
+
+require("core-js/modules/es.array.copy-within.js");
+
+require("core-js/modules/es.array.fill.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.array.find.js");
+
+require("core-js/modules/es.array.find-index.js");
+
+require("core-js/modules/es.array.flat.js");
+
+require("core-js/modules/es.array.flat-map.js");
+
+require("core-js/modules/es.array.from.js");
+
+require("core-js/modules/es.array.includes.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.array.join.js");
+
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.array.of.js");
+
+require("core-js/modules/es.array.slice.js");
+
+require("core-js/modules/es.array.sort.js");
+
+require("core-js/modules/es.array.species.js");
+
+require("core-js/modules/es.array.splice.js");
+
+require("core-js/modules/es.array.unscopables.flat.js");
+
+require("core-js/modules/es.array.unscopables.flat-map.js");
+
+require("core-js/modules/es.array-buffer.constructor.js");
+
+require("core-js/modules/es.date.to-primitive.js");
+
+require("core-js/modules/es.function.has-instance.js");
+
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/es.json.to-string-tag.js");
+
+require("core-js/modules/es.map.js");
+
+require("core-js/modules/es.math.acosh.js");
+
+require("core-js/modules/es.math.asinh.js");
+
+require("core-js/modules/es.math.atanh.js");
+
+require("core-js/modules/es.math.cbrt.js");
+
+require("core-js/modules/es.math.clz32.js");
+
+require("core-js/modules/es.math.cosh.js");
+
+require("core-js/modules/es.math.expm1.js");
+
+require("core-js/modules/es.math.fround.js");
+
+require("core-js/modules/es.math.hypot.js");
+
+require("core-js/modules/es.math.imul.js");
+
+require("core-js/modules/es.math.log10.js");
+
+require("core-js/modules/es.math.log1p.js");
+
+require("core-js/modules/es.math.log2.js");
+
+require("core-js/modules/es.math.sign.js");
+
+require("core-js/modules/es.math.sinh.js");
+
+require("core-js/modules/es.math.tanh.js");
+
+require("core-js/modules/es.math.to-string-tag.js");
+
+require("core-js/modules/es.math.trunc.js");
+
+require("core-js/modules/es.number.constructor.js");
+
+require("core-js/modules/es.number.epsilon.js");
+
+require("core-js/modules/es.number.is-finite.js");
+
+require("core-js/modules/es.number.is-integer.js");
+
+require("core-js/modules/es.number.is-nan.js");
+
+require("core-js/modules/es.number.is-safe-integer.js");
+
+require("core-js/modules/es.number.max-safe-integer.js");
+
+require("core-js/modules/es.number.min-safe-integer.js");
+
+require("core-js/modules/es.number.parse-float.js");
+
+require("core-js/modules/es.number.parse-int.js");
+
+require("core-js/modules/es.number.to-fixed.js");
+
+require("core-js/modules/es.object.assign.js");
+
+require("core-js/modules/es.object.define-getter.js");
+
+require("core-js/modules/es.object.define-setter.js");
+
+require("core-js/modules/es.object.entries.js");
+
+require("core-js/modules/es.object.freeze.js");
+
+require("core-js/modules/es.object.from-entries.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
+require("core-js/modules/es.object.get-own-property-names.js");
+
+require("core-js/modules/es.object.get-prototype-of.js");
+
+require("core-js/modules/es.object.is.js");
+
+require("core-js/modules/es.object.is-extensible.js");
+
+require("core-js/modules/es.object.is-frozen.js");
+
+require("core-js/modules/es.object.is-sealed.js");
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.object.lookup-getter.js");
+
+require("core-js/modules/es.object.lookup-setter.js");
+
+require("core-js/modules/es.object.prevent-extensions.js");
+
+require("core-js/modules/es.object.seal.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.object.values.js");
+
+require("core-js/modules/es.promise.js");
+
+require("core-js/modules/es.promise.finally.js");
+
+require("core-js/modules/es.reflect.apply.js");
+
+require("core-js/modules/es.reflect.construct.js");
+
+require("core-js/modules/es.reflect.define-property.js");
+
+require("core-js/modules/es.reflect.delete-property.js");
+
+require("core-js/modules/es.reflect.get.js");
+
+require("core-js/modules/es.reflect.get-own-property-descriptor.js");
+
+require("core-js/modules/es.reflect.get-prototype-of.js");
+
+require("core-js/modules/es.reflect.has.js");
+
+require("core-js/modules/es.reflect.is-extensible.js");
+
+require("core-js/modules/es.reflect.own-keys.js");
+
+require("core-js/modules/es.reflect.prevent-extensions.js");
+
+require("core-js/modules/es.reflect.set.js");
+
+require("core-js/modules/es.reflect.set-prototype-of.js");
+
+require("core-js/modules/es.regexp.constructor.js");
+
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.regexp.flags.js");
+
+require("core-js/modules/es.regexp.to-string.js");
+
+require("core-js/modules/es.set.js");
+
+require("core-js/modules/es.string.code-point-at.js");
+
+require("core-js/modules/es.string.ends-with.js");
+
+require("core-js/modules/es.string.from-code-point.js");
+
+require("core-js/modules/es.string.includes.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.string.match.js");
+
+require("core-js/modules/es.string.pad-end.js");
+
+require("core-js/modules/es.string.pad-start.js");
+
+require("core-js/modules/es.string.raw.js");
+
+require("core-js/modules/es.string.repeat.js");
+
+require("core-js/modules/es.string.replace.js");
+
+require("core-js/modules/es.string.search.js");
+
+require("core-js/modules/es.string.split.js");
+
+require("core-js/modules/es.string.starts-with.js");
+
+require("core-js/modules/es.string.trim.js");
+
+require("core-js/modules/es.string.trim-end.js");
+
+require("core-js/modules/es.string.trim-start.js");
+
+require("core-js/modules/es.string.anchor.js");
+
+require("core-js/modules/es.string.big.js");
+
+require("core-js/modules/es.string.blink.js");
+
+require("core-js/modules/es.string.bold.js");
+
+require("core-js/modules/es.string.fixed.js");
+
+require("core-js/modules/es.string.fontcolor.js");
+
+require("core-js/modules/es.string.fontsize.js");
+
+require("core-js/modules/es.string.italics.js");
+
+require("core-js/modules/es.string.link.js");
+
+require("core-js/modules/es.string.small.js");
+
+require("core-js/modules/es.string.strike.js");
+
+require("core-js/modules/es.string.sub.js");
+
+require("core-js/modules/es.string.sup.js");
+
+require("core-js/modules/es.typed-array.float32-array.js");
+
+require("core-js/modules/es.typed-array.float64-array.js");
+
+require("core-js/modules/es.typed-array.int8-array.js");
+
+require("core-js/modules/es.typed-array.int16-array.js");
+
+require("core-js/modules/es.typed-array.int32-array.js");
+
+require("core-js/modules/es.typed-array.uint8-array.js");
+
+require("core-js/modules/es.typed-array.uint8-clamped-array.js");
+
+require("core-js/modules/es.typed-array.uint16-array.js");
+
+require("core-js/modules/es.typed-array.uint32-array.js");
+
+require("core-js/modules/es.typed-array.copy-within.js");
+
+require("core-js/modules/es.typed-array.every.js");
+
+require("core-js/modules/es.typed-array.fill.js");
+
+require("core-js/modules/es.typed-array.filter.js");
+
+require("core-js/modules/es.typed-array.find.js");
+
+require("core-js/modules/es.typed-array.find-index.js");
+
+require("core-js/modules/es.typed-array.for-each.js");
+
+require("core-js/modules/es.typed-array.from.js");
+
+require("core-js/modules/es.typed-array.includes.js");
+
+require("core-js/modules/es.typed-array.index-of.js");
+
+require("core-js/modules/es.typed-array.iterator.js");
+
+require("core-js/modules/es.typed-array.join.js");
+
+require("core-js/modules/es.typed-array.last-index-of.js");
+
+require("core-js/modules/es.typed-array.map.js");
+
+require("core-js/modules/es.typed-array.of.js");
+
+require("core-js/modules/es.typed-array.reduce.js");
+
+require("core-js/modules/es.typed-array.reduce-right.js");
+
+require("core-js/modules/es.typed-array.reverse.js");
+
+require("core-js/modules/es.typed-array.set.js");
+
+require("core-js/modules/es.typed-array.slice.js");
+
+require("core-js/modules/es.typed-array.some.js");
+
+require("core-js/modules/es.typed-array.sort.js");
+
+require("core-js/modules/es.typed-array.subarray.js");
+
+require("core-js/modules/es.typed-array.to-locale-string.js");
+
+require("core-js/modules/es.typed-array.to-string.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/es.weak-set.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/web.immediate.js");
+
+require("core-js/modules/web.queue-microtask.js");
+
+require("core-js/modules/web.url.js");
+
+require("core-js/modules/web.url.to-json.js");
+
+require("core-js/modules/web.url-search-params.js");
+
+require("regenerator-runtime/runtime");
+
+var _react = _interopRequireDefault(require("react"));
+
+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");
+
+var _uiCheckbox = require("@instructure/ui-checkbox");
+
+var _uiSimpleSelect = require("@instructure/ui-simple-select");
+
+var _uiTabs = require("@instructure/ui-tabs");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+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', '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');
+document.body.appendChild(alert);
+
+var getLive = function getLive() {
+  return document.getElementById('alert-live-region');
+};
+
+getLive().setAttribute('role', 'alert');
+
+var screenreaderNotification = function screenreaderNotification(text) {
+  (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
+    screenReaderOnly: true,
+    liveRegion: getLive
+  }, text), alert);
+};
+
+var searchString = window.location.search.slice(1);
+var query = (0, _lodash.fromPairs)(searchString.split('&').map(function (kv) {
+  return kv.split('=');
+}));
+var createJwt = query.jwt || process.env.CREATE_TOKEN;
+var createKindergartenJwt = query.jwt || process.env.CREATE_KINDERGARTEN_TOKEN;
+var createFirstGradeJwt = query.jwt || process.env.CREATE_FIRST_GRADE_TOKEN;
+var reportJwt = query.jwt || process.env.REPORT_TOKEN;
+var outcomesHost = "http://".concat(query.host || window.location.host);
+var _query$artifactType = query.artifactType,
+    artifactType = _query$artifactType === void 0 ? 'quizzes.quiz' : _query$artifactType,
+    _query$artifactId = query.artifactId,
+    artifactId = _query$artifactId === void 0 ? '99' : _query$artifactId;
+
+var DemoAlignment = function DemoAlignment(props) {
+  /* eslint-disable no-console, react/prop-types */
+  var name = props.name,
+      alignmentSetId = props.alignmentSetId,
+      artifactType = props.artifactType,
+      artifactId = props.artifactId,
+      artifactTypeName = props.artifactTypeName,
+      contextUuid = props.contextUuid,
+      emptySetHeading = props.emptySetHeading,
+      displayMasteryDescription = props.displayMasteryDescription,
+      displayMasteryPercentText = props.displayMasteryPercentText,
+      jwt = props.jwt,
+      useAlignmentButton = props.useAlignmentButton;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: styles.item,
+    "data-automation": "artifact"
+  }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+    level: "h3"
+  }, name, " \xA0", /*#__PURE__*/_react.default.createElement(_index.OutcomeCount, {
+    alignmentSetId: alignmentSetId,
+    artifactType: artifactType,
+    artifactId: artifactId,
+    contextUuid: contextUuid,
+    host: outcomesHost,
+    jwt: jwt
+  })), /*#__PURE__*/_react.default.createElement(_index.OutcomeList, {
+    alignmentSetId: alignmentSetId,
+    artifactType: artifactType,
+    artifactId: artifactId,
+    contextUuid: contextUuid,
+    host: outcomesHost,
+    jwt: jwt,
+    emptyText: "No outcomes are aligned"
+  }), useAlignmentButton ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_index.AlignmentButton, {
+    artifactType: artifactType,
+    artifactTypeName: artifactTypeName,
+    artifactId: artifactId,
+    alignmentSetId: alignmentSetId,
+    contextUuid: contextUuid,
+    host: outcomesHost,
+    jwt: jwt,
+    liveRegion: getLive,
+    screenreaderNotification: screenreaderNotification,
+    readOnly: readOnly === 'true'
+  })) : /*#__PURE__*/_react.default.createElement(_index.OutcomeAlignments, {
+    alignmentSetId: alignmentSetId,
+    pickerType: currentPicker,
+    contextUuid: contextUuid,
+    emptySetHeading: emptySetHeading,
+    onUpdate: console.log,
+    artifactType: artifactType,
+    artifactId: artifactId,
+    artifactTypeName: artifactTypeName,
+    displayMasteryDescription: displayMasteryDescription,
+    displayMasteryPercentText: displayMasteryPercentText,
+    host: outcomesHost,
+    jwt: jwt,
+    screenreaderNotification: screenreaderNotification,
+    liveRegion: getLive,
+    readOnly: readOnly === 'true'
+  }));
+};
+
+var currentPicker = 'dialog';
+var currentTheme = (_process = process) !== null && _process !== void 0 && (_process$env = _process.env) !== null && _process$env !== void 0 && _process$env.DEFAULT_HIGH_CONTRAST ? 'canvas-high-contrast' : 'canvas';
+var readOnly = 'false';
+var currentTab = 'alignments';
+
+var reset = function reset() {
+  (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement("div", null), root);
+  rerender();
+};
+
+var handleThemeChange = function handleThemeChange(_, _ref) {
+  var theme = _ref.value;
+  currentTheme = theme;
+  reset();
+};
+
+var handlePickerChange = function handlePickerChange(_, _ref2) {
+  var picker = _ref2.value;
+  currentPicker = picker;
+  reset();
+};
+
+var handleReadOnlyChange = function handleReadOnlyChange(_, _ref3) {
+  var value = _ref3.value;
+  readOnly = value;
+  reset();
+};
+
+var showRollups = true;
+
+function handleShowRollupsChange() {
+  showRollups = !showRollups;
+  rerender();
+}
+
+var handleTabChange = function handleTabChange(_, _ref4) {
+  var id = _ref4.id;
+  currentTab = id;
+  rerender();
+};
+
+function rerender() {
+  (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_uiThemeable.ApplyTheme, {
+    theme: _uiThemeable.ApplyTheme.generateTheme(currentTheme)
+  }, /*#__PURE__*/_react.default.createElement(_uiTabs.Tabs, {
+    onRequestTabChange: handleTabChange
+  }, /*#__PURE__*/_react.default.createElement(_uiTabs.Tabs.Panel, {
+    id: "alignments",
+    renderTitle: "Alignments",
+    selected: currentTab === 'alignments'
+  }, /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect, {
+    renderLabel: "Picker",
+    onChange: handlePickerChange,
+    value: currentPicker,
+    "data-automation": "demoAlignment__pickerSelect"
+  }, /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect.Option, {
+    id: "dialog",
+    value: "dialog"
+  }, "Dialog Picker"), /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect.Option, {
+    id: "tray",
+    value: "tray"
+  }, "Tray Picker")), /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect, {
+    renderLabel: "Read only",
+    onChange: handleReadOnlyChange,
+    value: readOnly
+  }, /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect.Option, {
+    id: "true",
+    key: "true",
+    value: "true"
+  }, "true"), /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect.Option, {
+    id: "false",
+    key: "false",
+    value: "false"
+  }, "false")), /*#__PURE__*/_react.default.createElement(DemoAlignment, {
+    name: "Quiz #99",
+    alignmentSetId: "d15f9530-81af-4ab5-9da7-7b49ee1aac0d",
+    artifactType: artifactType,
+    artifactId: artifactId,
+    contextUuid: "dummy_uuid",
+    emptySetHeading: "Align Institution outcomes to this quiz.",
+    displayMasteryDescription: true,
+    displayMasteryPercentText: true,
+    artifactTypeName: "Quiz",
+    jwt: createJwt
+  }), /*#__PURE__*/_react.default.createElement(DemoAlignment, {
+    alignmentSetId: "",
+    name: "Question #100",
+    contextUuid: "dummy_uuid",
+    artifactType: "quizzes.item",
+    artifactId: "100",
+    emptySetHeading: "Align Institution outcomes to this question.",
+    jwt: createJwt
+  }), /*#__PURE__*/_react.default.createElement(DemoAlignment, {
+    alignmentSetId: "",
+    name: "Kindergarten Science Question #101",
+    artifactType: "quizzes.item",
+    artifactId: "101",
+    contextUuid: "K-science",
+    emptySetHeading: "Align Institution outcomes to this question.",
+    jwt: createKindergartenJwt
+  }), /*#__PURE__*/_react.default.createElement(DemoAlignment, {
+    alignmentSetId: "",
+    name: "First Grade Science Question #102",
+    artifactType: "quizzes.item",
+    artifactId: "102",
+    contextUuid: "1-science",
+    emptySetHeading: "Align Institution outcomes to this question.",
+    jwt: createFirstGradeJwt
+  }), /*#__PURE__*/_react.default.createElement(DemoAlignment, {
+    alignmentSetId: "",
+    useAlignmentButton: true,
+    name: "Quiz #103",
+    artifactType: "quizzes.quiz",
+    artifactId: "103",
+    contextUuid: "dummy_uuid",
+    emptySetHeading: "Align Institution outcomes to this quiz.",
+    jwt: createJwt,
+    alignmentWidget: _index.AlignmentButton
+  })), /*#__PURE__*/_react.default.createElement(_uiTabs.Tabs.Panel, {
+    selected: currentTab === 'report',
+    renderTitle: "Report",
+    textAlign: "center",
+    id: "report"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      backgroundColor: 'lightgrey'
+    }
+  }, /*#__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, {
+    artifactType: artifactType,
+    artifactId: artifactId,
+    host: outcomesHost,
+    jwt: reportJwt,
+    scope: "report",
+    contextUuid: "dummy_uuid",
+    showRollups: showRollups
+  })))), /*#__PURE__*/_react.default.createElement(_uiTabs.Tabs.Panel, {
+    title: "Theme",
+    textAlign: "center",
+    id: "theme",
+    selected: currentTab === 'theme'
+  }, /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect, {
+    renderLabel: "Theme",
+    onChange: handleThemeChange,
+    value: currentTheme
+  }, themes.map(function (themeKey) {
+    return /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect.Option, {
+      id: themeKey,
+      key: themeKey,
+      value: themeKey
+    }, themeKey);
+  }))))), root);
+}
+
+rerender();