Unverified Commit 4b0c9ca6 authored by Douglas Fabris's avatar Douglas Fabris Committed by GitHub
Browse files

feat: StatusBullet (#301)


Co-authored-by: default avatarGuilherme Gazzo <guilherme@gazzo.xyz>
Co-authored-by: default avatarGuilherme Gazzo <guilhermegazzo@gmail.com>
parent 2f476113
......@@ -33,6 +33,7 @@ module.exports = {
options: {
ident: 'postcss',
plugins: () => [
require('postcss-svg')(),
require('postcss-custom-properties')(),
require('postcss-logical')({ preserve: true }),
require('postcss-dir-pseudo-class')({ dir: 'ltr' }),
......
......@@ -90,6 +90,7 @@
"postcss-dir-pseudo-class": "^5.0.0",
"postcss-loader": "^3.0.0",
"postcss-logical": "^4.0.2",
"postcss-svg": "^3.0.0",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
......
import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks';
import { StatusBullet, Box } from '../..';
<Meta title='Misc/StatusBullet' parameters={{ jest: ['StatusBullet/spec'] }} />
# StatusBullet
The `StatusBullet` is used to inform the user status.
<Canvas>
<Story name='Default'>
<Box>
<StatusBullet status={'online'} />
<StatusBullet status={'away'} />
<StatusBullet status={'busy'} />
<StatusBullet status={'offline'} />
<StatusBullet />
</Box>
</Story>
</Canvas>
<Canvas>
<Story name='Small'>
<Box>
<StatusBullet size={'small'} status={'online'} />
<StatusBullet size={'small'} status={'away'} />
<StatusBullet size={'small'} status={'busy'} />
<StatusBullet size={'small'} status={'offline'} />
<StatusBullet size={'small'} />
</Box>
</Story>
</Canvas>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="6" cy="6" r="6" fill="#F3BE08"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 1.66699C6.46024 1.66699 6.83333 2.04009 6.83333 2.50033V5.59981L9.02058 7.3496C9.37996 7.63711 9.43823 8.16152 9.15072 8.52091C8.86321 8.88029 8.3388 8.93856 7.97942 8.65105L5.16667 6.40085V2.50033C5.16667 2.04009 5.53976 1.66699 6 1.66699Z" fill="white"/>
</svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6Z" fill="#F5455C"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.16667 5.99967C3.16667 5.53944 3.53977 5.16634 4 5.16634L8 5.16634C8.46024 5.16634 8.83334 5.53944 8.83334 5.99967C8.83334 6.45991 8.46024 6.83301 8 6.83301L4 6.83301C3.53977 6.83301 3.16667 6.45991 3.16667 5.99967Z" fill="white"/>
</svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="6" cy="6" r="5" stroke="#9EA2A8" stroke-width="2" stroke-dasharray="2 2"/>
</svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="6" cy="6" r="5" stroke="#9EA2A8" stroke-width="2"/>
</svg>
import PropTypes from 'prop-types';
import React from 'react';
export const StatusBullet = ({ status = 'loading', size, className = '', ...props }) => <span className={`rcx-box rcx-box--full rcx-status-bullet rcx-status-bullet--${ status } ${ size === 'small' ? 'rcx-status-bullet--small' : '' } ${ className }`} {...props} />;
StatusBullet.propTypes = {
status: PropTypes.oneOf(['online', 'busy', 'away', 'offline']),
size: PropTypes.string,
};
import React from 'react';
import ReactDOM from 'react-dom';
import { StatusBullet } from '.';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<StatusBullet />, div);
ReactDOM.unmountComponentAtNode(div);
});
@use '../../styles/colors.scss';
@use '../../styles/lengths.scss';
@use '../../styles/functions.scss';
$status-bullet-online-background-color: theme('status-bullet-online-background-color', colors.foreground('success'));
$status-bullet-away-background: theme('status-bullet-away-background', url('./components/StatusBullet/icons/away.svg') top left / contain no-repeat);
$status-bullet-busy-background: theme('status-bullet-busy-background', url('./components/StatusBullet/icons/busy.svg') top left / contain no-repeat);
$status-bullet-offline-background: theme('status-bullet-offline-background', url('./components/StatusBullet/icons/offline.svg') top left / contain no-repeat);
$status-bullet-loading-background: theme('status-bullet-loading-background', url('./components/StatusBullet/icons/loading.svg') top left / contain no-repeat);
.rcx-status-bullet {
display: inline-block;
flex-grow: 0;
flex-shrink: 0;
border-radius: lengths.border-radius(full);
background: $status-bullet-loading-background;
background-size: contain;
@include square(lengths.size(12));
&--small {
@include square(functions.to-rem(10));
}
&--online {
background: $status-bullet-online-background-color;
}
&--away {
background: $status-bullet-away-background;
}
&--busy {
background: $status-bullet-busy-background;
}
&--offline {
background: $status-bullet-offline-background;
}
}
......@@ -25,6 +25,7 @@ export * from './NumberInput';
export * from './Options';
export * from './Pagination';
export * from './PasswordInput';
export * from './StatusBullet';
export * from './ProgressBar';
export * from './RadioButton';
export * from './SearchInput';
......
......@@ -18,6 +18,7 @@
@import './Modal/styles.scss';
@import './Options/styles.scss';
@import './Pagination/styles.scss';
@import './StatusBullet/styles.scss';
@import './ProgressBar/styles.scss';
@import './RadioButton/styles.scss';
@import './Select/styles.scss';
......
......@@ -92,6 +92,7 @@ $-foreground-colors: (
success: map.get(token-colors.$colors, g500),
danger: map.get(token-colors.$colors, r500),
warning: map.get(token-colors.$colors, y700),
warning-alternative: map.get(token-colors.$colors, y500),
link: map.get(token-colors.$colors, b500),
visited-link: map.get(token-colors.$colors, p500),
active-link: map.get(token-colors.$colors, r500),
......
......@@ -2,3 +2,4 @@
@import './interactivity.scss';
@import './shadows.scss';
@import './states.scss';
@import './size.scss';
@mixin square($width, $height: $width) {
width: $width;
height: $height;
}
......@@ -43,6 +43,7 @@ module.exports = (env, { mode = 'production' }) => ({
options: {
ident: 'postcss',
plugins: () => [
require('postcss-svg')(),
require('postcss-custom-properties')(),
require('postcss-logical')({ preserve: true }),
require('postcss-dir-pseudo-class')({ dir: 'ltr' }),
......
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