mpana/copilot
1
0
Fork 0
mirror of https://github.com/yldio/copilot.git synced 2024-12-01 07:30:07 +02:00
Code Issues Releases Wiki Activity

feat(joyent-cp-frontend): integrate toolkit's SectionList

Browse Source
This commit is contained in:
Sérgio Ramos 2017-06-07 00:24:38 +01:00 committed by Judit Greskovits
parent 1fcd1b9eed
commit 8530b24691
3 changed files with 22 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/cp-frontend/src/components/layout/container.js
View File

@ -1,10 +1,3 @@
import { Grid } from 'react-styled-flexboxgrid'; import { Grid } from 'react-styled-flexboxgrid';
import { breakpoints } from 'joyent-ui-toolkit';
export default Grid.extend` export default Grid;
padding: 2rem;
${breakpoints.large`
padding: 0;
`}
`;

1
packages/cp-frontend/src/components/navigation/breadcrumb.js
View File

@ -19,6 +19,7 @@ const BreadcrumbLink = styled(Link)`
const BreadcrumbContainer = styled.div` const BreadcrumbContainer = styled.div`
border-bottom: solid ${remcalc(1)} ${props => props.theme.grey}; border-bottom: solid ${remcalc(1)} ${props => props.theme.grey};
margin-bottom: ${remcalc(19)};
`; `;
const getBreadcrumbItems = (...links) => const getBreadcrumbItems = (...links) =>

54
packages/cp-frontend/src/components/navigation/menu.js
View File

@ -2,45 +2,31 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { NavLink } from 'react-router-dom'; import forceArray from 'force-array';
import remcalc from 'remcalc';
import { breakpoints, Ul, Li } from 'joyent-ui-toolkit';
import { LayoutContainer } from '@components/layout'; import { LayoutContainer } from '@components/layout';
const StyledHorizontalList = Ul.extend` import {
padding: 0; SectionList,
`; SectionListItem,
SectionListNavLink
} from 'joyent-ui-toolkit';
const StyledHorizontalListItem = Li.extend` const getMenuItems = (...links) =>
${breakpoints.smallOnly` forceArray(links).map(({ pathname, name }) =>
display: block; <SectionListItem>
`} <SectionListNavLink activeClassName="active" to={pathname}>
{name}
& + li { </SectionListNavLink>
margin-left: ${remcalc(21)}; </SectionListItem>
}
`;
const Menu = ({ links }) => {
const navLinks = links.map(link => {
return (
<StyledHorizontalListItem key={link.name}>
<NavLink activeClassName="active" to={link.pathname}>
{link.name}
</NavLink>
</StyledHorizontalListItem>
);
});
return (
<LayoutContainer>
<StyledHorizontalList>
{navLinks}
</StyledHorizontalList>
</LayoutContainer>
); );
};
const Menu = ({ links = [] }) =>
<LayoutContainer>
<SectionList>
{getMenuItems(...links)}
</SectionList>
</LayoutContainer>;
Menu.propTypes = { Menu.propTypes = {
links: PropTypes.arrayOf( links: PropTypes.arrayOf(