feat: form labels can now be React.ReactNode.

This way they can contain anything such as a `Tooltip`.

Closes: #351

src/core/SearchInput/SearchInput.stories.tsx

@@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react';
 import SearchInput from './SearchInput';
 
 import { Card } from 'reactstrap';
-import { Select, Button } from '../..';
+import { Select, Button, Tooltip, Icon } from '../..';
 
 storiesOf('core|SearchInput', module)
   .addParameters({ component: SearchInput })
@@ -82,6 +82,28 @@ storiesOf('core|SearchInput', module)
       </Card>
     );
   })
+  .add('with custom label', () => {
+    const [query, setQuery] = useState('');
+
+    return (
+      <Card body>
+        <p>You searched for: {query}</p>
+        <SearchInput
+          id="search"
+          label={
+            <div className="d-flex justify-content-between">
+              <span>Search</span>
+              <Tooltip className="ml-1" content="Search the following fields">
+                <Icon icon="info" />
+              </Tooltip>
+            </div>
+          }
+          value={query}
+          onChange={setQuery}
+        />
+      </Card>
+    );
+  })
   .add('with external value', () => {
     const [query, setQuery] = useState('');
 

src/core/SearchInput/SearchInput.tsx

@@ -109,7 +109,7 @@ interface WithLabel extends BaseProps {
   /**
    * The label of the form element.
    */
-  label: string;
+  label: React.ReactNode;
 }
 
 export type Props = WithoutLabel | WithLabel;

src/core/SearchInput/__snapshots__/SearchInput.test.tsx.snap

@@ -95,6 +95,31 @@ exports[`Component: SearchInput ui with label 1`] = `
 </FormGroup>
 `;
 
+exports[`Component: SearchInput ui with label and children 1`] = `
+<FormGroup
+  tag="div"
+>
+  <Label
+    for="search"
+    tag="label"
+    widths={
+      Array [
+        "xs",
+        "sm",
+        "md",
+        "lg",
+        "xl",
+      ]
+    }
+  >
+    Search
+  </Label>
+  <h1>
+    Children
+  </h1>
+</FormGroup>
+`;
+
 exports[`Component: SearchInput ui without icon 1`] = `
 <Input
   className=""

src/form/Checkbox/Checkbox.stories.tsx

@@ -6,6 +6,7 @@ import Checkbox, { JarbCheckbox } from './Checkbox';
 import { FinalForm, Form } from '../story-utils';
 
 import { Icon } from '../../core/Icon';
+import Tooltip from '../../core/Tooltip/Tooltip';
 
 function isSClass(value?: boolean) {
   if (value !== false) {
@@ -61,7 +62,7 @@ storiesOf('Form|Checkbox', module)
       </Form>
     );
   })
-  .add('sans placeholder', () => {
+  .add('without placeholder', () => {
     const [isSClass, setIsSClass] = useState<boolean | undefined>(undefined);
 
     return (
@@ -82,6 +83,38 @@ storiesOf('Form|Checkbox', module)
       </Form>
     );
   })
+  .add('with custom label', () => {
+    const [isSClass, setIsSClass] = useState<boolean | undefined>(undefined);
+
+    return (
+      <Form>
+        <Checkbox
+          id="isSClass"
+          label={
+            <div className="d-flex justify-content-between">
+              <span>Is S class hero</span>
+              <Tooltip
+                className="ml-1"
+                content="An S class hero is a hero of the highest caliber"
+              >
+                <Icon icon="info" />
+              </Tooltip>
+            </div>
+          }
+          placeholder="Whether or not the hero is S class"
+          value={isSClass}
+          onChange={setIsSClass}
+        />
+
+        {isSClass ? (
+          <Alert color="success" className="d-flex">
+            <Icon icon="warning" className="mr-1" /> This hero is of the highest
+            caliber
+          </Alert>
+        ) : null}
+      </Form>
+    );
+  })
   .add('jarb', () => {
     return (
       <FinalForm>

src/form/Checkbox/Checkbox.tsx

@@ -57,7 +57,7 @@ interface Props {
   /**
    * The label of the form element.
    */
-  label: string;
+  label: React.ReactNode;
 
   /**
    * Optionally the placeholder of the form element.

src/form/CheckboxMultipleSelect/CheckboxMultipleSelect.stories.tsx

@@ -8,6 +8,7 @@ import CheckboxMultipleSelect, {
 import { FinalForm, Form } from '../story-utils';
 import { pageOfUsers, userUser } from '../../test/fixtures';
 import { User } from '../../test/types';
+import { Tooltip, Icon } from '../..';
 
 interface SubjectOption {
   value: string;
@@ -113,6 +114,36 @@ storiesOf('Form|CheckboxMultipleSelect', module)
       </div>
     );
   })
+  .add('with custom label', () => {
+    const [value, setValue] = useState<SubjectOption[] | undefined>([]);
+
+    return (
+      <div>
+        <Form>
+          <CheckboxMultipleSelect
+            id="subject"
+            label={
+              <div className="d-flex justify-content-between">
+                <span>Subject</span>
+                <Tooltip
+                  className="ml-1"
+                  content="Please select your most important subject"
+                >
+                  <Icon icon="info" />
+                </Tooltip>
+              </div>
+            }
+            placeholder="Please select your subjects"
+            optionForValue={(option: SubjectOption) => option.label}
+            isOptionEnabled={option => option.value !== 'awesome'}
+            options={options}
+            value={value}
+            onChange={setValue}
+          />
+        </Form>
+      </div>
+    );
+  })
   .add('jarb', () => {
     return (
       <FinalForm>

src/form/CheckboxMultipleSelect/CheckboxMultipleSelect.tsx

@@ -116,7 +116,7 @@ interface WithLabel<T> extends BaseProps<T> {
   /**
    * The label of the form element.
    */
-  label: string;
+  label: React.ReactNode;
 }
 
 export type Props<T> = WithoutLabel<T> | WithLabel<T>;

src/form/ColorPicker/ColorPicker.stories.tsx

@@ -3,6 +3,7 @@ import { storiesOf } from '@storybook/react';
 
 import ColorPicker, { JarbColorPicker } from './ColorPicker';
 import { FinalForm, Form } from '../story-utils';
+import { Tooltip, Icon } from '../..';
 
 function isToDark(value?: string) {
   if (!value) {
@@ -59,6 +60,33 @@ storiesOf('Form|ColorPicker', module)
       </div>
     );
   })
+  .add('with custom label', () => {
+    const [value, setValue] = useState<string | undefined>();
+
+    return (
+      <div>
+        <Form>
+          <ColorPicker
+            id="color"
+            label={
+              <div className="d-flex justify-content-between">
+                <span>Color</span>
+                <Tooltip
+                  className="ml-1"
+                  content="Use the color picker to select a color"
+                >
+                  <Icon icon="info" />
+                </Tooltip>
+              </div>
+            }
+            placeholder="Please select your favorite color"
+            value={value}
+            onChange={setValue}
+          />
+        </Form>
+      </div>
+    );
+  })
   .add('jarb', () => {
     return (
       <FinalForm>

src/form/ColorPicker/ColorPicker.tsx

@@ -70,7 +70,7 @@ interface Props {
   /**
    * The label of the form element.
    */
-  label: string;
+  label: React.ReactNode;
 
   /**
    * The placeholder of the form element.

src/form/DateTimeInput/DateTimeInput.stories.tsx

@@ -4,6 +4,7 @@ import { action } from '@storybook/addon-actions';
 
 import DateTimeInput, { JarbDateTimeInput } from './DateTimeInput';
 import { Form, FinalForm } from '../story-utils';
+import { Tooltip, Icon } from '../..';
 
 storiesOf('Form|DateTime/DateTimeInput', module)
   .add('date and time', () => {
@@ -57,6 +58,34 @@ storiesOf('Form|DateTime/DateTimeInput', module)
       </Form>
     );
   })
+  .add('with custom label', () => {
+    return (
+      <Form>
+        <DateTimeInput
+          id="birthdate"
+          label={
+            <>
+              <span>Birthdate</span>
+              <Tooltip
+                className="position-relative ml-1"
+                style={{ top: 5 }}
+                content="This is the date you where born on"
+              >
+                <Icon icon="info" />
+              </Tooltip>
+            </>
+          }
+          placeholder="Please enter your birthdate and time"
+          dateFormat="YYYY-MM-DD"
+          timeFormat="HH:mm:ss"
+          isDateAllowed={date => {
+            return date.isBefore(new Date());
+          }}
+          onChange={() => action('value changed')}
+        />
+      </Form>
+    );
+  })
   .add('jarb', () => {
     return (
       <FinalForm>

src/form/DateTimeInput/DateTimeInput.tsx

@@ -27,7 +27,7 @@ export interface Props {
   /**
    * The label of the form element.
    */
-  label?: string;
+  label?: React.ReactNode;
 
   /**
    * The placeholder of the form element.

src/form/FileInput/FileInput.stories.tsx

@@ -5,6 +5,7 @@ import { action } from '@storybook/addon-actions';
 import FileInput, { JarbFileInput, requireFile } from './FileInput';
 
 import { Form, FinalForm } from '../story-utils';
+import { Tooltip, Icon } from '../..';
 
 storiesOf('Form|FileInput', module)
   .add('basic', () => {
@@ -44,6 +45,30 @@ storiesOf('Form|FileInput', module)
       </Form>
     );
   })
+  .add('with custom label', () => {
+    return (
+      <Form>
+        <FileInput
+          id="file-upload-with-button"
+          placeholder="Upload a file here"
+          label={
+            <div className="d-flex justify-content-between">
+              <span>Upload a file here</span>
+              <Tooltip
+                className="ml-1"
+                style={{ zIndex: 101 }}
+                content="The file should be a plain text file"
+              >
+                <Icon icon="info" />
+              </Tooltip>
+            </div>
+          }
+          accept="text/plain"
+          onChange={() => action('value changed')}
+        />
+      </Form>
+    );
+  })
   .add('jarb', () => {
     return (
       <FinalForm>

src/form/FileInput/FileInput.tsx

@@ -74,7 +74,7 @@ interface WithLabel extends BaseProps {
   /**
    * The label of the form element.
    */
-  label: string;
+  label: React.ReactNode;
 }
 
 export type Props = WithoutLabel | WithLabel;

src/form/IconPicker/IconPicker.stories.tsx

@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
 
 import IconPicker, { JarbIconPicker } from './IconPicker';
 import { FinalForm, Form } from '../story-utils';
-import { IconType } from '../../core/Icon';
+import { IconType, Tooltip, Icon } from '../../';
 
 function is3DRotation(value: IconType) {
   return value === '3d_rotation' ? undefined : 'Not "3d_rotation"';
@@ -41,6 +41,33 @@ storiesOf('Form|IconPicker', module)
       </Form>
     );
   })
+  .add('with custom label', () => {
+    const [value, setValue] = useState<IconType | undefined>(undefined);
+
+    return (
+      <div>
+        <Form>
+          <IconPicker
+            id="icon"
+            label={
+              <div className="d-flex justify-content-between">
+                <span>Icon</span>
+                <Tooltip
+                  className="ml-1"
+                  content="The icon will be used as an avatar"
+                >
+                  <Icon icon="info" />
+                </Tooltip>
+              </div>
+            }
+            placeholder="Please select your icon"
+            value={value}
+            onChange={setValue}
+          />
+        </Form>
+      </div>
+    );
+  })
   .add('jarb', () => {
     return (
       <FinalForm>