Added help icon for questions (based on dc:description property). Mov…

…ed CSS file into a separate top-level folder, so that it can be copied into target projects. Bumped version to 0.0.8.

css/semforms.css

@@ -0,0 +1,11 @@
+.checkbox label {
+    font-weight: bold;
+}
+
+.help-icon-text-input {
+    margin-top: 30px;
+}
+
+.help-icon-checkbox {
+    margin-top: 12px;
+}

css/semforms.min.css

@@ -0,0 +1 @@
+.checkbox label{font-weight:700}.help-icon-text-input{margin-top:30px}.help-icon-checkbox{margin-top:12px}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "semforms",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Semantic forms generator and processor",
   "keywords": [
     "react",
@@ -56,14 +56,16 @@
     "jsdom": "^8.3.1",
     "jasmine": "^2.4.1",
     "jasmine-core": "^2.4.1",
-    "jasmine-reporters": "^2.1.1"
+    "jasmine-reporters": "^2.1.1",
+    "clean-css": "^3.4.12"
   },
   "scripts": {
     "test": "jasmine JASMINE_CONFIG_PATH=test/jasmine.json",
     "build": "browserify ./src/semforms.js -o ./dist/semforms.js",
     "watchify": "watchify ./src/semforms.js -o ./dist/semforms.js",
     "lib": "babel ./src -d ./lib",
     "build-npm-prod": "npm run test && npm run build && npm run lib && npm pack",
+    "build-css": "cleancss --skip-rebase -d -o ./css/semforms.min.css ./css/semforms.css",
     "prebuild-npm-prod": "npm install",
     "rendering-test-start": "watchify -o test/rendering/bundle.js -v -d test/rendering/TestApp.js"
   },

src/components/HelpIcon.js

@@ -0,0 +1,23 @@
+'use strict';
+
+import React from 'react';
+import {Glyphicon, OverlayTrigger, Tooltip} from 'react-bootstrap';
+
+const HelpIcon = (props) => {
+    var tooltip = <Tooltip id='help-tooltip'>{props.text}</Tooltip>;
+    return <OverlayTrigger placement='right' overlay={tooltip}>
+        <Glyphicon glyph={props.glyph ? props.glyph : 'question-sign'} className={props.iconClass}/>
+    </OverlayTrigger>;
+};
+
+HelpIcon.propTypes = {
+    text: React.PropTypes.string.isRequired,
+    glyph: React.PropTypes.string,
+    iconClass: React.PropTypes.string
+};
+
+HelpIcon.defaultProps = {
+    iconClass: ''
+};
+
+export default HelpIcon;

src/components/Question.js

@@ -2,12 +2,13 @@
 
 import React from "react";
 import assign from "object-assign";
-import {Panel, Row, Col} from "react-bootstrap";
+import {Panel} from "react-bootstrap";
 import JsonLdUtils from "jsonld-utils";
 import Answer from "./Answer";
 import Configuration from "../model/Configuration";
 import Constants from "../constants/Constants";
 import FormUtils from "../util/FormUtils";
+import HelpIcon from "./HelpIcon";
 import QuestionAnswerProcessor from "../model/QuestionAnswerProcessor";
 
 export default class Question extends React.Component {
@@ -83,7 +84,10 @@ export default class Question extends React.Component {
                 <Answer index={i} answer={answers[i]} question={question} onChange={this.onAnswerChange}/>
             </div>);
             if (row.length === Constants.GENERATED_ROW_SIZE || isTextarea) {
-                children.push(<div className='row' key={'question-row-' + i}>{row}</div>);
+                children.push(<div className='row' key={'question-row-' + i}>
+                    {row}
+                    {this._renderQuestionHelp()}
+                </div>);
                 row = [];
             }
         }
@@ -113,6 +117,15 @@ export default class Question extends React.Component {
             Constants.GENERATED_ROW_SIZE === 1 ? 'col-xs-3' : 'col-xs-' + (Constants.COLUMN_COUNT / Constants.GENERATED_ROW_SIZE));
     }
 
+    _renderQuestionHelp() {
+        var question = this.props.question,
+            helpClass = FormUtils.isCheckbox(question) ? 'help-icon-checkbox' : 'help-icon-text-input';
+        return question[Constants.HELP_DESCRIPTION] ?
+            <HelpIcon
+                text={JsonLdUtils.getLocalized(question[Constants.HELP_DESCRIPTION], Configuration.intl)}
+                iconClass={helpClass}/> : null;
+    }
+
     renderSubQuestions() {
         var children = [],
             subQuestions = this._getSubQuestions();

src/constants/Constants.js

@@ -40,6 +40,8 @@ const FORM = 'http://onto.fel.cvut.cz/ontologies/documentation/form',
     HAS_DATA_VALUE = 'http://onto.fel.cvut.cz/ontologies/documentation/has_data_value',
     HAS_OBJECT_VALUE = 'http://onto.fel.cvut.cz/ontologies/documentation/has_object_value',
 
+    HELP_DESCRIPTION = 'http://purl.org/dc/elements/1.1/description',
+
     XSD = {
         MAX_EXCLUSIVE: 'http://www.w3.org/2001/XMLSchema#maxExclusive',
         MAX_INCLUSIVE: 'http://www.w3.org/2001/XMLSchema#maxInclusive',
@@ -142,6 +144,10 @@ export default class Constants {
         return HAS_OBJECT_VALUE;
     }
 
+    static get HELP_DESCRIPTION() {
+        return HELP_DESCRIPTION;
+    }
+
     static get XSD() {
         return XSD;
     }