Feat/loader + Table Fix

src/components/Form/Form.test.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { composeStories } from '@storybook/testing-react';
 import * as stories from './Form.stories';
-// import { fireEvent } from "@testing-library/react";
 
 const { DemoForm } = composeStories(stories);
 let container: HTMLDivElement;

src/components/Loading/Loading.stories.tsx

@@ -0,0 +1,27 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import React from 'react';
+import color from '../../styles/colors';
+import Loading from './Loading';
+
+export default {
+    title: 'UI/Loading',
+    component: Loading,
+} as ComponentMeta<typeof Loading>;
+
+const Template: ComponentStory<typeof Loading> = (args) => (
+    <Loading {...args} />
+);
+
+export const Spinner = Template.bind({});
+Spinner.args = {};
+
+export const CustomSizeSpinner = Template.bind({});
+CustomSizeSpinner.args = {
+    size: 90,
+};
+
+export const CustomRingColors = Template.bind({});
+CustomRingColors.args = {
+    ringColor: color.green,
+    ballColor: color.yellowDark,
+};

src/components/Loading/Loading.styles.tsx

@@ -0,0 +1,33 @@
+import styled, { keyframes } from 'styled-components';
+import { ILoadingProps } from './types';
+
+const rotate = keyframes`
+    0%{
+        transform: rotate(0deg);
+    }
+    100%{
+        transform: rotate(360deg);
+    }
+`;
+
+export const StyledSpinnerDiv = styled.div<ILoadingProps>`
+    width: ${(props) => props.size}px;
+    height: ${(props) => props.size}px;
+    border: 3px solid
+        rgba(${(props) => props.ringColor && props.ringColor}, 0.5);
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    animation: ${rotate} 1.5s linear infinite;
+    :before {
+        content: '';
+        position: absolute;
+        top: -15%;
+        left: 50%;
+        background: rgb(${(props) => props.ballColor && props.ballColor});
+        width: 25%;
+        height: 25%;
+        max-height: 40px;
+        max-width: 40px;
+        border-radius: 50%;
+    }
+`;

src/components/Loading/Loading.test.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { composeStories } from '@storybook/testing-react';
+import * as stories from './Loading.stories';
+import { render, screen } from '@testing-library/react';
+
+const { Spinner, CustomSizeSpinner, CustomRingColors } =
+    composeStories(stories);
+
+describe('Spinner - DefaultSpinner', () => {
+    it('Should render', () => {
+        render(<Spinner />);
+        const element = screen.getAllByRole('spinner');
+        expect(element).toBeDefined();
+    });
+});
+
+describe('Spinner - Customized spinner', () => {
+    const size = CustomSizeSpinner?.args?.size;
+    it('Should render', () => {
+        render(<CustomSizeSpinner />);
+        const element = screen.getAllByRole('spinner');
+        expect(element).toBeDefined();
+    });
+    it('Should render different size', () => {
+        render(<CustomSizeSpinner />);
+        const element = screen.getByTestId(`${size}`);
+        expect(element).toBeDefined();
+    });
+});
+
+describe('Spinner - Customized colors spinner', () => {
+    it('Should render', () => {
+        render(<CustomRingColors />);
+        const element = screen.getAllByRole('spinner');
+        expect(element).toBeDefined();
+    });
+});

src/components/Loading/Loading.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import color from '../../styles/colors';
+import hexToRgb from '../../utils/HexToRgb';
+import { StyledSpinnerDiv } from './Loading.styles';
+import { ILoadingProps } from './types';
+
+const Loading: React.FC<ILoadingProps> = ({
+    size = 50,
+    ringColor = color.blue,
+    ballColor = color.blue,
+}) => {
+    return (
+        <StyledSpinnerDiv
+            role={'spinner'}
+            data-testid={size}
+            size={size}
+            ringColor={hexToRgb(ringColor)}
+            ballColor={hexToRgb(ballColor)}
+        />
+    );
+};
+
+export default Loading;

src/components/Loading/index.ts

@@ -0,0 +1,2 @@
+export { default as Loading } from './Loading';
+export type { ILoadingProps } from './types';

src/components/Loading/types.ts

@@ -0,0 +1,10 @@
+export interface ILoadingProps {
+    // The size of the spinner
+    size: number;
+
+    // The color of the spinner's ring
+    ringColor?: string;
+
+    // The color of the spinner's ball
+    ballColor?: string;
+}

src/components/Table/Table.styles.ts

@@ -14,6 +14,7 @@ export const TableParent = styled.div`
     box-shadow: 0 4px 10px rgba(48, 71, 105, 0.1);
     display: flex;
     flex-direction: column;
+    background-color: white;
 `;
 
 export const NoData = styled.div`

src/components/Table/Table.tsx

@@ -82,7 +82,7 @@ const Table: React.FC<TableProps> = ({
 
     const RenderNoData = (): JSX.Element => {
         if (customNoDataComponent) {
-            return <>{customNoDataComponent}</>;
+            return <NoData>{customNoDataComponent}</NoData>;
         }
         return (
             <NoData>

src/index.ts

@@ -15,14 +15,14 @@ export * from './components/Illustrations';
 export * from './components/Info';
 export * from './components/Input';
 export * from './components/LinkTo';
+export * from './components/Loading';
 export * from './components/Logo';
 export * from './components/Modal';
 export * from './components/Notification';
 export * from './components/Radios';
 export * from './components/Select';
-export * from './components/Tag';
-export * from './components/TextArea';
 export * from './components/Table';
 export * from './components/Tabs';
+export * from './components/Tag';
+export * from './components/TextArea';
 export * from './components/Tooltip';
-

src/utils/HexToRgb.ts

@@ -0,0 +1,11 @@
+const hexToRgb = (hex: string): string => {
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+        ? ` ${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(
+              result[3],
+              16,
+          )} `
+        : '66, 135, 245';
+};
+
+export default hexToRgb;