info button content udpates and release note framewwork added

webpack/components/InfoModalBodyContent.js

@@ -12,13 +12,13 @@ export default class InfoModalBodyContent extends Component {
 
   getContentStageInfoBody() {
     if(this.props.contentStage == 'Draft')        {
-      return <p>Content is being worked on by its Authors and Publisher. It is generally not considered to be “complete” and unlikely ready for comment. Content at this Level should not be used. This is the initial status assigned to newly created content.</p>;
+      return <p>Content that is being worked on by its Authors and Publisher. It is generally not considered to be “complete” and unlikely ready for comment. Content at this Level should not be used. This is the initial status assigned to newly created content.</p>;
     }   else if(this.props.contentStage == 'Comment Only')     {
-      return <p>Content is being worked on by its Authors and Publisher. It is generally not considered to be “complete” but is ready for viewing and comment. Content at this Level should not be used.</p>;
+      return <p>Content that is being worked on by its Authors and Publisher. It is generally not considered to be “complete” but is ready for viewing and comment. Content at this Level should not be used.</p>;
     }   else if(this.props.contentStage == 'Trial Use')        {
       return <p>Content that the Authors and Publisher believe is ready for User viewing, testing and/or comment. It is generally “complete”, but not final. Content at this Level should not be used to support public health response.</p>;
     }   else if(this.props.contentStage == 'Published')        {
-      return <p>A publicly available version of content that is ready for viewing, downloading, comments, and use for public health response.  Content is automatically updated to this stage at the time it is made public.</p>;
+      return <p>A publicly available version of content that is ready for viewing, downloading, comments, and use for public health response.  Content that is automatically updated to this stage at the time it is made public.</p>;
     }    else if(this.props.contentStage == 'Retired')         {
       return <p>Content that is no longer the most recent version (not latest). However, this content could be used with no known risk.</p>;
     }    else if(this.props.contentStage == 'Duplicate')       {
@@ -28,12 +28,11 @@ export default class InfoModalBodyContent extends Component {
 
   getVisibilityInfoBody() {
     if(this.props.visibility == 'private')        {
-      return <p>When content is initially created or imported in Vocabulary Service, it is created with private visibility. Private content is only visible to the user who authored it, users that belong to a group that the content is added to, and to all Publishers in the system. Content with this visibility can be modified until the author or authoring group is ready to make the content public.</p>;
+      return <p>Private content is only visible to the user who authored it, users that belong to a group that the content is added to, and to all Publishers in the system. Content with this visibility can be modified until the author or authoring group is ready to make the content public. When content is initially created or imported into the Vocabulary Service, it is created with private visibility.
+        <br/><br/>Whenever an author or authoring group is ready to share their content publicly, an author must send a publish request to their program Publisher to change the visibility  to public.</p>;
     }   else if(this.props.visibility == 'public')     {
-      return <p>Whenever an author or authoring group is ready to share their content publicly, an author must send a request to their program Publisher to change the visibility in the Vocabulary Service. Public content is visible to everyone who visits the Vocabulary Service website including users without authenticated accounts. This allows for authors to share their Vocabulary Service content with a wide public health audience. Once a version is made public, it cannot be undone.
-          <br/>
-          <br/>
-          An author can use the content stage attribute to indicate the maturity of a specific version of content and can create a new version when necessary. Authors can request that public content is “retired” which hides the content from dashboard search results.</p>;
+      return <p>Public content is visible to everyone who visits the Vocabulary Service website including users without authenticated accounts. This allows for authors to share their Vocabulary Service content with a wide public health audience. Once a version is made public, it cannot be undone; however authors can request that public content is “retired” which hides the content from dashboard search results.
+        <br/><br/>An author can use the “content stage” attribute to indicate the maturity of a specific version of public content (like published or trial use) or can create a new version when updates are necessary. </p>;
     }
   }
 
@@ -63,11 +62,6 @@ export default class InfoModalBodyContent extends Component {
     <p><strong>Mutability: </strong>Any changes to entries in the Code System Mappings table are versioned since code system mappings are a property of the vocabulary itself. This allows users to update the Code System Mappings while maintaining legacy mappings in older SDP-V content versions if needed.</p>
     <p><strong>Discoverability: </strong>Code System Mappings table fields are included in the dashboard search algorithm so other users can find questions, sections, and surveys with specific concept names, concept identifiers or code system identifiers in SDP-V. For instance, a user can enter “27268008” into the dashboard search box to find content in SDP-V associated with that concept identifier. </p>
 
-    <h2>Definitions</h2>
-    <p><strong>Concept Name: </strong>Term from a controlled vocabulary to designate a unit of meaning or idea (e.g., ‘Genus Salmonella (organism)’). A controlled vocabulary includes external code systems, such as LOINC or SNOMED-CT, or internally developed vocabularies such as PHIN VADS.</p>
-    <p><strong>Concept Identifier: </strong>This is text or a code used to uniquely identify a concept in a controlled vocabulary (e.g., 27268008). Note that if you have selected a code system mapping that has already been used in SDP-V or is selected from the results from "Search for external coded items", this field will be automatically populated.</p>
-    <p><strong>Code System Identifier: </strong>This is the unique designator for a code system also referred to as a controlled vocabulary, in which concepts and value sets are defined (e.g. 2.16.840.1.113883.6.96). LOINC, SNOMED-CT, and RxNorm are code systems. Note that if you have mapped a code system to a question or response set that has already been mapped in SDP-V or returned from an external code system search, the code system identifier field will be automatically populated.</p>
-
     <h2>Example Code System Mappings Table</h2>
     <table className="set-table table">
       <caption><strong></strong></caption>

webpack/components/questions/QuestionEdit.js

@@ -292,11 +292,11 @@ class QuestionEdit extends Component {
                 { this.isChoiceType() ?
                 <Row className="response-set-row">
                   <Col md={6} className="response-set-label">
-                    <InfoModal show={this.state.showInfoSearchandSelectResponseSet} header="Search and Select Response Sets" body={<p>Search through existing Response Sets in the system to identify the expected responses from this question. To select a specific Response Set, click the blue “+” button. Once added, the “+” sign will change into a checkmark to indicate the Response Set will be associated with the Question save.</p>} hideInfo={()=>this.setState({showInfoSearchandSelectResponseSet:false})} />
+                    <InfoModal show={this.state.showInfoSearchandSelectResponseSet} header="Search and Select Response Sets" body={<p>Search through existing Response Sets in the system to identify the expected responses from this question. To select a specific Response Set, click the blue “+” button. Once added, the “+” sign will change into a checkmark to indicate the Response Set will be associated with the saved Question.</p>} hideInfo={()=>this.setState({showInfoSearchandSelectResponseSet:false})} />
                     <label htmlFor="selectedResponseSet">Search and Select Response Sets<Button bsStyle='link' style={{ padding: 3, display: 'flex', justifyContent: 'center' }} onClick={() => this.setState({showInfoSearchandSelectResponseSet: true})}><i className="fa fa-info-circle" aria-hidden="true"></i><text className="sr-only">Click for info about this item</text></Button></label>
                   </Col>
                   <Col md={6} className="response-set-label">
-                    <InfoModal show={this.state.showinfoSelectedResponseSets} header="Selected Response Sets" body={<p>The “Selected Response Sets” panel displays your selections. Adding a Response Set to a Question simply means that the Response Set(s) are a valid set of choices for the Question. You can add more than one Response Set if appropriate. <br/><br/><u>Author Recommended Response Sets</u>: Response sets added to a Question by the author at the time of creation will be displayed in the UI on the Question Details page as “Author Recommended Response Sets”. This allows the author of the question to identify Response Sets that are appropriate for different contexts (e.g., For a Question asking about a vaccine administered, valid Response Sets may include condition-specific vaccine types, like varicella, influenza, or pertussis).  These “author recommended response sets” will populate the Response Set drop down menu on the “Create Section” page to encourage reuse of these Response Sets. <br/><br/><u>Note</u>: If a user would like reuse a Question, but the “author recommended response sets” do not meet the needs of that user, users can select other Response Sets from the repository to associate with the Question while creating, editing, or revising a Section (See Section 7.1.3 of the User Guide). This allows other SDP-V users to reuse Questions in the repository but provides the flexibility to select a context appropriate Response Set on a given Section.</p>} hideInfo={()=>this.setState({showinfoSelectedResponseSets: false})} />
+                    <InfoModal show={this.state.showinfoSelectedResponseSets} header="Selected Response Sets" body={<p>The “Selected Response Sets” panel displays your selections. Adding a Response Set to a Question simply means that the Response Set(s) are a valid set of choices for the Question. You can add more than one Response Set if appropriate. <br/><br/><u>Author Recommended Response Sets</u>: Response sets added to a Question by the author at the time of creation will be displayed in the UI on the Question Details page as “Author Recommended Response Sets”. This allows the author of the question to identify Response Sets that are appropriate for different contexts (e.g., For a Question asking about a vaccine administered, valid Response Sets may include condition-specific vaccine types, like varicella, influenza, or pertussis).  These “author recommended response sets” will populate the Response Set drop down menu on the “Create Section” page to encourage reuse of these Response Sets. <br/><br/><u>Note</u>: If a user would like to reuse a Question, but the “author recommended response sets” do not meet the needs of that user, users can select other Response Sets from the repository to associate with the Question while creating, editing, or revising a Section. This allows other SDP-V users to reuse Questions in the repository but provides the flexibility to select a context appropriate Response Set on a given Section.</p>} hideInfo={()=>this.setState({showinfoSelectedResponseSets: false})} />
                     <label htmlFor="selectedResponseSet">Selected Response Set<Button bsStyle='link' style={{ padding: 3, display: 'flex', justifyContent: 'center'}} onClick={() => this.setState({showinfoSelectedResponseSets: true})}><i className="fa fa-info-circle" aria-hidden="true"></i><text className="sr-only">Click for info about this item</text></Button></label>
                     <InfoModal show={this.state.showInfoAddNewResponseSet} header="Add New Response Set" body={<p>After searching the service, if no suitable response sets are found, a user can create  a new response set and add it to question directly from this page.</p>} hideInfo={()=>this.setState({showInfoAddNewResponseSet: false})} />
                     <Button bsStyle='link' style={{ padding: 5 }} onClick={() => this.setState({showInfoAddNewResponseSet: true})}><i className="fa fa-info-circle" aria-hidden="true"></i><text className="sr-only">Click for info about this item</text></Button>

webpack/components/questions/QuestionShow.js

@@ -412,7 +412,7 @@ export default class QuestionShow extends Component {
                   {question.responseType.name}
                 </div>}
                 {question.dataCollectionMethods && question.dataCollectionMethods.length > 0 && <div className="box-content">
-                <InfoModal show={this.state.showInfoDataCollectionMethods} header="Category" body={<p>The Data Collection Method attribute represents the manner in which the Question is used to collect data at the time of administration. This is not necessarily the same as how CDC is receiving the data.<br /><br />This attribute is optional but completion helps other users find questions in SDP-V most suited for a specific data collection method. There is an advanced search filter based off of this attribute.
+                <InfoModal show={this.state.showInfoDataCollectionMethods} header="Data Collection Method" body={<p>The Data Collection Method attribute represents the manner in which the Question is used to collect data at the time of administration. This is not necessarily the same as how CDC is receiving the data.<br /><br />This attribute is optional but completion helps other users find questions in SDP-V most suited for a specific data collection method. There is an advanced search filter based off of this attribute.
 </p>} hideInfo={()=>this.setState({showInfoDataCollectionMethods: false})} />
                   <strong>Data Collection Methods{<Button bsStyle='link' style={{ padding: 3 }} onClick={() => this.setState({showInfoDataCollectionMethods: true})}><i className="fa fa-info-circle" aria-hidden="true"></i><text className="sr-only">Click for info about this item (Data Collection Methods)</text></Button>}: </strong>
                   <ul>
@@ -444,7 +444,7 @@ export default class QuestionShow extends Component {
                 <div className="basic-c-box panel-default">
                   <div className="panel-heading">
                     <h2 className="panel-title">
-                      <InfoModal show={this.state.showInfoParentItemsQuestion} header="Parent Items" body={<p>The parent items window shows how content is being reused across the service. It helps to answer “where is this question being used?”. The default view shows the names of the different Sections that the Question is being used on. The user can view the Surveys that each Section is used on by clicking “+”.</p>} hideInfo={()=>this.setState({showInfoParentItemsQuestion: false})} />
+                      <InfoModal show={this.state.showInfoParentItemsQuestion} header="Parent Items" body={<p>The parent items window shows how content is being reused across the service. It helps to answer “where is this question being used?”. The default view shows the names of the different Sections that the Question is being used on. The user can view the Surveys that each Question is used on by clicking “+”.</p>} hideInfo={()=>this.setState({showInfoParentItemsQuestion: false})} />
                       <a className="panel-toggle" data-toggle="collapse" href={`#collapse-linked-sections`}><i className="fa fa-bars" aria-hidden="true"></i>
                       <text className="sr-only">Click link to expand information about (Parent Items)</text>Parent Items</a>
                       <Button bsStyle='link' style={{ padding: 3 }} onClick={() => this.setState({showInfoParentItemsQuestion: true})}><i className="fa fa-info-circle" aria-hidden="true"></i><text className="sr-only">Click for info about this item (Parent Items InfoButton)</text></Button>