chore(merge): merge development

packages/blockchain-info-components/src/Badges/__snapshots__/Badge.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Badge component applestore renders correctly 1`] = `
 <a
-  class="sc-htpNat iPnMvj"
+  class="sc-htpNat mBQkt"
   color="blue600"
   href="https://itunes.apple.com/us/app/blockchain-bitcoin-wallet/id493253309"
   target="_blank"
@@ -20,7 +20,7 @@ exports[`Badge component applestore renders correctly 1`] = `
 
 exports[`Badge component googleplay renders correctly 1`] = `
 <a
-  class="sc-htpNat iPnMvj"
+  class="sc-htpNat mBQkt"
   color="blue600"
   href="https://play.google.com/store/apps/details?id=piuk.blockchain.android"
   target="_blank"

packages/blockchain-info-components/src/Buttons/Button.js

@@ -2,19 +2,18 @@ import React from 'react'
 import { darken } from 'polished'
 import styled from 'styled-components'
 
-const BaseButton = styled.button.attrs(props => ({
+const BaseButton = styled.button.attrs((props) => ({
   type: props.type ? props.type : 'button'
 }))`
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  width: ${props =>
-    props.fullwidth ? '100%' : props.width ? props.width : 'auto'};
-  min-width: ${props => (props.width ? props.width : '140px')};
-  height: ${props => (props.jumbo ? '56px' : props.height)};
-  padding: ${props => (props.padding ? props.padding : '10px 15px')};
-  margin: ${props => props.margin};
+  width: ${(props) => (props.fullwidth ? '100%' : props.width ? props.width : 'auto')};
+  min-width: ${(props) => (props.width ? props.width : '140px')};
+  height: ${(props) => (props.jumbo ? '56px' : props.height)};
+  padding: ${(props) => (props.padding ? props.padding : '10px 15px')};
+  margin: ${(props) => props.margin};
   box-sizing: border-box;
   user-select: none;
   text-align: center;
@@ -24,30 +23,30 @@ const BaseButton = styled.button.attrs(props => ({
   transition: all 0.2s ease-in-out;
   white-space: nowrap;
   line-height: 1;
-  text-transform: ${props =>
+  text-transform: ${(props) =>
     props.uppercase ? 'uppercase' : props.capitalize ? 'capitalize' : 'none'};
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  font-size: ${props => (props.jumbo ? '16px' : props.size)};
-  font-weight: ${props => (props.jumbo ? '600' : '600')};
-  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
-  opacity: ${props => (props.disabled ? 0.5 : 1)};
-  color: ${props => props.theme[props.color]};
-  background-color: ${props =>
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-size: ${(props) => (props.jumbo ? '16px' : props.size)};
+  font-weight: ${(props) => (props.jumbo ? '600' : '600')};
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${(props) => (props.disabled ? 0.5 : 1)};
+  color: ${(props) => props.theme[props.color]};
+  background-color: ${(props) =>
     props.backgroundColor ? props.theme[props.backgroundColor] : 'transparent'};
-  border-radius: ${props => (props.rounded ? '20px' : '8px')};
+  border-radius: ${(props) => (props.rounded ? '20px' : '8px')};
   border-style: solid;
-  border-width: ${props => (props.rounded ? '2px' : '1px')};
-  border-color: ${props => props.theme[props.borderColor]};
+  border-width: ${(props) => (props.rounded ? '2px' : '1px')};
+  border-color: ${(props) => props.theme[props.borderColor]};
 
   &:hover {
-    border-color: ${props =>
+    border-color: ${(props) =>
       props.disabled
         ? 'none'
         : props.hoverBorderColor
         ? props.theme[props.hoverBorderColor]
         : darken(0.1, props.theme[props.borderColor])};
-    background-color: ${props =>
+    background-color: ${(props) =>
       props.disabled
         ? 'none'
         : props.backgroundColor
@@ -64,143 +63,140 @@ const selectColor = (nature, small) => {
   switch (nature) {
     case 'dark':
       return {
-        color: 'white',
         backgroundColor: 'grey800',
-        borderColor: 'grey800'
+        borderColor: 'grey800',
+        color: 'white'
       }
     case 'dark-grey':
       return {
-        color: 'white',
         backgroundColor: 'grey800',
-        borderColor: 'grey800'
+        borderColor: 'grey800',
+        color: 'white'
       }
     case 'empty':
       return {
-        color: small ? 'blue600' : 'grey800',
         backgroundColor: 'white',
         borderColor: 'grey000',
+        color: small ? 'blue600' : 'grey800',
         hoverBorderColor: 'white'
       }
 
     case 'empty-blue': {
       return {
-        color: 'blue600',
         backgroundColor: 'white',
         borderColor: 'grey100',
+        color: 'blue600',
         hoverBorderColor: 'blue600'
       }
     }
 
     case 'empty-secondary':
       return {
-        color: 'blue600',
         backgroundColor: 'white',
-        borderColor: 'blue600'
+        borderColor: 'blue600',
+        color: 'blue600'
       }
 
     case 'gray':
       return {
-        color: 'white',
         backgroundColor: 'grey500',
-        borderColor: 'grey500'
+        borderColor: 'grey500',
+        color: 'white'
       }
     case 'light':
       return {
-        color: 'blue600',
         backgroundColor: 'white',
-        borderColor: 'grey000'
+        borderColor: 'grey000',
+        color: 'blue600'
       }
     case 'light-red':
       return {
-        color: 'red400',
         backgroundColor: 'white',
-        borderColor: 'grey000'
+        borderColor: 'grey000',
+        color: 'red400'
       }
     case 'exchangeTurquoise':
       return {
-        color: 'exchangeNight',
         backgroundColor: 'exchangeTurquoise',
-        borderColor: 'exchangeTurquoise'
+        borderColor: 'exchangeTurquoise',
+        color: 'exchangeNight'
       }
     case 'primary':
       return {
-        color: 'white',
         backgroundColor: 'blue600',
-        borderColor: 'blue600'
+        borderColor: 'blue600',
+        color: 'white'
       }
     case 'purple':
       return {
-        color: 'white',
         backgroundColor: 'purple',
-        borderColor: 'purple'
+        borderColor: 'purple',
+        color: 'white'
       }
     case 'secondary':
       return {
-        color: 'white',
         backgroundColor: 'blue900',
-        borderColor: 'blue900'
+        borderColor: 'blue900',
+        color: 'white'
       }
     case 'received':
       return {
-        color: 'white',
         backgroundColor: 'received',
-        borderColor: 'received'
+        borderColor: 'received',
+        color: 'white'
       }
     case 'sent':
-      return { color: 'white', backgroundColor: 'sent', borderColor: 'sent' }
+      return { backgroundColor: 'sent', borderColor: 'sent', color: 'white' }
     case 'success':
       return {
-        color: 'white',
         backgroundColor: 'success',
-        borderColor: 'success'
+        borderColor: 'success',
+        color: 'white'
       }
     case 'transferred':
       return {
-        color: 'white',
         backgroundColor: 'transferred',
-        borderColor: 'transferred'
+        borderColor: 'transferred',
+        color: 'white'
       }
     case 'warning':
-      return { color: 'white', backgroundColor: 'error', borderColor: 'error' }
+      return { backgroundColor: 'error', borderColor: 'error', color: 'white' }
     case 'white-transparent':
       return {
-        color: 'white',
-        borderColor: 'white'
+        borderColor: 'white',
+        color: 'white'
       }
     case 'white-blue':
       return {
-        color: 'blue600',
         backgroundColor: 'white',
-        borderColor: 'white'
+        borderColor: 'white',
+        color: 'blue600'
       }
     case 'green':
       return {
-        color: 'white',
         backgroundColor: 'green600',
-        borderColor: 'green600'
+        borderColor: 'green600',
+        color: 'white'
       }
     case 'grey800':
       return {
-        color: 'white',
         backgroundColor: 'grey800',
-        borderColor: 'grey800'
+        borderColor: 'grey800',
+        color: 'white'
       }
     default:
       return {
-        color: 'grey800',
         backgroundColor: 'grey000',
         borderColor: 'grey200',
+        color: 'grey800',
         hoverBorderColor: 'white'
       }
   }
 }
 
-const Button = props => {
+const Button = (props) => {
   const { children, disabled, nature, small, ...rest } = props
-  const { backgroundColor, borderColor, color, hoverBorderColor } = selectColor(
-    nature,
-    small
-  )
+  const { backgroundColor, borderColor, color, hoverBorderColor } = selectColor(nature, small)
 
   return (
     <BaseButton
@@ -217,16 +213,16 @@ const Button = props => {
 }
 
 Button.defaultProps = {
-  nature: 'empty',
-  fullwidth: false,
+  bold: false,
+  capitalize: false,
   disabled: false,
-  small: false,
+  fullwidth: false,
+  height: '40px',
+  nature: 'empty',
   rounded: false,
-  bold: false,
   size: '14px',
-  uppercase: false,
-  capitalize: false,
-  height: '40px'
+  small: false,
+  uppercase: false
 }
 
 export default Button

packages/blockchain-info-components/src/Buttons/ButtonGroup.js

@@ -27,7 +27,7 @@ const BaseButtonGroup = styled.div`
     border-right: none;
   }
 `
-const ButtonGroup = props => {
+const ButtonGroup = (props) => {
   const { children, ...rest } = props
 
   return <BaseButtonGroup {...rest}>{children}</BaseButtonGroup>

packages/blockchain-info-components/src/Buttons/IconButton.js

@@ -37,7 +37,7 @@ const selectColor = (nature, disabled) => {
   }
 }
 
-const IconButton = props => {
+const IconButton = (props) => {
   const { children, name, nature, ...rest } = props
   const color = selectColor(nature)
 

packages/blockchain-info-components/src/Carousels/Carousel/Carousel.spec.js

@@ -7,14 +7,7 @@ import Carousel from './template'
 describe('Carousel component', () => {
   it('default renders correctly', () => {
     const component = shallow(
-      <Carousel
-        height={12}
-        chips={false}
-        total={12}
-        index={4}
-        arrows
-        handleClick={() => {}}
-      />
+      <Carousel height={12} chips={false} total={12} index={4} arrows handleClick={() => {}} />
     )
     const tree = toJson(component)
     expect(tree).toMatchSnapshot()

packages/blockchain-info-components/src/Carousels/Carousel/index.js

@@ -16,10 +16,7 @@ class Carousel extends React.PureComponent {
   componentDidMount() {
     const { auto, delay } = this.props
     if (auto) {
-      this.interval = setInterval(
-        () => this.setState({ index: this.getNextIndex() }),
-        delay
-      )
+      this.interval = setInterval(() => this.setState({ index: this.getNextIndex() }), delay)
     }
   }
 
@@ -70,20 +67,20 @@ class Carousel extends React.PureComponent {
 }
 
 Carousel.propTypes = {
+  arrows: PropTypes.bool,
   auto: PropTypes.bool,
+  chips: PropTypes.bool,
   delay: PropTypes.number,
   height: PropTypes.number,
-  arrows: PropTypes.bool,
-  chips: PropTypes.bool,
   nextButton: PropTypes.bool
 }
 
 Carousel.defaultProps = {
+  arrows: true,
   auto: false,
+  chips: true,
   delay: 3000,
   height: 150,
-  arrows: true,
-  chips: true,
   nextButton: true
 }