From a8f4c394eaebfc36a26e847967ce08bcca10860d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maren=20S=C3=BCwer?= <maren.suewer@cloudogu.com>
Date: Thu, 27 Sep 2018 15:29:40 +0200
Subject: [PATCH] add help icon and mockup for usage

---
 .../packages/ui-components/src/Help.js        | 32 +++++++++++++++++++
 .../packages/ui-components/src/index.js       |  2 ++
 scm-ui/src/config/containers/Config.js        |  9 +++++-
 3 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 scm-ui-components/packages/ui-components/src/Help.js

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..ee0e4c5dc7
--- /dev/null
+++ b/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);
diff --git a/scm-ui-components/packages/ui-components/src/index.js b/scm-ui-components/packages/ui-components/src/index.js
index 2e1c51b7dc..1f4c07d340 100644
--- a/scm-ui-components/packages/ui-components/src/index.js
+++ b/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";
 
diff --git a/scm-ui/src/config/containers/Config.js b/scm-ui/src/config/containers/Config.js
index bc973bb925..753424c23b 100644
--- a/scm-ui/src/config/containers/Config.js
+++ b/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} />