@instructure/quiz-core 20.17.2-rc.1 → 20.17.2-rc.11

package/es/building/components/resources/quiz/editButton/EditButton.js

@@ -1,43 +1,32 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { IconButton } from '@instructure/ui-buttons';
 import { IconEditLine } from '@instructure/ui-icons';
-import makeScrollable from "../../../../../common/components/shared/functionality/makeScrollable.js";
+import makeScrollable from '../../../../../common/components/shared/functionality/makeScrollable';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { omitProps } from '@instructure/ui-react-utils';
-
 var EditButton = /*#__PURE__*/function (_Component) {
-  _inherits(EditButton, _Component);
-
-  var _super = _createSuper(EditButton);
-
   function EditButton() {
     var _this;
-
     _classCallCheck(this, EditButton);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
+    _this = _callSuper(this, EditButton, [].concat(args));
     _this.focus = function () {
       _this.button.focus();
     };
-
     _this.handleButtonRef = function (node) {
       return _this.button = node;
     };
-
     return _this;
   }
-
-  _createClass(EditButton, [{
+  _inherits(EditButton, _Component);
+  return _createClass(EditButton, [{
     key: "render",
     value: function render() {
       return /*#__PURE__*/React.createElement(IconButton, Object.assign({
@@ -52,11 +41,7 @@ var EditButton = /*#__PURE__*/function (_Component) {
       }));
     }
   }]);
-
-  EditButton.displayName = "EditButton";
-  return EditButton;
 }(Component);
-
 EditButton.propTypes = {
   onClick: PropTypes.func.isRequired,
   screenreaderText: PropTypes.string

package/es/building/components/resources/quiz/instructions/Edit/index.js

@@ -1,10 +1,8 @@
-import { connect } from "../../../../../../common/react-redux.js";
-import QuizInstructionsEdit from "./presenter.js";
-
+import { connect } from '../../../../../../common/react-redux';
+import QuizInstructionsEdit from './presenter';
 function mapStateToProps(state, props) {
   return {
     appContainer: state.getIn(['ui', 'appContainer'])
   };
 }
-
 export default connect(mapStateToProps, null)(QuizInstructionsEdit);

package/es/building/components/resources/quiz/instructions/Edit/presenter.js

@@ -1,46 +1,44 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-
-var _dec, _class, _class2, _temp;
-
+var _dec, _class, _QuizInstructionsEdit;
 /** @jsx jsx */
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Button } from '@instructure/ui-buttons';
 import { withStyle, jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
-import CustomPropTypes from "../../../../../../common/util/CustomPropTypes.js";
-import elementsForSelectors from "../../../../../../common/util/ElementsForSelectors.js";
+import CustomPropTypes from '../../../../../../common/util/CustomPropTypes';
+import elementsForSelectors from '../../../../../../common/util/ElementsForSelectors';
 import { INSTRUCTIONS_EDIT_ID } from '@instructure/quiz-common';
 import { RichContentInput } from '@instructure/quiz-rce';
-import generateStyle from "./styles.js";
-import generateComponentTheme from "./theme.js";
-import wrapWithOutsideClickEmotion from "../../../../../../common/components/shared/functionality/componentWithOutsideClickEmotion.js"; // ===================================
+import generateStyle from './styles';
+import generateComponentTheme from './theme';
+import wrapWithOutsideClickEmotion from '../../../../../../common/components/shared/functionality/componentWithOutsideClickEmotion';
+
+// ===================================
+
 // once editing is toggled this div
 // is rendered & has actions that
 // allow for canceling
-// ===================================
-
-var QuizInstructionsEdit = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
-  _inherits(QuizInstructionsEdit, _Component);
-
-  var _super = _createSuper(QuizInstructionsEdit);
 
+// ===================================
+var QuizInstructionsEdit = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_QuizInstructionsEdit = /*#__PURE__*/function (_Component) {
   function QuizInstructionsEdit() {
     _classCallCheck(this, QuizInstructionsEdit);
-
-    return _super.apply(this, arguments);
+    return _callSuper(this, QuizInstructionsEdit, arguments);
   }
-
-  _createClass(QuizInstructionsEdit, [{
+  _inherits(QuizInstructionsEdit, _Component);
+  return _createClass(QuizInstructionsEdit, [{
     key: "clickedOutside",
+    value:
     // enabled by wrapWithOutsideClick
-    value: function clickedOutside() {
+    function clickedOutside() {
       this.props.saveAndPreview();
-    } // enabled by wrapWithOutsideClick
+    }
 
+    // enabled by wrapWithOutsideClick
   }, {
     key: "ignoreClickOutsideIf",
     value: function ignoreClickOutsideIf(e) {
@@ -73,15 +71,12 @@ var QuizInstructionsEdit = (_dec = withStyle(generateStyle, generateComponentThe
       }, t('Done'))));
     }
   }]);
-
-  QuizInstructionsEdit.displayName = "QuizInstructionsEdit";
-  return QuizInstructionsEdit;
-}(Component), _class2.propTypes = {
+}(Component), _QuizInstructionsEdit.propTypes = {
   endEditing: PropTypes.func.isRequired,
   inputValue: PropTypes.string.isRequired,
   onInputChange: PropTypes.func.isRequired,
   saveAndPreview: PropTypes.func.isRequired,
   appContainer: CustomPropTypes.selectors.isRequired,
   styles: PropTypes.object
-}, _temp)) || _class);
+}, _QuizInstructionsEdit)) || _class);
 export default wrapWithOutsideClickEmotion(QuizInstructionsEdit);

package/es/building/components/resources/quiz/instructions/Edit/styles.js

@@ -17,5 +17,4 @@ var generateStyle = function generateStyle(componentTheme) {
     }
   };
 };
-
 export default generateStyle;

package/es/building/components/resources/quiz/instructions/Instructions/Instructions.examples.js

@@ -1,5 +1,5 @@
 import { fromJS } from 'immutable';
-import Quiz from "../../../../../../common/records/Quiz.js";
+import Quiz from '../../../../../../common/records/Quiz';
 export default {
   propValues: {
     isEditing: [true, false]

package/es/building/components/resources/quiz/instructions/Instructions/index.js

@@ -1,19 +1,17 @@
 import { compose } from 'redux';
-import { connect } from "../../../../../../common/react-redux.js";
-import { screenreaderNotification } from "../../../../../../common/actions/alerts.js";
-import { clearModifications, changeQuizInstructions } from "../../../../../../common/actions/modifications.js";
-import { saveQuizChange } from "../../../../../api/quizzes.js";
-import makeEditable from "../../../../../../common/components/shared/functionality/makeEditable.js";
-import { featureOn } from "../../../../../../common/util/featureCheck.js";
-import Instructions from "./presenter.js";
-
+import { connect } from '../../../../../../common/react-redux';
+import { screenreaderNotification } from '../../../../../../common/actions/alerts';
+import { clearModifications, changeQuizInstructions } from '../../../../../../common/actions/modifications';
+import { saveQuizChange } from '../../../../../api/quizzes';
+import makeEditable from '../../../../../../common/components/shared/functionality/makeEditable';
+import { featureOn } from '../../../../../../common/util/featureCheck';
+import Instructions from './presenter';
 function mapStateToProps(state) {
   return {
     errorsShowing: state.get('errorsShowing'),
     lockBlueprintContentEnabled: featureOn('lock_blueprint_content')
   };
 }
-
 var mapDispatchToProps = {
   changeQuizInstructions: changeQuizInstructions,
   clearModifications: clearModifications,

package/es/building/components/resources/quiz/instructions/Instructions/presenter.js

@@ -1,90 +1,73 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-
-var _dec, _class, _class2, _temp;
-
+var _dec, _class, _QuizInstructions;
 /** @jsx jsx */
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Heading } from '@instructure/ui-heading';
 import { withStyle, jsx } from '@instructure/emotion';
-import QuizInstructionsEdit from "../Edit/index.js";
-import QuizInstructionsShow from "../Show/index.js";
-import EditButton from "../../editButton/EditButton.js";
-import generateStyle from "./styles.js";
-import generateComponentTheme from "./theme.js";
-import t from '@instructure/quiz-i18n/es/format-message'; // ======================================
-// renders the editable quiz instructions
-// input/display component
+import QuizInstructionsEdit from '../Edit';
+import QuizInstructionsShow from '../Show';
+import EditButton from '../../editButton/EditButton';
+import generateStyle from './styles';
+import generateComponentTheme from './theme';
+import t from '@instructure/quiz-i18n/es/format-message';
+
 // ======================================
 
-export var QuizInstructions = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
-  _inherits(QuizInstructions, _Component);
+// renders the editable quiz instructions
+// input/display component
 
-  var _super = _createSuper(QuizInstructions);
+// ======================================
 
+export var QuizInstructions = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_QuizInstructions = /*#__PURE__*/function (_Component) {
   function QuizInstructions() {
     var _this;
-
     _classCallCheck(this, QuizInstructions);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
+    _this = _callSuper(this, QuizInstructions, [].concat(args));
     _this.workingInstructions = function () {
       return _this.props.quiz.getWorkingInstance().instructions || '';
     };
-
+    // =========
+    //  actions
+    // =========
     _this.updateWorkingInstructions = function (event, _ref) {
       var editorContent = _ref.editorContent;
-
       _this.props.changeQuizInstructions(_this.quizID(), editorContent);
     };
-
     _this.saveAndPreview = function () {
       _this.saveWorkingInstructions();
-
       _this.endEditing();
     };
-
     _this.endEditing = function () {
       _this.props.switchOffEditing();
-
       _this.props.clearModifications('quizzes', _this.quizID(), ['instructions']);
     };
-
     _this.toggleEditing = function () {
       var msg;
-
       if (_this.props.isEditing) {
         msg = t('Instructions edit mode off.');
-
         _this.props.screenreaderNotification(msg);
-
         _this.saveAndPreview();
       } else {
         msg = t('Instructions switched to edit mode. Navigate down to access text editor.');
-
         _this.props.screenreaderNotification(msg);
-
         _this.props.switchOnEditing();
       }
     };
-
     return _this;
   }
-
-  _createClass(QuizInstructions, [{
+  _inherits(QuizInstructions, _Component);
+  return _createClass(QuizInstructions, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       var _this2 = this;
-
       // Only focus if we switch from edit mode to show mode
       if (prevProps.isEditing && !this.props.isEditing) {
         // use setTimeout to break away from RCE destruction that loses focus
@@ -92,10 +75,11 @@ export var QuizInstructions = (_dec = withStyle(generateStyle, generateComponent
           _this2.editButton.getWrappedInstance().setFocus();
         }, 50);
       }
-    } // ===========
+    }
+
+    // ===========
     //   helpers
     // ===========
-
   }, {
     key: "quizID",
     value: function quizID() {
@@ -105,13 +89,10 @@ export var QuizInstructions = (_dec = withStyle(generateStyle, generateComponent
     key: "isContentLocked",
     value: function isContentLocked() {
       var _this$props = this.props,
-          lockBlueprintContentEnabled = _this$props.lockBlueprintContentEnabled,
-          quiz = _this$props.quiz;
+        lockBlueprintContentEnabled = _this$props.lockBlueprintContentEnabled,
+        quiz = _this$props.quiz;
       return lockBlueprintContentEnabled && quiz.originalQuizLockedByBlueprint;
-    } // =========
-    //  actions
-    // =========
-
+    }
   }, {
     key: "saveWorkingInstructions",
     value: function saveWorkingInstructions() {
@@ -121,21 +102,20 @@ export var QuizInstructions = (_dec = withStyle(generateStyle, generateComponent
     key: "setRef",
     value: function setRef(key) {
       var _this3 = this;
-
       return function (node) {
         _this3[key] = node;
       };
-    } // ===============
+    }
+
+    // ===============
     //    RENDERING
     // ===============
-
   }, {
     key: "editingRender",
     value: function editingRender() {
       if (!this.props.isEditing) {
         return;
       }
-
       return jsx(QuizInstructionsEdit, {
         endEditing: this.endEditing,
         inputValue: this.workingInstructions(),
@@ -150,7 +130,6 @@ export var QuizInstructions = (_dec = withStyle(generateStyle, generateComponent
       if (this.props.isEditing) {
         return;
       }
-
       var contentLocked = this.props.quiz.originalQuizLockedByBlueprint;
       return jsx(QuizInstructionsShow, {
         ref: this.setRef('instructionsPreview'),
@@ -183,10 +162,7 @@ export var QuizInstructions = (_dec = withStyle(generateStyle, generateComponent
       }))));
     }
   }]);
-
-  QuizInstructions.displayName = "QuizInstructions";
-  return QuizInstructions;
-}(Component), _class2.propTypes = {
+}(Component), _QuizInstructions.propTypes = {
   changeQuizInstructions: PropTypes.func.isRequired,
   clearModifications: PropTypes.func.isRequired,
   isEditing: PropTypes.bool.isRequired,
@@ -201,7 +177,7 @@ export var QuizInstructions = (_dec = withStyle(generateStyle, generateComponent
   switchOnEditing: PropTypes.func.isRequired,
   // Injected by makeEditable,
   styles: PropTypes.object
-}, _class2.defaultProps = {
+}, _QuizInstructions.defaultProps = {
   scrollKey: void 0
-}, _temp)) || _class);
+}, _QuizInstructions)) || _class);
 export default QuizInstructions;

package/es/building/components/resources/quiz/instructions/Instructions/styles.js

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-
 var generateStyle = function generateStyle(componentTheme) {
   var mp = '@media print';
   return {
@@ -29,5 +28,4 @@ var generateStyle = function generateStyle(componentTheme) {
     }
   };
 };
-
 export default generateStyle;

package/es/building/components/resources/quiz/instructions/Instructions/theme.js

@@ -1,7 +1,7 @@
 export default function generator(_ref) {
   var spacing = _ref.spacing,
-      colors = _ref.colors,
-      typography = _ref.typography;
+    colors = _ref.colors,
+    typography = _ref.typography;
   return {
     labelPadding: spacing.small,
     labelLeftPadding: spacing.large,

package/es/building/components/resources/quiz/instructions/Show/index.js

@@ -1,49 +1,41 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-
-var _dec, _class, _class2, _temp;
-
+var _dec, _class, _QuizInstructionsShow;
 /** @jsx jsx */
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { withStyle, jsx } from '@instructure/emotion';
 import { RichContentRenderer } from '@instructure/quiz-rce';
-import Overlay from "../../../../../../common/components/shared/overlay/index.js";
-import makeScrollable from "../../../../../../common/components/shared/functionality/makeScrollable.js";
-import generateStyle from "./styles.js";
-import generateComponentTheme from "./theme.js";
-import t from '@instructure/quiz-i18n/es/format-message'; // ==========================================
+import Overlay from '../../../../../../common/components/shared/overlay';
+import makeScrollable from '../../../../../../common/components/shared/functionality/makeScrollable';
+import generateStyle from './styles';
+import generateComponentTheme from './theme';
+import t from '@instructure/quiz-i18n/es/format-message';
+
+// ==========================================
+
 // this component shows the quiz instructions
 // has events that allow for toggling
 // editing and hover which shows an overlay
-// ==========================================
-
-export var QuizInstructionsShow = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
-  _inherits(QuizInstructionsShow, _Component);
-
-  var _super = _createSuper(QuizInstructionsShow);
 
+// ==========================================
+export var QuizInstructionsShow = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_QuizInstructionsShow = /*#__PURE__*/function (_Component) {
   function QuizInstructionsShow() {
     var _this;
-
     _classCallCheck(this, QuizInstructionsShow);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
+    _this = _callSuper(this, QuizInstructionsShow, [].concat(args));
     _this.switchOnEditing = function () {
       _this.props.switchOnEditing();
     };
-
     return _this;
   }
-
-  _createClass(QuizInstructionsShow, [{
+  _inherits(QuizInstructionsShow, _Component);
+  return _createClass(QuizInstructionsShow, [{
     key: "render",
     value: function render() {
       return jsx("span", {
@@ -61,16 +53,13 @@ export var QuizInstructionsShow = (_dec = withStyle(generateStyle, generateCompo
       }))));
     }
   }]);
-
-  QuizInstructionsShow.displayName = "QuizInstructionsShow";
-  return QuizInstructionsShow;
-}(Component), _class2.propTypes = {
+}(Component), _QuizInstructionsShow.propTypes = {
   instructions: PropTypes.string,
   switchOnEditing: PropTypes.func.isRequired,
   contentLocked: PropTypes.bool,
   styles: PropTypes.object
-}, _class2.defaultProps = {
+}, _QuizInstructionsShow.defaultProps = {
   contentLocked: false,
   instructions: null
-}, _temp)) || _class);
+}, _QuizInstructionsShow)) || _class);
 export default makeScrollable(QuizInstructionsShow);

package/es/building/components/resources/quiz/instructions/Show/styles.js

@@ -14,9 +14,17 @@ var generateStyle = function generateStyle(componentTheme) {
       label: 'instructionsShowText',
       whiteSpace: 'normal',
       overflow: 'hidden',
-      fontSize: componentTheme.instructionsShowTextFontSize
+      fontSize: componentTheme.instructionsShowTextFontSize,
+      '& p': {
+        margin: 16,
+        '&:first-of-type': {
+          marginTop: 0
+        },
+        '&:last-child': {
+          marginBottom: 0
+        }
+      }
     }
   };
 };
-
 export default generateStyle;

package/es/building/components/resources/quiz/instructions/Show/theme.js

@@ -1,7 +1,7 @@
 export default function generator(_ref) {
   var spacing = _ref.spacing,
-      colors = _ref.colors,
-      typography = _ref.typography;
+    colors = _ref.colors,
+    typography = _ref.typography;
   return {
     instructionsShowWrapperPadding: spacing.large,
     instructionsShowTextFontSize: typography.fontSizeMedium