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

fix(my-joyent): fix some inconsistencies in technical Prototype

Browse Source
This commit is contained in:
Sara Vieira 2017-09-15 16:22:44 +01:00 committed by Sérgio Ramos
parent 5b1059882b
commit 4c666bb438
9 changed files with 1023 additions and 769 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap
View File

@ -809,14 +809,14 @@ exports[`renders <Filters /> without throwing 1`] = `
onClick={[Function]} onClick={[Function]}
selected={false} selected={false}
> >
Memory Optimized General Purpose
</button> </button>
<button <button
className="c6" className="c6"
onClick={[Function]} onClick={[Function]}
selected={false} selected={false}
> >
General Purpose Memory Optimized
</button> </button>
<button <button
className="c6" className="c6"

4
packages/my-joyent/src/components/filters/filters.js
View File

@ -39,7 +39,7 @@ const Filters = ({
/> />
<GroupWrapper> <GroupWrapper>
<div> <div>
{filters.groups.map(group => ( {filters.groups.sort((a, b) => a.name < b.name ? -1 : 1 ).map(group => (
<Button <Button
key={group.name} key={group.name}
tertiary tertiary
@ -52,7 +52,7 @@ const Filters = ({
))} ))}
</div> </div>
<Button <Button
disabled={isEqual(filters,defaultState.filters)} disabled={isEqual(filters, defaultState.filters)}
secondary secondary
small small
onClick={filterReset} onClick={filterReset}

2
packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap
View File

@ -68,7 +68,7 @@ exports[`renders <Package /> without throwing 1`] = `
border: 1px solid; border: 1px solid;
box-shadow: 0px 2px 0px rgba(0,0,0,0.05); box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
min-height: 11.5625rem; min-height: 11.5625rem;
min-width: 237px; min-width: 292px;
} }
.c2 { .c2 {

293
packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <Packages /> without throwing 1`] = ` exports[`renders <Packages /> without throwing 1`] = `
.c4 { .c1 {
box-sizing: border-box; box-sizing: border-box;
-webkit-flex: 0 0 auto; -webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto; -ms-flex: 0 0 auto;
@ -10,7 +10,16 @@ exports[`renders <Packages /> without throwing 1`] = `
padding-left: 0.5rem; padding-left: 0.5rem;
} }
.c6 { .c5 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c7 {
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: 1.5; line-height: 1.5;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
@ -36,7 +45,7 @@ exports[`renders <Packages /> without throwing 1`] = `
padding: 0.75rem 1.125rem 0 1.125rem; padding: 0.75rem 1.125rem 0 1.125rem;
} }
.c2 { .c3 {
box-sizing: border-box; box-sizing: border-box;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
@ -68,10 +77,10 @@ exports[`renders <Packages /> without throwing 1`] = `
border: 1px solid; border: 1px solid;
box-shadow: 0px 2px 0px rgba(0,0,0,0.05); box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
min-height: 11.5625rem; min-height: 11.5625rem;
min-width: 237px; min-width: 292px;
} }
.c3 { .c4 {
box-sizing: border-box; box-sizing: border-box;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
@ -100,7 +109,7 @@ exports[`renders <Packages /> without throwing 1`] = `
flex-direction: row; flex-direction: row;
} }
.c5 { .c6 {
box-sizing: border-box; box-sizing: border-box;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
@ -126,7 +135,7 @@ exports[`renders <Packages /> without throwing 1`] = `
transform: translateY(-50%); transform: translateY(-50%);
} }
.c8 { .c9 {
display: inline-block; display: inline-block;
-webkit-flex-direction: column; -webkit-flex-direction: column;
-ms-flex-direction: column; -ms-flex-direction: column;
@ -142,14 +151,14 @@ exports[`renders <Packages /> without throwing 1`] = `
justify-content: flex-end; justify-content: flex-end;
} }
.c7 { .c8 {
display: inline-block; display: inline-block;
padding: 0 1.125rem; padding: 0 1.125rem;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400; font-weight: 400;
} }
.c9 { .c10 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400; font-weight: 400;
-webkit-flex-grow: 1; -webkit-flex-grow: 1;
@ -160,7 +169,7 @@ exports[`renders <Packages /> without throwing 1`] = `
flex-basis: 5.625rem; flex-basis: 5.625rem;
} }
.c10 { .c11 {
display: inline-block; display: inline-block;
-webkit-flex-direction: column; -webkit-flex-direction: column;
-ms-flex-direction: column; -ms-flex-direction: column;
@ -173,7 +182,7 @@ exports[`renders <Packages /> without throwing 1`] = `
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c1 { .c2 {
margin-right: 1.125rem; margin-right: 1.125rem;
margin-bottom: 1.125rem; margin-bottom: 1.125rem;
} }
@ -183,17 +192,59 @@ exports[`renders <Packages /> without throwing 1`] = `
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
width: 100%; min-width: 100%;
list-style: none; list-style: none;
padding: 0; padding: 0;
-webkit-flex-wrap: wrap; -webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap; -ms-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 2.25rem; margin-top: 2.25rem;
margin-right: -0.5rem;
margin-left: -0.5rem;
} }
@media only screen and (min-width:0em) { @media only screen and (min-width:0em) {
.c4 { .c1 {
-webkit-flex-basis: 100%;
-ms-flex-basis: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:48em) {
.c1 {
-webkit-flex-basis: 50%;
-ms-flex-basis: 50%;
flex-basis: 50%;
max-width: 50%;
display: block;
}
}
@media only screen and (min-width:64em) {
.c1 {
-webkit-flex-basis: 33.333333333333336%;
-ms-flex-basis: 33.333333333333336%;
flex-basis: 33.333333333333336%;
max-width: 33.333333333333336%;
display: block;
}
}
@media only screen and (min-width:75em) {
.c1 {
-webkit-flex-basis: 25%;
-ms-flex-basis: 25%;
flex-basis: 25%;
max-width: 25%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c5 {
-webkit-flex-basis: 50%; -webkit-flex-basis: 50%;
-ms-flex-basis: 50%; -ms-flex-basis: 50%;
flex-basis: 50%; flex-basis: 50%;
@ -205,24 +256,26 @@ exports[`renders <Packages /> without throwing 1`] = `
<ul <ul
className="c0" className="c0"
> >
<li> <div
className="c1"
>
<div <div
className="c1 c2" className="c2 c3"
name="card" name="card"
> >
<div <div
className="c3" className="c4"
name="card-view" name="card-view"
> >
<div <div
className="c4" className="c5"
name="card-meta" name="card-meta"
> >
<div <div
className="c5" className="c6"
> >
<div <div
className="c6" className="c7"
name="card-title" name="card-title"
> >
$ $
@ -230,54 +283,54 @@ exports[`renders <Packages /> without throwing 1`] = `
per hour per hour
</div> </div>
<div <div
className="c7 c6" className="c8 c7"
name="card-subtitle" name="card-subtitle"
> >
<span <span
className="c8" className="c9"
> >
0.256 0.256
GB RAM GB RAM
</span> </span>
</div> </div>
<div <div
className="c7 c6" className="c8 c7"
name="card-subtitle" name="card-subtitle"
> >
<span <span
className="c8" className="c9"
> >
0.25 0.25
vCPUs vCPUs
</span> </span>
</div> </div>
<div <div
className="c7 c6" className="c8 c7"
name="card-subtitle" name="card-subtitle"
> >
<span <span
className="c8" className="c9"
> >
0.1 0.1
TB disk TB disk
</span> </span>
</div> </div>
<div <div
className="c7 c6" className="c8 c7"
name="card-subtitle" name="card-subtitle"
> >
<span <span
className="c8" className="c9"
> >
SSD SSD
</span> </span>
</div> </div>
<div <div
className="c9 c6" className="c10 c7"
name="card-footer" name="card-footer"
> >
<span <span
className="c10" className="c11"
> >
Compute Optimized Compute Optimized
</span> </span>
@ -286,25 +339,27 @@ exports[`renders <Packages /> without throwing 1`] = `
</div> </div>
</div> </div>
</div> </div>
</li> </div>
<li> <div
className="c1"
>
<div <div
className="c1 c2" className="c2 c3"
name="card" name="card"
> >
<div <div
className="c3" className="c4"
name="card-view" name="card-view"
> >
<div <div
className="c4" className="c5"
name="card-meta" name="card-meta"
> >
<div <div
className="c5" className="c6"
> >
<div <div
className="c6" className="c7"
name="card-title" name="card-title"
> >
$ $
@ -312,54 +367,54 @@ exports[`renders <Packages /> without throwing 1`] = `
per hour per hour
</div> </div>
<div <div
className="c7 c6" className="c8 c7"
name="card-subtitle" name="card-subtitle"
> >
<span <span
className="c8" className="c9"
> >
0.768 0.768
GB RAM GB RAM
</span> </span>
</div> </div>
<div <div
className="c7 c6" className="c8 c7"
name="card-subtitle" name="card-subtitle"
> >
<span <span
className="c8" className="c9"
> >
0.5 0.5
vCPUs vCPUs
</span> </span>
</div> </div>
<div <div
className="c7 c6" className="c8 c7"
name="card-subtitle" name="card-subtitle"
> >
<span <span
className="c8" className="c9"
> >
0.25 0.25
TB disk TB disk
</span> </span>
</div> </div>
<div <div
className="c7 c6" className="c8 c7"
name="card-subtitle" name="card-subtitle"
> >
<span <span
className="c8" className="c9"
> >
SSD SSD
</span> </span>
</div> </div>
<div <div
className="c9 c6" className="c10 c7"
name="card-footer" name="card-footer"
> >
<span <span
className="c10" className="c11"
> >
Compute Optimized Compute Optimized
</span> </span>
@ -368,25 +423,27 @@ exports[`renders <Packages /> without throwing 1`] = `
</div> </div>
</div> </div>
</div> </div>
</li> </div>
<li> <div
className="c1"
>
<div <div
className="c1 c2" className="c2 c3"
name="card" name="card"
> >
<div <div
className="c3" className="c4"
name="card-view" name="card-view"
> >
<div <div
className="c4" className="c5"
name="card-meta" name="card-meta"
> >
<div <div
className="c5" className="c6"
> >
<div <div
className="c6" className="c7"
name="card-title" name="card-title"
> >
$ $
@ -394,54 +451,54 @@ exports[`renders <Packages /> without throwing 1`] = `
per hour per hour
</div> </div>
<div <div
className="c7 c6" className="c8 c7"
name="card-subtitle" name="card-subtitle"
> >
<span <span
className="c8" className="c9"
> >
1.8 1.8
GB RAM GB RAM
</span> </span>
</div> </div>
<div <div
className="c7 c6" className="c8 c7"
name="card-subtitle" name="card-subtitle"
> >
<span <span
className="c8" className="c9"
> >
1 1
vCPUs vCPUs
</span> </span>
</div> </div>
<div <div
className="c7 c6" className="c8 c7"
name="card-subtitle" name="card-subtitle"
> >
<span <span
className="c8" className="c9"
> >
0.5 0.5
TB disk TB disk
</span> </span>
</div> </div>
<div <div
className="c7 c6" className="c8 c7"
name="card-subtitle" name="card-subtitle"
> >
<span <span
className="c8" className="c9"
> >
SSD SSD
</span> </span>
</div> </div>
<div <div
className="c9 c6" className="c10 c7"
name="card-footer" name="card-footer"
> >
<span <span
className="c10" className="c11"
> >
Compute Optimized Compute Optimized
</span> </span>
@ -450,25 +507,27 @@ exports[`renders <Packages /> without throwing 1`] = `
</div> </div>
</div> </div>
</div> </div>
</li> </div>
<li> <div
className="c1"
>
<div <div
className="c1 c2" className="c2 c3"
name="card" name="card"
> >
<div <div
className="c3" className="c4"
name="card-view" name="card-view"
> >
<div <div
className="c4" className="c5"
name="card-meta" name="card-meta"
> >
<div <div
className="c5" className="c6"
> >
<div <div
className="c6" className="c7"
name="card-title" name="card-title"
> >
$ $
@ -476,54 +535,54 @@ exports[`renders <Packages /> without throwing 1`] = `
per hour per hour
</div> </div>
<div <div
className="c7 c6" className="c8 c7"
name="card-subtitle" name="card-subtitle"
> >
<span <span
className="c8" className="c9"
> >
3.8 3.8
GB RAM GB RAM
</span> </span>
</div> </div>
<div <div
className="c7 c6" className="c8 c7"
name="card-subtitle" name="card-subtitle"
> >
<span <span
className="c8" className="c9"
> >
2 2
vCPUs vCPUs
</span> </span>
</div> </div>
<div <div
className="c7 c6" className="c8 c7"
name="card-subtitle" name="card-subtitle"
> >
<span <span
className="c8" className="c9"
> >
1 1
TB disk TB disk
</span> </span>
</div> </div>
<div <div
className="c7 c6" className="c8 c7"
name="card-subtitle" name="card-subtitle"
> >
<span <span
className="c8" className="c9"
> >
SSD SSD
</span> </span>
</div> </div>
<div <div
className="c9 c6" className="c10 c7"
name="card-footer" name="card-footer"
> >
<span <span
className="c10" className="c11"
> >
Compute Optimized Compute Optimized
</span> </span>
@ -532,25 +591,27 @@ exports[`renders <Packages /> without throwing 1`] = `
</div> </div>
</div> </div>
</div> </div>
</li> </div>
<li> <div
className="c1"
>
<div <div
className="c1 c2" className="c2 c3"
name="card" name="card"
> >
<div <div
className="c3" className="c4"
name="card-view" name="card-view"
> >
<div <div
className="c4" className="c5"
name="card-meta" name="card-meta"
> >
<div <div
className="c5" className="c6"
> >
<div <div
className="c6" className="c7"
name="card-title" name="card-title"
> >
$ $
@ -558,54 +619,54 @@ exports[`renders <Packages /> without throwing 1`] = `
per hour per hour
</div> </div>
<div <div
className="c7 c6" className="c8 c7"
name="card-subtitle" name="card-subtitle"
> >
<span <span
className="c8" className="c9"
> >
7.8 7.8
GB RAM GB RAM
</span> </span>
</div> </div>
<div <div
className="c7 c6" className="c8 c7"
name="card-subtitle" name="card-subtitle"
> >
<span <span
className="c8" className="c9"
> >
4 4
vCPUs vCPUs
</span> </span>
</div> </div>
<div <div
className="c7 c6" className="c8 c7"
name="card-subtitle" name="card-subtitle"
> >
<span <span
className="c8" className="c9"
> >
2 2
TB disk TB disk
</span> </span>
</div> </div>
<div <div
className="c7 c6" className="c8 c7"
name="card-subtitle" name="card-subtitle"
> >
<span <span
className="c8" className="c9"
> >
SSD SSD
</span> </span>
</div> </div>
<div <div
className="c9 c6" className="c10 c7"
name="card-footer" name="card-footer"
> >
<span <span
className="c10" className="c11"
> >
Compute Optimized Compute Optimized
</span> </span>
@ -614,25 +675,27 @@ exports[`renders <Packages /> without throwing 1`] = `
</div> </div>
</div> </div>
</div> </div>
</li> </div>
<li> <div
className="c1"
>
<div <div
className="c1 c2" className="c2 c3"
name="card" name="card"
> >
<div <div
className="c3" className="c4"
name="card-view" name="card-view"
> >
<div <div
className="c4" className="c5"
name="card-meta" name="card-meta"
> >
<div <div
className="c5" className="c6"
> >
<div <div
className="c6" className="c7"
name="card-title" name="card-title"
> >
$ $
@ -640,54 +703,54 @@ exports[`renders <Packages /> without throwing 1`] = `
per hour per hour
</div> </div>
<div <div
className="c7 c6" className="c8 c7"
name="card-subtitle" name="card-subtitle"
> >
<span <span
className="c8" className="c9"
> >
15.8 15.8
GB RAM GB RAM
</span> </span>
</div> </div>
<div <div
className="c7 c6" className="c8 c7"
name="card-subtitle" name="card-subtitle"
> >
<span <span
className="c8" className="c9"
> >
8 8
vCPUs vCPUs
</span> </span>
</div> </div>
<div <div
className="c7 c6" className="c8 c7"
name="card-subtitle" name="card-subtitle"
> >
<span <span
className="c8" className="c9"
> >
4 4
TB disk TB disk
</span> </span>
</div> </div>
<div <div
className="c7 c6" className="c8 c7"
name="card-subtitle" name="card-subtitle"
> >
<span <span
className="c8" className="c9"
> >
SSD SSD
</span> </span>
</div> </div>
<div <div
className="c9 c6" className="c10 c7"
name="card-footer" name="card-footer"
> >
<span <span
className="c10" className="c11"
> >
Compute Optimized Compute Optimized
</span> </span>
@ -696,6 +759,6 @@ exports[`renders <Packages /> without throwing 1`] = `
</div> </div>
</div> </div>
</div> </div>
</li> </div>
</ul> </ul>
`; `;

17
packages/my-joyent/src/components/packages/list.js
View File

@ -1,24 +1,31 @@
import React from 'react'; import React from 'react';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import styled from 'styled-components'; import styled from 'styled-components';
import { Col } from 'react-styled-flexboxgrid';
import Package from '@components/package'; import Package from '@components/package';
const ListStyled = styled.ul` const ListStyled = styled.ul`
display: flex; display: flex;
width: 100%; min-width: 100%;
list-style: none; list-style: none;
padding: 0; padding: 0;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: ${remcalc(36)}; margin-top: ${remcalc(36)};
margin-right: -0.5rem;
margin-left: -0.5rem;
`; `;
const Packages = ({ packages }) => ( const Packages = ({ packages }) => (
<ListStyled> <ListStyled>
{packages.length > 0 ? packages.map(pack => ( {packages.length > 0 ? (
<li key={pack.name}> packages.map(pack => (
<Col xs={12} sm={6} md={4} lg={3} key={pack.name}>
<Package pack={pack} /> <Package pack={pack} />
</li> </Col>
)) : 'There are no packages that meet your criteria'} ))
) : (
'There are no packages that meet your criteria'
)}
</ListStyled> </ListStyled>
); );

729
packages/my-joyent/src/containers/home/__tests__/__snapshots__/index.spec.js.snap
View File

File diff suppressed because it is too large Load Diff

725
packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap
View File

File diff suppressed because it is too large Load Diff

16
packages/ui-toolkit/src/button/index.js
View File

@ -101,15 +101,25 @@ const style = css`
&:active, &:active,
&:active:hover, &:active:hover,
&:active:focus { &:active:focus {
background-color: ${props => props.theme.tertiaryActive}; color: ${props => props.theme.tertiary};
color: ${props => props.theme.tertiaryActiveColor}; background-color: ${props => props.theme.background};
border-color: ${props => props.theme.tertiaryActiveColor}; border-color: ${props => props.theme.grey};
} }
`} ${is('tertiary', 'selected')` `} ${is('tertiary', 'selected')`
background-color: ${props => props.theme.tertiaryActive}; background-color: ${props => props.theme.tertiaryActive};
color: ${props => props.theme.tertiaryActiveColor}; color: ${props => props.theme.tertiaryActiveColor};
border-color: ${props => props.theme.tertiaryActiveColor}; border-color: ${props => props.theme.tertiaryActiveColor};
&:focus,
&:hover,
&:active,
&:active:hover,
&:active:focus {
background-color: ${props => props.theme.tertiaryActive};
color: ${props => props.theme.tertiaryActiveColor};
border-color: ${props => props.theme.tertiaryActiveColor};
}
`}; `};
${is('disabled')` ${is('disabled')`
color: ${props => props.theme.grey}; color: ${props => props.theme.grey};

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

@ -41,7 +41,7 @@ const StyledCard = Row.extend`
background: ${props => props.theme.background}; background: ${props => props.theme.background};
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05); box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05);
min-height: ${remcalc(185)}; min-height: ${remcalc(185)};
min-width: 237px; min-width: 292px;
`}; `};
${is('stacked')` ${is('stacked')`