From 520205d1b9cc5ab88a100cb3c23f200529b821b9 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Wed, 20 Sep 2017 10:35:44 +0100 Subject: [PATCH] fix(my-joyent): improve design fidelity --- packages/my-joyent/src/assets/cloud.svg | 18 + .../__snapshots__/index.spec.js.snap | 162 +++ .../components/empty/__tests__/index.spec.js | 21 + .../my-joyent/src/components/empty/index.js | 45 + .../__snapshots__/filters.spec.js.snap | 300 +++--- .../src/components/filters/filters.js | 40 +- .../my-joyent/src/components/home/home.js | 5 +- .../__snapshots__/index.spec.js.snap | 2 +- .../__tests__/__snapshots__/list.spec.js.snap | 2 +- .../my-joyent/src/components/packages/list.js | 7 +- .../my-joyent/src/components/sliders/index.js | 7 +- .../__snapshots__/index.spec.js.snap | 948 +++++++++--------- .../my-joyent/src/containers/home/index.js | 3 +- .../__snapshots__/index.spec.js.snap | 2 +- packages/ui-toolkit/src/card/footer.js | 3 +- packages/ui-toolkit/src/slider/index.js | 9 +- .../input-range/input-range.jsx | 1 + .../react-input-range/input-range/label.jsx | 14 +- .../react-input-range/input-range/slider.jsx | 2 +- 19 files changed, 970 insertions(+), 621 deletions(-) create mode 100644 packages/my-joyent/src/assets/cloud.svg create mode 100644 packages/my-joyent/src/components/empty/__tests__/__snapshots__/index.spec.js.snap create mode 100644 packages/my-joyent/src/components/empty/__tests__/index.spec.js create mode 100644 packages/my-joyent/src/components/empty/index.js diff --git a/packages/my-joyent/src/assets/cloud.svg b/packages/my-joyent/src/assets/cloud.svg new file mode 100644 index 00000000..7a03130b --- /dev/null +++ b/packages/my-joyent/src/assets/cloud.svg @@ -0,0 +1,18 @@ + +joyent-cloud-1 +Created using Figma + + + + + + + + + + + + + + + diff --git a/packages/my-joyent/src/components/empty/__tests__/__snapshots__/index.spec.js.snap b/packages/my-joyent/src/components/empty/__tests__/__snapshots__/index.spec.js.snap new file mode 100644 index 00000000..0e87cd87 --- /dev/null +++ b/packages/my-joyent/src/components/empty/__tests__/__snapshots__/index.spec.js.snap @@ -0,0 +1,162 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders without throwing 1`] = ` +.c4 { + font-size: 0.9375rem; + line-height: 1.5; + 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; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; +} + +.c5 { + display: inline-block; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + +.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; + position: relative; + height: auto; + min-height: 7.875rem; + margin-bottom: 0.625rem; + border: 0.0625rem solid; + 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: 4px; + border: 1px solid; + box-shadow: 0px 2px 0px rgba(0,0,0,0.05); + min-height: 11.5625rem; + min-width: 292px; + cursor: pointer; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; +} + +.c3 { + font-weight: 600; + font-size: 0.9375rem; + color: #808080; + -webkit-flex-basis: 0; + -ms-flex-basis: 0; + flex-basis: 0; + 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; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-flex-grow: 0; + -ms-flex-grow: 0; + flex-grow: 0; + margin-bottom: 0.5rem; +} + +.c6 { + font-weight: normal; +} + +.c0 { + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -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; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c2 { + margin-bottom: 18px; +} + +
+ +
+ + There are no packages that meet your criteria + +
+
+ + Please adjust the filters to see some packages here + +
+
+`; diff --git a/packages/my-joyent/src/components/empty/__tests__/index.spec.js b/packages/my-joyent/src/components/empty/__tests__/index.spec.js new file mode 100644 index 00000000..b047ae6b --- /dev/null +++ b/packages/my-joyent/src/components/empty/__tests__/index.spec.js @@ -0,0 +1,21 @@ +/** + * @jest-environment jsdom + */ + +import React from 'react'; +import renderer from 'react-test-renderer'; +import 'jest-styled-components'; + +import { Router } from '@mocks/'; +import Empty from '../'; + +it('renders without throwing', () => { + const tree = renderer + .create( + + + + ) + .toJSON(); + expect(tree).toMatchSnapshot(); +}); diff --git a/packages/my-joyent/src/components/empty/index.js b/packages/my-joyent/src/components/empty/index.js new file mode 100644 index 00000000..ce66f388 --- /dev/null +++ b/packages/my-joyent/src/components/empty/index.js @@ -0,0 +1,45 @@ +import React from 'react'; +import styled from 'styled-components'; +import remcalc from 'remcalc'; + +import { Card, CardTitle } from 'joyent-ui-toolkit'; + +import Cloud from '../../assets/cloud.svg'; + +const Title = styled(CardTitle)` + font-weight: 600; + font-size: ${remcalc(15)}; + color: #808080; + flex-basis: 0; + display: flex; + align-items: center; + justify-content: center; + flex-grow: 0; + margin-bottom: ${remcalc(8)}; +`; + +const SubTitle = styled(Title)` + font-weight: normal; +`; + +const CardStyled = styled(Card)` + flex-direction: column; + justify-content: center; + align-items: center; + display: flex; +`; + +const StyledCloud = styled(Cloud)` + /* Prettier Comment */ + margin-bottom: 18px; +`; + +const Empty = () => ( + + + There are no packages that meet your criteria + Please adjust the filters to see some packages here + +); + +export default Empty; diff --git a/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap b/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap index 7ce0e0ce..ffa37fb8 100644 --- a/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap +++ b/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders without throwing 1`] = ` -.c12 { +.c6 { font-family: sans-serif; font-size: 100%; line-height: 1.15; @@ -49,47 +49,47 @@ exports[`renders without throwing 1`] = ` font-weight: 600; } -.c12::-moz-focus-inner, -.c12[type='button']::-moz-focus-inner, -.c12[type='reset']::-moz-focus-inner, -.c12[type='submit']::-moz-focus-inner { +.c6::-moz-focus-inner, +.c6[type='button']::-moz-focus-inner, +.c6[type='reset']::-moz-focus-inner, +.c6[type='submit']::-moz-focus-inner { border-style: none; padding: 0; } -.c12:-moz-focusring, -.c12[type='button']:-moz-focusring, -.c12[type='reset']:-moz-focusring, -.c12[type='submit']:-moz-focusring { +.c6:-moz-focusring, +.c6[type='button']:-moz-focusring, +.c6[type='reset']:-moz-focusring, +.c6[type='submit']:-moz-focusring { outline: 0.0625rem dotted ButtonText; } -.c12:focus { +.c6:focus { outline: 0; text-decoration: none; } -.c12:hover { +.c6:hover { border: solid 0.0625rem; } -.c12:active, -.c12:active:hover, -.c12:active:focus { +.c6:active, +.c6:active:hover, +.c6:active:focus { background-image: none; outline: 0; } -.c12[disabled] { +.c6[disabled] { cursor: not-allowed; pointer-events: none; } -.c12 + button { +.c6 + button { margin-left: 1.25rem; } -.c13 { +.c7 { font-family: sans-serif; font-size: 100%; line-height: 1.15; @@ -136,47 +136,66 @@ exports[`renders without throwing 1`] = ` font-weight: 600; } -.c13::-moz-focus-inner, -.c13[type='button']::-moz-focus-inner, -.c13[type='reset']::-moz-focus-inner, -.c13[type='submit']::-moz-focus-inner { +.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; } -.c13:-moz-focusring, -.c13[type='button']:-moz-focusring, -.c13[type='reset']:-moz-focusring, -.c13[type='submit']:-moz-focusring { +.c7:-moz-focusring, +.c7[type='button']:-moz-focusring, +.c7[type='reset']:-moz-focusring, +.c7[type='submit']:-moz-focusring { outline: 0.0625rem dotted ButtonText; } -.c13:focus { +.c7:focus { outline: 0; text-decoration: none; } -.c13:hover { +.c7:hover { border: solid 0.0625rem; } -.c13:active, -.c13:active:hover, -.c13:active:focus { +.c7:active, +.c7:active:hover, +.c7:active:focus { background-image: none; outline: 0; } -.c13[disabled] { +.c7[disabled] { cursor: not-allowed; pointer-events: none; } -.c13 + button { +.c7 + button { margin-left: 1.25rem; } -.c1 { +.c2 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; +} + +.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; +} + +.c10 { font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; font-weight: 400; font-size: 0.9375rem; @@ -187,25 +206,23 @@ exports[`renders without throwing 1`] = ` font-weight: bold; } -.c7 { - font-weight: 600; - font-size: 0.625rem; - color: #464646; +.c14 { + font-size: 0.8125rem; position: absolute; top: 0.875rem; right: auto; + color: #464646; } -.c9 { - font-weight: 600; - font-size: 0.625rem; - color: #464646; +.c16 { + font-size: 0.8125rem; position: absolute; top: 0.875rem; right: 1px; + color: #464646; } -.c8 { +.c15 { -webkit-appearance: none; -moz-appearance: none; appearance: none; @@ -225,17 +242,17 @@ exports[`renders without throwing 1`] = ` margin-top: 0.125rem; } -.c8::active { +.c15::active { -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); } -.c8::focus { +.c15::focus { box-shadow: 0 0 0 5px rgba(63,81,181,0.2); } -.c10 { +.c17 { -webkit-appearance: none; -moz-appearance: none; appearance: none; @@ -255,17 +272,17 @@ exports[`renders without throwing 1`] = ` margin-top: 0.125rem; } -.c10::active { +.c17::active { -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); } -.c10::focus { +.c17::focus { box-shadow: 0 0 0 5px rgba(63,81,181,0.2); } -.c5 { +.c12 { background: #D8D8D8; cursor: pointer; display: block; @@ -273,40 +290,40 @@ exports[`renders without throwing 1`] = ` position: relative; } -.c6 { +.c13 { background: #364ACD; height: 100%; position: absolute; } -.c4 { +.c11 { position: relative; min-height: 0.625rem; } -.c3 { +.c9 { margin-bottom: 0.625rem; margin-top: 0.75rem; } -.c2 { +.c8 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } -.c2 > div { +.c8 > div { -webkit-flex-grow: 1; -ms-flex-grow: 1; flex-grow: 1; } -.c2 > div:not(:last-child) { +.c8 > div:not(:last-child) { margin-right: 2.25rem; } -.c11 { +.c5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -316,47 +333,107 @@ exports[`renders without throwing 1`] = ` -ms-flex-pack: justify; justify-content: space-between; width: 100%; - margin-top: 2.25rem; + margin-bottom: 1.125rem; } .c0 { width: 100%; } +.c1 { + line-height: 24px; + font-size: 21px; + margin-bottom: 1.125rem; +} + +.c3 { + margin-bottom: 0.5rem; +} +
+
+
+ + + + +
+ +
+ +
without throwing 1`] = ` /> 0.256 @@ -377,7 +454,7 @@ exports[`renders without throwing 1`] = ` aria-valuemax={50.688} aria-valuemin={0.256} aria-valuenow={0.256} - className="c8" + className="c15" draggable="false" onKeyDown={[Function]} onMouseDown={[Function]} @@ -395,7 +472,7 @@ exports[`renders without throwing 1`] = ` 50.688 @@ -406,7 +483,7 @@ exports[`renders without throwing 1`] = ` aria-valuemax={50.688} aria-valuemin={0.256} aria-valuenow={50.688} - className="c10" + className="c17" draggable="false" onKeyDown={[Function]} onMouseDown={[Function]} @@ -427,26 +504,26 @@ exports[`renders without throwing 1`] = `
without throwing 1`] = ` /> 0.25 @@ -467,7 +544,7 @@ exports[`renders without throwing 1`] = ` aria-valuemax={3.25} aria-valuemin={0.25} aria-valuenow={0.25} - className="c8" + className="c15" draggable="false" onKeyDown={[Function]} onMouseDown={[Function]} @@ -485,7 +562,7 @@ exports[`renders without throwing 1`] = ` 3.25 @@ -496,7 +573,7 @@ exports[`renders without throwing 1`] = ` aria-valuemax={3.25} aria-valuemin={0.25} aria-valuenow={3.25} - className="c10" + className="c17" draggable="false" onKeyDown={[Function]} onMouseDown={[Function]} @@ -517,26 +594,26 @@ exports[`renders without throwing 1`] = `
without throwing 1`] = ` /> 0.01 @@ -557,7 +634,7 @@ exports[`renders without throwing 1`] = ` aria-valuemax={107.26} aria-valuemin={0.01} aria-valuenow={0.01} - className="c8" + className="c15" draggable="false" onKeyDown={[Function]} onMouseDown={[Function]} @@ -575,7 +652,7 @@ exports[`renders without throwing 1`] = ` 107.26 @@ -586,7 +663,7 @@ exports[`renders without throwing 1`] = ` aria-valuemax={107.26} aria-valuemin={0.01} aria-valuenow={107.26} - className="c10" + className="c17" draggable="false" onKeyDown={[Function]} onMouseDown={[Function]} @@ -607,26 +684,26 @@ exports[`renders without throwing 1`] = `
without throwing 1`] = ` /> 0.016 @@ -647,7 +724,7 @@ exports[`renders without throwing 1`] = ` aria-valuemax={0.525} aria-valuemin={0.016} aria-valuenow={0.016} - className="c8" + className="c15" draggable="false" onKeyDown={[Function]} onMouseDown={[Function]} @@ -665,7 +742,7 @@ exports[`renders without throwing 1`] = ` 0.525 @@ -676,7 +753,7 @@ exports[`renders without throwing 1`] = ` aria-valuemax={0.525} aria-valuemin={0.016} aria-valuenow={0.525} - className="c10" + className="c17" draggable="false" onKeyDown={[Function]} onMouseDown={[Function]} @@ -696,46 +773,5 @@ exports[`renders without throwing 1`] = `
-
-
- - - - -
- -
`; diff --git a/packages/my-joyent/src/components/filters/filters.js b/packages/my-joyent/src/components/filters/filters.js index 216b8148..448e89dc 100644 --- a/packages/my-joyent/src/components/filters/filters.js +++ b/packages/my-joyent/src/components/filters/filters.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import styled from 'styled-components'; import remcalc from 'remcalc'; import isEqual from 'lodash.isequal'; -import { FormLabel, Button } from 'joyent-ui-toolkit'; +import { Label, Button } from 'joyent-ui-toolkit'; import { default as defaultState } from '@state/state'; import Sliders from '@components/sliders'; @@ -11,7 +11,7 @@ const GroupWrapper = styled.section` display: flex; justify-content: space-between; width: 100%; - margin-top: ${remcalc(36)}; + margin-bottom: ${remcalc(18)}; `; const Wrapper = styled.section` @@ -19,6 +19,17 @@ const Wrapper = styled.section` width: 100%; `; +const Title = styled(Label)` + line-height: 24px; + font-size: 21px; + margin-bottom: ${remcalc(18)}; +`; + +const Subtitle = styled(Label)` + /* Comment for prettier */ + margin-bottom: ${remcalc(8)}; +`; + class Filters extends Component { constructor(props) { super(props); @@ -47,22 +58,15 @@ class Filters extends Component { cpuSliderChange, diskSliderChange, costSliderChange, - groupChange + groupChange, + packages } = this.props; const { reset } = this.state; - return ( - Choose a package - + Choose package + Filter by package type
{filters.groups @@ -88,6 +92,16 @@ class Filters extends Component { Reset Filters + + ); } diff --git a/packages/my-joyent/src/components/home/home.js b/packages/my-joyent/src/components/home/home.js index e9a6aca8..a40fd155 100644 --- a/packages/my-joyent/src/components/home/home.js +++ b/packages/my-joyent/src/components/home/home.js @@ -15,7 +15,7 @@ import { const Main = styled.main` /* Prettier stahp */ margin-bottom: 40px; -` +`; class Home extends Component { constructor(props) { @@ -56,7 +56,7 @@ class Home extends Component { render() { const { showMessage } = this.state; - const { filters, onFilterReset } = this.props; + const { filters, onFilterReset, packages } = this.props; const _msg = showMessage ? ( {_msg} this.changeGroup(group)} diff --git a/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap b/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap index fd98980d..0dd1652e 100644 --- a/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap +++ b/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap @@ -175,7 +175,7 @@ exports[`renders without throwing 1`] = ` font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; - color: rgba(73,73,73,0.5); + color: #bdbdbd; -webkit-transition: all 300ms ease; transition: all 300ms ease; } diff --git a/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap b/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap index 17680757..a363ffe7 100644 --- a/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap +++ b/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap @@ -184,7 +184,7 @@ exports[`renders without throwing 1`] = ` font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; - color: rgba(73,73,73,0.5); + color: #bdbdbd; -webkit-transition: all 300ms ease; transition: all 300ms ease; } diff --git a/packages/my-joyent/src/components/packages/list.js b/packages/my-joyent/src/components/packages/list.js index 40346631..aad7a338 100644 --- a/packages/my-joyent/src/components/packages/list.js +++ b/packages/my-joyent/src/components/packages/list.js @@ -4,6 +4,7 @@ import styled from 'styled-components'; import { Col } from 'react-styled-flexboxgrid'; import Package from '@components/package'; +import Empty from '@components/empty'; const ListStyled = styled.section` display: flex; @@ -49,8 +50,10 @@ class Packages extends Component { /> )) - ) : ( - 'There are no packages that meet your criteria' + ) : ( + + + )} ); diff --git a/packages/my-joyent/src/components/sliders/index.js b/packages/my-joyent/src/components/sliders/index.js index 4d2cfd55..0330d8cb 100644 --- a/packages/my-joyent/src/components/sliders/index.js +++ b/packages/my-joyent/src/components/sliders/index.js @@ -21,10 +21,12 @@ const Sliders = ({ cpuSliderChange, diskSliderChange, costSliderChange, - reset + reset, + greyed }) => ( without throwing 1`] = ` margin-left: -0.5rem; } -.c34 { +.c38 { box-sizing: border-box; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; @@ -29,7 +29,7 @@ exports[`renders without throwing 1`] = ` padding-left: 0.5rem; } -.c38 { +.c42 { box-sizing: border-box; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; @@ -141,7 +141,7 @@ exports[`renders without throwing 1`] = ` margin-left: 1.25rem; } -.c31 { +.c25 { font-family: sans-serif; font-size: 100%; line-height: 1.15; @@ -189,47 +189,47 @@ exports[`renders without throwing 1`] = ` font-weight: 600; } -.c31::-moz-focus-inner, -.c31[type='button']::-moz-focus-inner, -.c31[type='reset']::-moz-focus-inner, -.c31[type='submit']::-moz-focus-inner { +.c25::-moz-focus-inner, +.c25[type='button']::-moz-focus-inner, +.c25[type='reset']::-moz-focus-inner, +.c25[type='submit']::-moz-focus-inner { border-style: none; padding: 0; } -.c31:-moz-focusring, -.c31[type='button']:-moz-focusring, -.c31[type='reset']:-moz-focusring, -.c31[type='submit']:-moz-focusring { +.c25:-moz-focusring, +.c25[type='button']:-moz-focusring, +.c25[type='reset']:-moz-focusring, +.c25[type='submit']:-moz-focusring { outline: 0.0625rem dotted ButtonText; } -.c31:focus { +.c25:focus { outline: 0; text-decoration: none; } -.c31:hover { +.c25:hover { border: solid 0.0625rem; } -.c31:active, -.c31:active:hover, -.c31:active:focus { +.c25:active, +.c25:active:hover, +.c25:active:focus { background-image: none; outline: 0; } -.c31[disabled] { +.c25[disabled] { cursor: not-allowed; pointer-events: none; } -.c31 + button { +.c25 + button { margin-left: 1.25rem; } -.c32 { +.c26 { font-family: sans-serif; font-size: 100%; line-height: 1.15; @@ -276,47 +276,47 @@ exports[`renders without throwing 1`] = ` font-weight: 600; } -.c32::-moz-focus-inner, -.c32[type='button']::-moz-focus-inner, -.c32[type='reset']::-moz-focus-inner, -.c32[type='submit']::-moz-focus-inner { +.c26::-moz-focus-inner, +.c26[type='button']::-moz-focus-inner, +.c26[type='reset']::-moz-focus-inner, +.c26[type='submit']::-moz-focus-inner { border-style: none; padding: 0; } -.c32:-moz-focusring, -.c32[type='button']:-moz-focusring, -.c32[type='reset']:-moz-focusring, -.c32[type='submit']:-moz-focusring { +.c26:-moz-focusring, +.c26[type='button']:-moz-focusring, +.c26[type='reset']:-moz-focusring, +.c26[type='submit']:-moz-focusring { outline: 0.0625rem dotted ButtonText; } -.c32:focus { +.c26:focus { outline: 0; text-decoration: none; } -.c32:hover { +.c26:hover { border: solid 0.0625rem; } -.c32:active, -.c32:active:hover, -.c32:active:focus { +.c26:active, +.c26:active:hover, +.c26:active:focus { background-image: none; outline: 0; } -.c32[disabled] { +.c26[disabled] { cursor: not-allowed; pointer-events: none; } -.c32 + button { +.c26 + button { margin-left: 1.25rem; } -.c45 { +.c49 { font-family: sans-serif; font-size: 100%; line-height: 1.15; @@ -361,43 +361,43 @@ exports[`renders without throwing 1`] = ` border: solid 0.0625rem; } -.c45::-moz-focus-inner, -.c45[type='button']::-moz-focus-inner, -.c45[type='reset']::-moz-focus-inner, -.c45[type='submit']::-moz-focus-inner { +.c49::-moz-focus-inner, +.c49[type='button']::-moz-focus-inner, +.c49[type='reset']::-moz-focus-inner, +.c49[type='submit']::-moz-focus-inner { border-style: none; padding: 0; } -.c45:-moz-focusring, -.c45[type='button']:-moz-focusring, -.c45[type='reset']:-moz-focusring, -.c45[type='submit']:-moz-focusring { +.c49:-moz-focusring, +.c49[type='button']:-moz-focusring, +.c49[type='reset']:-moz-focusring, +.c49[type='submit']:-moz-focusring { outline: 0.0625rem dotted ButtonText; } -.c45:focus { +.c49:focus { outline: 0; text-decoration: none; } -.c45:hover { +.c49:hover { border: solid 0.0625rem; } -.c45:active, -.c45:active:hover, -.c45:active:focus { +.c49:active, +.c49:active:hover, +.c49:active:focus { background-image: none; outline: 0; } -.c45[disabled] { +.c49[disabled] { cursor: not-allowed; pointer-events: none; } -.c45 + button { +.c49 + button { margin-left: 1.25rem; } @@ -427,6 +427,25 @@ exports[`renders without throwing 1`] = ` margin: 0.1875rem 0.625rem 0.1875rem 0.625rem; } +.c21 { + 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; +} + +.c23 { + 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; +} + .c14 { font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; font-weight: 400; @@ -452,7 +471,7 @@ exports[`renders without throwing 1`] = ` box-shadow: none; } -.c20 { +.c29 { font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; font-weight: 400; font-size: 0.9375rem; @@ -498,25 +517,23 @@ exports[`renders without throwing 1`] = ` top: 0.1875rem; } -.c26 { - font-weight: 600; - font-size: 0.625rem; - color: #464646; +.c33 { + font-size: 0.8125rem; position: absolute; top: 0.875rem; right: auto; + color: #464646; } -.c28 { - font-weight: 600; - font-size: 0.625rem; - color: #464646; +.c35 { + font-size: 0.8125rem; position: absolute; top: 0.875rem; right: 1px; + color: #464646; } -.c27 { +.c34 { -webkit-appearance: none; -moz-appearance: none; appearance: none; @@ -536,17 +553,17 @@ exports[`renders without throwing 1`] = ` margin-top: 0.125rem; } -.c27::active { +.c34::active { -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); } -.c27::focus { +.c34::focus { box-shadow: 0 0 0 5px rgba(63,81,181,0.2); } -.c29 { +.c36 { -webkit-appearance: none; -moz-appearance: none; appearance: none; @@ -566,17 +583,17 @@ exports[`renders without throwing 1`] = ` margin-top: 0.125rem; } -.c29::active { +.c36::active { -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); } -.c29::focus { +.c36::focus { box-shadow: 0 0 0 5px rgba(63,81,181,0.2); } -.c24 { +.c31 { background: #D8D8D8; cursor: pointer; display: block; @@ -584,23 +601,23 @@ exports[`renders without throwing 1`] = ` position: relative; } -.c25 { +.c32 { background: #364ACD; height: 100%; position: absolute; } -.c23 { +.c30 { position: relative; min-height: 0.625rem; } -.c22 { +.c28 { margin-bottom: 0.625rem; margin-top: 0.75rem; } -.c40 { +.c44 { font-size: 0.9375rem; line-height: 1.5; font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; @@ -628,7 +645,7 @@ exports[`renders without throwing 1`] = ` transition: all 300ms ease; } -.c36 { +.c40 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -666,7 +683,7 @@ exports[`renders without throwing 1`] = ` transition: all 300ms ease; } -.c37 { +.c41 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -695,7 +712,7 @@ exports[`renders without throwing 1`] = ` flex-direction: row; } -.c39 { +.c43 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -721,7 +738,7 @@ exports[`renders without throwing 1`] = ` transform: translateY(-50%); } -.c42 { +.c46 { display: inline-block; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -737,14 +754,14 @@ exports[`renders without throwing 1`] = ` justify-content: flex-end; } -.c41 { +.c45 { 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; } -.c43 { +.c47 { font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; font-weight: 400; -webkit-flex-grow: 1; @@ -755,7 +772,7 @@ exports[`renders without throwing 1`] = ` flex-basis: 5.625rem; } -.c44 { +.c48 { display: inline-block; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -765,7 +782,7 @@ exports[`renders without throwing 1`] = ` font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; - color: rgba(73,73,73,0.5); + color: #bdbdbd; -webkit-transition: all 300ms ease; transition: all 300ms ease; } @@ -796,24 +813,24 @@ exports[`renders without throwing 1`] = ` margin: 0; } -.c21 { +.c27 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } -.c21 > div { +.c27 > div { -webkit-flex-grow: 1; -ms-flex-grow: 1; flex-grow: 1; } -.c21 > div:not(:last-child) { +.c27 > div:not(:last-child) { margin-right: 2.25rem; } -.c30 { +.c24 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -823,19 +840,29 @@ exports[`renders without throwing 1`] = ` -ms-flex-pack: justify; justify-content: space-between; width: 100%; - margin-top: 2.25rem; + margin-bottom: 1.125rem; } .c19 { width: 100%; } -.c35 { +.c20 { + line-height: 24px; + font-size: 21px; + margin-bottom: 1.125rem; +} + +.c22 { + margin-bottom: 0.5rem; +} + +.c39 { margin-right: 1.125rem; margin-bottom: 1.125rem; } -.c33 { +.c37 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -856,7 +883,7 @@ exports[`renders without throwing 1`] = ` } @media only screen and (min-width:0em) { - .c34 { + .c38 { -webkit-flex-basis: 100%; -ms-flex-basis: 100%; flex-basis: 100%; @@ -866,7 +893,7 @@ exports[`renders without throwing 1`] = ` } @media only screen and (min-width:48em) { - .c34 { + .c38 { -webkit-flex-basis: 50%; -ms-flex-basis: 50%; flex-basis: 50%; @@ -876,7 +903,7 @@ exports[`renders without throwing 1`] = ` } @media only screen and (min-width:64em) { - .c34 { + .c38 { -webkit-flex-basis: 33.333333333333336%; -ms-flex-basis: 33.333333333333336%; flex-basis: 33.333333333333336%; @@ -886,7 +913,7 @@ exports[`renders without throwing 1`] = ` } @media only screen and (min-width:75em) { - .c34 { + .c38 { -webkit-flex-basis: 25%; -ms-flex-basis: 25%; flex-basis: 25%; @@ -896,7 +923,7 @@ exports[`renders without throwing 1`] = ` } @media only screen and (min-width:0em) { - .c38 { + .c42 { -webkit-flex-basis: 50%; -ms-flex-basis: 50%; flex-basis: 50%; @@ -1052,36 +1079,86 @@ exports[`renders without throwing 1`] = ` className="c19" > +
+
+ + + + +
+ +
+ +
without throwing 1`] = ` /> 0.256 @@ -1102,7 +1179,7 @@ exports[`renders without throwing 1`] = ` aria-valuemax={63.8} aria-valuemin={0.256} aria-valuenow={0.256} - className="c27" + className="c34" draggable="false" onKeyDown={[Function]} onMouseDown={[Function]} @@ -1120,7 +1197,7 @@ exports[`renders without throwing 1`] = ` 63.8 @@ -1131,7 +1208,7 @@ exports[`renders without throwing 1`] = ` aria-valuemax={63.8} aria-valuemin={0.256} aria-valuenow={63.8} - className="c29" + className="c36" draggable="false" onKeyDown={[Function]} onMouseDown={[Function]} @@ -1152,26 +1229,26 @@ exports[`renders without throwing 1`] = `
without throwing 1`] = ` /> 0.25 @@ -1192,7 +1269,7 @@ exports[`renders without throwing 1`] = ` aria-valuemax={8} aria-valuemin={0.25} aria-valuenow={0.25} - className="c27" + className="c34" draggable="false" onKeyDown={[Function]} onMouseDown={[Function]} @@ -1210,7 +1287,7 @@ exports[`renders without throwing 1`] = ` 8 @@ -1221,7 +1298,7 @@ exports[`renders without throwing 1`] = ` aria-valuemax={8} aria-valuemin={0.25} aria-valuenow={8} - className="c29" + className="c36" draggable="false" onKeyDown={[Function]} onMouseDown={[Function]} @@ -1242,26 +1319,26 @@ exports[`renders without throwing 1`] = `
without throwing 1`] = ` /> 0.01 @@ -1282,7 +1359,7 @@ exports[`renders without throwing 1`] = ` aria-valuemax={4.9} aria-valuemin={0.01} aria-valuenow={0.01} - className="c27" + className="c34" draggable="false" onKeyDown={[Function]} onMouseDown={[Function]} @@ -1300,7 +1377,7 @@ exports[`renders without throwing 1`] = ` 4.9 @@ -1311,7 +1388,7 @@ exports[`renders without throwing 1`] = ` aria-valuemax={4.9} aria-valuemin={0.01} aria-valuenow={4.9} - className="c29" + className="c36" draggable="false" onKeyDown={[Function]} onMouseDown={[Function]} @@ -1332,26 +1409,26 @@ exports[`renders without throwing 1`] = `
without throwing 1`] = ` /> 0.016 @@ -1372,7 +1449,7 @@ exports[`renders without throwing 1`] = ` aria-valuemax={2.131} aria-valuemin={0.016} aria-valuenow={0.016} - className="c27" + className="c34" draggable="false" onKeyDown={[Function]} onMouseDown={[Function]} @@ -1390,7 +1467,7 @@ exports[`renders without throwing 1`] = ` 2.131 @@ -1401,7 +1478,7 @@ exports[`renders without throwing 1`] = ` aria-valuemax={2.131} aria-valuemin={0.016} aria-valuenow={2.131} - className="c29" + className="c36" draggable="false" onKeyDown={[Function]} onMouseDown={[Function]} @@ -1421,77 +1498,36 @@ exports[`renders without throwing 1`] = `
-
-
- - - - -
- -
@@ -1500,58 +1536,58 @@ exports[`renders without throwing 1`] = ` per hour
0.256 GB RAM
0.25 vCPUs
0.1 TB disk
SSD
Compute Optimized @@ -1563,27 +1599,27 @@ exports[`renders without throwing 1`] = `
@@ -1592,58 +1628,58 @@ exports[`renders without throwing 1`] = ` per hour
0.768 GB RAM
0.5 vCPUs
0.25 TB disk
SSD
Compute Optimized @@ -1655,27 +1691,27 @@ exports[`renders without throwing 1`] = `
@@ -1684,58 +1720,58 @@ exports[`renders without throwing 1`] = ` per hour
1.8 GB RAM
1 vCPUs
0.5 TB disk
SSD
Compute Optimized @@ -1747,27 +1783,27 @@ exports[`renders without throwing 1`] = `
@@ -1776,58 +1812,58 @@ exports[`renders without throwing 1`] = ` per hour
3.8 GB RAM
2 vCPUs
1 TB disk
SSD
Compute Optimized @@ -1839,27 +1875,27 @@ exports[`renders without throwing 1`] = `
@@ -1868,58 +1904,58 @@ exports[`renders without throwing 1`] = ` per hour
7.8 GB RAM
4 vCPUs
2 TB disk
SSD
Compute Optimized @@ -1931,27 +1967,27 @@ exports[`renders without throwing 1`] = `
@@ -1960,58 +1996,58 @@ exports[`renders without throwing 1`] = ` per hour
15.8 GB RAM
8 vCPUs
4 TB disk
SSD
Compute Optimized @@ -2023,27 +2059,27 @@ exports[`renders without throwing 1`] = `
@@ -2052,58 +2088,58 @@ exports[`renders without throwing 1`] = ` per hour
3.8 GB RAM
1 vCPUs
0.5 TB disk
SSD
General Purpose @@ -2115,27 +2151,27 @@ exports[`renders without throwing 1`] = `
@@ -2144,58 +2180,58 @@ exports[`renders without throwing 1`] = ` per hour
7.8 GB RAM
2 vCPUs
1 TB disk
SSD
General Purpose @@ -2207,27 +2243,27 @@ exports[`renders without throwing 1`] = `
@@ -2236,58 +2272,58 @@ exports[`renders without throwing 1`] = ` per hour
15.8 GB RAM
4 vCPUs
2 TB disk
SSD
General Purpose @@ -2299,27 +2335,27 @@ exports[`renders without throwing 1`] = `
@@ -2328,58 +2364,58 @@ exports[`renders without throwing 1`] = ` per hour
31.8 GB RAM
8 vCPUs
4 TB disk
SSD
General Purpose @@ -2391,27 +2427,27 @@ exports[`renders without throwing 1`] = `
@@ -2420,58 +2456,58 @@ exports[`renders without throwing 1`] = ` per hour
15.8 GB RAM
2 vCPUs
1 TB disk
SSD
Memory Optimized @@ -2483,27 +2519,27 @@ exports[`renders without throwing 1`] = `
@@ -2512,58 +2548,58 @@ exports[`renders without throwing 1`] = ` per hour
31.8 GB RAM
4 vCPUs
2 TB disk
SSD
Memory Optimized @@ -2575,27 +2611,27 @@ exports[`renders without throwing 1`] = `
@@ -2604,58 +2640,58 @@ exports[`renders without throwing 1`] = ` per hour
63.8 GB RAM
8 vCPUs
4 TB disk
SSD
Memory Optimized @@ -2667,27 +2703,27 @@ exports[`renders without throwing 1`] = `
@@ -2696,58 +2732,58 @@ exports[`renders without throwing 1`] = ` per hour
31.8 GB RAM
4 vCPUs
8 TB disk
SSD
Storage Optimized @@ -2759,27 +2795,27 @@ exports[`renders without throwing 1`] = `
@@ -2788,58 +2824,58 @@ exports[`renders without throwing 1`] = ` per hour
63.8 GB RAM
8 vCPUs
16 TB disk
SSD
Storage Optimized @@ -2851,27 +2887,27 @@ exports[`renders without throwing 1`] = `
@@ -2880,58 +2916,58 @@ exports[`renders without throwing 1`] = ` per hour
15.8 GB RAM
2 vCPUs
12 TB disk
SSD
Storage Optimized @@ -2943,27 +2979,27 @@ exports[`renders without throwing 1`] = `
@@ -2972,58 +3008,58 @@ exports[`renders without throwing 1`] = ` per hour
31.8 GB RAM
4 vCPUs
24 TB disk
SSD
Storage Optimized @@ -3035,27 +3071,27 @@ exports[`renders without throwing 1`] = `
@@ -3064,58 +3100,58 @@ exports[`renders without throwing 1`] = ` per hour
63.8 GB RAM
8 vCPUs
49 TB disk
SSD
Storage Optimized @@ -3132,7 +3168,7 @@ exports[`renders without throwing 1`] = ` className="c2" > diff --git a/packages/my-joyent/src/containers/home/index.js b/packages/my-joyent/src/containers/home/index.js index f2283291..04d28097 100644 --- a/packages/my-joyent/src/containers/home/index.js +++ b/packages/my-joyent/src/containers/home/index.js @@ -14,7 +14,8 @@ const HomeHOC = (props) => ( const mapStateToProps = state => { return { - filters: state.app.filters + filters: state.app.filters, + packages: state.app.packages.length }; }; diff --git a/packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap b/packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap index 77a1ae99..d185c678 100644 --- a/packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap +++ b/packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap @@ -184,7 +184,7 @@ exports[`renders without throwing 1`] = ` font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; - color: rgba(73,73,73,0.5); + color: #bdbdbd; -webkit-transition: all 300ms ease; transition: all 300ms ease; } diff --git a/packages/ui-toolkit/src/card/footer.js b/packages/ui-toolkit/src/card/footer.js index 41cc6655..d87bf446 100644 --- a/packages/ui-toolkit/src/card/footer.js +++ b/packages/ui-toolkit/src/card/footer.js @@ -3,6 +3,7 @@ import is from 'styled-is'; import styled from 'styled-components'; import Baseline from '../baseline'; import typography from '../typography'; +import theme from '../theme'; import remcalc from 'remcalc'; import PropTypes from 'prop-types'; import Title from './title'; @@ -26,7 +27,7 @@ const Span = styled.span` font-weight: 500; text-transform: uppercase; - color: rgba(73, 73, 73, 0.5); + color: ${theme.greyLight}; transition: all 300ms ease; ${is('selected')` diff --git a/packages/ui-toolkit/src/slider/index.js b/packages/ui-toolkit/src/slider/index.js index ca99ccf8..f0e5c4ec 100644 --- a/packages/ui-toolkit/src/slider/index.js +++ b/packages/ui-toolkit/src/slider/index.js @@ -59,16 +59,17 @@ Slider.propTypes = { disabled: PropTypes.bool, draggableTrack: PropTypes.bool, onChangeStart: PropTypes.func, - children: PropTypes.node + children: PropTypes.node, + greyed: PropTypes.bool, }; Slider.defaultProps = { onChangeComplete: () => {}, onChange: () => {}, formatLabel: value => - (value.toString().split('.')[1] || []).length > 3 - ? Math.round(value).toFixed(3) - : value, + (value.toString().split('.')[1] || []).length > 3 + ? Math.round(value).toFixed(3) + : value, onChangeStart: () => {}, step: 1 }; diff --git a/packages/ui-toolkit/src/slider/react-input-range/input-range/input-range.jsx b/packages/ui-toolkit/src/slider/react-input-range/input-range/input-range.jsx index f982428b..da00a142 100755 --- a/packages/ui-toolkit/src/slider/react-input-range/input-range/input-range.jsx +++ b/packages/ui-toolkit/src/slider/react-input-range/input-range/input-range.jsx @@ -642,6 +642,7 @@ export default class InputRange extends Component { classNames={this.props.classNames} formatLabel={this.props.formatLabel} key={key} + greyed={this.props.greyed} maxValue={maxValue} minValue={minValue} onSliderDrag={this.handleSliderDrag} diff --git a/packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx b/packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx index f047bbf6..290a0be2 100755 --- a/packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx +++ b/packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx @@ -6,12 +6,11 @@ import remcalc from 'remcalc'; import theme from '../../../theme'; const Span = styled.span` - font-weight: 600; - font-size: ${remcalc(10)}; - color: ${theme.secondary}; + font-size: ${remcalc(13)}; position: absolute; top: ${remcalc(14)}; right: ${props => (props.type === 'max' ? '1px' : 'auto')}; + color: ${props => (props.greyed ? theme.greyLight : theme.secondary)}; `; /** @@ -26,7 +25,11 @@ export default function Label(props) { ? props.formatLabel(props.children, props.type) : props.children; - return {labelValue}; + return ( + + {labelValue} + + ); } /** @@ -40,5 +43,6 @@ Label.propTypes = { children: PropTypes.node.isRequired, classNames: PropTypes.objectOf(PropTypes.string), formatLabel: PropTypes.func, - type: PropTypes.string + type: PropTypes.string, + greyed: PropTypes.bool }; diff --git a/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx b/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx index 325c3b1d..e1ca9b3e 100755 --- a/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx +++ b/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx @@ -289,7 +289,7 @@ export default class Slider extends Component { this.node = node; }} > -