feat(my-joy-beta): instance home

fixes #814
This commit is contained in:
Sara Vieira 2017-11-28 14:50:55 +00:00 committed by GitHub
parent 506048a64a
commit c087f0bd9f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 956 additions and 156 deletions

View File

@ -1,10 +1,13 @@
{
"folders": [
{
"path": "prototypes/create-instance-icons"
"path": "packages/ui-toolkit"
},
{
"path": "packages/ui-toolkit"
"path": "packages/icons"
},
{
"path": "packages/my-joy-beta"
}
],
"settings": {}

View File

@ -0,0 +1,37 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
export default ({
fill = null,
light = false,
disabled = false,
direction = 'down',
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="13"
height="16"
viewBox="0 0 13 16"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
d="M 12 1L 10 1L 10 0L 3 0L 3 1L 1 1C 0.4 1 0 1.4 0 2L 0 15C 0 15.6 0.4 16 1 16L 12 16C 12.6 16 13 15.6 13 15L 13 2C 13 1.4 12.6 1 12 1ZM 4 1L 9 1L 9 2L 9 3L 4 3L 4 2L 4 1ZM 12 15L 1 15L 1 2L 3 2L 3 4L 10 4L 10 2L 12 2L 12 15Z"
/>
</svg>
)}
</Rotate>
)}
</Colors>
);

View File

@ -7,6 +7,7 @@ export { default as Chevron } from './chevron';
export { default as Clipboard } from './clipboard';
export { default as Close } from './close';
export { default as Cns } from './cns';
export { default as Copy } from './copy';
export { default as DataCenter } from './data-center';
export { default as Delete } from './delete';
export { default as Dot } from './dot';

View File

@ -0,0 +1,26 @@
import React from 'react';
import Colors from './colors';
export default ({ light = false, disabled, ...rest, }) => (
<Colors white secondary>
{({ white, text }) => (
<svg
width="18"
height="20"
viewBox="0 0 18 20"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<path
fill={light ? white : text}
style={{
transform: 'rotate(90deg) translateX(-2px) translateY(1px)',
transformOrigin: '50%'
}}
d="M 2.33975 15L 1.47372 14.5L 2.33975 15ZM 19.6603 15L 18.7942 15.5L 19.6603 15ZM 18.7942 16.5L 18.7942 15.5L 18.7942 16.5ZM 11.866 1.5L 12.7321 1L 11.866 1.5ZM 10.134 1.5L 11 2L 10.134 1.5ZM 11 2L 18.7942 15.5L 20.5263 14.5L 12.7321 1L 11 2ZM 18.7942 15.5L 3.20577 15.5L 3.20577 17.5L 18.7942 17.5L 18.7942 15.5ZM 3.20577 15.5L 11 2L 9.26795 1L 1.47372 14.5L 3.20577 15.5ZM 3.20577 15.5L 3.20577 15.5L 1.47372 14.5C 0.70392 15.8333 1.66617 17.5 3.20577 17.5L 3.20577 15.5ZM 18.7942 15.5L 18.7942 15.5L 18.7942 17.5C 20.3338 17.5 21.2961 15.8333 20.5263 14.5L 18.7942 15.5ZM 12.7321 1C 11.9622 -0.333334 10.0377 -0.333332 9.26795 1L 11 2L 11 2L 12.7321 1Z"
/>
</svg>
)}
</Colors>
);

View File

@ -0,0 +1,23 @@
import React from 'react';
export default props => (
<svg
width="16"
height="19"
viewBox="0 0 16 19"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
{...props}
style={{
transform: 'rotate(30deg) translateX(1px) translateY(-1px)',
transformOrigin: '50%'
}}
fill-rule="evenodd"
transform
d="M 6.67853 4.42272L 6.67879 6.61018L 12.4032 3.30519L 6.67874 0L 6.67829 2.4743C 2.88206 3.15051 -0.000481996 6.46786 6.04528e-08 10.4594C -1.2363e-05 14.9384 3.63041 18.5685 8.10965 18.5692C 12.588 18.5682 16.2192 14.9381 16.2192 10.4592L 14.3115 10.46C 14.3108 13.8839 11.535 16.6615 8.10976 16.6612C 4.68462 16.6608 1.90795 13.8842 1.90764 10.4586C 1.90797 7.52657 3.94309 5.06834 6.67853 4.42272Z"
/>
</svg>
);

View File

@ -6,14 +6,11 @@
"repository": "github:yldio/joyent-portal",
"main": "build/",
"scripts": {
"dev":
"REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http joyent-react-scripts start",
"dev": "REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http joyent-react-scripts start",
"start": "PORT=3069 joyent-react-scripts start",
"build": "NODE_ENV=production joyent-react-scripts build",
"lint-ci":
"eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
"lint":
"eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
"lint-ci": "eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
"lint": "eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
"test": "NODE_ENV=test joyent-react-scripts test --env=jsdom",
"test-ci": "redrun test",
"prepublish": "echo 0"
@ -21,6 +18,9 @@
"dependencies": {
"@manaflair/redux-batch": "^0.1.0",
"apollo": "^0.2.2",
"apr-intercept": "^1.0.4",
"clipboard-copy": "^1.2.0",
"date-fns": "^1.29.0",
"declarative-redux-form": "^1.0.3",
"joyent-ui-toolkit": "^2.0.1",
"lodash.find": "^4.6.0",

View File

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

View File

@ -0,0 +1,89 @@
import React from 'react';
import renderer from 'react-test-renderer';
import Store from '@mocks/store';
import 'jest-styled-components';
import Home, { CopyToClipboardTooltip, CopiableField, Meta } from '../home';
it('renders <CopiableField /> without throwing', () => {
const tree = renderer
.create(
<Store>
<CopiableField label="test" text="test" />
</Store>
)
.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders <Home /> without throwing', () => {
const tree = renderer
.create(
<Store>
<Home
instance={{
id: '2252839a-e698-ceec-afac-9549ad0c6624',
state: 'RUNNING',
name: '2252839a',
created: '2017-10-13T11:36:04.463Z',
updated: '2017-11-27T13:46:28.000Z',
primary_ip: '72.2.119.146',
ips: ['ahgsjdasdhjas', 'ajshdajkdhk'],
docker: null,
dns_names: {},
compute_node: '70bb1cee-dba3-11e3-a799-002590e4f2b0',
image: {},
package: {},
__typename: 'Machine'
}}
starting={true}
stopping={false}
rebooting={true}
deleteing={false}
onAction={() => {}}
/>
</Store>
)
.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders <Meta /> without throwing', () => {
const tree = renderer
.create(
<Store>
<Meta {...{
"id": "2252839a-e698-ceec-afac-9549ad0c6624",
"state": "RUNNING",
"name": "2252839a",
"created": "2017-10-13T11:36:04.463Z",
"updated": "2017-11-27T13:46:28.000Z",
"primary_ip": "72.2.119.146",
"ips": {},
"docker": null,
"dns_names": {},
"compute_node": "70bb1cee-dba3-11e3-a799-002590e4f2b0",
"image": {},
"package": {},
"__typename": "Machine"
}} onAction={() => console.log('sup??')}/>
</Store>
)
.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders <CopyToClipboardTooltip /> without throwing', () => {
const tree = renderer
.create(
<Store>
<CopyToClipboardTooltiptip>{"test"}</CopyToClipboardTooltiptip>
</Store>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

View File

@ -0,0 +1,291 @@
import React, { Component } from 'react';
import { Row, Col } from 'react-styled-flexboxgrid';
import styled, { withTheme} from 'styled-components';
import { Margin, Padding } from 'styled-components-spacing';
import remcalc from 'remcalc';
import is from 'styled-is';
import titleCase from 'title-case';
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
import copy from 'clipboard-copy';
import {
Card,
CardOutlet,
Divider,
ResetIcon,
Button,
FormLabel,
Input,
H2,
Label,
DotIcon,
DeleteIcon,
StartIcon,
StopIcon,
TooltipContainer,
TooltipTarget,
Tooltip,
ClipboardIcon
} from 'joyent-ui-toolkit';
const stateColor = {
PROVISIONING: 'primary',
RUNNING: 'green',
STOPPING: 'grey',
STOPPED: 'grey',
DELETED: 'secondaryActive',
FAILED: 'red'
};
const GreyLabel = styled(Label)`
opacity: 0.5;
padding-right: ${remcalc(3)};
`;
const Flex = styled.div`
align-items: center;
display: flex;
justify-content: flex-start;
@media (max-width: ${remcalc(767)}) {
display: block;
}
`;
const FlexEnd = styled.div`
justify-content: flex-end;
align-items: center;
display: flex;
flex-grow: 1;
`;
const InputIconWrapper = styled.div`
display: flex;
margin-bottom: ${remcalc(10)};
align-items: center;
${is('noMargin')`
margin-bottom: ${remcalc(0)};
`};
input {
padding-right: ${remcalc(30)};
}
div {
position: relative;
left: ${remcalc(-26)};
}
`;
const HorizontalDivider = styled.div`
width: ${remcalc(1)};
background: ${props => props.theme.grey};
height: ${remcalc(24)};
display: flex;
align-self: flex-end;
margin: 0 ${remcalc(18)};
@media (max-width: ${remcalc(767)}) {
display: none;
}
`;
const ClipboardIconActionable = styled(ClipboardIcon)`
cursor: pointer;
`;
export class CopyToClipboardTooltip extends Component {
constructor() {
super();
this.state = {
copied: false
};
}
handleClick = () => {
const { children: text } = this.props;
copy(text);
this.setState(
{
copied: true
},
() => {
setTimeout(() => {
this.setState({
copied: false
});
}, 4000);
}
);
};
render = () => (
<TooltipContainer hoverable>
<TooltipTarget>
<ClipboardIconActionable onClick={this.handleClick} />
</TooltipTarget>
<Tooltip placement="top" success={Boolean(this.state.copied)}>
{this.state.copied ? 'Copied To Clipboard' : 'Copy To Clipboard'}
</Tooltip>
</TooltipContainer>
);
}
export const CopiableField = ({ label, text, ...rest }) => (
<Row>
<Col xs={12} md={7}>
<FormLabel>{label}</FormLabel>
<InputIconWrapper {...rest}>
<Input fluid value={text} />
<CopyToClipboardTooltip>{text}</CopyToClipboardTooltip>
</InputIconWrapper>
</Col>
</Row>
);
export const Meta = ({ created, updated, state, brand, image, ...instance }) => [
<Row middle="xs">
<Col xs={12}>
<H2>{instance.package.name}</H2>
</Col>
</Row>,
<Margin top={2} bottom={3}>
<Flex>
<Label>
{image ? titleCase(image.name) : 'Custom Image'}
</Label>
<HorizontalDivider />
<Label>
{brand === 'LX'
? 'Infrastructure Container'
: 'Hardware Virtual Machine'}
</Label>
<HorizontalDivider />
<Flex>
<DotIcon
borderRadius="50%"
marginRight={remcalc(6)}
marginTop={remcalc(1)}
width={remcalc(11)}
height={remcalc(11)}
color={stateColor[state]}
/>
{titleCase(state)}
</Flex>
</Flex>
<Margin top={1}>
<Flex>
<Flex>
<GreyLabel>Created: </GreyLabel>
<Label> {distanceInWordsToNow(created)} ago</Label>
</Flex>
<HorizontalDivider />
<Flex>
<GreyLabel>Updated: </GreyLabel>
<Label> {distanceInWordsToNow(updated)} ago</Label>
</Flex>
</Flex>
</Margin>
</Margin>
];
export default withTheme(({
instance,
starting,
stopping,
rebooting,
deleteing,
onAction,
theme
}) => (
<Row>
<Col xs={12} sm={12} md={9}>
<Card>
<CardOutlet big>
<Meta {...instance} />
<Flex>
<Flex>
<Button
secondary
bold
icon
loading={starting}
disabled={instance.state === 'RUNNING'}
onClick={() => onAction('start')}
>
<Padding right={3} style={{ height: 18 }}>
<StartIcon disabled={instance.state === 'RUNNING'} />
</Padding>
<span>Start</span>
</Button>
<Button
secondary
bold
icon
loading={stopping}
disabled={instance.state === 'STOPPED'}
onClick={() => onAction('stop')}
>
<Padding right={3} style={{ height: 18 }}>
<StopIcon disabled={instance.state === 'STOPPED'} />
</Padding>
<span>Stop</span>
</Button>
<Button
secondary
bold
icon
loading={rebooting}
disabled={instance.state === 'PROVISIONING'}
onClick={() => onAction('reboot')}
>
<Padding right={3} style={{ height: 18 }}>
<ResetIcon disabled={instance.state === 'PROVISIONING'} />
</Padding>
<span>Restart</span>
</Button>
</Flex>
<FlexEnd>
<Button
error
bold
icon
loading={deleteing}
disabled={instance.state === 'PROVISIONING'}
onClick={() => onAction('delete')}
>
<Padding right={3} style={{ height: 18 }}>
<DeleteIcon fill={theme.red} disabled={instance.state === 'PROVISIONING'} />
</Padding>
<span>Delete</span>
</Button>
</FlexEnd>
</Flex>
<Margin bottom={5} top={4}>
<Divider height={remcalc(1)} />
</Margin>
<CopiableField text={instance.id.split('-')[0]} label="Short ID" />
<CopiableField text={instance.id} label="ID" />
<CopiableField text={instance.compute_node} label="CN UUID" />
{instance.image && (
<CopiableField text={instance.image.id} label="Image UUID" />
)}
<CopiableField text={`$ ssh root@${instance.primary_ip}`} label="Login" />
{instance.ips.map((ip, i) => (
<CopiableField
key={i}
noMargin={i === instance.ips.length - 1}
text={ip}
label={`IP address ${i + 1}`}
/>
))}
</CardOutlet>
</Card>
</Col>
</Row>
));

View File

@ -21,13 +21,13 @@ export default () => (
<Header fluid>
<HeaderBrand beta>
<HeaderAnchor to="/">
<Logo beta alt="Triton" />
<Logo beta alt="Triton" light />
</HeaderAnchor>
</HeaderBrand>
<HeaderNav>
<li>
<HeaderItem>
<HeaderAnchor to="/">Compute</HeaderAnchor>
</li>
</HeaderItem>
</HeaderNav>
<HeaderItem>
<HeaderAnchor href="https://my.joyent.com">

View File

@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import forceArray from 'force-array';
import { Margin } from 'styled-components-spacing';
import { SectionList, SectionListItem, ViewContainer } from 'joyent-ui-toolkit';
@ -20,7 +21,9 @@ const Menu = ({ links = [] }) => {
return (
<ViewContainer plain>
<SectionList>{getMenuItems(_links)}</SectionList>
<Margin bottom={6}>
<SectionList>{getMenuItems(_links)}</SectionList>
</Margin>
</ViewContainer>
);
};

View File

@ -0,0 +1,160 @@
import React from 'react';
import PropTypes from 'prop-types';
import { compose, graphql } from 'react-apollo';
import find from 'lodash.find';
import get from 'lodash.get';
import { connect } from 'react-redux';
import { set } from 'react-redux-values';
import intercept from 'apr-intercept';
import {
ViewContainer,
StatusLoader,
Message,
MessageDescription,
MessageTitle
} from 'joyent-ui-toolkit';
import GetInstance from '@graphql/get-instance.gql';
import StartInstance from '@graphql/start-instance.gql';
import StopInstance from '@graphql/stop-instance.gql';
import RebootInstance from '@graphql/reboot-instance.gql';
import DeleteInstance from '@graphql/delete-instance.gql';
import HomeScreen from '@components/instances/home';
import parseError from '@state/parse-error';
const Home = ({
instance,
loading,
loadingError,
mutationError,
handleAction,
starting,
stopping,
rebooting,
deleteing,
}) => {
const { name } = instance || {};
const _loading = loading && !name && <StatusLoader />;
const _summary = !_loading &&
instance && (
<HomeScreen
instance={instance}
starting={starting}
stopping={stopping}
rebooting={rebooting}
deleteing={deleteing}
onAction={handleAction}
/>
);
const _error = loadingError &&
!_loading &&
!instance && (
<Message error>
<MessageTitle>Ooops!</MessageTitle>
<MessageDescription>
An error occurred while loading your instance summary
</MessageDescription>
</Message>
);
const _mutationError = mutationError && (
<Message error>
<MessageTitle>Ooops!</MessageTitle>
<MessageDescription>{mutationError}</MessageDescription>
</Message>
);
return (
<ViewContainer center={Boolean(_loading)} main>
{_loading}
{_error}
{_mutationError}
{_summary}
</ViewContainer>
);
};
Home.propTypes = {
loading: PropTypes.bool
};
export default compose(
graphql(StopInstance, { name: 'stop' }),
graphql(StartInstance, { name: 'start' }),
graphql(RebootInstance, { name: 'reboot' }),
graphql(DeleteInstance, { name: 'reboot' }),
graphql(GetInstance, {
options: ({ match }) => ({
pollInterval: 1000,
variables: {
name: get(match, 'params.instance')
}
}),
props: ({ data: { loading, error, variables, ...rest } }) => ({
instance: find(get(rest, 'machines', []), ['name', variables.name]),
loading,
loadingError: error
})
}),
connect(
(state, ownProps) => {
const { instance = {} } = ownProps;
const { id } = instance;
if (!id) {
return ownProps;
}
return {
...ownProps,
starting: state.values[`${id}-home-starting`],
stopping: state.values[`${id}-home-stoping`],
rebooting: state.values[`${id}-home-rebooting`],
deleteing: state.values[`${id}-home-deleteing`],
mutationError: state.values[`${id}-home-mutation-error`]
};
},
(disptach, ownProps) => ({
handleAction: async (action) => {
const { instance } = ownProps;
const { id } = instance;
const gerund = `${action}ing`;
const name = `${id}-home-${gerund}`;
// sets loading to true
disptach(set({
name,
value: true
}));
// calls mutation and waits while loading is still true
const [err] = await intercept(ownProps[action]({
variables: { id }
}));
if (!err && (action === 'delete')) {
const { history } = ownProps;
return history.push(`/instances/`);
}
// after mutation, sets loading back to false
const setLoadingFalse = set({
name,
value: false
});
// if error, sets error value
const mutationError = err && set({
name: `${id}-home-mutation-error`,
value: parseError(err)
});
return disptach([mutationError, setLoadingFalse].filter(Boolean));
}
})
)
)(Home);

View File

@ -1,5 +1,5 @@
export { default as List } from './list';
export { default as Summary } from './summary';
export { default as Home } from './home';
export { default as Tags } from './tags';
export { default as Metadata } from './metadata';
export { default as Networks } from './networks';

View File

@ -1,65 +0,0 @@
import React from 'react';
import ReactJson from 'react-json-view';
import PropTypes from 'prop-types';
import { compose, graphql } from 'react-apollo';
import find from 'lodash.find';
import get from 'lodash.get';
import {
ViewContainer,
Title,
StatusLoader,
Message,
MessageDescription,
MessageTitle
} from 'joyent-ui-toolkit';
import GetInstance from '@graphql/get-instance.gql';
const Summary = ({ instance, loading, error }) => {
const { name } = instance || {};
const _title = <Title>Summary</Title>;
const _loading = loading && !name && <StatusLoader />;
const _summary = !_loading && instance && <ReactJson src={instance} />;
const _error = error &&
!_loading &&
!instance && (
<Message error>
<MessageTitle>Ooops!</MessageTitle>
<MessageDescription>
An error occurred while loading your instance summary
</MessageDescription>
</Message>
);
return (
<ViewContainer center={Boolean(_loading)} main>
{_title}
{_loading}
{_error}
{_summary}
</ViewContainer>
);
};
Summary.propTypes = {
loading: PropTypes.bool
};
export default compose(
graphql(GetInstance, {
options: ({ match }) => ({
pollInterval: 1000,
variables: {
name: get(match, 'params.instance')
}
}),
props: ({ data: { loading, error, variables, ...rest } }) => ({
instance: find(get(rest, 'machines', []), ['name', variables.name]),
loading,
error
})
})
)(Summary);

View File

@ -0,0 +1,5 @@
mutation startInstance($id: ID!) {
deleteMachine(id: $id) {
id
}
}

View File

@ -1,6 +1,21 @@
query instance($name: String) {
machines(name: $name) {
id
dns_names
state,
name,
created,
updated,
primary_ip,
ips,
docker,
dns_names,
compute_node,
image {
id,
name
},
package {
name
}
}
}

View File

@ -1,3 +1,5 @@
mutation startInstance($id: ID!) {
startMachine(id: $id)
startMachine(id: $id) {
id
}
}

View File

@ -1,3 +1,5 @@
mutation stopInstance($id: ID!) {
stopMachine(id: $id)
stopMachine(id: $id) {
id
}
}

View File

@ -9,7 +9,7 @@ import { Header } from '@components/navigation';
import {
List as Instances,
Summary as InstanceSummary,
Home as InstanceHome,
Tags as InstanceTags,
Metadata as InstanceMetadata,
Networks as InstanceNetworks,
@ -55,9 +55,9 @@ export default () => (
component={() => null}
/>
<Route
path="/instances/:instance/summary"
path="/instances/:instance/home"
exact
component={InstanceSummary}
component={InstanceHome}
/>
<Route
path="/instances/:instance/tags"
@ -90,7 +90,7 @@ export default () => (
exact
component={({ match }) => (
<Redirect
to={`/instances/${get(match, 'params.instance')}/summary`}
to={`/instances/${get(match, 'params.instance')}/home`}
/>
)}
/>

View File

@ -0,0 +1,4 @@
export default ({ graphQLErrors = [], message = '' }) =>
graphQLErrors.length
? graphQLErrors.map(({ message }) => message).join('\n')
: message;

View File

@ -2,8 +2,7 @@ export default {
ui: {
sections: {
instances: [
'feed',
'summary',
'home',
'tags',
'metadata',
'networks',

View File

@ -31,7 +31,7 @@ p.rsg--p-32 {
padding-bottom: 36px;
}
.rsg--sidebar-4 a.rsg--link-72 {
.rsg--sidebar-4 a.rsg--link-48 {
color: #fff;
font-size: 15px;
}

View File

@ -9,7 +9,7 @@ const unitProps = (() => {
const measures = ['margin', 'padding']
.reduce((props, rule) => [...props, rule, ...sided(rule)], [])
.concat(['height', 'width']);
.concat(['height', 'width', 'border-radius']);
return sides.reduce((acc, side) => [...acc, `border-${side}-width`], [
'border',

View File

@ -109,6 +109,30 @@ const style = css`
}
`};
${is('error')`
color: ${props => props.theme.red};
background-color: ${props => props.theme.white};
border-color: ${props => props.theme.red};
font-weight: 600;
&:focus {
background-color: ${props => props.theme.white};
border-color: ${props => props.theme.red};
}
&:hover {
background-color: ${props => props.theme.whiteHover};
border-color: ${props => props.theme.red};
}
&:active,
&:active:hover,
&:active:focus {
background-color: ${props => props.theme.whiteActive};
border-color: ${props => props.theme.red};
}
`};
${is('tertiary', 'selected')`
background-color: rgba(59, 70, 204, 0.2);
color: ${props => props.theme.primaryActive};
@ -160,7 +184,8 @@ const style = css`
${is('icon')`
min-height: ${remcalc(48)};
min-width: ${remcalc(48)};
display: flex;
align-items: center;
`};
${is('fluid')`

View File

@ -14,9 +14,13 @@ const BaseOutlet = BaseCard.extend`
flex: 1 1 auto;
flex-direction: column;
border-width: 0;
padding: ${remcalc(13)};
padding: ${remcalc(12)};
margin-bottom: 0;
${is('big')`
padding: ${remcalc(24)};
`};
background-color: transparent;
${is('collapsed')`

View File

@ -95,6 +95,10 @@ const style = css`
width: ${remcalc(120)}
`};
${is('fluid')`
max-width: 100%;
`};
${is('xSmall')`
width: ${remcalc(80)}
`};

View File

@ -13,6 +13,7 @@ const {
Clipboard,
Close,
Cns,
Copy,
DataCenter,
Delete,
Dot,
@ -197,6 +198,24 @@ const {
</Icon>
<Label>CNS &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<Copy />
</Icon>
<Label>Copy &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon dark>
<Copy light />
</Icon>
<Label>Copy &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<Copy disabled />
</Icon>
<Label>Copy &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<DataCenter />

View File

@ -10,6 +10,7 @@ import {
Clipboard as BaseClipboard,
Close as BaseClose,
Cns as BaseCns,
Copy as BaseCopy,
DataCenter as BaseDataCenter,
Delete as BaseDelete,
Dot as BaseDot,
@ -46,6 +47,7 @@ export const Chevron = Baseline(BaseChevron);
export const Clipboard = Baseline(BaseClipboard);
export const Close = Baseline(BaseClose);
export const Cns = Baseline(BaseCns);
export const Copy = Baseline(BaseCopy);
export const DataCenter = Baseline(BaseDataCenter);
export const Delete = Baseline(BaseDelete);
export const Dot = Baseline(BaseDot);

View File

@ -93,9 +93,11 @@ export {
Arrow as ArrowIcon,
Bin as BinIcon,
Checkcircle as CheckcircleIcon,
Chevron as ChevronIcon,
Clipboard as ClipboardIcon,
Close as CloseIcon,
Cns as CnsIcon,
Copy as CopyIcon,
DataCenter as DataCenterIcon,
Delete as DeleteIcon,
Dot as DotIcon,

View File

@ -4,6 +4,7 @@ import styled from 'styled-components';
import { Popper as BasePopper, Arrow } from 'react-popper';
import rndId from 'rnd-id';
import remcalc from 'remcalc';
import is from 'styled-is';
import style from './style';
@ -12,13 +13,21 @@ const arrowClassName = rndId();
const Popper = styled(BasePopper)`
padding: ${remcalc(13)} ${remcalc(18)};
font-weight: normal;
${style({
background: 'text',
color: 'white',
border: 'transparent',
arrow: arrowClassName
})};
${is('success')`
${style({
background: 'green',
color: 'white',
border: 'transparent',
arrow: arrowClassName
})};
`};
`;
export default class Tooltip extends Component {

230
yarn.lock
View File

@ -251,8 +251,8 @@ ajv@^4.9.1:
json-stable-stringify "^1.0.1"
ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5, ajv@^5.2.0, ajv@^5.2.3, ajv@^5.3.0:
version "5.4.0"
resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.4.0.tgz#32d1cf08dbc80c432f426f12e10b2511f6b46474"
version "5.5.0"
resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.0.tgz#eb2840746e9dc48bd5e063a36e3fd400c5eab5a9"
dependencies:
co "^4.6.0"
fast-deep-equal "^1.0.0"
@ -456,6 +456,10 @@ apr-for-each@^1.0.6:
apr-engine-each "^1.0.3"
lodash.defaults "^4.2.0"
apr-intercept@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/apr-intercept/-/apr-intercept-1.0.4.tgz#01c64345f4af647b6b04f5aba4755195429b061a"
apr-main@^1.0.7:
version "1.0.7"
resolved "https://registry.yarnpkg.com/apr-main/-/apr-main-1.0.7.tgz#4f2592e20cb236b09c3c3d98a95088fbcc5fad4d"
@ -2090,12 +2094,12 @@ caniuse-api@^1.5.2:
lodash.uniq "^4.5.0"
caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
version "1.0.30000770"
resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000770.tgz#cf68ae1cb8a82f6d3c35df41c62dc6973e470244"
version "1.0.30000772"
resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000772.tgz#51aae891768286eade4a3d8319ea76d6a01b512b"
caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000770:
version "1.0.30000770"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000770.tgz#bc8e7f50b073273390db6ab357378909a14e9bdb"
version "1.0.30000772"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000772.tgz#78129622cabfed7af1ff38b64ab680a6a0865420"
capture-stack-trace@^1.0.0:
version "1.0.0"
@ -2177,8 +2181,8 @@ character-reference-invalid@^1.0.0:
resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.1.tgz#942835f750e4ec61a308e60c2ef8cc1011202efc"
chardet@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.0.tgz#0bbe1355ac44d7a3ed4a925707c4ef70f8190f6c"
version "0.4.2"
resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
checksum@^0.1.1:
version "0.1.1"
@ -2431,11 +2435,7 @@ commander@2.1.x, commander@~2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.1.0.tgz#d121bbae860d9992a3d517ba96f56588e47c6781"
commander@2.11.x, commander@~2.11.0:
version "2.11.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
commander@^2.11.0, commander@^2.9.0:
commander@2.12.x, commander@^2.11.0, commander@^2.9.0, commander@~2.12.1:
version "2.12.1"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.12.1.tgz#468635c4168d06145b9323356d1da84d14ac4a7a"
@ -3070,6 +3070,10 @@ dashdash@^1.12.0:
dependencies:
assert-plus "^1.0.0"
date-fns@^1.29.0:
version "1.29.0"
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.29.0.tgz#12e609cdcb935127311d04d33334e2960a2a54e6"
date-now@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
@ -3263,6 +3267,13 @@ diffie-hellman@^5.0.0:
miller-rabin "^4.0.0"
randombytes "^2.0.0"
dir-glob@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-2.0.0.tgz#0b205d2b6aef98238ca286598a8204d29d0a0034"
dependencies:
arrify "^1.0.1"
path-type "^3.0.0"
disable-scroll@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/disable-scroll/-/disable-scroll-0.3.0.tgz#486d309ec9873edb18aec7891c5576bf8b506c59"
@ -3295,12 +3306,11 @@ doctrine@1.5.0:
esutils "^2.0.2"
isarray "^1.0.0"
doctrine@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.0.tgz#c73d8d2909d22291e1a007a395804da8b665fe63"
doctrine@^2.0.0, doctrine@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.2.tgz#68f96ce8efc56cc42651f1faadb4f175273b0075"
dependencies:
esutils "^2.0.2"
isarray "^1.0.0"
dom-converter@~0.1:
version "0.1.4"
@ -3325,7 +3335,7 @@ domain-browser@^1.1.1:
version "1.1.7"
resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
domelementtype@1:
domelementtype@1, domelementtype@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2"
@ -3339,6 +3349,12 @@ domhandler@2.1:
dependencies:
domelementtype "1"
domhandler@^2.3.0:
version "2.4.1"
resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.1.tgz#892e47000a99be55bbf3774ffea0561d8879c259"
dependencies:
domelementtype "1"
domutils@1.1:
version "1.1.6"
resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.1.6.tgz#bddc3de099b9a2efacc51c623f28f416ecc57485"
@ -3352,13 +3368,20 @@ domutils@1.5.1:
dom-serializer "0"
domelementtype "1"
domutils@^1.5.1:
version "1.6.2"
resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.6.2.tgz#1958cc0b4c9426e9ed367fb1c8e854891b0fa3ff"
dependencies:
dom-serializer "0"
domelementtype "1"
dot-prop@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-3.0.0.tgz#1b708af094a49c9a0e7dbcad790aba539dac1177"
dependencies:
is-obj "^1.0.0"
dot-prop@^4.1.0:
dot-prop@^4.1.0, dot-prop@^4.1.1:
version "4.2.0"
resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
dependencies:
@ -3477,7 +3500,7 @@ enhanced-resolve@^3.4.0:
object-assign "^4.0.1"
tapable "^0.2.7"
entities@~1.1.1:
entities@^1.1.1, entities@~1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
@ -3520,8 +3543,8 @@ error-ex@^1.2.0, error-ex@^1.3.1:
is-arrayish "^0.2.1"
es-abstract@^1.6.1, es-abstract@^1.7.0:
version "1.9.0"
resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.9.0.tgz#690829a07cae36b222e7fd9b75c0d0573eb25227"
version "1.10.0"
resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.10.0.tgz#1ecb36c197842a00d8ee4c2dfd8646bb97d60864"
dependencies:
es-to-primitive "^1.1.1"
function-bind "^1.1.1"
@ -3634,8 +3657,8 @@ eslint-config-joyent-portal@3.2.0, eslint-config-joyent-portal@^3.2.0:
resolved "https://registry.yarnpkg.com/eslint-config-joyent-portal/-/eslint-config-joyent-portal-3.2.0.tgz#20de54035938ea6918160393dc4b387e2792d57f"
eslint-config-prettier@^2.6.0, eslint-config-prettier@^2.7.0:
version "2.8.0"
resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-2.8.0.tgz#929861a11de0249677686eba908118175d1a26bc"
version "2.9.0"
resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-2.9.0.tgz#5ecd65174d486c22dff389fe036febf502d468a3"
dependencies:
get-stdin "^5.0.1"
@ -3812,8 +3835,8 @@ eslint@4.10.0:
text-table "~0.2.0"
eslint@^4.11.0, eslint@^4.9.0:
version "4.11.0"
resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.11.0.tgz#39a8c82bc0a3783adf5a39fa27fdd9d36fac9a34"
version "4.12.0"
resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.12.0.tgz#a7ce78eba8cc8f2443acfbbc870cc31a65135884"
dependencies:
ajv "^5.3.0"
babel-code-frame "^6.22.0"
@ -3821,7 +3844,7 @@ eslint@^4.11.0, eslint@^4.9.0:
concat-stream "^1.6.0"
cross-spawn "^5.1.0"
debug "^3.0.1"
doctrine "^2.0.0"
doctrine "^2.0.2"
eslint-scope "^3.7.1"
espree "^3.5.2"
esquery "^1.0.0"
@ -3830,7 +3853,7 @@ eslint@^4.11.0, eslint@^4.9.0:
file-entry-cache "^2.0.0"
functional-red-black-tree "^1.0.1"
glob "^7.1.2"
globals "^9.17.0"
globals "^11.0.1"
ignore "^3.3.3"
imurmurhash "^0.1.4"
inquirer "^3.0.6"
@ -4025,7 +4048,7 @@ express-graphql@^0.6.6:
http-errors "^1.3.0"
raw-body "^2.1.0"
express@^4.13.3, express@^4.15.3:
express@^4.13.3, express@^4.15.3, express@^4.16.2:
version "4.16.2"
resolved "https://registry.yarnpkg.com/express/-/express-4.16.2.tgz#e35c6dfe2d64b7dca0a5cd4f21781be3299e076c"
dependencies:
@ -4691,6 +4714,10 @@ globals@^10.0.0:
version "10.4.0"
resolved "https://registry.yarnpkg.com/globals/-/globals-10.4.0.tgz#5c477388b128a9e4c5c5d01c7a2aca68c68b2da7"
globals@^11.0.1:
version "11.0.1"
resolved "https://registry.yarnpkg.com/globals/-/globals-11.0.1.tgz#12a87bb010e5154396acc535e1e43fc753b0e5e8"
globals@^9.17.0, globals@^9.18.0:
version "9.18.0"
resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
@ -4716,6 +4743,17 @@ globby@^6.1.0:
pify "^2.0.0"
pinkie-promise "^2.0.0"
globby@^7.0.0:
version "7.1.1"
resolved "https://registry.yarnpkg.com/globby/-/globby-7.1.1.tgz#fb2ccff9401f8600945dfada97440cca972b8680"
dependencies:
array-union "^1.0.1"
dir-glob "^2.0.0"
glob "^7.1.2"
ignore "^3.3.5"
pify "^3.0.0"
slash "^1.0.0"
globjoin@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/globjoin/-/globjoin-0.1.4.tgz#2f4494ac8919e3767c5cbb691e9f463324285d43"
@ -5009,17 +5047,17 @@ html-entities@1.2.1, html-entities@^1.2.0:
resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
html-minifier@^3.2.3:
version "3.5.6"
resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.6.tgz#7e4e661a09999599c7d8e8a2b8d7fb7430bb5c3e"
version "3.5.7"
resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.7.tgz#511e69bb5a8e7677d1012ebe03819aa02ca06208"
dependencies:
camel-case "3.0.x"
clean-css "4.1.x"
commander "2.11.x"
commander "2.12.x"
he "1.1.x"
ncname "1.0.x"
param-case "2.1.x"
relateurl "0.2.x"
uglify-js "3.1.x"
uglify-js "3.2.x"
html-tags@^2.0.0:
version "2.0.0"
@ -5047,6 +5085,17 @@ html-webpack-plugin@^2.30.1:
pretty-error "^2.0.2"
toposort "^1.0.0"
htmlparser2@^3.9.2:
version "3.9.2"
resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.9.2.tgz#1bdf87acca0f3f9e53fa4fcceb0f4b4cbb00b338"
dependencies:
domelementtype "^1.3.0"
domhandler "^2.3.0"
domutils "^1.5.1"
entities "^1.1.1"
inherits "^2.0.1"
readable-stream "^2.0.2"
htmlparser2@~3.3.0:
version "3.3.0"
resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.3.0.tgz#cc70d05a59f6542e43f0e685c982e14c924a9efe"
@ -5156,7 +5205,7 @@ iferr@^0.1.5:
version "0.1.5"
resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
ignore@^3.3.3:
ignore@^3.3.3, ignore@^3.3.5:
version "3.3.7"
resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.7.tgz#612289bfb3c220e186a58118618d5be8c1bab021"
@ -7003,9 +7052,9 @@ mime@1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
mime@^1.2.11, mime@^1.4.1:
version "1.5.0"
resolved "https://registry.yarnpkg.com/mime/-/mime-1.5.0.tgz#59c20e03ae116089edeb7d3b34a6788c5b3cccea"
mime@^1.2.11, mime@^1.4.1, mime@^1.5.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
mimic-fn@^1.0.0:
version "1.1.0"
@ -7104,8 +7153,8 @@ multicast-dns-service-types@^1.1.0:
resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"
multicast-dns@^6.0.1:
version "6.2.0"
resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.2.0.tgz#13f22d0c32dc5ee82a32878e3c380d875b3eab22"
version "6.2.1"
resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.2.1.tgz#c5035defa9219d30640558a49298067352098060"
dependencies:
dns-packet "^1.0.1"
thunky "^0.1.0"
@ -7725,7 +7774,7 @@ path-to-regexp@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-2.1.0.tgz#7e30f9f5b134bd6a28ffc2e3ef1e47075ac5259b"
path-type@3.0.0:
path-type@3.0.0, path-type@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
dependencies:
@ -7890,6 +7939,14 @@ postcss-flexbugs-fixes@3.2.0:
dependencies:
postcss "^6.0.1"
postcss-html@^0.11.0:
version "0.11.0"
resolved "https://registry.yarnpkg.com/postcss-html/-/postcss-html-0.11.0.tgz#03a3ff3116f8a0fe0d46316ea21893d4db4b63af"
dependencies:
htmlparser2 "^3.9.2"
remark "^8.0.0"
unist-util-find-all-after "^1.0.1"
postcss-less@^1.1.0:
version "1.1.3"
resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-1.1.3.tgz#6930525271bfe38d5793d33ac09c1a546b87bb51"
@ -8088,7 +8145,7 @@ postcss-scss@^1.0.2:
dependencies:
postcss "^6.0.3"
postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2, postcss-selector-parser@^2.2.3:
postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2:
version "2.2.3"
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz#f9437788606c3c9acee16ffe8d8b16297f27bb90"
dependencies:
@ -8096,6 +8153,14 @@ postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2, postcss-selector
indexes-of "^1.0.1"
uniq "^1.0.1"
postcss-selector-parser@^3.1.0:
version "3.1.1"
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz#4f875f4afb0c96573d5cf4d74011aee250a7e865"
dependencies:
dot-prop "^4.1.1"
indexes-of "^1.0.1"
uniq "^1.0.1"
postcss-svgo@^2.1.1:
version "2.1.6"
resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-2.1.6.tgz#b6df18aa613b666e133f08adb5219c2684ac108d"
@ -8980,8 +9045,8 @@ redux-actions@^2.2.1:
reduce-reducers "^0.1.0"
redux-form@^7.1.2:
version "7.1.2"
resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-7.1.2.tgz#6b0f25c57fd8130a05ce00f6435fe1b051f402af"
version "7.2.0"
resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-7.2.0.tgz#4465d9bc863e40b1704695d672bea75fcf81db04"
dependencies:
deep-equal "^1.0.1"
es6-error "^4.0.0"
@ -10175,8 +10240,8 @@ stylelint-config-styled-components@^0.1.1:
resolved "https://registry.yarnpkg.com/stylelint-config-styled-components/-/stylelint-config-styled-components-0.1.1.tgz#b408388d7c687833ab4be4c4e6522d97d2827ede"
stylelint-processor-styled-components@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/stylelint-processor-styled-components/-/stylelint-processor-styled-components-1.1.0.tgz#27658def7844629960e194ae1b1af6b13f6e83d8"
version "1.1.1"
resolved "https://registry.yarnpkg.com/stylelint-processor-styled-components/-/stylelint-processor-styled-components-1.1.1.tgz#c16ee9d6cda0a8c150c3b620812960bdf30958dc"
dependencies:
babel-traverse "^6.16.0"
babylon "^6.12.0"
@ -10184,8 +10249,8 @@ stylelint-processor-styled-components@^1.0.0:
typescript-eslint-parser "^9.0.0"
stylelint@^8.2.0:
version "8.2.0"
resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-8.2.0.tgz#6a15044553fb5c3143b16d62013a370314495b0d"
version "8.3.1"
resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-8.3.1.tgz#424c822f32c88e85025b55d72c7b98355e3fa6de"
dependencies:
autoprefixer "^7.1.2"
balanced-match "^1.0.0"
@ -10195,7 +10260,7 @@ stylelint@^8.2.0:
execall "^1.0.0"
file-entry-cache "^2.0.0"
get-stdin "^5.0.1"
globby "^6.1.0"
globby "^7.0.0"
globjoin "^0.1.4"
html-tags "^2.0.0"
ignore "^3.3.3"
@ -10209,13 +10274,14 @@ stylelint@^8.2.0:
normalize-selector "^0.2.0"
pify "^3.0.0"
postcss "^6.0.6"
postcss-html "^0.11.0"
postcss-less "^1.1.0"
postcss-media-query-parser "^0.2.3"
postcss-reporter "^5.0.0"
postcss-resolve-nested-selector "^0.1.1"
postcss-safe-parser "^3.0.1"
postcss-scss "^1.0.2"
postcss-selector-parser "^2.2.3"
postcss-selector-parser "^3.1.0"
postcss-value-parser "^3.3.0"
resolve-from "^4.0.0"
specificity "^0.3.1"
@ -10226,8 +10292,8 @@ stylelint@^8.2.0:
table "^4.0.1"
stylis@3.x:
version "3.4.4"
resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.4.tgz#7dbc7e3ca3c8707b796cd217fe6f8fbe81e78464"
version "3.4.5"
resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.5.tgz#d7b9595fc18e7b9c8775eca8270a9a1d3e59806e"
sugarss@^1.0.0:
version "1.0.1"
@ -10665,17 +10731,17 @@ ua-parser-js@^0.7.9:
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
uglify-es@^3.0.24:
version "3.1.10"
resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.1.10.tgz#f1840c3b52771d17555a02ce158cf46f689384bd"
version "3.2.0"
resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.2.0.tgz#fbbfb9dc465ec7e5065701b9720d0de977d0bc24"
dependencies:
commander "~2.11.0"
commander "~2.12.1"
source-map "~0.6.1"
uglify-js@3.1.x, uglify-js@^3.0.13:
version "3.1.10"
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.1.10.tgz#c4a5f9b5c6276b40cb971c1d97c9eeb26af9509c"
uglify-js@3.2.x, uglify-js@^3.0.13:
version "3.2.0"
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.2.0.tgz#cb411ee4ca0e0cadbfe3a4e1a1da97e6fa0d19c1"
dependencies:
commander "~2.11.0"
commander "~2.12.1"
source-map "~0.6.1"
uglify-js@^2.6, uglify-js@^2.8.29:
@ -10776,7 +10842,13 @@ unique-string@^1.0.0:
dependencies:
crypto-random-string "^1.0.0"
unist-util-is@^2.1.1:
unist-util-find-all-after@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/unist-util-find-all-after/-/unist-util-find-all-after-1.0.1.tgz#4e5512abfef7e0616781aecf7b1ed751c00af908"
dependencies:
unist-util-is "^2.0.0"
unist-util-is@^2.0.0, unist-util-is@^2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-2.1.1.tgz#0c312629e3f960c66e931e812d3d80e77010947b"
@ -11118,16 +11190,16 @@ webpack-common-shake@^1.5.3:
webpack-sources "^1.0.1"
webpack-dev-middleware@^1.11.0:
version "1.12.1"
resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.12.1.tgz#338be3ca930973be1c2ce07d84d275e997e1a25a"
version "1.12.2"
resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.12.2.tgz#f8fc1120ce3b4fc5680ceecb43d777966b21105e"
dependencies:
memory-fs "~0.4.1"
mime "^1.4.1"
mime "^1.5.0"
path-is-absolute "^1.0.0"
range-parser "^1.0.3"
time-stamp "^2.0.0"
webpack-dev-server@2.9.4, webpack-dev-server@^2.8.2:
webpack-dev-server@2.9.4:
version "2.9.4"
resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.9.4.tgz#7883e61759c6a4b33e9b19ec4037bd4ab61428d1"
dependencies:
@ -11159,6 +11231,38 @@ webpack-dev-server@2.9.4, webpack-dev-server@^2.8.2:
webpack-dev-middleware "^1.11.0"
yargs "^6.6.0"
webpack-dev-server@^2.8.2:
version "2.9.5"
resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.9.5.tgz#79336fba0087a66ae491f4869f6545775b18daa8"
dependencies:
ansi-html "0.0.7"
array-includes "^3.0.3"
bonjour "^3.5.0"
chokidar "^1.6.0"
compression "^1.5.2"
connect-history-api-fallback "^1.3.0"
debug "^3.1.0"
del "^3.0.0"
express "^4.16.2"
html-entities "^1.2.0"
http-proxy-middleware "~0.17.4"
import-local "^0.1.1"
internal-ip "1.2.0"
ip "^1.1.5"
killable "^1.0.0"
loglevel "^1.4.1"
opn "^5.1.0"
portfinder "^1.0.9"
selfsigned "^1.9.1"
serve-index "^1.7.2"
sockjs "0.3.18"
sockjs-client "1.1.4"
spdy "^3.4.1"
strip-ansi "^3.0.1"
supports-color "^4.2.1"
webpack-dev-middleware "^1.11.0"
yargs "^6.6.0"
webpack-manifest-plugin@1.3.2:
version "1.3.2"
resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-1.3.2.tgz#5ea8ee5756359ddc1d98814324fe43496349a7d4"