Exemple #1
0
const LongDescriptionDialog = ({ open, close, longDescription }) => {
  const modalHeader = I18n.t('Criterion Long Description')
  return (
    <Modal
       open={open}
       onDismiss={close}
       size="medium"
       label={modalHeader}
       shouldCloseOnDocumentClick
    >
      <ModalHeader>
        <CloseButton
          placement="end"
          offset="medium"
          variant="icon"
          onClick={close}
        >
          Close
        </CloseButton>
        <Heading>{modalHeader}</Heading>
      </ModalHeader>
      <ModalBody>
        <Text lineHeight="double">
          <div dangerouslySetInnerHTML={{ __html: longDescription }} />
        </Text>
      </ModalBody>
    </Modal>
  )
  /* eslint-enable react/no-danger */
}
Exemple #2
0
const Threshold = ({ threshold }) => (
  <Text size="x-small" weight="normal">
    {
      I18n.t('threshold: %{pts}', {
        pts: I18n.toNumber(threshold, { precision: 2, strip_insignificant_zeros: true } )
      })
    }
  </Text>
)
const FreeFormComments = (props) => {
  const { savedComments, comments, saveLater, setComments, setSaveLater } = props
  const first = <option key="first" value="first">{I18n.t('[ Select ]')}</option>

  const options = savedComments.map((comment, ix) => (
    // eslint-disable-next-line react/no-array-index-key
    <option key={ix} value={ix.toString()}>{comment}</option>
  ))
  const selector = [
    (
      <Select
        key="select"
        label={I18n.t('Saved Comments')}
        assistiveText={I18n.t('Select from saved comments')}
        onChange={(_unused, el) => { setComments(savedComments[el.value])} }
      >
        {[first, ...options]}
      </Select>
    ),
    <br key="br" />
  ]

  return (
    <div className="edit-freeform-comments">
      {options.length > 0 ? selector : null}
      <TextArea
        label={I18n.t('Comments')}
        maxHeight="50rem"
        onChange={(e) => setComments(e.target.value)}
        resize="vertical"
        size="small"
        value={comments}
      />
      <br />
      <Checkbox
        checked={saveLater}
        label={I18n.t('Save this comment for reuse')}
        size="small"
        onChange={(event) => setSaveLater(event.target.checked)}
      />
    </div>
  )
}
const Comments = (props) => {
  const { assessing, assessment, footer, ...commentProps } = props
  if (!assessing || assessment === null) {
    return (
      <div className="rubric-freeform">
        <CommentText
          assessment={assessment}
          placeholder={I18n.t("This area will be used by the assessor to leave comments related to this criterion.")}
          weight="normal"
        />
        {footer}
      </div>
    )
  }
  else {
    return (
      <FreeFormComments
        comments={assessment.comments}
        saveLater={assessment.saveCommentsForLater}
        {...commentProps}
      />
    )
  }
}
Exemple #5
0
const LongDescription = ({ showLongDescription }) => (
  <Button fluidWidth variant="link" onClick={() => showLongDescription()}>
    <Text size="x-small">{I18n.t('view longer description')}</Text>
  </Button>
)
Exemple #6
0
const OutcomeIcon = () => (
  <span>
    <IconOutcomes />&nbsp;
    <ScreenReaderContent>{I18n.t('This criterion is linked to a Learning Outcome')}</ScreenReaderContent>
  </span>
)