feat: StatusBullet (#301)

Co-authored-by: Guilherme Gazzo <[email protected]>
Co-authored-by: Guilherme Gazzo <[email protected]>

packages/fuselage/.storybook/main.js

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

packages/fuselage/package.json

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

packages/fuselage/src/components/StatusBullet/StatusBullet.stories.mdx

@@ -0,0 +1,33 @@
+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>

packages/fuselage/src/components/StatusBullet/index.js

@@ -0,0 +1,9 @@
+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,
+};

packages/fuselage/src/components/StatusBullet/spec.js

@@ -0,0 +1,10 @@
+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);
+});

packages/fuselage/src/components/StatusBullet/styles.scss

@@ -0,0 +1,43 @@
+@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;
+  }
+}

packages/fuselage/src/components/index.js

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

packages/fuselage/src/components/index.scss

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

packages/fuselage/src/styles/colors.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),

packages/fuselage/src/styles/mixins/all.scss

@@ -2,3 +2,4 @@
 @import './interactivity.scss';
 @import './shadows.scss';
 @import './states.scss';
+@import './size.scss';

packages/fuselage/src/styles/mixins/size.scss

@@ -0,0 +1,4 @@
+@mixin square($width, $height: $width) {
+  width: $width;
+  height: $height;
+}

packages/fuselage/webpack.config.js

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

yarn.lock

@@ -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 @@ [email protected]:
   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"