Stories Slider

tremorlabs · Nov 4, 2023 · 7020e25 · 7020e25
1 parent 764e816
commit 7020e25
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 = {