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

feat(my-joyent): ssd/magnetic form

Browse Source
This commit is contained in:
Sara Vieira 2017-09-25 14:47:00 +01:00 committed by Sérgio Ramos
parent d315f7faa3
commit 718bab3c78
22 changed files with 1601 additions and 694 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/my-joyent/package.json
View File

@ -20,6 +20,7 @@
"graphql-tag": "^2.4.2",
"jest-cli": "^21.0.1",
"joyent-ui-toolkit": "^2.0.0",
"lodash.isempty": "^4.4.0",
"normalized-styled-components": "^1.0.9",
"prop-types": "^15.5.10",
"react": "^15.6.1",

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

@ -0,0 +1,264 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <DiskTypeForm /> without throwing 1`] = `
.c7 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0;
overflow: visible;
display: none;
}
.c7[type='checkbox'],
.c7[type='radio'] {
box-sizing: border-box;
padding: 0;
}
.c7[type='number']::-webkit-inner-spin-button,
.c7[type='number']::-webkit-outer-spin-button {
height: auto;
}
.c7[type='search'] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
outline-offset: -0.125rem;
}
.c7[type='search']::-webkit-search-cancel-button,
.c7[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.c7::-webkit-file-upload-button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
font: inherit;
}
.c7:checked + label::after {
opacity: 1;
}
.c7:selected + label::after {
opacity: 1;
}
.c7:disabled + label {
background-color: rgb(249,249,249);
}
.c7:disabled + label::after {
opacity: 0.3;
}
.c8 {
color: rgb(100,100,100);
position: absolute;
width: 1.125rem;
height: 1.125rem;
top: 0;
box-sizing: border-box;
background-color: rgb(255,255,255);
box-shadow: none;
border: 1px solid;
cursor: pointer;
border-radius: 4px;
width: 1.125rem;
height: 1.125rem;
}
.c8::after {
opacity: 0;
content: '';
position: absolute;
width: 0.375rem;
height: 0.125rem;
background: transparent;
top: 0.3125rem;
left: 0.25rem;
border: 0.125rem solid;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.c6 {
display: inline-block;
vertical-align: text-bottom;
margin-right: 0.5rem;
width: 1.125rem;
height: 1.125rem;
position: relative;
}
.c5 {
list-style-type: none;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
}
.c3 {
margin: 0;
padding: 0;
}
.c4 {
padding: 0.35em 0.75em 0.625em;
display: inline-block;
margin: 0;
padding: 0;
border: none;
overflow: hidden;
width: 100%;
height: auto;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
-webkit-padding-before: 0;
-webkit-padding-start: 0;
-webkit-padding-end: 0;
-webkit-padding-after: 0;
}
.c1 {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 600;
}
.c0 {
margin-top: 0.75rem;
min-width: 12.5rem;
}
.c0 label {
font-size: 0.8125rem;
}
.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 0.375rem;
}
<form
onChange={[Function]}
>
<section
className="c0"
>
<legend
className="c1"
>
Disk
</legend>
<ul
className="c2 c3"
>
<fieldset
className="c4"
style={undefined}
>
<div>
<li
checked={false}
className="c5"
name="magnetic"
onBlur={[Function]}
onChange={[Function]}
onDragStart={[Function]}
onDrop={[Function]}
onFocus={[Function]}
value=""
>
<div
className="c6"
type="checkbox"
>
<input
checked={false}
className="c7"
id="bZXIZF"
name="magnetic"
onBlur={[Function]}
onChange={[Function]}
onDragStart={[Function]}
onDrop={[Function]}
onFocus={[Function]}
type="checkbox"
value=""
/>
<label
className="c8"
htmlFor="bZXIZF"
/>
</div>
Magnetic
</li>
</div>
</fieldset>
<fieldset
className="c4"
style={undefined}
>
<div>
<li
checked={false}
className="c5"
name="ssd"
onBlur={[Function]}
onChange={[Function]}
onDragStart={[Function]}
onDrop={[Function]}
onFocus={[Function]}
value=""
>
<div
className="c6"
type="checkbox"
>
<input
checked={false}
className="c7"
id="cvStXY"
name="ssd"
onBlur={[Function]}
onChange={[Function]}
onDragStart={[Function]}
onDrop={[Function]}
onFocus={[Function]}
type="checkbox"
value=""
/>
<label
className="c8"
htmlFor="cvStXY"
/>
</div>
SSD
</li>
</div>
</fieldset>
</ul>
</section>
</form>
`;

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

@ -0,0 +1,23 @@
/**
* @jest-environment jsdom
*/
import React from 'react';
import renderer from 'react-test-renderer';
import 'jest-styled-components';
import { Router, Store } from '@mocks/';
import { default as DiskTypeForm } from '../';
it('renders <DiskTypeForm /> without throwing', () => {
const tree = renderer
.create(
<Store>
<Router>
<DiskTypeForm />
</Router>
</Store>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

38
packages/my-joyent/src/components/diskTypeForm/index.js Normal file
View File

@ -0,0 +1,38 @@
import React from 'react';
import styled from 'styled-components';
import { reduxForm } from 'redux-form';
import remcalc from 'remcalc';
import { FormGroup, Checkbox, Legend, CheckboxList } from 'joyent-ui-toolkit';
const Radios = styled.section`
margin-top: ${remcalc(12)};
min-width: ${remcalc(200)};
label {
font-size: ${remcalc(13)};
}
`;
const CheckboxListStyled = styled(CheckboxList)`
display: flex;
align-items: center;
margin-top: ${remcalc(6)};
`;
const DiskTypeForm = ({ onChange, handleSubmit }) => (
<form onChange={() => handleSubmit(params => onChange(params))}>
<Radios>
<Legend>Disk</Legend>
<CheckboxListStyled>
<FormGroup name="magnetic" type="checkbox" reduxForm>
<Checkbox>Magnetic</Checkbox>
</FormGroup>
<FormGroup name="ssd" type="checkbox" reduxForm>
<Checkbox>SSD</Checkbox>
</FormGroup>
</CheckboxListStyled>
</Radios>
</form>
);
export default reduxForm({ form: 'magnetic' })(DiskTypeForm);

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

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <Filters /> without throwing 1`] = `
.c6 {
.c5 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -49,6 +49,93 @@ exports[`renders <Filters /> without throwing 1`] = `
font-weight: 600;
}
.c5::-moz-focus-inner,
.c5[type='button']::-moz-focus-inner,
.c5[type='reset']::-moz-focus-inner,
.c5[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c5:-moz-focusring,
.c5[type='button']:-moz-focusring,
.c5[type='reset']:-moz-focusring,
.c5[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c5:focus {
outline: 0;
text-decoration: none;
}
.c5:hover {
border: solid 0.0625rem;
}
.c5:active,
.c5:active:hover,
.c5:active:focus {
background-image: none;
outline: 0;
}
.c5[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c5 + button {
margin-left: 1.25rem;
}
.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;
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;
}
.c6::-moz-focus-inner,
.c6[type='button']::-moz-focus-inner,
.c6[type='reset']::-moz-focus-inner,
@ -89,93 +176,6 @@ exports[`renders <Filters /> without throwing 1`] = `
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;
}
.c2 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
@ -185,17 +185,134 @@ exports[`renders <Filters /> without throwing 1`] = `
display: block;
}
.c4 {
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;
margin-bottom: 0.375rem;
.c23 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0;
overflow: visible;
display: none;
}
.c10 {
.c23[type='checkbox'],
.c23[type='radio'] {
box-sizing: border-box;
padding: 0;
}
.c23[type='number']::-webkit-inner-spin-button,
.c23[type='number']::-webkit-outer-spin-button {
height: auto;
}
.c23[type='search'] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
outline-offset: -0.125rem;
}
.c23[type='search']::-webkit-search-cancel-button,
.c23[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.c23::-webkit-file-upload-button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
font: inherit;
}
.c23:checked + label::after {
opacity: 1;
}
.c23:selected + label::after {
opacity: 1;
}
.c23:disabled + label {
background-color: rgb(249,249,249);
}
.c23:disabled + label::after {
opacity: 0.3;
}
.c24 {
color: rgb(100,100,100);
position: absolute;
width: 1.125rem;
height: 1.125rem;
top: 0;
box-sizing: border-box;
background-color: rgb(255,255,255);
box-shadow: none;
border: 1px solid;
cursor: pointer;
border-radius: 4px;
width: 1.125rem;
height: 1.125rem;
}
.c24::after {
opacity: 0;
content: '';
position: absolute;
width: 0.375rem;
height: 0.125rem;
background: transparent;
top: 0.3125rem;
left: 0.25rem;
border: 0.125rem solid;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.c22 {
display: inline-block;
vertical-align: text-bottom;
margin-right: 0.5rem;
width: 1.125rem;
height: 1.125rem;
position: relative;
}
.c21 {
list-style-type: none;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
}
.c19 {
margin: 0;
padding: 0;
}
.c20 {
padding: 0.35em 0.75em 0.625em;
display: inline-block;
margin: 0;
padding: 0;
border: none;
overflow: hidden;
width: 100%;
height: auto;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
-webkit-padding-before: 0;
-webkit-padding-start: 0;
-webkit-padding-end: 0;
-webkit-padding-after: 0;
}
.c9 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
@ -206,7 +323,18 @@ exports[`renders <Filters /> without throwing 1`] = `
font-weight: bold;
}
.c14 {
.c17 {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 600;
}
.c13 {
font-size: 0.8125rem;
position: absolute;
top: 0.875rem;
@ -214,7 +342,7 @@ exports[`renders <Filters /> without throwing 1`] = `
color: #464646;
}
.c16 {
.c15 {
font-size: 0.8125rem;
position: absolute;
top: 0.875rem;
@ -222,7 +350,7 @@ exports[`renders <Filters /> without throwing 1`] = `
color: #464646;
}
.c15 {
.c14 {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@ -242,17 +370,17 @@ exports[`renders <Filters /> without throwing 1`] = `
margin-top: 0.125rem;
}
.c15::active {
.c14::active {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
.c15::focus {
.c14::focus {
box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
}
.c12 {
.c11 {
background: #D8D8D8;
cursor: pointer;
display: block;
@ -260,40 +388,61 @@ exports[`renders <Filters /> without throwing 1`] = `
position: relative;
}
.c13 {
.c12 {
background: #364ACD;
height: 100%;
position: absolute;
}
.c11 {
.c10 {
position: relative;
min-height: 0.625rem;
}
.c9 {
.c8 {
margin-bottom: 0.625rem;
margin-top: 0.75rem;
}
.c8 {
.c16 {
margin-top: 0.75rem;
min-width: 12.5rem;
}
.c16 label {
font-size: 0.8125rem;
}
.c18 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 0.375rem;
}
.c7 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.c8 > div {
.c7 > div {
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
}
.c8 > div:not(:last-child) {
.c7 > div:not(:last-child) {
margin-right: 2.25rem;
}
.c5 {
.c4 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -329,37 +478,37 @@ exports[`renders <Filters /> without throwing 1`] = `
Choose package
</label>
<label
className="c3 c4"
className="c3 c2"
>
Filter by package type
</label>
<section
className="c5"
className="c4"
>
<div>
<button
className="c6"
className="c5"
onClick={[Function]}
selected={false}
>
Compute Optimized
</button>
<button
className="c6"
className="c5"
onClick={[Function]}
selected={false}
>
General Purpose
</button>
<button
className="c6"
className="c5"
onClick={[Function]}
selected={false}
>
Memory Optimized
</button>
<button
className="c6"
className="c5"
onClick={[Function]}
selected={false}
>
@ -367,7 +516,7 @@ exports[`renders <Filters /> without throwing 1`] = `
</button>
</div>
<button
className="c7"
className="c6"
disabled={false}
onClick={[Function]}
>
@ -380,30 +529,30 @@ exports[`renders <Filters /> without throwing 1`] = `
Filter by package feature
</label>
<section
className="c8"
className="c7"
>
<div>
<label
className="c9 c10"
className="c8 c9"
htmlFor=""
>
GB RAM
</label>
<div
aria-disabled={false}
className="c11"
className="c10"
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onTouchStart={[Function]}
>
<div
className="c12"
className="c11"
onMouseDown={[Function]}
onTouchStart={[Function]}
>
<div
className="c13"
className="c12"
style={
Object {
"left": "0%",
@ -413,7 +562,7 @@ exports[`renders <Filters /> without throwing 1`] = `
/>
<span>
<span
className="c14"
className="c13"
type="min"
>
0.256
@ -424,7 +573,7 @@ exports[`renders <Filters /> without throwing 1`] = `
aria-valuemax={50.688}
aria-valuemin={0.256}
aria-valuenow={0.256}
className="c15"
className="c14"
draggable="false"
onKeyDown={[Function]}
onMouseDown={[Function]}
@ -442,7 +591,7 @@ exports[`renders <Filters /> without throwing 1`] = `
</span>
<span>
<span
className="c16"
className="c15"
type="max"
>
50.688
@ -453,7 +602,7 @@ exports[`renders <Filters /> without throwing 1`] = `
aria-valuemax={50.688}
aria-valuemin={0.256}
aria-valuenow={50.688}
className="c15"
className="c14"
draggable="false"
onKeyDown={[Function]}
onMouseDown={[Function]}
@ -474,26 +623,26 @@ exports[`renders <Filters /> without throwing 1`] = `
</div>
<div>
<label
className="c9 c10"
className="c8 c9"
htmlFor=""
>
vCPUs
</label>
<div
aria-disabled={false}
className="c11"
className="c10"
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onTouchStart={[Function]}
>
<div
className="c12"
className="c11"
onMouseDown={[Function]}
onTouchStart={[Function]}
>
<div
className="c13"
className="c12"
style={
Object {
"left": "0%",
@ -503,7 +652,7 @@ exports[`renders <Filters /> without throwing 1`] = `
/>
<span>
<span
className="c14"
className="c13"
type="min"
>
0.25
@ -514,7 +663,7 @@ exports[`renders <Filters /> without throwing 1`] = `
aria-valuemax={3.25}
aria-valuemin={0.25}
aria-valuenow={0.25}
className="c15"
className="c14"
draggable="false"
onKeyDown={[Function]}
onMouseDown={[Function]}
@ -532,7 +681,7 @@ exports[`renders <Filters /> without throwing 1`] = `
</span>
<span>
<span
className="c16"
className="c15"
type="max"
>
3.25
@ -543,7 +692,7 @@ exports[`renders <Filters /> without throwing 1`] = `
aria-valuemax={3.25}
aria-valuemin={0.25}
aria-valuenow={3.25}
className="c15"
className="c14"
draggable="false"
onKeyDown={[Function]}
onMouseDown={[Function]}
@ -564,26 +713,26 @@ exports[`renders <Filters /> without throwing 1`] = `
</div>
<div>
<label
className="c9 c10"
className="c8 c9"
htmlFor=""
>
TB Disk
</label>
<div
aria-disabled={false}
className="c11"
className="c10"
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onTouchStart={[Function]}
>
<div
className="c12"
className="c11"
onMouseDown={[Function]}
onTouchStart={[Function]}
>
<div
className="c13"
className="c12"
style={
Object {
"left": "0%",
@ -593,7 +742,7 @@ exports[`renders <Filters /> without throwing 1`] = `
/>
<span>
<span
className="c14"
className="c13"
type="min"
>
0.01
@ -604,7 +753,7 @@ exports[`renders <Filters /> without throwing 1`] = `
aria-valuemax={107.26}
aria-valuemin={0.01}
aria-valuenow={0.01}
className="c15"
className="c14"
draggable="false"
onKeyDown={[Function]}
onMouseDown={[Function]}
@ -622,7 +771,7 @@ exports[`renders <Filters /> without throwing 1`] = `
</span>
<span>
<span
className="c16"
className="c15"
type="max"
>
107.26
@ -633,7 +782,7 @@ exports[`renders <Filters /> without throwing 1`] = `
aria-valuemax={107.26}
aria-valuemin={0.01}
aria-valuenow={107.26}
className="c15"
className="c14"
draggable="false"
onKeyDown={[Function]}
onMouseDown={[Function]}
@ -654,26 +803,26 @@ exports[`renders <Filters /> without throwing 1`] = `
</div>
<div>
<label
className="c9 c10"
className="c8 c9"
htmlFor=""
>
$/hr
</label>
<div
aria-disabled={false}
className="c11"
className="c10"
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onTouchStart={[Function]}
>
<div
className="c12"
className="c11"
onMouseDown={[Function]}
onTouchStart={[Function]}
>
<div
className="c13"
className="c12"
style={
Object {
"left": "0%",
@ -683,7 +832,7 @@ exports[`renders <Filters /> without throwing 1`] = `
/>
<span>
<span
className="c14"
className="c13"
type="min"
>
0.016
@ -694,7 +843,7 @@ exports[`renders <Filters /> without throwing 1`] = `
aria-valuemax={0.525}
aria-valuemin={0.016}
aria-valuenow={0.016}
className="c15"
className="c14"
draggable="false"
onKeyDown={[Function]}
onMouseDown={[Function]}
@ -712,7 +861,7 @@ exports[`renders <Filters /> without throwing 1`] = `
</span>
<span>
<span
className="c16"
className="c15"
type="max"
>
0.525
@ -723,7 +872,7 @@ exports[`renders <Filters /> without throwing 1`] = `
aria-valuemax={0.525}
aria-valuemin={0.016}
aria-valuenow={0.525}
className="c15"
className="c14"
draggable="false"
onKeyDown={[Function]}
onMouseDown={[Function]}
@ -742,6 +891,107 @@ exports[`renders <Filters /> without throwing 1`] = `
</div>
</div>
</div>
<form
onChange={[Function]}
>
<section
className="c16"
>
<legend
className="c17"
>
Disk
</legend>
<ul
className="c18 c19"
>
<fieldset
className="c20"
style={undefined}
>
<div>
<li
checked={false}
className="c21"
name="magnetic"
onBlur={[Function]}
onChange={[Function]}
onDragStart={[Function]}
onDrop={[Function]}
onFocus={[Function]}
value=""
>
<div
className="c22"
type="checkbox"
>
<input
checked={false}
className="c23"
id="sIMIU"
name="magnetic"
onBlur={[Function]}
onChange={[Function]}
onDragStart={[Function]}
onDrop={[Function]}
onFocus={[Function]}
type="checkbox"
value=""
/>
<label
className="c24"
htmlFor="sIMIU"
/>
</div>
Magnetic
</li>
</div>
</fieldset>
<fieldset
className="c20"
style={undefined}
>
<div>
<li
checked={false}
className="c21"
name="ssd"
onBlur={[Function]}
onChange={[Function]}
onDragStart={[Function]}
onDrop={[Function]}
onFocus={[Function]}
value=""
>
<div
className="c22"
type="checkbox"
>
<input
checked={false}
className="c23"
id="bCkzvd"
name="ssd"
onBlur={[Function]}
onChange={[Function]}
onDragStart={[Function]}
onDrop={[Function]}
onFocus={[Function]}
type="checkbox"
value=""
/>
<label
className="c24"
htmlFor="bCkzvd"
/>
</div>
SSD
</li>
</div>
</fieldset>
</ul>
</section>
</form>
</section>
</section>
`;

10
packages/my-joyent/src/components/filters/__tests__/filters.spec.js
View File

@ -6,15 +6,17 @@ import React from 'react';
import renderer from 'react-test-renderer';
import 'jest-styled-components';
import { Router, FiltersMock, PackagesMock } from '@mocks/';
import { Router, FiltersMock, PackagesMock, Store } from '@mocks/';
import Filters from '../filters';
it('renders <Filters /> without throwing', () => {
const tree = renderer
.create(
<Router>
<Filters filters={FiltersMock} packages={PackagesMock} />
</Router>
<Store>
<Router>
<Filters filters={FiltersMock} packages={PackagesMock} />
</Router>
</Store>
)
.toJSON();
expect(tree).toMatchSnapshot();

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

@ -2,8 +2,13 @@ import React, { Component } from 'react';
import styled from 'styled-components';
import remcalc from 'remcalc';
import isEqual from 'lodash.isequal';
import { Label, Button, Slider } from 'joyent-ui-toolkit';
import {
Button,
Label,
Slider
} from 'joyent-ui-toolkit';
import { default as defaultState } from '@state/state';
import { default as DiskTypeFrom } from '@components/diskTypeForm';
const FilterWrapper = styled.section`
display: flex;
@ -75,12 +80,12 @@ class Filters extends Component {
componentWillReceiveProps(nextProps) {
const { packages } = nextProps;
packages.length > 1 &&
this.setState({
ram: getFirstAndLast(packages, 'memory'),
cpu: getFirstAndLast(packages, 'vcpus'),
disk: getFirstAndLast(packages, 'disk'),
cost: getFirstAndLast(packages, 'price')
});
this.setState({
ram: getFirstAndLast(packages, 'memory'),
cpu: getFirstAndLast(packages, 'vcpus'),
disk: getFirstAndLast(packages, 'disk'),
cost: getFirstAndLast(packages, 'price')
});
}
groupChange(group) {
@ -103,7 +108,8 @@ class Filters extends Component {
return (
(nextState.groupClick !== groupClick &&
isEqual(filtersMap(filters), filtersMap(nextProps.filters))) ||
nextState.reset !== reset
nextState.reset !== reset ||
!isEqual(nextProps.filters.diskType, filters.diskType)
);
}
@ -128,14 +134,16 @@ class Filters extends Component {
cpuSliderChange,
diskSliderChange,
costSliderChange,
packages
packages,
diskTypeChange
} = this.props;
const { reset, cpu, cost, ram, disk, defaults } = this.state;
return (
<Wrapper>
<Title>Choose package</Title>
<Subtitle marginBottom="1">Filter by package type</Subtitle>
<Subtitle>Filter by package type</Subtitle>
<GroupWrapper>
<div>
{filters.groups
@ -200,13 +208,17 @@ class Filters extends Component {
greyed={packages.length === 0}
minValue={defaults.cost.min}
maxValue={defaults.cost.max}
step={0.02}
step={0.016}
value={cost}
key={`${cost.min}-${ram.max}`}
key={`${cost.min}-${cost.max}`}
onChangeComplete={value => costSliderChange(value)}
>
$/hr
</Slider>
<DiskTypeFrom
onChange={params => diskTypeChange(params)}
onSubmit={e => {}}
/>
</FilterWrapper>
</Wrapper>
);

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

@ -28,6 +28,7 @@ class Home extends Component {
this.closeMessage = this.closeMessage.bind(this);
this.changeValue = this.changeValue.bind(this);
this.changeGroup = this.changeGroup.bind(this);
this.diskTypeChange = this.diskTypeChange.bind(this);
}
closeMessage() {
@ -38,6 +39,7 @@ class Home extends Component {
changeValue(key, value) {
const { filters, onFilterChange } = this.props;
onFilterChange({
...filters,
[key]: value
@ -54,6 +56,15 @@ class Home extends Component {
});
}
diskTypeChange(value) {
const { filters, onFilterChange } = this.props;
onFilterChange({
...filters,
diskType: { ...value }
});
}
render() {
const { showMessage } = this.state;
const { filters, onFilterReset, packages } = this.props;
@ -86,6 +97,7 @@ class Home extends Component {
cpuSliderChange={value => this.changeValue('cpu', value)}
diskSliderChange={value => this.changeValue('disk', value)}
costSliderChange={value => this.changeValue('cost', value)}
diskTypeChange={this.diskTypeChange}
/>
</Row>
<Row>

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

@ -265,7 +265,7 @@ exports[`renders <Package /> without throwing 1`] = `
<span
className="c7"
>
SSD
Magnetic
</span>
</div>
<div

5
packages/my-joyent/src/components/package/index.js
View File

@ -17,7 +17,7 @@ const PackageStyled = styled(Card)`
`;
const Package = ({
pack: { price, memory, vcpus, disk, group },
pack: { price, memory, vcpus, disk, group, ssd },
selected,
onClick
}) => (
@ -30,8 +30,7 @@ const Package = ({
<CardSubTitle selected={selected}>
{disk} TB disk
</CardSubTitle>
<CardSubTitle selected={selected}>SSD</CardSubTitle>
<CardSubTitle selected={selected}>{ssd ? 'SSD' : 'Magnetic'}</CardSubTitle>
<CardFooter selected={selected}>{group}</CardFooter>
</CardMeta>
</CardView>

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

@ -336,7 +336,7 @@ exports[`renders <Packages /> without throwing 1`] = `
<span
className="c9"
>
SSD
Magnetic
</span>
</div>
<div
@ -428,7 +428,7 @@ exports[`renders <Packages /> without throwing 1`] = `
<span
className="c9"
>
SSD
Magnetic
</span>
</div>
<div
@ -520,7 +520,7 @@ exports[`renders <Packages /> without throwing 1`] = `
<span
className="c9"
>
SSD
Magnetic
</span>
</div>
<div
@ -612,7 +612,7 @@ exports[`renders <Packages /> without throwing 1`] = `
<span
className="c9"
>
SSD
Magnetic
</span>
</div>
<div
@ -704,7 +704,7 @@ exports[`renders <Packages /> without throwing 1`] = `
<span
className="c9"
>
SSD
Magnetic
</span>
</div>
<div
@ -796,7 +796,7 @@ exports[`renders <Packages /> without throwing 1`] = `
<span
className="c9"
>
SSD
Magnetic
</span>
</div>
<div

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

File diff suppressed because it is too large Load Diff

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

@ -1164,7 +1164,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
<span
className="c9"
>
SSD
Magnetic
</span>
</div>
<div
@ -1532,7 +1532,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
<span
className="c9"
>
SSD
Magnetic
</span>
</div>
<div
@ -1716,7 +1716,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
<span
className="c9"
>
SSD
Magnetic
</span>
</div>
<div
@ -1808,7 +1808,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
<span
className="c9"
>
SSD
Magnetic
</span>
</div>
<div
@ -1900,7 +1900,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
<span
className="c9"
>
SSD
Magnetic
</span>
</div>
<div

18
packages/my-joyent/src/data/packages.json
View File

@ -1,6 +1,7 @@
[
{
"id": 1,
"ssd": true,
"name": "High CPU 0.25",
"vcpus": 0.25,
"memory": 0.256,
@ -10,6 +11,7 @@
},
{
"id": 2,
"ssd": true,
"name": "High CPU 0.75",
"vcpus": 0.5,
"memory": 0.768,
@ -19,6 +21,7 @@
},
{
"id": 3,
"ssd": true,
"name": "High CPU 1.75",
"vcpus": 1,
"memory": 1.8,
@ -28,6 +31,7 @@
},
{
"id": 4,
"ssd": true,
"name": "High CPU 3.75",
"vcpus": 2,
"memory": 3.8,
@ -37,6 +41,7 @@
},
{
"id": 5,
"ssd": true,
"name": "High CPU 7.75",
"vcpus": 4,
"memory": 7.8,
@ -46,6 +51,7 @@
},
{
"id": 6,
"ssd": true,
"name": "High CPU 15.75",
"vcpus": 8,
"memory": 15.8,
@ -55,6 +61,7 @@
},
{
"id": 7,
"ssd": true,
"name": "General 3.75",
"vcpus": 1,
"memory": 3.8,
@ -64,6 +71,7 @@
},
{
"id": 8,
"ssd": true,
"name": "General 7.75",
"vcpus": 2,
"memory": 7.8,
@ -73,6 +81,7 @@
},
{
"id": 9,
"ssd": true,
"name": "General 15.75",
"vcpus": 4,
"memory": 15.8,
@ -82,6 +91,7 @@
},
{
"id": 10,
"ssd": true,
"name": "General 31.75",
"vcpus": 8,
"memory": 31.8,
@ -91,6 +101,7 @@
},
{
"id": 11,
"ssd": true,
"name": "High RAM 15.75",
"vcpus": 2,
"memory": 15.8,
@ -100,6 +111,7 @@
},
{
"id": 12,
"ssd": true,
"name": "High RAM 31.75",
"vcpus": 4,
"memory": 31.8,
@ -109,6 +121,7 @@
},
{
"id": 13,
"ssd": true,
"name": "High RAM 63.75",
"vcpus": 8,
"memory": 63.8,
@ -118,6 +131,7 @@
},
{
"id": 14,
"ssd": false,
"name": "Fast Disk 31.75",
"vcpus": 4,
"memory": 31.8,
@ -127,6 +141,7 @@
},
{
"id": 15,
"ssd": false,
"name": "Fast Disk 63.75",
"vcpus": 8,
"memory": 63.8,
@ -136,6 +151,7 @@
},
{
"id": 16,
"ssd": false,
"name": "Big Disk 15.75",
"vcpus": 2,
"memory": 15.8,
@ -145,6 +161,7 @@
},
{
"id": 17,
"ssd": false,
"name": "Big Disk 31.75",
"vcpus": 4,
"memory": 31.8,
@ -154,6 +171,7 @@
},
{
"id": 18,
"ssd": false,
"name": "Big Disk 63.75",
"vcpus": 8,
"memory": 63.8,

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

@ -1,4 +1,5 @@
import { default as defaultState } from './state';
import isEmpty from 'lodash.isempty';
const selectedGroups = groups =>
groups.filter(group => group.selected).map(group => group.name);
@ -34,9 +35,16 @@ const filterReducer = (state = defaultState, action) => {
)
.filter(
pack =>
selectedGroups(action.filters.groups).length > 0 ?
selectedGroups(action.filters.groups).includes(pack.group) :
true
isEmpty(action.filters.diskType)
? true
: pack.ssd === action.filters.diskType.ssd ||
!pack.ssd === action.filters.diskType.magnetic
)
.filter(
pack =>
selectedGroups(action.filters.groups).length > 0
? selectedGroups(action.filters.groups).includes(pack.group)
: true
)
};

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

@ -6,6 +6,10 @@ const state = {
cost: { min: 0.016, max: 2.318 },
ram: { min: 0.256, max: 63.8 },
disk: { min: 0.01, max: 4.9 },
diskType: {
magnetic: true,
ssd: true
},
groups: [
{ name: 'Compute Optimized', selected: false },
{ name: 'Memory Optimized', selected: false },

55
packages/ui-toolkit/src/form/base/toggle.js
View File

@ -32,20 +32,26 @@ const StyledInput = Input.extend`
const Label = styled.label`
color: rgb(100, 100, 100);
position: absolute;
width: ${remcalc(22)};
height: ${remcalc(22)};
width: ${remcalc(18)};
height: ${remcalc(18)};
top: 0;
box-sizing: border-box;
background-color: rgb(255, 255, 255);
box-shadow: ${insetShaddow};
border: ${border.unchecked};
box-shadow: none;
border: 1px solid ${props => props.theme.grey};
cursor: pointer;
${is('checkbox')`
border-radius: ${borderRadius};
border-radius: 4px;
width: ${remcalc(18)};
height: ${remcalc(18)};
`};
${is('radio')`
border-radius: ${remcalc(11)};
width: ${remcalc(18)};
height: ${remcalc(18)};
border-radius: 50%;
`};
${is('error')`
@ -65,12 +71,13 @@ const Label = styled.label`
opacity: 0;
content: '';
position: absolute;
width: ${remcalc(10)};
height: ${remcalc(10)};
border-radius: ${remcalc(5)};
background-color: ${props => props.theme.secondaryActive};
top: ${remcalc(6)};
left: ${remcalc(6)};
width: ${remcalc(6)};
height: ${remcalc(6)};
border-radius: 50%;
background-color: ${props => props.theme.text};
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
`};
@ -79,31 +86,25 @@ const Label = styled.label`
opacity: 0;
content: '';
position: absolute;
width: ${unitcalc(1.5)};
height: ${remcalc(4)};
width: ${remcalc(6)};
height: ${remcalc(2)};
background: transparent;
top: ${remcalc(7)};
left: ${remcalc(7)};
border: ${unitcalc(0.5)} solid ${props => props.theme.secondaryActive};
top: ${remcalc(5)};
left: ${remcalc(4)};
border: ${remcalc(2)} solid ${props => props.theme.secondaryActive};
border-top: none;
border-right: none;
transform: rotate(-45deg);
}
`};
&:hover {
&::after {
opacity: 0.3;
}
}
`;
const InnerContainer = styled.div`
display: inline-block;
vertical-align: text-bottom;
margin-right: ${unitcalc(2)};
width: ${unitcalc(4)};
height: ${unitcalc(4)};
margin-right: ${remcalc(8)};
width: ${remcalc(18)};
height: ${remcalc(18)};
position: relative;
`;
@ -126,7 +127,7 @@ const ToggleBase = ({ container = null, type = 'radio' }) =>
const toggle = (
<InnerContainer {...types} type={type}>
<StyledInput {...rest} {...oldValue} id={newValue.id} type={type} />
<StyledInput {...rest} id={newValue.id} type={type} />
<Label
{...types}
htmlFor={newValue.id}

20
packages/ui-toolkit/src/form/checkbox.js
View File

@ -1,11 +1,29 @@
import styled from 'styled-components';
import typography from '../typography';
import BaseInput from './base/input';
import BaseToggle from './base/toggle';
import Baseline from '../baseline';
import React from 'react';
const Li = styled.li`
list-style-type: none;
${typography.fontFamily};
${typography.normal};
`;
const Ul = styled.ul`
margin: 0;
padding: 0;
`;
const CheckboxItem = BaseInput(({ children, id, ...rest }) => (
<Li {...rest}>{children}</Li>
));
const Checkbox = Baseline(
BaseInput(
BaseToggle({
container: CheckboxItem,
type: 'checkbox'
})
)
@ -17,3 +35,5 @@ const Checkbox = Baseline(
export default ({ children, ...rest }) => (
<Checkbox {...rest}>{children}</Checkbox>
);
export const CheckboxList = Baseline(Ul);

2
packages/ui-toolkit/src/form/index.js
View File

@ -1,4 +1,4 @@
export { default as Checkbox } from './checkbox';
export { default as Checkbox, CheckboxList } from './checkbox';
export { default as Fieldset } from './fieldset';
export { default as FormGroup } from './group';
export { default as Input } from './input';

1
packages/ui-toolkit/src/index.js
View File

@ -76,6 +76,7 @@ export {
export {
Checkbox,
CheckboxList,
Fieldset,
FormGroup,
Input,

2
packages/ui-toolkit/src/slider/react-input-range/input-range/input-range.jsx
View File

@ -621,7 +621,7 @@ export default class InputRange extends Component {
this.props,
this.isMultiValue()
);
let percentages = valueTransformer.getPercentagesFromValues(
const percentages = valueTransformer.getPercentagesFromValues(
values,
this.props.minValue,
this.props.maxValue

4
yarn.lock
View File

@ -6775,6 +6775,10 @@ lodash.isarraylike@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/lodash.isarraylike/-/lodash.isarraylike-4.2.0.tgz#4623310ab318804b667ddc3619058137559400c4"
lodash.isempty@^4.4.0:
version "4.4.0"
resolved "https://registry.yarnpkg.com/lodash.isempty/-/lodash.isempty-4.4.0.tgz#6f86cbedd8be4ec987be9aaf33c9684db1b31e7e"
lodash.isequal@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"