feat: Loading Component

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

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+import React, { forwardRef } from 'react';
+
+import { Box } from '../Box';
+
+export const Loading = forwardRef(function TabsItem({ disabled, size = 'x16', circleCount = 3, inheritColor, ...props }, ref) {
+  return <Box
+    componentClassName='rcx-loading'
+    is='div'
+    ref={ref}
+    {...props}
+  >
+    {Array.from(
+      { length: circleCount || 3 },
+      (_, iteration) => <Box
+        componentClassName='rcx-loading__circle'
+        is='span'
+        mod-disabled={!!disabled}
+        mod-size={size}
+        style={{ animationDuration: `${ circleCount * 0.466 }s`, animationDelay: `${ iteration * 0.16 }s` }}
+        mod-inherit-color={!!inheritColor && !disabled}
+        key={iteration}
+      />,
+    )}
+  </Box>;
+});
+
+Loading.propTypes = {
+  disabled: PropTypes.bool,
+  size: PropTypes.oneOf(['x2', 'x4', 'x8', 'x12', 'x16',
+    'x20', 'x24', 'x28', 'x32', 'x36', 'x40', 'x80', 'x120',
+    'x160', 'x200', 'x240', 'x280', 'x320', 'x360', 'x400',
+    'x440', 'x480', 'x520', 'x560', 'x600', 'x640', 'x680',
+    'x720', 'x760', 'x800', 'x840', 'x880', 'x920', 'x960',
+    'x1000', 'x1040', 'x1080', 'x1120', 'x1160', 'x1200',
+    'x1240', 'x1280', 'x1320', 'x1360', 'x1400', 'x1440',
+    'x1480', 'x1520', 'x1560', 'x1600']),
+  circleCount: PropTypes.integer,
+  inheritColor: PropTypes.bool,
+};

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

@@ -0,0 +1,71 @@
+import { action } from '@storybook/addon-actions';
+import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
+
+import { PropsVariationSection } from '../../../.storybook/helpers';
+import { Loading, Button, Box } from '../..';
+
+<Meta title='Misc|Loading' parameters={{ jest: ['Loading/spec'] }} />
+
+# Loading
+
+Indicates content that has not loaded yet.
+
+<Preview>
+  <Story name='Default'>
+    <Loading/>
+  </Story>
+</Preview>
+
+### Disabled
+
+<Preview>
+  <Story name='Disabled'>
+    <Loading disabled/>
+  </Story>
+</Preview>
+
+### Inside Button
+
+<Preview>
+  <Story name='Inside Button'>
+    <Button style={{minHeight:'40px'}}>
+      <Loading size='x12'/>
+    </Button>
+  </Story>
+</Preview>
+
+### Inside Button, inherit color
+
+<Preview>
+  <Story name='Inside Button, inherit color'>
+    <Box>
+      <Button primary danger style={{minHeight:'40px', marginInlineEnd: '5px'}}>
+        <Loading size='x12' inheritColor/>
+      </Button>
+      <Button primary style={{minHeight:'40px'}}>
+        <Loading size='x12' inheritColor/>
+      </Button>
+    </Box>
+  </Story>
+</Preview>
+
+
+### Variations
+
+<Story name='States'>
+  <PropsVariationSection
+    component={Loading}
+    common={{ onClick: action('click') }}
+    yAxis={{
+      'default': {},
+      '3 circles + x40': { circleCount: 3, size:'x40'},
+      '5 circles + x32': { circleCount: 5, size:'x32'},
+      '7 circles + x24': { circleCount: 7, size:'x24'},
+    }}
+    xAxis={{
+      default: {},
+      disabled: {disabled: true}
+    }}
+  />
+</Story>
+

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

@@ -0,0 +1,42 @@
+.rcx-loading {
+  display: flex;
+
+  margin-block: calc(-1 * #{ $spaces-x1 });
+
+  &__circle {
+    margin-inline: $spaces-x1;
+
+    animation: bounce 1.4s infinite ease-in-out both;
+
+    border-radius: 50%;
+
+    background-color: $colors-b500;
+
+    &--disabled {
+      background-color: $colors-n500;
+    }
+
+    &--inherit-color {
+      background-color: currentColor;
+    }
+
+    @each $name, $value in $sizes {
+      &--size-#{$name} {
+        width: $value;
+        height: $value;
+      }
+    }
+  }
+}
+
+@keyframes bounce {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+
+  40% {
+    transform: scale(1);
+  }
+}

packages/fuselage/src/components/index.js

@@ -37,3 +37,4 @@ export * from './AutoComplete';
 export * from './Options';
 export * from './Select';
 export * from './Modal';
+export * from './Loading';

packages/fuselage/src/components/index.scss

@@ -29,3 +29,4 @@
 @import './Options/styles.scss';
 @import './Select/styles.scss';
 @import './Modal/styles.scss';
+@import './Loading/styles.scss';