Add re-useable Flag component (#27)

* Add a simple, re-useable Flag component

* Use bootstrap labels

* Remove line-height from Flag styles

* style -> labelStyle + add a note about bootstrap 4 upgrade

amundsen_application/static/css/_variables-default.scss

@@ -56,3 +56,7 @@ $btn-primary-color:  $text-color;
 // List Group
 $list-group-border:        $gray-lighter;
 $list-group-border-radius: 0;
+
+
+// Labels
+$label-primary-bg:  $gradient-3;

amundsen_application/static/js/components/TableDetail/styles.scss

@@ -30,7 +30,7 @@
   font-weight: $font-weight-sans-serif-bold;
 }
 
-.detail-list-header label{
+.detail-list-header > label {
   font-size: 20px;
   margin-top: auto;
   margin-bottom: 32px;

amundsen_application/static/js/components/common/Flag/index.tsx

+import * as React from 'react';
+
+// TODO: Use css-modules instead of 'import'
+import './styles.scss';
+
+interface FlagProps {
+  text: string;
+  labelStyle?: string;
+}
+
+const Flag: React.SFC<FlagProps> = ({ text, labelStyle }) => {
+  // TODO: After upgrading to Bootstrap 4, this component should leverage badges
+  // https://getbootstrap.com/docs/4.1/components/badge/
+  return (
+    <span className={`flag label ${labelStyle}`}>{text.toUpperCase()}</span>
+  );
+};
+
+Flag.defaultProps = {
+  text: '',
+  labelStyle: 'label-default',
+};
+
+export default Flag;

amundsen_application/static/js/components/common/Flag/styles.scss

+@import 'variables';
+
+.flag {
+  margin-right: 4px;
+  margin-left: 4px;
+}