1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-14 23:30:05 +02:00

feat(joyent-ui-toolkit): implement Breadcrumb

This commit is contained in:
Sérgio Ramos 2017-06-06 22:22:10 +01:00 committed by Judit Greskovits
parent b8dfb73959
commit e6b6f6a761
5 changed files with 57 additions and 0 deletions

View File

@ -0,0 +1,13 @@
import React from 'react';
import { Row } from 'react-styled-flexboxgrid';
/**
* @example ./usage.md
*/
export default ({ children, ...rest }) => (
<Row name="breadcrum" {...rest}>
{children}
</Row>
);
export { default as Item } from './item';

View File

@ -0,0 +1,31 @@
import React from 'react';
import styled from 'styled-components';
import remcalc from 'remcalc';
import typography from '../typography';
import { H2 } from '../text/headings';
const Name = H2.extend`
${typography.normal};
color: ${props => props.theme.primary};
margin: ${remcalc(20)} 0 ${remcalc(18)} 0;
display: inline-block;
`;
const Arrow = styled.div`
border: solid ${props => props.theme.text};
border-width: 0 ${remcalc(2)} ${remcalc(2)} 0;
display: inline-block;
padding: ${remcalc(2)};
transform: rotate(-45deg);
margin: ${remcalc(3)} ${remcalc(10)} ${remcalc(3)} ${remcalc(10)};
`;
export default ({ children, ...rest }) => (
<div>
<Name name="breadcrum-item" {...rest}>
{children}
</Name>
<Arrow />
</div>
);

View File

@ -0,0 +1,11 @@
```
const Breadcrumb = require('./index.js').default;
const Item = require('./item.js').default;
<Breadcrumb>
<Item>Home</Item>
<Item>Warp Records Blog</Item>
<Item>Services</Item>
<Item>Nginx</Item>
</Breadcrumb>
```

View File

@ -2,6 +2,7 @@ export { default as Anchor } from './anchor';
export { default as Base, global } from './base';
export { default as Baseline } from './baseline';
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';

View File

@ -54,6 +54,7 @@ module.exports = {
components: () => [
'src/anchor/index.js',
'src/button/index.js',
'src/breadcrumb/index.js',
'src/card/card.js',
'src/form/input.js',
'src/form/number-input.js',