react-learning-outcome-description-component

#react-learning-outcome-description-component

A React component for rendering a learning outcome description with the smarts to treat trusted and untrusted outcomes appropriately.

Props: learningOutcomeDescription: React.PropTypes.string.isRequired source: React.PropTypes.string.isRequired learningOutcomeId: React.PropTypes.string.isRequired label: React.PropTypes.string listId: React.PropTypes.string notation: React.PropTypes.string

If the source is 'asn', learningOutcomeDescription is considered to be trusted and is rendered dangerously in a span with class 'lo-desc-dangerous'. If the source is not 'asn', the text is written to a span with class 'lo-desc' and is not rendered dangerously.

If the label is provided it is displayed first in a span. If the notation or listId are provided, only one is displayed and the notation is preferred over the listId. The notation/listId is also displayed in a span, but second, after the label.

All of the above are wrapped by a div.

Installation

Install from NPM:

npm install react-learning-outcome-description-component

Usage

Require the component:

var LoDescription = require( 'react-learning-outcome-description-component' );

And then use the component as a container for your learning outcome description:

var AppComponent = React.createClass({
     ...
     render: function() {
     	  ...
     	  var loresOutcome; // Assign the learning outcome from the LOReS service
     	  ...
          var desc = ( <LoDescription outcome={outcome} /> );
          ...
     },
     ...
});

Code Style

This repository is configured with EditorConfig rules and contributions should make use of them. See the VUI Best Practices & Style Guide for more information.