All files / Atoms/Tabs TabMenuItem.js

100% Statements 8/8
100% Branches 2/2
100% Functions 3/3
100% Lines 8/8

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51        1x                                 1x               4x 4x     1x 4x           1x         1x          
import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
 
const Wrapper = styled.div`
  position: relative;
  flex: 1 auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 15px;
  box-sizing: border-box;
  cursor: pointer;
 
  &:hover {
    & :last-child {
      opacity: 1 !important;
    }
  }
`
const Bar = styled.div`
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 5px;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
  background-color: ${(props) => props.theme['tabMenuBarColor']};
  opacity: ${(props) => (props.visible ? '1' : '0')};
`
 
const TabMenuItem = ({ children, selected, ...rest }) => (
  <Wrapper {...rest}>
    {children}
    <Bar visible={selected} />
  </Wrapper>
)
 
TabMenuItem.propTypes = {
  children: PropTypes.node,
  selected: PropTypes.bool,
}
 
TabMenuItem.defaultProps = {
  selected: false,
}
 
export default TabMenuItem