diff --git a/joyent.code-workspace b/joyent.code-workspace new file mode 100644 index 00000000..e45b0e97 --- /dev/null +++ b/joyent.code-workspace @@ -0,0 +1,11 @@ +{ + "folders": [ + { + "path": "prototypes/create-instance-icons" + }, + { + "path": "packages/ui-toolkit" + } + ], + "settings": {} +} \ No newline at end of file diff --git a/package.json b/package.json index b89011b1..ff7fb2b1 100644 --- a/package.json +++ b/package.json @@ -78,6 +78,7 @@ "react": "16.1.1", "react-dom": "16.1.1", "react-modal": "2.4.1", - "hoist-non-react-statics": "2.3.1" + "hoist-non-react-statics": "2.3.1", + "webpack-sources": "1.0.1" } } diff --git a/packages/my-joy-beta/package.json b/packages/my-joy-beta/package.json index a371132b..581744c7 100644 --- a/packages/my-joy-beta/package.json +++ b/packages/my-joy-beta/package.json @@ -61,7 +61,7 @@ "jest-snapshot": "^21.2.1", "jest-styled-components": "^4.9.0", "jest-transform-graphql": "^2.1.0", - "joyent-react-scripts": "^3.1.0", + "joyent-react-scripts": "^3.1.1", "react-test-renderer": "^16.1.1", "redrun": "^5.10.0", "serve": "^6.4.1", diff --git a/packages/my-joy-beta/src/components/instances/list.js b/packages/my-joy-beta/src/components/instances/list.js index e461cd39..3bf3f3da 100644 --- a/packages/my-joy-beta/src/components/instances/list.js +++ b/packages/my-joy-beta/src/components/instances/list.js @@ -60,7 +60,7 @@ const Item = ({ onStartSnap }) => ( - + @@ -207,7 +207,7 @@ export default ({ - +

Id

 @@ -229,10 +229,10 @@ export default ({ return (
- + - + Filter instances - - + + Sort - - + + ⁣ + {capitalizeFirstLetter(rule.instance)} + {`: be on ${rule.be} node as the instance(s) identified by the ${ + rule.type + } ${rule.match} "${rule.value}"`} + + + + + + + + Stuff + +); + +export default ListRules; diff --git a/prototypes/create-instance-icons/src/components/affinity/__tests__/__snapshots__/list.spec.js.snap b/prototypes/create-instance-icons/src/components/affinity/__tests__/__snapshots__/list.spec.js.snap new file mode 100644 index 00000000..32515a57 --- /dev/null +++ b/prototypes/create-instance-icons/src/components/affinity/__tests__/__snapshots__/list.spec.js.snap @@ -0,0 +1,784 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders without throwing 1`] = ` +.c1 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c5 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c7 { + font-size: 0.9375rem; + line-height: 1.5; + 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-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-grow: 4; + -ms-flex-grow: 4; + flex-grow: 4; + -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; +} + +.c3 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; + 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; +} + +.c4 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + margin: 0; + height: auto; + padding-top: 0; + min-width: auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.c6 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; + display: block; + height: 100%; + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} + +.c9 { + display: inline-block; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-weight: 400; + font-style: normal; + font-stretch: normal; + font-size: 0.875rem; + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; +} + +.c8 { + display: inline-block; + padding: 0 1.125rem; + font-weight: 400; +} + +.c10 { + font-weight: 400; + -webkit-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; + -webkit-flex-basis: 5.625rem; + -ms-flex-basis: 5.625rem; + flex-basis: 5.625rem; +} + +.c11 { + display: inline-block; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-weight: 400; + font-size: 0.8125rem; + font-weight: 500; + text-transform: uppercase; + color: rgba(73,73,73,0.8); + -webkit-transition: all 300ms ease; + transition: all 300ms ease; +} + +.c2 { + margin-right: 1.125rem; + margin-bottom: 1.125rem; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + min-width: 100%; + list-style: none; + padding: 0; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-top: 2.25rem; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +@media only screen and (min-width:0em) { + .c1 { + -webkit-flex-basis: 100%; + -ms-flex-basis: 100%; + flex-basis: 100%; + max-width: 100%; + display: block; + } +} + +@media only screen and (min-width:48em) { + .c1 { + -webkit-flex-basis: 50%; + -ms-flex-basis: 50%; + flex-basis: 50%; + max-width: 50%; + display: block; + } +} + +@media only screen and (min-width:64em) { + .c1 { + -webkit-flex-basis: 33.333333333333336%; + -ms-flex-basis: 33.333333333333336%; + flex-basis: 33.333333333333336%; + max-width: 33.333333333333336%; + display: block; + } +} + +@media only screen and (min-width:75em) { + .c1 { + -webkit-flex-basis: 25%; + -ms-flex-basis: 25%; + flex-basis: 25%; + max-width: 25%; + display: block; + } +} + +@media only screen and (min-width:0em) { + .c5 { + -webkit-flex-basis: 50%; + -ms-flex-basis: 50%; + flex-basis: 50%; + max-width: 50%; + display: block; + } +} + +
+
+
+
+
+
+
+ $ + 0.016 + per hour +
+
+ + 0.256 + GB RAM + +
+
+ + 0.25 + vCPUs + +
+
+ + 10 + TB disk + +
+
+ + Magnetic + +
+
+ + Compute Optimized + +
+
+
+
+
+
+
+
+
+
+
+
+ $ + 0.033 + per hour +
+
+ + 0.768 + GB RAM + +
+
+ + 0.5 + vCPUs + +
+
+ + 25 + TB disk + +
+
+ + Magnetic + +
+
+ + Compute Optimized + +
+
+
+
+
+
+
+
+
+
+
+
+ $ + 0.066 + per hour +
+
+ + 1.8 + GB RAM + +
+
+ + 1 + vCPUs + +
+
+ + 50 + TB disk + +
+
+ + Magnetic + +
+
+ + Compute Optimized + +
+
+
+
+
+
+
+
+
+
+
+
+ $ + 0.131 + per hour +
+
+ + 3.8 + GB RAM + +
+
+ + 2 + vCPUs + +
+
+ + 100 + TB disk + +
+
+ + Magnetic + +
+
+ + Compute Optimized + +
+
+
+
+
+
+
+
+
+
+
+
+ $ + 0.263 + per hour +
+
+ + 7.8 + GB RAM + +
+
+ + 4 + vCPUs + +
+
+ + 200 + TB disk + +
+
+ + Magnetic + +
+
+ + Compute Optimized + +
+
+
+
+
+
+
+
+
+
+
+
+ $ + 0.525 + per hour +
+
+ + 15.8 + GB RAM + +
+
+ + 8 + vCPUs + +
+
+ + 400 + TB disk + +
+
+ + Magnetic + +
+
+ + Compute Optimized + +
+
+
+
+
+
+
+`; diff --git a/prototypes/create-instance-icons/src/components/affinity/__tests__/list.spec.js b/prototypes/create-instance-icons/src/components/affinity/__tests__/list.spec.js new file mode 100644 index 00000000..1c4cbe5d --- /dev/null +++ b/prototypes/create-instance-icons/src/components/affinity/__tests__/list.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, PackagesMock, FiltersMock } from '@mocks/'; +import { Packages } from '../'; + +it('renders without throwing', () => { + const tree = renderer + .create( + + + + ) + .toJSON(); + expect(tree).toMatchSnapshot(); +}); diff --git a/prototypes/create-instance-icons/src/components/affinity/index.js b/prototypes/create-instance-icons/src/components/affinity/index.js new file mode 100644 index 00000000..4a53db4e --- /dev/null +++ b/prototypes/create-instance-icons/src/components/affinity/index.js @@ -0,0 +1,206 @@ +import React, { Component } from 'react'; +import { Row, Col } from 'react-styled-flexboxgrid'; +import styled from 'styled-components'; +import rndId from 'rnd-id'; +import remcalc from 'remcalc'; +import { Margin } from 'styled-components-spacing'; + +import ListRules from './List'; + +import { + ViewContainer, + H2, + Input, + Button, + H4, + CardOutlet, + Select, + CardHeader, + CardHeaderMeta, + Card, + P +} from 'joyent-ui-toolkit'; + +const MarginInline = styled(Margin)` + display: inline; +`; + +const RowMargin = styled(Row)` + margin-top: ${remcalc(-24)}; +`; + +const defaultValues = { + instance: 'must', + be: 'the same', + type: 'instance name', + match: 'equalling', + value: null +}; + +class Affinity extends Component { + constructor() { + super(); + this.state = { + rule: defaultValues, + rules: [], + open: [], + showRuleCreation: false + }; + } + + instanceChange = e => + this.setState({ + ...this.state, + rule: { ...this.state.rule, instance: e.target.value } + }); + + beChange = e => + this.setState({ + ...this.state, + rule: { ...this.state.rule, be: e.target.value } + }); + + typeChange = e => + this.setState({ + ...this.state, + rule: { ...this.state.rule, type: e.target.value } + }); + + matchChange = e => + this.setState({ + ...this.state, + rule: { ...this.state.rule, match: e.target.value } + }); + + valueChange = e => + this.setState({ + ...this.state, + rule: { ...this.state.rule, value: e.target.value, id: rndId() } + }); + + submit = () => + this.setState({ + ...this.state, + rules: [...this.state.rules, this.state.rule], + rule: defaultValues, + showRuleCreation: false + }); + + toggleForm = () => + this.setState({ showRuleCreation: !this.state.showRuleCreation }); + + open = id => this.setState({ open: this.state.open.push(id) }); + + render = () => [ + + + +

Affinity

+ + + , + + +

+ Affinity rules control the location of instances, to help reduce + traffic across networks and keep the workload balanced. With strict + rules, instances are only provisioned when the criteria is met. {' '} + + Read the docs + +

+ + , + + + {this.state.rules.length > 0 && + this.state.rules.map(rule => [ +

Affinity rules

, + + ])} + + , + + + {this.state.showRuleCreation ? ( + + + + + + +

Create an affinity rule

+ + + + + +
+

The instance

+
+
+ +
+
+

be on

+
+
+ +
+
+

node as the instance(s) identified by the

+
+
+ + + + + + + +
+
+ + +
+ + + + ) : ( + + + + )} + + + ]; +} + +export default Affinity; diff --git a/prototypes/create-instance-icons/src/components/empty/__tests__/__snapshots__/index.spec.js.snap b/prototypes/create-instance-icons/src/components/empty/__tests__/__snapshots__/index.spec.js.snap new file mode 100644 index 00000000..f9aa0981 --- /dev/null +++ b/prototypes/create-instance-icons/src/components/empty/__tests__/__snapshots__/index.spec.js.snap @@ -0,0 +1,161 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders without throwing 1`] = ` +.c4 { + font-size: 0.9375rem; + line-height: 1.5; + 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-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-grow: 4; + -ms-flex-grow: 4; + flex-grow: 4; + -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/prototypes/create-instance-icons/src/components/empty/__tests__/index.spec.js b/prototypes/create-instance-icons/src/components/empty/__tests__/index.spec.js new file mode 100644 index 00000000..b047ae6b --- /dev/null +++ b/prototypes/create-instance-icons/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/prototypes/create-instance-icons/src/components/empty/index.js b/prototypes/create-instance-icons/src/components/empty/index.js new file mode 100644 index 00000000..ac9ac879 --- /dev/null +++ b/prototypes/create-instance-icons/src/components/empty/index.js @@ -0,0 +1,25 @@ +import React from 'react'; +import styled from 'styled-components'; +import remcalc from 'remcalc'; + +import { Card, H4, H5 } from 'joyent-ui-toolkit'; + +import Cloud from '../../assets/cloud.svg'; + +const CardStyled = styled(Card)` + flex-direction: column; + justify-content: center; + align-items: center; + display: flex; + padding: ${remcalc(18)}; +`; + +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/prototypes/create-instance-icons/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap b/prototypes/create-instance-icons/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap new file mode 100644 index 00000000..4629b696 --- /dev/null +++ b/prototypes/create-instance-icons/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap @@ -0,0 +1,1007 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders without throwing 1`] = ` +.c5 { + 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-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; + font-weight: 600; + padding: 0.5625rem 1.125rem; + 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-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, +.c6[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c6:-moz-focusring, +.c6[type='button']:-moz-focusring, +.c6[type='reset']:-moz-focusring, +.c6[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c6:focus { + outline: 0; + text-decoration: none; +} + +.c6:hover { + border: solid 0.0625rem; +} + +.c6:active, +.c6:active:hover, +.c6:active:focus { + background-image: none; + outline: 0; +} + +.c6[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c6 + button { + margin-left: 1.25rem; +} + +.c2 { + font-weight: 400; + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; + text-align: left; +} + +.c13 { + font-size: 0.8125rem; + position: absolute; + top: 0.875rem; + right: auto; + color: #464646; +} + +.c15 { + font-size: 0.8125rem; + position: absolute; + top: 0.875rem; + right: 1px; + color: #464646; +} + +.c14 { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: #FFFFFF; + border: 2px solid #bdbdbd; + border-radius: 50%; + cursor: pointer; + display: block; + height: 0.875rem; + width: 0.875rem; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + outline: none; + position: absolute; + top: 0; + margin-top: 0.125rem; +} + +.c14::active { + -webkit-transform: scale(1.3); + -ms-transform: scale(1.3); + transform: scale(1.3); +} + +.c14::focus { + box-shadow: 0 0 0 5px rgba(63,81,181,0.2); +} + +.c11 { + background: #D8D8D8; + cursor: pointer; + display: block; + height: 0.25rem; + position: relative; +} + +.c12 { + background: #364ACD; + height: 100%; + position: absolute; +} + +.c10 { + position: relative; + min-height: 0.625rem; +} + +.c9 { + font-weight: 400; + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; + text-align: left; + margin-right: 0.75rem; + font-weight: bold; +} + +.c8 { + margin-bottom: 0.625rem; + margin-top: 0.75rem; +} + +.c23 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + display: none; +} + +.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; + cursor: pointer; + 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; + cursor: pointer; +} + +.c21 { + list-style-type: none; + 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; + font-weight: 400; +} + +.c21 label { + 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; +} + +.c17 { + box-sizing: border-box; + color: inherit; + display: table; + max-width: 100%; + padding: 0; + white-space: normal; + font-weight: 600; +} + +.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; +} + +.c7 > div { + -webkit-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; +} + +.c7 > div:not(:last-child) { + margin-right: 2.25rem; +} + +.c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + width: 100%; + margin-bottom: 1.125rem; +} + +.c0 { + width: 100%; +} + +.c1 { + line-height: 24px; + font-size: 21px; + margin-bottom: 1.125rem; +} + +.c3 { + margin-bottom: 0.5rem; +} + +
+ + +
+
+ + + + +
+ +
+ +
+
+ +
+
+
+ + + 0.256 + +
+ + + + 50.688 + +
+ +
+
+
+
+ +
+
+
+ + + 0.25 + +
+ + + + 3.25 + +
+ +
+
+
+
+ +
+
+
+ + + 0.01 + +
+ + + + 107.26 + +
+ +
+
+
+
+ +
+
+
+ + + 0.016 + +
+ + + + 0.525 + +
+ +
+
+
+ +
+ + Disk + +
    +
    +
    +
  • +
    + +
    + Magnetic +
    • +
    +
    +
    +
    +
  • +
    + +
    + SSD +
    • +
    +
    +
+
+ +
+
+`; diff --git a/prototypes/create-instance-icons/src/components/filters/__tests__/filters.spec.js b/prototypes/create-instance-icons/src/components/filters/__tests__/filters.spec.js new file mode 100644 index 00000000..73a327f8 --- /dev/null +++ b/prototypes/create-instance-icons/src/components/filters/__tests__/filters.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, FiltersMock, PackagesMock, Store } from '@mocks/'; +import Filters from '../filters'; + +it('renders without throwing', () => { + const tree = renderer + .create( + + + + + + ) + .toJSON(); + expect(tree).toMatchSnapshot(); +}); diff --git a/prototypes/create-instance-icons/src/components/filters/filters.js b/prototypes/create-instance-icons/src/components/filters/filters.js new file mode 100644 index 00000000..4b552727 --- /dev/null +++ b/prototypes/create-instance-icons/src/components/filters/filters.js @@ -0,0 +1,132 @@ +import React, { Component } from 'react'; +import isEqual from 'lodash.isequal'; +import { reduxForm } from 'redux-form'; +import { Margin } from 'styled-components-spacing'; +import { Col, Row } from 'react-styled-flexboxgrid'; +import { reset } from 'redux-form'; +import remcalc from 'remcalc'; +import styled from 'styled-components'; +import { default as defaultState } from '@state/state'; + +import Inputs from './inputs'; +import { returnIcon } from '../icons'; + +import { + FormGroup, + Checkbox, + Label, + H2, + H4, + P, + ViewContainer +} from 'joyent-ui-toolkit'; + +const FullWidth = styled(Margin)` + width: 100%; +,`; + +const RowMargin = styled(Row)` + margin-top: ${remcalc(-24)}; +`; + +class Filters extends Component { + constructor(props) { + super(props); + const { filters: { cpu, cost, ram, disk } } = this.props; + + this.state = { + ram, + cpu, + disk, + cost + }; + } + + handleResetClick = () => { + const { + dispatch, + filterReset, + filters: { cpu, cost, ram, disk } + } = this.props; + + filterReset(); + dispatch(reset('type')); + + this.setState({ + ram, + cpu, + disk, + cost + }); + }; + + render() { + const { + filters, + ramChange, + cpuChange, + diskChange, + costChange + } = this.props; + + return [ + + + +

Package

+ + + , + + +

+ A package defines the specs of your instance. On Triton, packages + can only increase in size.{' '} + + Read the docs + +

+ + , + + + +

Filters

+ + + , + + {filters.groups + .sort((a, b) => (a.name < b.name ? -1 : 1)) + .map((group, i) => ( + + + + {returnIcon(group.name)} + + + + + ))} + , + + ramChange(value)} + cpuChange={value => cpuChange(value)} + diskChange={value => diskChange(value)} + costChange={value => costChange(value)} + filters={filters} + disabled={isEqual(filters, defaultState.filters)} + onClick={this.handleResetClick} + /> + + ]; + } +} + +export default reduxForm({ form: 'type' })(Filters); diff --git a/prototypes/create-instance-icons/src/components/filters/index.js b/prototypes/create-instance-icons/src/components/filters/index.js new file mode 100644 index 00000000..7ade0668 --- /dev/null +++ b/prototypes/create-instance-icons/src/components/filters/index.js @@ -0,0 +1 @@ +export { default as Filters } from './filters'; diff --git a/prototypes/create-instance-icons/src/components/filters/inputs.js b/prototypes/create-instance-icons/src/components/filters/inputs.js new file mode 100644 index 00000000..bc1670db --- /dev/null +++ b/prototypes/create-instance-icons/src/components/filters/inputs.js @@ -0,0 +1,255 @@ +import React, { Component } from 'react'; +import styled from 'styled-components'; +import { + FormGroup, + FormLabel, + Input, + Select, + Button, + InputDropdown +} from 'joyent-ui-toolkit'; +import { Row, Col } from 'react-styled-flexboxgrid'; +import { Padding } from 'styled-components-spacing'; + +const RowFullWidth = styled(Row)` + width: 100%; +`; +const InputDropdownBorder = styled(InputDropdown)` + border-right: 1px solid ${props => props.theme.grey}; + margin-right: 24px; + padding-right: 24px; +`; + +const valuesToSend = (changed, target, value, name) => ({ + min: !isNaN(parseFloat(changed.min)) ? parseFloat(changed.min) : 0, + max: !isNaN(parseFloat(changed.max)) ? parseFloat(changed.max) : 0, + [target]: parseFloat(value) +}); + +class Inputs extends Component { + constructor(props) { + super(props); + const { filters: { cpu, cost, ram, disk } } = this.props; + + this.state = { + ram: { + min: ram.min > 1 ? ram.min : ram.min * 1000, + minSelected: 'MB', + max: ram.max > 1 ? ram.max : ram.max * 1000, + maxSelected: 'GB' + }, + cpu, + disk: { + min: disk.min > 1 ? disk.min : disk.min * 1000, + minSelected: 'GB', + max: disk.max > 1 ? disk.max : disk.max * 1000, + maxSelected: 'TB' + }, + cost + }; + } + + handleChange = (e, name, target) => { + const changed = this.state[name]; + const value = (e.target || {}).value; + + setTimeout(() => { + this.props[`${name}Change`](valuesToSend(changed, target, value, name)); + }, 1000); + + this.setState({ + ...this.state, + [name]: { + ...this.state[name], + [target]: value + } + }); + }; + + handleSelectChange = (e, name, target, valueTarget) => { + const value = (e.target || {}).value; + this.setState({ + ...this.state, + [name]: { + ...this.state[name], + [target]: value + } + }); + }; + + handleBlur = (e, name, target) => { + const changed = this.state[name]; + const value = (e.target || {}).value; + + this.props[`${name}Change`](valuesToSend(changed, target, value, name)); + + this.setState({ + ...this.state, + [name]: { + ...this.state[name], + [target]: value + } + }); + }; + + render() { + const { cpu, cost, ram, disk } = this.state; + const { onClick, disabled } = this.props; + + return [ + + + + RAM + + + + this.handleChange(e, 'ram', 'min')} + onBlur={e => this.handleBlur(e, 'ram', 'min')} + value={ram.min} + /> + + + to + + this.handleChange(e, 'ram', 'max')} + onBlur={e => this.handleBlur(e, 'ram', 'max')} + value={ram.max} + /> + + + + + + + Disk + + + + this.handleChange(e, 'disk', 'min')} + onBlur={e => this.handleBlur(e, 'disk', 'min')} + value={disk.min} + /> + + + to + + this.handleChange(e, 'disk', 'max')} + onBlur={e => this.handleBlur(e, 'disk', 'max')} + value={disk.max} + /> + + + + + , + + + + vCPUs + + + this.handleChange(e, 'cpu', 'min')} + onBlur={e => this.handleBlur(e, 'cpu', 'min')} + value={cpu.min} + /> + to + this.handleChange(e, 'cpu', 'max')} + onBlur={e => this.handleBlur(e, 'cpu', 'max')} + value={cpu.max} + /> + + + + + $/hour + + + this.handleChange(e, 'cost', 'min')} + onBlur={e => this.handleBlur(e, 'cost', 'min')} + value={cost.min} + /> + to + this.handleChange(e, 'cost', 'max')} + onBlur={e => this.handleBlur(e, 'cost', 'max')} + value={cost.max} + /> + + + , + + + + + + ]; + } +} + +export default Inputs; diff --git a/prototypes/create-instance-icons/src/components/home/__tests__/__snapshots__/home.spec.js.snap b/prototypes/create-instance-icons/src/components/home/__tests__/__snapshots__/home.spec.js.snap new file mode 100644 index 00000000..8c6698fa --- /dev/null +++ b/prototypes/create-instance-icons/src/components/home/__tests__/__snapshots__/home.spec.js.snap @@ -0,0 +1,46 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders without throwing 1`] = ` + + + +`; diff --git a/prototypes/create-instance-icons/src/components/home/__tests__/home.spec.js b/prototypes/create-instance-icons/src/components/home/__tests__/home.spec.js new file mode 100644 index 00000000..8731f32f --- /dev/null +++ b/prototypes/create-instance-icons/src/components/home/__tests__/home.spec.js @@ -0,0 +1,21 @@ +/** + * @jest-environment jsdom + */ + +import React from 'react'; +import ShallowRenderer from 'react-test-renderer/shallow'; +import 'jest-styled-components'; + +import { Router, FiltersMock } from '@mocks/'; +import Home from '../home'; + +it('renders without throwing', () => { + const renderer = new ShallowRenderer(); + renderer.render( + + + + ); + const tree = renderer.getRenderOutput(); + expect(tree).toMatchSnapshot(); +}); diff --git a/prototypes/create-instance-icons/src/components/home/home.js b/prototypes/create-instance-icons/src/components/home/home.js new file mode 100644 index 00000000..da443a07 --- /dev/null +++ b/prototypes/create-instance-icons/src/components/home/home.js @@ -0,0 +1,110 @@ +import React, { Component } from 'react'; +import { Row, Col } from 'react-styled-flexboxgrid'; +import { Filters } from '@components/filters'; +import PackagesHOC from '@containers/packages'; +import AffinityHOC from '@containers/affinity'; +import { Margin } from 'styled-components-spacing'; +import { + Message, + BreadcrumbItem, + Anchor, + Button, + Divider +} from 'joyent-ui-toolkit'; + +class Home extends Component { + constructor(props) { + super(props); + + this.state = { + showMessage: true + }; + } + + closeMessage = () => { + this.setState({ + showMessage: false + }); + }; + + changeValue = (key, value) => { + const { filters, onFilterChange } = this.props; + + onFilterChange({ + ...filters, + [key]: value + }); + }; + + componentWillReceiveProps = nextProps => { + const values = nextProps.form.type.values; + const type = nextProps.form.type; + if (nextProps.form !== this.props.form && type && values) { + const { filters, onFilterChange } = this.props; + + const groups = Object.keys(type.registeredFields).map(key => ({ + name: key, + selected: values[key] ? values[key] : false + })); + + console.table(groups); + onFilterChange({ + ...filters, + groups + }); + } + }; + + render() { + const { showMessage } = this.state; + const { filters, onFilterReset, packages } = this.props; + const _msg = showMessage ? ( + + Not all data centres have all configurations of instances available. + Make sure that you choose the data center that suits your requirements.{' '} + Learn More + + ) : null; + + const breadcrumbLinks = [ + { name: 'Instances', pathname: '/' }, + { name: 'Create Instance', pathname: '/' } + ].map(({ name, pathname }) => ( + + {name} + + )); + + return [ + {breadcrumbLinks}, + {_msg}, + + + , + + + this.changeValue('ram', value)} + cpuChange={value => this.changeValue('cpu', value)} + diskChange={value => this.changeValue('disk', value)} + costChange={value => this.changeValue('cost', value)} + /> + + , + + + , + + + , + + + + ]; + } +} + +export default Home; diff --git a/prototypes/create-instance-icons/src/components/home/index.js b/prototypes/create-instance-icons/src/components/home/index.js new file mode 100644 index 00000000..a0843e72 --- /dev/null +++ b/prototypes/create-instance-icons/src/components/home/index.js @@ -0,0 +1 @@ +export { default as Home } from './home'; diff --git a/prototypes/create-instance-icons/src/components/icons/index.js b/prototypes/create-instance-icons/src/components/icons/index.js new file mode 100644 index 00000000..272a1ad1 --- /dev/null +++ b/prototypes/create-instance-icons/src/components/icons/index.js @@ -0,0 +1,51 @@ +import React from 'react'; +import styled from 'styled-components'; + +import CpuIcon from '../../assets/cpu.svg'; +import GpIcon from '../../assets/gp.svg'; +import MoIcon from '../../assets/mo.svg'; +import SoIcon from '../../assets/so.svg'; +import { TooltipContainer, TooltipTarget, Tooltip } from 'joyent-ui-toolkit'; + +import { Margin } from 'styled-components-spacing'; + +const IconWrapper = styled.div` + float: left; +`; + +const Flex = styled.div` + display: flex; +`; + +export const returnIcon = group => { + let icon; + switch (group) { + case 'Compute Optimized': + icon = ; + break; + case 'General Purpose': + icon = ; + break; + case 'Memory Optimized': + icon = ; + break; + case 'Storage Optimized': + icon = ; + break; + default: + icon = ; + } + + return ( + + + + + {icon} + + + {group} + + + ); +}; diff --git a/prototypes/create-instance-icons/src/components/navigation/__tests__/__snapshots__/header.spec.js.snap b/prototypes/create-instance-icons/src/components/navigation/__tests__/__snapshots__/header.spec.js.snap new file mode 100644 index 00000000..f84c6a42 --- /dev/null +++ b/prototypes/create-instance-icons/src/components/navigation/__tests__/__snapshots__/header.spec.js.snap @@ -0,0 +1,76 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders
without throwing 1`] = ` +.c2 { + margin: 0; + font-weight: 400; + line-height: 1.875rem; + font-size: 1.5rem; + text-transform: uppercase; + font-size: 1.8125rem; + margin: 0; +} + +.c2 + p, +.c2 + small, +.c2 + h1, +.c2 + h2, +.c2 + label, +.c2 + h3, +.c2 + h4, +.c2 + h5, +.c2 + div, +.c2 + span { + margin-top: 1.5rem; +} + +.c1 { + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; + -webkit-order: 0; + -ms-flex-order: 0; + order: 0; + padding: 0.84375rem 0; +} + +.c0 { + max-height: 3.3125rem; + min-height: 3.3125rem; + padding: 0 1.125rem; + line-height: 1.5625rem; +} + +.c3 { + border-style: none; + width: 5.4375rem; + height: 1.5625rem; +} + +
+
+

+ + Triton Logo + +

+
+
+`; diff --git a/prototypes/create-instance-icons/src/components/navigation/__tests__/__snapshots__/not-found.spec.js.snap b/prototypes/create-instance-icons/src/components/navigation/__tests__/__snapshots__/not-found.spec.js.snap new file mode 100644 index 00000000..980cdd32 --- /dev/null +++ b/prototypes/create-instance-icons/src/components/navigation/__tests__/__snapshots__/not-found.spec.js.snap @@ -0,0 +1,174 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders without throwing 1`] = ` +.c5 { + font-weight: 400; + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c5 + p, +.c5 + small, +.c5 + h1, +.c5 + h2, +.c5 + label, +.c5 + h3, +.c5 + h4, +.c5 + h5, +.c5 + div, +.c5 + span { + padding-bottom: 2.25rem; +} + +.c6 { + display: inline-block; + 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-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; +} + +.c6:focus { + outline: 0; + text-decoration: none; +} + +.c6:hover { + border: solid 0.0625rem; +} + +.c6:active, +.c6:active:hover, +.c6:active:focus { + background-image: none; + outline: 0; +} + +.c6[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c0 { + margin-right: auto; + margin-left: auto; +} + +.c3 { + font-size: 2rem; + margin: 0.625rem 0; + margin: 0; + font-weight: 400; + font-size: 2.25rem; + line-height: 2.8125rem; + font-style: normal; + font-stretch: normal; +} + +.c3 + p, +.c3 + small, +.c3 + h1, +.c3 + h2, +.c3 + label, +.c3 + h3, +.c3 + h4, +.c3 + h5, +.c3 + div, +.c3 + span { + margin-top: 1.5rem; +} + +.c1 { + margin-top: 3.75rem; +} + +.c2 { + font-weight: normal; + font-size: 2rem; +} + +.c4 { + margin-bottom: 1.875rem; + max-width: 30.625rem; +} + +@media only screen and (min-width:48em) { + .c0 { + width: 46rem; + } +} + +@media only screen and (min-width:64em) { + .c0 { + width: 61rem; + } +} + +@media only screen and (min-width:75em) { + .c0 { + width: 76rem; + } +} + +@media only screen and (max-width:48rem) { + .c0 { + padding-left: 0.375rem; + padding-right: 0.375rem; + } +} + +
+
+

+ I have no memory of this place +

+

+ HTTP 404: We can’t find what you are looking for. Next time, always follow your nose. +

+ + Back home + +
+
+`; diff --git a/prototypes/create-instance-icons/src/components/navigation/__tests__/__snapshots__/section-nav.spec.js.snap b/prototypes/create-instance-icons/src/components/navigation/__tests__/__snapshots__/section-nav.spec.js.snap new file mode 100644 index 00000000..02c199e7 --- /dev/null +++ b/prototypes/create-instance-icons/src/components/navigation/__tests__/__snapshots__/section-nav.spec.js.snap @@ -0,0 +1,83 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders without throwing 1`] = ` +.c0 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c2 { + font-weight: 400; + display: inline-block; + font-size: 0.9375rem; + line-height: 1.6; + margin-right: 1.4375rem; +} + +.c3 { + font-weight: 400; + text-decoration: none; + cursor: pointer; +} + +.c3.active { + cursor: default; +} + +.c1 { + list-style-type: none; + padding: 0; + margin: 1.125rem 0 0 0; +} + +
+
    +
  • + + Instances + +
    • +
  • + Custom images +
    • +
  • + Docker images +
    • +
  • + Docker registries +
    • +
+
+`; diff --git a/prototypes/create-instance-icons/src/components/navigation/__tests__/header.spec.js b/prototypes/create-instance-icons/src/components/navigation/__tests__/header.spec.js new file mode 100644 index 00000000..ef06967a --- /dev/null +++ b/prototypes/create-instance-icons/src/components/navigation/__tests__/header.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 { Header } from '../'; + +it('renders
without throwing', () => { + const tree = renderer + .create( + +
+ + ) + .toJSON(); + expect(tree).toMatchSnapshot(); +}); diff --git a/prototypes/create-instance-icons/src/components/navigation/__tests__/not-found.spec.js b/prototypes/create-instance-icons/src/components/navigation/__tests__/not-found.spec.js new file mode 100644 index 00000000..355b9c68 --- /dev/null +++ b/prototypes/create-instance-icons/src/components/navigation/__tests__/not-found.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 { NotFound } from '../'; + +it('renders without throwing', () => { + const tree = renderer + .create( + + + + ) + .toJSON(); + expect(tree).toMatchSnapshot(); +}); diff --git a/prototypes/create-instance-icons/src/components/navigation/header.js b/prototypes/create-instance-icons/src/components/navigation/header.js new file mode 100644 index 00000000..b1606542 --- /dev/null +++ b/prototypes/create-instance-icons/src/components/navigation/header.js @@ -0,0 +1,36 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import { + Header, + HeaderBrand, + TritonBetaIcon, + HeaderNav, + HeaderItem, + DataCenterIconLight, + UserIconLight +} from 'joyent-ui-toolkit'; + +const NavHeader = () => ( +
+ + + + +
  • + + Compute + +
    • +     + Return to existing portal + + eu-east-1 + + + Nicola + +
    +); + +export default NavHeader; diff --git a/prototypes/create-instance-icons/src/components/navigation/index.js b/prototypes/create-instance-icons/src/components/navigation/index.js new file mode 100644 index 00000000..c3eeaef3 --- /dev/null +++ b/prototypes/create-instance-icons/src/components/navigation/index.js @@ -0,0 +1,2 @@ +export { default as Header } from './header'; +export { default as NotFound } from './not-found'; diff --git a/prototypes/create-instance-icons/src/components/navigation/not-found.js b/prototypes/create-instance-icons/src/components/navigation/not-found.js new file mode 100644 index 00000000..45196ae4 --- /dev/null +++ b/prototypes/create-instance-icons/src/components/navigation/not-found.js @@ -0,0 +1,31 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { H1, P, Button, ViewContainer } from 'joyent-ui-toolkit'; +import { Margin } from 'styled-components-spacing'; + +const NotFound = ({ + title = 'I have no memory of this place', + message = `HTTP 404: We can’t find what you are looking for. + Next time, always follow your nose.`, + link = 'Back home', + to = '/' +}) => ( + + +

    {title}

    +

    {message}

    + + + +     +     +); + +NotFound.propTypes = { + title: PropTypes.string, + message: PropTypes.string, + link: PropTypes.string, + to: PropTypes.string +}; + +export default NotFound; diff --git a/prototypes/create-instance-icons/src/components/package/__tests__/__snapshots__/index.spec.js.snap b/prototypes/create-instance-icons/src/components/package/__tests__/__snapshots__/index.spec.js.snap new file mode 100644 index 00000000..924c083f --- /dev/null +++ b/prototypes/create-instance-icons/src/components/package/__tests__/__snapshots__/index.spec.js.snap @@ -0,0 +1,276 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders without throwing 1`] = ` +.c3 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c5 { + font-size: 0.9375rem; + line-height: 1.5; + 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-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-grow: 4; + -ms-flex-grow: 4; + flex-grow: 4; + -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; +} + +.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; +} + +.c2 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + margin: 0; + height: auto; + padding-top: 0; + min-width: auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.c4 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; + display: block; + height: 100%; + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} + +.c7 { + display: inline-block; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-weight: 400; + font-style: normal; + font-stretch: normal; + font-size: 0.875rem; + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; +} + +.c6 { + display: inline-block; + padding: 0 1.125rem; + font-weight: 400; +} + +.c8 { + font-weight: 400; + -webkit-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; + -webkit-flex-basis: 5.625rem; + -ms-flex-basis: 5.625rem; + flex-basis: 5.625rem; +} + +.c9 { + display: inline-block; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-weight: 400; + font-size: 0.8125rem; + font-weight: 500; + text-transform: uppercase; + color: rgba(73,73,73,0.8); + -webkit-transition: all 300ms ease; + transition: all 300ms ease; +} + +.c0 { + margin-right: 1.125rem; + margin-bottom: 1.125rem; +} + +@media only screen and (min-width:0em) { + .c3 { + -webkit-flex-basis: 50%; + -ms-flex-basis: 50%; + flex-basis: 50%; + max-width: 50%; + display: block; + } +} + +
    +
    +
    +
    +
    + $ + 0.263 + per hour +
    +
    + + 7.8 + GB RAM + +
    +
    + + 4 + vCPUs + +
    +
    + + 200 + TB disk + +
    +
    + + Magnetic + +
    +
    + + Compute Optimized + +
    +
    +
    +
    +
    +`; diff --git a/prototypes/create-instance-icons/src/components/package/__tests__/index.spec.js b/prototypes/create-instance-icons/src/components/package/__tests__/index.spec.js new file mode 100644 index 00000000..e9678f04 --- /dev/null +++ b/prototypes/create-instance-icons/src/components/package/__tests__/index.spec.js @@ -0,0 +1,30 @@ +/** + * @jest-environment jsdom + */ + +import React from 'react'; +import renderer from 'react-test-renderer'; +import 'jest-styled-components'; + +import { Router } from '@mocks/'; +import Package from '../'; + +const pack = { + disk: 200, + group: 'Compute Optimized', + memory: 7.8, + name: 'High CPU 7.75', + price: '0.263', + vcpus: 4 +}; + +it('renders without throwing', () => { + const tree = renderer + .create( + + + + ) + .toJSON(); + expect(tree).toMatchSnapshot(); +}); diff --git a/prototypes/create-instance-icons/src/components/package/index.js b/prototypes/create-instance-icons/src/components/package/index.js new file mode 100644 index 00000000..08437400 --- /dev/null +++ b/prototypes/create-instance-icons/src/components/package/index.js @@ -0,0 +1,32 @@ +import React from 'react'; +import { reduxForm } from 'redux-form'; + +import { returnIcon } from '../icons'; + +import { TableTr, TableTd, H4, Radio, FormGroup } from 'joyent-ui-toolkit'; + +const Package = ({ + pack: { price, memory, vcpus, disk, group, ssd, name }, + selected, + onClick +}) => ( + + + + + + + + {returnIcon(group)} +

    {name}

    +     + + {memory > 1 ? `${parseInt(memory, 10)} GB` : `${memory * 1000} MB`} + + {disk > 1 ? `${disk} TB` : `${disk * 1000} GB`} + {vcpus} + {price.toFixed(3)} +     +); + +export default reduxForm({ form: 'selected' })(Package); diff --git a/prototypes/create-instance-icons/src/components/packages/__tests__/__snapshots__/list.spec.js.snap b/prototypes/create-instance-icons/src/components/packages/__tests__/__snapshots__/list.spec.js.snap new file mode 100644 index 00000000..32515a57 --- /dev/null +++ b/prototypes/create-instance-icons/src/components/packages/__tests__/__snapshots__/list.spec.js.snap @@ -0,0 +1,784 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders without throwing 1`] = ` +.c1 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c5 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c7 { + font-size: 0.9375rem; + line-height: 1.5; + 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-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-grow: 4; + -ms-flex-grow: 4; + flex-grow: 4; + -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; +} + +.c3 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; + 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; +} + +.c4 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + margin: 0; + height: auto; + padding-top: 0; + min-width: auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.c6 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; + display: block; + height: 100%; + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} + +.c9 { + display: inline-block; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-weight: 400; + font-style: normal; + font-stretch: normal; + font-size: 0.875rem; + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; +} + +.c8 { + display: inline-block; + padding: 0 1.125rem; + font-weight: 400; +} + +.c10 { + font-weight: 400; + -webkit-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; + -webkit-flex-basis: 5.625rem; + -ms-flex-basis: 5.625rem; + flex-basis: 5.625rem; +} + +.c11 { + display: inline-block; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-weight: 400; + font-size: 0.8125rem; + font-weight: 500; + text-transform: uppercase; + color: rgba(73,73,73,0.8); + -webkit-transition: all 300ms ease; + transition: all 300ms ease; +} + +.c2 { + margin-right: 1.125rem; + margin-bottom: 1.125rem; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + min-width: 100%; + list-style: none; + padding: 0; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-top: 2.25rem; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +@media only screen and (min-width:0em) { + .c1 { + -webkit-flex-basis: 100%; + -ms-flex-basis: 100%; + flex-basis: 100%; + max-width: 100%; + display: block; + } +} + +@media only screen and (min-width:48em) { + .c1 { + -webkit-flex-basis: 50%; + -ms-flex-basis: 50%; + flex-basis: 50%; + max-width: 50%; + display: block; + } +} + +@media only screen and (min-width:64em) { + .c1 { + -webkit-flex-basis: 33.333333333333336%; + -ms-flex-basis: 33.333333333333336%; + flex-basis: 33.333333333333336%; + max-width: 33.333333333333336%; + display: block; + } +} + +@media only screen and (min-width:75em) { + .c1 { + -webkit-flex-basis: 25%; + -ms-flex-basis: 25%; + flex-basis: 25%; + max-width: 25%; + display: block; + } +} + +@media only screen and (min-width:0em) { + .c5 { + -webkit-flex-basis: 50%; + -ms-flex-basis: 50%; + flex-basis: 50%; + max-width: 50%; + display: block; + } +} + +
    +
    +
    +
    +
    +
    +
    + $ + 0.016 + per hour +
    +
    + + 0.256 + GB RAM + +
    +
    + + 0.25 + vCPUs + +
    +
    + + 10 + TB disk + +
    +
    + + Magnetic + +
    +
    + + Compute Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.033 + per hour +
    +
    + + 0.768 + GB RAM + +
    +
    + + 0.5 + vCPUs + +
    +
    + + 25 + TB disk + +
    +
    + + Magnetic + +
    +
    + + Compute Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.066 + per hour +
    +
    + + 1.8 + GB RAM + +
    +
    + + 1 + vCPUs + +
    +
    + + 50 + TB disk + +
    +
    + + Magnetic + +
    +
    + + Compute Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.131 + per hour +
    +
    + + 3.8 + GB RAM + +
    +
    + + 2 + vCPUs + +
    +
    + + 100 + TB disk + +
    +
    + + Magnetic + +
    +
    + + Compute Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.263 + per hour +
    +
    + + 7.8 + GB RAM + +
    +
    + + 4 + vCPUs + +
    +
    + + 200 + TB disk + +
    +
    + + Magnetic + +
    +
    + + Compute Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.525 + per hour +
    +
    + + 15.8 + GB RAM + +
    +
    + + 8 + vCPUs + +
    +
    + + 400 + TB disk + +
    +
    + + Magnetic + +
    +
    + + Compute Optimized + +
    +
    +
    +
    +
    +
    +
    +`; diff --git a/prototypes/create-instance-icons/src/components/packages/__tests__/list.spec.js b/prototypes/create-instance-icons/src/components/packages/__tests__/list.spec.js new file mode 100644 index 00000000..1c4cbe5d --- /dev/null +++ b/prototypes/create-instance-icons/src/components/packages/__tests__/list.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, PackagesMock, FiltersMock } from '@mocks/'; +import { Packages } from '../'; + +it('renders without throwing', () => { + const tree = renderer + .create( + + + + ) + .toJSON(); + expect(tree).toMatchSnapshot(); +}); diff --git a/prototypes/create-instance-icons/src/components/packages/index.js b/prototypes/create-instance-icons/src/components/packages/index.js new file mode 100644 index 00000000..e5c91307 --- /dev/null +++ b/prototypes/create-instance-icons/src/components/packages/index.js @@ -0,0 +1 @@ +export { default as Packages } from './list'; diff --git a/prototypes/create-instance-icons/src/components/packages/list.js b/prototypes/create-instance-icons/src/components/packages/list.js new file mode 100644 index 00000000..05110d9c --- /dev/null +++ b/prototypes/create-instance-icons/src/components/packages/list.js @@ -0,0 +1,165 @@ +import React, { Component } from 'react'; +import { Row, Col } from 'react-styled-flexboxgrid'; +import styled from 'styled-components'; +import remcalc from 'remcalc'; + +import Package from '@components/package'; +import Empty from '@components/empty'; +import sortBy from 'lodash.sortby'; +import isEqual from 'lodash.isequal'; +import is from 'styled-is'; +import { + Table, + TableThead, + TableTbody, + TableTr, + TableTh, + ArrowIcon +} from 'joyent-ui-toolkit'; + +const ArrowIconStyled = styled(ArrowIcon)` + margin-left: ${remcalc(6)}; + cursor: pointer; + position: relative; + top: ${remcalc(-1)}; + transition: transform 200ms ease; + + path { + fill: ${props => props.theme.grey}; + } + + ${is('selected', 'down')` + transform: rotate(180deg); + path { + fill: ${props => props.theme.text}; + } + `}; +`; + +const Span = styled.span` + cursor: pointer; + user-select: none; +`; + +class Packages extends Component { + constructor(props) { + super(props); + + this.state = { + packages: props.packages, + selected: null + }; + } + + handleClick = id => { + this.setState({ + selected: id !== this.state.selected ? id : null + }); + }; + + componentWillReceiveProps = nextProps => { + this.setState({ + packages: nextProps.packages + }); + }; + + order = column => { + const { packages } = this.state; + const desc = sortBy(packages, [column]).reverse(); + const asc = sortBy(packages, [column]); + + this.setState({ + packages: isEqual(packages, asc) ? desc : asc, + ordered: column, + [column]: !isEqual(packages, asc) + }); + }; + + _cards = () => { + const { selected, packages, ordered } = this.state; + + return packages.length > 0 ? ( + +
    +
    + + + + + this.order('name')}> + Name{' '} + + this.order('name')} + /> + + + this.order('memory')}> + RAM{' '} + + this.order('memory')} + /> + + + this.order('disk')}> + Disk{' '} + + this.order('disk')} + /> + + + this.order('vcpus')}> + vCPU{' '} + + this.order('vcpus')} + /> + + + this.order('price')}> + $/hour{' '} + + this.order('price')} + /> + + + + + {packages.map(pack => ( + this.handleClick(pack.id)} + selected={selected === pack.id} + key={pack.id} + /> + ))} + +
    + + + ) : ( + + + + + + ); + }; + + render = () => this._cards(); +} + +export default Packages; diff --git a/prototypes/create-instance-icons/src/containers/affinity/__tests__/__snapshots__/index.spec.js.snap b/prototypes/create-instance-icons/src/containers/affinity/__tests__/__snapshots__/index.spec.js.snap new file mode 100644 index 00000000..24de0113 --- /dev/null +++ b/prototypes/create-instance-icons/src/containers/affinity/__tests__/__snapshots__/index.spec.js.snap @@ -0,0 +1,1828 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders without throwing 1`] = ` +.c1 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c5 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c7 { + font-size: 0.9375rem; + line-height: 1.5; + 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-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-grow: 4; + -ms-flex-grow: 4; + flex-grow: 4; + -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; +} + +.c3 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; + 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; +} + +.c4 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + margin: 0; + height: auto; + padding-top: 0; + min-width: auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.c6 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; + display: block; + height: 100%; + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} + +.c9 { + display: inline-block; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-weight: 400; + font-style: normal; + font-stretch: normal; + font-size: 0.875rem; + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; +} + +.c8 { + display: inline-block; + padding: 0 1.125rem; + font-weight: 400; +} + +.c10 { + font-weight: 400; + -webkit-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; + -webkit-flex-basis: 5.625rem; + -ms-flex-basis: 5.625rem; + flex-basis: 5.625rem; +} + +.c11 { + display: inline-block; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-weight: 400; + font-size: 0.8125rem; + font-weight: 500; + text-transform: uppercase; + color: rgba(73,73,73,0.8); + -webkit-transition: all 300ms ease; + transition: all 300ms ease; +} + +.c2 { + margin-right: 1.125rem; + margin-bottom: 1.125rem; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + min-width: 100%; + list-style: none; + padding: 0; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-top: 2.25rem; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +@media only screen and (min-width:0em) { + .c1 { + -webkit-flex-basis: 100%; + -ms-flex-basis: 100%; + flex-basis: 100%; + max-width: 100%; + display: block; + } +} + +@media only screen and (min-width:48em) { + .c1 { + -webkit-flex-basis: 50%; + -ms-flex-basis: 50%; + flex-basis: 50%; + max-width: 50%; + display: block; + } +} + +@media only screen and (min-width:64em) { + .c1 { + -webkit-flex-basis: 33.333333333333336%; + -ms-flex-basis: 33.333333333333336%; + flex-basis: 33.333333333333336%; + max-width: 33.333333333333336%; + display: block; + } +} + +@media only screen and (min-width:75em) { + .c1 { + -webkit-flex-basis: 25%; + -ms-flex-basis: 25%; + flex-basis: 25%; + max-width: 25%; + display: block; + } +} + +@media only screen and (min-width:0em) { + .c5 { + -webkit-flex-basis: 50%; + -ms-flex-basis: 50%; + flex-basis: 50%; + max-width: 50%; + display: block; + } +} + +
    +
    +
    +
    +
    +
    +
    + $ + 0.016 + per hour +
    +
    + + 0.256 + GB RAM + +
    +
    + + 0.25 + vCPUs + +
    +
    + + 0.01 + TB disk + +
    +
    + + SSD + +
    +
    + + Compute Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.033 + per hour +
    +
    + + 0.768 + GB RAM + +
    +
    + + 0.5 + vCPUs + +
    +
    + + 0.025 + TB disk + +
    +
    + + SSD + +
    +
    + + Compute Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.066 + per hour +
    +
    + + 1.8 + GB RAM + +
    +
    + + 1 + vCPUs + +
    +
    + + 0.05 + TB disk + +
    +
    + + SSD + +
    +
    + + Compute Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.084 + per hour +
    +
    + + 3.8 + GB RAM + +
    +
    + + 1 + vCPUs + +
    +
    + + 0.5 + TB disk + +
    +
    + + SSD + +
    +
    + + General Purpose + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.131 + per hour +
    +
    + + 3.8 + GB RAM + +
    +
    + + 2 + vCPUs + +
    +
    + + 0.1 + TB disk + +
    +
    + + SSD + +
    +
    + + Compute Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.166 + per hour +
    +
    + + 7.8 + GB RAM + +
    +
    + + 2 + vCPUs + +
    +
    + + 0.1 + TB disk + +
    +
    + + SSD + +
    +
    + + General Purpose + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.259 + per hour +
    +
    + + 15.8 + GB RAM + +
    +
    + + 2 + vCPUs + +
    +
    + + 0.1 + TB disk + +
    +
    + + SSD + +
    +
    + + Memory Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.263 + per hour +
    +
    + + 7.8 + GB RAM + +
    +
    + + 4 + vCPUs + +
    +
    + + 0.2 + TB disk + +
    +
    + + SSD + +
    +
    + + Compute Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.333 + per hour +
    +
    + + 15.8 + GB RAM + +
    +
    + + 4 + vCPUs + +
    +
    + + 0.2 + TB disk + +
    +
    + + SSD + +
    +
    + + General Purpose + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.413 + per hour +
    +
    + + 15.8 + GB RAM + +
    +
    + + 2 + vCPUs + +
    +
    + + 1.2 + TB disk + +
    +
    + + Magnetic + +
    +
    + + Storage Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.52 + per hour +
    +
    + + 31.8 + GB RAM + +
    +
    + + 4 + vCPUs + +
    +
    + + 0.1 + TB disk + +
    +
    + + SSD + +
    +
    + + Memory Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.525 + per hour +
    +
    + + 15.8 + GB RAM + +
    +
    + + 8 + vCPUs + +
    +
    + + 0.4 + TB disk + +
    +
    + + SSD + +
    +
    + + Compute Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.665 + per hour +
    +
    + + 31.8 + GB RAM + +
    +
    + + 8 + vCPUs + +
    +
    + + 0.4 + TB disk + +
    +
    + + SSD + +
    +
    + + General Purpose + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.825 + per hour +
    +
    + + 31.8 + GB RAM + +
    +
    + + 4 + vCPUs + +
    +
    + + 2.4 + TB disk + +
    +
    + + Magnetic + +
    +
    + + Storage Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 1.039 + per hour +
    +
    + + 63.8 + GB RAM + +
    +
    + + 8 + vCPUs + +
    +
    + + 0.4 + TB disk + +
    +
    + + SSD + +
    +
    + + Memory Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 1.066 + per hour +
    +
    + + 31.8 + GB RAM + +
    +
    + + 4 + vCPUs + +
    +
    + + 0.8 + TB disk + +
    +
    + + Magnetic + +
    +
    + + Storage Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 1.75 + per hour +
    +
    + + 63.8 + GB RAM + +
    +
    + + 8 + vCPUs + +
    +
    + + 4.9 + TB disk + +
    +
    + + Magnetic + +
    +
    + + Storage Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 2.31 + per hour +
    +
    + + 63.8 + GB RAM + +
    +
    + + 8 + vCPUs + +
    +
    + + 1.6 + TB disk + +
    +
    + + Magnetic + +
    +
    + + Storage Optimized + +
    +
    +
    +
    +
    +
    +
    +`; diff --git a/prototypes/create-instance-icons/src/containers/affinity/__tests__/index.spec.js b/prototypes/create-instance-icons/src/containers/affinity/__tests__/index.spec.js new file mode 100644 index 00000000..05f7bd26 --- /dev/null +++ b/prototypes/create-instance-icons/src/containers/affinity/__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 PackagesHOC from '../'; +import { Router, Store } from '@mocks/'; + +it('renders without throwing', () => { + const tree = renderer + .create( + + + + + + ) + .toJSON(); + expect(tree).toMatchSnapshot(); +}); diff --git a/prototypes/create-instance-icons/src/containers/affinity/index.js b/prototypes/create-instance-icons/src/containers/affinity/index.js new file mode 100644 index 00000000..dc0c9c59 --- /dev/null +++ b/prototypes/create-instance-icons/src/containers/affinity/index.js @@ -0,0 +1,13 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import Affinity from '@components/affinity'; + +const AffinityHOC = ({ affinity }) => ; + +const mapStateToProps = state => { + return { + affinity: state.form.affinityForm + }; +}; + +export default connect(mapStateToProps)(AffinityHOC); diff --git a/prototypes/create-instance-icons/src/containers/home/__tests__/__snapshots__/index.spec.js.snap b/prototypes/create-instance-icons/src/containers/home/__tests__/__snapshots__/index.spec.js.snap new file mode 100644 index 00000000..260a9b5a --- /dev/null +++ b/prototypes/create-instance-icons/src/containers/home/__tests__/__snapshots__/index.spec.js.snap @@ -0,0 +1,3399 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders without throwing 1`] = ` +.c16 { + background-color: transparent; + text-decoration-skip: objects; +} + +.c16:hover { + text-decoration: none; +} + +.c19 { + 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-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; +} + +.c19::-moz-focus-inner, +.c19[type='button']::-moz-focus-inner, +.c19[type='reset']::-moz-focus-inner, +.c19[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c19:-moz-focusring, +.c19[type='button']:-moz-focusring, +.c19[type='reset']:-moz-focusring, +.c19[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c19:focus { + outline: 0; + text-decoration: none; +} + +.c19:hover { + border: solid 0.0625rem; +} + +.c19:active, +.c19:active:hover, +.c19:active:focus { + background-image: none; + outline: 0; +} + +.c19[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c19 + 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-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; + font-weight: 600; + padding: 0.5625rem 1.125rem; + font-weight: 600; +} + +.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; +} + +.c25:-moz-focusring, +.c25[type='button']:-moz-focusring, +.c25[type='reset']:-moz-focusring, +.c25[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c25:focus { + outline: 0; + text-decoration: none; +} + +.c25:hover { + border: solid 0.0625rem; +} + +.c25:active, +.c25:active:hover, +.c25:active:focus { + background-image: none; + outline: 0; +} + +.c25[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c25 + button { + 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-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; + cursor: not-allowed; + pointer-events: none; + 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; +} + +.c57 { + 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-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; +} + +.c57::-moz-focus-inner, +.c57[type='button']::-moz-focus-inner, +.c57[type='reset']::-moz-focus-inner, +.c57[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c57:-moz-focusring, +.c57[type='button']:-moz-focusring, +.c57[type='reset']:-moz-focusring, +.c57[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c57:focus { + outline: 0; + text-decoration: none; +} + +.c57:hover { + border: solid 0.0625rem; +} + +.c57:active, +.c57:active:hover, +.c57:active:focus { + background-image: none; + outline: 0; +} + +.c57[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c57 + button { + margin-left: 1.25rem; +} + +.c22 { + font-weight: 400; + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; + text-align: left; +} + +.c2 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c8 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c46 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c50 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c0 { + margin-right: auto; + margin-left: auto; + padding-bottom: 1.125rem; +} + +.c7 { + margin-right: auto; + margin-left: auto; +} + +.c18 { + background-color: #FFFFFF; + padding: 0.75rem; + min-width: auto; + border: none; + box-shadow: none; +} + +.c18:hover, +.c18:focus, +.c18:active, +.c18:active:hover, +.c18:active:focus { + background-color: #FFFFFF; + border: none; + box-shadow: none; +} + +.c33 { + font-size: 0.8125rem; + position: absolute; + top: 0.875rem; + right: auto; + color: #464646; +} + +.c35 { + font-size: 0.8125rem; + position: absolute; + top: 0.875rem; + right: 1px; + color: #464646; +} + +.c34 { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: #FFFFFF; + border: 2px solid #bdbdbd; + border-radius: 50%; + cursor: pointer; + display: block; + height: 0.875rem; + width: 0.875rem; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + outline: none; + position: absolute; + top: 0; + margin-top: 0.125rem; +} + +.c34::active { + -webkit-transform: scale(1.3); + -ms-transform: scale(1.3); + transform: scale(1.3); +} + +.c34::focus { + box-shadow: 0 0 0 5px rgba(63,81,181,0.2); +} + +.c31 { + background: #D8D8D8; + cursor: pointer; + display: block; + height: 0.25rem; + position: relative; +} + +.c32 { + background: #364ACD; + height: 100%; + position: absolute; +} + +.c30 { + position: relative; + min-height: 0.625rem; +} + +.c29 { + font-weight: 400; + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; + text-align: left; + margin-right: 0.75rem; + font-weight: bold; +} + +.c28 { + margin-bottom: 0.625rem; + margin-top: 0.75rem; +} + +.c11 { + text-decoration: none; + cursor: pointer; +} + +.c11:visited { + color: inherit; +} + +.c10 { + margin: 0; + font-weight: 400; + line-height: 1.875rem; + font-size: 1.5rem; + font-weight: 400; + margin: 1.25rem 0 1.125rem 0; + display: inline-block; +} + +.c10 + p, +.c10 + small, +.c10 + h1, +.c10 + h2, +.c10 + label, +.c10 + h3, +.c10 + h4, +.c10 + h5, +.c10 + div, +.c10 + span { + margin-top: 1.5rem; +} + +.c12 { + border: solid; + border-width: 0 0.125rem 0.125rem 0; + display: inline-block; + padding: 0.125rem; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + margin: 0.1875rem 0.625rem 0.1875rem 0.625rem; +} + +.c9 { + display: inline-block; +} + +.c6 { + border-bottom: solid 0.0625rem; +} + +.c52 { + font-size: 0.9375rem; + line-height: 1.5; + 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-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-grow: 4; + -ms-flex-grow: 4; + flex-grow: 4; + -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; +} + +.c48 { + 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; +} + +.c49 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + margin: 0; + height: auto; + padding-top: 0; + min-width: auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.c51 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; + display: block; + height: 100%; + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} + +.c54 { + display: inline-block; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-weight: 400; + font-style: normal; + font-stretch: normal; + font-size: 0.875rem; + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; +} + +.c53 { + display: inline-block; + padding: 0 1.125rem; + font-weight: 400; +} + +.c55 { + font-weight: 400; + -webkit-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; + -webkit-flex-basis: 5.625rem; + -ms-flex-basis: 5.625rem; + flex-basis: 5.625rem; +} + +.c56 { + display: inline-block; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-weight: 400; + font-size: 0.8125rem; + font-weight: 500; + text-transform: uppercase; + color: rgba(73,73,73,0.8); + -webkit-transition: all 300ms ease; + transition: all 300ms ease; +} + +.c43 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + display: none; +} + +.c43[type='checkbox'], +.c43[type='radio'] { + box-sizing: border-box; + padding: 0; +} + +.c43[type='number']::-webkit-inner-spin-button, +.c43[type='number']::-webkit-outer-spin-button { + height: auto; +} + +.c43[type='search'] { + -webkit-appearance: textfield; + -moz-appearance: textfield; + appearance: textfield; + outline-offset: -0.125rem; +} + +.c43[type='search']::-webkit-search-cancel-button, +.c43[type='search']::-webkit-search-decoration { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.c43::-webkit-file-upload-button { + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + font: inherit; +} + +.c43:checked + label::after { + opacity: 1; +} + +.c43:selected + label::after { + opacity: 1; +} + +.c43:disabled + label { + background-color: rgb(249,249,249); +} + +.c43:disabled + label::after { + opacity: 0.3; +} + +.c44 { + color: rgb(100,100,100); + position: absolute; + width: 1.125rem; + height: 1.125rem; + top: 0; + box-sizing: border-box; + cursor: pointer; + background-color: rgb(255,255,255); + box-shadow: none; + border: 1px solid; + cursor: pointer; + border-radius: 4px; + width: 1.125rem; + height: 1.125rem; +} + +.c44::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); +} + +.c42 { + display: inline-block; + vertical-align: text-bottom; + margin-right: 0.5rem; + width: 1.125rem; + height: 1.125rem; + position: relative; + cursor: pointer; +} + +.c41 { + list-style-type: none; + 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; + font-weight: 400; +} + +.c41 label { + font-weight: 400; +} + +.c39 { + margin: 0; + padding: 0; +} + +.c40 { + 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; +} + +.c37 { + box-sizing: border-box; + color: inherit; + display: table; + max-width: 100%; + padding: 0; + white-space: normal; + font-weight: 600; +} + +.c13 { + position: relative; + margin-bottom: 0.75rem; + box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05); + border: 0.0625rem solid; + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c14 { + min-width: 2.25rem; + margin-right: 1.125rem; + min-height: 100%; +} + +.c15 { + padding: 0.75rem 0 0.84375rem 0; +} + +.c17 { + position: absolute; + right: 0.1875rem; + top: 0.1875rem; +} + +.c4 { + font-weight: 400; + display: inline-block; + font-size: 0.9375rem; + line-height: 1.6; + margin-right: 1.4375rem; +} + +.c5 { + font-weight: 400; + text-decoration: none; + cursor: pointer; +} + +.c5.active { + cursor: default; +} + +.c3 { + list-style-type: none; + padding: 0; + margin: 1.125rem 0 0 0; +} + +.c36 { + margin-top: 0.75rem; + min-width: 12.5rem; +} + +.c36 label { + font-size: 0.8125rem; +} + +.c38 { + 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; +} + +.c27 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c27 > div { + -webkit-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; +} + +.c27 > div:not(:last-child) { + margin-right: 2.25rem; +} + +.c24 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + width: 100%; + margin-bottom: 1.125rem; +} + +.c20 { + width: 100%; +} + +.c21 { + line-height: 24px; + font-size: 21px; + margin-bottom: 1.125rem; +} + +.c23 { + margin-bottom: 0.5rem; +} + +.c47 { + margin-right: 1.125rem; + margin-bottom: 1.125rem; +} + +.c45 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + min-width: 100%; + list-style: none; + padding: 0; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-top: 2.25rem; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c1 { + margin-bottom: 40px; +} + +@media only screen and (min-width:0em) { + .c8 { + -webkit-flex-basis: 100%; + -ms-flex-basis: 100%; + flex-basis: 100%; + max-width: 100%; + display: block; + } +} + +@media only screen and (min-width:0em) { + .c46 { + -webkit-flex-basis: 100%; + -ms-flex-basis: 100%; + flex-basis: 100%; + max-width: 100%; + display: block; + } +} + +@media only screen and (min-width:48em) { + .c46 { + -webkit-flex-basis: 50%; + -ms-flex-basis: 50%; + flex-basis: 50%; + max-width: 50%; + display: block; + } +} + +@media only screen and (min-width:64em) { + .c46 { + -webkit-flex-basis: 33.333333333333336%; + -ms-flex-basis: 33.333333333333336%; + flex-basis: 33.333333333333336%; + max-width: 33.333333333333336%; + display: block; + } +} + +@media only screen and (min-width:75em) { + .c46 { + -webkit-flex-basis: 25%; + -ms-flex-basis: 25%; + flex-basis: 25%; + max-width: 25%; + display: block; + } +} + +@media only screen and (min-width:0em) { + .c50 { + -webkit-flex-basis: 50%; + -ms-flex-basis: 50%; + flex-basis: 50%; + max-width: 50%; + display: block; + } +} + +@media only screen and (min-width:48em) { + .c0 { + width: 46rem; + } +} + +@media only screen and (min-width:64em) { + .c0 { + width: 61rem; + } +} + +@media only screen and (min-width:75em) { + .c0 { + width: 76rem; + } +} + +@media only screen and (max-width:48rem) { + .c0 { + padding-left: 0.375rem; + padding-right: 0.375rem; + } +} + +@media only screen and (min-width:48em) { + .c7 { + width: 46rem; + } +} + +@media only screen and (min-width:64em) { + .c7 { + width: 61rem; + } +} + +@media only screen and (min-width:75em) { + .c7 { + width: 76rem; + } +} + +@media only screen and (max-width:48rem) { + .c7 { + padding-left: 0.375rem; + padding-right: 0.375rem; + } +} + +
    +
    +
    +
      +
    • + + Instances + +
      • +
    • + Custom images +
      • +
    • + Docker images +
      • +
    • + Docker registries +
      • +
    +
    +
    +
    +
    +
    +
    +

    + + Instances + +

    +
    +
    + +
    +
    +
    +
    +
    +
    +
    + Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. + + + Learn More + +
    + +
    +
    +
    +
    + + +
    +
    + + + + +
    + +
    + +
    +
    + +
    +
    +
    + + + 0.256 + +
    + + + + 63.8 + +
    + +
    +
    +
    +
    + +
    +
    +
    + + + 0.25 + +
    + + + + 8 + +
    + +
    +
    +
    +
    + +
    +
    +
    + + + 0.01 + +
    + + + + 4.9 + +
    + +
    +
    +
    +
    + +
    +
    +
    + + + 0.016 + +
    + + + + 2.318 + +
    + +
    +
    +
    +
    +
    + + Disk + +
      +
      +
      +
    • +
      + +
      + Magnetic +
      • +
      +
      +
      +
      +
    • +
      + +
      + SSD +
      • +
      +
      +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.016 + per hour +
    +
    + + 0.256 + GB RAM + +
    +
    + + 0.25 + vCPUs + +
    +
    + + 0.01 + TB disk + +
    +
    + + SSD + +
    +
    + + Compute Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.033 + per hour +
    +
    + + 0.768 + GB RAM + +
    +
    + + 0.5 + vCPUs + +
    +
    + + 0.025 + TB disk + +
    +
    + + SSD + +
    +
    + + Compute Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.066 + per hour +
    +
    + + 1.8 + GB RAM + +
    +
    + + 1 + vCPUs + +
    +
    + + 0.05 + TB disk + +
    +
    + + SSD + +
    +
    + + Compute Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.084 + per hour +
    +
    + + 3.8 + GB RAM + +
    +
    + + 1 + vCPUs + +
    +
    + + 0.5 + TB disk + +
    +
    + + SSD + +
    +
    + + General Purpose + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.131 + per hour +
    +
    + + 3.8 + GB RAM + +
    +
    + + 2 + vCPUs + +
    +
    + + 0.1 + TB disk + +
    +
    + + SSD + +
    +
    + + Compute Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.166 + per hour +
    +
    + + 7.8 + GB RAM + +
    +
    + + 2 + vCPUs + +
    +
    + + 0.1 + TB disk + +
    +
    + + SSD + +
    +
    + + General Purpose + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.259 + per hour +
    +
    + + 15.8 + GB RAM + +
    +
    + + 2 + vCPUs + +
    +
    + + 0.1 + TB disk + +
    +
    + + SSD + +
    +
    + + Memory Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.263 + per hour +
    +
    + + 7.8 + GB RAM + +
    +
    + + 4 + vCPUs + +
    +
    + + 0.2 + TB disk + +
    +
    + + SSD + +
    +
    + + Compute Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.333 + per hour +
    +
    + + 15.8 + GB RAM + +
    +
    + + 4 + vCPUs + +
    +
    + + 0.2 + TB disk + +
    +
    + + SSD + +
    +
    + + General Purpose + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.413 + per hour +
    +
    + + 15.8 + GB RAM + +
    +
    + + 2 + vCPUs + +
    +
    + + 1.2 + TB disk + +
    +
    + + Magnetic + +
    +
    + + Storage Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.52 + per hour +
    +
    + + 31.8 + GB RAM + +
    +
    + + 4 + vCPUs + +
    +
    + + 0.1 + TB disk + +
    +
    + + SSD + +
    +
    + + Memory Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.525 + per hour +
    +
    + + 15.8 + GB RAM + +
    +
    + + 8 + vCPUs + +
    +
    + + 0.4 + TB disk + +
    +
    + + SSD + +
    +
    + + Compute Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.665 + per hour +
    +
    + + 31.8 + GB RAM + +
    +
    + + 8 + vCPUs + +
    +
    + + 0.4 + TB disk + +
    +
    + + SSD + +
    +
    + + General Purpose + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.825 + per hour +
    +
    + + 31.8 + GB RAM + +
    +
    + + 4 + vCPUs + +
    +
    + + 2.4 + TB disk + +
    +
    + + Magnetic + +
    +
    + + Storage Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 1.039 + per hour +
    +
    + + 63.8 + GB RAM + +
    +
    + + 8 + vCPUs + +
    +
    + + 0.4 + TB disk + +
    +
    + + SSD + +
    +
    + + Memory Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 1.066 + per hour +
    +
    + + 31.8 + GB RAM + +
    +
    + + 4 + vCPUs + +
    +
    + + 0.8 + TB disk + +
    +
    + + Magnetic + +
    +
    + + Storage Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 1.75 + per hour +
    +
    + + 63.8 + GB RAM + +
    +
    + + 8 + vCPUs + +
    +
    + + 4.9 + TB disk + +
    +
    + + Magnetic + +
    +
    + + Storage Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 2.31 + per hour +
    +
    + + 63.8 + GB RAM + +
    +
    + + 8 + vCPUs + +
    +
    + + 1.6 + TB disk + +
    +
    + + Magnetic + +
    +
    + + Storage Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    + + +
    +
    +
    +`; diff --git a/prototypes/create-instance-icons/src/containers/home/__tests__/index.spec.js b/prototypes/create-instance-icons/src/containers/home/__tests__/index.spec.js new file mode 100644 index 00000000..446bd761 --- /dev/null +++ b/prototypes/create-instance-icons/src/containers/home/__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 HomeHOC from '../'; +import { Router, Store } from '@mocks/'; + +it('renders without throwing', () => { + const tree = renderer + .create( + + + + + + ) + .toJSON(); + expect(tree).toMatchSnapshot(); +}); diff --git a/prototypes/create-instance-icons/src/containers/home/index.js b/prototypes/create-instance-icons/src/containers/home/index.js new file mode 100644 index 00000000..f8f76dc8 --- /dev/null +++ b/prototypes/create-instance-icons/src/containers/home/index.js @@ -0,0 +1,34 @@ +import React from 'react'; +import { connect } from 'react-redux'; + +import { ViewContainer } from 'joyent-ui-toolkit'; + +import { Home } from '@components/home'; +import { changeFilters, resetFilters } from '../../state/actions'; + +const HomeHOC = props => ( + + + +); + +const mapStateToProps = state => { + return { + filters: state.app.filters, + packages: state.app.packages, + form: state.form + }; +}; + +const mapDispatchToProps = dispatch => { + return { + onFilterChange: filters => { + dispatch(changeFilters(filters)); + }, + onFilterReset: () => { + dispatch(resetFilters()); + } + }; +}; + +export default connect(mapStateToProps, mapDispatchToProps)(HomeHOC); diff --git a/prototypes/create-instance-icons/src/containers/navigation/__tests__/__snapshots__/header.spec.js.snap b/prototypes/create-instance-icons/src/containers/navigation/__tests__/__snapshots__/header.spec.js.snap new file mode 100644 index 00000000..f84c6a42 --- /dev/null +++ b/prototypes/create-instance-icons/src/containers/navigation/__tests__/__snapshots__/header.spec.js.snap @@ -0,0 +1,76 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders
    without throwing 1`] = ` +.c2 { + margin: 0; + font-weight: 400; + line-height: 1.875rem; + font-size: 1.5rem; + text-transform: uppercase; + font-size: 1.8125rem; + margin: 0; +} + +.c2 + p, +.c2 + small, +.c2 + h1, +.c2 + h2, +.c2 + label, +.c2 + h3, +.c2 + h4, +.c2 + h5, +.c2 + div, +.c2 + span { + margin-top: 1.5rem; +} + +.c1 { + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; + -webkit-order: 0; + -ms-flex-order: 0; + order: 0; + padding: 0.84375rem 0; +} + +.c0 { + max-height: 3.3125rem; + min-height: 3.3125rem; + padding: 0 1.125rem; + line-height: 1.5625rem; +} + +.c3 { + border-style: none; + width: 5.4375rem; + height: 1.5625rem; +} + +
    +
    +

    + + Triton Logo + +

    +
    +
    +`; diff --git a/prototypes/create-instance-icons/src/containers/navigation/__tests__/__snapshots__/not-found-hoc.spec.js.snap b/prototypes/create-instance-icons/src/containers/navigation/__tests__/__snapshots__/not-found-hoc.spec.js.snap new file mode 100644 index 00000000..1509cc15 --- /dev/null +++ b/prototypes/create-instance-icons/src/containers/navigation/__tests__/__snapshots__/not-found-hoc.spec.js.snap @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders without throwing 1`] = ``; diff --git a/prototypes/create-instance-icons/src/containers/navigation/__tests__/header.spec.js b/prototypes/create-instance-icons/src/containers/navigation/__tests__/header.spec.js new file mode 100644 index 00000000..ef06967a --- /dev/null +++ b/prototypes/create-instance-icons/src/containers/navigation/__tests__/header.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 { Header } from '../'; + +it('renders
    without throwing', () => { + const tree = renderer + .create( + +
    + + ) + .toJSON(); + expect(tree).toMatchSnapshot(); +}); diff --git a/prototypes/create-instance-icons/src/containers/navigation/__tests__/not-found-hoc.spec.js b/prototypes/create-instance-icons/src/containers/navigation/__tests__/not-found-hoc.spec.js new file mode 100644 index 00000000..e8e29e8d --- /dev/null +++ b/prototypes/create-instance-icons/src/containers/navigation/__tests__/not-found-hoc.spec.js @@ -0,0 +1,14 @@ +/** + * @jest-environment jsdom + */ + +import React from 'react'; +import renderer from 'react-test-renderer'; +import 'jest-styled-components'; + +import { withNotFound } from '../'; + +it('renders without throwing', () => { + const tree = renderer.create().toJSON(); + expect(tree).toMatchSnapshot(); +}); diff --git a/prototypes/create-instance-icons/src/containers/navigation/header.js b/prototypes/create-instance-icons/src/containers/navigation/header.js new file mode 100644 index 00000000..eed568d7 --- /dev/null +++ b/prototypes/create-instance-icons/src/containers/navigation/header.js @@ -0,0 +1,7 @@ +import React from 'react'; + +import { Header as HeaderComponent } from '@components/navigation'; + +export const Header = () => ; + +export default Header; diff --git a/prototypes/create-instance-icons/src/containers/navigation/index.js b/prototypes/create-instance-icons/src/containers/navigation/index.js new file mode 100644 index 00000000..7899000d --- /dev/null +++ b/prototypes/create-instance-icons/src/containers/navigation/index.js @@ -0,0 +1 @@ +export { default as Header } from './header'; diff --git a/prototypes/create-instance-icons/src/containers/navigation/not-found-hoc.js b/prototypes/create-instance-icons/src/containers/navigation/not-found-hoc.js new file mode 100644 index 00000000..000d6860 --- /dev/null +++ b/prototypes/create-instance-icons/src/containers/navigation/not-found-hoc.js @@ -0,0 +1,20 @@ +import React from 'react'; +import { NotFound } from '@components/navigation'; + +const pathsExample = { + title: 'I have no memory of this place', + message: + 'HTTP 404: We can’t find what you are looking for. Next time, always follow your nose.', + link: 'Back home', + to: '/' +}; +const NotFoundHOC = (paths = pathsExample) => ( + +); + +export default NotFoundHOC; diff --git a/prototypes/create-instance-icons/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap b/prototypes/create-instance-icons/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap new file mode 100644 index 00000000..24de0113 --- /dev/null +++ b/prototypes/create-instance-icons/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap @@ -0,0 +1,1828 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders without throwing 1`] = ` +.c1 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c5 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c7 { + font-size: 0.9375rem; + line-height: 1.5; + 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-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-grow: 4; + -ms-flex-grow: 4; + flex-grow: 4; + -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; +} + +.c3 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; + 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; +} + +.c4 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + margin: 0; + height: auto; + padding-top: 0; + min-width: auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.c6 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; + display: block; + height: 100%; + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} + +.c9 { + display: inline-block; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-weight: 400; + font-style: normal; + font-stretch: normal; + font-size: 0.875rem; + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; +} + +.c8 { + display: inline-block; + padding: 0 1.125rem; + font-weight: 400; +} + +.c10 { + font-weight: 400; + -webkit-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; + -webkit-flex-basis: 5.625rem; + -ms-flex-basis: 5.625rem; + flex-basis: 5.625rem; +} + +.c11 { + display: inline-block; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-weight: 400; + font-size: 0.8125rem; + font-weight: 500; + text-transform: uppercase; + color: rgba(73,73,73,0.8); + -webkit-transition: all 300ms ease; + transition: all 300ms ease; +} + +.c2 { + margin-right: 1.125rem; + margin-bottom: 1.125rem; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + min-width: 100%; + list-style: none; + padding: 0; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-top: 2.25rem; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +@media only screen and (min-width:0em) { + .c1 { + -webkit-flex-basis: 100%; + -ms-flex-basis: 100%; + flex-basis: 100%; + max-width: 100%; + display: block; + } +} + +@media only screen and (min-width:48em) { + .c1 { + -webkit-flex-basis: 50%; + -ms-flex-basis: 50%; + flex-basis: 50%; + max-width: 50%; + display: block; + } +} + +@media only screen and (min-width:64em) { + .c1 { + -webkit-flex-basis: 33.333333333333336%; + -ms-flex-basis: 33.333333333333336%; + flex-basis: 33.333333333333336%; + max-width: 33.333333333333336%; + display: block; + } +} + +@media only screen and (min-width:75em) { + .c1 { + -webkit-flex-basis: 25%; + -ms-flex-basis: 25%; + flex-basis: 25%; + max-width: 25%; + display: block; + } +} + +@media only screen and (min-width:0em) { + .c5 { + -webkit-flex-basis: 50%; + -ms-flex-basis: 50%; + flex-basis: 50%; + max-width: 50%; + display: block; + } +} + +
    +
    +
    +
    +
    +
    +
    + $ + 0.016 + per hour +
    +
    + + 0.256 + GB RAM + +
    +
    + + 0.25 + vCPUs + +
    +
    + + 0.01 + TB disk + +
    +
    + + SSD + +
    +
    + + Compute Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.033 + per hour +
    +
    + + 0.768 + GB RAM + +
    +
    + + 0.5 + vCPUs + +
    +
    + + 0.025 + TB disk + +
    +
    + + SSD + +
    +
    + + Compute Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.066 + per hour +
    +
    + + 1.8 + GB RAM + +
    +
    + + 1 + vCPUs + +
    +
    + + 0.05 + TB disk + +
    +
    + + SSD + +
    +
    + + Compute Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.084 + per hour +
    +
    + + 3.8 + GB RAM + +
    +
    + + 1 + vCPUs + +
    +
    + + 0.5 + TB disk + +
    +
    + + SSD + +
    +
    + + General Purpose + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.131 + per hour +
    +
    + + 3.8 + GB RAM + +
    +
    + + 2 + vCPUs + +
    +
    + + 0.1 + TB disk + +
    +
    + + SSD + +
    +
    + + Compute Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.166 + per hour +
    +
    + + 7.8 + GB RAM + +
    +
    + + 2 + vCPUs + +
    +
    + + 0.1 + TB disk + +
    +
    + + SSD + +
    +
    + + General Purpose + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.259 + per hour +
    +
    + + 15.8 + GB RAM + +
    +
    + + 2 + vCPUs + +
    +
    + + 0.1 + TB disk + +
    +
    + + SSD + +
    +
    + + Memory Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.263 + per hour +
    +
    + + 7.8 + GB RAM + +
    +
    + + 4 + vCPUs + +
    +
    + + 0.2 + TB disk + +
    +
    + + SSD + +
    +
    + + Compute Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.333 + per hour +
    +
    + + 15.8 + GB RAM + +
    +
    + + 4 + vCPUs + +
    +
    + + 0.2 + TB disk + +
    +
    + + SSD + +
    +
    + + General Purpose + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.413 + per hour +
    +
    + + 15.8 + GB RAM + +
    +
    + + 2 + vCPUs + +
    +
    + + 1.2 + TB disk + +
    +
    + + Magnetic + +
    +
    + + Storage Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.52 + per hour +
    +
    + + 31.8 + GB RAM + +
    +
    + + 4 + vCPUs + +
    +
    + + 0.1 + TB disk + +
    +
    + + SSD + +
    +
    + + Memory Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.525 + per hour +
    +
    + + 15.8 + GB RAM + +
    +
    + + 8 + vCPUs + +
    +
    + + 0.4 + TB disk + +
    +
    + + SSD + +
    +
    + + Compute Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.665 + per hour +
    +
    + + 31.8 + GB RAM + +
    +
    + + 8 + vCPUs + +
    +
    + + 0.4 + TB disk + +
    +
    + + SSD + +
    +
    + + General Purpose + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 0.825 + per hour +
    +
    + + 31.8 + GB RAM + +
    +
    + + 4 + vCPUs + +
    +
    + + 2.4 + TB disk + +
    +
    + + Magnetic + +
    +
    + + Storage Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 1.039 + per hour +
    +
    + + 63.8 + GB RAM + +
    +
    + + 8 + vCPUs + +
    +
    + + 0.4 + TB disk + +
    +
    + + SSD + +
    +
    + + Memory Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 1.066 + per hour +
    +
    + + 31.8 + GB RAM + +
    +
    + + 4 + vCPUs + +
    +
    + + 0.8 + TB disk + +
    +
    + + Magnetic + +
    +
    + + Storage Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 1.75 + per hour +
    +
    + + 63.8 + GB RAM + +
    +
    + + 8 + vCPUs + +
    +
    + + 4.9 + TB disk + +
    +
    + + Magnetic + +
    +
    + + Storage Optimized + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + $ + 2.31 + per hour +
    +
    + + 63.8 + GB RAM + +
    +
    + + 8 + vCPUs + +
    +
    + + 1.6 + TB disk + +
    +
    + + Magnetic + +
    +
    + + Storage Optimized + +
    +
    +
    +
    +
    +
    +
    +`; diff --git a/prototypes/create-instance-icons/src/containers/packages/__tests__/index.spec.js b/prototypes/create-instance-icons/src/containers/packages/__tests__/index.spec.js new file mode 100644 index 00000000..05f7bd26 --- /dev/null +++ b/prototypes/create-instance-icons/src/containers/packages/__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 PackagesHOC from '../'; +import { Router, Store } from '@mocks/'; + +it('renders without throwing', () => { + const tree = renderer + .create( + + + + + + ) + .toJSON(); + expect(tree).toMatchSnapshot(); +}); diff --git a/prototypes/create-instance-icons/src/containers/packages/index.js b/prototypes/create-instance-icons/src/containers/packages/index.js new file mode 100644 index 00000000..f317282d --- /dev/null +++ b/prototypes/create-instance-icons/src/containers/packages/index.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import { Packages } from '@components/packages'; + +const PackagesHOC = ({ packages, filters, type }) => ( + +); + +const mapStateToProps = state => { + return { + packages: state.app.packages, + filters: state.app.filters, + type: state.form.type.values + }; +}; + +export default connect(mapStateToProps)(PackagesHOC); diff --git a/prototypes/create-instance-icons/src/data/packages.json b/prototypes/create-instance-icons/src/data/packages.json new file mode 100644 index 00000000..5a033010 --- /dev/null +++ b/prototypes/create-instance-icons/src/data/packages.json @@ -0,0 +1,182 @@ +[ + { + "id": 1, + "ssd": true, + "name": "High CPU 0.25", + "vcpus": 0.25, + "memory": 0.256, + "disk": 0.01, + "group": "Compute Optimized", + "price": 0.016 + }, + { + "id": 2, + "ssd": true, + "name": "High CPU 0.75", + "vcpus": 0.5, + "memory": 0.768, + "disk": 0.025, + "group": "Compute Optimized", + "price": 0.033 + }, + { + "id": 3, + "ssd": true, + "name": "High CPU 1.75", + "vcpus": 1, + "memory": 1.8, + "disk": 0.05, + "group": "Compute Optimized", + "price": 0.066 + }, + { + "id": 4, + "ssd": true, + "name": "High CPU 3.75", + "vcpus": 2, + "memory": 3.8, + "disk": 0.1, + "group": "Compute Optimized", + "price": 0.131 + }, + { + "id": 5, + "ssd": true, + "name": "High CPU 7.75", + "vcpus": 4, + "memory": 7.8, + "disk": 0.2, + "group": "Compute Optimized", + "price": 0.263 + }, + { + "id": 6, + "ssd": true, + "name": "High CPU 15.75", + "vcpus": 8, + "memory": 15.8, + "disk": 0.4, + "group": "Compute Optimized", + "price": 0.525 + }, + { + "id": 7, + "ssd": true, + "name": "General 3.75", + "vcpus": 1, + "memory": 3.8, + "disk": 0.5, + "group": "General Purpose", + "price": 0.084 + }, + { + "id": 8, + "ssd": true, + "name": "General 7.75", + "vcpus": 2, + "memory": 7.8, + "disk": 0.1, + "group": "General Purpose", + "price": 0.166 + }, + { + "id": 9, + "ssd": true, + "name": "General 15.75", + "vcpus": 4, + "memory": 15.8, + "disk": 0.2, + "group": "General Purpose", + "price": 0.333 + }, + { + "id": 10, + "ssd": true, + "name": "General 31.75", + "vcpus": 8, + "memory": 31.8, + "disk": 0.4, + "group": "General Purpose", + "price": 0.665 + }, + { + "id": 11, + "ssd": true, + "name": "High RAM 15.75", + "vcpus": 2, + "memory": 15.8, + "disk": 0.1, + "group": "Memory Optimized", + "price": 0.259 + }, + { + "id": 12, + "ssd": true, + "name": "High RAM 31.75", + "vcpus": 4, + "memory": 31.8, + "disk": 0.1, + "group": "Memory Optimized", + "price": 0.52 + }, + { + "id": 13, + "ssd": true, + "name": "High RAM 63.75", + "vcpus": 8, + "memory": 63.8, + "disk": 0.4, + "group": "Memory Optimized", + "price": 1.039 + }, + { + "id": 14, + "ssd": false, + "name": "Fast Disk 31.75", + "vcpus": 4, + "memory": 31.8, + "disk": 0.8, + "group": "Storage Optimized", + "price": 1.066 + }, + { + "id": 15, + "ssd": false, + "name": "Fast Disk 63.75", + "vcpus": 8, + "memory": 63.8, + "disk": 1.6, + "group": "Storage Optimized", + "price": 2.31 + }, + { + "id": 16, + "ssd": false, + "name": "Big Disk 15.75", + "vcpus": 2, + "memory": 15.8, + "disk": 1.2, + "group": "Storage Optimized", + "price": 0.413 + }, + { + "id": 17, + "ssd": false, + "name": "Big Disk 31.75", + "vcpus": 4, + "memory": 31.8, + "disk": 2.4, + "group": "Storage Optimized", + "price": 0.825 + }, + { + "id": 18, + "ssd": false, + "name": "Big Disk 63.75", + "vcpus": 8, + "memory": 63.8, + "disk": 4.9, + "group": "Storage Optimized", + "price": 1.75 + } +] diff --git a/prototypes/create-instance-icons/src/graphql/Example.gql b/prototypes/create-instance-icons/src/graphql/Example.gql new file mode 100644 index 00000000..ceeb4497 --- /dev/null +++ b/prototypes/create-instance-icons/src/graphql/Example.gql @@ -0,0 +1,11 @@ +query Portal { + portal { + user { + firstName + } + datacenter { + id + region + } + } +} diff --git a/prototypes/create-instance-icons/src/graphql/data-centers.gql b/prototypes/create-instance-icons/src/graphql/data-centers.gql new file mode 100644 index 00000000..20667c41 --- /dev/null +++ b/prototypes/create-instance-icons/src/graphql/data-centers.gql @@ -0,0 +1,5 @@ +query Portal { + datacenters { + name + } +} diff --git a/prototypes/create-instance-icons/src/graphql/packages.gql b/prototypes/create-instance-icons/src/graphql/packages.gql new file mode 100644 index 00000000..81a96797 --- /dev/null +++ b/prototypes/create-instance-icons/src/graphql/packages.gql @@ -0,0 +1,10 @@ +query Portal { + packages { + name + vcpus + memory + disk + version + group + } +} diff --git a/prototypes/create-instance-icons/src/index.js b/prototypes/create-instance-icons/src/index.js new file mode 100644 index 00000000..968445cc --- /dev/null +++ b/prototypes/create-instance-icons/src/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './app'; + +ReactDOM.render(, document.getElementById('root')); diff --git a/prototypes/create-instance-icons/src/router.js b/prototypes/create-instance-icons/src/router.js new file mode 100644 index 00000000..1bf16bfc --- /dev/null +++ b/prototypes/create-instance-icons/src/router.js @@ -0,0 +1,20 @@ +import React from 'react'; +import { BrowserRouter, Route, Switch } from 'react-router-dom'; + +import { PageContainer } from 'joyent-ui-toolkit'; + +import { Header } from '@containers/navigation'; +import HomeHOC from '@containers/home'; +import { NotFound } from '@components/navigation'; + +export default () => ( + + + + + + + + + +); diff --git a/prototypes/create-instance-icons/src/state/actions.js b/prototypes/create-instance-icons/src/state/actions.js new file mode 100644 index 00000000..48a09750 --- /dev/null +++ b/prototypes/create-instance-icons/src/state/actions.js @@ -0,0 +1,8 @@ +export const changeFilters = filters => ({ + type: 'CHANGE_FILTERS', + filters +}); + +export const resetFilters = () => ({ + type: 'RESET_FILTERS' +}); diff --git a/prototypes/create-instance-icons/src/state/filterReducer.js b/prototypes/create-instance-icons/src/state/filterReducer.js new file mode 100644 index 00000000..d4b1813c --- /dev/null +++ b/prototypes/create-instance-icons/src/state/filterReducer.js @@ -0,0 +1,56 @@ +import { default as defaultState } from './state'; + +const selectedGroups = groups => + groups.filter(group => group.selected).map(group => group.name); + +const filterReducer = (state = defaultState, action) => { + switch (action.type) { + case 'CHANGE_FILTERS': + return { + ...state, + filters: { + ...action.filters + }, + packages: defaultState.packages + .filter( + pack => + pack.memory >= action.filters.ram.min && + pack.memory <= action.filters.ram.max + ) + .filter( + pack => + pack.disk >= action.filters.disk.min && + pack.disk <= action.filters.disk.max + ) + .filter( + pack => + pack.vcpus >= action.filters.cpu.min && + pack.vcpus <= action.filters.cpu.max + ) + .filter( + pack => + pack.price >= action.filters.cost.min && + pack.price <= action.filters.cost.max + ) + .filter( + pack => + selectedGroups(action.filters.groups).length > 0 + ? selectedGroups(action.filters.groups).includes(pack.group) + : true + ) + }; + + case 'RESET_FILTERS': + return { + ...state, + filters: { + ...defaultState.filters + }, + packages: defaultState.packages + }; + default: + return state; + } +}; + +export default filterReducer; diff --git a/prototypes/create-instance-icons/src/state/state.js b/prototypes/create-instance-icons/src/state/state.js new file mode 100644 index 00000000..31ab5cd9 --- /dev/null +++ b/prototypes/create-instance-icons/src/state/state.js @@ -0,0 +1,19 @@ +import packages from '../data/packages'; + +const state = { + filters: { + cpu: { min: 0.25, max: 8 }, + cost: { min: 0.016, max: 2.318 }, + ram: { min: 0.256, max: 63.8 }, + disk: { min: 0.01, max: 4.9 }, + groups: [ + { name: 'Compute Optimized', selected: false }, + { name: 'Memory Optimized', selected: false }, + { name: 'General Purpose', selected: false }, + { name: 'Storage Optimized', selected: false } + ] + }, + packages +}; + +export default state; diff --git a/prototypes/create-instance-icons/src/state/store.js b/prototypes/create-instance-icons/src/state/store.js new file mode 100644 index 00000000..4d224526 --- /dev/null +++ b/prototypes/create-instance-icons/src/state/store.js @@ -0,0 +1,60 @@ +import { createStore, combineReducers, applyMiddleware, compose } from 'redux'; +import { reducer as formReducer } from 'redux-form'; +import { ApolloClient, createNetworkInterface } from 'react-apollo'; +import filterReducer from './filterReducer'; +import state from './state'; + +const GLOBAL = + typeof window === 'object' + ? window + : { + location: { + hostname: '0.0.0.0' + } + }; + +const GQL_PORT = process.env.REACT_APP_GQL_PORT || 443; +const GQL_HOSTNAME = + process.env.REACT_APP_GQL_HOSTNAME || GLOBAL.location.hostname; +const GQL_PROTOCOL = process.env.REACT_APP_GQL_PROTOCOL || 'https'; + +export const client = new ApolloClient({ + dataIdFromObject: o => { + const id = o.id + ? o.id + : o.slug + ? o.slug + : o.uuid + ? o.uuid + : o.timestamp + ? o.timestamp + : o.name && o.instance + ? `${o.name}-${o.instance}` + : o.name + ? o.name + : o.time && o.value + ? `${o.time}-${o.value}` + : 'apollo-cache-key-not-defined'; + return `${o.__typename}:${id}`; + }, + networkInterface: createNetworkInterface({ + uri: `${GQL_PROTOCOL}://${GQL_HOSTNAME}:${GQL_PORT}/graphql` + }) +}); + +export const store = createStore( + combineReducers({ + apollo: client.reducer(), + form: formReducer, + app: filterReducer + }), + state, // Initial state + compose( + applyMiddleware(client.middleware()) + // If you are using the devToolsExtension, you can add it here also + // eslint-disable-next-line no-negated-condition + // typeof GLOBAL.__REDUX_DEVTOOLS_EXTENSION__ !== 'undefined' + // ? GLOBAL.__REDUX_DEVTOOLS_EXTENSION__() + // : f => f + ) +); diff --git a/prototypes/create-instance-icons/src/sw.js b/prototypes/create-instance-icons/src/sw.js new file mode 100644 index 00000000..047cf486 --- /dev/null +++ b/prototypes/create-instance-icons/src/sw.js @@ -0,0 +1,108 @@ +// In production, we register a service worker to serve assets from local cache. + +// This lets the app load faster on subsequent visits in production, and gives +// it offline capabilities. However, it also means that developers (and users) +// will only see deployed updates on the "N+1" visit to a page, since previously +// cached resources are updated in the background. + +// To learn more about the benefits of this model, read https://goo.gl/KwvDNy. +// This link also includes instructions on opting out of this behavior. + +const isLocalhost = Boolean( + window.location.hostname === 'localhost' || + // [::1] is the IPv6 localhost address. + window.location.hostname === '[::1]' || + // 127.0.0.1/8 is considered localhost for IPv4. + window.location.hostname.match( + /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ + ) +); + +export function register() { + if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + // The URL constructor is available in all browsers that support SW. + const publicUrl = new URL(process.env.PUBLIC_URL, window.location); + if (publicUrl.origin !== window.location.origin) { + // Our service worker won't work if PUBLIC_URL is on a different origin + // from what our page is served on. This might happen if a CDN is used to + // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 + return; + } + + window.addEventListener('load', () => { + const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; + + if (!isLocalhost) { + // Is not local host. Just register service worker + registerValidSW(swUrl); + } else { + // This is running on localhost. Lets check if a service worker still exists or not. + // checkValidServiceWorker(swUrl); + } + }); + } +} + +function registerValidSW(swUrl) { + navigator.serviceWorker + .register(swUrl) + .then(registration => { + registration.onupdatefound = () => { + const installingWorker = registration.installing; + installingWorker.onstatechange = () => { + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + // At this point, the old content will have been purged and + // the fresh content will have been added to the cache. + // It's the perfect time to display a "New content is + // available; please refresh." message in your web app. + console.log('New content is available; please refresh.'); + } else { + // At this point, everything has been precached. + // It's the perfect time to display a + // "Content is cached for offline use." message. + console.log('Content is cached for offline use.'); + } + } + }; + }; + }) + .catch(error => { + console.error('Error during service worker registration:', error); + }); +} + +function checkValidServiceWorker(swUrl) { + // Check if the service worker can be found. If it can't reload the page. + fetch(swUrl) + .then(response => { + // Ensure service worker exists, and that we really are getting a JS file. + if ( + response.status === 404 || + response.headers.get('content-type').indexOf('javascript') === -1 + ) { + // No service worker found. Probably a different app. Reload the page. + navigator.serviceWorker.ready.then(registration => { + registration.unregister().then(() => { + window.location.reload(); + }); + }); + } else { + // Service worker found. Proceed as normal. + // registerValidSW(swUrl); + } + }) + .catch(() => { + console.log( + 'No internet connection found. App is running in offline mode.' + ); + }); +} + +export function unregister() { + if ('serviceWorker' in navigator) { + navigator.serviceWorker.ready.then(registration => { + registration.unregister(); + }); + } +} diff --git a/prototypes/create-instance-icons/test/file-mock.js b/prototypes/create-instance-icons/test/file-mock.js new file mode 100644 index 00000000..d906d5b4 --- /dev/null +++ b/prototypes/create-instance-icons/test/file-mock.js @@ -0,0 +1 @@ +module.exports = 'test-file-mock'; diff --git a/prototypes/create-instance-icons/test/mocks/filters.js b/prototypes/create-instance-icons/test/mocks/filters.js new file mode 100644 index 00000000..38f23e36 --- /dev/null +++ b/prototypes/create-instance-icons/test/mocks/filters.js @@ -0,0 +1,24 @@ +export default { + cpu: { + min: 0.25, + max: 3.25 + }, + cost: { + min: 0.016, + max: 0.525 + }, + ram: { + min: 0.256, + max: 50.688 + }, + disk: { + min: 0.01, + max: 107.26 + }, + groups: [ + { name: 'Compute Optimized', selected: false }, + { name: 'Memory Optimized', selected: false }, + { name: 'General Purpose', selected: false }, + { name: 'Storage Optimized', selected: false } + ] +}; diff --git a/prototypes/create-instance-icons/test/mocks/index.js b/prototypes/create-instance-icons/test/mocks/index.js new file mode 100644 index 00000000..d6573ba2 --- /dev/null +++ b/prototypes/create-instance-icons/test/mocks/index.js @@ -0,0 +1,5 @@ +export { default as Router } from './router'; +export { default as Store } from './store'; +export { default as PackagesMock } from './packages'; +export { default as FiltersMock } from './filters'; +export { default as Theme } from './theme'; diff --git a/prototypes/create-instance-icons/test/mocks/packages.js b/prototypes/create-instance-icons/test/mocks/packages.js new file mode 100644 index 00000000..9e26eec4 --- /dev/null +++ b/prototypes/create-instance-icons/test/mocks/packages.js @@ -0,0 +1,50 @@ +export default [ + { + name: 'High CPU 0.25', + vcpus: 0.25, + memory: 0.256, + disk: 10, + group: 'Compute Optimized', + price: '0.016' + }, + { + name: 'High CPU 0.75', + vcpus: 0.5, + memory: 0.768, + disk: 25, + group: 'Compute Optimized', + price: '0.033' + }, + { + name: 'High CPU 1.75', + vcpus: 1, + memory: 1.8, + disk: 50, + group: 'Compute Optimized', + price: '0.066' + }, + { + name: 'High CPU 3.75', + vcpus: 2, + memory: 3.8, + disk: 100, + group: 'Compute Optimized', + price: '0.131' + }, + { + name: 'High CPU 7.75', + vcpus: 4, + memory: 7.8, + disk: 200, + group: 'Compute Optimized', + price: '0.263' + }, + { + name: 'High CPU 15.75', + vcpus: 8, + memory: 15.8, + disk: 400, + group: 'Compute Optimized', + price: '0.525' + } +]; diff --git a/prototypes/create-instance-icons/test/mocks/router.js b/prototypes/create-instance-icons/test/mocks/router.js new file mode 100644 index 00000000..47dbba36 --- /dev/null +++ b/prototypes/create-instance-icons/test/mocks/router.js @@ -0,0 +1,4 @@ +import React from 'react'; +import { MemoryRouter } from 'react-router-dom'; + +export default ({ children }) => {children}; diff --git a/prototypes/create-instance-icons/test/mocks/store.js b/prototypes/create-instance-icons/test/mocks/store.js new file mode 100644 index 00000000..6026ecbc --- /dev/null +++ b/prototypes/create-instance-icons/test/mocks/store.js @@ -0,0 +1,9 @@ +import React from 'react'; +import { client, store } from '@state/store'; +import { ApolloProvider } from 'react-apollo'; + +export default ({ children }) => ( + + {children} + +); diff --git a/prototypes/create-instance-icons/test/mocks/theme.js b/prototypes/create-instance-icons/test/mocks/theme.js new file mode 100644 index 00000000..5b1a2a45 --- /dev/null +++ b/prototypes/create-instance-icons/test/mocks/theme.js @@ -0,0 +1,7 @@ +import React from 'react'; +import { ThemeProvider } from 'styled-components'; +import { theme } from 'joyent-ui-toolkit'; + +export default ({ children }) => ( + {children} +); diff --git a/prototypes/create-instance-icons/test/run b/prototypes/create-instance-icons/test/run new file mode 100755 index 00000000..01c9d4a9 --- /dev/null +++ b/prototypes/create-instance-icons/test/run @@ -0,0 +1,66 @@ +#!/usr/bin/env node + +// Do this as the first thing so that any code reading it knows the right env. +process.env.BABEL_ENV = 'test'; +process.env.NODE_ENV = 'test'; +process.env.PUBLIC_URL = ''; + +// Makes the script crash on unhandled rejections instead of silently +// ignoring them. In the future, promise rejections that are not handled will +// terminate the Node.js process with a non-zero exit code. +process.on('unhandledRejection', err => { + throw err; +}); + +// Ensure environment variables are read. +require('react-scripts/config/env'); + +const jest = require('jest'); +const argv = process.argv.slice(2); + +// This is not necessary after eject because we embed config into package.json. +const createJestConfig = require('react-scripts/scripts/utils/createJestConfig'); +const path = require('path'); +const paths = require('react-scripts/config/paths'); + +const config = createJestConfig( + relativePath => + path.resolve( + __dirname, + '../../../node_modules/react-scripts', + relativePath + ), + path.resolve(__dirname, '../../../'), + false +); + +// patch +config.testEnvironment = 'node'; +config.transform = Object.assign( + {}, + { + '\\.(gql|graphql)$': 'jest-transform-graphql' + }, + config.transform +); +config.testMatch = [ + '/packages/my-joyent/src/**/**/__tests__/**/*.js', + '/packages/my-joyent/src/**/**/**/?(*.)(spec|test).js' +]; +config.moduleNameMapper = Object.assign({}, config.moduleNameMapper, { + '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': + '/packages/my-joyent/test/file-mock.js', + '^@root/(.*)$': '/packages/my-joyent/src/$1', + '^@mocks/(.*)$': '/packages/my-joyent/test/mocks$1', + '^@components/(.*)$': + '/packages/my-joyent/src/components/$1', + '^@containers/(.*)$': + '/packages/my-joyent/src/containers/$1', + '^@graphql/(.*)$': '/packages/my-joyent/src/graphql/$1', + '^@assets/(.*)$': '/packages/my-joyent/src/assets/$1', + '^@state/(.*)$': '/packages/my-joyent/src/state/$1' +}); + +argv.push('--config', JSON.stringify(config)); + +jest.run(argv); diff --git a/prototypes/create-instance/package.json b/prototypes/create-instance/package.json index 28ecb15e..c0173dcf 100644 --- a/prototypes/create-instance/package.json +++ b/prototypes/create-instance/package.json @@ -57,7 +57,7 @@ "jest-snapshot": "^21.2.1", "jest-styled-components": "^4.9.0", "jest-transform-graphql": "^2.1.0", - "joyent-react-scripts": "^3.1.0", + "joyent-react-scripts": "^3.1.1", "lodash.sortby": "^4.7.0", "mz": "^2.7.0", "react-scripts": "^1.0.17", diff --git a/yarn.lock b/yarn.lock index 4b492d23..6ff17e04 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3475,8 +3475,8 @@ envir@^1.0.0: jessy "^2.0.0" enzyme-adapter-react-16@^1.0.0: - version "1.0.4" - resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.4.tgz#67f898cc053452f5c786424e395fe0c63a0607fe" + version "1.1.0" + resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.1.0.tgz#86c5db7c10f0be6ec25d54ca41b59f2abb397cf4" dependencies: enzyme-adapter-utils "^1.1.0" lodash "^4.17.4" @@ -3615,11 +3615,11 @@ escope@^3.6.0: esrecurse "^4.1.0" estraverse "^4.1.1" -eslint-config-joyent-portal@^3.2.0: +eslint-config-joyent-portal@3.2.0, eslint-config-joyent-portal@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/eslint-config-joyent-portal/-/eslint-config-joyent-portal-3.2.0.tgz#20de54035938ea6918160393dc4b387e2792d57f" -eslint-config-prettier@^2.6.0: +eslint-config-prettier@^2.6.0, eslint-config-prettier@^2.7.0: version "2.7.0" resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-2.7.0.tgz#7bbfef66ad783277836f4ea556e68b9bcc9da4d0" dependencies: @@ -3716,8 +3716,8 @@ eslint-plugin-jsx-a11y@^6.0.2: jsx-ast-utils "^1.4.0" eslint-plugin-markdown@^1.0.0-beta.6: - version "1.0.0-beta.7" - resolved "https://registry.yarnpkg.com/eslint-plugin-markdown/-/eslint-plugin-markdown-1.0.0-beta.7.tgz#12e73a4127c4a4b79d966f9f475851dd0f78f7e7" + version "1.0.0-beta.6" + resolved "https://registry.yarnpkg.com/eslint-plugin-markdown/-/eslint-plugin-markdown-1.0.0-beta.6.tgz#d9e62666eea4e76387e85f502df668abdfbd4395" dependencies: object-assign "^4.0.1" remark-parse "^3.0.0" @@ -5929,9 +5929,9 @@ jest-jasmine2@^21.2.1: jest-snapshot "^21.2.1" p-cancelable "^0.3.0" -jest-junit@^3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/jest-junit/-/jest-junit-3.1.0.tgz#3bd0b7a8bfd5b91f86376d44ff0f4c7f136f4287" +jest-junit@^3.1.0, jest-junit@^3.2.1: + version "3.2.1" + resolved "https://registry.yarnpkg.com/jest-junit/-/jest-junit-3.2.1.tgz#e58f06979e5a8d551fedb5f8e11f942fc35a00e9" dependencies: mkdirp "^0.5.1" strip-ansi "^4.0.0" @@ -6179,9 +6179,9 @@ joyent-manifest-editor@^3.0.1: prop-types "^15.6.0" react-codemirror2 "^3.0.3" -joyent-react-scripts@^3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/joyent-react-scripts/-/joyent-react-scripts-3.1.0.tgz#c65eecee16972687d5645db4d928d85a5530c876" +joyent-react-scripts@^3.1.1: + version "3.1.1" + resolved "https://registry.yarnpkg.com/joyent-react-scripts/-/joyent-react-scripts-3.1.1.tgz#07b4a0ab3ed6fee1ea5ec4bcd6895fbde4ca3b44" dependencies: apr-for-each "^1.0.6" apr-main "^2.0.2" @@ -6196,6 +6196,7 @@ joyent-react-scripts@^3.1.0: mz "^2.7.0" react-scripts "^1.0.17" webpack-common-shake "^1.5.3" + webpack-sources "1.0.1" js-base64@^2.1.9: version "2.3.2" @@ -7107,8 +7108,8 @@ mz@^2.7.0: thenify-all "^1.0.0" nan@^2.3.0: - version "2.7.0" - resolved "https://registry.yarnpkg.com/nan/-/nan-2.7.0.tgz#d95bf721ec877e08db276ed3fc6eb78f9083ad46" + version "2.8.0" + resolved "https://registry.yarnpkg.com/nan/-/nan-2.8.0.tgz#ed715f3fe9de02b57a5e6252d90a96675e1f085a" natural-compare@^1.4.0: version "1.4.0" @@ -7788,8 +7789,8 @@ pngjs@^3.0.0, pngjs@^3.3.0: resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.3.0.tgz#1f5730c189c94933b81beda2ab2f8e2855263a8f" popper.js@^1.12.5: - version "1.12.8" - resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.12.8.tgz#b59b57473621feaf03726e1abe7c17c4b23c8564" + version "1.12.9" + resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.12.9.tgz#0dfbc2dff96c451bb332edcfcfaaf566d331d5b3" portfinder@^1.0.13, portfinder@^1.0.9: version "1.0.13" @@ -8432,6 +8433,13 @@ react-codemirror2@^3.0.3: version "3.0.7" resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-3.0.7.tgz#d5d9888158263ae56da766539d7803486566ab9f" +react-create-component-from-tag-prop@^1.2.1: + version "1.3.1" + resolved "https://registry.yarnpkg.com/react-create-component-from-tag-prop/-/react-create-component-from-tag-prop-1.3.1.tgz#5389407d99f88ba2b36351780a6094470b44a7c7" + dependencies: + lodash "^4.17.4" + react "^15.5.4" + react-dev-utils@^3.0.2: version "3.1.1" resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-3.1.1.tgz#09ae7209a81384248db56547e718e65bd3b20eb5" @@ -8728,7 +8736,7 @@ react-textarea-autosize@^5.1.0: dependencies: prop-types "^15.6.0" -react@16.1.1, react@^16.1.1: +react@16.1.1, react@^15.5.4, react@^16.1.1: version "16.1.1" resolved "https://registry.yarnpkg.com/react/-/react-16.1.1.tgz#d5c4ef795507e3012282dd51261ff9c0e824fe1f" dependencies: @@ -9779,7 +9787,7 @@ source-map-url@~0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.3.0.tgz#7ecaf13b57bcd09da8a40c5d269db33799d4aaf9" -source-map@0.5.x, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.0, source-map@~0.5.1, source-map@~0.5.6: +source-map@0.5.x, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.0, source-map@~0.5.1, source-map@~0.5.3, source-map@~0.5.6: version "0.5.7" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" @@ -10086,6 +10094,18 @@ style-search@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902" +styled-components-breakpoint@^1.0.0-preview.3: + version "1.0.1" + resolved "https://registry.yarnpkg.com/styled-components-breakpoint/-/styled-components-breakpoint-1.0.1.tgz#51fb474d9449e228b6f3f2cd232631ec65c149bc" + +styled-components-spacing@^2.1.3: + version "2.1.3" + resolved "https://registry.yarnpkg.com/styled-components-spacing/-/styled-components-spacing-2.1.3.tgz#cae2ea0632df1145edc3adddd5468bb3d089b54d" + dependencies: + prop-types "^15.5.8" + react-create-component-from-tag-prop "^1.2.1" + styled-components-breakpoint "^1.0.0-preview.3" + styled-components@^2.2.3: version "2.2.3" resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.2.3.tgz#154575c269880c840f903f580287dab155cf684c" @@ -10177,8 +10197,8 @@ stylelint@^8.2.0: table "^4.0.1" stylis@3.x: - version "3.4.2" - resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.2.tgz#336c5e33a673c7111c10fa18f8b9e41e1772bd98" + version "3.4.3" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.3.tgz#875bd0db3db37bb6de08f89275fc38ee2e32ee75" sugarss@^1.0.0: version "1.0.1" @@ -11110,12 +11130,12 @@ webpack-merge@^4.1.0: dependencies: lodash "^4.17.4" -webpack-sources@^1.0.1: - version "1.0.2" - resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.0.2.tgz#d0148ec083b3b5ccef1035a6b3ec16442983b27a" +webpack-sources@1.0.1, webpack-sources@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.0.1.tgz#c7356436a4d13123be2e2426a05d1dad9cbe65cf" dependencies: source-list-map "^2.0.0" - source-map "~0.6.1" + source-map "~0.5.3" webpack@3.8.1, webpack@^3.1.0, webpack@^3.8.1: version "3.8.1"