@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'
import { StandardCard } from './standard-card.js'
import { Copy } from './copy.js'

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

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

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