From bfad3cebca93dc2e7dcea4bd800a1e879a9d425a Mon Sep 17 00:00:00 2001
From: Lewis Alderman <lewisalderman95@gmail.com>
Date: Thu, 3 Nov 2022 16:20:35 +0000
Subject: [PATCH] Spacer and NoWrap components added

---
 .../frontend/react-components/src/index.ts    |  2 ++
 .../react-components/src/nowrap/NoWrap.tsx    | 16 +++++++++++++
 .../react-components/src/spacer/Spacer.tsx    | 23 +++++++++++++++++++
 3 files changed, 41 insertions(+)
 create mode 100644 packages/frontend/react-components/src/nowrap/NoWrap.tsx
 create mode 100644 packages/frontend/react-components/src/spacer/Spacer.tsx

diff --git a/packages/frontend/react-components/src/index.ts b/packages/frontend/react-components/src/index.ts
index 930840a3..bd501725 100644
--- a/packages/frontend/react-components/src/index.ts
+++ b/packages/frontend/react-components/src/index.ts
@@ -1,3 +1,5 @@
 export * from "./button/Button";
 export * from "./text/Text";
+export * from "./nowrap/NoWrap";
+export * from "./spacer/Spacer";
 export * from "./theme-provider/ThemeProvider";
\ No newline at end of file
diff --git a/packages/frontend/react-components/src/nowrap/NoWrap.tsx b/packages/frontend/react-components/src/nowrap/NoWrap.tsx
new file mode 100644
index 00000000..84025bae
--- /dev/null
+++ b/packages/frontend/react-components/src/nowrap/NoWrap.tsx
@@ -0,0 +1,16 @@
+import * as React from "react";
+
+const space = {
+  flex: "1",
+  pointerEvents: "none"
+} as const;
+
+export const Spacer: React.FC<JSX.IntrinsicElements["div"]> = props => (
+  <div
+    {...props}
+    style={{
+      ...space,
+      ...props.style
+    }}
+  />
+);
\ No newline at end of file
diff --git a/packages/frontend/react-components/src/spacer/Spacer.tsx b/packages/frontend/react-components/src/spacer/Spacer.tsx
new file mode 100644
index 00000000..4dd43773
--- /dev/null
+++ b/packages/frontend/react-components/src/spacer/Spacer.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+
+const noWrap = { whiteSpace: "nowrap" } as const;
+
+/**
+ * Sometimes with text-wrapping its desired to ensure a string of words appear
+ * on the same line, or to avoid the one word on a line scenario
+ * @example
+ * // OH NO
+ * big
+ * apple
+ * // WINNING
+ * big apple
+ */
+export const NoWrap: React.FC<JSX.IntrinsicElements["span"]> = props => (
+  <span
+    {...props}
+    style={{
+      ...noWrap,
+      ...props.style
+    }}
+  />
+);
\ No newline at end of file