mirror of https://github.com/yldio/copilot.git
chore: remove leftovers
This commit is contained in:
Sérgio Ramos
parent
3375821b19
commit
b6adc4161d
File diff suppressed because it is too large
Load Diff
|
|
@ -1,21 +0,0 @@
|
|||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import { Router, FiltersMock } from '@mocks/';
|
||||
import Filters from '../filters';
|
||||
|
||||
it('renders <Filters /> without throwing', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Router>
|
||||
<Filters filters={FiltersMock} />
|
||||
</Router>
|
||||
)
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
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';
|
||||
|
||||
const FilterWrapper = styled.section`
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
> div {
|
||||
flex-grow: 1;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: ${remcalc(36)};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const Filters = ({
|
||||
filters: { cpu, cost, ram, disk },
|
||||
ramSliderChange,
|
||||
cpuSliderChange,
|
||||
diskSliderChange,
|
||||
costSliderChange
|
||||
}) => {
|
||||
return (
|
||||
<Col xs={12}>
|
||||
<FormLabel>Choose a package</FormLabel>
|
||||
<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>
|
||||
</Col>
|
||||
);
|
||||
};
|
||||
|
||||
export default Filters;
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { default as Filters } from './filters';
|
||||
|
|
@ -1,990 +0,0 @@
|
|||
// 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>
|
||||
`;
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
/**
|
||||
* @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();
|
||||
});
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
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;
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,21 +0,0 @@
|
|||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import { Router, PackagesMock, FiltersMock } from '@mocks/';
|
||||
import { Packages } from '../';
|
||||
|
||||
it('renders <Packages /> without throwing', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Router>
|
||||
<Packages packages={PackagesMock} filters={FiltersMock} />
|
||||
</Router>
|
||||
)
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { default as Packages } from './list';
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import React from 'react';
|
||||
import remcalc from 'remcalc';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import Package from '@components/package';
|
||||
|
||||
const ListStyled = styled.ul`
|
||||
display: flex;
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-top: ${remcalc(36)};
|
||||
`;
|
||||
const Packages = ({ packages }) => (
|
||||
<ListStyled>
|
||||
{packages.map(pack => (
|
||||
<li key={pack.name}>
|
||||
<Package pack={pack} />
|
||||
</li>
|
||||
))}
|
||||
</ListStyled>
|
||||
);
|
||||
|
||||
export default Packages;
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,23 +0,0 @@
|
|||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import PackagesHOC from '../';
|
||||
import { Router, Store } from '@mocks/';
|
||||
|
||||
it('renders <PackagesHOC /> without throwing', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Router>
|
||||
<Store>
|
||||
<PackagesHOC />
|
||||
</Store>
|
||||
</Router>
|
||||
)
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
// import { graphql } from 'react-apollo';
|
||||
import { Packages } from '@components/packages';
|
||||
// import packagesQuery from '@graphql/packages.gql';
|
||||
|
||||
const PackagesHOC = ({ packages, filters }) => (
|
||||
<Packages packages={packages} filters={filters} />
|
||||
);
|
||||
|
||||
// const PackagesHOCWithData = graphql(packagesQuery, {
|
||||
// props: ({ data: { packages = [], loading = true } }) => ({
|
||||
// packages,
|
||||
// loading
|
||||
// })
|
||||
// })(PackagesHOC);
|
||||
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
packages: state.app.packages,
|
||||
filters: state.app.filters
|
||||
};
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps)(PackagesHOC);
|
||||
|
|
@ -1,146 +0,0 @@
|
|||
[
|
||||
{
|
||||
"name": "High CPU 0.25",
|
||||
"vcpus": 0.25,
|
||||
"memory": 0.256,
|
||||
"disk": 10,
|
||||
"group": "Compute Optimized",
|
||||
"price": "0.016"
|
||||
},
|
||||
{
|
||||
"name": "High CPU 0.75",
|
||||
"vcpus": 0.5,
|
||||
"memory": 0.768,
|
||||
"disk": 25,
|
||||
"group": "Compute Optimized",
|
||||
"price": "0.033"
|
||||
},
|
||||
{
|
||||
"name": "High CPU 1.75",
|
||||
"vcpus": 1,
|
||||
"memory": 1.8,
|
||||
"disk": 50,
|
||||
"group": "Compute Optimized",
|
||||
"price": "0.066"
|
||||
},
|
||||
{
|
||||
"name": "High CPU 3.75",
|
||||
"vcpus": 2,
|
||||
"memory": 3.8,
|
||||
"disk": 100,
|
||||
"group": "Compute Optimized",
|
||||
"price": "0.131"
|
||||
},
|
||||
{
|
||||
"name": "High CPU 7.75",
|
||||
"vcpus": 4,
|
||||
"memory": 7.8,
|
||||
"disk": 200,
|
||||
"group": "Compute Optimized",
|
||||
"price": "0.263"
|
||||
},
|
||||
{
|
||||
"name": "High CPU 15.75",
|
||||
"vcpus": 8,
|
||||
"memory": 15.8,
|
||||
"disk": 400,
|
||||
"group": "Compute Optimized",
|
||||
"price": "0.525"
|
||||
},
|
||||
{
|
||||
"name": "General 3.75",
|
||||
"vcpus": 1,
|
||||
"memory": 3.8,
|
||||
"disk": 50,
|
||||
"group": "General Purpose",
|
||||
"price": "0.084"
|
||||
},
|
||||
{
|
||||
"name": "General 7.75",
|
||||
"vcpus": 2,
|
||||
"memory": 7.8,
|
||||
"disk": 100,
|
||||
"group": "General Purpose",
|
||||
"price": "0.166"
|
||||
},
|
||||
{
|
||||
"name": "General 15.75",
|
||||
"vcpus": 4,
|
||||
"memory": 15.8,
|
||||
"disk": 200,
|
||||
"group": "General Purpose",
|
||||
"price": "0.333"
|
||||
},
|
||||
{
|
||||
"name": "General 31.75",
|
||||
"vcpus": 8,
|
||||
"memory": 31.8,
|
||||
"disk": 400,
|
||||
"group": "General Purpose",
|
||||
"price": "0.665"
|
||||
},
|
||||
{
|
||||
"name": "High RAM 15.75",
|
||||
"vcpus": 2,
|
||||
"memory": 15.8,
|
||||
"disk": 100,
|
||||
"group": "Memory Optimized",
|
||||
"price": "0.259"
|
||||
},
|
||||
{
|
||||
"name": "High RAM 31.75",
|
||||
"vcpus": 4,
|
||||
"memory": 31.8,
|
||||
"disk": 200,
|
||||
"group": "Memory Optimized",
|
||||
"price": "0.52"
|
||||
},
|
||||
{
|
||||
"name": "High RAM 63.75",
|
||||
"vcpus": 8,
|
||||
"memory": 63.8,
|
||||
"disk": 400,
|
||||
"group": "Memory Optimized",
|
||||
"price": "1.039"
|
||||
},
|
||||
{
|
||||
"name": "Fast Disk 31.75",
|
||||
"vcpus": 4,
|
||||
"memory": 31.8,
|
||||
"disk": 800,
|
||||
"group": "Storage Optimized",
|
||||
"price": "1.066"
|
||||
},
|
||||
{
|
||||
"name": "Fast Disk 63.75",
|
||||
"vcpus": 8,
|
||||
"memory": 63.8,
|
||||
"disk": 1600,
|
||||
"group": "Storage Optimized",
|
||||
"price": "2.31"
|
||||
},
|
||||
{
|
||||
"name": "Big Disk 15.75",
|
||||
"vcpus": 2,
|
||||
"memory": 15.8,
|
||||
"disk": 1200,
|
||||
"group": "Storage Optimized",
|
||||
"price": "0.413"
|
||||
},
|
||||
{
|
||||
"name": "Big Disk 31.75",
|
||||
"vcpus": 4,
|
||||
"memory": 31.8,
|
||||
"disk": 2400,
|
||||
"group": "Storage Optimized",
|
||||
"price": "0.825"
|
||||
},
|
||||
{
|
||||
"name": "Big Disk 63.75",
|
||||
"vcpus": 8,
|
||||
"memory": 63.8,
|
||||
"disk": 4900,
|
||||
"group": "Storage Optimized",
|
||||
"price": "1.75"
|
||||
}
|
||||
]
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
query Portal {
|
||||
datacenters {
|
||||
name
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
query Portal {
|
||||
packages {
|
||||
name
|
||||
vcpus
|
||||
memory
|
||||
disk
|
||||
version
|
||||
group
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
const changeFilters = filters => {
|
||||
return {
|
||||
type: 'CHANGE_FILTERS',
|
||||
filters
|
||||
};
|
||||
};
|
||||
|
||||
export default changeFilters;
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
import { default as defaultState } from './state';
|
||||
const filterReducer = (state = defaultState, action) => {
|
||||
switch (action.type) {
|
||||
case 'CHANGE_FILTERS':
|
||||
console.log(state);
|
||||
return {
|
||||
...state,
|
||||
...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;
|
||||
}
|
||||
};
|
||||
|
||||
export default filterReducer;
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
export default {
|
||||
cpu: {
|
||||
min: 0.25,
|
||||
max: 3.25
|
||||
},
|
||||
cost: {
|
||||
min: 0.016,
|
||||
max: 0.525
|
||||
},
|
||||
ram: {
|
||||
min: 0.256,
|
||||
max: 50.688
|
||||
},
|
||||
disk: {
|
||||
min: 0.01,
|
||||
max: 107.26
|
||||
}
|
||||
};
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
export default [
|
||||
{
|
||||
name: 'High CPU 0.25',
|
||||
vcpus: 0.25,
|
||||
memory: 0.256,
|
||||
disk: 10,
|
||||
group: 'Compute Optimized',
|
||||
price: '0.016'
|
||||
},
|
||||
{
|
||||
name: 'High CPU 0.75',
|
||||
vcpus: 0.5,
|
||||
memory: 0.768,
|
||||
disk: 25,
|
||||
group: 'Compute Optimized',
|
||||
price: '0.033'
|
||||
},
|
||||
{
|
||||
name: 'High CPU 1.75',
|
||||
vcpus: 1,
|
||||
memory: 1.8,
|
||||
disk: 50,
|
||||
group: 'Compute Optimized',
|
||||
price: '0.066'
|
||||
},
|
||||
{
|
||||
name: 'High CPU 3.75',
|
||||
vcpus: 2,
|
||||
memory: 3.8,
|
||||
disk: 100,
|
||||
group: 'Compute Optimized',
|
||||
price: '0.131'
|
||||
},
|
||||
{
|
||||
name: 'High CPU 7.75',
|
||||
vcpus: 4,
|
||||
memory: 7.8,
|
||||
disk: 200,
|
||||
group: 'Compute Optimized',
|
||||
price: '0.263'
|
||||
},
|
||||
{
|
||||
name: 'High CPU 15.75',
|
||||
vcpus: 8,
|
||||
memory: 15.8,
|
||||
disk: 400,
|
||||
group: 'Compute Optimized',
|
||||
price: '0.525'
|
||||
}
|
||||
];
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
import { Subscriber } from 'react-broadcast';
|
||||
import styled from 'styled-components';
|
||||
import Baseline from '../baseline';
|
||||
import typography from '../typography';
|
||||
import remcalc from 'remcalc';
|
||||
import PropTypes from 'prop-types';
|
||||
import Title from './title';
|
||||
import React from 'react';
|
||||
|
||||
const StyledTitle = Title.extend`
|
||||
${typography.fontFamily};
|
||||
${typography.normal};
|
||||
|
||||
flex-grow: 1;
|
||||
flex-basis: ${remcalc(90)};
|
||||
`;
|
||||
|
||||
const Span = styled.span`
|
||||
display: inline-block;
|
||||
flex-direction: column;
|
||||
|
||||
${typography.fontFamily};
|
||||
${typography.normal};
|
||||
font-size: ${remcalc(13)};
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
|
||||
color: rgba(73, 73, 73, 0.5);
|
||||
`;
|
||||
const Footer = ({ children }) => {
|
||||
const render = () => (
|
||||
<StyledTitle name="card-footer">
|
||||
<Span>{children}</Span>
|
||||
</StyledTitle>
|
||||
);
|
||||
|
||||
return <Subscriber channel="card">{render}</Subscriber>;
|
||||
};
|
||||
|
||||
Footer.propTypes = {
|
||||
children: PropTypes.node
|
||||
};
|
||||
|
||||
export default Baseline(Footer);
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
### Double Range Slider
|
||||
|
||||
```
|
||||
<Slider
|
||||
minValue={0.25}
|
||||
maxValue={8}
|
||||
step={0.25}
|
||||
value={{ min: 0.25, max: 8 }}
|
||||
onChangeComplete={value => console.log(value)}
|
||||
onChange={value => console.log(value)}
|
||||
>vCPUs</Slider>
|
||||
```
|
||||
|
||||
### Normal Slider
|
||||
|
||||
```
|
||||
<Slider
|
||||
minValue={10}
|
||||
maxValue={100}
|
||||
step={5}
|
||||
value={0}
|
||||
onChangeComplete={value => console.log(value)}
|
||||
onChange={value => console.log(value)}
|
||||
>Price</Slider>
|
||||
```
|
||||
|
|
@ -1,147 +0,0 @@
|
|||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'styled-components';
|
||||
import InputRange from 'react-input-range';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import theme from '../theme';
|
||||
import FormLabel from '../form/label';
|
||||
import {
|
||||
sliderStyles,
|
||||
disabledStyles,
|
||||
trackStyles,
|
||||
activeStyles,
|
||||
rangeStyles
|
||||
} from './inputStyles';
|
||||
|
||||
const SliderStyled = styled.div`
|
||||
.input-range {
|
||||
${rangeStyles};
|
||||
}
|
||||
|
||||
.slider {
|
||||
${sliderStyles};
|
||||
}
|
||||
.disabled {
|
||||
${disabledStyles};
|
||||
}
|
||||
|
||||
.min,
|
||||
.max {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.value {
|
||||
top: ${remcalc(8)};
|
||||
position: absolute;
|
||||
|
||||
.label-container {
|
||||
font-weight: 600;
|
||||
font-size: ${remcalc(10)};
|
||||
color: ${theme.secondary};
|
||||
left: -50%;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.track {
|
||||
${trackStyles};
|
||||
}
|
||||
|
||||
.active-track {
|
||||
${activeStyles};
|
||||
}
|
||||
`;
|
||||
|
||||
const Label = styled(FormLabel)`
|
||||
margin-bottom: ${remcalc(10)};
|
||||
margin-top: ${remcalc(12)};
|
||||
`;
|
||||
|
||||
class Slider extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
minValue: this.props.minValue,
|
||||
maxValue: this.props.maxValue,
|
||||
value: this.props.value
|
||||
};
|
||||
|
||||
this.changeValue = this.changeValue.bind(this);
|
||||
}
|
||||
|
||||
changeValue(value) {
|
||||
this.setState({ value }, () => this.props.onChange(value));
|
||||
}
|
||||
|
||||
render() {
|
||||
const { minValue, maxValue, value } = this.state;
|
||||
const { children, ...rest } = this.props;
|
||||
return (
|
||||
<SliderStyled>
|
||||
<Label>{children}</Label>
|
||||
<InputRange
|
||||
{...rest}
|
||||
minValue={minValue}
|
||||
maxValue={maxValue}
|
||||
value={value}
|
||||
onChange={value => this.changeValue(value)}
|
||||
/>
|
||||
</SliderStyled>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Slider.propTypes = {
|
||||
minValue: PropTypes.number,
|
||||
maxValue: PropTypes.number,
|
||||
step: PropTypes.number,
|
||||
value: PropTypes.oneOfType([PropTypes.number, PropTypes.shape()]),
|
||||
onChangeComplete: PropTypes.func,
|
||||
onChange: PropTypes.func,
|
||||
formatLabel: PropTypes.func,
|
||||
ariaLabelledby: PropTypes.string,
|
||||
ariaControls: PropTypes.string,
|
||||
classNames: PropTypes.shape({
|
||||
activeTrack: PropTypes.string,
|
||||
disabledInputRange: PropTypes.string,
|
||||
inputRange: PropTypes.string,
|
||||
labelContainer: PropTypes.string,
|
||||
maxLabel: PropTypes.string,
|
||||
minLabel: PropTypes.string,
|
||||
slider: PropTypes.string,
|
||||
sliderContainer: PropTypes.string,
|
||||
track: PropTypes.string,
|
||||
valueLabel: PropTypes.string
|
||||
}),
|
||||
disabled: PropTypes.bool,
|
||||
draggableTrack: PropTypes.bool,
|
||||
onChangeStart: PropTypes.func,
|
||||
children: PropTypes.node
|
||||
};
|
||||
|
||||
Slider.defaultProps = {
|
||||
onChangeComplete: () => {},
|
||||
onChange: () => {},
|
||||
formatLabel: value =>
|
||||
(value.toString().split('.')[1] || []).length > 3
|
||||
? Math.round(value).toFixed(3)
|
||||
: value,
|
||||
onChangeStart: () => {},
|
||||
step: 1,
|
||||
classNames: {
|
||||
activeTrack: 'active-track',
|
||||
disabledInputRange: 'disabled-range',
|
||||
inputRange: 'input-range',
|
||||
labelContainer: 'label-container',
|
||||
maxLabel: 'max',
|
||||
minLabel: 'min',
|
||||
sliderContainer: 'slider-container',
|
||||
track: 'track',
|
||||
valueLabel: 'value',
|
||||
slider: 'slider'
|
||||
}
|
||||
};
|
||||
|
||||
export default Slider;
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
import { css } from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import theme from '../theme';
|
||||
|
||||
export const sliderStyles = css`
|
||||
appearance: none;
|
||||
background: ${theme.white};
|
||||
border: 2px solid ${theme.greyLight};
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: ${remcalc(14)};
|
||||
width: ${remcalc(14)};
|
||||
transform: translateY(-50%) translateX(-50%);
|
||||
outline: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: ${remcalc(2)};
|
||||
|
||||
&::active {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
&::focus {
|
||||
box-shadow: 0 0 0 5px rgba(63, 81, 181, 0.2);
|
||||
}
|
||||
`;
|
||||
|
||||
export const disabledStyles = css`
|
||||
.track {
|
||||
background: ${theme.grey};
|
||||
}
|
||||
.slider {
|
||||
background: ${theme.greyDark};
|
||||
border: 1px solid ${theme.greyDark};
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
`;
|
||||
|
||||
export const trackStyles = css`
|
||||
background: ${theme.grey};
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: ${remcalc(4)};
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
export const activeStyles = css`
|
||||
background: ${theme.blue};
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
`;
|
||||
|
||||
export const rangeStyles = css`
|
||||
position: relative;
|
||||
width: calc(100% - 18px);
|
||||
margin: auto;
|
||||
min-height: ${remcalc(10)};
|
||||
`;
|
||||
Loading…
Reference in New Issue