feat(ui-toolkit): remove progress-bar
BREAKING CHANGE
This commit is contained in:
Sara Vieira
Sérgio Ramos
parent
d0769903a3
commit
f6c2802b32
@ -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",
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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);
|
||||
@ -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';
|
||||
@ -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);
|
||||
@ -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);
|
||||
@ -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>
|
||||
```
|
||||
@ -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'
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user