adilallo
96 lines
1.9 KiB
JavaScript
96 lines
1.9 KiB
JavaScript
import Scrollbar from "../../app/components/utility/Scrollbar";
|
|
|
|
const tallContent = (
|
|
<div style={{ height: 400 }}>
|
|
<p>Line 1</p>
|
|
<p>Line 2</p>
|
|
<p>Line 3</p>
|
|
<p>Line 4</p>
|
|
<p>Line 5</p>
|
|
<p>Line 6</p>
|
|
<p>Line 7</p>
|
|
<p>Line 8</p>
|
|
<p>Line 9</p>
|
|
<p>Line 10</p>
|
|
</div>
|
|
);
|
|
|
|
const wideContent = (
|
|
<div style={{ display: "flex", width: 800, gap: 16 }}>
|
|
<span>Item A</span>
|
|
<span>Item B</span>
|
|
<span>Item C</span>
|
|
<span>Item D</span>
|
|
<span>Item E</span>
|
|
</div>
|
|
);
|
|
|
|
export default {
|
|
title: "Components/Utility/Scrollbar",
|
|
component: Scrollbar,
|
|
parameters: {
|
|
layout: "centered",
|
|
docs: {
|
|
description: {
|
|
component:
|
|
"A scrollable container that applies the design system scrollbar styling. Supports vertical, horizontal, or both overflow.",
|
|
},
|
|
},
|
|
},
|
|
argTypes: {
|
|
orientation: {
|
|
control: { type: "select" },
|
|
options: ["vertical", "horizontal", "both"],
|
|
description: "Scroll direction",
|
|
},
|
|
},
|
|
};
|
|
|
|
export const Default = {
|
|
args: {
|
|
children: tallContent,
|
|
orientation: "vertical",
|
|
},
|
|
decorators: [
|
|
(Story) => (
|
|
<div style={{ width: 300, maxHeight: 200, border: "1px solid #ccc" }}>
|
|
<Story />
|
|
</div>
|
|
),
|
|
],
|
|
};
|
|
|
|
export const Horizontal = {
|
|
args: {
|
|
children: wideContent,
|
|
orientation: "horizontal",
|
|
},
|
|
decorators: [
|
|
(Story) => (
|
|
<div style={{ width: 300, overflow: "hidden" }}>
|
|
<Story />
|
|
</div>
|
|
),
|
|
],
|
|
};
|
|
|
|
export const Both = {
|
|
args: {
|
|
children: (
|
|
<div style={{ width: 400, height: 400 }}>
|
|
<div style={{ width: 500, height: 500, padding: 8 }}>
|
|
Scroll both directions. Content is larger than the container.
|
|
</div>
|
|
</div>
|
|
),
|
|
orientation: "both",
|
|
},
|
|
decorators: [
|
|
(Story) => (
|
|
<div style={{ width: 300, height: 200, border: "1px solid #ccc" }}>
|
|
<Story />
|
|
</div>
|
|
),
|
|
],
|
|
};
|