updating org tabs to use UI tabs

This commit is contained in:
Alex Windett 2017-02-22 17:31:25 +00:00 committed by Sérgio Ramos
parent c33116d745
commit 6f84069345
6 changed files with 228 additions and 51 deletions

View File

@ -1,9 +1,11 @@
import styled from 'styled-components'; import styled from 'styled-components';
import { breakpoints } from '@ui/shared/constants'; import { breakpoints, colors } from '@ui/shared/constants';
import { remcalc } from '@ui/shared/functions';
// Main Contonent Wrapper Styles // Main Contonent Wrapper Styles
export default styled.article` export default styled.article`
padding: 2rem; padding: 2rem;
border-top: ${remcalc(1)} solid ${colors.base.grey};
${breakpoints.large` ${breakpoints.large`
padding: 0; padding: 0;

View File

@ -15,6 +15,7 @@ import { colors } from '@ui/shared/constants';
const StyledDiv = styled.div` const StyledDiv = styled.div`
border-bottom: solid ${remcalc(1)} ${colors.base.grey}; border-bottom: solid ${remcalc(1)} ${colors.base.grey};
padding: ${unitcalc(4.5)} 0 ${unitcalc(4.5)} 0; padding: ${unitcalc(4.5)} 0 ${unitcalc(4.5)} 0;
margin-bottom: ${remcalc(18)};
`; `;
const BreadcrumbA = styled(NavLink)` const BreadcrumbA = styled(NavLink)`

View File

@ -8,12 +8,12 @@ import NavLink from '@ui/components/nav-link';
import { colors } from '@ui/shared/constants'; import { colors } from '@ui/shared/constants';
import PropTypes from '@root/prop-types'; import PropTypes from '@root/prop-types';
import { orgsSelector } from '@state/selectors'; import { orgsSelector } from '@state/selectors';
import Ul from '@ui/components/horizontal-list/ul';
import { remcalc } from '@ui/shared/functions'; import { remcalc } from '@ui/shared/functions';
import Tabs, { Tab } from '@ui/components/tabs';
const StyledNav = styled.div` const StyledNav = styled.div`
background-color: #f2f2f2; background-color: #f2f2f2;
border-bottom: ${remcalc(1)} solid ${colors.base.grey};
& ul { & ul {
height: ${remcalc(60)}; height: ${remcalc(60)};
@ -21,18 +21,17 @@ const StyledNav = styled.div`
} }
`; `;
// TODO: refactor colours into constants in UI
const NavigationLinkContainer = styled.div` const NavigationLinkContainer = styled.div`
position: relative; position: relative;
padding: ${remcalc(11)} ${remcalc(12)} ${remcalc(12)}; color: ${colors.base.grey};
color: ${colors.base.secondaryDark};
border: ${remcalc(1)} solid ${colors.base.grey};
height: ${remcalc(24)}; height: ${remcalc(24)};
background-color: #f2f2f2; padding: ${remcalc(14)};
border: ${remcalc(1)} solid ${colors.base.grey};
border-bottom-width: 0;
&.active { &.active {
background-color: ${colors.base.background}; background-color: ${colors.base.background};
border-bottom: solid ${remcalc(1)} ${colors.base.grey};
} }
`; `;
@ -47,31 +46,16 @@ const OrgAvatar = styled(Avatar)`
const OrgName = styled.span` const OrgName = styled.span`
margin-left: ${remcalc(12)}; margin-left: ${remcalc(12)};
margin-top: ${remcalc(3)}; margin-top: ${remcalc(3)};
color: ${colors.base.text}
`; `;
const NavLi = styled.li` const NavLi = styled(NavLink)`
display: inline-block; display: inline-block;
padding-top: ${remcalc(12)}; text-decoration: none;
padding-left: ${remcalc(3)};
& a {
text-decoration: none;
}
`; `;
const Shadow = styled.div` const StyledTabs = styled(Tabs)`
z-index: 1; padding-top: ${remcalc(12)}
position: absolute;
height: ${remcalc(5)};
width: 100%;
left: 0;
bottom: 0;
background-image:
linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.06));
`;
const StyledUL = styled(Ul)`
padding: 0;
`; `;
const OrgNavigation = ({ const OrgNavigation = ({
@ -83,37 +67,37 @@ const OrgNavigation = ({
image image
}) => { }) => {
const to = `/${id}`; const to = `/${id}`;
const content = () => (
<NavLi activeClassName='active' to={to}>{({
isActive
}) =>
<NavigationLinkContainer className={isActive ? 'active' : ''}>
<OrgImage>
<OrgAvatar
height={remcalc(26)}
name={name}
src={image}
width={remcalc(26)}
/>
</OrgImage>
<OrgName>
{name}
</OrgName>
</NavigationLinkContainer>
}</NavLi>
);
return ( return (
<NavLi key={to}> <Tab title={content()} key={to} />
<NavLink activeClassName='active' to={to}>{({
isActive
}) =>
<NavigationLinkContainer className={isActive ? 'active' : ''}>
{ !isActive && <Shadow />}
<OrgImage>
<OrgAvatar
height={remcalc(26)}
name={name}
src={image}
width={remcalc(26)}
/>
</OrgImage>
<OrgName>
{name}
</OrgName>
</NavigationLinkContainer>
}</NavLink>
</NavLi>
); );
}); });
return ( return (
<StyledNav> <StyledNav>
<Container> <Container>
<StyledUL> <StyledTabs name='organisation-navigation-group'>
{navLinks} {navLinks}
</StyledUL> </StyledTabs>
</Container> </Container>
</StyledNav> </StyledNav>
); );

View File

@ -0,0 +1,56 @@
import styled from 'styled-components';
import { rndId } from '../../shared/functions';
import { Baseline } from '../../shared/composers';
import React from 'react';
import Tab from './tab';
const StyledTabs = styled.div`
font-size: 0;
&::after {
clear: both;
content: "";
display: table;
}
`;
const Tabs = ({
className,
children, // array of <Tab>
id = rndId(),
name = '',
style
}) => {
const _children = React.Children.map(children, (child, i) => {
return React.cloneElement(child, {
defaultChecked: i === 0,
name
});
});
return (
<StyledTabs
className={className}
id={id}
role='tablist'
style={style}
>
{_children}
</StyledTabs>
);
};
Tabs.propTypes = {
children: React.PropTypes.node,
className: React.PropTypes.string,
id: React.PropTypes.string,
name: React.PropTypes.string.isRequired,
style: React.PropTypes.object
};
export default Baseline(
Tabs
);
export {
Tab
};

View File

@ -0,0 +1,16 @@
import { storiesOf } from '@kadira/storybook';
import React from 'react';
import Tabs from './';
import Tab from './tab';
storiesOf('Tabs', module)
.add('Default', () => (
<Tabs name='my-tab-group'>
<Tab title='Your Dashboard'>
<h1>Containers</h1>
</Tab>
<Tab title='YLD'>
<h1>User</h1>
</Tab>
</Tabs>
));

View File

@ -0,0 +1,118 @@
import styled from 'styled-components';
import { Baseline } from '../../../shared/composers';
import { boxes, colors } from '../../../shared/constants';
import { remcalc, rndId } from '../../../shared/functions';
import React from 'react';
const classNames = {
label: rndId(),
panel: rndId()
};
const StyledTab = styled.div`
display: inline;
`;
const StyledRadio = styled.input`
clip: rect(0 0 0 0);
height: ${remcalc(1)};
opacity: 0;
width: ${remcalc(1)};
&:checked {
& + .${classNames.label} {
border-bottom-width: 0;
box-shadow: none;
}
& ~ .${classNames.panel} {
display: inline;
}
}
`;
const StyledLabel = styled.label`
background: transparent;
display: inline-block;
font-size: ${remcalc(20)};
margin: 0 0.5rem 0 0;
vertical-align: bottom;
box-shadow: inset ${remcalc(2)} -6px 10px 0px rgba(0,0,0,0.06);
`;
const StyledPanel = styled.div`
display: inline-block;
height: 0;
overflow: hidden;
position: relative;
width: 0;
`;
const StyledContent = styled.div`
background: ${colors.inactive.default};
border: ${boxes.border.unchecked};
box-sizing: border-box;
box-shadow: 0 ${remcalc(-1)} ${remcalc(26)} 0 rgba(0, 0, 0, 0.2);
display: block;
float: left;
font-size: ${remcalc(16)};
margin-top: ${remcalc(-9)};
padding: ${remcalc(20)} ${remcalc(25)};
width: 100%;
`;
const Tab = ({
className,
children,
checked,
defaultChecked = false,
disabled = false,
id,
name,
title = '',
style
}) => {
const tabId = rndId();
return (
<StyledTab className={className}>
<StyledRadio
checked={checked}
defaultChecked={defaultChecked}
disabled={disabled}
id={tabId}
name={name}
type='radio'
/>
<StyledLabel
className={classNames.label}
htmlFor={tabId}
>
{title}
</StyledLabel>
{children ? (
<StyledPanel className={classNames.panel}>
<StyledContent>
{children}
</StyledContent>
</StyledPanel>
) : null}
</StyledTab>
);
};
Tab.propTypes = {
checked: React.PropTypes.bool,
children: React.PropTypes.node,
className: React.PropTypes.string,
defaultChecked: React.PropTypes.bool,
disabled: React.PropTypes.bool,
id: React.PropTypes.string,
name: React.PropTypes.string,
style: React.PropTypes.object,
title: React.PropTypes.string
};
export default Baseline(
Tab
);