From 7020e25ec4064040aff0d4fbed40247c257dd133 Mon Sep 17 00:00:00 2001
From: Severin Landolt <sev.landolt@gmail.com>
Date: Sat, 4 Nov 2023 13:52:56 +0100
Subject: [PATCH] Stories Slider

---
 src/components/text-elements/Legend/Legend.tsx      | 2 +-
 src/stories/chart-elements/AreaChart.stories.tsx    | 7 +++++--
 src/stories/chart-elements/BarChart.stories.tsx     | 4 ++--
 src/stories/chart-elements/LineChart.stories.tsx    | 4 ++--
 src/stories/chart-elements/ScatterChart.stories.tsx | 4 ++--
 5 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/text-elements/Legend/Legend.tsx b/src/components/text-elements/Legend/Legend.tsx
index 9e151b725..cdbca3d02 100644
--- a/src/components/text-elements/Legend/Legend.tsx
+++ b/src/components/text-elements/Legend/Legend.tsx
@@ -108,7 +108,7 @@ const ScrollButton = ({ icon, onClick, disabled }: ScrollButtonProps) => {
     <button
       type="button"
       className={tremorTwMerge(
-        makeLegendClassName("legendScrollButton"),
+        makeLegendClassName("legendSliderButton"),
         // common
         "w-5 group inline-flex items-center truncate rounded-tremor-small transition",
         disabled ? "cursor-not-allowed" : "ursor-pointer",
diff --git a/src/stories/chart-elements/AreaChart.stories.tsx b/src/stories/chart-elements/AreaChart.stories.tsx
index 0643bfa66..8924c2fbf 100644
--- a/src/stories/chart-elements/AreaChart.stories.tsx
+++ b/src/stories/chart-elements/AreaChart.stories.tsx
@@ -178,8 +178,11 @@ export const RotateXLabels: Story = {
   },
 };
 
-export const WithoutLegendScroll: Story = {
-  args: { enableLegendSlider: false },
+export const LegendSlider: Story = {
+  args: {
+    enableLegendSlider: true,
+    categories: ["Sales", "Successful Payments", "Test"],
+  },
 };
 
 export const NoAxes: Story = {
diff --git a/src/stories/chart-elements/BarChart.stories.tsx b/src/stories/chart-elements/BarChart.stories.tsx
index e858679f8..2acdb03be 100644
--- a/src/stories/chart-elements/BarChart.stories.tsx
+++ b/src/stories/chart-elements/BarChart.stories.tsx
@@ -121,8 +121,8 @@ export const SingleAndMultipleDataAndOnValueChange: Story = {
   args: { data: singleAndMultipleData, onValueChange: (v: any) => alert(JSON.stringify(v)) },
 };
 
-export const WithoutLegendScroll: Story = {
-  args: { enableLegendSlider: false },
+export const LegendSlider: Story = {
+  args: { enableLegendSlider: true },
 };
 
 export const PreserveStartEnd: Story = {
diff --git a/src/stories/chart-elements/LineChart.stories.tsx b/src/stories/chart-elements/LineChart.stories.tsx
index 08be7af59..c46134f92 100644
--- a/src/stories/chart-elements/LineChart.stories.tsx
+++ b/src/stories/chart-elements/LineChart.stories.tsx
@@ -118,8 +118,8 @@ export const SingleAndMultipleDataAndOnValueChange: Story = {
   args: { data: singleAndMultipleData, onValueChange: (v: any) => alert(JSON.stringify(v)) },
 };
 
-export const WithoutLegendScroll: Story = {
-  args: { enableLegendSlider: false },
+export const LegendSlider: Story = {
+  args: { enableLegendSlider: true },
 };
 export const PreserveStartEnd: Story = {
   args: { intervalType: "preserveStartEnd" },
diff --git a/src/stories/chart-elements/ScatterChart.stories.tsx b/src/stories/chart-elements/ScatterChart.stories.tsx
index 4358f805c..b420ef70a 100644
--- a/src/stories/chart-elements/ScatterChart.stories.tsx
+++ b/src/stories/chart-elements/ScatterChart.stories.tsx
@@ -96,8 +96,8 @@ export const RichDataExample: Story = {
   },
 };
 
-export const WithoutLegendScroll: Story = {
-  args: { enableLegendSlider: false },
+export const LegendSlider: Story = {
+  args: { enableLegendSlider: true },
 };
 
 export const PreserveStartEnd: Story = {