From 471d6743ad6c9b8a073499325513881bf6820469 Mon Sep 17 00:00:00 2001
From: Sammy Teillet <sammy.teillet@gmail.com>
Date: Wed, 19 Apr 2023 12:03:02 +0200
Subject: [PATCH] refactor: create company chip

---
 front/src/components/chips/CompanyChip.tsx    | 44 +++++++++++++++++++
 .../chips/__stories__/CompanyChip.tsx         | 30 +++++++++++++
 .../chips/__tests__/CompanyChip.test.tsx      | 18 ++++++++
 front/src/components/table/CellLink.tsx       | 27 +-----------
 4 files changed, 94 insertions(+), 25 deletions(-)
 create mode 100644 front/src/components/chips/CompanyChip.tsx
 create mode 100644 front/src/components/chips/__stories__/CompanyChip.tsx
 create mode 100644 front/src/components/chips/__tests__/CompanyChip.test.tsx

diff --git a/front/src/components/chips/CompanyChip.tsx b/front/src/components/chips/CompanyChip.tsx
new file mode 100644
index 000000000..4c734627f
--- /dev/null
+++ b/front/src/components/chips/CompanyChip.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  name: string;
+  picture?: string;
+};
+
+const StyledContainer = styled.span`
+  background-color: ${(props) => props.theme.tertiaryBackground};
+  border-radius: ${(props) => props.theme.spacing(1)};
+  color: ${(props) => props.theme.text80};
+  display: inline-flex;
+  align-items: center;
+  padding: ${(props) => props.theme.spacing(1)};
+  gap: ${(props) => props.theme.spacing(1)};
+
+  :hover {
+    filter: brightness(95%);
+  }
+
+  img {
+    height: 14px;
+    width: 14px;
+    object-fit: cover;
+  }
+`;
+
+function CompanyChip({ name, picture }: OwnProps) {
+  return (
+    <StyledContainer data-testid="company-chip">
+      {picture && (
+        <img
+          data-testid="company-chip-image"
+          src={picture?.toString()}
+          alt=""
+        />
+      )}
+      {name}
+    </StyledContainer>
+  );
+}
+
+export default CompanyChip;
diff --git a/front/src/components/chips/__stories__/CompanyChip.tsx b/front/src/components/chips/__stories__/CompanyChip.tsx
new file mode 100644
index 000000000..b98fc234c
--- /dev/null
+++ b/front/src/components/chips/__stories__/CompanyChip.tsx
@@ -0,0 +1,30 @@
+import { MemoryRouter } from 'react-router-dom';
+
+import CompanyChip from '../CompanyChip';
+import { ThemeProvider } from '@emotion/react';
+import { lightTheme } from '../../../layout/styles/themes';
+
+export default {
+  title: 'CompanyChip',
+  component: CompanyChip,
+};
+
+export const RegularCompanyChip = () => {
+  return (
+    <ThemeProvider theme={lightTheme}>
+      <MemoryRouter initialEntries={['/companies']}>
+        <CompanyChip name="selected-company-1" />
+      </MemoryRouter>
+    </ThemeProvider>
+  );
+};
+
+export const RegularCompanyChipWithImage = () => {
+  return (
+    <ThemeProvider theme={lightTheme}>
+      <MemoryRouter initialEntries={['/companies']}>
+        <CompanyChip name="selected-company-1" picture="coucou.fr" />
+      </MemoryRouter>
+    </ThemeProvider>
+  );
+};
diff --git a/front/src/components/chips/__tests__/CompanyChip.test.tsx b/front/src/components/chips/__tests__/CompanyChip.test.tsx
new file mode 100644
index 000000000..ed4e57893
--- /dev/null
+++ b/front/src/components/chips/__tests__/CompanyChip.test.tsx
@@ -0,0 +1,18 @@
+import { render } from '@testing-library/react';
+
+import {
+  RegularCompanyChip,
+  RegularCompanyChipWithImage,
+} from '../__stories__/CompanyChip';
+
+it('Checks the NavItem renders', () => {
+  const { getByText } = render(<RegularCompanyChip />);
+
+  expect(getByText('selected-company-1')).toBeDefined();
+});
+
+it('Checks the img renders', () => {
+  const { getByTestId } = render(<RegularCompanyChipWithImage />);
+
+  expect(getByTestId('company-chip-image')).toHaveAttribute('src', 'coucou.fr');
+});
diff --git a/front/src/components/table/CellLink.tsx b/front/src/components/table/CellLink.tsx
index 18c29a249..623f542da 100644
--- a/front/src/components/table/CellLink.tsx
+++ b/front/src/components/table/CellLink.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import styled from '@emotion/styled';
 import { Link } from 'react-router-dom';
+import CompanyChip from '../chips/CompanyChip';
 
 type OwnProps = {
   name: string;
@@ -8,33 +8,10 @@ type OwnProps = {
   href: string;
 };
 
-const StyledContainer = styled.span`
-  background-color: ${(props) => props.theme.tertiaryBackground};
-  border-radius: ${(props) => props.theme.spacing(1)};
-  color: ${(props) => props.theme.text80};
-  display: inline-flex;
-  align-items: center;
-  padding: ${(props) => props.theme.spacing(1)};
-  gap: ${(props) => props.theme.spacing(1)};
-
-  :hover {
-    filter: brightness(95%);
-  }
-
-  img {
-    height: 14px;
-    width: 14px;
-    object-fit: cover;
-  }
-`;
-
 function CellLink({ name, picture, href }: OwnProps) {
   return (
     <Link to={href}>
-      <StyledContainer>
-        {picture && <img src={picture?.toString()} alt="" />}
-        {name}
-      </StyledContainer>
+      <CompanyChip name={name} picture={picture} />
     </Link>
   );
 }