4 files changed, 10 insertions, 8 deletions

diff --git a/packages/ui/src/badge/index.tsx b/packages/ui/src/badge/index.tsx
index 241e778e7..fc52ecc73 100644
--- a/packages/ui/src/badge/index.tsx
+++ b/packages/ui/src/badge/index.tsx
@@ -65,6 +65,7 @@ class BadgeComponent extends Component<IProps> {
           [classes[type]]: true,
           [`${className}`]: className,
         })}
+        data-type="franz-badge"
       >
         {children}
       </div>
diff --git a/packages/ui/src/headline/index.tsx b/packages/ui/src/headline/index.tsx
index 3458a40ad..7eabfcf80 100644
--- a/packages/ui/src/headline/index.tsx
+++ b/packages/ui/src/headline/index.tsx
@@ -3,7 +3,6 @@ import classnames from 'classnames';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 
-import { uiFontSize } from '@meetfranz/theme/lib/themes/default';
 import { IWithStyle, Omit } from '../typings/generic';
 
 interface IProps extends IWithStyle {
@@ -55,6 +54,7 @@ class HeadlineComponent extends Component<IProps> {
           [classes[level ? `h${level}` : 'h1']]: true,
           [`${className}`]: className,
         }),
+        'data-type': 'franz-headline',
       },
       children,
     );
diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx
index bf985ea9c..53ed16341 100644
--- a/packages/ui/src/infobox/index.tsx
+++ b/packages/ui/src/infobox/index.tsx
@@ -1,9 +1,7 @@
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
-import { observer } from 'mobx-react';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
-// import Loader from 'react-loader';
 
 import { Icon } from '../';
 import { IWithStyle } from '../typings/generic';
@@ -95,7 +93,6 @@ const styles = (theme: Theme) => ({
   ...buttonStyles(theme),
 });
 
-@observer
 class InfoboxComponent extends Component<IProps, IState> {
   public static defaultProps = {
     type: 'primary',
@@ -160,6 +157,7 @@ class InfoboxComponent extends Component<IProps, IState> {
             [classes[`${type}`]]: type,
             [classes.dismissing]: isDismissing,
           })}
+          data-type="franz-infobox"
         >
           {icon && (
             <Icon icon={icon} className={classes.icon} />
diff --git a/packages/ui/src/loader/index.tsx b/packages/ui/src/loader/index.tsx
index 799caf195..de5ba5237 100644
--- a/packages/ui/src/loader/index.tsx
+++ b/packages/ui/src/loader/index.tsx
@@ -26,10 +26,13 @@ class LoaderComponent extends Component<IProps> {
     } = this.props;
 
     return (
-      <div className={classnames({
-        [classes.container]: true,
-        [`${className}`]: className,
-      })}>
+      <div
+        className={classnames({
+          [classes.container]: true,
+          [`${className}`]: className,
+        })}
+        data-type="franz-loader"
+      >
         <ReactLoader
           loaded={false}
           width={4}