feat: sorting order

Orfium · Jul 15, 2024 · 4a1b748 · 4a1b748
1 parent 5ffd0be
commit 4a1b748
Show file tree

Hide file tree

Showing 19 changed files with 229 additions and 75 deletions.
diff --git a/src/__storyshots__/Updated Components/Table/Table/Basics-BasicExample.snap b/src/__storyshots__/Updated Components/Table/Table/Basics-BasicExample.snap
@@ -41,12 +41,15 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-4 [data-header-role='options'] button {
+.emotion-4 [data-header-role='options'],
+.emotion-4 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
-.emotion-4:hover [data-header-role='options'] button,
-.emotion-4:focus-visible [data-header-role='options'] button {
+.emotion-4:hover [data-header-role='options'],
+.emotion-4:focus-visible [data-header-role='options'],
+.emotion-4:hover [data-header-role='sorting-button'],
+.emotion-4:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 

diff --git a/src/__storyshots__/Updated Components/Table/Table/Columns-ColumnChooser.snap b/src/__storyshots__/Updated Components/Table/Table/Columns-ColumnChooser.snap
@@ -145,12 +145,15 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-10 [data-header-role='options'] button {
+.emotion-10 [data-header-role='options'],
+.emotion-10 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
-.emotion-10:hover [data-header-role='options'] button,
-.emotion-10:focus-visible [data-header-role='options'] button {
+.emotion-10:hover [data-header-role='options'],
+.emotion-10:focus-visible [data-header-role='options'],
+.emotion-10:hover [data-header-role='sorting-button'],
+.emotion-10:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 

diff --git a/src/__storyshots__/Updated Components/Table/Table/Columns-ColumnWidth.snap b/src/__storyshots__/Updated Components/Table/Table/Columns-ColumnWidth.snap
@@ -41,12 +41,15 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-4 [data-header-role='options'] button {
+.emotion-4 [data-header-role='options'],
+.emotion-4 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
-.emotion-4:hover [data-header-role='options'] button,
-.emotion-4:focus-visible [data-header-role='options'] button {
+.emotion-4:hover [data-header-role='options'],
+.emotion-4:focus-visible [data-header-role='options'],
+.emotion-4:hover [data-header-role='sorting-button'],
+.emotion-4:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 
@@ -93,12 +96,15 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-10 [data-header-role='options'] button {
+.emotion-10 [data-header-role='options'],
+.emotion-10 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
-.emotion-10:hover [data-header-role='options'] button,
-.emotion-10:focus-visible [data-header-role='options'] button {
+.emotion-10:hover [data-header-role='options'],
+.emotion-10:focus-visible [data-header-role='options'],
+.emotion-10:hover [data-header-role='sorting-button'],
+.emotion-10:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 

diff --git a/src/__storyshots__/Updated Components/Table/Table/Columns-Sorting.snap b/src/__storyshots__/Updated Components/Table/Table/Columns-Sorting.snap
@@ -41,7 +41,8 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-4 [data-header-role='options'] button {
+.emotion-4 [data-header-role='options'],
+.emotion-4 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
@@ -55,8 +56,10 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-4:hover [data-header-role='options'] button,
-.emotion-4:focus-visible [data-header-role='options'] button {
+.emotion-4:hover [data-header-role='options'],
+.emotion-4:focus-visible [data-header-role='options'],
+.emotion-4:hover [data-header-role='sorting-button'],
+.emotion-4:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 
@@ -187,12 +190,15 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-16 [data-header-role='options'] button {
+.emotion-16 [data-header-role='options'],
+.emotion-16 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
-.emotion-16:hover [data-header-role='options'] button,
-.emotion-16:focus-visible [data-header-role='options'] button {
+.emotion-16:hover [data-header-role='options'],
+.emotion-16:focus-visible [data-header-role='options'],
+.emotion-16:hover [data-header-role='sorting-button'],
+.emotion-16:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 
@@ -216,7 +222,8 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-19 [data-header-role='options'] button {
+.emotion-19 [data-header-role='options'],
+.emotion-19 [data-header-role='sorting-button'] {
   opacity: 1;
 }
 
@@ -230,8 +237,10 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-19:hover [data-header-role='options'] button,
-.emotion-19:focus-visible [data-header-role='options'] button {
+.emotion-19:hover [data-header-role='options'],
+.emotion-19:focus-visible [data-header-role='options'],
+.emotion-19:hover [data-header-role='sorting-button'],
+.emotion-19:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 
@@ -358,6 +367,7 @@
                 >
                   <button
                     class="emotion-9"
+                    data-header-role="sorting-button"
                     data-testid="ictinus_sort_firstName_asc-icon-button"
                     type="button"
                   >
@@ -456,6 +466,7 @@
                 >
                   <button
                     class="emotion-9"
+                    data-header-role="sorting-button"
                     data-testid="ictinus_sort_age_asc-icon-button"
                     type="button"
                   >

diff --git a/src/__storyshots__/Updated Components/Table/Table/Header-StickyHeader.snap b/src/__storyshots__/Updated Components/Table/Table/Header-StickyHeader.snap
@@ -52,12 +52,15 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-4 [data-header-role='options'] button {
+.emotion-4 [data-header-role='options'],
+.emotion-4 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
-.emotion-4:hover [data-header-role='options'] button,
-.emotion-4:focus-visible [data-header-role='options'] button {
+.emotion-4:hover [data-header-role='options'],
+.emotion-4:focus-visible [data-header-role='options'],
+.emotion-4:hover [data-header-role='sorting-button'],
+.emotion-4:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 

diff --git a/src/__storyshots__/Updated Components/Table/Table/Pagination-Pagination.snap b/src/__storyshots__/Updated Components/Table/Table/Pagination-Pagination.snap
@@ -41,12 +41,15 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-4 [data-header-role='options'] button {
+.emotion-4 [data-header-role='options'],
+.emotion-4 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
-.emotion-4:hover [data-header-role='options'] button,
-.emotion-4:focus-visible [data-header-role='options'] button {
+.emotion-4:hover [data-header-role='options'],
+.emotion-4:focus-visible [data-header-role='options'],
+.emotion-4:hover [data-header-role='sorting-button'],
+.emotion-4:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 

diff --git a/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-CellContentAlignment.snap b/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-CellContentAlignment.snap
@@ -41,12 +41,15 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-4 [data-header-role='options'] button {
+.emotion-4 [data-header-role='options'],
+.emotion-4 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
-.emotion-4:hover [data-header-role='options'] button,
-.emotion-4:focus-visible [data-header-role='options'] button {
+.emotion-4:hover [data-header-role='options'],
+.emotion-4:focus-visible [data-header-role='options'],
+.emotion-4:hover [data-header-role='sorting-button'],
+.emotion-4:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 

diff --git a/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowDetails.snap b/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowDetails.snap
@@ -75,12 +75,15 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-7 [data-header-role='options'] button {
+.emotion-7 [data-header-role='options'],
+.emotion-7 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
-.emotion-7:hover [data-header-role='options'] button,
-.emotion-7:focus-visible [data-header-role='options'] button {
+.emotion-7:hover [data-header-role='options'],
+.emotion-7:focus-visible [data-header-role='options'],
+.emotion-7:hover [data-header-role='sorting-button'],
+.emotion-7:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 
@@ -127,12 +130,15 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-19 [data-header-role='options'] button {
+.emotion-19 [data-header-role='options'],
+.emotion-19 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
-.emotion-19:hover [data-header-role='options'] button,
-.emotion-19:focus-visible [data-header-role='options'] button {
+.emotion-19:hover [data-header-role='options'],
+.emotion-19:focus-visible [data-header-role='options'],
+.emotion-19:hover [data-header-role='sorting-button'],
+.emotion-19:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 

diff --git a/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowSelection.snap b/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowSelection.snap
@@ -279,12 +279,15 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-30 [data-header-role='options'] button {
+.emotion-30 [data-header-role='options'],
+.emotion-30 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
-.emotion-30:hover [data-header-role='options'] button,
-.emotion-30:focus-visible [data-header-role='options'] button {
+.emotion-30:hover [data-header-role='options'],
+.emotion-30:focus-visible [data-header-role='options'],
+.emotion-30:hover [data-header-role='sorting-button'],
+.emotion-30:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 
@@ -424,12 +427,15 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-37 [data-header-role='options'] button {
+.emotion-37 [data-header-role='options'],
+.emotion-37 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
-.emotion-37:hover [data-header-role='options'] button,
-.emotion-37:focus-visible [data-header-role='options'] button {
+.emotion-37:hover [data-header-role='options'],
+.emotion-37:focus-visible [data-header-role='options'],
+.emotion-37:hover [data-header-role='sorting-button'],
+.emotion-37:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 

diff --git a/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowSizes.snap b/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowSizes.snap
@@ -41,12 +41,15 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-4 [data-header-role='options'] button {
+.emotion-4 [data-header-role='options'],
+.emotion-4 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
-.emotion-4:hover [data-header-role='options'] button,
-.emotion-4:focus-visible [data-header-role='options'] button {
+.emotion-4:hover [data-header-role='options'],
+.emotion-4:focus-visible [data-header-role='options'],
+.emotion-4:hover [data-header-role='sorting-button'],
+.emotion-4:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 

diff --git a/src/__storyshots__/Updated Components/Table/Table/Showcase-Playground.snap b/src/__storyshots__/Updated Components/Table/Table/Showcase-Playground.snap
@@ -75,12 +75,15 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-7 [data-header-role='options'] button {
+.emotion-7 [data-header-role='options'],
+.emotion-7 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
-.emotion-7:hover [data-header-role='options'] button,
-.emotion-7:focus-visible [data-header-role='options'] button {
+.emotion-7:hover [data-header-role='options'],
+.emotion-7:focus-visible [data-header-role='options'],
+.emotion-7:hover [data-header-role='sorting-button'],
+.emotion-7:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -78,7 +78,17 @@ const Table = <TData extends NoUndefined<TData>>({
                   width={header.getSize()}
                   metaData={header.column.columnDef.meta}
                   {...(header.column.getCanSort() && {
-                    colSortingState: sorting?.sortingColumn?.find((col) => col.id === header.id),
+                    colSortingState: sorting?.sortingColumn?.find((col) => col.id === header.id)
+                      ? {
+                          /** Find and pass the ColumnSort object */
+                          ...sorting?.sortingColumn?.find((col) => col.id === header.id),
+                          /** Check if multiSort and determine the position of the ColumnSort object in the Sorting Array */
+                          ...(sorting.sortingColumn.length > 1 && {
+                            badge:
+                              sorting?.sortingColumn?.findIndex((col) => col.id === header.id) + 1,
+                          }),
+                        }
+                      : undefined,
                     onSort: header.column.toggleSorting,
                     isMultiSortable: header.column.getCanMultiSort(),
                     resetSorting: header.column.clearSorting,

diff --git a/src/components/Table/components/TH/TH.style.ts b/src/components/Table/components/TH/TH.style.ts
@@ -41,21 +41,19 @@ export const thContainer =
       )};
       ${generateStylesFromTokens(theme.tokens.typography.get('normal.body02'))};
 
-      [data-header-role='options'] {
-        button {
-          opacity: ${hasVisibleOptions ? 1 : 0};
-        }
+      [data-header-role='options'],
+      [data-header-role='sorting-button'] {
+        opacity: ${hasVisibleOptions ? 1 : 0};
       }
 
       &:hover,
       &:focus-visible {
         color: ${isSortable && theme.tokens.colors.get('textColor.default.primary')};
         ${isSortable && generateStylesFromTokens(theme.tokens.typography.get('normal.label02'))};
 
-        [data-header-role='options'] {
-          button {
-            opacity: 1;
-          }
+        [data-header-role='options'],
+        [data-header-role='sorting-button'] {
+          opacity: 1;
         }
       }