twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-30 03:43:02 +03:00
Code Issues Packages Projects Releases Wiki Activity

test: add story for table header (#204)

Browse Source 
* test: add story for table header

* feature: wrap chips in a container and set shrink to 0 so they don't grow vertically

* feature: cancel button is darker

* feature: set gap between chip to 4px instead of 8

* lint: remove unused code

* bugfix: ChipContainer has a starting margin
This commit is contained in:
Sammy Teillet 2023-06-06 17:45:07 +02:00 committed by GitHub
parent 86e00c3a03
commit b1bf050936
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 120 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx
View File

@ -26,6 +26,17 @@ const StyledBar = styled.div`
height: 40px;
`;
const StyledChipcontainer = styled.div`
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 40px;
overflow-x: auto;
margin-left: ${(props) => props.theme.spacing(2)};
gap: ${(props) => props.theme.spacing(1)};
`;
const StyledCancelButton = styled.button`
margin-left: auto;
border: none;
@ -35,7 +46,7 @@ const StyledCancelButton = styled.button`
const vert = props.theme.spacing(1);
return `${vert} ${horiz} ${vert} ${horiz}`;
}};
color: ${(props) => props.theme.text40};
color: ${(props) => props.theme.text60};
font-weight: 500;
margin-right: ${(props) => props.theme.spacing(2)};
cursor: pointer;
@ -56,29 +67,31 @@ function SortAndFilterBar<SortField, TData extends FilterableFieldsType>({
}: OwnProps<SortField, TData>) {
return (
<StyledBar>
{sorts.map((sort) => {
return (
<SortOrFilterChip
key={sort.key}
labelValue={sort.label}
id={sort.key}
icon={sort.order === 'desc' ? <FaArrowDown /> : <FaArrowUp />}
onRemove={() => onRemoveSort(sort.key)}
/>
);
})}
{filters.map((filter) => {
return (
<SortOrFilterChip
key={filter.key}
labelKey={filter.label}
labelValue={`${filter.operand.label} ${filter.displayValue}`}
id={filter.key}
icon={filter.icon}
onRemove={() => onRemoveFilter(filter.key)}
/>
);
})}
<StyledChipcontainer>
{sorts.map((sort) => {
return (
<SortOrFilterChip
key={sort.key}
labelValue={sort.label}
id={sort.key}
icon={sort.order === 'desc' ? <FaArrowDown /> : <FaArrowUp />}
onRemove={() => onRemoveSort(sort.key)}
/>
);
})}
{filters.map((filter) => {
return (
<SortOrFilterChip
key={filter.key}
labelKey={filter.label}
labelValue={`${filter.operand.label} ${filter.displayValue}`}
id={filter.key}
icon={filter.icon}
onRemove={() => onRemoveFilter(filter.key)}
/>
);
})}
</StyledChipcontainer>
{filters.length + sorts.length > 0 && (
<StyledCancelButton
data-testid={'cancel-button'}

2
front/src/modules/ui/components/table/table-header/SortOrFilterChip.tsx
View File

@ -18,9 +18,9 @@ const StyledChip = styled.div`
border: 1px solid ${(props) => props.theme.blueLowTransparency};
color: ${(props) => props.theme.blue};
padding: ${(props) => props.theme.spacing(1) + ' ' + props.theme.spacing(2)};
margin-left: ${(props) => props.theme.spacing(2)};
font-size: ${(props) => props.theme.fontSizeSmall};
align-items: center;
flex-shrink: 0;
`;
const StyledIcon = styled.div`
margin-right: ${(props) => props.theme.spacing(1)};

82
front/src/modules/ui/components/table/table-header/__stories__/TableHeader.stories.tsx Normal file
View File

@ -0,0 +1,82 @@
import React from 'react';
import { FaList } from 'react-icons/fa';
import { ApolloProvider } from '@apollo/client';
import type { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
import { mockedClient } from '~/testing/mockedClient';
import { availableFilters } from '../../../../../../pages/companies/companies-filters';
import { availableSorts } from '../../../../../../pages/companies/companies-sorts';
import { TableHeader } from '../TableHeader';
const meta: Meta<typeof TableHeader> = {
title: 'Components/Table/TableHeader',
component: TableHeader,
};
export default meta;
type Story = StoryObj<typeof TableHeader>;
export const Empty: Story = {
render: () => (
<ApolloProvider client={mockedClient}>
<FullHeightStorybookLayout>
<TableHeader
viewName="ViewName"
viewIcon={<FaList />}
availableSorts={availableSorts}
availableFilters={availableFilters}
/>
</FullHeightStorybookLayout>
</ApolloProvider>
),
};
export const WithSortsAndFilters: Story = {
render: () => (
<ApolloProvider client={mockedClient}>
<FullHeightStorybookLayout>
<TableHeader
viewName="ViewName"
viewIcon={<FaList />}
availableSorts={availableSorts}
availableFilters={availableFilters}
/>
</FullHeightStorybookLayout>
</ApolloProvider>
),
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const outsideClick = await canvas.findByText('ViewName');
userEvent.click(await canvas.findByText('Filter'));
userEvent.click(await canvas.findByText('Name'));
const nameInput = await canvas.findByPlaceholderText('Name');
userEvent.type(nameInput, 'My name');
userEvent.click(outsideClick);
userEvent.click(await canvas.findByText('Sort'));
userEvent.click(await canvas.findByText('Name'));
userEvent.click(await canvas.findByText('Sort'));
userEvent.click(await canvas.findByText('Creation'));
userEvent.click(await canvas.findByText('Sort'));
userEvent.click(await canvas.findByText('Address'));
userEvent.click(await canvas.findByText('Filter'));
userEvent.click(await canvas.findByText('Employees'));
const employeesInput = await canvas.findByPlaceholderText('Employees');
userEvent.type(employeesInput, '12');
userEvent.click(await canvas.findByText('Sort'));
userEvent.click(await canvas.findByText('Url'));
userEvent.click(await canvas.findByText('Filter'));
userEvent.click(await canvas.findByText('Created At'));
userEvent.click(await canvas.findByText('6'));
userEvent.click(outsideClick);
},
};