feat(instances): adds cli-details UI

This commit is contained in:
johnytiago 2018-05-25 16:27:05 +01:00 committed by Sérgio Ramos
parent a1ff036db1
commit 078513f603
41 changed files with 2058 additions and 1874 deletions

View File

@ -21,11 +21,9 @@ exports[`renders <Menu links /> without throwing 1`] = `
.c6 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c6:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c1 {
@ -57,10 +55,10 @@ exports[`renders <Menu links /> without throwing 1`] = `
position: relative;
}
.c5.active:after {
.c5:after {
width: 100%;
height: 0.0625rem;
background: rgb(73,73,73);
background: rgb(216,216,216);
content: '';
position: absolute;
bottom: 0;
@ -68,6 +66,14 @@ exports[`renders <Menu links /> without throwing 1`] = `
z-index: 2;
}
.c5.active:after {
background: rgb(73,73,73);
}
.c5.active {
font-weight: 600;
}
.c3 {
background: rgb(250,250,250);
list-style-type: none;

View File

@ -54,11 +54,9 @@ exports[`renders <InstanceList /> without throwing 1`] = `
.c21 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c21:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c11 {
@ -798,11 +796,9 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
.c21 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c21:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c11 {
@ -1542,11 +1538,9 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
.c21 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c21:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c12 {
@ -2286,11 +2280,9 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
.c21 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c21:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c12 {
@ -3030,11 +3022,9 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
.c21 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c21:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c11 {
@ -3774,11 +3764,9 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
.c21 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c21:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c11 {
@ -4512,11 +4500,9 @@ exports[`renders <Item /> without throwing 1`] = `
.c11 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c11:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c12 {
@ -5039,11 +5025,9 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
.c11 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c11:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c12 {
@ -5568,11 +5552,9 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
.c11 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c11:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c12 {
@ -6095,11 +6077,9 @@ exports[`renders <Item mutating /> without throwing 1`] = `
.c11 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c11:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c13 {

View File

@ -691,8 +691,8 @@ exports[`renders <AddForm /> without throwing 1`] = `
.c23 {
box-sizing: border-box;
width: 18.75rem;
height: 6rem;
min-height: 6rem;
height: 12rem;
min-height: 12rem;
padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
@ -706,6 +706,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
@ -1760,8 +1761,8 @@ exports[`renders <EditForm /> without throwing 1`] = `
.c23 {
box-sizing: border-box;
width: 18.75rem;
height: 6rem;
min-height: 6rem;
height: 12rem;
min-height: 12rem;
padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
@ -1775,6 +1776,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;

View File

@ -497,7 +497,7 @@ Array [
.c6 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -2401,7 +2401,7 @@ Array [
.c6 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -3289,7 +3289,7 @@ Array [
.c6 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -4177,7 +4177,7 @@ Array [
.c6 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -5065,7 +5065,7 @@ Array [
.c6 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -5953,7 +5953,7 @@ Array [
.c6 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}

View File

@ -231,15 +231,13 @@ exports[`renders <Summary /> without throwing 1`] = `
.c36 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
}
.c36:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c29 {
min-width: 7.5rem;
}
@ -885,7 +883,7 @@ exports[`renders <Summary /> without throwing 1`] = `
.c9 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.875rem;
font-size: 1.5rem;
}
@ -952,6 +950,7 @@ exports[`renders <Summary /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
@ -1031,6 +1030,7 @@ exports[`renders <Summary /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
@ -2087,15 +2087,13 @@ exports[`renders <Summary instance /> without throwing 1`] = `
.c35 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
}
.c35:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c29 {
min-width: 7.5rem;
}
@ -2580,7 +2578,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
.c9 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.875rem;
font-size: 1.5rem;
}
@ -2647,6 +2645,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
@ -4020,15 +4019,13 @@ exports[`renders <Summary instance /> without throwing 2`] = `
.c35 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
}
.c35:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c29 {
min-width: 7.5rem;
}
@ -4513,7 +4510,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
.c9 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.875rem;
font-size: 1.5rem;
}
@ -4580,6 +4577,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
@ -5949,15 +5947,13 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
.c39 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
}
.c39:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c32 {
fill: rgb(59,70,204);
stroke: rgb(59,70,204);
@ -6648,7 +6644,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
.c9 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.875rem;
font-size: 1.5rem;
}
@ -6715,6 +6711,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
@ -6794,6 +6791,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
@ -7874,15 +7872,13 @@ exports[`renders <Summary state /> without throwing 1`] = `
.c35 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
}
.c35:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c29 {
min-width: 7.5rem;
}
@ -8367,7 +8363,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
.c9 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.875rem;
font-size: 1.5rem;
}
@ -8434,6 +8430,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
@ -8513,6 +8510,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
@ -9569,15 +9567,13 @@ exports[`renders <Summary state /> without throwing 2`] = `
.c35 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
}
.c35:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c29 {
min-width: 7.5rem;
}
@ -10062,7 +10058,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
.c9 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.875rem;
font-size: 1.5rem;
}
@ -10129,6 +10125,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
@ -10208,6 +10205,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
@ -11264,15 +11262,13 @@ exports[`renders <Summary state /> without throwing 3`] = `
.c36 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
}
.c36:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c29 {
min-width: 7.5rem;
}
@ -11919,7 +11915,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
.c9 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.875rem;
font-size: 1.5rem;
}
@ -11986,6 +11982,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
@ -12065,6 +12062,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;

View File

@ -24,7 +24,7 @@ export default ({
onReboot,
onRemove
}) => (
<StickyFooter fill="#FAFAFA" fixed bottom>
<StickyFooter fill="disabled" fixed bottom>
<Row between="xs" middle="xs">
<Col xs="7">
<Flex>

View File

@ -18,6 +18,7 @@ export const Forms = {
};
export const Values = {
IC_SHOW_CLI: 'INSTANCE_CREATION_SHOW_CLI',
IC_AFF_V_ADD_OPEN: 'INSTANCE_CREATION_AFFINITY_VALUE_ADD_OPEN',
IC_AFF_V_EDIT_OPEN: 'INSTANCE_CREATION_AFFINITY_VALUE_EDIT_OPEN',
IC_AFF_V_AFF: 'INSTANCE_CREATION_AFFINITY_VALUE_AFFINITY',

View File

@ -1,15 +1,14 @@
import React, { Component } from 'react';
import React, { Component, Fragment } from 'react';
import { Margin, Padding } from 'styled-components-spacing';
import { graphql, compose } from 'react-apollo';
import ReduxForm from 'declarative-redux-form';
import { connect } from 'react-redux';
import { SubmissionError, destroy } from 'redux-form';
import { set, destroyAll } from 'react-redux-values';
import Flex, { FlexItem } from 'styled-flex-component';
import intercept from 'apr-intercept';
import get from 'lodash.get';
import { H3, ViewContainer, Button } from 'joyent-ui-toolkit';
import { Provider as ResourceSteps } from 'joyent-ui-resource-step';
import styled from 'styled-components';
import {
Name,
@ -22,14 +21,20 @@ import {
Firewall,
CNS,
Affinity,
generatePayload
generatePayload,
Footer
} from 'joyent-ui-instance-steps';
import { Forms } from '@root/constants';
import { Provider as ResourceSteps } from 'joyent-ui-resource-step';
import { Anchor, H3, ViewContainer, Button } from 'joyent-ui-toolkit';
import { Forms, Values } from '@root/constants';
import parseError from '@state/parse-error';
import CreateInstanceMutation from '@graphql/create-instance.gql';
const { IC_F } = Forms;
const { IC_SHOW_CLI } = Values;
const names = {
name: 'IC_NAME',
image: 'IC_IMAGE',
@ -86,7 +91,16 @@ class CreateInstance extends Component {
};
render() {
const { match, steps, handleDefocus, handleSubmit, disabled } = this.props;
const {
match,
steps,
showCli = false,
handleDefocus,
handleToggleShowCli,
handleSubmit,
disabled
} = this.props;
const { params } = match;
const { step } = params;
@ -102,6 +116,16 @@ class CreateInstance extends Component {
affinity
} = steps;
const Mask = styled.div`
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25);
position: absolute;
display: ${showCli ? 'block' : 'none'};
`;
return (
<ViewContainer main>
<Margin top="5">
@ -218,20 +242,43 @@ class CreateInstance extends Component {
</Margin>
</ResourceSteps>
<Margin bottom="5">
<ReduxForm form={IC_F} onSubmit={handleSubmit}>
{({ handleSubmit, submitting }) => (
<form onSubmit={handleSubmit}>
<Button
<Flex alignCenter>
<FlexItem>
<ReduxForm form={IC_F} onSubmit={handleSubmit}>
{({ handleSubmit, submitting }) => (
<form onSubmit={handleSubmit}>
<Button
disabled={disabled || !this.isFormValid()}
loading={submitting}
>
Deploy
</Button>
</form>
)}
</ReduxForm>
</FlexItem>
<FlexItem>
<Margin left={3}>
<Anchor
disabled={disabled || !this.isFormValid()}
loading={submitting}
onClick={() => handleToggleShowCli(!showCli)}
>
Deploy
</Button>
</form>
)}
</ReduxForm>
View CLI Details
</Anchor>
</Margin>
</FlexItem>
</Flex>
</Margin>
</Padding>
{showCli ? (
<Fragment>
<Footer
getData={() => generatePayload(steps)}
onCloseCli={() => handleToggleShowCli(!showCli)}
/>
<Mask onClick={() => handleToggleShowCli(!showCli)} />
</Fragment>
) : null}
</ViewContainer>
);
}
@ -254,6 +301,7 @@ export default compose(
};
const error = get(form, `${IC_F}.error`, null);
const showCli = Boolean(values[IC_SHOW_CLI]);
// Maybe re-use saved to only write the rule once
const disabled = !(
@ -270,6 +318,7 @@ export default compose(
return {
disabled,
showCli,
forms: Object.keys(form), // improve this
error,
steps
@ -277,10 +326,12 @@ export default compose(
}),
connect(null, (dispatch, { steps = {}, forms, history, createInstance }) => {
return {
handleToggleShowCli: value => {
return dispatch(set({ name: IC_SHOW_CLI, value }));
},
handleDefocus: name => value => {
return dispatch(set({ name: names[name], value }));
},
handleSubmit: async () => {
const [err, res] = await intercept(
createInstance({

View File

@ -172,7 +172,7 @@ exports[`renders <List /> without throwing 1`] = `
.c3 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -1153,7 +1153,7 @@ exports[`renders <List error /> without throwing 1`] = `
.c3 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -2090,11 +2090,9 @@ exports[`renders <List instances /> without throwing 1`] = `
.c33 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c33:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c13 {
@ -2230,7 +2228,7 @@ exports[`renders <List instances /> without throwing 1`] = `
.c3 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -3669,11 +3667,9 @@ exports[`renders <List instances selected /> without throwing 1`] = `
.c33 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c33:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c58 {
@ -4384,7 +4380,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
.c3 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -4425,12 +4421,10 @@ exports[`renders <List instances selected /> without throwing 1`] = `
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
background-color: rgb(250,250,250);
border-top: 0.0625rem solid rgb(216,216,216);
max-height: 3.3125rem;
min-height: 3.3125rem;
line-height: 1.5625rem;
height: 4.375rem;
max-height: 4.375rem;
z-index: 1;
position: fixed;
left: 0;
@ -5843,10 +5837,11 @@ exports[`renders <List instances selected /> without throwing 1`] = `
</form>
<div
className="c51"
fill="#FAFAFA"
fill="disabled"
>
<div
className="c52 c53 c1"
fill="disabled"
>
<div
className="c54"
@ -6294,11 +6289,9 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
.c33 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c33:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c58 {
@ -7009,7 +7002,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
.c3 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -7050,12 +7043,10 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
background-color: rgb(250,250,250);
border-top: 0.0625rem solid rgb(216,216,216);
max-height: 3.3125rem;
min-height: 3.3125rem;
line-height: 1.5625rem;
height: 4.375rem;
max-height: 4.375rem;
z-index: 1;
position: fixed;
left: 0;
@ -8468,10 +8459,11 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
</form>
<div
className="c51"
fill="#FAFAFA"
fill="disabled"
>
<div
className="c52 c53 c1"
fill="disabled"
>
<div
className="c54"
@ -8919,11 +8911,9 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
.c33 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c33:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c58 {
@ -9829,7 +9819,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
.c3 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -9870,12 +9860,10 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
background-color: rgb(250,250,250);
border-top: 0.0625rem solid rgb(216,216,216);
max-height: 3.3125rem;
min-height: 3.3125rem;
line-height: 1.5625rem;
height: 4.375rem;
max-height: 4.375rem;
z-index: 1;
position: fixed;
left: 0;
@ -11288,10 +11276,11 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
</form>
<div
className="c51"
fill="#FAFAFA"
fill="disabled"
>
<div
className="c52 c53 c1"
fill="disabled"
>
<div
className="c54"
@ -11831,7 +11820,7 @@ exports[`renders <List loading /> without throwing 1`] = `
.c3 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}

View File

@ -169,7 +169,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
.c19 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -977,7 +977,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
.c19 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -1309,8 +1309,8 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
.c39 {
box-sizing: border-box;
width: 18.75rem;
height: 6rem;
min-height: 6rem;
height: 12rem;
min-height: 12rem;
padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
@ -1324,6 +1324,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
@ -1986,7 +1987,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
.c25 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -3578,7 +3579,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
.c19 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -3904,8 +3905,8 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
.c39 {
box-sizing: border-box;
width: 18.75rem;
height: 6rem;
min-height: 6rem;
height: 12rem;
min-height: 12rem;
padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
@ -3919,6 +3920,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;

View File

@ -65,7 +65,7 @@ exports[`renders <Networks /> without throwing 1`] = `
.c7 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -608,7 +608,7 @@ exports[`renders <Networks error /> without throwing 1`] = `
.c7 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -888,7 +888,7 @@ exports[`renders <Networks loading /> without throwing 1`] = `
.c7 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -1121,7 +1121,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
.c7 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}

View File

@ -985,15 +985,13 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
.c37 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
}
.c37:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c31 {
min-width: 7.5rem;
}
@ -1597,7 +1595,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
.c11 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.875rem;
font-size: 1.5rem;
}
@ -1701,6 +1699,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
@ -2973,15 +2972,13 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
.c37 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
}
.c37:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c31 {
min-width: 7.5rem;
}
@ -3585,7 +3582,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
.c11 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.875rem;
font-size: 1.5rem;
}
@ -3689,6 +3686,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;

View File

@ -169,7 +169,7 @@ exports[`renders <Tags /> without throwing 1`] = `
.c19 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -998,7 +998,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
.c47 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -1995,7 +1995,7 @@ exports[`renders <Tags editable /> without throwing 1`] = `
.c19 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -2846,7 +2846,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
.c49 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -4354,7 +4354,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
.c52 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -5407,7 +5407,7 @@ exports[`renders <Tags error /> without throwing 1`] = `
.c19 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -6368,7 +6368,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
.c19 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}

View File

@ -26,6 +26,7 @@
"apr-reduce": "^3.0.3",
"constant-case": "^2.0.0",
"declarative-redux-form": "^2.0.8",
"force-array": "^3.1.0",
"joyent-ui-resource-step": "^1.0.0",
"joyent-ui-resource-widgets": "^1.0.0",
"joyent-ui-toolkit": "^6.0.0",

View File

@ -0,0 +1,131 @@
const ForceArray = require('force-array');
export const generateTerraform = data => {
const {
name,
package: pkg,
image,
affinity,
metadata: _metadata,
tags: _tags,
firewall_enabled,
networks
} = formatData(data);
const cns = ForceArray(
(_tags.filter(({ name }) => name === 'triton.cns.services').pop() || {})
.value
);
const userScript = (
_metadata.filter(({ name }) => name === 'user-script').pop() || {}
).value;
const tags = _tags.filter(({ name }) => !/^triton./.test(name));
const metadata = _metadata.filter(({ name }) => name !== 'user-script');
return (
`resource "triton_machine" ${name} {
name = "${name}"
package = "${pkg}"
image = "${image}"
networks = ["${networks.join('","')}"]
firewall_enabled = ${Boolean(firewall_enabled)}` +
`${
affinity
? `
affinity = ["${affinity}"]`
: ''
}` +
`${
userScript && userScript.length
? `\n
user_script = "${userScript}"`
: ''
}` +
`${
cns.length
? `\n
cns {
services = ["${cns.join('", "')}"]
}`
: ''
}` +
`${
tags.length
? `\n
tags {
${tags.map(e => `${e.name} = "${e.value}"`).join('\n ')}
}`
: ''
}` +
`${
metadata.length
? `\n
metadata {
${metadata.map(e => `${e.name} = "${e.value}"`).join('\n ')}
}`
: ''
}` +
`\n}`
);
};
export const generateCLI = data => {
const {
metadata,
tags,
firewall_enabled,
networks,
name,
package: pkg,
image
} = data;
const { affinity } = formatData(data);
const _networks = `--network="${networks.join('","')}"`;
const _affinity = affinity ? `--affinity="${affinity}"` : '';
const _tags = tags.length
? `--tag=${JSON.stringify(
tags.reduce((acc, t) => Object.assign(acc, { [t.name]: t.value }))
)}`
: '';
const _metadata = metadata.length
? `--metadata=${JSON.stringify(
metadata.reduce(
(acc, m) => Object.assign(acc, { [m.name]: m.value }),
{}
)
)}`
: '';
const _firewall = firewall_enabled ? `--firewall` : '';
return `triton instance create -w --name=${name} ${_networks} ${_affinity} ${_tags} ${_metadata} ${_firewall} ${image} ${pkg}`;
};
const formatData = ({ affinity, metadata = [], tags = [], ...rest }) => ({
affinity:
affinity &&
affinity.length &&
`${affinity[0].key}${getAffinityOp(affinity[0].type)}${affinity[0].value}`,
tags: tags.filter(
e => e.name !== 'triton.cns.services' || e.name !== 'triton.cns.disable'
),
metadata: metadata.filter(e => e.name !== 'user-script'),
...rest
});
const getAffinityOp = type => {
switch (type.toUpperCase()) {
case 'MUST_EQUAL':
return '==';
case 'MUST_NOT_EQUAL':
return '!=';
case 'SHOULD_EQUAL':
return '==~';
case 'SHOULD_NOT_EQUAL':
return '!=~';
}
};

View File

@ -0,0 +1,141 @@
import React from 'react';
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
import { Margin, Padding } from 'styled-components-spacing';
import Flex from 'styled-flex-component';
import styled from 'styled-components';
import remcalc from 'remcalc';
import {
Anchor,
CloseIcon as Close,
H3,
Textarea,
Input,
P,
SectionList,
SectionListAnchor,
SectionListItem,
StickyFooter,
ViewContainer
} from 'joyent-ui-toolkit';
import { generateTerraform, generateCLI } from './cli-details';
export default class CLIFooter extends React.Component {
state = {
active: 'triton'
};
render() {
const { active } = this.state;
const { getData, onCloseCli } = this.props;
return (
<StickyFooter borderless auto fixed bottom fill="#494949">
<div>
<Padding vertical="8">
<CloseIcon onClick={onCloseCli} />
<Row>
<Col xs="12" sm="8">
<Margin bottom="2">
<Flex>
<H3 white>CLI details</H3>
</Flex>
</Margin>
<Margin bottom="5">
<P white>
Below you can find the command line instructions to deploy
this exact instance, or a copy of it, directly from either
the Triton CLI or Terraform.
</P>
</Margin>
</Col>
</Row>
<Row>
<Col sm="12">
<ViewContainer plain>
<Margin bottom="3">
<SectionList clear>
<SectionListItem>
<SectionListAnchor
white
active={active === 'triton'}
onClick={() => this.setState({ active: 'triton' })}
>
Triton CLI
</SectionListAnchor>
</SectionListItem>
<SectionListItem>
<SectionListAnchor
white
active={active === 'terraform'}
onClick={() => this.setState({ active: 'terraform' })}
>
Terraform
</SectionListAnchor>
</SectionListItem>
</SectionList>
</Margin>
</ViewContainer>
<Margin bottom="3">
{active === 'triton' ? (
<Input
readOnly
borderless
monospace
fluid
white
dark
resize
rows="15"
value={generateCLI(getData())}
/>
) : (
<Textarea
readOnly
borderless
monospace
fluid
white
dark
resize
value={generateTerraform(getData())}
/>
)}
</Margin>
<Margin>
<Anchor white>{`Learn how to configure ${
active === 'triton' ? 'Triton CLI' : 'Terraform'
}`}</Anchor>
</Margin>
</Col>
</Row>
</Padding>
</div>
</StickyFooter>
);
}
}
const Frame = styled.div`
border-radius: 50%;
border: ${remcalc(1)} solid ${props => props.theme.white};
height: ${remcalc(30)};
width: ${remcalc(30)};
background: none;
cursor: pointer;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
float: right;
`;
const CloseIcon = props => (
<Frame {...props}>
<Margin all="1">
<Close fill="white" />
</Margin>
</Frame>
);

View File

@ -66,7 +66,7 @@ export const generatePayload = steps => {
});
if (cns.serviceNames.length) {
metadata.push({
tags.push({
name: 'triton.cns.services',
value: cns.serviceNames.join(',')
});
@ -94,3 +94,4 @@ export { default as UserScript } from './user-script';
export { default as Firewall, Preview as FirewallPreview } from './firewall';
export { default as CNS, Preview as CnsPreview } from './cns';
export { default as Affinity } from './affinity';
export { default as Footer } from './footer';

View File

@ -45,10 +45,6 @@ const RandomizeIcon = styled(BaseRandomizeIcon)`
width: ${remcalc(16)};
`;
const Form = styled.form`
margin-bottom: 0;
`;
const NameContainer = ({
history,
randomizable = false,
@ -86,7 +82,7 @@ const NameContainer = ({
keepDirtyOnReinitialize
>
{({ invalid }) => (
<Form onSubmit={() => history.push(next)}>
<form onSubmit={() => history.push(next)}>
<FormGroup id="input-name" name="name" fluid field={Field}>
<FormLabel>Instance name</FormLabel>
<Margin top="0.5">
@ -159,7 +155,7 @@ const NameContainer = ({
Next
</Button>
</Margin>
</Form>
</form>
)}
</ReduxForm>
</Margin>

View File

@ -9,8 +9,7 @@ import get from 'lodash.get';
import forceArray from 'force-array';
import includes from 'lodash.includes';
import find from 'lodash.find';
import styled, { withTheme } from 'styled-components';
import remcalc from 'remcalc';
import { withTheme } from 'styled-components';
import Step, {
Header as StepHeader,

View File

@ -223,4 +223,4 @@ export default compose(
]);
}
}))
)(withTheme(({ ...rest }) => <Metadata {...rest} />));
)(withTheme(({ ...rest }) => <TagsContainer {...rest} />));

View File

@ -58,13 +58,13 @@ export const Saved = ({ inverted, children }) => {
};
export const Error = ({ inverted = false, noLabel = false, children }) => {
const fill = inverted ? 'red' : 'white';
const statusFill = inverted ? 'red' : 'white';
const iconFill = inverted ? 'white' : 'redDark';
return (
<StatusIcon
border="redDark"
fill={fill}
border={'redDark'}
fill={statusFill}
Icon={() => <CloseIcon fill={iconFill} />}
>
{noLabel ? null : (

View File

@ -5,15 +5,15 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
margin-bottom: 1.125rem;
}
.c8 {
.c7 {
margin-top: 0.1875rem;
}
.c10 {
.c9 {
margin-left: 0.75rem;
}
.c2 {
.c1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -40,7 +40,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
align-items: flex-end;
}
.c4 {
.c3 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -60,7 +60,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
align-content: stretch;
}
.c3 {
.c2 {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
@ -77,7 +77,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
display: block;
}
.c14 {
.c13 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -89,30 +89,30 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
appearance: button;
}
.c14::-moz-focus-inner,
.c14[type='button']::-moz-focus-inner,
.c14[type='reset']::-moz-focus-inner,
.c14[type='submit']::-moz-focus-inner {
.c13::-moz-focus-inner,
.c13[type='button']::-moz-focus-inner,
.c13[type='reset']::-moz-focus-inner,
.c13[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c14:-moz-focusring,
.c14[type='button']:-moz-focusring,
.c14[type='reset']:-moz-focusring,
.c14[type='submit']:-moz-focusring {
.c13:-moz-focusring,
.c13[type='button']:-moz-focusring,
.c13[type='reset']:-moz-focusring,
.c13[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c13 {
.c12 {
min-width: 7.5rem;
}
.c12 {
.c11 {
display: inline-block;
}
.c11 {
.c10 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -151,7 +151,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
border: solid 0.0625rem rgb(45,56,132);
}
.c11:focus {
.c10:focus {
outline: 0;
-webkit-text-decoration: none;
text-decoration: none;
@ -159,26 +159,26 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
border-color: rgb(45,56,132);
}
.c11:hover {
.c10:hover {
background-color: rgb(72,83,217);
border-color: rgb(45,56,132);
}
.c11:active,
.c11:active:hover,
.c11:active:focus {
.c10:active,
.c10:active:hover,
.c10:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c11[disabled] {
.c10[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c7 {
.c6 {
font-size: 0.9375rem;
line-height: 1.125rem;
font-style: normal;
@ -188,7 +188,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
text-align: left;
}
.c5 {
.c4 {
display: inline-block;
padding: 0;
border: none;
@ -200,7 +200,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
-webkit-padding-after: 0;
}
.c9 {
.c8 {
box-sizing: border-box;
width: 18.75rem;
height: 3rem;
@ -222,89 +222,84 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
text-overflow: ellipsis;
}
.c9:focus {
.c8:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c9::-webkit-input-placeholder {
.c8::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c9::-moz-placeholder {
.c8::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c9:-ms-input-placeholder {
.c8:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c9:invalid {
.c8:invalid {
box-shadow: none;
}
.c9:disabled {
.c8:disabled {
background-color: rgb(250,250,250);
color: rgb(216,216,216);
cursor: not-allowed;
}
.c9:disabled::-webkit-input-placeholder {
.c8:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c9:disabled::-moz-placeholder {
.c8:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c9:disabled:-ms-input-placeholder {
.c8:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c6 {
.c5 {
font-weight: 600;
white-space: pre;
font-size: 0.8125rem;
}
.c1 {
margin-bottom: 0;
}
<div
className="c0"
>
<form
className="c1"
onSubmit={undefined}
>
<div
className="c2"
className="c1"
wrap={true}
>
<div
className="c3"
className="c2"
>
<div
className="c4"
className="c3"
>
<div
className="c5"
className="c4"
name="name"
role="group"
style={undefined}
>
<label
className="c6 c7"
className="c5 c6"
htmlFor="k"
>
Attach to new CNS service name
</label>
<div
className="c8"
className="c7"
>
<input
className="c9"
className="c8"
disabled={false}
id="k"
onBlur={null}
@ -315,13 +310,13 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
</div>
</div>
<div
className="c3"
className="c2"
>
<div
className="c10"
className="c9"
>
<button
className="c11 c12 c13 c14"
className="c10 c11 c12 c13"
data-ui-button="true"
disabled={undefined}
href=""
@ -341,15 +336,15 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
margin-bottom: 1.125rem;
}
.c8 {
.c7 {
margin-top: 0.1875rem;
}
.c10 {
.c9 {
margin-left: 0.75rem;
}
.c2 {
.c1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -376,7 +371,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
align-items: flex-end;
}
.c4 {
.c3 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -396,7 +391,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
align-content: stretch;
}
.c3 {
.c2 {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
@ -413,7 +408,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
display: block;
}
.c14 {
.c13 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -425,30 +420,30 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
appearance: button;
}
.c14::-moz-focus-inner,
.c14[type='button']::-moz-focus-inner,
.c14[type='reset']::-moz-focus-inner,
.c14[type='submit']::-moz-focus-inner {
.c13::-moz-focus-inner,
.c13[type='button']::-moz-focus-inner,
.c13[type='reset']::-moz-focus-inner,
.c13[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c14:-moz-focusring,
.c14[type='button']:-moz-focusring,
.c14[type='reset']:-moz-focusring,
.c14[type='submit']:-moz-focusring {
.c13:-moz-focusring,
.c13[type='button']:-moz-focusring,
.c13[type='reset']:-moz-focusring,
.c13[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c13 {
.c12 {
min-width: 7.5rem;
}
.c12 {
.c11 {
display: inline-block;
}
.c11 {
.c10 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -487,7 +482,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
border: solid 0.0625rem rgb(45,56,132);
}
.c11:focus {
.c10:focus {
outline: 0;
-webkit-text-decoration: none;
text-decoration: none;
@ -495,26 +490,26 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
border-color: rgb(45,56,132);
}
.c11:hover {
.c10:hover {
background-color: rgb(72,83,217);
border-color: rgb(45,56,132);
}
.c11:active,
.c11:active:hover,
.c11:active:focus {
.c10:active,
.c10:active:hover,
.c10:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c11[disabled] {
.c10[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c7 {
.c6 {
font-size: 0.9375rem;
line-height: 1.125rem;
font-style: normal;
@ -524,7 +519,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
text-align: left;
}
.c5 {
.c4 {
display: inline-block;
padding: 0;
border: none;
@ -536,7 +531,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
-webkit-padding-after: 0;
}
.c9 {
.c8 {
box-sizing: border-box;
width: 18.75rem;
height: 3rem;
@ -558,89 +553,84 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
text-overflow: ellipsis;
}
.c9:focus {
.c8:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c9::-webkit-input-placeholder {
.c8::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c9::-moz-placeholder {
.c8::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c9:-ms-input-placeholder {
.c8:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c9:invalid {
.c8:invalid {
box-shadow: none;
}
.c9:disabled {
.c8:disabled {
background-color: rgb(250,250,250);
color: rgb(216,216,216);
cursor: not-allowed;
}
.c9:disabled::-webkit-input-placeholder {
.c8:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c9:disabled::-moz-placeholder {
.c8:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c9:disabled:-ms-input-placeholder {
.c8:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c6 {
.c5 {
font-weight: 600;
white-space: pre;
font-size: 0.8125rem;
}
.c1 {
margin-bottom: 0;
}
<div
className="c0"
>
<form
className="c1"
onSubmit={undefined}
>
<div
className="c2"
className="c1"
wrap={true}
>
<div
className="c3"
className="c2"
>
<div
className="c4"
className="c3"
>
<div
className="c5"
className="c4"
name="name"
role="group"
style={undefined}
>
<label
className="c6 c7"
className="c5 c6"
htmlFor="l"
>
Attach to new CNS service name
</label>
<div
className="c8"
className="c7"
>
<input
className="c9"
className="c8"
disabled={false}
id="l"
onBlur={null}
@ -651,13 +641,13 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
</div>
</div>
<div
className="c3"
className="c2"
>
<div
className="c10"
className="c9"
>
<button
className="c11 c12 c13 c14"
className="c10 c11 c12 c13"
data-ui-button="true"
disabled={undefined}
href=""
@ -692,7 +682,7 @@ exports[`renders <Header/> without throwing 1`] = `
.c2 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -944,6 +934,7 @@ exports[`renders <Hostname values /> without throwing 1`] = `
background-color: rgb(250,250,250);
color: rgb(216,216,216);
cursor: not-allowed;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
@ -1116,7 +1107,7 @@ exports[`renders <HostnamesHeader /> without throwing 1`] = `
.c2 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}

View File

@ -5,7 +5,7 @@ Array [
.c0 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -30,7 +30,7 @@ Array [
.c0 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -351,7 +351,7 @@ Array [
.c0 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -376,7 +376,7 @@ Array [
.c0 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -499,12 +499,12 @@ Array [
`;
exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
.c10 {
.c9 {
margin-right: 0.75rem;
margin-left: 0.75rem;
}
.c5 {
.c4 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -512,39 +512,39 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
overflow: visible;
}
.c5[type='checkbox'],
.c5[type='radio'] {
.c4[type='checkbox'],
.c4[type='radio'] {
box-sizing: border-box;
padding: 0;
}
.c5[type='number']::-webkit-inner-spin-button,
.c5[type='number']::-webkit-outer-spin-button {
.c4[type='number']::-webkit-inner-spin-button,
.c4[type='number']::-webkit-outer-spin-button {
height: auto;
}
.c5[type='search'] {
.c4[type='search'] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
outline-offset: -0.125rem;
}
.c5[type='search']::-webkit-search-cancel-button,
.c5[type='search']::-webkit-search-decoration {
.c4[type='search']::-webkit-search-cancel-button,
.c4[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.c5::-webkit-file-upload-button {
.c4::-webkit-file-upload-button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
font: inherit;
}
.c9 {
.c8 {
font-size: 0.9375rem;
line-height: 1.125rem;
font-style: normal;
@ -554,33 +554,33 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
text-align: left;
}
.c4 {
.c3 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none;
}
.c4:checked + label::after {
.c3:checked + label::after {
opacity: 1;
}
.c4:selected + label::after {
.c3:selected + label::after {
opacity: 1;
}
.c4:checked + label {
.c3:checked + label {
border-color: rgb(59,70,204);
}
.c4:selected + label {
.c3:selected + label {
border-color: rgb(59,70,204);
}
.c4:disabled + label {
.c3:disabled + label {
background-color: rgb(249,249,249);
cursor: not-allowed;
}
.c6 {
.c5 {
color: rgb(100,100,100);
position: absolute;
width: 1.125rem;
@ -597,7 +597,7 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
height: 1.125rem;
}
.c6::after {
.c5::after {
opacity: 0;
content: '';
position: absolute;
@ -614,7 +614,7 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
transform: rotate(-45deg);
}
.c3 {
.c2 {
display: inline-block;
vertical-align: text-bottom;
width: 1.125rem;
@ -623,12 +623,12 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
cursor: pointer;
}
.c7 label {
.c6 label {
font-weight: normal;
font-size: 0.9375rem;
}
.c2 {
.c1 {
list-style-type: none;
display: -webkit-box;
display: -webkit-flex;
@ -652,25 +652,25 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
height: 1.5rem;
}
.c2 label {
.c1 label {
font-weight: 400;
}
.c2 label::after {
.c1 label::after {
width: 0.475rem;
height: 0.205rem;
top: 0.4125rem;
left: 0.35rem;
}
.c2 div[type='checkbox'],
.c2 div[type='checkbox'] input,
.c2 div[type='checkbox'] label {
.c1 div[type='checkbox'],
.c1 div[type='checkbox'] input,
.c1 div[type='checkbox'] label {
height: 1.5rem;
width: 1.5rem;
}
.c1 {
.c0 {
display: inline-block;
padding: 0;
border: none;
@ -682,23 +682,18 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
-webkit-padding-after: 0;
}
.c8 {
.c7 {
font-weight: 600;
white-space: pre;
font-size: 0.8125rem;
cursor: pointer;
}
.c0 {
margin-bottom: 0 !important;
}
<form
className="c0"
onChange={undefined}
>
<div
className="c1"
className="c0"
id="fw-toggle-firewall"
name="enabled"
role="group"
@ -706,11 +701,11 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
type="checkbox"
>
<li
className="c2"
className="c1"
>
<div
checked={false}
className="c3"
className="c2"
disabled={false}
id="fw-toggle-firewall"
onBlur={undefined}
@ -718,30 +713,30 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
>
<input
checked={false}
className="c4 c5"
className="c3 c4"
disabled={false}
id="l"
onBlur={undefined}
type="checkbox"
/>
<label
className="c6"
className="c5"
htmlFor="l"
/>
</div>
<div
checked={false}
className="c7"
className="c6"
disabled={false}
id="fw-toggle-firewall"
onBlur={undefined}
>
<label
className="c8 c9"
className="c7 c8"
htmlFor="l"
>
<div
className="c10"
className="c9"
>
Enable Firewall
</div>
@ -753,12 +748,12 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
`;
exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
.c10 {
.c9 {
margin-right: 0.75rem;
margin-left: 0.75rem;
}
.c5 {
.c4 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -766,39 +761,39 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
overflow: visible;
}
.c5[type='checkbox'],
.c5[type='radio'] {
.c4[type='checkbox'],
.c4[type='radio'] {
box-sizing: border-box;
padding: 0;
}
.c5[type='number']::-webkit-inner-spin-button,
.c5[type='number']::-webkit-outer-spin-button {
.c4[type='number']::-webkit-inner-spin-button,
.c4[type='number']::-webkit-outer-spin-button {
height: auto;
}
.c5[type='search'] {
.c4[type='search'] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
outline-offset: -0.125rem;
}
.c5[type='search']::-webkit-search-cancel-button,
.c5[type='search']::-webkit-search-decoration {
.c4[type='search']::-webkit-search-cancel-button,
.c4[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.c5::-webkit-file-upload-button {
.c4::-webkit-file-upload-button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
font: inherit;
}
.c9 {
.c8 {
font-size: 0.9375rem;
line-height: 1.125rem;
font-style: normal;
@ -808,33 +803,33 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
text-align: left;
}
.c4 {
.c3 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none;
}
.c4:checked + label::after {
.c3:checked + label::after {
opacity: 1;
}
.c4:selected + label::after {
.c3:selected + label::after {
opacity: 1;
}
.c4:checked + label {
.c3:checked + label {
border-color: rgb(59,70,204);
}
.c4:selected + label {
.c3:selected + label {
border-color: rgb(59,70,204);
}
.c4:disabled + label {
.c3:disabled + label {
background-color: rgb(249,249,249);
cursor: not-allowed;
}
.c6 {
.c5 {
color: rgb(100,100,100);
position: absolute;
width: 1.125rem;
@ -851,7 +846,7 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
height: 1.125rem;
}
.c6::after {
.c5::after {
opacity: 0;
content: '';
position: absolute;
@ -868,7 +863,7 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
transform: rotate(-45deg);
}
.c3 {
.c2 {
display: inline-block;
vertical-align: text-bottom;
width: 1.125rem;
@ -877,12 +872,12 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
cursor: pointer;
}
.c7 label {
.c6 label {
font-weight: normal;
font-size: 0.9375rem;
}
.c2 {
.c1 {
list-style-type: none;
display: -webkit-box;
display: -webkit-flex;
@ -906,25 +901,25 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
height: 1.5rem;
}
.c2 label {
.c1 label {
font-weight: 400;
}
.c2 label::after {
.c1 label::after {
width: 0.475rem;
height: 0.205rem;
top: 0.4125rem;
left: 0.35rem;
}
.c2 div[type='checkbox'],
.c2 div[type='checkbox'] input,
.c2 div[type='checkbox'] label {
.c1 div[type='checkbox'],
.c1 div[type='checkbox'] input,
.c1 div[type='checkbox'] label {
height: 1.5rem;
width: 1.5rem;
}
.c1 {
.c0 {
display: inline-block;
padding: 0;
border: none;
@ -936,23 +931,18 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
-webkit-padding-after: 0;
}
.c8 {
.c7 {
font-weight: 600;
white-space: pre;
font-size: 0.8125rem;
cursor: pointer;
}
.c0 {
margin-bottom: 0 !important;
}
<form
className="c0"
onChange={undefined}
>
<div
className="c1"
className="c0"
id="fw-toggle-firewall"
name="enabled"
role="group"
@ -960,11 +950,11 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
type="checkbox"
>
<li
className="c2"
className="c1"
>
<div
checked={false}
className="c3"
className="c2"
disabled={true}
id="fw-toggle-firewall"
onBlur={undefined}
@ -972,30 +962,30 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
>
<input
checked={false}
className="c4 c5"
className="c3 c4"
disabled={true}
id="n"
onBlur={undefined}
type="checkbox"
/>
<label
className="c6"
className="c5"
htmlFor="n"
/>
</div>
<div
checked={false}
className="c7"
className="c6"
disabled={true}
id="fw-toggle-firewall"
onBlur={undefined}
>
<label
className="c8 c9"
className="c7 c8"
htmlFor="n"
>
<div
className="c10"
className="c9"
>
Enable Firewall
</div>
@ -1007,12 +997,12 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
`;
exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
.c10 {
.c9 {
margin-right: 0.75rem;
margin-left: 0.75rem;
}
.c5 {
.c4 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -1020,39 +1010,39 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
overflow: visible;
}
.c5[type='checkbox'],
.c5[type='radio'] {
.c4[type='checkbox'],
.c4[type='radio'] {
box-sizing: border-box;
padding: 0;
}
.c5[type='number']::-webkit-inner-spin-button,
.c5[type='number']::-webkit-outer-spin-button {
.c4[type='number']::-webkit-inner-spin-button,
.c4[type='number']::-webkit-outer-spin-button {
height: auto;
}
.c5[type='search'] {
.c4[type='search'] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
outline-offset: -0.125rem;
}
.c5[type='search']::-webkit-search-cancel-button,
.c5[type='search']::-webkit-search-decoration {
.c4[type='search']::-webkit-search-cancel-button,
.c4[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.c5::-webkit-file-upload-button {
.c4::-webkit-file-upload-button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
font: inherit;
}
.c9 {
.c8 {
font-size: 0.9375rem;
line-height: 1.125rem;
font-style: normal;
@ -1062,33 +1052,33 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
text-align: left;
}
.c4 {
.c3 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none;
}
.c4:checked + label::after {
.c3:checked + label::after {
opacity: 1;
}
.c4:selected + label::after {
.c3:selected + label::after {
opacity: 1;
}
.c4:checked + label {
.c3:checked + label {
border-color: rgb(59,70,204);
}
.c4:selected + label {
.c3:selected + label {
border-color: rgb(59,70,204);
}
.c4:disabled + label {
.c3:disabled + label {
background-color: rgb(249,249,249);
cursor: not-allowed;
}
.c6 {
.c5 {
color: rgb(100,100,100);
position: absolute;
width: 1.125rem;
@ -1105,7 +1095,7 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
height: 1.125rem;
}
.c6::after {
.c5::after {
opacity: 0;
content: '';
position: absolute;
@ -1122,7 +1112,7 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
transform: rotate(-45deg);
}
.c3 {
.c2 {
display: inline-block;
vertical-align: text-bottom;
width: 1.125rem;
@ -1131,12 +1121,12 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
cursor: pointer;
}
.c7 label {
.c6 label {
font-weight: normal;
font-size: 0.9375rem;
}
.c2 {
.c1 {
list-style-type: none;
display: -webkit-box;
display: -webkit-flex;
@ -1160,25 +1150,25 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
height: 1.5rem;
}
.c2 label {
.c1 label {
font-weight: 400;
}
.c2 label::after {
.c1 label::after {
width: 0.475rem;
height: 0.205rem;
top: 0.4125rem;
left: 0.35rem;
}
.c2 div[type='checkbox'],
.c2 div[type='checkbox'] input,
.c2 div[type='checkbox'] label {
.c1 div[type='checkbox'],
.c1 div[type='checkbox'] input,
.c1 div[type='checkbox'] label {
height: 1.5rem;
width: 1.5rem;
}
.c1 {
.c0 {
display: inline-block;
padding: 0;
border: none;
@ -1190,22 +1180,16 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
-webkit-padding-after: 0;
}
.c8 {
.c7 {
font-weight: 600;
white-space: pre;
font-size: 0.8125rem;
cursor: pointer;
}
.c0 {
margin-bottom: 0 !important;
}
<form
className="c0"
>
<form>
<div
className="c1"
className="c0"
id="fw-toggle-inactive"
name="inactive"
role="group"
@ -1213,11 +1197,11 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
type="checkbox"
>
<li
className="c2"
className="c1"
>
<div
checked={false}
className="c3"
className="c2"
disabled={false}
id="fw-toggle-inactive"
onBlur={undefined}
@ -1225,30 +1209,30 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
>
<input
checked={false}
className="c4 c5"
className="c3 c4"
disabled={false}
id="p"
onBlur={undefined}
type="checkbox"
/>
<label
className="c6"
className="c5"
htmlFor="p"
/>
</div>
<div
checked={false}
className="c7"
className="c6"
disabled={false}
id="fw-toggle-inactive"
onBlur={undefined}
>
<label
className="c8 c9"
className="c7 c8"
htmlFor="p"
>
<div
className="c10"
className="c9"
>
Show inactive rules
</div>

View File

@ -4362,6 +4362,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
max-width: 22.1875rem;
width: 22.1875rem;

View File

@ -50,10 +50,6 @@ const ShortDivider = styled(Divider)`
margin-right: 0;
`;
const Form = styled.form`
margin-bottom: 0;
`;
export const Header = () => (
<Margin bottom="5">
<H3>CNS Default Hostnames</H3>
@ -104,7 +100,7 @@ export const AddServiceForm = ({
invalid
}) => (
<Margin bottom="3">
<Form onSubmit={handleSubmit}>
<form onSubmit={handleSubmit}>
<Flex wrap alignCenter={invalid} alignEnd={!invalid}>
<FlexItem>
<Flex collumn>
@ -135,7 +131,7 @@ export const AddServiceForm = ({
</Margin>
</FlexItem>
</Flex>
</Form>
</form>
</Margin>
);

View File

@ -3,13 +3,11 @@ import { Field } from 'redux-form';
import { Margin, Padding } from 'styled-components-spacing';
import Flex, { FlexItem } from 'styled-flex-component';
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
import styled from 'styled-components';
import {
H3,
FormGroup,
FormLabel,
Toggle,
TagList,
TagItem,
P,
@ -21,10 +19,6 @@ import {
const { SmallOnly, MediumDown, Medium, Large } = QueryBreakpoints;
const Form = styled.form`
margin-bottom: 0 !important;
`;
const capitalizeFirstLetter = string =>
string.charAt(0).toUpperCase() + string.slice(1);
@ -250,7 +244,7 @@ export const ToggleFirewallForm = ({
: undefined;
return (
<Form onChange={onChange}>
<form onChange={onChange}>
<FormGroup
id="fw-toggle-firewall"
type="checkbox"
@ -265,12 +259,12 @@ export const ToggleFirewallForm = ({
</FormLabel>
</Checkbox>
</FormGroup>
</Form>
</form>
);
};
export const ToggleInactiveForm = () => (
<Form>
<form>
<FormGroup
id="fw-toggle-inactive"
type="checkbox"
@ -285,5 +279,5 @@ export const ToggleInactiveForm = () => (
</FormLabel>
</Checkbox>
</FormGroup>
</Form>
</form>
);

View File

@ -2931,8 +2931,8 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
.c23 {
box-sizing: border-box;
width: 18.75rem;
height: 6rem;
min-height: 6rem;
height: 12rem;
min-height: 12rem;
padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
@ -2946,6 +2946,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;

View File

@ -14,11 +14,9 @@ exports[`Anchor Default Anchor 1`] = `
.c0 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c0:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
<a
@ -43,21 +41,14 @@ exports[`Anchor Disabled Anchor 1`] = `
.c0 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(216,216,216);
-webkit-text-fill-color: currentcolor;
pointer-events: none;
}
.c0:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c0:hover {
-webkit-text-decoration: underline;
text-decoration: underline;
}
<a
className="c0 c1 c2"
disabled={true}
@ -81,15 +72,13 @@ exports[`Anchor Reversed Anchor 1`] = `
.c0 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
}
.c0:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
<a
className="c0 c1 c2"
href="https://joyent.com"

View File

@ -13,12 +13,10 @@ const BaseLink = styled(({ component, children, ...rest }) =>
)`
color: ${props => props.theme.primary};
-webkit-text-fill-color: currentcolor;
cursor: pointer;
text-decoration: underline;
&:hover {
text-decoration: none;
}
${isOr('secondary', 'reversed')`
${isOr('secondary', 'reversed', 'white')`
color: ${props => props.theme.white};
-webkit-text-fill-color: currentcolor;
`};
@ -32,10 +30,6 @@ const BaseLink = styled(({ component, children, ...rest }) =>
color: ${props => props.theme.grey};
-webkit-text-fill-color: currentcolor;
pointer-events: none;
&:hover {
text-decoration: underline;
}
`};
`;

View File

@ -44,6 +44,10 @@ export default ({ theme }) => css`
flex-flow: column;
}
form {
margin: 0;
}
.CodeMirror {
border: solid ${remcalc(1)} ${theme.grey};
margin: ${remcalc(8)} 0 ${remcalc(8)} 0;

View File

@ -14,11 +14,9 @@ exports[`Button Default Button 1`] = `
.c2 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c2:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c1 {
@ -114,21 +112,14 @@ exports[`Button Disabled Button 1`] = `
.c2 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(216,216,216);
-webkit-text-fill-color: currentcolor;
pointer-events: none;
}
.c2:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c2:hover {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c1 {
display: inline-block;
}
@ -245,11 +236,9 @@ exports[`Button Error Button 1`] = `
.c2 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c2:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c1 {
@ -368,21 +357,14 @@ exports[`Button Loading Button 1`] = `
.c2 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(216,216,216);
-webkit-text-fill-color: currentcolor;
pointer-events: none;
}
.c2:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c2:hover {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c1 {
display: inline-block;
}
@ -499,15 +481,13 @@ exports[`Button Secondary Button 1`] = `
.c2 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
}
.c2:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c1 {
display: inline-block;
}

View File

@ -1,6 +1,5 @@
export { default } from './card';
export { default as Outlet } from './outlet';
export {
default as Header,
Meta as HeaderMeta,

View File

@ -10,7 +10,10 @@ const Container = styled(ViewContainer)`
flex-wrap: nowrap;
align-content: stretch;
align-items: stretch;
background: ${props => props.theme.background};
background: ${props =>
props.fill
? props.theme[props.fill] ? props.theme[props.fill] : props.fill
: props.theme.background};
`;
const Footer = styled.div`
@ -20,15 +23,22 @@ const Footer = styled.div`
align-content: stretch;
align-items: stretch;
background-color: ${props =>
props.fill ? props.theme[props.fill] : 'rgba(241, 241, 241, 1)'};
props.fill
? props.theme[props.fill] ? props.theme[props.fill] : props.fill
: 'rgba(241, 241, 241, 1)'};
border-top: ${remcalc(1)} solid ${props => props.theme.grey};
max-height: ${remcalc(53)};
min-height: ${remcalc(53)};
line-height: ${remcalc(25)};
height: ${remcalc(70)};
max-height: ${remcalc(70)};
z-index: 1;
${is('auto')`
height: auto;
`};
${is('borderless')`
border: none;
`};
${is('fixed')`
position: fixed;
left: 0;
@ -38,10 +48,16 @@ const Footer = styled.div`
${is('bottom', 'fixed')`
bottom: 0;
`};
${is('top', 'fixed')`
top: 0;
`};
`;
export default ({ children, fluid, ...rest }) => (
export default ({ children, fluid, innerFill, ...rest }) => (
<Footer {...rest}>
<Container fluid={fluid}>{children}</Container>
<Container fill={innerFill || rest.fill} fluid={fluid}>
{children}
</Container>
</Footer>
);

View File

@ -726,8 +726,8 @@ exports[`Form Textarea 1`] = `
.c1 {
box-sizing: border-box;
width: 18.75rem;
height: 6rem;
min-height: 6rem;
height: 12rem;
min-height: 12rem;
padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);

View File

@ -17,7 +17,7 @@ const color = props =>
props.defaultValue ? colorWithDefaultValue(props) : colorWithDisabled(props);
const height = props =>
props.multiple ? 'auto' : props.textarea ? remcalc(96) : remcalc(48);
props.multiple ? 'auto' : props.textarea ? remcalc(192) : remcalc(48);
const paddingTop = props => (props.multiple ? remcalc(20) : remcalc(13));
@ -106,6 +106,7 @@ const style = css`
`};
${is('monospace')`
white-space: pre-wrap;
font-family: ${props => props.theme.monoFont.families};
&:disabled {
@ -164,6 +165,10 @@ const style = css`
width: ${remcalc(120)};
`};
${is('borderless')`
border: none;
`};
${is('success')`
border-color: ${props => props.theme.greenDark}
`};
@ -199,6 +204,14 @@ const style = css`
text-align: center;
border-radius: 0;
`};
${is('white')`
color: ${props => props.theme.white};
`};
${is('dark')`
background: ${props => props.theme.greyDarker};
`};
`;
const BaseInput = Component => ({ resize, onBlur, type, ...props }) => {

View File

@ -1,6 +1,7 @@
import React from 'react';
import styled from 'styled-components';
import remcalc from 'remcalc';
import is from 'styled-is';
const UnorderedList = styled.ul`
background: ${props => props.theme.disabled};
@ -24,6 +25,10 @@ const UnorderedList = styled.ul`
left: 0;
z-index: 1;
}
${is('clear')`
background: none !important;
`};
`;
/**

View File

@ -1,20 +1,9 @@
import styled, { css } from 'styled-components';
import styled from 'styled-components';
import remcalc from 'remcalc';
import is from 'styled-is';
import is, { isNot } from 'styled-is';
import BaseAnchor from '../anchor';
const border = css`
width: 100%;
height: ${remcalc(1)};
background: ${props => props.theme.text};
content: '';
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
`;
export default styled.li`
font-size: ${remcalc(15)};
line-height: 1.6;
@ -23,25 +12,53 @@ export default styled.li`
export const Anchor = styled(BaseAnchor)`
color: ${props => props.theme.text};
font-weight: ${props => props.theme.font.weight.text};
text-decoration: none;
cursor: pointer;
padding: 0 ${remcalc(12)};
padding-bottom: ${remcalc(15)};
position: relative;
&.active {
font-weight: ${props => props.theme.font.weight.text};
&:after {
width: 100%;
height: ${remcalc(1)};
background: ${props => props.theme.grey};
content: '';
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
}
&.active {
&:after {
${border};
background: ${props => props.theme.font.regular};
}
}
&.active {
font-weight: ${props => props.theme.font.weight.semibold};
}
${is('active')`
font-weight: ${props => props.theme.font.weight.text};
font-weight: ${props => props.theme.font.weight.semibold}
`};
${is('white')`
color: ${props => props.theme.white};
${isNot('active')`
color: ${props => props.theme.greyDark};
`};
&:after {
${border}
background: ${props => props.theme.greyDarker};
};
`};
${is('white', 'active')`
&:after {
background: ${props => props.theme.white};
}
`};
`;

View File

@ -14,7 +14,7 @@ exports[`Button H1 1`] = `
line-height: 2.8125rem;
font-style: normal;
font-stretch: normal;
font-weight: normal;
font-weight: 400;
margin: 0;
}
@ -29,7 +29,7 @@ exports[`Button H2 1`] = `
.c0 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.875rem;
font-size: 1.5rem;
}
@ -45,7 +45,7 @@ exports[`Button H3 1`] = `
.c0 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}

View File

@ -12,7 +12,7 @@ export const H1 = styled(NH1)`
line-height: ${remcalc(45)};
font-style: normal;
font-stretch: normal;
font-weight: normal;
font-weight: ${props => props.theme.font.weight.normal};
margin: 0;
${is('inline')`
@ -36,7 +36,7 @@ export const H1 = styled(NH1)`
export const H2 = styled.h2`
margin: 0;
color: ${props => props.theme.text};
font-weight: normal;
font-weight: ${props => props.theme.font.weight.normal};
line-height: ${remcalc(30)};
font-size: ${remcalc(24)};
@ -61,7 +61,7 @@ export const H2 = styled.h2`
export const H3 = styled.h3`
margin: 0;
color: ${props => props.theme.text};
font-weight: normal;
font-weight: ${props => props.theme.font.weight.normal};
line-height: ${remcalc(26)};
font-size: ${remcalc(21)};