merge 2.0.0-m3

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<Props, State> {
   }
 
   render() {
-    const { disabled, buttonLabel, fieldLabel, errorMessage } = this.props;
+    const {
+      disabled,
+      buttonLabel,
+      fieldLabel,
+      errorMessage,
+      helpText
+    } = this.props;
     return (
       <div className="field">
         <InputField
@@ -36,6 +43,7 @@ class AddEntryToTableField extends React.Component<Props, State> {
           value={this.state.entryToAdd}
           onReturnPressed={this.appendEntry}
           disabled={disabled}
+          helpText={helpText}
         />
         <AddButton
           label={buttonLabel}

scm-ui-components/packages/ui-components/src/forms/Checkbox.js

@@ -1,11 +1,13 @@
 //@flow
 import React from "react";
+import { Help } from "../index";
 
 type Props = {
   label?: string,
   checked: boolean,
   onChange?: boolean => void,
-  disabled?: boolean
+  disabled?: boolean,
+  helpText?: string
 };
 class Checkbox extends React.Component<Props> {
   onCheckboxChange = (event: SyntheticInputEvent<HTMLInputElement>) => {
@@ -14,9 +16,20 @@ class Checkbox extends React.Component<Props> {
     }
   };
 
+  renderHelp = () => {
+    const helpText = this.props.helpText;
+    if (helpText) {
+      return (
+        <div className="control columns is-vcentered">
+          <Help message={helpText} />
+        </div>
+      );
+    } else return null;
+  };
+
   render() {
     return (
-      <div className="field">
+      <div className="field is-grouped">
         <div className="control">
           <label className="checkbox" disabled={this.props.disabled}>
             <input
@@ -28,6 +41,7 @@ class Checkbox extends React.Component<Props> {
             {this.props.label}
           </label>
         </div>
+        {this.renderHelp()}
       </div>
     );
   }

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<Props> {
@@ -33,15 +35,6 @@ class InputField extends React.Component<Props> {
     this.props.onChange(event.target.value);
   };
 
-  renderLabel = () => {
-    const label = this.props.label;
-    if (label) {
-      return <label className="label">{label}</label>;
-    }
-    return "";
-  };
-
-
   handleKeyPress = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
     const onReturnPressed = this.props.onReturnPressed;
     if (!onReturnPressed) {
@@ -60,7 +53,9 @@ class InputField extends React.Component<Props> {
       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<Props> {
     );
     return (
       <div className="field">
-        {this.renderLabel()}
+        <LabelWithHelpIcon label={label} helpText={helpText} />
         <div className="control">
           <input
             ref={input => {

scm-ui-components/packages/ui-components/src/forms/Select.js

@@ -1,6 +1,7 @@
 //@flow
 import React from "react";
 import classNames from "classnames";
+import { LabelWithHelpIcon } from "../index";
 
 export type SelectItem = {
   value: string,
@@ -12,7 +13,8 @@ type Props = {
   options: SelectItem[],
   value?: SelectItem,
   onChange: string => void,
-  loading?: boolean
+  loading?: boolean,
+  helpText?: string
 };
 
 class Select extends React.Component<Props> {
@@ -30,25 +32,18 @@ class Select extends React.Component<Props> {
     this.props.onChange(event.target.value);
   };
 
-  renderLabel = () => {
-    const label = this.props.label;
-    if (label) {
-      return <label className="label">{label}</label>;
-    }
-    return "";
-  };
-
   render() {
-    const { options, value, loading } = this.props;
+    const { options, value, label, helpText, loading } = this.props;
     const loadingClass = loading ? "is-loading" : "";
 
+
     return (
       <div className="field">
-        {this.renderLabel()}
-        <div className={classNames(
-          "control select",
-          loadingClass
-        )}>
+        <LabelWithHelpIcon label={label} helpText={helpText} />
+    <div className={classNames(
+      "control select",
+      loadingClass
+    )}>
           <select
             ref={input => {
               this.field = input;

scm-ui-components/packages/ui-components/src/forms/Textarea.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,
   placeholder?: SelectItem[],
   value?: string,
-  onChange: string => void
+  onChange: string => void,
+  helpText?: string
 };
 
 class Textarea extends React.Component<Props> {
@@ -20,20 +22,12 @@ class Textarea extends React.Component<Props> {
     this.props.onChange(event.target.value);
   };
 
-  renderLabel = () => {
-    const label = this.props.label;
-    if (label) {
-      return <label className="label">{label}</label>;
-    }
-    return "";
-  };
-
   render() {
-    const { placeholder, value } = this.props;
+    const { placeholder, value, label, helpText } = this.props;
 
     return (
       <div className="field">
-        {this.renderLabel()}
+        <LabelWithHelpIcon label={label} helpText={helpText} />
         <div className="control">
           <textarea
             className="textarea"