Merge pull request #42 from twentyhq/sammy/t-79-i-can-see-checkboxes-ui

feature: add checkbox on people cells

front/src/components/form/Checkbox.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  name: string;
+  id: string;
+};
+
+const StyledContainer = styled.span`
+  input[type='checkbox'] {
+    accent-color: ${(props) => props.theme.blue};
+    margin: 8px;
+    height: 16px;
+    width: 16px;
+  }
+
+  input[type='checkbox']::before {
+    content: '';
+    border: 1px solid black;
+    width: 14px;
+    height: 14px;
+    border-radius: 2px;
+    display: block;
+  }
+
+  input[type='checkbox']:checked::before {
+    border: 1px solid ${(props) => props.theme.blue};
+  }
+`;
+
+function Checkbox({ name, id }: OwnProps) {
+  return (
+    <StyledContainer>
+      <input
+        type="checkbox"
+        data-testid="input-checkbox"
+        id={id}
+        name={name}
+      ></input>
+    </StyledContainer>
+  );
+}
+
+export default Checkbox;

front/src/components/form/__stories__/Checkbox.stories.tsx

@@ -0,0 +1,20 @@
+import { MemoryRouter } from 'react-router-dom';
+
+import Checkbox from '../Checkbox';
+import { ThemeProvider } from '@emotion/react';
+import { lightTheme } from '../../../layout/styles/themes';
+
+export default {
+  title: 'Checkbox',
+  component: Checkbox,
+};
+
+export const RegularCheckbox = () => {
+  return (
+    <ThemeProvider theme={lightTheme}>
+      <MemoryRouter initialEntries={['/companies']}>
+        <Checkbox name="selected-company-1" id="selected-company--1" />
+      </MemoryRouter>
+    </ThemeProvider>
+  );
+};

front/src/components/form/__tests__/Checkbox.test.tsx

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+
+import { RegularCheckbox } from '../__stories__/Checkbox.stories';
+
+it('Checks the NavItem renders', () => {
+  const { getByTestId } = render(<RegularCheckbox />);
+
+  expect(getByTestId('input-checkbox')).toHaveAttribute(
+    'name',
+    'selected-company-1',
+  );
+});

front/src/layout/containers/HorizontalyAlignedContainer.tsx

@@ -0,0 +1,16 @@
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  children: JSX.Element[];
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+function HorizontalyAlignedContainer({ children: children }: OwnProps) {
+  return <StyledContainer>{children}</StyledContainer>;
+}
+
+export default HorizontalyAlignedContainer;

front/src/pages/people/People.tsx

@@ -16,6 +16,8 @@ import CellLink from '../../components/table/CellLink';
 import ColumnHead from '../../components/table/ColumnHead';
 import personPlaceholder from './placeholder.png';
 import { parsePhoneNumber, CountryCode } from 'libphonenumber-js';
+import Checkbox from '../../components/form/Checkbox';
+import HorizontalyAlignedContainer from '../../layout/containers/HorizontalyAlignedContainer';
 
 type Person = {
   fullName: string;
@@ -105,11 +107,17 @@ const columns = [
   columnHelper.accessor('fullName', {
     header: () => <ColumnHead viewName="People" viewIcon={faUser} />,
     cell: (props) => (
-      <CellLink
-        name={props.row.original.fullName}
-        picture={props.row.original.picture}
-        href="#"
-      />
+      <HorizontalyAlignedContainer>
+        <Checkbox
+          id={`person-selected-${props.row.original.email}`}
+          name={`person-selected${props.row.original.email}`}
+        />
+        <CellLink
+          name={props.row.original.fullName}
+          picture={props.row.original.picture}
+          href="#"
+        />
+      </HorizontalyAlignedContainer>
     ),
   }),
   columnHelper.accessor('email', {