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

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' }),
......
......@@ -8853,6 +8853,11 @@ flatted@^2.0.0:
resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.1.tgz#69e57caa8f0eacbc281d2e2cb458d46fdb449e08"
integrity sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==
flatten@^1.0.2:
version "1.0.3"
resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b"
integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==
flush-write-stream@^1.0.0, flush-write-stream@^1.0.2:
version "1.1.1"
resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
......@@ -14750,6 +14755,16 @@ postcss-sorting@^5.0.1:
lodash "^4.17.14"
postcss "^7.0.17"
postcss-svg@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/postcss-svg/-/postcss-svg-3.0.0.tgz#3385a586ecd452bf9cd34b6f864aef6e58ec7aa1"
integrity sha512-kvwD3PJ66gXHgL/6t30W8/zT0qvuZ+TGwq76JlQFHyZb6Oal4tAvp6IARRwYwoy/FxQ8XAyLoYf34kk80yg8WQ==
dependencies:
postcss "^7.0.6"
postcss-values-parser "^2.0.0"
svgo "^1.1.1"
xmldoc "^1.1.2"
postcss-svgo@^4.0.2:
version "4.0.2"
resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.2.tgz#17b997bc711b333bab143aaed3b8d3d6e3d38258"
......@@ -14784,6 +14799,15 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0:
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
postcss-values-parser@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz#da8b472d901da1e205b47bdc98637b9e9e550e5f"
integrity sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg==
dependencies:
flatten "^1.0.2"
indexes-of "^1.0.1"
uniq "^1.0.1"
postcss-values-parser@^3.0.5:
version "3.0.5"
resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-3.0.5.tgz#9f83849fb89eaac74c2d5bf75e8e9715508a8c8d"
......@@ -16544,7 +16568,7 @@ sax@1.2.1:
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"
integrity sha1-e45lYZCyKOgaZq6nSEgNgozS03o=
sax@>=0.6.0, sax@^1.2.4, sax@~1.2.4:
sax@>=0.6.0, sax@^1.2.1, sax@^1.2.4, sax@~1.2.4:
version "1.2.4"
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
......@@ -17697,7 +17721,7 @@ svgicons2svgfont@^9.0.4:
svg-pathdata "^5.0.0"
transformation-matrix-js "^2.7.1"
svgo@^1.0.0, svgo@^1.2.2:
svgo@^1.0.0, svgo@^1.1.1, svgo@^1.2.2:
version "1.3.2"
resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==
......@@ -19544,6 +19568,13 @@ xmlchars@^2.1.1, xmlchars@^2.2.0:
resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
xmldoc@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/xmldoc/-/xmldoc-1.1.2.tgz#6666e029fe25470d599cd30e23ff0d1ed50466d7"
integrity sha512-ruPC/fyPNck2BD1dpz0AZZyrEwMOrWTO5lDdIXS91rs3wtm4j+T8Rp2o+zoOYkkAxJTZRPOSnOGei1egoRmKMQ==
dependencies:
sax "^1.2.1"
xmldom@~0.1.22:
version "0.1.27"
resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.1.27.tgz#d501f97b3bdb403af8ef9ecc20573187aadac0e9"
......
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