From e6247f458e6e7c1748ec5ddf013c78b73317fd78 Mon Sep 17 00:00:00 2001 From: Ben Warzeski Date: Fri, 29 Oct 2021 10:25:20 -0400 Subject: [PATCH] feat: i18n Rubric --- src/containers/Rubric/Rubric.scss | 12 +++--- src/containers/Rubric/RubricFeedback.jsx | 19 ++++++++-- src/containers/Rubric/RubricFeedback.test.jsx | 20 ++++++---- .../RubricFeedback.test.jsx.snap | 38 +++++++++++-------- .../Rubric/__snapshots__/index.test.jsx.snap | 18 +++++++-- src/containers/Rubric/index.jsx | 6 ++- src/containers/Rubric/messages.js | 31 +++++++++++++++ 7 files changed, 108 insertions(+), 36 deletions(-) create mode 100644 src/containers/Rubric/messages.js 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;