feat: new tables and affinity prototype

This commit is contained in:
Sara Vieira 2017-11-16 10:47:32 +00:00 committed by Sérgio Ramos
parent c47333ed1b
commit 607d2ae8cb
121 changed files with 13232 additions and 76 deletions

11
joyent.code-workspace Normal file
View File

@ -0,0 +1,11 @@
{
"folders": [
{
"path": "prototypes/create-instance-icons"
},
{
"path": "packages/ui-toolkit"
}
],
"settings": {}
}

View File

@ -78,6 +78,7 @@
"react": "16.1.1", "react": "16.1.1",
"react-dom": "16.1.1", "react-dom": "16.1.1",
"react-modal": "2.4.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"
} }
} }

View File

@ -61,7 +61,7 @@
"jest-snapshot": "^21.2.1", "jest-snapshot": "^21.2.1",
"jest-styled-components": "^4.9.0", "jest-styled-components": "^4.9.0",
"jest-transform-graphql": "^2.1.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", "react-test-renderer": "^16.1.1",
"redrun": "^5.10.0", "redrun": "^5.10.0",
"serve": "^6.4.1", "serve": "^6.4.1",

View File

@ -60,7 +60,7 @@ const Item = ({
onStartSnap onStartSnap
}) => ( }) => (
<TableTr> <TableTr>
<TableTd center middle> <TableTd paddingRight="0" paddingLeft="18px" left middle>
<FormGroup name={name} reduxForm> <FormGroup name={name} reduxForm>
<Checkbox /> <Checkbox />
</FormGroup> </FormGroup>
@ -207,7 +207,7 @@ export default ({
<Table> <Table>
<TableThead> <TableThead>
<TableTr> <TableTr>
<TableTh xs="48" /> <TableTh xs="38" padding="0" />
<TableTh xs="80" left bottom> <TableTh xs="80" left bottom>
<P>Id</P> <P>Id</P>
</TableTh> </TableTh>
@ -229,10 +229,10 @@ export default ({
return ( return (
<form> <form>
<Row between="xs"> <Row between="xs">
<Col xs={8} sm={8} lg={6}> <Col xs={8} sm={8} lg={8}>
<Row> <Row>
<Col xs={7} sm={7} md={6} lg={6}> <Col xs={7} sm={7} md={6} lg={6}>
<FormGroup name="filter" reduxForm> <FormGroup name="filter" fluid reduxForm>
<FormLabel>Filter instances</FormLabel> <FormLabel>Filter instances</FormLabel>
<Input <Input
placeholder="Search for name, state, tags, etc..." placeholder="Search for name, state, tags, etc..."
@ -241,8 +241,8 @@ export default ({
/> />
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs={5} sm={3} lg={3}> <Col xs={5} sm={3} lg={4}>
<FormGroup name="sort" reduxForm> <FormGroup name="sort" fluidreduxForm>
<FormLabel>Sort</FormLabel> <FormLabel>Sort</FormLabel>
<Select disabled={!items.length} fluid> <Select disabled={!items.length} fluid>
<option value="name">Name</option> <option value="name">Name</option>
@ -261,10 +261,10 @@ export default ({
</Col> </Col>
</Row> </Row>
</Col> </Col>
<Col xs={4} sm={4} lg={6}> <Col xs={4} sm={4} lg={4}>
<Row end="xs"> <Row end="xs">
<Col xs={6} sm={4} md={3} lg={2}> <Col xs={6} sm={4} md={3} lg={3}>
<FormGroup> <FormGroup fluid>
<FormLabel>&#8291;</FormLabel> <FormLabel>&#8291;</FormLabel>
<Select <Select
value="actions" value="actions"
@ -311,8 +311,8 @@ export default ({
</Select> </Select>
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs={6} sm={6} md={5} lg={2}> <Col xs={6} sm={6} md={5} lg={4}>
<FormGroup> <FormGroup fluid>
<FormLabel>&#8291;</FormLabel> <FormLabel>&#8291;</FormLabel>
<Button <Button
type="button" type="button"

View File

@ -75,7 +75,7 @@
"jest-matcher-utils": "^21.2.1", "jest-matcher-utils": "^21.2.1",
"jest-snapshot": "^21.2.1", "jest-snapshot": "^21.2.1",
"jest-styled-components": "^4.9.0", "jest-styled-components": "^4.9.0",
"joyent-react-scripts": "^3.1.0", "joyent-react-scripts": "^3.1.1",
"lodash.isboolean": "^3.0.3", "lodash.isboolean": "^3.0.3",
"navalia": "^1.2.0", "navalia": "^1.2.0",
"react": "^16.1.1", "react": "^16.1.1",

View File

@ -23,7 +23,7 @@ const style = css`
position: relative; position: relative;
${typography.normal}; ${typography.normal};
${typography.loadedFontFamily};
font-size: ${remcalc(15)}; font-size: ${remcalc(15)};
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -155,7 +155,7 @@ const style = css`
`}; `};
${is('small')` ${is('small')`
padding: ${remcalc(13)} ${remcalc(18)}; padding: ${remcalc(14)} ${remcalc(14)};
`}; `};
${is('icon')` ${is('icon')`
@ -171,13 +171,18 @@ const style = css`
${is('marginless')` ${is('marginless')`
margin: 0; margin: 0;
`}; `};
${is('bold')`
font-weight: bold;
`};
`; `;
const StyledButton = NButton.extend` const StyledButton = NButton.extend`
min-width: ${remcalc(120)}; min-width: ${remcalc(120)};
${style} & + button { ${style} & + button {
margin-left: ${remcalc(20)}; margin-left: ${remcalc(6)};
} }
`; `;

View File

@ -102,6 +102,7 @@ const BaseMeta = BaseCard.extend`
background-color: transparent; background-color: transparent;
border-width: 0; border-width: 0;
box-shadow: none; box-shadow: none;
color: inherit;
`; `;
export const Box = ({ children, border, actionable, ...rest }) => { export const Box = ({ children, border, actionable, ...rest }) => {

View File

@ -1,6 +1,5 @@
import styled from 'styled-components'; import styled from 'styled-components';
import { Row } from 'react-styled-flexboxgrid'; import { Row } from 'react-styled-flexboxgrid';
import remcalc from 'remcalc';
import is from 'styled-is'; import is from 'styled-is';
import Baseline from '../baseline'; import Baseline from '../baseline';

View File

@ -26,7 +26,7 @@ const paddingTop = props => (props.multiple ? remcalc(20) : remcalc(13));
const style = css` const style = css`
box-sizing: border-box; box-sizing: border-box;
${typography.loadedFontFamily};
width: 100%; width: 100%;
height: ${height}; height: ${height};
min-height: ${height}; min-height: ${height};
@ -40,6 +40,16 @@ const style = css`
border: ${border.unchecked}; border: ${border.unchecked};
color: ${color}; color: ${color};
&::-webkit-input-placeholder {
color: rgba(73, 73, 73, 0.5);
}
&::-moz-placeholder {
color: rgba(73, 73, 73, 0.5);
}
&:-ms-input-placeholder {
color: rgba(73, 73, 73, 0.5);
}
${is('disabled')` ${is('disabled')`
background-color: ${props => props.theme.disabled}; background-color: ${props => props.theme.disabled};
color: ${props => props.theme.textDisabled}; color: ${props => props.theme.textDisabled};
@ -77,6 +87,14 @@ const style = css`
} }
} }
${is('small')`
width: ${remcalc(120)}
`};
${is('xSmall')`
width: ${remcalc(80)}
`};
${is('error')` ${is('error')`
border-color: ${props => props.theme.redDark} border-color: ${props => props.theme.redDark}
`}; `};
@ -85,6 +103,12 @@ const style = css`
border-color: ${props => props.theme.orangeDark} border-color: ${props => props.theme.orangeDark}
`}; `};
${is('wrapped')`
margin: 0;
border: none;
width: ${remcalc(120)};
`};
${is('success')` ${is('success')`
border-color: ${props => props.theme.greenDark} border-color: ${props => props.theme.greenDark}
`}; `};

View File

@ -33,8 +33,9 @@ const Label = styled.label`
position: absolute; position: absolute;
width: ${remcalc(18)}; width: ${remcalc(18)};
height: ${remcalc(18)}; height: ${remcalc(18)};
top: 0;
box-sizing: border-box; box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer; cursor: pointer;
@ -103,7 +104,6 @@ const Label = styled.label`
const InnerContainer = styled.div` const InnerContainer = styled.div`
display: inline-block; display: inline-block;
vertical-align: text-bottom; vertical-align: text-bottom;
margin-right: ${remcalc(8)};
width: ${remcalc(18)}; width: ${remcalc(18)};
height: ${remcalc(18)}; height: ${remcalc(18)};
position: relative; position: relative;

View File

@ -1,14 +1,15 @@
import { Fieldset } from 'normalized-styled-components'; import React from 'react';
import styled from 'styled-components';
import is from 'styled-is';
import Baseline from '../baseline'; import Baseline from '../baseline';
const StyledFieldset = Fieldset.extend` const StyledFieldset = styled.div`
display: inline-block; display: inline-block;
margin: 0; margin: 0;
padding: 0; padding: 0;
border: none; border: none;
overflow: hidden; overflow: hidden;
width: 100%;
height: auto; height: auto;
-webkit-margin-start: 0; -webkit-margin-start: 0;
@ -17,6 +18,16 @@ const StyledFieldset = Fieldset.extend`
-webkit-padding-start: 0; -webkit-padding-start: 0;
-webkit-padding-end: 0; -webkit-padding-end: 0;
-webkit-padding-after: 0; -webkit-padding-after: 0;
${is('fluid')`
width: 100%;
`};
`; `;
export default Baseline(StyledFieldset); const Fieldset = ({ children, ...rest }) => (
<StyledFieldset role="group" {...rest}>
{children}
</StyledFieldset>
);
export default Baseline(Fieldset);

View File

@ -3,12 +3,24 @@ import { Broadcast } from 'joy-react-broadcast';
import { Field } from 'redux-form'; import { Field } from 'redux-form';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import rndId from 'rnd-id'; import rndId from 'rnd-id';
import styled from 'styled-components';
import is from 'styled-is';
import Fieldset from './fieldset'; import Fieldset from './fieldset';
import Baseline from '../baseline'; import Baseline from '../baseline';
const Noop = ({ children }) => children; const Noop = ({ children }) => children;
const Wrapper = styled(Fieldset)`
${is('center')`
align-items: center;
`};
${is('flex')`
display: flex;
`};
`;
class FormGroup extends Component { class FormGroup extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -26,11 +38,11 @@ class FormGroup extends Component {
}; };
return ( return (
<Fieldset className={className} style={style}> <Wrapper className={className} style={style} {...rest}>
<Broadcast channel="input-group" value={value}> <Broadcast channel="input-group" value={value}>
<Noop>{children}</Noop> <Noop>{children}</Noop>
</Broadcast> </Broadcast>
</Fieldset> </Wrapper>
); );
} }

View File

@ -10,4 +10,5 @@ export { default as Radio, RadioList } from './radio';
export { default as Select } from './select'; export { default as Select } from './select';
export { default as Toggle, ToggleList } from './toggle'; export { default as Toggle, ToggleList } from './toggle';
export { default as NumberInput } from './number-input'; export { default as NumberInput } from './number-input';
export { default as InputDropdown } from './input-dropdown';
export { NumberInputNormalize } from './number-input'; export { NumberInputNormalize } from './number-input';

View File

@ -0,0 +1,13 @@
import styled from 'styled-components';
import remcalc from 'remcalc';
const InputDropdown = styled.div`
background: ${props => props.theme.white};
border: ${remcalc(1)} solid #d8d8d8;
box-sizing: border-box;
border-radius: ${remcalc(4)};
margin-bottom: ${remcalc(8)};
margin-top: ${remcalc(8)};
`;
export default InputDropdown;;

View File

@ -9,6 +9,7 @@ const StyledLabel = Label.extend`
margin-right: ${remcalc(12)}; margin-right: ${remcalc(12)};
font-weight: bold; font-weight: bold;
white-space: pre; white-space: pre;
font-size: ${remcalc(13)};
${is('disabled')` ${is('disabled')`
color: ${props => props.theme.grey}; color: ${props => props.theme.grey};

View File

@ -43,10 +43,25 @@ const SelectWrapper = styled.div`
const select = Baseline(BaseInput(Stylable('select'))); const select = Baseline(BaseInput(Stylable('select')));
const StyledSelect = select.extend` const StyledSelect = select.extend`
position: relative; position: relative;
padding: ${remcalc(12)};
padding-right: ${remcalc(25)};
${is('disabled')` ${is('disabled')`
border-color: ${props => props.theme.grey}; border-color: ${props => props.theme.grey};
color: ${props => props.theme.grey}; color: ${props => props.theme.grey};
`}; `};
${is('wrapped')`
margin: 0;
border: none;
width: ${remcalc(65)};
border-left: ${remcalc(1)} solid ${props => props.theme.grey};
border-radius: 0 ${remcalc(4)} ${remcalc(4)} 0;
&:focus {
border-left: ${remcalc(1)} solid ${props => props.theme.grey};
}
`};
`; `;
/** /**

View File

@ -16,6 +16,12 @@ const Box = styled.div`
align-self: stretch; align-self: stretch;
order: 0; order: 0;
width: ${remcalc(150)}; width: ${remcalc(150)};
display: flex;
${is('beta')`
align-items: center;
margin-top: ${remcalc(6)}
`}
`; `;
export default ({ children, ...rest }) => ( export default ({ children, ...rest }) => (

View File

@ -38,6 +38,7 @@ const Box = styled.section`
order: 0; order: 0;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 ${remcalc(18)};
svg { svg {
margin-right: ${remcalc(6)}; margin-right: ${remcalc(6)};

View File

@ -1,8 +1,30 @@
import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import remcalc from 'remcalc';
export default styled.ul` const UL = styled.ul`
padding: 0; padding: 0;
margin: 0; margin: 0;
display: flex; display: flex;
list-style: none; list-style: none;
a {
padding: ${remcalc(15)};
line-height: ${remcalc(24)};
font-size: ${remcalc(15)};
color: ${props => props.theme.white};
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
transition: all 200ms ease;
max-height: ${remcalc(53)};
min-height: ${remcalc(53)};
box-sizing: border-box;
&:hover,
&.active {
background: rgba(255, 255, 255, 0.15);
}
}
`; `;
export default ({ children, ...rest }) => <UL {...rest}>{children}</UL>;

View File

@ -4,7 +4,7 @@ export { default as Baseline } from './baseline';
export { default as Button } from './button'; export { default as Button } from './button';
export { default as Label } from './label'; export { default as Label } from './label';
export { PageContainer, RootContainer, ViewContainer } from './layout'; export { PageContainer, RootContainer, ViewContainer } from './layout';
export { H1, H2, H3 } from './text/headings'; export { H1, H2, H3, H4, H5 } from './text/headings';
export { default as P } from './text/p'; export { default as P } from './text/p';
export { default as Small } from './text/small'; export { default as Small } from './text/small';
export { default as Title } from './text/title'; export { default as Title } from './text/title';
@ -65,7 +65,8 @@ export {
Toggle, Toggle,
ToggleList, ToggleList,
NumberInput, NumberInput,
NumberInputNormalize NumberInputNormalize,
InputDropdown
} from './form'; } from './form';
export { export {
@ -119,7 +120,7 @@ export {
export { export {
Container as TooltipContainer, Container as TooltipContainer,
Target as TooltipTarget, Target as TooltipTarget,
default as Tolltip default as Tooltip
} from './tooltip'; } from './tooltip';
export { export {

View File

@ -5,6 +5,8 @@ import remcalc from 'remcalc';
import { styled as breakpoints } from '../breakpoints'; import { styled as breakpoints } from '../breakpoints';
export default Grid.extend` export default Grid.extend`
max-width: ${remcalc(1000)};
${breakpoints.smallOnly` ${breakpoints.smallOnly`
padding-left: ${remcalc(6)}; padding-left: ${remcalc(6)};
padding-right: ${remcalc(6)}; padding-right: ${remcalc(6)};

View File

@ -45,8 +45,8 @@ const Column = css`
white-space: nowrap; white-space: nowrap;
box-sizing: border-box; box-sizing: border-box;
padding: 0 ${remcalc(8)} 0 ${remcalc(8)}; padding: 0 ${remcalc(18)};
height: ${remcalc(48)}; height: ${remcalc(60)};
${handleBreakpoint('xs')}; ${handleBreakpoint('xs')};
@ -116,22 +116,33 @@ const Column = css`
`; `;
const BaseTable = styled.table` const BaseTable = styled.table`
border-collapse: collapse; overflow: hidden;
border-spacing: 0;
border-collapse: separate;
table-layout: fixed; table-layout: fixed;
width: 100%; width: 100%;
max-width: 100%;
`; `;
const BaseThead = styled.thead` const BaseThead = styled.thead`
width: 100%; width: 100%;
th:first-child {
border-top-left-radius: ${remcalc(4)};
}
th:last-child {
border-top-right-radius: ${remcalc(4)};
}
th {
border-bottom-width: 0;
}
`; `;
const BaseTbody = styled.tbody` const BaseTbody = styled.tbody`
width: 100%; width: 100%;
border-width: ${remcalc(1)};
border-style: solid;
border-color: ${props => props.theme.grey};
${is('shadow')` ${is('shadow')`
box-shadow: ${bottomShadow}; box-shadow: ${bottomShadow};
`}; `};
@ -148,29 +159,74 @@ const BaseTbody = styled.tbody`
const BaseTh = styled.th` const BaseTh = styled.th`
${Column}; ${Column};
border-left-width: 0; text-align: left;
border-right-width: 0; padding: ${remcalc(12)} ${remcalc(24)};
border-top-width: 0; height: ${remcalc(42)};
padding-top: 0; color: ${props => props.theme.greyLight};
padding-bottom: ${remcalc(5)}; font-weight: 500;
${is('selected')`
color: ${props => props.theme.text};
`};
&:not(:first-child) {
border-left-width: 0;
}
&:not(:last-child) {
border-right-width: 0;
}
${is('right')`
text-align: right;
`};
${ColumnBorder}; ${ColumnBorder};
`; `;
const BaseTd = styled.td` const BaseTd = styled.td`
${Column}; ${Column};
transition: all 200ms ease;
border-bottom-width: 0;
vertical-align: middle;
border-left-width: 0; * {
border-right-width: 0; vertical-align: middle;
}
&:not(:first-child) {
border-left-width: 0;
}
&:not(:last-child) {
border-right-width: 0;
}
${is('right')`
text-align: right;
`};
${ColumnBorder}; ${ColumnBorder};
`; `;
const BaseTr = styled.tr` const BaseTr = styled.tr`
display: table-row; display: table-row;
color: ${props => props.theme.text}; color: ${props => props.theme.text};
background-color: ${props => props.theme.white}; background-color: ${props => props.theme.white};
box-shadow: 0 ${remcalc(2)} 0 rgba(0, 0, 0, 0.05);
box-sizing: border-box;
${is('selected')`
box-shadow: none;
td {
border: 1px solid ${props => props.theme.primary};
background-color: rgba(59, 70, 204, 0.05);;
}
`};
&:last-child td {
border-bottom-width: ${remcalc(1)};
}
${is('actionable')` ${is('actionable')`
cursor: pointer; cursor: pointer;
@ -186,6 +242,8 @@ const BaseTr = styled.tr`
${is('header')` ${is('header')`
color: ${props => props.theme.text}; color: ${props => props.theme.text};
background-color: transparent; background-color: transparent;
border: none;
box-shadow: none;
`}; `};
`; `;

View File

@ -93,3 +93,26 @@ export const H4 = styled.h4`
margin-top: ${remcalc(12)}; margin-top: ${remcalc(12)};
} }
`; `;
export const H5 = styled.h4`
margin: 0;
${typography.color};
${typography.fontFamily};
${typography.normal};
line-height: ${remcalc(24)};
font-size: ${remcalc(15)};
& + p,
& + small,
& + h1,
& + h2,
& + label,
& + h3,
& + h4,
& + h5,
& + div,
& + span {
margin-top: ${remcalc(12)};
}
`;

View File

@ -1,4 +1,4 @@
export { H1, H2, H3, H4 } from './headings'; export { H1, H2, H3, H4, H5 } from './headings';
export { default as P } from './p'; export { default as P } from './p';
export { default as Small } from './small'; export { default as Small } from './small';
export { default as Label } from '../label'; export { default as Label } from '../label';

View File

@ -34,7 +34,8 @@ const white = {
const grey = { const grey = {
grey: 'rgb(216, 216, 216)', grey: 'rgb(216, 216, 216)',
greyTransparent: 'rgba(73, 73, 73, 0.8)' greyTransparent: 'rgba(73, 73, 73, 0.8)',
greyLight: 'rgb(189, 189, 189)'
}; };
const green = { const green = {

View File

@ -10,11 +10,11 @@ import style from './style';
const arrowClassName = rndId(); const arrowClassName = rndId();
const Popper = styled(BasePopper)` const Popper = styled(BasePopper)`
box-shadow: 0 0 ${remcalc(2)} rgba(0, 0, 0, 0.5);
padding: ${remcalc(13)} ${remcalc(18)}; padding: ${remcalc(13)} ${remcalc(18)};
font-weight: normal;
${style({ ${style({
background: 'secondaryHover', background: 'text',
color: 'white', color: 'white',
border: 'transparent', border: 'transparent',
arrow: arrowClassName arrow: arrowClassName

View File

@ -4,6 +4,7 @@ import remcalc from 'remcalc';
export default ({ background, color, border, arrow }) => css` export default ({ background, color, border, arrow }) => css`
background: ${props => props.theme[background]}; background: ${props => props.theme[background]};
color: ${props => props.theme[color]}; color: ${props => props.theme[color]};
z-index: 999;
border-radius: ${remcalc(4)}; border-radius: ${remcalc(4)};

View File

@ -32,7 +32,7 @@
"babel-preset-joyent-portal": "^3.3.3", "babel-preset-joyent-portal": "^3.3.3",
"eslint": "^4.11.0", "eslint": "^4.11.0",
"eslint-config-joyent-portal": "^3.2.0", "eslint-config-joyent-portal": "^3.2.0",
"joyent-react-scripts": "^3.1.0", "joyent-react-scripts": "^3.1.1",
"prettier": "^1.8.2", "prettier": "^1.8.2",
"stylelint": "^8.2.0", "stylelint": "^8.2.0",
"stylelint-config-joyent-portal": "^2.0.1" "stylelint-config-joyent-portal": "^2.0.1"

View File

@ -0,0 +1,8 @@
{
"presets": "joyent-portal",
"plugins": [
["inline-react-svg", {
"ignorePattern": "libre-franklin"
}]
]
}

View File

@ -0,0 +1,9 @@
src/components/base/*.css
node_modules
coverage
.nyc_output
docs/static
!docs/static/index.html
docs/node_modules
dist
package-lock.json

View File

@ -0,0 +1,4 @@
.nyc_output
coverage
dist
build

View File

@ -0,0 +1,12 @@
{
"extends": "joyent-portal",
"rules": {
"no-console": 0,
"new-cap": 0,
// temp
"no-undef": 1,
"no-debugger": 1,
"no-negated-condition": 0,
"jsx-a11y/href-no-hash": 0
}
}

View File

@ -0,0 +1,18 @@
# See https://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
/node_modules
# testing
/coverage
# production
/build
# misc
.DS_Store
.env
npm-debug.log*
yarn-debug.log*
yarn-error.log*

View File

@ -0,0 +1,3 @@
{
"extends": ["stylelint-config-joyent-portal"]
}

View File

@ -0,0 +1,15 @@
{
"libs": [
"ecmascript",
"browser"
],
"plugins": {
"doc_comment": true,
"local-scope": true,
"jsx": true,
"node": true,
"webpack": {
"configPath": "./node_modules/react-scripts/config/webpack.config.dev.js"
}
}
}

View File

@ -0,0 +1,9 @@
language: node_js
node_js:
- "8"
cache:
directories:
- node_modules
notifications:
email: false

View File

@ -0,0 +1,21 @@
# my-joyent
[![Docker Repository on Quay](https://quay.io/repository/yldio/my-joyent/status)](https://quay.io/repository/yldio/my-joyent)
[![License: MPL 2.0](https://img.shields.io/badge/License-MPL%202.0-brightgreen.svg)](https://opensource.org/licenses/MPL-2.0)
[![standard-readme compliant](https://img.shields.io/badge/standard--readme-OK-green.svg)](https://github.com/RichardLitt/standard-readme)
## Table of Contents
* [Usage](#usage)
* [License](#license)
## Usage
```
npm run start
open http://0.0.0.0:3069
```
## License
MPL-2.0

View File

@ -0,0 +1,73 @@
{
"name": "joyent-create-instance-icons",
"version": "1.0.0",
"license": "MPL-2.0",
"private": true,
"repository": "github:yldio/joyent-portal",
"main": "build/",
"scripts": {
"dev": "REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http joyent-react-scripts start",
"start": "PORT=3069 joyent-react-scripts start",
"build": "NODE_ENV=production joyent-react-scripts build",
"lint:css": "echo 0 `# stylelint './src/**/*.js'`",
"lint:js": "eslint . --fix",
"lint": "redrun -s lint:*",
"test": "NODE_ENV=test ./test/run --env=jsdom",
"test-ci": "echo 0 `# NODE_ENV=test ./test/run --env=jsdom --coverage`",
"prepublish": "echo 0"
},
"dependencies": {
"apollo": "^0.2.2",
"graphql-tag": "^2.5.0",
"joyent-ui-toolkit": "^2.0.1",
"lodash.isempty": "^4.4.0",
"lodash.isequal": "^4.5.0",
"normalized-styled-components": "^1.0.17",
"prop-types": "^15.6.0",
"react": "^16.1.1",
"react-apollo": "^1.4.16",
"react-dom": "^16.1.1",
"react-popper": "^0.7.4",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-styled-flexboxgrid": "^2.1.1",
"redux": "^3.7.2",
"redux-form": "^7.1.2",
"remcalc": "^1.0.9",
"styled-components": "^2.2.3",
"styled-components-spacing": "^2.1.3",
"styled-is": "^1.1.0",
"unitcalc": "^1.1.1"
},
"devDependencies": {
"apr-for-each": "^1.0.6",
"apr-main": "^2.0.2",
"babel-minify-webpack-plugin": "^0.2.0",
"babel-plugin-inline-react-svg": "^0.4.0",
"babel-preset-joyent-portal": "^3.3.3",
"commitizen": "^2.9.6",
"cross-env": "^5.1.1",
"eslint": "^4.11.0",
"eslint-config-joyent-portal": "3.2.0",
"eslint-config-prettier": "^2.7.0",
"eslint-plugin-markdown": "^1.0.0-beta.6",
"jest": "^21.2.1",
"jest-alias-preprocessor": "^1.1.1",
"jest-cli": "^21.2.1",
"jest-diff": "^21.2.1",
"jest-junit": "^3.2.1",
"jest-matcher-utils": "^21.2.1",
"jest-snapshot": "^21.2.1",
"jest-styled-components": "^4.9.0",
"jest-transform-graphql": "^2.1.0",
"joyent-react-scripts": "^3.1.1",
"lodash.sortby": "^4.7.0",
"mz": "^2.7.0",
"react-scripts": "^1.0.17",
"react-test-renderer": "^16.1.1",
"redrun": "^5.10.0",
"stylelint": "^8.2.0",
"stylelint-config-joyent-portal": "^2.0.1"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

View File

@ -0,0 +1,27 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<meta name="theme-color" content="#1E313B">
<title>My Joyent</title>
<style>
html, body, #root {
height: 100%;
}
#root {
display: flex;
flex-flow: column;
}
</style>
</head>
<body>
<div id="root"></div>
<noscript>
You need to enable Javascript to view this page
</noscript>
</body>
</html>

View File

@ -0,0 +1,30 @@
{
"short_name": "Joyent",
"name": "My Joyent",
"icons": [
{
"src": "favicon.ico",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "favicon.ico",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "favicon.ico",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "favicon.ico",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#1E313B",
"background_color": "#FAFAFA"
}

View File

@ -0,0 +1,49 @@
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { theme, RootContainer } from 'joyent-ui-toolkit';
import { ApolloProvider } from 'react-apollo';
import { client, store } from '@state/store';
import Router from '@root/router';
const fullTheme = {
...theme,
flexboxgrid: {
gridSize: 12, // rem
gutterWidth: 1.25, // rem
outerMargin: 1.875, // rem
mediaQuery: 'only screen',
container: {
sm: 46, // rem
md: 56, // rem
lg: 59 // rem
},
breakpoints: {
xs: 0, // em
sm: 48, // em
md: 64, // em
lg: 75 // em
}
},
spacing: {
0.5: '4px',
0: '0px',
1: '6px',
2: '12px',
3: '18px',
4: '24px',
5: '30px',
6: '36px',
10: '60px'
}
};
export default () => (
<ApolloProvider client={client} store={store}>
<ThemeProvider theme={fullTheme}>
<RootContainer>
<Router />
</RootContainer>
</ThemeProvider>
</ApolloProvider>
);

View File

@ -0,0 +1 @@
<svg width="176" height="60" viewBox="0 0 176 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>joyent-cloud-1</title><desc>Created using Figma</desc><path id="a" fill="#D8D8D8" d="M175.67 60a16.303 16.303 0 0 0-2.724-7.875 16.344 16.344 0 0 0-6.262-5.508 16.37 16.37 0 0 0-16.115.838 38.689 38.689 0 0 0-5.527-30.199 38.775 38.775 0 0 0-11.168-11.013A38.85 38.85 0 0 0 103.561 1.1a38.839 38.839 0 0 0-14.184 6.714 38.77 38.77 0 0 0-10.362 11.773 38.707 38.707 0 0 0-4.843 14.909 25.76 25.76 0 0 0-13.037-7.712 25.79 25.79 0 0 0-15.123.944 25.746 25.746 0 0 0-11.974 9.273 25.684 25.684 0 0 0-4.677 14.39 16.35 16.35 0 0 0-7.919-5.67 16.375 16.375 0 0 0-9.744-.166 16.352 16.352 0 0 0-8.107 5.399A16.31 16.31 0 0 0 0 60h175.67z"/></svg>

After

Width:  |  Height:  |  Size: 775 B

View File

@ -0,0 +1 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>cpu</title><path fill="#8043DC" fill-rule="evenodd" d="M8 16h8V8H8v8zm-1 1h10V7H7v10z"/><path fill="#8043DC" fill-rule="evenodd" d="M20 18c0 1.103-.897 2-2 2H6c-1.103 0-2-.897-2-2V6c0-1.103.897-2 2-2h12c1.103 0 2 .897 2 2v12zm3-5a1 1 0 1 0 0-2h-1v-1h1a1 1 0 1 0 0-2h-1V6a4 4 0 0 0-4-4h-2V1a1 1 0 1 0-2 0v1h-1V1a1 1 0 1 0-2 0v1h-1V1a1 1 0 1 0-2 0v1H6a4 4 0 0 0-4 4v2H1a1 1 0 1 0 0 2h1v1H1a1 1 0 1 0 0 2h1v1H1a1 1 0 1 0 0 2h1v2a4 4 0 0 0 4 4h2v1a1 1 0 1 0 2 0v-1h1v1a1 1 0 1 0 2 0v-1h1v1a1 1 0 1 0 2 0v-1h2a4 4 0 0 0 4-4v-2h1a1 1 0 1 0 0-2h-1v-1h1z"/></svg>

After

Width:  |  Height:  |  Size: 645 B

View File

@ -0,0 +1 @@
<svg width="22" height="20" viewBox="0 0 22 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Icon: GP</title><desc>Created using Figma</desc><path fill="#E08A0E" fill-rule="evenodd" d="M17 16a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7 17h1v-2H7v2zm-2 0h1v-2H5v2zm-2 0h1v-2H3v2zm14-7a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7 11h1V9H7v2zm-2 0h1V9H5v2zm-2 0h1V9H3v2zm16-7a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 5h1V3H7v2zM5 5h1V3H5v2zM3 5h1V3H3v2zM2 18h18v-4H2v4zm0-6h18V8H2v4zm0-6h18V2H2v4zm20-4a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v4c0 .366.105.705.277 1A1.977 1.977 0 0 0 0 8v4c0 .366.105.705.277 1A1.977 1.977 0 0 0 0 14v4a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2v-4c0-.366-.105-.705-.277-1 .172-.295.277-.634.277-1V8c0-.366-.105-.705-.277-1 .172-.295.277-.634.277-1V2z"/></svg>

After

Width:  |  Height:  |  Size: 772 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 23 KiB

View File

@ -0,0 +1 @@
<svg width="23" height="23" viewBox="0 0 23 23" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Icon: MO</title><desc>Created using Figma</desc><path transform="rotate(45 7.8 18.83)" fill="#32ABCF" fill-rule="evenodd" d="M3 15h3v-2H3v2zm0 2.999h3v-2H3v2zm0-6h3v-2H3v2zm0-3h3V7H3v2zM3 6h3V4H3v2zM2 20h7V2H2v18zM12 9a1 1 0 1 0 0-2h-1V6h1a1 1 0 1 0 0-2h-1V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2h1a1 1 0 1 0 0-2h-1v-1h1a1 1 0 1 0 0-2h-1v-1h1a1 1 0 1 0 0-2h-1V9h1z"/></svg>

After

Width:  |  Height:  |  Size: 534 B

View File

@ -0,0 +1,2 @@
<svg viewBox="0 0 6 11" width="6" height="11" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>Created using Figma</desc><path transform="matrix(0 1 -1 0 6 7.3)" fill="#464646" fill-rule="evenodd" d="M.685 0L0 .85 2.136 3 0 5.15.685 6l2.982-3L.685 0z"/>
<path id="b" fill-rule="evenodd" d="M.685 0L0 .85 2.136 3 0 5.15.685 6l2.982-3L.685 0z" transform="matrix(0 -1 1 0 0 3.7)" fill="#464646"/></svg>

After

Width:  |  Height:  |  Size: 434 B

View File

@ -0,0 +1 @@
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Icon: SO</title><desc>Created using Figma</desc><path fill="#A88A83" fill-rule="evenodd" d="M18 17a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14zM17 0H3a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3z"/><path transform="translate(4 4)" fill="#A88A83" fill-rule="evenodd" d="M6 11c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5zM6 0a6 6 0 0 0 0 12A6 6 0 0 0 6 0z"/><path transform="translate(9 9)" fill="#A88A83" fill-rule="evenodd" d="M0 1a1 1 0 1 0 2 0 1 1 0 1 0-2 0z"/></svg>

After

Width:  |  Height:  |  Size: 658 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -0,0 +1,43 @@
import React from 'react';
import styled from 'styled-components';
import remcalc from 'remcalc';
import { Row, Col } from 'react-styled-flexboxgrid';
import {
CardOutlet,
CardHeader,
CardHeaderMeta,
Card,
ArrowIcon
} from 'joyent-ui-toolkit';
const capitalizeFirstLetter = string =>
string.charAt(0).toUpperCase() + string.slice(1);
const FullWidthCard = styled(Card)`
flex-basis: 100%;
margin-bottom: ${remcalc(18)};
`;
const ListRules = ({ rule }) => (
<FullWidthCard shadow collapsed>
<CardHeader secondary={false} transparent={false}>
<CardHeaderMeta>
<Row between="xs" middle="xs">
<Col xs={11}>
<b>{capitalizeFirstLetter(rule.instance)}</b>
{`: be on ${rule.be} node as the instance(s) identified by the ${
rule.type
} ${rule.match} "${rule.value}"`}
</Col>
<Col xs={1}>
<ArrowIcon />
</Col>
</Row>
</CardHeaderMeta>
</CardHeader>
<CardOutlet>Stuff</CardOutlet>
</FullWidthCard>
);
export default ListRules;

View File

@ -0,0 +1,784 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <Packages /> 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;
}
}
<section
className="c0"
>
<div
className="c1"
>
<div
className="c2 c3"
name="card"
onClick={[Function]}
selected={false}
>
<div
className="c4"
name="card-view"
>
<div
className="c5"
name="card-meta"
>
<div
className="c6"
>
<div
className="c7"
name="card-title"
>
$
0.016
per hour
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
0.256
GB RAM
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
0.25
vCPUs
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
10
TB disk
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
Magnetic
</span>
</div>
<div
className="c10 c7"
name="card-footer"
>
<span
className="c11"
selected={false}
>
Compute Optimized
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div
className="c1"
>
<div
className="c2 c3"
name="card"
onClick={[Function]}
selected={false}
>
<div
className="c4"
name="card-view"
>
<div
className="c5"
name="card-meta"
>
<div
className="c6"
>
<div
className="c7"
name="card-title"
>
$
0.033
per hour
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
0.768
GB RAM
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
0.5
vCPUs
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
25
TB disk
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
Magnetic
</span>
</div>
<div
className="c10 c7"
name="card-footer"
>
<span
className="c11"
selected={false}
>
Compute Optimized
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div
className="c1"
>
<div
className="c2 c3"
name="card"
onClick={[Function]}
selected={false}
>
<div
className="c4"
name="card-view"
>
<div
className="c5"
name="card-meta"
>
<div
className="c6"
>
<div
className="c7"
name="card-title"
>
$
0.066
per hour
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
1.8
GB RAM
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
1
vCPUs
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
50
TB disk
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
Magnetic
</span>
</div>
<div
className="c10 c7"
name="card-footer"
>
<span
className="c11"
selected={false}
>
Compute Optimized
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div
className="c1"
>
<div
className="c2 c3"
name="card"
onClick={[Function]}
selected={false}
>
<div
className="c4"
name="card-view"
>
<div
className="c5"
name="card-meta"
>
<div
className="c6"
>
<div
className="c7"
name="card-title"
>
$
0.131
per hour
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
3.8
GB RAM
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
2
vCPUs
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
100
TB disk
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
Magnetic
</span>
</div>
<div
className="c10 c7"
name="card-footer"
>
<span
className="c11"
selected={false}
>
Compute Optimized
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div
className="c1"
>
<div
className="c2 c3"
name="card"
onClick={[Function]}
selected={false}
>
<div
className="c4"
name="card-view"
>
<div
className="c5"
name="card-meta"
>
<div
className="c6"
>
<div
className="c7"
name="card-title"
>
$
0.263
per hour
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
7.8
GB RAM
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
4
vCPUs
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
200
TB disk
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
Magnetic
</span>
</div>
<div
className="c10 c7"
name="card-footer"
>
<span
className="c11"
selected={false}
>
Compute Optimized
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div
className="c1"
>
<div
className="c2 c3"
name="card"
onClick={[Function]}
selected={false}
>
<div
className="c4"
name="card-view"
>
<div
className="c5"
name="card-meta"
>
<div
className="c6"
>
<div
className="c7"
name="card-title"
>
$
0.525
per hour
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
15.8
GB RAM
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
8
vCPUs
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
400
TB disk
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
Magnetic
</span>
</div>
<div
className="c10 c7"
name="card-footer"
>
<span
className="c11"
selected={false}
>
Compute Optimized
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
`;

View File

@ -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 <Packages /> without throwing', () => {
const tree = renderer
.create(
<Router>
<Packages packages={PackagesMock} filters={FiltersMock} />
</Router>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

View File

@ -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 = () => [
<Row>
<Col xs={12}>
<Margin bottom={6}>
<H2>Affinity</H2>
</Margin>
</Col>
</Row>,
<RowMargin>
<Col xs={8}>
<P>
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. {' '}
<a href="https://apidocs.joyent.com/docker/features/placement ">
Read the docs
</a>
</P>
</Col>
</RowMargin>,
<ViewContainer>
<Row>
{this.state.rules.length > 0 &&
this.state.rules.map(rule => [
<H4>Affinity rules</H4>,
<ListRules rule={this.state.rule} />
])}
</Row>
</ViewContainer>,
<Row>
<Col xs={12}>
{this.state.showRuleCreation ? (
<Margin top={2}>
<Card shadow>
<CardHeader secondary={false} transparent={false}>
<CardHeaderMeta>
<Row between="xs" middle="xs">
<Col xs={12}>
<H4>Create an affinity rule</H4>
</Col>
</Row>
</CardHeaderMeta>
</CardHeader>
<CardOutlet>
<div>
<H4>The instance</H4>
</div>
<div>
<Select fluid onChange={this.instanceChange}>
<option>must</option>
<option>should</option>
</Select>
</div>
<div>
<H4>be on</H4>
</div>
<div>
<Select fluid onChange={this.beChange}>
<option>the same</option>
<option>a different</option>
</Select>
</div>
<div>
<H4>node as the instance(s) identified by the</H4>
</div>
<div>
<MarginInline right={1}>
<Select fluid onChange={this.typeChange}>
<option>instance name</option>
<option>tag name</option>
</Select>
</MarginInline>
<MarginInline right={1}>
<Select fluid onChange={this.typeChange}>
<option>equalling</option>
<option>not equalling</option>
<option>containing</option>
<option>starting with</option>
<option>ending with</option>
</Select>
</MarginInline>
<Input
type="text"
onChange={this.valueChange}
required
value={this.state.rule.value}
placeholder="Example instance name: nginx"
/>
</div>
<div>
<Button secondary onClick={this.toggleForm}>
Cancel
</Button>
<Button onClick={this.submit} disabled={!this.state.rule.value}>
Create
</Button>
</div>
</CardOutlet>
</Card>
</Margin>
) : (
<Margin top={2}>
<Button secondary bold onClick={this.toggleForm}>
Create affinity rule
</Button>
</Margin>
)}
</Col>
</Row>
];
}
export default Affinity;

View File

@ -0,0 +1,161 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <Package /> 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;
}
<div
className="c0 c1"
name="card"
>
<test-file-mock
alt="Cloud"
className="c2"
width="175"
/>
<div
className="c3 c4"
name="card-title"
>
<span
className="c5"
>
There are no packages that meet your criteria
</span>
</div>
<div
className="c6 c3 c4"
name="card-title"
>
<span
className="c5"
>
Please adjust the filters to see some packages here
</span>
</div>
</div>
`;

View File

@ -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 <Package /> without throwing', () => {
const tree = renderer
.create(
<Router>
<Empty />
</Router>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

View File

@ -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 = () => (
<CardStyled transparent>
<Cloud width="175" alt="Cloud" />
<H4>There are no packages that meet your criteria</H4>
<H5>Please adjust the filters to see some packages here</H5>
</CardStyled>
);
export default Empty;

View File

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

View File

@ -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 [
<Row>
<Col xs={8}>
<Margin bottom={6}>
<H2>Package</H2>
</Margin>
</Col>
</Row>,
<RowMargin>
<Col xs={8}>
<P>
A package defines the specs of your instance. On Triton, packages
can only increase in size.{' '}
<a href="https://docs.joyent.com/public-cloud/instances/packages/sizing">
Read the docs
</a>
</P>
</Col>
</RowMargin>,
<Row>
<Col>
<Margin vertical={2}>
<H4>Filters</H4>
</Margin>
</Col>
</Row>,
<Row>
{filters.groups
.sort((a, b) => (a.name < b.name ? -1 : 1))
.map((group, i) => (
<Col>
<FormGroup
name={group.name}
key={group.name}
type="checkbox"
reduxForm
>
<Checkbox>
{returnIcon(group.name)}
<Label>{group.name}</Label>
</Checkbox>
</FormGroup>
</Col>
))}
</Row>,
<FullWidth top={2}>
<Inputs
ramChange={value => ramChange(value)}
cpuChange={value => cpuChange(value)}
diskChange={value => diskChange(value)}
costChange={value => costChange(value)}
filters={filters}
disabled={isEqual(filters, defaultState.filters)}
onClick={this.handleResetClick}
/>
</FullWidth>
];
}
}
export default reduxForm({ form: 'type' })(Filters);

View File

@ -0,0 +1 @@
export { default as Filters } from './filters';

View File

@ -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 [
<Row bottom="xs">
<Col>
<Padding top={1}>
<FormLabel>RAM</FormLabel>
</Padding>
<FormGroup flex center>
<InputDropdown>
<Input
wrapped
small
type="text"
onChange={e => this.handleChange(e, 'ram', 'min')}
onBlur={e => this.handleBlur(e, 'ram', 'min')}
value={ram.min}
/>
<Select
onChange={e =>
this.handleSelectChange(e, 'ram', 'minSelected', 'min')}
value={ram.minSelected}
wrapped
fluid
>
<option value="MB">MB</option>
<option value="GB">GB</option>
</Select>
</InputDropdown>
<Padding horizontal={2}>to</Padding>
<InputDropdownBorder>
<Input
wrapped
small
type="text"
onChange={e => this.handleChange(e, 'ram', 'max')}
onBlur={e => this.handleBlur(e, 'ram', 'max')}
value={ram.max}
/>
<Select
onChange={e =>
this.handleSelectChange(e, 'ram', 'maxSelected', 'max')}
value={ram.maxSelected}
wrapped
fluid
>
<option value="MB">MB</option>
<option value="GB">GB</option>
</Select>
</InputDropdownBorder>
</FormGroup>
</Col>
<Col>
<Padding top={1}>
<FormLabel>Disk</FormLabel>
</Padding>
<FormGroup flex center>
<InputDropdown>
<Input
wrapped
small
type="text"
onChange={e => this.handleChange(e, 'disk', 'min')}
onBlur={e => this.handleBlur(e, 'disk', 'min')}
value={disk.min}
/>
<Select
onChange={e =>
this.handleSelectChange(e, 'disk', 'minSelected', 'min')}
value={disk.minSelected}
wrapped
fluid
>
<option value="GB">GB</option>
<option value="TB">TB</option>
</Select>
</InputDropdown>
<Padding horizontal={2}>to</Padding>
<InputDropdown>
<Input
wrapped
small
type="text"
onChange={e => this.handleChange(e, 'disk', 'max')}
onBlur={e => this.handleBlur(e, 'disk', 'max')}
value={disk.max}
/>
<Select
onChange={e =>
this.handleSelectChange(e, 'disk', 'maxSelected', 'min')}
value={disk.maxSelected}
wrapped
fluid
>
<option value="GB">GB</option>
<option value="TB">TB</option>
</Select>
</InputDropdown>
</FormGroup>
</Col>
</Row>,
<RowFullWidth>
<Col>
<Padding top={1}>
<FormLabel>vCPUs</FormLabel>
</Padding>
<FormGroup flex center>
<Input
small
type="text"
onChange={e => this.handleChange(e, 'cpu', 'min')}
onBlur={e => this.handleBlur(e, 'cpu', 'min')}
value={cpu.min}
/>
<Padding horizontal={2}>to</Padding>
<Input
small
type="text"
onChange={e => this.handleChange(e, 'cpu', 'max')}
onBlur={e => this.handleBlur(e, 'cpu', 'max')}
value={cpu.max}
/>
</FormGroup>
</Col>
<Col>
<Padding top={1}>
<FormLabel>$/hour</FormLabel>
</Padding>
<FormGroup flex center>
<Input
small
type="text"
onChange={e => this.handleChange(e, 'cost', 'min')}
onBlur={e => this.handleBlur(e, 'cost', 'min')}
value={cost.min}
/>
<Padding horizontal={2}>to</Padding>
<Input
small
type="text"
onChange={e => this.handleChange(e, 'cost', 'max')}
onBlur={e => this.handleBlur(e, 'cost', 'max')}
value={cost.max}
/>
</FormGroup>
</Col>
</RowFullWidth>,
<Row>
<Col xs={12}>
<Button disabled={disabled} secondary small bold onClick={onClick}>
Reset All Filters
</Button>
</Col>
</Row>
];
}
}
export default Inputs;

View File

@ -0,0 +1,46 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <Home /> without throwing 1`] = `
<MemoryRouter>
<Home
filters={
Object {
"cost": Object {
"max": 0.525,
"min": 0.016,
},
"cpu": Object {
"max": 3.25,
"min": 0.25,
},
"disk": Object {
"max": 107.26,
"min": 0.01,
},
"groups": Array [
Object {
"name": "Compute Optimized",
"selected": false,
},
Object {
"name": "Memory Optimized",
"selected": false,
},
Object {
"name": "General Purpose",
"selected": false,
},
Object {
"name": "Storage Optimized",
"selected": false,
},
],
"ram": Object {
"max": 50.688,
"min": 0.256,
},
}
}
/>
</MemoryRouter>
`;

View File

@ -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 <Home /> without throwing', () => {
const renderer = new ShallowRenderer();
renderer.render(
<Router>
<Home filters={FiltersMock} />
</Router>
);
const tree = renderer.getRenderOutput();
expect(tree).toMatchSnapshot();
});

View File

@ -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 ? (
<Message onCloseClick={this.closeMessage}>
Not all data centres have all configurations of instances available.
Make sure that you choose the data center that suits your requirements.{' '}
<Anchor href="#">Learn More</Anchor>
</Message>
) : null;
const breadcrumbLinks = [
{ name: 'Instances', pathname: '/' },
{ name: 'Create Instance', pathname: '/' }
].map(({ name, pathname }) => (
<BreadcrumbItem key={name} to={pathname}>
{name}
</BreadcrumbItem>
));
return [
<Row><Col xs={12}>{breadcrumbLinks}</Col></Row>,
<Row><Col xs={12}>{_msg}</Col></Row>,
<Margin vertical={2}>
<Divider height="1px" />
</Margin>,
<Row>
<Col xs={12}>
<Filters
packages={packages}
filters={filters}
filterReset={onFilterReset}
ramChange={value => this.changeValue('ram', value)}
cpuChange={value => this.changeValue('cpu', value)}
diskChange={value => this.changeValue('disk', value)}
costChange={value => this.changeValue('cost', value)}
/>
</Col>
</Row>,
<Margin top={2}>
<PackagesHOC />
</Margin>,
<Row end="xs">
<Col xs={12}><Button>Next</Button></Col>
</Row>,
<Margin top={2}>
<AffinityHOC />
</Margin>
];
}
}
export default Home;

View File

@ -0,0 +1 @@
export { default as Home } from './home';

View File

@ -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 = <CpuIcon width="24" height="24" />;
break;
case 'General Purpose':
icon = <GpIcon width="24" height="24" />;
break;
case 'Memory Optimized':
icon = <MoIcon width="24" height="24" />;
break;
case 'Storage Optimized':
icon = <SoIcon width="24" height="24" />;
break;
default:
icon = <GpIcon width="24" height="24" />;
}
return (
<IconWrapper>
<TooltipContainer hoverable>
<TooltipTarget>
<Margin right={1}>
<Flex>{icon}</Flex>
</Margin>
</TooltipTarget>
<Tooltip placement="bottom">{group}</Tooltip>
</TooltipContainer>
</IconWrapper>
);
};

View File

@ -0,0 +1,76 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <Header /> 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;
}
<div
className="c0"
>
<div
className="c1"
>
<h2
className="c2"
>
<a
href="/"
name="Go to home"
onClick={[Function]}
>
<img
alt="Triton Logo"
className="c3"
src="test-file-mock"
/>
</a>
</h2>
</div>
</div>
`;

View File

@ -0,0 +1,174 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <NotFound /> 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;
}
}
<div
className="c0"
>
<div
className="c1"
>
<h1
className="c2 c3"
>
I have no memory of this place
</h1>
<p
className="c4 c5"
>
HTTP 404: We cant find what you are looking for. Next time, always follow your nose.
</p>
<a
className="c6"
href="/"
onClick={[Function]}
primary={true}
>
Back home
</a>
</div>
</div>
`;

View File

@ -0,0 +1,83 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <SectionNav /> 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;
}
<div
className="c0"
>
<ul
className="c1"
>
<li
className="c2"
>
<a
aria-current="true"
className="active c3 active"
href="/"
onClick={[Function]}
style={Object {}}
>
Instances
</a>
</li>
<li
className="c2"
>
Custom images
</li>
<li
className="c2"
>
Docker images
</li>
<li
className="c2"
>
Docker registries
</li>
</ul>
</div>
`;

View File

@ -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 <Header /> without throwing', () => {
const tree = renderer
.create(
<Router>
<Header />
</Router>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

View File

@ -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 <NotFound /> without throwing', () => {
const tree = renderer
.create(
<Router>
<NotFound />
</Router>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

View File

@ -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 = () => (
<Header>
<HeaderBrand beta>
<TritonBetaIcon />
</HeaderBrand>
<HeaderNav>
<li>
<Link className="active" to="/">
Compute
</Link>
</li>
</HeaderNav>
<HeaderItem>Return to existing portal</HeaderItem>
<HeaderItem>
<DataCenterIconLight />eu-east-1
</HeaderItem>
<HeaderItem>
<UserIconLight />Nicola
</HeaderItem>
</Header>
);
export default NavHeader;

View File

@ -0,0 +1,2 @@
export { default as Header } from './header';
export { default as NotFound } from './not-found';

View File

@ -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 cant find what you are looking for.
Next time, always follow your nose.`,
link = 'Back home',
to = '/'
}) => (
<ViewContainer>
<Margin top={10}>
<H1>{title}</H1>
<P>{message}</P>
<Margin top={5}>
<Button to={to}>{link}</Button>
</Margin>
</Margin>
</ViewContainer>
);
NotFound.propTypes = {
title: PropTypes.string,
message: PropTypes.string,
link: PropTypes.string,
to: PropTypes.string
};
export default NotFound;

View File

@ -0,0 +1,276 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <Package /> 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;
}
}
<div
className="c0 c1"
name="card"
onClick={undefined}
selected={undefined}
>
<div
className="c2"
name="card-view"
>
<div
className="c3"
name="card-meta"
>
<div
className="c4"
>
<div
className="c5"
name="card-title"
>
$
0.263
per hour
</div>
<div
className="c6 c5"
name="card-subtitle"
>
<span
className="c7"
>
7.8
GB RAM
</span>
</div>
<div
className="c6 c5"
name="card-subtitle"
>
<span
className="c7"
>
4
vCPUs
</span>
</div>
<div
className="c6 c5"
name="card-subtitle"
>
<span
className="c7"
>
200
TB disk
</span>
</div>
<div
className="c6 c5"
name="card-subtitle"
>
<span
className="c7"
>
Magnetic
</span>
</div>
<div
className="c8 c5"
name="card-footer"
>
<span
className="c9"
selected={undefined}
>
Compute Optimized
</span>
</div>
</div>
</div>
</div>
</div>
`;

View File

@ -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 <Package /> without throwing', () => {
const tree = renderer
.create(
<Router>
<Package pack={pack} />
</Router>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

View File

@ -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
}) => (
<TableTr selected={selected}>
<TableTd>
<FormGroup name={name}>
<Radio onClick={onClick} name={name} value={name} checked={selected} />
</FormGroup>
</TableTd>
<TableTd>
{returnIcon(group)}
<H4>{name}</H4>
</TableTd>
<TableTd>
{memory > 1 ? `${parseInt(memory, 10)} GB` : `${memory * 1000} MB`}
</TableTd>
<TableTd>{disk > 1 ? `${disk} TB` : `${disk * 1000} GB`}</TableTd>
<TableTd>{vcpus}</TableTd>
<TableTd>{price.toFixed(3)}</TableTd>
</TableTr>
);
export default reduxForm({ form: 'selected' })(Package);

View File

@ -0,0 +1,784 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <Packages /> 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;
}
}
<section
className="c0"
>
<div
className="c1"
>
<div
className="c2 c3"
name="card"
onClick={[Function]}
selected={false}
>
<div
className="c4"
name="card-view"
>
<div
className="c5"
name="card-meta"
>
<div
className="c6"
>
<div
className="c7"
name="card-title"
>
$
0.016
per hour
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
0.256
GB RAM
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
0.25
vCPUs
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
10
TB disk
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
Magnetic
</span>
</div>
<div
className="c10 c7"
name="card-footer"
>
<span
className="c11"
selected={false}
>
Compute Optimized
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div
className="c1"
>
<div
className="c2 c3"
name="card"
onClick={[Function]}
selected={false}
>
<div
className="c4"
name="card-view"
>
<div
className="c5"
name="card-meta"
>
<div
className="c6"
>
<div
className="c7"
name="card-title"
>
$
0.033
per hour
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
0.768
GB RAM
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
0.5
vCPUs
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
25
TB disk
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
Magnetic
</span>
</div>
<div
className="c10 c7"
name="card-footer"
>
<span
className="c11"
selected={false}
>
Compute Optimized
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div
className="c1"
>
<div
className="c2 c3"
name="card"
onClick={[Function]}
selected={false}
>
<div
className="c4"
name="card-view"
>
<div
className="c5"
name="card-meta"
>
<div
className="c6"
>
<div
className="c7"
name="card-title"
>
$
0.066
per hour
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
1.8
GB RAM
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
1
vCPUs
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
50
TB disk
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
Magnetic
</span>
</div>
<div
className="c10 c7"
name="card-footer"
>
<span
className="c11"
selected={false}
>
Compute Optimized
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div
className="c1"
>
<div
className="c2 c3"
name="card"
onClick={[Function]}
selected={false}
>
<div
className="c4"
name="card-view"
>
<div
className="c5"
name="card-meta"
>
<div
className="c6"
>
<div
className="c7"
name="card-title"
>
$
0.131
per hour
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
3.8
GB RAM
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
2
vCPUs
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
100
TB disk
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
Magnetic
</span>
</div>
<div
className="c10 c7"
name="card-footer"
>
<span
className="c11"
selected={false}
>
Compute Optimized
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div
className="c1"
>
<div
className="c2 c3"
name="card"
onClick={[Function]}
selected={false}
>
<div
className="c4"
name="card-view"
>
<div
className="c5"
name="card-meta"
>
<div
className="c6"
>
<div
className="c7"
name="card-title"
>
$
0.263
per hour
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
7.8
GB RAM
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
4
vCPUs
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
200
TB disk
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
Magnetic
</span>
</div>
<div
className="c10 c7"
name="card-footer"
>
<span
className="c11"
selected={false}
>
Compute Optimized
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div
className="c1"
>
<div
className="c2 c3"
name="card"
onClick={[Function]}
selected={false}
>
<div
className="c4"
name="card-view"
>
<div
className="c5"
name="card-meta"
>
<div
className="c6"
>
<div
className="c7"
name="card-title"
>
$
0.525
per hour
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
15.8
GB RAM
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
8
vCPUs
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
400
TB disk
</span>
</div>
<div
className="c8 c7"
name="card-subtitle"
>
<span
className="c9"
>
Magnetic
</span>
</div>
<div
className="c10 c7"
name="card-footer"
>
<span
className="c11"
selected={false}
>
Compute Optimized
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
`;

View File

@ -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 <Packages /> without throwing', () => {
const tree = renderer
.create(
<Router>
<Packages packages={PackagesMock} filters={FiltersMock} />
</Router>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

View File

@ -0,0 +1 @@
export { default as Packages } from './list';

View File

@ -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 ? (
<Row>
<Col xs={12}>
<Table>
<TableThead>
<TableTr>
<TableTh xs="40" />
<TableTh selected={ordered === 'name'}>
<Span role="button" onClick={() => this.order('name')}>
Name{' '}
</Span>
<ArrowIconStyled
selected={ordered === 'name'}
down={this.state.name}
onClick={() => this.order('name')}
/>
</TableTh>
<TableTh right xs="100" selected={ordered === 'memory'}>
<Span role="button" onClick={() => this.order('memory')}>
RAM{' '}
</Span>
<ArrowIconStyled
selected={ordered === 'memory'}
down={this.state.memory}
onClick={() => this.order('memory')}
/>
</TableTh>
<TableTh right xs="100" selected={ordered === 'disk'}>
<Span role="button" onClick={() => this.order('disk')}>
Disk{' '}
</Span>
<ArrowIconStyled
selected={ordered === 'disk'}
down={this.state.disk}
onClick={() => this.order('disk')}
/>
</TableTh>
<TableTh right xs="100" selected={ordered === 'vcpus'}>
<Span role="button" onClick={() => this.order('vcpus')}>
vCPU{' '}
</Span>
<ArrowIconStyled
selected={ordered === 'vcpus'}
down={this.state.vcpus}
onClick={() => this.order('vcpus')}
/>
</TableTh>
<TableTh right xs="100" selected={ordered === 'price'}>
<Span role="button" onClick={() => this.order('price')}>
$/hour{' '}
</Span>
<ArrowIconStyled
selected={ordered === 'price'}
down={this.state.price}
onClick={() => this.order('price')}
/>
</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{packages.map(pack => (
<Package
pack={pack}
onClick={() => this.handleClick(pack.id)}
selected={selected === pack.id}
key={pack.id}
/>
))}
</TableTbody>
</Table>
</Col>
</Row>
) : (
<Row>
<Col>
<Empty />
</Col>
</Row>
);
};
render = () => this._cards();
}
export default Packages;

View File

@ -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 <PackagesHOC /> without throwing', () => {
const tree = renderer
.create(
<Router>
<Store>
<PackagesHOC />
</Store>
</Router>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

View File

@ -0,0 +1,13 @@
import React from 'react';
import { connect } from 'react-redux';
import Affinity from '@components/affinity';
const AffinityHOC = ({ affinity }) => <Affinity affinity={affinity} />;
const mapStateToProps = state => {
return {
affinity: state.form.affinityForm
};
};
export default connect(mapStateToProps)(AffinityHOC);

View File

@ -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 <HomeHOC /> without throwing', () => {
const tree = renderer
.create(
<Router>
<Store>
<HomeHOC />
</Store>
</Router>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

View File

@ -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 => (
<ViewContainer main>
<Home {...props} />
</ViewContainer>
);
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);

View File

@ -0,0 +1,76 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <Header /> 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;
}
<div
className="c0"
>
<div
className="c1"
>
<h2
className="c2"
>
<a
href="/"
name="Go to home"
onClick={[Function]}
>
<img
alt="Triton Logo"
className="c3"
src="test-file-mock"
/>
</a>
</h2>
</div>
</div>
`;

View File

@ -0,0 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <withNotFound /> without throwing 1`] = `<withNotFound />`;

View File

@ -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 <Header /> without throwing', () => {
const tree = renderer
.create(
<Router>
<Header />
</Router>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

View File

@ -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 <withNotFound /> without throwing', () => {
const tree = renderer.create(<withNotFound />).toJSON();
expect(tree).toMatchSnapshot();
});

View File

@ -0,0 +1,7 @@
import React from 'react';
import { Header as HeaderComponent } from '@components/navigation';
export const Header = () => <HeaderComponent />;
export default Header;

View File

@ -0,0 +1 @@
export { default as Header } from './header';

View File

@ -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 cant find what you are looking for. Next time, always follow your nose.',
link: 'Back home',
to: '/'
};
const NotFoundHOC = (paths = pathsExample) => (
<NotFound
title={paths.title}
message="Sorry, but our princess is in another castle."
to={paths.to}
link={paths.link}
/>
);
export default NotFoundHOC;

View File

@ -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 <PackagesHOC /> without throwing', () => {
const tree = renderer
.create(
<Router>
<Store>
<PackagesHOC />
</Store>
</Router>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

View File

@ -0,0 +1,17 @@
import React from 'react';
import { connect } from 'react-redux';
import { Packages } from '@components/packages';
const PackagesHOC = ({ packages, filters, type }) => (
<Packages packages={packages} filters={filters} groups={type} />
);
const mapStateToProps = state => {
return {
packages: state.app.packages,
filters: state.app.filters,
type: state.form.type.values
};
};
export default connect(mapStateToProps)(PackagesHOC);

Some files were not shown because too many files have changed in this diff Show More