@instructure/quiz-core 17.49.1-rc.6 → 17.49.1-rc.7

package/es/common/components/layout/sidebar/Sidebar/index.js

@@ -21,9 +21,9 @@ import { View } from '@instructure/ui-view';
 import { themeable } from '@instructure/ui-themeable';
 import { Heading } from '@instructure/ui-heading';
 import t from '@instructure/quiz-i18n/es/format-message';
+import { INSTRUCTIONS_SCROLL_KEY, RESULTS_SCROLL_KEY, SIDEBAR_NAV_ID, TITLE_SCROLL_KEY } from '@instructure/quiz-common';
 import { onPhone } from "../../../../util/windowChecks.js";
 import CustomPropTypes from "../../../../util/CustomPropTypes.js";
-import { SIDEBAR_NAV_ID } from '@instructure/quiz-common';
 import noop from "../../../../util/noop.js";
 import Pin from "./Pin.js";
 var styles = {
@@ -55,7 +55,11 @@ var _ref2 = /*#__PURE__*/React.createElement(IconQuizInstructionsLine, {
   color: "primary"
 });
 
-var _ref3 = /*#__PURE__*/React.createElement(IconPinSolid, null);
+var _ref3 = /*#__PURE__*/React.createElement(IconQuizInstructionsLine, {
+  color: "primary"
+});
+
+var _ref4 = /*#__PURE__*/React.createElement(IconPinSolid, null);
 
 export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(Sidebar, _Component);
@@ -76,13 +80,19 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
     _this.scrollToTitle = function (e) {
       e.preventDefault(); // prevent default link navigation
 
-      _this.props.scrollToItem(null)('title');
+      _this.props.scrollToItem(null)(TITLE_SCROLL_KEY);
     };
 
     _this.scrollToInfo = function (e) {
       e.preventDefault(); // prevent default link navigation
 
-      _this.props.scrollToItem(null)('instructions');
+      _this.props.scrollToItem(null)(INSTRUCTIONS_SCROLL_KEY);
+    };
+
+    _this.scrollToResults = function (e) {
+      e.preventDefault(); // prevent default link navigation
+
+      _this.props.scrollToItem(null)(RESULTS_SCROLL_KEY);
     };
 
     _this.toggleSidebar = function () {
@@ -126,6 +136,10 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
   }, {
     key: "renderTitle",
     value: function renderTitle() {
+      if (this.props.grading) {
+        return;
+      }
+
       return /*#__PURE__*/React.createElement("div", {
         className: styles.actionableInfo
       }, /*#__PURE__*/React.createElement(Link, {
@@ -143,6 +157,10 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
   }, {
     key: "renderInstructions",
     value: function renderInstructions() {
+      if (this.props.grading) {
+        return;
+      }
+
       return /*#__PURE__*/React.createElement("div", {
         className: styles.actionableInfo
       }, /*#__PURE__*/React.createElement(Link, {
@@ -159,6 +177,29 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
         tabIndex: "-1"
       }, t('Instructions'))));
     }
+  }, {
+    key: "renderResults",
+    value: function renderResults() {
+      if (!this.props.grading) {
+        return;
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.actionableInfo
+      }, /*#__PURE__*/React.createElement(Link, {
+        href: "#",
+        margin: "small",
+        forceButtonRole: false,
+        onClick: this.scrollToResults,
+        renderIcon: _ref3,
+        "data-automation": "sidebar-results-button"
+      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Navigate to results'))), /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement("span", {
+        className: styles.description,
+        "data-automation": "sidebar-results-text",
+        onClick: this.scrollToResults,
+        tabIndex: "-1"
+      }, t('Results'))));
+    }
   }, {
     key: "renderSidebarHeader",
     value: function renderSidebarHeader() {
@@ -256,7 +297,7 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
         size: "x-small",
         "aria-label": t('Pinned Questions'),
         role: "img"
-      }, _ref3))), /*#__PURE__*/React.createElement("div", {
+      }, _ref4))), /*#__PURE__*/React.createElement("div", {
         className: closedClasses
       }, pinnedItems.map(function (pin) {
         return /*#__PURE__*/React.createElement(Pin, {
@@ -286,7 +327,7 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
         ,
         onClick: noop,
         id: SIDEBAR_NAV_ID
-      }, this.renderSidebarHeader(), this.renderTotalPointsPossible(), this.renderPinned(), this.renderTitle(), this.renderInstructions(), /*#__PURE__*/React.createElement("div", {
+      }, this.renderSidebarHeader(), this.renderTotalPointsPossible(), this.renderPinned(), this.renderTitle(), this.renderInstructions(), this.renderResults(), /*#__PURE__*/React.createElement("div", {
         className: styles.sidebarContent
       }, this.props.children)))));
     }
@@ -296,6 +337,7 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
   return Sidebar;
 }(Component), _class2.propTypes = {
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element), PropTypes.node]).isRequired,
+  grading: PropTypes.bool,
   taking: PropTypes.bool,
   scrollToItem: CustomPropTypes.higherOrderFunction.isRequired,
   sidebarOpen: PropTypes.bool.isRequired,
@@ -310,6 +352,7 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
   totalPointsPossible: PropTypes.number,
   shouldCloseOnBlur: PropTypes.bool
 }, _class2.defaultProps = {
+  grading: false,
   taking: false,
   title: null,
   pinnedItems: List(),

package/es/common/components/resources/quiz/info/QuizInfo.js

@@ -3,6 +3,7 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component } from 'react';
+import { INSTRUCTIONS_SCROLL_KEY, TITLE_SCROLL_KEY } from '@instructure/quiz-common';
 import ScrollableQuizTitle from "../title/Title.js";
 import ScrollableQuizInstructions from "../instructions/Instructions.js";
 export var QuizInfo = /*#__PURE__*/function (_Component) {
@@ -20,9 +21,9 @@ export var QuizInfo = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ScrollableQuizTitle, Object.assign({}, this.props, {
-        scrollKey: "title"
+        scrollKey: TITLE_SCROLL_KEY
       })), /*#__PURE__*/React.createElement(ScrollableQuizInstructions, Object.assign({}, this.props, {
-        scrollKey: "instructions"
+        scrollKey: INSTRUCTIONS_SCROLL_KEY
       })));
     }
   }]);

package/lib/common/components/layout/sidebar/Sidebar/index.js

@@ -47,12 +47,12 @@ var _uiHeading = require("@instructure/ui-heading");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
+var _quizCommon = require("@instructure/quiz-common");
+
 var _windowChecks = require("../../../../util/windowChecks.js");
 
 var _CustomPropTypes = _interopRequireDefault(require("../../../../util/CustomPropTypes.js"));
 
-var _quizCommon = require("@instructure/quiz-common");
-
 var _noop = _interopRequireDefault(require("../../../../util/noop.js"));
 
 var _Pin = _interopRequireDefault(require("./Pin.js"));
@@ -89,7 +89,11 @@ var _ref2 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconQuizInstructi
   color: "primary"
 });
 
-var _ref3 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconPinSolid, null);
+var _ref3 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconQuizInstructionsLine, {
+  color: "primary"
+});
+
+var _ref4 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconPinSolid, null);
 
 var Sidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Sidebar, _Component);
@@ -110,13 +114,19 @@ var Sidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(
     _this.scrollToTitle = function (e) {
       e.preventDefault(); // prevent default link navigation
 
-      _this.props.scrollToItem(null)('title');
+      _this.props.scrollToItem(null)(_quizCommon.TITLE_SCROLL_KEY);
     };
 
     _this.scrollToInfo = function (e) {
       e.preventDefault(); // prevent default link navigation
 
-      _this.props.scrollToItem(null)('instructions');
+      _this.props.scrollToItem(null)(_quizCommon.INSTRUCTIONS_SCROLL_KEY);
+    };
+
+    _this.scrollToResults = function (e) {
+      e.preventDefault(); // prevent default link navigation
+
+      _this.props.scrollToItem(null)(_quizCommon.RESULTS_SCROLL_KEY);
     };
 
     _this.toggleSidebar = function () {
@@ -160,6 +170,10 @@ var Sidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(
   }, {
     key: "renderTitle",
     value: function renderTitle() {
+      if (this.props.grading) {
+        return;
+      }
+
       return /*#__PURE__*/_react.default.createElement("div", {
         className: styles.actionableInfo
       }, /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
@@ -177,6 +191,10 @@ var Sidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(
   }, {
     key: "renderInstructions",
     value: function renderInstructions() {
+      if (this.props.grading) {
+        return;
+      }
+
       return /*#__PURE__*/_react.default.createElement("div", {
         className: styles.actionableInfo
       }, /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
@@ -193,6 +211,29 @@ var Sidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(
         tabIndex: "-1"
       }, (0, _formatMessage.default)('Instructions'))));
     }
+  }, {
+    key: "renderResults",
+    value: function renderResults() {
+      if (!this.props.grading) {
+        return;
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.actionableInfo
+      }, /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+        href: "#",
+        margin: "small",
+        forceButtonRole: false,
+        onClick: this.scrollToResults,
+        renderIcon: _ref3,
+        "data-automation": "sidebar-results-button"
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Navigate to results'))), /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, /*#__PURE__*/_react.default.createElement("span", {
+        className: styles.description,
+        "data-automation": "sidebar-results-text",
+        onClick: this.scrollToResults,
+        tabIndex: "-1"
+      }, (0, _formatMessage.default)('Results'))));
+    }
   }, {
     key: "renderSidebarHeader",
     value: function renderSidebarHeader() {
@@ -291,7 +332,7 @@ var Sidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(
         size: "x-small",
         "aria-label": (0, _formatMessage.default)('Pinned Questions'),
         role: "img"
-      }, _ref3))), /*#__PURE__*/_react.default.createElement("div", {
+      }, _ref4))), /*#__PURE__*/_react.default.createElement("div", {
         className: closedClasses
       }, pinnedItems.map(function (pin) {
         return /*#__PURE__*/_react.default.createElement(_Pin.default, {
@@ -321,7 +362,7 @@ var Sidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(
         ,
         onClick: _noop.default,
         id: _quizCommon.SIDEBAR_NAV_ID
-      }, this.renderSidebarHeader(), this.renderTotalPointsPossible(), this.renderPinned(), this.renderTitle(), this.renderInstructions(), /*#__PURE__*/_react.default.createElement("div", {
+      }, this.renderSidebarHeader(), this.renderTotalPointsPossible(), this.renderPinned(), this.renderTitle(), this.renderInstructions(), this.renderResults(), /*#__PURE__*/_react.default.createElement("div", {
         className: styles.sidebarContent
       }, this.props.children)))));
     }
@@ -330,6 +371,7 @@ var Sidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(
   return Sidebar;
 }(_react.Component), _class2.propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.arrayOf(_propTypes.default.element), _propTypes.default.node]).isRequired,
+  grading: _propTypes.default.bool,
   taking: _propTypes.default.bool,
   scrollToItem: _CustomPropTypes.default.higherOrderFunction.isRequired,
   sidebarOpen: _propTypes.default.bool.isRequired,
@@ -344,6 +386,7 @@ var Sidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(
   totalPointsPossible: _propTypes.default.number,
   shouldCloseOnBlur: _propTypes.default.bool
 }, _class2.defaultProps = {
+  grading: false,
   taking: false,
   title: null,
   pinnedItems: (0, _immutable.List)(),

package/lib/common/components/resources/quiz/info/QuizInfo.js

@@ -19,6 +19,8 @@ var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _quizCommon = require("@instructure/quiz-common");
+
 var _Title = _interopRequireDefault(require("../title/Title.js"));
 
 var _Instructions = _interopRequireDefault(require("../instructions/Instructions.js"));
@@ -37,9 +39,9 @@ var QuizInfo = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Title.default, Object.assign({}, this.props, {
-        scrollKey: "title"
+        scrollKey: _quizCommon.TITLE_SCROLL_KEY
       })), /*#__PURE__*/_react.default.createElement(_Instructions.default, Object.assign({}, this.props, {
-        scrollKey: "instructions"
+        scrollKey: _quizCommon.INSTRUCTIONS_SCROLL_KEY
       })));
     }
   }]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "17.49.1-rc.6+0b7fea386",
+  "version": "17.49.1-rc.7+67a51dce3",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -41,11 +41,11 @@
   ],
   "dependencies": {
     "@instructure/outcomes-ui": "^2.1.2",
-    "@instructure/quiz-common": "17.49.1-rc.6+0b7fea386",
-    "@instructure/quiz-i18n": "17.49.1-rc.6+0b7fea386",
-    "@instructure/quiz-interactions": "17.49.1-rc.6+0b7fea386",
-    "@instructure/quiz-number-input": "17.49.1-rc.6+0b7fea386",
-    "@instructure/quiz-rce": "17.49.1-rc.6+0b7fea386",
+    "@instructure/quiz-common": "17.49.1-rc.7+67a51dce3",
+    "@instructure/quiz-i18n": "17.49.1-rc.7+67a51dce3",
+    "@instructure/quiz-interactions": "17.49.1-rc.7+67a51dce3",
+    "@instructure/quiz-number-input": "17.49.1-rc.7+67a51dce3",
+    "@instructure/quiz-rce": "17.49.1-rc.7+67a51dce3",
     "@instructure/ui-a11y-content": "^7.20.0",
     "@instructure/ui-alerts": "^7.20.0",
     "@instructure/ui-avatar": "^7.20.0",
@@ -106,7 +106,7 @@
     "eventemitter3": "^3.1.0",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "17.49.1-rc.6+0b7fea386",
+    "instructure-validations": "17.49.1-rc.7+67a51dce3",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -156,7 +156,7 @@
     "intl": "^1.2.4",
     "jquery": "^2.2.3",
     "most-subject": "^5.3.0",
-    "quiz-presets": "17.49.1-rc.6+0b7fea386",
+    "quiz-presets": "17.49.1-rc.7+67a51dce3",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -172,5 +172,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0b7fea3862df6b8e938238011f50617fd656e52f"
+  "gitHead": "67a51dce3d75661bf30ed46ce38dd5151490589d"
 }