fix: Display name and prop types of Throbber component (#148)

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

@@ -3,9 +3,9 @@ import React, { forwardRef } from 'react';
 
 import { Box } from '../Box';
 
-export const Loading = forwardRef(function TabsItem({ disabled, size = 'x16', circleCount = 3, inheritColor, ...props }, ref) {
+export const Throbber = forwardRef(function Throbber({ disabled, size = 'x16', circleCount = 3, inheritColor, ...props }, ref) {
   return <Box
-    componentClassName='rcx-loading'
+    componentClassName='rcx-throbber'
     is='div'
     ref={ref}
     {...props}
@@ -13,7 +13,7 @@ export const Loading = forwardRef(function TabsItem({ disabled, size = 'x16', ci
     {Array.from(
       { length: circleCount || 3 },
       (_, iteration) => <Box
-        componentClassName='rcx-loading__circle'
+        componentClassName='rcx-throbber__circle'
         is='span'
         mod-disabled={!!disabled}
         mod-size={size}
@@ -25,7 +25,7 @@ export const Loading = forwardRef(function TabsItem({ disabled, size = 'x16', ci
   </Box>;
 });
 
-Loading.propTypes = {
+Throbber.propTypes = {
   disabled: PropTypes.bool,
   size: PropTypes.oneOf(['x2', 'x4', 'x8', 'x12', 'x16',
     'x20', 'x24', 'x28', 'x32', 'x36', 'x40', 'x80', 'x120',
@@ -35,6 +35,6 @@ Loading.propTypes = {
     'x1000', 'x1040', 'x1080', 'x1120', 'x1160', 'x1200',
     'x1240', 'x1280', 'x1320', 'x1360', 'x1400', 'x1440',
     'x1480', 'x1520', 'x1560', 'x1600']),
-  circleCount: PropTypes.integer,
+  circleCount: PropTypes.number,
   inheritColor: PropTypes.bool,
 };

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

@@ -2,17 +2,17 @@ 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 '../..';
+import { Throbber, Button, Box } from '../..';
 
-<Meta title='Misc|Loading' parameters={{ jest: ['Loading/spec'] }} />
+<Meta title='Misc|Throbber' parameters={{ jest: ['Throbber/spec'] }} />
 
-# Loading
+# Throbber
 
 Indicates content that has not loaded yet.
 
 <Preview>
   <Story name='Default'>
-    <Loading/>
+    <Throbber/>
   </Story>
 </Preview>
 
@@ -20,7 +20,7 @@ Indicates content that has not loaded yet.
 
 <Preview>
   <Story name='Disabled'>
-    <Loading disabled/>
+    <Throbber disabled/>
   </Story>
 </Preview>
 
@@ -29,7 +29,7 @@ Indicates content that has not loaded yet.
 <Preview>
   <Story name='Inside Button'>
     <Button style={{minHeight:'40px'}}>
-      <Loading size='x12'/>
+      <Throbber size='x12'/>
     </Button>
   </Story>
 </Preview>
@@ -40,10 +40,10 @@ Indicates content that has not loaded yet.
   <Story name='Inside Button, inherit color'>
     <Box>
       <Button primary danger style={{minHeight:'40px', marginInlineEnd: '5px'}}>
-        <Loading size='x12' inheritColor/>
+        <Throbber size='x12' inheritColor/>
       </Button>
       <Button primary style={{minHeight:'40px'}}>
-        <Loading size='x12' inheritColor/>
+        <Throbber size='x12' inheritColor/>
       </Button>
     </Box>
   </Story>
@@ -54,7 +54,7 @@ Indicates content that has not loaded yet.
 
 <Story name='States'>
   <PropsVariationSection
-    component={Loading}
+    component={Throbber}
     common={{ onClick: action('click') }}
     yAxis={{
       'default': {},

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

-.rcx-loading {
+.rcx-throbber {
   display: flex;
 
   margin-block: calc(-1 * #{ $spaces-x1 });

packages/fuselage/src/components/index.js

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

packages/fuselage/src/components/index.scss

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