Skip to content

Commit

Permalink
refactor latepolicystatus and headeer
Browse files Browse the repository at this point in the history
Test Plan:
- specs pass

Change-Id: Ie7513848579b3f0d22e595b09a1365713e4264c4
Reviewed-on: https://gerrit.instructure.com/179524
Tested-by: Jenkins
Reviewed-by: Aaron Hsu <[email protected]>
QA-Review: Steven Burnett <[email protected]>
Product-Review: Steven Burnett <[email protected]>
  • Loading branch information
sdb1228 committed Jan 29, 2019
1 parent 9817c11 commit 23dfa54
Show file tree
Hide file tree
Showing 4 changed files with 136 additions and 110 deletions.
30 changes: 5 additions & 25 deletions app/jsx/assignments_2/student/components/Header.js
Original file line number Diff line number Diff line change
Expand Up @@ -85,9 +85,7 @@ class Header extends React.Component {
<FlexItem grow>
<GradeDisplay
gradingType={this.props.assignment.gradingType}
receivedGrade={
this.props.assignment.submissionsConnection && submission && submission.grade
}
receivedGrade={submission.grade}
pointsPossible={this.props.assignment.pointsPossible}
/>
<FlexItem as="div" align="end" textAlign="end">
Expand All @@ -99,32 +97,14 @@ class Header extends React.Component {
<LatePolicyStatusDisplay
gradingType={this.props.assignment.gradingType}
pointsPossible={this.props.assignment.pointsPossible}
originalGrade={
this.props.assignment.submissionsConnection &&
submission &&
submission.enteredGrade
}
pointsDeducted={
this.props.assignment.submissionsConnection &&
submission &&
submission.deductedPoints
}
grade={
this.props.assignment.submissionsConnection &&
submission &&
submission.grade
}
originalGrade={submission.enteredGrade}
pointsDeducted={submission.deductedPoints}
grade={submission.grade}
/>
</FlexItem>
)}
<FlexItem grow>
<SubmissionStatusPill
submissionStatus={
this.props.assignment.submissionsConnection &&
submission &&
submission.submissionStatus
}
/>
<SubmissionStatusPill submissionStatus={submission.submissionStatus} />
</FlexItem>
</Flex>
</FlexItem>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
/*
* Copyright (C) 2018 - present Instructure, Inc.
*
* This file is part of Canvas.
*
* Canvas is free software: you can redistribute it and/or modify it under
* the terms of the GNU Affero General Public License as published by the Free
* Software Foundation, version 3 of the License.
*
* Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
* A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
* details.
*
* You should have received a copy of the GNU Affero General Public License along
* with this program. If not, see <http://www.gnu.org/licenses/>.
*/

import React from 'react'
import I18n from 'i18n!assignments_2_thing'
import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent'
import PropTypes from 'prop-types'
import GradeFormatHelper from '../../../../gradebook/shared/helpers/GradeFormatHelper'

function AccessibleTipContent(props) {
const {gradingType, grade, originalGrade, pointsDeducted, pointsPossible} = props
return (
<ScreenReaderContent data-test-id="late-policy-accessible-tip-content">
{I18n.t('Attempt 1: %{grade}', {
grade: GradeFormatHelper.formatGrade(originalGrade, {
gradingType,
pointsPossible,
formatType: 'points_out_of_fraction'
})
})}
{I18n.t(
{one: 'Late Penalty: minus 1 Point', other: 'Late Penalty: minus %{count} Points'},
{count: pointsDeducted}
)}
{I18n.t('Grade: %{grade}', {
grade: GradeFormatHelper.formatGrade(grade, {
gradingType,
pointsPossible,
formatType: 'points_out_of_fraction'
})
})}
</ScreenReaderContent>
)
}

AccessibleTipContent.propTypes = {
grade: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
gradingType: PropTypes.string.isRequired,
originalGrade: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
pointsDeducted: PropTypes.number.isRequired,
pointsPossible: PropTypes.number.isRequired
}

export default React.memo(AccessibleTipContent)
Original file line number Diff line number Diff line change
Expand Up @@ -18,40 +18,10 @@
import I18n from 'i18n!assignments_2_thing'
import PropTypes from 'prop-types'
import React from 'react'
import Tooltip from '@instructure/ui-overlays/lib/components/Tooltip'
import Link from '@instructure/ui-elements/lib/components/Link'
import Text from '@instructure/ui-elements/lib/components/Text'
import Flex, {FlexItem} from '@instructure/ui-layout/lib/components/Flex'
import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent'
import GradeFormatHelper from '../../../gradebook/shared/helpers/GradeFormatHelper'

function AccessibleTipContent(props) {
const {gradingType, grade, originalGrade, pointsDeducted, pointsPossible} = props
return (
<ScreenReaderContent data-test-id="late-policy-accessible-tip-content">
{I18n.t('Attempt 1: %{grade}', {
grade: GradeFormatHelper.formatGrade(originalGrade, {
gradingType,
pointsPossible,
formatType: 'points_out_of_fraction'
})
})}
{I18n.t(
{one: 'Late Penalty: minus 1 Point', other: 'Late Penalty: minus %{count} Points'},
{count: pointsDeducted}
)}
{I18n.t('Grade: %{grade}', {
grade: GradeFormatHelper.formatGrade(grade, {
gradingType,
pointsPossible,
formatType: 'points_out_of_fraction'
})
})}
</ScreenReaderContent>
)
}

//---------------------------------------------------------------------------------------------------
import GradeFormatHelper from '../../../../gradebook/shared/helpers/GradeFormatHelper'
import AccessibleTipContent from './AccessibleTipContent'

function LatePolicyToolTipContent(props) {
const {gradingType, grade, originalGrade, pointsDeducted, pointsPossible} = props
Expand Down Expand Up @@ -117,50 +87,6 @@ function LatePolicyToolTipContent(props) {
)
}

//-----------------------------------------------------------------------------------------------------

function LatePolicyStatusDisplay(props) {
const {gradingType, grade, originalGrade, pointsDeducted, pointsPossible} = props
return (
<div data-test-id="late-policy-container">
<Text size="medium">{I18n.t('Late Policy:')}</Text>
<Tooltip
tip={
<LatePolicyToolTipContent
grade={grade}
gradingType={gradingType}
originalGrade={originalGrade}
pointsDeducted={pointsDeducted}
pointsPossible={pointsPossible}
/>
}
as={Link}
on={['hover', 'focus']}
placement="start"
href="#"
>
<ScreenReaderContent>
{I18n.t(
{one: 'Late Policy: minus 1 Point', other: 'Late Policy: minus %{count} Points'},
{count: props.pointsDeducted}
)}
</ScreenReaderContent>
<Text aria-hidden="true" size="medium">
{I18n.t({one: '-1 Point', other: '-%{count} Points'}, {count: props.pointsDeducted})}
</Text>
</Tooltip>
</div>
)
}

AccessibleTipContent.propTypes = {
grade: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
gradingType: PropTypes.string.isRequired,
originalGrade: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
pointsDeducted: PropTypes.number.isRequired,
pointsPossible: PropTypes.number.isRequired
}

LatePolicyToolTipContent.propTypes = {
grade: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
gradingType: PropTypes.string.isRequired,
Expand All @@ -169,12 +95,4 @@ LatePolicyToolTipContent.propTypes = {
pointsPossible: PropTypes.number.isRequired
}

LatePolicyStatusDisplay.propTypes = {
grade: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
gradingType: PropTypes.string.isRequired,
originalGrade: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
pointsDeducted: PropTypes.number.isRequired,
pointsPossible: PropTypes.number.isRequired
}

export default React.memo(LatePolicyStatusDisplay)
export default React.memo(LatePolicyToolTipContent)
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
/*
* Copyright (C) 2018 - present Instructure, Inc.
*
* This file is part of Canvas.
*
* Canvas is free software: you can redistribute it and/or modify it under
* the terms of the GNU Affero General Public License as published by the Free
* Software Foundation, version 3 of the License.
*
* Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
* A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
* details.
*
* You should have received a copy of the GNU Affero General Public License along
* with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import I18n from 'i18n!assignments_2_thing'
import PropTypes from 'prop-types'
import React from 'react'
import Tooltip from '@instructure/ui-overlays/lib/components/Tooltip'
import Link from '@instructure/ui-elements/lib/components/Link'
import Text from '@instructure/ui-elements/lib/components/Text'
import LatePolicyToolTipContent from './LatePolicyToolTipContent'
import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent'

function LatePolicyStatusDisplay(props) {
const {gradingType, grade, originalGrade, pointsDeducted, pointsPossible} = props
return (
<div data-test-id="late-policy-container">
<Text size="medium">{I18n.t('Late Policy:')}</Text>
<Tooltip
tip={
<LatePolicyToolTipContent
grade={grade}
gradingType={gradingType}
originalGrade={originalGrade}
pointsDeducted={pointsDeducted}
pointsPossible={pointsPossible}
/>
}
as={Link}
on={['hover', 'focus']}
placement="start"
href="#"
>
<ScreenReaderContent>
{I18n.t(
{one: 'Late Policy: minus 1 Point', other: 'Late Policy: minus %{count} Points'},
{count: props.pointsDeducted}
)}
</ScreenReaderContent>
<Text aria-hidden="true" size="medium">
{I18n.t({one: '-1 Point', other: '-%{count} Points'}, {count: props.pointsDeducted})}
</Text>
</Tooltip>
</div>
)
}

LatePolicyStatusDisplay.propTypes = {
grade: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
gradingType: PropTypes.string.isRequired,
originalGrade: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
pointsDeducted: PropTypes.number.isRequired,
pointsPossible: PropTypes.number.isRequired
}

export default React.memo(LatePolicyStatusDisplay)

0 comments on commit 23dfa54

Please sign in to comment.