From 81da0f4e0304a0230a0dacf94eb97455982f03c1 Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Tue, 18 Apr 2023 16:40:49 +0200 Subject: [PATCH 1/6] feature: add checkbox on people cells --- front/src/pages/people/People.tsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx index 64f3f893de..d03ab922ab 100644 --- a/front/src/pages/people/People.tsx +++ b/front/src/pages/people/People.tsx @@ -105,11 +105,18 @@ const columns = [ columnHelper.accessor('fullName', { header: () => , cell: (props) => ( - + <> + + + ), }), columnHelper.accessor('email', { From a855c474a0f80af0f54604d49c2b9f84940576c9 Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Tue, 18 Apr 2023 17:33:39 +0200 Subject: [PATCH 2/6] refactor: create Checkbox component --- front/src/components/form/Checkbox.tsx | 23 +++++++++++++++++++++++ front/src/pages/people/People.tsx | 6 +++--- 2 files changed, 26 insertions(+), 3 deletions(-) create mode 100644 front/src/components/form/Checkbox.tsx diff --git a/front/src/components/form/Checkbox.tsx b/front/src/components/form/Checkbox.tsx new file mode 100644 index 0000000000..7fd099e2f3 --- /dev/null +++ b/front/src/components/form/Checkbox.tsx @@ -0,0 +1,23 @@ +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: #1111b7; + } +`; + +function Checkbox({ name, id }: OwnProps) { + return ( + + + + ); +} + +export default Checkbox; diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx index d03ab922ab..a6609305dd 100644 --- a/front/src/pages/people/People.tsx +++ b/front/src/pages/people/People.tsx @@ -16,6 +16,7 @@ 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'; type Person = { fullName: string; @@ -106,11 +107,10 @@ const columns = [ header: () => , cell: (props) => ( <> - + /> Date: Tue, 18 Apr 2023 17:37:20 +0200 Subject: [PATCH 3/6] refactor: use color from theme --- front/src/components/form/Checkbox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/front/src/components/form/Checkbox.tsx b/front/src/components/form/Checkbox.tsx index 7fd099e2f3..dbd1094b38 100644 --- a/front/src/components/form/Checkbox.tsx +++ b/front/src/components/form/Checkbox.tsx @@ -8,7 +8,7 @@ type OwnProps = { const StyledContainer = styled.span` input[type='checkbox'] { - accent-color: #1111b7; + accent-color: ${(props) => props.theme.purple}; } `; From 0d9b04ea147e69a5a28d16b33370dac805538dc3 Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Tue, 18 Apr 2023 18:07:55 +0200 Subject: [PATCH 4/6] feature: set the right color for unchecked checkbox --- front/src/components/form/Checkbox.tsx | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/front/src/components/form/Checkbox.tsx b/front/src/components/form/Checkbox.tsx index dbd1094b38..34d5279a35 100644 --- a/front/src/components/form/Checkbox.tsx +++ b/front/src/components/form/Checkbox.tsx @@ -8,7 +8,23 @@ type OwnProps = { const StyledContainer = styled.span` input[type='checkbox'] { - accent-color: ${(props) => props.theme.purple}; + 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}; } `; From 4d2339098910be12982a5a0699dcbb67a8188255 Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Tue, 18 Apr 2023 18:13:56 +0200 Subject: [PATCH 5/6] feature: align checkbox and cellLink --- .../containers/HorizontalyAlignedContainer.tsx | 16 ++++++++++++++++ front/src/pages/people/People.tsx | 5 +++-- 2 files changed, 19 insertions(+), 2 deletions(-) create mode 100644 front/src/layout/containers/HorizontalyAlignedContainer.tsx diff --git a/front/src/layout/containers/HorizontalyAlignedContainer.tsx b/front/src/layout/containers/HorizontalyAlignedContainer.tsx new file mode 100644 index 0000000000..6892b2fa3d --- /dev/null +++ b/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 {children}; +} + +export default HorizontalyAlignedContainer; diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx index a6609305dd..3135ce971e 100644 --- a/front/src/pages/people/People.tsx +++ b/front/src/pages/people/People.tsx @@ -17,6 +17,7 @@ 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; @@ -106,7 +107,7 @@ const columns = [ columnHelper.accessor('fullName', { header: () => , cell: (props) => ( - <> + - + ), }), columnHelper.accessor('email', { From 3e09dab7fc4ef7ec53e7cd81a605642b3e216542 Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Tue, 18 Apr 2023 18:27:54 +0200 Subject: [PATCH 6/6] test: add checkbox test --- front/src/components/form/Checkbox.tsx | 7 ++++++- .../form/__stories__/Checkbox.stories.tsx | 20 +++++++++++++++++++ .../form/__tests__/Checkbox.test.tsx | 12 +++++++++++ 3 files changed, 38 insertions(+), 1 deletion(-) create mode 100644 front/src/components/form/__stories__/Checkbox.stories.tsx create mode 100644 front/src/components/form/__tests__/Checkbox.test.tsx diff --git a/front/src/components/form/Checkbox.tsx b/front/src/components/form/Checkbox.tsx index 34d5279a35..48b159fc26 100644 --- a/front/src/components/form/Checkbox.tsx +++ b/front/src/components/form/Checkbox.tsx @@ -31,7 +31,12 @@ const StyledContainer = styled.span` function Checkbox({ name, id }: OwnProps) { return ( - + ); } diff --git a/front/src/components/form/__stories__/Checkbox.stories.tsx b/front/src/components/form/__stories__/Checkbox.stories.tsx new file mode 100644 index 0000000000..903095f623 --- /dev/null +++ b/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 ( + + + + + + ); +}; diff --git a/front/src/components/form/__tests__/Checkbox.test.tsx b/front/src/components/form/__tests__/Checkbox.test.tsx new file mode 100644 index 0000000000..3e0180ad35 --- /dev/null +++ b/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(); + + expect(getByTestId('input-checkbox')).toHaveAttribute( + 'name', + 'selected-company-1', + ); +});