Add CleanUpButton component (#1599)

assets/js/components/CleanUpButton/CleanUpButton.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { EOS_CLEANING_SERVICES } from 'eos-icons-react';
+
+import Button from '@components/Button';
+import Spinner from '@components/Spinner';
+
+function CleanUpButton({ cleaning, onClick }) {
+  return (
+    <Button
+      type="primary-white"
+      className="inline-block mx-0.5 border-green-500 border w-fit"
+      size="small"
+      disabled={cleaning}
+      onClick={() => onClick()}
+    >
+      {cleaning === true ? (
+        <Spinner className="justify-center flex" />
+      ) : (
+        <>
+          <EOS_CLEANING_SERVICES
+            size="base"
+            className="fill-jungle-green-500 inline"
+          />
+          <span className="text-jungle-green-500 text-sm font-bold pl-1.5">
+            Clean up
+          </span>
+        </>
+      )}
+    </Button>
+  );
+}
+
+export default CleanUpButton;

assets/js/components/CleanUpButton/CleanUpButton.stories.jsx

@@ -0,0 +1,28 @@
+import CleanUpButton from '.';
+
+export default {
+  title: 'CleanUpButton',
+  component: CleanUpButton,
+  argTypes: {
+    cleaning: {
+      control: { type: 'boolean' },
+      description: 'Cleaning state',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: false },
+      },
+    },
+    onClick: { action: 'Click button' },
+  },
+};
+
+export const Default = {
+  args: {},
+};
+
+export const Cleaning = {
+  args: {
+    ...Default.args,
+    cleaning: true,
+  },
+};

assets/js/components/CleanUpButton/CleanUpButton.test.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import CleanUpButton from '.';
+
+describe('Button', () => {
+  it('should display the clean up button', () => {
+    render(<CleanUpButton />);
+    expect(screen.getByRole('button')).toHaveTextContent('Clean up');
+  });
+
+  it('should display the clean up in cleaning state', () => {
+    render(<CleanUpButton cleaning />);
+    const spinnerElement = screen.getByRole('alert');
+    expect(spinnerElement).toBeInTheDocument();
+  });
+});

assets/js/components/CleanUpButton/index.js

@@ -0,0 +1,3 @@
+import CleanUpButton from './CleanUpButton';
+
+export default CleanUpButton;