import { Story, Preview, Meta, Props } from '@open-wc/demoing-storybook';
import { html, css } from 'lit-element';
import '../kemet-scroll-snap.js';
import '../kemet-scroll-snap-slide.js';
import '../kemet-scroll-snap-paginator.js';

<Meta
  title="KemetScrollSnap"
  parameters={{
    component: "kemet-scroll-snap",
    options: { selectedPanel: "storybookjs/knobs/panel" }
  }}
/>


# KemetScrollSnap

A scroll-snap implementation for responsive sliders.

## How to use

### Installation

```bash
npm install @kemet/kemet-scroll-snap
```

```js
import '@kemet/kemet-carousel/kemet-scroll-snap.js';
import '@kemet/kemet-carousel/kemet-scroll-snap-slide.js';
import '@kemet/kemet-carousel/kemet-scroll-snap-pagination.js'; // optional
```

### Basic Usage
```html preview-example
  <kemet-scroll-snap>
  <div slot="slides">
    <kemet-scroll-snap-slide>[your content here]</kemet-scroll-snap-slide>
    <kemet-scroll-snap-slide>[your content here]</kemet-scroll-snap-slide>
    <kemet-scroll-snap-slide>[your content here]</kemet-scroll-snap-slide>
  </div>
</kemet-scroll-snap>
```

**Note:** if you're interested in hiding the scrollbar while in horizontal, like in our demo, here's how with css:

```css hide-scroll-bar
kemet-scroll-snap[axis="horizontal"] [slot="slides"] {
  scrollbar-width: none;
}

kemet-scroll-snap[axis="horizontal"] [slot="slides"]::-webkit-scrollbar {
  display: none;
  width: 0px;
  background: transparent;
}
```

## Previews

### Horizontal
<Preview withToolbar>
  <Story name="Horizontal">
    {html`
      <kemet-scroll-snap>
        <div slot="slides">
          <kemet-scroll-snap-slide>
            <h3>Heading 1</h3>
            <p>Bacon ipsum dolor amet biltong pork loin boudin ham jerky venison jowl spare ribs fatback, short ribs beef short loin. Porchetta meatball salami ground round, pancetta biltong venison chuck flank. Frankfurter burgdoggen swine, chuck short ribs alcatra strip steak jerky. Rump porchetta fatback kevin flank. Doner chislic salami, brisket rump jowl spare ribs prosciutto bacon buffalo beef ribs beef tenderloin. Chicken ground round andouille, tail jowl leberkas swine brisket. Alcatra filet mignon short ribs short loin, pig chislic turkey.</p>
            <img src="https://cdn.gamer-network.net/2020/usgamer/FINAL-FANTASY-VII-REMAKE-hed-8.jpg" style="width:100%;" />
          </kemet-scroll-snap-slide>
          <kemet-scroll-snap-slide>
            <h3>Heading 2</h3>
            <p>Bacon ipsum dolor amet biltong pork loin boudin ham jerky venison jowl spare ribs fatback, short ribs beef short loin. Porchetta meatball salami ground round, pancetta biltong venison chuck flank. Frankfurter burgdoggen swine, chuck short ribs alcatra strip steak jerky. Rump porchetta fatback kevin flank. Doner chislic salami, brisket rump jowl spare ribs prosciutto bacon buffalo beef ribs beef tenderloin. Chicken ground round andouille, tail jowl leberkas swine brisket. Alcatra filet mignon short ribs short loin, pig chislic turkey.</p>
            <img src="https://cdn.gamer-network.net/2020/usgamer/FINAL-FANTASY-VII-REMAKE-hed-8.jpg" style="width:100%;" />
          </kemet-scroll-snap-slide>
          <kemet-scroll-snap-slide>
            <h3>Heading 3</h3>
            <p>Bacon ipsum dolor amet biltong pork loin boudin ham jerky venison jowl spare ribs fatback, short ribs beef short loin. Porchetta meatball salami ground round, pancetta biltong venison chuck flank. Frankfurter burgdoggen swine, chuck short ribs alcatra strip steak jerky. Rump porchetta fatback kevin flank. Doner chislic salami, brisket rump jowl spare ribs prosciutto bacon buffalo beef ribs beef tenderloin. Chicken ground round andouille, tail jowl leberkas swine brisket. Alcatra filet mignon short ribs short loin, pig chislic turkey.</p>
            <img src="https://cdn.gamer-network.net/2020/usgamer/FINAL-FANTASY-VII-REMAKE-hed-8.jpg" style="width:100%;" />
          </kemet-scroll-snap-slide>
          <kemet-scroll-snap-slide>
            <h3>Heading 4</h3>
            <p>Bacon ipsum dolor amet biltong pork loin boudin ham jerky venison jowl spare ribs fatback, short ribs beef short loin. Porchetta meatball salami ground round, pancetta biltong venison chuck flank. Frankfurter burgdoggen swine, chuck short ribs alcatra strip steak jerky. Rump porchetta fatback kevin flank. Doner chislic salami, brisket rump jowl spare ribs prosciutto bacon buffalo beef ribs beef tenderloin. Chicken ground round andouille, tail jowl leberkas swine brisket. Alcatra filet mignon short ribs short loin, pig chislic turkey.</p>
            <img src="https://cdn.gamer-network.net/2020/usgamer/FINAL-FANTASY-VII-REMAKE-hed-8.jpg" style="width:100%;" />
          </kemet-scroll-snap-slide>
          <kemet-scroll-snap-slide>
            <h3>Heading 5</h3>
            <p>Bacon ipsum dolor amet biltong pork loin boudin ham jerky venison jowl spare ribs fatback, short ribs beef short loin. Porchetta meatball salami ground round, pancetta biltong venison chuck flank. Frankfurter burgdoggen swine, chuck short ribs alcatra strip steak jerky. Rump porchetta fatback kevin flank. Doner chislic salami, brisket rump jowl spare ribs prosciutto bacon buffalo beef ribs beef tenderloin. Chicken ground round andouille, tail jowl leberkas swine brisket. Alcatra filet mignon short ribs short loin, pig chislic turkey.</p>
            <img src="https://cdn.gamer-network.net/2020/usgamer/FINAL-FANTASY-VII-REMAKE-hed-8.jpg" style="width:100%;" />
          </kemet-scroll-snap-slide>
        </div>
      </kemet-scroll-snap>
    `}
  </Story>
</Preview>

### Vertical
<Preview withToolbar>
  <Story name="Vertical">
    {html`
      <kemet-scroll-snap axis="vertical">
        <div slot="slides" style="height:50vh;">
          <kemet-scroll-snap-slide>
            <h3>Heading 1</h3>
            <p>Bacon ipsum dolor amet biltong pork loin boudin ham jerky venison jowl spare ribs fatback, short ribs beef short loin. Porchetta meatball salami ground round, pancetta biltong venison chuck flank. Frankfurter burgdoggen swine, chuck short ribs alcatra strip steak jerky. Rump porchetta fatback kevin flank. Doner chislic salami, brisket rump jowl spare ribs prosciutto bacon buffalo beef ribs beef tenderloin. Chicken ground round andouille, tail jowl leberkas swine brisket. Alcatra filet mignon short ribs short loin, pig chislic turkey.</p>
            <img src="https://cdn.gamer-network.net/2020/usgamer/FINAL-FANTASY-VII-REMAKE-hed-8.jpg" style="width:100%;" />
          </kemet-scroll-snap-slide>
          <kemet-scroll-snap-slide>
            <h3>Heading 2</h3>
            <p>Bacon ipsum dolor amet biltong pork loin boudin ham jerky venison jowl spare ribs fatback, short ribs beef short loin. Porchetta meatball salami ground round, pancetta biltong venison chuck flank. Frankfurter burgdoggen swine, chuck short ribs alcatra strip steak jerky. Rump porchetta fatback kevin flank. Doner chislic salami, brisket rump jowl spare ribs prosciutto bacon buffalo beef ribs beef tenderloin. Chicken ground round andouille, tail jowl leberkas swine brisket. Alcatra filet mignon short ribs short loin, pig chislic turkey.</p>
            <img src="https://cdn.gamer-network.net/2020/usgamer/FINAL-FANTASY-VII-REMAKE-hed-8.jpg" style="width:100%;" />
          </kemet-scroll-snap-slide>
          <kemet-scroll-snap-slide>
            <h3>Heading 3</h3>
            <p>Bacon ipsum dolor amet biltong pork loin boudin ham jerky venison jowl spare ribs fatback, short ribs beef short loin. Porchetta meatball salami ground round, pancetta biltong venison chuck flank. Frankfurter burgdoggen swine, chuck short ribs alcatra strip steak jerky. Rump porchetta fatback kevin flank. Doner chislic salami, brisket rump jowl spare ribs prosciutto bacon buffalo beef ribs beef tenderloin. Chicken ground round andouille, tail jowl leberkas swine brisket. Alcatra filet mignon short ribs short loin, pig chislic turkey.</p>
            <img src="https://cdn.gamer-network.net/2020/usgamer/FINAL-FANTASY-VII-REMAKE-hed-8.jpg" style="width:100%;" />
          </kemet-scroll-snap-slide>
          <kemet-scroll-snap-slide>
            <h3>Heading 4</h3>
            <p>Bacon ipsum dolor amet biltong pork loin boudin ham jerky venison jowl spare ribs fatback, short ribs beef short loin. Porchetta meatball salami ground round, pancetta biltong venison chuck flank. Frankfurter burgdoggen swine, chuck short ribs alcatra strip steak jerky. Rump porchetta fatback kevin flank. Doner chislic salami, brisket rump jowl spare ribs prosciutto bacon buffalo beef ribs beef tenderloin. Chicken ground round andouille, tail jowl leberkas swine brisket. Alcatra filet mignon short ribs short loin, pig chislic turkey.</p>
            <img src="https://cdn.gamer-network.net/2020/usgamer/FINAL-FANTASY-VII-REMAKE-hed-8.jpg" style="width:100%;" />
          </kemet-scroll-snap-slide>
          <kemet-scroll-snap-slide>
            <h3>Heading 5</h3>
            <p>Bacon ipsum dolor amet biltong pork loin boudin ham jerky venison jowl spare ribs fatback, short ribs beef short loin. Porchetta meatball salami ground round, pancetta biltong venison chuck flank. Frankfurter burgdoggen swine, chuck short ribs alcatra strip steak jerky. Rump porchetta fatback kevin flank. Doner chislic salami, brisket rump jowl spare ribs prosciutto bacon buffalo beef ribs beef tenderloin. Chicken ground round andouille, tail jowl leberkas swine brisket. Alcatra filet mignon short ribs short loin, pig chislic turkey.</p>
            <img src="https://cdn.gamer-network.net/2020/usgamer/FINAL-FANTASY-VII-REMAKE-hed-8.jpg" style="width:100%;" />
          </kemet-scroll-snap-slide>
        </div>
      </kemet-scroll-snap>
    `}
  </Story>
</Preview>

### With Pagination

**Note:** The paginator is rendered without using Shadow Dom. This means that you are responsible for the entire styling of the paginator. This is why you'll notice the `<style>` tag in the code sample. Be sure to style the paginator as you please!
<Preview withToolbar>
  <Story name="Pagination">
    {html`
      <style>
        kemet-scroll-snap-paginator ul {
          font-size: 3rem;
          display: flex;
          gap: 0.5rem;
          padding: 0;
          list-style: none;
          position: relative;
          top: -2rem;
        }
      </style>
      <kemet-scroll-snap>
        <div slot="slides">
          <kemet-scroll-snap-slide>
            <h3>Heading 1</h3>
            <p>Bacon ipsum dolor amet biltong pork loin boudin ham jerky venison jowl spare ribs fatback, short ribs beef short loin. Porchetta meatball salami ground round, pancetta biltong venison chuck flank. Frankfurter burgdoggen swine, chuck short ribs alcatra strip steak jerky. Rump porchetta fatback kevin flank. Doner chislic salami, brisket rump jowl spare ribs prosciutto bacon buffalo beef ribs beef tenderloin. Chicken ground round andouille, tail jowl leberkas swine brisket. Alcatra filet mignon short ribs short loin, pig chislic turkey.</p>
            <img src="https://cdn.gamer-network.net/2020/usgamer/FINAL-FANTASY-VII-REMAKE-hed-8.jpg" style="width:100%;" />
          </kemet-scroll-snap-slide>
          <kemet-scroll-snap-slide>
            <h3>Heading 2</h3>
            <p>Bacon ipsum dolor amet biltong pork loin boudin ham jerky venison jowl spare ribs fatback, short ribs beef short loin. Porchetta meatball salami ground round, pancetta biltong venison chuck flank. Frankfurter burgdoggen swine, chuck short ribs alcatra strip steak jerky. Rump porchetta fatback kevin flank. Doner chislic salami, brisket rump jowl spare ribs prosciutto bacon buffalo beef ribs beef tenderloin. Chicken ground round andouille, tail jowl leberkas swine brisket. Alcatra filet mignon short ribs short loin, pig chislic turkey.</p>
            <img src="https://cdn.gamer-network.net/2020/usgamer/FINAL-FANTASY-VII-REMAKE-hed-8.jpg" style="width:100%;" />
          </kemet-scroll-snap-slide>
          <kemet-scroll-snap-slide>
            <h3>Heading 3</h3>
            <p>Bacon ipsum dolor amet biltong pork loin boudin ham jerky venison jowl spare ribs fatback, short ribs beef short loin. Porchetta meatball salami ground round, pancetta biltong venison chuck flank. Frankfurter burgdoggen swine, chuck short ribs alcatra strip steak jerky. Rump porchetta fatback kevin flank. Doner chislic salami, brisket rump jowl spare ribs prosciutto bacon buffalo beef ribs beef tenderloin. Chicken ground round andouille, tail jowl leberkas swine brisket. Alcatra filet mignon short ribs short loin, pig chislic turkey.</p>
            <img src="https://cdn.gamer-network.net/2020/usgamer/FINAL-FANTASY-VII-REMAKE-hed-8.jpg" style="width:100%;" />
          </kemet-scroll-snap-slide>
          <kemet-scroll-snap-slide>
            <h3>Heading 4</h3>
            <p>Bacon ipsum dolor amet biltong pork loin boudin ham jerky venison jowl spare ribs fatback, short ribs beef short loin. Porchetta meatball salami ground round, pancetta biltong venison chuck flank. Frankfurter burgdoggen swine, chuck short ribs alcatra strip steak jerky. Rump porchetta fatback kevin flank. Doner chislic salami, brisket rump jowl spare ribs prosciutto bacon buffalo beef ribs beef tenderloin. Chicken ground round andouille, tail jowl leberkas swine brisket. Alcatra filet mignon short ribs short loin, pig chislic turkey.</p>
            <img src="https://cdn.gamer-network.net/2020/usgamer/FINAL-FANTASY-VII-REMAKE-hed-8.jpg" style="width:100%;" />
          </kemet-scroll-snap-slide>
          <kemet-scroll-snap-slide>
            <h3>Heading 5</h3>
            <p>Bacon ipsum dolor amet biltong pork loin boudin ham jerky venison jowl spare ribs fatback, short ribs beef short loin. Porchetta meatball salami ground round, pancetta biltong venison chuck flank. Frankfurter burgdoggen swine, chuck short ribs alcatra strip steak jerky. Rump porchetta fatback kevin flank. Doner chislic salami, brisket rump jowl spare ribs prosciutto bacon buffalo beef ribs beef tenderloin. Chicken ground round andouille, tail jowl leberkas swine brisket. Alcatra filet mignon short ribs short loin, pig chislic turkey.</p>
            <img src="https://cdn.gamer-network.net/2020/usgamer/FINAL-FANTASY-VII-REMAKE-hed-8.jpg" style="width:100%;" />
          </kemet-scroll-snap-slide>
        </div>
        <div slot="pagination">
          <kemet-scroll-snap-paginator></kemet-scroll-snap-paginator>
        </div>
      </kemet-scroll-snap>
    `}
  </Story>
</Preview>

## API

### KemetScrollSnap
<Props of="kemet-scroll-snap" />

### KemetScrollSnapSlide
<Props of="kemet-scroll-snap-slide" />

### KemetScrollSnapPaginator
<Props of="kemet-scroll-snap-paginator" />