@instructure/outcomes-ui 2.1.0 → 2.1.3

package/es/translated/vi/components/OutcomeViewModal/index.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, CloseButton } from '@instructure/ui-buttons';
+import { Text } from '@instructure/ui-text';
+import { Heading } from '@instructure/ui-heading';
+import { Modal } from '@instructure/ui-modal';
+import { Focusable } from '@instructure/ui-focusable';
+import { View } from '@instructure/ui-view';
+import ConnectedOutcomeView from "../../containers/ConnectedOutcomeView.js";
+var ModalHeader = Modal.Header,
+    ModalBody = Modal.Body,
+    ModalFooter = Modal.Footer;
+
+var OutcomeViewModal = function OutcomeViewModal(props) {
+  var header = props.header,
+      outcome = props.outcome,
+      outcomeResult = props.outcomeResult,
+      artifactTypeName = props.artifactTypeName,
+      displayMasteryDescription = props.displayMasteryDescription,
+      displayMasteryPercentText = props.displayMasteryPercentText,
+      scope = props.scope;
+  var title = outcome.title,
+      description = outcome.description,
+      scoringMethod = outcome.scoring_method,
+      friendlyDescription = outcome.friendly_description;
+  var scoringTiers = outcome.scoring_method ? outcome.scoring_method.scoring_tiers : [];
+  return /*#__PURE__*/React.createElement(Modal, {
+    open: props.isOpen,
+    shouldCloseOnDocumentClick: true,
+    onDismiss: function onDismiss() {
+      return props.closeAlignment();
+    },
+    onClose: function onClose() {
+      props.closeAlignment();
+    },
+    transition: "fade",
+    size: "fullscreen",
+    label: "K\u1EBFt Qu\u1EA3",
+    zIndex: "9999",
+    "data-automation": "outcomeView__modal"
+  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(CloseButton, {
+    offset: "medium",
+    onClick: function onClick() {
+      return props.closeAlignment();
+    },
+    placement: "end",
+    variant: "icon",
+    "data-automation": "outcomeView__closeButton"
+  }, "\u0110\xF3ng"), /*#__PURE__*/React.createElement(Heading, null, /*#__PURE__*/React.createElement(Text, {
+    size: "large",
+    "data-automation": "outcomeView__header"
+  }, header || "Xem K\u1EBFt Qu\u1EA3"))), /*#__PURE__*/React.createElement(ModalBody, {
+    padding: "none"
+  }, /*#__PURE__*/React.createElement(Focusable, null, function (_ref) {
+    var focusVisible = _ref.focusVisible;
+    return /*#__PURE__*/React.createElement(View, {
+      as: "div",
+      tabIndex: "0",
+      padding: "medium",
+      position: "relative",
+      focusPosition: "inset",
+      withFocusOutline: focusVisible
+    }, /*#__PURE__*/React.createElement(ConnectedOutcomeView, {
+      scope: scope,
+      description: description,
+      title: title,
+      scoringMethod: scoringMethod,
+      scoringTiers: scoringTiers,
+      artifactTypeName: artifactTypeName,
+      displayMasteryDescription: displayMasteryDescription,
+      displayMasteryPercentText: displayMasteryPercentText,
+      outcomeResult: outcomeResult,
+      friendlyDescription: friendlyDescription
+    }));
+  })), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return props.closeAlignment();
+    },
+    variant: "primary",
+    "data-automation": "outcomeView__submitButton"
+  }, "OK")));
+};
+
+OutcomeViewModal.propTypes = {
+  outcome: PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    description: PropTypes.string,
+    scoring_method: PropTypes.object,
+    friendly_description: PropTypes.string
+  }).isRequired,
+  outcomeResult: PropTypes.object,
+  closeAlignment: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  artifactTypeName: PropTypes.string,
+  displayMasteryDescription: PropTypes.bool,
+  displayMasteryPercentText: PropTypes.bool,
+  header: PropTypes.string,
+  scope: PropTypes.string.isRequired
+};
+OutcomeViewModal.defaultProps = {
+  outcomeResult: null,
+  artifactTypeName: null,
+  displayMasteryDescription: false,
+  displayMasteryPercentText: false,
+  header: null
+};
+export default OutcomeViewModal;

package/es/translated/vi/components/OutcomeViewModal/index.stories.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { object, boolean } from '@storybook/addon-knobs';
+import { outcomeWithoutResults, outcomeViewWithResults, outcomeRollup } from "../../../.storybook/constants.js";
+import OutcomeViewModal from "./index.js";
+export default {
+  title: 'OutcomeViewModal'
+};
+export var noResults = function noResults() {
+  return /*#__PURE__*/React.createElement(OutcomeViewModal, {
+    outcome: object('Outcome', outcomeWithoutResults),
+    closeAlignment: function closeAlignment() {},
+    isOpen: true,
+    artifactTypeName: "Quiz",
+    displayMasteryDescription: boolean('Display Mastery Description', true),
+    displayMasteryPercentText: boolean('Display Mastery Percent Text', true)
+  });
+};
+export var results = function results() {
+  return /*#__PURE__*/React.createElement(OutcomeViewModal, {
+    outcome: object('Outcome', outcomeViewWithResults),
+    outcomeResult: object('Outcome Result', outcomeRollup),
+    closeAlignment: function closeAlignment() {},
+    isOpen: true,
+    artifactTypeName: "Quiz",
+    displayMasteryDescription: boolean('Display Mastery Description', true),
+    displayMasteryPercentText: boolean('Display Mastery Percent Text', true)
+  });
+};

package/es/translated/vi/components/OutcomesPerStudent/Header/__tests__/index.test.js

@@ -0,0 +1,82 @@
+import { expect } from 'chai';
+import React from 'react';
+import sinon from 'sinon';
+import { shallow, mount } from 'enzyme';
+import Header from "../index.js";
+var styles = {
+  componentId: 'fbTpU',
+  template: function template(theme) {
+    return "\n\n.outcomes-ui__Header--header {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  font-weight: normal;\n  line-height: 1.3rem;\n  text-align: left;\n}\n\n[dir=\"ltr\"] .outcomes-ui__Header--header {\n  text-align: left;\n}\n\n[dir=\"rtl\"] .outcomes-ui__Header--header {\n  text-align: left;\n}\n";
+  },
+  'header': 'outcomes-ui__Header--header'
+};
+import checkA11y from "../../../../test/checkA11y.js";
+describe('OutcomesPerStudent/Header', function () {
+  function makeProps(props) {
+    return Object.assign({
+      outcomeResult: {
+        outcome: {
+          id: '1',
+          label: 'FOO'
+        },
+        count: 10,
+        mastery_count: 5,
+        childArtifactCount: 12
+      },
+      viewReportAlignment: sinon.spy(),
+      getReportOutcome: sinon.stub().returns({
+        id: '1',
+        label: 'FOO',
+        title: 'bar'
+      }),
+      isOpen: false,
+      closeReportAlignment: sinon.spy()
+    }, props);
+  }
+
+  it('includes a details object', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Header, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('HeaderDetails')).to.have.length(1);
+  });
+  it('renders outcome link with title', function () {
+    var props = makeProps();
+    var wrapper = mount( /*#__PURE__*/React.createElement(Header, props));
+    expect(wrapper.text()).to.match(/bar/);
+  });
+  it('calls viewReportAlignment when the link is clicked', function () {
+    var props = makeProps();
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Header, props), {
+      disableLifecycleMethods: true
+    });
+    var link = wrapper.find(".".concat(styles.header)).find('Link');
+    link.simulate('click');
+    expect(props.viewReportAlignment.calledOnce).to.be.true;
+  });
+  it('conditionally renders tooltip based on state.showTooltip', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Header, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('Tooltip')).to.have.length(0);
+    wrapper.setState({
+      showTooltip: true
+    });
+    expect(wrapper.find('Tooltip')).to.have.length(1);
+  });
+  it('includes a TruncateText element that can update state', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Header, makeProps()));
+    expect(wrapper.find('TruncateText')).to.have.length(1);
+    wrapper.find('TruncateText').props().onUpdate(true);
+    expect(wrapper.state().showTooltip).to.equal(true);
+  });
+  it('includes a AccessibleContent element', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Header, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('AccessibleContent')).to.have.length(1);
+  });
+  it('meets a11y standards', function () {
+    return checkA11y( /*#__PURE__*/React.createElement(Header, makeProps()));
+  });
+});

package/es/translated/vi/components/OutcomesPerStudent/Header/index.js

@@ -0,0 +1,112 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _dec, _class, _class2, _temp;
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { AccessibleContent, PresentationContent } from '@instructure/ui-a11y-content';
+import { Text } from '@instructure/ui-text';
+import { Link } from '@instructure/ui-link';
+import { Tooltip } from '@instructure/ui-tooltip';
+import { themeable } from '@instructure/ui-themeable';
+import { TruncateText } from '@instructure/ui-truncate-text';
+import OutcomeViewModal from "../../OutcomeViewModal/index.js";
+import HeaderDetails from "../HeaderDetails/index.js";
+import theme from "../../theme.js";
+var styles = {
+  componentId: 'fbTpU',
+  template: function template(theme) {
+    return "\n\n.outcomes-ui__Header--header {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  font-weight: normal;\n  line-height: 1.3rem;\n  text-align: left;\n}\n\n[dir=\"ltr\"] .outcomes-ui__Header--header {\n  text-align: left;\n}\n\n[dir=\"rtl\"] .outcomes-ui__Header--header {\n  text-align: left;\n}\n";
+  },
+  'header': 'outcomes-ui__Header--header'
+};
+var Header = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inherits(Header, _React$Component);
+
+  var _super = _createSuper(Header);
+
+  // eslint-disable-next-line no-undef
+  // eslint-disable-next-line no-undef
+  function Header(props) {
+    var _this;
+
+    _classCallCheck(this, Header);
+
+    _this = _super.call(this, props);
+
+    _this.renderTitle = function (outcome) {
+      var viewReportAlignment = _this.props.viewReportAlignment;
+      return /*#__PURE__*/React.createElement(Link, {
+        onClick: viewReportAlignment
+      }, /*#__PURE__*/React.createElement(Text, {
+        size: "medium",
+        transform: "uppercase"
+      }, /*#__PURE__*/React.createElement(TruncateText, {
+        maxLines: 1,
+        position: 'middle',
+        onUpdate: function onUpdate(isTruncated) {
+          return _this.setState({
+            showTooltip: isTruncated
+          });
+        }
+      }, /*#__PURE__*/React.createElement(AccessibleContent, {
+        alt: outcome.title
+      }, outcome.title))));
+    };
+
+    _this.state = {
+      showTooltip: false
+    };
+    return _this;
+  }
+
+  _createClass(Header, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          outcomeResult = _this$props.outcomeResult,
+          getReportOutcome = _this$props.getReportOutcome,
+          isOpen = _this$props.isOpen,
+          closeReportAlignment = _this$props.closeReportAlignment,
+          showRollups = _this$props.showRollups,
+          scope = _this$props.scope;
+      var showTooltip = this.state.showTooltip;
+      var outcome = getReportOutcome(outcomeResult.outcomeId);
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.header
+      }, showTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
+        tip: outcome.title,
+        placement: "bottom",
+        variant: "inverse"
+      }, this.renderTitle(outcome)) : this.renderTitle(outcome), /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement(HeaderDetails, {
+        outcomeResult: outcomeResult,
+        showRollups: showRollups
+      })), /*#__PURE__*/React.createElement(OutcomeViewModal, {
+        header: "Chi Ti\u1EBFt K\u1EBFt Qu\u1EA3",
+        outcome: outcome,
+        outcomeResult: outcomeResult,
+        closeAlignment: closeReportAlignment,
+        isOpen: isOpen,
+        scope: scope,
+        displayMasteryDescription: true
+      }));
+    }
+  }]);
+
+  Header.displayName = "Header";
+  return Header;
+}(React.Component), _class2.propTypes = {
+  outcomeResult: PropTypes.object.isRequired,
+  getReportOutcome: PropTypes.func.isRequired,
+  viewReportAlignment: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  closeReportAlignment: PropTypes.func.isRequired,
+  scope: PropTypes.string.isRequired,
+  showRollups: PropTypes.bool
+}, _class2.defaultProps = {
+  showRollups: true
+}, _temp)) || _class);
+export { Header as default };

package/es/translated/vi/components/OutcomesPerStudent/Header/index.stories.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { object, boolean } from '@storybook/addon-knobs';
+import { basicOutcome, outcomeRollup } from "../../../../.storybook/constants.js";
+import Header from "./index.js";
+export default {
+  title: 'OutcomesPerStudent Header'
+};
+export var standard = function standard() {
+  return /*#__PURE__*/React.createElement(Header, {
+    outcomeResult: object('Result Summary', outcomeRollup),
+    getReportOutcome: function getReportOutcome() {
+      return object('Outcome', basicOutcome);
+    },
+    viewReportAlignment: function viewReportAlignment() {},
+    isOpen: boolean('Is Open', false),
+    closeReportAlignment: function closeReportAlignment() {},
+    showRollups: boolean('Show Rollups', true)
+  });
+};

package/es/translated/vi/components/OutcomesPerStudent/Header/styles.css

@@ -0,0 +1,8 @@
+.header {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  font-weight: normal;
+  line-height: 1.3rem;
+  text-align: left;
+}

package/es/translated/vi/components/OutcomesPerStudent/HeaderDetails/__tests__/index.test.js

@@ -0,0 +1,105 @@
+import { expect } from 'chai';
+import React from 'react';
+import sinon from 'sinon';
+import { shallow, mount } from 'enzyme';
+import HeaderDetails from "../index.js";
+var styles = {
+  componentId: 'ffgIr',
+  template: function template(theme) {
+    return "\n\n.outcomes-ui__HeaderDetails--numQuestions {\n  box-sizing: border-box;\n  height: 1.5rem;\n  text-align: left;\n}\n\n[dir=\"ltr\"] .outcomes-ui__HeaderDetails--numQuestions {\n  text-align: left;\n}\n\n[dir=\"rtl\"] .outcomes-ui__HeaderDetails--numQuestions {\n  text-align: left;\n}\n\n.outcomes-ui__HeaderDetails--masteryBarDetails {\n  display: flex;\n  justify-content: space-between;\n}\n";
+  },
+  'numQuestions': 'outcomes-ui__HeaderDetails--numQuestions',
+  'masteryBarDetails': 'outcomes-ui__HeaderDetails--masteryBarDetails'
+};
+import checkA11y from "../../../../test/checkA11y.js";
+describe('OutcomesPerStudent/HeaderDetails', function () {
+  function makeProps(props) {
+    return Object.assign({
+      outcomeResult: {
+        outcome: {
+          id: '1',
+          label: 'FOO'
+        },
+        count: 10,
+        mastery_count: 5,
+        childArtifactCount: 12
+      },
+      viewReportAlignment: sinon.spy(),
+      getReportOutcome: sinon.stub().returns({
+        id: '1',
+        label: 'FOO',
+        title: 'bar'
+      }),
+      isOpen: false,
+      closeReportAlignment: sinon.spy(),
+      showRollups: true
+    }, props);
+  }
+
+  it('includes a progress bar', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(HeaderDetails, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('ProgressBar')).to.have.length(1);
+  });
+  it('hides the progress bar when rollups are hidden', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(HeaderDetails, makeProps({
+      showRollups: false
+    })), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('ProgressBar')).to.have.length(0);
+  });
+  it('includes the rollup summary', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(HeaderDetails, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find(".".concat(styles.masteryBarDetails)).find('Text')).to.have.length(2);
+  });
+  it('hides the rollup summary when rollups are hidden', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(HeaderDetails, makeProps({
+      showRollups: false
+    })), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find(".".concat(styles.masteryBarDetails))).to.have.length(0);
+  });
+  it('does include tooltip', function () {
+    var withUsesBank = {
+      outcomeResult: {
+        outcome: {
+          id: '1',
+          label: 'FOO'
+        },
+        count: 10,
+        mastery_count: 5,
+        childArtifactCount: 12,
+        usesBank: true
+      }
+    };
+    var wrapper = shallow( /*#__PURE__*/React.createElement(HeaderDetails, makeProps(withUsesBank)), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('Tooltip')).to.have.length(1);
+  });
+  it('does not include tooltip', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(HeaderDetails, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('Tooltip')).to.have.length(0);
+  });
+  it('includes the count of aligned items', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(HeaderDetails, makeProps()));
+    expect(wrapper.text()).to.match(/12 Questions/);
+  });
+  it('does not include the count of aligned items if not specified', function () {
+    var props = makeProps();
+    props.outcomeResult.childArtifactCount = null; // eslint-disable-line immutable/no-mutation
+
+    var wrapper = mount( /*#__PURE__*/React.createElement(HeaderDetails, props));
+    expect(wrapper.text()).not.to.match(/Questions/);
+  });
+  it('meets a11y standards', function () {
+    return checkA11y( /*#__PURE__*/React.createElement(HeaderDetails, makeProps()));
+  });
+});

package/es/translated/vi/components/OutcomesPerStudent/HeaderDetails/index.js

@@ -0,0 +1,98 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _default_vi_number = Intl.NumberFormat("vi", { style: "decimal" }).format,
+    _dec,
+    _class,
+    _class2,
+    _temp;
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { themeable } from '@instructure/ui-themeable';
+import { Text } from '@instructure/ui-text';
+import { ProgressBar } from '@instructure/ui-progress';
+import { Tooltip } from '@instructure/ui-tooltip';
+import theme from "../../theme.js";
+var styles = {
+  componentId: 'ffgIr',
+  template: function template(theme) {
+    return "\n\n.outcomes-ui__HeaderDetails--numQuestions {\n  box-sizing: border-box;\n  height: 1.5rem;\n  text-align: left;\n}\n\n[dir=\"ltr\"] .outcomes-ui__HeaderDetails--numQuestions {\n  text-align: left;\n}\n\n[dir=\"rtl\"] .outcomes-ui__HeaderDetails--numQuestions {\n  text-align: left;\n}\n\n.outcomes-ui__HeaderDetails--masteryBarDetails {\n  display: flex;\n  justify-content: space-between;\n}\n";
+  },
+  'numQuestions': 'outcomes-ui__HeaderDetails--numQuestions',
+  'masteryBarDetails': 'outcomes-ui__HeaderDetails--masteryBarDetails'
+};
+
+var numQuestionsText = function numQuestionsText(count, usesBank) {
+  var _s, _n;
+
+  if (count === null || count === void 0) {
+    return null;
+  }
+
+  if (usesBank) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      tip: "Thay \u0111\u1ED5i do l\u1EF1a ch\u1ECDn T\u1EA5t c\u1EA3/Ng\u1EABu nhi\xEAn t\u1EEB ng\xE2n h\xE0ng c\xE2u h\u1ECFi",
+      variant: "inverse"
+    }, "C\xE2u H\u1ECFi Thay \u0110\u1ED5i");
+  }
+
+  return _default_vi_number(count) + " C\xE2u H\u1ECFi";
+};
+
+var HeaderDetails = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inherits(HeaderDetails, _React$Component);
+
+  var _super = _createSuper(HeaderDetails);
+
+  function HeaderDetails() {
+    _classCallCheck(this, HeaderDetails);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(HeaderDetails, [{
+    key: "render",
+    value: // eslint-disable-next-line no-undef
+    function render() {
+      var _this$props = this.props,
+          outcomeResult = _this$props.outcomeResult,
+          showRollups = _this$props.showRollups;
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+        className: styles.numQuestions,
+        "data-automation": "outcomesPerStudent__numQuestions"
+      }, /*#__PURE__*/React.createElement(Text, {
+        size: "small"
+      }, numQuestionsText(outcomeResult.childArtifactCount, outcomeResult.usesBank))), showRollups ? this.renderRollup(outcomeResult) : null);
+    }
+  }, {
+    key: "renderRollup",
+    value: function renderRollup(outcomeResult) {
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ProgressBar, {
+        size: "x-small",
+        screenReaderLabel: outcomeResult.masteryCount + " / " + outcomeResult.count + " \u0111\u1EA1t m\u1EE9c th\xE0nh th\u1EA1o",
+        meterColor: "success",
+        valueMax: outcomeResult.count,
+        valueNow: outcomeResult.masteryCount
+      }), /*#__PURE__*/React.createElement("div", {
+        className: styles.masteryBarDetails,
+        "data-automation": "outcomesPerStudent__masteryBarDetails"
+      }, /*#__PURE__*/React.createElement(Text, {
+        size: "x-small",
+        "data-automation": "outcomesPerStudent__masteryCount"
+      }, "Th\xE0nh Th\u1EA1o " + outcomeResult.masteryCount), /*#__PURE__*/React.createElement(Text, {
+        size: "x-small",
+        "data-automation": "outcomesPerStudent__noMasteryCount"
+      }, "Kh\xF4ng \u0110\u1EA1t " + (outcomeResult.count - outcomeResult.masteryCount))));
+    }
+  }]);
+
+  HeaderDetails.displayName = "HeaderDetails";
+  return HeaderDetails;
+}(React.Component), _class2.propTypes = {
+  outcomeResult: PropTypes.object.isRequired,
+  showRollups: PropTypes.bool.isRequired
+}, _temp)) || _class);
+export { HeaderDetails as default };

package/es/translated/vi/components/OutcomesPerStudent/HeaderDetails/index.stories.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { object, boolean } from '@storybook/addon-knobs';
+import { outcomeRollup } from "../../../../.storybook/constants.js";
+import HeaderDetails from "./index.js";
+export default {
+  title: 'OutcomesPerStudent HeaderDetails'
+};
+export var standard = function standard() {
+  return /*#__PURE__*/React.createElement(HeaderDetails, {
+    outcomeResult: object('Result Summary', outcomeRollup),
+    showRollups: boolean('Show Rollups', true)
+  });
+};

package/es/translated/vi/components/OutcomesPerStudent/HeaderDetails/styles.css

@@ -0,0 +1,10 @@
+.numQuestions {
+  box-sizing: border-box;
+  height: 1.5rem;
+  text-align: left;
+}
+
+.masteryBarDetails {
+  display: flex;
+  justify-content: space-between;
+}

package/es/translated/vi/components/OutcomesPerStudent/Score/__tests__/index.test.js

@@ -0,0 +1,66 @@
+import { expect } from 'chai';
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import { IconStarSolid } from '@instructure/ui-icons';
+import Score from "../index.js";
+import checkA11y from "../../../../test/checkA11y.js";
+describe('OutcomesPerStudent/Score', function () {
+  function makeProps() {
+    return {
+      score: {
+        percentScore: 0.5,
+        points: 5,
+        pointsPossible: 10
+      },
+      outcome: {
+        scoring_method: {
+          mastery_percent: 0.4
+        }
+      }
+    };
+  }
+
+  it('includes the score', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Score, makeProps()));
+    expect(wrapper.text()).to.match(/5\/10/);
+  });
+  it('does not include the score if no score provided', function () {
+    var noPoints = {
+      score: null,
+      outcome: {
+        scoring_method: {
+          mastery_percent: 0.4
+        }
+      }
+    };
+    var wrapper = mount( /*#__PURE__*/React.createElement(Score, noPoints));
+    expect(wrapper.children()).to.have.length(0);
+  });
+  it('includes a star if percentScore is greater than mastery', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Score, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find(IconStarSolid)).to.have.length(1);
+  });
+  it('includes a star if percentScore is equal to mastery', function () {
+    var props = makeProps();
+    props.score.percentScore = 0.4; // eslint-disable-line immutable/no-mutation
+
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Score, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find(IconStarSolid)).to.have.length(1);
+  });
+  it('does not include a star if percentScore is less than mastery', function () {
+    var props = makeProps();
+    props.score.percentScore = 0.1; // eslint-disable-line immutable/no-mutation
+
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Score, props), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find(IconStarSolid)).to.have.length(0);
+  });
+  it('meets a11y standards', function () {
+    return checkA11y( /*#__PURE__*/React.createElement(Score, makeProps()));
+  });
+});