fix(ui-toolkit): small fixes
- Adds sidebar design - Adds correct spacing to headers and text - Changes color design to look more like spec - Fixes papyrus font - Adds Roboto Mono as default code font
This commit is contained in:
Sara Vieira
Sérgio Ramos
parent
525440c09b
commit
8097d2f5ba
89
packages/ui-toolkit/etc/style.css
Normal file
89
packages/ui-toolkit/etc/style.css
Normal file
@ -0,0 +1,89 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
|
||||
|
||||
body .rsg--sidebar-4 {
|
||||
padding: 36px 30px;
|
||||
}
|
||||
|
||||
body h1.rsg--root-10, h2.rsg--root-10, h3.rsg--root-10, h3.rsg--para-24 {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
main.rsg--content-3 {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
h4.rsg--h4-29,
|
||||
h6.rsg--h6-31 {
|
||||
margin-bottom: 0;
|
||||
font-weight: 600;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
li.rsg--li-35 {
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
p.rsg--p-32 {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 36px;
|
||||
}
|
||||
|
||||
.rsg--sidebar-4 a.rsg--link-72 {
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.rsg--sidebar-4 a.rsg--heading-71 {
|
||||
font-size: 17px;
|
||||
margin-bottom: 12px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.rsg--sidebar-4 .rsg--logo-5 {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.rsg--sidebar-4 .rsg--search-66 {
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.rsg--sidebar-4 .rsg--isChild-70 {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.rsg--sidebar-4 .rsg--input-67 {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #D8D8D8;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05), inset 0px 3px 0px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
padding: 8px 16px;
|
||||
width: 240px;
|
||||
color: #494949;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.rsg--sidebar-4 .rsg--list-68 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
.rsg--sidebar-4 ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
|
||||
color: #494949;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.rsg--sidebar-4 ::-moz-placeholder { /* Firefox 19+ */
|
||||
color: #494949;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.rsg--sidebar-4 :-ms-input-placeholder { /* IE 10+ */
|
||||
color: #494949;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.rsg--sidebar-4 :-moz-placeholder { /* Firefox 18- */
|
||||
color: #494949;
|
||||
opacity: 0.5;
|
||||
}
|
||||
@ -1,11 +1,7 @@
|
||||
import { css } from 'styled-components';
|
||||
import { fonts, loadedFontFamily, unloadedFontFamily } from '../typography';
|
||||
import { loadedFontFamily } from '../typography';
|
||||
|
||||
export default ({ theme }) => css`
|
||||
${fonts.libreFranklin.normal};
|
||||
${fonts.libreFranklin.medium};
|
||||
${fonts.libreFranklin.semibold};
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
@ -21,7 +17,7 @@ export default ({ theme }) => css`
|
||||
padding: 0;
|
||||
background: ${theme.background};
|
||||
|
||||
${unloadedFontFamily};
|
||||
${loadedFontFamily};
|
||||
}
|
||||
|
||||
html,
|
||||
@ -30,10 +26,6 @@ export default ({ theme }) => css`
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.fonts-loaded body {
|
||||
${loadedFontFamily};
|
||||
}
|
||||
|
||||
.CodeMirror,
|
||||
.ReactCodeMirror {
|
||||
height: 100% !important;
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
```
|
||||
<CloseButton />
|
||||
```
|
||||
@ -30,14 +30,6 @@ export {
|
||||
Container as Breadcrumb
|
||||
} from './breadcrumb';
|
||||
|
||||
export {
|
||||
Tooltip,
|
||||
TooltipButton,
|
||||
TooltipDivider,
|
||||
TooltipList,
|
||||
TooltipLabel
|
||||
} from './tooltip';
|
||||
|
||||
export {
|
||||
default as Progressbar,
|
||||
ProgressbarButton,
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import { Component } from 'react';
|
||||
import { injectGlobal, withTheme } from 'styled-components';
|
||||
import { injectGlobal } from 'styled-components';
|
||||
import FontFaceObserver from 'fontfaceobserver';
|
||||
import { global } from '../base';
|
||||
import { fontFaces } from '../typography/fonts';
|
||||
import theme from '../theme';
|
||||
import { loadedFontFamily } from '../typography';
|
||||
|
||||
const families = Object.keys(
|
||||
Object.values(fontFaces)
|
||||
@ -16,7 +17,38 @@ class RootContainer extends Component {
|
||||
componentWillMount() {
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
injectGlobal`
|
||||
${global(this.props)}
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html {
|
||||
line-height: 1.15;
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 15px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: ${theme.background};
|
||||
|
||||
${loadedFontFamily};
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.CodeMirror,
|
||||
.ReactCodeMirror {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.CodeMirror {
|
||||
border: solid 1px ${theme.grey};
|
||||
}
|
||||
`;
|
||||
|
||||
Promise.all(observers.map(obs => obs.load())).then(() => {
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import React, { Component } from 'react';
|
||||
import { ThemeProvider, injectGlobal } from 'styled-components';
|
||||
import theme from '../theme';
|
||||
import Base, { global } from '../base';
|
||||
import Base from '../base';
|
||||
import { loadedFontFamily } from '../typography';
|
||||
|
||||
const StyledBase = Base.extend`
|
||||
/* trick prettier */
|
||||
@ -12,7 +13,38 @@ export default class Wrapper extends Component {
|
||||
componentWillMount() {
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
injectGlobal`
|
||||
${global}
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html {
|
||||
line-height: 1.15;
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 15px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: ${theme.background};
|
||||
|
||||
${loadedFontFamily};
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.CodeMirror,
|
||||
.ReactCodeMirror {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.CodeMirror {
|
||||
border: solid 1px ${theme.grey};
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@ -1,25 +1,23 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { Strong } from 'normalized-styled-components';
|
||||
import { Col, Row } from 'react-styled-flexboxgrid';
|
||||
import { Row } from 'react-styled-flexboxgrid';
|
||||
import remcalc from 'remcalc';
|
||||
import titleCase from 'title-case';
|
||||
import tinycolor from 'tinycolor2';
|
||||
import { bottomShaddow } from '../boxes';
|
||||
import P from '../text/p';
|
||||
import theme from './';
|
||||
import theme, { base } from './';
|
||||
|
||||
const Box = styled.div`
|
||||
margin-bottom: ${remcalc(10)};
|
||||
box-shadow: ${bottomShaddow};
|
||||
border: solid ${remcalc(1)} ${props => props.border};
|
||||
width: ${remcalc(130)};
|
||||
margin-bottom: ${remcalc(46)};
|
||||
`;
|
||||
|
||||
const InnerBox = styled.div`
|
||||
padding: ${remcalc(18)};
|
||||
margin-top: ${remcalc(-7)};
|
||||
background: ${props => props.background};
|
||||
color: ${props => props.text};
|
||||
margin-top: ${remcalc(6)};
|
||||
line-height: 24px;
|
||||
font-size: 16px;
|
||||
color: ${theme.text};
|
||||
`;
|
||||
// Border: solid ${remcalc(1)} ${props => props.border};
|
||||
// border-top-width: 0;
|
||||
@ -27,8 +25,9 @@ const InnerBox = styled.div`
|
||||
const Preview = styled.div`
|
||||
display: inline-block;
|
||||
background: ${props => props.hex};
|
||||
height: ${remcalc(100)};
|
||||
width: 100%;
|
||||
width: ${remcalc(96)};
|
||||
height: ${remcalc(96)};
|
||||
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05);
|
||||
`;
|
||||
|
||||
const Paragraph = P.extend`
|
||||
@ -36,50 +35,20 @@ const Paragraph = P.extend`
|
||||
margin: 0;
|
||||
`;
|
||||
|
||||
const baseColorNames = Object.keys(theme).filter(
|
||||
name => typeof theme[name] === 'string'
|
||||
);
|
||||
|
||||
const mostReadable = hex =>
|
||||
tinycolor
|
||||
.mostReadable(hex, baseColorNames.map(name => theme[name]))
|
||||
.toHexString();
|
||||
|
||||
const borderColor = hex =>
|
||||
tinycolor
|
||||
.mostReadable(hex, [
|
||||
theme.text,
|
||||
theme.topologyBackground,
|
||||
theme.secondaryActive,
|
||||
theme.secondaryHover,
|
||||
theme.secondary
|
||||
])
|
||||
.toHexString();
|
||||
|
||||
const Color = ({ name, hex }) => (
|
||||
<Box border={borderColor(hex)}>
|
||||
<Box>
|
||||
<Preview hex={hex} />
|
||||
<InnerBox background={hex} text={mostReadable(hex)}>
|
||||
<InnerBox background={hex}>
|
||||
<Paragraph>
|
||||
<Strong>Name</Strong>: <br />
|
||||
{titleCase(name)}
|
||||
</Paragraph>
|
||||
<br />
|
||||
<Paragraph>
|
||||
<Strong>Property</Strong>: <br />
|
||||
<code>{name}</code>
|
||||
</Paragraph>
|
||||
<br />
|
||||
<Paragraph>
|
||||
<Strong>Hex</Strong>: <br />
|
||||
<code>{hex.toUpperCase()}</code>
|
||||
<Strong>{titleCase(name)}</Strong>
|
||||
</Paragraph>
|
||||
<Paragraph>{hex.toUpperCase()}</Paragraph>
|
||||
</InnerBox>
|
||||
</Box>
|
||||
);
|
||||
|
||||
export default () => {
|
||||
const colors = Object.keys(theme)
|
||||
const colors = Object.keys(base)
|
||||
.filter(name => typeof theme[name] === 'string')
|
||||
.sort((a, b) => {
|
||||
const _a = tinycolor(theme[a]).toHsl().h;
|
||||
@ -87,11 +56,7 @@ export default () => {
|
||||
|
||||
return _a >= _b ? -1 : 1;
|
||||
})
|
||||
.map(name => (
|
||||
<Col key={name} xs={4}>
|
||||
<Color name={name} hex={theme[name]} />
|
||||
</Col>
|
||||
));
|
||||
.map(name => <Color key={name} name={name} hex={theme[name]} />);
|
||||
|
||||
return <Row>{colors}</Row>;
|
||||
};
|
||||
|
||||
@ -18,7 +18,6 @@ const primary = {
|
||||
primaryHover: '#475AD1',
|
||||
primaryActive: '#2D3884',
|
||||
primaryDesaturated: '#3B4AAF',
|
||||
primaryDesaturatedHover: '#475AD1',
|
||||
primaryDesaturatedActive: '#2D3884'
|
||||
};
|
||||
|
||||
@ -50,17 +49,16 @@ export const base = {
|
||||
...tertiary,
|
||||
text: '#494949', // used
|
||||
grey: '#D8D8D8', // used
|
||||
greyDark: '#CCC',
|
||||
greyLight: '#bdbdbd', // used
|
||||
greyTransparent: 'rgba(73,73,73, 0.8)',
|
||||
disabled: '#FAFAFA', // used
|
||||
background: '#FAFAFA', // used
|
||||
green: '#00AF66', // used
|
||||
greenDark: '#009858', // not used - BORDER
|
||||
greenDark: '#009858', // used
|
||||
orange: '#E38200', // used
|
||||
orangeDark: '#CB7400', // not used - BORDER
|
||||
orangeDark: '#CB7400', // used
|
||||
red: '#DA4B42', // used
|
||||
redDark: '#CD251B', // not used - BORDER
|
||||
redDark: '#CD251B', // used
|
||||
blue: '#364ACD'
|
||||
};
|
||||
|
||||
@ -114,8 +112,6 @@ export default {
|
||||
notifications,
|
||||
inputError,
|
||||
inputWarning,
|
||||
// miniBackground,
|
||||
// seperator,
|
||||
topologyBackground,
|
||||
brandBackground
|
||||
};
|
||||
|
||||
@ -1,49 +0,0 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import unitcalc from 'unitcalc';
|
||||
import is from 'styled-is';
|
||||
import theme from '../theme';
|
||||
import Button from '../button';
|
||||
|
||||
const StyledButton = styled(Button)`
|
||||
width: 100%;
|
||||
padding: ${unitcalc(1)} ${unitcalc(3)};
|
||||
background-color: ${theme.white};
|
||||
color: ${theme.secondary};
|
||||
text-align: left;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
|
||||
&:focus {
|
||||
background-color: ${theme.white};
|
||||
color: ${theme.primary};
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: ${theme.white};
|
||||
color: ${theme.primary};
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:active:hover,
|
||||
&:active:focus {
|
||||
background-color: ${theme.white};
|
||||
color: ${theme.primary};
|
||||
border: none;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
${is('disabled')`
|
||||
color: ${props => props.theme.grey};
|
||||
`};
|
||||
`;
|
||||
|
||||
const TooltipButton = props => <StyledButton {...props} />;
|
||||
|
||||
export default TooltipButton;
|
||||
@ -1,10 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
import unitcalc from 'unitcalc';
|
||||
import { border } from '../boxes';
|
||||
|
||||
const TooltipDivider = styled.div`
|
||||
border-top: ${border.unchecked};
|
||||
margin: ${unitcalc(1)} 0 ${unitcalc(1.5)} 0;
|
||||
`;
|
||||
|
||||
export default TooltipDivider;
|
||||
@ -1,5 +0,0 @@
|
||||
export { default as Tooltip } from './tooltip';
|
||||
export { default as TooltipButton } from './button';
|
||||
export { default as TooltipDivider } from './divider';
|
||||
export { default as TooltipList } from './list';
|
||||
export { default as TooltipLabel } from './label';
|
||||
@ -1,9 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
import P from '../text/p';
|
||||
|
||||
export default styled(P)`
|
||||
margin: 0 ${remcalc(18)};
|
||||
color: ${props => props.theme.white};
|
||||
white-space: nowrap;
|
||||
`;
|
||||
@ -1,7 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export default styled.ul`
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
`;
|
||||
@ -1,131 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'styled-components';
|
||||
import unitcalc from 'unitcalc';
|
||||
import remcalc from 'remcalc';
|
||||
import theme from '../theme';
|
||||
import { border, borderRadius, tooltipShadow } from '../boxes';
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
position: absolute;
|
||||
top: ${props => props.top};
|
||||
left: ${props => props.left};
|
||||
bottom: ${props => props.bottoms};
|
||||
right: ${props => props.right};
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledInnerContainer = styled.div`
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
top: ${remcalc(5)};
|
||||
left: -50%;
|
||||
margin: 0;
|
||||
padding: ${unitcalc(2)} 0;
|
||||
background-color: ${props =>
|
||||
props.secondary ? props.theme.secondary : props.theme.white};
|
||||
border: ${props => (props.secondary ? border.secondary : border.unchecked)};
|
||||
box-shadow: ${tooltipShadow};
|
||||
border-radius: ${borderRadius};
|
||||
z-index: 1000;
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
height: 0;
|
||||
width: 0;
|
||||
border: solid transparent;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-bottom-color: ${props =>
|
||||
props.secondary ? props.theme.secondary : theme.white};
|
||||
border-width: ${remcalc(3)};
|
||||
margin-left: ${remcalc(-3)};
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-bottom-color: ${props =>
|
||||
props.secondary ? props.theme.secondaryActive : theme.grey};
|
||||
border-width: ${remcalc(5)};
|
||||
margin-left: ${remcalc(-5)};
|
||||
}
|
||||
`;
|
||||
|
||||
/**
|
||||
* @example ./usage.md
|
||||
*/
|
||||
class Tooltip extends Component {
|
||||
componentDidMount() {
|
||||
this.windowClickHandler = this.handleWindowClick.bind(this);
|
||||
this.windowClickCounter = 0;
|
||||
window.addEventListener('click', this.windowClickHandler);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
this.windowClickCounter = 0;
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener('click', this.windowClickHandler);
|
||||
}
|
||||
|
||||
handleWindowClick(evt) {
|
||||
if (this.windowClickCounter) {
|
||||
if (this.props.onBlur) {
|
||||
this.props.onBlur();
|
||||
}
|
||||
}
|
||||
this.windowClickCounter++;
|
||||
}
|
||||
|
||||
render() {
|
||||
let {
|
||||
children,
|
||||
top = 'auto',
|
||||
left = 'auto',
|
||||
bottom = 'auto',
|
||||
right = 'auto',
|
||||
secondary
|
||||
} = this.props;
|
||||
|
||||
if (typeof top === 'number') {
|
||||
top = `${top}px`;
|
||||
}
|
||||
if (typeof left === 'number') {
|
||||
left = `${left}px`;
|
||||
}
|
||||
if (typeof bottom === 'number') {
|
||||
bottom = `${bottom}px`;
|
||||
}
|
||||
if (typeof right === 'number') {
|
||||
right = `${right}px`;
|
||||
}
|
||||
|
||||
return (
|
||||
<StyledContainer top={top} left={left} bottom={bottom} right={right}>
|
||||
<StyledInnerContainer secondary={secondary}>
|
||||
{children}
|
||||
</StyledInnerContainer>
|
||||
</StyledContainer>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Tooltip.propTypes = {
|
||||
children: PropTypes.node,
|
||||
top: PropTypes.string,
|
||||
left: PropTypes.string,
|
||||
bottom: PropTypes.string,
|
||||
right: PropTypes.string,
|
||||
onBlur: PropTypes.func,
|
||||
secondary: PropTypes.boolean
|
||||
};
|
||||
|
||||
export default Tooltip;
|
||||
@ -1,15 +0,0 @@
|
||||
```
|
||||
const Tooltip = require('./tooltip').default;
|
||||
const TooltipButton = require('./button').default;
|
||||
const TooltipDivider = require('./divider').default;
|
||||
|
||||
<div style={{ position: 'relative', height: '175px' }}>
|
||||
<Tooltip top='5px' left='55px'>
|
||||
<TooltipButton>Scale</TooltipButton>
|
||||
<TooltipButton>Restart</TooltipButton>
|
||||
<TooltipButton>Stop</TooltipButton>
|
||||
<TooltipDivider />
|
||||
<TooltipButton>Delete</TooltipButton>
|
||||
</Tooltip>
|
||||
</div>
|
||||
```
|
||||
@ -1,4 +1,94 @@
|
||||
```
|
||||
const data = require('./data/wp.json');
|
||||
<Topology services={data} />
|
||||
<Topology services=
|
||||
{[
|
||||
{
|
||||
"index": 0,
|
||||
"id": "af6a5cd2-291f-490b-bf3b-141b010635db",
|
||||
"name": "frontend",
|
||||
"slug": "frontend",
|
||||
"status": "ACTIVE",
|
||||
"__typename": "Service",
|
||||
"branches": [],
|
||||
"connections": [
|
||||
"aea06a05-830a-46d3-bdc1-9dcba97303de"
|
||||
],
|
||||
"instances": [
|
||||
{
|
||||
"id": "f1fb3c1d-9e0e-4538-b2ad-1124bce2459e",
|
||||
"status": "RUNNING",
|
||||
"healthy": "UNKNOWN",
|
||||
"__typename": "Instance"
|
||||
},
|
||||
{
|
||||
"id": "c5c7ae33-cfe1-43cc-9e9b-6f453de3888d",
|
||||
"status": "FAILED",
|
||||
"healthy": "UNAVAILABLE",
|
||||
"__typename": "Instance"
|
||||
}
|
||||
],
|
||||
"instanceStatuses": [
|
||||
{
|
||||
"status": "RUNNING",
|
||||
"count": 1
|
||||
},
|
||||
{
|
||||
"status": "FAILED",
|
||||
"count": 1
|
||||
}
|
||||
],
|
||||
"instancesActive": true,
|
||||
"instancesHealthy": {
|
||||
"total": 2,
|
||||
"healthy": 0
|
||||
},
|
||||
"transitionalStatus": false,
|
||||
"isConsul": false,
|
||||
"connected": true
|
||||
},
|
||||
{
|
||||
"index": 1,
|
||||
"id": "af6a5cd2-291f-490b-bf3b-asdasads",
|
||||
"name": "consul",
|
||||
"slug": "consul",
|
||||
"status": "ACTIVE",
|
||||
"__typename": "Service",
|
||||
"branches": [],
|
||||
"connections": [
|
||||
"aea06a05-830a-46d3-bdc1-9dcba97303de"
|
||||
],
|
||||
"instances": [
|
||||
{
|
||||
"id": "f1fb3c1d-9e0e-4538-b2ad-1124bce2459e",
|
||||
"status": "RUNNING",
|
||||
"healthy": "UNKNOWN",
|
||||
"__typename": "Instance"
|
||||
},
|
||||
{
|
||||
"id": "c5c7ae33-cfe1-43cc-9e9b-6f453de3888d",
|
||||
"status": "FAILED",
|
||||
"healthy": "UNAVAILABLE",
|
||||
"__typename": "Instance"
|
||||
}
|
||||
],
|
||||
"instanceStatuses": [
|
||||
{
|
||||
"status": "RUNNING",
|
||||
"count": 1
|
||||
},
|
||||
{
|
||||
"status": "RUNNING",
|
||||
"count": 1
|
||||
}
|
||||
],
|
||||
"instancesActive": true,
|
||||
"instancesHealthy": {
|
||||
"total": 2,
|
||||
"healthy": 2
|
||||
},
|
||||
"transitionalStatus": false,
|
||||
"isConsul": true,
|
||||
"connected": true
|
||||
}
|
||||
]
|
||||
} />
|
||||
```
|
||||
@ -5,6 +5,7 @@ const snapguidist = require('snapguidist');
|
||||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
require: [path.join(__dirname, 'etc/style.css')],
|
||||
webpackConfig: Object.assign(webpackConfig, {
|
||||
resolve: Object.assign(webpackConfig.resolve, {
|
||||
alias: Object.assign(webpackConfig.resolve.alias, {
|
||||
@ -89,9 +90,7 @@ module.exports = {
|
||||
'src/slider/index.js',
|
||||
'src/form/toggle.js',
|
||||
'src/topology/index.js',
|
||||
'src/form/number-input.js',
|
||||
'src/dropdown/index.js',
|
||||
'src/tooltip/tooltip.js'
|
||||
'src/form/number-input.js'
|
||||
]
|
||||
}
|
||||
],
|
||||
@ -99,7 +98,8 @@ module.exports = {
|
||||
color: {
|
||||
base: '#494949',
|
||||
link: '#3B46CC',
|
||||
linkHover: '#5a62c5'
|
||||
linkHover: '#5a62c5',
|
||||
sidebarBackground: '#1E313B'
|
||||
},
|
||||
fontSize: {
|
||||
base: 15,
|
||||
@ -113,11 +113,26 @@ module.exports = {
|
||||
h6: 12
|
||||
},
|
||||
fontFamily: {
|
||||
base: '"Libre Franklin", -apple-system, sans-serif'
|
||||
}
|
||||
base: ['"Libre Franklin", -apple-system, sans-serif'],
|
||||
monospace: [
|
||||
'Roboto Mono',
|
||||
'Consolas',
|
||||
'"Liberation Mono"',
|
||||
'Menlo',
|
||||
'monospace'
|
||||
]
|
||||
},
|
||||
sidebarWidth: 300,
|
||||
spaceFactor: 6
|
||||
},
|
||||
styles: {
|
||||
Styleguide: {
|
||||
sidebar: {
|
||||
color: '#FFFFFF'
|
||||
}
|
||||
},
|
||||
Logo: {
|
||||
border: 'none',
|
||||
logo: {
|
||||
'text-indent': -999,
|
||||
'background-image': 'url("./etc/joyent-white.png")',
|
||||
@ -126,7 +141,7 @@ module.exports = {
|
||||
'background-position': 0,
|
||||
height: 39,
|
||||
padding: 0,
|
||||
margin: 0
|
||||
margin: '0 auto'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user