@navinc/base-react-components/src/column-carousel.story.js

Nav's Pattern Library

import { ColumnCarouselProvider, useColumnCarouselContext, ColumnCarousel } from './column-carousel'
import { Button } from './button'

export default {
  title: 'General/ColumnCarousel',
  component: ColumnCarousel,
}

const Cycler = () => {
  const { goBackward, goForward, canCycle, currentColumnIndex } = useColumnCarouselContext()

  if (!canCycle) {
    return 'Cannot cycle'
  }

  return (
    <div style={{ display: 'flex', gap: '5px' }}>
      <Button onClick={goBackward}>Previous</Button>
      <Button onClick={goForward}>Next</Button>
      <span>Showing column index {currentColumnIndex}</span>
    </div>
  )
}

export const Basic = ({ activeColumns, totalColumns }) => {
  return (
    <ColumnCarouselProvider activeColumns={activeColumns} totalColumns={totalColumns}>
      <div style={{ overflow: 'hidden', padding: '50px', border: '1px solid #333' }}>
        <Cycler />
        <ColumnCarousel style={{ border: '1px solid #666', padding: '3px', margin: '3px' }}>
          <div style={{ border: '1px solid #999', padding: '3px', margin: '3px' }}>first</div>
          <div style={{ border: '1px solid #999', padding: '3px', margin: '3px' }}>second</div>
          <div style={{ border: '1px solid #999', padding: '3px', margin: '3px' }}>third</div>
        </ColumnCarousel>

        <ColumnCarousel style={{ border: '1px solid #666', padding: '3px', margin: '3px' }}>
          <div style={{ border: '1px solid #999', padding: '3px', margin: '3px' }}>first</div>
          <div style={{ border: '1px solid #999', padding: '3px', margin: '3px' }}>second</div>
          <div style={{ border: '1px solid #999', padding: '3px', margin: '3px' }}>third</div>
        </ColumnCarousel>
      </div>
    </ColumnCarouselProvider>
  )
}

Basic.args = {
  activeColumns: 2,
  totalColumns: 3,
}