Example #1
0
function unavailableStepContainer(props) {
  return (
    <div className="steps-container" data-testid="unavailable-step-container">
      {props.isCollapsed && renderCollapsedContainer(I18n.t('Unvailable'))}
      <Steps isCollapsed={props.isCollapsed}>
        <StepItem label={I18n.t('Unavailable')} status="unavailable" />
        <StepItem label={I18n.t('Upload')} />
        <StepItem label={I18n.t('Submit')} />
        <StepItem label={I18n.t('Not Graded Yet')} />
      </Steps>
    </div>
  )
}
Example #2
0
function availableStepContainer(props) {
  return (
    <div className="steps-container">
      {props.isCollapsed && (
        <div className="steps-main-status-label">
          <Text weight="bold">{props.collapsedLabel}</Text>
        </div>
      )}
      <Steps isCollapsed={props.isCollapsed}>
        <StepItem label={I18n.t('Available')} status="complete" />
        <StepItem
          status="in-progress"
          label={status =>
            status && status !== 'in-progress' ? I18n.t('Uploaded') : I18n.t('Upload')
          }
        />
        <StepItem
          label={status =>
            status && status !== 'in-progress' ? I18n.t('Submitted') : I18n.t('Submit')
          }
        />
        <StepItem
          label={status =>
            status && status !== 'in-progress' ? I18n.t('Graded') : I18n.t('Not Graded')
          }
        />
      </Steps>
    </div>
  )
}
Example #3
0
function unavailableStepContainer(props) {
  return (
    <div className="steps-container">
      {props.isCollapsed && (
        <div className="steps-main-status-label">
          <Text weight="bold">{props.collapsedLabel}</Text>
        </div>
      )}
      <Steps isCollapsed={props.isCollapsed}>
        <StepItem label={I18n.t('Unavailable')} status="unavailable" />
        <StepItem label={I18n.t('Upload')} />
        <StepItem label={I18n.t('Submit')} />
        <StepItem label={I18n.t('Not Graded')} />
      </Steps>
    </div>
  )
}
Example #4
0
function submittedStepContainer(props) {
  return (
    <div className="steps-container" data-testid="submitted-step-container">
      {props.isCollapsed && renderCollapsedContainer(I18n.t('Submitted'))}
      <Steps isCollapsed={props.isCollapsed}>
        <StepItem label={I18n.t('Available')} status="complete" />
        <StepItem label={I18n.t('Uploaded')} status="complete" />
        <StepItem
          label={
            <Flex direction="column">
              <FlexItem>{I18n.t('Submitted')}</FlexItem>
              <FlexItem>
                <FriendlyDatetime
                  format={I18n.t('#date.formats.full')}
                  dateTime={props.assignment.submissionsConnection.nodes[0].submittedAt}
                />
              </FlexItem>
            </Flex>
          }
          status="complete"
        />
        <StepItem label={I18n.t('Not Graded Yet')} />
      </Steps>
    </div>
  )
}
Example #5
0
function gradedStepContainer(props) {
  return (
    <div className="steps-container" data-testid="graded-step-container">
      {props.isCollapsed && renderCollapsedContainer(I18n.t('Graded'))}
      <Steps isCollapsed={props.isCollapsed}>
        <StepItem label={I18n.t('Available')} status="complete" />
        <StepItem label={I18n.t('Uploaded')} status="complete" />
        <StepItem
          label={
            <Flex direction="column">
              <FlexItem>{I18n.t('Submitted')}</FlexItem>
              <FlexItem>
                <FriendlyDatetime
                  format={I18n.t('#date.formats.full')}
                  dateTime={props.assignment.submissionsConnection.nodes[0].submittedAt}
                />
              </FlexItem>
            </Flex>
          }
          status="complete"
        />
        <StepItem
          label={
            <Flex direction="column">
              <FlexItem>{I18n.t('Grade')}</FlexItem>
              <FlexItem>
                <GradeDisplay
                  displaySize="small"
                  gradingType={props.assignment.gradingType}
                  pointsPossible={props.assignment.pointsPossible}
                  receivedGrade={props.assignment.submissionsConnection.nodes[0].grade}
                />
              </FlexItem>
            </Flex>
          }
          status="complete"
        />
      </Steps>
    </div>
  )
}
Example #6
0
 label={status =>
   status && status !== 'in-progress' ? I18n.t('Graded') : I18n.t('Not Graded')
Example #7
0
 label={status =>
   status && status !== 'in-progress' ? I18n.t('Submitted') : I18n.t('Submit')
Example #8
0
 label={status =>
   status && status !== 'in-progress' ? I18n.t('Uploaded') : I18n.t('Upload')