@instructure/quiz-core 22.16.1 → 22.18.0

package/lib/common/components/SDKTimer.js

@@ -1,17 +1,18 @@
 import React from 'react';
-import { Provider } from '../react-redux';
-import store from '../../reduxStore';
+import { SDKStoreProvider, useSDKStore } from '../react-redux';
 import Timer from './layout/header/Timer';
 import PropTypes from 'prop-types';
-export var SDKTimer = function(param) {
+export function SDKTimer(param) {
     var iceTopNavBarEnabled = param.iceTopNavBarEnabled, setTimerEnabled = param.setTimerEnabled;
-    return /*#__PURE__*/ React.createElement(Provider, {
+    var store = useSDKStore();
+    if (!store) return null;
+    return /*#__PURE__*/ React.createElement(SDKStoreProvider, {
         store: store
     }, /*#__PURE__*/ React.createElement(Timer, {
         iceTopNavBarEnabled: iceTopNavBarEnabled,
         setTimerEnabled: setTimerEnabled
     }));
-};
+}
 Timer.propTypes = {
     iceTopNavBarEnabled: PropTypes.bool
 };

package/lib/common/components/TimingAlerts/presenter.js

@@ -4,8 +4,8 @@ import { jsx } from '@instructure/emotion';
 import { Alert } from '@instructure/ui-alerts';
 import { Link } from '@instructure/ui-link';
 import t from '@instructure/quiz-i18n/format-message';
-import { formatDatetimeMedium } from '@instructure/quiz-i18n';
-export var TimingAlerts = function(param) {
+import { formatDatetimeMedium } from '@instructure/quiz-i18n/util/dateTimeFormats';
+export function TimingAlerts(param) {
     var _param_assignmentAvailability = param.assignmentAvailability, assignmentAvailability = _param_assignmentAvailability === void 0 ? {} : _param_assignmentAvailability, _param_timeInSeconds = param.timeInSeconds, timeInSeconds = _param_timeInSeconds === void 0 ? 0 : _param_timeInSeconds, _param_hasTime = param.hasTime, hasTime = _param_hasTime === void 0 ? false : _param_hasTime;
     if (!(assignmentAvailability === null || assignmentAvailability === void 0 ? void 0 : assignmentAvailability.lock_at) || !hasTime || timeInSeconds === 0) {
         return null;
@@ -29,7 +29,7 @@ export var TimingAlerts = function(param) {
             }, children);
         }
     }));
-};
+}
 TimingAlerts.propTypes = {
     assignmentAvailability: PropTypes.shape({
         unlock_at: PropTypes.string,

package/lib/common/components/alerts/index.js

@@ -4,7 +4,8 @@ import { removeAlert } from '../../actions/alerts';
 import Alert from '../../records/Alert';
 import Alerts from './presenter';
 var mapStateToProps = function(state, props) {
-    var alerts = state.get('alerts', Map());
+    var _state_alerts;
+    var alerts = (_state_alerts = state.alerts) !== null && _state_alerts !== void 0 ? _state_alerts : Map();
     return {
         alerts: alerts.map(function(data) {
             return new Alert(data);

package/lib/common/components/alerts/presenter.js

@@ -100,7 +100,7 @@ import { jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/format-message';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { withStyleOverrides } from '@instructure/quiz-common';
+import { withStyleOverrides } from '@instructure/quiz-common/util/withStyleOverrides';
 export var Alerts = /*#__PURE__*/ function(Component) {
     "use strict";
     _inherits(Alerts, Component);

package/lib/common/components/alerts/styles.js

@@ -15,7 +15,7 @@ var generateStyle = function(componentTheme) {
     var mq = "@media screen and (".concat(componentTheme.phoneBreakPoint, ")");
     return {
         alerts: _define_property({
-            position: 'fixed',
+            position: 'absolute',
             pointerEvents: 'none',
             width: '100%',
             boxSizing: 'border-box',

package/lib/common/components/layout/Page/index.js

@@ -95,7 +95,7 @@ import PropTypes from 'prop-types';
 import { jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { withStyleOverrides } from '@instructure/quiz-common';
+import { withStyleOverrides } from '@instructure/quiz-common/util/withStyleOverrides';
 import t from '@instructure/quiz-i18n/format-message';
 export var Page = /*#__PURE__*/ function(Component) {
     "use strict";

package/lib/common/components/layout/Page/styles.js

@@ -68,6 +68,9 @@ var generateStyle = function(componentTheme, props) {
         }), {
             transition: componentTheme.contentTransition,
             width: '100%',
+            '.user_content': {
+                overflowX: 'auto'
+            },
             '.user_content p': {
                 margin: "".concat(componentTheme.userContentMargin, " 0"),
                 '&:first-of-type': {

package/lib/common/components/layout/header/Calculator/presenter.js

@@ -131,7 +131,7 @@ import { TopNavBar } from '@instructure/ui-top-nav-bar';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { IconCalculatorLine } from '@instructure/ui-icons';
 import LearnosityCalculator from '../../../LearnosityCalculator';
-var CalculatorButton = function(param) {
+function CalculatorButton(param) {
     var toggleCalculator = param.toggleCalculator, enabled = param.enabled, iceTopNavBarEnabled = param.iceTopNavBarEnabled;
     if (iceTopNavBarEnabled) {
         return /*#__PURE__*/ React.createElement(TopNavBar.Item, {
@@ -148,7 +148,7 @@ var CalculatorButton = function(param) {
         onClick: toggleCalculator,
         disabled: !enabled
     }, /*#__PURE__*/ React.createElement(ScreenReaderContent, null, t('Calculator')));
-};
+}
 CalculatorButton.propTypes = {
     toggleCalculator: PropTypes.func.isRequired,
     enabled: PropTypes.bool.isRequired,

package/lib/common/components/layout/header/HeaderMenuButton/index.js

@@ -8,10 +8,7 @@ export var mapStateToProps = function(state, props) {
     var hideOnTake = isOneQuestionAtATime(state) && !getBacktrackingIsAllowed(state);
     var quizSessionNotLoaded = getActiveQuizSessionId(state) === '0';
     var hidden = !!props.onTake && (hideOnTake || quizSessionNotLoaded);
-    var sidebarOpen = props.sidebarOpen || state.getIn([
-        'sidebar',
-        'isOpen'
-    ]);
+    var sidebarOpen = props.sidebarOpen || state.sidebar.get('isOpen');
     return {
         hidden: hidden,
         sidebarOpen: sidebarOpen

package/lib/common/components/layout/header/HeaderMenuButton/presenter.js

@@ -98,7 +98,7 @@ import { jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/format-message';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { withStyleOverrides } from '@instructure/quiz-common';
+import { withStyleOverrides } from '@instructure/quiz-common/util/withStyleOverrides';
 export var HeaderMenuButton = /*#__PURE__*/ function(Component) {
     "use strict";
     _inherits(HeaderMenuButton, Component);

package/lib/common/components/layout/header/Timer/presenter.js

@@ -105,7 +105,7 @@ import { formatTime } from '../../../../util/formatTimespan';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import t from '@instructure/quiz-i18n/format-message';
-import { withStyleOverrides } from '@instructure/quiz-common';
+import { withStyleOverrides } from '@instructure/quiz-common/util/withStyleOverrides';
 export var Timer = /*#__PURE__*/ function(Component) {
     "use strict";
     _inherits(Timer, Component);

package/lib/common/components/layout/navbar/SecondaryNavBarButton/index.js

@@ -74,6 +74,30 @@ function _object_spread(target) {
     }
     return target;
 }
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
 function _possible_constructor_return(self, call) {
     if (call && (_type_of(call) === "object" || typeof call === "function")) {
         return call;
@@ -115,9 +139,11 @@ export var SecondaryNavBarButton = /*#__PURE__*/ function(Component) {
         {
             key: "render",
             value: function render() {
-                return /*#__PURE__*/ jsx(TopNavBar.Item, _object_spread({
+                return /*#__PURE__*/ jsx(TopNavBar.Item, _object_spread_props(_object_spread({
                     color: "secondary"
-                }, omitProps(this.props, this.constructor.propTypes)), this.props.children);
+                }, omitProps(this.props, this.constructor.propTypes)), {
+                    "data-testid": "secondary-navbar-button"
+                }), this.props.children);
             }
         }
     ]);

package/lib/common/components/layout/navbar/index.js

@@ -138,7 +138,7 @@ import t from '@instructure/quiz-i18n/format-message';
 import { jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { withStyleOverrides } from '@instructure/quiz-common';
+import { withStyleOverrides } from '@instructure/quiz-common/util/withStyleOverrides';
 export var NavBar = /*#__PURE__*/ function(Component) {
     "use strict";
     _inherits(NavBar, Component);

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

@@ -111,7 +111,7 @@ import { jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import t from '@instructure/quiz-i18n/format-message';
-import { withStyleOverrides } from '@instructure/quiz-common';
+import { withStyleOverrides } from '@instructure/quiz-common/util/withStyleOverrides';
 export var PositionSummary = /*#__PURE__*/ function(Component) {
     "use strict";
     _inherits(PositionSummary, Component);

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import t from '@instructure/quiz-i18n/format-message';
+import { Text } from '@instructure/ui-text';
+import { View } from '@instructure/ui-view';
+import { AccessibleContent } from '@instructure/ui-a11y-content';
+export function TotalPointsPossible(param) {
+    var sidebarOpen = param.sidebarOpen, totalPointsPossible = param.totalPointsPossible;
+    if (typeof totalPointsPossible !== 'number') {
+        return null;
+    }
+    var pointsText = /*#__PURE__*/ React.createElement(Text, {
+        key: "pointsText",
+        size: "small",
+        weight: "bold"
+    }, t("{\n      totalPointsPossible, plural,\n       one {# pt}\n       other {# pts}\n      }", {
+        totalPointsPossible: totalPointsPossible
+    }));
+    var responsiveText = pointsText;
+    if (sidebarOpen) {
+        responsiveText = /*#__PURE__*/ React.createElement(Text, {
+            size: "small"
+        }, t.rich('Total question points = <points/>', {
+            points: function() {
+                return pointsText;
+            }
+        }));
+    }
+    return /*#__PURE__*/ React.createElement(View, {
+        borderWidth: "0 0 small 0",
+        padding: "small x-small",
+        textAlign: sidebarOpen ? 'start' : 'center'
+    }, /*#__PURE__*/ React.createElement(AccessibleContent, {
+        alt: t('Total question points = {totalPointsPossible}', {
+            totalPointsPossible: totalPointsPossible
+        })
+    }, responsiveText));
+}

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

@@ -99,18 +99,12 @@ function _is_native_reflect_construct() {
         return !!result;
     })();
 }
-function _ts_decorate(decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { List } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { IconMoveStartLine, IconMoveEndLine, IconPinSolid, IconQuizInstructionsLine, IconQuizTitleLine } from '@instructure/ui-icons';
-import { AccessibleContent, PresentationContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { PresentationContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { IconButton } from '@instructure/ui-buttons';
 import { Link } from '@instructure/ui-link';
 import { Text } from '@instructure/ui-text';
@@ -119,20 +113,24 @@ import { jsx, Global } from '@instructure/emotion';
 import { Heading } from '@instructure/ui-heading';
 import t from '@instructure/quiz-i18n/format-message';
 import { Tooltip } from '@instructure/ui-tooltip';
-import { INSTRUCTIONS_SCROLL_KEY, RESULTS_SCROLL_KEY, SIDEBAR_NAV_ID, TITLE_SCROLL_KEY, END_EDITING_TRIGGER_CLASSNAME, withStyleOverrides } from '@instructure/quiz-common';
+import { INSTRUCTIONS_SCROLL_KEY, RESULTS_SCROLL_KEY, SIDEBAR_NAV_ID, TITLE_SCROLL_KEY, END_EDITING_TRIGGER_CLASSNAME } from '@instructure/quiz-common/constants';
+import { withStyleOverrides } from '@instructure/quiz-common/util/withStyleOverrides';
 import { onPhone } from '../../../../util/windowChecks';
 import CustomPropTypes from '../../../../util/CustomPropTypes';
 import noop from '../../../../util/noop';
 import Pin from './Pin';
+import { TotalPointsPossible } from './components/TotalPointsPossible';
+import { connect } from '../../../../react-redux';
+import { getActiveQuiz } from '../../../../../common/selectors/quizzes';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-export var Sidebar = /*#__PURE__*/ function(Component) {
+var BaseSidebar = /*#__PURE__*/ function(Component) {
     "use strict";
-    _inherits(Sidebar, Component);
-    function Sidebar() {
-        _class_call_check(this, Sidebar);
+    _inherits(BaseSidebar, Component);
+    function BaseSidebar() {
+        _class_call_check(this, BaseSidebar);
         var _this;
-        _this = _call_super(this, Sidebar, arguments), _define_property(_this, "scrollToTitle", function(e) {
+        _this = _call_super(this, BaseSidebar, arguments), _define_property(_this, "scrollToTitle", function(e) {
             e.preventDefault(); // prevent default link navigation
             _this.props.scrollToItem(null)(TITLE_SCROLL_KEY);
         }), _define_property(_this, "scrollToInfo", function(e) {
@@ -158,7 +156,7 @@ export var Sidebar = /*#__PURE__*/ function(Component) {
         });
         return _this;
     }
-    _create_class(Sidebar, [
+    _create_class(BaseSidebar, [
         {
             key: "componentDidMount",
             value: function componentDidMount() {
@@ -198,7 +196,7 @@ export var Sidebar = /*#__PURE__*/ function(Component) {
                     renderTip: this.props.sidebarOpen ? '' : /*#__PURE__*/ jsx("span", {
                         "aria-hidden": "true"
                     }, navigationText),
-                    placement: "start",
+                    placement: "end",
                     on: this.props.sidebarOpen ? [] : [
                         'focus',
                         'hover'
@@ -234,7 +232,7 @@ export var Sidebar = /*#__PURE__*/ function(Component) {
                     renderTip: this.props.sidebarOpen ? '' : /*#__PURE__*/ jsx("span", {
                         "aria-hidden": "true"
                     }, navigationText),
-                    placement: "start",
+                    placement: "end",
                     on: this.props.sidebarOpen ? [] : [
                         'focus',
                         'hover'
@@ -269,7 +267,7 @@ export var Sidebar = /*#__PURE__*/ function(Component) {
                     renderTip: this.props.sidebarOpen ? '' : /*#__PURE__*/ jsx("span", {
                         "aria-hidden": "true"
                     }, navigationText),
-                    placement: "start",
+                    placement: "end",
                     on: this.props.sidebarOpen ? [] : [
                         'focus',
                         'hover'
@@ -317,41 +315,6 @@ export var Sidebar = /*#__PURE__*/ function(Component) {
                 })));
             }
         },
-        {
-            key: "renderTotalPointsPossible",
-            value: function renderTotalPointsPossible() {
-                var _this_props = this.props, sidebarOpen = _this_props.sidebarOpen, totalPointsPossible = _this_props.totalPointsPossible;
-                if (typeof totalPointsPossible !== 'number') {
-                    return null;
-                }
-                var pointsText = /*#__PURE__*/ jsx(Text, {
-                    key: "pointsText",
-                    size: "small",
-                    weight: "bold"
-                }, t("{\n      totalPointsPossible, plural,\n       one {# pt}\n       other {# pts}\n      }", {
-                    totalPointsPossible: totalPointsPossible
-                }));
-                var responsiveText = pointsText;
-                if (sidebarOpen) {
-                    responsiveText = /*#__PURE__*/ jsx(Text, {
-                        size: "small"
-                    }, t.rich('Total question points = <points/>', {
-                        points: function() {
-                            return pointsText;
-                        }
-                    }));
-                }
-                return /*#__PURE__*/ jsx(View, {
-                    borderWidth: "0 0 small 0",
-                    padding: "small x-small",
-                    textAlign: sidebarOpen ? 'start' : 'center'
-                }, /*#__PURE__*/ jsx(AccessibleContent, {
-                    alt: t('Total question points = {totalPointsPossible}', {
-                        totalPointsPossible: totalPointsPossible
-                    })
-                }, responsiveText));
-            }
-        },
         {
             key: "renderPinned",
             value: function renderPinned() {
@@ -390,6 +353,7 @@ export var Sidebar = /*#__PURE__*/ function(Component) {
         {
             key: "render",
             value: function render() {
+                var _this_props = this.props, sidebarOpen = _this_props.sidebarOpen, totalPointsPossible = _this_props.totalPointsPossible, isSurvey = _this_props.isSurvey;
                 return /*#__PURE__*/ jsx(View, null, /*#__PURE__*/ jsx("div", {
                     css: this.props.styles.commonContainer,
                     id: "sidebar-wrapper",
@@ -410,17 +374,20 @@ export var Sidebar = /*#__PURE__*/ function(Component) {
                     onClick: noop,
                     id: SIDEBAR_NAV_ID,
                     "aria-label": t('Question Navigator')
-                }, this.renderSidebarHeader(), this.renderTotalPointsPossible(), this.renderPinned(), this.renderTitle(), this.renderInstructions(), this.renderResults(), /*#__PURE__*/ jsx("div", {
+                }, this.renderSidebarHeader(), !isSurvey && /*#__PURE__*/ jsx(TotalPointsPossible, {
+                    sidebarOpen: sidebarOpen,
+                    totalPointsPossible: totalPointsPossible
+                }), this.renderPinned(), this.renderTitle(), this.renderInstructions(), this.renderResults(), /*#__PURE__*/ jsx("div", {
                     css: this.props.styles.sidebarContent
                 }, this.props.children)))));
             }
         }
     ]);
-    return Sidebar;
+    return BaseSidebar;
 }(Component);
-_define_property(Sidebar, "displayName", 'Sidebar');
-_define_property(Sidebar, "componentId", "Quizzes".concat(Sidebar.displayName));
-_define_property(Sidebar, "propTypes", {
+_define_property(BaseSidebar, "displayName", 'Sidebar');
+_define_property(BaseSidebar, "componentId", "Quizzes".concat(BaseSidebar.displayName));
+_define_property(BaseSidebar, "propTypes", {
     children: PropTypes.oneOfType([
         PropTypes.element,
         PropTypes.arrayOf(PropTypes.element),
@@ -430,6 +397,7 @@ _define_property(Sidebar, "propTypes", {
     taking: PropTypes.bool,
     scrollToItem: CustomPropTypes.higherOrderFunction.isRequired,
     sidebarOpen: PropTypes.bool.isRequired,
+    isSurvey: PropTypes.bool.isRequired,
     pinnedItems: ImmutablePropTypes.listOf(PropTypes.shape({
         sessionItemId: PropTypes.string.isRequired,
         position: PropTypes.number.isRequired
@@ -443,7 +411,7 @@ _define_property(Sidebar, "propTypes", {
     makeStyles: PropTypes.func,
     styles: PropTypes.object
 });
-_define_property(Sidebar, "defaultProps", {
+_define_property(BaseSidebar, "defaultProps", {
     grading: false,
     taking: false,
     title: null,
@@ -452,7 +420,12 @@ _define_property(Sidebar, "defaultProps", {
     totalPointsPossible: null,
     shouldCloseOnBlur: onPhone()
 });
-Sidebar = _ts_decorate([
-    withStyleOverrides(generateStyle, generateComponentTheme)
-], Sidebar);
+export var UnconnectedSidebar = withStyleOverrides(generateStyle, generateComponentTheme)(BaseSidebar);
+function mapStateToProps(state) {
+    var quiz = getActiveQuiz(state);
+    return {
+        isSurvey: quiz.isSurvey()
+    };
+}
+export var Sidebar = connect(mapStateToProps)(UnconnectedSidebar);
 export default Sidebar;

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

@@ -4,14 +4,18 @@ import { fileUploading } from '../../../../selectors/calls';
 import { connect } from '../../../../react-redux';
 import { SidebarItem as SidebarItemPresenter } from './presenter';
 import { scrollToItem as scrollToItemAction } from '../../../../actions/scrolling';
+import { getActiveQuiz } from '../../../../../common/selectors/quizzes';
 import t from '@instructure/quiz-i18n/format-message';
 export var mapStateToProps = function(state, props) {
+    var quiz = getActiveQuiz(state);
     var displayPosition = props.quizEntry ? props.quizEntry.positionToDisplay(props.position) : t('{position, number}', {
         position: props.position
     });
     return {
         displayPosition: displayPosition,
-        preventScrollToItem: fileUploading(state) && isOneQuestionAtATime(state)
+        preventScrollToItem: fileUploading(state) && isOneQuestionAtATime(state),
+        isSurvey: quiz.isSurvey(),
+        isRequired: props.quizEntry ? props.quizEntry.isRequired : false
     };
 };
 export var mapDispatchToProps = function(dispatch, props) {

package/lib/common/components/layout/sidebar/SidebarItem/presenter.js

@@ -93,16 +93,34 @@ function _ts_decorate(decorators, target, key, desc) {
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import { View } from '@instructure/ui-view';
 import { Link } from '@instructure/ui-link';
 import { jsx } from '@instructure/emotion';
+import { IconArrowNestLine } from '@instructure/ui-icons';
 import PositionSummary from '../PositionSummary';
 import t from '@instructure/quiz-i18n/format-message';
-import { RichContentRenderer } from '@instructure/quiz-rce';
+import { RichContentRenderer } from '@instructure/quiz-rce/components/RichContentRenderer/index';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { Flex, END_EDITING_TRIGGER_CLASSNAME, withStyleOverrides } from '@instructure/quiz-common';
+import { Flex } from '@instructure/quiz-common/components/Flex/index';
+import { withStyleOverrides } from '@instructure/quiz-common/util/withStyleOverrides';
+import { END_EDITING_TRIGGER_CLASSNAME } from '@instructure/quiz-common/constants';
 import { Tooltip } from '@instructure/ui-tooltip';
 import { AccessibleContent } from '@instructure/ui-a11y-content';
+import { RequiredIndicator } from '../../../../../building/components/resources/quizEntry/QuizEntryShow/components/LeftHeader';
+function SideBarItemRightContent(param) {
+    var isSurvey = param.isSurvey, isRequired = param.isRequired, pointPossibleText = param.pointPossibleText;
+    if (!isSurvey) {
+        return /*#__PURE__*/ jsx(View, {
+            as: "div",
+            width: "40%"
+        }, pointPossibleText);
+    }
+    if (!isRequired) {
+        return null;
+    }
+    return /*#__PURE__*/ jsx(RequiredIndicator, null);
+}
 export var SidebarItem = /*#__PURE__*/ function(Component) {
     "use strict";
     _inherits(SidebarItem, Component);
@@ -169,25 +187,35 @@ export var SidebarItem = /*#__PURE__*/ function(Component) {
         {
             key: "renderButton",
             value: function renderButton() {
-                var _this_props = this.props, displayPosition = _this_props.displayPosition, itemId = _this_props.itemId, isAnswered = _this_props.isAnswered;
-                var content = !isAnswered && isAnswered !== null ? t('Navigate to question at position {displayPosition}, unanswered', {
+                var _this_props = this.props, displayPosition = _this_props.displayPosition, itemId = _this_props.itemId, isAnswered = _this_props.isAnswered, inStimulus = _this_props.inStimulus, sidebarOpen = _this_props.sidebarOpen;
+                var baseContent = !isAnswered && isAnswered !== null ? t('Navigate to question at position {displayPosition}, unanswered', {
                     displayPosition: displayPosition
                 }) : t('Navigate to question at position {displayPosition}', {
                     displayPosition: displayPosition
                 });
+                var stimulusContent = !isAnswered && isAnswered !== null ? t('Navigate to stimulus question at position {displayPosition}, unanswered', {
+                    displayPosition: displayPosition
+                }) : t('Navigate to stimulus question at position {displayPosition}', {
+                    displayPosition: displayPosition
+                });
+                var content = inStimulus ? stimulusContent : baseContent;
                 return /*#__PURE__*/ jsx(Tooltip, {
-                    renderTip: this.props.sidebarOpen ? '' : /*#__PURE__*/ jsx("span", {
+                    renderTip: sidebarOpen ? '' : /*#__PURE__*/ jsx("span", {
                         "aria-hidden": "true"
                     }, content),
-                    placement: "start",
-                    on: this.props.sidebarOpen ? [] : [
+                    placement: "end",
+                    on: sidebarOpen ? [] : [
                         'hover',
                         'focus'
                     ]
-                }, /*#__PURE__*/ jsx(Link, {
+                }, inStimulus && !sidebarOpen ? /*#__PURE__*/ jsx(IconArrowNestLine, {
+                    css: {
+                        margin: '-10px 5px 0 -8px'
+                    }
+                }) : null, /*#__PURE__*/ jsx(Link, {
                     href: "#",
                     size: "small",
-                    margin: "0 small",
+                    margin: inStimulus && !sidebarOpen ? '0 0 0 -5px 0' : '0 small',
                     isWithinText: false,
                     forceButtonRole: false,
                     onClick: this.scrollToItem,
@@ -210,7 +238,7 @@ export var SidebarItem = /*#__PURE__*/ function(Component) {
         {
             key: "renderOpen",
             value: function renderOpen() {
-                var _this_props = this.props, children = _this_props.children, itemName = _this_props.itemName, pointsPossible = _this_props.pointsPossible, styles = _this_props.styles;
+                var _this_props = this.props, children = _this_props.children, itemName = _this_props.itemName, pointsPossible = _this_props.pointsPossible, styles = _this_props.styles, isSurvey = _this_props.isSurvey, isRequired = _this_props.isRequired;
                 var parentDivClass = "sidebarIsOpen ".concat(END_EDITING_TRIGGER_CLASSNAME);
                 return /*#__PURE__*/ jsx("div", {
                     className: parentDivClass,
@@ -229,10 +257,11 @@ export var SidebarItem = /*#__PURE__*/ function(Component) {
                 }, /*#__PURE__*/ jsx("div", {
                     className: "interactionType",
                     css: this.props.styles.interactionType
-                }, itemName), /*#__PURE__*/ jsx("div", {
-                    className: "pointsPossible",
-                    css: this.props.styles.pointsPossible
-                }, this.getPointsText(pointsPossible || 0))), /*#__PURE__*/ jsx("div", {
+                }, itemName), /*#__PURE__*/ jsx(SideBarItemRightContent, {
+                    isSurvey: isSurvey,
+                    isRequired: isRequired,
+                    pointPossibleText: this.getPointsText(pointsPossible || 0)
+                })), /*#__PURE__*/ jsx("div", {
                     css: this.props.styles.itemBody
                 }, /*#__PURE__*/ jsx(RichContentRenderer, {
                     content: this.props.itemBody
@@ -261,11 +290,13 @@ _define_property(SidebarItem, "propTypes", {
     itemName: PropTypes.string.isRequired,
     inStimulus: PropTypes.bool,
     isAnswered: PropTypes.bool,
-    position: PropTypes.number.isRequired,
+    position: PropTypes.number,
     pointsPossible: PropTypes.number.isRequired,
     preventScrollToItem: PropTypes.bool.isRequired,
     quizEntry: ImmutablePropTypes.record,
     sidebarOpen: PropTypes.bool.isRequired,
+    isSurvey: PropTypes.bool.isRequired,
+    isRequired: PropTypes.bool.isRequired,
     // from connect
     scrollToItem: PropTypes.func.isRequired,
     styles: PropTypes.object,

package/lib/common/components/layout/sidebar/SidebarItem/styles.js

@@ -58,7 +58,10 @@ var generateStyle = function(componentTheme, props) {
         displayNumber: {
             color: componentTheme.darkTextColor,
             fontSize: componentTheme.numberFontSize,
-            fontWeight: componentTheme.numberFontWeight
+            fontWeight: componentTheme.numberFontWeight,
+            minWidth: '2ch',
+            display: 'inline-block',
+            textAlign: 'center'
         },
         itemBody: {
             fontSize: componentTheme.itemBodyFontSize,

package/lib/common/components/layout/sidebar/Stimulus/Collection/presenter.js

@@ -102,7 +102,7 @@ import { DISPLAY_AS_SUMMARY_LIMIT } from '../presenter';
 import t from '@instructure/quiz-i18n/format-message';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { withStyleOverrides } from '@instructure/quiz-common';
+import { withStyleOverrides } from '@instructure/quiz-common/util/withStyleOverrides';
 export var Collection = /*#__PURE__*/ function(Component) {
     "use strict";
     _inherits(Collection, Component);

package/lib/common/components/layout/sidebar/Stimulus/Summary/presenter.js

@@ -98,7 +98,7 @@ import { DISPLAY_AS_SUMMARY_LIMIT } from '../presenter';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import t from '@instructure/quiz-i18n/format-message';
-import { withStyleOverrides } from '@instructure/quiz-common';
+import { withStyleOverrides } from '@instructure/quiz-common/util/withStyleOverrides';
 export var Summary = /*#__PURE__*/ function(Component) {
     "use strict";
     _inherits(Summary, Component);

package/lib/common/components/layout/sidebar/Stimulus/Title/index.js

@@ -97,7 +97,7 @@ import { Tooltip } from '@instructure/ui-tooltip';
 import { Text } from '@instructure/ui-text';
 import { jsx } from '@instructure/emotion';
 import generateStyle from './styles';
-import { withStyleOverrides } from '@instructure/quiz-common';
+import { withStyleOverrides } from '@instructure/quiz-common/util/withStyleOverrides';
 var DISPLAY_TOOLTIP_LIMIT = 80;
 export var Title = /*#__PURE__*/ function(Component) {
     "use strict";