Feature/spinner (#47)

* feat(spinner): created Spinner component

Spinner #23

* test(spinner): added render test for spinner component

* feat(spinner): added story for spinner component

Co-authored-by: Kacper Kruczek <>

src/ui/spinner/index.tsx

@@ -0,0 +1 @@
+export * from './spinner.component';

src/ui/spinner/spinner.component.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import clsx from 'clsx';
+
+export const Spinner = ({ className }: { className?: string }) => (
+  <svg
+    className={clsx('inline-block animate-spin-1.5 w-6 h-6 ', className)}
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      className="opacity-50 "
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      strokeWidth="4"
+    />
+    <path
+      className="opacity-100"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    />
+  </svg>
+);

src/ui/spinner/spinner.spec.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import { Spinner } from './spinner.component';
+
+describe('Spinner', () => {
+  test('should render', async () => {
+    const { container } = render(<Spinner />);
+
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

src/ui/spinner/spinner.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { Spinner } from './spinner.component';
+
+export default {
+  title: 'Atoms/Spinner',
+  component: Spinner,
+} as ComponentMeta<typeof Spinner>;
+
+export const Default: ComponentStory<typeof Spinner> = () => <Spinner />;

tailwind.config.js

@@ -7,6 +7,9 @@ module.exports = {
       mono: ['Roboto Mono', 'monospace'],
     },
     extend: {
+      animation: {
+        'spin-1.5': 'spin 1.5s linear infinite',
+      },
       colors: {
         primary: {
           100: '#45a3db',
@@ -36,7 +39,7 @@ module.exports = {
       boxShadow: {
         'primary-100': '0px 0px 5px #45a3db',
         'error-100': '0px 0px 5px #e74c3c',
-      }
+      },
     },
   },
   plugins: [],