feat(my-joyent): add group filtering

This commit is contained in:
Sara Vieira 2017-09-14 17:50:22 +01:00 committed by Sérgio Ramos
parent c234b70bf7
commit 5b1059882b
26 changed files with 2266 additions and 51885 deletions

15
.vscode/launch.json vendored Normal file
View File

@ -0,0 +1,15 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3069/",
"webRoot": "${workspaceRoot}"
}
]
}

View File

@ -6,6 +6,7 @@
// temp
"no-undef": 1,
"no-debugger": 1,
"no-negated-condition": 0
"no-negated-condition": 0,
"jsx-a11y/href-no-hash": 0
}
}

View File

@ -5,20 +5,17 @@
"repository": "github:yldio/joyent-portal",
"main": "build/",
"scripts": {
"dev":
"REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http react-scripts start",
"dev": "REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http react-scripts start",
"start": "PORT=3069 react-scripts start",
"build": "NODE_ENV=production react-scripts build",
"lint:css": "stylelint './src/**/*.js'",
"lint:js": "eslint . --fix",
"lint": "redrun -s lint:*",
"lint-ci:css": "stylelint './src/**/*.js'",
"lint-ci:js":
"eslint . --format junit --output-file $CIRCLE_TEST_REPORTS/lint/cp-frontend.xml",
"lint-ci:js": "eslint . --format junit --output-file $CIRCLE_TEST_REPORTS/lint/cp-frontend.xml",
"lint-ci": "redrun -p lint-ci:*",
"test": "NODE_ENV=test ./test/run --env=jsdom",
"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'))\")`",
"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'))\")`",
"prepublish": "node scripts/postinstall"
},
"dependencies": {
@ -26,6 +23,7 @@
"graphql-tag": "^2.4.2",
"jest-cli": "^21.0.1",
"joyent-ui-toolkit": "^2.0.0",
"lodash.isequal": "^4.5.0",
"normalized-styled-components": "^1.0.9",
"prop-types": "^15.5.10",
"react": "^15.6.1",

View File

@ -1,13 +1,179 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <Filters /> without throwing 1`] = `
.c0 {
.c6 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0;
overflow: visible;
text-transform: none;
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
min-width: 7.5rem;
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;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0;
padding: 0.9375rem 1.125rem;
position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border-radius: 0.25rem;
border: solid 0.0625rem;
font-weight: 600;
padding: 0.5625rem 1.125rem;
font-weight: 600;
}
.c6::-moz-focus-inner,
.c6[type='button']::-moz-focus-inner,
.c6[type='reset']::-moz-focus-inner,
.c6[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c6:-moz-focusring,
.c6[type='button']:-moz-focusring,
.c6[type='reset']:-moz-focusring,
.c6[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c6:focus {
outline: 0;
text-decoration: none;
}
.c6:hover {
border: solid 0.0625rem;
}
.c6:active,
.c6:active:hover,
.c6:active:focus {
background-image: none;
outline: 0;
}
.c6[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c6 + button {
margin-left: 1.25rem;
}
.c7 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0;
overflow: visible;
text-transform: none;
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
min-width: 7.5rem;
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0;
padding: 0.9375rem 1.125rem;
position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border-radius: 0.25rem;
border: solid 0.0625rem;
padding: 0.5625rem 1.125rem;
font-weight: 600;
}
.c7::-moz-focus-inner,
.c7[type='button']::-moz-focus-inner,
.c7[type='reset']::-moz-focus-inner,
.c7[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c7:-moz-focusring,
.c7[type='button']:-moz-focusring,
.c7[type='reset']:-moz-focusring,
.c7[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c7:focus {
outline: 0;
text-decoration: none;
}
.c7:hover {
border: solid 0.0625rem;
}
.c7:active,
.c7:active:hover,
.c7:active:focus {
background-image: none;
outline: 0;
}
.c7[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c7 + button {
margin-left: 1.25rem;
}
.c1 {
@ -17,7 +183,6 @@ exports[`renders <Filters /> without throwing 1`] = `
font-style: normal;
font-stretch: normal;
display: block;
color: ;
margin-right: 0.75rem;
font-weight: bold;
}
@ -114,7 +279,6 @@ exports[`renders <Filters /> without throwing 1`] = `
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
}
.c2 > div {
@ -127,278 +291,40 @@ exports[`renders <Filters /> without throwing 1`] = `
margin-right: 2.25rem;
}
@media only screen and (min-width:0em) {
.c0 {
-webkit-flex-basis: 100%;
-ms-flex-basis: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
<div
className="c0"
>
.c0 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: ;
margin-right: 0.75rem;
font-weight: bold;
}
<label
className="c0"
htmlFor=""
>
Choose a package
</label>
.c3 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: ;
margin-right: 0.75rem;
font-weight: bold;
}
.c1 .input-range {
position: relative;
width: calc(100% - 18px);
margin: auto;
min-height: 0.625rem;
}
.c1 .slider {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #FFFFFF;
border: 2px solid #bdbdbd;
border-radius: 50%;
cursor: pointer;
display: block;
height: 0.875rem;
width: 0.875rem;
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
outline: none;
position: absolute;
top: 50%;
margin-top: 0.125rem;
}
.c1 .slider::active {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
.c1 .slider::focus {
box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
}
.c1 .disabled .track {
background: #D8D8D8;
}
.c1 .disabled .slider {
background: #CCC;
border: 1px solid #CCC;
box-shadow: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.c1 .min,
.c1 .max {
display: none;
}
.c1 .value {
top: 0.5rem;
position: absolute;
}
.c1 .value .label-container {
font-weight: 600;
font-size: 0.625rem;
color: #464646;
left: -50%;
position: relative;
}
.c1 .track {
background: #D8D8D8;
cursor: pointer;
display: block;
height: 0.25rem;
position: relative;
}
.c1 .active-track {
background: #364ACD;
height: 100%;
position: absolute;
}
.c2 {
margin-bottom: 0.625rem;
margin-top: 0.75rem;
}
.c0 {
.c5 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
margin-top: 2.25rem;
}
.c0 > div {
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
}
.c0 > div:not(:last-child) {
margin-right: 2.25rem;
.c0 {
width: 100%;
}
<section
className="c0"
>
.c2 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: ;
margin-right: 0.75rem;
font-weight: bold;
}
.c0 .input-range {
position: relative;
width: calc(100% - 18px);
margin: auto;
min-height: 0.625rem;
}
.c0 .slider {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #FFFFFF;
border: 2px solid #bdbdbd;
border-radius: 50%;
cursor: pointer;
display: block;
height: 0.875rem;
width: 0.875rem;
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
outline: none;
position: absolute;
top: 50%;
margin-top: 0.125rem;
}
.c0 .slider::active {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
.c0 .slider::focus {
box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
}
.c0 .disabled .track {
background: #D8D8D8;
}
.c0 .disabled .slider {
background: #CCC;
border: 1px solid #CCC;
box-shadow: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.c0 .min,
.c0 .max {
display: none;
}
.c0 .value {
top: 0.5rem;
position: absolute;
}
.c0 .value .label-container {
font-weight: 600;
font-size: 0.625rem;
color: #464646;
left: -50%;
position: relative;
}
.c0 .track {
background: #D8D8D8;
cursor: pointer;
display: block;
height: 0.25rem;
position: relative;
}
.c0 .active-track {
background: #364ACD;
height: 100%;
position: absolute;
}
.c1 {
margin-bottom: 0.625rem;
margin-top: 0.75rem;
}
<div
className="c0"
>
.c1 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: ;
margin-right: 0.75rem;
font-weight: bold;
}
.c0 {
margin-bottom: 0.625rem;
margin-top: 0.75rem;
}
<label
className="c0 c1"
className="c1"
htmlFor=""
>
Choose a package
</label>
<section
className="c2"
>
<div
className="c3"
>
<label
className="c4 c1"
htmlFor=""
>
GB RAM
@ -512,127 +438,11 @@ exports[`renders <Filters /> without throwing 1`] = `
</span>
</div>
</div>
.c2 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: ;
margin-right: 0.75rem;
font-weight: bold;
}
.c0 .input-range {
position: relative;
width: calc(100% - 18px);
margin: auto;
min-height: 0.625rem;
}
.c0 .slider {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #FFFFFF;
border: 2px solid #bdbdbd;
border-radius: 50%;
cursor: pointer;
display: block;
height: 0.875rem;
width: 0.875rem;
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
outline: none;
position: absolute;
top: 50%;
margin-top: 0.125rem;
}
.c0 .slider::active {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
.c0 .slider::focus {
box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
}
.c0 .disabled .track {
background: #D8D8D8;
}
.c0 .disabled .slider {
background: #CCC;
border: 1px solid #CCC;
box-shadow: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.c0 .min,
.c0 .max {
display: none;
}
.c0 .value {
top: 0.5rem;
position: absolute;
}
.c0 .value .label-container {
font-weight: 600;
font-size: 0.625rem;
color: #464646;
left: -50%;
position: relative;
}
.c0 .track {
background: #D8D8D8;
cursor: pointer;
display: block;
height: 0.25rem;
position: relative;
}
.c0 .active-track {
background: #364ACD;
height: 100%;
position: absolute;
}
.c1 {
margin-bottom: 0.625rem;
margin-top: 0.75rem;
}
<div
className="c0"
className="c3"
>
.c1 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: ;
margin-right: 0.75rem;
font-weight: bold;
}
.c0 {
margin-bottom: 0.625rem;
margin-top: 0.75rem;
}
<label
className="c0 c1"
className="c4 c1"
htmlFor=""
>
vCPUs
@ -746,127 +556,11 @@ exports[`renders <Filters /> without throwing 1`] = `
</span>
</div>
</div>
.c2 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: ;
margin-right: 0.75rem;
font-weight: bold;
}
.c0 .input-range {
position: relative;
width: calc(100% - 18px);
margin: auto;
min-height: 0.625rem;
}
.c0 .slider {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #FFFFFF;
border: 2px solid #bdbdbd;
border-radius: 50%;
cursor: pointer;
display: block;
height: 0.875rem;
width: 0.875rem;
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
outline: none;
position: absolute;
top: 50%;
margin-top: 0.125rem;
}
.c0 .slider::active {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
.c0 .slider::focus {
box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
}
.c0 .disabled .track {
background: #D8D8D8;
}
.c0 .disabled .slider {
background: #CCC;
border: 1px solid #CCC;
box-shadow: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.c0 .min,
.c0 .max {
display: none;
}
.c0 .value {
top: 0.5rem;
position: absolute;
}
.c0 .value .label-container {
font-weight: 600;
font-size: 0.625rem;
color: #464646;
left: -50%;
position: relative;
}
.c0 .track {
background: #D8D8D8;
cursor: pointer;
display: block;
height: 0.25rem;
position: relative;
}
.c0 .active-track {
background: #364ACD;
height: 100%;
position: absolute;
}
.c1 {
margin-bottom: 0.625rem;
margin-top: 0.75rem;
}
<div
className="c0"
className="c3"
>
.c1 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: ;
margin-right: 0.75rem;
font-weight: bold;
}
.c0 {
margin-bottom: 0.625rem;
margin-top: 0.75rem;
}
<label
className="c0 c1"
className="c4 c1"
htmlFor=""
>
TB Disk
@ -980,127 +674,11 @@ exports[`renders <Filters /> without throwing 1`] = `
</span>
</div>
</div>
.c2 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: ;
margin-right: 0.75rem;
font-weight: bold;
}
.c0 .input-range {
position: relative;
width: calc(100% - 18px);
margin: auto;
min-height: 0.625rem;
}
.c0 .slider {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #FFFFFF;
border: 2px solid #bdbdbd;
border-radius: 50%;
cursor: pointer;
display: block;
height: 0.875rem;
width: 0.875rem;
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
outline: none;
position: absolute;
top: 50%;
margin-top: 0.125rem;
}
.c0 .slider::active {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
.c0 .slider::focus {
box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
}
.c0 .disabled .track {
background: #D8D8D8;
}
.c0 .disabled .slider {
background: #CCC;
border: 1px solid #CCC;
box-shadow: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.c0 .min,
.c0 .max {
display: none;
}
.c0 .value {
top: 0.5rem;
position: absolute;
}
.c0 .value .label-container {
font-weight: 600;
font-size: 0.625rem;
color: #464646;
left: -50%;
position: relative;
}
.c0 .track {
background: #D8D8D8;
cursor: pointer;
display: block;
height: 0.25rem;
position: relative;
}
.c0 .active-track {
background: #364ACD;
height: 100%;
position: absolute;
}
.c1 {
margin-bottom: 0.625rem;
margin-top: 0.75rem;
}
<div
className="c0"
className="c3"
>
.c1 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: ;
margin-right: 0.75rem;
font-weight: bold;
}
.c0 {
margin-bottom: 0.625rem;
margin-top: 0.75rem;
}
<label
className="c0 c1"
className="c4 c1"
htmlFor=""
>
$/hr
@ -1215,5 +793,46 @@ exports[`renders <Filters /> without throwing 1`] = `
</div>
</div>
</section>
<section
className="c5"
>
<div>
<button
className="c6"
onClick={[Function]}
selected={false}
>
Compute Optimized
</button>
<button
className="c6"
onClick={[Function]}
selected={false}
>
Memory Optimized
</button>
<button
className="c6"
onClick={[Function]}
selected={false}
>
General Purpose
</button>
<button
className="c6"
onClick={[Function]}
selected={false}
>
Storage Optimized
</button>
</div>
<button
className="c7"
disabled={false}
onClick={undefined}
>
Reset Filters
</button>
</section>
</section>
`;

View File

@ -1,72 +1,66 @@
import React from 'react';
import { Col } from 'react-styled-flexboxgrid';
import styled from 'styled-components';
import remcalc from 'remcalc';
import { Slider, FormLabel } from 'joyent-ui-toolkit';
import isEqual from 'lodash.isequal';
import { FormLabel, Button } from 'joyent-ui-toolkit';
import { default as defaultState } from '@state/state';
const FilterWrapper = styled.section`
import Sliders from '@components/sliders';
const GroupWrapper = styled.section`
display: flex;
justify-content: space-between;
width: 100%;
margin-top: ${remcalc(36)};
`;
> div {
flex-grow: 1;
&:not(:last-child) {
margin-right: ${remcalc(36)};
}
}
const Wrapper = styled.section`
/* Comment for prettier */
width: 100%;
`;
const Filters = ({
filters: { cpu, cost, ram, disk },
filters,
ramSliderChange,
cpuSliderChange,
diskSliderChange,
costSliderChange
}) => {
return (
<Col xs={12}>
costSliderChange,
groupChange,
filterReset
}) => (
<Wrapper>
<FormLabel>Choose a package</FormLabel>
<FilterWrapper>
<Slider
minValue={ram.min}
maxValue={ram.max}
step={0.256}
value={ram}
onChangeComplete={value => ramSliderChange(value)}
<Sliders
filters={filters}
ramSliderChange={ramSliderChange}
cpuSliderChange={cpuSliderChange}
diskSliderChange={diskSliderChange}
costSliderChange={costSliderChange}
/>
<GroupWrapper>
<div>
{filters.groups.map(group => (
<Button
key={group.name}
tertiary
small
selected={group.selected}
onClick={() => groupChange(group)}
>
GB RAM
</Slider>
<Slider
minValue={cpu.min}
maxValue={cpu.max}
step={0.25}
value={cpu}
onChangeComplete={value => cpuSliderChange(value)}
{group.name}
</Button>
))}
</div>
<Button
disabled={isEqual(filters,defaultState.filters)}
secondary
small
onClick={filterReset}
>
vCPUs
</Slider>
<Slider
minValue={disk.min}
maxValue={disk.max}
step={0.01}
value={disk}
onChangeComplete={value => diskSliderChange(value)}
>
TB Disk
</Slider>
<Slider
minValue={cost.min}
maxValue={cost.max}
step={0.02}
value={cost}
onChangeComplete={value => costSliderChange(value)}
>
$/hr
</Slider>
</FilterWrapper>
</Col>
Reset Filters
</Button>
</GroupWrapper>
</Wrapper>
);
};
export default Filters;

View File

@ -17,6 +17,24 @@ exports[`renders <Home /> without throwing 1`] = `
"max": 107.26,
"min": 0.01,
},
"groups": Array [
Object {
"name": "Compute Optimized",
"selected": false,
},
Object {
"name": "Memory Optimized",
"selected": false,
},
Object {
"name": "General Purpose",
"selected": false,
},
Object {
"name": "Storage Optimized",
"selected": false,
},
],
"ram": Object {
"max": 50.688,
"min": 0.256,

View File

@ -15,6 +15,7 @@ class Home extends Component {
this.closeMessage = this.closeMessage.bind(this);
this.changeValue = this.changeValue.bind(this);
this.changeGroup = this.changeGroup.bind(this);
}
closeMessage() {
@ -24,26 +25,37 @@ class Home extends Component {
}
changeValue(key, value) {
const { filters } = this.props;
this.props.onFilterChange({
const { filters, onFilterChange } = this.props;
onFilterChange({
...filters,
[key]: value
});
}
changeGroup(group) {
const { filters, onFilterChange } = this.props;
const otherGroups = filters.groups.filter(g => g.name !== group.name);
onFilterChange({
...filters,
groups: [
...otherGroups,
{ name: group.name, selected: !group.selected }
]
});
}
render() {
const { showMessage } = this.state;
const { filters } = this.props;
const { filters, onFilterReset } = this.props;
const _msg = 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>
Make sure that you choose the data center that suits your requirements.{' '}
<Anchor href="#">Learn More</Anchor>
</Message>
) : null;
@ -58,6 +70,8 @@ class Home extends Component {
<Row>
<Filters
filters={filters}
filterReset={onFilterReset}
groupChange={group => this.changeGroup(group)}
ramSliderChange={value => this.changeValue('ram', value)}
cpuSliderChange={value => this.changeValue('cpu', value)}
diskSliderChange={value => this.changeValue('disk', value)}

View File

@ -6,7 +6,6 @@ exports[`renders <Header /> without throwing 1`] = `
font-weight: 500;
font-size: 1.5rem;
text-transform: uppercase;
color: ;
font-size: 1.8125rem;
margin: 0;
}
@ -35,9 +34,9 @@ exports[`renders <Header /> without throwing 1`] = `
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: space-between;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
@ -46,7 +45,6 @@ exports[`renders <Header /> without throwing 1`] = `
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
background-color: ;
max-height: 3.3125rem;
min-height: 3.3125rem;
padding: 0 1.125rem;
@ -62,75 +60,18 @@ exports[`renders <Header /> without throwing 1`] = `
<div
className="c0"
>
.c1 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 500;
font-size: 1.5rem;
text-transform: uppercase;
color: ;
font-size: 1.8125rem;
margin: 0;
}
.c0 {
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
padding: 0.9375rem 0;
}
.c2 {
border-style: none;
width: 5.4375rem;
height: 1.5625rem;
}
<div
className="c0"
className="c1"
>
.c0 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 500;
font-size: 1.5rem;
text-transform: uppercase;
color: ;
font-size: 1.8125rem;
margin: 0;
}
.c1 {
border-style: none;
width: 5.4375rem;
height: 1.5625rem;
}
<h2
className="c0"
className="c2"
>
.c0 {
border-style: none;
width: 5.4375rem;
height: 1.5625rem;
}
<a
href="/"
onClick={[Function]}
>
.c0 {
border-style: none;
width: 5.4375rem;
height: 1.5625rem;
}
<img
className="c0"
className="c3"
src="test-file-mock"
/>
</a>

View File

@ -32,9 +32,7 @@ exports[`renders <NotFound /> without throwing 1`] = `
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: ;
background-image: none;
background-color: ;
border-radius: 0.25rem;
border: solid 0.0625rem;
}
@ -42,12 +40,9 @@ exports[`renders <NotFound /> without throwing 1`] = `
.c6:focus {
outline: 0;
text-decoration: none;
background-color: ;
border-color: ;
}
.c6:hover {
background-color: ;
border: solid 0.0625rem;
}
@ -56,8 +51,6 @@ exports[`renders <NotFound /> without throwing 1`] = `
.c6:active:focus {
background-image: none;
outline: 0;
background-color: ;
border-color: ;
}
.c6[disabled] {
@ -131,209 +124,21 @@ exports[`renders <NotFound /> without throwing 1`] = `
<div
className="c0"
>
.c5 {
display: inline-block;
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0;
padding: 0.9375rem 1.125rem;
position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: ;
background-image: none;
background-color: ;
border-radius: 0.25rem;
border: solid 0.0625rem;
}
.c5:focus {
outline: 0;
text-decoration: none;
background-color: ;
border-color: ;
}
.c5:hover {
background-color: ;
border: solid 0.0625rem;
}
.c5:active,
.c5:active:hover,
.c5:active:focus {
background-image: none;
outline: 0;
background-color: ;
border-color: ;
}
.c5[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c2 {
font-size: 2rem;
margin: 0.625rem 0;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 500;
font-size: 2.25rem;
font-style: normal;
font-stretch: normal;
margin: 0;
}
.c4 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
}
.c0 {
margin-top: 3.75rem;
}
.c1 {
font-weight: normal;
font-size: 2rem;
}
.c3 {
margin-bottom: 1.875rem;
max-width: 30.625rem;
}
<div
className="c0"
className="c1"
>
.c1 {
font-size: 2rem;
margin: 0.625rem 0;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 500;
font-size: 2.25rem;
font-style: normal;
font-stretch: normal;
margin: 0;
}
.c0 {
font-weight: normal;
font-size: 2rem;
}
<h1
className="c0 c1"
className="c2 c3"
>
I have no memory of this place
</h1>
.c1 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
}
.c0 {
margin-bottom: 1.875rem;
max-width: 30.625rem;
}
<p
className="c0 c1"
className="c4 c5"
>
HTTP 404: We cant find what you are looking for. Next time, always follow your nose.
</p>
.c0 {
display: inline-block;
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0;
padding: 0.9375rem 1.125rem;
position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: ;
background-image: none;
background-color: ;
border-radius: 0.25rem;
border: solid 0.0625rem;
}
.c0:focus {
outline: 0;
text-decoration: none;
background-color: ;
border-color: ;
}
.c0:hover {
background-color: ;
border: solid 0.0625rem;
}
.c0:active,
.c0:active:hover,
.c0:active:focus {
background-image: none;
outline: 0;
background-color: ;
border-color: ;
}
.c0[disabled] {
cursor: not-allowed;
pointer-events: none;
}
<a
className="c0"
className="c6"
href="/"
onClick={[Function]}
primary={true}

View File

@ -32,13 +32,11 @@ exports[`renders <SectionNav /> without throwing 1`] = `
.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;
}
@ -51,78 +49,15 @@ exports[`renders <SectionNav /> without throwing 1`] = `
<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"
className="c1"
>
.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"
className="c2"
>
.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"
className="active c3 active"
href="/"
onClick={[Function]}
style={Object {}}
@ -130,45 +65,18 @@ exports[`renders <SectionNav /> without throwing 1`] = `
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"
className="c2"
>
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"
className="c2"
>
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"
className="c2"
>
Docker registries
</li>

View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <Package /> without throwing 1`] = `
.c2 {
.c3 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
@ -10,10 +10,9 @@ exports[`renders <Package /> without throwing 1`] = `
padding-left: 0.5rem;
}
.c4 {
.c5 {
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;
@ -37,7 +36,7 @@ exports[`renders <Package /> without throwing 1`] = `
padding: 0.75rem 1.125rem 0 1.125rem;
}
.c0 {
.c1 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@ -59,21 +58,20 @@ exports[`renders <Package /> without throwing 1`] = `
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: ;
border-radius: 4px;
border: 1px solid;
box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
min-height: 11.5625rem;
min-width: 200px;
min-width: 237px;
}
.c1 {
.c2 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@ -102,7 +100,7 @@ exports[`renders <Package /> without throwing 1`] = `
flex-direction: row;
}
.c3 {
.c4 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@ -128,7 +126,7 @@ exports[`renders <Package /> without throwing 1`] = `
transform: translateY(-50%);
}
.c6 {
.c7 {
display: inline-block;
-webkit-flex-direction: column;
-ms-flex-direction: column;
@ -144,25 +142,25 @@ exports[`renders <Package /> without throwing 1`] = `
justify-content: flex-end;
}
.c5 {
.c6 {
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 {
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;
}
.c9 {
display: inline-block;
-webkit-flex-direction: column;
-ms-flex-direction: column;
@ -175,8 +173,13 @@ exports[`renders <Package /> without throwing 1`] = `
color: rgba(73,73,73,0.5);
}
.c0 {
margin-right: 1.125rem;
margin-bottom: 1.125rem;
}
@media only screen and (min-width:0em) {
.c2 {
.c3 {
-webkit-flex-basis: 50%;
-ms-flex-basis: 50%;
flex-basis: 50%;
@ -186,799 +189,77 @@ exports[`renders <Package /> without throwing 1`] = `
}
<div
className="c0"
className="c0 c1"
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"
className="c2"
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"
className="c3"
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"
className="c4"
>
.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"
className="c5"
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"
className="c6 c5"
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"
className="c7"
>
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"
className="c6 c5"
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"
className="c7"
>
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"
className="c6 c5"
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"
className="c7"
>
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"
className="c6 c5"
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"
className="c7"
>
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"
className="c8 c5"
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"
className="c9"
>
Compute Optimized
</span>

View File

@ -1,4 +1,7 @@
import React from 'react';
import styled from 'styled-components';
import remcalc from 'remcalc';
import {
Card,
CardSubTitle,
@ -8,8 +11,13 @@ import {
CardMeta
} from 'joyent-ui-toolkit';
const PackageStyled = styled(Card)`
margin-right: ${remcalc(18)};
margin-bottom: ${remcalc(18)};
`;
const Package = ({ pack: { price, memory, vcpus, disk, group } }) => (
<Card transparent>
<PackageStyled transparent>
<CardView>
<CardMeta>
<CardTitle>${price} per hour</CardTitle>
@ -21,7 +29,7 @@ const Package = ({ pack: { price, memory, vcpus, disk, group } }) => (
<CardFooter>{group}</CardFooter>
</CardMeta>
</CardView>
</Card>
</PackageStyled>
);
export default Package;

View File

@ -10,16 +10,15 @@ const ListStyled = styled.ul`
list-style: none;
padding: 0;
flex-wrap: wrap;
justify-content: space-between;
margin-top: ${remcalc(36)};
`;
const Packages = ({ packages }) => (
<ListStyled>
{packages.map(pack => (
{packages.length > 0 ? packages.map(pack => (
<li key={pack.name}>
<Package pack={pack} />
</li>
))}
)) : 'There are no packages that meet your criteria'}
</ListStyled>
);

View File

@ -0,0 +1,65 @@
import React from 'react';
import { Slider } from 'joyent-ui-toolkit';
import styled from 'styled-components';
import remcalc from 'remcalc';
const FilterWrapper = styled.section`
display: flex;
> div {
flex-grow: 1;
&:not(:last-child) {
margin-right: ${remcalc(36)};
}
}
`;
const Sliders = ({
filters: { cpu, cost, ram, disk },
ramSliderChange,
cpuSliderChange,
diskSliderChange,
costSliderChange
}) => (
<FilterWrapper>
<Slider
minValue={ram.min}
maxValue={ram.max}
step={0.256}
value={ram}
onChangeComplete={value => ramSliderChange(value)}
>
GB RAM
</Slider>
<Slider
minValue={cpu.min}
maxValue={cpu.max}
step={0.25}
value={cpu}
onChangeComplete={value => cpuSliderChange(value)}
>
vCPUs
</Slider>
<Slider
minValue={disk.min}
maxValue={disk.max}
step={0.01}
value={disk}
onChangeComplete={value => diskSliderChange(value)}
>
TB Disk
</Slider>
<Slider
minValue={cost.min}
maxValue={cost.max}
step={0.02}
value={cost}
onChangeComplete={value => costSliderChange(value)}
>
$/hr
</Slider>
</FilterWrapper>
);
export default Sliders;

View File

@ -1,12 +1,14 @@
import React from 'react';
import { connect } from 'react-redux';
import changeFilters from '../../state/actions';
import { changeFilters, resetFilters } from '../../state/actions';
import { LayoutContainer } from '@components/layout';
import { Home } from '@components/home';
const HomeHOC = ({ filters, onFilterChange }) => (
const HomeHOC = (props) => (
<LayoutContainer>
<Home filters={filters} onFilterChange={onFilterChange} />
<Home
{...props}
/>
</LayoutContainer>
);
@ -20,6 +22,9 @@ const mapDispatchToProps = dispatch => {
return {
onFilterChange: filters => {
dispatch(changeFilters(filters));
},
onFilterReset: () => {
dispatch(resetFilters());
}
};
};

View File

@ -6,7 +6,6 @@ exports[`renders <Header /> without throwing 1`] = `
font-weight: 500;
font-size: 1.5rem;
text-transform: uppercase;
color: ;
font-size: 1.8125rem;
margin: 0;
}
@ -35,9 +34,9 @@ exports[`renders <Header /> without throwing 1`] = `
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: space-between;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
@ -46,7 +45,6 @@ exports[`renders <Header /> without throwing 1`] = `
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
background-color: ;
max-height: 3.3125rem;
min-height: 3.3125rem;
padding: 0 1.125rem;
@ -62,75 +60,18 @@ exports[`renders <Header /> without throwing 1`] = `
<div
className="c0"
>
.c1 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 500;
font-size: 1.5rem;
text-transform: uppercase;
color: ;
font-size: 1.8125rem;
margin: 0;
}
.c0 {
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
padding: 0.9375rem 0;
}
.c2 {
border-style: none;
width: 5.4375rem;
height: 1.5625rem;
}
<div
className="c0"
className="c1"
>
.c0 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 500;
font-size: 1.5rem;
text-transform: uppercase;
color: ;
font-size: 1.8125rem;
margin: 0;
}
.c1 {
border-style: none;
width: 5.4375rem;
height: 1.5625rem;
}
<h2
className="c0"
className="c2"
>
.c0 {
border-style: none;
width: 5.4375rem;
height: 1.5625rem;
}
<a
href="/"
onClick={[Function]}
>
.c0 {
border-style: none;
width: 5.4375rem;
height: 1.5625rem;
}
<img
className="c0"
className="c3"
src="test-file-mock"
/>
</a>

View File

@ -1,8 +1,8 @@
const changeFilters = filters => {
return {
export const changeFilters = filters => ({
type: 'CHANGE_FILTERS',
filters
};
};
});
export default changeFilters;
export const resetFilters = () => ({
type: 'RESET_FILTERS'
});

View File

@ -1,11 +1,16 @@
import { default as defaultState } from './state';
const selectedGroups = groups =>
groups.filter(group => group.selected).map(group => group.name);
const filterReducer = (state = defaultState, action) => {
switch (action.type) {
case 'CHANGE_FILTERS':
console.log(state);
return {
...state,
...action.filters,
filters: {
...action.filters
},
packages: defaultState.packages
.filter(
pack =>
@ -27,6 +32,21 @@ const filterReducer = (state = defaultState, action) => {
pack.price >= action.filters.cost.min &&
pack.price <= action.filters.cost.max
)
.filter(
pack =>
selectedGroups(action.filters.groups).length > 0 ?
selectedGroups(action.filters.groups).includes(pack.group) :
true
)
};
case 'RESET_FILTERS':
return {
...state,
filters: {
...defaultState.filters
},
packages: defaultState.packages
};
default:
return state;

View File

@ -5,7 +5,13 @@ const state = {
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 }
disk: { min: 0.01, max: 4.9 },
groups: [
{ name: 'Compute Optimized', selected: false },
{ name: 'Memory Optimized', selected: false },
{ name: 'General Purpose', selected: false },
{ name: 'Storage Optimized', selected: false }
]
},
packages
};

View File

@ -14,5 +14,11 @@ export default {
disk: {
min: 0.01,
max: 107.26
}
},
groups: [
{ name: 'Compute Optimized', selected: false },
{ name: 'Memory Optimized', selected: false },
{ name: 'General Purpose', selected: false },
{ name: 'Storage Optimized', selected: false }
]
};

View File

@ -94,6 +94,7 @@ const style = css`
color: ${props => props.theme.tertiary};
background-color: ${props => props.theme.background};
border-color: ${props => props.theme.grey};
font-weight: 600;
&:focus,
&:hover,
@ -134,6 +135,10 @@ const style = css`
`} ${is('rect')`
border-radius: 0;
`};
${is('small')`
padding: ${remcalc(9)} ${remcalc(18)};
font-weight: 600;
`};
`;
const StyledButton = NButton.extend`
@ -157,7 +162,7 @@ const StyledLink = styled(Link)`
* @example ./usage.md
*/
const Button = props => {
const { href = '', to = '', loading = false, secondary, tertiary } = props;
const { href = '', to = '', loading = false, secondary } = props;
const Views = [
() => (to ? StyledLink : null),
@ -168,7 +173,7 @@ const Button = props => {
const View = Views.reduce((sel, view) => (sel ? sel : view()), null);
const children = loading ? (
<StatusLoader secondary={!secondary} tertiary={tertiary} />
<StatusLoader secondary={!secondary} />
) : (
props.children
);
@ -192,6 +197,7 @@ Button.propTypes = {
primary: PropTypes.bool,
secondary: PropTypes.bool,
tertiary: PropTypes.bool,
small: PropTypes.bool,
/**
* When used, will give button an active state (Only for tertiary for now)
*/

View File

@ -36,13 +36,12 @@ const StyledCard = Row.extend`
`};
${is('transparent')`
border-radius: ${remcalc(4)}
background:
border-radius: 4px;
border: 1px solid ${props => props.theme.grey};
background: ${props => props.theme.background};
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05);
min-height: ${remcalc(185)};
min-width: 200px;
min-width: 237px;
`};
${is('stacked')`

View File

@ -15,6 +15,7 @@ const StyledContainer = styled.div`
background-color: ${props => props.theme.white};
box-shadow: ${bottomShaddow};
border: ${border.confirmed};
width: 100%;
`;
const StyledColor = styled.div`
@ -74,9 +75,9 @@ Message.propTypes = {
title: PropTypes.string,
message: PropTypes.string,
onCloseClick: PropTypes.func,
error: PropTypes.boolean,
warning: PropTypes.boolean,
success: PropTypes.boolean
error: PropTypes.bool,
warning: PropTypes.bool,
success: PropTypes.bool
};
export default Message;