Gaëtan Renaudeau
7 years ago
committed by
GitHub
GitHub
38 changed files with 190 additions and 110 deletions
@ -1,12 +1,12 @@ |
|||
import React from 'react' |
|||
import { storiesOf } from '@storybook/react' |
|||
import { boolean } from '@storybook/addon-knobs' |
|||
import { action } from '@storybook/addon-actions' |
|||
import { boolean } from '@storybook/addon-knobs' |
|||
|
|||
import CheckBox from 'components/base/CheckBox' |
|||
|
|||
const stories = storiesOf('Components/base', module) |
|||
|
|||
stories.add('CheckBox', () => ( |
|||
<CheckBox isChecked={boolean('isChecked', false)} onChange={action('onChange')} /> |
|||
<CheckBox isChecked={boolean('checked', false)} onChange={action('onChange')} /> |
|||
)) |
|||
|
|||
@ -0,0 +1,53 @@ |
|||
// @flow
|
|||
|
|||
import React from 'react' |
|||
import noop from 'lodash/noop' |
|||
import styled from 'styled-components' |
|||
|
|||
import { Tabbable } from 'components/base/Box' |
|||
|
|||
const Base = styled(Tabbable).attrs({ |
|||
bg: p => (p.isChecked ? 'wallet' : 'lightFog'), |
|||
horizontal: true, |
|||
align: 'center', |
|||
})` |
|||
backround: red; |
|||
width: 50px; |
|||
height: 26px; |
|||
border-radius: 13px; |
|||
transition: 250ms linear background-color; |
|||
cursor: pointer; |
|||
&:focus { |
|||
outline: none; |
|||
} |
|||
` |
|||
|
|||
const Ball = styled.div` |
|||
width: 20px; |
|||
height: 20px; |
|||
border-radius: 50%; |
|||
background: white; |
|||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2); |
|||
transition: 250ms ease-in-out transform; |
|||
transform: translate3d(${p => (p.isChecked ? '27px' : '3px')}, 0, 0); |
|||
` |
|||
|
|||
type Props = { |
|||
isChecked: boolean, |
|||
onChange?: Function, |
|||
} |
|||
|
|||
function Switch(props: Props) { |
|||
const { isChecked, onChange, ...p } = props |
|||
return ( |
|||
<Base isChecked={isChecked} onClick={() => onChange && onChange(!isChecked)} {...p}> |
|||
<Ball isChecked={isChecked} /> |
|||
</Base> |
|||
) |
|||
} |
|||
|
|||
Switch.defaultProps = { |
|||
onChange: noop, |
|||
} |
|||
|
|||
export default Switch |
|||
@ -0,0 +1,12 @@ |
|||
import React from 'react' |
|||
import { storiesOf } from '@storybook/react' |
|||
import { boolean } from '@storybook/addon-knobs' |
|||
import { action } from '@storybook/addon-actions' |
|||
|
|||
import Switch from 'components/base/Switch' |
|||
|
|||
const stories = storiesOf('Components/base', module) |
|||
|
|||
stories.add('Switch', () => ( |
|||
<Switch isChecked={boolean('isChecked', false)} onChange={action('onChange')} /> |
|||
)) |
|||
@ -1,32 +1,57 @@ |
|||
// @flow
|
|||
|
|||
import React from 'react' |
|||
import React, { Fragment } from 'react' |
|||
import styled from 'styled-components' |
|||
|
|||
import TrackPage from 'analytics/TrackPage' |
|||
import Box from 'components/base/Box' |
|||
import Button from 'components/base/Button' |
|||
import IconCheckCircle from 'icons/CheckCircle' |
|||
|
|||
import IconCheckFull from 'icons/CheckFull' |
|||
import { CurrencyCircleIcon } from '../../../base/CurrencyBadge' |
|||
import type { StepProps } from '../index' |
|||
|
|||
function StepFinish({ onCloseModal, onGoStep1, t }: StepProps) { |
|||
const Title = styled(Box).attrs({ |
|||
ff: 'Museo Sans', |
|||
fontSize: 5, |
|||
mt: 2, |
|||
color: 'dark', |
|||
})` |
|||
text-align: center; |
|||
` |
|||
|
|||
const Text = styled(Box).attrs({ |
|||
ff: 'Open Sans', |
|||
fontSize: 4, |
|||
mt: 2, |
|||
})` |
|||
text-align: center; |
|||
` |
|||
|
|||
function StepFinish({ currency, t, checkedAccountsIds }: StepProps) { |
|||
return ( |
|||
<Box align="center" py={6}> |
|||
<TrackPage category="AddAccounts" name="Step4" /> |
|||
<Box color="positiveGreen"> |
|||
<IconCheckCircle size={40} /> |
|||
</Box> |
|||
<Box p={4}>{t('app:addAccounts.success')}</Box> |
|||
<Box horizontal> |
|||
<Button mr={2} outline onClick={onGoStep1}> |
|||
{t('app:addAccounts.cta.addMore')} |
|||
</Button> |
|||
<Button primary onClick={onCloseModal}> |
|||
{t('app:common.close')} |
|||
</Button> |
|||
</Box> |
|||
{currency ? ( |
|||
<Box color="positiveGreen" style={{ position: 'relative' }}> |
|||
<CurrencyCircleIcon size={50} currency={currency} /> |
|||
<IconCheckFull size={18} style={{ position: 'absolute', top: 0, right: 0 }} /> |
|||
</Box> |
|||
) : null} |
|||
<Title>{t('app:addAccounts.success', { count: checkedAccountsIds.length })}</Title> |
|||
<Text>{t('app:addAccounts.successDescription', { count: checkedAccountsIds.length })}</Text> |
|||
</Box> |
|||
) |
|||
} |
|||
|
|||
export default StepFinish |
|||
|
|||
export const StepFinishFooter = ({ onCloseModal, onGoStep1, t }: StepProps) => ( |
|||
<Fragment> |
|||
<Button mr={2} outline onClick={onGoStep1}> |
|||
{t('app:addAccounts.cta.addMore')} |
|||
</Button> |
|||
<Button primary onClick={onCloseModal}> |
|||
{t('app:common.close')} |
|||
</Button> |
|||
</Fragment> |
|||
) |
|||
|
|||
Loading…
Reference in new issue