diff --git a/scm-ui-components/packages/ui-components/src/Help.js b/scm-ui-components/packages/ui-components/src/Help.js new file mode 100644 index 0000000000..965d16f145 --- /dev/null +++ b/scm-ui-components/packages/ui-components/src/Help.js @@ -0,0 +1,39 @@ +//@flow +import React from "react"; +import injectSheet from "react-jss"; +import classNames from "classnames"; + +const styles = { + img: { + display: "block" + }, + q: { + float: "left", + paddingLeft: "3px", + float: "right" + } +}; + +type Props = { + message: string, + classes: any +}; + +class Help extends React.Component { + render() { + const { message, classes } = this.props; + const multiline = message.length > 60 ? "is-tooltip-multiline" : ""; + return ( +
+ +
+ ); + } +} + +export default injectSheet(styles)(Help); diff --git a/scm-ui-components/packages/ui-components/src/LabelWithHelpIcon.js b/scm-ui-components/packages/ui-components/src/LabelWithHelpIcon.js new file mode 100644 index 0000000000..b5d049e68d --- /dev/null +++ b/scm-ui-components/packages/ui-components/src/LabelWithHelpIcon.js @@ -0,0 +1,46 @@ +//@flow +import React from "react"; +import { Help } from "./index"; + +type Props = { + label: string, + helpText?: string +}; + +class LabelWithHelpIcon extends React.Component { + renderLabel = () => { + const label = this.props.label; + if (label) { + return ; + } + return ""; + }; + + renderHelp = () => { + const helpText = this.props.helpText; + if (helpText) { + return ( +
+ +
+ ); + } else return null; + }; + + renderLabelWithHelpIcon = () => { + if (this.props.label) { + return ( +
+
{this.renderLabel()}
+ {this.renderHelp()} +
+ ); + } else return null; + }; + + render() { + return this.renderLabelWithHelpIcon(); + } +} + +export default LabelWithHelpIcon; diff --git a/scm-ui-components/packages/ui-components/src/forms/AddEntryToTableField.js b/scm-ui-components/packages/ui-components/src/forms/AddEntryToTableField.js index 1770e07807..e5c04eb613 100644 --- a/scm-ui-components/packages/ui-components/src/forms/AddEntryToTableField.js +++ b/scm-ui-components/packages/ui-components/src/forms/AddEntryToTableField.js @@ -9,7 +9,8 @@ type Props = { disabled: boolean, buttonLabel: string, fieldLabel: string, - errorMessage: string + errorMessage: string, + helpText?: string }; type State = { @@ -25,7 +26,13 @@ class AddEntryToTableField extends React.Component { } render() { - const { disabled, buttonLabel, fieldLabel, errorMessage } = this.props; + const { + disabled, + buttonLabel, + fieldLabel, + errorMessage, + helpText + } = this.props; return (
{ value={this.state.entryToAdd} onReturnPressed={this.appendEntry} disabled={disabled} + helpText={helpText} /> void, - disabled?: boolean + disabled?: boolean, + helpText?: string }; class Checkbox extends React.Component { onCheckboxChange = (event: SyntheticInputEvent) => { @@ -14,9 +16,20 @@ class Checkbox extends React.Component { } }; + renderHelp = () => { + const helpText = this.props.helpText; + if (helpText) { + return ( +
+ +
+ ); + } else return null; + }; + render() { return ( -
+
+ {this.renderHelp()}
); } diff --git a/scm-ui-components/packages/ui-components/src/forms/InputField.js b/scm-ui-components/packages/ui-components/src/forms/InputField.js index 6f87683939..79b71298f8 100644 --- a/scm-ui-components/packages/ui-components/src/forms/InputField.js +++ b/scm-ui-components/packages/ui-components/src/forms/InputField.js @@ -1,6 +1,7 @@ //@flow import React from "react"; import classNames from "classnames"; +import { LabelWithHelpIcon } from "../index"; type Props = { label?: string, @@ -12,7 +13,8 @@ type Props = { onReturnPressed?: () => void, validationError: boolean, errorMessage: string, - disabled?: boolean + disabled?: boolean, + helpText?: string }; class InputField extends React.Component { @@ -33,15 +35,6 @@ class InputField extends React.Component { this.props.onChange(event.target.value); }; - renderLabel = () => { - const label = this.props.label; - if (label) { - return ; - } - return ""; - }; - - handleKeyPress = (event: SyntheticKeyboardEvent) => { const onReturnPressed = this.props.onReturnPressed; if (!onReturnPressed) { @@ -60,7 +53,9 @@ class InputField extends React.Component { value, validationError, errorMessage, - disabled + disabled, + label, + helpText } = this.props; const errorView = validationError ? "is-danger" : ""; const helper = validationError ? ( @@ -70,7 +65,7 @@ class InputField extends React.Component { ); return (
- {this.renderLabel()} +
{ diff --git a/scm-ui-components/packages/ui-components/src/forms/Select.js b/scm-ui-components/packages/ui-components/src/forms/Select.js index 184359cc11..dd63872b19 100644 --- a/scm-ui-components/packages/ui-components/src/forms/Select.js +++ b/scm-ui-components/packages/ui-components/src/forms/Select.js @@ -1,5 +1,6 @@ //@flow import React from "react"; +import { LabelWithHelpIcon } from "../index"; export type SelectItem = { value: string, @@ -10,7 +11,8 @@ type Props = { label?: string, options: SelectItem[], value?: SelectItem, - onChange: string => void + onChange: string => void, + helpText?: string }; class Select extends React.Component { @@ -28,20 +30,12 @@ class Select extends React.Component { this.props.onChange(event.target.value); }; - renderLabel = () => { - const label = this.props.label; - if (label) { - return ; - } - return ""; - }; - render() { - const { options, value } = this.props; + const { options, value, label, helpText } = this.props; return (
- {this.renderLabel()} +