Advanced table arrows

powerhome · Sep 4, 2024 · 5df93a9 · 5df93a9
1 parent 42990e3
commit 5df93a9
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 4 deletions.
diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx b/playbook/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx
@@ -4,28 +4,41 @@ import { Header } from "@tanstack/react-table"
 import { GenericObject } from "../../types"
 
 import Icon from "../../pb_icon/_icon"
+import { getAllIcons } from "../../utilities/icons/allicons"
 
 import { displayIcon } from "../Utilities/IconHelpers"
 
 type SortIconButtonProps = {
   header: Header<GenericObject, unknown>
   sortIcon?: string | string[]
 }
+
 export const SortIconButton = ({ header, sortIcon }: SortIconButtonProps) => {
 
+const firstIcon = displayIcon(sortIcon)[0] 
+const secondIcon = displayIcon(sortIcon)[1] 
+const upIcon = getAllIcons()["arrowUpShortWide"].icon as unknown as { [key: string]: SVGElement }
+const downIcon = getAllIcons()["arrowDownShortWide"].icon as unknown as { [key: string]: SVGElement }
+
   return (
     <>
       {header.column.getIsSorted() === "desc" ? (
         <div className="sort-button-icon" 
-            key={displayIcon(sortIcon)[0]}
+            key={firstIcon}
         >
-          <Icon icon={displayIcon(sortIcon)[0]} />
+        { firstIcon === "arrow-up-short-wide" ? (
+          <Icon customIcon={upIcon} /> ) : (
+          <Icon icon={firstIcon} />
+        )}
         </div>
       ) : (
         <div className="sort-button-icon" 
-            key={displayIcon(sortIcon)[1]}
+            key={secondIcon}
         >
-          <Icon icon={displayIcon(sortIcon)[1]} />
+        { secondIcon === "arrow-down-short-wide" ? (
+          <Icon customIcon={downIcon} /> ) : (
+          <Icon icon={secondIcon} />
+        )}
         </div>
       )}
     </>

diff --git a/playbook/app/pb_kits/playbook/utilities/icons/allicons.tsx b/playbook/app/pb_kits/playbook/utilities/icons/allicons.tsx
@@ -101,6 +101,36 @@ const envelope = (
     </svg>
 )
 
+const arrowUpShortWide = (
+  <svg
+      fill="none"
+      height="1.5em"
+      viewBox="0 0 30 25"
+      width="1.5em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+          d="M3.44 8.724a1.125 1.125 0 11-1.59-1.59l4.235-4.236a1.5 1.5 0 012.12 0l4.236 4.235a1.125 1.125 0 01-1.591 1.591l-2.58-2.58V21.43a1.125 1.125 0 01-2.25 0V6.145l-2.58 2.58zM14.25 20.68c0-.622.504-1.125 1.125-1.125h12a1.125 1.125 0 110 2.25h-12a1.125 1.125 0 01-1.125-1.125zm1.125-6.63a1.125 1.125 0 000 2.25h9a1.125 1.125 0 100-2.25h-9zm-1.125-4.37c0-.622.504-1.125 1.125-1.125h6a1.125 1.125 0 110 2.25h-6a1.125 1.125 0 01-1.125-1.125zm1.125-6.625a1.125 1.125 0 000 2.25h3a1.125 1.125 0 100-2.25h-3z"
+          fill="#242B42"
+      />
+    </svg>
+)
+
+const arrowDownShortWide = (
+  <svg
+      fill="none"
+      height="1.5em"
+      viewBox="0 0 30 25"
+      width="1.5em"
+      xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+        d="M8.27 3.857a1.125 1.125 0 00-2.25 0v15.284l-2.58-2.58a1.125 1.125 0 10-1.59 1.592l4.235 4.235a1.5 1.5 0 002.12 0l4.236-4.235a1.125 1.125 0 10-1.591-1.591l-2.58 2.58V3.856zm5.98 17.25c0-.621.504-1.125 1.125-1.125h12a1.125 1.125 0 110 2.25h-12a1.125 1.125 0 01-1.125-1.125zm1.125-6.63a1.125 1.125 0 000 2.25h8.25a1.125 1.125 0 100-2.25h-8.25zm-1.125-4.37c0-.621.504-1.125 1.125-1.125h5.25a1.125 1.125 0 110 2.25h-5.25a1.125 1.125 0 01-1.125-1.125zm1.125-6.625a1.125 1.125 0 000 2.25h1.5a1.125 1.125 0 100-2.25h-1.5z"
+        fill="#242B42"
+    />
+  </svg>
+)
+
 export const getAllIcons = () => {
 
     return {
@@ -121,6 +151,12 @@ export const getAllIcons = () => {
         },
         envelope: {
             icon: envelope
+        },
+        arrowUpShortWide: {
+            icon: arrowUpShortWide
+        },
+        arrowDownShortWide: {
+            icon: arrowDownShortWide
         }
     }
 }