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:
parent
b8dfb73959
commit
e6b6f6a761
13
packages/ui-toolkit/src/breadcrumb/index.js
Normal file
13
packages/ui-toolkit/src/breadcrumb/index.js
Normal 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';
|
31
packages/ui-toolkit/src/breadcrumb/item.js
Normal file
31
packages/ui-toolkit/src/breadcrumb/item.js
Normal 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>
|
||||
);
|
11
packages/ui-toolkit/src/breadcrumb/usage.md
Normal file
11
packages/ui-toolkit/src/breadcrumb/usage.md
Normal 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>
|
||||
```
|
@ -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';
|
||||
|
@ -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',
|
||||
|
Loading…
Reference in New Issue
Block a user