feat(my-joyent): add Header Section to My-joyent

This commit is contained in:
Sara Vieira 2017-09-08 16:44:08 +01:00 committed by Sérgio Ramos
parent ba6666433e
commit ff23179bfd
14 changed files with 2871 additions and 14 deletions

View File

@ -18,8 +18,7 @@
"lint-ci": "redrun -p lint-ci:*", "lint-ci": "redrun -p lint-ci:*",
"test": "NODE_ENV=test ./test/run --env=jsdom", "test": "NODE_ENV=test ./test/run --env=jsdom",
"test-ci": "test-ci":
"echo 0 `# NODE_ENV=test JEST_JUNIT_OUTPUT=$CIRCLE_TEST_REPORTS/test/cp-frontend.xml ./test/run --env=jsdom --coverage --coverageDirectory=$CIRCLE_ARTIFACTS/cp-frontend --testResultsProcessor=$(node -e \"console.log(require.resolve('jest-junit'))\")`", "echo 0 `# NODE_ENV=test JEST_JUNIT_OUTPUT=$CIRCLE_TEST_REPORTS/test/cp-frontend.xml ./test/run --env=jsdom --coverage --coverageDirectory=$CIRCLE_ARTIFACTS/cp-frontend --testResultsProcessor=$(node -e \"console.log(require.resolve('jest-junit'))\")`"
"prepublish": "node scripts/postinstall"
}, },
"dependencies": { "dependencies": {
"apollo": "^0.2.2", "apollo": "^0.2.2",

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,21 @@
/**
* @jest-environment jsdom
*/
import React from 'react';
import renderer from 'react-test-renderer';
import 'jest-styled-components';
import { Router } from '@mocks/';
import Home from '../home';
it('renders <Home /> without throwing', () => {
const tree = renderer
.create(
<Router>
<Home />
</Router>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

View File

@ -0,0 +1,49 @@
import React, { Component } from 'react';
import { Row } from 'react-styled-flexboxgrid';
import { SectionNav } from '@components/navigation';
import { Message, Breadcrumb, BreadcrumbItem, Anchor } from 'joyent-ui-toolkit';
class Home extends Component {
constructor(props) {
super(props);
this.state = {
showMessage: true
};
this.closeMessage = this.closeMessage.bind(this);
}
closeMessage() {
this.setState({
showMessage: false
});
}
render() {
const _msg = this.state.showMessage ? (
<Message
title="Choosing deployement data center"
onCloseClick={this.closeMessage}
>
<p>
Not all data centres have all configurations of instances available.
Make sure that you choose the data center that suits your
requirements. <Anchor href="#">Learn More</Anchor>
</p>
</Message>
) : null;
return (
<main>
<SectionNav />
<Breadcrumb>
<BreadcrumbItem>Instances</BreadcrumbItem>
<BreadcrumbItem>Create Instance</BreadcrumbItem>
</Breadcrumb>
<Row>{_msg}</Row>
</main>
);
}
}
export default Home;

View File

@ -0,0 +1 @@
export { default as Home } from './home';

View File

@ -0,0 +1,177 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <SectionNav /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
}
.c2 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
display: inline-block;
font-size: 0.9375rem;
line-height: 1.6;
margin-right: 1.4375rem;
}
.c3 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
color: ;
text-decoration: none;
cursor: pointer;
}
.c3.active {
color: ;
cursor: default;
}
.c1 {
list-style-type: none;
padding: 0;
margin: 0;
}
<div
className="c0"
>
.c1 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
display: inline-block;
font-size: 0.9375rem;
line-height: 1.6;
margin-right: 1.4375rem;
}
.c2 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
color: ;
text-decoration: none;
cursor: pointer;
}
.c2.active {
color: ;
cursor: default;
}
.c0 {
list-style-type: none;
padding: 0;
margin: 0;
}
<ul
className="c0"
>
.c0 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
display: inline-block;
font-size: 0.9375rem;
line-height: 1.6;
margin-right: 1.4375rem;
}
.c1 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
color: ;
text-decoration: none;
cursor: pointer;
}
.c1.active {
color: ;
cursor: default;
}
<li
className="c0"
>
.c0 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
color: ;
text-decoration: none;
cursor: pointer;
}
.c0.active {
color: ;
cursor: default;
}
<a
aria-current="true"
className="active c0 active"
href="/"
onClick={[Function]}
style={Object {}}
>
Instances
</a>
</li>
.c0 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
display: inline-block;
font-size: 0.9375rem;
line-height: 1.6;
margin-right: 1.4375rem;
}
<li
className="c0"
>
Custom images
</li>
.c0 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
display: inline-block;
font-size: 0.9375rem;
line-height: 1.6;
margin-right: 1.4375rem;
}
<li
className="c0"
>
Docker images
</li>
.c0 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
display: inline-block;
font-size: 0.9375rem;
line-height: 1.6;
margin-right: 1.4375rem;
}
<li
className="c0"
>
Docker registries
</li>
</ul>
</div>
`;

View File

@ -0,0 +1,21 @@
/**
* @jest-environment jsdom
*/
import React from 'react';
import renderer from 'react-test-renderer';
import 'jest-styled-components';
import { SectionNav } from '../';
import { Router } from '@mocks/';
it('renders <SectionNav /> without throwing', () => {
const tree = renderer
.create(
<Router>
<SectionNav />
</Router>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

View File

@ -1,2 +1,3 @@
export { default as Header } from './header'; export { default as Header } from './header';
export { default as SectionNav } from './section-nav';
export { default as NotFound } from './not-found'; export { default as NotFound } from './not-found';

View File

@ -0,0 +1,24 @@
import React from 'react';
import { Row } from 'react-styled-flexboxgrid';
import {
SectionList,
SectionListItem,
SectionListNavLink
} from 'joyent-ui-toolkit';
const SectionNav = () => (
<Row>
<SectionList>
<SectionListItem>
<SectionListNavLink to="/" className="active">
Instances
</SectionListNavLink>
</SectionListItem>
<SectionListItem>Custom images</SectionListItem>
<SectionListItem>Docker images</SectionListItem>
<SectionListItem>Docker registries</SectionListItem>
</SectionList>
</Row>
);
export default SectionNav;

View File

@ -6,9 +6,16 @@ import React from 'react';
import renderer from 'react-test-renderer'; import renderer from 'react-test-renderer';
import 'jest-styled-components'; import 'jest-styled-components';
import Home from '../'; import HomeHOC from '../';
import { Router } from '@mocks/';
it('renders <Home /> without throwing', () => { it('renders <HomeHOC /> without throwing', () => {
const tree = renderer.create(<Home />).toJSON(); const tree = renderer
.create(
<Router>
<HomeHOC />
</Router>
)
.toJSON();
expect(tree).toMatchSnapshot(); expect(tree).toMatchSnapshot();
}); });

View File

@ -1,8 +1,11 @@
import React from 'react'; import React from 'react';
import { LayoutContainer } from '@components/layout'; import { LayoutContainer } from '@components/layout';
import { Home } from '@components/home';
const Home = () => ( const HomeHOC = () => (
<LayoutContainer>Welcome to your joyent portal</LayoutContainer> <LayoutContainer>
<Home />
</LayoutContainer>
); );
export default Home; export default HomeHOC;

View File

@ -4,7 +4,7 @@ import styled from 'styled-components';
import { Header } from '@containers/navigation'; import { Header } from '@containers/navigation';
import Home from '@containers/home'; import HomeHOC from '@containers/home';
import { NotFound } from '@components/navigation'; import { NotFound } from '@components/navigation';
@ -20,7 +20,7 @@ const Router = (
<Container> <Container>
<Route path="/" component={Header} /> <Route path="/" component={Header} />
<Switch> <Switch>
<Route path="/" exact component={Home} /> <Route path="/" exact component={HomeHOC} />
<Route path="/*" component={NotFound} /> <Route path="/*" component={NotFound} />
</Switch> </Switch>
</Container> </Container>

View File

@ -51,7 +51,7 @@ const StyledClose = styled(CloseButton)`
top: ${unitcalc(0.5)}; top: ${unitcalc(0.5)};
`; `;
const Message = ({ title, message, onCloseClick, ...type }) => { const Message = ({ title, message, onCloseClick, children, ...type }) => {
const renderTitle = title ? <StyledTitle>{title}</StyledTitle> : null; const renderTitle = title ? <StyledTitle>{title}</StyledTitle> : null;
const renderClose = onCloseClick ? ( const renderClose = onCloseClick ? (
@ -63,7 +63,7 @@ const Message = ({ title, message, onCloseClick, ...type }) => {
<StyledColor {...type} /> <StyledColor {...type} />
<StyledMessageContainer> <StyledMessageContainer>
{renderTitle} {renderTitle}
<StyledMessage>{message}</StyledMessage> <StyledMessage>{message || children}</StyledMessage>
</StyledMessageContainer> </StyledMessageContainer>
{renderClose} {renderClose}
</StyledContainer> </StyledContainer>