From bb691d26490eba53981a254159ce870b4487ad2b Mon Sep 17 00:00:00 2001
From: Drew Baugher <46505179+dbbaughe@users.noreply.github.com>
Date: Tue, 10 Aug 2021 11:56:31 -0700
Subject: [PATCH] Adds a small Badge component (#39)

Signed-off-by: Drew Baugher <46505179+dbbaughe@users.noreply.github.com>
---
 .../components/Badge/Badge.test.tsx           | 22 ++++++++++++
 .../components/Badge/Badge.tsx                | 34 +++++++++++++++++++
 .../Badge/__snapshots__/Badge.test.tsx.snap   | 25 ++++++++++++++
 .../components/Badge/index.ts                 | 14 ++++++++
 4 files changed, 95 insertions(+)
 create mode 100644 public/pages/VisualCreatePolicy/components/Badge/Badge.test.tsx
 create mode 100644 public/pages/VisualCreatePolicy/components/Badge/Badge.tsx
 create mode 100644 public/pages/VisualCreatePolicy/components/Badge/__snapshots__/Badge.test.tsx.snap
 create mode 100644 public/pages/VisualCreatePolicy/components/Badge/index.ts

diff --git a/public/pages/VisualCreatePolicy/components/Badge/Badge.test.tsx b/public/pages/VisualCreatePolicy/components/Badge/Badge.test.tsx
new file mode 100644
index 000000000..ce943149c
--- /dev/null
+++ b/public/pages/VisualCreatePolicy/components/Badge/Badge.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 Badge from "./Badge";
+
+describe("<Badge /> spec", () => {
+  it("renders the component", () => {
+    const { container } = render(<Badge text="Some text" number={2} />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/public/pages/VisualCreatePolicy/components/Badge/Badge.tsx b/public/pages/VisualCreatePolicy/components/Badge/Badge.tsx
new file mode 100644
index 000000000..68cc02fe4
--- /dev/null
+++ b/public/pages/VisualCreatePolicy/components/Badge/Badge.tsx
@@ -0,0 +1,34 @@
+/*
+ * 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, EuiNotificationBadge, EuiTextColor } from "@elastic/eui";
+
+interface BadgeProps {
+  text: string;
+  number: number;
+  color?: "subdued" | "accent" | undefined;
+}
+
+const Badge = ({ text, number, color = "subdued" }: BadgeProps) => (
+  <EuiText size="xs" textAlign="center">
+    <EuiTextColor color={color}>
+      <p>
+        {text}{" "}
+        <EuiNotificationBadge size="s" color={color}>
+          {number}
+        </EuiNotificationBadge>
+      </p>
+    </EuiTextColor>
+  </EuiText>
+);
+
+export default Badge;
diff --git a/public/pages/VisualCreatePolicy/components/Badge/__snapshots__/Badge.test.tsx.snap b/public/pages/VisualCreatePolicy/components/Badge/__snapshots__/Badge.test.tsx.snap
new file mode 100644
index 000000000..cc11018fb
--- /dev/null
+++ b/public/pages/VisualCreatePolicy/components/Badge/__snapshots__/Badge.test.tsx.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Badge /> spec renders the component 1`] = `
+<div
+  class="euiText euiText--extraSmall"
+>
+  <div
+    class="euiTextAlign euiTextAlign--center"
+  >
+    <span
+      class="euiTextColor euiTextColor--subdued"
+    >
+      <p>
+        Some text
+         
+        <span
+          class="euiNotificationBadge euiNotificationBadge--subdued"
+        >
+          2
+        </span>
+      </p>
+    </span>
+  </div>
+</div>
+`;
diff --git a/public/pages/VisualCreatePolicy/components/Badge/index.ts b/public/pages/VisualCreatePolicy/components/Badge/index.ts
new file mode 100644
index 000000000..e7da2cab6
--- /dev/null
+++ b/public/pages/VisualCreatePolicy/components/Badge/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 Badge from "./Badge";
+
+export default Badge;