fix(cp-frontend,ui-toolkit): increase synchrony between wireframes and code
This commit is contained in:
Sara Vieira
Sérgio Ramos
parent
e1df4a14d3
commit
d1bc04c528
@ -72,7 +72,7 @@
|
|||||||
"cross-env": "^5.0.5",
|
"cross-env": "^5.0.5",
|
||||||
"eslint": "^4.5.0",
|
"eslint": "^4.5.0",
|
||||||
"eslint-config-joyent-portal": "3.0.0",
|
"eslint-config-joyent-portal": "3.0.0",
|
||||||
"jest": "^20.0.4",
|
"jest": "^21.0.1",
|
||||||
"jest-alias-preprocessor": "^1.1.1",
|
"jest-alias-preprocessor": "^1.1.1",
|
||||||
"jest-cli": "^20.0.4",
|
"jest-cli": "^20.0.4",
|
||||||
"jest-diff": "^20.0.3",
|
"jest-diff": "^20.0.3",
|
||||||
|
|||||||
@ -1,460 +0,0 @@
|
|||||||
import React, { Component } from 'react';
|
|
||||||
import { Field } from 'redux-form';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import { Row, Col } from 'react-styled-flexboxgrid';
|
|
||||||
import Bundle from 'react-bundle';
|
|
||||||
import remcalc from 'remcalc';
|
|
||||||
import forceArray from 'force-array';
|
|
||||||
import is from 'styled-is';
|
|
||||||
|
|
||||||
import { Loader } from '@components/messaging';
|
|
||||||
|
|
||||||
import {
|
|
||||||
FormGroup,
|
|
||||||
FormMeta,
|
|
||||||
Input,
|
|
||||||
Button,
|
|
||||||
Card,
|
|
||||||
Progressbar,
|
|
||||||
ProgressbarItem,
|
|
||||||
ProgressbarButton,
|
|
||||||
H3,
|
|
||||||
P,
|
|
||||||
typography,
|
|
||||||
Divider,
|
|
||||||
Chevron
|
|
||||||
} from 'joyent-ui-toolkit';
|
|
||||||
|
|
||||||
const EnvironmentChevron = styled(Chevron)`
|
|
||||||
float: right;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const EnvironmentDivider = Divider.extend`
|
|
||||||
margin-top: ${remcalc(34)};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ServiceDivider = Divider.extend`
|
|
||||||
margin: ${remcalc(13)} ${remcalc(-20)} 0 ${remcalc(-20)};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Dl = styled.dl`
|
|
||||||
margin: 0;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ServiceName = H3.extend`
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: ${remcalc(5)};
|
|
||||||
line-height: 1.6;
|
|
||||||
font-size: ${remcalc(18)};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ImageTitle = H3.extend`
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Image = styled.span`
|
|
||||||
${typography.fontFamily};
|
|
||||||
font-size: ${remcalc(15)};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ServiceEnvironmentTitle = P.extend`
|
|
||||||
margin: ${remcalc(13)} 0 0 0;
|
|
||||||
|
|
||||||
${is('expanded')`
|
|
||||||
margin-bottom: ${remcalc(13)};
|
|
||||||
`};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ButtonsRow = Row.extend`
|
|
||||||
margin: ${remcalc(29)} 0 ${remcalc(60)} 0;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const FilenameContainer = styled.span`
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-content: stretch;
|
|
||||||
align-items: stretch;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const FilenameInput = styled(Input)`
|
|
||||||
order: 0;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
align-self: stretch;
|
|
||||||
margin: 0 0 ${remcalc(13)} 0;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const FilenameRemove = Button.extend`
|
|
||||||
order: 0;
|
|
||||||
flex: 0 1 auto;
|
|
||||||
align-self: auto;
|
|
||||||
margin: 0 0 0 ${remcalc(8)};
|
|
||||||
height: ${remcalc(48)};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const FileCard = Card.extend`
|
|
||||||
padding: ${remcalc(24)} ${remcalc(19)};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ServiceCard = Card.extend`
|
|
||||||
padding: ${remcalc(13)} ${remcalc(19)};
|
|
||||||
min-height: initial;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Subtitle = H3.extend`
|
|
||||||
margin-top: ${remcalc(34)};
|
|
||||||
margin-bottom: ${remcalc(3)};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Description = P.extend`
|
|
||||||
margin-top: ${remcalc(3)};
|
|
||||||
margin-bottom: ${remcalc(20)};
|
|
||||||
`;
|
|
||||||
|
|
||||||
class ManifestEditorBundle extends Component {
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
|
|
||||||
this.state = {};
|
|
||||||
|
|
||||||
this.handleRender = this.handleRender.bind(this);
|
|
||||||
}
|
|
||||||
handleRender(ManifestEditor) {
|
|
||||||
if (ManifestEditor) {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.setState({ ManifestEditor });
|
|
||||||
}, 80);
|
|
||||||
}
|
|
||||||
|
|
||||||
return <Loader />;
|
|
||||||
}
|
|
||||||
render() {
|
|
||||||
if (!this.state.ManifestEditor) {
|
|
||||||
return (
|
|
||||||
<Bundle load={() => import('joyent-manifest-editor')}>
|
|
||||||
{this.handleRender}
|
|
||||||
</Bundle>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const { ManifestEditor } = this.state;
|
|
||||||
const { children, ...rest } = this.props;
|
|
||||||
|
|
||||||
return <ManifestEditor {...rest}>{children}</ManifestEditor>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const MEditor = ({ input, defaultValue, readOnly }) => (
|
|
||||||
<ManifestEditorBundle
|
|
||||||
mode="yaml"
|
|
||||||
{...input}
|
|
||||||
value={input.value || defaultValue}
|
|
||||||
readOnly={readOnly}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
const EEditor = ({ input, defaultValue, readOnly }) => (
|
|
||||||
<ManifestEditorBundle
|
|
||||||
mode="ini"
|
|
||||||
{...input}
|
|
||||||
value={input.value || defaultValue}
|
|
||||||
readOnly={readOnly}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
export const Name = ({ handleSubmit, onCancel, dirty }) => (
|
|
||||||
<form onSubmit={handleSubmit}>
|
|
||||||
<Row>
|
|
||||||
<Col xs={12} md={3} lg={3}>
|
|
||||||
<FormGroup name="name" reduxForm>
|
|
||||||
<FormMeta left />
|
|
||||||
<Input type="text" />
|
|
||||||
</FormGroup>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
<ButtonsRow>
|
|
||||||
<Button type="button" onClick={onCancel} secondary>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button type="submit" disabled={!dirty}>
|
|
||||||
Next
|
|
||||||
</Button>
|
|
||||||
</ButtonsRow>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
|
|
||||||
export const Manifest = ({
|
|
||||||
handleSubmit,
|
|
||||||
onCancel,
|
|
||||||
dirty,
|
|
||||||
defaultValue = '',
|
|
||||||
loading
|
|
||||||
}) => (
|
|
||||||
<form onSubmit={handleSubmit}>
|
|
||||||
<Field name="manifest" defaultValue={defaultValue} component={MEditor} />
|
|
||||||
<ButtonsRow>
|
|
||||||
<Button type="button" onClick={onCancel} secondary>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
disabled={!(dirty || !loading || defaultValue.length)}
|
|
||||||
loading={loading}
|
|
||||||
type="submit"
|
|
||||||
>
|
|
||||||
Environment
|
|
||||||
</Button>
|
|
||||||
</ButtonsRow>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
|
|
||||||
const File = ({ id, name, value, onRemoveFile, readOnly }) => {
|
|
||||||
const removeButton = !readOnly ? (
|
|
||||||
<FilenameRemove type="button" onClick={onRemoveFile} secondary>
|
|
||||||
Remove
|
|
||||||
</FilenameRemove>
|
|
||||||
) : null;
|
|
||||||
|
|
||||||
const fileEditor = !readOnly ? (
|
|
||||||
<Field name={`file-value-${id}`} defaultValue={value} component={EEditor} />
|
|
||||||
) : (
|
|
||||||
<EEditor input={{ value }} readOnly />
|
|
||||||
);
|
|
||||||
|
|
||||||
const input = !readOnly ? (
|
|
||||||
<FilenameInput type="text" placeholder="Filename including extension…" />
|
|
||||||
) : (
|
|
||||||
<FilenameInput
|
|
||||||
type="text"
|
|
||||||
placeholder="Filename including extension…"
|
|
||||||
value={name}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<FileCard>
|
|
||||||
<FormGroup name={`file-name-${id}`} reduxForm={!readOnly}>
|
|
||||||
<FilenameContainer>
|
|
||||||
{input}
|
|
||||||
{removeButton}
|
|
||||||
</FilenameContainer>
|
|
||||||
</FormGroup>
|
|
||||||
{fileEditor}
|
|
||||||
</FileCard>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const Files = ({ files, onAddFile, onRemoveFile, readOnly }) => {
|
|
||||||
const footer = !readOnly ? (
|
|
||||||
<Button type="button" onClick={onAddFile} secondary>
|
|
||||||
Create new .env file
|
|
||||||
</Button>
|
|
||||||
) : null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{files.map(({ id, ...rest }) => (
|
|
||||||
<File
|
|
||||||
key={id}
|
|
||||||
id={id}
|
|
||||||
onRemoveFile={() => onRemoveFile(id)}
|
|
||||||
readOnly={readOnly}
|
|
||||||
{...rest}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
{footer}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Environment = ({
|
|
||||||
handleSubmit,
|
|
||||||
onCancel,
|
|
||||||
onAddFile,
|
|
||||||
onRemoveFile,
|
|
||||||
dirty,
|
|
||||||
defaultValue = '',
|
|
||||||
files = [],
|
|
||||||
readOnly = false,
|
|
||||||
loading
|
|
||||||
}) => {
|
|
||||||
const envEditor = !readOnly ? (
|
|
||||||
<Field name="environment" defaultValue={defaultValue} component={EEditor} />
|
|
||||||
) : (
|
|
||||||
<EEditor input={{ value: defaultValue }} readOnly />
|
|
||||||
);
|
|
||||||
|
|
||||||
const footerDivider = !readOnly ? <EnvironmentDivider /> : null;
|
|
||||||
|
|
||||||
const footer = !readOnly ? (
|
|
||||||
<ButtonsRow>
|
|
||||||
<Button type="button" onClick={onCancel} secondary>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
disabled={!(dirty || !loading || defaultValue.length)}
|
|
||||||
loading={loading}
|
|
||||||
type="submit"
|
|
||||||
>
|
|
||||||
Continue
|
|
||||||
</Button>
|
|
||||||
</ButtonsRow>
|
|
||||||
) : null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form onSubmit={handleSubmit}>
|
|
||||||
<Subtitle>Global variables</Subtitle>
|
|
||||||
<Description>
|
|
||||||
These variables are going to be availabe for interpolation in the
|
|
||||||
manifest
|
|
||||||
</Description>
|
|
||||||
{envEditor}
|
|
||||||
<EnvironmentDivider />
|
|
||||||
<Subtitle>Enviroment files</Subtitle>
|
|
||||||
<Description>
|
|
||||||
The variables from this files will be applied to the services that
|
|
||||||
require them
|
|
||||||
</Description>
|
|
||||||
<Files
|
|
||||||
files={files}
|
|
||||||
onAddFile={onAddFile}
|
|
||||||
onRemoveFile={onRemoveFile}
|
|
||||||
readOnly={readOnly}
|
|
||||||
/>
|
|
||||||
{footerDivider}
|
|
||||||
{footer}
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const EnvironmentReview = ({ environment }) => {
|
|
||||||
const value = environment
|
|
||||||
.map(({ name, value }) => `${name}=${value}`)
|
|
||||||
.join('\n');
|
|
||||||
|
|
||||||
return <EEditor input={{ value }} />;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Review = ({
|
|
||||||
handleSubmit,
|
|
||||||
onEnvironmentToggle = () => null,
|
|
||||||
onCancel,
|
|
||||||
dirty,
|
|
||||||
loading,
|
|
||||||
environmentToggles,
|
|
||||||
...state
|
|
||||||
}) => {
|
|
||||||
const serviceList = forceArray(state.services).map(({ name, config }) => (
|
|
||||||
<ServiceCard key={name}>
|
|
||||||
<ServiceName>{name}</ServiceName>
|
|
||||||
<Dl>
|
|
||||||
<dt>
|
|
||||||
<ImageTitle>Image:</ImageTitle> <Image>{config.image}</Image>
|
|
||||||
</dt>
|
|
||||||
</Dl>
|
|
||||||
{config.environment && config.environment.length ? (
|
|
||||||
<ServiceDivider />
|
|
||||||
) : null}
|
|
||||||
{config.environment && config.environment.length ? (
|
|
||||||
<ServiceEnvironmentTitle
|
|
||||||
expanded={environmentToggles[name]}
|
|
||||||
onClick={() => onEnvironmentToggle(name)}
|
|
||||||
>
|
|
||||||
Environment variables{' '}
|
|
||||||
<EnvironmentChevron
|
|
||||||
down={!environmentToggles[name]}
|
|
||||||
up={environmentToggles[name]}
|
|
||||||
/>
|
|
||||||
</ServiceEnvironmentTitle>
|
|
||||||
) : null}
|
|
||||||
{config.environment &&
|
|
||||||
config.environment.length &&
|
|
||||||
environmentToggles[name] ? (
|
|
||||||
<EnvironmentReview environment={config.environment} />
|
|
||||||
) : null}
|
|
||||||
</ServiceCard>
|
|
||||||
));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form onSubmit={handleSubmit}>
|
|
||||||
{serviceList}
|
|
||||||
<ButtonsRow>
|
|
||||||
<Button type="button" onClick={onCancel} disabled={loading} secondary>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button disabled={loading} loading={loading} type="submit">
|
|
||||||
Confirm and Deploy
|
|
||||||
</Button>
|
|
||||||
</ButtonsRow>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Progress = ({ stage, create, edit }) => {
|
|
||||||
const _nameCompleted = stage !== 'name';
|
|
||||||
const _nameActive = stage === 'name';
|
|
||||||
|
|
||||||
const _name = !create ? null : (
|
|
||||||
<ProgressbarItem>
|
|
||||||
<ProgressbarButton
|
|
||||||
zIndex="10"
|
|
||||||
completed={_nameCompleted}
|
|
||||||
active={_nameActive}
|
|
||||||
first
|
|
||||||
>
|
|
||||||
Name the group
|
|
||||||
</ProgressbarButton>
|
|
||||||
</ProgressbarItem>
|
|
||||||
);
|
|
||||||
|
|
||||||
const _manifestCompleted = ['environment', 'review'].indexOf(stage) >= 0;
|
|
||||||
const _manifestActive = create ? stage === 'manifest' : stage === 'edit';
|
|
||||||
|
|
||||||
const _manifest = (
|
|
||||||
<ProgressbarItem>
|
|
||||||
<ProgressbarButton
|
|
||||||
zIndex="9"
|
|
||||||
completed={_manifestCompleted}
|
|
||||||
active={_manifestActive}
|
|
||||||
first={edit}
|
|
||||||
>
|
|
||||||
Define Services
|
|
||||||
</ProgressbarButton>
|
|
||||||
</ProgressbarItem>
|
|
||||||
);
|
|
||||||
|
|
||||||
const _environmentCompleted = stage === 'review';
|
|
||||||
const _environmentActive = stage === 'environment';
|
|
||||||
|
|
||||||
const _environment = (
|
|
||||||
<ProgressbarItem>
|
|
||||||
<ProgressbarButton
|
|
||||||
zIndex="8"
|
|
||||||
completed={_environmentCompleted}
|
|
||||||
active={_environmentActive}
|
|
||||||
>
|
|
||||||
Define Environment
|
|
||||||
</ProgressbarButton>
|
|
||||||
</ProgressbarItem>
|
|
||||||
);
|
|
||||||
|
|
||||||
const _reviewActive = stage === 'review';
|
|
||||||
|
|
||||||
const _review = (
|
|
||||||
<ProgressbarItem>
|
|
||||||
<ProgressbarButton zIndex="7" active={_reviewActive} last>
|
|
||||||
Review and deploy
|
|
||||||
</ProgressbarButton>
|
|
||||||
</ProgressbarItem>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Progressbar>
|
|
||||||
{_name}
|
|
||||||
{_manifest}
|
|
||||||
{_environment}
|
|
||||||
{_review}
|
|
||||||
</Progressbar>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
20
packages/cp-frontend/src/components/manifest/editors.js
Normal file
20
packages/cp-frontend/src/components/manifest/editors.js
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ManifestEditorBundle from './manifest-editor';
|
||||||
|
|
||||||
|
export const MEditor = ({ input, defaultValue, readOnly }) => (
|
||||||
|
<ManifestEditorBundle
|
||||||
|
mode="yaml"
|
||||||
|
{...input}
|
||||||
|
value={input.value || defaultValue}
|
||||||
|
readOnly={readOnly}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const EEditor = ({ input, defaultValue, readOnly }) => (
|
||||||
|
<ManifestEditorBundle
|
||||||
|
mode="ini"
|
||||||
|
{...input}
|
||||||
|
value={input.value || defaultValue}
|
||||||
|
readOnly={readOnly}
|
||||||
|
/>
|
||||||
|
);
|
||||||
83
packages/cp-frontend/src/components/manifest/environment.js
Normal file
83
packages/cp-frontend/src/components/manifest/environment.js
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Field } from 'redux-form';
|
||||||
|
import remcalc from 'remcalc';
|
||||||
|
import { Row } from 'react-styled-flexboxgrid';
|
||||||
|
import { Button, Divider, H3, P } from 'joyent-ui-toolkit';
|
||||||
|
|
||||||
|
import { EEditor } from './editors';
|
||||||
|
import Files from './files';
|
||||||
|
|
||||||
|
const EnvironmentDivider = Divider.extend`margin-top: ${remcalc(34)};`;
|
||||||
|
const ButtonsRow = Row.extend`margin: ${remcalc(29)} 0 ${remcalc(60)} 0;`;
|
||||||
|
|
||||||
|
const Subtitle = H3.extend`
|
||||||
|
margin-top: ${remcalc(34)};
|
||||||
|
margin-bottom: ${remcalc(3)};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Description = P.extend`
|
||||||
|
margin-top: ${remcalc(3)};
|
||||||
|
margin-bottom: ${remcalc(20)};
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const Environment = ({
|
||||||
|
handleSubmit,
|
||||||
|
onCancel,
|
||||||
|
onAddFile,
|
||||||
|
onRemoveFile,
|
||||||
|
dirty,
|
||||||
|
defaultValue = '',
|
||||||
|
files = [],
|
||||||
|
readOnly = false,
|
||||||
|
loading
|
||||||
|
}) => {
|
||||||
|
const envEditor = !readOnly ? (
|
||||||
|
<Field name="environment" defaultValue={defaultValue} component={EEditor} />
|
||||||
|
) : (
|
||||||
|
<EEditor input={{ value: defaultValue }} readOnly />
|
||||||
|
);
|
||||||
|
|
||||||
|
const footerDivider = !readOnly ? <EnvironmentDivider /> : null;
|
||||||
|
|
||||||
|
const footer = !readOnly ? (
|
||||||
|
<ButtonsRow>
|
||||||
|
<Button type="button" onClick={onCancel} secondary>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
disabled={!(dirty || !loading || defaultValue.length)}
|
||||||
|
loading={loading}
|
||||||
|
type="submit"
|
||||||
|
>
|
||||||
|
Continue
|
||||||
|
</Button>
|
||||||
|
</ButtonsRow>
|
||||||
|
) : null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
<Subtitle>Global variables</Subtitle>
|
||||||
|
<Description>
|
||||||
|
These variables are going to be availabe for interpolation in the
|
||||||
|
manifest
|
||||||
|
</Description>
|
||||||
|
{envEditor}
|
||||||
|
<EnvironmentDivider />
|
||||||
|
<Subtitle>Enviroment files</Subtitle>
|
||||||
|
<Description>
|
||||||
|
The variables from this files will be applied to the services that
|
||||||
|
require them
|
||||||
|
</Description>
|
||||||
|
<Files
|
||||||
|
files={files}
|
||||||
|
onAddFile={onAddFile}
|
||||||
|
onRemoveFile={onRemoveFile}
|
||||||
|
readOnly={readOnly}
|
||||||
|
/>
|
||||||
|
{footerDivider}
|
||||||
|
{footer}
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Environment;
|
||||||
99
packages/cp-frontend/src/components/manifest/files.js
Normal file
99
packages/cp-frontend/src/components/manifest/files.js
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Field } from 'redux-form';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import remcalc from 'remcalc';
|
||||||
|
import { EEditor } from './editors';
|
||||||
|
|
||||||
|
import {
|
||||||
|
FormGroup,
|
||||||
|
Input,
|
||||||
|
Button,
|
||||||
|
Card
|
||||||
|
} from 'joyent-ui-toolkit';
|
||||||
|
|
||||||
|
const FilenameContainer = styled.span`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-content: stretch;
|
||||||
|
align-items: stretch;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const FilenameInput = styled(Input)`
|
||||||
|
order: 0;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
align-self: stretch;
|
||||||
|
margin: 0 0 ${remcalc(13)} 0;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const FilenameRemove = Button.extend`
|
||||||
|
order: 0;
|
||||||
|
flex: 0 1 auto;
|
||||||
|
align-self: auto;
|
||||||
|
margin: 0 0 0 ${remcalc(8)};
|
||||||
|
height: ${remcalc(48)};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const FileCard = Card.extend`padding: ${remcalc(24)} ${remcalc(19)};`;
|
||||||
|
|
||||||
|
const File = ({ id, name, value, onRemoveFile, readOnly }) => {
|
||||||
|
const removeButton = !readOnly ? (
|
||||||
|
<FilenameRemove type="button" onClick={onRemoveFile} secondary>
|
||||||
|
Remove
|
||||||
|
</FilenameRemove>
|
||||||
|
) : null;
|
||||||
|
|
||||||
|
const fileEditor = !readOnly ? (
|
||||||
|
<Field name={`file-value-${id}`} defaultValue={value} component={EEditor} />
|
||||||
|
) : (
|
||||||
|
<EEditor input={{ value }} readOnly />
|
||||||
|
);
|
||||||
|
|
||||||
|
const input = !readOnly ? (
|
||||||
|
<FilenameInput type="text" placeholder="Filename including extension…" />
|
||||||
|
) : (
|
||||||
|
<FilenameInput
|
||||||
|
type="text"
|
||||||
|
placeholder="Filename including extension…"
|
||||||
|
value={name}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FileCard>
|
||||||
|
<FormGroup name={`file-name-${id}`} reduxForm={!readOnly}>
|
||||||
|
<FilenameContainer>
|
||||||
|
{input}
|
||||||
|
{removeButton}
|
||||||
|
</FilenameContainer>
|
||||||
|
</FormGroup>
|
||||||
|
{fileEditor}
|
||||||
|
</FileCard>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const Files = ({ files, onAddFile, onRemoveFile, readOnly }) => {
|
||||||
|
const footer = !readOnly ? (
|
||||||
|
<Button type="button" onClick={onAddFile} secondary>
|
||||||
|
Create new .env file
|
||||||
|
</Button>
|
||||||
|
) : null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{files.map(({ id, ...rest }) => (
|
||||||
|
<File
|
||||||
|
key={id}
|
||||||
|
id={id}
|
||||||
|
onRemoveFile={() => onRemoveFile(id)}
|
||||||
|
readOnly={readOnly}
|
||||||
|
{...rest}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
{footer}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Files;
|
||||||
8
packages/cp-frontend/src/components/manifest/index.js
Normal file
8
packages/cp-frontend/src/components/manifest/index.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
export { default as Files } from './files';
|
||||||
|
export { default as Editors } from './editors';
|
||||||
|
export { default as ManifestEditorBundle } from './manifest-editor';
|
||||||
|
export { default as Manifest } from './manifest';
|
||||||
|
export { default as Name } from './name';
|
||||||
|
export { default as Review } from './review';
|
||||||
|
export { default as Progress } from './progress';
|
||||||
|
export { default as Environment } from './environment';
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
import React, { Component } from 'react';
|
||||||
|
import Bundle from 'react-bundle';
|
||||||
|
|
||||||
|
import { Loader } from '@components/messaging';
|
||||||
|
|
||||||
|
class ManifestEditorBundle extends Component {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
|
||||||
|
this.state = {};
|
||||||
|
|
||||||
|
this.handleRender = this.handleRender.bind(this);
|
||||||
|
}
|
||||||
|
handleRender(ManifestEditor) {
|
||||||
|
if (ManifestEditor) {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.setState({ ManifestEditor });
|
||||||
|
}, 80);
|
||||||
|
}
|
||||||
|
|
||||||
|
return <Loader />;
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
if (!this.state.ManifestEditor) {
|
||||||
|
return (
|
||||||
|
<Bundle load={() => import('joyent-manifest-editor')}>
|
||||||
|
{this.handleRender}
|
||||||
|
</Bundle>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { ManifestEditor } = this.state;
|
||||||
|
const { children, ...rest } = this.props;
|
||||||
|
|
||||||
|
return <ManifestEditor {...rest}>{children}</ManifestEditor>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ManifestEditorBundle;
|
||||||
36
packages/cp-frontend/src/components/manifest/manifest.js
Normal file
36
packages/cp-frontend/src/components/manifest/manifest.js
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { FormMeta, Button, Label } from 'joyent-ui-toolkit';
|
||||||
|
import { Row } from 'react-styled-flexboxgrid';
|
||||||
|
import remcalc from 'remcalc';
|
||||||
|
import { Field } from 'redux-form';
|
||||||
|
|
||||||
|
const ButtonsRow = Row.extend`margin: ${remcalc(29)} 0 ${remcalc(60)} 0;`;
|
||||||
|
|
||||||
|
export const Manifest = ({
|
||||||
|
handleSubmit,
|
||||||
|
onCancel,
|
||||||
|
dirty,
|
||||||
|
defaultValue = '',
|
||||||
|
loading
|
||||||
|
}) => (
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
<FormMeta left>
|
||||||
|
<Label>Project manifest</Label>
|
||||||
|
</FormMeta>
|
||||||
|
<Field name="manifest" defaultValue={defaultValue} component={MEditor} />
|
||||||
|
<ButtonsRow>
|
||||||
|
<Button type="button" onClick={onCancel} secondary>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
disabled={!(dirty || !loading || defaultValue.length)}
|
||||||
|
loading={loading}
|
||||||
|
type="submit"
|
||||||
|
>
|
||||||
|
Environment
|
||||||
|
</Button>
|
||||||
|
</ButtonsRow>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default Manifest;
|
||||||
42
packages/cp-frontend/src/components/manifest/name.js
Normal file
42
packages/cp-frontend/src/components/manifest/name.js
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
FormMeta,
|
||||||
|
Button,
|
||||||
|
Label,
|
||||||
|
Input,
|
||||||
|
Small,
|
||||||
|
FormGroup
|
||||||
|
} from 'joyent-ui-toolkit';
|
||||||
|
import { Row, Col } from 'react-styled-flexboxgrid';
|
||||||
|
import remcalc from 'remcalc';
|
||||||
|
import { Field } from 'redux-form';
|
||||||
|
|
||||||
|
const ButtonsRow = Row.extend`margin: ${remcalc(29)} 0 ${remcalc(60)} 0;`;
|
||||||
|
|
||||||
|
export const Name = ({ handleSubmit, onCancel, dirty }) => (
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
<Row>
|
||||||
|
<Col xs={12} md={4} lg={4}>
|
||||||
|
<FormGroup name="name" reduxForm>
|
||||||
|
<FormMeta left>
|
||||||
|
<Label>Name the new deployment group</Label>
|
||||||
|
<Small>
|
||||||
|
Your services will be deployed to eu-east-1 data center.
|
||||||
|
</Small>
|
||||||
|
</FormMeta>
|
||||||
|
<Input type="text" />
|
||||||
|
</FormGroup>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<ButtonsRow>
|
||||||
|
<Button type="button" onClick={onCancel} secondary>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button type="submit" disabled={!dirty}>
|
||||||
|
Next
|
||||||
|
</Button>
|
||||||
|
</ButtonsRow>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default Name;
|
||||||
77
packages/cp-frontend/src/components/manifest/progress.js
Normal file
77
packages/cp-frontend/src/components/manifest/progress.js
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Progressbar,
|
||||||
|
ProgressbarItem,
|
||||||
|
ProgressbarButton
|
||||||
|
} from 'joyent-ui-toolkit';
|
||||||
|
|
||||||
|
const Progress = ({ stage, create, edit }) => {
|
||||||
|
const _nameCompleted = stage !== 'name';
|
||||||
|
const _nameActive = stage === 'name';
|
||||||
|
|
||||||
|
const _name = !create ? null : (
|
||||||
|
<ProgressbarItem>
|
||||||
|
<ProgressbarButton
|
||||||
|
zIndex="10"
|
||||||
|
completed={_nameCompleted}
|
||||||
|
active={_nameActive}
|
||||||
|
first
|
||||||
|
>
|
||||||
|
Name the group
|
||||||
|
</ProgressbarButton>
|
||||||
|
</ProgressbarItem>
|
||||||
|
);
|
||||||
|
|
||||||
|
const _manifestCompleted = ['environment', 'review'].indexOf(stage) >= 0;
|
||||||
|
const _manifestActive = create ? stage === 'manifest' : stage === 'edit';
|
||||||
|
|
||||||
|
const _manifest = (
|
||||||
|
<ProgressbarItem>
|
||||||
|
<ProgressbarButton
|
||||||
|
zIndex="9"
|
||||||
|
completed={_manifestCompleted}
|
||||||
|
active={_manifestActive}
|
||||||
|
first={edit}
|
||||||
|
>
|
||||||
|
Define Services
|
||||||
|
</ProgressbarButton>
|
||||||
|
</ProgressbarItem>
|
||||||
|
);
|
||||||
|
|
||||||
|
const _environmentCompleted = stage === 'review';
|
||||||
|
const _environmentActive = stage === 'environment';
|
||||||
|
|
||||||
|
const _environment = (
|
||||||
|
<ProgressbarItem>
|
||||||
|
<ProgressbarButton
|
||||||
|
zIndex="8"
|
||||||
|
completed={_environmentCompleted}
|
||||||
|
active={_environmentActive}
|
||||||
|
>
|
||||||
|
Define Environment
|
||||||
|
</ProgressbarButton>
|
||||||
|
</ProgressbarItem>
|
||||||
|
);
|
||||||
|
|
||||||
|
const _reviewActive = stage === 'review';
|
||||||
|
|
||||||
|
const _review = (
|
||||||
|
<ProgressbarItem>
|
||||||
|
<ProgressbarButton zIndex="7" active={_reviewActive} last>
|
||||||
|
Review and deploy
|
||||||
|
</ProgressbarButton>
|
||||||
|
</ProgressbarItem>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Progressbar>
|
||||||
|
{_name}
|
||||||
|
{_manifest}
|
||||||
|
{_environment}
|
||||||
|
{_review}
|
||||||
|
</Progressbar>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Progress;
|
||||||
123
packages/cp-frontend/src/components/manifest/review.js
Normal file
123
packages/cp-frontend/src/components/manifest/review.js
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import remcalc from 'remcalc';
|
||||||
|
import { Row } from 'react-styled-flexboxgrid';
|
||||||
|
import is from 'styled-is';
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Divider,
|
||||||
|
H3,
|
||||||
|
P,
|
||||||
|
Chevron,
|
||||||
|
typography,
|
||||||
|
Card
|
||||||
|
} from 'joyent-ui-toolkit';
|
||||||
|
import forceArray from 'force-array';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
|
||||||
|
import { EEditor } from './editors';
|
||||||
|
|
||||||
|
const ButtonsRow = Row.extend`margin: ${remcalc(29)} 0 ${remcalc(60)} 0;`;
|
||||||
|
|
||||||
|
const ServiceEnvironmentTitle = P.extend`
|
||||||
|
margin: ${remcalc(13)} 0 0 0;
|
||||||
|
|
||||||
|
${is('expanded')`
|
||||||
|
margin-bottom: ${remcalc(13)};
|
||||||
|
`};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ServiceName = H3.extend`
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: ${remcalc(5)};
|
||||||
|
line-height: 1.6;
|
||||||
|
font-size: ${remcalc(18)};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ImageTitle = H3.extend`
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Image = styled.span`
|
||||||
|
${typography.fontFamily};
|
||||||
|
font-size: ${remcalc(15)};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ServiceDivider = Divider.extend`
|
||||||
|
margin: ${remcalc(13)} ${remcalc(-20)} 0 ${remcalc(-20)};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ServiceCard = Card.extend`
|
||||||
|
padding: ${remcalc(13)} ${remcalc(19)};
|
||||||
|
min-height: initial;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Dl = styled.dl`margin: 0;`;
|
||||||
|
|
||||||
|
const EnvironmentChevron = styled(Chevron)`float: right;`;
|
||||||
|
|
||||||
|
const EnvironmentReview = ({ environment }) => {
|
||||||
|
const value = environment
|
||||||
|
.map(({ name, value }) => `${name}=${value}`)
|
||||||
|
.join('\n');
|
||||||
|
|
||||||
|
return <EEditor input={{ value }} />;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Review = ({
|
||||||
|
handleSubmit,
|
||||||
|
onEnvironmentToggle = () => null,
|
||||||
|
onCancel,
|
||||||
|
dirty,
|
||||||
|
loading,
|
||||||
|
environmentToggles,
|
||||||
|
...state
|
||||||
|
}) => {
|
||||||
|
const serviceList = forceArray(state.services).map(({ name, config }) => (
|
||||||
|
<ServiceCard key={name}>
|
||||||
|
<ServiceName>{name}</ServiceName>
|
||||||
|
<Dl>
|
||||||
|
<dt>
|
||||||
|
<ImageTitle>Image:</ImageTitle> <Image>{config.image}</Image>
|
||||||
|
</dt>
|
||||||
|
</Dl>
|
||||||
|
{config.environment && config.environment.length ? (
|
||||||
|
<ServiceDivider />
|
||||||
|
) : null}
|
||||||
|
{config.environment && config.environment.length ? (
|
||||||
|
<ServiceEnvironmentTitle
|
||||||
|
expanded={environmentToggles[name]}
|
||||||
|
onClick={() => onEnvironmentToggle(name)}
|
||||||
|
>
|
||||||
|
Environment variables{' '}
|
||||||
|
<EnvironmentChevron
|
||||||
|
down={!environmentToggles[name]}
|
||||||
|
up={environmentToggles[name]}
|
||||||
|
/>
|
||||||
|
</ServiceEnvironmentTitle>
|
||||||
|
) : null}
|
||||||
|
{config.environment &&
|
||||||
|
config.environment.length &&
|
||||||
|
environmentToggles[name] ? (
|
||||||
|
<EnvironmentReview environment={config.environment} />
|
||||||
|
) : null}
|
||||||
|
</ServiceCard>
|
||||||
|
));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
{serviceList}
|
||||||
|
<ButtonsRow>
|
||||||
|
<Button type="button" onClick={onCancel} disabled={loading} secondary>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button disabled={loading} loading={loading} type="submit">
|
||||||
|
Confirm and Deploy
|
||||||
|
</Button>
|
||||||
|
</ButtonsRow>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
export default Review
|
||||||
@ -1,6 +1,6 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { Grid } from 'react-styled-flexboxgrid';
|
import { Grid, Col } from 'react-styled-flexboxgrid';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import forceArray from 'force-array';
|
import forceArray from 'force-array';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
@ -36,7 +36,9 @@ const getBreadcrumbItems = (...links) =>
|
|||||||
const NavBreadcrumb = ({ links = [] }) => (
|
const NavBreadcrumb = ({ links = [] }) => (
|
||||||
<BreadcrumbContainer>
|
<BreadcrumbContainer>
|
||||||
<Grid>
|
<Grid>
|
||||||
<Breadcrumb>{getBreadcrumbItems(...links)}</Breadcrumb>
|
<Col xs={12}>
|
||||||
|
<Breadcrumb>{getBreadcrumbItems(...links)}</Breadcrumb>
|
||||||
|
</Col>
|
||||||
</Grid>
|
</Grid>
|
||||||
</BreadcrumbContainer>
|
</BreadcrumbContainer>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -3,15 +3,25 @@ import PropTypes from 'prop-types';
|
|||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import { Img } from 'normalized-styled-components';
|
import { Img } from 'normalized-styled-components';
|
||||||
import remcalc from 'remcalc';
|
import remcalc from 'remcalc';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
|
||||||
import Logo from '@assets/triton_logo.png';
|
import Logo from '@assets/triton_logo.png';
|
||||||
import { Header, HeaderBrand, HeaderItem } from 'joyent-ui-toolkit';
|
import {
|
||||||
|
Header,
|
||||||
|
HeaderBrand,
|
||||||
|
HeaderItem,
|
||||||
|
DataCenterIcon,
|
||||||
|
UserIcon
|
||||||
|
} from 'joyent-ui-toolkit';
|
||||||
const StyledLogo = Img.extend`
|
const StyledLogo = Img.extend`
|
||||||
width: ${remcalc(87)};
|
width: ${remcalc(87)};
|
||||||
height: ${remcalc(25)};
|
height: ${remcalc(25)};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const Item = styled.span`
|
||||||
|
padding-left: 5px;
|
||||||
|
`;
|
||||||
|
|
||||||
const NavHeader = ({ datacenter, username }) => (
|
const NavHeader = ({ datacenter, username }) => (
|
||||||
<Header>
|
<Header>
|
||||||
<HeaderBrand>
|
<HeaderBrand>
|
||||||
@ -19,8 +29,14 @@ const NavHeader = ({ datacenter, username }) => (
|
|||||||
<StyledLogo src={Logo} />
|
<StyledLogo src={Logo} />
|
||||||
</Link>
|
</Link>
|
||||||
</HeaderBrand>
|
</HeaderBrand>
|
||||||
<HeaderItem>{datacenter}</HeaderItem>
|
<HeaderItem>
|
||||||
<HeaderItem>{username}</HeaderItem>
|
<DataCenterIcon />
|
||||||
|
<Item>{datacenter}</Item>
|
||||||
|
</HeaderItem>
|
||||||
|
<HeaderItem>
|
||||||
|
<UserIcon />
|
||||||
|
<Item>{username}</Item>
|
||||||
|
</HeaderItem>
|
||||||
</Header>
|
</Header>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@ -1,14 +1,25 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { graphql } from 'react-apollo';
|
||||||
|
import get from 'lodash.get';
|
||||||
|
|
||||||
import ManifestEditOrCreate from '@containers/manifest/edit-or-create';
|
import ManifestEditOrCreate from '@containers/manifest/edit-or-create';
|
||||||
import { Progress } from '@components/manifest/edit-or-create';
|
import { Progress } from '@components/manifest';
|
||||||
import { LayoutContainer } from '@components/layout';
|
import { LayoutContainer } from '@components/layout';
|
||||||
import { Title } from '@components/navigation';
|
import { Title } from '@components/navigation';
|
||||||
|
import PortalQuery from '@graphql/Portal.gql';
|
||||||
|
|
||||||
export default ({ match }) => (
|
const DeploymentGroupCreate = ({ match, dataCenter }) => (
|
||||||
<LayoutContainer>
|
<LayoutContainer>
|
||||||
<Title>Creating deployment group</Title>
|
<Title>Creating deployment group</Title>
|
||||||
<Progress stage={match.params.stage} create />
|
<Progress stage={match.params.stage} create />
|
||||||
<ManifestEditOrCreate create />
|
<ManifestEditOrCreate create dataCenter={dataCenter} />
|
||||||
</LayoutContainer>
|
</LayoutContainer>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const DeploymentGroupCreateWithData = graphql(PortalQuery, {
|
||||||
|
props: ({ data: { portal = {} } }) => ({
|
||||||
|
dataCenter: get(portal, 'datacenter.region', '')
|
||||||
|
})
|
||||||
|
})(DeploymentGroupCreate);
|
||||||
|
|
||||||
|
export default DeploymentGroupCreateWithData;
|
||||||
@ -7,7 +7,7 @@ import ManifestQuery from '@graphql/Manifest.gql';
|
|||||||
import { LayoutContainer } from '@components/layout';
|
import { LayoutContainer } from '@components/layout';
|
||||||
import { Title } from '@components/navigation';
|
import { Title } from '@components/navigation';
|
||||||
import { Loader, ErrorMessage } from '@components/messaging';
|
import { Loader, ErrorMessage } from '@components/messaging';
|
||||||
import { Environment } from '@components/manifest/edit-or-create';
|
import { Environment } from '@components/manifest';
|
||||||
|
|
||||||
const EnvironmentReadOnly = ({
|
const EnvironmentReadOnly = ({
|
||||||
files = [],
|
files = [],
|
||||||
|
|||||||
@ -21,11 +21,11 @@ import DeploymentGroupConfigQuery from '@graphql/DeploymentGroupConfig.gql';
|
|||||||
import { client } from '@state/store';
|
import { client } from '@state/store';
|
||||||
import { ErrorMessage } from '@components/messaging';
|
import { ErrorMessage } from '@components/messaging';
|
||||||
import {
|
import {
|
||||||
Name,
|
|
||||||
Manifest,
|
|
||||||
Environment,
|
Environment,
|
||||||
Review
|
Name,
|
||||||
} from '@components/manifest/edit-or-create';
|
Review,
|
||||||
|
Manifest
|
||||||
|
} from '@components/manifest';
|
||||||
|
|
||||||
const INTERPOLATE_REGEX = /\$([_a-z][_a-z0-9]*)/gi;
|
const INTERPOLATE_REGEX = /\$([_a-z][_a-z0-9]*)/gi;
|
||||||
|
|
||||||
@ -243,6 +243,7 @@ class DeploymentGroupEditOrCreate extends Component {
|
|||||||
};
|
};
|
||||||
|
|
||||||
handleNameSubmit({ name = '' }) {
|
handleNameSubmit({ name = '' }) {
|
||||||
|
console.log(name);
|
||||||
this.setState({ name }, () =>
|
this.setState({ name }, () =>
|
||||||
this.redirect({ stage: 'manifest', prog: true })
|
this.redirect({ stage: 'manifest', prog: true })
|
||||||
);
|
);
|
||||||
@ -401,9 +402,10 @@ class DeploymentGroupEditOrCreate extends Component {
|
|||||||
|
|
||||||
renderNameForm() {
|
renderNameForm() {
|
||||||
const { NameForm } = this.state;
|
const { NameForm } = this.state;
|
||||||
|
const { dataCenter } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NameForm onSubmit={this.handleNameSubmit} onCancel={this.handleCancel} />
|
<NameForm dataCenter={dataCenter} onSubmit={this.handleNameSubmit} onCancel={this.handleCancel} />
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -7,7 +7,7 @@ import ManifestQuery from '@graphql/Manifest.gql';
|
|||||||
import DeploymentGroupBySlugQuery from '@graphql/DeploymentGroupBySlug.gql';
|
import DeploymentGroupBySlugQuery from '@graphql/DeploymentGroupBySlug.gql';
|
||||||
|
|
||||||
import ManifestEditOrCreate from '@containers/manifest/edit-or-create';
|
import ManifestEditOrCreate from '@containers/manifest/edit-or-create';
|
||||||
import { Progress } from '@components/manifest/edit-or-create';
|
import { Progress } from '@components/manifest';
|
||||||
import { LayoutContainer } from '@components/layout';
|
import { LayoutContainer } from '@components/layout';
|
||||||
import { Title } from '@components/navigation';
|
import { Title } from '@components/navigation';
|
||||||
import { Loader, ErrorMessage, WarningMessage } from '@components/messaging';
|
import { Loader, ErrorMessage, WarningMessage } from '@components/messaging';
|
||||||
|
|||||||
@ -1,21 +0,0 @@
|
|||||||
/**
|
|
||||||
* @jest-environment jsdom
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React from 'react';
|
|
||||||
import renderer from 'react-test-renderer';
|
|
||||||
import 'jest-styled-components';
|
|
||||||
|
|
||||||
import MEditor from '@components/manifest/edit-or-create.js';
|
|
||||||
import { Router } from '../../mocks';
|
|
||||||
|
|
||||||
xit('renders <MEditor /> without throwing', () => {
|
|
||||||
const tree = renderer
|
|
||||||
.create(
|
|
||||||
<Router>
|
|
||||||
<MEditor />
|
|
||||||
</Router>
|
|
||||||
)
|
|
||||||
.toJSON();
|
|
||||||
expect(tree).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
@ -6,7 +6,7 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
|
|||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 {
|
.c3 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
@ -25,6 +25,15 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
|
|||||||
margin-left: -0.5rem;
|
margin-left: -0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.c2 {
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-flex: 0 0 auto;
|
||||||
|
-ms-flex: 0 0 auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.c0 {
|
.c0 {
|
||||||
border-bottom: solid 0.0625rem;
|
border-bottom: solid 0.0625rem;
|
||||||
}
|
}
|
||||||
@ -47,16 +56,148 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width:0em) {
|
||||||
|
.c2 {
|
||||||
|
-webkit-flex-basis: 100%;
|
||||||
|
-ms-flex-basis: 100%;
|
||||||
|
flex-basis: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className="c0"
|
className="c0"
|
||||||
>
|
>
|
||||||
<div
|
.c0 {
|
||||||
className="c1"
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
@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 (min-width:0em) {
|
||||||
|
.c1 {
|
||||||
|
-webkit-flex-basis: 100%;
|
||||||
|
-ms-flex-basis: 100%;
|
||||||
|
flex-basis: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="c0"
|
||||||
>
|
>
|
||||||
<div
|
.c1 {
|
||||||
className="c2"
|
box-sizing: border-box;
|
||||||
name="breadcrum"
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0 {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width:0em) {
|
||||||
|
.c0 {
|
||||||
|
-webkit-flex-basis: 100%;
|
||||||
|
-ms-flex-basis: 100%;
|
||||||
|
flex-basis: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="c0"
|
||||||
|
>
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="c0"
|
||||||
|
name="breadcrum"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|||||||
@ -6,9 +6,12 @@ import React from 'react';
|
|||||||
import renderer from 'react-test-renderer';
|
import renderer from 'react-test-renderer';
|
||||||
import 'jest-styled-components';
|
import 'jest-styled-components';
|
||||||
|
|
||||||
import ServiceListItem from '@components/services/list-item.js';
|
import ServiceListItem from '@components/services/list-item';
|
||||||
import { Router, service } from '../../mocks';
|
import { Router, service } from '../../mocks';
|
||||||
|
|
||||||
|
|
||||||
|
console.log(service);
|
||||||
|
|
||||||
it('renders <ServiceListItem /> without throwing', () => {
|
it('renders <ServiceListItem /> without throwing', () => {
|
||||||
const tree = renderer
|
const tree = renderer
|
||||||
.create(
|
.create(
|
||||||
|
|||||||
@ -49,17 +49,17 @@ exports[`renders <DeploymentGroupDelete /> without throwing 1`] = `
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c4::-moz-focus-inner,
|
.c4::-moz-focus-inner,
|
||||||
.c4[type="button"]::-moz-focus-inner,
|
.c4[type='button']::-moz-focus-inner,
|
||||||
.c4[type="reset"]::-moz-focus-inner,
|
.c4[type='reset']::-moz-focus-inner,
|
||||||
.c4[type="submit"]::-moz-focus-inner {
|
.c4[type='submit']::-moz-focus-inner {
|
||||||
border-style: none;
|
border-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c4:-moz-focusring,
|
.c4:-moz-focusring,
|
||||||
.c4[type="button"]:-moz-focusring,
|
.c4[type='button']:-moz-focusring,
|
||||||
.c4[type="reset"]:-moz-focusring,
|
.c4[type='reset']:-moz-focusring,
|
||||||
.c4[type="submit"]:-moz-focusring {
|
.c4[type='submit']:-moz-focusring {
|
||||||
outline: 0.0625rem dotted ButtonText;
|
outline: 0.0625rem dotted ButtonText;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -144,17 +144,17 @@ exports[`renders <DeploymentGroupDelete /> without throwing 1`] = `
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c9::-moz-focus-inner,
|
.c9::-moz-focus-inner,
|
||||||
.c9[type="button"]::-moz-focus-inner,
|
.c9[type='button']::-moz-focus-inner,
|
||||||
.c9[type="reset"]::-moz-focus-inner,
|
.c9[type='reset']::-moz-focus-inner,
|
||||||
.c9[type="submit"]::-moz-focus-inner {
|
.c9[type='submit']::-moz-focus-inner {
|
||||||
border-style: none;
|
border-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9:-moz-focusring,
|
.c9:-moz-focusring,
|
||||||
.c9[type="button"]:-moz-focusring,
|
.c9[type='button']:-moz-focusring,
|
||||||
.c9[type="reset"]:-moz-focusring,
|
.c9[type='reset']:-moz-focusring,
|
||||||
.c9[type="submit"]:-moz-focusring {
|
.c9[type='submit']:-moz-focusring {
|
||||||
outline: 0.0625rem dotted ButtonText;
|
outline: 0.0625rem dotted ButtonText;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -278,12 +278,392 @@ exports[`renders <DeploymentGroupDelete /> without throwing 1`] = `
|
|||||||
<div
|
<div
|
||||||
className="c0"
|
className="c0"
|
||||||
>
|
>
|
||||||
<div
|
.c3 {
|
||||||
className="c1"
|
font-family: sans-serif;
|
||||||
|
font-size: 100%;
|
||||||
|
line-height: 1.15;
|
||||||
|
margin: 0;
|
||||||
|
overflow: visible;
|
||||||
|
text-transform: none;
|
||||||
|
-webkit-appearance: button;
|
||||||
|
-moz-appearance: button;
|
||||||
|
appearance: button;
|
||||||
|
min-width: 7.5rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: inline-block;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.9375rem 1.125rem;
|
||||||
|
position: relative;
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: normal;
|
||||||
|
-webkit-letter-spacing: normal;
|
||||||
|
-moz-letter-spacing: normal;
|
||||||
|
-ms-letter-spacing: normal;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
vertical-align: middle;
|
||||||
|
touch-action: manipulation;
|
||||||
|
cursor: pointer;
|
||||||
|
color: ;
|
||||||
|
background-image: none;
|
||||||
|
background-color: ;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
border: solid 0.0625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c3::-moz-focus-inner,
|
||||||
|
.c3[type='button']::-moz-focus-inner,
|
||||||
|
.c3[type='reset']::-moz-focus-inner,
|
||||||
|
.c3[type='submit']::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c3:-moz-focusring,
|
||||||
|
.c3[type='button']:-moz-focusring,
|
||||||
|
.c3[type='reset']:-moz-focusring,
|
||||||
|
.c3[type='submit']:-moz-focusring {
|
||||||
|
outline: 0.0625rem dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c3:focus {
|
||||||
|
outline: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c3:hover {
|
||||||
|
background-color: ;
|
||||||
|
border: solid 0.0625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c3:active,
|
||||||
|
.c3:active:hover,
|
||||||
|
.c3:active:focus {
|
||||||
|
background-image: none;
|
||||||
|
outline: 0;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c3[disabled] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c3 + button {
|
||||||
|
margin-left: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c8 {
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 100%;
|
||||||
|
line-height: 1.15;
|
||||||
|
margin: 0;
|
||||||
|
overflow: visible;
|
||||||
|
text-transform: none;
|
||||||
|
-webkit-appearance: button;
|
||||||
|
-moz-appearance: button;
|
||||||
|
appearance: button;
|
||||||
|
min-width: 7.5rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: inline-block;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.9375rem 1.125rem;
|
||||||
|
position: relative;
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: normal;
|
||||||
|
-webkit-letter-spacing: normal;
|
||||||
|
-moz-letter-spacing: normal;
|
||||||
|
-ms-letter-spacing: normal;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
vertical-align: middle;
|
||||||
|
touch-action: manipulation;
|
||||||
|
cursor: pointer;
|
||||||
|
color: ;
|
||||||
|
background-image: none;
|
||||||
|
background-color: ;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
border: solid 0.0625rem;
|
||||||
|
color: ;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c8::-moz-focus-inner,
|
||||||
|
.c8[type='button']::-moz-focus-inner,
|
||||||
|
.c8[type='reset']::-moz-focus-inner,
|
||||||
|
.c8[type='submit']::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c8:-moz-focusring,
|
||||||
|
.c8[type='button']:-moz-focusring,
|
||||||
|
.c8[type='reset']:-moz-focusring,
|
||||||
|
.c8[type='submit']:-moz-focusring {
|
||||||
|
outline: 0.0625rem dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c8:focus {
|
||||||
|
outline: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c8:hover {
|
||||||
|
background-color: ;
|
||||||
|
border: solid 0.0625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c8:active,
|
||||||
|
.c8:active:hover,
|
||||||
|
.c8:active:focus {
|
||||||
|
background-image: none;
|
||||||
|
outline: 0;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c8[disabled] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c8:focus {
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c8:hover {
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c8:active,
|
||||||
|
.c8:active:hover,
|
||||||
|
.c8:active:focus {
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c8 + button {
|
||||||
|
margin-left: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c5 {
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c7 {
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c2 {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
padding: 0.75rem;
|
||||||
|
min-width: auto;
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c2:hover,
|
||||||
|
.c2:focus,
|
||||||
|
.c2:active,
|
||||||
|
.c2:active:hover,
|
||||||
|
.c2:active:focus {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0 {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 33.33%;
|
||||||
|
padding: 2.25rem 2.25rem 2.25rem 2.25rem;
|
||||||
|
background-color: ;
|
||||||
|
box-shadow: 0 0 0.375rem 0.0625rem rgba(0,0,0,0.1);
|
||||||
|
width: 28.75rem;
|
||||||
|
margin: 0 auto 0 -14.375rem;
|
||||||
|
z-index: 101;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c1 {
|
||||||
|
position: absolute;
|
||||||
|
right: 0.375rem;
|
||||||
|
top: 0.1875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c4 {
|
||||||
|
line-height: 1.25;
|
||||||
|
color: ;
|
||||||
|
margin: 0 0 0.75rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c6 {
|
||||||
|
color: ;
|
||||||
|
margin: 0.75rem 0 1.875rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="c0"
|
||||||
width={460}
|
width={460}
|
||||||
>
|
>
|
||||||
<button
|
.c2 {
|
||||||
className="c2 c3 c4"
|
font-family: sans-serif;
|
||||||
|
font-size: 100%;
|
||||||
|
line-height: 1.15;
|
||||||
|
margin: 0;
|
||||||
|
overflow: visible;
|
||||||
|
text-transform: none;
|
||||||
|
-webkit-appearance: button;
|
||||||
|
-moz-appearance: button;
|
||||||
|
appearance: button;
|
||||||
|
min-width: 7.5rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: inline-block;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.9375rem 1.125rem;
|
||||||
|
position: relative;
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: normal;
|
||||||
|
-webkit-letter-spacing: normal;
|
||||||
|
-moz-letter-spacing: normal;
|
||||||
|
-ms-letter-spacing: normal;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
vertical-align: middle;
|
||||||
|
touch-action: manipulation;
|
||||||
|
cursor: pointer;
|
||||||
|
color: ;
|
||||||
|
background-image: none;
|
||||||
|
background-color: ;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
border: solid 0.0625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c2::-moz-focus-inner,
|
||||||
|
.c2[type='button']::-moz-focus-inner,
|
||||||
|
.c2[type='reset']::-moz-focus-inner,
|
||||||
|
.c2[type='submit']::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c2:-moz-focusring,
|
||||||
|
.c2[type='button']:-moz-focusring,
|
||||||
|
.c2[type='reset']:-moz-focusring,
|
||||||
|
.c2[type='submit']:-moz-focusring {
|
||||||
|
outline: 0.0625rem dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c2:focus {
|
||||||
|
outline: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c2:hover {
|
||||||
|
background-color: ;
|
||||||
|
border: solid 0.0625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c2:active,
|
||||||
|
.c2:active:hover,
|
||||||
|
.c2:active:focus {
|
||||||
|
background-image: none;
|
||||||
|
outline: 0;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c2[disabled] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c2 + button {
|
||||||
|
margin-left: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c1 {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
padding: 0.75rem;
|
||||||
|
min-width: auto;
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c1:hover,
|
||||||
|
.c1:focus,
|
||||||
|
.c1:active,
|
||||||
|
.c1:active:hover,
|
||||||
|
.c1:active:focus {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0 {
|
||||||
|
position: absolute;
|
||||||
|
right: 0.375rem;
|
||||||
|
top: 0.1875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="c0 c1 c2"
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
@ -303,28 +683,484 @@ exports[`renders <DeploymentGroupDelete /> without throwing 1`] = `
|
|||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<div>
|
.c5 {
|
||||||
<h2
|
font-family: sans-serif;
|
||||||
className="c5 c6"
|
font-size: 100%;
|
||||||
|
line-height: 1.15;
|
||||||
|
margin: 0;
|
||||||
|
overflow: visible;
|
||||||
|
text-transform: none;
|
||||||
|
-webkit-appearance: button;
|
||||||
|
-moz-appearance: button;
|
||||||
|
appearance: button;
|
||||||
|
min-width: 7.5rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: inline-block;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.9375rem 1.125rem;
|
||||||
|
position: relative;
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: normal;
|
||||||
|
-webkit-letter-spacing: normal;
|
||||||
|
-moz-letter-spacing: normal;
|
||||||
|
-ms-letter-spacing: normal;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
vertical-align: middle;
|
||||||
|
touch-action: manipulation;
|
||||||
|
cursor: pointer;
|
||||||
|
color: ;
|
||||||
|
background-image: none;
|
||||||
|
background-color: ;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
border: solid 0.0625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c5::-moz-focus-inner,
|
||||||
|
.c5[type='button']::-moz-focus-inner,
|
||||||
|
.c5[type='reset']::-moz-focus-inner,
|
||||||
|
.c5[type='submit']::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c5:-moz-focusring,
|
||||||
|
.c5[type='button']:-moz-focusring,
|
||||||
|
.c5[type='reset']:-moz-focusring,
|
||||||
|
.c5[type='submit']:-moz-focusring {
|
||||||
|
outline: 0.0625rem dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c5:focus {
|
||||||
|
outline: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c5:hover {
|
||||||
|
background-color: ;
|
||||||
|
border: solid 0.0625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c5:active,
|
||||||
|
.c5:active:hover,
|
||||||
|
.c5:active:focus {
|
||||||
|
background-image: none;
|
||||||
|
outline: 0;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c5[disabled] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c5 + button {
|
||||||
|
margin-left: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c4 {
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 100%;
|
||||||
|
line-height: 1.15;
|
||||||
|
margin: 0;
|
||||||
|
overflow: visible;
|
||||||
|
text-transform: none;
|
||||||
|
-webkit-appearance: button;
|
||||||
|
-moz-appearance: button;
|
||||||
|
appearance: button;
|
||||||
|
min-width: 7.5rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: inline-block;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.9375rem 1.125rem;
|
||||||
|
position: relative;
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: normal;
|
||||||
|
-webkit-letter-spacing: normal;
|
||||||
|
-moz-letter-spacing: normal;
|
||||||
|
-ms-letter-spacing: normal;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
vertical-align: middle;
|
||||||
|
touch-action: manipulation;
|
||||||
|
cursor: pointer;
|
||||||
|
color: ;
|
||||||
|
background-image: none;
|
||||||
|
background-color: ;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
border: solid 0.0625rem;
|
||||||
|
color: ;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c4::-moz-focus-inner,
|
||||||
|
.c4[type='button']::-moz-focus-inner,
|
||||||
|
.c4[type='reset']::-moz-focus-inner,
|
||||||
|
.c4[type='submit']::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c4:-moz-focusring,
|
||||||
|
.c4[type='button']:-moz-focusring,
|
||||||
|
.c4[type='reset']:-moz-focusring,
|
||||||
|
.c4[type='submit']:-moz-focusring {
|
||||||
|
outline: 0.0625rem dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c4:focus {
|
||||||
|
outline: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c4:hover {
|
||||||
|
background-color: ;
|
||||||
|
border: solid 0.0625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c4:active,
|
||||||
|
.c4:active:hover,
|
||||||
|
.c4:active:focus {
|
||||||
|
background-image: none;
|
||||||
|
outline: 0;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c4[disabled] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c4:focus {
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c4:hover {
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c4:active,
|
||||||
|
.c4:active:hover,
|
||||||
|
.c4:active:focus {
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c4 + button {
|
||||||
|
margin-left: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c1 {
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c3 {
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0 {
|
||||||
|
line-height: 1.25;
|
||||||
|
color: ;
|
||||||
|
margin: 0 0 0.75rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c2 {
|
||||||
|
color: ;
|
||||||
|
margin: 0.75rem 0 1.875rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
<div>
|
||||||
|
.c1 {
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0 {
|
||||||
|
line-height: 1.25;
|
||||||
|
color: ;
|
||||||
|
margin: 0 0 0.75rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
<h2
|
||||||
|
className="c0 c1"
|
||||||
>
|
>
|
||||||
Deleting a deployment group:
|
Deleting a deployment group:
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
Wordpress Blog Example
|
Wordpress Blog Example
|
||||||
</h2>
|
</h2>
|
||||||
<p
|
.c1 {
|
||||||
className="c7 c8"
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0 {
|
||||||
|
color: ;
|
||||||
|
margin: 0.75rem 0 1.875rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
<p
|
||||||
|
className="c0 c1"
|
||||||
>
|
>
|
||||||
Deleting a deployment group will also remove all of the services and instances associated with that deployment group. Are you sure you want to continue?
|
Deleting a deployment group will also remove all of the services and instances associated with that deployment group. Are you sure you want to continue?
|
||||||
</p>
|
</p>
|
||||||
<button
|
.c0 {
|
||||||
className="c9"
|
font-family: sans-serif;
|
||||||
|
font-size: 100%;
|
||||||
|
line-height: 1.15;
|
||||||
|
margin: 0;
|
||||||
|
overflow: visible;
|
||||||
|
text-transform: none;
|
||||||
|
-webkit-appearance: button;
|
||||||
|
-moz-appearance: button;
|
||||||
|
appearance: button;
|
||||||
|
min-width: 7.5rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: inline-block;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.9375rem 1.125rem;
|
||||||
|
position: relative;
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: normal;
|
||||||
|
-webkit-letter-spacing: normal;
|
||||||
|
-moz-letter-spacing: normal;
|
||||||
|
-ms-letter-spacing: normal;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
vertical-align: middle;
|
||||||
|
touch-action: manipulation;
|
||||||
|
cursor: pointer;
|
||||||
|
color: ;
|
||||||
|
background-image: none;
|
||||||
|
background-color: ;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
border: solid 0.0625rem;
|
||||||
|
color: ;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0::-moz-focus-inner,
|
||||||
|
.c0[type='button']::-moz-focus-inner,
|
||||||
|
.c0[type='reset']::-moz-focus-inner,
|
||||||
|
.c0[type='submit']::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0:-moz-focusring,
|
||||||
|
.c0[type='button']:-moz-focusring,
|
||||||
|
.c0[type='reset']:-moz-focusring,
|
||||||
|
.c0[type='submit']:-moz-focusring {
|
||||||
|
outline: 0.0625rem dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0:focus {
|
||||||
|
outline: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0:hover {
|
||||||
|
background-color: ;
|
||||||
|
border: solid 0.0625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0:active,
|
||||||
|
.c0:active:hover,
|
||||||
|
.c0:active:focus {
|
||||||
|
background-image: none;
|
||||||
|
outline: 0;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0[disabled] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0:focus {
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0:hover {
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0:active,
|
||||||
|
.c0:active:hover,
|
||||||
|
.c0:active:focus {
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0 + button {
|
||||||
|
margin-left: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="c0"
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
<button
|
.c0 {
|
||||||
className="c4"
|
font-family: sans-serif;
|
||||||
|
font-size: 100%;
|
||||||
|
line-height: 1.15;
|
||||||
|
margin: 0;
|
||||||
|
overflow: visible;
|
||||||
|
text-transform: none;
|
||||||
|
-webkit-appearance: button;
|
||||||
|
-moz-appearance: button;
|
||||||
|
appearance: button;
|
||||||
|
min-width: 7.5rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: inline-block;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.9375rem 1.125rem;
|
||||||
|
position: relative;
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: normal;
|
||||||
|
-webkit-letter-spacing: normal;
|
||||||
|
-moz-letter-spacing: normal;
|
||||||
|
-ms-letter-spacing: normal;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
vertical-align: middle;
|
||||||
|
touch-action: manipulation;
|
||||||
|
cursor: pointer;
|
||||||
|
color: ;
|
||||||
|
background-image: none;
|
||||||
|
background-color: ;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
border: solid 0.0625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0::-moz-focus-inner,
|
||||||
|
.c0[type='button']::-moz-focus-inner,
|
||||||
|
.c0[type='reset']::-moz-focus-inner,
|
||||||
|
.c0[type='submit']::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0:-moz-focusring,
|
||||||
|
.c0[type='button']:-moz-focusring,
|
||||||
|
.c0[type='reset']:-moz-focusring,
|
||||||
|
.c0[type='submit']:-moz-focusring {
|
||||||
|
outline: 0.0625rem dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0:focus {
|
||||||
|
outline: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0:hover {
|
||||||
|
background-color: ;
|
||||||
|
border: solid 0.0625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0:active,
|
||||||
|
.c0:active:hover,
|
||||||
|
.c0:active:focus {
|
||||||
|
background-image: none;
|
||||||
|
outline: 0;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0[disabled] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0 + button {
|
||||||
|
margin-left: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="c0"
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
>
|
>
|
||||||
Delete deployment group
|
Delete deployment group
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -36,6 +36,7 @@ exports[`renders <DeploymentGroupImport /> without throwing 1`] = `
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c3 {
|
.c3 {
|
||||||
|
-webkit-fill: ;
|
||||||
fill: ;
|
fill: ;
|
||||||
stroke: ;
|
stroke: ;
|
||||||
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
|
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
|
||||||
@ -43,6 +44,7 @@ exports[`renders <DeploymentGroupImport /> without throwing 1`] = `
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c4 {
|
.c4 {
|
||||||
|
-webkit-fill: ;
|
||||||
fill: ;
|
fill: ;
|
||||||
stroke: ;
|
stroke: ;
|
||||||
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
|
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
|
||||||
@ -52,6 +54,7 @@ exports[`renders <DeploymentGroupImport /> without throwing 1`] = `
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c5 {
|
.c5 {
|
||||||
|
-webkit-fill: ;
|
||||||
fill: ;
|
fill: ;
|
||||||
stroke: ;
|
stroke: ;
|
||||||
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
|
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
|
||||||
@ -139,42 +142,199 @@ exports[`renders <DeploymentGroupImport /> without throwing 1`] = `
|
|||||||
<div
|
<div
|
||||||
className="c0"
|
className="c0"
|
||||||
>
|
>
|
||||||
<h2
|
.c0 {
|
||||||
className="c1"
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-top: 0.125rem;
|
||||||
|
-webkit-flex: 0 0 auto;
|
||||||
|
-ms-flex: 0 0 auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
-webkit-align-self: stretch;
|
||||||
|
-ms-flex-item-align: stretch;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
<h2
|
||||||
|
className="c0"
|
||||||
>
|
>
|
||||||
Importing deployment group
|
Importing deployment group
|
||||||
</h2>
|
</h2>
|
||||||
<div
|
.c1 {
|
||||||
className="c2"
|
-webkit-fill: ;
|
||||||
|
fill: ;
|
||||||
|
stroke: ;
|
||||||
|
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
|
||||||
|
animation: iCqDak 1.5s ease-out 0s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c2 {
|
||||||
|
-webkit-fill: ;
|
||||||
|
fill: ;
|
||||||
|
stroke: ;
|
||||||
|
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
|
||||||
|
animation: iCqDak 1.5s ease-out 0s infinite;
|
||||||
|
-webkit-animation-delay: 0.5s;
|
||||||
|
animation-delay: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c3 {
|
||||||
|
-webkit-fill: ;
|
||||||
|
fill: ;
|
||||||
|
stroke: ;
|
||||||
|
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
|
||||||
|
animation: iCqDak 1.5s ease-out 0s infinite;
|
||||||
|
-webkit-animation-delay: 1s;
|
||||||
|
animation-delay: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0 {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-flex-direction: column;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
-webkit-flex-wrap: nowrap;
|
||||||
|
-ms-flex-wrap: nowrap;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-align-content: center;
|
||||||
|
-ms-flex-line-pack: center;
|
||||||
|
align-content: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-flex: 1 0 auto;
|
||||||
|
-ms-flex: 1 0 auto;
|
||||||
|
flex: 1 0 auto;
|
||||||
|
-webkit-align-self: stretch;
|
||||||
|
-ms-flex-item-align: stretch;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c4 {
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
-webkit-flex: 0 0 auto;
|
||||||
|
-ms-flex: 0 0 auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
-webkit-align-self: stretch;
|
||||||
|
-ms-flex-item-align: stretch;
|
||||||
|
align-self: stretch;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="c0"
|
||||||
>
|
>
|
||||||
<svg
|
.c0 {
|
||||||
|
-webkit-fill: ;
|
||||||
|
fill: ;
|
||||||
|
stroke: ;
|
||||||
|
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
|
||||||
|
animation: iCqDak 1.5s ease-out 0s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c1 {
|
||||||
|
-webkit-fill: ;
|
||||||
|
fill: ;
|
||||||
|
stroke: ;
|
||||||
|
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
|
||||||
|
animation: iCqDak 1.5s ease-out 0s infinite;
|
||||||
|
-webkit-animation-delay: 0.5s;
|
||||||
|
animation-delay: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c2 {
|
||||||
|
-webkit-fill: ;
|
||||||
|
fill: ;
|
||||||
|
stroke: ;
|
||||||
|
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
|
||||||
|
animation: iCqDak 1.5s ease-out 0s infinite;
|
||||||
|
-webkit-animation-delay: 1s;
|
||||||
|
animation-delay: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
<svg
|
||||||
height="10"
|
height="10"
|
||||||
width="28"
|
width="28"
|
||||||
>
|
>
|
||||||
<rect
|
.c0 {
|
||||||
className="c3"
|
-webkit-fill: ;
|
||||||
|
fill: ;
|
||||||
|
stroke: ;
|
||||||
|
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
|
||||||
|
animation: iCqDak 1.5s ease-out 0s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
<rect
|
||||||
|
className="c0"
|
||||||
height="6"
|
height="6"
|
||||||
width="6"
|
width="6"
|
||||||
x="2"
|
x="2"
|
||||||
y="2"
|
y="2"
|
||||||
/>
|
/>
|
||||||
<rect
|
.c0 {
|
||||||
className="c4"
|
-webkit-fill: ;
|
||||||
|
fill: ;
|
||||||
|
stroke: ;
|
||||||
|
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
|
||||||
|
animation: iCqDak 1.5s ease-out 0s infinite;
|
||||||
|
-webkit-animation-delay: 0.5s;
|
||||||
|
animation-delay: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
<rect
|
||||||
|
className="c0"
|
||||||
height="6"
|
height="6"
|
||||||
width="6"
|
width="6"
|
||||||
x="11"
|
x="11"
|
||||||
y="2"
|
y="2"
|
||||||
/>
|
/>
|
||||||
<rect
|
.c0 {
|
||||||
className="c5"
|
-webkit-fill: ;
|
||||||
|
fill: ;
|
||||||
|
stroke: ;
|
||||||
|
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
|
||||||
|
animation: iCqDak 1.5s ease-out 0s infinite;
|
||||||
|
-webkit-animation-delay: 1s;
|
||||||
|
animation-delay: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
<rect
|
||||||
|
className="c0"
|
||||||
height="6"
|
height="6"
|
||||||
width="6"
|
width="6"
|
||||||
x="20"
|
x="20"
|
||||||
y="2"
|
y="2"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<p
|
.c0 {
|
||||||
className="c6"
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
-webkit-flex: 0 0 auto;
|
||||||
|
-ms-flex: 0 0 auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
-webkit-align-self: stretch;
|
||||||
|
-ms-flex-item-align: stretch;
|
||||||
|
align-self: stretch;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
<p
|
||||||
|
className="c0"
|
||||||
>
|
>
|
||||||
Loading...
|
Loading...
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,23 +0,0 @@
|
|||||||
/**
|
|
||||||
* @jest-environment jsdom
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React from 'react';
|
|
||||||
import renderer from 'react-test-renderer';
|
|
||||||
import 'jest-styled-components';
|
|
||||||
|
|
||||||
import DeploymentGroupEditOrCreate from '@containers/manifest/edit-or-create.js';
|
|
||||||
import { Router, Store } from '../../mocks';
|
|
||||||
|
|
||||||
it('renders <DeploymentGroupEditOrCreate /> without throwing', () => {
|
|
||||||
const tree = renderer
|
|
||||||
.create(
|
|
||||||
<Store>
|
|
||||||
<Router>
|
|
||||||
<DeploymentGroupEditOrCreate />
|
|
||||||
</Router>
|
|
||||||
</Store>
|
|
||||||
)
|
|
||||||
.toJSON();
|
|
||||||
expect(tree).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
@ -6,7 +6,7 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
|
|||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 {
|
.c3 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
@ -25,7 +25,16 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
|
|||||||
margin-left: -0.5rem;
|
margin-left: -0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c3 {
|
.c2 {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c4 {
|
||||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
@ -35,7 +44,7 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c4 {
|
.c5 {
|
||||||
border: solid;
|
border: solid;
|
||||||
border-width: 0 0.125rem 0.125rem 0;
|
border-width: 0 0.125rem 0.125rem 0;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -68,26 +77,263 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width:0em) {
|
||||||
|
.c2 {
|
||||||
|
-webkit-flex-basis: 100%;
|
||||||
|
-ms-flex-basis: 100%;
|
||||||
|
flex-basis: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className="c0"
|
className="c0"
|
||||||
>
|
>
|
||||||
<div
|
.c0 {
|
||||||
className="c1"
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c3 {
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: ;
|
||||||
|
margin: 1.25rem 0 1.125rem 0;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c4 {
|
||||||
|
border: solid;
|
||||||
|
border-width: 0 0.125rem 0.125rem 0;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.125rem;
|
||||||
|
-webkit-transform: rotate(-45deg);
|
||||||
|
-ms-transform: rotate(-45deg);
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
margin: 0.1875rem 0.625rem 0.1875rem 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@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 (min-width:0em) {
|
||||||
|
.c1 {
|
||||||
|
-webkit-flex-basis: 100%;
|
||||||
|
-ms-flex-basis: 100%;
|
||||||
|
flex-basis: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="c0"
|
||||||
>
|
>
|
||||||
<div
|
.c1 {
|
||||||
className="c2"
|
box-sizing: border-box;
|
||||||
name="breadcrum"
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0 {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c2 {
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: ;
|
||||||
|
margin: 1.25rem 0 1.125rem 0;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c3 {
|
||||||
|
border: solid;
|
||||||
|
border-width: 0 0.125rem 0.125rem 0;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.125rem;
|
||||||
|
-webkit-transform: rotate(-45deg);
|
||||||
|
-ms-transform: rotate(-45deg);
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
margin: 0.1875rem 0.625rem 0.1875rem 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width:0em) {
|
||||||
|
.c0 {
|
||||||
|
-webkit-flex-basis: 100%;
|
||||||
|
-ms-flex-basis: 100%;
|
||||||
|
flex-basis: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="c0"
|
||||||
>
|
>
|
||||||
<div>
|
.c0 {
|
||||||
<h2
|
box-sizing: border-box;
|
||||||
className="c3"
|
display: -webkit-box;
|
||||||
name="breadcrum-item"
|
display: -webkit-flex;
|
||||||
>
|
display: -ms-flexbox;
|
||||||
Dashboard
|
display: flex;
|
||||||
</h2>
|
-webkit-flex: 0 1 auto;
|
||||||
<div
|
-ms-flex: 0 1 auto;
|
||||||
className="c4"
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c1 {
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: ;
|
||||||
|
margin: 1.25rem 0 1.125rem 0;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c2 {
|
||||||
|
border: solid;
|
||||||
|
border-width: 0 0.125rem 0.125rem 0;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.125rem;
|
||||||
|
-webkit-transform: rotate(-45deg);
|
||||||
|
-ms-transform: rotate(-45deg);
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
margin: 0.1875rem 0.625rem 0.1875rem 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="c0"
|
||||||
|
name="breadcrum"
|
||||||
|
>
|
||||||
|
.c0 {
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: ;
|
||||||
|
margin: 1.25rem 0 1.125rem 0;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c1 {
|
||||||
|
border: solid;
|
||||||
|
border-width: 0 0.125rem 0.125rem 0;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.125rem;
|
||||||
|
-webkit-transform: rotate(-45deg);
|
||||||
|
-ms-transform: rotate(-45deg);
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
margin: 0.1875rem 0.625rem 0.1875rem 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
<div>
|
||||||
|
.c0 {
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: ;
|
||||||
|
margin: 1.25rem 0 1.125rem 0;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
<h2
|
||||||
|
className="c0"
|
||||||
|
name="breadcrum-item"
|
||||||
|
>
|
||||||
|
Dashboard
|
||||||
|
</h2>
|
||||||
|
.c0 {
|
||||||
|
border: solid;
|
||||||
|
border-width: 0 0.125rem 0.125rem 0;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.125rem;
|
||||||
|
-webkit-transform: rotate(-45deg);
|
||||||
|
-ms-transform: rotate(-45deg);
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
margin: 0.1875rem 0.625rem 0.1875rem 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="c0"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -49,17 +49,17 @@ exports[`renders <ServiceDelete /> without throwing 1`] = `
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c4::-moz-focus-inner,
|
.c4::-moz-focus-inner,
|
||||||
.c4[type="button"]::-moz-focus-inner,
|
.c4[type='button']::-moz-focus-inner,
|
||||||
.c4[type="reset"]::-moz-focus-inner,
|
.c4[type='reset']::-moz-focus-inner,
|
||||||
.c4[type="submit"]::-moz-focus-inner {
|
.c4[type='submit']::-moz-focus-inner {
|
||||||
border-style: none;
|
border-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c4:-moz-focusring,
|
.c4:-moz-focusring,
|
||||||
.c4[type="button"]:-moz-focusring,
|
.c4[type='button']:-moz-focusring,
|
||||||
.c4[type="reset"]:-moz-focusring,
|
.c4[type='reset']:-moz-focusring,
|
||||||
.c4[type="submit"]:-moz-focusring {
|
.c4[type='submit']:-moz-focusring {
|
||||||
outline: 0.0625rem dotted ButtonText;
|
outline: 0.0625rem dotted ButtonText;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -144,17 +144,17 @@ exports[`renders <ServiceDelete /> without throwing 1`] = `
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c9::-moz-focus-inner,
|
.c9::-moz-focus-inner,
|
||||||
.c9[type="button"]::-moz-focus-inner,
|
.c9[type='button']::-moz-focus-inner,
|
||||||
.c9[type="reset"]::-moz-focus-inner,
|
.c9[type='reset']::-moz-focus-inner,
|
||||||
.c9[type="submit"]::-moz-focus-inner {
|
.c9[type='submit']::-moz-focus-inner {
|
||||||
border-style: none;
|
border-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9:-moz-focusring,
|
.c9:-moz-focusring,
|
||||||
.c9[type="button"]:-moz-focusring,
|
.c9[type='button']:-moz-focusring,
|
||||||
.c9[type="reset"]:-moz-focusring,
|
.c9[type='reset']:-moz-focusring,
|
||||||
.c9[type="submit"]:-moz-focusring {
|
.c9[type='submit']:-moz-focusring {
|
||||||
outline: 0.0625rem dotted ButtonText;
|
outline: 0.0625rem dotted ButtonText;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -278,12 +278,392 @@ exports[`renders <ServiceDelete /> without throwing 1`] = `
|
|||||||
<div
|
<div
|
||||||
className="c0"
|
className="c0"
|
||||||
>
|
>
|
||||||
<div
|
.c3 {
|
||||||
className="c1"
|
font-family: sans-serif;
|
||||||
|
font-size: 100%;
|
||||||
|
line-height: 1.15;
|
||||||
|
margin: 0;
|
||||||
|
overflow: visible;
|
||||||
|
text-transform: none;
|
||||||
|
-webkit-appearance: button;
|
||||||
|
-moz-appearance: button;
|
||||||
|
appearance: button;
|
||||||
|
min-width: 7.5rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: inline-block;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.9375rem 1.125rem;
|
||||||
|
position: relative;
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: normal;
|
||||||
|
-webkit-letter-spacing: normal;
|
||||||
|
-moz-letter-spacing: normal;
|
||||||
|
-ms-letter-spacing: normal;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
vertical-align: middle;
|
||||||
|
touch-action: manipulation;
|
||||||
|
cursor: pointer;
|
||||||
|
color: ;
|
||||||
|
background-image: none;
|
||||||
|
background-color: ;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
border: solid 0.0625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c3::-moz-focus-inner,
|
||||||
|
.c3[type='button']::-moz-focus-inner,
|
||||||
|
.c3[type='reset']::-moz-focus-inner,
|
||||||
|
.c3[type='submit']::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c3:-moz-focusring,
|
||||||
|
.c3[type='button']:-moz-focusring,
|
||||||
|
.c3[type='reset']:-moz-focusring,
|
||||||
|
.c3[type='submit']:-moz-focusring {
|
||||||
|
outline: 0.0625rem dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c3:focus {
|
||||||
|
outline: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c3:hover {
|
||||||
|
background-color: ;
|
||||||
|
border: solid 0.0625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c3:active,
|
||||||
|
.c3:active:hover,
|
||||||
|
.c3:active:focus {
|
||||||
|
background-image: none;
|
||||||
|
outline: 0;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c3[disabled] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c3 + button {
|
||||||
|
margin-left: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c8 {
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 100%;
|
||||||
|
line-height: 1.15;
|
||||||
|
margin: 0;
|
||||||
|
overflow: visible;
|
||||||
|
text-transform: none;
|
||||||
|
-webkit-appearance: button;
|
||||||
|
-moz-appearance: button;
|
||||||
|
appearance: button;
|
||||||
|
min-width: 7.5rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: inline-block;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.9375rem 1.125rem;
|
||||||
|
position: relative;
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: normal;
|
||||||
|
-webkit-letter-spacing: normal;
|
||||||
|
-moz-letter-spacing: normal;
|
||||||
|
-ms-letter-spacing: normal;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
vertical-align: middle;
|
||||||
|
touch-action: manipulation;
|
||||||
|
cursor: pointer;
|
||||||
|
color: ;
|
||||||
|
background-image: none;
|
||||||
|
background-color: ;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
border: solid 0.0625rem;
|
||||||
|
color: ;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c8::-moz-focus-inner,
|
||||||
|
.c8[type='button']::-moz-focus-inner,
|
||||||
|
.c8[type='reset']::-moz-focus-inner,
|
||||||
|
.c8[type='submit']::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c8:-moz-focusring,
|
||||||
|
.c8[type='button']:-moz-focusring,
|
||||||
|
.c8[type='reset']:-moz-focusring,
|
||||||
|
.c8[type='submit']:-moz-focusring {
|
||||||
|
outline: 0.0625rem dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c8:focus {
|
||||||
|
outline: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c8:hover {
|
||||||
|
background-color: ;
|
||||||
|
border: solid 0.0625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c8:active,
|
||||||
|
.c8:active:hover,
|
||||||
|
.c8:active:focus {
|
||||||
|
background-image: none;
|
||||||
|
outline: 0;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c8[disabled] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c8:focus {
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c8:hover {
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c8:active,
|
||||||
|
.c8:active:hover,
|
||||||
|
.c8:active:focus {
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c8 + button {
|
||||||
|
margin-left: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c5 {
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c7 {
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c2 {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
padding: 0.75rem;
|
||||||
|
min-width: auto;
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c2:hover,
|
||||||
|
.c2:focus,
|
||||||
|
.c2:active,
|
||||||
|
.c2:active:hover,
|
||||||
|
.c2:active:focus {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0 {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 33.33%;
|
||||||
|
padding: 2.25rem 2.25rem 2.25rem 2.25rem;
|
||||||
|
background-color: ;
|
||||||
|
box-shadow: 0 0 0.375rem 0.0625rem rgba(0,0,0,0.1);
|
||||||
|
width: 28.75rem;
|
||||||
|
margin: 0 auto 0 -14.375rem;
|
||||||
|
z-index: 101;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c1 {
|
||||||
|
position: absolute;
|
||||||
|
right: 0.375rem;
|
||||||
|
top: 0.1875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c4 {
|
||||||
|
line-height: 1.25;
|
||||||
|
color: ;
|
||||||
|
margin: 0 0 0.75rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c6 {
|
||||||
|
color: ;
|
||||||
|
margin: 0.75rem 0 1.875rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="c0"
|
||||||
width={460}
|
width={460}
|
||||||
>
|
>
|
||||||
<button
|
.c2 {
|
||||||
className="c2 c3 c4"
|
font-family: sans-serif;
|
||||||
|
font-size: 100%;
|
||||||
|
line-height: 1.15;
|
||||||
|
margin: 0;
|
||||||
|
overflow: visible;
|
||||||
|
text-transform: none;
|
||||||
|
-webkit-appearance: button;
|
||||||
|
-moz-appearance: button;
|
||||||
|
appearance: button;
|
||||||
|
min-width: 7.5rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: inline-block;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.9375rem 1.125rem;
|
||||||
|
position: relative;
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: normal;
|
||||||
|
-webkit-letter-spacing: normal;
|
||||||
|
-moz-letter-spacing: normal;
|
||||||
|
-ms-letter-spacing: normal;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
vertical-align: middle;
|
||||||
|
touch-action: manipulation;
|
||||||
|
cursor: pointer;
|
||||||
|
color: ;
|
||||||
|
background-image: none;
|
||||||
|
background-color: ;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
border: solid 0.0625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c2::-moz-focus-inner,
|
||||||
|
.c2[type='button']::-moz-focus-inner,
|
||||||
|
.c2[type='reset']::-moz-focus-inner,
|
||||||
|
.c2[type='submit']::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c2:-moz-focusring,
|
||||||
|
.c2[type='button']:-moz-focusring,
|
||||||
|
.c2[type='reset']:-moz-focusring,
|
||||||
|
.c2[type='submit']:-moz-focusring {
|
||||||
|
outline: 0.0625rem dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c2:focus {
|
||||||
|
outline: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c2:hover {
|
||||||
|
background-color: ;
|
||||||
|
border: solid 0.0625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c2:active,
|
||||||
|
.c2:active:hover,
|
||||||
|
.c2:active:focus {
|
||||||
|
background-image: none;
|
||||||
|
outline: 0;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c2[disabled] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c2 + button {
|
||||||
|
margin-left: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c1 {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
padding: 0.75rem;
|
||||||
|
min-width: auto;
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c1:hover,
|
||||||
|
.c1:focus,
|
||||||
|
.c1:active,
|
||||||
|
.c1:active:hover,
|
||||||
|
.c1:active:focus {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0 {
|
||||||
|
position: absolute;
|
||||||
|
right: 0.375rem;
|
||||||
|
top: 0.1875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="c0 c1 c2"
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
@ -303,28 +683,484 @@ exports[`renders <ServiceDelete /> without throwing 1`] = `
|
|||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<div>
|
.c5 {
|
||||||
<h2
|
font-family: sans-serif;
|
||||||
className="c5 c6"
|
font-size: 100%;
|
||||||
|
line-height: 1.15;
|
||||||
|
margin: 0;
|
||||||
|
overflow: visible;
|
||||||
|
text-transform: none;
|
||||||
|
-webkit-appearance: button;
|
||||||
|
-moz-appearance: button;
|
||||||
|
appearance: button;
|
||||||
|
min-width: 7.5rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: inline-block;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.9375rem 1.125rem;
|
||||||
|
position: relative;
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: normal;
|
||||||
|
-webkit-letter-spacing: normal;
|
||||||
|
-moz-letter-spacing: normal;
|
||||||
|
-ms-letter-spacing: normal;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
vertical-align: middle;
|
||||||
|
touch-action: manipulation;
|
||||||
|
cursor: pointer;
|
||||||
|
color: ;
|
||||||
|
background-image: none;
|
||||||
|
background-color: ;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
border: solid 0.0625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c5::-moz-focus-inner,
|
||||||
|
.c5[type='button']::-moz-focus-inner,
|
||||||
|
.c5[type='reset']::-moz-focus-inner,
|
||||||
|
.c5[type='submit']::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c5:-moz-focusring,
|
||||||
|
.c5[type='button']:-moz-focusring,
|
||||||
|
.c5[type='reset']:-moz-focusring,
|
||||||
|
.c5[type='submit']:-moz-focusring {
|
||||||
|
outline: 0.0625rem dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c5:focus {
|
||||||
|
outline: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c5:hover {
|
||||||
|
background-color: ;
|
||||||
|
border: solid 0.0625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c5:active,
|
||||||
|
.c5:active:hover,
|
||||||
|
.c5:active:focus {
|
||||||
|
background-image: none;
|
||||||
|
outline: 0;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c5[disabled] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c5 + button {
|
||||||
|
margin-left: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c4 {
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 100%;
|
||||||
|
line-height: 1.15;
|
||||||
|
margin: 0;
|
||||||
|
overflow: visible;
|
||||||
|
text-transform: none;
|
||||||
|
-webkit-appearance: button;
|
||||||
|
-moz-appearance: button;
|
||||||
|
appearance: button;
|
||||||
|
min-width: 7.5rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: inline-block;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.9375rem 1.125rem;
|
||||||
|
position: relative;
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: normal;
|
||||||
|
-webkit-letter-spacing: normal;
|
||||||
|
-moz-letter-spacing: normal;
|
||||||
|
-ms-letter-spacing: normal;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
vertical-align: middle;
|
||||||
|
touch-action: manipulation;
|
||||||
|
cursor: pointer;
|
||||||
|
color: ;
|
||||||
|
background-image: none;
|
||||||
|
background-color: ;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
border: solid 0.0625rem;
|
||||||
|
color: ;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c4::-moz-focus-inner,
|
||||||
|
.c4[type='button']::-moz-focus-inner,
|
||||||
|
.c4[type='reset']::-moz-focus-inner,
|
||||||
|
.c4[type='submit']::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c4:-moz-focusring,
|
||||||
|
.c4[type='button']:-moz-focusring,
|
||||||
|
.c4[type='reset']:-moz-focusring,
|
||||||
|
.c4[type='submit']:-moz-focusring {
|
||||||
|
outline: 0.0625rem dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c4:focus {
|
||||||
|
outline: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c4:hover {
|
||||||
|
background-color: ;
|
||||||
|
border: solid 0.0625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c4:active,
|
||||||
|
.c4:active:hover,
|
||||||
|
.c4:active:focus {
|
||||||
|
background-image: none;
|
||||||
|
outline: 0;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c4[disabled] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c4:focus {
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c4:hover {
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c4:active,
|
||||||
|
.c4:active:hover,
|
||||||
|
.c4:active:focus {
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c4 + button {
|
||||||
|
margin-left: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c1 {
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c3 {
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0 {
|
||||||
|
line-height: 1.25;
|
||||||
|
color: ;
|
||||||
|
margin: 0 0 0.75rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c2 {
|
||||||
|
color: ;
|
||||||
|
margin: 0.75rem 0 1.875rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
<div>
|
||||||
|
.c1 {
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0 {
|
||||||
|
line-height: 1.25;
|
||||||
|
color: ;
|
||||||
|
margin: 0 0 0.75rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
<h2
|
||||||
|
className="c0 c1"
|
||||||
>
|
>
|
||||||
Deleting a service:
|
Deleting a service:
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
Nginx
|
Nginx
|
||||||
</h2>
|
</h2>
|
||||||
<p
|
.c1 {
|
||||||
className="c7 c8"
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0 {
|
||||||
|
color: ;
|
||||||
|
margin: 0.75rem 0 1.875rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
<p
|
||||||
|
className="c0 c1"
|
||||||
>
|
>
|
||||||
Deleting a service can lead to irreversible loss of data and failures in your application. Are you sure you want to continue?
|
Deleting a service can lead to irreversible loss of data and failures in your application. Are you sure you want to continue?
|
||||||
</p>
|
</p>
|
||||||
<button
|
.c0 {
|
||||||
className="c9"
|
font-family: sans-serif;
|
||||||
|
font-size: 100%;
|
||||||
|
line-height: 1.15;
|
||||||
|
margin: 0;
|
||||||
|
overflow: visible;
|
||||||
|
text-transform: none;
|
||||||
|
-webkit-appearance: button;
|
||||||
|
-moz-appearance: button;
|
||||||
|
appearance: button;
|
||||||
|
min-width: 7.5rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: inline-block;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.9375rem 1.125rem;
|
||||||
|
position: relative;
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: normal;
|
||||||
|
-webkit-letter-spacing: normal;
|
||||||
|
-moz-letter-spacing: normal;
|
||||||
|
-ms-letter-spacing: normal;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
vertical-align: middle;
|
||||||
|
touch-action: manipulation;
|
||||||
|
cursor: pointer;
|
||||||
|
color: ;
|
||||||
|
background-image: none;
|
||||||
|
background-color: ;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
border: solid 0.0625rem;
|
||||||
|
color: ;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0::-moz-focus-inner,
|
||||||
|
.c0[type='button']::-moz-focus-inner,
|
||||||
|
.c0[type='reset']::-moz-focus-inner,
|
||||||
|
.c0[type='submit']::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0:-moz-focusring,
|
||||||
|
.c0[type='button']:-moz-focusring,
|
||||||
|
.c0[type='reset']:-moz-focusring,
|
||||||
|
.c0[type='submit']:-moz-focusring {
|
||||||
|
outline: 0.0625rem dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0:focus {
|
||||||
|
outline: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0:hover {
|
||||||
|
background-color: ;
|
||||||
|
border: solid 0.0625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0:active,
|
||||||
|
.c0:active:hover,
|
||||||
|
.c0:active:focus {
|
||||||
|
background-image: none;
|
||||||
|
outline: 0;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0[disabled] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0:focus {
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0:hover {
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0:active,
|
||||||
|
.c0:active:hover,
|
||||||
|
.c0:active:focus {
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0 + button {
|
||||||
|
margin-left: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="c0"
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
<button
|
.c0 {
|
||||||
className="c4"
|
font-family: sans-serif;
|
||||||
|
font-size: 100%;
|
||||||
|
line-height: 1.15;
|
||||||
|
margin: 0;
|
||||||
|
overflow: visible;
|
||||||
|
text-transform: none;
|
||||||
|
-webkit-appearance: button;
|
||||||
|
-moz-appearance: button;
|
||||||
|
appearance: button;
|
||||||
|
min-width: 7.5rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: inline-block;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.9375rem 1.125rem;
|
||||||
|
position: relative;
|
||||||
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: normal;
|
||||||
|
-webkit-letter-spacing: normal;
|
||||||
|
-moz-letter-spacing: normal;
|
||||||
|
-ms-letter-spacing: normal;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
vertical-align: middle;
|
||||||
|
touch-action: manipulation;
|
||||||
|
cursor: pointer;
|
||||||
|
color: ;
|
||||||
|
background-image: none;
|
||||||
|
background-color: ;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
border: solid 0.0625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0::-moz-focus-inner,
|
||||||
|
.c0[type='button']::-moz-focus-inner,
|
||||||
|
.c0[type='reset']::-moz-focus-inner,
|
||||||
|
.c0[type='submit']::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0:-moz-focusring,
|
||||||
|
.c0[type='button']:-moz-focusring,
|
||||||
|
.c0[type='reset']:-moz-focusring,
|
||||||
|
.c0[type='submit']:-moz-focusring {
|
||||||
|
outline: 0.0625rem dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0:focus {
|
||||||
|
outline: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0:hover {
|
||||||
|
background-color: ;
|
||||||
|
border: solid 0.0625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0:active,
|
||||||
|
.c0:active:hover,
|
||||||
|
.c0:active:focus {
|
||||||
|
background-image: none;
|
||||||
|
outline: 0;
|
||||||
|
background-color: ;
|
||||||
|
border-color: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0[disabled] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c0 + button {
|
||||||
|
margin-left: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="c0"
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
>
|
>
|
||||||
Delete service
|
Delete service
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -19,6 +19,7 @@
|
|||||||
"test": "echo 0 `# bup && NODE_ENV=test jest --coverage`",
|
"test": "echo 0 `# bup && NODE_ENV=test jest --coverage`",
|
||||||
"test-ci": "echo 0 `# NODE_ENV=test JEST_JUNIT_OUTPUT=$CIRCLE_TEST_REPORTS/test/manifest-editor.xml jest --coverage --coverageDirectory=$CIRCLE_ARTIFACTS/manifest-editor --testResultsProcessor=$(node -e \"console.log(require.resolve('jest-junit'))\")`",
|
"test-ci": "echo 0 `# NODE_ENV=test JEST_JUNIT_OUTPUT=$CIRCLE_TEST_REPORTS/test/manifest-editor.xml jest --coverage --coverageDirectory=$CIRCLE_ARTIFACTS/manifest-editor --testResultsProcessor=$(node -e \"console.log(require.resolve('jest-junit'))\")`",
|
||||||
"build": "bup",
|
"build": "bup",
|
||||||
|
"postinstall": "bup",
|
||||||
"prepublish": "redrun build"
|
"prepublish": "redrun build"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
@ -33,7 +34,7 @@
|
|||||||
"jest": "^20.0.4",
|
"jest": "^20.0.4",
|
||||||
"react": "^15.6.1",
|
"react": "^15.6.1",
|
||||||
"react-test-renderer": "^15.6.1",
|
"react-test-renderer": "^15.6.1",
|
||||||
"redrun": "^5.9.17"
|
"redrun": "^5.9.16"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": "*"
|
"react": "*"
|
||||||
|
|||||||
@ -1,3 +1,2 @@
|
|||||||
.nyc_output
|
.nyc_output
|
||||||
coverage
|
coverage
|
||||||
dist
|
|
||||||
@ -3,6 +3,18 @@
|
|||||||
All notable changes to this project will be documented in this file.
|
All notable changes to this project will be documented in this file.
|
||||||
See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
||||||
|
|
||||||
|
<a name="1.0.8"></a>
|
||||||
|
## 1.0.8 (2017-05-26)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<a name="1.0.6"></a>
|
||||||
|
## 1.0.6 (2017-05-26)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<a name="1.0.5"></a>
|
<a name="1.0.5"></a>
|
||||||
## 1.0.5 (2017-05-25)
|
## 1.0.5 (2017-05-25)
|
||||||
|
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
# remcalc
|
# remcalc
|
||||||
|
|
||||||
[](https://opensource.org/licenses/MPL-2.0)
|
[](https://opensource.org/licenses/MPL-2.0)
|
||||||
[](https://npmjs.com/package/remcalc)
|
[](https://npmjs.com/package/remcalc)
|
||||||
[](https://github.com/RichardLitt/standard-readme)
|
[](https://github.com/RichardLitt/standard-readme)
|
||||||
|
|
||||||
Calculate the `rem`'s from `px` values.
|
Calculate the `rem`'s from `px` values.
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,2 @@
|
|||||||
.nyc_output
|
.nyc_output
|
||||||
coverage
|
coverage
|
||||||
dist
|
|
||||||
@ -3,6 +3,18 @@
|
|||||||
All notable changes to this project will be documented in this file.
|
All notable changes to this project will be documented in this file.
|
||||||
See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
||||||
|
|
||||||
|
<a name="1.0.8"></a>
|
||||||
|
## 1.0.8 (2017-05-26)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<a name="1.0.6"></a>
|
||||||
|
## 1.0.6 (2017-05-26)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<a name="1.0.5"></a>
|
<a name="1.0.5"></a>
|
||||||
## 1.0.5 (2017-05-25)
|
## 1.0.5 (2017-05-25)
|
||||||
|
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
# rnd-id
|
# rnd-id
|
||||||
|
|
||||||
[](https://opensource.org/licenses/MPL-2.0)
|
[](https://opensource.org/licenses/MPL-2.0)
|
||||||
[](https://npmjs.com/package/rnd-id)
|
[](https://npmjs.com/package/rnd-id)
|
||||||
[](https://github.com/RichardLitt/standard-readme)
|
[](https://github.com/RichardLitt/standard-readme)
|
||||||
|
|
||||||
Generate a random alphabetical string.
|
Generate a random alphabetical string.
|
||||||
|
|
||||||
|
|||||||
@ -24,14 +24,14 @@
|
|||||||
"watch": "redrun copy-fonts && redrun -p compile-watch:*",
|
"watch": "redrun copy-fonts && redrun -p compile-watch:*",
|
||||||
"styleguide:build": "cross-env NODE_ENV=production styleguidist build",
|
"styleguide:build": "cross-env NODE_ENV=production styleguidist build",
|
||||||
"styleguide": "cross-env NODE_ENV=development styleguidist server",
|
"styleguide": "cross-env NODE_ENV=development styleguidist server",
|
||||||
"prepublish": "redrun -s copy-fonts compile"
|
"postinstall": "redrun -s copy-fonts compile"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"babel-cli": "^6.26.0",
|
"babel-cli": "^6.26.0",
|
||||||
"babel-generator": "^6.26.0",
|
"babel-generator": "^6.26.0",
|
||||||
"babel-helpers": "^6.24.1",
|
"babel-helpers": "^6.24.1",
|
||||||
"babel-plugin-inline-react-svg": "^0.4.0",
|
"babel-plugin-inline-react-svg": "^0.4.0",
|
||||||
"babel-plugin-styled-components": "^1.2.0",
|
"babel-plugin-styled-components": "^1.1.7",
|
||||||
"babel-preset-joyent-portal": "^2.0.0",
|
"babel-preset-joyent-portal": "^2.0.0",
|
||||||
"babel-template": "^6.26.0",
|
"babel-template": "^6.26.0",
|
||||||
"camel-case": "^3.0.0",
|
"camel-case": "^3.0.0",
|
||||||
@ -44,11 +44,11 @@
|
|||||||
"lodash.isequalwith": "^4.4.0",
|
"lodash.isequalwith": "^4.4.0",
|
||||||
"lodash.isstring": "^4.0.1",
|
"lodash.isstring": "^4.0.1",
|
||||||
"normalized-styled-components": "^1.0.9",
|
"normalized-styled-components": "^1.0.9",
|
||||||
"polished": "^1.7.0",
|
"polished": "^1.6.1",
|
||||||
"prop-types": "^15.5.10",
|
"prop-types": "^15.5.10",
|
||||||
"react-broadcast": "^0.1.2",
|
"react-broadcast": "^0.1.2",
|
||||||
"react-styled-flexboxgrid": "^2.0.3",
|
"react-styled-flexboxgrid": "^2.0.3",
|
||||||
"redrun": "^5.9.17",
|
"redrun": "^5.9.16",
|
||||||
"reduce-css-calc": "^2.0.5",
|
"reduce-css-calc": "^2.0.5",
|
||||||
"remcalc": "^1.0.8",
|
"remcalc": "^1.0.8",
|
||||||
"rnd-id": "^1.0.8",
|
"rnd-id": "^1.0.8",
|
||||||
@ -59,7 +59,7 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"csso": "^3.1.1",
|
"csso": "^3.1.1",
|
||||||
"eslint": "^4.5.0",
|
"eslint": "^4.5.0",
|
||||||
"eslint-config-joyent-portal": "3.0.0",
|
"eslint-config-joyent-portal": "2.0.0",
|
||||||
"jest": "^20.0.4",
|
"jest": "^20.0.4",
|
||||||
"jest-diff": "^20.0.3",
|
"jest-diff": "^20.0.3",
|
||||||
"jest-matcher-utils": "^20.0.3",
|
"jest-matcher-utils": "^20.0.3",
|
||||||
@ -67,13 +67,13 @@
|
|||||||
"jest-styled-components": "^4.4.1",
|
"jest-styled-components": "^4.4.1",
|
||||||
"jsesc": "^2.5.1",
|
"jsesc": "^2.5.1",
|
||||||
"react": "^15.6.1",
|
"react": "^15.6.1",
|
||||||
"react-docgen": "ramitos/react-docgen#7a687c0",
|
"react-docgen": "^2.17.0",
|
||||||
"react-docgen-displayname-handler": "^1.0.0",
|
"react-docgen-displayname-handler": "^1.0.0",
|
||||||
"react-dom": "^15.6.1",
|
"react-dom": "^15.6.1",
|
||||||
"react-redux": "^5.0.6",
|
"react-redux": "^5.0.6",
|
||||||
"react-router-dom": "^4.1.2",
|
"react-router-dom": "^4.1.2",
|
||||||
"react-scripts": "^1.0.12",
|
"react-scripts": "^1.0.12",
|
||||||
"react-styleguidist": "ramitos/react-styleguidist#fb55769",
|
"react-styleguidist": "^6.0.20",
|
||||||
"react-test-renderer": "^15.6.1",
|
"react-test-renderer": "^15.6.1",
|
||||||
"redux": "^3.7.2",
|
"redux": "^3.7.2",
|
||||||
"redux-form": "^7.0.3",
|
"redux-form": "^7.0.3",
|
||||||
@ -81,7 +81,7 @@
|
|||||||
"stylelint": "^8.0.0",
|
"stylelint": "^8.0.0",
|
||||||
"stylelint-config-primer": "^2.0.1",
|
"stylelint-config-primer": "^2.0.1",
|
||||||
"stylelint-config-standard": "^17.0.0",
|
"stylelint-config-standard": "^17.0.0",
|
||||||
"stylelint-processor-styled-components": "styled-components/stylelint-processor-styled-components#2685933",
|
"stylelint-processor-styled-components": "styled-components/stylelint-processor-styled-components#2a33b5f",
|
||||||
"svgo": "^0.7.2",
|
"svgo": "^0.7.2",
|
||||||
"tinycolor2": "^1.4.1",
|
"tinycolor2": "^1.4.1",
|
||||||
"title-case": "^2.1.1",
|
"title-case": "^2.1.1",
|
||||||
|
|||||||
@ -20,6 +20,7 @@ const {
|
|||||||
</CardMeta>
|
</CardMeta>
|
||||||
<CardOutlet>Outlet</CardOutlet>
|
<CardOutlet>Outlet</CardOutlet>
|
||||||
</CardView>
|
</CardView>
|
||||||
|
<CardOptions />
|
||||||
</Card>
|
</Card>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -45,7 +46,9 @@ const {
|
|||||||
<CardSubTitle>Subtitle</CardSubTitle>
|
<CardSubTitle>Subtitle</CardSubTitle>
|
||||||
<CardDescription>Description</CardDescription>
|
<CardDescription>Description</CardDescription>
|
||||||
</CardMeta>
|
</CardMeta>
|
||||||
|
<CardOutlet>Outlet</CardOutlet>
|
||||||
</CardView>
|
</CardView>
|
||||||
|
<CardOptions />
|
||||||
</Card>
|
</Card>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@ -1,9 +1,8 @@
|
|||||||
import React from 'react';
|
|
||||||
import is from 'styled-is';
|
import is from 'styled-is';
|
||||||
import typography from '../typography';
|
import typography from '../typography';
|
||||||
import P from '../text/p';
|
import P from '../text/p';
|
||||||
|
|
||||||
const Chevron = P.extend`
|
export default P.extend`
|
||||||
${typography.fontFamily};
|
${typography.fontFamily};
|
||||||
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -25,10 +24,3 @@ const Chevron = P.extend`
|
|||||||
content: '\\003e';
|
content: '\\003e';
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
/**
|
|
||||||
* @example ./usage.md
|
|
||||||
*/
|
|
||||||
export default ({ children, ...rest }) => (
|
|
||||||
<Chevron {...rest}>{children}</Chevron>
|
|
||||||
);
|
|
||||||
|
|||||||
@ -1,15 +0,0 @@
|
|||||||
```
|
|
||||||
<Chevron />
|
|
||||||
```
|
|
||||||
|
|
||||||
```
|
|
||||||
<Chevron up />
|
|
||||||
```
|
|
||||||
|
|
||||||
```
|
|
||||||
<Chevron down />
|
|
||||||
```
|
|
||||||
|
|
||||||
```
|
|
||||||
<Chevron left />
|
|
||||||
```
|
|
||||||
@ -7,10 +7,6 @@ import PropTypes from 'prop-types';
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
const StyledLabel = Label.extend`
|
const StyledLabel = Label.extend`
|
||||||
${breakpoints.medium`
|
|
||||||
text-align: right;
|
|
||||||
`};
|
|
||||||
|
|
||||||
${is('right')`
|
${is('right')`
|
||||||
float: right;
|
float: right;
|
||||||
`};
|
`};
|
||||||
|
|||||||
8
packages/ui-toolkit/src/icons/data-center.js
Normal file
8
packages/ui-toolkit/src/icons/data-center.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import Baseline from '../baseline';
|
||||||
|
import Basealign from '../basealign';
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import DataCenterIcon from './svg/icon_data_center.svg';
|
||||||
|
|
||||||
|
export default Baseline(Basealign(DataCenterIcon));
|
||||||
@ -7,3 +7,5 @@ export { default as InstancesIcon } from './instances';
|
|||||||
export { default as HealthyIcon } from './healthy';
|
export { default as HealthyIcon } from './healthy';
|
||||||
export { default as UnhealthyIcon } from './unhealthy';
|
export { default as UnhealthyIcon } from './unhealthy';
|
||||||
export { default as BinIcon } from './bin';
|
export { default as BinIcon } from './bin';
|
||||||
|
export { default as UserIcon } from './user';
|
||||||
|
export { default as DataCenterIcon } from './data-center';
|
||||||
|
|||||||
8
packages/ui-toolkit/src/icons/user.js
Normal file
8
packages/ui-toolkit/src/icons/user.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import Baseline from '../baseline';
|
||||||
|
import Basealign from '../basealign';
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import UserIcon from './svg/icon_user.svg';
|
||||||
|
|
||||||
|
export default Baseline(Basealign(UserIcon));
|
||||||
@ -111,7 +111,9 @@ export {
|
|||||||
InstancesIcon,
|
InstancesIcon,
|
||||||
HealthyIcon,
|
HealthyIcon,
|
||||||
UnhealthyIcon,
|
UnhealthyIcon,
|
||||||
BinIcon
|
BinIcon,
|
||||||
|
UserIcon,
|
||||||
|
DataCenterIcon
|
||||||
} from './icons';
|
} from './icons';
|
||||||
|
|
||||||
export { MetricGraph } from './metrics';
|
export { MetricGraph } from './metrics';
|
||||||
|
|||||||
@ -10,6 +10,8 @@ const Label = styled.label`
|
|||||||
font-size: ${remcalc(15)};
|
font-size: ${remcalc(15)};
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-stretch: normal;
|
font-stretch: normal;
|
||||||
|
font-weight: bold;
|
||||||
|
display: block;
|
||||||
color: ${props => props.theme.secondary};
|
color: ${props => props.theme.secondary};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
const webpackConfig = require('react-scripts/config/webpack.config.dev.js');
|
const webpackConfig = require('react-scripts/config/webpack.config.dev.js');
|
||||||
const { defaultHandlers } = require('react-docgen');
|
const { defaultHandlers } = require('react-docgen');
|
||||||
const dnHandler = require('react-docgen-displayname-handler');
|
const dnHandler = require('react-docgen-displayname-handler');
|
||||||
// const snapguidist = require('snapguidist');
|
const snapguidist = require('snapguidist');
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
|
|
||||||
module.exports = {
|
module.exports = snapguidist({
|
||||||
webpackConfig: Object.assign(webpackConfig, {
|
webpackConfig: Object.assign(webpackConfig, {
|
||||||
resolve: Object.assign(webpackConfig.resolve, {
|
resolve: Object.assign(webpackConfig.resolve, {
|
||||||
alias: Object.assign(webpackConfig.resolve.alias, {
|
alias: Object.assign(webpackConfig.resolve.alias, {
|
||||||
@ -56,7 +56,6 @@ module.exports = {
|
|||||||
'src/button/index.js',
|
'src/button/index.js',
|
||||||
'src/breadcrumb/index.js',
|
'src/breadcrumb/index.js',
|
||||||
'src/card/card.js',
|
'src/card/card.js',
|
||||||
'src/chevron/index.js',
|
|
||||||
'src/form/input.js',
|
'src/form/input.js',
|
||||||
'src/form/number-input.js',
|
'src/form/number-input.js',
|
||||||
'src/form/checkbox.js',
|
'src/form/checkbox.js',
|
||||||
@ -84,4 +83,4 @@ module.exports = {
|
|||||||
],
|
],
|
||||||
handlers: componentPath =>
|
handlers: componentPath =>
|
||||||
defaultHandlers.concat(dnHandler.createDisplayNameHandler(componentPath))
|
defaultHandlers.concat(dnHandler.createDisplayNameHandler(componentPath))
|
||||||
};
|
});
|
||||||
|
|||||||
@ -1,3 +1,2 @@
|
|||||||
.nyc_output
|
.nyc_output
|
||||||
coverage
|
coverage
|
||||||
dist
|
|
||||||
@ -3,6 +3,18 @@
|
|||||||
All notable changes to this project will be documented in this file.
|
All notable changes to this project will be documented in this file.
|
||||||
See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
||||||
|
|
||||||
|
<a name="1.0.8"></a>
|
||||||
|
## 1.0.8 (2017-05-26)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<a name="1.0.6"></a>
|
||||||
|
## 1.0.6 (2017-05-26)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<a name="1.0.5"></a>
|
<a name="1.0.5"></a>
|
||||||
## 1.0.5 (2017-05-25)
|
## 1.0.5 (2017-05-25)
|
||||||
|
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
# unitcalc
|
# unitcalc
|
||||||
|
|
||||||
[](https://opensource.org/licenses/MPL-2.0)
|
[](https://opensource.org/licenses/MPL-2.0)
|
||||||
[](https://npmjs.com/package/unitcalc)
|
[](https://npmjs.com/package/unitcalc)
|
||||||
[](https://github.com/RichardLitt/standard-readme)
|
[](https://github.com/RichardLitt/standard-readme)
|
||||||
|
|
||||||
Calculate the `rem`'s from unit values.
|
Calculate the `rem`'s from unit values.
|
||||||
|
|
||||||
|
|||||||
@ -14,35 +14,23 @@
|
|||||||
"unit"
|
"unit"
|
||||||
],
|
],
|
||||||
"repository": "github:yldio/joyent-portal",
|
"repository": "github:yldio/joyent-portal",
|
||||||
"main": "dist/unitcalc.umd.js",
|
"main": "src/index.js",
|
||||||
"jsnext:main": "dist/unitcalc.es.js",
|
|
||||||
"module": "dist/unitcalc.es.js",
|
|
||||||
"entry": "src/index.js",
|
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"lint": "eslint . --fix",
|
"lint": "eslint . --fix --format=tap",
|
||||||
"lint-ci": "eslint . --format junit --output-file $CIRCLE_TEST_REPORTS/lint/unitcalc.xml",
|
"test": "cross-env NODE_ENV=test nyc --reporter=lcov --reporter=text ava"
|
||||||
"test": "bup && cross-env NODE_ENV=test nyc --reporter=lcov --reporter=text ava",
|
|
||||||
"test-ci": "cross-env NODE_ENV=test nyc --report-dir=$CIRCLE_ARTIFACTS/unitcalc --reporter=lcov --reporter=text ava --tap | tap-xunit > $CIRCLE_TEST_REPORTS/test/unitcalc.xml",
|
|
||||||
"build": "bup",
|
|
||||||
"prepublish": "bup"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"lodash.flatten": "^4.4.0",
|
"lodash.flatten": "^4.4.0",
|
||||||
"remcalc": "^1.0.8"
|
"remcalc": "^1.0.8"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"ava": "^0.22.0",
|
"ava": "0.19.1",
|
||||||
"babel-plugin-istanbul": "^4.1.4",
|
"babel-plugin-istanbul": "^4.1.3",
|
||||||
"babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
|
"babel-register": "^6.24.1",
|
||||||
"babel-plugin-transform-es2015-parameters": "^6.24.1",
|
"cross-env": "^5.0.0",
|
||||||
"babel-plugin-transform-es2015-spread": "^6.22.0",
|
"eslint": "^3.19.0",
|
||||||
"babel-register": "^6.26.0",
|
"eslint-config-joyent-portal": "^1.0.3",
|
||||||
"bup": "^1.0.9",
|
"nyc": "^10.3.2"
|
||||||
"cross-env": "^5.0.5",
|
|
||||||
"eslint": "^4.5.0",
|
|
||||||
"eslint-config-joyent-portal": "3.0.0",
|
|
||||||
"nyc": "^11.1.0",
|
|
||||||
"tap-xunit": "^1.7.0"
|
|
||||||
},
|
},
|
||||||
"nyc": {
|
"nyc": {
|
||||||
"sourceMap": false,
|
"sourceMap": false,
|
||||||
@ -50,20 +38,19 @@
|
|||||||
},
|
},
|
||||||
"babel": {
|
"babel": {
|
||||||
"sourceMaps": "inline",
|
"sourceMaps": "inline",
|
||||||
"plugins": [
|
|
||||||
"transform-es2015-parameters",
|
|
||||||
"transform-es2015-arrow-functions",
|
|
||||||
"transform-es2015-spread"
|
|
||||||
],
|
|
||||||
"env": {
|
"env": {
|
||||||
"test": {
|
"test": {
|
||||||
"plugins": ["istanbul"]
|
"plugins": [
|
||||||
|
"istanbul"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"ava": {
|
"ava": {
|
||||||
"tap": true,
|
"tap": true,
|
||||||
"require": ["babel-register"],
|
"require": [
|
||||||
|
"babel-register"
|
||||||
|
],
|
||||||
"babel": "inherit"
|
"babel": "inherit"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user