-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(tabs): added tabs component with with accessibility attributes
- Loading branch information
Teemu Taskula
committed
Oct 4, 2017
1 parent
49a98a6
commit a53df2c
Showing
3 changed files
with
124 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,122 @@ | ||
import React, { Component } from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import styled from 'styled-components'; | ||
import withRipple from './withRipple'; | ||
import colorGetter from './colorGetter'; | ||
import { sizes } from './media'; | ||
|
||
const TabContent = styled.div` | ||
flex: 1; | ||
width: 100%; | ||
`; | ||
|
||
const TabPanel = ({ children }) => ( | ||
<TabContent role='tabpanel' tabindex='0'>{children}</TabContent> | ||
); | ||
|
||
TabPanel.propTypes = { | ||
children: PropTypes.any.isRequired, | ||
}; | ||
|
||
class Tabs extends Component { | ||
static Panel = TabPanel; | ||
|
||
static propTypes = { | ||
children: PropTypes.any.isRequired, | ||
tabBreak: PropTypes.string, | ||
}; | ||
|
||
static defaultProps = { | ||
tabBreak: `${sizes.tablet}px`, | ||
}; | ||
|
||
state = { | ||
selectedTab: 0, | ||
}; | ||
|
||
selectTab = (tabIndex) => { | ||
this.setState({ selectedTab: tabIndex }); | ||
}; | ||
|
||
render() { | ||
const { children, tabBreak } = this.props; | ||
const { selectedTab } = this.state; | ||
|
||
return ( | ||
<TabsWrapper> | ||
<TabList breakPoint={tabBreak} role='tablist'> | ||
{React.Children.map(children, ({ props: { label } }, index) => | ||
<TabButton | ||
role='tab' | ||
selected={selectedTab === index} | ||
aria-selected={selectedTab === index ? 'true' : 'false'} | ||
onClick={() => this.selectTab(index)} | ||
> | ||
{label} | ||
</TabButton> | ||
)} | ||
</TabList> | ||
|
||
<Content> | ||
{React.Children.map(children, (comp, index) => | ||
selectedTab === index ? comp : undefined | ||
)} | ||
</Content> | ||
</TabsWrapper> | ||
); | ||
} | ||
} | ||
|
||
const TabsWrapper = styled.div` | ||
flex: 1; | ||
display: flex; | ||
flex-direction: column; | ||
`; | ||
|
||
const TabButton = withRipple(styled.button` | ||
flex: 1; | ||
height: 50px; | ||
padding: 0px 24px; | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
font-size: 16px; | ||
cursor: default; | ||
background: transparent; | ||
outline: none; | ||
transition: border-color 0.2s ease-in; | ||
border: none; | ||
border-bottom: 4px solid ${props => props.selected | ||
? colorGetter(props, 'primaryColorDark') | ||
: '#fff' | ||
}; | ||
&:hover, &:focus, &:active { | ||
border-bottom: 4px solid ${props => props.selected | ||
? colorGetter(props, 'primaryColorDark') | ||
: colorGetter(props, 'greyLighter') | ||
}; | ||
} | ||
`); | ||
|
||
const TabList = styled.div` | ||
display: flex; | ||
flex-direction: row; | ||
width: 100%; | ||
@media (max-width: ${props => props.breakPoint}) { | ||
flex-direction: column; | ||
& > div, | ||
& > div > button { | ||
width: 100%; | ||
} | ||
} | ||
`; | ||
|
||
const Content = styled.div` | ||
flex: 1; | ||
width: 100%; | ||
padding-top: 16px; | ||
`; | ||
|
||
export default Tabs; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters