feat(ui-toolkit): remove progress-bar

BREAKING CHANGE

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",

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,

packages/ui-toolkit/src/progress-bar/button.js

@@ -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 (
-    <StyledContainer {...state} {...rest}>
-      <Indicator {...state} />
-      <StyledButton {...state}>{children}</StyledButton>
-      <StyledArrow {...state} />
-    </StyledContainer>
-  );
-};
-
-ProgressbarButton.propTypes = {
-  zIndex: PropTypes.string,
-  active: PropTypes.bool,
-  completed: PropTypes.bool,
-  first: PropTypes.bool,
-  last: PropTypes.bool,
-  onClick: PropTypes.func
-};
-
-export default Baseline(ProgressbarButton);

packages/ui-toolkit/src/progress-bar/index.js

@@ -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 }) => (
-  <StyledList {...rest}>{children}</StyledList>
-);
-
-export { default as ProgressbarItem } from './item';
-export { default as ProgressbarButton } from './button';
-export { default as Indicator } from './indicator';

packages/ui-toolkit/src/progress-bar/indicator.js

@@ -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 (
-    <StyledIndicator {...state} {...rest}>
-      <Checkcircle checked {...state} />
-    </StyledIndicator>
-  );
-};
-
-export default Baseline(Indicator);

packages/ui-toolkit/src/progress-bar/item.js

@@ -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 }) => (
-  <StyledItem {...props}>{children}</StyledItem>
-);
-
-export default Baseline(ProgressbarItem);

packages/ui-toolkit/src/progress-bar/usage.md

@@ -1,24 +0,0 @@
-```
-const React = require('react');
-const { default: Progressbar } = require('./index');
-const { default: ProgressbarButton } = require('./button');
-const { default: ProgressbarItem } = require('./item');
-
-<Progressbar>
-  <ProgressbarItem>
-    <ProgressbarButton zIndex="10" completed first onClick={() => console.log("name")}>
-      Name the group
-    </ProgressbarButton>
-  </ProgressbarItem>
-  <ProgressbarItem>
-    <ProgressbarButton zIndex="9" active onClick={() => console.log("define")}>
-      Define services
-    </ProgressbarButton>
-  </ProgressbarItem>
-  <ProgressbarItem>
-    <ProgressbarButton zIndex="8" last onClick={() => console.log("review")}>
-      Review and deploy
-    </ProgressbarButton>
-  </ProgressbarItem>
-</Progressbar>
-```

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/breadcrumb/index.js'
-        'src/progress-bar/index.js'
       ]
     },
     {