From 63a4428900d8d3dbd9ee336483652560075ffd49 Mon Sep 17 00:00:00 2001
From: Severin Landolt <41927988+severinlandolt@users.noreply.github.com>
Date: Mon, 20 May 2024 14:49:27 +0200
Subject: [PATCH] feat: Add `none` to sortOrder prop (#21)

* add none to sort order

* add test
---
 src/components/BarList/BarList.tsx         | 16 ++++++++--------
 src/components/BarList/barlist.spec.ts     | 13 +++++++++++++
 src/components/BarList/barlist.stories.tsx |  7 +++++++
 src/components/BarList/changelog.md        | 10 ++++++++--
 4 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/src/components/BarList/BarList.tsx b/src/components/BarList/BarList.tsx
index d988206..3811c3e 100644
--- a/src/components/BarList/BarList.tsx
+++ b/src/components/BarList/BarList.tsx
@@ -1,4 +1,4 @@
-// Tremor Raw BarList [v0.0.1]
+// Tremor Raw BarList [v0.1.0]
 
 import React from "react"
 
@@ -18,7 +18,7 @@ interface BarListProps<T = unknown>
   valueFormatter?: (value: number) => string
   showAnimation?: boolean
   onValueChange?: (payload: Bar<T>) => void
-  sortOrder?: "ascending" | "descending"
+  sortOrder?: "ascending" | "descending" | "none"
 }
 
 function BarListInner<T>(
@@ -35,12 +35,12 @@ function BarListInner<T>(
 ) {
   const Component = onValueChange ? "button" : "div"
   const sortedData = React.useMemo(() => {
-    if (sortOrder) {
-      return [...data].sort((a, b) => {
-        return sortOrder === "ascending" ? a.value - b.value : b.value - a.value
-      })
+    if (sortOrder === "none") {
+      return data
     }
-    return data
+    return [...data].sort((a, b) => {
+      return sortOrder === "ascending" ? a.value - b.value : b.value - a.value
+    })
   }, [data, sortOrder])
 
   const widths = React.useMemo(() => {
@@ -98,7 +98,7 @@ function BarListInner<T>(
               )}
               style={{ width: `${widths[index]}%` }}
             >
-              <div className={cx("absolute left-2 flex pr-2 max-w-full")}>
+              <div className={cx("absolute left-2 flex max-w-full pr-2")}>
                 {item.href ? (
                   <a
                     href={item.href}
diff --git a/src/components/BarList/barlist.spec.ts b/src/components/BarList/barlist.spec.ts
index d42e2e6..0198d1d 100644
--- a/src/components/BarList/barlist.spec.ts
+++ b/src/components/BarList/barlist.spec.ts
@@ -153,6 +153,19 @@ test.describe("Expect barlist sort order", () => {
   })
 })
 
+test.describe("Expect barlist sort order", () => {
+  test("to have aria-sort='none'", async ({ page }) => {
+    await page.goto(
+      "http://localhost:6006/?path=/story/visualization-barlist--with-sort-order-none",
+    )
+    await expect(
+      page
+        .frameLocator('iframe[title="storybook-preview-iframe"]')
+        .getByTestId("barlist"),
+    ).toHaveAttribute("aria-sort", "none")
+  })
+})
+
 test.describe("Expect barlist onvaluechange", () => {
   test("to be clickable", async ({ page }) => {
     await page.goto(
diff --git a/src/components/BarList/barlist.stories.tsx b/src/components/BarList/barlist.stories.tsx
index e2b357e..be35050 100644
--- a/src/components/BarList/barlist.stories.tsx
+++ b/src/components/BarList/barlist.stories.tsx
@@ -56,6 +56,13 @@ export const WithSortOrderAscending: Story = {
   },
 }
 
+export const WithSortOrderNone: Story = {
+  args: {
+    data: data,
+    sortOrder: "none",
+  },
+}
+
 export const WithOnValueChange: Story = {
   args: {
     data: data,
diff --git a/src/components/BarList/changelog.md b/src/components/BarList/changelog.md
index 6865bc1..cc4c245 100644
--- a/src/components/BarList/changelog.md
+++ b/src/components/BarList/changelog.md
@@ -1,8 +1,14 @@
 # Tremor Raw BarList Changelog
 
+## 0.1.0
+
+### Changes
+
+- Added sortOrder: `none` option
+
 ## 0.0.1
 
 ### Changes
 
-* Improve spacing when bar is a button.
-* Improve padding for long labels.
+- Improve spacing when bar is a button.
+- Improve padding for long labels.