diff --git a/packages/my-joyent/package.json b/packages/my-joyent/package.json index dedf4da2..32e0d16c 100644 --- a/packages/my-joyent/package.json +++ b/packages/my-joyent/package.json @@ -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", diff --git a/packages/my-joyent/src/components/diskTypeForm/__tests__/__snapshots__/index.spec.js.snap b/packages/my-joyent/src/components/diskTypeForm/__tests__/__snapshots__/index.spec.js.snap new file mode 100644 index 00000000..da210bf7 --- /dev/null +++ b/packages/my-joyent/src/components/diskTypeForm/__tests__/__snapshots__/index.spec.js.snap @@ -0,0 +1,264 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders 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; +} + +
+
+ + Disk + +
    +
    +
    +
  • +
    + +
    + Magnetic +
  • +
    +
    +
    +
    +
  • +
    + +
    + SSD +
  • +
    +
    +
+
+
+`; diff --git a/packages/my-joyent/src/components/diskTypeForm/__tests__/index.spec.js b/packages/my-joyent/src/components/diskTypeForm/__tests__/index.spec.js new file mode 100644 index 00000000..16cfbdbe --- /dev/null +++ b/packages/my-joyent/src/components/diskTypeForm/__tests__/index.spec.js @@ -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 without throwing', () => { + const tree = renderer + .create( + + + + + + ) + .toJSON(); + expect(tree).toMatchSnapshot(); +}); diff --git a/packages/my-joyent/src/components/diskTypeForm/index.js b/packages/my-joyent/src/components/diskTypeForm/index.js new file mode 100644 index 00000000..b5c16ced --- /dev/null +++ b/packages/my-joyent/src/components/diskTypeForm/index.js @@ -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 }) => ( +
handleSubmit(params => onChange(params))}> + + Disk + + + Magnetic + + + SSD + + + +
+); + +export default reduxForm({ form: 'magnetic' })(DiskTypeForm); 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 ae0f7da1..6a5cb1ce 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`] = ` -.c6 { +.c5 { font-family: sans-serif; font-size: 100%; line-height: 1.15; @@ -49,6 +49,93 @@ exports[`renders 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 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 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 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 without throwing 1`] = ` color: #464646; } -.c16 { +.c15 { font-size: 0.8125rem; position: absolute; top: 0.875rem; @@ -222,7 +350,7 @@ exports[`renders without throwing 1`] = ` color: #464646; } -.c15 { +.c14 { -webkit-appearance: none; -moz-appearance: none; appearance: none; @@ -242,17 +370,17 @@ exports[`renders 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 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 without throwing 1`] = ` Choose package
`; 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
@@ -1474,30 +1724,30 @@ exports[`renders without throwing 1`] = ` className="c2" >
@@ -1506,58 +1756,58 @@ exports[`renders without throwing 1`] = ` per hour
0.256 GB RAM
0.25 vCPUs
0.01 TB disk
SSD
Compute Optimized @@ -1569,27 +1819,27 @@ exports[`renders without throwing 1`] = `
@@ -1598,58 +1848,58 @@ exports[`renders without throwing 1`] = ` per hour
0.768 GB RAM
0.5 vCPUs
0.025 TB disk
SSD
Compute Optimized @@ -1661,27 +1911,27 @@ exports[`renders without throwing 1`] = `
@@ -1690,58 +1940,58 @@ exports[`renders without throwing 1`] = ` per hour
1.8 GB RAM
1 vCPUs
0.05 TB disk
SSD
Compute Optimized @@ -1753,27 +2003,27 @@ exports[`renders without throwing 1`] = `
@@ -1782,58 +2032,58 @@ exports[`renders without throwing 1`] = ` per hour
3.8 GB RAM
1 vCPUs
0.5 TB disk
SSD
General Purpose @@ -1845,27 +2095,27 @@ exports[`renders without throwing 1`] = `
@@ -1874,58 +2124,58 @@ exports[`renders without throwing 1`] = ` per hour
3.8 GB RAM
2 vCPUs
0.1 TB disk
SSD
Compute Optimized @@ -1937,27 +2187,27 @@ exports[`renders without throwing 1`] = `
@@ -1966,58 +2216,58 @@ exports[`renders without throwing 1`] = ` per hour
7.8 GB RAM
2 vCPUs
0.1 TB disk
SSD
General Purpose @@ -2029,27 +2279,27 @@ exports[`renders without throwing 1`] = `
@@ -2058,58 +2308,58 @@ exports[`renders without throwing 1`] = ` per hour
15.8 GB RAM
2 vCPUs
0.1 TB disk
SSD
Memory Optimized @@ -2121,27 +2371,27 @@ exports[`renders without throwing 1`] = `
@@ -2150,58 +2400,58 @@ exports[`renders without throwing 1`] = ` per hour
7.8 GB RAM
4 vCPUs
0.2 TB disk
SSD
Compute Optimized @@ -2213,27 +2463,27 @@ exports[`renders without throwing 1`] = `
@@ -2242,58 +2492,58 @@ exports[`renders without throwing 1`] = ` per hour
15.8 GB RAM
4 vCPUs
0.2 TB disk
SSD
General Purpose @@ -2305,27 +2555,27 @@ exports[`renders without throwing 1`] = `
@@ -2334,58 +2584,58 @@ exports[`renders without throwing 1`] = ` per hour
15.8 GB RAM
2 vCPUs
1.2 TB disk
- SSD + Magnetic
Storage Optimized @@ -2397,27 +2647,27 @@ exports[`renders without throwing 1`] = `
@@ -2426,58 +2676,58 @@ exports[`renders without throwing 1`] = ` per hour
31.8 GB RAM
4 vCPUs
0.1 TB disk
SSD
Memory Optimized @@ -2489,27 +2739,27 @@ exports[`renders without throwing 1`] = `
@@ -2518,58 +2768,58 @@ exports[`renders without throwing 1`] = ` per hour
15.8 GB RAM
8 vCPUs
0.4 TB disk
SSD
Compute Optimized @@ -2581,27 +2831,27 @@ exports[`renders without throwing 1`] = `
@@ -2610,58 +2860,58 @@ exports[`renders without throwing 1`] = ` per hour
31.8 GB RAM
8 vCPUs
0.4 TB disk
SSD
General Purpose @@ -2673,27 +2923,27 @@ exports[`renders without throwing 1`] = `
@@ -2702,58 +2952,58 @@ exports[`renders without throwing 1`] = ` per hour
31.8 GB RAM
4 vCPUs
2.4 TB disk
- SSD + Magnetic
Storage Optimized @@ -2765,27 +3015,27 @@ exports[`renders without throwing 1`] = `
@@ -2794,58 +3044,58 @@ exports[`renders without throwing 1`] = ` per hour
63.8 GB RAM
8 vCPUs
0.4 TB disk
SSD
Memory Optimized @@ -2857,27 +3107,27 @@ exports[`renders without throwing 1`] = `
@@ -2886,58 +3136,58 @@ exports[`renders without throwing 1`] = ` per hour
31.8 GB RAM
4 vCPUs
0.8 TB disk
- SSD + Magnetic
Storage Optimized @@ -2949,27 +3199,27 @@ exports[`renders without throwing 1`] = `
@@ -2978,58 +3228,58 @@ exports[`renders without throwing 1`] = ` per hour
63.8 GB RAM
8 vCPUs
4.9 TB disk
- SSD + Magnetic
Storage Optimized @@ -3041,27 +3291,27 @@ exports[`renders without throwing 1`] = `
@@ -3070,58 +3320,58 @@ exports[`renders without throwing 1`] = ` per hour
63.8 GB RAM
8 vCPUs
1.6 TB disk
- SSD + Magnetic
Storage Optimized @@ -3138,7 +3388,7 @@ exports[`renders without throwing 1`] = ` className="c2" > 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 65ebb017..d572fd87 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 @@ -1164,7 +1164,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
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 ) }; diff --git a/packages/my-joyent/src/state/state.js b/packages/my-joyent/src/state/state.js index 31ab5cd9..3e1fdb85 100644 --- a/packages/my-joyent/src/state/state.js +++ b/packages/my-joyent/src/state/state.js @@ -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 }, diff --git a/packages/ui-toolkit/src/form/base/toggle.js b/packages/ui-toolkit/src/form/base/toggle.js index cde28564..e9015575 100644 --- a/packages/ui-toolkit/src/form/base/toggle.js +++ b/packages/ui-toolkit/src/form/base/toggle.js @@ -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 = ( - +