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
@ -18,4 +18,4 @@
|
||||
"eslint": "^4.5.0",
|
||||
"eslint-config-joyent-portal": "3.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -72,7 +72,7 @@
|
||||
"cross-env": "^5.0.5",
|
||||
"eslint": "^4.5.0",
|
||||
"eslint-config-joyent-portal": "3.0.0",
|
||||
"jest": "^20.0.4",
|
||||
"jest": "^21.0.1",
|
||||
"jest-alias-preprocessor": "^1.1.1",
|
||||
"jest-cli": "^20.0.4",
|
||||
"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 styled from 'styled-components';
|
||||
import { Grid } from 'react-styled-flexboxgrid';
|
||||
import { Grid, Col } from 'react-styled-flexboxgrid';
|
||||
import { Link } from 'react-router-dom';
|
||||
import forceArray from 'force-array';
|
||||
import PropTypes from 'prop-types';
|
||||
@ -36,7 +36,9 @@ const getBreadcrumbItems = (...links) =>
|
||||
const NavBreadcrumb = ({ links = [] }) => (
|
||||
<BreadcrumbContainer>
|
||||
<Grid>
|
||||
<Breadcrumb>{getBreadcrumbItems(...links)}</Breadcrumb>
|
||||
<Col xs={12}>
|
||||
<Breadcrumb>{getBreadcrumbItems(...links)}</Breadcrumb>
|
||||
</Col>
|
||||
</Grid>
|
||||
</BreadcrumbContainer>
|
||||
);
|
||||
|
||||
@ -3,15 +3,25 @@ import PropTypes from 'prop-types';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Img } from 'normalized-styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
import styled from 'styled-components';
|
||||
|
||||
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`
|
||||
width: ${remcalc(87)};
|
||||
height: ${remcalc(25)};
|
||||
`;
|
||||
|
||||
const Item = styled.span`
|
||||
padding-left: 5px;
|
||||
`;
|
||||
|
||||
const NavHeader = ({ datacenter, username }) => (
|
||||
<Header>
|
||||
<HeaderBrand>
|
||||
@ -19,8 +29,14 @@ const NavHeader = ({ datacenter, username }) => (
|
||||
<StyledLogo src={Logo} />
|
||||
</Link>
|
||||
</HeaderBrand>
|
||||
<HeaderItem>{datacenter}</HeaderItem>
|
||||
<HeaderItem>{username}</HeaderItem>
|
||||
<HeaderItem>
|
||||
<DataCenterIcon />
|
||||
<Item>{datacenter}</Item>
|
||||
</HeaderItem>
|
||||
<HeaderItem>
|
||||
<UserIcon />
|
||||
<Item>{username}</Item>
|
||||
</HeaderItem>
|
||||
</Header>
|
||||
);
|
||||
|
||||
|
||||
@ -1 +1 @@
|
||||
export { default as DeploymentGroupDelete } from './delete';
|
||||
export { default as DeploymentGroupDelete } from './delete';
|
||||
@ -1,14 +1,25 @@
|
||||
import React from 'react';
|
||||
import { graphql } from 'react-apollo';
|
||||
import get from 'lodash.get';
|
||||
|
||||
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 { Title } from '@components/navigation';
|
||||
import PortalQuery from '@graphql/Portal.gql';
|
||||
|
||||
export default ({ match }) => (
|
||||
const DeploymentGroupCreate = ({ match, dataCenter }) => (
|
||||
<LayoutContainer>
|
||||
<Title>Creating deployment group</Title>
|
||||
<Progress stage={match.params.stage} create />
|
||||
<ManifestEditOrCreate create />
|
||||
<ManifestEditOrCreate create dataCenter={dataCenter} />
|
||||
</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 { Title } from '@components/navigation';
|
||||
import { Loader, ErrorMessage } from '@components/messaging';
|
||||
import { Environment } from '@components/manifest/edit-or-create';
|
||||
import { Environment } from '@components/manifest';
|
||||
|
||||
const EnvironmentReadOnly = ({
|
||||
files = [],
|
||||
|
||||
@ -21,11 +21,11 @@ import DeploymentGroupConfigQuery from '@graphql/DeploymentGroupConfig.gql';
|
||||
import { client } from '@state/store';
|
||||
import { ErrorMessage } from '@components/messaging';
|
||||
import {
|
||||
Name,
|
||||
Manifest,
|
||||
Environment,
|
||||
Review
|
||||
} from '@components/manifest/edit-or-create';
|
||||
Name,
|
||||
Review,
|
||||
Manifest
|
||||
} from '@components/manifest';
|
||||
|
||||
const INTERPOLATE_REGEX = /\$([_a-z][_a-z0-9]*)/gi;
|
||||
|
||||
@ -243,6 +243,7 @@ class DeploymentGroupEditOrCreate extends Component {
|
||||
};
|
||||
|
||||
handleNameSubmit({ name = '' }) {
|
||||
console.log(name);
|
||||
this.setState({ name }, () =>
|
||||
this.redirect({ stage: 'manifest', prog: true })
|
||||
);
|
||||
@ -401,9 +402,10 @@ class DeploymentGroupEditOrCreate extends Component {
|
||||
|
||||
renderNameForm() {
|
||||
const { NameForm } = this.state;
|
||||
const { dataCenter } = this.props;
|
||||
|
||||
return (
|
||||
<NameForm onSubmit={this.handleNameSubmit} onCancel={this.handleCancel} />
|
||||
<NameForm dataCenter={dataCenter} onSubmit={this.handleNameSubmit} onCancel={this.handleCancel} />
|
||||
);
|
||||
}
|
||||
|
||||
@ -490,4 +492,4 @@ export default compose(
|
||||
provisionManifest: variables => mutate({ variables })
|
||||
})
|
||||
})
|
||||
)(withRouter(DeploymentGroupEditOrCreate));
|
||||
)(withRouter(DeploymentGroupEditOrCreate));
|
||||
@ -7,7 +7,7 @@ import ManifestQuery from '@graphql/Manifest.gql';
|
||||
import DeploymentGroupBySlugQuery from '@graphql/DeploymentGroupBySlug.gql';
|
||||
|
||||
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 { Title } from '@components/navigation';
|
||||
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;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
.c3 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@ -25,6 +25,15 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
|
||||
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 {
|
||||
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
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
.c0 {
|
||||
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
|
||||
className="c2"
|
||||
name="breadcrum"
|
||||
/>
|
||||
.c1 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
|
||||
.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>
|
||||
`;
|
||||
|
||||
@ -6,9 +6,12 @@ import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import ServiceListItem from '@components/services/list-item.js';
|
||||
import ServiceListItem from '@components/services/list-item';
|
||||
import { Router, service } from '../../mocks';
|
||||
|
||||
|
||||
console.log(service);
|
||||
|
||||
it('renders <ServiceListItem /> without throwing', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
|
||||
@ -49,17 +49,17 @@ exports[`renders <DeploymentGroupDelete /> without throwing 1`] = `
|
||||
}
|
||||
|
||||
.c4::-moz-focus-inner,
|
||||
.c4[type="button"]::-moz-focus-inner,
|
||||
.c4[type="reset"]::-moz-focus-inner,
|
||||
.c4[type="submit"]::-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 {
|
||||
.c4[type='button']:-moz-focusring,
|
||||
.c4[type='reset']:-moz-focusring,
|
||||
.c4[type='submit']:-moz-focusring {
|
||||
outline: 0.0625rem dotted ButtonText;
|
||||
}
|
||||
|
||||
@ -144,17 +144,17 @@ exports[`renders <DeploymentGroupDelete /> without throwing 1`] = `
|
||||
}
|
||||
|
||||
.c9::-moz-focus-inner,
|
||||
.c9[type="button"]::-moz-focus-inner,
|
||||
.c9[type="reset"]::-moz-focus-inner,
|
||||
.c9[type="submit"]::-moz-focus-inner {
|
||||
.c9[type='button']::-moz-focus-inner,
|
||||
.c9[type='reset']::-moz-focus-inner,
|
||||
.c9[type='submit']::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.c9:-moz-focusring,
|
||||
.c9[type="button"]:-moz-focusring,
|
||||
.c9[type="reset"]:-moz-focusring,
|
||||
.c9[type="submit"]:-moz-focusring {
|
||||
.c9[type='button']:-moz-focusring,
|
||||
.c9[type='reset']:-moz-focusring,
|
||||
.c9[type='submit']:-moz-focusring {
|
||||
outline: 0.0625rem dotted ButtonText;
|
||||
}
|
||||
|
||||
@ -278,12 +278,392 @@ exports[`renders <DeploymentGroupDelete /> without throwing 1`] = `
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
.c3 {
|
||||
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}
|
||||
>
|
||||
<button
|
||||
className="c2 c3 c4"
|
||||
.c2 {
|
||||
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]}
|
||||
>
|
||||
<svg
|
||||
@ -303,28 +683,484 @@ exports[`renders <DeploymentGroupDelete /> without throwing 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<div>
|
||||
<h2
|
||||
className="c5 c6"
|
||||
.c5 {
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
text-transform: none;
|
||||
-webkit-appearance: button;
|
||||
-moz-appearance: button;
|
||||
appearance: button;
|
||||
min-width: 7.5rem;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0.9375rem 1.125rem;
|
||||
position: relative;
|
||||
font-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:
|
||||
<br />
|
||||
|
||||
Wordpress Blog Example
|
||||
</h2>
|
||||
<p
|
||||
className="c7 c8"
|
||||
.c1 {
|
||||
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?
|
||||
</p>
|
||||
<button
|
||||
className="c9"
|
||||
.c0 {
|
||||
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]}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
className="c4"
|
||||
.c0 {
|
||||
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]}
|
||||
>
|
||||
Delete deployment group
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -36,6 +36,7 @@ exports[`renders <DeploymentGroupImport /> without throwing 1`] = `
|
||||
}
|
||||
|
||||
.c3 {
|
||||
-webkit-fill: ;
|
||||
fill: ;
|
||||
stroke: ;
|
||||
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
|
||||
@ -43,6 +44,7 @@ exports[`renders <DeploymentGroupImport /> without throwing 1`] = `
|
||||
}
|
||||
|
||||
.c4 {
|
||||
-webkit-fill: ;
|
||||
fill: ;
|
||||
stroke: ;
|
||||
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
|
||||
@ -52,6 +54,7 @@ exports[`renders <DeploymentGroupImport /> without throwing 1`] = `
|
||||
}
|
||||
|
||||
.c5 {
|
||||
-webkit-fill: ;
|
||||
fill: ;
|
||||
stroke: ;
|
||||
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
|
||||
@ -139,42 +142,199 @@ exports[`renders <DeploymentGroupImport /> without throwing 1`] = `
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<h2
|
||||
className="c1"
|
||||
.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;
|
||||
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
|
||||
</h2>
|
||||
<div
|
||||
className="c2"
|
||||
.c1 {
|
||||
-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"
|
||||
width="28"
|
||||
>
|
||||
<rect
|
||||
className="c3"
|
||||
.c0 {
|
||||
-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"
|
||||
width="6"
|
||||
x="2"
|
||||
y="2"
|
||||
/>
|
||||
<rect
|
||||
className="c4"
|
||||
.c0 {
|
||||
-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"
|
||||
width="6"
|
||||
x="11"
|
||||
y="2"
|
||||
/>
|
||||
<rect
|
||||
className="c5"
|
||||
.c0 {
|
||||
-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"
|
||||
width="6"
|
||||
x="20"
|
||||
y="2"
|
||||
/>
|
||||
</svg>
|
||||
<p
|
||||
className="c6"
|
||||
.c0 {
|
||||
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...
|
||||
</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;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
.c3 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@ -25,7 +25,16 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
|
||||
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-weight: 500;
|
||||
font-size: 1.5rem;
|
||||
@ -35,7 +44,7 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
.c5 {
|
||||
border: solid;
|
||||
border-width: 0 0.125rem 0.125rem 0;
|
||||
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
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
.c0 {
|
||||
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
|
||||
className="c2"
|
||||
name="breadcrum"
|
||||
.c1 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
|
||||
.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>
|
||||
<h2
|
||||
className="c3"
|
||||
name="breadcrum-item"
|
||||
>
|
||||
Dashboard
|
||||
</h2>
|
||||
<div
|
||||
className="c4"
|
||||
/>
|
||||
.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;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
@ -49,17 +49,17 @@ exports[`renders <ServiceDelete /> without throwing 1`] = `
|
||||
}
|
||||
|
||||
.c4::-moz-focus-inner,
|
||||
.c4[type="button"]::-moz-focus-inner,
|
||||
.c4[type="reset"]::-moz-focus-inner,
|
||||
.c4[type="submit"]::-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 {
|
||||
.c4[type='button']:-moz-focusring,
|
||||
.c4[type='reset']:-moz-focusring,
|
||||
.c4[type='submit']:-moz-focusring {
|
||||
outline: 0.0625rem dotted ButtonText;
|
||||
}
|
||||
|
||||
@ -144,17 +144,17 @@ exports[`renders <ServiceDelete /> without throwing 1`] = `
|
||||
}
|
||||
|
||||
.c9::-moz-focus-inner,
|
||||
.c9[type="button"]::-moz-focus-inner,
|
||||
.c9[type="reset"]::-moz-focus-inner,
|
||||
.c9[type="submit"]::-moz-focus-inner {
|
||||
.c9[type='button']::-moz-focus-inner,
|
||||
.c9[type='reset']::-moz-focus-inner,
|
||||
.c9[type='submit']::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.c9:-moz-focusring,
|
||||
.c9[type="button"]:-moz-focusring,
|
||||
.c9[type="reset"]:-moz-focusring,
|
||||
.c9[type="submit"]:-moz-focusring {
|
||||
.c9[type='button']:-moz-focusring,
|
||||
.c9[type='reset']:-moz-focusring,
|
||||
.c9[type='submit']:-moz-focusring {
|
||||
outline: 0.0625rem dotted ButtonText;
|
||||
}
|
||||
|
||||
@ -278,12 +278,392 @@ exports[`renders <ServiceDelete /> without throwing 1`] = `
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
.c3 {
|
||||
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}
|
||||
>
|
||||
<button
|
||||
className="c2 c3 c4"
|
||||
.c2 {
|
||||
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]}
|
||||
>
|
||||
<svg
|
||||
@ -303,28 +683,484 @@ exports[`renders <ServiceDelete /> without throwing 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<div>
|
||||
<h2
|
||||
className="c5 c6"
|
||||
.c5 {
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
text-transform: none;
|
||||
-webkit-appearance: button;
|
||||
-moz-appearance: button;
|
||||
appearance: button;
|
||||
min-width: 7.5rem;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0.9375rem 1.125rem;
|
||||
position: relative;
|
||||
font-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:
|
||||
<br />
|
||||
|
||||
Nginx
|
||||
</h2>
|
||||
<p
|
||||
className="c7 c8"
|
||||
.c1 {
|
||||
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?
|
||||
</p>
|
||||
<button
|
||||
className="c9"
|
||||
.c0 {
|
||||
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]}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
className="c4"
|
||||
.c0 {
|
||||
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]}
|
||||
>
|
||||
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-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",
|
||||
"postinstall": "bup",
|
||||
"prepublish": "redrun build"
|
||||
},
|
||||
"dependencies": {
|
||||
@ -33,7 +34,7 @@
|
||||
"jest": "^20.0.4",
|
||||
"react": "^15.6.1",
|
||||
"react-test-renderer": "^15.6.1",
|
||||
"redrun": "^5.9.17"
|
||||
"redrun": "^5.9.16"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
|
||||
@ -1,3 +1,2 @@
|
||||
.nyc_output
|
||||
coverage
|
||||
dist
|
||||
coverage
|
||||
@ -3,6 +3,18 @@
|
||||
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.
|
||||
|
||||
<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>
|
||||
## 1.0.5 (2017-05-25)
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
# remcalc
|
||||
|
||||
[](https://opensource.org/licenses/MPL-2.0)
|
||||
[](https://npmjs.com/package/remcalc)
|
||||
[](https://github.com/RichardLitt/standard-readme)
|
||||
[](https://opensource.org/licenses/MPL-2.0)
|
||||
[](https://npmjs.com/package/remcalc)
|
||||
[](https://github.com/RichardLitt/standard-readme)
|
||||
|
||||
Calculate the `rem`'s from `px` values.
|
||||
|
||||
|
||||
@ -1,3 +1,2 @@
|
||||
.nyc_output
|
||||
coverage
|
||||
dist
|
||||
coverage
|
||||
@ -3,6 +3,18 @@
|
||||
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.
|
||||
|
||||
<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>
|
||||
## 1.0.5 (2017-05-25)
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
# rnd-id
|
||||
|
||||
[](https://opensource.org/licenses/MPL-2.0)
|
||||
[](https://npmjs.com/package/rnd-id)
|
||||
[](https://github.com/RichardLitt/standard-readme)
|
||||
[](https://opensource.org/licenses/MPL-2.0)
|
||||
[](https://npmjs.com/package/rnd-id)
|
||||
[](https://github.com/RichardLitt/standard-readme)
|
||||
|
||||
Generate a random alphabetical string.
|
||||
|
||||
|
||||
@ -24,14 +24,14 @@
|
||||
"watch": "redrun copy-fonts && redrun -p compile-watch:*",
|
||||
"styleguide:build": "cross-env NODE_ENV=production styleguidist build",
|
||||
"styleguide": "cross-env NODE_ENV=development styleguidist server",
|
||||
"prepublish": "redrun -s copy-fonts compile"
|
||||
"postinstall": "redrun -s copy-fonts compile"
|
||||
},
|
||||
"dependencies": {
|
||||
"babel-cli": "^6.26.0",
|
||||
"babel-generator": "^6.26.0",
|
||||
"babel-helpers": "^6.24.1",
|
||||
"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-template": "^6.26.0",
|
||||
"camel-case": "^3.0.0",
|
||||
@ -44,11 +44,11 @@
|
||||
"lodash.isequalwith": "^4.4.0",
|
||||
"lodash.isstring": "^4.0.1",
|
||||
"normalized-styled-components": "^1.0.9",
|
||||
"polished": "^1.7.0",
|
||||
"polished": "^1.6.1",
|
||||
"prop-types": "^15.5.10",
|
||||
"react-broadcast": "^0.1.2",
|
||||
"react-styled-flexboxgrid": "^2.0.3",
|
||||
"redrun": "^5.9.17",
|
||||
"redrun": "^5.9.16",
|
||||
"reduce-css-calc": "^2.0.5",
|
||||
"remcalc": "^1.0.8",
|
||||
"rnd-id": "^1.0.8",
|
||||
@ -59,7 +59,7 @@
|
||||
"devDependencies": {
|
||||
"csso": "^3.1.1",
|
||||
"eslint": "^4.5.0",
|
||||
"eslint-config-joyent-portal": "3.0.0",
|
||||
"eslint-config-joyent-portal": "2.0.0",
|
||||
"jest": "^20.0.4",
|
||||
"jest-diff": "^20.0.3",
|
||||
"jest-matcher-utils": "^20.0.3",
|
||||
@ -67,13 +67,13 @@
|
||||
"jest-styled-components": "^4.4.1",
|
||||
"jsesc": "^2.5.1",
|
||||
"react": "^15.6.1",
|
||||
"react-docgen": "ramitos/react-docgen#7a687c0",
|
||||
"react-docgen": "^2.17.0",
|
||||
"react-docgen-displayname-handler": "^1.0.0",
|
||||
"react-dom": "^15.6.1",
|
||||
"react-redux": "^5.0.6",
|
||||
"react-router-dom": "^4.1.2",
|
||||
"react-scripts": "^1.0.12",
|
||||
"react-styleguidist": "ramitos/react-styleguidist#fb55769",
|
||||
"react-styleguidist": "^6.0.20",
|
||||
"react-test-renderer": "^15.6.1",
|
||||
"redux": "^3.7.2",
|
||||
"redux-form": "^7.0.3",
|
||||
@ -81,7 +81,7 @@
|
||||
"stylelint": "^8.0.0",
|
||||
"stylelint-config-primer": "^2.0.1",
|
||||
"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",
|
||||
"tinycolor2": "^1.4.1",
|
||||
"title-case": "^2.1.1",
|
||||
|
||||
@ -20,6 +20,7 @@ const {
|
||||
</CardMeta>
|
||||
<CardOutlet>Outlet</CardOutlet>
|
||||
</CardView>
|
||||
<CardOptions />
|
||||
</Card>
|
||||
```
|
||||
|
||||
@ -45,7 +46,9 @@ const {
|
||||
<CardSubTitle>Subtitle</CardSubTitle>
|
||||
<CardDescription>Description</CardDescription>
|
||||
</CardMeta>
|
||||
<CardOutlet>Outlet</CardOutlet>
|
||||
</CardView>
|
||||
<CardOptions />
|
||||
</Card>
|
||||
```
|
||||
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import React from 'react';
|
||||
import is from 'styled-is';
|
||||
import typography from '../typography';
|
||||
import P from '../text/p';
|
||||
|
||||
const Chevron = P.extend`
|
||||
export default P.extend`
|
||||
${typography.fontFamily};
|
||||
|
||||
display: inline-block;
|
||||
@ -25,10 +24,3 @@ const Chevron = P.extend`
|
||||
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';
|
||||
|
||||
const StyledLabel = Label.extend`
|
||||
${breakpoints.medium`
|
||||
text-align: right;
|
||||
`};
|
||||
|
||||
${is('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 UnhealthyIcon } from './unhealthy';
|
||||
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,
|
||||
HealthyIcon,
|
||||
UnhealthyIcon,
|
||||
BinIcon
|
||||
BinIcon,
|
||||
UserIcon,
|
||||
DataCenterIcon
|
||||
} from './icons';
|
||||
|
||||
export { MetricGraph } from './metrics';
|
||||
|
||||
@ -10,6 +10,8 @@ const Label = styled.label`
|
||||
font-size: ${remcalc(15)};
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
color: ${props => props.theme.secondary};
|
||||
`;
|
||||
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
const webpackConfig = require('react-scripts/config/webpack.config.dev.js');
|
||||
const { defaultHandlers } = require('react-docgen');
|
||||
const dnHandler = require('react-docgen-displayname-handler');
|
||||
// const snapguidist = require('snapguidist');
|
||||
const snapguidist = require('snapguidist');
|
||||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
module.exports = snapguidist({
|
||||
webpackConfig: Object.assign(webpackConfig, {
|
||||
resolve: Object.assign(webpackConfig.resolve, {
|
||||
alias: Object.assign(webpackConfig.resolve.alias, {
|
||||
@ -56,7 +56,6 @@ module.exports = {
|
||||
'src/button/index.js',
|
||||
'src/breadcrumb/index.js',
|
||||
'src/card/card.js',
|
||||
'src/chevron/index.js',
|
||||
'src/form/input.js',
|
||||
'src/form/number-input.js',
|
||||
'src/form/checkbox.js',
|
||||
@ -84,4 +83,4 @@ module.exports = {
|
||||
],
|
||||
handlers: componentPath =>
|
||||
defaultHandlers.concat(dnHandler.createDisplayNameHandler(componentPath))
|
||||
};
|
||||
});
|
||||
|
||||
@ -1,3 +1,2 @@
|
||||
.nyc_output
|
||||
coverage
|
||||
dist
|
||||
coverage
|
||||
@ -3,6 +3,18 @@
|
||||
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.
|
||||
|
||||
<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>
|
||||
## 1.0.5 (2017-05-25)
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
# unitcalc
|
||||
|
||||
[](https://opensource.org/licenses/MPL-2.0)
|
||||
[](https://npmjs.com/package/unitcalc)
|
||||
[](https://github.com/RichardLitt/standard-readme)
|
||||
[](https://opensource.org/licenses/MPL-2.0)
|
||||
[](https://npmjs.com/package/unitcalc)
|
||||
[](https://github.com/RichardLitt/standard-readme)
|
||||
|
||||
Calculate the `rem`'s from unit values.
|
||||
|
||||
|
||||
@ -14,35 +14,23 @@
|
||||
"unit"
|
||||
],
|
||||
"repository": "github:yldio/joyent-portal",
|
||||
"main": "dist/unitcalc.umd.js",
|
||||
"jsnext:main": "dist/unitcalc.es.js",
|
||||
"module": "dist/unitcalc.es.js",
|
||||
"entry": "src/index.js",
|
||||
"main": "src/index.js",
|
||||
"scripts": {
|
||||
"lint": "eslint . --fix",
|
||||
"lint-ci": "eslint . --format junit --output-file $CIRCLE_TEST_REPORTS/lint/unitcalc.xml",
|
||||
"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"
|
||||
"lint": "eslint . --fix --format=tap",
|
||||
"test": "cross-env NODE_ENV=test nyc --reporter=lcov --reporter=text ava"
|
||||
},
|
||||
"dependencies": {
|
||||
"lodash.flatten": "^4.4.0",
|
||||
"remcalc": "^1.0.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"ava": "^0.22.0",
|
||||
"babel-plugin-istanbul": "^4.1.4",
|
||||
"babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
|
||||
"babel-plugin-transform-es2015-parameters": "^6.24.1",
|
||||
"babel-plugin-transform-es2015-spread": "^6.22.0",
|
||||
"babel-register": "^6.26.0",
|
||||
"bup": "^1.0.9",
|
||||
"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"
|
||||
"ava": "0.19.1",
|
||||
"babel-plugin-istanbul": "^4.1.3",
|
||||
"babel-register": "^6.24.1",
|
||||
"cross-env": "^5.0.0",
|
||||
"eslint": "^3.19.0",
|
||||
"eslint-config-joyent-portal": "^1.0.3",
|
||||
"nyc": "^10.3.2"
|
||||
},
|
||||
"nyc": {
|
||||
"sourceMap": false,
|
||||
@ -50,20 +38,19 @@
|
||||
},
|
||||
"babel": {
|
||||
"sourceMaps": "inline",
|
||||
"plugins": [
|
||||
"transform-es2015-parameters",
|
||||
"transform-es2015-arrow-functions",
|
||||
"transform-es2015-spread"
|
||||
],
|
||||
"env": {
|
||||
"test": {
|
||||
"plugins": ["istanbul"]
|
||||
"plugins": [
|
||||
"istanbul"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"ava": {
|
||||
"tap": true,
|
||||
"require": ["babel-register"],
|
||||
"require": [
|
||||
"babel-register"
|
||||
],
|
||||
"babel": "inherit"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user