Sammy/t 131 i see a ascending descending option in (#73)

* refactor: use safe css selector

* feature: onclick update the order option

* feature: set option in the dropdown

* feature: display icon for sort options

* refactor: indent key so react does not complain of conflicting keys

* feature: align icon and text

* feature: fix size of icon to align text

* feature: create design for TopOption in dropdown

* refactor: set font weight in style

* feature: finalise design of TopOption

* refactor: rename option to sort

* refactor: remove order from the sortType

* refactor: move sort mapper in service

* test: selection of Descending in SortDropdownButton

* refactor: fix styme-component warning

* feature: add sorting by people

* refactor: set SortFields types for tables

* feature: add sort by company

* refactor: rename sortFields to singular

* refactor: rename option to SortDirection

front/src/components/table/table-header/__stories__/SortDropdownButton.stories.tsx

@@ -0,0 +1,38 @@
+import { SelectedSortType, SortType } from '../SortAndFilterBar';
+import { ThemeProvider } from '@emotion/react';
+import { lightTheme } from '../../../../layout/styles/themes';
+import { faArrowDown } from '@fortawesome/pro-regular-svg-icons';
+import { SortDropdownButton } from '../SortDropdownButton';
+
+const component = {
+  title: 'SortDropdownButton',
+  component: SortDropdownButton,
+};
+
+export default component;
+
+type OwnProps = {
+  setSorts: () => void;
+};
+
+const sorts = [] satisfies SelectedSortType[];
+
+const availableSorts = [
+  {
+    label: 'Email',
+    id: 'email',
+    icon: faArrowDown,
+  },
+] satisfies SortType[];
+
+export const RegularSortDropdownButton = ({ setSorts }: OwnProps) => {
+  return (
+    <ThemeProvider theme={lightTheme}>
+      <SortDropdownButton
+        sorts={sorts}
+        sortsAvailable={availableSorts}
+        setSorts={setSorts}
+      />
+    </ThemeProvider>
+  );
+};

front/src/components/table/table-header/__stories__/TableHeader.stories.tsx

@@ -16,7 +16,6 @@ export const RegularTableHeader = () => {
     {
       id: 'created_at',
       label: 'Created at',
-      order: 'asc',
       icon: faCalendar,
     },
   ];