diff --git a/packages/ui-toolkit/package.json b/packages/ui-toolkit/package.json
index 04e5edf2..ddd3469e 100644
--- a/packages/ui-toolkit/package.json
+++ b/packages/ui-toolkit/package.json
@@ -1,6 +1,6 @@
{
"name": "joyent-ui-toolkit",
- "version": "3.1.6",
+ "version": "4.0.0",
"license": "MPL-2.0",
"repository": "github:yldio/joyent-portal",
"main": "dist/umd/index.js",
diff --git a/packages/ui-toolkit/src/index.js b/packages/ui-toolkit/src/index.js
index 76c2b7ae..55be5156 100644
--- a/packages/ui-toolkit/src/index.js
+++ b/packages/ui-toolkit/src/index.js
@@ -18,13 +18,6 @@ export { default as StatusLoader } from './status-loader';
export { default as Breadcrumb, Item as BreadcrumbItem } from './breadcrumb';
-export {
- default as Progressbar,
- ProgressbarButton,
- ProgressbarItem,
- Indicator
-} from './progress-bar';
-
export {
borderRadius,
bottomShadow,
diff --git a/packages/ui-toolkit/src/progress-bar/button.js b/packages/ui-toolkit/src/progress-bar/button.js
deleted file mode 100644
index 7b9e1ba2..00000000
--- a/packages/ui-toolkit/src/progress-bar/button.js
+++ /dev/null
@@ -1,130 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import unitcalc from 'unitcalc';
-import theme from '../theme';
-import Button from '../button';
-import remcalc from 'remcalc';
-import Baseline from '../baseline';
-import Indicator from './indicator';
-import is, { isNot, isOr } from 'styled-is';
-
-const StyledButton = styled(Button)`
- padding: ${unitcalc(2)} ${unitcalc(3)} ${unitcalc(2)} ${unitcalc(2)};
- background-color: ${theme.white};
- color: ${theme.secondary};
- text-align: left;
- border: none;
- box-shadow: none;
- line-height: 1.6;
- margin: 0;
- cursor: default;
-
- &:focus {
- background-color: ${theme.white};
- border: none;
- color: ${theme.secondary};
- }
-
- &:hover {
- background-color: ${theme.white};
- border: none;
- color: ${theme.secondary};
- }
-
- &:active,
- &:active:hover,
- &:active:focus {
- background-color: ${theme.white};
- border: none;
- color: ${theme.secondary};
- }
-`;
-
-const StyledContainer = styled.div`
- display: flex;
- justify-content: center;
- align-items: center;
- position: relative;
- z-index: ${props => props.zIndex};
-
- padding-left: ${remcalc(40)};
- border-top: ${remcalc(1)} solid ${props => props.theme.grey};
- border-bottom: ${remcalc(1)} solid ${props => props.theme.grey};
-
- ${isOr('active', 'completed')`
- border-top: ${remcalc(1)} solid ${props => props.theme.greenDark};
- border-bottom: ${remcalc(1)} solid ${props => props.theme.greenDark};
- `};
-
- ${is('first')`
- border-left: ${remcalc(1)} solid ${props => props.theme.greenDark};
- padding-left: ${remcalc(13)};
- `};
-
- ${isNot('first', 'completed', 'active')`
- border-right: ${remcalc(1)} solid ${props => props.theme.grey};
- `};
-
- ${isOr('active', 'completed')`
- border-right: ${remcalc(1)} solid ${props => props.theme.greenDark};
- `};
-
- ${isNot('last')`
- border-right: none;
- `};
-`;
-
-const StyledArrow = styled.span`
- position: absolute;
- top: 0;
- right: -${remcalc(27)};
- border: solid ${props => props.theme.grey};
- border-width: 0 ${remcalc(1)} ${remcalc(1)} 0;
- padding: ${remcalc(17.1)};
- transform: rotate(-45deg);
- margin: ${remcalc(6.4)} ${remcalc(10)} ${remcalc(6.4)} ${remcalc(10)};
-
- ${is('last')`
- display: none;
- `};
-
- ${isOr('completed', 'active')`
- border-color: ${props => props.theme.greenDark};
- `};
-`;
-
-const ProgressbarButton = ({
- children,
- first,
- completed,
- active,
- last,
- ...rest
-}) => {
- const state = {
- first,
- completed,
- active,
- last
- };
-
- return (
-
-
- {children}
-
-
- );
-};
-
-ProgressbarButton.propTypes = {
- zIndex: PropTypes.string,
- active: PropTypes.bool,
- completed: PropTypes.bool,
- first: PropTypes.bool,
- last: PropTypes.bool,
- onClick: PropTypes.func
-};
-
-export default Baseline(ProgressbarButton);
diff --git a/packages/ui-toolkit/src/progress-bar/index.js b/packages/ui-toolkit/src/progress-bar/index.js
deleted file mode 100644
index 66bd38ff..00000000
--- a/packages/ui-toolkit/src/progress-bar/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-const StyledList = styled.ul`
- display: table;
- list-style-type: none;
- padding: 0;
-`;
-
-/**
- * @example ./usage.md
- */
-export default ({ children, ...rest }) => (
- {children}
-);
-
-export { default as ProgressbarItem } from './item';
-export { default as ProgressbarButton } from './button';
-export { default as Indicator } from './indicator';
diff --git a/packages/ui-toolkit/src/progress-bar/indicator.js b/packages/ui-toolkit/src/progress-bar/indicator.js
deleted file mode 100644
index c9c4067a..00000000
--- a/packages/ui-toolkit/src/progress-bar/indicator.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import remcalc from 'remcalc';
-import Baseline from '../baseline';
-import { Checkcircle as BaseCheckcircle } from '../icons';
-import is, { isOr } from 'styled-is';
-
-const Checkcircle = styled(BaseCheckcircle)`
- fill: none;
-
- ${is('active')`
- fill: ${props => props.theme.secondary};
- `};
-
- ${is('completed')`
- fill: ${props => props.theme.white};
- `};
-`;
-
-const StyledIndicator = styled.span`
- display: inline-block;
- border-radius: 50%;
- width: ${remcalc(18)};
- height: ${remcalc(18)};
- background: inherit;
- border: ${remcalc(1)} solid ${props => props.theme.grey};
- display: flex;
- justify-content: center;
- align-items: center;
-
- ${isOr('completed', 'active')`
- border: ${remcalc(1)} solid ${props => props.theme.greenDark};
- `};
-
- ${is('completed')`
- background: ${props => props.theme.green};
- `};
-`;
-
-const Indicator = ({ first, completed, active, last, ...rest }) => {
- const state = {
- first,
- completed,
- active,
- last
- };
-
- return (
-
-
-
- );
-};
-
-export default Baseline(Indicator);
diff --git a/packages/ui-toolkit/src/progress-bar/item.js b/packages/ui-toolkit/src/progress-bar/item.js
deleted file mode 100644
index 8530794c..00000000
--- a/packages/ui-toolkit/src/progress-bar/item.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import Baseline from '../baseline';
-
-const StyledItem = styled.li`
- float: left;
- background-color: ${props => props.theme.white};
-`;
-
-const ProgressbarItem = ({ children, ...props }) => (
- {children}
-);
-
-export default Baseline(ProgressbarItem);
diff --git a/packages/ui-toolkit/src/progress-bar/usage.md b/packages/ui-toolkit/src/progress-bar/usage.md
deleted file mode 100644
index 7448af30..00000000
--- a/packages/ui-toolkit/src/progress-bar/usage.md
+++ /dev/null
@@ -1,24 +0,0 @@
-```
-const React = require('react');
-const { default: Progressbar } = require('./index');
-const { default: ProgressbarButton } = require('./button');
-const { default: ProgressbarItem } = require('./item');
-
-
-
- console.log("name")}>
- Name the group
-
-
-
- console.log("define")}>
- Define services
-
-
-
- console.log("review")}>
- Review and deploy
-
-
-
-```
diff --git a/packages/ui-toolkit/styleguide.config.js b/packages/ui-toolkit/styleguide.config.js
index 81a24761..cc2c0821 100644
--- a/packages/ui-toolkit/styleguide.config.js
+++ b/packages/ui-toolkit/styleguide.config.js
@@ -68,8 +68,7 @@ module.exports = {
'src/header/index.js',
'src/message/index.js',
'src/section-list/index.js',
- 'src/breadcrumb/index.js',
- 'src/progress-bar/index.js'
+ 'src/breadcrumb/index.js'
]
},
{