Skip to content

Commit 3595f50

Browse files
leangseu-edxleangseu-edx
committed
chore: update ui and messages
1 parent bc5a062 commit 3595f50

File tree

6 files changed

+271
-36
lines changed

6 files changed

+271
-36
lines changed

‎src/components/ProgressBar/index.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -119,13 +119,13 @@ export const ProgressBar = () => {
119119
<SubmissionStep />
120120
{stepConfig.order.map(step => {
121121
if (step === 'peer') {
122-
return <PeerAssessStep />;
122+
return <PeerAssessStep key={step} />;
123123
}
124124
if (step === 'training') {
125-
return <TrainingStep />;
125+
return <TrainingStep key={step}/>;
126126
}
127127
if (step === 'self') {
128-
return <SelfAssessStep />;
128+
return <SelfAssessStep key={step}/>;
129129
}
130130
return null;
131131
})}

‎src/components/StatefulStatus/index.jsx

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import { Alert, Badge } from '@edx/paragon';
5+
import { CheckCircle, Info, WarningFilled } from '@edx/paragon/icons';
6+
7+
const alertMap = {
8+
success: {
9+
variant: 'success',
10+
icon: CheckCircle,
11+
},
12+
error: {
13+
variant: 'danger',
14+
icon: Info,
15+
},
16+
cancelled: {
17+
variant: 'warning',
18+
icon: WarningFilled,
19+
},
20+
default: {
21+
variant: 'dark',
22+
icon: null,
23+
}
24+
};
25+
26+
export const statefulStates = Object.keys(alertMap);
27+
28+
const StatefulStatus = ({ state, status }) => {
29+
const { headerText, badgeText, content } = status[state];
30+
31+
const { variant, icon } = alertMap[state];
32+
33+
return (
34+
<>
35+
<Badge variant={variant}>{badgeText}</Badge>
36+
<span className='ml-2'>{headerText}</span>
37+
{state !== 'default' ? (
38+
<Alert variant={variant} icon={icon}>
39+
{content}
40+
</Alert>
41+
) : (
42+
content
43+
)}
44+
</>
45+
);
46+
};
47+
48+
const statusProps = PropTypes.shape({
49+
badgeText: PropTypes.string.isRequired,
50+
headerText: PropTypes.string.isRequired,
51+
content: PropTypes.node,
52+
});
53+
54+
StatefulStatus.propTypes = {
55+
state: PropTypes.oneOf(statefulStates)
56+
.isRequired,
57+
status: PropTypes.objectOf(statusProps).isRequired,
58+
};
59+
60+
export default StatefulStatus;

‎src/index.scss

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,24 @@
2323
.spinner-md {
2424
height: 100px;
2525
width: 100px;
26-
}
26+
}
27+
28+
.gap-0 {
29+
gap: map-get($spacers, 0);
30+
}
31+
32+
.gap-1 {
33+
gap: map-get($spacers, 1);
34+
}
35+
36+
.gap-2 {
37+
gap: map-get($spacers, 2);
38+
}
39+
40+
.gap-3 {
41+
gap: map-get($spacers, 3);
42+
}
43+
44+
.gap-4 {
45+
gap: map-get($spacers, 4);
46+
}

‎src/views/SelfAssessmentView/AssessmentContentLayout.jsx

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,26 @@ import PropTypes from 'prop-types';
44
import { Col, Row } from '@edx/paragon';
55

66
import Rubric from 'components/Rubric';
7+
import { statefulStates } from 'components/StatefulStatus';
78
import AssessmentContent from './AssessmentContent';
9+
import AssessmentStatus from './AssessmentStatus';
810

911
import './AssessmentContentLayout.scss';
1012

11-
const AssessmentContentLayout = ({
12-
submission,
13-
oraConfigData,
14-
}) => (
15-
<div className="assessment-content-layout mr-auto ml-auto">
16-
<div className="content-wrapper">
17-
<Row className="flex-nowrap m-0">
18-
<Col className="p-0">
13+
const AssessmentContentLayout = ({ submission, oraConfigData }) => (
14+
<div className='assessment-content-layout mr-auto ml-auto'>
15+
<div className='content-wrapper'>
16+
<Row className='flex-nowrap m-0'>
17+
<Col className='p-0'>
18+
{
19+
statefulStates.map((status) => (
20+
<AssessmentStatus
21+
key={status}
22+
status={status}
23+
dueDate={oraConfigData.assessmentSteps.settings.self.endTime}
24+
/>
25+
))
26+
}
1927
<AssessmentContent
2028
submission={submission}
2129
oraConfigData={oraConfigData}

‎src/views/SelfAssessmentView/AssessmentStatus.jsx

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import { Button, Alert, Icon } from '@edx/paragon';
5+
import { Edit } from '@edx/paragon/icons';
6+
import { useIntl } from '@edx/frontend-platform/i18n';
7+
8+
import StatefulStatus from 'components/StatefulStatus';
9+
import messages from './messages';
10+
11+
const AssessmentStatus = ({ status, dueDate }) => {
12+
const { formatMessage } = useIntl();
13+
return (
14+
<StatefulStatus
15+
state={status}
16+
status={{
17+
default: {
18+
badgeText: formatMessage(messages.inProgressBadge),
19+
headerText: formatMessage(messages.inProgressHeader, { dueDate }),
20+
content: (
21+
<div>
22+
<p>
23+
<strong>{formatMessage(messages.instructions)}: </strong>{formatMessage(messages.inProgressText)}
24+
</p>
25+
26+
<Button
27+
className='d-flex m-auto'
28+
variant='primary'
29+
onClick={() => {}}
30+
>
31+
<Icon src={Edit} />
32+
{formatMessage(messages.inProgressButton)}
33+
</Button>
34+
</div>
35+
),
36+
},
37+
success: {
38+
badgeText: formatMessage(messages.completedBadge),
39+
headerText: formatMessage(messages.completedHeader),
40+
content: (
41+
<div className='d-flex align-items-center'>
42+
<div className='d-flex flex-column'>
43+
<Alert.Heading>{formatMessage(messages.completedBodyHeader)}</Alert.Heading>
44+
<p>
45+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
46+
Nullam euismod, nisl eget ultricies aliquet, mauris quam
47+
sodales
48+
</p>
49+
</div>
50+
<Button
51+
className='text-nowrap'
52+
variant='primary'
53+
onClick={() => {}}
54+
>
55+
{formatMessage(messages.completedBodyButton)}
56+
</Button>
57+
</div>
58+
),
59+
},
60+
error: {
61+
badgeText: formatMessage(messages.errorBadge),
62+
headerText: formatMessage(messages.errorHeader),
63+
content: (
64+
<>
65+
<Alert.Heading>
66+
{formatMessage(messages.errorBodyHeader)}
67+
</Alert.Heading>
68+
<p>
69+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
70+
euismod, nisl eget ultricies aliquet, mauris quam sodales
71+
</p>
72+
</>
73+
),
74+
},
75+
cancelled: {
76+
badgeText: formatMessage(messages.cancelledBadge),
77+
headerText: formatMessage(messages.cancelledHeader, { dueDate }),
78+
content: (
79+
<>
80+
<Alert.Heading>{formatMessage(messages.cancelledBodyHeader)}</Alert.Heading>
81+
<p>
82+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
83+
euismod, nisl eget ultricies aliquet, mauris quam sodales
84+
</p>
85+
</>
86+
),
87+
},
88+
}}
89+
/>
90+
);
91+
};
92+
93+
AssessmentStatus.propTypes = {
94+
status: PropTypes.oneOf(['default', 'success', 'error', 'cancelled'])
95+
.isRequired,
96+
dueDate: PropTypes.string,
97+
};
98+
99+
export default AssessmentStatus;

‎src/views/SelfAssessmentView/messages.js

Lines changed: 72 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -19,30 +19,78 @@ const messages = defineMessages({
1919
it.`,
2020
description: 'Description for the instructions textarea',
2121
},
22-
submissionActionSubmit: {
23-
id: 'ora-grading.AssessmentAction.submit',
24-
defaultMessage: 'Submit response',
25-
description: 'Submit button text',
26-
},
27-
submissionActionSubmitting: {
28-
id: 'ora-grading.AssessmentAction.submitting',
29-
defaultMessage: 'Submitting response',
30-
description: 'Submit button text while submitting',
31-
},
32-
submissionActionSubmitted: {
33-
id: 'ora-grading.AssessmentAction.submitted',
34-
defaultMessage: 'Response submitted',
35-
description: 'Submit button text after successful submission',
36-
},
37-
saveActionSave: {
38-
id: 'ora-grading.SaveAction.save',
39-
defaultMessage: 'Finish later',
40-
description: 'Save for later button text',
41-
},
42-
saveActionSaving: {
43-
id: 'ora-grading.SaveAction.saving',
44-
defaultMessage: 'Saving response',
45-
description: 'Save for later button text while saving',
22+
inProgressBadge: {
23+
id: 'ora-grading.AssessmentView.inProgressBadge',
24+
defaultMessage: 'In Progress',
25+
description: 'Label for the in progress badge',
26+
},
27+
inProgressHeader: {
28+
id: 'ora-grading.AssessmentView.inProgressHeader',
29+
defaultMessage: 'Self-grading due by {dueDate}',
30+
description: 'Header for the in progress badge',
31+
},
32+
inProgressText: {
33+
id: 'ora-grading.AssessmentView.inProgressBadgeText',
34+
defaultMessage: `Assess your own response and give
35+
yourself a grade. Progress will be saved automatically and you
36+
can return to complete your self assessment at any time. After
37+
you submit your grade, you cannot edit it.`,
38+
description: 'Description for the in progress badge',
39+
},
40+
inProgressButton: {
41+
id: 'ora-grading.AssessmentView.inProgressButton',
42+
defaultMessage: 'Begin self assessment',
43+
description: 'Label for button to begin self assessment',
44+
},
45+
completedBadge: {
46+
id: 'ora-grading.AssessmentView.completedBadge',
47+
defaultMessage: 'Completed',
48+
description: 'Label for the completed badge',
49+
},
50+
completedHeader: {
51+
id: 'ora-grading.AssessmentView.completedHeader',
52+
defaultMessage: 'Practice grading is complete!',
53+
description: 'Header for the completed badge',
54+
},
55+
completedBodyHeader: {
56+
id: 'ora-grading.AssessmentView.completedBodyHeader',
57+
defaultMessage: 'Practice grading complete',
58+
description: 'Alert header for the completed badge',
59+
},
60+
completedBodyButton: {
61+
id: 'ora-grading.AssessmentView.completedBodyButton',
62+
defaultMessage: 'Begin peer grading',
63+
description: 'Label for button to view your grade',
64+
},
65+
errorBadge: {
66+
id: 'ora-grading.AssessmentView.errorBadge',
67+
defaultMessage: 'Incomplete',
68+
description: 'Label for the incomplete badge',
69+
},
70+
errorHeader: {
71+
id: 'ora-grading.AssessmentView.errorBadgeHeader',
72+
defaultMessage: 'This step is past due!',
73+
description: 'Header for the incomplete badge',
74+
},
75+
errorBodyHeader: {
76+
id: 'ora-grading.AssessmentView.errorBodyHeader',
77+
defaultMessage: 'The due date for this step has passed',
78+
description: 'Alert header for the incomplete badge',
79+
},
80+
cancelledBadge: {
81+
id: 'ora-grading.AssessmentView.cancelledBadge',
82+
defaultMessage: 'Cancelled',
83+
description: 'Label for the cancelled badge',
84+
},
85+
cancelledHeader: {
86+
id: 'ora-grading.AssessmentView.cancelledBadgeHeader',
87+
defaultMessage: 'Self-grading Due by {dueDate}',
88+
description: 'Header for the cancelled badge',
89+
},
90+
cancelledBodyHeader: {
91+
id: 'ora-grading.AssessmentView.cancelledBodyHeader',
92+
defaultMessage: 'This step has been cancelled',
93+
description: 'Alert header for the cancelled badge',
4694
},
4795
});
4896

0 commit comments

Comments
 (0)