without throwing 1`] = `
/>
0.256
@@ -424,7 +573,7 @@ exports[`renders 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 without throwing 1`] = `
50.688
@@ -453,7 +602,7 @@ exports[`renders 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 without throwing 1`] = `
without throwing 1`] = `
/>
0.25
@@ -514,7 +663,7 @@ exports[`renders 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 without throwing 1`] = `
3.25
@@ -543,7 +692,7 @@ exports[`renders 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 without throwing 1`] = `
without throwing 1`] = `
/>
0.01
@@ -604,7 +753,7 @@ exports[`renders 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 without throwing 1`] = `
107.26
@@ -633,7 +782,7 @@ exports[`renders 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 without throwing 1`] = `
without throwing 1`] = `
/>
0.016
@@ -694,7 +843,7 @@ exports[`renders 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 without throwing 1`] = `
0.525
@@ -723,7 +872,7 @@ exports[`renders 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 without throwing 1`] = `
+
`;
diff --git a/packages/my-joyent/src/components/filters/__tests__/filters.spec.js b/packages/my-joyent/src/components/filters/__tests__/filters.spec.js
index 35335e15..73a327f8 100644
--- a/packages/my-joyent/src/components/filters/__tests__/filters.spec.js
+++ b/packages/my-joyent/src/components/filters/__tests__/filters.spec.js
@@ -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
without throwing', () => {
const tree = renderer
.create(
-
-
-
+
+
+
+
+
)
.toJSON();
expect(tree).toMatchSnapshot();
diff --git a/packages/my-joyent/src/components/filters/filters.js b/packages/my-joyent/src/components/filters/filters.js
index 0ceb433a..0e81b14b 100644
--- a/packages/my-joyent/src/components/filters/filters.js
+++ b/packages/my-joyent/src/components/filters/filters.js
@@ -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;
@@ -74,13 +79,13 @@ 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')
- });
+ packages.length > 1 &&
+ 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 (
Choose package
- Filter by package type
+ Filter by package type
{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
+
diskTypeChange(params)}
+ onSubmit={e => {}}
+ />
);
diff --git a/packages/my-joyent/src/components/home/home.js b/packages/my-joyent/src/components/home/home.js
index a40fd155..2f3c0042 100644
--- a/packages/my-joyent/src/components/home/home.js
+++ b/packages/my-joyent/src/components/home/home.js
@@ -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}
/>
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 674ea770..ba8ea483 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
@@ -265,7 +265,7 @@ exports[`renders without throwing 1`] = `
- SSD
+ Magnetic
(
@@ -30,8 +30,7 @@ const Package = ({
{disk} TB disk
-
SSD
-
+
{ssd ? 'SSD' : 'Magnetic'}
{group}
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 4a6dc0d4..75489903 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
@@ -336,7 +336,7 @@ exports[`renders
without throwing 1`] = `
- SSD
+ Magnetic
without throwing 1`] = `
- SSD
+ Magnetic
without throwing 1`] = `
- SSD
+ Magnetic
without throwing 1`] = `
- SSD
+ Magnetic
without throwing 1`] = `
- SSD
+ Magnetic
without throwing 1`] = `
- SSD
+ Magnetic
without throwing 1`] = `
margin-left: -0.5rem;
}
-.c37 {
+.c45 {
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;
}
-.c41 {
+.c49 {
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;
}
-.c25 {
+.c24 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@@ -189,6 +189,93 @@ exports[`renders
without throwing 1`] = `
font-weight: 600;
}
+.c24::-moz-focus-inner,
+.c24[type='button']::-moz-focus-inner,
+.c24[type='reset']::-moz-focus-inner,
+.c24[type='submit']::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+
+.c24:-moz-focusring,
+.c24[type='button']:-moz-focusring,
+.c24[type='reset']:-moz-focusring,
+.c24[type='submit']:-moz-focusring {
+ outline: 0.0625rem dotted ButtonText;
+}
+
+.c24:focus {
+ outline: 0;
+ text-decoration: none;
+}
+
+.c24:hover {
+ border: solid 0.0625rem;
+}
+
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
+ background-image: none;
+ outline: 0;
+}
+
+.c24[disabled] {
+ cursor: not-allowed;
+ pointer-events: none;
+}
+
+.c24 + button {
+ margin-left: 1.25rem;
+}
+
+.c25 {
+ 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;
+}
+
.c25::-moz-focus-inner,
.c25[type='button']::-moz-focus-inner,
.c25[type='reset']::-moz-focus-inner,
@@ -229,94 +316,7 @@ exports[`renders
without throwing 1`] = `
margin-left: 1.25rem;
}
-.c26 {
- 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;
-}
-
-.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;
-}
-
-.c26:-moz-focusring,
-.c26[type='button']:-moz-focusring,
-.c26[type='reset']:-moz-focusring,
-.c26[type='submit']:-moz-focusring {
- outline: 0.0625rem dotted ButtonText;
-}
-
-.c26:focus {
- outline: 0;
- text-decoration: none;
-}
-
-.c26:hover {
- border: solid 0.0625rem;
-}
-
-.c26:active,
-.c26:active:hover,
-.c26:active:focus {
- background-image: none;
- outline: 0;
-}
-
-.c26[disabled] {
- cursor: not-allowed;
- pointer-events: none;
-}
-
-.c26 + button {
- margin-left: 1.25rem;
-}
-
-.c48 {
+.c56 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@@ -361,43 +361,43 @@ exports[`renders
without throwing 1`] = `
border: solid 0.0625rem;
}
-.c48::-moz-focus-inner,
-.c48[type='button']::-moz-focus-inner,
-.c48[type='reset']::-moz-focus-inner,
-.c48[type='submit']::-moz-focus-inner {
+.c56::-moz-focus-inner,
+.c56[type='button']::-moz-focus-inner,
+.c56[type='reset']::-moz-focus-inner,
+.c56[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
-.c48:-moz-focusring,
-.c48[type='button']:-moz-focusring,
-.c48[type='reset']:-moz-focusring,
-.c48[type='submit']:-moz-focusring {
+.c56:-moz-focusring,
+.c56[type='button']:-moz-focusring,
+.c56[type='reset']:-moz-focusring,
+.c56[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
-.c48:focus {
+.c56:focus {
outline: 0;
text-decoration: none;
}
-.c48:hover {
+.c56:hover {
border: solid 0.0625rem;
}
-.c48:active,
-.c48:active:hover,
-.c48:active:focus {
+.c56:active,
+.c56:active:hover,
+.c56:active:focus {
background-image: none;
outline: 0;
}
-.c48[disabled] {
+.c56[disabled] {
cursor: not-allowed;
pointer-events: none;
}
-.c48 + button {
+.c56 + button {
margin-left: 1.25rem;
}
@@ -436,16 +436,6 @@ exports[`renders
without throwing 1`] = `
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;
@@ -471,7 +461,134 @@ exports[`renders
without throwing 1`] = `
box-shadow: none;
}
-.c29 {
+.c42 {
+ font-family: sans-serif;
+ font-size: 100%;
+ line-height: 1.15;
+ margin: 0;
+ overflow: visible;
+ display: none;
+}
+
+.c42[type='checkbox'],
+.c42[type='radio'] {
+ box-sizing: border-box;
+ padding: 0;
+}
+
+.c42[type='number']::-webkit-inner-spin-button,
+.c42[type='number']::-webkit-outer-spin-button {
+ height: auto;
+}
+
+.c42[type='search'] {
+ -webkit-appearance: textfield;
+ -moz-appearance: textfield;
+ appearance: textfield;
+ outline-offset: -0.125rem;
+}
+
+.c42[type='search']::-webkit-search-cancel-button,
+.c42[type='search']::-webkit-search-decoration {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+}
+
+.c42::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ -moz-appearance: button;
+ appearance: button;
+ font: inherit;
+}
+
+.c42:checked + label::after {
+ opacity: 1;
+}
+
+.c42:selected + label::after {
+ opacity: 1;
+}
+
+.c42:disabled + label {
+ background-color: rgb(249,249,249);
+}
+
+.c42:disabled + label::after {
+ opacity: 0.3;
+}
+
+.c43 {
+ 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;
+}
+
+.c43::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);
+}
+
+.c41 {
+ display: inline-block;
+ vertical-align: text-bottom;
+ margin-right: 0.5rem;
+ width: 1.125rem;
+ height: 1.125rem;
+ position: relative;
+}
+
+.c40 {
+ list-style-type: none;
+ font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+ font-weight: 400;
+}
+
+.c38 {
+ margin: 0;
+ padding: 0;
+}
+
+.c39 {
+ 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;
+}
+
+.c28 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
@@ -482,6 +599,17 @@ exports[`renders
without throwing 1`] = `
font-weight: bold;
}
+.c36 {
+ 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;
+}
+
.c8 {
position: relative;
margin-bottom: 0.75rem;
@@ -517,7 +645,7 @@ exports[`renders
without throwing 1`] = `
top: 0.1875rem;
}
-.c33 {
+.c32 {
font-size: 0.8125rem;
position: absolute;
top: 0.875rem;
@@ -525,7 +653,7 @@ exports[`renders
without throwing 1`] = `
color: #464646;
}
-.c35 {
+.c34 {
font-size: 0.8125rem;
position: absolute;
top: 0.875rem;
@@ -533,7 +661,7 @@ exports[`renders
without throwing 1`] = `
color: #464646;
}
-.c34 {
+.c33 {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@@ -553,17 +681,17 @@ exports[`renders
without throwing 1`] = `
margin-top: 0.125rem;
}
-.c34::active {
+.c33::active {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
-.c34::focus {
+.c33::focus {
box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
}
-.c31 {
+.c30 {
background: #D8D8D8;
cursor: pointer;
display: block;
@@ -571,23 +699,23 @@ exports[`renders
without throwing 1`] = `
position: relative;
}
-.c32 {
+.c31 {
background: #364ACD;
height: 100%;
position: absolute;
}
-.c30 {
+.c29 {
position: relative;
min-height: 0.625rem;
}
-.c28 {
+.c27 {
margin-bottom: 0.625rem;
margin-top: 0.75rem;
}
-.c43 {
+.c51 {
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;
@@ -615,7 +743,7 @@ exports[`renders
without throwing 1`] = `
transition: all 300ms ease;
}
-.c39 {
+.c47 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@@ -653,7 +781,7 @@ exports[`renders
without throwing 1`] = `
transition: all 300ms ease;
}
-.c40 {
+.c48 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@@ -682,7 +810,7 @@ exports[`renders
without throwing 1`] = `
flex-direction: row;
}
-.c42 {
+.c50 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@@ -708,7 +836,7 @@ exports[`renders
without throwing 1`] = `
transform: translateY(-50%);
}
-.c45 {
+.c53 {
display: inline-block;
-webkit-flex-direction: column;
-ms-flex-direction: column;
@@ -724,14 +852,14 @@ exports[`renders
without throwing 1`] = `
justify-content: flex-end;
}
-.c44 {
+.c52 {
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;
}
-.c46 {
+.c54 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
-webkit-flex-grow: 1;
@@ -742,7 +870,7 @@ exports[`renders
without throwing 1`] = `
flex-basis: 5.625rem;
}
-.c47 {
+.c55 {
display: inline-block;
-webkit-flex-direction: column;
-ms-flex-direction: column;
@@ -783,24 +911,45 @@ exports[`renders
without throwing 1`] = `
margin: 0;
}
-.c27 {
+.c35 {
+ margin-top: 0.75rem;
+ min-width: 12.5rem;
+}
+
+.c35 label {
+ font-size: 0.8125rem;
+}
+
+.c37 {
+ 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;
+}
+
+.c26 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
-.c27 > div {
+.c26 > div {
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
}
-.c27 > div:not(:last-child) {
+.c26 > div:not(:last-child) {
margin-right: 2.25rem;
}
-.c24 {
+.c23 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -827,12 +976,12 @@ exports[`renders
without throwing 1`] = `
margin-bottom: 0.5rem;
}
-.c38 {
+.c46 {
margin-right: 1.125rem;
margin-bottom: 1.125rem;
}
-.c36 {
+.c44 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -853,7 +1002,7 @@ exports[`renders
without throwing 1`] = `
}
@media only screen and (min-width:0em) {
- .c37 {
+ .c45 {
-webkit-flex-basis: 100%;
-ms-flex-basis: 100%;
flex-basis: 100%;
@@ -863,7 +1012,7 @@ exports[`renders
without throwing 1`] = `
}
@media only screen and (min-width:48em) {
- .c37 {
+ .c45 {
-webkit-flex-basis: 50%;
-ms-flex-basis: 50%;
flex-basis: 50%;
@@ -873,7 +1022,7 @@ exports[`renders
without throwing 1`] = `
}
@media only screen and (min-width:64em) {
- .c37 {
+ .c45 {
-webkit-flex-basis: 33.333333333333336%;
-ms-flex-basis: 33.333333333333336%;
flex-basis: 33.333333333333336%;
@@ -883,7 +1032,7 @@ exports[`renders
without throwing 1`] = `
}
@media only screen and (min-width:75em) {
- .c37 {
+ .c45 {
-webkit-flex-basis: 25%;
-ms-flex-basis: 25%;
flex-basis: 25%;
@@ -893,7 +1042,7 @@ exports[`renders
without throwing 1`] = `
}
@media only screen and (min-width:0em) {
- .c41 {
+ .c49 {
-webkit-flex-basis: 50%;
-ms-flex-basis: 50%;
flex-basis: 50%;
@@ -1054,37 +1203,37 @@ exports[`renders
without throwing 1`] = `
Choose package