Skip to content

Commit

Permalink
feat(tabs): added tabs component with with accessibility attributes
Browse files Browse the repository at this point in the history
  • Loading branch information
Teemu Taskula committed Oct 4, 2017
1 parent 49a98a6 commit a53df2c
Show file tree
Hide file tree
Showing 3 changed files with 124 additions and 1 deletion.
122 changes: 122 additions & 0 deletions src/Tabs.js
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;
1 change: 1 addition & 0 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,3 +31,4 @@ export { default as OutsideReactor } from './OutsideReactor';
export { default as Drawer } from './Drawer';
export { default as Dropmenu } from './Dropmenu';
export { default as Modal } from './Modal';
export { default as Tabs } from './Tabs';
2 changes: 1 addition & 1 deletion src/media.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* eslint-disable no-param-reassign */
import { css } from 'styled-components';

const sizes = {
export const sizes = {
giant: 1170,
desktop: 992,
tablet: 768,
Expand Down

0 comments on commit a53df2c

Please sign in to comment.