@instructure/outcomes-ui 2.1.2 → 2.1.3

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

@@ -0,0 +1,77 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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 { Text } from '@instructure/ui-text';
+import { IconStarSolid } from '@instructure/ui-icons';
+import classNames from 'classnames';
+import { themeable } from '@instructure/ui-themeable';
+import theme from "../../theme.js";
+var styles = {
+  componentId: 'ctmoA',
+  template: function template(theme) {
+    return "\n\n.outcomes-ui__Score--mastery {\n  color: ".concat(theme.masteryColor || 'inherit', ";\n}\n\n.outcomes-ui__Score--score {\n  box-sizing: border-box;\n  display: flex;\n  height: 4rem;\n}\n\n.outcomes-ui__Score--score .outcomes-ui__Score--scoreText {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n  }\n\n.outcomes-ui__Score--score .outcomes-ui__Score--scoreSpacer {\n    flex-grow: 1;\n  }\n\n.outcomes-ui__Score--score .outcomes-ui__Score--masteryStar {\n    flex-basis: 0;\n    flex-grow: 1;\n    text-align: right;\n    vertical-align: middle;\n    padding-right: 0.5rem;\n    font-size: 1.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n  }\n\n[dir=\"ltr\"] .outcomes-ui__Score--score .outcomes-ui__Score--masteryStar {\n    text-align: right;\n  }\n\n[dir=\"rtl\"] .outcomes-ui__Score--score .outcomes-ui__Score--masteryStar {\n    text-align: right;\n  }\n");
+  },
+  'mastery': 'outcomes-ui__Score--mastery',
+  'score': 'outcomes-ui__Score--score',
+  'scoreText': 'outcomes-ui__Score--scoreText',
+  'scoreSpacer': 'outcomes-ui__Score--scoreSpacer',
+  'masteryStar': 'outcomes-ui__Score--masteryStar'
+};
+var Score = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inherits(Score, _React$Component);
+
+  var _super = _createSuper(Score);
+
+  function Score() {
+    _classCallCheck(this, Score);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Score, [{
+    key: "render",
+    value: // eslint-disable-next-line no-undef
+    function render() {
+      var _classNames;
+
+      var _this$props = this.props,
+          score = _this$props.score,
+          outcome = _this$props.outcome;
+      var mastery = score && score.percentScore >= outcome.scoring_method.mastery_percent;
+      var outerStyle = classNames((_classNames = {}, _defineProperty(_classNames, styles.score, true), _defineProperty(_classNames, styles.mastery, mastery), _classNames));
+      return score && /*#__PURE__*/React.createElement("div", {
+        className: outerStyle
+      }, /*#__PURE__*/React.createElement("span", {
+        className: styles.masteryStar
+      }, mastery && /*#__PURE__*/React.createElement(IconStarSolid, {
+        "data-automation": "outcomesPerStudent__masteryStar"
+      }) // eslint-disable-next-line react/jsx-closing-tag-location
+      ), /*#__PURE__*/React.createElement("div", {
+        className: styles.scoreText
+      }, /*#__PURE__*/React.createElement(Text, {
+        size: "small",
+        "data-automation": "outcomesPerStudent__scoreText"
+      }, score.points, "/", score.pointsPossible), /*#__PURE__*/React.createElement(Text, {
+        size: "small"
+      }, mastery ? "Th\xE0nh Th\u1EA1o" : "Kh\xF4ng \u0110\u1EA1t")), /*#__PURE__*/React.createElement("span", {
+        className: styles.scoreSpacer
+      }));
+    }
+  }]);
+
+  Score.displayName = "Score";
+  return Score;
+}(React.Component), _class2.propTypes = {
+  score: PropTypes.object,
+  outcome: PropTypes.object.isRequired
+}, _class2.defaultProps = {
+  score: null
+}, _temp)) || _class);
+export { Score as default };

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { object } from '@storybook/addon-knobs';
+import { outcomeWithScoring, defaultScore } from "../../../../.storybook/constants.js";
+import Score from "./index.js";
+export default {
+  title: 'OutcomesPerStudent Score'
+};
+export var standard = function standard() {
+  return /*#__PURE__*/React.createElement(Score, {
+    outcome: object('Outcome', outcomeWithScoring),
+    score: object('Score', defaultScore)
+  });
+};

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

@@ -0,0 +1,33 @@
+.mastery {
+  color: var(--masteryColor);
+}
+
+.score {
+  box-sizing: border-box;
+  display: flex;
+  height: 4rem;
+
+  & .scoreText {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+
+  & .scoreSpacer {
+    flex-grow: 1;
+  }
+
+  & .masteryStar {
+    flex-basis: 0;
+    flex-grow: 1;
+    text-align: right;
+    vertical-align: middle;
+    padding-right: 0.5rem;
+    font-size: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+}

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

@@ -0,0 +1,137 @@
+import chai, { expect } from 'chai';
+import React from 'react';
+import sinon from 'sinon';
+import { shallow } from 'enzyme';
+import OutcomesPerStudent from "../index.js";
+import checkA11y from "../../../test/checkA11y.js";
+var styles = {
+  componentId: 'eWGXc',
+  template: function template(theme) {
+    return "\n\n.outcomes-ui__OutcomesPerStudent--reportWrapper {\n  position: relative;\n  padding-left: 13rem;\n}\n\n.outcomes-ui__OutcomesPerStudent--background {\n  background-color: white;\n}\n\n.outcomes-ui__OutcomesPerStudent--table {\n  overflow-x: scroll;\n}\n\n.outcomes-ui__OutcomesPerStudent--headerRow {\n  display: flex;\n  align-items: stretch;\n}\n\n.outcomes-ui__OutcomesPerStudent--corner {\n  position: absolute;\n  box-sizing: border-box;\n  width: 13rem;\n  left: 0;\n  top: auto;\n  font-size: 3rem;\n  font-weight: normal;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n.outcomes-ui__OutcomesPerStudent--headerCell, .outcomes-ui__OutcomesPerStudent--corner {\n  box-sizing: border-box;\n  height: 5.5rem;\n  border-right: ".concat(theme.reportBorder || 'inherit', ";\n  border-bottom: ").concat(theme.reportBorder || 'inherit', ";\n}\n\n.outcomes-ui__OutcomesPerStudent--headerCell {\n  box-sizing: border-box;\n  border-top: ").concat(theme.reportBorder || 'inherit', ";\n  padding: 0.5rem;\n  flex: 1 0 10rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.outcomes-ui__OutcomesPerStudent--loadingSpinner {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  padding: 1.25rem 0.3125rem 1.25rem 0;\n}\n\n.outcomes-ui__OutcomesPerStudent--studentRow {\n  box-sizing: border-box;\n  height: 4rem;\n  display: flex;\n  align-items: stretch;\n}\n\n.outcomes-ui__OutcomesPerStudent--studentName {\n  position: absolute;\n  box-sizing: border-box;\n  left: 0;\n  top: auto;\n  width: 13rem;\n  height: 4rem;\n  padding-left: 0.5rem;\n  border-right: ").concat(theme.reportBorder || 'inherit', ";\n  display: flex;\n  justify-content: flex-start;\n  border-bottom: ").concat(theme.reportBorder || 'inherit', ";\n  align-items: center;\n}\n\n.outcomes-ui__OutcomesPerStudent--studentName .outcomes-ui__OutcomesPerStudent--avatar {\n    padding-right: .5rem;\n  }\n\n.outcomes-ui__OutcomesPerStudent--studentName .outcomes-ui__OutcomesPerStudent--name {\n    text-align: left;\n    text-overflow: ellipsis;\n    overflow-x: hidden;\n    white-space: nowrap;\n  }\n\n[dir=\"ltr\"] .outcomes-ui__OutcomesPerStudent--studentName .outcomes-ui__OutcomesPerStudent--name {\n    text-align: left;\n  }\n\n[dir=\"rtl\"] .outcomes-ui__OutcomesPerStudent--studentName .outcomes-ui__OutcomesPerStudent--name {\n    text-align: left;\n  }\n\n.outcomes-ui__OutcomesPerStudent--scoreCell {\n  box-sizing: border-box;\n  flex: 1 0 10rem;\n  border-bottom: ").concat(theme.reportBorder || 'inherit', ";\n}\n");
+  },
+  'reportWrapper': 'outcomes-ui__OutcomesPerStudent--reportWrapper',
+  'background': 'outcomes-ui__OutcomesPerStudent--background',
+  'table': 'outcomes-ui__OutcomesPerStudent--table',
+  'headerRow': 'outcomes-ui__OutcomesPerStudent--headerRow',
+  'corner': 'outcomes-ui__OutcomesPerStudent--corner',
+  'headerCell': 'outcomes-ui__OutcomesPerStudent--headerCell',
+  'loadingSpinner': 'outcomes-ui__OutcomesPerStudent--loadingSpinner',
+  'studentRow': 'outcomes-ui__OutcomesPerStudent--studentRow',
+  'studentName': 'outcomes-ui__OutcomesPerStudent--studentName',
+  'avatar': 'outcomes-ui__OutcomesPerStudent--avatar',
+  'name': 'outcomes-ui__OutcomesPerStudent--name',
+  'scoreCell': 'outcomes-ui__OutcomesPerStudent--scoreCell'
+};
+chai.use(require('sinon-chai'));
+describe('OutcomesPerStudent/index', function () {
+  function makeProps() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return Object.assign({
+      loadPage: sinon.stub().returns(Promise.resolve()),
+      getReportOutcome: sinon.stub().returns({
+        id: 1,
+        label: 'Foo.PRQ.2',
+        title: 'Learn stuff'
+      }),
+      getScore: sinon.spy(),
+      setError: sinon.spy(),
+      isOpen: sinon.stub().returns(false),
+      viewReportAlignment: sinon.spy(),
+      closeReportAlignment: sinon.spy(),
+      artifactType: 'foo',
+      artifactId: 'bar',
+      hasAnyOutcomes: true,
+      currentPage: 3,
+      pageCount: 5,
+      rollups: [{
+        outcomeId: 101,
+        count: 100,
+        mastery_count: 11,
+        alignedItems: 1
+      }, {
+        outcomeId: 202,
+        alignedItems: 5,
+        mastery_count: 19,
+        count: 20
+      }, {
+        outcomeId: 303,
+        mastery_count: 12,
+        count: 20
+      }],
+      users: [{
+        uuid: 1,
+        full_name: 'Darius Jackson'
+      }, {
+        uuid: 2,
+        full_name: 'Penelope Cooper'
+      }, {
+        uuid: 3,
+        full_name: 'Gerry Gergich'
+      }, {
+        uuid: 4,
+        full_name: 'Slim Pickens'
+      }, {
+        uuid: 5,
+        full_name: 'Sir Darryl Roundtree'
+      }]
+    }, props);
+  }
+
+  it('renders a header for each outcome', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('Header')).to.have.length(3);
+  });
+  it('generates the correct viewReportAlignment method for each header', function () {
+    var props = makeProps();
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomesPerStudent, props), {
+      disableLifecycleMethods: true
+    });
+    var header = wrapper.find('Header').last();
+    var viewReportAlignment = header.prop('viewReportAlignment');
+    viewReportAlignment();
+    expect(props.viewReportAlignment).to.have.been.calledOnce;
+    expect(props.viewReportAlignment).to.have.been.calledWith(303);
+  });
+  it('renders a row for each student', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find(".".concat(styles.studentRow))).to.have.length(5);
+  });
+  it('renders a score for each student score', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('Score')).to.have.length(15);
+  });
+  it('renders pagination', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('PaginationButton')).to.have.length(5);
+  });
+  it('renders the billboard message if no results yet exist', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps({
+      users: [],
+      hasAnyOutcomes: true
+    })), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('Billboard')).to.have.length(1);
+    expect(wrapper.find('Billboard').prop('heading')).to.equal('Looks like you\'re a little early');
+  });
+  it('renders the billboard message if no outcomes are aligned', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps({
+      users: [],
+      hasAnyOutcomes: false
+    })), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('Billboard').prop('heading')).to.equal('There is no report here to show');
+  });
+  it('meets a11y standards', function () {
+    return checkA11y( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps()));
+  });
+});