1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-14 15:20:06 +02:00

chore: remove leftovers

This commit is contained in:
Sérgio Ramos 2017-09-14 16:30:32 +01:00
parent 3375821b19
commit b6adc4161d
27 changed files with 0 additions and 31554 deletions

View File

@ -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();
});

View File

@ -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;

View File

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

View File

@ -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>
`;

View File

@ -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();
});

View File

@ -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;

View File

@ -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();
});

View File

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

View File

@ -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;

View File

@ -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();
});

View File

@ -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);

View File

@ -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"
}
]

View File

@ -1,5 +0,0 @@
query Portal {
datacenters {
name
}
}

View File

@ -1,10 +0,0 @@
query Portal {
packages {
name
vcpus
memory
disk
version
group
}
}

View File

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

View File

@ -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;

View File

@ -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
}
};

View File

@ -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'
}
];

View File

@ -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);

View File

@ -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>
```

View File

@ -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;

View File

@ -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)};
`;