feat(joyent-ui-toolkit): implement SectionList
This commit is contained in:
Sérgio Ramos
Judit Greskovits
parent
aa8d9f7a25
commit
1fcd1b9eed
|
|
@ -5,7 +5,6 @@ export { default as Button } from './button';
|
|||
export { default as Breadcrumb, Item as BreadcrumbItem } from './breadcrumb';
|
||||
export { default as calc } from './calc';
|
||||
export { default as Label } from './label';
|
||||
export { Ul, Li } from './list';
|
||||
export { default as paperEffect } from './paper-effect';
|
||||
export { H1, H2, H3 } from './text/headings';
|
||||
export { default as P } from './text/p';
|
||||
|
|
@ -78,3 +77,11 @@ export {
|
|||
Brand as HeaderBrand,
|
||||
Item as HeaderItem
|
||||
} from './header';
|
||||
|
||||
export {
|
||||
default as SectionList,
|
||||
Item as SectionListItem,
|
||||
Anchor as SectionListAnchor,
|
||||
Link as SectionListLink,
|
||||
NavLink as SectionListNavLink
|
||||
} from './section-list';
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
export { default as Ul } from './ul';
|
||||
export { default as Li } from './li';
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
import Baseline from '../baseline';
|
||||
|
||||
const StyledLi = styled.li`
|
||||
display: inline-block;
|
||||
|
||||
& + & {
|
||||
margin-left: ${remcalc(24)};
|
||||
}
|
||||
|
||||
& a {
|
||||
color: ${props => props.theme.text};
|
||||
text-decoration: none;
|
||||
padding-bottom: ${remcalc(6)};
|
||||
|
||||
&.active {
|
||||
cursor: default;
|
||||
color: ${props => props.theme.primary};
|
||||
border-bottom: ${remcalc(2)} solid ${props => props.theme.primary};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
/**
|
||||
* @example ./usage.md
|
||||
*/
|
||||
const Li = ({ children, ...rest }) =>
|
||||
<StyledLi {...rest}>
|
||||
{children}
|
||||
</StyledLi>;
|
||||
|
||||
export default Baseline(Li);
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
import Baseline from '../baseline';
|
||||
import typography from '../typography';
|
||||
|
||||
const StyledUl = styled.ul`
|
||||
${typography.fontFamily};
|
||||
${typography.semibold};
|
||||
|
||||
list-style-type: none;
|
||||
margin-bottom: ${remcalc(33)};
|
||||
`;
|
||||
|
||||
/**
|
||||
* @example ./usage.md
|
||||
*/
|
||||
const Ul = ({ children, ...rest }) =>
|
||||
<StyledUl {...rest}>
|
||||
{children}
|
||||
</StyledUl>;
|
||||
|
||||
export default Baseline(Ul);
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
```
|
||||
const Ul = require('./ul').default;
|
||||
const Li = require('./li').default;
|
||||
|
||||
<Ul>
|
||||
<Li>
|
||||
<a className='active' href='#ul'>
|
||||
<span>
|
||||
Ul
|
||||
</span>
|
||||
</a>
|
||||
</Li>
|
||||
<Li>
|
||||
<a href='#ul'>
|
||||
<span>
|
||||
Ul
|
||||
</span>
|
||||
</a>
|
||||
</Li>
|
||||
<Li>
|
||||
<a href='#li'>
|
||||
<span>
|
||||
Li
|
||||
</span>
|
||||
</a>
|
||||
</Li>
|
||||
</Ul>
|
||||
```
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import Baseline from '../baseline';
|
||||
|
||||
const UnorderedList = styled.ul`
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
`;
|
||||
|
||||
/**
|
||||
* @example ./usage.md
|
||||
*/
|
||||
const SectionList = ({ children, ...rest }) =>
|
||||
<UnorderedList {...rest}>
|
||||
{children}
|
||||
</UnorderedList>;
|
||||
|
||||
export default Baseline(SectionList);
|
||||
|
||||
export { default as Item, Anchor, Link, NavLink } from './item';
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import React from 'react';
|
||||
import styled, { css } from 'styled-components';
|
||||
import { A } from 'normalized-styled-components';
|
||||
import { NavLink as RRNavLink, Link as RRLink } from 'react-router-dom';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import Baseline from '../baseline';
|
||||
import typography from '../typography';
|
||||
|
||||
const Li = styled.li`
|
||||
${typography.fontFamily};
|
||||
${typography.normal};
|
||||
|
||||
display: inline-block;
|
||||
font-size: ${remcalc(15)};
|
||||
line-height: 1.6;
|
||||
margin-right: ${remcalc(23)};
|
||||
`;
|
||||
|
||||
const Item = ({ children, ...rest }) =>
|
||||
<Li {...rest}>
|
||||
{children}
|
||||
</Li>;
|
||||
|
||||
export default Baseline(Item);
|
||||
|
||||
const style = css`
|
||||
${typography.fontFamily};
|
||||
${typography.normal};
|
||||
|
||||
color: ${props => props.theme.secondary};
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
color: ${props => props.theme.primary};
|
||||
cursor: default;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Anchor = Baseline(A.extend`
|
||||
${style};
|
||||
`);
|
||||
|
||||
export const NavLink = Baseline(styled(RRNavLink)`
|
||||
${style};
|
||||
`);
|
||||
|
||||
export const Link = Baseline(styled(RRLink)`
|
||||
${style};
|
||||
`);
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
```
|
||||
const Item = require('./item').default;
|
||||
const Link = require('./link').default;
|
||||
|
||||
<SectionList>
|
||||
<Item>
|
||||
<Link className='active'>
|
||||
Overview
|
||||
</Link>
|
||||
</Item>
|
||||
<Item>
|
||||
<Link>
|
||||
Services
|
||||
</Link>
|
||||
</Item>
|
||||
<Item>
|
||||
<Link>
|
||||
Instances
|
||||
</Link>
|
||||
</Item>
|
||||
<Item>
|
||||
<Link>
|
||||
Versions
|
||||
</Link>
|
||||
</Item>
|
||||
<Item>
|
||||
<Link>
|
||||
Manifest
|
||||
</Link>
|
||||
</Item>
|
||||
<Item>
|
||||
<Link>
|
||||
Settings
|
||||
</Link>
|
||||
</Item>
|
||||
</SectionList>
|
||||
```
|
||||
|
|
@ -64,8 +64,7 @@ module.exports = {
|
|||
'src/form/select.js',
|
||||
'src/form/toggle.js',
|
||||
'src/header/index.js',
|
||||
'src/list/ul.js',
|
||||
'src/list/li.js',
|
||||
'src/section-list/index.js',
|
||||
'src/topology/index.js',
|
||||
'src/tooltip/tooltip.js',
|
||||
'src/close-button/index.js',
|
||||
|
|
|
|||
Loading…
Reference in New Issue