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' ] }, {