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