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

feat(my-joyent): process packages in redux

This commit is contained in:
Sara Vieira 2017-09-14 13:55:31 +01:00 committed by Sérgio Ramos
parent 884db125e0
commit 1e881f3148
13 changed files with 29685 additions and 2026 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/my-joyent/src/components/home/home.js
View File

@ -24,7 +24,7 @@ class Home extends Component {
}
changeValue(key, value) {
const filters = this.props.filters;
const { filters } = this.props;
this.props.onFilterChange({
...filters,
[key]: value

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

@ -0,0 +1,990 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <Package /> without throwing 1`] = `
.c2 {
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;
}
.c4 {
font-size: 0.9375rem;
line-height: 1.5;
color: ;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 600;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-flex-grow: 2;
-ms-flex-grow: 2;
flex-grow: 2;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;
width: 100%;
padding: 0.75rem 1.125rem 0 1.125rem;
}
.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;
position: relative;
height: auto;
min-height: 7.875rem;
margin-bottom: 0.625rem;
border: 0.0625rem solid;
background-color: ;
box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin-right: 0rem;
margin-left: 0rem;
border-radius: 0.25rem background: border:1px solid;
background: ;
box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
min-height: 11.5625rem;
min-width: 200px;
}
.c1 {
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;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin: 0;
height: auto;
padding-top: 0;
min-width: auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.c3 {
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;
display: block;
height: 100%;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.c6 {
display: inline-block;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-style: normal;
font-stretch: normal;
font-size: 0.875rem;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.c5 {
display: inline-block;
padding: 0 1.125rem;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
}
.c7 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;
}
.c8 {
display: inline-block;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.8125rem;
font-weight: 500;
text-transform: uppercase;
color: rgba(73,73,73,0.5);
}
@media only screen and (min-width:0em) {
.c2 {
-webkit-flex-basis: 50%;
-ms-flex-basis: 50%;
flex-basis: 50%;
max-width: 50%;
display: block;
}
}
<div
className="c0"
name="card"
>
.c1 {
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;
}
.c3 {
font-size: 0.9375rem;
line-height: 1.5;
color: ;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 600;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-flex-grow: 2;
-ms-flex-grow: 2;
flex-grow: 2;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;
width: 100%;
padding: 0.75rem 1.125rem 0 1.125rem;
}
.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;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin: 0;
height: auto;
padding-top: 0;
min-width: auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.c2 {
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;
display: block;
height: 100%;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.c5 {
display: inline-block;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-style: normal;
font-stretch: normal;
font-size: 0.875rem;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.c4 {
display: inline-block;
padding: 0 1.125rem;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
}
.c6 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;
}
.c7 {
display: inline-block;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.8125rem;
font-weight: 500;
text-transform: uppercase;
color: rgba(73,73,73,0.5);
}
@media only screen and (min-width:0em) {
.c1 {
-webkit-flex-basis: 50%;
-ms-flex-basis: 50%;
flex-basis: 50%;
max-width: 50%;
display: block;
}
}
<div
className="c0"
name="card-view"
>
.c0 {
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;
}
.c2 {
font-size: 0.9375rem;
line-height: 1.5;
color: ;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 600;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-flex-grow: 2;
-ms-flex-grow: 2;
flex-grow: 2;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;
width: 100%;
padding: 0.75rem 1.125rem 0 1.125rem;
}
.c1 {
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;
display: block;
height: 100%;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.c4 {
display: inline-block;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-style: normal;
font-stretch: normal;
font-size: 0.875rem;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.c3 {
display: inline-block;
padding: 0 1.125rem;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
}
.c5 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;
}
.c6 {
display: inline-block;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.8125rem;
font-weight: 500;
text-transform: uppercase;
color: rgba(73,73,73,0.5);
}
@media only screen and (min-width:0em) {
.c0 {
-webkit-flex-basis: 50%;
-ms-flex-basis: 50%;
flex-basis: 50%;
max-width: 50%;
display: block;
}
}
<div
className="c0"
name="card-meta"
>
.c1 {
font-size: 0.9375rem;
line-height: 1.5;
color: ;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 600;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-flex-grow: 2;
-ms-flex-grow: 2;
flex-grow: 2;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;
width: 100%;
padding: 0.75rem 1.125rem 0 1.125rem;
}
.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;
display: block;
height: 100%;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.c3 {
display: inline-block;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-style: normal;
font-stretch: normal;
font-size: 0.875rem;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.c2 {
display: inline-block;
padding: 0 1.125rem;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
}
.c4 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;
}
.c5 {
display: inline-block;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.8125rem;
font-weight: 500;
text-transform: uppercase;
color: rgba(73,73,73,0.5);
}
<div
className="c0"
>
.c0 {
font-size: 0.9375rem;
line-height: 1.5;
color: ;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 600;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-flex-grow: 2;
-ms-flex-grow: 2;
flex-grow: 2;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;
width: 100%;
padding: 0.75rem 1.125rem 0 1.125rem;
}
<div
className="c0"
name="card-title"
>
$
0.263
per hour
</div>
.c1 {
font-size: 0.9375rem;
line-height: 1.5;
color: ;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 600;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-flex-grow: 2;
-ms-flex-grow: 2;
flex-grow: 2;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;
width: 100%;
padding: 0.75rem 1.125rem 0 1.125rem;
}
.c2 {
display: inline-block;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-style: normal;
font-stretch: normal;
font-size: 0.875rem;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.c0 {
display: inline-block;
padding: 0 1.125rem;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
}
<div
className="c0 c1"
name="card-subtitle"
>
.c0 {
display: inline-block;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-style: normal;
font-stretch: normal;
font-size: 0.875rem;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
<span
className="c0"
>
7.8
GB RAM
</span>
</div>
.c1 {
font-size: 0.9375rem;
line-height: 1.5;
color: ;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 600;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-flex-grow: 2;
-ms-flex-grow: 2;
flex-grow: 2;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;
width: 100%;
padding: 0.75rem 1.125rem 0 1.125rem;
}
.c2 {
display: inline-block;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-style: normal;
font-stretch: normal;
font-size: 0.875rem;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.c0 {
display: inline-block;
padding: 0 1.125rem;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
}
<div
className="c0 c1"
name="card-subtitle"
>
.c0 {
display: inline-block;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-style: normal;
font-stretch: normal;
font-size: 0.875rem;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
<span
className="c0"
>
4
vCPUs
</span>
</div>
.c1 {
font-size: 0.9375rem;
line-height: 1.5;
color: ;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 600;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-flex-grow: 2;
-ms-flex-grow: 2;
flex-grow: 2;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;
width: 100%;
padding: 0.75rem 1.125rem 0 1.125rem;
}
.c2 {
display: inline-block;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-style: normal;
font-stretch: normal;
font-size: 0.875rem;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.c0 {
display: inline-block;
padding: 0 1.125rem;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
}
<div
className="c0 c1"
name="card-subtitle"
>
.c0 {
display: inline-block;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-style: normal;
font-stretch: normal;
font-size: 0.875rem;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
<span
className="c0"
>
2
TB disk
</span>
</div>
.c1 {
font-size: 0.9375rem;
line-height: 1.5;
color: ;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 600;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-flex-grow: 2;
-ms-flex-grow: 2;
flex-grow: 2;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;
width: 100%;
padding: 0.75rem 1.125rem 0 1.125rem;
}
.c2 {
display: inline-block;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-style: normal;
font-stretch: normal;
font-size: 0.875rem;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.c0 {
display: inline-block;
padding: 0 1.125rem;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
}
<div
className="c0 c1"
name="card-subtitle"
>
.c0 {
display: inline-block;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-style: normal;
font-stretch: normal;
font-size: 0.875rem;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
<span
className="c0"
>
SSD
</span>
</div>
.c1 {
font-size: 0.9375rem;
line-height: 1.5;
color: ;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 600;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-flex-grow: 2;
-ms-flex-grow: 2;
flex-grow: 2;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;
width: 100%;
padding: 0.75rem 1.125rem 0 1.125rem;
}
.c0 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;
}
.c2 {
display: inline-block;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.8125rem;
font-weight: 500;
text-transform: uppercase;
color: rgba(73,73,73,0.5);
}
<div
className="c0 c1"
name="card-footer"
>
.c0 {
display: inline-block;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.8125rem;
font-weight: 500;
text-transform: uppercase;
color: rgba(73,73,73,0.5);
}
<span
className="c0"
>
Compute Optimized
</span>
</div>
</div>
</div>
</div>
</div>
`;

30
packages/my-joyent/src/components/package/__tests__/index.spec.js Normal file
View File

@ -0,0 +1,30 @@
/**
* @jest-environment jsdom
*/
import React from 'react';
import renderer from 'react-test-renderer';
import 'jest-styled-components';
import { Router } from '@mocks/';
import Package from '../';
const pack = {
disk: 200,
group: 'Compute Optimized',
memory: 7.8,
name: 'High CPU 7.75',
price: '0.263',
vcpus: 4
};
it('renders <Package /> without throwing', () => {
const tree = renderer
.create(
<Router>
<Package pack={pack} />
</Router>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

27
packages/my-joyent/src/components/package/index.js Normal file
View File

@ -0,0 +1,27 @@
import React from 'react';
import {
Card,
CardSubTitle,
CardTitle,
CardView,
CardFooter,
CardMeta
} from 'joyent-ui-toolkit';
const Package = ({ pack: { price, memory, vcpus, disk, group } }) => (
<Card transparent>
<CardView>
<CardMeta>
<CardTitle>${price} per hour</CardTitle>
<CardSubTitle>{memory} GB RAM</CardSubTitle>
<CardSubTitle>{vcpus} vCPUs</CardSubTitle>
<CardSubTitle>{disk / 100} TB disk</CardSubTitle>
<CardSubTitle>SSD</CardSubTitle>
<CardFooter>{group}</CardFooter>
</CardMeta>
</CardView>
</Card>
);
export default Package;

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

File diff suppressed because it is too large Load Diff

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

@ -1,14 +1,8 @@
import React, { Component } from 'react';
import React from 'react';
import remcalc from 'remcalc';
import styled from 'styled-components';
import {
Card,
CardSubTitle,
CardTitle,
CardView,
CardFooter,
CardMeta
} from 'joyent-ui-toolkit';
import Package from '@components/package';
const ListStyled = styled.ul`
display: flex;
@ -19,62 +13,14 @@ const ListStyled = styled.ul`
justify-content: space-between;
margin-top: ${remcalc(36)};
`;
class Packages extends Component {
constructor(props) {
super(props);
const { filters: { ram, cpu, cost, disk }, packages } = props;
this.state = {
ram,
cpu,
cost,
disk,
packages
};
}
componentWillReceiveProps(nextProps) {
const { filters: { ram, cpu, cost, disk }, packages } = nextProps;
this.setState({
ram,
cpu,
cost,
disk,
packages: packages
.filter(pack => pack.memory >= ram.min && pack.memory <= ram.max)
.filter(
pack => pack.disk / 1000 >= disk.min && pack.disk / 1000 <= disk.max
)
.filter(pack => pack.vcpus >= cpu.min && pack.vcpus <= cpu.max)
.filter(pack => pack.price >= cost.min && pack.price <= cost.max)
});
}
_packages() {
return (
<ListStyled>
{this.state.packages.map(pack => (
<li>
<Card transparent>
<CardView>
<CardMeta>
<CardTitle>${pack.price} per hour</CardTitle>
<CardSubTitle>{pack.memory} GB RAM</CardSubTitle>
<CardSubTitle>{pack.vcpus} vCPUs</CardSubTitle>
<CardSubTitle>{pack.disk / 100} TB disk</CardSubTitle>
<CardSubTitle>SSD</CardSubTitle>
<CardFooter>{pack.group}</CardFooter>
</CardMeta>
</CardView>
</Card>
</li>
))}
</ListStyled>
);
}
render() {
return this._packages();
}
}
const Packages = ({ packages }) => (
<ListStyled>
{packages.map(pack => (
<li key={pack.name}>
<Package pack={pack} />
</li>
))}
</ListStyled>
);
export default Packages;

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

File diff suppressed because it is too large Load Diff

2
packages/my-joyent/src/containers/home/index.js
View File

@ -12,7 +12,7 @@ const HomeHOC = ({ filters, onFilterChange }) => (
const mapStateToProps = state => {
return {
filters: state.filters
filters: state.app.filters
};
};

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

File diff suppressed because it is too large Load Diff

6
packages/my-joyent/src/containers/packages/index.js
View File

@ -3,10 +3,9 @@ import { connect } from 'react-redux';
// import { graphql } from 'react-apollo';
import { Packages } from '@components/packages';
// import packagesQuery from '@graphql/packages.gql';
import data from '../../data/packages';
const PackagesHOC = ({ packages, filters }) => (
<Packages packages={data} filters={filters} />
<Packages packages={packages} filters={filters} />
);
// const PackagesHOCWithData = graphql(packagesQuery, {
@ -18,7 +17,8 @@ const PackagesHOC = ({ packages, filters }) => (
const mapStateToProps = state => {
return {
filters: state.filters
packages: state.app.packages,
filters: state.app.filters
};
};

27
packages/my-joyent/src/state/filterReducer.js
View File

@ -1,9 +1,32 @@
const filterReducer = (state = [], action) => {
import { default as defaultState } from './state';
const filterReducer = (state = defaultState, action) => {
switch (action.type) {
case 'CHANGE_FILTERS':
console.log(state);
return {
...state,
...action.filters
...action.filters,
packages: defaultState.packages
.filter(
pack =>
pack.memory >= action.filters.ram.min &&
pack.memory <= action.filters.ram.max
)
.filter(
pack =>
pack.disk / 1000 >= action.filters.disk.min &&
pack.disk / 1000 <= action.filters.disk.max
)
.filter(
pack =>
pack.vcpus >= action.filters.cpu.min &&
pack.vcpus <= action.filters.cpu.max
)
.filter(
pack =>
pack.price >= action.filters.cost.min &&
pack.price <= action.filters.cost.max
)
};
default:
return state;

5
packages/my-joyent/src/state/state.js
View File

@ -1,10 +1,13 @@
import packages from '../data/packages';
const state = {
filters: {
cpu: { min: 0.25, max: 8 },
cost: { min: 0.016, max: 2.131 },
ram: { min: 0.256, max: 63.8 },
disk: { min: 0.01, max: 4.9 }
}
},
packages
};
export default state;

2
packages/my-joyent/src/state/store.js
View File

@ -46,7 +46,7 @@ export const store = createStore(
combineReducers({
apollo: client.reducer(),
form: formReducer,
filters: filterReducer
app: filterReducer
}),
state, // Initial state
compose(