Unverified Commit 74b8636d authored by Martin Schoeler's avatar Martin Schoeler Committed by GitHub
Browse files

feat: Progress Bar (#287)

parent 26f6bb91
import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs/blocks';
import { ProgressBar } from '../..';
<Meta title='Misc/ProgressBar' parameters={{ jest: ['ProgressBar/spec'] }} />
# ProgressBar
The `ProgressBar` is used to inform the user the progress of an operation.
<Canvas>
<Story name='Default'>
<ProgressBar percentage={30} />
</Story>
</Canvas>
<ArgsTable of={ProgressBar} />
## Success
When the `ProgressBar` reaches `100%` it will change to the state `success` changing colors and animation.
<Canvas>
<Story name='Success'>
<ProgressBar percentage={100} />
</Story>
</Canvas>
## Error
You can also manually pass the prop `error` to the `ProgressBar` to indicate an error with the operation.
<Canvas>
<Story name='Error'>
<ProgressBar percentage={51} error='Error Downloading File' />
</Story>
</Canvas>
import PropTypes from 'prop-types';
import React, { forwardRef } from 'react';
import { Box } from '../Box';
const processPercentage = (percentage) => {
const newPercentage = Math.min(Math.max(0, percentage), 100);
return newPercentage.toFixed(1);
};
export const ProgressBar = forwardRef(function ProgressBar({
percentage,
error,
...props
}, ref) {
return <Box
ref={ref}
rcx-progress-bar
title={error || null}
{...props}
>
<Box rcx-progress-bar__fill
rcx-progress-bar__fill--type={(error && 'error') || (processPercentage(percentage) >= 100 ? 'success' : 'primary')}
width={`${ processPercentage(percentage) }%`}
/>
</Box>;
});
ProgressBar.defaultProps = {
percentage: 0,
};
ProgressBar.propTypes = {
percentage: PropTypes.number,
error: PropTypes.string,
};
import React from 'react';
import ReactDOM from 'react-dom';
import { ProgressBar } from '../..';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<ProgressBar />, div);
ReactDOM.unmountComponentAtNode(div);
});
@use '../../styles/colors.scss';
@use '../../styles/lengths.scss';
@use '../../styles/typography.scss';
$progress-bar-color-primary: theme('progress-bar-color-primary', colors.primary(200));
$progress-bar-color-success: theme('progress-bar-color-success', colors.success(200));
$progress-bar-color-error: theme('progress-bar-color-error', colors.danger(200));
$progress-bar-color-shine: theme('progress-bar-color-shine', colors.surface());
$progress-bar-color-background: theme('progress-bar-color-background', colors.neutral(400, 1));
.rcx-progress-bar {
display: block;
width: 100%;
height: 8px;
border-radius: lengths.border-radius(2);
background-color: $progress-bar-color-background;
}
.rcx-progress-bar__fill {
display: block;
height: 8px;
border-radius: lengths.border-radius(2);
&--type-primary {
background-color: $progress-bar-color-primary;
&::before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: inherit;
content: '';
animation: rcx-progress-bar__animation 2s ease-out infinite;
opacity: 0;
border-radius: lengths.border-radius(2);
background: $progress-bar-color-shine;
}
}
&--type-success {
background-color: $progress-bar-color-success;
}
&--type-error {
background-color: $progress-bar-color-error;
}
}
@keyframes rcx-progress-bar__animation {
0% {
width: 0;
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
width: inherit;
opacity: 0;
}
}
......@@ -25,6 +25,7 @@ export * from './NumberInput';
export * from './Options';
export * from './Pagination';
export * from './PasswordInput';
export * from './ProgressBar';
export * from './RadioButton';
export * from './SearchInput';
export * from './Select';
......
......@@ -18,6 +18,7 @@
@import './Modal/styles.scss';
@import './Options/styles.scss';
@import './Pagination/styles.scss';
@import './ProgressBar/styles.scss';
@import './RadioButton/styles.scss';
@import './Select/styles.scss';
@import './Skeleton/styles.scss';
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment