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 (
+
+ {picture && (
+
+ )}
+ {name}
+
+ );
+}
+
+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 (
+
+
+
+
+
+ );
+};
+
+export const RegularCompanyChipWithImage = () => {
+ return (
+
+
+
+
+
+ );
+};
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();
+
+ expect(getByText('selected-company-1')).toBeDefined();
+});
+
+it('Checks the img renders', () => {
+ const { getByTestId } = render();
+
+ 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 (
-
- {picture &&
}
- {name}
-
+
);
}