From 6ae9e465b2497dd380b009976035f96767cd82d1 Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Tue, 24 Apr 2018 17:57:39 +0200
Subject: [PATCH] Start PlugYourDevice component

---
 src/components/ManagerPage/PlugYourDevice.js  | 33 +++++++++++++++++++
 .../stories/PlugYourDevice.stories.js         | 18 ++++++++++
 static/i18n/en/manager.yml                    |  4 +++
 3 files changed, 55 insertions(+)
 create mode 100644 src/components/ManagerPage/PlugYourDevice.js
 create mode 100644 src/components/ManagerPage/stories/PlugYourDevice.stories.js

diff --git a/src/components/ManagerPage/PlugYourDevice.js b/src/components/ManagerPage/PlugYourDevice.js
new file mode 100644
index 00000000..cae605be
--- /dev/null
+++ b/src/components/ManagerPage/PlugYourDevice.js
@@ -0,0 +1,33 @@
+// @flow
+
+import React from 'react'
+import { translate } from 'react-i18next'
+
+import type { T } from 'types/common'
+
+import Box, { Card } from 'components/base/Box'
+import Button from 'components/base/Button'
+
+type Props = {
+  t: T,
+}
+
+function PlugYourDevice(props: Props) {
+  const { t } = props
+  return (
+    <Card py={8} align="center">
+      <Box align="center" style={{ width: 365 }}>
+        <Box mb={5}>hey</Box>
+        <Box textAlign="center" mb={1} ff="Museo Sans|Regular" color="dark" fontSize={6}>
+          {t('manager:plugYourDevice.title')}
+        </Box>
+        <Box textAlign="center" mb={5} ff="Open Sans|Regular" color="smoke" fontSize={4}>
+          {t('manager:plugYourDevice.desc')}
+        </Box>
+        <Button primary>{t('manager:plugYourDevice.cta')}</Button>
+      </Box>
+    </Card>
+  )
+}
+
+export default translate()(PlugYourDevice)
diff --git a/src/components/ManagerPage/stories/PlugYourDevice.stories.js b/src/components/ManagerPage/stories/PlugYourDevice.stories.js
new file mode 100644
index 00000000..cc389e29
--- /dev/null
+++ b/src/components/ManagerPage/stories/PlugYourDevice.stories.js
@@ -0,0 +1,18 @@
+// @flow
+
+import React from 'react'
+
+import { storiesOf } from '@storybook/react'
+import { text, select } from '@storybook/addon-knobs'
+import { action } from '@storybook/addon-actions'
+
+import Box from 'components/base/Box'
+import PlugYourDevice from '../PlugYourDevice'
+
+const stories = storiesOf('Components', module)
+
+stories.add('PlugYourDevice', () => (
+  <Box bg="lightGrey" p={6}>
+    <PlugYourDevice />
+  </Box>
+))
diff --git a/static/i18n/en/manager.yml b/static/i18n/en/manager.yml
index 49396b36..a01c4a6f 100644
--- a/static/i18n/en/manager.yml
+++ b/static/i18n/en/manager.yml
@@ -3,3 +3,7 @@ tabs:
   device: My device
 install: Install
 allApps: All apps
+plugYourDevice:
+  title: Plug your device
+  desc: Lorem Ipsum is simply dummy text of the printing and typesetting industry’s standard dummy text
+  cta: Plug my device