Merge pull request #125 from Ultimaker/CL-1207-Improve-connecting-to-cloud

CL-1207 improve connecting to cloud

Author: ImreBognarUltimaker

src/components/__tests__/__snapshots__/generic_flow_page.test.tsx.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`The GenericFlowPage component should render 1`] = `
+<div
+  className="generic-flow-page"
+>
+  <div
+    className="generic-flow-page__logo"
+  >
+    <UltimakerLogo />
+  </div>
+  <div
+    className="generic-flow-page__image"
+  >
+    <img
+      alt="cloud-connecting"
+      className="cloud-connecting-image"
+      src="../../images/cloud_connection/cloud_connecting-image.svg"
+    />
+  </div>
+  <div
+    className="generic-flow-page__title"
+  >
+    Cloud connectivity enabled
+  </div>
+  <div
+    className="generic-flow-page__description"
+  >
+    <p
+      key="0"
+    >
+      Sign in with your Ultimaker account to continue.
+    </p>
+  </div>
+  <div
+    className="generic-flow-page__content"
+  >
+    <Spinner />
+  </div>
+</div>
+`;

src/components/__tests__/generic_flow_page.test.tsx

@@ -0,0 +1,26 @@
+// Copyright (c) 2018 Ultimaker B.V.
+import * as React from 'react';
+import { shallow } from 'enzyme';
+
+// component
+import { GenericFlowPage, GenericFlowPageProps } from '../generic_flow_page';
+import Spinner from '../spinner';
+
+describe('The GenericFlowPage component', () => {
+    let props: GenericFlowPageProps;
+    let wrapper;
+
+    beforeEach(() => {
+        props = {
+            title: 'Cloud connectivity enabled',
+            description: 'Sign in with your Ultimaker account to continue.',
+            image: <img className="cloud-connecting-image" src="../../images/cloud_connection/cloud_connecting-image.svg" alt="cloud-connecting" />,
+            children: <Spinner />,
+        };
+        wrapper = shallow(<GenericFlowPage {...props} />);
+    });
+
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
+});

src/components/generic_flow_page.tsx

@@ -0,0 +1,35 @@
+// Copyright (c) 2018 Ultimaker B.V.
+import * as React from 'react';
+
+// components
+import UltimakerLogo from './icons/ultimaker_logo';
+
+// utils
+import splitTextByNewLine from '../utils/split_text_by_new_line';
+
+export interface GenericFlowPageProps {
+    title: string;
+    description?: string;
+    image?: JSX.Element;
+    children: any;
+}
+
+export const GenericFlowPage: React.StatelessComponent<GenericFlowPageProps> = ({
+    title, description, image, children,
+}) => (
+    <div className="generic-flow-page">
+        <div className="generic-flow-page__logo"><UltimakerLogo /></div>
+        {image
+            && <div className="generic-flow-page__image">{image}</div>
+        }
+        <div className="generic-flow-page__title">{title}</div>
+        {description
+            && <div className="generic-flow-page__description">{splitTextByNewLine(description)}</div>
+        }
+        <div className="generic-flow-page__content">{children}</div>
+    </div>
+);
+
+GenericFlowPage.displayName = 'GenericFlowPage';
+
+export default GenericFlowPage;