+
-
+
- Name:
- {titleCase(name)}
-
-
-
- Property:
- {name}
-
-
-
- Hex:
- {hex.toUpperCase()}
+ {titleCase(name)}
+ {hex.toUpperCase()}
);
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 => (
-
-
-
- ));
+ .map(name => );
return {colors}
;
};
diff --git a/packages/ui-toolkit/src/theme/index.js b/packages/ui-toolkit/src/theme/index.js
index 947c28d2..8588c23f 100644
--- a/packages/ui-toolkit/src/theme/index.js
+++ b/packages/ui-toolkit/src/theme/index.js
@@ -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
};
diff --git a/packages/ui-toolkit/src/tooltip/button.js b/packages/ui-toolkit/src/tooltip/button.js
deleted file mode 100644
index a7940c2e..00000000
--- a/packages/ui-toolkit/src/tooltip/button.js
+++ /dev/null
@@ -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 => ;
-
-export default TooltipButton;
diff --git a/packages/ui-toolkit/src/tooltip/divider.js b/packages/ui-toolkit/src/tooltip/divider.js
deleted file mode 100644
index dec7025e..00000000
--- a/packages/ui-toolkit/src/tooltip/divider.js
+++ /dev/null
@@ -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;
diff --git a/packages/ui-toolkit/src/tooltip/index.js b/packages/ui-toolkit/src/tooltip/index.js
deleted file mode 100644
index 398fc34b..00000000
--- a/packages/ui-toolkit/src/tooltip/index.js
+++ /dev/null
@@ -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';
diff --git a/packages/ui-toolkit/src/tooltip/label.js b/packages/ui-toolkit/src/tooltip/label.js
deleted file mode 100644
index dc739412..00000000
--- a/packages/ui-toolkit/src/tooltip/label.js
+++ /dev/null
@@ -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;
-`;
diff --git a/packages/ui-toolkit/src/tooltip/list.js b/packages/ui-toolkit/src/tooltip/list.js
deleted file mode 100644
index 8966240d..00000000
--- a/packages/ui-toolkit/src/tooltip/list.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-
-export default styled.ul`
- margin: 0;
- padding: 0;
- list-style-type: none;
-`;
diff --git a/packages/ui-toolkit/src/tooltip/tooltip.js b/packages/ui-toolkit/src/tooltip/tooltip.js
deleted file mode 100644
index 269855d3..00000000
--- a/packages/ui-toolkit/src/tooltip/tooltip.js
+++ /dev/null
@@ -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 (
-
-
- {children}
-
-
- );
- }
-}
-
-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;
diff --git a/packages/ui-toolkit/src/tooltip/usage.md b/packages/ui-toolkit/src/tooltip/usage.md
deleted file mode 100644
index 254ec97a..00000000
--- a/packages/ui-toolkit/src/tooltip/usage.md
+++ /dev/null
@@ -1,15 +0,0 @@
-```
-const Tooltip = require('./tooltip').default;
-const TooltipButton = require('./button').default;
-const TooltipDivider = require('./divider').default;
-
-
-
- Scale
- Restart
- Stop
-
- Delete
-
-
-```
diff --git a/packages/ui-toolkit/src/topology/usage.md b/packages/ui-toolkit/src/topology/usage.md
index f9a5e306..0eefd4b4 100644
--- a/packages/ui-toolkit/src/topology/usage.md
+++ b/packages/ui-toolkit/src/topology/usage.md
@@ -1,4 +1,94 @@
```
-const data = require('./data/wp.json');
-
-```
+
+```
\ No newline at end of file
diff --git a/packages/ui-toolkit/styleguide.config.js b/packages/ui-toolkit/styleguide.config.js
index 1c481a43..675c5830 100644
--- a/packages/ui-toolkit/styleguide.config.js
+++ b/packages/ui-toolkit/styleguide.config.js
@@ -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'
}
}
},