feat(ui-toolkit): abstract view-container in the Header implementation
* feat(ui-toolkit): abstract view-container in the Header implementation * fix(ui-toolkit): import react in triton-beta logo this fixes a missing import error because svgs are compiled to react components * style(ui-toolkit): convert px leftovers
This commit is contained in:
parent
28918fb464
commit
8a0a0a4457
@ -1,37 +1,34 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import {
|
||||
Header,
|
||||
HeaderBrand,
|
||||
HeaderWrapper,
|
||||
TritonBetaIcon,
|
||||
DataCenterIconLight,
|
||||
UserIconLight,
|
||||
HeaderNav,
|
||||
HeaderNavAnchor,
|
||||
HeaderItem
|
||||
} from 'joyent-ui-toolkit';
|
||||
|
||||
export default () => (
|
||||
<Header>
|
||||
<HeaderWrapper>
|
||||
<HeaderBrand beta>
|
||||
<Link to="/">
|
||||
<TritonBetaIcon alt="Triton" />
|
||||
</Link>
|
||||
</HeaderBrand>
|
||||
<HeaderNav>
|
||||
<li>
|
||||
<Link to="/">Compute</Link>
|
||||
</li>
|
||||
</HeaderNav>
|
||||
<HeaderItem>Return to existing portal</HeaderItem>
|
||||
<HeaderItem>
|
||||
<DataCenterIconLight />eu-east-1
|
||||
</HeaderItem>
|
||||
<HeaderItem>
|
||||
<UserIconLight />Nicola
|
||||
</HeaderItem>
|
||||
</HeaderWrapper>
|
||||
<HeaderBrand beta>
|
||||
<HeaderNavAnchor to="/">
|
||||
<TritonBetaIcon alt="Triton" />
|
||||
</HeaderNavAnchor>
|
||||
</HeaderBrand>
|
||||
<HeaderNav>
|
||||
<li>
|
||||
<HeaderNavAnchor to="/">Compute</HeaderNavAnchor>
|
||||
</li>
|
||||
</HeaderNav>
|
||||
<HeaderItem>Return to existing portal</HeaderItem>
|
||||
<HeaderItem>
|
||||
<DataCenterIconLight />eu-east-1
|
||||
</HeaderItem>
|
||||
<HeaderItem>
|
||||
<UserIconLight />Nicola
|
||||
</HeaderItem>
|
||||
</Header>
|
||||
);
|
||||
|
@ -40,11 +40,11 @@ const Label = styled.label`
|
||||
|
||||
background-color: rgb(255, 255, 255);
|
||||
box-shadow: none;
|
||||
border: 1px solid ${props => props.theme.grey};
|
||||
border: ${remcalc(1)} solid ${props => props.theme.grey};
|
||||
cursor: pointer;
|
||||
|
||||
${is('checkbox')`
|
||||
border-radius: 4px;
|
||||
border-radius: ${remcalc(4)};
|
||||
width: ${remcalc(18)};
|
||||
height: ${remcalc(18)};
|
||||
`};
|
||||
|
@ -20,9 +20,7 @@ const Brand = H2.extend`
|
||||
const Box = styled.div`
|
||||
align-self: stretch;
|
||||
order: 0;
|
||||
width: 150px;
|
||||
|
||||
padding: ${remcalc(11)} 0;
|
||||
width: ${remcalc(150)};
|
||||
`;
|
||||
|
||||
export default ({ children, ...rest }) => (
|
||||
|
@ -1,11 +0,0 @@
|
||||
import { ViewContainer } from '../layout';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
export default ViewContainer.extend`
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-content: stretch;
|
||||
align-items: stretch;
|
||||
max-height: ${remcalc(53)};
|
||||
min-height: ${remcalc(53)};
|
||||
`;
|
@ -2,6 +2,17 @@ import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import { ViewContainer } from '../layout';
|
||||
|
||||
const Container = ViewContainer.extend`
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-content: stretch;
|
||||
align-items: stretch;
|
||||
max-height: ${remcalc(53)};
|
||||
min-height: ${remcalc(53)};
|
||||
`;
|
||||
|
||||
const Header = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -18,9 +29,12 @@ const Header = styled.div`
|
||||
/**
|
||||
* @example ./usage.md
|
||||
*/
|
||||
export default ({ children, ...rest }) => <Header {...rest}>{children}</Header>;
|
||||
export default ({ children, ...rest }) => (
|
||||
<Header {...rest}>
|
||||
<Container>{children}</Container>
|
||||
</Header>
|
||||
);
|
||||
|
||||
export { default as HeaderBrand } from './brand';
|
||||
export { default as HeaderItem } from './item';
|
||||
export { default as HeaderNav } from './nav';
|
||||
export { default as HeaderWrapper } from './header-wrapper';
|
||||
export { default as HeaderBrand } from './brand';
|
||||
export { default as HeaderNav, Anchor as HeaderNavAnchor } from './nav';
|
||||
|
@ -28,7 +28,7 @@ const Box = styled.section`
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-right: ${remcalc(1)} solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
|
@ -1,32 +1,53 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import styled, { css } from 'styled-components';
|
||||
import { Link as BaseLink } from 'react-router-dom';
|
||||
import { A } from 'normalized-styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
const UL = styled.ul`
|
||||
const Ul = styled.ul`
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
list-style: none;
|
||||
`;
|
||||
|
||||
a {
|
||||
padding: ${remcalc(15)};
|
||||
line-height: ${remcalc(24)};
|
||||
font-size: ${remcalc(15)};
|
||||
color: ${props => props.theme.white};
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 200ms ease;
|
||||
max-height: ${remcalc(53)};
|
||||
min-height: ${remcalc(53)};
|
||||
box-sizing: border-box;
|
||||
const style = css`
|
||||
padding: ${remcalc(15)};
|
||||
line-height: ${remcalc(24)};
|
||||
font-size: ${remcalc(15)};
|
||||
color: ${props => props.theme.white};
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 200ms ease;
|
||||
max-height: ${remcalc(53)};
|
||||
min-height: ${remcalc(53)};
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
&:hover,
|
||||
&.active {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
`;
|
||||
|
||||
export default ({ children, ...rest }) => <UL {...rest}>{children}</UL>;
|
||||
const StyledAnchor = A.extend`
|
||||
/* trick prettier */
|
||||
${style};
|
||||
`;
|
||||
|
||||
const StyledLink = styled(BaseLink)`
|
||||
/* trick prettier */
|
||||
${style};
|
||||
`;
|
||||
|
||||
export const Anchor = ({ children, ...rest }) => {
|
||||
const { to = '' } = rest;
|
||||
|
||||
const Views = [() => (to ? StyledLink : null), () => StyledAnchor];
|
||||
const View = Views.reduce((sel, view) => (sel ? sel : view()), null);
|
||||
|
||||
return <View {...rest}>{children}</View>;
|
||||
};
|
||||
|
||||
export default ({ children, ...rest }) => <Ul {...rest}>{children}</Ul>;
|
||||
|
@ -2,17 +2,16 @@
|
||||
const React = require('react');
|
||||
const { default: HeaderBrand } = require('./brand.js');
|
||||
const { default: HeaderItem } = require('./item.js');
|
||||
const { default: HeaderNav, HeaderNavAnchor } = require('./nav.js');
|
||||
|
||||
<Header>
|
||||
<HeaderWrapper>
|
||||
<HeaderBrand beta><TritonBetaIcon/></HeaderBrand>
|
||||
<HeaderNav>
|
||||
<li><a href="#">Compute</a></li>
|
||||
<li><a href="#" class="active">Network</a></li>
|
||||
</HeaderNav>
|
||||
<HeaderItem>Return to existing portal</HeaderItem>
|
||||
<HeaderItem><DataCenterIconLight/>eu-east-1</HeaderItem>
|
||||
<HeaderItem><UserIconLight/>Nicola</HeaderItem>
|
||||
</HeaderWrapper>
|
||||
<HeaderBrand beta><TritonBetaIcon/></HeaderBrand>
|
||||
<HeaderNav>
|
||||
<li><HeaderNavAnchor href="#">Compute</HeaderNavAnchor></li>
|
||||
<li><HeaderNavAnchor href="#" class="active">Network</HeaderNavAnchor></li>
|
||||
</HeaderNav>
|
||||
<HeaderItem>Return to existing portal</HeaderItem>
|
||||
<HeaderItem><DataCenterIconLight/>eu-east-1</HeaderItem>
|
||||
<HeaderItem><UserIconLight/>Nicola</HeaderItem>
|
||||
</Header>
|
||||
```
|
||||
|
@ -1,3 +1,6 @@
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import React from 'react';
|
||||
|
||||
import TritonBetaIcon from './svg/triton_beta.svg';
|
||||
|
||||
export default TritonBetaIcon;
|
||||
|
@ -83,7 +83,7 @@ export {
|
||||
HeaderBrand,
|
||||
HeaderItem,
|
||||
HeaderNav,
|
||||
HeaderWrapper
|
||||
HeaderNavAnchor
|
||||
} from './header';
|
||||
|
||||
export {
|
||||
|
@ -9,7 +9,7 @@ const Span = styled.span`
|
||||
font-size: ${remcalc(13)};
|
||||
position: absolute;
|
||||
top: ${remcalc(14)};
|
||||
right: ${props => (props.type === 'max' ? '1px' : 'auto')};
|
||||
right: ${props => (props.type === 'max' ? remcalc(1) : 'auto')};
|
||||
color: ${props => (props.greyed ? theme.grey : theme.secondary)};
|
||||
`;
|
||||
|
||||
|
@ -9,7 +9,7 @@ import theme from '../../../theme';
|
||||
export const SliderStyled = styled.div`
|
||||
appearance: none;
|
||||
background: ${theme.white};
|
||||
border: 2px solid ${theme.grey};
|
||||
border: ${remcalc(2)} solid ${theme.grey};
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
@ -26,7 +26,7 @@ export const SliderStyled = styled.div`
|
||||
}
|
||||
|
||||
&::focus {
|
||||
box-shadow: 0 0 0 5px rgba(63, 81, 181, 0.2);
|
||||
box-shadow: 0 0 0 ${remcalc(5)} rgba(63, 81, 181, 0.2);
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -12,7 +12,7 @@ const Box = styled.div`
|
||||
|
||||
const Data = styled.td`
|
||||
padding: ${remcalc(18)} 0;
|
||||
border-bottom: 1px solid ${theme.grey};
|
||||
border-bottom: ${remcalc(1)} solid ${theme.grey};
|
||||
max-width: ${remcalc(250)};
|
||||
`;
|
||||
|
||||
@ -23,8 +23,8 @@ const Table = styled.table`
|
||||
|
||||
const InnerBox = styled.div`
|
||||
margin-top: ${remcalc(6)};
|
||||
line-height: 24px;
|
||||
font-size: 16px;
|
||||
line-height: ${remcalc(24)};
|
||||
font-size: ${remcalc(16)};
|
||||
color: ${theme.text};
|
||||
`;
|
||||
|
||||
@ -33,8 +33,8 @@ const Preview = styled.div`
|
||||
background: ${props => props.hex};
|
||||
width: ${remcalc(96)};
|
||||
height: ${remcalc(96)};
|
||||
border: 1px solid ${theme.grey};
|
||||
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05);
|
||||
border: ${remcalc(1)} solid ${theme.grey};
|
||||
box-shadow: 0 ${remcalc(2)} ${remcalc(1)} rgba(0, 0, 0, 0.05);
|
||||
`;
|
||||
|
||||
const Paragraph = P.extend`
|
||||
|
Loading…
Reference in New Issue
Block a user