onboarding wip

src/components/Onboarding/helperComponents.js

@@ -0,0 +1,28 @@
+// @flow
+import styled from 'styled-components'
+
+import Box from 'components/base/Box'
+
+export const Title = styled(Box).attrs({
+  width: 152,
+  height: 27,
+  ff: 'Museo Sans|Regular',
+  fontSize: 7,
+  color: 'dark',
+})``
+
+export const Description = styled(Box).attrs({
+  width: 340,
+  height: 36,
+  ff: 'Open Sans|Regular',
+  fontSize: 4,
+  textAlign: 'center',
+  color: 'smoke',
+})`
+  margin: 10px auto 25px;
+`
+export const Inner = styled(Box).attrs({
+  horizontal: true,
+  grow: true,
+  flow: 4,
+})``

src/components/Onboarding/index.js

@@ -16,11 +16,23 @@ import Box from 'components/base/Box'
 
 import OnboardingBreadcrumb from './OnboardingBreadcrumb'
 import InitStep from './steps/Init'
-import UserChoice from './steps/UserChoice'
+import ChooseDevice from './steps/ChooseDevice'
+import ChoosePIN from './steps/ChoosePIN'
+import WriteSeed from './steps/WriteSeed'
+import GenuineCheck from './steps/GenuineCheck'
+import SetUpWalletEnv from './steps/SetUpWalletEnv'
+import SetPassword from './steps/SetPassword'
+import Analytics from './steps/Analytics'
 
 const STEPS = {
   init: InitStep,
-  userChoice: UserChoice,
+  chooseDevice: ChooseDevice,
+  choosePIN: ChoosePIN,
+  writeSeed: WriteSeed,
+  genuineCheck: GenuineCheck,
+  setupWalletEnv: SetUpWalletEnv,
+  setPassword: SetPassword,
+  analytics: Analytics,
 }
 
 const mapStateToProps = state => ({
@@ -83,7 +95,9 @@ class Onboarding extends PureComponent<Props> {
     return (
       <Container>
         {step.options.showBreadcrumb && <OnboardingBreadcrumb />}
-        <StepComponent {...stepProps} />
+        <StepContainer>
+          <StepComponent {...stepProps} />
+        </StepContainer>
       </Container>
     )
   }
@@ -91,6 +105,7 @@ class Onboarding extends PureComponent<Props> {
 
 const Container = styled(Box).attrs({
   bg: 'white',
+  p: 5,
 })`
   position: fixed;
   top: 0;
@@ -99,5 +114,7 @@ const Container = styled(Box).attrs({
   bottom: 0;
   z-index: 100;
 `
-
+const StepContainer = styled(Box).attrs({
+  p: 20,
+})``
 export default compose(connect(mapStateToProps, mapDispatchToProps), translate())(Onboarding)

src/components/Onboarding/steps/Analytics.js

@@ -0,0 +1,73 @@
+// @flow
+
+import React from 'react'
+import styled from 'styled-components'
+
+import Box from 'components/base/Box'
+import Button from 'components/base/Button'
+import { ModalFooter } from 'components/base/Modal/index'
+import IconBlue from 'icons/device/Blue'
+import CheckBox from 'components/base/CheckBox'
+import { Title, Description } from '../helperComponents'
+
+import type { StepProps } from '..'
+
+export default (props: StepProps) => {
+  const { nextStep, prevStep } = props
+  return (
+    <Box sticky alignItems="center" justifyContent="center">
+      <Box align="center">
+        <Title>This is ANALYTICS screen. 1 line is the maximum</Title>
+        <Description>
+          This is a long text, please replace it with the final wording once it’s done.
+          <br />
+          Lorem ipsum dolor amet ledger lorem dolor ipsum amet
+        </Description>
+        <DeviceIcon>
+          <IconBlue size={60} />
+        </DeviceIcon>
+        <Box horizontal flow={2} align="center">
+          <CheckBox isChecked />
+          <AnalyticsText>
+            This is a long text, please replace it with the final wording once it’s done.
+            <br />
+            Lorem ipsum dolor amet ledger lorem dolor ipsum amet
+          </AnalyticsText>
+        </Box>
+        <Box horizontal flow={2} align="center">
+          <CheckBox isChecked={false} />
+          <AnalyticsText>
+            This is a long text, please replace it with the final wording once it’s done.
+            <br />
+            Lorem ipsum dolor amet ledger lorem dolor ipsum amet
+          </AnalyticsText>
+        </Box>
+      </Box>
+      <ModalFooter horizontal align="center" justify="flex-end" flow={2}>
+        <Button small outline onClick={() => prevStep()}>
+          Go Back
+        </Button>
+        <Button small primary onClick={() => nextStep()}>
+          Continue
+        </Button>
+      </ModalFooter>
+    </Box>
+  )
+}
+
+export const AnalyticsText = styled(Box).attrs({
+  ff: 'Open Sans|Regular',
+  fontSize: 4,
+  textAlign: 'left',
+  color: 'smoke',
+})`
+  margin: 10px auto 25px;
+  padding-left: 10px;
+`
+const DeviceIcon = styled(Box).attrs({
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: 'graphite',
+})`
+  width: 55px;
+`

src/components/Onboarding/steps/ChooseDevice.js

@@ -0,0 +1,62 @@
+// @flow
+
+import React from 'react'
+import styled from 'styled-components'
+
+import Box from 'components/base/Box'
+import IconNanoS from 'icons/device/NanoS'
+import IconBlue from 'icons/device/Blue'
+import { Title, Description, Inner } from '../helperComponents'
+
+import type { StepProps } from '..'
+
+export default (props: StepProps) => {
+  const { nextStep } = props
+
+  return (
+    <Box sticky alignItems="center" justifyContent="center">
+      <Box align="center">
+        <Title>This is the title of the screen. 1 line is the maximum</Title>
+        <Description>
+          This is a long text, please replace it with the final wording once it’s done.
+          <br />
+          Lorem ipsum dolor amet ledger lorem dolor ipsum amet
+        </Description>
+        <Box>
+          <Inner>
+            <DeviceContainer onClick={() => nextStep()}>
+              <DeviceIcon>
+                <IconNanoS size={46} />
+              </DeviceIcon>
+              <Title>Ledger Nano S</Title>
+              <Description>Please replace it with the final wording once it’s done.</Description>
+            </DeviceContainer>
+            <DeviceContainer>
+              <DeviceIcon>
+                <IconBlue size={46} />
+              </DeviceIcon>
+              <Title>Ledger Blue</Title>
+              <Description>Please replace it with the final wording once it’s done.</Description>
+            </DeviceContainer>
+          </Inner>
+        </Box>
+      </Box>
+    </Box>
+  )
+}
+
+const DeviceContainer = styled(Box).attrs({
+  alignItems: 'center',
+  justifyContent: 'center',
+})`
+  width: 218px;
+  height: 204px;
+  border: 1px solid #d8d8d8;
+`
+const DeviceIcon = styled(Box).attrs({
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: 'graphite',
+})`
+  width: 55px;
+`

src/components/Onboarding/steps/ChoosePIN.js

@@ -0,0 +1,34 @@
+// @flow
+
+import React from 'react'
+
+import Box from 'components/base/Box'
+import Button from 'components/base/Button'
+import { ModalFooter } from 'components/base/Modal/index'
+import { Title, Description } from '../helperComponents'
+
+import type { StepProps } from '..'
+
+export default (props: StepProps) => {
+  const { nextStep, prevStep } = props
+  return (
+    <Box sticky alignItems="center" justifyContent="center">
+      <Box align="center">
+        <Title>This is CHOOSE PIN screen. 1 line is the maximum</Title>
+        <Description>
+          This is a long text, please replace it with the final wording once it’s done.
+          <br />
+          Lorem ipsum dolor amet ledger lorem dolor ipsum amet
+        </Description>
+      </Box>
+      <ModalFooter horizontal align="center" justify="flex-end" flow={2}>
+        <Button small outline onClick={() => prevStep()}>
+          Go Back
+        </Button>
+        <Button small primary onClick={() => nextStep()}>
+          Continue
+        </Button>
+      </ModalFooter>
+    </Box>
+  )
+}

src/components/Onboarding/steps/GenuineCheck.js

@@ -0,0 +1,37 @@
+// @flow
+
+import React from 'react'
+
+import Box from 'components/base/Box'
+import Button from 'components/base/Button'
+import { ModalFooter } from 'components/base/Modal/index'
+import { Title, Description } from '../helperComponents'
+
+import type { StepProps } from '..'
+
+export default (props: StepProps) => {
+  const { nextStep, prevStep, jumpStep } = props
+  return (
+    <Box sticky alignItems="center" justifyContent="center">
+      <Box align="center">
+        <Title>This is CHOOSE PIN screen. 1 line is the maximum</Title>
+        <Description>
+          This is a long text, please replace it with the final wording once it’s done.
+          <br />
+          Lorem ipsum dolor amet ledger lorem dolor ipsum amet
+        </Description>
+      </Box>
+      <ModalFooter horizontal align="center" justify="flex-end" flow={2}>
+        <Button small outline onClick={() => prevStep()}>
+          Go Back
+        </Button>
+        <Button big danger onClick={() => jumpStep('init')}>
+          Test JUMP!
+        </Button>
+        <Button small primary onClick={() => nextStep()}>
+          Continue
+        </Button>
+      </ModalFooter>
+    </Box>
+  )
+}

src/components/Onboarding/steps/Init.js

@@ -1,18 +1,85 @@
 // @flow
 
 import React from 'react'
+import styled from 'styled-components'
 
-import Button from 'components/base/Button'
 import Box from 'components/base/Box'
+import IconNanoS from 'icons/device/NanoS'
+import IconBlue from 'icons/device/Blue'
+import { Title, Description, Inner } from '../helperComponents'
 
 import type { StepProps } from '..'
 
 export default (props: StepProps) => {
-  const { nextStep } = props
+  const { nextStep, jumpStep } = props
+  /* TODO: all titles, descriptions to be wrapped in a translation tag once defined */
   return (
-    <Box>
+    <Box sticky alignItems="center" justifyContent="center">
-      hey im step init
+      <Box align="center">
-      <Button onClick={() => nextStep()}>press me for going to prev</Button>
+        <Title>This is the title of the screen. 1 line is the maximum</Title>
+        <Description>
+          This is a long text, please replace it with the final wording once it’s done.
+          <br />
+          Lorem ipsum dolor amet ledger lorem dolor ipsum amet
+        </Description>
+        <Box>
+          <Inner>
+            <DeviceContainer onClick={() => nextStep()}>
+              <DeviceIcon>
+                <IconNanoS size={24} />
+              </DeviceIcon>
+              <TrackChoiceTitle>Clean Nano S setup</TrackChoiceTitle>
+              <Description>Please replace it with the final wording once it’s done.</Description>
+            </DeviceContainer>
+            <DeviceContainer onClick={() => jumpStep('genuineCheck')}>
+              <DeviceIcon>
+                <IconBlue size={24} />
+              </DeviceIcon>
+              <TrackChoiceTitle>Existing seed + Clean setup</TrackChoiceTitle>
+              <Description>Please replace it with the final wording once it’s done.</Description>
+            </DeviceContainer>
+          </Inner>
+          <Inner>
+            <DeviceContainer onClick={() => nextStep()}>
+              <DeviceIcon>
+                <IconNanoS size={24} />
+              </DeviceIcon>
+              <TrackChoiceTitle>Migrate accounts</TrackChoiceTitle>
+              <Description>Please replace it with the final wording once it’s done.</Description>
+            </DeviceContainer>
+            <DeviceContainer>
+              <DeviceIcon>
+                <IconBlue size={24} />
+              </DeviceIcon>
+              <TrackChoiceTitle>Not a user, but would love to</TrackChoiceTitle>
+              <Description>Please replace it with the final wording once it’s done.</Description>
+            </DeviceContainer>
+          </Inner>
+        </Box>
+      </Box>
     </Box>
   )
 }
+
+const DeviceContainer = styled(Box).attrs({
+  alignItems: 'center',
+  justifyContent: 'center',
+})`
+  width: 218px;
+  height: 204px;
+  border: 1px solid #d8d8d8;
+`
+const DeviceIcon = styled(Box).attrs({
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: 'graphite',
+})`
+  width: 55px;
+`
+export const TrackChoiceTitle = styled(Box).attrs({
+  width: 152,
+  height: 27,
+  ff: 'Museo Sans|Regular',
+  fontSize: 5,
+  color: 'dark',
+})``

src/components/Onboarding/steps/SetPassword.js

@@ -0,0 +1,47 @@
+// @flow
+
+import React from 'react'
+
+import Box from 'components/base/Box'
+import Button from 'components/base/Button'
+import { ModalFooter } from 'components/base/Modal/index'
+import Text from 'components/base/Text'
+
+import IconLock from 'icons/Lock'
+import type { StepProps } from '..'
+import { Title, Description } from '../helperComponents'
+
+export default (props: StepProps) => {
+  const handleSetPassword = () => {
+    console.warn('SET PASSWORD TRIGGER') // eslint-disable-line
+  }
+  const { nextStep, prevStep } = props
+  return (
+    <Box sticky alignItems="center" justifyContent="center">
+      <Box align="center">
+        <Title>This is SET PASSWORD screen. 1 line is the maximum</Title>
+        <Description>
+          This is a long text, please replace it with the final wording once it’s done.
+          <br />
+          Lorem ipsum dolor amet ledger lorem dolor ipsum amet
+        </Description>
+        <IconLock size={30} />
+        <Button small primary onClick={() => handleSetPassword()}>
+          Set Password
+        </Button>
+        <Box onClick={() => nextStep()} style={{ padding: 15 }}>
+          <Text color="smoke">I do not want to set it up</Text>
+        </Box>
+      </Box>
+
+      <ModalFooter horizontal align="center" justify="flex-end" flow={2}>
+        <Button small outline onClick={() => prevStep()}>
+          Go Back
+        </Button>
+        <Button small primary onClick={() => nextStep()}>
+          Continue
+        </Button>
+      </ModalFooter>
+    </Box>
+  )
+}

src/components/Onboarding/steps/SetUpWalletEnv.js

@@ -0,0 +1,34 @@
+// @flow
+
+import React from 'react'
+
+import Box from 'components/base/Box'
+import Button from 'components/base/Button'
+import { ModalFooter } from 'components/base/Modal/index'
+
+import type { StepProps } from '..'
+import { Title, Description } from '../helperComponents'
+
+export default (props: StepProps) => {
+  const { nextStep, prevStep } = props
+  return (
+    <Box sticky alignItems="center" justifyContent="center">
+      <Box align="center">
+        <Title>This is WALLET SETUP screen. 1 line is the maximum</Title>
+        <Description>
+          This is a long text, please replace it with the final wording once it’s done.
+          <br />
+          Lorem ipsum dolor amet ledger lorem dolor ipsum amet
+        </Description>
+      </Box>
+      <ModalFooter horizontal align="center" justify="flex-end" flow={2}>
+        <Button small outline onClick={() => prevStep()}>
+          Go Back
+        </Button>
+        <Button small primary onClick={() => nextStep()}>
+          Continue
+        </Button>
+      </ModalFooter>
+    </Box>
+  )
+}

src/components/Onboarding/steps/UserChoice.js

@@ -1,17 +0,0 @@
-// @flow
-
-import React from 'react'
-
-import Button from 'components/base/Button'
-
-import type { StepProps } from '..'
-
-export default (props: StepProps) => {
-  const { jumpStep } = props
-  return (
-    <div>
-      hey im step user choice
-      <Button onClick={() => jumpStep('init')}>press me for going to prev</Button>
-    </div>
-  )
-}

src/components/Onboarding/steps/WriteSeed.js

@@ -0,0 +1,34 @@
+// @flow
+
+import React from 'react'
+
+import Box from 'components/base/Box'
+import Button from 'components/base/Button'
+import { ModalFooter } from 'components/base/Modal/index'
+import { Title, Description } from '../helperComponents'
+
+import type { StepProps } from '..'
+
+export default (props: StepProps) => {
+  const { nextStep, prevStep } = props
+  return (
+    <Box sticky alignItems="center" justifyContent="center">
+      <Box align="center">
+        <Title>This is WRITE SEED screen. 1 line is the maximum</Title>
+        <Description>
+          This is a long text, please replace it with the final wording once it’s done.
+          <br />
+          Lorem ipsum dolor amet ledger lorem dolor ipsum amet
+        </Description>
+      </Box>
+      <ModalFooter horizontal align="center" justify="flex-end" flow={2}>
+        <Button small outline onClick={() => prevStep()}>
+          Go Back
+        </Button>
+        <Button small primary onClick={() => nextStep()}>
+          Continue
+        </Button>
+      </ModalFooter>
+    </Box>
+  )
+}

src/reducers/onboarding.js

@@ -33,8 +33,62 @@ const state: OnboardingState = {
       },
     },
     {
-      name: 'userChoice',
+      name: 'chooseDevice',
-      label: 'something:translated',
+      label: 'chooseDevice:translated',
+      options: {
+        showFooter: false,
+        showBackground: true,
+        showBreadcrumb: true,
+      },
+    },
+    {
+      name: 'choosePIN',
+      label: 'choosePIN:translated',
+      options: {
+        showFooter: false,
+        showBackground: true,
+        showBreadcrumb: true,
+      },
+    },
+    {
+      name: 'writeSeed',
+      label: 'writeSeed:translated',
+      options: {
+        showFooter: false,
+        showBackground: true,
+        showBreadcrumb: true,
+      },
+    },
+    {
+      name: 'genuineCheck',
+      label: 'genuineCheck:translated',
+      options: {
+        showFooter: false,
+        showBackground: true,
+        showBreadcrumb: true,
+      },
+    },
+    {
+      name: 'setupWalletEnv',
+      label: 'Install Apps & Create Account:translated',
+      options: {
+        showFooter: false,
+        showBackground: true,
+        showBreadcrumb: true,
+      },
+    },
+    {
+      name: 'setPassword',
+      label: 'Password:translated',
+      options: {
+        showFooter: false,
+        showBackground: true,
+        showBreadcrumb: true,
+      },
+    },
+    {
+      name: 'analytics',
+      label: 'Analytics & Bug report:translated',
       options: {
         showFooter: false,
         showBackground: true,