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

app/react/components/form-components/FormSectionTitle/FormSectionTitle.stories.tsx

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

app/react/components/form-components/FormSectionTitle/FormSectionTitle.test.tsx

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

app/react/components/form-components/FormSectionTitle/FormSectionTitle.tsx

@@ -0,0 +1,22 @@
+import { PropsWithChildren } from 'react';
+
+interface Props {
+  htmlFor?: string;
+}
+
+export function FormSectionTitle({
+  children,
+  htmlFor,
+}: PropsWithChildren<Props>) {
+  if (htmlFor) {
+    return (
+      <label
+        htmlFor={htmlFor}
+        className="col-sm-12 form-section-title cursor-pointer"
+      >
+        {children}
+      </label>
+    );
+  }
+  return <div className="col-sm-12 form-section-title">{children}</div>;
+}

app/react/components/form-components/FormSectionTitle/index.ts

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