refactor(app): move react components to react codebase [EE-3179] (#6971)

app/react/components/Tip/Tooltip/Tooltip.module.css

@@ -0,0 +1,23 @@
+.tooltip-wrapper {
+  display: inline-block;
+  position: relative;
+}
+
+.tooltip {
+  font-family: Montserrat !important;
+  background-color: var(--bg-tooltip-color) !important;
+  padding: 0.833em 1em !important;
+  color: var(--text-tooltip-color) !important;
+  border: 1px solid var(--border-tooltip-color) !important;
+  border-radius: 0.14285714rem !important;
+  box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15) !important;
+  max-width: 200px;
+  text-align: center;
+  font-size: 12px !important;
+  font-weight: 400;
+}
+
+.icon {
+  margin-left: 5px;
+  font-size: 1.3em;
+}

app/react/components/Tip/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, Story } from '@storybook/react';
+
+import { Tooltip, Props } from './Tooltip';
+
+export default {
+  component: Tooltip,
+  title: 'Components/Tip/Tooltip',
+} as Meta;
+
+function Template({ message, position }: JSX.IntrinsicAttributes & Props) {
+  return (
+    <div className="col-sm-3 col-lg-2">
+      Example tooltip
+      <Tooltip message={message} position={position} />
+    </div>
+  );
+}
+
+export const Primary: Story<Props> = Template.bind({});
+Primary.args = {
+  message: 'Tooltip example',
+  position: 'bottom',
+};

app/react/components/Tip/Tooltip/Tooltip.tsx

@@ -0,0 +1,31 @@
+import ReactTooltip from 'react-tooltip';
+import clsx from 'clsx';
+
+import styles from './Tooltip.module.css';
+
+type Place = 'top' | 'right' | 'bottom' | 'left';
+
+export interface Props {
+  position?: Place;
+  message: string;
+}
+
+export function Tooltip({ message, position = 'bottom' }: Props) {
+  return (
+    <span className="interactive">
+      <i
+        className={clsx('fa fa-question-circle blue-icon', styles.icon)}
+        aria-hidden="true"
+        data-tip={message}
+      />
+      <ReactTooltip
+        multiline
+        type="info"
+        place={position}
+        effect="solid"
+        className={styles.tooltip}
+        arrowColor="transparent"
+      />
+    </span>
+  );
+}

app/react/components/Tip/Tooltip/index.ts

@@ -0,0 +1 @@
+export { Tooltip } from './Tooltip';