import {
  Story,
  Canvas,
  ArgsTable,
  Meta,
  SourceState,
} from "@storybook/blocks";
import { ComponentHeading } from "../../storybook-components";
import { Box, Paragraph, ScrollPane } from "../..";

<Meta title="Components/Layout/Scroll Pane" component={ScrollPane} />

<ComponentHeading
  componentName="Scroll Pane"
  description="Provides a container that allows its overflow content to be scrolled"
  sourcePath="src/components/ScrollPane/ScrollPane.tsx"
/>

## Installation

```jsx
import { ScrollPane } from "@conveyorhq/arrow-ds";
```

## Basic usage

<Canvas withSource={SourceState.OPEN}>
  <Story name="ScrollPane">
    <ScrollPane className="h-64">
      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 0].map((item) => (
        <Paragraph key={item}>
          Duis vulputate dui quis commodo cursus. In fermentum efficitur
          vehicula. Integer nec felis varius, ultrices erat ac, volutpat lectus.
          Proin eu dolor sed magna accumsan blandit a ac nisl. Nulla eros ante,
          blandit et suscipit id, ultrices vitae ligula. Vestibulum egestas orci
          nec orci finibus varius. Nullam sit amet ex vel arcu fermentum mattis
          et in risus. Integer blandit semper consequat. Aenean lectus quam,
          tristique convallis est varius, commodo aliquam ipsum.
        </Paragraph>
      ))}
    </ScrollPane>
  </Story>
</Canvas>

## API

These are the custom props that extend `BoxProps`. Full list of props <a href="#all-props">below</a>.

<ArgsTable of={ScrollPane} />

## Demos

### Disabled

<Canvas withSource={SourceState.OPEN}>
  <Story name="Disabled" className="overflow-hidden">
    <Box className="overflow-hidden">
      {/* Above Box is a Storybook hack ONLY, this is not needed to disable ScrollPane */}
      <ScrollPane className="h-64" disabled>
        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 0].map((item) => (
          <Paragraph key={item}>
            Duis vulputate dui quis commodo cursus. In fermentum efficitur
            vehicula. Integer nec felis varius, ultrices erat ac, volutpat
            lectus. Proin eu dolor sed magna accumsan blandit a ac nisl. Nulla
            eros ante, blandit et suscipit id, ultrices vitae ligula. Vestibulum
            egestas orci nec orci finibus varius. Nullam sit amet ex vel arcu
            fermentum mattis et in risus. Integer blandit semper consequat.
            Aenean lectus quam, tristique convallis est varius, commodo aliquam
            ipsum.
          </Paragraph>
        ))}
      </ScrollPane>
    </Box>
  </Story>
</Canvas>

### With visible scrollbar (mac OS, Webkit)

macOS hides scrollbars by default and this doesn't help when a visual cue is
needed to indicate that there is more content to scroll to.

Set the prop `scrollbarVisible` to true to force the scrollbar to be visible.

If you’re not using ScrollPane, you can add the globally available classname
`visible-scrollbar` to any container where you want the scrollbar to be visible.

<Canvas withSource={SourceState.OPEN}>
  <Story name="Visible scrollbar" className="overflow-hidden">
    <ScrollPane className="h-64" scrollbarVisible>
      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 0].map((item) => (
        <Paragraph key={item}>
          Duis vulputate dui quis commodo cursus. In fermentum efficitur
          vehicula. Integer nec felis varius, ultrices erat ac, volutpat lectus.
          Proin eu dolor sed magna accumsan blandit a ac nisl. Nulla eros ante,
          blandit et suscipit id, ultrices vitae ligula. Vestibulum egestas orci
          nec orci finibus varius. Nullam sit amet ex vel arcu fermentum mattis
          et in risus. Integer blandit semper consequat. Aenean lectus quam,
          tristique convallis est varius, commodo aliquam ipsum.
        </Paragraph>
      ))}
    </ScrollPane>
  </Story>
</Canvas>