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 2017-10-04 18:30:10 +01:00 committed by Sérgio Ramos
parent 525440c09b
commit 8097d2f5ba
17 changed files with 295 additions and 321 deletions

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

View File

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

View File

@ -1,3 +0,0 @@
```
<CloseButton />
```

View File

@ -30,14 +30,6 @@ export {
Container as Breadcrumb
} from './breadcrumb';
export {
Tooltip,
TooltipButton,
TooltipDivider,
TooltipList,
TooltipLabel
} from './tooltip';
export {
default as Progressbar,
ProgressbarButton,

View File

@ -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(() => {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,7 +0,0 @@
import styled from 'styled-components';
export default styled.ul`
margin: 0;
padding: 0;
list-style-type: none;
`;

View File

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

View File

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

View File

@ -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
}
]
} />
```

View File

@ -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'
}
}
},