Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(ui-toolkit): abstract view-container in the Header implementation

Browse Source 
* 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:
Sérgio Ramos 2017-11-02 15:18:25 +00:00 committed by Sara Vieira
parent 28918fb464
commit 8a0a0a4457
13 changed files with 102 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
packages/my-joy-beta/src/components/navigation/header.js
View File

@ -1,37 +1,34 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom';
import { import {
Header, Header,
HeaderBrand, HeaderBrand,
HeaderWrapper,
TritonBetaIcon, TritonBetaIcon,
DataCenterIconLight, DataCenterIconLight,
UserIconLight, UserIconLight,
HeaderNav, HeaderNav,
HeaderNavAnchor,
HeaderItem HeaderItem
} from 'joyent-ui-toolkit'; } from 'joyent-ui-toolkit';
export default () => ( export default () => (
<Header> <Header>
<HeaderWrapper> <HeaderBrand beta>
<HeaderBrand beta> <HeaderNavAnchor to="/">
<Link to="/"> <TritonBetaIcon alt="Triton" />
<TritonBetaIcon alt="Triton" /> </HeaderNavAnchor>
</Link> </HeaderBrand>
</HeaderBrand> <HeaderNav>
<HeaderNav> <li>
<li> <HeaderNavAnchor to="/">Compute</HeaderNavAnchor>
<Link to="/">Compute</Link> </li>
</li> </HeaderNav>
</HeaderNav> <HeaderItem>Return to existing portal</HeaderItem>
<HeaderItem>Return to existing portal</HeaderItem> <HeaderItem>
<HeaderItem> <DataCenterIconLight />eu-east-1
<DataCenterIconLight />eu-east-1 </HeaderItem>
</HeaderItem> <HeaderItem>
<HeaderItem> <UserIconLight />Nicola
<UserIconLight />Nicola </HeaderItem>
</HeaderItem>
</HeaderWrapper>
</Header> </Header>
); );

4
packages/ui-toolkit/src/form/base/toggle.js
View File

@ -40,11 +40,11 @@ const Label = styled.label`
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
box-shadow: none; box-shadow: none;
border: 1px solid ${props => props.theme.grey}; border: ${remcalc(1)} solid ${props => props.theme.grey};
cursor: pointer; cursor: pointer;
${is('checkbox')` ${is('checkbox')`
border-radius: 4px; border-radius: ${remcalc(4)};
width: ${remcalc(18)}; width: ${remcalc(18)};
height: ${remcalc(18)}; height: ${remcalc(18)};
`}; `};

4
packages/ui-toolkit/src/header/brand.js
View File

@ -20,9 +20,7 @@ const Brand = H2.extend`
const Box = styled.div` const Box = styled.div`
align-self: stretch; align-self: stretch;
order: 0; order: 0;
width: 150px; width: ${remcalc(150)};
padding: ${remcalc(11)} 0;
`; `;
export default ({ children, ...rest }) => ( export default ({ children, ...rest }) => (

11
packages/ui-toolkit/src/header/header-wrapper.js
View File

@ -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)};
`;

22
packages/ui-toolkit/src/header/index.js
View File

@ -2,6 +2,17 @@ import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import remcalc from 'remcalc'; 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` const Header = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -18,9 +29,12 @@ const Header = styled.div`
/** /**
* @example ./usage.md * @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 HeaderItem } from './item';
export { default as HeaderNav } from './nav'; export { default as HeaderBrand } from './brand';
export { default as HeaderWrapper } from './header-wrapper'; export { default as HeaderNav, Anchor as HeaderNavAnchor } from './nav';

2
packages/ui-toolkit/src/header/item.js
View File

@ -28,7 +28,7 @@ const Box = styled.section`
} }
&:not(:last-of-type) { &: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 { &:first-of-type {

61
packages/ui-toolkit/src/header/nav.js
View File

@ -1,32 +1,53 @@
import React from 'react'; 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'; import remcalc from 'remcalc';
const UL = styled.ul` const Ul = styled.ul`
padding: 0; padding: 0;
margin: 0; margin: 0;
display: flex; display: flex;
list-style: none; list-style: none;
`;
a { const style = css`
padding: ${remcalc(15)}; padding: ${remcalc(15)};
line-height: ${remcalc(24)}; line-height: ${remcalc(24)};
font-size: ${remcalc(15)}; font-size: ${remcalc(15)};
color: ${props => props.theme.white}; color: ${props => props.theme.white};
text-decoration: none; text-decoration: none;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 200ms ease; transition: all 200ms ease;
max-height: ${remcalc(53)}; max-height: ${remcalc(53)};
min-height: ${remcalc(53)}; min-height: ${remcalc(53)};
box-sizing: border-box; box-sizing: border-box;
&:hover, &:hover,
&.active { &.active {
background: rgba(255, 255, 255, 0.15); 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>;

19
packages/ui-toolkit/src/header/usage.md
View File

@ -2,17 +2,16 @@
const React = require('react'); const React = require('react');
const { default: HeaderBrand } = require('./brand.js'); const { default: HeaderBrand } = require('./brand.js');
const { default: HeaderItem } = require('./item.js'); const { default: HeaderItem } = require('./item.js');
const { default: HeaderNav, HeaderNavAnchor } = require('./nav.js');
<Header> <Header>
<HeaderWrapper> <HeaderBrand beta><TritonBetaIcon/></HeaderBrand>
<HeaderBrand beta><TritonBetaIcon/></HeaderBrand> <HeaderNav>
<HeaderNav> <li><HeaderNavAnchor href="#">Compute</HeaderNavAnchor></li>
<li><a href="#">Compute</a></li> <li><HeaderNavAnchor href="#" class="active">Network</HeaderNavAnchor></li>
<li><a href="#" class="active">Network</a></li> </HeaderNav>
</HeaderNav> <HeaderItem>Return to existing portal</HeaderItem>
<HeaderItem>Return to existing portal</HeaderItem> <HeaderItem><DataCenterIconLight/>eu-east-1</HeaderItem>
<HeaderItem><DataCenterIconLight/>eu-east-1</HeaderItem> <HeaderItem><UserIconLight/>Nicola</HeaderItem>
<HeaderItem><UserIconLight/>Nicola</HeaderItem>
</HeaderWrapper>
</Header> </Header>
``` ```

3
packages/ui-toolkit/src/icons/triton-beta.js
View File

@ -1,3 +1,6 @@
// eslint-disable-next-line no-unused-vars
import React from 'react';
import TritonBetaIcon from './svg/triton_beta.svg'; import TritonBetaIcon from './svg/triton_beta.svg';
export default TritonBetaIcon; export default TritonBetaIcon;

2
packages/ui-toolkit/src/index.js
View File

@ -83,7 +83,7 @@ export {
HeaderBrand, HeaderBrand,
HeaderItem, HeaderItem,
HeaderNav, HeaderNav,
HeaderWrapper HeaderNavAnchor
} from './header'; } from './header';
export { export {

2
packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx
View File

@ -9,7 +9,7 @@ const Span = styled.span`
font-size: ${remcalc(13)}; font-size: ${remcalc(13)};
position: absolute; position: absolute;
top: ${remcalc(14)}; 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)}; color: ${props => (props.greyed ? theme.grey : theme.secondary)};
`; `;

4
packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx
View File

@ -9,7 +9,7 @@ import theme from '../../../theme';
export const SliderStyled = styled.div` export const SliderStyled = styled.div`
appearance: none; appearance: none;
background: ${theme.white}; background: ${theme.white};
border: 2px solid ${theme.grey}; border: ${remcalc(2)} solid ${theme.grey};
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
display: block; display: block;
@ -26,7 +26,7 @@ export const SliderStyled = styled.div`
} }
&::focus { &::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);
} }
`; `;

10
packages/ui-toolkit/src/theme/colors.js
View File

@ -12,7 +12,7 @@ const Box = styled.div`
const Data = styled.td` const Data = styled.td`
padding: ${remcalc(18)} 0; padding: ${remcalc(18)} 0;
border-bottom: 1px solid ${theme.grey}; border-bottom: ${remcalc(1)} solid ${theme.grey};
max-width: ${remcalc(250)}; max-width: ${remcalc(250)};
`; `;
@ -23,8 +23,8 @@ const Table = styled.table`
const InnerBox = styled.div` const InnerBox = styled.div`
margin-top: ${remcalc(6)}; margin-top: ${remcalc(6)};
line-height: 24px; line-height: ${remcalc(24)};
font-size: 16px; font-size: ${remcalc(16)};
color: ${theme.text}; color: ${theme.text};
`; `;
@ -33,8 +33,8 @@ const Preview = styled.div`
background: ${props => props.hex}; background: ${props => props.hex};
width: ${remcalc(96)}; width: ${remcalc(96)};
height: ${remcalc(96)}; height: ${remcalc(96)};
border: 1px solid ${theme.grey}; border: ${remcalc(1)} solid ${theme.grey};
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05); box-shadow: 0 ${remcalc(2)} ${remcalc(1)} rgba(0, 0, 0, 0.05);
`; `;
const Paragraph = P.extend` const Paragraph = P.extend`