feat(spinner): [EMU-6599] add spinner component

src/index.tsx

@@ -35,6 +35,7 @@ export {
   InformationBox,
   Badge,
   images,
+  Spinner,
 } from './lib';
 
 export * from './lib/components/icon';
@@ -46,6 +47,6 @@ export type {
   TableHeader,
   UploadedFile,
   UploadStatus,
- } from './lib';
+} from './lib';
 
 ReactDOM.render(<App />, document.getElementById('root'));

src/lib/components/spinner/index.stories.tsx

@@ -0,0 +1,19 @@
+import { Spinner, SpinnerProps } from '.';
+
+const story = {
+  title: 'JSX/Spinner',
+  component: Spinner,
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      defaultValue: 's',
+      description: 'Property that allows to customize the size of the spinner.',
+    },
+  },
+};
+
+export const SpinnerStory = ({ size }: SpinnerProps) => <Spinner size={size} />;
+
+SpinnerStory.storyName = 'Spinner';
+
+export default story;

src/lib/components/spinner/index.test.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from '../../util/testUtils';
+
+import { Spinner } from '.';
+
+describe('Spinner component', () => {
+  it('Should render spinner', async () => {
+    render(<Spinner></Spinner>);
+
+    expect(screen.getByTestId('ds-spinner')).toBeInTheDocument();
+  });
+});

src/lib/components/spinner/index.tsx

@@ -0,0 +1,14 @@
+import classNames from 'classnames';
+
+export interface SpinnerProps {
+  size?: 's' | 'm' | 'l';
+}
+
+const Spinner = ({ size = 's' }: SpinnerProps) => (
+  <div
+    className={classNames('ds-spinner', `ds-spinner__${size}`)}
+    data-testid="ds-spinner"
+  ></div>
+);
+
+export { Spinner };

src/lib/index.tsx

@@ -2,12 +2,12 @@ import { DateSelector } from './components/dateSelector';
 import { SignaturePad } from './components/signaturePad';
 import { AutocompleteAddress } from './components/autocompleteAddress';
 import { Input } from './components/input';
-import { 
+import {
   MultiDropzone,
   FileType,
   MultiDropzoneProps,
   UploadedFile,
-  UploadStatus
+  UploadStatus,
 } from './components/multiDropzone';
 import { DownloadButton } from './components/downloadButton';
 import { InformationBox } from './components/informationBox';
@@ -44,6 +44,7 @@ import { SegmentedControl } from './components/segmentedControl';
 import { Markdown } from './components/markdown';
 import { Link } from './components/link';
 import { images } from './util/images';
+import { Spinner } from './components/spinner';
 
 export * from './components/icon';
 
@@ -81,14 +82,15 @@ export {
   InformationBox,
   Badge,
   images,
+  Spinner,
 };
 
 export type {
   FileType,
   MultiDropzoneProps,
   TableHeader,
   UploadedFile,
-  UploadStatus
+  UploadStatus,
 };
 
 export type { DownloadStatus } from './models/download';