1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-14 15:20:06 +02:00

fix(cp-frontend,ui-toolkit): increase synchrony between wireframes and code

This commit is contained in:
Sara Vieira 2017-09-05 21:21:44 +01:00 committed by Sérgio Ramos
parent e1df4a14d3
commit d1bc04c528
54 changed files with 11200 additions and 991 deletions

View File

@ -18,4 +18,4 @@
"eslint": "^4.5.0",
"eslint-config-joyent-portal": "3.0.0"
}
}
}

View File

@ -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",

View File

@ -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>
);
};

View 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}
/>
);

View 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;

View 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;

View 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';

View File

@ -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;

View 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;

View 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;

View 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;

View 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

View File

@ -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>
);

View File

@ -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>
);

View File

@ -1 +1 @@
export { default as DeploymentGroupDelete } from './delete';
export { default as DeploymentGroupDelete } from './delete';

View File

@ -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;

View File

@ -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 = [],

View File

@ -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));

View File

@ -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';

View File

@ -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();
});

View File

@ -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>
`;

View File

@ -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(

View File

@ -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

View File

@ -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>

View File

@ -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();
});

View File

@ -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>

View File

@ -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

View File

@ -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": "*"

View File

@ -1,3 +1,2 @@
.nyc_output
coverage
dist
coverage

View File

@ -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)

View File

@ -1,8 +1,8 @@
# remcalc
[![License: MPL 2.0](https://img.shields.io/badge/License-MPL%202.0-brightgreen.svg)](https://opensource.org/licenses/MPL-2.0)
[![npm](https://img.shields.io/npm/v/remcalc.svg)](https://npmjs.com/package/remcalc)
[![standard-readme compliant](https://img.shields.io/badge/standard--readme-OK-green.svg)](https://github.com/RichardLitt/standard-readme)
[![License: MPL 2.0](https://img.shields.io/badge/License-MPL%202.0-brightgreen.svg?style=flat-square)](https://opensource.org/licenses/MPL-2.0)
[![npm](https://img.shields.io/npm/v/remcalc.svg?style=flat-square)](https://npmjs.com/package/remcalc)
[![standard-readme compliant](https://img.shields.io/badge/standard--readme-OK-green.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)
Calculate the `rem`'s from `px` values.

View File

@ -1,3 +1,2 @@
.nyc_output
coverage
dist
coverage

View File

@ -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)

View File

@ -1,8 +1,8 @@
# rnd-id
[![License: MPL 2.0](https://img.shields.io/badge/License-MPL%202.0-brightgreen.svg)](https://opensource.org/licenses/MPL-2.0)
[![npm](https://img.shields.io/npm/v/rnd-id.svg)](https://npmjs.com/package/rnd-id)
[![standard-readme compliant](https://img.shields.io/badge/standard--readme-OK-green.svg)](https://github.com/RichardLitt/standard-readme)
[![License: MPL 2.0](https://img.shields.io/badge/License-MPL%202.0-brightgreen.svg?style=flat-square)](https://opensource.org/licenses/MPL-2.0)
[![npm](https://img.shields.io/npm/v/rnd-id.svg?style=flat-square)](https://npmjs.com/package/rnd-id)
[![standard-readme compliant](https://img.shields.io/badge/standard--readme-OK-green.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)
Generate a random alphabetical string.

View File

@ -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",

View File

@ -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>
```

View File

@ -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>
);

View File

@ -1,15 +0,0 @@
```
<Chevron />
```
```
<Chevron up />
```
```
<Chevron down />
```
```
<Chevron left />
```

View File

@ -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;
`};

View 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));

View File

@ -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';

View 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));

View File

@ -111,7 +111,9 @@ export {
InstancesIcon,
HealthyIcon,
UnhealthyIcon,
BinIcon
BinIcon,
UserIcon,
DataCenterIcon
} from './icons';
export { MetricGraph } from './metrics';

View File

@ -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};
`;

View File

@ -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))
};
});

View File

@ -1,3 +1,2 @@
.nyc_output
coverage
dist
coverage

View File

@ -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)

View File

@ -1,8 +1,8 @@
# unitcalc
[![License: MPL 2.0](https://img.shields.io/badge/License-MPL%202.0-brightgreen.svg)](https://opensource.org/licenses/MPL-2.0)
[![npm](https://img.shields.io/npm/v/unitcalc.svg)](https://npmjs.com/package/unitcalc)
[![standard-readme compliant](https://img.shields.io/badge/standard--readme-OK-green.svg)](https://github.com/RichardLitt/standard-readme)
[![License: MPL 2.0](https://img.shields.io/badge/License-MPL%202.0-brightgreen.svg?style=flat-square)](https://opensource.org/licenses/MPL-2.0)
[![npm](https://img.shields.io/npm/v/unitcalc.svg?style=flat-square)](https://npmjs.com/package/unitcalc)
[![standard-readme compliant](https://img.shields.io/badge/standard--readme-OK-green.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)
Calculate the `rem`'s from unit values.

View File

@ -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"
}
}

913
yarn.lock

File diff suppressed because it is too large Load Diff