add InlineText component that force children to get displayed as inline content

Author: haschek

CHANGELOG.md

@@ -10,6 +10,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 -   `<ApplicationViewability />`
     -   component for hiding elements in specific media
+-   `<InlineText />`
+    -    force children to get displayed as inline content
 
 ### Fixed
 

src/components/Typography/InlineText.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+import { TestableComponent } from "../interfaces";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export interface InlineTextProps extends React.HTMLAttributes<HTMLElement>, TestableComponent {
+    /**
+     * Additional CSS class name.
+     */
+    className?: string;
+}
+
+/**
+ * Forces all children to be displayed as inline content.
+ */
+export const InlineText = ({
+    className = "",
+    children,
+    ...otherProps
+}: InlineTextProps) => {
+
+    return (
+        <div
+            {...otherProps}
+            className={
+                `${eccgui}-typography__inlinetext` +
+                (className ? " " + className : "")
+            }
+        >
+            {children}
+        </div>
+    );
+};
+
+export default InlineText;

src/components/Typography/index.ts

@@ -2,3 +2,4 @@ export * from "./Highlighter";
 export * from "./HtmlContentBlock";
 export * from "./OverflowText";
 export * from "./WhiteSpaceContainer";
+export * from "./InlineText";

src/components/Typography/typography.scss

@@ -263,6 +263,16 @@ table {
     }
 }
 
+// InlineText
+
+.#{$eccgui}-typography__inlinetext {
+    display: inline;
+
+    * {
+        display: inline;
+    }
+}
+
 // helpers
 
 .#{$eccgui}-typography--nooverflow {