11 files changed, 59 insertions, 205 deletions

diff --git a/packages/ui/package-lock.json b/packages/ui/package-lock.json
deleted file mode 100644
index a432404b1..000000000
--- a/packages/ui/package-lock.json
+++ /dev/null
@@ -1,122 +0,0 @@
-{
-  "name": "@meetfranz/ui",
-  "version": "1.1.0",
-  "lockfileVersion": 1,
-  "requires": true,
-  "dependencies": {
-    "@mdi/react": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@mdi/react/-/react-1.1.0.tgz",
-      "integrity": "sha512-c0+avMYEZ6i7Pg1ULLFs+p7k8bDPiie9rrgGYs8VWQhw2tUUYz7r0lIPVzD3bzMghWfyhfkArj88K5Of0WTMNw=="
-    },
-    "@meetfranz/theme": {
-      "version": "file:../theme",
-      "requires": {
-        "color": "^3.1.0"
-      },
-      "dependencies": {
-        "color": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/color/-/color-3.1.0.tgz",
-          "integrity": "sha512-CwyopLkuRYO5ei2EpzpIh6LqJMt6Mt+jZhO5VI5f/wJLZriXQE32/SSqzmrh+QB+AZT81Cj8yv+7zwToW8ahZg==",
-          "requires": {
-            "color-convert": "^1.9.1",
-            "color-string": "^1.5.2"
-          }
-        },
-        "color-convert": {
-          "version": "1.9.3",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-          "requires": {
-            "color-name": "1.1.3"
-          }
-        },
-        "color-name": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
-        },
-        "color-string": {
-          "version": "1.5.5",
-          "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.5.tgz",
-          "integrity": "sha512-jgIoum0OfQfq9Whcfc2z/VhCNcmQjWbey6qBX0vqt7YICflUmBCh9E9CiQD5GSJ+Uehixm3NUwHVhqUAWRivZg==",
-          "requires": {
-            "color-name": "^1.0.0",
-            "simple-swizzle": "^0.2.2"
-          }
-        },
-        "is-arrayish": {
-          "version": "0.3.2",
-          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
-        },
-        "simple-swizzle": {
-          "version": "0.2.2",
-          "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-          "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
-          "requires": {
-            "is-arrayish": "^0.3.1"
-          }
-        }
-      }
-    },
-    "create-react-class": {
-      "version": "15.7.0",
-      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.7.0.tgz",
-      "integrity": "sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==",
-      "requires": {
-        "loose-envify": "^1.3.1",
-        "object-assign": "^4.1.1"
-      }
-    },
-    "js-tokens": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
-    },
-    "loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "requires": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      }
-    },
-    "object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
-    },
-    "prop-types": {
-      "version": "15.7.2",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
-      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-      "requires": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.8.1"
-      }
-    },
-    "react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
-    "react-loader": {
-      "version": "2.4.7",
-      "resolved": "https://registry.npmjs.org/react-loader/-/react-loader-2.4.7.tgz",
-      "integrity": "sha512-pNW5xoSt0Q7HdmQh/EaIeeFbG0Ii74y6Le8gPdDyWyEFNgCiY1NcreQxMioQGjQ4Jo4EenQGKN/qMbxW+dpZkQ==",
-      "requires": {
-        "create-react-class": "^15.5.2",
-        "prop-types": "^15.5.8",
-        "spin.js": "2.x"
-      }
-    },
-    "spin.js": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/spin.js/-/spin.js-2.3.2.tgz",
-      "integrity": "sha1-bKpW1SBnNFD9XPvGlx5tB3LDeho="
-    }
-  }
-}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 5cbe0a58d..2b24803f5 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -23,15 +23,15 @@
   "author": "Stefan Malzner <stefan@adlk.io>",
   "license": "Apache-2.0",
   "dependencies": {
-    "@mdi/react": "^1.1.0",
+    "@mdi/react": "1.5.0",
     "@meetfranz/theme": "file:../theme",
     "react-loader": "2.4.7"
   },
   "peerDependencies": {
-    "classnames": "^2.2.6",
-    "react": "^16.7.0",
-    "react-dom": "16.7.0",
-    "react-jss": "^8.6.1"
+    "classnames": "2.3.1",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "react-jss": "8.6.1"
   },
   "gitHead": "254da30f801169fac376bda1439b46cabbb491ad"
 }
diff --git a/packages/ui/src/badge/ProBadge.tsx b/packages/ui/src/badge/ProBadge.tsx
index 5cc41f5b2..63d5d673a 100644
--- a/packages/ui/src/badge/ProBadge.tsx
+++ b/packages/ui/src/badge/ProBadge.tsx
@@ -1,10 +1,10 @@
 import { mdiStar } from '@mdi/js';
-import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 
-import { Badge, Icon } from '../';
+import { Badge, Icon } from '..';
+import { Theme } from '../../../theme';
 import { IWithStyle } from '../typings/generic';
 
 interface IProps extends IWithStyle {
@@ -34,13 +34,8 @@ const styles = (theme: Theme) => ({
 
 class ProBadgeComponent extends Component<IProps> {
   render() {
-    const {
-      classes,
-      badgeClasses,
-      iconClasses,
-      inverted,
-      className,
-    } = this.props;
+    const { classes, badgeClasses, iconClasses, inverted, className } =
+      this.props;
 
     return (
       <Badge
diff --git a/packages/ui/src/badge/index.tsx b/packages/ui/src/badge/index.tsx
index fc52ecc73..5dd735879 100644
--- a/packages/ui/src/badge/index.tsx
+++ b/packages/ui/src/badge/index.tsx
@@ -1,8 +1,8 @@
-import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 
+import { Theme } from '../../../theme';
 import { IWithStyle } from '../typings/generic';
 
 interface IProps extends IWithStyle {
@@ -13,7 +13,7 @@ interface IProps extends IWithStyle {
 
 const badgeStyles = (theme: Theme) => {
   const styles = {};
-  Object.keys(theme.styleTypes).map((style) => {
+  Object.keys(theme.styleTypes).map(style => {
     Object.assign(styles, {
       [style]: {
         background: theme.styleTypes[style].accent,
@@ -51,12 +51,7 @@ class BadgeComponent extends Component<IProps> {
   };
 
   render() {
-    const {
-      classes,
-      children,
-      type,
-      className,
-    } = this.props;
+    const { classes, children, type, className } = this.props;
 
     return (
       <div
diff --git a/packages/ui/src/headline/index.tsx b/packages/ui/src/headline/index.tsx
index 7eabfcf80..bf3d4418c 100644
--- a/packages/ui/src/headline/index.tsx
+++ b/packages/ui/src/headline/index.tsx
@@ -1,8 +1,8 @@
-import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 
+import { Theme } from '../../../theme';
 import { IWithStyle, Omit } from '../typings/generic';
 
 interface IProps extends IWithStyle {
@@ -37,13 +37,7 @@ const styles = (theme: Theme) => ({
 
 class HeadlineComponent extends Component<IProps> {
   render() {
-    const {
-      classes,
-      level,
-      className,
-      children,
-      id,
-    } = this.props;
+    const { classes, level, className, children, id } = this.props;
 
     return React.createElement(
       `h${level}`,
@@ -63,7 +57,12 @@ class HeadlineComponent extends Component<IProps> {
 
 const Headline = injectStyle(styles)(HeadlineComponent);
 
-const createH = (level: number) => (props: Omit<IProps, 'classes' | 'theme'>) => <Headline level={level} {...props}>{props.children}</Headline>;
+const createH = (level: number) => (props: Omit<IProps, 'classes' | 'theme'>) =>
+  (
+    <Headline level={level} {...props}>
+      {props.children}
+    </Headline>
+  );
 
 export const H1 = createH(1);
 export const H2 = createH(2);
diff --git a/packages/ui/src/icon/index.tsx b/packages/ui/src/icon/index.tsx
index af467c085..b644a9234 100644
--- a/packages/ui/src/icon/index.tsx
+++ b/packages/ui/src/icon/index.tsx
@@ -1,9 +1,9 @@
 import MdiIcon from '@mdi/react';
-import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 
+import { Theme } from '../../../theme';
 import { IWithStyle } from '../typings/generic';
 
 interface IProps extends IWithStyle {
@@ -24,12 +24,7 @@ class IconComponent extends Component<IProps> {
   };
 
   render() {
-    const {
-      classes,
-      icon,
-      size,
-      className,
-    } = this.props;
+    const { classes, icon, size, className } = this.props;
 
     if (!icon) {
       console.warn('No Icon specified');
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 666495ce9..bab3fc27b 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -1,6 +1,6 @@
 export { Icon } from './icon';
 export { Infobox } from './infobox';
-export * from './headline';
+export { H1, H2, H3, H4 } from './headline';
 export { Loader } from './loader';
 export { Badge } from './badge';
 export { ProBadge } from './badge/ProBadge';
diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx
index e4c2c5a3e..88cfdb620 100644
--- a/packages/ui/src/infobox/index.tsx
+++ b/packages/ui/src/infobox/index.tsx
@@ -1,10 +1,10 @@
 import { mdiClose } from '@mdi/js';
-import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 
-import { Icon } from '../';
+import { Icon } from '..';
+import { Theme } from '../../../theme';
 import { IWithStyle } from '../typings/generic';
 
 interface IProps extends IWithStyle {
@@ -27,7 +27,7 @@ interface IState {
 
 const buttonStyles = (theme: Theme) => {
   const styles = {};
-  Object.keys(theme.styleTypes).map((style) => {
+  Object.keys(theme.styleTypes).map(style => {
     Object.assign(styles, {
       [style]: {
         background: theme.styleTypes[style].accent,
@@ -44,6 +44,15 @@ const buttonStyles = (theme: Theme) => {
   return styles;
 };
 
+const infoBoxTransition: string = 'none';
+const ctaTransition: string = 'none';
+
+// TODO: Not sure why, but this location alone, the `dinwo` is not defined - and it throws an error thus aborting the startup sequence of ferdi
+// if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+//   infoBoxTransition = 'all 0.5s';
+//   ctaTransition = 'opacity 0.3s';
+// }
+
 const styles = (theme: Theme) => ({
   wrapper: {
     position: 'relative',
@@ -58,7 +67,7 @@ const styles = (theme: Theme) => ({
     height: 'auto',
     padding: '15px 20px',
     top: 0,
-    transition: 'all 0.5s',
+    transition: infoBoxTransition,
     opacity: 1,
   },
   dismissing: {
@@ -73,22 +82,25 @@ const styles = (theme: Theme) => ({
     marginRight: 10,
   },
   close: {
-    color: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast,
+    color: (props: IProps) =>
+      theme.styleTypes[props.type ? props.type : 'primary'].contrast,
     marginRight: -5,
     border: 0,
     background: 'none',
   },
   cta: {
-    borderColor: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast,
+    borderColor: (props: IProps) =>
+      theme.styleTypes[props.type ? props.type : 'primary'].contrast,
     borderRadius: theme.borderRadiusSmall,
     borderStyle: 'solid',
     borderWidth: 1,
     background: 'none',
-    color: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast,
+    color: (props: IProps) =>
+      theme.styleTypes[props.type ? props.type : 'primary'].contrast,
     marginLeft: 15,
     padding: [4, 10],
     fontSize: theme.uiFontSize,
-    transition: 'opacity 0.3s',
+    transition: ctaTransition,
 
     '&:hover': {
       opacity: 0.6,
@@ -113,9 +125,7 @@ class InfoboxComponent extends Component<IProps, IState> {
   };
 
   dismiss() {
-    const {
-      onDismiss,
-    } = this.props;
+    const { onDismiss } = this.props;
 
     this.setState({
       isDismissing: true,
@@ -129,7 +139,7 @@ class InfoboxComponent extends Component<IProps, IState> {
       this.setState({
         dismissed: true,
       });
-    },         3000);
+    }, 3000);
   }
 
   componentWillUnmount(): void {
@@ -144,26 +154,24 @@ class InfoboxComponent extends Component<IProps, IState> {
       icon,
       type,
       ctaLabel,
-      ctaLoading,
       ctaOnClick,
       dismissable,
       className,
     } = this.props;
 
-    const {
-      isDismissing,
-      dismissed,
-    } = this.state;
+    const { isDismissing, dismissed } = this.state;
 
     if (dismissed) {
       return null;
     }
 
     return (
-      <div className={classnames({
-        [classes.wrapper]: true,
-        [`${className}`]: className,
-      })}>
+      <div
+        className={classnames({
+          [classes.wrapper]: true,
+          [`${className}`]: className,
+        })}
+      >
         <div
           className={classnames({
             [classes.infobox]: true,
@@ -172,18 +180,10 @@ class InfoboxComponent extends Component<IProps, IState> {
           })}
           data-type="franz-infobox"
         >
-          {icon && (
-            <Icon icon={icon} className={classes.icon} />
-          )}
-          <div className={classes.content}>
-            {children}
-          </div>
+          {icon && <Icon icon={icon} className={classes.icon} />}
+          <div className={classes.content}>{children}</div>
           {ctaLabel && (
-            <button
-              className={classes.cta}
-              onClick={ctaOnClick}
-              type="button"
-            >
+            <button className={classes.cta} onClick={ctaOnClick} type="button">
               {ctaLabel}
             </button>
           )}
diff --git a/packages/ui/src/loader/index.tsx b/packages/ui/src/loader/index.tsx
index 4a3c8274f..244aa9dc9 100644
--- a/packages/ui/src/loader/index.tsx
+++ b/packages/ui/src/loader/index.tsx
@@ -1,4 +1,3 @@
-import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
 import React, { Component } from 'react';
 import injectStyle, { withTheme } from 'react-jss';
@@ -11,7 +10,7 @@ interface IProps extends IWithStyle {
   color?: string;
 }
 
-const styles = (theme: Theme) => ({
+const styles = () => ({
   container: {
     position: 'relative',
     height: 60,
@@ -20,12 +19,7 @@ const styles = (theme: Theme) => ({
 
 class LoaderComponent extends Component<IProps> {
   render() {
-    const {
-      classes,
-      className,
-      color,
-      theme,
-    } = this.props;
+    const { classes, className, color, theme } = this.props;
 
     return (
       <div
diff --git a/packages/ui/src/typings/generic.ts b/packages/ui/src/typings/generic.ts
index d5f953b9f..a2b9c041c 100644
--- a/packages/ui/src/typings/generic.ts
+++ b/packages/ui/src/typings/generic.ts
@@ -1,6 +1,7 @@
-import { Theme } from '@meetfranz/theme/lib';
 import { Classes } from 'jss';
 
+import { Theme } from '../../../theme';
+
 export interface IWithStyle {
   classes: Classes;
   theme: Theme;
diff --git a/packages/ui/tslint.json b/packages/ui/tslint.json
deleted file mode 100644
index 0946f2096..000000000
--- a/packages/ui/tslint.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "../../tslint.json"
-}