feat(ui): add sorting icon component and table header cell styling EE-3626 (#7165)

* feat(ui): add sorting icons EE-3626

feat(ui): Add react component for sorting icons

feat(ui) make component usable in angular 

* feat(ui): update angular example EE-3626

app/react/components/datatables/TableHeaderCell.tsx

@@ -2,9 +2,8 @@ import clsx from 'clsx';
 import { PropsWithChildren, ReactNode } from 'react';
 import { TableHeaderProps } from 'react-table';
 
-import { Button } from '@@/buttons';
-
 import { useTableContext } from './TableContainer';
+import { TableHeaderSortIcons } from './TableHeaderSortIcons';
 import styles from './TableHeaderCell.module.css';
 
 interface Props {
@@ -32,15 +31,17 @@ export function TableHeaderCell({
 
   return (
     <th role={role} style={style} className={className}>
-      <SortWrapper
-        canSort={canSort}
-        onClick={onSortClick}
-        isSorted={isSorted}
-        isSortedDesc={isSortedDesc}
-      >
-        {render()}
-      </SortWrapper>
-      {canFilter ? renderFilter() : null}
+      <div className="flex flex-row flex-nowrap h-full items-center gap-1">
+        <SortWrapper
+          canSort={canSort}
+          onClick={onSortClick}
+          isSorted={isSorted}
+          isSortedDesc={isSortedDesc}
+        >
+          {render()}
+        </SortWrapper>
+        {canFilter ? renderFilter() : null}
+      </div>
     </th>
   );
 }
@@ -49,13 +50,13 @@ interface SortWrapperProps {
   canSort: boolean;
   isSorted: boolean;
   isSortedDesc?: boolean;
-  onClick: (desc: boolean) => void;
+  onClick?: (desc: boolean) => void;
 }
 
 function SortWrapper({
   canSort,
   children,
-  onClick,
+  onClick = () => {},
   isSorted,
   isSortedDesc,
 }: PropsWithChildren<SortWrapperProps>) {
@@ -64,27 +65,47 @@ function SortWrapper({
   }
 
   return (
-    <Button
-      color="link"
+    <button
       type="button"
       onClick={() => onClick(!isSortedDesc)}
-      className="sortable"
-    >
-      <span className="sortable-label">{children}</span>
-
-      {isSorted ? (
-        <i
-          className={clsx(
-            'fa',
-            'space-left',
-            isSortedDesc ? 'fa-sort-alpha-up' : 'fa-sort-alpha-down',
-            styles.sortIcon
-          )}
-          aria-hidden="true"
-        />
-      ) : (
-        <div className={styles.sortIcon} />
+      className={clsx(
+        'sortable !bg-transparent w-full h-full !ml-0 !px-0 border-none focus:border-none',
+        isSorted && styles.sortingActive
       )}
-    </Button>
+    >
+      <div className="flex flex-row justify-start items-center w-full h-full">
+        {children}
+        <TableHeaderSortIcons
+          sorted={isSorted}
+          descending={isSorted && !!isSortedDesc}
+        />
+      </div>
+    </button>
+  );
+}
+
+interface TableColumnHeaderAngularProps {
+  colTitle: string;
+  canSort: boolean;
+  isSorted?: boolean;
+  isSortedDesc?: boolean;
+}
+
+export function TableColumnHeaderAngular({
+  canSort,
+  isSorted,
+  colTitle,
+  isSortedDesc,
+}: TableColumnHeaderAngularProps) {
+  return (
+    <div className="flex flex-row flex-nowrap h-full">
+      <SortWrapper
+        canSort={canSort}
+        isSorted={!!isSorted}
+        isSortedDesc={isSortedDesc}
+      >
+        {colTitle}
+      </SortWrapper>
+    </div>
   );
 }