mirror of
https://github.com/yldio/copilot.git
synced 2024-11-13 06:40:06 +02:00
updating org tabs to use UI tabs
This commit is contained in:
parent
c33116d745
commit
6f84069345
@ -1,9 +1,11 @@
|
||||
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
|
||||
export default styled.article`
|
||||
padding: 2rem;
|
||||
border-top: ${remcalc(1)} solid ${colors.base.grey};
|
||||
|
||||
${breakpoints.large`
|
||||
padding: 0;
|
||||
|
@ -15,6 +15,7 @@ import { colors } from '@ui/shared/constants';
|
||||
const StyledDiv = styled.div`
|
||||
border-bottom: solid ${remcalc(1)} ${colors.base.grey};
|
||||
padding: ${unitcalc(4.5)} 0 ${unitcalc(4.5)} 0;
|
||||
margin-bottom: ${remcalc(18)};
|
||||
`;
|
||||
|
||||
const BreadcrumbA = styled(NavLink)`
|
||||
|
@ -8,12 +8,12 @@ import NavLink from '@ui/components/nav-link';
|
||||
import { colors } from '@ui/shared/constants';
|
||||
import PropTypes from '@root/prop-types';
|
||||
import { orgsSelector } from '@state/selectors';
|
||||
import Ul from '@ui/components/horizontal-list/ul';
|
||||
import { remcalc } from '@ui/shared/functions';
|
||||
import Tabs, { Tab } from '@ui/components/tabs';
|
||||
|
||||
|
||||
const StyledNav = styled.div`
|
||||
background-color: #f2f2f2;
|
||||
border-bottom: ${remcalc(1)} solid ${colors.base.grey};
|
||||
|
||||
& ul {
|
||||
height: ${remcalc(60)};
|
||||
@ -21,18 +21,17 @@ const StyledNav = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
// TODO: refactor colours into constants in UI
|
||||
const NavigationLinkContainer = styled.div`
|
||||
position: relative;
|
||||
padding: ${remcalc(11)} ${remcalc(12)} ${remcalc(12)};
|
||||
color: ${colors.base.secondaryDark};
|
||||
border: ${remcalc(1)} solid ${colors.base.grey};
|
||||
color: ${colors.base.grey};
|
||||
height: ${remcalc(24)};
|
||||
background-color: #f2f2f2;
|
||||
padding: ${remcalc(14)};
|
||||
|
||||
border: ${remcalc(1)} solid ${colors.base.grey};
|
||||
border-bottom-width: 0;
|
||||
|
||||
&.active {
|
||||
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`
|
||||
margin-left: ${remcalc(12)};
|
||||
margin-top: ${remcalc(3)};
|
||||
color: ${colors.base.text}
|
||||
`;
|
||||
|
||||
const NavLi = styled.li`
|
||||
const NavLi = styled(NavLink)`
|
||||
display: inline-block;
|
||||
padding-top: ${remcalc(12)};
|
||||
padding-left: ${remcalc(3)};
|
||||
|
||||
& a {
|
||||
text-decoration: none;
|
||||
}
|
||||
text-decoration: none;
|
||||
`;
|
||||
|
||||
const Shadow = styled.div`
|
||||
z-index: 1;
|
||||
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 StyledTabs = styled(Tabs)`
|
||||
padding-top: ${remcalc(12)}
|
||||
`;
|
||||
|
||||
const OrgNavigation = ({
|
||||
@ -83,37 +67,37 @@ const OrgNavigation = ({
|
||||
image
|
||||
}) => {
|
||||
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 (
|
||||
<NavLi 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>
|
||||
<Tab title={content()} key={to} />
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<StyledNav>
|
||||
<Container>
|
||||
<StyledUL>
|
||||
<StyledTabs name='organisation-navigation-group'>
|
||||
{navLinks}
|
||||
</StyledUL>
|
||||
</StyledTabs>
|
||||
</Container>
|
||||
</StyledNav>
|
||||
);
|
||||
|
56
ui/src/components/tabs/index.js
Normal file
56
ui/src/components/tabs/index.js
Normal 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
|
||||
};
|
16
ui/src/components/tabs/story.js
Normal file
16
ui/src/components/tabs/story.js
Normal 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>
|
||||
));
|
118
ui/src/components/tabs/tab/index.js
Normal file
118
ui/src/components/tabs/tab/index.js
Normal 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
|
||||
);
|
Loading…
Reference in New Issue
Block a user