Spearhead
/
joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(ui-toolkit): remove progress-bar 

BREAKING CHANGE
This commit is contained in:
Sara Vieira 2017-12-18 13:42:56 +00:00 committed by Sérgio Ramos
parent d0769903a3
commit f6c2802b32
8 changed files with 2 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/ui-toolkit/package.json
View File

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

7
packages/ui-toolkit/src/index.js
View File

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

130
packages/ui-toolkit/src/progress-bar/button.js
View File

@ -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);

19
packages/ui-toolkit/src/progress-bar/index.js
View File

@ -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';

55
packages/ui-toolkit/src/progress-bar/indicator.js
View File

@ -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);

14
packages/ui-toolkit/src/progress-bar/item.js
View File

@ -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);

24
packages/ui-toolkit/src/progress-bar/usage.md
View File

@ -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>
```

3
packages/ui-toolkit/styleguide.config.js
View File

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