Add a generic Ref component

desktop · joshaber · Jul 26, 2017 · Jul 19, 2017 · Jul 19, 2017 · Jul 19, 2017
commit b520ddf991bba5639ac0366a8406ee983706c4e1
diff --git a/app/src/ui/lib/ref.tsx b/app/src/ui/lib/ref.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react'
+
+/**
+ * A simple style component used to mark up arbitrary references such as
+ * branches, commit shas, paths or other content which needs to be presented
+ * in an emphasized way and that benefit from fixed-width fonts.
+ *
+ * While the styling of the component _may_ differs depending on what context
+ * it appears in the general style is an inline-box with a suitable background
+ * color, using a fixed-width font.
+ */
+export class Ref extends React.Component<{}, {}> {
+  public render() {
+    return (
+      <em className="ref">
+        {this.props.children}
+      </em>
+    )
+  }
+}
diff --git a/app/styles/_ui.scss b/app/styles/_ui.scss
@@ -55,3 +55,4 @@
 @import "ui/vertical-segmented-control";
 @import "ui/blank-slate";
 @import "ui/terms-and-conditions";
+@import "ui/ref";
diff --git a/app/styles/ui/_ref.scss b/app/styles/ui/_ref.scss
@@ -0,0 +1,8 @@
+em.ref {
+  font-style: normal;
+  font-family: var(--font-family-monospace);
+  background: var(--path-segment-background);
+  border: var(--path-segment-background);
+  border-radius: var(--border-radius);
+  padding: var(--path-segment-padding);
+}