diff --git a/src/containers/Rubric/Rubric.scss b/src/containers/Rubric/Rubric.scss
index a0360b5..451c2d5 100644
--- a/src/containers/Rubric/Rubric.scss
+++ b/src/containers/Rubric/Rubric.scss
@@ -6,14 +6,16 @@
width: 100%;
.criteria-title {
display: inline-block;
- max-width: calc(100% - 36px);
+ max-width: calc(100% - 44px);
color: $primary-500;
- font-size: 1.5rem;
font-weight: bold;
+ vertical-align: top;
}
- .criteria-help-icon {
+ .esg-help-icon {
float: right;
- margin-right: -12px;
+ margin-top: (map-get($spacers, 2) * -1);
+ margin-right: (map-get($spacers, 2\.5) * -1);
+ vertical-align: top;
}
}
.criteria-option {
@@ -39,7 +41,7 @@
.popover.overlay-help-popover {
z-index: 4000;
.help-popover-option {
- margin-bottom: 1rem;
+ margin-bottom: map-get($spacers, 1);
}
}
diff --git a/src/containers/Rubric/RubricFeedback.jsx b/src/containers/Rubric/RubricFeedback.jsx
index fcacfac..e5ccbeb 100644
--- a/src/containers/Rubric/RubricFeedback.jsx
+++ b/src/containers/Rubric/RubricFeedback.jsx
@@ -3,12 +3,15 @@ import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Form } from '@edx/paragon';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { feedbackRequirement } from 'data/services/lms/constants';
import actions from 'data/actions';
import selectors from 'data/selectors';
import InfoPopover from 'components/InfoPopover';
+import messages from './messages';
+
/**
*
*/
@@ -22,6 +25,12 @@ export class RubricFeedback extends React.Component {
this.props.setValue(event.target.value);
}
+ get inputLabel() {
+ return this.props.intl.formatMessage(
+ this.props.isGrading ? messages.addComments : messages.comments,
+ );
+ }
+
render() {
const {
isGrading,
@@ -36,7 +45,9 @@ export class RubricFeedback extends React.Component {
return (
- Overall comments
+
+
+
{feedbackPrompt}
@@ -44,7 +55,7 @@ export class RubricFeedback extends React.Component {
'InfoPopover');
-jest.mock('@edx/paragon', () => ({
- Form: {
- Group: () => 'Form.Group',
- Label: () => 'Form.Label',
- Control: () => 'Form.Control',
- },
-}));
+jest.mock('@edx/paragon', () => {
+ const Form = () => 'Form';
+ Object.defineProperty(Form, 'name', { value: 'Form' });
+ Form.Group = 'Form.Group';
+ Form.Label = 'Form.Label';
+ Form.Control = 'Form.Control';
+ return { Form };
+});
jest.mock('data/selectors', () => ({
__esModule: true,
@@ -48,8 +51,9 @@ jest.mock('data/selectors', () => ({
},
}));
-describe('Review Feedback component', () => {
+describe('Rubric Feedback component', () => {
const props = {
+ intl: { formatMessage },
config: 'config stirng',
isGrading: true,
value: 'some value',
diff --git a/src/containers/Rubric/__snapshots__/RubricFeedback.test.jsx.snap b/src/containers/Rubric/__snapshots__/RubricFeedback.test.jsx.snap
index c021a2b..b25f2ee 100644
--- a/src/containers/Rubric/__snapshots__/RubricFeedback.test.jsx.snap
+++ b/src/containers/Rubric/__snapshots__/RubricFeedback.test.jsx.snap
@@ -1,24 +1,28 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Review Feedback component snapshot is configure to disabled 1`] = `null`;
+exports[`Rubric Feedback component snapshot is configure to disabled 1`] = `null`;
-exports[`Review Feedback component snapshot is graded 1`] = `
-
-
-
+
-
+
`;
-exports[`Review Feedback component snapshot is grading 1`] = `
-
-
-
+
-
+
`;
diff --git a/src/containers/Rubric/__snapshots__/index.test.jsx.snap b/src/containers/Rubric/__snapshots__/index.test.jsx.snap
index 16b1da3..fc0a4e4 100644
--- a/src/containers/Rubric/__snapshots__/index.test.jsx.snap
+++ b/src/containers/Rubric/__snapshots__/index.test.jsx.snap
@@ -8,7 +8,11 @@ exports[`Rubric Container snapshot is grading 1`] = `
className="grading-rubric-body"
>
- Rubric
+
@@ -57,7 +65,11 @@ exports[`Rubric Container snapshot is not grading 1`] = `
className="grading-rubric-body"
>
- Rubric
+
(
- Rubric
+
{criteriaIndices.map((index) => (
(
{isGrading && (
-
+
)}
diff --git a/src/containers/Rubric/messages.js b/src/containers/Rubric/messages.js
new file mode 100644
index 0000000..9b56321
--- /dev/null
+++ b/src/containers/Rubric/messages.js
@@ -0,0 +1,31 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+ rubric: {
+ id: 'ora-grading.Rubric.rubric',
+ defaultMessage: 'Rubric',
+ description: 'Rubric interface label',
+ },
+ submitGrade: {
+ id: 'ora-grading.Rubric.submitGrade',
+ defaultMessage: 'Submit grade',
+ description: 'Submit Grade button text',
+ },
+ overallComments: {
+ id: 'ora-grading.Rubric.overallComments',
+ defaultMessage: 'Overall comments',
+ description: 'Rubric overall commnents label',
+ },
+ addComments: {
+ id: 'ora-grading.Rubric.addComments',
+ defaultMessage: 'Add comments',
+ description: 'Rubric comments input label',
+ },
+ comments: {
+ id: 'ora-grading.Rubric.comments',
+ defaultMessage: 'Comments',
+ description: 'Rubric comments display label',
+ },
+});
+
+export default messages;