Adds custom label to use with EuiForm component (opensearch-project#40)

Signed-off-by: Drew Baugher <[email protected]>

public/pages/VisualCreatePolicy/components/EuiFormCustomLabel/EuiFormCustomLabel.test.tsx

@@ -0,0 +1,22 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import React from "react";
+import "@testing-library/jest-dom/extend-expect";
+import { render } from "@testing-library/react";
+import EuiFormCustomLabel from "./EuiFormCustomLabel";
+
+describe("<EuiFormCustomLabel /> spec", () => {
+  it("renders the component", () => {
+    const { container } = render(<EuiFormCustomLabel title="Some title" helpText="Some helpful text" />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

public/pages/VisualCreatePolicy/components/EuiFormCustomLabel/EuiFormCustomLabel.tsx

@@ -0,0 +1,39 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import React from "react";
+import { EuiText } from "@elastic/eui";
+
+interface EuiFormCustomLabelProps {
+  title: string;
+  helpText?: string;
+  textStyle?: object;
+  headerStyle?: object;
+}
+
+// New pattern for label and help text both being above the form row instead of label above and help below.
+const EuiFormCustomLabel = ({
+  title,
+  helpText,
+  textStyle = { marginBottom: "5px" },
+  headerStyle = { marginBottom: "2px" },
+}: EuiFormCustomLabelProps) => (
+  <EuiText style={textStyle}>
+    <h5 style={headerStyle}>{title}</h5>
+    <p>
+      {" "}
+      {/* Keep the <p> tag even if no helpText to remove last child styling on h tags */}
+      {helpText && <span style={{ color: "grey", fontWeight: 200, fontSize: "12px" }}>{helpText}</span>}
+    </p>
+  </EuiText>
+);
+
+export default EuiFormCustomLabel;

public/pages/VisualCreatePolicy/components/EuiFormCustomLabel/__snapshots__/EuiFormCustomLabel.test.tsx.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<EuiFormCustomLabel /> spec renders the component 1`] = `
+<div
+  class="euiText euiText--medium"
+  style="margin-bottom: 5px;"
+>
+  <h5
+    style="margin-bottom: 2px;"
+  >
+    Some title
+  </h5>
+  <p>
+     
+    <span
+      style="color: grey; font-weight: 200; font-size: 12px;"
+    >
+      Some helpful text
+    </span>
+  </p>
+</div>
+`;

public/pages/VisualCreatePolicy/components/EuiFormCustomLabel/index.ts

@@ -0,0 +1,14 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import EuiFormCustomLabel from "./EuiFormCustomLabel";
+
+export default EuiFormCustomLabel;