JimmyMow
6 years ago
committed by
GitHub
GitHub
114 changed files with 727 additions and 517 deletions
@ -1,10 +1,25 @@ |
|||||
<style> |
<style> |
||||
.story-title, |
.dark .story-title, |
||||
.story-subtitle, |
.dark .story-subtitle, |
||||
.chapter-header, |
.dark .chapter-header, |
||||
.section-header, |
.dark .section-header, |
||||
.section-subsection, |
.dark .section-subsection, |
||||
.section-button-container { |
.dark .section-button-container { |
||||
filter: invert(100%); |
color: white !important; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
.light .story-title, |
||||
|
.light .story-subtitle, |
||||
|
.light .chapter-header, |
||||
|
.light .section-header, |
||||
|
.light .section-subsection, |
||||
|
.light .section-button-container { |
||||
|
color: black !important; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
.story-header p { |
||||
|
margin-bottom: 1em; |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
@ -1,95 +0,0 @@ |
|||||
import React from 'react' |
|
||||
import PropTypes from 'prop-types' |
|
||||
|
|
||||
import { FormattedMessage } from 'react-intl' |
|
||||
import messages from './messages' |
|
||||
|
|
||||
import styles from './Countdown.scss' |
|
||||
|
|
||||
class Countdown extends React.Component { |
|
||||
constructor(props) { |
|
||||
super(props) |
|
||||
|
|
||||
this.state = { |
|
||||
days: null, |
|
||||
hours: null, |
|
||||
minutes: null, |
|
||||
seconds: null, |
|
||||
expired: false, |
|
||||
interval: null |
|
||||
} |
|
||||
|
|
||||
this.timerInterval = this.timerInterval.bind(this) |
|
||||
} |
|
||||
|
|
||||
componentDidMount() { |
|
||||
const interval = setInterval(this.timerInterval, 1000) |
|
||||
// store interval in the state so it can be accessed later
|
|
||||
this.setState({ interval }) |
|
||||
} |
|
||||
|
|
||||
componentWillUnmount() { |
|
||||
const { interval } = this.state |
|
||||
// use interval from the state to clear the interval
|
|
||||
clearInterval(interval) |
|
||||
} |
|
||||
|
|
||||
timerInterval() { |
|
||||
const convertTwoDigits = n => (n > 9 ? n : `0${n}`.slice(-2)) |
|
||||
|
|
||||
const now = new Date().getTime() |
|
||||
const { countDownDate } = this.props |
|
||||
const countDownSeconds = countDownDate * 1000 |
|
||||
const distance = countDownSeconds - now |
|
||||
|
|
||||
if (distance <= 0) { |
|
||||
this.setState({ expired: true }) |
|
||||
const { interval } = this.state |
|
||||
clearInterval(interval) |
|
||||
return |
|
||||
} |
|
||||
|
|
||||
const days = convertTwoDigits(Math.floor(distance / (1000 * 60 * 60 * 24))) |
|
||||
const hours = convertTwoDigits( |
|
||||
Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) |
|
||||
) |
|
||||
const minutes = convertTwoDigits(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))) |
|
||||
const seconds = convertTwoDigits(Math.floor((distance % (1000 * 60)) / 1000)) |
|
||||
|
|
||||
this.setState({ |
|
||||
days, |
|
||||
hours, |
|
||||
minutes, |
|
||||
seconds |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
render() { |
|
||||
const { days, hours, minutes, seconds, expired } = this.state |
|
||||
|
|
||||
if (expired) { |
|
||||
return <span className={`${styles.container} ${styles.expired}`}>Expired</span> |
|
||||
} |
|
||||
if (!days && !hours && !minutes && !seconds) { |
|
||||
return <span className={styles.container} /> |
|
||||
} |
|
||||
|
|
||||
return ( |
|
||||
<span className={styles.container}> |
|
||||
<i className={styles.caption}> |
|
||||
<FormattedMessage {...messages.expires} /> |
|
||||
</i> |
|
||||
<i>{days > 0 && `${days}:`}</i> |
|
||||
<i>{hours > 0 && `${hours}:`}</i> |
|
||||
<i>{minutes > 0 && `${minutes}:`}</i> |
|
||||
<i>{seconds >= 0 && `${seconds}`}</i> |
|
||||
</span> |
|
||||
) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
Countdown.propTypes = { |
|
||||
countDownDate: PropTypes.number.isRequired |
|
||||
} |
|
||||
|
|
||||
export default Countdown |
|
||||
@ -1,16 +0,0 @@ |
|||||
@import 'styles/variables.scss'; |
|
||||
|
|
||||
.container { |
|
||||
display: block; |
|
||||
text-align: center; |
|
||||
font-size: 12px; |
|
||||
min-height: 12px; |
|
||||
|
|
||||
&.expired { |
|
||||
color: $red; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.caption { |
|
||||
margin-right: 4px; |
|
||||
} |
|
||||
@ -1,3 +0,0 @@ |
|||||
import Countdown from './Countdown' |
|
||||
|
|
||||
export default Countdown |
|
||||
@ -1,6 +0,0 @@ |
|||||
import { defineMessages } from 'react-intl' |
|
||||
|
|
||||
/* eslint-disable max-len */ |
|
||||
export default defineMessages({ |
|
||||
expires: 'Expires in' |
|
||||
}) |
|
||||
@ -1,3 +0,0 @@ |
|||||
import AmountInput from './AmountInput' |
|
||||
|
|
||||
export default AmountInput |
|
||||
@ -1,23 +0,0 @@ |
|||||
import React from 'react' |
|
||||
import PropTypes from 'prop-types' |
|
||||
|
|
||||
import SkinnyBitcoin from 'components/Icon/SkinnyBitcoin' |
|
||||
import Litecoin from 'components/Icon/Litecoin' |
|
||||
|
|
||||
const CryptoIcon = ({ currency, styles }) => { |
|
||||
switch (currency) { |
|
||||
case 'btc': |
|
||||
return <SkinnyBitcoin style={styles} /> |
|
||||
case 'ltc': |
|
||||
return <Litecoin style={styles} /> |
|
||||
default: |
|
||||
return <span /> |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
CryptoIcon.propTypes = { |
|
||||
currency: PropTypes.string.isRequired, |
|
||||
styles: PropTypes.object |
|
||||
} |
|
||||
|
|
||||
export default CryptoIcon |
|
||||
@ -1,3 +0,0 @@ |
|||||
import CryptoIcon from './CryptoIcon' |
|
||||
|
|
||||
export default CryptoIcon |
|
||||
@ -1,20 +0,0 @@ |
|||||
import React from 'react' |
|
||||
import PropTypes from 'prop-types' |
|
||||
import FaDollar from 'react-icons/lib/fa/dollar' |
|
||||
import CryptoIcon from '../CryptoIcon' |
|
||||
|
|
||||
const CurrencyIcon = ({ currency, crypto, styles }) => { |
|
||||
return currency === 'usd' ? ( |
|
||||
<FaDollar style={styles} /> |
|
||||
) : ( |
|
||||
<CryptoIcon styles={styles} currency={crypto} /> |
|
||||
) |
|
||||
} |
|
||||
|
|
||||
CurrencyIcon.propTypes = { |
|
||||
currency: PropTypes.string.isRequired, |
|
||||
crypto: PropTypes.string.isRequired, |
|
||||
styles: PropTypes.object |
|
||||
} |
|
||||
|
|
||||
export default CurrencyIcon |
|
||||
@ -1,3 +0,0 @@ |
|||||
import CurrencyIcon from './CurrencyIcon' |
|
||||
|
|
||||
export default CurrencyIcon |
|
||||
File diff suppressed because one or more lines are too long
@ -1,24 +0,0 @@ |
|||||
import React from 'react' |
|
||||
import PropTypes from 'prop-types' |
|
||||
import { Box, Flex } from 'rebass' |
|
||||
import { Text } from 'components/UI' |
|
||||
|
|
||||
const PaySummaryRow = ({ left, right }) => ( |
|
||||
<Box py={3}> |
|
||||
<Flex alignItems="center"> |
|
||||
<Box width={1 / 2}> |
|
||||
<Text fontWeight="normal">{left}</Text> |
|
||||
</Box> |
|
||||
<Box width={1 / 2}> |
|
||||
<Text textAlign="right">{right}</Text> |
|
||||
</Box> |
|
||||
</Flex> |
|
||||
</Box> |
|
||||
) |
|
||||
|
|
||||
PaySummaryRow.propTypes = { |
|
||||
left: PropTypes.any, |
|
||||
right: PropTypes.any |
|
||||
} |
|
||||
|
|
||||
export default PaySummaryRow |
|
||||
@ -0,0 +1,85 @@ |
|||||
|
import React from 'react' |
||||
|
import PropTypes from 'prop-types' |
||||
|
|
||||
|
import { FormattedMessage, FormattedRelative } from 'react-intl' |
||||
|
import { Text } from 'components/UI' |
||||
|
import messages from './messages' |
||||
|
|
||||
|
class Countdown extends React.Component { |
||||
|
state = { |
||||
|
isExpired: null, |
||||
|
timer: null |
||||
|
} |
||||
|
|
||||
|
static propTypes = { |
||||
|
colorActive: PropTypes.string, |
||||
|
colorExpired: PropTypes.string, |
||||
|
date: PropTypes.oneOfType([PropTypes.number, PropTypes.instanceOf(Date)]).isRequired, |
||||
|
countdownStyle: PropTypes.string, |
||||
|
countUpAfterExpire: PropTypes.bool, |
||||
|
updateInterval: PropTypes.number |
||||
|
} |
||||
|
|
||||
|
static defaultProps = { |
||||
|
colorActive: 'superGreen', |
||||
|
colorExpired: 'superRed', |
||||
|
countdownStyle: 'best fit', |
||||
|
countUpAfterExpire: true, |
||||
|
updateInterval: 1000 |
||||
|
} |
||||
|
|
||||
|
componentDidMount() { |
||||
|
let { date } = this.props |
||||
|
if (date instanceof Date) { |
||||
|
date = new Date(date) |
||||
|
} |
||||
|
|
||||
|
const expiresIn = date - Date.now() |
||||
|
if (expiresIn >= 0) { |
||||
|
this.setState({ isExpired: false }) |
||||
|
const timer = setInterval(() => this.setState({ isExpired: true }), expiresIn) |
||||
|
this.setState({ timer }) |
||||
|
} else { |
||||
|
this.setState({ isExpired: true }) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
componentWillUnmount() { |
||||
|
const { timer } = this.state |
||||
|
clearInterval(timer) |
||||
|
} |
||||
|
|
||||
|
render() { |
||||
|
const { |
||||
|
colorActive, |
||||
|
colorExpired, |
||||
|
countdownStyle, |
||||
|
countUpAfterExpire, |
||||
|
date, |
||||
|
updateInterval, |
||||
|
...rest |
||||
|
} = this.props |
||||
|
const { isExpired } = this.state |
||||
|
return ( |
||||
|
<Text color={isExpired ? colorExpired : colorActive} {...rest}> |
||||
|
{isExpired ? ( |
||||
|
<FormattedMessage {...messages.expired} /> |
||||
|
) : ( |
||||
|
<FormattedMessage {...messages.expires} /> |
||||
|
)} |
||||
|
{(!isExpired || (isExpired && countUpAfterExpire)) && ( |
||||
|
<React.Fragment> |
||||
|
{` `} |
||||
|
<FormattedRelative |
||||
|
value={new Date(date)} |
||||
|
updateInterval={updateInterval} |
||||
|
style={countdownStyle} |
||||
|
/> |
||||
|
</React.Fragment> |
||||
|
)} |
||||
|
</Text> |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default Countdown |
||||
@ -0,0 +1,22 @@ |
|||||
|
import React from 'react' |
||||
|
import PropTypes from 'prop-types' |
||||
|
import { Flex } from 'rebass' |
||||
|
import { Text } from 'components/UI' |
||||
|
|
||||
|
const DataRow = ({ left, right }) => ( |
||||
|
<Flex alignItems="center" py={3}> |
||||
|
<Text width={1 / 2} fontWeight="normal"> |
||||
|
{left} |
||||
|
</Text> |
||||
|
<Text width={1 / 2} textAlign="right"> |
||||
|
{right} |
||||
|
</Text> |
||||
|
</Flex> |
||||
|
) |
||||
|
|
||||
|
DataRow.propTypes = { |
||||
|
left: PropTypes.any, |
||||
|
right: PropTypes.any |
||||
|
} |
||||
|
|
||||
|
export default DataRow |
||||
@ -1,3 +0,0 @@ |
|||||
import Value from './Value' |
|
||||
|
|
||||
export default Value |
|
||||
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 337 B After Width: | Height: | Size: 342 B |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.1 KiB |
@ -1,5 +1,186 @@ |
|||||
|
import React from 'react' |
||||
import { storiesOf } from '@storybook/react' |
import { storiesOf } from '@storybook/react' |
||||
|
import { StateDecorator, Store } from '@sambego/storybook-state' |
||||
|
import { Flex } from 'rebass' |
||||
|
import { |
||||
|
Button, |
||||
|
Dropdown, |
||||
|
Form, |
||||
|
Input, |
||||
|
Label, |
||||
|
LightningInvoiceInput, |
||||
|
Message, |
||||
|
Notification, |
||||
|
Range, |
||||
|
TextArea, |
||||
|
Toggle |
||||
|
} from 'components/UI' |
||||
|
import { Column, Group, Element } from './helpers' |
||||
|
|
||||
storiesOf('Welcome', module).addWithChapters('Zap Style Guide', { |
const store = new Store({ |
||||
subtitle: 'Reusable components for Zap Desktop.' |
crypto: 'btc', |
||||
|
fiat: 'usd', |
||||
|
cryptoCurrencies: [ |
||||
|
{ |
||||
|
key: 'btc', |
||||
|
name: 'BTC' |
||||
|
}, |
||||
|
{ |
||||
|
key: 'bits', |
||||
|
name: 'bits' |
||||
|
}, |
||||
|
{ |
||||
|
key: 'sats', |
||||
|
name: 'satoshis' |
||||
|
} |
||||
|
], |
||||
|
fiatCurrencies: [ |
||||
|
{ |
||||
|
key: 'usd', |
||||
|
name: 'USD' |
||||
|
}, |
||||
|
{ |
||||
|
key: 'eur', |
||||
|
name: 'EUR' |
||||
|
}, |
||||
|
{ |
||||
|
key: 'gbp', |
||||
|
name: 'GBP' |
||||
|
} |
||||
|
] |
||||
}) |
}) |
||||
|
|
||||
|
storiesOf('Welcome', module) |
||||
|
.addDecorator(StateDecorator(store)) |
||||
|
.addWithChapters('Zap Style Guide', { |
||||
|
subtitle: 'Reusable components for Zap Desktop.', |
||||
|
info: `The Zap style guide showcases and documents our library of reusable React components. Below is a sample of
|
||||
|
these components. You can see more examples and full documentation of each component using the navigation on the |
||||
|
left. Use the Theme Picker in the bottom panel to view components in one of our alternate themes.`,
|
||||
|
chapters: [ |
||||
|
{ |
||||
|
sections: [ |
||||
|
{ |
||||
|
options: { |
||||
|
showSource: false, |
||||
|
allowSourceToggling: false, |
||||
|
showPropTables: false, |
||||
|
allowPropTablesToggling: false |
||||
|
}, |
||||
|
sectionFn: () => ( |
||||
|
<Flex> |
||||
|
<Column> |
||||
|
<Group title="Message"> |
||||
|
<Element> |
||||
|
<Message variant="error">Error message</Message> |
||||
|
</Element> |
||||
|
<Element> |
||||
|
<Message variant="success">Success message</Message> |
||||
|
</Element> |
||||
|
<Element> |
||||
|
<Message variant="warning">Warning message</Message> |
||||
|
</Element> |
||||
|
</Group> |
||||
|
|
||||
|
<Group title="Notification"> |
||||
|
<Element> |
||||
|
<Notification variant="error">Error message</Notification> |
||||
|
</Element> |
||||
|
<Element> |
||||
|
<Notification variant="success">Success message</Notification> |
||||
|
</Element> |
||||
|
<Element> |
||||
|
<Notification variant="warning">Warning message</Notification> |
||||
|
</Element> |
||||
|
</Group> |
||||
|
</Column> |
||||
|
|
||||
|
<Column> |
||||
|
<Group title="Input with Label"> |
||||
|
<Form> |
||||
|
<Label htmlFor="input">Input Label</Label> |
||||
|
<Input field="input" /> |
||||
|
</Form> |
||||
|
</Group> |
||||
|
|
||||
|
<Group title="TextArea with Label"> |
||||
|
<Form> |
||||
|
<Label htmlFor="input">Input Label</Label> |
||||
|
<TextArea field="input" /> |
||||
|
</Form> |
||||
|
</Group> |
||||
|
|
||||
|
<Group title="Lightning Invoice Input"> |
||||
|
<Form> |
||||
|
<LightningInvoiceInput |
||||
|
field="input" |
||||
|
chain="bitcoin" |
||||
|
network="testnet" |
||||
|
rows={7} |
||||
|
validateOnBlur |
||||
|
validateOnChange |
||||
|
/* eslint-disable max-len */ |
||||
|
initialValue="lntb100u1pdaxza7pp5x73t3j7xgvkzgcdvzgpdg74k4pn0uhwuxlxu9qssytjn77x7zs4qdqqcqzysxqyz5vqd20eaq5uferzgzwasu5te3pla7gv8tzk8gcdxlj7lpkygvfdwndhwtl3ezn9ltjejl3hsp36ps3z3e5pp4rzp2hgqjqql80ec3hyzucq4d9axl" |
||||
|
/> |
||||
|
</Form> |
||||
|
</Group> |
||||
|
</Column> |
||||
|
|
||||
|
<Column> |
||||
|
<Group title="Button"> |
||||
|
<Element> |
||||
|
<Button>Text</Button> |
||||
|
</Element> |
||||
|
<Element> |
||||
|
<Button size="small">Text</Button> |
||||
|
</Element> |
||||
|
</Group> |
||||
|
|
||||
|
<Group title="Secondary Button"> |
||||
|
<Element> |
||||
|
<Button variant="secondary">Text</Button> |
||||
|
</Element> |
||||
|
</Group> |
||||
|
|
||||
|
<Group title="Loading Button"> |
||||
|
<Element> |
||||
|
<Button>Send 0.1235 BTC</Button> |
||||
|
</Element> |
||||
|
<Element> |
||||
|
<Button processing disabled> |
||||
|
Send 0.1235 BTC |
||||
|
</Button> |
||||
|
</Element> |
||||
|
</Group> |
||||
|
</Column> |
||||
|
|
||||
|
<Column> |
||||
|
<Group title="Dropdown"> |
||||
|
<Element> |
||||
|
<Dropdown |
||||
|
activeKey={store.get('fiat')} |
||||
|
items={store.get('fiatCurrencies')} |
||||
|
onChange={fiat => store.set({ fiat })} |
||||
|
/> |
||||
|
</Element> |
||||
|
</Group> |
||||
|
|
||||
|
<Group title="Toggle"> |
||||
|
<Form> |
||||
|
<Toggle field="input" /> |
||||
|
</Form> |
||||
|
</Group> |
||||
|
|
||||
|
<Group title="Range"> |
||||
|
<Form> |
||||
|
<Range field="input" /> |
||||
|
</Form> |
||||
|
</Group> |
||||
|
</Column> |
||||
|
</Flex> |
||||
|
) |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
|||||
@ -0,0 +1,83 @@ |
|||||
|
import React from 'react' |
||||
|
import PropTypes from 'prop-types' |
||||
|
import { storiesOf } from '@storybook/react' |
||||
|
import { ThemeProvider, withTheme } from 'styled-components' |
||||
|
import { Box, Card, Flex } from 'rebass' |
||||
|
import { BackgroundDark, Text } from 'components/UI' |
||||
|
import { dark, light } from 'themes' |
||||
|
import { Column, Group, Element } from './helpers' |
||||
|
|
||||
|
const Swatch = ({ name, color }) => ( |
||||
|
<Element> |
||||
|
<Flex mb={2}> |
||||
|
<Card |
||||
|
bg={color} |
||||
|
width={50} |
||||
|
css={{ height: '50px' }} |
||||
|
mr={21} |
||||
|
borderRadius={8} |
||||
|
borderColor="primaryText" |
||||
|
border="solid 1px" |
||||
|
/> |
||||
|
<Box> |
||||
|
<Text fontWeight="normal">{name}</Text> |
||||
|
<Text>{color}</Text> |
||||
|
</Box> |
||||
|
</Flex> |
||||
|
</Element> |
||||
|
) |
||||
|
Swatch.propTypes = { |
||||
|
name: PropTypes.string, |
||||
|
color: PropTypes.string |
||||
|
} |
||||
|
|
||||
|
const Palette = withTheme(({ theme, ...rest }) => ( |
||||
|
<Box {...rest}> |
||||
|
{Object.keys(theme.palette).map(key => ( |
||||
|
<Swatch key={key} name={key} color={theme.palette[key]} /> |
||||
|
))} |
||||
|
</Box> |
||||
|
)) |
||||
|
|
||||
|
storiesOf('Welcome', module).addWithChapters('Color palette', { |
||||
|
subtitle: 'Colors that we use throughout the app.', |
||||
|
info: `This page shows our two primary colour palettes. These are used as "themes" that users can switch between
|
||||
|
within the app.`,
|
||||
|
chapters: [ |
||||
|
{ |
||||
|
sections: [ |
||||
|
{ |
||||
|
options: { |
||||
|
showSource: false, |
||||
|
allowSourceToggling: false, |
||||
|
showPropTables: false, |
||||
|
allowPropTablesToggling: false |
||||
|
}, |
||||
|
sectionFn: () => ( |
||||
|
<Flex> |
||||
|
<Column> |
||||
|
<Group title="Dark"> |
||||
|
<ThemeProvider theme={dark}> |
||||
|
<BackgroundDark p={3}> |
||||
|
<Palette /> |
||||
|
</BackgroundDark> |
||||
|
</ThemeProvider> |
||||
|
</Group> |
||||
|
</Column> |
||||
|
|
||||
|
<Column> |
||||
|
<Group title="Light"> |
||||
|
<ThemeProvider theme={light}> |
||||
|
<BackgroundDark p={3}> |
||||
|
<Palette /> |
||||
|
</BackgroundDark> |
||||
|
</ThemeProvider> |
||||
|
</Group> |
||||
|
</Column> |
||||
|
</Flex> |
||||
|
) |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
@ -0,0 +1,30 @@ |
|||||
|
import React from 'react' |
||||
|
import { storiesOf } from '@storybook/react' |
||||
|
import { Countdown } from 'components/UI' |
||||
|
|
||||
|
storiesOf('Components.Countdown', module).addWithChapters('Countdown', { |
||||
|
chapters: [ |
||||
|
{ |
||||
|
sections: [ |
||||
|
{ |
||||
|
title: 'Default', |
||||
|
sectionFn: () => <Countdown date={Date.now() + 5000} /> |
||||
|
}, |
||||
|
{ |
||||
|
title: 'Stop after expire', |
||||
|
sectionFn: () => <Countdown date={Date.now() + 5000} countUpAfterExpire={false} /> |
||||
|
}, |
||||
|
{ |
||||
|
title: 'Custom colors', |
||||
|
sectionFn: () => ( |
||||
|
<Countdown |
||||
|
date={Date.now() + 5000} |
||||
|
colorActive="lightningOrange" |
||||
|
colorExpired="yellow" |
||||
|
/> |
||||
|
) |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
@ -0,0 +1,20 @@ |
|||||
|
import React from 'react' |
||||
|
import PropTypes from 'prop-types' |
||||
|
import { Box } from 'rebass' |
||||
|
import { Bar, Heading } from 'components/UI' |
||||
|
|
||||
|
export const Column = props => <Box width={1 / 2} mr={5} {...props} /> |
||||
|
export const Group = ({ title, children }) => ( |
||||
|
<Box mb={4}> |
||||
|
<Heading.h3 mb={2} fontWeight="normal"> |
||||
|
{title} |
||||
|
</Heading.h3> |
||||
|
<Bar mb={3} /> |
||||
|
{children} |
||||
|
</Box> |
||||
|
) |
||||
|
Group.propTypes = { |
||||
|
title: PropTypes.string, |
||||
|
children: PropTypes.node |
||||
|
} |
||||
|
export const Element = props => <Box py={1} {...props} /> |
||||
@ -1,39 +0,0 @@ |
|||||
import React from 'react' |
|
||||
import { configure, shallow } from 'enzyme' |
|
||||
import Adapter from 'enzyme-adapter-react-16' |
|
||||
import CryptoIcon from 'components/CryptoIcon' |
|
||||
import SkinnyBitcoin from 'components/Icon/SkinnyBitcoin' |
|
||||
import Litecoin from 'components/Icon/Litecoin' |
|
||||
|
|
||||
configure({ adapter: new Adapter() }) |
|
||||
|
|
||||
const defaultProps = { |
|
||||
currency: 'bch', |
|
||||
styles: {} |
|
||||
} |
|
||||
|
|
||||
describe('component.CryptoIcon', () => { |
|
||||
describe('currency is "unknown"', () => { |
|
||||
const props = { ...defaultProps } |
|
||||
const el = shallow(<CryptoIcon {...props} />) |
|
||||
it('should show empty span', () => { |
|
||||
expect(el.html()).toEqual('<span></span>') |
|
||||
}) |
|
||||
}) |
|
||||
|
|
||||
describe('currency is "btc"', () => { |
|
||||
const props = { ...defaultProps, currency: 'btc' } |
|
||||
const el = shallow(<CryptoIcon {...props} />) |
|
||||
it('should show btc symbol', () => { |
|
||||
expect(el.find(SkinnyBitcoin)).toHaveLength(1) |
|
||||
}) |
|
||||
}) |
|
||||
|
|
||||
describe('currency is "ltc"', () => { |
|
||||
const props = { ...defaultProps, currency: 'ltc' } |
|
||||
const el = shallow(<CryptoIcon {...props} />) |
|
||||
it('should show ltc symbol', () => { |
|
||||
expect(el.find(Litecoin)).toHaveLength(1) |
|
||||
}) |
|
||||
}) |
|
||||
}) |
|
||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue