Enable deletion on table views (#113)

* Enable deletion on table views

* Add tests

* Enable deletion on table views for companies too

front/src/components/table/action-bar/ActionBar.tsx

@@ -0,0 +1,38 @@
+import styled from '@emotion/styled';
+import ActionBarButton from './ActionBarButton';
+import { FaTrash } from 'react-icons/fa';
+
+type OwnProps = {
+  onDeleteClick: () => void;
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  position: absolute;
+  z-index: 1;
+  height: 48px;
+  bottom: 38px;
+  background: ${(props) => props.theme.secondaryBackground};
+  align-items: center;
+  padding-left: ${(props) => props.theme.spacing(4)};
+  padding-right: ${(props) => props.theme.spacing(4)};
+  color: ${(props) => props.theme.red};
+  left: 50%;
+
+  border-radius: 8px;
+  border: 1px solid ${(props) => props.theme.primaryBorder};
+`;
+
+function ActionBar({ onDeleteClick }: OwnProps) {
+  return (
+    <StyledContainer>
+      <ActionBarButton
+        label="Delete"
+        icon={<FaTrash />}
+        onClick={onDeleteClick}
+      />
+    </StyledContainer>
+  );
+}
+
+export default ActionBar;

front/src/components/table/action-bar/ActionBarButton.tsx

@@ -0,0 +1,37 @@
+import styled from '@emotion/styled';
+import { ReactNode } from 'react';
+
+type OwnProps = {
+  icon: ReactNode;
+  label: string;
+  onClick: () => void;
+};
+
+const StyledButton = styled.div`
+  display: flex;
+  cursor: pointer;
+
+  justify-content: center;
+
+  padding: ${(props) => props.theme.spacing(2)};
+  border-radius: 4px;
+
+  &:hover {
+    background: ${(props) => props.theme.tertiaryBackground};
+  }
+`;
+
+const StyledButtonabel = styled.div`
+  margin-left: ${(props) => props.theme.spacing(2)};
+`;
+
+function ActionBarButton({ label, icon, onClick }: OwnProps) {
+  return (
+    <StyledButton onClick={onClick}>
+      {icon}
+      <StyledButtonabel>{label}</StyledButtonabel>
+    </StyledButton>
+  );
+}
+
+export default ActionBarButton;

front/src/components/table/action-bar/__stories__/ActionBar.stories.tsx

@@ -0,0 +1,30 @@
+import ActionBar from '../ActionBar';
+import { ThemeProvider } from '@emotion/react';
+import { lightTheme } from '../../../../layout/styles/themes';
+import { StoryFn } from '@storybook/react';
+
+const component = {
+  title: 'ActionBar',
+  component: ActionBar,
+};
+
+type OwnProps = {
+  onDeleteClick: () => void;
+};
+
+export default component;
+
+const Template: StoryFn<typeof ActionBar> = (args: OwnProps) => {
+  return (
+    <ThemeProvider theme={lightTheme}>
+      <ActionBar {...args} />
+    </ThemeProvider>
+  );
+};
+
+export const ActionBarStory = Template.bind({});
+ActionBarStory.args = {
+  onDeleteClick: () => {
+    console.log('deleted');
+  },
+};

front/src/components/table/action-bar/__tests__/ActionBar.test.tsx

@@ -0,0 +1,17 @@
+import { fireEvent, render } from '@testing-library/react';
+
+import { ActionBarStory } from '../__stories__/ActionBar.stories';
+import { act } from 'react-dom/test-utils';
+
+it('Checks the ActionBar editing event bubbles up', async () => {
+  const deleteFunc = jest.fn(() => null);
+  const { getByText } = render(<ActionBarStory onDeleteClick={deleteFunc} />);
+
+  expect(getByText('Delete')).toBeInTheDocument();
+
+  act(() => {
+    fireEvent.click(getByText('Delete'));
+  });
+
+  expect(deleteFunc).toHaveBeenCalled();
+});