feat(joyent-ui-toolkit): implement Header component

This commit is contained in:
Sérgio Ramos 2017-06-06 20:08:08 +01:00 committed by Judit Greskovits
parent 1510341307
commit 56315d02c7
6 changed files with 107 additions and 0 deletions

View File

@ -0,0 +1,28 @@
import React from 'react';
import styled from 'styled-components';
import remcalc from 'remcalc';
import { H2 } from '../text/headings';
const Brand = H2.extend`
text-transform: uppercase;
color: ${props => props.theme.white};
font-size: ${remcalc(29)};
margin: 0;
`;
const Box = styled.div`
flex: 1 1 auto;
align-self: stretch;
order: 0;
padding: ${remcalc(15)} 0;
`;
export default ({ children, ...rest }) => (
<Box xs={6} sm={6} md={6} start {...rest}>
<Brand>
{children}
</Brand>
</Box>
);

View File

@ -0,0 +1,30 @@
import React from 'react';
import styled from 'styled-components';
import remcalc from 'remcalc';
const Header = styled.div`
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-content: stretch;
align-items: stretch;
background-color: ${props => props.theme.primaryDarkBrand};
max-height: ${remcalc(53)};
min-height: ${remcalc(53)};
padding: 0 ${remcalc(18)};
line-height: ${remcalc(25)};
`;
/**
* @example ./usage.md
*/
export default ({ children, ...rest }) => (
<Header {...rest}>
{children}
</Header>
);
export { default as Brand } from './brand';
export { default as Item } from './item';

View File

@ -0,0 +1,32 @@
import React from 'react';
import styled from 'styled-components';
import remcalc from 'remcalc';
import P from '../text/p';
import typography from '../typography';
const Text = P.extend`
${typography.semibold};
text-align: center;
color: ${props => props.theme.white};
margin: 0;
`;
const Box = styled.div`
flex: 0 1 auto;
align-self: auto;
order: 0;
padding: ${remcalc(15)} 0;
width: ${remcalc(100)};
max-width: ${remcalc(100)};
`;
export default ({ children, ...rest }) => (
<Box xs={3} sm={2} md={2} end {...rest}>
<Text>
{children}
</Text>
</Box>
);

View File

@ -0,0 +1,10 @@
```
const Brand = require('./brand.js').default;
const Item = require('./item.js').default;
<Header>
<Brand>Triton</Brand>
<Item>eu-east-1</Item>
<Item>Nicola</Item>
</Header>
```

View File

@ -65,3 +65,9 @@ export {
Toggle, Toggle,
ToggleList ToggleList
} from './form'; } from './form';
export {
default as Header,
Brand as HeaderBrand,
Item as HeaderItem
} from './header';

View File

@ -60,6 +60,7 @@ module.exports = {
'src/form/radio.js', 'src/form/radio.js',
'src/form/select.js', 'src/form/select.js',
'src/form/toggle.js', 'src/form/toggle.js',
'src/header/index.js',
'src/list/ul.js', 'src/list/ul.js',
'src/list/li.js', 'src/list/li.js',
'src/topology/index.js', 'src/topology/index.js',