add help icon and mockup for usage

scm-ui-components/packages/ui-components/src/Help.js

@@ -0,0 +1,32 @@
+//@flow
+import React from "react";
+import injectSheet from "react-jss";
+import classNames from "classnames";
+
+const styles = {
+  img: {
+    display: "block"
+  },
+  q: {
+  float: "left"
+  }
+};
+
+type Props = {
+  message?: string,
+  classes: any
+};
+
+class Help extends React.Component<Props> {
+  render() {
+    const { message, classes } = this.props;
+    return (
+        <div className={classNames("tooltip", classes.q)}
+             data-tooltip={message}>
+        <i className={classNames("fa fa-question has-text-info", classes.img)}></i>
+        </div>
+    );
+  }
+}
+
+export default injectSheet(styles)(Help);

scm-ui-components/packages/ui-components/src/index.js

@@ -16,6 +16,8 @@ export { default as MailLink } from "./MailLink.js";
 export { default as Notification } from "./Notification.js";
 export { default as Paginator } from "./Paginator.js";
 export { default as ProtectedRoute } from "./ProtectedRoute.js";
+export { default as Help } from "./Help.js";
+
 
 export { apiClient, NOT_FOUND_ERROR, UNAUTHORIZED_ERROR } from "./apiclient.js";
 

scm-ui/src/config/containers/Config.js

@@ -3,7 +3,13 @@ import React from "react";
 import { translate } from "react-i18next";
 import { Route } from "react-router";
 
-import { Page, Navigation, NavLink, Section } from "@scm-manager/ui-components";
+import {
+  Page,
+  Navigation,
+  NavLink,
+  Section,
+  Help
+} from "@scm-manager/ui-components";
 import GlobalConfig from "./GlobalConfig";
 import type { History } from "history";
 
@@ -33,6 +39,7 @@ class Config extends React.Component<Props> {
 
     return (
       <Page>
+        <Help message={"Hallo"} />
         <div className="columns">
           <div className="column is-three-quarters">
             <Route path={url} exact component={GlobalConfig} />