@navinc/base-react-components/src/sliding-tabs.story.js

Nav's Pattern Library

import { useState } from 'react'

import SlidingTabs from './sliding-tabs.js'
import Text from './text.js'
import readme from './sliding-tabs.readme.md'

export default {
  title: 'Navigation/SlidingTabs',
  component: SlidingTabs,
  parameters: {
    readme: { content: readme },
  },
}

export const Basic = () => {
  const [filter, setFilter] = useState('summary')
  return (
    <SlidingTabs>
      <Text isActive={filter === 'summary'} onClick={() => setFilter('summary')}>
        Summary
      </Text>
      <Text isActive={filter === 'full-report'} onClick={() => setFilter('full-report')}>
        Full Report
      </Text>
    </SlidingTabs>
  )
}

Basic.parameters = {
  controls: { hidNoControlsWarning: true },
}