Spacer and NoWrap components added

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

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
+    }}
+  />
+);

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
+    }}
+  />
+);