@instructure/quiz-core 22.16.0 → 22.17.0

package/es/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/es/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';
@@ -124,15 +118,18 @@ 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 +155,7 @@ export var Sidebar = /*#__PURE__*/ function(Component) {
         });
         return _this;
     }
-    _create_class(Sidebar, [
+    _create_class(BaseSidebar, [
         {
             key: "componentDidMount",
             value: function componentDidMount() {
@@ -317,41 +314,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 +352,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 +373,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 +396,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 +410,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 +419,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/es/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/es/common/components/layout/sidebar/SidebarItem/presenter.js

@@ -93,8 +93,10 @@ 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';
@@ -103,6 +105,20 @@ import generateComponentTheme from './theme';
 import { Flex, END_EDITING_TRIGGER_CLASSNAME, withStyleOverrides } from '@instructure/quiz-common';
 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 +185,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 ? [] : [
+                    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 +236,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 +255,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
@@ -266,6 +293,8 @@ _define_property(SidebarItem, "propTypes", {
     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/es/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/es/common/components/layout/sidebar/Stimulus/presenter.js

@@ -231,10 +231,28 @@ export var SidebarStimulus = /*#__PURE__*/ function(Component) {
                 };
             }
         },
+        {
+            key: "renderStimulusItems",
+            value: function renderStimulusItems() {
+                var _this_props = this.props, childEntries = _this_props.childEntries, displayPosition = _this_props.displayPosition, renderSidebarItem = _this_props.renderSidebarItem;
+                var nextDisplayPosition = displayPosition;
+                return childEntries.toArray().map(function(item, i) {
+                    var itemDisplayPosition = nextDisplayPosition;
+                    nextDisplayPosition += item.displayPositionSlots;
+                    return /*#__PURE__*/ jsx(View, {
+                        key: item.id,
+                        padding: "0 0 0 small",
+                        borderWidth: "0 0 small 0",
+                        borderColor: "primary",
+                        as: "div"
+                    }, renderSidebarItem(item, itemDisplayPosition, false));
+                });
+            }
+        },
         {
             key: "renderClosed",
             value: function renderClosed() {
-                return /*#__PURE__*/ jsx(View, {
+                var stimulusContainer = /*#__PURE__*/ jsx(View, {
                     borderWidth: "0 0 small 0",
                     borderColor: "primary",
                     as: "div"
@@ -246,6 +264,13 @@ export var SidebarStimulus = /*#__PURE__*/ function(Component) {
                     css: this.stimulusHoverCss(),
                     as: "div"
                 }, this.renderButton()), this.renderCollection());
+                // For passages or when dragging, just return the stimulus container
+                if (this.stimulusIsPassage() || this.props.isDragging) {
+                    return stimulusContainer;
+                }
+                // For non-passage stimuli in closed sidebar, return stimulus + child items separately
+                var childItems = this.renderStimulusItems();
+                return /*#__PURE__*/ jsx("div", null, stimulusContainer, childItems);
             }
         },
         {

package/{lib/common/components/resources/quizSessionResult/Header → es/common/components/resources/QuizSessionResult/QuizSessionResultHeader}/index.js

@@ -84,12 +84,6 @@ 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 ImmutablePropTypes from 'react-immutable-proptypes';
@@ -100,13 +94,13 @@ import t from '@instructure/quiz-i18n/format-message';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { withStyleOverrides } from '@instructure/quiz-common';
-export var QuizSessionResultHeader = /*#__PURE__*/ function(Component) {
+export var BaseQuizSessionResultHeader = /*#__PURE__*/ function(Component) {
     "use strict";
-    _inherits(QuizSessionResultHeader, Component);
-    function QuizSessionResultHeader() {
-        _class_call_check(this, QuizSessionResultHeader);
+    _inherits(BaseQuizSessionResultHeader, Component);
+    function BaseQuizSessionResultHeader() {
+        _class_call_check(this, BaseQuizSessionResultHeader);
         var _this;
-        _this = _call_super(this, QuizSessionResultHeader, arguments), _define_property(_this, "renderRegradeAlert", function() {
+        _this = _call_super(this, BaseQuizSessionResultHeader, arguments), _define_property(_this, "renderRegradeAlert", function() {
             if (_this.props.regradedSessionItemResults && _this.props.regradedSessionItemResults.size > 0) {
                 var questions = _this.props.regradedSessionItemResults.map(function(rsi) {
                     return rsi.position;
@@ -121,7 +115,7 @@ export var QuizSessionResultHeader = /*#__PURE__*/ function(Component) {
         });
         return _this;
     }
-    _create_class(QuizSessionResultHeader, [
+    _create_class(BaseQuizSessionResultHeader, [
         {
             key: "studentName",
             value: function studentName() {
@@ -143,27 +137,25 @@ export var QuizSessionResultHeader = /*#__PURE__*/ function(Component) {
                 }, t('Results'))), /*#__PURE__*/ jsx("div", {
                     css: this.props.styles.resultListDescription,
                     className: "fs-mask"
-                }, this.props.studentDescription || this.studentName()))), /*#__PURE__*/ jsx("div", {
+                }, this.props.studentDescription || this.studentName()))), !this.props.isSurvey && /*#__PURE__*/ jsx("div", {
                     css: this.props.styles.regradeAlert
                 }, this.renderRegradeAlert()));
             }
         }
     ]);
-    return QuizSessionResultHeader;
+    return BaseQuizSessionResultHeader;
 }(Component);
-_define_property(QuizSessionResultHeader, "displayName", 'QuizSessionResultHeader');
-_define_property(QuizSessionResultHeader, "componentId", "Quizzes".concat(QuizSessionResultHeader.displayName));
-_define_property(QuizSessionResultHeader, "propTypes", {
+_define_property(BaseQuizSessionResultHeader, "displayName", 'QuizSessionResultHeader');
+_define_property(BaseQuizSessionResultHeader, "componentId", "Quizzes".concat(BaseQuizSessionResultHeader.displayName));
+_define_property(BaseQuizSessionResultHeader, "propTypes", {
     quizSession: ImmutablePropTypes.record.isRequired,
     regradedSessionItemResults: ImmutablePropTypes.list,
     studentDescription: PropTypes.node,
-    styles: PropTypes.object
+    styles: PropTypes.object,
+    isSurvey: PropTypes.bool.isRequired
 });
-_define_property(QuizSessionResultHeader, "defaultProps", {
+_define_property(BaseQuizSessionResultHeader, "defaultProps", {
     regradedSessionItemResults: null,
     studentDescription: null
 });
-QuizSessionResultHeader = _ts_decorate([
-    withStyleOverrides(generateStyle, generateComponentTheme)
-], QuizSessionResultHeader);
-export default QuizSessionResultHeader;
+export var QuizSessionResultHeader = withStyleOverrides(generateStyle, generateComponentTheme)(BaseQuizSessionResultHeader);

package/es/common/components/resources/QuizSessionResult/QuizSessionResultInfo/ScoreDisplay/components/LetterGrade.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { AccessibleContent } from '@instructure/ui-a11y-content';
+import { View } from '@instructure/ui-view';
+import { Text } from '@instructure/ui-text';
+import t from '@instructure/quiz-i18n/format-message';
+import { scoreToLetterGrade } from '@instructure/grading-utils';
+export var LetterGrade = function(param) {
+    var percentage = param.percentage, gradingScheme = param.gradingScheme;
+    var letterGrade = scoreToLetterGrade(percentage * 100, gradingScheme);
+    var gradeText = t('Grade for this attempt');
+    var alt = t('Grade for this attempt: { grade }', {
+        grade: letterGrade
+    });
+    return /*#__PURE__*/ React.createElement(AccessibleContent, {
+        alt: alt
+    }, /*#__PURE__*/ React.createElement(View, {
+        as: "div"
+    }, /*#__PURE__*/ React.createElement(Text, {
+        size: "xx-large",
+        weight: "bold",
+        color: "primary"
+    }, letterGrade)), /*#__PURE__*/ React.createElement(Text, {
+        color: "secondary"
+    }, gradeText));
+};
+LetterGrade.propTypes = {
+    percentage: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string
+    ]),
+    gradingScheme: PropTypes.arrayOf(PropTypes.shape({
+        name: PropTypes.string,
+        value: PropTypes.number
+    }))
+};

package/es/common/components/resources/QuizSessionResult/QuizSessionResultInfo/ScoreDisplay/components/PointsDisplay.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { AccessibleContent } from '@instructure/ui-a11y-content';
+import { Text } from '@instructure/ui-text';
+import { Flex } from '@instructure/quiz-common';
+import t from '@instructure/quiz-i18n/format-message';
+import { isMissing } from '../../../../../../util/isMissing';
+var mainPointsText = function(points, pointsPossible) {
+    if (isMissing(points) && isMissing(pointsPossible)) {
+        return '--';
+    }
+    var valueToUse = !isMissing(points) ? points : pointsPossible;
+    return t.number(valueToUse);
+};
+var subPointsText = function(points, pointsPossible) {
+    if (!isMissing(points) && !isMissing(pointsPossible)) {
+        return t("Out of {\n      points, plural,\n      one {# point}\n      other {# points}\n    }", {
+            points: pointsPossible
+        });
+    }
+    if (!isMissing(points)) {
+        return t("Earned {points, plural,\n      one {point}\n      other {points}\n    }", {
+            points: points
+        });
+    }
+    // We use "Points Possible" when only points is present or when nothing is present
+    return t("{points, plural,\n    one {Point}\n    other {Points}\n  } possible", {
+        points: pointsPossible
+    });
+};
+var pointsText = function(points, pointsPossible) {
+    if (!isMissing(points) && !isMissing(pointsPossible)) {
+        return t("{points, number} out of {\n      total, plural,\n      one {# point}\n      other {# points}\n    }", {
+            points: points,
+            total: pointsPossible
+        });
+    }
+    if (!isMissing(points)) {
+        return t("Earned {points, plural,\n      one {# point}\n      other {# points}\n    }", {
+            points: points
+        });
+    }
+    // We use "Points Possible" when only points is present or when nothing is present
+    if (!isMissing(pointsPossible)) {
+        return t("{points, plural,\n      one {# point}\n      other {# points}\n    } possible", {
+            points: pointsPossible
+        });
+    }
+    return t('Unknown Score');
+};
+export var PointsDisplay = function(param) {
+    var points = param.points, pointsPossible = param.pointsPossible;
+    return /*#__PURE__*/ React.createElement(Flex, {
+        margin: "small",
+        padding: "0 0 0 small"
+    }, /*#__PURE__*/ React.createElement(AccessibleContent, {
+        alt: pointsText(points, pointsPossible)
+    }, /*#__PURE__*/ React.createElement(Text, {
+        as: "div",
+        color: "primary",
+        size: "xx-large",
+        weight: "bold"
+    }, mainPointsText(points, pointsPossible)), /*#__PURE__*/ React.createElement(Text, {
+        color: "secondary"
+    }, subPointsText(points, pointsPossible))));
+};
+PointsDisplay.propTypes = {
+    points: PropTypes.string,
+    pointsPossible: PropTypes.string
+};

package/es/common/components/resources/QuizSessionResult/QuizSessionResultInfo/ScoreDisplay/components/Progress.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Text } from '@instructure/ui-text';
+import { Flex } from '@instructure/quiz-common';
+import t from '@instructure/quiz-i18n/format-message';
+import { ProgressCircle } from '@instructure/ui-progress';
+import { formatPercentMax2FractionDigits } from '@instructure/quiz-i18n';
+import { isMissing, UNKNOWN_PERCENTAGE_VALUE } from '../../../../../../util/isMissing';
+var progressTextFormatter = function(param) {
+    var valueNow = param.valueNow;
+    var percentageUnknown = valueNow === UNKNOWN_PERCENTAGE_VALUE;
+    return percentageUnknown ? t('Unknown Score') : t('Your score was {percentage}.', {
+        percentage: formatPercentMax2FractionDigits(valueNow)
+    });
+};
+var progressDisplayFormatter = function(param) {
+    var valueNow = param.valueNow;
+    var valueToShow = valueNow === UNKNOWN_PERCENTAGE_VALUE ? t({
+        id: 'progress_display',
+        default: '?',
+        description: 'placeholder for an unknown percentage value'
+    }) : formatPercentMax2FractionDigits(valueNow);
+    return /*#__PURE__*/ React.createElement(Text, {
+        size: "large",
+        weight: "bold",
+        "data-automation": "sdk-quiz-score-percentage"
+    }, valueToShow);
+};
+export var Progress = function(param) {
+    var percentage = param.percentage, points = param.points, pointsPossible = param.pointsPossible;
+    if (isMissing(points) || isMissing(pointsPossible)) {
+        return null;
+    }
+    return /*#__PURE__*/ React.createElement(Flex, {
+        alignItems: "center",
+        height: "150px",
+        width: "150px",
+        margin: "small",
+        "data-automation": "sdk-info-score"
+    }, /*#__PURE__*/ React.createElement(ProgressCircle, {
+        shouldAnimateOnMount: true,
+        size: "large",
+        screenReaderLabel: t('Your Score'),
+        formatScreenReaderValue: progressTextFormatter,
+        renderValue: progressDisplayFormatter,
+        valueNow: percentage,
+        valueMax: 1
+    }));
+};
+Progress.propTypes = {
+    percentage: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string
+    ]),
+    points: PropTypes.string,
+    pointsPossible: PropTypes.string
+};