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

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

@@ -0,0 +1,20 @@
+import { Meta, Story } from '@storybook/react';
+import { PropsWithChildren } from 'react';
+
+import { TextTip } from './TextTip';
+
+export default {
+  component: TextTip,
+  title: 'Components/Tip/TextTip',
+} as Meta;
+
+function Template({
+  children,
+}: JSX.IntrinsicAttributes & PropsWithChildren<unknown>) {
+  return <TextTip>{children}</TextTip>;
+}
+
+export const Primary: Story<PropsWithChildren<unknown>> = Template.bind({});
+Primary.args = {
+  children: 'This is a text tip with children',
+};

app/react/components/Tip/TextTip/TextTip.test.tsx

@@ -0,0 +1,11 @@
+import { render } from '@testing-library/react';
+
+import { TextTip } from './TextTip';
+
+test('should display a TextTip with children', async () => {
+  const children = 'test text tip';
+  const { findByText } = render(<TextTip>{children}</TextTip>);
+
+  const heading = await findByText(children);
+  expect(heading).toBeTruthy();
+});

app/react/components/Tip/TextTip/TextTip.tsx

@@ -0,0 +1,27 @@
+import { PropsWithChildren } from 'react';
+import clsx from 'clsx';
+
+type Color = 'orange' | 'blue';
+
+export interface Props {
+  color?: Color;
+}
+
+export function TextTip({
+  color = 'orange',
+  children,
+}: PropsWithChildren<Props>) {
+  return (
+    <p className="text-muted small">
+      <i
+        aria-hidden="true"
+        className={clsx(
+          'fa fa-exclamation-circle',
+          `${color}-icon`,
+          'space-right'
+        )}
+      />
+      {children}
+    </p>
+  );
+}

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

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

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';